@import url("reset.css");
 :root {
   --red: #d21515;
   --green: #22c55e;
}
 header {
   position: absolute;
   width: 100%;
   left: 0;
   top: 30px;
   height: 66px;
   z-index: 10;
   display: flex;
   align-items: center;
   -webkit-backdrop-filter: blur(100px);
   backdrop-filter: blur(100px);
   border-top: 1px solid #d21515;
   border-bottom: 1px solid #d21515;
}
 header .avatar {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   overflow: hidden;
}
 header .avatar img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 header .wrapper {
   display: flex;
   align-items: center;
}
 header ul {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}
 header .logo {
   height: 50px;
}
 header .list {
   gap: 30px;
   display: flex;
   align-items: center;
}
 header .list a {
   color: #fff;
   font-size: 16px;
   display: flex;
   gap: 5px;
   align-items: center;
   transition: 0.2s;
}
 header .list a > img {
   width: 21px;
   height: 21px;
}
 header .list a:hover {
   color: #d21515;
}
 header .list a:hover img {
   filter: brightness(0) saturate(100%) invert(16%) sepia(43%) saturate(7014%) hue-rotate(352deg) brightness(97%) contrast(101%);
}
 html, body {
   background-color: #0f0f0f;
}
 .container {
   width: 1324px;
   margin: auto;
}
 @media (max-width: 1400px) {
   .container {
     width: 1100px;
  }
}
 @media (max-width: 1190px) {
   .container {
     width: 800px;
  }
}
 @media (max-width: 900px) {
   .container {
     padding: 0 16px;
     width: 100%;
  }
}
 .container-fluid {
   margin-left: calc((100% - 1324px) / 2);
   width: calc(100% - (100% - 1324px) / 2);
}
 @media (max-width: 1400px) {
   .container-fluid {
     margin-left: calc((100% - 1100px) / 2);
     width: calc(100% - (100% - 1100px) / 2);
  }
}
 @media (max-width: 1190px) {
   .container-fluid {
     margin-left: calc((100% - 800px) / 2);
     width: calc(100% - (100% - 800px) / 2);
  }
}
 @media (max-width: 900px) {
   .container-fluid {
     margin-left: 16px;
     width: calc(100% - 16px);
  }
}
 .intro {
   position: relative;
   background-image: url(../img/mafiabg.jpg);
   background-position-x: 50%;
   background-position-y: -88px;
   background-repeat: no-repeat;
   background-size: 1370px;
}
 @media (max-width: 900px) {
   .intro {
     background-image: url('../img/mintro.jpg');
     background-position-y: 0;
     background-size: 460px;
  }
}
 .intro .container {
   position: relative;
   padding-top: 1px;
   height: 751px;
}
 .intro .content {
   position: relative;
   z-index: 1;
   background-image: url("../img/eclipse.png");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   height: 210px;
   margin: 0 auto;
   margin-top: 124px;
   margin-bottom: 30px;
   width: -moz-fit-content;
   width: fit-content;
}
 .intro .content img {
   display: none;
}
 .intro .content .wrap {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-bottom: 30px;
}
 .intro .content span {
   color: #fff;
   font-size: 32px;
   font-family: caps;
}
 .intro .content button {
   height: 50px;
   font-size: 16px;
   color: #fff;
   font-family: caps;
   border: 1px solid #fff;
   padding: 0 25px;
   border-radius: 5px;
}
 .intro .content button.logIn {
   background-color: #d21515;
}
 .intro .content button.register {
   background-color: #0f0f0f;
}
 .intro:before {
   content: "";
   height: 70px;
}
 .intro .img {
   position: absolute;
   left: 0;
   top: 0;
   z-index: 0;
   width: 100%;
   height: 700px;
   -o-object-fit: cover;
   object-fit: cover;
}
 .intro .intro-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}
 .intro .intro-grid {
   position: relative;
   z-index: 2;
}
 .intro .intro-grid .box {
   border-radius: 5px;
   border: 1px solid #715151bf;
   padding: 30px;
   height: 300px;
   width: 100%;
   position: relative;
   display: flex;
   align-items: flex-end;
   overflow: hidden;
}
 .intro .intro-grid .box .img {
   position: absolute;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 .intro .intro-grid .box .red-button {
   padding-top: 2px;
}
 .intro .intro-grid .box .red-button img {
   position: relative;
   top: -2px;
}
 .intro .intro-grid .box .relative {
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   gap: 15px;
   font-family: caps;
   width: 100%;
}
 .red-button {
   background-color: #d21515;
   transition: 0.2s;
   padding: 0 10px;
   display: flex;
   gap: 5px;
   border-radius: 5px;
   font-size: 16px;
   color: #fff;
  /* font-family: light;
   */
   height: 39px;
   align-items: center;
   justify-content: center;
}
.red-button.green-button {
   background-color: var(--green);
}
.red-button.green-button:hover {
   background-color: #1a9c4b;
}
.red-button.yellow-button{
  background-color: #f1c40f;
  color: black;
}
.red-button.yellow-button:hover{
  background-color: #e8d584;
}
.red-button:hover {
   background-color: #860202;
}
 .red-button img {
   width: 16px !important;
}
 h3.h-title {
   font-family: caps;
   color: #fff;
   margin-bottom: 30px;
   font-weight: bold;
   font-size: 24px;
}
 .about-us {
   margin-top: 100px;
}
 .about-us .content {
   padding: 30px;
   display: flex;
   border-radius: 5px;
   justify-content: space-between;
   background-color: rgba(255, 255, 255, 0.05);
}
 .about-us iframe {
   border-radius: 5px;
   border: 1px solid #715151bf;
   width: 520px;
   height: 315px;
}
 .about-us .desc {
   width: 520px;
}
 .about-us .desc .social-wrapper {
   display: flex;
   gap: 5px;
   margin-bottom: 30px;
   align-items: center;
}
 .about-us .desc .red {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: caps;
   font-size: 20px;
   color: #d21515;
   margin-right: 25px;
   padding-top: 3px;
}
 .about-us .desc .red img {
   filter: brightness(0) saturate(100%) invert(16%) sepia(43%) saturate(7014%) hue-rotate(352deg) brightness(97%) contrast(101%);
   height: 20px;
   position: relative;
   top: -3px;
}
 .about-us .desc .red:hover {
   text-decoration: underline;
}
 .about-us .desc .title {
   font-size: 32px;
   font-weight: bold;
   font-family: caps;
   margin-bottom: 15px;
   display: block;
}
 .about-us .desc .text {
   font-size: 20px;
   color: #fff;
   font-family: light;
   margin-bottom: 30px;
   line-height: 1.3;
}
 .social-btn {
   border-radius: 3px;
   background-color: #0f0f0f;
   border: 1px solid #4d4d4d;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   width: 27px;
   height: 27px;
   transition: 0.2s;
}
 .social-btn:hover {
   background-color: #d21515;
   border: 1px solid #d21515;
}
 .tournament-banner {
   border-radius: 5px;
   overflow: hidden;
   padding: 30px;
   position: relative;
   height: 350px;
   margin-top: 60px;
   display: flex;
   align-items: flex-end;
   margin-bottom: 30px;
   gap: 30px;
}
 .tournament-banner .banner {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   z-index: 1;
}
 .tournament-banner .left {
   width: 850px;
   position: relative;
   z-index: 2;
}
 .tournament-banner .left .red-button {
   width: -moz-fit-content;
   width: fit-content;
}
 .tournament-banner .cup {
   position: absolute;
   z-index: 2;
   height: 100%;
   right: 0;
   top: 0;
}
 .tournament-banner .title {
   margin-bottom: 15px;
   font-family: caps;
   font-size: 32px;
   color: #fff;
   display: block;
   font-weight: bold;
}
 .tournament-banner .title b {
   font-size: 50px;
   line-height: 1;
}
 .tournament-banner .text {
   font-size: 20px;
   margin-bottom: 30px;
   line-height: 1.3;
}
 .youtubers {
   margin-top: 60px;
   margin-bottom: 30px;
}
 .youtubers .box {
   padding: 15px;
   border-radius: 5px;
   border: 1px solid #d21515;
   height: 240px;
   width: 323px;
   flex-direction: column;
   gap: 15px;
   background-color: rgba(255, 255, 255, 0.05);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}
 .youtubers .box .img {
   width: 130px;
   height: 130px;
   border-radius: 50%;
}
 .youtubers .box .title {
   font-size: 18px;
   color: #fff;
   transition: 0.2s;
}
 .youtubers .box .title:hover {
   color: #d21515;
}
 .youtubers .box .socials {
   display: flex;
   gap: 4px;
}
 .youtubers .box .soc-btn {
   width: 21px;
   height: 21px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background: linear-gradient(180deg, #6a0404 0%, #453333 100%);
   border-radius: 2px;
}
 .youtubers .box .soc-btn img {
   max-width: 14px;
   max-height: 14px;
}
 .youtubers .box .soc-btn:hover {
   background: #d21515;
}
 .youtubers .head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
}
 .youtubers .head .h-title {
   font-size: 20px;
   margin-bottom: 0;
}
 .see-all {
   font-size: 16px;
   color: #a4a4a4;
   gap: 5px;
   display: flex;
   align-items: center;
}
 .mvp-players {
   padding: 30px 0;
   background-color: #371313;
   -webkit-backdrop-filter: blur(100px);
   backdrop-filter: blur(100px);
   box-shadow: 0px 0px 100px 0px rgba(255, 255, 255, 0.0509803922) inset;
}
 .mvp-players .head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
}
 .mvp-players .title {
   font-size: 20px;
   font-family: caps;
   font-weight: bold;
   display: block;
}
.mvp-players-page {
   padding-top: 100px;
}
.mvp-players-page .text{
  font-size: 15px;
  color: #fff;
  margin-bottom: 15px;
  margin-top: -5px;
}
.mvp-players-page .grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 8px;
}
 @media (max-width: 1400px) {
   .mvp-players-page .grid {
     grid-template-columns: repeat(5, 1fr);
  }
   .intro .intro-grid .box {
     height: 250px;
  }
}
 @media (max-width: 1190px) {
   .mvp-players-page .grid {
     grid-template-columns: repeat(3, 1fr);
  }
}
 @media (max-width: 768px) {
   .mvp-players-page {
     padding-top: 0;
  }
   .mvp-players-page .grid {
     grid-template-columns: repeat(2, 1fr);
  }
   .mvp-players-page .mvp-player {
     width: 100%;
     font-size: 12px;
     padding: 15px 10px 10px 10px;
  }
   .mvp-players-page .mvp-player .crown {
     width: 20px !important;
     top: 12px;
     right: 10px;
  }
   .mvp-players-page .mvp-player .img {
     width: 75px !important;
     height: 75px;
     margin-bottom: 10px;
  }
   .mvp-players-page .mvp-player .cup {
     font-size: 12px;
     margin-bottom: 10px;
     padding-top: 10px;
  }
   .mvp-players-page .mvp-player .cup img {
     width: 18px;
  }
   .mvp-players-page .mvp-player .red-button {
     height: 29px;
     font-size: 12px;
  }
}
 .mvp-player {
   padding: 15px 15px 12px 15px;
   background-image: url("../img/mvp.jpg");
   background-repeat: no-repeat;
   background-size: inherit;
   border: 1px solid #d21515;
   border-radius: 5px;
   font-family: caps;
   font-size: 16px;
   width: 213px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   position: relative;
}
 .mvp-player .img {
   width: 112px !important;
   height: 112px;
   border-radius: 50%;
   margin-bottom: 15px;
}
 .mvp-player .crown {
   position: absolute;
   top: 20px;
   right: 15px;
   width: 27px !important;
}
 .mvp-player .cup {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   font-size: 16px;
   font-weight: bold;
  /* margin-bottom: 15px;
   */
   padding-top: 15px;
   border-top: 1px solid #a4a4a4;
   margin-top: 10px;
   width: 100%;
}
 .mvp-player .cup img {
   width: 24px;
}
 .mvp-player .cup span {
   flex: 1;
   font-weight: normal;
   text-align: left;
}
 footer {
   background-color: #111;
   padding: 30px 0;
}
 footer .container {
   display: flex;
   justify-content: space-between;
}
 footer span, footer a {
   font-size: 14px;
   font-family: caps;
}
 footer ul {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin-top: 37px;
}
 footer .grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
}
 footer .grid a {
   display: block;
   border-radius: 5px;
   overflow: hidden;
   height: 60px;
   width: 70px;
}
 footer .grid a img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 footer .frame {
   width: 24px;
   height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}
 footer .loc {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   margin-bottom: 15px;
}
 footer .loc div {
   display: flex;
   flex-direction: column;
   gap: 3px;
   font-size: 14px;
}
 footer .loc div span {
   font-size: 12px;
   color: #a4a4a4;
}
 footer .center {
   display: none;
}
 footer .partner-title {
   display: block;
   margin-bottom: 30px;
   text-align: center;
}
 @media (max-width: 900px) {
   .intro .intro-grid {
     grid-template-columns: repeat(2, 1fr);
  }
   .intro .intro-grid .box .red-button {
     background-color: transparent;
     margin-bottom: -10px !important;
     border: none;
     text-shadow: 0px 1px 5px #000;
  }
   .intro .intro-grid .box .red-button img {
     display: none;
  }
   .intro .container {
     height: auto !important;
     padding-bottom: 30px;
  }
   .intro .red-button.show-mob {
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
  }
   .intro .intro-grid .box {
     height: 130px;
     padding: 10px;
  }
   .intro .intro-grid .box .red-button {
     margin: 0;
  }
   .table .red-button, .table .grey-button {
     height: 29px;
     font-size: 12px;
     padding: 0 10px;
  }
   .table .red-button img, .table .grey-button img {
     width: 18px;
     height: 18px;
  }
   footer {
     margin-top: 25px;
  }
   footer .container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px 6px;
  }
   footer .container .grid {
     grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
     gap: 8px !important;
  }
   footer .container .grid a {
     width: 100%;
  }
   footer .container .center {
     grid-column: -1;
     order: 1;
  }
   footer .container .left {
     order: 2;
  }
   footer .container .right {
     order: 3;
  }
   footer .copyright.container {
     display: flex;
  }
   footer .copyright .logo {
     display: none;
  }
   footer a {
     font-size: 12px;
  }
   footer .container .grid {
     display: flex;
     flex-wrap: wrap;
  }
   footer .container .grid a {
     width: 71px;
  }
}
 .copyright {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   margin-top: 50px;
}
.copyright .logo {
   height: 50px;
   display: none;
}
 .copyright .text {
   font-size: 14px;
   color: #b9b9b9;
}
.copyright .text img{
  height: 12px;
}
 .copyright .flex {
   gap: 5px;
}
 .back {
   margin-top: 70px;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin-bottom: 25px;
}
 .back h1 {
   font-size: 14px;
   display: flex;
   gap: 4px;
   font-weight: normal;
   align-items: center;
}
 .back a {
   position: absolute;
   display: flex;
   align-items: center;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
}
 .input-form {
   width: 100%;
   position: relative;
   margin-bottom: 20px;
}
 .input-form .invalid-feedback {
   font-size: 10px;
   color: var(--red);
   right: 0 !important;
   padding-left: 0 !important;
   left: auto !important;
   height: fit-content;
   top: -14px;
   position: absolute;
}
 .input-form label {
   color: #a4a4a4;
   font-size: 13px;
   background-color: #0f0f0f;
   padding: 0 5px;
   position: absolute;
   top: -9px;
   left: 20px;
}
 .input-form input {
   width: 100%;
   border: 1px solid #371313;
   height: 44px;
   padding-left: 10px;
   font-size: 14px;
   color: #fff;
   border-radius: 5px;
   transition: 0.2s;
}
 .input-form input:focus {
   border-color: #d21515;
}
 .input-form input:not(:-moz-placeholder) {
   border-color: #d21515;
}
 .input-form input:not(:placeholder-shown) {
   border-color: #d21515;
}
 .input-form img {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
}
 .checkbox {
   font-size: 12px;
   display: flex;
   align-items: center;
}
 .checkbox input[type=checkbox] {
   -moz-appearance: none;
   appearance: none;
   -webkit-appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 2px;
   margin: 0 10px 0 0;
   background-color: #1b1b1b;
   cursor: pointer;
   position: relative;
}
 .checkbox input[type=checkbox]:checked {
   background-image: url("../img/check.svg");
   background-repeat: no-repeat;
   background-position: center;
}
 .checkbox:not(:last-child) {
   margin-bottom: 10px;
}
 .checkbox mark {
   color: #d21515;
   margin-left: 4px;
}
 .forgot {
   font-size: 12px;
   color: #d21515;
   margin-left: 25px;
   margin-bottom: 25px;
}
 .forgot:hover {
   text-decoration: underline;
}
 .grey-button {
   background-color: #1b1b1b;
   transition: 0.2s;
   padding: 0 10px;
   display: flex;
   gap: 5px;
   border-radius: 5px;
   font-size: 14px;
   color: #fff;
   font-family: light;
   height: 39px;
   align-items: center;
   justify-content: center;
}
 @media (max-width: 768px) {
   .red-button {
     width: 100%;
     font-size: 14px;
  }
}
 .login {
   position: relative;
   overflow-x: clip;
   padding-top: 1px;
}
 .login .hat {
   position: absolute;
   right: -30px;
   top: -40px;
   pointer-events: none;
   height: 140px;
   transform: rotate(45deg);
}
 .profile .profile-picture {
   margin-bottom: 16px;
   flex-direction: column;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}
 .profile .profile-picture img {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   -o-object-fit: cover;
   object-fit: cover;
   margin-bottom: 10px;
}
 .profile .profile-picture button {
   color: #d21515;
   font-size: 12px;
}
 .profile .checkbox {
   font-size: 12px;
   display: flex;
   align-items: center;
}
 .change-password .step2, .change-password .step3 {
   display: none;
}
 .change-password span {
   margin-bottom: 10px;
   font-size: 12px;
   display: block;
}
 .change-password .text {
   font-size: 14px;
   margin-bottom: 30px;
   color: #a4a4a4;
}
 .change-password ul {
   padding-left: 20px;
   margin-bottom: 16px;
}
 .change-password li {
   font-size: 12px;
   list-style-type: disc;
   margin-bottom: 5px;
   text-align: left;
   color: #fff;
}
 .change-password li.disabled {
   color: #a4a4a4;
}
 @media (min-width: 768px) {
   .back {
     justify-content: flex-start;
     padding-left: 0;
  }
   .back h1 {
     gap: 10px;
     font-size: 16px;
     align-items: center;
  }
   .back h1 img {
     height: 16px;
  }
   .back a {
     display: none;
  }
}
 .booking-info.border {
   background-color: rgba(255, 255, 255, 0.05);
   padding: 10px;
   border-radius: 5px;
   margin-bottom: 10px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}
 .booking-info.f {
   margin: 0;
}
 .booking-info.f li {
   justify-content: flex-start;
   margin-top: -10px;
   margin-bottom: 10px;
}
 .bookings {
   padding-top: 130px;
}
 .bookings .empty {
   min-height: 30px;
   margin-bottom: 16px;
   gap: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   color: #d21515;
}
 @media (min-width: 768px) {
   .bookings .red-button {
     margin: auto;
     font-weight: normal;
  }
   .bookings .empty {
     margin-top: 60px;
  }
}
 .bookings .book {
   border-radius: 5px;
   border: 1px solid #d21515;
   padding: 15px 15px 30px 15px;
   background-color: rgba(255, 255, 255, 0.05);
}
 .bookings .book .top {
   display: flex;
   gap: 15px;
   align-items: center;
   margin-bottom: 10px;
}
 .bookings .book .top .grow {
   flex: 1;
}
 .bookings .book .top .date {
   font-size: 16px;
   color: #a4a4a4;
   gap: 5px;
   display: flex;
   align-items: center;
}
 .bookings .book .top .pin {
   border-radius: 15px;
   padding: 0 10px;
   height: 37px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-size: 14px;
   background-color: #d21515;
}
 .bookings .book .flex {
   gap: 15px;
   align-items: center;
   margin-bottom: 30px;
}
 .bookings .book .flex .sale {
   color: #a4a4a4;
   font-size: 20px;
   text-decoration: line-through;
}
 .bookings .book .flex .price {
   color: #22c55e;
   font-size: 24px;
}
 .bookings .grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   margin-bottom: 30px;
}
 .bookings .btn-wrap {
   display: flex;
   gap: 15px;
   margin-bottom: 30px;
}
 .bookings .tab {
   height: 29px;
   background-color: #1b1b1b;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 0 15px;
   font-size: 14px;
   transition: 0.2s;
}
 .bookings .tab:hover {
   background-color: #860202;
}
 .bookings .tab.active {
   background-color: #d21515;
}
 .bookings .title {
   margin-bottom: 15px;
   font-family: caps;
   font-size: 20px;
   display: block;
}
 .bookings .book.past {
   padding: 15px;
   border: none;
}
 .bookings .book.past .flex {
   margin-bottom: 0;
}
 .bookings .book.past .price {
   color: #a4a4a4;
}
 .bookings .book.past.canceled .pin {
   background-color: #371313;
}
 .bookings .book.past.ended .pin {
   background-color: #0f0f0f;
}
 @media (max-width: 900px) {
   .bookings {
     padding-top: 0;
  }
   .bookings .btn-wrap {
     overflow-x: auto;
     width: 100%;
     gap: 5px;
  }
   .bookings .btn-wrap::-webkit-scrollbar {
     display: none;
  }
   .bookings .grid {
     grid-template-columns: 1fr;
  }
   .bookings .book {
     border-radius: 3px;
     padding: 10px;
  }
   .bookings .book.past {
     padding: 10px;
  }
   .bookings .book .top {
     gap: 10px;
  }
   .bookings .book .top .date {
     font-size: 12px;
  }
   .bookings .book .top .date img {
     position: relative;
     top: -4px;
  }
   .bookings .book .top .pin {
     height: 30px;
     font-size: 12px;
  }
   .bookings .book .flex {
     margin-bottom: 10px;
  }
   .bookings .book .flex .sale {
     font-size: 14px;
  }
   .bookings .book .flex .price {
     font-size: 16px;
  }
}
 .youtubers.page {
   margin: 0;
   padding-top: 100px;
}
 .youtubers.page .box {
   width: 100%;
}
 .youtubers.page .grid {
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(4, 1fr);
}
 @media (max-width: 1190px) {
   .youtubers.page .grid {
     grid-template-columns: repeat(3, 1fr);
  }
}
 @media (max-width: 768px) {
   .youtubers.page {
     padding-top: 0;
  }
   .youtubers.page .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
  }
   .youtubers.page .box {
     height: auto;
     min-height: 145px;
     padding: 10px 5px;
     gap: 10px;
  }
   .youtubers.page .box .img {
     width: 75px;
     height: 75px;
  }
   .youtubers.page .box .title {
     font-size: 14px;
  }
}
 .contact {
   background-image: url("../img/blur.png");
   background-position: right -30px;
   background-repeat: no-repeat;
   padding-top: 20px;
}
 .contact .back h1 img {
   height: 20px;
}
 .contact .title {
   font-size: 12px;
   font-family: caps;
   font-weight: bold;
   display: block;
   margin-bottom: 10px;
}
 .contact .socials {
   display: flex;
   gap: 10px;
   margin-bottom: 16px;
}
 .contact .socials .social-btn {
   border: 1px solid #fff;
   width: 28px;
   height: 28px;
   border-radius: 4px;
   background: linear-gradient(180deg, #000 0%, #5b2424 100%);
}
 .contact .socials .social-btn:hover {
   background: #d21515;
   border-color: #d21515;
}
 .contact .info {
   margin-bottom: 16px;
}
 .contact .info li {
   display: flex;
   gap: 9px;
   margin-bottom: 10px;
}
 .contact .info li .frame {
   width: 24px;
   height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}
 .contact .info li div {
   font-size: 12px;
   color: #a4a4a4;
}
 .contact .info li a {
   font-size: 14px;
   color: #fff;
   display: block;
   margin-top: 1px;
}
 .contact .map {
   width: 100%;
}
 .contact iframe {
   width: 100%;
   height: 200px;
}
 .contact .left {
   flex-shrink: 0;
}
 .rules .title {
   font-size: 14px;
   font-family: caps;
   font-weight: bold;
   display: block;
   margin-bottom: 5px;
   color: #d21515;
}
.rules p{
  font-size: 15px;
}
.rules .text {
   font-size: 14px;
   color: #fff;
   line-height: 1.6;
}
.rules ul {
   padding-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
   list-style-type: disc;
}
 .rules ul li {
   margin-bottom: 15px;
   font-size: 15px;
}
 .our-rooms {
   margin-top: 30px;
}
 .rooms-wrapper {
   display: flex;
   border-radius: 14px;
  /* border: 1px solid #D21515;
   */
   overflow: hidden;
}
 .rooms-wrapper .room {
   width: 100%;
   height: 480px;
   position: relative;
   transition: 0.3s;
}
 .rooms-wrapper .room:before {
   display: none !important;
}
 .rooms-wrapper .room img {
   -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 100%;
   transform: scale(1.2);
   pointer-events: none;
   transition: 0.3s ease-in-out;
}
 .rooms-wrapper .room .title {
   font-size: 32px;
   color: #fff;
   position: absolute;
   width: 100%;
   display: block;
   left: 50%;
   bottom: 30px;
   transform: translateX(-50%);
   text-align: center;
   -webkit-text-stroke: 1px #d21515;
}
 .rooms-wrapper .room:hover img {
   transform: scale(1.1);
}
 .rooms-wrapper .room:nth-child(1) {
   clip-path: polygon(0% 0%, 110% 0, 95% 100%, 0% 100%);
}
 .rooms-wrapper .room:nth-child(1):hover {
   clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
 .rooms-wrapper:has(.room:nth-child(1):hover) .room:nth-child(2) {
   clip-path: polygon(0% 0%, 110% 0, 95% 100%, 0% 100%);
}
 .rooms-wrapper:has(.room:nth-child(1):hover) .room:nth-child(2):before {
   transform: rotate(0);
   left: 0;
}
 .rooms-wrapper .room:nth-child(2) {
   clip-path: polygon(10% 0%, 110% 0, 95% 100%, -5% 100%);
}
 .rooms-wrapper .room:nth-child(2):before {
   content: "";
   position: absolute;
   left: 8px;
   top: 0;
   width: 1px;
   height: 100%;
   background-color: #d21515;
   transform: rotate(6deg);
   z-index: 1;
   transition: 0.3s;
}
 .rooms-wrapper .room:nth-child(2):hover {
   clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
 .rooms-wrapper .room:nth-child(2):hover:before {
   transform: rotate(0deg);
   left: 0;
}
 .rooms-wrapper:has(.room:nth-child(2):hover) .room:nth-child(1) {
   clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
 .rooms-wrapper:has(.room:nth-child(2):hover) .room:nth-child(3) {
   clip-path: polygon(0% 0%, 110% 0, 95% 100%, 0% 100%);
}
 .rooms-wrapper:has(.room:nth-child(2):hover) .room:nth-child(3):before {
   transform: rotate(0);
   left: 0;
}
 .rooms-wrapper:has(.room:nth-child(3):hover) .room:nth-child(2) {
   clip-path: polygon(10% 0%, 110% 0, 100% 100%, -5% 100%);
}
 .rooms-wrapper:has(.room:nth-child(3):hover) .room:nth-child(4) {
   clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
 .rooms-wrapper:has(.room:nth-child(3):hover) .room:nth-child(4):before {
   transform: rotate(0);
   left: 0;
}
 .rooms-wrapper .room:nth-child(3) {
   clip-path: polygon(10% 0%, 110% 0, 95% 100%, -5% 100%);
}
 .rooms-wrapper .room:nth-child(3):before {
   content: "";
   position: absolute;
   left: 8px;
   top: 0;
   width: 1px;
   height: 100%;
   background-color: #d21515;
   transform: rotate(6deg);
   z-index: 1;
   transition: 0.3s;
}
 .rooms-wrapper .room:nth-child(3):hover {
   clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
 .rooms-wrapper .room:nth-child(3):hover:before {
   transform: rotate(0deg);
   left: 0;
}
 .rooms-wrapper .room:nth-child(4) {
   clip-path: polygon(10% 0%, 100% 0, 100% 100%, -5% 100%);
}
 .rooms-wrapper .room:nth-child(4):before {
   content: "";
   position: absolute;
   left: 8px;
   top: 0;
   width: 1px;
   height: 100%;
   background-color: #d21515;
   transform: rotate(6deg);
   z-index: 1;
   transition: 0.3s;
}
 .rooms-wrapper .room:nth-child(4):hover {
   clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
 .rooms-wrapper .room:nth-child(4):hover:before {
   transform: rotate(0deg);
   left: 0;
}
 .rooms-wrapper:has(.room:nth-child(4):hover) .room:nth-child(3) {
   clip-path: polygon(10% 0%, 110% 0, 100% 100%, -5% 100%);
}

.kidsgame.gameRules .info{
  font-size: 15px;
  color: white;
  margin-bottom: 8px;
}
 .kidsgame .frame {
  margin-bottom: 10px;
   border-radius: 3px;
   overflow: hidden;
   height: 77px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-size: 16px;
   font-family: caps;
   position: relative;
}
 .kidsgame .frame .img {
   position: absolute;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   top: 0;
   left: 0;
   z-index: 0;
}
 .kidsgame .frame:before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   top: 0;
   left: 0;
   z-index: 1;
}
 .kidsgame .frame span {
   position: relative;
   z-index: 1;
}
 .kidsgame .textbox {
   padding: 10px;
   border-radius: 3px;
   border: 1px solid #371313;
   font-size: 12px;
   color: #fff;
   background-color: rgba(255, 255, 255, 0.05);
   margin-top: 10px;
   margin-bottom: 16px;
}
 .kidsgame .textbox ul {
   padding-left: 20px;
   list-style-type: disc;
}
 .kidsgame .textbox ul li {
   margin-bottom: 8px;
}
 .kidsgame .title {
   font-size: 12px;
   font-family: caps;
   margin-bottom: 10px;
   display: block;
}
 .kidsgame .text {
   font-size: 12px;
   margin-bottom: 16px;
}
 .kidsgame .text mark {
   font-size: 12px;
   color: #d21515;
   margin-bottom: 5px;
   display: block;
}
 .kidsgame .text ul {
   padding-left: 20px;
   list-style-type: disc;
}
 .kidsgame .text ul li {
   margin-bottom: 8px;
}
 .kidsgame .list {
   margin-bottom: 10px;
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
   padding: 10px;
}
 .kidsgame .list li {
   margin-bottom: 10px;
   padding-bottom: 8px;
   color: #a4a4a4;
   font-size: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #a4a4a4;
}
 .kidsgame .list li span {
   font-size: 12px;
   color: #fff;
}
 .gameRules {
   padding-bottom: 50px;
}
 .gameRules .title {
   font-size: 15px;
   margin-bottom: 8px;
   font-family: caps;
   display: block;
   display: flex;
   align-items: center;
   gap: 2px;
}
 .gameRules .players {
   padding: 0 5px;
   height: 22px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 3px;
   font-size: 12px;
   border-radius: 10px;
   background-color: #d21515;
   width: -moz-fit-content;
   width: fit-content;
   margin-bottom: 16px;
}
 .gameRules .box {
   padding: 10px 15px;
   border-radius: 3px;
   border: 1px solid #371313;
   background-color: rgba(255, 255, 255, 0.05);
   margin-bottom: 16px;
}
 .gameRules .box .sm {
   display: block;
   font-size: 14px;
   margin-bottom: 10px;
}
 .gameRules .box ul {
   padding-left: 20px;
   margin-top: 5px;
   list-style-type: disc;
}
 .gameRules .box ul li {
   margin-bottom: 5px;
   font-size: 12px;
}
 .gameRules .info {
   font-size: 13px;
   color: #d21515;
   gap: 5px;
   display: flex;
   align-items: flex-start;
   gap: 5px;
   margin-top: 10px;
}
 .gameRules .contact-us {
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(210, 22, 22, 0.15) 69.83%);
   border: 1px solid #371313;
   padding: 10px;
   border-radius: 3px;
   flex-direction: column;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin-top: 16px;
}
 .gameRules .contact-us .frame {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   border-radius: 4px;
   width: 42px;
   height: 42px;
   background-color: #860202;
   margin-bottom: 10px;
}
 .gameRules .contact-us span {
   font-size: 14px;
   color: #fff;
   margin-bottom: 5px;
}
 .gameRules .contact-us p {
   font-size: 13px;
   margin-bottom: 10px;
   color: #a4a4a4;
}
 .gameRules .contact-us .red-button {
   height: 30px;
   margin-bottom: 10px;
   font-size: 14px;
   padding-top: 3px;
}
 .gameRules .contact-us .red-button img {
   position: relative;
   top: -2px;
}
 .gameRules .grey-button {
   height: 30px;
   width: 100%;
}
 .role {
   padding: 10px;
   border-radius: 3px;
   border: 1px solid #d21515;
   margin-bottom: 10px;
   background-color: rgba(255, 255, 255, 0.05);
}
 .role .flex {
   display: flex;
   gap: 10px;
}
 .role .flex:not(:last-child) {
   margin-bottom: 10px;
}
 .role.chill {
   border-color: #371313;
}
 .role .frame {
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background: #0f0f0f;
   width: 27px;
   height: 27px;
   flex-shrink: 0;
}
 .role .sm {
   display: block;
   font-size: 14px;
   padding-top: 3px;
   margin-bottom: 10px;
}
 .role ul {
   padding-left: 20px;
   margin-top: 5px;
   list-style-type: disc;
}
 .role ul li {
   margin-bottom: 10px;
   font-size: 12px;
}
 .role ul li.red {
   color: #d21515;
}
 .role ul li:last-child {
   margin-bottom: 0;
}
 .role p {
   font-size: 12px;
}
 .text ul {
   padding-left: 20px;
   margin-top: 10px;
   list-style-type: disc;
}
 .text ul li {
   margin-bottom: 5px;
}
 .text ul li:last-child {
   margin-bottom: 0;
}
 .rule {
   margin-bottom: 16px;
}
 .rule.active .select {
   background: rgba(255, 255, 255, 0.1);
   -webkit-backdrop-filter: blur(100px);
   backdrop-filter: blur(100px);
   box-shadow: 0px -1px 4px 0px rgba(255, 255, 255, 0.0509803922) inset;
}
 .rule .select {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   color: #fff;
   padding: 5px 10px;
   border-radius: 3px;
   -webkit-backdrop-filter: blur(100px);
   backdrop-filter: blur(100px);
   box-shadow: 0px -1px 4px 0px rgba(255, 255, 255, 0.0509803922) inset;
   background: rgba(255, 255, 255, 0.05);
   min-height: 32px;
   width: 100%;
}
 .rule .text {
   display: none;
   padding: 10px;
   font-size: 14px;
   background: rgba(255, 255, 255, 0.05);
   color: #fff;
   border-radius: 0 0 3px 3px;
}
 .rooms-page .text {
   font-size: 12px;
   margin-bottom: 16px;
}
 .rooms-page .title {
   font-size: 14px;
   font-family: caps;
   margin-bottom: 10px;
   display: block;
}
 .rooms-page .slider {
   margin-bottom: 16px;
}
 .rooms-page .gallery-box {
   width: 170px;
   border-radius: 5px;
   overflow: hidden;
   border: 1px solid #d21515;
   display: block;
}
 .rooms-page .gallery-box img {
   height: 120px;
   width: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 .rooms-page .gallery-box div {
   padding: 10px;
   background-color: rgba(255, 255, 255, 0.05);
   -webkit-backdrop-filter: blur(100px);
   backdrop-filter: blur(100px);
   box-shadow: 0px 0px 100px 0px rgba(255, 255, 255, 0.0509803922) inset;
}
 .rooms-page .gallery-box div span {
   color: #fff;
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
}
 .rooms-page .gallery-box div p {
   font-size: 12px;
   color: #a4a4a4;
}
 .rooms-page .grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
   margin-bottom: 16px;
   padding-bottom: 16px;
   border-bottom: 1px solid #a4a4a4;
}
 .rooms-page .grid .box {
   width: 100%;
   height: 69px;
   border-radius: 3px;
   background-color: rgba(255, 255, 255, 0.05);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   gap: 10px;
   font-size: 12px;
}
 .fed .intro-box {
   height: 128px;
   border-radius: 3px;
   border: 1px solid #d21515;
   position: relative;
   display: flex;
   align-items: flex-end;
   padding: 10px;
   margin-bottom: 26px;
}
 .fed .intro-box .img {
   position: absolute;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 .fed .intro-box .pin {
   position: absolute;
   right: 10px;
   top: 10px;
   height: 22px;
   z-index: 2;
   border-radius: 10px;
   font-size: 10px;
   color: #fff;
   background: #d21515;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 0 10px;
}
 .fed .intro-box .frame {
   z-index: 2;
   border-radius: 3px;
   width: 23px;
   height: 23px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #fff;
   position: absolute;
   left: 10px;
   top: 10px;
}
 .fed .intro-box span {
   position: relative;
   z-index: 2;
   font-size: 14px;
   text-align: center;
}
 .fed .intro-box:before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   top: 0;
   left: 0;
   z-index: 2;
}
 .fed .title {
   font-size: 12px;
   font-family: caps;
   margin-bottom: 10px;
   display: block;
}
 .fed .box {
   padding: 10px;
   border-radius: 3px;
   background-color: rgba(255, 255, 255, 0.05);
   margin-bottom: 16px;
   font-size: 14px;
   margin-bottom: 16px;
}
 .fed .list {
   margin-bottom: 10px;
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
   padding: 10px;
}
 .fed .list li {
   margin-bottom: 10px;
   padding-bottom: 8px;
   color: #a4a4a4;
   font-size: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #a4a4a4;
}
 .fed .list li span {
   font-size: 12px;
   color: #fff;
}
 .fed .contact-us {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 6px;
   padding-bottom: 30px;
}
 .fed .contact-us span {
   font-size: 12px;
   display: block;
   margin-bottom: 10px;
}
 .fed .contact-us .socials {
   display: flex;
   gap: 10px;
   margin-bottom: 16px;
}
 .fed .contact-us .socials .soc-btn {
   width: 28px;
   height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   border-radius: 3px;
   border: 1px solid #fff;
   background: linear-gradient(180deg, #000 0%, #5b2424 100%);
}
 .fed .contact-us p {
   font-size: 14px;
   margin-bottom: 10px;
}
 .fed .contact-us .link {
   color: #d21515;
   display: flex;
   gap: 5px;
   align-items: center;
   font-size: 12px;
}
 .tables {
   padding-top: 33px;
}
 .tables .top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 25px;
}
 .tables .top .red-button img {
   width: 24px !important;
   height: 24px;
}
 .tables .balance {
   gap: 5px;
   display: flex;
   align-items: center;
   color: #fff;
   font-size: 14px;
}
 .tables .balance span {
   color: #22c55e;
   line-height: 0;
   display: block;
   position: relative;
   top: -1px;
}
 .tables .balance span mark {
   font-size: 24px;
   padding-left: 1px;
}
 .table-wrap {
   margin-bottom: 10px;
}
 .table-wrap .select {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 40px;
   padding: 10px 15px;
   border-radius: 5px;
   background-color: #1b1b1b;
   width: 100%;
   margin-bottom: 10px;
   border: 1px solid #444;
}
 .table-wrap .select .day-name {
   flex: 1;
   text-align: left;
   padding-left: 20px;
}
 .table-wrap .select .day-name span {
   padding-left: 5px;
}
 .table-wrap .grid {
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   display: none;
}
 .table-wrap .grid.active {
   display: grid;
}
 #manage-price-per-slot, #price-per-slot {
   display: flex;
   gap: 5px;
   align-items: flex-end;
}
 #manage-price-per-slot .text-decoration-line-through, #price-per-slot .text-decoration-line-through {
   text-decoration: line-through;
   margin-bottom: 0;
}
 .table {
   height: 380px;
   width: 100%;
   border-radius: 3px;
   position: relative;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   border: 1px solid #444;
}
 .table .free-cancellation-text {
   display: none !important;
}
 .table .green-button, .table .red-button {
   font-size: 14px;
   height: 34px;
}
 .table .buyin {
   flex-direction: column;
   display: flex;
   align-items: flex-end;
}
 .table .buyin .old-price {
   font-size: 12px;
   color: #8d8d8d;
   text-decoration: line-through;
}
 .table .time-text {
   padding-left: 5px;
}
 .table .full-wrap {
   display: flex;
   gap: 10px;
   justify-content: center;
   align-items: center;
}
 .table .full-wrap .wishlist-btn {
   border-color: #22c55e;
   color: #fff;
}
 .table .full-wrap .wishlist-btn.active {
   background-color: #22c55e;
   border-color: #1a9c4b;
}
 .table .full-wrap .wishlist-btn.active img {
   filter: brightness(0) invert(1);
}
 .table .relative {
   z-index: 2;
   height: 100%;
   width: 100%;
}
 .table .img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 .table .head {
   position: absolute;
   top: 15px;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
   padding: 0 15px;
   z-index: 1;
}
 .table .head .players-title {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 14px;
}
  .table .id {
   font-size: 14px;
}
 .table .bottom {
   position: absolute;
   left: 0;
   bottom: 15px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   padding: 0 15px;
}
 .table .clock {
   gap: 5px;
   font-size: 24px;
   align-items: center;
   display: flex;
}
 .table .center {
   font-size: 14px;
}
 .table .center span {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}
 .table .pin {
   display: flex;
   font-size: 12px;
   align-items: center;
   justify-content: center;
   height: 27px;
   position: absolute;
   padding-top: 3px;
   right: 15px;
   top: 20px;
   border-radius: 29px;
   padding: 0 10px;
}
 .table .pin.tourn {
   background-color: #2bb673;
}
 .table .pin.free {
   background-color: #e74c3c;
   cursor: pointer;
}
 .table .pin.pro {
   background-color: #111;
}
 .table .center .red-button {
   width: fit-content;
   margin: auto;
   padding: 0 15px;
   margin-top: 5px;
}
 .table .seat {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 62px;
   height: 62px;
   transform: translate(-50%, -30%);
}
 .table .seat .name {
   position: absolute;
   top: -12px;
   background-color: #000;
   border-radius: 10px;
   padding: 4px 8px;
   display: none;
   font-size: 15px;
   z-index: 2;
   left: 50%;
   transform: translateX(-50%);
}
 @media (max-width: 768px) {
   .table .seat .name {
     font-size: 25px;
     top: -32px;
  }
}
 .table .seat:nth-child(1), .table .seat:nth-child(7) {
   left: calc(50% + 0px);
}
 .table .seat:nth-child(1) {
   top: 40px;
}
 .table .seat:nth-child(7) {
   top: 230px;
}
 .table .seat:nth-child(2), .table .seat:nth-child(6) {
   left: calc(50% + 77px);
}
 .table .seat:nth-child(8), .table .seat:nth-child(12) {
   left: calc(50% - 77px);
}
 .table .seat:nth-child(2), .table .seat:nth-child(12) {
   top: 48px;
}
 .table .seat:nth-child(6), .table .seat:nth-child(8) {
   top: 220px;
}
 .table .seat:nth-child(3), .table .seat:nth-child(5) {
   left: calc(50% + 145px);
}
 .table .seat:nth-child(9), .table .seat:nth-child(11) {
   left: calc(50% - 145px);
}
 .table .seat:nth-child(3), .table .seat:nth-child(11) {
   top: 80px;
}
 .table .seat:nth-child(5), .table .seat:nth-child(9) {
   top: 190px;
}
 .table .seat:nth-child(4) {
   left: calc(50% + 195px);
}
 .table .seat:nth-child(10) {
   left: calc(50% - 195px);
}
 .table .seat:nth-child(4), .table .seat:nth-child(10) {
   top: 135px;
}
 .table .seat img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   -o-object-fit: cover;
   object-fit: cover;
   border: 2px solid #ffffff1a;
}
 .table .players {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
 .my-balance {
   padding-top: 130px;
}
 .my-balance .main-title {
   font-size: 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 30px;
}
 .my-balance .box {
   background-color: #860202;
   padding: 15px;
   border-radius: 5px;
   width: 100%;
}
 .my-balance .box .title {
   display: block;
   margin-bottom: 10px;
   font-size: 24px;
}
 .my-balance .box .money {
   font-size: 16px;
   margin-bottom: 14px;
   display: flex;
   align-items: flex-end;
   gap: 3px;
}
 .my-balance .box .money b {
   font-size: 32px;
   position: relative;
   top: 2px;
   line-height: 1;
}
 .my-balance .box .sub {
   font-size: 16px;
   color: #a4a4a4;
}
 .my-balance .box .sub span {
   color: #fff;
}
 .my-balance .wrapper {
   display: flex;
   gap: 10px;
   margin-bottom: 30px;
}
 .my-balance .grey-box {
   background-color: rgba(255, 255, 255, 0.05);
   width: 100%;
   padding: 15px;
}
 .my-balance .grey-box .title {
   font-size: 16px;
   margin-bottom: 10px;
   display: block;
}
 .my-balance .grey-box .flex {
   gap: 10px;
}
 .my-balance .grey-box .left {
   flex-shrink: 0;
   width: 250px;
}
 .my-balance .grey-box input {
   margin-bottom: 10px;
   height: 40px;
   background-color: #0f0f0f;
   border-radius: 5px;
   width: 100%;
   padding-left: 15px;
   font-size: 14px;
   color: #fff;
}
 .my-balance .grey-box input::-moz-placeholder {
   color: #a4a4a4;
}
 .my-balance .grey-box input::placeholder {
   color: #a4a4a4;
}
 .my-balance .grey-box .red-button {
   width: 100%;
}
 .my-balance .grey-box .red-button img {
   width: 24px !important;
}
 .my-balance .grey-box .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   width: 100%;
}
 .my-balance .grey-box .grid button {
   background-color: #371313;
   border: 1px solid #860202;
   height: 40px;
   width: 100%;
   border-radius: 3px;
   font-size: 14px;
   color: #fff;
   transition: 0.2s;
   padding-top: 6px;
}
 .my-balance .grey-box .grid button:hover {
   background-color: #d21515;
   border-color: #d21515;
}
 .my-balance .grey-box .grid button span {
   font-size: 20px;
   padding-left: 2px;
   position: relative;
   top: 1px;
}
 .my-balance .transaction-history {
   border-radius: 3px;
   background-color: rgba(255, 255, 255, 0.05);
   padding: 30px;
   margin-bottom: 50px;
}
 .my-balance .transaction-history .title {
   margin-bottom: 30px;
   font-weight: bold;
   font-family: caps;
}
 .my-balance .transaction {
   margin-bottom: 15px;
   width: 100%;
   display: flex;
   gap: 15px;
   background: #0f0f0f;
   padding: 15px;
   border-radius: 5px;
}
 .my-balance .transaction .top {
   margin-bottom: 10px;
   font-size: 20px;
   color: #d21515;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #d21515;
   width: 100%;
}
 .my-balance .transaction .frame {
   width: 60px;
   height: 60px;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #222;
}
 .my-balance .transaction .bot {
   font-size: 16px;
   color: #a4a4a4;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
 .my-balance .transaction span {
   color: inherit;
   font-size: inherit;
}
 .my-balance .transaction.green .top {
   color: #22c55e;
}
 @media (max-width: 1190px) {
   .my-balance .grey-box .left {
     width: 150px;
  }
   .my-balance .grey-box .grid button {
     font-size: 10px;
  }
   .my-balance .grey-box .grid button span {
     font-size: 14px;
  }
}
 @media (max-width: 900px) {
   .intro {
     padding-top: 60px;
  }
   .my-balance {
     padding-top: 0;
  }
   .my-balance .wrapper {
     flex-direction: column;
     gap: 16px;
     margin-bottom: 16px;
  }
   .my-balance .box {
     padding: 10px;
  }
   .my-balance .box .title {
     font-size: 14px;
  }
   .my-balance .box .money {
     margin-bottom: 8px;
     font-size: 14px;
  }
   .my-balance .box .money b {
     font-size: 24px;
  }
   .my-balance .box .sub {
     font-size: 12px;
  }
   .my-balance .grey-box .left {
     width: 100%;
  }
   .my-balance .grey-box .flex {
     flex-direction: column;
     gap: 15px;
  }
   .my-balance .transaction-history {
     padding: 10px;
  }
   .my-balance .transaction-history .title {
     font-size: 14px;
     margin-bottom: 10px;
  }
   .my-balance .transaction-history .transaction {
     padding: 5px;
     gap: 7px;
  }
   .my-balance .transaction-history .transaction:last-child {
     margin-bottom: 0;
  }
   .my-balance .transaction-history .transaction span {
     padding-top: 4px;
  }
   .my-balance .transaction-history .transaction .frame {
     width: 46px;
     height: 46px;
     flex-shrink: 0;
  }
   .my-balance .transaction-history .transaction .top {
     font-size: 14px;
     margin-bottom: 4px;
  }
   .my-balance .transaction-history .transaction .bot {
     font-size: 12px;
  }
}
 .stats {
   padding-top: 130px;
}
 .stats .back {
   margin-top: 0;
}
 .stats h1 img {
   height: 24px;
}
 .stats .pin {
   border-radius: 15px;
   padding: 0 10px;
   height: 37px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-size: 14px;
   background-color: #d21515;
}
 .stats .box {
   padding: 15px;
   border-radius: 5px;
   width: 100%;
}
 .stats .user {
   background-color: rgba(255, 255, 255, 0.05);
}
 .stats .user .flex {
   gap: 15px;
}
 .stats .user .name {
   font-size: 24px;
   display: block;
   margin-bottom: 15px;
}
 .stats .user .id {
   font-size: 16px;
   margin-bottom: 15px;
   display: block;
   color: #a4a4a4;
}
 .stats .user .money {
   font-size: 16px;
   color: #22c55e;
}
 .stats .user .money b {
   color: inherit;
   font-size: 30px;
}
 .stats .grow {
   flex-grow: 1;
}
 .stats .avatar {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   overflow: hidden;
}
 .stats .avatar img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 .stats .grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
}
 .stats .games {
   background-color: #860202;
   display: block;
}
 .stats .games .title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
}
 .stats .games .bold {
   font-weight: bold;
   font-size: 32px;
}
 .stats .won {
   background: rgba(0, 221, 41, 0.1490196078);
}
 .stats .won .bold {
   color: #22c55e;
}
 .stats .lost {
   background: rgba(210, 22, 22, 0.1490196078);
}
 .stats .lost .bold {
   color: #d21515;
}
 .stats .won, .stats .lost {
   height: 150px;
   display: block;
}
 .stats .won .title, .stats .lost .title {
   font-size: 16px;
   display: flex;
   align-items: center;
   margin-bottom: 15px;
   gap: 15px;
}
 .stats .won .bold, .stats .lost .bold {
   font-size: 32px;
   font-weight: bold;
}
 .stats .grey-box {
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.05);
   padding: 30px;
   margin-top: 15px;
}
 .stats .grey-box .title {
   font-size: 20px;
   margin-bottom: 30px;
   font-family: caps;
   display: block;
}
 .stats .grey-box .line-wrap {
   margin-bottom: 30px;
}
 .stats .grey-box .line-wrap:last-child {
   margin-bottom: 0;
}
 .stats .team-wins-site .grid.three {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-top: 0;
}
 .stats .team-wins-site .item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 12px;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 5px;
}
 .stats .team-wins-site .item img {
   width: 24px;
   height: 24px;
   opacity: 0.8;
}
 .stats .team-wins-site .item .num {
   font-size: 22px;
   font-weight: bold;
   color: #fff;
}
 .stats .team-wins-site .item .label {
   font-size: 12px;
   color: #a4a4a4;
}
 .stats .table-history {
   width: 100%;
   padding-bottom: 15px;
   border-bottom: 1px solid #a4a4a4;
}
 .stats .table-history:not(:last-child) {
   margin-bottom: 30px;
}
 .stats .table-history .top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 20px;
}
 .stats .table-history .top .id {
   flex-grow: 1;
   color: #a4a4a4;
   display: block;
   padding-left: 5px;
}
 .stats .table-history .red {
   font-size: 14px;
   color: #d21515;
   display: block;
   margin-top: 2px;
}
 .stats .table-history .ended {
   background-color: #0f0f0f;
}
 .stats .table-history .canceled {
   background-color: #860202;
}
 @media (max-width: 900px) {
   .stats {
     padding-top: 0;
     padding-bottom: 40px;
  }
   .stats .back {
     margin-top: 70px;
  }
   .stats .grid {
     flex-direction: column;
     display: flex;
     gap: 16px;
  }
   .stats .games {
     padding: 15px;
  }
   .stats .games .title {
     font-size: 14px;
  }
   .stats .won .title, .stats .lost .title {
     font-size: 14px;
  }
   .stats .won .title img, .stats .lost .title img {
     display: none;
  }
   .stats .won, .stats .lost {
     height: auto;
     padding: 15px;
  }
   .stats .line-wrap .top {
     margin-bottom: 5px;
  }
   .stats .line-wrap .top .sm {
     font-size: 12px;
  }
   .stats .line-wrap .top .sub {
     font-size: 12px;
  }
   .stats .grey-box {
     padding: 15px;
     position: relative;
     margin-top: 40px;
  }
   .stats .team-wins-site .item .num {
     font-size: 18px;
   }
   .stats .grey-box .line-wrap {
     margin-bottom: 25px;
  }
   .stats .grey-box .title {
     font-size: 14px;
     margin-bottom: 10px;
     position: absolute;
     top: -25px;
     left: 0;
  }
   .stats .pin {
     font-size: 12px;
     height: 27px;
     padding-top: 3px;
  }
   .stats .table-history {
     padding-bottom: 10px;
  }
   .stats .table-history .top {
     font-size: 14px;
  }
   .stats .table-history .top .id {
     font-size: 12px;
  }
   .stats .table-history .red {
     font-size: 12px;
  }
   .stats .table-history:not(:last-child) {
     margin-bottom: 15px;
  }
   .stats .user {
     padding-bottom: 5px;
  }
   .stats .user .avatar {
     width: 50px;
     height: 50px;
  }
   .stats .user .name {
     font-size: 16px;
     margin-bottom: 10px;
  }
   .stats .user .id {
     font-size: 12px;
     margin-bottom: 10px;
  }
}
 .line-wrap .top {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 10px;
}
 .line-wrap .top .sm {
   font-size: 20px;
   color: #a4a4a4;
   display: block;
   flex-grow: 1;
   font-family: caps;
}
 .line-wrap .top .sub {
   font-size: 16px;
}
 .line-wrap .line {
   width: 100%;
   border-radius: 5px;
   background-color: #0f0f0f;
   height: 6px;
   position: relative;
}
 .line-wrap .line .percent {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   background-color: #d21515;
   border-radius: 5px;
}
 .myVouchers {
   padding-top: 130px;
}
 .myVouchers .back {
   margin-top: 0;
}
 .myVouchers .back img {
   height: 24px;
}
 .myVouchers .grey-box {
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.05);
   padding: 15px;
   border: 1px solid #d21515;
   overflow: hidden;
   position: relative;
   margin-bottom: 30px;
}
 .myVouchers .grey-box .title {
   font-size: 24px;
   margin-bottom: 10px;
   display: block;
}
 .myVouchers .grey-box .money {
   font-size: 30px;
   font-weight: bold;
   display: block;
   margin-bottom: 15px;
}
 .myVouchers .grey-box .money span {
   font-size: 16px;
   font-weight: normal;
}
 .myVouchers .grey-box .flex {
   gap: 15px;
   align-items: center;
}
 .myVouchers .grey-box .date {
   color: #a4a4a4;
   font-size: 16px;
}
 .myVouchers .grey-box .date span {
   color: #fff;
}
 .myVouchers .grey-box .img {
   position: absolute;
   right: 0;
   transform: rotate(45deg);
   height: 300px;
   bottom: -70px;
}
 .myVouchers .main-title {
   font-size: 20px;
   font-family: caps;
   margin-bottom: 15px;
   display: block;
}
 .myVouchers .grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   margin-bottom: 30px;
}
 .myVouchers .voucher-wrapper {
   position: relative;
   overflow: hidden;
}
 .myVouchers .voucher-wrapper .shape {
   position: absolute;
   background-color: #0f0f0f;
   content: "";
   left: 0;
   top: 50%;
   width: 35px;
   height: 70px;
   border-radius: 100%;
   border: 1px dashed #d21515;
   transform: translateY(-50%) translateX(-50%);
}
 .myVouchers .voucher-wrapper .shape.sec {
   left: auto;
   right: 0;
   transform: translateY(-50%) translateX(50%);
}
 .myVouchers .voucher-pending {
   padding: 30px 35px;
   background-color: #371313;
   border: 1px dashed #d21515;
}
 .myVouchers .voucher-pending .num {
   display: block;
   width: 100%;
   text-align: center;
   margin-bottom: 5px;
   font-size: 36px;
}
 .myVouchers .voucher-pending .sub {
   font-size: 16px;
   color: #a4a4a4;
   padding-bottom: 15px;
   width: 100%;
   text-align: center;
   border-bottom: 1px dashed #a4a4a4;
   margin-bottom: 15px;
   display: block;
   font-family: caps;
}
 .myVouchers .voucher-pending li {
   font-size: 14px;
   color: #a4a4a4;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
 .myVouchers .voucher-pending li:not(:last-child) {
   margin-bottom: 10px;
}
 .myVouchers .voucher-pending li span {
   color: #fff;
}
 .myVouchers .voucher-wrapper {
   position: relative;
   overflow: hidden;
}
 .myVouchers .voucher-wrapper .shape {
   position: absolute;
   background-color: #0f0f0f;
   content: "";
   left: 0;
   top: 50%;
   width: 35px;
   height: 70px;
   border-radius: 100%;
   border: 1px dashed #d21515;
   transform: translateY(-50%) translateX(-50%);
}
 .myVouchers .voucher-wrapper .shape.sec {
   left: auto;
   right: 0;
   transform: translateY(-50%) translateX(50%);
}
 .myVouchers .voucher-wrapper.gold .shape, .myVouchers .voucher-wrapper.gold .voucher {
   border-color: #ffc941;
}
 .myVouchers .voucher-wrapper.silver .shape, .myVouchers .voucher-wrapper.silver .voucher {
   border-color: #c1c5c9;
}
 .myVouchers .voucher-wrapper.plat .shape, .myVouchers .voucher-wrapper.plat .voucher {
   border-color: #e5e4e2;
}
 .myVouchers .voucher-wrapper.diamond .shape, .myVouchers .voucher-wrapper.diamond .voucher {
   border-color: #e6f2ff;
}
 .myVouchers .voucher {
   padding: 15px 35px;
   background-color: rgba(255, 255, 255, 0.05);
   height: 190px;
   border: 1px dashed;
}
 .myVouchers .voucher .title {
   display: block;
   width: 100%;
   margin-bottom: 15px;
   color: #ffc941;
   text-align: center;
   font-weight: bold;
}
 .myVouchers .voucher li {
   padding: 0 10px;
   margin-bottom: 5px;
   display: flex;
   gap: 5px;
   font-size: 16px;
   align-items: center;
}
 .myVouchers .voucher li mark {
   font-size: 24px;
}
 .myVouchers .voucher li img {
   width: 16px;
}
 .myVouchers .voucher .red-button {
   margin-top: 15px;
   width: 100%;
}
 @media (max-width: 900px) {
   .myVouchers {
     padding-top: 0;
  }
   .myVouchers .back {
     margin-top: 70px;
  }
   .myVouchers .back img {
     height: initial;
  }
   .myVouchers .grey-box {
     padding: 10px;
  }
   .myVouchers .grey-box .flex {
     flex-direction: column-reverse;
     gap: 10px;
     align-items: flex-start;
  }
   .myVouchers .grey-box .flex .date {
     font-size: 12px;
  }
   .myVouchers .grey-box .flex .red-button {
     font-size: 12px;
     height: 30px;
     width: -moz-fit-content;
     width: fit-content;
  }
   .myVouchers .grey-box .money {
     font-size: 24px;
  }
   .myVouchers .grey-box .money span {
     font-size: 14px;
  }
   .myVouchers .grey-box .img {
     right: -30px;
     bottom: 40px;
     height: 150px;
  }
   .myVouchers .grey-box .title {
     font-size: 14px;
  }
   .myVouchers .grid {
     grid-template-columns: 1fr;
     gap: 10px;
  }
   .myVouchers .voucher-pending {
     padding: 20px 30px;
  }
   .myVouchers .voucher li {
     font-size: 14px;
  }
}
 .popup {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   z-index: 100;
   display: none;
}
 .popup .dropdown .select {
   border: 1px solid rgba(255, 255, 255, 0.4);
}
 .popup .info {
   flex-wrap: wrap;
}
 .popup .text-muted {
   font-size: 12px;
   margin-bottom: 10px;
   display: block;
   color: #a4a4a4;
}
 .popup .choose-user {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   padding: 0 10px;
   margin-bottom: 10px;
}
 .popup .choose-user img {
   WIDTH: 50PX;
   HEIGHT: 50PX;
   OBJECT-FIT: COVER;
   border-radius: 50%;
   margin-right: 10px;
}
 .popup .choose-user h6 {
   text-align: left;
}
 .popup .choose-user .text-muted {
   text-align: left;
   margin-top: 2px;
   margin-bottom: 0;
}
 .popup .dropdown .result li {
   margin: 0;
   padding: 8px 15px;
}
 .popup .dropdown .result li.selected {
   background-color: rgba(255, 255, 255, 0.15) !important;
}
 .popup.active {
   display: flex;
}
 .popup .close-button {
   position: absolute;
   top: calc(15px + env(safe-area-inset-top));
   right: 15px;
   width: 24px;
   height: 24px;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}
 .popup .inner {
   background-color: #0f0f0f;
   border-radius: 5px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  /* border: 1px solid #D21515;
   */
   position: relative;
   max-width: calc(100% - 20px);
}
 .popup .content {
   width: 100%;
   padding: 30px;
}
 .popup .content .title {
   display: flex;
   gap: 15px;
   font-size: 16px;
   align-items: center;
   justify-content: center;
   width: 100%;
   margin-bottom: 30px;
}
 .popup .content .title img {
   max-width: 24px;
   max-height: 24px;
}
 .popup .content .red-button {
   width: 100%;
   font-size: 16px;
}
 .popup .content .grey-button {
   width: 100%;
   font-size: 16px;
}
 .login.pop {
   display: flex;
   width: 870px;
}
 .login.pop .password-rules li.text-danger {
   color: rgba(255, 255, 255, 0.7);
}
 .login.pop .password-rules li.text-success {
   color: #fff;
}
 .login.pop .checkbox {
   position: relative;
}
 .login.pop .checkbox:not(:last-child) {
   margin-bottom: 20px;
}
 .login.pop .invalid-feedback {
   font-size: 12px;
   color: var(--red);
   left: 0;
   bottom: initial;
   top: -18px;
   position: absolute;
   padding-left: 26px;
}
.login.pop .checkbox .invalid-feedback{
  bottom: initial!important;
  top: 17px;
  text-align: left;
}
 .login.pop .frame {
   width: 450px;
   flex-shrink: 0;
}
.login.pop .frame img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 .login.pop .forgot {
   margin-right: auto;
   margin: 15px auto 30px 0;
}
 .login.pop form {
   display: flex;
   flex-direction: column;
}
 .tournament-page {
   padding-top: 100px;
}
 .tournament-page .tournament-banner {
   margin-bottom: 20px;
   padding-left: 60px;
   align-items: center;
}
 .tournament-page .tournament-banner .title {
   font-size: 32px;
}
 .tournament-page .grid {
   display: grid;
   gap: 10px;
   grid-template-columns: repeat(2, 1fr);
   margin-bottom: 30px;
}
 .tournament-page .title {
   font-size: 16px;
   margin-bottom: 15px;
   display: block;
   font-family: caps;
}
 .tournament-page .list {
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 5px;
   padding: 15px;
}
 .tournament-page .list li {
   margin-bottom: 15px;
   padding-bottom: 10px;
   color: #a4a4a4;
   font-size: 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #a4a4a4;
}
 .tournament-page .list li:last-child {
   margin-bottom: 0;
}
 .tournament-page .list li span {
   font-size: 14px;
   color: #fff;
}
 .tournament-page .textbox {
   padding: 15px;
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.05);
   font-size: 14px;
   line-height: 1.4;
}
 .tournament-page .textbox span {
   display: block;
   margin-top: 20px;
}
 .tournament-page .textbox a {
   color: #d21515;
}
 .tournament-page .textbox a:hover {
   text-decoration: underline;
}
 .tournament-page .text {
   font-size: 14px;
}
 .tournament-page .text ul {
   margin-bottom: 30px;
}
 .tournament-page .box {
   border-radius: 5px;
   border: 1px solid #d21515;
   padding: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(210, 22, 22, 0.15) 69.83%);
   overflow: hidden;
   position: relative;
}
 .tournament-page .box .img {
   position: absolute;
   right: -40px;
   top: -70px;
   transform: rotate(45deg);
   height: 250px;
}
 .tournament-page .box .head {
   font-size: 20px;
   text-align: center;
   display: block;
   margin-bottom: 40px;
}
 .tournament-page .box ul {
   padding-left: 20px;
}
 .tournament-page .box mark {
   color: #ffc941;
}
 .tournament-page .box li {
   font-size: 20px;
   margin-bottom: 15px;
   list-style-type: disc;
}
 .tournament-page .box ul, .tournament-page .box .red-button {
   width: 400px;
}
 @media (max-width: 1190px) {
   .tournament-page {
     padding-top: 0;
  }
   .tournament-page .tournament-banner {
     padding: 15px;
  }
   .tournament-page .tournament-banner .left .title {
     text-align: center;
  }
}
 @media (max-width: 900px) {
   .tournament-page .tournament-banner .title {
     font-size: 14px;
  }
   .tournament-page .grid {
     grid-template-columns: 1fr;
     gap: 20px;
  }
   .tournament-page .title {
     font-size: 14px;
  }
   .tournament-page .list li {
     font-size: 12px;
  }
   .tournament-page .list li span {
     font-size: 12px;
  }
   .tournament-page .text {
     font-size: 12px;
  }
   .tournament-page .textbox {
     font-size: 12px;
     padding: 10px;
  }
   .tournament-page .box {
     padding: 10px;
  }
   .tournament-page .box .head {
     margin-bottom: 10px;
     font-size: 14px;
  }
   .tournament-page .box li {
     font-size: 14px;
  }
   .tournament-page .box ul, .tournament-page .box .red-button {
     width: 100%;
  }
   .tournament-page .box .img {
     display: none;
  }
}
 .leaderboard {
   padding-top: 100px;
}
 .leaderboard .btn-wrap {
   margin-bottom: 15px;
   display: flex;
   gap: 15px;
}
 .leaderboard .tab {
   padding: 5px 15px;
   display: flex;
   align-items: center;
   height: 29px;
   font-size: 12px;
   gap: 5px;
   background: #1b1b1b;
   border-radius: 5px;
   min-width: 130px;
   justify-content: center;
   transition: 0.2s;
}
 .leaderboard .tab.l {
   width: 275px;
}
 .leaderboard .tab.active {
   background-color: #d21515;
}
 .leaderboard .tab .count {
   font-size: 11px;
   opacity: 0.85;
   margin-left: 2px;
}
 .leaderboard .tab:hover {
   background-color: #371313;
}
 .leaderboard .grid {
   margin-top: 30px;
   gap: 10px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}
 .leaderboard .card {
   border-radius: 5px;
   border: 1px solid transparent;
   background-color: rgba(255, 255, 255, 0.05);
   padding: 15px 15px 20px 15px;
}
 .leaderboard .card.gold {
   background: rgba(255, 201, 65, 0.1019607843);
   border-color: #ffc83d;
}
 .leaderboard .card.silver {
   background: rgba(193, 197, 201, 0.1019607843);
   border: 1px solid #c0c4c8;
}
 .leaderboard .card.bronze {
   background: rgba(185, 118, 55, 0.1019607843);
   border: 1px solid #b87333;
}
 .leaderboard .card .top {
   display: flex;
   gap: 10px;
   margin-bottom: 15px;
}
 .leaderboard .card .number {
   margin-right: 5px;
   border-radius: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   width: 30px;
   height: 24px;
   background-color: #ffc83d;
   font-size: 12px;
   flex-shrink: 0;
   padding-top: 2px;
}
 .leaderboard .card .avatar {
   width: 60px;
   flex-shrink: 0;
   height: 60px;
   border-radius: 50%;
   overflow: hidden;
   background-color: #d9d9d9;
}
 .leaderboard .card .avatar img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}
 .leaderboard .card .grow {
   flex-grow: 1;
   flex-direction: column;
   display: flex;
   justify-content: center;
}
 .leaderboard .card .name {
   font-size: 16px;
   color: #fff;
   margin-bottom: 5px;
   display: block;
}
 .leaderboard .card .sub {
   font-size: 14px;
   color: #a4a4a4;
}
 .leaderboard .card .mvp {
   flex-direction: column;
   display: flex;
   align-items: center;
   gap: 3px;
   font-size: 14px;
   color: #a4a4a4;
}
 .leaderboard .card .mvp .star {
   padding: 0 5px;
   height: 26px;
   border-radius: 5px;
   background-color: #ff9d00;
   gap: 3px;
   font-size: 14px;
   display: flex;
   align-items: center;
   padding-top: 3px;
}
 .leaderboard .card .mvp .star img {
   position: relative;
   top: -3px;
}
 .leaderboard .card .middle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;
}
 .leaderboard .card .item {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: #a4a4a4;
   font-size: 14px;
   gap: 5px;
}
 .leaderboard .card .item span {
   color: #fff;
   font-size: 16px;
}
 .leaderboard .card .item.w {
   color: #22c55e;
}
 .leaderboard .card .item.w span {
   color: #22c55e;
}
 .leaderboard .card .item.l {
   color: #d21515;
}
 .leaderboard .card .item.l span {
   color: #d21515;
}
 .leaderboard .line-wrap .top {
   margin-bottom: 5px;
}
 .leaderboard .line-wrap .top .sm {
   font-size: 14px;
}
 @media (max-width: 1190px) {
   .leaderboard {
     padding-top: 0;
  }
   .leaderboard .grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
  }
   .leaderboard .card {
     padding: 10px;
  }
   .leaderboard .card .number {
     margin-right: 0;
  }
   .leaderboard .card .avatar {
     width: 35px;
     height: 35px;
  }
   .leaderboard .card .name {
     font-size: 14px;
  }
   .leaderboard .card .sub {
     font-size: 12px;
  }
   .leaderboard .line-wrap .top .sm {
     font-size: 12px;
  }
}
 @media (max-width: 900px) {
   .leaderboard .grid {
     grid-template-columns: 1fr;
     margin-top: 15px;
  }
   .leaderboard .card .avatar {
     width: 40px;
     height: 40px;
  }
   .leaderboard .card .item {
     font-size: 12px;
  }
   .leaderboard .card .item span {
     font-size: 14px;
  }
   .leaderboard .btn-wrap {
     overflow-x: auto;
     width: 100%;
  }
   .leaderboard .btn-wrap::-webkit-scrollbar {
     display: none;
  }
}
 @media (min-width: 900px) {
  .contact {
     padding-top: 100px;
  }
  .contact .title {
     font-size: 16px;
  }
   .contact iframe {
     width: 100%;
  }
   .contact .contact-wrapper {
     display: flex;
     gap: 80px;
  }
   .gameRules {
     padding-top: 100px;
  }
   .gameRules .title {
     font-size: 16px;
     margin-bottom: 10px;
  }
   .gameRules .grid {
     display: grid;
     gap: 10px;
     grid-template-columns: 1fr 1fr 1fr;
     margin-bottom: 20px;
  }
   .gameRules .contact-us {
     border: 1px solid #d21515;
     padding: 30px 0;
  }
   .gameRules .contact-us .grey-button, .gameRules .contact-us .red-button {
     width: 340px;
  }
   .role .sm {
     font-size: 16px;
  }
   .role p, .role ul li {
     font-size: 14px;
  }
   .fed {
     padding-top: 100px;
  }
   .fed .grid {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(2, 1fr);
     margin-top: 30px;
  }
   .fed .role {
     margin-bottom: 0;
  }
   .fed .intro-box {
     height: 280px;
  }
   .fed .intro-box .pin {
     z-index: 10;
  }
   .fed .intro-box span {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     font-size: 36px;
     width: calc(50% + 100px);
     display: flex;
     align-items: center;
     height: 100%;
     background: linear-gradient(-90deg, #860202 0%, rgba(134, 2, 2, 0) 100%);
  }
   .fed .intro-box .img {
     width: calc(50% - 100px);
  }
   .fed .title {
     font-size: 16px;
     margin-bottom: 15px;
     display: block;
  }
   .fed .box {
     font-size: 15px;
     padding: 15px;
     line-height: 1.3;
  }
   .fed .list {
     padding: 15px;
  }
   .fed .list li {
     font-size: 14px;
     margin-bottom: 15px;
     padding-bottom: 10px;
  }
   .fed .list li:last-child {
     margin-bottom: 0;
  }
   .fed .list li span {
     font-size: 14px;
  }
   .fed .contact-us {
     margin-top: 30px;
  }
   .fed .contact-us span {
     font-size: 14px;
  }
   .back {
     margin-top: 30px;
  }
   .rules {
     padding-top: 100px;
  }
   .rules .title {
     font-size: 16px;
  }
   .rules .text {
     font-size: 14px;
     line-height: 1.3;
  }
 .kidsgame {
     padding-top: 100px;
  }
  .kidsgame .grid {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(2, 1fr);
     margin-top: 30px;
  
  }
   .kidsgame .textbox {
     font-size: 15px;
     line-height: 1.5;
     padding: 15px;
     margin: 30px 0;
  }
   .kidsgame .title {
     font-size: 16px;
     margin-bottom: 10px;
     display: block;
  }
   .kidsgame .list {
     padding: 15px;
  }
   .kidsgame .list li {
     margin-bottom: 10px;
     padding-bottom: 10px;
     font-size: 14px;
  }
   .kidsgame .list li:last-child {
     margin-bottom: 0;
  }
   .kidsgame .list li span {
     font-size: 14px;
  }
   .kidsgame .text * {
     font-size: 15px;
  }
   .kidsgame .text mark {
     font-size: 15px;
  }
   .kidsgame .frame {
     height: 280px;
  }
   .kidsgame .frame .img {
     width: 50%;
  }
   .kidsgame .frame span {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     font-size: 36px;
     width: 50%;
     display: flex;
     align-items: center;
     height: 100%;
     justify-content: center;
     background: linear-gradient(-90deg, #270303 0%, rgba(134, 2, 2, 0) 100%);
  }
   .rooms-page {
     padding-top: 100px;
  }
   .rooms-page .text.box {
     padding: 15px;
     border-radius: 5px;
     background-color: rgba(255, 255, 255, 0.05);
     font-size: 14px;
     line-height: 1.5;
  }
   .rooms-page .text {
     font-size: 14px;
  }
   .rooms-page .title {
     font-size: 16px;
     margin-bottom: 10px;
     display: block;
  }
   .rooms-page .gallery-box {
     width: 321px;
  }
   .rooms-page .gallery-box img {
     height: 210px;
  }
   .rooms-page .gallery-box div {
     padding: 15px;
  }
   .rooms-page .gallery-box div span {
     font-size: 16px;
  }
   .rooms-page .gallery-box div p {
     font-size: 14px;
  }
   .rooms-page .grid .box {
     font-size: 14px;
  }
   .rooms-page .grid .box img {
     width: 24px;
  }
   .rooms-page .red-button {
     display: none;
  }
}
 @media (max-width: 1400px) {
   .red-button {
     font-size: 14px;
  }
   header .list {
     gap: 10px;
  }
   header .list a {
     font-size: 14px;
  }
   header .red-button {
     font-size: 14px;
  }
   .intro .container {
     height: 700px;
  }
   .about-us {
     margin-top: 90px;
     gap: 10px;
  }
   .about-us iframe {
     width: 50%;
  }
   .about-us .desc {
     width: 50%;
  }
   .about-us .desc .title {
     font-size: 24px;
  }
   .about-us .desc .text {
     font-size: 14px;
  }
   h3.h-title {
     font-size: 20px;
     margin-bottom: 20px;
  }
   .tournament-banner .left {
     width: 600px;
  }
   .tournament-banner .title {
     font-size: 24px;
  }
   .tournament-banner .title b {
     font-size: 40px;
  }
   .tournament-banner .text {
     font-size: 16px;
  }
   .rooms-wrapper .room:nth-child(2):before, .rooms-wrapper .room:nth-child(3):before, .rooms-wrapper .room:nth-child(4):before {
     left: 7px;
     transform: rotate(5deg);
  }
}
 .mob-wrpaper, .burgermenu {
   display: none;
}
 .mob-menu {
   display: none;
}
 @media (max-width: 1190px) {
   .mob-wrpaper {
     display: flex;
  }
   .mob-menu {
     display: block;
     transform: translateX(-100%);
     transition: 0.3s;
  }
   .mob-menu.active {
     transform: translateX(0);
  }
   .intro .slider .box {
     width: 230px;
     height: 210px;
  }
   header {
     height: auto;
     background: transparent;
     border: none;
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
     width: -moz-fit-content;
     width: fit-content;
  }
   header .container.wrapper {
     display: none;
  }
   .burgermenu {
     display: block;
     width: 30px;
     height: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
    /* position: fixed;
     */
    /* top: 30px;
     */
    /* left: 16px;
     */
  }
   header {
     background-color: #0f0f0f;
     top: 0;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
     border: none !important;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
  }
   header .user-pill button {
     width: 35px;
     height: 35px;
  }
   header .mob-wrpaper {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 8px 20px;
  }
   .mob-menu {
     position: fixed;
     left: 0;
     top: 0;
     width: 320px;
     padding: 20px 16px;
     background: linear-gradient(180deg, #000 0%, #3b0200 100%);
     height: 100vh;
     overflow-y: auto;
  }
   .mob-menu .head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
  }
   .mob-menu .close-menu {
     width: 20px;
     height: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     margin-bottom: 25px;
  }
   .mob-menu .user {
     height: 56px;
     display: flex;
     align-items: center;
     gap: 10px;
     padding-left: 15px;
     margin-bottom: 16px;
  }
   .mob-menu .user .avatar {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     overflow: hidden;
     -o-object-fit: cover;
     object-fit: cover;
     background-color: #d9d9d9;
  }
   .mob-menu .user .name {
     font-size: 14px;
     display: block;
  }
   .mob-menu .user .id {
     font-size: 12px;
     color: #a4a4a4;
  }
   .mob-menu .list {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 20px;
  }
   .mob-menu .list.bb {
     padding-bottom: 16px;
     margin-bottom: 16px;
     border-bottom: 1px solid #a4a4a4;
  }
   .mob-menu .list a {
     display: flex;
     gap: 5px;
     font-size: 14px;
     align-items: center;
  }
   .mob-menu .list a .frame {
     width: 20px;
     height: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
  }
   .mob-menu .list a img {
     max-width: 20px;
     max-height: 20px;
  }
   .tournament-banner .left {
     width: 520px;
  }
   .rooms-wrapper .room:nth-child(2):before, .rooms-wrapper .room:nth-child(3):before, .rooms-wrapper .room:nth-child(4):before {
     left: 5px;
     transform: rotate(3.6deg);
  }
   .table {
     height: 240px;
  }
  .table .id {
     font-size: 12px;
  }
   .table .head .players-title {
     font-size: 12px;
  }
   .table .center span {
     font-size: 12px;
  }
   .table .clock {
     font-size: 12px;
  }
   .table .clock img {
     width: 18px;
     position: relative;
     top: -3px;
  }
   .table .players {
     transform: scale(0.5);
     top: -40px;
  }
}
 @media (max-width: 600px) {
   .rooms-wrapper .room {
     height: 160px;
  }
   .rooms-wrapper .room .title {
     font-size: 12px;
     -webkit-text-stroke: 0.3px #d21515;
     bottom: 10px;
  }
   .rooms-wrapper .room:nth-child(2):before, .rooms-wrapper .room:nth-child(3):before, .rooms-wrapper .room:nth-child(4):before {
     left: 3px;
     transform: rotate(5deg);
  }
}
 .show-mob {
   display: none;
}
 .hide-mob {
   display: flex;
}
 @media (max-width: 900px) {
   .login.pop {
     width: 100%;
     max-width: 100%;
  }
   .login.pop .frame {
     display: none;
  }
   .login.pop .username-title {
     font-size: 14px;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
  }
   .login.pop .username-title #username-display {
     margin-bottom: 0;
  }
   .popup .inner {
     width: 100%;
  }
   .popup .inner .content {
     padding: 20px;
  }
   .show-mob {
     display: flex;
  }
   .hide-mob {
     display: none;
  }
   .intro {
     position: relative;
  }
   .intro:before {
     background: linear-gradient(183.53deg, rgba(0, 0, 0, 0.7) 32.63%, rgba(0, 0, 0, 0.21) 37.54%);
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: 1;
  }
   .intro .container {
     position: relative;
     z-index: 2;
     height: 430px;
  }
   .intro .img {
     height: 250px;
  }
   .intro .red-button {
     margin-bottom: 16px;
  }
   .intro .content {
     margin-top: 17px;
     height: auto;
     margin-bottom: 0;
  }
   .intro .content img {
     height: 100px;
  }
   .about-us {
     margin-top: 80px;
  }
   .about-us .content {
     padding: 0;
     background-color: transparent;
     flex-direction: column;
  }
   .about-us .content .desc {
     width: 100%;
     margin-bottom: 16px;
  }
   .about-us .content .desc .social-wrapper {
     margin-bottom: 15px;
  }
   .about-us .content .desc .red {
     font-size: 14px;
     margin-right: 10px;
  }
   .about-us .content .desc .red img {
     top: 0px;
  }
   .about-us .content .desc .title {
     font-size: 16px;
     margin-bottom: 10px;
  }
   .about-us .content .desc .text {
     margin-bottom: 15px;
     display: none;
  }
   .about-us .content iframe {
     width: 100%;
     height: 200px;
  }
   h3.h-title {
     font-size: 16px;
     margin-bottom: 15px;
  }
   .tournament-banner {
     margin-top: 20px;
     flex-direction: column-reverse;
     height: auto;
     justify-content: center;
     align-items: center;
     padding: 16px;
  }
   .tournament-banner .cup {
     position: initial;
     height: 156px;
  }
   .tournament-banner .left {
     width: 100%;
  }
   .tournament-banner .title {
     font-size: 14px;
  }
   .tournament-banner .title b {
     font-size: 18px;
  }
   .tournament-banner .text {
     font-size: 14px;
     display: none;
  }
   .tournament-banner .red-button {
     width: 100% !important;
  }
   .youtubers .box {
     width: 150px;
     height: 170px;
  }
   .youtubers .box .img {
     width: 75px;
     height: 75px;
  }
   .youtubers .box .title {
     font-size: 14px;
  }
   .youtubers .head .h-title {
     font-size: 16px;
  }
   .see-all {
     font-size: 12px;
  }
   .mvp-players {
     background: #1b1b1b;
     padding: 18px 0;
  }
   .mvp-players .head .title {
     font-size: 16px;
  }
   .mvp-players .mvp-player {
     width: 150px;
     padding: 10px;
     font-size: 12px;
  }
   .mvp-players .mvp-player .img {
     width: 75px !important;
     height: 75px;
  }
   .mvp-players .mvp-player .crown {
     width: 20px !important;
     right: 10px;
     top: 12px;
  }
   .mvp-players .mvp-player .cup {
     font-size: 14px;
  }
   .mvp-players .mvp-player .cup img {
     width: 20px !important;
  }
   .mvp-players .mvp-player .cup span {
     font-size: 12px;
  }
   .mvp-players .mvp-player .red-button {
     font-size: 12px;
  }
   .tables {
     padding-top: 70px;
  }
   .tables .back {
     display: none;
  }
   .tables .top {
     gap: 10px;
     align-items: center;
     margin-bottom: 10px;
  }
   .tables .top .red-button {
     width: fit-content;
     height: 34px;
     font-size: 13px;
     padding: 0 10px;
  }
   .tables .balance {
     font-size: 12px;
  }
   .tables .balance span mark {
     font-size: 20px;
  }
   .table-wrap {
     margin-bottom: 5px;
  }
   .tables .table-wrap .grid {
     grid-template-columns: 1fr;
     gap: 5px;
  }
   .table-wrap .select {
     margin-bottom: 5px;
  }
   .table .players {
     transform: scale(0.55);
  }
   .table .head {
     padding: 0 10px;
     top: 10px;
  }
   .table .buyin {
     font-size: 12px;
  }
   .table .bottom {
     padding: 0 10px;
     bottom: 10px;
  }
   .table .red-button, .table .green-button {
     font-size: 12px;
     height: 29px;
     padding: 0 10px;
  }
}
 .book-table .inner {
   width: 570px;
   max-width: calc(100% - 20px);
}
 .book-table .close-button {
   right: 15px;
   top: 15px;
}
 .book-table .content {
   width: 100%;
   padding: 30px;
   max-height: calc(100dvh - 70px);
   overflow-y: scroll;
}
 .book-table .content::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}
 .book-table .content::-webkit-scrollbar-track {
   background: #0f0f0f;
}
 .book-table .content::-webkit-scrollbar-thumb {
   background-color: #d21616;
   border-radius: 8px;
}
 .book-table .content::-webkit-scrollbar-thumb:hover {
   background-color: #b91414;
  /* slightly darker red */
}
 .book-table .content .title {
   text-align: left;
   justify-content: flex-start;
}
 .book-table li {
   font-size: 14px;
   color: #a4a4a4;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
}
 .book-table li span {
   color: #fff;
   font-size: 14px;
   padding-left: 5px;
}
 .book-table li .line {
   text-decoration: line-through;
   color: #a4a4a4;
}
 .book-table li .money {
   color: #22c55e;
}
 .book-table .sm {
   margin-bottom: 15px;
   font-size: 14px;
   margin-top: 15px;
   display: flex;
   gap: 5px;
   text-align: left;
   align-items: center;
}
 .book-table .number-wrapper {
   display: flex;
   gap: 5px;
   justify-content: flex-start;
}
 .book-table .number-wrapper input {
   border-radius: 3px;
   width: 100px;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #1b1b1b;
   font-size: 14px;
   color: #fff;
   padding-top: 3px;
   border: 1px solid rgba(255, 255, 255, 0.4);
}
 .book-table .number-wrapper button {
   width: 30px;
   background-color: #1b1b1b;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   border-radius: 3px;
   font-size: 12px;
   border: 1px solid rgba(255, 255, 255, 0.4);
}
 .book-table .dropdown {
   margin-bottom: 15px;
   padding-bottom: 15px;
   border-bottom: 1px solid #a4a4a4;
}
 .book-table .dropdown .result {
   top: calc(100% - 15px);
}
 .book-table .info {
   font-size: 12px;
   display: flex;
   align-items: center;
   gap: 5px;
   color: #d21515;
   justify-content: center;
   margin-bottom: 15px;
}
 .book-table .red-button {
   margin-bottom: 15px;
}
 @media (max-width: 900px) {
   .book-table .inner {
     max-height: calc(100vh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
   .book-table .content {
     padding: 15px;
     padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
     padding-top: calc(15px + env(safe-area-inset-top)) !important;
  }
   .book-table .close-button {
     right: 25px;
     top: 25px;
  }
}
 .dropdown {
   position: relative;
}
 #voucher-info {
   display: none !important;
}
 .dropdown .select {
   background-color: rgba(255, 255, 255, 0.05);
   height: 46px;
   padding: 0 15px;
   font-size: 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
   width: 100%;
}
 .dropdown .mvp-voucher-option {
   border: none !important;
   background-color: transparent !important;
   color: #fff !important;
}
 #selected-voucher-name {
   line-height: 14px;
}
 .dropdown .select img {
   width: 24px;
}
 .dropdown.active .select {
   border-radius: 5px 5px 0 0;
}
 .dropdown .result {
   position: absolute;
   top: 100%;
   max-height: 150px;
   overflow-y: scroll;
   background-color: #1b1b1b;
   width: 100%;
   display: none;
}
 .dropdown .result::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}
 .dropdown .result::-webkit-scrollbar-track {
   background: #0f0f0f;
}
 .dropdown .result::-webkit-scrollbar-thumb {
   background-color: #d21616;
   border-radius: 8px;
}
 .dropdown .result li {
   cursor: pointer;
   padding: 5px 15px;
   font-size: 14px;
   color: #fff;
   transition: 0.2s;
   text-align: left;
   font-weight: normal !important;
}
 .dropdown .result li:hover {
   padding-left: 17px;
   color: #d21515;
}
 .confirmation.popup .inner {
   width: 500px;
   min-height: 200px;
}
 .confirmation.popup .content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 15px;
   height: 100%;
   font-size: 16px;
   color: #22c55e;
}
 .confirmation.popup .red-button {
   margin-top: 30px;
   width: 375px;
   max-width: 100%;
}
.confirmation.popup .wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  gap: 5px;
  font-size: 16px;
  color: #fff;
  padding-top: 15px;
}
.confirmation.popup .wrap img{
  height: 24px;
}
.confirmation.popup .text{
  font-size: 16px;
  color: #fff;
}
/*# sourceMappingURL=style.css.map */
 .intro:before {
   content: "";
   height: 70px;
   width: 100%;
   background: rgba(0, 0, 0, 0.4);
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}
 .youtubers .box {
   border: none;
}
 .mvp-player {
   border: none;
}
 header {
   background-color: #0f0f0f;
   top: 0;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
   border: none !important;
}
 .invalid-feedback {
   height: fit-content;
   pointer-events: none;
}
 .login.pop .alert.alert-danger .btn-close {
   display: none;
}
 .login.pop .alert.alert-dismissible {
   font-size: 12px;
   height: fit-content;
   margin-top: 10px;
   min-height: fit-content;
   margin-bottom: 10px;
}
 .user .profile-activation .flex {
   display: flex;
   font-size: 14px;
   gap: 5px;
   align-items: flex-start;
   margin-bottom: 20px;
}
.user-pill {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
}
.user-pill .user-id{
  font-size: 12px;
  color: #8d8d8d;
  span{
    color: #fff;
    font-size: 13px;
  }
}
 .user-pill button {
   border-radius: 50%;
   overflow: hidden;
   width: 50px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #1b1b1b;
   cursor: pointer;
   padding: 0;
}
 .user-pill button img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
 .user-pill .dropdown-menu {
   display: none;
   position: absolute;
   top: 100%;
   right: 0;
   background-color: #0f0f0f;
   border-radius: 5px;
   padding: 10px;
   width: 200px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}
 .user-pill .dropdown-menu a {
   color: #fff;
   font-size: 12px;
   display: block;
   padding: 8px 10px;
   text-decoration: none;
   border-radius: 5px;
   text-align: right;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
}
 .user-pill .dropdown-menu a:hover {
   background-color: #1b1b1b;
}
 .user-pill .frame {
   width: 20px;
   height: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
}
 .user-pill .frame img {
   max-width: 20px;
   max-height: 20px;
}
 .time-remaining {
   display: flex;
   align-items: center;
   justify-content: center;
}
 #voucher-info .info {
   justify-content: space-between;
   flex-wrap: nowrap;
}
 #voucher-info .info div {
   width: 100%;
}
 #voucher-info .info div strong {
   display: block;
   font-size: 12px;
   color: #a4a4a4;
}
 #voucher-info .info div span {
   font-size: 14px;
   color: #fff;
}
 .dropdown.leader {
   width: fit-content;
   margin-bottom: 10px;
}
 .leaderboard .leaderboard-month-dropdown-wrap {
   position: relative;
   z-index: 100;
}
 .leaderboard .leaderboard-month-dropdown-wrap.active .result {
   z-index: 101;
}
 .points.sub {
   width: fit-content;
   border-radius: 20px;
   height: 24px;
   font-size: 12px;
   background-color: var(--red);
   display: flex;
   align-items: center;
   color: #fff !important;
   margin-top: 5px;
   padding: 0 10px;
   position: relative;
   left: -3px;
   top: 4px;
}
 .tournament-list-page {
   min-height: calc(100vh - 420px);
   padding-top: 100px;
}
 .tournament-list-page .grid {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(3, 1fr);
}
 .tournament-list-page .tournament-card {
   padding: 10px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
}
 .tournament-list-page .tournament-card .red-button {
   margin-top: 10px;
}
 .tournament-list-page .tournament-card .title {
   font-size: 14px;
   color: var(--red);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 6px;
}
 .tournament-list-page .tournament-card .status {
   height: 22px;
   font-size: 10px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   padding: 0 5px;
   background-color: #0f0f0f;
   color: #fff;
}
 .tournament-list-page .tournament-card.active .status {
   background-color: var(--red);
}
 .tournament-list-page .tournament-card .li {
   font-size: 12px;
   color: #a4a4a4;
   display: flex;
   gap: 4px;
   align-items: center;
   margin-bottom: 5px;
}
 .tournament-list-page .tournament-card .li img {
   width: 25px;
}
 @media (max-width: 900px) {
   .about-us {
     margin-top: 30px;
  }
   .intro .content {
     margin-bottom: 90px;
  }
   .about-us .content .desc .text {
     display: none;
  }
   .about-us .content .desc .red-button {
     display: none;
  }
   .about-us .content .red-button {
     margin-top: 15px;
  }
}
 @media (max-width: 768px) {
   .tournament-list-page {
     padding-top: 0;
  }
   .tournament-list-page .grid {
     grid-template-columns: 1fr 1fr;
  }
}
 @media (max-width: 600px) {
   .tournament-list-page .grid {
     grid-template-columns: 1fr;
  }
}