@media (min-width: 320px) and (max-width: 334px) {

    div.top-banner-program,
    div.top-banner-program div.content {
        height: 215px;
    }

    .top-banner-detail-program button.slick-arrow {
        display: none !important;
    }

    section.program-detail-content div.bantu-donasi {
        display: none;
    }

    section.program-detail-content div.fundraiser > div.box {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }

    section.program-detail-content label.title-detail {
        display: none;
    }

    section.program-detail-content {
        padding-top: 10px;
    }

    section.program-detail-content div.box {
        padding-top: 15px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item{
        font-size: 10px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item > a.nav-link{
        font-size: 11px;
        padding: 7px;
    }

    section.tab-details > div.content-box > div.tab-content {
        padding-bottom: 15px;
    }

    table.list-donatur-program-detail {
        padding-top: 10px;
        padding-bottom: 0px;
        border-spacing: 10px 15px;
        margin-bottom: 10px;
    }

    table.list-donatur-program-detail > tbody > tr {
        display: grid;
    }

    .btn-bantu-donasi {
        margin-top: 10px;
        font-size: 20px;
    }

    .btn-byr-donasi {
        font-size: 15px;
    }

    .kegiatan-program-details {
        display: contents;
        margin-bottom: 0px;
    }

    .donatur-box {
        margin-bottom: 15px;
    }

    .detail-program {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .slider {
        width: 318px;
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;
    }

    .slider-foto {
        width: 100%;
        height: 300px;
    }

    .laporkan {
        margin-top: 20px;
    }

    #sortable3 {
        padding-left: 8px;
    }

    div.top-banner-program div.content > div.title {
        bottom: 0;
    }

    div.top-banner-program div.content > div.title > h2 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: -20px;
        padding-right: 10px;
        padding-left: 25px;
    }

    div.top-banner-program div.content > div.title > h3 {
        font-size: 14px;
        line-height: 14px;
        padding-left: 26px;
        margin-top: 0px;
        margin-bottom: 17px;
    }

    .top-banner-detail-program button.slick-arrow {
        bottom: 60px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi,
    section.program-detail-content label.title-detail{
        font-size: 20px;
    }

    section.top-banner-detail-program > div.program > div.detail-program > div.info-detail-program {
        padding-left: 13px;
        padding-right: 13px;
    }

    section.program-detail-content {
        padding: 10px 13px;
    }

    div.top-banner-program div.content > img.banner-img-program-detail {
        border-radius: 0;
    }

    .program-not-active {
        font-size: 16px;
        color: #999;
        padding: 10px 30px 0px;
        line-height: 22px;
    }

    .hr-class {
        margin-bottom: 0;
        border: none;
    }
    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item > a.nav-link > .counter {
        font-size: 12px;
        margin-left: 1px;
    }

    .program-group {
        margin-bottom: 0px;
    }

    .box-donasi-bottom {
        margin-left: 0px;
        margin-right: 0px;
    }

    .banner-img-program-detail-bawah {
        width: 100%;
    }

    section.top-banner-detail-program div.box > div.description > label.title-detail {
        font-size: 17px;
        height: 47px;
        width: 100%;
    }

    .dropdown-menu-arrow {
        left: 183px;
    }

    #info_terbaru_page .card-body > div.div-one > div.div-tahap {
        padding: 0px;
    }

    .nominalMobile {
        display: block;
    }

    .nominalWeb {
        display: none;
    }

    #label-total-jumlah {
        line-height: 13px;
    }

    div.donatur-box > div.donatur-details > div.donatur-name {
        height: 18px;
    }

    div.donatur-box > div.donatur-details > div.donatur-cash {
        height: unset;
        line-height: 20px;
    }

}

