@font-face {
  font-family: "Teko-Bold";
  src: url(5087919e224ac0479efb.ttf);
}

@font-face {
  font-family: "Teko-Light";
  src: url(c869f8b6991660ce0a3c.ttf);
}

@font-face {
  font-family: "Teko-Medium";
  src: url(954d718a0614c77ea53a.ttf);
}

/*** global ***/

html,
body {
  font-family: Arial;
  font-size: 14px;
  color: #221f20;
}

form {
  width: 100%;
}

.divider {
  width: 100%;
  height: 0 !important;
  margin-top: 15px;
  margin-bottom: 15px;
  border-width: 1px;
  border-style: solid;
  border-image: radial-gradient(rgba(55, 78, 155, 1), rgba(55, 78, 155, 0)) 1;
  background-color: initial;
  opacity: initial;
}

.divider-light {
  width: 100%;
  height: 1px !important;
  margin-top: 15px;
  margin-bottom: 15px;
  border-width: 0;
  background-color: #e5e5e5;
  opacity: 1;
}

.divider-vertical {
  width: 0 !important;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid;
  border-image: radial-gradient(rgba(55, 78, 155, 1), rgba(55, 78, 155, 0)) 1;
  background-color: initial;
  opacity: initial;
}

.divider-vertical-light {
  width: 0 !important;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid;
  border-image: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1;
  background-color: initial;
  opacity: initial;
}

.checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox.disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #c5c5c5 !important;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox.disabled input {
  cursor: not-allowed;
  pointer-events: none;
}

.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  border: 2px solid #c5c5c5;
  box-sizing: border-box;
}

.checkbox:hover input~.checkmark {
  background-color: rgba(216, 227, 240, 1);
  border-color: rgba(216, 227, 240, 1);
}

.checkbox input:checked~.checkmark {
  background-color: #304ea2;
  border-color: #304ea2;
}

.checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox input:checked~.checkmark:after {
  display: block;
}

.checkbox .checkmark:after {
  left: 7px;
  top: 2px;
  width: 8px;
  height: 13px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox.round .checkmark {
  height: 25px;
  width: 25px;
  border-radius: 13px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 21px;
}

.switch.large {
  width: 60px;
  height: 34px;
}

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

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d9e5f2;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 20px;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 2px;
  bottom: 2px;
  background-color: #304ea2;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.2);
}

.switch.large .slider:before {
  width: 26px;
  height: 26px;
  left: 4px;
  bottom: 4px;
}

.switch input:checked+.slider {
  background-color: #304ea2;
}

.switch input:focus+.slider {
  box-shadow: 0 0 1px #2196f3;
}

.switch input:checked+.slider:before {
  background-color: #ffffff;
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}

