/**
* Template Name: NiceAdmin
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Updated: Apr 20 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

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

@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;
    top:10%;
    left:0;
    right:0;
}
a.menugalleri
{
color: #FFFFFF;
text-decoration: none;
}
a.menugalleri:hover span
{
color: #FFF000;
text-decoration: none;
}
@media screen and (max-width: 600px) {
  option{
      font-sise:0.9em;
      font-weight:300;

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

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

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


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

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

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

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

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


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

.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;
}
.bgp1b{
    background-color:#dadada;
}
.bgkontrakkosong{
    background-color:#7fa9f5;
    font-size:0.8em;
}
.bgkosongsbsn{
    background-color:#53e0de;
    font-size:0.8em;
}
.bghijautua{
    background-color:#48d48b;
}
.bglight{
    background-color:#f7fafa;
    font-size:0.77em;

}
.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:#14afb8; }


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

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

.bgkuningmuda{
    background-color:#f7f6cb;
    color:#000000;
}
.bgungutua{
    background-color:#e066f2;
    color:#FFFFFF;
}
.bgungumuda{
    background-color:#f4bbfc;
    color:#000000;
}
.bgorangetua{
    background-color:#f0ad5b;
    color:#FFFFFF;
}
.bgorangemuda{
    background-color:#fad4a5;
    color:#000000;
}
.bgkuningtua{
    background-color:#f5ba5b;
    color:#FFFFFF;
}
.bgkuningmuda{
    background-color:#fae0b6;
    color:#000000;
}
.bg-utama{
    background-color:#14afb8;
}
.bg-utamamuda{
    background-color:#03dbd7;
}

.bg-kuning{
    background-color:#f7bb63;
    color:#14afb8;
}

.bg-kuningmuda{
    background-color:#ffdca8;
}
.text-utama{
    color:#14afb8;
}
.text-kuning{
    color:#f7bb63;
}
.card-container:hover {
    background-color: #0b8780;
  }
@media screen and (max-width: 600px) {
.judul{
    color:#3fb0aa;
    font-size:1.0em;
    font-weight:700;
    text-transform:uppercase;
    }
}
@media screen and (min-width: 601px) {
.judul{
    color:#3fb0aa;
    font-size:1.5em;
    font-weight:700;
    text-transform:uppercase;
    }
}
.btn-utama{
    background-color:#14afb8;
    color:#f7bb63;
}
.btn-utama:hover{
    background-color:#51c2be;
    color:#FFFFFF;
}
.btn-kuning{
    background-color:#f0c44d;
    color:#51c2be;
}
.btn-kuning:hover{
    background-color:#f7bb63;
    color:#FFFFFF;
}
.btn-merah{
    background-color:#d65f0d;
    color:#FFFFFF;
}
.btn-merah:hover{
    background-color:#f0c44d;
    color:#FF0000;A
}
.btn-hijau{
    background-color:#47ba86;
    color:#FFFFFF;
}
.btn-hijau:hover{
    background-color:#2f9165;
    color:#f2e980;
}
.btn-biru{
    background-color:#36abba;
    color:#FFFFFF;
}
.btn-biru:hover{
    background-color:#0b7b8a;
    color:#f2e980;
}
.btn-kuning{
    background-color:#f0c44d;
    color:#FFFFFF;
}
.btn-kuning:hover{
    background-color:#f7bb63;
    color:#f2e980;
}
.btn-abu{
    background-color:#56e8d0;
    color:#FAFAFA;
}
.btn-abu:hover{
    background-color:#38c2ab;
    color:#f2e980;
}

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

/* Style the buttons inside the tab */
.tab button {
  background-color: #f7bb63;
  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;
  color:#fafafa;
  border-radius:0px 9px 0px 0px;
  margin-right:2px;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #14afb8;
  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;
      font-weight:500;
  }
  .navmenu:hover{
      color:#bda72b;
      font-weight:500;
  }
@media screen and (max-width: 600px) {
.kanwil{
    font-size:0.8em;
    margin-top:7px;  
    }
}
@media screen and (min-width: 601px) {
.judul-mds{
    font-size:1.3em;
    margin-top:7px;
    font-weight:700;
    color:#17a3a6;
    line-height:22px;
    }
}
@media screen and (max-width: 600px) {
.judul-mds{
    font-size:1.5em;
    margin-top:7px;
    font-weight:700;
    color:#17a3a6;
    line-height:25px;
    }
}
@media screen and (min-width: 601px) {
.judul{
    font-size:1.3em;
    margin-top:7px;
    font-weight:500;
    color:#17a3a6;
    line-height:22px;
    }
}
@media screen and (max-width: 600px) {
.judul{
    font-size:1.2em;
    margin-top:7px;
    font-weight:600;
    color:#17a3a6;
    line-height:20px;
    }
}

.user-input-wrp .floating-label {
	position: absolute;
	top: -17px;
	left: 12px;
	color:#F00;
	padding:0;
	background-color:#FFFFFF;
	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;
	padding:0;
	color:#14afb8;
    font-weight:700;
}

.user-select-wrp .floating-label {
	position: absolute;
	top: -17px;
	left: 12px;
	color:#F00;
	padding:0;
	background-color:#FFFFFF;
	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;
	padding:0;
	color:#008800;
    font-weight:700;
}
.txp{
	color:#FFFFFF;
}
.txh{
	color:#000000;
}
.fss{
    font-size:0.9em;
}
.fsm{
    font-size:1.0em;
}
.bg-merah{
    background-color:#fa7837;
}
.border-merah{
    border:1px solid #fa7837;
}
  .border-utama{
    border:1px solid #14afb8;
}

.text-merah{
    color:#f0a571;
}
.card-header{
    background: #14afb8;
    color:#FFFFFF;
    padding:9px;
}
a.menulink
{
color: #107062;
text-decoration: none;
}
a.menulink:hover span
{
color: #FF0000;
text-decoration: none;
}
.toggle-sidebar-btn{
    color:#0d8078;
}
  input::placeholder {
  color: #14afb8;
}
input,select{
    height:40px;
    border:1px solid #14afb8;
    border-radius:3px;
    padding: 3px 12px;
	color:#2ab5b8;
}
textarea{
  border:1px solid #14afb8;
    border-radius:5px;
    padding: 3px 12px;
	color:#2ab5b8
}