.header-examen{
    display:flex;
    justify-content:space-between;
    margin: .2em 5em;
    color: #000;
    font-size: 16px;

}
.name-examen{
    max-width: 100%;
}

.hide-box{
    display: none;
}
.form-pregunta{
    display: flex;
    padding-bottom: 5px;
}
.form-pregunta label{
    font-size: 16px;
   
    
}
.form-pregunta input[type="radio"]{
    width: 20px;
    height: 2em;
}
.pregunta{
    font-size: 18px;
    line-height: 1.5em;
    color: #000;
    margin-bottom: 1.5em;
}
.title-pregunta{
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 1em;
}

@media screen and (max-width: 578px ){ 
    .header-examen{
        margin: .2em 3em;

    }

    
    .side-bar{
      width: 180px!important;

      padding-left: .5em!important;
    }
    .name-examen{
        max-width: 200px;
    }

    .content-section {
      margin: 0 1em;
  }

  .tab-materias span{
    display: block;
  }

 }


 .containerExam ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  .containerExam ul li{
    color: #000000;
    display: block;
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    font-weight: 500;
  }
  
  .containerExam ul li input[type=radio]{
    position: absolute;
    visibility: hidden;
  }
  
  .containerExam ul li label{
    display: inline-block;
    position: relative;
    font-weight: 500;
    font-size: 1.20em;
    padding: 16px 20px 16px 70px;
    line-height: 1.5em;
    height: auto;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
  }
  
  
  .containerExam ul li label:hover{
    color: #0b79f7;
  }
  
  .containerExam ul li .check{
    display: block;
    position: absolute;
    border: 2px solid #000;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    top: calc(30%);
    left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
  }
  
   .containerExam ul li .check label:hover{
    border: 2px solid #0b79f7;
  }
  
   .containerExam ul li .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 3px;
    left: 2.5px;
    margin: auto;
    transition: background 0.5s linear;
    -webkit-transition: background 0.5s linear;
  }

  .containerExam ul li label:hover ~ .check::before{
    background: #0b79f7;
  }
  
   .containerExam input[type=radio]:checked ~ .check {
    border: 2px solid #0b79f7;
  }
  
   .containerExam ul li label:hover ~ .check {
    border: 2px solid #0b79f7;
  }
  
   .containerExam input[type=radio]:checked ~ .check::before{
    background: #0b79f7;
  }
  
  .containerExam  input[type=radio]:checked ~ label{
    color: #0b79f7;
  }

  .current-question{
      font-weight: 600;
      font-size: 18px;
  }
  
  .color-false{
    background: #ffd1d1a1;
  }
  .color-true{
    background: #2ce41f6b;
  }

  #table-respuestas > tbody > tr > td{
    font-size: 15px;
    text-align: left;
    border-top: 2px solid #f3f3f3;
  }
  #table-respuestas{
    max-height: 400px;
  }

  .pregunta table tr td{
    font-family: inherit;
    font-size:  18px;
    color: #000;
  }

   .table-outborders > thead > tr > th, .table-outborders > tbody > tr > th, .table-outborders > tfoot > tr > th, .table-outborders > thead > tr > td, .table-outborders > tbody > tr > td, .table-outborders > tfoot > tr > td{
    border-top: none;
  }


  .container-sidebar{
      width:250px;
      padding-left: 2.8em;
  }

  .side-bar{
      width: 250px;
      transition: .3s ease;
    
  }


.add-top{
  top: 60px;
  transition: .3s ease;
}

/* width */
.side-bar .body-resp::-webkit-scrollbar {
width: 10px;
}

/* Track */
.side-bar .body-resp::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;
}

/* Handle */
.side-bar .body-resp::-webkit-scrollbar-thumb {
background: #d0d0d0; 
border-radius: 10px;
border: .5px solid #d0d0d0;
}

/* Handle on hover */
.side-bar .body-resp::-webkit-scrollbar-thumb:hover {
background: #49aeff; 
}


.content-main{
    width: 100%;
    height: auto;

}

.content-resp{
    width: 100%;
    text-align:center;
    
}
.content-resp .title-resp{
    border-radius: 10px;
    text-align:center;
    max-width: 250px;
    margin: auto;
    padding: 0 .5em;
    
}
.content-resp .title-resp h4{
    font-weight: 600;
    color: #fff;
    padding: 5px 0;
    text-transform: uppercase;
}

.body-resp{
    margin: 2em 0;
    overflow-y: auto;
    max-height: 600px;
}

.body-resp .box-inputs span{
    color: #000;
    font-weight: 700;
    font-size: 16px;
    margin: .3em 0em 0 0;
    
}
.body-resp .box-inputs{
    display:flex;
    align-items: center;
    padding: 0 .5em;
    margin-bottom: 10px;
    border-radius: 10px; 
    justify-content: center;
    
}
.box-incisios{
    
    padding: .5em .5em;
    border-radius: 6px;
}
.box-incisios p{
    color: #000;
    /* font-weight: 600; */
}



.box-pregunta h3{
    color: #000;
    font-size: initial;
    font-weight: 600;
}

.content-insiso * {
  all: unset
  }


  .content-insiso , .content-insiso * {
    font-size:15px!important;
  }


.box-pregunta{
    
    padding-bottom: 1em;
}