.switch.large input:checked+.slider:before {
  background-color: #ffffff;
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.switch.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch.disabled .slider {
  cursor: not-allowed;
}

/*** fastselect overrides ***/

.fstElement {
  height: 40px !important;
  background-color: rgba(48, 78, 162, 0.08) !important;
  border-radius: 6px !important;
  margin-bottom: 20px !important;
  border: none !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

.fstElement .fstControls {
  padding: 0 !important;
  /* padding: 6px 12px !important; */
  width: 100% !important;
  height: 100% !important;
}

.fstElement .fstControls input {
  font-size: 1rem !important;
  font-weight: 400 !important;
  /* padding: 0 !important; */
  padding: 6px 12px !important;
  margin-bottom: 0 !important;
  height: 100% !important;
}

.fstElement .fstControls .fstChoiceItem {
  font-size: 1rem !important;
  font-weight: 400 !important;
  height: 25px;
  padding: 0.1rem 1.6rem 0.1rem 0.5rem;
  margin: 0.513rem 0.188rem !important;
  border-radius: 6px !important;
  border: none !important;
}

.fstElement .fstControls .fstChoiceItem.plow {
  background-color: #304ea2;
  color: #ffffff !important;
}

.fstElement .fstControls .fstChoiceItem.plow-no-sensor {
  background-color: #636363;
  color: #ffffff !important;
}

.fstElement .fstControls .fstChoiceItem.no-avl {
  background-color: #ff0000;
  color: #ffffff !important;
}

.fstElement .fstControls .fstChoiceItem.mower {
  background-color: #0de117;
  color: rgb(11, 49, 113) !important;
}

.fstElement .fstControls .fstChoiceItem.mower button {
  color: rgb(11, 49, 113) !important;
}

.fstElement .fstControls .fstChoiceItem.sweeper {
  background-color: #17ba9f;
  color: rgb(11, 49, 113) !important;
}

.fstElement .fstControls .fstChoiceItem.sweeper button {
  color: rgb(11, 49, 113) !important;
}

.fstElement .fstControls .fstChoiceItem button {
  margin-left: 45px;
}

.fstElement .fstResults {
  height: 200px !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

.fstElement .fstResults .fstSelected {
  background-color: #304ea2 !important;
}

.fstElement .fstResults span {
  padding: 4px !important;
  font-size: 1rem !important;
}

/*** bootstrap overrides ***/

.bg-primary {
  background-color: #304ea2 !important;
}

.bg-primary-subtle {
  background-color: rgba(48, 78, 162, 0.08) !important;
}

.navbar {
  height: 75px;
  background-color: #437bbe !important;
  box-shadow: 0px 3px 5px 1px #574157;
}

/* .btn:not(.bootstrap) {
  background: #304EA2;
  color: #ffffff;
} */

.btn {
  border-radius: 16px;
  height: 40px;
  border: none;
  padding: 11px 65px;
  display: block;
  margin: 0 auto 20px;
  cursor: pointer;
  background: #304ea2;
  color: #ffffff;
}

.btn:focus {
  box-shadow: none;
  background-color: rgba(48, 78, 162, 0.9);
  color: #ffffff;
}

.btn:hover {
  background-color: rgba(48, 78, 162, 0.7);
  color: #ffffff;
}

.btn:disabled,
.btn.disabled {
  background-color: rgba(48, 78, 162, 0.3) !important;
}

.dropdown .btn {
  width: 100%;
  position: relative;
  display: block;
  align-items: center;
  text-align: left;
  color: #304ea2;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
  height: 50px;
  box-sizing: border-box;
  padding: 0 56px 0 16px;
  line-height: 50px;  
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.dropdown .btn.dropdown-toggle {
  background: rgba(216, 227, 240, 1);
  border-radius: 25px;
  border: 1px solid rgba(216, 227, 240, 1);
  display: flex;
}

/* .dropdown .btn.dropdown-toggle span:first-child {
  overflow: hidden;
}

.dropdown .btn.dropdown-toggle span.label {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} */

.dropdown .btn.dropdown-toggle:hover {
  background-color: rgba(48, 78, 162, 0.7);
  color: #ffffff;
}

.dropdown .btn.dropdown-toggle::before {
  content: "";
  border-top: 7px solid #304ea2;
  border-right: 7px solid transparent;
  border-bottom: 0;
  border-left: 7px solid transparent;
  position: absolute;
  top: 22px;
  right: 23px;
}

.dropdown .btn.dropdown-toggle::after {
  content: "";
  border-top: 6px solid rgba(216, 227, 240, 1);
  border-right: 6px solid transparent;
  border-bottom: 0;
  border-left: 6px solid transparent;
  position: absolute;
  top: 20px;
  right: 24px;
  transition: border-color 0.15s ease-in-out;
}

.dropdown .btn.btn.dropdown-toggle:hover::after {
  border-top-color: #6e83bf;
  transition: border-color 0.15s ease-in-out;
}

.dropdown .btn.dropdown-toggle.show {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown .dropdown-menu {
  width: 100%;
  border-top-width: 0;
  border-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: -3px !important;
  background-color: rgba(216, 227, 240, 1);
}

.dropdown .dropdown-menu .dropdown-item {
  color: #304ea2;
  height: 43px;
  padding: 13px 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 99%;
}

.dropdown .dropdown-menu .dropdown-item.active {
  background-color: #305c91;
  color: #ffffff;
}

.dropdown .dropdown-menu .dropdown-item.active small {
  color: rgba(255, 255, 255, 0.8) !important;
}

.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: rgba(67, 123, 190, 0.6);
}

.dropdown .dropdown-menu .li:last-of-type .dropdown-item {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.dropdown-alt {
  flex: 1;
  position: relative;
}

.dropdown-alt .btn.dropdown-toggle {
  background: #ffffff;
  border: 1px solid #e2e2e2;
  height: 40px;
  padding: 0 19px;
  color: #304ea2;
  border-radius: 6px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* .dropdown-alt .btn.dropdown-toggle span:first-child {
  overflow: hidden;
}

.dropdown-alt .btn.dropdown-toggle span.label {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} */

.dropdown-alt .btn.dropdown-toggle .title {
  display: flex;
  align-items: center;
}

.dropdown-alt .btn.dropdown-toggle .title .icon {
  margin-right: 10px;
}

.dropdown-alt .btn.dropdown-toggle.show {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-alt .dropdown-menu {
  width: 100%;
  border-top-width: 0;
  border-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* margin-top: -3px !important; */
  border-color: #e2e2e2;
  padding: 0;
  max-height: 264px;
  overflow-y: auto;
}

.dropdown-alt .dropdown-menu .dropdown-item {
  padding: 13px 19px;
  font-family: Arial;
  font-size: 14px;
  color: #304ea2;
  cursor: pointer;
  height: 43px;
  display: flex;
  align-items: center;
}

.dropdown-alt .dropdown-menu .dropdown-item .title {
  display: flex;
  align-items: center;
}

.dropdown-alt .dropdown-menu .dropdown-item .icon {
  margin-right: 10px;
}

.dropdown-alt .dropdown-menu .dropdown-item.active {
  background-color: rgba(216, 227, 240, 1);
}

.dropdown-alt .dropdown-menu .dropdown-item:hover {
  background-color: rgba(67, 123, 190, 0.6);
}

.title-bar .dropdown {
  margin-bottom: 0;
  border: 1px solid #ffffff;
  border-radius: 12px;
  width: 150px;
  margin-right: 20px;
}

.title-bar .dropdown .dropdown-toggle {
  font-family: Arial !important;
  font-size: 14px !important;
}

.title-bar .dropdown .dropdown-toggle::before {
  top: 14px;
  right: 13px;
}

.title-bar .dropdown .dropdown-toggle::after {
  top: 12px;
  right: 14px;
}

.title-bar .dropdown .dropdown-menu {
  border-color: #ffffff;
  width: 150px;
  margin-left: -1px;
  margin-top: -2px !important;
}

.dropdown.role-filter {
  margin-bottom: 0;
  border: 1px solid #1e90ff;
  border-radius: 12px;
  width: 200px;
  margin-left: 20px;
}

.dropdown.role-filter .dropdown-toggle {
  border-radius: 12px;
  height: 36px;
  padding: 5px 14px;
  cursor: pointer;
  margin: 0;
}

.dropdown.role-filter .dropdown-toggle::before {
  top: 14px;
  right: 13px;
}

.dropdown.role-filter .dropdown-toggle::after {
  top: 12px;
  right: 14px;
}

.dropdown.role-filter .dropdown-menu {
  border-color: #ffffff;
  width: 150px;
  margin-left: -1px;
  margin-top: -2px !important;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar .dropdown .btn {
  height: 75px;
}

.navbar .dropdown .btn.dropdown-toggle {
  background: #437bbe;
  border-radius: 0;
  color: #ffffff;
  border: none;
  border-right: solid 1px #437bbe;
  border-left: solid 1px #437bbe;
  padding: 0 40px;
}

.navbar .dropdown .btn.dropdown-toggle::before {
  border-top: 7px solid #ffffff;
  top: 35px;
  right: 4px;
}

.navbar .dropdown .btn.dropdown-toggle::after {
  border-top: 6px solid #437bbe;
  top: 33px;
  right: 5px;
}

.navbar .dropdown .btn.dropdown-toggle.show {
  border-right: solid 1px #ffffff;
  border-left: solid 1px #ffffff;
}

.navbar .dropdown .dropdown-menu {
  background-color: #437bbe;
  margin-top: 0 !important;
}

.navbar .dropdown .dropdown-menu.show {
  border-right: solid 1px #ffffff;
  border-bottom: solid 1px #ffffff;
  border-left: solid 1px #ffffff;
}

.navbar .dropdown .dropdown-menu .dropdown-item {
  color: #ffffff;
}

.navbar .dropdown .dropdown-menu .dropdown-item:hover {
  background-color: #679ad7;
}

.navbar .dropdown .dropdown-menu form input[type="submit"] {
  background: none;
  border: none;
  color: #ffffff;
  padding: 0;
}

.form-group .form-label {
  font-family: Arial;
  font-size: 13px;
  color: #304ea2;
  margin-bottom: 8px;
}

.form-group input.form-control,
.form-group select.form-control,
.form-group textarea.form-control {
  height: 40px;
  background-color: rgba(48, 78, 162, 0.08);
  border-radius: 6px;
  margin-bottom: 20px;
  border-width: 0;
  width: 100%;
  padding: 6px 12px;
  box-sizing: border-box;
}

.form-group textarea.form-control {
  height: initial;
  resize: none;
}

.modal-content {
  border-radius: 16px;
}

.modal-header {
  border-bottom: none;
}

.modal-footer {
  border-top: none;
}

.input-group .form-control {
  border-right: 1px solid #ced4da !important;
}

.input-group .btn {
  width: 50px;
  padding: 8px 0px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  color: #304ea2;
  background-color: rgba(48, 78, 162, 0.08);
}

.text-bg-primary {
  background-color: #304ea2 !important;
  color: #ffffff !important;
}

.form-select {
  background-color: rgba(216, 227, 240, 1);
  border: 1px solid rgba(216, 227, 240, 1);
  border-radius: 10px;
  color: #304ea2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accordion .accordion-item {
  border: none;
  border-bottom: 1px solid rgba(216, 227, 240, 1);
  border-radius: 0;
}

.accordion .accordion-item .accordion-button {
  background: none;
  box-shadow: none;
  color: #304ea2;
  font-weight: bold;
}

.accordion .accordion-item .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23304ea2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e");
}

.accordion .accordion-item .filter {
  padding-left: 35px;
  margin-left: 10px;
  font-size: 14px;
  font-family: Arial;
  color: #304ea2;
}

.accordion .accordion-item .filter .checkmark::after {
  left: 4px;
  top: 0px;
}

/*** flatpickr overrides ***/
.flatpickr-prev-month,
.flatpickr-next-month,
.flatpickr-month,
.flatpickr-current-month {
  height: 40px !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  vertical-align: inherit;
}

.flatpickr-current-month {
  padding: 0 !important;
}

.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-size: 14px !important;
  height: 100% !important;
}

.flatpickr-current-month .numInputWrapper {
  width: 66px !important;
  height: 100% !important;
  margin-left: 10px;
}

.flatpickr-day {
  border-radius: 10px !important;
}

.flatpickr-day.selected {
  background-color: #304ea2 !important;
  border-color: #304ea2 !important;
  color: #ffffff !important;
}

.flatpickr-day.today {
  border-color: #437bbe !important;
}

/*** mapbox overrides ***/
.mapboxgl-popup-content {
  border-radius: 8px;
  font-size: 1rem;
}

.mapboxgl-popup-close-button {
  font-size: 18px;
  top: -8px;
  right: -8px;
  background: white;
  border-radius: 6px;
}

.mapboxgl-popup-close-button:hover {
  background-color: whitesmoke;
}

/*** layouts ***/
.main-container {
  position: absolute;
  top: 75px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.no-header-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*    background-image: url('./images/Etch_BackgroundPattern_Tile.jpg')*/
}

.no-header-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  background-image: linear-gradient(#9ac7fd, #437bbe);
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-container {
  background-color: #ffffff;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0px 3px 40px rgba(40, 40, 40, 0.06);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.content-container .title-bar {
  position: relative;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 20px;
  box-sizing: border-box;
  background: rgba(216, 227, 240, 1);
  border-radius: 16px;
}

.content-container .title-bar .title {
  font-family: "Teko-Medium";
  font-size: 18px;
  color: #304ea2;
}

.content-container .title-bar .btn {
  border-radius: 12px;
  height: 36px;
  padding: 5px 14px;
  cursor: pointer;
  margin: 0;
  font-family: "Teko-Light";
  font-size: 20px;
}

.content-container .title-bar .title .icon {
  font-size: 10px;
  margin-right: 17px;
}

.content-container .header {
  height: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 31px 32px 0 32px;
  box-sizing: border-box;
}

.content-container .header .title {
  font-family: "Teko-Medium";
  font-size: 18px;
  color: #304ea2;
}

.content-container .header .title a {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: #304ea2;
}

.content-container .header .title .icon {
  font-size: 10px;
  margin-right: 17px;
}

.content-container .subtitle {
  font-family: "Teko-Light";
  font-size: 16px;
  color: #221f20;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.content-container .subtitle .icon {
  margin-right: 4px;
}

.content-container .subtitle.label-button {
  cursor: pointer;
}

.content-container .icon-button {
  cursor: pointer;
}

.content-container .content {
  padding: 0 23px 23px 23px;
  position: relative;
  flex: 1;
  overflow-y: auto;
}

.content-container .footer-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 20px;
  box-sizing: border-box;
  background: rgba(216, 227, 240, 1);
  border-radius: 16px;
}

.content-container .content .table-header {
  position: absolute;
  top: 0;
  right: 23px;
  left: 23px;
}

.content-container .content .table-body {
  position: absolute;
  top: 50px;
  right: 23px;
  bottom: 20px;
  left: 23px;
  overflow-y: auto;
}

.content-container .content table {
  width: 100%;
  table-layout: fixed;
}

/* .content-container .content table button {
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  padding: 0px;
  margin-top: 2px;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
}

.content-container .content table button.check {
  border: 2px solid #304EA2;
  border-radius: 5px;
}

.content-container .content table button.check .icon {
  font-size: 20px;
  color: #304EA2;
}

.content-container .content table button.delete .icon {
  font-size: 24px;
  color: red;
} */

.content-container .content table th {
  height: 50px;
  box-sizing: border-box;
  text-align: left;
}

.content-container .content table td {
  height: 50px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

.content-container .content table td.ellipses {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-container .content table .dropdown .btn.dropdown-toggle {
  height: 32px;
  font-size: 14px;
  border-radius: 10px;
  box-sizing: border-box;
}

.content-container .content table .dropdown .btn.dropdown-toggle::before {
  top: 14px;
  right: 15px;
}

.content-container .content table .dropdown .btn.dropdown-toggle::after {
  top: 12px;
  right: 16px;
}

.content-container .content table .dropdown .btn.dropdown-toggle.show {
  border-top: 1px solid #304ea2;
  border-right: 1px solid #304ea2;
  border-left: 1px solid #304ea2;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.content-container .content table .dropdown .dropdown-menu.show {
  border-right: 1px solid #304ea2;
  border-bottom: 1px solid #304ea2;
  border-left: 1px solid #304ea2;
}

.content-container .content table th .checkbox,
.content-container .content table td .checkbox {
  padding: 0;
  margin: 0px 0px 24px 7px;
}

.content-container .content table th .checkbox .checkmark,
.content-container .content table td .checkbox .checkmark {
  height: 25px;
  width: 25px;
}

/*** event management ***/

#event-types {
  position: absolute;
  top: 25px;
  left: 128px;
  bottom: 25px;
  width: 289px;
}

#event-types .types {
  margin: 20px 23px 0;
}

#event-details .event-start,
#event-details .event-end,
#event-details .event-passes {
  font-size: 14px;
  color: #437bbe;
}

#event-details .event-passes {
  font-weight: bold;
}

.event-passes-div input[type="range"]::-webkit-slider-runnable-track {
  height: 0.75rem;
}

.event-passes-div input[type="range"]::-moz-range-track {
  height: 0.75rem;
}

.event-passes-div input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.35rem;
  background-color: #304ea2;
  height: 1.5rem;
  width: 1.5rem;
}

.show-public-label {
  font-size: 16px;
  color: #437bbe;
  font-weight: bold;
}

#event-details .event-updates {
  position: absolute;
  top: 182px;
  right: 0;
  bottom: 69px;
  left: 0;
  padding: 0 23px;
  overflow-y: auto;
}

#event-types .types .type {
  text-decoration: none;
  color: #304ea2;
}

#event-types .types .type,
#event-details .event-updates .update {
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

#event-types .types .type:hover,
#event-details .event-updates .update:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

#event-details .event-updates .update label:hover {
  cursor: pointer;
}

#event-types .types .type.active,
#event-details .event-updates .update.active {
  background-color: #304ea2;
  color: #ffffff;
  border-color: #304ea2;
}

#event-types .types .type.active::after,
#event-details .event-updates .update.active::after {
  content: "";
  position: absolute;
  right: -24px;
  top: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 24px solid #304ea2;
}

#end-event-button {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  margin-left: 7px;
  cursor: pointer;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.08);
}

#end-event-button:hover {
  background-color: #ad2a24;
}

#end-event-button .icon {
  font-size: 29px;
  color: #ad2a24;
}

#end-event-button:hover .icon {
  color: #ffffff;
}

#event-details .footer {
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

#event-management {
  position: absolute;
  top: 25px;
  left: 442px;
  bottom: 25px;
  width: 393px;
}

#event-updates {
  position: absolute;
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 860px;
}

#event-updates .event-update-detail {
  margin: 20px;
  overflow-y: auto;
}

#event-updates .event-update-detail .label {
  font-family: Arial;
  font-size: 13px;
  color: #304ea2;
  margin-bottom: 2px;
}

#event-updates .event-update-detail .value {
  font-family: Arial;
  font-size: 15px;
  margin-bottom: 18px;
}

