body {
  font-family: "Trebuchet MS", Tahoma, sans-serif !important;
  color: #1f1e1e;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Trebuchet MS", Tahoma, sans-serif !important;
}

@media screen and (max-width: 600px) {
.breadcrumb{
    font-size:0.9em !important;
    }
}

@media screen and (min-width: 601px) {
  td,th{
    font-size:0.9em !important;
    font-weight:300 !important;
  }
}
@media screen and (max-width: 600px) {
  td,th{
    font-size:0.75em !important;
    font-weight:300 !important;
  }
}
@media screen and (max-width: 600px) {
.mtnarrow{
    margin-top:7% !important;
    font-size:0.9em !important;
    font-weight:600 !important;
    }
}
@media screen and (min-width: 601px) {
.mtnarrow{
    margin-top:3% !important;
    }
}
th{
    background-color:#278768 !important;
    color:#ffffff !important;
}

  .bg-lightgreen{
    background-color:#cbfdef !important;
  }
  .bg-lightblue{
    background-color:#d1e9fd !important;
  }
  .bg-lightred{
    background-color:#f9e5d7 !important;
  }
  .bg-lightyellow{
    background-color:#fbf9ce !important;
  }
  .cardhgt{
    height:160px !important;
  }
  .grafheight{
      height:330px !important;
      border:0px solid red;
  }
  .galheight{
    height:460px !important;
  }
@media screen and (max-width: 600px) {
  .widthlogo{
    width:220px !important;
    padding:9px;
  }
}
@media screen and (min-width: 601px) {
  .widthlogo{
    width:250px !important;
    padding:12px;
  }
}
  .curheight{
    height:600px !important;
  }
  .fotoheight{
    height:405px !important;
    border: 0.1px solid #fafafa !important;
  }
  .wdtupdate{
    width:400px !important;
  }
.nav-update{
  width:400px !important;
}
  .lgwidth{
    width:200px !important;
    padding:12px;
  }
.nav-profile{
  padding:10px !important;
}

div.mobileOnly
{
  display: none;
}
@media screen and (max-width: 699px)
{
  div.mobileOnly
  {
    display: block;
  }
}
.posisitombol {
    position: absolute !important;
    top:22% !important;
    left:0;
    right:0;
}
a.menutombol
{
color: #FFFFFF !important;
text-decoration: none;
font-size:2.0em !important
}
a.menutombol:hover span
{
color: #FFF000 !important;
text-decoration: none;
}
.bg-hitam{
    background-color:#000000 !important;
}
<style>
  .bg-lightgreen{
    background-color:#cbfdef !important;
  }
  .bg-lightblue{
    background-color:#d1e9fd !important;
  }
  .bg-lightred{
    background-color:#f9e5d7 !important;
  }
  .bg-lightyellow{
    background-color:#fbf9ce !important;
  }
  .cardhgt{
    height:160px !important;
  }
  .galheight{
    height:340px;
  }
  .wdtlogo{
    width:80% !important;
  }
  .curheight{
    height:600px !important;
  }
  .ftheight{
    height:288px !important;
    border: 0.1px solid #fafafa !important;
  }
  .wdtupdate{
    width:400px !important;
  }
.bg-htua{
background-color:#007700 !important;
font-weight:600;
padding:7px;
color:#ffffff;
}
.bg-hstw{
background-color:#39b86c !important;
font-weight:600;
padding:7px;
color:#FFFFFF;
}
.bg-hmuda{
background-color:#abf7c9 !important;
font-weight:600;
padding:7px;
color:#333333;
}
.bg-toska{
background-color:#83ebf2 !important;
font-weight:600;
padding:7px;
color:#000000;
}
.bg-ktua{
background-color:#f5b556 !important;
font-weight:600;
padding:7px;
color:#000000;
}
.bg-kmuda{
background-color:#f3f5c6 !important;
font-weight:600;
padding:7px;
color:#000000 !important;
}
.nav-pills{
border-bottom:1px solid #dadada;
}
.nav-link{
border-radius:5px 5px 0 0 !important;
font-size:0.9em !important;
}
.navbars{
border-radius:5px 5px 0 0 !important;
font-size:0.9em !important;
background-color:#278768 !important;
}
<style>
.nav-pills .nav-link.active,
.nav-pills .nav-link:focus {
background-color:#278768 !important;
color: #FFFFFF;
}
.nav-pills .nav-link:hover{
background-color:#278768 !important;
color: #FFFF00;

}
.breadcrumb-item{
font-size:1.0em !important;
}
.bdrtbl{
border:1px solid #278768;
border-radius:7px;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}

