/* 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: 20px;
   /* --edit-switch: #6a6a6a rgb(216, 48, 32); */
   /* --footerPanelMaxHeight: calc(31vh); */
   /* --rightPanelMaxHeight: calc(100vh - 85px); */
}

/* .esri-component, */
/*.esri-interactive,
.esri-widget,
.esri-widget--button{
   background-color: #f3f3f3;
   color: var(--wcg-blue);
}*/
/*.esri-button{
   background-color: var(--wcg-blue) !important;
}*/
.esri-sketch__vertex {
    display: none !important;
  }

.esri-layer-list__item {
   border: 1px solid var(--calcite-color-foreground-1);
}

.esri-popup__footer {
   order: 1
}

.esri-widget:focus,
.esri-widget:focus-visible,
.esri-widget *:focus,
.esri-widget *:focus-visible {
   outline: 0 !important;
}

.esri-menu{
   z-index: 10;
}
#search-input-suggest-menu{
   max-height: 200px;
}

/* CONTENT */
html,
body,
#viewDiv,
#view3D
{
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;
   --calcite-color-foreground-1: #eee;
   --calcite-color-background: #eee;
   /*--calcite-ui-text-1: var(--wcg-blue);
   --calcite-ui-text-2: var(--wcg-blue);
   --calcite-ui-text-3: var(--wcg-blue);
   --calcite-ui-text-link: var(--wcg-blue);
   --calcite-ui-info: var(--wcg-blue);
   --calcite-ui-brand: var(--wcg-blue);
   --calcite-ui-brand-hover: var(--wcg-bright-blue);
   --calcite-ui-brand-press: var(--wcg-blue);*/
}

/*.esri-ui-top-left calcite-button,
.esri-ui-top-left calcite-action
{
   --calcite-color-text-1: #007ac2;
   --calcite-color-text-2: #007ac2;
   --calcite-color-text-3: #007ac2;
   --calcite-color-text-3: #3c83b7 !important;
}*/

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

/*.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}‍‍‍*/


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

/*.modal{
   max-height: calc(100vh - 40px) !important;
}*/

#start-loader
{
   position: relative;
   z-index: 9999;
   background-color: #eee;
   width: 100%;
   height: calc(100vh - (var(--calcite-internal-loader-size) + 2rem));
}

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

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

#bottom-panels {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 65px;
   /* height: calc(32vh); */
   background-color: var(--calcite-color-foreground-1);
   display: none;
   /*flex: 1 1 auto;
   width: calc(100vw - 65px);*/
}

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

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 {
   background-color: var(--calcite-color-foreground-1);
   border-bottom: 1px solid rgb(205, 205, 205);
   font-size: min(100vh / 30, 25px);
   font-weight: 500;
   height: min(100vh / 20, 40px);
   padding: 5px 10px;
}

#app-header img {
   vertical-align: middle;
   /* height: min(100vw/15, 40px); */
   height: 100%;
   padding-right: 0.5em;

}

#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: 1.5em; */
   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-open-external{
   z-index: 900;
}

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

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

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

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;
   /* max-width: 210px; */
}

.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 {
   /* width: 45%; */
   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;
}

/*.content {
   max-width: auto;
   --calcite-shell-panel-max-width: auto;
}*/

/* #app-header */
.shell-panel-header {
   display: flex;
   padding: 0 1rem;
   /* background-color: var(--calcite-color-foreground-1); */
}

.shell-panel-header {
   /*width: 100%;
   text-align: center;*/
   color: var(--wcg-blue);
}

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

.btn-panel-item calcite-button {
   width: 100%;
   margin-top: 20px;
}

.layer-labels {
   padding: 1em;
}

.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;
   /* height:calc(35vh); */
}

#cookie-layers {
   /* display: none; */
   text-align: center;
}

/*#cookie-layers span{
   clear:both;
   line-height: 35px;
}*/
#cookie-layers calcite-button {
   width: 35%;
}

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

#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;
   /* max-height: calc(45vh); */
   /* flex-grow: 1; */
}

/*button#search-input-source-menu-button {
   display: none;
}*/

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

}

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

#chip-loading{
   position: absolute;
   left: 50%;
   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: #fff;
   padding: 5px;
   height: auto;
   text-align: center;
   width: auto;
}

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

/*calcite-action.sketch-tool[data-sketch="cancel-draw"]{
   --calcite-color-text-1: var(--calcite-color-status-danger);
   --calcite-color-text-3: var(--calcite-color-status-danger);
}*/

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

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

.id-feature-info calcite-action {
   float: left;
   /*margin-bottom: 1em; */
}

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

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

.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-button.feature-action{
   width: 34px;
   height: 34px;
}*/

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


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{
   display: flex;
   justify-content: space-between;
}

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

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

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

.round12 {
   border: 1px solid #999;
   border-radius: 14px;
   margin-right: 2px;
}

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

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

.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: #99f0fc !important; */
   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;

}

.esri-list-item-panel{
   padding: 15px;
   background-color: var(--calcite-color-foreground-1);
}

.esri-slider{
   background-color: var(--calcite-color-foreground-1);
}

.esri-popup--is-docked .esri-popup__main-container {
   max-height: min(55%, 500px) !important;
}

.esri-popup .content-wrapper{
   background-color: #fff;
}

.esri-popup .esri-features__container{
   background-color: #fff;
   max-height: min(calc(25vh), 220px);
}

/* margins for ui components */
.esri-widget .esri-zoom{
   margin-bottom: 10px !important;
}

.esri-ui-top-left .esri-component > div.esri-component {
   margin-bottom: 0px !important;
}

arcgis-fullscreen{
   --calcite-color-foreground-3-color: #fff !important;
}

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

/* SMALL DEVICE */
@media (max-width:500px) and (orientation:portrait){
   .esri-popup--is-docked .esri-popup__main-container {
      max-height: 50% !important;
   }

   .chart-container {
      width: 225px !important;
   }
}

@media (max-height:800px) and (orientation:landscape) {
   .esri-popup--is-docked .esri-popup__main-container {
      max-height: 100% !important;
   }

   .chart-container {
      width: 225px !important;
   }
}