/**
* Template Name: Axis
* Template URL: https://bootstrapmade.com/axis-bootstrap-corporate-template/
* Updated: Sep 13 2025 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
 .cardhgt{
    height:160px !important;
  }
  .grafheight{
      height:370px !important;
      padding:20px !important;
  }
  .grafheight2{
      height:400px !important;
      padding:20px !important;
  }
  .galheight{
    height:460px !important;
  }
@media screen and (max-width: 600px) {
  .widthlogo{
    width:190px !important;
    padding:12px;
  }
}
@media screen and (min-width: 601px) {
  .widthlogo{
    width:220px !important;
    padding:17px;
    top:5px !important;
  }
}
  .curheight{
    height:600px !important;
  }
  .fotoheight{
    height:405px !important;
    border: 0.1px solid #fafafa !important;
  }
  .videoheight{
    height:405px !important;
    width:100% !important;
    border: 0.1px solid #fafafa !important;
    background-color:#000000;
  }
  .wdtupdate{
    width:400px !important;
  }
.nav-update{
  width:600px !important;
}
  .lgwidth{
    width:200px !important;
    padding:12px;
  }
.nav-profile{
  padding:10px !important;
}

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content { display: block; }  /* show it on small screens */
}
div.mobileOnly
{
  display: none;
}
@media screen and (max-width: 699px)
{
  div.mobileOnly
  {
    display: block;
  }
}
div.mobileAlert
{
  display: none;
}
@media screen and (min-width: 699px)
{
  div.mobileAlert
  {
    display: block;
  }
}
.posisitombol {
    position: absolute !important;
    top:10% !important;
    left:0;
    right:0;
}
a.menugalleri
{
color: #FFFFFF !important;
text-decoration: none;
}
a.menugalleri:hover span
{
color: #FFF000 !important;
text-decoration: none;
}
@media screen and (max-width: 600px) {
  option{
      font-sise:0.9em !important;
      font-weight:300 !important;

  }
}
.ps-3{
    font-weight:300 !important;

}
span{
    font-weight:300 !important;
}
a.menukotak1
{
color: #000000 !important;
text-decoration: none;
}
a.menukotak1:hover span
{
color: #FFFFFF !important;
text-decoration: none;
}
    ::-webkit-scrollbar {
    display: none;
}
.tombol-link{
  position:absolute;
  left:47% !important;
  right:47% !important;
  top:47% !important;
  bottom:47% !important;
  font-size:4.0em !important;
  z-index:1111;
}    
.tombol-lihatfoto{
  position:absolute;
  left:47% !important;
  right:47% !important;
  top:47% !important;
  bottom:47% !important;
  font-size:4.0em !important;
  z-index:1111;
}
.card-header{
    color:#FFFFFF !important;
    padding:9px !important;
}

.card-header{
    color:#FFFFFF !important;
    padding:9px !important;
}
.bg1{
    background-color: #f7bb63 !important;
}
.bg2{
    background-color: #00A3B2 !important;
}
.toggle-sidebar-btn{
    color:#FFFFFF !important;
}
.tab {
  overflow: hidden;
  margin-right:2px;
  border:0px solid #bbbbbb;
  padding:0px;
}


.border-birusamar{
    border:0.02em solid #1e3a69;
}
.lineChart{
    color:#FFFFFF !important;
}
.bg-box{
    padding:2px !important;
    color:#000000 !important;
    background:#FAFAFA;
    font-size:0.8px !important;
    height:80px !important;
}

th{
    background-color:#00A3B2 !important;
    border:1px solid #FFFFFF !important;
}
a.menukuning
{
color: #062e59 !important;
text-decoration: none;
}
a.menukuning:hover span
{
color: #FF0000 !important;
text-decoration: none;
}
a.menukurvatop
{
color: #FFFFFF !important;
text-decoration: none;
}
a.menukurvatop:hover span
{
color: #FFF000 !important;
text-decoration: none;
}
.progress-bar{
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	box-shadow: none !important;
    height:23px !important;
}
.progress{
    border-radius: 0px !important;
    background-color:#EAEAEA !important;
    -webkit-box-shadow: none !important;
	  -moz-box-shadow: none !important;
	  box-shadow: none !important;
    border: 0px solid #FFFFFF;
    background:rgba(255,255,255,0.0) !important;
    height:23px !important;
}

.pbxy{
    border-top-left-radius: 45px !important;
    border-bottom-left-radius: 45px !important;
    border-top-right-radius: 45px !important;
    border-bottom-right-radius: 45px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	box-shadow: none !important;
    height:23px !important;
}
.pbo{
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	box-shadow: none !important;
    height:23px !important;
}

.pbpagu{
    border-radius: 45px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	box-shadow: none !important;
    height:23px !important;
    font-size:1.1em !important;
}
.pbkosong{
    border-radius: 45px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	box-shadow: none !important;
    height:23px !important;
}

