.calendarMonth {
    margin:5px;
    padding:5px;
    display:inline-table;
    border:var(--basic-border);
    background-color: var(--basic-background-color);
    border-radius: 5px;
}

.calendarPreview{
    /*padding:5px;*/
    overflow:visible ;
    background-color:transparent;
    text-align: center;
}



.calendarPreview td.selected,
.calendarPreview td.day.selected:hover {
    border: 1px solid var(--focus-color);
    color: var(--focus-color);
    cursor:pointer;
}



.calendarPreview td.selected.date,
.calendarPreview td.selected.date:hover{
    color:#006400;
    border: 1px solid #006400;
    cursor:pointer;
}

.calendarPreview td.selected.dateSubtract,
.calendarPreview td.selected.dateSubtract:hover{
    color: #d40000;
    border: 1px solid #d40000;
    cursor:pointer;

}


.calendarPreview td.day:hover {
    border: 1px solid #eee;
    font-weight: bold;
    color:black;
    background-color: #eee;
}

.blankDay,
.day{
    text-align: center;
    width: 24px;
    height:24px;
    cursor: pointer;
    border: 1px solid var(--basic-border-color);

}

.calendarPreview td.blankDay{
    border: 1px solid transparent;
}

.calendarNav{
    font-size: large;
    padding: 10px;
    text-align: left;
    padding-left: 30px;
}

.monthHead{
    text-align: center;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}