@font-face {
    font-family: 'NeoSansArabic';
    src: url('https://fonts.cdnfonts.com/s/29926/NeoSansArabic.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-display: swap
}
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-display: swap
}
:root {
    --text-color: #555555;
    --bk-hd-bg: #eceef2;
    --title-light: #000000;
    --bg-match: #ffffff;
    --Event-Color: #838282;
    --A-Color: #E3E5F0;
    --B-Color: #E3E5F0;
    --C-Color: #ffffff;
    --D-Color: #F1F2F8;
    --Matches-Live: #eeeeee;
    --Primary-A-Color: #39dbbf;
    --Primary-B-Color: #000000;
    --Primary-C-Color: #707488;
    --Primary-D-Color: #131922;
    --Primary-E-Color: #333333;
    --Max-Size: 1200px;
    
    --MatchInfo-Table-Color: #ffffff;
    --Primary-A-Color: #000000;
    --bk-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    --transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    --borderColor: #e2e2e2;
    --Goal-Team-lose: #212121;
    --Goal-Team-win: #02d396;
    --Goal-Team-equal: #000000;
    --Goal-Team-live: #000000;
    --Bg-Match-UI-Top: url("../assets/images/champ-light-bg.svg") no-repeat center center #E3E5F0;
    --Tomorrow_SVG: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24' data-testid='ChevronLeftIcon'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'%3E%3C/path%3E%3C/svg%3E");
    --Yesterday_SVG: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24' data-testid='ChevronRightIcon'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E");
    --Visitor_SVG: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' viewBox='0 0 18 20'%3E%3Cpath d='M2.7 20A2.716 2.716 0 0 1 0 17.273V4.546A2.717 2.717 0 0 1 2.7 1.818H4.5V.909a.9.9 0 1 1 1.8 0v.909h5.4V.909a.9.9 0 1 1 1.8 0v.909h1.8A2.717 2.717 0 0 1 18 4.546V17.273A2.716 2.716 0 0 1 15.3 20Zm-.9-2.727a.905.905 0 0 0 .9.909H15.3a.905.905 0 0 0 .9-.909V9.091H1.8Zm14.4-10V4.546a.906.906 0 0 0-.9-.91H13.5v.91a.9.9 0 1 1-1.8 0v-.91H6.3v.91a.9.9 0 1 1-1.8 0v-.91H2.7a.906.906 0 0 0-.9.91V7.273Z' fill='%23707488'/%3E%3C/svg%3E");
    --UnPinned_SVG: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0004 15L12.0004 22M8.00043 7.30813V9.43875C8.00043 9.64677 8.00043 9.75078 7.98001 9.85026C7.9619 9.93852 7.93194 10.0239 7.89095 10.1042C7.84474 10.1946 7.77977 10.2758 7.64982 10.4383L6.08004 12.4005C5.4143 13.2327 5.08143 13.6487 5.08106 13.9989C5.08073 14.3035 5.21919 14.5916 5.4572 14.7815C5.73088 15 6.26373 15 7.32943 15H16.6714C17.7371 15 18.27 15 18.5437 14.7815C18.7817 14.5916 18.9201 14.3035 18.9198 13.9989C18.9194 13.6487 18.5866 13.2327 17.9208 12.4005L16.351 10.4383C16.2211 10.2758 16.1561 10.1946 16.1099 10.1042C16.0689 10.0239 16.039 9.93852 16.0208 9.85026C16.0004 9.75078 16.0004 9.64677 16.0004 9.43875V7.30813C16.0004 7.19301 16.0004 7.13544 16.0069 7.07868C16.0127 7.02825 16.0223 6.97833 16.0357 6.92937C16.0507 6.87424 16.0721 6.8208 16.1149 6.71391L17.1227 4.19423C17.4168 3.45914 17.5638 3.09159 17.5025 2.79655C17.4489 2.53853 17.2956 2.31211 17.0759 2.1665C16.8247 2 16.4289 2 15.6372 2H8.36368C7.57197 2 7.17611 2 6.92494 2.1665C6.70529 2.31211 6.55199 2.53853 6.49838 2.79655C6.43707 3.09159 6.58408 3.45914 6.87812 4.19423L7.88599 6.71391C7.92875 6.8208 7.95013 6.87424 7.96517 6.92937C7.97853 6.97833 7.98814 7.02825 7.99392 7.07868C8.00043 7.13544 8.00043 7.19301 8.00043 7.30813Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --Circular-Progress: #ffffff;
    --Circular-stroke: #E3E5F0;
    --Time_Display_Progress: #ff0000;
    --Time_Display_Progress_stroke: #39dbbf;
}
.dark-match {
    --text-color: #f8f9fa;
    --bk-hd-bg: #191f34;
    --title-light: #ffffff;
    --bg-match: #000000;  
    --MatchInfo-Table-Color: #000000;
    --Event-Color: rgba(86, 212, 140, 0.2);
    --borderColor: #2b3b4d;
    --A-Color: #0e1016;
    --B-Color: #151e22;
    --C-Color: rgba(21, 30, 34, 0.79);
    --D-Color: rgba(21, 30, 34, 0.79);
    --Primary-A-Color: #39dbbf;
    --Primary-B-Color: #ffffff;
    --Primary-C-Color: #707488;
    --Primary-D-Color: #131922;
    --Primary-E-Color: #b4bec7;
    --Max-Size: 1200px;
    --Goal-Team-lose: rgba(255, 255, 255, 0.5);
    --Goal-Team-win: #39dbbf;
    --Goal-Team-equal: #bfc3d4;
    --Goal-Team-live: #ffffff;
    --Bg-Match-UI-Top: url("../assets/images/Match-BG.webp");
    --Tomorrow_SVG: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b4bec7' viewBox='0 0 24 24' data-testid='ChevronLeftIcon'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'%3E%3C/path%3E%3C/svg%3E");
    --Yesterday_SVG: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b4bec7' viewBox='0 0 24 24' data-testid='ChevronRightIcon'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E");
    --Visitor_SVG: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M2.7,20A2.716,2.716,0,0,1,0,17.273V4.546A2.717,2.717,0,0,1,2.7,1.818H4.5V.909a.9.9,0,1,1,1.8,0v.909h5.4V.909a.9.9,0,1,1,1.8,0v.909h1.8A2.717,2.717,0,0,1,18,4.546V17.273A2.716,2.716,0,0,1,15.3,20Zm-.9-2.727a.905.905,0,0,0,.9.909H15.3a.905.905,0,0,0,.9-.909V9.091H1.8Zm14.4-10V4.546a.906.906,0,0,0-.9-.91H13.5v.91a.9.9,0,1,1-1.8,0v-.91H6.3v.91a.9.9,0,1,1-1.8,0v-.91H2.7a.906.906,0,0,0-.9.91V7.273Z' fill='%23b4bec7'%3E%3C/path%3E%3C/svg%3E");
    --UnPinned_SVG: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23bfc3d4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0004 15L12.0004 22M8.00043 7.30813V9.43875C8.00043 9.64677 8.00043 9.75078 7.98001 9.85026C7.9619 9.93852 7.93194 10.0239 7.89095 10.1042C7.84474 10.1946 7.77977 10.2758 7.64982 10.4383L6.08004 12.4005C5.4143 13.2327 5.08143 13.6487 5.08106 13.9989C5.08073 14.3035 5.21919 14.5916 5.4572 14.7815C5.73088 15 6.26373 15 7.32943 15H16.6714C17.7371 15 18.27 15 18.5437 14.7815C18.7817 14.5916 18.9201 14.3035 18.9198 13.9989C18.9194 13.6487 18.5866 13.2327 17.9208 12.4005L16.351 10.4383C16.2211 10.2758 16.1561 10.1946 16.1099 10.1042C16.0689 10.0239 16.039 9.93852 16.0208 9.85026C16.0004 9.75078 16.0004 9.64677 16.0004 9.43875V7.30813C16.0004 7.19301 16.0004 7.13544 16.0069 7.07868C16.0127 7.02825 16.0223 6.97833 16.0357 6.92937C16.0507 6.87424 16.0721 6.8208 16.1149 6.71391L17.1227 4.19423C17.4168 3.45914 17.5638 3.09159 17.5025 2.79655C17.4489 2.53853 17.2956 2.31211 17.0759 2.1665C16.8247 2 16.4289 2 15.6372 2H8.36368C7.57197 2 7.17611 2 6.92494 2.1665C6.70529 2.31211 6.55199 2.53853 6.49838 2.79655C6.43707 3.09159 6.58408 3.45914 6.87812 4.19423L7.88599 6.71391C7.92875 6.8208 7.95013 6.87424 7.96517 6.92937C7.97853 6.97833 7.98814 7.02825 7.99392 7.07868C8.00043 7.13544 8.00043 7.19301 8.00043 7.30813Z' stroke='%23b4bec7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --Circular-Progress: #263545;
    --Circular-stroke: #263545;
    --Time_Display_Progress: #39dbbf;
    --Time_Display_Progress_stroke: #39dbbf;
}

