button.accessorial-btn {
  padding: 6px 50px;
}

.accessorial_driver_notes, .accessorial_user_notes {
  padding-left: 15px;
}

.form-body-fixed {
  width: 70%;
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #eff3f8;
}

.deleteCharge {
  cursor: pointer;
}

.charge-amount,
.accessorial-charge-info {
  text-align: right;
}

.charges-sumaary-data {
  width: 80% !important;
}

.total-amount.charge-amount {
  font-weight: 700;
}

.acce-btn {
  width: 193px;
}

.finalize-accessorial-charges {
  padding: 6px 28px !important;
}

.finalize-accessorial-charges-new {
  padding: 6px 28px !important;
}

.total-amount {
  font-size: 24px !important;
}

.increment-number-txt {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  background-color: #fff;
  border: 1px solid #c2cad8;
  width: 73%;
}

.incre-decre-button {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  border: 1px solid #c2cad8;
}

/* creating css loader */

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 50px;
  height: 50px;
  margin-top: -0.5em;

  border: 15px solid rgba(33, 150, 243, 1.0);
  border-radius: 100%;
  border-bottom-color: transparent;
  -webkit-animation: spinner 1s linear 0s infinite;
  animation: spinner 1s linear 0s infinite;


}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* End Css Loader */


/* Inbound Move Dock Location CSS */
#already-inbounded-popup a {
  width: 225px;
  margin-right: 10px;
}

.inbound-dock-location input {
  display: none;
}

.inbound-dock-location label {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
}

.inbound-dock-location label span {
  position: relative;
  line-height: 22px;
}

.inbound-dock-location label span:before,
.inbound-dock-location label span:after {
  content: '';
}

.inbound-dock-location label span:before {
  border: 1px solid #222021;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
}

.inbound-dock-location label span:after {
  background: #222021;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 4px;
  transition: 300ms;
  opacity: 0;
}

.inbound-dock-location input:checked+span:after {
  opacity: 1;
}


/* End Inbound Move Dock Location CSS */

.missing-data {
  font-weight: 700;
  font-size: 24px;
}



/***** Picklist listing css ****/
#picklist-withoutScanning th::before,
#picklist-withoutScanning th::after,
#picklist-scanned th::before,
#picklist-scanned th::after {
  content: none;
}

