/* =========================================================
   TRI-W-DATA ROUNDCUBE SKIN
   Version 1.2
   Basis: Elastic
   ========================================================= */

:root {
    --twd-red: #9B111E;
    --twd-red-dark: #7D0D17;

    --twd-red-soft: #F7ECEE;
    --twd-red-soft-hover: #FBF5F6;

    --twd-nav: #273238;
    --twd-nav-hover: #38464D;

    --twd-text: #111827;
    --twd-muted: #6B7280;

    --twd-bg: #F7F8FA;
    --twd-panel: #FFFFFF;

    --twd-border: #D9DDE3;
    --twd-border-soft: #ECEFF3;

    --twd-focus: rgba(155, 17, 30, 0.16);
}


/* =========================================================
   BASIS
   ========================================================= */

body {
    color: var(--twd-text);
}

a {
    color: var(--twd-red);
}

a:hover,
a:focus {
    color: var(--twd-red-dark);
}


/* =========================================================
   TWD LOGO
   ========================================================= */

#layout-menu .popover-header img,
body.task-login #logo {
    object-fit: contain;
}


/* Desktop Navigation */
@media screen and (min-width: 1025px) {

    #layout-menu .popover-header {
        height: 58px;
        min-height: 58px;

        display: flex;
        align-items: center;
        justify-content: center;

        background-color: var(--twd-nav) !important;

        border-bottom:
            1px solid rgba(255,255,255,0.06);
    }

    #layout-menu .popover-header img {
        max-width: 70px;
        max-height: 42px;

        padding: 3px;

        object-fit: contain;
    }

}


/* Tablet */
@media screen and (min-width: 481px) and (max-width: 1024px) {

    #layout-menu .popover-header img {
        max-width: 35px;
        max-height: 50px;

        padding: 3px;
    }

}


/* Login */
body.task-login #logo {
    max-width: 280px;
    max-height: 105px;

    width: auto;
    height: auto;
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

@media screen and (min-width: 481px) {

    #layout-menu {
        background-color: var(--twd-nav) !important;
    }

    #layout-menu .popover-header {
        background-color: var(--twd-nav) !important;
    }

    #taskmenu .special-buttons {
        background-color: var(--twd-nav) !important;
    }

    #taskmenu a {
        color: #F3F4F6 !important;

        transition:
            background-color 0.15s ease,
            color 0.15s ease;
    }

    #taskmenu a:hover {
        background-color:
            rgba(155, 17, 30, 0.35) !important;

        color: #FFFFFF !important;
    }

    #taskmenu a.selected,
    #taskmenu a.selected:hover,
    #taskmenu a:focus {
        background-color:
            var(--twd-red) !important;

        color: #FFFFFF !important;
    }

}


/* Logout */
#taskmenu a.logout,
#taskmenu a.logout:hover {
    color: #FF6666 !important;
}


/* =========================================================
   ORDNERLISTE
   ========================================================= */

.folderlist li.selected > a,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
    background-color:
        var(--twd-red-soft) !important;

    color:
        var(--twd-red) !important;

    font-weight: 600;
}


/* Hover */
.folderlist li > a:hover,
ul.treelist li > a:hover {
    background-color:
        var(--twd-red-soft-hover) !important;

    color:
        var(--twd-red-dark) !important;
}


/* Ungelesene Anzahl */
.folderlist li.mailbox .unreadcount {
    background-color:
        var(--twd-red) !important;

    color:
        #FFFFFF !important;
}


/* Recent */
.folderlist li.mailbox.recent > a {
    color:
        var(--twd-red-dark) !important;
}


/* =========================================================
   LISTEN / SELEKTIONEN
   ========================================================= */

.listing li.selected,
.listing tr.selected td,
.listing tr.selected > td {
    background-color:
        var(--twd-red-soft) !important;

    color:
        var(--twd-text) !important;
}


/* Hover */
.listing li:hover,
.listing tr:hover td {
    background-color:
        var(--twd-red-soft-hover) !important;
}


