html{
  background: rgb(243 244 246 / 1);
  /* background: #998888; */
}
.monospace {
  font-family: monospace;
}

code,
kbd,
pre,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

code {
  /* font-size: 87.5%; */
  color: #e83e8c;
  word-wrap: break-word;
}

.no-select {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

.dropdown-content {
  border-radius: 10px;
}

.select-wrapper {
  /* background: rgba(255,255,255,.8); */
  border-radius: 10px;
}


.col {
  display: flex;
  flex-direction: column;
}

.col.center {
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /* margin-bottom: 8px; */
}

.row.center {
  justify-content: center;
}

/* body and main are both flex*/
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  font-family: Poppins;

}

.siteHeader {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;

  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
  justify-content: space-between;

  /* padding: 10px; */
  padding-left: 2rem;
  padding-right: 2rem;
  /* margin-left: auto;
  margin-right: auto; */
  background-color: #6f9e7c;
  height: 4rem;
}


.siteHeader__section {
  /**
    * Lay out the children of this container with
    * flexbox.
    */
  display: flex;

  /**
    * Align the children in the center, along
    * the main axis. By default the children will
    * align along their top edges.
    */
  align-items: center;
}

.siteHeader__item {
  padding: 5px 15px;
  font-size: 14px;
}

.siteHeader__item+.siteHeader__item {
  margin-left: 5px;
}

.siteHeader__item.is-site-header-item-selected {
  color: #FFFFFF;
  background-color: #00000059;
  border-radius: 4px;
}

.siteHeaderLogo {
  font-size: 20px;
  /* line-height: 0; */
  color: white;
}
.logo-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.siteHeaderLogo img {
  max-height: 45px;
}
.siteHeaderLogo img:hover {
  filter: drop-shadow(3px 3px 5px rgb(0 0 0 / 0.4));
}

.siteHeaderButton {
  cursor: pointer;
  color: #d8e7dc;
}

@media only screen and (max-width: 550px) {
  .siteHeaderButton {
    /* width: 100%; */
    display: none !important;
  }
  .siteHeaderButton.hamburger-menu{
    display: flex !important;
  }
  .siteHeader{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .siteHeader__section{
    display: flex;
    flex-direction: column;
  }
  .upload-container{
    margin-right: 0px !important;
    margin-left: 0px !important;
  }
}

.siteHeaderButton:hover {
  cursor: pointer;
  background-color: #00000032;
  border-radius: 4px;
}

@media only screen and (max-width: 930px) {
  .sideBar {
    width: 100%;
    display: none !important;
  }
}

@media only screen and (max-width: 950px) {
  .sideBar {
    width: 15vw;
    display: flex;
  }
}

.sideBar {

  flex-direction: column;
  justify-content: space-between;
  /* height: 85vh; */
  min-width: min-content;
  border-right: 1px solid #D7DBDD;
  background-color: #FCFDFD;
  padding: 10px;
  margin-top: 40px;
  width: 15vw;
  position: fixed;
  overflow-y: auto;
}

.sideBar__item {
  cursor: pointer;
  padding: 5px 10px;
  color: #16A2D7;
  font-size: 12px;
}

.sub__item {
  padding-left: 32px;
}

.sideBar__item.is-side-bar-item-selected {
  background-color: #EEF3F5;
  border-radius: 4px;
}

.cui-page {
  display: block;
  margin: 0 auto;
  max-width: 768px;
  padding: 40px 40px;
  /* overflow-y: auto; */
  max-height: 85vh;
  min-width: min-content;
  /* font-family: "Raleway", "Helvetica", sans-serif; */
}

.cui-page-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 32px;
  color: #2F3442;
}

.template-page-title {
  font-size: 24px;
  font-weight: 700;
  color: #2F3442;
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin:0;
}

.shadow{
  -webkit-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
}


.cui-page-sub-section {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 32px;
  color: #2F3442;
}

.cui-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  margin-top: 40px;
  margin-bottom: 40px;
  line-height: 1.5;
  background-color: white;
  border-radius: 4px;
}

.cui-panel-section {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  max-width: 100%;
}

