#whitelabel-tarjeta-formulario .input-container,

#whitelabel-tarjeta-formulario .card-container,

#whitelabel-tarjeta-formulario .exp-cvv-container {

  margin: 0 !important;

  padding: 0 !important;

}



#whitelabel-tarjeta-formulario h3 {

  color: #000;

  font-weight: bold;

}



#whitelabel-tarjeta-formulario .card-form {

  max-width: 400px;

  padding: 20px;

  background-color: #fff;

  border-radius: 5px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



#whitelabel-tarjeta-formulario .input-container {

  position: relative;

  display: flex;

  align-items: flex-start;

  margin-top: 15px !important;

}



#whitelabel-tarjeta-formulario input[type="password"],

#whitelabel-tarjeta-formulario input[type="text"],

#whitelabel-tarjeta-formulario select {

  width: 100%;

  border: 1px solid #ffffff;

  height: 35px !important;

  border-bottom: 1px solid #ccc;

  box-sizing: border-box !important;

  font-size: 12px !important;

  padding-top: 15px;

  background-color: #fff;

  color: #000;

}



#whitelabel-tarjeta-formulario label {

  position: absolute;

  top: -10px !important;

  left: 0;

  font-size: 12px !important;

  color: #555 !important;

}



#whitelabel-tarjeta-formulario select {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



#whitelabel-tarjeta-formulario input[type="text"]:focus,

#whitelabel-tarjeta-formulario input[type="password"]:focus,

#whitelabel-tarjeta-formulario select:focus {

  border: none;

  outline: none;

  border-bottom: 1px solid #ccc;

}



#whitelabel-tarjeta-formulario .exp-cvv-container {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}



#whitelabel-tarjeta-formulario .exp-cvv-container .input-container {

  width: calc(33% - 10px);

  position: relative;

  display: flex;

  flex-direction: column;

}



/* Los iconos se pintan en los DOS checkouts, de ahi los dos ancestros: el id del

   formulario clasico y la clase .whitelabel-card-fields, que llevan ese formulario y

   tambien el de Blocks (Blocks no tiene ningun id contenedor). Anidadas y no sueltas

   a proposito: sueltas valen (0,1,0) y pierden contra las reglas de los plugins

   hermanos que conviven en la misma pagina de checkout clasico

   —#tarjeta-formulario .input-icon-visa, (1,1,0)—, cuyas imagenes salen de un host

   externo. Con ancestro propio ninguna regla ajena alcanza estos nodos. */

#whitelabel-tarjeta-formulario .input-icon-master,

#whitelabel-tarjeta-formulario .input-icon-visa,

#whitelabel-tarjeta-formulario .input-icon-amex,

#whitelabel-tarjeta-formulario .input-icon-unknown,

.whitelabel-card-fields .input-icon-master,

.whitelabel-card-fields .input-icon-visa,

.whitelabel-card-fields .input-icon-amex,

.whitelabel-card-fields .input-icon-unknown {

  display: inline-block;

  width: 40px;

  height: 21px;

  background-size: cover;

  background-repeat: no-repeat;

}



#whitelabel-tarjeta-formulario .input-icon-master,

.whitelabel-card-fields .input-icon-master {

  background-image: url("../img/card_master.svg");

}



#whitelabel-tarjeta-formulario .input-icon-visa,

.whitelabel-card-fields .input-icon-visa {

  background-image: url("../img/card_visa.svg");

}



#whitelabel-tarjeta-formulario .input-icon-amex,

.whitelabel-card-fields .input-icon-amex {

  background-image: url("../img/card_amex.svg");

}



#whitelabel-tarjeta-formulario .input-icon-unknown,

.whitelabel-card-fields .input-icon-unknown {

  background-image: url("../img/card_unknown.svg");

}



.woocommerce-checkout #payment .payment_box {

  background-color: #fff !important;

}



#whitelabel-tarjeta-formulario .whitelabel-images {

  margin-top: 15px;

}



/* spinner de cargando compra */

/* Nombres propios: los hermanos declaran .loader y @keyframes spin identicos, y

   cualquier tema podria declarar otros distintos. */

@keyframes whitelabel-spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



.whitelabel-loader {

  border: 6px solid #f3f3f3;

  border-top: 6px solid #0071a1;

  /* color primario */

  border-radius: 50%;

  width: 40px;

  height: 40px;

  animation: whitelabel-spin 1s linear infinite;

  margin: 0 auto;

}