/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
 #map {
    height: 100%;
  }
  
  /* 
   * Optional: Makes the sample page fill the window. 
   */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #container,
  #left,
  #right,
  .map,
  .gutter {
    height: 930px;
  }
  
  #left,
  #right,
  .gutter {
    float: left;
    position: relative;
    overflow: hidden;
  }
  
  #map-left {
    position: absolute;
    left: 0;
    top: 0;
  }
  
  #map-right {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .gutter {
    background-color: #133467dd;
    background-repeat: no-repeat;
    background-position: 50%;
  }
  
  .gutter.gutter-horizontal {
    cursor: col-resize;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
  }

    .download-button {
      height: 28px;
      background-color: #000;
      /* Black background */
      color: #fff;
      /* White color for the arrow sign */
      border: none;
      /* Remove border */
      padding: 4px 8px;
      /* Adjust padding as needed */
      cursor: pointer;
      border-radius: 4px;
      /* Add rounded corners */
      margin-right: 5px;
      /* Add some spacing between the buttons */
      margin-top: 5px;
    }
  
    /* Proper CSS for maxcloudcover text and Klarety picture logo */
    .button-container {
      display: flex;
      /* Use flexbox to arrange buttons horizontally */
      align-items: center;
      /* Align buttons vertically in the center */
      margin-right: 10px;
      /* Add some spacing between the plus button and download button */
    }
  
    .plus-button,
    .download-button {
      /* ... (existing button styles) ... */
      margin-right: 5px;
      /* Add some spacing between the buttons */
    }
  
    #maxccLabel {
      color: white;
      margin-right: 10px;
      margin-left: 10px;
    }
  
    #maxcc {
      width: 50px;
      margin-right: 10px;
      margin-left: 10px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  
    #fromLabel,
    #toLabel {
      color: white;
      margin-right: 10px;
    }
  
    #from,
    #to {
      width: 120px;
      margin-right: 10px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  
    #enclose {
      /* Set the maximum height and make it scrollable */
      max-height: 100%;
      /* Adjust the maximum height as needed */
      overflow-y: auto;
      margin: 10px;
    }
  
    #new-enclose {
      /* Set the maximum height and make it scrollable */
      max-height: 100%;
      /* Adjust the maximum height as needed */
      overflow-y: auto;
      margin: 10px;
    }
  
    #new-enclose2 {
      /* Set the maximum height and make it scrollable */
      max-height: 100%;
      /* Adjust the maximum height as needed */
      overflow-y: auto;
      margin: 10px;
    }
  
    .close {
      /* Set the maximum height and make it scrollable */
      max-height: 100%;
      /* Adjust the maximum height as needed */
      overflow-y: auto;
      margin: 10px;
    }
  
    .POLY {
      /* Remove default list styles */
      list-style-type: none;
      padding: 10px 10px 10px 20px;
      margin: 0;
    }
  
    .POLY li {
      /* Add some spacing between each list item */
      margin-bottom: 10px;
    }
  
    .POLY li strong {
      /* Style the strong tags to make the labels bold */
      font-weight: bold;
    }
  
    .POLY hr {
      /* Style horizontal lines to separate each item */
      border: none;
      border-top: 1px solid #ccc;
      margin: 5px 0;
    }
  
    /* Additional styling for each polygon list item */
    .POLY li {
      font-size: 14px;
      /* Adjust the font size as needed */
    }
  
    .POLY li span {
      display: block;
      font-size: 12px;
      /* Adjust the font size as needed */
      margin-top: 5px;
      /* Add some spacing between labels and values */
      margin-right: 5px;
      overflow-wrap: break-word;
    }
  
    .POLY li img {
      /* Adjust the image size as needed */
      max-width: 150px;
      max-height: 100px;
      display: block;
      margin-top: 5px;
    }
  
  
    .plus-button {
      /* Style the plus sign button */
      font-size: 24px;
      width: 40px;
      height: 30px;
      background-color: #000000;
      color: white;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      /* Add rounded corners */
      margin-top: 5px;
    }
  
    .POLY li .plus-button:hover {
      background-color: rgb(13, 34, 67);
    }
  
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
  
    #map-right {
      height: 99%;
      width: 99%;
    }
  
  
    /* Style the slider */
    input[type="range"] {
      width: 100px;
      /* Adjust the width of the slider */
      height: 10px;
      /* Adjust the height of the slider */
      border-radius: 5px;
      /* Adjust the border radius for rounded edges */
    }
  
    /* Style the slider track for Chrome */
    input[type="range"]::-webkit-slider-runnable-track {
      background-color: #ddd;
      /* Adjust the color of the slider track */
      height: 15px;
      /* Adjust the height of the slider track */
      border-radius: 5px;
      /* Adjust the border radius for rounded edges */
    }
  
    /* Style the slider thumb for Chrome */
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      /* Adjust the width of the slider thumb */
      height: 20px;
      /* Adjust the height of the slider thumb */
      border-radius: 30%;
      /* Make the slider thumb circular */
      background-color: #f10707;
      /* Adjust the color of the slider thumb */
      cursor: pointer;
    }
  
    /* #legend {
    background-color: rgba(200,200,200,0);
    border: 1px solid rgba(200,200,200,0);
    padding: 10px;
  } */
  
    #opacitySliderContainer2 {
      position: relative;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  
    #color-bar-container {
      position: relative;
      width: 150px;
      /* Set the desired width of the color bar */
      height: 20px;
      margin-top: 5px;
      margin-bottom: 30px;
    }
  
    #color-bar-container_pop {
      position: relative;
      width: 150px;
      /* Set the desired width of the color bar */
      height: 20px;
      margin-top: 5px;
      margin-bottom: 30px;
    }
  
    #color-bar-container_bul {
      position: relative;
      width: 150px;
      /* Set the desired width of the color bar */
      height: 20px;
      margin-top: 5px;
      margin-bottom: 30px;
    }
  
    #color-bar {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 150px;
      background: linear-gradient(to right, #000000, rgb(50, 0, 0), rgb(150, 0, 0), rgb(250, 50, 0), rgb(255, 150, 0), rgb(255, 255, 0));
      /* Adjust the color stops and values */
    }
  
    #color-bar_pop {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 150px;
      background: linear-gradient(to right, #0000FF, #00FFFF, #00FF00, #ADFF2F, #FFFF00, #FFA500);
      /* Adjust the color stops and values */
    }
  
    #color-bar_bul {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 150px;
      background: linear-gradient(to right, #000000, #320000, #960000, #FF3200, #FF9600, #FFFF00);
      /* Adjust the color stops and values */
    }
  
    #left-marker {
      position: absolute;
      top: calc(100% + 5px);
      left: 0;
    }
  
    #right-marker {
      position: absolute;
      top: calc(100% + 5px);
      right: 0;
    }
  
    #marker02 {
      position: absolute;
      top: calc(100% + 5px);
      left: calc(20% - 2px);
      /* Adjust the marker position as needed */
    }
  
    #marker04 {
      position: absolute;
      top: calc(100% + 5px);
      left: calc(40% - 2px);
      /* Adjust the marker position as needed */
    }
  
    #marker06 {
      position: absolute;
      top: calc(100% + 5px);
      left: calc(60% - 2px);
      /* Adjust the marker position as needed */
    }
  
    #marker08 {
      position: absolute;
      top: calc(100% + 5px);
      left: calc(80% - 2px);
      /* Adjust the marker position as needed */
    }
  
    .legend-marker {
      font-size: 10px;
    }
  
    #color-bar-container {
      display: none;
    }
  
    #color-bar-container.show {
      display: block;
    }
  
    #color-bar-container_pop {
      display: none;
    }
  
    #color-bar-container_pop.show {
      display: block;
    }
  
    #color-bar-container_bul {
      display: none;
    }
  
    #color-bar-container_bul.show {
      display: block;
    }
  
    .custom-margin1 {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
  
    .custom-margin2 {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
  
    #totalArea {
      color: #990000;
    }
  
    #totalPop {
      color: #990000;
    }
  
    #NOB {
      color: #990000;
    }
  
  
    .toolbar {
      position: relative;
      background-color: #1D1D1D;
      color: white;
      top: 0;
      padding: 5px;
      height: 40px;
      display: flex;
      align-items: center;
      z-index: 5;
    }
  
    .toolbar .arrow-icon {
      color: white;
      font-size: 30px;
      /* Adjust the font size to make the arrow bigger */
      margin-right: 20px;
      margin-left: 20px;
    }
  
    .toolbar img {
      max-height: 40px;
      left: 100px;
      margin-left: 0px;
      margin-right: 0px;
    }
  
    body {
      margin: 0;
    }
  
    .popup {
      position: absolute;
      background-color: #13346722;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
      display: none;
      font-size: 14;
      z-index: 9999;
    }
  
    .q-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #1D1D1D;
      color: white;
      padding: 0px;
      text-align: center;
      font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
      font-size: 14px;
      z-index: 9999;
    }
  
    .drawer-button {
      background-color: #000000;
      color: #fff;
      padding: 6px 12px;
      border: 1px solid #ffffff;
      border-radius: 4px;
      cursor: pointer;
      font-size: 18px;
      margin-left: 10px;
    }
  
    .drawer-button:hover {
      background-color: #133467;
    }
  
    .drawer-button.active {
      background-color: #133467;
      /* Change this to the desired active color */
    }
  
    .drawer-button .drawer-icon {
      font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 42px;
    }
  
  
    .drawer {
      position: fixed;
      top: 50px;
      left: -250px;
      /* Start the drawer off-screen */
      width: 240px;
      height: calc(100vh - 50px);
      border: 10px solid #133467;
      border-top-width: 10px;
      border-bottom-width: 10px;
      background-color: #ffffff;
      transition: left 0.3s ease;
      z-index: 2;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      border-radius: 0 10px 10px 0;
    }
  
  
  
    .drawer.open {
      left: -10;
      z-index: 2
        /* Slide the drawer into view */
    }
  
    .panel {
      border-bottom: 10px solid #13346788;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
  
    .panel:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  
    .scrollable-section {
      max-height: 250px;
      /* Adjust as needed */
      overflow-y: auto;
    }
  
    .expand-button {
      width: 240px;
      background-color: #000000;
      color: #fff;
      padding: 10px 20px;
      border: 1px solid #ffffff;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
    }
  
    .expand-button:hover {
      background-color: #133467;
    }
  
    /* .close {
    display: none;
  } */
  
    .close.show {
      display: block;
    }
  
    .triangle-icon {
      display: inline-block;
      vertical-align: middle;
      width: 0;
      height: 0;
      margin-right: 8px;
      margin-bottom: 3px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 6px solid #fff;
      transition: transform 0.3s ease;
    }
  
    .expand-button.expanded .triangle-icon {
      transform: rotate(90deg);
    }
  
    #side-panel {
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      background-color: #ffffff;
      padding: 0px;
      width: 240px;
      height: 80vh;
      overflow-y: auto;
    }
  
    #new-side-panel {
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      background-color: #ffffff;
      padding: 0px;
      width: 240px;
      height: 100vh;
      overflow-y: auto;
    }
  
  
    #new-side-panel2 {
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      background-color: #ffffff;
      padding: 0px;
      width: 240px;
      height: calc(100vh - 130px);
      overflow-y: auto;
    }
  
    .tab {
      position: relative;
      cursor: pointer;
      padding: 10px;
      border: 3px solid #ffffff;
      background-color: #000000;
      margin-bottom: 5px;
    }
  
    .tab.active {
      background-color: #133467;
    }
  
  
    .triangle {
      position: absolute;
      right: 10px;
      /* Adjust the positioning as needed */
      top: 50%;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 8px solid white;
      transform-origin: 0% 50%;
      transition: transform 0.2s ease-in-out;
    }
  
    .tab.active .triangle {
      transform: rotate(90deg);
      /* Rotate the triangle on click */
    }
  
    /* Style for the feature tabs (list of boxes) */
    .feature-tab {
      display: inline-block;
      width: 120px;
      height: 30px;
      background-color: #13346777;
      color: #fff;
      text-align: center;
      line-height: 30px;
      margin: 1px;
      cursor: pointer;
      position: relative;
    }
  
    .feature-tab::before {
      content: "";
      position: absolute;
      left: -20px;
      /* Adjust as needed to position the arrow */
      bottom: -5px;
      /* Adjust as needed to position the arrow */
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      /* Top part of the arrow */
      border-right: 10px solid #13346777;
      /* Right part of the arrow (arrowhead) */
      border-bottom: 10px solid transparent;
      /* Bottom part of the arrow */
      transform: rotate(-45deg);
      /* Rotate the arrow */
    }
  
    /* Hover effect for the feature tabs */
    .feature-tab:hover {
      background-color: #133467;
    }
  
    .list-of-feature-tabs {
      text-align: center;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
  
  
    .new-side-panel-arrow {
      /* Your styles for the back arrow button go here */
      position: fixed;
      display: block;
      /* Ensure the button is a block-level element to create space below it */
      bottom: 65px;
      /* Add some spacing between the button and the rest of the content */
      float: 10px;
      color: #ffffff;
      font-size: 30px;
      /* Adjust the font size to make the arrow bigger */
      left: 24px;
      z-index: 9999;
      padding: 3px 90px;
      /* Add padding to create a box shape */
      border-radius: 10px;
      /* Round the corners */
      background-color: #133467;
    }
  
    .new-side-panel-arrow2 {
      /* Your styles for the back arrow button go here */
      position: fixed;
      display: block;
      /* Ensure the button is a block-level element to create space below it */
      bottom: 20px;
      /* Add some spacing between the button and the rest of the content */
      color: #ffffff;
      font-size: 30px;
      /* Adjust the font size to make the arrow bigger */
      left: 24px;
      z-index: 9999;
      padding: 3px 90px;
      /* Add padding to create a box shape */
      border-radius: 10px;
      /* Round the corners */
      background-color: #133467;
    }
  
  
    .input-line {
      position: relative;
      left: 20px;
      top: 20px;
      margin-bottom: 10px;
      /* Add the desired spacing between the input lines */
    }
  
    .input-line-apply {
      position: relative;
      left: 160px;
      top: 20px;
      margin-bottom: 10px;
      /* Add the desired spacing between the input lines */
    }
  
    .applyButton {
      background-color: #000000;
      color: #fff;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
      /* Add some spacing between the "To" input and the button */
    }
  
    .applyButton:hover {
      background-color: #133467;
    }
  
  
    #map-container {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  
    #drawing-controls {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1000;
      /* Make sure it's above the map */
    }
  
    #Unselect-button {
      position: relative;
      margin: 0px;
      background: none;
      border: none;
      cursor: pointer;
      color: #333;
      /* Icon color */
      font-size: 14px;
      top: -0.5vh;
      left: 50.4vw;
      background-color: #ffffff;
      /* Match the background color of Google buttons */
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
      height: 24px;
    }
  
    .pac-card {
      background-color: #fff;
      border: 0;
      border-radius: 2px;
      box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
      margin: 10px;
      padding: 0 0.5em;
      font: 400 18px Roboto, Arial, sans-serif;
      overflow: hidden;
      font-family: Roboto;
      padding: 0;
    }
  
    #pac-container {
      padding-bottom: 12px;
      margin-right: 12px;
    }
  
    .pac-controls {
      display: inline-block;
      padding: 5px 11px;
    }
  
    .pac-controls label {
      font-family: Roboto;
      font-size: 13px;
      font-weight: 300;
    }
  
    #pac-input {
      background-color: #fff;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-right: 12px;
      margin-top: 10px;
      padding: 2 11px 2 13px;
      text-overflow: ellipsis;
      width: 400px;
    }
  
    #pac-input:focus {
      border-color: #4d90fe;
    }
  
    #title {
      color: #fff;
      background-color: #4d90fe;
      font-size: 25px;
      font-weight: 500;
      padding: 6px 12px;
    }
  
    #target {
      width: 345px;
    }
  
    .highlighted {
      border: 4px solid green;
      /* Apply your desired highlighting style */
    }
  
    .hover-highlight {
      border: 4px solid green;
      background-color: rgba(0, 255, 0, 0.2);
      /* Apply your desired hover highlight color */
    }
  
    .dialog {
      /* display: none; */
      position: fixed;
      height: 500px;
      width: 600px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 20000;
      overflow: auto;
    }
  
  
  
    .close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 18px;
      background: none;
      border: none;
      cursor: pointer;
    }
  
    .dialog-content {
      display: flex;
      flex-direction: column;
      /* Set the flex direction to horizontal */
      overflow: auto;
    }
  
  
    .content-wrapper {
      display: flex;
      flex-direction: row;
      /* Set the flex direction to horizontal */
    }
  
    .left-part,
    .right-part,
    .bottom-part {
      flex: 2;
      padding: 20px;
      border: 1px solid #ccc;
      /* box-sizing: border-box; */
      height: 200px;
      top: 300px;
      overflow: auto;
    }
  
    .detect-button {
      background-color: #000000;
      /* Set your desired background color */
      color: #fff;
      /* Set your desired text color */
      border: none;
      padding: 10px 20px;
      margin-top: 10px;
      cursor: pointer;
      font-size: 20
    }
  
    .detect-button:hover {
      background-color: #133467;
      /* Set a slightly darker background color on hover */
    }
  
    .empty-box {
      position: absolute;
      height: 300px;
      width: 220px;
      top: 220px;
      left: 9px;
      border: 1px solid #000;
      /* Add any other desired styles here */
    }