@media only screen and (min-width: 600px) {
    .navbar {}
}

@media only screen and (min-width: 768px) {
    .navbar {
        background-color: red;
    }
}

@media only screen and (min-width: 1200px) {
    .navbar {
        background-color: blue;
    }

    .innerContainer {
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        height: 480px;
        scroll-behavior: smooth;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .wrapperScrollable {
        background-color: white;
        scroll-behavior: smooth;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 450px;
        border-radius: 5px;
        box-shadow: var(--box-shadow40L);
        margin: 0px;
        padding: 0px 0px 10px 0px;
    }

    #dynamic_content th {
        font-size: 0.8em;
    }

    #dynamic_content tr {
        font-size: 0.8em;
    }

    #dynamic_content td {
        font-size: 0.8em;
    }

 
    .brandingName p {
        color: var(--theme-color);
        margin: 0px;
        padding: 5px 10px;
        font-size: 0.6em;
    }

    .navTabsSidebar {
        background-color: transparent;
        height: 500px;
        overflow-x: hidden;
        overflow-y: scroll;
        margin-top: 10px;
        padding: 0px 5px;
    }

    .buttonFuncComp .buttonNavExtract {
        background-color: var(--theme-color);
        border: 1px solid var(--theme-color);
        border-radius: 5px;
        font-size: 0.7em;
        color: white;
        padding: 7px 10px;
        margin: 0px 0px 0px 0px;
    }
 
}

@media only screen and (min-width: 1250px) {
    .navbar {}

    .sideContentDashComp {}
}

@media only screen and (min-width: 1350px) {
     .navbar {
        background-color: green;
    }
    .innerContainer {
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        height: 600px;
        scroll-behavior: smooth;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .wrapperScrollable {
        background-color: white;
        scroll-behavior: smooth;
        overflow-y: scroll;
        overflow-x: hidden;
        height: 560px;
        border-radius: 5px;
        box-shadow: var(--box-shadow40L);
        margin: 0px;
        padding: 0px 0px 10px 0px;
    }

 

    .brandingName p {
        color: var(--theme-color);
        margin: 0px;
        padding: 5px 10px;
        font-size: 0.8em;
    }

    .navTabsSidebar {
        background-color: transparent;
        height: 620px;
        overflow-x: hidden;
        overflow-y: scroll;
        margin-top: 10px;
        padding: 0px 5px;
    }



    .buttonFuncComp .buttonNavExtract {
        background-color: var(--theme-color);
        border: 1px solid var(--theme-color);
        border-radius: 5px;
        font-size: 0.8em;
        color: white;
        padding: 7px 20px;
        margin: 0px 0px 0px 0px;
    }
 
 
 
 

    .userCompSidebar h4 {
        font-size: 1em;
    }

    .userCompSidebar h6 {
        font-size: 0.8em;
    }

}

@media only screen and (min-width: 1450px) {
    .navbar {}

}

@media only screen and (min-width: 1400px) {
     .navbar {
        background-color: pink;
    }
}

@media only screen and (min-width: 1420px) {
   .navbar {
        background-color: yellow;
    }

}

@media only screen and (min-width: 1500px) {
     .navbar {
        background-color: purple;
    }

}

@media only screen and (min-width: 1510px) {
     .navbar {
        background-color: black;
    }

}