body {
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
    overflow: hidden;
}

/*font-family: 'Merriweather', serif;
font-family: 'Work Sans', sans-serif;*/

@media (max-width: 2400px) {
    html {
        font-size: 14px !important;
    }
}

@media (max-width: 1200px) {
    html {
        font-size: 12px !important;
    }

}

@media (max-width: 870px) {
    html {
        font-size: 10px !important;
    }
}

#vegLegend {
    position: absolute;
    z-index: 1000;
    bottom: 3rem;
    left: 1rem;
    background-color: white;
    padding: 1rem;
    width: auto;
    max-width: 20rem;
    height: auto;
    max-height: 8rem;
    overflow-y: auto;
    display: none;
    box-shadow: 0 0 5px #464646;
    border-radius: 10px;
}

#vegLegendCompare {
    position: absolute;
    z-index: 1000;
    bottom: 4rem;
    right: 1rem;
    background-color: white;
    padding: 1rem;
    width: auto;
        max-width: 20rem;
    height: auto;
    max-height: 8rem;
    overflow-y: auto;
    display: none;
    box-shadow: 0 0 5px #464646;
    border-radius: 10px;
}

.vegLegendCompare {
    position: absolute;
    z-index: 1000;
    bottom: 3rem;
    right: 1rem;
    background-color: white;
    padding: 1rem;
    width: auto;
    height: auto;
    max-height: 10rem;
    overflow-y: auto;
    display: none;
    box-shadow: 0 0 5px #464646;
    border-radius: 10px;

}

.legendTitle {
    font-weight: bold;
    font-size: 1rem;
    width: auto;
    /*    max-width: 18rem;*/
}

.legendSubTitle {
    font-size: 1rem;
    margin-left: 1rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}
.vegLegendLine{
    white-space: nowrap;
}

.vegLegendBox {
    display: inline-block;

    width: 1rem;
    height: 1rem;
}

.vegLegendLabel {
    display: inline-block;
    width: auto;
    /*    width:10rem;*/
    /*    max-width: 20rem;*/
}

.vegLegendRow {
    display: flex;
    align-items: flex-start; /* Top-aligns single and multi-line text */
    margin-bottom: 0.2em;
}

.vegLegendBoxForHidden {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5em;
    flex-shrink: 0;
}

.vegLegendLabelForHidden{
    font-size: 8px;
    max-width: 150px;
    /* Remove display:inline-block, let flexbox handle alignment. */
    line-height: 1.1; /* Optional: improve multi-line spacing */
}



.myButtons {
    padding: 0.5rem;
    width: auto;
    height: auto;
    border-radius: 5px;
    cursor: pointer;
    background-color: #28522E;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
}

#compareButton {
    position: absolute;
    top: 1rem;
    right: 10px;
    width: 10%;
    right: 45%;
    z-index: 5000;

}

@keyframes changeColor {
    from {
        background-color: #28522E;
    }

    to {
        background-color: #417F4A;
    }
}

.pdfLoading {
    animation: changeColor 2s infinite alternate !important;
}

#comparison-container {
    position: absolute;
    top: 3rem;
    right: 0;
    /*width: calc(100vw - 22rem);
    height: calc(100vh - 5rem);*/
    height: calc(100vh - 3rem);
    width: 100vw;
    z-index: 3;
}

#hiddenGraphsHolder {
    position: absolute;
    z-index: 0;
    top: 100vh;
    left: 0;
    opacity: 1;
}

#sankeyHolderHidden {
    height: 500px;
    width: 400px;
    
}


#map {
    position: absolute;
    top: 0rem;
    right: 0;
    /*        width: calc(100vw - 22rem);*/
    width: 100%;
    height: calc(100vh - 3rem);
    z-index: 2;
    user-select: none;
}

#compareMap {
    position: absolute;
    top: 0rem;
    right: 0;
    /*    width: calc(100vw - 22rem);*/
    width: 100%;
    height: calc(100vh - 3rem);
    z-index: 1;
    user-select: none;
    opacity: 0;
}

.showHideButton {
    border-radius: 50%;
}

#controlsPanel {
    position: absolute;
    z-index: 1000;
    top: 4rem;
    left: 1rem;
    width: auto;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 5px #464646;
    border-radius: 5px;
}

#analysisToolsHolder {
    display: none;
}

#contextLayersHolder {
    display: none;
}

.selectMenu {
    width: 15rem;
}

.menuSubLabel {
    margin-top: 0.25rem;
    font-weight: bold;
    font-size: 1rem;
    color: #3F3F3F;

}




