@charset "UTF-8";

@font-face {
  font-family: "sitio-web";
  src: url("../fonts/sitio-web.eot");
  src: url("../fonts/sitio-web.eot?#iefix") format("embedded-opentype"),
    url("../fonts/sitio-web.woff") format("woff"),
    url("../fonts/sitio-web.ttf") format("truetype"),
    url("../fonts/sitio-web.svg#sitio-web") format("svg");
  font-weight: normal;
  font-style: normal;

}

.inputdinamico {
  font-size: 11px;
  height: 30px;
  border-color: #DDDCDC;
}

[data-icon]:before {
  font-family: "sitio-web" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "sitio-web" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bg-green {
  background-color: #A3C86D;
}

.bg-blue {
  background-color: #7ACBEE;
}

.bg-yellow {
  background-color: #FDD761;
}

.bg-red {
  background-color: #FF7857;
}

.panel-default>.panel-heading {
  background-color: #f5f5f5;
  border-bottom: 2px solid #3498DB;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 15px;
}

.panel-box {
  background-color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  border: 10px 0 solid;
}

.panel-value {
  width: 50%;
}

.panel-icon {
  padding: 30px;
  width: 50%;
  border-radius: 0;
}

.panel-icon {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.panel-value {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.panel-value h2 {
  margin-top: 30px;
}

.panel-icon i {
  line-height: 65px;
  font-size: 50px;
  color: #fff;
  item-align: center;
}

.ficha {
  width: 100px;
  cursor: pointer;
}

.ficha.activada {
  border-color: black;
  background-color: #DDDCDC;
}

.gps {
  font-size: 20px;
  item-align: center;
}

.flujo {
  font-size: 20px;
  color: green;
  item-align: center;
}

.emitir {
  font-size: 20px;
  color: #000000;
  item-align: center;
}

.cargarimg {
  font-size: 20px;
  color: #0785FC;
  item-align: center;
}

.printimg {
  font-size: 20px;
  color: #085195;
  item-align: center;
}

.guardado {
  font-size: 20px;
  color: #30FC07;
  item-align: center;
}

.editar {
  font-size: 20px;
  color: #ff8000;
  item-align: center;
}

.eliminar {
  font-size: 20px;
  color: #ff0000;
  item-align: center;
}

.posg {
  border: 1px solid;
  border-color: #9C9C9C;
  height: 150px;
  border-radius: 10px;
  padding: 7px;
  text-align: center;
  font-size: 9px;

}

.img_pos{
  width: fit-content;
  object-fit: cover;
}

.alerta_roja {
  align: center;
  padding-left: 10px;
  font-weight: bold;
  color: #FFFFFF;
  border: 1px solid;
  border-color: #FF0000;
  background-color: #FF0000;
  border-radius: 8px;
}

.alerta_naranja {
  align: center;
  padding-left: 10px;
  font-weight: bold;
  color: #000000;
  border: 1px solid;
  border-color: #E7D40A;
  background-color: #E7D40A;
  border-radius: 8px;
}

.normal {
  align: center;
  padding-left: 10px;
  font-weight: bold;
  color: #FFFFFF;
  border: 1px solid;
  border-color: #6DC36D;
  background-color: #6DC36D;
  border-radius: 8px;
}

.acceso_libre {
  align: center;
  padding-left: 10px;
  color: #FFFFFF;
  border: 1px solid;
  border-color: #00AAE4;
  background-color: #A2CADF;
  border-radius: 5px;
}

.acceso_comercial {
  align: center;
  padding-left: 10px;
  color: #FFFFFF;
  border: 1px solid;
  border-color: #6DC36D;
  background-color: #6DC36D;
  border-radius: 8px;
}

#icon {
  position: absolute;
  display: block;
  bottom: 1.5rem;
  right: 1rem;
  user-select: none;
  cursor: pointer;
}

/** TARJETAS CREDITO **/
.contenedor {
  width: 90%;
  max-width: 1000px;
  padding: 40px 20px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Estilos Generales de las Tarjetas ----------*/
.tarjeta {
  width: 100%;
  max-width: 550px;
  position: relative;
  color: #fff;
  transition: .3s ease all;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  cursor: pointer;
  z-index: 2;
}

.tarjeta.active {
  transform: rotateY(180deg);
}

.tarjeta>div {
  padding: 30px;
  border-radius: 15px;
  min-height: 315px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 10px 0 rgba(90, 116, 148, 0.3);
}

/* ---------- Tarjeta Delantera ----------*/

.tarjeta .delantera {
  width: 100%;
  background: url(../images/bg-tarjeta/bg-tarjeta-01.jpg);
  background-size: cover;
}

.delantera .logo-marca {
  text-align: right;
  min-height: 50px;
}

.delantera .logo-marca img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 80px;
}

.delantera .chip {
  width: 100%;
  max-width: 50px;
  margin-bottom: 20px;
}

.delantera .grupo .label {
  font-size: 16px;
  color: #7d8994;
  margin-bottom: 5px;
}

.delantera .grupo .numero,
.delantera .grupo .nombre,
.delantera .grupo .expiracion {
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
  text-align: left;
}

.delantera .flexbox {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* ---------- Tarjeta Trasera ----------*/
.trasera {
  background: url(../images/bg-tarjeta/bg-tarjeta-01.jpg);
  background-size: cover;
  position: absolute;
  top: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.trasera .barra-magnetica {
  height: 40px;
  background: #000;
  width: 100%;
  position: absolute;
  top: 30px;
  left: 0;
}

.trasera .datos {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
}

.trasera .datos p {
  margin-bottom: 5px;
}

.trasera .datos #firma {
  width: 70%;
}

.trasera .datos #firma .firma {
  height: 40px;
  background: repeating-linear-gradient(skyblue 0, skyblue 5px, orange 5px, orange 10px);
}

.trasera .datos #firma .firma p {
  line-height: 40px;
  font-family: 'Liu Jian Mao Cao', cursive;
  color: #000;
  font-size: 30px;
  padding: 0 10px;
  text-transform: capitalize;
}

.trasera .datos #ccv {
  width: 20%;
}

