/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/**/
/**/
/*start from HERE*/
/**/
/**/

/*general*/
section.utama{
	box-sizing: border-box;
	padding: 40px 20px 20px;
}

section.inner-sect{
	box-sizing: border-box;
	padding: 10px 0 10px;
	display: flex;
	flex-direction: column;
}

div.kontener{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 10px;
}

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{
	box-sizing: border-box;
	padding-bottom: 10px;
}

/*icon-general*/
i.ik{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: 800;
	font-family: monospace;
	height: 10px;
	width: 10px;
	border: 2px solid black;
	border-radius: 50%;
	background-color: white;
}
i.ik.mer{color: red; border-color: red}
i.ik.hij{color: green; border-color: green}
i.ik.bir{color: blue; border-color: blue}
i.ik.kun{color: yellow; border-color: yellow}

/*details and summary*/
details.tipe1 > summary {
	margin: 5px 0;
	padding: 3px;
	background-color: ivory;
	border: 1px solid rgba(0, 0, 0, .3);
}
details.tipe1 > summary:hover{
	cursor: pointer;
	background-color: lightyellow;
	border: 1px solid rgba(0, 0, 0, .5);
}

/*form css*/
.rapi-form{display: flex; flex-direction: column;}
.rapi-form label {margin: 10px 0 3px;}
.rapi-form button {margin: 10px 0 10px}
.rapi-form.kustom-input input{
	background-color: rgba(255, 255, 255, .3);
	padding: 5px 3px;
}

.keterangan-tanda{ font-size:14px; }
.notice-input-kategori{
	background-color: white;
	border: none;
	box-shadow: 3px 3px 5px gray;
	padding: 5px 9px;
	margin-left: 5px;
	margin-top: -2px;
	margin-right: -5px;
	font-size: 14px;
	display: none;
}

.kontainer-gambar{
	background-color: rgba(255, 255, 255, .0);
	box-sizing: border-box;
	margin: 0;
	width: 100%;
}
.gbr{
	width: 100%;
	height: 100%;
}
.kontainer-gambar img.gbr{
	max-width: 100%;
	box-sizing: border-box;
}
.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%;
}
.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;
}

.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);}

/*tabel css*/
table.rapi-tabel{
	width: 100%;
	background-color: floralwhite;
}
table.rapi-tabel, table.rapi-tabel th,
table.rapi-tabel tr, table.rapi-tabel td {border: 1px solid black;}
table.rapi-tabel th {background-color: lightblue; font-weight: bold;}
table.rapi-tabel th, table.rapi-tabel td {
	text-align: center; vertical-align: middle; padding: 5px 0;
}

table.rapi-tabel-2{
	width: 100%;
	background-color: lightyellow;
}
table.rapi-tabel-2 th{ 
	border-bottom: 1px solid black;
	padding: 10px 0;
}
table.rapi-tabel-2 tbody tr{
	border-bottom: 1px dotted black;
}
table.rapi-tabel-2 tbody td{
	padding: 10px 0;
}
table.rapi-tabel-2 th:first-child, table.rapi-tabel-2 td:first-child {
	text-align: left;
}
table.rapi-tabel-2 th:last-child, table.rapi-tabel-2 td:last-child {
	text-align: right;
}

table.kolom1_width55 th:first-of-type, 
table.kolom1_width55 td:first-of-type{
	width: 55%;
}
table.kolom2_width55 th:nth-child(2), 
table.kolom2_width55 td:nth-child(2){
	width: 55%;
}

a{text-decoration: none;}

.bg-red{background-color: salmon;}
.bg-light{background-color: yellow;}
.bg-dark{background-color: blue;}
.all-mid{text-align: center; margin: auto; justify-content: center}
.input-ctrl{display: block; margin: 3px 0px 8px;}
.tbl{display: block; margin: 20px 0px 10px;}
.bold {font-weight: bold;}
.italic{font-style: italic;}

