/* ========================================
   RESPONSIVE BREAKPOINTS
   - 1200px: Large tablets and small desktops
   - 1024px: Tablet landscape
   - 992px: Bootstrap lg breakpoint
   - 768px: Tablet portrait
   - 568px: Phone landscape  
   - 600px: Small phones
   - 480px: Extra small phones
   - 375px: iPhone SE and similar
   ======================================== */

/* Large Tablets and Small Desktops */
@media only screen and (max-width: 1200px) {
  .outer_area {
    margin: 20px;
    padding: 15px;
  }
  
  .broker_dash .col-lg-2 {
    width: 48%;
    margin: 10px 1%;
  }
  
  .suggested_carrier .info_in {
    width: 20%;
  }
}

/* Tablet Landscape */
@media only screen and (max-width: 1024px) {
  .outer_area {
    margin: 15px;
    padding: 10px;
  }
  
  .pickup_record .col-lg-10 {
    width: 95%;
  }
  
  .broker_dash .col-lg-2 {
    width: 100%;
    margin: 10px 0;
  }
  
  .suggested_carrier .info_in {
    width: 25%;
  }
  
  .load_header .col-lg-3 input {
    font-size: 14px;
  }
  
  /* Make tables scrollable */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Bootstrap LG Breakpoint - Tablet Portrait */
@media only screen and (max-width: 992px) {

  .outer_area{
    padding: 0px 20px;
  }
  .pickup_area .col-lg-3 {
    margin-bottom: 5px;
  }
  .submit_outer
  {
    padding: 0px 30px;
  } 
  .pickup_area{
    padding: 0px 20px;
  }
  .pickup_record {
    padding: 0px 20px;
  }
  .detail_area {
    padding: 0px 20px;
  }
  .detail_area .col-lg-3 input{
    margin-bottom: 10px;
  }
  .detail_area .col-lg-6{
    padding: 0px;
  }
  .detail_area label
  {
    margin-bottom: 0px;
    
float: left;
width: 100%;
  }
  .quote {
    margin-left: 5px;
    border-bottom: 1px solid darkgray;
    margin-bottom: 20px;
    float: left;
    padding: 0px;
  }
  .delivery_area .col-lg-10 {
    margin: auto;
    padding: 0px;
    margin-left: 20px;
  }
  .facility_main{

    padding: 20px;
  }
  .facility .col-lg-10 .col-lg-6{
    float: left;
    padding: 0px 20px;
    margin-bottom: 20px;
  }
  .facility .col-lg-10 .col-lg-4{
    float: left;
    padding: 0px 20px;
    margin-bottom: 20px;
  }
  .facility .col-lg-10 .col-lg-1{
    float: left;
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 0px;
    width: 95%;
  }
  .facility .col-lg-10 .col-lg-2{
    float: left;
    margin-bottom: 20px;
    margin-left: 20px !important;
    width: 95%;
  }
  .facility .col-lg-10 .col-lg-3{
    float: left;
    margin-bottom: 20px;
    margin-left: 20px !important;
    width: 95%;
  }
  .powered_by{
    margin-top: 20px !important;
  }
  .list_main ul li{
    float: left;
   width: 32%;
   margin-bottom: 10px;
  }
  .list_data ul {
    float: left;
    width: 10.8%;
    margin-bottom: 10px;
  }

  .Customer_area_bdr {
    border-left: 0px;
    padding-left: 30px;
  }
  .Customer_area .col-lg-12 .col-md-6{
    padding-left: 0px;
  }
  .Customer_area .col-lg-6 .col-md-4{

    float: left;
    padding-left: 0px;
  }
  .pickup_section .col-md-6 h5{
    margin-left: 20px;
  }
  .pickup_section .col-md-6 label{
    margin-left: 20px;
  }
  .suggested_carrier .col-lg-12 ul li{
    font-size: 8px !important;
  }
  .shipment_header .col-lg-3 {
    float: right;
    width: 33%;
  }
  .shipment_header .col-lg-3 .create_ship_btn {
   
    margin-left: 10px !important;
  }
  .shipment_header_right h6 {
    padding-right: 10px;

  }
  .col-lg-6 .col-lg-7 {
    margin-left: 0px !important;
    padding-left: 0px !important;
  }
  .mode_area .col-lg-6 .col-lg-2 {
   
    padding-left: 0px !important;
    margin-left: 0px !important;
  }
  .mode_area .col-lg-12 .col-lg-6 .col-lg-4{
    padding: 0px !important;
  }
  .mode_area_right{
    float: left;
    width: 97%;
    margin-left: 15px !important
  }
  .contract_middle .contract_middle_right .col-lg-3 {

    margin-left: 15px !important;
  }
  .detail_area .col-lg-3 {
  
    margin-bottom: 10px;
  }
  .detail_area .col-lg-10 .col-lg-3 .col-lg-6 {
    margin-top: 10px;
  }
  .dropdown-content a {
   
    font-size: 10px;
  }
  .ship_nav_dd{
    margin-top: 0px;
  }

}

/* Tablet Portrait - MD Breakpoint */
@media only screen and (max-width: 768px) {
  /* Make all columns stack */
  [class*="col-lg-"] {
    width: 100% !important;
    float: none;
    margin-left: 0 !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .outer_area {
    margin: 10px;
    padding: 10px;
  }
  
  .logo_sec h3 b {
    font-size: 20px;
  }
  
  .broker_dash .col-lg-2,
  .broker_dash .col-lg-3,
  .broker_dash .col-lg-5 {
    width: 100% !important;
    margin: 10px 0 !important;
  }
  
  .suggested_carrier .info_in {
    width: 50% !important;
    font-size: 12px;
  }
  
  .shipment_header .col-lg-9,
  .shipment_header .col-lg-3 {
    width: 100% !important;
    text-align: center;
    margin: 10px 0;
  }
  
  .load_header .col-lg-3,
  .load_header .col-lg-4,
  .load_header .col-lg-6 {
    width: 100% !important;
    margin-bottom: 10px;
  }
  
  /* Stack navigation items */
  .list_main ul li {
    width: 48% !important;
  }
  
  .Customer_area_bdr {
    border-left: 0;
    padding-left: 15px;
    margin-top: 20px;
  }
  
  /* Form elements full width */
  .detail_area .col-lg-3 input,
  .detail_area .col-lg-3 select,
  .detail_area .col-lg-4 input {
    width: 100% !important;
  }
  
  /* Modals full width */
  .modal-load.modal.left .modal-dialog,
  .modal-load.modal.right .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phone Landscape */
@media only screen and (max-width: 568px) {
  .logo_sec h3 b {
    font-size: 18px;
  }
  
  .pickup_area .col-lg-3,
  .pickup_area .col-lg-6 {
    font-size: 12px;
    padding: 8px;
  }
  
  .shipment_header .col-lg-9 h5 {
    font-size: 14px;
  }
  
  .suggested_carrier .info_in {
    width: 100% !important;
    margin-bottom: 10px;
  }
  
  .list_main ul li {
    width: 100% !important;
    margin-bottom: 8px;
  }
  
  .broker_dash {
    padding: 10px 5px;
  }
  
  /* Reduce button sizes */
  .add_more_btn,
  .submit_area .submit_btn,
  .pickup_record .col-lg-10 .offer_btn {
    font-size: 14px;
    padding: 8px 12px;
  }
}






@media only screen and (max-width: 600px) {
  .first_form {
    margin: 0px auto;
    margin: 0px 10px;
  }
.logo_sec img{
  max-width: 85%;
}
.logo_sec h3 b{
  font-size: 22px;
}
.lanes_serviced label{
  margin-top: 10px;
}
.client_text p{
  padding: 0px 20px;
}
.pickup_area .col-lg-3{
  margin-bottom: 5px;
}
.pickup_record
{
  margin: auto;
  padding: 10px;
}
.pickup_record .col-lg-2{
  padding: 0px;
}
.submit_outer {
  float: left;
  margin: auto;
}
.detail_area {
  float: left;
  margin: auto;
}
.quote {
  margin-left: 0px;
  border-bottom: 1px solid darkgray;
  margin-bottom: 20px;
  float: left;
  padding: 0px;
}
.outer_area{
  padding: 0px;
}
.detail_area .col-lg-6{
  padding: 0px;
}
.detail_area .col-lg-4 {
  float: left;
  padding-right: 0px;
  margin-bottom: 10px;
    margin-top: 10px;
}
.facility .col-lg-10 .col-lg-1{
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;
  padding: 0px;
  width: 92% !important;
}
.list_main ul li {
  float: left;
  width: 48%;
  margin-bottom: 10px;
}
.list_data ul {
  float: left;
  width: 16.8%;
  margin-bottom: 10px;
}
.suggested_carrier .col-lg-12{
  padding: 0px !important;
}
.suggested_carrier .info_in h5 {
  font-size: 9px;
}
.suggested_carrier .col-lg-12 ul li{
  font-size: 6px !important;
}
}

/* Extra Small Phones - Portrait */
@media only screen and (max-width: 480px) {
  /* Ultra compact layout */
  body {
    font-size: 14px;
  }
  
  .outer_area {
    margin: 5px;
    padding: 8px;
  }
  
  .logo_sec h3 b {
    font-size: 16px;
  }
  
  /* Stack all form elements */
  .pickup_area .col-lg-3,
  .pickup_area .col-lg-6,
  .detail_area .col-lg-3,
  .detail_area .col-lg-4,
  .facility .col-lg-10 .col-lg-6 {
    width: 100% !important;
    margin-bottom: 8px;
    padding: 5px;
  }
  
  /* Reduce header sizes */
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  h4 { font-size: 14px; }
  h5 { font-size: 13px; }
  h6 { font-size: 12px; }
  
  /* Compact buttons */
  .add_more_btn,
  .submit_area .submit_btn,
  .submit_area .submit_btn_book,
  .pickup_record .col-lg-10 .offer_btn,
  .pickup_record .col-lg-10 .book_btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    width: 100%;
    margin: 5px 0;
  }
  
  /* Full width tables with horizontal scroll */
  table {
    font-size: 12px;
  }
  
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Compact broker dashboard */
  .broker_dash .col-lg-2 {
    padding: 10px 5px;
    margin: 5px 0 !important;
  }
  
  .broker_dash .col-lg-2 h5 {
    font-size: 14px;
  }
  
  /* Navigation items full width */
  .list_main ul li,
  .list_data ul {
    width: 100% !important;
    margin-bottom: 5px;
  }
  
  /* Compact modal headers */
  .modal-header {
    padding: 10px 12px !important;
  }
  
  .modal-title {
    font-size: 16px !important;
  }
  
  /* Reduce shipment header complexity */
  .shipment_header .col-lg-9 input {
    font-size: 12px;
    padding: 5px;
  }
  
  .shipment_header .col-lg-3 .create_ship_btn,
  .shipment_header .col-lg-3 a {
    font-size: 12px;
    padding: 5px 8px;
  }
}

/* iPhone SE and similar small devices */
@media only screen and (max-width: 375px) {
  .outer_area {
    margin: 3px;
    padding: 5px;
  }
  
  .content {
    padding: 5px !important;
  }
  
  /* Even more compact typography */
  body {
    font-size: 13px;
  }
  
  h1 { font-size: 18px; }
  h2 { font-size: 16px; }
  h3 { font-size: 15px; }
  h4 { font-size: 14px; }
  h5 { font-size: 12px; }
  
  /* Ultra compact buttons */
  button,
  .btn,
  input[type="submit"] {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
  
  /* Compact inputs */
  input,
  select,
  textarea {
    font-size: 13px !important;
    padding: 5px !important;
  }
  
  /* Hide less important elements on very small screens */
  .page-subtitle,
  .breadcrumb {
    display: none;
  }
}

/* Landscape orientation specific fixes */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical padding in landscape mode */
  .content {
    padding: 10px 0px !important;
  }
  
  .modal-body {
    max-height: 300px;
    overflow-y: auto;
  }
  
  .broker_dash .col-lg-2 {
    padding: 8px;
  }
}