body{
margin-top: -10px;
/* width: 100%;
margin: 0 auto;
font-size: 16px;
line-height: 24px;
margin: 0 auto;
position: relative;
min-height: 100%;
-webkit-font-smoothing: antialiased;	
-webkit-background-size: cover;
-moz-background-size: cover;
overflow-y: hidden;
overflow-x: hidden;
/* background: no-repeat center center fixed;
background: linear-gradient(-45deg, #ac32e4, #7918f2, #4801ff);
background-color: #0cb2e6;
background-size: cover;*/
}
.bg-img{
background: #394557 url('../img/bg.png'); 
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
.logo{
margin-top: -45px;
width: 113px;
}
.logo-loader{
margin-top: -45px;
width: 57px;
}
.wrap {
background: rgba(0, 0, 0,0.80);
color:#eee;
-webkit-box-shadow: 0px 35px 44px -22px rgba(0,0,0,0.72);
-moz-box-shadow: 0px 35px 44px -22px rgba(0,0,0,0.72);
box-shadow: 0px 35px 44px -22px #1f181b;
padding: 40px 20px 40px 20px;
border-radius:8px;
margin-top: 20px;
}
.wrap h4{
font-size:16px;
color:#ffffff;
}
.wrap a{
font-weight: bold;
color: #555;
}
.title{
font-size:14px;
color:green;
margin-top: 40px;
margin-bottom: 20px;
}
ol li{
padding-top: 15px;
}
ol ol{
list-style-type: lower-alpha;
padding-left: 15px;
}

/* ------------------
    Watch
--------------------*/
#watch{
    color: #204397;
}


#watch .dash{
    display: inline-block;
    width: auto;
    padding: 24px 24px 0;
    height: 168px;
    line-height: 62px;
    text-align: center;
    border-radius: 20px;
    margin: -20px 12px;
}

#watch .dash .digit {
    display: block;
    font-size: 42px;
    line-height: 79px;
    height: 81px;
    float: left;
}

#watch .dash .digit .top, #watch .dash .digit .bottom{
    font-weight: 900;
}

#watch .dash span.dash_title{
    font-size: 16px;
    line-height: 16px;
    padding-top: 15px;
    font-weight: 300;
    display: block;
    text-align: center;
    clear: both;
}

