/*Checked for WCAG*/
@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: 160px !important;
        height: 340px !important;
        width: 700px !important;
    }
	
    calcite-panel.esri-expand__panel {
        min-height: 230px !important;
    }

    .imgCenter {
        width: 250px !important;
        height: 250px !important;
        object-fit: contain;
    }

    #plaqueDiv {
        width: 30%;
    }
}

@media (min-width: 585px) and (max-width: 719px) {
    #splash-content {
        overflow: hidden !important;
        position: absolute !important;
        top: 210px !important;
        height: 55% !important;
        width: 100% !important;
    }

    calcite-panel.esri-expand__panel {
        min-height: 230px !important;
    }

    .imgCenter {
        width: 250px !important;
        height: 250px !important;
        object-fit: contain;
    }

    #plaqueDiv {
        width: 30%;
    }
}

@media (min-width: 501px) and (max-width: 584px) {
    #splash-content {
        position: absolute !important;
        top: 210px !important;
        height: 60% !important;
        width: 100% !important;
    }

    calcite-panel.esri-expand__panel {
        min-height: 230px !important;
    }

    .imgCenter {
        width: 150px !important;
        height: 150px !important;
        object-fit: contain;
    }

    #plaqueDiv {
        width: 30%;
    }
}

@media (max-width: 500px) {
    #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;
    }

    .imgCenter {
        width: 150px !important;
        height: 150px !important;
        object-fit: contain;
    }

    #plaqueDiv {
        width: 30%;
    }
}

@media (max-width: 390px) {
    #splash-content {
        overflow: scroll !important;
        position: absolute !important;
        top: 0px !important;
        height: 100% !important;
        width: 100% !important;
    }

    #logo {
        height: 25px !important;
    }

    calcite-panel.esri-expand__panel {
        min-height: 230px !important;
    }

    .imgCenter {
        width: 250px !important;
        height: 250px !important;
        object-fit: contain;
    }

    #plaqueDiv {
        width: 30%;
    }
}

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*/
    overflow: hidden;
}

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

h6 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

h3 {
    font-size: x-large !important;
}

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

img {
    vertical-align: middle;
}

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

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

table {
    font-family: Avenir Next,Helvetica Neue,helvetica,arial,sans-serif !important;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    text-align: left !important;
    padding: 8px !important;
}

calcite-flow, .esri-features {
    width: auto !important;
    display: flex !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;
}

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

.myCardSection {
    overflow: auto;
}

.cardSectionRow {
    width: 100%
}

.imgCenter {
    height: 360px;
    width: 360px;
    object-fit: contain;
}

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

/* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}

.coaContainer {
    padding: 0 !important;
    margin-left: 0px;
    margin-top: 2px !important;
    height: 100%;
}

.bio {
    overflow-wrap: break-word;
    text-align: justify;
}

.esri-expand__panel-content {
    overflow: scroll !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;
}

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

#viewDiv {
    padding-top: 2px;
    position: absolute;
    right: 0;
    top: 0px;
    bottom: 0;
    width: 100%;
}

#itemDiv {
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0;
    width: auto;
    color: #22326E;
}

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

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

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

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

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

#panel {
    float: right;
    right: 20px;
    top: -3px !important;
}

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

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

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

#mapDisclaimer {
    text-align: right;
    padding: 20px !important;
}

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

#plaq {
    width: 50%;
    float: left;
}

#pic {
    width: 50%;
    float: left;
}