@font-face{font-family:'fontello';src:url(../font/fontello.eot?30242799);src:url(../font/fontello.eot?30242799#iefix) format("embedded-opentype"),url(../font/fontello.woff2?30242799) format("woff2"),url(../font/fontello.woff?30242799) format("woff"),url(../font/fontello.ttf?30242799) format("truetype"),url(../font/fontello.svg?30242799#fontello) format("svg");font-weight:400;font-style:normal}
*,::before,::after{box-sizing:border-box}
h3{margin:0 auto 10px;font-size:1.2em}
body{background-color:#212E36;font-family:Lato,"Helvetica Neue",sans-serif;padding:0;margin:0;font-size:14px}
iframe{float:left;height:22px;width:100%}
.bg-page{background:url(../img/bg-full.jpg) no-repeat center center fixed;background-color:#212E36;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
.icon{font-family:"fontello";font-style:normal;font-weight:400;font-size:1.2em;speak:none;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none;line-height:1em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrapper{margin:0 auto;padding:0 10px}
.box-wrapp{margin:20px auto;padding:0;max-width:400px;color:#fff;border:4px double #57aaff;border-radius:3px;background-color:rgba(51,51,51,0.3);transition:.3s;text-align:center;min-height:300px;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}
}
.appbar{padding:5px 10px;text-align:center;margin:0 auto}
.appbar-description{font-size:14px;text-shadow:0 0 2px #333}
.appbar-title{font-size:26px;margin:0 auto;text-shadow:1px 1px 0 #4fc4f6}
hr.image{border:2px solid transparent;border-image:url(../img/RainbowLine.jpg);border-image-slice:1;clear:both}
.main{padding:0 10px;color:#fff;text-align:center}
.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:#f3f4f5;text-decoration:none}
.table2{width:100%;border-collapse:collapse!important;background-color:rgba(255,255,255,0.67);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}
.username{width:49%}
.password{width:49%}
.userkv{width:98%}
input:active,input:focus{border:1px solid #ff656c}
.btn{width:49%;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}
.btn.disabled{pointer-events:none;cursor:not-allowed;opacity:.65;-webkit-box-shadow:none;box-shadow:none}
.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:#8bbd58;border:1px solid #71C52C}
.btn-hijau:hover{opacity:.8}
form{text-align:center}
.infoError{background-color:#fff8e1;border-radius:2px;padding:5px;margin:10px auto;font-size:12px;color:#d9534f}
.bottombar{color:#ddd;padding:8px 16px;border-top:1px dashed #4fc4f6}
.copy{font-size:.9em}
.copy a{color:#ccc;text-decoration:none}
.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}
}
#Date{margin:10px;font-size:12px;text-align:center}
#jam-kanan{margin:2px;display:table-cell}
.widget-sholat{width:auto;overflow:hidden;background-color:rgba(51,51,51,0.4);border:1px solid #57aaff;margin:0 auto;border-radius:5px}
.widget-sholat-container{width:100%;padding:0;margin:0;float:left;overflow:hidden}
.widget-sholat-container .head{height:60px;width:100%;float:left;padding-left:5px;padding-top:3px;position:relative}
.widget-sholat-container .head .logo{height:35px;width:35px;display:block;margin-right:3px;margin-top:10px;left:10px;position:absolute}
.widget-sholat-container .head .title{color:#ff9c00;overflow:hidden;padding-top:5px;display:table;margin:4px auto;text-align:center;padding-left:5px}
.widget-sholat-container .head .title .sub{color:#fff;font-size:10px;letter-spacing:.5px;font-weight:400;padding-top:2px}
.widget-sholat-container .head .title h3{color:#4fc4f6;font-size:18px;line-height:5px;font-weight:700}
.widget-sholat-container .id-container{background:#4fc4f6;width:100%;padding-left:4%;overflow:hidden;color:#fff;font-size:11px;border-top:1px solid #333;text-align:left;padding-bottom:5px;border-bottom:1px solid #333}
.widget-sholat-container .id-container .title{width:100%;line-height:11px;overflow:hidden;position:relative;margin:0 5px 0 0}
.widget-sholat-container .id-container .title .desc{font-size:12px;width:25%;text-transform:uppercase;padding:3px 5px 0 0;float:left;display:inline}
.widget-sholat-container .id-container .title .ket{font-size:11px;font-weight:700;padding:3px 5px 0 0;float:left;display:inline}
.widget-sholat-container .id-container .title .nilai{font-size:12px;padding:3px 5px 0 0;float:left;display:inline}
.widget-sholat-container .foot{color:#fff;height:auto;width:100%;float:left;margin:0;overflow:hidden;position:relative;padding-top:3px;padding-bottom:5px;font-size:10px}
.widget-sholat-container .foot .subfoot{display:table;text-align:center;margin:0 auto}
.widget-sholat-container .waktu-container{padding:0;width:100%;overflow:hidden}
.widget-sholat-container .waktu-container .waktu{background:#4fc4f6;width:100%;height:20px;overflow:hidden;position:relative;margin:0 10px 0 0;border-bottom:1px solid #333;text-align:left;padding:0}
.widget-sholat-container .waktu-container .waktu .title{color:#4fc4f6;font-size:12px;font-weight:700;letter-spacing:1px;background:#333;float:left;width:40%;padding:1px 0 2px 10px;margin:0 auto}
.widget-sholat-container .waktu-container .waktu .pukul{color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:17px;text-shadow:1px 0 0 #333}
.toggle-jadwal{position:absolute;top:18px;right:10px;font-size:12px;width:40px;height:20px;margin:0 auto;padding:0;cursor:pointer;border-radius:3px;color:#fff;border:none}
.Show{display:none}
.waktu-container,.id-container{display:none}
.merahmuda{background:#e86459}
.birumuda{background:#4fc4f6}
.img-responsive{width:100%;height:auto;margin:10px auto}
.modal{display:none;opacity:0;position:fixed;z-index:1;padding-top:15%;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000;background-color:rgba(0,0,0,0.4);transition:all .3s}
.modal-content{background-color:#fff;margin:0 auto;padding:5px;border:1px solid #ddd;border-radius:2px;max-width:400px;display:table;text-align:center}
.modal-content h1{font-size:.9rem;margin:0 auto;color:#333}
.close{color:red;font-weight:700;font-size:1rem;cursor:pointer;background:transparent;border:none;margin-top:-10px;padding:5px}
.close:hover,.close:focus{color:#333;text-decoration:none;cursor:pointer}
.close{transition:all .3s}
.countdown-wrapp{margin:10px 10px 2px;padding:10px 10px 5px;max-width:400px;border:1px dashed #fff}
.countdown-wrapp h4{color:#fff;font-size:14px;margin:0 auto;margin-top:-20px;margin-bottom:5px;text-transform:uppercase;letter-spacing:1px;text-shadow:2px 0 0 #333}
.countdown-wrapp span{background:#4fc4f6;padding:1px 5px}
.countdown-inner{position:relative;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;height:auto;width:100%;background-color:transparent;border-radius:3px;box-shadow:none}
.clock-column{margin-right:10px;text-align:center;position:relative;width:15%}
.clock-column::after{content:':';display:block;height:.25rem;width:.25rem;font-size:36px;font-weight:200;color:#fff;position:absolute;top:-8px;right:-5px;-moz-animation:mymove 1s ease infinite;-webkit-animation:mymove 1s ease infinite}
@-webkit-keyframes mymove {
0%{opacity:1;text-shadow:0 0 20px #00c6ff}
50%{opacity:0;text-shadow:none}
100%{opacity:1;text-shadow:0 0 20px #00c6ff}
}
@-moz-keyframes mymove {
0%{opacity:1;text-shadow:0 0 20px #00c6ff}
50%{opacity:0;text-shadow:none}
100%{opacity:1;text-shadow:0 0 20px #00c6ff}
}
.clock-column:last-child::after{display:none}
.clock-column:last-child{margin-right:0}
.clock-label{text-transform:uppercase;color:#fff;font-size:12px;font-weight:700;text-align:center;margin:0 auto;margin-top:5px;padding-top:5px;text-shadow:0 0 20px #48C8FF}
.Bhari{border-top:2px solid red}
.Bjam{border-top:2px solid #FF0}
.Bmenit{border-top:2px solid #0F0}
.Bdetik{border-top:2px solid #4fc4f6}
.clock-timer{color:#fff;font-size:14px;font-weight:700;line-height:1;margin:0 auto}
.paket-voucher{text-align:center;padding:5px;font-size:.8rem;margin:5px auto}
.paket-voucher h3{font-size:.8rem}
.stats{border:1px solid #57aaff;overflow:auto;padding:5px;margin-top:-1px;font-size:14px;color:#fff;font-weight:600;border-radius:5px;text-shadow:0 0 0 #333}
.stats strong{display:block;font-size:11px;font-weight:700}
.stats div{border-right:1px solid #57aaff;width:33.33333%;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}
@media only screen and (max-width: 414px) {
.modal-content{margin:0 5px}
.waktu-container li{width:auto}
}
@media only screen and (max-width: 767px) {
.box-wrapp{background:url(../img/bg-full.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
}
@media (min-width: 768px) {
.bg-home{background:url(../img/bg-full.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-color:#212E36}
}