/* ==== Inter font family start ==== */

@font-face {
    font-family: 'Inter 18pt SemiBolt';
    src: url('fonts/Inter18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt Black';
    src: url('fonts/Inter18pt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt Bold';
    src: url('fonts/Inter18pt-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt ExtraBold';
    src: url('fonts/Inter18pt-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt ExtraLight';
    src: url('fonts/Inter18pt-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt Light';
    src: url('fonts/Inter18pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt Medium';
    src: url('fonts/Inter18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt Regular';
    src: url('fonts/Inter18pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt Thin';
    src: url('fonts/Inter18pt-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ==== Inter font family end ==== */

img {
    max-width: 100%;
}

input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="email"],
input[type="tel"],
textarea,
.input-checkbox {
    outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
}

input:focus {
    outline: 0;
}

textarea:focus {
    outline: 0;
}

button:focus {
    outline: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s ease;
}

    a:focus,
    a:hover {
        text-decoration: none;
        outline: 0;
    }

.TC {
    text-align: center;
}

.TL {
    text-align: left;
}

.TR {
    text-align: right;
}

.margin_auto {
    margin: auto;
    float: none;
}

.padding {
    padding: 0;
}

.al {
    width: 100%;
    height: 100%;
    display: table;
}

.alm {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

abbr[title] {
    border-bottom: none !important;
    cursor: inherit !important;
    text-decoration: none !important;
}

body {
    font-family: 'Inter 18pt Regular';
    background-color: #fff;
}

.container {
    max-width: 1230px;
    margin: 0 auto;
    width: 100%;
}

/* ==== sidebar start ==== */

.sidebar {
    width: 280px;
    min-width: 280px;
    height: 100vh;
    background-color: #141B2B;
    border-right: 1px solid #314158;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: sticky;
    top: 0px;
    z-index: 100;
}

    .sidebar.collapsed {
        width: 80px;
        min-width: 80px;
    }

        .sidebar.collapsed .sidebar-shield-container-main {
            display: none;
        }

/* Header / Logo */
.sidebar-header {
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #1e293b;
    overflow: hidden;
    flex-shrink: 0;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-text {
    width: fit-content;
}

.toggle-btn {
    background: none;
    border: none;
    cursor: e-resize !important;
    padding: 0px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

/* Navigation Area */
.sidebar-nav {
    flex: unset;
    overflow-y: unset;
    overflow-x: hidden;
    padding: 16px 12px;
    scrollbar-width: thin;
    scrollbar-color: white rgb(20, 27, 43);
    height: fit-content;
    max-height: max-content;
    min-height: max-content;
}

.nav-item {
    margin-bottom: 4px;
    position: relative;
}

.nav-link,
.drop-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter 18pt Regular';
}

    .nav-link i,
    .drop-btn i {
        width: 20px;
        text-align: center;
        font-size: 18px;
    }

    .nav-link:hover,
    .drop-btn:hover {
        background-color: #005DBF;
        color: #ffffff;
    }

    .nav-link:focus {
        color: #ffffff;
    }

    .nav-link.active {
        background-color: #005DBF;
        color: #ffffff;
    }

.menu-text {
    white-space: nowrap;
    transition: opacity 0.2s;
    flex: 1;
}

.chevron {
    transition: transform 0.3s;
    font-size: 12px;
}

.sidebar.collapsed .menu-text,
.sidebar.collapsed .logo-text,
.sidebar.collapsed .chevron,
.sidebar.collapsed .user-details {
    display: none;
}

.sidebar.collapsed .nav-link,
.sidebar.collapsed .drop-btn {
    justify-content: center;
    padding: 10px 0;
}

.tooltip {
    position: fixed;
    left: 85px;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid #334155;
    z-index: 200;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateX(-5px);
    display: none;
    background: #005DBF;
    width: max-content;
    padding: 8px 20px;
    clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
}

.sidebar.collapsed .nav-item:not(.has-dropdown):hover .tooltip {
    opacity: 1;
    display: block;
    transform: translateX(0);
}

.dropdown-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 8px 8px;
}

    .dropdown-container.open {
        max-height: 200px;
    }

.dropdown-content {
    padding: 8px 0 8px 20px;
}

.dropdown-link {
    padding: 8px;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .dropdown-link:hover {
        background-color: #005DBF;
        color: #ffffff;
    }

.sidebar.collapsed .dropdown-container {
    position: fixed;
    left: 85px;
    background: #0f172a;
    border: 1px solid #1e293b;
    width: max-content;
    max-height: none;
    display: none;
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.5);
    z-index: 200;
    border-radius: 8px;
}

    .sidebar.collapsed .dropdown-container.open {
        display: block;
    }

.sidebar.collapsed .dropdown-content {
    padding: 8px;
}

.sidebar-bottom {
    padding: 8px 12px;
    border-top: 1px solid #1e293b;
    flex-shrink: 0;
}

.logout-link:hover {
    color: #f87171;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid #1e293b;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: unset;
    flex-shrink: 0;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background-color: #0061ff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.user-details {
    overflow: hidden;
    white-space: nowrap;
}

.user-name {
    font-size: 14px;
    font-family: 'Inter 18pt Medium';
    color: white;
}

.user-email {
    font-size: 11px;
    color: #94a3b8;
}

.rotate-180 {
    transform: rotate(180deg);
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
}

.main-content {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
}

    .main-content h1 {
        margin-bottom: 16px;
    }

    .main-content p {
        color: #94a3b8;
        margin-bottom: 8px;
    }

.dashboard-main-container {
    width: 100%;
    display: flex;
}

.sidebar.collapsed .nav-link,
.sidebar.collapsed .nav-item .drop-btn {
    height: 55px;
}

.sidebar.collapsed .sidebar-header {
    flex-direction: column-reverse;
    height: unset;
    padding: 20px 12px;
}

/* ==== sidebar end ==== */

/* ==== dashboard right side main container start ==== */

.dashboard-right-side-container-main {
    width: 100%;
    height: auto;
    background-color: #0B1120;
    overflow: auto;
}

/* ==== dashboard right side main container end ==== */

/* ==== dashboard header top start ==== */

.dashboard-header-top-container {
    width: 100%;
    padding: 10px 24px;
    border-bottom: 1px solid #1e293b;
}

.header-top-main-box {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding: 0.50px 0px;
}

.team-vs-team-dpdn {
    position: relative;
    width: max-content;
}

.dpdn-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 8px 12px 8px 22px;
    border: 1px solid #CBCBCB;
    cursor: pointer;
    border-radius: 8px;
    position: relative;
}

.dpdn-selected-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter 18pt Regular';
    margin-right: 10px;
}

.dpdn-selected img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
}

.dpdn-arrow {
    transition: 0.3s;
}

.team-vs-team-dpdn.active .dpdn-arrow {
    transform: rotate(180deg);
}

.dpdn-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: max-content;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 5px;
    display: none;
    z-index: 1000;
    overflow: hidden;
}

.team-vs-team-dpdn.active .dpdn-menu {
    display: block;
}

.dpdn-item {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.2s;
}

    .dpdn-item:hover {
        background: #141b2b;
        color: white;
    }

.dpdn-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dpdn-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.dpdn-selected::before {
    position: absolute;
    content: "";
    background-color: #00B543;
    width: 10px;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.team-match-time-date-details {
    width: fit-content;
    font-family: 'Inter 18pt Regular';
    color: white;
    font-size: 14px;
}

/* ==== dashboard header top end ==== */

.tab-panel-container-main {
    width: 100%;
}

.header-tab-penal-tab-box-main {
    width: 100%;
    padding: 10px 24px;
    border-bottom: 1px solid #1e293b;
}

.tab-buttons {
    display: flex;
    gap: 16px;
}

.tab-btn {
    width: fit-content;
    padding: 10px 18px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    outline: none;
    font-family: 'Inter 18pt Regular';
    border-radius: 8px;
}

    .tab-btn.active {
        color: white;
        background-color: #005DBF;
    }

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
    padding: 24px 24px;
}

    .tab-content.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.game-details-container-main {
    width: 100%;
    margin: auto;
}

.game-clip-and-video-section-main-box {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.game-clip-box-out-in-main {
    width: 40%;
}

.game-clip-first-box {
    width: 100%;
    background-color: #131D37;
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.game-first-line-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.game-name-and-flage-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .game-name-and-flage-box p {
        color: white;
        font-family: 'Inter 18pt Regular';
        font-size: 18px;
    }

.game-total-count-nmbr {
    color: white;
    font-family: 'Inter 18pt Regular';
    font-size: 18px;
}

.game-clip-main-box-inside {
    width: 100%;
    margin: auto;
    background-color: #131D37;
    border-radius: 12px;
}

.game-clip-head-box {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid #1B294C;
}

.game-clip-head-box-inside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.game-clip-head-box h5 {
    color: white;
    font-size: 18px;
    font-family: 'Inter 18pt Bold';
}

.game-clips-dpdn {
    position: relative;
    width: 260px;
    user-select: none;
}

    .game-clips-dpdn .game-clips-dpdn-header {
        background-color: #E0E0E0;
        border: 1px solid #CBCBCB;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
        font-size: 16px;
        color: #1f2937;
    }

        .game-clips-dpdn .game-clips-dpdn-header:hover {
            border-color: #002D5B;
        }

        .game-clips-dpdn .game-clips-dpdn-header i {
            font-size: 14px;
            transition: transform 0.3s ease;
            color: #6b7280;
        }

    .game-clips-dpdn.active .game-clips-dpdn-header i {
        transform: rotate(180deg);
    }

    .game-clips-dpdn .game-clips-dpdn-list {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background-color: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        padding: 0;
        margin: 0;
        list-style: none;
        max-height: 250px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .game-clips-dpdn.active .game-clips-dpdn-list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.football-shots-container-main .game-clips-dpdn.active .game-clips-dpdn-list {
    display: block !important;
}

.game-clips-dpdn .game-clips-dpdn-list li {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 15px;
    color: #1f2937;
}

    .game-clips-dpdn .game-clips-dpdn-list li:hover {
        background-color: #f3f4f6;
        color: #141b2b;
    }

    .game-clips-dpdn .game-clips-dpdn-list li.selected {
        background-color: #141b2b;
        color: white;
    }

.game-clips-dpdn .game-clips-dpdn-list::-webkit-scrollbar {
    width: 6px;
}

.game-clips-dpdn .game-clips-dpdn-list::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 10px;
}

/* == game clip table start == */

.game-clips-table-box {
    width: 100%;
    margin: 0 auto;
    background-color: #131D37;
    overflow: hidden;
    font-family: 'Inter 18pt Regular', sans-serif;
}

    .game-clips-table-box .table-responsive-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #005DBF #131D37;
        scrollbar-width: thin;
    }

    .game-clips-table-box .table-body-scroll {
        max-height: 382px;
        /* overflow-y: auto; */
        width: 100%;
    }

    .game-clips-table-box .table {
        width: 100%;
        border-collapse: collapse;
        min-width: 550px;
    }

    .game-clips-table-box thead th {
        position: sticky;
        top: 0;
        background-color: #131D37;
        z-index: 20;
        padding: 15px 12px;
        text-align: left;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        white-space: nowrap;
        border-bottom: 2px solid #1a233a;
        font-weight: unset;
    }

    .game-clips-table-box tbody tr {
        border-bottom: 1px solid #1B294C;
        transition: background 0.2s ease;
        cursor: pointer;
    }

        .game-clips-table-box tbody tr:hover {
            background-color: #1a233a;
        }

        .game-clips-table-box tbody tr.selected {
            background-color: #005DBF;
        }

    .game-clips-table-box td {
        padding: 10px 12px;
        vertical-align: middle;
        color: white;
        font-size: 14px;
        text-align: left;
    }

    .game-clips-table-box .goal-badge {
        background-color: #0d121d;
        color: #fff;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #1B294C;
    }

        .game-clips-table-box .goal-badge span {
            width: 8px;
            height: 8px;
            background-color: #B7FFC5;
            border-radius: 50%;
            display: block;
        }

    .game-clips-table-box .action-group {
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        align-items: center;
    }

    .game-clips-table-box .action-btn {
        width: 36px;
        height: 36px;
        background-color: #1F2F57;
        color: #fff;
        border: none;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
    }

        .game-clips-table-box .action-btn:hover {
            background-color: #2a3550;
            transform: scale(1.05);
        }

        .game-clips-table-box .action-btn i {
            font-size: 16px;
        }

    .game-clips-table-box .col-goal {
        width: 120px;
    }

    .game-clips-table-box .col-time {
        width: 100px;
    }

    .game-clips-table-box .col-details {
        width: auto;
    }

    .game-clips-table-box .col-actions {
        width: 130px;
    }

    .game-clips-table-box .table-body-scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .game-clips-table-box .table-body-scroll::-webkit-scrollbar-thumb {
        background: #1B294C;
        border-radius: 10px;
    }

    .game-clips-table-box .table-body-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

/* == game clip table end == */

/* == video container box start == */

.game-video-clip-container-box-main {
    width: 58%;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    position: relative;
}

.game-video-clip-cut-and-name {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    .game-video-clip-cut-and-name h4 {
        font-size: 18px;
        color: white;
        font-family: 'Inter 18pt Bold';
    }

    .game-video-clip-cut-and-name button {
        width: 36px;
        height: 36px;
        background-color: #1F2F57;
        color: #fff;
        border: none;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
    }

        .game-video-clip-cut-and-name button:hover {
            background-color: #2a3550;
            transform: scale(1.05);
        }

.game-video-container-box-main {
    width: 100%;
    margin: auto;
}

    .game-video-container-box-main video {
        width: 100%;
        height: 491px;
        object-fit: fill;
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
    }

.coaches-comments-section-main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: black;
    padding: 0px 16px 10px 16px;
    margin-top: -7px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    position: relative;
}

.coaches-comment-count-and-name {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.couch-comment-count {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: #FF0000;
    border-radius: 50px;
    font-size: 14px;
    font-family: 'Inter 18pt SemiBolt';
}

.coaches-comment-count-and-name p {
    font-family: 'Inter 18pt Regular';
    font-size: 16px;
    color: white;
}

.coaches-comments-right-arrow {
    width: fit-content;
    height: fit-content;
    color: white;
    font-size: 18px;
    transition: 0.2s;
}

.video-markers-container {
    width: calc(100% - 70px);
    position: absolute;
    left: 0px;
    right: 0px;
    background: #00800000;
    height: 16px;
    bottom: 82px;
    margin: auto;
}

.video-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
}

    .video-marker::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        margin: auto;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid #007bff;
    }

    .video-marker:hover {
        background: white;
        transform: scale(1.3);
        transition: transform 0.2s ease, background 0.2s ease;
    }

/* == video container box end == */

/* ==== sidebar shield container start ==== */

.sidebar-shield-container-main {
    padding: 12px 12px 0px 12px;
    width: 100%;
}

.sidebar-shield-main-bg-clr {
    width: 100%;
    background-color: #452A80;
    padding: 28px 20px;
    border-radius: 8px;
}

.sidebar-shield-main-image {
    width: 100%;
    position: relative;
    z-index: 1;
}

.sidebar-shield-inside-container-main {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    background: transparent;
    z-index: -1;
}

.sidebar-top-box {
    width: 100%;
    height: 55%;
    position: relative;
}

    .sidebar-top-box::before {
        position: absolute;
        content: "";
        width: 90%;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 1px;
        background-color: black;
        z-index: 1;
    }

    .sidebar-top-box img {
        width: 100%;
        height: 100%;
    }

    .sidebar-top-box .player-image {
        position: absolute;
        right: 0;
        width: calc(100% - 54px);
        height: 100%;
        bottom: 0;
    }

.sidebar-player-score-box-main {
    position: absolute;
    left: 4px;
    width: 50px;
    height: 99%;
    background-color: white;
    top: 0;
    padding-top: 48px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

    .sidebar-player-score-box-main img {
        width: 34px;
        height: auto;
    }

.sidebar-striker-score-box {
    width: fit-content;
}

    .sidebar-striker-score-box h5 {
        text-align: center;
        color: black;
        font-size: 20px;
        font-family: 'Inter 18pt Bold';
    }

    .sidebar-striker-score-box p {
        text-align: center;
        color: black;
        font-size: 10px;
        font-family: 'Inter 18pt Bold';
    }

.sidebar-player-name-or-id-number {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    background: linear-gradient(359deg, rgb(255 243 2 / 70%) 0%, rgba(255, 243, 2, 0) 50%);
    height: 85px;
    display: flex;
    justify-content: end;
    align-items: end;
    padding: 0px 10px 4px 0px;
    gap: 10px;
}

    .sidebar-player-name-or-id-number p {
        font-family: 'Inter 18pt ExtraBold';
        color: black;
        text-align: end;
        line-height: 15px;
        font-size: 14px;
    }

    .sidebar-player-name-or-id-number h4 {
        font-family: 'Inter 18pt Bold';
        color: black;
        font-size: 26px;
    }

.sidebar-bottom-box {
    width: 100%;
    height: 45%;
    background-color: #fff302;
}

.sidebar-player-score-team {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 14px 24px;
    gap: 8px;
}

.sidebar-player-score-team-count-box {
    width: 40%;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sidebar-player-score-team-count-box.cnct-end {
        justify-content: end;
    }

    .sidebar-player-score-team-count-box h3 {
        font-family: 'Inter 18pt Bold';
        font-size: 22px;
    }

    .sidebar-player-score-team-count-box p {
        font-family: 'Inter 18pt SemiBolt';
        font-size: 14px;
    }

/* ==== sidebar shield container end ==== */

.game-player-full-details-section {
    width: 100%;
    margin: auto;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

.gale-player-full-details-title {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

    .gale-player-full-details-title h5 {
        color: white;
        font-size: 18px;
        font-family: 'Inter 18pt Bold';
    }

.cayley-knight-card-box-main {
    width: 100%;
    margin: auto;
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.cayley-knight-card-inside-box {
    width: calc(20% - 6px);
    border-radius: 8px;
    padding: 16px;
    background-color: #001122;
    border: 1px solid #002D5B;
}

    .cayley-knight-card-inside-box p {
        font-family: 'Inter 18pt Regular';
        font-size: 12px;
        color: white;
        margin-bottom: 12px;
    }

.impect-score-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .impect-score-value h3 {
        color: white;
        font-family: 'Inter 18pt Bold';
        font-size: 24px;
        line-height: 20px;
    }

    .impect-score-value p {
        color: white;
        font-size: 12px;
        margin-bottom: 0px;
    }

        .impect-score-value p span {
            color: #00D492;
        }

    .impect-score-value.vlue-red p span {
        color: #D40000;
    }

.possession-summary-card-main {
    width: 100%;
    border-radius: 10px;
    background-color: #001122;
    border: 1px solid #002D5B;
    margin-bottom: 18px;
}

.possession-summary-heading-box {
    width: 100%;
    padding: 16px 24px;
}

    .possession-summary-heading-box h5 {
        font-family: 'Inter 18pt Medium';
        font-size: 20px;
        color: white;
    }

.possession-summary-tbl-container {
    background-color: #001122;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
}

    .possession-summary-tbl-container .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #005DBF #131D37;
        scrollbar-width: thin;
    }

    .possession-summary-tbl-container table {
        width: 100%;
        border-collapse: collapse;
        color: #ffffff;
        min-width: 1100px;
    }

.defensive-actions-tbl .possession-summary-tbl-container table {
    min-width: 1500px;
}

.possession-summary-tbl-container thead tr {
    background-color: #314158;
}

.possession-summary-tbl-container th {
    padding: 15px 10px;
    font-size: 14px;
    font-family: 'Inter 18pt Bold';
    color: white;
    text-align: center;
    border-bottom: 1px solid #1a2533;
}

.possession-summary-tbl-container td {
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid #1a2533;
    text-align: center;
    font-family: 'Inter 18pt Regular';
}

.possession-summary-tbl-container .text-left {
    text-align: left;
    padding-left: 24px;
}

.possession-summary-tbl-container tbody tr:hover {
    background-color: #1a2533;
}

@media (max-width: 768px) {

    .possession-summary-tbl-container th,
    .possession-summary-tbl-container td {
        padding: 10px 8px;
        font-size: 13px;
    }

    .possession-summary-tbl-container .text-left {
        padding-left: 10px;
    }
}

/* ==== game ground start ==== */

.game-ground-main-container {
    width: 100%;
    max-width: 1112px;
    margin: auto;
    padding: 42px 16px;
    height: 570px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid white;
    display: flex;
    align-items: center;
}

.game-ground-box-two {
    width: 100%;
    height: 100%;
    border: 1px solid #a4b7b7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-color: #0c4421;
}

.game-ground-box-one {
    width: 28px;
    height: 64px;
    border: 1px solid #a4b7b7;
    border-right: unset;
}

.game-ground-box-three {
    width: 28px;
    height: 64px;
    border: 1px solid #a4b7b7;
    border-left: unset;
}

.game-ground-left-goal-main-box {
    width: 160px;
    height: 300px;
    border: 1px solid #a4b7b7;
    border-left: unset;
    display: flex;
    align-items: center;
    position: relative;
}

.game-ground-inside-goal-grill {
    width: 60px;
    height: 150px;
    border: 1px solid #a4b7b7;
    border-left: unset;
}

.game-ground-left-goal-main-box::before {
    position: absolute;
    content: "";
    border: 1px solid #a4b7b7;
    top: 0;
    bottom: 0;
    right: -40px;
    margin: auto;
    width: 120px;
    height: 120px;
    border-radius: 100%;
}

.game-ground-left-goal-main-box::after {
    position: absolute;
    content: "";
    width: 82px;
    height: 120px;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    /*    background-color: #131D37;*/
    background-color: #0c4421;
}

.right {
    border-right: unset;
    border-left: 1px solid #a4b7b7;
    justify-content: end;
}

    .right::before {
        right: unset;
        left: -40px;
    }

    .right::after {
        left: 0;
        right: unset;
    }

    .right .game-ground-inside-goal-grill {
        border-left: 1px solid #a4b7b7;
        border-right: unset;
    }

.game-ground-center-line-main {
    width: 1px;
    height: 100%;
    background-color: #a4b7b7;
    position: relative;
}

    .game-ground-center-line-main::before {
        position: absolute;
        content: "";
        top: 0;
        right: 0px;
        left: -4px;
        bottom: 0;
        margin: auto;
        background-color: #0c4421;
        border: 1px solid #a4b7b7;
        border-radius: 100%;
        width: 9px;
        height: 9px;
    }

.game-ground-center-circle-and-count {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 1px solid #a4b7b7;
    border-radius: 100%;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: normal;
    color: white;
    font-family: 'Inter 18pt Bold';
    font-size: 94px;
}

.game-ground-without-circle-count {
    position: absolute;
    border-radius: 100%;
    width: 160px;
    height: 160px;
    left: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: normal;
    color: white;
    font-family: 'Inter 18pt Bold';
    font-size: 94px;
}

.game-ground-without-circle-count-right {
    position: absolute;
    border-radius: 100%;
    width: 160px;
    height: 160px;
    right: 140px;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-family: 'Inter 18pt Bold';
    font-size: 94px;
}

    .game-ground-without-circle-count p,
    .game-ground-without-circle-count-right p,
    .game-ground-center-circle-and-count p {
        text-align: center;
        font-size: 16px;
    }

.game-ground-left-dots {
    position: absolute;
    border: 1px solid #a4b7b7;
    border-radius: 100%;
    width: 9px;
    height: 9px;
    right: 46px;
    z-index: 1;
}

.right .game-ground-left-dots {
    right: unset;
    left: 46px;
}

.game-ground-left-top {
    position: absolute;
    top: -6px;
    left: 80px;
    background-color: #a4b7b7;
    width: 1px;
    height: 6px;
}

.game-ground-left-bottom {
    position: absolute;
    left: -6px;
    width: 6px;
    height: 1px;
    top: 80px;
    background-color: #a4b7b7;
}

.game-ground-right-top {
    position: absolute;
    top: -6px;
    right: 80px;
    background-color: #a4b7b7;
    width: 1px;
    height: 6px;
}

.game-ground-right-bottom {
    position: absolute;
    right: -6px;
    width: 6px;
    height: 1px;
    top: 80px;
    background-color: #a4b7b7;
}

.game-ground-left-bottom-bottom {
    position: absolute;
    bottom: -6px;
    left: 80px;
    background-color: #a4b7b7;
    width: 1px;
    height: 6px;
}

.game-ground-left-bottom-top {
    position: absolute;
    bottom: 80px;
    left: -6px;
    background-color: #a4b7b7;
    width: 6px;
    height: 1px;
}

.game-ground-bottom-right {
    position: absolute;
    bottom: -6px;
    right: 80px;
    background-color: #a4b7b7;
    width: 1px;
    height: 6px;
}

.game-ground-bottom-right-top {
    position: absolute;
    bottom: 80px;
    right: -6px;
    background-color: #a4b7b7;
    width: 6px;
    height: 1px;
}

.game-ground-top-left-corner {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-right: 1px solid #a4b7b7;
    border-bottom: 1px solid #a4b7b7;
    border-bottom-right-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.game-ground-top-right-corner {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-left: 1px solid #a4b7b7;
    border-bottom: 1px solid #a4b7b7;
    border-bottom-left-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.game-ground-bottom-left-corner {
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-top: 1px solid #a4b7b7;
    border-right: 1px solid #a4b7b7;
    border-top-right-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.game-ground-bottom-right-corner {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-top: 1px solid #a4b7b7;
    border-left: 1px solid #a4b7b7;
    border-top-left-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.sidebar-inside-main-container {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: calc(100vh - 65px);
    scrollbar-width: thin;
    scrollbar-color: white rgb(20, 27, 43);
}

.game-ground-box-two .game-clips-dpdn {
    position: absolute;
    top: 16px;
    right: 16px;
}

    .game-ground-box-two .game-clips-dpdn .game-clips-dpdn-header {
        padding: 6px 12px;
        font-size: 14px;
    }

/* ==== game ground end ==== */

.sidebar-opn-close-db-prt {
    display: none;
}

.acdn-type-dpdn {
    position: relative;
    width: 250px;
    font-family: Arial;
}

.acdn-header {
    background-color: #E0E0E0;
    border: 1px solid #CBCBCB;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    font-size: 16px;
    color: #1f2937;
}

.acdn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 10;
    margin-top: 8px;
    border-radius: 8px;
    overflow: hidden;
}

    .acdn-list li {
        padding: 10px;
        cursor: pointer;
    }

        .acdn-list li:hover,
        .acdn-list li.active {
            background-color: #141b2b;
            color: white;
        }

.acdn-type-dpdn.open .acdn-list {
    display: block;
}

.team-acdn-view {
    display: none;
}

    .team-acdn-view.active {
        display: block;
    }

/* ==== football shots section start ==== */

.football-shots-container-main {
    width: 100%;
    max-width: 1112px;
    margin: auto;
    padding: 50px 40px 30px 40px;
    background-image: url(../images/football-goal-side.png) !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    border-radius: 16px;
}

    .football-shots-container-main .game-clips-dpdn {
        margin-left: auto;
        margin-bottom: 18px;
    }

.football-game-score-count-box-main {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.football-count-card-box-main {
    width: calc(33% - 8px);
    background-color: #0B1120;
    border: 4px solid #002D5B;
    font-family: 'Inter 18pt Black';
    font-size: 48px;
    text-align: center;
    color: white;
    padding: 12px;
}

    .football-count-card-box-main.no-score-box {
        border-color: transparent;
        background-color: transparent;
    }

/* ==== football shots section end ==== */

/* ==== game summary details start ==== */

.game-summary-details-container {
    width: 100%;
    margin: auto;
}

.team-vs-team-game-ball-box-main {
    width: 100%;
    margin-bottom: 18px;
}

.team-vs-team-inside-gm-contnr {
    padding: 20px;
    background-color: #131D37;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.team-vs-team-ball-identity-box-main {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

    .team-vs-team-ball-identity-box-main img {
        width: 200px;
        height: 200px;
    }

    .team-vs-team-ball-identity-box-main h5 {
        text-align: center;
        font-size: 24px;
        color: white;
        font-family: 'Inter 18pt Medium';
    }

    .team-vs-team-ball-identity-box-main h6 {
        text-align: center;
        font-size: 24px;
        color: white;
        font-family: 'Inter 18pt Medium';
    }

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

    .team-vs-team-vs-box h5 {
        font-size: 40px;
    }

.team-match-time-and-date-tbl {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    padding-top: 0px;
    background-color: #131D37;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.team-match-time-and-date-card {
    width: 100%;
    font-size: 20px;
    text-align: center;
    color: white;
    font-family: 'Inter 18pt Medium';
}

.game-summary-page-all-tbl {
    width: 100%;
    margin: auto;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

.all-team-vs-team-rank-details-table {
    width: 100%;
}

    .all-team-vs-team-rank-details-table .possession-summary-tbl-container {
        margin-bottom: 18px;
    }

.possession-summary-tbl-container.gm-smry-first {
    border-radius: 10px;
}

    .possession-summary-tbl-container.gm-smry-first table {
        min-width: auto !important;
        width: 100% !important;
        table-layout: fixed;
    }

    .possession-summary-tbl-container.gm-smry-first th,
    .possession-summary-tbl-container.gm-smry-first td {
        width: 33.33% !important;
        text-align: center !important;
    }

.flow-of-the-game-cnvs-box-main {
    width: 100%;
    border-radius: 10px;
    background-color: #001122;
    border: 1px solid #002D5B;
}

.flow-of-the-game-crt-container-main {
    width: 100%;
    padding: 16px 24px;
    padding-top: 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}

.flow-chart-grp-card {
    width: calc(50% - 9px);
    background-color: #131D37;
    border-radius: 12px;
    border: 1px solid #002D5B;
}

.chart-btn-open {
    font-size: 16px;
    padding: 8px 18px;
    font-family: 'Inter 18pt Regular';
    border-radius: 8px;
    color: white;
    background-color: #005DBF;
    border: 1px solid #005DBF;
    box-shadow: 0px 0px 2px 1px transparent;
}

    .chart-btn-open:hover {
        box-shadow: 0px 0px 2px 1px white;
    }

.crt-card-head {
    width: 100%;
    padding: 16px;
    border-bottom: 1px solid #002D5B;
}

    .crt-card-head h5 {
        font-family: 'Inter 18pt Medium';
        font-size: 18px;
        color: white;
    }

.player-crt-body {
    width: 100%;
    padding: 16px;
}

.player-chart-frt {
    width: 100%;
    padding: 16px;
    border-top: 1px solid #002D5B;
    display: flex !important;
    justify-content: end;
}

/* == chart start == */

.chart-card {
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    position: relative;
    min-height: 300px;
}

#chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#passesPerMinuteChart,
#passPercentageChart,
#possessionFinalThirdChart,
#shotsPerMinuteChart {
    min-height: 300px;
}

/* == chart end == */

/* ==== game summary details end ==== */

/* ==== Passes per Minute Details Popup start ==== */

.passes-per-minute-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

.pass-per-minute-popup-body-container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 90%;
    max-width: 1140px;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

@keyframes zoomIn {

    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pass-per-minute-popup-body-container .possession-summary-card-main .possession-summary-heading-box {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.pass-per-minute-popup-close-btn {
    color: white;
    background: #EB5757;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.active#passesPerMinuteModal,
.active#passPercentageModal,
.active#possessionModal,
.active#shotsModal {
    display: block;
}

.game-summary-export-and-dpdn-main {
    width: 100%;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: end;
    margin-bottom: 18px;
}

.create-custom-clip-popup-box-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

.active#CustomClipUpsert {
    display: block;
}

.create-custom-clip-modal-box-inside-main {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

.custom-clip-inside-itp-main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

    .custom-clip-inside-itp-main span {
        color: white;
        font-size: 18px;
        font-weight: 600;
    }

    .custom-clip-inside-itp-main input {
        width: 48%;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
    }

        .custom-clip-inside-itp-main input::placeholder {
            color: #ffffff9c;
        }

.custom-clip-dpdn-and-videottl-lenght {
    width: 100%;
}

    .custom-clip-dpdn-and-videottl-lenght .game-clips-dpdn {
        width: 100%;
        margin-bottom: 18px;
    }

        .custom-clip-dpdn-and-videottl-lenght .game-clips-dpdn .game-clips-dpdn-header {
            background: #0B1120;
            border: 1px solid #ffffff42;
            border-radius: 6px;
            padding: 8px 12px;
            color: white;
            font-size: 14px;
        }

            .custom-clip-dpdn-and-videottl-lenght .game-clips-dpdn .game-clips-dpdn-header i {
                color: white;
            }

        .custom-clip-dpdn-and-videottl-lenght .game-clips-dpdn .game-clips-dpdn-list li {
            border-bottom: 1px solid #0000001f;
            padding: 7px 12px;
            font-size: 14px;
        }

    .custom-clip-dpdn-and-videottl-lenght input {
        width: 100%;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        margin-bottom: 18px;
        font-size: 14px;
    }

        .custom-clip-dpdn-and-videottl-lenght input::placeholder {
            color: #ffffff9c;
        }

.custom-clip-popup-close-btn-box {
    width: 100%;
    display: flex;
    justify-content: end;
    padding: 16px 0px 0px 0px;
    gap: 12px;
    flex-wrap: wrap;
}

.custom-clip-close-btn {
    font-size: 16px;
    padding: 8px 18px;
    font-family: 'Inter 18pt Regular';
    border-radius: 8px;
    color: white;
    background-color: #EB5757;
    border: 1px solid #EB5757;
    box-shadow: 0px 0px 2px 1px transparent;
}

    .custom-clip-close-btn:hover {
        color: #EB5757;
        background-color: transparent;
    }

/* ==== Passes per Minute Details Popup end ==== */

/* ==== Insights Popup start ==== */

.insights-popup-container-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

    .insights-popup-container-main.active {
        display: block;
    }

.insights-popup-inside-box-main {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

.insight-popup-head-main {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid #002D5B;
    align-items: center;
}

    .insight-popup-head-main h5 {
        font-family: 'Inter 18pt Medium';
        font-size: 20px;
        color: white;
    }

.insight-popup-close-icon-main {
    color: white;
    background: #EB5757;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.insight-popup-analysis-and-report-btn-box {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .insight-popup-analysis-and-report-btn-box span {
        color: white;
    }

/* ==== Insights Popup end ==== */

.more-section-dpdn-arrow {
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-color: #005DBF;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

    .more-section-dpdn-arrow.active {
        transform: rotate(180deg);
    }

.impact-tgl-and-filter-btn-main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    display: none;
}

    .impact-tgl-and-filter-btn-main.active {
        display: flex;
    }

.impact-highlights {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .impact-highlights span {
        color: white;
        font-size: 18px;
        font-family: 'Inter 18pt SemiBolt';
    }

    .impact-highlights input {
        display: none;
    }

    .impact-highlights .slider {
        position: relative;
        width: 44px;
        height: 24px;
        background-color: #ccc;
        border-radius: 50px;
        transition: 0.3s;
    }

        .impact-highlights .slider::before {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            left: 3px;
            top: 3px;
            background-color: white;
            border-radius: 50%;
            transition: 0.3s;
        }

    .impact-highlights input:checked + .slider {
        background-color: #005DBF;
    }

        .impact-highlights input:checked + .slider::before {
            transform: translateX(20px);
        }

/* ==== submit a game for analysis popup start ==== */

.submit-a-game-for-analysis-popup-main-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

    .submit-a-game-for-analysis-popup-main-container.active {
        display: block;
    }

.submit-a-game-for-analysis-popup-inside-box {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 650px;
    padding: 20px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

/* Hide all steps */
#frmWizard .form-step {
    display: none;
}

    /* Only active step visible */
    #frmWizard .form-step.active {
        display: block;
    }

.single-wizard-itp-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .single-wizard-itp-box label {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 20px;
        font-family: 'Inter 18pt Medium';
        margin-bottom: 16px;
    }

    .single-wizard-itp-box input {
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
        width: 50%;
    }

    .single-wizard-itp-box textarea {
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
        width: 100%;
    }

        .single-wizard-itp-box input::placeholder,
        .single-wizard-itp-box textarea::placeholder {
            color: #ffffff9c;
        }

.wzard-frm-bton-smit-mn {
    width: 100%;
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.back-form-wzard {
    font-size: 16px;
    padding: 8px 18px;
    font-family: 'Inter 18pt Regular';
    border-radius: 8px;
    color: #EB5757;
    background-color: transparent;
    border: 1px solid #EB5757;
    box-shadow: 0px 0px 2px 1px transparent;
}

    .back-form-wzard:hover {
        background-color: #EB5757;
        color: white;
    }

.wzard-frm-bton-smit-mn #backBtn i {
    margin-right: 4px;
}

.wzard-frm-bton-smit-mn #nextBtn i {
    margin-left: 4px;
}

.wzard-frm-bton-smit-mn .custom-clip-close-btn i {
    margin-right: 4px;
}

.single-wizard-itp-box .form-select {
    box-shadow: unset;
    width: 50%;
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    background-image: url(../images/down-arrow.png);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 16px;
}

.select-new-team-row-add-check-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0px;
}

    .select-new-team-row-add-check-box label {
        font-size: 16px;
        width: fit-content;
        margin-bottom: 0px;
    }

    .select-new-team-row-add-check-box input {
        width: fit-content;
    }

.single-wizard-itp-box #TeamName {
    display: none;
}

.upload-wizard-form-video-text {
    width: 100%;
    margin-bottom: 20px;
}

    .upload-wizard-form-video-text h4 {
        text-align: center;
        font-size: 24px;
        color: white;
        font-family: 'Inter 18pt Medium';
        margin-bottom: 8px;
    }

    .upload-wizard-form-video-text p {
        color: white;
        text-align: center;
        font-size: 16px;
    }

.video-input-add-link-box {
    width: 100%;
}

    .video-input-add-link-box input {
        width: 100%;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
    }

        .video-input-add-link-box input::placeholder {
            color: #ffffff9c;
        }

.upload-winzard-video-btn {
    width: 100%;
    margin-top: 16px;
}

    .upload-winzard-video-btn label {
        width: 100%;
        text-align: center;
    }

.submit-a-game-for-analysis-popup-inside-box .wizard-progress {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.submit-a-game-for-analysis-popup-inside-box .progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #ddd;
    transform: translateY(-50%);
    z-index: 0;
}

.submit-a-game-for-analysis-popup-inside-box .progress-line-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    width: 0%;
    /* background: #007bff; */
    background: #28a745;
    transform: translateY(-50%);
    z-index: 1;
    transition: width 0.3s ease;
}

.submit-a-game-for-analysis-popup-inside-box .wizard-progress .step {
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-a-game-for-analysis-popup-inside-box .step.active {
    background: #007bff;
}

.submit-a-game-for-analysis-popup-inside-box .step.completed {
    background: #28a745;
}

/* ==== submit a game for analysis popup end ==== */

/* ==== event filter start ====  */

.event-filter-popup-box-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

    .event-filter-popup-box-main.active {
        display: block;
    }

.event-popup-filter-inside-box-main {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

    .event-popup-filter-inside-box-main .possession-summary-heading-box {
        border-bottom: 1px solid #002D5B;
    }

.event-main-dpdn-inside-container {
    width: 100%;
    padding: 16px 24px;
}

    .event-main-dpdn-inside-container form {
        width: 100%;
    }

    .event-main-dpdn-inside-container .form-select {
        width: 100%;
        box-shadow: unset;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
        background-image: url(../images/down-arrow.png);
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 16px 16px;
        margin-bottom: 16px;
        height: unset;
    }

.show-interceptions-tglmn {
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.show-interceptions-tgl {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .show-interceptions-tgl input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .show-interceptions-tgl .slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background-color: #ccc;
        border-radius: 50px;
        transition: 0.3s;
    }

        .show-interceptions-tgl .slider::before {
            content: "";
            position: absolute;
            height: 18px;
            width: 18px;
            left: 3px;
            top: 3px;
            background-color: white;
            border-radius: 50%;
            transition: 0.3s;
        }

    .show-interceptions-tgl input:checked + .slider {
        background-color: #005DBF;
    }

        .show-interceptions-tgl input:checked + .slider::before {
            transform: translateX(20px);
        }

.show-interceptions-label {
    cursor: pointer;
    color: white;
}

.filter-and-close-btn-box {
    width: 100%;
    display: flex;
    justify-content: end;
    gap: 12px;
    margin-top: 20px;
}

#HomeFilterSave.loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: homeFilterSpin 0.6s linear infinite;
}

#HomeFilterSave.loading {
    pointer-events: none;
    opacity: 0.8;
}

@keyframes homeFilterSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.game-clip-inside-arrow-and-btn-cntnr-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: fit-content;
}

/* ==== event filter end ====  */

/* ==== manage player evolution page start ==== */

.dashboard-contant-main-container {
    width: 100%;
    padding: 24px 24px;
}

.manage-id-player-name {
    width: fit-content;
    margin-bottom: 6px;
}

    .manage-id-player-name h2 {
        color: white;
        font-size: 20px;
        font-family: 'Inter 18pt Medium';
    }

.manage-id-page-jump {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
    color: #6b7280;
}

    .manage-id-page-jump a {
        color: white;
        display: flex;
        width: fit-content;
        align-items: center;
    }

/* Table border */
#UserEvalutionTable {
    border: unset;
    width: 100% !important;
    background-color: #001122;
}

    /* Header */
    #UserEvalutionTable thead th {
        color: white;
        padding: 15px 10px;
        font-size: 14px;
        font-family: 'Inter 18pt Bold';
        color: white;
        border-bottom: 1px solid #1a2533;
    }

/* Action button */
.edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: #fff;
    color: #001122;
    border-radius: 4px;
    font-size: 18px;
}

    .edit-btn:hover {
        background: #f0f0f0;
    }

/* Responsive tweak */
@media (max-width: 768px) {
    #UserEvalutionTable td {
        font-size: 14px;
    }
}

.idp-table-container {
    width: 100%;
    margin: auto;
}

#UserEvalutionTable_wrapper .dataTables_length,
#UserEvalutionTable_wrapper .dataTables_filter {
    margin-bottom: 18px;
}

#UserEvalutionTable thead {
    background-color: #314158;
}

.manage-id-user-header {
    margin-bottom: 24px;
}

#UserEvalutionTable tbody td {
    color: white;
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid #1a2533;
    font-family: 'Inter 18pt Regular';
}

#UserEvalutionTable_wrapper .dataTables_length select {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-right: 8px;
}

#UserEvalutionTable_wrapper .dataTables_length label,
#UserEvalutionTable_filter label {
    color: white;
}

#UserEvalutionTable_filter input {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-left: 8px;
}

.dataTables_wrapper .dataTables_info {
    color: white !important;
    padding-top: 0px !important;
    margin-top: 18px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0px !important;
    margin-top: 18px;
}

.paginate_button.current {
    background: white !important;
    width: 36px;
    height: 36px;
    padding: 0px !important;
    line-height: 36px;
}

.idp-table-container table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
.idp-table-container table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    color: white !important;
}

/* ==== manage player evolution page end ==== */

/* ==== Final Third chart popup start ==== */

.final-therd-popup-chart-main-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

    .final-therd-popup-chart-main-container.active {
        display: block;
    }

.final-therd-chart-inside-main-box {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 650px;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    border: unset;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

    .final-therd-chart-inside-main-box .flow-chart-grp-card {
        width: 100%;
    }

.final-therd-popup-close-btn {
    color: white;
    background: #EB5757;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.final-therd-chart-inside-main-box .crt-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* ==== Final Third chart popup end ==== */

.Possessions-in-the-Final-Third-container {
    width: 100%;
    max-width: 800px;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.Possessions-in-the-Final-Third-canvas-wrapper {
    position: relative;
    height: 400px;
    width: 100%;
}

@media (max-width: 600px) {
    .Possessions-in-the-Final-Third-canvas-wrapper {
        height: 300px;
    }
}

.final-third-chart-opnr {
    cursor: pointer;
}

.coach-comment-box-inside-main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    cursor: pointer;
}

.coauches-comment-table-box-show {
    width: 100%;
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #000000;
    border-radius: 12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 14px 10px;
    display: none;
    z-index: 99;
}

    .coauches-comment-table-box-show .possession-summary-tbl-container {
        background-color: #131D37;
        height: fit-content;
        max-height: 350px;
        overflow: auto;
        scrollbar-color: #005DBF #131D37;
        scrollbar-width: thin;
    }

        .coauches-comment-table-box-show .possession-summary-tbl-container .table {
            min-width: 596px;
        }

.coaches-comments-section-main.active {
    .coauches-comment-table-box-show

{
    display: block;
}

.coaches-comments-right-arrow {
    transform: rotate(180deg);
}

}

.idp-date-and-extract-pdf-btn-box-main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin: auto;
    margin-bottom: 18px;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

    .idp-date-and-extract-pdf-btn-box-main label {
        font-size: 14px;
        color: white;
        font-family: 'Inter 18pt Regular';
    }

.idp-players-goals {
    width: 100%;
    margin-bottom: 18px;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

.player-goal-title {
    width: 100%;
    margin-bottom: 12px;
}

    .player-goal-title h4 {
        font-size: 24px;
        color: white;
        font-family: 'Inter 18pt Medium';
    }

.player-goal-itp-box-and-lbl-main-container {
    width: 100%;
    margin-bottom: 8px;
}

    .player-goal-itp-box-and-lbl-main-container label {
        width: 100%;
        font-size: 14px;
        margin-bottom: 8px;
        color: white;
        font-family: 'Inter 18pt Medium';
    }

    .player-goal-itp-box-and-lbl-main-container textarea {
        width: 100%;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
        height: 70px;
    }

.all-players-goal-save-button-main {
    width: fit-content;
    margin-top: 10px;
}

.idp-evaluation-container-main {
    width: 100%;
    margin-bottom: 18px;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

    .idp-evaluation-container-main .possession-summary-card-main .possession-summary-tbl-container table {
        min-width: 880px;
    }

.comments-disabled textarea {
    background-color: #314158;
}

.comments-disabled h6 {
    font-size: 16px;
    color: white;
    margin-bottom: 6px;
    font-family: 'Inter 18pt Bold';
}

.back-to-page-btn-box {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
}

    .back-to-page-btn-box a:hover {
        color: white;
    }

/* ==== UserEvaluations Updated Successfully Popup start ==== */

.user-evaluations-updated-successfully-popup-main-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

    .user-evaluations-updated-successfully-popup-main-container.active {
        display: block;
    }

.user-evaluations-updated-successfully-inside-popup-main {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 90%;
    max-width: 450px;
    padding: 20px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

.user-evaluation-popup-ok-btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
}

.success-icon-container {
    width: 80px;
    height: 80px;
    position: relative;
    margin: auto;
    margin-bottom: 24px;
}

.checkmark-svg {
    width: 100%;
    height: 100%;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #22c55e;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #22c55e;
    stroke-width: 3;
    fill: none;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
    transform: rotate(100deg);
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

.animate-icon {
    animation: scale 0.3s ease-in-out 0.9s both;
}

.replay-btn {
    margin-top: 30px;
    padding: 10px 20px;
    background-color: #22c55e;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

    .replay-btn:hover {
        background-color: #16a34a;
    }

.user-evaluations-title-and-para {
    width: 100%;
    margin: auto;
    margin-bottom: 16px;
}

    .user-evaluations-title-and-para h4 {
        text-align: center;
        color: white;
        font-family: 'Inter 18pt Medium';
        margin-bottom: 8px;
        font-size: 28px;
    }

    .user-evaluations-title-and-para p {
        text-align: center;
        color: white;
        font-family: 'Inter 18pt Regular';
        font-size: 16px;
    }

/* ==== UserEvaluations Updated Successfully Popup end ==== */

/* ==== Player Profile Page start ==== */

.player-profile-main-box-container {
    width: 100%;
}

    /* ==== Player Profile Page end ==== */

    .player-profile-main-box-container .main-card {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        background-color: #131D37;
        border-radius: 12px;
        padding: 20px;
    }

    /* ── Banner ── */
    .player-profile-main-box-container .banner {
        width: 100%;
    }

    .player-profile-main-box-container .profile-row {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 0px 0px 20px 0px;
    }

    .player-profile-main-box-container .avatar-wrap {
        position: relative;
        width: 160px;
        height: 160px;
        border-radius: 1.5rem;
        border: 4px solid #0f172a;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
        transition: transform 0.2s;
    }

        .player-profile-main-box-container .avatar-wrap:hover {
            transform: scale(1.04);
        }

        .player-profile-main-box-container .avatar-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .player-profile-main-box-container .avatar-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .player-profile-main-box-container .avatar-wrap:hover .avatar-overlay {
        opacity: 1;
    }

    .player-profile-main-box-container .avatar-overlay svg {
        margin-bottom: 4px;
    }

    .player-profile-main-box-container .profile-info {
        padding-bottom: 1rem;
    }

        .player-profile-main-box-container .profile-info h1 {
            font-size: 2rem;
            font-weight: 900;
            color: #f8fafc;
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

    .player-profile-main-box-container .profile-sub {
        color: #60a5fa;
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
    }

    .player-profile-main-box-container .profile-dob {
        color: #94a3b8;
        font-size: 0.82rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
    }

    .player-profile-main-box-container .form-body {
        padding: 0px;
    }

    .player-profile-main-box-container .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .player-profile-main-box-container .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .player-profile-main-box-container .input-group label {
            font-size: 0.8rem;
            font-weight: 600;
            color: #b2bcca;
            display: flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition: color 0.2s;
        }

        .player-profile-main-box-container .input-group:focus-within label {
            color: #60a5fa;
        }

        .player-profile-main-box-container .input-group input,
        .player-profile-main-box-container .input-group select,
        .player-profile-main-box-container .input-group textarea {
            width: 100%;
            background: #0B1120;
            border: 1px solid #ffffff42;
            border-radius: 0.8rem !important;
            padding: 0.75rem 1rem;
            color: #f1f5f9;
            font-family: 'Barlow', sans-serif;
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

            .player-profile-main-box-container .input-group input::placeholder,
            .player-profile-main-box-container .input-group textarea::placeholder {
                color: #475569;
            }

            .player-profile-main-box-container .input-group input:focus,
            .player-profile-main-box-container .input-group select:focus,
            .player-profile-main-box-container .input-group textarea:focus {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            }

            .player-profile-main-box-container .input-group input[type="date"]::-webkit-calendar-picker-indicator {
                filter: invert(0.5);
            }

    .player-profile-main-box-container .select-wrap {
        position: relative;
    }

        .player-profile-main-box-container .select-wrap select {
            appearance: none;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        .player-profile-main-box-container .select-wrap svg {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            pointer-events: none;
        }

    .player-profile-main-box-container .input-group select option {
        background: #1e293b;
        color: #f1f5f9;
    }

    .player-profile-main-box-container .input-group textarea {
        min-height: 110px;
        resize: none;
    }

    /* ── Checkboxes ── */
    .player-profile-main-box-container .checks-box {
        margin-top: 2.5rem;
        padding: 1.5rem;
        background: rgba(30, 41, 59, 0.35);
        border: 1px solid rgba(51, 65, 85, 0.6);
        border-radius: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .player-profile-main-box-container .check-label {
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
        font-size: 0.95rem;
        color: #94a3b8;
        transition: color 0.2s;
    }

        .player-profile-main-box-container .check-label:hover {
            color: #f1f5f9;
        }

        .player-profile-main-box-container .check-label input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: #3b82f6;
            border-radius: 4px;
            cursor: pointer;
            flex-shrink: 0;
        }

/* ── Action Buttons ── */
.btn-grid {
    margin-top: 2.5rem;
    display: flex;
    justify-content: end;
    gap: 1rem;
}

@media(max-width: 900px) {
    .player-profile-main-box-container .btn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 480px) {
    .player-profile-main-box-container .btn-grid {
        grid-template-columns: 1fr;
    }
}

.player-profile-main-box-container .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem 1.2rem;
    border-radius: 0.9rem;
    font-family: 'Inter 18pt Bold';
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: none;
    transition: all 0.18s;
}

    .player-profile-main-box-container .btn:active {
        transform: scale(0.96);
    }

.player-profile-main-box-container .btn-save {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

    .player-profile-main-box-container .btn-save:hover {
        background: #3b82f6;
    }

.player-profile-main-box-container .btn-outline {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
}

    .player-profile-main-box-container .btn-outline:hover {
        background: #334155;
    }

.player-profile-main-box-container .btn-share {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
}

    .player-profile-main-box-container .btn-share:hover {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
    }

/* ── Popup Overlay ── */
.player-profile-main-box-container .overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.25s ease;
}

    .player-profile-main-box-container .overlay.active {
        display: flex;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.player-profile-main-box-container .popup-card {
    width: 100%;
    max-width: 440px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 1.8rem;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    animation: zoomIn 0.2s ease;
}

.player-profile-main-box-container .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #1e293b;
}

    .player-profile-main-box-container .popup-header h2 {
        font-size: 1.2rem;
        font-weight: 800;
        color: #f8fafc;
    }

.player-profile-main-box-container .close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .player-profile-main-box-container .close-btn:hover {
        background: #1e293b;
        color: #f1f5f9;
    }

.player-profile-main-box-container .popup-body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.player-profile-main-box-container .popup-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 1.2rem;
    padding: 1.1rem 1.3rem;
    color: #f1f5f9;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
    width: 100%;
}

    .player-profile-main-box-container .popup-btn:hover {
        background: #334155;
    }

.player-profile-main-box-container .popup-icon {
    width: 50px;
    height: 50px;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

    .player-profile-main-box-container .popup-icon.blue {
        background: rgba(59, 130, 246, 0.12);
        color: #60a5fa;
    }

    .player-profile-main-box-container .popup-icon.purple {
        background: rgba(139, 92, 246, 0.12);
        color: #a78bfa;
    }

.player-profile-main-box-container .popup-btn:hover .popup-icon.blue {
    background: #3b82f6;
    color: #fff;
}

.player-profile-main-box-container .popup-btn:hover .popup-icon.purple {
    background: #7c3aed;
    color: #fff;
}

.player-profile-main-box-container .popup-btn-text strong {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #f1f5f9;
}

.player-profile-main-box-container .popup-btn-text span {
    font-size: 0.78rem;
    color: #64748b;
}

.player-profile-main-box-container .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.col-span-3 {
    grid-column: span 3;
}

#CustomerTable_wrapper .dataTables_length,
#CustomerTable_wrapper .dataTables_filter {
    margin-bottom: 18px;
}

#CustomerTable thead {
    background-color: #314158;
}

#CustomerTable tbody td {
    color: white;
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid #1a2533;
    font-family: 'Inter 18pt Regular';
}

#CustomerTable_wrapper .dataTables_length select {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-right: 8px;
}

#CustomerTable_wrapper .dataTables_length label,
#CustomerTable_filter label {
    color: white;
}

#CustomerTable_filter input {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-left: 8px;
}

#CustomerTable thead th {
    color: white;
    padding: 15px 30px 15px 10px;
    font-size: 14px;
    font-family: 'Inter 18pt Bold';
    border-bottom: 1px solid #1a2533;
    white-space: nowrap;
}

.player-team-details-container-box-main {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    margin-top: 18px;
}

#CustomerTable {
    width: 100% !important;
}

.player-team-details-container-box-main .possession-summary-heading-box {
    padding: 0px 0px 20px 0px;
}

/* ==== my gallery page start ==== */

.my-gallery-page-main-container-inside {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

.my-gallery-page-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

.my-gallery-select-and-lable {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .my-gallery-select-and-lable label {
        color: white;
        font-family: 'Inter 18pt SemiBolt';
        font-size: 16px;
        width: fit-content;
    }

    .my-gallery-select-and-lable select {
        width: fit-content;
        box-shadow: unset !important;
        border-radius: 6px;
    }

.my-gallery-page-btn-box {
    width: fit-content;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.my-gallery-page-table-container {
    width: 100%;
}

.my-glry-page-tbl-vdo {
    width: 200px;
    height: 150px;
}

    .my-glry-page-tbl-vdo video {
        width: 100%;
        height: 100%;
    }

.my-gallery-page-table-container .possession-summary-tbl-container table {
    min-width: max-content;
}

.highlight-reel-video-container {
    width: fit-content;
    display: flex;
    gap: 10px;
    align-items: center;
}

.highlight-tgl-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 50px;
    height: 26px;
    background: #ccc;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: 0.3s;
}

    .highlight-tgl-switch::before {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        background: #fff;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: 0.3s;
    }

    .highlight-tgl-switch:checked {
        background: #005DBF;
    }

        .highlight-tgl-switch:checked::before {
            transform: translateX(24px);
        }

.highlight-reel-video-container .hlgnt-itp-nmbr {
    width: 90px;
    background: white;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: black;
    display: none;
}

.highlight-action-btn-grp {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
}

    .highlight-action-btn-grp button {
        width: 36px;
        height: 36px;
        background-color: #1F2F57;
        color: #fff;
        border: none;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;
    }

.trash-dlt-btn:hover {
    background-color: #dc3545;
}

.evelope-btn-hvr:hover {
    background-color: #ffc107;
}

.dndl-btn-hvrt:hover {
    background-color: #218838;
}

.fldr-hvr-btn:hover {
    background-color: #17a2b8;
}

.email-req-popup-box-main,
.my-gallery-delete-popup-box-main,
.choose-folder-popup-main-container,
.operation-completed-successfully,
.video-big-screen-popup-main-container,
.upload-game-video-clip-popup-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

    .email-req-popup-box-main .event-main-dpdn-inside-container input {
        width: 100%;
        box-shadow: unset;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
    }

.EmailPopupmodel,
.MyGalleryDelete,
.ChooseFolderModel {
    display: none;
}

    .EmailPopupmodel.active,
    .MyGalleryDelete.active,
    .ChooseFolderModel.active {
        display: block;
    }

.success-icon-container svg {
    width: 100%;
    height: 100%;
}

.my-gallery-delete-popup-box-main .user-evaluation-popup-ok-btn-box {
    gap: 12px;
}

.operation-completed-successfully {
    display: none;
}

    .operation-completed-successfully.active {
        display: block;
    }

.video-big-screen-inside-main-container {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 95%;
    height: 95% !important;
    padding: 12px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

    .video-big-screen-inside-main-container video {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        object-fit: cover;
    }

.video-big-screen-and-close-btn {
    width: 100%;
    height: 92%;
    position: relative;
}

    .video-big-screen-and-close-btn .final-therd-popup-close-btn {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 9;
    }

.video-popup-footer-btn-box {
    width: fit-content;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.video-big-screen-popup-main-container {
    display: none;
}

    .video-big-screen-popup-main-container.active {
        display: block;
    }

.submit-a-game-for-analysis-popup-inside-box .possession-summary-heading-box {
    padding: 0px 0px 20px 0px;
}

.single-wizard-itp-box .form-control:focus {
    background: #0B1120;
    box-shadow: unset !important;
    border-color: #ffffff42;
}

.upload-game-video-clip-popup-container {
    display: none;
}

    .upload-game-video-clip-popup-container.active {
        display: block;
    }

/* ==== my gallery page end ==== */

/* ==== drag and drop start 30-04-2026 ==== */

.vdo-card-and-contant-box {
    width: 100%;
    margin: 0 auto;
}

    .vdo-card-and-contant-box .header-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #1e293b;
    }

    .vdo-card-and-contant-box .main-title {
        font-size: 2.25rem;
        font-weight: 900;
        color: #ffffff;
        letter-spacing: -0.05em;
        text-transform: uppercase;
        font-style: italic;
        margin: 0;
    }

        .vdo-card-and-contant-box .main-title span {
            color: #2563eb;
        }

    .vdo-card-and-contant-box .sub-title {
        color: #64748b;
        font-weight: 500;
        margin-top: 0.25rem;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }

    .vdo-card-and-contant-box .count-badge {
        padding: 0.625rem 1.5rem;
        background-color: #0f172a;
        border: 1px solid #1e293b;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .vdo-card-and-contant-box .clip-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        perspective: 2000px;
        transition: gap 0.3s ease;
        color: white;
    }

        .vdo-card-and-contant-box .clip-container.dragging-active {
            gap: 0.5rem;
        }

    .vdo-card-and-contant-box .clip-card {
        position: relative;
        background-color: #0f172a;
        border: 1px solid #1e293b;
        border-radius: 32px;
        display: flex;
        flex-direction: row;
        height: 394px;
        min-height: fit-content;
        transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
        cursor: grab;
        user-select: none;
        touch-action: none;
        transform-origin: center;
    }

    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card {
        height: 100px !important;
        min-height: auto;
        border-radius: 1.25rem;
        border-color: #334155;
        flex-direction: row !important;
    }

        .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .video-wrapper video {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }

        .vdo-card-and-contant-box .clip-container.dragging-active .clip-card:not(.sortable-drag) {
            opacity: 0.6;
        }

    /*    .vdo-card-and-contant-box .sortable-chosen {
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }*/

    .vdo-card-and-contant-box .sortable-ghost {
        opacity: 1 !important;
        height: 100px !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 2px dashed rgba(255, 255, 255, 0.3) !important;
        border-radius: 1.25rem !important;
        visibility: visible !important;
        transform: scale(0.98) !important;
    }

    .vdo-card-and-contant-box .sortable-drag {
        opacity: 0.95 !important;
        height: 100px !important;
        transform: scale(1.05) rotate(1deg) !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(37, 99, 235, 0.3) !important;
        border-color: #3b82f6 !important;
        z-index: 10000 !important;
        background-color: #1e293b !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: row !important;
    }

    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .info-grid,
    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .card-footer,
    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .comment-box,
    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .type-badge,
    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .play-overlay {
        display: none !important;
    }

    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .opponent-name {
        font-size: 1rem !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        display: block !important;
        opacity: 1 !important;
    }

    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .meta-info {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 4px;
        color: #94a3b8 !important;
        font-size: 0.7rem !important;
    }

    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .video-wrapper {
        width: 100px !important;
        height: 100% !important;
    }

    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card .content-wrapper {
        padding: 0 1rem !important;
        justify-content: center !important;
        display: flex !important;
    }

    .vdo-card-and-contant-box .video-wrapper {
        position: relative;
        width: 400px;
        min-width: 400px;
        height: 100%;
        flex-shrink: 0;
        transition: width 0.3s ease;
    }

        .vdo-card-and-contant-box .video-wrapper video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-top-left-radius: 32px;
            border-bottom-left-radius: 32px;
        }

    .vdo-card-and-contant-box .thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vdo-card-and-contant-box .content-wrapper {
        flex-grow: 1;
        padding: 24px;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
    }

    .vdo-card-and-contant-box .opponent-name {
        color: #ffffff;
        font-weight: 900;
        font-size: 24px;
        line-height: 1.2;
        margin: 0 0 0.5rem 0;
        font-style: italic;
    }

    .vdo-card-and-contant-box .meta-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #64748b;
        font-size: 0.875rem;
        font-weight: 700;
        text-transform: uppercase;
    }

        .vdo-card-and-contant-box .meta-info i {
            color: #3b82f6;
            width: 1rem;
        }

    .vdo-card-and-contant-box .comment-box {
        background-color: rgba(30, 41, 59, 0.3);
        border: 1px solid rgba(51, 65, 85, 0.3);
        padding: 1rem;
        border-radius: 1.25rem;
        min-width: 240px;
    }

    .vdo-card-and-contant-box .info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin: 20px 0;
    }

    .vdo-card-and-contant-box .grid-item {
        background-color: rgba(15, 23, 42, 0.5);
        padding: 1rem;
        border-radius: 1.25rem;
        border: 1px solid #1e293b;
    }

    .vdo-card-and-contant-box .label-tiny {
        font-size: 9px;
        color: #64748b;
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        display: block;
    }

    .vdo-card-and-contant-box .comment-text {
        color: #ffffff;
        font-size: 0.875rem;
        font-weight: 700;
        display: block;
    }

    .vdo-card-and-contant-box .grid-value {
        color: #ffffff;
        font-size: 0.875rem;
        font-weight: 700;
        display: block;
    }

    .vdo-card-and-contant-box .card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1.5rem;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        border-top: 1px solid rgba(30, 41, 59, 0.6);
    }

    .vdo-card-and-contant-box .toggle-btne {
        width: 3rem;
        height: 1.5rem;
        border-radius: 9999px;
        background-color: #2563eb;
        position: relative;
        border: none;
        cursor: pointer;
    }

        .vdo-card-and-contant-box .toggle-btne .dot {
            position: absolute;
            top: 0.25rem;
            left: 1.75rem;
            width: 1rem;
            height: 1rem;
            background-color: white;
            border-radius: 9999px;
            transition: 0.3s;
        }

        .vdo-card-and-contant-box .toggle-btne.off {
            background-color: #334155;
        }

            .vdo-card-and-contant-box .toggle-btne.off .dot {
                left: 0.25rem;
            }

    .vdo-card-and-contant-box .action-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #1e293b;
        color: #94a3b8;
        background: none;
        cursor: pointer;
        transition: 0.2s;
    }

        .vdo-card-and-contant-box .action-btn:hover {
            background: #1e293b;
            color: white;
        }

    .vdo-card-and-contant-box .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        background: #2563eb;
        color: white;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: 0.3s;
    }

    .vdo-card-and-contant-box .clip-card .video-wrapper:hover .play-button {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .vdo-card-and-contant-box .type-badge {
        position: absolute;
        top: 20px;
        left: 20px;
        background: #2563eb;
        color: white;
        padding: 4px 12px;
        border-radius: 8px;
        font-weight: 900;
        font-size: 10px;
        text-transform: uppercase;
    }

    .vdo-card-and-contant-box .drg-drp-action-menu {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

@media (max-width: 767px) {

    .vdo-card-and-contant-box .header-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .vdo-card-and-contant-box .main-title {
        font-size: 1.75rem;
    }

    .vdo-card-and-contant-box .clip-card {
        flex-direction: column;
        height: auto;
        border-radius: 1.5rem;
    }

    .vdo-card-and-contant-box .content-wrapper {
        padding: 1.5rem;
    }

    .vdo-card-and-contant-box .opponent-name {
        font-size: 1.3rem;
    }

    .vdo-card-and-contant-box .info-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 1rem 0;
    }

    .vdo-card-and-contant-box .clip-container.dragging-active .clip-card {
        flex-direction: row !important;
        height: 100px !important;
    }
}

.video-value-and-button-container-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0px;
}

.x-and-y-value-in-show-popup {
    color: white;
    display: flex;
    gap: 8px;
}

    .x-and-y-value-in-show-popup p {
        width: fit-content;
        background-color: #005DBF;
        padding: 8px 16px;
        border-radius: 8px;
    }

.location-capture-this-location-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

.location-capture-btn-popup {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sortable-chosen {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sortable-ghost {
    opacity: 1 !important;
    height: 100px !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 2px dashed rgba(255, 255, 255, 0.4) !important;
    border-radius: 1.25rem !important;
    visibility: visible !important;
    transform: scale(0.98) !important;
}

.sortable-drag {
    position: fixed !important;
    opacity: 0.95 !important;
    height: 100px !important;
    width: 100% !important;
    max-width: 800px !important;
    transform: scale(1.05) rotate(1.5deg) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9), 0 0 30px rgba(37, 99, 235, 0.4) !important;
    border: 1px solid #3b82f6 !important;
    z-index: 100000 !important;
    background-color: #1e293b !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: row !important;
    border-radius: 1.25rem !important;
    overflow: hidden !important;
}

    .dragging-active .clip-card .info-grid,
    .dragging-active .clip-card .card-footer,
    .dragging-active .clip-card .comment-box,
    .dragging-active .clip-card .type-badge,
    .dragging-active .clip-card .play-overlay,
    .sortable-drag .info-grid,
    .sortable-drag .card-footer,
    .sortable-drag .comment-box,
    .sortable-drag .type-badge,
    .sortable-drag .play-overlay {
        display: none !important;
    }

    .dragging-active .clip-card .opponent-name,
    .sortable-drag .opponent-name {
        font-size: 1.1rem !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        display: block !important;
    }

    .dragging-active .clip-card .meta-info,
    .sortable-drag .meta-info {
        display: flex !important;
        opacity: 1 !important;
        margin-top: 4px !important;
        color: #94a3b8 !important;
        font-size: 0.75rem !important;
    }

    .dragging-active .clip-card .video-wrapper,
    .sortable-drag .video-wrapper {
        width: 100px !important;
        height: 100% !important;
    }

    .dragging-active .clip-card .content-wrapper,
    .sortable-drag .content-wrapper {
        padding: 0 1.5rem !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

/* ==== drag and drop end 30-04-2026 ==== */

.header-top-main-box .game-name-and-flage-box {
    margin-left: auto;
}

#gameDropdownList {
    height: fit-content;
    max-height: 350px;
    overflow: auto !important;
    scrollbar-color: #131d37 #005dbf00;
    scrollbar-width: thin;
}

.idp-evaluation-container-main .football-rating {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.idp-evaluation-container-main .football-item {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.3s;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.3);
}

    .idp-evaluation-container-main .football-item:hover {
        transform: scale(1.11);
    }

    .idp-evaluation-container-main .football-item.active {
        filter: grayscale(0%) opacity(1);
    }

/* ==== Loader start ==== */

.mn-demo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 20px;
}

.mn-page-box {
    background: #131D37;
    padding: 40px;
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.btn-reload {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: transform 0.2s;
}

    .btn-reload:hover {
        transform: scale(1.05);
    }

/* --- GLOBAL LOADER CSS (Hardcoded Colors) --- */

.mn-loader-main-box-container {
    position: fixed;
    inset: 0;
    display: flex;
    /* Initially flex to show on load */
    align-items: center;
    justify-content: center;
    z-index: 100000;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.6);
    padding: 20px;
}

.mn-loader-modal {
    background-color: #131D37;
    width: 100%;
    max-width: 580px;
    padding: 4rem 2.5rem;
    border-radius: 40px;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mn-loader-heading {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: white;
    letter-spacing: -0.2px;
}

.mn-loader-stadium-track {
    height: 90px;
    position: relative;
    margin-bottom: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
}

.mn-loader-football-container {
    position: absolute;
    left: 20px;
    width: 48px;
    height: 48px;
    z-index: 10;
}

.mn-loader-ball-rolling {
    animation: mnRollBall 0.8s linear infinite;
}

@keyframes mnRollBall {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.mn-loader-goal-container {
    position: absolute;
    right: 20px;
    width: 100px;
    height: 70px;
    z-index: 5;
}

.mn-loader-goal-post {
    width: 100%;
    height: 100%;
    border: 4px solid white;
    border-bottom: none;
    position: relative;
    background-color: rgba(255, 255, 255, 0.03);
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 10px);
    border-radius: 4px 4px 0 0;
}

.mn-loader-goal-shake {
    animation: mnNetShake 0.4s ease-in-out infinite;
}

@keyframes mnNetShake {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.mn-loader-progress-container {
    background-color: #001122;
    height: 56px;
    border-radius: 100px;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.6);
}

.mn-loader-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1e40af, #3b82f6);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

    /* The White Patta (Stripes) effect */
    .mn-loader-progress-fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
        animation: mnMoveStripes 1.5s linear infinite;
    }

@keyframes mnMoveStripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}

.mn-loader-percent-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 800;
    font-size: 1.2rem;
    z-index: 20;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.mn-loader-status-container {
    height: 24px;
    margin-top: 1.2rem;
}

.mn-loader-status-text {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.7;
}

.mn-loader-completed-text {
    color: #10b981;
    font-size: 1.3rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: mnPopIn 0.5s ease forwards;
}

@keyframes mnPopIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mn-loader-bar-success {
    background: linear-gradient(90deg, #059669, #10b981) !important;
}

.mn-loader-faded {
    opacity: 0.2;
    transition: opacity 0.5s;
}

@media (max-width: 600px) {
    .mn-loader-modal {
        padding: 3rem 1.5rem;
        border-radius: 30px;
    }

    .mn-loader-heading {
        font-size: 1.1rem;
    }

    .mn-loader-football-container {
        width: 40px;
        height: 40px;
    }

    .mn-loader-goal-container {
        width: 80px;
        height: 60px;
    }

    .mn-loader-progress-container {
        height: 48px;
    }
}

/* ==== Loader end ==== */

/* ==== change password page start ==== */

.change-pass-page .form-body .input-group label span {
    color: #EB5757;
}

#userSave .btn-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#userSave .loader {
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: none;
}

#userSave.save-saving-spin-btn .loader {
    display: inline-block;
}

#userSave.save-saving-spin-btn {
    pointer-events: none;
    opacity: 0.7;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ==== change password page end ==== */


/* ==== change team page start ==== */

.change-team-main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    background: radial-gradient(circle at 0% 0%, #131D37 0%, #0B1120 100%);
}

    .change-team-main-container .change-team-tabs-wrapper {
        display: inline-flex;
        background: rgba(19, 29, 55, 0.8);
        backdrop-filter: blur(10px);
        padding: 6px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 40px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }

    .change-team-main-container .change-team-tab-btn {
        padding: 10px 24px;
        border: none;
        background: transparent;
        color: #94A3B8;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        border-radius: 40px;
        transition: all 0.3s ease;
    }

        .change-team-main-container .change-team-tab-btn.active {
            background-color: #005DBF;
            color: #FFFFFF;
            box-shadow: 0 8px 20px rgba(0, 93, 191, 0.3);
        }

    .change-team-main-container .change-team-title {
        font-size: 2.25rem;
        margin-bottom: 40px;
        color: #FFFFFF;
        font-weight: 800;
        letter-spacing: -1px;
        text-align: center;
    }

    .change-team-main-container .change-team-panel {
        display: none;
        width: 100%;
        animation: slideUp 0.6s ease-out;
    }

        .change-team-main-container .change-team-panel.active {
            display: grid;
        }

    .change-team-main-container .change-team-card {
        width: calc(24% - 12px);
        position: relative;
        background: #131D37;
        border-radius: 28px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 250px;
        cursor: pointer;
    }

        .change-team-main-container .change-team-card:hover {
            transform: translateY(-10px);
            border-color: #005DBF;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }

        .change-team-main-container .change-team-card.active {
            border-color: #005DBF;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }

    .change-team-main-container .change-team-status-badge {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        padding: 5px 12px;
        background: rgba(74, 222, 128, 0.1);
        color: #4ADE80;
        border-radius: 30px;
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: 1px solid rgba(74, 222, 128, 0.2);
    }

    .change-team-main-container .change-team-header {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .change-team-main-container .change-team-logo-box {
        width: 85px;
        height: 85px;
        border-radius: 22px;
        background: #0B1120;
        border: 2px solid rgba(255, 255, 255, 0.05);
        padding: 4px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .change-team-main-container .change-team-logo-img {
        width: 100%;
        height: 100%;
        border-radius: 18px;
        object-fit: cover;
    }

    .change-team-main-container .change-team-name-group {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .change-team-main-container .change-team-name-text {
        font-size: 18px;
        font-weight: 800;
        color: #FFFFFF;
        margin-bottom: 4px;
        width: calc(100% - 75px);
    }

    .change-team-main-container .change-team-slogan-wrap {
        padding: 1rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 1rem;
        flex-grow: 1;
    }

    .change-team-main-container .change-team-slogan-text {
        font-size: 0.95rem;
        color: #94A3B8;
        line-height: 1.5;
        display: block;
    }

    .change-team-main-container .change-team-footer-stats {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(11, 17, 32, 0.6);
        padding: 12px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.03);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .change-team-main-container .change-team-match-label-box {
        display: flex;
        flex-direction: column;
    }

    .change-team-main-container .change-team-match-label {
        font-size: 0.8rem;
        color: #94A3B8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .change-team-main-container .change-team-match-value-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 80px;
        position: relative;
    }

    .change-team-main-container .change-team-match-number {
        font-size: 1.75rem;
        font-weight: 900;
        color: #005DBF;
        text-shadow: 0 0 15px rgba(0, 93, 191, 0.2);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: absolute;
        right: 0;
    }

    .change-team-main-container .change-team-card:hover .change-team-match-number,
    .change-team-main-container .change-team-card.active .change-team-match-number {
        right: 45px;
        transform: scale(0.9);
    }

    .change-team-main-container .change-team-action-circle {
        width: 36px;
        height: 36px;
        background: #005DBF;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 15px rgba(0, 93, 191, 0.4);
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: absolute;
        right: 0;
    }

    .change-team-main-container .change-team-card:hover .change-team-action-circle,
    .change-team-main-container .change-team-card.active .change-team-action-circle {
        opacity: 1;
        transform: translateX(0);
    }

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .change-team-main-container .change-team-panel.active {
        grid-template-columns: 1fr;
    }
}

.team-card-main-bdy {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

s
.approver-yellow-status {
    width: fit-content;
    color: #FFC107;
    border: 1px solid #FFC107;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    text-transform: uppercase;
    font-size: 10px;
    border-radius: 4px;
    margin: auto;
}

/* ==== change team page end ==== */



/* ==== Player Profile Page start ==== */

.player-profile-main-box-container {
    width: 100%;
}

    .player-profile-main-box-container .main-card {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        background-color: #131D37;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 18px;
    }

    /* ── Banner ── */
    .player-profile-main-box-container .banner {
        width: 100%;
    }

    .player-profile-main-box-container .profile-row {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 0px 0px 20px 0px;
    }

    .player-profile-main-box-container .avatar-wrap {
        position: relative;
        width: 160px;
        height: 160px;
        border-radius: 1.5rem;
        border: 4px solid #0f172a;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        flex-shrink: 0;
        transition: transform 0.2s;
    }

        .player-profile-main-box-container .avatar-wrap:hover {
            transform: scale(1.04);
        }

        .player-profile-main-box-container .avatar-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .player-profile-main-box-container .avatar-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .player-profile-main-box-container .avatar-wrap:hover .avatar-overlay {
        opacity: 1;
    }

    .player-profile-main-box-container .avatar-overlay svg {
        margin-bottom: 4px;
    }

    .player-profile-main-box-container .profile-info {
        padding-bottom: 1rem;
    }

        .player-profile-main-box-container .profile-info h1 {
            font-size: 2rem;
            font-weight: 900;
            color: #f8fafc;
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

    .player-profile-main-box-container .profile-sub {
        color: #60a5fa;
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
    }

    .player-profile-main-box-container .profile-dob {
        color: #94a3b8;
        font-size: 0.82rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
    }

    .player-profile-main-box-container .form-body {
        padding: 0px;
    }

    .player-profile-main-box-container .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .player-profile-main-box-container .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .player-profile-main-box-container .input-group label {
            font-size: 0.8rem;
            font-weight: 600;
            color: #b2bcca;
            display: flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition: color 0.2s;
        }

        .player-profile-main-box-container .input-group:focus-within label {
            color: #60a5fa;
        }

        .player-profile-main-box-container .input-group input,
        .player-profile-main-box-container .input-group select,
        .player-profile-main-box-container .input-group textarea {
            width: 100%;
            background: #0B1120;
            border: 1px solid #ffffff42;
            border-radius: 0.8rem !important;
            padding: 0.75rem 1rem;
            color: #f1f5f9;
            font-family: 'Barlow', sans-serif;
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

            .player-profile-main-box-container .input-group input::placeholder,
            .player-profile-main-box-container .input-group textarea::placeholder {
                color: #475569;
            }

            .player-profile-main-box-container .input-group input:focus,
            .player-profile-main-box-container .input-group select:focus,
            .player-profile-main-box-container .input-group textarea:focus {
                border-color: #3b82f6;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            }

            .player-profile-main-box-container .input-group input[type="date"]::-webkit-calendar-picker-indicator {
                filter: invert(0.5);
            }

    .player-profile-main-box-container .select-wrap {
        position: relative;
    }

        .player-profile-main-box-container .select-wrap select {
            appearance: none;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        .player-profile-main-box-container .select-wrap svg {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
            pointer-events: none;
        }

    .player-profile-main-box-container .input-group select option {
        background: #1e293b;
        color: #f1f5f9;
    }

    .player-profile-main-box-container .input-group textarea {
        min-height: 110px;
        resize: none;
    }

    /* ── Checkboxes ── */
    .player-profile-main-box-container .checks-box {
        margin-top: 2.5rem;
        padding: 1.5rem;
        background: rgba(30, 41, 59, 0.35);
        border: 1px solid rgba(51, 65, 85, 0.6);
        border-radius: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .player-profile-main-box-container .check-label {
        display: flex;
        align-items: center;
        gap: 14px;
        cursor: pointer;
        font-size: 0.95rem;
        color: #94a3b8;
        transition: color 0.2s;
    }

        .player-profile-main-box-container .check-label:hover {
            color: #f1f5f9;
        }

        .player-profile-main-box-container .check-label input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: #3b82f6;
            border-radius: 4px;
            cursor: pointer;
            flex-shrink: 0;
        }

/* ── Action Buttons ── */
.btn-grid {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media(max-width: 900px) {
    .player-profile-main-box-container .btn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 480px) {
    .player-profile-main-box-container .btn-grid {
        grid-template-columns: 1fr;
    }
}

.player-profile-main-box-container .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1rem 1.2rem;
    border-radius: 0.9rem;
    font-family: 'Inter 18pt Bold';
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: none;
    transition: all 0.18s;
}

    .player-profile-main-box-container .btn:active {
        transform: scale(0.96);
    }

.player-profile-main-box-container .btn-save {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

    .player-profile-main-box-container .btn-save:hover {
        background: #3b82f6;
    }

.player-profile-main-box-container .btn-outline {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
}

    .player-profile-main-box-container .btn-outline:hover {
        background: #334155;
    }

.player-profile-main-box-container .btn-share {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
}

    .player-profile-main-box-container .btn-share:hover {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
    }

/* ── Popup Overlay ── */
.player-profile-main-box-container .overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.25s ease;
}

    .player-profile-main-box-container .overlay.active {
        display: flex;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.player-profile-main-box-container .popup-card {
    width: 100%;
    max-width: 440px;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 1.8rem;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    animation: zoomIn 0.2s ease;
}

.player-profile-main-box-container .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #1e293b;
}

    .player-profile-main-box-container .popup-header h2 {
        font-size: 1.2rem;
        font-weight: 800;
        color: #f8fafc;
    }

.player-profile-main-box-container .close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .player-profile-main-box-container .close-btn:hover {
        background: #1e293b;
        color: #f1f5f9;
    }

.player-profile-main-box-container .popup-body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.player-profile-main-box-container .popup-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 1.2rem;
    padding: 1.1rem 1.3rem;
    color: #f1f5f9;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
    width: 100%;
}

    .player-profile-main-box-container .popup-btn:hover {
        background: #334155;
    }

.player-profile-main-box-container .popup-icon {
    width: 50px;
    height: 50px;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

    .player-profile-main-box-container .popup-icon.blue {
        background: rgba(59, 130, 246, 0.12);
        color: #60a5fa;
    }

    .player-profile-main-box-container .popup-icon.purple {
        background: rgba(139, 92, 246, 0.12);
        color: #a78bfa;
    }

.player-profile-main-box-container .popup-btn:hover .popup-icon.blue {
    background: #3b82f6;
    color: #fff;
}

.player-profile-main-box-container .popup-btn:hover .popup-icon.purple {
    background: #7c3aed;
    color: #fff;
}

.player-profile-main-box-container .popup-btn-text strong {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #f1f5f9;
}

.player-profile-main-box-container .popup-btn-text span {
    font-size: 0.78rem;
    color: #64748b;
}

.player-profile-main-box-container .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.col-span-3 {
    grid-column: span 3;
}

#CustomerTable_wrapper .dataTables_length,
#CustomerTable_wrapper .dataTables_filter {
    margin-bottom: 18px;
}

#CustomerTable thead {
    background-color: #314158;
}

#CustomerTable tbody td {
    color: white;
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid #1a2533;
    font-family: 'Inter 18pt Regular';
}

#CustomerTable_wrapper .dataTables_length select {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-right: 8px;
}

#CustomerTable_wrapper .dataTables_length label,
#CustomerTable_filter label {
    color: white;
}

#CustomerTable_filter input {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-left: 8px;
}

#CustomerTable thead th {
    color: white;
    padding: 15px 30px 15px 10px;
    font-size: 14px;
    font-family: 'Inter 18pt Bold';
    border-bottom: 1px solid #1a2533;
    white-space: nowrap;
}

.player-team-details-container-box-main {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    margin-top: 18px;
}

#CustomerTable {
    width: 100% !important;
}

.player-team-details-container-box-main .possession-summary-heading-box {
    padding: 0px 0px 20px 0px;
}

/* ==== Player Profile Page end ==== */

/* ==== account profile changes page start ==== */

.account-setting-top-tab-pnl-main-box {
    width: 100%;
    margin: auto;
}

    .account-setting-top-tab-pnl-main-box .nav-tabs {
        width: fit-content;
        margin: auto;
        border-bottom: unset;
        background: rgba(19, 29, 55, 0.8);
        backdrop-filter: blur(10px);
        padding: 6px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }

        .account-setting-top-tab-pnl-main-box .nav-tabs .nav-link {
            padding: 10px 24px;
            border: none;
            background: transparent;
            color: #94A3B8;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 40px;
            transition: all 0.3s ease;
        }

            .account-setting-top-tab-pnl-main-box .nav-tabs .nav-link.active {
                background-color: #005DBF;
                color: #FFFFFF;
                box-shadow: 0 8px 20px rgba(0, 93, 191, 0.3);
            }

        .account-setting-top-tab-pnl-main-box .nav-tabs .nav-item {
            margin-bottom: 0px;
        }

    .account-setting-top-tab-pnl-main-box .tab-content {
        display: block;
        padding: 30px 0px 0px 0px;
    }

/* ==== account profile changes page end ==== */

/* ==== My gallary page and my Player Profile Page changes start ==== */

.my-glry-pg-filter-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

#DateFilterPopup {
    display: none;
}

.select-video-file-container-main,
.video-link-share-popup-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

.select-video-file-inside-box-main {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 520px;
    padding: 20px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

.select-video-file-header-box {
    margin-bottom: 16px;
}

    .select-video-file-header-box label {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 20px;
        font-family: 'Inter 18pt Medium';
    }

.select-video-open-file {
    width: 100%;
    margin: auto;
}

    .select-video-open-file label {
        width: 100%;
        text-align: center;
    }

.select-video-submit-button-box {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

#SelectVideoFilePopupMn {
    display: none;
}

    #SelectVideoFilePopupMn.active {
        display: block;
    }

.video-link-share-popup-inside-box {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 520px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

.video-share-link-popup-close {
    color: white;
    background: #EB5757;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.video-link-share-popup-inside-box .possession-summary-heading-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px;
    border-bottom: 1px solid #002D5B;
}

.video-link-share-profile-popup-body {
    padding: 20px 20px 20px 20px;
}

    .video-link-share-profile-popup-body label {
        width: 100%;
        color: white;
        font-size: 16px;
        font-family: 'Inter 18pt Regular';
        margin-bottom: 16px;
    }

.video-link-copy-itp-and-copy-buton input {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    width: 100%;
}

.video-link-copy-itp-and-copy-buton {
    width: 100%;
    display: flex;
    gap: 8px;
}

#VideoLinkSharePopup {
    display: none;
}

    #VideoLinkSharePopup.active {
        display: block;
    }

/* ==== My gallary page and my Player Profile Page changes end ==== */

/* ==== My Profile Page start ====  */

.my-profile-page-upload-image-section-main-container {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.my-profile-upld-img-box {
    display: flex;
    align-items: center;
    gap: 25px;
    width: fit-content;
}

    .my-profile-upld-img-box .image-preview-wrapper {
        position: relative;
        width: 120px;
        min-width: 120px;
        height: 120px;
        background-color: #ffffff42;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4px solid rgba(255, 255, 255, 0.1);
    }

    .my-profile-upld-img-box #ShowImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .my-profile-upld-img-box .placeholder-icon {
        font-size: 50px;
        color: #778da9;
    }

    .my-profile-upld-img-box .upload-controls {
        flex-grow: 1;
    }

    .my-profile-upld-img-box .btn-light {
        background-color: #1b263b;
        color: #ffffff;
        border: 2px dashed #415a77;
        padding: 12px 24px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 600;
        display: inline-block;
        transition: all 0.3s ease;
        text-align: center;
    }

        .my-profile-upld-img-box .btn-light:hover {
            background-color: #415a77;
            border-color: #778da9;
            transform: translateY(-2px);
        }

    .my-profile-upld-img-box #userFileUpload {
        display: none;
    }

    .my-profile-upld-img-box .info-text {
        color: #778da9;
        font-size: 13px;
        margin-top: 10px;
    }

.my-profile-right-side-image-container {
    width: 120px;
    height: 120px;
    background-color: #ffffff42;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

    .my-profile-right-side-image-container button {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: white;
        border: unset;
    }

        .my-profile-right-side-image-container button img {
            width: 100%;
            height: 100%;
        }

.my-profile-page-main-boxes-contaienr .main-card .form-body .input-group label span {
    color: #EB5757;
}

.my-profile-page-team-and-invite-fans-table-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
}

.my-profile-tbl-tab-pnl-container {
    width: 100%;
}

.my-profile-tbl-tab-pnl-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.my-profile-tbl-tab-pnl-tab {
    width: fit-content;
    padding: 10px 18px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    outline: none;
    font-family: 'Inter 18pt Regular';
    border-radius: 8px;
    border: 1px solid transparent;
}

    .my-profile-tbl-tab-pnl-tab:hover {
        border-color: #005DBF;
        color: white;
    }

    .my-profile-tbl-tab-pnl-tab.active {
        background-color: #005DBF;
    }

.my-profile-tbl-tab-pnl-content {
    padding: 0px 0px;
}

.my-profile-tbl-nm-td {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .my-profile-tbl-nm-td img {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 100%;
    }

.my-profile-heading-and-para {
    width: fit-content;
}

    .my-profile-heading-and-para h5 {
        font-size: 16px;
        font-family: 'Inter 18pt Medium';
    }

    .my-profile-heading-and-para p {
        font-size: 14px;
    }

.my-profile-tbl-tab-pnl-content .my-profile-tbl-tab-pnl-panel table tbody .action-group button:not(.btn-custom) {
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #EB5757;
}

.approver-green-status {
    width: fit-content;
    color: #22af46;
    border: 1px solid #22af46;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    text-transform: uppercase;
    font-size: 10px;
    border-radius: 4px;
    margin: auto;
}

.invite-fans-popup-btn {
    width: fit-content;
    margin-left: auto;
    margin-bottom: 14px;
}

    .invite-fans-popup-btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        height: fit-content;
        color: white;
    }

#MyPlayerInvitePopup {
    display: none;
}

    #MyPlayerInvitePopup.active {
        display: block;
    }

#invitationFanSend .loader {
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    display: none;
    margin-right: 8px;
    animation: spin 0.6s linear infinite;
}

#invitationFanSend.loading .loader {
    display: inline-block;
}

#invitationFanSend .btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ==== My Profile Page end ====  */

/* ==== user guide page start ==== */

.dashboard-user-guide-main-container {
    width: 100%;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

    .dashboard-user-guide-main-container embed {
        width: 100%;
        height: calc(100vh - 190px);
        border-radius: 12px;
    }

/* ==== user guide page end ==== */

/* ==== contact us page start ==== */

.contact-us-page-main-contaienr .grid {
    grid-template-columns: repeat(2, 1fr);
}

.contact-us-page-main-contaienr .input-group input.readonly-itp {
    background: #ffffff42;
}

.contact-us-page-main-contaienr .input-group.col-span-3 {
    grid-column: span 2;
}

/* ==== contact us page end ==== */

/* ==== Logout popup start ==== */

.logout-popup-main {
    display: none;
}

    .logout-popup-main.active {
        display: block;
    }

    .logout-popup-main .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(11, 17, 32, 0.75);
        backdrop-filter: blur(15px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .logout-popup-main .modal-card {
        background: rgba(19, 29, 55, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 95%;
        max-width: 480px;
        border-radius: 40px;
        padding: 50px 40px;
        position: relative;
        box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
        overflow: hidden;
        animation: stadiumEntry 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

@keyframes stadiumEntry {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.logout-popup-main .exit-track {
    width: 320px;
    height: 120px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 100px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.logout-popup-main .ball-wrapper {
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 5;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.logout-popup-main .football-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.logout-popup-main .exit-door {
    width: 80px;
    height: 80px;
    background: rgba(235, 87, 87, 0.1);
    color: #EB5757;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border: 1px solid rgba(235, 87, 87, 0.3);
    transition: all 0.4s ease;
}

.logout-popup-main .track-active .ball-wrapper {
    transform: translateX(195px) rotate(450deg);
}

.logout-popup-main .track-active .exit-door {
    background: #EB5757;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(235, 87, 87, 0.5);
}

.logout-popup-main .text-group {
    text-align: center;
    width: 100%;
    margin-bottom: 28px;
}

.logout-popup-main h2 {
    color: white;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -1px;
    line-height: 1;
}

.logout-popup-main p {
    color: #94A3B8;
    font-size: 18px;
    line-height: 1.6;
    max-width: 340px;
    margin: 0 auto;
    text-align: center;
}

.logout-popup-main .btn-container {
    display: flex;
    gap: 15px;
    width: 100%;
}

.logout-popup-main .btn {
    flex: 1;
    padding: 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.logout-popup-main .btn-logout {
    background: #EB5757;
    color: white;
    border: none;
    box-shadow: 0 8px 20px rgba(235, 87, 87, 0.3);
}

    .logout-popup-main .btn-logout:hover {
        background: #f06a6a;
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(235, 87, 87, 0.4);
    }

.logout-popup-main .btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: #CBD5E1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .logout-popup-main .btn-cancel:hover {
        background: rgba(255, 255, 255, 0.12);
        color: white;
        transform: translateY(-3px);
    }

/* ==== Logout popup end ==== */

/* ==== My gallary page and my Player Profile Page changes start ==== */

.my-glry-pg-filter-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

#DateFilterPopup {
    display: none;
}

.select-video-file-container-main,
.video-link-share-popup-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

.select-video-file-inside-box-main {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 520px;
    padding: 20px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

.select-video-file-header-box {
    margin-bottom: 16px;
}

    .select-video-file-header-box label {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 20px;
        font-family: 'Inter 18pt Medium';
    }

.select-video-open-file {
    width: 100%;
    margin: auto;
}

    .select-video-open-file label {
        width: 100%;
        text-align: center;
    }

.select-video-submit-button-box {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

#SelectVideoFilePopupMn {
    display: none;
}

    #SelectVideoFilePopupMn.active {
        display: block;
    }

.video-link-share-popup-inside-box {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 520px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

.video-share-link-popup-close {
    color: white;
    background: #EB5757;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.video-link-share-popup-inside-box .possession-summary-heading-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px;
    border-bottom: 1px solid #002D5B;
}

.video-link-share-profile-popup-body {
    padding: 20px 20px 20px 20px;
}

    .video-link-share-profile-popup-body label {
        width: 100%;
        color: white;
        font-size: 16px;
        font-family: 'Inter 18pt Regular';
        margin-bottom: 16px;
    }

.video-link-copy-itp-and-copy-buton input {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    width: 100%;
}

.video-link-copy-itp-and-copy-buton {
    width: 100%;
    display: flex;
    gap: 8px;
}

#VideoLinkSharePopup {
    display: none;
}

    #VideoLinkSharePopup.active {
        display: block;
    }

/* ==== My gallary page and my Player Profile Page changes end ==== */

/* ==== my profile page changes start ==== */

.account-setting-top-tab-pnl-main-box .main-card .profile-row {
    position: relative;
}

.share-profile-button-box {
    font-size: 18px;
    padding: 0px;
    font-family: 'Inter 18pt Regular';
    border-radius: 10px;
    color: white;
    background-color: #005DBF;
    border: 1px solid #005DBF;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 2px 1px transparent;
    position: absolute;
    top: 0;
    right: 0;
}

    .share-profile-button-box:hover {
        box-shadow: 0px 0px 2px 1px white;
    }

.view-highlight-and-select-video-btn-box {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

    .view-highlight-and-select-video-btn-box .btn-grid {
        display: grid;
        margin-top: 0px;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 18px;
    }

.upload-videoshow-container-box {
    width: 100%;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    padding: 16px;
    border-radius: 16px;
    position: relative;
}

    .upload-videoshow-container-box video {
        width: 100%;
        border-radius: 8px;
    }

.dlt-video-btn-with-icn {
    position: absolute;
    right: 28px;
    top: 28px;
    width: 36px;
    height: 36px;
    background-color: #EB5757;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    z-index: 9;
}

.my-player-profile-page-tab-box-main .manage-id-user-header {
    margin-bottom: 0px;
}

.my-player-profile-page-tab-box-main {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* ==== my profile page changes end ==== */

.change-team-page-dpdn-mn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: 16px;
    padding: 0 20px;
}

.language-slct-dpdn {
    position: relative;
    width: 95px;
    user-select: none;
}

    .language-slct-dpdn .dpdn-button {
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 12px;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

        .language-slct-dpdn .dpdn-button:hover {
            border-color: #3b82f6;
        }

        .language-slct-dpdn .dpdn-button i.lang-icon {
            color: white;
            font-size: 14px;
        }

        .language-slct-dpdn .dpdn-button .selected-flag-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
        }

.flag-img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}

.language-slct-dpdn .dpdn-button i.arrow-icon {
    font-size: 10px;
    color: white;
    transition: transform 0.3s ease;
}

.language-slct-dpdn .dpdn-menu {
    width: 180px;
    position: absolute;
    top: calc(100% + 8px);
    left: unset;
    right: 0;
    width: 180px;
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    z-index: 50;
    display: none;
    overflow: hidden;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.language-slct-dpdn .dpdn-menu.show {
    display: block !important;
}

.language-slct-dpdn .dpdn-list {
    max-height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #0B1120;
}

    .language-slct-dpdn .dpdn-list::-webkit-scrollbar {
        width: 4px;
    }

    .language-slct-dpdn .dpdn-list::-webkit-scrollbar-thumb {
        background: #4b5563;
        border-radius: 10px;
    }

.language-slct-dpdn .dpdn-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    transition: all 0.2s;
    color: white;
}

    .language-slct-dpdn .dpdn-item:hover {
        background-color: #1e293b;
        color: #3b82f6;
    }

    .language-slct-dpdn .dpdn-item.active {
        background-color: #1e293b;
        color: #3b82f6;
        font-weight: 600;
    }

    .language-slct-dpdn .dpdn-item .item-text {
        font-size: 14px;
    }

.language-slct-dpdn.open i.arrow-icon {
    transform: rotate(180deg);
}

/* ==== blue daimond gradiunt ground start ==== */

.game-dm-ground-grdunt-main-contaienr {
    width: 100%;
    max-width: 1112px;
    height: 636px;
    margin: auto;
    padding: 60px 16px 68px 16px;
    background: #131D37;
    border: 1px solid white;
    margin-top: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
}

.dm-ground-grd-ground-sec-main {
    width: 100%;
    margin: auto;
    height: 100%;
    background: radial-gradient(circle, rgba(4, 181, 209, 1) 0%, rgba(4, 79, 112, 1) 100%);
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.dm-ground-grd-goal-left-box {
    width: 160px;
    height: 300px;
    border: 3px solid white;
    border-left: unset;
    display: flex;
    align-items: center;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    position: relative;
}

.dm-ground-grd-goal-right-box {
    width: 160px;
    height: 300px;
    border: 3px solid white;
    border-right: unset;
    display: flex;
    align-items: center;
    position: relative;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.dm-ground-circle-center {
    width: 160px;
    height: 160px;
    border-radius: 100%;
    border: 3px solid white;
}

.dm-ground-center-full-line-box {
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: #fff;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}

.game-left-outside-box-goal {
    width: 30px;
    height: 72px;
    border: 3px solid white;
    border-right: unset;
}

.game-right-outside-box-goal {
    width: 30px;
    height: 72px;
    border: 3px solid white;
    border-left: unset;
}

.game-dm-pstn-line {
    position: absolute;
    height: 84%;
    width: 28px;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    left: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
}

    .game-dm-pstn-line.isnd-right {
        position: absolute;
        height: 84%;
        width: 28px;
        border-top: 3px solid white;
        border-bottom: 3px solid white;
        left: unset;
        right: -15px;
        top: 0;
        bottom: 0;
        margin: auto;
    }

.gm-dm-grd-dots {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -9px;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: white;
}

    .gm-dm-grd-dots.grd-sec-right {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: unset;
        left: -9px;
        margin: auto;
        width: 16px;
        height: 16px;
        border-radius: 100%;
        background-color: white;
    }

.gm-dm-grd-dots-sec {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -104px;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: white;
}

    .gm-dm-grd-dots-sec.sec-gm-dm-grd {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: unset;
        left: -104px;
        margin: auto;
        width: 16px;
        height: 16px;
        border-radius: 100%;
        background-color: white;
    }

.dm-ground-top-side-brdr-box {
    position: absolute;
    height: 28px;
    width: 446px;
    max-width: 446px;
    top: -14px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dm-ground-top-side-brdr-inside-box {
    width: 100px;
    height: 100%;
    border-right: 3px solid white;
    border-left: 3px solid white;
}

.dm-ground-top-side-brdr-box.brdr-sd-box-sec {
    top: unset;
    bottom: -14px;
}

.dm-grd-crnr-top-left {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    border-bottom-right-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.dm-grd-crnr-top-right {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-left: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    border-bottom-left-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.dm-grd-crnr-bottom-left {
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    border-top-right-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.dm-grd-crnr-bottom-right {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    border-top-left-radius: 100%;
    background-color: transparent;
    z-index: 2;
}

.out-side-container-bottom-side-box {
    position: absolute;
    height: 28px;
    width: 446px;
    max-width: 446px;
    bottom: -50px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.out-side-container-bottom-side-box-insdiebox {
    width: 100px;
    height: 100%;
    border: 3px solid white;
}

.dm-ground-grd-ground-sec-main .game-clips-dpdn {
    position: absolute;
    top: 28px;
    right: 16px;
}

    .dm-ground-grd-ground-sec-main .game-clips-dpdn .game-clips-dpdn-header {
        padding: 6px 12px;
        font-size: 14px;
    }

.dm-game-grd-counting-left {
    position: absolute;
    width: 160px;
    height: 160px;
    top: 0px;
    bottom: 0px;
    left: 125px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .dm-game-grd-counting-left h2,
    .dm-game-grd-counting-right h2 {
        color: white;
        font-family: 'Inter 18pt Bold';
        font-size: 94px;
        text-align: center;
    }

    .dm-game-grd-counting-left p,
    .dm-game-grd-counting-right p {
        text-align: center;
        font-size: 16px;
        color: white;
    }

.dm-game-grd-counting-center {
    position: absolute;
    width: 160px;
    height: 160px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dm-game-grd-counting-right {
    position: absolute;
    width: 160px;
    height: 160px;
    top: 0px;
    bottom: 0px;
    right: 125px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==== blue daimond gradiunt ground end ====  */

/* ==== football-green-ground section start ==== */

.football-green-ground-main-box {
    width: 100%;
    max-width: 1112px;
    margin: auto;
    padding: 20px;
    height: fit-content;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid white;
    margin-top: 18px;
}

.football-inside-green-ground {
    width: 100%;
    height: 538px;
    background-color: #5cb45e;
    border-radius: 140px;
    border: 3px solid black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.football-inside-green-ground-left-and-right {
    width: 260px;
    height: 220px;
    border: 6px solid white;
    position: relative;
}

    .football-inside-green-ground-left-and-right.left {
        border-top-right-radius: 300px;
        border-bottom-right-radius: 300px;
        border-left: unset;
    }

    .football-inside-green-ground-left-and-right.right {
        border-top-left-radius: 300px;
        border-bottom-left-radius: 300px;
        border-right: unset;
    }

    .football-inside-green-ground-left-and-right.left .football-center-line-main {
        position: absolute;
        width: 6px;
        height: 100%;
        top: 0px;
        bottom: 0px;
        right: 112px;
        background-color: white;
    }

    .football-inside-green-ground-left-and-right.right .football-center-line-main {
        position: absolute;
        width: 6px;
        height: 100%;
        top: 0px;
        bottom: 0px;
        left: 112px;
        background-color: white;
    }

.football-center-circle-box {
    width: 220px;
    height: 220px;
    border: 6px solid white;
    border-radius: 100%;
}

.football-green-center-ground-line {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    height: 100%;
    width: 6px;
    background-color: white;
}

.football-center-bottom-circle-box-main {
    position: absolute;
    width: 220px;
    height: 110px;
    border: 6px solid white;
    left: 0px;
    right: 0px;
    margin: auto;
    bottom: 0px;
    border-bottom: unset;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
}

.football-ground-yelloline-left {
    position: absolute;
    background-color: #c8e357;
    width: 6px;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 320px;
}

.football-ground-yelloline-right {
    position: absolute;
    background-color: #c8e357;
    width: 6px;
    height: 100%;
    top: 0px;
    bottom: 0px;
    right: 320px;
}

.football-top-side-title-box {
    width: fit-content;
    margin: auto;
    display: flex;
}

.football-top-text-crd {
    background: #b6b6b8;
    border: 3px solid black;
    border-bottom: unset;
    padding: 6px 10px;
    width: 180px;
    text-align: center;
    font-size: 14px;
    color: black;
}

.football-top-side-title-box .football-top-text-crd:nth-child(2) {
    border-left: unset;
}

.football-top-side-title-box.bottom .football-top-text-crd {
    background: #b6b6b8;
    border: 3px solid black;
    border-bottom: 3px solid black;
    padding: 6px 10px;
    width: 220px;
    text-align: center;
    font-size: 14px;
    color: black;
    border-top: unset;
}

.football-inside-green-ground-text {
    position: absolute;
    width: 160px;
    height: 160px;
    top: 0px;
    bottom: 0px;
    left: 125px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .football-inside-green-ground-text h2 {
        color: white;
        font-family: 'Inter 18pt Bold';
        font-size: 90px;
        text-align: center;
        line-height: 90px;
    }

    .football-inside-green-ground-text p {
        text-align: center;
        font-size: 16px;
        color: white;
    }

    .football-inside-green-ground-text.left {
        position: absolute;
        width: 160px;
        height: 160px;
        top: 0px;
        bottom: 0px;
        left: 107px;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: unset;
    }

    .football-inside-green-ground-text.center {
        position: absolute;
        width: 160px;
        height: 160px;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .football-inside-green-ground-text.right {
        position: absolute;
        width: 160px;
        height: 160px;
        top: 0px;
        bottom: 0px;
        left: unset;
        right: 107px;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: unset;
    }

.football-inside-green-ground .game-clips-dpdn {
    position: absolute;
    top: 20px;
    right: 75px;
    width: 230px;
}

    .football-inside-green-ground .game-clips-dpdn .game-clips-dpdn-header {
        padding: 6px 12px;
        font-size: 14px;
    }

/* ==== my player profile page data table end ====  */

/* ==== Team Trands page start ==== */

.team-trand-chart-box-main-container {
    width: 100%;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

    .team-trand-chart-box-main-container .chart-top-legend {
        display: flex;
        gap: 24px;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .team-trand-chart-box-main-container .top-legend-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #BAC7D5;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition: opacity 0.2s ease, transform 0.1s ease;
    }

        .team-trand-chart-box-main-container .top-legend-item:hover {
            opacity: 0.85;
        }

        .team-trand-chart-box-main-container .top-legend-item:active {
            transform: scale(0.97);
        }

        .team-trand-chart-box-main-container .top-legend-item.hidden-series {
            opacity: 0.35;
        }

    .team-trand-chart-box-main-container .legend-color-box {
        width: 32px;
        height: 12px;
        margin-right: 8px;
        display: inline-block;
        border-radius: 2px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

        .team-trand-chart-box-main-container .legend-color-box.possessions-box {
            background-color: #9CD84E;
        }

    .team-trand-chart-box-main-container .top-legend-item.hidden-series .legend-color-box.possessions-box {
        background-color: #4B5A84;
    }

    .team-trand-chart-box-main-container .legend-color-box.average-box {
        background-color: rgba(209, 213, 219, 0.25);
        border: 2px solid #8B008B;
        box-sizing: border-box;
    }

    .team-trand-chart-box-main-container .top-legend-item.hidden-series .legend-color-box.average-box {
        border-color: #4B5A84;
        background-color: rgba(75, 90, 132, 0.25);
    }

    .team-trand-chart-box-main-container .chart-wrapper {
        position: relative;
        width: 100%;
        height: 380px;
    }

    .team-trand-chart-box-main-container .chart-legend-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 25px;
        padding-top: 15px;
        border-top: 1px solid #fff6;
        gap: 8px;
    }

    .team-trand-chart-box-main-container .legend-title {
        font-size: 12px;
        color: #8A99AD;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }

    .team-trand-chart-box-main-container .legend-items {
        display: flex;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }

    .team-trand-chart-box-main-container .legend-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #BAC7D5;
        font-weight: 500;
        text-transform: capitalize;
    }

    .team-trand-chart-box-main-container .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
        display: inline-block;
    }

        .team-trand-chart-box-main-container .legend-dot.win {
            background-color: #9CD84E;
        }

        .team-trand-chart-box-main-container .legend-dot.draw {
            background-color: #005DBF;
        }

        .team-trand-chart-box-main-container .legend-dot.loss {
            background-color: #0B1120;
            border: 1.5px solid #4B5A84;
        }

.team-trands-drop-down-and-lable {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

    .team-trands-drop-down-and-lable h5 {
        color: white;
        font-size: 18px;
        font-family: 'Inter 18pt Bold';
    }

.game-summery-and-avrg-box-main {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.average-box-btn-box {
    width: fit-content;
    border-radius: 10px;
    padding: 8px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #001122;
    border: 1px solid #002D5B;
    min-width: 110px;
    cursor: pointer;
}

    .average-box-btn-box h3 {
        font-size: 20px;
        color: white;
        font-family: 'Inter 18pt Bold';
    }

    .average-box-btn-box span {
        font-size: 12px;
        color: #8A99AD;
        font-family: 'Inter 18pt Regular';
    }

/* ==== Team Trands page end ==== */

/* ==== coach corner page start ==== */

.coach-corner-tbotbl-box {
    width: 100%;
    margin: auto;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
}

.action-goalkeeper-individual-btn {
    width: fit-content;
    margin: auto;
}

    .action-goalkeeper-individual-btn .chart-btn-open {
        font-size: 14px;
        padding: 8px 16px;
    }

    .action-goalkeeper-individual-btn .goalkeeper-btn-isci {
        font-size: 14px;
        padding: 8px 16px;
        font-family: 'Inter 18pt Regular';
        border-radius: 8px;
        color: white;
        background-color: #131D37;
        border: 1px solid #002D5B;
        box-shadow: 0px 0px 2px 1px transparent;
    }

.touchlynk-ai-assistant-box-main {
    width: 100%;
    margin: auto;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.touchlynk-ai-formating-box-mn {
    width: 100%;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.assistant-text-icn-box {
    width: fit-content;
}

    .assistant-text-icn-box h4 {
        font-size: 22px;
        color: white;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 6px;
        font-family: 'Inter 18pt Medium';
    }

        .assistant-text-icn-box h4 i {
            color: #005DBF;
        }

    .assistant-text-icn-box p {
        font-size: 14px;
        color: white;
    }

.launch-assistant-btn-mn {
    width: fit-content;
}

    .launch-assistant-btn-mn a {
        font-size: 16px;
        padding: 10px 18px;
        font-family: 'Inter 18pt Regular';
        border-radius: 8px;
        color: white;
        background-color: #005DBF;
        border: 1px solid #005DBF;
        box-shadow: 0px 0px 2px 1px transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

.formation-analyzer-dpdn-box-main {
    width: fit-content;
    display: flex;
    gap: 18px;
    margin-top: 18px;
}

    .formation-analyzer-dpdn-box-main .input-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .formation-analyzer-dpdn-box-main label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #b2bcca;
        display: flex;
        align-items: center;
        gap: 6px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: color 0.2s;
    }

    .formation-analyzer-dpdn-box-main select {
        width: 220px;
        background: #0B1120;
        border: 1px solid #ffffff42 !important;
        border-radius: 0.8rem !important;
        background-image: url(../images/down-arrow.png);
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 16px 16px;
        padding: 0.75rem 1rem;
        color: #f1f5f9;
        box-shadow: unset !important;
        font-size: 0.95rem;
        outline: none !important;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

.launch-assistant-btn-mn button.chart-btn-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.coach-corner-crd-box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    width: 100%;
}

.coach-corner-crd-box-player-card {
    background: #131D37;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 28px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.3);
}

    .coach-corner-crd-box-player-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

.coach-corner-crd-box-image-wrapper {
    width: 85px;
    height: 85px;
    border-radius: 22px;
    background: #0B1120;
    border: 2px solid rgba(255, 255, 255, 0.05);
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coach-corner-crd-box-player-img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.coach-corner-crd-box-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.coach-corner-crd-box-player-name {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.coach-corner-crd-box-stats-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coach-corner-crd-box-stat-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coach-corner-crd-box-label {
    font-size: 12px;
    color: rgb(255 255 255 / 42%);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Inter 18pt Medium';
}

.coach-corner-crd-box-value {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
}

    .coach-corner-crd-box-value.coach-corner-crd-box-highlight {
        color: #38BDF8;
        background: rgba(56, 189, 248, 0.1);
        padding: 2px 8px;
        border-radius: 8px;
        border: 1px solid rgba(56, 189, 248, 0.1);
    }

@media (max-width: 400px) {
    .coach-corner-crd-box-grid {
        grid-template-columns: 1fr;
    }
}

.coach-corner-crd-box-head {
    width: 100%;
    margin-bottom: 24px;
}

    .coach-corner-crd-box-head h2 {
        color: white;
        font-size: 22px;
        font-family: 'Inter 18pt Medium';
    }

.touchlynk-tacbot-analyzing-formations-loader-box {
    width: 100%;
    margin-bottom: 18px;
}

.tactical-analysis-ldr-box {
    --blue-gradient: linear-gradient(90deg, #1e40af, #3b82f6);
    --green-gradient: linear-gradient(90deg, #059669, #10b981);
    --stripes-pattern: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
    background-color: #0b1329;
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 750px;
    margin: 0px auto;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .tactical-analysis-ldr-box * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .tactical-analysis-ldr-box .tacbot-loader-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tactical-analysis-ldr-box .loader-header {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #10b981;
        font-size: 1.05rem;
        font-weight: 700;
        text-align: center;
        min-height: 24px;
    }

    .tactical-analysis-ldr-box .progress-bar-track {
        width: 100%;
        height: 44px;
        border-radius: 22px;
        position: relative;
        overflow: hidden;
        background-color: #050a14;
        box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6);
    }

    .tactical-analysis-ldr-box .progress-bar-fill {
        height: 100%;
        width: 0%;
        border-radius: 22px;
        position: relative;
        background-image: var(--stripes-pattern), var(--blue-gradient);
        background-size: 40px 40px, 100% 100%;
        animation: slide-stripes 1.2s linear infinite;
        transition: width 0.1s linear, background-image 0.4s ease;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

        .tactical-analysis-ldr-box .progress-bar-fill.complete {
            background-image: var(--stripes-pattern), var(--green-gradient) !important;
        }

@keyframes slide-stripes {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 40px 0, 0 0;
    }
}

.tactical-analysis-ldr-box .progress-percentage {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease, right 0.3s ease, left 0.3s ease;
}

.tactical-analysis-ldr-box .progress-bar-fill.has-progress .progress-percentage {
    opacity: 1;
}

.tactical-analysis-ldr-box .progress-bar-fill.complete .progress-percentage {
    right: 50%;
    transform: translate(50%, -50%);
}

.tactical-analysis-ldr-box .loader-footer {
    text-align: center;
    color: #8fa0bc;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    min-height: 20px;
}

.tactical-overview-card-box-mn-cntnr {
    color: #F3F4F6;
    line-height: 1.6;
    width: 100%;
    margin: 0 auto;
}

    .tactical-overview-card-box-mn-cntnr .tactical-overview-wrapper {
        margin-bottom: 1.5rem;
    }

    .tactical-overview-card-box-mn-cntnr .cards-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

@media (min-width: 768px) {
    .tactical-overview-card-box-mn-cntnr .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tactical-overview-card-box-mn-cntnr .card {
    background: #0b1329;
    border: 1px solid rgba(49, 65, 88, 0.4);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

    .tactical-overview-card-box-mn-cntnr .card:hover {
        border-color: rgba(49, 65, 88, 0.8);
        transform: translateY(-2px);
    }

.tactical-overview-card-box-mn-cntnr .card-header {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tactical-overview-card-box-mn-cntnr .card-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tactical-overview-card-box-mn-cntnr .card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    font-size: 1rem;
}

.tactical-overview-card-box-mn-cntnr .card-body {
    padding: 1.5rem;
    flex-grow: 1;
    font-size: 0.9rem;
    color: #D1D5DB;
}

    .tactical-overview-card-box-mn-cntnr .card-body p {
        line-height: 1.625;
    }

.tactical-overview-card-box-mn-cntnr .bullet-list {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    .tactical-overview-card-box-mn-cntnr .bullet-list li {
        position: relative;
        padding-left: 1.25rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        line-height: 1.5;
    }

        .tactical-overview-card-box-mn-cntnr .bullet-list li:last-child {
            margin-bottom: 0;
        }

        .tactical-overview-card-box-mn-cntnr .bullet-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.45rem;
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

.tactical-overview-card-box-mn-cntnr .overview-header {
    background: linear-gradient(135deg, #1E3A8A 0%, #314158 100%);
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
}

.tactical-overview-card-box-mn-cntnr .overview-icon {
    background-color: rgba(37, 99, 235, 0.2);
    color: #60A5FA;
}

.tactical-overview-card-box-mn-cntnr .advantages-header {
    background: linear-gradient(135deg, #064E3B 0%, #314158 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.tactical-overview-card-box-mn-cntnr .advantages-icon {
    background-color: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

.tactical-overview-card-box-mn-cntnr .advantages-list li::before {
    background-color: #34D399;
}

.tactical-overview-card-box-mn-cntnr .weaknesses-header {
    background: linear-gradient(135deg, #7F1D1D 0%, #314158 100%);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
}

.tactical-overview-card-box-mn-cntnr .weaknesses-icon {
    background-color: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.tactical-overview-card-box-mn-cntnr .weaknesses-list li::before {
    background-color: #F87171;
}

.tactical-overview-card-box-mn-cntnr .adjustments-header {
    background: linear-gradient(135deg, #1E40AF 0%, #314158 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

.tactical-overview-card-box-mn-cntnr .adjustments-icon {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

.tactical-overview-card-box-mn-cntnr .adjustments-list li::before {
    background-color: #60A5FA;
}

.tactical-overview-card-box-mn-cntnr .profiles-header {
    background: linear-gradient(135deg, #115E59 0%, #314158 100%);
    border-bottom: 1px solid rgba(20, 184, 166, 0.3);
}

.tactical-overview-card-box-mn-cntnr .profiles-icon {
    background-color: rgba(20, 184, 166, 0.2);
    color: #2DD4BF;
}

.tactical-overview-card-box-mn-cntnr .profiles-list li::before {
    background-color: #2DD4BF;
}

.tactical-overview-card-box-mn-cntnr .formation-header {
    background: linear-gradient(135deg, #581C87 0%, #314158 100%);
    border-bottom: 1px solid rgba(168, 85, 247, 0.3);
}

.tactical-overview-card-box-mn-cntnr .formation-icon {
    background-color: rgba(168, 85, 247, 0.2);
    color: #C084FC;
}

.tactical-overview-card-box-mn-cntnr .badge-purple {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: rgba(168, 85, 247, 0.2);
    color: #E9D5FF;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 0.25rem;
    border: 1px solid rgba(168, 85, 247, 0.3);
    margin-bottom: 0.75rem;
    letter-spacing: 0.1em;
}

.tactical-overview-card-box-mn-cntnr .coaching-header {
    background: linear-gradient(135deg, #78350F 0%, #314158 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.tactical-overview-card-box-mn-cntnr .coaching-icon {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.tactical-overview-card-box-mn-cntnr .card-header-left h2 {
    font-size: 20px;
    font-family: 'Inter 18pt Medium';
}


.tactical-overview-card-box-mn-cntnr .row:nth-child(1) .card-header {
    background: linear-gradient(135deg, #1E3A8A 0%, #314158 100%) !important;
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
    justify-content: unset;
}


/*box two */

.tactical-overview-card-box-mn-cntnr .row:nth-child(2) .col-md-6:nth-child(1) .card-header {
    background: linear-gradient(135deg, #064E3B 0%, #314158 100%) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.3);
    justify-content: unset;
}

.tactical-overview-card-box-mn-cntnr .row:nth-child(2) .col-md-6:nth-child(2) .card-header {
    background: linear-gradient(135deg, #7F1D1D 0%, #314158 100%) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
    justify-content: unset;
}

/*box three */

.tactical-overview-card-box-mn-cntnr .row:nth-child(3) .col-md-6:nth-child(1) .card-header {
    background: linear-gradient(135deg, #1E40AF 0%, #314158 100%) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    justify-content: unset;
}

.tactical-overview-card-box-mn-cntnr .row:nth-child(3) .col-md-6:nth-child(2) .card-header {
    background: linear-gradient(135deg, #115E59 0%, #314158 100%) !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.3);
    justify-content: unset;
}

/*box four */

.tactical-overview-card-box-mn-cntnr .row:nth-child(4) .col-md-6:nth-child(1) .card-header {
    background: linear-gradient(135deg, #581C87 0%, #314158 100%) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.3);
    justify-content: unset;
}

.tactical-overview-card-box-mn-cntnr .row:nth-child(4) .col-md-6:nth-child(2) .card-header {
    background: linear-gradient(135deg, #78350F 0%, #314158 100%) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
    justify-content: unset;
}

/* ==== coach corner page end ==== */

/* ==== hover text show btn start ====  */

.dsbrd-sec .table-body-scroll {
    max-height: 350px;
}

.vdo-btn-botoon-mn-box-sec {
    background-color: transparent;
    width: 100%;
    max-width: fit-content;
    display: block;
    margin-bottom: 18px;
}

    .vdo-btn-botoon-mn-box-sec .button-group {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .vdo-btn-botoon-mn-box-sec .btn-custom {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        min-width: 48px;
        max-width: 48px;
        height: 48px;
        background-color: #005DBF;
        color: #ffffff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: max-width 0.7s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease-in-out;
        text-decoration: none;
        user-select: none;
        flex-shrink: 0;
        padding: 0;
    }

        .vdo-btn-botoon-mn-box-sec .btn-custom .btn-icon {
            width: 48px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 16px;
            transition: transform 0.3s ease;
            z-index: 2;
        }

        .vdo-btn-botoon-mn-box-sec .btn-custom .btn-text {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(-15px);
            transition: opacity 0.45s ease, transform 0.45s ease;
            padding-right: 18px;
        }

        .vdo-btn-botoon-mn-box-sec .btn-custom.active {
            max-width: 220px;
        }

            .vdo-btn-botoon-mn-box-sec .btn-custom.active .btn-text {
                opacity: 1;
                transform: translateX(0);
            }

    .vdo-btn-botoon-mn-box-sec .button-group:hover .btn-custom.active {
        max-width: 48px;
    }

        .vdo-btn-botoon-mn-box-sec .button-group:hover .btn-custom.active .btn-text {
            opacity: 0;
            transform: translateX(-15px);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .vdo-btn-botoon-mn-box-sec .button-group:hover .btn-custom.active:hover {
            max-width: 220px;
        }

            .vdo-btn-botoon-mn-box-sec .button-group:hover .btn-custom.active:hover .btn-text {
                opacity: 1;
                transform: translateX(0);
                transition: opacity 0.45s ease 0.15s, transform 0.45s ease 0.15s;
            }

    .vdo-btn-botoon-mn-box-sec .btn-custom:hover {
        max-width: 220px;
        background-color: #004da1;
    }

        .vdo-btn-botoon-mn-box-sec .btn-custom:hover .btn-text {
            opacity: 1;
            transform: translateX(0);
            transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s;
        }

        .vdo-btn-botoon-mn-box-sec .btn-custom:hover .btn-icon {
            transform: scale(1.1);
        }

    .vdo-btn-botoon-mn-box-sec .beta-ribbon {
        position: absolute;
        top: 5px;
        left: -15px;
        background-color: #ef4444;
        color: #ffffff;
        font-size: 6.5px;
        font-weight: 700;
        padding: 1px 14px;
        transform: rotate(-45deg);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        z-index: 10;
        pointer-events: none;
        text-align: center;
        line-height: 1;
    }

@media (max-width: 480px) {
    .vdo-btn-botoon-mn-box-sec .button-group {
        justify-content: center;
        gap: 8px;
    }
}

/* ==== hover text show btn end ====  */

/* ==== multy select dropdown start ==== */

.mlty-slct-box-bt-lbry {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

    .mlty-slct-box-bt-lbry .select-input-container {
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 6px 35px 6px 10px;
        min-height: 42px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background-color: #0B1120;
        position: relative;
        cursor: pointer;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        box-sizing: border-box;
    }

        /* Focused border color state */
        .mlty-slct-box-bt-lbry .select-input-container.focused {
            border-color: #005DBF;
            box-shadow: 0 0 0 0.25rem rgba(0, 93, 191, 0.25);
        }

    .mlty-slct-box-bt-lbry .tag-item {
        display: inline-flex;
        align-items: center;
        flex-direction: row-reverse;
        gap: 8px;
        background-color: #131D37;
        border: 1px solid #ffffff42;
        border-radius: 4px;
        padding: 4px 8px;
        margin: 3px 6px 3px 0;
        font-size: 14px;
        color: white;
        user-select: none;
    }

    .mlty-slct-box-bt-lbry .tag-close-btn {
        border: 1px solid #EB5757;
        background-color: #EB5757;
        color: white;
        padding: 0;
        font-size: 12px;
        cursor: pointer;
        border-radius: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 18px;
        width: 18px;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .mlty-slct-box-bt-lbry .tag-close-btn:hover {
            background-color: #e0e0e0;
            color: #000000;
            border-color: #888888;
        }

    .mlty-slct-box-bt-lbry .search-input {
        border: none;
        outline: none;
        flex-grow: 1;
        min-width: 80px;
        height: 28px;
        font-size: 14px;
        padding: 0;
        background: transparent;
        color: white; /* Ensures blinker and typed text are visible on dark background */
    }

        .mlty-slct-box-bt-lbry .search-input::placeholder {
            color: rgba(255, 255, 255, 0.6); /* Slightly transparent white placeholder */
        }

    .mlty-slct-box-bt-lbry .dropdown-arrow-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #777777;
        pointer-events: none;
        font-size: 12px;
        transition: transform 0.2s ease;
    }

    .mlty-slct-box-bt-lbry .select-input-container.focused .dropdown-arrow-icon {
        transform: translateY(-50%) rotate(180deg);
    }

    .mlty-slct-box-bt-lbry .options-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 4px;
        margin-top: 4px;
        max-height: 200px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #005dbf #ffffff00;
        z-index: 1000;
        display: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

        .mlty-slct-box-bt-lbry .options-dropdown.show {
            display: block;
        }

    .mlty-slct-box-bt-lbry .option-list-item {
        padding: 8px 12px;
        font-size: 14px;
        color: white;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.15s ease;
    }

        .mlty-slct-box-bt-lbry .option-list-item:hover {
            background-color: #005dbf6b;
            color: white;
        }

        .mlty-slct-box-bt-lbry .option-list-item.selected {
            background-color: #005DBF;
            color: white;
        }

    .mlty-slct-box-bt-lbry .checkmark {
        font-size: 12px;
        color: white;
    }

    .mlty-slct-box-bt-lbry .box-wrapper {
        margin-bottom: 25px;
    }

@media (max-width: 576px) {
    .mlty-slct-box-bt-lbry {
        padding: 0px;
    }

        .mlty-slct-box-bt-lbry .tag-item {
            font-size: 12.5px;
            padding: 2px 4px;
            margin: 2px 4px 2px 0;
        }
}

/* ==== multy select dropdown end ==== */

/* ==== Player dashboard chart start ==== */

.player-dashboard-chart-mn-container-box {
    width: 100%;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    margin-top: 18px;
}

    .player-dashboard-chart-mn-container-box .chart-header-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 25px;
    }

    .player-dashboard-chart-mn-container-box .left-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .player-dashboard-chart-mn-container-box .metric-label {
        color: white;
        font-size: 18px;
        font-family: 'Inter 18pt Bold';
    }

    .player-dashboard-chart-mn-container-box .dropdown-wrapper {
        position: relative;
    }

    .player-dashboard-chart-mn-container-box select {
        background-color: #E0E0E0;
        border: 1px solid #CBCBCB;
        color: #1f2937;
        border: 1px solid #334155;
        border-radius: 6px;
        padding: 8px 36px 8px 16px;
        box-shadow: unset !important;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        transition: border-color 0.2s, background-color 0.2s;
        min-width: 180px;
    }

    .player-dashboard-chart-mn-container-box .chart-legends {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
    }

    .player-dashboard-chart-mn-container-box .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .player-dashboard-chart-mn-container-box .legend-item span {
            color: white;
        }

    .player-dashboard-chart-mn-container-box .legend-color-box {
        width: 30px;
        height: 10px;
        border-radius: 3px;
    }

    .player-dashboard-chart-mn-container-box .legend-bar-color {
        background-color: #005DBF;
    }

    .player-dashboard-chart-mn-container-box .chart-wrapper-div {
        position: relative;
        width: 100%;
        height: 400px;
    }

/* ==== Player dashboard chart end ==== */

/* ==== scheduled Game page start ==== */

#ScheduledGameTable_wrapper .dataTables_length,
#ScheduledGameTable_wrapper .dataTables_filter {
    margin-bottom: 18px;
}

#ScheduledGameTable thead {
    background-color: #314158;
}

#ScheduledGameTable tbody td {
    color: white;
    padding: 12px 10px;
    font-size: 14px;
    border-bottom: 1px solid #1a2533;
    font-family: 'Inter 18pt Regular';
}

#ScheduledGameTable_wrapper .dataTables_length select {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-right: 8px;
}

#ScheduledGameTable_wrapper .dataTables_length label,
#ScheduledGameTable_filter label {
    color: white;
}

#ScheduledGameTable_filter input {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
    margin-left: 8px;
}

#ScheduledGameTable thead th {
    color: white;
    padding: 15px 30px 15px 10px;
    font-size: 14px;
    font-family: 'Inter 18pt Bold';
    border-bottom: 1px solid #1a2533;
    white-space: nowrap;
}

#ScheduledGameTableTable {
    width: 100% !important;
}

#ScheduledGameTable_wrapper {
    width: 100%;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    padding: 16px;
    border-radius: 16px;
}

#ScheduledGameTable.dataTable {
    width: 100% !important;
}

.delete-button-sbmt-tbl {
    width: fit-content;
    height: fit-content;
}

.btn-custom.delete-btn {
    color: white;
    background-color: #EB5757;
}

    .btn-custom.delete-btn:hover {
        color: white;
        background-color: #EB5757;
    }

#ScheduledGameTable .player-name-and-team-logo h6 {
    white-space: nowrap;
}

.advance-search-button-main {
    width: fit-content;
}

.scheduled-game-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.advance-search-popup-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    display: none;
}

#ScheduledAdvanceSearchPopupMain.active,
#CompleteMatchAdvanceSearchPopupMain.active {
    display: block;
}

.opponent-team-selecting {
    width: 100%;
}

    .opponent-team-selecting label {
        width: 100%;
        color: white;
        font-size: 14px;
        margin-bottom: 6px;
    }

.from-date-to-date-itp-box {
    width: 100%;
    display: flex;
    gap: 18px;
}

.input-select-for-date-pkr-mn {
    width: 100%;
}

    .input-select-for-date-pkr-mn label {
        color: white;
        font-size: 14px;
        margin-bottom: 6px;
        width: 100%;
    }

    .input-select-for-date-pkr-mn input {
        width: 100%;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
    }

.reset-buton-in-popup {
    font-size: 16px;
    padding: 8px 18px;
    font-family: 'Inter 18pt Regular';
    border-radius: 8px;
    color: white;
    background-color: #22ab42;
    border: 1px solid #22ab42;
    transition: 0.3s;
}

    .reset-buton-in-popup:hover {
        background-color: transparent;
        color: #22ab42;
    }

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    content: "\f055" !important;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #005DBF;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    content: "\f056" !important;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* ==== scheduled Game page end ==== */


/* ==== scheduled Game Popup start ==== */

.scheduled-game-step-one-box {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;
}

    .scheduled-game-step-one-box .single-wizard-itp-box input::placeholder,
    .scheduled-game-step-one-box .single-wizard-itp-box textarea::placeholder {
        color: #ffffff9c;
    }

    .scheduled-game-step-one-box .single-wizard-itp-box input,
    .scheduled-game-step-one-box .single-wizard-itp-box textarea {
        color: #ffffff9c;
    }

.select-new-team-row-add-check-box label {
    color: white;
    font-family: 'Inter 18pt Medium';
    font-size: 16px;
}

.schduled-game-step-one-container .select-new-team-row-add-check-box {
    justify-content: unset;
}

.schduled-game-step-one-container .step-one-check-box-one {
    width: fit-content;
}

.scheduled-table-step-fiva-main-container .possession-summary-card-main .possession-summary-heading-box {
    padding: 16px 24px;
}

.scheduled-wizard-popup-main-cntntre {
    max-width: max-content;
    min-width: 650px;
}

.scheduled-table-step-fiva-main-container table .table-wzard-itp {
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
}

.scheduled-table-step-fiva-main-container .table-responsive {
    height: 320px;
}

.add-player-wizard-btn {
    width: fit-content;
    margin: auto;
}

.scheduled-goal-selection-main-container {
    width: 90%;
    max-width: 1020px;
}

.scheduled-goal-section-title-head {
    width: 100%;
}

    .scheduled-goal-section-title-head h2 {
        color: #ffffff;
        font-size: 28px;
        font-family: 'Inter 18pt SemiBolt';
        margin-top: 0;
        margin-bottom: 35px;
    }





.scheduled-goal-selection-main-container {
    width: 100%;
    min-width: 1020px;
    margin: 0 auto;
    background-color: #131D37;
    box-sizing: border-box;
    text-align: center;
    border-radius: 16px;
    user-select: none;
}

    .scheduled-goal-selection-main-container .selection-title {
        color: #ffffff;
        font-size: 28px;
        font-weight: 600;
        margin-top: 0;
        margin-bottom: 35px;
    }

    .scheduled-goal-selection-main-container .selection-grid {
        display: flex;
        gap: 25px;
        justify-content: center;
        margin-bottom: 25px;
    }

    .scheduled-goal-selection-main-container .goal-card {
        flex: 1;
        background-color: #1c284a;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 25px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .scheduled-goal-selection-main-container .goal-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 93, 191, 0.5);
        }

        .scheduled-goal-selection-main-container .goal-card.active {
            background-color: #001122;
            border-color: #005DBF;
            box-shadow: 0 0 20px rgba(0, 93, 191, 0.3);
        }

    .scheduled-goal-selection-main-container .pitch-visual {
        width: 100%;
        aspect-ratio: 4 / 3;
        background-color: rgba(255, 255, 255, 0.02);
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

    .scheduled-goal-selection-main-container .goal-card.active .pitch-visual {
        border-color: rgba(0, 93, 191, 0.6);
        background-color: rgba(0, 93, 191, 0.05);
    }

    .scheduled-goal-selection-main-container .pitch-left .penalty-box {
        position: absolute;
        left: -2px;
        top: 20%;
        width: 25%;
        height: 60%;
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-left: none;
    }

    .scheduled-goal-selection-main-container .pitch-left .goal-box {
        position: absolute;
        left: -2px;
        top: 35%;
        width: 10%;
        height: 30%;
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-left: none;
    }

    .scheduled-goal-selection-main-container .pitch-left .penalty-arc {
        position: absolute;
        left: 17%;
        top: 38%;
        width: 16%;
        aspect-ratio: 1;
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
    }

    .scheduled-goal-selection-main-container .pitch-right .penalty-box {
        position: absolute;
        right: -2px;
        top: 20%;
        width: 25%;
        height: 60%;
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-right: none;
    }

    .scheduled-goal-selection-main-container .pitch-right .goal-box {
        position: absolute;
        right: -2px;
        top: 35%;
        width: 10%;
        height: 30%;
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-right: none;
    }

    .scheduled-goal-selection-main-container .pitch-right .penalty-arc {
        position: absolute;
        right: 17%;
        top: 38%;
        width: 16%;
        aspect-ratio: 1;
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
    }

    .scheduled-goal-selection-main-container .goal-card.active .penalty-box,
    .scheduled-goal-selection-main-container .goal-card.active .goal-box,
    .scheduled-goal-selection-main-container .goal-card.active .penalty-arc {
        border-color: rgba(0, 93, 191, 0.7);
    }

    .scheduled-goal-selection-main-container .card-label {
        font-size: 22px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        transition: color 0.3s ease;
    }

    .scheduled-goal-selection-main-container .goal-card.active .card-label {
        color: #005DBF;
    }

    .scheduled-goal-selection-main-container .footer-camera-text {
        color: rgba(255, 255, 255, 0.4);
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 15px;
    }

@media (max-width: 600px) {
    .scheduled-goal-selection-main-container .selection-grid {
        flex-direction: column;
        gap: 15px;
    }

    .scheduled-goal-selection-main-container {
        padding: 25px 15px;
    }

        .scheduled-goal-selection-main-container .selection-title {
            font-size: 20px;
            margin-bottom: 20px;
        }

        .scheduled-goal-selection-main-container .card-label {
            font-size: 18px;
        }
}

.hm-team-adn-opponent-team-step-main {
    width: 100%;
}

.home-team-and-opponent-team {
    width: 100%;
    min-width: 1200px;
    margin: auto;
    padding: 0px;
    box-sizing: border-box;
    height: calc(100vh - 300px);
    overflow: auto;
    scrollbar-width: thin;
    padding-right: 10px;
    scrollbar-color: #005DBF #131D37;
}

    .home-team-and-opponent-team .formation-group {
        margin-bottom: 80px;
    }

    .home-team-and-opponent-team .group-title {
        color: #ffffff;
        text-align: center;
        font-size: 28px;
        margin-bottom: 40px;
        font-weight: 700;
        text-transform: capitalize;
        letter-spacing: 0.5px;
    }

    /* 4 cards per line as requested */
    .home-team-and-opponent-team .formation-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
        flex-wrap: wrap;
    }

    .home-team-and-opponent-team .formation-card {
        background-color: #1c284a;
        border: 2px solid rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 250px;
    }

        .home-team-and-opponent-team .formation-card:hover {
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        /* Active State - Theme Colors #001122 and #005DBF */
        .home-team-and-opponent-team .formation-card.active {
            background-color: #001122;
            border-color: #005DBF;
            box-shadow: 0 0 20px rgba(0, 93, 191, 0.4);
        }

    .home-team-and-opponent-team .pitch-preview {
        flex: 1;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        /* Vertical Center */
        justify-content: flex-start;
        background-color: transparent;
        min-height: 180px;
    }

    /* Container for the group of dots you marked in blue */
    .home-team-and-opponent-team .field-players-container {
        display: flex;
        flex: 1;
        justify-content: space-evenly;
        /* Equal spacing left/right between columns */
        align-items: center;
        /* Vertical alignment */
        height: 100%;
        margin-left: 15%;
        /* Giving space for the goalie area */
        margin-right: 10%;
        /* Giving space for the center circle */
        z-index: 2;
    }

    /* Ground lines (Penalty area, Goal box) */
    .home-team-and-opponent-team .penalty-box,
    .home-team-and-opponent-team .goal-box {
        border: 1.5px solid rgba(255, 255, 255, 0.1);
        position: absolute;
        left: 0;
    }

    .home-team-and-opponent-team .penalty-box {
        top: 20%;
        height: 60%;
        width: 22%;
        border-left: none;
    }

    .home-team-and-opponent-team .goal-box {
        top: 35%;
        height: 30%;
        width: 10%;
        border-left: none;
    }

    /* Center half-circle properly centered vertically */
    .home-team-and-opponent-team .center-half {
        border: 1.5px solid rgba(255, 255, 255, 0.1);
        position: absolute;
        right: -25px;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    /* Active state for lines */
    .home-team-and-opponent-team .formation-card.active .penalty-box,
    .home-team-and-opponent-team .formation-card.active .goal-box,
    .home-team-and-opponent-team .formation-card.active .center-half {
        border-color: rgba(0, 93, 191, 0.4);
    }

    .home-team-and-opponent-team .player-dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        margin: 6px 0;
        transition: background-color 0.3s;
    }

    .home-team-and-opponent-team .formation-card.active .player-dot {
        background-color: #ffffff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    }

    /* Goalkeeper dot - Yellow as requested */
    .home-team-and-opponent-team .goalie-dot {
        background-color: #ECC94B !important;
        width: 12px;
        height: 12px;
        z-index: 5;
        box-shadow: 0 0 10px rgba(236, 201, 75, 0.4) !important;
    }

    .home-team-and-opponent-team .formation-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .home-team-and-opponent-team .goalie-col {
        position: absolute;
        left: 4%;
        height: 100%;
        z-index: 3;
    }

    .home-team-and-opponent-team .formation-name {
        padding: 15px 5px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.03);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .home-team-and-opponent-team .formation-card.active .formation-name {
        color: #005DBF;
        background-color: rgba(0, 93, 191, 0.05);
        border-top-color: rgba(0, 93, 191, 0.3);
    }

.mode-selection-button {
    width: fit-content;
    margin: auto;
    margin-bottom: 28px;
}

.scheduled-game-drag-step-box-main {
    width: 100%;
}








    .scheduled-game-drag-step-box-main .player-drag-reorder-section {
        width: 100%;
        max-width: 1150px;
        margin: auto;
        background-color: #131D37;
        padding: 0px;
        box-sizing: border-box;
        position: relative;
        color: #ffffff;
        user-select: none;
    }

    .scheduled-game-drag-step-box-main .divider {
        height: 1.5px;
        background-color: rgba(255, 255, 255, 0.15);
        margin: 20px 0;
    }

    .scheduled-game-drag-step-box-main .available-players-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0px;
        justify-content: center;
        min-height: 50px;
    }

    .scheduled-game-drag-step-box-main .player-source-pill {
        display: flex;
        align-items: center;
        background-color: #e2e8f0;
        color: #4a5568;
        padding: 6px 15px 6px 6px;
        border-radius: 20px;
        cursor: grab;
        transition: all 0.2s;
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
    }

        .scheduled-game-drag-step-box-main .player-source-pill.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
            filter: grayscale(1);
        }

        .scheduled-game-drag-step-box-main .player-source-pill:active {
            cursor: grabbing;
        }

        .scheduled-game-drag-step-box-main .player-source-pill .jersey-num {
            width: 28px;
            height: 28px;
            background-color: #2d3748;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-size: 11px;
        }

    .scheduled-game-drag-step-box-main .pitch-area {
        width: 100%;
        height: 480px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0;
        background-color: rgba(255, 255, 255, 0.02);
        border-radius: 8px;
        border: 1.5px solid #ffffff80;
        overflow: hidden;
    }

    .scheduled-game-drag-step-box-main .goal-marking {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 85px;
        height: 200px;
        border: 2px solid #ffffff80;
        border-left: none;
        z-index: 1;
    }

    .scheduled-game-drag-step-box-main .penalty-arc {
        width: 42px;
        height: 90px;
        border: 2px solid #ffffff80;
        border-radius: 0px 75px 75px 0px;
        border-left: unset;
        position: absolute;
        left: 85px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 0;
    }

    .scheduled-game-drag-step-box-main .center-half-circle {
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        width: 75px;
        height: 150px;
        border: 2px solid #ffffff80;
        border-radius: 75px 0 0 75px;
        border-right: none;
        z-index: 1;
    }

    .scheduled-game-drag-step-box-main .formation-columns {
        display: flex;
        width: 90%;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0 20px;
        z-index: 2;
    }

    .scheduled-game-drag-step-box-main .col {
        display: flex;
        flex-direction: column;
        gap: 25px;
        align-items: center;
        flex: 1;
    }

    .scheduled-game-drag-step-box-main .gk-col {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .scheduled-game-drag-step-box-main .drop-slot {
        width: 135px;
        height: 38px;
        border: 1.5px solid #28d7a1;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        background-color: transparent;
        cursor: pointer;
    }

        .scheduled-game-drag-step-box-main .drop-slot.drag-over {
            background-color: rgba(40, 215, 161, 0.2);
            border-style: dashed;
            transform: scale(1.08);
        }

        .scheduled-game-drag-step-box-main .drop-slot.filled {
            background-color: #ffffff;
            border-color: #28d7a1;
            color: #131D37;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

    .scheduled-game-drag-step-box-main .assigned-info {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 8px;
        overflow: hidden;
    }

    .scheduled-game-drag-step-box-main .assigned-num {
        min-width: 22px;
        height: 22px;
        background-color: #005DBF;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
        margin-right: 8px;
    }

    .scheduled-game-drag-step-box-main .assigned-name {
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .scheduled-game-drag-step-box-main .footer-note {
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 500;
        margin-top: 10px;
    }

@media (max-width: 768px) {
    .scheduled-game-drag-step-box-main .drop-slot {
        width: 100px;
        height: 32px;
    }

    .scheduled-game-drag-step-box-main .assigned-name {
        font-size: 10px;
    }

    .scheduled-game-drag-step-box-main .pitch-area {
        height: 400px;
    }
}

.goalie-table-main-container-step-nine {
    width: 100%;
}

    .goalie-table-main-container-step-nine table select {
        width: 175px;
        box-shadow: unset !important;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
        background-image: url(../images/down-arrow.png);
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 16px 16px;
        margin: auto;
    }

    .goalie-table-main-container-step-nine table input {
        width: 175px;
        margin: auto;
    }

    .goalie-table-main-container-step-nine .scheduled-table-step-fiva-main-container .table-responsive,
    .captured-substitution-container-step-ten-main .scheduled-table-step-fiva-main-container .table-responsive {
        height: fit-content;
        max-height: 200px;
    }

.captured-substitution-container-step-ten-main {
    width: 100%;
}

    .captured-substitution-container-step-ten-main table select {
        width: 146px;
        box-shadow: unset !important;
        background: #0B1120;
        border: 1px solid #ffffff42 !important;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        font-size: 14px;
        background-image: url(../images/down-arrow.png);
        background-repeat: no-repeat;
        background-position: right .75rem center;
        background-size: 16px 16px;
        margin: auto;
    }

    .captured-substitution-container-step-ten-main .table-wzard-itp {
        width: 100px;
    }

#SubmitWizardPopupMn {
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
}

/* ==== scheduled Game Popup end ==== */

/* ==== add player popup start ==== */

.add-player-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 99999;
}

    .add-player-popup-main .event-popup-filter-inside-box-main {
        max-width: 900px;
    }

#AddPlayerPopupMnBx {
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
    display: none;
}

.add-player-form-content {
    font-family: 'Barlow', sans-serif;
    color: #f1f5f9;
}

.add-player-ipt-fieldbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.add-player-ipt-fieldbox-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.add-player-ipt-fieldbox-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 8px;
    display: block;
}

    .add-player-ipt-fieldbox-label .required-star {
        color: #ef4444;
    }

.add-player-ipt-fieldbox {
    width: 100%;
    background: #0B1120;
    border: 1px solid #ffffff42;
    border-radius: 0.8rem !important;
    padding: 0.75rem 1rem;
    color: #f1f5f9;
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

    .add-player-ipt-fieldbox:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    }

select.add-player-ipt-fieldbox {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

.add-player-ipt-fieldbox-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    color: #f1f5f9;
    font-weight: 500;
}

    .add-player-ipt-fieldbox-checkbox-group input[type="checkbox"] {
        appearance: none;
        background-color: #0B1120;
        border: 1px solid #ffffff42;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        cursor: pointer;
        display: grid;
        place-content: center;
        transition: all 0.2s;
    }

        .add-player-ipt-fieldbox-checkbox-group input[type="checkbox"]::before {
            content: "";
            width: 10px;
            height: 10px;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em #3b82f6;
            border-radius: 2px;
        }

        .add-player-ipt-fieldbox-checkbox-group input[type="checkbox"]:checked::before {
            transform: scale(1);
        }

        .add-player-ipt-fieldbox-checkbox-group input[type="checkbox"]:checked {
            border-color: #3b82f6;
        }

.add-player-ipt-fieldbox-collapsible {
    max-height: 100px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 10px;
}

    .add-player-ipt-fieldbox-collapsible.hidden-state {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        pointer-events: none;
    }

.add-player-ipt-fieldbox[type="file"]::file-selector-button {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #ffffff24;
    padding: 4px 10px;
    border-radius: 0.4rem;
    margin-right: 12px;
    cursor: pointer;
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .add-player-ipt-fieldbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .add-player-ipt-fieldbox-grid {
        grid-template-columns: 1fr;
    }
}

.captured-substitution-container-step-ten-main .possession-summary-heading-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .captured-substitution-container-step-ten-main .possession-summary-heading-box .select-new-team-row-add-check-box {
        width: fit-content;
        margin: 0px;
    }

        .captured-substitution-container-step-ten-main .possession-summary-heading-box .select-new-team-row-add-check-box input {
            width: 18px;
            height: 18px;
        }

/* ==== add player popup end ==== */


/* ==== table to card design ui chagnes in scheduled game page start DEMO ONE ==== */

.match-tbl-dt-cngs-tocrd {
    box-sizing: border-box;
    background-color: transparent;
    color: #FFFFFF;
    padding: 0;
    min-height: unset;
}

    /* Main Container setup */
    .match-tbl-dt-cngs-tocrd .dashboard-container {
        margin: 0 auto;
    }

    /* Cards Responsive Grid System */
    .match-tbl-dt-cngs-tocrd .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 24px;
    }

    /* Match Card Box Style */
    .match-tbl-dt-cngs-tocrd .match-card {
        background-color: #131D37;
        border-radius: 14px;
        border: 1px solid rgb(255 255 255 / 24%);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }

        .match-tbl-dt-cngs-tocrd .match-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
            border-color: rgba(0, 93, 191, 0.4);
        }

    /* Card Upper Area: Match details and team info */
    .match-tbl-dt-cngs-tocrd .card-header {
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    }

    /* Teams VS Area */
    .match-tbl-dt-cngs-tocrd .teams-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .match-tbl-dt-cngs-tocrd .team-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        text-align: center;
    }

    .match-tbl-dt-cngs-tocrd .team-logo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        font-size: 1.5rem;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
        padding: 2px;
    }

        .match-tbl-dt-cngs-tocrd .team-logo img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }

    .match-tbl-dt-cngs-tocrd .team-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: #FFFFFF;
        max-width: 110px;
        word-wrap: break-word;
        line-height: 1.3;
    }

    .match-tbl-dt-cngs-tocrd .vs-badge {
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #CBD5E1;
        letter-spacing: 1px;
    }

    /* Match Metadata Info */
    .match-tbl-dt-cngs-tocrd .meta-info-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .match-tbl-dt-cngs-tocrd .meta-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.85rem;
        color: #CBD5E1;
    }

        .match-tbl-dt-cngs-tocrd .meta-item i {
            color: #005DBF;
            width: 16px;
            text-align: center;
        }

    /* Submissions status area */
    .match-tbl-dt-cngs-tocrd .status-section {
        background-color: rgba(11, 17, 32, 0.5);
        border-radius: 10px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .match-tbl-dt-cngs-tocrd .status-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
    }

    .match-tbl-dt-cngs-tocrd .status-label {
        color: #64748B;
        font-weight: 500;
    }

    .match-tbl-dt-cngs-tocrd .status-badge {
        padding: 3px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

        .match-tbl-dt-cngs-tocrd .status-badge.pending {
            background-color: rgba(245, 158, 11, 0.15);
            color: #F59E0B;
        }

        .match-tbl-dt-cngs-tocrd .status-badge.completed {
            background-color: rgba(34, 197, 94, 0.15);
            color: #22C55E;
        }

    /* Card Footer Action Area (From Image 1 action section) */
    .match-tbl-dt-cngs-tocrd .card-actions {
        padding: 16px 20px;
        background-color: rgba(11, 17, 32, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

    /* Icon Action Buttons */
    .match-tbl-dt-cngs-tocrd .action-btn {
        flex: 1;
        height: 40px;
        border-radius: 8px;
        border: none;
        background-color: #005DBF;
        color: #FFFFFF;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background-color 0.2s, transform 0.1s;
    }

        .match-tbl-dt-cngs-tocrd .action-btn:hover {
            background-color: #004ba3;
        }

        .match-tbl-dt-cngs-tocrd .action-btn:active {
            transform: scale(0.9);
        }

        /* Danger delete action style */
        .match-tbl-dt-cngs-tocrd .action-btn.btn-delete {
            background-color: #EF4444;
        }

            .match-tbl-dt-cngs-tocrd .action-btn.btn-delete:hover {
                background-color: #DC2626;
            }

        /* Tooltip styling on hover (Pure CSS Tooltip) */
        .match-tbl-dt-cngs-tocrd .action-btn::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%) translateY(5px);
            background-color: #000000;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, transform 0.2s;
            pointer-events: none;
            z-index: 10;
        }

        .match-tbl-dt-cngs-tocrd .action-btn:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

/* Responsive grid styles */
@media (max-width: 480px) {
    .match-tbl-dt-cngs-tocrd .cards-grid {
        grid-template-columns: 1fr;
    }

    .match-tbl-dt-cngs-tocrd {
        padding: 0px;
    }
}

/* ==== table to card design ui chagnes in scheduled game page end DEMO ONE ==== */

/* ==== submit video popup start ==== */

.submit-video-wizard-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

#SubmitVideoPopupMnbx {
    display: none;
}

/* ==== submit video popup end ==== */

/* ==== Upload Match Sheet popup start ==== */

.upload-match-wizard-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

#UploadVideoPopupMnbx {
    display: none;
}

/* ==== Upload Match Sheet popup end ==== */

/* === lineup popup start ==== */

.lineup-popup-wizard-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

#LineupPopupMnbx {
    display: none;
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
}

.lineup-popup-wizard-main .scheduled-table-step-fiva-main-container .table-responsive {
    height: calc(100vh - 320px);
}

.lineup-popup-inside-main-cntner {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 750px;
    padding: 20px;
    border-radius: 10px;
    background-color: #131D37;
    border: 1px solid #002D5B;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

    .lineup-popup-inside-main-cntner .possession-summary-tbl-container table {
        min-width: max-content;
    }

/* === lineup popup end ==== */

.single-csrd {
    margin-top: 0px;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    border-top: unset;
    display: flex;
    justify-content: end;
    gap: 8px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

    .single-csrd .action-btn {
        /* flex: 1; */
        width: 56px;
        height: 40px;
        border-radius: 8px;
        border: none;
        background-color: #005DBF;
        color: #FFFFFF;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background-color 0.2s, transform 0.1s;
    }

        .single-csrd .action-btn::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%) translateY(5px);
            background-color: #000000;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, transform 0.2s;
            pointer-events: none;
            z-index: 10;
        }

        .single-csrd .action-btn:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

/* ==== player assignment start ==== */

.player-assignment-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
}

    .player-assignment-popup-main .event-main-dpdn-inside-container .player-assignmnt-dpdn {
        width: 100%;
        padding: 16px 20px 0px 16px;
    }

        .player-assignment-popup-main .event-main-dpdn-inside-container .player-assignmnt-dpdn select {
            margin-bottom: 0px;
        }

#PlayerAssignmentPopup {
    display: none;
}

.time-and-events-main-box {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.time-and-events-dtails-card {
    width: fit-content;
    background: #005DBF;
    padding: 8px;
    border-radius: 10px;
    background: #0b112066;
    border: 1px solid #ffffff36;
}

    .time-and-events-dtails-card p {
        color: white;
        font-size: 14px;
    }

/* ==== player assignment end ==== */

#EmailPopupmodel {
    display: none;
}

    #EmailPopupmodel .filter-and-close-btn-box {
        margin-top: 0px;
    }

    #EmailPopupmodel .event-main-dpdn-inside-container {
        padding: 16px 24px;
    }


/* ==== Temporary Players Found Popup Start ==== */

.temporary-players-found-popup-main-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    backdrop-filter: blur(2px);
    margin: auto;
    z-index: 9999;
    animation: fadeIn 0.35s ease-out;
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
}

    .temporary-players-found-popup-main-container .popup-card {
        background-color: #131D37;
        border: 2px solid #002D5B;
        border-radius: 16px;
        width: 90%;
        max-width: 580px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        height: fit-content;
        margin: auto;
        animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .temporary-players-found-popup-main-container .popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-bottom: 1px solid #002D5B;
        background-color: rgba(11, 17, 33, 0.4);
    }

    .temporary-players-found-popup-main-container .popup-header-title {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        margin: 0;
        letter-spacing: 0.5px;
    }

    .temporary-players-found-popup-main-container .header-close-btn {
        background-color: #EB5757;
        border: none;
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        outline: none;
        box-shadow: 0 2px 8px rgba(235, 87, 87, 0.3);
    }

        .temporary-players-found-popup-main-container .header-close-btn:hover {
            background-color: #f77070;
            transform: scale(1.05);
        }

    .temporary-players-found-popup-main-container .popup-body-content {
        padding: 20px 0 0 0;
    }

    .temporary-players-found-popup-main-container .warning-circle-icon {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        border: 3px solid #ff9f43;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff9f43;
        font-size: 32px;
        margin: 0 auto 20px auto;
        background-color: rgba(255, 159, 67, 0.06);
        box-shadow: 0 0 15px rgba(255, 159, 67, 0.15);
        animation: gentle-pulse 2s infinite;
    }

    .temporary-players-found-popup-main-container .alert-banner-box {
        background-color: rgba(255, 159, 67, 0.06);
        border-left: 4px solid #ff9f43;
        border-radius: 8px;
        margin: 0 24px 20px 24px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .temporary-players-found-popup-main-container .alert-banner-icon-bg {
        background-color: rgba(255, 159, 67, 0.15);
        border: 1px solid rgba(255, 159, 67, 0.3);
        border-radius: 50%;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 0 10px rgba(255, 159, 67, 0.1);
    }

    .temporary-players-found-popup-main-container .alert-banner-icon {
        color: #ff9f43;
        font-size: 16px;
    }

    .temporary-players-found-popup-main-container .alert-banner-text-wrap {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex-grow: 1;
    }

    .temporary-players-found-popup-main-container .alert-banner-title {
        font-size: 14px;
        font-weight: 700;
        color: #ff9f43;
        margin: 0;
    }

    .temporary-players-found-popup-main-container .alert-banner-desc {
        font-size: 13px;
        color: #cbd5e1;
        margin: 0;
        line-height: 1.45;
    }

    .temporary-players-found-popup-main-container .table-scroll-wrapper {
        margin: 0 24px 24px 24px;
        max-height: 230px;
        overflow-y: auto;
        border: 1px solid #002D5B;
        border-radius: 8px;
        background-color: #0c1426;
        scrollbar-color: #005DBF #131D37;
        scrollbar-width: thin;
    }

        .temporary-players-found-popup-main-container .table-scroll-wrapper::-webkit-scrollbar {
            width: 8px;
        }

        .temporary-players-found-popup-main-container .table-scroll-wrapper::-webkit-scrollbar-track {
            background: #0c1426;
        }

        .temporary-players-found-popup-main-container .table-scroll-wrapper::-webkit-scrollbar-thumb {
            background: #002D5B;
            border-radius: 4px;
        }

            .temporary-players-found-popup-main-container .table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
                background: #005DBF;
            }

    .temporary-players-found-popup-main-container .data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        text-align: left;
    }

        .temporary-players-found-popup-main-container .data-table thead th {
            position: sticky;
            top: 0;
            background-color: #314158;
            color: #ffffff;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.75px;
            padding: 14px 16px;
            border-bottom: 2px solid #002D5B;
            z-index: 10;
        }

            .temporary-players-found-popup-main-container .data-table thead th:not(:last-child) {
                border-right: 1px solid #002D5B;
            }

        .temporary-players-found-popup-main-container .data-table tbody td {
            padding: 14px 16px;
            border-bottom: 1px solid #002D5B;
            font-size: 14px;
            color: #e2e8f0;
            vertical-align: top;
            transition: background-color 0.2s ease;
        }

            .temporary-players-found-popup-main-container .data-table tbody td:not(:last-child) {
                border-right: 1px solid #002D5B;
            }

        .temporary-players-found-popup-main-container .data-table tbody tr:last-child td {
            border-bottom: none;
        }

        .temporary-players-found-popup-main-container .data-table tbody tr:hover td {
            background-color: rgba(0, 93, 191, 0.08);
        }

    .temporary-players-found-popup-main-container .col-hash {
        width: 10%;
        color: #64748b;
        font-weight: 600;
    }

    .temporary-players-found-popup-main-container .col-player {
        width: 45%;
        font-weight: 600;
    }

    .temporary-players-found-popup-main-container .player-cell-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .temporary-players-found-popup-main-container .player-avatar-badge {
        background-color: rgba(56, 189, 248, 0.12);
        border: 1px solid rgba(56, 189, 248, 0.3);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #38bdf8;
        font-size: 13px;
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.1);
        flex-shrink: 0;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .temporary-players-found-popup-main-container .data-table tbody tr:hover .player-avatar-badge {
        background-color: rgba(56, 189, 248, 0.22);
        border-color: rgba(56, 189, 248, 0.6);
        color: #ffffff;
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    }

    .temporary-players-found-popup-main-container .col-events {
        width: 45%;
    }

    .temporary-players-found-popup-main-container .event-item-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

        .temporary-players-found-popup-main-container .event-item-badge:last-child {
            margin-bottom: 0;
        }

    .temporary-players-found-popup-main-container .event-time-pill {
        background-color: #005DBF;
        color: #ffffff;
        font-size: 11px;
        font-weight: bold;
        padding: 2px 8px;
        border-radius: 4px;
        letter-spacing: 0.5px;
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0, 93, 191, 0.2);
    }

    .temporary-players-found-popup-main-container .event-text {
        font-size: 13px;
        color: #cbd5e1;
    }

    .temporary-players-found-popup-main-container .popup-footer-actions {
        padding: 20px 24px;
        border-top: 1px solid #002D5B;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        background-color: rgba(11, 17, 33, 0.2);
    }

    .temporary-players-found-popup-main-container .action-btn-icon {
        position: relative;
        width: 54px;
        height: 54px;
        border-radius: 14px;
        border: none;
        font-size: 19px;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        outline: none;
        box-sizing: unset;
        padding: unset;
        opacity: unset;
        background: unset;
    }

    .temporary-players-found-popup-main-container .btn-assign {
        background-color: #005DBF;
        box-shadow: 0 4px 12px rgba(0, 93, 191, 0.3);
    }

        .temporary-players-found-popup-main-container .btn-assign:hover {
            background-color: #1a75db;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 93, 191, 0.45);
        }

        .temporary-players-found-popup-main-container .btn-assign:active {
            transform: translateY(-1px);
        }

    .temporary-players-found-popup-main-container .btn-close {
        background-color: #EB5757;
        box-shadow: 0 4px 12px rgba(235, 87, 87, 0.3);
    }

        .temporary-players-found-popup-main-container .btn-close:hover {
            background-color: #f77070;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(235, 87, 87, 0.45);
        }

        .temporary-players-found-popup-main-container .btn-close:active {
            transform: translateY(-1px);
        }

    .temporary-players-found-popup-main-container .action-btn-icon::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 135%;
        left: 50%;
        transform: translateX(-50%) scale(0.85);
        background-color: #0b1121;
        color: #ffffff;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #002D5B;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
        z-index: 10005;
    }

    .temporary-players-found-popup-main-container .action-btn-icon::before {
        content: '';
        position: absolute;
        bottom: 120%;
        left: 50%;
        transform: translateX(-50%) scale(0.85);
        border-width: 6px;
        border-style: solid;
        border-color: #002D5B transparent transparent transparent;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10005;
    }

    .temporary-players-found-popup-main-container .action-btn-icon:hover::after,
    .temporary-players-found-popup-main-container .action-btn-icon:hover::before {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(35px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gentle-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 159, 67, 0.5);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(255, 159, 67, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 159, 67, 0);
    }
}

/* ==== Temporary Players Found Popup end ==== */


/* ==== Manage Goalie Section start ==== */

.manage-goalie-container {
    color: #E2E8F0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
}

    /* Full Width Wrapper */
    .manage-goalie-container .main-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .manage-goalie-container .manager-card {
        background-color: #131D37;
        border-radius: 1rem;
        border: 1px solid rgba(30, 41, 59, 0.8);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* Goalie Management Header Title Area */
    .manage-goalie-container .card-header {
        padding: 1.5rem;
        border-bottom: 1px solid rgba(30, 41, 59, 0.8);
        background-color: rgba(15, 23, 42, 0.4);
    }

    .manage-goalie-container .card-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #FFFFFF;
        letter-spacing: 0.025em;
    }

    /* Goalie Management Container Content Area */
    .manage-goalie-container .card-body {
        padding: 1.5rem;
    }

    /* Table Horizontal Scroll Wrapper - Safe Horizontal Scroll ONLY inside this div */
    .manage-goalie-container .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #005DBF #131D37;
        padding-bottom: 0.5rem;
    }

    /* Premium Table Design */
    .manage-goalie-container table {
        width: 100%;
        min-width: 980px;
        border-collapse: separate;
        border-spacing: 0 12px;
        text-align: left;
    }

    /* Centered Table Headers */
    .manage-goalie-container th {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94A3B8;
        padding-bottom: 0.5rem;
        text-align: center;
        /* Centering all table headers */
    }

    .manage-goalie-container tr {
        background-color: rgba(15, 23, 42, 0.2);
        transition: background-color 0.2s ease;
    }

        .manage-goalie-container tr:hover {
            background-color: rgba(15, 23, 42, 0.45);
        }

    .manage-goalie-container td {
        padding: 0.75rem;
        vertical-align: middle;
        border-top: 1px solid rgba(30, 41, 59, 0.8);
        border-bottom: 1px solid rgba(30, 41, 59, 0.8);
    }

        .manage-goalie-container td:first-child {
            border-left: 1px solid rgba(30, 41, 59, 0.8);
            border-top-left-radius: 0.75rem;
            border-bottom-left-radius: 0.75rem;
            padding-left: 1.25rem;
        }

        .manage-goalie-container td:last-child {
            border-right: 1px solid rgba(30, 41, 59, 0.8);
            border-top-right-radius: 0.75rem;
            border-bottom-right-radius: 0.75rem;
            padding-right: 1.25rem;
        }

    /* Starting Keeper Special Highlighter Styling */
    .manage-goalie-container tr.starting-row td {
        border-top-color: rgba(0, 93, 191, 0.3);
        border-bottom-color: rgba(0, 93, 191, 0.3);
    }

        .manage-goalie-container tr.starting-row td:first-child {
            border-left-color: rgba(0, 93, 191, 0.3);
        }

        .manage-goalie-container tr.starting-row td:last-child {
            border-right-color: rgba(0, 93, 191, 0.3);
        }

    /* Form Dropdowns & Input Customizations */
    .manage-goalie-container select,
    .manage-goalie-container input[type="number"] {
        width: 100%;
        background-color: #131D37;
        border: 1px solid rgba(148, 163, 184, 0.2);
        color: #E2E8F0;
        font-size: 0.875rem;
        border-radius: 0.5rem;
        padding: 0.625rem;
        outline: none;
        transition: all 0.2s ease;
        font-family: inherit;
        height: auto;
    }

    .manage-goalie-container select {
        padding-right: 2.25rem;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.1em;
    }

        .manage-goalie-container select:focus,
        .manage-goalie-container input[type="number"]:focus {
            border-color: #005DBF;
            box-shadow: 0 0 0 3px rgba(0, 93, 191, 0.25);
        }

    .manage-goalie-container .form-control:focus {
        background-color: #131d37;
        color: white;
    }

    .manage-goalie-container input[type="number"] {
        text-align: center;
    }

        .manage-goalie-container input[type="number"]:disabled {
            opacity: 0.5;
            background-color: rgba(15, 23, 42, 0.4);
            border-color: rgba(30, 41, 59, 0.5);
            cursor: not-allowed;
        }

    /* Type Badges Styling */
    .manage-goalie-container .type-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.3125rem 0.625rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.025em;
        white-space: nowrap;
    }

    .manage-goalie-container .type-badge-starting {
        background-color: rgba(0, 93, 191, 0.15);
        color: #60A5FA;
        border: 1px solid rgba(0, 93, 191, 0.3);
    }

    .manage-goalie-container .type-badge-add {
        background-color: rgba(30, 41, 59, 0.8);
        color: #94A3B8;
        border: 1px solid rgba(71, 85, 105, 0.5);
    }

    /* Custom Hover Tooltips on Buttons */
    .manage-goalie-container .tooltip-container {
        position: relative;
        display: inline-block;
    }

    .manage-goalie-container .tooltip-text {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 0.5rem;
        padding: 0.375rem 0.625rem;
        background-color: #0F172A;
        color: #FFFFFF;
        font-size: 0.7rem;
        font-weight: 500;
        border-radius: 0.375rem;
        border: 1px solid #334155;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        z-index: 50;
        pointer-events: none;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }

        .manage-goalie-container .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: #0F172A transparent transparent transparent;
        }

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

    /* Rounded Action Icons (Add & Remove) */
    .manage-goalie-container .btn-icon-add {
        width: 2.5rem;
        height: 2.5rem;
        background-color: #005DBF;
        color: #FFFFFF;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 4px 6px -1px rgba(0, 93, 191, 0.2);
    }

        .manage-goalie-container .btn-icon-add:hover {
            background-color: #004ca3;
            transform: scale(1.03);
        }

        .manage-goalie-container .btn-icon-add:active {
            transform: scale(0.97);
        }

    .manage-goalie-container .btn-icon-remove {
        width: 2.5rem;
        height: 2.5rem;
        background-color: rgba(239, 68, 68, 0.1);
        color: #F87171;
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: 0.5rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

        .manage-goalie-container .btn-icon-remove:hover {
            background-color: #EF4444;
            color: #FFFFFF;
            border-color: #EF4444;
            transform: scale(1.03);
        }

        .manage-goalie-container .btn-icon-remove:active {
            transform: scale(0.97);
        }

    /* Large Save Button styling */
    .manage-goalie-container .save-container {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(30, 41, 59, 0.8);
        display: flex;
        justify-content: end;
    }

    .manage-goalie-container .btn-save {
        width: fit-content;
        max-width: fit-content;
        background-color: #005DBF;
        color: #FFFFFF;
        border: none;
        border-radius: 0.75rem;
        padding: 14px 22px;
        font-size: 0.875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        box-shadow: 0 10px 15px -3px rgba(0, 93, 191, 0.3);
        position: relative;
    }

        .manage-goalie-container .btn-save:hover {
            background-color: #004ca3;
            transform: translateY(-1px);
            box-shadow: 0 10px 20px -3px rgba(0, 93, 191, 0.4);
        }

        .manage-goalie-container .btn-save:active {
            transform: translateY(0);
        }

    /* Table cell space helpers */
    .manage-goalie-container .input-cell-wrapper {
        padding: 0 0.5rem;
    }

    .manage-goalie-container .dropdown-cell-wrapper {
        padding-right: 0.5rem;
    }

    .manage-goalie-container .pl-2 {
        padding-left: 0.5rem;
    }

    .manage-goalie-container .text-center {
        text-align: center;
    }

    /* Disable input number arrows natively */
    .manage-goalie-container input::-webkit-outer-spin-button,
    .manage-goalie-container input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .manage-goalie-container input[type=number] {
        -moz-appearance: textfield;
    }

    /* Top Center Toast Notification Style */
    .manage-goalie-container #toast-container {
        position: fixed;
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
        width: 100%;
        max-width: 340px;
        pointer-events: none;
    }

    .manage-goalie-container .toast {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1.25rem;
        border-radius: 0.75rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
        color: #FFFFFF;
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(-20px);
        opacity: 0;
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

        .manage-goalie-container .toast.toast-success {
            background-color: #005DBF;
        }

        .manage-goalie-container .toast.toast-error {
            background-color: #EF4444;
        }

        .manage-goalie-container .toast.show {
            transform: translateY(0);
            opacity: 1;
        }

@media (max-width: 640px) {
    .manage-goalie-container {
        padding: 1rem;
    }

        .manage-goalie-container .card-header {
            padding: 1.25rem 1.5rem;
        }

        .manage-goalie-container .card-body {
            padding: 1.25rem 1.5rem;
        }
}

.card-header .card-title #goalieAccordionIcon {
    transition: 0.3s;
}

.card-header.collapsed .card-title #goalieAccordionIcon {
    transform: rotate(180deg);
}

.vis-dropdown::-webkit-scrollbar {
    display: none;
}

/* ==== Manage Goalie Section end ==== */

/* ==== player assocation page start ==== */

.player-assocation-main-container {
    width: 100%;
    background-color: #0B1120;
}

.player-assocation-page-header-main {
    width: 100%;
    margin: auto;
    background-color: #131D37;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.player-assocation-team-name {
    width: fit-content;
    padding: 16px;
    background-color: #0B1120;
    border-radius: 10px;
    border: 1px solid #1E293B;
}

    .player-assocation-team-name h4 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
        font-size: 20px;
        font-family: 'Inter 18pt SemiBolt';
    }

        .player-assocation-team-name h4 img {
            width: 28px;
            height: 28px;
            border-radius: 100px;
        }

.player-assocation-date-and-location-box {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.player-assocation-date-box {
    width: fit-content;
    padding: 14px;
    border-radius: 12px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-asstn-date-icn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #131D37;
    border-radius: 8px;
    color: white;
    font-size: 20px;
}

.player-assocation-date-box h6 {
    color: white;
    font-size: 20px;
    font-family: 'Inter 18pt SemiBolt';
}

.player-assocation-page-main-body {
    width: 100%;
    padding: 24px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}







.player-assocation-left-panel-main {
    display: flex;
    justify-content: center;
    width: calc(50% - 12px);
}

    /* Main Container Card */
    .player-assocation-left-panel-main .panel-card {
        background-color: #131D37;
        width: 100%;
        height: fit-content;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .player-assocation-left-panel-main .panel-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .player-assocation-left-panel-main .logo-container {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        overflow: hidden;
        position: relative;
    }

    .player-assocation-left-panel-main .logo-svg {
        width: 100%;
        height: 100%;
    }

    .player-assocation-left-panel-main .header-info {
        display: flex;
        flex-direction: column;
    }

    .player-assocation-left-panel-main .header-title {
        color: #F1F5F9;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    .player-assocation-left-panel-main .header-subtitle {
        color: #94A3B8;
        font-size: 12px;
        margin-top: 2px;
        line-height: 16px;
    }

    .player-assocation-left-panel-main .controls-box {
        background-color: #0B1120;
        border-radius: 10px;
        padding: 16px 20px;
        margin-bottom: 16px;
        border: 1px solid rgba(255, 255, 255, 0.03);
    }

    .player-assocation-left-panel-main .control-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

        .player-assocation-left-panel-main .control-row:last-child {
            border-bottom: none;
            padding-bottom: 4px;
        }

        .player-assocation-left-panel-main .control-row:first-child {
            padding-top: 4px;
        }

    .player-assocation-left-panel-main .control-label {
        color: #A0aec0;
        font-size: 14px;
        font-weight: 500;
    }

    .player-assocation-left-panel-main .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 22px;
    }

        .player-assocation-left-panel-main .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .player-assocation-left-panel-main .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #2D3748;
        transition: .25s ease;
        border-radius: 34px;
    }

        .player-assocation-left-panel-main .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .25s ease;
            border-radius: 50%;
        }

    .player-assocation-left-panel-main input:checked + .slider {
        background-color: #005DBF;
    }

        .player-assocation-left-panel-main input:checked + .slider:before {
            transform: translateX(22px);
        }

    .player-assocation-left-panel-main .player-filter-wrapper {
        margin-bottom: 16px;
    }

    .player-assocation-left-panel-main .custom-select {
        width: 100%;
        background-color: #0B1120;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        outline: none;
        position: relative;
        background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 18px;
    }

        .player-assocation-left-panel-main .custom-select:focus {
            border-color: #005DBF;
        }

    .player-assocation-left-panel-main .timeline-table {
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        background-color: #0B1120;
        height: 426px;
        /* Fixed height for 7 rows, scrollbar only shows if rows exceed this */
        overflow-y: auto;
        position: relative;
        margin-bottom: 24px;
    }

        /* Custom scrollbar for the table container */
        .player-assocation-left-panel-main .timeline-table::-webkit-scrollbar {
            width: 6px;
        }

        .player-assocation-left-panel-main .timeline-table::-webkit-scrollbar-track {
            background: #0B1120;
        }

        .player-assocation-left-panel-main .timeline-table::-webkit-scrollbar-thumb {
            background: #1d2b4f;
            border-radius: 4px;
        }

    /* Sticky Table Header styling */
    .player-assocation-left-panel-main .table-header {
        display: grid;
        grid-template-columns: 50px 1fr 80px;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        position: sticky;
        top: 0;
        background-color: #0B1120;
        /* Solid color matches inside box bg to hide scrolled rows */
        z-index: 10;
    }

        .player-assocation-left-panel-main .table-header span {
            color: #6A7B95;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .player-assocation-left-panel-main .table-header .col-center {
            text-align: center;
        }

    .player-assocation-left-panel-main .table-body {
        display: flex;
        flex-direction: column;
    }

    .player-assocation-left-panel-main .table-row {
        display: grid;
        grid-template-columns: 50px 1fr 80px;
        align-items: center;
        padding: 8px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        transition: background-color 0.2s ease;
    }

        .player-assocation-left-panel-main .table-row:last-child {
            border-bottom: none;
        }

        .player-assocation-left-panel-main .table-row:hover {
            background-color: rgba(255, 255, 255, 0.01);
        }

    .player-assocation-left-panel-main .icon-box {
        width: 32px;
        height: 32px;
        background-color: #0d1527;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 13px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .player-assocation-left-panel-main .player-select-container {
        padding: 0 8px;
    }

    .player-assocation-left-panel-main .row-select {
        width: 100%;
        background-color: #0d1527;
        color: #A0aec0;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg fill='%23A0aec0' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
        padding-right: 28px;
        transition: all 0.2s ease;
    }

        .player-assocation-left-panel-main .row-select:focus {
            border-color: #005DBF;
            color: #ffffff;
        }

    .player-assocation-left-panel-main .time-display {
        background-color: #0d1527;
        color: #A0aec0;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 8px 10px;
        font-size: 13px;
        font-family: monospace;
        text-align: center;
        width: 100%;
        outline: none;
        transition: all 0.2s ease;
    }

        .player-assocation-left-panel-main .time-display:focus {
            border-color: #005DBF;
            color: #ffffff;
        }

    .player-assocation-left-panel-main .footer-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .player-assocation-left-panel-main .action-btn {
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        outline: none;
    }

    .player-assocation-left-panel-main .btn-blue {
        background-color: #005DBF;
    }

        .player-assocation-left-panel-main .btn-blue:hover {
            background-color: #004da3;
            transform: translateY(-2px);
        }

        .player-assocation-left-panel-main .btn-blue:active {
            transform: translateY(0);
        }

    .player-assocation-left-panel-main .btn-red {
        background-color: #EF4444;
    }

        .player-assocation-left-panel-main .btn-red:hover {
            background-color: #DC2626;
            transform: translateY(-2px);
        }

        .player-assocation-left-panel-main .btn-red:active {
            transform: translateY(0);
        }

    /* Custom Tooltip configuration */
    .player-assocation-left-panel-main .action-btn[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 58px;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        background-color: #000000;
        color: #ffffff;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        z-index: 100;
    }

    .player-assocation-left-panel-main .action-btn[data-tooltip]::before {
        content: '';
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        border-width: 5px 6px 0 6px;
        border-style: solid;
        border-color: #000000 transparent transparent transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100;
    }

    .player-assocation-left-panel-main .action-btn[data-tooltip]:hover::after,
    .player-assocation-left-panel-main .action-btn[data-tooltip]:hover::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

.player-assocation-right-panel-main {
    width: calc(50% - 12px);
}

    .player-assocation-right-panel-main .game-video-container-box-main video {
        height: 460px;
        border-radius: 12px;
    }

    .player-assocation-right-panel-main .player-assocation-left-panel-main {
        display: unset;
        justify-content: unset;
        align-items: unset;
        width: unset;
    }

        .player-assocation-right-panel-main .player-assocation-left-panel-main .footer-actions {
            border-top: unset;
        }

.team-lineup-match-players-main-container {
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    background-color: #131D37;
}

.team-lineup-head-contnr {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 16px;
}

.team-lineup-ttl-and-ylw-dots {
    width: fit-content;
    display: flex;
    gap: 8px;
    align-items: center;
}

    .team-lineup-ttl-and-ylw-dots span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10px;
        height: 10px;
        background-color: #FACC15;
        border-radius: 50px;
    }

    .team-lineup-ttl-and-ylw-dots h5 {
        color: #CBD5E1;
        font-size: 14px;
        line-height: 20px;
        font-family: 'Inter 18pt Bold';
    }

.player-assocation-left-panel-main.btn-mn-box-mn-tltps {
    display: unset;
    justify-content: unset;
    align-items: unset;
    width: unset;
}

.team-lineup-match-players-main-container .player-assocation-left-panel-main .action-btn[data-tooltip]::after {
    left: 20%;
}

.team-lineup-match-players-main-container .footer-actions {
    padding-top: 0px;
}

.team-match-player-list-main {
    width: 100%;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    height: 228px;
    overflow: auto;
    padding-right: 6px;
}

.team-match-player-card-mn {
    width: calc(25% - 9px);
    padding: 12px;
    border-radius: 8px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-card-player-img {
    width: 40px;
    min-width: 40px;
    height: 40px;
}

    .team-card-player-img img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }

.team-card-player-name-and-position {
    width: fit-content;
}

    .team-card-player-name-and-position h4 {
        color: #FFFFFF;
        line-height: 16px;
        font-family: 'Inter 18pt Bold';
        font-size: 12px;
    }

.team-match-player-card-mn.goalKeeper-card .team-card-player-name-and-position h5 {
    color: #F87171;
}

.team-card-player-name-and-position h5 {
    color: #EAB308;
    line-height: 14px;
    font-family: 'Inter 18pt Bold';
    font-size: 10px;
}

.team-match-player-list-main::-webkit-scrollbar {
    width: 6px;
}

.team-match-player-list-main::-webkit-scrollbar-track {
    background: #0B1120;
}

.team-match-player-list-main::-webkit-scrollbar-thumb {
    background: #1d2b4f;
    border-radius: 4px;
}

.player-assocation-right-panel-main .video-markers-container {
    bottom: 107px;
}

.view-lineup-popup-main-container,
.goal-stat-popup-main-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
}

.view-lineup-popup-inside-main-tbl {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 938px;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

    .view-lineup-popup-inside-main-tbl .possession-summary-tbl-container table {
        min-width: unset;
    }

    .view-lineup-popup-inside-main-tbl .possession-summary-heading-box h5 {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.jersey-itp-desgn {
    background-color: #0B1120;
    border: 1px solid rgba(255, 255, 255, 0.2588);
    border-radius: 8px;
    text-align: center;
    padding: 4px 10px;
    color: white;
    width: 124px;
}

.action-btn-ssnp {
    width: fit-content;
    display: flex;
    gap: 12px;
    margin: auto;
}

    .action-btn-ssnp .inactive-cmn {
        padding: 4px 8px;
        min-width: 55px;
        border: 1px solid #ACB1B8;
        border-radius: 100px;
        color: #ACB1B8;
        background-color: transparent;
        font-size: 12px;
        font-family: 'Inter 18pt Medium';
    }

.inactive-cmn.green.active {
    background-color: #3CB660;
    border-color: #3CB660;
    color: white;
}

.inactive-cmn.blue.active {
    background-color: #4283F2;
    border-color: #4283F2;
    color: white;
}

.inactive-cmn.red.active {
    background-color: #EB5757;
    border-color: #EB5757;
    color: white;
}

#ViewLineupPopupMain,
#SelectStatisticPopupMain {
    display: none;
}

.goal-stat-popup-inside-main {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 600px;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
    background-color: #131D37;
    overflow: visible;
    border-radius: 10px;
}

    .goal-stat-popup-inside-main .possession-summary-heading-box h5 {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .goal-stat-popup-inside-main .possession-summary-heading-box h5 img {
            width: 24px;
            height: 24px;
            border-radius: 100px;
        }

.change-popup-main-btn {
    font-size: 14px;
    padding: 6px 16px;
    font-family: 'Inter 18pt Medium';
    border-radius: 8px;
    color: white;
    background-color: #005DBF;
    border: 1px solid #005DBF;
    margin-left: auto;
    box-shadow: 0px 0px 2px 1px transparent;
}

    .change-popup-main-btn:hover {
        box-shadow: 0px 0px 2px 1px white;
    }

.goal-stat-popup-inside-main .possession-summary-heading-box {
    border-bottom: 1px solid #002D5B;
}

.goal-stat-popup-body-main {
    padding: 20px 24px;
    width: 100%;
}

.goal-stat-popup-mins-and-secs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

    .goal-stat-popup-mins-and-secs input {
        font-size: 14px;
        font-family: 'Inter 18pt Medium';
        line-height: 24px;
        padding: 8px 10px;
        background-color: #0B1120;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2588);
        width: 136px;
        color: white;
    }

    .goal-stat-popup-mins-and-secs span {
        color: white;
        font-size: 22px;
        font-family: 'Inter 18pt Medium';
    }

.goal-stat-popup-select-opt-main {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.drk-slsct-opt-mn {
    width: 100%;
}

    .drk-slsct-opt-mn label {
        width: 100%;
        color: white;
        font-size: 12px;
        font-family: 'Inter 18pt SemiBolt';
        margin-bottom: 8px;
    }

    .drk-slsct-opt-mn select {
        box-shadow: unset;
        font-size: 12px;
        color: white;
        padding: 12px;
        background-color: #0B1120;
        border: 1px solid #1E293B;
        border-radius: 8px;
        background-image: url(../images/down-arrow.png);
        background-size: 16px 16px;
    }

    .drk-slsct-opt-mn input {
        font-size: 12px;
        color: white;
        padding: 12px;
        background-color: #0B1120;
        border: 1px solid #1E293B;
        border-radius: 8px;
        width: 100%;
    }

    .drk-slsct-opt-mn select:focus {
        box-shadow: unset;
        border-color: #1E293B;
    }

.goal-stat-popup-select-opt-main .drk-slsct-opt-mn {
    width: calc(50% - 8px);
}

.goal-stat-popup-inside-main .player-assocation-left-panel-main.btn-mn-box-mn-tltps .footer-actions {
    padding: 16px 24px;
    border-top: 1px solid #002D5B;
}

#GoalStatInsideOne {
    display: block;
}

#GoalStatInsideTwo {
    display: none;
}

#GoalStatPopupMain,
#TeamStatPopupMain,
#OfficialStoppagePopupMain,
#ReassignPlayerPopupMain,
#AddTemporaryPopupMain,
#PlayerAssocationDeletePopup,
#EditPlayerAssocationInsideTwo,
#EditPlayerAssocationPopupMain,
#TeamStatInsideTwo {
    display: none;
}

    #PlayerAssocationDeletePopup .player-assocation-left-panel-main.btn-mn-box-mn-tltps .footer-actions {
        padding-top: 4px;
        justify-content: center;
        border-top: unset;
    }

.full-screen-video-main-container {
    width: 100%;
    height: 100vh;
    background-color: #0B1120;
    padding: 20px;
}

    .full-screen-video-main-container video {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.game-video-clip-container-box-in-out-mn {
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    position: relative;
    width: 100%;
    margin-bottom: 18px;
}

/* ==== player assocation page end ==== */
/* ==== Manage Goalie Section end ==== */


/* ============================= PASS MATRIX ================================== */
.pm-wrapper {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    overflow: auto;
    border-radius: 16px;
    background-color: #0B1120;
    scrollbar-width: thin;
    scrollbar-color: #1C2B4E rgba(173, 216, 230, 0);
}

/* ===== TABLE ===== */
.pm-table {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 0 auto;
    width: max-content;
}

/* ===== SHARED TH/TD BASE ===== */
.pm-th,
.pm-td {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
    height: 125px;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    border-radius: 12px;
    color: #ffffff;
}

/* ===== HEADER CELLS ===== */
.pm-th {
    background: linear-gradient(180deg, #005DBF 0%, #003B7A 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    position: sticky;
    z-index: 40;
}

/* Row-1 TH: stick to very top */
.pm-th-r1 {
    top: 0;
    z-index: 50;
}

.pm-th-r2 {
    top: 133px;
    z-index: 49;
}

.pm-th-r1-c2 {
    position: sticky;
    top: 0;
    left: 133px;
    z-index: 56;
}

.pm-th-r2-c1 {
    position: sticky;
    top: 133px;
    left: 0;
    z-index: 54;
}

.pm-th.pm-th-ball-cell {
    background: #0B1120;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===== DIAGONAL HEADER CELL ===== */
.pm-th-diag-r1 {
    background: linear-gradient(46deg, #005DBF 48%, rgb(255 255 255) 49%, rgb(255 255 255) 51%, #003B7A 52%);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 60;
    overflow: hidden;
}

.pm-th-diag-r2 {
    background: linear-gradient(46deg, #005DBF 48%, rgb(255 255 255) 49%, rgb(255 255 255) 51%, #003B7A 52%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 133px;
    left: 133px;
    z-index: 55;
    border-radius: 12px;
}

.pm-td-sticky-col {
    position: sticky;
    left: 0;
    z-index: 45;
}

.pm-td-sticky-col-2 {
    position: sticky;
    left: 133px;
    z-index: 44;
    background-color: #0B1120 !important;
}

.pm-diag-recipient {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e2e8f0;
}

.pm-diag-passing {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e2e8f0;
}

/* ===== BODY CELLS ===== */
.pm-td {
    background-color: #131D37;
    border: 1px solid rgba(255, 255, 255, 0.02);
    font-weight: 600;
    background: #0B1120;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

    .pm-td.pm-td-ball-cell {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

/* Row-label cells (first column) */
.pm-td-label {
    background: linear-gradient(180deg, #005DBF 0%, #003B7A 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-weight: 700;
}

/* Self-interaction (diagonal) data cells */
.pm-td-self {
    background: linear-gradient(135deg, rgba(0, 93, 191, 0.45) 0%, rgba(0, 59, 122, 0.45) 100%);
    border: 1px solid rgba(0, 93, 191, 0.60);
}

/* ===== BALL WIDGET ===== */
.pm-ball-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.pm-ball-img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    background: transparent;
}

.pm-ball-num {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #00000000;
    color: #ffffff;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: unset;
    box-shadow: unset;
    margin-left: 4px;
    margin-bottom: 3px;
}

.pass-matrix-banner {
    margin-bottom: 24px;
    display: flex;
}

.pass-matrix-btn-link {
    color: #FFFFFF;
    background: linear-gradient(135deg, #005DBF 0%, #004793 100%);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 10px;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 93, 191, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .pass-matrix-btn-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(0, 93, 191, 0.5);
        filter: brightness(1.1);
    }

.tbl-mn-cntnr {
    background-color: #0B1120;
    color: #ffffff;
    min-height: 100vh;
    padding: 24px 16px;
}

/* ==== pass matrix dashboard start ==== */

@media (max-width: 767px) {

    .pm-th,
    .pm-td {
        width: 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
        height: 85px !important;
        font-size: 10px !important;
        padding: 6px !important;
    }

    .pm-th-r1-c2,
    .pm-td-sticky-col-2,
    .pm-th-diag-r2 {
        left: 92px !important;
    }

    .pm-th-r2-c1,
    .pm-th-diag-r2,
    .pm-th-r2 {
        top: 91px !important;
    }

    .pm-ball-img {
        width: 100% !important;
        height: 100% !important;
    }

    .pm-diag-recipient {
        position: absolute;
        top: 5px !important;
        right: 5px !important;
        font-size: 8px !important;
    }

    .pm-diag-passing {
        position: absolute;
        bottom: 5px !important;
        left: 5px !important;
        font-size: 8px !important;
    }

    .pm-ball-num {
        margin-left: 2px !important;
        margin-bottom: 2px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 575px) {

    .pm-th,
    .pm-td {
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
        height: 75px !important;
        font-size: 8px !important;
        padding: 4px !important;
    }

    .pm-th-r1-c2,
    .pm-td-sticky-col-2,
    .pm-th-diag-r2 {
        left: 84px !important;
    }

    .pm-th-r2-c1,
    .pm-th-diag-r2,
    .pm-th-r2 {
        top: 81px !important;
    }

    .pm-ball-img {
        width: 100% !important;
        height: 100% !important;
    }

    .pm-diag-recipient {
        position: absolute;
        top: 4px !important;
        right: 6px !important;
        font-size: 7px !important;
    }

    .pm-diag-passing {
        position: absolute;
        bottom: 4px !important;
        left: 6px !important;
        font-size: 7px !important;
    }

    .pm-ball-num {
        margin-left: 2px !important;
        margin-bottom: 2px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {

    .pm-th,
    .pm-td {
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        height: 65px !important;
        font-size: 8px !important;
        padding: 4px !important;
    }

    .pm-th-r1-c2,
    .pm-td-sticky-col-2,
    .pm-th-diag-r2 {
        left: 73px !important;
    }

    .pm-th-r2-c1,
    .pm-th-diag-r2,
    .pm-th-r2 {
        top: 72px !important;
    }

    .pm-ball-img {
        width: 100% !important;
        height: 100% !important;
    }

    .pm-diag-recipient {
        position: absolute;
        top: 18px !important;
        right: 0px !important;
        font-size: 7px !important;
        transform: rotate(45deg);
    }

    .pm-diag-passing {
        position: absolute;
        bottom: 18px !important;
        left: 4px !important;
        font-size: 7px !important;
        transform: rotate(45deg);
    }

    .pm-ball-num {
        margin-left: 1px !important;
        margin-bottom: 1px !important;
        font-size: 10px !important;
    }

    .pass-matrix-btn-link {
        font-size: 12px;
    }

    .pass-matrix-banner {
        margin-bottom: 12px;
    }
}

/* ==== pass matrix dashboard end ==== */
.game-summary-page-main-container {
    padding: 24px;
}

/* ==== Manage Goalie Section end ==== */

.schedulegm-btn-stng {
    display: flex;
    justify-content: end;
}

    .schedulegm-btn-stng .add-player-wizard-btn {
        margin: unset;
    }

/* ==== Terms & Conditions start ==== */

/* ── Main Card ── */
.tearms-and-cndition-pgmnn .main-card {
    background-color: #131D37;
    width: 97vw;
    height: 96vh;
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 93, 191, 0.35);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0px rgba(255, 255, 255, 0.1);
}

/* ── Header ── */
.tearms-and-cndition-pgmnn .card-header {
    padding: 1.5rem 3rem;
    background-color: #131D37;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 93, 191, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.tearms-and-cndition-pgmnn .branding-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tearms-and-cndition-pgmnn .logo-img {
    height: 1.5rem;
    width: auto;
    object-fit: contain;
}

.tearms-and-cndition-pgmnn .logo-text-img {
    height: 1.4rem;
    width: auto;
    object-fit: contain;
}

/* ── Progress Bar ── */
.tearms-and-cndition-pgmnn .progress-bar-container {
    width: 100%;
    height: 20px;
    background-color: rgba(11, 17, 32, 0.9);
    position: relative;
    z-index: 100;
    overflow: visible;
    border-bottom: 1px solid rgba(0, 93, 191, 0.2);
    padding: 3px 16px;
    display: flex;
    align-items: center;
}

.tearms-and-cndition-pgmnn .progress-bar-track {
    width: 100%;
    height: 6px;
    background-color: rgba(0, 93, 191, 0.12);
    border-radius: 9999px;
    position: relative;
}

.tearms-and-cndition-pgmnn .progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #005DBF, #3b82f6);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 9999px;
    transition: width 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

    .tearms-and-cndition-pgmnn .progress-bar-fill::after {
        content: '';
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%) rotate(var(--ball-rotation, 0deg));
        transform-origin: center center;
        width: 40px;
        height: 40px;
        background: url('../images/acgr-acadamy.png') no-repeat center center;
        background-size: contain;
        border-radius: 50%;
        box-shadow: 0 0 10px #005DBF, 0 0 20px rgba(59, 130, 246, 0.6);
        animation: pulse-glow 1.5s infinite;
        cursor: pointer;
        z-index: 10;
        transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px #005DBF, 0 0 10px rgba(59, 130, 246, 0.5);
    }

    50% {
        box-shadow: 0 0 15px #005DBF, 0 0 25px #3b82f6, 0 0 35px rgba(59, 130, 246, 0.8);
    }

    100% {
        box-shadow: 0 0 5px #005DBF, 0 0 10px rgba(59, 130, 246, 0.5);
    }
}

/* ── Document Viewport ── */
.tearms-and-cndition-pgmnn .document-viewport {
    padding: 3rem 4rem;
    overflow-y: auto;
    flex-grow: 1;
    background-color: #0B1120;
}

@media (max-width: 768px) {
    .tearms-and-cndition-pgmnn .document-viewport {
        padding: 2rem 1.5rem;
    }
}

.tearms-and-cndition-pgmnn .document-viewport::-webkit-scrollbar {
    width: 8px;
}

.tearms-and-cndition-pgmnn .document-viewport::-webkit-scrollbar-track {
    background: #0B1120;
}

.tearms-and-cndition-pgmnn .document-viewport::-webkit-scrollbar-thumb {
    background: #131D37;
    border: 2px solid #0B1120;
    border-radius: 9999px;
}

    .tearms-and-cndition-pgmnn .document-viewport::-webkit-scrollbar-thumb:hover {
        background: #005DBF;
    }

/* ── Typography ── */
.tearms-and-cndition-pgmnn .document-viewport h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
}

.tearms-and-cndition-pgmnn .document-viewport h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 2rem 0 0.75rem 0;
    letter-spacing: -0.01em;
}

.tearms-and-cndition-pgmnn .document-viewport p {
    margin-bottom: 1.25rem;
    color: #CBD5E1;
    font-size: 0.98rem;
    text-align: justify;
}

.tearms-and-cndition-pgmnn .document-viewport .section-title {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 1.05rem;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.tearms-and-cndition-pgmnn .document-viewport .sub-section {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

    .tearms-and-cndition-pgmnn .document-viewport .sub-section p {
        margin-bottom: 0.5rem;
    }

.tearms-and-cndition-pgmnn .document-viewport .inline-label {
    font-weight: 600;
    color: #E2E8F0;
}

/* ── Plain address blocks ── */
.tearms-and-cndition-pgmnn .address-block {
    margin: 0.75rem 0 1.25rem 0;
    padding-left: 1.5rem;
}

    .tearms-and-cndition-pgmnn .address-block .addr-title {
        font-weight: 700;
        color: #E2E8F0;
        margin-top: 0.75rem;
    }

    .tearms-and-cndition-pgmnn .address-block .addr-lines {
        font-family: monospace;
        color: #94A3B8;
        font-size: 0.92rem;
        line-height: 1.6;
        padding-left: 0.5rem;
    }

/* ── Plain notice blocks ── */
.tearms-and-cndition-pgmnn .notice-plain {
    margin: 1.25rem 0;
    padding-left: 0;
    border-left: unset;
}

    .tearms-and-cndition-pgmnn .notice-plain .notice-label {
        font-weight: 700;
        color: #FFFFFF;
        display: block;
        margin-bottom: 0.25rem;
    }

    .tearms-and-cndition-pgmnn .notice-plain p {
        margin-bottom: 0.25rem;
        font-family: monospace;
        font-size: 0.88rem;
        color: #CBD5E1;
        line-height: 1.6;
        text-align: left;
    }

.tearms-and-cndition-pgmnn .eula-header {
    text-align: center;
    border-top: 2px solid rgba(0, 93, 191, 0.2);
    padding-top: 3rem;
    margin-top: 3.5rem;
    margin-bottom: 2rem;
}

    .tearms-and-cndition-pgmnn .eula-header h3 {
        border-bottom: none;
        padding-bottom: 0;
        font-size: 1.6rem;
        letter-spacing: 0.05em;
        margin-top: 0;
    }

/* ── Controls Area ── */
.tearms-and-cndition-pgmnn .controls-area {
    padding: 2rem 3rem;
    background-color: #131D37;
    border-top: 1px solid rgba(0, 93, 191, 0.2);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .tearms-and-cndition-pgmnn .controls-area {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }
}

.tearms-and-cndition-pgmnn .toggle-wrapper {
    flex-grow: 1;
}

.tearms-and-cndition-pgmnn .toggle-container {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

.tearms-and-cndition-pgmnn .toggle-switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
}

    .tearms-and-cndition-pgmnn .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.tearms-and-cndition-pgmnn .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0B1120;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 9999px;
    border: 2px solid rgba(0, 93, 191, 0.3);
}

    .tearms-and-cndition-pgmnn .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: #FFFFFF;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

.tearms-and-cndition-pgmnn input:checked + .slider {
    background-color: #005DBF;
    border-color: #005DBF;
}

    .tearms-and-cndition-pgmnn input:checked + .slider:before {
        transform: translateX(24px);
    }

.tearms-and-cndition-pgmnn .toggle-label {
    font-size: 0.98rem;
    font-weight: 600;
    color: #CBD5E1;
    transition: color 0.2s;
}

.tearms-and-cndition-pgmnn .toggle-container:hover .toggle-label {
    color: #FFFFFF;
}

.tearms-and-cndition-pgmnn .button-group {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
}

.tearms-and-cndition-pgmnn .btn-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    border: none;
    background: transparent;
}

.tearms-and-cndition-pgmnn .btn-decline-icon {
    background-color: rgba(239, 68, 68, 0.15);
    border: 2.5px solid #EF4444;
    color: #F87171;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.25);
}

    .tearms-and-cndition-pgmnn .btn-decline-icon:hover {
        background-color: #EF4444;
        color: #FFFFFF;
        box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
        transform: translateY(-3px);
    }

.tearms-and-cndition-pgmnn .btn-accept-icon {
    background-color: rgba(0, 93, 191, 0.15);
    border: 2.5px solid #005DBF;
    color: #60A5FA;
    box-shadow: 0 0 15px rgba(0, 93, 191, 0.25);
}

    .tearms-and-cndition-pgmnn .btn-accept-icon:hover {
        background-color: #005DBF;
        color: #FFFFFF;
        box-shadow: 0 0 25px rgba(0, 93, 191, 0.6);
        transform: translateY(-3px);
    }

.tearms-and-cndition-pgmnn .btn-icon:active {
    transform: translateY(0);
}

.tearms-and-cndition-pgmnn .tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tearms-and-cndition-pgmnn .tooltip-text {
    visibility: hidden;
    width: 100px;
    background-color: #131D37;
    color: #FFFFFF;
    text-align: center;
    border-radius: 8px;
    padding: 0.5rem;
    position: absolute;
    z-index: 101;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(0, 93, 191, 0.3);
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

    .tearms-and-cndition-pgmnn .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #131D37 transparent transparent transparent;
    }

.tearms-and-cndition-pgmnn .tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tearms-and-cndition-pgmnn *:focus-visible {
    outline: 2px solid #005DBF;
    outline-offset: 3px;
}

.tearms-and-cndition-pgmnn .status-banner {
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
    transform: translateY(10px);
    display: none;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

    .tearms-and-cndition-pgmnn .status-banner.show {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .tearms-and-cndition-pgmnn .status-banner.success {
        background-color: rgba(0, 93, 191, 0.15);
        border: 1px solid #005DBF;
        color: #60A5FA;
        box-shadow: 0 0 15px rgba(0, 93, 191, 0.15);
    }

    .tearms-and-cndition-pgmnn .status-banner.danger {
        background-color: rgba(239, 68, 68, 0.15);
        border: 1px solid #EF4444;
        color: #F87171;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
    }

.tearms-and-cndition-pgmnn {
    background: radial-gradient(circle at top right, rgba(0, 93, 191, 0.12), transparent 60%), #0B1120;
    color: #E2E8F0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3vh 1.5vw;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.tooltip-wrapper .btn-icon svg {
    transform: rotate(0deg);
}

/* ==== Terms & Conditions end ==== */

/* ==== View Defensive Stat page start ==== */

.View-Defensive-Stats {
    width: 100%;
    background-color: #0B1120;
    color: #E2E8F0;
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
    min-height: 100vh;
}

    .View-Defensive-Stats .analytics-workspace-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 20px;
    }

@media (max-width: 1100px) {
    .View-Defensive-Stats .analytics-workspace-grid {
        grid-template-columns: 1fr;
    }
}

.View-Defensive-Stats .event-logger-card {
    background-color: #131D37;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.View-Defensive-Stats .logger-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    background-color: rgba(11, 17, 32, 0.4);
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.View-Defensive-Stats .toggle-control-group {
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}

.View-Defensive-Stats .toggle-label {
    font-size: 13.5px;
    font-weight: 600;
    color: white;
}

.View-Defensive-Stats .custom-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

    .View-Defensive-Stats .custom-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.View-Defensive-Stats .switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 34px;
    transition: .3s;
}

    .View-Defensive-Stats .switch-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: #94A3B8;
        border-radius: 50%;
        transition: .3s;
    }

.View-Defensive-Stats .custom-switch input:checked + .switch-slider {
    background-color: #005DBF;
}

    .View-Defensive-Stats .custom-switch input:checked + .switch-slider:before {
        transform: translateX(22px);
        background-color: #FFFFFF;
    }

.View-Defensive-Stats .filters-layout-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.View-Defensive-Stats .form-select {
    background-color: #0B1120 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 36px 10px 16px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
}

    .View-Defensive-Stats .form-select:focus {
        border-color: #005DBF !important;
        box-shadow: 0 0 0 3px rgba(0, 93, 191, 0.25) !important;
    }

.View-Defensive-Stats .premium-filter-select {
    min-width: 140px;
}

.View-Defensive-Stats .clear-filter-btn {
    background-color: #005DBF;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 93, 191, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .View-Defensive-Stats .clear-filter-btn:hover {
        background-color: #004da0;
        transform: translateY(-1px);
    }

.View-Defensive-Stats .table-responsive-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-overflow-scrolling: touch;
}

    .View-Defensive-Stats .table-responsive-container::-webkit-scrollbar {
        height: 8px;
    }

    .View-Defensive-Stats .table-responsive-container::-webkit-scrollbar-track {
        background-color: #0B1120;
        border-radius: 10px;
    }

    .View-Defensive-Stats .table-responsive-container::-webkit-scrollbar-thumb {
        background-color: #1F2E54;
        border-radius: 10px;
        border: 1.5px solid #0B1120;
    }

        .View-Defensive-Stats .table-responsive-container::-webkit-scrollbar-thumb:hover {
            background-color: #005DBF;
        }

.View-Defensive-Stats .events-logger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    white-space: nowrap;
}

    .View-Defensive-Stats .events-logger-table th,
    .View-Defensive-Stats .events-logger-table td {
        text-align: center !important;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #CBD5E1;
        vertical-align: middle;
    }

.View-Defensive-Stats .align-left-cell {
    text-align: left !important;
}

.View-Defensive-Stats .events-logger-table th {
    background-color: #314158 !important;
    color: #FFFFFF !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 13.5px;
    text-transform: none;
    user-select: none;
}

.View-Defensive-Stats .events-logger-table tbody {
    background-color: #001122 !important;
}

    .View-Defensive-Stats .events-logger-table tbody tr {
        background-color: #001122;
    }

        .View-Defensive-Stats .events-logger-table tbody tr:hover {
            background-color: rgba(0, 93, 191, 0.1) !important;
        }

        .View-Defensive-Stats .events-logger-table tbody tr.active-highlight-row {
            background-color: #005DBF !important;
        }

            .View-Defensive-Stats .events-logger-table tbody tr.active-highlight-row td {
                color: #FFFFFF !important;
                font-weight: 600;
            }

            .View-Defensive-Stats .events-logger-table tbody tr.active-highlight-row .form-select {
                background-color: rgb(255 255 255) !important;
                border-color: rgb(255 255 255) !important;
                color: #000000 !important;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
            }

.View-Defensive-Stats .table-custom-select {
    background-color: #0d1527 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #A0aec0 !important;
    padding: 8px 34px 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    outline: none;
    cursor: pointer;
    width: 100%;
    min-width: 210px;
    display: inline-block;
}

.View-Defensive-Stats .time-display-box {
    background-color: #0d1527 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #A0aec0 !important;
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    display: inline-block;
    text-align: center;
    width: 80px;
}

.View-Defensive-Stats .events-logger-table tbody tr.active-highlight-row .time-display-box {
    background-color: rgb(255 255 255) !important;
    border-color: rgb(255 255 255) !important;
    color: #000000 !important;
}

.View-Defensive-Stats .event-label-tag {
    font-weight: 600;
    font-size: 13.5px;
    color: #E2E8F0;
}

.View-Defensive-Stats .logger-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 16px;
}

    .View-Defensive-Stats .logger-footer-bar .toggle-label {
        color: #CBD5E1;
    }

.View-Defensive-Stats .save-logger-btn {
    background-color: #005DBF;
    color: #FFFFFF;
    border: none;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 93, 191, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .View-Defensive-Stats .save-logger-btn:hover {
        background-color: #004da0;
        box-shadow: 0 6px 18px rgba(0, 93, 191, 0.4);
        transform: translateY(-1.5px);
    }

.View-Defensive-Stats .video-player-card {
    background-color: #131D37;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.video-player-card .game-video-container-box-main video {
    height: 620px;
}

.filters-layout-group .player-assocation-left-panel-main .footer-actions,
.logger-footer-bar .player-assocation-left-panel-main .footer-actions {
    padding-top: 0px;
    border-top: unset;
}

/* ==== View Defensive Stat page end ==== */
/* ==== Terms & Conditions end ==== */

/* ==== Defensive Stat page start ==== */

.schedulegm-btn-stng {
    display: flex;
    justify-content: end;
}

    .schedulegm-btn-stng .add-player-wizard-btn {
        margin: unset;
    }

/* ==== Manage Goalie Section end ==== */

.hdrmn-dif-pgmn {
    background-color: transparent;
    margin-bottom: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #1e293b;
}

    .hdrmn-dif-pgmn .header-tab-penal-tab-box-main {
        width: fit-content;
    }

.diff-tbl-data-cngs {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

    .diff-tbl-data-cngs .game-clips-dpdn {
        margin-left: unset;
    }

        .diff-tbl-data-cngs .game-clips-dpdn .game-clips-dpdn-header {
            background: #0B1120 !important;
            border: 1px solid #ffffff42 !important;
            border-radius: 0.8rem !important;
            padding: 0.75rem 1rem !important;
            color: white !important;
        }

        .diff-tbl-data-cngs .game-clips-dpdn .game-clips-dpdn-list {
            background: #0B1120 !important;
            border: 1px solid #ffffff42 !important;
        }

            .diff-tbl-data-cngs .game-clips-dpdn .game-clips-dpdn-list li {
                color: white !important;
                font-family: 'Inter', sans-serif;
                background-color: #0B1120;
                color: #E2E8F0;
                margin: 0;
                padding: 24px;
                box-sizing: border-box;
                min-height: 100vh;
            }

.defensive-stats-pg-mn-cnctiner * {
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* Full Width Horizontal Pitch Card Styling (At the top of the page) */
.defensive-stats-pg-mn-cnctiner .full-width-field-card {
    background-color: #131D37;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    margin-bottom: 24px;
    width: 100%;
}

/* Horizontal soccer pitch design container (#0c4421) as per Container.png deep colors */
.defensive-stats-pg-mn-cnctiner .pitch-container-horizontal {
    background: radial-gradient(circle, #0a421d 40%, #052410 100%);
    border-radius: 16px;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 2.1 / 1;
    /* Horizontal ratio */
    position: relative;
    overflow: hidden;
    /* Goal nets are wrapped nicely inside the card */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.75), 0 10px 30px rgba(0, 0, 0, 0.5);
    margin: 20px;
}

.diff-tbl-data-cngs .game-clips-dpdn .game-clips-dpdn-list li:hover {
    background-color: #141b2b !important;
    color: white !important;
}
/* Inner boundary lines wrapper to make space for outer green margin & goals as per Container.png */
.defensive-stats-pg-mn-cnctiner .pitch-lines-wrapper {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 8%;
    right: 8%;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.diff-tbl-data-cngs .game-clips-dpdn .game-clips-dpdn-list li.selected {
    background-color: #005DBF !important;
    color: white !important;
}
/* Horizontal Pitch Markings inside the wrapper */
.defensive-stats-pg-mn-cnctiner .pitch-half-line-horizontal {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.4);
    transform: translateX(-50%);
}

.cradit-section-box-main {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

    .cradit-section-box-main h5 {
        color: white;
        font-size: 18px;
    }

.diff-tbl-data-btn-adn-prchas {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 18px;
}

.defensive-stats-pg-mn-cnctiner .pitch-center-circle-horizontal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 110px;
    height: 110px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.defensive-stats-pg-mn-cnctiner .pitch-center-dot-horizontal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Horizontal Penalty Boxes inside wrapper */
.defensive-stats-pg-mn-cnctiner .pitch-penalty-left-horizontal {
    position: absolute;
    left: 0;
    top: 15%;
    width: 15%;
    height: 70%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-left: none;
}

.defensive-stats-pg-mn-cnctiner .pitch-goal-left-horizontal {
    position: absolute;
    left: 0;
    top: 32%;
    width: 5%;
    height: 36%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-left: none;
}

.defensive-stats-pg-mn-cnctiner .pitch-penalty-right-horizontal {
    position: absolute;
    right: 0;
    top: 15%;
    width: 15%;
    height: 70%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-right: none;
}

.defensive-stats-pg-mn-cnctiner .pitch-goal-right-horizontal {
    position: absolute;
    right: 0;
    top: 32%;
    width: 5%;
    height: 36%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-right: none;
}

/* Proper penalty arcs (Half Round Curves) on Left and Right sides */
.defensive-stats-pg-mn-cnctiner .pitch-arc-left-horizontal {
    position: absolute;
    left: 15%;
    /* Aligns perfectly on left penalty box line */
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 70px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 35px 35px 0;
    border-left: none;
}

.defensive-stats-pg-mn-cnctiner .pitch-arc-right-horizontal {
    position: absolute;
    right: 15%;
    /* Aligns perfectly on right penalty box line */
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 70px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 35px 0 0 35px;
    border-right: none;
}

/* Choras Goal Net boxes on Left & Right with solid green background */
.defensive-stats-pg-mn-cnctiner .pitch-goal-net-left-horizontal {
    position: absolute;
    left: -30px;
    /* Aligns with inner white boundary into the margin */
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 72px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-right: none;
    /* background-color: #052410 !important; */
    /* Solid green matching the dark edge */
    border-radius: 4px 0 0 4px;
}

.defensive-stats-pg-mn-cnctiner .pitch-goal-net-right-horizontal {
    position: absolute;
    right: -30px;
    /* Aligns with inner white boundary into the margin */
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 72px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-left: none;
    /* background-color: #052410 !important; */
    /* Solid green matching the dark edge */
    border-radius: 0 4px 4px 0;
}

/* Clean Plain Text for Ground Zones (Only white numbers centered horizontally inside wrapper) */
.defensive-stats-pg-mn-cnctiner .field-number-badge-horizontal {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 38px;
    font-weight: 800;
    color: #FFFFFF !important;
    /* PURE WHITE */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    z-index: 10;
    pointer-events: none;
    text-align: center;
}

.defensive-stats-pg-mn-cnctiner .left-number-horizontal {
    left: 20%;
    /* Centers beautifully over left arc */
}

.defensive-stats-pg-mn-cnctiner .middle-number-horizontal {
    left: 50%;
    /* Center circle alignment */
}

.defensive-stats-pg-mn-cnctiner .right-number-horizontal {
    left: 80%;
    /* Centers beautifully over right arc */
}

/* Layout below the horizontal soccer field */
.defensive-stats-pg-mn-cnctiner .bottom-tables-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
}

/* Card Dropdowns Row Inside the Component */
.defensive-stats-pg-mn-cnctiner .card-dropdowns-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

/* Premium Custom Searchable Dropdown Styling */
.defensive-stats-pg-mn-cnctiner .custom-dropdown-container {
    position: relative;
    flex: 1;
    width: 100%;
}

.defensive-stats-pg-mn-cnctiner .custom-dropdown-trigger {
    background-color: #0B1120;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    user-select: none;
}

    .defensive-stats-pg-mn-cnctiner .custom-dropdown-trigger:hover {
        border-color: #005DBF;
    }

    /* Arrow animation with rotation transition when active */
    .defensive-stats-pg-mn-cnctiner .custom-dropdown-trigger i {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

.defensive-stats-pg-mn-cnctiner .custom-dropdown-container.active .custom-dropdown-trigger i {
    transform: rotate(180deg);
}

.defensive-stats-pg-mn-cnctiner .custom-dropdown-menu {
    position: absolute;
    top: 105%;
    left: 0;
    right: 0;
    background-color: #131D37;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
    overflow: hidden;
}

    .defensive-stats-pg-mn-cnctiner .custom-dropdown-menu.active {
        display: block;
        animation: dropdownFadeIn 0.2s ease-out;
    }

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.defensive-stats-pg-mn-cnctiner .dropdown-search-wrapper {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

    .defensive-stats-pg-mn-cnctiner .dropdown-search-wrapper i {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #64748B;
        font-size: 12px;
    }

.defensive-stats-pg-mn-cnctiner .dropdown-search-input {
    width: 100%;
    background-color: #0B1120;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding: 8px 12px 8px 32px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

    .defensive-stats-pg-mn-cnctiner .dropdown-search-input:focus {
        border-color: #005DBF;
    }

.defensive-stats-pg-mn-cnctiner .dropdown-options-list {
    max-height: 240px;
    overflow-y: auto;
}

    /* Custom Scrollbar for Dropdown List */
    .defensive-stats-pg-mn-cnctiner .dropdown-options-list::-webkit-scrollbar {
        width: 6px;
    }

    .defensive-stats-pg-mn-cnctiner .dropdown-options-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.01);
    }

    .defensive-stats-pg-mn-cnctiner .dropdown-options-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

.defensive-stats-pg-mn-cnctiner .dropdown-option-item {
    padding: 10px 18px;
    font-size: 13.5px;
    color: #CBD5E1;
    cursor: pointer;
    text-align: left;
}

    .defensive-stats-pg-mn-cnctiner .dropdown-option-item:hover {
        background-color: #005DBF;
        color: #FFFFFF;
    }

    .defensive-stats-pg-mn-cnctiner .dropdown-option-item.selected {
        background-color: rgba(0, 93, 191, 0.2);
        color: #38BDF8;
        font-weight: 600;
    }

/* Action Summaries Table Container Card */
.defensive-stats-pg-mn-cnctiner .stat-details-card {
    background-color: #131D37;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: visible;
    /* Dropdown display block prevent cover */
    width: 100%;
    min-width: 0;
    /* Prevents overflow from children */
}

.diff-tbl-data-btn-adn-prchas .overlay-tltp .custom-tooltip {
    left: unset;
    right: 0px;
    transform: unset;
    padding: 16px 24px;
}
/* Table Responisve Wrapper with styled Custom Scrollbars */
.defensive-stats-pg-mn-cnctiner .table-wrapper, .defensive-stats-pg-mn-cnctiner .player-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll support for iOS */
}

    /* Premium scrollbar styling for both tables */
    .defensive-stats-pg-mn-cnctiner .table-wrapper::-webkit-scrollbar,
    .defensive-stats-pg-mn-cnctiner .player-table-container::-webkit-scrollbar {
        height: 8px;
    }

    .defensive-stats-pg-mn-cnctiner .table-wrapper::-webkit-scrollbar-track,
    .defensive-stats-pg-mn-cnctiner .player-table-container::-webkit-scrollbar-track {
        background-color: #0B1120;
        border-radius: 10px;
    }

    .defensive-stats-pg-mn-cnctiner .table-wrapper::-webkit-scrollbar-thumb,
    .defensive-stats-pg-mn-cnctiner .player-table-container::-webkit-scrollbar-thumb {
        background-color: #1F2E54;
        border-radius: 10px;
        border: 1.5px solid #0B1120;
    }

        .defensive-stats-pg-mn-cnctiner .table-wrapper::-webkit-scrollbar-thumb:hover,
        .defensive-stats-pg-mn-cnctiner .player-table-container::-webkit-scrollbar-thumb:hover {
            background-color: #005DBF;
        }

.defensive-stats-pg-mn-cnctiner .premium-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

    /* thead background color set to #314158 and text aligned center for columns 2, 3, 4 */
    .defensive-stats-pg-mn-cnctiner .premium-table th,
    .defensive-stats-pg-mn-cnctiner .players-data-table th {
        background-color: #314158 !important;
        color: #FFFFFF !important;
        font-weight: 600 !important;
        padding: 14px 16px !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
        letter-spacing: 0.5px !important;
        cursor: default !important;
        font-size: 14px !important;
        text-transform: none !important;
        /* No uppercase transform */
        user-select: none !important;
    }

        /* Defensive (L) Middle (C) Attacking (R) columns center text alignment */
        .defensive-stats-pg-mn-cnctiner .premium-table th:nth-child(2),
        .defensive-stats-pg-mn-cnctiner .premium-table th:nth-child(3),
        .defensive-stats-pg-mn-cnctiner .premium-table th:nth-child(4),
        .defensive-stats-pg-mn-cnctiner .premium-table td:nth-child(2),
        .defensive-stats-pg-mn-cnctiner .premium-table td:nth-child(3),
        .defensive-stats-pg-mn-cnctiner .premium-table td:nth-child(4) {
            text-align: center !important;
        }

    /* Both tables tbody background color set to #001122 */
    .defensive-stats-pg-mn-cnctiner .premium-table tbody,
    .defensive-stats-pg-mn-cnctiner .players-data-table tbody {
        background-color: #001122 !important;
    }

        .defensive-stats-pg-mn-cnctiner .premium-table tbody tr,
        .defensive-stats-pg-mn-cnctiner .players-data-table tbody tr {
            background-color: #001122 !important;
            /* Solid background for all rows */
        }

    .defensive-stats-pg-mn-cnctiner .premium-table td {
        padding: 11px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #CBD5E1;
    }

    .defensive-stats-pg-mn-cnctiner .premium-table tbody tr:hover,
    .defensive-stats-pg-mn-cnctiner .players-data-table tbody tr:hover {
        background-color: rgba(0, 93, 191, 0.12) !important;
        color: #FFFFFF;
    }

/* Middle Control Primary Button Container */
.defensive-stats-pg-mn-cnctiner .action-bar-container {
    display: flex;
    justify-content: center;
    margin: 24px 0;
}

.defensive-stats-pg-mn-cnctiner .primary-btn {
    background-color: #005DBF;
    color: #FFFFFF;
    border: none;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 93, 191, 0.3);
    white-space: nowrap;
}

    .defensive-stats-pg-mn-cnctiner .primary-btn:hover {
        background-color: #004da0;
        box-shadow: 0 6px 20px rgba(0, 93, 191, 0.4);
        transform: translateY(-2px);
    }

/* Squad Statistics Section (No titles, No search bar) */
.defensive-stats-pg-mn-cnctiner .player-stats-section {
    background-color: #131D37;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 100%;
    min-width: 0;
    /* Prevents layout blowout */
}

.defensive-stats-pg-mn-cnctiner .players-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    white-space: nowrap;
}

    /* Table header styling & Center text alignment for all headers and columns */
    .defensive-stats-pg-mn-cnctiner .players-data-table th,
    .defensive-stats-pg-mn-cnctiner .players-data-table td {
        text-align: center !important;
        /* Unified center alignment as requested */
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: #CBD5E1;
    }

/* STICKY-COL removed absolute constraints to make scrolling completely unified */
.defensive-stats-pg-mn-cnctiner .sticky-col {
    font-weight: 600;
    color: #FFFFFF;
}

/* Bottom summation Row alignment */
.defensive-stats-pg-mn-cnctiner .total-row {
    background-color: #1E293B !important;
    font-weight: 700;
    border-top: 2px solid rgba(255, 255, 255, 0.15);
}

    .defensive-stats-pg-mn-cnctiner .total-row td {
        color: #FFFFFF !important;
        font-size: 14px;
        border-bottom: none;
        border-radius: 8px;
        width: 100%;
    }

.defensive-stats-pg-mn-cnctiner .text-accent-blue {
    color: #38BDF8;
    font-weight: 600;
}

.defensive-stats-pg-mn-cnctiner .text-accent-green {
    color: #4ADE80;
    font-weight: 600;
}

.premium-table tbody tr.active-stat-row td {
    background-color: #005DBF !important;
    color: #fff !important;
}

/* ==== Defensive Stat page end ==== */

/* ==== player assocation page start ==== */

.player-assocation-main-container {
    width: 100%;
    background-color: #0B1120;
}

.player-assocation-page-header-main {
    width: 100%;
    margin: auto;
    background-color: #131D37;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.player-assocation-team-name {
    width: fit-content;
    padding: 16px;
    background-color: #0B1120;
    border-radius: 10px;
    border: 1px solid #1E293B;
}

    .player-assocation-team-name h4 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
        font-size: 20px;
        font-family: 'Inter 18pt SemiBolt';
    }

        .player-assocation-team-name h4 img {
            width: 28px;
            height: 28px;
            border-radius: 100px;
        }

.player-assocation-date-and-location-box {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.player-assocation-date-box {
    width: fit-content;
    padding: 14px;
    border-radius: 12px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-asstn-date-icn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #131D37;
    border-radius: 8px;
    color: white;
    font-size: 20px;
}

.player-assocation-date-box h6 {
    color: white;
    font-size: 20px;
    font-family: 'Inter 18pt SemiBolt';
}

.player-assocation-page-main-body {
    width: 100%;
    padding: 24px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.player-assocation-left-panel-main {
    display: flex;
    justify-content: center;
    width: calc(50% - 12px);
}

    /* Main Container Card */
    .player-assocation-left-panel-main .panel-card {
        background-color: #131D37;
        width: 100%;
        height: fit-content;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .player-assocation-left-panel-main .panel-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .player-assocation-left-panel-main .logo-container {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        overflow: hidden;
        position: relative;
    }

    .player-assocation-left-panel-main .logo-svg {
        width: 100%;
        height: 100%;
    }

    .player-assocation-left-panel-main .header-info {
        display: flex;
        flex-direction: column;
    }

    .player-assocation-left-panel-main .header-title {
        color: #F1F5F9;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        letter-spacing: 0.3px;
    }

    .player-assocation-left-panel-main .header-subtitle {
        color: #94A3B8;
        font-size: 12px;
        margin-top: 2px;
        line-height: 16px;
    }

    .player-assocation-left-panel-main .controls-box {
        background-color: #0B1120;
        border-radius: 10px;
        padding: 16px 20px;
        margin-bottom: 16px;
        border: 1px solid rgba(255, 255, 255, 0.03);
    }

    .player-assocation-left-panel-main .control-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

        .player-assocation-left-panel-main .control-row:last-child {
            border-bottom: none;
            padding-bottom: 4px;
        }

        .player-assocation-left-panel-main .control-row:first-child {
            padding-top: 4px;
        }

    .player-assocation-left-panel-main .control-label {
        color: #A0aec0;
        font-size: 14px;
        font-weight: 500;
    }

    .player-assocation-left-panel-main .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 22px;
    }

        .player-assocation-left-panel-main .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .player-assocation-left-panel-main .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #2D3748;
        transition: .25s ease;
        border-radius: 34px;
    }

        .player-assocation-left-panel-main .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .25s ease;
            border-radius: 50%;
        }

    .player-assocation-left-panel-main input:checked + .slider {
        background-color: #005DBF;
    }

        .player-assocation-left-panel-main input:checked + .slider:before {
            transform: translateX(22px);
        }

    .player-assocation-left-panel-main .player-filter-wrapper {
        margin-bottom: 16px;
    }

    .player-assocation-left-panel-main .custom-select {
        width: 100%;
        background-color: #0B1120;
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        outline: none;
        position: relative;
        background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 18px;
    }

        .player-assocation-left-panel-main .custom-select:focus {
            border-color: #005DBF;
        }

    .player-assocation-left-panel-main .timeline-table {
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        background-color: #0B1120;
        height: 426px;
        /* Fixed height for 7 rows, scrollbar only shows if rows exceed this */
        overflow-y: auto;
        position: relative;
        margin-bottom: 24px;
    }

        /* Custom scrollbar for the table container */
        .player-assocation-left-panel-main .timeline-table::-webkit-scrollbar {
            width: 6px;
        }

        .player-assocation-left-panel-main .timeline-table::-webkit-scrollbar-track {
            background: #0B1120;
        }

        .player-assocation-left-panel-main .timeline-table::-webkit-scrollbar-thumb {
            background: #1d2b4f;
            border-radius: 4px;
        }

    /* Sticky Table Header styling */
    .player-assocation-left-panel-main .table-header {
        display: grid;
        grid-template-columns: 50px 1fr 80px;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        position: sticky;
        top: 0;
        background-color: #0B1120;
        /* Solid color matches inside box bg to hide scrolled rows */
        z-index: 10;
    }

        .player-assocation-left-panel-main .table-header span {
            color: #6A7B95;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .player-assocation-left-panel-main .table-header .col-center {
            text-align: center;
        }

    .player-assocation-left-panel-main .table-body {
        display: flex;
        flex-direction: column;
    }

    .player-assocation-left-panel-main .table-row {
        display: grid;
        grid-template-columns: 50px 1fr 80px;
        align-items: center;
        padding: 8px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        transition: background-color 0.2s ease;
    }

        .player-assocation-left-panel-main .table-row:last-child {
            border-bottom: none;
        }

        .player-assocation-left-panel-main .table-row:hover {
            background-color: rgba(255, 255, 255, 0.01);
        }

    .player-assocation-left-panel-main .icon-box {
        width: 32px;
        height: 32px;
        background-color: #0d1527;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 13px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .player-assocation-left-panel-main .player-select-container {
        padding: 0 8px;
    }

    .player-assocation-left-panel-main .row-select {
        width: 100%;
        background-color: #0d1527;
        color: #A0aec0;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg fill='%23A0aec0' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
        padding-right: 28px;
        transition: all 0.2s ease;
    }

        .player-assocation-left-panel-main .row-select:focus {
            border-color: #005DBF;
            color: #ffffff;
        }

    .player-assocation-left-panel-main .time-display {
        background-color: #0d1527;
        color: #A0aec0;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 8px 10px;
        font-size: 13px;
        font-family: monospace;
        text-align: center;
        width: 100%;
        outline: none;
        transition: all 0.2s ease;
    }

        .player-assocation-left-panel-main .time-display:focus {
            border-color: #005DBF;
            color: #ffffff;
        }

    .player-assocation-left-panel-main .footer-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .player-assocation-left-panel-main .action-btn {
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        outline: none;
    }

    .player-assocation-left-panel-main .btn-blue {
        background-color: #005DBF;
    }

        .player-assocation-left-panel-main .btn-blue:hover {
            background-color: #004da3;
            transform: translateY(-2px);
        }

        .player-assocation-left-panel-main .btn-blue:active {
            transform: translateY(0);
        }

    .player-assocation-left-panel-main .btn-red {
        background-color: #EF4444;
    }

        .player-assocation-left-panel-main .btn-red:hover {
            background-color: #DC2626;
            transform: translateY(-2px);
        }

        .player-assocation-left-panel-main .btn-red:active {
            transform: translateY(0);
        }

    /* Custom Tooltip configuration */
    .player-assocation-left-panel-main .action-btn[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 58px;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        background-color: #000000;
        color: #ffffff;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        z-index: 100;
    }

    .player-assocation-left-panel-main .action-btn[data-tooltip]::before {
        content: '';
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        border-width: 5px 6px 0 6px;
        border-style: solid;
        border-color: #000000 transparent transparent transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100;
    }

    .player-assocation-left-panel-main .action-btn[data-tooltip]:hover::after,
    .player-assocation-left-panel-main .action-btn[data-tooltip]:hover::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

.player-assocation-right-panel-main {
    width: calc(50% - 12px);
}

    .player-assocation-right-panel-main .game-video-container-box-main video {
        height: 460px;
        border-radius: 12px;
    }

    .player-assocation-right-panel-main .player-assocation-left-panel-main {
        display: unset;
        justify-content: unset;
        align-items: unset;
        width: unset;
    }

        .player-assocation-right-panel-main .player-assocation-left-panel-main .footer-actions {
            border-top: unset;
        }

.team-lineup-match-players-main-container {
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    background-color: #131D37;
}

.team-lineup-head-contnr {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 16px;
}

.team-lineup-ttl-and-ylw-dots {
    width: fit-content;
    display: flex;
    gap: 8px;
    align-items: center;
}

    .team-lineup-ttl-and-ylw-dots span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10px;
        height: 10px;
        background-color: #FACC15;
        border-radius: 50px;
    }

    .team-lineup-ttl-and-ylw-dots h5 {
        color: #CBD5E1;
        font-size: 14px;
        line-height: 20px;
        font-family: 'Inter 18pt Bold';
    }

.player-assocation-left-panel-main.btn-mn-box-mn-tltps {
    display: unset;
    justify-content: unset;
    align-items: unset;
    width: unset;
}

.team-lineup-match-players-main-container .player-assocation-left-panel-main .action-btn[data-tooltip]::after {
    left: 20%;
}

.team-lineup-match-players-main-container .footer-actions {
    padding-top: 0px;
}

.team-match-player-list-main {
    width: 100%;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    height: 228px;
    overflow: auto;
    padding-right: 6px;
}

.team-match-player-card-mn {
    width: calc(25% - 9px);
    padding: 12px;
    border-radius: 8px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-card-player-img {
    width: 40px;
    min-width: 40px;
    height: 40px;
}

    .team-card-player-img img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }

.team-card-player-name-and-position {
    width: fit-content;
}

    .team-card-player-name-and-position h4 {
        color: #FFFFFF;
        line-height: 16px;
        font-family: 'Inter 18pt Bold';
        font-size: 12px;
    }

.team-match-player-card-mn.goalKeeper-card .team-card-player-name-and-position h5 {
    color: #F87171;
}

.team-card-player-name-and-position h5 {
    color: #EAB308;
    line-height: 14px;
    font-family: 'Inter 18pt Bold';
    font-size: 10px;
}

.team-match-player-list-main::-webkit-scrollbar {
    width: 6px;
}

.team-match-player-list-main::-webkit-scrollbar-track {
    background: #0B1120;
}

.team-match-player-list-main::-webkit-scrollbar-thumb {
    background: #1d2b4f;
    border-radius: 4px;
}

.player-assocation-right-panel-main .video-markers-container {
    bottom: 107px;
}

.view-lineup-popup-main-container,
.goal-stat-popup-main-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
}

.view-lineup-popup-inside-main-tbl {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 938px;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
}

    .view-lineup-popup-inside-main-tbl .possession-summary-tbl-container table {
        min-width: unset;
    }

    .view-lineup-popup-inside-main-tbl .possession-summary-heading-box h5 {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.jersey-itp-desgn {
    background-color: #0B1120;
    border: 1px solid rgba(255, 255, 255, 0.2588);
    border-radius: 8px;
    text-align: center;
    padding: 4px 10px;
    color: white;
    width: 124px;
}

.action-btn-ssnp {
    width: fit-content;
    display: flex;
    gap: 12px;
    margin: auto;
}

    .action-btn-ssnp .inactive-cmn {
        padding: 4px 8px;
        min-width: 55px;
        border: 1px solid #ACB1B8;
        border-radius: 100px;
        color: #ACB1B8;
        background-color: transparent;
        font-size: 12px;
        font-family: 'Inter 18pt Medium';
    }

.inactive-cmn.green.active {
    background-color: #3CB660;
    border-color: #3CB660;
    color: white;
}

.inactive-cmn.blue.active {
    background-color: #4283F2;
    border-color: #4283F2;
    color: white;
}

.inactive-cmn.red.active {
    background-color: #EB5757;
    border-color: #EB5757;
    color: white;
}

#ViewLineupPopupMain,
#SelectStatisticPopupMain {
    display: none;
}

.goal-stat-popup-inside-main {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 90%;
    max-width: 600px;
    height: fit-content;
    animation: zoomIn 0.3s ease forwards;
    background-color: #131D37;
    overflow: visible;
    border-radius: 10px;
}

    .goal-stat-popup-inside-main .possession-summary-heading-box h5 {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .goal-stat-popup-inside-main .possession-summary-heading-box h5 img {
            width: 24px;
            height: 24px;
            border-radius: 100px;
        }

.change-popup-main-btn {
    font-size: 14px;
    padding: 6px 16px;
    font-family: 'Inter 18pt Medium';
    border-radius: 8px;
    color: white;
    background-color: #005DBF;
    border: 1px solid #005DBF;
    margin-left: auto;
    box-shadow: 0px 0px 2px 1px transparent;
}

    .change-popup-main-btn:hover {
        box-shadow: 0px 0px 2px 1px white;
    }

.goal-stat-popup-inside-main .possession-summary-heading-box {
    border-bottom: 1px solid #002D5B;
}

.goal-stat-popup-body-main {
    padding: 20px 24px;
    width: 100%;
}

.goal-stat-popup-mins-and-secs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

    .goal-stat-popup-mins-and-secs input {
        font-size: 14px;
        font-family: 'Inter 18pt Medium';
        line-height: 24px;
        padding: 8px 10px;
        background-color: #0B1120;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2588);
        width: 136px;
        color: white;
    }

    .goal-stat-popup-mins-and-secs span {
        color: white;
        font-size: 22px;
        font-family: 'Inter 18pt Medium';
    }

.goal-stat-popup-select-opt-main {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.drk-slsct-opt-mn {
    width: 100%;
}

    .drk-slsct-opt-mn label {
        width: 100%;
        color: white;
        font-size: 12px;
        font-family: 'Inter 18pt SemiBolt';
        margin-bottom: 8px;
    }

    .drk-slsct-opt-mn select {
        box-shadow: unset;
        font-size: 12px;
        color: white;
        padding: 12px;
        background-color: #0B1120;
        border: 1px solid #1E293B;
        border-radius: 8px;
        background-image: url(../images/down-arrow.png);
        background-size: 16px 16px;
    }

    .drk-slsct-opt-mn input {
        font-size: 12px;
        color: white;
        padding: 12px;
        background-color: #0B1120;
        border: 1px solid #1E293B;
        border-radius: 8px;
        width: 100%;
    }

    .drk-slsct-opt-mn select:focus {
        box-shadow: unset;
        border-color: #1E293B;
    }

.goal-stat-popup-select-opt-main .drk-slsct-opt-mn {
    width: calc(50% - 8px);
}

.goal-stat-popup-inside-main .player-assocation-left-panel-main.btn-mn-box-mn-tltps .footer-actions {
    padding: 16px 24px;
    border-top: 1px solid #002D5B;
}

#GoalStatInsideOne {
    display: block;
}

#GoalStatInsideTwo {
    display: none;
}

#GoalStatPopupMain,
#TeamStatPopupMain,
#OfficialStoppagePopupMain,
#ReassignPlayerPopupMain,
#AddTemporaryPopupMain,
#PlayerAssocationDeletePopup,
#EditPlayerAssocationInsideTwo,
#EditPlayerAssocationPopupMain,
#TeamStatInsideTwo {
    display: none;
}

    #PlayerAssocationDeletePopup .player-assocation-left-panel-main.btn-mn-box-mn-tltps .footer-actions {
        padding-top: 4px;
        justify-content: center;
        border-top: unset;
    }

.full-screen-video-main-container {
    width: 100%;
    height: 100vh;
    background-color: #0B1120;
    padding: 20px;
}

    .full-screen-video-main-container video {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

/* ==== player assocation page end ==== */

.manage-defensive-stat-table {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Thin scrollbar */
    .manage-defensive-stat-table::-webkit-scrollbar {
        width: 10px;
    }

    .manage-defensive-stat-table::-webkit-scrollbar-track {
        background: transparent;
    }

    .manage-defensive-stat-table::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    }

        .manage-defensive-stat-table::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.4);
        }

    /* Stick the thead so it doesn't scroll away */
    .manage-defensive-stat-table .events-logger-table thead tr th {
        position: sticky;
        top: 0;
        z-index: 2;
    }


/* ==== Game Details Page start ==== */

.game-details-page-main-container {
    width: 100%;
    margin: auto;
}

.game-details-page-header-top {
    width: 100%;
    margin: auto;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.game-vs-game-details-header-section {
    width: fit-content;
    height: fit-content;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 16px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    border-radius: 10px;
    color: white;
    font-size: 18px;
    font-family: 'Inter 18pt Regular';
}

    .game-vs-game-details-header-section img {
        width: 22px;
        min-width: 22px;
        height: 22px;
        border-radius: 100px;
    }

.game-details-page-header-top .manage-id-user-header {
    margin-bottom: 0px;
}

.game-vs-game-page-main-body-container {
    width: 100%;
    height: 100%;
    padding: 24px;
}

.game-details-pg-acdn {
    width: 100%;
}

.game-details-pg-acdn-item {
    border: 1px solid rgba(30, 41, 59, 0.8);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 18px;
    background: #131D37;
}

.game-details-pg-acdn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 24px;
    background-color: #0F172A;
    user-select: none;
}

    .game-details-pg-acdn-header h3 {
        margin: 0;
        font-size: 24px;
        font-family: 'Inter 18pt Bold';
        color: white;
    }

    .game-details-pg-acdn-header i {
        font-size: 18px;
        transition: .35s ease;
        color: white;
    }

.game-details-pg-acdn-body {
    display: block;
    transition: height .35s ease;
}

.game-details-pg-acdn-content {
    padding: 20px 24px 20px 24px;
    line-height: 1.7;
    color: #555;
}

.game-details-pg-acdn-item.active .game-details-pg-acdn-header i {
    transform: rotate(180deg);
}

.game-details-page-game-details-acdn-mn {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

    .game-details-page-game-details-acdn-mn .drk-slsct-opt-mn,
    .game-details-page-game-details-acdn-mn .drk-md-tgl-on-of-box {
        width: calc(50% - 8px);
    }

.drk-slsct-opt-mn label span {
    color: red;
}

.drk-md-tgl-on-of-box {
    font-size: 12px;
    color: white;
    padding: 12px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

    .drk-md-tgl-on-of-box h6 {
        color: #B2BCCA;
        font-size: 12px;
        line-height: 16px;
        font-family: 'Inter 18pt SemiBolt';
    }

    .drk-md-tgl-on-of-box .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 22px;
    }

        .drk-md-tgl-on-of-box .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .drk-md-tgl-on-of-box .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #2D3748;
        transition: .25s ease;
        border-radius: 34px;
    }

        .drk-md-tgl-on-of-box .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .25s ease;
            border-radius: 50%;
        }

    .drk-md-tgl-on-of-box input:checked + .slider {
        background-color: #005DBF;
    }

        .drk-md-tgl-on-of-box input:checked + .slider:before {
            transform: translateX(22px);
        }

.game-details-pg-acdn-body .player-assocation-left-panel-main.btn-mn-box-mn-tltps .footer-actions {
    padding: 12px 24px;
}

.big-tt-text[data-tooltip]::after {
    left: unset !important;
    right: 0px;
    transform: unset !important;
}

.game-details-pg-acdn-content .manage-goalie-container .card-body {
    padding: 0px;
}

.game-details-pg-acdn-content .manage-goalie-container .manager-card {
    background-color: unset;
    border-radius: unset;
    border: unset;
    box-shadow: unset;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.game-details-pg-acdn-content .manage-goalie-container #toast-container {
    width: 95%;
    max-width: fit-content;
}

.set-lnp-tl {
    padding: 0px;
}

    .set-lnp-tl .possession-summary-tbl-container {
        background-color: #131D37;
    }

    .set-lnp-tl .possession-summary-card-main {
        border: unset;
        border-radius: unset;
    }

    .set-lnp-tl .possession-summary-tbl-container td {
        border-bottom: 1px solid #9496A1;
    }

    .set-lnp-tl .possession-summary-tbl-container table thead tr th:nth-child(1),
    .set-lnp-tl .possession-summary-tbl-container table tbody tr td:nth-child(1) {
        text-align: left;
        padding: 15px 24px;
    }

.formation-camera-angel-switch.toggle-demo-wrapper {
    width: 100%;
}

.formation-camera-angel-switch.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    font-size: 12px;
    color: white;
    padding: 11px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    border-radius: 8px;
}

.formation-camera-angel-switch.toggle-text {
    font-size: 14px;
    font-family: 'Inter 18pt SemiBolt';
    line-height: 16px;
    color: #FFFFFF;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
}

.formation-camera-angel-switch.toggle-container[data-state="left"] #leftText {
    color: #005DBF;
}

.formation-camera-angel-switch.toggle-container[data-state="right"] #rightText {
    color: #005DBF;
}

.formation-camera-angel-switch.toggle-container[data-state="center"] .toggle-text {
    color: #FFFFFF;
}

.formation-camera-angel-switch.toggle-switch-wrapper {
    position: relative;
    width: 52px;
    height: 20px;
    margin: 0 16px;
    flex-shrink: 0;
}

.formation-camera-angel-switch.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: background-color 0.3s ease;
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.formation-camera-angel-switch.toggle-circle {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    top: 2px;
    background-color: #FFFFFF;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.formation-camera-angel-switch.toggle-container[data-state="left"] .toggle-slider {
    background-color: #005DBF;
}

.formation-camera-angel-switch.toggle-container[data-state="left"] .toggle-circle {
    left: 2px;
}

.formation-camera-angel-switch.toggle-container[data-state="right"] .toggle-slider {
    background-color: #005DBF;
}

.formation-camera-angel-switch.toggle-container[data-state="right"] .toggle-circle {
    left: 34px;
}

.formation-camera-angel-switch.toggle-container[data-state="center"] .toggle-slider {
    background-color: #334155;
}

.formation-camera-angel-switch.toggle-container[data-state="center"] .toggle-circle {
    left: 18px;
}

.formation-tb-mncontaienr .player-assocation-left-panel-main .footer-actions {
    padding: 12px 0px !important;
    padding-bottom: 0px !important;
    margin-top: 12px;
}

.game-details-player-drag-an-drop-container-main {
    width: 100%;
    margin: auto;
    margin-top: 20px;
    display: none;
}

    .game-details-player-drag-an-drop-container-main .scheduled-game-drag-step-box-main .player-drag-reorder-section {
        max-width: 100%;
        background-color: #0B1120;
        padding: 20px;
        border-radius: 16px;
        border: 1px solid rgba(0, 93, 191, 0.5);
    }

    .game-details-player-drag-an-drop-container-main .scheduled-game-drag-step-box-main .player-source-pill {
        border-radius: 100px;
    }

.source-and-event-field-main {
    width: 100%;
    background-color: #131D37;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.8);
}

    .source-and-event-field-main .game-details-page-game-details-acdn-mn {
        margin-bottom: 20px;
    }

.view-source-and-event-data {
    width: fit-content;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin: auto;
}

.view-source-and-event-data-card {
    width: fit-content;
    height: fit-content;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .view-source-and-event-data-card h6 {
        font-size: 14px;
        color: white;
        font-family: 'Inter 18pt SemiBolt';
    }

    .view-source-and-event-data-card p {
        font-size: 14px;
        color: white;
        font-family: 'Inter 18pt Regular';
    }

.game-details-pg-acdn-item .drk-acdn-flexible {
    display: none;
}

.game-details-pg-acdn-item.active .drk-acdn-flexible {
    display: flex;
    margin-left: auto;
    margin-right: 16px;
}

.game-details-page-add-player-mn {
    padding: 16px 24px;
}

    .game-details-page-add-player-mn .add-player-ipt-fieldbox-checkbox-group input[type="checkbox"]::before {
        box-shadow: unset;
    }

.event-main-dpdn-inside-container .player-assocation-left-panel-main.btn-mn-box-mn-tltps .footer-actions {
    padding: 16px 24px;
}

.game-vs-game-page-main-body-container .game-details-pg-acdn-body .possession-summary-tbl-container .table-responsive {
    height: 600px;
}

#scoreInputs {
    justify-content: space-between;
}

/* ==== Game Details Page end ==== */


/* ==== highlight page start ==== */

.playerhighlight-pgmn {
    width: 100%;
    background-color: #0B1120;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

    .playerhighlight-pgmn header {
        height: 70px;
        background-color: #131D37;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        border-bottom: 1px solid #1e293b;
        z-index: 10;
    }

    .playerhighlight-pgmn .header-title {
        font-weight: 600;
        font-size: 1.1rem;
    }

    .playerhighlight-pgmn .header-icons {
        display: flex;
        gap: 10px;
    }

    .playerhighlight-pgmn .icon-btn {
        width: 40px;
        height: 40px;
        background: #005DBF;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: 0.2s;
    }

        .playerhighlight-pgmn .icon-btn:hover {
            opacity: 0.9;
        }

    .playerhighlight-pgmn .main-wrapper {
        display: flex;
        flex: 1;
        overflow: hidden;
        gap: 16px;
    }

    /* Sidebar set to RTL to move scrollbar to the left, keeping the right edge clean */
    .playerhighlight-pgmn .sidebar {
        width: 420px;
        overflow-y: auto;
        height: calc(100vh - 70px);
        direction: rtl;
        padding: 20px 0 20px 15px;
        background: transparent;
        border-right: unset;
    }

        /* Custom Scrollbar on the left */
        .playerhighlight-pgmn .sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .playerhighlight-pgmn .sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .playerhighlight-pgmn .sidebar::-webkit-scrollbar-thumb {
            background-color: #005DBF;
            border-radius: 10px;
        }

    /* Inner container resets text direction to normal */
    .playerhighlight-pgmn .sidebar-inner {
        direction: ltr;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .playerhighlight-pgmn .card {
        background-color: #131D37;
        border: 1px solid transparent;
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

        /* Active Card Style - Creates the "Merge" effect */
        .playerhighlight-pgmn .card.active {
            background-color: #131D37;
            border: 1px solid #005DBF;
            z-index: 5;
        }

            .playerhighlight-pgmn .card.active .card-footer {
                border-top: 1px solid #005DBF;
            }

            .playerhighlight-pgmn .card.active .card-header-row {
                border-bottom: 1px solid #005DBF;
            }

        .playerhighlight-pgmn .card .card-header-row {
            border-bottom: 1px solid #ffffff29;
        }

        .playerhighlight-pgmn .card .card-footer {
            border-top: 1px solid #ffffff29;
        }

    .playerhighlight-pgmn .card-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .playerhighlight-pgmn .card-title {
        font-size: 0.9rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

        .playerhighlight-pgmn .card-title i {
            font-size: 1.1rem;
        }

    .playerhighlight-pgmn .edit-icon-box {
        width: 32px;
        height: 32px;
        background: transparent;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 10px;
    }

        .playerhighlight-pgmn .edit-icon-box:hover {
            background-color: #ffffff0d;
        }

    .playerhighlight-pgmn .team-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        font-weight: 700;
    }

    .playerhighlight-pgmn .team-img {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #334155;
    }

    .playerhighlight-pgmn .vs-text {
        color: #ffffff;
        font-size: 0.75rem;
    }

    .playerhighlight-pgmn .details-box {
        background-color: transparent;
        padding: 0px;
        border-radius: 0px;
        font-size: 0.8rem;
        color: #ffffff;
        line-height: 1.8;
        margin-bottom: 12px;
        border: 1px solid transparent;
    }

    .playerhighlight-pgmn .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0px 0px 0px;
    }

    .playerhighlight-pgmn .assist-text {
        font-size: 0.8rem;
        color: #005DBF;
        font-weight: 600;
    }

    .playerhighlight-pgmn .plus-btn {
        width: 32px;
        height: 32px;
        background: #005DBF;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        cursor: pointer;
    }

    .playerhighlight-pgmn .content-area {
        flex: 1;
        padding: 20px 20px 20px 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
        z-index: 1;
    }

    .playerhighlight-pgmn .video-container {
        background-color: #131D37;
        padding: 20px;
        border-radius: 12px;
        width: 100%;
        height: calc(100vh - 200px);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #005DBF;
    }

        .playerhighlight-pgmn .video-container video {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: fill;
            background: #000;
        }

    .playerhighlight-pgmn .video-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        padding: 15px 20px;
        background: #131D37;
        border-radius: 12px;
        border: 1px solid #005DBF;
    }

    .playerhighlight-pgmn .nav-buttons {
        display: flex;
        gap: 10px;
    }

    .playerhighlight-pgmn .switch-container {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .playerhighlight-pgmn .toggle-checkbox {
        display: none;
    }

    .playerhighlight-pgmn .toggle-label {
        width: 44px;
        height: 24px;
        background: #334155;
        border-radius: 12px;
        position: relative;
        cursor: pointer;
        transition: 0.3s;
    }

        .playerhighlight-pgmn .toggle-label::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }

    .playerhighlight-pgmn .toggle-checkbox:checked + .toggle-label {
        background: #005DBF;
    }

        .playerhighlight-pgmn .toggle-checkbox:checked + .toggle-label::after {
            left: 23px;
        }

    .playerhighlight-pgmn .player-assocation-left-panel-main .footer-actions {
        padding-top: 0px;
        border-top: 0px;
    }

.playerhighlight-pgmn-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* Icon box nu styling */
.playerhighlight-pgmn-edit-icon-box {
    cursor: pointer;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #555;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.playerhighlight-pgmn-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #0B1120;
    min-width: 150px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    z-index: 100;
    border: 1px solid #005DBF;
    overflow: hidden;
    margin-top: 5px;
}

    .playerhighlight-pgmn-dropdown-content a {
        color: white;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 14px;
        transition: background-color 0.2s ease;
        border-bottom: 1px solid #005DBF;
    }

        .playerhighlight-pgmn-dropdown-content a:nth-last-child(1) {
            border-bottom: unset;
        }

        .playerhighlight-pgmn-dropdown-content a:hover {
            background-color: #005DBF;
            color: white;
        }

.playerhighlight-pgmn-show {
    display: block !important;
}

.playerhighlight-pgmn .card {
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.playerhighlight-pgmn .sidebar:not(:hover) .card:not(.active) {
    opacity: 0.35;
    filter: blur(1.5px);
}

.playerhighlight-pgmn .sidebar:not(:hover) .card.active {
    opacity: 1;
    filter: none;
}

.playerhighlight-pgmn .sidebar:hover .card {
    opacity: 1;
    filter: none;
    transform: none;
}

#AddBtnPopupMn,
#AssignedPlayerPopupMn {
    display: none;
}

/* ==== highlight page end ==== */
/* ==== Game Details Page end ==== */

/* ==== Match Review page start ==== */

.matchreview-pg-mn-cntr {
    background-color: #0B1120;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    width: 100%;
}

    .matchreview-pg-mn-cntr .main-content {
        flex: 1;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        margin: 0 auto;
    }

    .matchreview-pg-mn-cntr .btn-icon-only {
        background-color: #005DBF;
        color: #ffffff;
        border: none;
        border-radius: 6px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

        .matchreview-pg-mn-cntr .btn-icon-only:hover {
            background-color: #004a99;
        }

    .matchreview-pg-mn-cntr .match-hero-banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        /* Image pramane background transparent rakhyu chhe top section mate */
        background-color: transparent;
    }

    .matchreview-pg-mn-cntr .hero-pill {
        background-color: #131D37;
        border-radius: 8px;
        padding: 6px 16px 6px 6px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .matchreview-pg-mn-cntr .hero-pill.team-pill {
            padding: 8px 16px;
        }

    .matchreview-pg-mn-cntr .pill-icon-box {
        background-color: #0B1120;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .matchreview-pg-mn-cntr .pill-icon-box i {
            color: #ffffff;
            font-size: 14px;
        }

    .matchreview-pg-mn-cntr .pill-text {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
    }

    .matchreview-pg-mn-cntr .hero-teams {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .matchreview-pg-mn-cntr .hero-team {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
    }

    .matchreview-pg-mn-cntr .hero-vs {
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
    }

    .matchreview-pg-mn-cntr .flag-img {
        border-radius: 50%;
        /* Image ma gol chhe */
        object-fit: cover;
    }

    .matchreview-pg-mn-cntr .hero-meta-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .matchreview-pg-mn-cntr .media-card {
        background-color: #131D37;
        border-radius: 10px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .matchreview-pg-mn-cntr .card-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

        .matchreview-pg-mn-cntr .card-header-row.bordered {
            border-bottom: 1px solid #233152;
            padding-bottom: 16px;
            margin-bottom: 24px;
        }

    .matchreview-pg-mn-cntr .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
    }

    .matchreview-pg-mn-cntr video {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        border-radius: 8px;
        background-color: #0B1120;
    }

    .matchreview-pg-mn-cntr .video-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 16px;
    }

    .matchreview-pg-mn-cntr .comments-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .matchreview-pg-mn-cntr .comment-card {
        background-color: #0B1120;
        border: 1px solid #233152;
        border-radius: 8px;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .matchreview-pg-mn-cntr .comment-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
    }

    .matchreview-pg-mn-cntr .time-badge {
        background-color: transparent;
        color: #005DBF;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #005DBF;
    }

    .matchreview-pg-mn-cntr .close-icon {
        color: #8A99B5;
        cursor: pointer;
        font-size: 14px;
        transition: color 0.2s;
    }

        .matchreview-pg-mn-cntr .close-icon:hover {
            color: #ffffff;
        }

    .matchreview-pg-mn-cntr .player-name {
        font-size: 13px;
        color: #005DBF;
        font-weight: 500;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .matchreview-pg-mn-cntr .comment-text {
        font-size: 13px;
        color: #e2e8f0;
        margin-bottom: 24px;
        line-height: 1.5;
    }

    .matchreview-pg-mn-cntr .comment-meta {
        font-size: 11px;
        color: #8A99B5;
        border-top: 1px dotted #233152;
        padding-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: auto;
    }

    .matchreview-pg-mn-cntr .meta-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }

@media (max-width: 1200px) {
    .matchreview-pg-mn-cntr .comments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    .matchreview-pg-mn-cntr .comments-grid {
        grid-template-columns: 1fr;
    }

    .matchreview-pg-mn-cntr .main-content {
        padding: 16px;
    }

    .matchreview-pg-mn-cntr .match-hero-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.matchreview-pg-mn-cntr .player-assocation-left-panel-main .footer-actions {
    border-top: unset;
}

.matchreview-pg-mn-cntr .game-video-clip-container-box-in-out-mn {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0px;
}

.matchreview-pg-mn-cntr .video-markers-container {
    width: calc(100% - 3.5%);
    bottom: 33px;
}

.match-review-page-video-clip-start-time {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.single-tgl-switch-btn-mn .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

    .single-tgl-switch-btn-mn .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.single-tgl-switch-btn-mn .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2D3748;
    transition: .25s ease;
    border-radius: 34px;
}

    .single-tgl-switch-btn-mn .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .25s ease;
        border-radius: 50%;
    }

.single-tgl-switch-btn-mn input:checked + .slider {
    background-color: #005DBF;
}

    .single-tgl-switch-btn-mn input:checked + .slider:before {
        transform: translateX(22px);
    }

.single-tgl-switch-btn-mn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .single-tgl-switch-btn-mn h6 {
        color: #CBD5E1;
        font-size: 14px;
        font-family: 'Inter 18pt SemiBolt';
    }

#VideoClipStartTime,
#CreateVideoClipPopup {
    display: none;
}

/* ==== Match Review page end ==== */
/* ==== Terms & Conditions end ==== */

/* ==== My Player Profile tab start ==== */

.my-player-profile-tb-addt {
    width: 100%;
    margin: 0 auto;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

.my-add-player-profile-popup-opnr-mn .player-assocation-left-panel-main .footer-actions {
    padding-top: 0px;
    border-top: 0px;
}

.my-profile-page-mypf-tb-mn-wrapper {
    padding: 40px 20px;
    color: #ffffff;
}

/* Card component ni glossy ane modern design */
.my-profile-page-mypf-tb-mn-card {
    background-color: #131d37;
    border-radius: 20px;
    padding: 0px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Title styling */
.my-profile-page-mypf-tb-mn-title {
    font-family: 'Inter 18pt Medium';
    font-size: 20px;
    color: white;
    border-bottom: 1px solid #002D5B;
    display: flex;
    align-items: center;
    padding: 16px 24px;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

    .my-profile-page-mypf-tb-mn-title i {
        color: white;
    }

/* Labels styling */
.my-profile-page-mypf-tb-mn-label {
    font-size: 14px;
    font-weight: 500;
    color: #a0aec0;
    margin-bottom: 8px;
    display: block;
}

/* Custom Input, Select, and Textarea */
.my-profile-page-mypf-tb-mn-input,
.my-profile-page-mypf-tb-mn-select,
.my-profile-page-mypf-tb-mn-textarea {
    background-color: #0b1120 !important;
    border: 1px solid #1f2d50 !important;
    color: #ffffff !important;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
}

    /* Focus state mate glossy effect */
    .my-profile-page-mypf-tb-mn-input:focus,
    .my-profile-page-mypf-tb-mn-select:focus,
    .my-profile-page-mypf-tb-mn-textarea:focus {
        border-color: #005dbf !important;
        box-shadow: 0 0 10px rgba(0, 93, 191, 0.3) !important;
        outline: none;
    }

    /* Select option colors */
    .my-profile-page-mypf-tb-mn-select option {
        background-color: #131d37;
        color: #ffffff;
    }

/* Radio and Checkbox Styling */
.my-profile-page-mypf-tb-mn-radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.my-profile-page-mypf-tb-mn-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 14px;
}

    /* Custom Radio Button Design */
    .my-profile-page-mypf-tb-mn-radio-item input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #4a5568;
        border-radius: 50%;
        background-color: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        margin: 0;
        outline: none;
    }

        .my-profile-page-mypf-tb-mn-radio-item input[type="radio"]:checked {
            border-color: #005dbf;
        }

            .my-profile-page-mypf-tb-mn-radio-item input[type="radio"]:checked::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 10px;
                height: 10px;
                background-color: #005dbf;
                border-radius: 50%;
            }

/* Self Assessment Table - Fixed Design */
.my-profile-page-mypf-tb-mn-table-container {
    margin-top: 30px;
    background-color: #0b1120;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #1f2d50;
}

.my-profile-page-mypf-tb-mn-table {
    width: 100%;
    color: #ffffff;
    border-collapse: collapse;
    table-layout: fixed;
    /* Ensures even column width */
}

    .my-profile-page-mypf-tb-mn-table th {
        color: #005dbf;
        font-weight: 600;
        padding: 12px 10px;
        border-bottom: 2px solid #1f2d50;
        text-align: center;
    }

        .my-profile-page-mypf-tb-mn-table th:first-child {
            text-align: left;
            width: 40%;
            /* More space for skill name */
        }

    .my-profile-page-mypf-tb-mn-table td {
        padding: 12px 10px;
        border-bottom: 1px solid rgba(31, 45, 80, 0.5);
        text-align: center;
        vertical-align: middle;
    }

        .my-profile-page-mypf-tb-mn-table td:first-child {
            text-align: left;
            font-weight: 500;
            color: #e2e8f0;
        }

    .my-profile-page-mypf-tb-mn-table tr:last-child td {
        border-bottom: none;
    }

    /* Input specific for table radios to match style */
    .my-profile-page-mypf-tb-mn-table input[type="radio"] {
        accent-color: #005dbf;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* Buttons Styling (Save ane Cancel) */
.my-profile-page-mypf-tb-mn-actions {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.my-profile-page-mypf-tb-mn-btn-save {
    background: linear-gradient(135deg, #005dbf, #004494);
    border: none;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 93, 191, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .my-profile-page-mypf-tb-mn-btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 93, 191, 0.6);
        color: #ffffff;
    }

.my-profile-page-mypf-tb-mn-btn-cancel {
    background-color: transparent;
    border: 1px solid #4a5568;
    color: #e2e8f0;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .my-profile-page-mypf-tb-mn-btn-cancel:hover {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: #ffffff;
        color: #ffffff;
    }

/* Icon styling inside inputs */
.my-profile-page-mypf-tb-mn-input-group {
    position: relative;
}

    .my-profile-page-mypf-tb-mn-input-group i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        pointer-events: none;
    }

.my-profile-page-mypf-tb-mn-has-icon {
    padding-right: 40px !important;
}

.my-player-profile-add-main-popup-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    overflow: auto;
}

    .my-player-profile-add-main-popup-container .my-profile-frm-mn-container {
        width: 100%;
        padding: 20px 24px;
    }

.my-profile-frm-mn-container .possession-summary-tbl-container table {
    min-width: 575px;
}

#MyPlayerProfileTbMnPopup {
    display: none;
}

.my-player-profile-tb-detls-crd-mn-box-wrapper {
    width: 100%;
    background-color: transparent;
    padding: 0px;
    margin-top: 18px;
    color: #ffffff;
}

.my-player-profile-tb-detls-crd-mn-box-container {
    width: 100%;
    margin: 0 auto;
}

.my-player-profile-tb-detls-crd-mn-box-single-card {
    background-color: #0b1120;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.my-player-profile-tb-detls-crd-mn-box-card-header {
    background: linear-gradient(135deg, #0f162a, #0b1120);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


.my-player-profile-tb-detls-crd-mn-box-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.my-player-profile-tb-detls-crd-mn-box-header-info h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.my-player-profile-tb-detls-crd-mn-box-header-right {
    display: flex;
    align-items: center;
}

.my-player-profile-tb-detls-crd-mn-box-duration-badge {
    background-color: rgba(0, 93, 191, 0.15);
    color: #4da3ff;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(0, 93, 191, 0.3);
}

.my-player-profile-tb-detls-crd-mn-box-duration-label {
    font-size: 11px;
    color: #8e9bb0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 5px;
}

.my-player-profile-tb-detls-crd-mn-box-duration-date {
    color: #ffffff;
    font-weight: 600;
}

.my-player-profile-tb-detls-crd-mn-box-duration-divider {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
}

.my-player-profile-tb-detls-crd-mn-box-card-body {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

/* The actual inner nested box (#131d37 to pop from the main #0b1120 background) */
.my-player-profile-tb-detls-crd-mn-box-inner-panel {
    background-color: #131d37;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    flex: 1 1 calc(50% - 13px);
    /* Flexbox property for 50% width minus gap */
    min-width: 320px;
}

/* Full width utility class */
.my-player-profile-tb-detls-crd-mn-box-panel-full {
    flex: 1 1 100%;
    /* Flexbox full width */
}

.my-player-profile-tb-detls-crd-mn-box-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #4da3ff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.my-player-profile-tb-detls-crd-mn-box-kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

    .my-player-profile-tb-detls-crd-mn-box-kv-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.my-player-profile-tb-detls-crd-mn-box-label {
    font-size: 13px;
    color: #8e9bb0;
    font-weight: 500;
}

.my-player-profile-tb-detls-crd-mn-box-value {
    font-size: 15px;
    color: #ffffff;
    font-weight: 500;
    text-align: right;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Tags and Visual Helpers for Data */
.my-player-profile-tb-detls-crd-mn-box-tag {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

    .my-player-profile-tb-detls-crd-mn-box-tag.primary {
        background-color: rgba(0, 93, 191, 0.15);
        color: #4da3ff;
        border: 1px solid rgba(0, 93, 191, 0.3);
    }

    .my-player-profile-tb-detls-crd-mn-box-tag.secondary {
        background-color: rgba(255, 255, 255, 0.05);
        color: #e2e8f0;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

/* Foot Check Design */
.my-player-profile-tb-detls-crd-mn-box-foot-check {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4da3ff;
}

.my-player-profile-tb-detls-crd-mn-box-assessment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.my-player-profile-tb-detls-crd-mn-box-assessment-item {
    background-color: #0b1120;
    border: 1px solid #1f2d50;
    padding: 12px 18px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(33.33% - 11px);
    flex-wrap: wrap;
    gap: 10px;
}

.my-player-profile-tb-detls-crd-mn-box-skill-name {
    font-size: 14px;
    font-weight: 500;
    color: #e2e8f0;
}

/* Badges for Assessment Status */
.my-player-profile-tb-detls-crd-mn-box-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .my-player-profile-tb-detls-crd-mn-box-badge.strength {
        background-color: rgba(46, 204, 113, 0.15);
        color: #2ecc71;
        border: 1px solid rgba(46, 204, 113, 0.3);
    }

    .my-player-profile-tb-detls-crd-mn-box-badge.weakness {
        background-color: rgba(231, 76, 60, 0.15);
        color: #e74c3c;
        border: 1px solid rgba(231, 76, 60, 0.3);
    }

    .my-player-profile-tb-detls-crd-mn-box-badge.na {
        background-color: rgba(160, 174, 192, 0.15);
        color: #a0aec0;
        border: 1px solid rgba(160, 174, 192, 0.3);
    }

.action-btn-ssnp {
    width: fit-content;
    display: flex;
    gap: 12px;
    margin: auto;
}

    .action-btn-ssnp .inactive-cmn {
        padding: 4px 8px;
        min-width: 55px;
        border: 1px solid #ACB1B8;
        border-radius: 100px;
        color: #ACB1B8;
        background-color: transparent;
        font-size: 12px;
        font-family: 'Inter 18pt Medium';
    }

.inactive-cmn.green.active {
    background-color: #3CB660;
    border-color: #3CB660;
    color: white;
}

.inactive-cmn.blue.active {
    background-color: #4283F2;
    border-color: #4283F2;
    color: white;
}

.inactive-cmn.red.active {
    background-color: #EB5757;
    border-color: #EB5757;
    color: white;
}

.player-assocation-left-panel-main .footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.player-assocation-left-panel-main .action-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    outline: none;
}

.player-assocation-left-panel-main .btn-blue {
    background-color: #005DBF;
}

    .player-assocation-left-panel-main .btn-blue:hover {
        background-color: #004da3;
        transform: translateY(-2px);
    }

    .player-assocation-left-panel-main .btn-blue:active {
        transform: translateY(0);
    }

.player-assocation-left-panel-main .btn-red {
    background-color: #EF4444;
}

    .player-assocation-left-panel-main .btn-red:hover {
        background-color: #DC2626;
        transform: translateY(-2px);
    }

    .player-assocation-left-panel-main .btn-red:active {
        transform: translateY(0);
    }

/* Custom Tooltip configuration */
.player-assocation-left-panel-main .action-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background-color: #000000;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.player-assocation-left-panel-main .action-btn[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border-width: 5px 6px 0 6px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.player-assocation-left-panel-main .action-btn[data-tooltip]:hover::after,
.player-assocation-left-panel-main .action-btn[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.my-profile-frm-mn-container .action-btn-ssnp .inactive-cmn.blue.active {
    background-color: #EB5757;
    border-color: #EB5757;
    color: white;
}

.my-profile-frm-mn-container .action-btn-ssnp .inactive-cmn.red.active {
    background-color: #4283F2;
    border-color: #4283F2;
    color: white;
}

.my-player-profile-tb-detls-crd-mn-box-single-card {
    border: 1px solid #ffffff42;
}

/* ==== My Player Profile tab end ==== */

/* ==== cognitive analysis page start ==== */

.btn-mn-box-mn-tltps.btpt-set .footer-actions {
    padding-top: 0px;
    border-top: unset;
}

.cognitive-analysi-page-mn {
    background-color: #0B1120;
    color: #ffffff;
    min-height: 100vh;
}

    .cognitive-analysi-page-mn .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #131D37;
        padding: 15px 25px;
        border-radius: 12px;
        margin-bottom: 25px;
    }

    .cognitive-analysi-page-mn .jersey-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #0B1120;
        padding: 8px 18px;
        border-radius: 8px;
        border: 1px solid #2A3B5C;
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .cognitive-analysi-page-mn .jersey-icon {
        color: #e2e8f0;
        font-size: 16px;
    }

    .cognitive-analysi-page-mn .middle-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 25px;
    }

    .cognitive-analysi-page-mn .video-section {
        width: 100%;
        background-color: #131D37;
        padding: 20px;
        border-radius: 12px;
    }

    .cognitive-analysi-page-mn .match-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 16px;
    }

    .cognitive-analysi-page-mn .team-logo {
        width: 30px;
        height: 30px;
        background-color: #0B1120;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cognitive-analysi-page-mn .video-container {
        width: 100%;
        background-color: #000;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 16 / 9;
        max-height: 550px;
    }

        .cognitive-analysi-page-mn .video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .cognitive-analysi-page-mn .controls-toolbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #131D37;
        padding: 15px 25px;
        border-radius: 12px;
        flex-wrap: wrap;
        gap: 20px;
    }

    .cognitive-analysi-page-mn .view-options-container {
        pointer-events: none;
        opacity: 0.7;
    }

    .cognitive-analysi-page-mn .btn-add-event {
        background-color: #005DBF;
        color: #ffffff;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 4px 6px -1px rgba(0, 93, 191, 0.2);
    }

        .cognitive-analysi-page-mn .btn-add-event:hover {
            background-color: #004a99;
            transform: translateY(-2px);
        }

    .cognitive-analysi-page-mn .view-options-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .cognitive-analysi-page-mn .options-heading {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #9ca3af;
        font-weight: 600;
        margin-right: 10px;
    }

    .cognitive-analysi-page-mn .custom-radio-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        background-color: #0B1120;
        border: 1px solid #2A3B5C;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .cognitive-analysi-page-mn .custom-radio-label:hover {
            border-color: #005DBF;
            background-color: rgba(0, 93, 191, 0.05);
        }

    .cognitive-analysi-page-mn .custom-radio-input {
        display: none;
    }

    .cognitive-analysi-page-mn .custom-radio-circle {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #4B5563;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .cognitive-analysi-page-mn .custom-radio-input:checked + .custom-radio-circle {
        border-color: #005DBF;
        background-color: #005DBF;
    }

        .cognitive-analysi-page-mn .custom-radio-input:checked + .custom-radio-circle::after {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #ffffff;
        }

    .cognitive-analysi-page-mn .label-text {
        font-size: 13px;
        color: #d1d5db;
        transition: color 0.2s ease;
        white-space: nowrap;
    }

    .cognitive-analysi-page-mn .custom-radio-input:checked ~ .label-text {
        color: #ffffff;
        font-weight: 600;
    }

    .cognitive-analysi-page-mn .table-section {
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: #005DBF #005dbf00;
    }

    .cognitive-analysi-page-mn .tbl-mn-cgnitive-pg-mn-tbl {
        background-color: #131D37;
        border-radius: 12px;
        padding: 20px;
    }

    .cognitive-analysi-page-mn table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1100px;
    }

    .cognitive-analysi-page-mn thead {
        background-color: #314158;
    }

    .cognitive-analysi-page-mn th {
        text-align: left;
        padding: 15px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #e2e8f0;
        white-space: nowrap;
    }

    .cognitive-analysi-page-mn td {
        padding: 12px 12px;
        border-bottom: 1px solid #1E293B;
        font-size: 14px;
        color: #e2e8f0;
        vertical-align: middle;
        white-space: nowrap;
    }

    .cognitive-analysi-page-mn tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.02);
    }

    .cognitive-analysi-page-mn .table-select,
    .cognitive-analysi-page-mn .player-select select {
        background-color: #0B1120;
        color: #ffffff;
        border: 1px solid #2A3B5C;
        border-radius: 6px;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .cognitive-analysi-page-mn .table-select {
        padding: 8px 30px 8px 12px;
        width: 100%;
        font-size: 13px;
        background-position: right 12px center;
        background-size: 16px 12px;
    }

    .cognitive-analysi-page-mn .player-select select {
        padding: 8px 35px 8px 15px;
        background-position: right 15px center;
        background-size: 16px 12px;
    }

        .cognitive-analysi-page-mn .table-select:focus,
        .cognitive-analysi-page-mn .player-select select:focus {
            border-color: #005DBF;
            box-shadow: 0 0 0 0.25rem rgba(0, 93, 191, 0.25);
        }

    .cognitive-analysi-page-mn .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 22px;
    }

        .cognitive-analysi-page-mn .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .cognitive-analysi-page-mn .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #0B1120;
        border: 1px solid #2A3B5C;
        transition: .4s;
        border-radius: 34px;
    }

        .cognitive-analysi-page-mn .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: #9ca3af;
            transition: .4s;
            border-radius: 50%;
        }

    .cognitive-analysi-page-mn .toggle-switch input:checked + .slider {
        background-color: #1d4593;
        border-color: white;
    }

        .cognitive-analysi-page-mn .toggle-switch input:checked + .slider:before {
            transform: translateX(22px);
            background-color: #ffffff;
        }

/* Limit table height and enable vertical scroll */
.tbl-mn-cgnitive-pg-mn-tbl .table-section {
    max-height: 450px;
    overflow-y: auto;
}

    /* Keep header visible while scrolling (optional but usually desired) */
    .tbl-mn-cgnitive-pg-mn-tbl .table-section table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #314158;
    }

    /* Selected row background */
    .tbl-mn-cgnitive-pg-mn-tbl .table-section table tbody tr.selected-row {
        background-color: #005DBF;
    }

        /* Dropdown background stays white even when row is selected */
        .tbl-mn-cgnitive-pg-mn-tbl .table-section table tbody tr.selected-row .table-select {
            background-color: #ffffff;
            color: black;
        }

    /* Thin scrollbar - WebKit browsers (Chrome, Edge, Safari) */
    .tbl-mn-cgnitive-pg-mn-tbl .table-section::-webkit-scrollbar {
        width: 6px;
    }

    .tbl-mn-cgnitive-pg-mn-tbl .table-section::-webkit-scrollbar-track {
        background: transparent;
    }

    .tbl-mn-cgnitive-pg-mn-tbl .table-section::-webkit-scrollbar-thumb {
        background-color: #005DBF;
        border-radius: 10px;
    }

/* Thin scrollbar - Firefox */
.tbl-mn-cgnitive-pg-mn-tbl .table-section {
    scrollbar-width: thin;
    scrollbar-color: #005DBF transparent;
}

#cognitiveOptions .modal-content, #cogUpsert .modal-content, #cogOfficialUpsert .modal-content, #cogTeamUpsert .modal-content {
    background: #131D37;
    color: white;
}

.cognitive-analysi-page-mn .match-info {
    display: flex;
    justify-content: center;
}

.cognitive-analysi-page-mn .player-select {
    width: 300px;
}

.cognitive-analysi-page-mn #playerSelect {
    width: 100%;
}
/* ==== cognitive analysis page end ==== */
/* ==== My Player Profile tab end ==== */
/* ==== helo effact popup start ==== */
#HaloEffectPopupMn {
    padding: 40px 20px;
    display: none;
}

    #HaloEffectPopupMn .my-profile-page-mypf-tb-mn-card {
        background-color: rgb(19, 29, 55);
        border-radius: 20px;
        padding: 0px;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 15px 35px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        max-width: 650px;
        width: 100%;
        margin: 0px auto;
    }

.helo-effect-step-main-box {
    width: 100%;
    padding: 16px 24px;
}


    .helo-effect-step-main-box .steps-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .helo-effect-step-main-box .step-card {
        background-color: #0b1120;
        padding: 16px 20px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        border-left: 4px solid #3b82f6;
        transition: transform 0.2s, border-left-color 0.2s;
        cursor: default;
    }

        .helo-effect-step-main-box .step-card:hover {
            transform: translateX(6px);
            border-left-color: #60a5fa;
            background-color: #0f172a;
        }

    .helo-effect-step-main-box .step-number {
        background-color: #1e293b;
        color: #60a5fa;
        min-width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1rem;
        margin-right: 16px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .helo-effect-step-main-box .step-text {
        margin: 0;
        font-size: 1rem;
        color: #e2e8f0;
        line-height: 1.5;
    }

/* ==== helo effact popup end ==== */

.searchbl-mn-dpdn-dfrnt .dropdown-wrapper {
    position: relative;
    width: 100%;
}

.searchbl-mn-dpdn-dfrnt .dropdown-trigger {
    box-shadow: unset;
    font-size: 12px;
    color: white;
    padding: 12px;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.3s;
}

    .searchbl-mn-dpdn-dfrnt .dropdown-trigger:hover {
        border-color: #3b82f6;
    }

.searchbl-mn-dpdn-dfrnt .dropdown-menu {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    border-radius: 8px;
    display: none;
    flex-direction: column;
    z-index: 100;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

    .searchbl-mn-dpdn-dfrnt .dropdown-menu.active {
        display: flex;
    }

.searchbl-mn-dpdn-dfrnt .search-container {
    padding: 10px;
    border-bottom: 1px solid #1E293B;
    display: flex;
    align-items: center;
    background-color: #0f172a;
}

    .searchbl-mn-dpdn-dfrnt .search-container input {
        width: 100%;
        background: transparent;
        border: none;
        outline: none;
        height: fit-content;
        color: white;
        font-size: 12px;
        margin-right: 8px;
    }

        .searchbl-mn-dpdn-dfrnt .search-container input::placeholder {
            color: #64748b;
        }

    .searchbl-mn-dpdn-dfrnt .search-container i {
        color: #64748b;
        font-size: 12px;
    }

.searchbl-mn-dpdn-dfrnt .options-list {
    max-height: 200px;
    overflow-y: auto;
}

    .searchbl-mn-dpdn-dfrnt .options-list::-webkit-scrollbar {
        width: 6px;
    }

    .searchbl-mn-dpdn-dfrnt .options-list::-webkit-scrollbar-track {
        background: #0B1120;
    }

    .searchbl-mn-dpdn-dfrnt .options-list::-webkit-scrollbar-thumb {
        background: #1E293B;
        border-radius: 10px;
    }

.searchbl-mn-dpdn-dfrnt .option-item {
    padding: 12px;
    font-size: 12px;
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .searchbl-mn-dpdn-dfrnt .option-item:hover,
    .searchbl-mn-dpdn-dfrnt .option-item.selected {
        background-color: #3b82f6;
        color: white;
    }

.searchbl-mn-dpdn-dfrnt .no-result {
    padding: 12px;
    font-size: 12px;
    color: #64748b;
    text-align: center;
    display: none;
}

.searchbl-mn-dpdn-dfrnt .search-container {
    width: 100%;
    height: 44px;
}

#GameDetailsPopupMn {
    display: none;
}

/* ==== cognitive output page start ==== */

.cognitive-output-page-main-container {
    width: 100%;
    padding: 20px;
    background-color: #0B1120;
}

    .cognitive-output-page-main-container .hidden {
        display: none !important;
    }

    /* --- Header Section --- */
    .cognitive-output-page-main-container .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding: 15px 20px;
        background-color: #131D37;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .cognitive-output-page-main-container .header-left h2 {
        font-weight: 600;
        font-size: 1.2rem;
        margin: 0;
        color: white;
    }

    .cognitive-output-page-main-container .header-middle {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    /* Bootstrap Dropdown Custom Override for Dark Theme */
    .cognitive-output-page-main-container .custom-bs-select {
        background-color: #0B1120;
        border: 1px solid #1E293B;
        min-width: 250px;
        color: white;
    }

        .cognitive-output-page-main-container .custom-bs-select:focus {
            background-color: #0B1120;
            color: #ffffff;
            border-color: #1E293B;
            box-shadow: unset;
        }

    /* Custom Button Styling */
    .cognitive-output-page-main-container .btn-primary-custom {
        padding: 10px 20px;
        background-color: #005DBF;
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
        white-space: nowrap;
    }

        .cognitive-output-page-main-container .btn-primary-custom:hover {
            background-color: #004a99;
        }

    .cognitive-output-page-main-container .header-right h3 {
        font-weight: 700;
        color: #005DBF;
        margin: 0;
    }

    /* --- Chart Grid Layout --- */
    .cognitive-output-page-main-container .chart-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
        margin-bottom: 30px;
    }

    /* Navo 2-column grid special detailed section mate */
    .cognitive-output-page-main-container .chart-grid-2col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        margin-bottom: 30px;
    }

    /* --- Component/Card Styling --- */
    .cognitive-output-page-main-container .component-card {
        background-color: #131D37;
        border-radius: 16px;
        padding: 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        min-height: 350px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        overflow: hidden;
    }

    /* Navo Card Header */
    .cognitive-output-page-main-container .card-header-custom {
        width: 100%;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background-color: rgba(0, 0, 0, 0.15);
        text-align: left;
        margin-bottom: 0;
    }

    .cognitive-output-page-main-container .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 5px;
        color: #ffffff;
    }

    .cognitive-output-page-main-container .score-subtitle {
        display: block;
        font-size: 0.9rem;
        font-weight: 500;
        color: #005DBF;
    }

    .cognitive-output-page-main-container .inner-chart-title {
        text-align: center;
        font-weight: 600;
        margin-top: 15px;
        margin-bottom: 5px;
        color: #ffffff;
        font-size: 1.05rem;
    }

    .cognitive-output-page-main-container .chart-container {
        position: relative;
        width: 100%;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 20px 20px 20px;
    }

    .cognitive-output-page-main-container .placeholder-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        flex-grow: 1;
        color: #a0aec0;
        font-style: italic;
        padding: 15px 20px 20px 20px;
    }

    .cognitive-output-page-main-container .score-box {
        background-color: #005DBF;
        padding: 15px 40px;
        border-radius: 8px;
        font-size: 1.5rem;
        font-weight: bold;
        color: white;
    }

    /* --- Table Section Styling --- */
    .cognitive-output-page-main-container .table-controls {
        margin-top: 40px;
        margin-bottom: 15px;
    }

    .cognitive-output-page-main-container .table-container {
        background-color: #131D37;
        border-radius: 8px;
        overflow: auto;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .cognitive-output-page-main-container .table-header-dark {
        background-color: #1a2645;
        padding: 15px;
        font-size: 1.1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        color: white;
        justify-content: center;
        border-bottom: 2px solid rgba(255, 255, 255, 0.05);
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .cognitive-output-page-main-container .data-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        margin-bottom: 0;
    }

        .cognitive-output-page-main-container .data-table th {
            padding: 15px 20px;
            font-weight: 600;
            color: #ffffff;
            background-color: #314158;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.95rem;
        }

        .cognitive-output-page-main-container .data-table td {
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            vertical-align: middle;
            color: #d1d5db;
        }

        .cognitive-output-page-main-container .data-table tbody tr:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }

/* Responsive adjustments */
@media (max-width: 1200px) {

    .cognitive-output-page-main-container .chart-grid,
    .cognitive-output-page-main-container .chart-grid-2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cognitive-output-page-main-container .dashboard-header {
        flex-direction: column;
        gap: 15px;
    }

    .cognitive-output-page-main-container .chart-grid,
    .cognitive-output-page-main-container .chart-grid-2col {
        grid-template-columns: 1fr;
    }

    .cognitive-output-page-main-container .header-middle {
        width: 100%;
        flex-direction: column;
    }

    .cognitive-output-page-main-container .custom-bs-select {
        width: 100%;
    }

    .cognitive-output-page-main-container .btn-primary-custom {
        width: 100%;
    }
}

.cognitive-output-page-main-container .player-assocation-left-panel-main.btn-mn-box-mn-tltps .footer-actions {
    padding-top: 0px;
    border-top: unset;
}

/* ==== cognitive output page end ==== */



/* ==== cognitive analysis page start ==== */

.btn-mn-box-mn-tltps.btpt-set .footer-actions {
    padding-top: 0px;
    border-top: unset;
}

.cognitive-analysi-page-mn {
    background-color: #0B1120;
    color: #ffffff;
    min-height: 100vh;
}

    .cognitive-analysi-page-mn .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #131D37;
        padding: 15px 25px;
        border-radius: 12px;
        margin-bottom: 25px;
    }

    .cognitive-analysi-page-mn .jersey-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #0B1120;
        padding: 8px 18px;
        border-radius: 8px;
        border: 1px solid #2A3B5C;
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .cognitive-analysi-page-mn .jersey-icon {
        color: #e2e8f0;
        font-size: 16px;
    }

    .cognitive-analysi-page-mn .middle-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 25px;
    }

    .cognitive-analysi-page-mn .video-section {
        width: 100%;
        background-color: #131D37;
        padding: 20px;
        border-radius: 12px;
    }

    .cognitive-analysi-page-mn .match-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 16px;
    }

    .cognitive-analysi-page-mn .team-logo {
        width: 30px;
        height: 30px;
        background-color: #0B1120;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cognitive-analysi-page-mn .video-container {
        width: 100%;
        background-color: #000;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        height: 550px;
    }

        .cognitive-analysi-page-mn .video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .cognitive-analysi-page-mn .controls-toolbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #131D37;
        padding: 15px 25px;
        border-radius: 12px;
        flex-wrap: wrap;
        gap: 20px;
        pointer-events: none;
        opacity: 0.7;
    }

    .cognitive-analysi-page-mn .btn-add-event {
        background-color: #005DBF;
        color: #ffffff;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 4px 6px -1px rgba(0, 93, 191, 0.2);
    }

        .cognitive-analysi-page-mn .btn-add-event:hover {
            background-color: #004a99;
            transform: translateY(-2px);
        }

    .cognitive-analysi-page-mn .view-options-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .cognitive-analysi-page-mn .options-heading {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #9ca3af;
        font-weight: 600;
        margin-right: 10px;
    }

    .cognitive-analysi-page-mn .custom-radio-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        background-color: #0B1120;
        border: 1px solid #2A3B5C;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .cognitive-analysi-page-mn .custom-radio-label:hover {
            border-color: #005DBF;
            background-color: rgba(0, 93, 191, 0.05);
        }

    .cognitive-analysi-page-mn .custom-radio-input {
        display: none;
    }

    .cognitive-analysi-page-mn .custom-radio-circle {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #4B5563;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .cognitive-analysi-page-mn .custom-radio-input:checked + .custom-radio-circle {
        border-color: #005DBF;
        background-color: #005DBF;
    }

        .cognitive-analysi-page-mn .custom-radio-input:checked + .custom-radio-circle::after {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #ffffff;
        }

    .cognitive-analysi-page-mn .label-text {
        font-size: 13px;
        color: #d1d5db;
        transition: color 0.2s ease;
        white-space: nowrap;
    }

    .cognitive-analysi-page-mn .custom-radio-input:checked ~ .label-text {
        color: #ffffff;
        font-weight: 600;
    }

    .cognitive-analysi-page-mn .table-section {
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: #005DBF #005dbf00;
    }

    .cognitive-analysi-page-mn .tbl-mn-cgnitive-pg-mn-tbl {
        background-color: #131D37;
        border-radius: 12px;
        padding: 20px;
    }

    .cognitive-analysi-page-mn table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1100px;
    }

    .cognitive-analysi-page-mn thead {
        background-color: #314158;
    }

    .cognitive-analysi-page-mn th {
        text-align: left;
        padding: 15px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #e2e8f0;
        white-space: nowrap;
    }

    .cognitive-analysi-page-mn td {
        padding: 12px 12px;
        border-bottom: 1px solid #1E293B;
        font-size: 14px;
        color: #e2e8f0;
        vertical-align: middle;
        white-space: nowrap;
    }

    .cognitive-analysi-page-mn tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.02);
    }

    .cognitive-analysi-page-mn .table-select,
    .cognitive-analysi-page-mn .player-select select {
        background-color: #0B1120;
        color: #ffffff;
        border: 1px solid #2A3B5C;
        border-radius: 6px;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .cognitive-analysi-page-mn .table-select {
        padding: 8px 30px 8px 12px;
        width: 100%;
        font-size: 13px;
        background-position: right 12px center;
        background-size: 16px 12px;
    }

    .cognitive-analysi-page-mn .player-select select {
        padding: 8px 35px 8px 15px;
        background-position: right 15px center;
        background-size: 16px 12px;
    }

        .cognitive-analysi-page-mn .table-select:focus,
        .cognitive-analysi-page-mn .player-select select:focus {
            border-color: #005DBF;
            box-shadow: 0 0 0 0.25rem rgba(0, 93, 191, 0.25);
        }

    .cognitive-analysi-page-mn .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 22px;
    }

        .cognitive-analysi-page-mn .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .cognitive-analysi-page-mn .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #0B1120;
        border: 1px solid #2A3B5C;
        transition: .4s;
        border-radius: 34px;
    }

        .cognitive-analysi-page-mn .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: #9ca3af;
            transition: .4s;
            border-radius: 50%;
        }

    .cognitive-analysi-page-mn .toggle-switch input:checked + .slider {
        background-color: #005DBF;
        border-color: #005DBF;
    }

        .cognitive-analysi-page-mn .toggle-switch input:checked + .slider:before {
            transform: translateX(22px);
            background-color: #ffffff;
        }

/* ==== cognitive analysis page end ==== */

/* ==== Manage Team Page start ====  */

.team-profile-tab-main-container {
    width: 100%;
    margin: 0 auto;
    background-color: #131D37;
    border-radius: 12px;
    padding: 20px;
}

    .team-profile-tab-main-container .btn-mn-box-mn-tltps .footer-actions {
        margin-top: 16px;
    }

.team-logo-cntner-mn {
    width: 100%;
}

    .team-logo-cntner-mn .upload-label {
        width: 100%;
        color: #B2BCCA;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
    }

    .team-logo-cntner-mn .required-star {
        color: #E53935;
    }

    .team-logo-cntner-mn .main-container {
        padding: 20px;
        border-radius: 12px;
        border: 2px dashed rgba(255, 255, 255, 0.4);
        background-color: #131D37;
        width: 100%;
        box-sizing: border-box;
    }

    .team-logo-cntner-mn .upload-box {
        border: 1.5px dashed #005DBF;
        background-color: #1A2642;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: border-color 0.3s ease;
    }

        .team-logo-cntner-mn .upload-box:hover {
            border-color: #0073e6;
        }

    .team-logo-cntner-mn .upload-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .team-logo-cntner-mn .upload-icon {
        color: #FFFFFF;
        font-size: 22px;
        margin-bottom: 8px;
    }

    .team-logo-cntner-mn .upload-text {
        font-size: 12px;
        color: #FFFFFF;
        font-weight: 600;
    }

    .team-logo-cntner-mn .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    .team-logo-cntner-mn .close-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        font-size: 10px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: background-color 0.2s;
    }

        .team-logo-cntner-mn .close-btn:hover {
            background-color: rgba(255, 0, 0, 0.8);
        }

    .team-logo-cntner-mn #fileInput {
        display: none;
    }

.mng-team-table-mn-cntnr {
    width: 100%;
}

    .mng-team-table-mn-cntnr .main-content-wrapper {
        width: 100%;
        background-color: #131D37;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .mng-team-table-mn-cntnr .table-container {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: #005DBF rgb(20, 27, 43);
    }

    .mng-team-table-mn-cntnr table {
        width: 100%;
        min-width: 1300px;
        border-collapse: separate;
        border-spacing: 0;
        text-align: left;
    }

    .mng-team-table-mn-cntnr thead {
        background-color: #314158;
    }

    .mng-team-table-mn-cntnr th {
        padding: 16px 20px;
        font-size: 14px;
        font-family: 'Inter 18pt Bold';
        color: #ffffff;
        white-space: nowrap;
    }

        .mng-team-table-mn-cntnr th:first-child {
            border-top-left-radius: 8px;
        }

        .mng-team-table-mn-cntnr th:last-child {
            border-top-right-radius: 8px;
        }

    .mng-team-table-mn-cntnr tbody {
        background-color: #001122;
    }

    .mng-team-table-mn-cntnr td {
        padding: 20px 20px;
        border-bottom: 1px solid #1e293b;
        vertical-align: middle;
        white-space: nowrap;
    }

    .mng-team-table-mn-cntnr tbody tr:last-child td {
        border-bottom: none;
    }

    .mng-team-table-mn-cntnr .profile-cell {
        display: flex;
        align-items: center;
    }

    .mng-team-table-mn-cntnr .profile-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 12px;
        border: 2px solid #314158;
    }

    .mng-team-table-mn-cntnr .user-info h4 {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: #ffffff;
        white-space: nowrap;
    }

    .mng-team-table-mn-cntnr .user-info p {
        margin: 0;
        font-size: 0.85rem;
        color: #94a3b8;
        white-space: nowrap;
    }

    .mng-team-table-mn-cntnr .text-muted {
        color: #94a3b8;
    }

    .mng-team-table-mn-cntnr .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

        .mng-team-table-mn-cntnr .status-badge.rejected {
            background-color: transparent;
            color: #ef4444;
            border: 1px solid #ef4444;
        }

    .mng-team-table-mn-cntnr .action-buttons {
        display: flex;
        gap: 8px;
    }

    .mng-team-table-mn-cntnr .btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 4px;
        border: 1px solid #005DBF;
        background-color: #005DBF;
        color: white;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
    }

        .mng-team-table-mn-cntnr .btn-action.btn-delete {
            background-color: rgba(239, 68, 68, 0.2);
            border-color: #EF4444;
            color: #EF4444;
        }

        .mng-team-table-mn-cntnr .btn-action:hover {
            color: #ffffff;
            border-color: #005DBF;
            background-color: rgba(0, 93, 191, 0.1);
        }

        .mng-team-table-mn-cntnr .btn-action.btn-delete:hover {
            border-color: #ef4444;
            color: #ef4444;
            background-color: rgba(239, 68, 68, 0.1);
        }

    .mng-team-table-mn-cntnr .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        margin: 0;
        vertical-align: middle;
    }

        .mng-team-table-mn-cntnr .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .mng-team-table-mn-cntnr .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #314158;
        transition: .4s;
        border-radius: 34px;
    }

        .mng-team-table-mn-cntnr .slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: #94a3b8;
            transition: .4s;
            border-radius: 50%;
        }

    .mng-team-table-mn-cntnr input:checked + .slider {
        background-color: #005DBF;
    }

        .mng-team-table-mn-cntnr input:checked + .slider:before {
            transform: translateX(20px);
            background-color: white;
        }

    .mng-team-table-mn-cntnr .center-content {
        text-align: center;
    }

.btn-mn-box-mn-tltps.tbl-top-btn {
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 16px;
}

    .btn-mn-box-mn-tltps.tbl-top-btn .footer-actions {
        padding-top: 0px;
        border-top: unset;
    }

.mng-team-table-mn-cntnr .status-badge.active {
    background-color: transparent;
    color: #10b981;
    border: 1px solid #10b981;
}

.mng-team-table-mn-cntnr .status-badge.inactive {
    background-color: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

.mng-team-table-mn-cntnr .status-badge.pending {
    background-color: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

.actvrstr-and-dltguesstplyr {
    width: 100%;
}

    .actvrstr-and-dltguesstplyr .tab-header-area {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        padding-bottom: 12px;
        padding-top: 12px;
        border-top: 1px solid #1e293b;
        border-bottom: 1px solid #1e293b;
    }

    .actvrstr-and-dltguesstplyr .tab-btn {
        background-color: transparent;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

        .actvrstr-and-dltguesstplyr .tab-btn:hover:not(.active) {
            color: #94a3b8;
        }

        .actvrstr-and-dltguesstplyr .tab-btn.active {
            background-color: #005DBF;
            color: #ffffff;
        }

    .actvrstr-and-dltguesstplyr .tab-content {
        display: none;
        animation: fadeIn 0.4s;
    }

        .actvrstr-and-dltguesstplyr .tab-content.active {
            display: block;
        }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.roster-table-wrapper {
    width: 100%;
    background-color: #131D37;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

    .roster-table-wrapper .table-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .roster-table-wrapper .top-bar-left,
    .roster-table-wrapper .top-bar-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .roster-table-wrapper .custom-input {
        background-color: #0B1120;
        border: 1px solid #1e293b;
        color: #ffffff;
        padding: 10px 16px;
        border-radius: 6px;
        font-size: 0.9rem;
        outline: none;
    }

        .roster-table-wrapper .custom-input::placeholder {
            color: #94a3b8;
        }

    .roster-table-wrapper .btn-search {
        background-color: #005DBF;
        color: #fff;
        border: none;
        padding: 10px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1rem;
    }

    .roster-table-wrapper .table-container {
        background-color: #131D37;
        border-radius: 8px;
        overflow-x: auto;
        border: 1px solid #1e293b;
        scrollbar-width: thin;
        scrollbar-color: #005DBF rgb(20, 27, 43);
    }

    .roster-table-wrapper table {
        width: 100%;
        min-width: 1400px;
        border-collapse: collapse;
        text-align: left;
    }

    .roster-table-wrapper thead {
        background-color: #334155;
    }

    .roster-table-wrapper th {
        padding: 16px 20px;
        font-size: 14px;
        font-family: 'Inter 18pt Bold';
        color: #ffffff;
        letter-spacing: 0.05em;
        color: #ffffff;
        white-space: nowrap;
    }

    .roster-table-wrapper tbody {
        background-color: #0B1120;
    }

    .roster-table-wrapper td {
        padding: 16px 20px;
        border-bottom: 1px solid #1e293b;
        vertical-align: middle;
        white-space: nowrap;
    }

    .roster-table-wrapper tbody tr:last-child td {
        border-bottom: none;
    }

    .roster-table-wrapper .profile-cell {
        display: flex;
        align-items: center;
        width: max-content;
    }

    .roster-table-wrapper .profile-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 12px;
        border: 2px solid #334155;
    }

    .roster-table-wrapper .user-info h4 {
        margin: 0 0 4px 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: #ffffff;
    }

    .roster-table-wrapper .user-info p {
        margin: 0;
        font-size: 0.8rem;
        color: #94a3b8;
    }

    .roster-table-wrapper .jersey-input {
        width: 60px;
        background-color: #131D37;
        border: 1px solid #314158;
        color: #ffffff;
        padding: 8px;
        border-radius: 4px;
        text-align: center;
        font-size: 0.9rem;
    }

    .roster-table-wrapper .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

        .roster-table-wrapper .status-badge.pending {
            background-color: transparent;
            color: #f59e0b;
            border: 1px solid #f59e0b;
        }

        .roster-table-wrapper .status-badge.active {
            background-color: transparent;
            color: #10b981;
            border: 1px solid #10b981;
        }

        .roster-table-wrapper .status-badge.inactive {
            background-color: transparent;
            color: #ef4444;
            border: 1px solid #ef4444;
        }

        .roster-table-wrapper .status-badge.removed {
            background-color: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid #ef4444;
        }

        .roster-table-wrapper .status-badge.guest {
            background-color: rgba(168, 85, 247, 0.15);
            color: #a855f7;
            border: 1px solid #a855f7;
        }

    .roster-table-wrapper .action-buttons {
        display: flex;
        gap: 6px;
    }

    .roster-table-wrapper .btn-row-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 0.85rem;
    }

    .roster-table-wrapper .btn-blue-action {
        background-color: #005DBF;
        color: #ffffff;
    }

    .roster-table-wrapper .btn-red-action {
        background-color: rgba(220, 38, 38, 0.15);
        color: #ef4444;
        border: 1px solid #dc2626;
    }

    .roster-table-wrapper .th-toggle-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .roster-table-wrapper .switch {
        position: relative;
        display: inline-block;
        width: 38px;
        height: 20px;
        margin: 0;
    }

        .roster-table-wrapper .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .roster-table-wrapper .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #475569;
        transition: .4s;
        border-radius: 34px;
    }

        .roster-table-wrapper .slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: #94a3b8;
            transition: .4s;
            border-radius: 50%;
        }

    .roster-table-wrapper input:checked + .slider {
        background-color: #005DBF;
    }

        .roster-table-wrapper input:checked + .slider:before {
            transform: translateX(18px);
            background-color: white;
        }

    .roster-table-wrapper .date-picker-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .roster-table-wrapper .date-input {
        padding-right: 35px;
        cursor: pointer;
    }

        .roster-table-wrapper .date-input::-webkit-calendar-picker-indicator {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

    .roster-table-wrapper .date-icon {
        position: absolute;
        right: 12px;
        color: #ffffff;
        pointer-events: none;
    }

    .roster-table-wrapper .top-bar-right .btn-mn-box-mn-tltps.tbl-top-btn {
        margin-bottom: 0px;
    }

.mng-team-table-mn-cntnr .btn-outline {
    background-color: transparent;
    color: #94a3b8;
    border: 1px solid #314158;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .mng-team-table-mn-cntnr .btn-outline:hover {
        border-color: #005DBF;
        background-color: #005DBF;
        color: #ffffff;
    }

.add-and-edit-staff-pfl {
    width: fit-content;
    margin-bottom: 16px;
}

    .add-and-edit-staff-pfl .upload-container {
        width: 100px;
        height: 100px;
        background-color: #131D37;
        border: 2px dashed #005DBF;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }

        .add-and-edit-staff-pfl .upload-container:hover {
            background-color: #1a2747;
            border-color: #3b82f6;
        }

    .add-and-edit-staff-pfl .upload-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ffffff;
        pointer-events: none;
    }

    .add-and-edit-staff-pfl .upload-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .add-and-edit-staff-pfl .upload-text {
        font-size: 14px;
        font-family: 'Inter 18pt Medium';
    }

    .add-and-edit-staff-pfl .file-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .add-and-edit-staff-pfl .image-preview {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
        z-index: 10;
    }

    .add-and-edit-staff-pfl .remove-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 24px;
        height: 24px;
        background-color: rgba(220, 38, 38, 0.9);
        color: white;
        border: none;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 20;
        font-size: 12px;
        transition: background-color 0.2s;
    }

        .add-and-edit-staff-pfl .remove-btn:hover {
            background-color: #dc2626;
        }

    .add-and-edit-staff-pfl .upload-container.has-image {
        border-style: solid;
        border-color: #1e293b;
    }

        .add-and-edit-staff-pfl .upload-container.has-image .upload-content {
            display: none;
        }

        .add-and-edit-staff-pfl .upload-container.has-image .image-preview {
            display: block;
        }

        .add-and-edit-staff-pfl .upload-container.has-image:hover .remove-btn {
            display: flex;
        }

.dtpkrhdsh .roster-table-wrapper {
    padding: 0px;
}

.tglswitch-extra-mn-bnt.label-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tglswitch-extra-mn-bnt .switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
    margin: 0;
}

    .tglswitch-extra-mn-bnt .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.tglswitch-extra-mn-bnt .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334155;
    transition: .4s;
    border-radius: 34px;
}

    .tglswitch-extra-mn-bnt .slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 3px;
        bottom: 3px;
        background-color: #94a3b8;
        transition: .4s;
        border-radius: 50%;
    }

.tglswitch-extra-mn-bnt input:checked + .slider {
    background-color: #005DBF;
}

    .tglswitch-extra-mn-bnt input:checked + .slider:before {
        transform: translateX(14px);
        background-color: white;
    }

.tglswitch-extra-mn-bnt.label-header label {
    margin-bottom: 0px;
}

.upload-player-sheetsppp-mn {
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .upload-player-sheetsppp-mn .step-box {
        background-color: #0d1627;
        border-radius: 6px;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        position: relative;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #3b82f6;
    }

    .upload-player-sheetsppp-mn .step-number {
        width: 32px;
        height: 32px;
        background-color: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 14px;
        margin-right: 20px;
        flex-shrink: 0;
    }

    .upload-player-sheetsppp-mn .step-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
        gap: 12px;
    }

    .upload-player-sheetsppp-mn .step-text {
        font-size: 15px;
        color: #e2e8f0;
        font-weight: 500;
    }

    .upload-player-sheetsppp-mn .btn-download {
        background-color: #007bff;
        color: #ffffff;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .upload-player-sheetsppp-mn .btn-download:hover {
            background-color: #0056b3;
        }

    .upload-player-sheetsppp-mn .file-input-wrapper {
        background-color: #1e293b;
        border: 1px solid #334155;
        border-radius: 4px;
        display: flex;
        align-items: center;
        overflow: hidden;
        width: 100%;
        max-width: 250px;
    }

        .upload-player-sheetsppp-mn .file-input-wrapper::before {
            content: 'Choose file';
            background-color: #334155;
            color: #cbd5e1;
            padding: 8px 12px;
            border-right: 1px solid #475569;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
        }

    .upload-player-sheetsppp-mn .custom-file-input {
        width: 100%;
        color: #cbd5e1;
        font-size: 13px;
        padding: 8px 12px;
        cursor: pointer;
        outline: none;
        background: transparent;
        border: none;
    }

        .upload-player-sheetsppp-mn .custom-file-input::-webkit-file-upload-button {
            display: none;
        }

@media (max-width: 480px) {
    .upload-player-sheetsppp-mn .step-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

.upload-player-sheetsppp-mn .btn-mn-box-mn-tltps .footer-actions {
    padding: 0px !important;
    border-top: unset !important;
}

.mng-team-table-mn-cntnr .status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .mng-team-table-mn-cntnr .status-badge.removed {
        background-color: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid #ef4444;
    }

    .mng-team-table-mn-cntnr .status-badge.guest {
        background-color: rgba(168, 85, 247, 0.15);
        color: #a855f7;
        border: 1px solid #a855f7;
    }

#AddEditStaffPopupMn,
#AddEditManagerPopupMn,
#AddEditPlayerPopupMn,
#UploadPlayerSheetsPopupMn,
#InvitePlayerPopupMn,
#SelectPlayerMergePopupMn,
#AddEditFanPopupMn,
#InvitePlayerPopupMn,
#InviteFanPopupMn {
    display: none;
}

/* ==== Manage Team Page end ====  */

/* ==== add new team ragistrtion popup start ==== */

.add-new-team-button {
    width: fit-content;
    margin: auto;
    margin-bottom: 16px;
}

    .add-new-team-button .player-assocation-left-panel-main {
        width: fit-content;
        margin: auto;
        justify-content: center;
    }

.add-new-ragistration-tm-mn-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-new-ragistration-tm-mn-popup-container {
    background-color: #131D37;
    width: 90%;
    max-width: 420px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    border: 1px solid #1e293b;
}

.add-new-ragistration-tm-mn-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.add-new-ragistration-tm-mn-logos-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-new-ragistration-tm-mn-company-logo {
    max-height: 35px;
    width: auto;
    object-fit: contain;
}

.add-new-ragistration-tm-mn-close-btn-top {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    outline: none;
}

    .add-new-ragistration-tm-mn-close-btn-top:hover {
        color: #ef4444;
    }

    .add-new-ragistration-tm-mn-close-btn-top svg {
        width: 22px;
        height: 22px;
    }

.add-new-ragistration-tm-mn-popup-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.add-new-ragistration-tm-mn-input-group {
    margin-bottom: 16px;
}

.add-new-ragistration-tm-mn-custom-input {
    width: 100%;
    box-sizing: border-box;
    background-color: #0B1120;
    border: 1px solid #1e293b;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

    .add-new-ragistration-tm-mn-custom-input:focus {
        border-color: #1e293b;
        box-shadow: unset;
    }

.add-new-ragistration-tm-mn-btn-container {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
}

.add-new-ragistration-tm-mn-action-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

    .add-new-ragistration-tm-mn-action-btn:hover {
        transform: translateY(-2px);
    }

    .add-new-ragistration-tm-mn-action-btn svg {
        width: 20px;
        height: 20px;
    }

.add-new-ragistration-tm-mn-add-button {
    background-color: #005DBF;
}

    .add-new-ragistration-tm-mn-add-button:hover {
        background-color: #004a99;
    }

.add-new-ragistration-tm-mn-close-btn-bottom {
    background-color: #ef4444;
}

    .add-new-ragistration-tm-mn-close-btn-bottom:hover {
        background-color: #dc2626;
    }

.add-new-ragistration-tm-mn-tooltip-btn {
    position: relative;
}

    .add-new-ragistration-tm-mn-tooltip-btn::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 120%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background-color: #000000;
        color: #ffffff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        pointer-events: none;
    }

    .add-new-ragistration-tm-mn-tooltip-btn::before {
        content: '';
        position: absolute;
        bottom: 105%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        border-width: 6px;
        border-style: solid;
        border-color: #000000 transparent transparent transparent;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        pointer-events: none;
    }

    .add-new-ragistration-tm-mn-tooltip-btn:hover::after,
    .add-new-ragistration-tm-mn-tooltip-btn:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

#NewTeamRegistrationPopupMn {
    display: none;
}

/* ==== add new team ragistrtion popup end ==== */

.filter-and-itp-cmpontnt-mn {
    width: 100%;
    padding-bottom: 12px;
    padding-top: 12px;
    border-top: 1px solid rgb(30, 41, 59);
    border-bottom: 1px solid rgb(30, 41, 59);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

    .filter-and-itp-cmpontnt-mn input {
        font-size: 14px;
        color: white;
        padding: 12px;
        background-color: rgb(11, 17, 32);
        border: 1px solid rgb(30, 41, 59);
        border-radius: 8px;
        width: 280px;
    }

    .filter-and-itp-cmpontnt-mn .add-new-team-button {
        margin: unset;
        padding-right: 3%;
    }
/* ==== Manage Team Page end ====  */

/* ==== manage event page start ==== */

.manage-events-fixtures-cntnr-mn {
    padding: 24px;
    width: 100%;
    background-color: #0B1120;
    color: #e2e8f0;
    overflow: hidden;
}

    .manage-events-fixtures-cntnr-mn .brand-top-panel {
        background: #131D37;
        border: 1px solid #1e293b;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 20px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .manage-events-fixtures-cntnr-mn .brand-section {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .manage-events-fixtures-cntnr-mn .logo-box {
        background: #050b14;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid #1e293b;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        box-sizing: border-box;
    }

    .manage-events-fixtures-cntnr-mn .tournament-logo {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .manage-events-fixtures-cntnr-mn .tournament-title-wrap {
        display: flex;
        flex-direction: column;
    }

    .manage-events-fixtures-cntnr-mn .tournament-title {
        font-size: 24px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.5px;
    }

    .manage-events-fixtures-cntnr-mn .action-buttons-group {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
        margin-left: auto;
    }

    .manage-events-fixtures-cntnr-mn .btn-outline {
        background-color: transparent;
        color: #cbd5e1;
        border: 1px solid #314158;
        height: 48px;
        width: 48px;
        padding: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 16px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

        .manage-events-fixtures-cntnr-mn .btn-outline:hover {
            background-color: #1e293b;
            color: #ffffff;
            border-color: #475569;
        }

    .manage-events-fixtures-cntnr-mn .btn-primary {
        background-color: #005DBF;
        color: #ffffff;
        border: none;
        height: 48px;
        width: 48px;
        padding: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 16px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0, 93, 191, 0.3);
    }

        .manage-events-fixtures-cntnr-mn .btn-primary:hover {
            background-color: #004a99;
            transform: translateY(-1px);
        }

    .manage-events-fixtures-cntnr-mn .all-games-nav {
        display: inline-flex;
        align-items: center;
        background-color: #050b14;
        border-radius: 30px;
        border: 1px solid #1e293b;
        height: 48px;
        padding: 0 6px;
        gap: 10px;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .manage-events-fixtures-cntnr-mn .nav-btn {
        background-color: #1e293b;
        color: #cbd5e1;
        border: 1px solid #314158;
        height: 36px;
        width: 36px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
    }

        .manage-events-fixtures-cntnr-mn .nav-btn:hover {
            background-color: #005DBF;
            border-color: #005DBF;
            color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 93, 191, 0.3);
        }

    .manage-events-fixtures-cntnr-mn .nav-text {
        font-size: 0.95rem;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        align-items: center;
        height: 100%;
        letter-spacing: 0.5px;
        min-width: 90px;
        justify-content: center;
    }

    .manage-events-fixtures-cntnr-mn .nav-dropdown-container {
        position: relative;
        display: inline-block;
    }

    .manage-events-fixtures-cntnr-mn .nav-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background-color: #0B1120;
        border: 1px solid #314158;
        border-radius: 8px;
        padding: 8px 0;
        min-width: 160px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
        z-index: 100;
        display: none;
    }

        .manage-events-fixtures-cntnr-mn .nav-dropdown-menu.show {
            display: block;
        }

    .manage-events-fixtures-cntnr-mn .nav-dropdown-item {
        padding: 10px 16px;
        color: #cbd5e1;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
        text-align: left;
        font-weight: 500;
    }

        .manage-events-fixtures-cntnr-mn .nav-dropdown-item:hover,
        .manage-events-fixtures-cntnr-mn .nav-dropdown-item.active {
            background-color: #005DBF;
            color: #ffffff;
        }

    .manage-events-fixtures-cntnr-mn .hidden-element {
        display: none !important;
    }

    .manage-events-fixtures-cntnr-mn .main-table-component {
        background-color: #131D37;
        border-radius: 12px;
        border: 1px solid #1e293b;
        padding: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .manage-events-fixtures-cntnr-mn .table-header-controls {
        display: flex;
        align-items: center;
        gap: 14px;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .manage-events-fixtures-cntnr-mn .table-wrapper {
        overflow-x: auto;
        border-radius: 8px;
        border: 1px solid #1e293b;
        scrollbar-width: thin;
        scrollbar-color: #005DBF rgb(20, 27, 43);
    }

        .manage-events-fixtures-cntnr-mn .table-wrapper::-webkit-scrollbar {
            height: 6px;
        }

        .manage-events-fixtures-cntnr-mn .table-wrapper::-webkit-scrollbar-track {
            background: rgb(20, 27, 43);
            border-radius: 8px;
        }

        .manage-events-fixtures-cntnr-mn .table-wrapper::-webkit-scrollbar-thumb {
            background-color: #005DBF;
            border-radius: 8px;
        }

    .manage-events-fixtures-cntnr-mn table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    .manage-events-fixtures-cntnr-mn thead {
        background-color: #314158;
    }

    .manage-events-fixtures-cntnr-mn th {
        padding: 16px 20px;
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .manage-events-fixtures-cntnr-mn tbody {
        background-color: #001122;
    }

        .manage-events-fixtures-cntnr-mn tbody tr {
            border-bottom: 1px solid #1e293b;
            transition: background-color 0.2s;
        }

            .manage-events-fixtures-cntnr-mn tbody tr:hover {
                background-color: #0B1120;
            }

            .manage-events-fixtures-cntnr-mn tbody tr:last-child {
                border-bottom: none;
            }

    .manage-events-fixtures-cntnr-mn td {
        padding: 16px 20px;
        color: #cbd5e1;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .manage-events-fixtures-cntnr-mn .result-cell {
        font-weight: 600;
        color: #ffffff;
        text-align: center;
    }

    .manage-events-fixtures-cntnr-mn .action-icons {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .manage-events-fixtures-cntnr-mn .icon-btn {
        background-color: #005DBF;
        border: 1px solid #005DBF;
        color: #ffffff;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }

        .manage-events-fixtures-cntnr-mn .icon-btn.rdicn {
            background-color: rgba(239, 68, 68, 0.2);
            border-color: #EF4444;
            color: #EF4444;
        }

            .manage-events-fixtures-cntnr-mn .icon-btn.rdicn:hover {
                background-color: #EF4444;
                color: white;
                border-color: #EF4444;
            }

        .manage-events-fixtures-cntnr-mn .icon-btn:hover {
            background-color: #004a99;
            border-color: #004a99;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

.main-table-component .btn-mn-box-mn-tltps {
    width: fit-content;
    margin-bottom: 0px;
}

.manage-events-fixtures-cntnr-mn .account-setting-top-tab-pnl-main-box {
    margin: unset;
    width: fit-content;
}

    .manage-events-fixtures-cntnr-mn .account-setting-top-tab-pnl-main-box.mngevnt-tbpnl {
        margin: auto;
        width: 100%;
    }

        .manage-events-fixtures-cntnr-mn .account-setting-top-tab-pnl-main-box.mngevnt-tbpnl .tab-content {
            padding: 0px;
        }

.tab-sec-mn .table-header-controls {
    justify-content: end;
}

.main-table-component .status-badge.active {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: transparent;
    color: #10b981;
    border: 1px solid #10b981;
}

.main-table-component .status-badge.inactive {
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

.manage-events-fixtures-cntnr-mn .actvrstr-and-dltguesstplyr .tab-header-area {
    margin-bottom: 30px;
}

.manage-events-fixtures-cntnr-mn .actvrstr-and-dltguesstplyr .roster-table-wrapper .table-top-bar {
    justify-content: end;
}

.mltislct-srchbl {
    position: relative;
    width: 100%;
    margin-top: 8px;
}

    .mltislct-srchbl .srchbl-wrapper {
        position: relative;
        width: 100%;
    }

    .mltislct-srchbl .srchbl-display {
        font-size: 12px;
        color: white;
        padding: 12px;
        background-color: rgb(11, 17, 32);
        border: 1px solid rgb(30, 41, 59);
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        background-image: url(../images/down-arrow.png);
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position-x: right 10px;
        background-position-y: center;
        transition: border-color 0.15s ease-in-out;
    }

    .mltislct-srchbl .srchbl-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 5px;
        background: #131D37;
        border: 1px solid #1E293B;
        border-radius: 6px;
        z-index: 1000;
        display: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .mltislct-srchbl .srchbl-dropdown.active {
            display: block;
            animation: fadeIn 0.2s ease;
        }

    .mltislct-srchbl .srchbl-search {
        width: calc(100% - 20px);
        margin: 10px;
        padding: 8px 12px;
        border: 1px solid rgb(30, 41, 59);
        border-radius: 4px;
        outline: none;
        font-size: 14px;
    }

        .mltislct-srchbl .srchbl-search:focus {
            border-color: rgb(30, 41, 59);
            box-shadow: unset;
        }

    .mltislct-srchbl .srchbl-options {
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
        max-height: 200px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

        .mltislct-srchbl .srchbl-options li {
            padding: 8px 20px;
            cursor: pointer;
            font-size: 14px;
            color: white;
            transition: background-color 0.1s ease;
            border-bottom: 1px solid rgb(30, 41, 59);
        }

            .mltislct-srchbl .srchbl-options li:hover {
                background-color: #005dbf29;
            }

            .mltislct-srchbl .srchbl-options li.selected {
                background-color: #005DBF;
                font-weight: bold;
            }

            .mltislct-srchbl .srchbl-options li.hidden {
                display: none;
            }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.drk-slsct-opt-mn.custom-tag-select-box {
    position: relative;
    width: 100%;
}

.custom-ts-input-wrap {
    position: relative;
}

.custom-ts-search {
    font-size: 12px;
    color: white;
    padding: 12px;
    padding-right: 35px;
    background-color: rgb(11, 17, 32);
    border: 1px solid rgb(30, 41, 59);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

    .custom-ts-search::placeholder {
        color: #94a3b8;
    }

    .custom-ts-search:focus {
        border-color: rgb(30, 41, 59);
    }

.custom-ts-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.custom-tag-select-box.open .custom-ts-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.custom-ts-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgb(11, 17, 32);
    border: 1px solid rgb(30, 41, 59);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 999;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

    .custom-ts-dropdown.show {
        display: block;
    }

    .custom-ts-dropdown li {
        padding: 10px 12px;
        cursor: pointer;
        font-size: 13px;
        color: white;
        border-bottom: 1px solid rgb(30, 41, 59);
    }

        .custom-ts-dropdown li:last-child {
            border-bottom: none;
        }

        .custom-ts-dropdown li:hover {
            background: #005DBF;
            color: white;
        }

        .custom-ts-dropdown li.selected {
            display: none !important;
        }

.custom-ts-selected-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.custom-ts-tag {
    color: white;
    background-color: #0B1120;
    border: 1px solid #1E293B;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.2s ease-in-out;
}

    .custom-ts-tag span.remove-tag {
        cursor: pointer;
        color: #94a3b8;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease;
    }

        .custom-ts-tag span.remove-tag:hover {
            color: #ef4444;
        }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#AddTeamsEventPopupMn {
    display: none;
}

.field-players-and-goalies-tabs-btn {
    width: fit-content;
    display: flex;
    gap: 14px;
}

    .field-players-and-goalies-tabs-btn button {
        background-color: transparent;
        color: rgb(255, 255, 255);
        border-width: medium;
        border-style: none;
        border-color: currentcolor;
        border-image: none;
        padding: 10px 20px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
        transition: 0.3s;
        white-space: nowrap;
    }

        .field-players-and-goalies-tabs-btn button:hover {
            background-color: rgb(0 93 191 / 5%);
        }

        .field-players-and-goalies-tabs-btn button.active,
        .field-players-and-goalies-tabs-btn button.active:hover {
            background-color: rgb(0, 93, 191);
            color: rgb(255, 255, 255);
        }

#GoaliesTbl {
    display: none;
}

.mngevnt-tbpnlmn .top-bar-right {
    justify-content: space-between;
    width: 100%;
    gap: 14px;
}

.searcblmnslmcvnt {
    position: relative;
    width: 100%;
}

    .searcblmnslmcvnt .select-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        box-shadow: unset;
        font-size: 12px;
        color: white;
        padding: 12px;
        background-color: #0B1120;
        border: 1px solid #1E293B;
        border-radius: 8px;
        cursor: text;
        min-height: 44px;
        position: relative;
    }

        .searcblmnslmcvnt .select-box input {
            background: transparent;
            border: none;
            color: white;
            outline: none;
            font-size: 12px;
            flex-grow: 1;
            min-width: 80px;
            padding: 0;
            margin: 0;
        }

            .searcblmnslmcvnt .select-box input::placeholder {
                color: #6b7280;
            }

    .searcblmnslmcvnt .arrow-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
        font-size: 12px;
        pointer-events: none;
        transition: transform 0.3s ease;
    }

    .searcblmnslmcvnt.open .arrow-icon {
        transform: translateY(-50%) rotate(180deg);
    }

    .searcblmnslmcvnt .tag {
        background-color: #005DBF;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        animation: fadeIn 0.2s ease;
    }

        .searcblmnslmcvnt .tag .remove-btn {
            cursor: pointer;
            font-weight: normal;
            font-size: 12px;
            line-height: 1;
            color: #cbd5e1;
            transition: color 0.2s;
            display: flex;
            align-items: center;
        }

            .searcblmnslmcvnt .tag .remove-btn:hover {
                color: white;
            }

    .searcblmnslmcvnt .dropdown-list {
        display: none;
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        right: 0;
        background-color: #131D37;
        border: 1px solid #1E293B;
        border-radius: 4px;
        overflow: hidden;
        z-index: 9999;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    }

    .searcblmnslmcvnt.open .dropdown-list {
        display: block;
    }

    .searcblmnslmcvnt .dropdown-header {
        background-color: #005DBF;
        color: white;
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 600;
    }

    .searcblmnslmcvnt ul {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 220px;
        overflow-y: auto;
    }

        .searcblmnslmcvnt ul li {
            padding: 12px;
            color: white;
            font-size: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: background 0.2s;
        }

            .searcblmnslmcvnt ul li:last-child {
                border-bottom: none;
            }

            .searcblmnslmcvnt ul li:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

            .searcblmnslmcvnt ul li.disabled {
                opacity: 0.4;
                cursor: not-allowed;
                background-color: transparent;
            }

    .searcblmnslmcvnt .no-data {
        padding: 12px;
        color: #94a3b8;
        font-size: 12px;
        text-align: center;
    }

    .searcblmnslmcvnt ul::-webkit-scrollbar {
        width: 8px;
    }

    .searcblmnslmcvnt ul::-webkit-scrollbar-track {
        background: #131D37;
    }

    .searcblmnslmcvnt ul::-webkit-scrollbar-thumb {
        background: #005DBF;
        border-radius: 4px;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#PlayerMergePopupMn {
    display: none;
}

/* ==== manage event page end ==== */


/* ======================== Tacbot ==========================*/

#tacbotResultBody {
    color: #d1d9e6;
}

    #tacbotResultBody .card {
        background: #131D37 !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    #tacbotResultBody .card-header {
        background: #005dbf !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        font-weight: 600;
        border-radius: 10px 10px 0 0 !important;
    }

    #tacbotResultBody .card-body {
        color: #d1d9e6 !important;
        overflow-x: auto;
    }

    #tacbotResultBody h4,
    #tacbotResultBody h5,
    #tacbotResultBody strong {
        color: #ffffff !important;
    }

    #tacbotResultBody p,
    #tacbotResultBody .text-muted {
        color: #8A99AD !important;
    }

    /* ---- Comparison Table ---- */
    #tacbotResultBody table.tacbot-stat-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }

        #tacbotResultBody table.tacbot-stat-table thead th {
            color: #8A99AD;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            padding: 8px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            border-top: none;
        }

            #tacbotResultBody table.tacbot-stat-table thead th:first-child {
                text-align: left;
            }

        #tacbotResultBody table.tacbot-stat-table tbody td {
            padding: 10px;
            text-align: center;
            vertical-align: middle;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            color: #d1d9e6;
            font-size: 14px;
        }

            #tacbotResultBody table.tacbot-stat-table tbody td:first-child {
                text-align: left;
                color: #ffffff;
                font-weight: 500;
            }

        #tacbotResultBody table.tacbot-stat-table tbody tr:last-child td {
            border-bottom: none;
        }

        #tacbotResultBody table.tacbot-stat-table tbody tr:hover td {
            background: rgba(0,93,191,0.08);
        }

    /* ---- Badges inside table ---- */
    #tacbotResultBody .badge {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 6px;
        display: inline-block;
        min-width: 44px;
    }

    #tacbotResultBody .badge-success {
        background: #10B981 !important;
        color: #fff !important;
    }

    #tacbotResultBody .badge-danger {
        background: #EF4444 !important;
        color: #fff !important;
    }

    #tacbotResultBody .badge-warning {
        background: #F59E0B !important;
        color: #0B1120 !important;
    }

    #tacbotResultBody .text-success {
        color: #10B981 !important;
    }

    #tacbotResultBody .text-danger {
        color: #EF4444 !important;
    }

    #tacbotResultBody ul {
        padding-left: 20px;
    }

        #tacbotResultBody ul li {
            margin-bottom: 10px;
            color: #d1d9e6 !important;
        }

    #tacbotResultBody img {
        background: #fff;
        border-radius: 50%;
        padding: 4px;
    }

    /* Force any leftover row/col markup to stack full-width, one below another */
    #tacbotResultBody .row {
        display: flex;
        flex-direction: column;
        margin: 0 !important;
    }

        #tacbotResultBody .row > [class*="col-"] {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
            padding: 0 !important;
        }

#tacbotResultBody {
    width: 100% !important;
}

@media (max-width: 768px) {
    #tacbotResultBody .card-header {
        font-size: 14px;
        padding: 10px 14px;
    }

    #tacbotResultBody .card-body {
        padding: 14px;
    }

    #tacbotResultBody table.tacbot-stat-table thead th,
    #tacbotResultBody table.tacbot-stat-table tbody td {
        font-size: 12px;
        padding: 7px 6px;
    }

    #tacbotResultBody .d-flex.justify-content-center.align-items-center {
        flex-wrap: wrap;
        gap: 12px;
    }

    #tacbotResultBody img {
        height: 45px !important;
        width: 45px !important;
    }

    #tacbotResultBody .badge {
        font-size: 11px;
        padding: 3px 7px;
        min-width: 36px;
    }
}

/* ======================== Tacbot - End ==========================*/
/* ==== manage event page end ==== */

/* ==== manage Club page start ==== */

#AddNWEditPlayerPopupMn,
#MoveGameCraditsPopupMn,
#SelectPlayerFilterPopupMn,
#AddEditFanPopupMn,
#FieldPlayersOverallStatsPopupMn {
    display: none;
}

.mngclub-tgl {
    width: fit-content;
    background-color: unset;
    padding: unset;
    border-radius: unset;
    box-shadow: unset;
    border: unset;
}

.Move-game-cradits-pppmn {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #bfbcbc30;
    top: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(2px);
    bottom: 0px;
    margin: auto;
    z-index: 9999;
    overflow: auto;
    scrollbar-color: #005DBF #131D37;
    scrollbar-width: thin;
}

    .Move-game-cradits-pppmn .modal-container {
        position: absolute;
        top: 40px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 95%;
        max-width: 500px;
        background-color: #131D37;
        border: 1px solid #002D5B;
        border-radius: 12px;
    }

    .Move-game-cradits-pppmn .header {
        padding: 20px;
        border-bottom: 1px solid #002D5B;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }

        .Move-game-cradits-pppmn .header h2 {
            margin: 0;
            font-family: 'Inter 18pt Medium';
            font-size: 20px;
            color: white;
        }

    .Move-game-cradits-pppmn .body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .Move-game-cradits-pppmn .source-box {
        background: #0B1120;
        padding: 16px;
        border-radius: 8px;
        border: 1px solid rgb(30, 41, 59);
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .Move-game-cradits-pppmn .source-text {
        flex: 1;
        color: #9ca3af;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .Move-game-cradits-pppmn input,
    .Move-game-cradits-pppmn select {
        background: #0B1120;
        border: 1px solid rgb(30, 41, 59);
        border-radius: 6px;
        padding: 10px 12px;
        color: white;
        font-size: 14px;
    }

    .Move-game-cradits-pppmn .small-input {
        width: 60px;
        min-width: 60px;
        text-align: center;
        font-weight: 600;
        color: white;
    }

    .Move-game-cradits-pppmn .destination-rw {
        width: 100%;
        display: flex;
        gap: 12px;
    }

    .Move-game-cradits-pppmn select {
        flex: 1;
        cursor: pointer;
    }

    .Move-game-cradits-pppmn .player-assocation-left-panel-main .footer-actions {
        padding: 20px;
        border-top: 1px solid #002D5B;
    }

    .Move-game-cradits-pppmn .move-btn {
        background-color: #005DBF;
        color: white;
        border: none;
        padding: 12px 32px;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s;
    }

        .Move-game-cradits-pppmn .move-btn:hover {
            background-color: #004a99;
        }

#FieldPlayersOverallStatsPopupMn .table-responsive table thead tr th,
#FieldPlayersOverallStatsPopupMn .table-responsive table tbody tr td,
#GoaliesOverallStatsPopupMn .table-responsive table thead tr th,
#GoaliesOverallStatsPopupMn .table-responsive table tbody tr td {
    text-wrap: nowrap;
}

#FieldPlayersOverallStatsPopupMn .pass-per-minute-popup-body-container,
#GoaliesOverallStatsPopupMn .pass-per-minute-popup-body-container {
    top: 40px;
    left: 0px;
    right: 0px;
    bottom: unset;
    margin: auto;
}

.objectactionbtnmn {
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid transparent;
    position: relative;
    outline: none;
}

    .objectactionbtnmn.true-state {
        background-color: #005DBF;
        border: 1px solid #005DBF;
        color: #ffffff;
    }

    .objectactionbtnmn.false-state {
        background-color: rgba(239, 68, 68, 0.2);
        border-color: #EF4444;
        color: #EF4444;
    }

    .objectactionbtnmn::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 150%;
        left: unset;
        right: 0px;
        background: #212529;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s;
        pointer-events: none;
        z-index: 1000;
    }

    .objectactionbtnmn:hover::after {
        opacity: 1;
        visibility: visible;
    }

.manage-events-fixtures-cntnr-mn th:last-child,
.manage-events-fixtures-cntnr-mn td:last-child {
    text-align: right;
}

.manage-events-fixtures-cntnr-mn .action-icons {
    justify-content: end;
}

/* ==== manage Club page end ==== */
/* ======================== Tacbot - End ==========================*/

/* ==== Multi Individual Game Summary Page start ==== */

.player-nm-and-icn {
    width: fit-content;
}

    .player-nm-and-icn .player-display-card {
        background-color: #0b1120;
        padding: 12px 24px;
        border-radius: 12px;
        border: 1px solid #1e293b;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        transition: all 0.3s ease;
    }

    .player-nm-and-icn .player-label {
        font-size: 0.75rem;
        color: #a0aec0;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
    }

    .player-nm-and-icn .player-name {
        font-size: 1.1rem;
        font-weight: 500;
        color: #ffffff;
    }

.multi-individual-game-page-main-container th:last-child,
.multi-individual-game-page-main-container td:last-child {
    text-align: center;
}

.custom-divider-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
}

.section-divider td {
    background-color: #314158 !important;
    padding: 4px 0 !important;
    border-top: 1px solid #1a2533 !important;
    border-bottom: 1px solid #1a2533 !important;
}

.divider-line {
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(90deg, #005DBF, #001122, #005DBF);
}

/* ==== Multi Individual Game Summary Page end ==== */

/* ==== Select a Plan To continue page start ==== */

.selectplanprchesmn-wrapper {
    width: 100%;
    background-color: #0B1120;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.selectplanprchesmn-football-bg {
    position: absolute;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
    filter: drop-shadow(0 0 30px rgba(0, 93, 191, 0.8)) blur(2px);
    animation: selectplanprchesmn-float-rotate 25s infinite linear;
}

.selectplanprchesmn-football-1 {
    top: -10%;
    right: -5%;
    width: 500px;
}

.selectplanprchesmn-football-2 {
    bottom: -15%;
    left: -10%;
    width: 600px;
    animation-direction: reverse;
    animation-duration: 35s;
    opacity: 0.1;
}

.selectplanprchesmn-ambient-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 93, 191, 0.15) 0%, rgba(11, 17, 32, 0) 70%);
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

@keyframes selectplanprchesmn-float-rotate {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(90deg);
    }

    50% {
        transform: translateY(0) rotate(180deg);
    }

    75% {
        transform: translateY(20px) rotate(270deg);
    }

    100% {
        transform: translateY(0) rotate(360deg);
    }
}

.selectplanprchesmn-header {
    background-color: rgba(19, 29, 55, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 10;
}

.selectplanprchesmn-logos {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .selectplanprchesmn-logos img {
        height: 24px;
        width: auto;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }

.selectplanprchesmn-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.selectplanprchesmn-main-title {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 60px;
    text-align: center;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 20px rgba(0, 93, 191, 0.4);
    animation: selectplanprchesmn-fade-down 1s ease-out;
}

@keyframes selectplanprchesmn-fade-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selectplanprchesmn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    align-items: stretch;
}

.selectplanprchesmn-card {
    background: linear-gradient(145deg, rgba(19, 29, 55, 0.7) 0%, rgba(19, 29, 55, 0.4) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    animation: selectplanprchesmn-fade-up 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

    .selectplanprchesmn-card:nth-child(1) {
        animation-delay: 0.1s;
    }

    .selectplanprchesmn-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .selectplanprchesmn-card:nth-child(3) {
        animation-delay: 0.3s;
    }

@keyframes selectplanprchesmn-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selectplanprchesmn-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
    z-index: 1;
    pointer-events: none;
}

.selectplanprchesmn-card:hover {
    transform: translateY(-12px);
    border-color: rgba(0, 93, 191, 0.4);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 93, 191, 0.2);
}

    .selectplanprchesmn-card:hover::before {
        left: 150%;
    }

.selectplanprchesmn-card-content {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.selectplanprchesmn-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}

.selectplanprchesmn-price-box {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 40px;
}

.selectplanprchesmn-currency {
    font-size: 24px;
    font-weight: 600;
    color: #8b9bb4;
    margin-top: 10px;
}

.selectplanprchesmn-price {
    font-size: 64px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -2px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.selectplanprchesmn-features {
    list-style: none;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0px;
    margin-bottom: 40px;
}

.selectplanprchesmn-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: #b0c0d8;
}

.selectplanprchesmn-feature-icon {
    color: #005DBF;
    font-size: 18px;
    filter: drop-shadow(0 0 5px rgba(0, 93, 191, 0.5));
}

.selectplanprchesmn-feature-text strong {
    color: #ffffff;
    font-weight: 600;
}

.selectplanprchesmn-card .btn-mn-box-mn-tltps.tbl-top-btn {
    margin-bottom: 0px;
}

@media (max-width: 992px) {
    .selectplanprchesmn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============== POPUP start ============= */

.paymentprosseedpppmn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(191, 188, 188, 0.19);
    backdrop-filter: blur(2px);
    z-index: 9999;
    padding: 40px;
    box-sizing: border-box;
}

    .paymentprosseedpppmn .player-assocation-left-panel-main .footer-actions {
        padding: 12px 24px 12px 24px;
        border-top: 1px solid #002d5b;
    }

    .paymentprosseedpppmn .modal-container {
        width: 95%;
        max-width: 600px;
        background-color: #131D37;
        border-radius: 10px;
        border: 1px solid #002d5b;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        animation: zoomIn 0.3s ease forwards;
        position: absolute;
        top: 40px;
        left: 0px;
        right: 0px;
        margin: auto;
    }

    .paymentprosseedpppmn .header {
        padding: 16px 24px;
        border-bottom: 1px solid #002d5b;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .paymentprosseedpppmn .header h2 {
            margin: 0;
            font-size: 18px;
            color: white;
        }

    .paymentprosseedpppmn .close-btn {
        background-color: #eb5757;
        border: none;
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    .paymentprosseedpppmn .body {
        padding: 24px;
    }

    .paymentprosseedpppmn .info-note {
        background-color: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 8px;
        padding: 16px;
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        color: #dbeafe;
        font-size: 14px;
        line-height: 1.5;
    }

    .paymentprosseedpppmn .input-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 6px;
        padding: 8px 12px;
        box-sizing: border-box;
    }

        .paymentprosseedpppmn .input-wrapper input {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            color: white;
            padding: 0 10px;
            font-size: 14px;
        }

    .paymentprosseedpppmn .autofill-btn {
        background: #064e3b;
        color: #34d399;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
    }

#PaymentDetailsPopupMn {
    display: none;
}

/* ============== POPUP end ============= */

/* ==== Select a Plan To continue page end ==== */

/* ==== Team Transaction page start ==== */

.team-transaction-main-container {
    width: 100%;
}

    .team-transaction-main-container .possession-summary-card-main {
        overflow: auto;
        margin-bottom: 0px;
    }

/* ==== Team Transaction page end ==== */

/* ==== extra changes start ==== */

#tacbotResultBody {
    padding: 0px !important;
}

    #tacbotResultBody .container-fluid {
        padding: 0px !important;
    }

#tab5 .ia-toolbar,
#tab4 .ia-toolbar {
    flex-wrap: wrap !important;
}

#ta-scheduled .dashboard-contant-main-container {
    padding: 0px;
}

#ta-completed .dashboard-contant-main-container {
    padding: 0px;
}

#deleted-guest .mng-team-table-mn-cntnr {
    background-color: #131D37;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #005DBF rgb(20, 27, 43);
}

#tab4 .ia-dt-controls {
    flex-wrap: wrap;
    gap: 12px;
}

/* ==== extra changes end ==== */

.autocomplete-items div {
    color: white;
    cursor: pointer;
}

/* ==== Fan Team page start ==== */

.back-to-page-arrow-btn {
    width: fit-content;
    margin-bottom: 16px;
}

    .back-to-page-arrow-btn a {
        display: flex;
        align-items: center;
        width: fit-content;
        height: fit-content;
        gap: 8px;
        color: white;
        font-family: 'Inter 18pt Medium';
        font-size: 16px;
    }

.search-and-follow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

    .search-and-follow-row h5 {
        font-family: 'Inter 18pt SemiBolt';
        font-size: 16px;
    }

#AdvanceSearchPopupMn {
    display: none;
}

/* ==== Fan Team page end ==== */

/* ==== dropdown menu for input start ==== */

.input-plyer-dpdn-main {
    width: 100%;
    position: relative;
}

    .input-plyer-dpdn-main .dropdown-container {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        border-left: 1px solid #ffffff42;
        overflow: unset;
        max-height: unset;
        width: fit-content;
        height: 48px;
        background: transparent;
        transition: unset;
        border-radius: 0px;
        padding: 0px 12px;
    }

    .input-plyer-dpdn-main .dropdown-selected {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        user-select: none;
        color: #cbd5e1;
        font-weight: 500;
        font-size: 0.9rem;
        transition: color 0.2s;
    }

        .input-plyer-dpdn-main .dropdown-selected:hover {
            color: #ffffff;
        }

        .input-plyer-dpdn-main .dropdown-selected i {
            font-size: 0.75rem;
            transition: transform 0.2s;
        }

    /* Dropdown options popup list */
    .input-plyer-dpdn-main .dropdown-list {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        background: #0B1120;
        border: 1px solid #ffffff42;
        border-radius: 0.6rem;
        width: 90px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
        display: none;
        z-index: 50;
        overflow: hidden;
    }

        .input-plyer-dpdn-main .dropdown-list.active {
            display: block;
        }

    .input-plyer-dpdn-main .dropdown-item {
        padding: 8px 12px;
        font-size: 0.9rem;
        color: #cbd5e1;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
    }

        .input-plyer-dpdn-main .dropdown-item:hover {
            background: #005DBF;
            color: #ffffff;
        }

/* ==== dropdown menu for input end ==== */

/* ==== Choose a resume section start ==== */

.choose-resume-to-preview {
    width: 100%;
    box-sizing: border-box;
}

.choose-resume-to-preview-container {
    width: 100%;
    text-align: center;
}

.choose-resume-to-preview-title {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.choose-resume-to-preview-grid {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.choose-resume-to-preview-card {
    /*    width: calc(50% - 12px);*/
    background-color: #1c2a4d;
    border: 3px solid transparent;
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .choose-resume-to-preview-card:hover {
        transform: translateY(-5px);
        border-color: rgba(0, 93, 191, 0.5);
    }

.choose-resume-to-preview-img {
    /*    width: 100%;*/
    height: 420px;
    /*    object-fit: contain;*/
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #2a3b66;
    border: 1px solid #334878;
}

.choose-resume-to-preview-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.choose-resume-to-preview-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    position: relative;
    transition: border-color 0.2s ease;
}

    .choose-resume-to-preview-radio:checked {
        border-color: #005DBF;
    }

        .choose-resume-to-preview-radio:checked::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 10px;
            height: 10px;
            background-color: #005DBF;
            border-radius: 50%;
        }

.choose-resume-to-preview-label-text {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
}

.choose-resume-to-preview-card:has(.choose-resume-to-preview-radio:checked) {
    border-color: #005DBF;
    box-shadow: 0 0 20px rgba(0, 93, 191, 0.4);
}

.my-player-profile-btn-preview {
    width: 100%;
    justify-content: end;
}

    .my-player-profile-btn-preview .footer-actions {
        padding-top: 24px;
        border-top: none;
    }

@media (max-width: 767px) {

    .choose-resume-to-preview-img {
        height: 340px;
    }
}

@media (max-width: 575px) {

    .choose-resume-to-preview-img {
        height: 250px;
    }

    .choose-resume-to-preview-card {
        padding: 8px;
    }

    .choose-resume-to-preview-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {

    .choose-resume-to-preview-card {
        width: 100%;
    }

    .choose-resume-to-preview-img {
        margin-bottom: 16px;
    }

    .choose-resume-to-preview-label-text {
        font-size: 14px;
    }

    .choose-resume-to-preview-grid {
        gap: 16px;
    }

    .choose-resume-to-preview-title {
        font-size: 16px;
        margin-bottom: 16px;
    }
}

/* ==== Choose a resume section end ==== */

/* ==== verify your email page start ==== */

.verify-mn-pg-cntnr {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('https://adminuat.touchlynk.com/assets/images/auth_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow-x: hidden;
    background-color: #050811;
}

.verify-your-email-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

    .verify-your-email-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgb(5 8 17 / 30%) 0%, rgb(10 15 30 / 40%) 100%);
        z-index: 1;
        pointer-events: none;
    }

.rotating-ball {
    position: absolute;
    object-fit: contain;
    opacity: 0.8;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
    pointer-events: none;
    z-index: 2;
    animation: rotateBall 18s linear infinite;
}

.ball-top-right {
    top: -50px;
    right: -50px;
    width: 260px;
    height: 260px;
    animation-direction: normal;
}

.ball-bottom-left {
    bottom: -60px;
    left: -60px;
    width: 290px;
    height: 290px;
    animation-direction: reverse;
    animation-duration: 24s;
}

@keyframes rotateBall {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .ball-top-right {
        width: 140px;
        height: 140px;
        top: -30px;
        right: -30px;
    }

    .ball-bottom-left {
        width: 160px;
        height: 160px;
        bottom: -35px;
        left: -35px;
    }

    .verify-your-email-main {
        padding: 28px !important;
    }
}

@media (max-width: 575px) {

    .verify-your-email-main {
        padding: 18px !important;
    }

        .verify-your-email-main .logo-img {
            height: fit-content !important;
        }

        .verify-your-email-main .logo-container,
        .verify-your-email-main h2 {
            margin-bottom: 18px !important;
        }

        .verify-your-email-main input[type="email"] {
            padding: 10px 18px;
        }

        .verify-your-email-main .footer-link {
            margin-top: 18px !important;
        }

        .verify-your-email-main button {
            padding: 12px !important;
        }
}

.verify-your-email-main-container {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-your-email-main {
    width: 100%;
    max-width: 440px;
    background-color: rgba(11, 17, 32, 0.75);
    padding: 40px 32px;
    border-radius: 28px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    animation: fadeInCard 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.verify-your-email-main .logo-container {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.verify-your-email-main .logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
}

.verify-your-email-main h2 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 28px;
    font-family: 'Inter', sans-serif;
}

.verify-your-email-main .input-group {
    position: relative;
    margin-bottom: 18px;
}

.verify-your-email-main input[type="email"] {
    width: 100%;
    padding: 14px 20px;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.06);
    font-family: 'Inter', sans-serif;
}

    .verify-your-email-main input[type="email"]::placeholder {
        color: #94a3b8;
    }

    .verify-your-email-main input[type="email"]:focus {
        border-color: #0d6efd;
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
    }

.verify-your-email-main button {
    width: 100%;
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 6px;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}

    .verify-your-email-main button:hover {
        background-color: #0b5ed7;
        box-shadow: 0 6px 16px rgba(13, 110, 253, 0.6);
        transform: translateY(-1px);
    }

    .verify-your-email-main button:active {
        transform: translateY(1px) scale(0.98);
    }

.verify-your-email-main .footer-link {
    text-align: center;
    margin-top: 24px;
}

    .verify-your-email-main .footer-link a {
        color: #3b82f6;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: color 0.2s;
        font-family: 'Inter', sans-serif;
    }

        .verify-your-email-main .footer-link a:hover {
            text-decoration: underline;
            color: #60a5fa;
        }

/* ==== verify your email page end ==== */

/* ==== Coming Soon Section start ==== */

.comingsoon-sectionmn {
    width: 100%;
    flex: 1;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    .comingsoon-sectionmn .comingsoon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        max-width: 520px;
        width: 100%;
        z-index: 2;
    }

    .comingsoon-sectionmn .comingsoon-ball-box {
        position: relative;
        margin-bottom: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: comingsoon-float 3.5s ease-in-out infinite;
    }

    .comingsoon-sectionmn .comingsoon-glow {
        position: absolute;
        width: 150px;
        height: 150px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, rgba(99, 102, 241, 0.15) 50%, rgba(0, 0, 0, 0) 70%);
        border-radius: 50%;
        filter: blur(8px);
        animation: comingsoon-glow-pulse 3.5s infinite ease-in-out;
    }

    .comingsoon-sectionmn .comingsoon-orbit-ring {
        position: absolute;
        width: 145px;
        height: 145px;
        border: 2px dashed rgba(96, 165, 250, 0.25);
        border-radius: 50%;
        animation: comingsoon-reverse-rotate 12s linear infinite;
    }

    .comingsoon-sectionmn .comingsoon-ball-img {
        width: 110px;
        height: 110px;
        object-fit: contain;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(59, 130, 246, 0.4));
        animation: comingsoon-rotate 7s linear infinite;
        transition: transform 0.3s ease;
    }

    .comingsoon-sectionmn .comingsoon-shadow {
        width: 85px;
        height: 14px;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 70%);
        border-radius: 50%;
        position: absolute;
        bottom: -22px;
        filter: blur(3px);
        animation: comingsoon-shadow-scale 3.5s ease-in-out infinite;
    }

    .comingsoon-sectionmn .comingsoon-title {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: 2px;
        margin-bottom: 14px;
        text-transform: uppercase;
        background: linear-gradient(90deg, #ffffff 0%, #005DBF 50%, #ffffff 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: comingsoon-shimmer 4s linear infinite;
    }

    .comingsoon-sectionmn .comingsoon-subtitle {
        font-size: 15px;
        line-height: 1.7;
        color: #94a3b8;
        font-weight: 400;
        max-width: 440px;
    }

@keyframes comingsoon-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes comingsoon-reverse-rotate {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes comingsoon-float {

    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes comingsoon-shadow-scale {

    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(0.65);
        opacity: 0.3;
    }
}

@keyframes comingsoon-glow-pulse {

    0%, 100% {
        transform: scale(0.95);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.9;
    }
}

@keyframes comingsoon-shimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

@media (max-width: 640px) {
    .comingsoon-sectionmn {
        min-height: 380px;
        padding: 30px 15px;
    }

        .comingsoon-sectionmn .comingsoon-ball-img {
            width: 85px;
            height: 85px;
        }

        .comingsoon-sectionmn .comingsoon-orbit-ring {
            width: 115px;
            height: 115px;
        }

        .comingsoon-sectionmn .comingsoon-title {
            font-size: 26px;
        }

        .comingsoon-sectionmn .comingsoon-subtitle {
            font-size: 14px;
        }
}

/* ==== Coming Soon Section end ==== */
/* ==== verify your email page end ==== */

.player-assocation-right-panel-main .game-video-container-box-main video {
    height: 58vh;
}

/* ===== shield hover start ==== */

.sdbr-hvr-cmngsn-view {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 1px;
    color: #a0aec0;
    margin-top: 2px;
    margin-bottom: 12px;
}

    .sdbr-hvr-cmngsn-view .country-flag {
        width: 26px;
        height: 18px;
        background: linear-gradient(to bottom, #b22234 33%, #fff 33%, #fff 66%, #3c3b6e 66%);
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .sdbr-hvr-cmngsn-view .player-image-wrapper {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 68%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .sdbr-hvr-cmngsn-view .player-photo {
        width: 100%;
        height: 105%;
        object-fit: cover;
        object-position: top center;
        mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    }

    .sdbr-hvr-cmngsn-view .player-name-banner {
        position: absolute;
        bottom: 12px;
        left: 12px;
        right: 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 3;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

    .sdbr-hvr-cmngsn-view .player-name {
        font-size: 15px;
        font-weight: 900;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #fff;
    }

    .sdbr-hvr-cmngsn-view .player-number {
        font-size: 22px;
        font-weight: 900;
        color: #f6e05e;
        line-height: 1;
    }

    .sdbr-hvr-cmngsn-view .card-bottom-section {
        height: 38%;
        background-color: #f7df1e;
        color: #1a202c;
        padding: 12px 18px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 16px;
        position: relative;
        border-top: 3px solid #131D37;
        box-sizing: border-box;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 38px;
    }

    .sdbr-hvr-cmngsn-view .stat-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 800;
        font-size: 14px;
    }

    .sdbr-hvr-cmngsn-view .stat-value {
        font-size: 16px;
        font-weight: 900;
    }

    .sdbr-hvr-cmngsn-view .performance-rating-overlay {
        position: relative;
        width: 100%;
        height: fit-content;
        background: rgba(19, 29, 55, 0.96);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 50px 15px 30px 15px;
        box-sizing: border-box;
        border-radius: 16px;
        border: 2px solid white;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
        bottom: -140px;
        transition: all 0.3s ease-in-out;
    }

    .sdbr-hvr-cmngsn-view .overlay-icon-badge {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        width: 56px;
        height: 56px;
        display: flex;
        justify-content: center;
        border-radius: 50%;
        border: 2px solid white;
        background: #005DBF;
        align-items: center;
        color: #ffffff;
        animation: whitePulseGlow 2s infinite;
    }

@keyframes whitePulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(255, 255, 255, 0), 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

.sdbr-hvr-cmngsn-view .shield-card-container {
    width: 269px;
    height: 392px;
    background-color: #131D37;
    border-radius: 20px 20px 40px 40px;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: visible;
    /* Allows badge to pop out of top */
    border: 2px solid #2a3b63;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.sdbr-hvr-cmngsn-view .card-top-section {
    height: 62%;
    position: relative;
    display: flex;
    background: linear-gradient(135deg, #1b2a4e 0%, #131D37 100%);
    overflow: hidden;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.sdbr-hvr-cmngsn-view .player-stats-left {
    width: 35%;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.sdbr-hvr-cmngsn-view .team-logo {
    width: 35px;
    height: 42px;
    background: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b1120;
    font-size: 14px;
    margin-bottom: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.sdbr-hvr-cmngsn-view .player-rating-number {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.sdbr-hvr-cmngsn-view .player-position {
    font-size: 11px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: whitePulseGlow 2s infinite;
}

@keyframes whitePulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(255, 255, 255, 0), 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

.sdbr-hvr-cmngsn-view .shield-card-container:hover .overlay-icon-badge {
    transform: translateX(-50%) scale(1);
}

.sdbr-hvr-cmngsn-view .overlay-icon {
    font-size: 18px;
    color: #ffffff;
    animation: sdbr-pulse 1.5s infinite;
}

.sdbr-hvr-cmngsn-view .overlay-title {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-transform: uppercase;
}

.sdbr-hvr-cmngsn-view .overlay-subtitle {
    color: #ffffff;
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-top: 16px;
    letter-spacing: 0.6px;
    background: #005DBF;
    padding: 6px 12px;
    border-radius: 20px;
}

@keyframes sdbr-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
        text-shadow: 0 0 10px rgba(0, 93, 191, 0.6);
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.sidebar-shield-main-bg-clr {
    position: relative;
    overflow: hidden;
}

.sdbr-hvr-cmngsn-view {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    z-index: 9999999999;
    width: 100%;
    height: 100%;
    align-items: end;
    background: rgb(19 29 55 / 20%);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.sidebar-shield-main-bg-clr:hover .sdbr-hvr-cmngsn-view {
    opacity: 1;
    visibility: visible;
}

.sidebar-shield-main-bg-clr:hover .performance-rating-overlay {
    bottom: 0px;
}

/* ===== shield hover end ==== */