@font-face { font-family: SilkScreen; src: url('rfuni.ttf'); } 
@font-face { font-family: SilkScreen; font-weight: bold; src: url('Silkscreen-Bold.ttf');}
@font-face { font-family: Blender; src: url('welcome/fonnts.com-Blender_Pro_Bold.ttf');}
@font-face { font-family: Blender; font-weight: bold; src: url('welcome/fonnts.com-Blender_Pro_Heavy.ttf');}

@font-face { font-family: RFuni; src: url('rfuni.ttf'); } 


@font-face { font-family: Lucida; src: url('fonts/Lucida\ Grande\ Bold.ttf'); } 

:root {
  --playbuttonheight: 48px;
  --playbuttonwidth: 209px;
  --practicebuttonwidth: 144px;
  --sendheight: 44px;
  --sendpropheight: 48px;
  --buttonheight: 48px;
  --walletbheight: 60px;
  --walletbwidth: 420px;
  --buttonfontsize: 20px;
  --tbuttonfontsize: 18px;
  --walletfontsize: 24px;
  --withdrawsize: 724px;

  --accountsheight: 1044px;

  --scorecol1:6%;
  --scorecol2:54%;
  --scorecol3:30%;
  --scorecol4:10%;
  --scorespad:24px;
  --scorelpad:24px;


  --w_buttonwidth: 300px;
  --w_buttonheight: 60px;
  --w_containerheight: 600px;
  --w_buttonfontsize: 24px;
 
  --w_scorecol1:10%;
  --w_scorecol2:50%;
  --w_scorecol3:30%;
  --w_scorecol4:10%;
  --w_scorespad:24px;
  --w_scorelpad:24px;

  --r_scorespad:28px;

  --refcellwidth: 14%;

/* --bgdark:#0c101b;*/
 --bgdark:#0c101b;
  --bglight:#141a2d;

}

body 
{
  padding: 0px;
  margin: 0px;
  height: 100%;
/*  background: url('setup/page-bg-london.png') no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


  user-select: none; /* Standard syntax */
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
     -webkit-touch-callout: none; /* iOS Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
}





html * {
  margin: 0px;
  background-color: transparent;
  font-family: SilkScreen, sans-serif;
  color: white;
  font-weight: lighter;

}

.boxText{
  width: 544px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:transparent;
    color: white;
    font-size: 20px;
  padding: 8px 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}

.blankbutton {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:transparent;
    color: white;
    font-size: 20px;
  padding: 8px 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}

.blankbutton:active {
  background: rgba(0,0,0,0.3);
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}



.withdraw {
  padding: 0px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:transparent;
    color: white;
    font-size: 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
  -webkit-tap-highlight-color: transparent; /* Disable tap highlight on iOS and Android */
  outline: none; /* Remove focus outline */
}


.withdraw:active {
  background:rgba(255,255,255,0.2);
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}


#blank:active {
  background:#303030;

}


.blanka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:transparent;
    color: white;
    font-size: 20px;
  padding: 5px 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}

.blanka:active {
  background:#303030;

}

.blanke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:transparent;
    color: white;
    font-size: 20px;
  padding: 5px 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}

.blanke:active {
  background:transparent;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;

}



#accountb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:transparent;
    color: white;
    font-size: 20px;
  padding: 5px 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}

#accountb:active {
  background:#303030;

}

button {
  justify-content: center;
    background: #ededed;
    color: black;
  border: 2px solid #ccc;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0px 4px #808080;
}

button:active{
  border-bottom: 2px solid #444;
  border-right: 2px solid #444;
  border-left: 2px solid #eee;
  border-top: 2px solid #eee;
  box-shadow: 0px 2px #404040;
  
background:#c0c0c0;
}

#walletbuttoncontainer {
  width: var(--walletbwidth);
  height: fit-content;
}


#paperb {
  width: var(--walletbwidth);
  height: 26px;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #000;
}

#orange {
  font-size: var(--walletfontsize);
  font-family: SilkScreen, sans-serif;
  margin-bottom: 10px;
  height:var(--walletbheight);
  width: var(--walletbwidth);
    align-items: center;
  display: none;
  justify-content: center;
  background: #ffb066;
  border: 2px solid #fff285;
  padding: 10px 30px;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0px 16px #cd6116;
  color: black;
}

#orange:active{
  position: relative; top: 6px;
  border-bottom: 2px solid #660;
  border-right: 2px solid #660;
  border-left: 2px solid #cc0;
  border-top: 2px solid #cc0;
  box-shadow: 0px 6px #420;
  
background:#c08020;
}

#blue {
  font-size: var(--walletfontsize);
  font-family: SilkScreen, sans-serif;
  margin-bottom: 10px;
  height:var(--walletbheight);
  width: var(--walletbwidth);
  align-items: center;
  display: none;
  justify-content: center;
  background: #007aff;
  border: 2px solid #c7ffbc;
  padding: 5px 5px;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0px 16px #003d80;
}


.sendprop,.sendprop:disabled {
  width: 90%;
  height: var(--sendpropheight);
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 12px #786e00;
}



.sendprop:enabled:active {
  position: relative; top: 6px;
  box-shadow: 0px 6px #420;
  
background:#ffea00;
}


#playst {
  height:var(--playbuttonheight);
  width:var(--playbuttonwidth);
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 12px #786e00;
}

#playst:disabled, #playst:active:disabled {
  background-color: #786e00;
  box-shadow: 0px 12px #3c3700;
}

#playst:active{
  position: relative; top: 6px;
  box-shadow: 0px 6px #420;
  
background:#ffea00;
}



#practicest {
  height:var(--playbuttonheight);
  width:var(--practicebuttonwidth);
  font-size: var(--buttonfontsize);
  padding: 10px 16px;
  border-radius: 12px;
  border: solid 1px #da880e;
  background-color: #ffb066;
  box-shadow: 0px 12px #da880e;
  color: #000000;
}

#practicest:active{
  position: relative; top: 6px;
  box-shadow: 0px 6px #da880e;
  
background:#ffb066;
}

.tokenspacer {
  width:16px;
}

#tokens {
  color: white;
  width: var(--playbuttonwidth);
  height: var(--sendheight);
  font-size: var(--tbuttonfontsize);
  padding: 10px 30px;
  border-radius: 9.6px;
  border: solid 1.6px #bcecff;
  background-color: #007aff;
  box-shadow: 0px 12px #003d80;
}

#tokens[disabled]:active, tokens[disabled] {
  box-shadow: 0px 12px #003d80;
  position: relative; top: 0px;
}

#tokens:active {
  position: relative; top: 5px;
  box-shadow: 0px 6px #003d80;

}



#sendMethod {
  width:594px;
  display: inline-flex;
  background-color: #003b80; 
  border-radius: 9.6px;
}

.sendmeth, .sendmeth:disabled {
  width: 297px;
  height: var(--sendheight);
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border: solid 0px #bcecff;
  border-radius: 9.6px;
  background-color: #003b80;
  box-shadow: 0px 0px #003d80;
}


#sendmethxxx:active {
  position: relative; top: 5px;
  box-shadow: 0px 6px #003d80;

}


.img-bg {
  background: transparent;
}

.timg-bg {
  background: transparent;
  height:20px;
  width:20px;
}

.timg-bgs {
  background: transparent;
  height:16px;
  width:16px;
}


#blue:active{
  position: relative; top: 6px;
  border-bottom: 2px solid #06c;
  border-right: 2px solid #06c;
  border-left: 2px solid #07f;
  border-top: 2px solid #07f;
  box-shadow: 0px 6px #003d80;
  
background:#0060c0;
}

#purple {
  font-size: var(--walletfontsize);
  font-family: SilkScreen, sans-serif;
  margin-bottom: 10px;
  height:var(--walletbheight);
  width: var(--walletbwidth);
  align-items: center;
  display: none;
  justify-content: center;
  background: #b388ff;
  border: 2px solid #f3e3f5;
  padding: 5px 5px;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0px 16px #594480;
}

#purple:active{
  position: relative; top: 6px;
  border: 2px solid #f3e3f5;
  box-shadow: 0px 6px #594480;
  
background:#8666c0;
}

.blacktext {
  color:black;
}

#green {
  color: black;
  font-size: var(--walletfontsize);
  font-family: SilkScreen, sans-serif;
  margin-bottom: 10px;
  height:var(--walletbheight);
  width: var(--walletbwidth);
  align-items: center;
  display: none;
  background: #00e676;
  border: 2px solid #c7ffbc;
  padding: 5px 5px;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0px 16px rgba(0, 230, 102, 0.3);
}

#green:active{
  position: relative; top: 6px;
  border-bottom: 2px solid rgba(0, 230, 102, 0.3);
  border-right: 2px solid rgba(0, 230, 102, 0.3);
  border-left: 2px solid #00e676;
  border-top: 2px solid #00e676;
  box-shadow: 0px 6px #404040;
  
background:#00c066;
}


#grey {
  font-size: var(--walletfontsize);
  font-family: SilkScreen, sans-serif;
  margin-bottom: 10px;
  height:var(--walletbheight);
  width: var(--walletbwidth);
    align-items: center;
  display: none;
  justify-content: center;
  background: #808080;
  border: 2px solid #c0c0c0;
  padding: 10px 30px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 16px #606060;
}

#grey:active{
  position: relative; top: 6px;
  border-bottom: 2px solid #666;
  border-right: 2px solid #666;
  border-left: 2px solid #ccc;
  border-top: 2px solid #ccc;
  box-shadow: 0px 6px #404040;
  
background:#606060;
}


input.toggle-btn {
  visibility: hidden;
}
input.toggle-btn::before {
  content: attr(value);
  display: inline-block;
  padding: 5px;
  background: #fff;
  font-size: 14pt;
  color: #aaa;
  border-radius: 5px;
  border: 1px solid #aaa;
  visibility: visible;
}
input.toggle-btn:checked::before {
  background: rgb(50,150,250);
  color: #eee;
  border-color: #eee;
}

.showAccount {
  width: fit-content;
  height: 41px;
  margin: 4px 0 0;
  font-family: Silkscreen;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.showAccountH {
  width: 500px;
  height: 31px;
  opacity: 0.4;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #fff;
}

.showAlias {
  width: 848px;
  height: 30px;
  font-family: Silkscreen;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #fff;
}

.showAliasH {
  width: 321px;
  height: 30px;
  opacity: 0.4;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #fff;
}



.account {
  font-family: Silkscreen;
  font-size: 15px;
  opacity: 1;
}

.stats {
  font-family: Silkscreen;
  font-size: 15px;
  opacity: 0.4;
}

.logout {
  font-family: Silkscreen;
  font-size: 15px;
  opacity: 0.4;
}


select {
  border-radius: 8px;
  background-color: #0c101b;

  font-size: 20px;
  height:68px;
  padding-right: 40px;
  background: url(icon_caret_down_solid_dark_active_20.png) no-repeat right #000;
  -webkit-appearance: none;
  background-position-x: 97%;
  background-position-y: 50%;
  border: 0px solid #ccc;
}

select option {
  font-size: 20px;
  margin: 40px;
  background: #404040;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#balance{
  width: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
}


#wrapper {
  width:100%;
  text-align: center;
}
.loader {
 width: 80px;
  height: 80px;
  display: inline-block;
  position: relative;
  border: 8px solid;
  border-color:#007aff #0000 #fff #0000;
  border-radius: 50%;
  box-sizing: border-box;
  animation: 1s rotate linear infinite;
}
.loader:before , .loader:after{
  content: '';
  top: 0;
  left: 0;
  position: absolute;
  border: 12px solid transparent;
  border-bottom-color:#fff;
  transform: translate(-6px, 42px) rotate(-35deg);
}
.loader:after {
  border-color: #007aff #0000 #0000 #0000 ;
  transform: translate(52px, 3px) rotate(-35deg);
}
 @keyframes rotate {
  100%{    transform: rotate(360deg)}
}



.Congratulations {
  margin-left: auto;
  margin-right: auto;
  font-family: Silkscreen;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffea00;
}