.cui-content {
  padding: 32px;
  overflow-x: auto;
  color: #2F3442;
  font-weight: 400 !important;
}

.cui-content.table {
  padding: 0px;
}

.cui-content img {
  max-width: 750px;
}

.cui-description {
  margin-top: 32px;
  margin-bottom: 40px;
  color: #2F3442;
  font-weight: 400 !important;
}

.card {
  display: flex;

  flex-direction: column;

  border: 1px solid #CAD0D2;
  border-radius: 4px;
  overflow: hidden;
}

.card__description {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 15px 0;
}

.card__descriptionIcon {
  font-size: 32px;
  margin-bottom: 10px;
}

.card__descriptionText {
  color: #57727C;
  font-size: 12px;
  text-align: center;
  max-width: calc(100% - 30px);
}

.card__price {
  text-align: center;
  color: #57727C;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 15px;
  border-top: 1px solid #D7DBDD;
  background-color: #EEF3F5;
}

.card--fixedWidth {
  max-width: 120px;
}

/* .card--fullWidth{
  max-width: 750px;
}*/

.text-block.note {
  background-color: #003bff24;

}

/* Style for the wrapper */
.input-field {
  position: relative;
  /* width: 250px; */
  /* margin: 5px; */
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  margin-bottom: 0.5rem;
}
.input-title{
  font-size: 14px;
  margin-left: 0.5rem;
}
.checkbox-container{
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  background: white !important;
  border-radius: 5px !important;
  outline: none !important;
  color: black !important;
  font-family: inherit;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.25rem;
}

.input-field input[type="email"],input[type="password"],input[type="text"],input[type="datetime-local"],input[type="number"], input[type="file"],select,.ss-main {
  width: 100% !important;
  padding: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  background: white !important;
  border-radius: 5px !important;
  outline: none !important;
  color: black !important;
  font-family: inherit;
}

.input-field span {
  /* if you decide to add the borders make them a different color from the datetime border. also make sure the text color and side borders are the same color */
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-size: 1em;
  /* color: rgba(0, 0, 0, 0.25); */
  text-transform: uppercase;
  /* color: #00dfc4; */
  color: #4d4d4d;
  font-size: .65em;
  transform: translateX(10px) translateY(-16px);
  /* transform: translateX(20%) translateY(50%); */
  /* transform: translateX(20%) translateY(-100%); */
  padding: 0 5px;
  background: white;
  /* border-left: 1px solid black;
  border-right: 1px solid black; */
}

.formFooter {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;

  /**
   * Make the container put as much space as possible
   * between its children, with the children at either
   * end laying flush against the container's edges.
   */
  justify-content: space-between;

  /**
   * Align the children in the center, along
   * the main axis, which is horizontal in this case.
   */
  align-items: center;

  border-top: 1px solid #D7DBDD;
  padding: 10px;
}

.formFooter__section {
  /**
     * This container orders items horizontally.
     */
  display: flex;

  /**
     * It aligns them vertically in the center.
     */
  align-items: center;
}

.formFooter__item+.formFooter__item {
  margin-left: 5px;
}

.formFooterFeedback {
  color: #86969C;
  font-size: 12px;
  line-height: 0;
}

.formFooterSpinner {
  animation: formFooterSpinner 1s infinite steps(8, end);
}

@keyframes formFooterSpinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.button {
  cursor: pointer;
  padding: 5px 15px;
  color: #FFFFFF;
  background-color: #EE6C4D;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #EE6C4D;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  /*Safari*/
  -moz-user-select: none;
  /*Firefox*/
}

.button--clear {
  color: #ec5c38 !important;
  background-color: #FFFFFF !important;
  /* border: 1px solid #FFFFFF !important; */
  border: none !important;
}

.button:active {
  /* background: #e5e5e5; */
  -webkit-box-shadow: inset 0px 0px 5px #00000074;
  -moz-box-shadow: inset 0px 0px 5px #00000074;
  box-shadow: inset 0px 0px 5px #00000074;
  outline: none;
}

/* 
a{
  text-decoration: underline;
  color: #ec5c38;
} */

