:root{
  --color-primary: #EDEDED;
  --color-white: #ffffff;
  --color-white-text: #ffffff;
  --color-black: #000000;
  --color-titletext: #111111;
  --color_subtil:#333333;
  --color-blacktext:#333333;
  --color-gray-text:#333333;
  --color-primary-theme: #4c9eea;
  --color-red: #cb0202;
  --color-green: #80b100;
  --color-orange: #eca73d;
  --color-shawdown: #4c9eea;
  --color-primary-theme-over: #dfedfb;
  --color-primary-theme-over-bg:#edf5fd;
  --color-odds:#ffffff;
  --color-odds-hover:#dfedfb;
  --color-whiteborder:#f4f4f4;
  --color-bluelight:#4C9EEA;
  --color-arrowbackground: #ffffff;
  --color-boderline:#EEEEEE;
  --color-oddtext:#848484;
  --color-legbg:#ffffff;
  --color-linkmenu:#ffffff;
  --color-darkgrey:#080303;
  --color-overwhite:#ffffff;
  --color-borderline:#c9c6cd;
  --color-greyblack:#2b2b2b;
  --color-oddstext: #0a2900;
  --color-oddfulltext:#4C9EEA;
  --color-heedcontentleg:#ffffff;
  --color-unitCardbox:#ffffff;
  --color-bodergrey:#d4d4d4;
  --color-arrowleg:#2b2b2b;
  --color-oddgreen: #4c9eea;
  --color-greyround:#888888;
  --color-betslip: #565656;
  --color-betboderline:#EEEEEE;
  --color-textred:#cb0202;
  --color-bbbtext:#bbbbbb;
  --color-transparent:transparent;
  --color-666text:#666666;
  --color-allbet: #4c9eea;
  --color-dddtext: #DDDDDD;
  --color-eeetext:#eaeaea;
  --color-565text:#565656;
  --color-camptext:#0a2900;
  --color-4b4text:#4b4b4b;
  --color-003a5text:#003a54;
  --color-greybordertext:#e6e6e6;
  --color-fba6text:#fba633;
  --color-transprent: none;
  --color-6e6etext:#6e6e6e;
  --color-003text:#00304a;
  --color-c9c6cdtext:#c9c6cd;
  --color-6a6atext:#6a6a6a;
  --color-ringblackblue: #107ee4;
  --color-ringlightblue:#4ba7dd;
  --color-ringblackgrey: #888888;
  --color-ringlightgrey:#b8b8b8;
  --color-loginbgbtn:#1760f9;
  --color-resultred:#bd4803;
  --color-resultgreen:#80b100;
  --color-rulesgrey:#e1e1e1;  
  --color-rulesgreyboder:#bbbbb5;
  --color-2828text:#282828;
  --color-4C9Etext:#4C9EEA;
  --color-e8f2text:#e8f2fc;
  --color-2828text:#282828;
  --color-e6e6text:#e6e6e6;
  --color-betcontentleg:#e5f6ff;

  --display-cashinfo:none;
  --display-appicon:block;

  --borderline:1px solid #8c8c8c;

  --colorbluelight-gradient:#4c9eea;
  --betbutton-gradient: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
  --betbuuttonlight-gradient: linear-gradient(136.24deg, #B9DDFF 0%, #4c9eea 100%);
  --loginbar-gradient:linear-gradient(90deg,#248afd,#0c77ef);

  --box-shadow:0 0 5px rgba(112, 112, 112, 0.1);
  --shadow-Market-odds:1px 1px 6px 0 rgba(0,0,0,.1);
  --shadow-populardesktop-arrow:0 0 10px rgba(0,0,0,.1);
  --shodow-yellow-btn:0 0 6px rgba(0, 0, 0, 0.1);
  --shodow-login:0 4px 20px 0 rgba(0,123,255,.14), 0 7px 10px -5px rgba(0,82,234,.4);

  --fivepx:0;
  --tenpx:0;
  --fifteenpx:0;

  --legbgbarimg-url: url("../Images/toolbar.png");
  --historyimg-url: url("../Images/history-img.svg");
  --historyimg-url: url("../Images/history-img.svg");
  --liveimg-url: url("../Images/live-img.svg");
  --betimg-url: url("../Images/bet-img.svg");
  --refimg-url: url("../Images/ref-img.svg");
  --infoimg-url: url("../Images/info-img.svg");
  --creadcartimg-url: url("../Images/creadcart-img.svg");
  --statementimg-url: url("../Images/statement-img.svg");
  --resultsimg-url: url("../Images/results-img.svg");
  --leaguemg-url: url("../Images/league-img.svg");
  --log-outimg-url: url("../Images/log-out-img.svg");
  --announcementsimg-url: url("../Images/announcements-img.svg");
  --changepasswordimg-url: url("../Images/changepassword-img.svg");
  --lockimg-url: url("../Images/iconmonstr-lock-26.svg");
  --deleteimg-url: url("../Images/delete-img.svg");
  --oddscloseimg-url: url("../Images/odds-close-img.svg");
  --betslipimg-url: url("../Images/bet-slip-img-white.svg");
  --arrowbetimg-url: url("../Images/arrow-bet-img.svg");
  --arrowselectbetimg-url: url("../Images/SportIconNew/icon_arrow_one_right_blue.png");
  --loginbgimg-url:url("../Images/auth-bg.png");
  --theme-light-url:url("../Images/sun.svg");
  --theme-dark-url:url("../Images/moon-stars.svg");
  --theme-logo_icon-url:url("../Images/logo_black.png");
}

/* dark blackground */
[bgtheme='2'] {
  --color-primary: #131524;
  --color-white: #1b1e2f;
  --color-white-text: #ffffff;
  --color_subtil: #97A7B6;
  --color-blacktext:#333333;
  --color-gray-text:#dbdbdb;
  --color-black: #ffffff;
  --color-titletext: #ffffff;
  --color-primary-theme: #462fcd;
  --color-red: #e76969;
  --color-green: #84b752;
  --color-orange: #eca73d;
  --color-shawdown: #462fcd;
  --color-primary-theme-over: #fba633;
  --color-primary-theme-over-bg:#272b43;
  --color-odds:#233551;
  --color-odds-hover:#17253b;
  --color-whiteborder:#202b3b;
  --color-bluelight:#3ed484;
  --color-arrowbackground: #131524;
  --color-boderline:#3e4c64;
  --color-oddtext:#fba633;
  --color-legbg:#282c45;
  --color-linkmenu:#61489e;
  --color-darkgrey:#848484;
  --color-overwhite:#23273d;
  --color-borderline:#0f101c;
  --color-greyblack:#fba633;
  --color-oddstext: #ffffff;
  --color-oddfulltext:#fba633;
  --color-heedcontentleg:#2d3643;
  --color-unitCardbox:#161f2c;
  --color-bodergrey:#2d3643;
  --color-arrowleg:#ffffff;
  --color-oddgreen: #84b752;
  --color-greyround:#ffba5d;
  --color-betslip: #97A7B6;
  --color-betboderline:#3e4c64;
  --color-textred:#e76969;
  --color-bbbtext:#ffffff;
  --color-transparent:#2a3546;
  --color-666text:#d4d4d4;
  --color-allbet: #2e24d8;
  --color-dddtext: #3e4c64;
  --color-eeetext:#233551;
  --color-565text:#fff;
  --color-camptext:#ffffff;
  --color-4b4text:#ffffff;
  --color-003a5text:#ffffff;
  --color-greybordertext:#2d3643;
  --color-fba6text:#61489e;
  --color-transprent: #233551;
  --color-6e6etext:#ffffff;
  --color-003text:#ffffff;
  --color-c9c6cdtext:#61489e;
  --color-6a6atext:#ffffff;
  --color-ringblackblue: #2e24d8;
  --color-ringlightblue:#0089f1;
  --color-loginbgbtn:#2e24d8;
  --color-resultred:#e76969;
  --color-resultgreen:#84b752;
  --color-rulesgrey:#2d3643; 
  --color-rulesgreyboder:#455367;
  --color-2828text:#ffffff;
  --color-4C9Etext:#ffffff;
  --color-e8f2text:#131524;
  --color-2828text:#999999;
  --color-e6e6text:#282c45;
  --color-betcontentleg:#2d3643;

  --display-cashinfo:none;
  --display-appicon:block;

  --borderline:0;

  --colorbluelight-gradient:linear-gradient(90deg, #462fcd 0%, #462fcd 100%);
  --betbutton-gradient: linear-gradient(135deg, #323c4b 0%, #2d3644 100%);
  --betbuuttonlight-gradient: linear-gradient(136.24deg, #00a4f6 0%, #0069ec 100%);
  --loginpagebg-gradient: linear-gradient(149deg,#24284d 16%,#07080f 85%);
  --loginbar-gradient:linear-gradient(90deg,#382cfc,#2e24d8);

  --box-shadow:0 2px 6px #000413;
  --shadow-Market-odds:1px 1px 6px 0 #000413;
  --shadow-populardesktop-arrow:0 0 10px #000413;
  --shodow-yellow-btn:0 0 6px #000413;
  --shodow-login:0 1px 10px 0 #382cfc, 0 1px 5px -5px #2e24d8;
  
  --fivepx:5px;
  --tenpx:10px;
  --fifteenpx:15px;

  --legbgbarimg-url: url("../Images/toolbar-black.png");
  --historyimg-url: url("../Images/history-img-black.svg");
  --liveimg-url: url("../Images/live-img-black.svg");
  --betimg-url: url("../Images/bet-img-black.svg");
  --refimg-url: url("../Images/ref-img-black.svg");
  --infoimg-url: url("../Images/info-img-black.svg");
  --creadcartimg-url: url("../Images/creadcart-img-black.svg");
  --statementimg-url: url("../Images/statement-img-black.svg");
  --resultsimg-url: url("../Images/results-img-black.svg");
  --leaguemg-url: url("../Images/league-img-black.svg");
  --log-outimg-url: url("../Images/log-out-img-black.svg");
  --announcementsimg-url: url("../Images/announcements-img-black.svg");
  --changepasswordimg-url: url("../Images/changepassword-img-black.svg");
  --lockimg-url: url("../Images/iconmonstr-lock-26-white.svg");
  --deleteimg-url: url("../Images/delete-img-black.svg");
  --oddscloseimg-url: url("../Images/odds-close-img-black.svg");
  --betslipimg-url: url("../Images/bet-slip-img-white.svg");
  --arrowbetimg-url: url("../Images/arrow-bet-img-white.svg");
  --arrowselectbetimg-url: url("../Images/SportIconNew/icon_arrow_one_right_greenblue.png");
  --loginbgimg-url: linear-gradient(149deg,#24284d 16%,#07080f 85%);
  --theme-light-url:url("../Images/sun-black.svg");
  --theme-dark-url:url("../Images/moon-stars-black.svg");  
  --theme-logo_icon-url:url("../Images/logo_white.png");
}

.icon-Xbutton{
  width: 40px;
  height: 45px;
  display: inline-flex;
  background:var(--color-primary-theme);
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.odds-card {
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-white);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--color-bodergrey);
}

/* ==========================================
   2. Header Settings
   ========================================== */
.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-heedcontentleg);
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}

.header .header_title {
  padding: 12px 0;
  color: var(--color-titletext);
  background-color:var(--color-primary-theme-over-bg) ;
  display: flex;
  justify-content: center;
  height: 17px;
  gap: 16px;
  cursor: pointer;
}

/* ==========================================
   3. Odds Tables Grid
   ========================================== */
.tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-white);
}

.team-table {
  padding: 10px 16px;
  margin-bottom: 20px;
}

.team-table:first-child {
  border-right: 1px solid var(--color-boderline);
}

/* Rows & Text layout */
.team-table .row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}

.team-table .row::before{
  content: none !important;
  display: none !important;
}

.team-table .row.head {
  font-size: 14px;
  color: var(--color_subtil);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-boderline);
}

.row.head .row_head_title {
  text-align: left;
}

.row.head .row_head_subtil {
  text-align: center;
}

.player {
  font-size: 14px;
  color: var(--color-titletext);
  width: 100%;
  text-align: left;  
}

/* Interactive Standard Odds Blocks */
.odd {
  height: 34px;
  border-radius: 8px;
  background: var(--betbutton-gradient);
  box-shadow: var(--shadow-Market-odds);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-oddstext);
  cursor: pointer;
  border: 1px solid var(--color-whiteborder);
  transition: background-color 0.15s ease;
}

