/*GRAY - BG-Normal #EFEFEB  */
/*BLUE - BG-Answe  #006FBA  */
/*Light Blue - Text #6DCFF6*/
h1,h2,h3,h4,h5,h6,p,span
{
  font-weight: 400;
  font-family: Roboto;
}
.max-w-500
{
  max-width: 500px;
}
.max-w-400
{
  max-width: 400px;
}
.max-w-300
{
  max-width: 300px;
}
.max-w-250
{
  max-width: 250px;
}

.inactive
{
  pointer-events: none;
  opacity: 0.7;
}

.bold
{
  font-weight: bold;
}
.sec
{
  height: 100vh;
}

.light_blue
{
  color: #6DCFF6;
}
.background-container
{
  height: 100%;
  transition: 1s background-color;
  align-content: center;
}

.Q-image-main
{
    position: absolute;
    top: 85%;
    left: 80%;
    transform: translate(-50%, -50%);
    max-width: 350px;
    width: 100%;
}
.Q-image-main-br
{
  top: 85%;
  left: 80%;
}
.Q-image-main-bc
{
  top:85%;
  left: 50%;
}
.Q-image-main-bl
{
  top:85%;
  left: 10%;
}
.Q-image-main-tl
{
  top: 15%;
  left: 10%;
}
.Q-image-main-tr
{
  top:15%;
  left: 80%;
}



.background-container.question
{
  background-color: #EFEFEB;
}
.background-container.answer
{
  background-color: #006FBA;
}
.Q-answers
{
  justify-content: center;
}

.contrast_text
{
  transition: 1s color;
}
.question .contrast_text
{
  color: #006FBA;
}

.answer .contrast_text
{
  color: #EFEFEB;
}

.place-item-center
{
  place-items: center;
}
.btn-holder
{
  display: flex;
  z-index: 5000;
    position: relative;
}
.btn
{
  background-color: #006FBA;
  color: white;
  font-weight: bold;
}

.question .btn
{
  background-color: #006FBA;
  border:2px solid #006FBA;
  color: white;
  font-weight: bold;
  transition: 1s background-color,1s color;

}
.question .btn:hover
{
  background-color: #EFEFEB;
  color: #006FBA;
}
.answer_text_holder p
{
  font-weight: bold;
}
.hidden_text 
{
  font-size: 1.8rem;
}
.results_num
{
  font-weight: bold;
}
.answer_holder
{
    padding: 20px 30px;
    border: 2px solid #14559D00;
    border-radius: 15px;
    transition: 1s border;
    height: 100%;
    align-content: flex-start;
    display: flex;
    flex-direction: column;    
}
.answer_image_holder img
{
  max-width: 100px;
  margin-bottom: auto;
}
.answer_text_holder p
{
    font-size: 1.4rem;
} 
.green
{
  color: #1FC700;
  font-weight: bold;
}
.answer_holder:hover
{
    border: 2px solid #14559Daa;
}

.answer_holder.selected
{
    border: 2px solid #14559D;

}
.answer_holder.selected_final
{
    border: 2px solid #EFEFEB;
}
.answer_holder.Correct
{
    border: 2px solid #1FC700;
}
.answer_holder.Correct .answer_text_holder p
{
  color: #1FC700!important;
}

.disable
{
  pointer-events: none;
}
.answer_holder
{
  text-align: center;
}

.answer .btn
{
  background-color: #EFEFEB;
  border:2px solid #EFEFEB;
  color: #006FBA;
  font-weight: bold;
  transition: 1s background-color,1s color;
}
.answer .btn:hover
{
  background-color: #006FBA;
  color: #EFEFEB;
}
.image
{
  transition: 1s filter;
}
.answer .image
{
  filter: brightness(0) invert(1);
}

.btn-container
{
  justify-items: center;
}
.intro-image-holder img
{
  max-width: 600px;
}

.c_answer
{
  height: 100%;
  width: 100%;
  line-height: 1.7rem;
}