@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    --rd-theme-font-family: 'Poppins', sans-serif;
    --rd-app-color: #0948b3;
    --rd-app-font-size: clamp(0.87rem, 0.9vw, 1rem);
    --rd-app-primary-color: #5E6278;
    --rd-app-text-color-100: #181C32;
    --rd-app-text-color-200: #F4F4F4;
    --rd-app-text-color-300: #B5B5C3;
    --rd-app-text-color-400: #A1A5B7;
    --rd-app-text-color-500: #7E8299;
    --rd-app-text-color-600: #3F4254;
    --rd-app--border-color: #E1E3EA;
    --rd-app-bg-color: #F5F8FA;
    --rd-app-bg-light-color-100: #F4F6FA;
    --rd-app-breadcrumb-color: #A1A5B7;
    --rd-app-header-bg: #ffffff;
    --rd-app-header-padding-x: 1.8rem;
    --rd-app-header-padding-y: 0.9rem;
    --rd-app-header-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.05);
    --rd-app-cotent-padding: 1.8rem;
    --rd-app-card-color-bg: #ffffff;
    --rd-app-card-border-radius: 6px;
    --rd-app-card-box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.04);
    --rd-app-width: 280px;
    --rd-wrapper-padding-left: 280px;
    --rd-app-menu-color: #ffffff;
    --rd-app-menu-color-hover: #0d3374;
    --rd-app-menu-color-100: #ffffff;
    --rd-app-menu-color-200: #D3EFFF;
    --rd-app-offcanvas-width: 280px !important;
    --rd-app-btn-small-padding: 0.6rem 1rem;
    --rd-app-alert-box-padding: 0.75rem 1rem;
    --rd-app-alert-box-fs: 0.935rem;
    --rd-app-alert-box-mb: 0;
    --rd-app-textbox-padding: 0.6rem 0.6rem;
    --rd-app-selectbox-padding: 0.6rem 1.8rem 0.6rem 0.6rem;
    --rd-app-datarange-bg: #F1FAFF;
    --rd-app-border-dashed-color: #E1E3EA;
    /*multi color*/
    --rd-app-blue: #0F6FEC;
    --rd-app-blue-hover: #0c63d5;
    --rd-app-blue-light: #F1FAFF;
    --rd-app-blue-light-100: #e9f3f8;
    --rd-app-green: #1a8e4e;
    --rd-app-green-light: #E8FFF3;
    --rd-app-violet: #7239EA;
    --rd-app-violet-light: #F8F5FF;
    --rd-app-red: #dc3545;
    --rd-app-red-light: #FFF5F8;
    --rd-app-yellow: #ffc107;
    --rd-app-yellow-light: #fff8dd;
    --rd-app-lgray: #7E8299;
    --rd-app-lgray-light: #F9F9F9;
    --rd-app-dark: #181C32;
    --rd-app-dark-light: #F4F4F4;
    /*table*/
    --rd-app-table-padding: 0.6rem 0.5rem;
    --rd-app-table-border-color: #E1E3EA;
    --rd-app-table-th-fs: 0.875rem;
    --rd-app-table-td-fs: 0.935rem;
    --rd-app-table-thead-text-color: #B5B5C3;
    --rd-app-table-tbody-text-color: #3F4254;
    --rd-app-table-action-btn-bg: #F9F9F9;
    --rd-app-table-action-btn-hover-bg: #eff2f5;
    --bs-blue-color-100: #2A274D;
    --bs-blue-color-200: #302B6B;
    --bs-blue-color-300: #4C5071;
    --bs-body-font-size: 15px;
    --bs-body-text-color: #ffffff;
    --bs-body-bg-color: #18172C;
    --bs-border-color: #8184A5;
    --bs-iconbtn-hover-color: linear-gradient(219.66deg, #20A990 4.3%, #28BA6D 96.56%);
}

a {
    text-decoration: none;
}

@media (max-width: 575.98px) {
    :root {
        --rd-app-cotent-padding: 1rem;
        --rd-app-header-padding-x: 1rem;
        --rd-app-btn-small-padding: 0.4rem 0.7rem;
    }
}

/*page scrollbar css*/
html {
    scrollbar-color: #A1A5B7 #B5B5C3;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: #A1A5B7;
    border-radius: 0px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #A1A5B7;
    }

::-webkit-scrollbar-track {
    background-color: transparent;
}
/*page scrollbar css end*/

body {
    font-family: var(--rd-theme-font-family);
    color: var(--rd-app-primary-color);
    font-size: var(--rd-app-font-size);
    font-weight: var(--rd-app-font-weight);
    background-color: var(--rd-app-bg-color);
}
/*page left side css*/
.app-side-menu {
    background-color: var(--rd-app-color);
}
    /*menu css*/
    .app-side-menu .app-menu {
        height: calc(100vh - 80px);
        overflow-y: auto;
        margin-top: 1rem;
        padding-right: 0.5rem;
        scrollbar-color: var(--rd-app-color) var(--rd-app-color);
        scrollbar-width: thin;
    }

        .app-side-menu .app-menu:hover {
            scrollbar-color: rgba(255, 255, 255, 30%) var(--rd-app-color);
        }

    .app-side-menu .app-menu {
        scrollbar-color: #fff var(--rd-app-color);
    }

        .app-side-menu .app-menu::-webkit-scrollbar {
            width: 3px;
            height: 8px;
        }

        .app-side-menu .app-menu::-webkit-scrollbar-thumb {
            background-color: var(--rd-app-color);
            border-radius: 0px;
        }

        .app-side-menu .app-menu:hover::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 30%) !important;
            border-radius: 0px;
        }

.app-menu .nav-item .nav-link {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--rd-app-menu-color-100);
    display: flex;
    align-items: center;
    transition: all 0s linear 0s;
    white-space: nowrap;
    gap: 0.5rem;
}

    .app-menu .nav-item .nav-link i {
        font-size: 1rem;
    }

.app-side-menu .app-menu .accordion {
    --bs-accordion-bg: transparent !important;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='%23D3EFFF'%3e%3cpath d='M3.27989 3.23571L1.53642 4.97917C1.36382 5.15176 1.36383 5.43158 1.53642 5.60417C1.70901 5.77676 1.98882 5.77676 2.16139 5.60417L4.47096 3.29463C4.63371 3.13192 4.63371 2.86809 4.47096 2.70538L2.16139 0.395812C1.98883 0.22325 1.70901 0.22325 1.53642 0.395812C1.36383 0.568437 1.36383 0.84825 1.53642 1.02081L3.27989 2.76429C3.41006 2.89446 3.41006 3.10554 3.27989 3.23571Z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='%23ffffff'%3e%3cpath d='M3.27989 3.23571L1.53642 4.97917C1.36382 5.15176 1.36383 5.43158 1.53642 5.60417C1.70901 5.77676 1.98882 5.77676 2.16139 5.60417L4.47096 3.29463C4.63371 3.13192 4.63371 2.86809 4.47096 2.70538L2.16139 0.395812C1.98883 0.22325 1.70901 0.22325 1.53642 0.395812C1.36383 0.568437 1.36383 0.84825 1.53642 1.02081L3.27989 2.76429C3.41006 2.89446 3.41006 3.10554 3.27989 3.23571Z'/%3e%3c/svg%3e");
    --bs-accordion-btn-padding-x: 0rem;
    --bs-accordion-btn-padding-y: 0.65rem;
    --bs-accordion-btn-icon-width: 0.7rem;
    --bs-accordion-btn-hover-bg: rgb(3, 36, 79, 15%) !important;
    --bs-accordion-btn-radius: 6px
}

    .app-side-menu .app-menu .accordion .menu-leading {
        /*font-size: 0.813rem;*/
        font-weight: 500;
        color: var(--rd-app-menu-color);
        text-transform: uppercase;
        padding: 1.3rem 0rem 0.5rem;
        opacity: 0.5;
    }

    .app-side-menu .app-menu .accordion .accordion-button {
        /*font-size: 0.875rem;*/
        font-weight: 400;
        color: var(--rd-app-menu-color);
        display: flex;
        align-items: center;
        transition: all 0s linear 0s;
        padding: 0.65rem;
        border-radius: 8px;
        margin-bottom: 0.4rem;
    }

        .app-side-menu .app-menu .accordion .accordion-button svg {
            width: 20px;
            height: 20px;
        }

        .app-side-menu .app-menu .accordion .accordion-button::after {
            background-position: right center;
            transform: rotate(90deg);
        }

        .app-side-menu .app-menu .accordion .accordion-button:not(.collapsed) {
            background-color: transparent !important;
            box-shadow: none;
            color: #fff;
        }

        .app-side-menu .app-menu .accordion .accordion-button .menu-name {
            padding-left: 0.5rem;
            white-space: nowrap;
        }

        /* .app-side-menu .app-menu .accordion .accordion-button:hover, .app-side-menu .app-menu .accordion .accordion-button.active {
            color: #fff;
            background-color: var(--rd-app-menu-color-hover) !important;
        }*/

        .app-side-menu .app-menu .accordion .accordion-button.no-drop::after {
            display: none !important;
        }

        .app-side-menu .app-menu .accordion .accordion-button:hover::after {
            background-image: var(--bs-accordion-btn-active-icon);
        }

        .app-side-menu .app-menu .accordion .accordion-button:not(.collapsed)::after {
            transform: rotate(-90deg);
        }

    .app-side-menu .app-menu .accordion .accordion-item {
        border: 0;
    }

    .app-side-menu .app-menu .accordion .accordion-body, .app-side-menu .app-menu .accordion .accordion-body > ul {
        padding: 0;
    }

        .app-side-menu .app-menu .accordion .accordion-body > ul > * .app-submenu {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            /*font-size: 0.813rem;*/
            font-weight: 400;
            /*color: var(--rd-app-menu-color-200);*/
            padding: 0.5rem 0.5rem;
            white-space: nowrap;
        }

            .app-side-menu .app-menu .accordion .accordion-body > ul > * .app-submenu:hover {
                color: #fff;
                background-color: var(--bs-accordion-btn-hover-bg);
                border-radius: var(--bs-accordion-btn-radius);
            }

            .app-side-menu .app-menu .accordion .accordion-body > ul > * .app-submenu .menu-bullet {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 1.25rem;
            }

                .app-side-menu .app-menu .accordion .accordion-body > ul > * .app-submenu .menu-bullet > .bullet-dot {
                    width: 4px;
                    height: 4px;
                    border-radius: 100vmax;
                    background-color: #AFD8EF;
                }

            .app-side-menu .app-menu .accordion .accordion-body > ul > * .app-submenu:hover .menu-bullet > .bullet-dot {
                background-color: #fff;
            }

