body {            
    background-color:#FFF;
}
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 30px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 30px;
    line-height: 30px; /* Vertically center the text there */
    background-color: #000;
}

a, a:hover{ text-decoration:none;}
.bingkai-top {
    width: 100%;
    height: 180px;    
    position: absolute;
    background-image: linear-gradient(#596CF9, #59F968);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 50% 70%;
    border-bottom-right-radius: 50% 70%;
    z-index:-1000;
}
.menu {
    background-color: transparent;
    color: #FFF;
    width: 100%;
    text-align: center;
    border-bottom:1px solid #DDD; padding-bottom:10px; 
    border-bottom-left-radius:60px;
    border-bottom-right-radius: 60px;
    padding: 2px;
    margin-bottom: 0px;
}
.menu a{  margin-left:10px; margin-right:10px; color:#FFF;}
#judul-undian{ color:#FFF; margin-top:10px;}
.nomor-undian {
    background-color: #000;
    color: #F3BE03;
    font-size: 42px;
    padding: 5px 30px;
    border: 3px solid #000;
    border-radius: 70px;    
    letter-spacing: 5px;    
}
.btn-acak{ background-color:#ff0000; padding:8px 30px; border:1px solid #ff0000; color:#FFF; border-radius:30px; font-size:18px;}
.undian a:hover{ color:#FFF;}
.kolom-list-rewards {
    margin-top: 0%;
    background-color: #FFF;
    border: 3px solid #F3BE03;
    border-radius: 20px;
    height: 300px auto;
    padding: 20px;
    margin-bottom: 10px;
}
.kolom-list {
    margin-top:0%;
    background-color: #FFF;
    border: 3px solid #F3BE03;
    border-radius:20px;
    height:350px;
    padding:20px;
    margin-bottom:10px;
}
.kolom {    
    height: 250px;
    width: 100%;    
    overflow: auto;
    margin-bottom: 20px;
}
.no-menang:nth-child(even) {
    background: #F7F7F7;
    font-weight: bold;
    padding: 5px;
}

.no-menang:nth-child(odd) {
    background: #FFF;
    font-weight: bold;
    padding: 5px;
}
.footer{ color:#FFF; font-size:12px;}
.kolom-list .title-list{ border-bottom:0px solid #DDD; padding-bottom:10px;}
.menu .active{ background-color:#ff0000; color:#FFF; padding:2px 10px; border-radius:5px;}
.data {
    width: 100%;
    border: 3px solid #F3BE03;
    border-radius: 20px;
    margin-top: 20px;
}
.content{ background-color:#FFF; padding:20px; border:1px solid #DDD; border-radius:5px;margin-top:20px; margin-bottom:30px;}
.btn a{ color:#000;}
.btn a.active{ color:#FFF;}
.btn{ border:1px solid #DDD;}
.btn-primary{ background-color: #5437A5; color: #FFF; border:1px solid #5437A5; }
.loading {
    display: none;
}
.table > thead > tr > th{ background-color: #764FE1; color: #FFF; font-weight: normal; }
.table > tbody > tr > td{ padding: 3px 5px; }
.modal .modal-header{ background-color: #F3BE03; color: #FFF; }

@media (max-width: 767px){
    .bingkai-top {
        width: 100%;
        height: 180px;    
        position: absolute;
        background-image: linear-gradient(#8459f9, #4c3196);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 0% 0%;
        border-bottom-right-radius: 0% 0%;
        z-index:-1000;
    }
}