@font-face {
   font-family: "Days One";
   font-style: normal;
   font-weight: 150;
   font-display: swap;
   src: url(../font/mem9YaCnxnKRiYZOCIYScrg.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
   U+FEFF, U+FFFD;
}

.zen-dots-regular {
   font-family: "Zen Dots", sans-serif;
   font-weight: 400;
   font-style: normal;
}

.daysOne {
   font-family: "Days One", sans-serif;
}

body {
   background-image: url(../images/bg.png);
   background-repeat: repeat-x;
   background-attachment: fixed;
   overflow-x: hidden !important;
}

.scrollArea {
   display: flex;
   justify-content: start;
   width: 100%;
   overflow-x: auto;
   font-family:Calibri, Tahoma;
   font-size:12px;
   height: calc(100vh - 230px)
}

.tableArea {
   display: flex;
   justify-content: start;
   width: 100%;
   overflow-x: auto;
   font-family:Calibri, Tahoma;
   font-size:14px;
   height: calc(100vh - 180px);
}

thead {
   position: sticky;
   z-index: 2;
   top: 0;
}

.bg-body {
   background-image: url(../images/bg.png);
   background-repeat: repeat-x;
   background-attachment: fixed;
}

.bg-latar {
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-image: radial-gradient(
      circle at 30% 86%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 8%,
      transparent 8%,
      transparent 92%
   ),
   radial-gradient(
      circle at 55% 100%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 8%,
      transparent 8%,
      transparent 92%
   ),
   radial-gradient(
      circle at 40% 75%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 6%,
      transparent 6%,
      transparent 94%
   ),
   radial-gradient(
      circle at 7% 99%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 6%,
      transparent 6%,
      transparent 94%
   ),
   radial-gradient(
      circle at 69% 76%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 6%,
      transparent 6%,
      transparent 94%
   ),
   radial-gradient(
      circle at 2% 35%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 6%,
      transparent 6%,
      transparent 94%
   ),
   radial-gradient(
      circle at 14% 48%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 6%,
      transparent 6%,
      transparent 94%
   ),
   radial-gradient(
      circle at 28% 87%,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.04) 4%,
      transparent 4%,
      transparent 96%
   ),
   radial-gradient(
      circle at 65% 14%,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.04) 4%,
      transparent 4%,
      transparent 96%
   ),
   radial-gradient(
      circle at 51% 36%,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.04) 4%,
      transparent 4%,
      transparent 96%
   ),
   radial-gradient(
      circle at 6% 93%,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.04) 4%,
      transparent 4%,
      transparent 96%
   ),
   linear-gradient(135deg, #17e9ad, #3D52A0);/* #1d18d0 */
}

.bg-header{
   background-color: #27B8EF;
   color: white;
}

.logoKota {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: url(../images/bg-logo-50.png) center center no-repeat;
   opacity: 0.2;
}

.aos-init[data-aos].aos-animate {
   transform: unset;
}

.imgFrame {
   height: 82vh;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   padding: 0 !important;
   margin: 0 !important;
}

.polkadot {
   position: absolute;
   width: 100%;
}

.circles {
   display: block;
   width: 20px;
   height: 20px;
   background: #fff;
   border-radius: 50%;
   position: absolute;
   opacity: 0.5;
   z-index: 15;
}

/* set the width and height of your scrollbar */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
   background-color:white;
}

/*style the track of your scrollbar*/
::-webkit-scrollbar-track {
   border-radius: 10px;
   background-color: white;
}

/*change background color of your scrollbar on hover*/
::-webkit-scrollbar:hover {
   background-color: white;
} 

/*style the thumb of your scrollbar*/
::-webkit-scrollbar-thumb {
   background: #e3e3e3;
}

#main-page {
   margin-top: 80px;
   min-height: 30vh;
}

.sticky-top {
   position: sticky;
   top: 59px;
}

