@CHARSET "ISO-8859-1";
/**
 *  */

:root {
        /* Variables used to specify the colors of selected labels.
         * Set by javascript based on the current color scheme.
         */
	--in-selection-color: rgb(0,0,0);
	--in-selection-background-color: rgb(0,255,56);

	--load-time: 200ms;
	--load-delay: 800ms;

	--button-color: black;
	--dialog-header-background: #CBD1EA;
	--dialog-body-background: #D2E3FF; /* #CBDBF6; */
	--pressed-button-color: #b0ffb0;
  --chm-table-color: #0843c1;
	--selected-button-color: #00abcd;
	--disabled-button-color: #7f7f7f;
	--button-background-color: #efefef;
  --ngchm-error-color: #DC143C;

	box-sizing: border-box;
}

/* Default button appearance.
 */
button {
    all: revert;
    color: var(--button-color, blue);
    background-color: var(--button-background-color);
    display: block;
    border: 1px solid var(--button-color, blue);
    border-radius: 0.4rem;
    z-index: 2;
}

button:disabled {
    color: var(--disabled-button-color);
}

button:disabled:hover {
     color: var(--disabled-button-color);
     background-color: var(--button-background-color);
}

button.pressed {
    background-color: var(--pressed-button-color);
}

button.selected span.button {
    background: var(--selected-button-color);
}

button.red {
    color: red;
    border: 1px solid red;
}

button:hover {
    color: #0000af;
    background-color: #d6d6ff;
}

button.text-button {
    border: none;
    padding: 0;
}

button.make-primary[data-version='P'] {
    background-color: var(--pressed-button-color);
}

.buttonSet {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
}

div.client_icons > .buttonSet:first-child,
div.client_icons > button:first-child {
    margin-left: 0.5em;
}

div.icon_group.client_icons .buttonSet button {
    vertical-align: top;
}

svg {
    display: block;
}

.collapsed .paneScreenMode {
    display: none;
}

.paneScreenMode button {
    display: none;
}

.paneScreenMode[data-expanded='true'] button.shrinker {
    display: block;
}
.paneScreenMode[data-expanded='false'] button.expander {
    display: block;
}

.paneMenuIcon svg:nth-child(1) {
    display: block;
}
.paneMenuIcon svg:nth-child(2) {
    display: none;
}

.paneMenuIcon:hover svg:nth-child(1) {
    display: none;
}
.paneMenuIcon:hover svg:nth-child(2) {
    display: block;
}

.menuSvg {
    display: inline-block;
    font-size: 1.25em;
    margin-right: 0.7em;
    vertical-align: top;
}

/* Extra class added to selected labels.
 * Used for coloring their text and background colors.
 */
.inSelection {
	color: var(--in-selection-color);
	background-color: var(--in-selection-background-color);
}

body.NgChmViewer {
	margin: 8px;
	width: calc(100vw - 16px);
	height: calc(100vh - 16px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

div.mdaServiceHeader
{
	position: relative;
	display: grid;
	grid-template-columns: fit-content(0) auto 1fr auto;
	grid-gap: 0;
	float: none;
	width: 100%;
	height: 58px;
	margin: 0px 0px 0px 0px;
	background-color: white;
	border-bottom: 4px solid #da0505;
	font-family: sans-serif;
}

div.mdaServiceHeaderLogo
{
	left: 0px;
	display: inline-block;
	width: auto;
}

#ngchmLogo
{
    padding: 0px 20px 0px 0px !important;
}

div.mdaServiceHeaderLogo img
{
	height: 54px;
}

div.paneHeader {
	display: flex;
	width: 100%;
	background-color: #cccccc;
	font-family: sans-serif;
	font-weight: bold;
	margin: 0px 0px 4px 0px;
	padding: 5px 5px 5px 5px;
}

div.paneHeader.activePane {
	/* background-color: #ccccff; */
}

div.paneTitle {
	margin: 2px;
	display: inline-block;
	flex-grow: 0;
	max-width: calc(100% - 27px);
}

div.icon_group {
	display: inline-block;
	vertical-align: top;
	align-items: end;
	margin-right: 5px;
	padding-right: 5px;
}

div.icon_group button {
    display: inline-block;
    vertical-align: middle;
}

div.icon_group.client_icons {
    flex-grow: 5;
    display: inline-grid;
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
    align-items: start;
}

div.icon_group.client_icons button {
    height: 26px;
}

span.tdTop {
	display: inline-block;
}

div#bottom_buttons span.tdTop img {
	margin-top: 3px;
}

div.collapsed img.gearIcon {
	display: '';
}

div.collapsed div.icon_group.client_icons {
	display: none;
}

div.pane.collapsed {
    overflow: visible;
}

div.ngChmContainer {
	position: relative;
	display: flex;
	margin: 0px;
}

div.vertical.ngChmContainer {
	flex-direction: column;
}

div.pane {
	position: relative;
	overflow: hidden;
}

div.pane canvas {
	position: absolute;
}

#pref_buttons {
    margin-bottom: 0.5em;
}

#pref_buttons button {
    background: transparent;
    border: none;
}

#pref_buttons button:first-child  {
    margin-left: 0.5em;
}

#prefActions div.buttonRow button:disabled,
#pref_buttons button:disabled {
    opacity: 25%;
}

.upm_label_type {
  width: 15em;
}

