.help {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    right: 0;
    z-index: 10000;
    display: grid;
    grid-template-columns: 4em 1fr;
    grid-template-rows: 1fr
}

.help .background {
    grid-area: 1/1/2/3;
    background-color: rgba(66,66,66,.64)
}

.help .background.fade-in {
    animation: fadein 250ms ease-out 1 forwards normal
}

.help .background.fade-out {
    animation: fadeout 250ms ease-out 1 forwards normal
}

.help .content {
    grid-area: 1/2/2/3;
    padding: 3.2rem 1.6rem 3.2rem 3.2rem;
    background-color: white;
    display: grid;
    grid-template-rows: auto 1fr;
    transform: translateX(100%);
    transition: all ease-in-out 250ms;
    overflow-y: scroll;
}

.help .content::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none; 
  }

.help .content .help-item {
    overflow-y: auto;
    padding: 0 2rem 0 0;
}

.help .content .help-item::-webkit-scrollbar {
    height: 1.2rem;
}
.help .content .help-item::-webkit-scrollbar-thumb {
    background: #e71321;
    border-radius: 10px;
}
.help .content .help-item::-webkit-scrollbar-track {
    box-shadow: inset 0px 0px 20px 12px #222;
    border-radius: 10px;
}


.help .content.slide-in {
    animation: slidein 250ms ease-out 1 forwards normal
}

.help .content.slide-out {
    animation: slidein 250ms ease-in 1 reverse normal
}

.help .content .controls {
    grid-area: 1/1/2/2;
    width: 100%
}

.tool-tip i[class*="fa-"] {
    margin: 0;
    width: auto;
    padding: 0 0.2rem;
}

@media screen and (min-width: 53.75em) {
    .help {
        grid-template-columns:auto 44rem;
    }
}

.hidden {
    display: none
}


@keyframes slidein {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0%)
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeout {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}