.wheel_popup *{
  padding:0px;
  margin: 0px;
}
text{
    font-family:Helvetica, Arial, sans-serif;
    font-size:17px;
    pointer-events:none;
}
.wheel_popup .chart {
    position: relative;
    top: 50%;
    left: 0;
    transform: translate(0%,-50%);
    z-index: 2;
}
.wheel_popup .chart svg{
  margin-left: -175px;
}
.wheel_popup{
	position: fixed;
	display:  block;
	background: rgba(0,0,0,.7);
	z-index: 999999;
	width: 100%;
	top:0;
}
 
.wheel_popup .wheel_outer {
    position: relative;
    width: 100%;
    display: inline-block;
    background: #fff;
    height: 100vh;  
    background-repeat: initial;
    background-size: 100%;
}
.wheel_outer:after {
   
}
/*.wheel_outer:before {
    content: "\f00d";
    position: absolute;
    right: 10px;
    color: #fff;
    border-radius: 50%;
    top: 40px;
    text-align: center;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 22px;
    cursor: pointer;
}*/
.wheel_outer .close_icon {
	position: absolute;
	right: 28px;
	top: 34px;
	color: #555;
	font-size: 26px;
	cursor: pointer;
	z-index: 99999;
	}
.custom_form_inner {
     margin-left: 0;
    max-width: 350px;
    position: absolute;
    top: 50%;
    transform: translate(0%,-50%);
    z-index: 999;
    padding: 12px;
    float: right;
    right: 20px;
    background: #fff;
}
.wheel_inline .custom_form_inner {
	right:auto;
	left:660px;
} 
.wheel_sidebar .custom_form_inner {
	right:auto;
	left:395px;
} 
.custom_form_inner h4 {
    font-size: 24px;
    color: #555;
    font-weight: 600;
    text-shadow: none;
    margin-bottom: 15px;
    line-height: 32px;
    font-family: 'Roboto', sans-serif;
}
#custom_form_data .custom_form_inner h4 {
    font-size: 24px;
    color: #555;
    font-weight: 600;
    text-shadow: none;
    margin-bottom: 15px;
    line-height: 32px;
    font-family: 'Roboto', sans-serif;
}
.custom_form_inner h4 span{
  color: #ffb09d
}
.custom_form_inner p {
    font-size: 15px;
    color: #7b8086;
    margin-bottom: 20px;
    line-height: 20px;
}
#custom_form_data .custom_form_inner p, #custom_form_data .custom_form_inner .stwr_terms_and_condition_text{
    font-size: 15px;
    color: #7b8086;
    margin-bottom: 20px;
    line-height: 20px;
    margin-bottom: 10px !important;
}
.form_input_div span{
	color: #7b8086;
}
.wheel_popup .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.wheel_popup .btn-primary:hover {
    color: #fff;
    background: none;
    background-color: #0069d9;
    border-color: #0062cc;
}
 
input[type=checkbox], input[type=radio] {
    height: 22px;
    width: 22px;
    min-width: 22px;
    margin: 0px 6px 0px 0px;
    float: left;
}

/*WRAPPER*/
#wrapper{ 
	/* position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%,-50%);
    z-index: 2;*/
}

#txt{
	color:#eaeaea;	
}


/*WHEEL*/
#wheel{
	width:250px;
	height:250px;
	border-radius:50%;	
	position:relative;
	overflow:hidden;
	border:8px solid #fff;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
	transform: rotate(0deg);
}

#wheel:before{
	content:'';
	position:absolute;
	border:4px solid rgba(0,0,0,0.1);
	width:242px;
	height:242px;
	border-radius:50%;
	z-index:1000;	
}

#inner-wheel{
	width:100%;
	height:100%;
	
	-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
	-moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
	-o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
	-ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
	transition:         all 6s cubic-bezier(0,.99,.44,.99);	
}

#wheel div.sec{
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 130px 75px 0;
	border-color: #19c transparent;
	transform-origin: 75px 129px;
	left:50px;
	top:-4px;	
	opacity:1;
}

#wheel div.sec:nth-child(1){
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	border-color: #16a085 transparent;	
}
#wheel div.sec:nth-child(2){
	transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	border-color: #2980b9 transparent;	
}
#wheel div.sec:nth-child(3){
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	border-color: #34495e transparent;	
}
#wheel div.sec:nth-child(4){
	transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	-moz-transform: rotate(240deg);
	-o-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	border-color: #f39c12 transparent;	
}
#wheel div.sec:nth-child(5){
	transform: rotate(300deg);
	-webkit-transform: rotate(300deg);
	-moz-transform: rotate(300deg);
	-o-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	border-color: #d35400 transparent;	
}
#wheel div.sec:nth-child(6){
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	border-color: #c0392b transparent;	
}


