@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:#ED5E00;
	background:#ED5E00;
	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:#ED5E00;
}
.alert_pops5{
	cursor:pointer;
	float:left;
	width:100px;
	height:30px;
	background:gray;
	margin:4px;
	border-radius:10px;
	padding-top:8px;
	color:#ED5E00;
}
.alert_pops6{
	cursor:pointer;
	float:right;
	width:200px;
	height:30px;
	margin:4px;
	background:gray;
	border-radius:10px;
	padding-top:8px;
	color:#ED5E00;
}
.alert_pops4:hover{
	background:black;
}
.alert_pops5:hover{
	background:black;
}
.alert_pops6:hover{
	background:black;
}

.loginku{
	/* Rectangle 2846 */

	margin :auto;
	margin-top:9%;
	padding-top:10px;
	width: 560px;
	height: 500px;
	/* left: 439px;
	top: 176px; */

	background: #F8F8F8;
	/* Depth 05 Modal */
	box-shadow: 2px 0px 3px rgba(38, 38, 38, 0.1), 0px 4px 20px rgba(38, 38, 38, 0.15);
	border-radius: 8px;
}

.labelwelcome{
/* Welcome Back! */
margin-left:10%;
/* width: 283px;
height: 59px; */

font-family: 'Supreme';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 58px;
/* identical to box height, or 146% */

/* Grey/130 */
color: #1B1B1B;
}

.labelplease{

	/* Please enter email and password */
	margin-left:10%;
	margin-top:-5%;
	margin-bottom:50px;
	
	font-family: 'Supreme';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	/* identical to box height, or 120% */
	
	/* Grey/100 */
	color: #3D3D3D;
}


th, td {
	text-align: center;
	color:#ED5E00;
}
body{
	background: #020826;
	margin: 0px;
}
.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:#ED5E00;
}
.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:800px;
	height:auto;
	transition: 0.3s;
	align-content:center;
	text-align:center;
	margin:auto;
	margin-top:100px;
}

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

a {
	position: relative;
	color: #2B2655;
	text-decoration: none;
  }
a::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #2B2655;
	transform: scaleX(0);
	transition: transform 0.3s ease;
  }
  
  a:hover::before {
	transform: scaleX(1);
  }
 /* unvisited link */
 a:link {
	color: #2B2655;
  }
  
  /* visited link */
  a:visited {
	color: #2B2655;
  }
  
  /* mouse over link */
  a:hover {
	color: #2B2655;
  }
  
  /* selected link */
  a:active {
	color: #2B2655;
  } 

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

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

.kolom_left{
	width:35%;
	border-radius: 10px 0px 0px 10px;
	background:#f0f0f0;
	align-items: center;
	
}

.kolom_right{
	width:65%;
	z-index:4;
	background:#fff;
	border-radius: 0px 10px 10px 0px;
	top:50%;
}


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

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

.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:#ED5E00;
}


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

.input_form{
	margin:auto;
	font-family: "Poppins";
	background:#ED5E00; 
	width:442px;
	height:48px;
	background-color:#fff;
  	border-radius: 0.4rem;
	padding:8px;
	border-style: solid;
	border-color:#000;
}

.input_form:focus{
  border-style: solid;
  border-color:#ED5E00;
  outline: none;
  border-radius: 0.4rem;

}

.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:#ED5E00;
	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%;
}

.btn {
	position: relative;
  
	display: block;
	margin: 30px auto; 
	
	padding: 0;
  
	overflow: hidden;
  
	border-width: 0;
	outline: none;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
	
	background-color: rgb(237, 94, 0);
	color: #ecf0f1;
	font-style: 'Poppins';
	font-size:15px;
	width:440px;
	height:42px;
	
	transition: background-color .3s;
  }
  
  .btn:hover, .btn:focus {
	background-color: rgb(237, 94, 0);
  }
  
  .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;
  }