/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
  font-family: 'Montserrat'!important;
 }

a{font-family: 'Montserrat', sans-serif;}
p{ font-family: 'Montserrat', sans-serif; margin-bottom: 0rem!important; font-weight: bold;}
h1{font-family: 'Montserrat', sans-serif;}
label{font-family: 'Montserrat', sans-serif !important;}

.swal2-html-container{
   text-align: center !important;
}

 .prev-button{
     background: #c9a050 !important;
     border-radius: 0px !important;
     border-color: #c9a050 !important;
 }

 .next-button{
    background: #c9a050 !important;
    border-radius: 0px !important;
    border-color: #c9a050 !important;
 }

 .btn-answer{
   padding: 15px !important;
   line-height: 1.3 !important;
    /* background: #c9a050 !important;
    border-radius: 0px !important;*/
    font-weight: 700 !important;
    border-color: #30C439 !important; 
    background: #30C439 !important;
/* background: -moz-linear-gradient(180deg, rgba(0,75,61,1) 0%, rgba(0,75,61,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(0,75,61,1) 0%, rgba(0,75,61,1) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(180deg, rgba(0,75,61,1) 0%, rgba(0,75,61,1) 0%, rgba(0,0,0,1) 100%); */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004b3d",endColorstr="#000000",GradientType=1);
 }

 .puntos-kolbi-text{
   margin-top: 20px;
   font-size: 20px;
 }

 .msj-finish-trivia{
   font-size: 30px !important;
 }

 /* .swal2-popup{
   background: #676767 !important;
   border-color: black !important;
   padding: 30px !important; 
 } */

 div:where(.swal2-container) div:where(.swal2-popup) {
   background: #000000 0% 0% no-repeat padding-box !important;
   opacity: 1 !important;
}

 .swal2-title{
   font-size: 20px !important;
 }
 

 .btn-answer-radiobuttons{
   width: 35%;
   background: #00B5AE !important;
   border-radius: 13px !important;
   color: #ffffff !important;
   font-weight: 700 !important;
   font-size: 18px !important;
}

.text-btnHeader {
   font-weight: 700;
   font-size: 18px;
   line-height: 3rem;
}

.txt-question {
   font-size: 25px;
   font-style: normal;
   font-weight: 700;
   line-height: 49px;
   letter-spacing: 0em;
   text-align: center;
}

.txt-answer {
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 49px;
   letter-spacing: 0em;
   text-align: center;
}

.custom-control-label {
    padding-left: 1rem !important;
    line-height: 1.5rem !important;
}

.form-check-input {
   position: absolute!important;
   margin-top: 0.3rem!important;
   margin-left: -1.25rem!important;
 }

.custom-control-input:checked~.custom-control-label::before {
   color: #fff;
   border-color: #000000!important;
   background-color: #000000!important;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
   background-image: none !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #ABDC4E!important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #007bff;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
   background-color: #ABDC4E!important;
}
.custom-control-input:checked~.custom-control-label::before {
   color: #fff;
   border-color: #007bff;
   background-color: #007bff;
}
.custom-control-input:checked ~ .custom-control-label::before {
   color: #fff;
   background-color: #007bff;
}
.custom-control-input:checked~.custom-control-label::before {
   color: #fff;
   border-color: #000000!important;
   background-color: #000000!important;
}
.custom-radio .custom-control-label::before {
   border-radius: 50%;
}
.custom-radio .custom-control-label::before {
   border-radius: 50%;
}
.custom-control-label::before, .custom-file-label, .custom-select {
   transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.custom-control-input:focus~.custom-control-label::before {
   box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 0%)!important;
}

.header-questions{
   font-size: 25px;
   font-weight: 700;
}

.dgv-color{
   color: #004B3D!important;
}

@media (max-width: 425px) {

   .btn-answer-radiobuttons{
      width: 100%;
      background: #00B5AE !important;
      border-radius: 13px !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      font-size: 18px !important;
      line-height: 3rem !important;
   }
   
   .txt-question {
      font-size: 1.15rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.2rem;
      letter-spacing: 0em;
      text-align: center;
   }

   .form-group {
      margin-bottom: 1rem!important;
      margin-left: 1rem!important;
  }

   .txt-answer {
      font-size: 1.15rem;
      font-style: normal;
      font-weight: 700;
      line-height: 49px;
      letter-spacing: 0em;
      text-align: center;
   }
}

@media (max-width: 375px) {

   .btn-answer-radiobuttons{
      width: 100%;
      background: #00B5AE !important;
      border-radius: 13px !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      font-size: 17px !important;
      line-height: 3rem !important;
   }
   
   .txt-question {
      font-size: 1rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.2rem;
      letter-spacing: 0em;
      text-align: center;
   }

   .form-group {
      margin-bottom: 1rem!important;
      margin-left: 1rem!important;
  }

   .txt-answer {
      font-size: 1rem;
      font-style: normal;
      font-weight: 700;
      line-height: 49px;
      letter-spacing: 0em;
      text-align: center;
   }
}

@media (max-width: 320px) {

   .btn-answer-radiobuttons{
      width: 100%;
      background: #00B5AE !important;
      border-radius: 13px !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      font-size: 15px !important;
      line-height: 3rem !important;
   }
   
   .txt-question {
      font-size: 0.9rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.2rem;
      letter-spacing: 0em;
      text-align: center;
   }

   .form-group {
      margin-bottom: 1rem!important;
      margin-left: 1rem!important;
  }

   .txt-answer {
      font-size: 0.9rem;
      font-style: normal;
      font-weight: 700;
      line-height: 49px;
      letter-spacing: 0em;
   }

   
}

@media (max-width: 425px) {

   .header-questions{
      font-size: 22px;
      font-weight: 700;
   }
}

@media (max-width: 375px) {

   .header-questions{
      font-size: 20px;
      font-weight: 700;
   }
}

@media (max-width: 320px) {

   .header-questions{
      font-size: 17px;
      font-weight: 700;
   }
}