.calendar,
.calendar * {
    box-sizing: border-box;
    pointer-events: auto;
}
.calendar {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-color: #EEE;
    color: #333;
    border: 3px solid #777;
    padding: 5px;
    width: 16em;
    display: none;
    
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 99%;
    max-width: 768px;
    height: 99%;
    z-index: 10000;
}

.calendar .calendarCloseButton {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 30px;
    height: 30px;
    font-size: 2em;
    cursor: pointer;
    padding: 4px 6px;
}
.calendar .calendarCloseButton i {
    position: absolute;
    top: 0;
    left: 4px;
}
.calendar .calendarCloseButton:hover,
.calendar .calendarCloseButton:focus {
    background-color: #FDF5CE;
    color: #C77405;
}

.calendar .months {
    background-color: #58453F;
    color: #FFF;
    padding: 0.2em;
    text-align: center;
    margin-top: 50px;
    font-size: 1.5em;
}

.calendar .prev-month,
.calendar .next-month {
    padding: 0;
}

.calendar .prev-month {
    float: left;
}

.calendar .next-month {
    float: right;
}

.calendar .current-month {
    margin: 0 auto;
}

.calendar .months .prev-month,
.calendar .months .next-month {
    color: #FFF;
    text-decoration: none;
    padding: 0 0.4em;
    cursor: pointer;
}

.calendar .months .prev-month:hover,
.calendar .months .next-month:hover,
.calendar .months .prev-month:focus,
.calendar .months .next-month:focus {
    background-color: #FDF5CE;
    color: #C77405;
}

.calendar table {
    border-collapse: collapse;
    padding: 0;
    font-size: 1.1em;
    width: 100%;
}

.calendar th {
    text-align: center;
}

.calendar td {
    text-align:center ;
    padding: 1px;
    width: 14.3%;
}

.calendar td span {
    display: block;
    color: #555;
    background-color: #F6F6F6;
    border: 3px solid #CCC;
    text-decoration: none;
    padding: 0.2em;
}
.calendar td.selectable span {
    cursor: pointer;
}

.calendar td.today span {
    color: #363636;
    border: 3px solid #FED22F;
}
.calendar td.past-day span {
    background-color: #DFDFDF;
    border: 3px solid #DDD;
    color: #999;
}

.calendar td.selectable span:hover,
.calendar td.selectable span:focus {
    background-color: #FFF0A5;
    border: 3px solid #FED22F;
}

.calendar tr.openDateRow td {
    padding-top: 10px;
}
.calendar tr.openDateRow .openDateLegend {
    font-size: 0.85em;
    display: block;
    margin-top: -5px;
}