/* Copyright 2026 Esri
 *
 * Licensed under the Apache License Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	scrollbar-width: thin;
	scrollbar-color: #ffba1f #032235;
}

html,
body,
main {
	display: flex;
	font-family: 'Avenir Next';
	color: #efefef;
	font-size: 0.9375rem;
	height: 100dvh;
	width: 100dvw;
	overflow: hidden;
}

b,
strong,
h1,
h2,
h3,
h4,
h5 {
	font-family: 'Avenir Next';
}

img {
	object-fit: cover;
}

.hidden {
	position: absolute;
	visibility: hidden;
}

.invisible {
	display: none;
}

div .dark-background {
	background-color: #113149;
	color: #efefef;
}

div .transparent {
	background-color: transparent;
}

.link {
	color: #ffba1f;
}

.active {
	background-color: #ffba1f;
}

calcite-loader {
	--calcite-loader-text-spacing: 30px;
	--calcite-loader-text-weight: bold;
	--calcite-loader-text-size: 1rem;
	--calcite-loader-text-color: #efefef;
	--calcite-loader-progress-color: #0285a8;
}

.underline {
	text-decoration-line: underline;
	text-decoration-color: #ffba1f;
	text-decoration-thickness: 3px;
	text-underline-position: under;
	cursor: default;
}

.closeBtn {
	background-color: #113149;
	fill: #efefef;
	text-align: right;
}

.btn {
	cursor: pointer;
	font-family: 'Avenir Next';
}

.tooltip {
	position: relative;
}

button {
	border: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	background-color: transparent;
}

#viewDiv button:focus {
	border: 2px solid #007ac2;
	outline: 2px solid #007ac2;
}

.modal-content bold {
	color: #ffba1f;
	font-size: 1.141rem;
	font-weight: bold;
}

.tooltip .tooltip-text {
	visibility: hidden;
	z-index: 1;
	width: 288px;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	bottom: -100px;
	left: -82px;
	margin-left: -60px;
	line-height: 1.5;
	padding: 11px;
	font-size: 0.9rem;
}
.tooltip:hover .tooltip-text {
	visibility: visible;
}

.helpMessage {
	height: 100%;
	margin: 50% 0;
	text-align: center;
	font-size: 1.5rem;
}

.errorMessage {
  height: 100%;
  margin: 50% 0;
  text-align: center;
  font-size: 1.5rem;
}

.initAppLoader calcite-loader {
    --calcite-loader-text-color: #000000;
}

#viewDiv {
	height: 100%;
	width: 100%;
}

.legend-item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-bottom: 1rem;
}

.legend-image-spacing {
	width: 10%;
}

.legend-fire-img {
	text-align: center;
	align-content: baseline;
	width: 7%;
}

.legend-text {
	width: 80%;
	align-content: center;
}

.popImg {
	width: 50%;
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}
#mobileSideBarToggleArrow {
	display: none;
}

#mobileSideBarToggleArrow.rotate {
	transform: rotate(180deg);
}

#sideBar {
	font-size: 1rem;
	width: 416px;
	height: 100dvh;
	min-width: 416px;
	padding: 0 0.75rem;
}

#sideBarHeader {
	padding: 0 5px;
}
#sideBar #titleContainer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#sideBar .container {
	margin-top: 1.5rem;
}

#sideBar .sectionHeader {
	color: #ffba1f;
	font-size: 1.6rem;
}
#sideBar .sectionSubHeader {
	font-size: 1rem;
	margin-top: -0.5rem;
}

#sideBar .modal.btn {
	margin-top: -5px;
	padding: 0;
	border: 0;
}

.modal-content button:focus {
	outline: 2px solid #ffba1f;
	border: none;
	border-radius: 5px;
}

.modal-content a:focus {
	outline: 2px solid #ffba1f;
	border: none;
	border-radius: 5px;
}

#sideBar #incidentsContainer {
	height: calc(100% - 93px);
	max-width: 416px;
	margin: 0 auto;
}

#incidentsContainer #incidentList {
	padding: 1rem 1rem;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100% - 3px);
}

#sortingContainer .sortChoices {
	cursor: pointer;
}

#sortingContainer .sortChoices .underline {
	cursor: pointer;
}

#sortingContainer .sortChoices span:hover {
	color: #aaaaaa;
}

#sideBar button:focus {
	outline: 2px solid #ffba1f;
	border: none;
	border-radius: 5px;
}

#sideBar button.incidentItem:focus {
	padding-right: 2rem;
}

#sideBar .sortClass:focus {
	outline: 2px solid #ffba1f;
	border: none;
	border-radius: 5px;
}

#incidentsContainer .incidentItem {
	background: transparent;
	padding-left: 2rem;
	margin-bottom: 0.8rem;
	text-align: left;
}

#incidentsContainer .incidentItem p {
	color: #efefef;
	font-size: 1.1rem;
}

#incidentsContainer .incidentItem h5 {
	pointer-events: none;
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: -4px;
	color: #ffb600;
	line-height: 21px;
}

#incidentsContainer .incidentItem {
	cursor: pointer;
}

#dataContainer {
	padding: 0 1.2rem 3rem;
	height: calc(100% - 3px);
	overflow-y: auto;
}

#incidentAndContextDataContainer #incidentData bold {
	font-size: 1.414rem;
	font-weight: bold;
	color: #ffba1f;
}

#incidentAndContextDataContainer #incidentData .grid-container {
	display: grid;
	grid-template-columns: 45% 55%;
	grid-template-rows: auto auto;
	gap: 0px;
  align-items: center;
}

#incidentAndContextDataContainer #incidentData .grid-item {
	/* Optional: Style for the individual grid items */
	border: none;
	text-align: center;
}