.box-pregunta .box-options{
    color: #000;
    font-size: initial;
    font-size: 15px;
    margin-bottom: 10px;

}
.box-pregunta .box-options p{
    display: inline;
    margin-bottom: 0;

}

.box-pregunta .insiso{
    font-weight: 600;
    color: #000;
}


.body-resp ul{
    list-style: none;
    margin: 0;
    padding: 0;
/* overflow: hidden; */
}

.question-box p{
  display: inline-block;
}

.body-resp .box-inputs ul li span{
    position: absolute;
    z-index: 3;
    left: 75%;
    top: 6px;
    font-size: 14px;
    color: #000;
}


.body-resp .box-inputs ul li input[type=radio]:checked ~ span{
 visibility: hidden;
}

.body-resp ul li{
color: #000000;
display: inline;
position: relative;
float: left;
width: auto;
height: auto;
font-weight: 500;
}

.body-resp ul li input[type=radio]{
position: absolute;
visibility: hidden;
}

.body-resp ul li label{
display: inline-block;
position: relative;
font-weight: 500;
font-size: 1.20em;
padding: 16px 10px 10px 10px;
line-height: 1.5em;
margin-left: .5em;
height: auto;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.1s linear;
}


.body-resp ul li label:hover{
color: #0b79f7;
}

.body-resp ul li .check{
display: block;
position: absolute;
border: 2px solid #000;
border-radius: 100%;
height: 20px;
width: 20px;
top: calc(30%);
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.body-resp ul li .back-inside{
    display: block;
    position: absolute;
    border-radius: 45%;
    height: 22px;
    width: 30px;
    top: calc(28%);
    left: 15px;
    background-color: #fff;
    z-index: 2;
    -webkit-transition: border .25s linear;

}

.body-resp ul li .check label:hover{
border: 2px solid #0b79f7;
}

.body-resp ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 10px;
width: 10px;
top: 3px;
left: 3px;
margin: auto;
transition: background 0.5s linear;
-webkit-transition: background 0.2s linear;
}

/*   .body-resp ul li label:hover ~ .check::before{
background: #0b79f7;
}
*/
.body-resp input[type=radio]:checked ~ .check {
border: 2px solid #0b79f7;
}

.body-resp ul li label:hover ~ .check {
border: 2px solid #0b79f7;
}

.body-resp input[type=radio]:checked ~ .check::before{
background: #0b79f7;
}

.body-resp  input[type=radio]:checked ~ label{
color: #0b79f7;
}

.btn-result{
   /*  position: absolute;
    left: 30%;
    bottom: -2.5em; */
    margin: 2em 0;
    
}
.btn-result button.btn-success{
    border: none;
    padding: 10px 25px;
    background-color: #51bb09;
    border-radius: 20px;
    
}
.btn-result button.btn-primary{
    border: none;
    padding: 10px 25px;
    background-color: #0c84d4;
    border-radius: 20px;
    
}

.content-section table tr td, th{
  color: #000;
  font-size: 15px;
}

.tab-materias{
    margin-bottom: 1.5em;
    height: 150px;
    margin-bottom: -1em;
    
    
}

.tab-materias span{
  margin: 5px 5px;
  
  
  /* border-radius: 5px 5px 0 0; */
  border-radius: 5px;
  cursor: pointer;
  color: #111111;
  font-size: 12px;
  margin-bottom: 1em;
  font-weight: 600;
  transition: .3s ease;

}

.tab-materias span:hover{
  background-color: transparent;
  color: #000;
}



.tab-materias span.active{

  color: #fff;
  -webkit-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.30);
-moz-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.30);
box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.30);
  
}

.fixed-init{
  position: fixed;
  top: 60px;
}

.fixed-bottom{
  display: flex;
  align-items: flex-end;
}
.fixed-init-m{
  position: fixed;
  top: 1em;
}


/* The container <div> - needed to position the dropdown content */
.dropdownMats {
  position: relative;
  display: inline-block;
  margin-left: 5em;
}


.dropbtn {
  background-color: transparent;
  color: #212121;
  padding: 10px 0;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  text-align: left;
  min-width: 220px;
}

/* dropdownMats Content (Hidden by Default) */
.dropdownMats-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdownMats */
.dropdownMats-content span {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdownMats links on hover */
.dropdownMats-content span:hover {background-color: #e8e8e8; }

/* Show the dropdownMats menu on hover */
.dropdownMats:hover .dropdownMats-content {
  display: block;
  width: 100%;
}

/* Change the background color of the dropdownMats button when the dropdownMats content is shown */
.dropdownMats:hover .dropbtn {
    background-color: #e8e8e8a1; 
    color: #000;

}



@media screen and (max-width: 1292px){
  .dropdownMats, .text-title {
    margin-left: 2em;

  }
  .text-title {
    margin-left: 2em!important;

  }
}
@media screen and (max-width: 678px){
  .modal-content{
    max-width: 400px;
  }
}


@media only screen 
and (max-device-width : 668px)  
and (orientation : landscape) { 

  .content-section{
    overflow: hidden!important;
  }

  .side-bar {
    height: 280px;
    overflow: hidden;
  }

  .body-resp {
    overflow-y: auto;
    height: 200px;
  }
}