@media (min-width: 768px) {

    div.pagedetails,
    main.container section section {
        width: 750px;
    }
}

@media (min-width: 992px) {

    div.pagedetails,
    main.container section section {
        width: 970px;
    }
}

@media (min-width: 1200px) {

    div.pagedetails,
    main.container section section {
        width: 1170px;
    }
}

@media (min-width: 1400px) {

    div.pagedetails,
    .container,
    main.container section section {
        width: 1370px;
    }
}

@media (min-width: 1800px) {

    div.pagedetails,
    .container,
    main.container section section {
        width: 1770px;
    }
}

.note-container {
    margin: 0.5rem 0 0.5rem 0;
    box-shadow: -0.0125em 0.125em 0.625em #969696;
    background-color: #eaebed;
    border: solid thin #a4afbd;
    border-radius: 0.4rem;
}

.note {
    font-size: 0.9em;
    padding: 0.5em 5em 0 0.75em;
}

.note > h2 {
    margin: 0.5rem 0 0.5rem 0;
}

.csge {
	font-weight:normal;
	font-size: 1.4rem;
	font-family:"Segoe UI", "Helvetica Neue", "Droid Sans", Helvetica, Arial, sans-serif;
	color:#545963 !important;
}

.csge button > label{
    line-height: 1em;
}

.csge .map-container {
    height: 43em; /* Default height */
}

@media (min-height: 72em) {
	.csge .map-container {
		height: 61em;
	}
}

@media (min-height: 86em) {
	.csge .map-container {
		height:64.5em;
	}
}

/**-------------------------------------------------------------------------**/
/**                              ESRI                                       **/
/**-------------------------------------------------------------------------**/
.csge .esri-ui {
    font-size: 1em;
}

.csge .esri-popup {
    cursor: default;
    z-index: 9999 !important;
}

.csge .esri-popup ul {
	padding-left: 2em;
	list-style:circle;
}

.csge .esri-popup a {
    text-decoration: none;
    color: initial;
    pointer-events: none;
}

.csge .esri-popup .popup-content-row a {
    /* for clickable data fields in popup */
    pointer-events: auto; 
    text-decoration: revert;
}

/** table **/
.csge .table-widget table thead th,
.csge .table-widget table tbody td {
    font-size: 1.1em;
    line-height: 1.6;
    padding: 0.5em;
    white-space: nowrap;
}

/** table controls **/
.csge .table-widget .controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
}

.csge .table-widget .select-container {
    display: flex;
    align-items: baseline;
}

.csge .table-widget .select-container>label {
    font-weight: bold;
    font-size: 1em;
    margin-right: 0.625rem;
    line-height: initial;
    white-space: nowrap;
    margin-bottom: 0;
}

.csge .table-widget .select-container .table_select {
    padding-right: 2rem; /* space for arrow icon */
    -webkit-appearance: none; /* removes default arrows */
    -moz-appearance: none;
    appearance: none;
    width: 30vw;
    height: 4vh;
    position: relative; 
}
    
@media (max-width: 1400px) {
    .csge .table-widget .select-container .table_select {
        width: 35vw;
    }
}

@media (max-width: 992px) {
    .csge .table-widget .select-container .table_select {
        width: 40vw;
    }
}

@media (max-width: 768px) {
    .csge .table-widget .select-container .table_select {
        width: 50vw;
    }
}

@media (max-width: 600px) {
    .csge .table-widget .select-container .table_select {
        width: 45vw;
    }
}

.csge .table-widget .select-container>i {
    position: absolute;
    right: 2.1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; 
    font-size: 1.1rem;
}

.csge .table-widget .select-container .table_select>ul {
    max-height: 25vh;
    width: calc(100% - 2rem); /* account for space used by icon */
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 0;
}

.csge .table-widget .toolbar-container{
    display: flex;
    justify-content: right;
}

.csge .table-widget .toolbar-container .filter-section::after{
    content: "|";
}

.csge .table-widget .toolbar-container .selection-section {
    margin-left: 10px;
}

.csge .table-widget .filter-container input:not(.input-container input){
    border: solid thin;
}

.csge .table-widget .buttons-container {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 10px;
}

