.container-steps {
    cursor: pointer;
}

.container-steps-active {
    background: var(--gradient-radial, radial-gradient(91.43% 93.24% at 19.26% 6.65%, rgba(196, 48, 43, 0.20) 29.26%, rgba(125, 31, 28, 0.00) 100%), #17164F);
    border-radius: 29px;
}

.container-content-steps {
    padding: 8px 18px;
    column-gap: 12px;
}

.containter-content-number-steps {
    width: 25px;
    height: 25px;
    border-radius: 26px;
    border: 1px solid rgba(178, 178, 178, 0.80);
}

.containter-content-number-steps-active {
    width: 27px;
    height: 27px;
    background-color: #FFF;
    border-radius: 26px;
}

.content-number-steps {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: rgba(178, 178, 178, 0.80);
}

.content-number-steps-active {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    background: var(--Gradient1, linear-gradient(120deg, #17174F 57.32%, #E34A45 86.6%));
    background-clip: text;
}

.content-info-steps {
    color: rgba(178, 178, 178, 0.80);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.content-info-steps-active {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

.area-cetak-tag {
    border: 1px solid rgba(204, 204, 204, 0.8);
    border-radius: 26px; width: max-content;
    cursor: pointer;
}

.area-cetak-tag-active {
    border: 1px solid var(--Gradient1, #17174F);
    border-radius: 26px;
    width: max-content;
    background: var(--Gradient1, linear-gradient(120deg, #17174F 57.32%, #E34A45 86.6%));
    cursor: pointer;
}

.area-cetak-text {
    padding: 8px 12px;
    color: #ccc;
    font-size: 14px;
    font-weight: 400;
}

.area-cetak-text-active {
    padding: 8px 12px;
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
}

.area-cetak-img {
    display: none;
}

.area-cetak-img-active {
    display: block;
}

@media (max-width: 767px) {
    /* FLOATING BUTTON STYLE */
    .floating-button-wrap {
        position: fixed !important;
        flex-direction: row !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 0px !important;
        top: 92% !important;
        height: fit-content !important;
        width: 100% !important;
        background-color: #ffff;
        border-radius: 40px;
        box-shadow: 0px -7px 33.20000076293945px 0px #17164F2E;
        align-items: center;
        justify-content: center;
    }
    .floating-button-container-icon {
        box-shadow: none !important; 
    }
    .floating-button-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 100% !important;
    }
    .floating-button-icon img{
        width: 22px;
        height: 22px;
    }
    .whatsapp-container {
        position: fixed !important;
        bottom: 80px !important;
        right: 5%;
    }
    .whatsapp-floating-button-container-icon {
        width: 65px !important;
        height: 65px !important;
        box-shadow: 6px 9px 17px 0px rgba(226, 75, 68, 0.15) !important;
        border-radius: 100% !important;
    }
    .whatsapp-floating-button-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 100% !important;
    }
    .whatsapp-icon{
        width: 29px !important;
        height: 29px !important;
    }
    .floating-button-text {
        display: none;
    }

    /* PANDUAN SPESIFIKASI */
    .spesifikasi-padding{
        padding: 48px 26px !important;
    }
    .spesifikasi-title{
        text-align: center  !important;
        font-size: 24px !important;
    }
    .spesifikasi-steps-menu{
        display: flex !important;
        flex-direction: row !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .container-steps{
        text-align: center !important;
        min-width: 50% !important;
        max-width: 50% !important;
        height: fit-content !important;
        border-radius: 40px !important;
    }
    .overflow-menu {
        overflow-x: scroll !important;
    }
    .overflow-menu::-webkit-scrollbar {
        display: none;
    }
    .container-content-steps{
        display: flex !important;
        flex-direction: column !important;
        row-gap: 10px !important;
    }
    .content-info-steps {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    .spesifikasi-content-padding{
        padding: 32px 0px !important;
    }
    .background-image{
        position: absolute !important;
        left: 25% !important;
    }
    .flex-container{
        display: flex !important;
        padding: 0px  !important;
        width: 100% !important;
    }
    .flex-container:nth-child(1){
        margin-bottom: 24px !important;
    }
    .card-steps-container{
        width: 45% !important;
    }
    .card-steps-container .flex-column-center{
        height: 90% !important;
    }
    .card-steps-container-padding{
        padding: 12px !important;
        text-align: center !important;
    }
    .card-steps-image{
        width: 100% !important;
        height: 100% !important;
    }
    .card-steps-image-last{
        width: 45% !important;
        height: 100% !important;
    }
    .steps-6-content-width{
        width: 100% !important;
    }

    /* CARD BOTTOM */
    .container-card-pesan{
        height: 400px !important;
    }
    .card-padding{
        margin: 24px 12px !important;
        min-width: 93% !important;
        max-width: 93% !important;
    }
    .container-card-pesan-title{
        width: 100% !important;
        font-size: 24px !important;
    }
    .container-card-pesan-subtitle{
        width: 100% !important;
        font-size: 14px !important;
    }
    .container-card-pesan-gambar {
        width: 100% !important;
        top: -35.5px !important;
        left: 5px !important;
        position: relative !important;
    }
    .container-card-pesan-gambar img {
        width: 100% !important;
    }
    .card-pesan-button-minimum{
        padding: 11px !important;
        top: 100px !important;
        right: -7px !important;
        font-size: 10px !important;
    }
    .card-pesan-button-cetakan {
        padding: 11px !important;
        bottom: 20px !important;
	    left: -50px !important;
        font-size: 10px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .spesifikasi-padding .flex-start{
        display: flex !important;
        flex-direction: column !important;
    }
    .card-padding{
        margin: 42px 30px !important;
    }
    .container-card-pesan-gambar{
        position: absolute !important;
        left: 41% !important;
    }
    .spesifikasi-padding{
        padding: 77px 26px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439px){
    .spesifikasi-padding .flex-start{
        display: flex !important;
        flex-direction: column !important;
    }
}