/*
 * ==========================================================
 * Kropp Mail
 * Native Roundcube Elastic child skin
 * ==========================================================
 */


/* ----------------------------------------------------------
   PALETTE
   ---------------------------------------------------------- */

html {

    --kropp-bg:
        #23292d;

    --kropp-bg-deep:
        #111517;

    --kropp-panel:
        #151a1d;

    --kropp-panel-2:
        #1b2124;

    --kropp-panel-3:
        #20272b;

    --kropp-hover:
        #293136;

    --kropp-border:
        #354147;

    --kropp-border-soft:
        #2b3439;

    --kropp-text:
        #c8d1d4;

    --kropp-muted:
        #8d999e;

    --kropp-accent:
        #e28a43;

    --kropp-accent-soft:
        rgba(226,138,67,.16);

    --kropp-rail-small:
        60px;

    --kropp-rail-big:
        226px;
}


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

body.task-login {

    background:
        var(--kropp-bg) !important;
}


body.task-login
#layout-content {

    background:
        var(--kropp-bg) !important;
}


body.task-login
#logo {

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 340px !important;
    max-height: 300px !important;

    object-fit: contain !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


body.task-login
#login-form {

    max-width: 630px;
}


body.task-login
#login-form
.btn-primary {

    border-color:
        #1688b5 !important;

    background:
        #087cad !important;
}


body.task-login
#login-form
.btn-primary:hover {

    background:
        #0b8bbb !important;
}


body.task-login
.kropp-login-footer {

    display: flex;

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

    gap: 10px;

    margin-top: 28px;
    padding: 0;

    color:
        var(--kropp-muted);

    background:
        transparent !important;

    border: 0 !important;

    box-shadow:
        none !important;
}


body.task-login
.kropp-home-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        #3fb2e6;

    text-decoration: none;
}


body.task-login
.kropp-home-link:hover {

    color:
        #76cff4;

    text-decoration: none;
}


body.task-login
.kropp-home-icon {

    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


body.task-login
.kropp-footer-dot {

    color:
        #68757b;
}


body.task-login
.kropp-private-mail {

    color:
        #9aa5aa;
}


@media (max-width: 600px) {

    body.task-login
    #logo {

        max-width: 280px !important;
        max-height: 255px !important;
    }

}


/* ==========================================================
   ELASTIC2025-ARTIGE DARK PALETTE
   ========================================================== */

html.dark-mode body {

    color:
        var(--kropp-text) !important;

    background:
        var(--kropp-bg) !important;
}


html.dark-mode
#layout {

    background:
        var(--kropp-bg) !important;
}


html.dark-mode
#layout-content,

html.dark-mode
#layout-list,

html.dark-mode
#layout-sidebar {

    background:
        var(--kropp-bg) !important;
}


html.dark-mode
.listbox {

    border-color:
        var(--kropp-border) !important;
}


html.dark-mode
.header,

html.dark-mode
.footer {

    color:
        var(--kropp-text) !important;

    background:
        var(--kropp-panel-2) !important;

    border-color:
        var(--kropp-border) !important;
}


html.dark-mode
.listing li,

html.dark-mode
.listing tbody tr {

    color:
        var(--kropp-text) !important;

    background:
        var(--kropp-panel-2) !important;

    border-color:
        var(--kropp-border-soft) !important;
}


html.dark-mode
.listing li:hover,

html.dark-mode
.listing tbody tr:hover {

    background:
        var(--kropp-hover) !important;
}


html.dark-mode
.listing li.selected,

html.dark-mode
.listing tbody tr.selected {

    background:
        linear-gradient(
            90deg,
            rgba(226,138,67,.18),
            rgba(226,138,67,.05)
        ) !important;

    box-shadow:
        inset 3px 0 0
        var(--kropp-accent);
}


html.dark-mode
.form-control {

    color:
        var(--kropp-text) !important;

    background:
        var(--kropp-panel-2) !important;

    border-color:
        #60757e !important;
}


html.dark-mode
.form-control:focus {

    border-color:
        var(--kropp-accent) !important;

    box-shadow:
        0 0 0 .15rem
        rgba(226,138,67,.13) !important;
}


/* ==========================================================
   KROPP TASK SIDEBAR
   ========================================================== */

body.kropp-mail-ui {

    --kropp-rail-width:
        var(--kropp-rail-small);
}


body.kropp-mail-ui.kropp-expanded {

    --kropp-rail-width:
        var(--kropp-rail-big);
}


/*
 * Der Content reserviert nur die kleine Icon-Rail.
 *
 * Beim Ausklappen liegt die große Sidebar darüber,
 * deshalb springt die Mailansicht nicht.
 */