.trasera .datos #ccv .ccv {
  background: #fff;
  height: 40px;
  color: #000;
  padding: 10px;
  text-align: center;
}

.trasera .leyenda {
  font-size: 14px;
  line-height: 24px;
}

.trasera .link-banco {
  font-size: 14px;
  color: #fff;
}

/* ---------- Contenedor Boton ----------*/
.contenedor-btn .btn-abrir-formulario {
  width: 50px;
  height: 50px;
  font-size: 20px;
  line-height: 20px;
  background: #2364d2;
  color: #fff;
  position: relative;
  top: -25px;
  z-index: 3;
  border-radius: 100%;
  box-shadow: -5px 4px 8px rgba(24, 56, 182, 0.4);
  padding: 5px;
  transition: all .2s ease;
  border: none;
  cursor: pointer;
}

.contenedor-btn .btn-abrir-formulario:hover {
  background: #1850b1;
}

.contenedor-btn .btn-abrir-formulario.active {
  transform: rotate(45deg);
}

/* ---------- Formulario Tarjeta ----------*/
.formulario-tarjeta {
  background: #fff;
  width: 100%;
  max-width: 700px;
  padding: 150px 30px 30px 30px;
  border-radius: 10px;
  position: relative;
  top: -150px;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path .3s ease-out;
}

.formulario-tarjeta.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.formulario-tarjeta label {
  display: block;
  color: #7d8994;
  margin-bottom: 5px;
  font-size: 16px;
}

.formulario-tarjeta input,
.formulario-tarjeta select,
.btn-enviar {
  border: 2px solid #CED6E0;
  font-size: 18px;
  height: 50px;
  width: 100%;
  padding: 5px 12px;
  transition: .3s ease all;
  border-radius: 5px;
}

.formulario-tarjeta input:hover,
.formulario-tarjeta select:hover {
  border: 2px solid #93BDED;
}

.formulario-tarjeta input:focus,
.formulario-tarjeta select:focus {
  outline: rgb(4, 4, 4);
  box-shadow: 1px 7px 10px -5px rgba(90, 116, 148, 0.3);
}

.formulario-tarjeta input {
  margin-bottom: 20px;
  text-transform: uppercase;
}

.formulario-tarjeta .flexbox {
  display: flex;
  justify-content: space-between;
}

.formulario-tarjeta .expira {
  width: 100%;
}

.formulario-tarjeta .ccv {
  min-width: 100px;
}

.formulario-tarjeta .grupo-select {
  width: 100%;
  margin-right: 15px;
  position: relative;
}

.formulario-tarjeta select {
  -webkit-appearance: none;
}

.formulario-tarjeta .grupo-select i {
  position: absolute;
  color: #CED6E0;
  top: 18px;
  right: 15px;
  transition: .3s ease all;
}

.formulario-tarjeta .grupo-select:hover i {
  color: #93bfed;
}

.formulario-tarjeta .btn-enviar {
  border: none;
  padding: 10px;
  font-size: 22px;
  color: #fff;
  background: #2364d2;
  box-shadow: 2px 2px 10px 0px rgba(0, 85, 212, 0.4);
  cursor: pointer;
}

.formulario-tarjeta .btn-enviar:hover {
  background: #1850b1;
}

