html {
           margin: 0px;
           height: 100%;
           width: 100%;
           overflow-y: scroll;
        }
        body {
           margin: 0px;
           min-height: 100%;
           width: 100%;
           background-color: #E8E8E8;
        }
         body {
         display: flex;
         justify-content: center;
         align-items: flex-start;
         margin-top: 20px;
         }
         .login-container {
         width: 300px;
         }
         .calendar-legend {
         margin-top: 1px;
         text-align: center;
         }
         .calendar-legend p {
         display: inline-block;
         margin-right: 1px;
         padding: 5px;
         }
         /* Shift A: Red */
         .shift-a, .shift-a a {
         background-color: red !important;
         color: white !important;
         }
         /* Shift B: Gray */
         .shift-b, .shift-b a {
         background-color: gray !important;
         color: white !important;
         }
         /* Shift C: Blue */
         .shift-c, .shift-c a {
         background-color: blue !important;
         color: white !important;
         }
         /* Shift D: Yellow */
         .shift-d, .shift-d a {
         background-color: yellow !important;
         color: black !important;
         }