body, html {
    height: 100%;
    /*  min-width: 100vw;*/
    margin: 0;
    padding: 0;
    /*overflow-x: hidden;*/
    bottom: 0;
}

.container-icon {
    width: 100%;
    display: table;
    margin: 0;
}

nav a.iconhorizontal {
    display: table-cell;
    color: white;
    width: 14.2%;
    text-align: center;
    font-size: 10px;
    padding: 0.5em;
}

/*HOME PAGE*/

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

    div.gallery img {
        width: 100%;
        height: 100px;
    }

/*@media only screen and (min-width: 375px) {
    .digit-group input {
        width: 30px !important;
        height: 30px !important;
    }
}*/


@media only screen and (max-width: 424px) {
    div.gallery {
        width: 95%;
        height: 100px;
    }

    .row {
        display: flex;
    }

    .secondo {
        flex: 50%;
        padding: 5px;
    }

    .centericon {
        bottom: 15%;
        right: 45%;
    }
}

@media only screen and (min-width: 425px) {
    .digit-group{
        width: 400px;
    }

    .centericon {
        bottom: 15%;
        right: 45%;
    }

  /*  .digit-box {
        padding-left: 30px
    }*/
}

@media only screen and (max-width: 767px) /*SMOL - MEDIUM SCREEN*/ {
    #multi-item-carousel {
        display: none;
    }

    .gallerysecondo {
        padding-top: 7px;
    }

    div.gallery {
        width: 95%;
        height: 100px;
    }

    .row {
        display: flex;
    }

    .secondo {
        flex: 50%;
        padding: 5px;
    }

    nav a.iconhorizontal {
        font-size: 1.5em;
    }

    .namasistem h2 {
        font-size: 20px !important;
        padding-top: 5px;
    }

    .namasistem h6 {
        font-size: 10px !important;
    }

    .welcome h6 {
        font-size: 10px !important;
        padding-top: 5px;
    }

    .homelogo {
        width: 12% !important;
    }

    .loggoin {
        display: none
    }

    .login a {
        font-size: 12px;
    }

    .logbar {
        padding: 0 0 8px;
    }

    .homee {
        min-height: 100%;
        height: 60% !important;
        margin-bottom: 0px !important;
    }

    .buttonNotMobile {
        display: none;
    }

    div#multi-item-carousel {
        margin-top: 70px;
    }

    .centericon {
        bottom: 13%;
        right: 25%;
    }
}

@media only screen and (min-width: 768px) {
    .gallerysecondo {
        display: none;
    }

    .wordingg {
        font-size: 13px;
        text-align: center !important;
    }

    .buttonMobile {
        display: none;
    }

    .centericon {
        bottom: 6%;
        right: 45%;
    }

    #chatbotPopup {
        width: 90%;
        right: 5%;
        bottom: 20px;
    }
}

    @media (min-width: 1600px) /*LARGE SCREEN*/ {

        nav a.iconhorizontal:first-child {
            border-radius: 0px 0 0 0px;
        }

        @media (max-width: 768px) {
            nav a:first-child {
                border-radius: 0;
            }
        }

        .centericon {
            bottom: 15%;
            right: 45%;
        }
    }

    nav a.iconhorizontal:last-child {
        border-radius: 0px 5px 5px 0px;
    }

    @media (max-width: 768px) {
        nav a.iconhorizontal:last-child {
            border-radius: 0;
        }
    }

    nav a.iconhorizontal:first-child:nth-last-child(5), nav a:first-child:nth-last-child(5) ~ a {
        width: 20%;
    }

    @media only screen and (min-width: 769px) {
        .icon-bar-horizontal {
            display: none;
        }
    }

    @media (max-width: 768px) {
        img.logopic {
            display: none;
        }

        p {
            font-size: 80%;
        }

        a.btn.lihatpenuh {
            width: 90%;
        }

        .icon-bar {
            display: none;
        }

        .copyright.mr-auto {
            display: none;
        }

        .container-footer.mini {
            display: none;
        }
    }

    @media only screen and (max-width: 1900px) {
        .container .home-content {
            min-width: 110% !important;
        }
    }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .card-title {
        font-size: 19px;
    }

    .wordingg{
        font-size: 10px;
    }
}

.nav-item.login {
    list-style-type: none;
}

    .nav-item.login .nav-link {
        color: #4991b0;
        margin-left: 10px;
        /* Default padding for mobile */
        padding: 4px;
    }

/* Media query for desktop screens (or larger) */
@media (min-width: 768px) {
    .nav-item.login .nav-link {
        /* Override padding for desktop */
        padding: 7px;
    }
}