/*DESAIN HALAMAN PENDUKUNG*/
*{font-size:12px;}
body {font-family: "Lato", sans-serif;font-size:12px;}
.utama{background-color:red;width:100%;height:auto;top:0;left:0;}
.anime {top:30%;left:45%;width: 100px;height: 100px;opacity:0; background-color: red;z-index:5;animation-name: example1;animation-duration: 5s;}
.info{display:none; position:  fixed; z-index:1; left:20%;top:30%;max-width: 90%; max-height:90%; background-color: white; padding:   2px;border:    1px solid red; }

input[type=text], select, textarea,input[type=number],input[type=search],input[type=email],input[type=password] {width:    100%;height:   20px;padding:  1px;border:   1px solid #ccc;border-radius:2px; margin-bottom:5px;box-shadow:2px 2px 2px red;}

input[type=text]:hover{background-color:yellow;}
input[type=submit],input[type=reset]{background-color: #4CAF50; color:   white;padding: 1px; border:  none; border-radius: 1px; cursor:  pointer; margin:  2px;width:   auto;font-size:14px;	}
input[type=password] {width: 100%;padding: 1px 1px;margin:  2px 0;display: inline-block;border:  1px solid #ccc;box-sizing: border-box;}
input[type=submit]:hover { background-color: black;}
input[type=reset]:hover {background-color: yellow;color:black;}
input:focus{ background-color:yellow;}
.kanan{top:65px;width:80%;height:85%;left:20%;position:fixed;overflow:auto;font-size: 12px;float:right;right:0px;padding-top:5px;background-color:lightblue;}
.kiri {top: 65px;width:20%;height: 85%;left: 0;position: fixed;overflow:auto;float:left;left:0;padding-top:5px;background-color:darkblue;}
.kotakTombol{display:  none; position: fixed; z-index:  2; left:     20%;bottom:   10%;width:    auto; height:   auto; background-color:skyblue; padding:  5px;overflow-x:auto;}
.kwitansi{	display:block;overflow-x:auto;top:0;left:0;position: fixed; z-index: 2; width:100%;max-height:100%;border:2px solid black;box-shadow:1px 1px 1px;background-color:white;color:black;padding:2px;}
.kwitansi-alamat{color:black;font-weight:bold;font-family:"Times New Roman", "Times", "serif";font-size:10px;text-align:justify;}
.kwitansi-des{	float:right;width:75%;height:90px;background-color:white;font-weight:bold;text-align:center;font-family:"Times New Roman", "Times", "serif";margin:3px;}
.kwitansi-deskripsi{color:red;font-weight:bold;font-family:"Times New Roman", "Times", "serif";font-size:13px;text-align:justify;letter-spacing:2px;}

.kwitansi-logo{		
			float:left;
			width:90%;
			height:90%;
			background-image:radial-gradient(lightblue,blue);
			border:5px solid darkblue;
			border-radius:78% 25% 78% 25%;
			color:red;
			font-size:30px;
			font-weight:bold;
			text-align:center;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:3px 3px 3px white;
			margin:10px;
	
}
.kwitansi-invoice{		
			float:right;
			width:19%;
			height:100px;
			font-weight:bold;
			text-align:left;
			font-size:20px;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:1px 1px 1px red;
			word-spacing:2px;
}
.kwitansi-invoice-isi{		
			font-weight:bold;
			text-align:left;
			font-size:50px;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:3px 3px 3px white;
			word-spacing:2px;
			border:2px solid black;
			float:right;
}
.kwitansi .ket{
			top:101px;
			width:100%;
			height:100px;
			float:right;
			background-color:red;
		}
.kwitansi .kwitansi-header{ 
			top:0;
			float:left;
			width:99%;
			height:100px;
			background-color:white;
			margin:5px;
			z-index:  3; 
			border-bottom:5px solid black;
			border-top:1px solid black;
			border-left:1px solid black;
			border-right:1px solid black;
			box-shadow:1px 1px 1px;
		}
.kwitansi .kwitansi-bodi{ 
			top:102px;
			float:left;
			width:99%;
			height:100px;
			background-color:white;
			margin:5px;
			z-index:  4; 
			padding-left:5px;
			
		}


.kwitansi-nama{
			color:blue;
			font-weight:bold;
			font-family:"Times New Roman", "Times", "serif";
			font-size:25px;
			text-align:justify;
			word-spacing:10px;
			letter-spacing:5px;
	
}

.kwitansi .kwitansi-table{ 
			top:400px;
			float:left;
			width:99%;
			height:500px;
			background-color:white;
			margin-top:30px;
			z-index:  3; 
			font-size:14px;
			font-family:"Times New Roman", "Times", "serif";
			
		}


.kwitansi-title{		
			float:left;
			width:80%;
			height:100px;
			font-weight:bold;
			text-align:left;
			font-size:25px;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:3px 3px 3px white;
			word-spacing:2px;
}

.modal {
			display:   none; 
			position:  fixed; 
			z-index:   1;
			left:      25%;
			top:       0;
			width:     80%;
			height:    500px; 
			overflow:  auto; 
			background-color: rgb(0,0,0);
			background-color: rgba(0,0,0,0.7);
			padding-top:60px;
	}
.modal-content {
			background-color: #fefefe;
			margin:  5% auto 15% auto; 
			border:  1px solid #888;
			width:   80%;
}
.notif{		display: none; 
			position: fixed; 
			z-index:4; 
			left:30%;
			top:30%;
			min-width:150px; 
			min-height:50px; 
			background-color: red;
			padding:5px 5px;
			color:white;
			box-shadow:2px 2px 2px black;
			text-align:justify;
		}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 98%;
  border: 1px solid #ddd;
  margin-left:5px;
  margin-right:5px;
}

th, td {
  text-align: left;
  padding:1px;
  border: 1px solid #ddd;
  font-size:12px;
}

/*KHUSUS ANIMASI WEB KIT
/* Menambah Animasi ZOOM pada container yang dipilih*/
.animate {	-webkit-animation: animatezoom 0.7;
			animation: animatezoom 0.7s}
@-webkit-keyframes animatezoom { 
			from {-webkit-transform: scale(0)}  
			to {-webkit-transform: scale(1)}
	}  
@keyframes animatezoom { 
			from {transform: scale(0)}  
			to {transform: scale(1)}
	}

 /*TAMPILAN APLIKASI UNTUK RESOLUSI 300px */
 
@media screen and (max-width: 400px) {
body {
  font-family: "Lato", sans-serif;
}
*{left:1px;right:1px;font-size:8px;}
 .info{display: none; position: fixed; z-index:1; left:1%;top:30%;max-width:90%; max-height:90%; background-color: white; padding-right:10px;border:1px solid red;}

input[type=text],input[type=password],input[type=number],input[type=search],input[type=email]{
			width:    98%;
			height:   15px;
			padding:  1px;
			border:   1px solid #ccc;
			border-radius:2px; 
			margin-bottom:5px;
			box-shadow:2px 2px 2px red;
			
			}
.notif{		display: none; position: fixed; z-index:4; left:0;top:30%;width:100px; min-height:20px; background-color:red;padding:5px 5px;color:white;box-shadow: 2px 2px 2px black;text-align:justify;}

.kwitansi{	display:block;
            overflow-x:auto;
			top:0;
			left:0;
			position: fixed; 
			z-index: 2; 
			width:100%;
			height:100%;
			border:1px solid black;
			box-shadow:1px 1px 1px red;
			background-color:white;
			color:black;
			padding-right:50px;
		}
.kwitansi-alamat{
			color:black;
			font-weight:bold;
			font-family:"Times New Roman", "Times", "serif";
			font-size:8px;
			text-align:left;
}
.kwitansi-des{	
			width:83%;
			height:90px;
			background-color:white;
			font-weight:bold;
			text-align:center;
			font-family:"Times New Roman", "Times", "serif";
			margin:1px;
			top:0;
	
}
.kwitansi-deskripsi{
			color:red;
			font-weight:bold;
			font-family:"Times New Roman", "Times", "serif";
			font-size:8px;
			text-align:left;
			letter-spacing:2px;
}

.kwitansi-logo{		
			float:left;
			width:70%;
			height:60%;
			background-image:radial-gradient(lightblue,blue);
			border:5px solid darkblue;
			border-radius:75% 25% 75% 25%;
			color:red;
			font-size:25px;
			font-weight:bold;
			text-align:center;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:3px 3px 3px white;
			padding-top:10px;
			top:0;
	
}
.kwitansi-invoice{		
			float:right;
			width:19%;
			height:100px;
			font-weight:bold;
			text-align:left;
			font-size:20px;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:1px 1px 1px red;
			word-spacing:2px;
}
.kwitansi-invoice-isi{		
			font-weight:bold;
			text-align:left;
			font-size:50px;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:3px 3px 3px white;
			word-spacing:2px;
			border:2px solid black;
			float:right;
}
.kwitansi .ket{
			top:101px;
			width:100%;
			height:100px;
			float:right;
			background-color:red;
		}
.kwitansi .kwitansi-header{ 
			top:0;
			float:left;
			width:99%;
			height:100px;
			background-color:white;
			margin:5px;
			z-index:  3; 
			border-bottom:5px solid black;
			border-top:1px solid black;
			border-left:1px solid black;
			border-right:1px solid black;
			box-shadow:1px 1px 1px;
		}
.kwitansi .kwitansi-bodi{ 
			top:102px;
			float:left;
			width:99%;
			height:100px;
			background-color:white;
			margin:5px;
			z-index:  4; 
			padding-left:5px;
			
		}


.kwitansi-nama{
			color:blue;
			font-weight:bold;
			font-family:"Times New Roman", "Times", "serif";
			font-size:10px;
			text-align:center;
			word-spacing:1px;
			letter-spacing:1px;
	
}

.kwitansi .kwitansi-table{ 
			top:400px;
			float:left;
			width:99%;
			height:500px;
			background-color:white;
			margin-top:30px;
			z-index:  3; 
			font-size:14px;
			font-family:"Times New Roman", "Times", "serif";
			
		}


.kwitansi-title{		
			float:left;
			width:80%;
			height:100px;
			font-weight:bold;
			text-align:left;
			font-size:25px;
			font-family:"Times New Roman", "Times", "serif";
			text-shadow:3px 3px 3px white;
			word-spacing:2px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 1px;
  border: 1px solid #ddd;
}
}