@charset "UTF-8";
@media (min-width: 1280px) {
  h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  h2 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .h3-title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .h4-title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .span-dark {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-dark-reguler {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-dark-400 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-muted-14 {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .span-dark-500 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-highlight-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .span-highlight-warning {
    color: #ffc700 !important;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
  }
  .span-highlight-primary-14 {
    color: #12AB0F;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .btn-custom-primary {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-dis {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #949494;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-dark-success {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #004714;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-disabled {
    border-radius: 50px;
    background: #b0bec5;
    width: 100%;
    padding: 14px 24px;
    color: #fff;
    border: none;
    font-weight: 600;
  }
  .btn-custom-outline-primary {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-outline-disabled {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid #808080;
    background: #FFFFFF;
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .btn-custom-sort {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 50px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 21px */
    letter-spacing: 0.25px;
    border: none;
  }
  .btn-custom-filter {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .btnToolTip {
    position: relative;
    display: inline-block;
  }
  .btnToolTip .toolTipText {
    visibility: hidden;
    width: 600px;
    background-color: #474747;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 999;
  }
  .btnToolTip:hover .toolTipText {
    visibility: visible;
  }
  .btnToolTipSmall {
    position: relative;
    display: inline-block;
  }
  .btnToolTipSmall .toolTipTextSmall {
    visibility: hidden;
    width: 400px;
    background-color: #474747;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 999;
    right: 30px;
  }
  .btnToolTipSmall:hover .toolTipTextSmall {
    visibility: visible;
  }
  .alert-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: space-between;
    align-self: center;
    border-radius: 14px;
    background: var(--Soft-Orange, #fff7e9);
    box-shadow: 0px 0px 4px 0px #dac524;
    margin-bottom: 24px;
  }
  .alert-success {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #BFFFD5;
    margin-bottom: 24px;
  }
  .alert-soft-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #fff7e9;
    margin-bottom: 24px;
  }
  .alert-soft-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #ffe9e9;
    margin-bottom: 24px;
    width: 100%;
  }
  .alert-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #ffeaea;
    margin-bottom: 24px;
  }
  .status-success {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #BFFFD5;
    color: #12AB0F;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-full-primary {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    background: var(--Warning-Red, #ff2e00);
    color: #FFFFFF;
    width: 170px !important;
    justify-content: center;
  }
  .status-warning-primary {
    display: flex;
    padding: 8px;
    gap: 10px;
    border-radius: 50px;
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    background: #fff7e9;
  }
  .status-danger {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-warning {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #fff7e9;
    color: #D35D08;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-waiting {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #D35D08;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-outline {
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-outline span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #DA2424;
    color: #FFFFFF;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
  }
  .pills-navigation-primary {
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: none;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-primary span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #FFFFFF;
    color: #DA2424;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
  }
  .pills-selection-outline-primary {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-selection-primary {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .devider {
    width: 100%;
    height: 1px;
    background: #d2d2d2;
  }
  .custom-checkbox {
    position: relative;
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
    appearance: none;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.3s;
  }
  .custom-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
  }
  .custom-checkbox:checked::before {
    background-color: #04b200;
    content: "✓";
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 24px;
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
  }
  .form-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .form-group .dropdown-form-custom select {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: none;
  }
  .form-group .dropdown-form-custom select input:focus {
    border: none;
  }
  .form-group .form-input-custom-number {
    display: flex;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    padding: 8px;
    width: 100%;
  }
  .form-group .form-input-custom-number .devider-vertical {
    border: 1px #b0bec5 solid;
    margin-right: 3px;
    margin-left: 3px;
  }
  .form-group .form-input-custom-number .btn-number-select {
    border: none;
    background-color: #fff;
  }
  .form-group .form-input-custom-number input {
    border: none;
    width: 65%;
  }
  .form-group .form-input-custom-number input:focus {
    outline: none;
    width: 65%;
  }
  .form-group label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .form-group .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  .form-group .form-input-custom-disabled {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #EBECEF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom-disabled.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-disabled input {
    width: 100%;
    border: none !important;
  }
  .form-group .form-input-custom-textarea textarea {
    border-radius: 8px;
    border: none;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .dropdown-form-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .dropdown-form-custom button {
    border: none;
    background-color: transparent;
  }
  .form-group .dropdown-form-custom .dropdown-menu li {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    border-bottom: 1px solid #D2D2D2;
  }
  .form-group .dropdown-form-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-search {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom-search.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-search span {
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
    width: 100%;
  }
  .form-group table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
  }
  .form-group th,
  .form-group td {
    text-align: left;
    padding: 8px;
  }
  .form-group tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  .form-group #modalSearch .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  .form-group #modalSearch .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    justify-content: space-between;
  }
  .form-group #modalLocation .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  .form-group #modalLocation .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    justify-content: space-between;
  }
  .form-group .dropdown-location {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    width: 492px;
  }
  .form-group .dropdown-location span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .form-group .dropdown-location img {
    display: flex;
    width: 50px;
    height: 16px;
    justify-content: center;
    align-items: center;
  }
  .form-group .dropdown-location button {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border: none;
    background-color: transparent;
  }
  .form-group .dropdown-location .dropdown-menu {
    width: inherit;
    margin-top: 10px !important;
  }
  .form-group .dropdown-location .dropdown-menu .form-input-custom {
    width: 475px;
  }
  .form-group .dropdown-location .dropdown-menu li {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding: 10px;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
  }
  .form-group .dropdown-location .dropdown-menu small {
    font-size: 14px !important;
  }
  .form-group .dropdown-location .dropdown-menu .btn-custom-primary {
    display: flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 12px;
    background: #DA2424;
    margin: 8px;
    width: 97%;
  }
  .stepper {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
  }
  .stepper .progress {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
    background-color: transparent;
    border-radius: 0px;
  }
  .stepper .progress .bar-done {
    height: 4px;
    width: 100%;
    background-color: #808080;
  }
  .stepper .progress .icons-done {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #474747;
  }
  .stepper .progress .bar {
    height: 4px;
    width: 100%;
    background-color: #DA2424;
  }
  .stepper .progress .icons {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #474747;
  }
  .stepper-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .stepper-row .progress-step {
    display: flex;
    width: fit-content;
    height: auto;
    background-color: transparent;
    gap: 8px;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .stepper-row .progress-step .bullet-done {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  .stepper-row .progress-step .bullet {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
  }
  .stepper-row .progress-step span {
    width: max-content;
  }
  .stepper-row .progress-step .devider {
    border: 1px solid rgb(184, 181, 181);
  }
  #navbar-web .navbar {
    display: flex;
    padding: 14px 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
    position: fixed;
    width: -webkit-fill-available;
    z-index: 1005;
  }
  #navbar-web .navbar .logo img {
    max-width: 165px;
  }
  #navbar-web .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-web .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-web .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-web-onboard .navbar {
    top: 0;
    left: 0;
    display: flex;
    padding: 14px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
    z-index: 0;
  }
  #navbar-web-onboard .navbar .logo img {
    max-width: 165px;
  }
  #navbar-web-onboard .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-web-onboard .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-mobile-onboard .navbar {
    top: 0;
    left: 0;
    display: flex;
    padding: 14px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
  }
  #navbar-mobile-onboard .navbar .logo img {
    max-width: 165px;
  }
  #navbar-mobile-onboard .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-mobile {
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    width: 100%;
    z-index: 1005;
  }
  #navbar-mobile .container-fluid .navbar-brand #logo-mobile {
    width: 144px;
  }
  #navbar-mobile .container-fluid button {
    border: none;
    background-color: transparent;
  }
  #navbar-mobile .container-fluid .offcanvas {
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-header img {
    width: 144px;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    padding-left: 7px;
    border: none;
    background-color: transparent;
    text-decoration: none;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item a span {
    display: flex;
    align-items: start;
    width: 100%;
    color: #FFFFFF;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu {
    background-color: transparent;
    border: none;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu li a {
    color: #FFFFFF;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu li a:hover {
    color: #FFFFFF;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  #navbar-mobile #navbar-location-mobile {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location {
    width: 100%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location #value-location {
    width: 100%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location .dropdown-menu .form-input-custom {
    width: 95%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location .btn-custom-primary {
    color: #FFFFFF;
    background-color: #DA2424;
  }
  #carouselExampleDark .carousel-indicators {
    margin-left: 5%;
    justify-content: start;
    bottom: -6px;
    top: 330px;
  }
  #carouselExampleDark .carousel-indicators button {
    height: 8px;
    width: 8px;
    border-radius: 100%;
  }
  .alert-danger-border {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #DA2424;
    background: #fff4f4;
    margin-bottom: 24px;
  }
  .alert-danger-border .title {
    color: #170e2b;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  .alert-danger-border p {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  footer {
    display: flex;
    width: -webkit-fill-available;
    padding: 16px 24px;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 4px 4px 5px rgba(84, 84, 84, 0.25);
  }
  footer img {
    width: 113.714px;
    height: 12px;
    flex-shrink: 0;
  }
  footer span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .wrapper {
    transition-duration: 0.5s;
    display: flex;
  }
  .wrapper .sidebar {
    width: 220px;
    position: relative;
    left: 0px;
    top: 0px;
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    white-space: nowrap;
    transition-duration: 0.5s;
    z-index: 1000;
  }
  .wrapper .sidebar .sb-item-list {
    width: 100%;
    height: 100vh;
    margin-top: 24px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .wrapper .sidebar .sb-item-list .sb-item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    padding-left: 7px;
    border: none;
    background-color: transparent;
    text-decoration: none;
  }
  .wrapper .sidebar .sb-item-list .sb-item a span {
    display: flex;
    align-items: start;
    width: 100%;
    color: #FFFFFF;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu {
    background-color: transparent;
    border: none;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu li a {
    color: #FFFFFF;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu li a:hover {
    color: #FFFFFF;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  .wrapper .sidebar .sb-item-list .sb-item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  .wrapper .sidebar .logo-sidebar {
    display: flex;
    padding: 0px 10px;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
  }
  .wrapper .sidebar .logo-sidebar img {
    display: flex;
    width: 144px;
    height: 36px;
    justify-content: center;
    align-items: center;
  }
  .wrapper .sidebar .logo-sidebar #logo-web-collapse {
    display: none;
  }
  .wrapper .sidebar .logo-sidebar #svg-circle {
    cursor: pointer;
  }
  .wrapper .sidebar .logo-sidebar #btn-uncollapse {
    display: none;
  }
  .wrapper .sidebar .sb-item-list > .sb-item > .sb-text {
    position: absolute;
    transition-duration: 0.5s;
  }
  .wrapper .sidebar .sb-item.active > .sb-icon {
    margin-left: -3px;
  }
  .wrapper .sidebar .sb-icon {
    padding-left: 10px;
    padding-right: 20px;
  }
  .wrapper .sidebar .sb-item:hover,
  .wrapper .sidebar .sb-item.active {
    filter: brightness(130%);
  }
  .wrapper .sb-menu {
    position: relative;
  }
  .wrapper .sb-menu:after {
    content: " ";
    width: 0;
    height: 0;
    display: block;
    float: right;
    margin-top: 19px;
    margin-left: -12px;
    margin-right: 5px;
    border: solid 5px transparent;
    border-left-color: #eee;
  }
  .wrapper .sb-menu > .sb-submenu {
    display: none;
  }
  .wrapper .sb-menu:hover > .sb-submenu {
    position: absolute;
    display: block;
    width: 200px;
    top: 0;
    left: calc(100% + 1px);
  }
  .wrapper .sb-submenu > .sb-item:first-child {
    border-radius: 8px 8px 0px 0px;
  }
  .wrapper .sb-submenu > .sb-item:last-child {
    border-radius: 0px 0px 8px 8px;
  }
  .wrapper .btn-toggle-sidebar .sb-icon {
    padding-left: 15px;
  }
  .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
    display: inline-block;
  }
  .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
    display: none;
  }
  .wrapper.sidebar-collapse .sidebar #btn-uncollapse {
    display: block;
  }
  .wrapper.sidebar-collapse .sidebar #btn-collapse {
    display: none;
  }
  .wrapper.sidebar-collapse .sidebar #navbar-web .navbar {
    width: 95%;
  }
  .wrapper.sidebar-collapse:not(:hover) {
    width: 80px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar {
    width: 80px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #logo-web {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #logo-web-collapse {
    display: block;
    margin-left: -10px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #btn-uncollapse {
    display: block;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #btn-collapse {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item span {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-klaim {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-data {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-info {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
    width: 100%;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item .dropdown #dataClaim {
    display: none;
  }
  .wrapper.sidebar-collapse .wrapper.sidebar-collapse .sb-item-list > .sb-item > .sb-text {
    position: absolute;
    transform: translateX(-100%);
    opacity: 0;
  }
  .wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
    display: none;
  }
  .wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
    display: inline-block;
  }
  .list-code .btn-select-country {
    background-color: none;
    border: none;
  }
  .list-code .list {
    display: flex;
    padding: 14px 8px;
    gap: 10px;
    align-self: stretch;
    margin-top: 16px;
    border-bottom: 1px solid #e2e2e2;
    cursor: pointer;
  }
  .list-code .list .country-name {
    width: 100%;
  }
  .list-code .aa {
    margin-top: 0 !important;
  }
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
  .shake {
    animation: shake 3.5s infinite;
  }
  @keyframes shakeAnimation {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
    100% {
      transform: translateX(5px);
    }
  }
  .button-export {
    display: none !important;
  }
  .paging_full_numbers {
    text-align: right;
    margin-top: 0px;
  }
  .foot-table {
    display: flex;
    justify-content: space-between;
  }
  .active-sub {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
    filter: brightness(130%);
    width: 85% !important;
  }
  .status-cashback {
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #e5bfff;
    color: #d119cf;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .callout {
    border-radius: 0.5rem;
    background-color: #fff;
    border-left: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 5px;
    font-size: 12px;
    cursor: pointer;
    width: 30%;
    margin-right: 5px;
  }
  .callout-danger {
    border-left: 8px solid #f34a4a !important;
  }
  .callout span {
    display: inline-block;
    width: 200px;
    max-height: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .callout svg {
    place-self: center;
  }
  .callout a {
    text-decoration: none;
    color: inherit;
  }
  .callout div {
    display: flex;
    justify-content: space-between;
  }
  .callout span p:first-of-type {
    white-space: normal !important;
    word-break: break-all !important;
    margin-bottom: 0 !important;
  }
  .callout span p:nth-of-type(2) {
    width: 170px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
    margin-bottom: 0 !important;
  }
  .bodymaxcallout2 {
    display: block;
    padding-bottom: 10px;
  }
  .bodymaxcallout2 .callout {
    width: 100% !important;
    margin-bottom: 1rem;
  }
  .bodymaxcallout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .maxcallout span {
    width: 350px;
    max-height: 55px;
  }
  .maxcallout span p:nth-of-type(2) {
    width: auto;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
  }
  .row-notifications .card-notifications .body p:first-of-type {
    font-size: 20px !important;
  }
  .row-notifications .card-notifications {
    gap: 0 !important;
  }
  .h-item {
    height: 90px;
  }
  .card-location {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  .card-location img {
    width: 56px;
    height: 56px;
  }
  .card-location .card-head {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #D2D2D2;
  }
  .card-location .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .card-location .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
  }
  .card-location .descriptions .item {
    display: flex;
    gap: 80px;
  }
  .card-location .descriptions {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
  }
  .card-location .descriptions .item .span-bolder {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
  }
  .form-group .dropdown-location button {
    justify-content: space-between;
  }
  .span-highlight {
    color: #da2827;
    font-family: Inter, sans-serif;
    font-weight: 500;
    text-align: center;
    line-height: 150%;
    text-decoration: none;
  }
  .custom-checkbox {
    position: relative;
    appearance: none;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.3s;
  }
  .validation-confirmation {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  .custom-checkbox, .custom-checkbox:checked::before {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }
  .custom-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
  }
  .button-group-confirmation {
    display: flex;
    gap: 20px;
    margin-top: 20px;
  }
  .font-500-16 {
    font-size: 16px;
    font-style: normal;
  }
  .font-500-14, .font-500-16 {
    text-overflow: ellipsis;
    line-height: 160%;
    letter-spacing: 0.25px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #170e2b;
  }
  .button-group-confirmation .btn-custom-outline-primary {
    border-radius: 50px;
    border: 1px solid #da2827 !important;
    width: 50%;
    color: #da2827;
    padding: 14px 24px 40px 30px;
    font-weight: 600;
    margin-top: 0;
  }
  .button-group-confirmation .btn-custom-outline-primary:hover {
    color: #fff;
  }
  .card-alert-company {
    padding: 10px;
    gap: 19px;
    align-self: stretch;
    border-radius: 10px;
    border-left: 5px solid #62aced;
    background: #e0eefb;
  }
  .title-600-14 {
    font-size: 14px;
  }
  .title-600-16 {
    font-size: 16px;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .price p {
    font-size: 16px !important;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  #info-message:empty {
    display: none;
  }
  #info-message2:empty {
    display: none;
  }
  .button-group-confirmation .btn-custom-disabled {
    border-radius: 50px;
    background: #b0bec5 !important;
    width: 100%;
    padding: 14px 24px;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    opacity: initial !important;
  }
  .button-group-confirmation .btn-custom-primary {
    border-radius: 50px;
    background: #da2827 !important;
    width: 100%;
    padding: 14px 24px;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    opacity: initial !important;
    height: auto !important;
    flex-shrink: unset !important;
  }
  input:focus-visible {
    outline: none;
  }
  ul:empty {
    display: none;
  }
  .dt-processing {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 4px 4px 3px #e0e0e0;
  }
  .dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent !important;
  }
  .dropdown-item.active, .dropdown-item:active {
    color: inherit !important;
    background-color: transparent !important;
  }
  .span-dark-reguler:empty {
    display: none;
  }
  .address-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    font-weight: 400 !important;
    display: block;
  }
  .in-btn input {
    margin-right: 10px;
  }
  .btn-n {
    background: #198754;
  }
  .location-menu {
    z-index: var(--bs-dropdown-zindex);
    display: none;
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    width: auto;
    margin-top: 10px !important;
  }
  #locexist {
    margin-left: 30px;
    margin-top: 12px;
    padding: 0;
  }
  #locexist li {
    display: flex;
    justify-content: start;
  }
  #locexist li::before {
    content: "•";
    font-size: 20px;
    color: black;
    margin-right: 10px;
  }
  .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  #closepopup {
    position: absolute;
    right: 10px;
    top: 10px;
    background: white;
    color: black;
    border-radius: 50%;
    padding: 1px 8px 6px 8px;
  }
  /* skeleton */
  /* Variables */
  /* Animation */
  @-webkit-keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  @keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  /* Animation partial */
  .ssc-square, .ssc-head-line, .ssc-line, .ssc-hr, .ssc-circle {
    display: block;
    background-color: rgba(0, 0, 0, 0.17);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  .ssc-square:after, .ssc-head-line:after, .ssc-line:after, .ssc-hr:after, .ssc-circle:after {
    content: "";
    -webkit-animation: ssc-loading 1.3s infinite;
    animation: ssc-loading 1.3s infinite;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 1;
    background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.3), transparent);
  }
  /** Main class */
  .ssc {
    cursor: progress;
    -webkit-user-select: none;
    user-select: none;
  }
  /** Helpers classes */
  .ssc .mb {
    margin-bottom: 16px;
  }
  .ssc .mt {
    margin-top: 16px;
  }
  .ssc .mr {
    margin-right: 16px;
  }
  .ssc .ml {
    margin-left: 16px;
  }
  .ssc .mbs {
    margin-bottom: 8px;
  }
  .ssc .mts {
    margin-top: 8px;
  }
  .ssc .mrs {
    margin-right: 8px;
  }
  .ssc .mls {
    margin-left: 8px;
  }
  .ssc .w-10 {
    width: 10%;
  }
  .ssc .w-20 {
    width: 20%;
  }
  .ssc .w-30 {
    width: 30%;
  }
  .ssc .w-40 {
    width: 40%;
  }
  .ssc .w-50 {
    width: 50%;
  }
  .ssc .w-60 {
    width: 60%;
  }
  .ssc .w-70 {
    width: 70%;
  }
  .ssc .w-80 {
    width: 80%;
  }
  .ssc .w-90 {
    width: 90%;
  }
  .ssc .w-100 {
    width: 100%;
  }
  .ssc .flex {
    display: flex;
  }
  .ssc .inline-flex {
    display: inline-flex;
  }
  .ssc .flex-column {
    flex-direction: column;
  }
  .ssc .flex-column-reverse {
    flex-direction: column-reverse;
  }
  .ssc .flex-row {
    flex-direction: row;
  }
  .ssc .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .ssc .align-center {
    align-items: center;
  }
  .ssc .align-start {
    align-items: flex-start;
  }
  .ssc .align-end {
    align-items: flex-end;
  }
  .ssc .align-stretch {
    align-items: stretch;
  }
  .ssc .justify-start {
    justify-content: start;
  }
  .ssc .justify-center {
    justify-content: center;
  }
  .ssc .justify-end {
    justify-content: end;
  }
  .ssc .justify-between {
    justify-content: space-between;
  }
  .ssc .justify-around {
    justify-content: space-around;
  }
  /** Wrapper class */
  .ssc-wrapper {
    padding: 16px;
  }
  /* Figures, Objects */
  .ssc-card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17);
    background-color: #ffffff;
  }
  .ssc-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  .ssc-hr {
    width: 100%;
    height: 2px;
  }
  .ssc-line {
    border-radius: 15px;
    width: 100%;
    height: 12px;
  }
  .ssc-head-line {
    border-radius: 15px;
    width: 100%;
    height: 24px;
  }
  .ssc-square {
    width: 100%;
    height: 150px;
  }
  body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  body #navbar-web-onboard {
    display: block;
  }
  body #navbar-mobile-onboard {
    display: none;
  }
  body .container-onboarding {
    background-image: url("../images/bg-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    display: flex;
  }
  body .container-onboarding .row-onboarding {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 34px;
  }
  body .container-onboarding .row-onboarding .column-1 {
    display: flex;
    align-items: center;
  }
  body .container-onboarding .row-onboarding .column-1 img {
    max-width: 448px;
  }
  body .container-onboarding .row-onboarding .column-1 .title-step-5 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  body .container-onboarding .row-onboarding .column-1 .title-step-5 h1 {
    color: #D35D08;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  body .container-onboarding .row-onboarding .column-1 .image-embed {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  body .container-onboarding .row-onboarding .column-1 .image-embed img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
  }
  body .container-onboarding .row-onboarding .column-1 .image-embed .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: transparent;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  }
  body .container-onboarding .row-onboarding .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    align-self: center;
    width: 500px;
  }
  body .container-onboarding .row-onboarding .column-2 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }
  body .container-onboarding .row-onboarding .column-2 .description .title-step-5 {
    align-self: stretch;
  }
  body .container-onboarding .row-onboarding .column-2 .description .title-step-5 .black {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
    text-transform: capitalize;
  }
  body .container-onboarding .row-onboarding .column-2 .description .title-step-5 .orange {
    color: #d35d08;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
  }
  body .container-onboarding .row-onboarding .column-2 .description span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body .container-onboarding .row-onboarding .column-2 .description h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    letter-spacing: 0.25px;
  }
  body .container-onboarding .row-onboarding .column-2 .description p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .container-onboarding .row-onboarding .column-2 .btn-custom-primary {
    border-radius: 50px;
  }
  body .container-onboarding .row-onboarding .column-2 .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body .container-onboarding .row-onboarding .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .container-onboarding .row-onboarding .column-2 .form-group {
    width: 100%;
  }
  body .container-onboarding .row-onboarding .column-2 .form-group label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .container-onboarding .row-onboarding .column-2 .form-group span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .container-onboarding .row-onboarding .column-2 .form-group .span-highlight-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .container-onboarding .row-onboarding .column-2 .button-apps button {
    border-radius: 50px;
    border: none;
    background-color: transparent;
  }
  body .container-onboarding .row-onboarding .column-2 .stepper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  body .container-onboarding .row-onboarding .column-2 .stepper .step-fill {
    width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body .container-onboarding .row-onboarding .column-2 .stepper .step {
    width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper {
    display: flex;
  }
  body #wrapper #sidebar_web {
    display: block;
  }
  body #wrapper #content-wrapper {
    width: 100%;
    background: rgb(249, 244, 244);
  }
  body #wrapper #content-wrapper #navbar-web {
    display: block;
  }
  body #wrapper #content-wrapper #navbar-web .btn-group-location {
    display: flex;
    padding: 8px;
    align-items: center;
  }
  body #wrapper #content-wrapper #navbar-web .btn-group-location .btn-custom-outline-primary {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  body #wrapper #content-wrapper #navbar-web .btn-group-location .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper #navbar-mobile {
    display: none;
  }
  body #wrapper #content-wrapper .flex-d {
    max-width: 100%;
  }
  body #wrapper #content-wrapper .container {
    margin-left: 24px;
    margin-right: 24px;
  }
  body #wrapper #content-wrapper .container .card {
    width: 100%;
    margin-top: 24px;
    border-radius: 16px;
  }
  body #wrapper #content-wrapper .container .card .card-img-top {
    border-radius: 16px 16px 0px 0px;
    height: 10% !important;
  }
  body #wrapper #content-wrapper .container .card .profile {
    position: absolute;
    left: 20px;
    top: 110px;
  }
  body #wrapper #content-wrapper .container .card .profile img {
    width: 100px;
    height: 100px;
  }
  body #wrapper #content-wrapper .container .card .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
    margin-top: 10px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 span {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid #D35D08;
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #D35D08;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-2 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-2 .span-highlight-dark-primary {
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    margin-right: 50px;
    margin-top: 105px;
    padding-bottom: 100px;
  }
  body #wrapper #content-wrapper .container .main .breadcumb {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .title-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: -10px;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .title-detail button {
    border: none;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .main .indicator-form {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main .indicator-form .list {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .indicator-form .list .number-fill {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .indicator-form .list .number {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main #spinner-loading {
    position: fixed;
    right: 0;
    left: 200px;
    top: 0px;
    z-index: 1000;
    background-color: rgba(71, 71, 71, 0.4392156863);
    height: 100%;
  }
  body #wrapper #content-wrapper .container .main #spinner-loading .spinner-border {
    position: fixed;
    right: 200px;
    left: 800px;
    top: 200px;
    z-index: 1001;
  }
  body #wrapper #content-wrapper .container .main-content {
    width: 100%;
    max-width: 100%;
    height: fit-content;
  }
  body #wrapper #content-wrapper .container .main-content .title-pages {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
    margin-top: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .stepper .step-fill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .stepper .step-fill .bar-fill {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content .stepper .step-fill .title-fill {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .stepper .step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .stepper .step .bar {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main-content .stepper .step .bar-done {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #808080;
  }
  body #wrapper #content-wrapper .container .main-content .stepper .step .title {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .alert-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: space-between;
    align-self: center;
    border-radius: 14px;
    background: var(--Soft-Orange, #fff7e9);
    box-shadow: 0px 0px 4px 0px #dac524;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations .card-items {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 14px;
    border: 1.4px solid #DA2424;
    background: #FFFFFF;
    justify-content: space-between;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations .card-items .content {
    display: flex;
    gap: 24px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations .card-items .content img {
    width: 177px;
    max-width: 177px;
    height: 100px;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations .card-items .content .description h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations .card-items .content .description span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations .card-items a {
    border: none;
    background: transparent;
    float: right;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
    background: #fff;
    padding: 14px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp .head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp .head .title-head-pjsp {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp.disabled {
    background-color: #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp-check {
    width: 100%;
    border-radius: 12px;
    padding: 14px;
    background-color: #f2fff4;
    border: 1px solid #047d10;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp-check .head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp-check .head .title-head-pjsp {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-list-pjsp-check .custom-checkbox-2 {
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-va {
    background-color: #f8f8f8;
    border-radius: 14px;
    display: flex;
    width: 48px;
    height: 48px;
    padding: 0px 9px;
    justify-content: center;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-va img {
    width: -webkit-fill-available;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero {
    margin-top: 36px;
    text-align: center;
    background: transparent;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero .img-fluid {
    width: 20%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero .title-mixed {
    display: flex;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero .info-user-checkout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero .info-user-checkout .info-user {
    color: #170e2b;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero h3 {
    color: #da2827;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 24px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 136%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero p {
    color: #170e2b;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #hero .register-yet {
    color: #5f6368;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .alert {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .alert .alert-warning-payments {
    padding: 15px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 24px !important;
    background: #fff9da !important;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .button-group-tutorial .btn-custom-outline-primary {
    width: fit-content;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .btn-custom-outline-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #form-card-waiting {
    margin-top: -64px;
    display: flex;
    /* width: 320px; */
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #form-card-waiting h3 {
    color: #170e2b;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .span-danger-bolder {
    color: #DA2424;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-pay {
    width: -webkit-fill-available !important;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-pay .span-total {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-pay .span-green {
    color: #12AB0F;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-pay .span-warning {
    color: #da4303;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-pay .span-danger {
    color: #a12222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .button-verify {
    display: flex;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .button-verify .btn-custom-primary {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .accordion {
    --bs-accordion-bg: transparent !important;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .barcode-reload {
    position: relative;
    display: flex; /* Membuat container sesuai dengan ukuran gambar */
    align-items: center;
    width: 70%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .barcode-reload::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.767);
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Menjadikan elemen anak di dalamnya menjadi kolom */
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .img-qris {
    display: block;
    margin: auto;
    height: auto;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .center-content {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .button-in-layer {
    position: absolute;
    top: 50%;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 15%;
    border-radius: 8px;
    font-size: 13px;
    background-color: #a12222;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .span-in-layer {
    position: absolute;
    top: 40%;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 15%;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .button-group-tutorial {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-bottom: 14px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .button-group-tutorial button {
    height: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .accordion-item {
    border: none !important;
    background-color: none !important;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .badge-group {
    display: flex;
    padding: 0px 15px;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .badge-group .badge-accordion {
    width: fit-content;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px 8px 0px 0px;
    background: #00b512;
    color: #fff;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .button-accordion-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .button-accordion-payment .title-icon {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .accordion-button {
    display: block !important;
    height: 64px !important;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .accordion-button:not(.collapsed) {
    border-radius: 20px !important;
    border: 1.4px solid #7cb342 !important;
    background-color: #f9fff9 !important;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .accordion-button {
    margin-bottom: 16px;
    border-radius: 20px !important;
    border: 1.4px solid #d7d7d7 !important;
    background: #fff !important;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris #accordionQris .accordion-button::after {
    display: none;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .list-bank {
    display: flex;
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 16px;
    padding-top: 16px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .list-bank .image-bank {
    align-self: center;
    margin-left: auto;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .btn-pay-ovo {
    width: 50%;
    margin-top: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .btn-custom-next-ovo {
    margin-top: 20px;
    width: 100%;
    display: flex;
    padding: 8px 12px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #da2827;
    color: #da2827;
    background: #fff;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .card-form {
    display: flex;
    width: 50%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .tac {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .tac .form-group {
    width: 8%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .btn-custom-primary {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-form-add-qris .skema {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .card-head {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #d2d2d2;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .card-head img {
    width: 56px;
    height: 56px;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .card-head .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .card-head .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .descriptions {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .descriptions .item {
    display: flex;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .descriptions .item .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    width: 128px;
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .descriptions .item .span-bolder {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .row-card-locations-all .card-item .descriptions .item .span-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .row-home {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-nmid-home {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-nmid-home .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-nmid-home .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income {
    border-radius: 14px;
    background: linear-gradient(73deg, #940101 1.35%, #e04646 100%);
    box-shadow: 0px 40px 50px -50px #f2533f;
    color: #FFFFFF;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .body .head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .body .description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .body .description .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .body .description .price .income-price {
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .body .description img {
    width: 61px;
    height: 60px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid #808080;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-income .footer:hover {
    background-color: #a12222;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-settlement {
    margin-top: 24px;
    border-radius: 14px;
    border-radius: 14px;
    background: radial-gradient(189.15% 136.66% at 98.69% 3.12%, #ffa755 0%, #ce6f00 100%);
    box-shadow: 0px 40px 50px -50px #cf7002;
    color: #FFFFFF;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-settlement .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-settlement .body .head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-settlement .body .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-settlement .body .description .settlement-price {
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-settlement .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid #808080;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-settlement .footer:hover {
    background-color: #D35D08;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-help {
    border-radius: 14px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    flex: 1 0 0;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-help .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    padding: 20px;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-help .body .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    gap: 14px;
    padding: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-help .body .description .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-help .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    cursor: pointer;
    color: #DA2424;
    font-weight: 600;
  }
  body #wrapper #content-wrapper .container .main-content .row-home .card-help .footer:hover {
    background-color: #FFE9E9;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 .card-form-address {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 .card-form-address .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 .card-form-address .form-group .dropdown-form-custom button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 .card-form-address .form-group .dropdown-form-custom button span {
    text-align: start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 .card-form-address .form-group .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 .card-form-address .form-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-1 .card-form-address .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 {
    width: 60%;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .carousel {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .carousel span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .carousel h3 {
    color: #0F0F10;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .carousel p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .carousel .stepper {
    display: flex;
    padding-top: 14px;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .carousel .stepper .step-fill {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .carousel .stepper .step {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-form-address-now {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-form-address-now h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-form-address-now .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-kontak {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-kontak span {
    font-size: 16px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-kontak .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-kontak .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-data-qris {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-data-qris h4 {
    color: #0F0F10;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .flex-two .column-2 .card-data-qris span {
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }
  body #wrapper #content-wrapper .container .main-content .card-tutorial-home {
    display: flex;
    padding: 20px;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 34px;
  }
  body #wrapper #content-wrapper .container .main-content .card-tutorial-home .column-1 .image-embed {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  body #wrapper #content-wrapper .container .main-content .card-tutorial-home .column-1 .image-embed img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
  }
  body #wrapper #content-wrapper .container .main-content .card-tutorial-home .column-1 .image-embed .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: transparent;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main-content .card-tutorial-home .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: center;
  }
  body #wrapper #content-wrapper .container .main-content .card-tutorial-home .column-2 h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-tutorial-home .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-verification {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .header {
    display: flex;
    padding-bottom: 8px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .h3-title {
    font-size: 25px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .list {
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .list .list-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .list .list-data .title {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .list .list-data .title img {
    width: 36px;
    height: 36px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .list .list-data .title .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification .list .list-data .btn-edit {
    border: none;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email .header img {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email .form-otp {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email .form-otp .form-group .form-input-custom {
    width: 40px;
    height: 40px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email .countdown {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email .countdown .title {
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-email .edit-email {
    display: flex;
    width: 320px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data .header {
    display: flex;
    padding-bottom: 8px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data .content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data .content .column-1 .h3-title {
    font-size: 25px;
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main-content .card-completeness-data .content .column-2 img {
    width: 280px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening .header {
    display: flex;
    padding-bottom: 8px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening .content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening .content .column-1 .h3-title {
    font-size: 25px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-rekening .content .column-2 img {
    width: 280px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents .header {
    display: flex;
    padding-bottom: 8px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents .content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents .content .column-1 .h3-title {
    font-size: 25px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-documents .content .column-2 img {
    width: 280px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid .header {
    display: flex;
    padding-bottom: 8px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid .content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid .content .column-1 .h3-title {
    font-size: 25px;
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main-content .card-nmid .content .column-2 img {
    width: 280px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main-content .filters {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d2d2d2;
  }
  body #wrapper #content-wrapper .container .main-content .filters .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 34px;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head .sort {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head .sort span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head .sort .dropdown button {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head .sort .dropdown .dropdown-menu li .dropdown-item {
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head .dropdown button {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head .dropdown .dropdown-menu {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head .dropdown .dropdown-menu li .dropdown-item {
    color: #0F0F10;
    text-align: start;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .head a {
    color: #DA2424;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .table-responsive {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .table-responsive .table tr td {
    padding: 8px;
    border-bottom: none;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .pagination-table {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .pagination-table .pages {
    display: flex;
    gap: 24px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .pagination-table .pages span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .pagination-table a {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .empty-table {
    display: flex;
    height: 216px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .empty-table img {
    width: 73px;
    height: 73px;
  }
  body #wrapper #content-wrapper .container .main-content .card-table-history .empty-table span {
    color: #808080;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .row-modal-settlement {
    display: flex;
    width: 100%;
    padding: 20px 16px;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper {
    display: flex;
    padding-left: 14px;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper .step-fill {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper .step {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-header .modal-title {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 136.364% */
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .card-head {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .card-head h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .card-head .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .card-head .description .item {
    display: flex;
    height: 22px;
    align-items: flex-start;
    gap: 20px;
    flex-shrink: 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .card-head .description .item span {
    width: 200px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .card-head .description .item .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .description-body {
    margin-top: 20px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .description-body p {
    color: var(--Black, #0f0f10);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .description-body p span {
    color: var(--Warning-Red, #ff2e00);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .btn-group {
    display: flex;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main-content #modalSetuju .modal-body .btn-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content #modalLocation {
    padding: 24px;
  }
  body #wrapper #content-wrapper .container .main-content #modalLocation .modal-body .form-input-custom-search {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content #modalLocation .modal-body .form-input-custom-search.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content #modalLocation .modal-body .form-input-custom-search span {
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content #modalLocation .modal-body .form-input-custom-search input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main-content #modalLocation .modal-body .form-check {
    padding: 16px;
    border-bottom: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main-content #modalProvinsi .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalProvinsi .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main-content #modalProvinsi .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content #modalProvinsi .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content #modalProvinsi .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main-content #modalBank .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalBank .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main-content #modalBank .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content #modalBank .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content #modalBank .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main-content #modalKota .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalKota .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main-content #modalKota .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content #modalKota .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content #modalKota .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main-content #modalKecamatan .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalKecamatan .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main-content #modalKecamatan .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content #modalKecamatan .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content #modalKecamatan .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main-content #modalKelurahan .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalKelurahan .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main-content #modalKelurahan .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content #modalKelurahan .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content #modalKelurahan .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main-content .card-group-unduh-qris {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-group-unduh-qris .card-unduh {
    display: flex;
    width: 100%;
    height: 460px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-group-unduh-qris .card-unduh img {
    width: 250px;
  }
  body #wrapper #content-wrapper .container .main-content .card-group-unduh-qris .card-unduh h3 {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-group-unduh-qris .card-unduh p {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-group-unduh-qris .card-unduh .btn-custom-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .head-info-transaction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .head-info-transaction span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content .head-info-transaction a {
    color: #DA2424;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main-content .head-info-transaction h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement {
    display: flex;
    padding: 20px;
    align-items: flex-start;
    gap: 24px;
    margin-top: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--White, #fff);
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement .column-1 .item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement .column-1 .item span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement .column-2 .item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement .column-2 .item span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main-content .card-rincian-settlement .devider {
    width: 1px;
    height: 132px;
    background: #d2d2d2;
  }
  body #wrapper #content-wrapper .container .main-content .tabs-klaim-user {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .tabs-klaim-user .column-1 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary.clicked {
    color: #FFFFFF;
    background-color: #DA2424 !important;
  }
  body #wrapper #content-wrapper .container .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary.clicked span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: var(--White, #fff);
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content .tabs-klaim-user .column-2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .head {
    display: flex;
    padding-bottom: 8px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #e6edff;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .head .column-1 h3 {
    color: #1a1616;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .head .column-2 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-1 .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-1 .item span {
    width: 250px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-2 .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-2 .item span {
    width: 250px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-2 .item .status-waiting {
    width: max-content;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-2 .item .status-warning {
    width: max-content;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-2 .item .status-danger {
    width: max-content;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .body .column-2 .item .status-success {
    width: max-content;
  }
  body #wrapper #content-wrapper .container .main-content .card-klaim-user .btn-custom-primary {
    margin-top: 36px;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-cari-klaim {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    padding: 20px;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-cari-klaim .btn-custom-primary {
    border-radius: 50px;
    transition: background-color 0.3s;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-klaim {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-klaim .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-klaim .item span {
    width: 200px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-aktivitas {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-aktivitas h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-aktivitas .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-aktivitas .item .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-tanggapan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-tanggapan h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-tanggapan label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-tanggapan .document-images {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    margin-top: 14px;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-tanggapan .document-images .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-tanggapan .document-images .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-tanggapan .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-akun-pengajuan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .card-akun-pengajuan h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content .card-akun-pengajuan .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-form-pengajuan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-form-pengajuan .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-form-pengajuan .form-group .dropdown-form-custom button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .card-form-pengajuan .form-group .dropdown-form-custom button span {
    text-align: start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-form-pengajuan .form-group .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main-content .card-form-pengajuan .form-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-form-pengajuan .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .row-data {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .row-data .column-1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .row-data .column-1 .data {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .row-data .column-1 .data span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .row-data .column-2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .row-data .column-2 .data {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .row-data .column-2 .data span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .btn-custom-primary {
    border-radius: 50px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .btn-custom-disabled {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .btn-custom-dark-primary {
    display: flex;
    height: 48px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    background: var(--Linear-Primary-Radial, radial-gradient(189.15% 136.66% at 98.69% 3.12%, #d12f2f 0%, #940101 100%));
    border: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .alert-soft-warning {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-detail-address .alert-danger {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data {
    display: flex;
    padding: 20px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .head .date {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .alert-soft-warning {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .alert-danger {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .label {
    display: flex;
    padding: 10px 10px;
    align-items: center;
    align-self: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 4px;
    background: #EBECEF;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .label h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin: 0;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .list {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .list .column-1 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .list .column-1 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .list .column-2 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data .card-data .list .column-2 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-riwayat-data a {
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-done {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-done .header img {
    width: 100px;
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-done h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-done p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-verification-done .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row {
    display: flex;
    padding: 20px 16px;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-1 img {
    width: 320px;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item .number {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .btn-groups {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  body #wrapper #content-wrapper .container .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .btn-groups .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-choice {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-choice .btn-custom-outline-primary {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
  body #wrapper #content-wrapper .container .main-content .row-notifications {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .row-notifications .card-notifications {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .row-notifications .card-notifications .head span {
    color: var(--Dark-Gray, #474747);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main-content .row-notifications .card-notifications .head h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .row-notifications .card-notifications .body p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .row-notifications .card-notifications .footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  body #wrapper #content-wrapper .container .main-content .row-notifications .card-notifications .footer span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-merchant {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-merchant h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-merchant .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-merchant .description .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-merchant .description .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles {
    display: flex;
    padding: 8px 0px;
    align-items: center;
    gap: 14px;
    align-self: stretch;
    border-bottom: 1px solid var(--Soft-Grey, #ededed);
    background: #FFFFFF;
    cursor: pointer;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles img {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 0px 6px 6px 0px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles .description .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles .description .head .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles .description .body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles .description .body .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .card-profiles .description .body .badge-warning {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Orange, #d35d08);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #d35d08;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .list-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .list-more span {
    color: #DA2424;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-employes .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-rekening {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-rekening h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-rekening .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-rekening .description .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-data-rekening .description .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body {
    padding: 0;
    border: none;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .head img {
    border-radius: 8px 8px 0px 0px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .btn-close {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50px;
    background: var(--Dark-Gray, #474747);
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .img-profile {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 25px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .img-profile img {
    width: 84px;
    height: 84px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body {
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .title h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .title .badge-warning {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Orange, #d35d08);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #d35d08;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .contact span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .devider {
    border: 1px solid #EBECEF;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .location h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .location ul {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .btn-group .btn-light {
    border: none;
    background: transparent;
    color: #FF2E00;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfile .modal-content .modal-body .body .btn-group .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body {
    padding: 0;
    border: none;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .head img {
    border-radius: 8px 8px 0px 0px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .btn-close {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50px;
    background: var(--Dark-Gray, #474747);
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .img-profile {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 25px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .img-profile img {
    width: 84px;
    height: 84px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body {
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #474747;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .contact span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .devider {
    border: 1px solid #EBECEF;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location ul {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group .btn-light {
    border: none;
    background: transparent;
    color: #FF2E00;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .form .form-group {
    margin-bottom: 16px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .select-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .select-button .btn-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary.clicked {
    color: #FFFFFF;
    background-color: #DA2424 !important;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary.clicked span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: var(--White, #fff);
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .role-owner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .role-owner h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .role-employe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .role-employe h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .location-merchant {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .location-merchant h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .location-merchant .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .employe-picture label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .employe-picture .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .verification {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .verification h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content .card-profile-form .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main-content #addEmploye .modal-content .modal-body {
    display: flex;
    padding: 20px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main-content #addEmploye .modal-content .modal-body .icons {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main-content #addEmploye .modal-content .modal-body h4 {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 136.364% */
  }
  body #wrapper #content-wrapper .container .main-content #addEmploye .modal-content .modal-body p {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main-content #addEmploye .modal-content .modal-body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main-content #addEmploye .modal-content .modal-body .btn-group button {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .progress {
    display: flex;
    height: 100%;
    width: 30%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .progress .card-progress {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .progress .card-progress .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .progress .card-progress .list .list-progress {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .progress .card-progress .list .list-progress .data-progress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .progress .card-progress .list .list-progress .data-progress p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.035px;
    margin-bottom: 0;
  }
  body #wrapper #content-wrapper .container .progress .detail-registration {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(230, 237, 255, 0);
    margin-top: -35px;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .progress .detail-registration .span-highlight-primary {
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .progress .detail-registration .btn-detail {
    border: none;
    background: transparent;
  }
  body #wrapper #content-wrapper .container .progress .detail-registration:hover {
    background-color: #FFE9E9;
  }
  body #wrapper #content-wrapper .container .progress .detail-qris:hover {
    background-color: #FFE9E9;
  }
  body #wrapper #content-wrapper .container .progress .card-help {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    flex: 1 0 0;
    align-self: stretch;
    background: #fff;
    border-radius: 14px;
  }
  body #wrapper #content-wrapper .container .progress .detail-qris {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(230, 237, 255, 0);
    margin-top: -35px;
    border-radius: 0px 0px 14px 14px;
    cursor: pointer;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .progress .detail-qris .span-highlight-primary {
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .progress .detail-qris .btn-detail {
    border: none;
    background: transparent;
  }
  body #wrapper #content-wrapper .container .progress .card-bonus {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .progress .card-bonus .image-embed {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  body #wrapper #content-wrapper .container .progress .card-bonus .image-embed img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
  }
  body #wrapper #content-wrapper .container .progress .card-bonus .image-embed .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 50px;
    background: rgba(151, 151, 151, 0.81);
    width: 44px;
    height: 44px;
    padding-top: 8px;
    padding-left: 10px;
  }
  body #wrapper #content-wrapper .container .progress .card-bonus span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .progress .card-bonus h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .progress .card-bonus .btn-custom-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .progress .card-bonus .link {
    display: flex;
    height: 42px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .progress .card-bonus .link a {
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .progress .card-info-home {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    background-color: #FFFFFF;
    padding-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .progress .card-info-home span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .progress .card-info-home h3 {
    color: #0F0F10;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .progress .card-info-home p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .progress .card-info-home .stepper {
    display: flex;
    padding-top: 14px;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .progress .card-info-home .stepper .step-fill {
    width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .progress .card-info-home .stepper .step {
    width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .progress #modalDetail .modal-header h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .progress #modalDetail .modal-body {
    display: flex;
    height: 421px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .progress #modalDetail .modal-body .list {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .progress #modalDetail .modal-body .list .descriptions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus {
    margin-left: 24px;
    margin-right: 24px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus {
    width: 100%;
    max-width: 100%;
    height: fit-content;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus .btn-custom-orange {
    display: flex;
    padding: 20px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #ff5c00;
    border: none;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 120% */
    letter-spacing: 0.28px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus .sub-title {
    color: #d87400;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .btn-custom-scroll {
    display: flex;
    padding: 14px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    left: 807px;
    top: 600px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.09), 0px 6px 4px 0px rgba(0, 0, 0, 0.05), 0px 11px 4px 0px rgba(0, 0, 0, 0.01), 0px 17px 5px 0px rgba(0, 0, 0, 0);
    border: none;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .sub-title {
    color: #d87400;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 52px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-2 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    margin-top: 56px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title .orange {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 p {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item img {
    width: 12%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item .description .count {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 30px */
    letter-spacing: 2px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why {
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg {
    background-image: url("../../assets/images/bonus/bg-plane.png") !important;
    height: max-content;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .sub-title {
    margin-top: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title {
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title .dark {
    color: #222;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment {
    display: flex;
    padding: 54px 48px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-1 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 img {
    width: 6%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title {
    align-self: stretch;
    margin: 0;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-2 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-2 img {
    width: 70%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
    margin-left: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .img-logo {
    margin-top: 40px;
    width: 20%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 img {
    width: 6%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title {
    align-self: stretch;
    margin: 0;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col .item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col .item span {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-1 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .img-logo {
    margin-top: 40px;
    width: 20%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 img {
    width: 6%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title {
    align-self: stretch;
    margin: 0;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title .green {
    color: #00b14f;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-2 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-2 img {
    width: 70%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
    margin-left: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 img {
    width: 6%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title {
    align-self: stretch;
    margin: 0;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner {
    display: flex;
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .title {
    align-self: stretch;
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 52px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .row-mitra {
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .row-mitra img {
    width: 96px;
    height: 96px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 100px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-1 {
    display: flex;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-1 img {
    width: 80%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 .title {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 .btn-custom-orange {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi {
    margin-top: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 68px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title {
    align-self: stretch;
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title .orange {
    color: #ff5c00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 450px;
    max-width: 450px;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 12px;
    background: linear-gradient(160deg, #fff -14.96%, #fffbf0 108.26%);
    box-shadow: 0px 20px 40px -20px rgba(68, 68, 68, 0.2);
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-1 {
    width: 20%;
    display: flex;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-1 img {
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-2 .name {
    color: #444;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .rating {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title .dark {
    color: #444;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 136%; /* 27.2px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 136%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos .btn-custom-play {
    display: flex;
    width: 28px;
    height: 58px;
    padding: 20px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0px 4px 20px 4px rgba(237, 108, 48, 0.2);
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos span {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 100px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    justify-content: center;
    align-self: center;
    width: 70%;
    margin-left: 150px;
    position: relative; /* Add position property */
    /* Add a higher z-index to bring it above other elements */
    z-index: 2;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title .orange {
    color: #ff5c00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 p {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group {
    display: flex;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-gplay {
    border: none;
    background-color: transparent;
    width: 100px;
    height: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-gplay img {
    width: 200px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-2 {
    position: relative; /* Add position property */
    z-index: 1; /* Set a lower z-index to bring it below other elements */
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-2 img {
    width: 130%;
  }
  #modal-info .modal-body {
    display: flex;
    width: 100%;
    padding: 20px 16px;
    align-items: flex-start;
    gap: 24px;
  }
  #modal-info .modal-body .column-1 img {
    width: 315px;
  }
  #modal-info .modal-body .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  #modal-info .modal-body .column-2 span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #modal-info .modal-body .column-2 h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  #modal-info .modal-body .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  footer {
    bottom: 0;
  }
  .h-item {
    height: 90px;
  }
  .title-600-14 {
    font-size: 14px;
  }
  .title-600-16 {
    font-size: 16px;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .price p {
    font-size: 16px !important;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .container #body .table-discount {
    border-radius: 10px;
    border: 1px solid #e9e9e9;
  }
  .table-discount .table .th-1 {
    border-radius: 10px 0 0;
    background-color: #da2424;
    color: #fff;
  }
  .table-discount .table .th-2 {
    border-radius: 0 10px 0 0;
    background-color: #da2424;
    color: #fff;
  }
  .btn-custom-disabled {
    cursor: pointer;
    border-radius: 50px;
    background: #b0bec5;
    width: 100%;
    padding: 14px 24px;
    color: #fff;
    border: none;
  }
  #info-message2:empty {
    display: none;
  }
  #info-message:empty {
    display: none;
  }
  .container #body .form-input-custom {
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 4px 0 rgba(70, 70, 70, 0.24);
    padding: 8px;
    width: 100%;
  }
  #formno8 #message {
    color: red;
  }
  .sugest {
    cursor: pointer;
  }
  .card-alert-company {
    padding: 10px;
    gap: 19px;
    align-self: stretch;
    border-radius: 10px;
    border-left: 5px solid #62aced;
    background: #e0eefb;
  }
  #locexist {
    margin-left: 30px;
    margin-top: 12px;
    padding: 0;
  }
  #locexist li {
    display: flex;
    justify-content: start;
  }
  #locexist li::before {
    content: "•";
    font-size: 20px;
    color: black;
    margin-right: 10px;
  }
  .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  #svgmyprofit {
    width: 300px;
    height: auto;
  }
  #psmyprofit {
    width: 180px;
    height: auto;
    border-radius: 50px;
  }
  #closepopup {
    position: absolute;
    right: 10px;
    top: 10px;
    background: white;
    color: black;
    border-radius: 50%;
    padding: 1px 8px 6px 8px;
  }
  .warning-info {
    cursor: pointer;
    color: black;
    border: 1px solid #D2D2D2;
    box-shadow: none !important;
    transition: border 0.3s ease, box-shadow 0.3s ease;
  }
  .warning-info:hover {
    border: 1px solid transparent;
    box-shadow: 0px 0px 4px 0px #D90000 !important;
  }
  .content-wrapper-box {
    display: flex;
    gap: 20px;
  }
  .content-wrapper-box img {
    width: 300px;
  }
  /* skeleton */
  /* Variables */
  /* Animation */
  @-webkit-keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  @keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  /* Animation partial */
  .ssc-square, .ssc-head-line, .ssc-line, .ssc-hr, .ssc-circle {
    display: block;
    background-color: rgba(0, 0, 0, 0.17);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  .ssc-square:after, .ssc-head-line:after, .ssc-line:after, .ssc-hr:after, .ssc-circle:after {
    content: "";
    -webkit-animation: ssc-loading 1.3s infinite;
    animation: ssc-loading 1.3s infinite;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 1;
    background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.3), transparent);
  }
  /** Main class */
  .ssc {
    cursor: progress;
    -webkit-user-select: none;
    user-select: none;
  }
  /** Helpers classes */
  .ssc .mb {
    margin-bottom: 16px;
  }
  .ssc .mt {
    margin-top: 16px;
  }
  .ssc .mr {
    margin-right: 16px;
  }
  .ssc .ml {
    margin-left: 16px;
  }
  .ssc .mbs {
    margin-bottom: 8px;
  }
  .ssc .mts {
    margin-top: 8px;
  }
  .ssc .mrs {
    margin-right: 8px;
  }
  .ssc .mls {
    margin-left: 8px;
  }
  .ssc .w-10 {
    width: 10%;
  }
  .ssc .w-20 {
    width: 20%;
  }
  .ssc .w-30 {
    width: 30%;
  }
  .ssc .w-40 {
    width: 40%;
  }
  .ssc .w-50 {
    width: 50%;
  }
  .ssc .w-60 {
    width: 60%;
  }
  .ssc .w-70 {
    width: 70%;
  }
  .ssc .w-80 {
    width: 80%;
  }
  .ssc .w-90 {
    width: 90%;
  }
  .ssc .w-100 {
    width: 100%;
  }
  .ssc .flex {
    display: flex;
  }
  .ssc .inline-flex {
    display: inline-flex;
  }
  .ssc .flex-column {
    flex-direction: column;
  }
  .ssc .flex-column-reverse {
    flex-direction: column-reverse;
  }
  .ssc .flex-row {
    flex-direction: row;
  }
  .ssc .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .ssc .align-center {
    align-items: center;
  }
  .ssc .align-start {
    align-items: flex-start;
  }
  .ssc .align-end {
    align-items: flex-end;
  }
  .ssc .align-stretch {
    align-items: stretch;
  }
  .ssc .justify-start {
    justify-content: start;
  }
  .ssc .justify-center {
    justify-content: center;
  }
  .ssc .justify-end {
    justify-content: end;
  }
  .ssc .justify-between {
    justify-content: space-between;
  }
  .ssc .justify-around {
    justify-content: space-around;
  }
  /** Wrapper class */
  .ssc-wrapper {
    padding: 16px;
  }
  /* Figures, Objects */
  .ssc-card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17);
    background-color: #ffffff;
  }
  .ssc-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  .ssc-hr {
    width: 100%;
    height: 2px;
  }
  .ssc-line {
    border-radius: 15px;
    width: 100%;
    height: 12px;
  }
  .ssc-head-line {
    border-radius: 15px;
    width: 100%;
    height: 24px;
  }
  .ssc-square {
    width: 100%;
    height: 150px;
  }
}
@media screen and (min-width: 820px) and (max-width: 1280px) {
  h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  h2 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .h3-title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .h4-title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .span-dark {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-dark-reguler {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-dark-400 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-muted-14 {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .span-dark-500 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-highlight-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .span-highlight-warning {
    color: #ffc700 !important;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
  }
  .span-highlight-primary-14 {
    color: #12AB0F;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .btn-custom-primary {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-dis {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #949494;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-dark-success {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #004714;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-disabled {
    border-radius: 50px;
    background: #b0bec5;
    width: 100%;
    padding: 14px 24px;
    color: #fff;
    border: none;
    font-weight: 600;
  }
  .btn-custom-outline-primary {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-outline-disabled {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid #808080;
    background: #FFFFFF;
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .btn-custom-sort {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 50px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 21px */
    letter-spacing: 0.25px;
    border: none;
  }
  .btn-custom-filter {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .btnToolTip {
    position: relative;
    display: inline-block;
  }
  .btnToolTip .toolTipText {
    visibility: hidden;
    width: 600px;
    background-color: #474747;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 999;
  }
  .btnToolTip:hover .toolTipText {
    visibility: visible;
  }
  .btnToolTipSmall {
    position: relative;
    display: inline-block;
  }
  .btnToolTipSmall .toolTipTextSmall {
    visibility: hidden;
    width: 400px;
    background-color: #474747;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 999;
    right: 30px;
  }
  .btnToolTipSmall:hover .toolTipTextSmall {
    visibility: visible;
  }
  .alert-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: space-between;
    align-self: center;
    border-radius: 14px;
    background: var(--Soft-Orange, #fff7e9);
    box-shadow: 0px 0px 4px 0px #dac524;
    margin-bottom: 24px;
  }
  .alert-success {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #BFFFD5;
    margin-bottom: 24px;
  }
  .alert-soft-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #fff7e9;
    margin-bottom: 24px;
  }
  .alert-soft-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #ffe9e9;
    margin-bottom: 24px;
    width: 100%;
  }
  .alert-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #ffeaea;
    margin-bottom: 24px;
  }
  .status-success {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #BFFFD5;
    color: #12AB0F;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-full-primary {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    background: var(--Warning-Red, #ff2e00);
    color: #FFFFFF;
    width: 170px !important;
    justify-content: center;
  }
  .status-warning-primary {
    display: flex;
    padding: 8px;
    gap: 10px;
    border-radius: 50px;
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    background: #fff7e9;
  }
  .status-danger {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-warning {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #fff7e9;
    color: #D35D08;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-waiting {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #D35D08;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-outline {
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-outline span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #DA2424;
    color: #FFFFFF;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
  }
  .pills-navigation-primary {
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: none;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-primary span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #FFFFFF;
    color: #DA2424;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
  }
  .pills-selection-outline-primary {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-selection-primary {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .devider {
    width: 100%;
    height: 1px;
    background: #d2d2d2;
  }
  .custom-checkbox {
    position: relative;
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
    appearance: none;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.3s;
  }
  .custom-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
  }
  .custom-checkbox:checked::before {
    background-color: #04b200;
    content: "✓";
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 24px;
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
  }
  .form-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .form-group .dropdown-form-custom select {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: none;
  }
  .form-group .dropdown-form-custom select input:focus {
    border: none;
  }
  .form-group .form-input-custom-number {
    display: flex;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    padding: 8px;
    width: 100%;
  }
  .form-group .form-input-custom-number .devider-vertical {
    border: 1px #b0bec5 solid;
    margin-right: 3px;
    margin-left: 3px;
  }
  .form-group .form-input-custom-number .btn-number-select {
    border: none;
    background-color: #fff;
  }
  .form-group .form-input-custom-number input {
    border: none;
    width: 65%;
  }
  .form-group .form-input-custom-number input:focus {
    outline: none;
    width: 65%;
  }
  .form-group label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .form-group .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  .form-group .form-input-custom-disabled {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #EBECEF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom-disabled.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-disabled input {
    width: 100%;
    border: none !important;
  }
  .form-group .form-input-custom-textarea textarea {
    border-radius: 8px;
    border: none;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .dropdown-form-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .dropdown-form-custom button {
    border: none;
    background-color: transparent;
  }
  .form-group .dropdown-form-custom .dropdown-menu li {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    border-bottom: 1px solid #D2D2D2;
  }
  .form-group .dropdown-form-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-search {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom-search.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-search span {
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
    width: 100%;
  }
  .form-group table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
  }
  .form-group th,
  .form-group td {
    text-align: left;
    padding: 8px;
  }
  .form-group tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  .form-group #modalSearch .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  .form-group #modalSearch .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    justify-content: space-between;
  }
  .form-group #modalLocation .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  .form-group #modalLocation .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    justify-content: space-between;
  }
  .form-group .dropdown-location {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    width: 492px;
  }
  .form-group .dropdown-location span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .form-group .dropdown-location img {
    display: flex;
    width: 50px;
    height: 16px;
    justify-content: center;
    align-items: center;
  }
  .form-group .dropdown-location button {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border: none;
    background-color: transparent;
  }
  .form-group .dropdown-location .dropdown-menu {
    width: inherit;
    margin-top: 10px !important;
  }
  .form-group .dropdown-location .dropdown-menu .form-input-custom {
    width: 475px;
  }
  .form-group .dropdown-location .dropdown-menu li {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding: 10px;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
  }
  .form-group .dropdown-location .dropdown-menu small {
    font-size: 14px !important;
  }
  .form-group .dropdown-location .dropdown-menu .btn-custom-primary {
    display: flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 12px;
    background: #DA2424;
    margin: 8px;
    width: 97%;
  }
  .stepper {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
  }
  .stepper .progress {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
    background-color: transparent;
    border-radius: 0px;
  }
  .stepper .progress .bar-done {
    height: 4px;
    width: 100%;
    background-color: #808080;
  }
  .stepper .progress .icons-done {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #474747;
  }
  .stepper .progress .bar {
    height: 4px;
    width: 100%;
    background-color: #DA2424;
  }
  .stepper .progress .icons {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #474747;
  }
  .stepper-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .stepper-row .progress-step {
    display: flex;
    width: fit-content;
    height: auto;
    background-color: transparent;
    gap: 8px;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .stepper-row .progress-step .bullet-done {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  .stepper-row .progress-step .bullet {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
  }
  .stepper-row .progress-step span {
    width: max-content;
  }
  .stepper-row .progress-step .devider {
    border: 1px solid rgb(184, 181, 181);
  }
  #navbar-web .navbar {
    display: flex;
    padding: 14px 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
    position: fixed;
    width: -webkit-fill-available;
    z-index: 1005;
  }
  #navbar-web .navbar .logo img {
    max-width: 165px;
  }
  #navbar-web .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-web .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-web .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-web-onboard .navbar {
    top: 0;
    left: 0;
    display: flex;
    padding: 14px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
    z-index: 0;
  }
  #navbar-web-onboard .navbar .logo img {
    max-width: 165px;
  }
  #navbar-web-onboard .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-web-onboard .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-mobile-onboard .navbar {
    top: 0;
    left: 0;
    display: flex;
    padding: 14px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
  }
  #navbar-mobile-onboard .navbar .logo img {
    max-width: 165px;
  }
  #navbar-mobile-onboard .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-mobile {
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    width: 100%;
    z-index: 1005;
  }
  #navbar-mobile .container-fluid .navbar-brand #logo-mobile {
    width: 144px;
  }
  #navbar-mobile .container-fluid button {
    border: none;
    background-color: transparent;
  }
  #navbar-mobile .container-fluid .offcanvas {
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-header img {
    width: 144px;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    padding-left: 7px;
    border: none;
    background-color: transparent;
    text-decoration: none;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item a span {
    display: flex;
    align-items: start;
    width: 100%;
    color: #FFFFFF;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu {
    background-color: transparent;
    border: none;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu li a {
    color: #FFFFFF;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu li a:hover {
    color: #FFFFFF;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  #navbar-mobile #navbar-location-mobile {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location {
    width: 100%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location #value-location {
    width: 100%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location .dropdown-menu .form-input-custom {
    width: 95%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location .btn-custom-primary {
    color: #FFFFFF;
    background-color: #DA2424;
  }
  #carouselExampleDark .carousel-indicators {
    margin-left: 5%;
    justify-content: start;
    bottom: -6px;
    top: 330px;
  }
  #carouselExampleDark .carousel-indicators button {
    height: 8px;
    width: 8px;
    border-radius: 100%;
  }
  .alert-danger-border {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #DA2424;
    background: #fff4f4;
    margin-bottom: 24px;
  }
  .alert-danger-border .title {
    color: #170e2b;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  .alert-danger-border p {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  footer {
    display: flex;
    width: -webkit-fill-available;
    padding: 16px 24px;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 4px 4px 5px rgba(84, 84, 84, 0.25);
  }
  footer img {
    width: 113.714px;
    height: 12px;
    flex-shrink: 0;
  }
  footer span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .wrapper {
    transition-duration: 0.5s;
    display: flex;
  }
  .wrapper .sidebar {
    width: 220px;
    position: relative;
    left: 0px;
    top: 0px;
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    white-space: nowrap;
    transition-duration: 0.5s;
    z-index: 1000;
  }
  .wrapper .sidebar .sb-item-list {
    width: 100%;
    height: 100vh;
    margin-top: 24px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .wrapper .sidebar .sb-item-list .sb-item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    padding-left: 7px;
    border: none;
    background-color: transparent;
    text-decoration: none;
  }
  .wrapper .sidebar .sb-item-list .sb-item a span {
    display: flex;
    align-items: start;
    width: 100%;
    color: #FFFFFF;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu {
    background-color: transparent;
    border: none;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu li a {
    color: #FFFFFF;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu li a:hover {
    color: #FFFFFF;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  .wrapper .sidebar .sb-item-list .sb-item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  .wrapper .sidebar .logo-sidebar {
    display: flex;
    padding: 0px 10px;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
  }
  .wrapper .sidebar .logo-sidebar img {
    display: flex;
    width: 144px;
    height: 36px;
    justify-content: center;
    align-items: center;
  }
  .wrapper .sidebar .logo-sidebar #logo-web-collapse {
    display: none;
  }
  .wrapper .sidebar .logo-sidebar #svg-circle {
    cursor: pointer;
  }
  .wrapper .sidebar .logo-sidebar #btn-uncollapse {
    display: none;
  }
  .wrapper .sidebar .sb-item-list > .sb-item > .sb-text {
    position: absolute;
    transition-duration: 0.5s;
  }
  .wrapper .sidebar .sb-item.active > .sb-icon {
    margin-left: -3px;
  }
  .wrapper .sidebar .sb-icon {
    padding-left: 10px;
    padding-right: 20px;
  }
  .wrapper .sidebar .sb-item:hover,
  .wrapper .sidebar .sb-item.active {
    filter: brightness(130%);
  }
  .wrapper .sb-menu {
    position: relative;
  }
  .wrapper .sb-menu:after {
    content: " ";
    width: 0;
    height: 0;
    display: block;
    float: right;
    margin-top: 19px;
    margin-left: -12px;
    margin-right: 5px;
    border: solid 5px transparent;
    border-left-color: #eee;
  }
  .wrapper .sb-menu > .sb-submenu {
    display: none;
  }
  .wrapper .sb-menu:hover > .sb-submenu {
    position: absolute;
    display: block;
    width: 200px;
    top: 0;
    left: calc(100% + 1px);
  }
  .wrapper .sb-submenu > .sb-item:first-child {
    border-radius: 8px 8px 0px 0px;
  }
  .wrapper .sb-submenu > .sb-item:last-child {
    border-radius: 0px 0px 8px 8px;
  }
  .wrapper .btn-toggle-sidebar .sb-icon {
    padding-left: 15px;
  }
  .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
    display: inline-block;
  }
  .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
    display: none;
  }
  .wrapper.sidebar-collapse .sidebar #btn-uncollapse {
    display: block;
  }
  .wrapper.sidebar-collapse .sidebar #btn-collapse {
    display: none;
  }
  .wrapper.sidebar-collapse .sidebar #navbar-web .navbar {
    width: 95%;
  }
  .wrapper.sidebar-collapse:not(:hover) {
    width: 80px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar {
    width: 80px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #logo-web {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #logo-web-collapse {
    display: block;
    margin-left: -10px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #btn-uncollapse {
    display: block;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #btn-collapse {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item span {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-klaim {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-data {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-info {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
    width: 100%;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item .dropdown #dataClaim {
    display: none;
  }
  .wrapper.sidebar-collapse .wrapper.sidebar-collapse .sb-item-list > .sb-item > .sb-text {
    position: absolute;
    transform: translateX(-100%);
    opacity: 0;
  }
  .wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
    display: none;
  }
  .wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
    display: inline-block;
  }
  .list-code .btn-select-country {
    background-color: none;
    border: none;
  }
  .list-code .list {
    display: flex;
    padding: 14px 8px;
    gap: 10px;
    align-self: stretch;
    margin-top: 16px;
    border-bottom: 1px solid #e2e2e2;
    cursor: pointer;
  }
  .list-code .list .country-name {
    width: 100%;
  }
  .list-code .aa {
    margin-top: 0 !important;
  }
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
  .shake {
    animation: shake 3.5s infinite;
  }
  @keyframes shakeAnimation {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
    100% {
      transform: translateX(5px);
    }
  }
  .button-export {
    display: none !important;
  }
  .paging_full_numbers {
    text-align: right;
    margin-top: 0px;
  }
  .foot-table {
    display: flex;
    justify-content: space-between;
  }
  .active-sub {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
    filter: brightness(130%);
    width: 85% !important;
  }
  .status-cashback {
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #e5bfff;
    color: #d119cf;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .callout {
    border-radius: 0.5rem;
    background-color: #fff;
    border-left: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 5px;
    font-size: 12px;
    cursor: pointer;
    width: 30%;
    margin-right: 5px;
  }
  .callout-danger {
    border-left: 8px solid #f34a4a !important;
  }
  .callout span {
    display: inline-block;
    width: 200px;
    max-height: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .callout svg {
    place-self: center;
  }
  .callout a {
    text-decoration: none;
    color: inherit;
  }
  .callout div {
    display: flex;
    justify-content: space-between;
  }
  .callout span p:first-of-type {
    white-space: normal !important;
    word-break: break-all !important;
    margin-bottom: 0 !important;
  }
  .callout span p:nth-of-type(2) {
    width: 170px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
    margin-bottom: 0 !important;
  }
  .bodymaxcallout2 {
    display: block;
    padding-bottom: 10px;
  }
  .bodymaxcallout2 .callout {
    width: 100% !important;
    margin-bottom: 1rem;
  }
  .bodymaxcallout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .maxcallout span {
    width: 350px;
    max-height: 55px;
  }
  .maxcallout span p:nth-of-type(2) {
    width: auto;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
  }
  .row-notifications .card-notifications .body p:first-of-type {
    font-size: 20px !important;
  }
  .row-notifications .card-notifications {
    gap: 0 !important;
  }
  .h-item {
    height: 90px;
  }
  .card-location {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  .card-location img {
    width: 56px;
    height: 56px;
  }
  .card-location .card-head {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #D2D2D2;
  }
  .card-location .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .card-location .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
  }
  .card-location .descriptions .item {
    display: flex;
    gap: 80px;
  }
  .card-location .descriptions {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
  }
  .card-location .descriptions .item .span-bolder {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
  }
  .form-group .dropdown-location button {
    justify-content: space-between;
  }
  .span-highlight {
    color: #da2827;
    font-family: Inter, sans-serif;
    font-weight: 500;
    text-align: center;
    line-height: 150%;
    text-decoration: none;
  }
  .custom-checkbox {
    position: relative;
    appearance: none;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.3s;
  }
  .validation-confirmation {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  .custom-checkbox, .custom-checkbox:checked::before {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }
  .custom-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
  }
  .button-group-confirmation {
    display: flex;
    gap: 20px;
    margin-top: 20px;
  }
  .font-500-16 {
    font-size: 16px;
    font-style: normal;
  }
  .font-500-14, .font-500-16 {
    text-overflow: ellipsis;
    line-height: 160%;
    letter-spacing: 0.25px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #170e2b;
  }
  .button-group-confirmation .btn-custom-outline-primary {
    border-radius: 50px;
    border: 1px solid #da2827 !important;
    width: 50%;
    color: #da2827;
    padding: 14px 24px 40px 30px;
    font-weight: 600;
    margin-top: 0;
  }
  .button-group-confirmation .btn-custom-outline-primary:hover {
    color: #fff;
  }
  .card-alert-company {
    padding: 10px;
    gap: 19px;
    align-self: stretch;
    border-radius: 10px;
    border-left: 5px solid #62aced;
    background: #e0eefb;
  }
  .title-600-14 {
    font-size: 14px;
  }
  .title-600-16 {
    font-size: 16px;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .price p {
    font-size: 16px !important;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  #info-message:empty {
    display: none;
  }
  #info-message2:empty {
    display: none;
  }
  .button-group-confirmation .btn-custom-disabled {
    border-radius: 50px;
    background: #b0bec5 !important;
    width: 100%;
    padding: 14px 24px;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    opacity: initial !important;
  }
  .button-group-confirmation .btn-custom-primary {
    border-radius: 50px;
    background: #da2827 !important;
    width: 100%;
    padding: 14px 24px;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    opacity: initial !important;
    height: auto !important;
    flex-shrink: unset !important;
  }
  input:focus-visible {
    outline: none;
  }
  ul:empty {
    display: none;
  }
  .dt-processing {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 4px 4px 3px #e0e0e0;
  }
  .dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent !important;
  }
  .dropdown-item.active, .dropdown-item:active {
    color: inherit !important;
    background-color: transparent !important;
  }
  .span-dark-reguler:empty {
    display: none;
  }
  .address-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    font-weight: 400 !important;
    display: block;
  }
  .in-btn input {
    margin-right: 10px;
  }
  .btn-n {
    background: #198754;
  }
  .location-menu {
    z-index: var(--bs-dropdown-zindex);
    display: none;
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    width: auto;
    margin-top: 10px !important;
  }
  #locexist {
    margin-left: 30px;
    margin-top: 12px;
    padding: 0;
  }
  #locexist li {
    display: flex;
    justify-content: start;
  }
  #locexist li::before {
    content: "•";
    font-size: 20px;
    color: black;
    margin-right: 10px;
  }
  .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  #closepopup {
    position: absolute;
    right: 10px;
    top: 10px;
    background: white;
    color: black;
    border-radius: 50%;
    padding: 1px 8px 6px 8px;
  }
  /* skeleton */
  /* Variables */
  /* Animation */
  @-webkit-keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  @keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  /* Animation partial */
  .ssc-square, .ssc-head-line, .ssc-line, .ssc-hr, .ssc-circle {
    display: block;
    background-color: rgba(0, 0, 0, 0.17);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  .ssc-square:after, .ssc-head-line:after, .ssc-line:after, .ssc-hr:after, .ssc-circle:after {
    content: "";
    -webkit-animation: ssc-loading 1.3s infinite;
    animation: ssc-loading 1.3s infinite;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 1;
    background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.3), transparent);
  }
  /** Main class */
  .ssc {
    cursor: progress;
    -webkit-user-select: none;
    user-select: none;
  }
  /** Helpers classes */
  .ssc .mb {
    margin-bottom: 16px;
  }
  .ssc .mt {
    margin-top: 16px;
  }
  .ssc .mr {
    margin-right: 16px;
  }
  .ssc .ml {
    margin-left: 16px;
  }
  .ssc .mbs {
    margin-bottom: 8px;
  }
  .ssc .mts {
    margin-top: 8px;
  }
  .ssc .mrs {
    margin-right: 8px;
  }
  .ssc .mls {
    margin-left: 8px;
  }
  .ssc .w-10 {
    width: 10%;
  }
  .ssc .w-20 {
    width: 20%;
  }
  .ssc .w-30 {
    width: 30%;
  }
  .ssc .w-40 {
    width: 40%;
  }
  .ssc .w-50 {
    width: 50%;
  }
  .ssc .w-60 {
    width: 60%;
  }
  .ssc .w-70 {
    width: 70%;
  }
  .ssc .w-80 {
    width: 80%;
  }
  .ssc .w-90 {
    width: 90%;
  }
  .ssc .w-100 {
    width: 100%;
  }
  .ssc .flex {
    display: flex;
  }
  .ssc .inline-flex {
    display: inline-flex;
  }
  .ssc .flex-column {
    flex-direction: column;
  }
  .ssc .flex-column-reverse {
    flex-direction: column-reverse;
  }
  .ssc .flex-row {
    flex-direction: row;
  }
  .ssc .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .ssc .align-center {
    align-items: center;
  }
  .ssc .align-start {
    align-items: flex-start;
  }
  .ssc .align-end {
    align-items: flex-end;
  }
  .ssc .align-stretch {
    align-items: stretch;
  }
  .ssc .justify-start {
    justify-content: start;
  }
  .ssc .justify-center {
    justify-content: center;
  }
  .ssc .justify-end {
    justify-content: end;
  }
  .ssc .justify-between {
    justify-content: space-between;
  }
  .ssc .justify-around {
    justify-content: space-around;
  }
  /** Wrapper class */
  .ssc-wrapper {
    padding: 16px;
  }
  /* Figures, Objects */
  .ssc-card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17);
    background-color: #ffffff;
  }
  .ssc-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  .ssc-hr {
    width: 100%;
    height: 2px;
  }
  .ssc-line {
    border-radius: 15px;
    width: 100%;
    height: 12px;
  }
  .ssc-head-line {
    border-radius: 15px;
    width: 100%;
    height: 24px;
  }
  .ssc-square {
    width: 100%;
    height: 150px;
  }
  .flex-d {
    max-width: 100% !important;
  }
  body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  body #navbar-web-onboard {
    display: none;
  }
  body #navbar-web-onboard .form-group {
    display: none;
  }
  body #navbar-mobile-onboard {
    display: block;
  }
  body #navbar-mobile-onboard .form-group .dropdown-location {
    width: 700px;
  }
  body #navbar-mobile-onboard .form-group .dropdown-location .dropdown-menu .form-input-custom {
    width: 98%;
  }
  body #navbar-mobile-onboard .form-group .dropdown-location #value-location {
    width: 100%;
  }
  body .flex-onboarding {
    display: flex;
    align-items: center;
  }
  body .flex-onboarding .container-onboarding {
    background-image: url("../images/bg-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    display: flex;
    align-items: baseline;
    width: -webkit-fill-available;
  }
  body .flex-onboarding .container-onboarding .row-onboarding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 8px;
    margin-top: 24px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 {
    display: flex;
    align-items: center;
    padding: 24px !important;
    align-self: flex-start;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 img {
    max-width: 300px;
    margin-left: 50px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .title-step-5 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .title-step-5 h1 {
    color: #D35D08;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .image-embed {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .image-embed img {
    width: 120%;
    height: auto;
    filter: grayscale(30%);
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .image-embed .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: transparent;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    align-self: center;
    width: 85%;
    padding: 24px;
    margin-bottom: 100px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-primary {
    height: 58px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-outline-primary {
    height: 58px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description .title-step-5 {
    align-self: stretch;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description .title-step-5 .black {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
    text-transform: capitalize;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description .title-step-5 .orange {
    color: #d35d08;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
    letter-spacing: 0.25px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-primary {
    border-radius: 50px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group {
    width: 100%;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group .span-highlight-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .button-apps button {
    border: none;
    background-color: transparent;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .stepper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .stepper .step-fill {
    width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .stepper .step {
    width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper {
    display: flex;
  }
  body #wrapper #sidebar-web {
    display: none;
  }
  body #wrapper #content-wrapper {
    width: 100%;
    background: rgb(249, 244, 244);
  }
  body #wrapper #content-wrapper #navbar-web {
    display: none;
  }
  body #wrapper #content-wrapper #navbar-mobile {
    display: block;
  }
  body #wrapper #content-wrapper #navbar-mobile .container-fluid .offcanvas {
    width: 50%;
  }
  body #wrapper #content-wrapper #navbar-mobile #navbar-location-mobile .container-fluid .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container {
    margin-left: 0px;
  }
  body #wrapper #content-wrapper .container .breadcumb {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .title-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: -10px;
    margin-bottom: 16px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .title-detail h3 {
    margin-left: 10px;
  }
  body #wrapper #content-wrapper .container .title-detail button {
    border: none;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .indicator-form {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .indicator-form .list {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .indicator-form .list .number-fill {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .indicator-form .list .number {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .card {
    width: 100%;
    margin-top: 24px;
    border-radius: 16px;
  }
  body #wrapper #content-wrapper .container .card .card-img-top {
    border-radius: 16px 16px 0px 0px;
    height: 10% !important;
  }
  body #wrapper #content-wrapper .container .card .profile {
    position: absolute;
    left: 20px;
    top: 60px;
  }
  body #wrapper #content-wrapper .container .card .profile img {
    width: 100px;
    height: 100px;
  }
  body #wrapper #content-wrapper .container .card .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
    margin-top: 10px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 span {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid #D35D08;
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #D35D08;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-2 {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-2 .span-highlight-dark-primary {
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container #spinner-loading {
    position: fixed;
    right: 0px;
    left: 0px;
    top: 0px;
    z-index: 1000;
    background-color: rgba(71, 71, 71, 0.4392156863);
    height: 100%;
  }
  body #wrapper #content-wrapper .container #spinner-loading .spinner-border {
    position: fixed;
    right: 200px;
    left: 400px;
    top: 350px;
    z-index: 1001;
  }
  body #wrapper #content-wrapper .container .main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    width: 100%;
    margin-top: 150px;
    padding-bottom: 100px;
  }
  body #wrapper #content-wrapper .container .main .main-content {
    width: 100%;
    max-width: 100%;
    height: fit-content;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step-fill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step-fill .bar-fill {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step-fill .title-fill {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step .bar {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step .bar-done {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #808080;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step .title {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 14px;
    border: 1.4px solid #DA2424;
    background: #FFFFFF;
    justify-content: space-between;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content {
    display: flex;
    gap: 24px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content img {
    width: 177px;
    max-width: 177px;
    height: 100px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content .description h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content .description span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items a {
    border: none;
    background: transparent;
    float: right;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
    background: #fff;
    padding: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp .head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp .head .title-head-pjsp {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp.disabled {
    background-color: #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check {
    width: 100%;
    border-radius: 12px;
    padding: 14px;
    background-color: #f2fff4;
    border: 1px solid #047d10;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check .head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check .head .title-head-pjsp {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check .custom-checkbox-2 {
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-va {
    background-color: #f8f8f8;
    border-radius: 14px;
    display: flex;
    width: 48px;
    height: 48px;
    padding: 0px 9px;
    justify-content: center;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-va img {
    width: -webkit-fill-available;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero {
    margin-top: 36px;
    text-align: center;
    background: transparent;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .img-fluid {
    width: 20%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .title-mixed {
    display: flex;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .info-user-checkout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .info-user-checkout .info-user {
    color: #170e2b;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero h3 {
    color: #da2827;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 24px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 136%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero p {
    color: #170e2b;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .register-yet {
    color: #5f6368;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .alert {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .alert .alert-warning-payments {
    padding: 15px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 24px !important;
    background: #fff9da !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .button-group-tutorial .btn-custom-outline-primary {
    width: fit-content;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-custom-outline-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #form-card-waiting {
    margin-top: -64px;
    display: flex;
    /* width: 320px; */
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #form-card-waiting h3 {
    color: #170e2b;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .span-danger-bolder {
    color: #DA2424;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay {
    width: -webkit-fill-available !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-total {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-green {
    color: #12AB0F;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-warning {
    color: #da4303;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-danger {
    color: #a12222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-verify {
    display: flex;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-verify .btn-custom-primary {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion {
    --bs-accordion-bg: transparent !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .barcode-reload {
    position: relative;
    display: flex; /* Membuat container sesuai dengan ukuran gambar */
    align-items: center;
    width: 70%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .barcode-reload::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.767);
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Menjadikan elemen anak di dalamnya menjadi kolom */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .img-qris {
    display: block;
    margin: auto;
    height: auto;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .center-content {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-in-layer {
    position: absolute;
    top: 50%;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 15%;
    border-radius: 8px;
    font-size: 13px;
    background-color: #a12222;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .span-in-layer {
    position: absolute;
    top: 40%;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 15%;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-group-tutorial {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-bottom: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-group-tutorial button {
    height: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-item {
    border: none !important;
    background-color: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .badge-group {
    display: flex;
    padding: 0px 15px;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .badge-group .badge-accordion {
    width: fit-content;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px 8px 0px 0px;
    background: #00b512;
    color: #fff;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-accordion-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-accordion-payment .title-icon {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button {
    display: block !important;
    height: 64px !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button:not(.collapsed) {
    border-radius: 20px !important;
    border: 1.4px solid #7cb342 !important;
    background-color: #f9fff9 !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button {
    margin-bottom: 16px;
    border-radius: 20px !important;
    border: 1.4px solid #d7d7d7 !important;
    background: #fff !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button::after {
    display: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .list-bank {
    display: flex;
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 16px;
    padding-top: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .list-bank .image-bank {
    align-self: center;
    margin-left: auto;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-pay-ovo {
    width: 50%;
    margin-top: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-custom-next-ovo {
    margin-top: 20px;
    width: 100%;
    display: flex;
    padding: 8px 12px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #da2827;
    color: #da2827;
    background: #fff;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-form {
    display: flex;
    width: 70%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .tac {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .tac .form-group {
    width: 8%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-custom-primary {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .skema {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .alert-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: space-between;
    align-self: center;
    border-radius: 14px;
    background: var(--Soft-Orange, #fff7e9);
    box-shadow: 0px 0px 4px 0px #dac524;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head img {
    width: 56px;
    height: 56px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item {
    display: flex;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    width: 128px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item .span-bolder {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item .span-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-nmid-home {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-nmid-home .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-nmid-home .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income {
    border-radius: 14px;
    background: linear-gradient(73deg, #940101 1.35%, #e04646 100%);
    box-shadow: 0px 40px 50px -50px #f2533f;
    color: #FFFFFF;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description .price .income-price {
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description img {
    width: 61px;
    height: 60px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid #808080;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .footer:hover {
    background-color: #a12222;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement {
    margin-top: 24px;
    border-radius: 14px;
    border-radius: 14px;
    background: radial-gradient(189.15% 136.66% at 98.69% 3.12%, #ffa755 0%, #ce6f00 100%);
    box-shadow: 0px 40px 50px -50px #cf7002;
    color: #FFFFFF;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body .head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body .description .settlement-price {
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid #808080;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .footer:hover {
    background-color: #D35D08;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help {
    border-radius: 14px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    flex: 1 0 0;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    padding: 20px;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .body .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    gap: 14px;
    padding: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .body .description .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    cursor: pointer;
    color: #DA2424;
    font-weight: 600;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .footer:hover {
    background-color: #FFE9E9;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-form-address-now {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-form-address-now h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-form-address-now .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-kontak {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-kontak span {
    font-size: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-kontak .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-kontak .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-data-qris {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-data-qris h4 {
    color: #0F0F10;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .flex-two .column-2 .card-data-qris span {
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .h3-title {
    font-size: 19px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list {
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .title {
    display: flex;
    align-items: center;
    gap: 17px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .title img {
    width: 36px;
    height: 36px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .title .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .btn-edit {
    border: none;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .header img {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .form-otp {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .form-otp .form-group .form-input-custom {
    width: 40px;
    height: 40px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .countdown {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .edit-email {
    display: flex;
    width: 320px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .description .status {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .description .status .status-warning {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description .status {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description .status .status-warning {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description .status .status-danger {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description .status {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description .status .status-warning {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description .status .status-danger {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .filters {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d2d2d2;
  }
  body #wrapper #content-wrapper .container .main .main-content .filters .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 34px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort .dropdown button {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort .dropdown .dropdown-menu li .dropdown-item {
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .dropdown button {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .dropdown .dropdown-menu {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .dropdown .dropdown-menu li .dropdown-item {
    color: #0F0F10;
    text-align: start;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head a {
    color: #DA2424;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .table tbody tr td {
    border-bottom: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table .pages {
    display: flex;
    gap: 24px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table .pages span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table a {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .empty-table {
    display: flex;
    height: 216px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .empty-table img {
    width: 73px;
    height: 73px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .empty-table span {
    color: #808080;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .row-modal-settlement {
    display: flex;
    width: 100%;
    padding: 20px 16px;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper {
    display: flex;
    padding-left: 14px;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper .step-fill {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper .step {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh {
    display: flex;
    width: 100%;
    height: 460px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh img {
    width: 250px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh h3 {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh p {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh .btn-custom-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction a {
    color: #DA2424;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement {
    display: flex;
    padding: 20px;
    align-items: flex-start;
    gap: 24px;
    margin-top: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--White, #fff);
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-1 .item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-1 .item span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-2 .item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-2 .item span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .devider {
    width: 1px;
    height: 132px;
    background: #d2d2d2;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 24px;
    gap: 16px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary.clicked {
    color: #FFFFFF;
    background-color: #DA2424 !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary.clicked span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: var(--White, #fff);
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .head {
    display: flex;
    padding-bottom: 8px;
    justify-content: space-between;
    flex-direction: column;
    align-self: stretch;
    border-bottom: 1px solid #e6edff;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .head .column-1 h3 {
    color: #1a1616;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .head .column-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-1 .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-1 .item span {
    width: 300px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item span {
    width: 300px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-waiting {
    width: 30%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-warning {
    width: 30%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-danger {
    width: 30%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-success {
    width: 30%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .btn-custom-primary {
    margin-top: 36px;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-cari-klaim {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    padding: 20px;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-cari-klaim .btn-custom-primary {
    border-radius: 50px;
    transition: background-color 0.3s;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-klaim {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-klaim .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-klaim .item span {
    width: 200px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas .item .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .document-images {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    margin-top: 14px;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .document-images .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .document-images .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-akun-pengajuan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-akun-pengajuan h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-akun-pengajuan .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .dropdown-form-custom button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .dropdown-form-custom button span {
    text-align: start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-1 .data {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-1 .data span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-2 .data {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-2 .data span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .btn-custom-primary {
    border-radius: 50px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .btn-custom-disabled {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .btn-custom-dark-primary {
    display: flex;
    height: 48px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    background: var(--Linear-Primary-Radial, radial-gradient(189.15% 136.66% at 98.69% 3.12%, #d12f2f 0%, #940101 100%));
    border: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .alert-soft-warning {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .alert-danger {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data {
    display: flex;
    padding: 20px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .head .date {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .alert-soft-warning {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .alert-danger {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .label {
    display: flex;
    padding: 10px 10px;
    align-items: center;
    align-self: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 4px;
    background: #EBECEF;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .label h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin: 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-1 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-1 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-2 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-2 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data a {
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .dropdown-form-custom button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .dropdown-form-custom button span {
    text-align: start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done .header img {
    width: 100px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row {
    display: flex;
    padding: 20px 16px;
    align-items: center;
    flex-direction: column !important;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-1 img {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item .number {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .btn-groups {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .btn-groups .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-choice {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-choice .btn-custom-outline-primary {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .head span {
    color: var(--Dark-Gray, #474747);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .head h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .body p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .footer span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant .description .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant .description .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles {
    display: flex;
    padding: 8px 0px;
    align-items: center;
    gap: 14px;
    align-self: stretch;
    border-bottom: 1px solid var(--Soft-Grey, #ededed);
    background: #FFFFFF;
    cursor: pointer;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles img {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 0px 6px 6px 0px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .head span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .body .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .body .badge-warning {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Orange, #d35d08);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #d35d08;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .list-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .list-more span {
    color: #DA2424;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening .description .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening .description .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body {
    padding: 0;
    border: none;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .head img {
    border-radius: 8px 8px 0px 0px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .btn-close {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50px;
    background: var(--Dark-Gray, #474747);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .img-profile {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .img-profile img {
    width: 84px;
    height: 84px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body {
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .title h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .title .badge-warning {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Orange, #d35d08);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #d35d08;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .contact span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .devider {
    border: 1px solid #EBECEF;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .location h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .location ul {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .btn-group .btn-light {
    border: none;
    background: transparent;
    color: #FF2E00;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .btn-group .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body {
    padding: 0;
    border: none;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .head img {
    border-radius: 8px 8px 0px 0px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .btn-close {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50px;
    background: var(--Dark-Gray, #474747);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .img-profile {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .img-profile img {
    width: 84px;
    height: 84px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body {
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #474747;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .contact span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .devider {
    border: 1px solid #EBECEF;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location ul {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group .btn-light {
    border: none;
    background: transparent;
    color: #FF2E00;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .form .form-group {
    margin-bottom: 16px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary.clicked {
    color: #FFFFFF;
    background-color: #DA2424 !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary.clicked span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: var(--White, #fff);
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-owner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-owner h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-employe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-employe h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .location-merchant {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .location-merchant h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .location-merchant .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .employe-picture label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .employe-picture .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .verification {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .verification h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body {
    display: flex;
    padding: 20px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body .icons {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body h4 {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 136.364% */
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body p {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body .btn-group button {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation {
    padding: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search span {
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-check {
    padding: 16px;
    border-bottom: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-header .modal-title {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 136.364% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head .description .item {
    display: flex;
    height: 22px;
    align-items: flex-start;
    gap: 20px;
    flex-shrink: 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head .description .item span {
    width: 200px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head .description .item .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .description-body {
    margin-top: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .description-body p {
    color: var(--Black, #0f0f10);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .description-body p span {
    color: var(--Warning-Red, #ff2e00);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .btn-group {
    display: flex;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .btn-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .progress {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list .list-progress {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list .list-progress .data-progress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list .list-progress .data-progress p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.035px;
    margin-bottom: 0;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(230, 237, 255, 0);
    margin-top: -35px;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration .span-highlight-primary {
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration .btn-detail {
    border: none;
    background: transparent;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration:hover {
    background-color: #FFE9E9;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    flex: 1 0 0;
    align-self: stretch;
    background: #fff;
    border-radius: 14px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help .detail-qris {
    display: flex;
    padding-top: 32px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help .detail-qris .span-highlight-primary {
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help .detail-qris .btn-detail {
    border: none;
    background: transparent;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .image-embed {
    position: relative;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .image-embed img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .image-embed .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 50px;
    background: rgba(151, 151, 151, 0.81);
    width: 44px;
    height: 44px;
    padding-top: 8px;
    padding-left: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .btn-custom-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .link {
    display: flex;
    height: 42px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .link a {
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home h3 {
    color: #0F0F10;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home .stepper {
    display: flex;
    padding-top: 14px;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home .stepper .step-fill {
    width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home .stepper .step {
    width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-header h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-body {
    display: flex;
    height: 421px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-body .list {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-body .list .descriptions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus {
    margin-left: 0px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus {
    width: 100%;
    max-width: 100%;
    padding-bottom: 80px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus .btn-custom-orange {
    display: flex;
    padding: 20px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #ff5c00;
    border: none;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 120% */
    letter-spacing: 0.28px;
    text-transform: uppercase;
    height: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus .sub-title {
    color: #d87400;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    margin-top: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .btn-custom-scroll {
    display: flex;
    padding: 14px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    left: 400px;
    top: 650px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.09), 0px 6px 4px 0px rgba(0, 0, 0, 0.05), 0px 11px 4px 0px rgba(0, 0, 0, 0.01), 0px 17px 5px 0px rgba(0, 0, 0, 0);
    border: none;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .sub-title {
    color: #d87400;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 52px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-2 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    margin-top: 56px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title .orange {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 p {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item img {
    width: 12%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item .description .count {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 30px */
    letter-spacing: 2px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why {
    width: 100%;
    margin-top: -60px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg {
    background-image: url("../../assets/images/bonus/bg-plane.png") !important;
    height: max-content;
    width: 130%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: -300px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .sub-title {
    margin-top: 150px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title {
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title .dark {
    color: #222;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title {
    align-self: stretch;
    margin: 0;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-2 img {
    width: 60%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .img-logo {
    margin-top: 40px;
    width: 40%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title {
    align-self: stretch;
    margin: 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col .item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col .item span {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-1 {
    width: 80%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-1 img {
    width: 90%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .img-logo {
    margin-top: 40px;
    width: 20%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title {
    align-self: stretch;
    margin: 0;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title .green {
    color: #00b14f;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-2 img {
    width: 70%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title {
    align-self: stretch;
    margin: 0;
    width: 80%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 80%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner {
    display: flex;
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .title {
    align-self: stretch;
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 52px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .row-mitra {
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .row-mitra img {
    width: 96px;
    height: 96px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 100px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-1 {
    display: flex;
    justify-content: center;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-1 img {
    width: 90%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 .title {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 .btn-custom-orange {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi {
    margin-top: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 68px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title {
    align-self: stretch;
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title .orange {
    color: #ff5c00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 350px;
    max-width: 350px;
    height: 480px;
    max-height: 480px;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 12px;
    background: linear-gradient(160deg, #fff -14.96%, #fffbf0 108.26%);
    box-shadow: 0px 20px 40px -20px rgba(68, 68, 68, 0.2);
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-1 {
    width: 20%;
    display: flex;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-1 img {
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-2 .name {
    color: #444;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .rating {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title .dark {
    color: #444;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 136%; /* 27.2px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 136%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos .btn-custom-play {
    display: flex;
    width: 28px;
    height: 58px;
    padding: 20px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0px 4px 20px 4px rgba(237, 108, 48, 0.2);
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos span {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 100px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    justify-content: center;
    align-self: center;
    width: 70%;
    margin-left: 70px;
    position: relative; /* Add position property */
    /* Add a higher z-index to bring it above other elements */
    z-index: 2;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title .orange {
    color: #ff5c00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 p {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group {
    display: flex;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-orange {
    width: 220px;
    max-width: 220px;
    height: 60px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-gplay {
    border: none;
    background-color: transparent;
    width: 100px;
    height: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-gplay img {
    width: 200px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-2 {
    position: relative; /* Add position property */
    z-index: 1; /* Set a lower z-index to bring it below other elements */
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-2 img {
    width: 130%;
  }
  #modal-info .modal-body {
    display: flex;
    width: 100%;
    flex-direction: unset;
    padding: 20px 16px;
    align-items: flex-start;
    gap: 24px;
  }
  #modal-info .modal-body .column-1 img {
    width: 100%;
  }
  #modal-info .modal-body .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    align-self: stretch;
  }
  #modal-info .modal-body .column-2 span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #modal-info .modal-body .column-2 h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 125% */
  }
  #modal-info .modal-body .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 150% */
    text-align: justify;
  }
  footer {
    bottom: 0;
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .callout {
    border-radius: 0.5rem;
    background-color: #fff;
    border-left: 8px solid #e9ecef;
    border-right: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 5px;
    font-size: 16px;
    width: 100%;
  }
  .callout div span {
    width: 600px !important;
  }
  .maxcallout span {
    width: 350px;
    max-height: 55px;
  }
  .maxcallout span p:nth-of-type(2) {
    width: auto;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
  }
  .h-item {
    height: 100px;
  }
  .flex-d1 {
    max-width: 100% !important;
  }
  .choose-location {
    width: 100% !important;
  }
  #locexist {
    margin-left: 30px;
    margin-top: 12px;
    padding: 0;
  }
  #locexist li {
    display: flex;
    justify-content: start;
  }
  #locexist li::before {
    content: "•";
    font-size: 20px;
    color: black;
    margin-right: 10px;
  }
  .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  #closepopup {
    position: absolute;
    right: 10px;
    top: 10px;
    background: white;
    color: black;
    border-radius: 50%;
    padding: 1px 8px 6px 8px;
  }
  .warning-info {
    cursor: pointer;
    color: black;
    border: 1px solid #D2D2D2;
    box-shadow: none !important;
    transition: border 0.3s ease, box-shadow 0.3s ease;
  }
  .warning-info:hover {
    border: 1px solid transparent;
    box-shadow: 0px 0px 4px 0px #D90000 !important;
  }
  .content-wrapper-box {
    display: flex;
    gap: 20px;
  }
  .content-wrapper-box img {
    width: 100%;
  }
}
@media screen and (min-width: 100px) and (max-width: 820px) {
  h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  h2 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .h3-title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .h4-title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 35px */
    letter-spacing: 0.25px;
  }
  .span-dark {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-dark-reguler {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-dark-400 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-muted-14 {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .span-dark-500 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .span-highlight-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .span-highlight-warning {
    color: #ffc700 !important;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
  }
  .span-highlight-primary-14 {
    color: #12AB0F;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .btn-custom-primary {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-dis {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #949494;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-dark-success {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    border: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #004714;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-disabled {
    border-radius: 50px;
    background: #b0bec5;
    width: 100%;
    padding: 14px 24px;
    color: #fff;
    border: none;
    font-weight: 600;
  }
  .btn-custom-outline-primary {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    text-decoration: none;
  }
  .btn-custom-outline-disabled {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid #808080;
    background: #FFFFFF;
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .btn-custom-sort {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 50px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 21px */
    letter-spacing: 0.25px;
    border: none;
  }
  .btn-custom-filter {
    display: inline-flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 12px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .btnToolTip {
    position: relative;
    display: inline-block;
  }
  .btnToolTip .toolTipText {
    visibility: hidden;
    width: 600px;
    background-color: #474747;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 999;
  }
  .btnToolTip:hover .toolTipText {
    visibility: visible;
  }
  .btnToolTipSmall {
    position: relative;
    display: inline-block;
  }
  .btnToolTipSmall .toolTipTextSmall {
    visibility: hidden;
    width: 400px;
    background-color: #474747;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 999;
    right: 30px;
  }
  .btnToolTipSmall:hover .toolTipTextSmall {
    visibility: visible;
  }
  .alert-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: space-between;
    align-self: center;
    border-radius: 14px;
    background: var(--Soft-Orange, #fff7e9);
    box-shadow: 0px 0px 4px 0px #dac524;
    margin-bottom: 24px;
  }
  .alert-success {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #BFFFD5;
    margin-bottom: 24px;
  }
  .alert-soft-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #fff7e9;
    margin-bottom: 24px;
  }
  .alert-soft-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #ffe9e9;
    margin-bottom: 24px;
    width: 100%;
  }
  .alert-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    padding: 10px 20px;
    justify-content: start;
    align-self: center;
    border-radius: 14px;
    background: #ffeaea;
    margin-bottom: 24px;
  }
  .status-success {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #BFFFD5;
    color: #12AB0F;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-full-primary {
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    background: var(--Warning-Red, #ff2e00);
    color: #FFFFFF;
    width: 170px !important;
    justify-content: center;
  }
  .status-warning-primary {
    display: flex;
    padding: 8px;
    gap: 10px;
    border-radius: 50px;
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
    background: #fff7e9;
  }
  .status-danger {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-warning {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #fff7e9;
    color: #D35D08;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .status-waiting {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #D35D08;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-outline {
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-outline span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #DA2424;
    color: #FFFFFF;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
  }
  .pills-navigation-primary {
    display: inline-flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: none;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-navigation-primary span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #FFFFFF;
    color: #DA2424;
    width: 25px;
    max-width: 25px;
    max-height: 25px;
  }
  .pills-selection-outline-primary {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #FFFFFF;
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .pills-selection-primary {
    display: inline-flex;
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #DA2424;
    background: #DA2424;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .devider {
    width: 100%;
    height: 1px;
    background: #d2d2d2;
  }
  .custom-checkbox {
    position: relative;
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
    appearance: none;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.3s;
  }
  .custom-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
  }
  .custom-checkbox:checked::before {
    background-color: #04b200;
    content: "✓";
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 24px;
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
  }
  .form-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .form-group .dropdown-form-custom select {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: none;
  }
  .form-group .dropdown-form-custom select input:focus {
    border: none;
  }
  .form-group .form-input-custom-number {
    display: flex;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    padding: 8px;
    width: 100%;
  }
  .form-group .form-input-custom-number .devider-vertical {
    border: 1px #b0bec5 solid;
    margin-right: 3px;
    margin-left: 3px;
  }
  .form-group .form-input-custom-number .btn-number-select {
    border: none;
    background-color: #fff;
  }
  .form-group .form-input-custom-number input {
    border: none;
    width: 65%;
  }
  .form-group .form-input-custom-number input:focus {
    outline: none;
    width: 65%;
  }
  .form-group label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  .form-group .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  .form-group .form-input-custom-disabled {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #EBECEF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom-disabled.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-disabled input {
    width: 100%;
    border: none !important;
  }
  .form-group .form-input-custom-textarea textarea {
    border-radius: 8px;
    border: none;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .dropdown-form-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .dropdown-form-custom button {
    border: none;
    background-color: transparent;
  }
  .form-group .dropdown-form-custom .dropdown-menu li {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    border-bottom: 1px solid #D2D2D2;
  }
  .form-group .dropdown-form-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-search {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  .form-group .form-input-custom-search.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  .form-group .form-input-custom-search span {
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
    width: 100%;
  }
  .form-group table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
  }
  .form-group th,
  .form-group td {
    text-align: left;
    padding: 8px;
  }
  .form-group tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  .form-group #modalSearch .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  .form-group #modalSearch .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    justify-content: space-between;
  }
  .form-group #modalLocation .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  .form-group #modalLocation .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    justify-content: space-between;
  }
  .form-group .dropdown-location {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    width: 492px;
  }
  .form-group .dropdown-location span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .form-group .dropdown-location img {
    display: flex;
    width: 50px;
    height: 16px;
    justify-content: center;
    align-items: center;
  }
  .form-group .dropdown-location button {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border: none;
    background-color: transparent;
  }
  .form-group .dropdown-location .dropdown-menu {
    width: inherit;
    margin-top: 10px !important;
  }
  .form-group .dropdown-location .dropdown-menu .form-input-custom {
    width: 475px;
  }
  .form-group .dropdown-location .dropdown-menu li {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding: 10px;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
  }
  .form-group .dropdown-location .dropdown-menu small {
    font-size: 14px !important;
  }
  .form-group .dropdown-location .dropdown-menu .btn-custom-primary {
    display: flex;
    height: 42px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 12px;
    background: #DA2424;
    margin: 8px;
    width: 97%;
  }
  .stepper {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
  }
  .stepper .progress {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
    background-color: transparent;
    border-radius: 0px;
  }
  .stepper .progress .bar-done {
    height: 4px;
    width: 100%;
    background-color: #808080;
  }
  .stepper .progress .icons-done {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #474747;
  }
  .stepper .progress .bar {
    height: 4px;
    width: 100%;
    background-color: #DA2424;
  }
  .stepper .progress .icons {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #474747;
  }
  .stepper-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .stepper-row .progress-step {
    display: flex;
    width: fit-content;
    height: auto;
    background-color: transparent;
    gap: 8px;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .stepper-row .progress-step .bullet-done {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  .stepper-row .progress-step .bullet {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
  }
  .stepper-row .progress-step span {
    width: max-content;
  }
  .stepper-row .progress-step .devider {
    border: 1px solid rgb(184, 181, 181);
  }
  #navbar-web .navbar {
    display: flex;
    padding: 14px 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
    position: fixed;
    width: -webkit-fill-available;
    z-index: 1005;
  }
  #navbar-web .navbar .logo img {
    max-width: 165px;
  }
  #navbar-web .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-web .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-web .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-web .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-web-onboard .navbar {
    top: 0;
    left: 0;
    display: flex;
    padding: 14px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
    z-index: 0;
  }
  #navbar-web-onboard .navbar .logo img {
    max-width: 165px;
  }
  #navbar-web-onboard .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-web-onboard .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-web-onboard .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-mobile-onboard .navbar {
    top: 0;
    left: 0;
    display: flex;
    padding: 14px 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--White, #fff);
  }
  #navbar-mobile-onboard .navbar .logo img {
    max-width: 165px;
  }
  #navbar-mobile-onboard .navbar .container .item-right {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-navbar {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 90px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(75, 75, 75, 0.25);
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-navbar .bullet-alert {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 1px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #fff500 0%, #ffc700 114.58%);
    box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #DA2424;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar .text .title {
    overflow: hidden;
    color: #0F0F10;
    text-align: right;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  #navbar-mobile-onboard .navbar .container .btn-custom-user-navbar img {
    width: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #navbar-mobile {
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    width: 100%;
    z-index: 1005;
  }
  #navbar-mobile .container-fluid .navbar-brand #logo-mobile {
    width: 144px;
  }
  #navbar-mobile .container-fluid button {
    border: none;
    background-color: transparent;
  }
  #navbar-mobile .container-fluid .offcanvas {
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-header img {
    width: 144px;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    padding-left: 7px;
    border: none;
    background-color: transparent;
    text-decoration: none;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item a span {
    display: flex;
    align-items: start;
    width: 100%;
    color: #FFFFFF;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu {
    background-color: transparent;
    border: none;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu li a {
    color: #FFFFFF;
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item .dropdown-menu li a:hover {
    color: #FFFFFF;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  #navbar-mobile .container-fluid .offcanvas .offcanvas-body .item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  #navbar-mobile #navbar-location-mobile {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(84, 84, 84, 0.25);
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location {
    width: 100%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location #value-location {
    width: 100%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location .dropdown-menu .form-input-custom {
    width: 95%;
  }
  #navbar-mobile #navbar-location-mobile .dropdown-location .btn-custom-primary {
    color: #FFFFFF;
    background-color: #DA2424;
  }
  #carouselExampleDark .carousel-indicators {
    margin-left: 5%;
    justify-content: start;
    bottom: -6px;
    top: 330px;
  }
  #carouselExampleDark .carousel-indicators button {
    height: 8px;
    width: 8px;
    border-radius: 100%;
  }
  .alert-danger-border {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #DA2424;
    background: #fff4f4;
    margin-bottom: 24px;
  }
  .alert-danger-border .title {
    color: #170e2b;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  .alert-danger-border p {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  footer {
    display: flex;
    width: -webkit-fill-available;
    padding: 16px 24px;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 4px 4px 5px rgba(84, 84, 84, 0.25);
  }
  footer img {
    width: 113.714px;
    height: 12px;
    flex-shrink: 0;
  }
  footer span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .wrapper {
    transition-duration: 0.5s;
    display: flex;
  }
  .wrapper .sidebar {
    width: 220px;
    position: relative;
    left: 0px;
    top: 0px;
    background-image: url("../images/BG-side-menu.png");
    background-repeat: no-repeat;
    background-size: cover;
    white-space: nowrap;
    transition-duration: 0.5s;
    z-index: 1000;
  }
  .wrapper .sidebar .sb-item-list {
    width: 100%;
    height: 100vh;
    margin-top: 24px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .wrapper .sidebar .sb-item-list .sb-item a {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    padding-left: 7px;
    border: none;
    background-color: transparent;
    text-decoration: none;
  }
  .wrapper .sidebar .sb-item-list .sb-item a span {
    display: flex;
    align-items: start;
    width: 100%;
    color: #FFFFFF;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu {
    background-color: transparent;
    border: none;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu li a {
    color: #FFFFFF;
  }
  .wrapper .sidebar .sb-item-list .sb-item .dropdown-menu li a:hover {
    color: #FFFFFF;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  .wrapper .sidebar .sb-item-list .sb-item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
  }
  .wrapper .sidebar .logo-sidebar {
    display: flex;
    padding: 0px 10px;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
  }
  .wrapper .sidebar .logo-sidebar img {
    display: flex;
    width: 144px;
    height: 36px;
    justify-content: center;
    align-items: center;
  }
  .wrapper .sidebar .logo-sidebar #logo-web-collapse {
    display: none;
  }
  .wrapper .sidebar .logo-sidebar #svg-circle {
    cursor: pointer;
  }
  .wrapper .sidebar .logo-sidebar #btn-uncollapse {
    display: none;
  }
  .wrapper .sidebar .sb-item-list > .sb-item > .sb-text {
    position: absolute;
    transition-duration: 0.5s;
  }
  .wrapper .sidebar .sb-item.active > .sb-icon {
    margin-left: -3px;
  }
  .wrapper .sidebar .sb-icon {
    padding-left: 10px;
    padding-right: 20px;
  }
  .wrapper .sidebar .sb-item:hover,
  .wrapper .sidebar .sb-item.active {
    filter: brightness(130%);
  }
  .wrapper .sb-menu {
    position: relative;
  }
  .wrapper .sb-menu:after {
    content: " ";
    width: 0;
    height: 0;
    display: block;
    float: right;
    margin-top: 19px;
    margin-left: -12px;
    margin-right: 5px;
    border: solid 5px transparent;
    border-left-color: #eee;
  }
  .wrapper .sb-menu > .sb-submenu {
    display: none;
  }
  .wrapper .sb-menu:hover > .sb-submenu {
    position: absolute;
    display: block;
    width: 200px;
    top: 0;
    left: calc(100% + 1px);
  }
  .wrapper .sb-submenu > .sb-item:first-child {
    border-radius: 8px 8px 0px 0px;
  }
  .wrapper .sb-submenu > .sb-item:last-child {
    border-radius: 0px 0px 8px 8px;
  }
  .wrapper .btn-toggle-sidebar .sb-icon {
    padding-left: 15px;
  }
  .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
    display: inline-block;
  }
  .wrapper .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
    display: none;
  }
  .wrapper.sidebar-collapse .sidebar #btn-uncollapse {
    display: block;
  }
  .wrapper.sidebar-collapse .sidebar #btn-collapse {
    display: none;
  }
  .wrapper.sidebar-collapse .sidebar #navbar-web .navbar {
    width: 95%;
  }
  .wrapper.sidebar-collapse:not(:hover) {
    width: 80px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar {
    width: 80px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #logo-web {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #logo-web-collapse {
    display: block;
    margin-left: -10px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #btn-uncollapse {
    display: block;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar #btn-collapse {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item span {
    display: none;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-klaim {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-data {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item #dropdown-item-down-info {
    display: none !important;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item.active {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
    width: 100%;
  }
  .wrapper.sidebar-collapse:not(:hover) .sidebar .sb-item-list .sb-item .dropdown #dataClaim {
    display: none;
  }
  .wrapper.sidebar-collapse .wrapper.sidebar-collapse .sb-item-list > .sb-item > .sb-text {
    position: absolute;
    transform: translateX(-100%);
    opacity: 0;
  }
  .wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-left {
    display: none;
  }
  .wrapper.sidebar-collapse .btn-toggle-sidebar .sb-icon.fa-angle-double-right {
    display: inline-block;
  }
  .list-code .btn-select-country {
    background-color: none;
    border: none;
  }
  .list-code .list {
    display: flex;
    padding: 14px 8px;
    gap: 10px;
    align-self: stretch;
    margin-top: 16px;
    border-bottom: 1px solid #e2e2e2;
    cursor: pointer;
  }
  .list-code .list .country-name {
    width: 100%;
  }
  .list-code .aa {
    margin-top: 0 !important;
  }
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
  .shake {
    animation: shake 3.5s infinite;
  }
  @keyframes shakeAnimation {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
    100% {
      transform: translateX(5px);
    }
  }
  .button-export {
    display: none !important;
  }
  .paging_full_numbers {
    text-align: right;
    margin-top: 0px;
  }
  .foot-table {
    display: flex;
    justify-content: space-between;
  }
  .active-sub {
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 8.85%, rgba(255, 255, 255, 0) 155.82%);
    backdrop-filter: blur(7px);
    filter: brightness(130%);
    width: 85% !important;
  }
  .status-cashback {
    padding: 4px 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #e5bfff;
    color: #d119cf;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  .callout {
    border-radius: 0.5rem;
    background-color: #fff;
    border-left: 1px solid #e9ecef;
    border-right: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 5px;
    font-size: 12px;
    cursor: pointer;
    width: 30%;
    margin-right: 5px;
  }
  .callout-danger {
    border-left: 8px solid #f34a4a !important;
  }
  .callout span {
    display: inline-block;
    width: 200px;
    max-height: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .callout svg {
    place-self: center;
  }
  .callout a {
    text-decoration: none;
    color: inherit;
  }
  .callout div {
    display: flex;
    justify-content: space-between;
  }
  .callout span p:first-of-type {
    white-space: normal !important;
    word-break: break-all !important;
    margin-bottom: 0 !important;
  }
  .callout span p:nth-of-type(2) {
    width: 170px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
    margin-bottom: 0 !important;
  }
  .bodymaxcallout2 {
    display: block;
    padding-bottom: 10px;
  }
  .bodymaxcallout2 .callout {
    width: 100% !important;
    margin-bottom: 1rem;
  }
  .bodymaxcallout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .maxcallout span {
    width: 350px;
    max-height: 55px;
  }
  .maxcallout span p:nth-of-type(2) {
    width: auto;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
  }
  .row-notifications .card-notifications .body p:first-of-type {
    font-size: 20px !important;
  }
  .row-notifications .card-notifications {
    gap: 0 !important;
  }
  .h-item {
    height: 90px;
  }
  .card-location {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  .card-location img {
    width: 56px;
    height: 56px;
  }
  .card-location .card-head {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #D2D2D2;
  }
  .card-location .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .card-location .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
  }
  .card-location .descriptions .item {
    display: flex;
    gap: 80px;
  }
  .card-location .descriptions {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
  }
  .card-location .descriptions .item .span-bolder {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
  }
  .form-group .dropdown-location button {
    justify-content: space-between;
  }
  .span-highlight {
    color: #da2827;
    font-family: Inter, sans-serif;
    font-weight: 500;
    text-align: center;
    line-height: 150%;
    text-decoration: none;
  }
  .custom-checkbox {
    position: relative;
    appearance: none;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.3s;
  }
  .validation-confirmation {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  .custom-checkbox, .custom-checkbox:checked::before {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }
  .custom-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
  }
  .button-group-confirmation {
    display: flex;
    gap: 20px;
    margin-top: 20px;
  }
  .font-500-16 {
    font-size: 16px;
    font-style: normal;
  }
  .font-500-14, .font-500-16 {
    text-overflow: ellipsis;
    line-height: 160%;
    letter-spacing: 0.25px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #170e2b;
  }
  .button-group-confirmation .btn-custom-outline-primary {
    border-radius: 50px;
    border: 1px solid #da2827 !important;
    width: 50%;
    color: #da2827;
    padding: 14px 24px 40px 30px;
    font-weight: 600;
    margin-top: 0;
  }
  .button-group-confirmation .btn-custom-outline-primary:hover {
    color: #fff;
  }
  .card-alert-company {
    padding: 10px;
    gap: 19px;
    align-self: stretch;
    border-radius: 10px;
    border-left: 5px solid #62aced;
    background: #e0eefb;
  }
  .title-600-14 {
    font-size: 14px;
  }
  .title-600-16 {
    font-size: 16px;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  .price p {
    font-size: 16px !important;
  }
  .title-600-14, .title-600-16 {
    color: #170e2b;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  #info-message:empty {
    display: none;
  }
  #info-message2:empty {
    display: none;
  }
  .button-group-confirmation .btn-custom-disabled {
    border-radius: 50px;
    background: #b0bec5 !important;
    width: 100%;
    padding: 14px 24px;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    opacity: initial !important;
  }
  .button-group-confirmation .btn-custom-primary {
    border-radius: 50px;
    background: #da2827 !important;
    width: 100%;
    padding: 14px 24px;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    opacity: initial !important;
    height: auto !important;
    flex-shrink: unset !important;
  }
  input:focus-visible {
    outline: none;
  }
  ul:empty {
    display: none;
  }
  .dt-processing {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 4px 4px 3px #e0e0e0;
  }
  .dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent !important;
  }
  .dropdown-item.active, .dropdown-item:active {
    color: inherit !important;
    background-color: transparent !important;
  }
  .span-dark-reguler:empty {
    display: none;
  }
  .address-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    font-weight: 400 !important;
    display: block;
  }
  .in-btn input {
    margin-right: 10px;
  }
  .btn-n {
    background: #198754;
  }
  .location-menu {
    z-index: var(--bs-dropdown-zindex);
    display: none;
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
    font-size: var(--bs-dropdown-font-size);
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    width: auto;
    margin-top: 10px !important;
  }
  #locexist {
    margin-left: 30px;
    margin-top: 12px;
    padding: 0;
  }
  #locexist li {
    display: flex;
    justify-content: start;
  }
  #locexist li::before {
    content: "•";
    font-size: 20px;
    color: black;
    margin-right: 10px;
  }
  .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  #closepopup {
    position: absolute;
    right: 10px;
    top: 10px;
    background: white;
    color: black;
    border-radius: 50%;
    padding: 1px 8px 6px 8px;
  }
  /* skeleton */
  /* Variables */
  /* Animation */
  @-webkit-keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  @keyframes ssc-loading {
    from {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    to {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  /* Animation partial */
  .ssc-square, .ssc-head-line, .ssc-line, .ssc-hr, .ssc-circle {
    display: block;
    background-color: rgba(0, 0, 0, 0.17);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  .ssc-square:after, .ssc-head-line:after, .ssc-line:after, .ssc-hr:after, .ssc-circle:after {
    content: "";
    -webkit-animation: ssc-loading 1.3s infinite;
    animation: ssc-loading 1.3s infinite;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 1;
    background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.3), transparent);
  }
  /** Main class */
  .ssc {
    cursor: progress;
    -webkit-user-select: none;
    user-select: none;
  }
  /** Helpers classes */
  .ssc .mb {
    margin-bottom: 16px;
  }
  .ssc .mt {
    margin-top: 16px;
  }
  .ssc .mr {
    margin-right: 16px;
  }
  .ssc .ml {
    margin-left: 16px;
  }
  .ssc .mbs {
    margin-bottom: 8px;
  }
  .ssc .mts {
    margin-top: 8px;
  }
  .ssc .mrs {
    margin-right: 8px;
  }
  .ssc .mls {
    margin-left: 8px;
  }
  .ssc .w-10 {
    width: 10%;
  }
  .ssc .w-20 {
    width: 20%;
  }
  .ssc .w-30 {
    width: 30%;
  }
  .ssc .w-40 {
    width: 40%;
  }
  .ssc .w-50 {
    width: 50%;
  }
  .ssc .w-60 {
    width: 60%;
  }
  .ssc .w-70 {
    width: 70%;
  }
  .ssc .w-80 {
    width: 80%;
  }
  .ssc .w-90 {
    width: 90%;
  }
  .ssc .w-100 {
    width: 100%;
  }
  .ssc .flex {
    display: flex;
  }
  .ssc .inline-flex {
    display: inline-flex;
  }
  .ssc .flex-column {
    flex-direction: column;
  }
  .ssc .flex-column-reverse {
    flex-direction: column-reverse;
  }
  .ssc .flex-row {
    flex-direction: row;
  }
  .ssc .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .ssc .align-center {
    align-items: center;
  }
  .ssc .align-start {
    align-items: flex-start;
  }
  .ssc .align-end {
    align-items: flex-end;
  }
  .ssc .align-stretch {
    align-items: stretch;
  }
  .ssc .justify-start {
    justify-content: start;
  }
  .ssc .justify-center {
    justify-content: center;
  }
  .ssc .justify-end {
    justify-content: end;
  }
  .ssc .justify-between {
    justify-content: space-between;
  }
  .ssc .justify-around {
    justify-content: space-around;
  }
  /** Wrapper class */
  .ssc-wrapper {
    padding: 16px;
  }
  /* Figures, Objects */
  .ssc-card {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17);
    background-color: #ffffff;
  }
  .ssc-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  .ssc-hr {
    width: 100%;
    height: 2px;
  }
  .ssc-line {
    border-radius: 15px;
    width: 100%;
    height: 12px;
  }
  .ssc-head-line {
    border-radius: 15px;
    width: 100%;
    height: 24px;
  }
  .ssc-square {
    width: 100%;
    height: 150px;
  }
  .flex-d {
    width: 100% !important;
  }
  body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  body #navbar-web-onboard {
    display: none;
  }
  body #navbar-web-onboard .form-group {
    display: none;
  }
  body #navbar-mobile-onboard {
    display: block;
  }
  body #navbar-mobile-onboard .form-group .dropdown-location {
    width: 440px;
  }
  body #navbar-mobile-onboard .form-group .dropdown-location .dropdown-menu .form-input-custom {
    width: 95%;
  }
  body #navbar-mobile-onboard .form-group .dropdown-location #value-location {
    width: 100%;
  }
  body .flex-onboarding {
    display: flex;
    align-items: center;
  }
  body .flex-onboarding .container-onboarding {
    background-image: url("../images/bg-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    display: flex;
    align-items: baseline;
  }
  body .flex-onboarding .container-onboarding .row-onboarding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 8px;
    margin-top: 24px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 {
    display: flex;
    align-items: center;
    padding: 24px !important;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 img {
    max-width: 300px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .title-step-5 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .title-step-5 h1 {
    color: #D35D08;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: 0.25px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .image-embed {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .image-embed img {
    width: 120%;
    height: auto;
    filter: grayscale(30%);
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-1 .image-embed .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: transparent;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    align-self: center;
    width: 500px;
    padding: 24px;
    margin-bottom: 100px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-primary {
    height: 58px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-outline-primary {
    height: 58px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description .title-step-5 {
    align-self: stretch;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description .title-step-5 .black {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
    text-transform: capitalize;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description .title-step-5 .orange {
    color: #d35d08;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 50.4px */
    letter-spacing: 0.25px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .description p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-primary {
    border-radius: 50px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group {
    width: 100%;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group label {
    color: #0F0F10;
    font-family: "Inter", sans-serif !important;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group span {
    color: #474747;
    font-family: "Inter", sans-serif !important;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .form-group .span-highlight-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 18.2px */
    letter-spacing: 0.033px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .button-apps button {
    border: none;
    background-color: transparent;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .stepper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .stepper .step-fill {
    width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body .flex-onboarding .container-onboarding .row-onboarding .column-2 .stepper .step {
    width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper {
    display: flex;
    width: 100%;
  }
  body #wrapper #sidebar-web {
    display: none;
  }
  body #wrapper #content-wrapper {
    width: 100%;
    overflow-x: hidden;
    background: rgb(249, 244, 244);
  }
  body #wrapper #content-wrapper #navbar-web {
    display: none;
  }
  body #wrapper #content-wrapper #navbar-mobile {
    display: block;
  }
  body #wrapper #content-wrapper #navbar-mobile #navbar-location-mobile .container-fluid .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container {
    margin-left: 0px;
    width: 390px;
    max-width: 820px;
  }
  body #wrapper #content-wrapper .container .card {
    width: 100%;
    margin-top: 24px;
    border-radius: 16px;
  }
  body #wrapper #content-wrapper .container .card .card-img-top {
    border-radius: 16px 16px 0px 0px;
    height: 10% !important;
  }
  body #wrapper #content-wrapper .container .card .profile {
    position: absolute;
    left: 20px;
    top: 20px;
  }
  body #wrapper #content-wrapper .container .card .profile img {
    width: 70px;
    height: 70px;
  }
  body #wrapper #content-wrapper .container .card .card-body {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    flex-direction: column;
    margin-top: 14px;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
    margin-top: 10px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-1 span {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid #D35D08;
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #D35D08;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .card .card-body .column-2 .span-highlight-dark-primary {
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container #spinner-loading {
    position: fixed;
    right: 0px;
    left: 0px;
    top: 0px;
    z-index: 1000;
    background-color: rgba(71, 71, 71, 0.4392156863);
    height: 100%;
  }
  body #wrapper #content-wrapper .container #spinner-loading .spinner-border {
    position: fixed;
    right: 200px;
    left: 400px;
    top: 350px;
    z-index: 1001;
  }
  body #wrapper #content-wrapper .container .main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    width: 100%;
    margin-top: 150px;
    padding-bottom: 100px;
  }
  body #wrapper #content-wrapper .container .main .breadcumb {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .title-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    margin-bottom: 16px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main .title-detail button {
    border: none;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .main .indicator-form {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    margin-left: 10px;
    flex-wrap: wrap;
  }
  body #wrapper #content-wrapper .container .main .indicator-form .list {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .indicator-form .list .number-fill {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .indicator-form .list .number {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content {
    width: 100%;
    max-width: 100%;
    height: fit-content;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    align-self: stretch;
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step-fill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step-fill .bar-fill {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step-fill .title-fill {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step .bar {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step .bar-done {
    height: 4px;
    align-self: stretch;
    border-radius: 100px;
    background: #808080;
  }
  body #wrapper #content-wrapper .container .main .main-content .stepper .step .title {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 14px;
    border: 1.4px solid #DA2424;
    background: #FFFFFF;
    justify-content: space-between;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content {
    display: flex;
    gap: 24px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content img {
    width: 177px;
    max-width: 177px;
    height: 100px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content .description h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items .content .description span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations .card-items a {
    border: none;
    background: transparent;
    float: right;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .stepper-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .stepper-row .progress-step {
    display: flex;
    width: fit-content;
    height: auto;
    background-color: transparent;
    gap: 10px;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .stepper-row .progress-step .bullet-done {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .stepper-row .progress-step .bullet {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #FFE9E9;
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .stepper-row .progress-step span {
    width: max-content;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .stepper-row .progress-step .devider {
    border: 1px solid rgb(184, 181, 181);
    grid-column: span 2; /* Span the entire row to create a divider effect */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e1e1e1;
    background: #fff;
    padding: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp .head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp .head .title-head-pjsp {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp.disabled {
    background-color: #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check {
    width: 100%;
    border-radius: 12px;
    padding: 14px;
    background-color: #f2fff4;
    border: 1px solid #047d10;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check .head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check .head .title-head-pjsp {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-list-pjsp-check .custom-checkbox-2 {
    width: 24px;
    max-width: 24px;
    height: 24px;
    max-height: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-va {
    background-color: #f8f8f8;
    border-radius: 14px;
    display: flex;
    width: 48px;
    height: 48px;
    padding: 0px 9px;
    justify-content: center;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-va img {
    width: -webkit-fill-available;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero {
    margin-top: 36px;
    text-align: center;
    background: transparent;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .img-fluid {
    width: 20%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .title-mixed {
    display: flex;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .info-user-checkout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .info-user-checkout .info-user {
    color: #170e2b;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero h3 {
    color: #da2827;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 24px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 136%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero p {
    color: #170e2b;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #hero .register-yet {
    color: #5f6368;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .alert {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .alert .alert-warning-payments {
    padding: 15px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: 24px !important;
    background: #fff9da !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .button-group-tutorial .btn-custom-outline-primary {
    width: fit-content;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-custom-outline-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #form-card-waiting {
    margin-top: -64px;
    display: flex;
    /* width: 320px; */
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #form-card-waiting h3 {
    color: #170e2b;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .span-danger-bolder {
    color: #DA2424;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay {
    width: -webkit-fill-available !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-total {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-green {
    color: #12AB0F;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-warning {
    color: #da4303;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-pay .span-danger {
    color: #a12222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-verify {
    display: flex;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-verify .btn-custom-primary {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion {
    --bs-accordion-bg: transparent !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .barcode-reload {
    position: relative;
    display: flex; /* Membuat container sesuai dengan ukuran gambar */
    align-items: center;
    width: 70%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .barcode-reload::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.767);
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Menjadikan elemen anak di dalamnya menjadi kolom */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .img-qris {
    display: block;
    margin: auto;
    height: auto;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .center-content {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-in-layer {
    position: absolute;
    top: 50%;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 15%;
    border-radius: 8px;
    font-size: 13px;
    background-color: #a12222;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .span-in-layer {
    position: absolute;
    top: 40%;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 15%;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-group-tutorial {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-bottom: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-group-tutorial button {
    height: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-item {
    border: none !important;
    background-color: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .badge-group {
    display: flex;
    padding: 0px 15px;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .badge-group .badge-accordion {
    width: fit-content;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px 8px 0px 0px;
    background: #00b512;
    color: #fff;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-accordion-payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .button-accordion-payment .title-icon {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button {
    display: block !important;
    height: 64px !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button:not(.collapsed) {
    border-radius: 20px !important;
    border: 1.4px solid #7cb342 !important;
    background-color: #f9fff9 !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button {
    margin-bottom: 16px;
    border-radius: 20px !important;
    border: 1.4px solid #d7d7d7 !important;
    background: #fff !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris #accordionQris .accordion-button::after {
    display: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .list-bank {
    display: flex;
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 16px;
    padding-top: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .list-bank .image-bank {
    align-self: center;
    margin-left: auto;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-pay-ovo {
    width: 50%;
    margin-top: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-custom-next-ovo {
    margin-top: 20px;
    width: 100%;
    display: flex;
    padding: 8px 12px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #da2827;
    color: #da2827;
    background: #fff;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .card-form {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .tac {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .tac .form-group {
    width: 8%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .btn-custom-primary {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-form-add-qris .skema {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .h3-title {
    font-size: 19px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list {
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .title {
    display: flex;
    align-items: center;
    gap: 17px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .title img {
    width: 36px;
    height: 36px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .title .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification .list .list-data .btn-edit {
    border: none;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .header img {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .form-otp {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .form-otp .form-group .form-input-custom {
    width: 40px;
    height: 40px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .countdown {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-email .edit-email {
    display: flex;
    width: 320px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-completeness-data .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .description .status {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .description .status .status-warning {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-rekening .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description .status {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description .status .status-warning {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .description .status .status-danger {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-documents .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .header {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--Medium-Gray, #d2d2d2);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description .status {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description .status .status-warning {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .description .status .status-danger {
    font-size: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 .h3-title {
    font-size: 19px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-nmid .content .column-2 img {
    width: 110px;
    height: auto;
    object-fit: cover;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 25px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 16px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head img {
    width: 56px;
    height: 56px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .card-head .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item {
    display: flex;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    width: 128px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item .span-bolder {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-card-locations-all .card-item .descriptions .item .span-primary {
    color: #FF2E00;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-nmid-home {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-nmid-home .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-nmid-home .btn-custom-primary {
    margin-top: 16px;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income {
    border-radius: 14px;
    background: linear-gradient(73deg, #940101 1.35%, #e04646 100%);
    box-shadow: 0px 40px 50px -50px #f2533f;
    color: #FFFFFF;
    flex: 1 0 0;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description .price .income-price {
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .body .description img {
    width: 61px;
    height: 60px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid #808080;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-income .footer:hover {
    background-color: #a12222;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement {
    margin-top: 24px;
    border-radius: 14px;
    border-radius: 14px;
    background: radial-gradient(189.15% 136.66% at 98.69% 3.12%, #ffa755 0%, #ce6f00 100%);
    box-shadow: 0px 40px 50px -50px #cf7002;
    color: #FFFFFF;
    flex: 1 0 0;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body .head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .body .description .settlement-price {
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid #808080;
    cursor: pointer;
    text-decoration: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-settlement .footer:hover {
    background-color: #D35D08;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help {
    border-radius: 14px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    flex: 1 0 0;
    margin-top: 24px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    padding: 20px;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .body .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    gap: 14px;
    padding: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .body .description .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .footer {
    display: flex;
    margin-top: 12px;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    cursor: pointer;
    color: #DA2424;
    font-weight: 600;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-home .card-help .footer:hover {
    background-color: #FFE9E9;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .filters {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d2d2d2;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .filters .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .filters .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 34px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    align-self: stretch;
    flex-direction: row;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort .dropdown button {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .sort .dropdown .dropdown-menu li .dropdown-item {
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .dropdown button {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    color: #0F0F10;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .dropdown .dropdown-menu {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head .dropdown .dropdown-menu li .dropdown-item {
    color: #0F0F10;
    text-align: start;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .head a {
    color: #DA2424;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .table-responsive {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .table tbody tr td {
    border-bottom: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table .pages {
    display: flex;
    gap: 24px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table .pages span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .pagination-table a {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.25px;
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .empty-table {
    display: flex;
    height: 216px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .empty-table img {
    width: 73px;
    height: 73px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-table-history .empty-table span {
    color: #808080;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .row-modal-settlement {
    display: flex;
    width: 100%;
    padding: 20px 16px;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper {
    display: flex;
    padding-left: 14px;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper .step-fill {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #da2424;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSettlement .modal-body #carouselMekanismeSettlement .stepper .step {
    width: 8px;
    max-width: 8px;
    height: 8px;
    background-color: #fbbfbf;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalProvinsi .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalBank .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKota .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKecamatan .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .list-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .list-data .data {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    height: 42px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-bottom: 1px solid #D2D2D2;
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .form-input-custom {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .form-input-custom.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalKelurahan .form-input-custom input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh {
    display: flex;
    width: 100%;
    height: 460px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh img {
    width: 250px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh h3 {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh p {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-group-unduh-qris .card-unduh .btn-custom-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction {
    display: flex;
    justify-content: space-between;
    align-items: start;
    align-self: stretch;
    margin-top: 24px;
    gap: 16px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction a {
    color: #DA2424;
    text-align: right;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .head-info-transaction h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement {
    display: flex;
    padding: 20px;
    align-items: flex-start;
    gap: 24px;
    margin-top: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--White, #fff);
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-1 .item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-1 .item span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-2 .item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .column-2 .item span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-rincian-settlement .devider {
    width: 1px;
    height: 132px;
    background: #d2d2d2;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 24px;
    gap: 16px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    overflow: scroll;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary.clicked {
    color: #FFFFFF;
    background-color: #DA2424 !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-1 .btn-custom-outline-primary.clicked span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: var(--White, #fff);
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content .tabs-klaim-user .column-2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .head {
    display: flex;
    padding-bottom: 8px;
    justify-content: space-between;
    flex-direction: column;
    align-self: stretch;
    border-bottom: 1px solid #e6edff;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .head .column-1 h3 {
    color: #1a1616;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .head .column-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-1 {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-1 .item {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-1 .item span {
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item span {
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-waiting {
    width: 60%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-warning {
    width: 60%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-danger {
    width: 60%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .body .column-2 .item .status-success {
    width: 60%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-klaim-user .btn-custom-primary {
    margin-top: 36px;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-cari-klaim {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    padding: 20px;
    margin-top: 24px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-cari-klaim .form-group {
    width: 100% !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-cari-klaim .btn-custom-primary {
    width: 100%;
    border-radius: 50px;
    transition: background-color 0.3s;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-klaim {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-klaim .item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-klaim .item .align-items-center {
    flex-direction: column;
    gap: 6px;
    align-items: start !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-klaim .item span {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas .item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-aktivitas .item .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .document-images {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 14px;
    margin-bottom: 24px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .document-images .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .document-images .btn-custom-outline-primary {
    border-radius: 50px;
    flex-direction: row;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .btn-custom-primary {
    border-radius: 50px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .btn-custom-outline-primary {
    flex-direction: column;
    height: auto;
    padding: 14px;
    align-items: start;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan .btn-custom-outline-primary span {
    text-align: left;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-tanggapan #decline .form-group .form-input-custom-textarea textarea {
    width: 86%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-akun-pengajuan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-akun-pengajuan h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-akun-pengajuan .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .dropdown-form-custom button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .dropdown-form-custom button span {
    text-align: start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .form-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-pengajuan .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-1 .data {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-1 .data span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-2 .data {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .row-data .column-2 .data span {
    width: 230px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .btn-custom-primary {
    border-radius: 50px;
    margin-top: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .btn-custom-disabled {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .btn-custom-dark-primary {
    display: flex;
    height: 48px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    background: var(--Linear-Primary-Radial, radial-gradient(189.15% 136.66% at 98.69% 3.12%, #d12f2f 0%, #940101 100%));
    border: none;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .alert-soft-warning {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-detail-address .alert-danger {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data {
    display: flex;
    padding: 20px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    gap: 14px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .head .date {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .alert-soft-warning {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .alert-danger {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .label {
    display: flex;
    padding: 10px 10px;
    align-items: center;
    align-self: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 4px;
    background: #EBECEF;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .label h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin: 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-1 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-1 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-2 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data .card-data .list .column-2 h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-riwayat-data a {
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .dropdown-form-custom button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .dropdown-form-custom button span {
    text-align: start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .form-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address img {
    width: 100% !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done .header img {
    width: 100px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-verification-done .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row {
    display: flex;
    padding: 20px 16px;
    align-items: center;
    flex-direction: column !important;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-1 img {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .head h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item .number {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0px 9px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #DA2424;
    color: #FFFFFF;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .list .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .btn-groups {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalInformasi .modal-content .modal-body .flex-row .column-2 .btn-groups .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-choice {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-choice .btn-custom-outline-primary {
    width: 100%;
    height: 100%;
    padding: 14px;
    display: flex;
    justify-content: flex-start;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .head span {
    color: var(--Dark-Gray, #474747);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .head h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .body p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  body #wrapper #content-wrapper .container .main .main-content .row-notifications .card-notifications .footer span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant .description .item {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-merchant .description .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles {
    display: flex;
    padding: 8px 0px;
    align-items: center;
    gap: 14px;
    align-self: stretch;
    border-bottom: 1px solid var(--Soft-Grey, #ededed);
    background: #FFFFFF;
    cursor: pointer;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles img {
    display: flex;
    width: 48px;
    height: 48px;
    padding: 0px 6px 6px 0px;
    align-items: center;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .head span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .body .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .card-profiles .description .body .badge-warning {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Orange, #d35d08);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #d35d08;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .list-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .list-more span {
    color: #DA2424;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-employes .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening .description .item {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-data-rekening .description .item span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    width: 300px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body {
    padding: 0;
    border: none;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .head img {
    border-radius: 8px 8px 0px 0px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .btn-close {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50px;
    background: var(--Dark-Gray, #474747);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .img-profile {
    position: absolute;
    left: 150px;
    right: 200px;
    top: 25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .img-profile img {
    width: 84px;
    height: 84px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body {
    padding: 20px;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .title h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .title .badge-warning {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Orange, #d35d08);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #d35d08;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .contact span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .devider {
    border: 1px solid #EBECEF;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .location h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .location ul {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .btn-group .btn-light {
    border: none;
    background: transparent;
    color: #FF2E00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfile .modal-content .modal-body .body .btn-group .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body {
    padding: 0;
    border: none;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .head img {
    border-radius: 8px 8px 0px 0px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .btn-close {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50px;
    background: var(--Dark-Gray, #474747);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .img-profile {
    position: absolute;
    left: 150px;
    right: 200px;
    top: 25px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .img-profile img {
    width: 84px;
    height: 84px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body {
    padding: 20px;
    margin-top: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .title .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
    color: #474747;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .contact span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .devider {
    border: 1px solid #EBECEF;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .location ul {
    text-align: center;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group .btn-light {
    border: none;
    background: transparent;
    color: #FF2E00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalShowProfileEmploye .modal-content .modal-body .body .btn-group .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .form .form-group {
    margin-bottom: 16px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary.clicked {
    color: #FFFFFF;
    background-color: #DA2424 !important;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .select-button .btn-group .btn-custom-outline-primary.clicked span {
    display: flex;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 30px;
    border-radius: 60px;
    background: var(--White, #fff);
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-owner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-owner h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-employe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .role-employe h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .location-merchant {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .location-merchant h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .location-merchant .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .employe-picture label {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .employe-picture .image {
    display: flex;
    width: 160px;
    height: 160px;
    padding: 42px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .verification {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .verification h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-profile-form .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body {
    display: flex;
    padding: 20px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body .icons {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body h4 {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 136.364% */
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body p {
    color: #0F0F10;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #addEmploye .modal-content .modal-body .btn-group button {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address-now {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address-now h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-form-address-now .form-group {
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-kontak {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-kontak span {
    font-size: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-kontak .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-kontak .btn-custom-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-data-qris {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content .card-data-qris h4 {
    color: #0F0F10;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .main-content .card-data-qris span {
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation {
    padding: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search {
    display: flex;
    width: 100%;
    height: 42px;
    padding: 10px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search.error {
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px #DA2424;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search span {
    color: #808080;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.038px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-input-custom-search input {
    width: 100%;
    border: none !important;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalLocation .modal-body .form-check {
    padding: 16px;
    border-bottom: 1px solid #D2D2D2;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-header .modal-title {
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 136.364% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(70, 70, 70, 0.24);
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head h4 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px; /* 144.444% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head .description .item {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .card-head .description .item .title {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .description-body {
    margin-top: 20px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .description-body p {
    color: var(--Black, #0f0f10);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .description-body p span {
    color: var(--Warning-Red, #ff2e00);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .btn-group {
    display: flex;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container .main .main-content #modalSetuju .modal-body .btn-group .btn-custom-outline-primary {
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .progress {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background-color: transparent;
  }
  body #wrapper #content-wrapper .container .main .progress #carouselExampleDark .carousel-indicators {
    margin-left: 5%;
    justify-content: start;
    bottom: -6px;
    top: 277px;
  }
  body #wrapper #content-wrapper .container .main .progress #carouselExampleDark .carousel-indicators button {
    height: 8px;
    width: 8px;
    border-radius: 100%;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list .list-progress {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list .list-progress .data-progress {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container .main .progress .card-progress .list .list-progress .data-progress p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.035px;
    margin-bottom: 0;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration {
    display: flex;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(230, 237, 255, 0);
    margin-top: -35px;
    border-radius: 0px 0px 14px 14px;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration .span-highlight-primary {
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration .btn-detail {
    border: none;
    background: transparent;
  }
  body #wrapper #content-wrapper .container .main .progress .detail-registration:hover {
    background-color: #FFE9E9;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    flex: 1 0 0;
    align-self: stretch;
    background: #fff;
    border-radius: 14px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help .detail-qris {
    display: flex;
    padding-top: 32px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help .detail-qris .span-highlight-primary {
    color: #DA2424;
  }
  body #wrapper #content-wrapper .container .main .progress .card-help .detail-qris .btn-detail {
    border: none;
    background: transparent;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .image-embed {
    position: relative;
    width: 100%;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .image-embed img {
    width: 100%;
    height: auto;
    filter: grayscale(30%);
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .image-embed .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border-radius: 50px;
    background: rgba(151, 151, 151, 0.81);
    width: 44px;
    height: 44px;
    padding-top: 8px;
    padding-left: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .btn-custom-primary {
    width: 100%;
    border-radius: 50px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .link {
    display: flex;
    height: 42px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress .card-bonus .link a {
    color: #DA2424;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-decoration: none;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home {
    display: flex;
    width: 100%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 40px 50px -50px rgba(0, 0, 0, 0.25);
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home span {
    color: #474747;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home h3 {
    color: #0F0F10;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home .stepper {
    display: flex;
    padding-top: 14px;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home .stepper .step-fill {
    width: 8px;
    height: 8px;
    background-color: #0F0F10;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress .card-info-home .stepper .step {
    width: 8px;
    height: 8px;
    background-color: #d9d9d9;
    border-radius: 10px;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-header h1 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-body {
    display: flex;
    height: 421px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-body .list {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container .main .progress #modalDetail .modal-body .list .descriptions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus {
    margin-left: 0px;
    width: 390px;
    max-width: 820px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus {
    width: 100%;
    max-width: 100%;
    height: fit-content;
    padding-bottom: 80px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus .btn-custom-orange {
    display: flex;
    padding: 20px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    background: #ff5c00;
    border: none;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 120% */
    letter-spacing: 0.28px;
    text-transform: uppercase;
    height: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus .sub-title {
    color: #d87400;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    text-transform: uppercase;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: column;
    margin-top: 100px;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .btn-custom-scroll {
    display: none;
    padding: 14px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    left: 200px;
    top: 900px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.09), 0px 6px 4px 0px rgba(0, 0, 0, 0.05), 0px 11px 4px 0px rgba(0, 0, 0, 0.01), 0px 17px 5px 0px rgba(0, 0, 0, 0);
    border: none;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .sub-title {
    color: #d87400;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 52px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-1 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #hero .column-2 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: column;
    margin-top: 56px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .title .orange {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 p {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item img {
    width: 12%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #solution .column-2 .item-row .item .description .count {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 30px */
    letter-spacing: 2px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why {
    width: 100%;
    margin-top: -90px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg {
    background-image: url("../../assets/images/bonus/bg-plane.png") !important;
    height: max-content;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 0px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .sub-title {
    margin-top: 150px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title {
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title .dark {
    color: #222;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .title-content .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title {
    align-self: stretch;
    margin: 0;
    width: 90%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .payment .column-2 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 90%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: column-reverse;
    margin-top: -30px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-2 img {
    width: 90%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .img-logo {
    margin-top: 40px;
    width: 40%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title {
    align-self: stretch;
    margin: 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 90%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col .item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .self-order .column-1 .checklist .col .item span {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-1 {
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-1 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .img-logo {
    margin-top: 40px;
    width: 20%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title {
    align-self: stretch;
    margin: 0;
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .title .green {
    color: #00b14f;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .grab .column-2 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future {
    display: flex;
    padding: 54px 48px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    flex-direction: column-reverse;
    margin-top: -50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-2 img {
    width: 100%;
    height: auto;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: flex-start;
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 img {
    width: 15%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title {
    align-self: stretch;
    margin: 0;
    width: 80%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #why .bg .future .column-1 .p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: 0.25px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner {
    display: flex;
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .title {
    align-self: stretch;
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 52px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .row-mitra {
    display: flex;
    padding: 20px;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 32px;
    align-self: stretch;
    flex-wrap: wrap;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #partner .row-mitra img {
    width: 96px;
    height: 96px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 54px 48px;
    margin-top: -20px;
    flex-direction: column;
    gap: 24px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-1 {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-1 img {
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 .title {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #aktivitas .column-2 .btn-custom-orange {
    width: fit-content;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 68px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title {
    align-self: stretch;
    text-align: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .title-content .title .orange {
    color: #ff5c00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 46.8px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 36px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 350px;
    max-width: 350px;
    height: 480px;
    max-height: 480px;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 12px;
    background: linear-gradient(160deg, #fff -14.96%, #fffbf0 108.26%);
    box-shadow: 0px 20px 40px -20px rgba(68, 68, 68, 0.2);
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-1 {
    width: 20%;
    display: flex;
    justify-content: center;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-1 img {
    width: 60%;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .head .column-2 .name {
    color: #444;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.1px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .rating {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title .dark {
    color: #444;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 136%; /* 27.2px */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .title .orange {
    color: #ff5c00;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 136%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos .btn-custom-play {
    display: flex;
    width: 28px;
    height: 58px;
    padding: 20px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0px 4px 20px 4px rgba(237, 108, 48, 0.2);
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #testi .row-testi .item .see-videos span {
    color: #dd6407;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 104px;
    padding-left: 34px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    justify-content: center;
    align-self: center;
    width: 100%;
    position: relative; /* Add position property */
    /* Add a higher z-index to bring it above other elements */
    z-index: 2;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title {
    align-self: stretch;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title .dark {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .title .orange {
    color: #ff5c00;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 p {
    color: #222;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.5px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group {
    display: flex;
    gap: 16px;
    flex-direction: column;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-orange {
    width: 220px;
    max-width: 220px;
    height: 60px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-gplay {
    border: none;
    background-color: transparent;
    width: 100px;
    height: 50px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-1 .btn-group .btn-custom-gplay img {
    width: 200px;
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-2 {
    position: relative; /* Add position property */
    z-index: 1; /* Set a lower z-index to bring it below other elements */
  }
  body #wrapper #content-wrapper .container-bonus .main-content-bonus #footer .column-2 img {
    width: 130%;
  }
  #modal-info .modal-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 20px 16px;
    align-items: flex-start;
    gap: 0px;
  }
  #modal-info .modal-body .column-1 img {
    width: 100%;
    display: none;
  }
  #modal-info .modal-body .column-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    align-self: stretch;
  }
  #modal-info .modal-body .column-2 span {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  #modal-info .modal-body .column-2 h3 {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 125% */
  }
  #modal-info .modal-body .column-2 p {
    color: #0F0F10;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 150% */
  }
  footer {
    bottom: 0;
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .callout {
    border-radius: 0.5rem;
    background-color: #fff;
    border-left: 8px solid #e9ecef;
    border-right: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 5px;
    font-size: 14px;
  }
  .callout div span {
    width: 250px !important;
  }
  .maxcallout {
    width: 100%;
  }
  .maxcallout span {
    width: 350px;
    max-height: 60px;
  }
  .maxcallout span p:nth-of-type(2) {
    width: auto;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word !important;
  }
  .h-item {
    height: 90px;
  }
  .bg-all-box-img {
    height: 380px !important;
  }
  .in-btn {
    display: unset !important;
  }
  .in-btn input {
    margin-right: 0;
    margin-top: 10px;
    width: 100%;
  }
  .flex-d1 {
    max-width: 100% !important;
    width: 100% !important;
  }
  .choose-location {
    width: 100% !important;
  }
  #locexist {
    margin-left: 30px;
    margin-top: 12px;
    padding: 0;
  }
  #locexist li {
    display: flex;
    justify-content: start;
  }
  #locexist li::before {
    content: "•";
    font-size: 20px;
    color: black;
    margin-right: 10px;
  }
  .badge-muted {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid var(--Dark-Gray, #474747);
    box-shadow: 0px -3px 4px 0px rgba(255, 255, 255, 0.25) inset;
  }
  #svgmyprofit {
    width: 50%;
  }
  #psmyprofit {
    width: 60%;
  }
  #closepopup {
    position: absolute;
    right: 10px;
    top: 10px;
    background: white;
    color: black;
    border-radius: 50%;
    padding: 1px 8px 6px 8px;
  }
  .warning-info {
    cursor: pointer;
    color: black;
    border: 1px solid #D2D2D2;
    box-shadow: none !important;
    transition: border 0.3s ease, box-shadow 0.3s ease;
  }
  .warning-info:hover {
    border: 1px solid transparent;
    box-shadow: 0px 0px 4px 0px #D90000 !important;
  }
  .content-wrapper-box {
    text-align: center;
  }
  .content-wrapper-box img {
    width: 100%;
    margin-bottom: 10px;
  }
}

/*# sourceMappingURL=style.css.map */