:root {
    --principal-color: #636db3;
    --principal-color-dark: #40466f;
    --secondary-color: #a40e4c;
    --secondary-color-dark: #6b0831;
    --third-color: #99cfb1;
    --logo-header: url(Images/Custom/EstiloMercedes/LogoHeader.png);
    --background: url(Images/Custom/EstiloMercedes/Fondo.png);
}

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

/*Login-Registro*/

#homepage-image > h1,
.titulo-login h3, .titulo-recupero h3,
.icon, .recover label, .registro-proveedor h3 {
    color: var(--principal-color) !important;
}

#homepage-image > p {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 2em 0;
}

#loginLink {
    background-color: var(--principal-color) !important;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
}

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

#butLogin, #butEviarRecupero, #butEviarRegistro {
    background-color: var(--principal-color) !important;
}

#butLogin, #butEviarRecupero {
    border: none;
}

#butLogin:hover, #butCancelarRecupero:hover, #butEviarRecupero:hover, #butEviarRegistro:hover, #butCancelarRegistro:hover {
    background-color: var(--principal-color-dark) !important;
    color: #fff !important;
}

#butCancelarRecupero, #butCancelarRegistro {
    color: var(--principal-color) !important;
    border-color: var(--principal-color) !important;
}

#registroprov,
#recuperapsw {
    color: var(--secondary-color) !important;
    font-weight: bold;
}

#registroprov:hover,
#recuperapsw:hover {
    color: var(--secondary-color-dark) !important;
}

.titulo-recupero div, .registro-proveedor div{
	align-items:center;
}

.titulo-recupero img,
.registro-proveedor img {
    width: 60px !important;
    height: 70px !important;
    margin: auto .5em auto 0;
}

.logo-register{
	height: 170px;
}

.logo-register img{
	width: 180px !important;
    height: 205px !important;
}

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

.leftheader {
    display: flex;
    align-items: center;
}

.not-logged span,
#linkLogo span {
    display: block;
    width: 63px !important;
    height: 28px !important;
    margin-top: -3px;
    background-image: var(--logo-header);
    background-position: 0px 5px;
    background-repeat: no-repeat;
    background-size: 40px;
    background-size: contain;
}

.not-logged span {
    margin-top: 7px;
}

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

#abrirmenu:hover, #viewconfiginfo:hover, #viewsesioninfo:hover, #viewnotificaciones:hover, #viewinformacion:hover {
    background-color: var(--principal-color-dark) !important;
}

#configaceptar{
    width:90%;
    background-color:var(--principal-color);
    border:none;
}

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

.tileButton > *{
    border-color:var(--principal-color);
}

#sesionCambiarPassword,
.close-sesion {
    color: var(--secondary-color) !important;
    font-weight:bold;
}

#sesionCambiarPassword:hover,
.close-sesion:hover {
    color: var(--secondary-color-dark) !important;
}

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