.container .incident-content {
	margin-top: 0.6rem;
}
#incidentAndContextDataContainer #incidentData .grid-item.grid-title {
	text-align: right;
	align-content: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#incidentAndContextDataContainer #incidentData .grid-item.grid-content {
	text-align: left;
	padding-left: 10px;
}

#containment #svgContainer {
	width: 164px;
	height: 45px;
	position: relative;
	top: 0.7rem;
	right: 0.7rem;
}

#drought bold {
	color: #ffba1f;
	font-size: 1.414rem;
	font-weight: bold;
}

.weather-grid-header {
  word-wrap: break-word;
}

.truncate-string {
   white-space: nowrap;      /* Prevents the text from wrapping to a new line. */
  overflow: hidden;         /* Hides any text that overflows the container. */
  text-overflow: ellipsis;
}

.weather-data-content {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  word-wrap: break-word;
}

#populationData bold {
	color: #0285a8;
	font-size: 1.7rem;
	font-weight: bold;
}

#total-population p{
word-wrap: break-word;
}

#housingContent {
	display: flex;
	flex-direction: row;
}

#housingContent bold {
	color: #a5927c;
	font-size: 1.414rem;
	font-weight: bold;
}

#housingContent .housingData {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#ecologyData bold {
	color: #6aa067;
	font-size: 1.414rem;
	font-weight: bold;
}

#ecologyData #wildfire-risk-graph {
	padding: 0 5%;
}
#ecologyData .longList {
	color: #6aa067;
	font-weight: bold;
	line-height: 1.4;
}

#ecologyData .shortList {
	color: #6aa067;
	font-size: 1.414rem;
	font-weight: bold;
	line-height: 1.2;
}

#ecologyData #landCover #landCover-graph {
	fill: #6aa067;
	font-size: 1.414rem;
	font-weight: bold;
}

/* #landCover-graph .landcover {
  width: 145px;
} */

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

/* Track */
::-webkit-scrollbar-track {
	background: #032235;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #ffba1f;
}

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

.esri-ui-bottom-right.esri-ui-corner #measurementWrapper {
	width: 176px;
}

.esri-ui-bottom-right.esri-ui-corner
	#measurementWrapper
	calcite-label
	.esri-unit-select__label
	.container {
	color: #efefef;
}

#measurementWrapper {
	--calcite-internal-button-text-color: black;
	--calcite-color-brand: #efefef;
	--calcite-color-brand-hover: #ffba1f;
	--calcite-color-text-1: #efefef;
	--calcite-color-text-2: #efefef;
	--calcite-color-text-3: #efefef;
}

#measurementWrapper calcite-button {
	--calcite-font-weight-normal: bold;
}

.widget-btn-default-colors {
	cursor: pointer;
	background-color: #efefef;
	color: black;
}

#topRightWidgetContainer calcite-icon:hover {
  cursor: pointer;
  background-color: #f3f3f3;
}

.widget-btn-default-colors:hover {
	background-color: #ffba1f;
}

.layer-list-btn.esri-component button.widget-btn-default-colors:focus {
	background-color: #ffba1f;
}

.layer-container {
	display: flex;
	align-items: flex-start;
}

.layer-list-container {
	background-color: rgba(17, 49, 73, 1);
}

.layer-container .esri-legend__service:first-child {
	padding: 0;
}

.layer-container .esri-legend__service h3 {
	display: none;
}

.esri-ui-bottom-left.esri-ui-corner .layer-list-btn {
	width: 250px;
	margin-left: 10px;
	margin-bottom: 6px;
}

input {
	appearance: none;
	position: relative;
	width: 1rem;
	height: 1rem;
	border: 1px solid;
	line-height: 1;
	background: #021a26;
}