#add-event-update .modal-body {
  height: calc(100vh - 200px);
}

#add-event-update .row {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  margin: 20px;
}

#add-event-update .footer-buttons {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

#add-event-update .footer-buttons .btn {
  width: 120px;
  padding: 0;
  height: 35px;
  border-radius: 12px;
  position: relative;
}

#add-event-update .footer-buttons .btn.prev .icon {
  position: absolute;
  left: 4px;
  top: 5px;
}

#add-event-update .footer-buttons .btn.next .icon {
  position: absolute;
  right: 4px;
  top: 5px;
}

/*** event template management ***/
#event-template-tools {
  position: absolute;
  top: 25px;
  left: 128px;
  bottom: 25px;
  width: 289px;
}

#event-template-tools .tools {
  margin-top: 20px;
}

#event-template-tools .tools .list-group-item {
  display: flex;
  padding: 10px 16px;
  align-items: center;
}

#event-template-tools .tools .list-group-item span {
  margin-right: 16px;
}

#event-template {
  position: absolute;
  top: 25px;
  left: 442px;
  bottom: 25px;
  right: 25px;
}

#event-template .title-bar .pager {
  display: flex;
  align-items: center;
}

#event-template .title-bar .pager .btn {
  color: #304ea2;
  background-color: rgba(216, 227, 240, 1);
  height: 38px;
  width: 38px;
  padding: 2px 0px;
}

#event-template .title-bar .pager .btn span {
  font-size: 34px;
}

#event-template .title-bar .pager .page-index {
  font-size: 12px;
  color: #304ea2;
  margin: 0 3px;
}

#event-template .title-bar .addn-tools {
  display: flex;
}

#event-template .title-bar .addn-tools .disabled {
  opacity: 0.5;
  pointer-events: none;
}

#event-template .title-bar .addn-tools .tool.width {
  display: flex;
  align-items: center;
}

#event-template .title-bar .addn-tools .tool label {
  font-size: 16px;
  color: #304ea2;
}

#event-template .title-bar .addn-tools .tool .btn {
  color: #304ea2;
  background-color: #ffffff;
  width: 24px;
  height: 24px;
  padding: 1px 0;
  border-radius: 4px;
  margin: 0 10px;
}

#event-template .title-bar .addn-tools .tool .btn span {
  font-size: 22px;
}

#event-template .template {
  position: absolute;
  padding: 10px;
  top: 70px;
  right: 20px;
  left: 20px;
  bottom: 20px;
  overflow-y: auto;
  display: none;
}

#event-template .template .page {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 0 10px;
}

#event-template .template .form-group {
  border: solid 1px #ffffff;
  /* background-color: #f0f8ff; */
}

#event-template .template .form-group:hover {
  border-color: rgba(67, 123, 190, 0.6);
}

#event-template .template .form-group.selected {
  background-color: rgba(216, 227, 240, 1);
}

#add-select .options .input-group.new,
#edit-select .options .input-group.new,
#set-addresses .emails .input-group.new {
  height: 40px;
  margin-top: -1px;
}

#add-select .options .input-group.new .input-group-text,
#edit-select .options .input-group.new .input-group-text,
#set-addresses .emails .input-group.new .input-group-text {
  background-color: #ffffff;
  padding: 0px 6px;
}

#add-select .options .input-group.new .drag,
#edit-select .options .input-group.new .drag {
  width: 20px;
  height: 28px;
  box-sizing: border-box;
  padding: 5px 0px;
  font-size: 16px;
  cursor: grab;
}

#add-select .options .input-group.new input,
#edit-select .options .input-group.new input,
#set-addresses .emails .input-group.new input {
  margin-bottom: 0;
  background-color: #ffffff;
  border: 1px solid #ced4da;
}

#add-select .options .input-group.new input,
#edit-select .options .input-group.new input {
  border-left-width: 0;
}

#add-select .options .input-group.new .btn,
#edit-select .options .input-group.new .btn,
#set-addresses .emails .input-group.new .btn {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  margin: 0;
  border-left-width: 0;
}

#preview .modal-body {
  height: calc(100vh - 200px);
}

#preview .row {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  margin: 20px;
}

#preview .footer-buttons {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

#preview .footer-buttons .btn {
  width: 120px;
  padding: 0;
  height: 35px;
  border-radius: 12px;
  position: relative;
}

#preview .footer-buttons .btn.prev .icon {
  position: absolute;
  left: 4px;
  top: 5px;
}

#preview .footer-buttons .btn.next .icon {
  position: absolute;
  right: 4px;
  top: 5px;
}

/*** message management ***/

#message-management {
  position: absolute;
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 142px;
}

/*** device management ***/

/* Same content-area box as the other modules (clears the 78px menu), but the
   device screen stacks two cards, so let it scroll instead of overflowing. */
#device-management {
  position: absolute;
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 142px;
  overflow-y: auto;
}

#message-management .table-body .sort-handle {
  cursor: grab;
}

#message-management .table-body .sort-icon {
  color: rgba(34, 31, 32, 0.4);
}

#message-management .table-body input[type="text"] {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  border: none;
  padding: 0 6px;
}

#vehicle-inventory table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#vehicle-inventory table td:has(.dropdown) {
  overflow: visible;
}

#message-management .table-body button.delete,
#vehicle-inventory .table-body button.delete,
#user-management .table-body button.delete {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  padding: 11px;
  /* margin-top: 2px; */
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: red;
}

/*** reports ***/

#report-configure {
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 142px;
  width: 378px;
}

#report-output {
  position: absolute;
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 545px;
  overflow: hidden;
}

#report-output #table-area {
  position: relative;
}

#report-output .description {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(#fffd, #fff);
  display: flex;
  text-align: center;
  font-size: 1.5em;
  padding: 15%;
  padding-top: 3em;
}

#report-output .report-summary {
  display: none;
  margin-top: 0.05em;
  margin-right: 1em;
  font-size: 1.3em;
}

#report-output .row-count .limit-msg {
  display: none;
  margin-right: 1em;
  margin-top: 0.3em;
}

#report-output .row-count.limit-reached {
  color: #ff0000;
}

#report-output .row-count.limit-reached .limit-msg {
  display: inline;
}

#report-output:not(.loaded) .row-count {
  display: none !important;
}

#report-output:not(.loaded) #print-button {
  display: none !important;
}

#report-output:not(.loaded) #download-button {
  display: none !important;
}

#report-output.loaded .content {
  overflow-y: auto;
}

#report-output.loaded .description {
  display: none;
}

#report-map {
  margin-top: 23px;
  height: 400px;
}

#map-tooltip {
  display: none;
  font-size: 22pt;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 380px;
  left: 0;
  color: #000000;
  pointer-events: none;
}

#map-tooltip .tooltip-content {
  background-color: rgba(255, 255, 255, 0.75);
}

.report-table tr.selected td {
  background-color: #1e90ff;
  color: #ffffff;
}

.report-table tbody tr:not(.selected):hover td {
  background-color: rgba(216, 227, 240, 1);
}

.report-table.color-by-service tbody tr.serviced:not(.group-summary) {
  color: #46c346;
}

.report-table.color-by-service tbody tr:not(.serviced):not(.group-summary) {
  color: #ff0000;
}

/* Text-level coloring for group summary labels */
.text-serviced {
  color: #46c346;
}

.text-partial {
  color: #ff9800;
}

.text-unserviced {
  color: #ff0000;
}

.report-table tbody tr.summary {
  font-weight: bold;
  border-bottom: 2px solid #000;
}

.report-table .group-summary-wrapper {
  display: flex;
  align-items: center;
}

.report-table .group-summary-wrapper .icon {
  cursor: pointer;
}

.report-table .route-percent-badge {
  margin-left: 12px;
  padding: 2px 8px;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 10px;
  color: #fff;
  cursor: help;
}

.route-percent-badge.badge-serviced {
  background-color: #46c346;
}

.route-percent-badge.badge-partial {
  background-color: #ff9800;
}

.route-percent-badge.badge-unserviced {
  background-color: #ff0000;
}

.legend-item {
  display: flex;
  flex-direction: row;
}

.legend-square {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

#report-map-legend {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1000;
}

#report-map-legend .legend-item {
  margin-bottom: 10px;
}

#report-middle-legend {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

#report-middle-legend .legend-item {
  margin-right: 15px;
}

#confirm-large-report {
  text-align: center;
}

@media screen and (min-width: 768px) {
  #confirm-large-report:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

#confirm-large-report .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

/*** vehicle management ***/

#vehicle-management {
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 127px;
  width: 245px;
}

#vehicle-inventory {
  position: absolute;
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 394px;
  /* left: 127px; */
}

.search {
  position: relative;
}

.search .icon {
  font-size: 24px;
  position: absolute;
  top: 10px;
}

.search.sm .icon {
  top: 6px;
}

.search input {
  border: none;
  border-bottom: 1px solid rgba(34, 31, 32, 0.3);
  display: block;
  height: 40px;
  box-sizing: border-box;
  width: 100%;
  padding: 1px 4px 1px 30px;
}

.search.sm input {
  height: 36px;
}

/*** login ***/

.login-container {
  background-color: #ffffff;
  width: 460px;
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.forgot-password {
  color: #304ea2;
  display: block;
  text-decoration: none;
  text-align: center;
}

/*** map ***/
#map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 410px;
  transition: left 0.15s;
}

#map.menu-closed {
  /* left: 78px; */
  transition: left 0.15s;
}

#legend-control,
#street-treatment-legend,
#rounds-legend {
  position: absolute;
  top: 26px;
  right: 25px;
}

#legend-control .wrapper,
#street-treatment-legend .wrapper,
#rounds-legend .wrapper {
  width: 250px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 12px 23px -6px rgb(0 0 0 / 13%);
  border-radius: 30px;
  padding: 14px;
  box-sizing: border-box;
}

#legend-control .wrapper {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#legend-control .legend {
  margin-top: 20px;
}

#legend-control.minimized .legend {
  display: none;
  height: 0;
}

#legend-control .legend li,
#street-treatment-legend .legend li,
#rounds-legend .legend li {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

#legend-control .legend li svg,
#street-treatment-legend .legend li svg,
#rounds-legend .legend li svg {
  margin-right: 8px;
}

#legend-control .legend li .icon,
#street-treatment-legend .legend li .icon,
#rounds-legend .legend li .icon {
  margin-right: 8px;
}

#street-treatment-legend .wrapper,
#rounds-legend .wrapper {
  padding: 18px 26px;
}

#layer-control {
  position: absolute;
  top: 26px;
  left: 440px;
  width: 49px;
  height: 49px;
  background-color: #304ea2;
  border-radius: 16px;
  color: #ffffff;
  box-sizing: border-box;
  box-shadow: 0px 4px 26px rgb(0 0 0 / 26%);
  z-index: 11;
  transition: left 0.15s;
}

#layer-control.menu-closed {
  /* left: 108px; */
  transition: left 0.15s;
}

