/* @media (min-width: 600px) { */
    /* .esri-bookmarks { */
        /* width: 300px; */
        /* right: 0px; */
    /* } */
	/* calcite-panel.esri-expand__panel{ */
		/* height: 900px !important; */
		/* max-height: 900px !important; */
	/* } */
/* } */

html,
body,
#viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: Avenir Next,Helvetica Neue,helvetica,arial,sans-serif !important; /*added for consistent font*/
}

h3 {
    font-size: medium !important;
}

.button .icon-container {
    display: block !important;
}

.esri-search__form:focus {
    border-color: #22326E !important;
}

.esri-menu__list-item--active, .esri-menu__list-item--active:hover, div.esri-menu__header {
    border-left-color: #22326E !important;
}

div.esri-menu__header {
    background-color: #22326E !important;
}

.container, .content__body {
    display: none !important;
}

.content {
    background-color: none !important;
}

.esri-ui {
    inset: 0px 1px 2px 5px !important;
}

.esri-zoom {
    position: absolute;
    top: 0px !important;
}

.esri-ui-inner-container {
    inset: 10px 5px 5px 0px !important;
}

.esri-home, .esri-locate {
    position: absolute;
}

.esri-home {
    top: 75px !important;
}

.esri-locate {
    top: 115px !important;
}

.esri-attribution {
    display: none !important;
}

.esri-legend__layer-table {
    margin-bottom: 0px !important;
}

.esri-layer-list__item-content-bottom .esri-legend__service {
    padding: 0px !important;
}

.esri-layer-list__item-content-bottom {
    margin: 0px !important;
}

/*Extended CSS below is based on cemeteries app */
#splashInfoButton {
    position: absolute;
    z-index: 995 !important;
}

calcite-button.esri-widget--button:not(focus) {
    background-color: #22326E;
    --calcite-ui-icon-color: white !important;
}

calcite-button.esri-widget--button:focus{
    background-color: white;
    --calcite-ui-icon-color: black !important; 
}

calcite-button.esri-widget--button:hover {
    background-color: #dfdfdf;
    --calcite-ui-icon-color: black !important;
}


/*Search button is not a calcite button so separate styling is needed for control*/
.esri-search__sources-button:not(hover), .esri-search__submit-button:not(focus){
    background-color: #22326E !important;
    color: white !important;
}

.esri-search__sources-button:hover, .esri-search__submit-button:hover, 
calcite-button.esri-widget--button:hover
{
    background-color: #dfdfdf !important;
    color: black !important;
}

.esri-search__input { /*COA Brand blue for text color*/
    color: #22326E;
}

.esri-view-user-storage {
    float: left;
    position: absolute;
    top: 170px;
    margin-left: 5px;
}

#buttonArea {
    display: flex;
    flex-direction: column;
    top: 200px;
    margin-bottom: 5px;
}

#splashInfoButtonId {
    margin-top: 15px;
    margin-bottom: 20px;
}

span {
    font-size: 14px !important;
}

calcite-flow, .esri-features {
    --custom-width: 300px !important; /* Define a custom property */
    width: var(--custom-width); /* Use the custom property */
}

.esri-features {
    width: 300px !important;
    display: contents !important;
}

.esri-bookmarks {
    box-sizing: border-box;
    box-shadow: 2px 2px 15px 2px;
    top: 0;
    right: 40px;
    position: relative;
    z-index: 999;
    display: flex;
}

.esri-bookmarks__bookmark-content-label {
    color: #22326E !important;
}

#logo {
    height: 75px;
    padding: 0 !important;
    margin: 0 !important;
}

#logoAction:not(focus), #logoAction:focus, #logoAction:hover {
    background-color: white !important;
    border: none !important;
}

#mapDisclaimer {
    text-align: right;
}

p {
    text-align: justify;
    font-size: 12pt;
    margin-top: 2px !important;
    margin-bottom: 10px !important;
}

.dialog {
    height: 80% !important;
}

#bookmarkButton {
    margin-top: 10px !important;
    top: 0;
    right: 10px;
    position: fixed;
}

#bookmarkButton:focus {
  border: none !important;
  border-color: white !important;
}

#splashDialogId {
    height: 80% !important;
    color: #22326E !important;
}

.header, div.heading {
    padding: none !important;
}

.header-content {
    margin-left: 50px !important;
    justify-content: center !important;
}

.link {
    --calcite-color-text-link: var(--my-brand-color);
    --calcite-color-brand-underline: none !important;
    --calcite-color-brand: var(--my-brand-color);
}

calcite-button[href]:not(focus) {
    --calcite-color-brand: none !important;
    text-decoration: none !important;
}

calcite-button[href]:focus {
    --calcite-color-brand: var(--calcite-color-text-link);
    text-decoration: underline solid var(--calcite-color-text-link);
}