.app-side-menu.offcanvas.offcanvas-start {
    width: var(--rd-app-offcanvas-width);
}
/*menu css end*/
.app-side-menu .applogo {
    padding: 1.32rem 1.5rem;
}

    .app-side-menu .applogo .logo-full {
        height: 27px;
        transition: all 0.2s linear 0s;
    }

    .app-side-menu .applogo .logo-symbol {
        height: 27px;
        display: none;
        transition: all 0.2s linear 0s;
    }
/*app left side only icons css*/
.side-w {
    width: 80px !important;
}

    .side-w .applogo .logo-symbol {
        display: block;
    }

    .side-w .applogo .logo-full {
        display: none;
    }

    .side-w .app-menu .accordion .accordion-button .menu-name, .side-w .app-menu .accordion .accordion-button::after, .side-w .app-menu .accordion .accordion-body {
        display: none;
    }

@media (min-width: 992px) {
    .side-w:hover {
        width: 300px !important;
        box-shadow: 5px 0px 20px rgba(70, 78, 95, 20%);
    }

        .side-w:hover .applogo .logo-symbol {
            display: none;
        }

        .side-w:hover .applogo .logo-full {
            display: block !important;
        }

        .side-w:hover .app-menu .accordion .accordion-button .menu-name, .side-w:hover .app-menu .accordion .accordion-button::after, .side-w:hover .app-menu .accordion .accordion-body {
            display: block;
        }
}
/*app left side only icons css end*/
/*page wrapper css*/
.app-wrapper {
    transition: padding-left 0.3s ease;
    width: 100%;
}

.app-wrapper-padd {
    padding-left: 80px !important;
}

.app-wrapper > .app-header {
    padding: var(--rd-app-header-padding-y) var(--rd-app-header-padding-x);
    background-color: var(--rd-app-header-bg);
    box-shadow: var(--rd-app-header-shadow);
}
    /*toggle menu btn css*/
    .app-wrapper > .app-header .menu-toggle-btn {
        width: 40px;
        height: 40px;
        border: 0;
        background-color: #fff;
        transition: all 0.3s linear 0s;
        padding: 0;
        border: 1px solid var(--rd-app--border-color);
        border-radius: 100vmax;
    }

        .app-wrapper > .app-header .menu-toggle-btn svg {
            width: 28px;
            height: 28px;
            color: var(--rd-app-text-color-100);
            transition: transform 0.4s ease;
        }

        .app-wrapper > .app-header .menu-toggle-btn:hover svg, .app-wrapper > .app-header .menu-toggle-btn.menu-active svg {
            color: var(--rd-app-color);
        }

        .app-wrapper > .app-header .menu-toggle-btn.menu-active svg {
            position: relative;
            transform: rotate(180deg);
        }

    .app-wrapper > .app-header .mob-menu-toggle {
        background-color: #fff;
        font-size: 1.8rem;
        border: 0;
        padding: 0;
        line-height: 1;
    }

    .app-wrapper > .app-header .mob-logo {
        height: 34px;
    }

    .app-wrapper > .app-header .avatar-img {
        height: 40px;
        width: 40px;
        border-radius: 100vmax;
        border: 1px solid var(--rd-app--border-color);
        overflow: hidden;
        background-color: #fff;
        padding: 0;
    }

.badge-logdot {
    width: 10px;
    height: 10px;
    background: var(--rd-app-green);
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 2px;
    z-index: 1;
    border: 1px solid #fff;
}

.app-wrapper > .app-header .avatar-img img {
    width: 100%;
    height: auto;
}

.app-wrapper > .app-header .dropdown .dropdown-menu {
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    border: 0;
    padding: 0.8rem;
    min-width: 230px;
}

    .app-wrapper > .app-header .dropdown .dropdown-menu .profile-name {
        font-size: 1rem;
        font-weight: 500;
        color: var(--rd-app-text-color-100);
        margin-bottom: 0;
    }

    .app-wrapper > .app-header .dropdown .dropdown-menu hr {
        border-color: #F4F4F4;
        opacity: 1;
    }

    .app-wrapper > .app-header .dropdown .dropdown-menu .dropdown-item {
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0.6rem !important;
        color: var(--rd-app-text-color-600);
    }

        .app-wrapper > .app-header .dropdown .dropdown-menu .dropdown-item:hover, .dropdown-item:focus {
            background-color: var(--rd-app-bg-light-color-100);
            border-radius: 6px;
            color: var(--rd-app-color);
        }
/*page wrapper cotent section css*/
.app-wrapper > .app-cotent {
    padding: var(--rd-app-cotent-padding);
}

    .app-wrapper > .app-cotent .page-heading {
        font-size: clamp(1.1rem, 1.2vw, 1.35rem);
        font-weight: 600;
        color: var(--rd-app-text-color-100);
    }

    .app-wrapper > .app-cotent .breadcrumb {
        font-size: 0.75rem;
        color: var(--rd-app-breadcrumb-color);
        margin-bottom: 0;
    }

        .app-wrapper > .app-cotent .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
            color: var(--rd-app-breadcrumb-color);
        }

    .app-wrapper > .app-cotent .app-card {
        background-color: var(--rd-app-card-color-bg);
        border-radius: var(--rd-app-card-border-radius);
        padding: 1.5rem;
        box-shadow: var(--rd-app-card-box-shadow);
    }

        .app-wrapper > .app-cotent .app-card > .app-card-head {
            font-size: 1.275rem;
            color: var(--rd-app-text-color-100);
            font-weight: 600;
            padding-bottom: 2rem;
        }
    /*page dashboard widgets css*/
    .app-wrapper > .app-cotent .dash-widgets {
        margin-bottom: 1.875rem;
        min-width: 200px;
    }

        .app-wrapper > .app-cotent .dash-widgets .widg-name {
            font-weight: 500;
        }

        .app-wrapper > .app-cotent .dash-widgets .widg-value {
            font-weight: 600;
            font-size: clamp(1.35rem, 2.2vw, 2.7rem);
            color: var(--rd-app-text-color-100);
            line-height: 1;
            padding-top: 0.3rem;
        }
        /*page dashboard widgets icon css*/
        .app-wrapper > .app-cotent .dash-widgets .widg-icon {
            width: 140px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }

            .app-wrapper > .app-cotent .dash-widgets .widg-icon svg {
                width: 30px;
                height: 30px;
            }

