html, body {
    height: 100%;
}
body {
    background-color: #c09dd7;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    overflow: initial !important;
}
#menu {
    width: 100%;
}
#menu li {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    transition: opacity 0.2s linear;
}
#menu li button {
    margin-right: 20px;
}
#menu li button:last-child {
    margin-right: 10px;

}
#menu li button span {
    text-transform: uppercase;
}
#section-header {
    background: url("/themes/tellmebye20/img/bg_login_vet1.png") no-repeat;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
}
/*#section-header:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: rgba(0,0,0,0.4);
}*/
#login-container {
    background: #fff;
    border-radius: 4px;
    float: none;
    height: 685px;
    padding: 0 15px;
    margin: 0px auto 90px;
}
#login-container .login-header {
    background: #f5f5f5;
    border-radius: 4px 4px 0 0;
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-size: 30px;
    font-weight: 300;
    /*color: #20c6a1;*/
}
#login-container h2 {
    height: 90px;
    line-height: 80px;
    text-align: center;
    font-size: 30px;
    font-weight: 300;
    color: #b3b3b3;
}
#login-container .form-control {
    height: 60px;
    border: 2px solid #eaeaea;
    box-shadow: none;
    outline: 0;
    color: #878787;
}
#login-container .form-control:focus {
    border-color: #bfbfbf;
    color: #878787;
}
#login-container .btn-create-account {
    width: 100%;
    height: 60px;
}
#login-container .btn-create-account span {
    text-transform: uppercase;
}
#passverifier {
    padding: 15px 0;
}
#passverifier .level{
    height: 5px;
    width: 32%;
    background: #eaeaea;
    margin-left: 2%;
    float: left;
}
#passverifier .level:first-child {
    margin-left: 0;
}
#passverifier.step1 .level:first-child {
    background: #5FBE65;
}
#passverifier.step2 .level:first-child,
#passverifier.step2 .level:nth-child(2){
    background: #5FBE65;
}
#passverifier.step3 .level {
    background: #5FBE65;
}
#passverifier .secure {
    display: none;
    padding: 15px 0 30px;
}
#passverifier .secure .fa,
#passverifier .secure span {
    color: #5FBE65;
}
#passverifier.step3  .secure {
    display: block;
}
.condiciones-text p {
    text-align: center;
    color: #b3b3b3;
    font-weight: 400;
    padding: 30px 0;

}
.condiciones-text p a {
    color: #878787;
}
#section-footer-top {
    background: #fff;
    min-height: 300px;
}

#section-footer-top li {
    font-size: 13px;
    color: #b3b3b3;
    line-height: 24px;
}
#section-footer-top li:not(.top) {
    cursor: pointer;
}
#section-footer-top li:not(.top):hover{
    /*color: #20c6a1;*/
}
#section-footer-top label {
    color: #b3b3b3;
    font-size: 1.1em;
    margin-bottom: 15px;
}
#section-footer-top select {
    background: #eaeaea;
    border: 0 none;
    box-shadow: none;
    outline: 0;
}
#section-footer-top select:focus {
    box-shadow: none;
}
#section-footer-bottom {
    background: #00368c;
    min-height: 60px;
    width: 100%;
    font-size: 13px;
    color: #fff;
}
#section-footer-bottom .row {
    height: 55px;
    line-height: 55px;
}
#section-footer-top ul {
    list-style: none;
    padding-left: 0;
}
#section-footer-top ul li.top {
    text-transform: uppercase;
    margin-bottom: 30px;
    color: #00ace4;
}
#section-footer-top .col {
    margin-top: 40px;
}
#section-footer-top li.social i {
    color: #b3b3b3;
    font-size: 24px;
    margin-right: 2px;
}
#section-footer-top li.social a {
    text-decoration: none;
}
#section-footer-top li.social i:hover {
    /*color: #20c6a1;*/
}
.bottom-anchor {
    text-align: center;
    position: relative;
    top: -24px;
    color: #000;
    font-size: 14px;
}
.bottom-anchor a {
    /*color: #20c6a1;*/
}

.redes-login{
    margin-top:50px;
    width: 100%;
    float: left;
}

