:root {
    --color-white: #fff;
    --body-color-white: #fff;
    --color-black: #000;
    --body-color-black: #000;
    --color-primary: #224DE3;
    --color-rep-table: #fff;
    --color-secondary: #9300D9;
    --color-success: #0FA54B;
    --color-danger: #F00;
    --color-info: #004aff;
    --color-link-hover: rgba(20, 52, 219, 0.07);
    --color-link-hover-light: rgba(20, 52, 219, 0.05);
    --color-border-light: rgba(0, 0, 0, 0.08);
    --color-border-medium: rgba(0, 0, 0, 0.25);
    --color-border-dark: rgba(208, 29, 72, 0.10);
    --color-text-muted: rgba(0, 0, 0, 0.50);
    --color-text-light: rgba(0, 0, 0, 0.70);
    --color-text-dim: rgba(0, 0, 0, 0.90);
    --color-background-light: rgba(233, 235, 240, 0.35);
    --color-background-hover: rgba(238, 248, 255, 0.76);
    --color-background-primary: rgba(20, 52, 219, 0.10);
    --color-background-success: rgba(20, 52, 219, 0.15);
    --color-background-muted: rgba(5, 9, 18, 0.04);
    --color-background-muted-dark: rgba(5, 9, 18, 0.08);
    --color-background-danger-light: #D01D481A;
    --color-background-danger-hover: rgba(208, 29, 72, 0.18);
    --color-shadow-light: rgba(0, 0, 0, 0.12);
    --color-shadow-medium: rgba(60, 64, 67, 0.3);
    --color-shadow-dark: rgba(60, 64, 67, 0.15);
    --label-color: #2B2B2B;
    --toggler-after-color: #1A34DB;
    --add-template-color: #1434DB;
    --add-app-color: #334fe5;
    --color-black2: #00000066;
    --color-black3: #000000B2;
    --h4-app: rgba(0, 0, 0, 0.40);
    --dropdown-period-selector: rgba(0, 0, 0, 0.04);
    --vertical-progress-color: rgba(0, 0, 0, 0.03);
    --vertical-label-color: rgba(0, 0, 0, 0.75);
    --users-btn-bg: #e5f2ff;
    --users-btn-color: #12517a;
    --users-btn-hover: #d2e8ff;
    --users-btn-steps-li: #b7b7b7;
    --step-completed-color: #008800;
    --show-log-color: #2727ff;
    --smoke-color: #f3f3f3;
    --select-invalid-color: #8a8a8a;
    --secondary-btn-blue-hover: rgba(20, 52, 219, 0.20);
    --secondary-btn-blue-hover2: #0924b2;
    --secondary-btn-red-hover: #D01D48;
    --select2-cont-color: #0509120A;
    --dark2-color: rgba(0, 0, 0, 0.55);
    --dark3-color: rgba(20, 52, 219, 0.1);
    --stat-box-bg: rgba(255, 255, 255, 0.61);
    --card-header-color: #f9fafc;
    --servers-head-color: #A83AFD;
    --edit-inp-color: #dedede;
    --sets-color: #F8F8F8;
    --sets-border: #E2E2E2;
    --sets-li-hover: #faedff;
    --sets-li-border: #ddc3e7;
    --btn-disabled: #505050;
    --stat-bg-1: #5908b1;
    --stat-bg-2: #dcc6fc;
    --rep-color-1: #f9f0ff;
    --rep-color-2: #f6e7ff;
    --rep-color-3: #1f7291;
    --btn-color-1: #c9c9c9;
    --filled-1: #d3e7cf;
    --filled-2: #bed9b8;
    --filled-3: #c0dabb;
    --filled-4: #a7c9a0;
    --package-color-1: #EDD5FF;
    --grad-1: #5B6AD0;
    --border-2: #D7D7D7;
    --color-3: rgba(43, 43, 43, 0.50);
    --color-4: #9000FF;
    --color-5: #FF4572;
    --color-6: #F6F6F6;
    --color-7: #ECECEC;
    --color-8: #B1B1B1;
    --color-9: #E0E0E0;
    --color-10: #404D61;
    --color-11: #f4e9ff;
    --color-12: #e7e7e7;
    --color-13: #324054;
    --color-14: #E6E8EA;
    --color-15: rgb(222, 226, 230);
    --color-16: #C7C7C7;
    --color-17: rgba(117, 125, 138, 0.28);
    --color-18: rgba(0, 0, 0, 0.2);
    --color-19: rgba(0, 0, 0, 0.1);

    --color-20: #222;
    --color-21: #404040;
    --color-22: #757D8A;
    --color-23: #5b6ad1;
    --color-24: #f8f1ff;
    --color-25: #352B51;
    --color-26: #fbf9fd;
    --color-27: #75698F;
    --color-28: #A49ABB;
    --color-29: #5A4F72;
    --color-30: #fdfcff;
    --color-31: #45C698;
    --color-32: #FF589E;
    --color-33: #6C20CC;
    --color-34: #8010B5;
    --color-35: rgba(0, 0, 0, 0.10);
    --color-36: #F9F8F9;
    --color-37: #721CFD;
    --color-38: #FFBE41;
    --color-39: #FFE818;
    --color-40: #FED62B;
    --color-41: #FED82A;
    --color-42: #FFE925;
    --color-43: rgba(233, 145, 42, 0);
    --color-44: rgba(255, 150, 27, 0);
    --color-45: #ee0000;
    --color-46: #f2e1ff;
    --color-47: #e1b9ff;
    --color-48: rgb(175, 179, 182);
    --color-49: #861ad9;
    --color-50: rgba(134, 26, 217, 0.11);
    --color-51: rgba(243, 243, 243, 0.54);
    --color-52: #8c8c8c;
    --color-53: #5b5b5b;
    --color-54: #e5e5e5;
    --color-55: rgba(243, 243, 243, 0.58);
    --color-56: #dcc8f0;
    --color-57: rgba(177, 146, 208, 0.7);
    --color-58: #bf90e0;
    --color-59: #d6ddff;
    --color-60: #E8E8E8;
    --color-61: #E7E8EA;
    --color-62: #e0e0ff;
    --color-63: #444;
    --color-64: rgb(248,241,255);
    --color-65: rgba(248,241,255,1);
    --color-66: rgba(251,249,253,1);
    --color-67: rgba(99, 99, 99, 0.2);
    --color-68: rgba(34, 77, 227, 0.15);

    --color-69: rgba(208, 29, 72, 0.05);
    --color-70: rgba(4, 18, 45, 0.08);
}