.icon-color-blue {
    background-color: var(--rd-app-blue-light);
}

    .icon-color-blue svg, .icon-color-blue span {
        color: var(--rd-app-blue);
        fill: var(--rd-app-blue);
    }

.icon-color-green {
    background-color: var(--rd-app-green-light);
}

    .icon-color-green svg, .icon-color-green span {
        color: var(--rd-app-green);
        fill: var(--rd-app-green);
    }

.icon-color-violet {
    background-color: var(--rd-app-violet-light);
}

    .icon-color-violet svg, .icon-color-violet span {
        color: var(--rd-app-violet);
        fill: var(--rd-app-violet);
    }

.icon-color-red {
    background-color: var(--rd-app-red-light);
}

    .icon-color-red svg, .icon-color-red span {
        color: var(--rd-app-red);
        fill: var(--rd-app-red);
    }
/*app table css*/
.app-wrapper > .app-cotent .app-table, .modal .app-table {
    caption-side: bottom;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
}

    .app-wrapper > .app-cotent .app-table thead th, .modal .app-table thead th {
        padding: var(--rd-app-table-padding);
        border-bottom: 1px dashed var(--rd-app-table-border-color);
        font-size: var(--rd-app-table-th-fs);
        font-weight: 500;
        color: var(--rd-app-table-thead-text-color);
    }

    .app-wrapper > .app-cotent .app-table tbody td, .modal .app-table tbody td {
        padding: var(--rd-app-table-padding);
        border-bottom: 1px dashed var(--rd-app-table-border-color);
        font-size: var(--rd-app-table-td-fs);
        font-weight: 500;
    }

        .app-wrapper > .app-cotent .app-table tbody td .action-btn, .modal .app-table tbody td .action-btn {
            background-color: var(--rd-app-table-action-btn-bg);
            border: 0 !important;
        }

            .app-wrapper > .app-cotent .app-table tbody td .action-btn:hover, .modal .app-table tbody td .action-btn:hover {
                color: var(--rd-app-color);
                background-color: var(--rd-app-table-action-btn-hover-bg);
            }

        .app-wrapper > .app-cotent .app-table tbody td .alert, .modal .app-table tbody td .alert {
            font-weight: 500;
            font-size: 0.875rem;
            padding: 0.4rem 0.8rem;
        }

    .app-wrapper > .app-cotent .app-table .profile-img, .modal .app-table .profile-img {
        display: inline-block;
        flex-shrink: 0;
        position: relative;
    }

        .app-wrapper > .app-cotent .app-table .profile-img img, .modal .app-table .profile-img img {
            border-radius: 100vmax;
            width: 60px;
            height: 60px;
        }

.row-color td, .row-color th {
    background-color: var(--rd-app-blue-light);
    color: var(--rd-app-blue) !important;
}
/*daterange css*/

.daterangepicker.show-calendar .drp-buttons .btn-primary {
    background-color: var(--rd-app-color);
}

    .daterangepicker.show-calendar .drp-buttons .btn-primary:hover {
        background-color: var(--rd-app-blue-hover);
    }

/*buttons css*/
.app-wrapper > .app-cotent .btn-primary {
    --bs-btn-bg: var(--rd-app-color);
    --bs-btn-border-color: var(--rd-app-color);
    --bs-btn-hover-bg: var(--rd-app-blue-hover);
    --bs-btn-hover-border-color: var(--rd-app-blue-hover);
}

.app-wrapper > .app-cotent .btn-outline-primary {
    --bs-btn-border-color: var(--rd-app-color);
    --bs-btn-color: var(--rd-app-color);
    --bs-btn-hover-bg: var(--rd-app-color);
    --bs-btn-hover-border-color: var(--rd-app-color);
}

.btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus, .btn.show:focus, .btn-check:focus + .btn, .btn:focus {
    box-shadow: none !important;
}
/*alert css*/
.app-wrapper > .app-cotent .alert {
    margin-bottom: var(--rd-app-alert-box-mb);
    font-size: var(--rd-app-alert-box-fs);
    padding: var(--rd-app-alert-box-padding);
    text-align: center;
    display: inline-block;
}

.app-wrapper > .app-cotent .alert-primary {
    --bs-alert-color: var(--rd-app-blue);
    --bs-alert-bg: var(--rd-app-blue-light);
    --bs-alert-border-color: var(--rd-app-blue-light);
}

.app-wrapper > .app-cotent .alert-success {
    --bs-alert-color: var(--rd-app-green);
    --bs-alert-bg: var(--rd-app-green-light);
    --bs-alert-border-color: var(--rd-app-green-light);
}

.app-wrapper > .app-cotent .alert-danger {
    --bs-alert-color: var(--rd-app-red);
    --bs-alert-bg: var(--rd-app-red-light);
    --bs-alert-border-color: var(--rd-app-red-light);
}

.app-wrapper > .app-cotent .alert-warning {
    --bs-alert-color: var(--rd-app-yellow);
    --bs-alert-bg: var(--rd-app-yellow-light);
    --bs-alert-border-color: var(--rd-app-yellow-light);
}

.app-wrapper > .app-cotent .alert-info {
    --bs-alert-color: var(--rd-app-violet);
    --bs-alert-bg: var(--rd-app-violet-light);
    --bs-alert-border-color: var(--rd-app-violet-light);
}

.app-wrapper > .app-cotent .alert-secondary {
    --bs-alert-color: var(--rd-app-lgray);
    --bs-alert-bg: var(--rd-app-lgray-light);
    --bs-alert-border-color: var(--rd-app-lgray-light);
}

.app-wrapper > .app-cotent .alert-light {
    --bs-alert-color: var(--rd-app-text-color-600);
}
/*text css*/
.app-text-color-100 {
    color: var(--rd-app-text-color-100) !important;
}

.app-text-gray {
    color: var(--rd-app-primary-color) !important;
}

.bg-primary-light {
    background-color: var(--rd-app-blue-light) !important;
}

.app-wrapper > .app-cotent .text-primary {
    color: var(--rd-app-color) !important;
}

.app-wrapper > .app-cotent .text-success {
    color: var(--rd-app-green) !important;
}

.app-wrapper > .app-cotent .text-danger {
    color: var(--rd-app-red) !important;
}

.app-wrapper > .app-cotent .text-warning {
    color: var(--rd-app-yellow) !important;
}

.app-wrapper > .app-cotent .text-info {
    color: var(--rd-app-violet) !important;
}
/*font weight css*/
.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}
/*font size css*/
.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.813rem !important;
}

.fs-9 {
    font-size: 0.75rem !important;
}

.fs-10 {
    font-size: 0.688rem !important;
}

.prof-img {
    height: 80px;
}
/*form css*/
.from-group {
    margin-bottom: 1.5rem;
}

    .from-group .form-label, .text-label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    .from-group .form-control, .from-group .form-select {
        transition: color 0.2s ease;
        padding: var( --rd-app-textbox-padding);
        background-color: #f5f8fa;
        border: 0;
        color: var(--rd-app-text-color-100);
        font-size: 0.935rem;
        font-weight: 500;
    }

    .from-group .form-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231B254B' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px 16px;
        padding: var(--rd-app-selectbox-padding) !important;
    }

        .from-group .form-select option {
            background-color: #fff !important;
        }

    .from-group .form-search, .header-search {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 487.95 487.95' fill='%231B254B' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M481.8,453l-140-140.1c27.6-33.1,44.2-75.4,44.2-121.6C386,85.9,299.5,0.2,193.1,0.2S0,86,0,191.4s86.5,191.1,192.9,191.1 c45.2,0,86.8-15.5,119.8-41.4l140.5,140.5c8.2,8.2,20.4,8.2,28.6,0C490,473.4,490,461.2,481.8,453z M41,191.4 c0-82.8,68.2-150.1,151.9-150.1s151.9,67.3,151.9,150.1s-68.2,150.1-151.9,150.1S41,274.1,41,191.4z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px 16px;
        padding: var(--rd-app-selectbox-padding) !important;
    }

