/*!
* Planno Style v_dev
* Copyright 2023 Planno
*/
:root {
  --pl-yellow-color: #e6ae07;
  --pl-green-color: #198754;
  --pl-blue-color: #0020b3;
  --pl-yellow-rgb: 230, 174, 7;
  --pl-green-rgb: 25, 135, 84;
  --pl-blue-rgb: 0, 32, 179;
  --pl-dark-rgb: 52, 58, 64;
  --pl-primary: #f19220;
  --pl-primary-rgb: 241, 146, 32;
  --pl-primary-soft: #f4b669;
  --bs-body-font-size: 0.875rem !important;
  --bs-body-font-family: "Open Sans", var(--bs-font-sans-serif);
  --pl-nav-width: 180px;
  --pl-modal-width: 325px;
  --pl-query-width: 200px;
  --pl-streetview-width: 400px;
  --pl-streetview-height: calc(var(--pl-streetview-width) / 2);
  --pl-streetview-multiplier: 2;
  --pl-map-sub: 0px;
  --pl-map-width: calc(100vw - var(--pl-nav-width) - var(--pl-map-sub));
  --pl-save-width: 150px;
  --pl-sidebar-height: calc(100vh - 2rem);
  --pl-sidebar-height: calc(var(--vh, 1vh) * 100 - 2rem);
}
@media only screen and (max-width: 992px) {
  /* lg */
  :root {
    --pl-nav-width: 60px;
  }
}
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  overflow-y: hidden;
  /* display: flex; */
}
input {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
textarea {
  resize: none;
}
hr {
  margin: 0.5rem 0 0.25rem 0;
}
span.area-units {
  margin: 0 !important;
}
.icon-info {
  box-sizing: content-box;
  font-size: 0.875rem;
  position: absolute;
  margin: 0rem 1rem 0.125rem 0.125rem;
  right: 0;
}
.text-my-primary {
  color: var(--pl-primary);
}
.icon-info:hover {
  cursor: pointer;
  color: var(--pl-primary);
}
.btn:not(.dropdown-toggle) {
  background-color: var(--pl-primary-soft);
  border-color: var(--pl-primary-soft);
  color: #fff;
  font-weight: 500;
}
.btn:not(.dropdown-toggle,.btn-invert):hover,
.btn:not(.dropdown-toggle,.btn-invert):focus,
.btn:not(.dropdown-toggle,.btn-invert):active {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}
.btn:not(.dropdown-toggle,.btn-invert):focus,
.btn:not(.dropdown-toggle,.btn-invert):active {
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.5);
}
.btn.btn-light:not(.dropdown-toggle,.btn-invert) {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.btn.btn-invert {
  background-color: #e9ecef;
  border-color: transparent;
  color: var(--bs-gray-700);
}
.btn.btn-invert:hover {
  color: var(--pl-primary);
}
.btn.btn-light:not(.dropdown-toggle):hover,
.btn.btn-light:not(.dropdown-toggle):focus,
.btn.btn-light:not(.dropdown-toggle):active {
  background-color: var(--pl-primary-soft);
  border-color: var(--pl-primary-soft);
  color: #fff;
}
.form-group .btn.dropdown-toggle {
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border: 1px solid #ced4da;
  margin-left: -1px;
}
.btn.btn-outline {
  background-color: transparent;
  border-color: white;
  border-width: 2px;
  color: white;
  font-weight: 500;
}
.btn.btn-outline:hover,
.btn.btn-outline:focus,
.btn.btn-outline:active {
  background-color: white;
  border-color: white;
  color: var(--bs-gray-dark);
}
.form-control:focus {
  border-color: var(--pl-primary-soft);
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.5);
}
.form-check-input:focus {
  border-color: var(--pl-primary-soft);
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
/* --- IMG SIZES -- */
.img-20 {
  height: 20px;
}
.img-30 {
  height: 30px;
}
.img-40 {
  height: 40px;
}
.img-50 {
  height: 50px;
}
.img-60 {
  height: 60px;
}
.img-70 {
  height: 70px;
}
/* --- NAV BAR --- */
.navcol {
  width: var(--pl-nav-width);
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  padding: 0.5rem;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}
.navcol::-webkit-scrollbar {
  display: none;
}
.navcol-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
}
.navcol-brand img {
  height: 24px;
}
.navcol-brand .min {
  display: none;
}
.navcol-menu {
  width: 100%;
}
.menu-title {
  width: 100%;
  height: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  justify-content: center;
  color: white !important;
  font-size: 1rem;
  font-weight: 500;
  line-height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.12rem;
}
.menu-item {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
}
.menu-item.temp_high,
.menu-item:not(.disabled):hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.menu-item.disabled,
.menu-item.temp_disabled {
  opacity: 0.25;
  cursor: default !important;
}
.menu-item img {
  height: 18px;
}
.menu-item .menu-desc {
  color: white !important;
  font-size: 0.75rem;
  font-weight: 500;
  padding-left: 1rem;
  line-height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 20px;
  display: flex;
  align-items: center;
}
.menu-break {
  margin: 0.5rem 0;
  border-bottom: 1px solid var(--bs-gray);
}
@media only screen and (max-width: 992px) {
  /* lg */
  .menu-item .menu-desc,
  .menu-title .menu-hide {
    display: none;
  }
  .navcol-brand .max {
    display: none;
  }
  .navcol-brand .min {
    display: inline-block;
  }
}
/* --- LOGIN --- */
.slLogin,
.slWelcome {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: center;
}
.slLogin button,
.slWelcome button {
  width: 100%;
}
.slLoginWrap,
.slWelcomeWrap {
  width: 350px;
}
.login-brand {
  text-align: center;
}
.login-brand img {
  height: 40px;
}
.auxbar {
  font-size: 0.75rem;
  color: var(--pl-primary);
  display: flex;
}
.auxbar div {
  width: 50%;
}
.auxbar label:hover,
.auxbar div:hover {
  cursor: pointer;
  text-decoration: underline;
}
.forgot {
  text-align: right;
}
.slInfo {
  color: var(--bs-danger);
}
/* --- GOOGLE MAPS -- */
.g_map {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: var(--pl-map-width);
  position: absolute;
  top: 0px;
  left: var(--pl-nav-width);
  /* z-index: -1; changed*/
  z-index: 1;
}
.admin_map {
  height: 100%;
  width: 100%;
}
/* .admin-body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: var(--pl-map-width);
  position: absolute;
  top: 0px;
  left: var(--pl-nav-width);
  z-index: -1;
  overflow-y: scroll;
  } */
