body{
background:transparent;
padding: 0;
margin: 0px;
position: relative;
/*box-sizing: content-box;*/
/*overflow: hidden;  */

		}

.background{ 
margin: 0;
position: absolute;  
background-color:#67C7E1;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height:100vh;
padding:25px;
overflow:hidden;
}

.content-bg {
  position: relative;
  display: block;
  top: 18vh;
}

.win-effect{
  margin: 0;
position: absolute;  
background-color:#67C7E1;
opacity:0.7;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height:100vh; 
  animation-duration: 0.1s;
animation-name: fadeEffect;
animation-iteration-count: 1;
}

  
.page-content{
position: relative;
z-index: 2;
top: 0;
left: 0;
right: 0;
width: 80%;
height: auto;
text-align: center;
margin: auto; 
}

.clouds-title {
  top: 80px;
position: relative;
display: block;
}

.congratulations-title{
    top: 80px;
position: relative;
display: block;
}

.clouds-layer-1{
fill: #fff;
opacity:0.97
}
.clouds-layer-2{
fill: #E2EEF6;
opacity:0.8
}
.clouds-layer-3{
fill: #B3D8E9;
opacity:0.8
}

.clouds-text{
fill: #354091;
}

.wheel-section{
  position: relative;
display: block;
width: 90%;
height:auto;
margin: auto;
top:100px;
float: none;
text-align: center;
}

.wheel-section-out{
  animation-duration: 0.5s;
animation-name: wheel_Out;
animation-iteration-count: 1;
transform: scale(0);
transform-origin:center;
transform-box: fill-box; 
}

.option-section{
position: fixed;
display: inline-flex;
left: 0;
right: 0;
height: auto;
text-align: center;
padding: 20px;
z-index: 3;
justify-content: center;
align-content: center;
align-items: center;
bottom: 0;
}

.grids{ 

position: relative;
display: inline-flex;
align-content: center;
justify-content: center;
width: 50%;
float: left;
padding: 15px;
}

.btn{
   position:relative;
  cursor:pointer;
}
 

.wins-section{
position: absolute;
display: block;
width: 60%;
height: auto;
top: 50%;
float: none;
text-align: center;
margin: auto;
left: 0;
right: 0;
overflow:hidden;
}

.content-wins{
  position:relative;
  display:block;
  padding:0; 
 width:100%;
 height:auto;
}

.grids-wins{
position:relative;
display:inline-flex;
height:auto;
width:50%;
float:left;
text-align:center; 
}
 

.product-win{
animation-duration: 2s;
animation-name: moveGift_default;
animation-iteration-count: infinite;
display: block;
position: relative;
width:100%; 
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important; 
z-index: 1;   
right: 0;
min-height: 400px;
}

.product-coeur-de-peche{
 background-image: url('./../../public/images/product-coeur-de-peche.png');
}
.product-clouds-marsh{
 background-image: url('./../../public/images/product-clouds-marsh.png');
}
.product-fizzy4gums{
 background-image: url('./../../public/images/product-fizzy4gums.png');
}
.product-gourmet{
 background-image: url('./../../public/images/product-gourmet.png');
}
.product-jelly-berries{
 background-image: url('./../../public/images/product-jelly-berries.png');
}
.product-roller{
 background-image: url('./../../public/images/product-roller.png');
}
.product-shooter{
 background-image: url('./../../public/images/product-shooter.png');
}
.product-tubes-sour{
 background-image: url('./../../public/images/product-tubes-sour.png');
}

.fini-caractere-win{
animation-duration: 2s;
animation-name: moveGift_default;
animation-iteration-count: infinite;
display: block;
position: relative;
width:100%;
 background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important; 
z-index: 1;  
left: 0;
min-height: 400px;
}

.fini-caractere-animation-in{
animation-duration: 0.5s;
animation-name: slideCaractereIn;
animation-iteration-count: 1;
display: block;
position: relative;
}
.fini-caractere-animation-out{
animation-duration: 0.5s;
animation-name: slideCaractereOut;
animation-iteration-count: 1;
transform: translateX(+1000px);
display: block;
position: relative;
}