.header-search {
    padding: 0.4rem 1.8rem 0.4rem 0.6rem !important;
    /*min-width: 300px;*/
    background-color: #f0f3f8;
    border: 0;
}

.from-group .form-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231B254B' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding: var(--rd-app-selectbox-padding) !important;
}

.form-user {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 12.3C2.5 9.53857 4.73858 7.29999 7.5 7.29999C10.2614 7.29999 12.5 9.53857 12.5 12.3V12.4818C12.5 12.768 12.268 13 11.9818 13H3.01818C2.732 13 2.5 12.768 2.5 12.4818V12.3Z' fill='%237E8299'/%3E%3Cpath d='M7.5 6.90002C8.88071 6.90002 10 5.78074 10 4.40002C10 3.01931 8.88071 1.90002 7.5 1.90002C6.11929 1.90002 5 3.01931 5 4.40002C5 5.78074 6.11929 6.90002 7.5 6.90002Z' fill='%237E8299' fill-opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    padding: var(--rd-app-selectbox-padding) !important;
}

.form-eye {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.2'%3E%3Cpath d='M7.5 3.28125C2.8125 3.28125 0.9375 7.50046 0.9375 7.50046C0.9375 7.50046 2.8125 11.7188 7.5 11.7188C12.1875 11.7188 14.0625 7.50046 14.0625 7.50046C14.0625 7.50046 12.1875 3.28125 7.5 3.28125ZM7.5 9.84424C7.03645 9.84424 6.58331 9.70678 6.19788 9.44924C5.81245 9.19171 5.51205 8.82567 5.33466 8.3974C5.15726 7.96914 5.11085 7.49789 5.20128 7.04324C5.29172 6.5886 5.51494 6.17098 5.84272 5.8432C6.1705 5.51543 6.58811 5.2922 7.04276 5.20177C7.4974 5.11134 7.96865 5.15775 8.39691 5.33514C8.82518 5.51254 9.19122 5.81294 9.44876 6.19837C9.70629 6.5838 9.84375 7.03694 9.84375 7.50049C9.84375 8.12209 9.59682 8.71823 9.15728 9.15777C8.71774 9.5973 8.1216 9.84423 7.5 9.84424Z' fill='%237E8299'/%3E%3C/g%3E%3Cpath d='M3.15936 2.02838C3.07572 1.93639 2.95897 1.88138 2.83478 1.87547C2.71059 1.86956 2.58914 1.91322 2.49714 1.99685C2.40515 2.08049 2.35014 2.19724 2.34423 2.32143C2.33832 2.44562 2.38198 2.56707 2.46562 2.65907L3.59277 3.89895C1.46479 5.20506 0.549888 7.21796 0.509133 7.3096C0.482507 7.36954 0.46875 7.43439 0.46875 7.49997C0.46875 7.56556 0.482507 7.63041 0.509133 7.69035C0.529733 7.73669 1.02595 8.83716 2.1295 9.9406C3.59927 11.4102 5.45636 12.187 7.49999 12.187C8.5502 12.1932 9.58981 11.9769 10.5504 11.5524L11.8406 12.9716C11.9242 13.0636 12.041 13.1186 12.1652 13.1245C12.2894 13.1304 12.4108 13.0867 12.5028 13.0031C12.5948 12.9195 12.6498 12.8027 12.6557 12.6785C12.6616 12.5543 12.618 12.4329 12.5344 12.3409L3.15936 2.02838ZM5.93237 6.4725L8.37419 9.15851C8.00656 9.35256 7.58486 9.41889 7.17542 9.34706C6.76598 9.27524 6.39203 9.06934 6.1124 8.76175C5.83278 8.45416 5.66334 8.06233 5.63075 7.64792C5.59816 7.23351 5.70427 6.82001 5.93237 6.4725ZM7.49999 11.2495C5.69645 11.2495 4.12066 10.5941 2.81632 9.3015C2.28015 8.76943 1.8239 8.16249 1.4618 7.49957C1.73683 6.98462 2.61393 5.54338 4.23587 4.60634L5.28829 5.76399C4.87777 6.28664 4.66567 6.93781 4.68959 7.60198C4.71351 8.26614 4.97193 8.90036 5.41898 9.39212C5.86603 9.88388 6.47283 10.2014 7.13171 10.2883C7.7906 10.3752 8.45898 10.226 9.01827 9.86698L9.88084 10.8158C9.12098 11.1068 8.31363 11.2538 7.49999 11.2495Z' fill='%237E8299'/%3E%3Cpath d='M14.4908 7.3096C14.4702 7.26331 13.974 6.16256 12.8704 5.05895C11.4007 3.58901 9.54353 2.81202 7.4999 2.81202C7.06803 2.81151 6.63686 2.84667 6.21078 2.91713C6.08844 2.93792 5.97933 3.00638 5.90738 3.10749C5.83544 3.2086 5.80652 3.33411 5.82697 3.45651C5.84742 3.57891 5.91557 3.6882 6.01648 3.76043C6.11739 3.83266 6.24282 3.86192 6.36528 3.84181C6.7403 3.77988 7.1198 3.74901 7.4999 3.74952C9.30338 3.74952 10.8792 4.40509 12.1836 5.69799C12.7196 6.23005 13.1758 6.83698 13.5378 7.49986C13.115 8.27293 12.5648 8.96909 11.9103 9.559C11.8177 9.64195 11.7619 9.75829 11.7551 9.88243C11.7482 10.0066 11.791 10.1283 11.8739 10.2209C11.9569 10.3135 12.0732 10.3694 12.1974 10.3762C12.3215 10.383 12.4433 10.3403 12.5359 10.2573C13.8727 9.05992 14.4661 7.74574 14.4908 7.69035C14.5174 7.63042 14.5311 7.56556 14.5311 7.49998C14.5311 7.43439 14.5174 7.36954 14.4908 7.3096Z' fill='%237E8299'/%3E%3Cpath d='M9.36666 7.32304C9.37751 7.43923 9.4313 7.54719 9.51751 7.62583C9.60371 7.70447 9.71615 7.74814 9.83284 7.74831C9.84743 7.74831 9.86219 7.74762 9.87696 7.74625C10.0007 7.73468 10.1149 7.67442 10.1942 7.57873C10.2736 7.48304 10.3117 7.35974 10.3002 7.23595C10.2415 6.63026 9.98861 6.05975 9.57928 5.60947C9.16994 5.15918 8.62605 4.85324 8.02868 4.73725C7.90658 4.71404 7.78027 4.74027 7.67751 4.81018C7.57475 4.88008 7.50395 4.98793 7.4807 5.11002C7.45744 5.23211 7.48362 5.35843 7.55348 5.46122C7.62334 5.56401 7.73116 5.63485 7.85324 5.65816C8.25126 5.73546 8.61364 5.93931 8.88637 6.23933C9.1591 6.53935 9.32756 6.91948 9.36666 7.32304Z' fill='%237E8299'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    padding: var(--rd-app-selectbox-padding) !important;
}

.from-group .form-control:focus, .from-group .form-select:focus, .header-search:focus {
    border: 0;
    box-shadow: none;
    background-color: #eef3f7;
}

.from-group .form-text {
    font-size: 0.75rem;
    color: var(--rd-app-text-color-400);
}
/*login page css*/

.login-info {
    background: url(https://cloud.cricket-21.com/AMS/Content/images/loginbg.webp);
    color: #fff;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    position: relative;
}

    .login-info::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
        background-color: var(--rd-app-color);
        opacity: 0.5;
    }

    .login-info .app-logo {
        padding: 1.5rem;
        height: 30vh;
        display: flex;
        justify-content: center;
    }

        .login-info .app-logo img {
            width: 240px;
        }

.login-info-text {
    height: 30vh;
}

.login-bg {
    background-color: #fff;
}

.login-form {
    width: 400px;
}

    .login-form .btn-primary {
        padding: 0.6rem 1rem;
        width: 100%;
        margin-top: 2rem;
    }

.vdo-box {
    width: 130px;
}