/* ---  TABLES --- */
.modal-table,
.modal-analytics {
  padding: 0;
  border-radius: 0.375rem;
  margin: 1rem;
  max-width: calc(100vw - 2rem);
}
.modal-table .table-wrap {
  max-height: 100%;
  overflow-y: auto;
}
.modal-table .modal-header,
.modal-analytics .modal-header {
  border: none;
}
.modal-table .modal-body {
  height: calc(100vh - 8rem);
  height: calc(calc(var(--vh, 1vh) * 100) - 8rem);
}
.modal-table thead,
.modal-table tfoot {
  position: sticky;
}
.modal-table thead {
  top: 0;
}
.modal-table tfoot {
  bottom: 0;
}
.modal-table th:after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
}
.modal-table th:after {
  bottom: 0;
  border-bottom: 2px solid currentColor;
}
.modal-table tbody {
  font-size: 0.75rem;
}
.modal-table tfoot {
  font-size: 0.75rem;
  font-weight: 500;
}
.modal-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
  max-width: 250px;
}
.modal-table td span {
  color: var(--bs-gray);
  cursor: pointer;
  margin: 0 !important;
  font-size: 0.625rem;
}
.modal-table td span:hover {
  text-decoration: underline;
  color: var(--bs-purple);
}
.modal-table th i {
  font-size: 0.875rem;
  font-weight: 700;
  margin-left: 0.5rem;
}
.modal-table th i:hover {  
  cursor: pointer;
  color: var(--pl-primary) !important;
}
.modal-table th img {
  height: 12px;
  margin: 0 5px;
}
.modal-table td img {
  height: 15px;
  margin: 0 0.375rem;
}
.modal-table td.slLink:hover {
  color: var(--pl-primary) !important;
}
.modal-table .pointer {
  cursor: pointer;
}
.modal-contact {
  z-index: 1000;
  color: black !important;
  position: absolute;
  padding: 0.75rem;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
}
.modal-contact .btn-close {
  z-index: 5000;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}
.modal-contact::-webkit-scrollbar {
  display: none;
}
.modal-contact .modal-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.contact-item {
  color: #000;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-item div {
  padding-left: 0.5rem;
}
.contact-name {
  font-weight: 500;
}
.contact-title {
  font-weight: 500;
}
.contact-tagline {
  font-size: 0.8125rem;
  font-weight: 300;
}
.contact-social {
  display: flex;
  gap: 0.5rem;
}
.contact-icon {
  position: absolute;
  left: -0.5rem;
}
.contact-progress {
  text-align: center !important;
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
  font-size: 0.75rem;
}
.contact-info {
  display: flex;
  gap: 0.5rem;
}
.contact-info.valid i {
  color: var(--bs-teal);
}
.contact-info.possible i {
  color: var(--bs-orange);
}
.contact-info.invalid i {
  color: var(--bs-pink);
}
.contact-info span {
  font-size: 0.75rem;
  cursor: pointer;
}
.contact-info span:hover {
  text-decoration: underline;
}
.contact-info.alt i {
  color: var(--pl-primary-soft);
}
.contact-info.alt span:hover {
  text-decoration: auto;
  cursor: default;
}
.btn-contact {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  font-size: 1rem;
  color: var(--pl-primary-soft);
}
.btn-contact:hover {
  color: var(--pl-primary);
}
/* --- DIALOG ---  */
.prompt-full,
.table-full,
.spinner_div {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(var(--bs-dark-rgb), 0.7);
}
.prompt-full,
.table-full {
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}
.prompt-box,
.prompt-lg-box,
.prompt-xl-box {
  border-radius: 0.375rem;
  max-height: var(--pl-sidebar-height);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scrolling on .wrap */
}
.prompt-box {
  width: var(--pl-modal-width);
}
.prompt-lg-box {
  width: calc(var(--pl-modal-width) * 2);
}
.prompt-xl-box {
  width: calc(var(--pl-modal-width) * 2.75);
}
@media only screen and (max-width: 768px) {
  /* sm */
  .prompt-lg-box,
  .prompt-xl-box {
    width: calc(var(--pl-modal-width));
  }
  .modal-body.col-box {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .modal-body.col-box > div {
    width: 100% !important;
  }
}

.flex-even {
  flex: 1;
}

.minimizable .side-bar .modal-body.col-box {
  flex-direction: column !important;
}

.modal-body.col-box > div {
  width: 100% !important;
}

.modal-body.col-box {
  display: flex;
  gap: 1.5rem;
  flex-direction: row;
}
.modal-body.col-box .box-12,
.modal-body.col-box .box-6,
.modal-body.col-box .box-5,
.modal-body.col-box .box-4,
.modal-body.col-box .box-3,
.modal-body.col-box .box-lg,
.modal-body.col-box .box-sm {
  display: flex;
  flex-flow: column;
}
.modal-body.col-box .box-12 {
  width: 100%;
}
.modal-body.col-box .box-6 {
  width: calc(100% / 12 * 6);
}
.modal-body.col-box .box-5 {
  width: calc(100% / 12 * 5);
}
.modal-body.col-box .box-4 {
  width: calc(100% / 12 * 4);
}
.modal-body.col-box .box-3 {
  width: 25%;
}
.modal-body.col-box .box-lg {
  width: calc(100% / 10 * 4);
}
.modal-body.col-box .box-sm {
  width: calc(100% / 10 * 2);
}
.sl-legend-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1050;
  background-color: var(--bs-dark) !important;
  border-bottom: 1px solid rgba(#ffffff, 0.25) !important;
}
.modal-body.slSearchBox {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.slSearchBox .search-prompt {
  display: flex;
  flex-direction: row;
  margin: 0 !important;
  gap: 0.75rem;
}
.prompt-query {
  width: var(--pl-query-width);
  max-height: 100vh;
  max-height: calc(var(--vh, 1vh) * 100);
}
.prompt-item {
  color: white !important;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin: 0 !important;
}
.prompt-item:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.prompt-title {
  color: var(--pl-primary-soft);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
}
.prompt-body {
  font-size: 0.75rem;
  font-weight: 500;
}
/* --- MODAL ---  */
.modal-planno {
  z-index: 1000;
  color: white !important;
  position: absolute;
  padding: 0.5rem;
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}
.modal-planno::-webkit-scrollbar {
  display: none;
}
.modal-planno.side-bar,
.modal-planno.search-box {
  width: var(--pl-modal-width);
  max-width: calc(100vw - 2rem);
  display: block;
  border-radius: 0.375rem;
  max-height: var(--pl-sidebar-height);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scrolling on .wrap */
}
.modal-planno.side-bar,
.wrap-utils {
  right: 1rem;
  top: 1rem;
}
.wrap-utils {
  position: absolute;
  display: inline-flex;
  gap: 1rem;
}
.btn-notification {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  font-weight: 500;
  margin: 0.125rem;
  border-radius: 0.375rem;
  background-color: transparent;
}
.btn-notification:hover {
  color: #fff;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.btn-notification img {
  height: 1.125rem;
}
.btn-notification span {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0; /* no gap initially */
  transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 100%;
}
.btn-notification:hover span {
  max-width: 200px; /* or whatever fits your content */
  opacity: 1;
  margin-left: 0.75rem; /* creates space only when needed */
}
.notification-center::before {
  content: "";
  position: absolute;
  top: 0.25rem; /* adjust vertically */
  left: 1.25rem; /* adjust horizontally to match the top of the img */
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--pl-primary);
  border-radius: 50%;
  border: 2px solid rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)); /* Optional: match background for clean edge */
  z-index: 1;
  display: block; /* by default hidden */
}
.notification-center:hover::before {
  border-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
}
/* To show the red dot, add this class dynamically via JS or HTML */
.notification-center.has-notification::before {
  display: block;
}
.modal-planno.search-box {
  position: relative !important;
  transition: 0.5s;
  max-width: calc(var(--pl-map-width) - 2rem);
}
.modal-planno.side-bar.max-height {
  height: var(--pl-sidebar-height);
}
.modal-planno.notification-center {
  position: relative !important;
  border-radius: 0.375rem;
}
.side-bar .get-total {
  text-align: center;
}
.get-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.get-total {
  font-weight: 500;
}
.get-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  font-size: 0.75rem;
  font-weight: 500;
  width: 100%;
}
.get-list div {
  width: 100%;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}
