#sidepanel {
    display: none
}

@media (min-width: 768px) and (max-width: 991px) {
    body.logged-in header {
        padding-left: 60px;
    }

    body.sidepanelslide header {
        transition: padding-left ease .25s, transform ease .25s
    }

    body.logged-in.sidepanelopen header {
        padding-left: 250px;
    }
}

@media (min-width: 768px) {

    #sidepanel {
        position: fixed;
        left: 0px;
        top: 0;
        bottom: 0;
        background-color: var(--grey-dark);
        background: linear-gradient(180deg, #000 0, var(--grey-dark) 300px, #000 1000px);
        z-index: 1022;
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        padding: var(--padding) var(--padding);

        overflow: hidden;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        max-width: 250px;

    }

    body:not(.nomination):not(.sidepanelopen) #sidepanel {
        width: calc(40px + var(--padding-double));
    }

    body.sidepanelslide #sidepanel {
        transition: width ease .25s;
    }

    body.sidepanelslide #sidepanel .fa-arrow-to-right {
        transition: transform ease .25s;
    }

    body.sidepanelslide {
        transition: padding-left ease .25s
    }

    body.logged-in.sidepanelopen #sidepanel {
        width: 250px;
    }

    body #sidepanel .fa-arrow-to-right {
        display: inline-block;
    }

    body.logged-in.sidepanelopen .fa-arrow-to-right {
        display: inline-block !important;
        transform: rotate(180deg)
    }


    body.logged-in,
    body:not(.nomination) {
        padding-left: calc(40px + var(--padding-double));
    }

    body.logged-in.nomination, body:not(.logged-in) {
        padding-left: 0
    }

    body.logged-in.sidepanelopen {
        padding-left: 250px;
    }

    #sidepanel .sidepanelheader {
        border-bottom: 1px solid var(--grey);
        padding-bottom: var(--padding-half)
    }

    #sidepanel .sidepanelbody {
        overflow-y: auto;
        overflow-x: hidden;
    }

    #sidepanel .sidepanelbody::-webkit-scrollbar {
        width: 6px;
    }

    /* Track */
    #sidepanel .sidepanelbody::-webkit-scrollbar-track {
        background: var(--grey-light);
    }

    /* Handle */
    #sidepanel .sidepanelbody::-webkit-scrollbar-thumb {
        background: var(--grey);
    }

    /* Handle on hover */
    #sidepanel .sidepanelbody::-webkit-scrollbar-thumb:hover {
        background: var(--grey-dark)
    }

    #sidepanel .sidepanelfooter {
        border-top: 1px solid var(--grey);
        padding-top: var(--padding-half)
    }

    #sidepanel ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
    }

    #sidepanel ul li {
        list-style: none;
        width: 100%;
        height: 40px;
        white-space: nowrap;
        line-height: 40px;
        color: var(--grey-light);
        position: relative;
    }

    #sidepanel .sidepanelbody ul li {
        margin-bottom: 5px;
    }

    #sidepanel ul li.seperator {
        margin-bottom: 15px;
    }

    #sidepanel ul li.seperator:After {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 7px);
        border-bottom: 1px solid var(--grey)
    }

    #sidepanel ul li i {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: var(--blue)
    }

    #sidepanel ul li a {
        line-height: 40px;
        color: var(--grey-light);
        display: block;
        border-radius: 4px;
        overflow: hidden;
    }

    #sidepanel ul li a:hover i,
    #sidepanel ul li a:hover {
        background-color: var(--blue-hover) !important;
        color: var(--white)
    }

    #sidepanel ul li.current-menu-parent a,
    #sidepanel ul li.current-menu-item a,
    #sidepanel ul li.current-page-item a {
        background-color: var(--blue);
    }

    #sidepanel ul li.current-menu-parent a:hover,
    #sidepanel ul li.current-menu-item a:hover,
    #sidepanel ul li.current-page-item a:hover {
        background-color: var(--blue-hover);
    }

    #sidepanel ul li.current-menu-parent a,
    #sidepanel ul li.current-menu-item a,
    #sidepanel ul li.current-page-item a,
    #sidepanel ul li.current-menu-parent a i,
    #sidepanel ul li.current-menu-item a i,
    #sidepanel ul li.current-page-item a i {
        color: var(--white)
    }
}

#supportpanel {
    position: fixed;
    bottom: 0;
    left: calc(30px + var(--padding-double));
    width: 100vW;
    max-width: calc(100vW - var(--padding-double) * 2.5);
    transition: max-width ease .25s, width ease .25s, max-height ease .25s, left ease .25s;

    z-index: 1022;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    max-height: calc(90vH - 30px);
    display: none;
    overflow: auto;
}

#supportpanel .supportpanelinner {
    background: linear-gradient(180deg, #000 0, var(--grey-dark) 300px, #000 1000px);
    color: #fff;
    padding: var(--padding-double);

}

#supportpanel.panelactive {
    display: block;
}


@media (max-width: 767px) {
    .openSupportPanel-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: var(--padding);
        background-color: var(--grey-dark);
        border-top-right-radius: 4px;
        color: var(--blue);
        z-index: 1022;
    }


}

#supportpanel.panelactive:after {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: -1;
}

@media (min-width: 768px) {
    .openSupportPanel-mobile {
        display: none
    }

    #supportpanel {
        width: 500px;
        left: calc(40px + var(--padding-double));
        max-height: 80vH
    }

    body.sidepanelopen #supportpanel {
        left: 250px;
        max-width: calc(100vW - 250px);
    }

}


#supportpanel .supportButtons {
    display: flex;
    flex-direction: row
}


#supportpanel .supportButtons .col {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    #supportpanel.formactive .supportButtons .col {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

#supportpanel .supportForm {
    height: 0;
    overflow: auto;
    transition: max-height ease .25s;
}

#supportpanel.formactive .supportForm {
    height: auto;
    max-height: 100%;
    padding-top: var(--main-padding);

}

#supportpanel.formactive .btn.startSupportForm {
    background-color: var(--blue-hover)
}

.closeSupportPanel {
    position: absolute;
    top: var(--padding);
    right: var(--padding);
    display: block;
    z-index: 2;
    padding: var(--padding)
}

.closeSupportPanel:hover {
    color: var(--blue)
}