input[type='checkbox']::before {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	white-space: pre;
	content: ' ';
	color: white;
}

.checkmark {
	position: absolute;
	display: inline-block;
	transform: rotate(45deg);
	height: 14px;
	width: 9px;
	border-bottom: 3px solid #efefef;
	border-right: 3px solid #efefef;
	left: 9px;
}

.checkmark.disabled {
	opacity: 50%;
}

.layer-checkbox {
	height: 1.2rem;
	width: 1.2rem;
	margin-right: 5px;
}

.layer-title {
	/* this margin adjustment is to center the title string with the checkbox */
	margin: -2px 0 0 0;
	width: 80%;
}

.layer-title.disabled {
	color: #969696;
}
.layer-container .esri-legend__service:first-child {
	margin-left: 0;
}

div.layer-title
	div
	section
	.esri-legend__service.esri-legend__group-layer
	section {
	border-bottom: none;
}

div.layer-title
	div
	section
	.esri-legend__service.esri-legend__group-layer
	section
	+ section {
	display: none;
}

.layer-list-container.layer-list-visible-component {
	position: relative;
	max-height: 25rem;
	width: 17rem;
	bottom: -2.87rem;
	z-index: 1;
	padding: 10px 0px 55px 5px;
	overflow-y: auto;
}

.layer-list-container .airQuality {
  display: flex; 
  justify-content: space-around;
}

.layer-list-container .airQuality .categoryColor{
  height: 20px;
  width: 12%;
}

.layer-list-container .airQuality .categoryColor.moderate{
  background: #f2d39d; border: solid 2px #f2d39d;
}
.layer-list-container .airQuality .categoryColor.unhealthyForSensitiveGroup{
  margin-top: 10px; background: #e3a75d; border: solid 2px #e3a75d;
}
.layer-list-container .airQuality .categoryColor.unhealthy{
  background: #d47660; border: solid 2px #d47660;
}
.layer-list-container .airQuality .categoryColor.veryUnhealthy{
  background: #84638f; border: solid 2px #84638f;
}
.layer-list-container .airQuality .categoryColor.hazardous{
  background: #6e4951; border: solid 2px #6e4951;
}

@media screen and (max-width: 801px) {
	.mobile-bottom-position {
		position: relative;
		bottom: 1.5rem;
	}

	.mobile-bottom-right-position {
		left: 1.2rem;
	}

	.mobile-left-position {
		right: 2.2rem;
		padding-left: 0.313rem;
	}

	.esri-ui-bottom-left.esri-ui-corner .layer-list-btn {
		width: 210px;
		margin-left: 10px;
		margin-bottom: 6px;
	}

	#layer-list-container {
		width: 14rem;
	}

	.layer-list-container.layer-list-visible-component {
		width: 14rem;
	}

	#dataContainer {
		padding: 0 1.2rem 1rem;
		height: calc(100% - 42px);
		overflow-y: auto;
	}

	#sideBar {
		position: absolute;
		bottom: 0;
		width: 100%;
		min-width: 375px;
		height: 6vh;
		padding: 0px 100px 0;
		background: rgba(17, 49, 73, 0.85);
		border-radius: 25px 25px 0 0;
		z-index: 2;
		overflow: hidden;
		transition: 0.3s;
	}
    
	#mobileSideBarToggleArrow {
		display: block;
		fill: #efefef;
		position: relative;
		top: 6px;
		margin: 0 auto;
	}

	#sideBar.sideBar-mobile-open {
		height: 100dvh;
	}

	#sideBar.sideBar-mobile-close {
		height: 8dvh;
	}
}

@media screen and (max-width: 601px) {
	#dataContainer {
		padding: 0 1.2rem 1rem;
		height: calc(100% - 42px);
		overflow-y: auto;
	}

	#sideBar {
		position: absolute;
		bottom: 0;
		width: 100%;
		min-width: 375px;
		height: 33%;
		padding: 0px 0px 10px 0;
		background: rgba(17, 49, 73, 0.85);
		border-radius: 25px 25px 0 0;
		z-index: 2;
		overflow: hidden;
		transition: 0.3s;
	}
}

@media screen and (max-width: 450px) {
	#dataContainer {
		padding: 0 1.2rem 1rem;
		height: calc(100% - 42px);
		overflow-y: auto;
	}
	#sideBar {
		position: absolute;
		bottom: 0;
		width: 100%;
		min-width: 375px;
		height: 33%;
		padding: 0px 0px 0;
		background: rgba(17, 49, 73, 0.85);
		border-radius: 25px 25px 0 0;
		z-index: 2;
		overflow: hidden;
		transition: 0.3s;
	}
}

 .invisible {
    display: none;
  }