.vdo-up-box {
    width: 100%;
    height: 130px;
    border: 1px dashed var(--rd-app-border-dashed-color);
    border-radius: 0.625rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    position: relative;
}

    .vdo-up-box i {
        font-size: 2rem;
        opacity: 30%;
    }

    .vdo-up-box .cmt-num {
        padding: 0.2rem 0.5rem 0.15rem 0.5rem;
        background: var(--rd-app-red);
        border-radius: 100vmax;
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
        font-size: 500;
        color: #fff;
        font-size: 0.85rem;
    }

.edit-btn {
    color: var(--rd-app-lgray);
    background-color: var(--rd-app-lgray-light);
    border: 0;
    padding: 0.5rem;
    font-weight: 500;
    border-radius: 0.3rem;
    min-width: 130px;
    font-size: 0.85rem;
}

    .edit-btn:hover {
        color: #fff;
        background-color: var(--rd-app-lgray);
    }

.upld-btn {
    color: var(--rd-app-blue);
    background-color: var(--rd-app-blue-light);
    border: 0;
    padding: 0.5rem;
    font-weight: 500;
    border-radius: 0.3rem;
    min-width: 130px;
    font-size: 0.85rem;
}

    .upld-btn:hover {
        color: #fff;
        background-color: var(--rd-app-blue-hover);
    }

.mch-box-bdr {
    border: 1px solid var(--rd-app-border-dashed-color);
    padding: 1.5rem;
    border-radius: 0.625rem;
}

    .mch-box-bdr .btm-bdr {
        border-bottom: 1px dashed var(--rd-app-table-border-color);
    }

    .mch-box-bdr .logo-box {
        width: 40px !important;
        height: 40px !important;
        border-radius: 100vmax;
        text-align: center;
        line-height: 40px;
        font-weight: 600;
        color: #fff;
        font-size: 0.875rem;
    }

.plr-tab {
    border: 2px solid var(--rd-app-color);
    border-radius: 12px;
    overflow: hidden;
}

    .plr-tab .nav-link {
        min-width: 140px;
        padding: 0.6rem 1rem;
        color: var(--rd-app-color);
        font-weight: 600;
    }

        .plr-tab .nav-link.active {
            border-radius: 8px;
            background-color: var(--rd-app-color);
        }

.ur-btn {
    background-color: var(--rd-app-card-color-bg);
    border-radius: var(--rd-app-card-border-radius);
    padding: 1rem;
    box-shadow: var(--rd-app-card-box-shadow);
    display: flex;
    color: var(--rd-app-text-color-600);
    align-items: center;
    gap: 1rem;
}

    .ur-btn:hover, .ur-btn.active {
        color: #fff;
        background-color: var(--rd-app-color);
    }

    .ur-btn .ur-icon {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        height: 66px;
        justify-content: center;
        width: 66px;
        border-radius: 8px;
    }

        .ur-btn .ur-icon svg {
            width: 44px;
            height: 44px;
        }

    .ur-btn .ur-text {
        font-size: clamp(1rem, 1.05vw, 1.15rem);
        color: var(--rd-app-dark);
        font-weight: 600;
        text-transform: uppercase;
    }

    .ur-btn:hover .ur-text, .ur-btn.active .ur-text {
        color: #fff;
    }

.player-list-box {
    background-color: #F6F8F9;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .player-list-box .player-img {
        width: 56px;
        height: 56px;
        border-radius: 100vmax;
        display: flex;
        flex-shrink: 0;
    }

.btn {
    font-weight: 500;
}

/*.modal .btn-close {
    position: absolute;
    right: -2rem;
    top: -1rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 0.7;
}*/

.btn-close:focus {
    box-shadow: none;
}

.modal .btn-close:hover {
    opacity: 1;
}

.compare-btn {
    position: absolute;
    top: 0.4rem;
    right: 1.3rem;
    cursor: pointer;
    color: var(--rd-app-text-color-400);
}

.compselect-btn {
    font-size: 1.3rem;
    cursor: pointer;
}

    .compare-btn:hover, .compare-btn.active, .compselect-btn:hover, .compselect-btn.active {
        color: var(--rd-app-green);
    }

.comparison {
    text-align: center;
}

    .comparison .profile-img img {
        width: 48px !important;
        height: 48px !important;
    }

    .comparison .add-payer {
        display: inline-flex;
        align-items: center;
    }

        .comparison .add-payer .add-payer-btn {
            width: 48px !important;
            height: 48px !important;
            border-radius: 100vmax;
            background-color: var(--rd-app-blue-light);
            text-align: center;
            line-height: 48px;
            color: var(--rd-app-blue);
        }

        .comparison .add-payer:hover .add-payer-btn {
            background-color: var(--rd-app-blue);
            color: #fff;
        }

        .comparison .add-payer:hover span {
            color: var(--rd-app-blue) !important;
        }
/*media breakpoints css*/
@media (min-width: 992px) {
    .app-side-menu {
        width: var(--rd-app-width);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        transition: width 0.3s ease;
        z-index: 2000;
    }

    .app-wrapper {
        padding-left: var(--rd-wrapper-padding-left);
    }

    .login-info {
        min-height: 100vh;
    }
}

@media (max-width: 991.98px) {
    .login-bg {
        min-height: 100vh;
    }

    .login-info .app-logo {
        height: auto;
    }

    .tournament-dd {
        width: 100% !important;
    }
}

@media (max-width:991.98px) {
    .mbl-padding {
        padding-top: 150px !important
    }
}

@media (max-width: 575.98px) {
    .app-side-menu .app-menu {
        height: 96vh;
    }

    .login-form {
        width: 300px;
    }

    .plr-tab .nav-link {
        min-width: auto !important;
    }
}

.app-wrapper > .app-cotent .app-card-new {
    background-color: var(--rd-app-card-color-bg);
    border-radius: var(--rd-app-card-border-radius);
    /* padding: 1.5rem;
  box-shadow: var(--rd-app-card-box-shadow); */
}


.vdo-up-box-new {
    width: 100%;
    height: 130px;
    border: 1px dashed var(--rd-app-border-dashed-color);
    border-radius: 0.625rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    position: relative;
    border: 2px solid black;
}

    .vdo-up-box-new i {
        font-size: 2rem;
    }

    .vdo-up-box-new .cmt-num {
        padding: 0.2rem 0.5rem 0.15rem 0.5rem;
        background: var(--rd-app-red);
        border-radius: 100vmax;
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
        font-size: 500;
        color: #fff;
        font-size: 0.85rem;
    }

.videoposition {
    position: absolute;
    color: red;
}

.padding-top {
    padding-top: 3vh;
}

.bat-button {
    color: white;
    background-color: black;
    position: absolute;
    transform: rotate(90deg);
    top: 30vh;
    left: 31vh;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    width: 9pc;
}

.bowl-button {
    color: white;
    background-color: black;
    position: absolute;
    transform: rotate(90deg);
    top: 63vh;
    left: 31vh;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    width: 9pc;
}

.min-scroll {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    border-radius: 5px;
}

.min-scroll-1 {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    border-radius: 5px;
}