#layer-control:hover {
  cursor: pointer;
  background-color: #ffffff;
  width: auto;
  height: auto;
}

#layer-control .icon {
  font-size: 30px;
  padding: 10px;
}

#layer-control:hover .icon {
  display: none;
}

#layer-control .layers {
  display: none;
}

#layer-control:hover .layers {
  display: block;
  padding: 15px 50px 10px 27px;
}

#layer-control .layers .group-label {
  color: black;
  display: block;
  position: relative;
  margin-bottom: 10px;
  font-size: 14px;
  font-family: Arial;
  font-weight: bold;
  color: #304ea2;
}

#layer-control .layers .layer {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-left: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  font-family: Arial;
  user-select: none;
  color: #304ea2;
}

#layer-control .layers .layer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

#layer-control .layers .layer {
  padding-left: 30px;
}

#layer-control .layers .layer .checkmark::after {
  left: 4px;
  top: 0px;
}

#legend-control .legend-toggle {
  position: absolute;
  right: 0;
  bottom: -17px;
  left: 0;
  background: #304ea2;
  color: #ffffff;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

#legend-control .legend-toggle:hover {
  cursor: pointer;
  background-color: rgba(216, 227, 240, 1);
  color: #304ea2;
}

#legend-control .legend-toggle .icon {
  font-size: 18px;
  transition: transform 0.15s;
  transform-style: preserve-3d;
}

#legend-control.minimized .legend-toggle .icon {
  transition: transform 0.15s;
  transform: rotateX(180deg);
  transform-style: preserve-3d;
}

/* #layer-control .layers .layer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eeeeee;
}

#layer-control .layers .layer:hover input~.checkmark {
  background-color: #cccccc;
}

#layer-control .layers .layer input:checked~.checkmark {
  background-color: #437bbe;
}

#layer-control .layers .layer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

#layer-control .layers .layer input:checked~.checkmark:after {
  display: block;
}

#layer-control .layers .layer .checkmark:after {
  left: 5px;
  top: 1px;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
} */

#event-type-dropdown {
  /* position: absolute;
  top: 26px;
  left: 126px; */
  margin-left: 68px;
  width: 332px;
  /* box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.26); */
  /* box-sizing: border-box; */
}

#event-type-dropdown .dropdown-alt .btn.dropdown-toggle {
  margin: 0;
  border-radius: 16px;
  height: 50px;
  border: 1px solid #ffffff;
}

#event-type-dropdown .dropdown-alt .btn.dropdown-toggle:focus {
  box-shadow: none;
}

#event-type-dropdown .dropdown-alt .btn.dropdown-toggle.show {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #304ea2;
  border-bottom-width: 0;
  transition: none;
}

#event-type-dropdown .dropdown-alt .dropdown-menu {
  margin-top: -2px !important;
  border: 1px solid #304ea2;
  border-top-width: 0;
}

#tool-progress {
  position: absolute;
  top: 100px;
  left: 10px;
  right: 10px;
}

#tool-progress .label {
  text-align: center;
  color: #304ea2;
  font-family: "Teko-Light";
  font-size: 18px;
}

#tool-progress .progress-bar {
  background-color: #304ea2;
}

#map-tools {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 78px;
  border-radius: 0;
  z-index: 8;
  width: 332px;
  box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.26);
  box-sizing: border-box;
  transition: left 0.15s;
  transition: width 0.15s;
}

#map-tools.menu-closed {
  /* left: -332px; */
  transition: left 0.15s;
  transition: width 0.15s;
}

#map-tools .header .title .icon {
  font-size: 10px;
  margin-right: 17px;
}

/* #map-tools .header .toggle-map-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  background-color: rgba(67, 123, 190, 0.4);
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  padding: 3px 0;
  margin-bottom: 0;
}

#map-tools .header .toggle-map-tools:hover {
  cursor: pointer;
}

#map-tools .header .toggle-map-tools .icon {
  color: #304ea2;
  font-size: 18px;
  font-weight: bold;
} */

/* #map-modules {
  margin-right: 28px;
} */

#map-modules .btn.dropdown-toggle,
#vehicle-role-filter .btn.dropdown-toggle {
  height: 36px;
  margin-bottom: 0;
}

#filter-button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  margin-left: 7px;
  cursor: pointer;
  padding: 5px;
  background-color: #ffffff;
  color: #304ea2;
}

#filter-button.active {
  background-color: #304ea2;
  color: #ffffff;
}

/* .selected-filters .badge {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.selected-filters .badge button {
  background: none;
  border: none;
  color: #ffffff;
  opacity: 0.65;
  margin: 0;
  padding: 1px 2px 0px 0px;
}

.selected-filters .badge button:hover {
  cursor: pointer;
  opacity: 1;
}

.selected-filters .badge button .icon {
  font-size: 16px;
} */

#vehicle-role-filter .btn.dropdown-toggle .label-wrapper {
  flex: 1;
  min-width: 0;
}

#vehicle-role-filter .btn.dropdown-toggle .label-wrapper .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#vehicle-role-filter .dropdown-menu .filters {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

#vehicle-role-filter .dropdown-menu .filters .btn {
  width: initial;
  background-color: #ffffff;
  color: #437bbe;
  border: 1px solid #437bbe;
  font-size: 14px;
  height: 35px;
  padding: 0 13px;
  margin: 3px;
}

#vehicle-role-filter .dropdown-menu .filters .btn.active {
  background-color: #304ea2;
  color: #ffffff;
  border: 1px solid #304ea2;
}
.live-vehicles-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 23px 15px 23px;
  box-sizing: border-box;
}

.live-vehicles-container #live-vehicle-header,
.live-vehicles-container .search,
.live-vehicles-container #refresh-vehicles-button {
  flex-shrink: 0;
}

.vehicle-list {
  overflow-y: scroll;
  flex: 1;
  margin-top: 10px;
}

.vehicle-list .vehicle {
  /* height: 90px; */
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1px solid rgba(34, 31, 32, 0.2);
  border-radius: 10px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.vehicle-list .vehicle:hover {
  cursor: pointer;
  background-color: rgba(67, 123, 190, 0.2);
}

.vehicle-list .vehicle.selected {
  background-color: rgba(67, 123, 190, 0.2);
  border-color: rgba(67, 123, 190, 0);
}

.vehicle-list .vehicle.selected:hover {
  background-color: rgba(67, 123, 190, 0.08);
  border-color: rgba(67, 123, 190, 0.08);
}

.vehicle-list .vehicle.active {
  background-color: #437bbe;
  border-color: #437bbe;
}

.vehicle-list .vehicle.filtered {
  display: none;
}

.vehicle-list .vehicle .name {
  font-family: Arial;
  font-size: 18px;
  color: black;
  flex: 1;
}

.vehicle-list .vehicle .assignment {
  font-family: Arial;
  font-size: 14px;
  color: black;
}

.live-vehicle-header-text {
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

#live-vehicle-header {
  margin-bottom: 10px;
}

.vehicle-list .vehicle .last-update {
  font-family: Arial;
  font-size: 13px;
  line-height: 15px;
  color: #221f20;
  opacity: 0.4;
}

.vehicle-list .vehicle .make-model-year {
  font-family: Arial;
  font-size: 16px;
  color: #304ea2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vehicle-list .vehicle.active .name,
.vehicle-list .vehicle.active .assignment,
.vehicle-list .vehicle.active .last-update,
.vehicle-list .vehicle.active .make-model-year,
.vehicle-list .vehicle.active .status,
.vehicle-list .vehicle.active .category,
.vehicle-list .vehicle.active .driver {
  color: #ffffff;
}

.vehicle-list .vehicle .status,
.vehicle-list .vehicle.active .status,
.vehicle-list .vehicle .assignment,
.vehicle-list .vehicle.active .assignment,
.vehicle-list .vehicle.active .category {
  flex-basis: 100%;
}

.vehicle-list .vehicle.active .category.mismatch {
  /* color: #ad2a24; */
  color: #ff8f8a;
}

.vehicle-list .vehicle .break {
  flex-basis: 100%;
  height: 0;
}

.vehicle-list .vehicle .replay {
  position: absolute;
  top: -1px;
  right: -74px;
  bottom: -1px;
  width: 70px;
  background-color: #437bbe;
  color: rgba(255, 255, 255, 0.7);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid rgba(34, 31, 32, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}

.vehicle-list .vehicle .replay.is-replay {
  background-color: #437bbe;
}

/* .vehicle-list .vehicle .replay.is-play {
  background-color: #21bb2b;
}

.vehicle-list .vehicle .replay.is-stop {
  background-color: #ad2a24;
} */

.vehicle-list .vehicle .replay.active {
  right: -1px;
  transition: all 0.2s;
}

.vehicle-list .vehicle .replay.active:hover {
  cursor: pointer;
  color: #ffffff;
}

.vehicle-list .vehicle .replay .icon {
  font-size: 30px;
}

.replay-dropdown .btn-replay,
.centerline-dropdown .btn-historical {
  background-color: #ffffff;
  border: 1px solid rgba(67, 123, 190, 0.2);
  height: 36px;
  padding: 0;
  width: 100%;
  color: #304ea2;
  font-size: 16px;
  font-family: "Teko-Medium";
  border-radius: 10px;
  position: relative;
}

.replay-dropdown .btn-replay::after,
.centerline-dropdown .btn-historical::after {
  display: none;
}

.replay-dropdown .btn-replay.active,
.centerline-dropdown .btn-historical.active {
  background-color: rgba(67, 123, 190, 0.2);
}

.replay-dropdown .btn-replay .icon,
.centerline-dropdown .btn-historical .icon {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 15px;
  color: #ad2a24;
  display: none;
}

.replay-dropdown .dropdown-menu.form,
.historical-dropdown .dropdown-menu.form,
.centerline-dropdown .dropdown-menu.form {
  width: 286px;
  padding: 22px;
}

.historical-vehicle-search,
.replay-vehicle-search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.historical-vehicle-search .filter-buttons,
.replay-vehicle-search .filter-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
}

.historical-vehicle-search .historical-dropdown,
.replay-vehicle-search .replay-dropdown,
#historical-fetch-button,
#passes-fetch-button {
  flex: 1;
  margin: 0 8px;
}

.historical-vehicle-search .btn,
.replay-vehicle-search .btn,
.adv-manual-update-controls .btn,
.passes-search .btn,
#manual-update-save-button,
#paths-fetch-button,
#draw-extent,
#draw-extent-manual,
#draw-extent-manual-advanced {
  background-color: #ffffff;
  border: 1px solid rgba(67, 123, 190, 0.2);
  height: 36px;
  padding: 0;
  color: #304ea2;
  font-size: 16px;
  font-family: "Teko-Medium";
  border-radius: 10px;
  position: relative;
  width: 100%;
}

.historical-vehicle-search .btn,
#paths-fetch-button,
.adv-manual-update-controls .btn,
.passes-search .btn,
#manual-update-save-button {
  background-color: #304ea2;
  color: #ffffff;
}

