@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto'), local('Roboto-Medium'),
       url('fonts/roboto/Roboto-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto'), local('Roboto-Medium'),
       url('fonts/roboto/Roboto-Black.ttf') format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Roboto Slab';
	font-style: normal;
	font-weight: 400;
    src: url('fonts/roboto_slab/roboto-slab-v11-latin-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Handlee';
	font-style: normal;
	font-weight: 400;
    src: url('fonts/google/Handlee-Regular.ttf') format('truetype');
}

.f_handlee {
    font-family: 'Handlee', monospace;
}

.f_slab {
    font-family: 'Roboto Slab', monospace;
}


.f_courier {
    font-family: 'Courier New', Courier, monospace;
}
.f_roboto {
    font-family: 'Roboto', monospace;
}
.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}



html{
	color:#031b4e;
	font-size:13px;
	font-family: "Roboto", sans-serif;
}
body{
	margin:0px;
	background-color: #ffffff;
    color: #000000;	
}
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}



a{
	color:#031b4e;	
}
.sidebar-menu a{
	color:#000;	
	font-size:1em;
}
.login-page {
  background-color: #00BCD4;
  padding-left: 0;
  max-width: 360px;
  margin: 5% auto;
  overflow-x: hidden;
}

@media screen and (max-width: 767.98px){
	.login-page {
	  width: 100%;
	  margin: 5% 0px;
	  max-width: 100%;
	}
}



b, strong {
  font-weight: 500;
}
.fs-8{font-size:8px}
.fs-9{font-size:9px}
.fs-10{font-size:10px}
.fs-11{font-size:11px}
.fs-12{font-size:12px}
.fs-13{font-size:13px}
.fs-14{font-size:14px}
.fs-15{font-size:15px}
.fs-16{font-size:16px}
.fs-17{font-size:17px}
.fs-18{font-size:18px}
.fs-19{font-size:19px}
.fs-20{font-size:20px}
.fs-21{font-size:21px}
.fs-22{font-size:22px}
.fs-23{font-size:23px}
.fs-24{font-size:24px}
.fs-25{font-size:25px}
.fs-26{font-size:26px}
.fs-27{font-size:27px}
.fs-28{font-size:28px}
.fs-29{font-size:29px}
.fs-30{font-size:30px}
.fs-31{font-size:31px}
.fs-32{font-size:32px}
.fs-33{font-size:33px}
.fs-34{font-size:34px}
.fs-35{font-size:35px}
.fs-36{font-size:36px}
.fs-37{font-size:37px}
.fs-38{font-size:38px}
.fs-39{font-size:39px}
.fs-40{font-size:40px}
.fs-50{font-size:50px}
.fs-60{font-size:60px}
.fs-70{font-size:70px}
.fs-80{font-size:80px}
.fs-100{font-size:100px}

.fs-r1{font-size:1rem;}
.fs-r10{font-size:1.05rem;}
.fs-r12{font-size:1.2rem;}
.fs-r15{font-size:1.5rem;}
.fs-r2{font-size:2rem;}

