/*
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.
*/
@font-face {
				font-family: 'Custom';
				src: url('./assets/font/Play-Bold.ttf');
			
			}
			body,html{
				background:url('./assets/img/background.png?t=1647510757') #0d00b7 center fixed no-repeat;
				background-size:cover;
				color:#f0f0f0;
				font-family: 'Custom', helvetica, arial;
				padding:0;
				margin:0;
				zoom:0.8;
				height:100%
			}
			#welcome-wrapper,
			#bg{
				position:fixed;
				top:0;left:0;
				width:100%;
				height:100%;
				background:rgba(0,0,0,0.5)
			}
			#welcome-wrapper{
				z-index:9
			}
			#welcome{
				width:800px;
				max-width:90%;
				position:absolute;
				top:50%;left:50%;
				padding:30px;
				transform:translate(-50%,-50%);
				-webkit-transform:translate(-50%,-50%);
				-moz-transform:translate(-50%,-50%);
				text-align:center;
				line-height:1.75;
				background:#f0f0f0;
				color:#333
			}
			#agree{
				padding:10px;
				margin-top:10px;
				cursor:pointer;
				background:green;
				color:#f0f0f0;
				font-weight:bold;
				border:1px solid #ccc;
			}
			#agree:hover{
				background:#068c06;
			}
			#wrapper{
				position:relative;
				top:20%;
				transform:translateY(-50%);
				-webkit-transform:translateY(-50%); 
				-moz-transform: translate(-10%,-70%);
				scale: 0.7;
			}
			#alert,#congrats{
				position:fixed;
				top:0;left:0;
				width:100%;
				height:100%;
				background:rgba(0,0,0,0.35);
				transition-duration:.25s;
				z-index:9
			}
			#alert-message,#congrats-message{
				background:#220000;
				padding:20px;
				width:100%;
				position:absolute;
				top:50%;left:50%;
				transform:translate(-50%,-50%)
			}
			#close-alert,#close-congrats{
				font-size: 2em;
				position: absolute;
				right: -10px;
				top: -15px;
				background: #550000;
				cursor: pointer;
				border-radius: 100%;
				width: 35px;
				height: 35px;
				line-height: 30px;
				text-align: center;
			}
			#alert.hidden,#congrats.hidden,.confetti.hidden{
				transition-duration:.25s;
				-webkit-transition-duration:.25s;
				-moz-transition-duration:.25s;
				opacity:0;
				z-index:-1
			}
			.spin_button{
			    width: 10em;
                border-radius: 5px;
                padding: 10px;
                margin-top: 10px;
                background: #0d0203;
                box-shadow: 0 0 10px #ff8184;
                color: #f0f0f0;
                border: 1px solid transparent;
                font-weight: bold;
                letter-spacing: 1px;
                font-family: arial;
                text-shadow: 0 0 3px #fff;
                cursor: pointer;
			}
			#code-desk,
			#code-mob{
		        padding: 10px;
                border-radius: 20px;
                border: 1px solid transparent;
                text-align: center;
			}
			.claim{
				display: inline-block;
				margin:10px 5px;
				margin-bottom:0;
				border: 1px solid #ffd700;
				padding: 5px;
				background: #550000;
			}
			*{box-sizing:border-box}
			.hide-on-desktop{display:table-cell}
			.hide-on-mobile{display:none}
			
			.confetti{
				position:absolute;
				width:100%;
				top:0;left:0;
			}
			
			#confetti2{
				left:initial;
				right:0
			}
			.mt-10{
				margin-top: 10px;
			}
			.mt-20{
				margin-top: 20px;
			}

			.float-btn {
				padding: 20px;
			    background-color: #91885b;
			    border-radius: 10px;
			    position: fixed;
			    bottom: 21px;
			    right: 25px;
			}
			.link-winner{
				color: #ffffff;
				text-decoration: none;
			}
			.wa-url{
			    color:gold;
			}
			@media only screen and (min-width: 1024px){
				body,html{zoom:1}
				.wrapper{scale:1;-moz-transform: translate(0,-50%);}
				.hide-on-desktop{display:none}
				.hide-on-mobile{display:table-cell}
				.confetti{width:50%}
				#alert-message,#congrats-message{width:initial;}
			}	

body
{
    font-family: arial;
}

/* Sets the background image for the wheel */
td.the_wheel
{
    background: url(../img/wheel_back.png) no-repeat;
    background-position: 0 35px;
}

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