:root{
  --warna-primer: #1bae70;
  --warna-primer-x: #f4f6f4;
  --warna-primer-1: #06752E;
  --warna-primer-x-1: #fff;
  --warna-judul-hitam: rgb(78, 86, 82);
  --lebar-app: 350px;
  --wid-space: 0.05;
}

/*h1-h6 style*/
header, main, footer, nav, p, a {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: var(--warna-judul-hitam);
}

h1, h2, h3, h4, h5, h6 {
	font-family: sans-serif;
	color: var(--warna-judul-hitam);
}

h1{font-size: 36px; font-weight: bold; text-transform: capitalize;}
h2{font-size: 28px; font-weight: bold;}
h3{font-size: 24px; font-weight: bold;}
h4{font-size: 22px; font-weight: bold;}
h5{font-size: 18px; font-weight: bold;}
h6{font-size: 16px; font-weight: bold;}

/*font*/
.ctebal{font-weight: bold;}.cmiring{font-style: italic;}
.rtengah{text-align: center;} .rkanan{text-align: right;} .rkiri{text-align: left;}

/*flexbox shortcut*/
.fl-row{display: flex; flex-direction: row;}
.fl-col{display: flex; flex-direction: column;}
.fl-row.cen, .fl-col.cen {
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.fl-row.st, .fl-col.st { justify-content: flex-start; }
.fl-row.en, .fl-col.en { justify-content: flex-end; }
.fl-row.sb, .fl-col.sb { justify-content: space-between; }
.fl-row.se, .fl-col.se { justify-content: space-evenly; }
.fl-row.wr, .fl-col.wr { flex-wrap: wrap; }
.fl-1{flex: 1} .fl-2{flex: 2} .fl-3{flex: 3} .fl-4{flex: 4}

/*general section*/
section.utama{
	padding: 5px 0px 5px;
}

section.inner-sect{
	padding: 5px 0 5px;
	display: flex;
	flex-direction: column;
}

div.kontener{
	width: 100%;
	height: 100%;
	padding: 5px 0;
}

div.kontener:has(> section.inner-sect){
	padding-left: 0;
	padding-right: 0;
}

section.inner-sect > div.kontener {
	padding-left: 0;
	padding-right: 0;
}

div.kontener > div.elemen{
	padding-bottom: 5px;
}

body{ background-color: #f7f7f9; /*overflow-x: hidden;*/ }
body > div.app{
	margin: 0 auto;
	padding: 80px 0;
	position: relative;
	width: var(--lebar-app);
	max-width: var(--lebar-app);
	min-width: var(--lebar-app);
	min-height: 100vh;
	overflow-x: hidden;
}
/*dummy*/
/*body > div.app {background-color: yellow;}*/
/*end-dummy*/

body > div.app > :nth-child(n):not(header, footer, .pop-up-window){
	margin-left: 15px;
	margin-right: 10px;
}

section.utama.full{
	margin: 0;
	position: relative;
	left: -15px;
	width: var(--lebar-app);
/*	width: calc(var(--lebar-app) - 17px);*/
}

header{
	position: fixed;
	top: 0; /*left: 0; right: 0;*/
	width: var(--lebar-app);
	height: 65px;
	z-index: 3;
}

header.tipe1,
header.tipe2{
	display: flex;
	flex-direction: column;
	background-color: lightblue;
	padding: 10px 15px 8px;
	box-shadow: 0 5px 8px rgba(0, 0, 0, .5);
	margin-bottom: 25px;
}

header.tipe1 > div.logo_dan_burger,
header.tipe2 > div.logo_dan_burger{
	display: flex;
    justify-content: space-between;
}

nav.tipe1,
nav.tipe2 {
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	text-align: left;
	position: absolute; top: 65px; left: 0px; right: 0px;
	max-height: 65vh;
	overflow-y: auto;
}
nav.tipe1 a,
nav.tipe2 a,
nav.tipe2 details{
	text-decoration: none;
	padding: 3px 15px;
}
nav.tipe1 a:hover, nav.tipe1 .navInduk:hover{background-color: lightblue;}
nav.tipe1 > a, nav.tipe1 .navInduk{
	border-bottom: 1px solid rgba(51, 51, 51, .5);
	padding-top: 10px;
	padding-bottom: 10px;
}
nav.tipe1 .navInduk a{
	border-bottom:none;
}
nav.tipe1 .navInduk{
	display: flex;
	justify-content: space-between;
}
/*	.navInduk a:first-child{width: 100%;}*/
nav.tipe1 .tombolTampilSubNavList{
	width: 10%;
	text-align: center;
}
nav.tipe1 .subNavList{
	display: none;
	flex-direction: column;
}
nav.tipe1 .subNavList a{ padding-left: 35px; }
nav.tipe1 .subNavList a::before{ content: ">> " }
nav.tipe1 .tampilkanSubNav{display: flex;}

/*nav tipe2*/
nav.tipe2 > div {
	border-bottom: 1px solid rgba(0, 0, 0, .5);
	padding: 10px 0;
}
nav.tipe2 > div > a {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}
nav.tipe2 summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}
nav.tipe2 summary > div {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}
nav.tipe2 details > summary::after{ content: '\25BF'; }
nav.tipe2 details[open] > summary::after{ content: '\25B5'; }
nav.tipe2 details > a {
	text-decoration: none;
	display: block;
	padding: 5px 0 5px 25px;
}


footer.tipe2{
	position: absolute;
	bottom: 0;
	left: 0; right: 0;
	/*width: calc(var(--lebar-app) - 200px);*/
	height: 35px;
	background-color: lightblue;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 -3px 8px inset rgba(0, 0, 0, .5);
}

/*tombol-css-setting*/
.tombol{
	display: block;
	padding: 8px 20px;
	margin: 5px;
	text-align: center;
	text-decoration-line: none;
	/*border: 1px yellow solid;*/
	border-radius: 5px;
	box-shadow: 2px 2px 4px gray;
	cursor: pointer;
} .tombol:active{background-color: rgba(129, 212, 250, 1.0); color: white; box-shadow: 2px 2px 4px gray inset, -2px -2px 4px gray inset;}
.tblPrimer{background-color: var(--warna-primer);color: var(--warna-primer-x);}
.tblPrimerX{background-color: var(--warna-primer-x-1);color: var(--warna-primer);}
.tblMerah{background-color: red;color: whitesmoke;}
.tblKuning{background-color: yellow;color: blue;}
.tblHijau{background-color: green;color: whitesmoke;}
.tblBiru{background-color: blue;color: whitesmoke;}
.tblMerahM{background-color: salmon;color: rgb(56, 56, 56);}
.tblKuningM{background-color: lightyellow;color: rgb(56, 56, 56);}
.tblHijauM{background-color: lightgreen;color: rgb(56, 56, 56);}
.tblBiruM{background-color: lightblue;color: rgb(56, 56, 56);}
.tblGelap{background-color: rgb(56, 56, 56); color: white;}
.tblTerang{background-color: whitesmoke; color: black;}

.tblPrimer:hover{background-color: var(--warna-primer-1);color: #fff;}
.tblPrimerX:hover{background-color: var(--warna-primer-x);color: var(--warna-primer);}

/*elemen form css*/
.rapi-form-1{display: flex; flex-direction: column;}
.rapi-form-1 label {margin: 10px 0 3px;}
.rapi-form-1 button {margin: 10px 0 10px}

/*elemen burger menu*/
.blok-burger {
    font-family: 'Poppins', sans-serif;
    background-color: #090909;
    display: grid;
    place-items: center;
}
#ceklis-brgr { display: none; }
.burger-view {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 3px;
    cursor: pointer;
}
.bun {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 9px;
    left: 9px;
    transition: transform .18s cubic-bezier(0.04, 0.04, 0.12, 0.96) .15s;
}
.bun__crust {
    position: absolute;
    display: block;
    width: 17px;
    height: 1px;
    background-color: #fff;
    border-radius: 1px;
    left: 7px;
    transition: transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .2s;
}
.bun__crust--top {top: 14px;transform: translateY(-3px);}
.bun__crust--bottom {bottom: 14px;transform: translateY(3px);}
#ceklis-brgr:checked+.burger-view .bun--top {transform: rotate(45deg);}
#ceklis-brgr:checked+.burger-view .bun--bottom {transform: rotate(-45deg);}
#ceklis-brgr:checked+.burger-view .bun__crust--top,
#ceklis-brgr:checked+.burger-view .bun__crust--bottom {
    transform: none;
    transition: transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
#nav_element_yang_dimunculkan{
	display: none;
}

/*elemen table css*/

table.rapi-tabel-2{
	width: 100%;
	background-color: lightyellow;
	border-collapse: separate;
}
table.rapi-tabel-2 thead{
	background-color: lightyellow;
	border-bottom: 1px solid black;
	position: sticky;
	top: 66px;
}
table.rapi-tabel-2 th{ 
	border-bottom: 1px solid black;
	padding: 10px 5px;
	font-weight: bold;
}
table.rapi-tabel-2 tbody tr{
	border-bottom: 1px dotted black;
}
table.rapi-tabel-2 tbody td{
	border-bottom: 1px dotted black;
	padding: 10px 5px;
}
table.rapi-tabel-2 th, table.rapi-tabel-2 td {
	text-align: left;
}
table.rapi-tabel-2 th:last-child, table.rapi-tabel-2 td:last-child {
	text-align: right;
}


/*elemen pop up tipe 1*/
body:has(div.pop-up-window.aktif){overflow: hidden;}
div.pop-up-window{
	position: fixed;
	top: 0; left: 0; right: 0;
	background-color: rgba(0, 0, 0, .5);
	height: 100vh;
	z-index: 999;
	display: none;
}
div.pop-up-window.aktif{ display: flex; }
div.pop-up-window div.isi-pop{
	position: relative;
	margin: auto;
	background-color: whitesmoke;
	width: calc(var(--lebar-app) - 25%);
	display: flex;
	flex-direction: column;
	padding: 15px 20px 10px;
	/*min-height: calc(100vh - 25%);*/
	max-height: 90%;
}
div.pop-up-window div.tutup{
	position: absolute;
	top: -10px; right: -10px;
	border: 2px solid white;
	background-color: red;
	color: white;
	font-size: 20;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
div.pop-up-window div.judul{
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	padding-bottom: 10px;
	margin-bottom: 7px;
}
div.pop-up-window div.isi{
	overflow: auto;
}
/*end popup tipe 1*/


/*elemen gambar*/
div.kontainer-gambar{
	background-color: rgba(255, 255, 255, .0);
	box-sizing: border-box;
	margin: 0;
	width: 100%;
}
img.gbr{
	width: 100%;
	height: 100%;
}
div.kontainer-gambar img.gbr{
	max-width: 100%;
	box-sizing: border-box;
}
div.kontainer-gambar div.bg-lingkaran {
	background-repeat: no-repeat;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	min-width: 100%;
	height: auto;
	padding-top: 100%;
}
div.kontainer-gambar img.img-lingkaran {
	object-fit: cover;
	object-position: center;
	aspect-ratio: 1/1;
	border-radius: 50%;
	box-sizing: border-box;
	max-width: 100%;
}
.k-ikon-teks{width: 18px;height: 18px;}
.k-ikon-teks img{
	object-fit: cover;
	object-position: center;
	aspect-ratio: 1/1;
	border-radius: 50%;
}

.k-ikon-menu{ max-width: 50px; }
.k-ikon-menu img{
	object-fit: contain;
	aspect-ratio: 1/1;
}













/*spesific page css*/
main.logres{
	height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
main.logres div.kontener{ height: inherit; }
main.logres .form-logres{
	border: 1px solid rgba(0, 0, 0, .5);
	padding: 20px 15px 25px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
}
/*main.logres > section { margin: auto; }*/