/** symbols table **/
.csge-table-footer {
    max-width: 100%;
    box-sizing: border-box;
    overflow: auto;
    margin-bottom: 3rem;
    font-size: 1.6rem;
}

.csge-table-footer table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

/* caption styling (optional) */
.csge-table-footer caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding-bottom: 0.25rem;
}

/* override table row hover styles*/
.csge-table-footer table tbody tr:hover,
.csge-table-footer table tbody tr:hover td {
    background: transparent;
    color: inherit;
    cursor: default;
}

.csge-table-footer td {
    border: 1px solid #ccc;
    padding: 0.5rem;
    white-space: normal;
}

.csge-table-footer td:first-child{
    width: 6rem;
    text-align: center;
}

.csge .switch-container {
    display: flex;
    /* line-height: initial; */
    gap: 5px;
    align-items: center;
}

/* Responsive adjustments for table widget */
@media (max-width: 37.5rem) {
    .csge .controls-container {
        flex-direction: column;
    }

    .csge .controls-container>div {
        width: 100%;
    }

    .csge .table-widget .select-container>label {
    font-weight: bold;
    font-size: 1em;
    margin-right: 0.625rem;
    line-height: initial;
    white-space: nowrap;
}

}

/** toc **/
.csge .tree-node .breaks-container{
    line-height: normal;
}
.csge .infc-toc .tree-node[data-layer-node] > .node-content input[type='checkbox'],
.csge .infc-toc .tree-node[data-group-node] > .node-content input[type='checkbox']{
    display: none;
}

.csge .infc-toc .tree-node[data-variable-node] > .node-content input[type='checkbox']{
    appearance: none;
    display: flex;
}

.csge .infc-toc .tree-node[data-variable-node] > .node-content input[type='checkbox']::before{
    content:"\e68e";
    font-family: "CalciteWebCoreIcons";    
    font-size: 1.1em;
}

.csge .infc-toc .tree-node[data-variable-node] > .node-content input[type='checkbox']:checked::before{
    content:"\e68d";
}

.csge .tree-node .breaks-container{
    line-height: normal;
}

.csge .infc-toc .tree-node[data-layer-node]:not([data-variable-node])  > .node-content,
.csge .infc-toc .tree-node[data-group-node]:not([data-variable-node])  > .node-content{
    align-items: center;
}

.csge .infc-toc .tree-node > .node-content > .tree-label{
    padding-left: 0;
}

.csge .infc-toc .tree-node[data-layer-node] > .node-content > .expand-button
.csge .infc-toc .tree-node[data-group-node] > .node-content > .expand-button{
    padding-right: 0;
}

/* popup */
.esri-popup__content{
    overflow: visible;
    zoom: normal;
}

.csge .popup-content{
    height: 17.3em;
    overflow: auto;
}

.csge .popup-content-row{
    margin-bottom: 0.2em;
    font-size: 1.5em;
}

.csge .popup-content-row label{
    font-weight: bold;
	margin-bottom: 0;
	margin-right: 0.5em;
}

.csge .popup-buttons{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 1.2em;
    font-size: 1.3em;
}

.csge .popup-buttons{
    height: 2em;
}

.csge .checkbox-wrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.csge .checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.csge .checkbox-icon {
  transition: all 0.3s ease;
}

.csge .checkbox-icon .checkbox-visible {
  display: none;
}

.csge .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-icon .checkbox-visible{
    display: inline;
}

.csge .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-icon .checkbox-non-visible {
    display: none;
}

/** AOI widget**/
.csge .aoi-widget > label{
    margin: 0 0 0 1.2em;
}

.csge .aoi-widget .toggle-button,
.csge .aoi-widget .button-container:not(.drawing-tools),
.csge .aoi-widget .buffer-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0 0 1.2em 1.1em;
}

