/* Layout Global*/
body {
    font-family: 'Montserrat', sans-serif;
	color:#ffffff;
	margin:0;
	padding:0;
	width:100%;
	background:#ffffff;
	font-size: 1.5vh;
	overflow-y:auto;
	overflow-x:hidden;
	min-height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display:flex;
	flex-grow:1;
	flex-direction:column;
	align-items:center;
	flex-wrap:wrap;
	}

html,body{height:100%;}

.maincontainer {
	background:#ffffff;
	overflow:show;
	font-weight:bolder;
	color:#333333;
	padding:0;
	width:100%;
	border:0px solid blue;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	flex-wrap:nowrap;
	flex-grow:1;
	}
	
.downloadcontainer {
	background:#fff;
	margin:30px 0 5px 0;
	overflow:show;
	color:#333333;
	padding:10px;
	width:50%;
	border:2px #06b0bf;
  	border-style:none none dashed none;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: center;
	flex-wrap:nowrap;
  	height:120px;
	}

.blankspace {flex-grow:1;}
	
.downloadcontainerleft {
	background:transparent;
	overflow:show;
	color:#333333;
	padding:5px;
	width:100px;
	border:0px solid blue;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items:center;
	flex-wrap:nowrap;
	}
	
.downloadcontainerleft img {
	height:75px;
	border:0px solid #06b0bf;
	}

.downloadcontainerright {
	background:transparent;
	overflow:show;
	color:#333333;
	padding:5px;
	height:85px;
	flex-grow:1;
	border:0px solid blue;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items:stretch;
	flex-wrap:nowrap;
	}
	
.dcr_row {
	background:transparent;
	overflow:show;
	color:#333333;
	padding:0;
	flex-grow:1;
	border:0px solid red;
	display:flex;
	flex-direction:row;
	justify-content:stretch;
	align-items:center;
	flex-wrap:nowrap;
	}
	
.dcr_row_c1 {
	background:transparent;
	overflow:show;
	color:#333333;
	padding:0;
	flex-grow:1;
	max-width:140px;
	border:0px solid red;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	flex-wrap:nowrap;
	font-size: 1.5em;
	}
	
.dcr_row_c2 {
	background:transparent;
	overflow:show;
	color:#333333;
	padding:0;
	width:20px;
	border:0px solid red;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
	font-size: 1.5em;
	}
	
.dcr_row_c3 {
	background:transparent;
	overflow:show;
	color:#333333;
	padding:0;
	flex-grow:3;
	min-width:200px;
	border:0px solid red;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
	font-size: 1.5em;
	}

.notif {
	background:transparent;
	overflow:show;
	padding:5px;
	height:20px;
	width:30%;
    color:#666666;
	border:0px solid #06b0bf;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: center;
	flex-wrap:nowrap;
    margin:0 0 5px 0;
	}

.notif img {height:20px;}
	
.formdownload {
	background:transparent;
	overflow:show;
	padding:10px;
	height:30px;
	width:30%;
	border:0px solid #06b0bf;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: center;
	flex-wrap:nowrap;
	}
	
.formbutton {
	background:#555555;
	color:#ffffff;
	padding:10px;
	border:0px solid #06b0bf;
	border-radius:7px;
	display:flex;
	flex-direction:row;
	flex-grow:1;
	min-width:350px;
	align-items:center;
	justify-content: center;
	font-size: 2em;
	font-weight:bolder;
	}
	