.msgBox,
#msgBox {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#msgBox > :nth-child(2),
.msgBox > :nth-child(2) {
    display: block;
    overflow-y: auto;
}

.msgBoxTxt,
#msgBoxTxt {
    display: inherit;
    font-size: 12px;
    box-sizing: border-box;
}

.msgBox button:disabled,
#msgBox button:disabled {
    opacity: 25%;
}

.msgBoxProgressBar,
#msgBoxProgressBar {
    width: 100%;
}

.file-viewer,
.save-heat-map {
    max-width: 35em;
}

/* #content contains everything between the page header and footer.
 * Initially it contains the splash screen.
 * Once loading commences it's replaced by the loading screen.
 * After loading completes, the loading screen is replaced by the ngChmContainer.
 */
#content {
        position: relative;
	width: 100%;
	flex-grow: 1;
}

#splash {
	position: absolute;
	max-width: 50em;
	height: 100%;
	overflow-y: auto;
}

#loader {
	position: absolute;
	top: 4em;
	left: auto;
	right: auto;
	padding: 2em;
	border: 2px solid rgb(0,0,255);
	margin: 4em;
	max-width: 50em;
	border-radius: 2em;
	box-shadow: 0.5em 0.5em 1em rgb(127,127,200);
	z-index: 4;
}

#closeSplash {
	position: absolute;
	top: 1em;
	right: 2em;
	font-size: 10pt;
	padding: 0.1em;
}

#splashWaiting {
	font-style: italic;
	font-weight: bolder;
	font-weight: larger;
	color: blue;
}

#ngChmContainer {
	position: absolute;
	overflow: hidden;
	display: block;
	height: 100%;
	width: 100%;
	border-bottom: 1px solid white;
	opacity: 0;
}

#loader p {
	margin-block: 0.5em;
}

#footer {
	height: 1px;
	background-color: white;
}


.resizerHelper {
    position: relative;
    background-color: #666666;
    z-index: 99;
}

.resizerHelperRight {
    height: calc(100% - 10px);
    width: 5px;
    border-left: 1px solid rgb(181, 188, 199);
    border-right: 1px solid rgb(181, 188, 199);
    /* Also alter verticalDividerMargins if you modify margin-left or margin-right. */
    margin-left:10px;
    margin-right:10px;
    cursor: ew-resize;
    margin-top: 5px;
}

.resizerHelperBottom {
    height: 5px;
    width:100%;
    border-top: 1px solid rgb(181, 188, 199);
    border-bottom: 1px solid rgb(181, 188, 199);
    /* Also alter horizontalDividerMargins if you modify margin-top or margin-bottom. */
    margin-top:10px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    cursor: ns-resize;
}

.resizerHelper:hover {
     background-color: LightBlue;
}

.resizerSplitterHorizontal {
    position: absolute;
    top: 30%;
    bottom: 30%;
    right: 48%;
    left: 48%;
    background-color: white;
}

.resizerSplitterVertical {
    position: absolute;
    top: 48%;
    bottom: 48%;
    right: 30%;
    left: 30%;
    background-color: white;
}

#burgerMenuPanel {
    position:absolute;
	width: 275px;
    right: 0px; 
	z-index: 10000;
	background-color: #FFFFFF; 
	border-left: 1px solid gray; 
	border-bottom: 1px solid gray; 
	border-top: 1px solid gray; 
}

.menuPanel {
	position:absolute;
	width: fit-content;
	width: -moz-fit-content;
	min-width: 140px;
	border-radius: 10px;
	z-index: 10000;
	background-color: #FFFFFF;
	border: 1px solid gray;
	margin-top: 1px;
	margin-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

div.paneHeader img {
	padding: 1px;
}

div.paneHeader button {
    font-size: 1.0em;
    height: 26px;
    width: 26px;
    padding: 4px;
}

.menuHeader {
	padding: 1px 10px 1px 10px;
	background-color: #ccccff;
	font-variant-caps: small-caps;
}

.menuItem {
	padding: 1px 10px 1px 10px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.menuItem.disabled {
	color: grey;
}

.menuItemBorder {
	border-bottom: 1px solid gray; 
	padding: 0px 5px 5px 10px;
}

.menuItemTop {
	padding: 5px 10px 1px 10px;
}

.menuItem:hover {
     background-color: LightGray;
     cursor: pointer; /* hint to user this is clickable */
}

.menuItem.disabled:hover {
     background-color: WhiteSmoke;
}

.menuItem img {
	vertical-align: middle;
	margin-right: 1em;
	height: 1em;
}

/* menuItem withSubItems are not clickable
 * Example: "2D Scatter Plot" with special coordinate sub items.
 * */
.menuItem.withSubItems{
	background-color: #ffffff;
	cursor: default;
}
.menuItem.withSubItems:hover{
	background-color: #ffffff;
}

/* The sub items are clickable
 * Example, "PCA (row)" 2D scatter plot
 * */
.menuSubItem{
	padding: 1px 10px 1px 30px;
	cursor: pointer;
}

.gearPanel {
	position: absolute;
	border-radius: 10px;
	z-index: 10000;
	background-color: #FFFFFF;
	border: 1px solid gray;
	margin-top: 1px;
	margin-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 0.5em;
	background-color: #f7f7f7;
}

.optionsBox {
	display: grid;
	margin-bottom: 3em;
	grid-template-columns: [labels-start] auto [labels-end content-start] auto [ contents-end ];
	grid-row-gap: 0.4em;
	grid-column-gap: 0.2em;
}

.optionsBox .nodeSelector,
.optionsBox .userLabel,
.optionsBox .rangeSelector,
.optionsBox .discreteSelector,
.optionsBox input,
.optionsBox select {
	grid-column-start: contents;
}

.optionsBox .leftLabel {
	grid-column-start: labels;
}

.optionsBox .grouper {
	display: contents;
}

#messageOpen_btn {
    position: absolute;
    vertical-align: top;
    font-size: 54px;
}

.buttonBox {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#msgBox-for-keynav {
    max-width: 35em;
}

#pdfPrefs .buttonBox,
#msgBox-for-keynav .buttonBox {
    margin-top: 2em;
}