#wheel div.sec .fa{
	margin-top: -100px;
	color: rgba(0,0,0,0.2);
	position: relative;
	z-index: 10000000;
	display: block;
	text-align: center;
	font-size:36px;
	margin-left:-15px;
	
	text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}




#spin{
	width:68px;
	height:68px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-34px 0 0 -34px;
	border-radius:50%;
	box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
	z-index:1000;
	background:#fff;
	cursor:pointer;
	font-family: 'Exo 2', sans-serif;
  
  -webkit-user-select: none; 
  -moz-user-select: none;    
  -ms-user-select: none;     
  -o-user-select: none;
  user-select: none;   
}


#spin:after{
	content:"SPIN";	
	text-align:center;
	line-height:68px;
	color:#CCC;
	text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
	position: relative;
	z-index: 100000;
	width:68px;
	height:68px;
	display:block;
}

#spin:before{
	content:"";
	position:absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 28px 20px;
	border-color: transparent transparent #ffffff transparent;
	top:-12px;
	left:14px;
}

#inner-spin{
	width:54px;
	height:54px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-27px 0 0 -27px;
	border-radius:50%;
	background:red;
	z-index:999;
	box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;
	
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */	
}

#spin:active #inner-spin{
	box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}

#spin:active:after{
	font-size:15px;	
}



#shine{
	width:250px;
	height:250px;
	position:absolute;
	top:0;
	left:0;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


opacity:0.1;
	
}



/*ANIMATION*/
@-webkit-keyframes hh {
  0%, 100%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

@keyframes hh {
   0%, 100%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

.spin {
  -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
    animation: hh 0.1s;
}

.custom_form_inner #tryYourLuck , .custom_form_inner #doneAfterSpin {
    display: inline-block;
    font-weight: 600;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 15px;
    line-height: normal;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    padding: 10px !important;
    background: #007bff;
	margin-top: 10px;
	margin-bottom:8px;
	box-sizing: border-box;
}

 .custom_form_inner #tryYourLuck span{
    font-weight: inherit;
    color: inherit;
    text-align: inherit; 
    font-size: inherit; 
}

.custom_form_inner.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.wheel_popup .btn-primary:hover {
    color: #fff;
    background: none;
    background-color: #0069d9;
    border-color: #0062cc;
}
.wheel_popup .form-group {
    margin-bottom: 20px;
}

#tryYourLuck{
border:none !important
}
  .stwrborder {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 2;
    border-radius: 100%;
    max-width: 570px;
    max-height: 570px;
    top: 0px;
    left: 0;
    border: 1px solid #555;
    margin: 0px 0 0 -4px;
    margin-top: 26px;
    margin-right: 0px;
}
}
.wheel_popup .stwrborder { 
    margin-left: -169px;
}
#chart svg, .chart svg, #chart1 svg, .chart1 svg {
    
    z-index: 9;
}
 
.wheel_stwr_minimized {
	position: fixed;
	bottom: 30px;
	left: 20px;
	width: 250px;
	cursor: pointer;
	z-index: 99;
	display: flex;
    align-items: center;
}
.wheel_stwr_minimized .stwr_font_minimized_wheel_popup{
	width:60px;
}
 
.wheel_stwr_minimized span{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: rgb(33, 37, 41);
    text-align: left;
    background-color: rgb(255, 255, 255);
    margin: 0px;
    background: #fff;
	border: 1px solid #ccc;
	padding: 12px 15px;
	margin-left: 5px;
	position: relative;
	box-shadow: -2px 5px 10px -2px rgba(0,0,0,.16);
}

.wheel_stwr_minimized span:before {
	content: "";
	width: 14px;
	height: 14px;
	left: -8px;
	top: 12px;
	background: #fff;
	z-index: 999;
	position: absolute;
	transform: rotate(45deg);
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.wheel_stwr_minimized span i  {
	position: absolute;
	right: -6px;
	top: -9px;
	background: rgba(0,0,0,.5);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	font-size: 11px;
	color: #fff;
	line-height: 20px;
	display:none;
}
.wheel_stwr_minimized:hover span i{
	display:block;
} 




/*---- Wheel Inline CSS -----*/
.wheel_inline .wheel_outer {
    position: relative;
    width: 100%;
    display: inline-block;
    background: #fff;
    height: auto;
    background-repeat: initial;
    background-size: 100%;
    max-width: 100%;
    padding-bottom: 12px;
    padding: 20px;
        margin-left: 10px;
}
.wheel_inline .stwrborder {
	left:-8px;
}

/*----- Wheel With Side Bar CSS -----*/
.wheel_sidebar .stwrborder {
    left: -14px;
    max-width: 292px;
    max-height: 292px;
    margin-top: 110px;
}
.wheel_sidebar svg{
    transform: scale(.6);
    transform-origin: 0;
}
/*.wheel_sidebar .custom_form_inner {
    max-width: 250px !important;
}*/
.page-content .content-bar {
    color: #000;
    text-shadow: none;
}

.wheel_popup .wheel_outer {
 
    width: 850px;
 
} 
/*new css */
 body#error-page {
    max-width: 100%;
}
  /*
.chart1{

    border: 2px solid;
    border-radius: 100%;
    height: 564px;
    width: 564px;
}
 .chart1 svg,  .chart svg{
    margin-left: 0px;
    margin-top: -30px;
}
  */ 
  
