@font-face {font-family: "Roboto";font-weight: normal;src: url(../fonts/Roboto-Regular.ttf);}
@font-face {font-family: "Roboto";font-weight: bold;src: url(../fonts/Roboto-Bold.ttf);}
@font-face {font-family: "Roboto";font-weight: 100;src: url(../fonts/Roboto-Light.ttf);}
@font-face {font-family: "Roboto";font-style: italic;src: url(../fonts/Roboto-Italic.ttf);}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 15px; padding-right: 15px }
.row-kecil .col-xs-1, .row-kecil .col-sm-1, .row-kecil .col-md-1, .row-kecil .col-lg-1, .row-kecil .col-xs-2, .row-kecil .col-sm-2, .row-kecil .col-md-2, .row-kecil .col-lg-2, .row-kecil .col-xs-3, .row-kecil .col-sm-3, .row-kecil .col-md-3, .row-kecil .col-lg-3, .row-kecil .col-xs-4, .row-kecil .col-sm-4, .row-kecil .col-md-4, .row-kecil .col-lg-4, .row-kecil .col-xs-5, .row-kecil .col-sm-5, .row-kecil .col-md-5, .row-kecil .col-lg-5, .row-kecil .col-xs-6, .row-kecil .col-sm-6, .row-kecil .col-md-6, .row-kecil .col-lg-6, .row-kecil .col-xs-7, .row-kecil .col-sm-7, .row-kecil .col-md-7, .row-kecil .col-lg-7, .row-kecil .col-xs-8, .row-kecil .col-sm-8, .row-kecil .col-md-8, .row-kecil .col-lg-8, .row-kecil .col-xs-9, .row-kecil .col-sm-9, .row-kecil .col-md-9, .row-kecil .col-lg-9, .row-kecil .col-xs-10, .row-kecil .col-sm-10, .row-kecil .col-md-10, .row-kecil .col-lg-10, .row-kecil .col-xs-11, .row-kecil .col-sm-11, .row-kecil .col-md-11, .row-kecil .col-lg-11, .row-kecil .col-xs-12, .row-kecil .col-sm-12, .row-kecil .col-md-12, .row-kecil .col-lg-12 { padding-left: 6px; padding-right: 6px }
.form-group .col-xs-1, .form-group .col-sm-1, .form-group .col-md-1, .form-group .col-lg-1, .form-group .col-xs-2, .form-group .col-sm-2, .form-group .col-md-2, .form-group .col-lg-2, .form-group .col-xs-3, .form-group .col-sm-3, .form-group .col-md-3, .form-group .col-lg-3, .form-group .col-xs-4, .form-group .col-sm-4, .form-group .col-md-4, .form-group .col-lg-4, .form-group .col-xs-5, .form-group .col-sm-5, .form-group .col-md-5, .form-group .col-lg-5, .form-group .col-xs-6, .form-group .col-sm-6, .form-group .col-md-6, .form-group .col-lg-6, .form-group .col-xs-7, .form-group .col-sm-7, .form-group .col-md-7, .form-group .col-lg-7, .form-group .col-xs-8, .form-group .col-sm-8, .form-group .col-md-8, .form-group .col-lg-8, .form-group .col-xs-9, .form-group .col-sm-9, .form-group .col-md-9, .form-group .col-lg-9, .form-group .col-xs-10, .form-group .col-sm-10, .form-group .col-md-10, .form-group .col-lg-10, .form-group .col-xs-11, .form-group .col-sm-11, .form-group .col-md-11, .form-group .col-lg-11, .form-group .col-xs-12, .form-group .col-sm-12, .form-group .col-md-12, .form-group .col-lg-12 { padding-left: 8px; padding-right: 8px }
.row { margin-left: -15px; margin-right: -15px; }
.row-kecil .row { margin-left: -6px; margin-right: -6px; }
.form-horizontal .form-group { margin-left: -8px; margin-right: -8px; }
.container { padding-left: 0px; padding-right: 0px; }

body { font-family: 'Roboto',Arial; }

a:hover { text-decoration: none; }