#draw-extent.active,
#draw-extent-manual.active,
#draw-extent-manual-advanced.active {
  background-color: rgba(216, 227, 240, 1);
}

#draw-extent {
  margin: 0;
}

.historical-vehicle-search .btn::after,
.replay-vehicle-search .btn::after,
.passes-search .btn::after {
  display: none;
}

.historical-vehicle-search .btn.active,
.replay-vehicle-search .btn.active,
.passes-search .btn.active {
  background-color: rgba(67, 123, 190, 0.2);
}

/*** menu ***/
.menu-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* top: 25px; */
  /* bottom: 25px; */
  /* left: 25px; */
  width: 78px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 4px 26px rgb(0 0 0 / 26%);
  /* border-radius: 30px; */
  padding: 30px 0;
  align-items: center;
  box-sizing: border-box;
  background-color: #304ea2 !important;
  z-index: 10;
}

.menu-control a {
  width: 100%;
  height: 60px;
  padding: 14px 0;
  justify-content: center;
  display: flex;
  text-decoration: none;
}

.menu-control a.selected {
  background: linear-gradient(270deg, #7b8bc1 50%, rgba(55, 78, 155, 1) 100%);
}

.menu-control a .icon {
  color: #ffffff;
  font-size: 32px;
}

.menu-control a.menu-toggle {
  margin-top: auto;
}

.menu-control a.menu-toggle .icon {
  background-color: #437bbe;
  border-radius: 6px;
  transition: transform 0.15s;
  transform-style: preserve-3d;
}

.menu-control a.menu-toggle.menu-closed .icon {
  transition: transform 0.15s;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

.custom-tooltip .tooltip-inner {
  opacity: 1;
  font-size: 14px;
  padding: 5px 15px;
}

#animator {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 33px;
  background-color: #ffffff;
  padding: 5px 10px;
  box-shadow: 0px 4px 26px rgb(0 0 0 / 26%);
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
}

#animator button:disabled {
  color: #adb5bd;
}

#animator button {
  border: none;
  padding: 0px 5px;
  color: #304ea2;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 0 2px;
}

#animator button.clear {
  padding: 0px 10px;
}

#results-table {
  position: absolute;
  right: 54px;
  bottom: 0px;
  /* left: 483px; */
  left: 440px;
  height: 300px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 100;
  transition: bottom 0.3s;
  transition: left 0.15s;
}

/* #results-table.menu-closed {
  left: 108px;
  transition: left 0.15s;
} */

#results-table.closed {
  bottom: -300px;
}

#results-table table tr.selected td {
  background-color: #1e90ff;
  color: #ffffff;
}

#results-table table thead tr th,
#vehicle-inventory table thead tr th,
#user-management table thead tr th {
  position: relative;
  cursor: pointer;
  padding-left: 12px;
}

#vehicle-inventory table thead tr th:first-child {
  padding-left: 0;
}

#results-table table thead tr th .sort-up,
#results-table table thead tr th .sort-down,
#vehicle-inventory table thead tr th .sort-up,
#vehicle-inventory table thead tr th .sort-down,
#user-management table thead tr th .sort-up,
#user-management table thead tr th .sort-down {
  position: absolute;
  left: -9px;
  color: rgba(67, 123, 190, 0.2);
}

#results-table table thead tr th .sort-up.active,
#results-table table thead tr th .sort-down.active,
#vehicle-inventory table thead tr th .sort-up.active,
#vehicle-inventory table thead tr th .sort-down.active,
#user-management table thead tr th .sort-up.active,
#user-management table thead tr th .sort-down.active {
  color: #304ea2 !important;
}

#results-table table thead tr th .sort-up,
#vehicle-inventory table thead tr th .sort-up,
#user-management table thead tr th .sort-up {
  top: 9px;
}

#results-table table thead tr th .sort-down,
#vehicle-inventory table thead tr th .sort-down,
#user-management table thead tr th .sort-down {
  bottom: 9px;
}

#results-table table tbody tr:not(.selected):hover td {
  background-color: rgba(216, 227, 240, 1);
}

#results-table .toggle {
  position: absolute;
  height: 30px;
  /* width: 40px; */
  background-color: #fff;
  top: -30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 5px 7px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
}

#manual-updates-advanced .list-group.categories-list,
#manual-updates-advanced .list-group.routes-list {
  position: absolute;
  top: 385px;
  right: 23px;
  bottom: 75px;
  left: 23px;
  overflow-y: auto;
}

#manual-updates-advanced .list-group.routes-list {
  top: 307px;
}

#manual-updates-advanced .list-group.responsibilities-list {
  position: absolute;
  top: 233px;
  right: 23px;
  bottom: 75px;
  left: 23px;
  overflow-y: auto;
}

#manual-updates-advanced .list-group .list-group-item {
  color: #304ea2;
}

#manual-updates-advanced .list-group .list-group-item.active {
  background-color: #437bbe;
  color: #ffffff;
}

.adv-manual-update-controls {
  position: absolute;
  bottom: 0;
  left: 23px;
  right: 23px;
}

/*** dashboard ***/
.dashboard-info-bar {
  position: absolute;
  top: 25px;
  right: 25px;
  left: 128px;
  height: 83px;
  background-color: #437bbe;
  border-radius: 16px;
  display: flex;
  padding: 20px;
  justify-content: space-evenly;
  align-items: center;
}

.dashboard-info-bar .info {
  display: flex;
  flex-direction: column;
}

.dashboard-info-bar .info .title {
  color: #ffffff;
  font-size: 14px;
}

.dashboard-info-bar .info .value {
  color: #ffffff;
  font-size: 24px;
  font-family: "Teko-Light";
}

#donut-chart {
  width: 150px;
  height: 150px;
}

#dashboard-management {
  position: absolute;
  top: 207px;
  right: 25px;
  bottom: 25px;
  left: 128px;
  overflow-y: auto;
}

#dashboard-management .content-container {
  margin-bottom: 1.5rem;
}

#dashboard-management .content-container.tall {
  height: 400px;
}

#dashboard-management .content-container.medium {
  height: 254px;
}

#dashboard-management .content-container.short {
  height: 189px;
  /* height: 127px; */
}

#dashboard-management .content-container .title-bar {
  height: 40px;
}

#dashboard-management table thead td {
  border-top: none;
}

#dashboard-management table tbody tr td {
  vertical-align: middle;
}

#dashboard-event-dropdown {
  position: absolute;
  top: 132px;
  left: 128px;
  width: 332px;
  /* box-shadow: 0px 4px 26px rgb(0 0 0 / 26%); */
  box-shadow: 0px 3px 40px rgb(40 40 40 / 6%);
}

#dashboard-event-dropdown .dropdown-alt .btn.dropdown-toggle {
  margin: 0;
  border-radius: 16px;
  height: 50px;
  /* border: 1px solid #ffffff; */
  border: 0.5px solid #304ea2;
}

#dashboard-filters {
  position: absolute;
  top: 132px;
  right: 25px;
  left: 485px;
  height: 50px;
  display: flex;
  align-items: center;
  border-radius: 16px;
}

#weather-filters {
  display: flex;
  align-items: center;
  margin: 14px 0 24px 0;
}

#dashboard-filters .btn,
#weather-filters .btn {
  margin-bottom: 0;
  margin-left: 4px;
  margin-right: 4px;
  padding: 14px 22px;
  color: #304ea2;
  background: #ffffff;
  border: 0.5px solid #304ea2;
  border-radius: 16px;
  height: 50px;
  box-shadow: 0px 3px 40px rgb(40 40 40 / 6%);
}

#weather-filters .btn {
  width: 100px;
  height: 36px;
  padding: 5px;
  border-radius: 10px;
  font-family: "Teko-Light";
  font-size: 18px;
}

#dashboard-filters .btn-check:checked+.btn,
#weather-filters .btn-check:checked+.btn {
  background: rgba(67, 123, 190, 0.2) !important;
}

/*** account management ***/
#account-management-menu {
  position: absolute;
  top: 25px;
  right: 25px;
  left: 142px;
  height: 50px;
  background-color: rgba(67, 123, 190, 0.2);
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#account-management-menu .nav.nav-pills .nav-link {
  width: 240px;
  border-radius: 14px;
  text-align: center;
  font-size: 18px;
  font-family: "Teko-Medium";
  color: #304ea2;
}

#account-management-menu .nav.nav-pills .nav-link.active {
  color: #ffffff;
  background-color: #304ea2;
}

#account-management {
  position: absolute;
  top: 100px;
  left: 142px;
  width: 800px;
  flex-direction: row;
  padding: 35px;
}

#account-management .update-form {
  width: 330px;
}

#account-management .divider-vertical {
  margin-left: 35px;
  margin-right: 35px;
}

#user-management {
  position: absolute;
  top: 100px;
  right: 25px;
  bottom: 25px;
  left: 142px;
  padding: 10px 23px 23px;
}

#user-management .content .table-header {
  top: 50px;
}

#user-management .content .table-body {
  top: 100px;
}

/* Sized to fit the short accounts header. The default button style is full
   width with a bottom margin, which pushes them out of it. */
#add-user-button,
#export-users-button {
  padding: 0px 20px;
  margin: 0;
  height: 36px;
}

/* Centers the icon next to the label. */
#export-users-button {
  display: inline-flex;
  align-items: center;
}

#profile-management {
  position: absolute;
  top: 100px;
  right: 25px;
  bottom: 25px;
  left: 142px;
  padding: 10px 23px 23px;
}

thead {
  display: table-header-group;
}

tbody {
  display: table-row-group;
}

tfoot {
  display: table-footer-group;
}

tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

td {
  page-break-inside: avoid;
  page-break-after: auto;
}

th {
  page-break-inside: avoid;
  page-break-after: auto;
}

@media print {

  .navbar,
  #menu,
  #report-configure,
  .mapboxgl-control-container,
  #report-output .title-bar {
    display: none !important;
  }

  #report-output .row-count {
    margin: 20px 0;
  }

  #report-map {
    margin-top: 0;
    margin-bottom: 40px;
  }

  .main-container {
    overflow: visible;
  }

  #report-output {
    position: static;
    box-shadow: none;
    border-radius: 0;
  }
}

#line-chart-tooltip {
  background-color: #ffffff;
  border: 1px solid #304ea2;
  padding: 10px;
  border-radius: 6px;
  z-index: 10;
}

#line-chart-tooltip label.datetime {
  font-size: 12px;
  font-weight: bold;
}

#line-chart-tooltip label.value {
  font-size: 12px;
}

.weather-forecast .hourly,
.weather-forecast .daily {
  display: flex;
  justify-content: space-between;
}

.weather-forecast .period {
  width: 150px;
  margin: 0 25px;
  display: flex;
  flex-direction: column;
}

.weather-forecast .period label {
  font-size: 14px;
}

.weather-forecast .period .time {
  font-weight: bold;
}

.weather-forecast .period .desc {
  font-size: 18px;
}

.dashboard-vehicle-table tr td.gps .icon {
  color: rgba(216, 227, 240, 1);
  margin-top: 5px;
}

