/*# sourceMappingURL=custom.min.css.map */
/* font-family: 'Roboto', sans-serif; */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
@import url('color.min.css');

html {
  --scrollbarBG: transparent;
  --thumbBG: #90a4ae;
}

a {
  color: var(--vz-primary);
}

body {
  background: linear-gradient(#fffe, #fffe), url('../images/bg-main.jpg') center/cover fixed;
}

.modal {
  background: #0008;
}

.card {
  border: 1px solid #6691e755;
}

.card-header {
  border-bottom: 1px solid #6691e755;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
}

.dataTables_length .form-select {
  margin: 0 4px;
}

.card-title {
  font-size: 18px;
}

.tab-content::-webkit-scrollbar {
  width: 5px;
}

.tab-content {
  scrollbar-width: 5px;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.tab-content::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

.tab-content::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

.btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  opacity: 1;
}

.analysisBox {
  padding: 0;
  margin-bottom: 25px;
  box-shadow: 0 0 10px #00000015;
  border-radius: 14px;
  border: 1px solid #0001;
  overflow: hidden;
}

.analysisBox .highcharts-figure {
  margin-bottom: 0;
  padding: 10px;
  background: #fff;
}

.navbar-menu .navbar-nav .nav-sm .nav-link {
  padding: 6px 21px !important;
  border-bottom: 1px solid #eee;
}

.navbar-menu .navbar-nav .nav-sm .nav-link:hover {
  background-color: #eee;
}

.menu-dropdown {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* .compactform .form-control:not(textarea),
.compactform .form-select,
.tab-pane .form-select,
.tab-pane .form-control:not(textarea) {
  padding: 0rem 0.8rem;
  height: 32px;
  font-size: 12px;
  color: #000;
  font-family: "Roboto", sans-serif;
  background-color: transparent;
  border-radius: 0;
} */

.modal-title {
  font-size: 20px;
  font-weight: 500 !important;
  font-family: "Roboto" !important;
  letter-spacing: 1px;
  color: #fff;
}

/* .compactform .form-label,
.tab-pane .form-label {
  margin-bottom: 0;
  font-weight: 400;
  color: #090928dd;
  min-width: fit-content;
  margin-right: 7px;
} */

.nav-success.nav-tabs-custom .nav-link {
  border: 1px solid #eee;
  border-radius: 0;
}

.hide_label label {
  display: none;
}

.form-check-label {
  font-size: 14px;
}

.nav-success.nav-tabs-custom .nav-link.active {
  /* background-color: var(--vz-header-bg) !important; */
  /* color: #fff; */
  font-weight: 500;
  letter-spacing: 1px;
  border: 1px solid var(--vz-header-bg) !important;
}

.form-group .form-check-input {
  transform: scale(1.1);
}

.form-group {
  margin-bottom: 12px;
}

.form-group:not(.noflex) {
  display: flex;
  align-items: center;
}

.noflex .form-group {
  display: block;
}

.tab-pane h6,
form h6 {
  font-size: 15px;
  color: #090928;
}

form hr,
.tab-pane hr {
  margin: 0;
  border-color: #ddd;
  opacity: 1;
}

.borgreen {
  border-color: #ddd !important;
}

.form-check.position-absolute {
  right: 10px;
  top: 7px;
}

form.input-B-1 .form-group {
  margin-bottom: 1.1rem;
}

form.input-B-2 .form-group {
  margin-bottom: 2rem;
}

form.input-B-3 .form-group {
  margin-bottom: 3rem;
}

.modal-xxl {
  max-width: initial;
  width: 90%;
}

@media (min-width: 1200px) {
  .modal-xxl {
    max-width: initial;
    width: 80%;
  }
}

.form-control::placeholder {
  color: #ddd;
}

.nav-link.tab-size {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ------------- cOMAPCT Tabloe Design ----------------*/
.table-compact {
  font-size: 0.875rem;
}

.table-compact .row {
  margin: 0;
}

.table-compact th,
.table-compact td {
  padding: 0.25rem 0.5rem;
}

.table-compact thead,
.table-compact thead th {
  background-color: var(--vz-blue);
  color: #fff;
  border: none !important;
}

.table-compact thead th {
  padding: 4px 8px;
}

.table-compact th:first-child,
.table-compact td:first-child {
  border-left: none;
}

.table-compact th:last-child,
.table-compact td:last-child {
  border-right: none;
}

.table-compact .col-sm-12 {
  padding: 0;
}

.table-compact .dataTables_info,
.table-compact .dataTables_length {
  padding-left: 15px;
}

.table-compact .dataTables_paginate,
.table-compact .dataTables_filter {
  padding-right: 15px;
}

div.dataTables_wrapper div.dataTables_length select {
  width: 80px !important;
}

thead.table-primary th {
  color: var(--vz-primary);
}

/* ---------------------- Data Apna repeater :: Starts --------------- */
/* [data-apna-repeater="delete"] {
    color: rgba(var(--vz-danger-rgb), var(--vz-text-opacity)) !important;
    display: inline-block;
    margin-left: 5px;
} */

#chargesModal {
  z-index: 1066;
}

#CarrierChargesModal {
  z-index: 1066;
}

#notecal {
  z-index: 1066;
}

