@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;
 /* --calcite-internal-button-background-color: black !important;  */
 /*var(--calcite-color-foreground-1)*/ 
} 

span.esri-icon-bookmark, span.esri-icon-basemap, span.esri-icon-layers{
	--calcite-color-text-3: white;
	/* --calcite-internal-button-text-color: black; */
}

/* calcite-button.esri-icon-bookmark:(not)focus, calcite-button.esri-icon-basemap:(not)focus, calcite-button.esri-icon-layers:(not)focus { */
    /* background-color: red !important; */
    /* --calcite-ui-icon-color: black !important; */
/* } */

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;
    /* --calcite-button-icon-color: black !important;  */
}
/* .esri-icon-layers:hover, .esri-icon-basemap:hover, .esri-icon-bookmark:hover */
/* { */
	/* --calcite-internal-button-background-color: #22326E !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;
	/* --calcite-color-text-2: black;  */
} 

/* span.esri-icon-layers:hover, span.esri-icon-basemap:hover, span.esri-icon-bookmark:hover { */
    /* color: black !important; */
/* } */

/* span.esri-icon-layers:not(hover), span.esri-icon-basemap:not(hover), span.esri-icon-bookmark:not(hover) { */
    /* color: black !important; */
	/* --calcite-internal-button-background-color: var(--calcite-color-foreground-1); */
	/* --calcite-ui-icon-color: white; */
/* } */

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

calcite-panel.esri-expand__panel{
	height: 700px !important;
	max-height: 700px !important;
}

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;
}