html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  display: flex;
}

calcite-loader {
  align-self: center;
  justify-self: center;
}

calcite-label {
  --calcite-label-margin-bottom: 0px;
}

#header-title {
  margin-left: 1rem;
  margin-right: 1rem;
}

#info-content {
  padding: 0.75rem;
}

calcite-rating {
  margin-top: 0.25rem;
}

#header {
  display: flex;
  padding: 0 1rem;
  background-color: var(--calcite-ui-foreground-1);
}

#header-controls {
  display: flex;
  margin-inline-start: auto;
  align-self: center;
}

.label-wrapper {
  display: flex;
  margin-inline: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--calcite-ui-border-1);
  cursor: pointer;
}

calcite-switch {
  margin: 0 0.5rem;
}

.panel-side {
  
  width: 0px;
  height: 96%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 60;
  margin: 6px;
}

#resultsDiv {
  
  z-index: 1;
}


#productresultsList{
  overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #bba7a7; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #8b7e7e; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

#toolbarDiv {
  cursor: default;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 8px;
  padding-left: 33%;
}

.esri-widget--button.active,
      .esri-widget--button.active:hover,
      .esri-widget--button.active:focus {
        cursor: default;
        background-color: #e3f10c;
      }
      .esri-widget--button.active path,
      .esri-widget--button.active:hover path,
      .esri-widget--button.active:focus path {
        fill: #E4E4E4;
      }

 /* Layer list check box icon */     
      .esri-icon-non-visible::before {
        content: "\e610";
        }
     .esri-icon-visible::before {
        content: "\e611";
        }

/*autocomplete CSS*/
/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: fixed;/*absolute;*/
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  /*top: 100%;
  left: 0;
  right: 0;*/
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/* CSS for info panel content*/
.info-contents {
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  height: 100vh;
}
/* ----------------------------*/