@media screen and (max-width: 2048px) {
    
.body {
    margin-bottom: 0px;
    margin-left: 0%;
    margin-right: 0%;
    background-color: #f6f6f6;
    padding-left: 10px;
    padding-right: 10px;
}

}

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

.header {
    height: 20vw;
    min-height: 25px;    
}
   
.brand-text img {
    float: none;
    padding: 0 0px 0px 0;
    width: 50%;
}
    
.brand-text img {
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0px 0px 0;
}
    
.topnav {
    line-height: 2vw;
}

.clientlist, .roundslist {
    overflow-y: scroll; 
    max-height:100%;
}
    
}

@media screen and (min-width: 450px) {
     .visible-small {
         height: 0px;
         display: none;
     }
 }

@media screen and (max-height: 450px) {
     .sidenav {
         padding-top: 15px;
     }
     .sidenav a {
         font-size: 18px;
     }
 }

@media screen and (max-width: 450px) {
     .body {
         /* Margin bottom by footer height */
         margin-bottom: 60px;
         margin-left: 0;
         margin-right: 0;
         background-color: #f6f6f6;
         /*#f6f6f6;*/
         /*#e5e5e5;*/
     }

     .rootslogo {
         display: none;
     }
     
     .brand-text img {
        margin-top: -35px;
        margin-left: 0px;
        padding: 0 0px 0px 0;
     }
     
     .brand-text {
         margin-top: 10px;
     }
     
     .loginbtn {
         margin-left: 20px;
         margin-right: 20px;
     }
     

     #home {
         background-image: url(components/images/ERP.JPG);
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain;
         color: main-bg-color;
         height: 30%;
     }

     .pad-left {
         padding-left: 0;
     }

     .topnav.responsive {
         position: relative;
     }

     .brand-text h1 {
         font-size: 1em;
         /*font-size: 18px;*/
         padding: 0em;
         text-align: center;
         margin-top: 0px;
     }

     .no-pad {
         padding: 0px !important;
         margin: 0px !important;
     }

     .border {
         border-color: var(--main-bg-color);
         border-width: thin;
         border-style: solid;
         padding: 0px;
         overflow: auto;
     }

     .border-out {
         border-style: solid;
         border-color: var(--main-bg-color);
         margin-left: 0px;
         margin-right: 0px;
     }

     .topnav a {
         padding: 5px !important;
     }

     .topnav.responsive a.icon {
         position: absolute;
         right: 0;
         top: 0;
     }

     .topnav.responsive a {
         float: none;
         display: block;
         text-align: left;
     }

     .title {
         font-size: 14px;
     }

     .hidden-small {
         height: 0px;
         display: none;
     }

     .pad-top {
         padding-top: 5px;
     }

     .visible-small {
         height: auto;
         display: visible !important;
     }
 }

@media screen and (max-width: 568px) {
    .hidden-568 {
         height: 0px;
         display: none;
    }
}