@charset "UTF-8";
/*
	Author::   Evolumedia Technologies
	Projects:: Kiniela Mundial
	Version::  2026.1
	Screen Size: 576, 768, 992, 1200, 1400

	========== Table Of Content ==========

	1. Login Screen
	2. Main Site

	============ ============ ============
*/

:root {
    --svg-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4gPHBhdGggZD0iTTEyIDRDNCA0IDEgMTIgMSAxMkMxIDEyIDQgMjAgMTIgMjBDMjAgMjAgMjMgMTIgMjMgMTJDMjMgMTIgMjAgNCAxMiA0IHogTSAxMiA3QzE0Ljc2MSA3IDE3IDkuMjM5IDE3IDEyQzE3IDE0Ljc2MSAxNC43NjEgMTcgMTIgMTdDOS4yMzkgMTcgNyAxNC43NjEgNyAxMkM3IDkuMjM5IDkuMjM5IDcgMTIgNyB6IE0gMTIgOSBBIDMgMyAwIDAgMCA5IDEyIEEgMyAzIDAgMCAwIDEyIDE1IEEgMyAzIDAgMCAwIDE1IDEyIEEgMyAzIDAgMCAwIDEyIDkgeiIgZmlsbD0iIzIxMjUyOWJmIiAvPjwvc3ZnPg==");
    --svg-eye-close: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBkPSJNNC4yMDcwMzEyIDIuNzkyOTY4OEwyLjc5Mjk2ODggNC4yMDcwMzEyTDUuMDc2MTcxOSA2LjQ5MDIzNDRDMi4xOTkzNDQ3IDguODM4MjAwNSAxIDEyIDEgMTJDMSAxMiA0IDIwIDEyIDIwQzE0LjA3NTU2OCAyMCAxNS44MDYwMDMgMTkuNDU0NzMgMTcuMjQyMTg4IDE4LjY1NjI1TDE5Ljc5Mjk2OSAyMS4yMDcwMzFMMjEuMjA3MDMxIDE5Ljc5Mjk2OUw0LjIwNzAzMTIgMi43OTI5Njg4IHogTSAxMiA0QzEwLjc4OCA0IDkuNzA1Nzk2OSA0LjE5OTcxODcgOC43MTY3OTY5IDQuNTExNzE4OEwxMS4yNzczNDQgNy4wNzIyNjU2QzExLjUxNDM0NCA3LjAzNzI2NTYgMTEuNzUzIDcgMTIgN0MxNC43NjEgNyAxNyA5LjIzOSAxNyAxMkMxNyAxMi4yNDcgMTYuOTYyNzM0IDEyLjQ4NTY1NiAxNi45Mjc3MzQgMTIuNzIyNjU2TDIwLjM1NzQyMiAxNi4xNTIzNDRDMjIuMjA0NDIyIDE0LjEwMjM0NCAyMyAxMiAyMyAxMkMyMyAxMiAyMCA0IDEyIDQgeiBNIDcuODMzOTg0NCA5LjI0ODA0NjlMOS4yOTY4NzUgMTAuNzEwOTM4QzkuMTA4MTU5NSAxMS4xMDA4MjkgOSAxMS41MzY1NjYgOSAxMkM5IDEzLjY1NyAxMC4zNDMgMTUgMTIgMTVDMTIuNDYzNDM0IDE1IDEyLjg5OTE3MSAxNC44OTE4NCAxMy4yODkwNjIgMTQuNzAzMTI1TDE0Ljc1MTk1MyAxNi4xNjYwMTZDMTMuOTYyMDM5IDE2LjY4OTc1OCAxMy4wMTkyNzEgMTcgMTIgMTdDOS4yMzkgMTcgNyAxNC43NjEgNyAxMkM3IDEwLjk4MDcyOSA3LjMxMDI0MTUgMTAuMDM3OTYxIDcuODMzOTg0NCA5LjI0ODA0NjkgeiIgZmlsbD0iIzIxMjUyOWJmIiAvPjwvc3ZnPg==");
    --group-a: #6AC078;
    --group-b: #ED1B28;
    --group-c: #E9EA7C;
    --group-d: #1068B2;
    --group-e: #F58121;
    --group-f: #006B59;
    --group-g: #B1A8D3;
    --group-h: #58BBB6;
    --group-i: #4F3B98;
    --group-j: #F8AB9C;
    --group-k: #EE3F74;
    --group-l: #80001F;
    /*
    --kiniela-primary: #D7270D;
    --kiniela-secondary: #B32717;
    --bs-btn-hover-bg: #B32717 !important;
    --bs-btn-hover-border-color: #B32717 !important;
     */
}