.dt-buttons.btn-group {
    position: fixed;
}

input,select{
    height:40px !important;
    border:1px solid #3bd1b8 !important;
    border-radius:3px !important;
    padding: 3px 12px;
	color:#2ab5b8 !important;
}
textarea{
  border:1px solid #3bd1b8 !important;
    border-radius:5px !important;
    padding: 3px 12px;
	color:#2ab5b8 !important
}
input,select:focus {
    border-color: #59dce3 !important;
	border:1px solid #59dce3 !important;
}
.text-hijau{
    color:#2ab5b8 !important;
    margin-top:12px !important;
}
table.table>tbody>tr:hover td {
  background-color: #8df2f1 !important;
  color:#064f49 !important;
}
/*--------------------------------------------------------------
# Floating label input
--------------------------------------------------------------*/

.user-input-wrp .inputText:focus{
	border-color: #59dce3 !important;
	border-width: medium medium 1px;
	box-shadow:3px 1px 3px #59dce3;
}
.user-input-wrp {
	position: relative;
	width: 100%;
}
.user-input-wrp .inputText{
	width: 100%;
	border:1px solid #278768;
	height:45px !important;
	border-radius:4px 4px;
	padding:12px 12px;
}
.user-input-wrp .floating-label {
	position: absolute;
	top: -29px !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: -29px;
	left: 20%;
	opacity: 1;
	background-color:#FFFFFF !important;
	padding:0 !important;
	color:#008800 !important;
    font-weight:700;
}

/*--------------------------------------------------------------
# Floating label select
--------------------------------------------------------------*/

.user-select-wrp .selectText:focus{
	border-color: #fafafa !important;
	border-width: medium medium 1px;
	box-shadow:1px 1px 3px #555555;
}
.user-select-wrp {
	position: relative;
	width: 100%;
}
.user-select-wrp .selectText{
	width: 100%;
	border:1px solid #278768;
	height:45px !important;
	border-radius:4px 4px;
	padding:0px 0px;
}
.user-select-wrp .floating-label {
	position: absolute;
	top: -29px !important;
	left: 12px;
	color:#F00;
	padding:0 !important;
	background-color:RGBA(255,255,255,0.9) !important;
	transition: 0.3s ease all;
}

.user-select-wrp select:focus ~ .floating-label,
.user-select-wrp select:not(:focus):valid ~ .floating-label{
	top: -29px;
	left: 20%;
	opacity: 1;
	background-color:RGBA(255,255,255,0.9) !important;
	padding:0 !important;
	color:#008800 !important;
    font-weight:700;
}

/*--------------------------------------------------------------
# Floating label textarea
--------------------------------------------------------------*/

.user-textarea-wrp .textareaText:focus{
	border-color: #fafafa !important;
	border-width: medium medium 1px;
	box-shadow:1px 1px 3px #555555;
}
.user-textarea-wrp {
	position: relative;
	width: 100%;
}
.user-textarea-wrp .textareaText{
	width: 100%;
	border:1px solid #278768;
	height:45px !important;
	border-radius:4px 4px;
	padding:12px 12px;
}
.user-textarea-wrp .floating-label {
	position: absolute;
	top: -29px !important;
	left: 12px;
	color:#F00;
	padding:0 !important;
	background-color:#FFFFFF !important;
	transition: 0.3s ease all;
}

.user-textarea-wrp textarea:focus ~ .floating-label,
.user-textarea-wrp textarea:not(:focus):valid ~ .floating-label{
	top: -29px;
	left: 20%;
	opacity: 1;
	background-color:#FFFFFF !important;
	padding:0 !important;
	color:#008800 !important;
    font-weight:700;
}
a.menubiru
{
color: blue !important;
text-decoration: none;
}
a.menubiru:hover span
{
color: #FF0000 !important;
text-decoration: none;
}

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


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

thead tr.second th, thead tr.second td {
  position: sticky;
  top: 50px;
  height:40px;
  color:#ffffff !important;
}
thead tr.third th, thead tr.third td {
  position: sticky;
  top: 100px;
  height:40px;
  color:#ffffff !important;
}
thead tr.fourth th, thead tr.fourth td {
  position: sticky;
  top: 100px;
  height:40px;
  color:#ffffff !important;
}