/* Style inputs, select elements and textareas */
@font-face {
  font-family: "Houschka W01 Medium";
  src: url("//db.onlinewebfonts.com/t/225646b777438f81ec8400ff378afe2d.eot");
  src: url("//db.onlinewebfonts.com/t/225646b777438f81ec8400ff378afe2d.eot?#iefix") format("embedded-opentype"),
       url("//db.onlinewebfonts.com/t/225646b777438f81ec8400ff378afe2d.woff2") format("woff2"),
       url("//db.onlinewebfonts.com/t/225646b777438f81ec8400ff378afe2d.woff") format("woff"),
       url("//db.onlinewebfonts.com/t/225646b777438f81ec8400ff378afe2d.ttf") format("truetype"),
       url("//db.onlinewebfonts.com/t/225646b777438f81ec8400ff378afe2d.svg#Houschka Pro Medium") format("svg");
}

input[type=text], select, textarea {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1.4rem !important;
  padding: 12px;
  resize: vertical;
  width: 100%;
}

input[type=text]:focus, select:focus, textarea:focus {
  border: 1px solid #0090b7;
  border-color: #0090b7 !important;
  box-shadow: none !important;
  outline: 0;
}

/* Style the label to display next to the inputs */

label {
  display: inline-block;
  padding: 12px 12px 12px 0;
}

/* Style the submit button */

button[type=submit] {
  background-color: #00AEEF;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  float: right;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 12px 20px;
}

button[type=submit]:hover { background-color: #0090b7; }

button[type=submit]:disabled { background-color: #b8b8b8 }

h2 {
  color: #275486;
  font-family: "Houschka W01 Medium";
  line-height: 1.3;
}

/* Floating column for labels: 25% width */

.col-25 {
  float: left;
  margin-top: 6px;
  width: 25%;
}

/* Floating column for inputs: 75% width */

.col-75 {
  float: left;
  margin-top: 6px;
  width: 75%;
}

/* Clear floats after the columns */

.row:after {
  clear: both;
  content: "";
  display: table;
}

.posibleAnswer {
  height: 0;
  opacity: 0;
  width: 0;
}

.radio-icon {
  background-image: url("check.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 30px;
  width: 30px;
}

.posibleAnswerDiv:hover { background-color: aliceblue; }

.posibleAnswerDivSelected { background-color: aliceblue; }

.radio-icon-selected { background-image: url("checkfilled.svg") }

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    margin-top: 0;
    width: 100%;
  }
}

/*Timer*/

.base-timer {
  height: 60px;
  position: relative;
  width: 60px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .base-timer__svg { transform: rotate(90deg); }
}


.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke: grey;
  stroke-width: 7px;
}

.base-timer__path-remaining {
  fill-rule: nonzero;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 7px;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
}

.base-timer__path-remaining.green { color: rgb(65, 184, 131); }

.base-timer__path-remaining.orange { color: orange; }

.base-timer__path-remaining.red { color: red; }

.base-timer__label {
  align-items: center;
  display: flex;
  font-size: 22px;
  height: 60px;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 60px;
}

body {
  font-family: "Houschka W01 Medium" !important;
  overflow-x: hidden;
}

p,
label {
  font-family: "Houschka W01 Medium" !important;
  font-size: 1.4rem;
}

h2 label { font-size: 2.0rem; }