/* Basic design */
a, a:hover, a:active, a:visited {text-decoration: none; color: inherit; cursor: pointer; }
.row {margin-left: 0px; margin-right: 0px;} 

/* Error page design */
.error-page {margin-top: 20px; text-align: center;}
.error-page>.error-content>h3{font-weight:700;font-size:30px}  

/* Header page design */
.header-area {position: fixed; top: 0px; left: 0px; right: 0px; display: block; z-index: 5; background-color: white;} 
.header-area .header-image {margin: 5px auto 5px 10px; height: 70px;}
.header-area .header-event {margin: 25px 15px auto auto;}
.menu-area {position: fixed; top: 80px; left: 0px; right: 0px; display: block; z-index: 5; height: 40px; color: white; background-color: #1C017F;}
.menu-area .menu-user .dropdown {margin-top: 5px; margin-right: 10px;}
.menu-area .menu-user .user-button {background-color: inherit; color: inherit; border: none;}
.menu-area .menu-user .user-options {display: none; position: absolute; padding: 5px; right: 0px !important; min-width: 120px; width: auto; border: 1px solid #DDD; border-radius: 8px; color: black; background-color: white; z-index: 5; font-size: 14px;}
.menu-area .menu-user .dropdown:hover .user-options {display: block;}
.menu-area .menu-user .loginfrm {width: 300px; padding: 2px;}
.menu-area .menu-user .loginfrm .user-title {display: inline-block; width: 80px; height: 35px;}
.menu-area .menu-user .loginfrm .user-separator {display: inline-block; width: 10px;}
.menu-area .menu-user .loginfrm .user-value {width: 205px;}
.menu-area .menu-user .loginfrm input[type=text], .menu-area .menu-user .loginfrm input[type=password], .menu-area .menu-user .loginfrm input[type=submit] {width: 100%; border: 1px solid #aaa; padding-left: 5px;}
.menu-area .menu-user .loginfrm input[type=submit] {border-radius: 5px; color: white; background-color: #1C017F;}
@media only screen and (max-width: 355px) {.header-area .header-event {display:none;}}
@media only screen and (max-width: 985px) {
  .header-area .header-image {height: 50px;}
  .header-area .header-event h3 {font-size: 1rem;}
  .menu-area {top: 60px;}}

/* Content Area design */
.content-area {margin-top: 120px; margin-bottom: 20px; min-height: 100px; width: 100%;z-index: 1;}
.content-area .infoTabel {font-size: 14px;}
@media only screen and (max-width: 985px) {
  .content-area {margin-top: 100px;}}

/* Footer page design */
.footer-area {position: fixed; display: block; height: 18px; background-color: #1C017F; left:0; right: 0; bottom: 0; padding: 1px 3px;}
.footer-text {color: white; font-size: 11px;}
@media only screen and (max-width: 985px) {
  .footer-area{height: 10px;}
  .footer-text {font-size: 8px;}}

/* Menu design - https://www.smartmenus.org */
.navbar.menu-top {position: fixed; background-color: #1C017F!important; padding: 0px; z-index: 3;}
.navbar-dark .navbar-nav .nav-link {color: white!important; background-color: #1C017F;}  
.navbar.menu-top .nav-item .nav-link {padding-left: 10px;}
.navbar.menu-top .nav-item .nav-link.highlighted, .navbar.menu-top .nav-item .nav-link:hover, .navbar.menu-top .nav-item .nav-link:focus {color: white; background-color: #647F01;} 
.navbar.menu-top .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus {color: white; background-color: #647F01;}
.navbar-nav.sm-collapsible .sub-arrow {position: absolute; top: 20px; right: 3px; margin: -0.7em 0.5em 0 0; border: 1px solid white; border-radius: 10px; padding: 0; width: 20px; height: 20px; font-size: 14px; line-height: 1.2em; text-align: center;}
.navbar-nav.sm-collapsible .sub-arrow::before {content: '+';}
.navbar-nav.sm-collapsible .show > a > .sub-arrow::before {content: '-';}
.navbar-dark .navbar-nav.sm-collapsible .nav-link .sub-arrow {border-color: rgba(255, 255, 255, .1);}
.navbar-nav.sm-collapsible .has-submenu {padding-right: 3em;}
.navbar-nav.sm-collapsible .nav-link, .navbar-nav.sm-collapsible .dropdown-item {position: relative;}
.navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow {display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: .255em; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent;}
@media only screen and (max-width: 985px) {.navbar.menu-top .nav-item {border-bottom: 1px solid #aaa;}}

/* Table Form design https://www.datatables.net/manual/styling/theme-creator */
.dataTables_wrapper {position: relative; margin-top: 15px; clear: both; zoom: 1;}
.dataTables_wrapper .dataTables_filter {font-size: 14px; float:right;}
table.dataTable {width: 100%;  clear: both; border-collapse: separate; border-spacing: 0; font-size: 14px; margin-top: 0px !important; border-top: 1px solid #111111; border-bottom: 1px solid #111111;}
table.dataTable thead th {font-weight: bold; text-align: center;}
table.dataTable thead th {padding: 2px 18px; border-bottom: 1px solid #111111;}
table.dataTable tfoot td {padding: 2px; border-top: 1px solid #111111;}
table.dataTable thead th:active, table.dataTable thead td:active {outline: none;}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {cursor: pointer; background-repeat: no-repeat; background-position: center right;}
table.dataTable thead tr th.sorting {padding-left: 0px; padding-right: 0px;}
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after {content: '';}
table.dataTable thead .sorting {background-image: url("../images/sort/sort_both.png");}
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after {content: '';}
table.dataTable thead .sorting_asc {background-image: url("../images/sort/sort_asc.png");}
table.dataTable thead .sorting_desc:before,  table.dataTable thead .sorting_desc:after {content:  '';}
table.dataTable thead .sorting_desc {background-image: url("../images/sort/sort_desc.png");}
table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after {content: '';}
table.dataTable thead .sorting_asc_disabled {background-image: url("../images/sort/sort_asc_disabled.png");}
table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {content: '';}
table.dataTable thead .sorting_desc_disabled {background-image: url("../images/sort/sort_desc_disabled.png");}
table.dataTable tbody th, table.dataTable tbody td {padding: 2px 0px;}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {background-color: #eee; }
table.dataTable tbody tr.even:hover, table.dataTable tbody tr.odd:hover {background-color: #bbb!important; cursor: pointer;}
table.dataTable tbody tr .btn {padding: 0px; font-size: 0.8rem;}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate a{font-size: 14px; color: black;}
div.dataTables_wrapper div.dataTables_info {clear: both; float: left; padding-top: 0em;}
div.dataTables_wrapper div.dataTables_paginate {float: right; text-align: right; padding-top: 0em; margin-bottom: 20px;}
.kolStatus {width: 110px!important; padding-left: 0px!important; padding-right: 0px!important; text-align: center!important;}
.kolView, .kolEdit, .kolDelete {width: 20px!important; padding:0px 3px!important; text-align: center!important;}
@media only screen and (max-width: 420px) {
  table.dataTable {font-size: 11px;}
  .dataTables_wrapper .dataTables_info  {display: none;}
  .dataTables_wrapper .dataTables_paginate a, .dataTables_wrapper .dataTables_filter {font-size: 11px;}}

.tabelMenu .kol2, .tabelMenu .kol3, .tabelMenu .kol4, .tabelMenu .kol5, .tabelMenu .kol6, .tabelMenu .kol7,
.tabelMenu .kol8, .tabelMenu .kol9 {width:30px!important; padding-left:0px; padding-right:0px;}
.tabelPengguna .kol2, .tabelPengguna .kol3, .tabelPengguna .kol4, .tabelPengguna .kol5, .tabelPengguna .kol6, .tabelPengguna .kol7,
.tabelPengguna .kol8, .tabelPengguna .kol9 {width:30px!important; padding-left:0px; padding-right:0px;}
.tabelKerja .kol1 {width: 65px!important; text-align: center;}
.tabelPeserta .kol2, .tabelPeserta .kol3 {padding-left: 3px; padding-right: 3px; text-align: center;}
.tabelIkut .batal {color: white; background-color: red;}
.tabelJumlah td.kol2, .tabelJumlah .kol3, .tabelJumlah .kol4, .tabelJumlah .kol5, .tabelJumlah .kol6, .tabelJumlah .kol7,
.tabelJumlah .kol8, .tabelJumlah .kol9 {width: 50px; text-align: center;}

/* Modal design */
.modal {font-size: 14px;}
.modal-header {padding: 5px 5px; background-color: aliceblue; height: 35px;}
.modal-footer {padding: 7px 5px; background-color: aliceblue; height: 42px;}
.modal-header .header-title {padding: 2px 0px; font-size: 14px;}
.modal-footer .btn {font-size:13px; color: white; background-color: #1C017F; border-color: #1C017F; padding: 0px 5px; height: 28px;}
.modal-body {margin: 0px 5px; padding-left:3px; padding-right: 3px;}
.modal-body .row {padding: 5px 0px;}
.modal-body .table-header, .modal-body .table-separator, .modal-body .table-value {display: inline-block; vertical-align: top; margin-top: 0px;}
.modal-body .table-separator {width: 10px; text-align: left;}
.modal-body .table-value input[type=text], .modal-body .table-value textarea, .modal-body .table-value select {width: 100%; font-size: 14px;}
.modal-body .table-value textarea {height: 100%;}
.modal-body .table-value img {border: 1px solid #ddd;}

.batch-Header {width: 100px;} .batch-Content {width:300px;}
.jenis-Header {width: 130px;} .jenis-Content {width:300px;}
.user-Header {width: 145px;} .user-Content {width:350px;} .pilihCheck{display: inline-block; width: 150px;}
.angkatan-Header {width: 130px;} .angkatan-Content {width:360px;} .pilihAngkatan{display: inline-block; width: 120px;}
.menu-Header {width: 85px;} .menu-Content {width:350px;} .pilihCheck{display: inline-block; width: 150px;}
.kerja-Header {width: 115px;} .kerja-Content {width:300px;}
.vaksin-Header {width: 150px;} .vaksin-Content {width:300px;}
.medis-Header {width: 110px;} .medis-Content {width:300px;}



@media only screen and (max-width: 425px) {
  
    .modal-body .table-header, .modal-body .table-value {display: block;} .modal-body .table-separator {display: none;}

}







/* Page Design */
.page-header {padding: 6px 8px 6px 8px; border-bottom: 1px solid #ccc;}
.page-header .page-judul {display: inline-block; font-size:24px;}
.page-header .page-tombol {float: right;}
.page-header .page-tombol button {margin-left: 8px; color: white; background-color: #1C017F; border-color: #1C017F;}
.page-content {padding: 0px 8px 20px 8px;}
@media only screen and (max-width: 985px) {
  .page-header {height: 43px;}
  .page-header .page-judul {font-size: 15px; margin-top: 3px;}
  .page-header .page-tombol button {font-size: 12px;}}   

/* Main User Page Design */
.userPage {background: url('../images/mainbg.jpeg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 600px; padding-top:50px;} 
.userActivity {margin-left: auto; margin-right: auto; padding: 10px; width: 1030px; border: 2px solid #bbb;}
.userData {display: inline-block; font-size:14px;}
.userData .activityHeader{font-size: 16px; font-weight: bold; margin-bottom: 8px;}
.userData .userItem {display: inline-block; background-color: white; padding: 5px; width: 270px;}
.userData input[type=text] {width:100%; padding-left: 5px; padding-right: 5px; border:1px solid #aaa;}
.userData .userNomorTitle, .userData .userKontakTitle, .userData .userRahasiaTitle {height: 45px;}
.userData .userRahasiaTitle #kodeUser {font-family: Monaco, Consolas; font-size:18px;}
.userData .btnCheck {width: 100%; margin-top: 5px; }
.userRegister {float: right; font-size: 14px;}
.userRegister .btnRegister {width: 180px; height: 155px;}
@media only screen and (max-width: 985px) {
  .userActivity {width: 95%;}
  .userData {width: 100%;}
  .userData .userItem {width: 100%;}
  .userData .userNomorTitle, .userData .userKontakTitle, .userData .userRahasiaTitle {height:unset; padding-bottom: 5px;}
  .userData .userNomorValue, .userData .userKontakValue, .userData .userRahasiaValue {padding-bottom: 10px;}
  .userData .btnCheck {width: 100%; margin-top: 10px; margin-bottom: 15px;}
  .userRegister {float: none; width: 100%; }
  .userRegister .btnRegister {width: 100%; height: 38px;}}

/* Form Pendaftaran Peserta */
.frmDaftar {background: url('../images/mainbg.jpeg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 600px; padding-top: 10px; padding-bottom: 20px;} 
.frmDaftar .registerArea {width: 1000px; margin-left:auto; margin-right: auto; background-color: white; border: 1px solid black; border-radius: 10px;}
.frmDaftar .registerArea .maxArea {padding-left: 0px; padding-right: 0px;}
.reg-group .itemTitle, .reg-group .itemSeparator, .reg-group .itemValue {display: inline-block;padding-top:5px; padding-bottom:5px;}
.reg-group .itemTitle {width: 20%;} .reg-group .itemSeparator {width: 10px;} .reg-group .itemValue {width: 78%;}
.reg-group .itemTitle, .reg-group .itemSeparator {vertical-align: top;}
.reg-group .itemValue input[type=text] {width: 100%; padding-left: 10px; padding-right: 10px; border: 1px solid #aaa;}
.reg-group .itemValue #txtRT, .reg-group .itemValue #txtRW {width: 100px;}
.reg-group .itemValue #txtJenis {margin-top: 10px;}
.reg-group .itemPersetujuan {display: inline-block; margin-top: 10px; width: 86%; font-size: 13px;}
.reg-group .itemKirim {display: inline-block; margin-top: 10px; width: 13%; vertical-align: top; text-align: right;}
@media only screen and (max-width: 985px) {
  .frmDaftar .registerArea {width: 100%;}
  .reg-group .itemTitle, .reg-group .itemValue, .reg-group .itemPersetujuan, .reg-group .itemKirim {display: block; width: 100%; padding-top:5px; padding-bottom:0px;}
  .reg-group .itemSeparator {display: none;} .reg-group .itemValue {margin-bottom: 15px;}
  .reg-group .itemValue input[type=text] {padding-left: 5px; padding-right: 5px;}
  .reg-group .itemPersetujuan {font-size: 12px;}
  .reg-group .itemKirim .btnSave {width: 100%;}} 


/* Syarat & Ketentuan Peserta */
.frmAturan {padding-top:20px; width: 1024px; padding-bottom: 20px; margin-left: auto; margin-right: auto;}
.frmAturan li {margin-top: 10px;}
.frmAturan .penting {font-size: 1.85rem; font-weight: bold; display: inline;}
.frmAturan .persetujuan {width: 75%; display: inline-block; vertical-align: top; font-size: 14px;}
.frmAturan .tombol {width: 24%; display: inline-block; vertical-align: top;}
.frmAturan .tombol button {width: 100%; margin-bottom: 10px; display: block;}
@media only screen and (max-width: 985px) {
  .frmAturan {width: 98%; margin-left: auto; margin-right: auto;}
  .frmAturan .penting {font-size: 1.85rem; font-weight: bold; display: inline;}
  .frmAturan h4 {font-size: 1.2rem;}
  .frmAturan .setujuArea {width:98%;}
  .frmAturan .penting {font-size: 1.5rem;}
  .frmAturan .persetujuan, .frmAturan .tombol {width: 100%; margin-left: 10px; margin-right: 20px; display: block;}
  .frmAturan .tombol {margin-top: 15px;}}

/* Form Tiket Peserta */
.formTiket {background: url('../images/mainbg.jpeg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 600px; padding-top: 20px; padding-bottom: 20px;} 
.frmTiket {width: 871px; margin-left: auto; margin-right: auto;}
.frmTiket .tiketArea {padding-bottom: 10px; border-bottom: 1px solid #888;}
.frmTiket .tiketQR, .frmTiket .tiketData {display: inline-block;}
.frmTiket .tiketQR {margin-top: 10px; width:250px; height:250px; border: 1px solid #888;}
.frmTiket .tiketQR .imgQR {width: 250px; height: 250px;}
.frmTiket .tiketData {margin-left: 10px; padding-top: 10px; width: 590px; font-size: 17px; vertical-align: top;}
.frmTiket .tiketData .tiketTitle, .frmTiket .tiketData .tiketSeparator,.frmTiket .tiketData .tiketValue {display: inline-block; margin-bottom: 8px;}
.frmTiket .tiketData .tiketTitle {width: 140px;} .frmTiket .tiketData .tiketSeparator {width: 10px;}
.frmTiket .tiketData .tiketValue {font-family: Monaco, Consolas;}
.frmTiket .tiketData .tiketValue .errorArea {display: inline-block; padding: 0px 10px; color: white; background-color: red;}
.frmTiket .tiketData .tiketValue li {margin-bottom: 8px;}
.frmTiket .tiketData .tiketValue .unduh {padding: 0px 8px; display: inline; color: white; background-color: red;}
@media only screen and (max-width: 985px) {
  .frmTiket {width: 100%;}
  .frmTiket .tiketQR {display: block; margin-top: 10px; margin-left:auto; margin-right:auto;}
  .frmTiket .tiketData {float: none; margin-top: 15px; width: 100%; font-size: 13px;}
  .frmTiket .tiketData .tiketTitle,.frmTiket .tiketData .tiketValue {display: block; width: 100%; margin-bottom: 5px;}
  .frmTiket .tiketData .tiketSeparator {display: none;}
  .frmTiket .tiketData .tiketValue {margin-bottom: 10px; font-size: 16px;}
  .frmTiket .tiketData {text-align: center;}}    

/* Dashboard Management */
.dashItem {margin-top: 20px; padding: 6px 8px 6px 8px; border-bottom: 1px solid #ccc;}
.dashItem .itemTitle {display: inline-block; font-size:20px;}
.tabelAcara .kol2, .tabelAcara .kol3, .tabelAcara .kol4, .tabelAcara .kol5, .tabelAcara .kol6, .tabelAcara .kol7,
.tabelAcara .kol8, .tabelAcara .kol9, .tabelAcara .kol10, .tabelAcara .kol11 {width: 70px!important; text-align: center;}
.tabelRPeserta .kol2, .tabelRPeserta .kol3, .tabelRPeserta .kol4, .tabelRPeserta .kol5 {text-align: center;}

/* Jadwal Kegiatan Management */
.batchForm {margin-top: 10px; padding-left: 0; padding-right: 0; padding-bottom: 5px; border-bottom: 1px solid #ccc;}
.batchForm .batchRow {margin-bottom: 12px;}
.batchForm .batch-Header {width: 180px;}
.batchForm .batch-Separator {width: 15px;}
.batchForm .batch-Value {width: 400px;}
.batchList {margin-top: 20px;}
.batchList #aktif, .batchList #pasif {max-width: none!important;}
.batchList #aktif .kol2, .batchList #pasif .kol2 {width: 200px; text-align: center;}

/* Jenis Peserta Management */
.frmJenisPeserta {margin-top:10px; padding-left:0px; padding-right: 0px;}
.frmJenisPeserta #aktif, .frmJenisPeserta #pasif {max-width: none!important;}

/* Data Peserta Management */
.selectorPeserta {margin-top: 10px; padding-bottom: 15px; border-bottom: 1px solid #ccc;}
.selectorPeserta .selectKelompok, .selectorPeserta .selectHuruf {display:inline-block; vertical-align: top;}
.selectorPeserta .selectHuruf .hurufArea {display: inline-block; min-width: 31px;}
.selectorPeserta .selectHuruf .btnHuruf {border: 1px solid #ddd; margin-left: 5px; padding:5px; padding-top:0px; padding-bottom:0px;}
.selectorPeserta .selectHuruf .btnHuruf.active {color: white; background-color: #1C017F;}
.dataPeserta .pesertaList {display: inline-block; margin-top: 10px; width: 450px}
.dataPeserta .pesertaList .areaCari {margin-top:15px;}
.dataPeserta .pesertaList .areaCari #btnCari {color: white; background-color: #1C017F; border: 1px solid #ccc; margin-left: 8px;}
.dataPeserta .pesertaList #normal, .dataPeserta .pesertaList #singkat {padding-left: 0px; padding-right: 0px;}
.dataPeserta .pesertaList #singkat .tabelPeserta1 {width: 100%!important;}
.dataPeserta .tabularArea {float: right; margin-top: 10px; margin-bottom: 25px; width: 950px;}
.dataPeserta .tabularArea .container {max-width: none; padding-left:5px; padding-right: 0px;}
.dataPeserta .tabularArea .pesertaPersonal {margin-top: 10px;}
.dataPeserta .tabularArea .vaksinStatus {float: right; z-index: 2;}
.dataPeserta .tabularArea .vaksinStatus .vaksin1, .dataPeserta .tabularArea .vaksinStatus .vaksin2 {display: inline-block; border: 1px solid #666;}
.dataPeserta .tabularArea .vaksinStatus .vaksin1 .vaksin1Title, .dataPeserta .tabularArea .vaksinStatus .vaksin2 .vaksin2Title {display: inline-block; height: 34px; width: 80px; padding-left: 10px; padding-top: 5px;}
.dataPeserta .tabularArea .vaksinStatus .vaksin1 .vaksin1Status, .dataPeserta .tabularArea .vaksinStatus .vaksin2 .vaksin2Status {display: inline-block; height: 34px; width: 45px; padding-top: 5px; text-align: center;}
.dataPeserta .pesertaItem {width: 100%; margin-bottom: 8px;}
.dataPeserta .pesertaItem .itemTitle, .dataPeserta .pesertaItem .itemSeparator, .dataPeserta .pesertaItem .itemValue {display: inline-block; vertical-align: top;}
.dataPeserta .pesertaItem .itemTitle {width: 180px;}
.dataPeserta .pesertaItem .itemSeparator {width: 15px;}
.dataPeserta .pesertaItem .itemValue {width: 736px; vertical-align: top;}
.dataPeserta .pesertaItem .itemValue input[type=text], .itemValue textarea {width: 100%;}
.dataPeserta .pesertaItem .itemValue #txtRT, .dataPeserta .pesertaItem .itemValue #txtRW {width: 100px;}
.dataPeserta .tabelVaksin .kol1, .dataPeserta .tabelVaksin .kol2, .dataPeserta .tabelVaksin .kol3, .dataPeserta .tabelVaksin .kol4,
.dataPeserta .tabelVaksin .kol5, .dataPeserta .tabelVaksin .kol6 {text-align: center;} 
@media only screen and (max-width: 985px) {
  .dataPeserta .pesertaList, .dataPeserta .tabularArea {display: block;}
  .dataPeserta .pesertaItem .itemTitle, .dataPeserta .pesertaItem .itemValue {display: block; width: 100%;}
  .dataPeserta .pesertaItem .itemSeparator {display: none;}
  .dataPeserta .pesertaItem .itemValue {padding-bottom: 8px;}}

/* Alokasi Jadwal Peserta */
.frmJadwalHead {width: 100%; padding-left: 10px; padding-right: 10px;}
.frmJadwalContent {width: 100%; padding: 10px 10px 50px 10px;}
.frmJadwalContent button {float:right; color: white; background-color: #1C017F; border-color: #1C017F;}
.frmJadwalContent .jadwalAcara {padding-bottom: 5px; margin-bottom:10px; border-bottom: 1px solid #ccc;}
.frmJadwalContent .sumberData, .frmJadwalContent .hasilData {display: inline-block; border: 1px solid #ccc; border-radius: 8px; padding-top: 10px; padding-left: 10px; padding-right: 10px; width: 49.5%;}
.frmJadwalContent .sumberData .dataTables_paginate, .frmJadwalContent .hasilData .dataTables_paginate {margin-bottom: 10px;}
.frmJadwalContent .hasilData {float: right;}
.frmJadwalContent .sumberData .tabelSumber .kol1, .frmJadwalContent .hasilData .tabelUndangan .kol1 {width: 30px!important; padding: 0px; text-align: center;}
.frmJadwalContent .sumberData .tabelSumber .kol3, .frmJadwalContent .hasilData .tabelUndangan .kol3 {width: 120px!important; padding: 0px; text-align: center;}
.frmJadwalContent .sumberData .tabelSumber .kol4, .frmJadwalContent .sumberData .tabelSumber .kol5 {width: 75px!important; padding: 0px; text-align: center;}
.frmJadwalContent .hasilData #tabelUndangan .batal {color: white; background-color: red;}

/* Rekapitulasi Posisi Peserta */
.frmRekap {width: 100%;}
.frmRekap .areaJadwalAktif, .frmRekap .areaRekapData {border: 1px solid #bbb; width: 100%; margin-top: 10px;}
.frmRekap .areaJadwalAktif .jadwalTitle, .frmRekap .areaRekapData .rekapTitle {border-bottom: 1px solid #bbb; color: white; background-color: #7F1C01; padding: 8px;}
.frmRekap .areaJadwalAktif .jadwalData, .frmRekap .areaRekapData .rekapData {padding: 8px;}
.frmRekap .areaJadwalAktif .jadwalData .jadwalItem {display: inline-block; width: 33%; margin-bottom: 8px;}

* Pos Administrasi Peserta */
.frmAdmHead {width: 940px; padding-top: 20px; margin: 20px auto 10px auto;}
.frmAdmCnt {width: 940px; margin: 15px auto 20px auto; padding: 0;}
.frmAdmCnt .maxArea {width: 100%; padding-left: 0; padding-right: 0;}
.frmAdmCnt .videoArea, .frmAdmCnt .personArea {display: inline-block; vertical-align: top;}
.frmAdmCnt .videoArea {width: 320px;} .frmAdmCnt .personArea {margin-left: 20px; width: 595px;}
.frmAdmCnt .videoArea #preview {border: 1px solid #aaa;}
.frmAdmCnt .personArea .personHeader {font-size: 20px; font-weight: 600; margin-bottom: 15px;}
.frmAdmCnt .personArea .vaksinStatus {float: right; z-index: 2;}
.frmAdmCnt .personArea .vaksinStatus .vaksin0, .frmAdmCnt .personArea .vaksinStatus .vaksin1, .frmAdmCnt .personArea .vaksinStatus .vaksin2 {display: inline-block; border: 1px solid #666;}
.frmAdmCnt .personArea .vaksinStatus .vaksin1 .vaksin1Title, .frmAdmCnt .personArea .vaksinStatus .vaksin2 .vaksin2Title {display: inline-block; height: 36px; width: 75px; padding-left: 10px; padding-top: 5px;}
.frmAdmCnt .personArea .vaksinStatus .vaksin0 .vaksin0Status, .frmAdmCnt .personArea .vaksinStatus .vaksin1 .vaksin1Status, .frmAdmCnt .personArea .vaksinStatus .vaksin2 .vaksin2Status {display: inline-block; height: 36px; width: 40px; padding-top: 5px; text-align: center;}
.frmAdmCnt .personArea .vaksinStatus .vaksin0 .vaksin0Status {width: 110px;}
.frmAdmCnt .personArea .vaksinStatus .vaksin0 .vaksin0Status.remaja {color: black; background-color: #2b9eff;}
.frmAdmCnt .personArea .vaksinStatus .vaksin0 .vaksin0Status.umum {color: white; background-color: #888888;}
.frmAdmCnt .personArea .vaksinStatus .vaksin0 .vaksin0Status.register {color: white; background-color: red;}

.frmAdmCnt .personArea .personItem {margin-top: 5px; margin-bottom: 10px;}
.frmAdmCnt .personItem .personTitle, .frmAdmCnt .personItem .personSeparator, .frmAdmCnt .personItem .personValue {display: inline-block;}
.frmAdmCnt .personItem .personTitle {width:135px;}
.frmAdmCnt .personItem .personSeparator {width: 10px;}
.frmAdmCnt .personItem .personValue {width: 440px;}
.frmAdmCnt .personItem .personValue input, .frmAdmCnt .personItem .personValue .imgNegara, .frmAdmCnt .personItem .personValue .imgPropinsi,
.frmAdmCnt .personItem .personValue .imgKabupaten, .frmAdmCnt .personItem .personValue .imgKecamatan, .frmAdmCnt .personItem .personValue .imgKelurahan {display: inline-block;} 
.frmAdmCnt .personItem .personValue input[type=text] {width: 100%; border: 1px solid #ccc;}
.frmAdmCnt .personItem .personValue #txtRT, .frmAdmCnt .personItem .personValue #txtRW {width: 100px;}
.frmAdmCnt .personSimpan {padding-top: 15px;}
.frmAdmCnt .btnSimpan {width: 100%; color: white; background-color: #1C017F; border-color: #1C017F;}

/* Medis & Vaksin */
.frmMedis {width: 1100px; padding-top: 5px; padding-left: 0px; padding-right: 0px; margin: 10px auto 10px auto;}
.frmMedis .page-content {padding-left: 0px; padding-right: 0px;}
.frmMedis .videoArea, .frmMedis .medisArea {display: inline-block; margin-top: 5px; vertical-align: top;}
.frmMedis .videoArea {width: 370px; height: 284px;}
.frmMedis .videoArea #preview {width: 100%; border: 1px solid #aaa;}
.frmMedis .videoArea .personTitle, .frmMedis .videoArea .personValue {display: inline-block;}
.frmMedis .videoArea .personTitle {width: 25px;}
.frmMedis .medisArea {width: 715px; margin-left: 15px;}
.frmMedis .medisArea .medisItem {margin-top: 6px; margin-bottom: 6px;}
.frmMedis .medisArea .medisHeader {font-size: 20px; font-weight: 600; margin-bottom:10px;}
.frmMedis .medisArea .medisTitle, .frmMedis .medisArea .medisSeparator, .frmMedis .medisArea .medisValue {display: inline-block;}
.frmMedis .medisArea .medisTitle {width: 120px;} .frmMedis .medisArea .medisSeparator {width: 10px;}
.frmMedis .medisArea .medisValue input[type=text] {display: inline-block; width:180px; border: 1px solid #ccc;}
.frmMedis .medisArea .vaksinItem {margin-top: 6px; margin-bottom: 6px;}
.frmMedis .medisArea .vaksinHeader {font-size: 20px; font-weight: 600; margin-bottom:10px;}
.frmMedis .medisArea .vaksinTitle, .frmMedis .medisArea .vaksinSeparator, .frmMedis .medisArea .vaksinValue, .frmMedis .medisArea .vaksinValue2, .frmMedis .medisArea .vaksinValue3 {display: inline-block;}
.frmMedis .medisArea .vaksinTitle {width: 120px;} .frmMedis .medisArea .vaksinSeparator {width: 10px;}
.frmMedis .medisArea .vaksinValue2 {width: 210px;} .frmMedis .medisArea .vaksinValue3 {width: 350px; background-color: yellow;}
.frmMedis .medisArea .vaksinValue input[type=text],
.frmMedis .medisArea .vaksinValue2 input[type=text],
.frmMedis .medisArea .vaksinValue3 input[type=text]  {display: inline-block; width:100%; border: 1px solid #ccc;}
.frmMedis .medisArea .vaksinStatus {float: right; z-index: 2;}
.frmMedis .medisArea .vaksinStatus .vaksin1, .frmMedis .medisArea .vaksinStatus .vaksin2 {display: inline-block; border: 1px solid #666;}
.frmMedis .medisArea .vaksinStatus .vaksin1 .vaksin1Title, .frmMedis .medisArea .vaksinStatus .vaksin2 .vaksin2Title {display: inline-block; height: 36px; width: 80px; padding-left: 10px; padding-top: 5px;}
.frmMedis .medisArea .vaksinStatus .vaksin1 .vaksin1Status, .frmMedis .medisArea .vaksinStatus .vaksin2 .vaksin2Status {display: inline-block; height: 36px; width: 45px; padding-top: 5px; text-align: center;}

/* Laporan & monitoring Vaksinasi */
.frmReport .page-content {margin-top: 15px; width:none;}
.frmMonitor .page-content {margin-top: 15px; width:none;} 
.frmMonitor .eventArea {float: right;}
.frmMonitor .eventData .container {max-width:none; padding-left: 5px; padding-right: 50x;}
.tabelMonitor .kol4, .tabelMonitor .kol5, .tabelMonitor .kol6, .tabelMonitor .kol8, .tabelMonitor .kol9 {text-align: center;}
.medis-Header {width: 110px;} .medis-Content {width:700px; display:inline;} 
.medis-Header2 {margin-right: 5px;} .medis-Content2 {width:298px; display:inline;}  

.frmMonitor .eventData .card-area {width: 180px; margin-top: 10px; margin-right: 15px; padding: 10px; border: 1px solid #DDD; border-radius: 10px;}
.frmMonitor .eventData .card-title {color: #0022FF; text-transform: uppercase; font-weight: 700;}