.fini-product-animation-in{
animation-duration: 0.5s;
animation-name: slideProductIn;
animation-iteration-count: 1;
display: block;
position: relative;
}

.fini-product-animation-out{
animation-duration: 0.5s;
animation-name: slideProductOut;
animation-iteration-count: 1;
transform: translateX(-1000px);
display: block;
position: relative;
}
 

.caractere-coeur-de-peche{
 background-image: url('./../../public/images/carac-coeur-de-peche.png');
}
.caractere-clouds-marsh{
 background-image: url('./../../public/images/carac-clouds-marsh.png');
}
.caractere-fizzy4gums{
 background-image: url('./../../public/images/carac-fizzy4gums.png');
}
.caractere-gourmet{
 background-image: url('./../../public/images/carac-gourmet.png');
}
.caractere-jelly-berries{
 background-image: url('./../../public/images/carac-jelly-berries.png');
}
.caractere-roller{
 background-image: url('./../../public/images/carac-roller.png');
}
.caractere-shooter{
 background-image: url('./../../public/images/carac-shooter.png');
}
.caractere-tubes-sour{
 background-image: url('./../../public/images/carac-tubes-sour.png');
}




.wheel-rond{
  position:relative;
  transform: scale(1);
  transform-origin: center !important;
  transition:15s;
    transform-box:border-box;
    transform: rotate(0deg);
}

.wheel-on-spin{ 
  position:relative;
   transform: scale(1);
  transform-origin: center !important;
    transform-box:fill-box !important;
  -webkit-animation: spinOn 3s infinite linear;
-moz-animation: spinOn 3s infinite linear;
-o-animation: spinOn 3s infinite linear;
animation: spinOn 3s infinite linear;
}






.spin-auto{
  cursor:pointer; 
   transform: scale(1);
  transform-origin: center;
    transform-box:fill-box;
  -webkit-animation: spinAuto 4s infinite linear;
-moz-animation: spinAuto 4s infinite linear;
-o-animation: spinAuto 4s infinite linear;
animation: spinAuto 4s infinite linear;
}

.gifts-move{
  cursor:pointer; 
   transform: scale(1);
  transform-origin: center;
    transform-box:fill-box;
  -webkit-animation: moveGift_default 1s infinite linear;
-moz-animation: moveGift_default 1s infinite linear;
-o-animation: moveGift_default 1s infinite linear;
animation: moveGift_default 1s infinite linear;
}

.clouds-moved{
 
   transform: scale(1);
  transform-origin: center;
    transform-box:fill-box;
  -webkit-animation: cloudsMoved 5s infinite linear;
-moz-animation: cloudsMoved 5s infinite linear;
-o-animation: cloudsMoved 5s infinite linear;
animation: cloudsMoved 5s infinite linear;

}





@keyframes spinOn {
from {
     
    transform: rotate(0deg);
  } 
  to {
    
   transform: rotate(359deg);
  } 
}


@keyframes cloudsMoved {

  from {
     
      
    transform: translateX(0);
  } 
  50% {
    
     
   transform: translateX(100px);
  }
  to {
     
   transform: translateX(0);
  }

}





@keyframes slideCaractereIn {

  from {
     
      
    transform: translateX(+1000px);
  } 
  to {
    
     
   transform: translateX(0)
  }  
}

@keyframes slideCaractereOut {

  from {
     
      
    transform: translateX(0);
  } 
  to {
    
     
   transform: translateX(+1000px)
  }  
}

@keyframes slideProductIn {

  from {
     
      
    transform: translateX(-1000px);

  } 
  to {
    
     
   transform: translateX(0)
  }  
}


@keyframes slideProductOut {

  from {
     
      
    transform: translateX(0);

  } 
  to {
    
     
   transform: translateX(-1000px)
  }  
}


