@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
* {
	box-sizing: border-box;
  }
/* ::-webkit-scrollbar {
    width: 1px;
} */

::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
     -webkit-box-shadow: inset 0 0 12px rgba(255,255,255,0.5);
}
.alert_pops{
	color:black;
	background:black;
	margin-top:50px;
	width:70%;
	height:70%;
	margin-left:15%;
	border-radius:8px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}
.alert_pops1{
	text-align:center;
	width:( 100% - 32px );
	margin-left:16px;
	margin-right:16px;
	padding-top:32px;
	margin-Bottom:32px;
	font-size:16px;
	font-weight:bold;
}
.alert_pops2{
	width:100%;
	margin-top:32px;
	font-size:16px;
	font-weight:bold;
	height:1px;
	background:#bfbfbf;
}
.alert_pops3{
	text-align:center;
	width:100%;
	padding-top:8px;
	padding-Bottom:8px;
	font-size:16px;
	font-weight:bold;
	background:#bfbfbf;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
}
.alert_pops4{
	cursor:pointer;
	float:right;
	width:100px;
	height:30px;
	background:gray;
	margin:4px;
	border-radius:10px;
	padding-top:4px;
	color:black;
}
.alert_pops5{
	cursor:pointer;
	float:left;
	width:100px;
	height:30px;
	background:gray;
	margin:4px;
	border-radius:10px;
	padding-top:8px;
	color:black;
}
.alert_pops6{
	cursor:pointer;
	float:right;
	width:200px;
	height:30px;
	margin:4px;
	background:gray;
	border-radius:10px;
	padding-top:8px;
	color:black;
}
.alert_pops4:hover{
	background:black;
}
.alert_pops5:hover{
	background:black;
}
.alert_pops6:hover{
	background:black;
}


th, td {
	text-align: center;
	/* color:black; */
}
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #242424;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
}

.container {
	width: 90%;
	border-radius: 15px;
	overflow: hidden;
	background-color: #fff;
	color: #000;
	display: flex;
	flex-direction: row;
	margin-top: 2rem;
}

.container_konfirmasi {
	width: 90%;
	border-radius: 15px;
	overflow: hidden;
	background-color: #fff;
	color: #000;
	margin-top: 2rem;
}

.rincian {
	width:70%;
	margin:auto;
}

.alas_luar{
	border-radius:5px;
	background:rgb(226, 225, 225);
	margin-left:32px;
	margin-right:16px;
	width:calc( 100% - 48px );
}
.form_input{
	width:100%;
	padding:10px;
	background:none;
	border:none;
	/* color:black; */
}
.alas_form_bawah{
	float:right;
	margin-right:16px;
}
#wrapper{
	height: auto;
	width: 100%;
}
#header{
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	clear: both;
	height: 100vh;
	width: 100%;
}
#logo-large{
	background-repeat: no-repeat;
	background-size: 250px;
	float: left;
	width: 100%;
	background: rgba(42,42,42,0.15);
	height:100%;
}

.latar_popup{
	position:relative;
	z-index: 3;
	width:90%;
	height:auto;
	transition: 0.3s;
	align-content:center;
	text-align:center;
	margin:auto;
	margin-top:2%;
	display: table;

}

.latar_popup_border{
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

a {
	position: relative;
	color: #ED5E00;
	text-decoration: none;
  }
a::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #1a968f;
	transform: scaleX(0);
	transition: transform 0.3s ease;
  }

  a:hover::before {
	transform: scaleX(1);
  }
 /* unvisited link */
 a:link {
	color: #ED5E00;
  }

  /* visited link */
  a:visited {
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #ED5E00;
	/* color: #2B2655;
	text-decoration: underline; */
  }

  /* mouse over link */
  a:hover {
	color: #ED5E00;
  }

  /* selected link */
  a:active {

	color: #ED5E00;
  }

.latar_popup:after {
	content: "";
	clear: both;
  }

.isi_popup{
	/* float: left; */
	padding: 10px;
	z-index: 3;
	/* width:600px; */
	height:100%;
	transition: 0.3s;
	font-size:14px;
	/* align-content: center; */
}

.kolom_left {
	width: 35%;
	padding: 2rem;
	background-color: #f0f0f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.kolom_left h1 {
	margin-bottom: 1rem;
}

