/* hostworld.de webmail, shared by Elastic and Stretched Elastic */
@font-face {
    font-family: "Biennale Webmail";
    src: url("Biennale-Regular.woff2") format("woff2");
    font-display: swap;
}
#layout-menu, #layout-sidebar .header, #login-form, .task-login #layout-content {
    font-family: "Biennale Webmail", sans-serif;
}
@media (min-width: 481px) {
    html body #layout-menu, html #layout-menu .popover-header,
    #layout-menu #taskmenu, #layout-menu #taskmenu .special-buttons {
        background-color: #2b4358 !important;
    }
    #layout-menu #taskmenu a {
        color: #fff;
    }
    #layout-menu #taskmenu a:hover, #layout-menu #taskmenu a:focus-visible {
        background-color: #3c586f;
        color: #fff;
    }
    #layout-menu #taskmenu a.selected {
        background-color: #1e3345;
        box-shadow: inset 3px 0 #fbde37;
        color: #fff;
    }
    #layout-menu #taskmenu .action-buttons a.compose {
        background-color: #fbde37;
        color: #203547;
    }
}
#layout-menu .popover-header img#logo {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    padding: .12rem;
}
body.task-login #logo {
    width: min(260px, 72vw);
    height: auto;
    max-height: none;
}
body.task-login #login-form button.mainaction,
body.task-login #login-form button.btn-primary {
    background-color: #fbde37;
    border-color: #d0b51c;
    color: #203547;
}
html:not(.dark-mode) #mailboxlist li.selected > a,
html:not(.dark-mode) #settings-menu li.selected > a {
    color: #243b50;
    background-color: #edeff7;
    box-shadow: inset 3px 0 #2b4358;
}
#taskmenu a:focus-visible, #login-form button:focus-visible {
    outline: 2px solid #fbde37;
    outline-offset: -3px;
}