.formFooter__section a {
  text-decoration: none;
  /* text-decoration: underline; */
  color: #ec5c38;
}

.page {
  margin: 0 auto;
  /* padding: 40px 40px; */
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}




/* TODO ------------------------ CARDS ----------------------- */
.main_overview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* border-bottom: 1px solid lightgreen; */
}

/* .main_overview > div{
  flex: 1 1 150px;
} */

.grid-card-container{
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
}

.panel {
  /* needed for the flex layout*/
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 200px;
}

.tall-panel {
  grid-row-end: span 2;
}

.overview_card {
  flex-basis: 250px;
  flex-grow: 1;
  margin: 0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  /* background-color: seagreen; */
  height: 100px;
  /* border: 1px solid darkblue; */
  border-radius: 4px;
  /* color: darkblue; */
  background: white;
  /* -webkit-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15); */
}

.map_overview{
  height: 7rem;
}


.overview_card.center {
  justify-content: center;
}

.overview_card.half{
  height: 50px;
}

.margin-half-rem{
  margin: 0.5rem
}

/* Layout for main-cards section // below main_overview */
.main_cards {
  margin: 0.5rem;
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-rows: 500px 200px 300px;
  grid-template-areas:
    'card1'
    'card2'
    'card3';
  grid-gap: 10px;
}
/* Layout for main-cards section // below main_overview */
.map_card {
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 44rem;
  grid-template-areas:'card1';
  grid-gap: 10px;
  background: white;
  border-radius: 4px;
}

.card {
  padding: 20px;
  /* border: 1px solid tomato; */
  border-radius: 4px;
  /* color: tomato; */
  background:white;
  /* -webkit-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15); */
}

.card.no-pad {
  padding: unset;

}

.card.no-outline{
  border:unset
}

.card:first-child {
  grid-area: card1;
}

.card:nth-child(2) {
  grid-area: card2;
}

.card:nth-child(3) {
  grid-area: card3;
}
/* 
.card.r1{
  grid-row: 1;
}
.card.c1{
  grid-column: 2;
} */

.center-flex-container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-flex-container.first{
  margin-top: 10px
}
.upload-container{
  margin-top: 10px;
  margin-right: 2rem;
  margin-left: 2rem;

}

.upload-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  grid-gap: .5rem;
  margin: 5px;
  flex-grow: .5;
}
.grid-container-1-col {
  display: grid;
  grid-template-columns: 1fr;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  grid-gap: .5rem;
  margin: 5px;
  flex-grow: 1;
  font-size: 14px;
}
.grid-container-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  grid-gap: .25rem;
  margin: 5px;
  flex-grow: 1;
  font-size: 14px;
}
.grid-container-3-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /*grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));*/
  grid-gap: .5rem;
  margin: 5px;
  flex-grow: 1;
  font-size: 14px;
}


.grow-half{
  flex-grow: .5;
}
@media only screen and (max-width: 1130px) {
  .upload-grid-container {
    grid-template-columns: 1fr !important;
  }
  .grid-item.cspan-2{
    grid-column-end: span 1 !important;
  }
  .grid-item-1{
    grid-column-end: span 2 !important;
  }
  .checkbox-container{
    grid-template-columns: 1fr !important;
  }

  .grid-container-2-col{
    grid-template-columns: 1fr
  }
  .grid-container-3-col{
    grid-template-columns: 1fr
  }
  
}
.grid-title{
  padding: .25rem;
  margin-bottom: .5rem;
  font-weight: bold;
  place-self: start start;
}

.grid-action{
  display: flex;
  justify-content: end;
  margin-top: 1rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(0,0,0,0.3);
  width: 100%;
  place-self: end end;
}
/* .grid-item:last-child {
  background-color: black;
  justify-content: end !important;
} */
.grid-item{
  /* display: flex;
  flex-direction: column; */
  /* display: grid; */
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
  flex-grow: 1;
  margin:5px; 
  padding: 10px;
  /* border: 1px solid black; */
  border-radius: 4px;
  /*justify-content: center;*/
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  background: white;
}
.grid-item > .content{
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr 1fr;
 
}