.You-can-transfer-you {
  width:  var(--withdrawsize);
  margin: auto;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

.YOUR-WALLET-ADDRESS {
  margin-left: auto;
  margin-right: auto;
  opacity: 0.4;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  color: #fff;
  background-color: transparent;
}

.walletAddress {
  margin-left: auto;
  margin-right: auto;
  font-family: Silkscreen;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 30px;
  letter-spacing: normal;
  color: #fff;
  background-color: transparent;
}

.BG-Colour-Copy-2 {
  width:  var(--withdrawsize);
  margin-left: auto; margin-right: auto;
  padding: 12px 10px;
  border-radius: 12px;
  background-color: rgba(0,0,0,0.4);
}

.withdrawsize {
  padding: 0px 0px;
  display: flex;
  width: var(--withdrawsize);
}



td {
  font-family: Silkscreen;
  font-size: 24px;
  padding:10px;
}

.ntd {
  font-family: Silkscreen;
  font-size: 24px;
  padding:0px 5px;
}

.atd {
  margin: 0px;
  padding: 0px 10px;
}

.watd {
  margin: 0px;
  padding: 0px 0px;
}

.atr {
  line-height: 20px;
  margin: 0px;
  padding: 0px;
}

.Account-Balance {
  margin-left: auto;
  margin-right: auto;
  opacity: 0.6;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

.Account-BalanceV {
  margin-left: auto;
  margin-right: auto;
  font-family: Silkscreen;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

.Withdrawl-Limit {
  width:fit-content;
  margin-left: auto;
  opacity: 0.6;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #fff;
}

.Withdrawl-LimitV {
  width:fit-content;
  margin-left: auto;
  font-family: Silkscreen;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #fff;
}


#infoTable {
  padding-bottom: 16px;
  width: var(--withdrawsize);
}

.TransfersAreProces {
  padding-bottom: 16px;
  width: var(--withdrawsize);
  margin: 36px 0px 0 0px;
  opacity: 0.6;
  font-family: Silkscreen;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #fff;
}

#WAMOUNTP {
  width: var(--withdrawsize);
  height: 124px;
  margin: 24px 0 16px 4px;
  padding: 24px 0px 26px 0px;
  opacity: 0.4;
  border-radius: 12px;
  background-color: #000;
}

#wamounth {
  background-color: transparent;
  font-family: Silkscreen;
  font-size: 20px;
  color: #f8e71c;
}

#wamounth2 {
  background-color: transparent;
  font-family: Silkscreen;
  font-size: 15px;
  color:rgba(255, 255, 255, 0.4);
}

#wamounth2m {
  background-color: transparent;
  font-family: Silkscreen;
  font-size: 18px;
  color:rgba(255, 255, 255, 0.4);
}

#wamount {
  margin-left: 20px;
  padding-right: 20px;
  text-align: right;
  border: 0px solid #ccc;
  background-color: transparent;
  font-family: Silkscreen;
  font-size: 48px;
  color:#ffffff;
  background-color:transparent;
  outline: none;
}


.wcontainer {
  margin-left: auto; margin-right: auto;
  width: var(--withdrawsize);
  margin-bottom: 0px;
  padding:8px 10px 8px 5px;
  opacity: 1.0;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);

  display: flex;
}

.container {
  margin-left: auto; margin-right: auto;
  width: var(--withdrawsize);
  margin-bottom: 16px;
  padding:20px 10px 20px 5px;
  opacity: 1.0;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);

  display: flex;
}
.div1,
.right {
  display: flex;
  flex-direction: column;
}
.div1,
.right > div {
  padding: 0em;
}
.right {
  background:transparent;
}
.div1 {
  background:transparent;
}
.div2 {
  background: transparent;
}
.div3 {
  background:transparent;
}

#requestTransfer {
  width: var(--withdrawsize);
  font-size: 36px;
  height: 48px;
  font-size: var(--buttonfontsize);
  padding: 10px 0px;
  border-radius: 12px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 12px #c0af00;
}

#requestTransfer:active{
  position: relative; top: 6px;
  box-shadow: 0px 6px #cb0;
  
background:#ffea00;
}

#requestTransfer:disabled,#requestTransfer:active:disabled {
  background-color: #c0af00;
  box-shadow: 0px 12px #c0af00;
  position: relative; top: 0px;
}

.button--loading {
  position: relative;
  overflow: hidden;
}

.button--loading:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 80%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 4px solid #fff;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-sizing: border-box;
  transform-origin: 50% 50%;
}

@keyframes spin {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

.BalanceBox { height: 150px; }
.BalancePP,.BalancePPx { line-height: 82px;  }

.container2 {
  width: var(--withdrawsize);
  margin-top: 4px; 
  margin-bottom:8px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 0px 12px 0px;
  opacity: 1.0;
  border-radius: 12px;
  vertical-align: middle;

}


.modal {
  height: 100%;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  width: 100%;
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color:rgba(0,0,0,0.5) ; /* Fallback color */
align-items: center; justify-content: center;

}

.modal-edit {
  height: 100%;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  width: 100%;
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color:rgba(0,0,0,0.5) ; /* Fallback color */

  align-items: center; justify-content: center;
}

/* Modal Content/Box */
.modal-content {
  text-align: center;
  background-color: transparent;
  margin: auto; /* 15% from the top and centered */
  border: 0px solid transparent;
  width: 864px; /* Could be more or less, depending on screen size */
}

.modal-content2 {
  text-align: center;
  background-color: #141a2d;
  border-radius: 12px;
  padding: 20px;
}

.modal-contente {
  margin-top: 20px;
  text-align: center;
  background-color: #141a2d;
  border-radius: 12px;
  padding: 20px;
}

.modal-editalias {
  text-align: center;
  background-color: transparent;
  margin: 0px auto; /* 15% from the top and centered */
  border: 12px solid transparent;
  height: fit-content;
  width: 680px; /* Could be more or less, depending on screen size */
}

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

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


.close2 {
  color: #aaa;
  float: left;
  font-size: 28px;
  font-weight: bold;
  background-color: transparent;
}

.close2:hover,
.close2:focus {
  color: black;
  background-color: #303030;
  text-decoration: none;
  cursor: pointer;
}

.closel {
  color: #aaa;
  float: left;
  font-size: 28px;
  font-weight: bold;
  background-color: transparent;
}

.closel:hover,
.closel:focus {
  color: black;
  background-color: #303030;
  text-decoration: none;
  cursor: pointer;
}


.back {
  color: #aaa;
  float: left;
  font-size: 28px;
  font-weight: bold;
  background-color: transparent;
}

.back:hover,
.back:focus {
  color: black;
  background-color: #303030;
  text-decoration: none;
  cursor: pointer;
}

.anim {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  background-color: transparent;
}

.half {
 background-color: transparent;
}


#changeName {
  width: 320px;
  font-size: 30px;
  height: 48px;
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 12px #786e00;
}

#changeName:active{
  position: relative; top: 6px;
  box-shadow: 0px 6px #420;
  
background:#ffea00;
}

#page {
  width: 100%;

  display: flex;
}

#main {
  width: fit-content;
}

#maincontent {
  background-color: transparent;
  float: left;
  width: min-content;   
  height: min-content;   
}

#walletStuff {
  width: min-content;   
  height:fit-content;
  justify-content: center;
}

#walletStuff2 {
  padding-top: 40px;
  padding-left: 60px;
  padding-right: 60px;
  background-color: #141a2d;
  border-radius: 12px;
  min-height: fit-content;
}

#menuleftcontent{
  float: left;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden

}


#menuleftcontentx img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%
}

.fillimg {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

#outer {
  width:100%;
  display: flex;
  justify-content: center;
}

#networkid{
  width:100%;   
 }

 #tokenid{
  width:100%;   
 }

 #otherStuff {
  position: relative;
  background-color: trans;
  width: fit-content;
 }

 #otherStuff2 {
  border-radius: 16px;
  background-color: #141a2d;
  width: fit-content;
 }


 .secondpageframe {
  background-color: transparent;
  border:solid 00px red;
 }



 .swiper-container {
  background-color: var(--bglight);
  width: 100%;
  height: 100%;
}