@keyframes moveGift_default {

  from {
     
      
    transform: scale(1);
  } 
  50% {
    
     
   transform: scale(1.05);
  }
  to {
     
   transform: scale(1);
  }

}


@keyframes wheel_Out {

  from {
     
      
    transform: scale(1);
  }  
  to {
     
   transform: scale(0);
  }

}

@keyframes fadeEffect {

  from {
     
      
    opacity:0
  }  
  to {
     
   opacity:1;
  }

}}

@keyframes spinAuto {

  from {
     
    transform: rotate(0deg);
  } 
  to {
    
   transform: rotate(359deg);
  }

}











/* ROOT STYLES */

.root{

width: 100%;
background: #67C7E1;
height: 100%;
text-align: center;
padding: 40px 0 0 0;
margin: auto;
z-index: 99;
position: fixed;
left: 0;
top: 0;
opacity: 1;
padding:30px;
overflow-y:scroll;
}

.content-root{
position:relative;
display:block;
text-align:center;
max-width:100%;
float:none;
margin:auto;
margin-top:20px;
}

.options{
  padding: 20px;
position: relative;
background: #fff200;
text-align: left;
}


#select-jour{
  position: relative;
width: 150px;
padding: 10px;
border-radius: 50px;
border: none;
background: black;
color: white;
font-size: 15px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: wheat; 
}


.options .btn-logout{
position:relative;
padding: 10px;
border-radius: 50px;
font-size: 15px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: wheat;
background:#e1251b;
border: none;
cursor:pointer;
text-decoration:none;
float:right;
}


.options .btn-retour{
position: relative;
padding: 10px;
border-radius: 50px;
font-size: 15px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
background: #E07C00;
border: none;
cursor: pointer;
text-decoration: none;
margin-left: 5px;
display: inline-block;
}

.options .btn-save{
position: relative;
padding: 10px;
border-radius: 50px;
font-size: 15px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
background: #80BC00;
border: none;
cursor: pointer;
text-decoration: none;
margin-left: 5px;
display: inline-block;
}



.options .btn-voir-tout{
position:relative;
padding: 10px;
border-radius: 50px;
font-size: 15px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: wheat;
background:#354091;
border: none;
cursor:pointer;
text-decoration:none; 
}

.options .btn-edit{
position: relative;
padding: 10px;
border-radius: 50px;
font-size: 15px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
background: #E07C00;
border: none;
cursor: pointer;
text-decoration: none;
margin-left: 5px;
display: inline-block;
}

.options .btn-historique{
position: relative;
padding: 10px;
border-radius: 50px;
font-size: 15px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
background: #354091;
border: none;
cursor: pointer;
text-decoration: none;
margin-left: 5px;
display: inline-block;
}

.btn-remove-win{
display: block;
width: 100%;
height: auto;
padding: 4px 0px;
background: #e1251b;
border: none;
box-shadow: 0 0 0 2px #e1251b;
border-radius: 50px;
font-size: 15px;
text-align: center;
color: white;
cursor: pointer;

}


.input-display-wins{
  display: block;
  width: 100%;
  height: auto;
  padding: 12px;
  background: white;
  border: none;
  box-shadow: 0 0 0 2px white;
  border-radius: 50px;
  max-width: 70px;
  font-size: 15px;
  text-align: center;
  color: #354091;
}

.inputs-dashboard{
position: relative;
display: block;
width: 100%;
height: auto;
padding: 12px;
background: transparent;
border: none;
box-shadow: 0 0 0 2px white;
border-radius: 50px;
max-width: 90px;
font-size: 15px;
text-align: center;
}