/* ======  FONT */
@font-face {
    font-family: "Neo Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Neo Sans Arabic"),
        url("../font/Arabic.woff2") format("woff2");
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    list-style-type: none;
    font-weight: 500;
    font-family: "Neo Sans Arabic", Changa, Segoe UI, sans-serif;
}
:focus-visible {
    outline: 0;
}


.HEOne-WEB-Matches_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 30' fill='%23b4bec7'%3E%3Cpath d='M43.8181818,0.00272727273 L2.72727273,0.00272727273 C1.22345455,0.00272727273 0,1.22618182 0,2.73 L0,27.27 C0,28.7738182 1.22345455,29.9972727 2.72727273,29.9972727 L43.8181818,29.9972727 C45.322,29.9972727 46.5454545,28.7738182 46.5454545,27.27 L46.5454545,2.73 C46.5454545,1.22618182 45.322,0.00272727273 43.8181818,0.00272727273 Z M43.8193636,19.8143636 L39.7110909,19.8143636 L39.7110909,10.1856364 L43.8187273,10.1856364 L43.8193636,19.8143636 Z M24.6363636,11.6269091 C25.9792727,12.1656364 26.9299091,13.4740909 26.9299091,15 C26.9299091,16.5259091 25.9792727,17.8344545 24.6363636,18.3730909 L24.6363636,11.6269091 Z M2.72727273,10.1856364 L6.83436364,10.1856364 L6.83436364,19.8143636 L2.72727273,19.8143636 L2.72727273,10.1856364 Z M21.9090909,18.3730909 C20.5661818,17.8343636 19.6155455,16.5259091 19.6155455,15 C19.6155455,13.4740909 20.5661818,12.1655455 21.9090909,11.6269091 L21.9090909,18.3730909 Z M21.9090909,8.784 C19.0419091,9.40845455 16.8882727,11.9576364 16.8882727,15 C16.8882727,18.0423636 19.0419091,20.5915455 21.9090909,21.216 L21.9090909,27.27 L2.72727273,27.27 L2.72727273,22.5416364 L8.198,22.5416364 C8.95109091,22.5416364 9.56163636,21.9310909 9.56163636,21.178 L9.56163636,8.822 C9.56163636,8.06890909 8.95109091,7.45836364 8.198,7.45836364 L2.72727273,7.45836364 L2.72727273,2.73 L21.9090909,2.73 L21.9090909,8.784 Z M43.8181818,27.27 L24.6363636,27.27 L24.6363636,21.216 C27.5035455,20.5915455 29.6571818,18.0423636 29.6571818,15 C29.6571818,11.9576364 27.5035455,9.40845455 24.6363636,8.784 L24.6363636,2.73 L43.8181818,2.73 L43.8185455,7.45836364 L38.3475455,7.45836364 C37.5944545,7.45836364 36.9839091,8.06890909 36.9839091,8.822 L36.9839091,21.178 C36.9839091,21.9310909 37.5944545,22.5416364 38.3475455,22.5416364 L43.8196364,22.5416364 L43.8199091,27.27 C43.8199091,27.27 43.8193636,27.27 43.8181818,27.27 Z' id='Shape'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 25px;
    height: 25px;
    display: block;
}


