:root {
    --active-color: #176df6;    
    --dark-color: #212529;
    --light-color: #ffffff;
    --disabled-color: #aaaaaa;
    --selected-color:#e0e0e0;
    /*--selected-color : #ffc107;*/
}
.cal-cell-disabled {
    color: var(--disabled-color);  
}
.cal-cell-selected {          
    border-radius: 7px;
    color: var(--dark-color);
    background-color: var(--selected-color);  
}
.cal-cell-clickable {
    cursor: pointer;
}
.cal-cell-clickable:hover {
    border-radius: 7px;
    color: var(--light-color);
    background-color: var(--active-color);
}
.cal-div {
    border: 1px solid #808080;
    border-radius: 10px;
    width: 270px;
    height: 320px;
    padding:15px;
    z-index: 200000;
    position: absolute;
    display: none;
    background-color: var(--light-color);
}
.cal-body {
    border-top: 1px solid var(--disabled-color);
}

.cal-theme {
    background-color: var(--dark-color);
    color: var(--light-color);
    border-color: var(--light-color);
}