body {
    height: 100vh;
}
.modal-open{
    height: -webkit-fill-available !important;
}
.containerFormRegisterCostumer {
    height: 96%;
    background: #f1f1f1;
    max-width: 100%;
    width: 100% !important;
    font-family: "Varela Round", sans-serif;
}

.formRegister {
    position: relative;
    background-color: #ffffff;
    padding: 9px;
    border-radius: 15px;
    box-shadow: 2px 3px 4px #ababab;
    margin: 1% auto 3%;
    width: 50%;
    justify-content: center;
    display: flex;
}

.titleFormRegister {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    width: 52%;
    margin: 8px auto;
}

.formRegister img {
    margin: 0 auto;
    display: flex;
    border-radius: 10px;
    padding: 6px;
    height: auto;
    background: #fec941;
    width: 48px;
}

.fieldRegister {
    width: 100%;
}

.btnRegister {
    text-align: center;
}

.logoRegister {
    text-align: center;
    width: 100%;
}

.logoRegister img {
    height: 70px;
    margin-top: 1%;
}

#termsCustomer-error {
    position: absolute;
    bottom: -10px;
}
.form-group .error{
    font-size: 12px;
    color: #ed555b
}
.woocommerce-cart .formRegister, .woocommerce-checkout .formRegister {
    width: 100%;
}
#formRegisterCustomer{
    width: 100%;
}
.termsCustomerLabel {
    margin-left: 6%;
}

.formRegisterCustomer {
    width: 80%;
}

#btnRegisterCustomer {
    margin-top: 10px;
    margin-bottom: 10px;
}

#termsCustomer {
    position: absolute;
    left: 16px;
    top: -2px;
}

.containerFormRegisterCostumer::before {
    background-image: url('personaje-banner-mis-compras.png');
    position: absolute;
    bottom: 0;
    left: 3%;
    opacity: 50%;
    width: 1500px;
    height: 442px;
    background-repeat: no-repeat;
    background-size: 376px;
    max-height: max-content;
    min-height: max-content;
}

.form-group input {
    border: 1px solid #cecece;
    border-radius: 5px;
}

.btnRegister input {
    background-color: #fec941;
    padding: 5px 20px;
    border: none;
    box-shadow: 2px 3px 3px #ececec;
    color: black;
    font-weight: 600;
}

.btnRegister input:hover {
    background: #ffd974;
}

.formRegister a {
    color: #fec941;
}

footer {
    position: absolute !important;
}

.sw-standar-css .sw-titulo-ok.sw-admon-home,
.sw-standar-css.sw-admon-home .btn-sw {
    background-color: #fec941 !important;
    border: none !important;
}

.sw-standar-css.sw-admon-home .btn-cancel-ok {
    background-color: #ffffff !important;
    border: 1px solid #fec941 !important;
    border-left-color: #fec941 !important;
    border-right-color: #fec941 !important;
    color: #fec941 !important;
}

.sw-standar-css .sw-titulo {
    background: #fec942 !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background: #fec942 !important;
    border-radius: 15px !important;
}

.sw-standar-css .sw-titulo i {
    font-weight: 600;
}

@media (max-width:500px) {
    .formRegister {
        width: 90%;
    }

    .titleFormRegister {
        font-size: 14px;
        width: 80%;
    }

    .containerFormRegisterCostumer::before {
        background-image: none;
    }

    footer {
        position: fixed !important;
    }

    .containerFormRegisterCostumer {
        height: 120%;
    }

    ul#menu-legal-menu {
        width: 100%;
        display: flex;
        overflow-x: scroll;
        max-width: 100%;
    }

    ul#menu-legal-menu li {
        width: auto !important;
    }

    ul#menu-legal-menu li a {
        max-width: 100%;
    }

    .menu-image-title-after.menu-image-title {
        width: max-content;
    }

    .termsCustomerLabel {
        margin-left: 8%;
    }
}