.picklist-subTable tr:not(:first-child) {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.picklist-tabs {
  border: none !important;
  background: none !important;
}

.picklist-datatable th,
.picklist-datatable tr.view td {
  padding-left: 2px;
}

.picklist-ul-tab {
  border: 1px solid #c5c5c5 !important;
}

.picklist-date {
  font-size: unset !important;
}

.ui-tabs .ui-tabs-panel {
  padding: 1em 0.4em !important;
}



/* New implement tabs */
[data-tab-info] {
  display: none;
}

.active[data-tab-info] {
  display: block;
}

.tab-content {
  font-family: sans-serif;
  /* font-weight: bold; */
  color: rgb(82, 75, 75);
  padding: 1em 0.4em !important;
}

.tabs {
  font-size: 18px;
  display: flex;
  margin: 0;
  background: #2191c0 url('/assets/img/tab_background.png') 50% 50% repeat-x;
  color: #eaf5f7;
  font-weight: bold;
  border: 1px solid #4297d7;
  padding: 0.2em 0.2em 0;
}

.tabs span {
  /* border: 1px solid rgb(255, 255, 255); */
  border: 1px solid #77d5f7;
  background: #0078ae url('/assets/img/tab_line1.png') 50% 50% repeat-x;
  color: #ffffff;
  padding: 0.5em 1em;
  font-weight: normal;
}

.tabs span:hover {
  border: 1px solid #448dae;
  background: #79c9ec url('/assets/img/tab_line2.png') 50% 50% repeat-x;
  font-weight: normal;
  color: #026890;
  cursor: pointer;

}

.tabs .ui-state-active,
.tabs span.ui-state-active:hover {
  border: 1px solid #acdd4a;
  background: #6eac2c url('/assets/img/tab_active.png') 50% 50% repeat-x;
  font-weight: normal;
  color: #ffffff;
  cursor: pointer;
}

.success-qr-result {
  background-color: green;
  line-height: 35px;
  color: black;
  font-weight: bold;
  padding-left: 10px;
  text-align: center;
}

.qr-result {
  font-weight: bold;
}

.failure-qr-result {
  background-color: red;
  line-height: 35px;
  color: black;
  font-weight: bold;
  padding-left: 10px;
  text-align: center;
}

.picklist-form,
.inbound-lowes {
  padding-left: 0px;
}

.hd-warehouse-finish-incomplete, .margin-top-10 {
  margin-top: 10px;
}

div.picklist-item .font-blue {
  font-size: 16px;
}

.item-left {
  font-size: 15px;
}

div.picklist-item {
  background-color: white;
  padding: 10px;
  min-width: 700px;
}

.picklist-datatable {
  width: 100%;
}

tr.table-header th {
  font-size: 18px;
}

@media only screen and (min-width: 360px) and (max-width: 915px) {
  .picklist-div {
    margin-left: 15px;
  }

  /* for picklist */
  table.picklist-datatable>tbody>tr.shown table tbody td:first-child {
    width: 25%;
  }

  .picklist-filter-bar {
    margin-top: 10px;
  }

  /* end picklist */

  /* start accessorial */
  .accessorial-summary-info {
    width: unset !important;
  }

  .accessorial-page-summary {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* end accessorial */

  /* inbound */
  .inbound-form-increment {
    width: 70% !important;
  }

  .inbound-form {
    width: 100% !important;
  }

  /* End Inbound */

  /* Hide Footer for mobile */
  div.page-prefooter {
    display: none;
  }

  /* End - Hide Footer */

  /* container width */
  div.input-date-picker {
    width: 100%;
  }

  div.datepicker-dropdown.dropdown-menu {
    left: 100px !important;
  }

  #videoElement {
    width: 98% !important;
  }

  /*end constainer width */

  /* top header menu css */
  #header-top-menu {
    display: none;
  }

  .page-header-top {
    height: 43px;
  }

  .page-header .page-header-top .top-header-page-logo {
    width: 75% !important;
  }

  .header-logo-img {
    width: 100%;
  }

  .menu-toggler {
    background-size: 35px !important;
  }

  .top-mobile-menu {
    display: unset !important;
  }

  #osdReason,
  div.unknown-item-form select {
    width: 100% !important;
  }

  /* End Top header menu */

  .button-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  /* Style for individual buttons */
  .photo-capture,
  .send-frame-btn-disable {
    flex: 1;
    font-size: 15px;
    margin: 0 5px;
  }

}

@media only screen and (min-width: 916px) and (max-width: 991px) {

  /* container width */
  div.input-date-picker {
    width: 500px;
  }

  /*end constainer width */
}

/* Normal accordian css */
table.picklist-datatable>tbody>tr.view td {
  cursor: pointer;
}

/* add top bottom symbol */
table.picklist-datatable>tbody>tr.view td:first-child {
  position: relative;
  padding-left: 20px;
}

table.picklist-datatable>tbody>tr {
  line-height: 25px;
}

table.picklist-datatable>tbody>tr.view td:first-child::before {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 9px;
  height: 16px;
  margin-top: -8px;
  font: 16px fontawesome;
  color: #999;
  content: "\f0d7";
  transition: all .3s ease;
}

table.picklist-datatable>tbody>tr.view.open {
  background: #686A6C !important;
  color: white;
}

table.picklist-datatable>tbody>tr.shown td {
  background: white;
}

table.picklist-datatable>tbody>tr.shown>td {
  padding: 0.5em;
}

table.picklist-datatable>tbody>tr.view.open td:first-child:before,
table.picklist-datatable>tbody>tr.view.open th:first-child:before {
  transform: rotate(-180deg);
  color: #333;
}

.no-data {
  text-align: center;
  font-size: 25px;
  line-height: 2;
}

/* end top bottom symbol */


/* accessorial charges : start */
a#accessorial-summary {
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
}

a#accessorial-summary:hover {
  background-color: #ddd;
  color: black;
}

