/* GENERAL */
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Cairo&display=swap');

:root,[data-bs-theme="light"] {
    --bs-primary : #1D57AD;
    --bs-indigo : #6610f2;
    --bs-success : #17A589;
    --bs-warning : #FFC107;
    --bs-danger : #E60033;
    --bs-dark : #20232A;
    --theme-navbar-bg: rgb(21 41 71);
    --theme-navbar-color: rgb(255 255 255 / 90%);
    --theme-color-00: rgb(21 41 71);
    --theme-color-01: rgb(239 237 237 / 90%);
    --theme-color-02: rgb(250 250 160 / 90%);
    --theme-color-03: rgb(0 100 200);
    --theme-color-04: rgb(5 125 245);
    --theme-color-05: rgb(255 255 255 / 90%);
    --theme-color-06: rgb(205 225 255);
    --theme-widgets-color: rgb(255 255 255 / 90%);
    --theme-events-color: rgb(255 255 255 / 90%);
    --theme-events-group-bg: none;
    --theme-events-group-btn: none;
    --scrollbar : transparent;
    --scrollbar-track : transparent;
    --scrollbar-thumb : rgba(30, 40, 45, 0.5);
    --scrollbar-thumb-hover : #1d252b;
    --theme-stream-bg: rgb(21 41 71);
    --theme-stream-color: rgb(255 255 255 / 90%);
    --theme-channel-logo-bg: rgb(255 255 255 / 90%);
    --theme-channel-bg: rgb(220 220 220/ 30%);
    --theme-channel-border: rgb(220 220 220);
}

[data-bs-theme="dark"] {
    --theme-navbar-bg: rgb(5 30 55 / 80%);
    --theme-navbar-color: rgb(255 255 255 / 90%);
    --theme-color-00: rgb(5 30 55 / 80%);
    --theme-color-01: rgb(239 237 237 / 70%);
    --theme-color-02: rgb(250 250 160 / 70%);
    --theme-color-03: rgb(10 40 100 / 80%);
    --theme-color-04: rgb(5 30 55 / 80%);
    --theme-color-05: rgb(255 255 255 / 80%);
    --theme-color-06: rgb(10 40 80 / 50%);
    --theme-widgets-color: var(--bs-body-color);
    --theme-events-color: var(--bs-body-color);
    --theme-events-group-bg: rgb(10 40 80 / 50%);
    --theme-events-group-btn: rgb(10 40 100 / 80%);
    --scrollbar : rgb(239 237 237 / 70%);
    --scrollbar-track : transparent;
    --scrollbar-thumb : rgba(30, 40, 45, 0.5);
    --scrollbar-thumb-hover : #1d252b;
    --theme-stream-bg: rgb(5 30 55 / 80%);
    --theme-stream-color: rgb(255 255 255 / 90%);
    --theme-channel-logo-bg: rgb(255 255 255 / 10%);
    --theme-channel-bg: rgb(255 255 255 / 10%);
    --theme-channel-border: rgb(255 255 255 / 50%);
}