@media (min-width:1358px) {
    .formRegister {
        margin: 2% auto 5%;
        width: 43%;
    }

    .containerFormRegisterCostumer::before {
        bottom: 8%;
        background-size: 466px;
        height: 470px;
    }

    .titleFormRegister {
        margin: 24px auto;
        width: 30%;
    }

    .containerFormRegisterCostumer {
        height: 91vh;
    }
}

@media (min-width:501px) and (max-width:1024px) {
    .titleFormRegister {
        width: 80%;
    }

    .formRegister {
        width: 70%;
    }

    footer {
        position: relative !important;
    }
}

.swal2-popup .swal2-styled.swal2-cancel {
    background-color: #aaa0!important;
    color: #fec941!important;
    border: 1px solid #fec941!important;
}

.colTermsCustomer {
    margin-top: 5px;
    margin-bottom: 10px;
}

/***** style modal login y  registro ******/

.formulario_login.hidden {
    display: none !important;
  }
  
  .formulario_registro.hidden {
    display: none !important;
  }
  
  .formulario_login {
    
    position: relative;
    background-color: #ffffff;
    padding: 9px;
    border-radius: 15px;
    box-shadow: 2px 3px 4px #ababab;
    margin: 1% auto 3%;
    width: 75%;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }
  
  a.btn-close-shopModal {
    position: absolute;
    right: 0;
    height: 35px;
    width: 35px;
    border: solid 2px #ccc;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    font-size: 30px;
    top: 10px;
    color: #ccc;
    cursor: pointer;
  }
  
  .close_container {
    position: relative;
  }

  p.login-username {
    display: flex;
    flex-direction: column;
}

.login-password {
    display: flex;
    flex-direction: column;
}

.formulario_login #loginform .input {
    border-radius: 5px !important;
    border: 1px solid #cecece !important;
    padding-left: 15px !important;
    background:#fff!important;

}

.formulario_login #loginform input:-webkit-autofill,
.formulario_login #loginform input:-webkit-autofill:hover, 
.formulario_login #loginform input:-webkit-autofill:focus, 
.formulario_login #loginform input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.form-login-container {
    width: 100%;
    padding: 15px;
}
.formulario_login #loginform .login-submit .button{
background-color: #fec941;
    padding: 5px 20px;
    border: none;    
    color: black;
    font-weight: 600;
    box-shadow: 2px 3px 3px #9c9c9c;
    border-radius: 25px;
}

.formulario_login #loginform .login-submit .button:disabled {
    background-color: #fec94157;
    padding: 5px 20px;
    border: none;
    color: #999;
    font-weight: 600;
    box-shadow: 2px 3px 3px #9c9c9c;
    border-radius: 25px;
}

p.login-submit {
    text-align: center;
}

p#nav-custom-login {
    text-align: center;
    color: #000 !important;
    text-decoration: underline;
}

p#nav-custom-login a {
   
    color: #000 !important;
    text-decoration: underline;
    font-weight: 600;
}

.message_login_shop {
    padding: 8px 8px 8px 30px;
    margin: 10px 14px 0px 14px;
    background-color: #f9f9f9;
    position: relative;
    border-left: 3px solid #ed555b;
}

.message_login_shop::before {
    content: "\e013";
    color: #ed555b !important;
    font-family: WooCommerce;
    display: inline-block;
    position: absolute;
    top: 0.6em;
    left: 0.8em;
    
}

span.loading_login {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #fffffff2;
    border-radius: 15px;
    text-align: center;
    display: none;
}
span.loading_login p {
    margin-top: 30px;
    font-size: 16px;
}
span#circle_load {
    width: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #ffffff 95%, #0000) 50% 1px / 12px 12px no-repeat, radial-gradient(farthest-side, #0000 calc(100% - 25px), #646b79e8 0);
    animation: circleLoad  1s infinite linear;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
}
@keyframes circleLoad  {
    to{
        transform: rotate(1turn)}
}