/* THEME variables */
:root {
   --wcg-blue: #001489;
   --wcg-bright-blue: #007DBA;
   --wcg-grey: #968C83;
   --wcg-light-grey: #A6BBC8;
   --wcg-teal: #7FA9AE;
   --calcite-shell-panel-max-width: auto;
   --colour-picker-item-size: 24px;
   /* --edit-switch: #6a6a6a rgb(216, 48, 32); */
   /* --footerPanelMaxHeight: calc(31vh); */
   /* --rightPanelMaxHeight: calc(100vh - 85px); */
   --display-flex: flex;
}

#search-input-suggest-menu {
   max-height: 200px;
}

/* CONTENT */
html,
body,
#viewDiv,
#view3D {
   padding: 0;
   margin: 0;
   height: 100%;
   --calcite-color-foreground-1: #eee;
   --calcite-color-background: #eee;
}

html,
body {
   width: 100%;
}

body {
   min-width: 350px;
   ;
}

#viewDiv,
#view3D {
   width: calc(100vw - 65px);
   min-width: 350px;
}

#start-loader {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   background-color: #eee;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   pointer-events: none;
   height: 100%;
   width: 100%;
   transition: opacity 0.75s ease;
}

calcite-loader {
   --calcite-color-brand: var(--wcg-blue) !important;
}

.loader-main-text {
   align-items: center;
   color: var(--wcg-blue);
   display: flex;
   margin: auto;
   font-size: max(3vw, 24px);
   font-weight: bold;
   gap: 20px;
   flex: 1 1 auto;
   z-index: 99;
   text-shadow: 0 0 10px #777777, 0 0 20px #f3f3f3;
}

.loader-sub-text,
.loader-info {
   display: flex;
   margin: auto;
   color: var(--wcg-blue);
   flex: 1 1 auto;
   flex-direction: column;
   text-align: center;
   align-items: center;
   justify-content: center;
}

.loader-sub-text img {
   max-width: 250px;
   width: 80%;
}

.loader-info {
   font-size: 12px;
   height: 100px;
   justify-content: flex-start;
}

.loader-spinner {
   display: flex;
   margin: auto;
   color: var(--wcg-blue);
   flex: 1 1 auto;
}

.loader-desc-text calcite-loader {
   padding: 0;
}

.loader-logo {
   margin: auto;
   width: 80%;
   height: 100px;
   max-width: 250px;
   min-height: 80px;
   flex: 1 1 auto;
}

.cfm-version {
   align-self: flex-start;
   padding: 0 5px;
   cursor: pointer;
}

div.bottom-left-vertical-container {
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-start;
}

.bmap-attribution {
   color: black;
   text-shadow:
      -1px -1px 0 #fff,
      1px -1px 0 #fff,
      -1px 1px 0 #fff,
      1px 1px 0 #fff;
}

calcite-dialog .content {
   background-color: #eee;
}

#shell-right-panel {
   display: none;
}

calcite-shell:has(calcite-shell-panel#shell-scene-panel) {
   height: calc(100vh - 105px);
}

#bottom-panels {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 65px;
   background-color: var(--calcite-color-foreground-1);
   display: none;
}

#map-loader,
#scene-loader {
   color: #00A0FF;
   --calcite-loader-size-inline: 2em;
   width: 100%;
}


.cfm-ontop {
   z-index: 999;
}

body {
   display: flex;
   background-color: var(--calcite-color-foreground-1);
}

calcite-block {
   margin-top: 0;
   margin-bottom: 0;
}

header,
.header,
calcite-action,
calcite-tab-title,
div[slot="header-content"],
calcite-accordion,
calcite-label,
#start-loader {
   user-select: none;
}

*::part(item-block) {
   margin: 0 10px;
}

input.cfm-input-custom {
   background-color: var(--calcite-color-foreground-1);
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-color-border-input);
   color: var(--calcite-color-text-1);
   line-height: 24px;
   font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
}

/* Chrome, Safari, Edge, Opera */
input.cfm-input-custom::-webkit-outer-spin-button,
input.cfm-input-custom::-webkit-inner-spin-button {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   margin: 0;
}

/* Firefox */
input.cfm-input-custom[type=number] {
   appearance: textfield;
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
}

textarea {
   resize: none !important;
}

#app-header {
   align-items: center;
   background-color: var(--calcite-color-foreground-1);
   border-bottom: 1px solid rgb(205, 205, 205);
   display: flex;
   /* font-size: min(100vh / 30, 25px); */
   font-size: clamp(95%, 100vh / 30, 30px);
   font-weight: 500;
   height: min(100vh / 20, 40px);
   max-height: 50px;
   padding: 5px 10px;
   user-select: none;
}