.get-list input {
  flex-shrink: 0;
  padding-left: 0.25rem;
}
label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.get-more {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--pl-primary);
  text-align: center;
}
.text-white {
  color: #fff !important;
}
.get-details > div {
  margin: 1rem 0;
}
.get-consumption .btn,
.get-results .btn,
.get-details .btn,
.prompt-query .btn {
  width: 100%;
}
.get-consumption .get-annual,
.get-consumption .get-monthly {
  font-weight: 500;
}
.get-consumption .get-month {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  align-items: center;
}
.get-consumption .get-month > div:first-child {
  flex: 1;
}
.get-consumption .get-month > div:last-child {
  flex: 2;
}
.search-loading {
  align-items: center;
}
.search-info {
  font-size: 0.875rem;
  font-weight: 300;
  padding: 0.25rem;
  margin: 0 !important;
}
.search-query {
  font-style: italic !important;
  font-weight: 400;
}
.search-title {
  display: flex;
  padding: 0.25rem 0rem;
  font-size: 1rem;
  font-weight: 500;
}
.modal-body.slSearchResults .btn-close,
.modal-body.slSearchBox .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}
.slSearchResults {
  margin-top: 0.5rem;
}
.search-result {
  border-top: 1px solid var(--bs-gray);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 !important;
}
.search-result:last-child {
  border-bottom: 1px solid var(--bs-gray);
}
.search-result.search-hover {
  background-color: var(--bs-gray-800);
  cursor: pointer;
}
.search-result .result-title {
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search-result.search-hover .result-title {
  text-decoration: underline;
}
.search-result .result-subtitle {
  font-size: 0.75rem;
  color: var(--bs-gray-200);
}
.search-result .result-toolbox {
  display: flex;
  gap: 0.75rem !important;
  align-items: center;
}
.search-result .result-icon img {
  height: 1rem;
}
.search-result .result-buttom {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem !important;
}
.search-result .result-buttom:hover {
  border-color: rgba(var(--pl-primary-rgb), 1);
  background-color: rgba(var(--pl-primary-rgb), 1);
}
.search-result .result-buttom img {
  height: 0.75rem;
}
.search-result .result-buttom span {
  font-size: 0.75rem;
  font-weight: 400;
}

.notif-msg {
  border-top: 1px solid var(--bs-gray);
  padding: 0.5rem 0.5rem;
  display: flex;
  flex-direction: row;
  margin: 0 !important;
  gap: 0.75rem;
}
.notif-msg:first-child {
  border-top: none !important;
}
.notif-msg:last-child {
  border-bottom: none !important;
}
.notif-msg .msg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.notif-msg .msg-icon i {
  line-height: 1;
  font-size: inherit;
}
.notif-msg .msg-desc {
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1; /* grow to take remaining space */
  min-width: 0; /* allow ellipsis to work properly */
  overflow: hidden;
}

.notif-msg .msg-text {
  font-size: 0.75rem;
}
.notif-msg span {
  color: var(--pl-primary);
  font-style: italic;
  cursor: pointer;
}
.notif-msg span:hover {
  text-decoration: underline dotted white;
}
.notif-msg.msg-unread .msg-text {
  font-weight: 400 !important;
}
.notif-msg .msg-time {
  font-size: 0.625rem;
  font-weight: 300;
}
.notif-msg .msg-note {
  font-size: 0.625rem;
  color: var(--bs-gray-dark);
  cursor: pointer;
}
.notif-msg.msg-unread .msg-note {
  color: var(--pl-primary);
}
.notif-msg .msg-action {
  display: flex;
  flex-direction: column !important;
  gap: 0.75rem;
  align-items: center;
}
.notif-msg .msg-action button {
  color: white !important;
  font-size: 0.75rem;
  font-weight: 400;
}

.btn.btn-fullwidth,
.full-width {
  width: 100%;
}
.btn {
  font-size: 0.75rem !important;
}
.btn.btn-cancel,
.btn.btn-dark {
  background-color: var(--bs-gray);
  border-color: var(--bs-gray);
}
.btn.btn-cancel:hover,
.btn.btn-dark:hover {
  background-color: var(--bs-gray-dark);
  border-color: var(--bs-gray-dark);
}
.btn.btn-sec {
  background-color: transparent;
  border-color: var(--pl-primary);
}
.btn.btn-sec:hover {
  background-color: var(--pl-primary-soft);
  border-color: var(--pl-primary-soft);
}
.btn.btn-delete {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}
.btn.btn-delete:hover {
  background-color: rgba(var(--bs-danger-rgb), 0.7);
  border-color: rgba(var(--bs-danger-rgb), 0.7);
}
.btn.btn-confirm {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}
.btn.btn-confirm:hover {
  background-color: rgba(var(--bs-success-rgb), 0.7);
  border-color: rgba(var(--bs-success-rgb), 0.7);
}
.btn.btn-tools,
.btn.btn-search-close {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.5;
  padding: 0;
  font-size: 1.125rem !important;
  line-height: 100%;
  border: none;
}
.btn.btn-tools img {
  height: 1rem;
}
.btn.btn-tools:hover,
.btn.btn-search-close:hover {
  background-color: transparent;
  border-color: transparent;
  opacity: 1;
}
.btn.btn-tools:active,
.btn.btn-tools:focus,
.btn.btn-search-close:active,
.btn.btn-search-close:focus {
  box-shadow: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
.delete i {
}
.slSmall {
  font-size: 0.75rem;
}
.slPrimaryColor {
  color: var(--pl-primary-soft) !important;
}
.slAct span:hover,
.slLink:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--bs-danger);
}
.modal-planno.streetview-box,
.modal-planno.chart-box {
  width: var(--pl-streetview-width);
  max-width: calc(100vw - 1rem);
  display: block;
  border-radius: 0.375rem;
  /*transition: 1s;*/
}
.modal-planno.streetview-box {
  right: 0.5rem;
  top: 0.5rem;
}
.modal-planno.chart-box {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-planno.chart-box .chart-window {
  position: relative;
  padding: 1rem;
}
.modal-planno.streetview-box .streetview-window,
.modal-planno.chart-box .chart-window {
  width: 100%;
  height: var(--pl-streetview-height);
  max-height: calc(100vh - 5rem);
  background-color: white;
  transition: 1s;
}
.modal-planno.streetview-box.full-window .streetview-window,
.modal-planno.chart-box.full-window .chart-window {
  height: calc(100vh - 5rem);
}
.modal-planno.streetview-box.full-window,
.modal-planno.chart-box.full-window {
  width: calc(100vw - 1rem);
}
.modal-planno.streetview-box.large-window .streetview-window,
.modal-planno.chart-box.large-window .chart-window {
  height: calc(var(--pl-streetview-height) * var(--pl-streetview-multiplier));
}
.modal-planno.streetview-box.large-window,
.modal-planno.chart-box.large-window {
  width: calc(var(--pl-streetview-width) * var(--pl-streetview-multiplier));
}
.modal-planno.dialog-box {
  top: 1rem;
  padding: 0.125rem !important;
  transform: translate(
    calc(var(--pl-nav-width) + var(--pl-map-width) / 2 - 50%),
    0%
  );
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 0.75rem;
  cursor: default;
  border-radius: 0.375rem;
  max-width: calc(var(--pl-map-width) - 2rem);
}
.modal-planno.dialog-box.laydown {
  transform: translate(50%, 150%);
}
.dialog-box div {
  border-radius: 0.375rem;
  height: auto;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0.375rem 0.75rem;
  font-weight: 500;
  margin: 0.125rem;
}
.dialog-box div.desc {
  background-color: var(--bs-dark);
  color: var(--pl-primary-soft);
}
.dialog-box div.desc.limit {
  max-width: 200px;
}
.dialog-box div.limit {
  display: flex;
  align-items: center; /* vertical centering */
  overflow: hidden; /* ensure clipping */
}
.dialog-box div.limit span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; /* allow shrinking */
  min-width: 0; /* required for ellipsis in flex */
}
.dialog-box div.clickable:hover {
  color: #fff;
  background-color: var(--pl-primary);
  cursor: pointer;
}
.dialog-box div.save:hover {
  background-color: var(--bs-green);
}
.dialog-box div.delete:hover {
  background-color: var(--bs-red);
}
.dialog-box div.cancel:hover {
  background-color: var(--bs-gray);
}
.dialog-box div i {
  font-size: 0.875rem;
}
.dialog-box div img,
.modal-table div img,
.modal-analytics div img {
  height: 13px;
}
.dialog-box div span,
.modal-table div span,
.modal-analytics div span {
  margin-left: 0.5rem;
}
.dialog-box div.desc {
  margin: 0;
}
.dialog-box div.disabled {
  display: none;
}
.dialog-box div.inactive {
  opacity: 0.25;
}
.dialog-box div.input-group {
  display: inline-flex; /* Override Bootstrap's default flex behavior */
  width: fit-content !important;
  padding: 0;
}
.dialog-box div.input-group input {
  width: 2.5rem !important;
  min-width: auto; /* Avoids default min-width from Bootstrap */
  padding: 0rem 0.15rem;
  flex: none; /* Prevent growing to fill container */
}
.dialog-box div.input-group input[type="number"] {
  text-align: right;
}
@media only screen and (max-width: 992px) {
  /* lg */
  .dialog-box > div {
    flex: 1 0;
  }
  .dialog-box > div:first-child {
    flex: 0 1 100%;
  }
}
@media only screen and (max-width: 992px) {
  /* md */
  .dialog-box div span,
  .modal-table div span {
    display: none;
  }
}
@media only screen and (max-width: 576px) {
  /* sm */
  :root {
    --pl-modal-width: calc(100vw - 1rem);
    --pl-streetview-width: calc(100vw - 1rem);
  }
}
.modal-planno.fade {
  transition: transform 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .modal-planno.fade {
    transition: none;
  }
}
.no-transform-transition {
  transition: none !important;
}
.modal-header {
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--bs-gray);
}
.modal-sub-header {
  border-bottom: 1px solid var(--bs-gray);
}
.modal-header,
.modal-sub-header,
.modal-body,
.modal-foot {
  padding: 0.75rem;
}
.prompt-lg-box .modal-foot,
.prompt-box .modal-foot,
.prompt-xl-box .modal-foot {
  border-top: 1px solid var(--bs-gray);
}
.modal-body .title {
  font-size: small;
  color: var(--pl-primary);
}
.modal-body .desc,
.modal-body .desc a {
  font-size: small;
  color: white;
  text-decoration: none;
}
.modal-body .desc a:hover {
  text-decoration: underline;
}
.modal-planno .modal-body:not(.col-box) > div,
.modal-body.col-box > div > div {
  margin: 0.25rem 0;
}
.modal-planno .modal-body:not(.col-box) > div:last-child,
.modal-body.col-box > div > div:last-child {
  margin-top: 0.25rem;
  margin-bottom: 0rem;
}
.modal-planno .modal-body:not(.col-box) > div:first-child,
.modal-body.col-box > div > div:first-child {
  margin-top: 0rem;
  margin-bottom: 0.25rem;
}
.modal-planno .modal-body:not(.col-box) > div .form-check,
.modal-body.col-box > div > div .form-check {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500 !important;
  padding-left: 2rem;
  min-height: auto !important;
}
.modal-planno.getloc .modal-body {
  overflow-y: auto;
  /*max-height: calc(var(--pl-sidebar-height) - 6.25rem - 15px);*/
}
.modal-planno:not(.getloc) .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(var(--pl-sidebar-height) - 4rem);
}

