/* JS Class */
.upBarSelected,
.drawerSelected {
    border-bottom: 1px solid white;
}

.showUpBarColor {
    background-color: var(--customCrimson);
}

.slideMediaLeft {
    transform: translateX(0%);
}

.slideMediaRight {
    transform: translateX(-50%);
}

.hideUpBar {
    transform: translateY(-100%);
}

.hideDrawer {
    transform: translateX(-100%);
}

.hide {
    opacity: 0;
}

.fade {
    animation: fade 1s ease-in;
}

.floatIn {
    animation: floatIn 1s ease-in;
}

.selected {
    background-color: crimson;
}

.notSelected {
    background-color: var(--footerColor);
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(10vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}