.esri-attachments__item-mask {
    display: none !important;
}

.iconClass {
    background-image: url('../Images/aboutMap.png') !important;
}

/* Custom CSS to hide the bookmark heading */
.esri-bookmark__heading {
    display: none !important;
}

.header-content {
    margin-top: 23px !important;
    font-size: xx-large !important;
}

.coa-custom-theme {
    --calcite-color-brand: #22326E; /*2025 COA dark blue brand color*/
	--calcite-color-brand-hover: #f3f3f3;
    --calcite-color-brand-press: white;
	--calcite-color-brand-pressed: #22326E;
    --calcite-color-background: white;
    --calcite-color-foreground-1: #22326E;
    --calcite-color-foreground-2: #22326E; /* to get rid of white on hover for logo */
    --calcite-color-info: #267121; /* dark green */
    --calcite-color-success: #308e29; /* medium dark green */
    --calcite-color-warning: #f1c21b; /* dark yellow */
    --calcite-color-danger: #d83020; /* medium dark red */
    --calcite-color-danger-hover: #a82b1e; /* dark red almost maroon */
    --calcite-color-danger-press: #851012; /* maroon */
    --calcite-color-text-1: white; /* #3a3335 charcoal gray */
    --calcite-color-text-2: black; /* #3d3638 darker charcoal gray - splash text*/
    --calcite-color-text-3: white;
    --calcite-color-text-inverse: #ffffff; /* white */
    --calcite-color-text-link: #267121; /* dark green */
    --calcite-color-border-1: #e6ddd1; /* beige */
    --calcite-color-border-2: #22326E; /*This is being used as color for logo link press #e8e1dc lighter beige */
    --calcite-color-border-3: #22326E; /* used for logo border*/
    --calcite-color-border-input: #a1a19e; /* medium gray */
	--calcite-color-focus: #22326E;
    --calcite-font-size-0: 24px;    
    --calcite-spacing-xxxl: 32px;
    --calcite-spacing-md: 32px !important;
    --calcite-internal-button-padding-y-internal: 0px !important;
    --calcite-internal-button-padding-x-internal: 0px !important;
    --calcite-internal-button-padding-x: 0px !important;
    --calcite-internal-button-background-color: #22326E !important; 
    --calcite-panel-background-color: white;
    --calcite-panel-foreground-color: white;
    --calcite-panel-color: white;
    --calcite-panel-heading-text-color: white;

    background-color: var(--calcite-color-background);
}

calcite-dialog {
    --calcite-dialog-border-color: var(--calcite-color-background);
    --calcite-color-foreground-3: #22326E;
    --calcite-color-text-1: white !important;
}

:root.heading {
    line-height: unset !important;
    position: absolute !important;
    top: 30px !important;
}

#splashDialogId {
    --calcite-dialog-background-color: white !important; /*body text*/
    --calcite-action-text-color: #000;
    --calcite-action-background-color-hover: var(--calcite-color-brand-hover);
    --calcite-action-background-color-pressed: var(--calcite-color-brand-pressed);
    --calcite-action-text-color: #000;
    --calcite-action-text-color-pressed: #000 !important;
    --calcite-action-text-color-hover: #6e6e6e !important;
    --calcite-panel-header-background-color: var(--calcite-color-brand);
    --calcite-panel-footer-background-color: white !important;
    position: absolute !important;
    --calcite-font-size-0: xx-large !important;
    text-align: left !important;
    top: 30px !important;
}

[aria-label="Close"], #close {
    background-color: #22326E !important;
    --calcite-ui-icon-color: white !important;
}

span.parkSpacesClass {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #22326E !important;
}

.parkSpacesClass{
    color: black !important;
}

button.esri-icon-layers:hover, button.esri-icon-basemap:hover, button.esri-icon-bookmark:hover, button {
    color: black !important;
	calcite-ui-icon-color: var(--calcite-internal-button-background-color) !important;
} 

span.esri-icon-bookmark, span.esri-icon-basemap, span.esri-icon-layers{
	--calcite-color-text-3: white;
}

calcite-button:(not)focus {
	color: red;
  --calcite-ui-icon-color: red !important;
}

calcite-button.esri-widget--button{
    color: red !important;
	--calcite-button-icon-color: black !important;
}

span.esri-icon-layers:not(hover), span.esri-icon-basemap:not(hover), span.esri-icon-bookmark:not(hover),
span.esri-icon-layers:not(focus), span.esri-icon-basemap:not(focus), span.esri-icon-bookmark:not(focus),
{  
	--calcite-color-text-3: red !important;
} 

.searchClass{
	position:absolute !important;
	left: 50px;
}

