/** Layout */

/*
CSS Grid layout 
generated with the help of https://cssgridgenerator.io/
*/

@media all and (max-width: 2500px) {
  .desktop {
    display: block;
    height: calc(100% - 2rem);
  }
  .mobile {
    display: none;
  }
  }
  @media all and (max-width: 544px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}
:root{
  --calcite-color-brand: #730000 !important;

}
.content-container {
  height: calc(100% ); /* - 2rem */
  display: grid;
  grid-template-columns: 400px repeat(5, 1fr);
  grid-template-rows: 1fr 1fr 255px;
  gap: 1rem;
  margin: 1rem;
}

#mapElement {
  grid-column: span 5 / span 5;
  /* grid-row: span 2 / span 2; */
  grid-row: 1 / 5;
  grid-column-start: 2;
  grid-row-start: 1;
}

#filterPanel {
  grid-row: span 3 / span 3;
  
}

#trailsTable {
  grid-column: span 3 / span 3;
  grid-column-start: 2;
  grid-row-start: 3;
}



#elevationPanel, #surveyPanel {
  grid-column: span 2 / span 2;
  grid-column-start: 5;
  grid-row: 1 / span 3;
  /* grid-row-start: 3; */
}

iframe {
  width:100%;
  height: 100%;
  overflow-y:auto;
  border: 0;  
}

#parkList {
  flex: 1;
}

/** Styling */

.content-container > * {
  border-radius: 8px;
  box-shadow: var(--calcite-shadow-sm);
  overflow: auto;
}

#elevationPanel calcite-chip-group {
  margin-inline-end: 0.5rem;
  align-self: center;
}

.calciteBlockNoPadding {
  --calcite-block-padding: 0;
}

calcite-shell.custom-theme, calcite-fab.custom-theme{
  --calcite-color-brand: #730000;
  padding-bottom: env(safe-area-inset-bottom);

}
calcite-shell.custom-theme1, calcite-fab.custom-theme{
  --calcite-color-brand: #730000; /* #00c291;*/
  --calcite-color-brand-hover: #00ad82;
  --calcite-color-brand-press: #00916d;
  --calcite-color-background: #f2f7f4;
  --calcite-color-foreground-1: #fafffd;
  --calcite-color-foreground-2: #edf7f3;
  --calcite-color-foreground-3: #e4ebe8;
  --calcite-color-foreground-current: #c7ffda;
  --calcite-color-info: #007f99;
  --calcite-color-success: #47ac35;
  --calcite-color-warning: #eeb417;
  --calcite-color-danger: #d92024;
  --calcite-color-danger-hover: #a91e20;
  --calcite-color-danger-press: #7c1315;
  --calcite-color-text-1: #222927;
  --calcite-color-text-2: #333d3a;
  --calcite-color-text-3: #3a4541;
  --calcite-color-text-inverse: #fafffd;
  --calcite-color-text-link: #04716c;
  --calcite-color-border-1: #c3c7c5;
  --calcite-color-border-2: #cdd4d0;
  --calcite-color-border-3: #dfe8e3;
  --calcite-color-border-input: #727d77;

  --vaadin-grid-cell-background: var(--calcite-color-background);
}

.custom-theme .esri-widget {
  background-color: var(--calcite-color-background);
}
calcite-navigation{
  --calcite-color-foreground-1: var(--calcite-color-brand);
  --calcite-color-foreground-2: var(--calcite-color-brand);
  --calcite-color-foreground-3: var(--calcite-color-brand);
  --calcite-navigation-background: var(--calcite-color-brand);
  --calcite-color-text-1: var(--calcite-color-text-inverse);
  --calcite-color-text-2: var(--calcite-color-text-inverse);
}
calcite-navigation-logo {
  /* color: var(--calcite-color-brand); */
  color: var(--calcite-color-text-inverse);
}

arcgis-search {
  display: flex;
  align-items: center;
  margin: 1rem;
}

.list-item-thumbnail-container {
  /* object-fit: cover; */
  position: relative;
  height: 100px;
  width: 120px;
  /* border: 1px solid var(--calcite-color-text-1); */
}

