body, html {
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Montserrat' !important;
        overflow-x: hidden !important;
        display: block !important;
    }
    
    h2 {
        font-size: 17px !important;
        font-weight: 600 !important;
    }
    
    p, a, span {
        font-size: 18px !important;
    }
    
    .dashboard-title {
        margin-left: 20px !important;
    }

    header {
        background: linear-gradient(to right, #0c1e40, #3280bc) !important;
        padding: 40px 0 !important;
    }

    #footer {
      background: linear-gradient(to right, #0c1e40, #3280bc) !important;
      padding-top: 20px !important;
    }
    
    .first-row {
        position: relative !important;
        height: auto !important;
        padding-bottom: 10px !important;
    }
    
    .logo-section {
        padding-left: 10% !important;
        position: relative !important;
    }
    
    .login-section {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding-right: 10% !important;
    }

    .login-section .fas {
        color: #fff !important;
    }
    
    img.logo {
        max-width: 280px !important;
    }
    
    .login-section i.fa-bell {
        padding-right: 15px !important;
    }

    .blue-btn {
        background-color: #0c1e40 !important;
        color: #fff !important;
        padding: 10px !important;
        border: none !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
    }
    
    @media only screen and (min-width: 1400px) and (max-width: 1650px) {
        div#statutory-donut-chart {
            margin-left: 35px !important;
        }
    }

    .yellow-btn {
        background-color: #F4CB20 !important;
        color: #0c1e40 !important;
        padding: 10px !important;
        border: none !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
    }

    .btn-dashboard {
        margin-right: 20px !important;
    }
    
    .btn-dashboard:hover {
        background-color: darken(#F4CB20, 10%) !important;
    }
    
    .second-row {
        background-color: transparent !important;
        padding-left: 10% !important;        
    }
    
    #second-container {
        margin: 0 auto !important;
    }
    
    @media(min-width: 1550px) {
        #second-container {
            padding-left: calc(30% - 100px) !important;
        }
    }
    
    #second-container .container.mt-5 {
        position: relative !important;
    }
    
    div#third-container {
        max-width: 350px !important;
        margin: 0 0 0 auto !important;
    }
    
    
    #statutory-main-content-container #third-container {
        margin: 0 !important;
    }
    
    #day7-schedule-btn, #day30-schedule-btn {
        max-width: 350px !important;
    }
    
    .navbar-toggler {
        display: none !important;
        border: none !important;
        outline: none !important;
    }
    
    body > header > div > div.row.second-row > nav {
        padding: 0 !important;
    }

    .nav {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }
    
    .nav-item {
        list-style: none !important;
        text-align: left !important;
    }
    
    .nav-link {
        color: #fff !important;
        padding: 10px 15px 0 15px !important;
        text-decoration: none !important;
        position: relative !important;
        
    }
    
    .nav-link::after {
        content: '' !important;
        display: block !important;
        height: 2px !important;
        width: 0 !important;
        background: #F4CB20 !important;
        transition: width 0.7s !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 15px !important;
    }
    
    .nav-link:hover, .nav-link.active, a.nav-link.visited {
        color: #fff  !important;
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
        width: calc(100% - 30px) !important;
    }
    
    .nav-link:hover {
        color: #fff !important;
    }

    #navbarNav {
        display: block !important;
    }
    
    #main-content {
        padding: 50px 10% !important;
        min-height: 50vh !important;
    }
    
    #calendar {
      max-width: 350px !important;
      padding: 5px !important;
      border: 2px solid #0C1E40 !important;
      border-radius: 25px !important;
      margin-bottom: 30px !important;
    }

    #calendar table {
        border: none !important;
        margin: 0 auto !important;
    }
    
    #calendar table, #calendar table thead, #calendar table tbody {
        width: 250px  !important;
        max-width: 250px  !important;
    }
    
    #calendar table thead {
        border-bottom: 2px solid #b0b0b0 !important;
    }
    
    #calendar table thead tr th {
        color: #b0b0b0 !important;
    }
    
    #calendar table thead tr th.today, .calendar .today {
        color: #0C1E40 !important;
        font-weight: 600 !important;
    }
    
    .calendar th, .calendar td {
      text-align: center !important;
      padding: 5px !important;
      border: none !important;
    }
    
    .calendar td {
      cursor: pointer !important;
      position: relative !important;
      font-size: 14px !important;
    }
    
    .calendar .event {
      background-color: transparent !important;
      color: white !important;
      border-radius: 50% !important;
      border: 1px solid #0C1F40 !important;
      display: inline-block !important;
      width: 25px !important;
      height: 25px !important;
      line-height: 20px !important;
      text-align: center !important;
      position: absolute !important;
      top: 3px !important;
      right: 2px !important;
    }
    
    .two-in-row, .three-in-row, .four-in-row {
        display: grid !important;
        grid-gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    #statutory-details-table .four-in-row {
        margin-bottom: 0 !important;
    }

    .two-in-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .three-in-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .four-in-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .slice {
      stroke: white !important;
      stroke-width: 2 !important;
    }
    
    #controls-container {
        margin-bottom: 40px !important;
    }
    
    #site-selector, #request-call-back-btn {
        width: 200px  !important;
        max-width: 200px  !important;
    }
    
    #site-selector {
        margin-right: auto !important;
        margin-left: 15px !important;
        position: relative !important;
        display: inline-block !important;
    }
    
    /* change color of select - in stroke hex code*/
    .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")  !important;
    }
    
    .form-select-lg {
        background-position: right 25px center  !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")  !important;
        color: #fff  !important;
        font-size: 16px !important;
    }
    
    #third-container .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230C1F40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")  !important;
    }
    
    #site-selector option {
        text-align: center !important;
    }
    
    .sites-title-container {
        background: #E0E0E0 !important;
        padding: 3px 8px !important;
    }
    
    .sites-title-container h3 {
        font-size: 17px !important;
    }

    
    .sites-list-container {
        padding: 6px 8px !important;
        border-bottom: #E0E0E0 1px solid !important;
    }

    .site-item a {
        color: #2B6EB5 !important;
        text-decoration: none !important;
    }
    
    .site-item a:hover {
        color: #2B6EB5 !important;
        text-decoration: none !important;
    }
    
    #main-controls {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: end !important;
    }

    .control-item {
        border-top: 2px solid #20407D !important;
        border-bottom: 2px solid #20407D !important;
        border-left: 2px solid #20407D !important;
    }
    
    #main-controls > div:nth-child(4) {
        border-right: 2px solid #20407D !important;
    }

    .control-item button {
        background: transparent !important;
        border: none !important;
        margin-top: 5px !important;
        color: #20407D !important;
        font-weight: 600 !important;
    }
    
    .control-item select {
        border: none !important;
        color: #20407D !important;
        font-weight: 600 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2320407D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")  !important;

    }
    
    #request-call-back-btn {
        margin-right: 15px !important;
        margin-left: auto !important;
    }
    
    .full-btn {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    span.green {
        width: 10px !important;
        display: inline-block !important;
        height: 10px !important;
        background: green !important;
        border-radius: 50% !important;
    }
    
    span.orange {
        width: 10px !important;
        display: inline-block !important;
        height: 10px !important;
        background: orange !important;
        border-radius: 50% !important;
    }
    
    span.red {
        width: 10px !important;
        display: inline-block !important;
        height: 10px !important;
        background: red !important;
        border-radius: 50% !important;
    }
    
    .keys {
        padding-left: 30px !important;
    }
    
    .keys p {
        font-size: 16px !important;
    }
    
    .icon-blurb {
        display: flex !important;
        flex-direction: row !important;
    }

    .icon-blurb img {
        margin-right: 5px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .site-status {
        color: #9b9b9b !important;
        font-weight: 300 !important;
    }

    .detail-title {
        color: #20407D !important;
        font-weight: 600 !important;
    }
    
    #statutory-main-content-container {
        display: grid !important;
        grid-template-columns: 20% 80% !important;
        grid-gap: 15px !important;
    }
    
    #statutory-details-table .four-in-row {
        grid-gap: 0 !important;
    }
    
    .sites-title-container h4 {
        font-size: 18px !important;
    }
    
    .border-left {
        border-left: 1px solid #c0c0c0 !important;
    }
    
    .border-right {
        border-right: 1px solid #c0c0c0 !important;
    }
    
    .border-bottom {
        border-bottom: 1px solid #c0c0c0 !important;
    }
    
    h3.light {
        font-size: 17px !important;
        font-weight: 400 !important;
    }
    
    .certs-list-container {
        padding: 3px 10px !important;
    }

    #footer h3 {
      color: #fff !important;
      text-align: center !important;
      font-size: 17px !important;
      padding-bottom: 13px !important;
    }

    #footer-copy {
      background: #fff !important;
      padding: 20px 10% !important;
      text-align: center !important;
      font-size: 18px !important;
    }

    #footer-icons {
      border-top: 2px solid #F4CB20 !important;
      border-bottom: 2px solid #F4CB20 !important;
      padding: 20px 10% !important;
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
    }

    .footer-icon span {
      display: block !important;
      text-align: center !important;
      color: #fff !important;
      font-size: 12px !important;
    }

    .footer-icon img {
      width: 45px !important;
      margin: 0 auto 10px auto !important;
      display: block !important;
    }
    
    .bigger-icons img {
        width: 80px !important;
    }
    
    .bigger-icons .footer-icon {
        display: grid !important;
        align-items: center !important;
    }
    
    .bigger-icons > div:nth-child(8) > img, .bigger-icons > div:nth-child(4) > img {
        width: 50px !important;
    }
    
    .white-bg {
        background: #fff !important;
    }

    #footer-links {
      border-bottom: 2px solid #F4CB20 !important;
      padding: 20px 0 0 !important;
    }

    #footer-links p {
      text-align: center !important;
      color: #fff !important;
    }

    #footer-links p a {
      color: #fff !important;
      text-decoration: none !important;
      position: relative !important;
      padding-bottom: 5px !important;
    }

    #footer-links p a::after {
        content: '' !important;
        display: block !important;
        height: 2px !important;
        width: 0 !important;
        background: #F4CB20 !important;
        transition: width 0.7s !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
    }
    
    #footer-links p a:hover::after,
    #footer-links p a.active::after {
        width: 100% !important;
    }
    
    #footer-links p a:hover {
        color: #F4CB20 !important;
    }
    
    /* Define keyframes for the slide-up animation */
    @keyframes slideUp {
      0% {
        opacity: 0 !important;
        transform: translateY(100%) !important;
      }
      100% {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }
    }
    
    /* Create the .slide-up class */
    .slide-up {
      animation: slideUp 0.9s ease-out forwards !important;
    }
    
    /* Define keyframes for the slide-left animation */
    @keyframes slideLeft {
      0% {
        opacity: 0 !important;
        transform: translateX(100%) !important;
      }
      100% {
        opacity: 1 !important;
        transform: translateX(0) !important;
      }
    }
    
    /* Create the .slide-left class */
    .slide-left {
      animation: slideLeft 0.9s ease-out forwards !important;
    }
    
    /* Define keyframes for the slide-right animation */
    @keyframes slideRight {
      0% {
        opacity: 0 !important;
        transform: translateX(-100%) !important;
      }
      100% {
        opacity: 1 !important;
        transform: translateX(0) !important;
      }
    }
    
    /* Create the .slide-right class */
    .slide-right {
      animation: slideRight 0.9s ease-out forwards !important;
    }
    
    td.event-circle {
        display: inline-block !important;
        width: 30px !important;
        height: 30px !important;
        overflow: hidden !important;
    }
    
    button.close {
        background: transparent !important;
        border: none !important;
        font-size: 29px !important;
        padding: 0 !important;
    }
    
    @media(max-width: 991px) {
        .login-section, .logo-section, .first-row,  .second-row {
            display: block !important;
        }
        
        .first-row .logo-section {
            width: 280px !important;
            margin: 0 auto !important;
            padding: 0 !important;
        }
        
        .first-row .login-section {
            width: 310px !important;
            margin: 20px auto 0 auto !important;
            padding: 0 !important;
        }
        
        .first-row .login-section .fa-bell {
            margin: 0 20px 0 55px !important;
            padding: 0 !important;
        }
        
        
        .navbar-toggler-icon {
            height: 4px !important;
            background-color: #fff !important;
            display: block !important;
            margin: 2px !important;
            border-radius: 25px !important;
        }
        
        #third-container .dashboard-title {
            text-align: center  !important;
        }
        
        #site-selector, #request-call-back-btn, #calendar, #third-container {
            margin-left: auto  !important;
            margin-right: auto  !important;
        }
        
        .keys {
            padding-left: 0 !important;
        }
        
        #second-container h2 {
            margin-left: 0  !important;
        }
        
        #statutory-main-content-container #third-container {
            max-width: 100% !important;
            width: 100% !important;
        }
        
        div#navbarNav {
            margin-left: -30px !important;
        }
    }

    @media (max-width: 767.98px) {
        #navbarNav {
            display: none !important;
        }

        .navbar-toggler {
            display: block !important;
            position: absolute !important;
            top: 176px !important;
            left: calc(100% - 46%) !important;
        }

        .logo-section {
            padding-left: 5% !important;
            text-align: left !important;
        }
    
        .login-section {
            justify-content: space-between !important;
        }
    
        .btn-dashboard {
            margin-right: 10px !important;
        }
    
        .second-row .collapse {
            padding: 10px !important;
        }
    
        .nav {
            flex-direction: column !important;
        }
    
        .nav-item {
            text-align: center !important;
        }
        
        #main-controls {
            flex-direction: column !important;
            justify-content: center !important;
        }
        
        .control-item {
            border: 2px solid #20407D !important;
            border-bottom: 0 !important;
            border-right: 2px solid #20407D !important;
        }
        
        #main-controls > div:nth-child(4) {
            border-bottom: 2px solid #20407D !important;
        }
        
        #main-controls {
            margin-bottom: 30px !important;
        }
        
        #footer-icons {
            display: grid !important;
            justify-content: center !important;
            grid-template-columns: repeat(3, 1fr) !important;
            grid-gap: 20px !important;
        }

         .two-in-row, .three-in-row, .four-in-row {
            grid-template-columns: auto !important;
            align-items: center !important;
            text-align: center !important;
        }

        #main-content {
          padding: 50px 5% !important;
        }

        #statutory-main-content-container {
            display: flex !important;
            flex-direction: column !important;
        }
    } 
    
    @media(max-width: 599px) {
        #footer-links p a {
            display: block !important;
        }
        
        #footer-links p span {
            display: none !important;
        }
    }