#calendar-wrapper {
width: 100%;
    font-family: 'TagHeuerRegular', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    font-size: inherit;
    border: 2px solid #D9D9D9;
    padding: 10px;
}
.header {
position: absolute;
padding-top: 12px;
}
.header h4 {
padding: 0;
margin: 0;
}
#calendar #calendar-days,
#calendar #calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
align-items: center;
box-sizing: inherit;
margin: 0;
}
#calendar #calendar-days {
justify-items: center;
grid-row: 1/2;
grid-column: 1/2;
margin-top: 12px;
margin-bottom: 15px;
}
@media (max-width:768px) {
#calendar #calendar-days span {
font-size: 0.75rem;
}
}
#calendar #calendar-grid {
justify-items: flex-start;
grid-row: 2/-1;
grid-column: 1/2;
width: 100%;
}
#calendar #calendar-grid > time {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #fafafa;
transition: box-shadow 200ms, border 100ms;
box-shadow: 1px 1px rgba(0, 0, 0, 0);
box-sizing: inherit;
padding: 0.5em 0.8em;
width: 90%;
height: 90%;
border: 2px solid transparent;
}


#TimeWrapper {
display:none;
}
#calendar #calendar-grid time.selected,
#calendar #calendar-grid time.selected:focus{
border: 2px solid #000000;
box-sizing: inherit;
background-color: #000000;
color: #ffffff;
}
#calendar #calendar-grid time.disabled,
#calendar #calendar-grid time.disabled:focus {
outline: none;
border: 2px solid transparent;
box-sizing: inherit;
cursor: not-allowed;
background-color: #d9d9d9;
box-shadow: 1px 1px rgba(0, 0, 0, 0);
color: #2e2e2e;
}
#calendar #calendar-grid > *:hover {
border: 2px solid rgba(30, 39, 51, 0.2);
box-sizing: inherit;
}
#calendar #navigation-wrapper button {
cursor: pointer;
background: transparent;
border: 0;
font-size: 2rem;
width: 1.6em;
box-sizing: inherit;
padding: 0.1em;
margin: 0;
}
@media (max-width:768px) {
#navigation-wrapper {
font-size: 1rem;
text-align: right;
    border-bottom: 1px solid #D9D9D9;
    width: 100%;
    padding-right: 11px;
}
}

#time-wrapper{
display: grid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
font-size: inherit;
}
.time{
grid-template-rows: 1rem !important;
}
.time-grid {
grid-template-columns: repeat(4, 3fr);
    display: grid;
    margin-top: 20px;
    grid-template-rows: repeat(5, 4fr);
}
#calendar #navigation-wrapper button:hover {
opacity: 0.75;
}
#calendar #navigation-wrapper button svg {
margin: 0;
padding: 0;
width: 100%;
height: 1.6em;
display: block;
box-sizing: inherit;
}
#calendar #navigation-wrapper button[disabled] svg {
cursor: not-allowed;
fill: rgba(30, 39, 51, 0.2);
}