.body {
    -webkit-font-smoothing: antialiased;   /* lebih halus */
    -moz-osx-font-smoothing: grayscale;    /* untuk Firefox/macOS */
    text-rendering: optimizeLegibility;
    font-smooth: always;
}

.default-content-panel {
    background-color: rgba(255, 255, 255, 0.6);
    margin:30px 15px 30px 15px;
    padding:20px;
    border: 1px solid #ececeb;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.default-content-panel:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.top-bar {
    background-color: #152d8f;
}

.site-nav a {
    background-color: #152d8f !important;
}

.site-nav a:hover {
    background-color: #f1802d !important;
}

[grid-view] td {
    padding: 6px 5px 6px 5px !important;
    line-height: 17px !important;
}

.myTable > thead > tr > th {
    vertical-align: middle;
    background-color: #0d47a1;
    background-repeat: repeat-x;
    white-space: normal;
    text-transform: uppercase;
    color:
    #fafafa;
    font-size: 11px;
    line-height: 24px;
    min-height: 24px;
    font-weight: bold;
    -webkit-user-select: none;
    text-align: center;
    padding: 8px 0px;
    border: 1px solid #ddd;
    overflow: visible;
}

.myTable > tbody > tr > td {
    padding: 6px 5px 6px 5px !important;
    line-height: 25px !important;
    border: 1px solid #ddd;
    overflow: visible;
}

.myTable > tbody > tr:hover > td {
    background-color: #FFFFAA;
}

.fancyTab {
    text-align: center;
    padding: 15px 0;
    background-color: #eee;
    box-shadow: 0 0 0 1px #ddd;
    top: 15px;	
    transition: top .2s;
}

.fancyTab.active {
    top: 0;
    transition: top .2s;
}

.whiteBlock {
    display: none;
}

.fancyTab.active .whiteBlock {
    display: block;
    height: 2px;
    bottom: -2px;
    background-color: #fff;
    width: 99%;
    position: absolute;
    z-index: 1;
}

.fancyTab a {
    font-size: 1.25em;
    font-weight: 600;
    transition: .2s;
    color: #333;
}

.fancyTabs {
    border-bottom: 2px solid #ddd;
    margin: 15px 0 0;
}

li.fancyTab a {
    padding-top: 15px;
    top: -15px;
    padding-bottom: 0;
}

li.fancyTab.active a {
    padding-top: inherit;
}

.fancyTab .fa {
    font-size: 25px;
    width: 100%;
    padding: 15px 0 5px;
    color: #666;
}

.fancyTab.active .fa {
    color: #182d8f;
}

.fancyTab a:focus {
	outline: none;
}

.fancyTabContent {
    border-color: transparent;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 30px 15px 15px;
    position: relative;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
}

.fancyTabContent:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.nav-tabs > li.fancyTab.active > a, 
.nav-tabs > li.fancyTab.active > a:focus,
.nav-tabs > li.fancyTab.active > a:hover {
	border-width: 0;
}

.nav-tabs > li.fancyTab:hover {
	background-color: #f9f9f9;
	box-shadow: 0 0 0 1px #ddd;
}

.nav-tabs > li.fancyTab.active:hover {
    background-color: #fff;
    box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
}

.nav-tabs > li.fancyTab:hover a {
	border-color: transparent;
}

.nav.nav-tabs .fancyTab a[data-toggle="tab"] {
    background-color: transparent;
    border-bottom: 0;
}

.nav-tabs > li.fancyTab:hover a {
    border-right: 1px solid transparent;
}

.nav-tabs > li.fancyTab > a {
	margin-right: 0;
	border-top: 0;
    padding-bottom: 30px;
    margin-bottom: -30px;
}

.nav-tabs > li.fancyTab {
	margin-right: 0;
	margin-bottom: 0;
}

.nav-tabs > li.fancyTab:last-child a {
    border-right: 1px solid transparent;
}

.nav-tabs > li.fancyTab.active:last-child {
    border-right: 0px solid #ddd;
    box-shadow: 0px 2px 0 0px #fff, 0px 0px 0 1px #ddd;
}

.fancyTab:last-child {
    box-shadow: 0 0 0 1px #ddd;
}

.tabs .nav-tabs li.fancyTab.active a {
	box-shadow: none;
    top: 0;
}


.fancyTab.active {
    background: #fff;
    box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
    padding-bottom: 30px;
}

.arrow-down {
	display: none;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 22px solid #ddd;
    position: absolute;
    top: -1px;
    left: calc(50% - 20px);
}

.arrow-down-inner {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 12px solid #fff;
    position: absolute;
    top: -22px;
    left: -18px;
}

.fancyTab.active .arrow-down {
    display: block;
}

@media(max-width: 1200px) {
    .fancyTab .fa {
        font-size: 20px;
    }
    .fancyTab .hidden-xs {
        font-size: 16px;
    }	
}
	
	
@media(max-width: 768px) {
    .fancyTab > a {
        font-size: 18px;
    }
    .nav > li.fancyTab > a {
        padding: 15px 0;
        margin-bottom: inherit;
    }
    .fancyTab .fa {
        font-size: 30px;
    }
    .nav-tabs > li.fancyTab > a {
        border-right: 1px solid transparent;
        padding-bottom: 0;
    } 
    .fancyTab.active .fa {
        color: #333;
    }
}


 /* Modal Content */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 9999;
  overflow: auto;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 0px;
  background: #fff;
  min-width: 20%;
  max-width: 60%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 99999;
  border-radius: 6px;
}

.popup-lg {
  max-width: 90%;
}