.range-calendar {
    clear: both;
    overflow: hidden;
    width: 100%;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .range-calendar.triggerable {
        display: none;
    }

.calendar-wrapper {
    position: relative;
    left: 0;
    top: 0;
    z-index: 2;
    list-style: none;
    display: block;
    clear: both;
    overflow: hidden;
    padding: 10px 0;
}

.range-calendar .calendar {
    z-index: 1;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 99999px;
}

    .range-calendar .calendar .cell {
        float: left;
        width: 70px;
        padding: 25px 20px;
        margin: 0px;
        border-right: 1px solid rgba(0, 0, 0, 0.03);
        text-align: center;
        position: relative;
        color: #888;
    }

        .range-calendar .calendar .cell .day-number {
            display: block;
            clear: both;
            font-weight: bold;
            font-size: 20px;
            z-index: 1;
            position: relative;
        }

        .range-calendar .calendar .cell .day {
            display: block;
            clear: both;
            text-transform: uppercase;
            width: 100%;
            font-weight: 100;
            font-size: 12px;
            margin-top: 0px;
            z-index: 1;
            position: relative;
        }

        .range-calendar .calendar .cell .month {
            width: 100%;
            font-size: 12px;
            z-index: 1;
            text-transform: uppercase;
            position: absolute;
            opacity: 1;
            left: 0;
            top: 10px;
            font-weight: bold;
        }

        .range-calendar .calendar .cell .day.ferial {
            font-weight: bold;
        }

        .range-calendar .calendar .cell .month.first {
            opacity: 1;
        }

        .range-calendar .calendar .cell:hover {
            background-color: transparent;
            color: #888;
        }

        .range-calendar .calendar .cell.selected {
            background: transparent;
            color: #fff;
        }

            .range-calendar .calendar .cell.selected .day-number,
            .calendar .cell.ui-selecting .day-number {
                z-index: 2;
                position: relative;
            }

            .range-calendar .calendar .cell.selected .month,
            .calendar .cell.ui-selecting .month {
                z-index: 2;
                position: relative;
                opacity: 1;
            }

            .range-calendar .calendar .cell.selected .day,
            .calendar .cell.ui-selecting day {
                z-index: 2;
                position: relative;
            }

                .range-calendar .calendar .cell.selected .day.ferial,
                .calendar .cell.ui-selecting day.ferial {
                    z-index: 2;
                    position: relative;
                    font-weight: bold;
                }

.range-calendar .months {
    z-index: 1;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 99999px;
    border-bottom: 0px solid #f9f9f9;
    margin-bottom: 10px;
    display: none;
}

.range-calendar.auto-hide-months .months {
    display: none;
}

.range-calendar .months .cell {
    float: left;
    width: 105px;
    padding: 10px 10px;
    margin: 0px 0;
    text-align: center;
    position: relative;
    color: #888;
    border-right: 0px solid rgba(0, 0, 0, 0.03);
    position: relative;
}

    .range-calendar .months .cell .month-name {
        font-weight: bold;
        font-size: 12px;
        z-index: 1;
        position: relative;
        text-transform: uppercase;
    }

    .range-calendar .months .cell .date-formatted {
        font-weight: 100;
        font-size: 12px;
    }

    .range-calendar .months .cell .bullet {
        position: absolute;
        left: 15px;
        top: 15px;
        height: 7px;
        width: 7px;
        background-color: #888;
        display: none;
        border-radius: 1px;
    }

    .range-calendar .months .cell.selected {
        float: left;
        text-align: center;
        position: relative;
        color: #fff;
        background-color: #888;
    }

        .range-calendar .months .cell.selected .month-name {
            color: #fff;
        }

        .range-calendar .months .cell.selected .date-formatted {
            color: #fff;
        }

        .range-calendar .months .cell.selected .bullet {
            background-color: #fff;
        }

    .range-calendar .months .cell.current .bullet {
        display: block;
    }

.range-bar {
    display: none;
}

    .range-bar.resizable {
        height: 100%;
        position: absolute;
    }

    .range-bar.range-bar-content {
        width: 100%;
        height: 100%;
        display: block;
        float: left;
    }

    .range-bar .ui-resizable-handle.ui-resizable-e {
        width: 6px;
        height: 100%;
        background-position: 25px 53%;
        background-repeat: no-repeat;
        right: 0px;
        padding: 20px;
        opacity: 0.5;
    }

.range-calendar .ui-draggable {
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.range-calendar .ui-draggable-dragging {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}


/* CUSTOM CSS */

.dateRangeCalendarWrapper {
    border: 1px solid var(--rd-app-table-border-color);
    position: relative;
    border-top: 0;
}

    .dateRangeCalendarWrapper > select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid #eee;
        background: white;
        padding: 10px;
        text-align: center;
        width: 180px;
        margin: 10px auto;
        position: relative;
        left: calc(100% - 190px);
        display: none;
    }

        .dateRangeCalendarWrapper > select::-moz-focus-inner {
            border: 0;
        }

        .dateRangeCalendarWrapper > select option {
            text-align: left;
        }

    .dateRangeCalendarWrapper #buttonDatePreviousWrap,
    .dateRangeCalendarWrapper #buttonDateNextWrap {
        position: absolute;
        height: 100%;
        max-height: 100px;
        width: 35px;
        text-align: center;
        font-size: 2rem;
        font-weight: 600;
        bottom: 0;
        border: 0;
        background: white;
        cursor: pointer;
        border-top: 1px solid #eee;
        z-index: 1;
        color: #888;
    }

        .dateRangeCalendarWrapper #buttonDatePreviousWrap:focus,
        .dateRangeCalendarWrapper #buttonDateNextWrap:focus {
            outline: 0;
        }

        .dateRangeCalendarWrapper #buttonDatePreviousWrap::-moz-focus-inner,
        .dateRangeCalendarWrapper #buttonDateNextWrap::-moz-focus-inner {
            border: 0;
        }

    .dateRangeCalendarWrapper #buttonDatePreviousWrap {
        left: 0;
    }

    .dateRangeCalendarWrapper #buttonDateNextWrap {
        right: 0;
        border-left: 1px solid var(--rd-app-table-border-color);
    }

    .dateRangeCalendarWrapper .calendar {
        left: 35px !important;
    }

    .dateRangeCalendarWrapper .range-calendar .calendar .cell {
        max-height: 100px;
        border-right: 1px solid var(--rd-app-table-border-color);
        border-top: 1px solid var(--rd-app-table-border-color);
        color: var(--rd-app-primary-color);
    }

        .dateRangeCalendarWrapper .range-calendar .calendar .cell:first-child {
            border-left: 1px solid var(--rd-app-table-border-color);
        }

        .dateRangeCalendarWrapper .range-calendar .calendar .cell.selected {
            background: transparent !important;
            position: relative;
            color: #fff;
        }

            .dateRangeCalendarWrapper .range-calendar .calendar .cell.selected:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                background: var(--rd-app-blue);
                top: 0;
                left: 0;
            }

.selected-date-area {
    margin: 50px auto;
    padding: 50px 30px;
    border: 1px solid var(--rd-app-table-border-color);
    background: white;
    max-width: 560px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
    display: none;
}

    .selected-date-area > span {
        font-size: 1.3rem;
        font-family: Arial;
        color: #666;
    }

.main-cont-box {
    border: 3px solid #8184A5;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
}

    .main-cont-box video {
        width: 100%;
        height: 100%;
        display: block;
    }

.icon-btn {
    background-color: #4C5071;
    /*background: var(--bs-iconbtn-hover-color);*/
    border: 0;
    padding: 0.5rem;
    border-radius: 8px;
    color: #fff;
}

icon-btn {
    background-color: #4C5071;
    border: 0;
    padding: 0.5rem;
    border-radius: 8px;
    color: #fff;
}

.icon-btn:hover, .icon-btn.active {
    background: linear-gradient(219.66deg, #20A990 4.3%, #28BA6D 96.56%);
}

/*.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 27px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}*/

/* Rounded sliders */
/*.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }*/


.image-thumb {
    position: relative;
}

.image-thumb_1 {
    position: relative;
}

.card-box {
    display: grid;
    grid-template-columns: 85% 15%;
}

.card-box-new {
    display: grid;
    /*grid-template-columns: 70% 30%;*/
    grid-template-columns: 65% 35%;
}

.thumb-image-box {
    padding: 1rem 0.5rem 0rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    /*height: 70vh;*/
}

    .thumb-image-box ul {
        padding-left: 0;
        list-style: none;
        margin-bottom: 0;
    }

        .thumb-image-box ul > li {
            margin-bottom: 1rem;
        }

            .thumb-image-box ul > li:last-child {
                margin-bottom: 0;
            }

            .thumb-image-box ul > li > .image-thumb {
                background-color: var(--bs-blue-color-300);
                border-radius: 8px;
                aspect-ratio: 16/8;
                max-width: 100%;
                max-height: 100%;
                padding: 1rem;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2320A990' class='bi bi-play-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
                /*background-image: url("/Content/images/video-image.jpg");*/
                background-repeat: no-repeat no-repeat;
                background-position: center top 18px;
                /*background-size: cover;*/
                background-size: 40px 40px;
            }

            .thumb-image-box ul > li > .image-thumb_1 {
                background-color: var(--bs-blue-color-300);
                border-radius: 8px;
                aspect-ratio: 40/8;
                max-width: 100%;
                max-height: 100%;
                padding: 1rem;
            }

.image-thumb-01 {
    background-color: var(--bs-blue-color-300);
    border-radius: 8px;
    aspect-ratio: 16/8;
    max-width: 100%;
    max-height: 100%;
    padding: 1rem;
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2320A990' class='bi bi-play-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");*/
    background-image: url("/Content/images/BattingNetSession.png");
    background-repeat: no-repeat no-repeat;
    background-position: center top -25px;
    background-size: cover;
    /*background-size: 40px 40px;*/
}

.main-cont-box {
    border: 3px solid var(--bs-border-color);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
}

    .main-cont-box video {
        width: 100%;
        height: 100%;
        display: block;
    }

.payer-btn {
    border: 0;
    color: rgba(225, 225, 225, 70%);
    background-color: transparent;
}

    .payer-btn:hover {
        color: rgba(225, 225, 225, 100%);
    }

    .payer-btn svg {
        width: 22px;
        height: 22px;
    }

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    padding: 10px;
}

    .grid-container > div {
        text-align: center;
        padding: 20px 0;
    }