.list-item-thumbnail { 
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.list-item-thumbnail-multiple-images { 
  height:16px;
  position: absolute;
  top:0.2rem; 
  right:0.2rem;

}


.group-promoted1{
  --calcite-list-background-color: #730000; /*var(--calcite-color-brand);*/
  --calcite-color-text-2: var(--calcite-ui-text-inverse);
  
}

calcite-list-item-group {
  --calcite-list-background-color: var(--calcite-color-foreground-3);
}
calcite-list-item-group.promoted {
  --calcite-list-background-color: var(--calcite-color-brand);
  --calcite-color-text-2: var(--calcite-ui-text-inverse);
}


calcite-list-item{
  --calcite-list-background-color: var(--calcite-color-background);
}
calcite-list-item.promoted{
  --calcite-list-background-color: #e4f6f8;
  --calcite-list-background-color-hover: #e4f6f8;
  --calcite-list-description-text-color: var(--calcite-color-text-3);
  /* --calcite-color-text-1: var(--calcite-color-foreground-2); */
}

calcite-panel {
  --calcite-panel-header-background-color: var(--calcite-color-foreground-2);
  --calcite-panel-footer-background-color: var(--calcite-color-foreground-2);
  /* --calcite-flow-header-background-color: var(--calcite-color-foreground-2); */
}
#index-footer{
  font-size: var(--calcite-font-size--1);
}
/* calcite-flow-item{
  --calcite-flow-header-background-color: var(--calcite-color-foreground-2);
  --calcite-action-background-color: var(--calcite-color-foreground-2);
} */

.flow-item-header {
  --calcite-flow-header-background-color: var(--calcite-color-foreground-2);
  --calcite-action-background-color: var(--calcite-color-foreground-2);
}
.more-info-icon {
  --calcite-icon-color: var(--calcite-color-status-info);
}
.sheet-action {
  --calcite-action-text-color: var(--calcite-ui-text-inverse);
}

calcite-sheet > calcite-panel {
  --calcite-panel-header-background-color: var(--calcite-color-brand);
  --calcite-panel-heading-text-color: var(--calcite-ui-text-inverse);
  --calcite-panel-header-action-background-color: var(--calcite-color-brand);
  --calcite-panel-header-action-background-color-hover: var(--calcite-color-brand);
  --calcite-panel-header-action-text-color: var(--calcite-ui-text-inverse);
  --calcite-panel-header-action-text-color-press: var(--calcite-ui-text-inverse);
  --calcite-panel-header-action-background-color-press: var(--calcite-color-brand);
  /* --calcite-panel-header-action-text-color: red; */
}

calcite-link{
  --calcite-color-text-link: var(--calcite-ui-text-inverse);
}
calcite-link.promote{
  --calcite-color-text-link: var(--calcite-color-status-info);
  margin-left: 132px;
}

calcite-panel {
  --calcite-panel-header-action-background-color: var(--calcite-color-foreground-2);
  --calcite-panel-footer-background-color: var(--calcite-color-foreground-2);
  /* --calcite-panel-header-action-background-color-hover: var(--calcite-color-brand); */
}

#index-footer{
  font-size: var(--calcite-font-size--1);
}

.sheet-panel-logo{
  width:25px;
  padding-top: 10px;
  padding-left: 5px;
}

calcite-segmented-control{
  --calcite-color-foreground-1: var(--calcite-color-foreground-2);
}

.map__section {
  /* cursor: pointer; */
  pointer-events: fill;
  stroke: transparent;
  transition: stroke 0.25s ease-in-out;
  fill: var(--calcite-color-border-1);
}

.map__section_label {
  cursor: pointer; 
  pointer-events: none;
}

.map__section_has_cases {
  cursor: pointer; 
  fill: var(--calcite-color-text-3);
}
.map__section_has_cases:hover {
  stroke: #868686;
  stroke-width: 0.2rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map__section_selected {
  fill: var(--calcite-color-status-danger);
}

/* .map__section:hover {
  stroke: #868686;
  stroke-width: 0.2rem;
  stroke-linecap: round;
  stroke-linejoin: round;
} */
.map__sections{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#mobileIndexPanel{
  --calcite-panel-background-color: #e4f6f8;
}

calcite-loader {
  /* align-self: center;
  justify-self: center;
  margin: 0;
  position: absolute;
  top: 50%;

  -ms-transform: translateY(-50%);
  transform: translateY(-50%); */

  /* display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh; */
}
/* arcgis-map{
  padding: 0;
  margin: 0;
} */