#pdfPrefs > :nth-child(2) {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

label[for="pdfCustomResolution"] {
    text-align: right;
}

#pdfCustomResolution {
    width: 15em;
}

#font-and-paper-options {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 4px;
}

#font-and-paper-options label {
    margin-left: 5px;
    margin-right: 5px;
}

#font-and-paper-options select {
    margin-right: 5px;
}

#pref_buttons,
.msgBoxButtons {
    /* Parameters: */
    --grid-layout-gap: 10px;
    --grid-column-count: 3;
    --grid-item--min-width: 100px;

    /* Calculated values: */
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    /* The layout: */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);

    padding-left: 10px;
    padding-right: 10px;
}

.msgBoxButtons img {
    padding: 0.2em;
    border: 2px solid #e6f0ff;
    border-radius: 1em;
}

.spanbuttonwrapper {
    padding: 0.4em 2px;
}

.msgBoxButtons .default img {
    border: 2px solid #3377b4;
    border-radius: 1em;
}

button.default > span {
    border: 2px solid #3757be;
    border-radius: 1em;
}

.gearPanel .buttonBox {
	display: flex;
	margin-bottom: 1em;
	margin-right: 1em;
	justify-content: space-evenly;
}

.gearPanel .fill {
	flex: 1 1;
}

.gearPanel .buttonBox img {
	margin-left: 1em;
}

.gearPanel div {
	margin-top: 1em;
	margin-left: 0.5em;
}

.gearPanel div .leftLabel::after {
	content: ':';
}

.gearPanel div.rangeSelector,
.gearPanel div.discreteSelector,
.gearPanel div.userLabel {
	margin: 0;
	font-size: 0.7rem;
}

.gearPanel div.nodeSelector {
	margin: 0.2em 0 0.5em 0;
	font-size: 0.7rem;
}

span.button {
	padding: 0.25em 0.5em;
	background: linear-gradient(0deg, #2a447f, #447afd);
	color: white;
	border-radius: 1em;
	font-weight: bold;
	font-size: 0.8rem;
	cursor: pointer;
	white-space: nowrap;
}
span.button.positive {
	background: linear-gradient(0deg, #285013, #37741c);
}
span.button.negative {
	background: linear-gradient(0deg, #6b0000, #cc0000);
}

span.button.tab-button {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.gearPanel div.userLabel .leftLabel::after,
.gearPanel div.rangeSelector.leftLabel::after,
.gearPanel div.discreteSelector.leftLabel::after,
.gearPanel div.nodeSelector .leftLabel::after {
	margin-right: 0.5em;
}

.gearPanel div.nodeSelector span.button {
	font-size: 0.7rem;
	background: linear-gradient(0deg, hsla(188,98%,25%,1), hsla(188,98%,50%,1));
	padding: 0.2em 0.4em;
}

#row_dendro_canvas, #column_dendro_canvas{
	position: absolute;
}

#summary_chm {
    width: 100%;
    height: 100%;
    min-height: 50px;
    max-height: 100%;
    min-width: 100px;
    vertical-align:top;
    margin-left: 3px;
    display:inline-block;
    position:relative;
}

.summary_canvas {
	position:absolute;
	zIndex:1;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
}

#summary_box_canvas {
	position:absolute;
	pointer-events: none;
}

.detail_box_canvas {
	position:absolute;
	pointer-events: none;
}

.selection_canvas{
	position: absolute;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	z-index: 9999;
}

#classBarLabels{
	height:95%;
	width:95%;
	pointer-events:none;
}

.detail_chm {
    width: 100%;
    height: 100%;
    min-height: 50px;
    max-height: 100%;
    min-width: 100px;
    vertical-align:top;
    display:inline-block;
}

.detail_canvas {
	position:absolute;
	height:82%;
	zIndex:1;
	outline: none;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
}

#detail_buttons {
}

#top_buttons {
	margin-left:auto;
}

#bottom_buttons{
	display: block;
	margin-top: 2px;
}

#settings_buttons{
	display:inline;
	margin-top:auto;
	margin-bottom:auto;
	margin-right:0px;
}

#flicks {
	display:inline-block;
}

#flickViews[data-state='flickUp'] svg {
    transform: rotate(270deg);
}

#flickViews[data-state='flickDown'] svg {
    transform: rotate(90deg);
}
#flickViews select {
    background-color: white;
}
#flickViews[data-state='flickUp'] #flick1 {
    background-color: yellow;
}
#flickViews[data-state='flickDown'] #flick2 {
    background-color: yellow;
}

