/* =====================================================
   CHAT
===================================================== */
.footer-btn-NERAKA33.chat{
    background:
        linear-gradient(
            180deg,
            #ed4444 0%,
            #cf1313 15%,
            #b80000 48%,
            #890000 52%,
            #590000 100%
        );
}

/* =====================================================
   HOVER RETRO
===================================================== */
.footer-btn-NERAKA33:hover{
    color:#ffffff!important;

    transform:none;

    background:
        linear-gradient(
            180deg,
            #ff8585 0%,
            #ff2b2b 15%,
            #e30000 48%,
            #b30000 52%,
            #850000 100%
        );

    border-top-color:#ffffff;
    border-left-color:#ffd700;
    border-right-color:#740000;
    border-bottom-color:#520000;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        1px 1px 0 #000000;
}

.footer-btn-NERAKA33:hover img{
    transform:none;

    background:#ffffff;

    box-shadow:
        1px 1px 0 #000000;
}

.footer-btn-NERAKA33.daftar:hover{
    color:#2b1d00!important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff38c 15%,
            #ffe238 48%,
            #ffc800 52%,
            #c99800 100%
        );

    border-color:#ffffff #9c7200 #765600 #ffffff;

    box-shadow:
        inset 0 1px 0 #ffffff,
        1px 1px 0 #000000;
}

/* =====================================================
   ACTIVE - EFEK TOMBOL JADUL DITEKAN
===================================================== */
.footer-btn-NERAKA33:active{
    top:1px;

    transform:none;

    border-top:2px solid #520000;
    border-left:2px solid #520000;
    border-right:1px solid #ff6666;
    border-bottom:1px solid #ff6666;

    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.65);
}

.footer-btn-NERAKA33.daftar:active{
    border-top-color:#765600;
    border-left-color:#765600;
    border-right-color:#fff4a6;
    border-bottom-color:#fff4a6;
}

/* =====================================================
   TABLET
===================================================== */
@media(max-width:1024px){

    .footer-floating-NERAKA33{
        max-width:760px;

        gap:4px;
        padding:5px;
    }

    .footer-btn-NERAKA33{
        min-height:56px;

        padding:5px 3px;

        font-size:9.5px;
    }

    .footer-btn-NERAKA33 img{
        width:21px;
        height:21px;

        padding:3px;
    }
}

/* =====================================================
   MOBILE
===================================================== */
@media(max-width:600px){

    .footer-floating-NERAKA33{
        bottom:5px;

        width:calc(100% - 8px);

        grid-template-columns:repeat(5,minmax(0,1fr));

        gap:2px;

        padding:3px;

        border-radius:2px;
    }

    .footer-btn-NERAKA33{
        min-height:51px;

        gap:2px;

        padding:4px 1px;

        font-size:8px;
        line-height:1.05;

        border-radius:1px;
    }

    .footer-btn-NERAKA33 img{
        width:18px;
        height:18px;

        padding:2px;

        border-radius:1px;
    }

    .footer-btn-NERAKA33 span{
        white-space:normal;
        overflow:visible;

        line-height:1.05;
    }
}

/* =====================================================
   MOBILE KECIL
===================================================== */
@media(max-width:380px){

    .footer-floating-NERAKA33{
        width:calc(100% - 4px);

        gap:1px;

        padding:2px;
    }

    .footer-btn-NERAKA33{
        min-height:47px;

        padding:3px 1px;

        font-size:7px;
    }

    .footer-btn-NERAKA33 img{
        width:16px;
        height:16px;

        padding:2px;
    }
}

/* =====================================================
   RUANG UNTUK FOOTER
===================================================== */
body{
    padding-bottom:90px;
}

@media(max-width:600px){
    body{
        padding-bottom:70px;
    }
}