/* Header Begin */
#header{background-color: #336799;color: #fff;border-bottom:4px solid #adadad;}
#header > ul{height: 100px!important;list-style-type: none;margin: 0;padding: 0;overflow: hidden;}
#header > ul > li{float:left;}
#header > ul > .li-logo{padding-top: 6px!important;padding-bottom: 6px!important;}
#header > ul > .li-logo > .logo{height: 75px!important;margin-left: 30px;}
#header > ul > .li-user{background-color: #333;color:#fff;float:right;}
#header > ul > .li-user > .user{height:100px;width: auto;min-width:250px;padding: 20px 15px 20px 25px;}
#header > ul > .li-user > .user > .col4{width: 60px;float:left;}
#header > ul > .li-user > .user > .col4 > .avatar{width: 60px;height: auto;}
#header > ul > .li-user > .user > .col8{width: calc(100% - 60px);float:left;font-size: 14px;padding-left:15px;font-weight: normal;line-height: 1.4;}
#header > ul > .li-user > .user > .col8 > a{line-height: 1.4;font-size: 1.0em;padding: 0!important;text-decoration: none!important;display: block;color: #336799}
#header > ul > .li-logo > #logo {margin-left:30px;font-family:"Segoe UI",Arial,sans-serif}
#header > ul > .li-logo > #logo > #logo-container > img{height: 75px!important}
#header > ul > .li-logo > #logo > #text-container > .judul{font-size: 36px!important;}
#header > ul > .li-logo > #logo > #text-container > .sub-judul{font-size: 18px!important;letter-spacing:2px}
#header > ul > .li-logo > #logo > #text-container{line-height: 1.1;margin: 8px 0}
body,html{-webkit-touch-callout:none;user-select:none;user-drag:none;-webkit-user-drag:none;}
/* Header End */

