@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

.daterangepicker table tbody td {
    padding: unset;
}

.daterangepicker table thead th {
    padding: unset;
}

.daterangepicker table tbody tr {
    background: transparent;
}

.daterangepicker.show-calendar .drp-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}

    .daterangepicker.show-calendar .drp-buttons .btn {
        margin-left: 5px;
    }

.daterangepicker .drp-selected {
    white-space: nowrap;
}

.clone_btn {
    max-width: 150px;
    min-width: 150px;
}

.custom_cloned_container {
    position: relative;
}

.delete_clone_button {
    position: absolute;
    top: -5px;
    right: -5px;
    border-radius: 100px;
    width: 30px;
    height: 30px;
    color: #fff;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sp-line {
    max-width: 1000px;
    margin: 20px auto;
    width: 100%;
}

body {
    transition: 0.3s;
}

.filter_item_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    z-index: -1;
}

    .filter_item_layer.show {
        opacity: 0.5;
        z-index: 1;
    }

.white_theme {
    background-color: #fff;
    color: #000;
}

    .white_theme .filter_item select option {
        color: #000;
    }

    .white_theme .topbar {
        background-color: #fff;
        border-color: #b3b3b3;
    }

        .white_theme .topbar h1 {
            color: #000;
        }

        .white_theme .topbar .menu_btn {
            filter: brightness(0) invert(0);
        }

    .white_theme .sidebar {
        background-color: #fff;
        border-color: #b3b3b3;
    }

        .white_theme .sidebar h1 {
            color: #000;
        }

        .white_theme .sidebar .close_menu {
            filter: brightness(0) invert(0);
        }

        .white_theme .sidebar .link:hover strong {
            color: #66677b;
        }

        .white_theme .sidebar .link.active strong {
            color: #66677b;
        }

    .white_theme .body .grid {
        background-color: #eeeeee;
    }

        .white_theme .body .grid h1 {
            color: #000;
        }

    .white_theme .body .register h1 {
        color: #000;
    }

    .white_theme .body .filter .filter_item {
        background-color: #afafb3;
    }

        .white_theme .body .filter .filter_item span {
            color: #fff;
        }

        .white_theme .body .filter .filter_item select {
            color: rgba(255, 255, 255, 0.8);
        }

        .white_theme .body .filter .filter_item input {
            color: rgba(255, 255, 255, 0.8);
        }

    .white_theme .acc_top_bar_menu button {
        color: #a3a3a3;
    }

        .white_theme .acc_top_bar_menu button.active {
            color: #000;
        }

        .white_theme .acc_top_bar_menu button:hover {
            color: #000;
        }

    .white_theme .acc_accordion_btn {
        background-color: #fff;
    }

    .white_theme .adjustment_method_radio_item label {
        color: #000;
    }

/* width */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(180, 180, 180);
    border-radius: 1rem;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

input,
select,
textarea {
    position: relative;
    border-radius: 5px;
}

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
    }

    input[type=date]::-webkit-calendar-picker-indicator {
        background: transparent;
        bottom: 0;
        color: transparent;
        cursor: pointer;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }

    input[type=date]:before {
        content: "📆";
        position: absolute;
        right: 10px;
        top: 45%;
        transform: translateY(-50%);
    }

.green {
    color: greenyellow;
}

.red {
    color: red;
}

.orange {
    color: orange;
}

.btn1, .btn2 {
    background-color: #ec7018;
    border: none;
    color: white;
    border-radius: 3px;
    padding: 10px;
    font-size: 15px;
    cursor: pointer;
}

.btn2 {
    background-color: #4a8c51 !important;
}

.evo-cp-wrap {
    width: 100% !important;
}

.evo-colorind,
.evo-colorind-ie,
.evo-colorind-ff {
    float: unset !important;
    margin-top: 10px;
}

.fr-second-toolbar {
    display: none;
}

.fr-box.fr-basic .fr-wrapper {
    border-radius: 0 0 10px 10px;
}

.fr-toolbar {
    background-color: #1f1e2c !important;
}

.fr-svg {
    filter: brightness(1) invert(1);
}

.fr-element {
    background-color: #1f1e2c !important;
    color: #fff !important;
    border-radius: 0 0 10px 10px !important;
}

.fr-command:hover .fr-svg {
    filter: brightness(0) invert(0);
}

.fr-open .fr-svg {
    filter: brightness(0) invert(0);
}

.fr-more-toolbar {
    background-color: #2b293e !important;
}

.fr-dropdown:after {
    border-top: 4px solid #fff !important;
}

.fr-dropdown.fr-active .fr-svg {
    filter: brightness(0) invert(0);
}

.fr-dropdown.fr-active:after {
    border-top: 0 !important;
    border-bottom: 4px solid #000 !important;
}

.fr-disabled:hover .fr-svg {
    filter: brightness(1) invert(1) !important;
}

.layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

* {
    box-sizing: border-box;
    margin: 0;
    font-family: "Ubuntu", sans-serif;
    accent-color: #ec7018;
    vertical-align: middle
}

a {
    text-decoration: none;
}

body, html {
    background-color: #1f1e2c;
    overflow: hidden;
}

input:-moz-read-only {
    cursor: not-allowed;
}

input:read-only {
    cursor: not-allowed;
}