.swiper {
    background-color:var(--bglight);
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: var(--bgdark);
  display: block;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.letsgo {
    width: var(--buttonwidth);
    height: var(--buttonheight);
    font-size: var(--buttonfontsize);
    padding: 10px 30px;
    border-radius: 12px;
    border: solid 0px #fff285;
    background-color: #ffea00;
    box-shadow: 0px 12px #786e00;
    color: black;
    position: relative;
/*    top:00px;*/

  }
  
  .letsgo:active{
    box-shadow: 0px 0px #420;
  position: relative; top: 6px;
/*    top:-20px;*/


  background:#ffea00;
  }
  
  .sideholder {
    display: block;
  }

  .sideheader {
    margin-right: 8px;
    padding-top: 4px;
    padding-bottom: 12px;
    height: 34px;
    font-size: 24px;
  }

  .asideheader {
    padding-top: 10px;
    height: 34px;
    font-size: 24px;
  }

  .welcomeblock1 {
    border-radius: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-right:10px;
    background-color: var(--bgdark);
    width:100%;
  }
  
  .welcomeblock2 {
    width: 100%;
    display:block;
  }
  
  .welcomeblock3 {
    display: inline-flex;
    width: 100%;
    height: fit-content;
  }
  
  .welcomeblock4 {
    border-radius: 8px;
    padding-top: 28px;
    padding-bottom: 28px;
    width: 50%;
    align-items: center;
    justify-content: center;
    background-color: var(--bgdark);
  }
  
  .welcometbig {
    width:100%;
    line-height: 60px;
    font-size: 48px;
  }
  
  .welcometsmall {
    width:100%;
    margin-top: 0px;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
  }
  
  .scorerlarge {
    border-radius: 8px;
    width: 100%;
    background-color: var(--bgdark);
    display: inline-flex;
  
    height: 74px;
    line-height: 74px;
    text-align: center;
  }
  
  .scorerlc1 {
    padding-left:var(--scorelpad);
    text-align: center;
    font-size: 36px;
    width: var(--scorecol1);
  }
  
  .scorerlc2 {
    text-align: left;
    font-size: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: var(--scorecol2);
  }
  
  .scorerlc3 {
    padding-right: var(--scorelpad);
    text-align: right;
    font-size: 36px;
    width: var(--scorecol3);
  }
  
  
  
  .scorerone {
    height:min-content;
  }
  
  .scorermedium {
    padding-top:8px;
    border-radius: 8px;
    height:fit-content;
    width: 100%;
    padding-bottom: 16px;
    background-color: var(--bgdark);
    display: block;
  
    text-align: center;
  }
  
  .scorersmall {
    width: 100%;
    background-color: var(--bgdark);
    display: inline-flex;
  
    height: 36px;
    line-height: 32px;
    text-align: center;
  }
  
  .scorersc1 {
    padding-left: var(--scorespad);
    text-align: middle;
    font-size: 20px;
    line-height: 30px;
    width: var(--scorecol1);
  }
  
  
  
  
  .scorersc2 {
    text-align: left;
    font-size: 20px;
    line-height: 30px;
    width: var(--scorecol2);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .scorersc3 {
    padding-right: var(--scorespad);
    text-align: right;
    line-height: 30px;
    font-size: 20px;
    width: var(--scorecol3);
  }
  
  
  #guide {
    height:var(--buttonheight);
    width:var(--buttonwidth);
    font-size: var(--buttonfontsize);
    padding: 10px 30px;
    border-radius: 12px;
    border: solid 1px #9c9c9c;
    background-color: #616161;
    box-shadow: 0px 12px #282828;
    color: #bdbdbd;
  
    position:relative; bottom:30px;
  }
  
  #guide:active{
    position: relative; top: 6px;
    box-shadow: 0px 6px #282828;
    position:relative; top:-20px;
  background:#616161;
  }
  

  .scorersc4 {
    vertical-align:middle;
    display: inline-block;
    width: var(--scorecol4);
    padding-right: 10px;
/*    background-color: blue;*/
  }
  
  .scorerlc4 {
    width: var(--scorecol4);
    padding-right: 10px;
    vertical-align: center;
/*    background-color:red;*/
   }
   

  .flagi {
    width:36px;
    height: 36px;
  }
  
  

  .swipebutton {
    text-align: center;
    width:40px;
    padding: 0px;
    height:40px;
    line-height: 24px;
    color: #888;
    float: left;
    font-size: 24px;
    font-weight: bold;
    border: solid 0px transparent; 
    box-shadow: 0px 0px transparent;
    background-color: transparent;
  }
  
  .swipebutton:active {
    border-radius: 50%;
    color: black;
    background-color: #007aff;
    opacity: 0.5;
    text-decoration: none;
    cursor: pointer;
  }

  @media (hover: hover) and (pointer: fine) {
    .swipebutton:hover {
      border-radius: 50%;
      color: black;
      background-color: #007aff;
      opacity: 0.5;
      text-decoration: none;
      cursor: pointer;
    }
  }


  .percentcontainer {
    padding-left: 8px;
    padding-top: 26px;
    padding-bottom:17px;
    display: inline-flex;
    background-color: var(--bgdark);
    border-radius: 8px;
    width:100%;
  }

  .percentcontainera {
    padding-left: 8px;
    padding-top: 15px;
    padding-bottom:15px;
    display: inline-flex;
    background-color: var(--bgdark);
    border-radius: 8px;
    width:100%;
  }

  .percentside {
    padding-left: 24px;
    padding-top: 16px;
    width: 30%;
  }

  .percentflags {
    width:36px;
    height:36px;
  }

  .percentname {
    margin-top: 12px;
    font-size: 20px;
    width:100%;
    color:white;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

  }

  .percentplace {
    margin-top: 0px;
    color:white;
    width:100%;
    font-size:36px;
    text-align: left;
  }

  .percentholder {
    display: block;
    width:60%;
    border-radius: 8px;
  }

  .percentsvg {
    height:80px;
    float: right;
    margin-right: 40px;
  }

  .box {
    fill: orange;
    stroke: none;
  }

  .baseline {
    fill: #616161;
    stroke: none;
  }

  .statscontainer {
    width:100%;
    border-radius: 8px;
    background-color: var(--bgdark);
    padding-bottom: 20px;
  }

  .statstable {
    width:100%;
    padding: 0px;
    border: 0px;
    cellspacing: 0px;
    cellpadding: 0px;
  }

  .statscell {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .statstr {
  }

  .statstd {
  }

  .statsheader {
    margin-bottom: 4;
    margin-top: 18px;
    font-size: 20px;
    color: white;
    padding-top: 18px;
    padding-bottom:2px;
    width:100%;
    line-height: 40px;
  }


  .statstsmall {
    text-align: center;
    font-size: 15px;
    line-height: 30px;
    color: white;
    width:100%;
    opacity: 60%;
  }
  
  .statstbig {
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    color: white;
    width:100%;

  }

  .percentheader {
    width:fit-content;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .graphtopt {
    font-style: normal;
    font-size: 18px;
    color:#00e676;
    line-height: 18px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  .graphbottomt {
    font-size: 18px;
    font-style: normal;
    color:white;
    line-height: 18px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }


  .graphcontainer {
    padding-top: 7px;
    padding-bottom: 6px;
    width:100%;
    display: block;
    background-color: var(--bgdark);
    height: fit-content;
    border-radius: 8px;
  }

  .graphheader {
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
    color:white;
    font-size: 20px;
  }

  .graphholder {
    width:100%;
    display: flex;
    height: fit-content;
  }

  .onebart1 {
    text-anchor:middle;
    font-size: 15px;
    fill: white;
  }

  .onebart2 {
    text-anchor:middle;
    font-size: 15px;
    fill: rgba(255,255,255,0.6);
  }

  .onebar {
    height: fit-content;
    padding-left: 0px;
    padding-right: 0px;
    width:20%;
  }

  .onebarbar {
    fill:#00e676;
  }

  .alltimeparent {
    width: 100%;
    background-color: var(--bgdark);
    border-radius: 8px;
  }

  .alltimecontainer {
    padding-top: 38px;
    display: block;
    width: 100%;
  }

  .alltimeheader {
    font-size: 20px;
    color:white;
  }

  .alltimegraphcontainer {
    padding-top: 20px;
    width: 100%;
    display: inline-flex;
    height:210px;
  }

  .alltimeitem {
    padding-left: 0px;
    padding-right: 0px;
    width:20%;
    text-align: center;
  }

  .alltimeitembar {
    margin: auto;
    fill:#007aff;
  }


  .alltimeitemt1 {
    text-anchor:middle;
    font-size: 15px;
    fill: white;
  }

  .alltimeitemt2 {
    text-anchor:middle;
    font-size: 15px;
    fill: white;
  }

  .alltimecontainer2 {
    padding-top: 30px;
    width: 100%;
    display: inline-flex;
  }

  .alltimecontainer3 {
    display:block;
    width: 55%;
  }
  .alltimecontainer4 {
    display: block;
    width: 45%;
  }

  .alltimeitem25 {
    height:fit-content;
    padding-left: 0px;
    padding-right: 0px;
    width:25%;
    text-align: center;
  }

  .alltimeitem33 {
    height:fit-content;
    padding-left: 0px;
    padding-right: 0px;
    width:33%;
    text-align: center;
  }

  .acctdh {
    padding: 36px 0px 0px 0px;
    height: max-content;
  }
  

.accounth {
  margin-top: auto;
  margin-bottom: auto;
  font-size: 20px;
  color:#ffffff;
  
}

.accountth {
  height: fit-content;
  font-size: 20px;
  color:#ffffff;

}

.accountthp {
  display:flex;
}


.accountth60 {
  width: 60%;
  padding-right: 10px;
  height: fit-content;
  font-size: 20px;
  color:#ffffff;
}

.accountth40 {
  width: 40%;
  height: fit-content;
  font-size: 20px;
  color:#ffffff;
}

.accountls {
  display: block; 
  width:45%; 
  text-align: right; 
  padding-right: 10px;
}

.accountrs {
  display: block; 
  width:55%; 
  text-align: left;
}


.accounthc {
  cursor: pointer;
  padding-left: 46px; padding-right: 46px;
  padding-top: 20px;
  padding-bottom: 20px;
  
}

.accounthcm {
  cursor: pointer;
  padding-left: 32px; padding-right: 6px;
  padding-top: 20px;
  padding-bottom: 20px;
  height: fit-content;
}

.accounttrh {
  overflow: hidden;
    height: 14px;
    white-space: nowrap;
  height:20px;
  border-collapse: collapse;
}

.accounttr {
  border-bottom: 1px solid #404040;
}

.accounttable {
  border-collapse: collapse;
  padding-right:32px;
  padding-left:12px;
  margin-left: 40px;
}

.accounttr:last-child {
  border-bottom: none;
}

.accountt1 {
  font-size: 20px;
  color: #ffffff;
  max-lines: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accountt1t {
  font-size: 20px;
  color: #ffffff;
  font-family: RFuni,sans-serif;
}

.accountt2 {
  font-size: 16px;
  color: #ffffff;
  opacity: 40%;
  margin-left: 104px;
}

.accountt2m {
  font-size: 16px;
  color: #ffffff;
  opacity: 40%;
  margin-left: 88px;
}

.accountt3 {
  font-size: 16px;
  color: rgba(255,255,255,0.4);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.accountt3clip {
  font-size: 16px;
  color: rgba(255,255,255,0.4);
  text-overflow: ellipsis;
  background-color: red;
  width:50%;
  white-space: nowrap;
  overflow: hidden;
}

.acctdc {
  background-color: blue;
  display: block; 
  width:60%; 
  text-align: right; 
  padding-right: 10px;
}

.acctd {
  padding: 24px 0px;
}


.acctdhi {
  padding: 16px 0px 0px 0px;
}

.gamesetimg {
  position: relative;
  top:32px;
}


#pageselect {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #202020;
}

#logselect {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #202020;
}

#account_balance {
  font-size: 48px;
  font-family:RFuni, sans-serif;
}

#refreshaccounts {
  padding-left:8px;
  padding-right:8px;
  padding-top:8px;
  padding-bottom:8px;
  cursor: pointer;
}

#refreshaccounts:active {
  background:#303030;

}

.accountButton {
  cursor: pointer;
  color:white;
  width:50px;
  text-align: center;
  padding-top:8px;
  padding-bottom:8px;
  height: 24px;

}

.accountButton:active {
  background:#212121;

}

.accountButtonh {
  cursor: pointer;
  color:white;
  width:50px;
  height: 24px;
  background-color: #404040;
  text-align: center;
  padding-top:8px;
  padding-bottom:8px;

}

.accountButton:active {
  background:#303030;

}

.accountButtoni {
  cursor: pointer;
  padding-left:8px;
  padding-right:8px;
  padding-top:8px;
  padding-bottom:8px;

}

.accountButtoni:active {
  background:#303030;

}

.copytext {
  cursor:copy;
}

.aalltimecontainer {
  padding-top: 00px;
  display: block;
  width: 100%;
}

.aalltimegraphcontainer {
  padding-top: 20px;
  width: 100%;
  display: inline-flex;
  height:162px;
}

.actext1 {
  font-size: 20px;
  color:#ffffff;
}

.actext2 {
  font-size: 15px;
  color:rgba(255,255,255,0.4);
}

.actext3 {
  font-size: 15px;
  color:rgba(255,255,255,0.6);
}

.actext4 {
  font-size: 15px;
  color:#ffffff;
}

.abestplays {
  background-color: var(--bgdark); border-radius: 8px;
}


.stattdh {
  font-family: Silkscreen;
  font-size: 24px;
  padding:8px 10px 0px 10px;
}



.aonebar {
  padding-top: 17px;
  padding-bottom: 17px;
  height:74px;
  width:100%
}

.aonebarx {
  padding-top: 16px;
  padding-bottom: 17px;
  height:74px;
  width:100%
}

.aonebarbar {
  margin: auto;
  height:12px;
  fill:#00e676;
}

.aonebart1 {
  font-size: 20px;
  fill: white;
}

.aonebart2 {
  font-size: 15px;
  fill: white;
}

@media screen and (max-height: 500px) {
  /* comes into effect for screens less than or equal to 320 pixels */
  .aonebart2 {
    font-size: 18px;
    fill: white;
  }

  .alltimeitemt1 {
    text-anchor:middle;
    font-size: 17px;
    fill: white;
  }

  .alltimeitemt2 {
    text-anchor:middle;
    font-size: 17px;
    fill: white;
  }

  .actext2 {
    font-size: 17px;
    color:rgba(255,255,255,0.4);
  }
  

  .accountt2 {
    font-size: 17px;
    color: #ffffff;
    opacity: 40%;
    margin-left: 104px;
  }

  
  .acgtext2 {
    font-size: 17px;
    color:rgba(255,255,255,0.4);
  }
  
}


.aalltimeitem {
  padding-left: 0px;
  padding-right: 0px;
  width:20%;
  text-align: center;
}

.gamesetline {
  display:flex;
  width:100%;
  height:64px;
}

.gamesetcontainer {
  width:100%;
  background-color:rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  display: block;
}

.gameset1 {
  display:flex;
  width:16.5%;
}

.gameset2 {
  align-items: center;
  display:flex;
  width:22.3%;
}

.gameset3 {
  display:flex;
  width:20.8%;
}

.gameset4 {
  align-items: center;
  display:flex;
  width:22.3%;
}

.gameset5 {
  display:flex;
  width:18.1%;
}

.mgameset1 {
  display:flex;
  width:25%;
}

.mgameset2 {
  align-items: center;
  display:flex;
  width:22.5%;
}

.mgameset3 {
  display:flex;
  width:25%;
}

.mgameset4 {
  align-items: center;
  display:flex;
  width:22.5%;
}
.mgameset5 {
  display:flex;
  width:5%;
}


.gamesett1 {
  font-size: 24px;
  color:#00e676;
}

.gamesetsub {
  font-size: 15px;
  color: rgba(255,255,255,0.4);
}

.gamesetmain {
  font-size: 20px;
  color:#ffffff;
}

.gamesettc {
  width:80px;
  text-align: right;
}

.gamesetkey {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #141a2d;
  width:100%;
  text-align: center;
  font-size: 20px;
  color:#ffffff;
  height: 36px;
  line-height: 36px;
}

.gamesetkeysmall {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #141a2d;
  align-items: center;
  width:60px;
  text-align: center;
  height:36px;
  font-size: 20px;
  line-height: 36px;
  color:#ffffff;
}

.skeyclass {
  position: relative;
top: 50%;
transform: translateY(-50%);
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 22px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: -4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #00733b;
}