@media (min-width: 335px) and (max-width: 767px){

    section.program-detail-content .program-detail > .detail > label {
        font-size: 12px;
    }

    .program-not-active {
        font-size: 16px;
        color: #999;
        padding: 10px 30px 0px;
        line-height: 22px;
    }

    .hr-class {
        margin-bottom: 0;
        border: none;
    }
    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item > a.nav-link > .counter {
        font-size: 12px;
        margin-left: 1px;
    }

    section.program-detail-content .program-detail > .detail.box-nilai-wakaf {
        /*margin-left: 10px;*/
    }

    section.program-detail-content .program-detail {
        padding: 0;
        padding-bottom: 10px;
    }
    section.program-detail-content .program-detail > .detail {
        margin-top: 5px;
    }
    section.program-detail-content .program-detail > .detail > label.caption {
        font-weight: bold;
        width: 100%;
        margin-bottom: 5px;
        margin-top: 10px;
    }
    section.program-detail-content .program-detail > .detail > label.value {
        margin-bottom: 0;
    }

    div.top-banner-program div.content > img.banner-img-program-detail {
        border-radius: 0;
    }

    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item > a.nav-link{
        font-size: 13px;
        padding: 4px;
    }

    .fundraiser {
        margin: 10px 0px 35px;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi {
        font-size: 20px;
    }

    section.top-banner-detail-program > div.program > div.detail-program > div.info-detail-program {
        padding: 10px 0 25px;
    }

    div.top-banner-program,
    div.top-banner-program div.content {
        height: 200px;
    }

    section.program-detail-content div.bantu-donasi {
        display: none;
    }

    section.program-detail-content div.fundraiser > div.box {
        padding: 0;
    }

    section.program-detail-content div.fundraiser > div.box > p {
        margin-bottom: 5px;
    }

    section.program-detail-content label.title-detail {
        display: none;
    }

    section.program-detail-content {
        padding: 20px 15px;
    }

    section.top-banner-detail-program div.box > div.description {
        padding: 10px 15px;
        margin-bottom: -5px;
    }

    section.top-banner-detail-program div.box > div.description > p {
        margin-bottom: 40px;
        margin-top: 0px;
    }

    section.top-banner-detail-program div.box > div.description > a {
        font-size: 22px;
        line-height: 26px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 0;
        margin-top: -10px;
    }

    .program-group {
        margin-bottom: 0px;
    }

    section.top-banner-detail-program div.box > div.description > label.title-detail {
        font-size: 22px;
        margin-bottom: 0;
        height: fit-content;
        max-height: 47px;
    }

    hr {
        /*margin: 10px 15px;*/
        /*border-color: #FFFFFF;*/
        display: none;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-caption {
        display: block;
        height: 20px;
        padding-right: 0px;
    }

    section.top-banner-detail-program div.box > div.dana {
        padding: 0 15px;
        margin-top: -30px;
    }

    section.top-banner-detail-program div.box > div.dana > .btn-detail {
        margin-top: 20px;
    }

    section.program-detail-content div.box {
        padding-top: 15px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item{
        font-size: 12px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    table.list-donatur-program-detail {
        border-spacing: 25px 15px;
        margin-bottom: 10px;
    }

    table.list-donatur-program-detail > tbody > tr {
        display: grid;
    }

    .btn-bantu-donasi {
        margin-top: 10px;
        font-size: 20px;
    }

    .btn-byr-donasi {
        font-size: 22px;
        width: 100%;
    }

    .ket-nilai {
        margin-top: 20px;
        text-align: left;
    }

    .kegiatan-program-details {
        display: contents;
        margin-bottom: 0px;
    }

    .donatur-box {
        margin-bottom: 15px;
    }

    .list-donatur-program-detail {
        padding-top: 10px;
        padding-bottom: 0px;
    }

    .detail-program {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
    }

    .slider {
        width: 318px;
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;
    }

    .slider-foto {
        width: 100%;
        height: 300px;
    }

    .laporkan {
        margin-top: 20px;
    }

    #label-total-jumlah {
        line-height: 13px;
    }

    div.top-banner-program div.content > div.title {
        bottom: 0;
    }

    div.top-banner-program div.content > div.title > h2 {
        font-size: 20px;
        line-height: 24px;
        /*margin-bottom: -20px;*/
        padding-right: 10px;
        padding-left: 15px;
    }

    div.top-banner-program div.content > div.title > h3 {
        font-size: 14px;
        line-height: 14px;
        padding-left: 15px;
        margin-top: 0px;
        margin-bottom: 17px;
    }

    .top-banner-detail-program button.slick-arrow {
        bottom: 60px;
    }

    .box-donasi-bottom {
        position: fixed;
        bottom: 60px;
        background-color: #FFF;
        z-index: 9998;
        padding: 15px 30px;
        box-shadow: 0px 3px 25px #000000;
    }

    .box-donasi-bottom > .box-thumbnail {
        padding: 0 0 10px;
    }

    .box-donasi-bottom > .box-thumbnail > img {
        width: 100%;
        height: 60px;
    }

    .box-donasi-bottom > .box-judul-program > label.kategori-program {
        font-size: 14px;
        color: #666666;
        margin-top: 8px;
    }

    .box-donasi-bottom > .box-judul-program > label.judul-program {
        margin-top: -8px;
        height: 20px;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 20px;
        margin-bottom: 0px;
        cursor: pointer;
        text-decoration: none;
        display: -webkit-box;
        text-align: left;
        word-break: break-word;
        white-space: pre-wrap;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .box-donasi-bottom > .box-button{
        text-align: center;
        padding: 0;
        margin-top: 0;
    }
    .box-donasi-bottom > .box-button > button {
        width: 100%;
        font-size: 20px;
    }
    body.box-add-donasi-bottom {
        padding-bottom: 225px;
    }

    .banner-img-program-detail-bawah {
        width: 100%;
    }

    .dropdown-menu-arrow {
        left: 189px;
    }

    .nominalMobile {
        display: block;
    }

    .nominalWeb {
        display: none;
    }

    .donatur-box {
        margin-bottom: -5px;
        padding: 5px;
    }
    div.donatur-box > div.donatur-img {
        margin-right: 10px;
    }
    div.donatur-box > div.donatur-img > i {
        font-size: 45px;
        margin-left: 0px;
        margin-top: 0px;
    }
    div.donatur-box > div.donatur-details > div.donatur-date {
        margin-bottom: -12px;
        margin-top: 0px;
    }
    div.donatur-box > div.donatur-details > div.donatur-name {
        height: 18px;
        font-size: 14px;
    }
    div.donatur-box > div.donatur-details > div.donatur-cash {
        height: unset;
        line-height: 25px;
        margin-top: -10px;
        margin-bottom: -13px;
    }
    div.donatur-box > div.donatur-details > div.donatur-cash > label {
        font-size: 18px;
        margin-top: 1px;
    }

    /*Pagination list donatur*/

    .box-paging-table,
    .box-paging-table-fund{
        text-align: center;
    }
    .count-paging {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: -18px;
        font-size: 14px;
        color: #333;
    }
    .before-btn,
    .next-btn {
        display: none;
    }
    .box-paging-table > .btn-paging,
    .box-paging-table-fund > .btn-paging{
        margin: 10px 3px;
    }

    #info_terbaru_page .card-body > div.div-one > div.div-tahap {
        padding: 0px;
    }

}

@media (min-width: 768px) and (max-width: 991px) {

    table.list-donatur-program-detail {
        border-spacing: 0px 15px;
    }
    div.top-banner-program {
        margin-right: 0px;
    }
    .detail-program {
        margin-left: 30px;
        margin-right: 30px;
    }

    .box-share > a {
        width: unset;
        display: block;
        margin-bottom: 5px;
    }

    table.list-donatur-program-detail {
        border-spacing: 25px 15px;
        margin-bottom: 10px;
        padding-top: 10px;
        padding-bottom: 0px;
    }

    table.list-donatur-program-detail > tbody > tr {
        display: grid;
    }

    div.kegiatan-program-details > div.kegiatan-program-content,
    div.kegiatan-program-details > div.kegiatan-program-img {
        height: 210px;
    }

    div.kegiatan-program-details > div.kegiatan-program-content > div.deskripsi-kegiatan {
        height: 115px;
    }

    .btn-bantu-donasi {
        margin-top: 10px;
        font-size: 20px;
    }

    .btn-byr-donasi {
        font-size: 15px;
        padding: 5px 15px;
    }

    div.top-banner-program div.content > div.title {
        bottom: 0;
    }

    div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi,
    section.program-detail-content label.title-detail{
        font-size: 20px;
    }

    section.program-detail-content {
        padding-left: 5%;
        padding-right: 5%;
    }


    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item{
        font-size: 10px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item > a.nav-link {
        padding: 10px;
    }

    section.top-banner-detail-program div.box > div.description > label.title-detail {
        width: 185px;
        font-size: 15px;
    }

    section.tab-details > div.content-box > ul.nav-tabs > li.nav-item > a.nav-link > .counter {
        font-size: 10px;
    }

    .program-group {
        margin-bottom: 0px;
    }

    #info_terbaru_page .card-body > div.div-one > div.div-tahap {
        padding: 0px;
    }

    div.top-banner-program div.content > div.title > h2 {
        font-size: 25px;
    }

    div.top-banner-program div.content > div.title > h3 {
        font-size: 16px;
    }

    .nominalMobile {
        display: block;
    }

    .nominalWeb {
        display: none;
    }

    div.donatur-box > div.donatur-details > div.donatur-name {
        height: 18px;
    }

    div.donatur-box > div.donatur-details > div.donatur-cash {
        height: unset;
        line-height: 20px;
    }

}

/*@media (min-width: 992px) and (max-width: 1366px) {*/

/*.donatur-box {*/
/*padding: 8px;*/
/*}*/

/*.btn-bantu-donasi {*/
/*margin-top: 10px;*/
/*font-size: 20px;*/
/*}*/

/*.btn-byr-donasi {*/
/*font-size: 20px;*/
/*}*/

/*div.info-detail-program > div.box > div.dana > .box-program-nominal > .box-program-nominal-value > .program-donasi,*/
/*section.program-detail-content label.title-detail{*/
/*font-size: 21px;*/
/*}*/

/*div.top-banner-program div.content > div.title {*/
/*bottom: 45px;*/
/*}*/

/*section.program-detail-content {*/
/*padding: 20px 9%;*/
/*}*/

/*.detail-program {*/
/*margin-left: 110px;*/
/*margin-right: 130px;*/
/*}*/

/*}*/

@media (max-width: 768px) {
    .box-video,
    .box-video > iframe {
        height: 200px;
    }
    .btn-detail {
        position: inherit;
        width: 100%;
    }
    #boxDonatur > div.box-donatur-penerimaan-lain > div.donatur-penerimaan-lain > label.caption {
        display: block;
        margin-bottom: -8px;
        width: 100% !important;
        max-width: inherit !important;
    }
    #boxDonatur > div.box-donatur-penerimaan-lain > div.donatur-penerimaan-lain > label.donasi {
        width: calc(50% - 5px);
    }
    #boxDonatur > div.box-donatur-penerimaan-lain > div.donatur-penerimaan-lain > label.donatur {
        width: calc(50% - 5px);
    }

    .box-deskripsi {
        max-height: 300px;
        overflow: hidden;
        margin-bottom: 20px;
        position: relative;
    }

    #box-shadow-deskripsi {
        display: block;
        position: absolute;
        bottom: -32px;
        width: 100%;
    }
    #shadowDeskripsi {
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
        width: 100%;
        height: 200px;
        display: block;
    }
    #selengkapnyaDeskripsi {
        display: block;
        width: 100%;
        text-align: center;
        margin: -10px 0 20px;
        color: var(--button-color);
        text-decoration: underline;
    }

    #shareFacebook,
    #shareTwitter {
        width: 40px;
    }
    #shareFacebook label,
    #shareTwitter label {
        display: none;
    }
    #shareWhatsapp {
        width: calc(100% - 88px);
    }

    #modalFundraiser {
        z-index: 99999;
    }
    #modalFundraiser > .modal-dialog {
        position: fixed;
        height: 100vh;
        margin: 0;
    }
    #modalFundraiser > .modal-dialog > .modal-content {
        height: 100vh;
    }
    #modalFundraiser > .modal-dialog > .modal-content > .modal-body .btn {
        padding: 10px;
        font-size: 18px;
        letter-spacing: 1px;
    }

    .box-laporan-final {
        padding: 0;
    }
    #info_terbaru_page .card-body > div > div > div > div > .text-o-total {
        margin: 3px 0px;
    }
    #info_terbaru_page .card-body > div > div > div > div > span.text-o-total {
        margin-top: 0;
    }
    div.donatur-box > div.donatur-details > div.donatur-pesan {
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 15px;
    }
    .box-social-media > p {
        margin: 20px 0 -10px;
    }

    .footer-bersedekah {
        display: block;
        margin-bottom: 50px;
    }

    body[marketplace-path] .program-detail-content > div > .fundraiser,
    body[marketplace-path] .footer-bersedekah{
        display: none;
    }
    body[marketplace-path] #selengkapnyaDeskripsi {
        margin: -25px 0 100px 0;
    }

    div.donatur-box > div.donatur-details > div.donatur-cash > a > label {
        font-size: 14px;
        line-height: 15px;
        margin-top: 7px;
        margin-bottom: 11px;
    }
    #table_list_fundraiser div.donatur-box > div.donatur-img {
        margin-right: 10px;
        padding-top: 7%;
    }
    .fundraiser-box .donatur-cash > a > span {
        display: none;
    }
    .box-dokumen-pendukung {
        text-align: center;
    }
    .box-dokumen-pendukung > .dokumen-pendukung > a > label.btn {
        float: inherit;
        margin: 10px 0 0;
        width: 100%;
    }
    #info_terbaru_page .card-body > div.div-one > div.div-tahap > div.step > div.content-tahap .box-video {
        width: calc(100% - 30px);
    }
    .ket-nilai > .ket {
        font-size: 14px;
        display: block;
        margin: -15px 0 -25px;
    }
    .ket-nilai > .nilai-potongan {
        display: block;
        margin: 0 0 -5px;
    }

    #modalGenerateProgram > .modal-dialog{
        max-width: 100%;
        margin: 0;
        height: 100vh;
        border-radius: 0;
    }
    #modalGenerateProgram > .modal-dialog > .modal-content {
        height: 100vh;
        border-radius: 0;
    }
    #modalGenerateProgram > .modal-dialog > .modal-content > .modal-body > .row {
        margin: 0;
        width: 100%;
    }
    #modalGenerateProgram > .modal-dialog > .modal-content > .modal-body > .row > div {
        padding: 0;
    }
    #modalGenerateProgram > .modal-dialog > .modal-content > .modal-body > button.close,
    #modalGenerateProgramSuccess > .modal-dialog > .modal-content > .modal-body > button.close {
        right: 10px;
        top: -10px;
    }
    #modalGenerateProgram > .modal-dialog > .modal-content > .modal-body {
        padding: 25px 10%;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        height: 100vh;
        align-content: center;
        border-radius: 0;
    }
    #modalGenerateProgram > .modal-dialog > .modal-content > .modal-body .box-fundraiser-referral .box-button button {
        font-size: 18px;
        line-height: 20px;
    }

    #modalGenerateProgramSuccess > .modal-dialog > .modal-content > .modal-body {
        padding: 50px 10%;
    }

    body[marketplace-path="sinarmas-syariah"] .box-donasi-bottom {
        bottom: 0px !important;
    }
    body[marketplace-path="sinarmas-syariah"] header,
    body[marketplace-path="sinarmas-syariah"] .fundraiser {
        display: none !important;
    }


    .box-fundraiser {

    }
    .box-fundraiser > .img-fundraiser {
        padding: 0 5px 0 0;
    }
    .box-fundraiser > .img-fundraiser > img {
        width: 100%;
    }
    .box-fundraiser > .detail-fundraiser {

    }
    .box-fundraiser > .detail-fundraiser > .name-fundraiser {

    }
    .box-fundraiser > .detail-fundraiser > .name-fundraiser > label {
        font-weight: normal;
    }
    .box-fundraiser > .detail-fundraiser > .domain-fundraiser {

    }
    .box-fundraiser > .detail-fundraiser > .domain-fundraiser label.judul-fundraiser {
        font-size: 16px;
        margin: 5px 0 5px;
        line-height: 16px;
    }
    .box-fundraiser > .detail-fundraiser > .domain-fundraiser label.url-fundraiser {
        white-space: pre-line;
        word-break: break-word;
    }
    .box-fundraiser .amount-fundraiser {
        font-size: 14px;
        font-weight: bold;
    }
    #boxDonatur > .box-qris-first-button {
        display: block !important;
    }
    .box.sticky-top > .box-qris-first-button {
        display: none !important;
    }
}