/* ======  TITLE */

.HEOne-WEB-PIN {
    display: flex;
    align-items: center;
    gap: 6px;
}

.HEOne-WEB-TITLE {
    font-size: 16px;
    color: var(--Primary-A-Color);
}


/* ======  HOME */

.HEOne-WEB-Home {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    max-width: var(--Max-Size);
    margin: 20px auto;
    width: 100%;
    gap: 20px;
}

.HEOne-WEB-Home-Right,
.HEOne-WEB-Home-Left {
    width: 100%;
}

@media (max-width: 720px) {
    .HEOne-WEB-Home {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;
    }
}


/* ======  APP */

.HEOne-WEB-Install-App-PopUp {
    position: fixed;
    bottom: 0;
    display: grid;
    grid-template-columns: 2fr .5fr;
    align-items: center;
    width: 93%;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: var(--B-Color);
    padding: 10px;
    justify-items: center;
    max-width: 350px;
    border-radius: 10px;
    gap: 10px;
    z-index: 99;
    animation: slideUp 0.5s ease-out;
}

.HEOne-WEB-Install-App-PopUp-Right {
    width: 100%;
    display: grid;
    grid-template-columns: .5fr 3fr;
    align-items: center;
    justify-items: center;
    gap: 12px;
}

.HEOne-WEB-App-Name {
    display: grid;
    font-size: 15px;
}

