:root {
  /* generic */
  --gutterSm: 0.4rem;
  --gutterMd: 0.8rem;
  --gutterLg: 1.6rem;
  --gutterXl: 2.4rem;
  --gutterXx: 7.2rem;
  --colorPrimaryContainer: #cfcccc;
  --colorPrimary400: #e8e8e8;
  --colorPrimary600: #c8c8c8;
  --colorPrimary800: #686868;
  --fontFamily: "Dosis", sans-serif;
  --fontSizeSm: 1.0rem;
  --fontSizeMd: 1.6rem;
  --fontSizeLg: 2.1rem;
  --fontSizeXl: 2.8rem;
  --fontSizeXx: 3.6rem;
  --lineHeightSm: 1.1;
  --lineHeightMd: 1.8;
  --transitionDuration: 300ms;
  --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* floated labels */
  --inputPaddingV: var(--gutterMd);
  --inputPaddingH: var(--gutterLg);
  --inputFontSize: var(--fontSizeSm);
  --inputLineHeight: var(--lineHeightSm);
  --labelScaleFactor: 0.8;
  --labelDefaultPosY: 50%;
  --labelTransformedPosY: calc(
     (var(--labelDefaultPosY)) - (var(--inputPaddingV) * var(--labelScaleFactor)) - (var(--inputFontSize) *
          var(--inputLineHeight))
  );
  --inputTransitionDuration: var(--transitionDuration);
  --inputTransitionTF: var(--transitionTF);
  --navBarSize: 55px;
}

/* Resetting margins for different browser */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  /* min-width:1500px; */
  width: 100%;
  height: 100%;
}

.Input {
  position: relative;
  /* border: 2px solid green; */
  padding-bottom: 10px;
}

.Input-text {
  display: block;
  float: left;
  /* width: 240px; */
  width: 30%;
  margin-right: 8px;
  margin-left: 20%;
  padding: var(--inputPaddingV) var(--inputPaddingH);
  color: inherit;
  font-family: inherit;
  font-size: var(--inputFontSize);
  font-weight: inherit;
  line-height: var(--inputLineHeight);
  border: none;
  border-radius: 0.4rem;
  transition: box-shadow var(--transitionDuration);

  /*TODO: webkit */
  box-sizing: border-box;
}

.Input-text:focus {
  outline: none;
  background-color: white;
  border: 3px solid lightskyblue;
  /* box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600); */
}

.Input-label {
  display: block;
  position: absolute;
  bottom: 50%;
  left: 1rem;
  color: red;
  font-family: inherit;
  font-size: var(--inputFontSize);
  font-weight: inherit;
  line-height: var(--inputLineHeight);
  opacity: 0;
  transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1);
  transform-origin: 0 0;
  transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF),
    transform var(--inputTransitionDuration) var(--inputTransitionTF),
    visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
    z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}

.Input-text:placeholder-shown + .Input-label {
  visibility: hidden;
  z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  visibility: visible;
  z-index: 1;
  opacity: 0.5;
  transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor));
  transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms;
}

::-webkit-input-placeholder {
  opacity: 0.4 !important; /* for older chrome versions. may no longer apply. */
}

:-moz-placeholder {
  /* Firefox 18- */
  opacity: 0.4 !important;
}

::-moz-placeholder {
  /* Firefox 19+ */
  opacity: 0.4 !important;
}

.loginForm {
  margin-top: 40px;
}

.mapContainer {
  overflow: hidden;
  width: 100%;
}

.mapContainer.sideBar-open #mapid {
  left: 20%;
  width: 80%;
  transition: 0.3s ease-in-out;
}

#mapid {
  position: absolute;
  top: var(--navBarSize); /* Same as bootstrap navbar*/
  bottom: 0;
  right: 0;
  left: 0;
  /* height: 100%; */
  width: 100%;
  /* z-index: 700; */
  -webkit-transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