.dashboard-vehicle-table tr td {
  color: rgba(116, 127, 140, 1);
}

.dashboard-vehicle-table tr.active td.gps .icon {
  color: #304ea2;
}

.dashboard-vehicle-table tr.active td {
  color: #221f20;
}

.dashboard-vehicle-dropdown {
  border: none !important;
}

.dashboard-vehicle-dropdown .btn {
  padding: 0 !important;
}

.dashboard-vehicle-dropdown .btn:hover {
  background-color: rgba(216, 227, 240, 1) !important;
  color: #304ea2 !important;
}

.dashboard-vehicle-dropdown .dropdown-toggle::before {
  top: 13px !important;
  border-top-width: 5px !important;
  border-right-width: 5px !important;
  border-left-width: 5px !important;
}

.dashboard-vehicle-dropdown .dropdown-toggle::after {
  border: none !important;
}

#address-locator {
  position: absolute;
  top: 26px;
  left: 510px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 4px 26px rgb(0 0 0 / 26%);
  z-index: 10;
  transition: left 0.15s;
}

#address-locator.menu-closed {
  /* left: 178px; */
  transition: left 0.15s;
}

#address-locator .wrapper {
  height: 49px;
  width: 270px;
  display: flex;
  align-items: center;
}

#address-locator .wrapper input {
  width: 100%;
  height: 100%;
  padding-left: 40px;
  padding-right: 40px;
  border: none;
  border-radius: 16px;
}

#address-locator .wrapper .icon {
  position: absolute;
  left: 10px;
}

#address-locator .wrapper .clear {
  position: absolute;
  right: 10px;
  display: none;
  cursor: pointer;
}

#address-locator .results .list-group-item {
  padding: 5px 15px;
  width: 270px;
}

#address-locator .results .list-group-item:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

#address-locator .results .list-group-item:hover {
  background-color: #304ea2;
  color: #ffffff;
  cursor: pointer;
}

#map-filters {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 78px;
  width: 332px;
  z-index: 9;
  transition: left 0.15s;
}

#map-filters.closed {
  left: -332px;
  transition: left 0.15s;
}

#map-filters .header .btn-close {
  position: absolute;
  top: 14px;
  right: 10px;
}

#map-filters .footer .btn-group {
  border: 2px solid rgba(216, 227, 240, 1);
  border-radius: 25px;
}

#map-filters .footer .btn-group .btn {
  background-color: #f8f9fa;
  color: #c5c5c5;
  font-weight: bold;
}

#map-filters .footer .btn-group .btn.active {
  color: #304ea2;
}

#map-filters .footer .btn-group .btn:first-of-type {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-right: 1px solid rgba(216, 227, 240, 1);
}

#map-filters .footer .btn-group .btn:last-of-type {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-left: 1px solid rgba(216, 227, 240, 1);
}

#vehicle-search .wrapper .icon {
  position: absolute;
  top: 8px;
  left: 3px;
}

#vehicle-search .wrapper .clear {
  position: absolute;
  top: 8px;
  right: 3px;
  cursor: pointer;
  display: none;
}

#vehicle-search .wrapper input {
  border: none;
  border-bottom: 1px solid rgba(34, 31, 32, 0.3);
  display: block;
  height: 40px;
  box-sizing: border-box;
  width: 100%;
  padding: 1px 30px 1px 30px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

#vehicle-search .wrapper input:focus-visible {
  outline: none;
}

#vehicle-search .results {
  position: absolute;
  right: 0;
  left: 0;
}

#vehicle-search .results .list-group-item {
  display: none;
  border-radius: 0;
}

#vehicle-search .results .list-group-item:first-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#vehicle-search .selected-vehicles .badge {
  display: flex;
  align-items: center;
  font-size: 12px;
}

#vehicle-search .selected-vehicles .badge button {
  background: none;
  border: none;
  color: #ffffff;
  opacity: 0.65;
  margin: 0;
  padding: 1px 2px 0px 0px;
}

#vehicle-search .selected-vehicles .badge button:hover {
  cursor: pointer;
  opacity: 1;
}

#vehicle-search .selected-vehicles .badge button .icon {
  font-size: 16px;
}

/*** rounds tool ***/
.rounds-new-event-btn {
  height: 30px;
  width: 120px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  background-color: rgb(11, 49, 113);
  color: white;
  border: none;
}

#rounds-header h5 {
  font-weight: bold;
  font-size: 25px;
  margin: 0 auto;
  position: absolute;
  left: 38%;
}

#rounds-header .table-search {
  margin-left: 15px;
  height: 36px;
  padding: 5px;
  color: #304ea2;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
}

.rounds-route-text {
  font-weight: bold;
}

.brass-tag-badge {
  width: 53px;
  height: 25px;
  border-radius: 6px;
  background-color: rgb(195, 216, 246);
  color: rgb(11, 49, 113);
  font-size: 13px;
  margin-right: 5px;
  text-align: center;
  font-weight: 200;
  padding-top: 6px;
}

.brass-tag-badge.plow {
  background-color: #304ea2;
  color: #ffffff;
}

.brass-tag-badge.plow-no-sensor {
  background-color: #636363;
  color: #ffffff;
}

.brass-tag-badge.no-avl {
  background-color: #ff0000;
  color: #ffffff;
}

.brass-tag-badge.mower {
  background-color: #0de117;
}

.brass-tag-badge.sweeper {
  background-color: #17ba9f;
}

.rounds-action-icon {
  height: 25px;
  width: 25px;
  font-size: 20px;
}

.rounds-action-icon:hover {
  cursor: pointer;
}

.status-label {
  padding: 6px 9px 6px 9px;
  border-radius: 6px;
}

.route-row-arrow-icon {
  margin-right: 10px;
  margin-top: 10px;
}

.status-in-progress {
  background-color: #EAEB36;
  color: #000 !important;
}

.status-assigned {
  background-color: #CEA262;
  color: #28211e !important;
}

.status-not-started {
  background-color: rgb(210, 210, 210);
  color: rgb(86, 85, 85) !important;
}

.status-complete {
  background-color: rgba(226, 185, 244);
  color: rgb(51, 13, 137);
}

.status-serviced {
  background-color: rgba(178, 242, 214);
  color: rgb(0, 74, 72);
}

.status-paused {
  background-color: rgba(255, 128, 150);
  color: rgb(104, 30, 29);
}


.greyed-icon {
  opacity: 0.4;
}

#rounds-table-body {
  position: relative;
  z-index: 100;
}

#rounds-table-body td {
  vertical-align: middle;
  height: 50px;
}

#rounds-table-body td .fstElement {
  margin-bottom: 0 !important;
}

.rounds-page-text {
  margin-right: 10px;
}

.rounds-page-arrow {
  border: none;
  background-color: transparent;
}

.rounds-table-pagination {
  z-index: 0;
  position: absolute;
  bottom: 20px;
  margin-left: 320px;
  margin-top: 100px;
}

.strikethrough {
  opacity: 0.5;
  z-index: 1;
}

.dead-space:hover {
  cursor: default !important;
}

#round-history-main-table td {
  border: none;
  border-bottom: 1px solid rgb(206, 206, 209);
}

.round-history-table {
  width: 850px !important;
}

#round-table-body {
  overflow: hidden;
}

.scroll-icon {
  font-size: 27px;
}

.scroll-icon:hover {
  cursor: pointer;
}

.actions-td {
  position: relative;
}

.actions-td span:hover {
  cursor: pointer;
}

.book-icon-container:hover {
  cursor: pointer;
}

.material-icons-outlined:hover {
  cursor: pointer;
}

.round-table-each-row {
  background-color: rgb(212, 212, 215);
}

.strikethrough td {
  position: relative;
  color: rgba(0, 0, 0, 0.5);

}

.strikethrough td::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: red;
  transform: translateY(-50%);
}

.round-history-row {
  border-bottom: none;
}

.round-history-row td {
  border: none;
}

.round-table-delete-line {
  width: 20px;
  height: 20px;
  background-color: red;
}

#rounds-dispatch-log-modal .modal-title {
  text-align: center;
}

#rounds-dispatch-log-modal .legend {
  margin: 0 5em 2em 5em;
}

#rounds-dispatch-log-modal .entry-row .badge {
  font-size: 1em;
  padding: 0.5em 0.8em;
}

#rounds-dispatch-log-modal .btn.add-entry {
  margin: 2em auto;
  display: block;
  padding: 5px 14px;
}

#rounds-dispatch-log-modal .btn.add-entry i {
  vertical-align: middle;
  margin: -3px 1px 0 -4px;
  font-size: 20px;
}

.floating-box {
  position: fixed;
  bottom: 20px;
  left: 80px;
  width: 850px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1050;
}

.floating-box-header {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.floating-box-header h5 {
  margin: 0;
}

.floating-box-header p {
  font-size: 0.9em;
  color: #666;
  margin: 0;
}

.floating-box-body {
  padding: 10px;
  max-height: 400px;
  overflow-y: auto;
}

#route-passes-box {
  background-color: #253237;
  color: #fff;
}

#route-passes-box .table {
  color: #fff;
}

.multipleSelect {
  width: 100px;
  height: 30px;
}

#route-passes-box .close-btn {
  background: none;
  border: none;
  font-size: 2em;
  cursor: pointer;
  color: #fff;
}

#route-passes-box .table thead th {
  font-weight: bold;
  font-size: 0.9em;
}

#route-passes-box .table tbody td {
  vertical-align: middle;
}

#route-passes-box .badge {
  font-size: 0.9em;
  padding: 5px 10px;
  margin-right: 5px;
}

.hidden {
  display: none !important;
}

.first-history-row {
  background-color: rgb(255, 248, 215) !important;

  td {
    background-color: rgb(255, 248, 215) !important;
  }
}

.delete-confirmation {
  background-color: rgba(0, 0, 0, 0.889);
  border-radius: 8px;
  color: white;
  position: absolute;
  width: 150px;
  right: 40px;
  top: 30px;
  padding: 2px 4px 2px 4px;
  z-index: 100;
}

.yes-delete-option {
  margin-right: 10px;
  margin-left: 15px;
  color: green;
}

.no-delete-option {
  color: red;
}

.yes-delete-option:hover,
.no-delete-option:hover {
  text-decoration: underline;
}

@media screen and (max-height: 830px) {
  .rounds-table-pagination {
    display: none !important;
  }
}

.status-error-message {
  background-color: rgba(0, 0, 0, 0.833);
  color: white;
  border-radius: 8px;
  padding: 3px;
  margin-left: 6px;

  p {
    margin: 0;
  }
}

#refresh-rounds-button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  margin-left: 7px;
  cursor: pointer;
  padding: 5px;
  background-color: #ffffff;
  color: #304ea2;
}

#refresh-rounds-button .icon.refreshing {
  display: inline-block;
  animation: spin 1s linear infinite;
}

#refresh-vehicles-button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  cursor: pointer;
  padding: 5px;
  background-color: #ffffff;
  color: #304ea2;
  margin-top: 10px;
}