.mdi-plus-circle {
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;

}

/* ---------------------- Data Apna repeater :: Ends --------------- */
.footer {
  padding: 14px 20px;
  height: initial;
  box-shadow: 0 0 10px #0001;
}

[data-layout="horizontal"] #page-topbar {
  background: #0f2e4e;
}

.topbar-user {
  background-color: #15406a;
}

.tab-content .nav-tabs.custom_tabs .nav-item .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-left: 15px;
  height: 35px;
}

.tab-content .nav-tabs .nav-item .nav-link,
.nav-item .nav-link {
  border-radius: 0;
  text-transform: capitalize;
}


.tab-content .nav-tabs .nav-item .nav-link span.Repeatercounter {
  padding-right: 15px;
}

.tab-content .nav-tabs .nav-item .nav-link i.mdi,
[data-repeater-btn="delete"] {
  display: inline-block;
  background: #f5f5f5;
  opacity: .6;
  color: #BB3F3F;
  font-size: 18px;
  height: 100%;
  line-height: 32px;
  padding: 0 2px;
  text-align: center;
  transition: all .2s linear;
  border-radius: 0 2px 0 0;
}

.nav-border-top .nav-link {
  border-top: 3px solid #f5f5f5;
}

.tab-content.custom_tabs .nav-tabs .nav-item .nav-link:hover i.mdi {
  opacity: 1;
  display: inline-block;
}

.tab-content.custom_tabs .nav-tabs .nav-item .nav-link i.mdi:hover,
[data-repeater-btn="delete"]:hover {
  color: #fff !important;
  background: #BB3F3F !important;
  opacity: 1;
}

.badge-label:before {
  left: -12px;
}

.fw-500 {
  font-weight: 500;
}

table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
  padding: 10px;
}

/* --------- Data Tables Colors for status --------------- */
.dataTable tbody tr.open,
.loadstatus .open {
  background-color: #FF000035;
}

.dataTable tbody tr.pending,
.loadstatus .pending {
  background-color: #FFCC0035;
}

.dataTable tbody tr.refused,
.loadstatus .refused {
  background-color: #B400FF35;
}

.dataTable tbody tr.covered,
.loadstatus .covered {
  background-color: #111BA535;
}

.dataTable tbody tr.dispatched,
.loadstatus .dispatched {
  background-color: #810B1135;
}

.dataTable tbody tr.on route,
.loadstatus .on route {
  background-color: #1A9E3035;
}

.dataTable tbody tr.loading,
.dataTable tbody tr.unloading,
.loadstatus .unloading {
  background-color: #9B9B9B35;
}

.dataTable tbody tr.on yard,
.loadstatus .on yard {
  background-color: #F440AF35;
}

.dataTable tbody tr.delivered,
.loadstatus .delivered {
  background-color: #4EB2D635;
}

.dataTable tbody tr.completed,
.dataTable tbody tr.dispatched,
.loadstatus .dispatched,
.loadstatus .completed {
  background-color: #00000011;
}

