/* Show it is fixed to the top */

body {
  background-color: #f0f0f0;
  padding-top: 4.5rem;
  padding-bottom: 3.2rem;
}
.h664a_m_info_1 {
	position: absolute;
    display: inline-block;
    height: 43px;
    width: 240px;
    z-index: 100;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(3%);
    visibility: hidden;
    pointer-events: none;
}
.h664a_m_info_2 {
	position: absolute;
    display: inline-block;
    height: 85px;
    width: 240px;
    z-index: 100;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(3%);
    visibility: hidden;
    pointer-events: none;
}
.h664a_m_info_3 {
	position: absolute;
    display: inline-block;
    height: 110px;
    width: 240px;
    z-index: 100;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(3%);
    visibility: hidden;
    pointer-events: none;
}
.h664a_m_info_4 {
	position: absolute;
    display: inline-block;
    height: 135px;
    width: 240px;
    z-index: 100;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(3%);
    visibility: hidden;
    pointer-events: none;
}
.h664a_m_info_5 {
	position: absolute;
    display: inline-block;
    height: 160px;
    width: 260px;
    z-index: 100;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(3%);
    visibility: hidden;
    pointer-events: none;
}
.h664a_m_info_8 {
	position: absolute;
    display: inline-block;
    height: 230px;
    width: 260px;
    z-index: 100;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    left: 50%;
    transform: translateX(3%);
    visibility: hidden;
    pointer-events: none;
}
.map_com_ {
 	position: absolute;
    height: 20%;
    left: 1%;
    bottom: 25%;
    z-index: 99;
    padding: 0; margin: 0;
}
.map_img_ {
 	position: absolute;
    height: 15%;
    left: 2%;
    bottom: 5%;
    z-index: 99;
    padding: 0; margin: 0;
}
.map_bg_ {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    height: 19%;
    left: 1%;
    bottom: 3%;
    z-index: 99;
    padding: 0; 
    margin: 0;
    border: 1px solid #808080;
}
.map_legend_ {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    right: 1%;
    top: 3%;
    z-index: 99;
    padding: 1%; 
    margin: 0;
    border: 1px solid #808080;
    font-size: 10pt;
}
.map_title_ {
    position: absolute;
    left: 8%;
    bottom: 11%;
    z-index: 99;
    padding: 0; 
    margin: 0;
    font-size: 16pt;
}
.map_year_ {
    position: absolute;
    left: 8%;
    bottom: 5%;
    z-index: 99;
    padding: 0; margin: 0;
    font-size: 12pt;
}
.map_legend_lg {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    right: 1%;
    top: 3%;
    z-index: 99;
    padding: 1%; 
    margin: 0;
    border: 1px solid #808080;
    font-size: 12pt;
}
.map_title_lg {
    position: absolute;
    left: 8%;
    bottom: 11%;
    z-index: 99;
    white-space: nowrap; 
    padding: 0; 
    margin: 0;
    font-size: 24pt;
}
.map_year_lg {
    position: absolute;
    left: 8%;
    bottom: 5%;
    z-index: 99;
    white-space: nowrap; 
    padding: 0; margin: 0;
    font-size: 18pt;
}
.map_legend_md {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    right: 1%;
    top: 3%;
    z-index: 99;
    padding: 1%; 
    margin: 0;
    border: 1px solid #808080;
    font-size: 8pt;
}
.map_title_md {
    position: absolute;
    left: 8%;
    bottom: 11%;
    z-index: 99;
    white-space: nowrap; 
    padding: 0; 
    margin: 0;
    font-size: 12pt;
}
.map_year_md {
    position: absolute;
    left: 8%;
    bottom: 5%;
    z-index: 99;
    white-space: nowrap; 
    padding: 0; margin: 0;
    font-size: 8pt;
}
#page_data_table > table > thead > tr > td {
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
}
.h664a-mbtn-fullextent {
	top: 85px;
	left: .5em;
}
.h664a-mbtn-downloadmap {
	top: 112px;
	left: .5em;
}
.h664a-mlogo {
    bottom: -10%;
	left: .5em;
}
.ol-touch .h664a-mbtn-fullextent {
	top: 80px;
}

.ol-touch .h664a-mbtn-downloadmap {
    top: 120px;
}
.color-gold-0 {
    color: rgba(255, 255, 255, 1); 
}
.color-gold-1 {
    color: rgba(169, 170, 174, 1);
}
.color-gold-2 {
    color: rgba(200, 202, 202, 1); 
}
.color-gold-3 {
    color: rgba(248, 240, 201, 1); 
}
.color-gold-4 {
    color: rgba(207, 171, 72, 1); 
}
.color-gold-5 {
    color: rgba(166, 125, 1, 1);
}


.color-iklim-0 {
    color: rgb(102, 255, 153);
} 
.color-iklim-1 { 
    color: rgb(255, 255, 0);
} 
.color-iklim-2 { 
    color: rgb(255, 153, 0);
} 
.color-iklim-3 { 
    color: rgb(255, 0, 0);
} 
.color-iklim-9 {
    color: rgb(255, 255, 255);
} 