.grid-span {
    background-color: #3d3d3d;
    color: #fff;
}

.image-thumb-new {
    background-color: var(--bs-blue-color-300);
    border-radius: 8px;
    aspect-ratio: 16/8;
    max-width: 100%;
    max-height: 100%;
    padding: 1rem;
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2320A990' class='bi bi-play-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");*/
    background-image: url("/Content/images/video-image.jpg");
    background-repeat: no-repeat no-repeat;
    /*background-position: center top 30px;*/
    background-size: cover;
    /*background-size: 40px 40px;*/
}

.fa-paper-plane:hover {
    color: #0948b3;
}

.playertable {
    cursor: pointer;
}

.tournament-dd {
    width: 45%;
}

.table-bg-row {
    background-color: #04378b;
}

.table-style-fixture {
    padding: 5px;
    border: 1px solid black
}

.table-style-fixture-view {
    padding: 20px !important;
    border: 1px solid black
}

.table-style-fixture-header {
    /*padding: 20px;*/
    /*border: 1px solid black*/
    cursor: pointer;
}

.select-form {
    /* Reset Select */
    appearance: none;
    outline: 0;
    border: 1px solid #0948b3;
    box-shadow: none;
    /* Personalize */
    flex: 1;
    padding: 0 1em;
    color: #3d3d3d;
    /*background-color: #0948b3;*/
    background-image: none;
    cursor: pointer;
}
/* Remove IE arrow */
select::-ms-expand {
    display: none;
}
/* Custom Select wrapper */
.select-dd {
    position: relative;
    display: flex;
    width: 16em;
    height: 3em;
    border-radius: .25em;
    overflow: hidden;
}
    /* Arrow */
    .select-dd::after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: '\f0d7';
        color: #fff;
        position: absolute;
        top: 0;
        right: 0px;
        padding: 1em;
        background-color: #0948b3;
        transition: .25s all ease;
        pointer-events: none;
    }
    /* Transition */
    .select-dd:hover::after {
        color: #fff;
    }

.background-rhombus {
    background-color: #e5e5f7;
    opacity: 0.1;
    background-image: linear-gradient(135deg, #444cf7 25%, transparent 25%), linear-gradient(225deg, #444cf7 25%, transparent 25%), linear-gradient(45deg, #444cf7 25%, transparent 25%), linear-gradient(315deg, #444cf7 25%, #e5e5f7 25%);
    background-position: 4px 0, 4px 0, 0 0, 0 0;
    background-size: 4px 4px;
    background-repeat: repeat;
}

.page-heading-style {
    font-size: 2em;
    color: #fff;
    background-size: 100% 100%;
    background-position: 0% 100%;
    font-weight: 400;
    /* transform: translate(-50%,-50%);*/
    background-image: linear-gradient(135deg, #0948b3 100%, transparent 25%);
    /*background-size: 100% 10px;*/
    background-repeat: no-repeat;
    /*background-position: 100% 0%;*/
    transition: background-size .7s, background-position .5s ease-in-out;
}

    .page-heading-style:hover {
        color: #fff;
        background-size: 100% 100%;
        background-position: 0% 100%;
        transition: background-position .7s, background-size .5s ease-in-out;
    }

.text-area {
    border: 2px solid #04378b;
}

.min-width-300 {
    min-width: 300px;
}

.Kadamba-logo {
    position: absolute;
    top: 10px;
    right: 15px;
}
.logo-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.page-footer {
    height: 52px;
    padding: 15px 13px 0;
    padding-left: 233px;
    border-top: 1px solid #cecece;
    /* background: #0948b3;*/
    width: 100%;
    position: absolute;
    display: block;
    bottom: 0
}

.fixed-page-footer .page-footer {
    position: fixed;
    z-index: 901
}

.minified .page-footer {
    padding-left: 58px
}

.container.fixed-page-footer .page-footer {
    max-width: 1164px
}

.hidden-menu .page-footer {
    padding-left: 20px
}

.margin-top-25 {
    margin-top: 25px;
}

.input-container {
    width: 220px;
    position: relative;
}

.icon {
    position: absolute;
    right: 10px;
    top: calc(50% + 5px);
    transform: translateY(calc(-50% - 5px));
}

.input {
    width: 100%;
    height: 40px;
    padding: 10px;
    transition: .2s linear;
    border: 2.5px solid #0948b3;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/*.input:focus {
        outline: none;
        border: 0.5px solid black;
        box-shadow: -5px -5px 0px black;
    }
*/
.input-container:hover > .icon {
    animation: anim 1s linear infinite;
}

@keyframes anim {
    0%, 100% {
        transform: translateY(calc(-50% - 5px)) scale(1);
    }

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

.table-blue-fill {
    background-color: #0d6efd;
}


#keywords {
    margin: 0 auto;
    font-size: 1.2em;
    margin-bottom: 15px;
}


    #keywords thead {
        cursor: pointer;
        background: #c9dff0;
    }

        #keywords thead tr th {
            font-weight: bold;
            padding: 12px 30px;
            padding-left: 42px;
        }

            #keywords thead tr th span {
                padding-right: 20px;
                background-repeat: no-repeat;
                background-position: 100% 100%;
            }

            #keywords thead tr th.headerSortUp, #keywords thead tr th.headerSortDown {
                background: #acc8dd;
            }

                #keywords thead tr th.headerSortUp span {
                    background-image: url('https://i.imgur.com/SP99ZPJ.png');
                }

                #keywords thead tr th.headerSortDown span {
                    background-image: url('https://i.imgur.com/RkA9MBo.png');
                }


    #keywords tbody tr {
        color: #555;
    }

        #keywords tbody tr td {
            text-align: center;
            padding: 15px 10px;
        }

            #keywords tbody tr td.lalign {
                text-align: left;
            }

.gauge-rating {
    position: absolute;
    background-color: #0d6efd;
    width: 50px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
}

.table-border {
    border: 2px solid #c9dff0 !important;
    text-align: center;
}

    .table-border th, .table-border td {
        border: 2px solid #c9dff0 !important;
    }

.container-inp {
    --input-focus: #2d8cf0;
    --input-out-of-focus: #ccc;
    --bg-color: #fff;
    --bg-color-alt: #666;
    --main-color: #323232;
    position: relative;
    cursor: pointer;
}

    .container-inp input {
        position: absolute;
        opacity: 0;
    }

.checkmark {
    width: 30px;
    height: 30px;
    position: relative;
    top: 0;
    left: 0;
    border: 2px solid var(--main-color);
    border-radius: 5px;
    box-shadow: 4px 4px var(--main-color);
    background-color: var(--input-out-of-focus);
    transition: all 0.3s;
}

.container-inp input:checked ~ .checkmark {
    background-color: var(--input-focus);
}