input:focus + .slider {
  box-shadow: 0 0 1px #00733b;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}

.volumecontrol {
  width:80px;
  display: block;
}



.vbox {
  fill:url(#half)
}

.acimg {
  height:30px;
}

.acgtext1 {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color:#ffffff;
}

.acgtext2 {
  font-size: 15px;
  color:rgba(255,255,255,0.4);
}

.acgtext3 {
  font-size: 15px;
  color:rgba(255,255,255,0.6);
}

.acgtext4 {
  font-size: 15px;
  color:#ffffff;
}

/*#accountsright {
  height: var(--accountsheight);
}

#gamelogsright {
  height: var(--accountsheight);
}

#aboutright {
  height: var(--accountsheight);
}

#gamesettingright {
  height: var(--accountsheight);
}

#rankingsright {
  height: var(--accountsheight);
}*/

.zerobalance {
  background-color: var(--bgdark);
}

.zerobt1 {
  text-align: center;
  font-size: 36px;
  margin-left: auto;
  margin-right: auto;
}

.zerobt2 {
  text-align: center;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
}

.zerobt3 {
  text-align: center;
  font-size: 15px;
  margin-left: auto;
  margin-right: auto;
    text-decoration-line: none;

}

.nounderline {
  text-decoration-line: none;
}


.sidecontent {
  display:block;
  height:572px;
  width:596px;
  background-color: rgba(0,0,0,0.4);
  border-radius: 8px;
}

.greybutton {
  height:var(--buttonheight);
  width:var(--buttonwidth);
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 1px #9c9c9c;
  background-color: #616161;
  box-shadow: 0px 12px #282828;
  color: #bdbdbd;

  position:relative; bottom:30px;
}

.greybutton:active{
  position: relative; top: 6px;
  box-shadow: 0px 6px #282828;
  position:relative; top:-20px;
background:#616161;
}

.ageheader {
  padding-top: 56px;
  font-size: 36px;
  color:#ffea00;
  margin-bottom: 24px;
}

.agesubheader {
  font-size: 24px;
  color:#ffffff;
}

.agefooter {
  font-size: 20px;
  color:#ffffff;
}

.terms {
  background-color: rgba(0,0,0,0.4);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 14px;
  color:rgba(255, 255,255, 0.8);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #ff0000;
}

#agepage {
  background-color: #141a2d;
  margin-left: auto;
  margin-right: auto;
}

.modal-contenta {
  margin:0 auto;
  width:min-content;
  background-color: transparent;


  text-align: center;
}


#agecontainer {
  height: 208px;
  width: 498px;
  position: relative;
}

#ageimage {
  position: absolute;
  left: 0;
  top: 0;
}

#agetext {
  z-index: 100;
  position: absolute;
  color:#f8e71c;
  font-size: 24px;
  left: 210px;
  top: 50px;
}

.gamesetb {
  justify-content: center;
    background: rgba(0,122,255,0.083);
    color: white;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
  font-size: 20px;
  width:312px;
}

.gamesetb:focus {
  outline:none;
}

.gamesetb:hover {
  background: rgba(0,122,255,0.1666);

}

.gamesetb:active{
  background: rgba(0,122,255,0.333);
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
  
}

.modal-flag {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  width: 100%;
  height:90%;
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color:rgba(0,0,0,0.5) ; /* Fallback color */


}

@media screen and (max-height: 500px) {
  /* comes into effect for screens less than or equal to 320 pixels */
  #flagcontainer {
    height: 370px;
  }
}

.modal-flag-container {

  height: 510px;
  width: fit-content;
  border-radius: 8px;
  margin-top: 36px;

  overflow-y:scroll;

/*  -ms-overflow-style: none;  /* Internet Explorer and Edge */
/*  scrollbar-width: none;  /* Firefox */

  overflow-y: scroll; /* Add the ability to scroll the y axis */
}

/* Hide the scrollbar for Chrome, Safari and Opera */
/*.modal-flag-container::-webkit-scrollbar {
  display: none;
}*/

.modal-flag-container::-webkit-scrollbar {
  width: .5rem;
  height: 5px;
}

/* Track */
.modal-flag-container::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px white;
  border-radius: 10px;
}

/* Handle */
.modal-flag-container::-webkit-scrollbar-thumb {
  background: grey;
  border-radius: 10px;
}


.sflag {
    padding-top: 35px;
    padding-bottom: 35px;
    padding-right: 35px;
    padding-left: 35px;
    width:48px;
    height: 35px;
    background-color:#14284b;
    border-color:transparent;
    border-width:1px;
    border-style:solid;

  }

.flagtd {
  width:120px;
  height:107px;
  padding: 2px 2px;
}


.modal-editflag {
  padding-bottom: 36px;
  text-align: center;
  background-color: #141a2d;
  margin: 5% auto; /* 15% from the top and centered */
  border-radius: 12px;
  height: fit-content;
  padding-left: 48px;
  padding-right: 48px;
  width: 650px; }


  .confirmButton {
    height:var(--walletbheight);
    width: 340px;
    font-size: 24px;
    padding: 10px 30px;
    border-radius: 12px;
    border: solid 0px #fff285;
    background-color: #ffea00;
    box-shadow: 0px 16px #786e00;
  }
  
  .confirmButton:active{
    position: relative; top: 6px;
    box-shadow: 0px 6px #420;
    
  background:#ffea00;
  }

  .confirmButtonG {
    height:var(--walletbheight);
    width: 340px;
    font-size: 24px;
    padding: 10px 30px;
    border-radius: 12px;
    border: solid 0px #00e676;
    background-color: #00e676;
    box-shadow: 0px 16px #007b3b;
  }
  
  .confirmButtonG:active{
    position: relative; top: 6px;
    box-shadow: 0px 6px #420;
    
  background:#00e676;
  }

  .closeeml {
    color: #aaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
    background-color: transparent;
  }
  
  .closeeml:hover,
  .closeeml:focus {
    color: black;
    background-color: #303030;
    text-decoration: none;
    cursor: pointer;
  }
  
  .closepin {
    color: #aaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
    background-color: transparent;
  }
  
  .closepin:hover,
  .closepin:focus {
    color: black;
    background-color: #303030;
    text-decoration: none;
    cursor: pointer;
  }

  .pinno {
    margin-left: 2px;
    margin-right: 2px;
    font-size: 30px;
    line-height: 62px;
    width:64px;
    text-align: center;
  
    background-color: rgba(0, 0, 0, 0.4);

    outline:none; 
    border:none;
    caret-color: red;
    border-radius: 8px;
  }
  
  
  .modal-logindialog {
    text-align: center;
    background-color: transparent;
    margin: 0px auto; /* 15% from the top and centered */
    border: 12px solid transparent;
    width: 664px; /* Could be more or less, depending on screen size */
  }

  .modal-login {
    height: 100%;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    width: 100%;
    left: 0;
    top: 0;
    overflow: auto; /* Enable scroll if needed */
    background-color:rgba(0,0,0,0) ; /* Fallback color */
    align-items: center; justify-content: center;
  
  }
  
  .widialog {
    background-color: rgba(0,0,0,0.4); 
    outline:none; 
    border-radius: 8px;
    border:none;
    caret-color: red;
    padding-left: 8px;
    text-align: left;
  }

  .emailclass {
    background-color: rgba(0,0,0,0.4); 
    outline:none; 
    border-radius: 8px;
    border:none;
    caret-color: red;
    text-align: center;
  }

/*  .emailclass:focus {
    background-color: green;
  }*/

  .aliasclass {
    background-color: rgba(0,0,0,0.4); 
    outline:none; 
    border-radius: 8px;
    border:none;
    font-size: 24px;
    line-height: 48px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .aliasparent {
    margin-left: 48px;
    margin-right: 48px;
    display:flex; 
    background-color: rgba(0,0, 0, 0.4); 
    border-radius: 8px;
    height: fit-content;
  }

  #resendpin:hover {
    color:yellow;
  }

  .perftr {
    border-bottom: 1px solid #404040;
  }

  .perftable {
    border-collapse: collapse;
  }
  
  .actd {
    vertical-align: middle;
    margin: 0px;
    padding: 24px 10px 24px 10px;
  }

  .actdc {
      height: fit-content;
  }
  
  #formc {
    height:470px;
    padding-right: 0px;
    width:100%;
  }


  #iframeholderp {
    height:fit-content;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-left: 32px;
    margin-right: 24px;
    background-color: white;
    color: black;
    display: none;
    border-radius: 8px;
    scrollbar-width: none;
    overflow-y: scroll;
    align-items: center;
    justify-content: center;
  }

  #iframeholder {
    background-color: white;
    color: black;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    height: fit-content;
  }

  /* Ensure that any paragraphs inside the iframeholder have black text!*/
  #iframeholder p {
    background-color: white;
    color: black;
  }

.cccountry {
  text-indent: 8px;
  background-color: #141a2d;
  color: white;
}


.sendcred,.sendcred:disabled {
  width: 588px;
  height: 48px;
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border-radius: 8px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 12px #786e00;
}



.sendcred:enabled:active {
  position: relative; top: 6px;
  box-shadow: 0px 6px #420;
  
background:#ffea00;
}

#topupTokens,#topupTokens:disabled {
  width: 100%;
  height: 48px;
  font-size: 24px;
  padding: 10px 30px;
  border-radius: 8px;
  border: solid 0px #fff285;
   box-shadow: 0px 12px #786e00;
   background-size: 50%;
}

.AnimationName {
  color:white;
  background:linear-gradient(to right, #e02020 00%, #fa6400 16%, #f7b500 32%,  #6dd400 49%,  #0091ff 65%,  #6236ff 81%,  #b620e0 100%);
  background-size: 50%;
  webkit-animation: AnimationNamex 5s ease infinite;
  -moz-animation: AnimationNamex 5s ease infinite;
  animation: AnimationNamex 0.5s ease infinite;
}

.AnimationNone {
  color:black;
  background-color: #ffea00;
}

@-webkit-keyframes AnimationNamex {
   0%{background-position:0% 16%}
   16%{background-position:16% 32%}
   32%{background-position:32% 49%}
   49%{background-position:49% 65%}
   65%{background-position:65% 81%}
   81%{background-position:81% 100%}
   100%{background-position:100% 0%}
}
@-moz-keyframes AnimationNamex {
  0%{background-position:0% 16%}
  16%{background-position:16% 32%}
  32%{background-position:32% 49%}
  49%{background-position:49% 65%}
  65%{background-position:65% 81%}
  81%{background-position:81% 100%}
  100%{background-position:100% 0%}
}
@keyframes AnimationNamex {
  0%{background-position:0% 16%}
  16%{background-position:16% 32%}
  32%{background-position:32% 49%}
  49%{background-position:49% 65%}
  65%{background-position:65% 81%}
  81%{background-position:81% 100%}
  100%{background-position:100% 0%}
}


#topupTokens:enabled:active {
  position: relative; top: 6px;
  box-shadow: 0px 6px #420;
  
/*  background-image: linear-gradient(to right, #701010 00%, #7d3200 16%, #7d5a00 32%,  #377a00 49%,  #004880 65%,  #311b80 81%,  #5b1070 100%);*/
}

.sendval {
  width: 588px;
  height: 48px;
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border-radius: 8px;
  border: solid 0px #808080;
  background-color: #808080;
  box-shadow: 0px 12px #222;
}

.sendval:disabled {
  
  background:#404040;
  border: solid 0px #404040;
}


.sendval:enabled:active {
  position: relative; top: 6px;
  box-shadow: 0px 6px #222;
  
background:#808080;
}

  

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #0c101b inset;
}

.nopayment {
  padding-top: 120px;
    display: none;  
    margin-left: 40px; 
    margin-top: 24px;
    margin-bottom: 12px;
    height: 410px; 
    background-color: rgba(0,0,0,0.4); 
    border-radius: 8px
}

.nopaymenttext {
    font-size: 20px; 
}


/* Imported from welcome */

.w_modal-content {
  margin:0 auto;
  width:min-content;
  background-color: transparent;


  text-align: center;
}



.w_scorersc4 {
  vertical-align:middle;
  display: inline-block;
  width: var(--w_scorecol4);
  padding-right: 10px;
/*    background-color: blue;*/
}

