#calendarcontrols {
    margin: 0;
}

    #calendarcontrols #calendarprev {
        height: 25px;
        font-size: 1.8em;
        color: #6495ed;
    }

        #calendarcontrols #calendarprev:hover {
            color: #0056b3;
            cursor: pointer;
        }

    #calendarcontrols #calendarselect {
        text-align: center;
    }

    #calendarcontrols #calendarnext {
        height: 25px;
        font-size: 1.8em;
        color: #6495ed;
        text-align: right;
    }

        #calendarcontrols #calendarnext:hover {
            color: #0056b3;
            cursor: pointer;
        }

#calendar {
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
}

    #calendar .newrow {
        clear: both;
    }

    #calendar .header {
        background-color: #6495ed;
        float: left;
        width: 14%;
        overflow: auto;
        text-align: center;
        border: 2px solid #fff;
        color: #fff;
        padding-top: 4px;
        font-weight: bold;
        font-size: 12px;
    }

    #calendar .calcell {
        float: left;
        width: 14%;
        height: auto;
        /*height: 125px;*/
        min-height: 40px;
        border: 2px solid #fff;
        padding-top: 10px;
    }

        #calendar .calcell .datenumber {
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            height: 20px;
        }

        #calendar .calcell .notes1 {
            font-size: 12px;
            font-weight: normal;
            text-align: center;
            padding-top: 5px;
        }

        #calendar .calcell .notes2 {
            font-size: 12px;
            font-weight: normal;
            text-align: center;
            padding-top: 20px;
        }

    /*#calendar .enabled:hover {
        background-color: #dce8ff;
        cursor: pointer;
    }*/

    #calendar .enabled .diaryentry {
        background-color: #dce8ff;
        border: 1px solid #0056b3;
        padding: 2px;
        display: block;
    }

        #calendar .enabled .diaryentry:hover {
            background-color: #ffffcc;
            cursor: pointer;
        }

    #calendar .notset {
        background-color: #bbd3ff;
    }

    #calendar .notavailable {
        background-color: #ffcccc;
    }

    #calendar .assigned {
        background-color: #5b8dff;
    }

@media only screen and (max-width: 768px) {
    #calendar .calcell {
        /*height: 50px;*/
        min-height: 40px;
    }

        #calendar .calcell .notes1 {
            font-size: 10px;
        }

        #calendar .calcell .notes2 {
            font-size: 10px;
        }
}