:root {
    --theme-color-1: #212529;
    --theme-color-2: #22364b;
    --theme-color-3: #0287f3;
    --theme-light: rgb(226, 231, 255);
    --theme-font-color-1: #fff;
    --theme-font-color-2: #fff;
    --theme-font-color-3: #fff;
}
.ft-1 {
    color: var(--theme-font-color-1) !important;
}

.bg-primary {
    background: var(--theme-color-3) !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;
}
.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(.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;
}


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

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

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

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

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

.btn-topup,
.back-to-top {
    background: var(--theme-color-3);
}

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

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

.radio-service+label,
.radio-payment+label {
    background: var(--theme-color-1);
    border: none !important;
}

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

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

.btn-primary {
    background: var(--theme-color-3) !important;
    border-color: var(--theme-color-3) !important;
}

.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-3);
    border-radius: 14px 4px;
}

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

.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: .4s;
    text-decoration: none;
}

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