.stwrborder {
      z-index: 999999;
 }
 .wheel_inline .chart svg{
	 z-index:99999;
	 position: relative; 
}
.wheel_container .form_input_div div.stwr_tiny_editor{
	  float: left;
		width: calc(100% - 28px);
	 
}
.wheel_container a#playAgainAfterSpin {
    color: #007bff;
    text-decoration: none;
    font-size: 16px; 
}
.wheel_container  .retries_text{
	float: right;
    color: #555;
    font-size: 16px;
}
.btn:before {
    content: "";
}
/************stwr spinner***************/
.stwr_spinner {
/*position: absolute;
height: 2em;
width: 2em;*/
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70px;
text-align: center;
}

.stwr_spinner > div {
width: 15px;
height: 15px;
background-color: #fdf9f9;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.stwr_spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.stwr_spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}

}   
/************stwr spinner ends***************/

@media (min-width: 768px) and (max-width: 1024px){
	.wheel_inline .chart svg {
		transform: scale(0.6);
		-webkit-transform: scale(0.6);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
	.wheel_inline .stwrborder {
		max-width: 290px;
		max-height: 290px;
		top: 2px;
		left: 0px;
	} 
	.custom_form_inner {
		top: 12px;
		transform: none;
	}
	.wheel_outer {
		padding:12px;
	}
	.wheel_popup .chart {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		z-index: 2;
		background:#fff;
	}
	.wheel_popup .chart svg {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
	.wheel_popup .stwrborder {
		max-width: 242px;
		max-height: 242px;
		top: -11px;
		left: 1px;
		z-index: 99;
	}
	.wheel_popup .chart svg {
		margin-left: 0px;
	}
	.wheel_popup .stwrborder {
		margin-left: 0px;
	}
}

@media (max-width: 1024px){
	#dap_single_product_links_table .showstyledlist1 li:before, .yourprod_container li.showstyledlist:before {
		z-index: 99 !important;
	}
	.wheel_outer .close_icon {
		right: 8px;
		top: 5px;
	}
	.custom_form_inner {
		margin-left: 0;
		max-width: 350px;
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		z-index: 2;
		padding: 12px;
		float:none;
		width: 100%;
		margin: 36px auto 0;
	}
	.wheel_popup .wheel_outer {
		margin-top: 36px;
		overflow: hidden;
		padding:12px;
		width: 100% !important;
		height: auto;
	}
	.wheel_popup .chart {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		z-index: 2;
		background:#fff;
		overflow: hidden;
		max-width: 330px;
		margin: 12px auto 0;
		padding-left: 9px;
	}
	.wheel_popup {
		background: #fff;
		padding-bottom: 30px;
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	.wheel_popup .stwrborder {
		    margin-left: 8px;
	}
	.wheel_popup .chart svg {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
	.wheel_popup .stwrborder {
		max-width: 242px;
		max-height: 242px;
		top: -11px;
		left: 1px;
		z-index: 99;
	}
	.wheel_popup .chart svg {
		margin-left: 0px;
	}
	.wheel_inline .wheel_outer {
		margin-top: 36px;
		overflow: hidden;
		padding:12px;
	}
	.wheel_inline .chart {
		position: relative;
		max-width: 285px;
		margin: 12px auto 0;
		max-height: 289px;
	}
	.wheel_inline .chart svg {
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
	.wheel_inline .stwrborder {
 		max-width: 270px !important;
		max-height: 270px !important;
		margin-top: 20px !important;
		margin-left: 0px !important;
		top: 0;
		left: 0;
	}
	.wheel_popup .stwrborder {
		max-width: 270px !important;
		max-height: 270px !important;
		margin-top: 20px !important;
		margin-left:7px !important;
		top: 0;
		left: 0;
	}
	.wheel_inline .custom_form_inner {
		right: auto;
		left: 0px;
	}
	.wheel_popup .form-control , .wheel_inline .form-control, .wheel_container .form-control{
		margin-bottom: 15px;
	}
	.wheel_sidebar .custom_form_inner {
		max-width: 350px !important;
	}
	.wheel_container a#playAgainAfterSpin {
		margin-left: 10px;
	}

}