body{ font-family: arial; }

/* Sets the background image for the wheel */
.the_wheel{
    background-image: url(../images/bg_wheel.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    margin-top: 50px;
}

.the_wheel:hover{
    background-image: url(../images/bgh_wheel.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}
.spin_table{ float: left; width: 70%; }
.spin_arrow{ /*display: table; margin: 0 auto;*/    
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: auto;}
/* Do some css reset on selected elements */
h1, p{ margin: 0; }

div.power_controls{ 
    margin-left:70px;
    max-height: 580px;
    overflow: auto; 
}

div.html5_logo{ margin-left:70px; }

/* Styles for the power selection controls */
table.power{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}

table.power th{
    background-color: white;
    cursor: default;
}

td.pw1{ background-color: #6fe8f0; }
td.pw2{ background-color: #86ef6f; }
td.pw3{ background-color: #ef6f6f; }

/* Style applied to the spin button once a power has been selected */
.clickable{ cursor: pointer; }

/* Other misc styles */
.margin_bottom{ margin-bottom: 5px; }
#canvasContainer{ position: relative; }
 
#canvas{
    z-index: 1;
    margin-top: 5px;
}
 
#prizePointer{ z-index: 999; }
.div-result{
    border: 10px solid #ffd412;
    background: #f9eed0;
    text-align: center;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 10px #fbecb8;
}
.txt-h2{
    color: #161615;
    font-size: 2em;
    font-family: 'Langar', cursive;
    text-align: center;
}
.div-his{
    background: orange;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 0px 10px #fbecb8;
}
.his1{
    width: 100%;
    padding: 10px;
    background: #ffbb40;
    text-align: center;
}
.his2{
    width: 100%;
    padding: 10px;
    background: orange;
    text-align: center;
}
@keyframes blinker {
  50% { opacity: 0; }
}
.his3{
    width: 100%;
    padding: 10px;
    background: #ffbb40;
    text-align: center;
    color: #e00404;
    animation: blinker 1s linear infinite;
}

.txt-th{
    /*color: #FFF;
    font-size: 2em;*/
    font-family: 'Prompt', sans-serif;
}

.txt-head{    
    border-bottom: 1px dashed #16160a;
    padding-bottom: 10px;
}
.modal-header-mini{ border-bottom: 1px solid #e9b34e !important; }
.modal-footer-mini{ border-top: 1px solid #e9b34e !important; }
.modal-content-mini{
    background: url(../images/reward_bg.jpg)50% 50% no-repeat !important;
    color: #fff;
}
.all_div{
    padding: 0px;
    /*height: 100%;*/
    position: relative;
}    
.countSpin{
    position: absolute;
    bottom: 4px;
    right: 5px;
    background: red;
    border: 0;
    border-radius: 10px;
    min-width: 20px;
    font-size: 0.7em;
    color: #fff;
    box-shadow: 1px 1px 1px #000000e8;
}

@media (max-width: 1000px){
    .the_wheel{
        background-size: cover; margin-top: 35px;
    }

    .the_wheel:hover{
        background-size: cover;
    }

    #canvas{
        width: 100%;
    }

    td.m_hide{
        position: absolute;
        display: none;
    }

    .all_div{ padding: 25px 10px; }
    .spin_table{ width: 100%; margin-top: 40px; }
    .spin_arrow{ /*display: table; margin: 0 auto;*/  

    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 45px; }
}