#app-header img {
   vertical-align: middle;
   /* height: 100%; */
   max-height: 95%;
   padding-right: 0.5em;
   user-select: none;
}

#taskbar-info {
   position: absolute;
   top: 5px;
   right: 10px;
   font-size: 1.75em;
   opacity: 0.5;
}

#modal-sceneview-content {
   height: 100%;
   width: 100%;
}

#scene-modal-header {
   font-weight: 500;
   font-size: min(100vw/20, 20px);
}

#scene-modal-header span {
   padding-left: 0.5em;
}

div.dialog-heading {
   font-size: 1.2em;
   font-weight: bold;
}

div.dialog-content {
   font-size: 1.2em;
}

#modal-intro .modal-title {
   font-size: 1.5em;

   img {
      width: 1em;
   }
}

#modal-intro div.dialog-content {
   text-align: center;

   p {
      text-align: justify;
   }
}

calcite-dialog.dialog-size-y-fit {
   --calcite-dialog-size-y: auto;
   --calcite-dialog-max-size-y: calc(95vh);
}

#modal-intro,
#modal-layerinfo,
#modal-version {
   z-index: 1000 !important;
}

#modal-label-field {
   --calcite-dialog-max-size-y: calc(80vh);
}

#modal-open-external {
   z-index: 900;
}

#modal-elevprofile span.elevprofile-id {
   margin-left: 10px;
   user-select: none;
}

#mapview-elevprofile {
   width: 100%;
}

#modal-survey {
   z-index: 999;
}

#layer-metadata p>span {
   font-size: 16px !important;
}

#layers-container,
#legend-container,
#scene-layerlist {
   overflow: auto;
}

calcite-loader {
   align-self: center;
   justify-self: center;
}

#cfm-actionbar,
#scene-action-bar {
   max-width: 65px;
   background-color: var(--calcite-color-foreground-1);
}

#cfm-actionbar calcite-action {
   --calcite-action-background-color-hover: #b6b6b6;
}

.btn-nav {
   padding-bottom: 5px;
}

.btn-navexpand {
   padding: 3px;
}

.btn-nav-ls {
   padding-bottom: 5px;
}

.btn-nav-action {
   width: 25%;
}

.btn-nav-action button {
   width: 100%
}

.btn-nav-100 {
   width: 100%;
}

.btn-nav-50 {
   flex: 1;
   margin-right: 5px;
}

.cfm-side-panel {
   max-height: var(--rightPanelMaxHeight);
   --calcite-panel-space: 0px !important;
}

.flex1 {
   flex: 1;
}

.flex-article {
   display: flex;
   flex-direction: row;
}

.modal-header-icon {
   vertical-align: text-top;
}

.popup-block {
   display: none;
}

.popup-span {
   display: inline-block;
   padding-right: 10px;
}

.portal-auth-input {
   width: 48%;
   float: left;
}

.tab-info-loader {
   padding: 10px 0;
}

.tab-title-dark {
   background-color: #d1d1d1;
}

.tab-layers-content {
   margin-left: 5%;
   width: 90%;
}

#layer-filter-block {
   border: none !important;
   display: none;
}

#layer-filter-text {
   margin-left: 20px;
   margin-right: 40px;
   margin-top: 10px;
}

/* #app-header */
.shell-panel-header {
   display: flex;
   padding: 0 1rem;
}

.shell-panel-header {
   color: var(--wcg-blue);
}

.layer-filter {
   margin-top: 10px;
}

.btn-panel-item,
*::part(btn-panel-item) {
   padding: 10px !important;
}

.btn-panel-item calcite-button,
*::part(btn-panel-item) calcite-button {
   width: 100%;
   margin-top: 20px;
}

.layer-labels,
*::part(layer-labels) {
   padding: 1em;
}

.layer-labels calcite-switch,
*::part(layer-labels) calcite-switch {
   padding-right: 1em;
}

p.layer-desc {
   text-align: justify;
}

.info-content {
   background-color: var(--calcite-color-foreground-1);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.panel-pad {
   padding: 0.75rem;
   background-color: var(--calcite-color-foreground-1);
}

.w25 {
   width: 25%;
}

.w50 {
   width: 50%;
}

.w75 {
   width: 75%;
}

calcite-rating {
   margin-top: 0.25rem;
}

.noselect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

*:focus {
   outline: none;
}

.search-container {
   padding: 1em;
   overflow: hidden;
}

#cookie-layers {
   text-align: center;
}

