/*======common css========*/
body {font-size: 14px;font-family: Arial, sans-serif;margin:0px;padding:0px; color: #333;}
p {font-family: Arial, Helvetica, sans-serif;font-size:14px;margin:0px;line-height:20px;}
h1, h2, h3, h4 {font-family: Arial, Helvetica, sans-serif;margin:0px;}
.clear{ font-size:0px; height:0px; line-height:0px; clear:both;}
a{ outline:0; border:0;}
a, a:active, a:focus {outline: none; text-decoration:none;}
:focus { border: none }
input::-moz-focus-inner { border: 0;}
ul{ list-style-type:none; padding: 0px; margin-bottom: 0px}
a, a:hover {text-decoration: none;-webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;transition-duration: 0.4s;outline:none;}
img {border:none; max-width: 100%;}
@media only screen and (max-device-width:480px) {
body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% }
}
@-webkit-keyframes fadeIn { from {
opacity:0
}
to { opacity: 1 }
}
@-moz-keyframes fadeIn { from {
opacity:0
}
to { opacity: 1 }
}
@keyframes fadeIn { from {
opacity:0
}
to { opacity: 1 }
}
/*==========================================================*/

.login_bg{height:100vh; width:100%; background: url(../images/background.jpg) no-repeat 0 0 #e67a22; background-size:cover}
.login_wraper { background-color: #FFF; max-width: 1120px; width: 100%; min-height: 608px; border-radius: 0px; margin: 7% auto 20px; -webkit-box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 20%); -moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 20%);top:0}
.login_wraper .row{margin:0;}
.login_lftcol {width: 50%;min-height: 608px;float: left;position:relative; display: block;background:url(../images/login_leftbg.jpg) no-repeat 0 0;background-size:cover;}
.login_rhtcol { width: 50%; float: left;position:relative; display: block;}
.formbox{ padding:20px 30px 30px 30px;}
.login_message{ color:#2f74a1; font:normal 14px/16px Arial, Helvetica, sans-serif; padding-top:14px;}
.error_message{ color:#ff0024; font:normal 12px/15px Arial, Helvetica, sans-serif; padding-top:10px;}
.form-group .login_label{ color:#4f76aa; font:normal 16px/18px Arial, Helvetica, sans-serif;}
.formbox .form-control{color:#000; height: calc(1.9em + .75rem + 2px);border: 1px solid #c7c7c7;border-radius: 0;}
.login_button{ display:inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; height:45px; width:150px; text-align:left; padding-left:20px; background:url(../images/login_button_arrow.png) no-repeat 85% 50% #e67a22; border:1px solid #e67a22; font-size:24px; line-height:30px; font-weight:normal; color:#FFF; text-shadow:none;}
.login_button:hover{ background-color:#d1630a; border-color:#d1630a; color:#FFF;}
.refresh_text{color:#e87c24; font:bold 13px/24px Arial, Helvetica, sans-serif;padding-top:16px}
.forgot_text a{display:inline-block;color:#ee7009; font:bold 16px/20px Arial, Helvetica, sans-serif;}
.forgot_text a:hover{text-decoration:underline}
.refresh_icon{padding-top:16px;padding-right:10px}
/*==========================================================*/
.intro_bg{ background:url(../images/background.jpg) no-repeat center top #e67a22; background-size: cover; width:100%; height:100%; min-height:100vh; position:relative; padding:0px 40px; }
.assess_container{position:relative; background-color:#FFF; max-width:1520px; width:100%; min-height:740px; margin:0 auto 20px; -webkit-box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.2);-moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2); box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);}
.assess_container .row{ margin:0px;}
.logo_panel{ height:100px; width:100%; max-width: 1520px; margin:0px auto; padding-top:24px}
.logo_panel a{ display:inline-block;}
.logout_panel{float:right}
.logout_panel ul li{float:right; padding:8px 20px;}
.logout_panel ul li{border-left:1px solid #f5b580; min-height:52px}
.logout_panel ul li:first-child{border-left:none;}
.logout_panel ul li:nth-child(2){padding-right:0px}
.logout_panel .profile{float:left;background:url(../images/profile_icon.png) no-repeat left 10px; font-size:14px; line-height:20px; color:#FFF; font-weight:bold; padding-left:34px; margin-bottom:0px}
.logout_panel .profile span{ display:block; color:#FFF; font:normal 12px/16px arial;}
.logout_panel .home{ display:inline-block;background:url(../images/home_icon.png) no-repeat left top; font-size:12px; line-height:20px; color:#FFF; padding-left:35px; margin-top:8px; text-transform:uppercase} 
.logout_panel .home:hover{color:#ffe7a5}
.logout_panel .dashboard{ display:inline-block;background:url(../images/dashboard_icon.png) no-repeat left top; font-size:12px; line-height:20px; color:#FFF; padding-left:35px; margin-top:8px; text-transform:uppercase} 
.logout_panel .dashboard:hover{color:#ffe7a5}
.logout_panel .logout{ display:inline-block;background:url(../images/logout_icon.png) no-repeat left top; font-size:12px; line-height:20px; color:#FFF; padding-left:30px; margin-top:8px; text-transform:uppercase} 
.logout_panel .logout:hover{color:#ffe7a5}
.logo_panel img.logo-sm{display:none}

.assess_leftimg{ position:relative;width:50%;float:left; display:block; min-height:730px; background:url(../images/intro_leftimg.jpg) no-repeat left top; background-size: cover; border-top-left-radius:6px;border-bottom-left-radius:6px;}
.assess_righttext{position:relative;width:50%;float:left; display:block; min-height:730px; padding:40px}
.intro_text{font-size:16px; color:#6d6d6d; line-height:22px; margin-bottom:30px; height:480px}
.assess_headtext{font:normal 36px/40px arial; color:#e87c24; margin-bottom:30px}
.assess_headtext span{ display:block;font:normal 22px/26px arial; color:#4a4a4a;}

.exam_boxpanel{padding-top:20px}
.exam_boxpanel ul{ margin:0; padding:0;}
.exam_boxpanel ul{opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease;}
.exam_boxpanel ul.slick-initialized { visibility: visible; opacity: 1 }
.exam_boxpanel ul li{ position:relative; padding:0; margin:0px 5px;}

.exam_boxpanel ul li .exam_panel{width:100%; display:block; float:left; background-color:#466fa6; padding:20px 20px 30px; border-radius:4px; min-height:440px;  text-align:center;}
.exam_boxpanel ul li h2{color:#FFF; font:bold 32px/38px Arial; position:relative; margin-bottom:40px; height:130px;}
.exam_boxpanel ul li h2::after{content:" "; display:block; position:absolute; top:145px; left:50%; margin-left:-18px; width:36px; height:3px; background-color:#a3b7d3;}
.exam_boxpanel ul li span{ display:block;color:#b7d6ff; font:bold 18px/20px Arial; padding:4px 0px 10px;}
.exam_boxpanel ul li .status{ text-align:center; display:inline-block; margin-top:20px; margin-bottom:20px}
.btn_brown{ display:block; height:48px; width:180px; position:relative; border-radius:40px; padding:0px; text-align:center; color:#FFF; font-size:20px; line-height:47px; background-color:#1d3855; margin:0 auto; margin-top:25px}
.btn_brown:hover{background-color:#2c527a; color:#FFF}
.btn_completed{ display:block; height:48px; width:180px; position:relative; border-radius:40px; padding:0px; text-align:center; color:#FFF; font-size:20px; line-height:47px; background-color:#5a7fb0; margin:0 auto; margin-top:25px}
.btn_completed:hover{color:#FFF}
.btn_blue{ display:inline-block; height:48px; width:165px; position:relative; border-radius:40px; padding:0px; text-align:center; color:#FFF; font-size:20px; line-height:47px; background-color:#498ef6; border: 1px solid transparent; margin-top:25px}
.btn_blue:hover{background-color:#466fa6; color:#FFF}
.intro_text ul{ padding-left:25px}
.intro_text ul li{margin-bottom:10px; line-height:22px}
.intro_text ul li::before {
  content: "\2022";
  color: #e87c24; font-size:22px;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em; position:relative; top:2px
}
.intro_text ul li a{color: #e87c24;}
.intro_text ul li a:hover{text-decoration:underline}
.assessment_leftimg{ position:relative;width:40%;float:left; display:block; min-height:740px; background:url(../images/assessment_leftimg.jpg) no-repeat left top; background-size: cover;}

.dashB_leftimg{ position:relative;width:40%;float:left; display:block; min-height:740px; background:url(../images/dash_leftimg.jpg) no-repeat left top; background-size: cover;}
.dashB_righttext{position:relative;width:60%;float:left; display:block; min-height:740px; padding:35px 30px}
.dash_text{font-size:16px; color:#6d6d6d; line-height:22px; margin-bottom:30px;}
.exam_boxpanel .slick-next{right: 2px;top: -24px;}
.exam_boxpanel .slick-prev{right: 37px;top: -24px; left: auto;}
.exam_boxpanel .slick-prev, .exam_boxpanel .slick-next{border-radius:50%; width:30px; height:30px; text-align:center;background:#e87c24}
.exam_boxpanel .slick-prev:before, .slick-next:before {
    font-family: 'FontAwesome' !important;
	font-style: normal;font-weight: normal;
	text-decoration: inherit;
    font-size: 25px !important;
    line-height: 30px; text-align:center;
    opacity: 1 !important;
    color: #FFF !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.exam_boxpanel .slick-prev:before{content:"\f104"}
.exam_boxpanel .slick-next:before{content:"\f105"}
.exam_boxpanel ul.slick-dots{opacity:1; visibility:visible}
.exam_boxpanel .slick-dots li button {
	background:#c6c6c6; color:#c6c6c6; width:35px; height:4px; padding:0
}
.exam_boxpanel .slick-dots li button:before{content:" "; width:35px; height:4px; padding:0}
.exam_boxpanel .slick-dots li{width:35px; height:4px}
.slick-dots li.slick-active button{
    background:#ff7b10; color:#ff7b10;
}
.exam_boxpanel .slick-prev.slick-disabled:before, .exam_boxpanel .slick-next.slick-disabled:before {
    opacity: 1;
}
.exam_boxpanel .slick-prev:hover, .exam_boxpanel .slick-prev:focus, .exam_boxpanel .slick-next:hover, .exam_boxpanel .slick-next:focus {
    color: transparent;
    outline: none;
    background: #c6c6c6;
}
.copyright_panel{ width:100%; height:60px; position:relative;  max-width: 1520px; margin: 0px auto;}
.copyright_panel p{color:#FFF; font-size:14px; padding-top:0px}
.copyright_panel p a{color:#FFF;}
.copyright_panel p a:hover{color:#FFF;font-style:italic}

.next_button{ display:inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width:130px; text-align:left; padding:6px 20px; background:url(../images/login_button_arrow.png) no-repeat 85% 50% #e67a22; border:1px solid #e67a22; font-size:24px; line-height:30px; font-weight:normal; color:#FFF; text-shadow:none;}
.next_button:hover{ background-color:#d1630a; border-color:#d1630a; color:#FFF;}

.intro_leftimg{ position:relative;width:40%;float:left; display:block; min-height:740px; background:url(../images/intro_leftimg.jpg) no-repeat left top; background-size: cover;}

.upload_leftimg{ position:relative;width:40%;float:left; display:block; min-height:740px; background:url(../images/upload_leftimg.jpg) no-repeat left top; background-size: cover;}

/*==================Dashboard==================*/
.dashboard_leftimg{ position:relative;width:40%;float:left; display:block; min-height:740px; background:url(../images/dashboard_leftimg.jpg) no-repeat left top; background-size: cover;}
.dashboard_thumbview ul{display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px;}
.dashboard_thumbview ul li{float:left; position:relative; width:25%; padding:0px 8px; margin-bottom:16px; list-style-type:none !important}
.dashboard_thumbview ul li section{height:100%; display:block;border:1px solid #e87c24; background-color:#FFF; padding:10px 10px 15px;}
.dashboard_thumbview ul li section .icon_panel{height:92px; position:relative; text-align:center; display: flex; justify-content: center; align-items: center}
.dashboard_thumbview ul li section .content_box{ text-align:center;}
.dashboard_thumbview ul li section h4{font:bold 14px/18px Arial, sans-serif; color:#454545; height: 42px; overflow:hidden}
.dashboard_thumbview ul li section p{font:normal 14px/18px Arial, sans-serif; color:#777}
.dashboard_thumbview ul li.active section{background-color:#e87c24}
.dashboard_thumbview ul li.active section h4, .dashboard_thumbview ul li.active section p{color:#FFF}
.dashboard_thumbview .enter_button{ display:inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width:86px; text-align:left; padding:4px 10px; background:url(../images/enter_button_arrow.png) no-repeat 85% 50% #FFF; border:1px solid #e87c24; font-size:14px; line-height:18px; font-weight:bold; color:#e87c24; text-shadow:none; margin-top:10px}
.dashboard_thumbview .enter_button:hover{ background-color:#eaeaea; border-color:#ccc; color:#454545;}
.dashboard_thumbview ul li.active section .icon_panel::after{content:''; position:absolute; width:84px; height:84px; display:block; border-radius:50%; background-color:#ed9650; top:3px; left:50%; margin-left:-42px}
.dashboard_thumbview ul li.active section .icon_panel img{ position:relative;z-index:2}
.dashboard_thumbview ul li.inactive section{background-color:#f0f0f0; border-color:#b2b2b2; cursor:not-allowed}
.dashboard_thumbview ul li.inactive section h4, .dashboard_thumbview ul li.inactive section p{color:#888888}

.view_wrapper{margin-top:-16px; margin-bottom:16px;}
.view_wrapper .view_change{float:right}
.view_wrapper .view_change li{float:left; list-style-type:none !important;}
.view_change li a{border:1px solid #777; display:block; width:30px; height:25px; margin-right:2px}
.view_change li a.thumb_view::before{content:"\f00a"; font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit; background-color:#FFF;color: #777; font-size: 18px; line-height:20px; display:block; text-align:center; padding-top:3px}
.view_change li a.list_view::before{content:"\f00b"; font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit; background-color:#FFF;color: #777; font-size: 18px; line-height:20px; display:block; text-align:center; padding-top:3px}
.view_change li.active a.thumb_view::before{background-color:#777;color: #FFF;}
.view_change li.active a.list_view::before{ background-color:#777;color: #FFF;}

.dashboard_listview ul{display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px;}
.dashboard_listview ul li{float:left; position:relative; width:50%; padding:0px 8px; margin-bottom:16px}
.dashboard_listview ul li section{height:100%; display:block;border:1px solid #e87c24; background-color:#FFF;}
.dashboard_listview ul li section .icon_panel{height:98px; width:98px; position:relative; float:left; border-right:1px solid #e87c24; text-align:center; display: flex; justify-content: center; align-items: center}
.dashboard_listview ul li section .content_box{ float:left; width:calc(100% - 98px); text-align:left; padding-left:16px; padding-top:4%; height:98px;position:relative; display: table; vertical-align:middle;overflow:hidden}
.dashboard_listview ul li section h4{display:block; width:100%;font:bold 14px/18px Arial, sans-serif; color:#454545; padding-right: 30%; height: 40px; overflow:hidden}
.dashboard_listview ul li section p{display:block; width:100%;font:normal 14px/18px Arial, sans-serif; color:#777}
.dashboard_listview ul li.active section{background-color:#e87c24; border-right:1px solid #FFF;}
.dashboard_listview ul li.active section h4, .dashboard_listview ul li.active section p{color:#FFF}
.dashboard_listview .enter_button{ display:inline-block; position:absolute; right:10px; top:20%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width:86px; text-align:left; padding:4px 10px; background:url(../images/enter_button_arrow.png) no-repeat 85% 50% #FFF; border:1px solid #e87c24; font-size:14px; line-height:18px; font-weight:bold; color:#e87c24; text-shadow:none; margin-top:10px}
.dashboard_listview .enter_button:hover{ background-color:#eaeaea; border-color:#ccc; color:#454545;}
.dashboard_listview ul li.active section .icon_panel{border-right:1px solid #FFF;}
/*.dashboard_listview ul li.active section .icon_panel::after{content:''; position:absolute; width:84px; height:84px; display:block; border-radius:50%; background-color:#ed9650; top:3px; left:50%; margin-left:-42px}*/
.dashboard_listview ul li.active section .icon_panel img{ position:relative;z-index:2}
.dashboard_listview ul li.inactive section{background-color:#f0f0f0; border-color:#b2b2b2; cursor:not-allowed}
.dashboard_listview ul li.inactive section .icon_panel{border-right:1px solid #b2b2b2;}
.dashboard_listview ul li.inactive section h4, .dashboard_listview ul li.inactive section p{color:#888888}

/*==================Documents==================*/
.documents_leftimg{ position:relative;width:40%;float:left; display:block; min-height:740px; background:url(../images/documents_leftimg.jpg) no-repeat left top; background-size: cover;}
.chapter_panel{background-color:rgba(255, 255, 255, 0.9); width:225px; height:100%; position:absolute; left:0; top:0;overflow:hidden}
.chapter_links{height:515px; overflow-y:auto}
.chapter_links li a{display:block; padding:10px 20px;font:normal 14px/16px Arial, sans-serif; color:#454545; border-bottom:1px solid #e87c24;}
.chapter_links li a:hover{background-color:#e87c24; color:#FFF}
.chapter_links li.active a{background-color:#e87c24; color:#FFF}
.chapter_head{font:normal 26px/28px Arial, sans-serif; color:#466fa6; margin-bottom:30px}


.document_slider > ul{opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease;}
.document_slider > ul.slick-initialized { visibility: visible; opacity: 1 }
.document_slider .slick-next{right: 2px;top: 10px;}
.document_slider .slick-prev{right: 37px;top: 10px; left: auto;}
.document_slider .slick-prev, .document_slider .slick-next{border-radius:50%; width:30px; height:30px; text-align:center;background:#e87c24; z-index:6}
.document_slider .slick-prev:before, .slick-next:before {
    font-family: 'FontAwesome' !important;
	font-style: normal;font-weight: normal;
	text-decoration: inherit;
    font-size: 25px !important;
    line-height: 30px; text-align:center;
    opacity: 1 !important;
    color: #FFF !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.document_slider .slick-prev:before{content:"\f104"}
.document_slider .slick-next:before{content:"\f105"}
.document_slider .slick-prev.slick-disabled:before, .document_slider .slick-next.slick-disabled:before { opacity: 1;}
.document_slider .slick-prev:hover, .document_slider .slick-prev:focus, .document_slider .slick-next:hover, .document_slider .slick-next:focus {color: transparent; outline: none; background: #c6c6c6;}

/*==================Question answer===================*/
.orrange_panel{background-color:#6290c7; height:80px; padding:0px 50px; box-shadow:inset 1px 4px 9px -4px #d5e8ff;}
.orrange_panel ul li{ float:left; display:inline-block; width:50%; padding-top:15px}
.orrange_panel ul li:last-child p{text-align:right}
.orrange_panel p{font-size:14px; color:#FFF; line-height:18px; margin-bottom:0px; padding-top:10px} 
.orrange_panel p span{ display:inline-block; font-size:30px; color:#FFF; line-height:30px; padding-left:5px}
.orrange_panel p b{font-weight: normal; display: inline-block;position: relative; top:-5px}
.orrange_panel p b.time_remain{display:inline-block;background:url(../images/timesm_icon.png) no-repeat left top; padding-left:38px; height:28px; line-height:28px }
.orrange_panel p b.progres{display:inline-block;background:url(../images/progress_icon.png) no-repeat left top; padding-left:38px; height:28px; line-height:28px }
.orrange_panel p span a{color:#fec027}
.orrange_panel h2{font-size:36px; padding-top: 5px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; max-width: 460px; color:#FFF; display:block; text-align:center; font-weight:normal}
.note_panel{ width:100%; background-color:#d5e8ff; padding:10px 50px; font-size:16px; color:#4b4b4b}
.note_panel p{ background:url(../images/noteimg.png) no-repeat left top; padding-left:40px; height:auto; line-height:27px;font-size:16px; color:#4b4b4b; margin-bottom:0px}
.question_panel{position:relative; float:left; width:50%; min-height: 730px; padding:30px 30px 30px 50px;}
fieldset.question_box{display:block; min-height:100%; border:1px solid #ccc; padding:15px 20px; border-radius:8px;}
fieldset.question_box legend{width:auto; padding:0 10px; color:#6290c7; font-size:24px;}
fieldset.question_box p{font-size:18px; line-height:22px; color:#333; margin-bottom:10px; margin-left:10px; height:auto}

.answer_panel{position:relative; float:left; width:50%; padding:30px 50px 30px 30px;}
.answer_panel fieldset.question_box legend{color:#d57e01}

.container_radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 16px;
  color:#333; line-height:22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.container_radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border:2px solid #5b7fab;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container_radio:hover input ~ .checkmark {
  background-color: #ddd;
}

/* When the radio button is checked, add a blue background */
.container_radio input:checked ~ .checkmark {
  background-color: #FFF;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.container_radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container_radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container_radio .checkmark:after {
  top: 4px;
  left: 4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #5b7fab;
}

.answer_box{ border:1px solid #ccc; border-radius:4px; padding:10px 15px; margin-bottom:15px; box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2)}

/* The container */
.container_check {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  font-size: 16px;
  color:#333; line-height:22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container_check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.container_check .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border:1px solid #5b7fab;
}

/* On mouse-over, add a grey background color */
.container_check:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container_check input:checked ~ .checkmark {
  background-color: #5b7fab;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container_check .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container_check input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container_check .checkmark:after {
  left: 8px;
  top: 3px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*=============================================*/

.login_errormsg{ display:block; border: 1px solid transparent; text-align:center; font-size: 14px; border-radius: .25rem;color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;position: absolute;top: 32px;width: 90%; padding: 0.55rem .75rem;}
.login_errormsg p{margin-bottom:0px}

.error_message{ display:block; border: 1px solid transparent; text-align:center; font-size: 14px; border-radius: .25rem;color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;position: absolute;top: 0px;width: 90%; padding: 0.55rem .75rem;}
.error_message p{margin-bottom:0px}

.error_message{ display:block; border: 1px solid transparent; text-align:center; font-size: 14px; border-radius: .25rem;color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;position: absolute;top: 0px;width: 90%; padding: 0.55rem .75rem;}
.error_message p{margin-bottom:0px}

.success_message{ display:block; border: 1px solid transparent; text-align:center; font-size: 14px; border-radius: .25rem;color: #155724; background-color: #d4edda; border-color: #c3e6cb;position: absolute;top: 0px;width: 90%; padding: 0.55rem .75rem;}
.success_message p{margin-bottom:0px}
.img_block{ margin-bottom:10px; padding:10px; position:relative; overflow:hidden}

.message_wrapper{ height:45px; margin-top:-20px}
.message_wrapper .alert {
    position: relative;
    padding: .45rem .75rem;
    margin: -.7rem .75rem .8rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 14px;
}
.alert {
    position: relative;
    padding: .45rem .75rem;
	margin-bottom: .7rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 14px;
}
.dashB_righttext ul > li {
	list-style-type:disc;
}
.dashB_righttext ul{
	padding-left:20px;
}

/*======media css========*/
@media (max-width:1366px) {
.login_wraper { min-height: 550px; margin-top: 3%;margin-bottom: 20px;top: 0;}
.login_lftcol{min-height: 550px;}
.assess_container, .assess_leftimg, .assess_righttext, .dashB_leftimg, .dashB_righttext, .question_panel, .assessment_leftimg, .intro_leftimg, .dashboard_leftimg, .documents_leftimg{ min-height:540px}
	.assess_righttext{padding: 30px;}
	.intro_text{ height:320px}
	.logo_panel {height: 88px; width: 100%;padding-top: 16px;}
	.exam_boxpanel ul li .exam_panel{ min-height:auto;height:305px;}
	.assess_headtext {font: normal 28px/34px Arial;}
	.assess_headtext span{ font:normal 18px/22px Arial;}
	.dash_text{font-size:14px; line-height:20px}
	.btn_completed{ display:block; height:36px; width:140px; line-height:35px; font-size:16px; margin-top:15px}
	.btn_brown{ display:block; height:36px; width:140px; line-height:35px; font-size:16px; margin-top:15px}
	.exam_boxpanel ul li h2{font-size:20px; line-height:26px; height:90px;}
	.exam_boxpanel ul li h2::after{top:105px}
	.exam_boxpanel ul li .status{ margin-top:0px; margin-bottom:0px}
	.exam_boxpanel ul li .status img{ width:45px}
	.copyright_panel{ width:100%; height:60px;}
	.dashboard_thumbview ul li section{padding:10px}
	.dashboard_thumbview ul li section h4{line-height:16px}
	.form_wrapper fieldset{padding: 25px 20px;}
	.exam_boxpanel ul li h2{font-size:20px; line-height:26px; height:90px;}
	.exam_boxpanel ul li h2::after{top:105px}
	.exam_boxpanel ul li .status{ margin-top:0px; margin-bottom:0px}
	.exam_boxpanel ul li .status img{ width:45px}
	fieldset.question_box p{font-size:16px; line-height:20px; }
	fieldset.question_box .scroll_ver{height: 415px;}
	.orrange_panel h2 {font-size: 28px; line-height: 28px; margin-bottom:5px}
	.orrange_panel{height:60px;}
	.orrange_panel ul li{padding-top:5px}
	.dashboard_listview ul li section .icon_panel {height: 86px;}
	.dashboard_listview ul li section .content_box{padding-top: 5%; height: 86px;}
}
@media (max-width: 1280px){
.dashboard_listview .enter_button{position:relative; top:auto; right:auto;}
.dashboard_listview ul li section .content_box{padding-top:16px}
.dashboard_thumbview ul li{width:33.33%}
.orrange_panel{padding: 0px 20px;}
.note_panel{padding: 6px 20px;}
.note_panel p{min-height: 27px;line-height: 20px;font-size: 14px;}
.question_panel{padding: 30px 20px 20px 20px;}
.answer_panel{padding: 30px 20px 20px 20px;}
.orrange_panel h2{font-size: 24px;}
.orrange_panel p span{font-size: 26px;}
}
@media (max-width: 1180px){
.login_wraper {width: auto; margin-left: 10px; margin-right: 10px;}
.refresh_text{font-size:10px; padding-top:12px}
.refresh_icon{padding-top:12px;padding-right:8px}
.logout_panel ul li{padding:8px 8px 0px;}
.logo_panel a img{width:420px}
.logout_panel .profile p{font-size: 12px;}
.logout_panel .home{text-transform: none;}
.logout_panel .dashboard{text-transform: none;}
.logout_panel .logout{text-transform: none;}
}
@media (max-width:990px) {
.assessment_leftimg{display:none}
.dashB_righttext {width: 100%; max-width:100%;float: none;}
.assess_container .row{display:block}
.logout_panel .home span{display:none}
.logout_panel .dashboard span{display:none}
.logout_panel .logout span{display:none}
.logout_panel .home {height: 28px; padding-left: 30px; background-position:center top;}
.logout_panel .dashboard {height: 28px; padding-left: 30px; background-position:center top;}
.logout_panel .logout {height: 28px; padding-left: 30px; background-position:center top;}
.logout_panel ul li { border-left: none; min-height: auto;}
.intro_leftimg{display:none}
.dashboard_leftimg{display:none}
.documents_leftimg{display:none}
}
@media (max-width:900px) {
.formbox{ padding:20px 20px 30px 20px;}
.forgot_text a{font-size:14px}
.captcha li:first-child img{width:200px}
.refresh_text{font-size:9px;}
}
@media (max-width:820px) {
.logout_panel{float: none;}
.logo_panel{height:122px}
.logout_panel ul li.profile{float:left}
.logout_panel ul li{float:right}
}
@media (max-width: 767px){
.intro_bg{padding: 0px 20px;}
.dashB_righttext{padding:20px}
.dashboard_listview ul li{width:100%; float:none}
.view_wrapper{margin-top:0px}
	.orrange_panel h2 { font-size: 20px; line-height:26px}
	.orrange_panel p span {font-size: 22px;}
	fieldset.question_box legend{font-size:20px}
	fieldset.question_box{padding: 15px 12px;}
	.answer_panel {padding: 30px 10px 20px 10px;}
	.question_panel {padding: 30px 10px 20px 10px;}
}
@media (max-width: 690px){
.login_lftcol{display:none}
.login_rhtcol {float: none;width: 100%;max-width: 100%;}
}
@media (max-width: 580px){
.dashboard_thumbview ul li{width:50%}
.question_panel{float:none; width:100%; min-height:auto}
	.answer_panel{float:none; width:100%; padding-top:10px}
	fieldset.question_box .scroll_ver{height:300px}
}
@media (max-width: 480px){
.refresh_text{display:none}
.copyright_panel p{font-size:12px}
.logout_panel ul li {padding: 3px 5px;}
.logo_panel {height: 112px;}
.orrange_panel ul li{float:none; width:100%; padding-top:0px; text-align:center}
.orrange_panel ul li:last-child p {text-align: center; padding-bottom:8px}
.orrange_panel{height:auto;}
}
@media (max-width: 360px){
	.captcha li:first-child img{width:200px}
	.login_panel li{float:none !important; display:block}
	.login_button{width:100%; display:block}
	.forgot_text a{display:block; text-align:center}
	.dashboard_thumbview ul li{width:100%; float:none}
}