.HEOne-WEB-App-Icon {
    width: 60px;
    height: 60px;
}

.HEOne-WEB-App-Icon img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

#HEOne-WEB-Install-App {
    width: 100%;
    max-width: 100px;
    padding: 4px 15px;
    border: 0;
    background: var(--C-Color);
    color: var(--Primary-B-Color);
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
}

.Close-Install-App {
    position: absolute;
    left: 0;
    top: -22px;
    font-size: 15px;
    color: var(--Primary-E-Color);
    background: var(--B-Color);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
}

#HEOne-WEB-Install-App:hover,
.Close-Install-App:hover {
    color: var(--Primary-A-Color);
}

@media (max-width: 720px) {
    .HEOne-WEB-Install-App-PopUp {
        bottom: 68px;
    }
}

@media (min-width: 990px) {
    .HEOne-WEB-Install-App-PopUp {
        display: none;
    }
}


/* ======  MOBILE MENU */

.HEOne-WEB-Mobile {
    display: none;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: var(--A-Color);
    z-index: 9999;
}

.HEOne-WEB-Mobile-Ico {
    display: grid;
    gap: 2px;
    align-items: center;
    justify-items: center;
    color: var(--Primary-E-Color);
    font-size: 12px;
    padding: 10px 0;
}

@media (max-width: 720px) {
    .HEOne-WEB-Mobile {
        display: grid !important;
    }
}


/* ======  FOOTER */

.HEOne-WEB-Footer {
    display: flex;
    justify-content: space-between;
    width: 88%;
    padding: 10px 20px;
    max-width: var(--Max-Size);
    margin: 20px auto;
    background: var(--B-Color);
    border-radius: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    height: 40px;
}

.HEOne-WEB-Footer-Right a {
    font-size: 16px;
    color: var(--Primary-A-Color);
}

.HEOne-WEB-Footer-Right a:hover {
    color: var(--Primary-E-Color);
}

.HEOne-WEB-Footer-Left ul li a {
    font-size: 15px;
    color: var(--Primary-E-Color);
}

.HEOne-WEB-Footer-Left ul li a:hover {
    color: var(--Primary-A-Color);
}

.HEOne-WEB-Footer-Left ul {
    display: flex;
    gap: 12px;
    align-items: center;
}
.HEOne-WEB-Match-Page {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    width: 100%;
    margin: 0 auto;
    max-width: var(--Max-Size);
    gap: 12px;
}
@media (max-width: 880px) {
    .HEOne-WEB-Match-Page {
        display: block;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .HEOne-WEB-Footer {
        display: none !important;
    }
    body {
        margin-bottom: 100px;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}