.formbutton:hover {
	background:#91031f;
  	background-image: linear-gradient(to bottom right, #91031f, #fda500);
	color:#ffffff;
	padding:10px;
	border:0px solid #06b0bf;
	border-radius:7px;
	display:flex;
	flex-direction:row;
	flex-grow:1;
	min-width:350px;
	align-items:center;
	justify-content: center;
	font-size: 2em;
	font-weight:bolder;
	}

#footerbox {
	background:#91031f;
  	background-image: linear-gradient(to bottom right, #91031f, #fda500);
	overflow:show;
	font-weight:bolder;
	color:#ffffff;
	padding:0;
	width:100%;
  	font-size:1.5em;
	border:0px solid blue;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
	height:100px;
  	box-shadow:0px 0px 10px #333333;
	-moz-box-shadow:0px 0px 10px #333333;
	-o-box-shadow:0px 0px 10px #333333;
	-webkit-border-radius:0px 0px 10px #333333;
	}

.content {
  	background:#91031f;
  	background-image: linear-gradient(to bottom right, #91031f, #fda500);
	color:#ffffff;
	padding:0px;
	border:0px solid #06b0bf;
	width:100%;
	display:flex;
	flex-direction:column;
	flex-grow:1;
  	overflow:hidden;
	min-width:350px;
	align-items:center;
	justify-content: center;
	font-size: 2em;
	font-weight:bolder;
	}

.content img {
  	height:150px;
  	margin:0 0 20px 0;
	}

.sub_content_container {
  	margin:20px 0 0 0;
  	background:transparent;
	color:#ffffff;
	padding:5px;
	border:0px solid #06b0bf;
	width:80%;
	display:flex;
	flex-direction:column;
  	overflow:hidden;
	align-items:stretch;
	justify-content: center;
	font-size: 1em;
	}

.sub_content_text.p {
  	background:transparent;
	color:#ffffff;
	padding:10px;
	border:3px dashed #ffffff;
	display:flex;
  	text-align: justify;
	flex-direction:column;
	flex-grow:1;
  	font-weight:200;
  	overflow:hidden;
	align-items:flex-start;
	justify-content: center;
	font-size: 0.8em;
}

.sub_content_text.button {
  	background:transparent;
	color:#ffffff;
	padding:10px;
	border:0px dashed #ffffff;
	display:flex;
  	text-align: justify;
	flex-direction:row;
	flex-grow:1;
  	font-weight:200;
  	overflow:hidden;
	align-items:center;
	justify-content: center;
	font-size: 0.8em;
}
.sub_content_text.button .first_span {margin: 0 30px 0 0;}
.sub_content_text.button a{width:50px;height:50px;}
.sub_content_text.button a img{height:50px;padding:0px;}
.sosmed-button.spaced{margin: 0 50px 0 0;}
.space_span {margin: 0 0 0 30px;visibility:hidden;}

#login_container,#verif_container {
  	background:#fda500;
  	background-image: linear-gradient(to bottom right, #91031f, #fda500);
	color:#ffffff;
	padding:0px;
	border:0px solid #06b0bf;
	width:100%;
	display:flex;
	flex-direction:column;
	flex-grow:1;
  	overflow:hidden;
	min-width:350px;
	align-items:center;
	justify-content: center;
	font-size: 2em;
	font-weight:bolder;
	}

#login_content,#verif_content,#verif_content_hasil, #verif_content_hasil_idx {
  	background:#ffffff;
	color:#ffffff;
	padding:0px;
	border:3px dashed #ff0000;
	display:flex;
	flex-direction:column;
	height:200px;
  	overflow:auto;
	width:300px;
	align-items:stretch;
	justify-content: stretch;
	font-size: 1.5em;
	font-weight:bolder;
	}

#verif_content {height:130px;}
#verif_content_hasil, #verif_content_hasil_idx{overflow-wrap: break-word;overflow-y:scroll;margin-top:5px;color:#333333;font-size:12pt;}
#verif_content_hasil_idx {height:325px;overflow:auto;}

#login_form {
  	background:transparent;
	color:#ffffff;
	padding:0px;
	border:0px solid red;
	display:flex;
	flex-direction:column;
	flex-grow:1;
	align-items:stretch;
	justify-content: center;
	font-size: 1.5em;
	font-weight:bolder;
	}

#saved_id_title, #user_info_title{
  background:#fda500;
  border-radius:5px;
  padding:5px;
  margin-bottom:5px;
}

.formboxinput {
	border:0px solid blue;	
	padding:5px;
	flex-grow:1;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	background:transparent;
}

.formboxinput input,.formboxinput input:focus, .formboxinput textarea,.formboxinput textarea:focus {
	outline: none;
	padding:5px;
	flex-grow:1;
	border-radius:5px;
	margin:5px 0 0 0;
	background:#ffffff;
	font-size:20px;
	color:#333333;
}