/* Neither svg displayed by default. */
button#layers_open_close div {
    display: none;
}

/* Display the open svg in the open state. */
button#layers_open_close[data-state='open'] div.open {
    display: block;
}

/* Display the closed svg in the closed state. */
button#layers_open_close[data-state='closed'] div.closed {
    display: block;
}

#helptext {
    margin: 5px !important;
    padding: 10px 10px 10px 10px !important;
    border: 1px solid #1a1a1a;
    border-radius: 15px;
    font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: normal;
    background: #dddddd;
    color: #000000;
    min-width: 100px;
    z-index: 10000;
    text-align: center;
    box-shadow: 5px 5px 5px #777777;
    position: absolute;
}

#helpprefs {
    margin: 5px !important;
    padding: 8px 8px 8px 8px !important;
    border: 1px solid #1a1a1a;
    border-radius: 15px;
    font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: normal;
    background: #dddddd;
    color: #000000;
    z-index: 10000;
    text-align: center;
    height: auto;
    width: auto;
    box-shadow: 5px 5px 5px #777777;
    white-space: nowrap;
}

.input-color {
    position: relative;
}
.input-color input {
    padding-left: 0px;
}
.input-color .color-box {
    width: 30px;
    height: 15px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 0px;
    top: -8px;
    border: 1px solid var(--chm-table-color);
}

.chmTblRow {
	display: table-row;
    height: 0px;
	padding: 0px;
    font-size: 0.80rem !important;
    font-family: Arial;
    font-weight: normal;
    color: var(--chm-table-color);
    vertical-align: middle;
    text-align: left;
}

.chmTblRow td.label,
.chmTblRow.header {
    font-weight: bold;
}

.chmTblRow.header td {
    padding-top: 1em;
}

.chmTblRow.entry td.label {
    padding-left: 0.7em;
    white-space: nowrap;
    vertical-align: text-top;
}

.chmTblRow textarea {
    width: calc(100% - 22px);
    margin-left: 20px;
    margin-right: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0;
}

/* Style plugin help table links same color/font as table text.
   Links will still be underlined.
*/
.chmTblCell>a {
	color: #0843c1; /* blue */
}
.chmTblCell>a:visited {
	color: #7525c1; /* purple */
}

.chmHdrRow tr {
	display: none;
    height: 0px;
	padding: 0px;
    font-size: 0.80rem !important;
    font-family: Arial;
    font-weight: normal;
    color: #0843c1;
    vertical-align: middle;
}

.chmHdrRow td {
	font-size: 0.80rem !important;
    font-family: Arial;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #0843c1;
}

.chmTblCell {
	padding: 5px;
}


.searchItem{
	background-color: yellow;
}

.DynamicLabel{
	position: absolute;
	overflow: hidden;
	text-overflow:ellipsis;
    height: auto;
    width: auto;
    white-space: nowrap;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.topItems{
	position: absolute;
	display:inline-table;
	font-size: 8px;
	margin: 1px;
	white-space: nowrap;
}

.classLegend{
	position: absolute;
	display:block;
	font-size: 6px;
	margin: 0px;
}

.classLabel{
	position: absolute;
	display:block;
	font-size: 10px;
    font-weight: bold;
	margin: 0px;
}

.classLabelVertical{
	position: absolute;
	display:block;
	font-size: 10px;
    font-weight: bold;
	margin: 0px;
	transform: rotate(90deg);
	transform-origin: top left;
}

#searchError{
	border: 1px solid #1a1a1a;
    border-radius: 10px;
    font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: normal;
    background: #dddddd;
    color: red;
    position: absolute;
    width: 180px;
    z-index:10;
    text-align: center;
    box-shadow: 5px 5px 5px #777777;
}

.labelMenu{
    border: 1px solid #1a1a1a;
    border-radius: 10px;
    font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: normal;
    background: #dddddd;
    color: #000000;
    width: 280px;
    text-align: center;
    box-shadow: 5px 5px 5px #777777;
    position:relative;
    z-index: 100;
}

.labelMenuCaption{
	padding: .4em 1em;
	background: #0843c1;
	color: #ffffff;
	font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: bold;
    text-align: left;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.labelMenuClose{
	position: absolute;
	clear: both;
	right: 2px;
	bottom:2px;
}

.labelMenuHeader tr{
	padding: 4em 1em;
	position:relative;
	margin: 0px 0px 0px 0px;
	background: #f8f3f1; 
	color: #0843c1;
	text-align: left;
	font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: normal;
	border-radius: 10px;
}

.labelMenuBody tr{
	height: 20px;
}
.labelMenuBody td{
	height:20px;
	position: absolute;
	font-size: 0.80rem !important;
    font-family: Arial;
    font-weight: normal;
    color: #0843c1;
    cursor: pointer;
    white-space: nowrap;
}

.labelMenuBody td:hover{
	font-weight: bold;
}

td.unclickable{
	color: grey;
	cursor: default;
}

.presetPalette{
	height:20px;
	width:90px;
}

.presetPaletteMissingColor{
	height:20px;
	width:10px;
	margin-right:10px;
	margin-left: 2px;
}

table.breakpointContainer {
    border: none;
    border-spacing: 0px;
    border-collapse: collapse;
}

td.breakpointContainer
th.breakpointContainer {
    text-align: center;
    margin: 0px;
    padding: 0px 5px 0px 0px;
    border-spacing: 0px;
    border-collapse: collapse;    
}

#linkTabButtons {
	text-align: left;
}