.h664a-iklim-0 {
    color: rgb(102, 255, 153);
} 
.h664a-iklim-1 { 
    color: rgb(255, 255, 0);
} 
.h664a-iklim-2 { 
    color: rgb(255, 153, 0);
} 
.h664a-iklim-3 { 
    color: rgb(255, 0, 0);
} 
.h664a-iklim-9 {
    color: rgb(255, 255, 255);
} 
    
.color-skpg-0 {
	color: rgba(255, 255, 255, 1);
}
.color-skpg-1 {
	color: rgba(204, 9, 29, 1);
}
.color-skpg-2 {
	color: rgba(218, 204, 50, 1);
}
.color-skpg-3 {
	color: rgba(44, 180, 92, 1);
}
.bg-color-skpg-0 {
	background-color: rgba(255, 255, 255, 1);
	font-weight: bold; 
}
.bg-color-skpg-1 {
	background-color: rgba(204, 9, 29, 1);
	font-weight: bold; color: rgba(255, 255, 255, 1);
}
.bg-color-skpg-2 {
	background-color: rgba(218, 204, 50, 1);
	font-weight: bold;
}
.bg-color-skpg-3 {
	background-color: rgba(44, 180, 92, 1);
	font-weight: bold;
}
.color-green-0 {
	color: rgba(255, 255, 255, 1);
}
.color-green-1 {
	color: rgba(214, 250, 140, 1);
}
.color-green-2 {
	color: rgba(190, 237, 83, 1);
}
.color-green-3 {
	color: rgba(165, 215, 33, 1);
}
.color-green-4 {
	color: rgba(130, 179, 0, 1);
}
.color-green-5 {
	color: rgba(93, 135, 0, 1);
}
.color-red-0 {
	color: rgba(255, 255, 255, 1);
}
.color-red-1 {
	color: rgba(246, 189, 192, 1);
}
.color-red-2 {
	color: rgba(241, 149, 155, 1);
}
.color-red-3 {
	color: rgba(240, 116, 112, 1);
}
.color-red-4 {
	color: rgba(234, 76, 70, 1);
}
.color-red-5 {
	color: rgba(220, 28, 19, 1);
}
.bg-skpg-0 {
    text-align: center;
	background-color: rgba(255, 255, 255, 1) !important;
}
.bg-skpg-1 {
    text-align: center;
	background-color: rgba(204, 9, 29, 1) !important;
}
.bg-skpg-2 {
    text-align: center;
	background-color: rgba(218, 204, 50, 1) !important;
}
.bg-skpg-3 {
    text-align: center;
	background-color: rgba(44, 180, 92, 1) !important;
}




.h664a-skor-1 {
	color: rgba(204, 9, 29, 1);
}
.h664a-skor-2 {
	color: rgba(218, 204, 50, 1);
}
.h664a-skor-3 {
	color: rgba(44, 180, 92, 1);
}	
.h664a-info-box {
	text-align: left;
}
.ex-num-right {
    white-space: nowrap; 
    text-align: right;
}
.h664a-cur {
	cursor: pointer;
}
.h664a-h-20 {
	height: 20px;
	border: 1px solid blue;
}
.h664a-i-sm {
	width: 250px; 
	height: 45px;
}

.h664a-nav {
	background-color: rgb(240, 240, 240);
	border-bottom: solid 2px #c0c0c0;
}
.mx7132 {
    z-index: 0;
    position: relative;
	width: 100%;
	height: 320px;
}
.mx7132-sm {
    z-index: 0;
    position: relative;
	width: 100%;
	height: 180px;
}
.mx7132-md {
    z-index: 0;
    position: relative;
	width: 100%;
	height: 250px;
}
.mx7132-lg {
    z-index: 0;
    position: relative;
	width: 100%;
	height: 480px;
}
.title_map {
    position: relative; padding: .5em;
}
.mx-pad {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.h664a-bottom {
	font-size: 0.9em;
	text-align: center;
	background-color: #092507;
	border-top: solid 2px #c0c0c0;
}

#box_pdf {
	height: 42em;
}

#container_app_general {
    overflow: scroll;
    height: 28em;
    padding: 0;
}

.drop_separator {
	font-size: 1pt;
	background-color: #d0d0d0;
}

#toggle_pwd {
    cursor: pointer;
}

#form_pengaturan *  {
    font-size: small;    
}

#list_akun {
    margin: 1em 0em 0em 0em;
}

.list_akun_i {
    font-size: large; font-weight: bold;
}

#list_akun {
    margin: 0;
    font-size: small;    
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

#list_akun thead {
    position: sticky;
    top: 0;
}

#list_akun tbody {
    cursor: pointer; 
}

#list_akun th {
    padding: 4px;
    background-color: #f6f6f6;
    font-size: small;    
    overflow-wrap: break-word;
    border-right: solid 1px #c0c0c0;
    border-bottom: solid 1px #c0c0c0;
}

#list_akun td {
    padding: 4px;
    font-size: small;    
    overflow-wrap: break-word;
    border-right: solid 1px #c0c0c0;
    border-bottom: solid 1px #c0c0c0;
}

#list_akun td i {
    font-size: large;    
}

.modal-content{
  border:solid 2px #404040;
}

.custom-option:hover {
    background-color: #d4d4d4;
}