@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
* {
	margin:0;
	padding:0;
	font-family: 'Quicksand', sans-serif;
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

.float.left {
	float: left;
}

/* class container : ubah pswd, tmb pengguna, index, header admnin, galeri, footer, edit pengguna, daftar akun,  */
.container {
	width: 920px;
	margin:0 auto;
}
.container-pembayaran {

	width: 920px;
	margin:0 auto;
}
.container-invoice {
	border:2px solid;
	width: 920px;
	margin-left:50px ;
}

.bg-light {
	background-color: #fefefe;
}

.clearfix {
	clear: both;
}
.page-login {
	width: 100%;
	height: 100vh;
	border:1 solid;
	background-color: #B464A3;
	display: flex;
	justify-content: center;
	align-items: center;
}

.box {
	border:1px solid #ddd;
	background-color: #fff;
}

.box-header {
	padding: 16px;
	border-bottom:1px solid #ddd;
	background-color: #f2f2f2;
}

.box-body {
	padding: 16px;
}

.box-footer {
	width: 100%;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
    background: #6a1b9a;
    color: #fff;
    position: fixed;
    bottom: 0px;
    text-align: center;
}

.boxlogin{
	border-top:1px solid #ddd;
	background-color: #f2f2f2;
	padding: 16px;
	text-align: center;
}

form {
	margin:15px 0;
}

.form-group {
	margin-bottom: 15px;
}

.form-group label {
	display: block;
	margin-bottom: 8px;
}

.form-group .input-control {
	padding:10px 16px;
	width: 100%;
	font-size: 16px;
	border:1px solid #ddd;
}

.box-login {
	width: 300px;
}

.btn {
	border:1px solid #ddd;
	padding:10px 16px;
	font-size: 16px;
}

.btn:hover {
	cursor: pointer;
}
.btn-blue {
	background-color: #2E8BC0;
	color: #fff;
	border:1px solid #2E8BC0;
}

.btn-blue:hover {
	background-color: #145DA0;
}
.text-center {
	text-align: center !important;
}

.alert {
	padding:10px 16px;
	border:1px solid;
}

.alert-error{
	background-color: #FFA3B8;
	border:1px solid #FC3C80;
	color: #FC3C80;
}

.alert-success{
	background-color: #A3EBB1;
	border:1px solid #116530;
	color: #116530;
}

.navbar {
	height: 80px;
	width: 100%;
	background-color: #9a56a9;
	position: fixed;
	top: 0;
	z-index: 1000;
}


/* Pembayaran*/
main {
	overflow: auto;
	padding: 15px;
}

/* grouping selector */
h2, h3 {
	color: #6a1b9a;
}
aside {
	text-align: center;
	width: 22%;
	height: 150px;
	float: left;
	padding-top: 300px;
	padding-bottom: 100px;
	padding-left: 0;
	position: fixed;
	display: grid;
	background-color: #6a1b9a;
	z-index: 1;
	margin-top: 80px;

}
.card_bayar {
	border-radius: 5px;
	padding: 15px 30px 15px 30px;
	box-shadow: 0 4px 8px 0 #e0e0e0;
}
.content {
	/*width: 100%;
	float: right;*/
}
.text.bold{
	font-weight: bold;
}
.card_bayar.label{
	background-color: #6a1b9a;
	color: #ffffff;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 4px 8px 0 #e0e0e0;
}
.feature.img{
	border-radius: 50%;
}

.nav-item a{
	color: #ffffff;
	line-height: 40px;
	padding-top: 300px;
	margin-top: 10px;

}
.nav-treeview {

}

/* Navbar */

nav{
	display: flex;
	background-color: #6a1b9a;
	justify-content: space-around;
	/*padding: 50px 0;*/
	color: #ddd;
	height: 80px;
	width: 100%;
	align-items: center;
	position: fixed;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
}

nav .logo{
	font-family: 'Pacifico', cursive;
}

nav ul{
	margin: 0;
   	padding: 0;
}

nav ul li {
   list-style-type: none;
   display: inline-block;
   float: left;
   line-height: 100px;
}

nav ul li a{
	text-decoration: none;
   	margin: 5px;
   	padding: 10px 16px;
   	color: navy;
   	background-color: #ffba93;
   	border-radius: 5px;
}

nav ul li a:hover{
	color : #fff;
   	background-color: #f37121;
}
nav ul li .dropdown {
	border:1px solid #ddd;
	background-color: #613659;
	list-style: none;
	position: absolute;
	display: none;
}

nav ul li .dropdown a {
	color: #fff;
}

nav ul li .dropdown li:hover a {
	color: #fff;
}

nav ul li:hover .dropdown {
	display: block;
}




/* Humburger Menu*/

.menu-toggle {
	display: none;
	flex-direction: column;
	height: 20px;
	justify-content: space-between;
	position: relative;
}

.menu-toggle input {
	position: absolute;
	width: 40px;
	height: 28px;
	left: -6px;
	top: -4px;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.menu-toggle span {
	display: block;
	width: 28px;
	height: 3px;
	background-color: #ffffff;
	border-radius: 3px;
	transition: 0.5s;
}


/*Humburger Menu Animation*/
.menu-toggle span:nth-child(2){
	transform-origin: 0 0;
}


.menu-toggle span:nth-child(4){
	transform-origin: 0 100%;
}


.menu-toggle input:checked ~ span:nth-child(2){
	background-color: white;
	transform: rotate(45deg) translate(-1px, -1px);
}

.menu-toggle input:checked ~ span:nth-child(4){
	background-color: white;
	transform: rotate(-45deg) translate(-1px, 0);
}

.menu-toggle input:checked ~ span:nth-child(3){
	opacity: 0;
	transform: scale(0);
}

/* Responsive Break Point*/

/*Ukuran tablet*/
@media screen and (max-width: 768px){
	nav ul{
		width: 50%;
	}
}

/*Ukuran Mobile*/
@media screen and (max-width: 576px){
	.menu-toggle {
		display: flex;
	}
	nav ul{
		position: absolute;
		right: 0;
		top: 80px;
		height: 50vh;
		width: 80%;
		align-items: normal;
		justify-content: space-around;
		flex-direction: column;
		background-color: #9a56a9;
		z-index: 1;
		transform: translateX(100%);
		transition: all 1s;
		opacity: 0;
		padding-bottom: auto;
	}
	nav ul li.dropdown{
		position: relative;
		display: flex;
	}
	nav ul.slide{
		transform: translateX(0);
		opacity: 1;
	}
}

@media screen and (max-width:680px){

	.content{
		width: auto;
		float: none;
	}
	.box-body{
		width: auto;
		float: none;
	}
	.container{
		width: auto;
		float: none;
	}
}

@media screen and (max-width:680px){

	.content_byr{
		width: auto;
		float: none;
		margin-left: 25px;
		padding-left: 20px;
		margin-top: 25px;
	}
	.boxheader_byr{
		width: auto;
		float: none;
		margin-left: 25px;
		padding-left: 20px;
		margin-top: 25px;
	}
	.container_byr{
		width: auto;
		float: none;
		margin-left: 25px;
		padding-left: 20px;
		margin-top: 25px;
	}
	.box_byr{
		width: auto;
		float: none;
		margin-left: 25px;
		padding-left: 20px;
		margin-top: 25px;
	}
	.boxbody_byr{
		width: auto;
		float: none;
		margin-left: 25px;
		padding-left: 20px;
		margin-top: 25px;
	}
	.box-body-table{
		width: auto;
		float: none;
		margin-left: 25px;
		padding-left: 20px;
		margin-top: 25px;
	}
	.table-bayar{
		width: auto;
		float: none;
		margin-left: 25px;
		padding-left: 20px;
		margin-top: 25px;
	}

}

/* Batas Navbar */


.content {
	padding:80px 0 30px 0;
}
.box-kta{
	border:1px solid #ddd;
	margin-top: 40px;
	margin-left: 30px;
	width: 81.4%;
	padding:180px 100px 60px 25px;
	background-image: url("gambar/kta1.png");
}
.box-kta tr td{
	font-weight: bold;
	font-size: 12px;
}
.content h2 {
	margin-left:15px ;
}


.footer {
	padding:20px 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
	margin:8px 0;
	font-weight: bold;
}

.table th,
.table td {
	border:1px solid #ddd;
	padding:10px ;
}
.table td:first-child {
	width:50px ;
	text-align: center;
}
.table td:last-child {
	width:150px ;
	text-align: center;
}
.text-red {
	color: #F51720;
}
.text-orange {
	color: #F8D210;
}
.text-green {
	color: #59981A;
}
.table-bayar tr,
.table-bayar td {
	border:1px solid #ddd;
	padding:10px ;
}

.box_formulir {
	width: 50%;
	margin: 100px auto;
}
.box {
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 10px;
	box-sizing: border-box;
	margin: 5px 0 25px;
}
.btn-cetak{
	display: inline-block;
	padding: 10px 17px;
	border:1px solid #ddd;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	background-color: #0D42BE;
	margin-top: 5px;
	margin-bottom: 10px;
}
.btn-cetak:hover{
	cursor: pointer;
	background-color: #5579F7;
}
.btn-cetak-bayar{
	display: inline-block;
	padding: 10px 17px;
	border:1px solid #ddd;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	background-color: #F51720;
	margin-top: 5px;
	margin-bottom: 10px;
}

.table-form {
	width: 100%;
}
.table-form tr td:nth-child(1) {
	width: 30%;
}
.input-control{
	padding: 5px 10px;
	font-size: 16px;
	margin: 5px 0;
}
.btn-daftar{
	padding: 10px 17px;
	background-color: #0C9ACF;
	color: #fff;
	border: none;
	font-size: 16px;
}
.btn-daftar:hover{
	cursor: pointer;
	background-color: #1483BA;
}

.input-group:after {
	content: "";
	clear: both;
	display: block;
}
.input-group input[type="text"]{
	width:90% ;
	padding:10px ;
	font-size:16px ;
	float: left;
	border:1px solid #ddd;
}

.input-group input[type="text"]:focus {
	outline: none;
}
.input-group button {
	width:10% ;
	padding:10px ;
	font-size:16px ;
	float: left;
	border:1px solid #ddd;
	border-left: none;
}


.slider { 
	border: 10px solid #efefef; 
	position: relative; 
	overflow: hidden; 
	background: #efefef;
}

.slider { 
	margin:20px auto;
	width: 768px;
	height: 450px; 
}

.isi-slider img { 
	width: 768px;
	height: 450px; 
	float: left;
}

.isi-slider { 
	position: absolute; 
	width:3900px;  

	/*pengaturan durasi lama tampil gambar bisa di atur di bawah ini*/
	animation-name:slider;
	animation-duration:8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
	-webkit-animation-name:slider;
	-webkit-animation-duration:8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:slider;
	-moz-animation-duration:8s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count:infinite;
	-o-animation-name:slider;
	-o-animation-duration:16s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count:infinite;
}


/*saat gambar di hover oleh cursor mouse maka berhenti slide*/
.isi-slider:hover { 
	-webkit-animation-play-state:paused; 
	-moz-animation-play-state:paused; 
	-o-animation-play-state:paused; 
	animation-play-state:paused; }
}

.isi-slider img { 
	float: right; 
}

.slider:after { 
	font-size: 150px; 
	position: absolute; 
	z-index: 12; 
	color: rgba(255,255,255, 0); 
	left: 300px; top: 80px; 
	-webkit-transition: 1s all ease-in-out; 
	-moz-transition: 1s all ease-in-out; 
	transition: 1s all ease-in-out; 
}

.slider:hover:after { 
	color: rgba(255,255,255, 0.6);  
}



@-moz-keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}       
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0;
	}   	
	100% {
		left: 0; opacity: 0; 
	}
} 

