body .csge {
	font-size: 1.6rem !important;
	font-family:Arial, sans-serif!important ;
	font-weight:normal;
	padding:0;
    margin-top:0;
	color: #000;
    background-color: #fff;
}

abbr[data-original-title], abbr[title] {
    text-decoration: none;
}

.csge>div>a {
    font-size: 0.9em;
}

.csge h2 {
	font-weight: bold;
	font-size: 1.6em;
	margin-bottom: 0;
}

.csge h3 {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 0;
}

/**-------------------------------------------------------------------------**/ 
/**                             Application                                 **/
/**-------------------------------------------------------------------------**/

/* how to use modal window */
#htu .modal-body ul li .fa-li .squarecon{
    display: flex;
    align-items: center;
}

#htu .modal-body ul li .nostats {
    width: 1.2em;
    height: 1.2em;
    background-color: rgba(245, 15, 15, 0.5);
    border: 1px solid #000;
    display: inline-block;
    margin-right: 0.22em;
}

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

/**-------------------------------------------------------------------------**/
/**                              overlays                                   **/
/**-------------------------------------------------------------------------**/
.csge .overlay{
    max-width: calc(100% - 4.1em);
}

.csge .toc-overlay{
    top: 1em;
    right: 1em;
}

.csge .overlay-panel-buttons{
    margin-bottom: 0 !important;
}

.csge .overlay-panel-content {
    overflow: auto;
}

.csge .basemaps-overlay,
.csge .stats-overlay{
    top: 3.5em !important;
    left: 3.1em !important;
    width: 20vw;
}

.csge .toc-overlay {
    width: 24em;
    max-height: 100vh;
    padding: 0.5em 1em 1em 1em;
}


.csge .stats-overlay.top-left label,
.csge .toc-overlay.top-right label {
    font-size: 0.95em;
}

.csge .overlay-panel .overlay-panel-header {
    margin-bottom: 0;
}

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

    .csge .toc-overlay-button label {
        display: none; /* toc button label */
    }
}
/**-------------------------------------------------------------------------**/
/**                              Widget:Zoom                                **/
/**-------------------------------------------------------------------------**/
.csge .zoom-widget {
    margin-bottom: 0.7em;
}

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

/**-------------------------------------------------------------------------**/ 
/**                              Widget:Map                                 **/
/**-------------------------------------------------------------------------**/
/* Map container */
.csge .map-container {
    height: 50em;
}

.csge .map-container .esri-view .esri-view-surface {
	cursor : pointer;
}

/* map popup */
.csge .esri-popup ul {
	padding-left: 1em;
	list-style: circle;
}

.csge .popup-reference-label {
    font-size: 1.6em;
}

/**-------------------------------------------------------------------------**/ 
/**                              widget:TOC                                 **/
/**-------------------------------------------------------------------------**/
.csge .toc {
    position: relative;
}

.csge .toc .tree-container {
    min-width: 0;
}

.csge .toc .tree-node {
    line-height: 1.6em;
 }

 .csge .toc .tree-node .more-info {
    margin-left: 0.5em;
    color: #2d4764;
 }

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

.csge .toc .tree-node[data-group-node] > .node-content > .tree-label{
    padding-left: 0;
}

.csge .toc .tree-node[data-raster-node] > .node-content {
    padding-left: 1.8em;
}

.csge .toc .tree-node[data-raster-node] > .node-content .expand-button {
    display: none;
}

 .csge .tree-node .node-content {
    align-items: baseline;
 }

 .csge .toc .node-content button {
     height: 0.01em;
     width: 0.01em;
 }
 
 .csge .toc .node-content .expand-button {
     height: auto;
 }

 .csge .toc .node-content .raster-square {
    margin-left: 0.5em; 
    height: 0.9em;
    width: 0.9em;
    aspect-ratio: 1 / 1;
    border: 0.01em solid lightgrey;
 }

.csge .toc .toc-buttons {
    float: right;
}

 .csge .toc .toc-buttons>button {
     margin-right: 0.25em;
     background: #2d4764;
     border-bottom: solid 2px #00152c;
     color: white;
     font-weight: bold;
     border-radius: 0.2em;
 }

 .csge .toc .toc-buttons>button:hover {
     background-color: #00152c;
 }

/* extra margin for 2nd divider */
.csge .toc .tree-container>div>div.tree-node.divider-node:nth-of-type(2) .divider-label {
    margin-top: 1em;
}

/**-------------------------------------------------------------------------**/ 
/**                              widget:Table                               **/
/*****************************************************************************/
/*  Applies to all the tables on this app all of them inherit from wTable    */
/**-------------------------------------------------------------------------**/
.csge .table-widget table {
    max-height: 21.5em;
    border: solid thin silver;
    font-size: 0.875em;
	overflow-y: scroll;	
}

.csge .table-widget table tr > *:first-child { 
	display:none;
}