.leaflet-control.leaflet-bar.queryBtn {
  top: 30px;
}

#map-draw-tooltip {
  display: none;
  position: absolute;
  background: #666;
  color: white;
  opacity: 0.8;
  padding: 5px;
  border: 1px dashed #999;
  font-family: sans-serif;
  font-size: 12px;
  /* height: 50px; */
  line-height: 20px;
  z-index: 650;
}

#sideBar,
#sideBar2 {
  width: 20%;
  height: 100%;
  padding-bottom: 5%;
  position: fixed;
  overflow-x: hidden;
  overflow-y: auto;
}

#sideBar2 {
  display: none;
}

.sideBarContainer .sideBarHeader,
.roadDescTitle {
  padding: 10px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  text-align: center;
  background: var(--colorPrimary400);
}

.sideBarContainer .sideBarCloseBtn {
  float: right;
  transform: scale(1.5);
}
.sideBarContainer .sideBarCloseBtn:hover {
  color: #ac1818;
  cursor: pointer;
}

.sideBarContainer .loaderIcon {
  /* center loader image */
  display: block;
  padding-top: 10%;
  margin: auto;
}

.sideBarContainer .sideBarContent ul li {
  padding: 15px 20px;
  border-bottom: 1px solid #ccc;
}

#sideBar li.road.selected,
#sideBar2 .multi-query-list li.geom.selected {
  background: #5cb85c;
}

#sideBar li.road p,
#roadDesc .roadDescContent p,
.multi-query-list li.geom p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--fontSizeSm);
}

#roadDesc.roadDescContent p {
  line-height: 40px;
}

#roadDesc {
  width: 20%;
  left: 20%;
  height: 100%;
  position: fixed;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 5%;
  background: #ffffff;
  transition: 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
  opacity: 0;
}
#roadDesc.open {
  transform: translate3d(-100%, 0, 0);
  transition: opacity 0.2s linear, transform 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
  opacity: 1;
}

#roadDesc .backBtn {
  float: left;
  transform: scale(1.8);
}
#roadDesc .backBtn:hover {
  color: #ac1818;
  cursor: pointer;
}

#roadDesc .roadDescContent {
  padding: 20px 20px 0 20px;
}

#roadDesc .roadDescContent p:first-letter {
  text-transform: capitalize;
}

#roadDesc .btnContainer {
  padding: 20px;
}

#roadDesc .btnContainer button {
  margin-bottom: 5px;
}
.multi-query-searchContainer {
  padding: 10px 5px 15px 5px;
  border-bottom: 1px solid #ccc;
}

.multi-query-search {
  margin: 5px 0px;
}

.multi-query-btnContainer .btn.disabled,
.multi-query-btnContainer .btn:disabled {
  opacity: 0.4 !important; /*Overwrites Bootstrap disabled*/
}

#sideBar2 span.deleteEntry {
  /* background: red; */
  /* color:white; */
  height: 25px;
  width: 25px;
  margin-right: 10px;
  text-align: center;
  display: none;
  transition: 0.2s linear;
}

#sideBar2 li:hover span.deleteEntry {
  width: 25px;
  display: inline-block;
  cursor: pointer;
}

.advancedSearchContainer {
  position: fixed;
  top: 20%;
  right: 0px;
  height: 70vh;
  background-color: var(--colorPrimaryContainer);
  z-index: 850;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  width: 40%;
  -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  -webkit-filter: blur(0.000001px);
  filter: blur(0.000001px);
  transform: translate3d(99.80%, 0, 0);
}
.advancedSearchContainer.open {
  transform: translate3d(0, 0, 0);
}

