/* BEGIN:: Body */
body {
    background-color: #F2F2F2;
}
header,
header > nav.navbar > #navbar-content,
header > nav.navbar > #boxActionMember,
.footer,
.footer-bersedekah {
    display: none !important;
}
/* END:: Body */

/* BEGIN:: Page */
.donasi-page {
    width: 100%;
    max-width: 500px;
    padding: 0 15px;
    display: block;
    margin: 10px auto;
}
.box {
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: 0px 5px 20px #DDDDDD;
    padding: 15px;
    background-color: #FFF;
    position: relative;
}
.box > h2.title {
    font-size: 14px;
    font-weight: 600;
    color: #CCC;
    margin: 0 0 10px;
}
label.ket {
    font-size: 12px;
    line-height: 14px;
    color: #999;
    text-align: justify;
    margin-top: 15px;
    margin-bottom: 0;
    display: block;
}
label.ket > span {
    display: inline-block;
    width: 150px;
}
label.ket.wakaf-produktif {
    margin: 10px 0 -12px;
}
.powered-paybill {
    font-size: 10px;
    width: 100%;
    text-align: right;
    margin: 5px 0 0;
}
.powered-paybill > img {
    height: 14px;
    vertical-align: bottom;
    margin-left: 5px;
}
.active {
    background-color: var(--button-color);
    color: #FFF !important;
}
.hidden {
    display: none;
}
.edit-nilai {
    position: absolute;
    font-size: 35px;
    top: 20px;
    right: 17px;
    color: #EEEE;
}
.alert {
    display: none;
    color: red;
    font-size: 12px;
    padding: 0;
    margin: 5px 0 10px;
    line-height: 13px;
}
.has-danger .alert {
    display: block;
}
.has-danger input,
.has-danger text-area,
.has-danger select {
    border: red thin solid !important;
}
.has-danger .ket {
    display: none;
}
.clear-text {
    position: absolute;
    right: 10px;
    top: 13px;
    color: #CCC;
    cursor: pointer;
    transition: all .5s;
    display: none;
}
.clear-text:hover {
    color: var(--button-color);
    transform: scale(1.3);
}
/* END:: Page */

