.login_popup{
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  display:none;
}

.login_window{
  position:relative;
  top:20%;
  width:20%;
  min-width: 400px;
  background: rgb(15,15,15);
  margin:auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  background: linear-gradient(15deg,transparent,var(--color1_2),var(--color1_1),var(--color1_2),transparent);
  padding:1px;
}


.login_form{
  border-radius: 10px;
  display:flex;
  flex-direction: column;
  width:100%;
  align-items: center;
  background: rgb(15,15,15);
  padding:8%;
}

.login_logo{
  width:50%;
}

.login_input{
  display:flex;
  align-items: center;
  color:white;
  width:100%;
  font-size: clamp(12px,4vmin,17px);
  margin-top: 5%;
  position:relative;
  border-radius: 5px;
  overflow: hidden;
}

.login_input input{
  background: black;
  border:none;
  font-size: clamp(12px,4vmin,17px);
  padding:3% 15%;
  border-radius: 5px;
  color:white;
  width:100%;
}



.login_input_icon{
  position:absolute;
  left:0;
  top:0;
  z-index: 2;
  height:100%;
  width:12%;
  background: linear-gradient(var(--color1_1),var(--color1_2));
  display:flex;
  color:black;
  align-items: center;
  justify-content: center;
}

.login_label{
  color:grey;
}

.fp_link{
  align-self: flex-end;
  color:rgb(200,200,200);
  font-size: clamp(10px,2vmin,13px);
  margin:3% 0 5% 0;
  font-style: italic;
}

.login_submit_btn{
  width:100%;
  border:none;
  padding:2% 0;
  font-size: clamp(12px,4vmin,18px);
  background: linear-gradient(var(--color1_1),var(--color1_2));
  font-weight: bold;
  cursor:pointer;
  border-radius: 3px;
}

.login_close{
  position:absolute;
  right:3%;
  top:2%;
  color:white;
  font-weight: bold;
  font-size: clamp(12px,4vmin,18px);
  cursor:pointer;
}

.view, .noview{
  position:absolute;
  right:3%;
  top:0;
  height:100%;
  z-index: 2;
  color:grey;
  display:flex;
  align-items: center;
  justify-content: center;
}


/*---------------------Language Popup-----------------------------*/


.language{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  display:none;
}

.lang_popup{
  position:relative;
  top:50%;
  transform: translateY(-50%);
  width:80%;
  max-width: 450px;
  margin:auto;
  background: linear-gradient(rgba(0,0,0,0), var(--color1_1), var(--color1_2));
  padding:1px;
  border-radius: 10px;
  color:white;
}


.lang_content{
  display:flex;
  flex-direction: column;
  justify-content: center;
  width:100%;
  height:100%;
  min-height: 250px;
  border-radius: 10px;
  background: rgb(24,24,24);
  box-sizing: border-box;
  padding:20px;
  padding-top: 0;
  position:relative;
}

.lang_header{
  width:100%;
  text-align: center;
  color:white;
  padding:1vmin;
  margin:0;
  font-size: clamp(12px,4vmin,25px);
  margin-bottom: 2vmin;
}

.lang_close{
  position:absolute;
  right:0;
  top:0;
  padding:2vmin;
  font-size: clamp(12px,4vmin,18px);
  z-index: 10;
  cursor:pointer;
}

.lang_selection{
  display:flex;
  justify-content: center;
  align-items: center;
}

.lang_item{
  display:flex;
  flex-direction: column;
  align-items: center;
  color:white;
  text-decoration: none;
  margin:0 2vmin;
  background: rgb(35,35,35);
  padding:2vmin 0;
  border-radius: 1vmin;
  width:35%;
}

.lang_item:hover{
  background: rgb(50,50,50);
}

.lang_item img{
  height:40%;
  max-height: 50px;
  margin-bottom: 2vmin;
}

/*---------------------Account Popup-----------------------------*/


