
    * {
      font-family: 'Source Sans Pro', sans-serif;
    }
    body {
      margin: 0px;
      background: #F1F3F4;
    }
    @media all and (min-width: 800px) {
      #main_form {
        display: grid;
        grid-template-columns: 1fr 300px;
      }
      #question_palette {
        width: 300px;
        height: 100vh;
        grid-column-start: 2;
        grid-row-start: 1;
        display: grid;
        grid-template-rows: 60px 1fr 140px;
        background-color: white;
      }
      #questions_area {
        height: 100vh;
        overflow-y:scroll;
        grid-column-start: 1;
        grid-row-start: 1;
      }
      #nav_btn {
        display: none;
      }
    }
    
    @media all and (max-width: 800px) {
      #main_form {
        display: grid;
        grid-template-rows: 1fr 140px;
      }
      #question_palette {
        width: 100%;
        overflow: hidden;
        height: 140px;
        display: grid;
        grid-column-start: 1;
        grid-row-start: 2;
        position: fixed;
        bottom: 0px;
        grid-template-rows: 0px 0px 140px;
        background-color: white;
      }
      #questions_area {
        height: 100%;
        overflow-y:scroll;
        grid-column-start: 1;
        grid-row-start: 1;
      }
      #nav_btn {
        display: block;
      }
    }
    

  /* ---- Custom Radio Button Styles START ---- */

    .op_box > input[type=radio] {
      width: 0px;
      height: 0px;
      overflow: hidden;
      z-index: -100;
    }
    .op_box {
      width: 100%;
      display: block;
      margin-bottom: 15px;
    }
    .op_box > span {
      padding : 10px;
      margin: 0px;
      display: flex;
      border-radius: 2em;
      background-color: white;
      border: solid 1px #cdcfcf;
      box-shadow: 3px 3px 5px #cdcfcf;
      transition: border 0.2s ease-in-out;
    }
    .op_box > span:hover {
      /*border: solid 2px black;*/
    }
    .op_box > span > strong {
      width: 40px;
      min-width: 40px;
      height: 40px;
      border: solid 1px black;
      display: inline-block;
      line-height: 40px;
      text-align: center;
      margin-right: 10px;
      border-radius: 100%;
      flex-shrink: 0;
    }
    .op_box > span > span {
      margin: 10px;
      font-size: 1.1em;
    }

  /* ----- Quiz Question Start ----- */

    .question_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .marksarea {
      text-align: right;
    }
    #timer {
      font-size: 2em;
      text-align: center;
      position: relative;
    }

  /* ----- Quiz Pallete Start ----- */

    
    
    #questions_area_wrapper {
      margin: auto;
      max-width: 800px;
    }
    .question {
      display: none;
      padding: 30px;
    }
    .actual_question {
      margin: 40px;
    }
    .questions_list {
      list-style-type: none;
      padding-left: 0px;
      grid-column-start: 1;
      grid-row-start: 2;
      overflow-y: scroll;
    }
    .questions_list > li {
      padding: 15px;
      border-bottom: solid 1px #fccde2;
    }
    #pallete_info {
      grid-column-start: 1;
      grid-row-start: 1;
    }
    .pallete_structure {
      list-style-type: none;
    }

  /* ----- QUIZ CONTROLS Start ----- */

    #toolbar {
      grid-column-start: 1;
      grid-row-start: 3;
      padding: 20px;
      background-color: white;
    }
    .button_group {
      display: flex;
      height: 40px;
      flex-direction: row;
      width: 100%;
      overflow: hidden;
      margin-bottom: 15px;
      border-radius: 2em;
      transition: box-shadow 0.2s ease-in-out;
      box-shadow: 1px 1px 5px #a4a8a8;
    }
    .button_group:hover {
      box-shadow: 2px 2px 5px #cdcfcf;
    }
    .quiz_btn {
      border: none;
      flex-grow: 1;
      height: 100%;
      color: white;
    }
    .prev_ques {
      width: 40px;
      background-color: #2f89fc;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }
    .prev_ques:hover {
      background-color: #0359c9;
    }
    .prev_ques:active {
      background-color: #81b7fd;
      color:black;
    }
    .prev_ques:focus {
      outline: none;
    }
    .next_ques {
      background-color: #2f89fc;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }
    .next_ques:hover {
      background-color: #0359c9;
    }
    .next_ques:active {
      background-color: #81b7fd;
      color:black;
    }
    .next_ques:focus {
      outline: none;
    }
    .submit {
      background-color: #e0c45c;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }
    .submit:hover {
      background-color: #c19f25;
    }
    .submit:active {
      background-color: #efe0a9;
      color:black;
    }
    .submit:focus {
      outline: none;
    }
    .separator {
      border-left: solid 1px white;
    }

/* ----- End ----- */

    .rubrics {
      font-size: 1.2em;
    }
    .rubrics_wrapper {
      margin: 20px;
      border-radius: 6px;
      padding: 20px;
    }


    #forcefs {
      background-color: white;
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left:0;
      z-index:3000;
      text-align:center;

    }
    .flexwrap {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 1.5em;
    }
    #initial_screen {
      background-color: white;
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      left:0;
      z-index:3001;
      text-align:center;

    }

    .instructions_list {
      text-align: left;
      max-width: 600px;
    }

    #agree_btn {
      width: 150px;
      height: 60px;
      font-size: 1em;
      border-radius: 4px;
      background: linear-gradient(to right, rgb(101, 153, 153), rgb(244, 121, 31));
      border: none;
      font-weight: bold;
      color: white;
    }