.odd app-odd-goal-scorer,
.odd app-odd-only,
.odd .odds-only > div, 
.odd-cell app-odd-goal-scorer,
.odd-cell app-odd-only,
.odd-cell .odds-only > div,
.status-merged-cell app-odd-goal-scorer,
.status-merged-cell app-odd-only,
.status-merged-cell .odds-only > div {
  display: flex;
  width: 100%;
  justify-content: center;
}

.odd:hover {
  background: var(--color-odds-hover);
}

/* ==========================================
   4. Status Container (Others / No Goal)
   ========================================== */
.no-goal-wrapper {
  margin: 0 6px 6px;
  border-top: 1px solid var(--color-boderline);
  overflow: hidden;
  background: var(--color-white);
}

.status-header-row {  
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--color-boderline);
}

.status-header-row .status-header-row-title {
  text-align: center;
  font-size: 14px;
  padding: 10px 0;
  color: var(--color_subtil);
}

.status-content-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-boderline);
  padding: 6px 0;
}

.status-content-row:last-child {
  border-bottom: none;
}

.status-content-row .odd-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-content-row .status-title {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  font-size: 13px;
  color: var(--color-titletext);
}

/* Bottom Highlighted Buttons */
.highlight-odd, 
.highlight-odd.no-goal {
  height: 34px;
  border-radius: 8px;
  background: var(--betbutton-gradient);
  box-shadow: var(--shadow-Market-odds);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-oddstext);
  align-self: center;
  justify-self: center;
  width: 120px;
  cursor: pointer;
  border: 1px solid var(--color-whiteborder);
  transition: background-color 0.15s ease;
  margin-right: 8px;
}

