/* ==========================================================================
   PHARMAPLUS MAIL V3.2.1
   MOBILE NAVIGATION DRAWER CORRECTION
   ========================================================================== */

/*
 * V3.1 correctly made the DESKTOP application rail 64px wide, but that rule
 * also leaked into Roundcube's phone popover drawer. On layout-phone the
 * drawer must become a normal readable navigation panel again.
 */
@media screen and (max-width: 1024px) {

    html.layout-phone body:not(.task-login) #layout-menu.popover,
    body:not(.task-login) #layout-menu.popover {
        width: min(300px, calc(100vw - 56px)) !important;
        min-width: 0 !important;
        max-width: 300px !important;
        background: #0F5C22 !important;
        border-right: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: 8px 0 24px rgba(18,35,23,.22) !important;
    }

    body:not(.task-login) #layout-menu.popover .popover-header {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: #0F5C22 !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        background: #0F5C22 !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu > .action-buttons,
    body:not(.task-login) #layout-menu.popover #taskmenu > .special-buttons {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu > a,
    body:not(.task-login) #layout-menu.popover #taskmenu > .action-buttons > a,
    body:not(.task-login) #layout-menu.popover #taskmenu > .special-buttons > a {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 47px !important;
        min-height: 47px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        color: rgba(255,255,255,.90) !important;
        background: transparent !important;
        border-left: 3px solid transparent !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 0 !important;
        line-height: 47px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu > a:before,
    body:not(.task-login) #layout-menu.popover #taskmenu > .action-buttons > a:before,
    body:not(.task-login) #layout-menu.popover #taskmenu > .special-buttons > a:before {
        float: left !important;
        width: 22px !important;
        margin: 0 12px 0 0 !important;
        color: currentColor !important;
        font-size: 1.05rem !important;
        line-height: 47px !important;
        text-align: center !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu > a > .inner,
    body:not(.task-login) #layout-menu.popover #taskmenu > .action-buttons > a > .inner,
    body:not(.task-login) #layout-menu.popover #taskmenu > .special-buttons > a > .inner {
        display: inline !important;
        max-width: none !important;
        padding: 0 !important;
        overflow: visible !important;
        color: currentColor !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 47px !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu a:hover,
    body:not(.task-login) #layout-menu.popover #taskmenu a:focus {
        color: #fff !important;
        background: rgba(255,255,255,.09) !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu a.selected {
        color: #fff !important;
        background: rgba(255,255,255,.13) !important;
        border-left-color: #A7E7B2 !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu > .special-buttons {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        background: #0D4F1D !important;
    }

    body:not(.task-login) #layout-menu.popover #taskmenu a.logout {
        color: #FF9AA1 !important;
    }
}

/* Never alter the accepted desktop 64px application rail. */
@media screen and (min-width: 1025px) {
    body:not(.task-login) #layout-menu:not(.popover) {
        width: 64px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.task-login) #layout-menu.popover,
    body:not(.task-login) #layout-menu.popover #taskmenu a {
        transition: none !important;
    }
}