/* Make standard after darksaber */
.page__content .topDrawerHolder {
    margin-top: var(--sgabarHeight) !important;
}

.topDrawerHolder {
    width: 100%;
    height: auto;
    margin: 0 auto;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    position: absolute;
    transition: transform 0.3s ease-out;
    will-change: transform;
    transform: translateY(-100%) translateY(34px);
    pointer-events: none;
}

.topDrawerContainerWrapper {
    pointer-events: auto;
}

.drawer-active  {
    transform: translateY(0);
    top: -30px;
}

.topDrawerArrow {
    width: 55px;
    height: 35px;
    padding: 0;
    display: flex;
    cursor: pointer;
    margin: -1px auto 0 auto;
    pointer-events: auto;
}

.topDrawerArrow svg {
    width: 70%;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.5));
    transition: transform .2s ease;
}

.rotateArrow {
    margin-bottom: 2px;
    transform: scaleY(-1);
}

.topDrawerArrowGroup {
    fill: #FFF;
}

#playermodeContainer {
    padding: 46px 16px 16px 16px;
}

.playermodeTFFButtons {
    margin-top: 10px;
    display: flex;
}

#playermodeTFFButtons-login {
    flex: auto;
}

#playermodeTFFButtons-register {
    line-height: 40px;
    padding-left: 16px;
}

@media screen and (min-width: 768px) {
    .topDrawerHolder {
        width: 480px;
    }
}

@media screen and (orientation: landscape) {
    .topDrawerHolder {
        width: 480px;
    }
}

/*# sourceMappingURL=topDrawer.6921f358ce62464ee439.css.map*/