.redes-login .text-redes-login{
    font-size: 13px;
    font-weight: 600;
    color: #b3b3b3;
    margin-top: 10px;
}
.redes-login .buttons-redes-login button{
    width: 40px;
    height: 40px;
    float: right;
    margin-left: 5px;
}
.redes-login .buttons-redes-login button i{
    font-size: 16px;
    margin-right: 0px;
}

.redes-login .buttons-redes-login .button-google{
    background-color: #DD4B39;
    color: #fff;
}
.redes-login .buttons-redes-login .button-facebook{
    background-color: #3B589E;
    color: #fff;
}
.gohome {cursor: pointer;}

#logo_container {
    margin-left: 50%;
    transform: translate(-50%);
    width: 300px;
    height: 80px;
}
#logo_frase {
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    color: white;
    margin: 15px;
}

@media only screen and (max-width : 768px) {
    #menu button {
        display: none;
    }
    #login-container {
        min-height: 650px;
        height: auto;
    }
    #login-container h2 {
        line-height: 34px;
        font-size: 21px;
    }
    #login-container .login-header {

        height: 80px;
        line-height: 80px;
        font-size: 23px;
    }

}

@media (max-width : 414px) {

    .redes-login .buttons-redes-login {
        width: 100%!important;
        margin-top : 20px;
    }
    .redes-login .buttons-redes-login .button-google{
        margin-right:8%;
        width:40%;
    }
    .redes-login .buttons-redes-login .button-facebook{
        margin-left:0px;
        width:40%;
    }

    .bottom-anchor{
        margin-bottom:60px;
    }

}

@media (max-width : 374px) {

    /*#section-footer-bottom .container .row div.col-md-6{
            width:100%!important;
        }

        #section-footer-bottom .secure-imgs{
            float:inherit!important;
        }
        #section-footer-bottom .secure-imgs img.ssl{
            margin-left: 0px!important;
        }*/

    #section-footer-bottom .container .row div:first-child{
        width:35%;
    }
    #section-footer-bottom .container .row div:nth-child(2){
        width:65%;
        padding-left:0px;
        padding-right:0px;
    }

    #section-footer-bottom .logo{
        width: 100%!important;
    }

    #section-footer-bottom .secure-imgs{
        width: 100%!important;
    }
    #section-footer-bottom .secure-imgs img{
        margin-left:10px!important;
    }
    #section-footer-bottom .secure-imgs img.ssl {
        margin-left:0px!important;
    }
    #section-footer-bottom .secure-imgs img.logosPart {
        width: 22em;
        margin: 5px 0 0 0;
    }
    

}
#menu .logo{
    width: 220px;
}
#menu .logo.type1 {
    /*background-image: url("/themes/tellmebye20/img/business/logo_axa_tellmebye_negativo.png");*/
    background-size: contain;
}

#menu .button-turquesa span, 	#menu .button-turquesa i {
    color: #fff;
}

#menu .button-turquesa{
    border: 2px solid #fff;
}
#menu .button-turquesa:hover, #menu .button-turquesa.hover {
    color: #b3b3b3;
    background: #fff;
}
#menu .button-turquesa:hover span, #menu .button-turquesa.hover span {
    color: #b3b3b3;
    background: #fff;
}
.bottom-anchor a {
    color: #000;
}
.button-turquesa{
    border: 2px solid #c09dd7;
}
.button-turquesa span{
    color: #c09dd7;
}
.button-turquesa:hover{
    background: #c09dd7;
}
.button-turquesa:hover span, .button-turquesa.hover span {
    color: #fff;
    background: #c09dd7;
}
#login-container .login-header {
    color: #c09dd7;
}
#section-footer-top ul li.top {
    color: #c09dd7;
}
#section-footer-top li.social i:hover {
    color: #c09dd7;
}
#menu .button-turquesa:hover span, #menu .button-turquesa.hover span{
    color: #c09dd7;
}
.button-white:not(.no-hover):hover span {
    color: #c09dd7;
}/* ===== Rediseno login veterinario (Login_Mascotas): TODO dentro de la caja blanca redondeada ===== */
#login-container.vet-login {
    height: auto;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    max-width: 460px;
    float: none;
    margin: 0 auto;
}
/* 1) Logo sobre fondo blanco (arriba) */
.vet-login .vet-login-logo {
    background: #fff;
    text-align: center;
    padding: 28px 20px 22px;
}
.vet-login .vet-login-logo #logo_container {
    position: static;
    display: inline-block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 120px;
    transform: none;
}
/* 2) Banda gris con la frase en gris oscuro */
#login-container.vet-login .login-header.vet-login-band {
    background: #fff;
    border-bottom: 1px solid #ececec;
    color: #555;
    border-radius: 0;
    height: auto;
    line-height: 1.3;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
