/*
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: arial;
    background: url(../images/download.jpg) #440000 center top no-repeat;
    background-size: cover;
    color: #f0f0f0;
    font-family: 'Custom', arial, helvetica;
    padding: 0;
    margin: 0;
    zoom: 1;
}

/* Sets the background image for the wheel */
#canvas
{
    margin-top : -50px;
    margin-bottom:-200px;
    background-image: url(../images/wheel_back.png);
    background-position: -5px center;
    background-repeat: no-repeat;
    background-size:100%;
    border: none;
}

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

h1 {
    font-size: 1.5em;
}

p {
    font-size: 0.8em;
}

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

/* Styles for the power selection controls */

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

/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}

.box {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid #00f923;
  padding: 25px;
  margin: 10px;
  border-radius: 25px;
  text-align: center;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#outputhadiah{
  color: red;
  text-align: center;
  font-size: 18px;
}

#gambar{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.box-2 {
	            margin-top: 150px;
	        }
	        input[type=text], select {
	        width: 8rem !important;
	       
	        }
	        .clr {
	            background-color: #b8c6db;
	            background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
	            border: 1px solid #000;
	            color: #000;
	            margin-right: 20px;
	        }
	        .data_content {
	            margin-right: 20px;
	        }
	        .card-header {
	            background-color: #000000;

	            color: white;
	        }
	        .bd-2 {
	            border: solid 2px #000 ;
	        }
	        .code_spin_controls {
	            position: relative;
	            top: 170px;
	        }
	        .wex {
	            min-width: 80% !important;
	        }
	        .popup {
	          display:none;
	     position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    background:#FF7391;
	    height:200px;
	    width:330px;
	    border-radius:7px;
	    border:1px solid #e5e5e5;
	    font-family:'helvetica neue';
	}

	.popup:hover{zoom:1.3;}
	.valid {
	    height:30px;
	    width:30px;
	    background:#fff;
	    margin:0 auto;
	    margin-top:30px;
	    border-radius:5px;
	}
	#Layer_2 {
	    margin:7px;
	}
	h1 {
	    color:white;
	    font-family:helvetica;
	    font-size:.9em;
	    text-align:center;
	    font-weight:bold;
	    line-height:10px;
	    margin-top:26px;
	}
	#outputhadiah {
	    color:white;
	    font-family:helvetica;
	    font-size:.75em;
	    text-align:center;
	    line-height:1px;
	    text-shadow: 0px 1px 1px #4CB572;
	}
	.bottom-popup {
	    width:100%;
	    background:#fff;
	    -webkit-border-bottom-right-radius: 7px;
	    -webkit-border-bottom-left-radius: 7px;
	    -moz-border-radius-bottomright: 7px;
	    -moz-border-radius-bottomleft: 7px;
	    border-bottom-right-radius: 7px;
	    border-bottom-left-radius: 7px;
	    margin-top:32px;
	    padding:30px 0 30px 0;
	}
	a.start {
	    border-radius:40px;
	    background:#FF7391;
	    padding:6px 20px 6px 20px;
	    font-family:'helvetica';
	    color:white;
	    font-weight:bold;
	    text-decoration:none;
	    font-size:12px;
	    -webkit-transition: all .4s ease-out;
	    -moz-transition: all .4s ease-out;
	    -ms-transition: all .4s ease-out;
	    -o-transition: all .4s ease-out;
	    transition: all .4s ease-out;
	}
	a.start:hover {
	    border-radius:5px;
	    -webkit-transition: all .4s ease-out;
	    -moz-transition: all .4s ease-out;
	    -ms-transition: all .4s ease-out;
	    -o-transition: all .4s ease-out;
	    transition: all .4s ease-out;
	}
	#Layer_1 {
	    float:right;
	    margin:10px;
	}
	.logoinimah{
		width: 100%; /* Adjust this percentage to control the size */
    max-height: 100%; /* Maintain aspect ratio */	
    margin-left: auto;
    margin-right: auto;
    display: block; /* Center the logo horizontally */
	}
@media only screen and (max-width: 768px){
    #canvas{
        top:5%;
        position:fixed;
        left:-7%;
        width:120%;
        background-size:110%;
        background-position:-23px -130px;
    }
    .data_content{
        position:fixed;
        bottom:1%;
        left:10%;
        z-index:100;
    }
    .logoinimah{
        position:relative;
    }
    h1{
        font-size:0.9rem!important;
    }
}