#prefTabButtons {
    margin-top: 1em;
}

#prefTabButtons, #linkTabButtons {
	vertical-align: top;
	border-bottom-width: 2px;
	border-bottom-color: #0843c1;
	border-bottom-style: solid;
}

#rowsColsPrefs, #classPrefs, #layerPrefs, #infoPrefs {
	padding-bottom: 0.5em;
}

#classPrefs button {
	height: 20px;
	width: 20px;
	font-size: 0.8em;
	padding: 4px;
}

#prefs {
	min-width: 420px;
	overflow: hidden;
	position: absolute;
	background-color: var(--dialog-body-background);
	border: 1px solid black; 
	z-index: 10000;
	resize: vertical;
	min-height: 200px;
	display: grid;
	grid-template-rows: min-content min-content auto min-content;
}

#linkBoxTabs {
	font-size: 12px;
	overflow-y: auto;
	min-height: 100px;
	max-height: calc(100vh - 16px);
	margin-bottom: 50px; /* to account for linkBoxFoot */
}

#linkBoxFoot {
	padding: 1em 0em 1em 1em;
	text-align: left;
	/* top border to match bottom border of #linkTabButtons */
	border-top-width: 2px;
	border-top-color: #0843c1;
	border-top-style: solid;
	position: absolute; /* pin to bottom of #linkBox */
	bottom: 0; /* pin to bottom of #linkBox */
	width: 100%; /* so that top border goes all the way accross #linkBox */
}

.clickableItem:hover {
	cursor: pointer;
}

.dblSpace {
    width: fit-content;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 0.5rem;
    font-size: 1.2rem;
}

.dblSpace button {
    padding: 0.2rem;
    line-height: 1.0;
}

#linkBoxHdr {
	position: absolute; /* keep fixed to top of parent */
}

.colorTableButtons {
    height: 28px;
    position: relative;
}

.ngchm-upm-layer-select {
  color: var(--chm-table-color);
  font-weight: bold;
  font-size: 0.8rem;
  padding-left: 0.28em;
  padding-top: 0.5em;
  padding-bottom: 1em;
}

.ngchm-upm-layer-select label {
  padding-right: 0.5em;
}

.ngchm-upm-layer-select select {
  padding: 0.25em;
}

.ngchm-upm-color-scheme {
  width: fit-content;
  margin-bottom: 1em;
}

.ngchm-upm-breakpoint-heading td {
  padding-bottom: 0.5em;
}

.ngchm-upm-breakpoint-heading td:last-child {
  /* Ensure breakpoint buttons in this column have enough space. */
  min-width: 45px;
}

.ngchm-upm-missing-breakpoint td {
  padding-top: 0.5em;
}

.ngchm-upm-last-breakpoint .colorTableButtons {
  height: 0px;
}

.colorTableButtons button {
    display: inline-block;
    padding: 4px;
    height: 20px;
    width: 20px;
    font-size: 0.8em;
    position: absolute;
}

.colorTableButtons button:first-child {
    top: -11px;
    left: 20px;
}

.colorTableButtons button:nth-child(2) {
    color: red;
    border-color: red;
    left: 0px;
    top: 5px;
}

#linkTabButtons button:first-child,
#prefTabButtons button:first-child {
    margin-left: 2px;
}

.buttonGroup button,
#prefTabButtons button,
#linkTabButtons button {
    display: inline-block;
    border: none;
    padding: 0;
    padding-bottom: 2px;
}

#linkBoxButton img,
#linkTabButtons img,
#prefTabButtons img {
	vertical-align: top;
	margin-left: 0.25em;
}

.closeX {
	display: block;
	height: 80%;
}

.prefsHdr {
	display: grid;
	grid-template-columns: auto fit-content(0);
}

.closeX:hover {
	cursor: pointer;
	color: black;
}

#prefPrefs {
    position: relative;
    display: block;
    overflow: auto;
}

#splashBoxHeader {
    height: 2em;
}

#prefActions {
	width: 100%;
    font-family: Arial;
    font-weight: bold;
    text-align: center;
    margin-top: 0.1em;
    border-top: 2px solid #0843c1; /* match border-bottom of #prefTabButtons */
    padding-top: 12px; /* seemed aesthetically pleasing */
    padding-bottom: 12px; /* seemed aesthetically pleasing */
}

#prefActions div.errorMessage {
    margin-bottom: 1em;
}

#prefActions div.buttonRow {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));
    justify-items: center;
}

#prefActions div.buttonRow button {
    width: fit-content;
    border: none;
    padding: 0;
    background-color: var(--dialog-body-background);
}

#prefActions div.buttonRow img {
    margin-left: auto;
    margin-right: auto;
    align: top;
}

.msgBox,
#pdfPrefs, #msgBox, #linkBox {
	position: absolute;
	margin: 5px !important;
    top: 10%;
    left: 35%;
    padding: 2px 2px 2px 2px !important;
    border: 1px solid #1a1a1a;
    border-radius: 15px;
    font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: normal;
    background: #dddddd;
    color: #000000;
    z-index: 10000;
    text-align: center;
    box-shadow: 5px 5px 5px #777777;
    box-sizing: border-box;
    text-align: left;
}