.formboxinput input,.formboxinput textarea {border:2px solid #fd8300;}
.formboxinput input:focus, .formboxinput textarea:focus {border:2px solid #fdd700;}

.formbutton_r,.formbutton_r:hover, .button_id, .button_id:hover {
	border:0px solid blue;	
	padding:5px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:#fff;
	flex-grow:1;
	font-size:20px;
	outline: none;
	margin:5px 0 0 0;
	border-radius:5px;
}

.formbutton_r,.button_id {
	background:#555555;
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
}
.formbutton_r:hover,.button_id:hover {
  	background:#fda500;
}

#logout_button {
  height:20px;
  position:absolute;
  top:10px;
  right:10px;
  padding:10px;
}
.button_id, .button_id:hover{

	margin:0px;
}
#copy_button {
  max-height:20px;
  margin-top:5px;
  padding:10px;
}

#info_user{
  position:absolute;
  top:10px;
  left:10px;
  font-size:0.6em;
  padding:10px;
  display:flow;
  align-items:center;
  justify-content:center;
  background:#555555;
}

.cont_id {
	border:0px solid red;
	display:flex;
	flex-direction:row;
	flex-grow:1;
	align-items:stretch;
	padding:0px;
	margin:3px;
	min-height:40px;
	justify-content: stretch;
}

.content.admin {
  	background:#ffffff;
	display:flex;
	flex-direction:column;
	flex-grow:1;
  	margin:60px 0 10px 0;
	overflow-x:hidden;
  	overflow-y:auto;
  	padding:10px;
  	align-items:stretch;
	justify-content: center;
  	border:1px solid red;
}