/** TARJETAS CREDITO **/

@media screen and (max-width: 1100px) {
  .printimg {
    font-size: 40px;
  }
}

@media screen and (max-width: 400px) {
  .tarjeta {
    width: 100%;
    max-width: 100%;
  }
}

.icon-menu:before {
  content: "\61";
}

.icon-facebook:before {
  content: "\62";
}

.icon-twitter:before {
  content: "\63";
}

.icon-youtube:before {
  content: "\64";
}

.icon-whatsapp:before {
  content: "\65";
}

.icon-mail:before {
  content: "\66";
}

.icon-location:before {
  content: "\67";
}

.icon-phone:before {
  content: "\68";
}

.icon-shopping-cart:before {
  content: "\69";
}

.icon-dropdown:before {
  content: "\6a";
}

.icon-exit:before {
  content: "\6b";
}

.icon-power:before {
  content: "\6c";
}

.icon-setup:before {
  content: "\6d";
}

.icon-bell:before {
  content: "\6e";
}

.icon-inbox:before {
  content: "\6f";
}

.icon-print:before {
  content: "\70";
}

.icon-archive:before {
  content: "\71";
}

.icon-file-new:before {
  content: "\72";
}

.icon-saver:before {
  content: "\73";
}

.icon-upload:before {
  content: "\74";
}

.icon-download:before {
  content: "\75";
}

.icon-user:before {
  content: "\76";
}

.icon-circle-o:before {
  content: "\77";
}

.icon-th-list:before {
  content: "\78";
}

.icon-bar-chart:before {
  content: "\79";
}

.icon-calendar:before {
  content: "\7a";
}

.icon-object-group:before {
  content: "\41";
}

.icon-circle:before {
  content: "\42";
}

.icon-search:before {
  content: "\43";
}

.icon-money:before {
  content: "\44";
}

.icon-question-circle:before {
  content: "\45";
}

.icon-info-circle:before {
  content: "\46";
}

.icon-cubes:before {
  content: "\47";
}

.icon-desktop:before {
  content: "\48";
}

.icon-cutlery:before {
  content: "\49";
}

.icon-comments-o:before {
  content: "\4a";
}

.icon-creative-commons:before {
  content: "\4b";
}

.icon-home:before {
  content: "\4c";
}

.icon-hospital-o:before {
  content: "\4d";
}

.icon-life-ring:before {
  content: "\4e";
}

.icon-picture-o:before {
  content: "\4f";
}

.icon-pie-chart:before {
  content: "\50";
}

.icon-signal:before {
  content: "\51";
}

.icon-sitemap:before {
  content: "\52";
}

.icon-truck:before {
  content: "\53";
}

.icon-users:before {
  content: "\54";
}

.icon-industry:before {
  content: "\55";
}

.icon-ambulance:before {
  content: "\56";
}

.icon-anchor:before {
  content: "\57";
}

.icon-area-chart:before {
  content: "\58";
}

.icon-at:before {
  content: "\59";
}

.icon-binoculars:before {
  content: "\5a";
}

.icon-building:before {
  content: "\30";
}

.icon-building-o:before {
  content: "\31";
}

.icon-bullhorn:before {
  content: "\32";
}

.icon-bus:before {
  content: "\33";
}

.icon-calculator:before {
  content: "\34";
}

.icon-camera:before {
  content: "\35";
}

.icon-cart-plus:before {
  content: "\36";
}

.icon-credit-card:before {
  content: "\37";
}

.icon-fax:before {
  content: "\38";
}

.icon-film:before {
  content: "\39";
}

.icon-line-chart:before {
  content: "\21";
}

.icon-list-alt:before {
  content: "\22";
}

.icon-male:before {
  content: "\23";
}

.icon-pencil:before {
  content: "\24";
}

.icon-plus-square:before {
  content: "\25";
}

.icon-pencil-square:before {
  content: "\26";
}

.icon-question:before {
  content: "\27";
}

.icon-power-off:before {
  content: "\28";
}

.icon-ship:before {
  content: "\29";
}

.icon-tachometer:before {
  content: "\2a";
}

.icon-trash-o:before {
  content: "\2b";
}

.icon-trash:before {
  content: "\2c";
}

.icon-toggle-off:before {
  content: "\2d";
}

.icon-toggle-on:before {
  content: "\2e";
}

.icon-university:before {
  content: "\2f";
}

.icon-usd:before {
  content: "\3a";
}

.icon-video-camera:before {
  content: "\3b";
}

.icon-volume-up:before {
  content: "\3c";
}

.icon-wheelchair:before {
  content: "\3d";
}

.icon-wrench:before {
  content: "\3e";
}