#pdfProgressBar {
    width: 100%;
    margin-top: 0.5em;
}

.msgBox,
#msgBox {
    background-color: var(--dialog-body-background);
}

#linkBoxFoot button,
#pref_buttons button,
.msgBoxButtons button {
    border: none;
    vertical-align: top;
    background: transparent;
    margin-bottom: 0.5em;
}

.msgBoxButton {
	vertical-align: top;
	display: inherit;
}

#linkBox {
	display: flex;
	flex-direction: column;
	width: 800px !important;
	max-height: calc(100vh - 32px);
	min-height: 300px;
	resize: vertical;
	overflow-y: auto; 
	overflow-x: hidden; /* prevent horizontal scroll bar */
}

.msgBox p,
#msgBox p {
    white-space: normal;
}

#pdfPrefs {
    display: flex;
    flex-direction: column;
    background-color: var(--dialog-body-background);
}

#prefsHdr button {
    font-size: 0.7em;
    height: 70%;
}

#prefsMove_btn[data-state='moveLeft'] svg {
    rotate: 180deg;
}

.userHelpHeader {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
}

.userHelpHeader a {
    font-size: 1.25em;
    grid-column: 2;
}

.userHelpHeader button {
    grid-column: 4;
}

.msgBoxHdr,
#prefsHdr, #pdfPrefsHdr, #msgBoxHdr, #linkBoxHdr{
	cursor: move;
    display: table;
    font-size: 18px;
    font-weight: bold;
    color: #0843c1;
    margin: auto;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: var(--dialog-header-background,lightsteelblue);
}

#linkBoxHdr {
    display: grid;
    grid-template-columns: auto min-content;
}

#linkBoxHdr .icon_group {
    margin-right: 0.5em;
}

#pdfPrefsHdr {
    display: grid;
}

#prefsHdr button {
    margin-top: 20%;
}

#userHelpHeader span.closeX,
.msgBoxHdr span.closeX,
#msgBoxHdr span.closeX,
#pdfPrefsHdr span.closeX {
    padding-top: 20%;
    padding-right: 10px;
}

#prefsHdr {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.msgBoxHdr,
#msgBoxHdr {
    display: grid;
    grid-template-columns: auto fit-content(0);
}

#prefsMove_btn, #redX_btn {
	cursor: default;
}

.msgBoxHdr, #pdfPrefsHdr, #msgBoxHdr, #linkBoxHdr{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.prefSubPanel{
	vertical-align: top;
	background-color: var(--dialog-body-background);
    display: none;
    overflow: hidden;
    border: 2px solid #CBDBF6;
}


.hide {
	display: none !important;
}

table.helpTable { 
  border-collapse: collapse; 
  width: 0.90rem;
}
  
table.helpTable td, 
table.helpTable th { 
  border: 1px solid black;
  padding: 5px; 
  color: black;
}

table.onlineHelp { 
  border-collapse: collapse; 
  width: 90%;
}
  
table.onlineHelp td, 
table.onlineHelp th { 
  border: 1px solid black;
  padding: 5px; 
  color: black;
}

/* Start of top-right and unloadded button groups. */

#top-right-spacer {
    width: 0.5em;
}

#unloaded-button-group,
#top-right-button-group {
    display: grid;
    grid-auto-flow: column;
    gap: 0.5rem;
    width: fit-content;
    height: 40px;	/* Fit inside mdaServiceHeader (58px) */
    margin-top: 7px;	/* Center after considering 4px bottom border of header */
}

#unloaded-button-group button,
#top-right-button-group button {
    font-size: 1.2em;
}

/* Flick controls displayed when a map is loaded: */
#layer_control {
    display: grid;
    grid-auto-flow: column;
    gap: 0.5em;
}

/* Flick controls display when layer control is open. */
#flickViews {
    display: grid;
    grid-auto-flow: column;
    gap: 0.5em;
}

/* End of top-right and unloadded button groups. */

.tdTop {
    vertical-align: text-top;
}

.tdTop img {
	vertical-align: top;
}

.editableText_btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 7px 10px;
    border: 0px solid #2b27a1;
    border-radius: 35px;
    background: #2525f5;
    background: -webkit-gradient(linear, left top, left bottom, from(#2525f5), to(#000326));
    background: -moz-linear-gradient(top, #2525f5, #000326);
    background: linear-gradient(to bottom, #2525f5, #000326);
    text-shadow: #591717 1px 1px 1px;
    font: normal normal bold 12px arial;
    color: #ffffff;
    text-decoration: none;
}
.editableText_btn:focus { outline: none; }

.NGCHMEmbedWrapper {
  position: relative;
}

.NGCHMEmbedWrapper:hover .NGCHMEmbedOverlay {
  opacity: .75;
}

#NGCHMEmbedCollapse {
  display: flex;
}

#NGCHMEmbedCollapse>div {
  min-width: 0; 
}

#NGCHMEmbedCollapse>div>img {
  max-width: 100%;
  height: auto;
}

#NGCHMEmbedButton {
  display: block;
  height: 100%;
  width: 100%;
}

.NGCHMEmbedOverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #D3D3D3;
}