.logo-header
{
  display: block;
  background-image: url('./../../public/images/logo-fini.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 200px;
}
 

.inputs-root  {
position: relative;
display: block;
width: 100%;
height: 100px;
box-shadow: 0 0 0 5px #354091;
padding: 20px 20px;
border-radius: 50px;
font-size: 30px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: #354091;
border: none;
}

.section-form{
  display: block;
position: relative;
margin-top: 100px;
}

.grids-form {
  display: block;
  position: relative;
  height: 100px;
  margin-bottom: 40px;
}

.required {
  background: #f5d1d1;
  position:relative;
  width: 100%; 
  display: block; 
  text-align: center;
  border-radius: 10px;
  border: 1px solid #da6767;
  font-size: 15px !important;
  color: #ea2330 !important;
  height:100px;
  font-size:30px !important;
  line-height:3;
  font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
}


.btn-login{
position: relative;
display: block;
width: 100%;
height: 100px;
background: #354091;
padding: 20px 20px;
border-radius: 50px;
font-size: 30px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
border: none;
text-align: center;
line-height: 2;
cursor: pointer;
text-decoration: none;
transition: 0.3s;
}

.btn-login:hover,.btn-login:focus{
position: relative;
display: block;
width: 100%;
height: 100px;
background: #e07c00;
padding: 20px 20px;
border-radius: 50px;
font-size: 30px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
border: none;
text-align: center;
line-height: 2;
cursor: pointer;
text-decoration: none;
transition: 0.3s;
}

.btn-back-root{
position: relative;
display: block;
width: 100%;
height: 100px;
background: #e07c00;
padding: 20px 20px;
border-radius: 50px;
font-size: 30px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
border: none;
text-align: center;
line-height: 2;
cursor: pointer;
text-decoration: none;
transition: 0.3s;
}

.btn-back-root:hover, .btn-back-root:focus{
position: relative;
display: block;
width: 100%;
height: 100px;
background: #80bc00;
padding: 20px 20px;
border-radius: 50px;
font-size: 30px;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
color: white;
border: none;
text-align: center;
line-height: 2;
cursor: pointer;
text-decoration: none;
transition: 0.3s;
}


.content-root tr{
background: transparent;
position: relative; 
}


.content-root tr th {
  padding: 10px;
  position: relative;
  background: transparent;
  text-align: left;
  color:#e07c00;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
font-size:15px;
text-align:left;
}

.content-root tr td {
  padding: 10px;
  position: relative;
  background: #354091;
  text-align: left;
  color:white;
font-family: arial;
font-weight: bold;
font-variant: all-petite-caps;
font-size:15px;
text-align:left;
}

.img-product-root{
  display: block;
position: relative;
width:100%; 
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;  
height: 120px;
width: 120px;
text-align:left;
}











@keyframes roue_wahd{
  from{ transform:rotate(3600deg);opacity:0;background-size:10%;  }  
  to{  transform:rotate(0deg);opacity:1;background-size:83%; }
}

@keyframes lavache{
  from{  bottom: 4.2vw;opacity:0 } 
  to{  bottom: 6.2vw;opacity:1  }
}

@keyframes cinq_dh{
  from{  left:-50vw;opacity:0;  } 
  to{ left:3vw;opacity:1;  }
}

@keyframes dix_dh{
  from{ right:-50vw;opacity:0;  } 
  to{ right:2vw;opacity:1;  }
}
@keyframes tooster{
  from{  top:30vw;opacity:0;  } 
  to{ top:-3vw;opacity:1;  }
}

@keyframes leab_w_louh{
  from{  top:0vw;  } 
  50%{  top:-2vw;   } 
  to{ top:0vw;  }
}

@keyframes zaeloula{
  from{  top:-20vw;  } 
  50%{  top:-10vw;  } 
  to{ top:-20vw; }
}

@keyframes sir_w_aji{
  from{  top:-18vw; left:-8vw; } 
  25%{  top:-16vw; left:0vw; } 
  50%{  top:-18vw; left:8vw; } 
  75%{  top:-16vw; left:0vw; } 
  to{ top:-18vw;left:-8vw;  }
}
 

@keyframes refresh_span{
  from{  transform:rotate(0deg);  } 
  to{ transform: rotate(540deg); }
}