input:disabled {
    cursor: not-allowed;
}

select:disabled {
    cursor: not-allowed;
}

.rowS {
    display: flex;
    align-items: stretch;
}

.row, .col {
    display: flex;
    align-items: center;
}

.col {
    flex-direction: column;
}

.login {
    height: 100vh;
    justify-content: center;
}

    .login video {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        -o-object-fit: cover;
        object-fit: cover;
        opacity: 0.05;
    }

    .login form {
        align-items: stretch;
        width: 90%;
        max-width: 320px;
        z-index: 3;
        box-shadow: 0px 0px 10px rgba(130, 130, 130, 0.8);
        padding: 20px;
        border-radius: 10px;
        background-color: #1f1e2c;
    }

        .login form h1 {
            align-self: center;
            margin-bottom: 30px;
            color: white;
        }

        .login form .input {
            color: #66677b;
            align-items: stretch;
            margin-bottom: 5px;
        }

            .login form .input span {
                color: white;
                font-size: 15px;
                padding: 3px;
            }

            .login form .input input {
                background-color: rgba(102, 103, 123, 0.3);
                border: none;
                padding: 8px;
                font-size: 15px;
                border-radius: 3px;
                color: white;
            }

        .login form button {
            background-color: #ec7018;
            border: none;
            color: white;
            border-radius: 3px;
            padding: 10px;
            margin-top: 10px;
            font-size: 15px;
            cursor: pointer;
        }

.container {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    transition: 0.5s;
}

.subnav {
    width: 100%;
}

    .subnav .subnav_item {
        padding: 10px;
        margin-right: 15px;
        cursor: pointer;
    }

        .subnav .subnav_item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

    .subnav .active_nav {
        border-bottom: solid 2px #ec7018;
    }

table {
    width: 100%;
    border-spacing: 0 5px;
}

    table thead th {
        text-align: center;
        padding: 0 25px;
        color: #66677b;
        font-weight: normal;
        font-size: 13px;
        white-space: nowrap;
    }

    table tbody tr {
        background: rgba(31, 30, 44, 0.3);
    }

    table tbody a {
        color: #ec7018;
        margin: 0 5px;
        text-decoration: underline;
    }

    table tbody td {
        text-align: center;
        padding: 5px 10px;
        font-size: 13px;
    }

        table tbody td:first-child {
            border-radius: 5px 0 0 5px;
        }

        table tbody td:last-child {
            border-radius: 0 5px 5px 0;
        }

    table tbody .action_btn {
        width: 20px;
        margin: 0 5px;
        cursor: pointer;
    }

    table .thead2 th {
        text-align: center;
        background: rgba(100, 100, 100, 0.1);
        padding: 10px;
        border: solid 2px #2d2c3e;
        border-right: none;
        color: white;
    }

        table .thead2 th:last-child {
            border-right: solid 2px #2d2c3e;
        }

.data_error {
    display: none;
}

    .data_error td {
        height: 100px;
        font-size: 15px;
    }

.loader {
    background-color: rgba(200, 200, 200, 0.1);
    animation: skeleton 1s infinite;
}

    .loader:nth-child(1) {
        animation-delay: 0.2s;
    }

    .loader:nth-child(2) {
        animation-delay: 0.4s;
    }

    .loader:nth-child(3) {
        animation-delay: 0.6s;
    }

    .loader:nth-child(4) {
        animation-delay: 0.8s;
    }

