@media only screen and (max-width:900px){
    .dashboard{
        display:inline;
    }

    .card-col{
        width:100% !important;
    }

    .detail-col{
        width:100% !important;
    }

    .item-grid{
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }

    .wrap-1{
        width:100% !important;
    }

    .wrap-2{
        width:50% !important;
    }

    .wrap-3{
        width:33.3% !important;
    }

    .wrap-4{
        width:25% !important;
    }

    .wrap-5{
        width:20% !important;
    }

    .wrap-5-8{
        width:80% !important;
    }

   .component-container:not(.container-group){
       flex-direction: column;  /* Stack items vertically */
   }

   .component-control {
       margin-top: 10px; /* Add spacing between title and input */
       width: 100% !important;
   }

   .component-control-input, .component-control-input-wrapper{
       width: 100% !important;
   }

   .tab-left-pane, .tab-right-pane{
        width: 100% !important;
        max-width: 100%;
        margin-bottom: -5px;
        padding-bottom: 0;
   }

   .tab-left-pane>nav-pills-vertical{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
   }
   .nav-pills-vertical .nav-link{
        flex: 1 1;
        overflow-x: hidden;
        padding-bottom: 5px;
        margin:0 !important;
        min-width: 0 !important;
        font-size: .75rem;
   }
   .nav-pills-vertical .nav-link.active, .nav-pills .show>.nav-link {
        display: flex;
        flex: 0 0 20%;
       box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
       margin-right: 0;
       border-radius: .25rem .25rem 0 0;
       margin-bottom: -5px;
       padding-right: 0 !important;
       padding-bottom: 32px !important;
       justify-content: center;
       align-items: center;
   }
   .flex-fill{
        width:100% !important;
   }

    .navbar-nav>li{
        width:100%;
    }
    .navbar-nav>li:hover{
        background: gray;
        color: black !important;
        padding: 5px;
        border-radius: 5px;
    }

    #navGoBack{
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: rgb(255,255,255, 0.5);
    }



}

.dashboard{
    display: flex;
}

.wrap-auto{
    flex: 1 1;
    min-width: 25%;
    max-width: 100%;
}



/* Small Devices (Phones) */
@media only screen and (max-width: 576px) {
    /* Styles for most smartphones */
}

/* Medium Devices (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 768px) {
    /* Styles for tablets */
}

/* Large Devices (Small Laptops & Larger Tablets) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Styles for small laptops and larger tablets */
}

/* Extra Large Devices (Desktops) */
@media only screen and (min-width: 1025px) {
    /* Styles for desktops */
}