@media print {
   body {
		margin: 0 !important;
      padding: 0 !important;
		box-shadow: 0 !important;
      min-width: 992px !important;
		font-size: 12px;
	}
   #main-page {
      min-width: 992px !important;
      margin-top: 0px !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
      margin-left: 0px !important;
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      padding-left: 5px !important;
      padding-right: 5px !important;
   }
   .container {
      min-width: 992px !important;
      margin-top: 0px !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
      margin-left: 0px !important;
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      padding-left: 5px !important;
      padding-right: 5px !important;
   }
   table {
      page-break-inside:auto !important;
   }
   table, tr, th, td {
      border: 1px solid;
   }
   
   tr {
      page-break-inside: avoid;
      page-break-after: auto;
   }
   .printHeader {
      position: fixed;
      top: 0;
      right: 0;
   }
   
}

#page-preloader {
   position: fixed;
   bottom: 50%;
   right: 46%;
   z-index: 50;
}

#grafis-loader {
   position: relative;
   z-index: 50;
}

.hidden{
   display:none !important;
}

.btn-primary {
   background-color: #3D52A0;
   border-style: none;
}

.bg-tombolcari {
   background-color: #3D52A0;
}

.bayangan {
   box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}

#tombol-bawah {
   position: fixed;
   opacity: 0;
   visibility: hidden;
   z-index: 2;
   bottom: -2px;
   transition: all 0.5s ease-in-out;
   transition-delay: 0.2s;
}

#tombol-bawah.show {
   opacity: 1;
   visibility: visible;
}

#tombol-bawahKiri {
   position: fixed;
   opacity: 0;
   visibility: hidden;
   z-index: 2;
   bottom: -2px;
   transition: all 0.5s ease-in-out;
   transition-delay: 0.2s;
}

#tombol-bawahKiri.show {
   opacity: 1;
   visibility: visible;
}

@media (min-width: 1400px) {
   #tombol-bawah {
      right: 8vw !important;
   }
   #tombol-bawahKiri {
      left: 8vw !important;
   }

}

@media (max-width: 1399px) {
   #tombol-atas {
      right: 30px !important;
   }
   #tombol-bawah {
      right: 30px !important;
   }
   #tombol-bawahKiri {
      left: 30px !important;
   }
}

@media (max-width: 1199px) {
   .toggle-sidebar .sidebar {
      left: 0;
   }
   #tombol-bawah {
      right: 20px !important;
   }
   #tombol-bawahKiri {
      left: 20px !important;
   }
}

@media (min-width: 1200px) {

   .toggle-sidebar #main,
   .toggle-sidebar #footer {
      margin-left: 300px;
   }

   .toggle-sidebar .sidebar {
      left: 0;
   }
}

.plat {
   border-radius: 0px !important;
}

.pointer{
   cursor: pointer;
}

.idDoc {
   display: none !important;
}
.idKlas {
   display: none !important;
}


@media (max-width: 992px) {
   .hilang {
      display: none !important;
   }
}

.yes-print {
   display: none !important;
}

@media print {
   .hilang {
      display: inline !important;
   }
   .yes-print {
      display: inline !important;
   }
}

.bar1, .bar2, .bar3 {
   width: 21px;
   height: 3px;
   margin: 3px 0;
}
/*--------------------------------------------------------------
# DIALOG MODAL
--------------------------------------------------------------*/
#kananbar {
   z-index: 1060;
   position: fixed;
   top: 0;
   left: 0;
   display: none;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
}
#kananbar .kanan-dialog {
   position: relative;
   width: 450px !important;
   background-color: #ffffff;
   color: #4f4f4f;
   transition: all 0.3s;
}
#kananbar .kanan-dialog .kananbar-heading {
   height: 55px !important;
   background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
   z-index: 1160;
   color:white;
}

.overkanan {
   position: fixed;
   display: none;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 1059;
}

.kananclose {
   position: absolute !important;
   float: right !important;
   top: 5px !important;
   right: 10px !important;
   cursor: pointer !important;
}

.pilih:hover {
   cursor: pointer;
   color: #fff;
   background-image: linear-gradient(to right, #4fc1e9 97%, #ff6f69 90%);
}

option:disabled {
   color: white;
   background-color: #ff6f69;
}