/*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}

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

.tblKuning{
	background-color: yellow;
	color: black;
	border: 1px yellow solid;
	border-radius: 25%;
	box-shadow: 2px 2px 4px gray;
}
.tblBiru{
	background-color: lightblue;
	color: black;
	border: 1px lightblue solid;
	border-radius: 25%;
	box-shadow: 2px 2px 4px gray;
}
.tblHijau{
	background-color: lightgreen;
	color: black;
	border: 1px lightgreen solid;
	border-radius: 25%;
	box-shadow: 2px 2px 4px gray;
	text-decoration: none;
}
.tblMerah{
	background-color: salmon;
	color: black;
	border: 1px salmon solid;
	border-radius: 25%;
	box-shadow: 2px 2px 4px gray;
	text-decoration: none;
}
.ft-profil-box{
	border: 1px solid grey; 
	background-color: #f9f9f9; 
	padding: 15px; 
	margin: auto; 
	text-align: center;
}
.ft-profil{
	background-repeat: no-repeat;
	border-radius: 50%;
	background-size: cover;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	min-width: 100%;
	height: auto;
	padding-top: 100%;	
}
.title-pg{
	font-size: 16px;
	color: white;
	background-image: linear-gradient(rgb(100, 210, 255), rgb(100, 210, 255));
	height: 35px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	border-bottom: 5px solid rgb(86 190 240);
	margin-bottom: 10px;
	box-shadow: -0px 8px 8px rgba(0, 0, 0, 50%);
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: rgba(20, 255, 34, 1);
  color: #444;
  cursor: pointer;
  padding: 9px 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.contentcollaps {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

/*select-check*/
.multiselect{width:25%; display: inline-flex; flex-direction: column;}
.selectBox{position: relative;}
.selectBox select {width:100%;}
.overSelect {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
#checkboxes {
	background-color:white; 
	border-radius: 5px; 
	box-shadow: 1px 7px 20px rgba(0, 0, 0, 40%); 
	display: none;border: 1px #a0a0a0 solid;}
#checkboxes label {font-size: 13px; display: block;}
#checkboxes label:hover {color: white;background-color: #1e90ff;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  padding-bottom: 50px;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 90%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 0 0 0 0;
  border: 1px solid #888;
  width: 90%;
}

/* The Close Button */
.close {
  background-color: whitesmoke;
  width: 25px;
  height: 25px;
  text-align: center;
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  right: 20px;
  top: 10px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#popupwd{background-color: rgba(196, 247, 225, 1.0);}

.subheading{
	background-color: lightblue;
	padding: 15px 20px 8px 20px;
}

.subbody{
	padding: 20px;
	line-height: 25px;
}
.subpolet{
	padding: 5px;
	line-height: 17px;
}
.subpolet h3{font-size: 15px}
.subpolet .icon-contact{width: 30px; margin: auto;}
.subpolet .bks-icon{display: inline-block;}

.submain section{
	display: flex;
	flex-direction: column;
}

/*body style*/
body{ 
	background-image: linear-gradient(125deg, rgb(179, 250, 57), rgb(17, 242, 73));
	overflow-x: hidden;
	min-height: 100vh;
}

/*h1-h6 style*/
header, main, footer, nav, p, a {
	font-family: sans-serif;
	font-size: 16px;

}

h1, h2, h3, h4, h5, h6 {
	font-family: sans-serif;
	color: darkblue;
	margin-bottom: 15px;
}

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;}

/*header style*/

header.tipe1 {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-image: linear-gradient(rgb(25 131 173), rgb(100 210 255));
	box-sizing: border-box;
	height: 90px;
	padding: 15px 15px 5px;
	text-align: center;
}

header.tipe1 h1 { font-weight: bolder; font-style: italic; }

/*footer style*/

