/* max-width */
:root {
  --theam-color: rgba(1, 33, 55, 1);
  --white-color: white;
  --dark-color: black;
  --blue-color: rgba(28, 144, 208, 1);
  --orange-color: rgba(245, 126, 34, 1);



}

/* xl */
@media (max-width:1800px) {

.dashboard-width {
  width: 81%;
  margin-left: 20px;
}
}
@media (max-width:1780px) {

.doctab{
  margin-left: 4px;
}
}
@media (max-width:1707px) {

  .doctab {
    margin-left: 10px;
}
  }

  @media (max-width:1620px) {

    .doctab {
      margin-left: 25px;
  }
    }

    @media (max-width:1360px) {

      .doctab {
        margin-left: 40px;
    }
 
      }
@media (max-width:1600px) {

  .dashboard-width {
    width: 77%;
    margin-left: 67px;
}
  .invoiceadd {
    width: 105% !important;
}

  }

  @media (max-width:1455px) {

    .dashboard-width {
      width: 76%;
    }
    .invoiceadd {
      width: 111% !important;
  }
    }
    
/* xl */
@media (max-width:1399px) {
  .container {
    max-width: 1140px;
  }

  .arrow{
    width: 2% !important; height: 32px;
  }
  .Delivered-btn {
    padding: 9px  ;
}
.dashboard-width {
  width: 73%;
  margin-left: -10px;
}

}


@media (max-width:1343px) {

  .order-item h6 {
    font-size: 12px;
  }
  .order-item p {
    font-size:13px;
  }

}

@media (max-width: 1290px) {
  .dashboard-width {
      width: 72%;
      margin-left: 4px;
  }
}

@media (min-width: 1399px) and (max-width: 1525px) {
  .sidear-width{
    width: 21.666667% !important;
}
.dashboard-width {
  width: 75.333333%;
  margin-left: 14px;
}
}

@media (min-width: 1580px) and (max-width: 2000px) {
  .widthdispay {
    margin-left: 7rem !important;
    width: 92% !important;
}
}
@media (min-width: 1399px) and (max-width: 1707px) {
  .ongoing-order{
    height: 437px;
  }

}



@media (min-width:200px) and (max-width:681px) {
  .creat-order{
    margin-top: 70px;
  }
.orde-main-div{
  justify-content: center !important;
}
} 

@media (min-width: 1651px) and (max-width: 1750px) {
  .dashboard-width{
    padding-left: 6px ;
  }
  
}

@media (min-width: 1595px) and (max-width: 1651px) {
  .dashboard-width{
    padding-left: 20px ;
  }
  
}

/* @media (min-width: 1495px) and (max-width: 1525px) {
  .dashboard-width{
    width: 78%;
    margin-left:52px;
  }
  
} */
@media (min-width: 991px) and (max-width: 1599px) {
  .login-from {
    margin-right: -35px;
  }
}
@media (max-width: 1265px) {
  .dashboard-width {
      width:72%;
  }
  .map-details p {
    font-size: 12px;
  }
}
@media (max-width:1199px) {

  .arrow{
    width: 1% !important; 
margin-left: 5px;
   }
   .dashboard-width{
    width: 95% !important;
    margin-left: 2rem !important;
  }
  #exampleModal .modal-dialog {
    position: fixed; /* Use fixed positioning */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Offset by half its width and height */
    max-width: 100%; /* Adjust width as needed */
    width: 100%; /* Optional: allows the modal to be responsive */
  }
  .modal-backdrop {
    left: 0; /* Remove left offset */
    right: 0; /* Remove right offset */
    width: 100%; /* Make the width cover the entire viewport */
    height: 100%; /* Ensure the height covers the entire viewport */
    top: 0; /* Optional: explicitly set top to 0 */
    bottom: 0; /* Optional: explicitly set bottom to 0 */
}
  .headerdailog{
    float: left;
  }
  .from-img img{
    height: 35px; width: 45px; border-radius: 50%;
  }
  .headermodal {
    width: 100%;
    height: 90vh;
}
}
/* md */
@media (max-width:991px) {
  .container {
    max-width: 900px;
  }
  .invoice-img {
    width: 491px;
    margin: auto;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    margin-top: 44px;
}

.invoiceadd {
  margin: auto;
}
.invoiceadd {
  width: 73% !important;
}
  .doctab {
      margin-left: -23px;
  }
  .routarrow {
    width: 2%; height: 32px;
  }
}
@media (max-width: 940px) {
  .doctab {
      margin-left: -10px;
  }
}
@media (max-width: 775px) {
  .doctab {
      margin-left: 10px;
  }
}
/* sm */
@media (max-width: 767px) {
  .container {
    max-width: 100%;

  }



}

/* xs */
@media (max-width:575px) {
  .container {
    max-width: 100%;

  }
  .invoice-img {
    width:365px;
  }
  .map-botoom{
    position: absolute;
    bottom: 0px;
    right:16%;
  }
 
}
@media (max-width:481px) {
  .container {
    max-width: 100%;

  }


}