@import url('https://fonts.googleapis.com/css?family=Varela+Round&display=swap');

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

/* CORE : DEFAULT */
body {font-family: 'Varela Round', sans-serif; font-size: 14px; letter-spacing: 0.2px; line-height: 130%; color: #000000; margin: 0px;
      -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}/**/
a {color: #337ab7; text-decoration: none;}
a:hover {color: #337ab7; text-decoration: underline;}
a .linkdel {color: #ff0000; text-decoration: none;}
ul {padding: 20px;}
li {list-style-type: square; padding: 5px 0px;}
h1 {font-weight: bold; font-size: 24px;}


.outer {
   display: table;
   position: absolute;
   height: 100%;
   width: 100%;
}
.middle {
   display: table-cell;
   vertical-align: middle;
}
.inner {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 100px;
   width: 300px;
   text-align: center;
}

#container {width: 500px; margin: auto auto;}
#loading_1 {display: none; position: fixed; bottom: 0px; left: 0px; width: 100%; background: #555555; top: 0px; opacity: 0.5; filter: alpha(opacity=50);}
#loading_2 {display: none; position: fixed; bottom: 0px; left: 0px; width: 100%; background: #555555; color: #ffffff; padding: 20px; text-align: center;}

.table {display: table; table-layout: fixed; width: 100%;}
.tbl {display: table; table-layout: fixed; width: 100%;}
.tr {display: table-row; margin: 10px;}
.td {display: table-cell; vertical-align: middle;}

.bodi_1 {display: block;}
.bodi_2 {display: none; margin-top: 200px; text-align: center; font-size: 200%;}
.bodi_3 {background: transparent url('/img/icon-rotate.png') 0px 0px no-repeat; background-size: cover; margin: 0px auto; width: 250px; height: 250px;}

#logo_cont {position: relative;}
#logo {background: transparent url('/img/logo-brand.png') 0px 0px no-repeat;
       width: 300px; height: 100px; background-size: cover;}
#logo_name {position: absolute; width: 600px; top: 23px; right: 0px; background: #ffff54; color: #484848;
            border: 3px solid #484848; padding: 5px 15px; font-size: 16px; font-style: italic; text-align: center;}

.header_0 {position: fixed; top: 0px; width: 100%; background: #ffffff; border-bottom: 1px solid #f1f1f1; box-shadow: 1px 1px 10px #d1d1d1; padding: 5px 0px; z-index: 100;}
.header_menu_butt {position: relative; width: 24px; height: 24px; cursor: pointer;}
.header_menu_butt_1 {background: #777777; height: 3px; width: 75%; margin: 3px auto;}
.header_menu_butt_2 {background: #000000;}
.header_menu_butt_3 {background: #ff4000;}
.header_logo {background: transparent url('/img/logo-brand.png') 50% 50% no-repeat; background-size: cover; height: 50px; width: 150px; cursor: pointer;}
.header_pic {display: none; width: 35px; height: 35px; margin: 20px auto; border-radius: 50%; background: #f1f1f1;}
.header_pic_td {width: 0px;}
.head_online_ico {background: transparent url('/img/icon_people.png') 50% 50% no-repeat; background-size: cover; height: 16px; width: 16px;}
.head_credit_ico {background: transparent url('/img/icon_wallet.png') 50% 50% no-repeat; background-size: cover; height: 16px; width: 16px;}

#body_0 {position: fixed; overflow: auto; border-left: 1px solid #e1e1e1; background: #ffffff; padding: 20px;}
.page_label {margin-bottom: 20px; padding: 10px 10px 10px 50px; font-weight: normal; font-size: 24px;}

#menu_0 {position: fixed; overflow: auto; width: 250px; background: #ffffff;}
#menu_pic_0 {display: none; height: 200px; width: 250px; min-height: 200px; min-width: 250px; background: #ffffff; overflow: hidden;}
#menu_pic_1 {display: none; height: 120px; width: 120px; border-radius: 50%; margin: 0px auto; background: #f1f1f1;}
#menu_pic_2 {display: none; width: 150px; font-size: 12px; color: #777777; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; margin: 0px auto 0px auto;}
#menu_pic_3 {display: none; height: 10px;}
#menu_data_0 {margin-top: 10px; padding-bottom: 50px;}
.menu_data_1 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; padding-left: 5px; color: #555555;}
.menu_data_2 {width: 24px; height: 24px; background: #ff4000; margin: 0px auto;}
.menu_data_3a {padding: 10px 0px; cursor: pointer;}
.menu_data_3a:hover {background: #f1f1f1;}
.menu_data_3b {padding-left: 3px;}
.menu_data_3c {border-left: 3px solid #ff4000; background: #f1f1f1; font-weight: bold;}
.menu_logout {position: fixed; bottom: 0px; background: #f9f9f9; border-top: 1px solid #d1d1d1;}
.menu_notif {display: none; position: absolute; top: -3px; right: 0px; height: 10px; width: 10px; border-radius: 50%; background: #ff0000;}

/* CORE : LOGIN PAGE */
.login_cont {background: #ffffff; width: 350px; padding: 25px; border-radius: 20px; opacity: 0.9;}
.login_block {border-radius: 5px; border: 2px dashed #333333; background: #ffffff; margin: 30px 0px 10px 0px;}
.login_label {padding: 10px; font-weight: bold; color: #000000; font-size: 12px; border-bottom: 2px solid #333333; margin: 0px 10px;}
.login_button {margin: 10px 0px 10px 0px;}
.login_copy {margin-top: 20px; font-size: 10px; line-height: 115%;}
.login_button_google {background: #d9534f url('/img/login-button-google.png') 50% 50% no-repeat; background-size: 40%; border-radius: 5px; width: 100%; height: 40px; cursor: pointer;}
.login_button_facebook {background: #337ab7 url('/img/login-button-facebook.png') 50% 50% no-repeat; background-size: 40%; border-radius: 5px; width: 100%; height: 40px; cursor: pointer;}
.login_bg {background: transparent url('/img/login-bg.jpeg') 50% 50% no-repeat; background-size: cover; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px;}

/* CORE : TOMBOL */
.butt_0 {border-radius: 5px; padding: 10px; cursor: pointer; text-align: center; font-weight: bold; color: #ffffff;}
.butt_masuk {background: #296899; border: 1px solid #ffffff; box-shadow: 0 0 0px 2px #337ab7;}
.butt_masuk:active {border: 1px solid #296899; box-shadow: 0 0 10px 2px #337ab7; text-shadow: 0 0 5px #ffffff;}
.butt_simpan {background: #296899; border: 1px solid #ffffff; box-shadow: 0 0 0px 2px #337ab7;}
.butt_simpan:active {border: 1px solid #296899; box-shadow: 0 0 10px 2px #337ab7; text-shadow: 0 0 5px #ffffff;}
.butt_batal {background: #a1a1a1; border: 1px solid #ffffff; box-shadow: 0 0 0px 2px #a1a1a1;}
.butt_batal:active {border: 1px solid #a1a1a1; box-shadow: 0 0 10px 2px #a1a1a1; text-shadow: 0 0 5px #ffffff;}

.butt_plus_big {position: fixed; bottom: 20px; right: 20px; border-radius: 50%; cursor: pointer;
                height: 60px; width: 60px; font-size: 48px; text-align: center;
                background: #337ab7 url('/img/icon-plus_putih.png') 50% 50% no-repeat; background-size: 75%;
                border: 2px solid #ffffff; box-shadow: 0 0 0px 2px #337ab7; z-index: 5;
                animation: bigger2 1s forwards;}
.butt_plus_big:hover {background-size: 75%; animation: bigger1 1s forwards;}
.butt_plus_big:active {background-size: 5%;}
@keyframes bigger1{
  0%{background-size: 75%;}
  50%{background-size: 85%;}
  100%{background-size: 75%; background-color: #ff0000; box-shadow: 0 0 0px 2px #ff0000;}
}
@keyframes bigger2{
  0%{background-size: 75%; background-color: #ff0000; box-shadow: 0 0 0px 2px #ff0000;}
  50%{background-size: 85%;}
  100%{background-size: 75%;}
}

/* CORE : STATUS */
.stat_1_img {display: inline-block; width: 12px; height: 12px; background: transparent url('/img/icon_stat_ok.png') 50% 50% no-repeat; background-size: cover;}
.stat_2_img {display: inline-block; width: 12px; height: 12px; background: transparent url('/img/icon_stat_no.png') 50% 50% no-repeat; background-size: cover;}

/* CORE : FORM */
form {border: 2px solid #f1f1f1; border-radius: 10px; padding: 15px;}
input,textarea {padding: 10px; width: 100%; border: 2px solid #d1d1d1; border-radius: 5px; color: #333333; margin-right: 5px;}
textarea {resize: vertical; min-height: 150px; padding: 10px;}
select {padding: 10px 10px; border: 1px solid #d1d1d1; border-radius: 5px; color: #555555; margin-right: 10px; cursor: pointer;}
input[type=checkbox] {display: none;}
.form_check_0 {width: 24px; height: 24px;}
.form_check_1 {width: 24px; height: 24px; border: 1px solid #d1d1d1; border-radius: 5px; cursor: pointer;}
.form_check_2 {width: 24px; height: 24px; border: 2px solid #729569; background: #8ab27f url('/img/icon-centang_putih.png') 50% 50% no-repeat; background-size: 75%;}

/* CORE : BLINKING */
.blink {
  animation: blinks 1s linear infinite;
}
@keyframes blinks {
  50% {
    opacity: 0;
  }
}

/* LAYOUT : LIST */
.table_head_0 {background: #f1f1f1; border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; padding: 10px;}
.table_data_0 {border-bottom: 1px solid #d1d1d1; padding: 10px;}
.table_data_1 {padding: 0px 0px; border-botto: 1px solid #f1f1f1; font-size: 11px;}
.table_data_2 {padding: 0px 10px;}
.pageing {text-align: center; margin: 30px 0px;}

/* LAYOUT : FORM */
.form_cont {border-bottom: 1px solid #f1f1f1;}
.form_judul {font-weight: bold; padding: 20px 10px;}
.form_titik {font-weight: bold; padding: 20px 10px;}
.form_form {padding: 20px 10px;}

/* LAYOUT : SEARCH */
.search_0 {margin-bottom: 5px;}
.search_1 {padding: 5px 10px;}

/* MOD : HOME */
.terms_1 {font-size: 24px; text-align: center;}
.terms_2 {font-weight: bold; text-align: center;}
.terms_3 {padding: 20px 20px 0px 20px; margin: 20px 0px 30px 0px; max-height: 345px; overflow: auto; border: 2px solid #f1f1f1; border-radius: 20px 20px 0px 0px;}
.terms_4 {text-align: center; border-bottom: 2px solid #d1d1d1; margin-bottom: 30px;}
.terms_5 {padding: 10px;}

.jadwal_0 {font-size: 18px; font-weight: bold; background: #f1f1f1; padding: 10px; border-bottom: 2px solid #d1d1d1; border-radius: 10px 10px 0px 0px;}
.jadwal_1 {margin-bottom: 20px;}

/* MOD : KELOMPOK UJIAN */
.tree_ujian_kel_0 {border-top: 1px solid #d1d1d1; padding: 20px 10px 10px 10px;}
.tree_ujian_kel_1 {display: inline-block; margin-right: 30px; padding-left: 24px; margin-bottom: 10px;
                   background: transparent url('/img/icon_arrow_right.png') 0% 50% no-repeat; background-size: 16px;}

/* MOD : DATADIRI */
.datadiri_form {}
.datadiri_label {font-weight: bold; border-bottom: 2px solid #f1f1f1; padding: 5px 0px;}

/* MOD : USER UJIAN */
.ujian_page_1 {position: relative; display: inline-block; padding: 5px 10px; color: #a1a1a1; margin: 10px 5px; border: 2px solid #d1d1d1; border-radius: 5px; cursor: pointer;}
.ujian_page_2 {border-color: #296899; background: #6fc0ff; color: #296899;}
.ujian_page_3 {position: absolute; border-radius: 50%; width: 10px; height: 10px; background: #ff0000; display: none;}
.ujian_pilihan_0 {padding: 5px 0px;}
.ujian_pilihan_1 {width: 35px; vertical-align: top;}
.ujian_pilihan_3 {width: 100%; vertical-align: top; padding-top: 3px;}
.ujian_pilihan_2 {width: 30px; vertical-align: top; padding-top: 3px;}
.ujian_pilihan_4 {width: 25px;}
.ujian_next_prev {background: #f1f1f1; margin-top: 20px; padding: 20px 20px; border-top: 1px solid #d1d1d1;}
.ujian_next_prev_butt {display: inline-block; color: #ff4000; border: 2px solid #ff4000; border-radius: 5px; cursor: pointer;
                       background: #ffffff; font-weight: bold; padding: 5px 10px;}
.ujian_time_0 {background: #f1f1f1; margin-bottom: 20px; padding: 10px 20px; border-bottom: 1px solid #d1d1d1;}

/* MOD : WEBSTAT */
@media only screen and (max-width: 600px){
  .webstat_0 {display: inline-block; border: 2px solid #d1d1d1; width: 40% !important; margin: 10px 10px 10px 10px !important;}
}
.webstat_0 {display: inline-block; border: 2px solid #d1d1d1; border-radius: 10px; width: 20%; margin: 10px 20px 10px 20px;}
.webstat_1 {padding: 5px; font-weight: bold; border-bottom: 2px solid #d1d1d1;}
.webstat_2 {padding: 10px 5px; font-size: 24px; font-weight: bold;}
.webstat_list_0 {border: 2px solid #d1d1d1; border-radius: 10px; width: 100%;}
.webstat_list_1 {padding: 10px; text-align: center; font-weight: bold; border-bottom: 2px solid #d1d1d1;}

/* MOD : FAQ */
.faq_0 {border: 1px solid #d1d1d1; border-radius: 5px; padding: 10px; margin-bottom: 20px;}
.faq_1 {margin-bottom: 30px; padding: 0px 10px;}
.faq_2 {font-weight: bold; font-size: 18px; padding-bottom: 5px;}
.faq_3 {padding: 0px; color: #333333;}

/* MOD : REPORT */
.report_download_1 {width: 50%; vertical-align: top; padding: 10px 0px;}
.report_download_2 {width: 50px; vertical-align: top;}
.report_download_3 {width: 50%; vertical-align: top; border: 1px solid #d1d1d1; border-radius: 10px; padding: 20px 20px;}
.report_download_1a {width: 150px; vertical-align: top; padding-left: 10px;}
.report_download_1b {width: 10px; vertical-align: top; text-align: center;}
.report_download_1c {width: 100%; vertical-align: top; padding-left: 20px;}
.report_download_1d {margin-bottom: 10px; vertical-align: top; padding-bottom: 10px; border-bottom: 1px solid #d1d1d1;}
.report_download_1e {overflow: auto; height: 200px; vertical-align: top;}

/* ICON : SIGNAL */
.signal_1 {font-size: 11px; color: #6e9f4d; background: transparent url('/img/icon_signal_1.png') 50% 8px no-repeat; vertical-align: bottom; text-align: center; padding-bottom: 6px;}
.signal_2 {font-size: 11px; color: #d7bb37; background: transparent url('/img/icon_signal_2.png') 50% 8px no-repeat; vertical-align: bottom; text-align: center; padding-bottom: 6px;}
.signal_3 {font-size: 11px; color: #ff0000; background: transparent url('/img/icon_signal_3.png') 50% 8px no-repeat; vertical-align: bottom; text-align: center; padding-bottom: 6px;}

/* ICON : FULLSCREEN */
.fullscreen_1 {background: transparent url('/img/icon_full_yes.png') 50% 50% no-repeat; background-size: 20px; cursor: pointer;}
.fullscreen_2 {background: transparent url('/img/icon_full_no.png') 50% 50% no-repeat; background-size: 20px; cursor: pointer;}