.pbx{
    border-top-left-radius: 45px !important;
    border-bottom-left-radius: 45px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	box-shadow: none !important;
    height:23px !important;
}
.pby{
    border-top-right-radius: 45px !important;
    border-bottom-right-radius: 45px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    -webkit-box-shadow: none !important;
  	-moz-box-shadow: none !important;
	box-shadow: none !important;
    height:23px !important;
}


.bgsisbsnfull{
background-color:#38c7c5 !important;
font-size:1.0em !important;
color:#FFFFFF !important;
}
.bgomspanfull{
background-color:#b839b8 !important;
font-size:1.0em !important;
color:#FFFFFF !important;
}
.bgsisbsnkosong{
background-color:#a9f5ed !important;
font-size:1.0em !important;
color:#FFFFFF !important;    
}
.bgomspankosong{
background-color:#f59ae4 !important;
font-size:1.0em !important;
color:#FFFFFF !important;    
}

.bgfull{
background: linear-gradient(to right,  rgba(26,175,3,1) 0%,rgba(26,175,3,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bgp1a{
    background-color:#009900 !important;
}
.bgp1b{
    background-color:#dadada !important;
}
.bgkontrakkosong{
    background-color:#7fa9f5 !important;
    font-size:0.8em !important;
}
.bgkosongsbsn{
    background-color:#53e0de !important;
    font-size:0.8em !important;
}
.bghijautua{
    background-color:#48d48b !important;
}
.bglight{
    background-color:#f7fafa !important;
    font-size:0.77em !important;

}
.tableFixHead          { overflow: auto; height: 102px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#00A3B2 !important; }


thead tr.first th, thead tr.first td {
  position: sticky;
  top: 0px;
  height:40px;
  color:#ffffff !important;
}

thead tr.second th, thead tr.second td {
  position: sticky;
  top: 40px;
  height:40px;
  color:#ffffff !important;
}
thead tr.third th, thead tr.third td {
  position: sticky;
  top: 40px;
  height:40px;
  color:#ffffff !important;
}
.bginput{
    background:#FFFFFF !important;
    font-size:0.77em !important;
}
/* background progres bar ============================================================== */
.bghijautua{
    background-color:#39bd76 !important;
    color:#FFFFFF !important;
}
.bghijaumuda{
    background-color:#a2f5c8 !important;
    color:#000000 !important;
}
.bgbirutua{
    background-color:#45a1de !important;
    font-size:1.0em !important;
    color:#FFFFFF !important;
}
.bgbirumuda{
    background-color:#8dcdf7 !important;
    color:#000000 !important;
}
.bgtoskatua{
    background-color:#00A3B2 !important;
    color:#FFFFFF !important;
}
.bgtoskamuda{
    background-color:#00A3B2 !important;
    color:#FFFFFF !important;
}

.bgkuningmuda{
    background-color:#f7f6cb !important;
    color:#000000 !important;
}
.bgungutua{
    background-color:#e066f2 !important;
    color:#FFFFFF !important;
}
.bgungumuda{
    background-color:#f4bbfc !important;
    color:#000000 !important;
}
.bgorangetua{
    background-color:#f0ad5b !important;
    color:#FFFFFF !important;
}
.bgorangemuda{
    background-color:#fad4a5 !important;
    color:#000000 !important;
}
.bgkuningtua{
    background-color:#f5ba5b !important;
    color:#FFFFFF !important;
}
.bgkuningmuda{
    background-color:#fae0b6 !important;
    color:#000000 !important;
}
.bg-utama{
    background-color:#00A3B2 !important;
}
.bg-utamamuda{
    background-color:#00A3B2 !important;
}

.bg-kuning{
    background-color:#f7bb63 !important;
}

.bg-kuningmuda{
    background-color:#ffdca8 !important;
}
.text-utama{
    color:#00A3B2 !important;
}
.text-kuning{
    color:#f7bb63 !important;
}
.card-container:hover {
    background-color: #0b8780 !important;
  }
@media screen and (max-width: 600px) {
.judul{
    font-size:1.0em !important;
    font-weight:700 !important;
    }
}
@media screen and (min-width: 601px) {
.judul{
    font-size:1.5em !important
    }
}
.btn-utama{
    background-color:#00A3B2 !important;
    color:#f7bb63 !important;
}
.btn-utama:hover{
    background-color:#51c2be !important;
    color:#FFFFFF !important;
}
.btn-putih{
    background-color:#FFFFFF !important;
    color:#2aa3b3 !important;
}
.btn-putih:hover{
    background-color:#51c2be !important;
    color:#FFFFFF !important;
}
.btn-kuning{
    background-color:#f7bb63 !important;
    color:#51c2be !important;
}
.btn-kuning:hover{
    background-color:#f0c44d !important;
    color:#FF0000 !important;
}
.btn-merah{
    background-color:#d65f0d !important;
    color:#FFFFFF !important;
}
.btn-merah:hover{
    background-color:#f0c44d !important;
    color:#FF0000 !important;
}
.btn-hijau{
    background-color:#051400 !important;
    color:#FFFFFF !important;
}
.btn-hijau:hover{
    background-color:#f0c44d !important;
    color:#FF0000 !important;
}

.toggle-sidebar-btn{
    color:#FFFFFF !important;
}
.tab {
  overflow: hidden;
  margin-right:2px;
  border:0px solid #bbbbbb;
  padding:0px;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #f7bb63 !important;
  color:#039e7d;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 7px 8px;
  transition: 0.3s;
  border-radius:0px 9px 0px 0px;
  margin-right:2px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ebab49 !important;
  color:#fafafa;
  border-radius:0px 9px 0px 0px;
  margin-right:2px;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #00A3B2 !important;
  color:#FFF000;
  border-radius:0px 9px 0px 0px;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #fafafa;
  border-top: none;
}
   .navmenu{
      color:#3bc4ab !important;
      font-weight:500 !important;
  }
  .navmenu:hover{
      color:#bda72b !important;
      font-weight:500 !important;
  }
@media screen and (max-width: 600px) {
.kanwil{
    font-size:0.8em !important;
    margin-top:7px !important;  
    }
}
@media screen and (min-width: 601px) {
.judul-mds{
    font-size:1.3em !important;
    margin-top:7px !important;
    font-weight:700 !important;
    color:#17a3a6 !important;
    line-height:22px !important;
    }
}
@media screen and (max-width: 600px) {
.judul-mds{
    font-size:1.5em !important;
    margin-top:7px !important;
    font-weight:700 !important;
    color:#17a3a6 !important;
    line-height:25px !important;
    }
}
@media screen and (min-width: 601px) {
.judul{
    font-size:1.3em !important;
    margin-top:7px !important;
    font-weight:500 !important;
    color:#17a3a6 !important;
    line-height:22px !important;
    }
}
@media screen and (max-width: 600px) {
.judul{
    font-size:1.2em !important;
    margin-top:7px !important;
    font-weight:600 !important;
    color:#17a3a6 !important;
    line-height:20px !important;
    }
}

.user-input-wrp .floating-label {
	position: absolute;
	top: -17px !important;
	left: 12px;
	color:#F00;
	padding:0 !important;
	background-color:#FFFFFF !important;
	transition: 0.3s ease all;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
	top: -17px;
	left: 20%;
	opacity: 1;
	background-color:#FFFFFF !important;
	padding:0 !important;
	color:#008800 !important;
    font-weight:700;
}

.user-select-wrp .floating-label {
	position: absolute;
	top: -17px !important;
	left: 12px;
	color:#F00;
	padding:0 !important;
	background-color:#FFFFFF !important;
	transition: 0.3s ease all;
}

.user-select-wrp select:focus ~ .floating-label,
.user-select-wrp select:not(:focus):valid ~ .floating-label{
	top: -17px;
	left: 20%;
	opacity: 1;
	background-color:#FFFFFF !important;
	padding:0 !important;
	color:#008800 !important;
    font-weight:700;
}
.txp{
	color:#FFFFFF !important;
}
.txh{
	color:#000000 !important;
}
.fss{
    font-size:0.9em !important;
}
.fsm{
    font-size:1.0em !important;
}
.bg-merah{
    background-color:#fa7837 !important;
}
.border-merah{
    border:1px solid #fa7837 !important;
}
  .border-utama{
    border:1px solid #00A3B2 !important;
}

.text-merah{
    color:#f0a571 !important;
}
.card-header{
    background: #00A3B2 !important;
    color:#FFFFFF !important;
    padding:9px !important;
}
a.menulink
{
color: #107062 !important;
text-decoration: none;
}
a.menulink:hover span
{
color: #FF0000 !important;
text-decoration: none;
}
.toggle-sidebar-btn{
    color:#0d8078 !important;
}
  input::placeholder {
  color: #30d1c9 !important;
}
  .nempelbawah{
    position: fixed !important;
    bottom:0px;
    width:100% !important;
  }
  @import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

.droid1{
  font-family: 'Droid Arabic Kufi', serif;
}
.droid2{
  font-family: 'Droid Arabic Kufi', serif;
  text-align:right !important;
}
.hitung{
    width:190px;
    height:190px;
}
.bg-page{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009691+0,e5e5e5+100&1+0,0+100 */
background: linear-gradient(to right,  rgba(0,150,145,1) 0%,rgba(229,229,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-kiri{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+0,0.35+99 */
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.35) 99%,rgba(255,255,255,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-bawah{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+0,0.35+99 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.35) 99%,rgba(255,255,255,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-kanan{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+0,0.35+99 */
background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.35) 99%,rgba(255,255,255,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#plat{
  background-image: url("assets/img/logo-kiri.jpg"); 
  background-repeat: no-repeat;
  background-size: auto;
  background:cover !important;
  width:100%;
}