.csge .table-widget table thead th {
    text-align: center;
    position: sticky;
    top: 0;
    background: rgb(240,240,240);
    border-bottom: solid thin silver;
}

.csge .table-widget table tbody {
    border-bottom: solid thin silver;
    border-top: solid thin silver;
}

.csge .table-widget table th,
.csge .table-widget table td {
    font-size: 1em;
    padding: 0.5em;
    border-right: solid thin lightgray;
    width: 40em;
}

.csge .table-widget table td:nth-child(3) {
    text-align: right;
}

.csge .table-widget table tr:nth-child(even) {
    background: rgb(240,240,240);
}

.csge .table-widget table tbody tr td:not(:first-child) {
    cursor: default;
}

/**-------------------------------------------------------------------------**/ 
/**                              widget:KeyStats                            **/
/**-------------------------------------------------------------------------**/
/*****************************************************************************/
/*            Applies to the table that appears on top of the map            */
/**-------------------------------------------------------------------------**/
.csge .key-stats {
    width: 100%;
}

.csge .key-stats .table-message {
    font-size: 0.875em;
    font-style: italic;
    line-height: normal;
}

.csge .key-stats .table-widget {
    margin: 0;
    max-height: 19.2em;
}

.csge .key-stats .table-widget table {
    margin-right: 0.16em;
    max-height: 18em;
    overflow-y: auto;
}

.csge .key-stats .table-widget table thead {
    border: none;
}

.csge .key-stats .table-widget table>thead>tr>th {
    background-color: #1b364c;
    color: #fff;
    font-size: 0.8em;
    border: none;
    white-space: normal;
}

.csge .key-stats .table-widget table tbody tr td {
    cursor: default;
    line-height: normal;
    font-size: 0.8em;
    white-space: normal;
}

/**-------------------------------------------------------------------------**/ 
/**                              widget:StatsTable                          **/
/**-------------------------------------------------------------------------**/
/*****************************************************************************/
/*            Applies to the tables that appear below the map                */
/**-------------------------------------------------------------------------**/

.csge .stats-widget h2{
    font-weight: bold;
}

.csge .stats-widget .stats-details {
    margin-top: 0.9em;
}

.csge .stats-widget .table-widget {
    margin: 0;
    border: solid 1px black;
    font-size: 0.9em;
}

.csge .stats-widget .stats-details summary {
    font-size: 0.9em;
    background-color: #eaebed !important;
    color: #335075 !important;
    padding: 0.4em 0.6em 0.4em 0.9em !important;
}

.csge .stats-widget .table-widget table thead th {
    padding: 0.5em;
}

.csge .stats-widget .table-widget table tbody tr td {
    cursor: default;
    font-size: 1.1em;
    padding: 0.5em;
    white-space: normal;
}

/** buttons above stats tables **/
.csge .stats-table-buttons {
    display: flex;
    align-items: center;
    justify-content: right;
}

/* Set the second column width to 50% for both th and td elements */
.csge .stats-table table tr th:nth-child(2),
.csge .stats-table table tr td:nth-child(2) {
    width: 50% !important;
}

.csge .stats-table table td:nth-child(n+3) {
    text-align: center;
}

/** this css is applied to all the stats tables (includes key-stats) **/
.csge .stats-table .table-title h3 {
    margin: 0.6em 0 0.6em 0;
    flex-basis: 100%;
    font-size: 1em;
}

.csge .stats-table .table-title h3.table_name {
    margin: 0.6em 0 0.4em 0;
}

.csge .stats-table .table-title h4.table_subtitle {
    margin: 0 0 0.6em 0;
    flex-basis: 100%;
    font-size: 0.8em;
}

.csge .stats-table .stats-table-buttons {
    display: flex;
    justify-content: flex-end;
}

.csge .stats-table .table-link-container {
    font-size: 0.9em;
    line-height: normal;
    margin: 0.9em 0 0.9em 0;
}

/**-------------------------------------------------------------------------**/ 
/**                              widget:Search                              **/
/**-------------------------------------------------------------------------**/
.csge .search-widget {
    top: 1em;
    left: 3.1em;
}

.csge .search-widget .typeahead input:disabled {
    cursor: not-allowed;
}

.csge .search-widget .typeahead ul{
    max-height: 25vh;
}

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

/**-------------------------------------------------------------------------**/ 
/**                              SHARED CSS                                 **/
/**-------------------------------------------------------------------------**/

/**-------------------------------------------------------------------------**/ 
/**                              Media Queries                              **/
/**-------------------------------------------------------------------------**/
@media (max-width: 600px) {
    .csge .toc-overlay,
    .csge .basemaps-overlay,
    .csge .stats-overlay{
		width: 100%;
	}
}
@media (min-height: 72em) {
    .csge .map-container {
        height: 61em;
    }
}

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