.calender-extended{
    display: none;
    flex-direction: column;
    position: absolute;
    height: 28vw;
    aspect-ratio: 360/450;
    background-color: #101010;
    transition: opacity .3s ease-in-out,
                margin .3s ease-in-out;
    opacity: 0;

    /*left: 78%;
    top: 50%;*/

    z-index: 5;
    align-self: flex-end;
}

.calender-label{
    display: flex;
    flex-direction: column;
    font-family: Arial;
    width: 100%;
    height: 20%;
    border-bottom: .15vw solid #4C4C4C;
    align-items: start;
    justify-content: center;
    padding-left: 1.5vw;
    gap: .5vw;
    box-sizing: border-box;
}

.current-time{
    font-size: 2vw;
    color: white;
}

.current-date{
    font-size: .8vw;
    color: #646464;
}

.calender-month{
    display: grid;
    height: 80%;
    width: 100%;
    /*background-color: red;*/
    box-sizing: border-box;
    gap: .4vw;
    padding: .4vw;
}

.calender-cell{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial;
    user-select: none;
    font-size: 1vw;

    &:hover{
        cursor: pointer;
        border: .2vw solid #797979;
    }

    &.active{
        background-color: #3F3F3F;
        border: .2vw solid black;
        outline: .2vw solid #3F3F3F;
    }

    &.active:hover{
        outline: .2vw solid #8C8C8C;
    }

    &.week:hover{
        cursor: auto;
        border: 0vw;
    }
    /*background-color: blue;*/
}