@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap);
.row {
  margin-right: -4px;
  margin-left: -4px;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  padding-right: 4px;
  padding-left: 4px;
}

:root {
  --rsbs-max-w: 375px;
  --rsbs-ml: auto;
  --rsbs-mr: auto;
  --rsbs-overlay-h: 50vh !important;
}

.design_component {
  font-family: "Mulish", sans-serif;
}

.visibility-hidden {
  visibility: hidden !important;
}

.d-flex {
  display: flex !important;
}

.d-none {
  display: none !important;
}

.bg-primary {
  background-color: #1e82c5 !important;
}

.bg-secondary {
  background-color: #5eb6de !important;
}

.bg-success {
  background-color: #00cbb3 !important;
}

.bg-warning {
  background-color: #f2bd19 !important;
}

.bg-danger {
  background-color: #eb5757 !important;
}

.bg-light {
  background-color: #f7f7f7 !important;
}

.bg-white {
  background-color: #fff !important;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.line-clamp-4 {
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.text-primary,
a.text-primary:hover,
a.text-primary:focus {
  color: #1e82c5 !important;
}

.text-secondary,
a.text-secondary:hover,
a.text-secondary:focus {
  color: #5eb6de !important;
}

.text-warning,
a.text-warning:hover,
a.text-warning:focus {
  color: #f2bd19 !important;
}

.text-success,
a.text-success:hover,
a.text-success:focus {
  color: #00cbb3 !important;
}

.text-danger,
a.text-danger:hover,
a.text-danger:focus {
  color: #eb5757 !important;
}

.text-gray,
a.text-gray:hover,
a.text-gray:focus {
  color: #ababab !important;
}

.text-light,
a.text-light:hover,
a.text-light:focus {
  color: #f7f7f7 !important;
}

.text-white,
a.text-white:hover,
a.text-white:focus {
  color: #ffffff !important;
}

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

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

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

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

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

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

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

.fs-1,
.fs-2,
.fs-3,
.fs-4,
.fs-5 {
  line-height: 1.255em !important;
}

.fs-1 {
  font-size: 1.5rem !important;
}

.fs-2 {
  font-size: 1.375rem !important;
}

.fs-3 {
  font-size: 1.25rem !important;
}

.fs-4 {
  font-size: 1.125rem !important;
}

.fs-5 {
  font-size: 1rem !important;
}

.fs-6 {
  font-size: 0.875rem !important;
}

.fs-7 {
  font-size: 0.75rem !important;
}

.fs-8 {
  font-size: 0.625rem !important;
}

.fc-black,
a.fc-black:hover,
a.fc-black:focus {
  color: #071d2c !important;
}

.fc-gray,
a.fc-gray:hover,
a.fc-gray:focus {
  color: #5d5c5d !important;
}

.fc-gray2,
a.fc-gray2:hover,
a.fc-gray2:focus {
  color: #bebebe !important;
}

.fc-primary,
a.fc-primary:hover,
a.fc-primary:focus {
  color: #373737 !important;
}

.fc-secondary,
a.fc-secondary:hover,
a.fc-secondary:focus {
  color: #5d5c5d !important;
}

.fc-disabled,
a.fc-disabled:hover,
a.fc-disabled:focus {
  color: #bebebe !important;
}

.fc-placeholder,
a.fc-placeholder:hover,
a.fc-placeholder:focus {
  color: #bebebe !important;
}

.fc-title,
a.fc-title:hover,
a.fc-title:focus {
  color: #020406 !important;
}

.fc-paragraph,
a.fc-paragraph:hover,
a.fc-paragraph:focus {
  color: #606060 !important;
}

.fc-label,
a.fc-label:hover,
a.fc-label:focus {
  color: #212121 !important;
}

.fc-dark-green,
a.fc-dark-green:hover,
a.fc-dark-green:focus {
  color: #009846 !important;
}

.text-underline {
  text-decoration: underline !important;
}

.mr-1 {
  margin-right: 0.063rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-2-3 {
  margin-bottom: 0.75rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mr-3 {
  margin-right: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.m-4-5 {
  margin: 2rem !important;
}

.mt-4-5,
.my-4-5 {
  margin-top: 2rem !important;
}

.mr-4-5,
.mx-4-5 {
  margin-right: 2rem !important;
}

.mb-4-5,
.my-4-5 {
  margin-bottom: 2rem !important;
}

.m-6 {
  margin: 4.5rem !important;
}

.mt-6,
.my-6 {
  margin-top: 4.5rem !important;
}

.mr-6,
.mx-6 {
  margin-right: 4.5rem !important;
}

.mb-6,
.my-6 {
  margin-bottom: 4.5rem !important;
}

.border-none {
  border: none !important;
}

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

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

.rounded-md-top {
  border-radius: 8px 8px 0 0 !important;
}

.rounded-md-bottom {
  border-radius: 0 0 8px 8px !important;
}

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

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

.navigation_menu {
  width: 100%;
  max-width: 324px;
  max-height: 72px;
  padding: 0.65rem 1.5rem;
  background-color: #fff;
  box-shadow: 0px 4px 10px rgba(30, 130, 197, 0.15);
  border-radius: 2.5rem;
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 100;
}
.navigation_menu .navigation {
  padding: 0.6875rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navigation_menu .navigation .iconify {
  font-size: 1.125rem;
  color: #5d5c5d;
  display: inline;
}
.navigation_menu .navigation .navigation_text {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.25em;
  color: #1e82c5;
  margin-left: 0.6875rem;
}
.navigation_menu .navigation.active {
  background-color: rgba(30, 130, 197, 0.3);
  border-radius: 1.5rem;
}
.navigation_menu .navigation.active .iconify {
  color: #1e82c5;
  display: flex;
  align-items: center;
  display: inline;
}

@media screen and (max-width: 350px) {
  .navigation_menu .navigation.active .icon::after {
    display: none;
  }
}
label {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #071d2c;
  margin-bottom: 0.5rem;
}

.form-control {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #5d5c5d;
  padding: 0.75 1rem;
  border: 1px solid #e9f4fc;
  height: 42px;
  border-radius: 8px;
  background-color: #fff;
}
.form-control:focus {
  border: 1px solid #5eb6de;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
}
.form-control::-moz-placeholder {
  color: #bebebe;
}
.form-control::placeholder {
  color: #bebebe;
}
.form-control:disabled {
  border-color: #ebeff2;
  background-color: #ebeff2;
}

.input_group {
  position: relative;
}
.input_group .icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #bebebe;
}

.input-group-custom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group-custom:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group-custom:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group-custom:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group-custom:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-custom-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  font-weight: 700;
  line-height: 150%;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #009846;
  border: 1px solid #009846;
  border-radius: 0.375rem;
}
.input-group-custom > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-custom > .form-control, .input-group-custom > .form-floating, .input-group-custom > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

textarea {
  width: 100%;
  height: 120px !important;
  padding: 0.9rem 0.7825rem;
  box-sizing: border-box;
  border: 1px solid #e9f4fc;
  border-radius: 8px;
  background-color: #fff;
  resize: none;
  font-size: 0.875rem;
  line-height: 1.255em;
}
textarea::-moz-placeholder {
  color: #bebebe;
}
textarea::placeholder {
  color: #bebebe;
}
textarea:focus {
  outline: none !important;
  border-color: #719ece;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
}
textarea:disabled {
  background-color: #ebeff2;
}

.custom_select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url("https://api.iconify.design/ri/arrow-down-s-fill.svg?color=%235D5C5D");
  background-repeat: no-repeat;
  background-position-x: calc(100% - 1rem);
  background-position-y: center;
  background-color: #fff;
}

.custom_radio {
  display: flex;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.custom_radio input {
  position: absolute;
  left: -9999px;
}
.custom_radio input:checked + span::before {
  box-shadow: inset 0 0 0 0.3em #eb5757;
}
.custom_radio span {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e9f4fc;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-left: 2rem;
  transition: 0.25s ease;
}
.custom_radio span:before {
  content: "";
  position: absolute;
  left: 0;
  background-color: #fefefe;
  display: flex;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  transition: 0.25s ease;
  box-shadow: inset 0 0 0 0.15em #c2cfe0;
}

input[type=search] {
  background-color: #ffffff;
  border: 1px solid #e9f4fc;
  border-radius: 8px;
  position: relative;
  padding: 0 1rem;
}
input[type=search] + .btn-search {
  outline: 0;
  border: 0;
  background-color: transparent;
  height: 100%;
  padding: 0.5em;
  position: absolute;
  right: 1.07rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1.3em;
  width: 1.3em;
  position: absolute;
  right: 1rem;
  background-color: gray;
  border-radius: 50%;
  background-image: url("https://api.iconify.design/bi/x.svg?color=%23fff");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type=search]:focus + .btn-search {
  right: 2.2rem;
}
input[type=search]:focus::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: all;
}

.input_provider {
  position: relative;
}
.input_provider .icon-indosat {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2.5rem;
}

.upload_container {
  background-color: #fff;
  border: 1px solid #e9f4fc;
  border-radius: 4px;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload_container .btn_upload {
  outline: none;
  border: none;
  background-color: transparent;
}
.upload_container .btn_upload .iconify {
  color: #5eb6de;
  font-size: 1.25rem;
}
.upload_container .btn_upload + p {
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.25em;
  color: #bebebe;
}

.VA_pasar input[type=radio]:checked ~ div {
  background-color: #f2bd19;
  border-color: #f2bd19;
}

.VA_ppob input[type=radio]:checked ~ div {
  background-color: #eb5757;
  border-color: #eb5757;
}

.pilihan_VA .bank_wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 4px;
       column-gap: 4px;
  row-gap: 5px;
}
.pilihan_VA .bank {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 4px;
}
.pilihan_VA .bank div {
  width: 100%;
  height: 100%;
  border: 1px solid #ebeff2;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
}
.pilihan_VA .bank .bri {
  background-image: url("/images/bank_va/bank-bri-logo.svg");
}
.pilihan_VA .bank .bni {
  background-image: url("/images/bank_va/bank-bni-logo.svg");
}
.pilihan_VA .bank .bca {
  background-image: url("/images/bank_va/bank-bca-logo.svg");
}
.pilihan_VA .bank .mandiri {
  background-image: url("/images/bank_va/bank-mandiri-logo.svg");
}
.pilihan_VA .bank .permata {
  background-image: url("/images/bank_va/bank-permata-logo.svg");
}
.pilihan_VA .bank input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.pilihan_VA .bank input[type=radio]:checked ~ div.bri {
  background-image: url("/images/bank_va/bank-bri-logo-selected.svg");
}
.pilihan_VA .bank input[type=radio]:checked ~ div.bni {
  background-image: url("/images/bank_va/bank-bni-logo-selected.svg");
}
.pilihan_VA .bank input[type=radio]:checked ~ div.bca {
  background-image: url("/images/bank_va/bank-bca-logo-selected.svg");
}
.pilihan_VA .bank input[type=radio]:checked ~ div.mandiri {
  background-image: url("/images/bank_va/bank-mandiri-logo-selected.svg");
}
.pilihan_VA .bank input[type=radio]:checked ~ div.permata {
  background-image: url("/images/bank_va/bank-permata-logo-selected.svg");
}

.btn {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25em;
  padding: 12px;
  border-radius: 12px;
}

.btn-primary {
  color: #f2f2f2;
  background-color: #1e82c5;
  border-color: #1e82c5;
}

.btn-primary:hover {
  color: #f2f2f2;
  background-color: #196ca4;
  border-color: #1e82c5;
}

.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #1e82c5;
  border-color: #1e82c5;
  box-shadow: 0 0 0 0.2rem rgba(64, 149, 206, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #0e9efd;
  border-color: #0e9efd;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #1e82c5;
  border-color: #2576ac;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(64, 149, 206, 0.5);
}

.btn-pale-white {
  color: #212121;
  background-color: #ededed;
  border-color: #ededed;
}

.btn-pale-white:hover {
  color: #212121;
  background-color: #ededed;
  border-color: #ededed;
}

.btn-pale-white:focus,
.btn-pale-white.focus {
  color: #212121;
  background-color: #ededed;
  border-color: #ededed;
  box-shadow: 0 0 0 0.2rem rgba(64, 149, 206, 0.5);
}

.btn-pale-white.disabled,
.btn-pale-white:disabled {
  color: #bebebe;
  background-color: #ededed;
  border-color: #ededed;
}

.btn-pale-white:not(:disabled):not(.disabled):active,
.btn-pale-white:not(:disabled):not(.disabled).active,
.show > .btn-pale-white.dropdown-toggle {
  color: #212121;
  background-color: #ededed;
  border-color: #ededed;
}

.btn-pale-white:not(:disabled):not(.disabled):active:focus,
.btn-pale-white:not(:disabled):not(.disabled).active:focus,
.show > .btn-pale-white.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #ededed;
}

.btn-secondary {
  color: #f2f2f2;
  background-color: #5eb6de;
  border-color: #5eb6de;
}

.btn-secondary:hover {
  color: #f2f2f2;
  background-color: #44bbf1;
  border-color: #5eb6de;
}

.btn-secondary:focus,
.btn-secondary.focus {
  color: #fff;
  background-color: #5eb6de;
  border-color: #5eb6de;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #5eb6de;
  border-color: #5eb6de;
}

.btn-success {
  color: #f2f2f2;
  background-color: #00cbb3;
  border-color: #00cbb3;
}

.btn-success:hover {
  color: #f2f2f2;
  background-color: #10c0ab;
  border-color: #00cbb3;
}

.btn-success:focus,
.btn-success.focus {
  color: #fff;
  background-color: #00cbb3;
  border-color: #00cbb3;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #00cbb3;
  border-color: #00cbb3;
}

.btn-warning {
  color: #f2f2f2;
  background-color: #f2bd19;
  border-color: #f2bd19;
}

.btn-warning:hover {
  color: #f2f2f2;
  background-color: #c78e11;
  border-color: #c78e11;
}

.btn-warning:focus,
.btn-warning.focus {
  color: #fff;
  background-color: #c78e11;
  border-color: #c78e11;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #fff;
  background-color: #f2bd19;
  border-color: #f2bd19;
}

.btn-danger {
  color: #fff;
  background-color: #eb5757;
  border-color: #eb5757;
}

.btn-danger:hover {
  color: #fff;
  background-color: #d85a5a;
  border-color: #eb5757;
}

.btn-danger:focus,
.btn-danger.focus {
  color: #fff;
  background-color: #eb5757;
  border-color: #eb5757;
  box-shadow: 0 0 0 0.2rem rgba(206, 64, 64, 0.5);
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: #f33535;
  border-color: #f33535;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #eb5757;
  border-color: #d85a5a;
}

.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(206, 64, 64, 0.5);
}

