/* Shared by the website and installed app. Preserve native responsive layouts. */
.amnix-login-brand { text-align: center; margin: 0 0 24px; }
.amnix-brand-logo { display: block; height: auto; object-fit: contain; }
.amnix-login-brand .amnix-brand-logo { width: min(280px, 78%); margin: 0 auto 12px; }
#rl-app .amnix-login-brand h1 { margin: 0; color: #0f548c; font: 600 28px/1.25 var(--fontSans); letter-spacing: -.5px; }
.amnix-sidebar-brand { padding: 8px 12px 18px 4px; text-align: center; white-space: normal; }
.amnix-sidebar-brand .amnix-brand-logo { width: 100%; max-width: 210px; margin: 0 auto 8px; }
.amnix-sidebar-brand span { color: #0f548c; font-size: 15px; font-weight: 600; }
@media (max-width: 799px) {
    .amnix-login-brand { margin-bottom: 18px; }
    .amnix-login-brand .amnix-brand-logo { width: min(230px, 78%); }
    #rl-app .amnix-login-brand h1 { font-size: 25px; }
}
body#rl-app {
    color-scheme: light;
    --main-color: #242424;
    --main-bg-color: #f3f6fa;
    --main-bg-image: none;
    --main-font-size: 14px;
    --fontSans: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --link-color: #0f6cbd;
    --border-color: #dce3ec;
    --border-radius: 8px;
    --hr-color: #e7edf4;
    --panel-bg-clr: #fff;
    --loading-color: #0f548c;
    --loading-text-shadow: none;
    --login-color: #242424;
    --login-bg-color: #fff;
    --login-box-shadow: 0 12px 48px #16395714;
    --login-border: 1px solid #dce3ec;
    --login-border-radius: 16px;
    --spinner-color: #0f6cbd;
    --dropdown-menu-color: #242424;
    --dropdown-menu-bg-color: #fff;
    --dropdown-menu-hover-bg-color: #e8f2fc;
    --dropdown-menu-hover-color: #0f548c;
    --dropdown-menu-disabled-color: #707070;
    --dropdown-menu-border-clr: #dce3ec;
    --folders-color: #34465a;
    --folders-disabled-color: #707070;
    --folders-selected-color: #0c508b;
    --folders-selected-bg-color: #d9eafa;
    --folders-focused-color: #0c508b;
    --folders-focused-bg-color: #d9eafa;
    --folders-hover-color: #0c508b;
    --folders-hover-bg-color: #e5eef8;
    --folders-drop-color: #0c508b;
    --folders-drop-bg-color: #c5dff6;
    --unread-count-color: #0c508b;
    --unread-count-bg-color: #d9eafa;
    --settings-menu-color: #34465a;
    --settings-menu-selected-color: #0c508b;
    --settings-menu-selected-bg-color: #d9eafa;
    --settings-menu-hover-color: #0c508b;
    --settings-menu-hover-bg-color: #e5eef8;
    --message-list-toolbar-bg-color: #fff;
    --message-header-bg-clr: #fff;
    --dialog-clr: #242424;
    --dialog-bg-clr: #fff;
    --dialog-border-clr: #dce3ec;
    --dialog-border-radius: 12px;
    --btn-clr: #34465a;
    --btn-bg-clr: #fff;
    --btn-border-clr: #ccd7e4;
    --btn-border-radius: 6px;
    --btn-success-bg-clr: #0f6cbd;
    --btn-danger-bg-clr: #b42318;
    --input-clr: #242424;
    --input-bg-clr: #fff;
    --input-border-clr: #b8c6d6;
    --input-border-radius: 6px;
    --input-focus-border-clr: #0f6cbd;
    --tr-hover-bg-clr: #f0f6fc;
    --tr-odd-bg-clr: #f8fafc;
    --tab-active-bg-clr: #fff;
    --tab-hover-border-clr: #dce3ec;
    --smMainShadow: 0 2px 12px #16395712;
    background: #f3f6fa !important;
    font-family: var(--fontSans);
}
#rl-app #rl-left {
    background: #f0f5fb;
    border-inline-end: 1px solid #dce3ec;
}
#rl-app .thm-message-list-top-toolbar,
#rl-app .thm-message-list-bottom-toolbar {
    background: #fff !important;
    border-color: #dce3ec;
}
#rl-app .btn { text-shadow: none; box-shadow: none; }
#rl-app .btn-primary,
#rl-app .buttonCompose,
#rl-app .LoginView .buttonLogin {
    background: #0f6cbd !important;
    border-color: #0f6cbd !important;
    color: #fff !important;
    text-shadow: none;
}
#rl-app .btn-primary:hover,
#rl-app .buttonCompose:hover,
#rl-app .LoginView .buttonLogin:hover { background: #115ea3 !important; }
#rl-app .LoginView { max-width: 460px; margin-inline: auto; }
#rl-app .LoginView .descWrapper { font-weight: 600; letter-spacing: -.7px; margin-bottom: 24px; }
#rl-app .LoginView form { padding: 32px; }
#rl-app .LoginView input {
    background: #fff;
    border: 1px solid #b8c6d6;
    border-radius: 6px;
    height: 48px;
    font-size: 16px;
}
#rl-app .LoginView input::placeholder { color: #64748b; opacity: 1; }
#rl-app .LoginView input:focus { border-color: #0f6cbd; box-shadow: 0 0 0 3px #0f6cbd22; }
#rl-app .LoginView .controls > .fontastic:first-child { line-height: 48px; color: #536a82; }
#rl-app .LoginView .buttonLogin { min-height: 48px; text-transform: none; font-size: 16px; font-weight: 600; }
#rl-app .LoginView .alert { position: relative; box-sizing: border-box; overflow-wrap: anywhere; }
#rl-app .LoginView .alert[hidden] { display: none; }
#rl-app .b-folders li a.selectable { border-radius: 6px; margin: 2px 6px; }
#rl-app .b-folders li a.selected { font-weight: 600; }
#rl-app .messageListItem { border-bottom-color: #edf0f5; font-size: 14px; }
#rl-app .messageListItem:hover { background: #f0f6fc; }
#rl-app .messageListItem.selected,
#rl-app .messageListItem.focused,
#rl-app .messageListItem.checked { background: #e6f2ff; border-left-color: #0f6cbd; }
#rl-app .messageListItem.unseen { border-left-color: #0f6cbd; }
#rl-app .dropdown-menu { border-radius: 8px; box-shadow: 0 6px 24px #16395720; }
#rl-app :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #0f6cbd; outline-offset: 2px; }
#rl-app #mail-install-button { background: transparent; color: #0f6cbd; }
@media (min-width: 800px) {
    #rl-app .messageListItem > div + div { padding-block: 9px; }
    #rl-app .b-folders li a.selectable { padding-block: 4px; }
}
/* Keep the application shell inside the viewport. Wide message contents scroll
   within their own pane instead of creating a scrollbar under the whole app. */
