/* General styling */
p {
  font-size: 100%;
  font-family: "Arial";
  color: #474645;
}

form {
  font-size: 100%;
  font-family: "Arial";
  color: #474645;
}


b {
  font-weight: bold;
  font-family: "Arial";
}

i {
  font-style: italic;
  color: #C24F97;
  font-family: "Arial";
}

h1 {
  color:#0071B9;
  font-size:30px;
  font-family: "Arial";
  font-weight: bold;
  font-style: italic;
}

li {
  font-family: "Arial";
  color: #474645;
}

/* Ensure, that content is scrollable in y-dimension */
html {
  overflow-x: hidden !important;
}
html.a-fullscreen body {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

form.form-fullwidth {
  width: 100%;
}

/* Instruction screen styling */
.text-instruction {
  margin-right: 20%;
  margin-left: 20%;
}
.text-instruction p {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
}
.text-instruction ul {
  list-style-position: inside;
  text-align: left;
}
.text-reference {
  margin-right: 20%;
  margin-left: 20%;
}
.text-reference p {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  font-size: 80%;
}
.text-reference i {
  font-style: italic;
  color: #474645;
  font-family: "Arial";
  font-size: 80%;
}
.text-error {
  font-size: 250%;
  font-weight: bold;
  color: red;
}
.random_choice {
  font-size: 250%;
  font-weight: bold;
}
.statistics {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
}
.header {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
.red {
  color: red;
}

.footer2 {
  display: flex;
  justify-content: space-between;
}

/* Image Classes for styling */
img.image-large {
  width: 300px;
}

img.image-inline-small {
  width: 50px;
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}

img.image-inline-auto {
  width: auto;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Form Sytling likert scale according to: https://codepen.io/Buttonpresser/pen/poXVod */
form .question {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 20px;
  margin-left: 20%;
  width: 60%;
  text-align: left !important;
  font-family: "Arial";
  color:#474645;
}
form .list {
  display: block;
  list-style-type: none;
  margin-bottom: 10px;
  margin-top: 20px;
  margin-left: 20%;
  width: 60%;
  text-align: left !important;
}