.modal-planno .modal-body .barriers div {
  color: var(--pl-primary);
  font-size: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
}
.modal-planno .modal-body .barriers div:hover {
  cursor: help;
  background-color: var(--bs-gray-dark);
}

.modal-planno .modal-body .barriers span {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.planno-scroll::-webkit-scrollbar,
.select-tags::-webkit-scrollbar,
.select-selector::-webkit-scrollbar,
.modal-planno .modal-body::-webkit-scrollbar {
  width: 0.5em;
}
.planno-scroll::-webkit-scrollbar-track,
.select-tags::-webkit-scrollbar-track,
.select-selector::-webkit-scrollbar-track,
.modal-planno .modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.planno-scroll::-webkit-scrollbar-thumb,
.select-tags::-webkit-scrollbar-thumb,
.select-selector::-webkit-scrollbar-thumb,
.modal-planno .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--pl-primary-soft);
}
.planno-scroll::-webkit-scrollbar-thumb:hover,
.select-tags::-webkit-scrollbar-thumb:hover,
.select-selector::-webkit-scrollbar-thumb:hover,
.modal-planno .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--pl-primary);
}
.modal-header .btn-close,
.modal-footer .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}
.wrap-admin {
  border-top: 1px solid var(--bs-gray);
}
.modal-toolbox,
.modal-toolbox-bottom {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}
.modal-toolbox {
  justify-content: space-evenly;
}
.modal-toolbox-bottom {
  justify-content: space-between;
  border-top: 1px solid var(--bs-gray);
  padding: 0.5rem 0.25rem 0.25rem 0.25rem;
}
.modal-planno .dropdown-item,
.modal-planno .dropdown-toggle,
.modal-planno .dropdown-menu,
.modal-planno .input-group-sm,
.modal-planno .input-group-text,
.modal-planno .form-control-sm,
.modal-planno .form-control,
.modal-planno .form-select,
.modal-planno .form-select-sm,
.modal-analytics .input-group-sm,
.modal-analytics .input-group-text,
.modal-analytics .form-control-sm,
.modal-analytics .form-control,
.modal-analytics .form-select,
.modal-analytics .form-select-sm,
.navcol-menu .form-select,
.navcol-menu .form-select-sm,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-item {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.modal-planno .dropdown-toggle,
.modal-planno .dropdown-menu,
.modal-planno .dropdown-item,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-item {
  color: #212529 !important;
}
.modal-planno .dropdown-menu,
.bootstrap-select > .dropdown-menu {
  background-color: #f9f9f9 !important;
  border: 1px solid #ddd;
  padding: 0;
  border-radius: 0;
}
.navcol-menu .form-select.high,
.navcol-menu .form-select-sm.high {
  color: var(--bs-red) !important;
}
.modal-planno .link {
  color: var(--pl-primary-soft) !important;
}
.modal-planno .link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--pl-primary) !important;
}
.modal-analytics .link {
  color: var(--pl-blue-color) !important;
}
.modal-analytics .link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--bs-danger) !important;
}
.modal-planno .hover-pointer:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--pl-primary-soft) !important;
}
.modal-planno .notes {
  padding-top: 0.25rem;
  padding-bottom: 0rem;
  padding-left: 0;
  /*padding-left: 0.25rem;*/
  padding-right: 0rem;
  margin-right: 2rem;
  font-size: 0.6875rem;
  color: var(--bs-gray-300);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.modal-planno .notes span.icon {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: 0.05rem;
  margin-right: 0.05rem;
}
.modal-planno .notes span.name {
  padding-left: 0.3rem;
}
.input-group.tags {
  position: relative;
}
.select-tags,
.select-selector {
  display: block;
  position: absolute;
  color: #000;
  background-color: #f9f9f9;
  max-height: calc(1.75rem * 6);
  border: 1px solid #ddd;
  z-index: 1000;
  overflow-y: auto;
  width: calc(100% - 1.85rem * 2);
  margin-left: 1.85rem;
}
.select-tags label,
.select-selector label {
  display: block;
  padding: 0.3125rem 0.75rem;
  cursor: pointer;
}
.select-tags label:hover,
.select-selector label:hover {
  background-color: #e2e2e2;
}
.select-tags input[type="checkbox"],
.select-selector input[type="checkbox"] {
  margin-right: 0.5rem;
}
.select-tags input[type="checkbox"]:checked + label,
.select-selector input[type="checkbox"]:checked + label {
  font-weight: bold;
}
.select-tags .add_tag,
.select-selector .add_tag {
  color: blue;
}
.select-tags .add_tag:hover,
.select-selector .add_tag:hover {
  text-decoration: underline;
}
.modal-planno .input-group-tag {
  overflow: hidden;
  min-height: 1.75rem;
}
.modal-planno .input-group-tag > span {
  background-color: var(--bs-gray);
  padding: 1px 0.25rem;
  color: #fff;
  border-radius: 0.2rem;
  cursor: default;
}
.modal-planno .form-control-sm {
  min-height: 1rem !important;
  padding: 0 0.25rem !important;
}
.modal-planno .pvgen-box {
  background-color: #e9ecef;
  flex: 1 1 auto;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  position: relative;
}
.modal-planno .pvgen-box canvas {
  height: calc(100% - 0.5rem);
  width: calc(100% - 0.5rem);
  margin: 0.25rem;
  letter-spacing: 1px;
  color: #212529;
}
.modal-planno .pvgen-box canvas:hover {
  cursor: zoom-in;
}
@media only screen and (max-width: 768px) {
  /* md */
  .modal-planno .dropdown-menu,
  .modal-planno .input-group-sm,
  .modal-planno .input-group-text,
  .modal-planno .form-control-sm,
  .modal-planno .form-control,
  .modal-planno .form-select,
  .modal-planno .form-select-sm,
  .modal-analytics .input-group-sm,
  .modal-analytics .input-group-text,
  .modal-analytics .form-control-sm,
  .modal-analytics .form-control,
  .modal-analytics .form-select,
  .modal-analytics .form-select-sm,
  .bootstrap-select .dropdown-menu {
    font-size: 1rem !important;
  }
}
.slWelcome .form-text,
.slLogin .form-text {
  font-size: 0.875rem;
}
.loc-icon {
  height: auto;
  padding: 0.625rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loc-icon:not(.disabled):hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.loc-icon.delete:not(.disabled):hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.loc-icon.disabled {
  opacity: 0.25;
}
.loc-icon img {
  height: 18px;
}
.loc-icon i {
  font-size: 18px;
  line-height: 1; /* removes extra vertical space */
  width: 18px; /* optional: makes the box exactly 15px */
  height: 18px; /* optional: makes the box exactly 15px */
}
.modal-toolbox-wrap .loc-icon img {
  padding-left: 0.125rem;
}
.modal-toolbox-wrap .loc-icon,
.modal-toolbox-get .loc-icon {
  padding: 0.5rem;
}
.modal-toolbox-wrap .loc-icon span,
.modal-toolbox-get .loc-icon span,
.modal-toolbox-bottom .loc-icon span {
  font-size: 0.75rem;
  font-weight: 500;
  padding-left: 0.5rem;
}
.modal-toolbox-wrap .loc-icon.on span,
.modal-toolbox-get .loc-icon.on span,
.modal-toolbox-bottom .loc-icon.on span {
  color: var(--pl-primary);
}
.modal-toolbox-get .loc-icon {
  justify-content: center !important;
}
.max-60 {
  max-width: 60px;
}
.modal-toolbox-wrap.sm-icon .loc-icon img,
.modal-toolbox-get.sm-icon .loc-icon img,
.modal-toolbox-bottom.sm-icon .loc-icon img {
  height: 15px;
}
.modal-toolbox-bottom.sm-icon .loc-icon i {
  font-size: 15px;
  line-height: 1; /* removes extra vertical space */
  width: 15px; /* optional: makes the box exactly 15px */
  height: 15px; /* optional: makes the box exactly 15px */
}
.sl-hidden {
  display: none !important;
}
.sl_CopyToClipboard {
  cursor: pointer;
}
.prompt-query.prompt-light {
  background-color: var(--bs-light);
  font-weight: 500;
}
.company-details-box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-bottom: 0;
  gap: 0.3rem;
}
.company-social {
  display: flex;
  gap: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.company-social a {
  font-size: 1.25rem !important;
}
.layer-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #000;
  font-size: 0.75rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--bs-gray-300);
}
.layer-item .titleTag {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* You may need to tweak this */
  cursor: pointer;
}
.layer-item .tag-buttons {
  display: flex;
  gap: 0.125rem;
}
.tag-box {
  background-color: #fff;
  margin: 0 !important;
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
  border: 1px solid #ced4da;
  flex: 1 1 auto;
  position: relative;
}
.tag-box.box-max {
  max-height: 250px;
}
.tag-item {
  color: #000;
  font-size: 0.75rem;
  padding: 0.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-addnew {
  margin-bottom: 1rem;
  border-radius: 0.375rem;
}
.tag-addnew > button:hover {
  background-color: var(--bs-gray-500);
}
.tag-item div.clickable:hover {
  cursor: pointer;
}
.tag-item div.clickable:hover span:first-child {
  text-decoration: underline;
}
.tag-item span {
  padding-left: 0.5rem;
}
.tag-item span.titleTag {
  font-weight: 500;
}
.tag-item span.subtitleTag {
  font-size: 0.6875rem;
  font-weight: 300;
}
.tag-item:hover {
  cursor: default;
  background-color: var(--bs-gray-300);
}
.tag-item.highlt {
  background-color: var(--bs-gray-300);
  min-height: 2.5rem;
}
.btn-tag {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.25rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-tag-show {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: default !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.125rem 0.25rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-tag.btn-full {
  font-size: 0.625rem;
  font-weight: 600;
  border-width: 2px;
}
.tag-addnew .btn-tag {
  background-color: var(--bs-gray-300);
  padding: 0.25rem 0.5rem;
}
.btn-tag:hover {
  background-color: var(--bs-gray-500);
  color: white !important;
}
.btn-tag.delete:hover {
  background-color: var(--bs-danger) !important;
  color: white !important;
}
.btn-tag.btn-full.delete {
  border-color: var(--bs-danger) !important;
}
.btn-tag.add {
  color: var(--bs-success) !important;
}
.btn-tag.btn-full.add {
  border-color: var(--bs-success) !important;
}
.btn-tag.add:hover {
  background-color: var(--bs-success) !important;
  color: white !important;
}
.btn-tag.replace:hover {
  background-color: var(--bs-warning) !important;
  color: white !important;
}
.btn-tag.icon-green {
  color: var(--pl-green-color) !important;
}
.btn-profile {
  display: inline-block;
  color: var(--bs-blue);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.125rem 0.25rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-profile-simple {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0;
  font-size: 0.875rem;
  border-radius: 0;
}
.btn-star {
  color: var(--pl-primary);
}
.checked .btn-profile {
  color: var(--pl-gray);
  cursor: default;
}
.profile-id.checked {
  color: var(--bs-gray);
}
.profile-id.checked:hover {
  background-color: transparent;
}
/*  ####  SPINNER   ####*/
.spinner_div {
  /*  REMAINING SETTINGS OF SPINNER WITH .prompt-full  */
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  gap: 1rem;
  color: var(--bs-yellow);
}
.spinner_div .spinner_msg {
  font-size: 0.875rem !important;
}
.spinner {
  width: 3rem;
  height: 3rem;
}
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 3rem);
  color: white;
}
.spinner-search {
  color: white;
  opacity: 0.75;
  border-width: 0.15rem;
  width: 1.125rem;
  height: 1.125rem;
  text-align: center;
  vertical-align: middle;
}
/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the bubble. */
  background-color: white;
  padding: 0.325rem 0.5rem;
  border-radius: 0.375rem;
  overflow-y: auto;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  max-width: 200px;
  min-width: 100px;
}
.popup-bubble div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.popup-title {
  font-size: 0.875rem;
  font-weight: 500;
}
.popup-desc {
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 0.325rem;
}
/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute;
  width: 100%;
  bottom: 8px;
  left: 0;
}
/* This element draws the tip. */
.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Center the tip horizontally. */
  transform: translate(-50%, 0);
  /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  width: 0;
  height: 0;
  /* The tip is 8px high, and 12px wide. */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid white;
}
/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
  cursor: auto;
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 200px;
}
/* ----------  MAIN TOOL BOX   --------  */
.tools {
  z-index: 500;
  position: absolute;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  background-color: transparent !important;
  bottom: 1.5rem;
  transform: translate(
    calc(var(--pl-nav-width) + var(--pl-map-width) / 2 - 50%),
    0%
  );
  border-radius: 0.375rem;
}
.tool-button {
  color: white !important;
  font-size: 0.625rem;
  font-weight: 600;
  min-width: 4rem;
  border-radius: 0.375rem;
  border: 1px solid #fff;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  padding: 0.5rem 0.375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: none;
}
.tool-button:hover {
  background-color: rgba(var(--pl-dark-rgb), var(--bs-bg-opacity)) !important;
  cursor: pointer;
}
.tool-button img {
  height: 1.25rem;
}
.tool-button span,
.tool-button:hover img {
  display: none;
}
.tool-button:hover span {
  display: flex;
}
.pac-container {
  z-index: 3000 !important; /* higher than .modal (1055) and .modal-backdrop (1050) */
}
.pac-item {
  font-size: 0.9rem;
}
.pac-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.pac-item-query {
  font-weight: 600;
}
/************************** ANALYTICS ***************************/
@media only screen and (min-width: 992px) {
  /* lg */
  .modal-analytics {
    max-width: 960px;
  }
}
.modal-analytics {
  padding: 0.5rem;
}
.modal-analytics .modal-body {
  max-height: calc(100vh - 5rem);
  max-height: calc(calc(var(--vh, 1vh) * 100) - 5rem);
  overflow-y: auto;
}
.modal-analytics canvas {
  height: 300px;
}
.modal-analytics .box {
  padding: 0.75rem;
  background-color: white;
  border-radius: 0.375rem;
  box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.2);
  min-height: 100%;
}
.modal-analytics .box div {
  position: relative;
}
.modal-analytics .box span {
  margin: 0;
  font-size: 0.75rem;
}
.modal-analytics .box > div:first-child {
  border-bottom: 1px solid var(--bs-gray);
}
.modal-analytics .box_title {
  font-size: 0.875rem !important;
  font-weight: 600;
}
.modal-analytics .box_desc {
  font-weight: 500;
  margin-left: 0.375rem !important;
}
.modal-analytics .box_val {
  margin-right: 0.375rem !important;
}
.btn-icon {
  position: absolute;
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: 0.25em 0.25em;
  color: #000;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.65;
}
.btn-icon:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.9;
}
.btn-icon:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--pl-primary-rgb), 0.25);
  opacity: 1;
}
.btn-download {
  position: absolute;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-box-arrow-down%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M3.5%2010a.5.5%200%200%201-.5-.5v-8a.5.5%200%200%201%20.5-.5h9a.5.5%200%200%201%20.5.5v8a.5.5%200%200%201-.5.5h-2a.5.5%200%200%200%200%201h2A1.5%201.5%200%200%200%2014%209.5v-8A1.5%201.5%200%200%200%2012.5%200h-9A1.5%201.5%200%200%200%202%201.5v8A1.5%201.5%200%200%200%203.5%2011h2a.5.5%200%200%200%200-1h-2z%22%2F%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.646%2015.854a.5.5%200%200%200%20.708%200l3-3a.5.5%200%200%200-.708-.708L8.5%2014.293V5.5a.5.5%200%200%200-1%200v8.793l-2.146-2.147a.5.5%200%200%200-.708.708l3%203z%22%2F%3E%0A%3C%2Fsvg%3E")
    center center no-repeat;
  right: 0rem;
  top: 0rem;
}
.btn-toggle-consumption {
  position: relative;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-eye%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20d%3D%22M16%208s-3-5.5-8-5.5S0%208%200%208s3%205.5%208%205.5S16%208%2016%208M1.173%208a13%2013%200%200%201%201.66-2.043C4.12%204.668%205.88%203.5%208%203.5s3.879%201.168%205.168%202.457A13%2013%200%200%201%2014.828%208q-.086.13-.195.288c-.335.48-.83%201.12-1.465%201.755C11.879%2011.332%2010.119%2012.5%208%2012.5s-3.879-1.168-5.168-2.457A13%2013%200%200%201%201.172%208z%22%2F%3E%0A%3Cpath%20d%3D%22M8%205.5a2.5%202.5%200%201%200%200%205%202.5%202.5%200%200%200%200-5M4.5%208a3.5%203.5%200%201%201%207%200%203.5%203.5%200%200%201-7%200%22%2F%3E%0A%3C%2Fsvg%3E")
    center center no-repeat;
  right: 2.5rem;
  top: 0rem;
}
.btn-toggle-consumption-off {
  position: relative;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-eye-slash%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%3Cpath%20d%3D%22M13.359%2011.238C15.06%209.72%2016%208%2016%208s-3-5.5-8-5.5a7%207%200%200%200-2.79.588l.77.771A6%206%200%200%201%208%203.5c2.12%200%203.879%201.168%205.168%202.457A13%2013%200%200%201%2014.828%208q-.086.13-.195.288c-.335.48-.83%201.12-1.465%201.755q-.247.248-.517.486z%22%2F%3E%0A%3Cpath%20d%3D%22M11.297%209.176a3.5%203.5%200%200%200-4.474-4.474l.823.823a2.5%202.5%200%200%201%202.829%202.829zm-2.943%201.299.822.822a3.5%203.5%200%200%201-4.474-4.474l.823.823a2.5%202.5%200%200%200%202.829%202.829%22%2F%3E%0A%3Cpath%20d%3D%22M3.35%205.47q-.27.24-.518.487A13%2013%200%200%200%201.172%208l.195.288c.335.48.83%201.12%201.465%201.755C4.121%2011.332%205.881%2012.5%208%2012.5c.716%200%201.39-.133%202.02-.36l.77.772A7%207%200%200%201%208%2013.5C3%2013.5%200%208%200%208s.939-1.721%202.641-3.238l.708.709zm10.296%208.884-12-12%20.708-.708%2012%2012z%22%2F%3E%0A%3C%2Fsvg%3E")
    center center no-repeat;
  right: 2.5rem;
  top: 0rem;
}
.box-btn-icon {
  position: absolute;
  right: 0rem;
  top: 0rem;
}
.btn-refresh {
  right: 0.25rem;
  top: 0.25rem;
  height: 0.75rem;
  width: 0.75rem;
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/%3E%3Cpath d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/%3E%3C/svg%3E')
    center center no-repeat;
  /*background: transparent url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"%3E%3Cpath d="M0 0h24v24H0V0z" fill="none"%2F%3E%3Cpath d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"%2F%3E%3C/svg%3E') center center no-repeat;*/
}
.btn-maximize {
  right: 0.25rem;
  top: 0.25rem;
  height: 0.75rem;
  width: 0.75rem;
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/%3E%3Cpath d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/%3E%3Cpath fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"/%3E%3C/svg%3E')
    center center no-repeat;
}
.btn-csv {
  width: 0.75rem !important;
  height: 0.75rem !important;
  right: 0.75rem;
  top: 0.75rem;
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248%22%20viewBox%3D%220%2096%20960%20960%22%20width%3D%2248%22%3E%3Cpath%20d%3D%22M180%20975q-24%200-42-18t-18-42V342q0-12.75%208.675-21.375%208.676-8.625%2021.5-8.625%2012.825%200%2021.325%208.625T180%20342v573h444q12.75%200%2021.375%208.675%208.625%208.676%208.625%2021.5%200%2012.825-8.625%2021.325T624%20975H180Zm120-120q-24%200-42-18t-18-42V235q0-24%2018-42t42-18h440q24%200%2042%2018t18%2042v560q0%2024-18%2042t-42%2018H300Zm0-60h440V235H300v560Zm0%200V235v560Z%22%2F%3E%3C%2Fsvg%3E")
    center/contain no-repeat;
}
/************************** SLIDER ***************************/
.slider-box {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 0;
  gap: 3rem;
}
/*.slider-box div {
  background-color: #fff;
  color: #212529;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 0.2rem;
  border: 1px solid #ced4da;
  padding: 0.25rem 0.5rem !important;
  min-height: 1rem!important;
  }*/
