@media only screen and (max-width: 768px), (min-device-width: 768px) and (max-device-width: 1024px)  {

  .scheduledDeliveries {
      margin-left: 0px;
      margin-right: 0px;
  }
  .googleMapImg {
      display: inline-block;
  }

  .cardContent {
    display: block;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    font-weight: 800;
  }
  .modal-header{
    font-size: 14px !important;
  }

  .deliveryModalBody {
    height: 50px;
    font-size: 14px;
  }
  // .mobileScreen{
  //   max-width: -100% !important;
  // }
  .delivCount {
    padding-top: 9px !important;
    // margin-left:30%  !important;
  }


  #mobileView{
    padding-bottom:10% !important;
  }
  .noWrapContent{
      white-space: nowrap !important;
      text-align: left !important;
  }
    .table .delAddress{
        max-width:50vh !important;
        padding: 0;
        position: absolute;
    }
    // table{
    //     width:200vh;
    // }
	
    tr {
        border: 1px solid #ccc; 
        margin-bottom: 10px;
    }

	
    table td { 
        /* Behave  like a "row" */
        border: none;
        position: relative;
        padding-left: 50%;
        // white-space: nowrap;
        text-align: left !important;
        font-size: small;
    }

    td:before { 
        /* Now like a table header */
        // position: absolute;
        float: left;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        white-space: nowrap;
        text-align: left !important;
        font-weight: 600;
    }
    button{
      font-size: 12px !important;
    }
    md-button{
      font-size: 12px;
    }

    .startSchedulerIcon{
      visibility: visible !important;
    }
    ul li{
      font-size: 12px;
    }
    .filterData{
      display: inline;
    }
    .desktop{
      display: none;
    }

    .deliveryData > td {
        text-align: center !important;
    }
    .colWidth {
        width: 100%;
    }

    .table .delAddress{
        max-width:50vh !important;
        padding: 0;
        position: absolute;
    }
    .colWidthIcon{
        width: 60px;
    }


   
}

// @media only screen and (max-height: 600px) {
//   .form-height{
//     height: 37% !important;
//   }
// }
 // Dashboard mobile responsiveness
 @media (max-width: 768px) {
    svg {
        height: 35px;
        width: 35px;
    }
    .sidebar-card-inner-red, .sidebar-card-inner-yellow, .sidebar-card-inner-blue {
        padding: 10px 0px;
    }
    h2{
        font-size: 25px;
    }
    h4 {
        font-size: 14px;
        font-weight: 600;
    }
    .tile_count .tile_stats_count .count {
        font-size: 40px;
    }
}

@media only screen and (max-width: 768px) {
    // .delivery-map{
    //   .canvas-map {
    //     display: none;
    //    }
    // }
    .delivery-map{
      display: none;
    }
     .new-del-label, .deliveries-label, .trip-label, .driver-label{
       height:15vh;
       font-size:medium;
     }
  }

  //Landscape mode dashboard
  @media (max-width: 1024px) {
    svg {
        height: 35px;
        width: 35px;
    }
    .sidebar-card-inner-red, .sidebar-card-inner-yellow, .sidebar-card-inner-blue {
        padding: 10px 0px;
    }
    h2{
        font-size: 25px;
    }
    h4 {
        font-size: 14px;
        font-weight: 600;
    }
}


//Common tags/Elements
@media (max-width: 768px) {
    .content-wrapper,
    .main-footer {
      margin-left: 0;
    }
  }
  @media (min-width: 768px) {
    footer {
      margin-left: 230px;
    }
  }

  
@media (min-width: 768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        border-left: 1px solid #e7e7e7;
    }

}

// Sidebars mobile responsiveness

@media (min-width: 768px) {
    .sidebar {
      z-index: 1;
      position: absolute;
      width: 250px;
      margin-top: 75px;
    }
  
    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
      margin-left: auto;
    }
  }

// grid syatme columns
@media only screen and (max-width: 768px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
  .col-sm-6 {
    width: 95%;
  }
  .widthCheckbox{
    height: 10px !important;
    width: 10px !important;
  }
  .colWidthAdd {
    width: 250px;
}
.expandElispsis {
    white-space: normal;
    width: 500px;
}
.ellipsis > td {
    max-width: 100px !important;
}
}

// dialog window
@media (min-width: 768px){
    .modal-sm {
      width: 550px;
    }
  }

  @media (min-width: 768px) {
    .modal-content {
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
    }
    .table-scroll{
      // overflow-y: auto;
      // overflow-x: auto;
    }
    
  }
  @media only screen and (max-width: 767px) {
    .user_profile{
      margin-top:-9% !important;
      display: none;
    }
    .desktopView{
      display: none;
    }
  }

  //Signout button
  @media only screen and (max-width: 767px) {
    .md-button.btn-signout {
      display: none;
    }
    
    .mobileView{
      display: block;
      visibility: visible !important;
    }
    .orgFont{
      font-size: large;
    }
    .paginator{
      margin-top: 0px !important;
    }
    .mobile{
      display: block;
    }
  }
  @media only screen and (max-width: 768px) {
    .mobile{
      display: block;
    }
  }

  @media only screen and (min-width: 1024px) {
    .desktop{
      display: block;
    }
  }
 

  
  //Hamburger menu
  @media only screen and (min-width: 768px) {
    #bs-collapse{
      visibility: visible !important;
    }
    .mobile_color{
      background-color: #ff5722 !important;
    }
    // .md-tab.md-active{
    //   background-color:  #ff5722 !important;;
    // }
  }