.w_scorerlc4 {
  width: var(--w_scorecol4);
  padding-right: 10px;
  vertical-align: center;
/*    background-color:red;*/
 }
 

.w_flagi {
  width:36px;
  height: 36px;
}





#w_page {
background-color: var(--bglight);
}

#w_agepage {
background-color: var(--bglight);
}


#w_alertpage {
background-color: var(--bglight);
}

#w_alertcontent {
display: block;
background-color: rgba(0,0,0,0.4);
border-radius: 8px;
height:572px;
width:1248px;
}

#w_alertheader {
width: fit-content;
margin-right: auto;
font-size: 24px;
color:#ffffff;
margin-bottom: 8px;
}

#w_alerttitle {

font-size: 30px;
color:#ffea00;
}

#w_alerttoptext {
margin-top: 24px;
margin-bottom: 24px;
font-size: 24px;
color:#ffffff;
}

#w_alertbottomtext {
margin-top: 24px;
font-size: 20px;
color:#ffffff;
}


.w_header {
  margin-top:48px;
  margin-bottom: 10px;
  color:#ffea00;
  font-size: 36px;
}

.w_subheader {
  color:#ffffff;
  font-size: 24px;
  line-height: 1.5;
}

.w_subheader2 {
color:#00e676;
font-size: 24px;
line-height: 1.5;
}

.w_footer {
  color:#ffffff;
  font-size: 20px;

}

#w_container {

  display:flex;
   justify-content: center;
   align-items: center;
}


.w_swiper-container {
background-color: var(--bglight);
width: 100%;
height: 100%;
}

.swiper {
  background-color:var(--bglight);
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: var(--bgdark);
display: block;
justify-content: center;
align-items: center;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}


.w_letsgo {
  width: var(--w_buttonwidth);
  height: var(--w_buttonheight);
  font-size: var(--w_buttonfontsize);
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 12px #786e00;
  color: black;
  position: relative;
/*    top:00px;*/

  position:relative; bottom:30px;
}

.w_letsgo:active{
  box-shadow: 0px 0px #420;
  position: relative; 
  top:-20px;


background:#ffea00;
}





.w_letsgop {
  width: var(--w_buttonwidth);
  height: var(--w_buttonheight);
  font-size: var(--w_buttonfontsize);
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 1px #da880e;
  background-color: #ffb066;
  box-shadow: 0px 12px #da880e;
  color: #000000;
  position: relative;
/*    top:00px;*/

  position:relative; bottom:30px;
}

.w_letsgop:active{
  box-shadow: 0px 6px #da880e;
  
background:#ffb066;



  position: relative; 
  top:-20px;


}


.w_sideholder {
  display: block;
}

.w_sideheader {
  margin-right: 8px;
  padding-top: 20px;
  height: 44px;
  font-size: 24px;
}

.w_back {
  text-align: center;
  width:32px;
  height:32px;
  color: #888;
  float: left;
  font-size: 24px;
  font-weight: bold;
  border: solid 0px transparent; 
  background-color: transparent;

  padding: 0px;
  cursor: pointer;
  box-shadow: none;


}


.w_back:active {
  border-radius: 50%;
  color: black;
  background-color: #007aff;
  opacity: 0.5;
  text-decoration: none;
  cursor: pointer;
}

/* Apply hover styles only on devices that support hover interactions */
@media (hover: hover) and (pointer: fine) {
  .w_back:hover {
    border-radius: 50%;
    color: black;
    background-color: #007aff;
    opacity: 0.5;
    text-decoration: none;
    cursor: pointer;
  }
}


.w_welcomeblock1 {
border-radius: 8px;
padding-top: 20px;
padding-bottom: 20px;
padding-right:10px;
background-color: var(--bgdark);
display: flex;
width:100%;
}

.welcomei {
  margin-top: auto;
  margin-bottom: auto;
  height: fit-content;
}

.w_welcomeblock2 {
width: 100%;
padding-right: 24px;
display: flex;
flex-direction: column;
height: fit-content;
}

.w_welcomeblock3 {
margin-top: 24px;
display: inline-flex;
width: 100%;
height: fit-content;
}

.w_welcomeblock4 {
border-radius: 8px;
padding-top: 10px;
padding-bottom: 10px;
width: 288px;
align-items: center;
justify-content: center;
background-color: var(--bgdark);
}

.w_welcometbig {
width: 100%;
line-height: 48px;
height: 48px;
font-size: 48px;
}

.w_welcometsmall {
margin-top: 10px;
font-size: 20px;
margin-bottom: 20px;
height: 24px;
}


.w_welcometsmall2 {
  font-size: 20px;
  line-height: 34px;
  height: 34px;
  }
  
.w_scorerlarge {
border-radius: 8px;
width: 100%;
background-color: var(--bgdark);
display: inline-flex;

height: 81px;
line-height: 81px;
text-align: center;
}

.w_scorerlc1 {
padding-left:var(--w_scorelpad);
text-align: left;
font-size: 36px;
width: var(--w_scorecol1);
}

.w_scorerlc2 {
text-align: left;
font-size: 24px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: var(--w_scorecol2);
}

.w_scorerlc3 {
padding-right: var(--w_scorelpad);
text-align: right;
font-size: 36px;
width: var(--w_scorecol3);
}



.w_scorerone {
height:45%;
}

.w_scorermedium {
padding-top:10px;
border-radius: 8px;
height:300px;
width: 100%;
background-color: var(--bgdark);
display: block;

text-align: center;
}

.w_scorersmall {
width: 100%;
background-color: var(--bgdark);
display: inline-flex;

height: 28px;
line-height: 32px;
text-align: center;
}

.w_scorersc1 {
padding-left: var(--w_scorespad);
text-align: left;
font-size: 20px;
line-height: 30px;
width: var(--w_scorecol1);
}




.w_scorersc2 {
text-align: left;
font-size: 20px;
line-height: 30px;
width: var(--w_scorecol2);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.w_scorersc3 {
padding-right: var(--w_scorespad);
text-align: right;
line-height: 30px;
font-size: 20px;
width: var(--w_scorecol3);
}






#w_guide {
height:var(--w_buttonheight);
width:230px;
font-size: var(--w_buttonfontsize);
padding: 10px 30px;
border-radius: 12px;
background: #ffb066;
border: 2px solid #fff285;
box-shadow: 0px 12px #cd6116;
color: #000000;

position:relative; bottom:30px;
}

#w_guide:active{
position: relative; top: 6px;
position:relative; top:-20px;

  border-bottom: 2px solid #660;
  border-right: 2px solid #660;
  border-left: 2px solid #cc0;
  border-top: 2px solid #cc0;
  box-shadow: 0px 6px #420;
  
background:#c08020;


}

.w_blender48 {
font-weight: bold;
font-family: Blender, sans-serif;
font-size:48px;

  height: 48px;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}

.w_blender32 {
font-family: Blender, sans-serif;
font-size:32px;
}

.w_blender64 {
font-family: Blender, sans-serif;
font-size:64px;
}

.w_blender16 {
font-family: Blender, sans-serif;
font-size:16px;
}

.w_wbuth {
margin-top: auto;
margin-bottom: auto;
height: fit-content;
width:60%;
}

.w_wbutimg {
margin-top: auto;
margin-bottom: auto;
width:64px;
height: 64px;
margin-right: 12px;
}

.w_wbuthead {
text-align: left;
width:100%;
font-family: Blender, sans-serif;
font-size:24px;
color: #f8e71c;
}

.w_wbutsub {
text-align: left;
width:100%;
font-family: Blender, sans-serif;
font-size:16px;
color: #ffffff;
}

.w_wbutnum {
padding-left: 20px;
margin-top: auto;
margin-bottom: auto;
width:25%;
font-family: Blender, sans-serif;
font-size:64px;
font-weight: bold;
color: #ffffff;
}


.w_welcomebutton {
background-color: rgba(0,0,0,0.8);
width: 414px;
height: 96px;
border-radius: 8px;
display: inline-flex;
}

.w_alertb1 {
height:var(--w_buttonheight);
width:var(--w_buttonwidth);
font-size: var(--w_buttonfontsize);
padding: 10px 30px;
border-radius: 12px;
border: solid 1px #9c9c9c;
background-color: #616161;
box-shadow: 0px 12px #282828;
color: #bdbdbd;

position:relative; bottom:20px;
}

.w_alertb1:active{
position: relative; top: 6px;
box-shadow: 0px 6px #282828;
position:relative; top:-20px;
background:#616161;
}


.w_alertb2 {
width: var(--w_buttonwidth);
height: var(--w_buttonheight);
font-size: var(--w_buttonfontsize);
padding: 10px 30px;
border-radius: 12px;
border: solid 0px #fff285;
background-color: #ffea00;
box-shadow: 0px 12px #786e00;
color: black;
position: relative;
/*    top:00px;*/

position:relative; bottom:20px;
}

.w_alertb2:active{
box-shadow: 0px 0px #420;
position: relative; 
top:-20px;


background:#ffea00;
}


.w_sidecontent {
display:block;
height:572px;
width:596px;
background-color: rgba(0,0,0,0.4);
border-radius: 8px;
}

.w_greybutton {
height:var(--w_buttonheight);
width:var(--w_buttonwidth);
font-size: var(--w_buttonfontsize);
padding: 10px 30px;
border-radius: 12px;
border: solid 1px #9c9c9c;
background-color: #616161;
box-shadow: 0px 12px #282828;
color: #bdbdbd;

position:relative; bottom:30px;
}

.w_greybutton:active{
position: relative; top: 6px;
box-shadow: 0px 6px #282828;
position:relative; top:-20px;
background:#616161;
}

.w_ageheader {
padding-top: 56px;
font-size: 36px;
color:#ffea00;
margin-bottom: 24px;
}

.w_agesubheader {
font-size: 24px;
color:#ffffff;
}

.w_agefooter {
font-size: 20px;
color:#ffffff;
}

.w_terms {
background-color: rgba(0,0,0,0.4);
padding-top: 16px;
padding-bottom: 16px;
padding-left: 24px;
padding-right: 24px;
font-size: 14px;
color:rgba(255, 255,255, 0.8);
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #ff0000;
}


.mobpadder {
  flex-grow: 1;
  display:done;
}

.mobilebutton {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  height: fit-content;
}

.mtoken {
  border-radius: 8px;
  display: flex;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}

.mtokeng {
  width:120px;
  height:120px;
}

.mtokent1 {
  font-size: 54px;
  color: #f8e71c;
}

.mtokent2 {

  font-size: 22px;
  color: rgba(255, 255, 255, 0.4);
}

.mtokend {
  padding-right: 24px;
  text-align: right;
  width: 100%;
  display: block;
}

.withdrawmt1 {
  font-size: 32px;
  color:#f8e71c
}

.withdrawmt2 {
  font-size: 20px;
  color:rgba(255,255,255,0.4);
}

.withdrawmt4 {
  font-size: 20px;
  color:#ffffff;
}

.withdrawmt3 {
  font-size: 24px;
  color:#ffffff;
}

.withmchild {
  display: flex; 
  width: 100%;
  height: 100%;
}

#wamountm {
  margin-left: 20px;
  padding-right: 20px;
  text-align: right;
  border: 0px solid #ccc;
  background-color: transparent;
  font-family: Silkscreen;
  font-size: 48px;
  color:#ffffff;
  background-color:transparent;
  outline: none;
}

.matr {
  line-height: 40px;
  margin: 0px;
  padding: 0px;
}

.confirmButtona {
  position: relative;
  height:var(--walletbheight);
  width: 340px;
  font-size: 24px;
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 16px #786e00;
  top: 0px;
}

.confirmButtona:active{
  position: relative; top: 6px;
  box-shadow: 0px 6px #420;
  
background:#ffea00;
}



.mwithr {
  padding: 0px;
  margin: 0px;
}

.mwithtd {
  padding: 0px;
  margin: 0px;
  padding-right: 24px;
}

/* Remove the spinner arrows from number inputs */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

input[type=number] {
  -moz-appearance:textfield;
}

.scroll-left {
 overflow: hidden;
 color:white;
 height: 48px;
 width: 100%;
 position: relative;
}

