html,
body,

/*****Map Content Appearance*****/

#viewDiv {
  /* viewDiv is the main map view element*/
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: "Montserrat";
  --calcite-color-text-1: #036;
  --calcite-color-text-2: #036;
  --calcite-color-text-3: #036;
  --calcite-color-text-link: #cc3333;
  --calcite-color-background: #fff;

  /*  */
  --calcite-color-foreground-1: #fff;
  --calcite-color-foreground-2: #f5f5f5;
  --calcite-color-border-input: #369;
  --calcite-color-brand: #369;
  --calcite-color-brand-hover: #036;
  --calcite-color-brand-press: #fff;
  --calcite-color-border-3: #e4e4e4;

}

#viewDiv {
  /* adds a top buffer to make room for header*/
  height: calc(
    100% - 56px
  ); /* removes extra space below the map to compensate the added top margin*/
}

#calcite-action-resources-modal-mobile {
  display: none;
}

#calcite-action-group-mobile-shell-panel {
  display: none;
}

/* Adds space for mobile widget group*/
@media only screen and (max-width: 860px) {
  #viewDiv {
    height: calc(100% - 104px);
  }

  .custom-header {
    z-index: 1 !important;
    background-color: #003366;
  }

  #calcite-action-resources-modal-mobile {
    display: inline-block;
  }

  #calcite-action-resources-modal {
    display: none;
  }

  #calcite-action-modal-info {
    display: none;
  }
  #calcite-action-group-mobile-shell-panel {
    display: block;
  }

  #desktop-sidebar {
    display: none;
  }

  #tooltip-modal-container {
    display: none;
  }
}


.esri-widget__heading {
  color: #7e7e7e;
  /* font-family: "Montserrat"; */
}

/*Tip Manager*/

.pagination-center {
  display: flex;
  justify-content: center;
}

.modal-head {
  font-size: medium;
  font-weight: 600;
  font-family: "Montserrat";
  text-align: left;
}

.modal-body {
  font-size: medium;
  font-weight: 400;
  /* font-family: "Montserrat"; */
}

calcite-tip > img {
  height: 400px;
}

calcite-tip > p {
  width: 100% !important;
}

calcite-tip-manager {
  --calcite-tip-manager-height: 600;
  --calcite-tip-max-width: 2000;
  margin-bottom: 250px;
}

#grayout {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: #003366;
  opacity: 0.5;
  z-index: 1000 !important;
}

#tooltip-modal-container {
  z-index: 10000 !important;
  --calcite-dialog-footer-space: 10px;
}
#tooltip-modal-title,
#resources-modal-title,
#layers-modal-title,
#basemaps-modal-title,
#basemaps-modal,
#legend-modal-title,
#legend-modal,
#distance-modal-title,
#area-modal-title,
#print {
  /* font-family: "Montserrat"; */
  font-weight: bolder !important;
}

/*Adds a max width to the images within the tooltip modal*/
#tooltip-modal-image {
  max-width: 58vh;
}


#layers-search-input,
#layers-clearmap-button,
#layers-search-autocomplete,
#layers-search-input-mobile,
#layers-clearmap-button-mobile,
#layers-search-autocomplete-mobile {
  /* font-family: "Montserrat" !important; */
  font-weight: bolder !important;
}

.heading {
  /* font-family: "Montserrat"!important; */
  font-weight: bolder !important;
}

/* Solid button styling */

.solid-button {
  color: #fff;
}
/*Map Search*/
.sassy-theme .sassy-theme .esri-search__input-container,
.sassy-theme .esri-search__input::-moz-placeholder {
  color: #036;
  opacity: 1;
  /* font-family: "Montserrat"; */
}

.custom-combobox { 
  margin: 0px 15px 10px 15px;
  gap: 10px;
  align-items: center; 
  display: flex;
}

.basemap-dropdown {
  width: 60%;
}

/*Map Scalebar*/
.esri-scale-bar.esri-widget {
  background: transparent;
  box-shadow: none;
}

.esri-scale-bar__label {
  color: #003366;
  /* font-family: "Montserrat"; */
  border-bottom: #003366;
}

/*****App Header*****/

/* Main Header Display */
.custom-header {
  z-index: 2;
  display: flex;
  padding: 0 1rem;
  max-height: 56px;
  background-color: var(--calcite-ui-foreground-1);
  /* font-family: "Montserrat"; */
}

/*Aligns Department Map button in header*/
.custom-header-controls {
  margin-inline-start: auto;
  align-self: center;
}

/*Logo and Header title*/
.logo-light {
  display: flex;
  width: 50px;
  height: 35px;
  align-self: center;
}

.title-light {
  /* font-family: "Montserrat"; */
  font-weight: bold;
  color: #036;
}

/*Department Map Button and Label*/
.btns {
  color: #fff;
  padding-right: 3pt;
}

.btn-switch {
  cursor: pointer;
}

.active-map {
  color: #fff;
}

/*****Main Body****/

/*loader wheel*/
calcite-loader {
  align-self: center;
  justify-self: center;
}

/*Widgets*/
.about {
  /* font-family: "Montserrat"; */
  font-weight: semi;
  font-size: 20;
  color: #336699;
  text-align: left;
  background-color: #fff;
}

.resource_tile {
  --calcite-ui-text-link: #036;
  --calcite-icon-color: #cc3333;
  --calcite-ui-text-3: #383838;
  --calcite-border-width-sm: 0px;
  --calcite-font-weight-medium: 1.4;
}

#layers-action-panel {
  display: none;
}

#properties-container {
  display: none;
}

#properties-container-mobile {
  display: none;
}

#layer-action-panel-mobile {
  display: none;
}

/*Mobile Panel*/
.sassy-theme--mobile-panel {
  --calcite-action-group-gap: 0px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.new-info {
  height: fit-container;
  margin-right: 5px;
}

.properties-panel {
  background-color: #fff;
  padding: 10px;
}

.combo-box {
  padding-bottom: 24px;
}

.opacity-tool {
  padding-bottom: 24px;
}

.opacity-button {
  height: 30px;
  padding-bottom: 24px;
}

#print-container {
  height: 80vh;
}



#legend-container {
  height: 80vh;
}

#opacity-selector-container {
  display: none;
}

.divider {
  border-top: 1px dotted black;
}

/* #calcite-action-group-mobile-shell-panel {
  display: none;
} */

#calcite-action-bar-main {
  margin-top: 1px;
  border-width: 0px;
}

#search-layer-attributes-operators-num,
#search-layer-attributes-values-num,
#search-layer-attributes-operators-num-mobile,
#search-layer-attributes-values-num-mobile {
  display: none;
}

/* .esri-measurement-widget-content__actions{
  height: 30px;
  margin-bottom: 20px;
  margin-top: 20px;
  appearance: "outline";
  /* color: #fff ; 
} */

.solid{
  border-top: 0.75px solid #f8f8f8;
  width: 100%;
}

.content{
  overflow: hidden;
}

.basemap-title {
  display: flex;
  align-items: center; 
  gap:10px;
  color: #383838;
  width: 50%
}