h1,h2 { margin-bottom: 18px; }
h1,h2,h3,h4,h5 { font-weight: 100; }
hr { margin: 20px 0; }
.hr-kecil { margin: 10px 0; }
.mfp-wrap, .mfp-bg { z-index: 2900; }

/* header */
/* section/konten ----------------------------- */
/* button */

/* tabel */
.table h5 { padding: 0; margin: 0 0 3px; font-size: 14px; font-weight: bold; line-height: 1.4; }
.table hr { margin: 5px 0; }
.table .aksi { width: 34px; color: #bbb; text-align: center; }
.panel>.table-responsive>.table-bordered>thead>tr:first-child>th { border-bottom: 2px solid #ddd; }
.table-striped>tbody>tr:nth-of-type(odd) { /*background-color: #FFF9FF;*/ }
.table-hover>tbody>tr:hover { /*background-color: #F9EFD7;*/ }
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { vertical-align: middle; }
.table>tbody>tr>td>p { margin-bottom: 0; }
.table .th { height: 0; }
.table .td-input { padding: 3px; }
.table .td-input input { border: 1px solid #76ADAD; padding: 2px 4px; font-size: 13px; width: 100%;}
.table .td-kecil { padding: 2px; font-size: 11px; text-align: center; background-color: #f5f5f5; }
.table .td-kecil b { padding: 0 4px; font-weight: normal; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-radius: 6px; }

/* foto dalam tabel */
.foto-tabel { position: relative; width: 100%; margin: 0 auto; }
.foto-tabel img { width: 100%; }
.foto-tabel .tombol-foto-tabel { width: 100%; display: none; position: absolute; top: 50%; margin-top: -15px; padding: 5px 0; background-color: rgba(0, 0, 0, 0.5); text-align: center; }
.foto-tabel:hover img { opacity: 0.8; }
.foto-tabel:hover .tombol-foto-tabel { display: block; }

/* tabel responsive */
.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child, .panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child, .panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child, .panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child, .panel>.table:first-child>tbody:first-child>tr:first-child td:first-child, .panel>.table:first-child>tbody:first-child>tr:first-child th:first-child, .panel>.table:first-child>thead:first-child>tr:first-child td:first-child, .panel>.table:first-child>thead:first-child>tr:first-child th:first-child { border-top-left-radius: 0; }
.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child, .panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child, .panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child, .panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child, .panel>.table:first-child>tbody:first-child>tr:first-child td:last-child, .panel>.table:first-child>tbody:first-child>tr:first-child th:last-child, .panel>.table:first-child>thead:first-child>tr:first-child td:last-child, .panel>.table:first-child>thead:first-child>tr:first-child th:last-child { border-top-right-radius: 0; }
.table>thead>tr>td.success, .table>tbody>tr>td.success, .table>tfoot>tr>td.success, .table>thead>tr>th.success, .table>tbody>tr>th.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>tbody>tr.success>td, .table>tfoot>tr.success>td, .table>thead>tr.success>th, .table>tbody>tr.success>th, .table>tfoot>tr.success>th { background-color: #F7FFFB; }
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { border-top: 1px solid #eee; }

/* tabel detail */
.table-profil { width: 100%; font-size: 13px; margin-bottom: 25px; }
.table-profil>tbody>tr { border-bottom: 1px solid #eee; }
.table-profil>tbody>tr:last-child { border-bottom: none; }
.table-profil>tbody>tr>td { padding: 5px 2px; }
.table-profil>tbody>tr>td.labels { font-weight: bold; width: 100px; }

/* paging */
.panel .paging { padding: 10px 10px 8px 14px; min-height: 50px; }
.panel .paging span { margin: 3px 0 0 0; display: inline-block; font-size: 15px; font-weight: 100; color: #333; }
.pagination { border-radius: 0; }
.pagination .fa-lg { line-height: 0.50em }
.pagination>li>a, .pagination>li>span { color: #186B8C; }
.pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span { border-radius: 0; }
.pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span { border-radius: 0; }
.pagination-sm { margin: 0; }
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { background-color: #26677D; border-color: #26677D; color: #fff; }

/* tabs */

/* form */
.form-group .cekbox { padding: 8px 12px 3px 8px; border: 1px solid #CCCCCC; border-bottom: 3px solid #E3E3E3; margin-top: 0; }
.form-group .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { margin-left: -16px; margin-top: 5px; }
.form-group .radio-inline+.radio-inline, .checkbox-inline+.checkbox-inline { margin-left: 0; }
.form-group .radio label, .form-group .checkbox label { margin-right: 16px; padding-left: 2px; font-weight: normal; }
/*.form-control { border: 1px solid #CCCCCC; border-bottom: 3px solid #E3E3E3; height: auto; box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -webkit-border-radius: 0; }
.form-control:focus { border: 1px solid #D66161; border-bottom: 3px solid #D66161; box-shadow: none; -webkit-box-shadow: none; }*/
.panel-form select, .modal-body select  { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(../img/combo.png) no-repeat right center; }
.file-caption-name { overflow: inherit; }
.btn-file { cursor: pointer; }
.input-group-addon { background-color: #E19D9D; color: #fff; border: none; border-radius: 0; padding: 6px 8px; }
.input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn { border-radius: 0; -webkit-border-radius: 0; }

/* form pencarian */
.form-cari .panel-body { padding: 8px 14px; }
.form-cari .form-group { margin-bottom: 4px; }
.form-cari .control-label { font-size: 12px; font-weight: normal; padding-top: 2px; }
.form-cari .form-control { font-size: 12px; padding: 2px 4px; height: auto; border: 1px solid #E19D9D; }
.form-cari .form-inline .form-group { margin: 0 15px 0 0; }
.form-cari .form-inline label { font-size: 12px; font-weight: normal; padding-right: 4px; }
.has-cari .form-control { border-color: #FF8C00; }
input[type=search] { -webkit-appearance: searchfield; }

/* feedback validasi form */
.form-error, .has-error .help-block, .has-error .control-label { /*margin: 4px 0 0; font-size: 12px;*/ color: #B11031; }
.has-error .form-control { border-color: #E47272; color: #555; box-shadow: none; -webkit-box-shadow: none; }
.has-error .form-control:focus {  border-color: #CE2727; color: #555; box-shadow: none; -webkit-box-shadow: none; }
.has-error .form-control-feedback { color: #E47272; }
.has-error .input-group-addon { color: #fff; background-color: #76ADAD; }
.has-error .checkbox-inline, .has-error .radio-inline { color: #008080; }
.has-success .form-control { border: 2px solid #76ADAD; color: #555; box-shadow: none; -webkit-box-shadow: none; }
.has-success .form-control:focus { border: 2px solid #76ADAD; color: #555; box-shadow: none; -webkit-box-shadow: none; }
.has-success .form-control-feedback { color: #2CB52C; }
.has-success .input-group-addon { color: #fff; background-color: #76ADAD; }
.has-success .checkbox, .has-success .checkbox-inline, .has-success .control-label, .has-success .help-block, .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label, .has-success.radio label, .has-success.radio-inline label { color: #444; }
.has-feedback .form-control { padding-right: 12px; }
.form-control-feedback { display: inline-block; position: static; height: inherit; width: 30px; line-height: normal; }
.form-horizontal .form-control-feedback { position: absolute; }
.form-horizontal .has-feedback .form-control-feedback { right: 5px; }
.form-horizontal .has-feedback label~.form-control-feedback { top: 5px; }
.note-editor { min-height: 120px; }
.note-editor .note-toolbar .btn { padding: 3px 8px; }
#cek_captcha { font-size: 24px; font-weight: bold; }
#captcha { width: 30% }

/* modal */
.modal { z-index: 1050; }
.modal-header .close { margin: 0; color: #ccc; opacity: 1; }
.modal-header .close .fa { font-size: 16px; }
.modal-footer { background-color: #F5F5F5; padding: 8px; text-align: left; }
.modal_konf_hapus { width: 250px; margin: auto auto; }
.modal_konf_hapus .modal-footer { text-align: center; padding: 12px; }
.modal_konf { width: 300px; margin: auto auto; }
.modal_konf .fa-5x, .modal_konf_hapus .fa-5x { color: #FFC379; margin-bottom: 15px; }
.modal_konf p, .modal_konf_hapus p { font-size: 16px; font-weight: 100; margin-bottom: 0; }
.modal_konf .modal-footer { text-align: center; }
.modal-body .form-group { margin-bottom: 10px; }
.modal-body .form-control { padding: 4px 7px; font-size: 13px; }
.modal-body .form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline { padding: 0 0 3px 20px; }
.modal-body .form-group hr { margin-top: 10px; margin-left: -7px; margin-right: -7px; border-top: 1px solid #ccc; }
.modal-besar, .modal-sedang, .modal-kecil { margin: 25px auto; }
.modal-backdrop.in { filter: alpha(opacity=80); opacity: 0.8; }
.modal-body+.modal-footer { padding: 8px; }
.modal-header+.modal-body { padding: 20px; }

/* panel */
.panel .table { margin-bottom: 0; border-bottom: 1px solid #ddd; }
.panel .toolbar { padding: 5px; height: 45px; }
.panel { box-shadow: none; -webkit-box-shadow: none; border-radius: 0; -webkit-border-radius: 0; }
.panel-default { border-color: #D2DFDF; }
.panel-default>.panel-heading, .panel-footer { background-color: #E7EEEE; color: #008080; border-color: #D2DFDF; border-radius: 0; -webkit-border-radius: 0; }
.panel-success { border-color: #269C26; }

/* list-group */
/* thumbnail menu depan */
/* popover & tooltip */
.popover { font-family: 'Roboto',Arial; border-radius: 0; max-width: 200px; }
.popover h3 { font-weight: bold; }
.popover-content { font-size: 13px; }
.tooltip { z-index: 4009; }
.tooltip-inner { background-color: #114D64; border-radius:0; }
.tooltip.top .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }
.tooltip.top-left .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }
.tooltip.top-right .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }
.tooltip.right .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }
.tooltip.left .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }
.tooltip.bottom .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }
.tooltip.bottom-left .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }
.tooltip.bottom-right .tooltip-arrow { border-top-color: #114D64; border-bottom-color: #114D64; }

/* summernote */
.note-editor .note-toolbar { padding: 0 0 5px 5px; }
.note-popover .popover .popover-content, .note-toolbar { padding: 0 0 5px 5px; }

/* Loading animasi */
.pace .pace-activity { top: -38px; left: 210px; }
.animasi-backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2100 !important;;
   background-color: rgba(0, 0, 0, 0.8);
   filter: alpha(opacity=80);
}
.animation-besar {
   position: fixed;
   top: 50%;
   width:100%;
   z-index: 99 !important;;
   text-align: center;
}
.animation-besar div {
   height:15px;
   width:8px;
   background-color: #00BFFF;
   display:inline-block;
   margin-right:4px;
   -webkit-animation: animation5-bar 1s infinite;
   animation: animation5-bar 1s infinite;
}
.animation-besar p { color: #fff; margin-top: 10px; margin-bottom: 0; }
.animation-besar .bar1 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.animation-besar .bar2 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.animation-besar .bar3 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.animation-besar .bar4 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.animation-besar .bar5 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
@-webkit-keyframes animation5-bar
{
   30% { -webkit-transform: scaleY(2); }
}
@keyframes animation5-bar
{
   30% { transform: scaleY(2); }
}

/* alert & warning */
.alert { padding: 8px 20px 8px 10px; color: #ddd; font-family: 'Roboto',Arial; font-size: 12px; border-radius: 0; position: fixed; z-index: 99; margin: 0; width: 290px; bottom: 20px; right: 20px; box-shadow: none; line-height: 1.42857143; }
.alert .fa { margin-top: 8px; font-size: 1.8em; }
.alert b { font-size: 16px; }
.alert .close { color: #fff; opacity: 1; top: -6px; right: -10px; font-size: 24px;  }
.alert-dismissable { padding-right: 30px; }
.alert-success { background-color: rgba(46, 139, 87, 0.8); color: #eee; border-color: transparent; }
.alert-danger { background-color: rgba(178, 34, 34, 0.8); color: #eee; border-color: transparent; }
.alert-warning { background-color: rgba(230, 149, 0, 0.8); color: #eee; border-color: transparent; }
.alert-info { background-color: rgba(29, 165, 158, 0.8); color: #eee; border-color: transparent; }
.alert { border-left: 4px solid #2f4050; }
.eror_404 { margin: 50px 0 70px; text-align: center; }
.eror_404 h1 { font-size: 80px; color: #CC0000; }
.eror_404 h1 i { font-size: 70px; color: #FF8C00; }
.btn-pemberitahuan { padding: 2px 18px 3px 4px; }
.btn-pemberitahuan .fa-2x { font-size: 1.8em; }
.panel-default>.panel-heading .btn-pemberitahuan>.badge { background-color: #FF0000; color: #fff; font-size: 10px; position: absolute; top: -1px; right: -1px; border-radius: 0; }

/* laporan */
.panel-laporan { background-color: #eee; }
.wrap-laporan { max-width: 1140px; max-height: 430px; overflow: auto; margin: 15px auto 10px; }
#laporan { background-color: #fff; font-family: Arial; color: #333; margin: 0 auto; border: 1px solid #bbb; border-bottom: 3px solid #bbb; border-right: 3px solid #bbb; }
.lap-a4-potrait { width: 21cm; padding: 1.5cm; }
.lap-a4-landscape { width: 29.7cm; padding: 1.5cm; }
.lap-legal-potrait { width: 21.6cm; padding: 1.5cm; }
.lap-legal-landscape { width: 35.5cm; padding: 1.5cm; }
#printarea h1 { font-size: 30px; margin: 0 0 15px; color: #333; font-weight: bold; }
#printarea h2 { font-size: 22px; margin: 0 0 8px; color: #333; font-weight: bold; }
#printarea h3 { font-size: 20px; margin: 0 0 6px; color: #333; font-weight: bold; }
#printarea h4 { font-size: 16px; margin: 0 0 4px; color: #333; font-weight: bold; }
#printarea h5 { font-size: 14px; margin: 0 0 4px; color: #333; font-weight: bold; }
#printarea hr { margin: 25px 0; border: 0; border-bottom: 1px solid #333; }
#printarea .laporan-head { position: relative; text-align: center; margin-bottom: 30px; }
#printarea .laporan-head img { float: left; width: 90px; position: absolute; left: 5px; }
#printarea .laporan-isi table { width: 100%; font-size: 12px; }
#printarea .laporan-isi table th { padding: 4px 6px; background-color: #eee; border: 1px solid #aaa; text-align: center; text-transform: uppercase; }
#printarea .laporan-isi table td { padding: 4px 6px; border: 1px solid #aaa; }
#printarea .laporan-isi table tr.no-heading th { font-size: 10px; padding: 2px; background-color: #ddd; }

/* footer ------------------------------------- */
.ke-atas { display: none; position: fixed; right: 15px; bottom: 0; margin: 0; padding: 2px 10px 8px; line-height: 1.6; background-color: #D2691E; color: #fff; text-align: center; }
.ke-atas:hover { background-color: #E27E36; color: #fff; }
.ke-atas .fa { font-size: 2em; }

/* responsif ---------------------------------- */
@media (min-width: 200px) {
   .modal-kecil { width: 95%; }
   .modal-sedang { width: 95%; }
   .modal-besar { width: 95%; }
}
@media (min-width: 480px) {
   .modal-kecil { width: 400px; }
   .modal-sedang { width: 96%; }
   .modal-besar { width: 96%; }
}
@media (min-width: 768px) {
   .modal-kecil { width: 400px; }
   .modal-sedang { width: 750px; }
   .modal-besar { width: 97%; }
   .modal-body { max-height: 470px; overflow-y: auto; padding-bottom: 15px; }
}
@media (min-width: 992px) {
   .modal-besar { width: 950px; }
}
@media (min-width: 1200px) {
   .modal-besar { width: 1150px; }
}