#accessorial-summary.previous {
  background-color: #5BC754;
  color: black;
}

#accessorial-summary.round {
  border-radius: 50% !important;
}

#accessorial-summary {
  float: left;
  margin-top: 16px;
  margin-right: 10px;
}

.accessorial-summary-info {
  margin-top: 10px;
  width: 40%;
}

.accessorial-summary-info th {
  font-size: 20px;
  width: 20%;
}

.acce-btn.finalize-accessorial-charges {
  float: right;
}

.locked-accessorial-page {
  margin-bottom: 25px;
}

table.acc-page-charge-info input[type='number'] {
  width: 20%;
}

/* accessorial charges : end */


/* Create truck before inbounding */
.start-truck {
  margin-top: 18px;
}

/* End Creating truck */

/* reconciliation start */
table.reconciliation-csv tbody tr td:last-child,
table.daily-delivered tbody tr td:last-child {
  font-weight: bold;
}

/* reconciliation end */

/* Start Single Truck */
.dz-default {
  background-color: #f4f4f4;
  border: 2px dashed #ccc;
  border-radius: 5px;
  padding: 20px;
}

.dz-message {
  text-align: center;
  font-size: 18px;
  color: #999;
}

.dz-preview {
  position: relative;
  display: inline-block;
  margin: 10px;
  width: 120px;
  height: 120px;
}

.dz-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.dz-details {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}

.dz-size {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.fa-cloud-upload {
  font-size: 50px;
  display: block;
}

.drop-message {
  margin-bottom: 30px;
}

.dz-clickable .dz-default .fa-cloud-upload {
  display: block;
  margin: auto;
  text-align: center;
  vertical-align: middle;
}

/* End Single Truck */
/* truck start */
form.dropzone div.dz-complete a.dz-remove {
  display: none;
}

.dropzone .dz-message {
  margin: unset !important;
}

div#dropzone i.fa-cloud-upload {
  padding-bottom: 20px;
}

.hd-trucks thead tr th {
  padding-left: 10px !important;
}

/* truck end */

/* Admin Mega Print start */
div.admin-mega-print .check-title {
  font-size: 15px;
}


/* big check labels */
div.admin-mega-print .label-big-check {
  position: relative;
  /* display: block;   */
  padding: 15px 0 0px 35px;
  margin: 0;
  /* border-top: 1px solid #eee; */
  cursor: pointer;
}

div.admin-mega-print .label-big-check input {
  display: none;
}

.label-big-check .check-title {
  font-size: .9em;
  font-weight: 600;
  cursor: pointer;
}

.label-big-check input[type="checkbox"]+.check-title:before {
  position: absolute;
  top: 12px;
  left: 0;
  width: 30px;
  font-family: FontAwesome;
  content: "\f096";
  font-size: 2em;
  line-height: 1;
  color: #aaa;
}

.label-big-check input[type="checkbox"]:checked+.check-title:before {
  content: "\f14a";
  color: #333;
}

/* Admin Mega Print End */

/* Inbound */
.inbound-form {
  width: 32%;
}

.inbound-form-increment {
  width: 23.45%;
}

.inbound-form-item {
  width: 16%;
}

.margin-top-5 {
  margin-top: 5px;
}

span.help-block {
  margin-bottom: 10px;
}

/* End Inbound */

/* Capture image*/
#orderImageReasons,
.common-selectbox {
  height: 46px;
}

.full-container {
  width: 100%;
}

.page-filter-form {
  padding-left: 0px;
}

/* Remove Data Table 2 arrow */
table.dataTable thead .sorting,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc {
  background-image: none !important;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
  content: "▲" /"" !important;
  top: 5px;
  position: absolute;
  right: 8px;
  opacity: 0.2;
}

table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
  content: "▼" /"" !important;
  bottom: 5px;
  opacity: 0.2;
}