.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  -ms-touch-action: none;
  touch-action: none;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}
.ui-slider-horizontal {
  height: 0.5rem;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 1rem;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 1rem;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 1rem;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 1rem;
}
/* Component containers
  ----------------------------------*/
.ui-widget {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget .ui-widget {
  font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}
.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}
.ui-widget-content a {
  color: #333333;
}
.ui-widget-header {
  border: 1px solid var(--pl-primary-soft);
  background: var(--pl-primary-soft);
  color: #333333;
  font-weight: bold;
}
.ui-widget-header a {
  color: #333333;
}
/* Interaction states
  ----------------------------------*/
.ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default,
  .ui-button,
  /* We use html here because we need a greater specificity to make sure disabled
  works properly when clicked or hovered */
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: var(--pl-primary);
  font-weight: normal;
  color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: var(--pl-primary);
  font-weight: normal;
  color: #cccccc;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}
.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--pl-primary-soft);
  background: var(--pl-primary-soft);
  font-weight: normal;
  color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}
/* Interaction Cues
  ----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}
.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  -ms-filter: "alpha(opacity=70)"; /* support: IE8 */
  font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  -ms-filter: "alpha(opacity=35)"; /* support: IE8 */
  background-image: none;
}
.ui-state-disabled .ui-icon {
  -ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 */
}
.hide {
  display: none !important;
}
.btn-expand {
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  color: #000;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}
.btn-close.btn-bar {
  margin: -0.5rem -0.5rem -0.5rem 0.5rem !important;
}
.btn-zoom {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  color: #000;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}
.btn-zoom:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
.btn-zoom:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}
.btn-zoom:disabled,
.btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}
.btn-zoom img {
  height: 18px;
  vertical-align: baseline;
}
.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-header .btn-expand.btn-plus {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23f19220" class="bi bi-plus" viewBox="0 0 16 16"%3E%3Cpath d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/%3E%3C/svg%3E')
    center/2rem auto no-repeat;
}
.btn-expand.btn-sm-screen {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-88 20 32 32" style="enable-background:new -88 20 32 32;" xml:space="preserve"%3E%3Cg%3E%3Cpath d="M-56,26.9h-32v18.3h32V26.9z M-59.4,41.7h-25.1V30.3h25.1V41.7z"/%3E%3C/g%3E%3C/svg%3E')
    center/1rem auto no-repeat;
}
.btn-expand.btn-lg-screen {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-88 20 32 32" style="enable-background:new -88 20 32 32;" xml:space="preserve"%3E%3Cg%3E%3Cpath d="M-56,26.9h-32v18.3h32V26.9z M-59.4,41.7h-25.1V30.3h25.1V41.7z"/%3E%3C/g%3E%3C/svg%3E')
    center/1.5rem auto no-repeat;
}
.btn-expand.btn-full-screen {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-88 20 32 32" style="enable-background:new -88 20 32 32;" xml:space="preserve"%3E%3Cpath d="M-88,20v10.7h3.6v-7.1h7.1V20H-88z M-84.4,41.3H-88V52h10.7v-3.6h-7.1V41.3z M-59.6,48.4h-7.1V52H-56V41.3h-3.6V48.4z M-56,20h-10.7v3.6h7.1v7.1h3.6V20z"/%3E%3C/svg%3E')
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-sidebar {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layout-sidebar-inset-reverse" viewBox="0 0 16 16"%3E%3Cpath d="M2 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"/%3E%3Cpath d="M13 4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1z"/%3E%3C/svg%3E')
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-window {
  background: transparent
    url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-window" viewBox="0 0 16 16"%3E%3Cpath d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/%3E%3Cpath d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1M2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1z"/%3E%3C/svg%3E')
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-eye {
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E")
    center/1.125rem auto no-repeat;
}
.btn-expand.btn-eye-slash {
  background: transparent
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-eye-slash' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829'/%3E%3Cpath d='M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z'/%3E%3C/svg%3E")
    center/1.125rem auto no-repeat;
}
.btn-expand:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
.btn-expand:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}
.btn-expand:disabled,
.btn-expand.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}
.btn-expand-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* updated changes fromnew files */
/* --- LOGIN --- */

.slLogin,
.slWelcome {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: center;
}
.slLogin button,
.slWelcome button {
  width: 100%;
}
.slLoginWrap,
.slWelcomeWrap {
  width: 350px;
}
.login-brand {
  text-align: center;
}
.login-brand img {
  height: 40px;
}
.auxbar {
  font-size: 0.75rem;
  color: var(--pl-primary);
  display: flex;
}
.auxbar div {
  width: 100%;
}
.auxbar label:hover,
.auxbar div:hover {
  cursor: pointer;
  text-decoration: underline;
}
.forgot {
  text-align: right;
}
.slInfo {
  color: var(--bs-danger);
}

.alert-messages {
  text-align: center;
}

/* ------ */

/* OTP */
.center-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

.otp-verification {
  text-align: center;
}

.otp-inputs {
  margin-bottom: 20px;
}

.otp-box {
  font-size: 20px;
  padding: 5px;
  margin: 0 5px;
  width: 40px;
  border: none;
  border-bottom: 2px solid #000;
  text-align: center;
  outline: none;
}

.otp-box:focus {
  border-bottom-color: #007bff;
}

.otp-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: 1px solid transparent;
  display: block; /* Changed to block to make it look like a button */
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
  margin: 20px auto; /* Center the button */
}

