:root {
  --primary-color: #0959a0;
  --warning-color: #fcd462;
  --light-grey-color: #bdbdbd;
  --grey-color: #828282;
  --green-color: #20a464;
}

.width-96 {
  width: 96%;
}

body {
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
}

.text-primary {
  color: var(--primary-color) !important;
}

.separate-right {
  border-right: 1px solid #F1F3F4;
}

.text-light-grey {
  color: var(--light-grey-color);
}

.text-grey {
  color: var(--grey-color);
}

.fs-14 {
  font-size: 14px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.margin-8 {
  margin: 8px !important;
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link {
  background-color: #fff;
  color: var(--primary-color);
  position: relative;
  text-align: center;
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link svg,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link svg {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}

.icon {
  background: url(../../images/login/icons-desktop@2x.png) no-repeat;
  display: inline-block;
  background-size: 242px 242px;
  line-height: inherit;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  width: 22px;
  height: 22px;
  border: none;
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link {
  text-align: center;
  margin-right: 72px;
  transition: none !important;
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover {
  background-color: #fff;
  color: var(--primary-color);
  position: relative;
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link {
  background-color: #fff;
  color: var(--primary-color);
  position: relative;
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link svg,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link svg {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link svg,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link svg {
  stroke: black;
  fill: none;
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover svg,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover svg {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover svg .white-hover,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover svg .white-hover {
  stroke: #fff !important;
  fill: #fff !important;
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link::after,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link::after,
.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover::after,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  height: 0.5em;
  border-top: 3px solid var(--primary-color);
}

.brand-width {
  width: 246px;
}

.dropdown-item {
  white-space: unset;
}

.dropdown-menu {
  left: -161px;
}

.dropdown-width {
  max-width: 200px;
  width: 200px;
}

.dropdown-content {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.dropdown .dropdown-menu.dropdown-primary .dropdown-item:hover {
  background-color: var(--primary-color) !important;
}

.language-menu img {
  border-radius: 4px;
}

.language-menu .dropdown-toggle::after {
  display: none;
}

.user-menu .nav-link {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  transition: none !important;
}

.user-menu .nav-link::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  vertical-align: middle;
  border-top: 6px solid #828282;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.user-menu .dropdown-menu {
  width: 190px !important;
  max-width: 190px;
}

.user-menu .icon-logout {
  background-position: 0 -66px;
}

.user-menu .dropdown-item:hover .icon-logout {
  background-position: -22px -66px;
}

.icon {
  background: url(../../images/login/icons-desktop@2x.png) no-repeat;
  display: inline-block;
  background-size: 242px 242px;
  line-height: inherit;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  width: 22px;
  height: 22px;
}

.search-icon {
  width: 16px;
  height: 16px;
  background-position: -158px -3px;
}

.white-play-icon-sm {
  width: 26px;
  height: 15px;
  background-position: -106px -92px;
}

.white-pause-icon-sm {
  width: 26px;
  height: 15px;
  background-position: -86px -114px;
}

.bell-icon {
  width: 32px;
  height: 32px;
  background-position: -198px -44px;
}

.taris-logo-icon {
  width: 89px;
  height: 89px;
  background-position: -576px -88px;
}

.notification-bell::after {
  content: "8";
  font-size: 10px;
  padding: 3px 7px;
  color: #fff;
  background-color: #d71f0e;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 2px;
  border: 2px solid #fff;
}

.gm-ui-hover-effect {
  border: 1px solid #000 !important;
  top: 16px !important;
  right: 13px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.relative-pos {
  position: relative;
}

.language-menu .dropdown-toggle::after {
  display: none;
}

.map-container {
  height: 90%;
}

#map {
  height: 100%;
}

/* Custom form untilities */
.md-form.input-with-pre-icon label {
  left: 22px;
}

.md-form.input-with-pre-icon .form-control {
  padding-left: 32px !important;
  padding: 0.6rem 0 0.4rem 0;
}

.custom-control {
  padding-left: 1.25rem;
}

.custom-control-label {
  color: #4f4f4f;
  padding-left: 0.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
  top: 0.125rem;
  left: -1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 2px;
}

/* Custom button untilities */
.btn {
  font-size: 0.875rem;
  text-transform: capitalize;
  box-shadow: none;
  border-radius: 4px;
}

.btn-secondary:not([disabled]):not(.disabled):active,
.btn-secondary:not([disabled]):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
  background-color: var(--grey-color) !important;
  opacity: 0.9;
}

.md-form input[type="text"]:not(.browser-default):focus:not([readonly]) {
  box-shadow: none !important;
}

.waves-effect {
  overflow: initial;
}

@media (min-width: 768px) and (max-width: 1024px) {

  .navbar.navbar-light .breadcrumb .nav-item.active>.nav-link,
  .navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link,
  .navbar.navbar-light .breadcrumb .nav-item>.nav-link,
  .navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link,
  .navbar.navbar-light .breadcrumb .nav-item.active>.nav-link,
  .navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link,
  .navbar.navbar-light .breadcrumb .nav-item>.nav-link,
  .navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link {
    margin-right: 16px !important;
  }
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link {
  background-color: #fff;
  color: var(--primary-color);
  position: relative;
  text-align: center;
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link svg,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link svg {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover {
  background-color: #fff;
  color: var(--primary-color);
  position: relative;
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link svg,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link svg {
  stroke: black;
  fill: none;
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover svg,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover svg {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}

.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover svg .white-hover,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover svg .white-hover {
  stroke: #fff !important;
  fill: #fff !important;
}

.navbar.navbar-light .breadcrumb .nav-item.active>.nav-link::after,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item.active>.nav-link::after,
.navbar.navbar-light .breadcrumb .nav-item>.nav-link:hover::after,
.navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link:hover::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  height: 0.5em;
  border-top: 3px solid var(--primary-color);
}

.icon-btn {
  border: none;
  background: transparent;
}

.input-group {
  width: unset;
}

.notification-bell::after {
  content: "8";
  font-size: 10px;
  padding: 3px 7px;
  color: #fff;
  background-color: #d71f0e;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 2px;
  border: 2px solid #fff;
}

.dropdown-menu {
  left: -161px;
}

.map-pin-icon {
  width: 36px;
  height: 36px;
  background-position: -195px 2px;
}

.dropdown .dropdown-menu.dropdown-primary .dropdown-item:hover {
  background-color: var(--primary-color) !important;
}

.bell-icon {
  width: 32px;
  height: 32px;
  background-position: -198px -44px;
}

.race-icon {
  width: 22px;
  height: 22px;
  background-position: -88px -2px;
}

.clock-icon {
  width: 22px;
  height: 22px;
  background-position: -112px -2px;
}

.marker-icon {
  width: 22px;
  height: 22px;
  background-position: -132px -2px;
}

.calendar-icon {
  width: 22px;
  height: 22px;
  background-position: -112px -44px;
}

.overspeed-icon {
  width: 22px;
  height: 22px;
  background-position: -176px -2px;
}

.engine-icon {
  width: 22px;
  height: 22px;
  background-position: -22px -22px;
}

.km-outlined-icon {
  width: 22px;
  height: 22px;
  background-position: -66px -22px;
}

.stop-icon {
  width: 22px;
  height: 22px;
  background-position: -2px -22px;
}

.gas-icon {
  width: 22px;
  height: 22px;
  background-position: -44px -22px;
}

.thermometer-icon {
  width: 22px;
  height: 22px;
  background-position: -88px -22px;
}

.steering-icon {
  width: 22px;
  height: 22px;
  background-position: -110px -22px;
}

.newspaper-gov-icon {
  width: 22px;
  height: 22px;
  background-position: -132px -22px;
}

.user-icon {
  width: 22px;
  height: 22px;
  background-position: -154px -22px;
}

.phone-call-icon {
  width: 22px;
  height: 22px;
  background-position: -176px -22px;
}

.blue-phone-call-icon {
  width: 22px;
  height: 22px;
  background-position: -68px -110px;
}

.raditor-icon {
  width: 22px;
  height: 22px;
  background-position: -2px -44px;
}

.main-grid-icon {
  width: 32px;
  height: 32px;
  background-position: -39px -62px;
}

.one-grid-icon {
  width: 32px;
  height: 32px;
  background-position: -62px -62px;
}

.four-grid-icon {
  width: 32px;
  height: 32px;
  background-position: -84px -63px;
}

.nine-grid-icon {
  width: 32px;
  height: 32px;
  background-position: -106px -63px;
}

.hex-grid-icon {
  width: 32px;
  height: 32px;
  background-position: -40px -106px;
}

.hex-grid-icon {
  width: 32px;
  height: 32px;
  background-position: -40px -106px;
}

.blue-delete-icon {
  width: 32px;
  height: 32px;
  background-position: -40px -84px;
}

.blue-pause-icon {
  width: 32px;
  height: 32px;
  background-position: -61px -84px;
}

.blue-play-icon {
  width: 32px;
  height: 32px;
  background-position: 4px -84px;
}

.blue-full-screen-icon {
  width: 32px;
  height: 32px;
  background-position: -18px -84px;
}

.white-delete-icon {
  background-position: -132px -88px;
}

.white-pause-icon {
  background-position: -88px -88px;
}

.white-play-icon {
  background-position: -109px -88px;
}

.white-hd-icon {
  width: 32px;
  height: 32px;
  background-position: -152px -84px;
}

.white-camera-icon {
  width: 32px;
  height: 32px;
  background-position: 5px -106px;
}

.white-fullscreen-icon {
  width: 32px;
  height: 32px;
  background-position: -17px -106px;
}

.white-logo-icon {
  width: 66px;
  height: 44px;
  background-position: -172px -84px;
}

.delete-icon {
  width: 22px;
  height: 22px;
  background-position: -22px -44px;
  background-color: rgba(230, 34, 52, 0.1);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.edit-icon {
  width: 22px;
  height: 22px;
  background-position: -44px -44px;
  background-color: rgba(226, 185, 59, 0.2);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.height-100 {
  height: 100vh;
}

.black-text {
  color: #000;
}

.brand-width {
  width: 246px;
}

.black-fill {
  fill: #000;
}

.dropdown-width {
  max-width: 200px;
  width: 200px;
}

.dropdown-content {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.relative-pos {
  position: relative;
}

.dropdown-item {
  white-space: unset !important;
}

.user-menu::after {
  vertical-align: middle;
  border-top: 6px solid #828282;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.btn-primary {
  background-color: var(--primary-color) !important;
}

.btn-link {
  background-color: transparent;
  color: var(--primary-color);
}

.bg-green {
  background-color: var(--green-color) !important;
}

.btn-link:hover,
.btn-link:focus {
  text-decoration: none;
}

.arrow-btn:hover,
.arrow-btn:focus {
  box-shadow: none;
}

.md-tabs {
  padding: 0px;
  box-shadow: none;
  background-color: #f1f3f4;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.md-tabs .nav-link {
  color: var(--primary-color);
  font-weight: bold;
}

.md-tabs .nav-link.active {
  background-color: var(--primary-color);
}

.nav-tab-margin {
  margin: 8px 8px 0px 8px !important;
}

.input-styled {
  border: 1px solid #ced4da !important;
  border-right: none !important;
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.post-icon-styled {
  background-color: transparent !important;
  border: 1px solid #ced4da !important;
  border-left: none !important;
}

.overflow-nav {
  overflow-x: hidden !important;
  width: 96%;
  flex-wrap: nowrap;
  margin: 8px 8px 0px 8px;
}

.overflow-nav:hover {
  overflow-x: scroll !important;
}

.classic-tabs .nav li a.active {
  color: var(--primary-color);
}

.classic-tabs .nav li a {
  text-transform: none;
  color: #828282;
  padding: 8px;
}

.classic-tabs .nav li:first-child {
  margin-left: 0px;
}

.classic-tabs .nav {
  max-width: 100%;
  overflow-x: scroll;
}

@media (max-width: 1440px) {
  .navbar.navbar-light .navbar-nav.icon-menu .nav-item>.nav-link {
    margin-right: 42px;
  }
}

.classic-tabs-scrollbar {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

.arrow-btn {
  height: 32px;
  width: 92px;
  background-color: white;
  position: absolute;
  bottom: -32px;
  left: 50%;
  border-top: none;
  border-radius: 0px 0px 16px 16px;
  padding: 0;
  margin: 0;
  transform: translateX(-50%);
}

.arrow-btn::after {
  content: "";
  display: inline-block;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--grey-color);
}

.arrow-btn.collapsed::after {
  border-top: 8px solid var(--grey-color);
  border-bottom: 0;
}

.vertical-arrow-btn {
  height: 92px;
  width: 32px;
  z-index: 100;
  background-color: white;
  position: absolute;
  border-top: none;
  border-radius: 0px 16px 16px 0px;
  -moz-border-radius: 0px 16px 16px 0px;
  -ms-border-radius: 0px 16px 16px 0px;
  -o-border-radius: 0px 16px 16px 0px;
  -webkit-border-radius: 0px 16px 16px 0px;
  padding: 0;
  margin: 0;
  transform: translate(-102%, 349%);
  -webkit-transform: translate(-102%, 349%);
  -moz-transform: translate(-102%, 349%);
  -ms-transform: translate(-102%, 349%);
  -o-transform: translate(-102%, 349%);
}

.vertical-arrow-btn::after {
  content: "";
  display: inline-block;
  border-left: 8px solid transparent;
  border-right: 8px solid var(--grey-color);
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  position: relative;
  right: 6px;
}

.vertical-arrow-btn.active::after {
  border-left: 8px solid var(--grey-color);
  border-right: 0;
  right: 0px;
}

/* picker data */
.picker__table {
  margin-right: 8px;
  margin-left: 8px;
  width: 95% !important;
}

div.picker.datepicker .picker__box .picker__table .picker__day.picker__day--infocus {
  width: 33px;
  height: 32px;
  line-height: 30px;
  padding: 0;
}

div.picker.datepicker .picker__box div.picker__footer button {
  margin-top: 0;
}

.datepicker .fa-caret-down:before {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  vertical-align: middle;
  border-top: 6px solid #828282;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

div.picker.datepicker .picker__box .picker__header.datepicker__box .picker__nav .picker__nav--prev:before {
  margin-left: 4px;
  content: "";
  width: 10px;
  height: 10px;
  display: inline-block;
  border: solid var(--primary-color);
  border-width: 2px 2px 0 0;
  transform: rotate(-135deg);
}

div.picker.datepicker .picker__box .picker__header.datepicker__box .picker__nav .picker__nav--next:before {
  margin-left: -4px;
  content: "";
  width: 10px;
  height: 10px;
  display: inline-block;
  border: solid var(--primary-color);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}