/* this section controls the Member Tools button in the task bar */
.menu a.button-assigngroup.assigngroup:before  {
    /*
    The code here in content is an icon that can be found via:
    https://fontawesome.com/icons/user?f=classic&s=regular
    which roundcube drops in via web/skins/elastic/fonts/
    */
    content: "\f4fe";
}

.button-assigngroup.assigngroup span.button-inner {
    white-space: break-spaces;
}

@media screen and (min-width: 1025px) {
    #taskmenu a.button-assigngroup {
        height: auto;
    }
}

/* Logo tweaks */
.task-login #logo {
    content: url('/skins/sonic/images/sonic-logo-wordmark-blk-blue.svg');
    max-width: 387px;
    margin-bottom: 6px;
}

.dark-mode .task-login #logo {
    content: url('/skins/sonic/images/sonic-logo-wordmark-wht-blue.svg');
}

#layout-menu #logo,
.dark-mode #layout-menu #logo {
    opacity: 1;
    content: url('/skins/sonic/images/sonic-logo-wordmark-wht-blue.svg');
    max-width: 42px;
}

html:not(.layout-phone) #layout-menu #logo,
html.dark-mode:not(.layout-phone) #layout-menu #logo {
    width: 42px;
}

html.layout-phone #layout-menu .popover-header img#logo {
    max-width: 222px;
}

@media screen and (min-width: 1025px) {
    html:not(.layout-phone) #layout-menu #logo,
    html.dark-mode:not(.layout-phone) #layout-menu #logo {
        max-width: 56px;
        width: 56px;
    }
}

/* left menu layout */

html:not(.layout-phone) body {
    overflow-x: hidden;
}

html:not(.layout-phone) #layout-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1em;
}

html:not(.layout-phone) #layout-menu .popover-header {
    flex: 0 0 auto;
}

/* scrollbar styling */

/* Firefox */
html:not(.layout-phone) #layout-menu,
html:not(.layout-phone) #taskmenu,
html:not(.layout-phone) #layout-list .scroller {
    scrollbar-width: thin;
    scrollbar-color: #9da9af #243238; /* thumb / track */
}

/* WebKit/Blink (Chrome, Edge, Safari) */
html:not(.layout-phone) #layout-menu::-webkit-scrollbar,
html:not(.layout-phone) #taskmenu::-webkit-scrollbar,
html:not(.layout-phone) #layout-list .scroller::-webkit-scrollbar {
    width: 8px;
}

html:not(.layout-phone) #layout-menu::-webkit-scrollbar-track,
html:not(.layout-phone) #taskmenu::-webkit-scrollbar-track,
html:not(.layout-phone) #layout-list .scroller::-webkit-scrollbar-track {
    background: #243238;
}

html:not(.layout-phone) #layout-menu::-webkit-scrollbar-thumb,
html:not(.layout-phone) #taskmenu::-webkit-scrollbar-thumb,
html:not(.layout-phone) #layout-list .scroller::-webkit-scrollbar-thumb {
    background-color: #9da9af;
    border-radius: 4px;
    border: 2px solid #243238;
}

html:not(.layout-phone) #layout-menu::-webkit-scrollbar-thumb:hover,
html:not(.layout-phone) #taskmenu::-webkit-scrollbar-thumb:hover,
html:not(.layout-phone) #layout-list .scroller::-webkit-scrollbar-thumb:hover {
    background-color: #c3ccd1;
}

html:not(.layout-phone) #taskmenu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1em;
}

html:not(.layout-phone) #taskmenu > * {
    flex-shrink: 0;
}

html:not(.layout-phone) #taskmenu .special-buttons {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    display: block;
    margin-top: auto;
    padding-bottom: 0.75rem;
}