:root {
    --MainToolbar_height: 64px;
}

.MainToolbar {
    padding: 0 !important;
    height: var(--MainToolbar_height);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    vertical-align: middle;
    z-index: 1001;
    display: flex;
    width: 100%
}

.MainToolbar_buttonArea {
    flex-basis: fit-content;
    flex-shrink: 0;
    flex-grow: 1;
    margin: 7px 0;
    text-align: center;

    @media (max-width: 800px) {
        display: none;
    }
}

.MainToolbar_Margin {
    height: var(--MainToolbar_height);
}

.MainToolbar_background {
    position: fixed;
    padding: 0 !important;
    top: 0;
    right: 0;
    left: 0;
    height: var(--MainToolbar_height);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-y: hidden;
    z-index: 1000;
    background: var(--semitransparent-background);
}

.MainToolbar_button {
    font-size: 32px;
    color: grey;
    filter: grayscale(100%);
    line-height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    vertical-align: center;

    @media (max-width: 1000px) {
        padding-left: 4px;
        padding-right: 4px;
    }
}

.MainToolbar_button span,
.MainToolbar_button img,
._ {
    width: 32px;
    height: 32px;
    font-size: 32px;
}

.MainToolbar_mainMenuButtonContainer {
    background: none !important;
    cursor: pointer;
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: end;
    flex-direction: row;
    gap: 20px;
    margin: 0;
    /*padding-top: 18px;*/
    padding-right: 20px;
    font-size: 24px;
    text-align: right;
    /*flex: 1;*/
}

.MainToolbar_mainMenuButton {
    height: 22px;
    width: 22px;
    background-repeat: no-repeat !important;

    @media (prefers-color-scheme: light) {
        background: url('../../img/icons/menu-black.svg');
    }
    @media (prefers-color-scheme: dark) {
        background: url('../../img/icons/menu-white.svg');
    }
}

.MainToolbar_accountMenuButton,
.MainToolbar_combinedMainMenuButton,
._ {
    border-radius: 1000px;
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    vertical-align: top;

    @media (prefers-color-scheme: light) {
        background: #efefef;
    }

    @media (prefers-color-scheme: dark) {
        background: #3a3a3a;
    }
}

.MainToolbar_userImage {
    padding: 0 !important;
    margin: 0 !important;
    margin-top: -5px !important;
    border-radius: 1000px;
    height: 32px;
    width: 32px;
}

.MainToolbar_logoContainer {
    vertical-align: baseline;
    padding-left: 10px;
    padding-right: 10px;
    transition: left 20s, width 20s;

    @media (max-width: 600px) {
        display: none;
    }
}

.MainToolbar_logoContainer a {
    display: flex;
    justify-items: center;
    align-content: center;
    align-items: center;
    text-decoration: none;
    line-height: var(--MainToolbar_height);
}

.MainToolbar_logoText {
    color: #6e6e6e;
    font-size: 32px;
    font-family: "Calibri Light", -apple-system, BlinkMacSystemFont, sans serif;
    font-weight: 300;
    line-height: 20px;
    text-transform: uppercase;

    @media (max-width: 1000px) {
        display: none;
    }

    @media (prefers-color-scheme: dark) {
        color: lightgray;
    }
}

.MainToolbar_logoImage {
    display: inline-block;
}

/* <Expanding search input when it's focused using the MainToolbar_searchActive class> */

.MainToolbar_searchActive .MainToolbar_logoContainer {
    /*display: none;*/
    /*flex-grow: 0;*/
    /*flex-basis: 1px;*/
    /*transition: flex 20s;*/
}

.MainToolbar_searchActive .MainToolbar_mainMenuButtonContainer {
    /*display: none;*/
}

.MainToolbar_searchActive .MainToolbar_buttonArea {
    /*display: none;*/
}

/* </Expanding search input when it's focused using the MainToolbar_searchActive class> */