.account{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  display:none;
  overflow-y: auto;
}



.acc_popup{
  position:relative;
  top:50%;
  transform: translateY(-50%);
  width:25%;
  min-width: 700px;
  margin:auto;
  background: linear-gradient(rgba(0,0,0,0), var(--color1_1), var(--color1_2));
  padding:1px;
  border-radius: 10px;
  color:white;
}

.acc_close{
  position:absolute;
  right:0;
  top:0;
  padding:2vmin;
  color:white;
  font-weight: bold;
  font-size: clamp(12px,4vmin,20px);
  cursor:pointer;
}

.acc_content{
  display:flex;
  flex-direction: column;
  width:100%;
  height:100%;
  border-radius: 10px;
  background: rgb(24,24,24);
  box-sizing: border-box;
  padding:5%;
}

.acc_header{
  display:flex;
  flex-direction: column;
  position:relative;
  padding-bottom: 2%;
  margin-bottom: 5%;
}

.acc_balance{
  display:flex;
  align-items: center;
  font-size: clamp(20px,5vmin,35px);
  letter-spacing: 1px;
  font-weight: bold;
}


.acc_username{
  display:flex;
  align-items: center;
  margin-top:5%;
  font-size: clamp(15px,3vmin,20px);
  letter-spacing: 1px;
  font-weight: bold;
}



.acc_body{
  display:flex;
  justify-content: space-between;
  height:100%;
  width:100%;
}

.acc_box{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgb(10,10,10);
  width:48%;
  padding:2%;
  position:relative;
  box-sizing: border-box;
  border-radius: 5px;
}

.acc_box_item{
  text-decoration: none;
  letter-spacing: 1px;
  color:white;
  font-size: clamp(16px,3vmin,22px);
  padding:3%;
  margin:1% 0;
  text-align: left;
  width:100%;
  position:relative;
  white-space: nowrap;
  border-radius: 2px;
  box-sizing: border-box;
  display:flex;
  align-items: center;
}

.acc_box_item img{
  height:7vmin;
  max-height: 35px;
  margin-right: 8%;
}


.acc_box a:hover{
  background: rgb(24,24,24);
}


/*---------------------LOterry Payout Table Popup-----------------------------*/

.payout_popup{
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  display:flex;
  align-items: center;
  justify-content: center;
  display:none;
}

.payout_window{
  top:10vmin;
  width:90%;
  height:80%;
  max-height:800px;
  max-width: 1000px;
  background: rgb(15,15,15);
  margin:auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  background: linear-gradient(15deg,transparent,var(--color1_2),var(--color1_1),var(--color1_2),transparent);
  padding:1px;
}


.payout_content{
  position:relative;
  border-radius: 10px;
  display:flex;
  flex-direction: column;
  width:100%;
  height:100%;
  align-items: center;
  background: rgb(15,15,15);
  padding:2vmin;
  overflow: auto;
}

.payout_close{
  position:absolute;
  right:5%;
  top:3%;
  color:white;
  font-weight: bold;
  font-size: clamp(12px,4vmin,18px);
  cursor:pointer;
}

.payout_content h1{
  color:white;
  margin:0;
  text-align: left;
  width:100%;
  font-size: 20px;
  margin-bottom: 20px;
}

.payout_table{
  color:white;
  margin-bottom: 20px;
  width:100%;
}

.payout_table h2{
  margin:5px 0;
  font-size: 18px;
}

.payout_table h3{
  margin:5px 0;
  font-size: 13px;
  font-weight: normal;
}

.payout_table table{
  width:100%;
  border-collapse: collapse;
  text-align: center;
}

.payout_table th{
  background: linear-gradient(var(--color1_1),var(--color1_2));
  color:black;
  padding:10px;
  font-size: 15px;
}

.payout_table td{
  padding:5px;
  font-size: 15px;
  background: #222222;
  border-bottom:solid 1px #151515;
}