.popup .header-red {
    min-height: 25px;
    padding: 10px 20px !important;
    color: white !important;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    background-color: #f1802d;
    border-bottom: 2px solid #ef7a2d;
}

.popup .header-green {
    background-color: #b71c1c;
    min-height: 30px;
    padding: 10px 20px !important;
    color: white !important;
}

.popup .content {
    padding: 20px;
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: black;
  filter: none;
  text-shadow: none;
}
.popup .close:hover {
  color: black;
  opacity: 0.8;
  filter: none;
  text-shadow: none;
}

.layout-flex-col {
    display:flex;
    flex-direction:column;
}

.layout-flex-row {
    display:flex;
    flex-direction:row;
}

.dashboard-text-lg {
    font-size: 2rem !important;
}

.dashboard-text-med {
    font-size: 1.5rem;    
}

.justify-between {
    justify-content:space-between;    
}

ol.lst {
    margin: 0;
    /* padding: 5px 0 5px 25px; */
    padding: 5px 0;
}

ul.lst {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}

li.lst, li.lst-number {
    display: flex;
    justify-content: space-between;
    align-items: start;
    word-break: break-word;
}

li.lst i, li.lst-number i {
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    text-align: center;
}

li.lst-number:before {
    counter-increment: section;
    content: attr(value) ".";
    /* position: absolute;
    margin-left: -26px; */
    word-break: keep-all;
    margin-right: 5px;
    min-width: 30px;
    text-align: center;
    text-decoration: var(--decoration);
}

li.lst .underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.label-inverse {
    background-color: #000;
    color: #fff;
}

.badge-success {
    background-color: #5cb85c;
}
.badge-info {
    background-color: #5bc0de;
}
.badge-warning {
    background-color: #f0ad4e;
}
.badge-danger {
    background-color: #d9534f;
}


/* dashboard */

.dashboard-card{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  padding: 14px 80px 18px 36px;
  cursor: pointer;
}

.dashboard-card:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.dashboard-card h3{
  font-weight: 600;
  font-size: 34pt;
  color: #013880;
}

.dashboard-danger {
    background-color: #c62828 !important;    
    color: white !important;    
}

.dashboard-danger h3 {
    color: white !important;    
}

.dashboard-success h3 {
    color: white !important;    
}

.dashboard-success {
    background-color: #43a047 !important;    
    color: white !important;    
}

.dashboard-success h3 {
    color: white !important;    
}

.dashboard-warning {
    background-color: #ffca28 !important;    
    color: white !important;    
}

.dashboard-warning h3 {
    color: white !important;    
}
/* Phone layout: long DropDownList labels wrap instead of being clipped. */
@media (max-width: 767px) {
    div[dropdown] .btn-dropdown-field { white-space: normal; }
    div[dropdown] .btn-dropdown-field .dropdown-text { display: block; padding-right: 16px; }
    div[dropdown] .dropdown-menu { max-width: 100%; }
    div[dropdown] .dropdown-menu li > a { white-space: normal; }
    /* Wide grids inside detail tabs scroll in place instead of shifting the whole page. */
    .fancyTabContent .tab-pane table { display: block; max-width: 100%; overflow-x: auto; }
    /* Long list-filter buttons wrap so the filter bar fits the screen. */
    .data-filter .btn { white-space: normal; max-width: 100%; text-align: left; }
    /* Filter options wrap to the next line instead of being clipped by the narrow button width. */
    .data-filter .dropdown-menu.open { min-width: 200px; max-width: 240px; }
    .data-filter .data-filter-dropdown { min-width: 0; width: 100%; }
    .data-filter .data-filter-dropdown > li > a { white-space: normal; overflow-wrap: anywhere; }
}

/* Desktop menu (>=1360px): admin/ketua menus are wide enough to push the user/logout/clock
   block below the fixed 45px top bar, where it overlaps page action buttons. Tighten the
   menu until the bar is wide enough for everything on one line. */
@media only screen and (min-width: 1360px) and (max-width: 1699px) {
    #desktop-menu .site-nav > li > a {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 14px !important;
    }
}
@media only screen and (min-width: 1360px) and (max-width: 1499px) {
    #desktop-menu .site-nav > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Saran AIRA di samping isian Hasil Verifikasi */
.aira-saran { position: relative; height: 0; }
.aira-saran > span { position: absolute; bottom: 9px; }
.aira-saran-toggle > span { left: calc(33.33% + 125px); }
.aira-saran-input > span { left: calc(75% + 6px); white-space: nowrap; }
.aira-saran-bawah { height: auto; margin: -6px 0 8px calc(33.33% + 10px); }
.aira-saran-bawah > span { position: static; }
.aira-saran-vertikal { height: auto; margin: -8px 0 12px 15px; }
.aira-saran-vertikal > span { position: static; }
.aira-chip { display: inline-block; padding: 3px 8px 3px 3px; border: 1px solid #bce8f1; border-radius: 3px; background: #d9edf7; color: #31708f; font-size: 12px; line-height: 16px; }
.aira-chip b { margin-right: 4px; padding: 0 5px; border-radius: 2px; background: #31708f; color: #fff; font-size: 10px; }
.aira-chip-kosong { border-color: #ddd; background: #f5f5f5; color: #777; }
.aira-chip-kosong b { background: #999; }
.aira-chip-bahaya { border-color: #ebccd1; background: #f2dede; color: #a94442; }
.aira-chip-bahaya b { background: #a94442; }
@media (max-width: 767px) {
    .aira-saran, .aira-saran-bawah, .aira-saran-vertikal { clear: both; height: auto; margin: 2px 0 10px; }
    .aira-saran > span { position: static; white-space: normal; }
}