.question{

  border: medium solid rgb(223, 64, 4);
  //width: 300px;
  background-color: white;
  color:black;

}

.question .header{
  background-color: rgb(223, 64, 4);
  padding: 5px;
  color: white;
  font-weight: bold;
}

.question .message{
  padding:5px;
  font-weight: bold;

}

.question .editor{

  margin: 10px;
  border-radius: 3px;
  width: 90%;
  height: 100px;
}

.question .buttons{
  margin: 10px;
  margin-left: 15%;
}

.question .buttons .button{

   border-radius: 8px;
   margin-right: 20px;
}

.question .submit{

  background-color: rgb(19, 143, 72);
  width: 40%;
  color:white;
  border:none;
}

.question .solution{

  background-color: rgb(16, 115, 147);
  width: 40%;
  color:white;
  border:none;
}

.question .submit:hover{

  background-color: rgb(47, 161, 96);
  width: 40%;
  color:white;
}

.question .solution:hover{

  background-color: rgb(34, 138, 172);
  width: 40%;
  color:white;
}

.question .submit:active{

  background-color: rgb(14, 108, 54);
  width: 40%;
  color:white;
}

.question .solution:active{

  background-color: rgb(9, 91, 117);
  width: 40%;
  color:white;
}

.question .correct{

  border-radius: 8px;
  color: white;
  margin-left:10px;
  padding-left:5px;
  width:35%;
  padding: 5px;
  left: 30%;
  position: relative;
  background: #17c048;
  height: 0;
  opacity: 0;
  font-weight: bold;

}

.question .fail{

  border-radius: 8px;
  color: white;
  padding-left:5px;
  margin-left:10px;
  width:35%;
  padding: 5px;
  left: 30%;
  position: relative;
  background: rgba(246,41,12,1);
  height: 0;
  opacity: 0;
  font-weight: bold;

}

.question .correct.show{
  height: 100%;
  opacity: 1;
  transition: all 1s ease-in;
}

.question .fail.show{
  height: 100%;
  opacity: 1;
  transition: all 1s ease-in;
}

.question .load-icon{
  font-size: 4em !important;
  position: relative;
  left: 40%;
  bottom: 12%;
  display:none;
  margin-bottom: 30px;
}


.question .load-icon.show{

  display:inherit;

}