/* BUTTONS */
.btn-primary {background-color: var(--bs-primary);color:#FFF !important;border-color: var(--bs-primary);}
.btn-primary:hover {background-color: #043E94;border-color: #043E94;}
.btn-success {background-color: var(--bs-success);color:#FFF !important;border-color: var(--bs-success);}
.btn-success:hover {background-color: #148F77;border-color: #148F77;}
.btn-warning {background-color: var(--bs-warning);color:var(--bs-dark) !important;border-color: var(--bs-warning);}
.btn-warning:hover {background-color: #ffb006;border-color: #ffb006;}
.btn-danger {background-color: var(--bs-danger);color:#FFF !important;border-color: var(--bs-danger);}
.btn-danger:hover {background-color: #CC0033;border-color: #CC0033;}
.btn-dark {background-color: var(--bs-dark);color:#FFF !important;border-color: var(--bs-dark);}
.btn-dark:hover {background-color: #0E1112;border-color: #0E1112;}

html,body {padding:0;margin:0;overflow-x: hidden;color: #333;}
[data-bs-theme="dark"] body {color: var(--bs-body-color);}

* {box-sizing: border-box;font-family: 'Poppins', 'Cairo', sans-serif;}

* ::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}
* ::-webkit-scrollbar{background-color:var(--scrollbar);width:14px}
* ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:8px;background-clip:content-box;background-color:var(--scrollbar-thumb)}
* ::-webkit-scrollbar-thumb:hover{border:2px solid transparent;background-color:var(--scrollbar-thumb-hover)}

a {text-decoration: none;}

/* GENERAL */
/* body {font-size: 16px;background-color: #f2f2f2;color: #53535f;line-height: 1.5;} */

nav#home-navbar {padding-inline: 1.5rem;}
nav.navbar-dark {background: var(--theme-navbar-bg) !important; color: var(--theme-navbar-color) !important;}
.navbar-brand {margin-inline-end: 2rem;padding-block: 0.5rem;}
.navbar-brand img {max-width:260px;min-height: 40px;width:auto;height: auto;}
nav .navbar-nav {padding-block-start: 0.25rem !important;}
nav .nav-link {padding-inline: 0.75rem !important;}
nav .menuImage {height: 25px;margin-inline-end: 0.25rem;}
nav .dropdown-item {display: flex;align-items: center;padding: 0.25rem 0.5rem;}

main {position:relative;width:100%;min-height: 100vh;padding:0;margin:0;}

main .content {width: 100%;/* min-height: calc(100vh - 40px - 2rem); */padding:1.5rem;padding-bottom: 80px;}

.main-wrapper {position: relative;display: flex;flex-flow: column;width: calc(100% - 330px - 1rem);gap: 1rem;}

.home-sidebar, .stream-sidebar {position: relative;display: flex;flex-flow: column;width: 330px;gap: 1rem;}
.sidebar-wdiget, .sidebar-leagues {position: relative;display: block;background: var(--theme-color-00);color: #fff;padding: 15px;border-radius: 12px;overflow: hidden;}
.widget-title {width: 100%;text-align: center;font-size: 1.2rem;margin-bottom: 0.5rem;font-weight: medium;}
.widget-links {position: relative;display: flex;align-items: center;gap: 0.25rem;color: #000000;font-size: 0.95rem;width: 100%;padding: 0.25rem 0.5rem;background: var(--theme-color-01);border-radius: 0.5rem;}
.widget-links:hover {background: var(--theme-color-02);color: #000000;}
.widget-icons {width: 25px;height: 20px;display: flex;align-items: center;justify-content: center;}
.widget-icons img {max-width: 25px;max-height: 20px;}
.chatbox-widget {width: 100%;height: 500px;}

.main-ad {width: 100%;display: flex;align-items: center;justify-content: center;padding: 0.5rem;overflow: hidden;background: var(--theme-color-00);border-radius: 12px;}

.stream-header {width: 100%;display: flex;align-items: start;justify-content: space-between;padding: 1rem;overflow: hidden;background: var(--theme-stream-bg);color: var(--theme-stream-color);border-radius: 12px;}
.stream-player {position: relative;background: var(--theme-stream-bg);color: var(--theme-stream-color);border-radius: 12px;width: 100%;padding: 1rem;padding-top: calc(56.25% + 1rem);}
.stream-player iframe {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    border: 0;
}
.stream-links {width: 100%;display: flex;flex-flow:column;align-items: start;justify-content: start;padding: 1rem;background: var(--theme-stream-bg);color: var(--theme-stream-color);border-radius: 12px;gap:0.5rem}

.events-date {border-radius: 12px;padding-block: 0.25rem;padding-inline: 1rem;text-transform: uppercase;}

.events {position: relative;display: flex;flex-flow: column;gap: 1rem;color: var(--theme-events-color);}
.events .accordion-button.collapsed {background: var(--theme-events-group-btn) !important;}
.league-events {background: var(--theme-events-group-bg);}

.events-section {position: relative;display: flex;flex-flow: column;gap: 0.5rem;color: var(--theme-events-color);}
.section-titlte {position: relative;display: flex;align-items: center;gap: 0.25rem;background: var(--theme-color-03);padding: 8px;border-radius: 12px;text-transform: capitalize;}
.league-icon {position: relative;display: flex;align-items: center;justify-content: center;width: 40px;height: 30px;background: var(--theme-color-05);border-radius: 8px;padding: 2px;}
.league-icon img {max-width: 36px;max-height: 26px;}
.section-event {position: relative;display: flex;flex-flow: column;justify-content: center;align-items: center;background: var(--theme-color-04);border-radius: 12px;overflow: hidden;border: 2px solid var(--theme-color-06);}
.event-countdown {position: relative;display: flex;align-items: center;justify-content: center;width: 400px;padding: 0.25rem 0.5rem;font-size: 0.9rem;}
.event-details {position: relative;display: flex;align-items: center;gap: 0.5rem;width: 100%;padding: 0;font-size: 1rem;flex-flow: wrap;}

.event-time {position: relative;display: flex;align-items: center;gap: 0.25rem;width: 100px;justify-content: center;padding: 0.5rem;}
.event-competitors {position: relative;display: flex;align-items: center;justify-content: center;gap: 0.25rem;width: calc(100% - 620px - 1.5rem);padding-block: 0.5rem;}
.event-separate {display: flex;gap: 0.25rem;align-items: center;justify-content: center;width: 50px;}
.event-home-team {position: relative;display: flex;align-items: center;justify-content: end;gap: 0.25rem;flex-flow: row-reverse;width: calc(50% - 25px);}
.event-visitor-team {position: relative;display: flex;align-items: center;justify-content: start;gap: 0.25rem;width: calc(50% - 25px);}
.event-button {display: flex;align-items: center;justify-content: center;width: 120px;padding: 0.5rem;}
.event-button img {max-width: 90px;max-height: 25px;}

.team-logo {display: flex;align-items: center;justify-content: center;width: 26px;height: 26px;}
.team-logo img {max-width: 20px;max-height: 20px;}

.league-titlte {position: relative;display: flex;align-items: center;gap: 0.5rem;background: var(--theme-color-03);padding: 12px;border-radius: 12px;text-transform: capitalize;font-size: 1.5rem;}
.league-titlte .league-icon {position: relative;display: flex;align-items: center;justify-content: center;width: 80px;height: 60px;background: var(--theme-color-05);border-radius: 8px;padding: 2px;}
.league-titlte .league-icon img {max-width: 76px;max-height: 56px;}

.channel_logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    overflow: hidden;
    padding: 10px;
    border-radius: 10px;
    background: var(--theme-channel-logo-bg);
}

.channel_logo img {
    max-width: 180px;
    max-height: 180px;
}

.sports {
    position: relative;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.sport-card {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    gap: 0.5rem;
    width: 10rem;
    padding: 0.5rem;
    font-size: 0.9rem;
}

.sport-card .sport-icon {width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;overflow: hidden;}

.sport-card .sport-icon img {
    max-width: 40px;
    max-height: 40px;
}

.sport-card .sport-name {
    text-align: center;
    text-transform: capitalize;
    line-height: 1.3;
}

.channels {
    position: relative;
    display: flex;
    flex-flow: wrap;
    gap: 1rem;
}

.channel-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-flow: column;
    width: 25%;
    max-width: 250px;
    background: var(--theme-channel-bg);
    border: 1px solid var(--theme-navbar-bg);
    border-radius: 10px;
    overflow: hidden;
}

.channel-card .channel-logo-wrapper {
    width: 100%;
    height: 150px;
    padding-block: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.channel-card .channel-logo-wrapper .channel-logo {
    max-width: 90%;
    max-height: 150px;
}

.channel-card .channel-name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: var(--theme-navbar-bg);
    color: var(--theme-navbar-color);
}


.contact-us {position:relative;display:flex;flex-flow:wrap;justify-content:center;align-items: center;}
.contact-us img {max-height:400px;max-width:80%;width:auto;height: auto;}

footer {position:absolute;display: flex;flex-flow: wrap;font-size: 13px;bottom:0;right:0;left:0;background: var(--theme-color-00) !important;color:#FFF;width:100%;height:50px;line-height: 50px;padding: 0 30px;}
footer a {color:#F5BB3E}
footer a:hover {color:#F2A604}
.footer-start {text-align: left;}
.footer-end {text-align: right;}


.nav-link.active {font-weight: bold;}

.fa-sm {font-size: 0.75rem;}
.fa-xs {font-size: 0.5rem;}
.nav-timer, .nav-menu {width: auto !important;}


/* RESPONSIVE */
@media screen and (max-width: 1199px) {
 .container {max-width: 100%;margin: 0;}
 nav#home-navbar, main .content {padding-inline: 0;}
 .home-sidebar {width: 200px;}
 .main-wrapper {width: calc(100% - 200px - 1rem)}
 .home-sidebar .sidebar-wdiget {display: none;}
 .home-sidebar .widget-title {font-size: 1rem;}
 .home-sidebar .widget-icons {width: 20px;}
 .home-sidebar .widget-icons img {max-width: 20px;}
 .home-sidebar .widget-links {padding-inline: 0.25rem;font-size: 0.75rem;}
 .event-countdown {order: 3;background: var(--theme-color-06);color: var(--bs-body-color);width:100%;}
 .event-competitors {width: calc(100% - 220px - 1rem);}
 .event-button {order: 2;}
}
@media screen and (max-width: 991px) {
 .nav-timer, .nav-menu {width: 100% !important;}
 .container {max-width: 100%;margin: 0;}
 .main-wrapper {width: 100%;}
 .sports {gap: 0.5rem;}
 .sport-card {
    width: 8.5rem;
    font-size: 0.8rem;
}
 .stream-wrapper .stream-sidebar {width: 100%;}
 .stream-wrapper .stream-sidebar .chatbox-widget {height: 360px;} .home-sidebar {display: none;}
 .footer-start,.footer-end {text-align: center;}
 footer {height:60px;line-height: 30px;padding:0 15px}
}
@media screen and (max-width: 767px) {
 .container {max-width: 100%;margin: 0;}
 .event-details {font-size: 0.9rem;}
 .event-details .event-time {width: 80px;}
 .event-details .event-separate {width: 40px;}
 .event-details .event-competitors {width: calc(100% - 180px);}
 .event-details .event-home-team, .event-details .event-visitor-team {width: calc(50% - 20px);}
}
@media screen and (max-width: 575px) {
 .container {max-width: 100%;margin: 0;}
 .event-details .event-separate {display: none;}
 .event-details .event-competitors {flex-flow: column;}
 .event-details .event-home-team, .event-details .event-visitor-team {width: 100%; justify-content: start;flex-flow: row;}
}

/* TABLES */
.table-image {width: auto;height: auto;height: 30px;}
.table-flag {width: auto;height: auto;height: 30px;}

/* 
.event-countdown.is-live {
    background: rgb(48 175 108 / 75%);
}

.event-countdown.is-ended {
    background: rgb(193 25 25 / 75%);
}

.event-countdown.is-upcoming {
    background: rgb(220 150 31 / 75%);
}
*/