@charset "UTF-8";

.iti__flag {
  background-image: url("/images/flags.png") !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("/images/flags@2x.png") !important;
  }
}

.iti {
  display: block !important;
}

@font-face {
  font-family: "icomoon";
  src: url("/fonts/icomoon.eot?5r4lkh");
  src: url("/fonts/icomoon.eot?5r4lkh#iefix") format("embedded-opentype"), url("/fonts/icomoon.ttf?5r4lkh") format("truetype"), url("/fonts/icomoon.woff?5r4lkh") format("woff"), url("/fonts/icomoon.svg?5r4lkh#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^=icon-],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-image2vector:before {
  content: "\E900";
}

.icon-frontal-truckJPG:before {
  content: "\E901";
}

.icon-trailerJPG:before {
  content: "\E902";
}

.icon-driverJPG:before {
  content: "\E903";
}

.icon-employeesJPG_1:before {
  content: "\E904";
}

.hide {
  display: none !important;
}

.v-align {
  display: flex;
  align-items: center;
}

select {
  text-transform: capitalize;
}

img {
  max-width: initial !important;
}

.badge-New {
  color: #fff;
  background-color: #7295f5;
}

.badge-Not_Renewed {
  color: #fa5c7c;
  background-color: rgba(250, 92, 124, 0.18);
}

.badge-Gathering {
  color: #ffbc00;
  background-color: rgba(255, 188, 0, 0.18);
}

.badge-Shipped {
  color: #fff;
  background-color: #0a6148;
}

.badge-Canceled {
  color: #fa5c7c;
  background-color: rgba(250, 92, 124, 0.18);
}

.badge-Active {
  color: #0acf97;
  background-color: rgba(10, 207, 151, 0.18);
}

.badge-inactive {
  color: #ccc;
  background-color: rgba(250, 92, 124, 0.18);
}

.badge-active {
  color: #0acf97;
  background-color: rgba(10, 207, 151, 0.18);
}

.badge-intrial {
  color: #ffbc00;
  background-color: rgba(255, 188, 0, 0.18);
}

.badge-trialexpired {
  color: #fa5c7c;
  background-color: rgba(250, 92, 124, 0.18);
}

.badge-canceled {
  color: #fa5c7c;
  background-color: rgba(250, 92, 124, 0.18);
}

.badge-pastdue {
  color: #fa5c7c;
  background-color: rgba(250, 92, 124, 0.18);
}

.authentication-bg {
  background-image: url(/images/bg-auth.jpg?f684aa5f3e488b0cd1a156b54190b8a5) !important;
}

.profile-dropdown,
.list-unstyled.topbar-right-menu.float-right.mb-0 .dropdown.notification-list:last-of-type {
  width: 200px;
}

.card-with-hover.primary-hover {
  position: relative;
}

.card-with-hover.primary-hover i,
.card-with-hover.primary-hover > * {
  transition: color 0.33s ease-in;
  position: relative;
}

.card-with-hover.primary-hover h3:not(.text-muted) {
  transition: transform 0.15s ease-in-out;
  transform: scale(1);
}

.card-with-hover.primary-hover:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #727cf5;
  transition: width 0.33s ease-in;
}

.card-with-hover.primary-hover:hover {
  cursor: pointer;
}

.card-with-hover.primary-hover:hover i,
.card-with-hover.primary-hover:hover > * {
  transition: color 0.33s ease-in;
  color: #fff;
  z-index: 123;
  position: relative;
}

.card-with-hover.primary-hover:hover h3:not(.text-muted) {
  transition: transform 0.15s ease-in-out;
  transform: scale(1.4);
}

.card-with-hover.primary-hover:hover:before {
  transition: width 0.33s ease-in;
  width: 100%;
}

.sub {
  color: #64dcdc;
  letter-spacing: 1em;
}

/* Our mixin positions a copy of our text
directly on our existing text, while
also setting content to the appropriate
text set in the data-text attribute. */