.hline {color:#fda500;width:80%;}

.kontenboxjudul {
	display:flex;
	flex-direction:column;
  	padding:5px;
  	color:#ffffff;
  	background:#fda500;
  	align-items:center;
	justify-content: center;
  	font-size:1em;
 	border:1px solid red;
}

.kontenboxjudul h1 {font-size:1em;}


.menu.admin {
  	top:0;
    left:0;
  	position:absolute;
  	background:#91031f;
	color:#ffffff;
	padding:0px;
	border:0px solid #06b0bf;
	display:flex;
  	width:100%;
  	height:50px;
	flex-direction:row;
  	overflow:hidden;
	align-items:stretch;
	justify-content: center;
	font-size: 2em;
	font-weight:bolder;
 	 box-shadow:0px 5px 5px #333333;
	-moz-box-shadow:0px 5px 5px #333333;
	-o-box-shadow:0px 5px 5px #333333;
	-webkit-border-radius:0px 5px 5px #333333;
	}

.link.menu {
  	background:#91031f;
	color:#ffffff;
	padding:10px 20px 10px 20px;
	border:0px solid #06b0bf;
	display:flex;
	flex-direction:row;
  	overflow:hidden;
	align-items:center;
	justify-content: center;
	font-size: 15px;
	font-weight:bolder;
  	transition: background 0.3s;
	}

.link.menu:hover {
  	background:#ffffff;
	color:#91031f;
	padding:10px 20px 10px 20px;
	border:0px solid #06b0bf;
	display:flex;
	flex-direction:row;
  	overflow:hidden;
	align-items:center;
	justify-content: center;
	font-size: 15px;
	font-weight:bolder;
	}

/*new layout*/
	
.link_info {
	background:#fff;
	margin:30px 0 5px 0;
	overflow:hidden;
	color:#333333;
	padding:0px;
	width:50%;
	border:0px #06b0bf;
  	border-style:solid;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content: center;
	word-wrap: break-word;
	}

.link_info_box {
	background:transparent;
	color:#333333;
	padding:5px;
	flex-grow:1;
  	margin:0 0 5px 0;
  	word-wrap: break-word;
	border:1px #06b0bf;
  	border-style:solid;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
	}

.link_info_jdl {
	background:#156ead;
	color:#fff;
  	padding:10px;
	margin:0 0 10px 0 ;
  	font-size:14px;
	border:0px #06b0bf;
  	border-style:solid;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
	}

.link_info_a {
	background:transparent;
	color:#333333;
  	padding:0px;
	margin:0;
  	width:100%;
  	overflow: hidden;
  	font-size:14px;
	border:0px #06b0bf;
  	border-style:solid;
	}

a.link_info_text:link, a.link_info_text:visited {color:#333333;}

/* Layout form daftar*/
#form_daftar,#form_update,#form_search_member {
	background:transparent;
	margin:0;
	padding:2px;
	width:90%;
  	min-width:250px;
	border:0px #06b0bf;
  	border-style:solid;
	display:flex;
	flex-direction:column;
  	align-self:center;
	align-items:stretch;
	justify-content: center;
	}

.div_input {
	background:transparent;
	margin:5px;
	padding:0px;
  	font-weight:bold;
	flex-grow:1;
	border:0px #fff;
  	border-style:solid;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: stretch;
	}

.text_input_info {
	background:transparent;
	margin:0 5px 0 0;
	padding:5px;
  	width:30%;
  	min-width:100px;
	border:0px #fff;
  	border-style:solid;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: flex-end;
	}

.text_input_val {
  	color:#333333;
	background:#fff;
	margin:0;
	padding:5px;
  	flex-grow:1;
  	border-radius:5px;
	border:0px #fff;
  	border-style:solid;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: center;
	}

input.text_input_val[type=text]{
  border:2px solid #fda500;
  outline: none;
}

input.text_input_val[type=text]:focus{
  border:2px solid #06b0bf;
  outline: none;
}

.button_submit {
  	color:#fff;
	background:#000;
	margin:10px;
	padding:5px;
  	flex-grow:1;
  	border-radius:5px;
	border:0px #fff;
  	border-style:solid;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: center;
  	font-weight:bold;
  	font-size:20px;
	}

.button_submit:hover {background:#fcba03;color:#000;}

#notif_daftar {
	background:transparent;
	margin:0;
	padding:5px;
	width:80%;
	border:0px #06b0bf;
  	border-style:solid;
	display:none;
	flex-direction:column;
  	align-self:center;
	align-items:center;
	justify-content: center;
	}

.formboxinputradio {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: #333333;
	font-size: 14pt;
}

#formboxinput_save_id_button{margin-right:5px;}
#formboxinput_download_id_button{margin-left:5px;}
	

/* Layout responsive*/
@media screen and (min-width:480.1px) and (max-width:780px){
	#iconapp {display:none;}
  	.sub_content_text.button .first_span,.sub_content_text.button .space_span {visibility:none;}
	}

@media screen and (min-width:390.1px) and (max-width:480px){
	#iconapp {display:none;}
  	.sub_content_text.button .first_span,.sub_content_text.button .space_span {visibility:none;}
	.maincontainer {border:0px solid black;}
	.downloadcontainer {border-style:none none dashed none;width:90%;padding:5px;margin:20px 0 10px 0;}
	.downloadcontainerleft {border:0px solid green;width:75px;padding:5px;}
	.downloadcontainerleft img {height:75px;}
	.downloadcontainerright {border:0px solid green;width:80%;padding:5px;}
	.dcr_row_c1 {border:0px solid #06b0bf;font-size:1em;width:150px;}
	.dcr_row_c2 {border:0px solid #06b0bf;font-size:1em;width:10px;}
	.dcr_row_c3 {border:0px solid #06b0bf;font-size:1em;}
	.formdownload {width:20%;}
	.formbutton,.formbutton:hover {min-width:250px;}
    .notif {width:90%;}
}

@media screen and (max-width:390px){
	#iconapp {display:none;}
  	.sub_content_text.button .first_span,.sub_content_text.button .space_span {visibility:none;}
	.maincontainer {border:0px solid black;}
	.downloadcontainer {border-style:none none dashed none;width:90%;padding:5px;margin:20px 0 10px 0;}
	.downloadcontainerleft {border:0px solid green;width:60px;padding:5px;}
	.downloadcontainerleft img {height:60px;}
	.downloadcontainerright {border:0px solid green;width:70%;padding:5px;height:70px;}
	.dcr_row_c1 {border:0px solid #06b0bf;font-size:0.8em;width:100px;}
	.dcr_row_c2 {border:0px solid #06b0bf;font-size:0.8em;width:10px;}
	.dcr_row_c3 {border:0px solid #06b0bf;font-size:0.8em;min-width:150px;}
	.formdownload {width:20%;}
	.formbutton,.formbutton:hover {min-width:250px;}
  	.notif {width:90%;}
}