:root {
    --primary: #012C5A;
    --primary-50: #E6EAEF;
    --primary-hover: #012852;
    --primary-soft: #012C5A;
    --secondary: #EF552A;
    --secondary-hover: #D94D26;
    --secondary-soft: #FDEEEA;
    --success: #198754;
    --success-50: #E8F3EE;
    --success-800: #0E4A2E;
    --success-hover: #177B4C;
    --success-soft: #198754;
    --danger: #DC3545;
    --danger-50: #FCEBEC;
    --danger-800: #791D26;
    --danger-hover: #C8303F;
    --danger-soft: #DC3545;
    --warning: #FFC107;
    --warning-hover: #E8B006;
    --warning-soft: #FFC107;
    --info: #0DCAF0;
    --info-hover: #0CB8DA;
    --info-soft: #0DCAF0;


    --text-1: #ffffff;
    --text-2: #f5f5f5;
    --text-3: #ededed;
    --text-4: #e0e0e0;
    --text-5: #c2c2c2;
    --text-6: #9e9e9e;
    --text-7: #757575;
    --text-8: #616161;
    --text-9: #404040;
    --text-10: #0a0a0a;

    --text-soft-primary: #012C5A;
    --text-soft-secondary: #2A326B;
    --text-soft-success: #198754;
    --text-soft-danger: #DC3545;
    --text-soft-warning: #FFC107;
    --text-soft-info: #0DCAF0;


    /* custom bawaan template */

    --bs-primary-light: #F6F2E6 !important;
    --bs-primary-clarity: #C3A754 !important;
    --bs-menu-link-bg-color-active: var(--primary) !important;
    --bs-primary: var(--primary);
    --bs-primary-active: var(--primary-hover) !important;
    --bs-success: var(--success);
    --bs-success-active: var(--success-hover) !important;
    --bs-danger: var(--danger);
    --bs-danger-active: var(--danger-hover) !important;
    --bs-warning: var(--warning);
    --bs-warning-active: var(--warning-hover) !important;
    --bs-info: var(--info);
    --bs-info-active: var(--info-hover) !important;
    --bs-secondary: var(--text-6) !important;
    --bs-secondary-light: var(--text-3) !important;
    --bs-secondary-inverse: var(--text-10) !important;

    --bs-text-primary: var(--primary);
    --bs-border-color: var(--text-4);

    --bs-success-light: var(--success-50);
    --bs-danger-light: var(--danger-50);
}


@font-face {
    font-family: 'Material Symbol';
    src: url('/fonts/Material Symbols Variable.ttf') format('truetype');
}

.icon {
    font-family: 'Material Symbol' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px !important;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}
.icon-small {
    font-family: 'Material Symbol' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 14px !important;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.icon-box-pilih {
    width: fit-content;
    position:relative;
    background-color: var(--text-1) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
    background-size: 100%;
    border-radius: 50%;
}

.breadcrumb>li+li:before {
    color: var(--text-7);
    content: "";
    padding: 0 5px;
}

#kt_app_content {
    margin: 24px;
}

.app-sidebar-secondary {
    border-right: 1px solid var(--text-4);
}

.app-sidebar-primary {
    margin: 0px !important;
    border-right: 1px solid var(--text-4);
}

* {
    font-family: Inter !important;
}

/* Common Style */
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
p {
    font-family: 'Inter' !important;
    color: var(--text-10) !important;
    font-weight: 500;
    line-height: 150%;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fs-52 {
    font-size: 52px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-14 {
    font-size: 14px !important;
}


.fs-12 {
    font-size: 12px !important;
}

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

.btn {
    display: inline-flex;
    height: 40px;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 400;
    /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); */
}
.btn-badge {
    display: inline-flex;
    height: 20px;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 400;
    /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); */
}

.btn-default {
  border: 1px solid var(--text-4) !important;
  background: #fff;
  color: #000000 !important;
}