/*footer nav*/
footer nav{
	display: flex;
	flex-direction: row;
	border-top: 5px solid white;
	background-color: rgb(85 189 231);
	box-sizing: border-box;
	box-shadow: 0px -5px 10px rgba(0, 0, 0, 50%);
	height: 50px;
	padding: 8px 10px 10px;
	text-align: center;
	margin-top: 10px;
	justify-content: space-evenly;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
footer a{
	font-size: 10px;
}

footer a:nth-child(3) {
	display: flex;
	box-sizing: border-box;
	background-color: rgb(85, 189, 231);
	box-shadow: 0px -5px 7px rgba(0, 0, 0, 50%);
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 4px solid white;
	top: -40px;
}
footer div {
	box-sizing: border-box;
	margin: auto;
	color: black;
}
footer img{
	height: 20px;
	margin: auto;
}

/*main style*/
main {
	margin: 15px 0px 15px 0px;;
	padding: 10px 20px 65px 20px;
}

section {
	background-color: rgba(255, 255, 255, .75);
	padding: 15px;
	margin-bottom: 10px;
}

/*pg home*/

section.home {
	background-color: rgba(144, 238, 144, .75);
}

main.home section.flex {
	justify-content: center;
}

main.home div.tblhome {
	background-color: lightblue;
	margin: 10px 10px 10px 0;
	width: 30%;
	height: auto;
}

main.home div.tblhome a{
	margin: auto;
}

/*login pg*/
main.logres{margin: auto;}
main.logres section{
	width: 175px;
	padding: 30px 50px;
   margin: auto;
}

/*list style default*/

main.ppolicy ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
main.ppolicy ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
main.ppolicy ul ul, main.ppolicy ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
main.ppolicy ol ol, main.ppolicy ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

/*privacy-policy pg*/
main.ppolicy li{font-size: 14px; text-align: justify;}
main.ppolicy h3{margin: 9px 0}
main.ppolicy p{
	text-align: justify;
	font-size: 15px;
	text-indent: 30px;
	margin-bottom: 5px;
}

/*style custom skin 1*/
.custom-skin1 {
	background-color: lightyellow;
	box-sizing: border-box;
	padding: 3px 0px;
	border-radius: 10px;
	box-shadow: 2px 2px 4px gray, -1px -1px 4px gray;
	display: flex;
	justify-content: space-evenly;
}
.custom-skin1, .custom-skin1 p, .custom-skin1 a{
	font-size: 12px;
}
.custom-skin1 p{
	display: inline-block;
	text-align: left;
}
.custom-skin1 span{
	padding: 1px;
	font-weight: bold;
}
.custom-skin1 span.bold{
	color: darkblue;
}
.custom-skin1 .fotoprofil {
	background-color: rgba(255, 255, 255, .0);
	box-sizing: border-box;
	margin: 0;
	padding: 2px 0 5px 0;
	width: 8%;
}
.custom-skin1 .fotoprofil .foto {
	background-repeat: no-repeat;
	border-radius: 50%;
	background-size: cover;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	min-width: 100%;
	height: auto;
	padding-top: 100%;
	position: sticky;
	top: 5px;
}

.custom-skin1 .keteranganloker {
	box-sizing: border-box;
	margin: 0;
	padding: 2px 5px 5px 0;
	width: 88%;
}
.custom-skin1 .keteranganloker div:first-child{
	border-top: none;
	padding: 2.5px;
}
.custom-skin1 .keteranganloker div{
	border-top: 1px dashed black;
	padding: 2.5px;
}
.custom-skin1 .username, .custom-skin1 .lokasiloker{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

/*setting css*/
.setting p, label {font-size: 13px;}
.setting h3 {font-size: 20px; margin: 0}
.setting h5, .setting h6{margin: 10px 0 3px;}
.setting .main1 a {
	font-size:13px; 
	display:block; 
	margin-top: 10px; 
	font-weight: bold; 
	text-decoration: underline;
}
.setting .main3 a, .setting .main4 a {
	display: block;
	background-color: rgba(0, 0, 0, .01);
	text-align: center;
	font-size: 30px;
}
.setting .main3 div.utama{
	display: flex;
	align-items: center;
}

.setting .main4 section.utama{
	padding: inherit;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.setting .main1{line-height: 17px;}
.setting .main1 .fotoprofil{
	background-color: rgba(0, 0, 0, .0);
	margin: auto;
	width: 70%;
}

main.setting.profile section{padding-top: 12px; padding-bottom: 10px}


main.profile label, main.cpassword label{
	display: block;
	line-height: 25px;
}
main.profile input, main.cpassword input{
	margin-bottom: 10px ;
}
main.profile section{
	padding: 30px 25px 15px;
}
main.profile .fl-1 {
	margin-right: 10px;
	text-align: center;
	justify-content: center;
}

main.isloker div label:nth-child(1){
	display: block;
}
main.isloker div{
	margin-bottom: 15px;
	max-width: 500px;
	line-height: 20px;
}

main.about{
	line-height: 25px;
}


/*notifikasi aksi dan anim*/
.notif-sh.notif-hid{
	animation: shownotif 3s ease;
	display: block;
}
.notif-sh{
	display: none;
	filter: opacity(0);
	position: absolute;
	top: 0;
	right: 0;
	background-color: salmon;
	border: 1px solid black;
	border-radius: 8px;
	padding: 5px 15px;
}

@keyframes shownotif{
	0% { filter: opacity(0); }
	25% { filter: opacity(1); }
	75% { filter: opacity(1); }
	100% { filter: opacity(0); }
}

/*notifikasi push dan translate*/
.tampung_notpush{
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	position: absolute;
	top: 0;
	right: 0;
}
.notif-dorong{
	background-color: lightyellow;
	border: 2px solid black;
	border-radius: 10px;
	min-height: 30px;
	min-width: 50px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 3px 8px;
	font-weight: bold;
	opacity: 1;
	transition: opacity 3s, translate 1s;
	translate-Y: -100%;
}
.notif-dorong.geserAndFade{
	opacity: 1;
	translate: 0;
}



















/*media query*/
/* Extra small devices (portrait phones, less than 576px)*/
/*upcode*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

	/*style custom skin 1*/
	.custom-skin1 {padding: 5px 10px 5px 10px;}
	.custom-skin1, .custom-skin1 p, .custom-skin1 a{font-size: 14px;}
	.custom-skin1 p{flex: 1}
	.custom-skin1 .fotoprofil {padding: 2px inherit 5px inherit;}
	.custom-skin1 .keteranganloker {padding: 2px inherit 5px inherit;}

	/* The Modal (background) */
	/* Modal Content */
	.modal-content {width: 80%;}
	.subheading{padding: 20px;}
	.subbody{
		line-height: 25px;
		display: flex;
		flex-direction: row;
	}
	.subpolet{
		line-height: 25px;
		margin-right: 9px;
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.subpolet h3{font-size: 20px;}
	.subpolet .icon-contact{width: 50px;}
	.subpolet .bks-icon{display: block;}
	.submain{ flex: 4 }

	/*setting css*/
	.setting p, label {font-size: 15px;}
	.setting h3 {font-size: 24px; margin: 0}
	.setting h5, .setting h6{margin: 10px 0 3px;}
	.setting .main1 a {
		font-size: 15px;
		display: block; 
		margin-top: 10px; 
		font-weight: bold; 
		text-decoration: underline;
	}
	.setting .main3 a, .setting .main4 a {
		display: block;
		background-color: rgba(0, 0, 0, .01);
		text-align: center;
		font-size: 30px;
	}

	.setting .main1{
		display: flex;
		flex-direction: row;
		align-items: stretch;
		line-height: 25px;
	}
	.setting .main1 .fotoprofil{
		background-color: rgba(0, 0, 0, .0);
		padding: inherit 0;
		margin: auto;
		flex: 1;
	}
	.setting .main1 .keteranganprofil{
		margin-left: 20px;
		flex: 4;
	}

}

.sectMenu{
	background-color: whitesmoke;
	text-align: center;
	line-height: 1;
	box-sizing: border-box;
  height: 60vh;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 25%);
  overflow-y: auto;
  padding: 10px;
}
.sectMenu .menuBesar{
	display: flex;
  justify-content: space-between;
  background-color: sandybrown;
  border-radius: 25px 0 0 25px;
  border: 2px solid rgba(0, 0, 0, .8);
  border-left: none;
}
.sectMenu .kontainer-gambar.k-ikon-menu {
	background-color: lightblue;
  border-radius: 25px;
  max-width: 30%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 12px;
  margin: -5px 0;

  box-shadow: 5px 5px 5px rgba(0, 0, 0, 25%);
}
.sectMenu .kontenerMenuKecil{
	display: flex;
  justify-content: center;
  align-items: center;
  flex: 2;
  padding: 15px 25px;
  flex-wrap: wrap;
}
.sectMenu a{
	font-size: 10px;
	margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 45px;
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	section.inner-sect{
			flex-direction: row;
			gap: 10px;
		}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { ... }

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { ... }