/* .grid-item-icon > .content{
  /* display: grid; */
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
  flex-grow: 1;
  margin:5px; 
  padding: 10px;
  /* border: 1px solid black; */
  border-radius: 4px;
  /*justify-content: center;*/
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  background: white;
} */

.sc-item > span,
.sc-item > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .grid-item > span:last-child,
.grid-time > div:last-child{
  justify-content: end;
} */

.sc-item > .end{
  justify-content: end;
}
.sc-item > .center{
  justify-content: center;
}
.sc-item > .start{
  justify-content: start;
}

.sc-item.around{
  justify-content: space-around;
}


.grid-item-1{
  /* display: flex; */
  display: grid;
  /* border: 1px solid tomato; */
  /* grid-row-end: span 2; */
  justify-content: center;
  
  grid-template-columns: 1fr;
  /* min-height: 27rem; */
}
.grid-item.cspan-2{
  grid-column-end: span 2;
}
.scrollable{
  max-height: 12rem;
  overflow-y: auto;
  background: lightgray;
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3);
  border-radius: 4px; 
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-left: 1px solid rgba(0,0,0,0.1);;
}
.scrollable-small{
  max-height: 8rem;
  overflow-y: auto;
  background: lightgray;
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.3);
  border-radius: 4px; 
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-left: 1px solid rgba(0,0,0,0.1);;
}

.scrollable > .sc-item,
.scrollable-small > .sc-item{
  /* display: flex; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
  flex-grow: 1;
  margin:5px; 
  padding: 10px;
  /* border: 1px solid black; */
  border-radius: 4px;
  /*justify-content: center;*/
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3);
  background: white;
}

.selectable{
  padding: 6px !important;
  font-size: 12px;
}

.selectable:hover{
  cursor: pointer;
  /* background-color: #EE6C4D;
  color: white; */
}
.selectable.selected{
  cursor: pointer;
  background-color: #EE6C4D;
  color: white;
}

.grid-item-2{
  /* display: flex; */
  /* border: 1px solid darkblue; */
  grid-column-end: span 2;
}
.grid-item-3{
  /* display: flex; */
  /* border: 1px solid lightgreen; */
}

/* ------------------------ CARDS ----------------------- */


/* ------------------------ Map ----------------------- */
/*#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}*/
#map {
  display: flex;
  flex-grow: 1;
}

.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
/* ------------------------ Map ----------------------- */


.grow-1{
  flex-grow: 1;
}

col{
  flex-direction: column;
}

.chip-container{
  display: flex;
  flex-wrap: wrap;
}

.chip {
  font-size: 12px;
  text-align: center;
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  /* padding: .25rem; */
  padding: .25rem .5rem .25rem .5rem;
  border-radius: 1rem;
  /* border: 1px solid black; */
  background-color: #5465FF;
  color:white;
  margin: .25rem;
}
.chip > span{
  font-size: 12px;
  padding-left: .25rem;
  padding-right: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  place-content: center;
  justify-content: center;
  align-items: flex-start;
}

.mobile-modal{
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;

  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  place-content: center;
  justify-content: center;
  align-items: flex-start;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  /* margin: 10% auto; */
  margin: auto auto;
  /* 15% from the top and centered */
  padding: 20px;
  /* border: 1px solid #888; */
  /* width: 50vw; */  
  /* Could be more or less, depending on screen size */
  min-height: 25vw;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 25px #6c6666;
  -moz-box-shadow: 0px 0px 25px #6c6666;
  box-shadow: 0px 0px 25px #6c6666;
  flex-grow: .5;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.right {
  justify-content: flex-end;
}
.left {
  justify-content: flex-start;
}

.between{
  justify-content: space-between;
}

.ol-viewport{
  border-radius: 4px;
}

.upload-data-type-form{
  display: none;
}

.upload-data-type-form.selected{
  display: block;
}

.table-container{
  width: 100%;
  /* display: flex; */
}

.data-table-content-container {
  margin: 5px;
  flex-grow: 1;
  font-size: 14px;
}