.statisticsContainer {
  position: fixed;
  top: 6%;
  right: 0%;
  height: 93%;
  background-color: var(--colorPrimary400);
  z-index: 800;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  width: 60%;
  overflow-y: scroll;
  transform: translate3d(100%, 0, 0);
  -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
.statisticsContainer.open {
  transform: translate3d(0, 0, 0);
}

.legendContainer {
  position: fixed;
  top: 30%;
  left: 0%;
  height: 50%;
  background-color: var(--colorPrimary400);
  z-index: 1001;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  width: 16%;
  font-size: 11px;
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  /* overflow: auto; */
}
.legendContainer.open {
  transform: translate3d(0, 0, 0);
}
.infoContainer {
  position: fixed;
  /* top: 25px;  */
  top: 8%;
  right: 0px;
  height: 90%;
  z-index: 800;
  border-radius: 5px;
  padding: 10px;
  background-color: var(--colorPrimary400);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  width: 40%;
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

.infoContainer .legendButton,
.togglePieBtn {
  padding-left: 0px;
}

.statisticsContainerButton {
  white-space: nowrap;
}

.infoContainer.closed {
  /* maybe a bit hardcoded hiding the container*/
  /* right: -1000px; */
  transform: translate3d(99.80%, 0, 0);
}

.infoContainerButton,
.advancedSearchContainerButton {
  position: absolute;
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);

  transform: rotate(-90deg);
}

.infoContainerButton {
  left: -54px;
  top: 30px;
  width: 70px;
  height: 30px;
  background-color: #14a57a;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.advancedSearchContainerButton {
  left: -58px;
  top: 100px;
  width: 80px;
  height: 30px;
  background-color: #1149b3;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

#advsearch-button {
  border-radius: .25rem !important;
}

/* #pieChart svg text {
  font-size: 10px !important;
} */

.datatable-wrapper.expanded {
  -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  height: 75vh;
}

.datatable-wrapper {
  height: 50vh;
}
.dataTables_paginate,
.dataTables_filter {
  font-size: 11px;
}
.dataTables_info {
  font-size: 11px;
}

#jq_datatable th,
tr {
  font-size: 11px;
}
@media screen and (max-height: 1000px) {
  .datatable-wrapper {
    height: 44vh;
  }
}
@media screen and (max-height: 650px) {
  .datatable-wrapper {
    height: 40vh;
  }
  .dataTables_paginate,
  .dataTables_filter {
    font-size: 10px;
  }
  .dataTables_info {
    font-size: 10px;
  }

  #jq_datatable th,
  tr {
    font-size: 10px;
  }
}

.ui-autocomplete {
  z-index: 6002 !important;
  position: fixed !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: 200px;
}

.ui-autocomplete-loading {
  background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}

.dropdown-menu {
  z-index: 4002;
}

#search-message {
  color: #cc2a02;
}

.pieChart-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 45%;
  z-index: 9999;
  background: url('./images/loader-pie.gif') 50% 50% no-repeat rgb(232, 232, 232);
}

.loader {
  position: fixed;
  left: 0px;
  top: var(--navBarSize);
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('./images/loader.gif') 50% 50% no-repeat rgb(232, 232, 232);
}

.loader.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.leaflet-control-container .leaflet-top {
  top: 20px !important;
}

#btn_edit {
  padding: .200rem .30rem !important;
  font-size: 12px !important;
}

/* in modal */
#business_id {
  color: red;
  display: none;
}
#infousa_id {
  color: red;
}

#editModal {
  z-index: 2000;
}

#editModal h4 {
  padding: 0px;
  margin: 0px;
}

.modal-dialog {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 10px;
}

.modal-backdrop {
  display: none !important;
}

#editModal .modal_expand_container {
  display: none;
}

#editModal .modal_expand_container_editing {
  display: none;
}

.modal_location_edit_container {
  width: 100%;
}
.modal_location_edit_container div {
  width: 100%;
}
.modal_location_edit_container .header {
  background-color: #d3d3d3;
  font-weight: bold;
}
.modal_location_edit_container .content {
  display: none;
  /* padding : 5px; */
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 100%; /* aspect ratio */
  vertical-align: top;
  overflow: auto;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.distInputBox {
  position: absolute;
  width: 4em;
  height: 100%;
}