*{box-sizing:border-box;font-weight:400;}

:root{--anim-time:.4s; --anim-curve:cubic-bezier(.01,0.9,0.01,1.0);--bg-color:rgba(165,133,221,1); --txt-color:rgba(20,20,20,1); --main-padding:15px;}

html,body{margin:0; padding:0; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0);font-family:Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;}
html::-webkit-scrollbar{display:none;}
svg *{stroke-linejoin:round;stroke-linecap:round;}
input:focus{outline: none;}
input[type="text"]::placeholder{color:rgba(210,210,210,1);}

@keyframes loading-effect-disk
{
	0%{transform: translate(20px,0);}
	50%{transform: translate(-20px,0);}
	100%{transform: translate(20px,0);}
}

@keyframes loading-effect-ring
{
	0%{transform: translate(-20px,0);}
	50%{transform: translate(20px,0);}
	100%{transform: translate(-20px,0);}
}

  .loader{transition: .4s cubic-bezier(0.9,0.1,0.1,1.0);z-index:6; position:fixed; width:100%; height:100%; background-color: #fff;}

  .loader svg{display:block; margin:0 auto;transform:translate(0,30vh);}

  .loader svg .disk{animation:loading-effect-disk 1s infinite;}

  .loader svg .ring{animation:loading-effect-ring 1s infinite;}

  .sign-in-form-box{opacity:0;transition: var(--anim-time) var(--anim-curve);font-family:Comfortaa,Montserrat,sans serif;z-index:5; background-color:var(--bg-color); position:fixed; color:#fff; width:100%; height:100%;}

  .sign-in-form-box .head{display:flex; width:100%; height:50px; padding:0 20px;}

  .sign-in-form-box .head .back-btn2{width:20%; opacity:0; transition: opacity var(--anim-time);}

  .sign-in-form-box .head .title2{text-align:center; width: 60%; font-size:120%;}

  .sign-in-form-box .head .action2{visibility:hidden; text-align:right; width: 20%; opacity:0; transition:opacity var(--anim-time);}

  .sign-in-form-box .head .back-btn2,.title2,.action2{line-height:50px;}

  .sign-in-form-box .head .action2 svg{position: relative; top:5px;}

  .sign-in-form-box .body{width:100%; position:relative; padding:30px 0;}

  .sign-in-form-box .body ::placeholder{color:rgba(255,255,255,0.5);}

  .sign-in-form-box .body .email,.password,.f-name,.l-name{color:#fff; background-color:var(--bg-color); margin:0 5%; width:90%; height:50px; font-size:120%; border:none; border-bottom:0.1px solid #fff;}

  .sign-in-form-box .body .code-digit{margin:0 5px; display:inline-block; color:#777; font-size:30px; height:50px; width:45px; text-align:center; padding:5px; border:1px solid rgba(150,150,150,0); border-radius:5px;}

  .sign-in-form-box .body .code-box{margin:0 auto; text-align:center;display:none;transition:height 0.5s, opacity 0.01s;}

  .sign-in-form-box .body .email{transition:height var(--anim-time);}

  .sign-in-form-box .body .password,.code,.f-name,.l-name{opacity:0; height:0; transition:height var(--anim-time), opacity 0.01s;}

  .sign-in-form-box .body svg{display:block;}

  .sign-in-form-box .body svg *{fill:#fff;}

  .sign-in-form-box .body .reset-pw{width:100%; text-align:center; padding:20px 5px; opacity:0; transition:opacity 0.01s}

  .sign-in-form-box .tail{display:flex; width:100%; padding: 0; color:rgba(255,255,255,0.6);}
  .sign-in-form-box .tail>*{margin:0 1px;background-color:rgba(255,255,255,.06);text-align:center; padding: 15px 0;}
  .sign-in-form-box .tail .goog-btn{width:50%;border-right:none;}

  .sign-in-form-box .tail .register{width:50%;}

@keyframes slide
{
	0%{transform: translate(-100%,0);}
	100%{transform: translate(0,0);}
}

header{width:100%;height:80px;display:flex;padding:0 10px;}

header .ellipsis,header .spin-display,header .score-display{line-height:70px;height:100%; color:rgba(255,255,255,1);}

header .spin-display{width:25%;font-size:90%;font-weight:bold;}

header .score-display{width:50%; text-align:center;font-size:100%;position:relative;}

header .ellipsis{animation: slide .5s forwards;text-align:right; width:25%;}

.win-number{text-align: center;height:60px;}

.win-number .ball{height:100%; display:inline-block; position:relative;}

.win-number .ball .text{font-family:Comfortaa;position:relative;top:-42px; text-align:center; font-size:130%; color:rgba(255,255,255,1);}

.win-number .ball svg circle{stroke-width:1 ; stroke:rgba(255,255,255,.1);} 

.win-number .ball.done svg circle{stroke:#fff; stroke-dasharray:160; stroke-width:2;} 

.win-number .ball.done .text{color:#fff; font-weight:bold;}

.win-number .ball.activee svg{animation: spinn 5s linear infinite;}

.win-number .ball.activee svg circle{stroke-dasharray:150px;stroke:rgba(255,255,255,.3);}

.players{height:120px;-webkit-overflow-scrolling:touch;white-space:nowrap; width:100%; overflow-x:scroll; padding:30px 0;}

.players .player{border:1px solid rgba(255,255,255,.3);display: inline-block; margin: 0 5px;color:rgba(255,255,255,1); padding:10px; border-radius:20px; font-size:85%;font-weight:400;}

.players .player.winning{background-color:rgba(255,255,255,.9); color:var(--bg-color)}

.win-prize{height:40px;font-weight:bold;font-size: 80%;	text-align: center;	letter-spacing: 10px; color: #fff; padding: 10px 0;}

.players::-webkit-scrollbar,.menu::-webkit-scrollbar { 
  //width:0;
  display: none;
}

@keyframes spinn
{
	100% {transform: rotateZ(360deg);}
}

@keyframes tease{100%{transform: scale(0.9);}}

.roulette{position: relative;text-align:center;}

.roulette .circle-container{width:210px;height:210px;display:inline-block;}

.roulette #svg_29{fill:rgba(255,255,255,0);}

@keyframes puls
{
  0% {transform:scale(1);}
  50% { transform:scale(0.95);}
  100% {ransform:scale(1);}
}

.roulette #svg_39{will-change:transform;fill:rgba(255,255,255,0); r:85px;transform-origin: 50% 50%;}

.roulette .svg39{animation:puls 2s infinite;}

@keyframes flip{100%{transform: rotateY(360deg);}}

.roulette .result{color:#fff;font-size:80px;z-index:-1;font-family:Comfortaa;position:relative;top:-150px;}

footer{ grid-template-columns:repeat(3,1fr);display:grid;position:absolute; bottom:0; width:100%;height:100px;border-top-left-radius:40px;border-top-right-radius:40px;}

footer .menu-item-icon{text-align:center;display:flex;justify-content:center;align-items:center;}

.menu,.view{will-change: transition; padding-top:20px;z-index:4; color:var(--txt-color); width: 100%;font-size: 105%;left:100%; position:fixed; transition: transform var(--anim-time) var(--anim-curve); top:50px;}

.main-view{will-change: transition;font-family:Comfortaa,Montserrat,sans serif;z-index:3; background-color:var(--bg-color); position:fixed; width:100%; height:100%; transition:var(--anim-time) var(--anim-curve)}

.main-view .content{height:calc(100% - 180px);}

.group .group-title{min-height:30px;opacity:1;font-size:120%; font-weight:100; line-height:30px; padding-left: 10px; margin:0;}

.group ul{padding:0; margin:0; background-color: #fff;}

.group .menu-item{overflow:hidden;height:60px; line-height:60px; display:flex; width:100%; padding:0 10px 0 20px; list-style: none;}

.group .menu-item  input[type="text"] {color:rgba(120,120,120,.7);}



//.group .menu-item>div{border-bottom: .7px solid rgba(200,200,245,.5);}

.group .menu-item:last-child>div{border-bottom: 0;}

.group.pay-methods .menu-item#paypal-button{padding:0;}

.group .menu-item .label{width:45%;}

.group .menu-item .display{width:55%; text-align:right;}

.group .menu-item .display svg{stroke-width:1.5px; margin-left:5px; position:relative; top:3.5px; stroke:#bbb;}

.group .menu-item .display input[type="checkbox"]
{
	  transition:.3s;
    width:48px;
    height:32px;
    -webkit-appearance:none;
    outline:none;
    border-radius:25px;
    position:relative;
	  top:6px;
    background:rgba(230,230,240,1);
    border:none;
}

.group .menu-item .display input[type="checkbox"]::before
      {
        content:"";
        width:28px;
        height:28px;
        border-radius:15px;
        background:#fff;
        position:absolute;
        top:2px;
        left:2px;
        transition:.3s cubic-bezier(0.25, 0.1, 0.24, 1.25);
      }

.group .menu-item .display input:checked[type="checkbox"]{background:rgba(165,133,221,1);}
.group .menu-item .display input:checked[type="checkbox"]::before{transform:translate(16px,0);}

.group .menu-item .display input[type="radio"]
{
    width:0;
    height:0;
    -webkit-appearance:none;
    outline:none;
    position:relative;
	border:none;
}

.group .menu-item .display input[type="radio"] + svg{stroke:rgba(0,0,0,0)}

.group .menu-item .display input:checked[type="radio"] + svg{stroke:rgba(145,113,201,1);stroke-width:3px;}

.menu-head{background:#fff;padding:0 10px;display:flex;position:fixed; z-index:5; top:0; height:50px; width:100%;left:100%;transition: transform var(--anim-time) var(--anim-curve);}
.menu-head .back-btnn,.titlee,.action-btn{line-height:50px;}
.menu-head .back-btnn,.action-btn{width:16%;color:var(--bg-color);}
.menu-head .back-btnn{}
.menu-head .titlee{width:68%; text-align:center; font-size:140%;font-weight:500;}
.menu-head .action-btn{font-size:110%;font-weight:400;text-align:right;opacity:0;visibility:hidden;}
.menu-head svg {position: relative; top:4px;stroke:var(--bg-color);}
.menu .sign-out{margin-top:30px; width:100%; height:80px; line-height:80px; text-align:center; font-size:120%; background-color:var(--bg-color); color:#fff;}

.notifikation{font-size:120%; position:fixed; bottom:-100px; padding:20px 10px; width:100%; background-color:#fff; color:var(--txt-color); transition: bottom var(--anim-time) var(--anim-curve);text-align:center;}

@keyframes shrinkin{
  0%{transform: scale(.3,.3);opacity:0;visibility:hidden;z-index:-9;}
  100%{transform: scale(1,1);opacity:1;visibility:visible;z-index:9;}
}

@keyframes shrinkin-r{
  0%{transform: scale(1,1);opacity:1;visibility:visible;z-index:4;}
  100%{transform: scale(0);opacity:0;visibility:hidden;z-index:-4;}
}
.overlay{
  background:rgba(255,255,255,1);
  width:100%;
  height:100%;
  position:fixed;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(10,1fr);
  grid-gap:10px;
  font-size:150%;
  padding:0 10px;
  z-index:-4;
  visibility:hidden;
  opacity:0;
}

.overlay.o{animation:shrinkin .25s ease-in-out forwards;}
.overlay.c{animation:shrinkin-r .25s ease-in-out forwards;}

.overlay .close-btn{
  grid-column: 4/5;
  justify-content:center;
}

.overlay .title{
  grid-column: 1/5;
  justify-content:center;
}

.overlay .content{
  grid-row: span 2;
}

.overlay .content input{
  width: 100%;
  height:100px;
  border:none;
  font-size:200%;
  background:rgba(235,235,240,1);
  text-align:center;
}

.overlay div{display:flex;background:rgba(255,110,91,0);align-items: center;}

@keyframes flashAnim
{
	20%{opacity: 0;}
	100%{50%{opacity: 1;}}
}

.flash{animation:flashAnim 1s;}

.group.view
{
	//transform:translate(0);
}

.editt input
{
  width:100%;border:none;font-size: 100%;
}