.btn-orange {
  color: #fff;
  background-color: #e77a3c;
  border-color: #e77a3c;
}

.btn-orange:hover {
  color: #fff;
  background-color: #d85a5a;
  border-color: #e77a3c;
}

.btn-orange:focus,
.btn-orange.focus {
  color: #fff;
  background-color: #e77a3c;
  border-color: #e77a3c;
  box-shadow: 0 0 0 0.2rem rgba(206, 64, 64, 0.5);
}

.btn-orange.disabled,
.btn-orange:disabled {
  color: #fff;
  background-color: #f38a4d;
  border-color: #f38a4d;
}

.btn-orange:not(:disabled):not(.disabled):active,
.btn-orange:not(:disabled):not(.disabled).active,
.show > .btn-orange.dropdown-toggle {
  color: #fff;
  background-color: #e77a3c;
  border-color: #dd6621;
}

.btn-orange:not(:disabled):not(.disabled):active:focus,
.btn-orange:not(:disabled):not(.disabled).active:focus,
.show > .btn-orange.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(206, 64, 64, 0.5);
}

.btn-dark-green {
  color: #fff;
  background-color: #009846;
  border-color: #009846;
}

.btn-dark-green:hover {
  color: #fff;
  background-color: #007f3a;
  border-color: #009846;
}

.btn-dark-green:focus,
.btn-dark-green.focus {
  color: #fff;
  background-color: #009846;
  border-color: #009846;
  box-shadow: 0 0 0 0.2rem rgba(0, 76, 35, 0.5);
}

.btn-dark-green.disabled,
.btn-dark-green:disabled {
  color: #fff;
  background-color: #aaddc1;
  border-color: #aaddc1;
}

.btn-dark-green:not(:disabled):not(.disabled):active,
.btn-dark-green:not(:disabled):not(.disabled).active,
.show > .btn-dark-green.dropdown-toggle {
  color: #fff;
  background-color: #009846;
  border-color: #dd6621;
}

.btn-dark-green:not(:disabled):not(.disabled):active:focus,
.btn-dark-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark-green.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 76, 35, 0.5);
}

.btn-outline-primary {
  color: #1e82c5;
  border-color: #1e82c5;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #1e82c5;
  border-color: #1e82c5;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(30, 130, 197, 0.5);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #1e82c5;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #1e82c5;
  border-color: #1e82c5;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(30, 130, 197, 0.5);
}

.btn-outline-dark-green {
  color: #009846;
  background-color: #edf8f2;
  border-color: #009846;
}
.btn-outline-dark-green .icon {
  font-weight: 900;
  color: #009846;
}