@-webkit-keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}       
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0;
	}   	
	100% {
		left: 0; opacity: 0; 
	}
} 


@keyframes slider {     
	0% {
		left: 0; opacity: 0; 
	}     
	2% {
		opacity: 1; 
	}     
	20% {
		left: 0; opacity: 1; 
	}     
	21% {
		opacity: 0; 
	}     
	24% {
		opacity: 0; 
	}     
	25% {
		left: -768px; opacity: 1; 
	}     
	45% {
		left: -768px; opacity: 1; 
	}     
	46% {
		opacity: 0; 
	}     
	48% {
		opacity: 0; 
	}     
	50% {
		left: -1536px; opacity: 1; 
	}     
	70% {
		left: -1536px; opacity: 1; 
	}     
	72% {
		opacity: 0; 
	}     
	74% {
		opacity: 0; 
	}    
	75% {
		left: -2304px; opacity: 1; 
	}   	
	95% {
		left: -2304px; opacity: 1; 
	}   	
	97% { 
		left: -2304px; opacity: 0; 
	} 

	100% {
		left: 0; opacity: 0; 
	}
}

@media print {
  body {
    -webkit-print-color-adjust: exact; /* Chrome/Safari */
    print-color-adjust: exact;         /* Firefox */
  }

  .no-print {
    display: none;
  }

  .kta-card {
    background: url('image.jpg') no-repeat center center;
    background-size: cover;
  }
}