.mobility-category-label{
    white-space: nowrap;
}
.chart-map-container{
    margin-top: -5px;
}

.mobileLayoutForCategory {
    display: none;
}

.mobile-nav-items{
    display: none;
}

.multiselect-Container .dropdown-item {
    white-space: break-spaces !important;
}

.desktop-view.icon-bar{
    display: flex;
}

#copyright,.icon-bar {
    background-color: white;
}
/* =========================== */

.search-input-group
{
    width: 100% !important;
    height: 36px;
}

.search-region-container{
    flex: 1;
}

@media (max-width: 378px)  
{
    body{
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .action-bar {
        height: 152px;        
    }
    .desktopLayoutForCategory{
        display: none !important;
    }

    .multiselect-Container {
        left: 159px;
        top: 166px !important;
    }

    .mobile-nav-items{
        display: flex;
    }

    #navChartTab,.maptab{
        display: none;
    }

     .width-93{
        width :99% !important;
    }
    
     .width-100{
        width :100% !important;
    }
    
    .width-1px{
        width :1px !important;
    }

    .ResponsiveModeOn aside.sidebar-left {
        width: 93% !important;       
    }

    .ResponsiveModeOn #mainArea {        
        width: 1px !important;
    }
    .mobiliyTabClass.reset-btn,.mobiliyTabClassforConfirmed.reset-btn{
        top: 205px !important;
    }

    .mobileLayoutForCategory{
        display: none !important;
    }

    .mobiliyTabActive #mapCanvas {
        height: calc(100vh - 254px) !important;
    }   

    .confirmedTabActive #mapCanvas {
        /* height: calc(100vh - 335px) !important; */
        height: calc(100vh - 254px) !important;
    } 
    
    .mobiliyTabActive .leftPane {
        height: calc(100vh - 242px) !important;
    }

    .confirmedTabActive .leftPane {
        height: calc(100vh - 238px) !important;
    }

    .confirmedTabActive .footer,.mobiliyTabActive .footer {
        height: 4.4rem;
    }
    
    #mobilityDataInfoOnMap,#confirmedDataInfoOnMap {
        display: inline;  
        bottom: 12px;      
    }

    
    #chartdiv{
        height: 520px !important;
    }

    .icon-link {
        width: 25px;
        height: 25px;
        line-height: 25px;
    }

    .mobiliyTabClass.footer{
        height: 4.0rem;
    }

    #queryByName::placeholder{
        text-overflow:ellipsis;
    }

    .multiselect-Container .multiselect-native-select .btn-group{
        width: 150px;
    }

    

    #displayOptionWrapper {
        bottom: 50px !important;
    }
  /* ===================== */
    .search-input-group
    {
        width: 100% !important;
    }

    .search-region-container{
        flex: unset;
    }
    .action-box {
        margin-right: 0px;
    }

    #ui-id-1 {
        width: 65% !important;
    }

    #mainArea.position{
        position: relative;
    }
}

@media(max-width:1024px)
{
    .desktop-view.icon-bar{
        display: none;
    }

    .mobile-view.icon-bar{
        display: block !important;
    }

    /* #chartdiv text{
        font-size: 12px;
    } */
}



@media (min-width: 379px) and (max-width: 478px) {

    body{
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
    }
	  
    .desktopLayoutForCategory{
        display: none !important;
    }

    .mobileLayoutForCategory {
        display: none!important;
    }

    .mobiliyTabClassforConfirmed.reset-btn{
        top: 132px !important;
    }

    .mobiliyTabClass.reset-btn{
        top: 180px !important;
    }
    

    .action-box{
        padding: 0px;    
        margin-right: 0px;
    }

    .switch-field label{
        padding: 7px 7px;
    }

    #renderField{
        margin-right: 35px;
    }

    .mobiliyTabClass.action-bar {
        height: 130px;
    }

    .mobility-category-section {
        margin-left: 0px;
    }
     

    /* .multiselect-Container {
        left: unset;
    } */

    /* .multiselect-Container {
        top: 140px !important;
    } */

    /* .multiselect-container.dropdown-menu.show {
        width: 300px;
    } */

    .mobile-nav-items{
        display: flex;
        margin-top: 15px;
    }

    #navChartTab,.maptab{
        display: none;
    }

    .ResponsiveModeOn aside.sidebar-left {
        width: 99% !important;        
    }

    .ResponsiveModeOn #mainArea {        
        width: 1px !important;
    }

    .width-93{
        width :99% !important;
    }
    
    .width-100{
        width :100% !important;
    }
    
    .width-1px{
        width :1px !important;
    }

    /* .mobiliyTabActive #mapCanvas {
        height: calc(100vh - 254px) !important;
    }   

    .confirmedTabActive #mapCanvas {
        height: calc(100vh - 254px) !important;
    }  */
    
    /* .mobiliyTabActive .leftPane {
        height: calc(100vh - 224px) !important;
    } */

    /* .confirmedTabActive .footer,.mobiliyTabActive .footer {
        height: 4.4rem;
    }
    .confirmedTabActive .leftPane {
    height: calc(100vh - 175px);
    } */

    #mobilityDataInfoOnMap,#confirmedDataInfoOnMap {
        display: inline;        
    }

    #chartdiv{
        height: 520px !important;
    }

    #ui-datepicker-div {        
        z-index: 1001 !important;
    }

    

    /* =========================== */
    .search-input-group
    {
        width: 100% !important;
    }

    .search-region-container{
        flex: unset;
        margin-top: 5px;
    }
    .action-box {
        margin-right: 0px;
    }

    #ui-id-1 {
        width: 71% !important;
    }

    #mainArea.position{
        position: relative;
    }

  }