#NGCHMEmbedOverText {
  color: blue;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#bubbleHelp {
    margin: 5px !important;
    padding: 5px 10px 5px 10px !important;
    border: 1px solid #1a1a1a;
    border-radius: 15px;
    font-size: 0.90rem !important;
    font-family: Arial;
    font-weight: normal;
    background: #ffffed;
    color: #000000;
    min-width: 30px;
    z-index: 10000;
    text-align: left;
    box-shadow: 5px 5px 5px #777777;
    position: absolute;
}

p.boxCaption {
	font-weight: bold;
	padding: 0.5em;
	margin: 30px 0em 0em 0em; /* 30px to account for #linkBoxHdr height */
	color: #0843c1;
	width: calc(100% - 1em);
	white-space: normal;
	text-align: left;
}

div.linkouts {
        width: 100%;
        height: calc(100% - 28px);
}

iframe:not(.youtube) {
        width: 100%;
        height: 100%;
        border: none;
}

iframe.nopointer {
        pointer-events: none;
}

.dblSpace {
 margin-left: 1em
}

.tab {
 margin-left: 2em
}

.divTable {
    display: table;
}
.divRow  {
    display: block;
    padding-bottom: 2px;
    height: 21px;
}
.divLeft {
    display: table-cell;
    padding-right: 10px;
}
.divRight {
    display: table-cell;
    padding-right: 10px;
}
.divMiddle {
    display: table-cell;
    padding-right: 10px;
}
.divLeft p, .divRight p, .divMiddle p {
    margin: 1px 1px;
}

#MapRow {
    display: grid;
    white-space: nowrap;
    grid-template-columns: auto auto auto 1fr;
    grid-gap: 0.5em;
}

#mapName {
    min-width: 0;
    overflow: hidden;
}

#SelectionsRow {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(6,auto);
    grid-gap: 0.5em;
}

 .dropDownCheckBoxes {
  	width:250px;
      display: none;
      border: 1px #DADADA solid;
      font-size:13px;
  	overflow-y:auto; 
  	z-index:100;
  	position:absolute;
  	background-color: white;
  }
  .dropDownCheckBoxes label {
      display: block;
  }
  .dropDownCheckBoxes label:hover {
      background-color: #CBDBF6;
  }
  
  .dropDownMultiSelect {
      width: 140px;
      float: left;
      vertical-align: bottom;
  }
  
  .dropDownSelectBox {
      position: relative;
  }
  
  .dropDownSelectBox select {
      width: 100%;
      font-size:11px;
      height:21px;
      padding-top:2px;
      padding-bottom:4px;
  }

  .dropDownOverSelect {
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
  }
  
  .srchCovCheckBox {
  	margin: 2px;
  	font-size: 8px;
  }
  
  .srchText {
 	vertical-align:bottom;
  	font-size: 12px;
    width: 140px;
  }  
 
/* Used to add a little space in SPANs 
   for prettier format of gear dialog*/ 
.gear-menu-spacing{
	margin-left: 5%;
}

/* Help Question marks. These are anchors in the HTML, and when
   a user hovers over them, a help message is displayed */
.helpQuestionMark {
    content: url("data:image/svg+xml,%3Csvg fill='currentColor' viewBox='-5.5 0 19 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.987 5.653a4.536 4.536 0 0 1-.149 1.213 4.276 4.276 0 0 1-.389.958 5.186 5.186 0 0 1-.533.773c-.195.233-.386.454-.568.658l-.024.026c-.17.18-.328.353-.468.516a3.596 3.596 0 0 0-.4.567 2.832 2.832 0 0 0-.274.677 3.374 3.374 0 0 0-.099.858v.05a1.03 1.03 0 0 1-2.058 0v-.05a5.427 5.427 0 0 1 .167-1.385 4.92 4.92 0 0 1 .474-1.17 5.714 5.714 0 0 1 .63-.89c.158-.184.335-.38.525-.579.166-.187.34-.39.52-.603a3.108 3.108 0 0 0 .319-.464 2.236 2.236 0 0 0 .196-.495 2.466 2.466 0 0 0 .073-.66 1.891 1.891 0 0 0-.147-.762 1.944 1.944 0 0 0-.416-.633 1.917 1.917 0 0 0-.62-.418 1.758 1.758 0 0 0-.723-.144 1.823 1.823 0 0 0-.746.146 1.961 1.961 0 0 0-1.06 1.062 1.833 1.833 0 0 0-.146.747v.028a1.03 1.03 0 1 1-2.058 0v-.028a3.882 3.882 0 0 1 .314-1.56 4.017 4.017 0 0 1 2.135-2.139 3.866 3.866 0 0 1 1.561-.314 3.792 3.792 0 0 1 1.543.314A3.975 3.975 0 0 1 7.678 4.09a3.933 3.933 0 0 1 .31 1.563zm-2.738 9.81a1.337 1.337 0 0 1 0 1.033 1.338 1.338 0 0 1-.71.71l-.005.003a1.278 1.278 0 0 1-.505.103 1.338 1.338 0 0 1-1.244-.816 1.313 1.313 0 0 1 .284-1.451 1.396 1.396 0 0 1 .434-.283 1.346 1.346 0 0 1 .526-.105 1.284 1.284 0 0 1 .505.103l.005.003a1.404 1.404 0 0 1 .425.281 1.28 1.28 0 0 1 .285.418z'/%3E%3C/svg%3E");
    display: inline-block;
    height: 15px;
    width: 15px;
    color: var(--button-color);
    /* border: 1px solid var(--button-color); */
    border-radius: 4px;
    background-color: lightblue;
}