.glitch {
  position: relative;
  color: #6c757d;
  letter-spacing: 0.2em;
  /* Animation provies a slight random skew. Check bottom of doc
  for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  /* Creates an initial clip for our glitch. This works in
  a typical top,right,bottom,left fashion and creates a mask
  to only show a certain part of the glitch at a time. */
  clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
  with an alternating animation to keep things fresh. */
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

/* Creates an animation with 20 steaps. For each step, it calculates
a percentage for the specific step. It then generates a random clip
box to be used for the random glitch effect. Also adds a very subtle
skew to change the 'thickness' of the glitch.*/

@-webkit-keyframes glitch-anim {
  0% {
    clip: rect(53px, 9999px, 80px, 0);
    transform: skew(0.78deg);
  }

  5% {
    clip: rect(64px, 9999px, 10px, 0);
    transform: skew(0.06deg);
  }

  10% {
    clip: rect(17px, 9999px, 28px, 0);
    transform: skew(0.16deg);
  }

  15% {
    clip: rect(60px, 9999px, 28px, 0);
    transform: skew(0.08deg);
  }

  20% {
    clip: rect(45px, 9999px, 72px, 0);
    transform: skew(0.64deg);
  }

  25% {
    clip: rect(32px, 9999px, 3px, 0);
    transform: skew(0.64deg);
  }

  30% {
    clip: rect(25px, 9999px, 46px, 0);
    transform: skew(0.85deg);
  }

  35% {
    clip: rect(17px, 9999px, 13px, 0);
    transform: skew(0.8deg);
  }

  40% {
    clip: rect(42px, 9999px, 65px, 0);
    transform: skew(0.89deg);
  }

  45% {
    clip: rect(11px, 9999px, 5px, 0);
    transform: skew(0.54deg);
  }

  50% {
    clip: rect(23px, 9999px, 45px, 0);
    transform: skew(0.7deg);
  }

  55% {
    clip: rect(14px, 9999px, 77px, 0);
    transform: skew(0.86deg);
  }

  60% {
    clip: rect(90px, 9999px, 60px, 0);
    transform: skew(0.82deg);
  }

  65% {
    clip: rect(47px, 9999px, 29px, 0);
    transform: skew(0.44deg);
  }

  70% {
    clip: rect(30px, 9999px, 20px, 0);
    transform: skew(0.77deg);
  }

  75% {
    clip: rect(70px, 9999px, 51px, 0);
    transform: skew(0.31deg);
  }

  80% {
    clip: rect(40px, 9999px, 55px, 0);
    transform: skew(0.76deg);
  }

  85% {
    clip: rect(80px, 9999px, 52px, 0);
    transform: skew(0.85deg);
  }

  90% {
    clip: rect(66px, 9999px, 55px, 0);
    transform: skew(0.54deg);
  }

  95% {
    clip: rect(83px, 9999px, 81px, 0);
    transform: skew(0.23deg);
  }

  100% {
    clip: rect(29px, 9999px, 88px, 0);
    transform: skew(0.33deg);
  }
}

@keyframes glitch-anim {
  0% {
    clip: rect(53px, 9999px, 80px, 0);
    transform: skew(0.78deg);
  }

  5% {
    clip: rect(64px, 9999px, 10px, 0);
    transform: skew(0.06deg);
  }

  10% {
    clip: rect(17px, 9999px, 28px, 0);
    transform: skew(0.16deg);
  }

  15% {
    clip: rect(60px, 9999px, 28px, 0);
    transform: skew(0.08deg);
  }

  20% {
    clip: rect(45px, 9999px, 72px, 0);
    transform: skew(0.64deg);
  }

  25% {
    clip: rect(32px, 9999px, 3px, 0);
    transform: skew(0.64deg);
  }

  30% {
    clip: rect(25px, 9999px, 46px, 0);
    transform: skew(0.85deg);
  }

  35% {
    clip: rect(17px, 9999px, 13px, 0);
    transform: skew(0.8deg);
  }

  40% {
    clip: rect(42px, 9999px, 65px, 0);
    transform: skew(0.89deg);
  }

  45% {
    clip: rect(11px, 9999px, 5px, 0);
    transform: skew(0.54deg);
  }

  50% {
    clip: rect(23px, 9999px, 45px, 0);
    transform: skew(0.7deg);
  }

  55% {
    clip: rect(14px, 9999px, 77px, 0);
    transform: skew(0.86deg);
  }

  60% {
    clip: rect(90px, 9999px, 60px, 0);
    transform: skew(0.82deg);
  }

  65% {
    clip: rect(47px, 9999px, 29px, 0);
    transform: skew(0.44deg);
  }

  70% {
    clip: rect(30px, 9999px, 20px, 0);
    transform: skew(0.77deg);
  }

  75% {
    clip: rect(70px, 9999px, 51px, 0);
    transform: skew(0.31deg);
  }

  80% {
    clip: rect(40px, 9999px, 55px, 0);
    transform: skew(0.76deg);
  }

  85% {
    clip: rect(80px, 9999px, 52px, 0);
    transform: skew(0.85deg);
  }

  90% {
    clip: rect(66px, 9999px, 55px, 0);
    transform: skew(0.54deg);
  }

  95% {
    clip: rect(83px, 9999px, 81px, 0);
    transform: skew(0.23deg);
  }

  100% {
    clip: rect(29px, 9999px, 88px, 0);
    transform: skew(0.33deg);
  }
}

@-webkit-keyframes glitch-anim2 {
  0% {
    clip: rect(60px, 9999px, 50px, 0);
    transform: skew(0.78deg);
  }

  5% {
    clip: rect(28px, 9999px, 75px, 0);
    transform: skew(0.89deg);
  }

  10% {
    clip: rect(85px, 9999px, 2px, 0);
    transform: skew(0.13deg);
  }

  15% {
    clip: rect(89px, 9999px, 12px, 0);
    transform: skew(0.36deg);
  }

  20% {
    clip: rect(62px, 9999px, 75px, 0);
    transform: skew(0.22deg);
  }

  25% {
    clip: rect(33px, 9999px, 54px, 0);
    transform: skew(0.39deg);
  }

  30% {
    clip: rect(24px, 9999px, 43px, 0);
    transform: skew(0.05deg);
  }

  35% {
    clip: rect(60px, 9999px, 35px, 0);
    transform: skew(0.88deg);
  }

  40% {
    clip: rect(61px, 9999px, 46px, 0);
    transform: skew(0.76deg);
  }

  45% {
    clip: rect(88px, 9999px, 55px, 0);
    transform: skew(0.32deg);
  }

  50% {
    clip: rect(90px, 9999px, 82px, 0);
    transform: skew(0.38deg);
  }

  55% {
    clip: rect(20px, 9999px, 69px, 0);
    transform: skew(0.15deg);
  }

  60% {
    clip: rect(48px, 9999px, 5px, 0);
    transform: skew(0.58deg);
  }

  65% {
    clip: rect(96px, 9999px, 32px, 0);
    transform: skew(0.36deg);
  }

  70% {
    clip: rect(26px, 9999px, 5px, 0);
    transform: skew(0.65deg);
  }

  75% {
    clip: rect(47px, 9999px, 89px, 0);
    transform: skew(0.69deg);
  }

  80% {
    clip: rect(82px, 9999px, 22px, 0);
    transform: skew(0.35deg);
  }

  85% {
    clip: rect(99px, 9999px, 2px, 0);
    transform: skew(0.93deg);
  }

  90% {
    clip: rect(46px, 9999px, 40px, 0);
    transform: skew(0.1deg);
  }

  95% {
    clip: rect(47px, 9999px, 66px, 0);
    transform: skew(0.38deg);
  }

  100% {
    clip: rect(56px, 9999px, 48px, 0);
    transform: skew(0.4deg);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(60px, 9999px, 50px, 0);
    transform: skew(0.78deg);
  }

  5% {
    clip: rect(28px, 9999px, 75px, 0);
    transform: skew(0.89deg);
  }

  10% {
    clip: rect(85px, 9999px, 2px, 0);
    transform: skew(0.13deg);
  }

  15% {
    clip: rect(89px, 9999px, 12px, 0);
    transform: skew(0.36deg);
  }

  20% {
    clip: rect(62px, 9999px, 75px, 0);
    transform: skew(0.22deg);
  }

  25% {
    clip: rect(33px, 9999px, 54px, 0);
    transform: skew(0.39deg);
  }

  30% {
    clip: rect(24px, 9999px, 43px, 0);
    transform: skew(0.05deg);
  }

  35% {
    clip: rect(60px, 9999px, 35px, 0);
    transform: skew(0.88deg);
  }

  40% {
    clip: rect(61px, 9999px, 46px, 0);
    transform: skew(0.76deg);
  }

  45% {
    clip: rect(88px, 9999px, 55px, 0);
    transform: skew(0.32deg);
  }

  50% {
    clip: rect(90px, 9999px, 82px, 0);
    transform: skew(0.38deg);
  }

  55% {
    clip: rect(20px, 9999px, 69px, 0);
    transform: skew(0.15deg);
  }

  60% {
    clip: rect(48px, 9999px, 5px, 0);
    transform: skew(0.58deg);
  }

  65% {
    clip: rect(96px, 9999px, 32px, 0);
    transform: skew(0.36deg);
  }

  70% {
    clip: rect(26px, 9999px, 5px, 0);
    transform: skew(0.65deg);
  }

  75% {
    clip: rect(47px, 9999px, 89px, 0);
    transform: skew(0.69deg);
  }

  80% {
    clip: rect(82px, 9999px, 22px, 0);
    transform: skew(0.35deg);
  }

  85% {
    clip: rect(99px, 9999px, 2px, 0);
    transform: skew(0.93deg);
  }

  90% {
    clip: rect(46px, 9999px, 40px, 0);
    transform: skew(0.1deg);
  }

  95% {
    clip: rect(47px, 9999px, 66px, 0);
    transform: skew(0.38deg);
  }

  100% {
    clip: rect(56px, 9999px, 48px, 0);
    transform: skew(0.4deg);
  }
}

@-webkit-keyframes glitch-skew {
  0% {
    transform: skew(-4deg);
  }

  10% {
    transform: skew(1deg);
  }

  20% {
    transform: skew(5deg);
  }

  30% {
    transform: skew(-4deg);
  }

  40% {
    transform: skew(-3deg);
  }

  50% {
    transform: skew(5deg);
  }

  60% {
    transform: skew(-4deg);
  }

  70% {
    transform: skew(0deg);
  }

  80% {
    transform: skew(3deg);
  }

  90% {
    transform: skew(2deg);
  }

  100% {
    transform: skew(2deg);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(-4deg);
  }

  10% {
    transform: skew(1deg);
  }

  20% {
    transform: skew(5deg);
  }

  30% {
    transform: skew(-4deg);
  }

  40% {
    transform: skew(-3deg);
  }

  50% {
    transform: skew(5deg);
  }

  60% {
    transform: skew(-4deg);
  }

  70% {
    transform: skew(0deg);
  }

  80% {
    transform: skew(3deg);
  }

  90% {
    transform: skew(2deg);
  }

  100% {
    transform: skew(2deg);
  }
}

.breadcrumbs .breadcrumb-container {
  height: 40px;
  margin-top: 15px;
}

.breadcrumbs .breadcrumb-container ol {
  margin-bottom: 0;
}

.breadcrumbs .page-title {
  margin-bottom: 20px;
  line-height: 30px;
}

.table-update-delete .delete-item {
  display: inline-block;
  font-size: 19px;
  margin-left: 5px;
}

.table-update-delete .delete-item:before {
  content: "\F1C0";
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
}

.table-update-delete .delete-item:hover {
  cursor: pointer;
  color: #000;
}

.account-details .dripicons-pencil:hover {
  cursor: pointer;
}

.customers-table .badge {
  font-size: 16px;
}

.create-shipment .uil-plus-square {
  font-size: 20px;
}

.create-shipment .uil-trash-alt {
  font-size: 20px;
}

.create-shipment .charge {
  width: 100px;
  display: inline-block;
}

.create-shipment .bootstrap-touchspin-down,
.create-shipment .bootstrap-touchspin-up {
  width: 0px;
  padding-left: 8px;
}

.create-shipment .bootstrap-touchspin {
  width: 95px;
}

.create-shipment .charges-card {
  width: 775px;
}

.create-shipment .billto-card {
  margin-left: -40px;
}

.create-shipment .rght-btn {
  float: right;
}

.create-shipment .left-btn {
  float: left;
}

.create-shipment .type-select {
  width: auto;
  display: inline-block;
}

.features-list__status-wrapper {
  display: flex;
  align-items: center;
}

.features-list__status-wrapper .item {
  display: inline-block;
  width: 35px;
  height: 35px;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.features-list__status-wrapper .item:after {
  content: "S";
  font-family: dripicons-v2 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  position: absolute;
  left: 49%;
  top: 46%;
  transform: translate(-50%, -50%);
}

.features-list__status-wrapper .item--cross:after {
  content: "9";
}

.features-list__status-wrapper .item i {
  position: absolute;
  left: 49%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.features-list__status-wrapper .item i.dripicons-cross {
  font-size: 16px;
}

.features-list__status-wrapper .item:hover {
  cursor: pointer;
}

.features-list__status-wrapper .item.active {
  border-radius: 100%;
  border: 1px solid green;
  color: green;
}

.features-list__status-wrapper .item + a {
  margin-left: 15px;
}

.features-list .dripicons-trash {
  color: darkred;
}

.features-list .dripicons-trash:hover {
  cursor: pointer;
}

.staff-users-index .btn-Available {
  color: #fff;
  background-color: #0acf97;
  border-color: #0acf97;
}

.staff-users-index .Available {
  color: #fff;
  background-color: #0acf97;
  border-color: #0acf97;
}

.staff-users-index .Not,
.staff-users-index .Out {
  color: #fff;
  background-color: #fa5c7c;
  border-color: #fa5c7c;
}

.staff-users-index .On {
  color: #fff;
  background-color: #727cf5;
  border: 1px solid #fff;
}

.staff-users-index .ui-widget-content {
  position: relative;
  z-index: 1234;
}

.staff-users-index .ui-widget {
  background: #fff;
}

.staff-users-index #StaffUsersTable_filter {
  text-align: left;
}

.staff-users-index #StaffUsersTable_length label,
.staff-users-index #StaffUsersTable_filter label {
  margin-bottom: 0;
}

.staff-users-index .bg-doNotDisturb {
  background-color: #fa5c7c !important;
}

.staff-users-index .bg-doNotDisturb:hover {
  background-color: #fa5c7ce3 !important;
}

.staff-users-index .bg-disabled {
  background-color: #98a6ad !important;
}

.staff-users-index .bg-away {
  background-color: #ffbc00 !important;
  color: #fff;
}

.staff-users-index .bg-away:hover {
  background-color: #ffbc00e3 !important;
  color: #fff;
}

.staff-users-index .sorting_1 {
  position: relative;
}

.staff-users-index .avatar-sm {
  position: relative;
}

.staff-users-index .noti-icon-badge {
  display: inline-block;
  position: absolute;
  top: 22px;
  right: 6px;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}