html,
body {
  font-size: 18px;
  min-width: 800px;
  /*border:1px blue solid;*/
}

.header {
  background-image: url(../Images/whiteBG.png);
  margin-bottom: 10px;
}

.content2 {
  width: 89%;
  height: 83%;
}

.imageHolder {
  width: 300px;
  margin: 0px auto;
}

#submitBtn,
#retakeBtn,
#AnswerBtn,
#nextBtn,
#prevBtn {
  font-size: 15px;
  width: 220px;
  margin: 5px;
  padding: 10px 0 10px 0;
}

#refbtn img {
  margin-right: 40px;
}


#btnHolder {
  width: 220px;
}

#results {
  font-size: 15px;
}

.choicesHolder {
  width: 100%;
}



.popupHolder {
  height: 350px;
  width: 250px;
}



/*====================*/

.tableHolder {
  width: 98%;
}

.inlineChoices {
  display: block;
  margin: 5px 0px 5px 0px;
}

.images {
  margin: 0px 0px 30px 20px;
}

.itemNumber {
  padding-top: 10px;
}

.choices {
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 5px 0px;
}

.images3 {
  width: 250px;
}

.marks {
  width: 30px;
  height: 30px;
}

@media screen and (max-width: 700px) {

  html,
  body {
    font-size: 17px;
    min-width: 320px;
  }

  .content2 {
    width: 90%;
    height: auto;
    padding: 15px;
    margin: 5px auto;
  }

  .textField {
    font-size: 18px;
    width: 35px;

  }

  .marks {
    width: 20px;
    height: 20px;
  }

  .contentWrapper {
    height: auto;
    max-height: calc(100vh - 180px);
  }

  body {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }


  @media screen and (max-width: 480px) {

    .content2 {
      padding: 10px 15px;
      margin: 2px auto;
    }

    .textField {
      font-size: 16px;
      width: 25px;
      height: 30px;
      
    }

    #submitBtn,
    #retakeBtn,
    #AnswerBtn {
      font-size: 15px;
      padding: 10px 20px;
    }

    .input-container {
      display: block;
    }

    .time-inputs {
      display: block;
      margin-top: 5px;
    }

    .input-label {
      display: block;
      margin-top: 10px;
    }

  }
}