* {
  font-family: Helvetica, Arial, sans-serif;
  color: #444;
  text-decoration: none;
}

body,
html {
  height: 100%;
  user-select: none;
  overflow: hidden;
}

body {
  background-color: #eee;
  position: relative;
}

.flexCenterHW {
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  cursor: pointer;
  outline: none;
}

.wrapper {
  width: 70%;
  height: 80%;
  padding: 10px 30px;
  border-radius: 30px;
  background-color: rgb(65, 141, 191);
  box-shadow: 2px 2px 10px #333;
}

/* FOR Internet Explorer */

#ie {
  display: none;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .flexCenterHW {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
  }

  #ie {
  display: block;
  width: 400px;
  background-color: #fff;
  margin: 50px auto;
  box-shadow: 3px 3px 3px #c2c2c2;
  }

  #ie .ieTotalLogo {
    width: 100%;
    display: flex;
    text-align: center;
    border-bottom: 3px solid #df0c36;
  }

  #ie .ieTotalLogo img {
    max-height: 70px;
    margin: 5px auto;
  }

  .ieInfo {
    height: 100%;
    padding: 20px;
    padding-bottom: 5px;
  }

  .ieInfo p {
    color: #777;
    padding: 10px;
    font-size: 11pt;
  }

  .ieInfo span {
    color: #555;
    font-weight: 700;
    font-size: 11pt;
  }
}

/* PASSWORD FOR LOGE A */

#passwordContainer {
  display: block;
  width: 25vw;
  background-color: #fff;
  margin: 50px auto;
  position: absolute;
  top: 0;
  box-shadow: 3px 3px 3px #c2c2c2;
}

#passwordContainer .passwordTotalLogo {
  width: 100%;
  display: flex;
  border-bottom: 3px solid #df0c36;
}

#passwordContainer .passwordTotalLogo img {
  max-height: 70px;
  margin: 5px auto;
}