//Sidebar responsiveness
@media (max-width: 768px) {
.main-sidebar{
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
}
}
@media (min-width: 768px) {
.sidebar-collapse .main-sidebar{
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
}
}
@media (min-width: 768px) {
    .sidebar-collapse .content-wrapper,
    .sidebar-collapse .right-side,
    .sidebar-collapse .main-footer {
        margin-left: 0;
    }
}


@media (min-width: 768px) {
    .sidebar-collapse .content-wrapper,
    .sidebar-collapse .right-side,
    .sidebar-collapse .main-footer {
      margin-left: 0;
    }
  }
  @media (min-width: 768px) {
    .sidebar-collapse .main-sidebar,
    .sidebar-collapse .left-side {
      -webkit-transform: translate(-230px, 0);
      -ms-transform: translate(-230px, 0);
      -o-transform: translate(-230px, 0);
      transform: translate(-230px, 0);
    }
  }
  @media (max-width: 768px) {
    .sidebar-open .content-wrapper,
    .sidebar-open .right-side,
    .sidebar-open .main-footer {
      -webkit-transform: translate(230px, 0);
      -ms-transform: translate(230px, 0);
      -o-transform: translate(230px, 0);
      transform: translate(230px, 0);
    }
  }
// general tags
  @media (max-width: 768px) {
    a, p, label{
      font-size: 12px !important;
    }
    h1{
      font-size: 14px !important;
    }
    h3{
      font-size: 18px !important;
    }
  }
  

  @media (min-width: 1024px) {
    a, p, label{
      font-size: 14px !important;
    }
    h1{
      font-size: 16px;
    }

  }



//1112*834

@media  (min-width: 1112px) and (min-height: 834px) and (max-height:1112px) and (max-width: 834px){
  // .table-height{
  //   height: 95% !important;
  // }
  // .table-height-filter-or-create-trip{
  //   height: 85% !important;
  // }
  // .table-height-both{
  //   height:85% !important;
  // }
  // .form-height{
  //     height: 100% !important;
  // }
  // .deliveryDialog > md-dialog-content{
  //     height: 70vh !important;
  // }
  // .deliveryDialog{
  //     height: 70vh !important;
  // }
  // .requestDialog{
  //   height: 75vh !important;
  // }
  // md-tabs {
  //   min-height: 650px !important;
  // }
}

// 834 * 1112 
@media (min-width: 834px) and (min-height: 1112px) and (max-height: 1112px) and (max-width: 834px){
  // .table-height{
  //   height: 97% !important;
  // }
  // .table-height-filter-or-create-trip{
  //   height: 90% !important;
  // }
  // .table-height-both{
  //   height:85% !important;
  // }
  // .form-height{
  //     height: 100% !important;
  // }
  // // .deliveryDialog > md-dialog-content{
  // //     height: 70vh !important;
  // // }
  // .deliveryDialog{
  //     height: 70vh !important;
  // }
  // .requestDialog{
  //   height: 75vh !important;
  // }
  // md-tabs {
  //   min-height: 650px !important;
  // }
}

//macbook and macbook pro
@media (min-width: 2880px) and (min-height: 1800px) and (max-height: 1800px) and (max-width: 2880px){
  .table-height{
      height: 60vh !important;
  }
  .form-height{
      height: 100% !important;
  }
  .deliveryDialog{
      height: 80vh !important;
  }
  .requestDialog{
    height: 80vh !important;
  }
  
}

@media  screen and (max-width: 1366px) {
  .tabs-height{
    height: 60%
  }
}

@media screen and (min-width: 1024) {
  .deliveryDialog{
    height: 80vh;
  }
}

@media (min-width: 2560px) and (min-height: 1600px) and (max-height: 1600px) and (max-width: 2560px){

}



//iPad Pro 1366x1024
@media (min-width: 1356px) and (max-width: 1376px) and (min-height: 1014px) and (max-height: 1034px) {
  .Schedulerbuttons{
    width: 14vh !important;
  }
  .hide-column{
    display: none;
  }
  .select-sizing{
    width:85% !important
  }
  .status-sizing{
    width:100% !important
  } 
}

//iPad Pro 1024x1366
@media (min-width: 1014px) and (max-width: 1034px) and (min-height: 1356px) and (max-height: 1376px) {
  .hide-column{
    display: none;
  }
  .select-sizing{
    width:100% !important
  } 
  .status-sizing{
    width:100% !important
  } 
}

//iPad 768x1024 
@media (min-width: 758px) and (max-width: 778px) and (min-height: 1014px) and (max-height: 1034px){
  .Schedulerbuttons{
    width: 19vh !important;
  }
  .hide-column{
    display: none;
  }
  .select-sizing{
    width:55% !important
  }
  .status-sizing{
    width:40% !important
  } 
}

//iPad 1024x768
@media (min-width: 1014px) and (max-width: 1034px) and (min-height:757px) and (max-height: 778px) {
  .select-sizing{   
    width:100% !important
  }
  .status-sizing{
    width:100% !important
  } 
  .Schedulerbuttons{
    width: 14vh !important;
  }
  .hide-column{
    display: none;
  }

}