/* body login Begin */
#body > #myerror{background-color: #F4E0DE;border-color: #ebccd1;color: #FF6050;font-size: 14px;text-align: center;padding: 7px 0px 10px 0px;margin-top: 30px!important;margin-bottom: 30px!important;}
#body > .login-content{padding:42px 0 140px 0;}
#body > .login-content > .login-box{width: 421px!important;border: 1px solid #c9c9c9;margin: auto}
#body > .login-content > .login-box > .login-card{color: #000!important;background-color: #fff!important;border-radius: 4px!important;border: 1px solid #c9c9c9;}
#body > .login-content > .login-box > .login-card > .login-header {padding: 8px 16px!important;border-bottom: 1px solid #DCDCDC;background-color: #f5f5f5;color:#333;}
#body > .login-content > .login-box > .login-card > .login-body {padding: 39px 8px 16px 8px!important;border-bottom: 1px solid #DCDCDC;}
#body > .login-content > .login-box > .login-card > .login-body > table{border-collapse: collapse;width: 100%;display: table;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td {padding: 5px 8px;display: table-cell;text-align: left;vertical-align: top;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td:first-child{padding-left: 16px;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td.login-text{line-height: normal;color: #333!important;padding-top: 16px!important;width:28%;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .login-input{width: 100%;height: 40px;color: #333;font-size: 1.0em;outline: none;border: 1px solid #333;padding: 9px 9px 9px 46px;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .login-input.username{border-color:#e66c69; }
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .login-input.password{border-color:#9e9e9e; }
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .login-input.mapel{border-color:#336799; }
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > select.login-input.mapel > option{-webkit-appearance:none;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > i.glyphicon{background-color: #333;color: #fff;font-size: 18.5px!important; padding: 9px; position: absolute;top: 1;line-height: 1.1899em;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > i.glyphicon-user{background-color: #e66c69;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > i.glyphicon-lock{background-color: #9e9e9e;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > i.glyphicon-th-list{background-color: #336799;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .login-button{width:100%;margin:8px 0 0 0;font-size: 14px;font-weight: 400;border: none;display: inline-block;outline: 0;padding: 12px 16px;vertical-align: middle;overflow: hidden;text-decoration: none!important; background-color: #5cb85c;color: #fff;text-align: center;cursor: pointer;white-space: nowrap;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .login-button:hover{background-color: #449d44;transition: 0.3s;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .daftar-button{width:100%;margin:4px 0 0 0;font-size: 14px;font-weight: 400;border: none;display: inline-block;outline: 0;padding: 12px 16px;vertical-align: middle;overflow: hidden;text-decoration: none!important; background-color: #e66c69;color: #fff;text-align: center;cursor: pointer;white-space: nowrap;}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td > .daftar-button:hover{background-color: #df413d;transition: 0.3s;}
#body > .login-content > .login-box > .login-card > .login-footer{padding: 16px 0;}

.modal#daftar-modal > .modal-content > .modal-body > .daftar-body {padding: 16px 0!important;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table{border-collapse: collapse;width: 100%;display: table;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td {padding: 5px 8px;display: table-cell;text-align: left;vertical-align: top;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td:first-child{padding-left: 16px;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td.login-text{line-height: normal;color: #333!important;padding-top: 16px!important;width:35%;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > .login-input{width: 100%;height: 40px;color: #333;font-size: 1.0em;outline: none;border: 1px solid #333;padding: 9px 9px 9px 46px;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > .login-input.name{border-color:#336799; }
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > .login-input.username{border-color:#e66c69; }
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > .login-input.password{border-color:#9e9e9e; }
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > select.login-input.mapel > option{-webkit-appearance:none;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > i.glyphicon{background-color: #333;color: #fff;font-size: 18.5px!important; padding: 9px; position: absolute;top: 1;line-height: 1.1899em;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > i.glyphicon-education{background-color: #336799;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > i.glyphicon-user{background-color: #e66c69;}
.modal#daftar-modal > .modal-content > .modal-body > .daftar-body > table > tbody > tr > td > i.glyphicon-lock{background-color: #9e9e9e;}
/* body login End */

/* body konfirm Begin */
#body > .konfirm-content{max-width: 1172px;width: 100%;margin: auto;content: "";display: table;clear: both;padding-bottom:100px;}
#body > .konfirm-content > .konfirm-col8 {width: 66.66666%;padding: 0.01em 16px;float:left;}
#body > .konfirm-content > .konfirm-col8 > .konfirm-card {color: #000!important;background-color: #fff!important;border: 1px solid #ccc;}
#body > .konfirm-content > .konfirm-col8 > .konfirm-card > .konfirm-header{background-color: #f5f5f5;color: #333;padding: 8px 16px!important;border-bottom: 1px solid #DCDCDC;}
#body > .konfirm-content > .konfirm-col8 > .konfirm-card > .konfirm-body > .konfirm-list{padding: 9px 30px!important;color: #222;line-height: 1.42857;border-bottom: 1px solid #ECECEC;}
#body > .konfirm-content > .konfirm-col8 > .konfirm-card > .konfirm-body > .konfirm-list > .konfirm-primary{color: #d43f3a;}
#body > .konfirm-content > .konfirm-col8 > .konfirm-card > .konfirm-footer{padding:16px 0px;}
#body > .konfirm-content > .konfirm-col4 {width: 33.33333%;padding: 0.01em 16px;float:left;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-card {color: #000!important;background-color: #fff!important;border: 1px solid #ccc;margin-bottom:16px;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-card > .konfirm-header{background-color: #f5f5f5;color: #333;padding: 8px 16px!important;border-bottom: 1px solid #DCDCDC;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-card > .konfirm-body > .konfirm-list{padding: 7px 30px!important;color: #222;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-card > .konfirm-body > .konfirm-list > .konfirm-input{width: 100%;height: 40px;color: #333;font-size: 1.0em;outline: none;border: 1px solid #aaa;padding: 9px;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-card > .konfirm-body > .konfirm-list > .konfirm-input.mapel{padding: 9px 9px 9px 46px;border: 1px solid #336799;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-card > .konfirm-body > .konfirm-list > i.glyphicon{background-color: #336799;color: #fff;font-size: 18.5px!important; padding: 9px; position: absolute;top: 1;line-height: 1.1899em;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-alert{background-color: #fcf8e3;color: #8a6d3b;padding: 16px 32px!important;border: 1px solid #ccc;border-radius: 4px!important;margin-bottom:16px;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-btn > .konfirm-button{padding-top: 12px!important;padding-bottom: 12px!important;border: 1px solid #ccc;background-color:#4787c2;color: #fff;border: none;display: inline-block;outline: 0;padding: 6px 16px;vertical-align: middle;overflow: hidden;text-decoration: none!important;width: 100%;text-align: center;cursor: pointer;white-space: nowrap;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-btn > .konfirm-button:hover{background-color:#336799;transition: 0.3s;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-btn > a.konfirm-button:disabled{cursor: not-allowed;opacity: 0.5;}
#body > .konfirm-content > .konfirm-col4 > form > .konfirm-button{padding-top: 12px!important;padding-bottom: 12px!important;border: 1px solid #ccc;background-color:#4787c2;color: #fff;border: none;display: inline-block;outline: 0;padding: 6px 16px;vertical-align: middle;overflow: hidden;text-decoration: none!important;width: 100%;text-align: center;cursor: pointer;white-space: nowrap;}
#body > .konfirm-content > .konfirm-col4 > form > .konfirm-button:hover{background-color:#336799;transition: 0.3s;}
#body > .konfirm-content > .konfirm-col4 > .konfirm-card > .konfirm-footer{padding:16px 0px;}
/* body konfirm End */
.modal#konfirm-modal > .modal-content{width:500px;}
.modal#konfirm-modal > .modal-content > .modal-body > .row > .col > .toggle-btn {margin-left:0px;display:block;min-width:100%;cursor: pointer;text-decoration: none;align-items: center;text-align: left}
.modal#konfirm-modal > .modal-content > .modal-body > .row > .col > .text {font-size: 15px}
/* body mulai Begin */
#body > .mulai-content{max-width: 1172px;width: 100%;margin: auto;content: "";display: table;clear: both;padding-bottom:140px;}
#body > .mulai-content > .mulai-col8 {width: 66.66666%;padding: 0.01em 16px;float:left;}
#body > .mulai-content > .mulai-col8 > .mulai-card {color: #000!important;background-color: #fff!important;border: 1px solid #ccc;}
#body > .mulai-content > .mulai-col8 > .mulai-card > .mulai-header{background-color: #f5f5f5;color: #333;padding: 8px 16px!important;border-bottom: 1px solid #DCDCDC;}
#body > .mulai-content > .mulai-col8 > .mulai-card > .mulai-body > .mulai-list{padding: 7px 30px!important;color: #222;line-height: 1.42857;border-bottom: 1px solid #ECECEC;}
#body > .mulai-content > .mulai-col8 > .mulai-card > .mulai-body > .mulai-list > .mulai-primary{color: #d43f3a;}
#body > .mulai-content > .mulai-col8 > .mulai-card > .mulai-footer{padding:16px 0px;}
#body > .mulai-content > .mulai-col4 {width: 33.33333%;padding: 0.01em 16px;float:left;}
#body > .mulai-content > .mulai-col4 > .mulai-alert{background-color: #fcf8e3;color: #8a6d3b;padding: 16px 32px!important;border: 1px solid #ccc;border-radius: 4px!important;margin-bottom:16px;}
#body > .mulai-content > .mulai-col4 > form > .mulai-button{padding-top: 12px!important;padding-bottom: 12px!important;border: 1px solid #ccc;background-color: #5cb85c;color: #fff;border: none;display: inline-block;outline: 0;padding: 6px 16px;vertical-align: middle;overflow: hidden;text-decoration: none!important;width: 100%;background-color: #e66c69;border-color: #d43f3a;color: #fff;text-align: center;cursor: pointer;white-space: nowrap;}
#body > .mulai-content > .mulai-col4 > form > .mulai-button:hover{ background-color: #df413d;border-color: #d52823;transition: 0.3s;}
#body > .mulai-content > .mulai-col4 > form > .mulai-button:disabled{cursor: not-allowed;opacity: 0.5;}
#body > .mulai-content > .mulai-col4 > .mulai-card > .mulai-footer{padding:16px 0px;}
/* body mulai End */

#waktu-alert{color:#333;display: none;background-color: #fff;position:fixed;top: 0%;left:50%;margin:auto;width: 380px;border-bottom: none;box-shadow:0 2px 2px 0 rgba(0,0,0,0.2),0 2px 15px 0 rgba(0,0,0,0.19)!important;z-index: 11;transform:translate(-50%,0%);}
#waktu-alert > .waktu-alert-header{padding: 10px 10px 2px 10px;font-weight: bold;font-size: 20px;text-align: center}
#waktu-alert > .waktu-alert-body{padding: 1px;font-size: 14px;text-align: center}
#waktu-alert > #sec-waktu-alert{color: #df413d;width: 100%;font-size: 40px;font-weight: bold;min-height:10px;padding:2px;display:flex;align-items: center;justify-content: center;float: left;}
#waktu-alert > .waktu-alert-footer{padding: 15px;font-size: 12px;text-align: center}
/* body Ujian Begin */
#body,#header,#footer{transition: all 0.1s}
#body.summary-push,#header.summary-push,#footer.summary-push{margin-right:360px;}
#body > .ujian-head{padding: 30px 15px 0px 15px;margin: auto;}
#body > .ujian-head > .ujian-header:after, #body > .ujian-head > .ujian-header:before{content:"";display:table;clear:both}
#body > .ujian-head > .ujian-header{padding: 6px 16px;border-bottom: 3px solid #C9C9C9;color: #000!important;background-color: #fff!important;border-bottom: 3px solid #C9C9C9;}
#body > .ujian-head > .ujian-header > .ujian-flex-putih{background-color:#fff ;width: 100px;height: 40px;font-weight: bold;text-align: center;padding: 10px 15px 10px 5px;float: left;color: #333}
#body > .ujian-head > .ujian-header > .ujian-flex-sisa{background-color: #979797;width: 120px;height: 40px;color: #fff;text-align: center;padding: 9px 0px 10px 0px;float: right;}
#body > .ujian-head > .ujian-header > .ujian-flex-info{text-align: center; color: #fff;background-color: #e66c69;width: 120px;padding: 9px 0px 10px 0px;height: 40px;font-size: 15px;font-weight: normal;cursor: pointer;display: flex; align-items: center;justify-content: center;border: none;outline: 0;overflow: hidden;text-decoration: none;white-space: nowrap;text-align: center;float: right;margin-right: 10px}
#body > .ujian-head > .ujian-header > .ujian-flex-waktu{background-color: #336799;width: 120px;height: 40px;color: #fff;text-align: center;padding: 9px 0px 10px 0px;float: right;font-weight: normal}
#body > .ujian-head > .ujian-header > #nomor > .ujian-flex-nomor{font-size:16px;background-color: #336799;width: 40px;height: 40px;color: #fff;font-weight: bold;display:flex;align-items: center;justify-content: center;float: left;}


#body > #soal-head.fixed-top{padding: 0px;}
#body > #soal-head.fixed-top > .ujian-header{position:fixed;top: 0px;width: 100%;padding: 20px 16px;border-bottom: none;box-shadow:0 2px 2px 0 rgba(0,0,0,0.2),0 2px 15px 0 rgba(0,0,0,0.19)!important;z-index: 9;}

#body > .ujian-head > .ujian-header > table > tbody > tr > td,#body > .ujian-head > .ujian-header > table > tbody > tr > td{padding: 0!important;}
#body > .ujian-head > .ujian-header > table > tbody > tr > td{width: 33.333%}
#body > .ujian-head > .ujian-header > table > tbody > tr > td > #nomor > .ujian-flex-nomor{font-size:16px;background-color: #336799;width: 40px;height: 40px;color: #eee;font-weight: bold;display:flex;align-items: center;justify-content: center;float: left;}
#body > .ujian-head > .ujian-header > table > tbody > tr > td > .ujian-flex-putih{background-color:#fff ;width: 100px;height: 40px;font-weight: bold;text-align: center;padding: 10px 15px 10px 5px;float: left;color: #333;}
#body > .ujian-head > .ujian-header > table > tbody > tr > td > .ujian-flex-info{text-align: center; color: #fff;background-color:  #5cb85c;width: 170px;padding: 9px 0px 10px 0px;height: 40px;font-size: 15px;font-weight: normal;cursor: pointer;display: flex; align-items: center;justify-content: center;border: none;outline: 0;vertical-align: middle;overflow: hidden;text-decoration: none;white-space: nowrap;}
#body > .ujian-head > .ujian-header > table > tbody > tr > td > .ujian-flex-sisa{background-color: #979797;width: 120px;height: 40px;color: #fff;text-align: center;padding: 9px 0px 10px 0px;float: right;}
#body > .ujian-head > .ujian-header > table > tbody > tr > td > .ujian-flex-waktu{background-color: #336799;width: 120px;height: 40px;color: #fff;text-align: center;padding: 9px 0px 10px 0px;float: right;font-weight: normal}

#body > #soal-content.padding-top{padding-top:85px ;}
#body > .ujian-content{padding: 0px 15px 60px 15px;margin: auto;}
#body > .ujian-content > .ujian-font{border-bottom: 3px solid #C9C9C9;display: block;background-color: #f0efef;color: #333;padding: 10px 30px;}
#body > .ujian-content > .ujian-font > .font-soal{font-size: 12px;font-weight:bold}
#body > .ujian-content > .ujian-font > .font-soal > .font{text-decoration: none;cursor: pointer;color: #336799;}
#body > .ujian-content > .ujian-font > .font-soal > .font:hover{color: #339999;}
#body > .ujian-content > .ujian-footer{padding: 10px 20px;background-color: #fff;transition: all 0.4s ;}
#body > .ujian-content > .ujian-footer.summary-push{padding-right:360px;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-prev{text-align: center; color: #fff;background-color: #979797;padding: 9px 0px 10px 0px;width: 210px;height: 45px;font-size: 15px;font-weight: normal;cursor: pointer;display: flex; align-items: center;justify-content: center;border: none;outline: 0;vertical-align: middle;overflow: hidden;text-decoration: none;white-space: nowrap;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-prev:hover{background-color:#666;transition: 0.1s;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-prev > .text-prev{margin-left: 16px}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-ragu{text-align: center; color: #fff;background-color: #edcb08;width: 170px;padding: 9px 0px 10px 0px;height: 45px;font-size: 15px;font-weight: normal;cursor: pointer;display: flex; align-items: center;justify-content: center;border: none;outline: 0;vertical-align: middle;overflow: hidden;text-decoration: none;white-space: nowrap;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-ragu:hover{background-color: #ecb709;transition: 0.2s;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-ragu > .text-ragu{margin-left: 16px}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-next{text-align: center; color: #fff;background-color: #336799;padding: 9px 0px 10px 0px;width: 210px;height: 45px;font-size: 15px;font-weight: normal;cursor: pointer;display: flex; align-items: center;justify-content: center;border: none;outline: 0;vertical-align: middle;overflow: hidden;text-decoration: none;white-space: nowrap;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-next:hover{background-color: #264d73;transition: 0.1s;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-next > .text-next{margin-right: 16px}

/* body Ujian End */

#body > .ujian-content > .ujian-wm {padding : 0px 20px 20px 20px;background-color: #fff;border-bottom: 3px solid #C9C9C9;}
#body > .ujian-content > .ujian-wm > .ujian-watermark.summary-push{margin-right: 360px}
#body > .ujian-content > .ujian-wm > .ujian-watermark{padding : 10px;border : solid 3px #ccc;border-bottom:  : solid 6px #ccc;border-top:0px ;}
#body > .ujian-content > .ujian-wm > .ujian-watermark > .watermark{font-size: 22px;color: #555;line-height: 1;}

/* footer Begin */
#footer{}
#footer > .version{font-size: 10px;font-weight: normal;padding: 8px 16px!important;background-color: #DCDCDC;color: #333;}
#footer > .copyright{background-color: #333;color: #fff;padding: 12px 24px!important;text-align: center!important;font-size: 12px!important}
/* footer End  */
#body > .ujian-content > #soal-body > table > p {margin: 0}
#body > .ujian-content > #soal-body {padding : 20px 20px 20px 20px;background-color: #fff;border-bottom: 3px solid #ccc}
#body > .ujian-content > #soal-body {display: none}
#body > .ujian-content > #soal-body > table > td {padding: 0}
#body > .ujian-content > #soal-body > .soal { border : solid 3px #ccc;border-top : solid 9px #ccc; padding : 20px 15px; display : none;min-height: 400px;}
#body > .ujian-content > #soal-body > .soal.summary-push{margin-right:360px }
#body > .ujian-content > #soal-body > .soal.active {display : block;}
#body > .ujian-content > #soal-body > .soal > .options-group {margin-top : 20px;margin-left: 20px;}
#body > .ujian-content > #soal-body > .soal > .options-group > .options {margin : 20px 0;position : relative;}
#body > .ujian-content > #soal-body > .soal > .options-group > .options > p {position : relative; left : 35px; max-width : calc(100% - 35px);text-align: justify;}
#body > .ujian-content > #soal-body > .soal > .options-group > .options > span.option {position: absolute;top: -3px;}
#body > .ujian-content > #soal-body > .soal > .options-group > .options > p > span{color:#333!important;}
#body > .ujian-content > #soal-body > .soal > .options-group > table { margin-left : 35px;}
#body > .ujian-content > #soal-body > .soal > p{ margin:0;}

/* body Akhir Begin */
#body > .akhir-content{padding:80px 0 200px 0;}
#body > .akhir-content > .akhir-box{width: 400px!important;border: 1px solid #c9c9c9;margin: auto}
#body > .akhir-content > .akhir-box > .akhir-card{color: #000!important;background-color: #fff!important;border-radius: 4px!important;border: 1px solid #c9c9c9;}
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-header {padding: 8px 16px!important;border-bottom: 1px solid #DCDCDC;background-color: #f5f5f5;color:#333;}
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-body {padding: 28px 36px;border-bottom: 1px solid #DCDCDC;}
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-body > #nilai{text-align: center;font-size: 50px; font-weight:bold;margin-top: 20px;}
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-body > #nilai > #lihatnilai{cursor:pointer;font-size:20px;}
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-footer{padding: 8px 16px;}
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-footer > .btn{width:100%;background-color: #5cb85c;color: #fff;border: none;display: inline-block;
    outline: 0;padding: 12px 16px;vertical-align: middle;overflow: hidden;text-decoration: none!important;text-align: center;cursor: pointer;white-space: nowrap;}
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-footer > .btn-close{width:100%;background-color: #e66c69;color: #fff;border: none;display: inline-block;
    outline: 0;padding: 12px 16px;vertical-align: middle;overflow: hidden;text-decoration: none!important;text-align: center;cursor: pointer;white-space: nowrap;margin-top: 10px;}   
#body > .akhir-content > .akhir-box > .akhir-card > .akhir-footer > .btn:hover{background-color: #449d44;color: #fff;transition: 0.3s;}

/* body Akhir End */

.option {background-color:#fff;border-radius:50%;border:2px solid #999;color: #999; width:27px;height:27px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-weight: bold;font-size: 16px;}
.option.checked { background : #2F659C;color : #2F659C; border-color : #2F659C}
.nomor {display : none!important;}.nomor p {margin: 0!important}
#summary {background:#fff;padding:20px;border: solid 20px #ddd;position:fixed;width:360px;right:0%;top:17%;height:470px;overflow-y:scroll;display: none;z-index: 10px}


#summary .no {float : left; font-size : 20px;text-align: center;position:relative;cursor:pointer;font-weight:bold;}
#summary p {margin : 0;   display: flex;    align-items: center;     justify-content: center;height: 50px; width : 50px; text-align : center;border : solid 3px #333;}
#summary span {position: absolute;  top: -12px;  right: -12px;  border-radius: 50%;  width: 30px;  height: 30px;  font-size: 18px;  background: #fff;  border: solid 3px #333;  display: flex;    align-items: center;     justify-content: center;     font-size: 18px;    font-weight: bold;}
.summary-grid-ori{display: grid;grid-template-columns: 50px 50px 50px 50px;grid-gap: 20px;}
@media only screen and (min-width:602px){#summary-button.show {right:360px!important;}
.summary-grid{display: inline-grid;grid-template-columns: repeat(4,50px);grid-gap: 20px;}}

#soal-body > .soal > p > img{max-width: 100%}
#soal-body .soal p:hover img{}

#summary .no.active,#summary .no.done.active p,#summary .no.ragu-ragu.active.done p {background: #336799;color: #fff;}
#summary .no.done p { background : #333; color : #fff;}#summary .no.ragu-ragu.done p,#summary .no.ragu-ragu {color : #fff; background : #edcb08}
#summary .no.ragu-ragu span {border-color : #edcb08; color  :#edcb08 }
#summary-button {position : fixed; right : 0; top: 40%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);}


#summary-button .btn {background: #e66c69;border: #e66c69;font-weight: normal;color: #fff;margin:0;content: "";display: table;clear: both;border-radius: 0;}
#summary-button button.btn{padding: 0}
#summary-button .btn .glyphicon{position:relative; top:0;padding: 23px 8px;font-size: 20px;float: left}
#summary-button .btn .text{padding: 14px 18px 14px 0px;font-size: 16px;float: left}
#summary-button.show {right:360px;}
#summary-button.show .btn .glyphicon{position:relative; top:0;float: left;padding: 23px 8px;font-size: 20px;}
#summary-button.show .btn {}
#summary-button.show .btn .text{padding: 14px 18px 14px 0px;font-size: 16px;float: left}
#summary .no.active span, #summary .no.active p {    border-color: #336799;}
#summary .no.active span {color : #336799;}
#summary .no.ragu-ragu p {border-color: #edcb08;}
#summary .no.done.active p, #summary .no.ragu-ragu.active.done p {border-color: #336799;}
td,th { padding : 5px;}
#ajax {display : none;}
.a1,.a2,.a3 {cursor:pointer}
.mjx-chtml.MJXc-display {text-align: left !important}
#soal-body>div>table{ width: 100% }
.summary-log {background-color: #DCDCDC;padding: 10px 0 10px 10px;width: 100%;    left: 0;    font-size: 10px;    margin-top: 50px;}
#summary span.inneroption {  top: -3px;  left: -3px; }

.modal{z-index:1000;display:none;padding-top:100px;padding-bottom:100px;position:fixed;left:0;top:0;min-width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,1);}
.modal > .modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:500px;}
.modal > .modal-content > .modal-header{padding: 8px 16px!important;background-color: #f5f5f5;color: #333;line-height: 1.42857;border-bottom: 1px solid #ECECEC;}
.modal > .modal-content > .modal-body{padding: 20px;line-height: 1.42857;border-bottom: 1px solid #ECECEC;font-size: 16px;}
.modal > .modal-content > .modal-body > .row > .col > img {width: 100%}
.modal > .modal-content > .modal-body > .row > .col > span.fa {font-size: 60px}
.modal > .modal-content > .modal-body > .row > .col > .text {font-size: 16px}
.modal > .modal-content > .modal-body > .row > .col > .toggle-btn {margin-left:100px;min-width:100%;cursor: pointer;text-decoration: none;align-items: center;display: flex;text-align: center}

.modal > .modal-content > .modal-footer {padding: 8px 16px;}
.modal > .modal-content > .modal-footer > .row > .col > .btn{width:100%;padding:12px 0;border: none;display: inline-block;outline: 0;vertical-align: middle;overflow: hidden;text-decoration: none!important;color: #fff;background-color: #000;text-align: center;cursor: pointer;white-space: nowrap;font-size: 16px;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.close{background-color: #e66c69;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.close:hover{background-color: #df413d;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.close:hover{background-color: #df413d;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.selesai{background-color: #5cb85c;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.selesai:disabled{cursor: not-allowed;opacity: 0.5;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.selesai:hover{background-color: #449d44;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.mulai{background-color: #e66c69;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.mulai:disabled	{cursor: not-allowed;opacity: 0.5;}
.modal > .modal-content > .modal-footer > .row > .col > .btn.mulai:hover{background-color: #df413d;}