.btn-default:hover {
  background-color: var(--text-2) !important;
}
.btn-primary {
    border-radius: 4px !important;
    background-color: var(--primary) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

.btn-primary:active {
    box-shadow: 0 0 0px 4px #86A281 !important;
}

.btn-success {
    border-radius: 4px !important;
    background-color: var(--success) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: #fff !important;
}

.btn-success:hover {
    background-color: var(--success-hover) !important;
}

.btn-success:active {
    box-shadow: 0 0 2px 3px #65AF8C !important;
}

.btn-danger {
    border-radius: 4px !important;
    background-color: var(--danger) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: #fff !important;
}

.btn-danger:hover {
    background-color: var(--danger-hover) !important;
}

.btn-danger:active {
    box-shadow: 0 0 2px 3px #E87882 !important;
}

.btn-warning {
    border-radius: 4px !important;
    background-color: var(--warning) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: var(--text-10) !important;
}

.btn-warning:hover {
    background-color: var(--warning-hover) !important;
}

.btn-warning:active {
    box-shadow: 0 0 2px 3px #FFD559 !important;
}

.btn-info {
    border-radius: 4px !important;
    background-color: var(--info) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: var(--text-10);
}

.btn-info:hover {
    background-color: var(--info-hover) !important;
}

.btn-info:active {
    box-shadow: 0 0 2px 3px #5DDBF5 !important;
}

.btn-outline-primary {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    color: var(--Neutral-100, #0A0A0A) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
    /* font-family: "Open Sans" !important; */
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 150% !important;
}

.btn-outline-primary:hover {
    color: var(--primary-hover) !important;
}

.btn-outline-primary:active {
    box-shadow: 0 0 0px 3px #86A281 !important;
}

.btn-outline-success {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: var(--success) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-success:hover {
    color: var(--success-hover) !important;
}

.btn-outline-success:active {
    box-shadow: 0 0 0px 3px #65AF8C !important;
}


.btn-outline-danger {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: var(--danger) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-danger:hover {
    color: var(--danger-hover) !important;
}

.btn-outline-danger:active {
    box-shadow: 0 0 0px 3px #E87882 !important;
}


.btn-outline-warning {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: var(--warning) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-warning:hover {
    color: var(--warning-hover) !important;
}

.btn-outline-warning:active {
    box-shadow: 0 0 0px 3px #FFD559 !important;
}


.btn-outline-info {
    border-radius: 4px !important;
    background-color: var(--text-1) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
    color: var(--info) !important;
    border: 1px solid var(--text-4, #E0E0E0) !important;
}

.btn-outline-info:hover {
    color: var(--info-hover) !important;
}

.btn-outline-warning:active {
    box-shadow: 0 0 0px 3px #5DDBF5 !important;
}

.btn-def-primary {
    border-radius: 4px !important;
    background-color: var(--text-2) !important;
    color: var(--primary) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.btn-def-primary:hover {
    background-color: var(--text-3) !important;
    color: var(--primary-hover) !important;
}

.btn-def-primary:active {
    box-shadow: 0 0 0px 3px #86A281 !important;
}

.btn-def-success {
    border-radius: 4px !important;
    background-color: var(--text-2) !important;
    color: var(--success) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.btn-def-success:hover {
    background-color: var(--text-3) !important;
    color: var(--success-hover) !important;
}

.btn-def-success:active {
    box-shadow: 0 0 0px 3px #65AF8C !important;
}

.btn-def-danger {
    border-radius: 4px !important;
    background-color: var(--text-2) !important;
    color: var(--danger) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.btn-def-danger:hover {
    background-color: var(--text-3) !important;
    color: var(--danger-hover) !important;
}

.btn-def-danger:active {
    box-shadow: 0 0 0px 3px #E87882 !important;
}

.btn-def-warning {
    border-radius: 4px !important;
    background-color: var(--text-2) !important;
    color: var(--warning) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.btn-def-warning:hover {
    background-color: var(--text-3) !important;
    color: var(--warning-hover) !important;
}

.btn-def-warning:active {
    box-shadow: 0 0 0px 3px #FFD559 !important;
}

.btn-def-info {
    border-radius: 4px !important;
    background-color: var(--text-2) !important;
    color: var(--info) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 150% !important;
}

.btn-def-info:hover {
    background-color: var(--text-3) !important;
    color: var(--info-hover) !important;
}

.btn-def-info:active {
    box-shadow: 0 0 0px 3px #5DDBF5 !important;
}

.btn:has(.child-btn-danger){
    background-color: var(--danger) !important;
    border: var(--danger) !important;
    color: #fff !important;
}

.btn:has(.child-btn-primary){
    order: 1 !important;
}

.badge {
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.badge-primary {
    background-color: var(--primary) !important;
    color: var(--text-1) !important;
}
.badge-primary-akses {
    background-color: var(--text-2) !important;
    color: var(--text-10) !important;
}

.badge-soft-primary {
    background-color: var(--primary-soft) !important;
    color: var(--text-soft-primary) !important;
}

.badge-success {
    background-color: var(--success) !important;
    color: var(--text-1) !important;
}

.badge-soft-success {
    background-color: var(--success-soft) !important;
    color: var(--text-soft-success) !important;
}

.badge-danger {
    background-color: var(--danger) !important;
    color: var(--text-1) !important;
}

.badge-soft-danger {
    background-color: var(--danger-soft) !important;
    color: var(--text-soft-danger) !important;
}


.badge-warning {
    background-color: var(--warning) !important;
    color: var(--text-10) !important;
}

.badge-soft-warning {
    background-color: var(--warning-soft) !important;
    color: var(--text-soft-warning) !important;
}

.badge-info {
    background-color: var(--info) !important;
    color: var(--text-10) !important;
}

.badge-soft-info {
    background-color: var(--info-soft) !important;
    color: var(--text-soft-info) !important;
}

.badge-pill {
    border-radius: 80px !important;
    padding: 4px 10px !important;
}

.badge-light-success {
    color: var(--success-800) !important;
}

.badge-light-danger {
    color: var(--danger-800) !important;
}


.w-fit-content {
    width: fit-content;
}

.color-text-1 {
    color: var(--text-1) !important;
}

.color-text-2 {
    color: var(--text-2) !important;
}

.color-text-3 {
    color: var(--text-3) !important;
}

.color-text-4 {
    color: var(--text-4) !important;
}

.color-text-5 {
    color: var(--text-5) !important;
}

.color-text-6 {
    color: var(--text-6) !important;
}

.color-text-7 {
    color: var(--text-7) !important;
}

.color-text-8 {
    color: var(--text-8) !important;
}

.color-text-9 {
    color: var(--text-9) !important;
}

.color-text-10 {
    color: var(--text-10) !important;
}

.color-primary {
    color: var(--primary) !important;
}

.color-secondary {
    color: var(--secondary) !important;
}

.color-success {
    color: var(--success) !important;
}

.color-soft-success {
    color: var(--text-soft-success) !important;
}

.color-danger {
    color: var(--danger) !important;
}

.color-warning {
    color: var(--warning) !important;
}

.color-info {
    color: var(--info) !important;
}

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

.bg-primary-50 {
    background-color: var(--primary-50) !important;
}

.bg-soft-primary {
    background-color: var(--primary-soft) !important;
}

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

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

.bg-def-success {
    background-color: var(--success-soft) !important;
}

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

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

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

.bg-review {
    background-color: var(--text-4) !important;
    border-radius: 10px !important;
}

.bg-soft-info {
    background-color: var(--info-soft) !important;
}

.bg-pembayaran {
    background-image: url('/images/Pembayaran.svg');
    align-items: stretch;
    padding: 24px 30px 32px 30px;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 6px;
}

.bg-terbayar {
    background-image: url('/images/Terbayar.svg');
    border: 1px solid var(--Success-400, #479F76);
    align-items: stretch;
    padding: 24px 30px 32px 30px;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 6px;
}

.bg-data {
    background-image: url('/images/Data-dashboard-akuntansi.svg');
    background-color: #ffffff;
    background-position-x: 10px;
    /* object-fit: cover; */
    align-items: stretch;
    border: 1px solid var(--Neutral-40, #E0E0E0);
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover !important;
    border-radius: 6px;
}

form input {
    border: 1px solid var(--text-4);
    font-size: 14px !important;
    height: 34px !important;
    border-radius: 6px !important;
    text-align: left !important;
}

.form-control.krajee-datepicker {
    border-top-left-radius: unset !important;
    border-bottom-left-radius: unset !important;
}

.input-number-control {
    border-radius: unset !important;
}

.kv-fileinput-caption {
    border-top-left-radius: unset !important;
    border-bottom-left-radius: unset !important;
    height: 40px !important;
}

form select {
    display: flex;
    height: 34px;
    font-size: 14px !important;
    padding: 10px 14px;
    align-items: center; 
    /* gap: 8px; */
    align-self: stretch;
    line-height: 1 !important;
    border-radius: 6px !important;
}

form textarea {
    font-size: 14px !important;
    border-radius: 6px !important;
}

.input-group-text {
    height: 34px;
    background-color: var(--text-2);
    border-radius: 0.375rem;
}

input[inputmode=numeric] {
    border-radius: unset !important;
}

input[readonly],
input[disabled] {
    background-color: var(--text-2) !important;
}

input[inputmode=decimal] {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important; */
}

input[inputmode=decimal]:has(+div+.input-group-text) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


.p-26-30 {
    padding: 26px 30px;
}

.p-16-24 {
    padding: 16px 24px;
}

#table-jasa tr td {
    padding: 16px 24px;
}

.card {
    box-shadow: none !important;
    border: 1px solid var(--text-4);
}
.panel .card-header{
    padding-top: 1.5rem !important;
    border-width: 0 !important;
}
.field-testsearch-rowdata{
    margin: 0 !important;
}
.card-header {
    border-bottom: 1px solid var(--text-4) !important;
}

.card-footer {
    border-top: 1px solid var(--text-4) !important;
}

/* .kv-grid-table {
    table-layout: fixed !important;
} */

.kv-table-header tr th {
    background-color: #F5F5F5 !important;
    padding: 16px 24px;
    color: var(--text-10) !important;
    font-size: 14px;
    font-weight: 500;
}

.kv-table-header tr th a {
    color: var(--text-10) !important;
    font-size: 14px;
    font-weight: 500;
}

#kv-grid-table .kv-table-header tr {
    border-color: var(--text-4);
}

#kv-grid-table .kv-table-header tr {
    border-color: var(--text-4);
}

.kv-grid-table tbody tr {
    border-color: var(--text-4);
}

.kv-grid-table tbody tr {
    border-color: var(--text-4);
}

.kv-table-header {
    border-bottom: 1px solid var(--text-4) !important;
}

.kv-grid-table.table-striped > .kv-table-header tr th {
  background-color: #fff !important;
}

.pagination .active a {
    background-color: var(--primary) !important;
    color: var(--text-1) !important;
}

.breadcrumb li {
    font-size: 14px !important;
}

/* *** === *** */

/* Custom Template Style */
a {
    color: var(--text-7) !important;
}

.breadcrumb .active {
    color: var(--primary);
}

.rounded {
    border-radius: 6px !important;
}

.required::after {
    display: none !important;
}


@media (max-width: 992px) {
    .app-container {
        max-width: none;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

.kv-grid-container {
    border-left: 1px solid var(--text-4) !important;
    border-top: 1px solid var(--text-4) !important;
    border-right: 1px solid var(--text-4) !important;
    border-radius: 8px;
    border-bottom: 1px solid var(--text-4) !important;
}

.kv-grid-container .kv-grid-table tr:not(:last-child) td,
.kv-grid-container .kv-grid-table tr:not(:last-child) th {
    border-bottom: 1px solid var(--text-4) !important;
}

.table:not(.table-bordered) td:first-child, .table:not(.table-bordered) th:first-child, .table:not(.table-bordered) tr:first-child {
    padding-left: 24px;
}
/* #kv-grid-container .crud-datatable:last-child .crud-datatable {
    border-bottom: 0px !important;
} */

.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-bg-type: var(--text-2) !important;
}

.kv-grid-container tr th {
    font-weight: 500 !important;
}

.kv-grid-container tr td {
    padding: 16px 24px !important;
}

/* untuk display gridview di modal tanpa button tambah dan headers */
#crud-datatable-min>.card.border- {
  box-shadow: unset !important;
  -webkit-box-shadow: unset !important;
  margin-bottom: 0px !important;
  border: unset !important;
}

#crud-datatable-min>.card.border- .card-footer {
  border: unset !important;
  padding: 20px 0px 0 0 !important;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0px !important;
    height: 30px !important;
}

.select2-selection--multiple {
    min-height: 35px !important;
}

.select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 15px !important;
    padding: 9px 12px 6px 12px !important;
    margin-top: 9px !important;
    width: 100% !important;
}

.select2-selection--multiple ul.select2-selection__rendered {
    white-space: unset !important;
}

.stepper-item.current .stepper-title {
    color: var(--primary) !important;
}

.select2-custom-action {
    background: transparent !important;
    border: none !important;
    box-shadow: unset !important;
}

.select2-dropdown-custom-action {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    background-color: white !important;
    padding-top: 10px;
    padding-bottom: 10px;
    /* box-shadow: unset !important; */
}

.custom-radio {
    position: relative;
    display: inline-block;
    line-height: 20px;
    cursor: pointer;
}

.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio input[type="radio"]+span {
    position: relative;
    padding-left: 25px;
}

.custom-radio input[type="radio"]+span:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 5px solid #F5F5F5;
    background: #F5F5F5;
}

.custom-radio input[type="radio"]:checked+span:before {
    border-color: var(--primary-500);
    background: #ffffff;
}

/* .form-check-input {
    width: 50px !important;
} */

.form-check.form-check-primary .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);;
}

.password-input {
    border-right:0px !important;
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
}

.w-200px {
    width: 200px !important;
}

/* .select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0px !important;
    height: 30px !important;
} */

/* *** */

.dashed-line {
    height: 1.5px;
    /* Ketebalan garis putus-putus */
    width: 100%;
    /* Lebar garis putus-putus */
    background-image: repeating-linear-gradient(to right, var(--text-4, #E0E0E0), var(--text-4, #E0E0E0) 8px, transparent 8px, transparent 15px);
    /* Membuat pola garis putus-putus */
}
.menu-title{
    color:#757575  !important;
}
.menu-link.active .menu-title{
    color:var(--text-1)  !important;
}
.steper-nav-direction{
    flex-direction:row !important; 
    width: 100% !important;
}
.nav-steper-padding{
    padding: 30px !important;
    padding-bottom: 0 !important;
}
.stepper.stepper-pills.stepper-column .stepper-wrapper {
    align-items: start;
}
.stepper-item{
    width: 14% !important;
    margin-right: 1.5% !important;
}
.stepper-item:last-child {
    margin-right: 0 !important;
}
.stepper-desc{
    width: 100%;
    max-width: 70px; /* atau nilai lain sesuai kebutuhan */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1600px) {
    .stepper-desc {
        max-width: 100px;
    }
} 
@media (min-width: 1920px) {
    .stepper-desc {
        max-width: 120px;
    }
} 
@media (min-width: 2160px) {
    .stepper-desc {
        max-width: 150px;
    }
} 
@media (min-width: 2161px) {
    .stepper-desc {
        max-width: 100%;
    }
} 
.card-hover:hover {
    background-color: var(--primary) !important;  /* latar belakang biru */
}
.card-hover:hover .h4-pilih{
    color: var(--text-1) !important; 
}
.card-hover:hover .p-pilih{
    color: var(--text-5) !important;
}