body.kropp-mail-ui
#layout {

    padding-left:
        var(--kropp-rail-small) !important;

    box-sizing:
        border-box !important;
}


/* ----------------------------------------------------------
   SIDEBAR CONTAINER
   ---------------------------------------------------------- */

body.kropp-mail-ui
#layout-menu {

    display:
        flex !important;

    visibility:
        visible !important;

    position:
        fixed !important;

    z-index:
        10050 !important;

    left:
        0 !important;

    top:
        0 !important;

    bottom:
        0 !important;

    flex-direction:
        column !important;

    width:
        var(--kropp-rail-width) !important;

    min-width:
        var(--kropp-rail-width) !important;

    max-width:
        var(--kropp-rail-width) !important;

    height:
        100dvh !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    transform:
        none !important;

    color:
        var(--kropp-text) !important;

    background:
        linear-gradient(
            180deg,
            #171c1f 0%,
            #121719 100%
        ) !important;

    border-right:
        1px solid
        var(--kropp-border) !important;

    box-shadow:
        8px 0 26px
        rgba(0,0,0,.20) !important;

    transition:
        width .20s ease,
        min-width .20s ease,
        max-width .20s ease !important;
}


/* ----------------------------------------------------------
   LOGO HEADER
   ---------------------------------------------------------- */

body.kropp-mail-ui
#layout-menu
.popover-header {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    flex:
        0 0 58px !important;

    width:
        100% !important;

    min-height:
        58px !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        5px 8px !important;

    overflow:
        visible !important;

    background:
        #151a1d !important;

    border:
        0 !important;

    border-bottom:
        1px solid
        var(--kropp-border) !important;
}


body.kropp-mail-ui
#layout-menu
#logo {

    display:
        block !important;

    position:
        static !important;

    width:
        42px !important;

    max-width:
        42px !important;

    height:
        42px !important;

    max-height:
        42px !important;

    object-fit:
        contain !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;
}


body.kropp-mail-ui.kropp-expanded
#layout-menu
#logo {

    width:
        76px !important;

    max-width:
        76px !important;

    height:
        46px !important;

    max-height:
        46px !important;
}


body.kropp-mail-ui
#layout-menu
.popover-header
.cancel {

    display:
        none !important;
}


/* ----------------------------------------------------------
   TOGGLE
   ---------------------------------------------------------- */

#kropp-sidebar-toggle {

    appearance:
        none;

    position:
        absolute;

    z-index:
        10060;

    right:
        -11px;

    top:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    height:
        22px;

    margin:
        0;

    padding:
        0;

    cursor:
        pointer;

    color:
        #c3cdd1;

    background:
        #252d31;

    border:
        1px solid
        #445159;

    border-radius:
        50%;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.35);
}


#kropp-sidebar-toggle:hover {

    color:
        #fff;

    background:
        #30393e;
}


#kropp-sidebar-toggle svg {

    width:
        13px;

    height:
        13px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ----------------------------------------------------------
   TASKMENU
   ---------------------------------------------------------- */

body.kropp-mail-ui
#taskmenu {

    display:
        flex !important;

    flex-direction:
        column !important;

    flex:
        1 1 auto !important;

    width:
        100% !important;

    min-height:
        0 !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        6px 0 !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    background:
        transparent !important;

    scrollbar-width:
        thin;

    scrollbar-color:
        #37434a
        transparent;
}


body.kropp-mail-ui
#taskmenu
.action-buttons,

body.kropp-mail-ui
#taskmenu
.special-buttons {

    display:
        contents !important;
}


/* ----------------------------------------------------------
   MENU ITEMS
   ---------------------------------------------------------- */

body.kropp-mail-ui
#taskmenu > a,

body.kropp-mail-ui
#taskmenu > span > a {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    flex:
        0 0 51px !important;

    width:
        100% !important;

    min-height:
        51px !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    color:
        #c4cdd1 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    text-decoration:
        none !important;

    transition:
        color .12s ease,
        background .12s ease !important;
}


body.kropp-mail-ui
#taskmenu > a:hover,

body.kropp-mail-ui
#taskmenu > span > a:hover {

    color:
        #fff !important;

    background:
        var(--kropp-hover) !important;
}


body.kropp-mail-ui
#taskmenu
a.selected {

    color:
        #fff !important;

    background:
        var(--kropp-accent-soft) !important;

    box-shadow:
        inset 3px 0 0
        var(--kropp-accent) !important;
}


body.kropp-mail-ui
#taskmenu
a.compose {

    color:
        var(--kropp-accent) !important;
}