.checkmark:after {
    content: "";
    width: 7px;
    height: 15px;
    position: absolute;
    top: 4px;
    left: 10px;
    display: none;
    border: solid var(--bg-color);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.container-inp input:checked ~ .checkmark:after {
    display: block;
}

.table-border thead th {
    padding: 10px;
}

.table-border tbody td {
    padding: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.flex-gap {
    display: inline-flex;
    flex-wrap: wrap;
}

    .flex-gap > div {
        margin: 6px;
    }

#list {
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid;
}

.myrowAlignmentpart {
    margin-top: 20px;
}

.tdFW {
    padding: 10px;
}

.PickedClubDiv table thead {
    background-color: black;
    color: white;
}

.PickedClubDiv {
    height: 22rem;
    background-color: lightgray;
    overflow-y: scroll;
}

.hover-underline:hover {
    text-decoration: underline;
}

.text-break {
    white-space: nowrap !important;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;
}

    .grid-container > div {
        text-align: center;
        padding: 20px 0;
    }

.grid-item-index {
    background-color: var(--bs-blue-color-300);
    border-radius: 8px;
    max-width: 100%;
    height: 100px;
    padding: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2320A990' class='bi bi-play-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
    /*background-image: url("/Content/images/video-image.jpg");*/
    background-repeat: no-repeat no-repeat;
    background-position: center top 50%;
    /*background-size: cover;*/
    background-size: 40px 40px;
}

.folder-icon {
    position: absolute;
    bottom: -16px;
    left: 10px
}

.thumb-image-new {
    position: relative;
}

.currentvideo {
    background: #6b11ed !important;
    color: white;
    font-weight: bold;
}

.myicon {
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.myicon2 {
    text-shadow: -3px 0 #000, 0 3px #000, 3px 0 #000, 0 -3px #000;
}

/*
.customcolor {
    background-color: #FFECCF !important;
    color: #000 !important;
}*/

.b-red {
    background-color: brown !important;
    color: #fff !important;
}

.b-orange {
    background-color: orange !important;
    color: #fff !important;
}

.b-green {
    background-color: green !important;
    color: #fff !important;
}

.text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.customTable thead tr th {
    background-color: #cfe2ff;
}

    .customTable thead tr th a {
        text-decoration: none;
        color: #000;
    }

div {
    scrollbar-width: thin !important;
}

.grid-70-30 {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 20px;
}

@media(max-width:1500px) {
    .grid-70-30 {
        grid-template-columns: auto;
    }
}

/*@media (min-width: 576px) {
    .custom-model .modal-dialog {
        max-width: 1000px;
    }
}*/
.custom-model .modal-header {
    position: relative;
}

.custom-model .btn-close {
    position: absolute;
    right: 20px;
    top: 25px;
}

.modal {
    z-index: 10001;
}

.modal-backdrop {
    z-index: 10000;
}

.set-pointer-none {
    pointer-events: none;
    background-color: #e7e7e7;
}

.padding-app-card {
    padding: 1.5rem 2rem !important;
}

.appcard-flex {
    flex-direction: row !important;
}

.graph-container {
    position: relative;
    height: 60vh;
    width: 100%;
    margin-top: 20px
}


@media(max-width:1400px) {
    .padding-app-card {
        padding: 1.5rem 2rem !important;
    }
}

@media(max-width:600px) {
    .appcard-flex {
        flex-direction: column !important;
    }

    .graph-container {
        height: 40vh;
    }

    .tournament .team-scoreboard-box {
        display: none;
    }
}

.accordion_section .card {
    margin-bottom: 10px;
}

.accordion_section .card-header {
    background-color: #fff;
    padding: 0;
    border-bottom: 0;
    color: #000;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

    .accordion_section .card-header button {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.filtertextboxdropdown {
    margin-bottom: 10px;
    margin-top: 5px;
    width: 100% !important;
}

.filterselect {
    background-color: #cacaca !important;
    color: #000 !important;
    font-weight: bold !important;
}

.filterselect2 {
    /*background-color: #cacaca !important;*/
    color: var(--bg-color) !important;
    font-weight: 400 !important;
}

.filterlable {
    display: flex;
    padding: 5px;
    color: #000;
    margin-bottom: 0;
    font-size: inherit;
    align-items: center;
    gap: 3px;
}

    .filterlable:hover {
        background-color: #3f63a0;
        color: #fff;
    }

.card_backset {
    border: none;
    border-bottom: 1px solid #ced4da;
    -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.16), 0 0px 0px 0 rgba(0,0,0,.12), 0 0px 0px 0 rgba(0,0,0,.16), 0 0px 10px 0 rgba(0,0,0,.12);
    margin-bottom: 5px;
    border-radius: 6px;
}

    .card_backset > .card-header {
        padding: 12px 0 12px 3px;
        color: rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        border: 1px solid #ced4da;
    }

.dropdownfilter_setup {
    min-height: max-content;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-color: auto;
}

.filterlable > input {
    opacity: 1 !important;
    padding-right: 20px !important;
    position: relative !important;
}

.selectdropdown {
    padding: 3.5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.collapseplaylist {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ced4da;
    background: rgb(255, 255, 255);
    position: absolute;
    z-index: 1000000000000;
}

#dataTable_length, #dataTable_filter {
    margin-bottom: 10px;
}


table.dataTable {
    width: 100% !important;
}

.box {
    width: 100px;
    height: 100px;
    text-align: center;
    background: aliceblue;
    padding-top: 15px;
}

    .box h2 {
        color: #0948b3
    }

    .box p {
        font-weight: 600;
    }

.box-heading {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin: 35px 0 25px 0
}

.box-wrap {
    justify-content: space-around;
}

.white-box {
    background-color: #fff;
    padding: 20px 20px 20px 20px;
}

.blue-square {
    background: #071952;
}

.yellow-square {
    background: #F4CE14;
}

.pink-square {
    background: #DA7297;
}

.green-square {
    background: #365E32;
}

.child-square {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}

.sub-white {
    height: 50%;
    background: #fff;
    /*border-radius: 0px 0px 5px 5px;*/
}

.sub-blue {
    height: 50%;
    background: #0948b3;
    /*border-radius: 5px 5px 0px 0px;*/
}

.app-wrapper > .app-header .dropdown .dropdown-menu .squares-parent .squares .child-square {
    border: 2px solid #97989b;
    transition: transform 0.3s ease;
}

.player-menu {
    border: 0px !important;
    border-radius: 0px !important;
    margin-left: 15px;
    flex-wrap: wrap;
}

body.dark > #page-container > .app-wrapper > .app-cotent .app-card.dash-widgets {
    background: #fff !important;
}

.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
/*.slider {
    --background: #28096b;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background);
    transition: .5s;
    border-radius: 30px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 1.4em;
        width: 1.4em;
        border-radius: 50%;
        left: 10%;
        bottom: 15%;
        box-shadow: inset 8px -4px 0px 0px #fff000;
        background: var(--background);
        transition: .5s;
    }

input:checked + .slider {
    background-color: #522ba7;
}

    input:checked + .slider:before {
        transform: translateX(100%);
        box-shadow: inset 15px -4px 0px 15px #fff000;
    }*/

.quill-editor-modal {
    height: 50vh !important;
}


.custom-model .modal-header {
    display: block !important;
    text-align: center;
    border: none;
    background-color: #f0f8ff;
}

    .custom-model .modal-header h5 {
        font-size: 25px;
        font-weight: 600;
        color: #008080;
    }

.custom-modal-footer-btn {
    display: flex;
    gap: 7px;
    flex-direction: row-reverse;
}

.font-lora {
    font-family: "Lora", serif;
}

.player-form-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

    .player-form-table th, .player-form-table td {
        border: 1px solid #ccc;
        padding: 10px 8px;
        text-align: center;
        font-size: 14px;
    }

    .player-form-table th {
        background: #343a40;
        color: #fff;
    }

    .player-form-table td.section-header {
        background: #e9ecef;
        font-weight: bold;
        text-align: left;
    }

.notes {
    font-size: 14px;
    padding: 10px;
    margin-top: 10px;
    background-color: #f1f3f5;
    border-left: 4px solid #007bff;
}

.section-title {
    font-weight: bold;
    margin-top: 20px;
}

.player-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 20px;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    /*margin-bottom: 25px;*/
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.info-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

    .info-block .label {
        font-weight: 600;
        color: #343a40;
        min-width: 140px;
    }

    .info-block .value {
        color: #495057;
    }

    .info-block.full-width {
        grid-column: span 2;
    }

.rating-display-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .rating-display-table th,
    .rating-display-table td {
        border: 1px solid #dee2e6;
        padding: 12px 10px;
        text-align: left;
        cz vertical-align: top;
    }

    .rating-display-table th {
        background-color: #343a40;
        color: white;
        font-weight: 600;
    }

    .rating-display-table td {
        background-color: #fff;
        color: #333;
    }

        .rating-display-table td:nth-child(2) {
            text-align: center;
            font-weight: bold;
            color: #007bff;
        }

.cursor-pointer {
    cursor: pointer !important;
}
.menu-active i {
    transform: rotate(180deg);
}