/*BEGIN:: Box Program*/
.box-program {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.box-program > img {
    width: 100px;
    height: 60px;
    border-radius: 5px;
}
.box-program > .box-detail {
    margin-left: 15px;
}
.box-program > .box-detail > label.lembaga {
    display: block;
    font-size: 12px;
    color: #333;
    line-height: 12px;
    margin-bottom: 5px;
}
.box-program > .box-detail > label.lembaga > img {
    height: 14px;
    vertical-align: middle;
    margin-right: 2px;
}
.box-program > .box-detail > span {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 12px;
    margin-bottom: 0px;
}
.box-program > .box-detail > h1 {
    margin: 3px 0 0;
    font-size: 14px;
    font-weight: 600;
}
/*END:: Box Program*/

/*BEGIN:: Box Nominal */
.box > .btn-selanjutnya {
    background-color: var(--button-color);
    color: #FFF;
    text-align: center;
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    margin: 20px 0 0;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.box > .btn-selanjutnya:hover {
    background-color: var(--text-color);
}
/*END:: Box Nominal */

/*BEGIN:: Box Nominal Bebas*/
.box-nominal > .nominal-instant {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: calc(100% + 20px);
    margin-left: -5px;
}
.box-nominal > .nominal-instant > .nominal,
.box-nominal > .nominal-instant > .lainnya {
    width: calc(50% - 15px);
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 5px 20px #E2E2E2;
    padding: 10px 20px;
    text-align: left;
    margin: 5px;
    color: var(--button-color);
    font-weight: 700;
    font-size: 14px;
    transition: all 1s;
    position: relative;
    border: #DDD thin solid;
}
.box-nominal > .nominal-instant > .lainnya {
    border: none;
}
.box-nominal > .nominal-instant > .lainnya:hover,
.box-nominal > .nominal-instant > .lainnya:hover,
.box-nominal > .nominal-instant > .nominal:hover,
.box-nominal > .nominal-instant > .nominal.lainnya:hover{
    background-color: var(--button-color);
    color: #FFF;
}
.box-nominal > .nominal-instant > .lainnya {
    width: calc(100% - 20px);
}
.box-nominal > .nominal-instant > .lainnya > i,
.box-nominal > .nominal-instant > .nominal > i {
    position: absolute;
    right: 10px;
    top: calc(40% - 2px);
}
.box-nominal > .box-nominal-bebas {
    position: relative;
}
.box-nominal > .box-nominal-bebas > h2.nominal-lainnya {
    margin: 5px 0 10px;
    font-size: 14px;
    color: #999;
}
.box-nominal > .box-nominal-bebas > div {
    position: relative;
}
.box-nominal > .box-nominal-bebas > div > span {
    position: absolute;
    font-size: 18px;
    font-weight: 600;
    color: #999;
    top: 7px;
    left: 15px;
}
.box-nominal > .box-nominal-bebas > div > input {
    text-align: right;
    color: var(--button-color);
    padding: 20px 15px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}
/*END:: Box Nominal Bebas*/

/*BEGIN:: Box Nominal Paket*/
.box-nominal.paket > .box-step-paket {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.box-nominal.paket > .box-step-paket > .input-step-paket {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    flex-wrap: nowrap;
    margin-right: 20px;
}
.box-nominal.paket > .box-step-paket > .input-step-paket > button {
    width: 40px;
    text-align: center;
    border: #CCC thin solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    padding: 0px 0 4px;
    cursor: pointer;
}
.box-nominal.paket > .box-step-paket > .input-step-paket > button[func="plus"] {
    border-radius: 0 5px 5px 0;
    border-left: none;
}
.box-nominal.paket > .box-step-paket > .input-step-paket > button[func="minus"] {
    border-radius: 5px 0 0 5px;
    border-right: none;
}
.box-nominal.paket > .box-step-paket > .input-step-paket > input[name="jumlahPaket"] {
    font-size: 22px;
    border-radius: 0;
    text-align: center;
    padding: 2px 0px;
    color: var(--button-color);
    font-weight: 600;
    margin-right: 0;
    width: 75px;
    border: #CCC thin solid;
    border-left: none;
    border-right: none;
}
.box-nominal.paket > .box-step-paket > label.ket-harga {
    margin: -10px 0;
    font-size: 22px;
    text-align: left;
    width: 100%;
    font-weight: 600;
    color: var(--button-color);
}
.box-step-paket label.ket-harga > span {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: -7px;
    margin-top: 4px;
}
.box-nominal.paket label.caption-paket-instant {
    font-size: 13px;
    font-weight: 600;
    color: #CCC;
    margin: 7px 0;
}
.box-nominal.paket .paket-instant {
    display: flex;
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-bottom: -10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    justify-items: center;
}
.box-nominal.paket .paket-instant > .paket,
.box-nominal.paket .paket-instant > .lainnya {
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 5px 20px #e2e2e2;
    padding: 10px;
    text-align: left;
    margin: 5px;
    color: var(--button-color);
    font-weight: 700;
    font-size: 16px;
    transition: all 1s;
    position: relative;
    border: #CCC thin solid;
}
.box-nominal.paket .paket-instant > .paket {
    width: calc(25% - 10px);
}
.box-nominal.paket .paket-instant > .lainnya {
    width: 100%;
    font-size: 14px;
}
.box-nominal.paket .paket-instant > .paket:hover,
.box-nominal.paket .paket-instant > .lainnya:hover {
    background-color: var(--button-color);
    color: #FFF;
}
.box-nominal.paket .paket-instant > .paket > span,
.box-nominal.paket .paket-instant > .lainnya > span {
    font-size: 10px;
    color: #AAA;
    font-weight: 600;
    vertical-align: middle;
    display: block;
    margin-top: -5px;
}
.box-nominal.paket .paket-instant > .paket > span:hover,
.box-nominal.paket .paket-instant > .lainnya > span:hover {
    color: #FFF;
}
.box-nominal.paket .paket-instant > .paket > i,
.box-nominal.paket .paket-instant > .lainnya > i {
    position: absolute;
    right: 10px;
    top: 19px;
}
.box-nominal.paket .paket-instant > .lainnya > i {
    top: 14px;
}
/*END:: Box Nominal Paket*/

/*BEGIN:: Box Nominal Tetap*/
label.ket-harga > span {
    font-size: 14px;
    color: #999;
}
label.ket-harga > i {
    font-size: 14px;
    color: #999;
    font-style: inherit;
    margin-right: 5px;
}
label.ket-nilai > span.ket-harga-cicilan,
label.ket-harga > span.ket-harga-cicilan {
    display: block;
    font-size: 11px !important;
    margin: 0px 0 15px 0;
    color: #FFF !important;
    background-color: #666;
    padding: 2px 10px;
    border-radius: 4px;
    width: fit-content;
    font-weight: 400;
    letter-spacing: 1px;
}
.box-nominal.tetap > label.ket-harga {
    margin: -10px 0 -8px;
    font-size: 22px;
    text-align: left;
    width: 100%;
    font-weight: 600;
    color: var(--button-color);
    display: block;
}
.box-nominal.tetap #btnDetilZakat {
    font-size: 12px;
    margin: 0;
    color: var(--button-color);
    text-decoration: underline;
    cursor: pointer;
}
.nilai-potongan {
    margin: -10px 0 5px;
    display: block;
}
.nilai-potongan > i {
    color: red;
    font-size: 14px;
    margin-right: 5px;
    vertical-align: middle;
}
.nilai-potongan > span {
    color: red;
    font-weight: bold;
    font-size: 14px;
    text-decoration: line-through;
}
.box-nominal.paket .nilai-potongan {
    display: block;
    margin: -10px 0 -10px;
    width: 100%;
}
.box-nominal.paket .nilai-potongan > i {
    font-size: 10px;
    vertical-align: baseline;
    margin-right: 2px;
}
.box-nominal.paket .nilai-potongan > span {
    font-size: 12px;
}
/*END:: Box Nominal Tetap*/

/*BEGIN:: Box Nominal Final*/
.box-nominal.final,
.box-nominal.final * {
    cursor: pointer;
}
.box-nominal.final h2.title {
    margin-bottom: 6px;
}
.box-nominal.final > label.ket-nilai {
    margin: -5px 0;
    font-size: 20px;
    text-align: left;
    width: 100%;
    font-weight: 600;
    color: var(--button-color);
    display: block;
}
.box-nominal.final > label.ket-nilai > span {
    font-size: 14px;
    color: #999;
}
/*END:: Box Nominal Tetap*/

/* BEGIN:: Box Info Donatur */
.box-info-donatur {
    padding-bottom: 20px;
}
.box-info-donatur > .form-group {
    position: relative;
}
.box-info-donatur > .form-group > input {
    padding: 20px 15px;
    font-size: 14px;
}
.box-info-donatur > .form-group > input::placeholder {
    color: #CCC;
}
.box-info-donatur > .form-group.extras {
    border-bottom: #DDD thin dashed;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
.box-info-donatur > .form-group.extras:last-child {
    border: none;
}
.box-info-donatur > .form-group.extras > .detail {
    display: none;
    margin: 0 0 -15px;
    background-color: #F2F2F2;
    padding: 15px;
    border-radius: 5px;
}
.box-info-donatur > .form-group.extras > .detail > label {
    margin-bottom: 10px;
    font-size: 14px;
}
.box-info-donatur > .form-group.extras > .detail input,
.box-info-donatur > .form-group.extras > .detail select,
.box-info-donatur > .form-group.extras > .detail textarea {
    display: block;
    border-radius: 5px;
    padding: 10px 10px;
    width: 100%;
    border: #DDD thin solid;
    height: 45px;
    font-size: 14px;
    background-color: #FFF;
}
.box-info-donatur > .form-group.extras > .detail select {
    cursor: pointer;
}
.box-info-donatur > .form-group.extras > .detail textarea {
    height: 150px;
}
.box-info-donatur > .form-group.extras > .detail input[type='checkbox'] {
    display: none;
}
.box-info-donatur > .form-group.extras > .detail input::placeholder,
.box-info-donatur > .form-group.extras > .detail textarea::placeholder {
    color: #CCC;
}
.box-info-donatur > .form-group.extras > .detail > .ket {
    color: #666;
    font-size: 12px;
}
.box-info-donatur > .form-group.extras > .detail .checkbox > label {
    margin-left: 0px;
}
.box-info-donatur > .form-group.extras > .detail .checkbox > label::before,
.box-info-donatur > .form-group.extras > .detail .checkbox > label > span {
    color: #666;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}
.box-info-donatur > .form-group.extras > .detail .checkbox > label > span {
    top: -2px;
}

/* Mudhahhy */
.box-info-donatur > .form-group.extras > .detail.detail-mudhahhy {
    display: block;
}
.box-info-donatur > .form-group.extras > .detail.detail-mudhahhy > .box-mudhahhy {
    position: relative;
    margin-bottom: 15px;
}
.box-info-donatur > .form-group.extras > .detail.detail-mudhahhy > .box-mudhahhy > input {
    text-transform: capitalize;
}
.box-info-donatur > .form-group.extras > .detail.detail-mudhahhy > .box-mudhahhy .btn {
    display: inline-block;
    text-align: center;
    margin-bottom: 0;
    margin-top: -5px;
    border-radius: 12px;
    padding: 1px 5px;
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 20px;
}
.box-info-donatur > .form-group.extras > .detail.detail-mudhahhy > .box-mudhahhy .btn.add {
    color: var(--button-color);
}
.box-info-donatur > .form-group.extras > .detail.detail-mudhahhy > .ket {
    margin-top: -10px;
    margin-bottom: 0;
}
/* Cicilan */
.box-info-donatur > .form-group.extras > .detail.ket-cicilan,
.box-info-donatur > .form-group.extras > .detail.ket-cicilan > div {
    /*display: flex;*/
    flex-wrap: wrap;
    justify-content: flex-start;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan h5 {
    margin: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    width: 100%;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan > .box-detil-pembayaran-cicilan {
    display: none;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan > p {
    margin: 0;
    font-size: 14px;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan.ket-cicilan-3 {
    display: none;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan.ket-cicilan-3 > a {
    margin: 0;
    font-size: 14px;
    text-align: center;
    width: 100%;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan label {
    width: 50%;
    text-align: left;
    margin: 0 0 5px;
    font-size: 14px;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan label.caption {
    font-weight: 600;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan label.label {

}
.box-info-donatur > .form-group.extras > .checkbox.has-danger + .detail-cicilan {
    border: #fb9c9c thin solid;
}
.box-info-donatur > .form-group.extras .checkbox.has-danger > label[for="checkbox_syarat_cicilan"] > span {
    color: red;
}
.box-info-donatur > .form-group.extras .checkbox > label[for="checkbox_syarat_cicilan"] #btnSyaratCicilan {
    color: var(--button-color);
    font-style: normal;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan .checkbox label {
    width: 100%;
    margin: 8px 0 0;
}
.box-info-donatur > .form-group.extras > .detail.ket-cicilan .checkbox label > span {
    vertical-align: middle;
    font-size: 12px;
}
/* Wakaf Uang */
.box-info-donatur > .form-group.extras.box-sertifikat-wakaf-uang > .caption-wakaf-uang,
.box-info-donatur > .form-group.extras.box-temporer-wakaf-uang > .caption-wakaf-uang {
    padding: 10px;
    background-color: #EEE;
    border-radius: 5px;
}
.box-info-donatur > .form-group.extras.box-sertifikat-wakaf-uang > .caption-wakaf-uang > label,
.box-info-donatur > .form-group.extras.box-temporer-wakaf-uang > .caption-wakaf-uang > label {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.box-info-donatur > .form-group.extras.box-sertifikat-wakaf-uang > .caption-wakaf-uang > label > i,
.box-info-donatur > .form-group.extras.box-temporer-wakaf-uang > .caption-wakaf-uang > label > i {
    display: block;
    font-weight: 400;
    font-size: 12px;
    font-style: initial;
}
.box-info-donatur > .form-group.extras.box-sertifikat-wakaf-uang,
.box-info-donatur > .form-group.extras.box-temporer-wakaf-uang {
    display: none;
}
.box-info-donatur > .form-group.extras.box-sertifikat-wakaf-uang .label-checkbox > i {
    display: block;
    color: #999;
    font-size: 12px;
    font-weight: 400;
    margin-left: 21px;
    margin-top: -3px;
    margin-bottom: -10px;
}
.box-info-donatur > .form-group.extras > .detail.detail-sertifikatwakafuang,
.box-info-donatur > .form-group.extras > .detail.detail-temporerwakafuang {
    margin-bottom: -20px;
}
.box-info-donatur > .form-group.extras > .detail.detail-sertifikatwakafuang:last-child,
.box-info-donatur > .form-group.extras > .detail.detail-temporerwakafuang:last-child {
    margin-bottom: 20px;
}
.box-info-donatur > .form-group.extras > .detail.detail-sertifikatwakafuang > .ket {
    margin-bottom: 0;
}
.box-info-donatur > .form-group.extras > .detail.detail-sertifikatwakafuang > label.alert {
    font-size: 12px;
    margin-bottom: -5px
}
/* Checkbox */
.box-info-donatur > .form-group > .checkbox.box-anonim {
    margin-bottom: -15px;
}
.box-info-donatur > .form-group > .checkbox.cb-box-pesan {
    margin-bottom: -25px;
}
.box-info-donatur > .form-group.extras > .detail.detail-pesan {
    margin-top: 30px;
}
.box-info-donatur > .form-group > .checkbox > label > span {
    font-weight: 600;
    font-size: 14px;
    top: -1px;
    color: #666;
    width: 400px;
    display: block;
}
.box-info-donatur > .form-group > .checkbox label::before {
    color: #AAAAAA;
    background-color: #FFF;
    top: 1px;
}
.box-info-donatur > .form-group > .checkbox label::after {
    top: 4px;
}
.box-info-donatur > .form-group > .checkbox * {
    cursor: pointer;
}
.box-info-donatur > .form-group > .checkbox label.checkbox_recurring {
    margin-left: -17px;
    margin-top: 7px;
}
.box-info-donatur > .form-group > .checkbox label[for='cbTemporerCwld'] {
    margin: 0;
}
#modalSyaratCicilan > .modal-dialog {
    max-width: 470px;
    margin: 0 auto;
}
#modalSyaratCicilan > .modal-dialog > .modal-content {
    height: 100vh;
}
#modalSyaratCicilan > .modal-dialog > .modal-content > .modal-header > .modal-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}
#modalSyaratCicilan > .modal-dialog > .modal-content > .modal-body {
    padding: 15px;
}
#modalSyaratCicilan > .modal-dialog > .modal-content > .modal-body > .box-informasi-cicilan {
    font-size: 14px;
    white-space: pre-line;
}
#modalSyaratCicilan > .modal-dialog .modal-footer > button {
    width: 100%;
}

/* Select 2 */
.box-info-donatur > .form-group > .detail .select2-container {
    width: 100% !important;
}
.box-info-donatur > .form-group > .detail .select2-container .select2-selection {
    height: 40px !important;
    padding-top: 4px;
    padding-left: 8px;
    font-size: 14px;
}
.box-info-donatur > .form-group > .detail.has-danger .select2-container .select2-selection {
    border: 1px solid red;
}
.select2-container .select2-search {
    margin-top: -41px;
}
.select2-container .select2-search > input {
    padding: 5px 10px;
    font-size: 14px;
}
.select2-container .select2-results > ul > li {
    font-size: 14px;
}
/* END:: Box Info Donatur */

/*BEGIN:: Infaq Pemeliharaan Sistem*/
.box-nominal.box-sumbangan > .nominal-instant {
    flex-wrap: nowrap;
    width: 100%;
}
.box-nominal.box-sumbangan > .nominal-instant > .sumbangan {

}
.box-nominal.box-sumbangan > .lainnya {
    width: calc(100% - 20px);
    margin: 10px 0 0 5px;
    text-align: right;
    color: #999;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
    padding: 0;
}
.box-nominal.box-sumbangan > .nominal-instant > .lainnya:hover {
    color: #999;
    background-color: #FFF;
}
.box-nominal.box-sumbangan > .box-nominal-bebas {
    position: relative;
}
.box-nominal.box-sumbangan > .box-nominal-bebas > div {

}
.box-nominal.box-sumbangan > .box-nominal-bebas > div > span {
    position: absolute;
    top: 7px;
    left: 10px;
    font-weight: 600;
    color: #999;
}
.box-nominal.box-sumbangan > .box-nominal-bebas > div > input {
    text-align: right;
    color: var(--button-color);
    font-weight: 700;
}
/*END:: Infaq Pemeliharaan Sistem*/

/*BEGIN:: Box Summary Donatur*/
.box-summary-donatur,
.box-summary-donatur * {
    cursor: pointer;
}
.box-summary-donatur > div {
    display: flex;
    flex-wrap: wrap;
}
.box-summary-donatur > div > label {
    width: 100%;
    margin: 0;
    color: #333;
}
.box-summary-donatur > div > label.nama {
    font-size: 16px;
    font-weight: 600;
    margin-top: -5px;
    color: #666;
    white-space: pre-line;
    word-break: break-word;
    line-height: 18px;
    margin-bottom: 5px;
    width: calc(100% - 30px);
}
.box-summary-donatur > div > label.phone {
    font-size: 12px;
    margin-top: 0;
}
.box-summary-donatur > div > label.email {
    font-size: 12px;
    margin-top: -5px;
}
.box-summary-donatur > .edit-nilai {
    top: calc(40% - 5px);
}
/* BEGIN:: Box Metode Pembayaran */
.box-metode-pembayaran {

}
.box-metode-pembayaran.box > h2.title {
    margin-bottom: -5px;
}
.box-metode-pembayaran > .group {
    order: 2;
}
.box-metode-pembayaran > .group.payment-active {
    order: 1;
}
.box-metode-pembayaran > .group > .title {
    margin: 20px 0 10px;
    font-weight: 600;
    position: relative;
    width: 100%;
}
.box-metode-pembayaran > .group > .title > span {
    display: block;
    color: #999;
    font-weight: 500;
    font-size: 14px;
    margin-top: -3px;
}
.box-metode-pembayaran > .group > .title > i {    font-size: 12px;
    padding: 1px 6px;
    vertical-align: baseline;
    display: block;
    width: max-content;
    border-radius: 5px;
    position: absolute;
    right: 0px;
    top: 21px;

    color: #FFFFFF;
    background-color: #d40808;
}
.box-metode-pembayaran > .group > .title > i.green {
    background-color: #007f46;
}
.box-metode-pembayaran > .group > .list-payment {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 10px);
    margin-left: -5px;
}
.box-metode-pembayaran > .group > .list-payment > .payment {
    display: flex;
    flex-wrap: wrap;
    width: calc(50% - 10px);
    border-radius: 5px;
    box-shadow: 0px 5px 20px #e2e2e2;
    padding: 15px 20px;
    text-align: left;
    margin: 5px;
    color: var(--button-color);
    font-weight: 700;
    font-size: 14px;
    transition: all 1s;
    position: relative;
}
.box-metode-pembayaran > .group > .list-payment > .payment.lainnya {
    display: none;
}
.box-metode-pembayaran > .group > .list-payment > .payment,
.box-metode-pembayaran > .group > .list-payment > .payment * {
    cursor: no-drop;
}
.box-metode-pembayaran > .group.payment-active > .list-payment > .payment,
.box-metode-pembayaran > .group.payment-active > .list-payment > .payment * {
    cursor: pointer;
}
.box-metode-pembayaran > .group.payment-active > .list-payment > .payment:hover,
.box-metode-pembayaran > .group.payment-active > .list-payment > .selengkapnya:hover {
    background-color: var(--button-color);
    color: #FFF;
}
.box-metode-pembayaran > .group > .list-payment > .payment > img {
    height: 25px;
    /*width: 65px;*/
    margin-right: 10px;
    filter: grayscale(1);
}
.box-metode-pembayaran > .group.payment-active > .list-payment > .payment > img {
    filter: grayscale(0);
}
.box-metode-pembayaran > .group > .list-payment > .payment > label {
    margin: 0;
    width: 100%;
    color: #AAA;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 600;
}
.box-metode-pembayaran > .group > .list-payment > .payment > i {
    position: absolute;
    right: 10px;
    top: 30px;
    color: #CCC;
}
.box-metode-pembayaran > .group.payment-active > .list-payment > .payment:hover > label,
.box-metode-pembayaran > .group.payment-active > .list-payment > .payment:hover > i,
.box-metode-pembayaran > .group.payment-active > .list-payment > .selengkapnya:hover > label,
.box-metode-pembayaran > .group.payment-active > .list-payment > .selengkapnya:hover > i {
    color: #FFF;
}
.box-metode-pembayaran > .group > .list-payment > .selengkapnya {
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 5px 20px #e2e2e2;
    padding: 10px 20px;
    text-align: left;
    margin: 5px;
    font-weight: 700;
    transition: all 1s;
    position: relative;
    color: #999;
}
.box-metode-pembayaran > .group > .list-payment > .selengkapnya * {
    cursor: no-drop;
}
.box-metode-pembayaran > .group.payment-active > .list-payment > .selengkapnya * {
    cursor: pointer;
}
.box-metode-pembayaran > .group > .list-payment > .selengkapnya > label {
    margin: 0;
    font-size: 14px;
}
.box-metode-pembayaran > .group > .list-payment > .selengkapnya > i {
    top: 15px;
    right: 10px;
    position: absolute;
}
/* END:: Box Metode Pembayaran */

/* BEGIN:: Box Summary Metode Pembayaran*/
.box-summary-metode-pembayaran,
.box-summary-metode-pembayaran *{
    cursor: pointer;
}
.box-summary-metode-pembayaran > div {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}
.box-summary-metode-pembayaran > i {
    top: 40px;
}
.box-summary-metode-pembayaran > div > div{
    width: 50%;
}
.box-summary-metode-pembayaran > div > div.metode > img{
    height: 25px;
    display: block;
}
.box-summary-metode-pembayaran > div > div.metode > label{
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: #666;
}
.box-summary-metode-pembayaran > div > div.biaya > label{
    margin: 0;
}
.box-summary-metode-pembayaran > div > div.biaya > label.caption{
    font-size: 12px;
    display: block;
    margin-bottom: -3px;
}
.box-summary-metode-pembayaran > div > div.biaya > label.value{
    font-size: 14px;
    width: 100px;
}
/* END:: Box Summary Metode Pembayaran*/

/* BEGIN:: Box Summary Pembayaran */
.box-summary-pembayaran {

}
.box-summary-pembayaran > div {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
.box-summary-pembayaran > div#lastAdminAmount > label > i {
    display: block;
    font-size: 12px;
    font-style: normal;
    color: #999;
}
.box-summary-pembayaran > div > label {
    margin: 0;
    font-size: 13px;
    /*text-align: right;*/
}
.box-summary-pembayaran > div > label.caption {
    width: 50%;
}
.box-summary-pembayaran > div > label.value {
    width: 50%;
    font-weight: 600;
}
/* END:: Box Summary Pembayaran */

/* BEGIN:: Box Back Button */
.box-back-button {
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    padding: 0 15px;
}
.box-back-button > label {
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}
.box-back-button > label:hover {
    color: var(--button-color);
}
.box-back-button > label > i {
    margin-right: 5px;
    font-size: 13px;
}
/* END:: Box Back Button */

/* BEGIN:: Button Lanjutkan Pembayaran */
#btnLanjutkanPembayaran {
    background-color: var(--button-color);
    width: 100%;
    padding: 9px;
    border-radius: 5px;
    color: #FFF;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 16px;
    box-shadow: 0px 5px 20px #ccc;
    margin: 0;
}
/* END:: Button Lanjutkan Pembayaran */

/* BEGIN:: Box Program Tidak Aktif */
.box-program-not-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 30px 50px;
}
.box-program-not-active > img {
    height: 150px;
}
.box-program-not-active > h2 {
    color: var(--button-color);
    width: 100%;
    text-align: center;
    margin: 40px 0 5px;
    font-size: 24px;
    font-weight: 600;
}
.box-program-not-active > label {
    font-weight: 500;
    font-size: 15px;
    text-align: center;
}
.box-program-not-active > a {
    background-color: var(--button-color);
    color: #FFF;
    width: 100%;
    text-align: center;
    padding: 5px;
    margin: 20px 0 0;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.box-program-not-active > a:hover {
    text-decoration: none;
}
/* END:: Box Program Tidak Aktif */

.empty:empty {
    border-radius: 4px;
    margin-top: 2px;
    height: 15px;
    background-image: linear-gradient(
            100deg
            , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 80% ), linear-gradient( lightgray 100vh, transparent 0 );
    background-size: 175px 200px, 100% 200px;
    background-position: 0 0, 0 0;
    animation: empty-shine 1s infinite;
}
@keyframes empty-shine { to { background-position: 500px 0, 0 0; } }

.btn-error {
    margin: 20px 0 0;
    background-color: #EEE;
    text-align: center;
    padding: 20px;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ce3d3d;
    word-wrap: break-word;
}
.btn-error > span {
    cursor: pointer;
    color: steelblue;
    text-decoration: underline;
    display: block;
    font-size: 13px;
    font-weight: 600;
}

#modalIkrarWakaf {
    background-color: white;
}
#modalIkrarWakaf .modal-dialog {
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
}
#modalIkrarWakaf .modal-content {
    background-color: var(--button-color);
    border-radius: 10px;
    padding: 20px 0;
}
#modalIkrarWakaf .modal-header {
    border: none;
}
#modalIkrarWakaf .modal-title {
    text-align: center;
    width: 100%;
    font-weight: 600;
    color: #FFFFFF;
}
#modalIkrarWakaf .modal-body {
    color: #FFF;
    text-align: center;
    padding: 10px 10%;
    font-size: 18px;
}
#modalIkrarWakaf label.bismillah {
    font-size: 24px;
    display: block;
    font-weight: 500;
}
#modalIkrarWakaf .modal-footer {
    border: none;
}
#modalIkrarWakaf .modal-footer #btnIkrarWakafLanjutkanPembayaran {
    display: block;
    margin: 0 auto;
    background-color: white;
    color: var(--button-color);
    font-weight: 600;
    padding: 10px 20px 8px;
    white-space: inherit;
    line-height: 20px;
}