html { max-width: 100%; overflow-x: hidden; }
body#rl-app { width: 100%; max-width: 100%; overflow-x: clip; }
#rl-app #rl-content { width: 100%; min-width: 0; }
#rl-app #rl-right,
#rl-app #V-MailMessageList,
#rl-app #V-MailMessageView,
#rl-app .messageList,
#rl-app .messageView,
#rl-app .messageList .b-content,
#rl-app .search-input-wrp { min-width: 0; min-height: 0; }
#rl-app #rl-right { max-width: 100%; }
#rl-app #messagesDragImage { right: auto; left: -10000px; }
#rl-app #V-MailMessageView { flex-basis: 0; }
#rl-app .messageList .b-content { overflow-x: hidden; overflow-y: auto; }
#rl-app .messageListItem > div + div,
#rl-app .messageListItem .senderParent,
#rl-app .messageListItem .subjectParent { min-width: 0; }
#rl-app #rl-left { overflow-x: hidden; }
#rl-app #rl-left .b-toolbar { white-space: normal; padding: 12px 10px; }
#rl-app #rl-left .b-footer { padding: 8px 10px; }
#rl-app .amnix-sidebar-brand { padding: 4px 8px 16px; }
#rl-app .amnix-sidebar-brand .amnix-brand-logo { max-width: 175px; }
#rl-app .b-folders li a.selectable { margin: 2px 8px; border-radius: 5px; }
#rl-app .b-folders hr { margin: 12px; border-color: #e5eaf0; }
#rl-app .b-folders .b-content { padding-bottom: 8px; }
#rl-app .btn { border-radius: 5px; font-weight: 500; }
#rl-app .btn.disabled, #rl-app .btn:disabled { opacity: .45; }
#rl-app .btn-toolbar .btn:not(.buttonCompose):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent;
    border-color: transparent;
    color: #526579;
}
#rl-app .btn-toolbar .btn:not(.disabled):not(:disabled):hover { background-color: #e5eef8; }
#rl-app .messageList,
#rl-app .messageView { border-color: #e1e7ef; border-radius: 8px; box-shadow: none; }
#rl-app #V-MailMessageList.focused .messageList,
#rl-app #V-MailMessageView.focused .messageView { border-color: #c9d9eb; box-shadow: none; }
#rl-app .messageList .second-toolbar { background: #fff; padding: 10px 12px; }
#rl-app .messageList .inputSearch { background: #f5f7fa; border-color: #e1e7ef; border-radius: 5px; }
#rl-app .messageList .inputSearch:focus { background: #fff; border-color: #0f6cbd; }
#rl-app .messageList .b-footer { background: #fff; border-top: 1px solid #e9edf3; font-size: 12px; }
#rl-app .messageList .b-footer .e-quota { font-size: 12px; }
#rl-app .messageListItem { border-left-width: 3px; }
#rl-app .messageListItem time { color: #617185; opacity: 1; }
#rl-app .messageListItem.unseen:not(.focused):not(.checked):not(:hover) { background: #f5f9ff; }
#rl-app #V-MailMessageView > .top-toolbar { min-height: 60px; }
#rl-app .messageView .messageItemHeader { border-color: #e9edf3; }
#rl-app :is(.messageList .b-content, .b-folders .b-content, #V-MailMessageView) {
    scrollbar-width: thin;
    scrollbar-color: #bbc8d7 transparent;
}
@media (min-width: 800px) {
    #rl-app #rl-left { width: 220px; }
    html:not(.rl-left-panel-disabled) #rl-app #rl-left { max-width: 280px; }
    html.sm-msgView-side #rl-app #V-MailMessageList { flex: 0 1 36%; min-width: 0; }
    html.sm-msgView-side #rl-app #V-MailMessageList .messageList {
        width: 100%; min-width: 0; max-width: 100%; resize: none; overflow-x: hidden;
    }
    #rl-app #V-MailMessageList > .btn-toolbar { white-space: normal; min-height: 60px; }
    #rl-app #V-MailMessageList > .btn-toolbar .btn { padding: 5px 7px; }
}
@media (min-width: 800px) and (max-width: 1100px) {
    #rl-app #rl-left { width: 185px; }
    html.sm-msgView-side #rl-app #V-MailMessageList { flex-basis: 46%; }
}
@media (max-width: 799px) {
    #rl-app #V-MailMessageView { flex-basis: auto; }
    #rl-app #V-MailMessageList > .btn-toolbar { white-space: normal; }
    #rl-app #V-MailMessageList > .btn-toolbar .btn { padding-inline: 8px; }
    #rl-app .amnix-sidebar-brand .amnix-brand-logo { max-width: 160px; }
    #rl-app .b-folders li a.selectable { margin-inline: 6px; }
}
@media print {
    html, body#rl-app { overflow: visible; }
}
@media (max-width: 799px) {
    #rl-app .LoginView { width: calc(100% - 32px); }
    #rl-app .LoginView form { padding: 24px 20px; }
    #rl-app .btn { min-height: 44px; box-sizing: border-box; }
    #rl-app :is(input[type="text"], input[type="password"], input[type="search"], select, textarea) { font-size: 16px; }
    #rl-app .b-folders li a.selectable { min-height: 44px; box-sizing: border-box; padding-block: 10px; }
    #rl-app .messageListItem { min-height: 56px; }
    #rl-app .dropdown-menu a { min-height: 44px; box-sizing: border-box; }
    #rl-app #rl-left { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    #rl-app .messageList .b-footer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    #rl-app .LoginView .errorAnimated { animation: none; }
}
@media (max-height: 560px) {
    #rl-app .LoginView {
        position: absolute;
        top: max(20px, env(safe-area-inset-top));
        transform: translateX(-50%);
        padding-bottom: 24px;
    }
}
