:root {
    --primary: #000;
    --secondary: rgba(189, 177, 255, 1);
    --tertiary: rgba(235, 237, 242, 0.4);
    --accent: rgba(189, 177, 255, 1);
    --accent-color: rgba(189, 177, 255, 1);
    --light: #FFF;
}

/*Login*/
.imgLogin {
    background-image: url("../../img/yalo/login/image.jpg");
}

.logotipo-desktop {
    background-image: url("../../img/yalo/login/logotipo.svg") !important;
    max-width: 490px;
}

.logotipo-mobile {
    background-image: url("../../img/yalo/login/logotipo.svg") !important;
}
/* Imágenes Login */
.img1 {
    background-image: url("../../img/yalo/login/image.jpg");
}

.img2 {
    background-image: url("../../img/yalo/login/image.jpg");
}

.img3 {
    background-image: url("../../img/yalo/login/image.jpg");
}

.img4 {
    background-image: url("../../img/yalo/login/image.jpg");
}

.img5 {
    background-image: url("../../img/yalo/login/image.jpg");
}

.img6 {
    background-image: url("../../img/yalo/login/image.jpg");
}


.kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__head .kt-login__title {
    color: #000000;
    font-weight: 400 !important;
    font-size: 24px !important;
}
.kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control {
    background: var(--tertiary);
}
.kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form {
    margin-top: 2rem;
}
.kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-login__head {
    margin-bottom: 2rem;
}
.form-group .ms-label {
    color: var(--primary) !important;
}

.btn-primary {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

    .btn-primary:hover {
        background-color: var(--primary);
        border-color: var(--primary);
    }
.logotipo-img {
    margin: 3rem auto 1rem !important;
}
.kt-login__container .accesible-btn button {
    border: 1px solid var(--secondary);
    color: var(--secondary);
    transition: all .3s ease-out;
    background-color: #FFF;
}
    .kt-login__container .accesible-btn button:hover {
        color: #fff;
        background-color: var(--secondary);
    }
@media (min-width: 1390px) {
    .logotipo-img {
        margin: 8rem auto 3rem !important;
        height: 120px;
    }
}
/*home*/
.body-home {
    background: linear-gradient( 178.94deg, 
    rgba(83, 173, 236, 1) 0%, 
    rgba(131, 143, 241, 1) 30%, 
    rgba(155, 128, 243, 1) 60%, 
    rgba(220, 154, 124, 1) 100% );
}

.accesible-btn {
    display: flex;
    justify-content: center;
}

.cont-icon {
    background-color: blue;
}

.card-body .leyenda-card-home {
    color: #000000;
}

.body-home .top-banner {
    background-image: url(../../img/yalo/fondo-banner.svg);
}

.top-banner .rounded-circle {
    border: 4px solid #fff;
}

.body-home .top-banner .legend .saludo-usuario {
    color: var(--primary) !important;
}

.text-warning {
    color: var(--primary) !important;
}

.body-home .menu-top .item-menu-top:hover i, .body-home .menu-top .item-menu-top:hover .label-menu {
    color: #fff;
}

.body-home .accesible-btn button {
    border: 1px solid var(--secondary);
    color: var(--secondary);
}

    .body-home .accesible-btn button:hover {
        background-color: var(--secondary);
        color: #FFF;
    }

.body-home .card-plan .costo, .body-home .card-plan .pronto-card, .body-home .card-plan .atencion-24 {
    background-color: var(--secondary);
    color: #fff;
}
/*
sala de espera*/

.hotspot-icon .cont-icon, .btn-sala .cont-icon, #hs-g .cont-icon {
    background-color: var(--light) !important;
}

.hotspot-icon:hover .cont-icon,
#hs-g:hover .cont-icon, .btn-sala .cont-icon:hover {
    background-color: var(--primary) !important;
}
.cont-icon:hover .fal, .cont-icon:hover .fab {
    color: #fff !important;
}
.cont-icon .fal, .cont-icon .fab {
    color: var(--primary) !important;
}

.hotspots .hotspot-icon:hover {
    color: #fff !important;
}
.btn-sala:hover {
    color: var(--light);
}
.panel-medios__close {
    color: var(--secondary) !important;
}
    .panel-medios__close:hover {
        color: rgb(105 98 141);
        
    }

/*barra de menu*/
menu__item a, .kt-menu__item i {
    color: var(--secondary) !important;
}

menu__item:hover a, .kt-menu__item:hover i {
    color: #000 !important;
}

.ms-label-menu {
    color: #000 !important;
}

.kt-header .menu-top .item-menu-top .fal, .kt-header .menu-top .item-menu-top span {
    color: #000 !important;
}

.toolbar-bottom-mobile .toolbar-option {
    color: var(--secondary) !important;
}

    .toolbar-bottom-mobile .toolbar-option span {
        color: var(--primary) !important;
    }

.kt-menu__nav .accesible-tools-desktop .accesible-btn button {
    border: 1px solid var(--primary);
    color: var(--primary);
}

    .kt-menu__nav .accesible-tools-desktop .accesible-btn button:hover {
        background-color: var(--primary);
        color: #FFF;
    }

/*AGENDAR*/

.step.active .label-step {
    color: var(--secondary);
}

.header-formulario i {
    color: var(--secondary) !important;
}

.caja-especialidad.active {
    background-color: var(--secondary);
    box-shadow: 0px 2px 20px var(--secondary);
}

.inner-especialidad strong {
    color: rgb(158 80 205) !important;
}

.caja-reserva .btn-pm {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #FFF;
}
.titulo-data-horario {
    border: 1px solid var(--secondary);
    color: var(--secondary);
}
.hora.seleccionado small {
    background-color: var(--secondary);
}
.hora.seleccionado .detalle-hora {
    color: var(--secondary);
}
#drop-mensajes-turno .atencion-proxima-toolbar a:hover, #drop-mensajes-turno .atencion-proxima-toolbar a:hover i {
    color: #000;
}
#drop-mensajes-turno .cont-atencion-proxima {
    background-color: #186276;
}
/*FARMACIA*/

.farm-recetanovigente {
    color: rgb(158 80 205) !important;
}

.exam-recetanovigente {
    color: rgb(158 80 205) !important;
}

/*HISTORIAL*/
.wow .tag {
    border-radius: 4px;
    border: 1px solid var(--secondary);
    background-color: var(--light);
    color: var(--secondary);
}
.wow .tag:hover {
    background-color: rgba(189, 177, 255, 0.4);
}
.tag-descarga:hover {
    background-color: rgba(189, 177, 255, 0.4);
}