body{margin:0;zoom:90%}
#bodywork{display: block;
    position: absolute;
    height: 99.9%;
    width: 100%;}
#sub_bodywork{height:100%;width:100%;position: absolute;}
.search_div{width: 100%;
    height: 5%;
    position: fixed;
    top: 0;
    display: inline-flex
;
    background: #00daff;
    color: black;}
.search_div:after {
  content: "";
  display: table;
  clear: both;
} 
.s_first{width: 5%;height: 100%;}
.med{width:52%;height:100%;display: inline-flex;}
.med:after{content: "";
  display: table;
  clear: both;}
.med_main{width:100%; height:100% ;display:inline-flex;} 
.med_main:after{content: "";
  display: table;
  clear: both;}
.med_1{width:43%;
    margin-left: 1%;}
.med_2{width: 100%;
    margin-left: 1%;
    height: 100%;}
.s_title{width: 15%;
    font-size: 20px;
    text-align: center;
    font-weight: 700;}
.detail_div{width:10%;
    }
.textcolor-1{padding: 5px;
    display: contents;
    font-size: 20px;
    font-weight: 700;}
.button2{width: 18%;
    height: 100%;
    border-radius: 5px;}
.detail{width:19%; margin-left: 1%;}
.lab_1{width: 70%;
    font-size: 20px;
    font-weight: 700;}
.inputcheckbox{height: 100%;
    width: 2%;
    background-color: #eee;
    padding: 10px;
    position: absolute;}
.globsearch{width: 100%;
    align-items: baseline;
    height: 100%;}
.datesearch{width:40%;height:100%;}

.s_lst{width: 5%;height: 100%;}

.top_div{position: fixed;
    display: inline-flex;
    width: 100%;
    height: 100%;
    
   }
.bottom_bar{height: 5%;
    position: absolute;
    bottom: 0;
    display: block;
    background: black;
    width: 100%;text-align: center;}    
.top_div:after {
  content: "";
  display: table;
  clear: both;
} 
.table_part{width:100%;}
.table_part_1{width:90%;height:100%;}
.sidenav{height: 100%;
    width: 10%;
    position: fixed;
   
    right: 0;
    background-color: whitesmoke;
    transition: 0.5s;}
.sidenav a {
    text-decoration: none;
   
   
    transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}


#a-color{color:black}
.bottom_button{
    width: 10%;
    font-size: 18px;
    font-weight: 800;
    border:none;
    color: white;
    background: transparent;
}
.btnhide{display:none;}
.span_a{font-size: 20px;
    cursor: pointer;
    position: fixed;
    color: white;
    width: 100%;
    padding: 10px 0;}
.button2{width: 18%;
    height: 100%;
    border-radius: 5px;}   
.span_button{display:none}
.bottom-div{position: absolute; width: 91%;display: inline-flex;
}
.bottom-div:after {
  content: "";
  display: table;
  clear: both;
} 
.bottm-narr{width: 40%;
    height: 100%;
    }
.bottom-emty{width: 20%;
    height: 100%;
    }
.bottom-total{width: 40%;
    height: 100%;
   }
.nar_text{width: 100%;height: 93%;border: none;background: transparent;}
.totamt{float: right;margin-right: 10%;height: 60;border: none;border-top: 2px solid;border-bottom: 2px solid;box-shadow: 0 2px 0;text-align: right;background: transparent;}
/* Small devices (portrait tablets and large phones, 600px and up) */
/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
  body{margin:0;zoom:100%;}
#sub_bodywork{margin-top:calc(100% - 100%);height: -webkit-fill-available;}
.search_div {height: 7%;
        margin-top: calc(100% - 84.5%);}
.top_div{margin-top: calc(100% - 70.5%); }
.s_first{width: 10%;padding:0;}
.med{width:0%;}
.s_lst{width: 10%;
        padding: 0;
        position: absolute;
        right: 0;}
.hide{display:none;}
.table_part{width:100% ;position:relative;}
.table_part_1{width:100%;}
.table-head{width:100%;}
.s_title{width:35%}
.detail_div{width:35%}
.span_button{display: block;
        font-size: 35px;}
.inputcheckbox {width:30%}
.mobile_main{position: absolute ; width: 95%;height: auto;display:none;}
.med_1{width:100%;}
.globsearch{width:100%;}
.med_2{width:100%;}
.datesearch{width: 36%;}
.button2{width:25%;}
.closespanleft{font-size: 67px;
        color: red;
        padding: 10px;
        /* font-weight: 800; */
        margin: -50px -45px;
        display: none;
        position: absolute;}
.closebtn{margin-top: -28px;
        color: red;
        margin-left: -18%;
        font-size: 62px;
        position: absolute;}   
.bottom_button{width:20%;}
.totamt{width: 62%;
    margin-right: auto;}
}

@media only screen and (min-width: 601px) and (max-width: 768px) {
.search_div {height: 7%;
        margin-top: calc(100% - 91.0%);}
.top_div{margin-top: calc(100% - 80.5%); }
.s_first{width: 10%;padding:0;}
.med{width:0%;}
.s_lst{width: 10%;
        padding: 0;
        position: absolute;
        right: 0;}
.hide{display:none;}
.table_part{width:100% ;position:relative;}
.table_part_1{width:100%;}
.table-head{width:100%;}
.s_title{width:35%}
.detail_div{width:35%}
.span_button{display: block;
        font-size: 35px;}
.inputcheckbox {width:30%}
.mobile_main{position: absolute ; width: 95%;height: auto;display:none;}
.med_1{width:100%;height: 35px;}
.globsearch{width:100%;}
.med_2{width:100%;height: 35px;}
.datesearch{width: 36%;}
.button2{width:25%;}
.closespanleft{font-size: 67px;
        color: red;
        padding: 10px;
        /* font-weight: 800; */
        margin: -50px -45px;
        display: none;
        position: absolute;}
.closebtn{margin-top: -28px;
        color: red;
        margin-left: -18%;
        font-size: 62px;
        position: absolute;}   
.bottom_button{width:20%;}
.totamt{width: 62%;
    margin-right: auto;}

        }

@media only screen and (min-width: 769px) and (max-width: 1024px) {
            body{
                background-color: blue;
            }
        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px) {
           body {
               background-color: green;
            }
        }

        /* Media Query for Large screens */
@media (min-width: 1281px) {
#sub_bodywork{margin-top: calc(100% - 93%);height: -webkit-fill-available;}
.search_div{margin-top: calc(100% - 94.5%);}
.top_div{margin-top:1%;}
        }