@media (min-width: 479px) and (max-width: 540px) {  

    body{
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .mobiliyTabClass.action-bar {
        height: 140px;
    }

    .action-bar {
        margin-top: -12px;
    }
    

    .mobility-category-section{
        margin-left: 5px;
        margin-top: -40px;
    }

    .multiselect-Container {       
        left: 13px;
        top: 140px !important;
    }

    .mobile-nav-items{
        display: flex;
        margin-top: 10px;
    }

    #navChartTab,.maptab{
        display: none;
    }

    .ResponsiveModeOn aside.sidebar-left {
        width: 99% !important;        
    }

    .ResponsiveModeOn #mainArea {        
        width: 1px !important;
    }

    .width-93{
        width :99% !important;
    }
    
    .width-100{
        width :100% !important;
    }
    
    .width-1px{
        width :1px !important;
    }

    .mobiliyTabClass.reset-btn {
        top: 177px !important;
    }

    .mobiliyTabClassforConfirmed.reset-btn {
        top: 130px !important;
    }

    /* .mobiliyTabActive #mapCanvas {
        height: calc(100vh - 254px) !important;
    } 

    .confirmedTabActive #mapCanvas {
        height: calc(100vh - 254px) !important;
    }
    
    .mobiliyTabActive .leftPane {
        height: calc(100vh - 225px);
    }
    .confirmedTabActive .leftPane {
        height: calc(100vh - 175px);
    } */

    .footer {
        height: 4.2rem;
    }

    .desktopLayoutForCategory{
        display: none !important;
    }

    .mobileLayoutForCategory {
        display: none !important;
    }

    .reset-btn{
        top: 140px !important;
    }

    .action-bar {
        height: 90px;
    }

    .mobiliyTabActive #chartdiv {
        height: 520px !important;
    }

    .confirmedTabActive #chartdiv {
        height: 555px !important;
    }

    #ui-datepicker-div {
        z-index: 1001 !important;
    }

    .multiselect-Container .multiselect-native-select .btn-group{
        width: 150px;
    }

    #casesDate{
        margin-bottom: 5px;
    }

    /* =========================== */
    .search-input-group
    {
        width: 100% !important;
    }

    .search-region-container{
        flex: unset;
        margin-top: 5px;
    }
    .action-box {
        margin-right: 0px;
    }

    #ui-id-1 {
        width: 75% !important;
    }

    #mainArea.position{
        position: relative;
    }
}

@media (min-width: 541px) and (max-width: 766px) {

    body{
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .desktopLayoutForCategory{
        display: none !important;
    }

    .mobileLayoutForCategory {
        display: none !important;
    }

    .reset-btn{
        top: 133px !important;
    }

    .multiselect-Container {
        top: 90px !important;
    }

    .multiselect-container.dropdown-menu.show {
        width: 375px;
        left: -120px !important;
    }

    .mobile-nav-items{
        display: flex;
    }

    #navChartTab,.maptab{
        display: none;
    }

    .ResponsiveModeOn aside.sidebar-left {
        width: 99% !important;       
    }

    .ResponsiveModeOn #mainArea {        
        width: 1px !important;
    }

    .width-93{
        width :99% !important;
    }
    
    .width-100{
        width :100% !important;
    }
    
    .width-1px{
        width :1px !important;
    }

    #chartdiv {
        height: 520px !important;
    }

    /* .mobiliyTabActive #mapCanvas {
        height: calc(100vh - 254px);
    } 

    .confirmedTabActive #mapCanvas {
        height: calc(100vh - 240px) !important;
    }
    
    .mobiliyTabActive .leftPane {
        height: calc(100vh - 175px);
    }
    .confirmedTabActive .leftPane {
        height: calc(100vh - 175px);
    } */

    .footer {
        height: 4.5rem;
    }
    #casesDate{
        margin-bottom: 5px;
    }

    #ui-datepicker-div {
        z-index: 1001 !important;
    }

    .multiselect-Container .multiselect-native-select .btn-group{
        width: 145px;
    }

    .multiselect-Container {
        left: 393px;
    }

    .mobility-category-section {
        margin-left: -21px;
    }

     /* =========================== */
     .search-input-group
     {
         width: 100% !important;
     }
 
     .search-region-container{
         flex: unset;
         margin-top: 5px;
     }
     .action-box {
         margin-right: 0px;
     }
 
     #ui-id-1 {
         width: 80% !important;
     }

     #mainArea.position{
        position: relative;
    }
}