.highlight-odd:hover, 
.highlight-odd.no-goal:hover {
  background: var(--color-odds-hover);
}

.highlight-odd.no-goal {
  width: 220px;
}

/* No Goal Row Grid Alignment Spans */
.no-goal-row .status-merged-cell {
  grid-column: 2 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--color-white);
}

/* ==========================================
   5. Footer Action Button
   ========================================== */
.view-btn {
  background: var(--colorbluelight-gradient);
  background-color: var(--color-primary-theme);
  color: var(--color-white-text);
  text-align: center;
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.odd .selectedMix, .odd .selectedMix:hover, .odd-cell .selectedMix, .odd-cell .selectedMix:hover, .status-merged-cell .selectedMix, .status-merged-cell .selectedMix:hover{
  background: var(--color-primary-theme)!important;
  color: var(--color-white-text);
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
}

.PositiveOddsClass{
  display: flex;
  width: 100%;
  justify-content: center;
}

.goal_tilcontent{
  font-size: 14px;
  width: 100%;
  color: #ffffff;
  padding-left: 10px;
  display: table-cell;
  text-align: center;
}

/* ==========================================
   6. Mobile Responsiveness Layout View
   ========================================== */
@media (max-width: 768px) {
  .header {
    grid-template-columns: 1fr 1fr;
  }

  .header div {
    font-size: 14px;
    padding: 11px 0;
  }  

  .header .header_title.active {
    background: var(--color-primary-theme);
    color: var(--color-white-text);
  }

  .tables {
    grid-template-columns: 1fr;
  }

  .team-table {
    padding: 12px 10px 0;
  }

  .team-table:first-child {
    border-right: none;
    border-bottom: none;
  }

  .row {
    grid-template-columns: 1.8fr 0.8fr 0.8fr 0.8fr;
    gap: 5px;
    margin: 5px 0;
  }

  .row.head {
    padding: 8px 16px 14px;
    margin-bottom: 6px;
  }

  .player {
    font-size: 14px;
  }

  .odd {
    height: 34px;
    font-size: 12px;
  }

  .view-btn {
    margin-top: 12px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .no-goal-wrapper {
    margin: 0 10px 12px;
  }

  .status-content-row {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    align-items: center;
    column-gap: 8px;
  }

  .odd-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .status-header-row div {
    font-size: 11px;
    padding: 9px 0;
  }

  .status-content-row div {
    height: 38px;
    font-size: 14px;
  }

  .highlight-odd { 
    width: 100%;
    height: 28px !important;
    font-size: 13px;
    white-space: nowrap;
  }

  .no-goal-row .status-merged-cell {
    grid-column: 2 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--color-bodergrey);
  }
  
  .mobile-hidden {
    display: none;
  }
}