.btn-outline-dark-green:hover {
  color: #009846;
  background-color: #aaddc1;
  border-color: #aaddc1;
}
.btn-outline-dark-green:hover .icon {
  color: #009846;
}

.btn-outline-dark-green:focus,
.btn-outline-dark-green.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 76, 35, 0.5);
}

.btn-outline-dark-green.disabled,
.btn-outline-dark-green:disabled {
  color: #fff;
  background-color: #aaddc1;
  border-color: #aaddc1;
}

.btn-outline-dark-green:not(:disabled):not(.disabled):active,
.btn-outline-dark-green:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark-green.dropdown-toggle {
  color: #fff;
  background-color: #009846;
  border-color: #009846;
}

.btn-outline-dark-green:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark-green.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 76, 35, 0.5);
}

.btn-outline-secondary {
  color: #5eb6de;
  border-color: #5eb6de;
}
.btn-outline-secondary .icon {
  font-weight: 900;
  color: #5eb6de;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #5eb6de;
  border-color: #5eb6de;
}
.btn-outline-secondary:hover .icon {
  color: #fff;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(94, 182, 222, 0.5);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #5eb6de;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #212529;
  background-color: #5eb6de;
  border-color: #5eb6de;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(94, 182, 222, 0.5);
}

.btn-outline-danger {
  color: #eb5757;
  border-color: #eb5757;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #eb5757;
  border-color: #eb5757;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(235, 87, 87, 0.5);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #eb5757;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #eb5757;
  border-color: #eb5757;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(235, 87, 87, 0.5);
}

.btn-outline-gray {
  color: #606060;
  border-color: #606060;
}

.btn-outline-gray:hover {
  color: #fff;
  background-color: #606060;
  border-color: #606060;
}

.btn-outline-gray:focus,
.btn-outline-gray.focus {
  box-shadow: #606060;
}

.btn-outline-gray.disabled,
.btn-outline-gray:disabled {
  color: #606060;
  background-color: transparent;
}

.btn-outline-gray:not(:disabled):not(.disabled):active,
.btn-outline-gray:not(:disabled):not(.disabled).active,
.show > .btn-outline-gray.dropdown-toggle {
  color: #fff;
  background-color: #606060;
  border-color: #606060;
}

.btn-outline-gray:not(:disabled):not(.disabled):active:focus,
.btn-outline-gray:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-gray.dropdown-toggle:focus {
  box-shadow: #606060;
}

.btn-gray {
  color: #bebebe;
  background-color: #ebeff2;
  border-color: #ebeff2;
}

.btn-gray:hover {
  color: #fff;
  background-color: #bebebe;
  border-color: #bebebe;
}

.btn-disabled,
.btn-disabled:hover {
  color: #bebebe;
  background-color: #ebeff2;
  border-color: #ebeff2;
}

.nominal_card {
  position: relative;
  width: 100%;
  height: 120px;
  max-width: 109px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nominal_card .nominal_inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #eef7ee;
  border-radius: 12px;
}
.nominal_card .nominal_inner h4 {
  color: #000000;
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-weight: 700;
}
.nominal_card .nominal_inner div {
  width: 64px;
  height: 64px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.nominal_card .nominal_inner div.nominal_10000 {
  background-image: url("/images/investasi/pilihan_nominal/nominal10k.svg");
}
.nominal_card .nominal_inner div.nominal_20000 {
  background-image: url("/images/investasi/pilihan_nominal/nominal20k.svg");
}
.nominal_card .nominal_inner div.nominal_25000 {
  background-image: url("/images/investasi/pilihan_nominal/nominal25k.svg");
}
.nominal_card .nominal_inner div.nominal_50000 {
  background-image: url("/images/investasi/pilihan_nominal/nominal50k.svg");
}
.nominal_card .nominal_inner div.nominal_100000 {
  background-image: url("/images/investasi/pilihan_nominal/nominal100k.svg");
}
.nominal_card .nominal_inner div.nominal_500000 {
  background-image: url("/images/investasi/pilihan_nominal/nominal500k.svg");
}
.nominal_card input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.nominal_card input[type=radio]:checked ~ div {
  background-color: #009846;
}
.nominal_card input[type=radio]:checked ~ div h4 {
  color: #ffffff;
}

.modal {
  width: 100%;
  max-width: 375px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(50, 50, 50, 0.7490196078);
  display: block;
}
.modal .modal_main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f7f7f7;
  border-radius: 16px;
  width: 100%;
  max-width: calc(100% - 1.875rem);
}
.modal .modal_body h2 {
  font-weight: 600;
  line-height: 1.125rem;
}
.modal .modal_btn button {
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.125em;
  color: #071d2c;
}
.modal .modal_btn button:first-child {
  background-color: #c2c2c2;
}
.modal .modal_btn button:last-child {
  background-color: #fff1f0;
}

[data-rsbs-overlay] {
  height: 50vh !important;
  border-top-right-radius: 32px !important;
  border-top-left-radius: 32px !important;
}

[data-rsbs-header] {
  padding-top: 28px !important;
}

.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.font-clash-display {
  font-family: "Clash Display", sans-serif !important;
}

h1 {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.255em;
  color: #071d2c;
}

h2 {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.255em;
  color: #071d2c;
}

h3 {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #071d2c;
}

h4 {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.255em;
  color: #071d2c;
}

p {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.255em;
  color: #071d2c;
}

.product_rating {
  color: #ffc940;
}

.page_main {
  max-width: 375px;
  margin-right: auto;
  margin-left: auto;
  min-height: 100vh;
  border: 0;
  background-color: #f7f7f7;
}
.page_main.with_footer .page_container {
  padding-bottom: calc(72.3333px + 1.5rem);
}

.page_container {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  padding-bottom: 2.5rem;
}

.pr-body {
  padding-right: 0.9375rem;
}

a:hover {
  text-decoration: none;
}

#horizontal_scroll {
  overflow: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

.title {
  margin-bottom: 0.635rem;
}
.title h2 {
  margin-bottom: 0;
  color: #071d2c;
}
.title a {
  font-size: 0.75rem;
  line-height: 1.255em;
  font-weight: 400;
  color: #5eb6de;
  margin-bottom: 0;
}

.avatar {
  display: block;
  width: 10rem;
  height: 10rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 18.45px;
}

.avatar-sm {
  width: 3rem;
  height: 3rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 50%;
}

.notification {
  margin-bottom: 0.9rem;
}
.notification > span {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3em;
  color: #ffffff;
  margin-left: 1.5rem;
}
.notification .iconify {
  color: #fff;
  font-size: 0.7rem;
  margin-right: 5px;
}
.notification .iconify.battery_icon, .notification .iconify.signal_icon {
  font-size: 1.2rem;
}

.navigation_top {
  height: 88px;
  box-shadow: none;
  width: 100%;
  max-width: 375px;
  position: sticky;
  top: 0;
  padding: 0.55rem 1.25rem 1.2rem;
  z-index: 100;
}
.navigation_top button {
  outline: none;
  border: none;
  background-color: transparent;
}
.navigation_top .header_title {
  color: #ffffff;
  display: inline-block;
  margin-left: 0.85rem;
  margin-bottom: 0;
}
.navigation_top .history_icon,
.navigation_top .back_icon,
.navigation_top .cart_icon {
  font-size: 1.4rem;
  color: #fff;
}

.navigationTop_tabs {
  height: 137px;
}
.navigationTop_tabs nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 0 1rem;
}
.navigationTop_tabs nav .nav-tabs {
  border: 0;
}
.navigationTop_tabs nav .nav-link {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.2em;
  color: #fff;
  border: 0;
  width: 50%;
  text-align: center;
  border-radius: 0;
  margin-bottom: 0;
  position: relative;
}
.navigationTop_tabs nav .nav-link.active {
  background-color: transparent;
  color: #fff;
}
.navigationTop_tabs nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 3px;
  border-radius: 2px 2px 0 0;
}

.splashscreen {
  background: linear-gradient(144.39deg, #004c23 20.92%, #007f3a 62.4%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.splashscreen h4 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 0.5rem;
  text-align: center;
}
.splashscreen .spinner {
  position: fixed;
  top: calc(25vh + 64%);
  left: 50%;
  transform: translate(-50%, -50%);
}
.splashscreen .spinner .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  color: #ffffff;
}

.notifikasi {
  min-height: 100vh;
  position: relative;
}
.notifikasi .loading_indicator .spinner-grow {
  color: #009846;
}
.notifikasi .navigation_top {
  background: transparent;
}
.notifikasi .navigation_top header {
  position: relative;
}
.notifikasi .navigation_top .header_title {
  position: absolute;
  width: 100%;
  text-align: center;
  pointer-events: none;
  margin-left: 0;
}
.notifikasi .notifikasi_content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.notifikasi .notifikasi_keterangan {
  margin-top: 2rem;
}
.notifikasi .notifikasi_keterangan h3 {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.255em;
  color: #fff;
  margin-bottom: 0;
}