#cookie-layers calcite-button {
   width: 35%;
}


.idtab-sg-content,
.idtab-info-content {
   display: flex !important;
   flex-direction: column;
   flex: 1 !important;
}

#portal-signin {
   display: block;
   padding-bottom: 10px;
}

#portal-owner-info::before {
   content: "Content Owner:";
   line-height: 1rem;
   width: 9rem;
}

#search-input,
#search-widget {
   margin-bottom: 5px;
}

.arcgis-search {
   --arcgis-internal-search-width: 100%;
}

#search-input,
#search-widget,
#search-address {
   width: 100%;
   border: 1px solid var(--wcg-blue);
}

#search-results {
   overflow: auto;
}

#date-container {
   position: absolute;
   left: 60px;
   top: 15px;
   width: 15em;
   z-index: 10;

}

#date-control {
   display: none;
   background-color: var(--calcite-color-background);
   /* justify-content: space-between; */
   /* margin-top: 5px; */
}

.date-picker-selected-day {
   border: 1px solid #757575 !important;
   background-color: darkcyan !important;
}

#chip-loading {
   position: absolute;
   left: calc(50vw - 32px);
   bottom: 25px;
   z-index: 100;
   transform: translate(-50%, -25%);
}

#map-list-block {
   overflow: auto;
}

calcite-tabs {
   overflow: hidden;
}

calcite-tab {
   height: auto;
}

#print-results-tab {
   padding: 5px;
}

#print-export {
   margin: 1em 0;
}

#print-error {
   display: none;
}

#sketch-props {
   padding: 0 5px;
   background-color: var(--calcite-color-foreground-1);
}

#sketch-info {
   background-color: var(--calcite-color-foreground-1);
   padding: 5px;
   height: auto;
   text-align: center;
   width: auto;
}

#share-link-text {
   margin-bottom: 12px;
}

calcite-action#edit-start {
   --calcite-color-text-1: var(--edit-switch);
   --calcite-color-text-3: var(--edit-switch);
}

.sketch-actionpad {
   max-width: 250px;
}

.chart-container {
   max-width: 400px;
   display: none;
   height: 200px;
}

.climchart {
   height: 300px;
}

.explore-link-visit,
.explore-link-copy {
   cursor: pointer;
   margin-right: 5px;
}

.id-feature-info {
   border-bottom: 1px solid #ddd;
   clear: both;
   margin-bottom: 1em;
}

.id-feature-info calcite-action {
   float: left;
}

.id-feature-info calcite-chip.id-action {
   cursor: pointer;
}

.id-feature-info table {
   cursor: pointer;
}

#id-result {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   height: 100%;
}

.id-result-title {
   vertical-align: top;
   min-width: 70px;
}

div.sketch-action-row {
   display: flex;
   justify-content: space-between;
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Old versions of Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
}

calcite-action.active-tool {
   --calcite-color-text-3: var(--calcite-color-status-success);
}

calcite-block.feature-actions {
   text-align: center;
   background-color: #808080;
   border-radius: 5px;
}

calcite-button.feature-action,
calcite-button.feature-action-edit {
   --calcite-button-text-color: #fff;
   width: 15%;
   height: 28px;
}

.btn-ui {
   background-color: var(--calcite-color-foreground-1);
   box-shadow: 0 1.5px 2px rgba(0, 0, 0, .2);
   cursor: pointer;
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
}

div.btn-fill-style {
   width: 30px;
   height: 30px;
   background-color: var(--calcite-color-foreground-1);
   float: left;
   border: 0.5px solid var(--calcite-color-foreground-1);
   cursor: pointer;
   margin: 0 2px;
}

div.symbol-line-style {
   width: 35px;
   height: 30px;
   background-color: var(--calcite-color-foreground-1);
   float: left;
   border: 0.5px solid var(--calcite-color-foreground-1);
   cursor: pointer;
   margin: 0 4px;
   background-size: 70px;
   background-repeat: no-repeat;
   background-position-y: center;
}

div.symbol-point-style {
   width: 20px;
   height: 20px;
   background-color: var(--calcite-color-foreground-1);
   float: left;
   border: 0.5px solid var(--calcite-color-foreground-1);
   cursor: pointer;
   margin: 0 4px;
   background-size: 16px;
   background-repeat: no-repeat;
}

.symbol-style-solid {
   background-image: url('../media/symbols-sfs-solid.png');
}

.symbol-style-cross {
   background-image: url('../media/symbols-sfs-cross.png');
}

.symbol-style-dcross {
   background-image: url('../media/symbols-sfs-diagonal-cross.png');
}