.scroll-left div {
 position: absolute;
 width: 100%;
 height: 48px;
 margin: 0;
 line-height: 48px;
 text-align: center;
 /* Starting position */
 transform:translateX(100%);
 /* Apply animation to this element */
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
 0%   {
 transform: translateX(100%); 		
 }
 100% {
 transform: translateX(-100%); 
 }
}

.opaque_block {
  background-color: rgba(0,0,0,0.4);

}


.scrolling-message {
  width: 100%;
  background: linear-gradient(to bottom, #9c182d 50%, #e62c2d 0%);
  font-size: 24px;
  height: 42px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.scrolling-message div {
    height:100%;
    line-height: 28px;
  display: inline-block;
  padding-left: 100%;
  animation: scroll 30s linear infinite;
}

.scrolling-message span {
  height:100%;
  line-height: 42px;
display: inline-block;
  padding-right: 100%; /* Ensure the text spans the entire width */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.w_welcomebutton2 {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(0,0,0,0.6);
  width: 100%;
  height: fit-content;
  border-radius: 8px;
  display: inline-flex;
  }
  
  @keyframes growShrink {
    0%, 60%, 100% {
      transform: scale(1);
    }

    15% {
      transform: scale(0.95);
    }

    30% {
      transform: scale(1);
    }

    45% {
      transform: scale(0.95);
    }
   

  }

        #w_playerPayouts3 {
        margin-top: 8px;
        display:flex;
      }


  #w_playerWinningsHolder3{
    margin-top: 8px;
  }

  #w_taptoplay {
    animation: growShrink 1.5s infinite;
    background-color: transparent;
  }

  #w_taptoplayp {
    margin-bottom: 20px;
  }


  .w_wbutnum2 {
    display: flex;
  align-items: center;
  justify-content: center;
    padding-left: 36px;
    padding-right: 20px;
    margin-top: auto;
    margin-bottom: auto;
    width:fit-content;
    font-family: Blender, sans-serif;
    font-size:86px;
    height:110px;
    line-height: 110px;
    font-weight: bold;
    color: #2f2b36;
    }
    

    .w_wbuth2 {
      margin-top: auto;
      margin-bottom: auto;
      height: fit-content;
      width:100%;
      }
      
      .w_wbutimg2 {
      margin-top: auto;
      margin-bottom: auto;
      width:64px;
      height: 64px;
      margin-right: 36px;
      }
      
      .w_wbuthead2 {
      text-align: left;
      width:100%;
      font-family: Blender, sans-serif;
      font-size:24px;
      color: #f8e71c;
      }
      
      .w_wbutsub2 {
      text-align: left;
      width:100%;
      font-family: SilkScreen, sans-serif;
      font-size:13px;
      color: #ffffff;
      }
      

      #w_wlogo {
        width: 400px;
        top: -80px;
      }

    

      #w_wlogo2 {
        width: 400px;
        top: 60px;
      }

      #opaquebottom {
        height: 85px;
      }
    
      #opaquetop {
        height: 85px;
      }
    
    
    

      #w_wlive {
        font-size: 18px;
      }
  
      #w_wplace {
        font-size: 14px;
      }
  
      #w_mutep {
        padding:16px;
      }

      #w_wmutei {
        width:24px;
        height: 24px;
      }

      #w_taptoplay {
        height:48px;
      }

      #w_wlivep {
        margin-left: 8px;
        padding: 7px;
      }

      #w_videox2p {
        background-color: #141a2d;
        padding: 16px;
      }


      @keyframes changeImage {
        0% {
          transform: scale(1); /* Zoom in by 20% */        }
        50% {
          transform: scale(0.75); /* Zoom in by 20% */        }
        
      }

      #w_wlivei {
        width:36px;
        height: 36px;
        animation: changeImage 2s infinite;
        overflow: hidden;
      }


      /* Styles for screens wider than 768px */
    @media (min-width: 1300px) {

      .w_welcomebutton2 {
        flex-direction: row;
      }

      .w_wbutimg3 {
        display: none;
      }

      .w_wbutnum2 {
        line-height: 128px;        

      }

    }

    /* Styles for screens narrower than 768px */
    @media (max-width: 1300px) {

      .w_wbutnum2 {
        line-height: 128px;        

      }

      .w_wbutimg3 {
        display: none;
      }

      .w_welcomebutton2 {
        flex-direction: row;
      }

    }

    @media (max-height:1440px) {

      #w_wbottable {
        max-width: 2000px;
      }

        /* Styles for screens wider than 768px */
        @media (min-width: 2260px) {
          .w_wbutimg2 {
            display: block;
          }
    
    
        }
    
        /* Styles for screens narrower than 768px */
        @media (max-width: 2260px) {
          .w_wbutimg2 {
            display: none;
          }
    
    
        }
    
      }

      .w_td {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 8px;
        padding-right: 8px;
      }
  
  

      @media (min-height:1440px) {

        .w_welcomebutton2 {
          padding-top: 10px;
          padding-bottom: 10px;
        }        

        .w_td {
          padding-top: 30px;
          padding-bottom: 30px;
          padding-left: 8px;
          padding-right: 8px;
        }
    

        #w_wbottable {
          max-width: 2500px;
        }

        /* Styles for screens wider than 768px */
        @media (min-width: 2600px) {
          .w_wbutimg2 {
            display: block;
          }
    
    
        }
    
        /* Styles for screens narrower than 768px */
        @media (max-width: 2600px) {
          .w_wbutimg2 {
            display: none;
          }
    
    
        }
    
      }

    @media (max-width: 1650px) {

      .w_welcomebutton2 {
        flex-direction: column;
      }

      .w_wbuth2 {
        width:100%;
        padding-bottom: 20px;
        }
  
        .w_wbutnumcontainer
        {
          margin-left: auto;
          margin-right: auto;
        }

        .w_wbuthead2 {
          text-align: center;


          font-size: calc(100vw / 200 + 16px);
  

          }
          
          .w_wbutsub2 {
          text-align: center;
          font-size: calc(100vw / 350 + 9px);
          }
    
          .w_wbutimg3 {
            display: block;
          }

          .w_wbutnum2 {
            line-height: 92px;        
            height: 92px;;
            padding-left: 0px;
            padding-right: 12px;
          }
        
    }



    @media (max-width: 1250px) {
  
      #w_moneyparent {
        margin-top: 130px;
      }

  @media (max-height:900px) {

    #w_playerPayouts3 {
      display: none;
    }
  }

  @media (min-height:900px) {

    #w_playerPayouts3 {

      display:flex;}
  }


    }

  @media (min-width: 1250px) {

    #w_moneyparent {
      margin-top: 32px;
    }



  }



/*  @media (max-width: 1030px) {
    #w_browserwarning {
      display: block;
    }

    #w_lowerbar {
      display: none;
    }
  
    #w_taptoplay {
      display: none;
    }
}

@media (min-width: 1030px) {

  #w_browserwarning {
    display: none;
  }

  #w_lowerbar {
    display: flex;
  }

  #w_taptoplay {
    display: inline;
  }

}*/


@media (min-height:1440px) {
  
  @media (max-width: 1300px) {
  #w_browserwarning {
    display: block;
  }

  #w_lowerbar {
    display: none;
  }

  #w_taptoplay {
    display: inline;
  }
  }

  @media (min-width: 1300px) {
    #w_browserwarning {
      display: none;
    }
  
    #w_lowerbar {
      display: flex;
    }
  
    #w_taptoplay {
      display: inline;
    }
      }
  
}

@media (max-height:1440px) {
  
  @media (max-width: 1030px) {
  #w_browserwarning {
    display: block;
  }

  #w_lowerbar {
    display: none;
  }

  #w_taptoplay {
    display: none;
  }
  }

  @media (min-width: 1030px) {
    #w_browserwarning {
      display: none;
    }
  
    #w_lowerbar {
      display: flex;
    }
  
    #w_taptoplay {
      display: inline;
    }
      }
  
}



