:root {
    --principal-color: #0D6EB3;
    --principal-dark: #09426b;
    --secondary-color: #46629D;
    --secondary-color-dark: #041933;
    --tile-color-hover: rgba( 10, 82, 169, 0.25 );
    --tile-color-border: #0A52A930;
    --logo-header: url(Images/Custom/EstiloSaludPlus/LogoHeader.png);
    --background: url(Images/Custom/EstiloSaludPlus/Fondo.svg);
    --logo-footer: url(Images/Custom/EstiloSaludPlus/LogoHeader.png);
    --welcome-image: url(Images/Custom/EstiloSaludPlus/ImagenBienvenida.png);
    --logo-login: url(Images/Custom/EstiloSaludPlus/Logo.png);
    --svg-color-filter: invert(21%) sepia(99%) saturate(1560%) hue-rotate(197deg) brightness(94%) contrast(94%);
}

body {
    background-image: var(--background) !important;
}

/*Login*/

#homepage-image > span {
    display: block;
    background-image: var(--welcome-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 290px;
    height: 220px;
}

#rootwizard #butAceptar {
    width: 105px;
    height: 30px;
    padding: 0px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    background: var(--principal-color);
    border: none;
    font-weight: bold;
}

#rootwizard #butAceptar:hover {
    background-color: var(--principal-dark);
}

#homepage-image #loginLink,
#myform #butAceptar {
    width: 145px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    background: var(--principal-color);
    border: none;
    z-index: 1;
    font-weight: bold;
}

    #homepage-image #loginLink:after,
    #myform #butAceptar:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        background-color: var(--principal-dark);
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    #homepage-image #loginLink:hover,
    #myform #butAceptar:hover {
        color: #fff !important;
    }

    #homepage-image #loginLink:hover:after,
    #myform #butAceptar:hover:after {
        left: 0;
        width: 100%;
    }

    #homepage-image #loginLink:active,
    #myform #butAceptar:active {
        top: 2px;
    }

.fa.k-sprite, .fa.k-sprite::before {
    line-height: 8px;
}

.link-login-footer {
    display: block;
    width: 200px;
    margin: auto;
    text-indent: -99999999px;
}

.logo-login-footer {
    display: block;
    width: 200px;
    height: 100px;
    margin: auto;
    background-image: var(--logo-login);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.login-container h3 {
    font-size: 2em;
    color: var(--principal-color);
    margin: 0;
    text-align: center;
}

.login-container .input-container > i {
    background-color: var(--principal-color);
}

.login-container a,
.login-container #recuperapsw,
.login-container #registrousr {
    color: var(--principal-color);
    font-weight: bold;
}

    .login-container a:hover,
    .login-container #recuperapsw:hover,
    .login-container #registrousr:hover {
        color: var(--secondary-color);
    }

.k-switch-on .k-switch-container {
    background-color: var(--principal-dark);
}

/*Registro*/
.registro-usuario div {
    display: flex;
    align-items: center;
}

.logo-registro {
    width: 43px;
    height: 43px;
    background-image: var(--logo-header);
    background-position: 0px 5px;
    background-repeat: no-repeat;
    background-size: 40px;
}

.registro-usuario h3 {
    color: var(--principal-color);
}

#butEviarRegistro {
    background-color: var(--principal-color);
    color: #fff;
}

    #butEviarRegistro:hover {
        background-color: var(--principal-dark);
    }

#butCancelarRegistro {
    color: var(--principal-color);
    border-color: var(--principal-color);
}

.ver, .no-ver {
    filter: var(--svg-color-filter);
}

/*Sistema*/

.navbar {
    background-color: var(--principal-color) !important;
}

#viewconfiginfo,
#viewsesioninfo {
    background-color: var(--principal-color) !important;
}

#configaceptar {
    background-color: var(--principal-color);
}

    #configaceptar:hover {
        background-color: var(--principal-dark);
    }

#abrirmenu {
    background-color: var(--principal-color) !important;
}

    #abrirmenu:hover {
        background-color: var(--principal-dark) !important;
    }

#homepage .tileButton button:hover {
    background-color: var(--tile-color-hover);
    border-color: var(--tile-color-border);
}

#butAprobar, #butAgregar {
    background-color: var(--principal-color);
    border-color: var(--principal-dark);
}

    #butAprobar:hover, #butAgregar:hover {
        background-color: var(--principal-dark);
    }

.tooltip-home {
    background-color: var(--principal-color);
}

    .tooltip-home:after {
        border-top: 5px solid var(--principal-color);
    }

.k-primary {
    background-color: var(--principal-color);
    border-color: var(--principal-dark);
}

    .k-primary:hover {
        background-color: var(--principal-dark);
        border-color: var(--principal-dark);
    }

.k-in.k-state-hover {
    color: var(--principal-color) !important;
}

.divLogo {
    margin-left: 35px;
}

#linkLogo span {
    display: block;
    width: 43px;
    height: 43px;
    margin-top: -3px;
    background-image: var(--logo-header);
    background-position: 0px 5px;
    background-repeat: no-repeat;
    background-size: 40px;
}

.leftheader {
    display: flex;
}

.userinfo:first-of-type {
    background-color: var(--principal-color);
}

#sesionCambiarPassword,
#sesionCerrar {
    color: var(--principal-color);
}

    #sesionCambiarPassword:hover,
    #sesionCerrar:hover {
        color: var(--secondary-color);
    }

.userfooter span {
    display: block;
    height: 40px;
    background-image: var(--logo-login);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

@media only screen and (min-width: 768px) {
    #homepage-image > span {
        width: 600px;
        height: 370px;
    }
}