.symbol-style-fdiag {
   background-image: url('../media/symbols-sfs-forward-diagonal.png');
}

.symbol-style-bdiag {
   background-image: url('../media/symbols-sfs-backward-diagonal.png');
}

.symbol-line-solid {
   background-image: url('../media/symbols-sls-solid.png');
}

.symbol-line-dash {
   background-image: url('../media/symbols-sls-dash.png');
}

.symbol-line-dot {
   background-image: url('../media/symbols-sls-short-dot.png');
}

.symbol-line-ddot {
   background-image: url('../media/symbols-sls-short-dash-dot.png');
}

.symbol-point-circle {
   background-image: url('../media/symbols-sms-circle.png');
}

.symbol-point-cross {
   background-image: url('../media/symbols-sms-cross.png');
}

.symbol-point-diamond {
   background-image: url('../media/symbols-sms-diamond.png');
}

.symbol-point-square {
   background-image: url('../media/symbols-sms-square.png');
}

.symbol-point-triangle {
   background-image: url('../media/symbols-sms-triangle.png');
}

.symbol-point-x {
   background-image: url('../media/symbols-sms-x.png');
}

div.cfm-colorpicker-text,
div.cfm-outline-color-row,
*::part(cfm-colorpicker-text),
*::part(cfm-outline-color-row) {
   display: flex;
   justify-content: space-between;
}

calcite-icon.text-colour {
   cursor: pointer;
   border: 2px solid;
   border-radius: 15px;
}

.cfm-colorpicker-item,
*::part(cfm-colorpicker-item) {
   width: var(--colour-picker-item-size);
   height: var(--colour-picker-item-size);
   border: 1px solid var(--calcite-color-foreground-1);
   border-radius: 4px;
   cursor: pointer;
}

.cfm-colorpicker-default,
*::part(cfm-colorpicker-default) {
   background-image: url('../media/circle-disallowed.png');
   background-size: var(--colour-picker-item-size);
   background-repeat: no-repeat;
   border: none;
   padding: 11px;
   cursor: pointer;
}

.round12,
*::part(round12) {
   border: 1px solid #999;
   border-radius: 14px;
   margin-right: 2px;
}

.round12-selected {
   border: 3px solid rgb(255, 0, 255);
}

.cfm-colorpicker-col,
*::part(cfm-colorpicker-col) {
   float: left;
   /* width: var(--colour-picker-item-size); */
   margin-right: 2px;
}

.float-left,
*::part(float-left) {
   float: left;
}

#graphic-attributes th {
   text-align: left;
   width: 90px;
}

.global-select-start {
   margin-bottom: 1em;
}

span#export-graphics-count {
   display: inherit;
}

calcite-input.feature-name {
   max-width: 8em;
}

calcite-radio-button-group#share-option calcite-label,
calcite-block#nav-tracking calcite-label,
calcite-block#sketch-settings calcite-label,
calcite-block.basemap-settings calcite-label,
.link-label {
   cursor: pointer;
}

calcite-split-button#label-fields {
   width: 100%;
}

calcite-panel.footer-panel {
   background-color: var(--calcite-color-foreground-1);
   max-height: var(--footerPanelMaxHeight);
   padding-top: 5px;
}


table.attribute-table {
   font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
   width: 100%;
}

.sortable {
   width: 100%;
}

.sortable tr {
   cursor: pointer;
}

.sortable tr.selected-row {
   background-color: #8affff !important;
}

#table-sketchgraphics {

   td:nth-child(2),
   th:nth-child(2),
   td:nth-child(3),
   th:nth-child(3) {
      display: none;
   }
}

calcite-label:has(calcite-checkbox#table-graphics-zoom) {
   cursor: pointer;
}

#table-searchgraphics {

   td:nth-child(8),
   th:nth-child(8),
   td:nth-child(9),
   th:nth-child(9) {
      display: none;
   }
}

.climate-datatable td,
.climate-datatable th {
   text-align: center;
}

.dataTable tr {
   cursor: pointer;
}

.selectedRow {
   background-color: #bfe5ff !important;
}

.resizer-vertical {
   background: #d3d3d3 url('../media/three-dots-handle.png') no-repeat scroll center;
   background-size: 28px;
   cursor: ns-resize;
   display: none;
   height: 12px;
   width: 100%;
   position: fixed;
   z-index: 999;
}

arcgis-grid-controls {
   background-color: var(--calcite-color-foreground-1);
}

arcgis-placement {
   background-color: var(--calcite-color-foreground-1);
}