.timer-container {
  margin-top: 20px;
  text-align: center; /* Ensure the timer text is centered */
}

.resend-otp {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: 1px solid transparent;
  display: none; /* Keep it hidden initially */
  cursor: pointer;
  font-size: 16px;
  margin: 20px auto; /* Center the button when displayed */
}
/*  */

.menu-desc a {
  color: inherit;
  text-decoration: none;
}

/* Hide the checkbox */
.hidden-checkbox {
  display: none;
}

/* Initially hide the possible emails */
.hidden {
  display: none;
}

/* Show the emails and hide the label when checkbox is checked */
.hidden-checkbox:checked ~ .hidden {
  display: block;
}

.hidden-checkbox:checked + label {
  display: none;
}

.possible-emails div {
  padding-left: 0 !important;
  padding-bottom: 4px;
}

.possible-phones div {
  padding-left: 0 !important;
  padding-bottom: 4px;
}

#pagination-container {
  position: fixed;
  bottom: 15px; /* REQUIRED */
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  z-index: 99999; /* REQUIRED */
}

#log-table-container {
  max-height: 90vh;
  overflow-y: auto;
  padding-bottom: 40px;
}

#log-thead {
  position: static;
}
.pagination-btn {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #f8f9fa;
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.pagination-btn:hover {
  background: #e9ecef;
}

.pagination-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Google Maps context menu */
.gmap-context {
  position: absolute;
  display: none;
  z-index: 99999;
  min-width: 190px;
  background-color: rgba(var(--bs-dark-rgb), 1) !important;
  border-radius: 0.375rem;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 0;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
  max-height: var(--pl-sidebar-height);
}

.gmap-context::-webkit-scrollbar {
  width: 0.5em;
}
.gmap-context::-webkit-scrollbar-track {
  background: transparent;
}
.gmap-context::-webkit-scrollbar-thumb {
  background-color: var(--pl-primary-soft);
}
.gmap-context::-webkit-scrollbar-thumb:hover {
  background-color: var(--pl-primary);
}

.gmap-context.info {
  border-radius: 0px;
}

/* menu items */
.gmap-context .item {
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  color: white !important;
  white-space: nowrap;
}

.gmap-context .item .title {
  font-weight: 400 !important;
  color: var(--pl-primary-soft) !important;
}
.gmap-context .item .desc {
}

/* hover */
.gmap-context .item:hover {
  background-color: rgba(var(--pl-dark-rgb), 1) !important;
}

/* separator */
.gmap-context .sep {
  margin: 0.375rem 0;
  border-bottom: 1px solid var(--bs-gray);
}

.column-item .drag-handle {
  cursor: move;
  opacity: 0.6;
}

.column-item.is-off {
  background-color: var(--bs-gray-300);
}

.column-item.is-off .drag-handle {
  background-color: var(--bs-gray-300);
}

.bootstrap-select > .dropdown-menu {
  min-width: 100% !important;
  max-width: 100% !important;
}
.bootstrap-select .dropdown-menu li a span.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}