#sankeyHolder {
    /*width: 50vw;
    height: 85vh;*/
    width: 30rem;
    height: 25rem;
    /*    margin-top:4rem;*/
    float: left;
}

#sankeyLabelsHolder {
    width: 90%;
    position: absolute;
    z-index: 1000;
    bottom: 1.75rem;
    left: 5%;
    font-size: 1rem;
    font-weight: bold;
}

#sankeyRadiosHolder {
    position: absolute;
    width: 30rem;
    text-align: center;
    line-height: 1rem;
    z-index: 1000;
    display: inline;
    bottom: 0rem;
    left: 0.5rem;
    margin-bottom: 0.5rem;
}

.radioLabel {
    font-size: 1.25rem;
    line-height: 1.25rem;
}

#barPlotHolder {
    /*width: 50vw;
    height: 85vh;*/
    width: 30rem;
    height: 25rem;
    /*    margin-top:4rem;*/
    float: right;
}

#buttonsHolder {
    position: absolute;
    z-index: 1000;
    bottom: 15px;
    right: 5px;
    width: auto;
    text-align: center;
    padding: 0.25rem;
    display: inline !important;
}

#downloadPdfButton {
    width: 10rem;
    display: inline;
    visibility: hidden;
    margin: 0.25rem;
    font-size: 1rem;

}

#climateResultsTable {
    width: 100%;
    text-align: left;

}

#vegResultsTable {
    width: 100%;
    text-align: left;

}

table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}

#showResultsTableButton {
    width: 10rem;
    display: inline;
    visibility: hidden;
    margin: 0.25rem;
    background-color: #28522E;
    color: white;
    text-align: center;
    font-size: 1rem;

}

#showPlotsButton {
    width: 10rem;
    display: inline;
    visibility: hidden;
    margin: 0.25rem;
    z-index: 1000;
    background-color: #28522E;
    color: white;
    text-align: center;
    font-size: 1rem;
}

#basemapButton {
    width: 10rem;
    display: inline;
    margin: 0.25rem;
    z-index: 1000;
    background-color: #28522E;
    color: white;
    text-align: center;
    font-size: 1rem;
}

#screenshotButton {
    width: 10rem;
    display: inline;
    margin: 0.25rem;
    z-index: 1000;
    background-color: #28522E;
    color: white;
    text-align: center;
    font-size: 1rem;
}

#helpButton {
    width: 10rem;
    display: inline;
    margin: 0.25rem;
    z-index: 1000;
    background-color: #28522E;
    color: white;
    text-align: center;
    font-size: 1rem;
}



#compareInfoBox {
    position: absolute;
    z-index: 1000;
    padding: 1rem;
    top: 1rem;
    right: 1rem;
    background-color: white;
    user-select: none;
}

#mapInfoBox {
    position: absolute;
    z-index: 1000;
    padding: 1rem;
    top: 1rem;
    left: 1rem;
    background-color: white;
    user-select: none;
}

.mapboxgl-compare {
    z-index: 1111 !important;
}



#statsWindow {
    position: absolute;
    top: 5.5rem;
    right: 0.5rem;
    /*width: calc(100vw);
    height: calc(100vh - 5rem);*/
    width: auto;
    height: auto;
    z-index: 1000;
    background-color: #F3F3F3;
    display: none;
}


#header {
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100vw;
    height: 3rem;
    z-index: 100;
    background-color: #28522E;
}

#headerTitle {
    position: absolute;
    top: 0rem;
    left: 3rem;
    font-size: 2rem;
    margin-top: 4px;
    color: white;
    font-family: 'Work Sans';
}


#controlsSidebar {
    position: absolute;
    top: 3rem;
    left: 0;
    width: 22rem;
    height: calc(100vh - 3rem);
    background-color: #F2F2F2;
    display: none;
}

#bottomButtonsHolder {
    position: absolute;
    width: 20rem;
    bottom: 0rem;
    left: 0rem;
    text-align: center;

}

.menuLabel {
    font-size: 1.25rem;
    font-weight: bold;
    color: #3F3F3F;
    user-select: none;
}

/*#drawButton{
    position: absolute;
    bottom:1rem;
    left:0.25rem;
}
#uploadButton{
    position: absolute;
    bottom:1rem;
    left:7rem;
}
#deleteDrawButton{
    position: absolute;
    bottom:1rem;
    right:0.25rem;
}*/
.boxShadowed {
    box-shadow: 0 0 5px #464646;
}

