/*
* {
    box-sizing: border-box
} */
:root{
    --calendar--color-passed:  #636d7c50;
    --calendar--color-hover: #636d7cab;
    --calendar--color-background: #636d7c00;
    --calendar--color-cursor: #87bba8;
    --calendar--color-border: black;
    --calendar--color-week-name-font: white;
    --calendar--color-week-name: #2f4f4f99;
    
}
.calcel-button{
    font-size: 14px;
    margin: 0px;
    width: 100%;
    border: solid 1px var(--calendar--color-border);
    background-color: #636d7c/*var(--calendar--color-background);*/
}

.today-cell{
    background-color: var(--calendar--color-hover);
}

.fixed-cell{
    background-color: var(--calendar--color-passed);
}

.calcel-button{
    border: 1px solid var(--calendar--color-border);
    cursor: pointer;
    width: 100%;
    height: 100%;
} 

.calcel-button:hover{
    border: solid 1px var(--calendar--color-hover);
    background-color: var(--calendar--color-cursor);
}

.cal-date-cell, .cal-date-header{
    width: 70px;
    height: 50px;
    padding: 0px;
    font-size: 14px;
    text-align: center;
}

tr.cal-date-header th{
    border: 1px solid var(--calendar--color-border);
    background-color: var(--calendar--color-week-name);
    color: var(--calendar--color-week-name-font);
}

#CalendarTitle{
    border: 1px solid;
    padding: 0px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}
#nextMonth, #prevMonth{
    cursor: pointer;
    border: 1px solid var(--calendar--color-border);
    padding: 0px;
    font-size: 16px;
    height: 100%;
}
.month-direction{
    width: 100%;
    height: 35px;
    border: solid 0px var(--calendar--color-border);
    background-color: var(--calendar--color-passed);
    /*color: var(--calendar--color-background);*/
}

.month-direction:hover{
    cursor: pointer;
    background-color: var(--calendar--color-hover);
    /*color: var(--calendar--color-passed);*/
}