table.homedelivery-search thead>tr>th.sorting:before,
table.homedelivery-search thead>tr>th.sorting_asc:before,
table.homedelivery-search thead>tr>th.sorting_desc:before,
table.homedelivery-search thead>tr>th.sorting_asc_disabled:before,
table.homedelivery-search thead>tr>th.sorting_desc_disabled:before,
table.homedelivery-search thead>tr>td.sorting:before,
table.homedelivery-search thead>tr>td.sorting_asc:before,
table.homedelivery-search thead>tr>td.sorting_desc:before,
table.homedelivery-search thead>tr>td.sorting_asc_disabled:before,
table.homedelivery-search thead>tr>td.sorting_desc_disabled:before {
  content: "▲" /"" !important;
  top: 18px;
  position: absolute;
  right: 8px;
  opacity: 0.2;
}

table.homedelivery-search thead>tr>th.sorting:after,
table.homedelivery-search thead>tr>th.sorting_asc:after,
table.homedelivery-search thead>tr>th.sorting_desc:after,
table.homedelivery-search thead>tr>th.sorting_asc_disabled:after,
table.homedelivery-search thead>tr>th.sorting_desc_disabled:after,
table.homedelivery-search thead>tr>td.sorting:after,
table.homedelivery-search thead>tr>td.sorting_asc:after,
table.homedelivery-search thead>tr>td.sorting_desc:after,
table.homedelivery-search thead>tr>td.sorting_asc_disabled:after,
table.homedelivery-search thead>tr>td.sorting_desc_disabled:after {
  content: "▼" /"" !important;
  bottom: 12px;
  opacity: 0.2;
}

table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:after {
  opacity: 0.8;
}

/* End - Remove Data Table 2 arrow */


/* Truck Revenue CheckBox */
.truck-revenue-checkbox,
.styled-checkbox {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2);
  /* IE */
  -moz-transform: scale(2);
  /* FF */
  -webkit-transform: scale(2);
  /* Safari and Chrome */
  -o-transform: scale(2);
  /* Opera */
  transform: scale(2);
  margin-right: 10px !important;
}

