.hidden {
    display: none !important
}

:not(pre):not(code) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.lsd-donasi ul#navigasi {
    padding: 1.3rem;
    margin: 10px
}

.lsd-donasi #navigasi li {
    list-style: none;
    display: inline-block;
    margin: 0
}

.fullwidth {
    width: 100%;
    text-align: center
}

.lsd-btn {
    background: rgba(var(--link-color)) !important;
    color: #fff;
    font-size: 16px;
    border-radius: .125rem;
    padding: 12px 16px !important;
    display: inline-block;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .4px;
    margin: 5px 0;
    text-decoration: none !important;
    line-height: normal;
    cursor: pointer;
    transition: box-shadow .18s ease-out, background .18s ease-out, color .18s ease-out;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    white-space: nowrap;
    text-transform: none;
    border: none
}

.lsd-alert {
    padding: 13px 15px;
    font-size: .9rem;
    vertical-align: middle;
    text-shadow: none;
    position: relative;
    border-radius: .25rem;
    letter-spacing: .2px;
    font-family: inherit;
    font-size: 16px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    max-width: 425px;
    margin: 15px auto
}

.danger {
    background: #f75676;
    color: #fff;
    text-align: center
}

.input-error {
    border: 1px solid red !important
}

.svg-error svg {
    stroke: red !important
}

#navigasi button {
    background: #fff !important;
    color: rgba(var(--link-color))
}

#navigasi button.active {
    background: rgba(var(--link-color)) !important;
    color: #fff
}

.lsd-card {
    background: 0 0;
    font: inherit;
    padding: 10px
}

.lsd-contain>.lsd-card:not(:only-child) {
    margin: 0
}

.lsd-card-content {
    background: #fff;
    border-radius: .25rem;
    box-shadow: 0 3px 0 rgba(102, 119, 136, .03), 0 0 0 rgba(102, 119, 136, .3);
    position: relative;
    height: 100%
}

.lsd-content {
    width: 100%;
    padding: 18px;
    float: right;
    font-size: 13px
}

.lsd-content p {
    font-size: 14px;
    margin: 0 0 10px
}

.lsd-content h2 {
    font-size: 18px !important;
    margin: 0 !important;
    color: rgba(var(--link-color))
}

.lsd-content .lsd-btn {
    background: rgba(var(--link-color)) !important;
    color: #fff !important
}

#lsd_donasi_list .lsd-content {
    text-align: left
}

.lsd-tag {
    display: inline-flex;
    padding: 0 15px;
    color: rgba(0, 0, 0, .6);
    font-size: 80%;
    letter-spacing: .3px;
    font-weight: 500;
    border-radius: .22rem;
    background: rgba(var(--link-color));
    color: #fff
}

#instruksi .e-col-4 {
    margin: 0
}

.thankyou {
    background: rgba(var(--link-color));
    color: #fff;
    text-align: center
}

.lsd-card-content h6 {
    font-size: 16px;
    margin: 0
}

#lsd_donasi_list {
    padding: 3rem 0 6rem;
    max-width: 1024px;
    margin: 0 auto
}

.lsd-nominal-input {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin-bottom: 5px
}

.app_lsd_donasi input[type=text],
.lsd-donasi input[type=email],
.lsd-donasi input[type=text] {
    padding: 8px 15px;
    height: 45px;
    border-width: 1px;
    border-style: solid;
    border-color: #eaeaea;
    border-radius: 2px;
    background: #fafafa;
    box-shadow: none;
    box-sizing: border-box;
    transition: all .2s linear;
    display: inline-flex;
    justify-content: flex-start;
    color: rgba(0, 0, 0, .6) !important;
    align-items: center;
    background-color: #fff !important;
    max-width: 100%;
    vertical-align: top;
    font-size: 16px
}

#checkout input[type=email],
#checkout input[type=text] {
    width: 100%
}

.lsd-control-helper {
    padding: 8px 10px;
    border-radius: .25rem;
    background: #fff;
    border: 1px solid #e3e4e5;
    color: rgba(0, 0, 0, .5);
    font-weight: 500;
    font-size: 16px;
    margin-right: -1px;
    height: 45px
}

.lsd-nominal-input .lsd-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0
}

.lsd-title {
    margin: 0 0 20px;
    text-align: center;
    padding: 15px
}

h3.lsd-title {
    font-size: 25px
}

h6.lsd-title {
    font-size: 16px
}

#instruksi h3.lsd-title {
    font-size: 20px
}

.p20 {
    padding: 2rem
}

.p30 {
    padding: 5px 25px
}

.text-left {
    text-align: left;
    padding: 15px 0;
    text-transform: unset
}

#metode-transfer-bank {
    padding: 0
}

p.e-list-item {
    margin-bottom: 0
}

small#kodebank {
    display: block
}

.e-list {
    flex-direction: column;
    display: flex;
    padding: 0;
    margin: 0;
    border-radius: .25rem;
    text-align: inherit;
    width: 100%
}

a {
    text-decoration: none !important
}

.float-left {
    float: left
}

.text-right {
    float: right
}

.text-bold {
    font-weight: 700 !important
}

.clearfix {
    clear: both
}