#refresh-vehicles-button .icon.refreshing {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.route-chip.draggable.dragging {
  opacity: 0.6;
}

.route-chip.in-progress {

  cursor: default;
}

.delete-material-button {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  padding: 11px;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: red;
}

.popover-menu {
  position: absolute;
  top: 100%;
  right: 0; /* align to right edge of title bar */
  margin-top: 6px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  padding: 6px;
  z-index: 1000;
  min-width: 160px;
}

.popover-menu .menu-item {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
}

.popover-menu .menu-item:hover {
  background: #f3f4f6;
}

/* Route Progress Container */
.route-progress-container {
  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
  color: #212529;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.route-progress-header {
  font-size: 16px;
  margin-bottom: 15px;
  border-bottom: 2px solid #0d6efd;
  padding-bottom: 10px;
  color: #212529;
}

.progress-metric {
  background: #ffffff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.progress-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.progress-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 8px;
}

.visited-miles,
.serviced-miles {
  color: #0d6efd;
}

.coverage-badge {
  font-size: 14px;
  padding: 4px 8px;
  line-height: 1;
}

/* Custom progress bar styling */
.route-progress-container .progress {
  background-color: #e9ecef;
  height: 24px;
}

.route-progress-container .progress-bar {
  background-color: #0d6efd !important;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
}

/* Loading state */
.route-progress-loading {
  text-align: center;
  padding: 20px;
  color: #6c757d;
}

/* Row styling */
.route-progress-row td {
  background-color: #f8f9fa !important;
  border: none !important;
}

/* Servicing metrics layout */
.servicing-metrics {
  margin-top: 8px;
}

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

.metric-label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.metric-value {
  font-size: 20px;
  font-weight: 600;
  color: #0d6efd;
}

/* Staging Environment Warning Banner */
.staging-warning-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(220, 53, 69, 0.85);
  color: white;
  text-align: center;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.staging-warning-banner .material-icons-round {
  vertical-align: middle;
  margin-right: 8px;
  font-size: 18px;
}

.staging-warning-banner .staging-prod-link {
  color: white;
  text-decoration: underline;
  margin-left: 16px;
  font-weight: 700;
}

.staging-warning-banner .staging-prod-link:hover {
  color: #ffe0e0;
}

/* Help center

   Positioned like the other modules: clear of the fixed menu on the left, inset
   from the edges, and scrolling inside itself rather than scrolling the page.
   The two columns scroll independently so the contents list stays put while a
   long topic is being read. */

#help-center {
  position: absolute;
  top: 25px;
  right: 25px;
  bottom: 25px;
  left: 142px;
  flex-direction: row;
  overflow: hidden;
}

.help-contents {
  flex: 0 0 260px;
  overflow-y: auto;
  padding: 28px 8px 28px 28px;
  border-right: 1px solid #e9ecef;
  box-sizing: border-box;
}

.help-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.help-subtitle {
  color: #6c757d;
  font-size: 14px;
  margin: 0 0 20px;
}

.help-contents-section h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
  margin: 18px 0 6px;
}

.help-contents-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-contents-section a {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  color: #212529;
  text-decoration: none;
}

.help-contents-section a:hover,
.help-contents-section a:focus {
  background-color: #f1f3f5;
}

.help-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 28px 32px 64px;
  box-sizing: border-box;
}

/* Caps the reading column at a comfortable line length. Left aligned rather than
   centered: centering opens a gap between the contents list and the text it
   belongs to, which reads as a layout fault rather than as breathing room. */
.help-body-inner {
  max-width: 820px;
}

.help-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
  margin: 32px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e9ecef;
}

.help-section:first-child .help-section-title {
  margin-top: 0;
}

.help-topic {
  margin: 0 0 40px;
  /* Leaves room under the sticky top of the scrolling column when a contextual
     link jumps straight to a topic. */
  scroll-margin-top: 16px;
}

.help-topic:target .help-topic-title {
  box-shadow: -12px 0 0 #f1f3f5;
  background-color: #f1f3f5;
}

.help-topic-title {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 0 10px;
}

.help-topic-body p {
  line-height: 1.6;
  margin: 0 0 12px;
}

.help-topic-body ul,
.help-topic-body ol {
  line-height: 1.6;
  margin: 0 0 12px;
  padding-left: 22px;
}

.help-figure {
  margin: 16px 0 20px;
}

.help-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  display: block;
}

.help-figure figcaption {
  font-size: 13px;
  color: #6c757d;
  margin-top: 6px;
}

/* Marks a screenshot of a screen with nothing in it yet, so a new customer can
   tell "nothing has happened" apart from "something is broken". */
.help-figure-tag {
  display: inline-block;
  background-color: #e7f1ff;
  color: #0b5ed7;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  font-weight: 600;
}

.help-related {
  font-size: 14px;
  color: #6c757d;
  margin-top: 12px;
}

.help-empty {
  color: #6c757d;
  padding: 40px 0;
}

/* Narrow screens: the contents list moves above the topics and the whole
   container scrolls as one column. */
@media (max-width: 900px) {
  #help-center {
    left: 103px;
    right: 12px;
    flex-direction: column;
    overflow-y: auto;
  }

  .help-contents {
    flex: 0 0 auto;
    width: 100%;
    overflow-y: visible;
    border-right: 0;
    border-bottom: 1px solid #e9ecef;
    padding: 20px;
  }

  .help-body {
    overflow-y: visible;
    padding: 20px 20px 48px;
  }
}

/* Holds the account menu against the right edge of the top bar. Kept as a group
   for whatever else lands here later - minitron puts its messages and
   notification icons in the same place, and the two headers are meant to merge.
   Help used to be here and is now the floating button; see help-widget.css. */
.navbar-account-group {
  gap: 4px;
}

/* Marks the topic being read in the contents list. */
.help-contents-section a.help-link-current {
  background-color: #e7f1ff;
  color: #0b5ed7;
  font-weight: 600;
}

/* Map keys drawn from the organization's own profile, so a topic can show the
   exact symbols and colors that city uses without anyone capturing a screenshot
   of a legend that goes stale when a color changes. */
.help-legend {
  list-style: none;
  padding: 12px 16px;
  margin: 0 0 16px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background-color: #fbfcfd;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.help-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.help-legend-icon {
  font-size: 20px;
  line-height: 1;
}

.help-legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: inline-block;
}

/* The action and role menus on table rows.
 *
 * Shown in the top layer (see modules/table-dropdowns.js), which is drawn above
 * the page and clipped by nothing. Position and width come from that script,
 * because a percentage width in the top layer is measured against the window.
 *
 * A plain white card, matching minitron's Dropdown component.
 *
 * The selectors carry .dropdown so they outrank the .dropdown .dropdown-menu
 * rules above, which are more specific than one class.
 */
.dropdown .table-menu[popover] {
  /* The browser centers a popover in the window and gives it its own border
     and padding. All of that has to be undone before ours applies. */
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 4px 0;
  overflow: visible;

  width: auto;
  min-width: 200px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.dropdown .table-menu[popover]:not(:popover-open) {
  display: none;
}

.dropdown .table-menu[popover]:popover-open {
  display: block;
}

.dropdown .table-menu .dropdown-item {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 8px 16px;
  border: 0;
  background-color: transparent;
  color: #374151;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown .table-menu .dropdown-item:hover {
  background-color: #f3f4f6;
  color: #111827;
  cursor: pointer;
}

.dropdown .table-menu .dropdown-item.active {
  background-color: #e7f1ff;
  color: #304ea2;
  font-weight: 600;
}

.dropdown .table-menu .dropdown-item.active small {
  color: #304ea2 !important;
}

.dropdown .table-menu .dropdown-item.disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.dropdown .table-menu .dropdown-item.disabled:hover {
  background-color: transparent;
}

.dropdown .table-menu .dropdown-item.text-danger {
  color: #dc3545;
}

.dropdown .table-menu .dropdown-item.text-danger:hover {
  background-color: #fce8ea;
  color: #bd2130;
}

/* The rounded last item belongs to the old panel, which had no padding of its
   own for the corners to sit inside. */
.dropdown .table-menu .li:last-of-type .dropdown-item {
  border-radius: 0;
}

.dropdown .table-menu .dropdown-divider {
  margin: 4px 0;
  border: 0;
  border-top: 1px solid #e5e7eb;
}

/*
 * The floating help button, its menu, and the guided walkthrough overlay.
 *
 * The numbers below are chosen against Bootstrap's own scale, where a dialog's
 * backdrop is 1050 and the dialog itself is 1055:
 *
 *   the button sits at 1040, above the page and its panels but below a dialog,
 *   so it goes quiet behind anything the reader has opened rather than being
 *   pressable through it
 *
 *   the walkthrough sits above everything, because a walkthrough covered by the
 *   thing it is explaining is worse than no walkthrough. Above the test-site
 *   banner too, which is 9999 and would otherwise cover a card near the top of
 *   the screen on staging - the one environment where somebody is most likely
 *   to be trying the walkthrough out
 */

.help-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/*
 * The map puts its own zoom and drawing controls in this same corner, and they
 * would sit underneath the button. Lifting the whole stack clears it, and only
 * where the button is actually drawn: a city help is not switched on for gets
 * its map controls left where they were.
 */
body:has(#help-widget) .mapboxgl-ctrl-bottom-right {
  padding-bottom: 72px;
}

.help-widget-button {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background-color: #2c3e50;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.help-widget-button:hover,
.help-widget-button:focus {
  background-color: #1a252f;
  transform: translateY(-1px);
}

.help-widget-button .material-icons-round {
  font-size: 28px;
}

.help-widget-open .help-widget-button .material-icons-round {
  /* The icon turns into a close mark while the menu is open, using the same
     glyph rotated rather than a second icon. */
  transform: rotate(45deg);
}

.help-widget-menu {
  margin-bottom: 12px;
  min-width: 260px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.help-widget-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  color: #2c3e50;
  text-decoration: none;
  cursor: pointer;
}

.help-widget-option + .help-widget-option {
  border-top: 1px solid #eceff1;
}

.help-widget-option:hover,
.help-widget-option:focus {
  background-color: #f4f6f8;
  color: #2c3e50;
}

.help-widget-option .material-icons-round {
  font-size: 22px;
  color: #607d8b;
}

.help-widget-option small {
  display: block;
  color: #78909c;
  font-size: 12px;
}

/* ------------------------------------------------ the first-visit offer */

.help-welcome {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 1040;
  width: 300px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.help-welcome-title {
  margin: 0 0 4px;
  font-weight: 600;
  color: #2c3e50;
}

.help-welcome-text {
  margin: 0 0 12px;
  font-size: 14px;
  color: #546e7a;
}

.help-welcome-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.help-welcome-controls button {
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

.help-welcome-no {
  background: none;
  color: #78909c;
}

.help-welcome-yes {
  background-color: #2c3e50;
  color: #fff;
}

/* ---------------------------------------------------- the walkthrough */

.help-tour {
  display: none;
}

.help-tour.help-tour-open {
  display: block;
}

/*
 * The dimmer is one enormous shadow cast outward from the highlighted control,
 * so there is a single element to move rather than four panels to keep lined up
 * with each other. It ignores the mouse: the reader can still use the page
 * underneath, which is the point of pointing at it.
 */
.help-tour-spot {
  position: fixed;
  z-index: 10000;
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 32, 0.55);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

/*
 * Centered until a step says otherwise. Without a starting position the card is
 * laid out at the foot of the document, which on a long page is off screen, and
 * a reader waiting for a slow panel would see nothing at all.
 */
.help-tour-card {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10001;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Used when a step has nothing to point at, and for the closing card. */
.help-tour-card-centered {
  transform: translate(-50%, -50%);
}

.help-tour-topic {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #90a4ae;
}

.help-tour-topic:empty {
  display: none;
}

.help-tour-text {
  margin: 0 0 14px;
  color: #37474f;
  line-height: 1.45;
}

.help-tour-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-tour-count {
  margin-right: auto;
  font-size: 12px;
  color: #90a4ae;
}

.help-tour-controls button {
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}

.help-tour-exit,
.help-tour-back {
  background: none;
  color: #78909c;
}

.help-tour-next {
  background-color: #2c3e50;
  color: #fff;
}

/*
 * None of this is part of the page.
 *
 * The old help link lived in the top bar, which is already hidden when
 * printing. The floating button is a child of the body, so without this it
 * would be printed onto the reports people hand to a council member.
 */
@media print {
  .help-widget,
  .help-welcome,
  .help-tour {
    display: none !important;
  }

  body:has(#help-widget) .mapboxgl-ctrl-bottom-right {
    padding-bottom: 0;
  }
}

/*
 * On a narrow screen the card is the whole width of the window and sits at the
 * bottom, out of the way of whatever is being highlighted above it.
 */
@media (max-width: 576px) {
  .help-tour-card {
    top: auto !important;
    bottom: 12px;
    left: 12px !important;
    right: 12px;
    width: auto;
  }

  .help-tour-card-centered {
    transform: none;
  }
}

/* #user-management .content .table-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
} */

#user-management .header {
  height: 32px !important;
}

#user-management .permissions-content,
#user-management .assignments-content {
  position: absolute;
  top: -10px;
  right: -450px;
  bottom: -20px;
  width: 400px;
  background-color: #ffffff;
  border: solid 1px rgba(67, 123, 190, 0.2);
  box-shadow: 0px 3px 40px rgba(40, 40, 40, 0.4);
  transition: right 0.25s linear;
}

#user-management .permissions-content.opened,
#user-management .assignments-content.opened {
  right: 0;
  transition: right 0.25s linear;
}

#root-permissions,
#root-assignments {
  position: absolute;
  top: 60px;
  right: 5px;
  bottom: 10px;
  left: 5px;
  overflow-y: scroll;
  /* margin-top: 5px;
  padding: 5px 0 10px 0; */
}

#root-permissions,
#root-permissions ul,
#root-assignments,
#root-assignments ul {
  list-style: none;
}