.checkboxtext {
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

.checkbox-area {
  margin-top: 4px;
}

.truck-revenue-details thead tr th,
.truck-revenue-details tbody tr td,
.missing-truck-revenue-data thead tr th,
.missing-truck-revenue-data tbody tr td {
  padding: 4px;
}

/* End Truck Revenue Checkbox */

.nav li.top-mobile-menu {
  display: none;
}

#osdReason,
div.unknown-item-form select {
  width: 32%;
  height: 46px;
}


/* accessorial image modal */
.row_accessorial_image>.column_accessorial_image {
  padding: 0 8px;
}

.row_accessorial_image:after {
  content: "";
  display: table;
  clear: both;
}

.column_accessorial_image {
  float: left;
  /* width: 25%; */
  height: 100px;
  width: 100px;
}

.column_accessorial_image img {
  width: auto;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.imageSlides img {
  height: 700px;
  display: block;
  margin: 0 auto;
  width: unset !important;
  max-width: 100%;
}

/* .mySlides img {
  height: 700px;
  display: block;
  margin: 0 auto;
  width: unset!important;
  max-width:100%;
} */

/* The Modal (background) */
.modal_image {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close-icon {
  color: red !important;
  opacity: 1 !important;
  position: absolute;
  top: 40px;
  right: 20px;
  font-size: 50px;
  font-weight: bold;
}

.close-icon:hover,
.close-icon:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev_image,
.next_image {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: red;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next_image {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev_image:hover,
.next_image:hover {
  color: #fff;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #669af3;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.modal-image {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.modal-image.hover-shadow {
  width: 100%;
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* end accessorial image modal */

/* change background color of row */
.change-background,
tr.change-background td.sorting_1 {
  background-color: #cfffcf !important;
}

.accessorial-freightBill,
.accessorial-freightBill:hover {
  color: white;
}

/* Truck revenue page accessorial status button*/
.status-button {
  background-color: #008CBA;
  /* Green */
  width: 100%;
  border: none;
  color: white;
  padding: 8px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  min-width: 150px;
}

.status-button-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* phtos back button : start */
span.arrow-background {
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
}

span.arrow-background:hover {
  background-color: #ddd;
  color: black;
}

.previous .arrow-background {
  background-color: #5BC754;
  color: black;
}

.round .arrow-background {
  border-radius: 50% !important;
}

.arrow-background {
  float: left;
  margin-right: 10px;
}

.photo-back-button {
  padding-top: 8px;
}

.photo-arrow {
  text-decoration: none !important;
}

.send-frame-btn-disable {
  cursor: not-allowed;
  pointer-events: none;
  color: #c0c0c0;
  background-color: #ffffff;
  border: 1px solid #c0c0c0;
  /* Add border with style, width, and color */
}

.hd-cycle-count-done,
.hd-cycle-count-report-export {
  margin-top: 10px;
}

.unknown-capture-form h4 {
  font-size: 17px;
}


/* Start : New search */

.search-columns {
  float: right;
  /* margin-left: 60px;
  margin-right: 100px; */
  margin-top: 3px;
}

.export-button {
  background-color: #0074d9;
  color: #fff;
  border: none;
  margin: 0px 5px 0px 5px;
  padding: 7px 20px;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

.export-button:hover {
  background-color: #0056a4;
  /* Change background color on hover */
}

.search-btn-toggle {
  color: #fff !important;
  background-color: #545b62 !important;
  border-color: #4e555b !important;
  font-size: 18px;
  border-radius: 5px !important;
}

.search-btn-toggle:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

/* div.search-columns ul li{
  margin-left: 30px;
} */

div.search-columns ul li label {
  margin-left: 30px;
}

div.search-columns ul {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0px !important;
  box-shadow: none !important;
}

.column-search-filters {
  margin-top: 10px;
}

#newSearch_datatable_processing {
  z-index: 9999;
  margin-top: 10px;
  background-color: rgb(136, 168, 227);
  padding-top: 10px;
  padding-bottom: 35px;
}

#add_edit_admin_table_processing {
  z-index: 9999;
  margin-top: -30px;
  margin-bottom: 3px;
  background-color: rgb(136, 168, 227);
  padding-top: 10px;
  padding-bottom: 35px;
}

table.newSearch_datatable .table-header tr>th:first-child,
table.newSearch_datatable tr>td:first-child {
  text-align: unset;
  max-width: none;
  min-width: none !important;
  padding-left: 18px;
  padding-right: 18px;
}

.dataTables_extended_wrapper .table.dataTable {
  margin-top: unset !important;
}

div#newSearch_datatable_wrapper div.dataTables_scrollHeadInner {
  margin-top: 15px;
}

div.dataTables_scrollBody table.newSearch_datatable thead tr>th::before {
  content: none !important;
}





/* div#newSearch_datatable_wrapper{
  overflow-x: auto;
  padding-bottom: 20px;
} */
/* End : New Search */

/* Styling for the modal */
#customModalPopup,
#chargeNoRetryPopup,
#noChargePopup,
#baseRatePopup,
#addNotePopup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
}

/* Modal content */
.popup-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
}

/* Close button */
.close-cutom-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-cutom-modal:hover,
.close-cutom-modal:focus {
  color: black;
  text-decoration: none;
}

/* Textbox styling */
#customTextbox,
#chargeNoRetryTextbox,
#noChargeTextbox,
#reactivateOrderTextbox,
#newBaseRate,
#addNoteTextBox {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  box-sizing: border-box;
}

#noChargeFault {
  border: 1px solid black;
}

/* Button styling */
.custom-modal-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px !important;
  cursor: pointer;
}

.custom-modal-btn:hover {
  background-color: #45a049;
}

#chargeNoRetryModalTitle,
#noChargeModalTitle,
#baseRateModalTitle,
#addNoteModalTitle {
  font-weight: 700;
}

.show-ds-pay-data {
  display: none;
}

.charts-bottom {
  margin-bottom: 80px;
}

.graph-heading {
  text-align: center;
}

.hidden {
  display: none;
}

.warehouseLineChart {
  height: 1000px;
}

.mediumChart {
  height: 400px;
}

/* Start : Order detail page css */
.cancel-order {
  font-size: 18px;
  color: #fff60a;
  font-weight: 800;
  margin-left: 5px;
  text-align: right;
  width: 100%;
}

/* End : Order detail page css */


