:root {
    --midPointbright: #e3daa1;
    --midPointbright: #e3daa1;
}

table.calendar {
    padding: 0;
    font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    min-width: 260px;
    width: 90%;
    max-width: 640px;
    margin: 0 auto 1rem;
    border: 1px solid var(--accent-colour);
    border-collapse: collapse;
    background-color: #fff;
}
.calendar caption {
    margin: 0;
    padding: 0.5rem 0;
    border-top: var(--main-content-colour) 1px solid;
    border-right: var(--main-content-colour) 1px solid;
    border-left: var(--main-content-colour) 1px solid;
    font-weight: bold;
    color: #000;
    font-size: 1.25rem;
    background-color: #dedede;
}
.calendar th {
    border-bottom: 1px solid #000;
    font-weight: bold;
    background: #fff;
    text-align: center;
    font-size: 1.15rem;
    padding: 0.25rem 0;
}
.calendar td {
    border: 1px solid #fff;
    padding: 0.1em 0.3em;
    width: 1em;
    text-align: center;
    border:2px solid var(--main-content-colour);
    height: 2.6rem;
    min-height: 2.6rem;
}
.calendar td.today {
    background: #bbb !important;
    font-weight: normal;
    color: #333;
}
.calendar tr td.highlighted {
    background-color: var(--calendarBlue) !important;
    font-weight: normal;
    border: 1px solid var(--midPointbright);
    color: #000;
}
.calendar td.passed {
    font-style: italic;
    font-weight: normal;
    color: #333;
}
table.calendar td.pad {
    color: #eee;
    background: #eee;
}
table.picker {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    background-color: #fff;
    padding: 0;
    min-width: 260px;
    width: 80%;
    max-width: 640px;
    margin: 0 auto 5px;
    border: 1px solid var(--NavyDark);
    border-top-style: none;
    border-collapse: collapse;
    border-radius: 1rem;
}
.picker a {
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #fff;
    color: var(--DarkGray);
}
.picker a:hover {
    color: var(--NavyDark);
    background-color: #e8e8e8;
    border-color: var(--NavyDark);
}
.calendar tr td.amBooked,
.calendar tr td.pmBooked,
.calendar tr td.eveBooked {
    position: relative;
    z-index: 2;
}

.calendar tr td > span {
    display: none;
}
.calendar tr td.amBooked span,
.calendar tr td.pmBooked span,
.calendar tr td.eveBooked span {
    width: 33.3%;
    position: absolute;
    z-index: -1;
    display: block;
    top: 0;
    left: 0;
    height: calc(2.6rem - 2px); /* For Border */
}

div.calExampleOne > span,
div.calExampleTwo > span,
div.calExampleThree > span {
    width: 33.3%;
    position: absolute;
    z-index: -1;
    display: block;
    top: 0;
    left: 0;
    height: 58px;
}


.calendar tr td.amBooked span:first-of-type,
div.calExampleOne > span {
    border-right: 2px solid var(--midPointbright);
    background-color: var(--calendarBlue);
    left: 0;
}
.calendar tr td.pmBooked span:nth-of-type(2),
div.calExampleTwo > span {
    border-left: 2px solid var(--midPointbright);
    border-right: 2px solid var(--midPointbright);
    background-color: var(--calendarBlue);
    left: 33.3%;
}
.calendar tr td.eveBooked span:nth-of-type(3),
div.calExampleThree > span  {
    border-left: 2px solid var(--midPointbright);
    background-color: var(--calendarBlue);
    left: 66.6%;
}
.calendar tr td.eveBooked span:nth-of-type(3) {
    width: 33.4%;
}

.calendar tr td.amBooked.pmBooked > span:has(+ span),
.calendar tr td.pmBooked.eveBooked > span:has(+ span) {
    border-right-width: 0 !important;
}

.calendar tr td.passed.amBooked > span:nth-of-type(1),
.calendar tr td.passed.pmBooked > span:nth-of-type(2),
.calendar tr td.passed.eveBooked > span:nth-of-type(3) {
    /* background-color: var(--heavy-colour); */
    background-color: #ccc;
    opacity: 0.9;
}

.calendar tr td.today.amBooked > span,
.calendar tr td.today.pmBooked > span,
.calendar tr td.today.eveBooked > span {
    opacity: 0.7;
}

tr.calChoice td {
    text-align: center;
}


div.calExampleOne,
div.calExampleTwo,
div.calExampleThree {
    position: relative;
    max-width: 80px;
    width: 80px;
    height: 60px;
    border: 1px solid var(--heavy-colour);
    margin: 2rem 0.5rem;
    display: block;
    text-align: center;
    z-index: 2;
}

div.calExampleOne > em,
div.calExampleTwo > em,
div.calExampleThree > em {
    text-align: center;
    position: relative;
    top: 40%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

div.calExampleOne::after,
div.calExampleTwo::after,
div.calExampleThree::after {
    position: absolute;
    top: -20px;
    left: 24px;
}

div.calExampleOne::after
{
    content: "AM";
}
div.calExampleTwo::after {
    content: "PM";
}
div.calExampleThree::after {
    content: "Eve";
}


div#container > div#left {
    flex-basis: 25%;
    padding-left: 2rem;
}
div#container > div#left > div:first-of-type {
    margin-top: 1rem;
}
div#container > div#right {
    flex-basis: 75%;
}
div#container > div#right > p:first-of-type {
    margin-top:0;
}


@media screen and (max-width: 768px) {
    div#container {
        flex-wrap: nowrap;
        justify-content: stretch;
    }
    div#container > div#left {
        padding-left: 1rem;
    }
}
@media screen and (max-width:500px) {
    div#container > div#left {
        padding-left: 0;
    }
}