#root-permissions .checkbox .checkmark:after,
#root-assignments .checkbox .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-width: 0 2px 2px 0;
}

#root-permissions .checkbox input.indeterminate + .checkmark,
#root-assignments .checkbox input.indeterminate + .checkmark {
  background-color: rgba(67, 123, 190, 0.6);
  border-color: #304ea2;
}

/* general */

@font-face {
  font-family: "Teko-Bold";
  src: url(5087919e224ac0479efb.ttf);
}

@font-face {
  font-family: "Teko-Light";
  src: url(c869f8b6991660ce0a3c.ttf);
}

@font-face {
  font-family: "Teko-Medium";
  src: url(954d718a0614c77ea53a.ttf);
}

:root {
  --tag-main-color: dodgerblue;
  --tag-border-radius: 10px;
}

#logout-button {
  position: absolute;
  bottom: 20px;
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: #e51b24;
  color: #ffffff;
  font-weight: bold;
  font-size: 20px;
  padding: 5px 65px;
}

.driver-container {
  align-items: baseline;
  background-color: #00539b;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.driver-container img {
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 45px;
}

/* main {
  background-image: linear-gradient(hsl(213, 96%, 50%), hsl(213, 49%, 30%));
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  z-index: 1;
} */

/* main>section.driver-spacer {
  flex: 1
} */

/* span {
  font-size: 14px;
  font-weight: 300;
} */

.driver-spacer {
  flex: 1;
}

#map {
  -webkit-transition: 0.8s -webkit-filter linear;
  -moz-transition: 0.8s -moz-filter linear;
  -moz-transition: 0.8s filter linear;
  -ms-transition: 0.8s -ms-filter linear;
  -o-transition: 0.8s -o-filter linear;
  transition: 0.8s filter linear, 0.8s -webkit-filter linear;
}

#map-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9;
}

#exit-button {
  position: absolute;
  z-index: 10;
  font-weight: bold;
  font-size: 20px;
  padding: 5px 65px;
}

/* tag selector container */

.tag-selector h3 {
  color: white;
  /* font-weight: 600; */
  font-size: 1.8rem;
  text-align: center;
  padding: 1rem 0;
}

.tag-selector .btn {
  /* border-radius: var(--tag-border-radius); */
  border-radius: 0.375rem;
  /* color: var(--tag-main-color); */
  color: #00539b;
  /* font-family: monospace; */
  font-weight: 600;
  font-size: 1.6rem;
  /* letter-spacing: 0.3ch; */
  padding: 4px;
  width: 220px;
}

.tag-selector .btn-outline-light:not(:hover),
.tag-selector .btn-outline-light:not(:active),
.tag-selector .btn-outline-light:not(:focus) {
  background: whitesmoke;
  /* outline: solid 2px var(--tag-main-color) */
}

.tag-selector .vehicle-search {
  position: relative;
}

.tag-selector .vehicle-search .icon,
.tag-selector .vehicle-search .clear {
  font-size: 32px;
  position: absolute;
  top: 9px;
  color: #437bbe;
}

.tag-selector .vehicle-search .icon {
  left: 4px;
}

.tag-selector .vehicle-search .clear {
  right: 4px;
  display: none;
}

.tag-selector .vehicle-search input {
  /* border-radius: var(--tag-border-radius); */
  /* font-family: monospace; */
  font-size: 1.6rem;
  /* font-weight: 600; */
  height: 50px;
  /* text-align: center; */
  /* width: 220px; */
  padding: 5px 40px;
  /* margin: 0 auto 20px; */
}

/* .tag-selector input::placeholder {
  letter-spacing: 0.3ch;
} */

.tag-selector li {
  color: var(--tag-main-color);
  font-weight: 600;
  font-size: 1.6rem;
}

#tag-results {
  overflow-y: scroll;
  height: calc(100vh - 400px);
}

/**************************/

/* tracking toggle */

#tracking-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  padding: 10px;
  background: #ff5555;
  height: 66px;
  box-shadow: 0px 3px 40px rgba(40, 40, 40, 0.06);
  border-radius: 16px;
  transition: all 0.3s;
  z-index: 10;
}

#tracking-toggle:hover,
#tracking-toggle:focus,
#tracking-toggle:active {
  filter: brightness(1.2) saturate(0.8);
  cursor: pointer;
}

#tracking-toggle.tracking {
  background: #437bbe;
}

#tracking-toggle .icon {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tracking-toggle .toggle-label,
#tracking-toggle .switch-label {
  color: #ffffff;
  font-family: "Teko-Medium";
  font-size: 22px;
}

#tracking-toggle .switch .slider {
  background-color: #ffffff;
}

#tracking-toggle .switch .slider:before {
  background-color: #ff5555;
}

#tracking-toggle.tracking .switch .slider:before {
  background-color: #437bbe;
}

#tracking-status {
  position: absolute;
  top: 30px;
  right: 30px;
  left: 30px;
  height: 84px;
  background-color: #ffffff;
  box-shadow: 0px 3px 40px rgba(40, 40, 40, 0.06);
  border-radius: 16px;
  z-index: 10;
  border: 2px solid rgba(255, 85, 85, 0.8);
  padding: 20px;
}

#tracking-status.tracking {
  border: 1px solid #80e27e;
}

#tracking-status .status-icon {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #ff5555;
  outline: 3px solid rgba(255, 85, 85, 0.12);
}

#tracking-status.tracking .status-icon {
  background-color: #80e27e;
  outline: 3px solid rgba(128, 226, 126, 0.12);
}

#tracking-status .status-title {
  font-family: "Teko-Medium";
  font-size: 20px;
  color: #221f20;
  line-height: 16px;
}

#tracking-status .status-subtitle {
  font-family: "Teko-Light";
  font-size: 16px;
  color: #221f20;
}

#tracking-status .vehicle-name {
  font-family: "Teko-Medium";
  font-size: 26px;
}

#offline-status {
  position: absolute;
  z-index: 9;
  top: 30px;
  right: 30px;
  left: 30px;
  height: 84px;
  background-color: rgba(255, 85, 85, 0.8);
  box-shadow: 0px 3px 40px rgb(40 40 40 / 6%);
  border-radius: 16px;
  padding: 30px 0 0 0;
  transition: all 0.5s;
}

#offline-status.offline {
  top: 100px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  transition: all 0.5s;
}

#offline-status .status-title {
  font-family: "Teko-Medium";
  font-size: 20px;
  color: #221f20;
  line-height: 16px;
}

#offline-status .status-subtitle {
  font-family: "Teko-Light";
  font-size: 16px;
  color: #221f20;
}

#overview-toggle {
  position: absolute;
  top: 124px;
  left: 30px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #80e27e;
  box-shadow: 0px 3px 40px rgba(40, 40, 40, 0.06);
}

#overview-layer-toggle {
  
  display: none;
}

#overview-layer-toggle .toggle-container {
  position: absolute;
  right: 20px;
  bottom: 96px;
  left: 20px;
  height: 46px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 16px;
}

#overview-layer-toggle .overview-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: "Teko-Light";
  font-size: 22px;
  border: solid 1px #437bbe;
}

#overview-layer-toggle .overview-button:first-of-type{
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  margin-right: -1px;
}

#overview-layer-toggle .overview-button:last-of-type{
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  margin-left: -1;
}

#overview-layer-toggle .overview-button.active {
  font-family: "Teko-Medium";
  border: solid 3px #437bbe;
}

.mapboxgl-popup {
  max-width: 320px!important
}

.mapboxgl-popup-content {
  border-radius: 10px
}

.mapboxgl-popup-close-button {
  right: -15px;
  top: -15px;
  background: #304EA2;
  color: white;
  font-weight: 700;
  /* text-transform: capitalize; */
  border-radius: 50%;
  height: 30px;
  width: 30px;
  font-size: 30px;
  padding-bottom: 7px;
}

.mapboxgl-popup-close-button:hover {
  background: hsl(224, 54%, 61%);
}