.virtual_account .durasi_pembayaran {
  align-items: center;
  justify-content: space-between;
}
.virtual_account .countdown {
  border-radius: 4px;
  padding: 0.75rem;
}

.instruksi {
  margin-top: 2.5rem;
  border-radius: 12px;
}
.instruksi ul {
  margin-left: 14px;
  margin-bottom: 0;
}
.instruksi ul li {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.313rem;
  color: #606060;
}
.instruksi ul li span {
  position: relative;
  left: -5px;
}

.button_bottom {
  width: 375px;
  max-width: 100%;
  margin: auto;
  padding: 0.9375rem;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  box-shadow: 0px -3px 15px rgba(30, 130, 197, 0.15);
}

.spinner-grow {
  width: 15px;
  height: 15px;
}

.loading_indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.thumbnail {
  width: 100%;
  max-width: 301px;
  height: 123px;
  display: inline-block;
  position: relative;
  border-radius: 16px;
  margin-top: 3px;
}
.thumbnail .thumbnail_image img {
  width: 100%;
  height: 123px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 16px;
}
.thumbnail .thumbnail_badge img {
  position: absolute;
  top: -3px;
  left: 0.75rem;
  z-index: 10;
}
.thumbnail .thumbnail_description {
  position: absolute;
  bottom: 0;
  padding: 0 0.75rem 0.75rem;
  z-index: 10;
  width: 100%;
}
.thumbnail .thumbnail_description h2,
.thumbnail .thumbnail_description h4 {
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
}
.thumbnail .thumbnail_description h4 {
  font-weight: 400;
  color: #f9f9f9;
}
.thumbnail .thumbnail_description h4 span {
  color: #f2bd19;
}
.thumbnail .thumbnail_description h2 {
  font-weight: 800;
  color: #f9f9f9;
  margin-bottom: 0;
}
.thumbnail .thumbnail_description p {
  color: #f9f9f9;
}
.thumbnail:last-child {
  margin-right: 1rem;
}
.thumbnail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 16px;
}