/* ------------------
    Animationload
--------------------*/
.animationload {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 999999;
}
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    width: 200px;
    height: 200px;
    background-image: url("../img/kotapalu_logo.png");
    background-position: center;
    background-repeat: no-repeat;
}
/* ------------------
    Animated setting
--------------------*/
.animated{
    visibility: hidden;
}
.visible{
    visibility: visible;
}
.fieldset{
border-top: 1px solid #bbbbbb;
padding-top: 0px;
font-weight: bold;
}
.legend{
border-style: none;
border-width: 0;
font-size: 16px;
line-height: 20px;
margin-bottom: 0;
width: auto;
padding: 0 10px;
border: 0;
color:#777777;
text-transform: uppercase;
}
.info-user{
position: relative;
top:-10px;
font-size: 12px;
color: #666666;
}
.input-login {
width:87%;
height: 50px;
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
text-align: center;
background: none;
box-shadow: none;
border: 1px solid #bbbbbb;
color: green;
border-radius: 8px;
font-size: 14px;
z-index: 9999;
}
input:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0px 99999px #ffffff !important;
}
.input-login:-ms-input-placeholder {
color: #bbbbbb;
}
.input-login::-moz-placeholder{
color: #bbbbbb;
}
.input-login::-webkit-input-placeholder {
color: #bbbbbb;
}
.input-login:focus{
color: green;
}
.btn{
width: 30%;
margin-top: 20px;
margin-bottom: 10px;
}
.btn:focus{
outline: 0 !important;
}
.error{
width: 87%;
margin: auto;
text-align:center;
}
.p{
color:#555555;
font-size: 13px;
}
.paket{
margin-bottom: 40px;
}
.paket .panel-heading{
height: 40px !important;
}
.paket .panel-heading h3{
font-size: 18px;
padding: 0;
margin-top:0;
}
.paket .panel:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}
.panel-body{
border-bottom: 1px solid #eee;
last-child
}
.panel-body:nth-child(4){
border-bottom: 0px;
}
.bg-panel1{
color:#ffffff;
background-color: #888888 !important;
border-radius: 0;
}
.border-panel1{
border:1px solid #888888 !important;
}
.bg-panel2{
color:#ffffff;
background-color: #e67e22 !important;
border-radius: 0;
}
.border-panel2{
border:1px solid #e67e22 !important;
}
.bg-panel3{
color:#ffffff;
background-color: #2980b9 !important;
border-radius: 0;
}
.border-panel3{
border:1px solid #2980b9 !important;
}
.harga {
font-size: 2.5rem;
font-weight: 300;
}
.masa-aktif {
font-weight: 500;
font-size: 1rem;
}
.masa-aktif::before {
content: '/';
margin-right: 2px;
}
.beli{
min-width: 80px;
margin-top:10px;
}
.check{
font-size: 12px;
color: #888888;
}
.info{
font-size: 13px;
margin: 20px auto 40px auto;
border: 1px solid #ccc;
border-left:5px solid #0097bc;
border-radius: 3px;
padding: 10px;
color: #555555;
text-align: justify !important;
}
.info h3{
position:relative;
font-weight: bold;
font-size: 15px;
padding: 0;
margin-top:8px;
top:0;
}
.info ul{
padding-left: 20px;
}
.info li:nth-child(1){
padding-bottom:10px;
}
.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  /* background-color: rgba(255, 255, 255, 0.15); */
  background-color: rgba(0, 138, 255, 0.07) ; 
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  transition-timing-function: linear;
  border-radius: 30px;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(0, 138, 255, 0.06);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 65%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(0, 138, 255, 0.05);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 100px;
  height: 100px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(0, 138, 255, 0.04);
}
.bg-bubbles li:nth-child(10) {
  left: 75%;
  width: 60;
  height: 60px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
.copyright{
margin-top: 40px;
font-size: 11px;
color: #666666;
}
.cs{
margin: -3px auto 20px auto;
font-size: 12px;
color: #666666;
}
.cs h4{
font-size: 12px;
color: #555555;
}
@font-face {
font-family: 'nyessid';
src: url('../fonts/nyessid.eot?63281300');
src: url('../fonts/nyessid.eot?63281300#iefix') format('embedded-opentype'),
url('../fonts/nyessid.woff2?63281300') format('woff2'),
url('../fonts/nyessid.woff?63281300') format('woff'),
url('../fonts/nyessid.ttf?63281300') format('truetype'),
url('../fonts/nyessid.svg?63281300#nyessid') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'nyessid';
src: url('../fonts/nyessid.svg?63281300#nyessid') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "nyessid";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-lock:before { content: '\e800'; }
.icon-download:before { content: '\e801'; }
.icon-upload:before { content: '\e802'; }
.icon-attention-circled:before { content: '\e803'; }
.icon-calendar:before { content: '\e804'; }
.icon-drive:before { content: '\e805'; }
.icon-globe:before { content: '\e806'; }
.icon-arrows-cw:before { content: '\e807'; }
.icon-rss:before { content: '\e808'; }
.icon-rss-outline:before { content: '\e809'; }
.icon-wifi-1:before { content: '\e80a'; }
.icon-email:before { content: '\e80b'; }
.icon-emo-unhappy:before { content: '\e80c'; }
.icon-info-circled:before { content: '\e80d'; }
.icon-off:before { content: '\e80e'; }
.icon-clock-alt:before { content: '\e80f'; }
.icon-clock:before { content: '\e810'; }
.icon-spin4:before { content: '\e834'; }
.icon-location-1:before { content: '\f031'; }
.icon-phone-squared:before { content: '\f098'; }
.icon-mail-alt:before { content: '\f0e0'; }
.icon-gauge:before { content: '\f0e4'; }
.icon-circle:before { content: '\f111'; }
.icon-angle-circled-left:before { content: '\f137'; }
.icon-angle-circled-right:before { content: '\f138'; }
.icon-database:before { content: '\f1c0'; }
.icon-wechat:before { content: '\f1d7'; color:green;}
.icon-copyright:before { content: '\f1f9'; }
.icon-whatsapp:before { content: '\f232'; color:green;}
.icon-question-circle-o:before { content: '\f29c'; }
.icon-user-circle:before { content: '\f2bd'; }
.icon-user-circle-o:before { content: '\f2be'; }