@font-face{
    font-family:"Mulish";
    src:url(/assets/fonts/Mulish/static/Mulish-Regular.ttf);
    font-weight:normal;
}
@font-face{
    font-family:"Mulish";
    font-weight:bold;
    src:url(/assets/fonts/Mulish/static/Mulish-Bold.ttf);
}
@font-face{
    font-family:"Intro";
    font-weight:normal;
    src:url(/assets/fonts/Intro/Intro.otf);
}
body{
    background-color:black;
    color:white;
    font-family:"Mulish",sans-serif,helvetica;
    font-size:14px;
}
.loader{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:999;
    background-image:url(/assets/img/logo.png),linear-gradient(45deg,black,rebeccapurple);
    background-size:200px,100%;
    background-position:center center,center center;
    background-repeat:no-repeat,no-repeat;
    border-bottom:10px solid purple;
}
.loading{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:none;
    z-index:9998;
    background:#000a;
}
.loading::before{
    position:absolute;
    content:"Processing...Please wait a moment";
    top:calc(30% - 60px);
    left:calc(50% - 150px);
    width:300px;
    height:130px;
    background:black url(/assets/img/loader.svg) no-repeat top center;
    background-position:top 10px center;
    background-size:80px;
    text-align:center;
    padding-top:90px;
    border:1px solid darkgoldenrod;
    border-radius:.32rem;
    color:darkgoldenrod;
}
.header{
    position:relative;
    padding:1rem 0;
    background:white;
    border-bottom:3px solid steelblue;
}
.footer{
    position:relative;
    background:#f0f0f0;
    padding:1rem 0;
}
.konten{
    text-align:justify;
}
.section1{
}
.section2{
}
.section3{
}
.copyright{
    text-align:center;
    font-weight:bold;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
    font-weight:bold;
}
.btn,a.btn{
    font-weight:bold;
    min-width:120px;
    letter-spacing:1px;
    padding:10px 20px;
    text-decoration:none;
    font-size:14px;
    font-family:"Intro","Mulish",sans-serif;
    border-radius:.32rem;
    border:0px;
}
.btn:active{
    position:relative;
    top:1px;
}
.btn.btn-default{
    background:white;
    color:darkgoldenrod;
}
.btn.btn-login,.btn.btn-login:hover,.btn.btn-login:focus{
    background:goldenrod url(/assets/img/btn-gold.jpg) center center no-repeat;
    box-shadow:none;
    transition:all .2s linear;
}
.btn.btn-login:active{
    position:relative;
    background-image:url(/assets/img/btn-gold.jpg) !important;
    transform:scale(.98);
}
.btn.btn-primary{
    background:steelblue;
    color:white;
}
.btn.btn-primary:focus,.btn.btn-primary:hover,.btn.btn-primary:active{
    background:steelblue!important;
    color:white!important;
}
.btn.btn-info{
    background:lightseagreen;
    color:white;
}
.btn.btn-info:hover,.btn.btn-info:focus,.btn.btn-info:active{
    background:lightseagreen!important;
    color:white!important;
}
.btn.btn-danger{
    background:indianred;
    color:white;
}
.btn.btn-danger:hover,.btn.btn-danger:focus,.btn.btn-danger:active{
    background:indianred!important;
    color:white!important;
}
.btn.btn-warning{
    background:darkorange;
    color:white;
}
.btn.btn-warning:hover,.btn.btn-warning:focus,.btn.btn-warning:active{
    background:darkorange!important;
    color:white!important;
}
.background{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:-1;
    background-image:url(../img/star.png);
    background-repeat:repeat;
    background-position:top left;
    background-size:900px;
}
label,.label{
    font-weight:bold;
    letter-spacing:.5px;
}
.form-control,.custom-select{
    font-size:14px;
    padding:8.5px 1rem;
    border-radius:.32rem;
    background:#2e2e2e;
    color:#f0f0f0;
    border:1px solid darkorange;
}
.form-control:focus,.custom-select:focus{
    background:#303030;
    color:#f0f0f0;
}
.form-control::placeholder{
    color:#c0c0c0;
}
select.form-control:not([size]):not([multiple]){
    height:auto;
}
.card{
    border-radius:.32rem;
    border-color:goldenrod;
    background:none;
}
.card .card-body{
    background:none;
}
.swal-footer{
    display:flex;
    justify-content:center;
}
.swal-button{
    min-width:120px;
}
.btn.btn-home{
    background:steelblue;
    border:0px;
    color:white;
}
.btn.btn-gold,.btn.btn-gold:active{
    background:goldenrod url(/assets/img/gold.png) no-repeat left 1rem center;
    background-size:24px;
    border:0px;
    color:black;
    text-align:right;
    text-shadow:1px 1px white;
}
.btn.btn-gold:active{
    background-image:url(/assets/img/gold.png)!important;
}
.btn.btn-silver,.btn.btn-silver:active{
    background:lightgrey url(/assets/img/silver.png) no-repeat left 1rem center;
    background-size:24px;
    text-align:right;
    border:0px;
    color:black;
    text-shadow:1px 1px white;
}
.btn.btn-silver:active{
    background-image:url(/assets/img/silver.png)!important;
}
.btn.btn-platinum,.btn.btn-platinum:active{
    background:silver url(/assets/img/platinum.png) no-repeat left 1rem center;
    background-size:24px;
    text-align:right;
    border:0px;
    color:black;
    min-width:150px;
    text-shadow:1px 1px white;
}
.btn.btn-platinum:active{
    background-image:url(/assets/img/platinum.png)!important;
}
.modal-content{
    background:black;
    border:0px;
    border-radius:.32rem .32rem;
}
.modal-header{
    background:orangered;
    border:0px;
    font-weight:bold;
    font-family:"Intro","Mulish",sans-serif;
    text-transform:uppercase;
}
.modal-body{
    background:black;
}
.modal-footer{
    border-top:3px solid orangered;
    background:#333;
    border-radius:0 0 .32rem .32rem;
}
.text-gold{
    color:goldenrod;
}
.btn-spin{
    background:url(/assets/img/btn-spin.png) no-repeat center center;
    background-size:200px 100px;
    border:0px;
    width:200px;
    height:100px;
}
.btn-spin:focus{
    outline:none;
}
.btn-spin:active:not(:disabled){
    position:relative;
    top:1px;
    transform:scale(.95);
    box-shadow:none;
}
.btn-spin:disabled{
    filter:grayscale(100%);
}
.superWheel .sWheel-marker{
    margin-top:13%;
}
.sWheel-title .sWheel-text {
    transform: rotateX(180deg) rotateY(180deg);
    text-align: left;
}
.superWheel .sWheel>.sWheel-txt-wrap>.sWheel-txt>div {
    padding-left: 75px!important;
    text-align: center;
    font-size: 20px;
    font-family: "Intro","Mulish",sans-serif;
    letter-spacing: 1px;
    padding-right:25px!important;
}
.modal-content .close{
    opacity:1;
}
.superwheel{
    position:relative;
}
.superwheel::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-150px;
    left:-150px;
    background:url(/assets/img/spin.png) no-repeat top center;
    background-size:650px 650px;
    background-position:top 27px center;
    z-index:-1;
}
.superwheel::after{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
    border-radius:50%;
    background:black url(/assets/img/center.png) center center no-repeat;
    background-size:80%;
    z-index:-1;
}
.swal-title{
    font-size:22px;
}
@media (max-width:350px){
    .wheeling{
        transform:scale(.9);
    }
}
@media (max-width:600px){
    .superwheel::before{
        background-size: 500px;
        background-position: top 53px left 48px;
    }
    .superwheel::after{
        transform:scale(.85);
    }
}