@media (max-width:610px){
#header{border:none;width: 100%;}
#header.fixed-top{position:fixed;z-index:2;top: 0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.2),0 2px 5px 0 rgba(0,0,0,0.19)!important;}

#header > ul{height: 62px!important;}
#header > ul > .li-logo{padding-top: 3px!important;padding-bottom: 3px!important;}
#header > ul > .li-logo > .logo{height: 50px!important;margin-left: 10px;}
#header > ul > .li-user > .user{height:62px;width:60px!important;padding: 7px;min-width:60px;}
#header > ul > .li-user > .user > .col4{max-width: 99.99999%;}
#header > ul > .li-user > .user > .col4 > .avatar{width: 100%;height: auto;}
#header > ul > .li-user > .user > .col8{display: hide;}
#header > ul > .li-logo > #logo {margin-left:0px;}
#header > ul > .li-logo > #logo > #logo-container > img{height: 40px!important}
#header > ul > .li-logo > #logo > #text-container > .judul{font-size: 16px!important;}
#header > ul > .li-logo > #logo > #text-container > .sub-judul{font-size: 12px!important;letter-spacing:1px}
#header > ul > .li-logo > #logo > #text-container{line-height: 1;margin-top: 6px;}

#body{margin-top: 92px!important;}

#body > .login-content{padding:20px 0 80px 0;}
#body > .login-content > .login-box{max-width: 99.99999%!important;padding:0 8px;border: 1px solid #c9c9c9;margin: auto}
#body > .login-content > .login-box > .login-card > .login-body > table > tbody > tr > td.login-text{width:8%;}

#body > .konfirm-content{max-width: 400px;padding-bottom:0;}
#body > .konfirm-content > .konfirm-col8 {width: 99.99999%;padding: 0 8px;margin-bottom: 16px}
#body > .konfirm-content > .konfirm-col4 {width: 99.99999%;padding: 0 8px;margin-bottom: 32px}

#body > .mulai-content{max-width: 400px;padding-bottom:0;}
#body > .mulai-content > .mulai-col8 {width: 99.99999%;padding: 0 8px;margin-bottom: 16px}
#body > .mulai-content > .mulai-col4 {width: 99.99999%;padding: 0 8px;margin-bottom: 16px}

#body.ujian{margin-top: 65px!important;}

#waktu-alert{max-width: 120px;height: 50px;}
#waktu-alert > .waktu-alert-header{display: none}
#waktu-alert > .waktu-alert-body{display: none}
#waktu-alert > #sec-waktu-alert{font-size: 20px;padding:10px;}
#waktu-alert > .waktu-alert-footer{display: none}
#body > .ujian-head{padding: 10px 5px 0 5px;margin: auto;}
#body > .ujian-head > .ujian-header > .ujian-flex-putih{display: none;}
#body > .ujian-head > .ujian-header > .ujian-flex-sisa{width: 105px}
#body > .ujian-head > .ujian-header > .ujian-flex-waktu{width: 105px}
#body > .ujian-head > .ujian-header > #nomor > .ujian-flex-nomor{}
#body > #soal-head.fixed-top{padding: 0px;z-index: 2;}
#body > #soal-head.fixed-top > .ujian-header{padding: 11px 15px;top: 0px;}

#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;}

#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{display: none}
#body > .ujian-head > .ujian-header > table > tbody > tr > td > .ujian-flex-info{width: 100px;}
#body > .ujian-head > .ujian-header > table > tbody > tr > td > .ujian-flex-sisa{display: none}
#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 > .ujian-content > #soal-body > .soal > .options-group {margin-left:5px;}

#body > #soal-content.padding-top{padding-top:3px ;}
#body > .ujian-content{padding: 0px 5px 15px 5px;margin: auto;}
#body > .ujian-content > .ujian-footer.summary-push{padding-right:20px!important;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-prev{border-radius: 50%;width: 40px;height: 40px;color: #fff;font-size: 12px;text-align: center;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-prev > .text-prev{margin-left: 0;display: none;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-ragu{border-radius: 50%;width: 40px;height: 40px;color: #fff;font-size: 12px;text-align: center;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-ragu > .text-ragu{margin-left: 0;display: none;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-next{border-radius: 50%;width: 40px;height: 40px;color: #fff;font-size: 12px;text-align: center;}
#body > .ujian-content > .ujian-footer > table > tbody > tr > td > .button-next > .text-next{margin-right: 0;display: none;}

#body > .akhir-content{padding:50px 0 130px 0;}
#body > .akhir-content > .akhir-box{max-width: 99.99999%!important;padding:0 8px;border: 1px solid #c9c9c9;margin: auto}
#body > .ujian-content > .ujian-wm {padding : 0px 10px 10px 10px;background-color: #fff;border-bottom: 3px solid #C9C9C9;}
#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: 16px;color: #555;line-height: 1;}


.modal#user{padding: 100px 10px 10px 10px}
.modal#user > .modal-content{width:99.99999%;}
.modal#user > .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: 14px;}
.modal#user > .modal-content > .modal-footer > .row > .col > .btn.logout{background-color: #e66c69;}
.modal#user > .modal-content > .modal-footer > .row > .col > .btn.logout:hover{background-color: #df413d;}
.modal#user > .modal-content > .modal-footer > .row > .col > .btn.logout:disabled{cursor: not-allowed;opacity: 0.5;}
.modal#user > .modal-content > .modal-footer > .row > .col > .btn.refresh{background-color: #4787c2;}
.modal#user > .modal-content > .modal-footer > .row > .col > .btn.refresh:hover{background-color: #336799;}
.modal#user > .modal-content > .modal-footer > .row > .col > .btn.close{background-color: #5cb85c;}
.modal#user > .modal-content > .modal-footer > .row > .col > .btn.close:hover{background-color: #449d44;}

#summary::-webkit-scrollbar{width:4px;height: 4px}
#summary::-webkit-scrollbar-track{background-color: #ddd;border-radius: 20px}
#summary::-webkit-scrollbar-thumb{background-color: #999;border-radius: 20px}

.modal{padding: 40px 10px 40px 10px}
.modal#konfirm-modal > .modal-content{max-width:99.99999%;}
.modal > .modal-content{width:99.99999%!important;}
.modal > .modal-content > .modal-body > .row > .col > span.fa {font-size: 50px}
.modal > .modal-content > .modal-body > .row > .col > .text {font-size: 14px}
.modal > .modal-content > .modal-body > .row > .col > .toggle-btn {margin-left: 0;}
.modal > .modal-content > .modal-footer > .row > .col > .btn{padding:10px 0;font-size: 14px;}

.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: 4px;}
.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:40%;font-size: 14px}
.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;}

}
@media only screen and (max-width:601px){
	.summary-grid-ory {display: grid;grid-template-columns: 40px 40px 40px 40px;grid-gap: 15px;}
	.summary-grid {display: grid!important;grid-template-columns:repeat(auto-fill,50px); grid-gap: 20px;}
	#soal-body > .soal > p > img{width: 100%}
	#soal-body {padding : 10px!important;}
	.soal {padding : 10px!important;}
	#summary {top:62px;height :calc(100% - 62px );width  : 100%;overflow-y:scroll;z-index: 11; }
	#summary .no {float : left; font-size : 20px;  text-align: center;    position : relative;     cursor : pointer;font-weight : bold; }
	#summary p {height: 50px; width : 50px;}
	#summary span {  top: -12px;  right: -12px;  border-radius: 50%;  width: 30px;  height: 30px;    font-size: 18px;}
	#summary-button.show {right:calc(100% - 36px)!important;z-index: 12;}
	#summary-button {top: 50%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);}
	#summary {padding:20px 20px 20px 30px;border: solid 20px #f1f1f1;}
	#summary-button .btn .text{display: none}
	#summary-button.show .btn .text{display: none}

}