/* Fokuslinie */
html:not(.touch) .listing li > a:focus,
html:not(.touch)
.listing.focus
tbody tr.focused > td:first-child,
html:not(.touch)
.listing.focus:not(.withselection)
tbody tr.focused > td.selection + td {
    border-left-color:
        var(--twd-red) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary,
button.btn-primary,
input.btn-primary,
.formbuttons .button {
    background-color:
        var(--twd-red) !important;

    border-color:
        var(--twd-red) !important;

    color:
        #FFFFFF !important;
}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover,
button.btn-primary:focus,
input.btn-primary:hover,
.formbuttons .button:hover {
    background-color:
        var(--twd-red-dark) !important;

    border-color:
        var(--twd-red-dark) !important;

    color:
        #FFFFFF !important;
}


/* Floating Buttons */
.floating-action-buttons a.button {
    background-color:
        var(--twd-red) !important;

    color:
        #FFFFFF !important;

    box-shadow:
        0 0 5px 5px
        rgba(155, 17, 30, 0.10) !important;
}


/* =========================================================
   LINKS / SEKUNDÄRE AKZENTE
   ========================================================= */

.btn-link,
.ui.alert a:not(.btn) {
    color:
        var(--twd-red) !important;
}


/* =========================================================
   FORMULARE / FOCUS
   ========================================================= */

.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus,
select:focus,
.recipient-input.focus,
.multi-input > .content.focused {
    border-color:
        var(--twd-red) !important;

    box-shadow:
        0 0 0 0.2rem
        var(--twd-focus) !important;
}


/* =========================================================
   SWITCHES
   ========================================================= */

.custom-switch
.custom-control-input:checked
~ .custom-control-label::before {
    background-color:
        var(--twd-red) !important;

    border-color:
        var(--twd-red) !important;
}


.custom-switch
.custom-control-input:focus
~ .custom-control-label::before {
    box-shadow:
        0 0 0 0.2rem
        var(--twd-focus) !important;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar a:hover,
.toolbar button:hover,
.menu.toolbar a:hover {
    color:
        var(--twd-red) !important;
}


.menu.toolbar a.selected {
    color:
        var(--twd-red) !important;
}


/* =========================================================
   POPUPS / MENÜS
   ========================================================= */

.popover .menu li a:not(.disabled):hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.ui-menu .ui-state-active {
    background-color:
        var(--twd-red) !important;

    color:
        #FFFFFF !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge-primary {
    background-color:
        var(--twd-red) !important;
}


/* =========================================================
   QUOTA / PROGRESS
   ========================================================= */

.quota-widget .value {
    background-color:
        var(--twd-red) !important;
}


/* =========================================================
   TABS
   ========================================================= */

.nav-tabs .nav-link.active {
    color:
        var(--twd-red) !important;
}


/* =========================================================
   LOGIN
   ========================================================= */

body.task-login {
    background:
        linear-gradient(
            135deg,
            #F8F9FB 0%,
            #FFFFFF 55%,
            #F7ECEE 100%
        );
}


body.task-login #layout-content {
    background:
        transparent;
}


body.task-login #login-form {
    max-width:
        340px;
}


body.task-login .box-inner {
    border-radius:
        10px;

    border:
        1px solid var(--twd-border);

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.10);
}


body.task-login #rcmloginsubmit {
    background-color:
        var(--twd-red) !important;

    border-color:
        var(--twd-red) !important;

    font-weight:
        500;

    letter-spacing:
        0.02em;
}


body.task-login #rcmloginsubmit:hover {
    background-color:
        var(--twd-red-dark) !important;

    border-color:
        var(--twd-red-dark) !important;
}


body.task-login #login-footer a {
    color:
        var(--twd-red) !important;
}


/* =========================================================
   PANELS / TRENNLINIEN
   ========================================================= */

#layout-sidebar,
#layout-list,
#layout-content {
    border-color:
        var(--twd-border);
}


#layout > div > .header,
#layout > div > .footer {
    border-color:
        var(--twd-border-soft);
}


/* =========================================================
   SUCHFELD
   ========================================================= */

.searchbar {
    border-bottom-color:
        var(--twd-border-soft);
}


.searchbar a.selected {
    color:
        var(--twd-red) !important;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

html {
    scrollbar-color:
        rgba(155, 17, 30, 0.45)
        #F1F1F1;
}


html:not(.touch)
::-webkit-scrollbar-thumb {
    background-color:
        rgba(155, 17, 30, 0.45);
}


html:not(.touch)
::-webkit-scrollbar-track {
    background-color:
        #F1F1F1;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark-mode {

    --twd-text:
        #F3F4F6;

    --twd-muted:
        #AAB2BD;

    --twd-bg:
        #111827;

    --twd-panel:
        #1F2937;

    --twd-border:
        #374151;

    --twd-border-soft:
        #2E3745;

    --twd-red-soft:
        rgba(155, 17, 30, 0.25);

    --twd-red-soft-hover:
        rgba(155, 17, 30, 0.18);
}


/* Logo */
html.dark-mode #logo {
    opacity:
        1 !important;
}


/* Navigation */
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
    background-color:
        var(--twd-red) !important;

    color:
        #FFFFFF !important;
}


html.dark-mode #taskmenu a:hover {
    background-color:
        rgba(155, 17, 30, 0.30) !important;

    color:
        #FFFFFF !important;
}


/* Listen */
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td {
    background-color:
        var(--twd-red-soft) !important;

    color:
        #FFFFFF !important;
}


/* Buttons */
html.dark-mode .btn-primary {
    background-color:
        var(--twd-red) !important;

    border-color:
        var(--twd-red) !important;

    color:
        #FFFFFF !important;
}


html.dark-mode
.btn-primary:hover:not(:disabled) {
    background-color:
        var(--twd-red-dark) !important;

    border-color:
        var(--twd-red-dark) !important;
}


/* Links */
html.dark-mode a {
    color:
        #E58C95;
}


html.dark-mode a:hover {
    color:
        #F2A7AE;
}


/* Switches */
html.dark-mode
.custom-switch
.custom-control-input:checked
~ .custom-control-label::before {
    background-color:
        var(--twd-red) !important;

    border-color:
        var(--twd-red) !important;
}


/* Scrollbar */
html.dark-mode {
    scrollbar-color:
        rgba(201, 85, 96, 0.65)
        #2E3745;
}