.popupHeader {
    font-size: 1.25rem;
    font-weight: bold;
}

#hideResultsButton {
    position: absolute;
    top: 3px;
    right: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.5rem;
}

.hidePlotsButton {
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    line-height: 0.75rem;
    padding: 0.5rem;
    z-index: 1000;
    border-radius: 1.25rem;
}

#resultsHolder {
    position: absolute;
    top: 5.5rem;
    right: 1rem;
    padding: 1rem;
    height: auto;
    width: 20rem;
    width: auto;
    background-color: white;
    z-index: 10000;
    color: black;
    border-radius: 5px;
    max-height: 80vh;
    overflow-y: auto;
    display: none;
}

.resultsHolder {
    text-align: center;
}

/*tr{
    line-height: 14px;
}
td, th {
  border: 1px solid #434343;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #5F5F5F;
}
*/







#hoverInfoBox {
    user-select: none;
    /* Standard */
    position: absolute;
    z-index: 10000;
    padding: 0.5rem;
    background-color: #F1F1F1;
    display: none;
    border-radius: 10px;
    line-height: 1.5rem;
    max-width: 15rem;
    max-height: 75vh;
    height: auto;
    color: #373737;
}

.hoverTitle {
    font-size: 1.25rem;
    font-weight: bold;
}

.helperTitle {
    font-size: 1.25rem;
    font-weight: bold;
}

.helperText {
    font-size: 1rem;
    font-weight: 200;
}

.hasHelpText{
    cursor: pointer !important;
}

.gradientBlockbrbg {
    /*    background-image: linear-gradient(to right, rgb(86,49,5) 0%, rgb(221,190,120) 50%, rgb(153,215,206) 75%, rgb(0,61,49) 100%);*/
    background-image: linear-gradient(to left, rgb(0, 61, 49) 0%, rgb(153, 215, 206) 30%, rgb(255, 255, 255) 50%, rgb(221, 190, 120) 75%, rgb(86, 49, 5) 100%);
}

.gradientBlockbrbg_r {
    background-image: linear-gradient(to right, rgb(0, 61, 49) 0%, rgb(153, 215, 206) 30%, rgb(255, 255, 255) 50%, rgb(221, 190, 120) 75%, rgb(86, 49, 5) 100%);
}

.gradientBlockbrbg_rdef {
    background-image: linear-gradient(to right, rgb(153, 215, 206) 0%, rgb(255, 255, 255) 50%, rgb(221, 190, 120) 75%, rgb(86, 49, 5) 100%);
    background-image: linear-gradient(to right, rgb(0, 61, 49) 0%, rgb(153, 215, 206) 50%, rgb(221, 190, 120) 75%, rgb(86, 49, 5) 100%);
}

.gradientBlockinferno {
    background-image: linear-gradient(to right, rgb(1, 0, 7) 0%, rgb(98, 20, 110) 50%, rgb(233, 98, 42) 75%, rgb(247, 251, 153) 100%);
}

.gradientBlockpuor {
    background-image: linear-gradient(to right, rgb(129, 60, 7) 0%, rgb(222, 128, 19) 25%, rgb(247, 243, 238) 50%, rgb(159, 150, 195) 75%, rgb(50, 5, 83) 100%);
}

.gradientBlockwistia {
    background-image: linear-gradient(to right, rgb(204, 255, 102) 0%, rgb(255, 204, 0) 25%, rgb(255, 187, 0) 50%, rgb(254, 155, 0) 75%, rgb(252, 127, 0) 100%);
}

.gradientBlockpuor_r {
    background-image: linear-gradient(to left, rgb(129, 60, 7) 0%, rgb(222, 128, 19) 25%, rgb(247, 243, 238) 50%, rgb(159, 150, 195) 75%, rgb(50, 5, 83) 100%);
}

.gradientBlockmagma {
    background-image: linear-gradient(to right, rgb(0,0,6) 0%, rgb(116,32,129) 50%, rgb(251,134,96) 75%, rgb(251,249,187) 100%);
}

.gradientBlockviridis {
    background-image: linear-gradient(to right, rgb(69,5,88) 0%, rgb(46,108,142) 50%, rgb(50,181,122) 75%, rgb(250,230,34) 100%);
}


.hidden {
    display: none;
}

.visible {
    display: block;
}


/*                              */
/*          map legend          */
/*    
                          */
#modalLoader {
    position: absolute;
    z-index: 8000;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    display: none;   
}
#modalMsg{
    position: absolute;
    z-index: 1000;
    width:100%;
    top:48%;
    text-align: center;
    color:rgba(255,255,255,0.75);
    font-size: 1.5rem;
    /*font-weight: bold;*/
}