.sidebar {
    position: fixed;
    transition: 0.3s;
    transform: translateX(-100%);
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #242635;
    display: flex;
    flex-direction: column;
    border-right: #2d2c3e 2px solid;
    grid-column: 1/2;
    grid-row: 1/3;
    padding: 20px;
    z-index: 1;
    overflow-y: auto;
}

    .sidebar.sidebar_active {
        transform: none;
        position: relative;
        z-index: 10;
    }

    .sidebar .close_menu {
        position: absolute;
        width: 15px;
        right: 20px;
        top: 25px;
        cursor: pointer;
    }

    .sidebar h1 {
        color: white;
        margin-bottom: 20px;
        font-size: 30px;
    }

    .sidebar h2 {
        color: #66677b;
        font-size: 15px;
        margin-bottom: 20px;
    }

    .sidebar .link_wrapper {
        width: 100%;
        align-items: stretch;
    }

    .sidebar .link {
        color: #66677b;
        padding: 10px;
        padding-right: 15px;
        border-radius: 3px;
        margin-bottom: 5px;
        transition: 0.2s;
        cursor: pointer;
        background: transparent;
        border: none;
        font-size: 16px;
        width: 105%;
    }

        .sidebar .link img {
            width: 20px;
            margin-right: 10px;
        }

        .sidebar .link strong {
            margin-left: auto;
        }

        .sidebar .active,
        .sidebar .link:hover {
            background: linear-gradient(to right, #ec7018, transparent);
            color: white;
        }

            .sidebar .active img,
            .sidebar .link:hover img {
                filter: brightness(0) invert(1);
            }

    .sidebar .submenu {
        align-items: stretch;
        padding-bottom: 10px;
    }

        .sidebar .submenu a {
            color: #66677b;
            font-size: 14px;
            padding: 5px 5px 5px 40px;
            border-radius: 3px;
        }

            .sidebar .submenu a:hover {
                background: linear-gradient(to right, #ec7018, transparent);
                color: white;
            }

                .sidebar .submenu a:hover img {
                    filter: brightness(0) invert(1);
                }

        .sidebar .submenu .active {
            color: white;
        }

    .sidebar .mobmenu {
        align-items: stretch;
        margin-top: 15px;
        padding-top: 20px;
        border-top: solid 1px #2d2c3e;
        display: none;
    }

    .sidebar .datetime {
        color: #66677b;
        font-size: 13px;
        margin-top: auto;
    }

        .sidebar .datetime span {
            margin-left: 5px;
        }

.topbar {
    grid-column: 2/3;
    grid-row: 1/2;
    background-color: #242635;
    border-bottom: #2d2c3e 2px solid;
    padding: 20px;
}

    .topbar .menu_btn {
        width: 25px;
        margin-right: 20px;
        cursor: pointer;
    }

    .topbar h1 {
        margin-right: auto;
        color: white;
        font-size: 18px;
        padding-left: 5px;
    }

    .topbar .icon_btn {
        width: 25px;
        margin-left: 15px;
        transition: 0.2s;
        cursor: pointer;
    }

        .topbar .icon_btn:hover {
            scale: 1.1;
        }

    .topbar .username {
        background-color: #1f1e2c;
        border: solid 2px #2d2c3e;
        margin-left: 15px;
        color: white;
        padding: 4px;
        padding-right: 10px;
        border-radius: 99px;
        font-size: 13px;
    }

        .topbar .username img {
            margin: 0;
            margin-right: 5px;
        }

.theme {
    cursor: pointer;
}

    .theme.theme_changed img {
        transform: rotate(360deg);
    }

    .theme img {
        width: 25px;
        transition: 0.3s;
        transform: rotate(180deg);
    }

.mobile_theme {
    display: none;
}

.body {
    overflow: auto;
    grid-column: 2/3;
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
    padding: 20px;
    scroll-behavior: smooth;
}

    .body > * {
        flex-shrink: 0;
    }

    .body .filter {
        padding: 10px 0 20px;
        flex-wrap: wrap;
        gap: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

        .body .filter.show {
            height: auto;
            padding: 10px 5px 20px;
        }

        .body .filter.row, .body .filter.col {
            /*justify-content: center;*/
        }

        .body .filter.left_filter {
            justify-content: flex-start;
        }

        .body .filter .filter_item {
            background-color: #1f1e2c;
            overflow: hidden;
            border-radius: 3px;
            flex: auto 1 min-content;
            position: relative;
        }

            .body .filter .filter_item span {
                font-size: 13px;
                padding: 0 10px;
                white-space: nowrap;
                width: auto !important;
            }

            .body .filter .filter_item input,
            .body .filter .filter_item select {
                background: none;
                border: none;
                color: #c6cdca;
                padding: 10px 30px;
                width: 100%;
            }

                .body .filter .filter_item input::-webkit-calendar-picker-indicator,
                .body .filter .filter_item select::-webkit-calendar-picker-indicator {
                    filter: invert(1);
                }

                .body .filter .filter_item input option,
                .body .filter .filter_item select option {
                    padding: 0;
                    background: #1f1e2c;
                }

        .body .filter select {
            border: none;
        }

        .body .filter button {
            background: #ec7018;
            border: none;
            color: white;
            padding: 8px 30px;
            border-radius: 3px;
            cursor: pointer;
            text-align: center;
        }

        .body .filter a {
            background: #4a8c51;
            border: none;
            color: white;
            padding: 11px 30px;
            font-size: 13px;
            border-radius: 3px;
            text-align: center;
        }

        .body .filter .select2 {
            padding: 0 !important;
            display: flex;
            align-items: center;
            overflow-x: auto;
            overflow-y: hidden;
        }

            .body .filter .select2 .selection {
                padding: 0;
            }

        .body .filter .select2-container--default .select2-selection--multiple {
            background-color: transparent;
            border: none;
            padding: 0;
        }

        .body .filter .select2-selection__choice__remove {
            height: unset;
        }

            .body .filter .select2-selection__choice__remove span {
                padding: 0;
            }

        .body .filter .select2-selection__choice__display {
            color: #000;
            padding: 0 5px !important;
        }

        .body .filter .select2-search {
            padding: unset !important;
        }

    .body .filter_item_action_btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .body .filter_item_action_btn img {
            height: 20px;
            margin-right: 5px;
        }

    .body .grid {
        background-color: #2d2c3e;
        border-radius: 5px;
        margin-bottom: 20px;
        padding: 20px;
        color: #ebebeb;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        align-items: stretch;
    }

        .body .grid h1 {
            color: #ebebeb;
            font-size: 20px;
            margin-bottom: 10px;
        }

    .body .cards {
        gap: 20px;
        align-items: stretch;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

        .body .cards .card {
            min-width: 200px;
            flex: 1;
            background-color: #2d2c3e;
            color: #ebebeb;
            border-radius: 5px;
            padding: 20px;
            flex-wrap: wrap;
            justify-content: space-between;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

            .body .cards .card.row, .body .cards .card.col {
                align-items: unset;
            }

            .body .cards .card .col {
                align-items: flex-start;
            }

                .body .cards .card .col span {
                    color: #66677b;
                    margin-bottom: 5px;
                }

            .body .cards .card .row span {
                color: white;
                margin-bottom: 5px;
            }

            .body .cards .card .col .revenue {
                margin: 10px 0;
            }

            .body .cards .card h1 {
                font-size: 35px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .body .cards .card .line {
                width: 100%;
                height: 1px;
                margin: 10px 0;
                background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
            }

            .body .cards .card strong {
                font-weight: normal;
            }

    .body .register {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

        .body .register h1 {
            width: auto;
            margin-bottom: 0;
            font-size: 16px;
        }

        .body .register .link {
            align-items: stretch;
            background-color: #1f1e2c;
            border: solid 1px #66677b;
            border-radius: 3px;
            overflow: hidden;
            width: 40%;
            margin-right: 10px;
        }

            .body .register .link span {
                font-size: 14px;
                padding: 8px 10px;
                color: #66677b;
                white-space: nowrap;
            }

            .body .register .link input {
                border: none;
                background-color: transparent;
                color: white;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 8px 10px;
                width: 100%;
            }

            .body .register .link button {
                border: none;
                width: 60px;
                background-color: #66677b;
                cursor: pointer;
            }

        .body .register .copy_btn {
            text-align: center;
            padding: 5px 0;
        }

            .body .register .copy_btn img {
                height: 23px;
            }

        .body .register .qr_btn {
            font-size: 14px;
            padding: 6px 10px;
            border: none;
            border-radius: 3px;
            background-color: #4a8c51;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

            .body .register .qr_btn img {
                height: 25px;
            }

    .body .table {
        overflow: auto;
    }

    .body .member .member_tables {
        width: 100%;
        overflow: auto;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: space-between;
        display: flex;
    }

        .body .member .member_tables .table_container {
            flex: 1; /* Let the table adjust its size based on content */
            padding: 10px;
            box-sizing: border-box;
        }

            .body .member .member_tables .table_container table {
                width: 100%;
                border-collapse: collapse;
            }

            .body .member .member_tables .table_container th, .body .member .member_tables .table_container td {
                padding: 10px;
                border: 1px solid #ddd;
                text-align: left;
                white-space: nowrap; /* Prevent text wrapping */
            }

/*        .body .member .member_tables table {
            flex: 1;
            margin-top: 20px;
            white-space: nowrap;
        }*/

            .body .member .member_tables table input[type=checkbox] {
                cursor: pointer;
            }

            .body .member .member_tables table .sortable {
                padding-bottom: 5px;
                cursor: pointer;
            }

                .body .member .member_tables table .sortable img {
                    height: 12px;
                    margin-left: 5px;
                    margin-bottom: -2px;
                }

.filter_icon {
    display: none;
    background-color: #66677b;
    padding: 7px 15px;
    border-radius: 100px;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 15px;
}

    .filter_icon i {
        margin-right: 10px;
    }

.grid_form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .grid_form.center_grid_form {
        margin: 0 auto;
    }

    .grid_form .input {
        flex: 1 1 405px;
        align-items: stretch;
        position: relative;
    }

        .grid_form .input span {
            color: white;
            font-size: 13px;
            margin-bottom: 5px;
        }

        .grid_form .input input,
        .grid_form .input select,
        .grid_form .input textarea {
            width: 100%;
            height: 40px;
            background-color: #1f1e2c;
            border: none;
            padding: 10px;
            color: white;
            resize: none;
            border-radius: none;
        }

            .grid_form .input input::-webkit-calendar-picker-indicator,
            .grid_form .input select::-webkit-calendar-picker-indicator,
            .grid_form .input textarea::-webkit-calendar-picker-indicator {
                filter: invert(1);
            }

        .grid_form .input .input_icon {
            padding: 10px;
            background-color: #1f1e2c;
            margin: 0;
        }

        .grid_form .input .abso_icon {
            position: absolute;
            top: 67%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
        }

    /*.grid_form .btns {
        justify-content: flex-end;
    }*/

    .grid_form .btns button {
        /*margin-left: 10px;*/
        background-color: #ec7018;
        color: white;
        min-width: 100px;
        margin-top: 22px;
    }

.adjustment_info {
    display: none;
    width: 100%;
}

    .adjustment_info .input {
        margin-bottom: 15px;
    }

.adjustment_table td {
    text-align: center;
}

.adjustment_table .action_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #ec7018;
    text-decoration: underline;
    width: 100%;
    margin: 0;
}

    .adjustment_table .action_btn div {
        cursor: pointer;
        position: relative;
        padding: 5px 7px;
    }

        .adjustment_table .action_btn div:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -1px;
            transform: translateY(-50%);
            width: 1px;
            height: 50%;
            background-color: #ec7018;
        }

        .adjustment_table .action_btn div:last-child {
            margin-right: 0;
        }

            .adjustment_table .action_btn div:last-child:after {
                width: 0;
                height: 0;
            }

.adjustment_method_radio {
    display: flex;
    flex-wrap: wrap;
}

.adjustment_method_radio_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 15px;
}

    .adjustment_method_radio_item:last-child {
        margin-right: 0;
    }

    .adjustment_method_radio_item input {
        margin-right: 10px;
        cursor: pointer;
    }

    .adjustment_method_radio_item label {
        cursor: pointer;
    }

.setting_box {
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

    .setting_box h2 {
        flex: 1 1 100%;
        font-size: 15px;
        color: white;
        margin-bottom: 5px;
    }

    .setting_box .input {
        flex-basis: 150px;
        flex-grow: 0;
    }

.popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.popup_info {
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
    background-color: #1f1e2c;
    padding: 20px;
    border-radius: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    .popup_info .logo {
        margin-bottom: 15px;
        text-align: center;
    }

        .popup_info .logo img {
            width: auto;
            height: 50px;
        }

    .popup_info .popup_btn {
        background: #ec7018;
        border: none;
        color: #fff;
        padding: 10px;
        border-radius: 3px;
        width: 90%;
        cursor: pointer;
    }

    .popup_info .inv_code {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 15px;
    }

        .popup_info .inv_code p {
            margin-bottom: 3px;
            color: #fff;
            color: #b2b2b2;
            font-size: 14px;
        }

        .popup_info .inv_code .popup_inv_code {
            color: #fff;
            background-color: transparent;
            border: none;
            font-size: 16px;
            text-transform: uppercase;
            text-align: center;
        }

/*.qr {
    margin-bottom: 15px;
}*/

.qr img {
    width: 90%;
    max-width: 300px;
    border-radius: 5px;
    margin: auto;
    border: solid white 2px;
}

.notification {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}
    /*
    .notification.error-notification {
        background-color: #F8D7DA;
    }*/

    .notification .notification-close {
        margin-left: 10px;
        cursor: pointer;
    }


@keyframes skeleton {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.acc_top_bar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
    width: 100%;
    background-color: #1f1e2c;
    padding: 20px 10px;
}

.acc_top_bar_menu {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
}

    .acc_top_bar_menu button {
        color: #7f7f7f;
        margin-right: 20px;
        transition: 0.3s;
        position: relative;
        white-space: nowrap;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

        .acc_top_bar_menu button:hover {
            color: #fff;
        }

        .acc_top_bar_menu button.active {
            color: #fff;
        }

        .acc_top_bar_menu button:last-child {
            margin-right: 0;
        }

.tabcontent {
    display: none;
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.acc_accordion {
    margin: 0 auto;
    margin-bottom: 15px;
}

    .acc_accordion:last-child {
        margin-bottom: 0;
    }

.acc_accordion_btn {
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    font-size: 16px;
    color: #000;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

    .acc_accordion_btn:after {
        content: "+";
        color: #000;
        float: right;
        margin-right: 5px;
    }

    .acc_accordion_btn.active:after {
        content: "−";
    }

.acc_accordion_panel {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-out;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .acc_accordion_panel .input button {
        border: none;
        padding: 10px;
        cursor: pointer;
    }

        .acc_accordion_panel .input button.acc_reset_pass_btn {
            background-color: #005384;
            color: #fff;
        }

        .acc_accordion_panel .input button.acc_reset_login_attemp_btn {
            background-color: #d81b60;
            color: #fff;
        }

        .acc_accordion_panel .input button.not_verified {
            background-color: #dd4b39;
            color: #fff;
        }

        .acc_accordion_panel .input button:disabled {
            cursor: unset;
        }

.reset_popup_info {
    background-color: #2d2c3e;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
    padding: 20px;
}

    .reset_popup_info h3 {
        margin-bottom: 20px;
        color: #fff;
        font-size: 17px;
    }

.reset_login_attemp .reset_popup_info {
    max-width: 300px;
    width: 100%;
}

.input .select2-container {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.input .select2-container--default .select2-selection--multiple {
    width: 100%;
    height: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #1f1e2c;
    border: none;
    color: white;
    resize: none;
    position: relative;
    padding: 10px;
    padding-top: 5px;
    border-radius: 0;
}

    .input .select2-container--default .select2-selection--multiple .select2-selection__clear {
        top: 50%;
        margin-top: 0 !important;
        transform: translateY(-50%);
    }

        .input .select2-container--default .select2-selection--multiple .select2-selection__clear span {
            color: #fff;
            font-size: unset;
        }

.input .select2-container--default span {
    color: #000;
    font-size: unset;
    margin-bottom: 0;
}

.input .select2-container .select2-search--inline .select2-search__field {
    margin-top: 0;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
}

    .input .select2-container .select2-search--inline .select2-search__field::-moz-placeholder {
        color: #fff;
    }

    .input .select2-container .select2-search--inline .select2-search__field::placeholder {
        color: #fff;
    }

.input .select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.selection_dropdown {
    position: fixed;
    bottom: -100%;
    width: 100%;
    border-radius: 10px 10px 0 0;
    color: #fff;
    background-color: #1f1e2c;
    height: 33.3333333333%;
    z-index: -1;
    transition: 0.5s;
    overflow: auto;
}

    .selection_dropdown.show {
        bottom: 0;
        z-index: 100;
    }

.selection_dropdown_holder {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.selection_dropdown_title {
    text-align: center;
    border-bottom: 1px solid #fff;
    padding: 10px 0;
    font-weight: 500;
    letter-spacing: 1px;
    position: sticky;
    top: 0;
    background-color: #aeaeae;
    text-transform: capitalize;
}

.selection_dropdown_item {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    text-align: center;
}

.selection_layer {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    width: 100%;
    height: 100%;
    z-index: -99;
    opacity: 0;
    transition: 0.5s;
}

    .selection_layer.show {
        z-index: 99;
        opacity: 1;
    }

.pagination-result-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    flex-wrap: wrap;
}

.pagination-wrapper {
    display: flex;
    align-items: center;
}

    .pagination-wrapper .pagination-arrow {
        font-size: 40px;
        padding-bottom: 3px;
        cursor: pointer;
    }

    .pagination-wrapper .pagination-page-holder {
        display: flex;
        /*padding: 0 10px;*/
    }

        .pagination-wrapper .pagination-page-holder .pagination-page {
            padding: 5px 10px;
            border-radius: 5px;
            background-color: #66677b;
            margin-right: 10px;
            cursor: pointer;
        }

            .pagination-wrapper .pagination-page-holder .pagination-page.active {
                background-color: #ec7018;
            }

            .pagination-wrapper .pagination-page-holder .pagination-page:last-child {
                margin-right: 0;
            }

.today_info_popup .popup_info {
    min-width: 300px;
    max-width: 500px;
    /*height: 200px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.today_info_popup .today_info_popup_title {
    border-bottom: 1px solid #fff;
    padding: 12px 0;
    color: #fff;
    width: 100%;
    text-align: center;
}

.today_info_popup .today_info_popup_infor {
    display: flex;
    justify-content: flex-start;
    color: #fff;
    width: 100%;
    padding: 12px 0;
    font-size: 30px;
    align-items: center;
    border-bottom: 1px solid #fff;
}

    .today_info_popup .today_info_popup_infor span {
        font-size: 23px;
        margin-right: 15px;
    }

    .today_info_popup .today_info_popup_infor p {
        margin-bottom: 0;
        font-weight: 600;
    }

    .today_info_popup .today_info_popup_infor input {
        background-color: #2d2c3e;
        border: none;
        color: white;
        padding: 10px 30px;
        width: 100%;
    }

    .today_info_popup .today_info_popup_infor button {
        background: #ec7018;
        margin-left: auto;
        margin-right: auto;
        border: none;
        color: white;
        padding: 8px 30px;
        border-radius: 3px;
        cursor: pointer;
        text-align: center;
    }

@media only screen and (max-width: 1000px) {
    .body .filter.row,
    .body .filter.col {
        justify-content: flex-start;
    }

    .layer.show {
        z-index: 9;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        width: 100%;
        height: 100%;
    }

    .sidebar {
        position: fixed;
        transition: 0.3s;
        transition: 0.3s;
        transform: translateX(-100%);
        height: 100vh;
    }

        .sidebar.sidebar_active {
            position: fixed;
        }

        .sidebar .close_menu {
            display: block;
        }

        .sidebar .mobmenu {
            display: flex;
        }

    .sidebar_active {
        transform: none;
    }

    .topbar .menu_btn {
        display: block;
    }

    .topbar .icon_btn {
        display: none;
    }

    .topbar .username .icon_btn {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
    .pagination-result-wrapper {
        margin-top: 20px;
        justify-content: center;
    }

        .pagination-result-wrapper .pagination-result {
            width: 100%;
            margin-bottom: 10px;
            text-align: center;
        }

    .filter_icon {
        display: flex;
        align-items: center;
    }

    .topbar .menu_btn {
        order: 1;
        margin-right: 10px;
    }

    .topbar h1 {
        order: 2;
    }

    .topbar .username {
        order: 3;
        margin-left: 5px;
        margin-right: 7px;
    }

    .topbar .theme {
        order: 4;
    }

    .body .register .link {
        width: 100%;
    }

    .body .filter {
        padding: 0;
        height: 0;
        overflow: hidden;
    }

        .body .filter .filter_item {
            width: 100%;
        }

            .body .filter .filter_item span {
                width: auto;
            }

            .body .filter .filter_item input,
            .body .filter .filter_item select {
                width: 100%;
                padding: 10px;
            }

        .body .filter button {
            width: 48%;
            padding: 7px;
        }

        .body .filter a {
            width: 48%;
            padding: 10px;
        }

    .daterangepicker.show-calendar .drp-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

        .daterangepicker.show-calendar .drp-buttons .btn {
            margin-left: 5px;
            width: 60px;
        }

    .daterangepicker .drp-selected {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        padding-right: 0 !important;
    }
}
/*# sourceMappingURL=style.css.map */

/* Pagination */
ul {
    list-style-type: none;
}

.agent_product_settings_wrapper {
    width: 100%;
    margin-bottom: 20px;
}

.agent_product_settings_holder {
    display: flex;
    justify-content: space-between;
    overflow: auto;
    width: 100%;
    font-size: 14px;
}

    .agent_product_settings_holder .agent_product_settings_item-holder {
        width: 100%;
        white-space: nowrap;
    }

    .agent_product_settings_holder .agent_product_settings_title {
        font-weight: 500;
        border: 1px solid #fff;
        padding: 5px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .agent_product_settings_holder .agent_product_settings_item {
        border: 1px solid #fff;
        height: 40px;
    }

        .agent_product_settings_holder .agent_product_settings_item input {
            text-align: center;
        }

        .agent_product_settings_holder .agent_product_settings_item input,
        .agent_product_settings_holder .agent_product_settings_item select {
            width: 100%;
            padding: 5px;
            border-radius: 0;
            border: none;
            background-color: #1f1e2c;
            color: #fff;
            height: 38px;
            white-space: nowrap;
        }

    .agent_product_settings_holder .agent_product_settings_action {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #1f1e2c;
    }

        .agent_product_settings_holder .agent_product_settings_action button {
            padding: 0;
            height: 80%;
            max-width: 70%;
            width: 100%;
        }


    .agent_product_settings_holder .agent_product_settings_item input, .agent_product_settings_holder .agent_product_settings_item select {
        width: 100%;
        padding: 5px;
        border-radius: 0;
        border: none;
        background-color: #1f1e2c;
        color: #fff;
        height: 38px;
        white-space: nowrap;
    }

.negative {
    color: #ff5353;
}

.positive {
    color: green;
}

.header_notification {
    position: relative;
    margin-right: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.header_notification_icon img {
    height: 22px;
    animation: shake-lr 1.5s infinite;
}

@keyframes shake-lr {
    0%, 100% {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }

    10% {
        transform: rotate(8deg);
    }

    20%, 40%, 60% {
        transform: rotate(-10deg);
    }

    30%, 50%, 70% {
        transform: rotate(10deg);
    }

    80% {
        transform: rotate(-8deg);
    }

    90% {
        transform: rotate(8deg);
    }
}

.header_notification_num {
    position: absolute;
    top: -7px;
    right: -7px;
    background-color: #e12d2d;
    border-radius: 100px;
    font-size: 11px;
    color: #fff;
    width: 17px;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.popDropDown {
    position: relative;
    border-radius: 5px;
    width: 100%;
    height: 40px;
    background-color: #343347;
    border: none;
    padding: 10px;
    color: white;
    resize: none;
}

.product-conf-input-holder {
    display: flex;
    flex-wrap: wrap;
}

    .product-conf-input-holder .product-conf-input {
        margin-right: 10px;
        margin-bottom: 10px;
    }

        .product-conf-input-holder .product-conf-input:last-child {
            margin-right: 0;
        }

        .product-conf-input-holder .product-conf-input input {
            background: none;
            border: none;
            color: white;
            padding: 10px;
            width: 400px;
            background-color: #1f1e2c;
        }

.bet-image {
    width: 30px
}

.popup_update_holder {
    background-color: #2d2c3e;
    border-radius: 5px;
    padding: 15px;
    color: #fff;
    width: 100%;
    max-width: 350px;
}

    .popup_update_holder.change_tag_popup_holder {
        max-width: 700px;
    }

        .popup_update_holder.change_tag_popup_holder .popup_update_content_holder {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .popup_update_holder.change_tag_popup_holder .popup_update_btn {
            width: 100%;
        }

        .popup_update_holder.change_tag_popup_holder .popup_update_input {
            width: calc((100% / 3) - 10px);
            flex-wrap: nowrap;
        }

            .popup_update_holder.change_tag_popup_holder .popup_update_input.popup_update_check_input label {
                margin-left: 7px;
                margin-right: 0;
                margin-bottom: 0;
            }

            .popup_update_holder.change_tag_popup_holder .popup_update_input.popup_update_check_input input {
                width: unset;
                height: unset;
                padding: unset;
            }

    .popup_update_holder .popup_update_top {
        position: relative;
    }

    .popup_update_holder .popup_close {
        position: absolute;
        top: -30px;
        right: -15px;
        font-size: 25px;
        cursor: pointer;
    }

    .popup_update_holder .popup_update_title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #fff;
    }

    .popup_update_holder .popup_update_input {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

        .popup_update_holder .popup_update_input.popup_update_check_input {
            flex-direction: row;
            align-items: center;
        }

            .popup_update_holder .popup_update_input.popup_update_check_input label {
                margin-right: 10px;
                margin-bottom: 0;
            }

            .popup_update_holder .popup_update_input.popup_update_check_input input {
                width: unset;
                height: unset;
                padding: unset;
            }

        .popup_update_holder .popup_update_input label {
            margin-bottom: 5px;
            font-size: 14px;
        }

        .popup_update_holder .popup_update_input input, .popup_update_holder .popup_update_input select {
            width: 100%;
            height: 40px;
            background-color: #1f1e2c;
            border: none;
            padding: 10px;
            color: white;
            cursor: auto;
        }

    .popup_update_holder .popup_update_btn {
        text-align: center;
    }

        .popup_update_holder .popup_update_btn button {
            width: 50%;
        }

@media only screen and (max-width: 1000px) {
    .body .filter.row, .body .filter.col {
        justify-content: flex-start;
    }

    .layer.show {
        z-index: 9;
        backdrop-filter: blur(2px);
        width: 100%;
        height: 100%;
    }

    .sidebar {
        position: fixed;
        transition: 0.3s;
        transform: translateX(-100%);
        height: 100vh;
    }

        .sidebar.sidebar_active {
            position: fixed;
        }

        .sidebar .close_menu {
            display: block;
        }

        .sidebar .mobmenu {
            display: flex;
        }

    .sidebar_active {
        transform: none;
    }

    .topbar .menu_btn {
        display: block;
    }

    .topbar .icon_btn {
        display: none;
    }

    .topbar .username .icon_btn {
        display: block;
    }
}

@media only screen and (max-width: 991px) {
    .input .ms-drop {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        background-color: #1f1e2c;
        border: 0;
        height: calc(100% / 3);
        border-radius: 0;
    }

        .input .ms-drop input[type="checkbox"] {
            margin-top: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .input .ms-drop ul {
            max-height: unset;
        }

            .input .ms-drop ul > li {
                padding: 10px;
                border-top: 1px solid rgba(255, 255, 255, 0.5);
            }

                .input .ms-drop ul > li:first-child {
                    border-top: none;
                }

                .input .ms-drop ul > li:last-child {
                    border-top: none;
                }

                .input .ms-drop ul > li label {
                    display: flex;
                    align-items: center;
                }

                    .input .ms-drop ul > li label span {
                        color: #fff;
                        margin-bottom: 0;
                        font-size: 18px;
                    }

        .input .ms-drop.bottom {
            top: unset;
        }

    .filter_item .ms-drop {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        background-color: #1f1e2c;
        border: 0;
        height: calc(100% / 3);
        border-radius: 0;
    }

        .filter_item .ms-drop input[type="checkbox"] {
            margin-top: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .filter_item .ms-drop ul {
            max-height: unset;
            height: 100%;
        }

            .filter_item .ms-drop ul > li {
                padding: 10px;
                border-top: 1px solid rgba(255, 255, 255, 0.5);
            }

                .filter_item .ms-drop ul > li:first-child {
                    border-top: none;
                }

                .filter_item .ms-drop ul > li:last-child {
                    border-top: none;
                }

                .filter_item .ms-drop ul > li label {
                    display: flex;
                    align-items: center;
                }

                    .filter_item .ms-drop ul > li label span {
                        color: #fff;
                        margin-bottom: 0;
                        font-size: 18px !important;
                    }

        .filter_item .ms-drop.bottom {
            top: unset;
        }

    .multi_selection_sel_layer {
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(1px);
        width: 100%;
        height: 100%;
        z-index: -99;
        opacity: 0;
        transition: 0.5s;
    }

        .multi_selection_sel_layer.show {
            z-index: 99;
            opacity: 1;
        }

    .multi_selection_sel_title {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        z-index: -1;
        text-align: center;
        padding: 10px 0;
        font-weight: 500;
        letter-spacing: 1px;
        background-color: #ec7018;
        text-transform: capitalize;
        border-radius: 10px 10px 0 0;
    }

        .multi_selection_sel_title.show {
            bottom: 33%;
            z-index: 99;
            opacity: 1;
            display: block;
        }

    .body .cards .card {
        min-width: calc(100% / 3 - 20px);
        max-width: calc(100% / 3 - 20px);
    }

    .agent_product_settings_holder .agent_product_settings_item input, .agent_product_settings_holder .agent_product_settings_item select {
        width: unset;
    }

    .agent_product_settings_holder .agent_product_settings_action {
        padding: 0 5px;
    }

        .agent_product_settings_holder .agent_product_settings_action button {
            max-width: unset;
            width: 100px;
        }
}

@media only screen and (max-width: 600px) {
    .header_notification {
        order: 5;
        margin-right: 0;
        margin-left: 15px;
    }

    .header_notification_icon img {
        height: 20px;
    }

    .pagination-result-wrapper {
        margin-top: 20px;
        justify-content: center;
    }

        .pagination-result-wrapper .pagination-result {
            width: 100%;
            margin-bottom: 10px;
            text-align: center;
        }

    .filter_icon {
        display: flex;
        align-items: center;
    }

    .topbar {
        padding: 15px;
    }

        .topbar .menu_btn {
            order: 1;
            margin-right: 10px;
        }

        .topbar h1 {
            order: 2;
        }

        .topbar .username {
            order: 3;
            margin-left: 5px;
            margin-right: 7px;
        }

        .topbar .theme {
            order: 4;
        }

    .body .register .link {
        width: 100%;
    }

    .body .filter {
        padding: 0;
        height: 0;
        overflow: hidden;
    }

        .body .filter .filter_item {
            width: 100%;
        }

            .body .filter .filter_item span {
                width: auto;
            }

            .body .filter .filter_item input, .body .filter .filter_item select {
                width: 100%;
                padding: 10px;
            }

        .body .filter button {
            width: 48%;
            padding: 7px;
        }

        .body .filter a {
            width: 48%;
            padding: 10px;
        }

    .body .cards .card {
        min-width: calc(100% / 2 - 10px);
        max-width: calc(100% / 2 - 10px);
        padding: 15px;
    }

        .body .cards .card .col {
            margin-right: 0;
            width: 100%;
        }

        .body .cards .card h1 {
            font-size: 20px;
        }

    .daterangepicker.show-calendar .drp-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

        .daterangepicker.show-calendar .drp-buttons .btn {
            margin-left: 5px;
            width: 60px;
        }

    .daterangepicker .drp-selected {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        padding-right: 0 !important;
    }

    .body .filter .filter_item_full .filter_item input {
        width: 100%;
    }

    .popup_update_holder.change_tag_popup_holder .popup_update_input {
        width: 48%;
    }
}