/* Start : Accessorial page css */
/* .accessorial-tool-tip{
  position: absolute;
  margin-top: 2px;
  margin-left: 5px;
} */
/* .accessorial-tool-tip {
  position: relative;
  display: inline-block;
  margin-top: 2px;
  margin-left: 5px;
}

.accessorial-tool-tip .tooltiptext {
  visibility: hidden;
  width: 450px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: -100%;
  left: 78%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
} */

.no-charge-tool-tip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.no-charge-tool-tip {
  position: relative;
  display: inline-block;
  margin-top: 2px;
  margin-left: 5px;
}

.no-charge-tool-tip .tooltiptext {
  visibility: hidden;
  width: 450px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* .accessorial-tool-tip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} */


.accessorial-tool-tip {
  position: relative;
  display: inline-block;
}

.accessorial-tool-tip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -150px;
  opacity: 0;
  transition: opacity 0.3s;
}

.accessorial-tool-tip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.accessorial-tool-tip .tooltiptext::before {
  content: "";
  position: absolute;
  top: -10px;
  /* Adjust this value to position the pointer */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


.accessorial-tool-tip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


.accessorial-tooltip-info,
.accessorial-tooltip-info:hover {
  color: black;
}

.tooltip-inner {
  font-size: 14px;
  /* Adjust the font size as needed */
}

.accessorial-toogle {
  background-color: white;
}

.acc-switch {
  margin: 6px 0px 20px 15px !important;
}

/* End : Accessorial page css */

/* Start Failed automation css */
.date-picker-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-picker-container label {
  margin-right: 10px;
  /* Adjust the margin as needed */
}

/* End Failed automation css */

.freightBillNotTrailer {
  background-color: #FF0000;
  color: #fff;
}

.update-rating-form .rating-box {
  padding-left: unset;
}

.disabled-rating {
  pointer-events: none;
  color: gray;
  text-decoration: none;
  cursor: not-allowed;
}

.charges_table tr td:nth-child(2),
.charges_table tr th:nth-child(2) {
  text-align: right;
}

.formatDisplayText {
  text-align: right;
}

.create-order-in-ds-button {
  background-color: #0074d9;
  color: #fff;
  border: none;
  right: 0;
  margin: 10px 0px 0px 376px;
  padding: 7px 20px;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

/* System check page */
.system-check-page table td,
.system-check-page table th {
  padding: 10px;
}

/* End system check page */


.remainingItem {
  color: red;
}

.canceledLiveFreightLane label {
  margin-right: 15px;
  font-size: 18px;
}

.canceledLiveFreightLane input {
  transform: scale(1.5);
  margin-right: 5px;
}

.dropdown-container {
  position: relative;
  z-index: 9999;
}

.drp-status-dropdown-button {
  border: 1px solid black !important;
  z-index: 9999;
}

.drp-status-dropdown-menu {
  /* position: absolute; */
  z-index: 10000;
  display: none;
  float: left;
  top: 100%;
  left: 0;
  list-style: none;
  text-shadow: none;
  padding: 0;
  background-color: #fff;
  margin-left: 20px;
}

.drp-status-dropdown-menu.show {
  display: block;
}

.checkbox-container {
  max-height: 200px;
  overflow-y: auto;
}

.bolpdf {
  background-color: black;
  color: white;
}

.customer-accessorial-charge-list {
  max-width: 530px;
  margin: 0 auto;
}

.other-description {
  margin-top: 20px;
  margin-left: -15px;
}


.switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 57px;
  margin: 6px 0px 50px 15px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px !important;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3 !important;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3 !important;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.ds-odata-from {
  padding-left: 0px;
  margin-top: 20px;
  margin-left: 16px;
}

.ds-odata-to-button, .margin-top-20 {
  margin-top: 20px;
}

table.route-mileage-listing-table tfoot th {
  padding: 10px 10px 6px 64px !important;
}

table.real-charges caption,
table.table-striped caption {
  display: none;
}

span.stuck-undelivered-action {
  display: block;
  background: red;
  padding: 10px;
  margin-bottom: 30px;
}

div.stuck-freightBill {
  opacity: 0.4;
}

.mileageDifference {
  background: #ffcfcf;
}

.driver-notes {
  min-width: 200px;
}

.driver-data-table {
  width: 500px;
}

.styled-checkbox {
  margin-left: 8px !important;
}

.failed-automation-td {
  max-width: 500px !important;
  overflow: scroll;
}

.edit-icon {
  cursor: pointer;
  margin-left: 10px;
}

.never-inbounded,
.dispatch-track-status {
  background: red !important;
}

.homedelivery-card {
  color: black;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

.note-info {
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}

.accessorial-action-item-table #add_edit_admin_table th {
  white-space: normal !important;
  word-wrap: break-word;
  max-width: 150px;
  text-align: left;
}

.button-row {
  display: flex;
  justify-content: space-between;
  max-width: 500px;
  margin-top: 20px;
}

.actionItemBlock {
  width: 500px;
}

.wiki-title{
  margin: 0;
  text-decoration: none;
  color: #0c0c0c;
}

.wiki-title:hover {
  text-decoration: none;
  color: #0c0c0c;
}
.wiki-container {
  padding-top: 20px;
}

.wiki-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2rem;
}
.wiki-header h1 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}
.wiki-header .add-doc-btn {
    margin-left: auto;
}

