.question{
padding:15px 0;
}

.question:first-child{
padding-top:5px;
}

input[type=radio]{
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    outline: none;
    padding: 0;
	margin:0 10px;
    border: 1px solid rgba(0,0,0,0.1);
	cursor:pointer;


}

input[type='radio']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
    }

input[type=radio]:focus{
outline:0;	
}

.option label{
height:100%;
display:flex;
align-items:center;
cursor:pointer;
}

.options{
gap:20px;
display:flex;
}



/*
.pagecontainer .header .content{
width:calc(100% - 20px);
}*/

.pagecontainer .paging:first-child{
margin-top:0;
}


.page_quiz .sidebar .header{
    padding: 15px 18px 15px 20px;
	display:none;
}

.page_quiz .sidebar.item_toggled  .header{
	display:flex;
}

.list .remove:last-child{
display:none;
}

/*
.header{
padding:0 5%;
}*/

.container.head{
margin:20px 0 30px 0;
}


.option{
border: 1px solid rgba(0,0,0,0.1);
border-radius: 10px;
cursor:pointer;
float:left;
height: 65px;
width:100%;
display:flex;
align-items:center;
padding:0 0 0 15px;
}


.leftbar .body{
max-width:70%;
overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; 

}

.expand, .unexpand{
right: 15px;
top: calc(40px - 8.5px);
}

.expand .bi-chevron-up{
display:inline-block;
cursor:pointer;
}

.expand .bi-chevron-down{
display:none;
cursor:pointer;
}

.page_quiz .leftbar.toggleUp .expand .bi-chevron-up{
display:none;
}

.page_quiz .toggleUp.m_hide{
display:inline-block!important
}

.page_quiz .leftbar.toggleUp .expand .bi-chevron-down{
display:inline-table;
}

.explanation{
background: rgba(255, 255, 255, 0.2);
    padding: 0 10px;
    border-left: 5px solid rgba(0,0,0,.7);
    border-radius: 5px;
}


.listq .bi-x-circle, .listq .bi-check-circle, .paging .bi-x-circle, .paging .bi-check-circle{
display:none;
}



.markicon{
display:none;
}

/*
.pagecontainer .markicon{
    right: 15;
    left: unset;
}*/


.paging{
gap:10px;
padding:10px;
margin:5px 0;
position:relative;
height:80%;
cursor:pointer;
}



.check{
height:20px;
width:20px;
border-radius:50%;
border:1px solid;	
font-size:12px;
}

.checked{
background:#ffffff;
color:var(--primarycolor);
}


.page_quiz .logo i{
margin-left:auto;
}



.logo .dropdown{
width:100%;
}





.leftbar .paging{
height:60px;
}

.leftbar .container{
padding:0 10%;
margin-top:50px;	
}

.leftbar h3{
margin:0;	
}


.h20{
height:20%;
}

.leftbar.stretch .pagelist{
padding:0 2%;
}

.hide{
display:none;	
}

.pagecontainer{
padding:0 2%;
display: inline-block;
}

.leftbar .pagecontainer{
overflow:hidden;
overflow-y:auto;
overscroll-behavior: contain;
position:relative;
}

.page_quiz .sidebar{
transition:none;
box-shadow:none;
}


.option{
transition: all 0.3s; 
}

.option:hover, .paging:hover{
scale:1.05;	
}

@media (hover: none) {  
.option:hover, .paging:hover{
scale:unset;	
}
.option:active, .paging:active{
scale:1.05;	
}
}




.wrong{
border:3px solid #FF6347;	
}


.option.wrong{
background: rgba(255, 99, 71, .2);
}


.correct{
border:3px solid #4CAF50;
}


.option.correct{
background:rgba(102, 205, 170, .2);		
}


.wrong:hover{
border:3px solid #FF6347;	
}
.correct:hover{
border:3px solid #4CAF50;	
}


.correct .markicon, .wrong .markicon{
display:inline-block;
right:11.5px;
position:absolute;
}

.correct .label, .wrong .label{
width:78%;
}

.correct.option input[type=radio], .wrong.option input[type=radio]{
opacity:0;
}

.correct .body, .wrong .body{
width: calc(100% - 80px);
}

.markicon i{
display:none;
font-size:22px;
}

.correct .bi-check-circle, .wrong .bi-x-circle, .correct .bi-check-circle-fill, .wrong .bi-x-circle-fill{
display:inline-block;
}

.correct .markicon{
color:#4CAF50;
}

.wrong .markicon{
color:#F44336;
}

.pagecontainer .wrong, .pagecontainer .correct{
border:0;
}

.pagecontainer .wrong .markicon, .pagecontainer .wrong .markicon{
cologr:#FFFFFF;
}






@media only screen and (min-width: 768px){
.options{
gap:4%;
row-gap:20px;
}

.option{
width:48%;
}
}


/*
@media only screen and (max-width: 991px){
.page_quiz .leftbar.toggleUp{
height:60%;
gap: 10px;
}

.page_quiz .leftbar.toggleUp .pagecontainer{
display:block!important;	
}
}*/


@media only screen and (min-width: 992px){
	
.page_quiz .sidebar{
width:34%;
right:1%;
}

	
.logo {
    min-width: 40%;
}

.page_quiz .leftbar.toggleUp .pagecontainer{
display:none;
}

.page_quiz .rightbar{
padding-bottom:50px;
width:77%;
}




.leftbar .header:before{
content:unset;	
}

	
button .label{
display:inline-block
}


.leftbar.stretch{
padding:10px;
}



.page_quiz .leftbar .item{
padding:10px;
width:80%;
text-align:center;
border-radius:15px;
margin-bottom:10px;
}



}

.optionsinput{
  width:85%;
}


.optionsinput{
border:0;
}

.optionsinput:focus{
outline:0;
}

.option label {
    font-size: 15px;
}
input::placeholder {
  color: #dfdfdf;
}
input:focus::placeholder {
  color: transparent;
}
label {
  display: block;
}
input::placeholder {
  color: #dfdfdf;
}
input:focus::placeholder {
  color: transparent;
}


input {
  border:0;
  border-radius:6px;
  padding:20px 0;
  width:100%;
  border:1px solid #eee;
}


.optionsinput{
margin:0;
border:0;
}

.group {
  width:100%;
}
.group:focus-within label {
  color:#212121 !important;
  font-weight:400;
}

.skeleton label span{
min-width:40%;
}

.skeleton .question span{
min-width:100%;
display: inline-block;
}


.page_quiz .leftbar .skeleton:after{
background:transparent;
}