a,
body,
div,
form,
html,
img,
input,
label,
p,
span {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: sans-serif, Arial
}

body,
html {
	min-height: 100%;
	overflow-x: hidden
}

body { 
    /* Image Location */ 
    background-image: url("../img/idr2.jpg"); 
  
    /* Background image is centered vertically and horizontally at all times */ 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    background-color: #000000; 
    /* Font Colour */ 
    color:white; 
} 

a {
	color: #
}

input,
label {
	vertical-align: middle;
	white-space: normal;
	background: 0 0;
	line-height: 1
}

label {
	position: relative;
	display: block
}

p::first-letter {
	text-transform: uppercase
}

.main {
	min-height: calc(100vh - 90px);
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.ie-fixMinHeight {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.ico {
	height: 16px;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 13px;
	margin-left: 14px
}

.logo {
	max-width: 200px;
	display: block;
	margin: 0 auto 30px auto
}

.logo * {
	fill: #000000
}

.lite .logo * {
	fill: #000000
}

h1 {
	text-align: center;
	color: #fff;
	font-size: 24px!important
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 16px
}

.wrap {
	margin: auto;
	padding: 40px;
	-webkit-transition: width .3s ease-in-out;
	transition: width .3s ease-in-out
}

@media only screen and (min-width:1px) and (max-width:575px) {
	.wrap {
		width: 100%
	}
}

form {
	width: 100%;
	margin-bottom: 20px
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes fadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.info {
	color: #281dfa;
	text-align: center;
	padding: 8px
	font-size:20px;
}

.notice{
	background-color:#9e0202;
	border-radius:3px;
	padding:5px;
	margin-bottom:10px;
	font-size:14px;
	color: #000000;
	text-align: center;
}

input {
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

input:focus {
	outline: 0
}

input[type=password],
input[type=text] {
	width: 100%;
	border: 1px solid background-color: rgba(255, 255, 255, .8);
	height: 44px;
	padding: 3px 20px 3px 20px;
	margin-bottom: 20px;
	border-radius: 6px;
	background-color: rgba(255, 255, 255, .8);
	-webkit-transition: -webkit-box-shadow .3s ease-in-out;
	transition: -webkit-box-shadow .3s ease-in-out;
	transition: box-shadow .3s ease-in-out;
	transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out;
	text-align:center;
}

input[type=password]:focus,
input[type=text]:focus {
	-webkit-box-shadow: 0 0 5px 0 rgba(255, 255, 255, 1);
	box-shadow: 0 0 5px 0 rgba(255, 255, 255, 1)
}

.bt {
	opacity: .4
}

input[type=submit] {
	background: #3e4d59;
	color: #fff;
	border: 0;
	cursor: pointer;
	text-align: center;
	width: 100%;
	height: 44px;
	border-radius: 6px;
	-webkit-transition: background .3s ease-in-out;
	transition: background .3s ease-in-out
}

input[type=submit]:focus,
input[type=submit]:hover {
	background: #33404a
}

/* tombol switch voucher & member */
.tombol {
	background: #3e4d59;
	color: #fff;
	border: 0;
	cursor: pointer;
	text-align: center;
	width: 49%;
	height: 35px;
	border-radius: 6px;
	-webkit-transition: background .3s ease-in-out;
	transition: background .3s ease-in-out
}

.tombol:focus,
.tombol:hover {
	background: #33404a
}

table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 20px
}

table td {
	color: #fff;
	border-bottom: 1px solid #e6e6e6;
	padding: 10px 4px 10px 0
}

table td:first-child {
	font-weight: 700
}

.lite {
	background: #fff
}

.lite input[type=password],
.lite input[type=text] {
	border: 1px solid #c3c3c3
}

.lite .info,
.lite h1,
.lite table td {
	color: #444
}

.lite input[type=password]:focus,
.lite input[type=text]:focus {
	-webkit-box-shadow: 0 0 5px 0 rgba(62, 77, 89, .2);
	box-shadow: 0 0 5px 0 rgba(62, 77, 89, .2)
}

.dark {
	background: #343434
}

.dark input[type=submit] {
	background: #dc3a41
}

.dark input[type=submit]:focus,
.dark input[type=submit]:hover {
	background: #b92f35
}

.dark .tombol {
	background: #dc3a41
}

.dark .tombol:focus,
.dark .tombol:hover {
	background: #b92f35
}

.dark input[type=password],
.dark input[type=text] {
	background-color: #fff
}

.dark a {
	color: #dc3a41
}

.dark table td {
	border-bottom: 1px solid #505050
}

.info.alert {
	color: #da3d41
}

@media (min-width:576px) {
	.wrap {
		width: 410px
	}
	* {
		font-size: 14px!important
	}
}
@keyframes rainbow {
0%{background-position:0 50%}
50%{background-position:100% 25%}
100%{background-position:0 50%}
}
.left{float:left}
.right{text-align:right;float:right}
.center{text-align:center}
main{max-width:400px;margin:0 auto;animation:fadein 1s;-moz-animation:fadein 1s;-webkit-animation:fadein 1s;-o-animation:fadein 1s}
@keyframes fadein {
from{opacity:0}
to{opacity:1}
}
@-moz-keyframes fadein {
from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadein {
from{opacity:0}
to{opacity:1}
}
@-o-keyframes fadein {
from{opacity:0}
to{opacity:1}
}
a{text-decoration:none}
.h1,.h2,.h3,.h4,.h5{font-weight:700;margin-top:0}
.h3{font-size:24px}
.h4{font-size:20px}
.h5{font-size:16px}
.bck-red{background-color:#ff656c}
.bck-blue{background-color:#08f}
.bck-green{background-color:#2fcc71}
.u-white{color:#fff}
@keyframes grow-75 {
0%{width:0}
100%{width:calc(75% - 20px)}
}
@keyframes grow-20 {
0%{width:0}
100%{width:calc(20% - 20px)}
}
@keyframes bounce {
0%{transform:translateX(0)}
50%{transform:translateY(10px)}
100%{transform:translateX(0)}
}
#header{color:#fff;padding:10px 20px 35px;position:relative;overflow:hidden}
#header .header-background-elements .header-circle{background:#27c368;width:100px;height:100px;position:absolute;border-radius:50%;z-index:0;left:-40px;top:70px}
#header .header-background-elements .header-circle.circle-right{top:-70px;left:auto;right:-30px;width:170px;height:170px}
#header .header-background-elements .dashed-shape{border:1px dashed rgba(255,255,255,0);width:240px;height:240px;border-radius:80px;position:absolute;transform:rotate(45deg);left:calc(50% - 120px);top:85px}
#header .header-background-elements .dashed-shape.shape-2{width:160px;height:160px;top:140px;border-radius:40px;left:calc(50% - 80px)}
#header .header-background-elements .dashed-shape.shape-3{width:50px;height:50px;top:135px;border-radius:0;left:calc(50% - 25px)}
#header .header-background-elements .clouds{position:absolute;left:0;bottom:0}
#header .header-background-elements .clouds .cloud-circle{width:150px;height:150px;border-radius:50%;background:#fefefe;position:absolute;left:-20px;bottom:-70px;animation:bounce 10s infinite}
#header .header-background-elements .clouds .cloud-circle.circle-2{width:80px;height:80px;left:120px;bottom:-40px;animation:bounce 7s infinite}
#header .header-background-elements .clouds .cloud-circle.circle-3{width:60px;height:60px;left:180px;bottom:-10px;animation:bounce 6s infinite}
#header .header-background-elements .clouds .cloud-circle.circle-4{width:140px;height:140px;left:220px;bottom:-80px;animation:bounce 12s infinite}
#header .header-background-elements .clouds .cloud-circle.circle-5{width:80px;height:80px;left:340px;bottom:-20px;animation:bounce 10s infinite}
#header .header-background-elements .clouds .cloud-circle.circle-6{width:130px;height:130px;left:390px;bottom:-40px;animation:bounce 12s infinite}
#header .header-menu{z-index:5;font-size:20px;position:relative;margin-bottom:20px;text-align:center}
#header .header-menu .left,#header .header-menu .right{width:15%}
#header .header-menu .left a,#header .header-menu .right a{width:30px;height:30px;display:inline-block;text-align:center;line-height:28px;border-radius:50%;color:#fff}
#header .header-menu .left a:hover,#header .header-menu .right a:hover{background:rgba(255,255,255,0.4)}
#header .header-menu .center{width:70%;float:left}
#header .header-user-info{z-index:5;position:relative;text-align:center;clear:both}
#header .header-user-info .user-picture{width:100%;height:100%;margin:0 auto}
.profile-section{padding:10px 15px;width:calc(100% - 30px);background:linear-gradient(#fff,#e7e6e9)}
.profile-section .panel{overflow:hidden;padding:15px 10px;border-radius:2px;position:relative;box-shadow:0 5px 10px rgba(0,0,0,0.1);margin:5px 0}
.profile-section .panel.panel-wallet{box-shadow:none;padding:0}
.profile-section .panel.panel-wallet:after,.profile-section .panel.panel-wallet:before{content:'';display:block;float:left;position:absolute;width:0;z-index:10;border:15px solid transparent;border-left:0;border-top:100px solid #2fcc71;border-bottom:0;left:calc(50% - 10px)}
.profile-section .panel.panel-wallet:before{left:auto;right:calc(50% - 10px);border:15px solid transparent;border-right:0;border-top:0;border-bottom:100px solid #08f}
.profile-section .panel.panel-wallet .left,.profile-section .panel.panel-wallet .right{width:calc(50% - 40px);z-index:8;height:20px;border-radius:5px 0 0 5px;padding:15px}
.profile-section .panel.panel-wallet .left div,.profile-section .panel.panel-wallet .right div{margin:0 0 8px}
.profile-section .panel.panel-wallet .left div:last-child i,.profile-section .panel.panel-wallet .right div:last-child i{float:right;border:1px dashed #fff;border-radius:50px;display:block;width:20px;height:20px;font-size:10px;text-align:center;line-height:20px}
.profile-section .panel.panel-wallet .right{border-radius:2px 5px 5px 0;text-align:left}
.button-tab{background:transparent;border:none;font-size:14px;cursor:pointer}
.box{text-align:center;margin:5px auto}
.Informasi{font-size:12px}
.no-border{margin-bottom:0;color:#fff}
.no-border tr td,.no-border tr th{border-width:0}
.table{width:100%;border-collapse:collapse!important}
.table td,.table th{padding:5px;border:1px solid #f2f2f2;color:#f3f4f5}
.table td,a,th{color:#000;text-decoration:none}
.table2{width:100%;border-collapse:collapse!important;text-align:left}
.table2 td,.table2 th{padding:5px;border:1px solid #000!important}
.table2 td,a,th{color:#000;text-decoration:none}
input{width:98%;height:42px;box-sizing:border-box;border-radius:5px;border:1px solid #ccc;margin-bottom:10px;font-size:1rem;padding:0 20px;outline:none;text-align:center}
.username{width:49%}
.password{width:49%}
.userkv{width:98%}
input:active,input:focus{border:1px solid #ff656c}
.btn{width:49%;height:40px;box-sizing:border-box;border-radius:5px;color:#fff;font-weight:700;text-transform:uppercase;font-size:12px;outline:none;cursor:pointer;margin:5px auto}
.btn.disabled{pointer-events:none;cursor:not-allowed;opacity:.65;-webkit-box-shadow:none;box-shadow:none}
.btn-kecil{width:32%;height:35px;box-sizing:border-box;border-radius:5px;color:#fff;font-weight:700;text-transform:uppercase;font-size:12px;outline:none;cursor:pointer;margin:5px auto;padding:0}
.btn-full{width:100%;margin:0 auto 10px}
.btn-group{text-align:center;display:block}
.btn-merah{background:#ff656c;border:1px solid #e15960}
.btn-merah:hover{opacity:.8}
.btn-hijau{background:#2fcc71;border:1px solid #71C52C}
.btn-hijau:hover{opacity:.8}
form{text-align:center}
.infoError{text-align:center;background-color:#fff8e1;border-radius:5px;padding:5px;margin:10px auto;font-size:14px;color:#d9534f;border:1px solid #d9534f}
.blink{animation:blink-animation 1s steps(5,start) infinite;-webkit-animation:blink-animation 1s steps(5,start) infinite}
@keyframes blink-animation {
to{visibility:hidden}
}
@-webkit-keyframes blink-animation {
to{visibility:hidden}
}
.paket-voucher{text-align:center;padding:5px;font-size:1rem;margin:5px auto}
.paket-voucher h3{font-size:1rem}
.stats{border:1px solid #2fcc71;overflow:auto;padding:5px;margin-top:-1px;font-size:14px;color:#333;border-radius:5px;text-shadow:1px 1px 1px #fff}
.stats strong{display:block;font-size:11px;font-weight:700}
.stats div{border-right:1px solid #2fcc71;width:33%;float:left;text-align:center}
.stats div:nth-of-type(3){border:none}
.beli-voucher{border-radius:10px;height:25px;width:70%;display:inline-block;padding:4px;text-shadow:none}