@media (min-width: 767px) and (max-width: 1024px) {
    
    body{
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
    }

    ul.categorytoken {
        list-style-type: none;        
        flex-wrap: wrap;
        margin-left: -35px;
        margin-top: 10px;
    }

    .category-clips {
        font-size: 12px !important;
        /* margin-top: 8px; */
    }

    .subcategory-count-badge {
        margin-top: -14px;
    }

    .action-bar {
        height: 76px;
        overflow: hidden;
    }

    .category-token-container{
        padding-top: unset !important;
      }

      /* .multiselect-Container .multiselect-native-select .btn-group, .multiselect-container.dropdown-menu.show {
        width: 100px;
    } */
    
    .multiselect-Container {
        position: absolute;
        top: 89px !important;
    }

    .chart-map-container {
        margin-top: 0px;
    }

    .categorytoken li {
        margin-bottom: 6px;
    }

    .headerSection {
        font-size: 1.2rem;
        margin-top: 0px;
        white-space: nowrap;
    }
    
    .multiselect-container.dropdown-menu.show 
     {
        width: 350px;
     }

     #chartdiv{
         height: 550px !important;
     }
     
     .desktopLayoutForCategory{
         display: none !important;
     }
     .mobileLayoutForCategory {
        display: flex;
    }

     .mobiliyTabClass.reset-btn{
         top: 180px !important;
     }

     .mobiliyTabClassforConfirmed.reset-btn{
        top: 125px !important;
    }

     /* .mobiliyTabClass#mapCanvas {
        margin-top: -45px;
        height: calc(100vh - 265px);
    } */

    #timeInfo{
        margin-right: 5px;
    }
    .mobiliyTabClass.footer {
        bottom: -1px;
    }

   

    /* .mobiliyTabActive .leftPane {
        height: calc(100vh - 175px);
    } */

    .confirmedTabActive .leftPane {
    height: calc(100vh - 175px);
    }

    .confirmedTabActive .footer {
        height: 5.5rem;
    }

    .multiselect-Container .multiselect-native-select .btn-group{
        width: 150px;
    }

    /* =========================== */
    .search-input-group
    {
        width: 100% !important;
    }

    
    .action-box {
        margin-right: 0px;
    }

    #ui-id-1 {
        width: 80% !important;
    }
    

  }

@media (min-width: 1025px) and (max-width: 1279px)
{
	  
    .category-token-container {
        padding-top: 4px;
    }
    
    .categorytoken li {
        margin-bottom: 6px;
    }

    .chart-map-container {
        margin-top: 10px;
    }

    .headerSection {
        font-size: 1.4rem;
    }

    .mobileLayoutForCategory{
        display: none !important;
    }

    #chartdiv{
        height: 550px !important;
    }

   
}

@media (min-width: 1271px)
{
    .mobileLayoutForCategory{
        display: none !important;
    }

    
}



@media (max-width: 766px) and (orientation: landscape)
{
	body{
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
       }

       .mobiliyTabActive #mapCanvas,.confirmedTabActive #mapCanvas {
            height: calc(100vh - 85px) !important;
        }

        .mobiliyTabActive .leftPane,.confirmedTabActive .leftPane {
            height: calc(100vh - 5px);
        }
  }

  @media (min-width: 767px) and (max-width: 1024px) and (orientation: landscape) 
  {
    body{
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
       }

       .mobiliyTabActive #mapCanvas,.confirmedTabActive #mapCanvas{
                 height: calc(100vh - 65px);
            }
        
        .mobiliyTabClass#mapCanvas {
            margin-top: -45px;           
        }

        .mobiliyTabActive .leftPane,.confirmedTabActive .leftPane {
            height: calc(100vh - -1px);
        }

        .mobiliyTabClass.footer {
            bottom: -1px;
        }

        #casesDate{
            margin-bottom: 5px;
        }
  }