.calendar {
   margin-top: 0.1em;
   border: 1px solid #ccc;
   border-radius: 4px;
   position: absolute;
   display: block;
   background: white;
   z-index: 100;
}

.calendar.none {
   display: none;
}

.calendar-header {
   color: white;
   background: gray;
   display: table;
   width: 100%;
   padding-top: .2em;
   padding-bottom: .2em;
}

.calendar-header > * {
   vertical-align: middle;
   border: none;
   display: table-cell;
   text-align: center;
}

.calendar-header > i {
   position: relative;
   cursor: pointer;
   padding-left: .5em;
   padding-right: .5em;
}

.calendar-header > span {
   text-align: center;
}

.calendar-month {
   display: table;
   table-layout: fixed;
}

.calendar-week {
   display: table-row;
}

.calendar-week > span.day {
   display: table-cell;
   padding: 0.1em 0.05em 0.1em 0.05em;
   font-size: 1em;
   text-align: center;
   background: white;
   cursor: pointer;
   color: black;
   width: 14%;
   border: 2px solid transparent;
}

.calendar-week > span.day.different-month {
   color: #C0C0C0;
}

.calendar-week > span.day.selected {
   border: 2px solid rgb(223, 117, 20);
}

.calendar-week > span.day.hover {
   background-color: rgb(223, 117, 20);
   color: white;
}

.calendar-week > span.day.unavailable {
   color: #C0C0C0;
   text-decoration: line-through;
   cursor: default;
}

.calendar-week.names > span.day {
   font-size: 0.75em;
   cursor: default;
   color: inherit;
}