.csge .aoi-widget .toggle-button button,
.csge .aoi-widget .button-container button:not(.drawing-tools button){
    display:flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.csge .aoi-widget .toggle-button button i,
.csge .aoi-widget .button-container button i {
	padding-left: 0.3em;
}

.csge .aoi-widget .toggle-button button label,
.csge .aoi-widget .button-container button label {
    margin: 0;
}

/** Draw AOI **/
/* button focus outlines - required for accessibility */
.csge .aoi-widget .button-container button:not([aria-disabled="true"]):focus-visible {
    outline: 2px solid rgb(0, 0, 0);
    /* highlights enabled buttons that have focus */
    z-index: 1;
}

.csge .aoi-widget .button-container button:not([aria-disabled="false"]),
.csge .aoi-widget .button-container button:focus-visible label {
    outline: none;
    /* removes highlight from button labels and disabled buttons */
}

/** Draw AOI **/
/**** AOI drawing buttons ****/
.csge .aoi-widget .button-container.drawing-tools button{
	border-right: solid rgb(192, 192, 192) 1px;
}

.csge .aoi-widget .button-container.drawing-tools button:hover{
    background-color: rgb(206, 206, 221);
}

.csge .aoi-widget .button-container.drawing-tools button:first-child{
	border-left: solid rgb(192, 192, 192) 1px;
}

.csge .aoi-widget .button-container.drawing-tools .active{
    border-bottom: solid 2px #1b364c;
}

/** Draw AOI **/
/**** AOI import and export buttons ****/
/**** AOI reset and search buttons ****/
.csge .aoi-widget .button-container.export button,
.csge .aoi-widget .button-container.reset-search button {
    margin-right: 0.25em;
    background:#2d4764;
    border-bottom:solid 2px #00152c;
}

.csge .aoi-widget .button-container.export button:hover:not(.disabled),
.csge .aoi-widget .button-container.reset-search button:hover:not(.disabled) {
	background-color:#00152c;
}

.csge .aoi-widget .button-container.export button,
.csge .aoi-widget .button-container.reset-search button {
	color: white;
	font-weight: bold;
	border-radius: 0.2em;
}

/** Draw AOI **/
/**** Import button ****/
.csge .aoi-widget .button-container.import .box-input-files{
    flex-grow: 1;
    margin-right: 0.4em;
}

.csge .aoi-widget .button-container.import .box-input-files .drop-area-files{
    display: none;
} 

/** Draw AOI **/
/**** Input check boxes for file selector****/
.csge .aoi-widget .button-container.export-selector{
    justify-content: space-around;
    margin-bottom: 0.6em;
}


/** Draw AOI **/
/**** AOI buffer ****/
.csge .aoi-widget .buffer-container {
    margin-left: 2em;
}

.csge .aoi-widget .buffer-container input{
    width: 5em;
    text-align: right;
    height: 100%;
}

.csge .aoi-widget .buffer-container input:disabled{
    cursor: not-allowed;
    background-color: #F5F5F5;
}

.csge .aoi-widget .buffer-container label {
    margin-left: 0.25em;
    margin-bottom: 0;
}

/** view cursor **/
.csge .esri-view.draw-mode .esri-view-surface {
	cursor: crosshair;
}

/** custom screenshot icon **/
.fa.fa-camera {
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 1px;
}

#add_info > ul > li > a {
    margin-left: 1em;
}

/** legend **/
.csge .legend-overlay {
	z-index: 1000; /* keep above map but below other overlays for mobile */
}

.csge .infc-legend > label,
.csge .infc-legend .legend-label{
    line-height: 1.5;
    font-style: italic;
    font-size: 1.1em;
    margin-right: 1.2em;
    max-width: 19.5em;
}

.csge .infc-legend .legends-container{
    margin-top: 1em;
    max-height: 20em;
    overflow-y: auto;
}

.csge .infc-legend .legend-container{
    margin-bottom: 1em;
}


.csge .infc-legend .legend {
    margin-left: 1.2em;
    max-width: 24em;
    min-width: 15em;
}

.csge .infc-legend .breaks-container .break-line {
	line-height: 1.6;
}

.csge .infc-legend .polyline-legend .break-color{
    height: 0.25em;
}

.csge .infc-legend .point-legend .break-color{
    width: 0.5em;
    height: 0.5em;
    border-radius: 1em;
}

/**-------------------------------------------------------------------------**/
/**                              Overlays                                   **/
/**-------------------------------------------------------------------------**/

.csge .overlay.top-right {
    max-width: calc(100% - 7em);
}

.csge .overlay.top-right,
.csge .overlay.bottom-right{
    top: 1em;
    right: 3.5em;
}

