.mobile-app-navi {display:none;}



@media only screen and (max-width: 600px) {


   aside, #mySidebar {
       display:none !important;
   }


    #mainside {padding:1rem !important;}
.page-title img {

    width:40%;
    height:auto;
}

.page-title {
    width:55%;
}

    .btn-danger {display:none;}
.darkmode-switch {transform:scale(0.6); }





    :root
    {
        --clr: #f1f2f3;
    }

    .mobile-app-navi {
        background:white;
        width:400px;
        height:70px;
        position:fixed;
        bottom:0;
        border-radius:10px;
        display:flex;
        justify-content:center;
        align-items:center;
        z-index: 1;

    }

    .mobile-app-navi ul {
        display:flex;
        width:350px;
        margin:0;
        padding:0;
    }

    .mobile-app-navi ul li {
        position:relative;
        list-style:none;
        width:70px;
        height:70px;
        z-index:1;
        margin:0;
        padding:0;
    }

    .mobile-app-navi ul li a {
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        width:100%;
        text-align:center;
        font-weight:500;
        height: 100%;

    }

    .mobile-app-navi ul li a .icon {

        position: relative;
        display:block;
        line-height: 75px;
        font-size:1.5em;
        text-align:center;
        transition: 0.5s;
        color: #1d1d1d;



    }

    .mobile-app-navi ul li.active a .icon {

        transform: translateY(-15px);
        color: #1d8056
    }


    .mobile-app-navi ul li a .text {
        position:absolute;
        color:#1d1d1d;
        font-weight:400;
        font-size:0.8em;
        letter-spacing: 0.05em;
        opacity:0;
        transition: 0.5s;
        transform: translateY(20px);

    }

    .mobile-app-navi ul li.active a .text {

        opacity:1;
        transform: translateY(15px);

    }
    .mobile-app-navi ul li.active {

        border-top: 3px solid green;

    }



    .indicator {
    display:none;
        position:absolute;
        top:-20%;
        left:22.5px;
        width:75px;
        height:75px;
        background:white;
        border-radius:50%;
        transition: 0.5s;

    }
/*
    .indicator::before {
        content:'';
        position:absolute;
        top:50%;
        left:-21.5px;
        width: 20px;
        height: 20px;
        background: transparent;
        border-top-right-radius:20px;
        box-shadow: 0px -10px 0 0 var(--clr);
    }

    .indicator::after {
        content:'';
        position:absolute;
        top:50%;
        right:-21.5px;
        width: 20px;
        height: 20px;
        background: transparent;
        border-top-left-radius:20px;
        box-shadow: 0px -10px 0 0 var(--clr);
    }
*/
    .mobile-app-navi ul li:nth-child(1).active ~ .indicator {
        transform: translateX(calc(70px * 0));
    }

    .mobile-app-navi ul li:nth-child(2).active ~ .indicator {
        transform: translateX(calc(70px * 1));
    }

    .mobile-app-navi ul li:nth-child(3).active ~ .indicator {
        transform: translateX(calc(70px * 2));
    }

    .mobile-app-navi ul li:nth-child(4).active ~ .indicator {
        transform: translateX(calc(70px * 3));
    }

    .mobile-app-navi ul li:nth-child(5).active ~ .indicator {
        transform: translateX(calc(70px * 4));
    }




}