/* 3) Cuerpo del formulario */
.vet-login .vet-login-body {
    padding: 26px 26px 30px;
}
.vet-login .vet-login-body .form-group { margin-bottom: 16px; }
/* 4) Mensaje de ayuda (telefono de contacto de la funeraria) */
.vet-login .vet-login-help {
    margin-top: 6px;
    text-align: center;
    color: #8a8a8a;
    font-size: 14px;
    line-height: 1.4;
}
.vet-login .vet-login-help a {
    color: #555;
    font-weight: 700;
    white-space: nowrap;
}

/* Login_Mascotas: en pantalla VERTICAL (movil en vertical) usar la imagen de fondo vertical. */
@media (orientation: portrait) {
    #section-header {
        background-image: url("/themes/tellmebye20/img/bg_login_vet_vertical.png");
    }
}

/* Login_Mascotas: slideshow de fondo con FADE cruzado (2 capas). La caja va por ENCIMA (z-index).
   Las capas .vet-bg las controla el JS (imagen + opacidad + z 0/1); nunca se ve negro. */
#section-header { position: relative; }
#section-header > .container { position: relative; z-index: 5; }
.vet-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
}

/* Login_Mascotas: caja del login SEMI-TRANSPARENTE para que se vea la foto de fondo (frosted glass). */
#login-container.vet-login {
    background: rgba(255, 255, 255, 0.48) !important;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
/* Logo y banda transparentes -> el translucido de la caja se ve uniforme por toda ella. */
#login-container.vet-login .vet-login-logo,
#login-container.vet-login .login-header.vet-login-band {
    background: transparent !important;
}

/* Login_Mascotas: frases rotativas GRANDES en la parte inferior (sobre la foto de fondo). */
.vet-frases {
    position: absolute;
    left: 0; right: 0;
    bottom: 42px;
    z-index: 6;
    text-align: center;
    padding: 0 24px;
    pointer-events: none;
}
.vet-frase {
    display: inline-block;
    max-width: 900px;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
    will-change: opacity, transform;
}
.vet-frase i {
    margin-left: 10px;
    opacity: .95;
}
@media (max-width: 768px) {
    .vet-frase { font-size: 19px; }
    .vet-frases { bottom: 24px; padding: 0 16px; }
}

/* ===== Ajustes pedidos: caja arriba + frases DENTRO de la caja ===== */
/* Caja pegada arriba con 100px de margen (no centrada verticalmente). */
#section-header {
    justify-content: flex-start;
    padding-top: 100px;
    padding-bottom: 48px;
}
/* Mensaje de ayuda en gris muy oscuro. */
#login-container.vet-login .vet-login-help {
    color: #262626;
}
#login-container.vet-login .vet-login-help a {
    color: #111;
}
/* Frases AHORA dentro de la caja: estaticas, texto oscuro, tamaño de la banda (~17px).
   Sobrescriben el estilo anterior (blancas/absolutas sobre la foto). */
#login-container.vet-login .vet-frases {
    position: static;
    z-index: auto;
    pointer-events: auto;
    text-align: center;
    margin-top: 16px;
    padding: 16px 6px 4px;
    border-top: 1px solid rgba(0, 0, 0, .14);
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#login-container.vet-login .vet-frase {
    display: inline-block;
    max-width: 100%;
    color: #1b1b1b;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
}
#login-container.vet-login .vet-frase i {
    color: #1b1b1b;
    margin-left: 8px;
    opacity: .9;
}
@media (max-width: 768px) {
    #login-container.vet-login .vet-frase { font-size: 15px; }
    #login-container.vet-login .vet-frases { min-height: 84px; }
    #section-header { padding-top: 70px; }
}

