:root {
    --theme-color-1: #2d3238;
    --theme-color-2: var(--bs-dark-bg-subtle);
    --theme-color-3: #ff7315;
    --theme-color-grd-1: linear-gradient(-45deg, #df6717, #ff7315);
    --theme-color-grd-2: -webkit-linear-gradient(-45deg, #df6717, #ff7315);
    --theme-font-color-1: #fff;
    --theme-font-color-2: #fff;
    --theme-font-color-3: #fff;
    --theme-border-color-1: #ff7315;
}
.ft-1 {
    color: var(--theme-font-color-1) !important;
}
/* .modal-content {
    color: #fff !important;
    border-radius: 1rem !important;
    background: var(--theme-color-2) !important;
} */

.modal-title {
    color: var(--theme-font-color-1) !important;
}
.modal-btn-close {
    color: var(--theme-font-color-1) !important;
}
.text-primary {
    color: var(--theme-color-3) !important;
}
.bg-primary {
    background-color: var(--theme-color-3) !important;
}
.content {
    padding-top: 110px;
    min-height: 446px;
}

.table-white tr th,
.table-white tr td {
    color: #fff;
    border-color: #242f3a;
}

label {
    font-weight: 500;
    text-transform: none;
}

.form-group > label {
    color: var(--theme-font-color-1) !important;
}

.col-form-label {
    padding-top: calc(0.375rem + 3px);
}

.card-tools {
    float: right;
    margin-top: -25px;
}

.cursor-pointer {
    cursor: pointer;
}

.menu-user a {
    padding: 10px 16px;
    border-radius: 5px;
}

.menu-user a:hover {
    background: var(--theme-color-2);
}

.menu-user a i {
    font-size: 19px;
    width: 20px;
}

.menu-user {
    margin-bottom: 26px;
}

.daterangepicker td,
.daterangepicker th {
    color: #626262;
}

body,
.circle-primary {
    background: var(--bs-body-bg);
}

.bg-theme-2,
.bg-custom,
.card {
    background-color: var(--theme-color-1) !important;
}

.bg-theme-1 {
    background: var(--theme-color-1) !important;
}

.bg-theme-3 {
    background: var(--theme-color-3) !important;
}

.btn-topup {
    background: var(--theme-color-grd-1) !important;
}

.btn-topup:hover {
    background: var(--theme-color-grd-2) !important;
    border: 1px solid rgb(199 164 108);
}

.back-to-top {
    background: var(--theme-color-grd-2);
    background: var(--theme-color-grd-1);
}

.section {
    background: #212529;
}

.radio-service:checked + label:before,
.radio-payment:checked + label:before {
    color: #fff;
}

.radio-service + label {
    border: 1px solid var(--theme-border-color-1);
    box-shadow: 0px 0px 20px 0px #7367f01c;
    background: #1e22295c;
}

.radio-payment + label {
    border: 1px solid var(--theme-border-color-1);
    box-shadow: 0px 0px 20px 0px #7367f01c;
    background: #1e22295c;
}

.radio-service + label:hover,
.radio-payment + label:hover {
    background: var(--theme-color-grd-2);
}

.radio-service:checked + label,
.radio-payment:checked + label {
    background: var(--theme-color-grd-1);
    color: #fff;
}

.strip-primary {
    background: var(--theme-color-3);
}

.sidenav {
    background: var(--theme-color-2);
}

.radio-nominal:checked + label,
.table-white tr th,
.table-white tr td {
    border-color: var(--theme-color-1);
}

.menu-utama div a {
    margin: 0 4px;
}

.menu-utama div a:hover,
.menu-utama div a.active {
    background: var(--theme-color-grd-1);
    border-radius: 14px 4px;
}

.menu-utama div a:hover,
.menu-utama div a.active {
    background: var(--theme-color-grd-2) !important;
}

.navbar-collapse {
    background: none;
}

.menu-list {
    margin-left: 15px;
    padding-left: 0;
}

.menu-list li a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px dashed var(--theme-color-3);
    transition: 0.4s;
    text-decoration: none;
}

.menu-list li a:hover {
    padding-left: 6px;
}