[data-bs-theme=dark]{
    color-scheme: dark;
    /* --kiniela-secondary: #B32717 !important; */
}

.bg-app-custom{
    background-color: var(--kiniela-primary) !important;
}

.hide{
    display: none !important;
}

.vertical-middle{
    vertical-align: middle !important;
}

.app-menubar-tabs{
    z-index: 10;
}

.text-in-black{
    color: #FFF;
}

[data-bs-theme=dark] .text-in-black{
    color: rgb(153, 153, 153);
}

.match-of-total{
    vertical-align: center;
    font-size: 32px;
}

[data-bs-theme=dark] .match-of-total{
    color: rgb(188, 188, 188)
}
/* --------------- SIGNUP --------------- */
.auth-wrapper{
    /* background: linear-gradient(0deg, var(--bs-body-bg) 0.46%, rgba(var(--kiniela-primary-rgba), 0.1) 100.05%); */
    background-color: #FDFDFF;
}

.invalid-feedback{
    padding-left: 15px;
}
/* --------------- SIGNUP --------------- */
.login-wrapper{
    background-color: #f8f8fa !important;
}

[data-bs-theme=dark] .login-wrapper{
    background-color: rgb(40,40,40) !important;
}
/* ------------- DASHBOARD ------------ */
.dashboard-border{
    border-right: 1px solid rgb(238, 238, 243);
}

[data-bs-theme=dark] .dashboard-border{
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-border-matches{
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.custom-card {
    height: fit-content;
}

.dashboard-user-points{
    display: grid;
    place-items: center; /* Centers horizontally and vertically */
}

.dashboard-points{
    font-size: 60px;
}

.dashboard-muted{
    font-size: 18px !important;
    text-align: center;
}

.dashboard-tr{
    line-height: normal !important;
}


/* --------------- MAIN --------------- */
html[data-app-sidebar="mini"] #app-header-logo{
    display: block;
}

html[data-app-sidebar="full"] #app-header-logo{
    /* display: none; */
}

html[data-app-sidebar="mini-hover"] #app-header-logo{
    /* display: none; */
}

.app-page-head .breadcrumb{
    opacity: 1 !important;
}

.breadcrumb-item a, .breadcrumb-item.active, .breadcrumb-item.active:before {
    color: var(--kiniela-primary) !important;
}