.text-light {
  color: #f8f9fa !important;
}
.bg-dark {
  background-color: #343a40 !important;
}
.lebarFull{width:100%;}
.left{float:left;}
.right{float:right;}
.baris{clear:both;}
.pointer{cursor:pointer;}
.bold{font-weight:600;}
.bold100{font-weight:100;}
.bold400{font-weight:400;letter-spacing:-0.4px;}
.bold500{font-weight:500;}
.bold700{font-weight:700;}
.bold800{font-weight:800;}
.italic{font-style: italic;	}
.flex{display:flex;}
.baris1{line-height:17px;;}
.normalFont{font-weight:normal;}
.normalHeight{line-height:auto;}
.condesedHeight{line-height:13px;}
.line{border-top:solid 1px #ccc;}
.alignCenterV{display: table-cell;vertical-align: middle;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignCenter {text-align: center;}
.overHide{overflow:hidden;}
.ellipse{overflow: hidden;	text-overflow: ellipsis;	white-space: nowrap;}
.overAuto{overflow:auto;}
.hide{display:none;}
.clear{clear: both;margin: 0px 0;width:100%;}
.normalSpacing{letter-spacing:0px;}
.condensed{letter-spacing:-0.03em;}
.centerVertical {  position: absolute;  top: 50%;  transform: translateY(-50%);}
.extensed{letter-spacing:.3px;}
.center{margin:0 auto;}
.garis-bawah{border-bottom: 1px solid #ddd;}
.dividerGrey {height: 1px;margin: 9px 0;overflow: hidden;background-color: #ccc;}

.border{border: 1px solid #ccc;}
.border-top2{border-top: 2px solid #cdd4e0;}
.border-top{border-top: 1px solid #cdd4e0;}
.border-bottom{border-bottom: 1px solid #cdd4e0;}
.border-bottom2{border-bottom: 1px dotted #cdd4e0;}
.border-left{border-left: 1px solid #cdd4e0;}
.border-right{border-right: 1px solid #cdd4e0;}
.under-dot:hover{text-decoration: underline dotted #0B5FEF;color:#0B5FEF !important; }

.lineTopBottom{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.lineBottom{border-bottom: 1px solid #ccc;}
.lineRight{border-right: 1px solid #ccc;}
.lineLeft{border-left: 1px solid #ccc;}
.lineTop{border-top: 1px solid #ccc;}
.relative{position:relative;}
.absolute{position:absolute;}
.pahat{text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);}
.upper{text-transform: uppercase;;}
.lower{text-transform: lowercase;;}
.kapital{text-transform: capitalize;;}
.full{width:100%;}
.radius{border-radius:3px;}
.radius5{border-radius:5px;}
.radius10{border-radius:10px;}
.shadow{box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;}
.blink {animation: blinker 1s linear infinite;}@keyframes blinker {50% { opacity: 0; }}
.silang{position:absolute;padding: 5px 10px;right: 0px;top: 0px;background: red;color: white;cursor:pointer;border-radius: 0 5px 0 0;}
.uang{text-align:right;}

.p0{padding:0px;}.p5{padding:5px;}.p10{padding:10px;}.p15{padding:15px;}.p20{padding:20px;}
.pt5{padding-top:5px;}.pt10{padding-top:10px;}.pt15{padding-top:15px;}.pt20{padding-top:20px;}
.pb10{padding-bottom:10px;}.pb15{padding-bottom:15px;}.pb20{padding-bottom:20px;}

.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr15{margin-right:15px;}
.m0{margin:0px;}.m5{margin:5px;}.m10{margin:10px;}.m15{margin:15px;}
.ml5{margin-left:5px;}.ml15{margin-left:15px;}.ml20{margin-left:20px;}
.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt25{margin-top:25px;}.mt30{margin-top:30px;}.mt40{margin-top:40px;}.mt60{margin-top:60px;}
.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.mb20{margin-bottom:20px;}.mb30{margin-bottom:30px;}.mb40{margin-bottom:40px;}.mb50{margin-bottom:50px;}.mb60{margin-bottom:60px;}
.mbt10{margin:10px 0  10px 0;}.mbt15{margin:15px 0  15px 0;}.mbt20{margin:20px 0  20px 0;}

.box_pop{
	border: 2px solid red;
	padding: 15px;
	z-index:1032;
	background:#fff;
}

.tWhite{color: #fff;}
.tBlack{color: #000;}

.tGrey0{color:var(--gray-0);}
.tGrey10{color:var(--gray-10);}
.tGrey20{color:var(--gray-20);}
.tGrey30{color:var(--gray-30);}
.tGrey40{color:var(--gray-40);}
.tGrey50{color:var(--gray-50);}
.tGrey60{color:var(--gray-60);}
.tGrey70{color:var(--gray-70);}
.tGrey80{color:var(--gray-80);}
.tGrey90{color:var(--gray-90);}
.tGrey100{color:var(--gray-100);}

.tRed0{color:var(--red-0);}
.tRed10{color:var(--red-10);}
.tRed20{color:var(--red-20);}
.tRed30{color:var(--red-30);}
.tRed40{color:var(--red-40);}
.tRed50{color:var(--red-50);}
.tRed60{color:var(--red-60);}
.tRed70{color:var(--red-70);}
.tRed80{color:var(--red-80);}
.tRed90{color:var(--red-90);}
.tRed100{color:var(--red-100);}

.tGreen0{color:var(--green-0);}
.tGreen10{color:var(--green-10);}
.tGreen20{color:var(--green-20);}
.tGreen30{color:var(--green-30);}
.tGreen40{color:var(--green-40);}
.tGreen50{color:var(--green-50);}
.tGreen60{color:var(--green-60);}
.tGreen70{color:var(--green-70);}
.tGreen80{color:var(--green-80);}
.tGreen90{color:var(--green-90);}
.tGreen100{color:var(--green-100);}

.tBlue0{color:var(--blue-0);}
.tBlue10{color:var(--blue-10);}
.tBlue20{color:var(--blue-20);}
.tBlue30{color:var(--blue-30);}
.tBlue40{color:var(--blue-40);}
.tBlue50{color:var(--blue-50);}
.tBlue60{color:var(--blue-60);}
.tBlue70{color:var(--blue-70);}
.tBlue80{color:var(--blue-80);}
.tBlue90{color:var(--blue-90);}
.tBlue100{color:var(--blue-100);}


.tOrange0{color:var(--orange-0);}
.tOrange10{color:var(--orange-10);}
.tOrange20{color:var(--orange-20);}
.tOrange30{color:var(--orange-30);}
.tOrange40{color:var(--orange-40);}


.tPurple{color: #652D90;}
.TPurple1{color: #9B59B6;}
.TPurple2{color: #8E44AD;}

.tYellow0{color:var(--yellow-0);}
.tYellow10{color:var(--yellow-10);}
.tYellow20{color:var(--yellow-20);}
.tYellow30{color:var(--yellow-30);}
.tYellow40{color:var(--yellow-40);}


.tGold{color:#BFAE7C;}


.bWhite{background: #fff;}

.bGrey0{background:var(--gray-0);}
.bGrey10{background:var(--gray-10);}
.bGrey20{background:var(--gray-20);}
.bGrey30{background:var(--gray-30);}
.bGrey40{background:var(--gray-40);}
.bGrey50{background:var(--gray-50);}
.bGrey60{background:var(--gray-60);}
.bGrey70{background:var(--gray-70);}
.bGrey80{background:var(--gray-80);}
.bGrey90{background:var(--gray-90);}
.bGrey100{background:var(--gray-100);}

.bRed0{background:var(--red-0);}
.bRed10{background:var(--red-10);}
.bRed20{background:var(--red-20);}
.bRed30{background:var(--red-30);}
.bRed40{background:var(--red-40);}
.bRed50{background:var(--red-50);}
.bRed60{background:var(--red-60);}
.bRed70{background:var(--red-70);}
.bRed80{background:var(--red-80);}
.bRed90{background:var(--red-90);}
.bRed100{background:var(--red-100);}

.bGreen0{background:var(--green-0);}
.bGreen10{background:var(--green-10);}
.bGreen20{background:var(--green-20);}
.bGreen30{background:var(--green-30);}
.bGreen40{background:var(--green-40);}
.bGreen50{background:var(--green-50);}
.bGreen60{background:var(--green-60);}
.bGreen70{background:var(--green-70);}
.bGreen80{background:var(--green-80);}
.bGreen90{background:var(--green-90);}
.bGreen100{background:var(--green-100);}

.bBlue0{background:var(--blue-0);}
.bBlue10{background:var(--blue-10);}
.bBlue20{background:var(--blue-20);}
.bBlue30{background:var(--blue-30);}
.bBlue40{background:var(--blue-40);}
.bBlue50{background:var(--blue-50);}
.bBlue60{background:var(--blue-60);}
.bBlue70{background:var(--blue-70);}
.bBlue80{background:var(--blue-80);}
.bBlue90{background:var(--blue-90);}
.bBlue100{background:var(--blue-100);}

.bYellow0{background:var(--yellow-0);}
.bYellow10{background:var(--yellow-10);}
.bYellow20{background:var(--yellow-20);}
.bYellow30{background:var(--yellow-30);}
.bYellow40{background:var(--yellow-40);}

.bOrange0{background:var(--orange-0);}
.bOrange10{background:var(--orange-10);}
.bOrange20{background:var(--orange-20);}
.bOrange30{background:var(--orange-30);}
.bOrange40{background:var(--orange-40);}



.bGold{background:#BFAE7C;}
.bPurple{background: #652D90;}

#loading_status{
	z-index:1032;position: fixed;bottom:10px;padding:5px 10px;text-align:center;
}
.bayangan {
	background-color: rgba(0,0,0,0.6);
	display: none;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
}
.bayangan2 {
	background-color: rgba(0,0,0,0.6);
	display: none;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1035;
}

.cards {
  border-width: 0;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(28, 39, 60, 0.1);
}

/* CARD*/
.chart-wrapper {
    position: absolute;
    right: -8px;
    bottom: -8px;
    left: -8px;
}

.card1 {
	font-size:14px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: 3px;
	box-shadow: 0 0 5px rgba(28, 39, 60, 0.1);
}


.card2 {
    border-radius:5px;
 	position: relative;
    height:100px;
	width:200px;
	margin: 5px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: all 0.3s ease-out;
    overflow: hidden;
}
.card2:hover {
  box-shadow: 0 24px 36px rgba(0,0,0,0.11),
    0 24px 46px var(--box-shadow-color);
}

.card2 .caption {
	width:100%;
    background-color: rgba(0,0,0,0.85);
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}
.card2 .full-caption {
    width: calc(100%-10px);
	height: 160px;
	top: -160px;
	padding: 5px;
}
.card2:hover .full-caption {
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.card2 .glow{
  display: block;
  position:absolute;
  width: 80%;
  height: 200%;
  background: rgba(255,255,255,.2);
  top: 0;
  filter: blur(5px);
  transform: rotate(45deg) translate(-450%, 0);
  transition: all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.card2:hover .glow{
  transform: rotate(45deg) translate(450%, 0);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.card2:hover img,
.card2:hover .glow-wrap{
  margin-top: 0;
}
 
.cari{	border:2px solid transparent;border-radius:5px;margin-bottom:20px;}
ul.header-dropdown {list-style-type: none; }
.sembunyikanScroolBar{
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.sembunyikanScroolBar::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.buttonUtama{
	border:none;padding:12px 12px 10px;border-radius:50%;box-shadow: 0px 0px 5px rgb(0,0,0,0.1);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.buttonUtama:hover{
	background-color:#facccf;
}
.buttonRound {
	border-radius:50%;
	padding: 8px 9px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}
.buttonRound:hover {
	color:#333;background-color:#E0E0E0;box-shadow:none;
}
.buttonFlat {
	cursor:pointer;
	font-size:1rem;
	border:1px solid transparent;
	border-radius:0px;padding: 9px;box-shadow:none;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
	min-width:100px;
	text-align:center;
}
.buttonFlat:hover {
	border:1px solid #333;color:#333;background:transparent;
}
.buttonFlat2 {
	border:1px solid transparent;border-radius:2px;padding: 8px 15px;;box-shadow:none;text-align:center;transition: all 300ms ease-out;	font-size:1rem;
}
.buttonFlat2:hover {
	border:1px solid #333;color:#333;background:transparent;
}
.buttonFlat3 {
	border:1px solid transparent;padding: 9px 32px;box-shadow:none;background:transparent;
}
.buttonFlat3:hover {
	color:#000;background:transparent;text-decoration:underline dotted #000;
}

.smallButton{
	padding: 8px 3px;
	margin-bottom: 0;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border:none;
	border-radius:3px;
	font-weight:500;
}
.smallButton2{
	padding: 10px 10px 8px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	border-radius: 3px;
	font-weight: 500;
	border: 1px solid #d9dbdd;
	font-size:1rem;
}
.smallButton2:hover {
	background:rgb(0,0,0,.05);
}	
.buttonFlat4 {
	border: 1px solid transparent !important;
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
	font-weight: 500;
	height: 36px;
	letter-spacing: 0.25px;
	line-height: 16px;
	padding: 9px 24px 11px 24px;
	cursor:pointer;
}
.buttonFlat4:hover {
	border:1px solid #333;
	color:#333;
	background:rgb(0,0,0,.1);
}	

.dividerV {
  border-left: 1px solid #dadce0;
  margin: 9px 4px;
  height: 20px;
}
.dividerV2 {
  border-left: 1px solid #dadce0;
  margin: 12px 4px;
  height: 65px;
}


.bottomFooterLeft{
	position: absolute;
	bottom: 15px;
	left: 15px;
}
.bottomFooterRight{
	position: absolute;
	bottom: 15px;
	right: 15px;
}
.buttonCircle{
	padding:15px 17px 13px;;border-radius:50%;box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3px;
}
.labelInput{
	top: 3px;
	position: relative;
}
.container-1{
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.container-1 input#cari{
  height: 36px;
  float: left;
  color: #262626;
  padding-left: 15px;
  border: 1px solid #ddd;
  background:#F2F5F9;
  max-width:100%;border-radius: 3px;font-size:13px;color:#1c273c;font-weight:500;border:1px solid #d9dbdd;background-color: #fff;
    -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}
.container-1 input#cari::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-1 input#cari:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 
.container-1 input#cari::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-1 input#cari:-ms-input-placeholder {  
   color: #65737e;  
}
.container-1 .icon{
	position: absolute;
	top: 9px;
	right: 15px;
	z-index: 1;
	color: #7F8C8C;
	font-size: 1rem;
}
.container-1 input#cari:hover, .container-1 input#cari:focus, .container-1 input#cari:active{
	outline: none;
	border: 1px solid #ccc;
	background: #fff;
  }
  .btn-circle {
  border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
  outline: none !important;
  overflow: hidden;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
div.spinner1 {
	position: absolute;
	right: 17px;
	top: 25px;
	line-height: 1px;
	border-radius: 2px;
}

.spinner-control2{
	display:flex;
	position:relative;
	min-height: 20px;
}
div.spinner2 {
	position: absolute;
	line-height: 1px;
	border-radius: 2px;
}

.spinner2.kanan {
	right:0px;
}

input.spinner2 {
	position:absolute;
	left:40px;
	max-width: calc(100% - 80px);
	text-align: center;
	
}

.radio-button input[type="radio"] {
	display: none;
}
.radio-button label {
	display: inline-block;
	background-color: #d1d1d1;
	padding: 7px 12px;;
	cursor: pointer;
	color: #031b4e;
}      
.radio-button input[type="radio"]:checked+label {
	background-color: #76cf9f;
}
textarea {
  width: 100%;
 }

/** line animation */
		
.loader-line {
	display: none;
    width: 100%;
	height: 2px;
	position: relative;
	overflow: hidden;
	background-color: #ddd;
	margin: 0px auto;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.loader-line:before {
	content: "";
	position: absolute;
	left: -50%;
	height: 3px;
	width: 40%;
	background-color: coral;
	-webkit-animation: lineAnim 1s linear infinite;
	-moz-animation: lineAnim 1s linear infinite;
	animation: lineAnim 1s linear infinite;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.tabel{ 
    display: table; 
}
.tabel .tr{ 
    display: table-row; 
}
.tabel .td{ 
    display: table-cell; 
}
.simple_table {
	border-collapse: collapse;
	width: 100%;
}

.simple_table table {
	border: none;
}
.simple_table th {
	padding: 8px 15px;
	font-weight:500;
	color:#666;
	font-size:1.05rem;
	background-color:rgb(0, 64, 255);
	border-bottom:5px solid #F2F5FA;
}


/* Kelas untuk memicu animasi muncul */
/* Style awal untuk elemen <tr> */

/* Kelas untuk memicu animasi penuh */
.simple_table tr.fade-in {
  opacity: 1;
  transform: scale(1);
}

.simple_table tr:nth-child(n+2) {
  transform: scale(0.5);
  position: relative;
  opacity: 0.5;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
              transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-origin: center center;
  z-index: 1;
}

.simple_table tr.fade-in {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
} 


.simple_table td {
    vertical-align: top;
    padding: 3px; /* Padding awal 0px untuk efek animasi */
}

.simple_table td:first-child { 
	border-radius:0 0 5px 5px; 
}
.simple_table tr:nth-child(even) {
	background-color: #f6f8ff; /* Warna untuk baris genap */
}

.simple_table tr:nth-child(odd) {
	background-color: #ffffff; /* Warna untuk baris ganjil */
}

.simple_table tr:hover {
	background: #e0e8fd;
}

.highlight{
	background:#90CAF9 !important;
	border-bottom:5px solid #F2F5F9;
}	

.media{
	overflow:visible;
}
select.form-control:focus  {
	border:none;
}

@keyframes blink {
  0%, 100% { opacity: 1; } /* Tampilan normal */
  50% { opacity: 0; }      /* Hilang sementara */
}

.tblData.error {
  animation: blink 1s ease-in-out 5; /* Animasi berkedip 2x */
}

.y_resize{position: absolute; top: 0; left: 0; width: 7px; height: 102%; background: transparent; cursor: col-resize;}


#contextMenu {
  position: absolute;
  display: none;
  z-index:800;
}


@keyframes lineAnim {
	0% {
		left: -40%;
	}
	50% {
		left: 20%;
		width: 80%;
	}
	100% {
		left: 100%;
		width: 100%;
	}
}

/** end line animation */


::-webkit-input-placeholder { /* Edge */
  font-weight:400;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-weight:400;
}

::placeholder {
  font-weight:400;
}

.btn-default{background-color:transparent;color:#444;border-color:transparent}
.btn-default:hover,.btn-default:active,.btn-default.hover{background-color:#ECF0F1}


input[type=text] {
  color: #333;
}



/** SNACKBAR **/	
@media screen and (max-width:767.98px){
	#snackbar {
	  /* visibility: hidden; */
	  width:100%;
	  margin-left: 0px;
	  color: #fff;
	  text-align: center;
	  padding: 16px;
	  position: fixed;
	  z-index: 1001;
	  left: 0;
	  bottom: 0px;
	  font-size: 17px;
	  margin-bottom:-60px;
	  background:rgb(0,0,0,.54);
	}
}
@media screen and (min-width:768px){
	#snackbar {
	  /* visibility: hidden; */
	  min-width: 250px;
	  margin-left: -125px;
	  color: #fff;
	  text-align: center;
	  padding: 16px;
	  position: fixed;
	  z-index: 1001;
	  left: 50%;
	  bottom: 0px;
	  font-size: 17px;
	  margin-bottom:-60px;
	  background:rgb(0,0,0,.54);
	}

}
/** SNACKBAR **/	
@media screen and (max-width:767.98px){
	#snackbar_action {
	  /* visibility: hidden; */
	  width: 100%;
	  margin-left: 0px;
	  color: #fff;
	  text-align: center;
	  padding: 10px 5px 0px;
	  position: fixed;
	  z-index: 1001;
	  bottom: 0px;
	  font-size: 17px;
	  background:rgb(0,0,0,.74);
	}
	
	#snackbar_action_container {
	  width: 150px;		
	}
}
@media screen and (min-width:768px){
	#snackbar_action {
	  /* visibility: hidden; */
	  margin-left: -50px;
	  color: #fff;
	  text-align: center;
	  padding: 10px 5px 0px;
	  position: fixed;
	  z-index: 1001;
	  left: 50%;
	  bottom: 0px;
	  font-size: 17px;
	  background:rgb(0,0,0,.85);
	}

}

/** END SNACKBAR **/	


/**  SLIDER UKURAN FONT **/

#font-size-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  outline: none;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

#font-size-slider:hover {
  opacity: 1;
}

#font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2px; /* Ubah lebar menjadi sama dengan tinggi untuk membuatnya persegi */
  height: 4px;
  background-color: #000;
  cursor: pointer;
}

#font-size-slider::-moz-range-thumb {
  width: 4px; /* Ubah lebar menjadi sama dengan tinggi untuk membuatnya persegi */
  height: 8px;
  background-color: #000;
  cursor: pointer;
}

#font-size-slider::-webkit-slider-thumb::before {
  content: attr(value);
  position: absolute;
  top: -30px;
  left: -10px;
  font-size: 14px;
  background-color: #000;
  color: #fff;
  padding: 2px 6px;
}

#font-size-slider::-moz-range-thumb::before {
  content: attr(value);
  position: absolute;
  top: -30px;
  left: -10px;
  font-size: 14px;
  background-color: #117e47;
  color: #fff;
  padding: 2px 6px;
}

/* SLIDER UKURAN FONT END */


/* Hanya tampil di smartphone (lebar maksimum 767px) */
.onlySmartPhone {
    display: block;
}

@media (min-width: 768px) {
    .onlySmartPhone {
        display: none;
    }
}

/* Hanya tampil di tablet dan monitor (768px - 1199px) */
.onlyTabletMonitor {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .onlyTabletMonitor {
        display: table-cell;
    }
    #setting2 {
        width: 500px;
        max-width: calc(100% - 250px);
    }	
    .logo_judul {
        color: #0b5fef;
    }
    .font1 {
        font-size: 13px;
    }
    .onlyLayarKecil {
        display: none;
    }

    #setting2 {
        width: 500px;
        max-width: calc(100% - 250px);
    }
    .container-1 input#cari {
        width: 250px;
    }
    .backgroundHasil {
        margin-top: 0;
    }
    #hasil_cari {
        color: #333;
    }
    .headLine {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        margin-top: 20px;
    }

}

@media (min-width: 1200px) {
    .onlyTabletMonitor {
        display: table-cell;
    }
    .logo_judul {
        color: #0b5fef;
    }
    .font1 {
        font-size: 13px;
    }
    .onlyLayarKecil {
        display: none;
    }

    #setting2 {
        width: 500px;
        max-width: calc(100% - 250px);
    }
    .container-1 input#cari {
        width: 250px;
    }
    .backgroundHasil {
        margin-top: 0;
    }
    #hasil_cari {
        color: #333;
    }
    .headLine {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        margin-top: 20px;
    }
}

/* Hanya tampil di monitor (lebar minimum 1200px) */
.onlyMonitor {
    display: none;
}

@media (min-width: 1200px) {
    .onlyMonitor {
        display: table-cell;
    }
}



input[type="text"], input[type="password"] {
	display: block;
	width: 100%;
	padding: 7px .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;		
}
input:focus[type="text"] {
	background:transparent;
	box-shadow:none;
	
}
input:focus[type="password"] {
	background:transparent;
	box-shadow:none;
	
}

/* CSS UPLOAD GAMBAR */
/* Sembunyikan tombol "Browse" */
.custom-file-upload input[type="file"] {
  display: none;
}

/* Tampilan tombol custom */

.custom-file-upload {
  display: inline-block;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 2px;
  transition: background 0.3s ease;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #333;
  height: 100%;
}

/* Saat kursor berada di atas tombol */
.custom-file-upload:hover {
  color:#0B5FEF;
  text-decoration: underline;
  text-decoration-style: dotted;
}


/* Styling untuk tampilan nama file yang dipilih */
.img-container{
height: 100px;
  width: 135px;
  margin: 1.25rem 0;
  position: relative;
  padding: 5px;
  background: #ddd;
  }
.file-selected {
  border: 1px dashed #333;
  width: 100%;
  height: 100%;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  background-image:url('data:image/png;base64,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');
   background-repeat: no-repeat;
  background-size: cover;
 
}



/* END CSS UPLOAD GAMBAR */
.form-control {
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  border: 1px solid #ced4da;
}