@media (max-width: 2250px) {

  #w_leftpanel {
    width:5%
  }
  
  #w_rightpanel {
    width:5%    
  }
  
  #wborderp {
     width:90%; 
    }

    .w_largemoneytext {
      font-size: 29px;
      line-height: 37px;
    }

    .w_mediummoneytext {
      font-size: 16px;
      line-height: 24px;
    }

    .w_smallmoneytext {
      font-size: 14px;
      line-height: 18px;
    }

    .w_moneyimagesize {
      width: 48px;
      height: 48px;
    }

    .w_moneypayoutsize {
      height: 48px;
      margin-left: 8px;
      margin-right: 8px;
    }

    .w_moneyholder {
      width:300px;
      padding-top: 18px; padding-bottom: 18px; padding-right: 20px;    
    }

    .w_moneyholder2 {
      width:300px;
      padding-top: 12px; padding-bottom: 14px; padding-left: 10px; padding-right: 10px;    
    }

    #w_playerWinningsHolder3{
      margin-top: 8px;
    }

    #w_videox2 {
      width: 255px;
      height: 176px;
    }
  
    #w_videox2p {
      padding-top: 12px;
      padding-bottom: 12px;

      padding-left: 12px;
      padding-right: 12px;
    }

  }  


  @media (min-width: 2250px) {

    .w_largemoneytext {
      font-size: 37px;
      line-height: 47px;
    }

    .w_mediummoneytext {
      font-size: 22px;
      line-height: 30px;
    }


    .w_smallmoneytext {
      font-size: 16px;
      line-height: 20px;
    }

    .w_moneyimagesize {
      width: 64px;
      height: 64px;
    }

    .w_moneypayoutsize {
      height: 64px;
      margin-left: 8px;
      margin-right: 8px;
    }

    .w_moneyholder {
      width:380px;
      padding-top: 18px; padding-bottom: 18px; padding-right: 20px;    
    }


    .w_moneyholder2 {
      width:380px;
      padding-top: 18px; padding-bottom: 18px; padding-right: 10px; padding-left: 10px;    
    }

    #w_videox2 {
      width: 255px;
      height: 176px;
    }
    #w_videox2p {
      padding-top: 24px;
      padding-bottom: 24px;

      padding-left: 37px;
      padding-right: 37px;
    }


    #w_leftpanel {
      width:10%
    }
    
    #w_rightpanel {
      width:10%    
    }
    
    #wborderp {
       width:80%; 
      }
    
    }  
  


  .w_wnumimg {
    display: flex;
  }

  .w_wbutnumcontainer
  {
    display: flex;
    width:fit-content;
    height:fit-content;
  }

  .w_wbutimg3 {
    margin-bottom: auto;
    margin-top: auto;
    width:54px;
    height: 54px;
    }

  #w_browserwarning {
    margin-bottom: 20px;
    width: 100%;
    background-color: #ffea00;
  }

    #w_browserwarningtext {
      --element-width: 80vw;
        text-align: center;
        color:black;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: calc(var(--element-width)/34);
        font-weight: bold;
        font-family: Blender, sans-serif;
        
        letter-spacing: 1px; 
        font-stretch: normal;
       }
  
    .diagonal-lines {
      width: 100%;
      height: 16px;
      background: linear-gradient(135deg, rgba(255,234,0,0.8) 20%, black 20%, black 50%, rgba(255,234,0,0.8) 50%, rgba(255,234,0,0.8) 80%, black 80%, black);
      background-size: 40px 40px;
      animation: scrollDiagonal 2s linear infinite;
    }

    @keyframes scrollDiagonal {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -40px 0px;
      }
    }


    @media (min-height: 1440px) {
      /* Styles for screens less wide than 1000px and taller than 1440px */

      .scrolling-message {
        height:60px;
        font-size: 36px;
      }

      .scrolling-message span {
        line-height: 60px;
      }
      



      #w_browserwarning {
        margin-bottom: 20px;
      }
    
        #w_browserwarningtext {
            font-size: calc(var(--element-width)/28);
           }
      

          #w_wlogo {
            width: 500px;
            top: -96px;
          }

          #w_wlogo2 {
            width: 500px;
            top: 72px;
          }
    
          #opaquebottom {
            height: 105px;
          }
        
          #opaquetop {
            height: 105px;
          }
        
            

          #w_wlive {
            font-size: 22px;
          }
      
          #w_wplace {
            font-size: 17px;
          }

          #w_wmutep {
            padding:17px;
          }

          #w_wmutei {
            width:36px;
            height: 36px;
          }
    
    
          #w_taptoplay {
            height:70px;
          }

          #w_wlivep {
            margin-left: 12px;
            padding: 9px;
          }

          #w_wlivei {
            width:48px;
            height: 48px;
          }
    
    }
    
    @media (max-width:1720px) and (min-height: 1440px) {
      /* Styles for screens less wide than 1000px and taller than 1440px */

          #w_moneyparent {
            margin-top: 150px;
          }
        
      #w_playerPayouts3 {
    display:none;
  }

    }
    
    @media (min-width:1720px) and (min-height: 1440px) {
      /* Styles for screens less wide than 1000px and taller than 1440px */

          #w_moneyparent {
            margin-top: 32px;
          }


    }

    @media (min-height: 1440px) {
      /* Make the total money in play and winning bigger */

      .w_largemoneytext {
        font-size: 43px;
        line-height: 56px;
      }
  
    .w_mediummoneytext {
      font-size: 28px;
      line-height: 36px;
    }


      .w_smallmoneytext {
        font-size: 21px;
        line-height: 24px;
      }
  
      .w_moneyimagesize {
        width: 72px;
        height: 72px;
      }
  
          .w_moneypayoutsize {
      height: 72px;
      margin-left: 8px;
      margin-right: 8px;
    }

      .w_moneyholder {
        padding-top: 18px; padding-bottom: 18px; padding-right: 20px;    
        width:450px
      }

      .w_moneyholder2 {
        padding-top: 18px; padding-bottom: 18px; padding-right: 10px; padding-left: 10px;   
        width:450px
      }
  
      #w_videox2 {
        width: 255px;
        height: 176px;
      }
      #w_videox2p {
        padding-top: 37px;
        padding-bottom: 37px;
  
        padding-left: 37px;
        padding-right: 37px;
      }
    
  

    }

    
    @media (max-width:2600px) and (min-height: 1440px) {
      .w_welcomebutton2 {
        flex-direction: column;
        padding-top: 20px;
        padding-bottom: 5px;
      }

      .w_td {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 8px;
        padding-right: 8px;
      }
  
      .w_wbuth2 {
        width:100%;
        padding-bottom: 20px;
        }
  
        .w_wbutnumcontainer
        {
          margin-left: auto;
          margin-right: auto;
        }

        .w_wbuthead2 {
          text-align: center;


          font-size: 36px;
  

          }
          
          .w_wbutsub2 {
          text-align: center;
          font-size: 17px
          }
    
          .w_wbutimg3 {
            display: block;
            width:80px;
            height: 80px;
          }

          .w_wbutnum2 {
            line-height: 92px;        
            height: 92px;;
            padding-left: 0px;
            padding-right: 12px;
          }
        

    }
    
    @media (max-width:2250px) and (min-height: 1440px) {

        .w_wbuthead2 {


          font-size: 36px;
  

          }
          
          .w_wbutsub2 {
          font-size: 17px
          }

          .w_wbutnum2 {
            font-size: 120px;
          }
  
          .w_wbutimg2 {
            width:80px;
            height: 80px;
              }
  
    }
    
    @media (min-width:2250px) and (min-height: 1440px) {

  #w_playerWinningsHolder3{
    margin-top: 8px;
  }


      .w_wbuthead2 {


        font-size: 36px;


        }
        
        .w_wbutsub2 {
        font-size: 17px
        }
  
        .w_wbutnum2 {
          font-size: 120px;
        }

        .w_wbutimg2 {
          width:80px;
          height: 80px;
            }

  }
  


  @media  (max-height: 800px) and (max-width:1030px) {

    @media screen and (max-device-width: 800px) {
      #w_videox2p {
        background-color: #141a2d;
      }



      #w_browserwarning {
        display: block;
      }
  
      #w_lowerbar {
        display: none;
      }
  
  
      #w_playerWinningsHolder3{
        margin-top: 8px;
      }

  

     .w_largemoneytext {
      font-size: 37px;
      line-height: 47px;
    }

        .w_mediummoneytext {
      font-size: 24px;
      line-height: 30px;
    }


    .w_smallmoneytext {
      font-size: 18px;
      line-height: 20px;
    }

    .w_moneyimagesize {
      width: 48px;
      height: 48px;
    }

    .w_moneypayoutsize {
      height: 48px;
      margin-left: 8px;
      margin-right: 8px;
    }


    .w_moneyholder {
      width:340px;
      padding-top: 18px; padding-bottom: 18px; padding-right: 20px;    
    }

    .w_moneyholder2 {
      width:340px;
      padding-top: 18px; padding-bottom: 18px; padding-right: 10px; padding-left: 10px;    
    }

    #w_videox2 {
      width: 255px;
      height: 176px;
    }
    #w_videox2p {
      padding-top: 24px;
      padding-bottom: 24px;

      padding-left: 37px;
      padding-right: 37px;
    }


    #w_taptoplay {
      height:70px;
    }

    #w_taptoplayp {
      margin-bottom: 32px;
    }

    #w_wlive {
      font-size: 22px;
    }

    #w_wplace {
      font-size: 17px;
    }

    #w_wmutep {
      padding:17px;
    }

    #w_wmutei {
      width:36px;
      height: 36px;
    }



    #w_wlivep {
      margin-left: 12px;
      padding: 9px;
    }

    #w_wlivei {
      width:48px;
      height: 48px;
    }



  
  
  
  
      #w_wlogo {
        width: 400px;
        top: -80px;
      }
  
      #w_wlogo2 {
        width: 400px;
        top: 60x;
      }

      #opaquebottom {
        height: 85px;
      }
    
      #opaquetop {
        height: 85px;
      }
    
    
  
      #w_moneyparent {
        margin-top: 32px;
      }
  


    }

    @media screen and (min-device-width: 800px) {
      #w_videox2p {
        background-color: #141a2d;
      }


      #w_browserwarning {
        display: block;
      }
  
      #w_lowerbar {
        display: none;
      }
  
      #w_taptoplay {
        display: none;
      }
  
      #w_playerWinningsHolder3{
        margin-top: 8px;
      }
  
  
          .w_largemoneytext {
        font-size: 22px;
        line-height: 29px;
      }
  
    .w_mediummoneytext {
      font-size: 14px;
      line-height: 18px;
    }


      .w_smallmoneytext {
        font-size: 10px;
        line-height: 13px;
      }
  
      .w_moneyimagesize {
        width: 36px;
        height: 36px;
      }
  

          .w_moneypayoutsize {
      height: 36px;
      margin-left: 6px;
      margin-right: 6px;
    }

      .w_moneyholder {
        width:225px;
        padding-top: 14px; padding-bottom: 14px; padding-right: 15px;
      }

      .w_moneyholder2 {
        width:225px;
        padding-top: 14px; padding-bottom: 14px; padding-right: 8px; padding-left: 7px;
      }
  
      #w_videox2 {
        width: 180px;
        height: 124px;
      }
  
      #w_videox2p {
        padding-top: 17px;
        padding-bottom: 17px;
  
        padding-left: 17px;
        padding-right: 17px;
      }
  
  
      #w_wlive {
        font-size: 14px;
      }
  
      #w_wplace {
        font-size: 10px;
      }
  
      #w_wmutep {
        padding:12px;
      }
  
      #w_wmutei {
        width:18px;
        height: 18px;
      }
  
  
      #w_wlivep {
        margin-left: 4px;
        padding: 7px;
      }
  
      #w_wlogo {
        width: 300px;
        top: -60px;
      }
  
      #w_wlogo2 {
        width: 300px;
        top: 45px;
      }

      #opaquebottom {
        height: 64px;
      }
    
      #opaquetop {
        height: 64px;
      }
    
    
  
      #w_moneyparent {
        margin-top: 100px;
      }
  
  #w_playerPayouts3 {
    display:none;
  }

    }



}

@media  (max-height: 800px) and (min-width:1030px) {

  #w_playerWinningsHolder3{
    margin-top: 8px;
  }

  @media (min-height:650px) {
          #w_playerPayouts3 {
        margin-top: 8px;
        display:flex;
      }
    }

      .w_largemoneytext {
    font-size: 22px;
    line-height: 29px;
  }

      .w_mediummoneytext {
      font-size: 14px;
      line-height: 18px;
    }


  .w_smallmoneytext {
    font-size: 10px;
    line-height: 13px;
  }

  .w_moneyimagesize {
    width: 36px;
    height: 36px;
  }

      .w_moneypayoutsize {
      height: 36px;
      margin-left: 6px;
      margin-right: 6px;
    }


  .w_moneyholder {
    width:225px;
    padding-top: 14px; padding-bottom: 14px; padding-right: 15px;
  }

  .w_moneyholder2 {
    width:225px;
    padding-top: 14px; padding-bottom: 14px; padding-right: 8px; padding-left: 7px;
  }

  #w_videox2 {
    width: 180px;
    height: 124px;
  }

  #w_videox2p {
    padding-top: 17px;
    padding-bottom: 17px;

    padding-left: 17px;
    padding-right: 17px;
  }


  #w_wlive {
    font-size: 14px;
  }

  #w_wplace {
    font-size: 10px;
  }

  #w_wmutep {
    padding:12px;
  }

  #w_wmutei {
    width:18px;
    height: 18px;
  }


  #w_wlivep {
    margin-left: 4px;
    padding: 7px;
  }

  #w_wlogo {
    width: 300px;
    top: -60px;
  }

  #w_wlogo2 {
    width: 300px;
    top: 45px;
  }

  #opaquebottom {
    height: 64px;
  }

  #opaquetop {
    height: 64px;
  }


  
  .w_welcomebutton2 {
    padding-top: 5px;
    padding-bottom: 5px;
    }

  .w_td {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 8px;
    padding-right: 8px;
  }



    .w_wbuthead2 {

      font-size: 18px;


      }
      
      .w_wbutsub2 {
      font-size: 10px
      }

      .w_wbutimg3 {
        width:42px;
        height: 42px;
          }

      .w_wbutnum2 {
        font-size:64px;
        height:72px;
        line-height: 72px;
      }
    

      #w_taptoplay {
          height:36px;
      }
  
      #w_moneyparent {
          margin-top: 32px;
      }

      .w_wbuth2 {
          width:100%;
          padding-bottom: 10px;
      }
  
}

@media  (max-height: 560px)  {

  #w_browserwarning {
    display: block;
  }

  #w_lowerbar {
    display: none;
  }

  #w_taptoplay {
    display: none;
  }
}

@media  (max-height: 620px)  {

  #w_playerPayouts3 {
    display:none;
  }

}


#logoutm {
  width: 100%;
  font-size: 30px;
  height: 48px;
  font-size: var(--buttonfontsize);
  padding: 10px 30px;
  border-radius: 12px;
  border: solid 0px #fff285;
  background-color: #ffea00;
  box-shadow: 0px 12px #786e00;
}

#logoutm:active{
  position: relative; top: 6px;
  box-shadow: 0px 6px #420;
  
background:#ffea00;
}



/* Default styles (applies to all orientations) */
#w_mobilelandlogo{
  height:150px;
}
#w_mobilelandlogo2{
  height:40px;
}

#w_mobilelandrotate {
  display:none;
}

#w_mobilelandtp {
  display:none;
}

#w_mobilelandtl {
  display:block;
}

#w_mobilelandtr {
  display:none;
}

#w_startmobile::after {
  content: "Switch to fullscreen";
}



/* Styles for landscape orientation */
@media (orientation: landscape) {
  #w_mobilelandlogo {
    height:150px;

  }

  #w_mobilelandrotate {
    display:none;
  }

  #w_mobilelandtp {
    display:none;
  }
  
  #w_mobilelandtl {
    display:block;
  }

  #w_mobilelandtr {
    display:none;
  }
  
  #w_startmobile::after {
    content: "Switch to fullscreen";
  }
  
}



/* Styles for portrait orientation */
@media (orientation: portrait) {
  #w_mobilelandlogo {
    height:150px; /* Adjust width for portrait */
  }

  #w_mobilelandrotate {
    display:block;
  }
 
  #w_mobilelandtp {
    display:block;
  }
  
  #w_mobilelandtl {
    display:none;
  }

  #w_mobilelandtr {
    display:block;
  }
   
  #w_startmobile::after {
    content: "Switch to Landscape";
  }
  
}
.tokendimage {
  width: 48px;
  height: 48px;
  margin-left: 24px;
  margin-right: 24px;
}