.lsd_copy {
    display: inline-flex;
    padding: 5px 10px;
    color: rgba(0, 0, 0, .6);
    font-size: 80%;
    letter-spacing: .3px;
    font-weight: 500;
    border-radius: .22rem;
    background: #f5f5f5;
    color: #000;
    cursor: pointer;
    float: right !important;
    margin-top: 0 !important;
    max-width: 55px;
    border: 1px solid #ddd
}

.clean {
    padding: 0 0 15px
}

.p10 {
    padding: 15px 0 0;
    font-size: 14px
}

#checkout,
#instruksi {
    padding-bottom: 3rem
}

.instruksi-content {
    padding: 0
}

.instruksi-pemesan h6,
.instruksi-pemesan p {
    padding: 0
}

#lsd_pesanan {
    padding-top: 1.4rem
}

#agree:checked+.check svg,
#anonim:checked+.check svg {
    stroke: rgba(var(--link-color))
}

#agree:checked+.check svg path,
#anonim:checked+.check svg path {
    stroke-dashoffset: 60;
    transition: all .3s linear
}

#agree:checked+.check svg polyline,
#anonim:checked+.check svg polyline {
    stroke-dashoffset: 42;
    transition: all .2s linear;
    transition-delay: .15s
}

#agreetext {
    font-size: 12px;
    padding: 1rem !important;
    color: #444c54;
    margin: 20px 0;
    line-height: 20px
}

@-webkit-keyframes ePull {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes ePull {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.ePull {
    -webkit-animation-name: ePull;
    animation-name: ePull
}

.check {
    cursor: pointer;
    position: relative;
    margin: 4px 0 !important;
    width: 18px;
    height: 18px;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    float: left;
    margin-right: 7px !important
}

.check:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .2s ease
}

.check svg {
    position: relative;
    z-index: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #c8ccd4;
    stroke-width: 1.5;
    transform: translate3d(0, 0, 0);
    transition: all .2s ease
}

.check svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 0
}

.check svg polyline {
    stroke-dasharray: 22;
    stroke-dashoffset: 66
}

.check:hover:before {
    opacity: 1
}

.check:hover svg {
    stroke: rgba(var(--link-color))
}

#lsd_list_pesanan {
    margin-top: 10px
}

.lsd-donasi [type=radio]:checked,
.lsd-donasi [type=radio]:not(:checked) {
    position: absolute;
    left: -9999px
}

.lsd-donasi [type=radio]:checked+label,
.lsd-donasi [type=radio]:not(:checked)+label {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666
}

.lsd-donasi [type=radio]:checked+label:before,
.lsd-donasi [type=radio]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff
}

.lsd-donasi [type=radio]:checked+label:after,
.lsd-donasi [type=radio]:not(:checked)+label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: rgba(var(--link-color));
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.lsd-donasi [type=radio]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.lsd-donasi [type=radio]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

label.radio-label {
    position: absolute;
    top: 12px !important;
}

.lsd-donasi .bank-item img {
    padding-bottom: 5px;
    margin-top: -12px;
    width: 100%;
}

.lsd-btn.primary {
    background: rgba(var(--link-color)) !important;
    color: #fff !important
}

.instruksi-content #image_bank {
    width: 150px
}

#checkout input.lsd-control {
    margin-bottom: 10px !important
}

.lsd-btn[disabled] {
    background: #f3f3f3 !important;
    color: #bdbdbd !important
}

.informasi-pesanan h6 {
    margin: 20px 5px -15px;
    font-size: 16px
}

.informasi-pesanan {
    padding: 0 10px
}

.instruksi-pemesan p {
    margin: 0
}

.instruksi-pemesan {
    margin-top: 15px;
    padding-bottom: 15px
}

.default-pay {
    width: 100%;
    padding: 10px;
    margin: 10px 0 0;
    border: 1px solid #ddd
}

.default-pay img {
    width: 85px;
    margin-top: -10px
}

.col-responsive {
    display: block
}

#lsd_transfer_checkout {
    margin-top: 20px
}

#lsd_list_pesanan p,
#lsd_pesanan p,
#rekening {
    margin: 0 !important
}

.col-full {
    width: 100%;
    margin: 0 auto
}

.col-full .col-responsive {
    margin: 0 auto
}

#lsd_pesanan .lsd-tag {
    margin-top: 3px
}

textarea#ucapanpendonor{
    width: 100%;
}

@media only screen and (min-width:600px) {
    .lsd-donasi .bank-item img {
        width: 100px
    }
}

@media only screen and (min-width:768px) {
    .col-responsive {
        max-width: 100%;
        width: 100%
    }
}

@media only screen and (min-width:992px) {
    .lsd-donasi .bank-item img {
        width: 100%
    }

    .col-responsive {
        max-width: 50%;
        width: 100%
    }

    .lsd-donasi .bank-item.radio {
        padding-top: 15px;
        border: solid 1px rgba(0, 0, 0, .125);
        padding-bottom: 20px;
        margin: 0
    }
}

@media only screen and (min-width:1200px) {
    .col-responsive {
        max-width: 37%;
        width: 100%
    }
}

.lsd-card-content img{
    width: 100%;
    object-fit: cover;
}