.dark-mode {
    display: none !important;
}

.navbar.bg-light {
    background-color: var(--color-white) !important;
}

@media screen and (max-width: 768px) {
    .stat-page .navbar {
        background-color: var(--color-24) !important;
    }

    .stat-page .page-title {
        color: var(--color-25) !important;
        font-size: 16px;
        font-weight: 600;
    }

    .stat-page .navbar-toggler-icon:not(.disable-mob) {
        color: var(--color-25) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2853, 43, 81, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .mob-header .right-side .box {
        background-color: var(--color-white) !important;
    }
}
.modal-cancel {
    text-transform: inherit !important;
    border-radius: 4px;
    border: 1px solid var(--color-blue-1) !important;
    color: var(--color-blue-1) !important;
    font-family: Inter, serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    letter-spacing: -0.044px !important;
}
.modal-confirm-delete {
    text-transform: inherit !important;
    border-radius: 4px;
    color: var(--color-white) !important;
    border: 1px solid var(--color-danger) !important;
    font-family: Inter, serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    letter-spacing: -0.044px !important;
    background-color: var(--color-danger) !important;
}
.modal-confirm-send {
    text-transform: inherit !important;
    border-radius: 4px;
    color: var(--color-white) !important;
    border: 1px solid var(--color-info) !important;
    font-family: Inter, serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    letter-spacing: -0.044px !important;
    background-color: var(--color-info) !important;
}
.history-btn-prod {
    background-color: var(--smoke-color) !important;
    color: var(--color-53) !important;
}
.history-btn-prod:hover {
    color: var(--color-53) !important;
    background-color: var(--color-54) !important;
}
.history-btn-prod:focus {
    color: var(--color-53) !important;
    background-color: var(--color-54) !important;
}
.footer-row tr, .footer-row td  {
    background-color: var(--color-7) !important;
}
.reports-cont-table tr {
    background-color: var(--sets-color);
}
.rep-table .table-dark tr, .rep-table .table-dark th, .rep-table .table-dark td {
    background-color: var(--color-rep-table);
    color: var(--color-8);
}
.table-success {
    background-color: #f2e1ff !important;
    border-bottom-color: #e1b9ff !important;
}
.table-success td {
    background-color: #f2e1ff !important;
    border-bottom-color: #eacfff !important;
}
.table-warning {
    background-color: #e6c8ff !important;
    border-bottom-color: #e0b9ff !important;
}
.table-warning td {
    background-color: #e6c8ff !important;
    border-bottom-color: #e0b9ff !important;
}
.del-photo {
    margin-top: 10px;

}

.q-red-row {
    background: #4E0E2E !important;
}
.q-green-row {
    background: #1F6252 !important;
}

.stat-q-cell {
    display: flex;
    align-items: center;
    justify-content: space-between !important;

    .title {
        flex: 1;

        display: inline-flex;
        align-items: center;
        gap: 5px;

        svg, img {
            width: 18px;
            border-radius: 3px;

            path {
                stroke: #b1b1b1;
            }
        }
    }
    .counter-q {
        flex: 1;
        color: #fff;
        text-align: right;
        padding-right: 13px;
    }




}
.q-red {
    color: #FF4E98 !important;

    svg {
        path {
            stroke: #FF4E98 !important;
        }
    }
}
.q-green {
    color: #5FFFDA !important;

    svg {
        path {
            stroke: #5FFFDA !important;
        }
    }
}