.add-doc-btn {
  margin-top: 0px;
}

.search-wrapper {
  margin-bottom: 30px;
}

.wiki-entry {
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.wiki-entry-title {
  font-weight: bold;
  margin-top: 0;
}

.wiki-body {
  margin-top: 10px;
  color: #333;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.author {
  margin: 0 0 10px 0;
}

.wiki-body img,
.wiki-body-content img {
  max-width: 100% !important;
  height: auto !important;
}

#wiki-sidebar {
    max-height: 80vh;
    overflow-y: auto;
    border-right: 1px solid #ddd;
}

@media (max-width: 768px) {
    .wiki-header {
        flex-direction: column;
    }
    .wiki-header h1,
    .wiki-header button,
    .wiki-header a {
        width: 100%;
        margin-bottom: 10px;
    }
}

.copy-link {
  margin-right: 10px;
}

.wiki-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wiki-entry-actions {
    display: flex;
    gap: 6px;
}

.wiki-entry-actions .btn-spacing {
    margin-left: 5px;
}

.model-slider-image {
  width:100%;
  height:700px;
}

.pdf-icon {
  width:100px;
  height:120px;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper {
  min-width: 700px;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    max-height: 80vh;       /* prevent overflow */
    overflow: hidden;       /* clip overflow outside */
    display: flex;
    flex-direction: column; /* let inner elements resize */
}

.popup-content h2 {
    margin-bottom: 15px;
    flex-shrink: 0;         /* prevent shrinking */
}

.popup-content table {
    width: 100%;
    border-collapse: collapse;
}

.popup-content thead th {
    position: sticky;       /* sticky header */
    top: 0;
    background: #f1f1f1;
    z-index: 2;
}

.popup-table-wrapper {
    flex: 1;                /* take remaining space */
    overflow-y: auto;       /* vertical scroll */
    margin-bottom: 15px;
}

.popup-content th, .popup-content td {
    padding: 8px;
    border: 1px solid #ddd;
    word-break: break-word;
}

.popup-actions {
    text-align: right;
    flex-shrink: 0;
}

.popup-actions button {
    margin-left: 10px;
    padding: 8px 16px;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .popup-content {
        width: 95%;
        padding: 15px;
    }
    .popup-content th,
    .popup-content td {
        font-size: 14px;
        padding: 6px;
    }
}

.table-info th,
.table-info tr.view td {
  padding-left: 2px;
}

.image-download-icon {
  position: absolute;
  top: 10px;
  right: 20px;
  color: black;
  font-size: 22px;
  z-index: 10;
}

.image-tooltip {
  position: relative;
  display: inline-block;
}

.image-tooltip .image-tooltiptext {
  visibility: hidden;
  width: auto;
  max-width: 220px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.image-tooltip:hover .image-tooltiptext {
  visibility: visible;
  opacity: 1;
}