/* ===== Boton "Registro / Solicitar acceso profesional" ===== */
#login-container.vet-login .vet-btn-registro {
    width: 100%;
    height: 48px;
    background: transparent;
    font-weight: 600;
    text-transform: none;
    border-radius: 8px;
}
#login-container.vet-login .vet-btn-registro i { margin-right: 6px; }

/* ===== Modal de solicitud de acceso profesional ===== */
.vet-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 24px;
    overflow-y: auto;
}
.vet-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
.vet-modal-card {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 640px;
    margin: 40px auto;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    padding: 30px 30px 26px;
}
.vet-modal-x {
    position: absolute; top: 10px; right: 16px;
    border: 0; background: transparent;
    font-size: 30px; line-height: 1; color: #999; cursor: pointer;
}
.vet-modal-x:hover { color: #333; }
.vet-modal-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #1b1b1b; }
.vet-modal-intro { margin: 0 0 18px; color: #444; font-size: 15px; line-height: 1.45; }
.vet-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.vet-field { display: flex; flex-direction: column; }
.vet-field--full { grid-column: 1 / -1; }
.vet-field label { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.vet-modal .form-control { height: 42px; border: 1px solid #d8d8d8; border-radius: 8px; box-shadow: none; color: #222; padding: 6px 12px; }
.vet-modal textarea.form-control { height: auto; }
.vet-hp { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; opacity: 0; }
.vet-modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; }
.vet-modal-actions .btn, .vet-modal-ok .btn { height: 46px; padding: 0 22px; font-weight: 600; border-radius: 8px; }
.vet-btn-cancel { background: #ececec; color: #333; }
.vet-btn-cancel:hover { background: #e0e0e0; color: #333; }
.vet-btn-send:hover { filter: brightness(0.94); }
.vet-modal-ok { text-align: center; padding: 24px 10px 8px; }
.vet-ok-icon { font-size: 56px; color: #3bb54a; margin-bottom: 6px; }
.vet-modal-ok p { color: #444; font-size: 16px; line-height: 1.45; margin: 0 auto 22px; max-width: 420px; }
@media (max-width: 560px) {
    .vet-form-grid { grid-template-columns: 1fr; }
    .vet-modal-card { padding: 24px 18px 20px; margin: 16px auto; }
    .vet-modal-actions { flex-direction: column-reverse; }
    .vet-modal-actions .btn { width: 100%; }
}

/* Boton registro: azul veterinario (hover un poco mas oscuro). */
#login-container.vet-login .vet-btn-registro:hover { background: #00639f !important; border-color: #00639f !important; }

/* Iconos de los botones Iniciar sesion / Registro al mismo tamaño (un poco mas grandes). */
#login-container.vet-login .btn-create-account i,
#login-container.vet-login .vet-btn-registro i { font-size: 18px; margin-right: 8px; vertical-align: middle; }
#login-container.vet-login .btn-create-account i { color: #fff; }

/* Ver / ocultar contraseña (icono del ojo dentro del campo). */
.vet-pass-wrap { position: relative; }
#login-container.vet-login .vet-pass-wrap .form-control { padding-right: 48px; }
.vet-pass-toggle {
    position: absolute; top: 0; right: 0;
    height: 100%; width: 46px;
    border: 0; background: transparent; cursor: pointer;
    color: #8a8a8a; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.vet-pass-toggle:hover { color: #444; }

/* Modal: aceptar condiciones legales + reCAPTCHA */
.vet-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: #444;
    line-height: 1.45;
    cursor: pointer;
}
.vet-check input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; }
.vet-check a { color: #0072bc; text-decoration: underline; }
.vet-recaptcha-wrap { margin-top: 14px; display: flex; justify-content: center; }

/* 2a linea de ayuda: invitacion a veterinarios (registrate / llamanos) */
.vet-login-help--vet { margin-top: 8px; }
.vet-login-help--vet a { color: #333; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; }