/* ----------------------------------------------------------
   ORIGINAL ELASTIC ICONS
   ---------------------------------------------------------- */

body.kropp-mail-ui
#taskmenu
a::before {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0
        var(--kropp-rail-small) !important;

    width:
        var(--kropp-rail-small) !important;

    min-width:
        var(--kropp-rail-small) !important;

    height:
        51px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    font-size:
        1.28rem !important;

    text-align:
        center !important;

    color:
        currentColor !important;
}


/* ----------------------------------------------------------
   CUSTOM MAILBOX SVG ICONS
   ---------------------------------------------------------- */

body.kropp-mail-ui
#taskmenu
a.kropp-folder::before {

    display:
        none !important;
}


.kropp-folder-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0
        var(--kropp-rail-small);

    width:
        var(--kropp-rail-small);

    min-width:
        var(--kropp-rail-small);

    height:
        51px;

    color:
        currentColor;
}


.kropp-folder-icon svg {

    width:
        24px;

    height:
        24px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ----------------------------------------------------------
   LABELS
   ---------------------------------------------------------- */

body.kropp-mail-ui
#taskmenu
.inner {

    display:
        block !important;

    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 13px 0 8px !important;

    overflow:
        hidden !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;

    text-align:
        left !important;

    font-size:
        15px !important;

    font-weight:
        400 !important;

    opacity:
        0 !important;

    pointer-events:
        none;

    transform:
        translateX(-5px);

    transition:
        opacity .12s ease,
        transform .16s ease;
}


body.kropp-mail-ui.kropp-expanded
#taskmenu
.inner {

    opacity:
        1 !important;

    transform:
        translateX(0);

    pointer-events:
        auto;
}


/* ----------------------------------------------------------
   SPECIAL ITEMS
   ---------------------------------------------------------- */

body.kropp-mail-ui
#taskmenu
.special-buttons
a:first-child {

    margin-top:
        7px !important;

    border-top:
        1px solid
        var(--kropp-border-soft) !important;
}


/* ----------------------------------------------------------
   MOBILE / TABLET
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    html {

        --kropp-rail-small:
            58px;

        --kropp-rail-big:
            min(76vw, 250px);
    }


    body.kropp-mail-ui
    #layout {

        padding-left:
            var(--kropp-rail-small) !important;
    }


    body.kropp-mail-ui
    #layout-menu {

        display:
            flex !important;

        transform:
            none !important;
    }


    body.kropp-mail-ui
    #taskmenu {

        display:
            flex !important;
    }

}


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

html.dark-mode
* {

    scrollbar-width:
        thin;

    scrollbar-color:
        #445159
        #1a2023;
}


/* ==========================================================
   SMALL DETAILS
   ========================================================== */

html.dark-mode
a {

    color:
        #b8c7cc;
}


html.dark-mode
a:hover {

    color:
        #fff;
}


html.dark-mode
.badge,

html.dark-mode
.count {

    border-color:
        var(--kropp-accent) !important;
}


html.dark-mode
.quota-widget
.value {

    background:
        var(--kropp-accent) !important;
}

/* BEGIN KROPP SIDEBAR REAL FIX */

/*
 * Der Status wird von kropp.js anhand der REALEN
 * Breite von #layout-menu gesetzt.
 *
 * Damit sind wir unabhängig davon, welche alten
 * collapsed/open Klassen Roundcube oder frühere
 * KROPP-Anpassungen verwenden.
 */


/* ==========================================================
   AUSGEKLAPPT
   ========================================================== */

html.kropp-menu-wide #layout-menu #taskmenu a,
#layout-menu.kropp-menu-wide #taskmenu a {
    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    white-space: nowrap !important;
}


/*
 * Roundcube Elastic verwendet .inner für die Beschriftung.
 *
 * Hier werden sämtliche typischen Clipping-Eigenschaften
 * überschrieben.
 */

html.kropp-menu-wide #layout-menu #taskmenu a .inner,
html.kropp-menu-wide #layout-menu #taskmenu a > .inner,
#layout-menu.kropp-menu-wide #taskmenu a .inner,
#layout-menu.kropp-menu-wide #taskmenu a > .inner {

    display: inline-block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    overflow: visible !important;

    white-space: nowrap !important;

    text-overflow: clip !important;

    text-indent: 0 !important;

    clip: auto !important;
    clip-path: none !important;

    transform: none !important;

    position: static !important;

    flex: 1 1 auto !important;
}


/*
 * Auch Kinder innerhalb von .inner dürfen nicht
 * durch alte Regeln auf 1 Zeichen gekürzt werden.
 */