#loader {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 8500;
    display: none;
}

.loader {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 1rem solid;
    border-color:
        rgba(42, 255, 0, 0.30) rgba(42, 255, 0, 0.45) rgba(42, 255, 0, 0.60) rgba(42, 255, 0, 0.75);
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


#imgTestHolder {
    position: absolute;
    z-index: 2000;
    top: 1rem;
    right: 1rem;
    width: auto;
    height: auto;
}

.imgTester {
    display: inline-block;
    width: 15rem;
    height: 15rem;
}

#notificationBox {
    position: absolute;
    width: auto;
    max-width: 20rem;
    z-index: 5000;
    height: auto;
    min-height: 3rem;
    left: 0;
    background-color: white;
    color: black;
    padding: 1rem;
    top: 4rem;
    left: 21rem;
    display: none;
    font-size: 1.5rem;
    text-align: left;
    box-shadow: 0 0 5px #626262;
    border-radius: 5px;
}

#toastBox {
    position: absolute;
    width: auto;
    max-width: 20rem;
    z-index: 5000;
    height: auto;
    min-height: 3rem;
    left: 0;
    background-color: white;
    color: black;
    padding: 1rem;
    top: 4rem;
    left: 21rem;
    display: none;
    font-size: 1.5rem;
    text-align: left;
    box-shadow: 0 0 5px #626262;
    border-radius: 5px;
}


.selectedTab {
    background-color: #28522E;
    color: white;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.rightTab {
    float: right;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    /*  float: left;*/
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 49%;
}

.opacitySlider {
    width: 75%;
    margin-left: 1rem;
    /*    margin-bottom: 10px;*/
}

.opacityValueLabel {
    /*    font-size: 1rem;*/
    margin-left: 4px;
    display: inline;
    bottom: 4px;
}

#opacityControlHolder {
    position: absolute;
    top: 6rem;
    left: 21rem;
    width: auto;
    z-index: 1000;
    background-color: white;
    padding: 0.5rem;
    border-radius: 5px;
    display: none;
    box-shadow: 0 0 5px #626262;
}

#accuracyControlHolder {
    position: absolute;
    top: 11rem;
    left: 21rem;
    width: auto;
    z-index: 1000;
    background-color: white;
    padding: 0.5rem;
    /*    display: none;    */
}

#confidenceCheckbox {
    display: inline;
}

.controlLabel {
    font-weight: 200;
    font-size: 1rem;
    margin-top: 5px;
    user-select: none;
}

.rasterQueryPopupContent {}

.mapboxgl-popup-content {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    padding: 1rem;
    pointer-events: auto;
    position: relative;
}

hr {
    margin-top: 1rem;
}

#downloadModalWindow {
    /*    display: inline-block;    */
    position: absolute;
    z-index: 3000;
    top: 4rem;
    width: 42rem;
    left: 1rem;
    padding: 1rem;
    /*    text-align: center;  */
    background-color: white;
    box-shadow: 0 0 5px #464646;
    border-radius: 10px;
    display: none;
}

#closeDownloadButton {
    position: absolute;
    top: 1rem;
    right: 1rem;
    float: right;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: bold;
}

#agreementHolder {
    margin-top: 0.5rem;
    display: none;
}

#welcomeModal {
    position: absolute;
    z-index: 5000;
    background-color: rgba(0, 0, 0, 0.45);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    /*display: none;*/
}

#welcomeWindow {
    position: absolute;
    padding: 1rem;
    width: auto;
    max-width: 70rem;
    padding: 1rem;
    background-color: white;
    width: auto;
    height: auto;
    top: 4rem;
    box-shadow: 0px 5px 25px rgba(0, 0, 0, .4);
    border-radius: 5px;
}

#footerLogos{
    width:100%;
    height: auto;
}

@media (max-width: 800px) {
    #welcomeWindow {
        max-width: 90%;
    }
}

#welcomeTitle {
    font-size: 2rem;
}

#welcomeLogo {
    height: 6rem;
    width: auto;
}

#welcomeSubtitle {
    font-size: 2rem;
    font-family: 'Merriweather', serif;
    color: black;
    letter-spacing: 0.1rem;
    user-select: none;
}

.welcomeContent {
    font-size: 1rem;
    user-select: none;
    color: black;
}

#welcomeButtonHolder {
    width: 100%;
    height: auto;
    line-height: 1.5rem;
    text-align: center;
}