/* ---------- Filled Colors--------------- */
.colorPallete .open {
  background-color: #FF0000;
}

.colorPallete .pending {
  background-color: #FFCC00;
}

.colorPallete .refused {
  background-color: #B400FF;
}

.colorPallete .covered {
  background-color: #111BA5;
}

.colorPallete .dispatched {
  background-color: #810B11;
}

.colorPallete .on route {
  background-color: #1A9E30;
}

.colorPallete .loading,
.colorPallete .unloading {
  background-color: #9B9B9B;
}

.colorPallete .on yard {
  background-color: #F440AF;
}

.colorPallete .delivered {
  background-color: #4EB2D6;
}

.colorPallete .completed,
.colorPallete .dispatched {
  background-color: #000000;
}

/* ---------------------------- */
.colorPallete>span {
  padding: 4px 8px;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 0 10px #0001;
  display: inline-block;
  margin-right: 4px;
}

.SmallButton button {
  padding: 0 4px !important;
}

/* compact Form Label */
.formlabelconmpact label {
  font-size: 13px;
  margin-bottom: 2px;
}

/* ---- TRuck Animtaion */
.loadingAnimation .truck-wrapper {
  height: 110px;
}

.loadingAnimation .truck {
  height: 110px;
  width: 150px;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}


.loadingAnimation .truck>.truck-container {
  background: rgb(175, 189, 195);
  background: -moz-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
  background: linear-gradient(135deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afbdc3', endColorstr='#8fa3ad', GradientType=1);
  height: 50px;
  width: 80px;
  position: absolute;
  top: 10px;
  left: 10px;
  animation: container 0.4s linear infinite;
}

.loadingAnimation .truck>.glases {
  background: rgb(40, 181, 245);
  background: -moz-linear-gradient(-45deg, rgba(40, 181, 245, 1) 0%, rgba(40, 181, 245, 1) 50%, rgba(2, 153, 227, 1) 52%, rgba(2, 153, 227, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(40, 181, 245, 1) 0%, rgba(40, 181, 245, 1) 50%, rgba(2, 153, 227, 1) 52%, rgba(2, 153, 227, 1) 100%);
  background: linear-gradient(135deg, rgba(40, 181, 245, 1) 0%, rgba(40, 181, 245, 1) 50%, rgba(2, 153, 227, 1) 52%, rgba(2, 153, 227, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28b5f5', endColorstr='#0299e3', GradientType=1);
  position: absolute;
  height: 30px;
  width: 33px;
  border: 4px solid #FBD734;
  border-bottom: none;
  top: 35px;
  left: 95px;
  border-top-right-radius: 6px;
  animation: updown-half 0.4s linear infinite;
}

.loadingAnimation .truck>.glases:after {
  content: '';
  display: block;
  background-color: #FBD734;
  height: 13px;
  width: 10px;
  position: absolute;
  right: -10px;
  bottom: 0px;
  border-radius: 10px / 15px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;

}

.loadingAnimation .truck>.glases:before {
  content: '';
  display: block;
  background-color: #F9BF2C;
  height: 12px;
  width: 16px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  border-top-right-radius: 4px;
}

.loadingAnimation .truck>.bonet {
  background-color: #F9BF2C;
  position: absolute;
  width: 124px;
  height: 15px;
  top: 64px;
  left: 10px;
  z-index: -1;
  animation: updown 0.4s linear infinite;
}

.loadingAnimation .truck>.bonet:after {
  content: '';
  display: block;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=1);
  height: 10px;
  width: 6px;
  position: absolute;
  right: 0px;
  bottom: 2px;
  border-top-left-radius: 4px;

}

.loadingAnimation .truck>.base {
  position: absolute;
  background-color: #445A64;
  width: 106px;
  height: 15px;
  border-top-right-radius: 10px;
  top: 70px;
  left: 14px;
  animation: updown 0.4s linear infinite;
}

.loadingAnimation .truck>.base:before {
  content: '';
  display: block;
  background-color: #E54A18;
  height: 12px;
  width: 5px;
  position: absolute;
  left: -4px;
  bottom: 0px;
  border-bottom-left-radius: 4px;
}

.loadingAnimation .truck>.base:after {
  content: '';
  display: block;
  background-color: RGB(84, 110, 122);
  height: 10px;
  width: 20px;
  position: absolute;
  right: -16px;
  bottom: 0px;
  border-bottom-right-radius: 4px;
  z-index: -1;
}

.loadingAnimation .truck>.base-aux {
  width: 82px;
  height: 8px;
  background-color: #F9BF2C;
  position: absolute;
  top: 65px;
  left: 14px;
  border-bottom-right-radius: 4px;
  animation: updown 0.4s linear infinite;
}

.loadingAnimation .truck>.wheel-back {
  left: 20px
}

.loadingAnimation .truck>.wheel-front {
  left: 95px;
}

.loadingAnimation .truck>.wheel-back,
.loadingAnimation .truck>.wheel-front {

  border-radius: 100%;
  position: absolute;
  background: rgb(84, 110, 122);
  background: -moz-linear-gradient(-45deg, rgba(84, 110, 122, 1) 0%, rgba(84, 110, 122, 1) 49%, rgba(68, 90, 100, 1) 52%, rgba(68, 90, 100, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(84, 110, 122, 1) 0%, rgba(84, 110, 122, 1) 49%, rgba(68, 90, 100, 1) 52%, rgba(68, 90, 100, 1) 100%);
  background: linear-gradient(135deg, rgba(84, 110, 122, 1) 0%, rgba(84, 110, 122, 1) 49%, rgba(68, 90, 100, 1) 52%, rgba(68, 90, 100, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#546e7a', endColorstr='#445a64', GradientType=1);
  top: 80px;
  height: 22px;
  width: 22px;
  animation: spin 0.6s linear infinite;
}

.loadingAnimation .truck>.wheel-back:before,
.loadingAnimation .truck>.wheel-front:before {
  content: '';
  border-radius: 100%;
  left: 5px;
  top: 5px;
  position: absolute;
  background: rgb(175, 189, 195);
  background: -moz-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
  background: linear-gradient(135deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afbdc3', endColorstr='#8fa3ad', GradientType=1);
  height: 12px;
  width: 12px;
}

@keyframes spin {
  50% {
    top: 81px;
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes container {

  30% {
    transform: rotate(1deg);
  }

  50% {
    top: 11px;
  }

  70% {
    top: 10px;
    transform: rotate(-1deg);
  }
}

.loadingAnimation .truck>.smoke {
  position: absolute;
  background-color: #AFBDC3;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  top: 90px;
  left: 6px;
  animation: fade 0.4s linear infinite;
  opacity: 0;
}

.loadingAnimation .truck>.smoke:after {
  content: '';
  position: absolute;
  background-color: RGB(143, 163, 173);
  border-radius: 100%;
  width: 6px;
  height: 6px;
  top: -4px;
  left: 4px;
}

.loadingAnimation .truck>.smoke:before {
  content: '';
  position: absolute;
  background-color: RGB(143, 163, 173);
  border-radius: 100%;
  width: 4px;
  height: 4px;
  top: -2px;
  left: 0px;
}

@keyframes fade {

  30% {
    opacity: 0.3;
    left: 7px;
  }

  50% {
    opacity: 0.5;
    left: 6px;
  }

  70% {
    opacity: 0.1;
    left: 4px;
  }

  90% {
    opacity: 0.4;
    left: 2px;
  }
}

@keyframes updown {
  50% {
    transform: translateY(-20%);
  }

  70% {
    transform: translateY(-10%);
  }
}

@keyframes updown-half {
  50% {
    transform: translateY(-10%);
  }

  70% {
    transform: translateY(-5%);
  }
}

/* ---- Animation ----- */
.loadingAnimation h1.loading {
  font-size: 3em;
  font-weight: 700;
}

.loadingAnimation span[class^="dot-"] {
  opacity: 0;
}

.loadingAnimation .dot-one {
  animation: dot-one 2s infinite linear
}

.loadingAnimation .dot-two {
  animation: dot-two 2s infinite linear
}

.loadingAnimation .dot-three {
  animation: dot-three 2s infinite linear
}

@keyframes dot-one {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dot-two {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dot-three {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}