html.kropp-menu-wide #layout-menu #taskmenu a .inner *,
#layout-menu.kropp-menu-wide #taskmenu a .inner * {

    max-width: none !important;

    overflow: visible !important;

    text-overflow: clip !important;

    white-space: nowrap !important;
}


/*
 * Icon-Spalte.
 * Gibt den Texten eine saubere gemeinsame Startlinie.
 */

html.kropp-menu-wide #layout-menu #taskmenu a::before,
#layout-menu.kropp-menu-wide #taskmenu a::before {

    flex: 0 0 42px !important;

    width: 42px !important;
    min-width: 42px !important;

    margin-right: 4px !important;

    text-align: center !important;
}


/*
 * Verhindert, dass ein Elterncontainer die
 * Beschriftung abschneidet.
 */

html.kropp-menu-wide #layout-menu #taskmenu,
html.kropp-menu-wide #layout-menu #taskmenu > div,
html.kropp-menu-wide #layout-menu #taskmenu > span,
#layout-menu.kropp-menu-wide #taskmenu,
#layout-menu.kropp-menu-wide #taskmenu > div,
#layout-menu.kropp-menu-wide #taskmenu > span {

    max-width: none !important;

    overflow-x: visible !important;
}


/* END KROPP SIDEBAR REAL FIX */


/* === KROPP LOGIN FINAL V4 BEGIN === */

body.task-login {
    background: #14191c !important;
}


body.task-login #layout {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height: 100vh !important;
    min-height: 100dvh !important;

    padding: 22px !important;

    background: #14191c !important;

    overflow: auto !important;
}


body.task-login #layout-content {
    position: relative !important;

    display: flex !important;

    flex: 0 1 540px !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: min(540px, 100%) !important;

    min-width: 0 !important;
    max-width: 540px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;

    padding: 34px 30px 28px !important;

    background: #14191c !important;

    border: 2px solid #29343a !important;
    border-radius: 18px !important;

    box-shadow:
        0 20px 56px
        rgba(0,0,0,.34) !important;

    overflow: visible !important;
}


body.task-login #logo {
    position: static !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: min(54vw, 230px) !important;
    max-width: 230px !important;

    height: auto !important;
    max-height: none !important;

    margin:
        0
        auto
        28px !important;

    transform: none !important;

    filter:
        drop-shadow(
            0 0 14px
            rgba(37,185,244,.28)
        )
        drop-shadow(
            0 0 30px
            rgba(37,185,244,.15)
        )
        drop-shadow(
            10px 0 22px
            rgba(37,185,244,.19)
        ) !important;

    animation:
        kroppLoginGlowV4
        5.4s
        ease-in-out
        infinite !important;
}


@keyframes kroppLoginGlowV4 {
    0%,
    100% {
        filter:
            drop-shadow(
                0 0 12px
                rgba(37,185,244,.22)
            )
            drop-shadow(
                0 0 24px
                rgba(37,185,244,.11)
            )
            drop-shadow(
                8px 0 18px
                rgba(37,185,244,.14)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 19px
                rgba(37,185,244,.38)
            )
            drop-shadow(
                0 0 36px
                rgba(37,185,244,.20)
            )
            drop-shadow(
                12px 0 26px
                rgba(37,185,244,.25)
            );
    }
}


body.task-login #login-form {
    position: static !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: 430px !important;

    margin: 0 auto !important;
}


body.task-login #login-form .form-control,
body.task-login #login-form input,
body.task-login #login-form select {
    min-height: 46px !important;

    background: #171d20 !important;
    color: #dce5e8 !important;

    border:
        2px
        solid
        #29343a !important;

    box-shadow: none !important;
}


body.task-login #login-form .btn-primary {
    min-height: 46px !important;

    border:
        2px
        solid
        #1688b5 !important;

    background:
        #0b86b6 !important;

    box-shadow: none !important;
}


body.task-login .kropp-login-footer {
    margin-top: 20px !important;
    padding-top: 16px !important;

    border-top:
        2px
        solid
        #29343a !important;
}


@media (prefers-reduced-motion: reduce) {
    body.task-login #logo {
        animation: none !important;
    }
}


@media (max-width: 600px) {
    body.task-login #layout {
        padding: 16px !important;
    }

    body.task-login #layout-content {
        width: 100% !important;
        max-width: 100% !important;

        padding:
            28px
            20px
            24px !important;

        border-radius:
            15px !important;
    }

    body.task-login #logo {
        width:
            min(
                56vw,
                210px
            ) !important;

        max-width:
            210px !important;

        margin-bottom:
            24px !important;
    }
}

/* === KROPP LOGIN FINAL V4 END === */