.welcomeButton {
    margin: 0.5rem;
    display: inline-block;
}

#exploreMapButton {
    /*  padding:1rem;*/
    background-color: #DA8D3A;
    /*  margin-bottom: 4rem;*/

}

/*legend */
/*                              */
/*          map legend          */
/*                              */
.mapLegend {
    padding: 0.5rem;
    background-color: white;
    border-radius: 5px;
    text-align: center;

}

#mapLegend {
    position: absolute;
    z-index: 2000;
    bottom: 3rem;
    left: 1rem;
    display: none;
}

#compareLegend {
    position: absolute;
    z-index: 2000;
    bottom: 3.25rem;
    right: 1rem;
    padding: 1rem;
    background-color: white;
    display: none;
}

.gradientBlock {
    width: 12rem;
    width: 90%;
    height: 2rem;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}



/*agg diss legend*/

#aggDissLegend {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 3rem;
    left: 1rem;
    background-color: white;
    padding: 1rem;
    width: auto;
    height: auto;
/*    max-height: 8rem;*/
    overflow-y: auto;
    box-shadow: 0 0 5px #464646;
    border-radius: 10px;
    display: none;
    margin-left:12rem;
}

.aggDissLegendContent{
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 15px;
    margin-left:10rem;
}

#aggDissLegendContent{
/*     margin-left:10rem;*/

}

#aggDissLegendHidden {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
    position: absolute;    
    left:50%;
    bottom:1rem;
    background-color: white;    
    width: auto;
    height: auto;
    overflow-y: auto;
    margin-left: 12rem;
}

.container {
    
}

.y-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    font-size: 10px;
    position: absolute;
    bottom:10px;
}

.graph {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left:15px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    gap: 0px;
}

.cell {
    width: 50px;
    height: 50px;
}

/* Use approximate sampled colors from the image */
.r1c1 {
    background-color: #60b1bc;
}

.r1c2 {
    background-color: #497b85;
}

.r1c3 {
    background-color: #4b373f;
}

.r2c1 {
    background-color: #a8d5de;
}

.r2c2 {
    background-color: #a5929a;
}

.r2c3 {
    background-color: #a84f4c;
}

.r3c1 {
    background-color: #e6e6e6;
}

.r3c2 {
    background-color: #e3a2a3;
}

.r3c3 {
    background-color: #d44740;
}

.x-label {
    margin-top: 8px;
    text-align: center;
    font-size: 10px;
}




.colorbar-container {
      display: flex;
      align-items: center;
      margin: 30px;
    }
    .colorbar-gradient {
      position: relative;
      width: 200px;
      height: 30px;
      background: linear-gradient(to right, #ffff36 0%, #26b27b 50%, #4a1b6d 100%);
      border: 2px solid #fff;
      margin-right: 20px;
    }
    .colorbar-ticks {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
    }
    .colorbar-tick {
      position: absolute;
      top: 0; bottom: 0;
      width: 1px;
      background: #fff;
      opacity: 0.7;
    }
    .colorbar-labels {
      display: flex;
      justify-content: space-between;
      width: 200px;
      margin-top: 5px;
      font-family: Arial, sans-serif;
      font-size: 1.1em;
      font-weight: bold;
      color: #222;
    }
    .colorbar-labels .label {
      text-align: center;
    }
    .colorbar-labels .label:first-child {
      text-align: left;
    }
    .colorbar-labels .label:last-child {
      text-align: right;
    }

        .colorbar-container {
      display: flex;
      align-items: center;
      margin: 30px;
    }
    .colorbar-gradient2 {
      position: relative;
      width: 200px;
      height: 30px;
      background: linear-gradient(to right, #f9ff7d 0%, #ff701a 35%, #6b1871 70%, #090612 100%);
      border: 2px solid #fff;
      margin-right: 20px;
    }
    .colorbar-ticks {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
    }
    .colorbar-tick {
      position: absolute;
      top: 0; bottom: 0;
      width: 1px;
      background: #fff;
      opacity: 0.7;
    }
    .colorbar-labels {
      display: flex;
      justify-content: space-between;
      width: 200px;
      margin-top: 5px;
      font-family: Arial, sans-serif;
      font-size: 1.3em;
      font-weight: bold;
      color: #222;
    }
    .colorbar-labels .label {
      text-align: center;
      width: 33%;
    }
    .colorbar-labels .label:first-child {
      text-align: left;
    }
    .colorbar-labels .label:last-child {
      text-align: right;
    }