/* For the checkboxes for choosing discrete covariates in Gear Dialog */
.gear-dialog-dropDownCheckBoxes-inline {
	margin-top: 0em !important;
	border: 1px #DADADA solid;
	background-color: white;
	height: 100px;
	overflow: scroll;
}

.gear-dialog-dropDownCheckBoxes-inline label {
	display: block;
	position: relative;
	overscroll-behavior: contain;
	z-index: 11000;
}

.gear-dialog-dropDownCheckBoxes-inline label:hover {
	background-color: #CBDBF6;
}

.ngchm-ui-table {
  width: 100%;
}

#all_searchPref {
  width: 100%;
}

span.errorMessage {
    color: red;
}

div#droptarget {
    position:  absolute;
    top: 0px;
    right: 0px;
    width: fit-content;
    height: fit-content;
    text-align: center;
    vertical-align: middle;
    padding: 1em 2em;
    z-index: 1;
    color: rgba(0,0,0,0);
    background-color: rgba(1,0,0,0.01);
    user-select: none;
}

div#droptarget.visible {
    z-index: 100;
    color: rgba(0,0,0,1);
    background-color: rgba(255,128,128,1);
}

.ngchm-popup {
  background-color: #CBDBF6;
}

.tour-button {
    padding: 0.3em;
    font-weight: 900;
    border-radius: 1em;
}
#bubbleHelp {
    opacity: 0;
    animation: loading-up var(--load-time);
    animation-fill-mode: forwards;
}
#bubbleHelp span {
    display: block;
    font-size: small;
    color: rgb(8,67,193);
}
#bubbleHelp span.title {
    font-weight: bold;
    padding-bottom: 3px;
}

.keyTable THEAD TH {
    text-align: left;
    border-bottom: 1px solid grey;
}

.keyTable TBODY TD {
    vertical-align: top;
    padding-top: 0.2em;
    border-bottom: 1px dashed grey;
}

.keyTable TBODY TD:nth-child(2) {
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.chmTblRow textarea.ngchm-upm-top-items-text {
  width: 100%;
  margin-left: 0;
}

.histogram {
  display: grid;
  margin-top: 2em;
  width: fit-content;
}
.histogram-header {
  font-weight: bold;
  font-size: 0.8rem;
  padding-left: 0.3125em;
  padding-right: 1em;
  color: var(--chm-table-color);
  grid-row: 1;
  grid-column: 1;
}
.histogram-update {
  grid-row: 2;
  grid-column: 1;
  justify-self: right;
  padding-top: 1em;
  padding-right: 1em;
}
.histogram-preview {
  grid-column: 2;
  grid-row: 1 / 4;
  height: 120px;
  width: 110px;
  position: relative;
  display: flex;
}
/* The histogram preview is 120px high by 110 px wide.
 * The main color section is a 100px wide by 100px high box at the top-left.
 * To the immediate right of the main color section is a 10px wide missing color box.
 * Overlaying both of these boxes is the 110px wide by 100px high histogram SVG.
 * Below all of these are the left and legend boxes.
 */
.preview-main-color {
  position: absolute;
  left: 0px;
  width: 100px;
  top: 0px;
  height: 100px;
}
.preview-missing-color {
  position: absolute;
  left: 100px;
  width: 10px;
  top: 0px;
  height: 100px;
}
.preview-svg {
  position: absolute;
  left: 0px;
  width: 110px;
  top: 0px;
  height: 100px;
}
.preview-legend-left {
  position: absolute;
  left: 5px;
  top: 100px;
  margin-top: 5px;
  font-size: 10px;
}
.preview-legend-right {
  position: absolute;
  right: 5px;
  top: 100px;
  margin-top: 5px;
  font-size: 10px;
}

#msgBox-for-command-dialog .msgBoxBody {
  min-width: 400px;
  margin: 0.5em;
}

#msgBox-for-command-dialog textarea {
  width: calc(100% - 6px);
  height: 3em;
}

#ngchm-cmd-output {
  background-color: white;
  min-height: 20em;
  padding: 0.5em;
}

#ngchm-cmd-output span {
  display: block;
  min-height: 0.5em;
}

.ngchm-cmd-error {
  color: var(--ngchm-error-color);
}

/* Use opacity:0 instead of display:none for elements that will be faded in
 * to avoid redraw/reflow.
 */
.faded {
    opacity: 0;
    z-index: -1000;
}

/* Start at opacity 0 and transition to opacity 1.
 */
.fadein {
    opacity: 0;
    z-index: 10;
    animation-name: loading-up;
    animation-duration: var(--load-time);
    animation-fill-mode: forwards;
}

/* Delay so users with fast connections don't so
 * an annoying flash.
 */
.fadeinslow {
    opacity: 0;
    z-index: 10;
    animation-name: loading-up;
    animation-duration: var(--load-time);
    animation-fill-mode: forwards;
    animation-delay: var(--load-delay);
}

/* Transition from current opacity to opacity 0.
 */
.fadeout {
    opacity: 0;
    transition: opacity 150ms;
    pointer-events: none;
}

@keyframes loading-up {
    0% {
	opacity: 0;
    }
    100% {
	opacity: 1;
    }
}