calcite-action#close {
    border: 1px solid white !important;
    --calcite-action-text-color: #000;
	--calcite-action-border-color: #000;
    --calcite-action-background-color-hover: var(--calcite-color-brand-hover);
    --calcite-action-background-color-pressed: var(--calcite-color-brand-pressed);
    --calcite-action-text-color-pressed: #000 !important;
    --calcite-action-text-color-hover: #6e6e6e !important;
}

@media (min-width: 720px) and (max-width: 8000px) { /* between 501 and 768 mid to small screens*/  
	#splash-content {
		overflow: hidden !important;
		position: absolute !important;
		top: 210px !important;
		height: 400px !important;
		width: 700px !important;
	}
	calcite-panel.esri-expand__panel{ 
		min-height: 230px !important; 
	}
}

@media (min-width: 585px) and (max-width: 719px) { /*<= 500 small screens*/  
	#splash-content {
		overflow: hidden !important;
		position: absolute !important;
		top: 210px !important;
		height: 55% !important;
		overflow-y: scroll !important;
		width: 100% !important;
	}
	calcite-panel.esri-expand__panel{ 
		min-height: 230px !important; 
	}
}

@media (min-width: 501px) and (max-width: 584px) { /*<= 500 small screens*/ 
	#splash-content { 
		position: absolute !important;
		top: 210px !important;
		height: 60% !important;
		overflow-y: scroll !important;
		width: 100% !important;
	}
	calcite-panel.esri-expand__panel{ 
		min-height: 230px !important; 
	}
}

@media (max-width: 500px) { /*<= 500 small screens*/  
	#splash-content {
		overflow: hidden !important;
		position: absolute !important;
		top: 0px !important;
		height: 100% !important;
		width: 100% !important;
	}
	calcite-panel.esri-expand__panel{ 
		min-height: 230px !important; 
	}
	.esri-expand__content-container, .esri-expand__panel-content, .esri-expand__sheet {
		overflow: scroll !important;
	}
}

@media (max-width: 390px) { /*<= 500 small screens*/
    #splash-content {
        overflow: scroll !important;
        position: absolute !important;
        top: 0px !important;
        height: 100% !important;
        width: 100% !important;
    }
    h1{
        left: 20px !important;
    }
    #logo{
        height: 25px !important;
    }
	calcite-panel.esri-expand__panel{ 
		min-height: 230px !important; 
	} 
	.esri-expand__content-container, .esri-expand__panel-content, .esri-expand__sheet {
		overflow: scroll !important;
	}
}

#logo {
	background-color: #22326E !important;
}

#logoAction:not(focus), #logoAction:focus, #logoAction:hover {
  background-color: #22326E !important;
  border: none !important;
  cursor: pointer;
}

#appHeader{
	text-align: center;
	top: 80px;
	position: absolute;
	left: 190px;
}

#close-btn {
    padding: 10px 20px;
    background-color: #22326E !important;
    color: white !important;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    top: 25px; 
    right: 3px;
}

#splash-screen {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
	color: white;
  
	display: flex;
	justify-content: center;
	align-items: center;
  
	z-index: 1000;
	font-family: Arial, sans-serif;
  
	min-height: 100vh;
	/* min-width: 250px !important; */
}

#close-btn:hover {
  background-color: #e64a19;
}

#logoDiv{
	height: 130px;
}

#info{
	margin: 30px;
}

#header{
	height:85px;
    display: inline;
    position: absolute;
    border: 2px solid #22326E;
    background-color: #22326E !important;
    width: 100%;
}

#logoAction{
	position: absolute !important;
	float: left !important;
}

#content{
	left: 0px;
	width: 100%;
	position: fixed;
	margin-top:100px;
}

/* Content inside the splash screen */
#splash-content {
	text-align: left;
  	background-color: white !important;
	color: #22326E !important;
	margin-right: 100px;
	margin-left: 100px;
	min-width: 250px !important;

	overflow: hidden;
	position: absolute;
	top: 110px;
	height: 60%;
}

h1{
	float: left;
	position: absolute;
	left: 160px;
	color: white;
}

#welcomeInfo {
	text-align: justify;
    font-size: 12pt;
    margin-top: 85px !important;
    margin-bottom: 10px !important;
	padding: 20px;
}

p.otherInfo{
	text-align: justify !important;
    font-size: 12pt !important;
	margin-left: 20px !important;
	margin-right: 20px !important;
}

#mapDisclaimer{
	padding:20px !important;
}

.esri-bookmarks {
    box-sizing: border-box;
    box-shadow: 2px 2px 15px 2px;
    top: 0;
    right: 0px !important;
    position: relative;
    z-index: 999;
    display: flex;	
}

calcite-flow, .esri-features {
    width: auto !important;
    display: flex !important;
}

.searchClass {
	position: relative !important;
}

.esri-expand__panel-content{
	overflow: scroll !important;
}