/* init page styles */

.init-page-p {
  /* color: darkgray; */
}

/* two style-pieces about body and grey-background are inside of html-file */

.card-title {
  color: purple;
  font-size: 27px !important;
  line-height: 1.2 !important;
  padding: 10px 0 20px 0;
  font-weight: 700 !important;
  text-align: center;
}

/* end of init page styles */

/* thank page styles */

.thank-you-page {
  padding-top: 3rem;
}

.thank-you-page h3 {
  color: purple;
  font-size: 50px;
}

.thank-you-page p {
  font-size: 21px;
}

/* end of thank page styles */


#test-title {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  padding: 20px 0;
  color: purple;
}

#username-overlay {
  position: absolute;
  background-color: black;
  background: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#username-overlay #username-module {
  background: white;
  border-radius: 9px;
  width: 45%;
  height: 180px;
  padding: 9% 5%;
  /* margin: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#username-overlay #username-module input {
  margin-bottom: 21px;
}

#validation-info {
  padding: 0 0 10px 0;
  text-align: left;
  color: red;
}

.question-body {
  display: flex;
  flex-direction: row;
}

.question .question-title {
  color: purple;
  opacity: .7;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 60px;
  border-bottom: 1px solid grey;
  text-transform: capitalize;
}

.question-body {
  margin-bottom: 9px;
}

.question-body .column1 {
  line-height: 2.1;
  width: 39%;
  text-align: right;
  padding-top: 21px;
  padding-right: 10px;

  /* modern format */
  user-select: none;

  /* old-school format */
  /* -webkit-user-select: none; Safari */
  /* -moz-user-select: none; Firefox */
  /* -ms-user-select: none; IE10+/Edge */
  /* user-select: none; Standard */
}

.question-body .column2, .question-body .column3 {
  width: 10%;
}

.question-body .column-description {
  /* color: red; */
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  user-select: none;
  text-transform: capitalize;
}

.column1 ul, .column2 ul, .column3 ul {
  margin-top: 5px;
}

.column2 ul li, .column3 ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
}