html, body {
      min-height: 100%;
      }
      body, div, form, input, select, textarea, p { 
      padding: 0;
      margin: 0;
      outline: none;
      font-family: Roboto, Arial, sans-serif;
      font-size: 14px;
      color: #666;
      line-height: 22px;
      }
      h1 {
      margin-bottom: 20px;
      font-size: 32px;
      color: #000;
      z-index: 2;
      }
      h5 {
      margin: 10px 0;
      }
      .testbox {
      display: flex;
      height: inherit;
      margin: auto;
      padding: 20px;
      min-width: 80%;
      max-width: 90%;
      }
      form {
      max-width: 95%;
      padding: 20px;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 0 20px 0 #095484; 
      }
      input, select, textarea {
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      }
      input {
      /** width: calc(40% - 10px); **/
      padding: 5px;
      }
      select {
      width: 40%;
      padding: 7px 0;
      background: transparent;
      }
      textarea {
      width: calc(100% - 12px);
      padding: 5px;
      }
      .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder, a {
      color: #095484;
      }
      .item input:hover, .item select:hover, .item textarea:hover {
      border: 1px solid transparent;
      box-shadow: 0 0 6px 0 #095484;
      color: #095484;
      }
      .item {
      position: relative;
      margin: 10px 0;
      }
      input[type="date"]::-webkit-inner-spin-button {
      display: none;
      }
      .item i, input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      font-size: 20px;
      color: #a9a9a9;
      }
      .item i {
      right: 2%;
      top: 30px;
      z-index: 1;
      }
      [type="date"]::-webkit-calendar-picker-indicator {
      right: 1%;
      z-index: 2;
      opacity: 0;
      cursor: pointer;
      }
      /** Uncomment these sections when moving back to stylized checkboxes **/
      input[type=radio], input[type=checkbox]  {
      display: none;
      }
      
      label.radio, label.check {
      position: relative;
      display: inline-block;
      margin: 13px;
      cursor: pointer;
      }
      .question span {
      margin-left: 30px;
      }
      span.required {
      margin-left: 0;
      color: red;
      }
      /** Uncomment these sections when moving back to stylized checkboxes **/
      .checkbox-item label {
      margin: 5px 20px 10px 0;
      }
      
      label.radio:before, label.check:before {
      content: "";
      position: absolute;
      left: 0;
      }
      label.radio:before {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      border: 2px solid #095484;
      }
      label.check:before {
      top: 2px;
      width: 16px;
      height: 16px;
      border-radius: 2px;
      border: 1px solid #095484;
      }
      
      table.ratings{
                  table-layout: fixed;
                  width: 100%;
            }
      @media only screen and (max-width: 768px) {
            table.ratings{
                  table-layout: fixed;
                  width: 100%;
            }
            td {
                  padding: 0px;
            }
      }
      table#class-name-code-table{
        display: block; 
        float: left; 
        margin-right: 60px;
        border: 2px solid;
        border-radius: 10px;
        border-collapse: separate;
        border-spacing: 5px;
      }
      table#recent-check-in-response-table{
        display: inline-block; 
        border: 2px solid;
        border-radius: 10px;
        border-collapse: separate;
        border-spacing: 10px;
      }
      table#recent-exit-ticket-response-table{
        display: inline-block; 
        border: 2px solid;
        border-radius: 10px;
        border-collapse: separate;
        border-spacing: 10px;
      }

      /** Layout options for Data View grid **/
      .gridded{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: minmax(400px, auto);
      }
      .top-left{
        grid-column: 1;
        grid-row: 1;
      }
      .second-left{
        grid-column: 1;
        grid-row: 2;
      }
      .top-four{
        grid-column: 2/5;
        grid-row: 1/2;
      }
      .second-mid-two{
        grid-column: 2/3;
        grid-row: 3/4;
      }
      .second-right-two{
        grid-column: 4/5;
        grid-row: 3/4;
      }
      .third-left-two{
        grid-column: 1/2;
        grid-row: 5;
      }
      .third-right-three{
        grid-column: 3/5;
        grid-row: 5
      }

      /** Uncomment these sections when moving back to stylized checkboxes **/
      input[type=checkbox]:checked + .check:before {
      background: #095484;
      }
      label.radio:after {
      left: 5px;
      border: 3px solid #095484;
      }
      label.check:after {
      left: 4px;
      border: 3px solid #fff;
      }
      label.radio:after, label.check:after {
        content: "";
        position: absolute;
        top: 6px;
        width: 8px;
        height: 4px;
        background: transparent;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
        opacity: 0;
      }
      input[type=radio]:checked + label:after, input[type=checkbox]:checked + label:after {
        opacity: 1;
      }
      .btn-block {
        margin-top: 10px;
        text-align: center;
      }
      button {
        width: 150px;
        padding: 10px;
        border: none;
        border-radius: 5px; 
        background: #095484;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
      }
      button:hover {
        background: #0666a3; 
      }
      .profile-image{
        width: 10em;
        border-radius: 50%;
        padding: 15px;
      }
      #sign-in {
        margin: 20px;
      }
      .sign-in-header{
        padding-top: 50px;
      }
      /**
      @media (min-width: 568px) {
        .city-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        }
        .city-item input {
        width: calc(50% - 20px);
        }
        .city-item select {
        width: calc(50% - 8px);
        }
        .sign-in-header {
              align-content: center;
      }
      **/
      /* The Modal (background) */
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }

      /* Modal Content */
      .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 25px;
        border: 1px solid #888;
        width: 50%;
      }

      .class-code-modal-content{
        width: 25%;
        overflow-y: auto;
      }

      /* The Close Button */
      .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }

      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }

      /* Style the navigation menu */
      .topnav {
        overflow: hidden;
        background-color: #095484;
        position: relative;
        width: 100%;
        min-height: 50px;
        position: fixed;
      }

      /* Hide the links inside the navigation menu (except for logo/home) */
      .topnav #menu-options {
        display: none;
      }

      /* Style navigation menu links */
      .topnav a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
      }

      /* Style the hamburger menu */
      .topnav a.icon {
        background: white;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        color: #095484;
      }

      /* Add a grey background color on mouse-over */
      .topnav a:hover {
        background-color: white;
        color: #095484;
      }

      .footer {
        text-align: center;
      }

      .footer a {
        color: #555555;
      }

      /* Style the active link (or home/logo) */
      .active {
        background-color: #096084;
        color: white;
      }
      @media print
      {
        .no-print {
          display: none !important;
        }
        .only-print{
          display: block !important;
        }
      }