.thumbnail_berita {
  margin-left: 1rem;
}
.thumbnail_berita:first-child {
  margin-left: 0;
}
.thumbnail_berita::after {
  background: linear-gradient(359.62deg, #1d1d1d 29.83%, rgba(0, 0, 0, 0) 99.69%);
}

.info_saldo {
  overflow: hidden;
  background: linear-gradient(359.62deg, #1e82c5 -11.41%, #8dc9f2 111.93%);
  padding: 1.125rem 1rem;
  border-radius: 16px;
  position: relative;
}
.info_saldo img {
  position: absolute;
  right: 0;
  bottom: 0;
}
.info_saldo h3 {
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 0;
  z-index: 10;
  position: relative;
}
.info_saldo h1 {
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1.255em;
  color: #ffffff;
  margin-bottom: 0;
  z-index: 10;
  position: relative;
}

.bg-gradientPrimary {
  background: linear-gradient(359.62deg, #1e82c5 -11.41%, #8dc9f2 178.68%);
}

.bg-gradientWarning {
  background: linear-gradient(359.62deg, #ebb957 -11.41%, #dec25e 178.68%);
}

.bg-gradientSuccess {
  background: linear-gradient(359.62deg, #00cbb3 -11.41%, #5eb6de 178.68%);
}

.bg-gradientDanger {
  background: linear-gradient(359.62deg, #eb5757 -11.41%, #de9b5e 178.68%);
}

.bg-gradientGray {
  background: linear-gradient(359.62deg, #737373 -11.41%, #303030 178.68%);
}

.bg-gradientDarkGreen {
  background: linear-gradient(144deg, #004c23 20.92%, #007f3a 62.4%);
}
.bg-gradientDarkGreen header {
  background: transparent !important;
}

.bg-gradientOrange {
  background: linear-gradient(144.39deg, #873b10 20.92%, #e77a3c 88.89%);
}
.bg-gradientOrange header {
  background: transparent !important;
}

.bg-gradientRed {
  background: linear-gradient(144.39deg, #4c0000 20.92%, #7f0000 62.4%);
}
.bg-gradientRed header {
  background: transparent !important;
}

.bg-dark-green {
  background: #009846 !important;
}

.text_ellipsis1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.card_product {
  border-radius: 8px;
}
.card_product .product_image {
  width: 28%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px 0 0 8px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card_product .product_image img {
  width: 100%;
  background-size: cover;
  border-radius: 8px 0px 0px 8px;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card_product .product_info {
  width: 72%;
  padding: 12px 1rem 1rem;
}
.card_product .product_info h3 {
  color: #373737;
}
.card_product .product_info p {
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.5em;
  color: #373737;
}
.card_product .product_info .badge {
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0em;
  text-align: center;
  padding: 8px 16px 8px 16px;
  border-radius: 12px;
}
.card_product .product_info .badge.badge-green {
  color: #009846;
  background-color: #eef7ee;
}
.card_product .product_info .badge.badge-orange {
  color: #e77a3c;
  background-color: #fef9f6;
}
.card_product .product_info .badge.badge-red {
  color: #e74c3c;
  background-color: #fff1f0;
}
.card_product.vertical .product_image {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.card_product.vertical .product_image img {
  width: 100%;
  height: 96px;
  border-radius: 8px 8px 0 0;
}
.card_product.vertical .product_info {
  width: 100%;
  padding: 16px 12px;
}

.text-slant {
  transform: skewX(-8deg);
}

.nominal_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.bayarSekarang_btn {
  padding: 0.7857em 1.34em;
}

.jumlah_tagihan h1 {
  font-size: 2.25rem;
  font-weight: 800;
}

.pembayaran_total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pembayaran_total h1 {
  font-size: 1.125rem;
  text-align: right;
  font-weight: 800;
}

.fullpage_container {
  min-height: calc(100vh - 88px);
}

.pilihan_nominal input[type=text] {
  background-color: #ebeff2;
}

.riwayat .riwayat_group {
  background: #ffffff;
  border-radius: 8px;
  padding: 1rem 0.5rem;
  box-shadow: 0px 0px 40px 0px rgba(2, 4, 6, 0.1019607843);
}
.riwayat .list_pembayaran {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border-bottom: 1px solid #d0d5d7;
  padding-bottom: 1.375rem;
  padding-top: 1.125rem;
}
.riwayat .list_pembayaran:first-child {
  padding-top: 0;
}
.riwayat .list_pembayaran:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.loading_indicator .spinner-grow {
  color: #009846;
}

.icon-axis_logo,
.icon-indosat_logo,
.icon-smartfren_logo,
.icon-telkomsel_logo,
.icon-tri_logo,
.icon-xl_logo {
  position: absolute;
  right: 2.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

.icon-smartfren_logo {
  font-size: 0.7rem;
}

.shimmer {
  background-image: linear-gradient(90deg, #eee 0%, #eee 40%, #ddd 50%, #ddd 55%, #eee 65%, #eee 100%);
  background-size: 400%;
  animation: shimmer 1500ms infinite;
}
.shimmer.username {
  width: 150px;
  height: 15px;
  border-radius: 0.5rem;
}
.shimmer.menu_beranda {
  width: 30px;
  height: 30px;
  border-radius: 0.5rem;
}
.shimmer.card_product {
  width: 100%;
  height: 117px;
  border-radius: 0.5rem;
}

@keyframes shimmer {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0 0;
  }
}
@media screen and (max-width: 355px) {
  .virtual_account .durasi_pembayaran {
    align-items: flex-start;
    justify-content: flex-start !important;
    flex-direction: column;
  }
  .virtual_account .countdown {
    margin-top: 0.5rem;
  }
  .nominal_wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .nominal_wrapper .nominal_card {
    max-width: 100%;
  }
}
.authentication header {
  padding: 3rem 0.9375rem 3.5rem;
  background-color: #f7f7f7;
}
.authentication header img {
  display: block;
  margin: 0 auto;
}
.authentication header h1 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.255em;
  color: #071d2c;
  text-align: center;
  margin-bottom: 8px;
}
.authentication header h3 {
  text-align: center;
  font-weight: 600;
  margin-bottom: 0;
}
.authentication .form-check {
  position: relative;
  margin-top: 2rem;
}
.authentication .form-check label {
  margin-left: 0.8rem;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5em;
  color: #071d2c;
}
.authentication .form-check label span {
  color: #5eb6de;
}
.authentication .custom_checkbox {
  position: absolute;
  opacity: 0;
}
.authentication .custom_checkbox + label:before {
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  transform: translateY(-50%);
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border: 1px solid #323232;
  border-radius: 4px;
}
.authentication .custom_checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(50% - 6px);
  background: #1e82c5;
  width: 3px;
  height: 3px;
  box-shadow: 2px 0 0 #1e82c5, 4px 0 0 #1e82c5, 4px -2px 0 #1e82c5, 4px -4px 0 #1e82c5, 4px -6px 0 #1e82c5, 4px -8px 0 #1e82c5;
  transform: rotate(45deg);
}
.authentication .lupa_sandi {
  font-weight: 600;
  color: #5eb6de;
}
.authentication .lewati {
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.4em;
  color: #bebebe;
  text-decoration: underline;
  display: block;
  text-align: right;
  margin-top: 0;
  margin-bottom: 64px;
}
.authentication .hyperlink {
  font-weight: 600;
  text-align: center;
  margin-bottom: 0;
}
.authentication .hyperlink a {
  text-decoration: underline;
  color: #1e82c5;
  font-weight: 700;
}
.authentication .input-guide {
  color: #e74c3c;
  background: #fff1f0;
  border-radius: 12px;
  padding: 8px;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.01em;
}
.authentication .input-guide ul {
  padding-left: 18px;
}

.beranda .header_beranda {
  background-color: #fff;
  padding: 1.6rem 0.9375rem 4rem;
  border-radius: 0px 0px 32px 32px !important;
}
.beranda .header_beranda h2 {
  color: #606060;
}
.beranda .header_beranda h1 {
  color: #020406;
}
.beranda .header_beranda .badge-anggota {
  display: none;
  font-size: 10px;
  font-weight: 700;
  padding: 8px 16px;
  margin-top: 12px;
  background-color: #eef7ee;
  color: #009846;
  border-radius: 16px;
  width: -moz-fit-content;
  width: fit-content;
}
.beranda .header_beranda .badge-anggota img {
  margin-right: 4px;
}
.beranda .header_beranda.header_anggota {
  background-image: url(/images/bg-header.png?880175302c3699efcaaa4fd5ed06abd8);
  background-size: cover;
  padding: 1.6rem 0.9375rem 1.75rem;
}
.beranda .header_beranda.header_anggota h2 {
  color: #ffffff;
}
.beranda .header_beranda.header_anggota h1 {
  color: #ffffff;
}
.beranda .header_beranda.header_anggota .badge-anggota {
  display: flex;
  align-items: center;
}
.beranda .page_container {
  margin-top: -4rem;
}
.beranda .top_menu {
  position: relative;
  background-color: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 0.25rem 0.5rem;
  margin-top: -0.75rem;
}
.beranda .top_menu .menu {
  padding: 0.5rem 1.1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.beranda .top_menu .menu h4 {
  color: #000;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 0.35rem;
}
.beranda .menu_wrapper {
  overflow: auto;
  display: flex;
}
.beranda .menu_wrapper .menu {
  width: 4.5rem;
  margin-right: 0.75rem;
}
.beranda .menu_wrapper .menu_figure {
  width: 72px;
  height: 72px;
  background: #eef7ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.beranda .menu_wrapper .menu_figure img {
  width: 100%;
  max-width: 3.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.beranda .menu_wrapper h3,
.beranda .menu_wrapper h4 {
  font-weight: 600;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0.25rem;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
}

#iuran .list_pembayaran {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
}
#iuran .pembayaran_detail span {
  font-size: 0.75rem;
}
#iuran .pembayaran_detail span:first-child {
  display: inline-block;
  width: 4rem;
}
#iuran .button_bottom {
  box-shadow: 0px -3px 15px rgba(30, 130, 197, 0.05);
}
#iuran .card_pembayaran {
  background: #EEF7EE;
  padding: 32px 24px 16px 24px;
  border-radius: 12px;
}
#iuran .countdown {
  background: #fff1f0;
}
#iuran .countdown h4 {
  color: #e74c3c;
}
#iuran .instruksi {
  background: #f6fbfe;
}
#iuran .instruksi_keterangan {
  background: #f6fbfe;
  padding: 16px;
}
#iuran .profil_preview {
  position: relative;
}
#iuran .profil_preview::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 18.45px;
  display: inline-block;
  background: rgba(55, 55, 55, 0.65);
}
#iuran .formInput_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#iuran .formInput_wrapper .iconify {
  font-size: 3rem;
  color: #fff;
}

@media screen and (max-width: 355px) {
  #iuran .list_pembayaran,
  .investasi .list_pembayaran {
    grid-template-columns: 1fr !important;
  }
  #iuran .pembayaran_total,
  .investasi .pembayaran_total {
    justify-content: flex-start;
  }
}
.investasi .loading_indicator .spinner-grow {
  color: #009846;
}
.investasi .bar_container {
  height: 29px;
  width: 100%;
  background-color: #d4d4d4;
  border-radius: 12px;
}
.investasi .bar_slot {
  height: 100%;
  background-color: #009846;
  border-radius: 12px;
  max-width: 100%;
  font-size: 10px;
  font-weight: 800;
  line-height: 13px;
  letter-spacing: -0.03em;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.investasi .button_bottom {
  box-shadow: 0px -3px 15px rgba(0, 203, 179, 0.05);
}
.investasi .belisaham_btn {
  font-family: "Lato", sans-serif;
  box-shadow: 0px 4px 10px rgba(30, 130, 197, 0.15);
  border-radius: 40px;
  background: #1e82c5;
  width: 204px;
  max-width: 100%;
  height: 56px;
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.2em;
  font-weight: 900;
}
.investasi .cardsaham {
  background: #fff;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 28% 72%;
  overflow: auto;
}
.investasi .cadsaham_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 16px 0px 0px 16px;
}
.investasi .cardsaham_description {
  padding: 0.75rem 1rem 1rem;
}
.investasi .cardsaham_description .cardsaham_detail * {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #606060;
}
.investasi .cardsaham_description .kategori_saham {
  font-size: 0.75rem;
  line-height: 1.255em;
  color: #bebebe;
  margin-bottom: 0.125rem;
}
.investasi .cardsaham_description .harga_saham {
  font-size: 1rem;
  line-height: 1.255em;
  font-weight: 800;
  color: #009846;
  margin-bottom: 0;
}
.investasi .detailsaham_content img {
  width: 100%;
  max-width: 375px;
  height: calc(100vh - 88px - 72px);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.investasi .countdown {
  background: #fff1f0;
}
.investasi .countdown h4 {
  color: #e74c3c;
}
.investasi .list_pembayaran {
  display: block;
}
.investasi .thumbnail_saham {
  margin-right: 1rem;
}
.investasi .thumbnail_saham::after {
  background: linear-gradient(0.89deg, #272727 27.2%, rgba(0, 203, 179, 0.5) 99.19%);
}
.investasi .detailsaham_image {
  height: 252px;
}
.investasi .detailsaham_image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.investasi .detailsaham_description {
  position: relative;
  background-color: #fff;
  padding: 2rem 1rem calc(70.3333px + 1rem);
  margin-top: -2rem;
  border-radius: 12px 12px 0px 0px;
}
.investasi .detailsaham_description h2,
.investasi .detailsaham_description h3 {
  margin-bottom: 0;
  color: #373737;
}
.investasi .detailsaham_description p {
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.5em;
  color: #5d5c5d;
  text-align: justify;
}
.investasi .detailsaham_description .badge_progress {
  font-size: 12px;
  font-weight: 800;
  line-height: 15px;
  letter-spacing: -0.03em;
  padding: 8.5px 14.5px;
  border-radius: 12px;
  color: #fff;
  background-color: #009846;
  height: -moz-fit-content;
  height: fit-content;
}
.investasi .detailsaham_description .bar_container {
  height: 16px;
  border-radius: 12px;
}
.investasi .pembayaran_detail span,
.investasi .pembayaran_detail a {
  font-size: 0.75rem;
}
.investasi .pembayaran_detail a {
  color: #00cbb3;
  font-weight: 800;
  display: inline-block;
}
.investasi .card_sertifikat {
  border: 0;
  border-radius: 16px;
  padding: 1rem;
}
.investasi .card_sertifikat h2 {
  color: #373737;
  font-size: 1.125rem;
}
.investasi .card_sertifikat p {
  color: #373737;
  font-size: 0.875rem;
}
.investasi .content_setifikat {
  background-size: cover;
  border: 0;
  border-radius: 16px;
  padding: 1rem 1rem 1.375rem;
}
.investasi .content_setifikat h2 {
  color: #373737;
}
.investasi .content_setifikat p {
  font-size: 0.875rem;
  color: #373737;
  margin-bottom: 0.25rem;
}
.investasi .transferKe {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}
.investasi .salinNomor_btn {
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1.2em;
  color: #009846;
  padding: 8px 12px;
  border-radius: 4px;
}
.investasi .profil_preview {
  position: relative;
}
.investasi .profil_preview::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 18.45px;
  display: inline-block;
  background: rgba(55, 55, 55, 0.65);
}
.investasi .formInput_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.investasi .formInput_wrapper .iconify {
  font-size: 3rem;
  color: #fff;
}
.investasi .list_riwayat_tab {
  background-color: #009846;
}
.investasi .list_riwayat_tab li {
  width: 50%;
}
.investasi .list_riwayat_tab .nav-link {
  background-color: #009846;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid #009846;
  padding-top: 12px;
  padding-bottom: 12px;
  width: 100%;
}
.investasi .list_riwayat_tab .nav-link.active {
  border-bottom: 3px solid #fff;
}

.berita .loading_indicator .spinner-grow {
  color: #009846;
}
.berita .title a {
  color: #4e4a4b;
}
.berita .card_berita {
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  display: grid;
  grid-template-columns: 28% 72%;
}
.berita .berita_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 8px 0px 0px 8px;
}
.berita .berita_description {
  padding: 0.75rem 1rem;
}
.berita .berita_description h3 {
  line-height: 1.5em;
}
.berita .berita_description p {
  font-weight: 300;
  color: #373737;
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.berita .detailBerita_image img {
  width: 100%;
  height: 295px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.berita .detailBerita_content {
  position: relative;
  margin-top: -2rem;
  background-color: #fff;
  padding: 1.5rem 1rem 2rem;
  border-radius: 32px 32px 0px 0px;
  min-height: calc(100vh - 295px - 88px + 2rem);
}
.berita .detailBerita_content .content_body p,
.berita .detailBerita_content .content_footer p {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5em;
  color: #5d5c5d;
  margin-bottom: 0;
  text-align: justify;
}

.akun .header_akun {
  padding: 0.8rem 0.9375rem 0.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.akun .header_akun .notification > span,
.akun .header_akun .notification .iconify {
  color: #000;
}
.akun .header_akun .notification > span {
  margin-left: 0.625rem;
}
.akun .kartu_anggota button {
  border: none;
  background-color: transparent;
  outline: none;
}
.akun .kartu_inner {
  overflow: hidden;
  background: linear-gradient(91.08deg, #004C23 -32.93%, #007F3A 61.23%);
  border-radius: 16px;
  position: relative;
}
.akun .kartu_inner .icon_figure {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
}
.akun .kartu_content {
  position: relative;
}
.akun .kartu_content button {
  position: absolute;
  top: 1rem;
  right: 10rem;
  z-index: 10;
  background: transparent;
  border-radius: 4px;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #ffffff;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
}
.akun .card_list {
  margin-top: 0.75rem;
  border: 1px solid #f7f7f7;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
}
.akun .card_list .list-group-item {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #000;
  position: relative;
  border: 1px solid rgba(190, 190, 190, 0.3);
  border-left: 0;
  border-right: 0;
  border-radius: 8px;
}
.akun .card_list .list-group-item::after {
  content: url("https://api.iconify.design/ri/arrow-drop-right-line.svg?color=%23071D2C&width=20");
  position: absolute;
  right: 1rem;
}
.akun .card_list .list-group-item:first-child {
  border-radius: 8px 8px 0 0 !important;
}
.akun .card_list .list-group-item:last-child {
  border-radius: 0 0 8px 8px !important;
}
.akun .card_list .list-group-item:only-child {
  border-radius: 8px !important;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.akun .fade-in {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  will-change: opacity;
}
.akun .foto_profil {
  margin-top: 2.5rem;
}
.akun .profil_preview {
  position: relative;
}
.akun .profil_preview::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 18.45px;
  display: inline-block;
  background: rgba(55, 55, 55, 0.65);
}
.akun .formInput_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.akun .formInput_wrapper .iconify {
  font-size: 3rem;
  color: #fff;
}
.akun .card_alamat {
  background-color: #fff;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
  border: 1px solid #f7f7f7;
  margin-top: 1.5rem;
}
.akun .card_alamat:first-child {
  margin-top: 0;
}
.akun .card_alamat:last-of-type {
  margin-bottom: 4rem;
}
.akun .card_alamat p {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3em;
  color: #5d5c5d;
}
.akun .tambahAlamat_btn {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: calc(100% - 1.875rem);
}
.akun .simpanAlamat_btn {
  margin-top: 4rem;
}
.akun .datepicker_wrapper {
  position: relative;
}
.akun .datepicker_wrapper .form-control {
  cursor: pointer;
}
.akun .datepicker_icon {
  width: 100%;
  height: 100%;
  max-width: 3rem;
  background-color: #1e82c5;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0px 8px 8px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.akun .react-datepicker__navigation--years-upcoming {
  background: url("https://api.iconify.design/ri/arrow-drop-up-line.svg") no-repeat center center/contain !important;
}
.akun .react-datepicker__navigation--years-previous {
  background: url("https://api.iconify.design/ri/arrow-drop-down-line.svg") no-repeat center center/contain !important;
}
.akun .form-check {
  position: relative;
  margin-top: 2rem;
}
.akun .form-check label {
  margin-left: 0.8rem;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.5em;
  color: #071d2c;
}
.akun .form-check label span {
  color: #5eb6de;
}
.akun .custom_checkbox {
  position: absolute;
  opacity: 0;
}
.akun .custom_checkbox + label:before {
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  transform: translateY(-50%);
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border: 1px solid #323232;
  border-radius: 4px;
}
.akun .custom_checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(50% - 6px);
  background: #1e82c5;
  width: 3px;
  height: 3px;
  box-shadow: 2px 0 0 #1e82c5, 4px 0 0 #1e82c5, 4px -2px 0 #1e82c5, 4px -4px 0 #1e82c5, 4px -6px 0 #1e82c5, 4px -8px 0 #1e82c5;
  transform: rotate(45deg);
}

.aplikasi .koperasi_image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.aplikasi .koperasi_description {
  background: #fff;
  border-radius: 32px 32px 0px 0px;
  min-height: calc(100vh - 270px - 88px + 2rem);
  padding: 2.5rem 1rem 1.5rem;
  position: relative;
  margin-top: -2rem;
}
.aplikasi .koperasi_description p {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5em;
  color: #5d5c5d;
}
.aplikasi .faq_figure {
  position: relative;
  background: linear-gradient(144.39deg, #004c23 20.92%, #007f3a 62.4%);
  box-shadow: 0px 2px 10px rgba(36, 135, 201, 0.35);
  border-radius: 20px;
}
.aplikasi .faq_figure h3 {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}
.aplikasi .accordion-button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.285em;
  color: #020406;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 8px;
  overflow-anchor: none;
}
.aplikasi .accordion-button::after {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  content: "";
  background: url("https://api.iconify.design/ri/arrow-down-s-line.svg?color=%23BEBEBE");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}
.aplikasi .accordion-button:not(.collapsed) {
  color: #020406;
  padding-bottom: 0;
}
.aplikasi .accordion-button:not(.collapsed)::after {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  transform: rotate(-180deg);
}
.aplikasi .accordion-item {
  position: relative;
  background-color: #fff;
  border: 0;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
.aplikasi .accordion-header {
  margin-bottom: 0;
}
.aplikasi .accordion-body {
  padding: 0.5rem 2.5rem 0.75rem 1rem;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5em;
  color: #000;
}
.aplikasi .accordion-body ul {
  padding-left: 1.25rem;
}

.infoAplikasi {
  background: linear-gradient(144.39deg, #004c23 20.92%, #007f3a 62.4%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 3.5rem 2rem;
  color: #fff;
}
.infoAplikasi h4 {
  color: #fff;
  margin-bottom: 0;
  text-align: center;
  font-weight: 400;
}
.infoAplikasi .informasi {
  margin: 6rem 0;
  font-size: 0.875rem;
  text-align: justify;
}

.pasar .loading_indicator .spinner-grow {
  color: #009846;
}
.pasar .status-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff0032;
  border: 1px solid white;
  top: 3px;
  right: -3px;
  position: absolute;
}
.pasar .shadow_pasar {
  box-shadow: 0px 4px 10px rgba(7, 29, 44, 0.05);
}
.pasar .badge {
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0em;
  text-align: center;
  padding: 8px 16px 8px 16px;
  border-radius: 12px;
}
.pasar .badge-success {
  background: rgba(0, 203, 179, 0.1);
  color: #00cbb3;
}
.pasar .badge-warning {
  background: rgba(242, 189, 25, 0.1);
  color: #f2bd19;
}
.pasar .badge-danger {
  background: rgba(235, 87, 87, 0.1);
  color: #eb5757;
}
.pasar .badge-green {
  color: #009846;
  background-color: #eef7ee;
}
.pasar .badge-orange {
  color: #e77a3c;
  background-color: #fef9f6;
}
.pasar .badge-red {
  color: #e74c3c;
  background-color: #fff1f0;
}
.pasar .button_bottom {
  box-shadow: 0px -3px 15px rgba(242, 189, 25, 0.05);
}
.pasar .form-control:-moz-read-only {
  border: 1px solid #ebeff2;
  background-color: #ebeff2;
}
.pasar .form-control:read-only {
  border: 1px solid #ebeff2;
  background-color: #ebeff2;
}
.pasar .thumbnail_pasar {
  background-color: #009846;
  margin-left: 1rem;
}
.pasar .thumbnail_pasar:first-child {
  margin-left: 0;
}
.pasar .filter_product {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.pasar .filter_product .btn {
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #efefef;
  background-color: #f8fcfd;
}
.pasar .filter_product .active_filter {
  background-color: #edf8f2;
  border: 1px solid #009846;
  color: #009846;
  box-shadow: none;
}
.pasar .detailProduct_image img {
  width: 100%;
  height: 295px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.pasar .detailProduct_description {
  position: relative;
  margin-top: -2rem;
  min-height: calc(100vh - 88px - 295px + 2rem);
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 32px 32px 0px 0px;
  padding: 2.5rem 1rem 1rem;
}
.pasar .detailProduct_description p {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5em;
  color: #5d5c5d;
  text-align: justify;
  margin-bottom: 0;
}
.pasar .detailProduct_description .btn_varian {
  background-color: #eef7ee;
  border-color: #eef7ee;
}
.pasar .detailProduct_description .active_varian {
  background-color: #eef7ee;
  border-color: #009846;
  color: #009846;
}
.pasar .detailProduct_action {
  background-color: #fff;
  padding: 1rem 0.75rem;
}
.pasar .customCheckbox_wrapper {
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
  font-weight: 400;
}
.pasar input[type=checkbox] {
  visibility: hidden;
}
.pasar .custom_checkbox {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 1.5rem;
  width: 1.5rem;
  background-color: #fbfbfb;
  border: 1px solid #bebebe;
  border-radius: 4px;
}
.pasar input:checked ~ .custom_checkbox {
  background-color: #eb5757;
  border-color: #eb5757;
}
.pasar .custom_checkbox:after {
  content: "";
  position: absolute;
  display: none;
}
.pasar input:checked ~ .custom_checkbox:after {
  display: block;
}
.pasar .custom_checkbox:after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 1.2rem;
  width: 1.2rem;
  background: url("https://api.iconify.design/icon-park-outline/check-small.svg?color=%23fff") no-repeat center center/contain;
}
.pasar .keranjangItem_wrapper {
  background: #ffffff;
  border-radius: 8px;
}
.pasar .keranjang_item {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.pasar .item_image {
  width: 4rem;
  height: 4rem;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.pasar .form-check {
  margin-top: 1.25rem;
}
.pasar .grid_item {
  display: grid;
  grid-template-columns: 4fr 1fr;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.pasar .detail_item .btn_varian {
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1.255em;
  color: #071d2c;
  background-color: #f8fcfd;
  border: none;
  outline: none;
  padding: 0.95em 4.8em 0.95em 0.8em;
  border-radius: 4px;
}
.pasar .detail_item .item_price {
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.255em;
  color: #212121;
}
.pasar .detail_item .btn_minus,
.pasar .detail_item .btn_plus {
  border: none;
  outline: none;
  width: 23px;
  height: 23px;
  padding: 0;
  border-radius: 4px;
}
.pasar .detail_item .btn_minus {
  background-color: #fff1f0;
  color: #e74c3c;
}
.pasar .detail_item .btn_plus {
  background-color: #009846;
  color: #fff;
}
.pasar .detail_item input,
.pasar .detail_item .input-text {
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-bottom: 1px solid #009846;
  background-color: transparent;
  margin: 0 0.625rem;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #373737;
}
.pasar .btn_deleteItem {
  width: 2.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eb5757;
  border: none;
  outline: none;
  border-radius: 4px;
}
.pasar .transferKe {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}
.pasar .salinNomor_btn {
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1.2em;
  color: #009846;
  padding: 8px 12px;
  border-radius: 4px;
}
.pasar .instruksi li {
  color: #bebebe;
}
.pasar .instruksi p {
  font-size: 0.875rem;
  line-height: 1.5em;
}
.pasar .riwayat_group {
  background-color: #fff;
  box-shadow: 0px 4px 10px rgba(7, 29, 44, 0.05);
  padding: 1rem 0.5rem;
  border-radius: 8px;
}
.pasar .riwayat_group .list_pembayaran {
  padding-bottom: 1.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-bottom: 1px solid rgba(7, 29, 44, 0.2);
}
.pasar .riwayat_group .list_pembayaran:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.pasar .riwayat_group .list_pembayaran:not(:first-child) {
  padding-top: 1.5rem;
}
.pasar .riwayat_group .list_pembayaran .total_bayar {
  margin-bottom: 0;
  margin-top: 0.25rem;
  font-size: 1.375rem;
  font-weight: 800;
}
.pasar .detailTransaksi {
  padding-bottom: 5.5rem;
}
.pasar .detailTransaksi .card {
  padding: 0.75rem 1rem;
  flex-direction: row;
  box-shadow: 0px 4px 10px rgba(7, 29, 44, 0.05);
  border: 0;
  border-radius: 8px;
}
.pasar .detailTransaksi .list_transaksi {
  border-bottom: 1px solid rgba(7, 29, 44, 0.2);
  padding-bottom: 1rem;
}
.pasar .detailTransaksi .list_transaksi:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.pasar .detailTransaksi .list_transaksi:not(:first-child) {
  padding-top: 1rem;
}
.pasar .detailTransaksi .list_transaksi img {
  width: 100%;
  height: 100%;
  max-width: 64px;
  max-height: 114px;
  border-radius: 4px;
}
.pasar .detailTransaksi .list_transaksi p {
  margin-bottom: 0;
}
.pasar .detailTransaksi .list_transaksi p:first-child {
  width: 5em;
}
.pasar .detailTransaksi .total_bayar h1 {
  font-size: 1.125rem;
  font-weight: 800;
  margin-bottom: 0;
}
.pasar .detailTransaksi .total_bayar h4 {
  color: #bebebe;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.pasar .ulasan_rating div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pasar .ulasan_rating span {
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pasar .ulasan_rating span:last-child {
  margin-right: 0;
}
.pasar .ulasan_komentar {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}
.pasar .produk_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pasar .produk_header p {
  font-size: 14px;
}
.pasar .produk_header .tab-view {
  display: flex;
  gap: 16px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #dcdcdc;
  background-color: #fff;
}
.pasar .produk_header .tab-view .btn {
  border-radius: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.pasar .produk_header .tab-view .btn-default {
  border: none;
  color: #020406;
}
.pasar .card_list {
  margin-top: 0.75rem;
  border: 1px solid #f7f7f7;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
}
.pasar .card_list button {
  border: none;
}
.pasar .card_list .list-group-item {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #000;
  position: relative;
  text-align: left;
  border: 1px solid rgba(190, 190, 190, 0.3);
  border-left: 0;
  border-right: 0;
}
.pasar .card_list .list-group-item::after {
  content: url("https://api.iconify.design/ri/arrow-drop-right-line.svg?color=%23071D2C&width=20");
  position: absolute;
  right: 1rem;
}
.pasar .card_list .list-group-item-body {
  padding: 0.75rem 1.25rem;
}
.pasar .card_list .list-group-item-body .card-inactive {
  padding: 12.5px 0;
}
.pasar .card_list .list-group-item-body .card-active {
  border-radius: 12px;
  background-color: #eef7ee;
  padding: 12.5px 16px;
}
.pasar .card_list .list-group-item-body .card-active header {
  border-bottom: 0.3px solid #bebebe;
  padding-bottom: 20.5px;
  margin-bottom: 8px;
}
.pasar .card_list .list-group-item-body .card-active .instruksi {
  font-weight: 400;
  font-size: 12px;
  line-height: 21px;
  color: #606060;
  margin-top: 0;
  list-style-type: disc;
  padding-left: 16px;
}
.pasar .profil_preview {
  position: relative;
}
.pasar .profil_preview::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 18.45px;
  display: inline-block;
  background: rgba(55, 55, 55, 0.65);
}
.pasar .formInput_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.pasar .formInput_wrapper .iconify {
  font-size: 3rem;
  color: #fff;
}
.pasar .product_image {
  border-radius: 8px 0 0 8px;
  -o-object-fit: cover;
     object-fit: cover;
}
.pasar .list_riwayat_tab {
  background-color: #009846;
}
.pasar .list_riwayat_tab .nav-link {
  background-color: #009846;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid #009846;
  padding-top: 12px;
  padding-bottom: 12px;
}
.pasar .list_riwayat_tab .nav-link.active {
  border-bottom: 3px solid #fff;
}
.pasar .card_detail_riwayat {
  display: flex;
  align-items: center;
  border-radius: 12px;
  background-color: #fff;
}
.pasar .card_detail_riwayat img {
  width: 96px;
  height: 100%;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.pasar .card_detail_riwayat .card-body {
  padding: 12px 16px 16px 16px;
}
.pasar .card_detail_riwayat .card-body h3 {
  font-size: 16px;
  text-align: right;
  color: #212121;
}
.pasar .detail-riwayat {
  padding-bottom: 8.5rem;
}
.pasar .detail-riwayat .card_detail_riwayat img {
  height: 113px;
}
.pasar .footer-detail-riwayat {
  position: fixed;
  width: 100%;
  max-width: 375px;
  bottom: 0;
}

.ppob .loading_indicator .spinner-grow {
  color: #009846;
}
.ppob .button_bottom {
  box-shadow: 0px -3px 15px rgba(235, 87, 87, 0.05);
}
.ppob .transaksi_terakhir {
  background: linear-gradient(359.62deg, #eb5757 -11.41%, #de9b5e 178.68%);
  border-radius: 16px;
}
.ppob .transaksi_terakhir > div {
  margin-top: 1rem;
}
.ppob .transaksi_terakhir > div:first-child {
  margin-top: 0;
}
.ppob .transaksi_terakhir p,
.ppob .transaksi_terakhir h1 {
  margin-bottom: 0;
  color: #ffffff;
  font-weight: 600;
}
.ppob .transaksi_terakhir p:nth-child(even) {
  font-weight: 800;
  font-size: 0.875rem;
}
.ppob .menu_ppob {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1rem;
}
.ppob .menu_item {
  display: block;
}
.ppob .menu_item img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.ppob .menu_item .menu_label {
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.2em;
  color: #373737;
  text-align: center;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
}
.ppob .customRadio_wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.ppob .nominal_card input[type=radio]:checked ~ div {
  background-color: #eb5757;
}
.ppob .card {
  border: 1px solid #ebeff2;
  margin-top: 0.5rem;
  padding: 1rem;
}
.ppob .card p {
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 1.255em;
  color: #bebebe;
}
.ppob .riwayatBayar_ppob .card p {
  font-size: 0.75rem;
  line-height: 1.5em;
}
.ppob .list_ppob {
  border-bottom: 1px solid #d0d5d7;
  padding: 1.5rem 0.5rem;
}
.ppob .list_ppob:first-child {
  padding-top: 0;
}
.ppob .list_ppob:last-child {
  border: 0;
  padding-bottom: 0;
}
.ppob .list_ppob h2 {
  font-weight: 600;
}
.ppob .list_ppob h1 {
  font-size: 1.375rem;
  font-weight: 800;
}
.ppob .list_ppob h2,
.ppob .list_ppob p {
  color: #000;
}

.merchant .badge {
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0em;
  text-align: center;
  padding: 8px 16px 8px 16px;
  border-radius: 12px;
}
.merchant .badge.badge-green {
  color: #009846;
  background-color: #eef7ee;
}
.merchant .badge.badge-orange {
  color: #e77a3c;
  background-color: #fef9f6;
}
.merchant .badge.badge-red {
  color: #e74c3c;
  background-color: #fff1f0;
}
.merchant .header_merchant {
  padding: 0.8rem 0.9375rem 0.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.merchant .header_merchant .notification > span,
.merchant .header_merchant .notification .iconify {
  color: #000;
}
.merchant .header_merchant .notification > span {
  margin-left: 0.625rem;
}
.merchant .kartu_anggota button {
  border: none;
  background-color: transparent;
  outline: none;
}
.merchant .kartu_inner {
  overflow: hidden;
  background: linear-gradient(359.62deg, #1e82c5 -11.41%, #8dc9f2 111.93%);
  border-radius: 16px;
  position: relative;
}
.merchant .kartu_inner .icon_figure {
  position: absolute;
  right: 0;
  bottom: 0;
}
.merchant .kartu_content {
  position: relative;
}
.merchant .kartu_content button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  background: rgba(30, 130, 197, 0.4);
  border-radius: 4px;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #ffffff;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
}
.merchant .card_list {
  margin-top: 0.75rem;
  border: 1px solid #f7f7f7;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
}
.merchant .card_list .list-group-item {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.255em;
  color: #000;
  position: relative;
  border: 1px solid rgba(190, 190, 190, 0.3);
  border-left: 0;
  border-right: 0;
}
.merchant .card_list .list-group-item::after {
  content: url("https://api.iconify.design/ri/arrow-drop-right-line.svg?color=%23071D2C&width=20");
  position: absolute;
  right: 1rem;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.merchant .fade-in {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  will-change: opacity;
}
.merchant .foto_profil {
  margin-top: 2.5rem;
  width: 100%;
}
.merchant .profil_preview {
  position: relative;
  width: 100%;
  height: 104px;
}
.merchant .profil_preview::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: inline-block;
  background: rgba(55, 55, 55, 0.65);
}
.merchant .profil_preview.bg-transparent {
  background: transparent;
}
.merchant .profil_preview.bg-transparent::after {
  background: transparent;
}
.merchant .formInput_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.merchant .formInput_wrapper label img {
  height: 39px;
}
.merchant .formInput_wrapper label img.default {
  width: 104px !important;
  height: 104px !important;
}
.merchant .formInput_wrapper label h3 {
  font-size: 9px;
}
.merchant .formInput_wrapper .iconify {
  font-size: 3rem;
  color: #fff;
}
.merchant .card_alamat {
  background-color: #fff;
  box-shadow: 0px 2px 10px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
  border: 1px solid #f7f7f7;
  margin-top: 1.5rem;
}
.merchant .card_alamat:first-child {
  margin-top: 0;
}
.merchant .card_alamat:last-of-type {
  margin-bottom: 4rem;
}
.merchant .card_alamat p {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.3em;
  color: #5d5c5d;
}
.merchant .tambahAlamat_btn {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: calc(100% - 1.875rem);
}
.merchant .simpanAlamat_btn {
  margin-top: 4rem;
}
.merchant .datepicker_wrapper {
  position: relative;
}
.merchant .datepicker_wrapper .form-control {
  cursor: pointer;
}
.merchant .datepicker_icon {
  width: 100%;
  height: 100%;
  max-width: 3rem;
  background-color: #1e82c5;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0px 8px 8px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.merchant .react-datepicker__navigation--years-upcoming {
  background: url("https://api.iconify.design/ri/arrow-drop-up-line.svg") no-repeat center center/contain !important;
}
.merchant .react-datepicker__navigation--years-previous {
  background: url("https://api.iconify.design/ri/arrow-drop-down-line.svg") no-repeat center center/contain !important;
}
.merchant .avatar {
  width: 100%;
  height: 104px;
  border-radius: 12px;
}
.merchant .produk_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.merchant .produk_header p {
  font-size: 14px;
}
.merchant .produk_header .tab-view {
  display: flex;
  gap: 16px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #dcdcdc;
  background-color: #fff;
}
.merchant .produk_header .tab-view .btn {
  border-radius: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.merchant .produk_header .tab-view .btn-default {
  border: none;
  color: #020406;
}
.merchant .scroll-image {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: auto;
}
.merchant .scroll-image .foto_profil {
  width: 104px;
  margin: 0;
}
.merchant .icon-ekspedisi {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}
.merchant .list_riwayat_tab {
  background-color: #009846;
  flex-wrap: nowrap;
  width: 374px;
  overflow: auto;
  white-space: nowrap;
  display: flex;
}
.merchant .list_riwayat_tab .nav-link {
  background-color: #009846;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-bottom: 3px solid #009846;
  padding-top: 12px;
  padding-bottom: 12px;
}
.merchant .list_riwayat_tab .nav-link.active {
  border-bottom: 3px solid #fff;
}
.merchant .card_detail_riwayat {
  display: flex;
  align-items: center;
}
.merchant .card_detail_riwayat img {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.merchant .card_detail_riwayat .card-body {
  padding: 12px 16px 16px 16px;
}
.merchant .card_detail_riwayat .card-body h3 {
  font-size: 16px;
  text-align: right;
  color: #212121;
}
.merchant .main-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 375px;
}