html {
    width:100%;
    height: 100%;
}

body {
    width:100%;
}

html, body {
    margin: 0px;
    padding: 0px;
}
body{ margin:0px; padding:0px; overflow:hidden;
    font-family: Roboto,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333; min-height:100%;}
.test{ 
	 width:100%;
     height: 100%;
     margin: auto;
	 color: #212529;
     font-size: 16px;}
.test_body{
    max-width: 100%;	
    height: 100%;
	overflow: hidden;
	}
.test_header{
    text-align: center;
    background: #039ae1;
    color: #fff;
    padding: 20px 0px 10px 0px;
    width: 100%;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;}
 .test_header1{
    text-align: center;
    width: 100%;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;}
.test_header_left{
      width: 60%;
	  padding-left:10px;
    float: left;}
.test_header_right{
     width: 40%;
     padding-right: 10px;
     float: left;}
.time_left{ float:left; width:100%;}
.time_right{ float:left; width:100%; text-align:left;}
.time_right_blank{ float:left; width:30%;}
.time_hrs,.time_min,.time_sec{
    width: 15%;
    float: left;
    /*border: 1px solid #ddd;
    font-size: 16px;
    padding: 2px;*/}
.time_shaprater{
    width: 10%;
    float: left;}
.single_question{ display:none;}
.question_box{width: 60%; float:left;padding: 0px 10px;
    margin: 10px 1px;    height: 460px;display: inline-table;overflow: auto;}
.question{min-height: 50px;max-height: 330px;overflow: auto;
    padding: 2px 10px; font-size:20px; padding:5px;
/*    border: 1px solid #ddd;*/
}
.question p{margin: 2px 0px;}
.question_topic,.answer_head{
    text-align: center;
    background: #1DBFFF;
    color: #fff;
    padding: 5px 0px;
    border-radius: 10px;
    margin-bottom: 10px;}
.options{    padding: 10px 0px;
    cursor: pointer;
    border: 1px solid #efefef;
    margin: 10px 0px;border-radius: 5px;}
.options:hover{background: #F1F9F1; border: 1px solid #efefef;}
.sections{ clear: both;
    display: inline-block;
    margin: 0px;
    width: 100%;
    border-bottom: 1px solid #ddd;}
.sections .sections_left{
	float: left; 
	width: 65%; 
	padding-left: 20px;
	padding: 5px 10px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.09);
	}
.sections .sections_right{
	float: right; 
	width: 35%;
	padding-left: 20px;
	padding: 5px 10px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.09);
	}
.user_detail{ text-align:left; padding: 5px 20px;}
.user_img{float: left;  margin-top:-3px;}
.user_img img{width: 35px;height: 35px;border-radius: 100px;}
.user_name{
	padding: 2px;
    color: #0086C5;
    font-size: 14px;
    text-transform: capitalize;}
.sections ul{display: inline-block;margin: 0px;padding: 0px;}
.sections li.single_section{
    list-style: none;
    float: left;
    cursor: pointer;
    padding: 5px 20px;
    border: 1px solid #ddd;
    margin: 5 15px 5px 0px;
    border-radius: 30px;
    text-transform: capitalize;}