.passwordInputContainer {
  height: 100%;
  padding: 20px;
  padding-bottom: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.passwordInputContainer label {
  color: #555;
  font-weight: 700;
  font-size: 11pt;
}

.passwordInputContainer button {
  background-color: rgb(65, 141, 191);
  color: #fff;
  outline: none;
  border: none;
  padding: 5px 0;
}

/* PRESENTATION PAGE */

.presentationPage {
  display: none;
  height: auto;
  width: 70vh;
  background-color: #fff;
  overflow: hidden;
}

.presentationWrapper {
  /* height: 100%;
  width: 80%;
  display: grid;
  grid-template-rows: 20% 60% 20%; */
  margin: auto;
  padding: 30px;
}
.presentationWrapper header {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.presentationWrapper header > h1 {
  font-size: 4vw;
  margin: 10px;
}
.presentationWrapper header > h3 {
  font-size: 1.5vw;
  margin: 0px;
}

.presentationWrapper header > span {
  font-size: 20pt;
}

.presentationWrapper > div {
  overflow-y: auto;
  align-items: stretch;
  height: 80%;
  margin: auto;
}

.presentationText {
  font-size: 2vh;
  margin: 70px auto;
}

.btnStartQuiz {
  background-color: rgb(65, 141, 191);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 2vw;
  width: 100%;
  /* height: 70px; */
  border-radius: 15px;
  padding: 15px 0;
  box-shadow: 0 0 0 0 rgb(65, 141, 191);
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  to {
    box-shadow: 0 0 2px 10px rgba(65, 141, 191, 0.01);
  }
}

/* QUIZ PAGE */

.quizPage {
  display: grid;
  grid-template-rows: 15% 70% 15%;
  display: none;
  background-color: rgb(65, 141, 191);
  overflow: hidden;
}

.quizHeader {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.quizHeader * {
  color: #fff;
}

.quizHeader h1 {
  font-size: 2vw;
}

.quizHeader p {
  font-size: 2vw;
  font-weight: 700;
}

.QAWrapper {
  background-color: #fff;
  border-radius: 30px;
}

.QAContainer {
  height: 95%;
  width: 90%;
  display: grid;
  grid-template-rows: 25% 75%;
}

.questionContainer {
  width: 100%;
}

.questionText {
  font-size: 2vw;
}

.answersContainer button {
  border: none;
  border-radius: 15px;
  padding: 15px;
  font-size: 14pt;
  text-align: left;
  background-color: #fff;
}

.answersContainer .answerGreen {
  background-color: rgb(37, 139, 3);
  color: #fff;
  font-weight: 700;
}

.answersContainer .answerRed {
  background-color: rgb(225, 5, 50);
  color: #fff;
  font-weight: 700;
}

.answersContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.answersContainer > label {
  background-color: #eee;
  border-radius: 15px;
  height: auto;
  display: grid;
  grid-template-columns: 5% 95%;
  align-items: center;
}

.answersContainer > label label {
  width: 95%;
  padding: 15px 15px 15px 0;
  line-height: 120%;
  font-size: 1vw;
}

.answersContainer > label input {
  margin: auto;
}

.quizbottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.followResult {
  font-size: 14pt;
  font-weight: 700;
  line-height: 150%;
}

.followResult * {
  color: #fff;
  line-height: 130%;
  font-size: 1.5vw;
}

.next {
  background-color: #fff;
  color: rgb(65, 141, 191);
  border: none;
  font-weight: 700;
  font-size: 2vw;
  width: 15vw;
  height: 7vh;
  border-radius: 10px;
  border: 3px solid #fff;
}

/* RESULT PAGE */

.resultPage {
  display: none;
}

/* RESULT */

.result header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result header * {
  color: #fff;
  font-size: 2vw;
}

.result header p {
  /* font-size: 18pt; */
  font-weight: 700;
}

.result {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 15% 70% 15%;
  align-items: center;
}

/* RESULT CONTENT */

.resultContent {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.resultContent > div:first-child {
  width: 80%;
  height: 90%;
  margin: auto;
  display: grid;
  grid-template-rows: 30% 5% 65%;
  grid-template-columns: 100%;
  /* justify-content: center; */
  align-items: center;
}

.resultContent > div:first-child h2 {
  text-align: center;
  font-size: 2vw;
}

.resultContent > div:first-child > hr {
  border: 1px solid #333;
  width: 100%;
}

.resultContent > div:first-child > div:last-child > p {
  text-align: center;
  font-size: 1.5vw;
}

.logoTextContainer {
  display: grid;
  grid-template-rows: 60% 40%;
  align-items: center;
  justify-content: center;
  height: 20vh;
}

.logoResult {
  width: 9vh;
  height: 9vh;
  margin: auto;
  border-radius: 100%;
}

.fail {
  background-image: url("../images/wrong.svg");
  background-color: rgb(225, 5, 50);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center center;
}

.success {
  background-image: url("../images/correct.svg");
  background-color: rgb(37, 139, 3);
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: center center;
}

/* RESULT OPTIONS */

.resultOptions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

.btnPageResult {
  padding: 10px 50px;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  font-size: 1.5vw;
  box-sizing: border-box;
  text-align: center;
}

/* PDF PAGE */

.bodyPdf {
  align-items: flex-start;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.pdfResult {
  width: 95%;
  margin: 0 auto;
  display: none;
}

.pdfResult h1 {
  text-align: center;
  margin: 5px;
  margin-top: 0px;
  font-size: 16pt;
}

.name {
  font-size: 14pt;
  text-align: center;
  margin: 10px;
  margin-bottom: 15px;
}

.resultSummary {
  margin: auto;
  width: 80%;
  margin-bottom: 20px;
}

.resultSummary tbody tr > td {
  text-align: center;
}

.resultSummaryInfo {
  padding-right: 3px;
  margin: auto;
  width: 100%;
}

.resultSummaryInfo thead tr,
.resultSummaryInfo tbody tr {
  display: grid;
  grid-template-columns: 5% 38% 38% 10% 9%;
  grid-gap: 1px;
}

.resultSummaryInfo thead tr th,
.resultSummaryInfo tbody tr td {
  padding: 5px;
  border: 1px solid #000;
  font-size: 10pt;
  line-height: 120%;
  height: auto;
  align-items: center;
  display: inline-grid;
}
* {
  font-family: Helvetica, Arial, sans-serif;
  color: #444;
  text-decoration: none;
}