/* Correo Rural · tema Elastic. Las variantes del SVG las selecciona el propio tema. */
body.task-login #layout-content {
    background-color: #F6F3E8;
}

body.task-login #layout-content img#logo {
    width: auto;
    height: auto;
    max-height: 100px;
    max-width: min(240px, 80vw);
    opacity: 1;
}

body.task-login #rcmloginsubmit {
    color: #F6F3E8;
    background-color: #163E35;
    border-color: #163E35;
}

body.task-login #rcmloginsubmit:focus-visible {
    outline: 2px solid #487149;
    outline-offset: 3px;
}

html.dark-mode body.task-login #layout-content {
    background-color: #163E35;
}

html.dark-mode body.task-login #rcmloginsubmit {
    color: #163E35;
    background-color: #D9EB82;
    border-color: #D9EB82;
}

html.dark-mode body.task-login #rcmloginsubmit:focus-visible {
    outline-color: #D9EB82;
}

/* Elastic marca esta cabecera con !important a partir de 481 px. */
#layout #layout-menu .popover-header,
html.layout-phone #layout-menu .popover-header {
    background-color: #163E35 !important;
}

#layout-menu .popover-header img#logo {
    width: 40px;
    max-width: 100%;
    height: auto;
    max-height: 48px;
    padding: 0;
    opacity: 1;
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
    #layout-menu .popover-header img#logo {
        width: 30px;
    }
}

html.layout-phone body.task-login #layout-content img#logo {
    width: 220px;
    max-width: 80vw;
}

html.layout-phone #layout-menu .popover-header img#logo {
    width: 185px;
    max-width: calc(100% - 48px);
}

html.layout-phone #layout-menu .popover-header .cancel {
    color: #F6F3E8;
}