/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');*/

*{ box-sizing:border-box; margin:0; }

body{
    font-family: Arial;
    font-family: 'Open Sans', sans-serif;
}


.quiz-container {
    width: 1100px;
    margin: 0 auto;
}

.pt-40{
padding-top: 40px;
}

p{ margin:10px 0; }

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: medium none;
    vertical-align: middle;
}

table tbody tr, table thead tr {
    border: 1px solid #e6e6e6;
}

.quiz-wrap{
    float:left;
    width:100%;
    background:#f9f9f9; 
}
.btn-color {
    background: #ff6700;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 17px;
    display: inline-block;
    padding: 9px 15px;
    text-decoration: none;
}


.text-center {
    text-align: center;
}

.container{
    max-width:1300px !important;
    margin:auto;    
}

.right-section {
    width: 72%;
    float: left;
    margin-left: 3%;
}
.sidebar {
    width: 25%;
    float: left;
}
.sidebox {
    margin-bottom: 25px;
    float: left;
    width: 100%;
}
.filter-by {
    background-color: #fff;
    border: 1px solid #f2f2f2;
}
.filter-by h2 {
    background-color: #ff6700;
    color: #fff;
    padding: 10px 20px;
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 0;
}
.filter-by .accordion {
    background-color: #fff;
    color: #333333;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 22px;
    transition: 0.4s;
    border-top: 1px solid #f2f2f2;
}


.accord-listbox .panel{ display:none; }
.accord-listbox .panel.active { display: block; }

.accord-listbox .panel ul {  margin: 0; list-style: none; }

.accord-listbox .panel ul li::before {
    content: '';
    border: solid #ff6700;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(-45deg);
    margin: 0 12px 0 0;
}
.accord-listbox .panel ul li {
    font-size: 18px;
    color: #333;
    padding: 6px 0;
}

.accord-listbox .panel ul li.active{
    color:#ff6700;
}

.make-title h3 {  font-size: 20px; }

.success-message {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
}

.success-message .mtxt-1 {
    color: #ff6700;
    font-size: 34px;
    font-weight: 700;
    line-height: 35px;
    margin-bottom: 15px;
}

.success-message .mtxt-2, 
.success-message .mtxt-4 {
    color: green;
    font-size: 19px;
    margin: 4px 0;
}
.success-message .mtxt-5 {
    font-weight: 600;
    color: green;
    font-size: 28px;
    padding: 5px 0 15px;
}

.top-text h4{ 
    display: inline-block; 
    font-size:25px; 
    font-weight: 700;
    color:#333333;
}
.text-colum{
    float:left;
    width: 75%;
}

.language-colum {
    float: right;
    width:25%;
    margin-top: 20px;
}

.select-color>select {
    width: 100%;
    border: none;
    color: #ffffff;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ff6700 url("images/angle-down.png") no-repeat center right;
    padding: 10px 20px;
    font-size: 18px;
    max-width: 170px;
    float: right;
}

.top-text {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}
/*------radio style----------*/

.radio input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.radio input[type="radio"] + .radio-label::before {
    background: hsla(0, 0%, 0%, 0) none repeat scroll 0 0;
    border: 2px solid #ff6700;
    border-radius: 100%;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 1.3em;
    margin-right: 2px;
    position: relative;
    text-align: center;
    top: 0;
    transition: all 250ms ease 0s;
    vertical-align: top;
    width: 22px;
    height: 22px;
    min-width: 22px;
}


.radio input[type="radio"]:checked + .radio-label::before {
    background-color: #ff6700;
    box-shadow: 0 0 0 4px #f4f4f4 inset;
}
.radio input[type="radio"]:focus + .radio-label::before {
    border-color: #ff6700;
    outline: medium none;
}
.radio input[type="radio"]:disabled + .radio-label::before {
    background: #ff6700 none repeat scroll 0 0;
    border-color: #ff6700;
    box-shadow: 0 0 0 4px #ff6700 inset;
}
.radio input[type="radio"] + .radio-label:empty::before {
    margin-right: 0;
}

.radio span {
    font-size: 22px;
    color: #333333;
    font-weight: 500;
    cursor: pointer;
}

.radio {
    padding: 15px 20px;
    border-top: 1px solid #f2f2f2;
}




.question_panel {
    background: #FFFFFF;
    border: solid 1px #e5e5e5;
    float: left;
    width: 100%;
}

.question_list {
    border-top: solid 1px #e5e5e5;
    padding: 20px;
}

.question_list:first-child{ border-top: none; }

.que-box {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.question_panel h5 {
    font-size: 19px;
    padding-bottom: 10px;
    
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}

.que-item label {
    
    padding: 2px 0 10px;
    color: #333333;
    font-size: 18px;
    cursor: pointer;
    
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}



.que-item b {   padding: 0 5px 0; }

.radio-style input[type="radio"], 
.que-item b, 
.que-item span  { float:left; }

.que-item { padding: 2px 15px; }
.question_list h5 em { font-style: normal; padding-right: 8px; }
.next-question {  padding: 30px 0 30px; }
.next-question a {  min-width: 150px; }

    
.radio-style input[type="radio"]{
    width:25px;
    height: 25px;
}

.radio-style input[type="radio"]:checked{
    width: 25px;
    height: 25px;
}   
    


.answer_panel {
    float: left;
    width: 100%;
    margin-bottom:30px;
}

.answer_head {
    background: #333333;
}
.answer_head h5 {
    color: #fff;
    padding: 10px 20px;
    margin: 0;
    
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    
    font-size:18px;
    font-weight:600;
    
    
}

.answer_head h5 em {
    font-style: normal;
    padding-right: 5px;
}

.answer-body {
    
    background:#FFFFFF;
    padding: 20px;
    border: solid 1px #f2f2f2;
    
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ans-item {
    padding: 5px 10px 8px;
    color: #333;
    font-size: 18px;
    
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}
.ans-item b {  padding-right: 5px; }

.result_panel {
    background: #FFFFFF;
    border: solid 1px #e5e5e5;
    padding: 40px;
    float: left;
    width: 100%;
}

ul.inline-button li {
    display: inline-block;
    margin: 40px;
}
input#submit_quiz {
    border: none;
    min-width: 150px;
    line-height: 26px;
}
.result-title {
    text-align: center;
    font-size: 30px;
    color: #007116;
    font-weight: 600;
    padding: 0 0 20px;
}

.wrong-ans{ color:#ed0106; }


table.result-table {width:100%; color: #333; font-weight: 500; margin-bottom:20px; }

.result-table tr:nth-child(odd) {  background: #f5fffa; }
.result-table tr:nth-child(even) {  background: #f5f5f5; }
table.result-table tr td {  text-align: left; padding: 8px 25px; }
.result-table tr td:first-child{ border-right: solid 1px #e6e6e6; }

.result_panel p {  font-size: 18px; }


/*-----------------------------------------------------*/
/*----/////////////#Media Query/////////////////////////*/
/*-----------------------------------------------------*/

@media screen and (min-width: 1025px){ 
    .que-item {  flex: 0 0 50%; max-width: 50%; }
    .ans-item {  flex: 0 0 50%; max-width: 50%; }

}

@media screen and (max-width: 1024px){
    .que-item, .ans-item { flex: 0 0 100%; max-width: 100%; }
}
@media screen and (max-width: 768px){
    .que-item label{ font-size:17px; line-height:24px; }
}

.ans-item.correct-ans {
    color: #02a406;
}

.ans-item.users-ans {
    color: #2202a4;
}

.ans-item.Incorrect-ans {
    color: #ef0505;
}