.box-summary-pembayaran .box-keterangan-summary {
    display: block;
    text-align: center;
    background-color: #f5f1bc;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0 0;
    font-size: 12px;
}

/* BEGIN:: Khusus Marketplace */
body[marketplace-path="sinarmas-syariah"] .box.box-summary-metode-pembayaran,
body[marketplace-path="sinarmas-syariah"] .box-back-button,
body[marketplace-path="mujamma-sukha"] .box.box-summary-metode-pembayaran,
body[marketplace-path="mujamma-sukha"] .box-back-button{
    display: none !important;
}
/* END:: Khusus Halaman Payment */

.box.box-cashtag-jenius {
    display: none;
    align-items: center;
}
.box.box-cashtag-jenius > label {
    margin: 0 20px 0 0;
    font-size: 14px;
    font-weight: 600;
    min-width: 100px;
    color: #029AD0;
}
.box.box-cashtag-jenius > div {
    width: 100%;
    position: relative;
}
.box.box-cashtag-jenius > div > span {
    position: absolute;
    font-weight: 600;
    color: #999;
    top: 3px;
    left: 8px;
    font-size: 17px;
}
.box.box-cashtag-jenius > div > input {
    width: 100%;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px 5px 5px 21px;
    border: #999 thin solid;
    color: #999;
}

.box-sumbangan .box-nominal-bebas > img {
    margin: 15px 0 10px;
    width: 100%;
}

.box-gender {
    margin-bottom: 10px;
    /*display: flex;*/
    align-items: center;
}
.box-gender > input {
    margin-top: -1px;
    height: 18px;
    width: 18px;
    opacity: 0.7;
    cursor: pointer;
    vertical-align: middle;
}
.box-gender > label {
    margin: 0 15px 1px 2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #666;
}
.ket-wakaf-cwld {
    display: none;
    background-color: #fbffda !important;
    padding: 10px !important;
    font-size: 12px;
    width: 100%;
    text-align: center;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
}
.ket-wakaf-uang-deposito-bsi {
    margin: -5px 0 -5px !important;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px !important;
    color: #666;
}
.box-cb-temporer-cwld {
    margin-bottom: 10px;
}