/* ==========================================================
   KROPP MODERN UI · 2026-09-27
   Final responsive/login layer
   ========================================================== */
html,body{min-width:0;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.task-login{overflow:auto!important;background:radial-gradient(circle at 50% -15%,#183758 0,transparent 35%),radial-gradient(circle at 115% 110%,#10243d 0,transparent 33%),#090d12!important}
body.task-login #layout{width:100%!important;min-height:100vh!important;min-height:100dvh!important;padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;display:grid!important;place-items:center!important;background:transparent!important}
body.task-login #layout-content{width:min(440px,100%)!important;max-width:440px!important;margin:0!important;padding:30px 28px 25px!important;border:1px solid #283544!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(18,25,35,.97),rgba(10,15,22,.97))!important;box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.035)!important;backdrop-filter:blur(18px)}
body.task-login #logo{width:min(220px,62vw)!important;max-width:220px!important;max-height:135px!important;margin:0 auto 24px!important;object-fit:contain!important;filter:drop-shadow(0 10px 28px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(74,168,255,.13))!important}
body.task-login #login-form{width:100%!important;max-width:none!important;margin:0!important}
body.task-login #login-form .form-control,
body.task-login #login-form input,
body.task-login #login-form select{min-height:50px!important;border:1px solid #2a3745!important;border-radius:13px!important;background:#0c131b!important;color:#eef5fb!important;box-shadow:none!important;font-size:16px!important}
body.task-login #login-form .form-control:focus,
body.task-login #login-form input:focus,
body.task-login #login-form select:focus{border-color:#4aa8ff!important;box-shadow:0 0 0 3px rgba(74,168,255,.12)!important;outline:0!important}
body.task-login #login-form .btn-primary{min-height:50px!important;border:1px solid #dfeaf4!important;border-radius:13px!important;background:#edf4fa!important;color:#10161d!important;font-weight:800!important;box-shadow:none!important;touch-action:manipulation}
body.task-login #login-form .btn-primary:hover{background:#fff!important;border-color:#fff!important}
body.task-login .kropp-login-footer{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:8px!important;margin-top:21px!important;padding-top:17px!important;border-top:1px solid #222e3a!important;color:#83909d!important}
body.task-login .kropp-home-link{min-height:40px!important;display:inline-flex!important;align-items:center!important;color:#70bfff!important;text-decoration:none!important}
body.task-login .kropp-home-link:hover{color:#a3d7ff!important}
body.task-login a:focus-visible,body.task-login button:focus-visible,body.task-login input:focus-visible{outline:2px solid #7cc4ff!important;outline-offset:2px!important}
@media(max-width:520px){body.task-login #layout-content{padding:24px 18px 21px!important;border-radius:20px!important}body.task-login #logo{width:min(190px,58vw)!important;margin-bottom:20px!important}.kropp-footer-dot{display:none!important}.kropp-private-mail{width:100%;text-align:center}}
@media(max-height:680px){body.task-login #layout{place-items:start center!important}body.task-login #layout-content{padding-top:20px!important;padding-bottom:18px!important}body.task-login #logo{max-height:95px!important;margin-bottom:14px!important}}
@media(prefers-reduced-motion:reduce){body.task-login *,body.task-login *::before,body.task-login *::after{animation:none!important;transition:none!important}}

/* KROPP SOLID PANELS · 2026-10-01 */
body.task-login #layout-content{
  background:#09111f!important;
  border-color:rgba(116,153,211,.22)!important;
  box-shadow:0 24px 64px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.02)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* KROPP FLAT DARK BUTTONS · 2026-10-01 */
body.task-login button,
body.task-login .btn,
body.task-login .button,
body.task-login a.btn,
body.task-login a.button,
body.task-login input[type="submit"],
body.task-login input[type="button"],
body.task-login input[type="reset"]{
  background:#070d16!important;
  background-image:none!important;
  border:1px solid #162236!important;
  color:#d5deeb!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:none!important;
  transform:none!important;
}
body.task-login button:hover,
body.task-login button:active,
body.task-login .btn:hover,
body.task-login .btn:active,
body.task-login .button:hover,
body.task-login .button:active,
body.task-login a.btn:hover,
body.task-login a.btn:active,
body.task-login a.button:hover,
body.task-login a.button:active,
body.task-login input[type="submit"]:hover,
body.task-login input[type="submit"]:active,
body.task-login input[type="button"]:hover,
body.task-login input[type="button"]:active,
body.task-login input[type="reset"]:hover,
body.task-login input[type="reset"]:active{
  background:#070d16!important;
  background-image:none!important;
  border-color:#162236!important;
  color:#d5deeb!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
  transform:none!important;
}