.app-wrapper{
    min-height: calc(100vh - var(--app-header-height) - var(--footer-height, 0px)) !important;
    background-color: rgba(255,255,255,0.0);
    background-image: radial-gradient(#0d0f3170 0.5px, rgba(255,255,255,0) 0.5px);
    background-size: 10px 10px;
    z-index: 0 !important;
}

a{
    color: var(--kiniela-secondary);
}

.btn-kiniela{
    color: var(--bs-kiniela-text);
    background-color: var(--bs-kiniela);
    border-color: var(--bs-kiniela);
}

.btn-kiniela:hover{
    color: var(--bs-kiniela-text);
    background-color: var(--bs-kiniela-secondary);
    border-color: var(--bs-kiniela-secondary);
}

.btn-kiniela-icon{
    font-size: 1.25rem;
}

.offcanvas-backdrop{
    background-color: #00000075 !important;
}

.circle-with-text {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* background-color: var(--bs-dark); */
    /* color: white; */
    text-align: center;
    /* Center the text using Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Optional styling */
    font-size: 1.2em;
    padding: 10px;
}

.app-toggler svg{
    transform: scaleX(-1);
    transform-origin: center center;
    margin-left: 2px;
}

:has(.app-menubar-tabs) .app-toggler::after {
    background-color: #000 !important;
}

.modal-backdrop {
    background-color: #000000; /* Change to your desired color, e.g., red */
    opacity: 0.8; /* Adjust opacity as needed (default is around 0.5) */
}

.menu-item .active{
    font-weight: bold;
}

.menu-icon{
    font-size: 24px !important;
    text-align: center;
}

.menu-link{
    text-align: center;
}

.header-icon-btn{
    font-size: 28px;
}

.border-app{
    --bs-border-opacity: 1;
    border: 1px solid var(--bs-kiniela) !important;
}

.powered-by{
    font-size: 14px !important;
    opacity: .6;
}

.display-off{
    display: none;
}
/* --------------- LOGIN --------------- */
.password-validation{
    background-image: none !important;
}

.password-round{
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}

.login-wrapper{
    background: #f8f8fa;
}

input:invalid + .toggle-password{
    top: 35%;
}

input:valid + .toggle-password{
    top: 50% !important;
}

/* Toggle Password Button */
.btn-toggle-password-visibility {
    width: 21px;
    height: 21px;
    background-image: var(--svg-eye-close);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.input-group-sm .btn-toggle-password-visibility {
    width: 16px;
    height: 16px;
}

.form-floating + .input-group-text .btn-toggle-password-visibility,
.input-group-lg .btn-toggle-password-visibility {
    width: 28px;
    height: 28px;
}

.input-group:has(input:not([type="password"])) .btn-toggle-password-visibility {
    background-image: var(--svg-eye-open);
}

.input-group:has(input.is-valid) .input-group-text {
    border-color: var(--bs-form-valid-border-color);
}

.input-group:has(input.is-invalid) .input-group-text {
    border-color: var(--bs-form-invalid-border-color);
}

.toggle-group{
    padding: 5px !important;
    background-color: #FFF !important;
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

[data-bs-theme=dark] .toggle-group{
    padding: 5px !important;
    background-color: rgb(30, 30, 30) !important;
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

[data-bs-theme=dark] .btn-toggle-password-visibility{
    filter: brightness(0) invert(1);
    opacity: .5;
}

.form-label{
    padding-left: 8px;
}

input::placeholder { /* Modern browsers (Chrome, Firefox, Opera, Safari 10.1+) */
    color: #999999 !important;
    opacity: 1; /* Fixes Firefox's default lower opacity */
}

input::-webkit-input-placeholder { /* Older Chrome, Opera, and Safari */
    color: #999999 !important;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #999999 !important;
}

input::-ms-input-placeholder { /* Microsoft Edge */
    color: #999999 !important;
}

.notiflix-report-title{
    font-family: "Instrument Sans", sans-serif;
    font-size: 18px !important;
    font-weight: bolder !important;
}

.notiflix-report-message{
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.notiflix-report-button{
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px !important;
}

.iziToast-texts{
    font-family: "Instrument Sans", sans-serif;
}

[data-bs-theme=dark] .forget-password{
    color: var(--kiniela-primary);
}
/* --------------- KINIELA MATCHES --------------- */
.match-header{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.match-footer{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 13px;
    text-transform: uppercase;
}

.match-team {
    padding-top: 3px;
}

.match-score{
    padding-top: 3px;
    font-size: 16px;
}

.match-details{
    font-weight: lighter;
}

.match-divider{
    border-right: 1px solid rgba(105, 105, 129, 0.2);
}

.forecast-select{
    padding-left: 55px;
    border-width: 4px;
    font-weight: bold;
}

#flagAway, #flagLocal{
    border: 1px solid #00000020;
    border-radius: 10px;
}

.blink {
    animation: blinker .5s linear 3;
}

@keyframes blinker {
    50% {
        opacity: .5;
    }
}

.no-atino{
    opacity: .6;
    box-shadow: none !important;
    border-color: #999DA0 !important;
}

.no-atino .match-header{
    background-color: #999DA0 !important;
}

.no-atino .match-footer{
    border-top-color: #999DA0 !important;
}

.kiniela .kiniela-status{
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    padding: 10px 20px 10px 20px;
    color: #FFF;
    background-color: var(--kiniela-secondary);
    border-radius: 50px;
    border: 2px solid #FFF;
    /*box-shadow: 0 1px 20px 1px #5a8dee;*/
    box-shadow: 0px 15px 22px -13px rgba(0,0,0,0.82);
    -webkit-box-shadow: 0px 15px 22px -13px rgba(0,0,0,0.82);
    -moz-box-shadow: 0px 15px 22px -13px rgba(0,0,0,0.82);
    font-weight: bold;
    display: inline-block;
}
/* --------------- SCHEDULE --------------- */
.schedules .matches-group{
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    background-color: transparent;
    /*box-shadow: 0 1px 20px 1px #5a8dee;*/
    border-radius: 8px;
}

.matches-group{
    background-color: var(--bs-gray);
}

@media (min-width: 1092px) {
    .schedules .matches-group{
        left: calc(50% + 40px);
    }
}

@media (min-width: 1481px) {
    .schedules .matches-group{
        left: calc(50% + 161px);
    }
}

@media only screen and (max-width: 576px) {
    footer-powered{
        text-align: center !important;
    }
}

.day-division{
    margin-top: 25px !important;
    margin-bottom: 40px !important;
}

.text-bg-dark {
    color: #ffffff !important;
    background-color: var(--kiniela-secondary) !important;
}

.accordion{
    overflow: visible;
}

.accordion-header{
    position: sticky !important;
    top: 79px; /* Sticks to the very top of the viewport */
    z-index: 8;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.accordion-button:is(.collapsed){
    background-color: var(--kiniela-primary) ;
    color: #fff !important;
}

.accordion-button:is(.collapsed)[data-bs-theme=dark]{
    background-color: var(--kiniela-primary) ;
    color: #fff !important;
}

.accordion-button:not(.collapsed){
    background-color: var(--kiniela-secondary) ;
    color: #fff !important;
}
/* --------------- STATS --------------- */
.sticky-col {
    position: sticky;
    left: 0;
    background-color: var(--app-header-bg) !important; /* Match your table's background color */
    z-index: 1; /* Ensure it stays above other cells */
}

/* Optional: Add a subtle border to the right */
.sticky-col {
    border-right: 1px solid #00000020;
}

/* Ensure the header cell z-index is higher if you also have a sticky header */
.table th.sticky-col {
    z-index: 2;
}

.table-stats{
    font-size: 14px !important;
}

th{
    font-weight: bolder;
}

.flag-stats{
    margin-top: -3px;
    margin-right: 5px;
}
/* --------------- RESULTS --------------- */
.result{
    width: 226px !important;
}

.logo-result{
    width: 210px !important;
}
/* --------------- ADS --------------- */
.ad-fieldset{
    position: relative;
    border: 1px solid rgba(105, 105, 129, 0.3);
    padding: 15px 15px 15px 15px;
    margin: 10px;
    border-radius: 5px;
    max-width: fit-content;
    left: 50%;
    transform: translateX(-52.5%);
}

.ad-fieldset legend{
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--custom-body-bg); /* Matches page background */
    padding: 0 10px;
    font-size: 70%;
    max-width: max-content;
    color: rgba(105, 105, 129, 0.45);
}

[data-bs-theme=dark] .ad-fieldset-legend{
    color: #CCCCCC75;
}

.ad-fieldset .adplugg-tag{
    position: relative;
    padding: 0px !important;
    margin: 0px !important;
    /* border: 1px solid red; */
    left: 50%;
    max-width: fit-content;
    transform: translateX(-50%);
}
/* --------------- MATCHES LIST --------------- */
.custom-zebra .list-group-item-action:nth-of-type(even) {
    background-color: #f8f9fa;
}

[data-bs-theme=dark] .custom-zebra .list-group-item-action:nth-of-type(even) {
    background-color: #00000050;
}