.csge .overlay.bottom-left{
    bottom: 2em;
    left: 1em;
    top: unset;
}

.csge .overlay.bottom-left .overlay-panel .overlay-panel-header {
	display:none;
}

@media (max-width: 600px) {
    .csge .esri-ui-top-right.esri-ui-corner,
    .csge .overlay.top-right,
    .csge .map-ui-box.top-right{
        top: 3.5em;
	}
}

.csge .search-widget{
    top: 1em;
    left: 3.5em;
}

@media (max-width: 600px) {
    .csge .search-widget{
		width: calc(100% - 4.5em);
	}
}

.csge .overlay.bottom-right .overlay-panels > .overlay-panel > label {
    display: none;
}

.csge .overlay.basemaps-overlay, 
.csge .overlay.bookmarks-overlay, 
.csge .overlay.aoi-overlay, 
.csge .overlay.toc-overlay {
    z-index: 2000; /* keep above legend for mobile */
    line-height: 1.6;
}

.csge .basemap-gallery,
.csge .infc-toc {
    width: 28.5em;
    max-height: 30em;
    overflow-y: auto;
    overflow-x: auto; 
}

.csge .bookmarks {
    width: 24em;
}

.csge .bookmarks-list {
    max-height: 40em;
    /* width: 100%; */
}

.csge .aoi-widget{
    width: 20.5em;
}

@media (max-width: 600px) {
    .csge .aoi-widget,
    .csge .bookmarks,
    .csge .basemap-gallery,
    .csge .infc-toc {
        width: 100%;
    }
}


/**-------------------------------------------------------------------------**/
/**                              wZoom                                      **/
/**-------------------------------------------------------------------------**/
.csge .zoom-widget{
    margin-bottom: 0;
}

.csge .zoom-widget .zoom_in_button i,
.csge .zoom-widget .zoom_out_button i{
    font-weight: normal;
}

.csge .zoom-widget .zoom_in_button{
    border-bottom: none;
}

/**-------------------------------------------------------------------------**/
/**                              Shared                                     **/
/**-------------------------------------------------------------------------**/
.csge .zoom-widget,
.csge .screenshot-widget,
.csge .home-widget,
.csge .fullscreen-widget,
.csge .search-widget,
 .csge .toolbar-button{
    line-height: 1;
    box-sizing: border-box;
}

/**-------------------------------------------------------------------------**/
/**                              Widget:Selector                            **/
/**-------------------------------------------------------------------------**/
.csge .selector-widget{
    margin: 0 0 1em 0em;
}

.csge .selector-widget .selector-typeahead{
    width: 50vw;
}

.csge .selector-widget > label {
    font-weight: bold;
}


/**selector buttons**/
.csge .selector-typeahead  li.has-children{
    background-color: white !important;
    padding-left: 0em;
    padding-right: 0em;
}

.csge .selector-typeahead .dropdown-items{
    max-height: 20em;
}

.csge .selector-typeahead li > div {
    padding-left: calc(var(--depth, 0) * 2em);
}

.csge .selector-typeahead  li.has-children ul > li:first-child {
    border-top: solid thin rgba(0, 0, 0, 0.1);
}

.csge .selector-typeahead li.has-children > .tree-node label{
    font-weight: bold;
}

.csge .selector-typeahead .tree-node[data-group-node] > .node-content input[type='checkbox'],
.csge .selector-typeahead .tree-node[data-group-node] > .node-content > button,
.csge .selector-typeahead .tree-node[data-layer-node] > .node-content > button{
    display: none;
}


.csge .selector-typeahead .tree-node .node-content {
    align-items: center;
}

.csge .selector-typeahead .tree-node .node-content label{
    width: 100%;
}

.csge .selector-widget .selector-selected{
    margin-top: 1em;
}

.csge .selector-widget .selector-button{
    position: relative;
    background-color: #e8e8e8;
    border: solid 1px darkblue;
    border-radius: 5px;
    margin:1px;
}

.csge .selector-widget .selector-button label{
    position:relative;
    display:block;
    padding-right: 1.075em;
    margin:0 !important;
}

.csge .selector-widget .selector-button i{
    position: absolute;
    top:0;
    right:0;
    padding: 0.5em !important;
}