.single_section_active{background: #0086C5; color: #fff;}
.reviews_box{padding: 30px 0px 10px 0px;}
.paination_buttons{
    /*position: absolute;*/
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 20px 10px;
   /* border: 1px solid #ddd;
    box-shadow: 5px 5px 7px 10px rgba(0, 0, 0, 0.09);
	background:#fff;*/}
.button_left_par{ float:left; width:60%; text-align:center;}
.button_right_par{ float:right; width:40%; text-align:center;
    margin-top: -5px;}
.button_right_par .button{border-radius: 100px;}
.button.submit{ background:#EC3A56; width: 50%;}
.button.submit:hover{ background:#FE7E17;}
.button{
    cursor: pointer;
    border: none;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #333;
    padding: 5px 8px;
    line-height: 25px;
    min-width: 100px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: inline;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
	background: #1DBFFF;}
.button:hover{background:#0086c5;}
.button:focus{outline:none;}
.button_left_par button{ width:20%; margin-right:3%;}
.answer_sheet{text-align:center;box-shadow:-5px 0px 16px 0px rgba(0, 0, 0, 0.09);padding: 10px;
    margin: 0px 10px;}
.answer_sheet ul{
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    display: inline-block;
	margin: 0px;
    padding: 0px;
    max-width: 351px;
    font-size: 14px;}
.answer_sheet li{list-style:none; float:left;    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
     width: 35px; padding: 1px 5px;cursor: pointer;
    line-height: 20px; text-align:center;}
.answer_sheet li:hover{font-weight:600;}
.not_visited,.not_visited_key{ background:#fff;}
.only_visited,.only_visited_key{ background:yellow;}
.answered,.answered_key{ background:greenyellow;}
.mark_reviewed,.mark_reviewed_key{ background:red;}
.active_opt,.active_opt_key{ background:#0086C5;font-weight:600; color:#fff;}
.opt_key{
    height: 16px;
    width: 15px;
    border: 1px solid #ddd;
    float: left;}
.key_text{
	float: left;
    padding: 0px 10px;
    font-size: 14px;}
.opt_key_par{
    margin: 0px 5px;
    display: inline-block;}
.color_meaning{margin-top:1px;padding: 2px; text-align:left;}
.color_meaning_head{ margin-bottom:5px;text-decoration: underline;}
.answer_options{ max-height:400px; overflow:auto;margin: 2px 0px;text-align: left;min-height: 130px;}
.disabled,.disabled:hover,.disabled:focus{background: #ddd; font-weight:inherit; cursor:not-allowed; outline:none;}
.swal-text{ color:#212529!important;}
table{
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    width: 80%;
    margin: auto;
    text-align: center;}
table th{
    color: #fff;
    background: #1DBFFF;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;}
table td{
    padding: 5px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;}
table .end td{
     font-weight: 600;
    border-top: 1px solid #1DBFFF;
	color:#0086C5;}
.result_box{ padding-top:100px;}
.result .result_header_left{ width:100%;}
.result_notes{width: 80%;margin: auto;padding: 20px 0px;}
.result_notes .note{ font-weight:600; color:#FF0000;}
.instruction_box{
      padding: 20px;
    /* height: 430px;
    display: inline-block; 
    overflow: auto;*/
    width: 80%;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: auto;}



    .icon-box div {
    text-align: center;
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
}
#header , #footer{ background: #039AE1; }

body{ overflow:inherit;overflow-x: hidden;}
ul.testlist{width: 80%;margin: auto; padding: 0px;}
.testlist li{    
    background-image: linear-gradient(to bottom right, #1DBFFF, yellow); 
    list-style:none; 
    float:left;text-decoration:none; 
    font-weight:600;
    border-radius: 2px; 
    font-size:14px; 
    text-align: center;
    transition: all 0.5s ease; 
    border:1px solid #ddd;    
    overflow: hidden; 
    display: block; 
    padding:20px;    
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.09);    
    margin: 15px 15px;    
    width: 220px;}
.testlist li div{
      text-align:center;
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;}
.testlist li .testname{ text-transform:uppercase;font-size:16px;}
.testlist li a.button{    text-decoration: none;
    text-transform: uppercase;
    margin-top: 10px;
    display: inherit;}
.list_box{ padding-top:50px;}
.test_body{overflow: initial;}
.fa{
    padding:12px;
}
.options{
    padding-left:10px;
}

@media (max-width: 768px) {
    .sections .sections_left{
        width:100%;
    }
    .sections .sections_right{
        width:100%;
    }
}
.paination_buttons{
  margin-bottom:20px;
}
@media (max-width: 768px) {
    .btn, .btn-group {
        width:100%;
    }
    .paination_buttons{
        margin-bottom:80px;
    }
}
    table th {
    color: #fff;
    background: #1DBFFF;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

th, td {
    text-align: left;
  border:1px solid gray;
  padding:5px;
}

#showgraph{
  width:50%
}
#shownote{
  width:50%
}
.icon-box div {
    text-align: center;
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
}
#header , #footer{ background: #039AE1; }
.testlogoitem{text-align: left;
    padding-left: 30px;}
.testtitle{font-size: 24px;text-decoration: underline; }
.logoimg{max-width: 200px!important;}
.contentbox{ min-height: 382px;}
@media (min-width: 1300px) {.contentbox{ min-height: 600px;}}
@media (max-width: 768px) {
    .btn, .btn-group {
        width:99%;
    margin:5px 20px 5px 5px;
    }
  #showgraph{
    width:100%;
    background:#aaefaa;   
    border:2px solid lightgray;
    padding:10px;
  }
  #shownote{
    width:100%;
    background:#efefef;
    border:2px solid lightgray;
    padding:10px;
  }
  .testlogoitem{text-align: center;
    padding-left: 0px;}
.testtitle{color: #039AE1; background: #fff;}
.time_left{color: #039AE1; background: #fff;border-bottom: 1px solid #039AE1;}
.test_header{ padding: inherit;}
.testlogoitem{padding: 20px 0px; }
.testlogoitem.withcapture{padding: 20px 20px;text-align: left;}
.contentbox{ min-height: auto;}
}
.btn {
    border-radius: 10px;
}