/*
Description:
    Contains all the styles for the winning wheel page.
    
Verison History:
    2012-01-28, Douglas McKechie
    - Created based off earlier version.
    
    2015-09-26, Douglas McKechie
    - Minor updates for the 2.0 winwheel example.
*/

body
{
    font-family: 'Fredoka', sans-serif;
    background-color:#181616;
    

}

/* Sets the background image for the wheel */
td.the_wheel
{
    background: url(/images/wheel_back.png);
    background-position: center;
    padding-top:5px;
    background-repeat: none;
}

/* Do some css reset on selected elements */
h1, p
{
    margin: 0;
}


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;
}

.wheel-bg{
    background: url(/images/wheel_back.png);
    background-position: center;
    background-repeat: none;
}

.row.col-centered > [class*='col-'] { 
    display: inline-block;
    float: none;
}

.wheel-content{
    width:438px;
    margin-left:auto;
 
    margin-right:auto;
}

.navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
  }
  
  
  .navbar .navbar-nav .nav-link {
    color: #000000;
    font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover{
    color: #808080;
}
.navbar-logo-centered .navbar-nav .nav-link{
    padding: .5em 1em;
}

.form-group{
    margin-bottom:20px;
}
.error{
    color: #ef6f6f;
    font-size:.9rem
}
.wrap-loader{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    background-color: rgba(170, 170, 170, 0.65);
    
}
.loader{
    font-size:20px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index:999999;
    color:chocolate
}

.bg-black-transparent{
    background: rgba(0, 0, 0, 0.8)
}

.btn{
    border-radius:0;
}
.btn i{
    margin-right:10px;
}

.bg-black-main{
    background:#181619;
}

.btn-primary{
    background:#c19944;
    border:1px solid #c19944
}
.btn-primary:hover{
    background:#8ca592 !important;
    border:1px solid #8ca592;
}
.btn-main{
    color:#8ca592
}
.btn-main:hover{
    background:#c19944
    
}

.text-main{
    color:#c19944 !important;
}
.hover-main{
    font-size: 1.2rem;
    border-bottom:2px solid #000000;
}
.hover-main:hover{
    color:#8ca592;
    border-bottom:2px solid #8ca592
}
.text-sec-1{
    color: #8ca592
}
.text-sec-2{
    color: #454543;
}
.bg-main{
    background:#c19944
}
.bg-sec-1{
    background:#8ca592
}
.bg-sec-2{
    background:#454543
}
.border-main{
    border:1px solid #c19944;
}
.border-sec-1{
    border:1px solid #8ca592
}
.border-sec-2{
    border:1px solid #454543;
}
.carousel-caption{
    top:400px;
    bottom:auto;
}

.border-color-main{
    border-color: #8ca592 !important;
}

.parallax {
    /* The image used */
    background-image: url("../images/parallax.jpg");
  
    /* Set a specific height */
    min-height: 500px; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

.card{
    background-color:#000000;
    color:#777
}

table tr td, table tr th{
    font-size:.8rem;
}
.dataTables_wrapper{
    font-size:.8rem;
}

.bg-input-dark input{
    background-color:#181619;
    border:1px solid #777;
    color:#fff;
}

.bg-input-dark input:-internal-autofill-selected  {
    background-color:#181619 !important;
    border:1px solid #777
} 
.bg-input-dark input:-webkit-autofill,
.bg-input-dark input:-webkit-autofill:hover, 
.bg-input-dark input:-webkit-autofill:focus, 
.bg-input-dark input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px rgb(31, 29, 29) inset !important;
    border:1px solid #777;
}

.bg-input-dark input:-webkit-autofill{
    -webkit-text-fill-color: #fff !important;
}