@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

p {
  margin: 0;
}

img {
  display: block;
  vertical-align: middle;
}

button {
  padding: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

:root {
  --Black-box-stroke: #303030;
  --grey1: #5c5c5c;
  --grey2: #b9b9b9;
  --grey5: #e8e8e8;
  --grey-6: #303030;
  --red-color: #ff1d1d;
  --golden-90: #f8e889;
  --color2: #e4b764;
  --color3: #1a1a1a;
  --BGcolor: #f4f5f7;
  --bg-white-GD-ver3: linear-gradient(180deg, #ffffff 0%, #eeeeee 100%);
  --bg-golden-180: linear-gradient(
    180deg,
    var(--golden-90) 0%,
    var(--color2) 100%
  );
  --bg-bg-login: linear-gradient(180deg, #b9b9b9 0%, #fff 1.29%);
  --bg-dark-liveroom: linear-gradient(270deg, #fff3ad 50%, #f8e889);
  --Signal-RedGD: linear-gradient(180deg, #ff6761 0%, #ff1d1d 100%);
  --bg-black-GD: linear-gradient(180deg, #565656 0%, #000 100%);
  --bg-white-GD: linear-gradient(180deg, #fff 0%, #eee 100%);
  --shadow-box-sd1: 0px 124px 35px 0px rgba(0, 0, 0, 0),
    0px 79px 32px 0px rgba(0, 0, 0, 0.01), 0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09), 0px 5px 11px 0px rgba(0, 0, 0, 0.1);
  --shadow-box-sd2: 0px -73px 20px 0px rgba(0, 0, 0, 0),
    0px -47px 19px 0px rgba(0, 0, 0, 0.01),
    0px -26px 16px 0px rgba(0, 0, 0, 0.05),
    0px -12px 12px 0px rgba(0, 0, 0, 0.09), 0px -3px 6px 0px rgba(0, 0, 0, 0.1);
  --shadow-league-mable: 0px 4px 26.7px 0px rgba(0, 0, 0, 0.05) inset,
    0px 4px 26.4px 0px rgba(0, 0, 0, 0.15) inset,
    2px 4px 7.4px 0px rgba(0, 0, 0, 0.15) inset;
  --shadow-content-box: 2px 4px 7.4px 0px #00000026 inset,
    0px 4px 26.4px 0px #00000026 inset, 0px 4px 26.7px 0px #0000000d inset;
}

.hover-border-color2:hover,
.border-color2 {
  border-color: var(--color2);
}

.border-white {
  border-color: #fff;
}

.bg-golden-180 {
  background-image: var(--bg-golden-180);
}

.gradient-text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.bg-bg-white {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255) 0%,
    rgba(255, 255, 255) 10%
  );
}

.bg-bg-fb {
  background-image: linear-gradient(270deg, #0866ff 0%, #1877f2 100%);
}

.bg-black-GD {
  background-image: var(--bg-black-GD);
}

.bg-grey-button {
  background-image: linear-gradient(180deg, #b9b9b9 0%, #5c5c5c 100%);
}

.bg-bg-login-light {
  background-image: url("https://demnay.media/emoji/Login_Light.webp");
}

.bg-white-GD {
  background-image: var(--bg-white-GD);
}

.bg-button-register {
  background-image: linear-gradient(180deg, #e4b764 0%, #f8e889 9%);
}

.bg-golden-180 {
  background-image: var(--bg-golden-180);
}

.border-color2 {
  border-color: var(--color2);
}

.border-grey1 {
  border-color: var(--grey1);
}

.truncate-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cursor-pointer {
  cursor: pointer;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;

  position: absolute;
  z-index: 1;
  top: 125%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.hidden {
  display: none;
}

.bg-bg-tabChatCenter-dark {
  background-image: url("https://demnay.media/ChatPage/Icon/darkbut.svg");
}
.bg-bg-tabChatLefT-dark {
  background-image: url("https://demnay.media/ChatPage/Icon/darkbut1.svg");
}
.bg-bg-tabChatRight-dark {
  background-image: url("https://demnay.media/ChatPage/Icon/darkbut2.svg");
}

.bg-bg-record {
  background-image: url("https://demnay.media/ChatPage/Icon/record.gif");
}
.bg-bg-record-pause {
  background-image: url("https://demnay.media/ChatPage/Icon/record.svg");
}

.bg-signal-RedGD {
  background-image: var(--Signal-RedGD);
}

.custom-bg-reply {
  background-color: rgba(185, 185, 185, 0.3);
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar:not(.not-show-scrollbar)::-webkit-scrollbar {
  display: block;
}

.hide-scrollbar:not(.not-show-scrollbar) {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}

::-webkit-scrollbar {
  width: 10px;
  height: 12px;
  border-radius: 5px;
  max-height: 100px !important;
  background: #1a1a1a;
}

::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 5px;
  max-height: 100px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #f8e889 0%, #e4b764 100%);
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#appMatchLive,
#appschedule,
#appscheduletoday,
#app,
#appranking {
  font-family: "Roboto", sans-serif;
}
.matchList,
.hotList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.matchList .matchItem {
  width: 46%;
  padding: 10px;
  margin-bottom: 1rem;
}
.matchItem a {
  text-decoration: none !important;
}
.matchDetail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 15px;
  background: #fff
    url("https://image.naybank.com/demnaylive/20240514/d1de6fc5e3fb493d0a933c713edce7d3.jpg")
    no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 3px solid var(--color2);
}
.buttonMore {
  width: 100%;
  color: #000;
  background-image: var(--bg-golden-180);
  border: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 50px;
}
.matchList .matchDetail {
  height: 200px;
}

.matchName {
  text-align: center;
  width: 180px;
}

.teamName {
  font-size: 12px;
  height: 24px;
  overflow: hidden;
}

.logoTeam {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33.3333333%;
  white-space: normal;
}

.logoTeam img {
  height: 60px;
  width: 60px;
  object-fit: cover;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid #737373;
}

.live-versus {
  height: 70px;
}

.matchTime {
  display: none;
}

.liveTimer .timeCount {
  width: 60px;
  max-width: 60px;
  font: bold 24px "Droid Sans", Arial, sans-serif;
  text-align: center;
  color: #fff;
  background-color: #303244;
  border-radius: 5px 5px 0 0;
  padding-top: 5px;
  display: inline-block;
  position: relative;
}

.liveTimer .timeCount:before {
  content: "";
  width: 100%;
  height: 5px;
  background: #111;
  display: block;
  padding: 0 3px;
  position: absolute;
  top: 42%;
  left: -3px;
  z-index: -1;
}

.liveTimer .timeCount:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #363636;
  border-top: 1px solid #333;
  display: block;
  position: absolute;
  top: 52%;
  left: 0;
}

.timeWrap {
  display: inline-block;
  margin-right: 5px;
  box-shadow: 0px 0px 5px 5px #0000002e;
}

.timeTitle {
  text-align: center;
  text-transform: uppercase;
  background: #05050c;
  color: #515151;
  border-radius: 0 0 5px 5px;
  position: relative;
}

.timeTitle:after {
  content: "";
  width: 15px;
  height: 2px;
  background: red;
  position: absolute;
  bottom: 0;
  left: 24px;
}

.matchList .matchDetail:hover {
  transition-duration: 0.2s;
  transform: scale(1.04);
  /*box-shadow:*/
  /*   0 0 20px 2px #680a8773, 0 0 10px 0px #018e3870;*/
}

.matchStart {
  width: 100%;
  text-align: center;
}

.matchHour {
  margin: 0 auto;
  font-size: 12px;
  background: #f8e889;
  padding: 0 5px;
  border-radius: 5px;
  width: fit-content;
  color: #000;
  font-weight: 500;
}

.matchDate {
  width: 100%;
  text-align: center;
}

.btnAction {
  align-items: center;
  display: flex;
  height: 35px;
  width: 100%;
  margin-top: 1rem;
  justify-content: space-around;
  border-radius: 10px;
  border-top: 3px solid var(--color2);
  background: var(--bg-golden-180);
}

.matchList .btnAction {
  margin-top: 1px;
}
.blvnameUser,
.teamName,
.matchLeague {
  font-weight: bold;
  color: #000;
}
.watchLive {
  background: #c82323;
  padding: 5px 10px;
  border-radius: 5px;
  line-height: 24px;
  color: #fff;
  margin-top: 10px;
}

.betLive {
  background: #ca6411;
  padding: 5px 10px;
  border-radius: 5px;
  line-height: 24px;
  color: #fff;
}

.watchLive:hover {
  color: #fff;
  background: #af1e1e;
}

.betLive:hover {
  color: #fff;
  background: #994b0d;
}

.bg-bg-head-1 {
  background-image: linear-gradient(
    180deg,
    var(--color2) 0.35%,
    #f8e889 13.91%
  );
  position: relative;
  width: 100%;
  height: 25px;
  border-radius: 20px;
}

.matchLeague {
  margin-bottom: 10px;
  width: 80%;
  text-align: center;
  margin-top: -4px;
  border-radius: 0px 0px 20px 20px;
  background: rgba(255, 255, 255, 0.5);
  padding: 5px 10px;
  font-weight: 500;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.matchList .matchDetail:hover .btnAction {
  border-radius: 10px;
  border-top: 3px solid #eee;
  background: linear-gradient(180deg, #fff 36%, #a8a6a6 100%);
}
.MatchRun {
  border-radius: 5px;
  background: linear-gradient(181deg, var(--color2) -8.1%, #f8e889 3.95%);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.16);
  width: 45px;
  padding: 3px;
  text-align: center;
}

.aboutTime {
  color: #1a1a1a;
  font-weight: bold;
}

.blvliveiconimg {
  width: 60px;
  height: 20px;
}

.blink-1 {
  -webkit-animation: blink-1 1.5s infinite both;
  animation: blink-1 1.5s infinite both;
}
.blvphotoUser,
.blvliveicon {
  display: flex;
  justify-content: center;
  align-items: center;
}
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@media (max-width: 665px) {
  .matchList .matchItem {
    width: 100%;
    padding: 0;
  }

  .logoTeam {
    width: calc(45% - 20px);
  }
  .scoreInfo {
    width: 100%;
  }
}

@media (min-width: 665px) and (max-width: 768px) {
  .matchList .matchItem {
    width: 50%;
    padding: 0;
  }

  .logoTeam {
    width: calc(45% - 20px);
  }
  .scoreInfo {
    width: 100%;
  }
}

.blvImg {
  width: 25px;
  height: 25px;
  border-radius: 55px;
  border: 1px solid #fff;
}
.bg-Live-box2 {
  background-image: linear-gradient(180deg, var(--color2), #f8e889);
  height: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
/* Room Live */
.container__live {
  max-width: 1420px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.roomBgLive {
  background-image: url("https://demnay.media/Main_BG.webp");
}

.roomBgLive-mt-81 {
  margin-top: 81px;
}

.box-sd1 {
  box-shadow: 0px 124px 35px 0px rgba(0, 0, 0, 0),
    0px 79px 32px 0px rgba(0, 0, 0, 0.01), 0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09), 0px 5px 11px 0px rgba(0, 0, 0, 0.1);
}
/* .container {
  width: 100%;
  height: 100%;
} */

.content-wrapper {
  width: 100%;
  padding: 0 16px;
}

/* .header {
  width: 100%;
  background: url("bg-Header-liveschude.jpg") center center / cover;
  height: 60px;
}

@media (min-width: 768px) {
  .header {
    height: 80px;
    background: url("bg-header-odd.jpg") center center / cover;
  }
} */

.header-content {
  max-width: 1440px;
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

.logo-left,
.logo-right {
  width: 17%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .logo-left,
  .logo-right {
    width: 166px;
    height: 100%;
  }
}

.logo-container {
  width: 166px;
  height: 55px;
  position: relative;
}

@media (min-width: 768px) {
  .logo-container {
    height: 100%;
  }
}

.image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.center-content {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.bg-color-bg-chatr {
  background-image: linear-gradient(
    169deg,
    #fff 12.91%,
    #f8e889 30.47%,
    #e4b764 92.82%
  );
}

.roomBgLive {
  .first-bg {
    background-image: url("https://demnay.media/bgmain.avif"); /* Replace with your actual background */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
  }

  .live-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .live-content-inner {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
  }

  .live-header {
    display: flex;
    position: relative;
    justify-content: center;
    width: 100%;
    height: 60px;
    background-image: url("https://demnay.media/Header-liveschude.png");
    background-position: center;
    background-size: cover;
  }
  .live-header-inner {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
  }

  .img-owl {
    width: 17%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .img-owl-inner {
    position: relative;
    width: 166px;
    height: 55px;
  }

  .live-header-title {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
  }

  .live-header-title-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.625rem;
    width: 66.666667%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .live-header-title-inner-content {
    position: relative;
    width: 100%;
    height: 2.5rem;
    border: 1px solid;
    border-top-width: 2px;
    background-image: var(--bg-golden-180);
    border-color: var(--color2);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top: 10px;
    border-bottom: none;
  }

  .live-header-title-inner-content h2 {
    display: none;
  }

  .live-body {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .live-body-inner {
    width: 100%;
    height: 100%;
  }

  .live-body-stroke {
    display: none;
    height: 15px;
    border-top-width: 2px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-color: var(--color2);
  }

  .live-body-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    background-color: var(--BGcolor);
    position: relative;
  }
  .stream-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    column-gap: 0.625rem; /* 2.5px */
  }

  .chat-content {
    width: 100%;
    height: 100%;
  }

  .stream-info {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
  }

  .stream-info-host {
    width: 100%;
    height: 100%;
    padding-right: 5px;
  }

  .info-host-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
  }

  .host-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    max-width: 80px;
    height: 80px;
  }

  .host-avatar-img {
    width: 100%;
    height: 100%;
    position: relative;
    border: 2px solid var(--color2);
    box-shadow: var(--shadow-box-sd1);
    border-radius: 9999px;
  }

  .host-avatar-img img {
    position: relative;
    border-radius: 9999px;
    background-color: white;
    box-shadow: var(--shadow-box-sd1);
  }

  .host-detail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 160px;
    gap: 5px;
    padding-left: 3px;
    padding-right: 3px;
  }

  .host-name {
    box-shadow: var(--shadow-box-sd1);
    line-height: 15px;
    border: 1px solid var(--color2);
    max-height: 30px;
    width: 100%;
    background-image: var(--bg-black-GD);
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    height: 45%;
  }

  .host-name span {
    font-weight: bold;
  }

  .host-room {
    height: 20%;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    gap: 4px;
    display: none;
  }

  .host-room-id {
    display: flex;
    justify-content: center;
    gap: 2px;
    align-items: center;
    white-space: nowrap;
  }

  .host-room-id span {
    font-weight: bold;
    font-size: 12px;
    background-color: var(--Black-box-stroke);
  }

  .host-follow {
    height: 45%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--BGcolor);
    border-radius: 20px;
    box-shadow: var(--shadow-box-sd1);
    max-height: 30px;
  }

  .follow-btn {
    cursor: pointer;
    background-image: var(--bg-golden-180);
    border: 1px solid var(--color2);
    color: var(--color3);
    font-size: 10px;
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 20px;
    text-align: center;
    border-style: solid;
    text-wrap: nowrap;
    font-size: 12px;
  }

  .follow-count {
    text-align: center;
    color: var(--color3);
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .follow-count span {
    font-weight: bold;
  }

  .odds-info {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .odds-info-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .odds-info-inner-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .odds-info-team {
    width: 33.333333%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .odds-info-team.team-a {
    border-top-left-radius: 100px;
  }

  .team-b-inner {
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, #e4b764 0%, #f8e889 100%);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
  }

  .team-a-inner {
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, #e4b764 0%, #f8e889 100%);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }

  .boxTeamA,
  .boxTeamB {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #565656, #000);
    box-shadow: var(--shadow-box-sd1);
  }

  .boxTeamA {
    justify-content: flex-end;
    border-top-right-radius: 120px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    padding-right: 2px;
  }

  .boxTeamB {
    justify-content: flex-start;
    border-top-left-radius: 120px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    padding-left: 2px;
  }

  .nameTeamA,
  .nameTeamB {
    padding-left: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    font-size: 12px;
    color: var(--golden-90);
    font-weight: bold;
    text-align: center;
    grid-column: span 8 / span 8;
    line-height: 1rem;
  }

  .nameTeamB {
    justify-content: flex-start;
  }

  .nameTeamA span {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .nameTeamB span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .img-flag {
    min-width: 40px;
    height: 100%;
    position: relative;
  }

  .img-flag img {
    background-color: white;
    border-radius: 9999px;
  }

  .boxTeamA .img-flag {
    margin-left: 10px;
  }

  .boxTeamB .img-flag {
    margin-right: 10px;
  }

  .odds-center-content {
    width: 33.333333%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: linear-gradient(
      to bottom,
      var(--color2) 0%,
      var(--golden-90) 50%,
      var(--color2) 100%
    );
  }

  .leagueName {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: var(--color3);
    width: 100%;
    height: 16.666667%;
    font-weight: bold;
    line-height: 1;
  }

  .leagueName-text-short {
    font-size: 12px;
  }

  .leagueName.text-20 {
    font-size: 20px;
  }

  .leagueName-custom {
    line-height: 16px;
    padding-top: 9px;
  }

  .score-match {
    font-size: 36px;
    width: 100%;
    height: 50%;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color3);
  }

  .odds-rate {
    height: 16.666667%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .odds-rate-img {
    height: 100%;
    width: 100%;
    position: relative;
  }

  .change-odds {
    height: 16.666667%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .change-odds-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    position: relative;
  }

  .wrap-btn {
    width: 12.5px;
    height: 100%;
    position: relative;
  }

  .wrap-btn img {
    padding: 0 2px;
  }

  .center-company {
    width: 60px;
  }

  .center-company span {
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .odds-detail {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 0.125rem;
    align-items: center;
  }

  .odds-detail-teamA {
    justify-content: center;
  }

  .odds-detail-teamB {
    justify-content: space-evenly;
  }

  .odds-detail-inner {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }

  .odds-detail-inner-content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.125rem;
  }

  .odds-rate-detail-inner {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .odds-rate-detail-inner.odds-start {
    justify-content: flex-start;
  }

  .odds-start.text-12 {
    font-size: 12px;
  }

  .odds-rate-detail-inner.odds-center {
    justify-content: center;
  }

  .odds-rate-detail-inner .text-12 {
    font-size: 12px;
  }

  .odds-detail-title {
    width: 33.333333%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color3);
  }

  .odds-detail-title span {
    background-color: var(--Black-box-stroke);
    font-weight: bold;
    font-size: 12px;
  }

  .odds-rate-detail {
    width: 66.666667%;
    max-width: 100px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    box-shadow: var(--shadow-box-sd1);
    background-image: var(--bg-white-GD-ver3);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .wrapper-polygon {
    display: flex;
    flex-direction: row;
    gap: 0.125rem;
  }

  .img-polygon {
    height: 0.625rem;
    width: 100%;
    min-width: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content-company span {
    font-weight: bold;
  }

  .odds-rate-show {
    height: 0.625rem;
    line-height: 10px;
    color: var(--color3);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
  }

  .liveroom-stream {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .live-video-player {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .video-wrapper {
    position: absolute;
    bottom: -3px;
    right: 40px;
    width: 30px;
    height: 40px;
    cursor: pointer;
    z-index: 99999;
    border: none;
    background: none;
  }

  .pip-btn {
    position: relative;
    padding: 0.25rem;
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: none;
  }

  .video-container:hover .pip-btn {
    display: block;
  }

  .box-play-liveroom {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    position: relative;
  }

  .box-play-liveroom-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
  }

  .box-play-liveroom-inner > img {
    inset: 0;
    border-radius: 0px;
    border: 2px solid white;
  }

  .box-match-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .box-match-time {
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .box-match-logo {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  .box-match-league {
    height: 60%;
    min-height: 30px;
    max-height: 68px;
    border: 1px solid var(--color2);
    background-image: var(--bg-golden-180);
    padding: 1px;
    box-shadow: var(--shadow-box-sd1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: black;
    text-transform: uppercase;
    border-radius: 5px;
    font-size: 16px;
  }

  .box-league-name {
    width: 150px;
    height: 100%;
    font-weight: bold;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align: center;
    padding: 2px;
  }

  .box-league-time {
    height: 100%;
    background-image: var(--bg-black-GD);
    border: 1px solid var(--color3);
    box-shadow: var(--shadow-box-sd1);
    border-radius: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 2px;
  }

  .box-time-detail {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  .line-split {
    width: 3px;
    height: 80%;
    background-image: var(--bg-white-GD);
    border-radius: 10px;
  }

  .box-match-vs {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50%;
    justify-content: center;
    gap: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  .box-match-team {
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box-match-team-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .box-match-team-flag {
    position: relative;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 9999px;
  }

  .box-match-team-flag img {
    border-radius: 9999px;
  }

  .box-match-team-name {
    text-align: center;
    background-image: var(--bg-golden-180);
    font-weight: bold;
    text-transform: uppercase;
    min-width: 150%;
    width: 150%;
    line-height: 1;
  }

  .match-commentator {
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 5px;
  }

  .match-commentator-inner {
    display: flex;
    height: 75%;
    max-height: 40px;
    border-radius: 9999px;
    overflow: hidden;
    font-size: 20px;
    padding: 1px;
    background-image: var(--bg-black-GD);
    border: 1px solid var(--color2);
    box-shadow: var(--shadow-box-sd1);
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1;
  }

  .match-commentator-prefix {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    padding-left: 20px;
    padding-right: 20px;
  }

  .match-commentator-name {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 3px;
    background-image: var(--bg-golden-180);
    color: var(--color3);
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: var(--shadow-box-sd1);
    border-radius: 10px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    font-size: 15px;
  }

  .chat-content {
    .chat-wrapper {
      height: auto;
      padding-left: 5px;
      padding-right: 5px;
      width: 100%;
      bottom: 0;
      left: 0;
      background-color: #f4f5f7;
    }

    .chat-wrapper-inner {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      height: 100%;
      position: relative;
      box-shadow: var(--shadow-box-sd1);
      border-radius: 15px;
    }

    .chat-tabs {
      display: none;
      min-height: 40px;
      width: 100%;
      background-image: var(--bg-golden-180);
      border: 1px solid #ffffff;
      border-bottom: 0;
      border-radius: 15px;
      overflow: hidden;
      font-size: 20px;
    }

    .chat-tabs-default {
      position: absolute;
      top: 0;
      height: 40px;
      transition-property: all;
      transition-duration: 500ms;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .chat-tab-default-options {
      background-position: center;
      background-repeat: no-repeat;
    }

    .chat-tab-default-options.tab-chat {
      left: 0;
      width: 29%;
    }

    .chat-tab-default-options.tab-top-fan {
      left: 20%;
      width: 35%;
    }

    .chat-tab-default-options.tab-top-qua {
      left: 46%;
      width: 35%;
    }

    .chat-tab-default-options.tab-tip-keo {
      left: 71%;
      width: 30%;
    }

    .tab-base {
      width: 25%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      z-index: 20;
      transition-property: all;
      transition-duration: 300ms;
      gap: 0.125rem;
    }

    .tab-base.tab-base-active {
      color: white;
      transition: none;
    }

    .tab-base.tab-base-recently-active {
      border-radius: 15px;
    }

    .tab-base.tab-base-inactive {
      background-image: var(--bg-white-GD);
      border: 1px solid #ffffff;
      box-shadow: var(--shadow-box-sd1);
      border-radius: 15px;
      color: black;
    }

    .tab-base {
      .tab-icon {
        width: 25px;
        height: 25px;
        margin-top: 0.25rem;
      }

      .tab-icon img {
        transition-property: all;
        transition-duration: 300ms;
      }

      .tab-label {
        font-weight: bold;
        color: var(--color3);
        margin-top: 0.25rem;
      }
    }

    .chat-logo {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
    }

    .tab-container {
      height: 100%;
      width: 100%;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-end;
      background-color: white;
      overflow: hidden;
    }

    .chat-list-detail {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-radius: 15px;
      border: 1px solid white;
      overflow-x: hidden;

      .list-chat-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        width: 100%;
        background-color: var(--BGcolor);
        gap: 5px;
        padding-left: 3px;
        padding-right: 3px;
        position: relative;
      }

      .list-chat-wrapper > .list-chat-box {
        overflow: hidden;
        width: 100%;
        height: 100%;
      }

      .list-chat-box-padding-x {
        padding: 0 0.5rem;
      }

      .list-chat-box-padding-x:has(.hidden) {
        height: 0;
      }

      .list-chat-inner {
        display: flex;
        flex-direction: column-reverse;
        box-shadow: var(--shadow-content-box);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        justify-content: flex-start;
        position: relative;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 100%;
        max-height: 590px;
      }

      .chat-item {
        width: 100%;
        height: 100%;
        position: relative;
        max-width: 100%;
        cursor: pointer;
        padding-bottom: 10px;
      }

      .chat-item.padding-b-5 {
        padding-bottom: 5px;
      }

      .chat-item-inner {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        position: relative;
        padding-right: 5px;
      }

      .chat-item-inner-other {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        gap: 5px;
      }

      .chat-item-inner-other.background-white {
        background-color: white;
        border-radius: 10px;
      }

      .chat-item-inner-other.background-none {
        background: none;
      }

      .chat-item-left {
        position: relative;
        height: 100%;
      }

      .chat-item-right {
        width: 8.333333%;
        max-width: 35px;
        position: relative;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
      }

      .chat-item-other-right {
        width: 8.333333%;
        max-width: 35px;
        position: relative;
        height: 100%;
        min-height: 35px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 3px;
      }

      .chat-item-left-inner {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
      }

      .chat-item-left-detail {
        max-height: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        color: var(--color3);
        font-weight: bold;
      }

      .chat-item-left-detail-inner {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 100%;
        padding-right: 5px;
        gap: 3px;
      }

      .chat-item-left-detail-time {
        font-size: 9px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 100%;
      }

      .chat-item-left-name {
        width: 100%;
        max-height: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        color: var(--grey1);
        font-weight: bold;
        height: 100%;
        line-height: 15px;
        font-size: 13px;
      }

      .chat-item-left-name-other {
        display: flex;
        align-items: flex-end;
        height: 100%;
        line-height: 15px;
        justify-content: flex-end;
        font-weight: bold;
        padding-left: 3px;
      }

      .chat-item-left-reply {
        height: 100%;
        color: var(--grey1);
        padding-left: 5px;
        font-size: 10px;
      }

      .chat-item-left-reply-other {
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        color: var(--grey1);
      }

      .chat-item-left-reply-other span:first-child {
        font-size: 10px;
      }

      .chat-item-left-reply-other span:last-child {
        font-weight: 500;
        font-size: 10px;
        padding-left: 3px;
      }

      .chat-item-left-reply span:first-child,
      .chat-item-left-reply-other span:first-child {
        font-style: italic;
      }

      .chat-item-left-reply span:last-child {
        padding-left: 5px;
        font-weight: 500;
      }

      .chat-item-left-badge {
        min-width: 28px;
        width: 28px;
        height: 13px;
        border: 0.5px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2px;
        border-radius: 3px;
        box-shadow: var(--shadow-box-sd1);
        font-size: 10px;
        font-weight: bold;
        color: white;
      }

      .chat-item-left-badge.margin-b-0 {
        margin-bottom: 0;
      }

      .chat-item-left-reply-icon {
        position: relative;
        max-width: 100%;
        height: 20px;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        color: var(--color3);
        font-size: 12px;
        font-weight: normal;
        line-height: 1rem;
        padding-left: 5px;
        cursor: pointer;
      }

      .chat-item-left-reply-icon-other {
        position: relative;
        max-width: 100%;
        margin-left: 5px;
        height: 20px;
        background-color: var(--BGcolor);
        border-radius: 20px;
        border-bottom-left-radius: 5px;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        color: var(--color3);
        font-size: 12px;
        font-weight: normal;
        line-height: 1rem;
        padding-left: 5px;
        cursor: pointer;
      }

      .chat-item-other-right-inner {
        width: 100%;
        max-width: 35px;
        max-height: 35px;
        min-width: 35px;
        min-height: 35px;
        position: relative;
        border-radius: 50%;
      }

      .img-chat-profile {
        width: 35px;
        height: 35px;
        overflow: hidden;
        object-fit: cover;
        position: relative;
        cursor: pointer;
        border-radius: 50%;
      }

      .chat-item-other-left {
        max-width: 100%;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
      }

      .chat-item-left-reply-icon-inner-other {
        display: flex;
        height: 100%;
        width: 100%;
        min-height: 20px;
        position: relative;
      }

      .chat-item-left-reply-icon-inner {
        display: flex;
        height: 100%;
        position: relative;

        .reply-icon-inner {
          background-color: var(--BGcolor);
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          border-bottom-left-radius: 20px;
          display: flex;
          flex-direction: column;
          padding: 0.25rem;
          width: 100%;
          height: 100%;
        }

        .chat-item-left-attachments {
          height: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
          color: var(--color3);
          font-size: 14px;
          font-weight: normal;

          .chat-w-30 {
            width: 30px;
          }

          .chat-attachments {
            display: flex;
            justify-content: center;
            max-width: 100%;
            align-items: center;
            background-color: var(--grey5);
            border: 1px solid var(--BGcolor);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
          }

          .chat-attachments:hover {
            box-shadow: var(--shadow-box-sd1);
          }

          .chat-attachments-inner {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
            position: relative;
            width: 100%;
            height: 100%;
          }
          .chat-attachments-inner.padding-x-5 {
            padding-left: 5px;
            padding-right: 5px;
          }

          .attachments-audio {
            height: 30px;
          }

          .attachments-audio-inner-play {
            width: 30px;
            height: 100%;
            padding-top: 0.5rem;
          }

          .attachments-audio-inner-play img {
            padding: 5px;
          }

          .attachments-audio-inner-play-bg {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: repeat-x;
            background-position: center;
          }

          .had-attachments > img {
            width: 100px;
            height: 100px;
          }
        }
      }

      .attachments-audio-inner {
        width: 200px;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      .reply-icon-inner-content {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        padding-left: 5px;
        padding-right: 5px;
        width: 100%;
        height: 100%;
      }

      .reply-icon-inner-content-other {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        padding-left: 5px;
        padding-right: 5px;
        width: 100%;
        height: 100%;
      }

      .chat-content-image {
        display: flex;
        justify-content: center;
        align-items: center;
        word-wrap: break-word;
        width: 100%;
        overflow: hidden;
      }

      .chat-content-image-inner {
        width: 100px;
        height: 100px;
      }

      .chat-content-image-original {
        width: 100px;
      }

      .chat-content-text {
        word-wrap: break-word;
        overflow: hidden;
      }

      .chat-content-text-left {
        text-align: end;
      }

      .chat-reply-icon {
        position: absolute;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        color: var(--color3);
        left: -21px;
        bottom: -10px;
      }

      .reply-icon-inner {
        width: 20px;
        height: 15px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 2px;
      }

      .reply-icon-inner-content {
        width: 100%;
        height: 15px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        cursor: pointer;
        border-radius: 10px;
      }

      .reply-icon-other {
        width: 20px;
        margin-left: 4px;
        margin-right: 4px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 2px;
      }

      .reply-icon-other-inner-content {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 10px;
      }

      .reply-btn {
        width: 15px;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }

      .chat-profile-picture {
        width: 100%;
        min-width: 35px;
        max-width: 35px;
        height: 35px;
        position: relative;
        border-radius: 50%;
      }

      .chat-profile-picture img {
        border-radius: 9999px;
      }

      .chat-item-left-detail-other {
        max-height: 20px;
        gap: 3px;
        padding-left: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
      }

      .reply-content-other {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        display: flex;
        flex-direction: column;
        padding: 4px;
        width: 100%;
        height: 100%;
      }

      .attachments-other {
        position: relative;
        max-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        color: var(--color3);
        font-size: 14px;
        font-weight: normal;
        line-height: 1rem;
        padding: 2px;
        padding-left: 5px;
      }

      .attachments-other-left {
        justify-content: flex-end;
        align-items: flex-end;
      }

      .attachments-other-inner {
        display: flex;
        max-width: 100%;
        height: 100%;
      }

      .attachments-other-inner-left {
        flex-direction: row-reverse;
      }

      .attachments-other-inner.background-white {
        background-color: white;
      }

      .attachments-other-inner-content {
        position: relative;
        border: 1px solid var(--BGcolor);
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        display: flex;
        flex-direction: column;
        padding: 4px;
        width: 100%;
        height: 100%;
      }

      .attachments-other-inner-content-left {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 0px;
        border-top-left-radius: 20px;
      }

      .attachments-other-inner-content:hover {
        box-shadow: var(--shadow-box-sd1);
      }

      .had-attachments-other {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        width: 100%;
        height: 100%;
      }

      .had-attachments {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .welcome-text {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 12px;
        padding-left: 10px;
        padding-bottom: 5px;
      }

      .welcome-text span:first-child {
        font-weight: bold;
        margin-right: 0.25rem;
        font-style: italic;
        color: var(--color2);
      }

      .welcome-text span:last-child {
        color: var(--grey1);
        font-size: 12px;
      }

      .not-welcome-text {
        width: 0;
        height: 0;
        display: none;
      }

      .emoji-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        border-radius: 20px;
      }

      .emoji-inner {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        padding-left: 3px;
        padding-right: 3px;
      }

      .new-chat-container {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-bottom: 3px;
      }

      .new-chat-inner {
        width: 140px;
        height: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        cursor: pointer;
        background-image: var(--bg-golden-180);
        border-radius: 20px;
        box-shadow: var(--shadow-box-sd2);
        border: 1px solid var(--golden-90);
        white-space: nowrap;
        gap: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .new-chat-inner-icon {
        width: 25px;
        height: 100%;
        border-radius: 50%;
        position: relative;
      }

      .new-chat-inner-icon img {
        position: relative;
      }

      .new-chat-inner-text {
        font-weight: bold;
        font-size: 16px;
      }

      .reply-box {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        align-items: flex-start;
        padding-left: 20px;
      }

      .reply-box-inner {
        height: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 14px;
      }

      .reply-box-inner span {
        font-style: italic;
        padding-right: 5px;
        white-space: nowrap;
      }

      .reply-box-name {
        font-weight: bold;
        padding-right: 3px;
        color: var(--grey1);
      }

      .reply-box-content {
        position: relative;
        max-width: 100%;
        height: 20px;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        color: var(--color3);
        font-size: 14px;
        font-weight: normal;
        line-height: 1rem;
        cursor: pointer;
      }

      .reply-box-content-inner {
        display: flex;
        height: 100%;
        position: relative;
      }

      .box-content-reply {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        display: flex;
        flex-direction: column;
        padding: 4px;
        width: 100%;
        height: 100%;

        .detail-reply {
          border-bottom-left-radius: 10px;
          border-top-right-radius: 10px;
          padding-right: 5px;
          width: 100%;
          height: 100%;
        }
      }

      .close-reply {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .close-reply span {
        width: 15px;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }

      .chat-input-area {
        width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 5px;
        column-gap: 8px;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 3px;
        padding-right: 5px;
        background-color: var(--BGcolor);
        border: 1px solid white;
        box-shadow: var(--shadow-box-sd2);
        border-radius: 15px;
      }

      .switch-chat-system {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 10px;
        gap: 10px;
        padding-left: 5px;
        padding-right: 5px;
      }

      .switch-chat-system-inner {
        width: 33.333333%;
        height: 100%;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
      }

      .switch-chat-system-inner > span {
        font-weight: bold;
        background-image: var(--bg-black-GD);
      }

      .switch-chat-system-btn {
        width: 32px;
        height: 16px;
        border: 1px solid;
        cursor: pointer;
        display: flex;
        transition: all 500ms;
        box-shadow: var(--shadow-box-sd1);
        border-radius: 20px;
      }

      .switch-chat-system-btn-active {
        justify-content: flex-end;
        background-image: var(--bg-golden-180);
        border-color: var(--color2);
      }

      .switch-chat-system-btn-inactive {
        justify-content: flex-start;
        background-color: var(--white-GD-ver3);
        border-color: var(--BGcolor);
      }

      .switch-chat-system-wrapper {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: var(--grey-6);
        border: 1px solid var(--grey-6);
        box-shadow: var(--shadow-box-sd1);
        gap: 5px;
      }

      .chat-input-area-inner {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
      }

      .chat-input-area-textarea {
        border-radius: 25px;
        gap: 5px;
        box-shadow: var(--shadow-content-box);
        padding: 4px;
        flex: 1;
        width: 75%;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .chat-area-custom {
        flex: 1;
        width: 100%;
        height: 100%;
        background-color: transparent;
        font-size: 1rem;
        color: var(--color3);
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: none;
        resize: vertical;
        font-family: inherit;
      }

      .chat-area-custom::placeholder {
        color: var(--color3);
      }

      .chat-area-custom:focus {
        outline: none;
      }

      .chat-input-area-icon {
        width: 30px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 2px;
      }

      .emoji-picker-trigger {
        width: 30px;
        height: 30px;
      }

      .emoji-picker-trigger img {
        position: relative;
      }

      .send-click-btn {
        min-width: 40px;
        width: 40px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 2px;
      }

      .send-click-btn-inner {
        box-shadow: var(--shadow-box-sd1);
        width: 50px;
        min-height: 40px;
        padding: 5px;
        position: relative;
        background-image: var(--white-GD);
        border-radius: 10px;
        border: 1px solid #ffffff;
      }

      .send-click-btn-inner img {
        position: relative;
      }

      /*End CHAT-LIST-DETAIL */
    }

    /*End CHAT-CONTENT */
  }

  .sticky-zoom-area {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 10;
    width: 100%;
    border-top-left-radius: 0;
    backdrop-filter: blur(2px);
  }

  .sticky-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sticky-inner {
    width: 85%;
    max-width: 600px;
    padding: 10px;
    background-image: var(--bg-white-GD);
    border-radius: 10px;
    position: relative;
  }

  .sticky-inner img {
    border-radius: 5px;
    border: 1px solid white;
    position: relative;
  }

  .sticky-close {
    position: absolute;
    width: 25px;
    height: 25px;
    top: -10px;
    right: -10px;
    border-radius: 50%;
    background-image: var(--bg-golden-180);
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .sticky-close span {
    font-size: 12px;
    font-weight: bold;
  }

  .sticky-area-inner {
    display: block;
    height: 40px;
    width: 100%;
  }

  .sticky-area-inner-content {
    display: flex;
    width: 100%;
    background-color: var(--BGcolor);
    gap: 5px;
    justify-content: flex-start;
    box-shadow: var(--shadow-box-sd1);
    border: 1px solid white;
    align-items: center;
    overflow: hidden;
    height: 100%;
    border-radius: 10px;
    padding-left: 2px;
  }

  .sticky-label {
    height: 30px;
    padding-left: 3px;
    padding-right: 3px;
    background-image: var(--bg-golden-180);
    border-color: var(--color2);
    border-style: solid;
    border-width: 1px;
    box-shadow: var(--shadow-box-sd1);
    border-radius: 10px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }

  .img-sticky-small {
    color: #f8e889;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 50px;
  }

  .img-sticky-small-inner {
    width: 100%;
    text-align: center;
    transition-property: all;
    transition-duration: 700ms;
    transition-delay: 1000ms;
  }

  .img-sticky-small-inner img {
    position: relative;
    border-radius: 5px;
    border: 1px solid white;
    box-shadow: var(--shadow-box-sd1);
  }
}

@media (min-width: 640px) {
  .roomBgLive {
    .leagueName-text-short {
      font-size: 16px;
    }
    .follow-btn {
      margin-right: -10px;
    }
  }
}

@media (min-width: 768px) {
  .center-content {
    height: 80px;
  }

  .roomBgLive {
    .chat-content {
      .chat-wrapper {
        height: 700px;
        grid-column: span 12 / span 12;
      }
    }

    .match-commentator-name {
      font-size: 40px;
    }

    .match-commentator-inner {
      font-size: 60px;
      max-height: none;
    }

    .box-match-team-flag {
      height: 8rem;
      width: 8rem;
    }

    .box-match-vs {
      gap: 150px;
    }

    .line-split {
      width: 5px;
    }

    .box-league-time {
      line-height: 35px;
    }

    .box-league-name {
      width: 350px;
      line-height: 35px;
    }

    .box-match-league {
      font-size: 26px;
    }

    .box-match-info > img {
      padding-top: 7px;
      padding-bottom: 7px;
    }

    .box-match-logo {
      margin-top: 0.5rem;
    }

    .score-match {
      font-size: 40px;
    }

    .odds-center-content {
      width: 28%;
    }

    .img-flag {
      min-width: 45px;
    }

    .odds-info-team-a,
    .odds-info-team-b {
      width: 36%;
    }

    .odds-info {
      width: 75%;
      height: 100%;
    }

    .follow-btn {
      margin-left: -2px;
    }

    .host-follow {
      height: 25%;
    }

    .host-name {
      height: 30%;
    }

    .stream-info {
      height: 110px;
      flex-direction: row;
    }

    .live-body-content {
      gap: 5px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .live-header-title-inner-content {
      width: 431px;
      height: 55px;
    }
    .live-header-title-inner {
      margin-top: 15px;
      width: 431px;
    }

    .live-header-title {
      height: 80px;
    }

    .owl-left {
      object-fit: contain;
    }

    .img-owl-inner {
      height: 100%;
    }

    .img-owl {
      width: 166px;
      height: 100%;
    }

    .live-header-inner {
      height: 80px;
      width: 733px;
    }

    .first-bg {
      display: flex;
    }

    .live-header {
      height: 80px;
      background-image: radial-gradient(
          57% 57% at 50% -28%,
          rgba(228, 183, 100, 0.3) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          72% 72% at 50% 143%,
          #e4b764 0%,
          rgba(248, 232, 137, 0.63) 75%,
          rgba(248, 232, 137, 0) 100%
        ),
        url("https://demnay.media/soccerbets/head1.webp");
    }
  }

  .md-bg-none {
    background-image: none;
  }
}

@media (min-width: 1280px) {
  .roomBgLive {
    .sticky-zoom-area {
      border-bottom-right-radius: 15px;
      border-bottom-left-radius: 15px;
    }

    .chat-content {
      .chat-input-area-textarea {
        width: 91.666667%;
      }

      .padding-left-10 {
        padding-left: 50px;
      }

      .chat-list-detail {
        .list-chat-wrapper {
          padding-bottom: 0;
        }
      }

      .chat-tabs {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.375rem;
      }

      .chat-wrapper {
        position: static;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        grid-column: span 3 / span 3;
        border-radius: 15px;
        border-bottom-right-radius: 25px;
        border-bottom-left-radius: 25px;
      }
    }

    .match-commentator-prefix {
      padding-left: 50px;
      padding-right: 50px;
    }

    .match-commentator-name {
      font-size: 50px;
      padding-top: 5px;
      padding-left: 50px;
      padding-right: 50px;
    }

    .match-commentator-inner {
      font-size: 50px;
      height: 70px;
      padding: 2px;
    }

    .match-commentator {
      padding-bottom: 40px;
    }

    .box-match-team-name {
      font-size: 2.25rem;
      width: 100%;
    }

    .box-match-team-flag {
      height: 200px;
      width: 200px;
    }

    .box-match-team-inner {
      justify-content: space-between;
      gap: 20px;
    }

    .box-match-vs {
      width: 80%;
      margin-top: 2.25rem; /* equivalent to mt-9 */
      padding-top: 35px;
      gap: 210px;
    }

    .box-time-detail {
      padding-left: 25px;
      padding-right: 25px;
      gap: 20px;
    }

    .box-league-time {
      border-radius: 10px;
      padding: 5px;
    }

    .box-league-name {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      padding-left: 25px;
      padding-right: 25px;
    }

    .box-match-league {
      font-size: 32px;
      border-radius: 10px;
    }

    .box-match-logo {
      height: 71px;
    }

    .box-match-time {
      justify-content: flex-start;
      gap: 10px;
    }

    .box-match-info {
      padding-top: 0;
      padding-bottom: 0;
    }

    .box-play-liveroom-inner > img {
      border-radius: 20px;
    }

    .liveroom-stream {
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .odds-rate-show {
      font-size: 14px;
    }

    .score-match {
      font-size: 45px;
    }

    .leagueName-text-short {
      font-size: 16px;
    }

    .nameTeamA,
    .nameTeamB {
      font-size: 14px;
    }

    .host-room {
      display: flex;
    }

    .stream-info-host {
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .chat-content {
      width: 25%;
    }

    .stream-content {
      width: 75%;
    }

    .live-body-content {
      flex-direction: row;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      padding: 5px;
    }

    .live-body-stroke {
      display: block;
    }

    .live-header-title-inner {
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
    }

    .live-content-inner {
      max-width: 1440px;
    }

    .live-header {
      max-width: 1440px;
    }

    .live-body-inner {
      border-radius: 20px;
    }
  }
}

.text-stroke-4 {
  text-shadow: -1px -1px 0 #e4b764, 1px -1px 0 #e4b764, -1px 1px 0 #e4b764,
    1px 1px 0 #e4b764;
}

.shadowclass {
  box-shadow: 0px 124px 35px 0px rgba(0, 0, 0, 0),
    0px 79px 32px 0px rgba(0, 0, 0, 0.01), 0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09), 0px 5px 11px 0px rgba(0, 0, 0, 0.1);
}

.live-icon-wrapper {
  position: relative;
  width: 100%;
  height: 22px;
  min-width: 50px;
  max-width: 60px;
}

.live-icon {
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--Signal-RedGD);
  height: 100%;
  border: 1px solid var(--red-color);
}

.live-icon-img {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.other-status-room {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 60px;
  font-size: 14px;
}

.other-status-1 {
  background: linear-gradient(to bottom, #565656, #000);
  color: #f8e889;
  position: relative;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  border-radius: 5px;
  font-weight: bold;
  padding: 4px 0;
  line-height: 1;
}

.other-status-2 {
  background-color: var(--grey1);
  color: var(--golden-90);
  position: relative;
  white-space: nowrap;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  padding: 4px 0;
  line-height: 1;
}

.odd-blink {
  animation: odd-blink 1s infinite;
}

@keyframes odd-blink {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
  }
}

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5px;
  width: 66.66%;
  height: 80px;
  background-color: #f3e5ab; /* Thay thế bằng màu nền thực tế */
  border-radius: 20px 20px 0 0;
}

@media (min-width: 1280px) {
  .center-box {
    border-radius: 25px 25px 0 0;
  }

  .roomBgLive-mt-81 {
    margin-top: 110px;
  }
}

.center-inner-box {
  width: 100%;
  height: 10px;
  background-color: #b8860b; /* Thay thế bằng màu nền thực tế */
  border-radius: 15px 15px 0 0;
  margin-top: 10px;
}

@media (min-width: 768px) {
  .center-inner-box {
    width: 431px;
    height: 55px;
  }
}
.hidden {
  display: none;
}

.bg-bg-threater {
  background: #fff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 14px;
}
.livescore {
  display: flex;
  flex-direction: column;
  width: 80%;
}
.roomPlayer {
  display: flex;
  align-items: start;
  justify-content: start;
  gap: 10px;
  flex-direction: row;
}

.roomLive {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: start;
  gap: 10px;
}

.blvInfo {
  display: flex;
  align-items: start;
  flex-direction: row;
  gap: 5px;
}

.avatarblv img {
  border-radius: 55px;
  border: 1px solid #fff;
  width: 92px;
  height: 92px;
  object-fit: cover;
}

.nameDetail {
  border-radius: 20px;
  border: 1px solid #f8e889;
  background: linear-gradient(180deg, #565656 0%, #000 100%);
  backdrop-filter: blur(2px);
}

.nameDetail span {
  color: #f8e889;
  font-size: 16px;
  font-weight: bold;
  padding: 15px;
}

.roomDetails {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
.teamNameText span {
  color: #f8e889;
  font-weight: bold;
}

.numberDetail span {
  margin-left: 5px;
}
.scoreInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 75%;
}
.oddsGame {
  color: #000 !important;
  display: flex;
  justify-content: space-around;
  width: 70%;
}
.odds-flex,
.infoOdds {
  display: flex;
  gap: 30px;
  padding-top: 1px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 1px;
}
.textOdds {
  padding-top: 5px;
}
.white-GD {
  border-radius: 10px;
  border: 1px solid var(--White, #fff);
  background: linear-gradient(180deg, #fff 0%, #eee 100%);
}

.teamInfo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  border-radius: 25px;
  border-top: 1px solid #565656;
  background: linear-gradient(180deg, #f8e889 0%, var(--color2) 199%);
}
.bgScore {
  width: 100%;
  background: linear-gradient(180deg, #f8e889 0%, var(--color2) 199%);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.scoreText {
  color: #000 !important;
  text-align: center;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  -webkit-text-stroke-width: 1;
  -webkit-text-stroke-color: var(--Color-1, #f8e889);
  font-size: 50px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 2px;
}
.teamA {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
  width: 40%;

  border-radius: 25px 25px 0px 25px;
  background: linear-gradient(180deg, #565656 0%, #000 100%);
}

.teamB {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  width: 40%;

  border-radius: 25px 25px 25px 0px;
  background: linear-gradient(180deg, #565656 0%, #000 100%);
}

.teamNameAvatar img {
  background: #fff;
  border-radius: 25px;
  width: 50px;
  height: 50px;
}
.leagueText {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 12px;
  color: #000 !important;
}
.centerTeam {
  display: flex;
  width: 20%;
  height: 165px !important;
  flex-direction: column;
  justify-content: end;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center; /* Đảm bảo nội dung ở giữa theo chiều ngang */
}

#player {
  border-radius: 20px;
  margin-top: 10px !important;
}

@media (max-width: 768px) {
  .scoreInfo {
    width: 100%;
  }
  .roomLive {
    flex-direction: column;
    align-items: start;
    justify-content: center;
  }

  .livescore {
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }
  .roomPlayer {
    flex-direction: column;
  }
  .teamInfo {
    width: 100%;
    order: -1;
  }

  .centerTeam {
    text-align: center;
  }
}
.box-sd2 {
  box-shadow: 0px -73px 20px 0px rgba(0, 0, 0, 0),
    0px -47px 19px 0px rgba(0, 0, 0, 0.01),
    0px -26px 16px 0px rgba(0, 0, 0, 0.05),
    0px -12px 12px 0px rgba(0, 0, 0, 0.09), 0px -3px 6px 0px rgba(0, 0, 0, 0.1);
}
/*-------------------- Chat --------------------*/
.chat {
  width: 300px;
  height: 700px;
  z-index: 2;
  overflow: hidden;
  border-radius: 15px;
  background: var(--BGcolor);
  box-shadow: 0px 94px 26px 0px rgba(0, 0, 0, 0),
    0px 60px 24px 0px rgba(0, 0, 0, 0.01), 0px 34px 20px 0px rgba(0, 0, 0, 0.05),
    0px 15px 15px 0px rgba(0, 0, 0, 0.09), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);

  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

@media (max-width: 768px) {
  .chat {
    width: 100%;
  }
  .chatbox {
    width: 100%;
  }
  .scoreInfo {
    width: 100%;
  }
}
.buttonGd {
  border-radius: 18px;
  border: 1px solid #f8e889;
  background: var(--bg-golden-180);

  /* Box_sd1 */
  box-shadow: 0px 124px 35px 0px rgba(0, 0, 0, 0),
    0px 79px 32px 0px rgba(0, 0, 0, 0.01), 0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09), 0px 5px 11px 0px rgba(0, 0, 0, 0.1);
}

.buttonGdGreen {
  border-radius: 18px;
  border: 1px solid #89f8c1;
  background: linear-gradient(180deg, #8df889 0%, #8de464 100%);

  /* Box_sd1 */
  box-shadow: 0px 124px 35px 0px rgba(0, 0, 0, 0),
    0px 79px 32px 0px rgba(0, 0, 0, 0.01), 0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09), 0px 5px 11px 0px rgba(0, 0, 0, 0.1);
}
.smalltext {
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  text-align: center;
}
/*-------------------- Chat Title --------------------*/
.chat-title {
  flex: 0 1 45px;
  position: relative;
  z-index: 2;

  color: #000;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 10px 10px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.loginRoom {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: start;
}
.loginButton {
  font-size: 10px;
  background: #fc6a77;
  border-radius: 20px;
  padding: 5px;
}
.registerButton {
  font-size: 10px;
  background: #007b0e;
  border-radius: 20px;
  padding: 5px;
}

.loginButtonNoPad {
  font-size: 10px;
  background: #fc6a77;
  border-radius: 20px;
}
.registerButtonNoPad {
  font-size: 10px;
  background: #007b0e;
  border-radius: 20px;
}
.chat-title h1,
.chat-title h2 {
  font-weight: normal;
  font-size: 10px;
  margin: 0;
  padding: 0;
}
.chat-title h2 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  letter-spacing: 1px;
}
.chat-title .avatar {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 9px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.chat-title .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*-------------------- Messages --------------------*/
.messages {
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  position: relative;
  width: 100%;
}
.messages .messages-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
.messages .message {
  clear: both;
  float: left;
  padding: 6px 10px 7px;
  border-radius: 5px 20px 20px 20px;
  border: 1px solid var(--BGcolor);
  background: #fff;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.4;
  margin-left: 35px;
  position: relative;
}
.messages .message .timestamp {
  position: absolute;
  bottom: -15px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
}
.messages .message .message-text {
  color: #000;
}
.messages .message::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  border-right: 7px solid transparent;
}
.messages .message .avatar {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: -35px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.24);
}
.messages .message .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.messages .message.message-personal {
  float: right;
  color: #fff;
  text-align: right;
  background: linear-gradient(120deg, #248a52, #257287);
  border-radius: 10px 10px 0 10px;
}
.messages .message.message-personal::before {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 5px solid transparent;
  border-top: 4px solid #257287;
  bottom: -4px;
}
.messages .message:last-child {
  margin-bottom: 30px;
}
.messages .message.new {
  transform: scale(0);
  transform-origin: 0 0;
  animation: bounce 500ms linear both;
}
.messages .message.loading::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  border: none;
  animation-delay: 0.15s;
}
.messages .message.loading span {
  display: block;
  font-size: 0;
  width: 20px;
  height: 10px;
  position: relative;
}
.messages .message.loading span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  margin-left: -7px;
}
.messages .message.loading span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  margin-top: 4px;
  animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
  margin-left: 7px;
  animation-delay: 0.3s;
}
/*-------------------- Message Box --------------------*/
textarea {
}
.message-box {
  flex: 0 1 40px !important;
  width: 100% !important;

  padding: 10px 0px !important;
  position: relative !important;
}
.message-box .message-input {
  background: none;
  border: none;
  outline: none !important;
  resize: none;
  color: #030303;
  font-size: 11px;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0;
  padding-right: 20px;
  width: 265px;
  padding-left: 10px;
  overflow: hidden;
}
.message-box textarea:focus:-webkit-placeholder {
  color: transparent;
}
.message-box .message-submit {
  position: absolute;
  z-index: 1;
  top: 9px;
  right: 10px;
  color: #000;
  border: none;
  background: linear-gradient(120deg, #f8e889, var(--color2));
  font-size: 10px;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  outline: none !important;
  transition: background 0.2s ease;
}
.message-box .message-submit:hover {
  background: linear-gradient(120deg, var(--color2), #f8e889);
}
/*-------------------- Custom Srollbar --------------------*/
.mCSB_scrollTools {
  margin: 1px -3px 1px 0;
  opacity: 0;
}
.mCSB_inside > .mCSB_container {
  margin-right: 0px;
  padding: 0 10px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
/*-------------------- Bounce --------------------*/
@keyframes bounce {
  0% {
    transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.7% {
    transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.41% {
    transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.11% {
    transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.72% {
    transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  24.32% {
    transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.93% {
    transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  35.54% {
    transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.15% {
    transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
@keyframes ball {
  from {
    transform: translateY(0) scaleY(0.8);
  }
  to {
    transform: translateY(-10px);
  }
}
.comingLive {
  font-size: 12px;
  border-radius: 5px;
  font-weight: bold;
  width: 60px;
  background: linear-gradient(to bottom, #565656, #000);
  color: #f8e889;
  height: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modalDNL {
  position: fixed;
  z-index: 9999999;
  top: 0;
  width: 100%;
  /* height: 563px; */
  overflow: auto;
  background-color: #fff;
  /* padding-top: 60px; */
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

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

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

.schedule {
  background-image: linear-gradient(270deg, #fff3ad 50%, #f8e889);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-color: rgb(248 232 137 / 1);
  overflow: hidden;
  width: 100%;
}

.tournament {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tournament > div {
  width: 100%;
}

.matchRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 82%;
  justify-content: center;
}
.tournament-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  height: 40px;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 2px;
  background-color: #fff;
  background-size: cover;
  background-position: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  text-align: center;
  color: #fff;
  border: 1px solid white;
  overflow: hidden;
  box-shadow: var(--shadow-box-sd1);
}

.tournament-heading-logo {
  width: 60px;
  height: 100%;
  overflow: hidden;
  background-image: url(https://demnay.media/LiveSchedule/Ver3_Leagues2.webp);
}

.tournament-wrap-name {
  font-size: 16px;
  padding-left: 15px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  border-top-left-radius: 20px;
  background-image: url(https://demnay.media/LiveSchedule/Ver3_Leagues2.webp);
}

.wrap-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border-bottom-right-radius: 20px;
  padding: 2px;
}

.matchSchedule {
  border-bottom: 1px solid #ddd;
  padding: 5px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid white;
  background-image: var(--bg-white-GD-ver3);
  box-shadow: var(--shadow-box-sd1);
  height: 55px;
  border-radius: 10px;
}

.matchSchedule:hover {
  background-image: var(--bg-dark-liveroom);
  border-color: var(--color2);
}

.matchSchedule:hover .timeSchedule {
  background-color: var(--golden-90);
  border-color: var(--color2);
}

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

.timeSchedule {
  height: 100%;
  width: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background-color: var(--BGcolor);
  border: 1px solid white;
  box-shadow: var(--shadow-league-mable);
  border-radius: 10px;
}

.timeSchedule span {
  line-height: 1.2;
}

.statusSchedule {
  height: 100%;
  width: 9%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-left: 3px;
  padding-right: 3px;
}

.team-name {
  width: 100%;
  text-align: center;
}

.wrap-status-live {
  width: 100%;
  max-width: 80px;
  max-height: 50px;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 3px;
  padding-right: 3px;
}

.wrap-img-status {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.status-live {
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: var(--Signal-RedGD);
  border: 1px solid var(--red-color);
}

.wrap-other-status {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.other-status {
  width: 100%;
  height: 100%;
  max-width: 80px;
  max-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border-radius: 10px;
}

.teamSchedule {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 50%;
  color: #000;
  font-size: 12px;
  position: relative;
}

.teamSchedule img {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  box-shadow: var(--shadow-box-sd1);
}

.score {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.score-wrap {
  width: 100%;
  min-width: 50px;
  height: 50%;
  border-radius: 9999px;
  background-image: var(--bg-white-GD-ver3);
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-box-sd1);
  text-wrap: nowrap;
}

.score-wrap span {
  width: 100%;
  text-align: center;
}

.commentators {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 50%;
}
.commentators img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  object-fit: cover;
}
.teamSchedule.home {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-direction: column-reverse;
  justify-content: center;
  width: 40%;
  white-space: nowrap;
  gap: 0px;
}
.teamSchedule.away {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  justify-content: center;
  width: 40%;
  white-space: nowrap;
  gap: 0px;
}

.commentator-wrap {
  transition: all 500ms;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.commentator-wrap-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.commentator-arrow-left {
  width: 20px;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}

.commentator-arrow-left img {
  height: 30px;
  transform: rotate(180deg);
}

.commentator-wrap-inner-box {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  min-width: 80px;
  max-width: 80px;
}

.commentator-wrap-inner-box.justify-start {
  justify-content: flex-start;
}

.commentator-wrap-inner-box.justify-end {
  justify-content: flex-end;
}

.commentator-wrap-inner-box-content {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: all 500ms;
  position: relative;
}

.commentator-wrap-inner-box-content-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  width: 40px;
  height: 100%;
  transition: transform 300ms;
}

.commentator-avatar {
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background-color: var(--BGcolor);
  box-shadow: var(--shadow-box-sd1);
}

.commentator-avatar img {
  border-radius: 55px;
  transition: all 300ms ease-in-out;
}

.commentator-avatar:hover {
  border: 2px solid var(--color2);
}

.commentator-name {
  font-size: 8px;
  width: 100%;
  display: none;
  padding: 2px 0;
  text-align: center;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  line-height: 1;
}

.commentator-arrow-right {
  width: 20px;
  height: 100%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 2px;
  top: 0;
}

.commentator-arrow-right img {
  height: 20px;
}

.commentator-arrow-hidden {
  display: none;
}

@media (min-width: 1280px) {
  .commentator-arrow-left {
    min-width: 20px;
  }

  .commentator-wrap-inner-box-content-item {
    transition: transform 700ms;
  }

  .commentator-avatar {
    width: 40px;
    min-height: 40px;
    height: 40px;
  }

  .commentator-name {
    display: block;
  }

  .commentator-arrow-hidden-xl {
    display: none;
  }
}

@media (min-width: 768px) {
  .commentator-wrap {
    width: 50%;
  }

  .commentator-wrap-inner-box {
    max-width: 242px;
  }

  .commentator-wrap-inner-box-content-item {
    min-width: 58px;
    width: 58px;
  }

  .commentator-name {
    font-size: 10px;
  }

  .commentator-wrap-inner-box.justify-end-md {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .timeSchedule {
    width: 13%;
  }

  .statusSchedule {
    width: 13%;
    font-size: 10px;
  }

  .matchRow {
    width: 74%;
  }

  .teamSchedule img {
    width: 30px;
    height: 30px;
  }
  .commentators img {
    width: 30px;
    height: 30px;
  }
  .tournament-heading {
    font-size: 1.2em;
  }
  .score {
    font-size: 1.2em;
  }
  .teamSchedule.home {
    overflow: hidden;
    white-space: normal;
  }
  .teamSchedule.away {
    overflow: hidden;
    white-space: normal;
  }
}
.lr-ranking-wrap {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: var(--bg-white-GD-ver3);
  box-shadow: var(--shadow-box-sd1);
}

.lr-header {
  height: 55px;
  background-image: var(--bg-golden-180);
  display: flex;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color2);
  border-bottom: none;
}

.lr-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 2px solid var(--color2);
  border-radius: 15px;
  overflow: hidden;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lr-header img {
  height: 100%;
  object-fit: contain;
}

.lr-leagues {
  display: flex;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.lr-league {
  width: 42px;
  height: 42px;
  padding: 2px;
  text-align: center;
  cursor: pointer;
  background-image: var(--bg-white-GD-ver3);
  border: 1px solid #fff;
  box-shadow: var(--shadow-box-sd1);
  border-radius: 10px;
}

.lr-league.border-color2 {
  border-color: var(--color2);
}

.lr-league.bg-golden-180 {
  background-image: var(--bg-golden-180);
}

.lr-league img {
  width: 100%;
  height: 36px;
  object-fit: contain;
}

.lr-league:hover {
  background-image: var(--bg-golden-180);
}

.lr-league.border-white:hover img {
  transform: scale(1.1);
}

.lr-ranking-table {
  width: 100%;
  background: #fff;
  padding: 0 5px;
  border-radius: 20px;
  overflow: hidden;
}

.lr-table-header {
  display: flex;
  background-color: var(--BGcolor);
  color: var(--color3);
  text-align: center;
  padding: 10px 0;
  font-weight: 600;
  font-size: 14px;
}

.lr-table-header .lr-column-1 {
  flex: 7;
  text-align: center;
}

.lr-table-header .lr-column-2 {
  flex: 3;
  text-align: center;
}

.lr-table-header .lr-column-3 {
  flex: 2;
  text-align: center;
}

.lr-table-body {
  display: flex;
  flex-direction: column;
  color: #000;
  /* background-image: linear-gradient(270deg, #fff3ad 50%, #f8e889); */
}

.lr-table-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid white;
  transition: background-color 0.3s;
  box-shadow: var(--shadow-box-sd1);
  background-image: var(--bg-white-GD-ver3);
  border-radius: 10px;
  min-height: 50px;
}

.lr-table-row:hover {
  background-image: var(--bg-golden-180);
  border-color: var(--color2);
}

.lr-table-row .lr-column-1 {
  flex: 7;
  text-align: center;
}
.lr-table-row .lr-column-2 {
  flex: 3;
  text-align: center;
}
.lr-table-row .lr-column-3 {
  flex: 2;
  text-align: center;
}

.lr-table-row .lr-team-info {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 155px;
  text-align: left;
}

.lr-table-row .lr-team-info .lr-team-logo {
  width: 35px;
  height: 35px;
  margin: 0 10px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: var(--shadow-box-sd1);
  border: 1px solid white;
  padding: 2px;
  overflow: hidden;
}

.lr-table-row:hover .lr-team-info .lr-team-logo {
  border-color: var(--color2);
  background-color: var(--bg-golden-180);
}

.lr-show-all {
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  color: #333;
  font-weight: bold;
}

.lr-show-all:hover {
  color: #000;
}

@media (max-width: 768px) {
  .lr-header,
  .lr-leagues,
  .lr-table-header,
  .lr-table-row {
    flex-direction: row;
  }

  .lr-table-header .lr-column,
  .lr-table-row .lr-column {
    width: 100%;
  }

  .lr-table-row .lr-team-info {
    justify-content: start;
    white-space: nowrap;
    width: 155px;
  }
}

.lr-see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: var(--grey2);
  font-weight: 700;
  font-size: 18px;
  border: 1px solid white;
  background-image: var(--bg-white-GD-ver3);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
}

.lr-see-more:hover {
  color: #000;
  background-image: var(--bg-golden-180);
  border-color: var(--color2);
}

.lr-arrow-down {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}

.lr-see-more:hover .lr-arrow-down {
  filter: brightness(0);
}

.containers {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

form.sign-up-form {
  opacity: 0;
  z-index: 1;
}

form.sign-in-form {
  z-index: 2;
}

.title {
  font-size: 2.2rem;
  color: #444;
  margin-bottom: 10px;
}

.input-field {
  max-width: 380px;
  width: 100%;
  background-color: #f0f0f0;
  margin: 10px 0;
  height: 55px;
  border-radius: 55px;
  display: grid;
  grid-template-columns: 15% 85%;
  padding: 0 0.4rem;
  position: relative;
}

.input-field i {
  text-align: center;
  line-height: 55px;
  color: #acacac;
  transition: 0.5s;
  font-size: 1.1rem;
}

.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
}

.social-text {
  padding: 0.7rem 0;
  font-size: 1rem;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #4481eb;
  border-color: #4481eb;
}

.btn {
  width: 150px;
  background-color: #5995fd;
  border: none;
  outline: none;
  height: 49px;
  border-radius: 49px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
}

.btn:hover {
  background-color: #4d84e2;
}
.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.containers:before {
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: var(--bg-golden-180);
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
}

.image {
  width: 70%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}

.left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding: 3rem 12% 2rem 17%;
}

.panel .content {
  color: #fff;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.panel h3 {
  font-weight: 600;
  line-height: 1;
  font-size: 1.5rem;
}

.panel p {
  color: #000;
  font-size: 14px;
  padding: 0.7rem 0;
}

.btn.transparent {
  margin: 0;
  background: none;
  border: 2px solid #000000;
  width: 130px;
  height: 41px;
  font-weight: 600;
  font-size: 14px;
  color: #302f2b;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

/* ANIMATION */

.containers.sign-up-mode:before {
  transform: translate(100%, -50%);
  right: 52%;
}

.containers.sign-up-mode .left-panel .image,
.containers.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.containers.sign-up-mode .signin-signup {
  left: 25%;
}

.containers.sign-up-mode form.sign-up-form {
  opacity: 1;
  z-index: 2;
}

.containers.sign-up-mode form.sign-in-form {
  opacity: 0;
  z-index: 1;
}

.containers.sign-up-mode .right-panel .image,
.containers.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.containers.sign-up-mode .left-panel {
  pointer-events: none;
}

.containers.sign-up-mode .right-panel {
  pointer-events: all;
}

@media (max-width: 870px) {
  /* .container {
    min-height: 800px;
    height: 100vh;
  } */
  .signin-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .signin-signup,
  .containers.sign-up-mode .signin-signup {
    left: 50%;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .panel {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

  .right-panel {
    grid-row: 3 / 4;
  }

  .left-panel {
    grid-row: 1 / 2;
  }

  .image {
    width: 200px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .panel .content {
    padding-right: 15%;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .panel h3 {
    font-size: 1.2rem;
  }

  .panel p {
    color: #000;
    font-size: 0.7rem;
    padding: 0.5rem 0;
  }

  .btn.transparent {
    width: 110px;
    height: 35px;
    font-size: 0.7rem;
  }

  .containers:before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .containers.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }

  .containers.sign-up-mode .left-panel .image,
  .containers.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .containers.sign-up-mode .right-panel .image,
  .containers.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .containers.sign-up-mode .signin-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  form {
    padding: 0 1.5rem;
  }

  .image {
    display: none;
  }
  .panel .content {
    padding: 0.5rem 1rem;
  }
  .containers {
    padding: 1.5rem;
  }

  .containers:before {
    bottom: 72%;
    left: 50%;
  }

  .containers.sign-up-mode:before {
    bottom: 28%;
    left: 50%;
  }
}

/* SKELETON LEAGUE RANKING START*/

.lr-skeleton-table {
  width: 100%;

  .skeleton-item {
    cursor: default;
    display: flex;
    width: 100%;
    height: 50px;
    border-radius: 10px;
    border-bottom: 1px solid #e5e7eb;
    background-color: #f3f4f6;
    overflow: hidden;
    position: relative;
  }

  .skeleton-team {
    width: 58.333333%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .skeleton-team-logo {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    height: 90%;
    padding: 5px;
    justify-content: center;
    align-items: center;
  }

  .skeleton-logo-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background-color: #e5e7eb;
    position: relative;
    overflow: hidden;
  }

  .skeleton-team-name {
    height: 18px;
    width: 100px;
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
  }

  .skeleton-stats {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .skeleton-stats-placeholder {
    height: 18px;
    width: 60px;
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
  }

  .skeleton-points {
    width: 16.666667%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .skeleton-points-placeholder {
    height: 18px;
    width: 30px;
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
  }
}

.skeleton-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
}

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

/* SKELETON LEAGUE RANKING END*/

/*Auth Form Start*/
.auth-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.auth-inner {
  position: relative;
  padding-top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--bg-bg-login);
}

.auth-body {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.6);
  transition: all 700ms;
}

.gap-y-5-px {
  row-gap: 5px;
}

.auth-cancel-login {
  width: 40px;
  position: fixed;
  top: 0;
  height: 5px;
  display: flex;
  align-items: flex-start;
  z-index: 99999;
  right: 0.625rem;
  padding-left: 20px;
  padding-top: 20px;
}

.cancel-login-btn {
  width: 20px;
  height: 1.25rem;
  font-size: 20px;
  color: var(--grey1);
  font-weight: 400;
  display: none;
}

.icon-cancel-login {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.form-login-wrapper {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 700ms;
}

.form-login-active {
  transform: translateX(0);
  height: 100%;
}

.form-login-inactive {
  min-height: 470px;
  height: 100%;
}

.form-login-inner {
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 500ms;
}

.form-login-inner-inactive {
  transform: translateX(0) translateY(0);
  width: 100%;
  opacity: 1;
}

.form-login-inner-active {
  transform: translateX(-100%) translateY(-100%) scale(0);
  width: 0;
  opacity: 0;
}

.form-register {
  width: 100%;
  height: 100%;
}

.form-login-detail {
  height: 100%;
  position: absolute;
  transition: all 500ms;
}

.form-login-detail-active {
  transform: translateX(0) translateY(0);
  width: 100%;
  opacity: 1;
}

.form-login-detail-inactive {
  width: 0;
  opacity: 0;
  transform: translateY(100%);
}

.auth-sidebar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  transition: all 700ms;
}

.auth-sidebar-login {
  transform: translateX(0);
  height: 40%;
  max-height: 200px;
}

.auth-sidebar-register {
  height: 33.33%;
  max-height: 200px;
}

.auth-sidebar-inner {
  width: 100%;
  position: relative;
  height: 100%;
  background-image: var(--bg-golden-180);
  transition: all 700ms;
}

.auth-sidebar-inner-register {
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  box-shadow: 12px 12px 10px 0px rgba(0, 0, 0, 0.25);
}

.auth-sidebar-inner-login {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: 5px 0px 5px 5px rgba(0, 0, 0, 0.25);
}

.auth-sidebar-content {
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms;
}
.auth-sidebar-content-register {
  width: 100%;
  opacity: 1;
  padding-bottom: 5px;
  transform: translateY(0);
}

.auth-sidebar-content-login {
  transform: translateY(100%);
  scale: 0;
  width: 0;
  opacity: 0;
}

.welcome-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding-left: 15px;
}

.welcome-login-text {
  text-transform: uppercase;
  width: 200px;
  font-size: 20px;
  white-space: nowrap;
  padding-left: 10px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.welcome-login-btn {
  text-transform: uppercase;
  display: flex;
  width: 66.67%;
  justify-content: center;
  background-image: var(--bg-black-GD);
  height: 40px;
  align-items: center;
  border-radius: 25px;
  color: var(--golden-90);
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
}

.welcome-login-img {
  width: 50%;
  padding-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-login-img-inner {
  display: flex;
  justify-content: center;
  height: 200px;
  min-width: 250px;
  transform: translateX(-25px);
  position: relative;
}

.welcome-login-btn-other {
  text-transform: uppercase;
  display: none;
  width: 50%;
  justify-content: center;
  transform: translateY(5px);
  background-image: var(--bg-black-GD);
  height: 40px;
  align-items: center;
  border-radius: 25px;
  color: var(--golden-90);
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
}

.welcome-register {
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: all 500ms;
}

.welcome-register-active {
  transform: translateX(0);
  width: 100%;
  opacity: 1;
}

.welcome-register-inactive {
  scale: 0;
  width: 0;
  opacity: 0;
}

.welcome-register-img {
  width: 100%;
  padding-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-register-img-inner {
  display: flex;
  justify-content: center;
  height: 200px;
  width: 100%;
  position: relative;
}

.welcome-register-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem; /* 2.5 in Tailwind */
  padding-top: 0.625rem; /* 2.5 in Tailwind */
  padding-right: 15px;
}

.welcome-register-text span {
  text-transform: uppercase;
  font-size: 15px;
  min-width: 180px;
  width: 66.67%;
  font-weight: bold;
  text-align: center;
}

.welcome-register-btn {
  text-transform: uppercase;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-image: var(--bg-black-GD);
  height: 40px;
  border-radius: 25px;
  color: var(--golden-90);
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
}

.auth-noti {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.auth-noti-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.auth-noti-inner-content {
  width: 300px;
  height: 100%;
  max-height: 170px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow: var(--shadow-box-sd1);
}

.auth-noti-body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-noti-error,
.auth-noti-success {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  padding-top: 5%;
  align-items: center;
}

.auth-noti-error > span,
.auth-noti-success > span {
  font-size: 20px;
  font-weight: bold;
  color: var(--color3);
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

.auth-noti-error-logo,
.auth-noti-success-logo {
  width: 80%;
  height: 40px;
}
.auth-noti-error-logo {
  height: 60px;
}

.auth-noti-success-close {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-close-btn {
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  background-image: var(--bg-golden-180);
  border: 1px solid white;
  box-shadow: var(--shadow-box-sd1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-close-btn-inner {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.auth-noti-error-close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  background-image: var(--bg-white-GD);
  border-radius: 50%;
  box-shadow: var(--shadow-box-sd1);
  z-index: 99999;
}

.auth-noti-error {
  position: relative;
}

.error-close-btn {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: var(--grey1);
  font-weight: normal;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-noti {
  height: 10px;
  width: 90%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: var(--shadow-box-sd1);
}

.auth-noti-owl {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.auth-noti-owl-inner {
  width: 250px;
  height: 100%;
  max-height: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 10px;
}

.auth-noti-owl-img {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.login-form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.login-form-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-form-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.register-form-content {
  width: 100%;
  height: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.login-form-title {
  width: 100%;
  height: 100%;
  max-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.625rem;
  padding-top: 15px;
  padding-bottom: 20px;
}
.register-form-content > span,
.login-form-title > span {
  font-size: 24px;
  color: var(--color3);
  font-weight: bold;
  text-transform: uppercase;
}

.login-form-logo {
  display: flex;
  justify-content: center;
  width: 248px;
  height: 42px;
  position: relative;
}

.login-form-input {
  width: 100%;
  max-width: 380px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  gap: 15px;
  height: 100%;
}

.register-form-input {
  max-width: 450px;
}

.login-form-input-inner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.login-form-input-account {
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 40px;
  background-color: white;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.login-form-input-account .iti {
  width: 100%;
  height: 100%;
}

.custom-phonenumber {
  width: 100%;
  height: 100%;
  font-weight: normal;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  position: relative;
  background: none;
  padding-top: 3px;
}

.custom-phonenumber::placeholder {
  color: var(--grey1);
  font-weight: normal;
}

.iti__selected-dial-code {
  font-size: 14px;
  color: var(--grey1);
}

.agree-policy {
  min-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.625rem;
}

.custom-phonenumber:focus {
  outline: none;
}

.password-not-match {
  position: absolute;
  width: 100%;
  height: 20px;
  margin-top: 40px;
  padding-left: 10px;
}

.password-not-match span {
  color: #dc2626;
  font-size: 13px;
  font-style: italic;
}

.register-password-inner {
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  height: 100%;
  background-color: var(--bg-white);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.register-password {
  display: flex;
  width: 100%;
  gap: 0.625rem;
  min-height: 50px;
  padding-bottom: 10px;
}

.input-icon-auth {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  border-radius: 15px;
}

.input-icon-auth-inner {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.custom-input-auth {
  width: 100%;
  height: 100%;
  padding-left: 45px;
  mix-blend-mode: multiply;
  font-weight: normal;
  background: white;
}

.custom-input-auth::placeholder {
  font-style: italic;
  color: var(--grey1);
  font-weight: normal;
}

.custom-input-auth:focus {
  outline: none;
}

.custom-input-auth-pass {
  width: 100%;
  height: 100%;
  z-index: 10;
  padding-left: 45px;
  padding-right: 20px;
  mix-blend-mode: multiply;
  font-weight: normal;
  background: white;
}

.custom-input-auth-pass::placeholder {
  font-style: italic;
  color: var(--grey1);
  font-weight: normal;
}

.custom-input-auth-pass:focus {
  outline: none;
}

.hidden-password {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  align-items: center;
  min-width: 100%;
  height: 30px;
}

.hidden-password-inner {
  width: 20px;
  height: 20px;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: 8px;
  cursor: pointer;
}

.cancel-login-btn-mb {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cancel-login-btn-mb-inner {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  background-image: var(--bg-white-GD);
  border: 1px solid white;
  box-shadow: var(--shadow-box-sd1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cancel-login-btn-mb-img {
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.register-form-input-account {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 40px;
  background-color: white;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.custom-input-auth-register {
  width: 100%;
  height: 50px;
  padding-left: 45px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  mix-blend-mode: multiply;
  font-weight: normal;
  background: none;
}

.custom-input-auth-register::placeholder {
  font-style: italic;
  color: var(--grey1);
  font-weight: normal;
}

.custom-input-auth-register:focus {
  outline: none;
}

button.sumbit-login {
  display: flex;
  width: 100%;
  text-transform: uppercase;
  justify-content: center;
  padding-top: 5px;
  overflow: hidden;
  height: 45px;
  border-radius: 25px;
  color: var(--color3);
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
}

button.sumbit-login:hover {
  background-image: var(--bg-golden-180);
}

button.sumbit-login > span {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: var(--bg-golden-180);
  color: var(--color3);
}

.login-form-input-remember {
  min-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}

.input-remember {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  color: var(--grey1);
  font-weight: normal;
  font-size: 16px;
  padding-top: 5px;
}

.input-remember-inner {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 10px;

  .container-check {
    width: 15px;
  }
}

.label-remember {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.sync-account {
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  gap: 5px;
}

.sync-account-header {
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sync-account-header-inner {
  width: 50%;
  height: 100%;
  position: relative;
}

.sync-account-header-title {
  white-space: nowrap;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.sync-account img {
  position: relative;
}

.list-platform {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.platform-button {
  width: 40%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 var(--shadow-color);
  transition: all 0.2s;
}

.platform-button:hover {
  padding: 0.625rem;
  gap: 0.625rem;
}

.platform-icon-container {
  width: 40%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.platform-label {
  display: flex;
  width: 75%;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
  color: white;
}

.bg-bg-white .platform-label {
  color: var(--color3);
}

.register-form-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.register-form-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .register-form-wrapper {
    background: none;
    padding-left: 0;
    padding-right: 0;
  }

  .platform-button {
    width: 40px;
  }

  .platform-button:hover {
    width: 40%;
  }

  .sync-account {
    padding-top: 25px;
    padding-bottom: 25px;
    gap: 20px;
  }

  button.sumbit-login {
    height: 50px;
  }

  .login-form-title {
    max-height: none;
    justify-content: flex-end;
    gap: 1.25rem;
    padding-bottom: 50px;
  }

  .auth-noti {
    border-radius: 58px;
  }

  .welcome-register-btn {
    width: 66.67%;
    height: 50px;
  }

  .welcome-register-text span {
    font-size: 20px;
  }

  .welcome-register-img {
    padding-left: 0;
    padding-bottom: 30px;
    padding-top: 20px;
  }

  .welcome-register-inactive {
    transform: translateX(100%);
  }

  .welcome-register {
    flex-direction: column;
    gap: 0.625rem;
  }

  .welcome-login-img-inner {
    min-height: 0;
    transform: translateX(0);
    width: 100%;
    height: 251px;
  }

  .welcome-login-img {
    width: 100%;
    height: 300px;
    padding-left: 0;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .welcome-login-btn-other {
    display: flex;
    width: 66.67%;
    height: 50px;
  }

  .welcome-login-btn {
    display: none;
  }

  .welcome-login-text {
    font-size: 30px;
    width: 66.67%;
    justify-content: flex-start;
  }

  .welcome-login {
    height: 30px;
    padding-left: 0;
  }

  .auth-sidebar-content-login {
    transform: translateX(100%) translateY(100%);
  }

  .auth-sidebar-content-register {
    transform: translateX(0) translateY(0);
    padding-bottom: 0;
  }

  .auth-sidebar-content {
    flex-direction: column;
    gap: 0.625rem; /* 2.5 in Tailwind */
  }

  .auth-sidebar-inner-login {
    border-top-left-radius: 300px;
    border-top-right-radius: 60px;
    box-shadow: -12px 12px 10px 0px rgba(0, 0, 0, 0.25);
  }

  .auth-sidebar-inner-register {
    border-top-right-radius: 300px;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 0;
  }

  .auth-sidebar-register {
    transform: translateX(-100%);
    max-height: 100%;
  }

  .auth-sidebar-login {
    max-height: 100%;
  }

  .auth-sidebar {
    width: 50%;
    height: 100%;
  }

  .form-login-detail-inactive {
    transform: translateX(100%) translateY(100%) scale(0);
  }

  .form-login-inactive {
    transform: translateX(100%);
  }

  .form-login-wrapper {
    width: 50%;
  }

  .cancel-login-btn {
    display: block;
  }

  .auth-wrapper {
    padding-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .auth-inner {
    padding-top: 8px;
    max-width: 1000px;
    height: 600px;
    border-radius: 60px;
    overflow: hidden;
  }

  .auth-body {
    flex-direction: row;
    border-radius: 60px;
  }

  .md-bg-bg-login-light2 {
    background-image: url("https://demnay.media/emoji/Login_Light_2.webp");
  }

  .md-bg-bg-login-light1 {
    background-image: url("https://demnay.media/emoji/Login_Light_1.webp");
  }

  .auth-cancel-login {
    position: absolute;
    right: 1.25rem;
  }

  .welcome-register-img-inner {
    width: 306px;
    height: 210px;
  }

  .cancel-login-btn-mb {
    display: none;
  }

  .platform-icon-container {
    width: 100%;
  }

  .platform-button:hover .platform-icon-container {
    width: 25%;
  }

  .platform-label {
    display: none;
  }

  .platform-button:hover .platform-label {
    display: flex;
  }

  .register-form-content {
    gap: 1.25rem;
    padding-top: 15px;
  }
}
/*Auth Form End*/

.skeleton-schedule {
  width: 100%;
}

.skeleton-schedule-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 1px;
}

.skeleton-league-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #e5e7eb;
  height: 35px;
  background-color: #f3f4f6;
  overflow: hidden;
  position: relative;
}

.skeleton-league-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

.skeleton-league-logo {
  min-width: 60px;
  width: 60px;
  height: 100%;
  background-color: #e5e7eb;
  border-radius: 20px;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  padding: 3px;
  position: relative;
  overflow: hidden;
}

.skeleton-league-name {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.skeleton-schedule-match {
  width: 100%;
  background-color: #f3f4f6;
  margin-bottom: 2px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  overflow: hidden;
  position: relative;
}

.skeleton-indicator,
.skeleton-time {
  width: 13%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px;
}

.skeleton-time-inner {
  width: 100%;
  height: 100%;
  background-color: #e5e7eb;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.skeleton-indicator-inner {
  width: 100%;
  max-width: 80px;
  max-height: 40px;
  height: 50%;
  background-color: #e5e7eb;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.skeleton-teams-score {
  width: 74%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skeleton-team {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skeleton-score {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skeleton-score-inner {
  width: 40px;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
}

.skeleton-team-away,
.skeleton-team-home {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.skeleton-away-logo,
.skeleton-home-logo {
  width: 25px;
  height: 25px;
  background-color: #e5e7eb;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.skeleton-away-name,
.skeleton-home-name {
  width: 90%;
  height: 18px;
  background-color: #e5e7eb;
  margin-top: 4px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-commentator-wrap {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 8px;
}

.skeleton-commentator-avatar {
  width: 30px;
  height: 30px;
  background-color: #e5e7eb;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .skeleton-indicator,
  .skeleton-time {
    width: 8.333333%;
  }

  .skeleton-schedule-inner {
    margin-top: 3px;
  }

  .skeleton-league-header {
    height: 40px;
  }

  .skeleton-team {
    width: 50%;
  }

  .skeleton-away-logo .skeleton-home-logo {
    width: 30px;
    height: 30px;
  }

  .skeleton-commentator-wrap {
    width: 50%;
  }
}

@media (min-width: 1280px) {
  .skeleton-schedule-match {
    border-radius: 10px;
    height: 55px;
  }

  .skeleton-teams-score {
    width: 83.333333%;
  }

  .skeleton-commentator-avatar {
    width: 40px;
    height: 40px;
  }
}

.matchList {
  .matchItem {
    width: 46%;
    padding: 10px;
    margin-bottom: 1rem;
    padding: 10px;
  }

  .skeleton {
    width: 100%;
    background: #f0f0f0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding: 0 10px;
    border-radius: 10px 10px 0px 10px;
  }

  .skeleton-header {
    width: 85%;
    height: 35px;
    background-color: #e0e0e0;
    border-radius: 0px 0px 20px 20px;
    margin: 0 auto;
    margin-bottom: 10px;
  }

  .skeleton-footer {
    height: 35px;
    background-color: #e0e0e0;
    margin-bottom: 10px;
    border-radius: 10px 10px 0px 00px;
  }

  .skeleton-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
  }

  .skeleton-circle {
    width: 60px;
    height: 60px;
    background-color: #e0e0e0;
    border-radius: 50%;
  }

  .skeleton-text {
    width: 20%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 5px;
  }

  .skeleton-date {
    width: 30%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin: 0 auto 10px;
  }
}

.wrapInfoFootball {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapInfoMarble {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  position: relative;
}

.wrapInfoMarble .placeMarble,
.teamSchedule .placeMarble {
  max-width: 90%;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 0px 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #f4f5f7;
  border: 1px solid #fff;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.marbleVideos {
  width: 90%;
  max-height: 80px;
  border-radius: 15px;
  object-fit: cover;
}

.marbleVideosSchedule {
  width: 100%;
  object-fit: cover;
  max-height: 45px;
  border-radius: 10px;
}

.marble-odds {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon-flag {
    width: 20px;
    position: relative;
    height: 20px;
  }
  .b {
    position: relative;
    text-transform: capitalize;
    background: linear-gradient(180deg, #5c5c5c, #1a1a1a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .icon-flag-parent {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }
  .wrapper {
    box-shadow: 0px 31px 9px rgba(0, 0, 0, 0), 0px 20px 8px rgba(0, 0, 0, 0.01),
      0px 11px 7px rgba(0, 0, 0, 0.05), 0px 5px 5px rgba(0, 0, 0, 0.09),
      0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: radial-gradient(50% 50% at 50% 50%, #74de35, #2bc505);
    border: 1px solid #07b022;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    font-size: 10px;
  }
  .frame-group {
    align-self: stretch;
    border-radius: 25px;
    background: linear-gradient(180deg, #fff, #f4f5f7);
    border: 1px solid #e4b764;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 10px;
  }
  .nvu-icon {
    align-self: stretch;
    flex: 1;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: cover;
  }
  .iconmarble {
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .icon-size {
    box-shadow: 0px 79px 32px rgba(0, 0, 0, 0.01),
      0px 45px 27px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.09),
      0px 5px 11px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .icon-size-wrapper {
    box-shadow: 0px 31px 9px rgba(0, 0, 0, 0), 0px 20px 8px rgba(0, 0, 0, 0.01),
      0px 11px 7px rgba(0, 0, 0, 0.05), 0px 5px 5px rgba(0, 0, 0, 0.09),
      0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    background: linear-gradient(180deg, #fff, #f4f5f7);
    border: 1px solid #fff;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1px;
  }
  .frame-container {
    align-self: stretch;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 5px;
    gap: 10px;
  }
  .frame-parent {
    align-self: stretch;
    box-shadow: 0px 79px 32px rgba(0, 0, 0, 0.01),
      0px 45px 27px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.09),
      0px 5px 11px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    background: linear-gradient(180deg, #f8e889, #e4b764);
    border: 1px solid #e4b764;
    box-sizing: border-box;
    height: 50px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
  }
  .text-input-container {
    width: 20px;
    position: relative;
    height: 20px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .betting-menu {
    align-self: stretch;
    box-shadow: 0px 31px 9px rgba(0, 0, 0, 0), 0px 20px 8px rgba(0, 0, 0, 0.01),
      0px 11px 7px rgba(0, 0, 0, 0.05), 0px 5px 5px rgba(0, 0, 0, 0.09),
      0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: linear-gradient(180deg, #fff, #f4f5f7);
    border: 1px solid #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px;
  }

  .betting-menu:hover {
    cursor: pointer;
    background: linear-gradient(180deg, #f8e889, #e4b764);
    border: 1px solid #e4b764;
  }

  .durations {
    position: relative;
    background: linear-gradient(180deg, #5c5c5c, #1a1a1a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: nowrap;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .betting-menu1 {
    align-self: stretch;
    flex: 1;
    box-shadow: 0px 31px 9px rgba(0, 0, 0, 0), 0px 20px 8px rgba(0, 0, 0, 0.01),
      0px 11px 7px rgba(0, 0, 0, 0.05), 0px 5px 5px rgba(0, 0, 0, 0.09),
      0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: linear-gradient(180deg, #f8e889, #e4b764);
    border: 1px solid #e4b764;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    gap: 2px;
  }
  .front-3-icon {
    width: 20px;
    position: relative;
    height: 20px;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
  }
  .betting-menu2 {
    align-self: stretch;
    box-shadow: 0px 31px 9px rgba(0, 0, 0, 0), 0px 20px 8px rgba(0, 0, 0, 0.01),
      0px 11px 7px rgba(0, 0, 0, 0.05), 0px 5px 5px rgba(0, 0, 0, 0.09),
      0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: linear-gradient(180deg, #fff, #f4f5f7);
    border: 1px solid #f4f5f7;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px;
  }
  .butts {
    width: 220px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px 0px;
    box-sizing: border-box;
    gap: 5px;
  }
  .lt-trc {
    position: relative;
    letter-spacing: -0.03em;
    line-height: 100%;
  }
  .lt-trc-wrapper {
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 5px;
  }
  .marble-background-icon {
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10.1px);
    width: 20px;
    height: 20px;
  }
  .b2 {
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 4px);
    letter-spacing: -0.03em;
    line-height: 100%;
  }
  .marble-number {
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10.1px);
    box-shadow: 0px 31px 9px rgba(0, 0, 0, 0), 0px 20px 8px rgba(0, 0, 0, 0.01),
      0px 11px 7px rgba(0, 0, 0, 0.05), 0px 5px 5px rgba(0, 0, 0, 0.09),
      0px 1px 3px rgba(0, 0, 0, 0.1);
    width: 20px;
    height: 20px;
  }
  .marble1 {
    width: 28.2px;
    position: relative;
    height: 20px;
  }
  .b5 {
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 8px);
    letter-spacing: -0.03em;
    line-height: 100%;
  }
  .marble-parent {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 5px;
    color: #2c3348;
  }
  .frame-parent1 {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .iconarrow-left-child {
    align-self: stretch;
    flex: 1;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: contain;
  }
  .iconarrow-left {
    width: 18px;
    height: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .but-laout {
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }
  .but-size {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .but-var9 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .butts-parent {
    flex: 1;
    height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px 0px;
    box-sizing: border-box;
  }
  .marble-inner {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px 40px;
    font-size: 12px;
  }
  .marble {
    height: 100%;
    flex: 1;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    color: #1a1a1a;
    font-family: Roboto;
  }
}

@media (max-width: 768px) {
  .marble-odds {
    .frame-container {
      gap: 5px;
    }

    .frame-group {
      max-width: 90px;
      overflow: hidden;
    }

    .frame-parent {
      font-size: 12px;
    }

    .iconmarble {
      width: 35px;
      height: 35px;
      img {
        object-fit: contain;
      }
    }

    .butts-parent {
      width: 100%;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    .marble-inner {
      padding-left: 10px;
      padding-right: 10px;
    }

    .butts {
      width: 100%;
    }
  }
}

@media (max-width: 640px) {
  .marble-odds {
    .iconmarble {
      width: 15px;
      height: 15px;
      img {
        object-fit: contain;
      }
    }
  }
}