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

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; width: 100%; 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}

.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;
	justify-content: 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;
}

.textarea-dummy{
	white-space: pre-wrap;
	background-color: white;
	color: black;
	border: rgb(118, 118, 118) 1px solid;
	padding: 2px;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	font-family: monospace;
	word-break: break-word;
}
.advice-in-form{
	font-size: 14px;
	color: darkblue;
}

.notif-bar {
		  position: absolute;
		  right: 10px;
		  height: 15px;
		  padding: 5px 10px;
		  background-color: rgb(110, 230, 230);
		  box-shadow: 1px 1px 5px rgba(0, 0, 0, 20%) inset;
		  border-radius: 50px;
		  color: white;
		}

/*notif syst*/
.notif-bar:hover {
  background: rgb(5, 180, 230);
}

.notif-bar .lencanaNotif {
  position: absolute;
  bottom: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-size: 10px;
}
.kotakModalNotif{
	cursor: pointer;
	background-color: rgb(44, 44, 44, .7);
	border: 1px solid black;
	display: block;
	padding: 10px 0 20px 0;
	height: 50vh;
	position: absolute;
	right: 0;
	left: 50%;
	top: 0;
	overflow-y: scroll;
}
.kotakJudulNotif{
	background-color: rgb(110, 230, 230, 1);
	border-bottom: 5px solid rgb(86 190 240);
	box-shadow: -0px 8px 8px rgba(0, 0, 0, 50%);
	display: block;
	translate: 0 -10px;
	padding: 35px 5px 10px 5px;
	color: darkblue;
	font-weight: bold;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .after-sticky {
  padding-top: 40px;
}

/* 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{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;
}
html, body{overflow: auto;}
/*body style*/
body{ 
	background-image: linear-gradient(125deg, rgb(179, 250, 57), rgb(17, 242, 73));
	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;}

/*menu admin*/
.menu-admin{
	display: flex;
	flex-wrap: wrap;
	line-height: 25px;
}

/*header style*/

header {
	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 h1 { font-weight: bolder; font-style: italic; }
header .container-title{
	display: flex;
	max-height: 70px;
}
header img{
	width: 100%;
	max-width: 275px;
	margin: auto;
}

/*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{
	max-width: 230px;
	padding: 30px 30px;
  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;
}
main.logres.ppolicy .register{
	max-width: 100%;
}

/*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.profile .nav-setting{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.setting.profile .nav-setting a{font-size: 11px}
.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 .main1{line-height: 17px;}
.setting .main1 .fotoprofil{
	background-color: rgba(0, 0, 0, .0);
	margin: auto;
	width: 70%;
}
.setting .main3 .utama, .setting .main4 .utama{
	flex: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.setting .tombol{
	flex: 1;
	display: flex;
}
.setting .tombol a{ margin: auto; }
.setting .main3 a, .setting .main4 a {
	background-color: rgba(0, 0, 0, .01);
	font-size: 30px;
}

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




















/*media query*/
/* Extra small devices (portrait phones, less than 576px)*/
@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 }

	/*pg ppolicy in register*/
	main.logres.ppolicy .register{
		max-width: 70%;
	}

	/*setting css*/
	.setting.profile .nav-setting a{font-size: 16px}
	.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 .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;
	}

}

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

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 992px) { ... }

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

/*Extra large devices (large desktops, 1200px and up)*/