.zerotparent {
  cursor: pointer;
  background-color: transparent;
  border-radius: 12px;
  margin-left: 8px;
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 33%;
  height: fit-content;
}

@keyframes borderOpacityx {
  0% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }
  50% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
  100% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }

}

@keyframes borderOpacity1 {
  0% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }
  6% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
  12% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }
  18% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
/*  24% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }*/
/*  30% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
  33% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }*/
  30% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
  100% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }

}


@keyframes borderOpacity3 {
  0% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
  60% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
  66% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }
  72% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
  78% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }
  84% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
/*  90% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }*/
  96% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
/*  96% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
  100% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }*/
}

@keyframes borderOpacity2 {
  0% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
  30% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
  33% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }
  39% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
  45% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }
  51% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
/*  57% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }*/
/*  63% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.7),0 16px 16px 0 rgba(248, 231, 28, 0.7);;
  }
  66% {
    box-shadow: 0 0 10px 5px rgba(248, 231, 28, 0.3),0 16px 16px 0 rgba(248, 231, 28, 0.3);;
  }*/
  63% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
  100% {
    box-shadow: 0 0 transparent, 0 16px 32px 0 transparent; /* Initial state with no shadow */
  }
}

.zerotc {
  background-color: #0d2c5e;
  border-radius: 12px;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  width: 100%;

}

.zerotc1 {
  background-color: #0d2c5e;
  border-radius: 12px;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  width: 100%;

}

.zerotc2 {
  background-color: #0d2c5e;
  border-radius: 12px;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  width: 100%;

}

.zerotc3 {
  background-color: #0d2c5e;
  border-radius: 12px;
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  width: 100%;

}

.zerotc1:hover {
  animation: borderOpacityx 0.3s infinite !important;
}
.zerotc2:hover {
  animation: borderOpacityx 0.3s infinite !important;
}
.zerotc3:hover {
  animation: borderOpacityx 0.3s infinite !important;
}

.zerotc1.main-animate {
  animation: borderOpacity1 4s infinite !important;
}
.zerotc2.main-animate {
  animation: borderOpacity2 4s infinite !important;
}
.zerotc3.main-animate {
  animation: borderOpacity3 4s infinite !important;
}

.zerotc1.main-animate2 {
  animation: borderOpacityx 0.3s infinite !important;
}
.zerotc2.main-animate2 {
  animation: borderOpacityx 0.3s infinite !important;
}
.zerotc3.main-animate2 {
  animation: borderOpacityx 0.3s infinite !important;
}


.zerotimg {
  margin-bottom: 0px;
  position: relative;
}

.zerotimgc {
  height: 48px;
}

.zerot1 {
  font-size: 18px;
  color: #ffffff;
  text-align: center;
}

.zerot2 {
  font-size: 28px;
  color: #ffffff;
  text-align: center;
}

.zerot3 {
  font-size: 12px;
  color: rgba(255, 255,255, 0.7);
  text-align: center;
}

.zerot4 {
  margin-top: 32px;
  border-radius: 7.2px;
  height: 43px;
  line-height: 43px;
  font-size: 18px;
  color: #000000;
  background-color: #ffea00;
  text-align: center;
  width:100%;
  box-shadow: 0px 10px #786e00;
}

#startoverlayg {
  display:none;
  z-index: 10;
  position: absolute ;
  right:200px;
  top:104px;
}

#startoverlayt {
  display: none;
  z-index: 10;
  position: absolute ;
  left:400px;
  bottom:134px;
}

#startoverlayp {
  display: none;
  z-index: 10;
  position: absolute ;
  left:200px;
  top:48%;
}

#startoverlaytm {
  display: none;
  z-index: 10;
  position: absolute ;
  left:200px;
  bottom:100px;
}

#startoverlaypm {
  display: none;
  z-index: 10;
  position: absolute ;
  left:200px;
  top:36%;
}

@keyframes growShrinkO {


  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes growShrinkA {

  
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes growShrinkD {
 0% {
    transform: scale(1);
  }
  
  100% {
    transform: scale(0);
  }
}

/* Add this class to your image element */
.grow-shrink-anim {
  animation: 
    growShrinkA 0.3s ease-in forwards,
    growShrinkO 1.0s 0.3s  6,
   growShrinkD 0.3s ease-out forwards;
   animation-delay: 0s, 0.3s, 6.3s;
  animation-iteration-count: 1, 6, 1;
  animation-fill-mode: forwards, forwards, forwards;
  transition: transform 0.3s;
  transform-origin: 50% 50%;
}

.refertext {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 24px;
}

.referheader {
  font-size: 24px;
}

.referinput {
  padding-left: 8px;
  font-size: 20px;
  line-height: 48px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border-color: transparent;
  border-radius: 8px;
}

.refertable {
  width: 100%;
  margin-top: 24px;
  border-spacing: 16px 12px;
  }

    .modal-referdialog {
    text-align: center;
    background-color: transparent;
    margin: 0px auto; /* 15% from the top and centered */
    border: 12px solid transparent;
    width: 1000px; /* Could be more or less, depending on screen size */
  }

  .modal-refer {
    height: 100%;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    width: 100%;
    left: 0;
    top: 0;
    overflow: auto; /* Enable scroll if needed */
    background-color:rgba(0,0,0,0) ; /* Fallback color */
    align-items: center; justify-content: center;
  
  }

  .refcontainer {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    width: 100%;
    height: 586px;
    display: flex;
    flex-direction: column;
  }
  

  .r_scorersc4 {
  vertical-align:middle;
  display: inline-block;
  width: var(--w_scorecol4);
  padding-right: 10px;
/*    background-color: blue;*/
}

.r_scorerlc4 {
  width: var(--w_scorecol4);
  padding-right: 10px;
  vertical-align: center;
/*    background-color:red;*/
 }
 

.r_flagi {
  width:24px;
  height: 24px;
  position: relative;top: 50%; 
  transform: translateY(-50%);
}


.r_scorermedium {
  padding-top: 4px;
padding-bottom: 4px;
border-radius: 8px;
height:100%;
width: 100%;
background-color: var(--bgdark);
display: block;

text-align: center;
}

.r_scorersmall {
width: 100%;
background-color: var(--bgdark);
display: inline-flex;

height: fit-content;
line-height: 32px;
text-align: center;
}

.r_scorefiller {
  flex-grow: 2;
}

.r_scorefiller2 {
  flex-grow: 1;
}

.r_scorersc1 {
padding-left: var(--r_scorespad);
text-align: left;
font-size: 20px;
line-height: 30px;
width: var(--w_scorecol1);
}




.r_scorersc2 {
text-align: left;
font-size: 20px;
line-height: 30px;
width: var(--w_scorecol2);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}

.r_scorersc3 {
padding-right: var(--r_scorespad);
text-align: right;
line-height: 30px;
font-size: 20px;
width: var(--w_scorecol3);
}


.reftierimg {
  width: 48px;
  height: 48px;
  margin-left: 32px;
  margin-right: 24px;

  margin-top: auto;
  margin-bottom: auto;
}

.reftierp {
  display: flex;
  width: 100%;
  height: fit-content;
  vertical-align: middle;
}

.reftierfiller {
  flex-grow: 1;
}

.reftierp2 {
 margin-top:auto;
 margin-bottom:auto;
 width: 100%;
 margin-right: 40px;
}

.reftiertext {
  font-size: 20px;
  color: #ffffff;
}

.reftiertextm {
  font-size: 20px;
  color: #ffffff;
  margin-top: 4px;
}

.reftiertext2 {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: normal;
}

.tierprogress-bar-bg {
  margin-top: 6px;
  width: 100%;           /* Set your desired width */
  height: 12px;           /* Set your desired height */
  background: #303030;
  border-radius: 6px;    /* Rounded corners */
  overflow: hidden;       /* Ensures fill stays rounded */
} 

.tierprogress-bar-fill {
  height: 100%;
  border-radius: 6px 0 0 6px; /* Rounded left side */
  transition: width 0.3s;
}

  .refcontainer2 {
    width: 100%;
    height: 586px;
    display: flex;
    flex-direction: column;
  }
  .refcontainer3 {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    width: 100%;
    height: 281px;
    display: flex;
    flex-direction: column;
  }

  .refgraphtitle {
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .refgraphcontainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .refgraphcontainers {
    width: 100%;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 36px;
    padding-right: 36px;
  }

  .refgraphitems {
    width:14.28%;
    height: 100%;
  }

  .refgraphitem {
    width:12.5%;
    height: 100%;
  }

  .refregbar {
    fill:#007aff;
  }

  .reftopupbar {
    fill:#00e676;
  }

  .refsocials {
  width:36px;
  height:36px;
}


.dmodal {
  height: 100%;
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  width: 100%;
  left: 0;
  top: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color:rgba(0,0,0,0.5) ; /* Fallback color */
align-items: center; justify-content: center;

}

/* Modal Content/Box */
.dmodal-content {
  text-align: center;
  background-color: transparent;
  margin: auto; /* 15% from the top and centered */
  border: 12px solid transparent;
  width: 840px; /* Could be more or less, depending on screen size */
  margin-top: auto;
}

.dmodal-content2 {
  display:flex;
  flex-direction: column;
  text-align: center;
  background-color: #141a2d;
  border-radius: 12px;
  padding: 20px;
}


.rsocialholder {
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  height: max-content;
  padding: 7px;
  border-radius: 12px;
  background-color: var(--bgdark);
}

  .rsocialholderng {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    height: max-content;
    padding: 7px;
    border-radius: 12px;
    background-color: var(--bgdark);
}
  

.rsocials {
  width: max-content;
  height: max-content;
  margin-top: 0px;
  display: inline-flex;
  cursor: pointer;
}


.rsociali {
  background-color: transparent;
  width:64px;
  height:64px;
  padding:8px;
  margin-left: 7px;
  margin-right: 7px;
  margin-bottom: 7px;
  cursor: pointer;
}


.rsociali:hover {
  background-color: rgba(0,122,255,0.36);
}

.rtimg-bg {
  background: transparent;
  height:20px;
  width:20px;
}

.refdelta {
  display:flex;
}


  .statstsmallc {
    text-align: center;
    font-size: 15px;
    line-height: 20px;
    color: white;
    width:100%;
    opacity: 60%;
  }

  #referCopy:active {
    background-color:rgba(0,122,255,0.4);
    }


  #referCopy {
    background-color:rgba(0,0,0,0.4); 
  }



.ratd {
  margin: 0px;
  padding: 0px 10px;
}

.rratd {
  margin: 0px;
  padding: 0px 0px;
}



.ractext2 {
  font-size: 14px;
  color:rgba(255,255,255,0.4);
}

.refdeltatext {
  font-size: 14px;
}

.reftr {
  padding-left: 36px;
  padding-right: 36px;
  display: flex;
}

.stattdhr {
  width: var(--refcellwidth);
  font-family: Silkscreen;
  font-size: 24px;
  padding:0px 0px 0px 0px;
}

  .stattdhd {
  font-family: Silkscreen;
  font-size: 24px;
  height:24px;
  padding:8px 0px 0px 0px;
}

.reftdf {
  width:2%;
  height: 10px;
}

  .ractd {
  width: var(--refcellwidth);
    vertical-align: middle;
    margin: 0px;
    padding: 8px 0px 8px 0px;
  }

  .ractdl {
  width: var(--refcellwidth);
    vertical-align: middle;
    margin: 0px;
    padding: 8px 0px 8px 0px;
  }

    .ractdr {
    width: var(--refcellwidth);
    vertical-align: middle;
    margin: 0px;
    padding: 8px 0px 8px 0px;
  }

.refbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:transparent;
    color: white;
    font-size: 20px;
  padding: 5px 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;
}

.refbutton:active {
  background:#303030;
  padding: 5px 20px;
  cursor: pointer;
  border: 0px solid #ccc;
  box-shadow: 0px 0px #808080;

}

.reftdimg {
  width: 48px;
  height: 48px;
  position: relative;
  top: 0px;
  transform: translateY(-24px);
}

  .refsideheader {
    padding-top: 0px;
    height: 24px;
    padding-bottom: 24px;
    font-size: 24px;
  }