TimeBar {
    position: absolute;
    width: 100px;
    height: 95%;
    left: 86px;
    bottom: 5px;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;

    .time_bar {
        width: 36px;
        height: 95%;
        background-color: #00000066;
        position: relative;
    }

    .time_bar_overlay {
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #5555ff;
        //transition: height 0.4s ease-out, background-color 0.25s linear;
        transform-origin: bottom;
        position: absolute;
    }

    .time_bar_border {
        border: 6px solid black;
        position: absolute;
        border-radius: 10px;
        width: 42px;
        height: 96%;
    }

    .hourglass_icon {
        position: absolute;
        top: -55px;
        color: #fff;
        font-size: 80px;
        font-family: W10Emoji;
        justify-content: center;
        align-items: center;
        pointer-events: all;
    }

    .time_label {
        font-size: 36px;
        color: #bbbbff;
        //text-shadow: -2px 10px 4px #000000;
        //text-stroke: 16px #000077ee;
        text-stroke: 16px #050505;
        position: absolute;
        font-weight: 800;
        top: 34px;
        //font-family: Sono Sans;
        font-family: National Park;
    }
}