.kolom_right {
	width: 65%;
	padding: 2rem;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer {
	width: 90%;
	text-align: left;
/*	padding: 1rem 0;*/
	font-size: 0.9rem;
	color: white;
/*	margin: 2rem auto 1rem;*/
  }

.tabcontent.active {
	display: block;
	background-color: #fff;
}

.deskripsi_form{
	float:left;
	margin-bottom:10px;
	/* margin-right:32px; */
	/* margin-left:32px;  */
	margin-right:32px;
	/* font-weight:bold; */
	font-family:'Poppins';
	font-size:14px;
	text-align:justify;
	/* border-color:red; */
	/* color:black; */
	width:100%;
}

.deskripsi_form2{
	margin:auto;
	margin-top:8px;
	/* margin-right:32px; */
	/* margin-left:32px;  */
	font-weight:bold;
	font-size:14px;
	color:#ED5E00;
}

.input_formku{
	background:black;
	border-color:black;
	width:75%;
	background-color:#fff;
	border-radius:0.4rem;
	padding:8px;
	border-style: solid;
}

.input_formku:focus{
  border-style: solid;
  border-color:#ED5E00;
  border-radius:0.4rem;
}

.button-container {
	text-align: right;
	margin-top: 2rem;
}

.input_form {
	background: black;
	border-color: black;
	width: 75%;
	background-color: #fff;
	border-radius: 0.4rem;
	padding: 8px;
	border-style: solid;
	outline: none; /* Removes the default focus outline */
}

.input_form:focus {
	border-style: solid;
	border-color: #ED5E00;
	border-radius: 0.4rem;
	border-width: 3px;
	outline: none; /* Ensures no focus outline appears */
}


@media (max-width: 768px) {
	.container {
		flex-direction: column;
		width: 100%;
		margin-top:0;
		border-radius:0;
	}
	.container_konfirmasi {
		width:100%;
		border-radius:0;
		margin:0;
	}
	.rincian{
		width:100%;
	}
	.input_form {
		width: 100%;
	}
	.kolom_left,
	.kolom_right {
		width: 100%;
	}

	.button-container {
		text-align: center;
	}
	.input_formku{
		width:100%;
	}
	.title_form_left{
		font-size:20px;
	}
}

/* Loader CSS */
.loader-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(22, 22, 22, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.loader {
	border: 8px solid #f3f3f3;
	border-top: 8px solid #3498db;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/*
.kolom_left{
	width:35%;
	border-radius: 10px 0px 0px 10px;
	background:#f0f0f0;
	/* align-items: center; */
	/* top:20%; */
/*	display:table-cell;
}

.kolom_right{
	width:65%;
	z-index:4;
	background:#fff;
	border-radius: 0px 10px 10px 0px;
	display:table-cell;
}
*/

.close_popup{
	cursor:pointer;
	float:right;
	margin-right:5px;
	margin-top:5px;
	font-weight:bold;
	font-size:26px;
	color:black;
}

.title_form{
	float:left;
	margin-top:16px;
	/* margin-right:32px; */
	margin-left:0px;
	font-weight:medium;
	font-family:'Poppins';
	font-size:15px;
	color:black;
}


.title_form_left{
	text-align: center;
	margin-top:20px;
	margin-right:32px;
	margin-left:32px;
	font-weight:medium;
	font-family:'Poppins';
	font-size:30px;
	color:black;
}


.title_form_right{
	/* text-align: center; */
	margin-top:20px;
	margin-right:32px;
	margin-left:32px;
	font-weight:medium;
	font-family:'Poppins';
	font-size:20px;
	color:black;
}


.button_form{
	float:left;
	font-size:15px;
	margin-top:42px;
	margin-right:32px;
	margin-left:69px;
	padding-top:10px;
	padding-bottom:10px;
	width:150px;
	color:black;
	border-radius:10px;
	cursor:pointer;
}


.switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 18px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 11px;
	width: 11px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}


input:checked + .slider {
	background-color: #ED5E00;
}

input:focus + .slider {
	box-shadow: 0 0 1px #ED5E00;
;
}

input:checked + .slider:before {
	-webkit-transform: translateX(17px);
	-ms-transform: translateX(17px);
	transform: translateX(17px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

img{
	max-width: 100%;
	max-height: 100%;
	display: block; /* remove extra space below image */
}
ul.tab {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
	display: inline-block;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	transition: 0.3s;
	font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
	background-color: #ddd;
	/* text-decoration:underline; */
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 12px;
	-webkit-animation: fadeEffect 1s;
	animation: fadeEffect 1s;
}

/* @-webkit-keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
} */
html, body {
	/* max-width: 100%; */
	overflow-x: hidden;
}

.btnku{
	margin-top: 30px;
	margin-right: 10px;
	border-radius: 5px;
	border-width: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

	background-color: #e7e7e7;
	color: #000000;
	font-style: 'Poppins';
	font-size:15px;
	width:80px;
	height:35px;
}

.btn {
	position: relative;

	display: block;
	margin: 30px auto;

	padding: 0;

	overflow: hidden;

	border-width: 0;
	outline: none;
	border-radius: 7px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

	background-color: #ED5E00;
	color: #ecf0f1;
	font-style: 'Poppins';
	font-size:15px;
	width:150px;
	height:35px;
	cursor: pointer;

	transition: background-color .3s;
  }

  .btn:hover, .btn:focus {
	background-color: #ED5E00;
  }

  .btn > * {
	position: relative;
  }

  .btn span {
	display: block;
	padding: 12px 24px;
  }

  .btn:before {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	display: block;
	width: 0;
	padding-top: 0;

	border-radius: 100%;

	background-color: rgba(236, 240, 241, .3);

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  }

  .btn:active:before {
	width: 120%;
	padding-top: 120%;

	transition: width .2s ease-out, padding-top .2s ease-out;
  }

 /* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}