:root {
    --base-color: #8c92ac;
    --color1: #ff7f00;
    --color2: #007bff;
    --color3: #ff3ba4;
    --object-color: #c4c7d5;
    --object-color-semi-transparent: #c4c7d5DD;
    --border-thickness: 5px;
    
    --padding-top-bottom: 1dvh;
    --padding-left-right: 3dvw;
    --header-height: 9dvh;
    --component-border-thickness: 2px;
    /* Add more variables as needed */
  }
  


  * {
    font-family: sans-serif;
  }

  
  .noSelect {
    -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; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  }
  
  
  
  /* Ensure the rest of the site fits the mobile screen */
  body, html{
      margin: 0;
      padding: 0;
      width: 100dvw;
      height: 100dvh;
       background: var(--base-color);
     border-radius: 10px; /* Adjust the radius value to control the amount of curvature */
          /*  border: solid 2px var(--color1);*/
    overflow: hidden;
    font-size: 3.5dvw;
  }
  
  div, img, button, label, input, select {
    border-radius: 10px; /* Adjust the radius value to control the amount of curvature */
  }
  


  .outer-border {
    position: relative;
    width: 100dvw;
    height: 100dvh;
    border-radius: 5px; /* Outer border's rounded corner */
    background-color: var(--color3); /* Outer border color */
    overflow: hidden; /* Ensures nested layers fit within the border */
    z-index: 1;
    
  }

  .outer-border::before,
  .outer-border::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    /* Ensures layers are perfectly aligned with the outer border */
  }

  /* Middle Border Layer */
  .outer-border::before {
    border: var(--border-thickness) solid var(--color1);
    margin: calc(var(--border-thickness) / 2); /* Creates gap for pink border */
    z-index: -2;
    pointer-events: none;
  }

  /* Inner Border Layer */
  .outer-border::after {
    border: var(--border-thickness) solid var(--color2);
    margin: calc(var(--border-thickness) * 1); /* Creates gap for pink + orange */
    z-index: -1;
    pointer-events: none;
  }

  
  
  /* Responsive design for mobile devices */
  @media (max-width: 768px) {
      /* Additional responsive styles if needed */
  }	
      

  .background-layer {
    position: absolute;
    top: calc(var(--border-thickness)* 1);
    left: calc(var(--border-thickness)* 1);
    right: calc(var(--border-thickness)* 1);
    bottom: calc(var(--border-thickness)* 1);
    background-color: var(--base-color); /* Set your desired background color here */
    z-index: -1; /* Position it behind the other content */
    padding: var(--padding-top-bottom) var(--padding-left-right);
}
      
      
    #app-container {
  
      display: flex;
      flex-direction: column;
    /*  justify-content: space-between; */
      width: 91dvw;
      height: calc(100% - 9.5dvh);
       
    }
      



/* Header styling */
#header {
    display: flex;
    align-items: center;
    /*padding: var(--padding-top-bottom) var(--padding-left-right);*/
    height: var(--header-height);
    width: 91dvw;
    box-sizing: border-box;
    justify-content: flex-start;
    padding-bottom: 1dvh;
}

/* Left image container */
#logo-img {
    height: calc(9dvh - var(--padding-top-bottom) * 1); /* Set height based on header height minus padding */
    width: auto; /* Maintain aspect ratio */
    margin-right: auto; /* Allow flexible spacing to adjust automatically */
    /*margin-left: 1dvw; */
    flex-shrink: 0;
}

#logo {
    height: calc(var(--header-height) - var(--padding-top-bottom)* 1);
}

/* Right image container */
#title-img {
    display: flex;
    align-items: baseline;
    height: calc(var(--header-height) - var(--padding-top-bottom)* 1);
   /* width: calc(100% - (20dvh - var(--padding-top-bottom) * 2 + 3dvw)); /* Remaining space after left image and margins */
}

/* Right image itself */
#title-text-img {
    width: 100%; /* Fill remaining space */
    height: auto; /* Maintain aspect ratio */
    max-height: calc(var(--header-height) - var(--padding-top-bottom) * 1); /* Constrain height to header */
    object-fit: contain;
}

#logo, #title-text-img {
    object-fit: contain; 
    border: solid var(--component-border-thickness) var(--color1);
}


    #logo {
        animation: rotating-light 2s linear infinite;
    }


  
      
      @keyframes rotating-light {
      0% { box-shadow: 0 0 0.670dvw 0.670dvw rgba(255, 127, 0, 0.5) }
      25% { box-shadow: 0.670dvw 0 0.670dvw 0.670dvw rgba(255, 127, 0, 0.5) }
      50% { box-shadow: 0 0.670dvw 0.670dvw 0.670dvw rgba(255, 127, 0, 0.5) }
      75% { box-shadow: -0.670dvw 0 0.670dvw 0.670dvw rgba(255, 127, 0, 0.5) }
      100% { box-shadow: 0 -0.670dvw 0.670dvw 0.670dvw rgba(255, 127, 0, 0.5) }
    }
  
  
  
    #mapRadioContainer{ 
      position: absolute; 
      top: 2.32dvw; 
      left: 2.32dvw;
      right: 2.32dvw; 
      z-index: 100;
  
      background: var(--object-color);
      color: var(--color1);
      border: solid var(--component-border-thickness) var(--color1);
    /*  font-size: 3dvw; */
    
    }
  


    .button-strip-button
   {

      height: 5dvh;
    width: 14.0dvw;
    float: left;
    text-align: center;
    padding: 1dvw;
    border: solid var(--component-border-thickness) var(--color2);
    background: var(--object-color);
    color: var(--color2);
    cursor: pointer;
    margin: 0.5dvw;
    font-size: 2.5dvw;
    font-weight: bold;
  
    }
  
    .page-button {
      height: 5dvh;
      /*width: 14.0dvw;*/
      text-align: center;
      padding: 1dvw;
      border: solid var(--component-border-thickness) var(--color2);
      background: var(--object-color);
      color: var(--color2);
      cursor: pointer;
      margin: 0.5dvw;
      font-size: 2.5dvw;
      font-weight: bold;
    }
    

    .page-button-half-height {
      height: 2.5dvh;
      /*width: 14.0dvw;*/
      text-align: center;
      padding: 1dvw;
      border: solid var(--component-border-thickness) var(--color2);
      background: var(--object-color);
      color: var(--color2);
      cursor: pointer;
      margin: 0.5dvw;
      font-size: 2.5dvw;
      font-weight: bold;
    }

    .button-strip-button.active,
    .page-button:active,
    .page-button-half-height:active
    {
      border: solid var(--component-border-thickness) var(--color3);
      color: var(--color3);
      }
  

      .button-strip-button:disabled,
      .page-button:disabled,
      .page-button-half-height:disabled
      {
        border: solid var(--component-border-thickness) var(--base-color);
        color: var(--base-color);
        }
        
  
        
  
      
  
    .tab-button-container 
    {
    
      /*width: 100%;*/
      overflow: hidden;
      margin-bottom: 1dvw;
      
      border: solid var(--component-border-thickness) var(--color1);
      width: 100%;
      margin-bottom: 1dvh;
      display: flex;
    justify-content: space-between;
    align-items: center;
    }

    .tab-button {
      height: 4.821dvw;
      width: 12dvw;
      float: left;
      text-align: center;
      padding: 2.232dvw;
      border: solid var(--component-border-thickness) var(--color2);
      background: var(--object-color);
      color: var(--color2);
      cursor: pointer;
      margin: 0.446dvw;
    font-size: 2.679dvw;
      font-weight: bold;
    }
    .tab-button.active, .tab-button:hover {
      border: solid var(--component-border-thickness) var(--color3);
      color: var(--color3);
    }
  
  
    #share-button, #source-location-button, #target-location-button, #submitBtn, #submitTrackedLocBtn,
    #saveTargetEditButton {
      height: 9.821dvw;
      width: 30%;
      float: left;
      text-align: center;
      padding: 2.232dvw;
      border: solid var(--component-border-thickness) var(--color3);
      background: #007bff;
    color: var(--color3);
      cursor: pointer;
    margin: 0.446dvw;
    font-size: 2.679dvw;
      font-weight: bold;
    }
  
  
    /*#share-button.active, #source-location-button.active, #target-location-button.active, */
    #share-button:hover, #source-location-button:hover, #target-location-button:hover, #submitBtn:hover,
    #cancelTargetEditButton:hover {
      background: var(--color3);
      border: solid var(--component-border-thickness) var(--color2);
      color: var(--color2);
        /*border: solid 1px var(--color1);*/
    }
  
  
    #targetListButtons, #targetAddButtons, #targetEditButtons,
    #locationSelectionButtons, #cameraSelectionButtons, #gameTargetListButtons, 
    #positionLinkButtons{
      background: #8c92ac;
      /*padding: 1dvw;*/
      height: 5.5dvh;

      border: var(--component-border-thickness) solid var(--color2);

      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: var(--object-color);
    }
  
    #positionLinkSelection {
      background: #8c92ac;
      /*padding: 1dvw;*/
      height: 17.5dvh;

      border: var(--component-border-thickness) solid var(--color2);

      display: flex;
      align-items: self-start;
      justify-content: space-evenly;
    }




    #positionLinkDataDropdown1, #positionLinkDataDropdown2 {
      font-size: 3dvw;
      max-width: 50dvw;
    }
    
    #rightPositionLinkSelection{
      display: flex;
    }
    
    .button-strip {
      background: #c4c7d5;
      /*max-height: 10dvh;*/
    }
  
  
      /* Style for unchecked labels */
  .selectionRadioLabel {
    color: var(--color2); /* Default color */
    text-decoration: none;
    font-weight:normal;
  }
  
  .selectionRadio:checked + .selectionRadioLabel{
    color: var(--color3);
    text-decoration: underline;
    font-weight: bold;
  
  }
      
  
  /*#camSettings,
      #location, */ 
    #coordinates, #details, #camSettings, #targets, #location {
      height: 43dvh; /* 20% of the viewport height */
      overflow: hidden; /* Hide overflow */
      display: none; /* Use flexbox to organize inner content */
      border: solid var(--component-border-thickness) var(--color1);
      width:100%;

     /* display: flex; */
    flex-direction: column;
  }
      
  /*    #coordinates{
          display: flex;
      } */
  
  /* Style for the data-container within coordinates */
  .data-container {
      background: #c4c7d5;
      padding: 1.116dvw;
      /*border: 1px solid var(--color1);*/
      height: 100%; /* Take full height of its parent */
      overflow: hidden; /* Hide overflow */
      width: 100%; /* Ensure it takes the full width */
      display: flex; /* Use flexbox for inner elements */
          color: var(--color2);
  }
  
      
      
          .tab {
      display: none;
     /* height: 100dvh; /* Limit the maximum height to 80% of the viewport height */
      overflow: hidden; /* Hide overflow */
  }
  
  .tab.active {
      display: block; /* Use flex layout for side-by-side display */
  }
      
  
      
      
  
  /******************* Search by placed name ***************/
  
  #resultsDropdown {
    color: var(--color2);
    width: 95%;
    border-color: var(--color1);
      outline-color: var(--color1);
  }
  
  #resultsDropdown > option {
  
    color: var(--color2);
    width: 95%;
    border-color: var(--color1);
      outline-color: var(--color1);
  }
  
  #addressInput {
    color: var(--color2);
    width: 95%;
    border-color: var(--color1);
  }
  
  
  
  
  
  #video-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
      z-index: 102;
  cursor: move; /* Add a move cursor to indicate draggability */
    position: absolute; /* Position it absolutely for easy dragging */
    user-select: none; /* Disable text selection while dragging */
    
  }
  
  
  
  
  
  
  
  
    #cesiumContainer {
        z-index: 2;
      position: relative;
      width: 100%;
      height: 100%;
      /*padding-bottom: 10%; /* 1:1 Aspect Ratio */
      /*background-color: red; /* Placeholder for map */
      margin-bottom: 4.464dvw;
        /*border: solid 2px var(--color1);*/
    }
  
  
  
  
  
  .content-container {
      position: relative;
      /*width: 100%;*/
     /* padding-bottom: 100%; */
      overflow: hidden;
      border: solid var(--component-border-thickness) var(--color1);
      margin-bottom: 1dvh;

    width: 91dvw;
    height: 35dvh;
  }
  


  
  
  .video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 25%; /* 1/4 of the width to take up 1/8th of the cesiumContainer */
      height: 25%; /* 1/4 of the height to take up 1/8th of the cesiumContainer */
      overflow: hidden;
      z-index: 1; /* Ensure the video content is above the cesiumContainer */
      background-color: transparent; /* Adjust as needed */
  }
  
  #camera-view {
      width: 100%;
      height: 100%;
      object-fit: cover; /* This property ensures the video covers the container without distortion */
      border: solid var(--component-border-thickness) var(--color1);
  }
  
  #crosshair {
      position: absolute;
      width: 22.321dvw; /* Adjust the size as needed */
      height: 22.321dvw; /* Adjust the size as needed */
      top: 0;
      left: 0;
      transform: translate(0, 0);
      z-index: 2; /* Ensure the target is above the video */
  }
  
  
  .map-element {
      position: absolute;
     /* width: 100%;
      height: 100%; */
      width: 91dvw;
    height: 35dvh;
      top: 0;
  }
  
  #cesiumContainer .cesium-viewer {
      width: 100%;
      height: 100%;
  }
  /* Add additional styling as needed */
  
  
  
  
  
  #camera-control-form {
      /* Styles for the form */
  }
  
  #camera-control-form label {
      margin-right: 2.232dvw;
      /* Additional label styles */
  }
  
  #camera-control-form input[type="radio"] {
      /* Styles for the radio buttons */
  }
  
  #point-method-form {
    /* Styles for the form */
  }
  
  #point-method-form label {
    margin-right: 2.232dvw;
    /* Additional label styles */
  }
  
  #point-method-form input[type="radio"] {
    /* Styles for the radio buttons */
  }
  
  
  
  
  
  
  
  
  .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 2.232dvw;
  }
  
  .input-group label, .input-group input[type="number"] {
    width: 22.321dvw; /* Adjust the width as needed */
    margin-right: 2.232dvw;
    
  }
  
  .input-group input[type="checkbox"] {
    margin-right: 1.116dvw; /* Space between checkbox and its label */
  }
  
  

  .data-container-camera,
  .data-container-data-diff,
  .data-container-coords,
  .data-container-set-target,
  .data-container-location {
    background: #c4c7d5;
    padding: 1.116dvw;
    /*border: 1px solid var(--color1);*/
    height: 100%; /* Take full height of its parent */
    overflow: auto; /* Hide overflow */
   /* width: 100%; /* Ensure it takes the full width */
    display: flex; /* Use flexbox for inner elements */
    color: var(--color2);
    flex-direction: column;
    border: solid var(--component-border-thickness) var(--color3);
 /*   font-size: 3.348dvw; */
  }
  
  
  
  .circle {
    width: 2.232dvw; /* Adjust size as needed */
   /* height: 2.232dvw; /* Adjust size as needed */
    background-color: var(--color1);
    border-radius: 50%;
    position: absolute;
  }
  
  
  
  
  
  .target {
    background-color: var(--color1); /* Different color for the target */
    width: 17px; /* Adjust size as needed */
    height: 17px; /* Adjust size as needed */
    /* Rest of the styling similar to the direction circles */
  }
  
  .section-heading {
    font-weight: bold;
   /*   font-size: 3.348dvw; */
    text-decoration: underline;
      text-decoration-color: var(--color1);
    color:var(--color2);
  
  
  }
  
  
  /*
  
  .data-container-coords {
      background: #c4c7d5;
      padding: 1.116dvw;
      
      height: 100%; 
      overflow: auto; 
      width: 100%; 
      display: flex; 
          color: var(--color2);
      flex-direction: column;
  }
  */
  
  
  
  
  
  
  
  
  #menu-popup {
    position: absolute; /* Adjust as needed */
    width: 80%; /* Adjust the width as needed */
    box-shadow: 0 0 2.232dvw rgba(0, 123, 255, 0.5);
    padding: 4.464dvw;
    z-index: 1000; /* Ensure it's above other elements */
    /* Other styling as needed */
    border: var(--component-border-thickness) solid var(--color1);
    background: #c4c7d5;
    font-size: 2.679dvw;
    color: var(--color2);
  }
  
  
  
  
  .incDecButton{
    width: 9.821dvw;
      height: 9.821dvw;
      padding: 2.232dvw;
      margin: 1.116dvw;
    /*  font-size: 4.464dvw; */
      font-weight: bold;
  
  
    border: solid var(--component-border-thickness) var(--color3);
    background: var(--color2);
  color: var(--color3);
    cursor: pointer;
  }
  
  .incDecButton.active, .incDecButton:hover {
    background: var(--color3);
  border: solid var(--component-border-thickness) var(--color2);
  color: var(--color2);
  
       
  }
  
  
  .coordInput{
    color: var(--color2);
    border-color: var(--color2);
  
    width: 25.00dvw; /* 35.00dvw; */
    /*min-width: calc(dvw100 - ((9.821dvw * 2)+22.321dvw));*/
      height: 2.821dvw; /*height: 4.821dvw;*/
      padding: 2.232dvw;
      margin: 1.116dvw;
   /*     font-size: 2.348dvw; /*font-size: 3.348dvw;*/
    
  }
  
  
  
  
  
  .divTable {
    display: table;
    /* width: 85dvw; /* Adjust the width as needed */
    /*background: var(--object-color);
    border: solid 2px var(--color1);*/
    padding: 2dvw;
    border-collapse: collapse;
  }
  
  
  .divTableRow {
    display: table-row;
  }
  
  .divTableCell, .divTableHead {
    display: table-cell;
    /*padding: 0.670dvw 0.446dvw; /* Adjusted padding */
  }
  
  .divTableHead {
    font-weight: bold;
    
  }
  
  /* Assuming there are 4 columns in total */
  .divTableCell:first-child {
    width: 25%; /* Set the width of the first column to 1/4th of the table */
  }
  
  .divTableCell:last-child {
    width: auto; /* Let the last column take the remaining space */
    text-align: right; /* Align the content to the right */
  }
  
  .divTableHeading {
    display: table-header-group;
    font-weight: bold;
  }
  
  .divTableBody {
    display: table-row-group;
  }
  
  .divTableCell:first-child {
    min-width: 9dvw; /* Set your desired width */
      overflow: hidden; /* Hide overflow */
      white-space: nowrap; /* Prevent text from wrapping to the next line */
      text-overflow: ellipsis; /* Add ellipsis to overflow text */
  
  }
  
  /*.addressCell, .nameCell*/
  
  .divTableCell.addressCell, .divTableCell.descCell {
    display: table-cell;
   /* padding: 0.670dvw 0.446dvw; /* Adjusted padding */
   /* min-width: 80dvw;
    max-width: 82dvw;
  /*min-height: 100dvw;*/
 /* white-space: pre-wrap;*/
  text-align: left;
  font-weight: bold;
  }
  

  
  .divTableRow.targetRecordRow, .divTableRow.gameTargetRecordRow, .divTableRow.positionLinkRow{
    display: table-row;
    border-bottom: 2px solid var(--color3);
  }
  
  .divTableCell.targetCheckBoxDiv, .divTableCell.gameTargetCheckBoxDiv{
    display: flex;
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
  }
  
  .divTable.targetInnerTable, .divTable.gameTargetInnerTable, .divTable.gameTargetInnerOrientationTable{
    width: 80dvw; /* Adjust the width as needed */
  }
  
  .targetInput, .gameTargetInput{
    width: 18dvw;
  }
  
  .targetName, .targetDesc, .targetAddress, .gameAddress, .gameTitle{
    width: 80dvw;
    border-radius: 10px;
    border: solid var(--color2) 1px;
    font-size: small;
    background: var(--object-color);
    color: var(--color2);
  }


  .targetNameHalf{
    width: 32.5dvw;
    border-radius: 10px;
    border: solid var(--color2) 1px;
    font-size: small;
    background: var(--object-color);
    color: var(--color2);
  }

  .gameTargetInputSettings{
    width: 34dvw;
  }
  
  .divTableHead.gameTargetSettingsHeader{
    padding-left: 2.446dvw;
  }
  
 

  
  .targetSetButton,
  .targetCameraOnButton,
  .gameTargetCameraOnButton,
  .gameTargetToggleButton,
  .targetToggleButton,
  .positionLinkToggleButton,
  .positionLinkOrderToggleButton
   {
    display: flex;
    justify-content: center; /* Aligns horizontally */
    align-items: center;     /* Aligns vertically */
    width: 3dvh;  /* Example width */
    height: 3dvh;  /* Example height */
    background-color: #c4c7d5; /* Optional: sets background color */
    border: solid var(--component-border-thickness) var(--color2);
    color: var(--color3);
  /*  font-size: 3dvh; */
    margin-right: 0.5dvw;
  }

  .targetPaginationButton
   {
    width: 3dvh;  /* Example width */
    height: 3dvh;  /* Example height */
    background-color: #c4c7d5; /* Optional: sets background color */
    border: solid var(--component-border-thickness) var(--color2);
    color: var(--color3);
  /*  font-size: 3dvh; */
    margin-right: 0.5dvw;
  }

  .targetSetButton .targetCircle {
    position: relative;
    width: 1.0dvh;        /* Adjust size as needed */
    height: 1.0dvh;       /* Adjust size as needed */
    background-color: var(--color1);
    border-radius: 50%; /* Makes it a perfect circle */
  }






  
  .targetSetButton.active,
  .targetCameraOnButton.active,
  .gameTargetCameraOnButton.active,
  .gameTargetToggleButton.active,
  .targetToggleButton.active,
  .positionLinkToggleButton.active,
  .positionLinkOrderToggleButton.active,
  .targetPaginationButton:hover {
    background-color: #c4c7d5; /* Active state color */
    border: solid var(--component-border-thickness) var(--color3);
    color: var(--color2);
    
  }


  .targetPaginationButton:disabled
  {
    border: solid var(--component-border-thickness) var(--base-color);
    color: var(--base-color);
    }
  
  
  
  .targetCameraOnButton img,
  .gameTargetCameraOnButton img,
  .targetSetButton img{
    /*max-width: 180%; */
    max-height: 80%;
  }
  
  
  
 
  
  #transparencySlider {
    appearance: none;
    width: 20.2dvh;
    height: 5dvw;
  
  }
  
  
  #transparencySliderWrapper {
    pointer-events: auto;
    background: var(--object-color);
    color: var(--color1);
    border: solid var(--component-border-thickness) var(--color1);
    position: absolute;
    left: calc(-6.0dvh);
    top: 40%;
    transform: rotate(-90deg) translateY(-2.32dvh);
    z-index: 100;
    height: 6dvw;
    width: 20.5dvh;
  }
  
  
  
  
  #altitudeSlider {
    appearance: none;
    width: 70dvw;
    height: 5dvw;
  
  }
  
  
  #altitudeSliderWrapper {
    pointer-events: auto;
    background: var(--object-color);
    color: var(--color1);
    border: solid var(--component-border-thickness) var(--color1);
    position: absolute;
    right: 2.32dvw;
    top: 55dvw;
    transform: rotate(-90deg) translateY(32.52dvw);
    z-index: 100;
    height: 6dvw;
  }
  
  
  #moveForward{
    z-index: 100;
  
  }
  
  #moveBackward{
    z-index: 100;
    
  }
  
  #toggleDirection{
    z-index: 100;
    
  }
  
  #rateSlider{
    z-index: 100;
  }
  
  #moveAlongVectorWrapper{
    pointer-events: auto;
    background: var(--object-color);
    color: var(--color1);
    border: solid var(--component-border-thickness) var(--color1);
    position: absolute;
    right: 2.32dvw;
    bottom: 2.32dvw;
    /*transform: rotate(-90deg) translateY(32.52dvw);*/
    z-index: 100;
    height: 15dvw;
  }
  
  
  
  
  
  #navigationControl {
    position: absolute;
    right: 2.32dvw;
    bottom: 2.32dvw;
    z-index: 100;
  }
  
  #directionalControl {
    width: 20dvw;  /* Adjust size as needed */
    height: 20dvw; /* Adjust size as needed */
    border-radius: 50%;
    background-color: #eee; /* Your preferred color */
    /* Additional styling as needed */
  }
  











  
  .camera-travel-vector-controls {
    display: flex;
    align-items: center;
  }
  
  .camera-travel-distance-box {
    margin-right: 20px;
  }
  
  .camera-travel-distance-slider-container {
    flex-grow: 1;
  }
  
  .camera-travel-distance-slider-container input[type="range"] {
    width: 100%;
  }
  
  
  #camera-travel-vector-controls {
    /* Styles for the container */
      pointer-events: auto;
      background: var(--object-color);
      color: var(--color1);
      border: solid var(--component-border-thickness) var(--color1);
      position: absolute;
      right: 2.32dvw;
      bottom: 2.32dvw;
      /*transform: rotate(-90deg) translateY(32.52dvw);*/
      z-index: 100;
      height: 15dvw;
  }
  
  #fix-camera-vector-position {
    /* Styles for the checkbox */
  }
  
  #camera-travel-distance-box {
    /* Styles for the distance box container */
  }
  
  #camera-travel-distance {
    /* Styles for the distance input field */
  }
  
  #camera-travel-distance-slider-container {
    /* Styles for the slider container */
  }
  
  #camera-travel-distance-slider {
    /* Styles for the slider */
  }
  
  
  
  
  /* Camera orientation stuff */
  
  
  .cameraOrientationControls {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .compass-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .pitch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .roll-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  
  #moveControl {
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
  }
  
  
  
  .dividing-line {
    border-left: 2px solid var(--color3);
    height: 100%;
    margin-right: 5dvw;
    margin-left: 5dvw;
  }
  
  
  #srcLocationDiv, #trkPosLocationDiv, #orientationLocationDiv, #camPosGeodeticDiv,
  #camPosGeocentricDiv, #camPosETDiv, #camPositionDiv {
    height: 100%;
  }


  #camPositionDiv, #camOrientationDiv{
    display:flex;
    height: 100%;
  }




  #cameraSettingsContainer {
    position: absolute;
    top: 1dvh;
    left: 1dvw;
    right: 1dvw;
    z-index: 900;
  
    background: var(--object-color);
    color: var(--color2);
    border: solid var(--component-border-thickness) var(--color1);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
    /* Flex properties for content alignment */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Size transitions for smooth expanding/collapsing */
    transition: width 0.3s, height 0.3s, padding 0.3s;

    animation: rotating-light 2s linear infinite;
  }
  
  /* Default collapsed state */
  #cameraSettingsContainer.collapsed {
    width: 5vw;
    height: 5vw;
    overflow: hidden;
    padding: 0; /* Remove padding for a compact look */

  }
  
  /* Expanded state */
  #cameraSettingsContainer.expanded {
    height: auto;
    width: auto;
    padding: 1dvh 1dvw;
    display: flex;
    flex-direction: column;
    gap: 1dvh; /* Optional: add some space between the .camera-pair divs */
  }
  
  /* Toggle button */
  .toggle-button {
    background-color: var(--color2);
    /*color: #fff;*/
    padding: 5px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    width: 90%;
    /*border: solid var(--component-border-thickness) var(--color1);*/
  }
  
  /* Flex layout for pairs */
  .camera-settings-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  #cameraSettingsContainer label,
  #cameraSettingsContainer select {
    margin: 0; /* Remove any default margin */
  }
  
  /* Show .camera-pair when expanded */
  #cameraSettingsContainer.expanded .camera-pair {
    display: flex;
  }
  







  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Ensures it sits above other elements */
}


#shareTargetOrGameScreen, #shareShowImages, #shareSecondsPerTarget, #shareGroupNameOverride, #loadDataSourceScreen,
#selectHostedDataSourceScreen, #selectDeviceDataSourceScreen, #gameDetailsCreationScreen, #addGameTargetsGroupNameOverride {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--object-color);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
    z-index: 1000; /* Higher than overlay to be visible */
    color: var(--color2);
    border: solid 2px var(--color2);
    width: 60dvw;
}

#shareTargetOrGameScreen button, #shareShowImages button, #shareSecondsPerTarget button, #shareGroupNameOverride button, 
#loadDataSourceScreen button, #selectHostedDataSourceScreen button, #selectDeviceDataSourceScreen button, #gameDetailsCreationScreen button,
#addGameTargetsGroupNameOverride button {
    margin: 10px;
    padding: 8px 16px;
    font-size: 16px;
    color: var(--color2);
    border-color: var(--color2);
    background-color: var(--object-color);
}







/*
:root {
  --base-color: #8c92ac;
  --color1: var(--color1);
  --color2: var(--color2);
  --color3: var(--color3);
  --object-color: #c4c7d5;
  --border-thickness: 5px;
  
  --padding-top-bottom: 1dvh;
  --padding-left-right: 3dvw;
  --header-height: 9dvh;
  --component-border-thickness: 2px;
  /* Add more variables as needed */
/*}


*/





  /* Distance Popup 
  #distancePopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    width: 80%;
    max-width: 300px;
    z-index: 1001;
  }
  
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
*/












/*


  #cameraSettingsContainer {
    position: absolute; 
    top: 1dvh; 
    left: 1dvw;
    right: 1dvw; 
    z-index: 100;

    background: var(--object-color);
    color: var(--color2);
    border: solid var(--component-border-thickness) var(--color1);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camera-pair {
    display: flex;
    flex-direction: row;
}

#cameraSettingsContainer label,
#cameraSettingsContainer select {
    margin: 0; 
}
*/


/* Slide panel */



.dd-options-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Container for both divs */
.dd-options-container {
  display: flex;
  gap: 10px; /* Adds space between the two divs */
 /* border: 1px solid var(--color1); /* Optional: visual border for container */
  padding: 5px;
  max-width: 90dvw; /* Adjust width as needed */
  max-height: 10dvh;
}

/* Left div with scrollable options */
.scrollable-options {
  flex: 1; /* Makes it take remaining space */
  /*max-height: 200px; /* Set max height for scrolling */
  overflow-y: auto; /* Enable vertical scrolling */
  border: var(--component-border-thickness) solid var(--color3); /* Optional: border for better visibility */
  padding: 2px;
  height: 6dvh;
}

/* Right div with fixed options */
.fixed-options {
  flex: 0 0 200px; /* Fixed width for the right div */
  border: var(--component-border-thickness) solid var(--color3); /* Optional: border for better visibility */
  padding: 10px;
}

/* Style for labels */
.dd-options-label {
  display: block; /* Each checkbox on a new line */
  margin-bottom: 5px; /* Add spacing between checkboxes */
}


.sliding-panel {
  position: relative;
  width: 100%; /* Adjust as needed */
}

.panel-lip {
  background-color: var(--object-color);
  /* padding: 10px; */
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  border: var(--component-border-thickness) solid var(--color1);
  color: var(--color2);
  animation: rotating-light 2s linear infinite;
}

.panel-content {
  background-color: #c4c7d5;
  padding: 2px;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  display: none; /* Start hidden */
  border: var(--component-border-thickness) solid var(--color2);
  color: var(--color2);
}

.sliding-panel.open .panel-content {
  transform: translateY(0);
  display: block; /* Reveal content */
}




/* Tooltip */

/* Popup Container */
.popup {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007bff80;
  z-index: 1000;
}

/* Hidden by default */
.hidden {
  display: none;
}

/* Popup Content */
.popup-content {
  background-color: var(--object-color);
  color: var(--color2);
  padding: 2dvw;
  border-radius: 10px;
  max-width: 90%;
  box-shadow: 0 4px 8px var(--color3);
  text-align: center;
  font-size: 16px;
  border: var(--component-border-thickness) solid var(--color3);
}

.popup-content .close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: var(--color3);
}






#countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--color3);
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}


  /*  countdownOverlay.style.position = "absolute";
    countdownOverlay.style.top = "0";
    countdownOverlay.style.left = "0";
    countdownOverlay.style.width = "100%";
    countdownOverlay.style.height = "100%";
    countdownOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
    countdownOverlay.style.color = "white";
    countdownOverlay.style.fontSize = "3rem";
    countdownOverlay.style.display = "flex";
    countdownOverlay.style.justifyContent = "center";
    countdownOverlay.style.alignItems = "center";
    countdownOverlay.style.zIndex = "1000";
  
    // Append the overlay to the video content
    content.style.position = "relative"; // Ensure the video content is positioned */






  .custom-infobox {
      display: none;
      position: absolute;
      right: 1dvw;
      top: 0.5dvh;
      border-radius: 10px;
      border: var(--component-border-thickness) solid var(--color3);
      padding: 8px;
      background: var(--object-color-semi-transparent);
      pointer-events: none;
      color: var(--color2);
      font-weight: 900;
      height: 20dvh;
      width: 35dvw;
      pointer-events: auto;
      overflow-y: auto;
  }
  
.custom-infobox.open {
  display: block;
}

.custom-infox-header{
  color: var(--color3);
  font-weight: 900;
  text-decoration: underline;
}

.cesium-selection-wrapper svg {
  fill: var(--color3) !important;
  stroke: #000;
  stroke-width: 1.1px;
}


#targetsPaginationControls{
  display: flex;
}

#targetsSelectedCount{
  max-width: 15dvw;
}
.cesium-svgPath-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cesium-button {
  display: inline-block;
  position: relative;
  background: #303336;
  border: 1px solid #444;
  color: #edffff; /* For text buttons */
  fill: #edffff; /* For SVG buttons */
  border-radius: 4px;
  padding: 5px 12px;
  margin: 2px 3px;
  cursor: pointer;
  overflow: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cesium-button:focus {
  color: #fff; /* For text buttons */
  fill: #fff; /* For SVG buttons */
  border-color: #ea4;
  outline: none;
}

.cesium-button:hover {
  color: #fff; /* For text buttons */
  fill: #fff; /* For SVG buttons */
  background: #48b;
  border-color: #aef;
  box-shadow: 0 0 8px #fff;
}

.cesium-button:active {
  color: #000; /* For text buttons */
  fill: #000; /* For SVG buttons */
  background: #adf;
  border-color: #fff;
  box-shadow: 0 0 8px #fff;
}

.cesium-button:disabled,
.cesium-button-disabled,
.cesium-button-disabled:focus,
.cesium-button-disabled:hover,
.cesium-button-disabled:active {
  background: #303336;
  border-color: #444;
  color: #646464; /* For text buttons */
  fill: #646464; /* For SVG buttons */
  box-shadow: none;
  cursor: default;
}

.cesium-button option {
  background-color: #000;
  color: #eee;
}

.cesium-button option:disabled {
  color: #777;
}

.cesium-button input,
.cesium-button label {
  cursor: pointer;
}

.cesium-button input {
  vertical-align: sub;
}

.cesium-toolbar-button {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 14%;
  padding: 0;
  vertical-align: middle;
  z-index: 0; /* Workaround for rounded raster image corners in Chrome */
}

.cesium-performanceDisplay-defaultContainer {
  position: absolute;
  top: 50px;
  right: 10px;
  text-align: right;
}

.cesium-performanceDisplay {
  background-color: rgba(40, 40, 40, 0.7);
  padding: 7px;
  border-radius: 5px;
  border: 1px solid #444;
  font: bold 12px sans-serif;
}

.cesium-performanceDisplay-fps {
  color: #e52;
}

.cesium-performanceDisplay-throttled {
  color: #a42;
}

.cesium-performanceDisplay-ms {
  color: #de3;
}

.cesium-animation-theme {
  visibility: hidden;
  display: block;
  position: absolute;
  z-index: -100;
}

.cesium-animation-themeNormal {
  color: #222;
}

.cesium-animation-themeHover {
  color: #4488b0;
}

.cesium-animation-themeSelect {
  color: #242;
}

.cesium-animation-themeDisabled {
  color: #333;
}

.cesium-animation-themeKnob {
  color: #222;
}

.cesium-animation-themePointer {
  color: #2e2;
}

.cesium-animation-themeSwoosh {
  color: #8ac;
}

.cesium-animation-themeSwooshHover {
  color: #aef;
}

.cesium-animation-svgText {
  fill: #edffff;
  font-family: Sans-Serif;
  font-size: 15px;
  text-anchor: middle;
}

.cesium-animation-blank {
  fill: #000;
  fill-opacity: 0.01; /* This must be clickable, so it can't be 'fill: none'. */
  stroke: none;
}

.cesium-animation-rectButton {
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cesium-animation-rectButton .cesium-animation-buttonGlow {
  fill: #fff;
  stroke: none;
  /* Widget will add: filter: url(#animation_blurred); */
  display: none;
}

.cesium-animation-rectButton:hover .cesium-animation-buttonGlow {
  display: block;
}

.cesium-animation-rectButton .cesium-animation-buttonPath {
  fill: #edffff;
}

.cesium-animation-rectButton .cesium-animation-buttonMain {
  /* Widget will add: fill: url(#animation_buttonNormal); */
  stroke: #444;
  stroke-width: 1.2;
}

.cesium-animation-rectButton:hover .cesium-animation-buttonMain {
  /* Widget will add: fill: url(#animation_buttonHovered); */
  stroke: #aef;
}

.cesium-animation-rectButton:active .cesium-animation-buttonMain {
  fill: #abd6ff;
}

.cesium-animation-buttonDisabled {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cesium-animation-buttonDisabled .cesium-animation-buttonMain {
  /* Widget will add: fill: url(#animation_buttonDisabled); */
  stroke: #555;
}

.cesium-animation-buttonDisabled .cesium-animation-buttonPath {
  fill: #818181;
}

.cesium-animation-buttonDisabled .cesium-animation-buttonGlow {
  display: none;
}

.cesium-animation-buttonToggled .cesium-animation-buttonGlow {
  display: block;
  fill: #2e2;
}

.cesium-animation-buttonToggled .cesium-animation-buttonMain {
  stroke: #2e2;
}

.cesium-animation-buttonToggled:hover .cesium-animation-buttonGlow {
  fill: #fff;
}

.cesium-animation-buttonToggled:hover .cesium-animation-buttonMain {
  stroke: #2e2;
}

.cesium-animation-shuttleRingG {
  cursor: pointer;
}

/* Widget will add:
.cesium-animation-shuttleRingG .cesium-animation-shuttleRingSwoosh {
    fill: url(#animation_shuttleRingSwooshGradient);
}

.cesium-animation-shuttleRingG:hover .cesium-animation-shuttleRingSwoosh {
    fill: url(#animation_shuttleRingSwooshHovered);
}
*/

.cesium-animation-shuttleRingPointer {
  /* Widget will add: fill: url(#animation_shuttleRingPointerGradient); */
  cursor: pointer;
}

.cesium-animation-shuttleRingPausePointer {
  /* Widget will add: fill: url(#animation_shuttleRingPointerPaused); */
  cursor: pointer;
}

.cesium-animation-shuttleRingBack {
  fill: #181818;
  fill-opacity: 0.8;
  stroke: #333;
  stroke-width: 1.2;
}

.cesium-animation-shuttleRingSwoosh line {
  stroke: #8ac;
  stroke-width: 3;
  stroke-opacity: 0.2;
  stroke-linecap: round;
}

.cesium-animation-knobOuter {
  /* Widget will add: fill: url(#animation_knobOuter); */
  cursor: pointer;
  stroke: #444;
  stroke-width: 1.2;
}

.cesium-animation-knobInner {
  /* Widget will add: fill: url(#animation_knobInner); */
  cursor: pointer;
}

.cesium-baseLayerPicker-selected {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.cesium-baseLayerPicker-dropDown {
  display: block;
  position: absolute;
  box-sizing: content-box;
  top: auto;
  right: 0;
  width: 320px; /* Includes space needed for scrollbar */
  max-height: 500px;
  margin-top: 5px;
  background-color: rgba(38, 38, 38, 0.75);
  border: 1px solid #444;
  padding: 6px;
  overflow: auto;
  border-radius: 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: translate(0, -20%);
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.2s,
    opacity 0.2s ease-in,
    transform 0.2s ease-in;
}

.cesium-baseLayerPicker-dropDown-visible {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

.cesium-baseLayerPicker-sectionTitle {
  display: block;
  font-family: sans-serif;
  font-size: 16pt;
  text-align: left;
  color: #edffff;
  margin-bottom: 4px;
}

.cesium-baseLayerPicker-choices {
  margin-bottom: 5px;
}

.cesium-baseLayerPicker-categoryTitle {
  color: #edffff;
  font-size: 11pt;
}

.cesium-baseLayerPicker-choices {
  display: block;
  border: 1px solid #888;
  border-radius: 5px;
  padding: 5px 0;
}

.cesium-baseLayerPicker-item {
  display: inline-block;
  vertical-align: top;
  margin: 2px 5px;
  width: 64px;
  text-align: center;
  cursor: pointer;
}

.cesium-baseLayerPicker-itemLabel {
  display: block;
  font-family: sans-serif;
  font-size: 8pt;
  text-align: center;
  vertical-align: middle;
  color: #edffff;
  cursor: pointer;
  word-wrap: break-word;
}

.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemLabel,
.cesium-baseLayerPicker-item:focus .cesium-baseLayerPicker-itemLabel {
  text-decoration: underline;
}

.cesium-baseLayerPicker-itemIcon {
  display: inline-block;
  position: relative;
  width: inherit;
  height: auto;
  background-size: 100% 100%;
  border: solid 1px #444;
  border-radius: 9px;
  color: #edffff;
  margin: 0;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
}

.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemIcon {
  border-color: #fff;
  box-shadow:
    0 0 8px #fff,
    0 0 8px #fff;
}

.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemLabel {
  color: rgb(189, 236, 248);
}

.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemIcon {
  border: double 4px rgb(189, 236, 248);
}

.cesium-widget {
  font-family: sans-serif;
  font-size: 16px;
  overflow: hidden;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cesium-widget,
.cesium-widget canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.cesium-widget-credits {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-size: 10px;
  text-shadow: 0px 0px 2px #000000;
  padding-right: 5px;
}

.cesium-widget-errorPanel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
}

.cesium-widget-errorPanel:before {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: "";
}

.cesium-widget-errorPanel-content {
  width: 75%;
  max-width: 500px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  border: 1px solid #510c00;
  border-radius: 7px;
  background-color: #f0d9d5;
  font-size: 14px;
  color: #510c00;
}

.cesium-widget-errorPanel-content.expanded {
  max-width: 75%;
}

.cesium-widget-errorPanel-header {
  font-size: 18px;
  font-family: "Open Sans", Verdana, Geneva, sans-serif;
  background: #d69d93;
  border-bottom: 2px solid #510c00;
  padding-bottom: 10px;
  border-radius: 3px 3px 0 0;
  padding: 15px;
}

.cesium-widget-errorPanel-scroll {
  overflow: auto;
  font-family: "Open Sans", Verdana, Geneva, sans-serif;
  white-space: pre-wrap;
  padding: 0 15px;
  margin: 10px 0 20px 0;
}

.cesium-widget-errorPanel-buttonPanel {
  padding: 0 15px;
  margin: 10px 0 20px 0;
  text-align: right;
}

.cesium-widget-errorPanel-buttonPanel button {
  border-color: #510c00;
  background: #d69d93;
  color: #202020;
  margin: 0;
}
.cesium-widget-errorPanel-buttonPanel button:focus {
  border-color: #510c00;
  background: #f0d9d5;
  color: #510c00;
}
.cesium-widget-errorPanel-buttonPanel button:hover {
  border-color: #510c00;
  background: #f0d9d5;
  color: #510c00;
}
.cesium-widget-errorPanel-buttonPanel button:active {
  border-color: #510c00;
  background: #b17b72;
  color: #510c00;
}

.cesium-widget-errorPanel-more-details {
  text-decoration: underline;
  cursor: pointer;
}

.cesium-widget-errorPanel-more-details:hover {
  color: #2b0700;
}

.cesium-cesiumInspector {
  border-radius: 5px;
  transition: width ease-in-out 0.25s;
  background: rgba(48, 51, 54, 0.8);
  border: 1px solid #444;
  color: #edffff;
  display: inline-block;
  position: relative;
  padding: 4px 12px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
}

.cesium-cesiumInspector-button {
  text-align: center;
  font-size: 11pt;
}

.cesium-cesiumInspector-visible .cesium-cesiumInspector-button {
  border-bottom: 1px solid #aaa;
  padding-bottom: 3px;
}

.cesium-cesiumInspector input:enabled,
.cesium-cesiumInspector-button {
  cursor: pointer;
}

.cesium-cesiumInspector-visible {
  width: 185px;
  height: auto;
}

.cesium-cesiumInspector-hidden {
  width: 122px;
  height: 17px;
}

.cesium-cesiumInspector-sectionContent {
  max-height: 600px;
}

.cesium-cesiumInspector-section-collapsed
  .cesium-cesiumInspector-sectionContent {
  max-height: 0;
  padding: 0 !important;
  overflow: hidden;
}

.cesium-cesiumInspector-dropDown {
  margin: 5px 0;
  font-family: sans-serif;
  font-size: 10pt;
  width: 185px;
}

.cesium-cesiumInspector-frustumStatistics {
  padding-left: 10px;
  padding: 5px;
  background-color: rgba(80, 80, 80, 0.75);
}

.cesium-cesiumInspector-pickButton {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  color: #edffff;
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 auto;
}

.cesium-cesiumInspector-pickButton:focus {
  outline: none;
}

.cesium-cesiumInspector-pickButton:active,
.cesium-cesiumInspector-pickButtonHighlight {
  color: #000; /* For text buttons */
  background: #adf;
  border-color: #fff;
  box-shadow: 0 0 8px #fff;
}

.cesium-cesiumInspector-center {
  text-align: center;
}

.cesium-cesiumInspector-sectionHeader {
  font-weight: bold;
  font-size: 10pt;
  margin: 0;
  cursor: pointer;
}

.cesium-cesiumInspector-pickSection {
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 3px;
  margin-bottom: 5px;
}

.cesium-cesiumInspector-sectionContent {
  margin-bottom: 10px;
  transition: max-height 0.25s;
}

.cesium-cesiumInspector-tileText {
  padding-bottom: 10px;
  border-bottom: 1px solid #aaa;
}

.cesium-cesiumInspector-relativeText {
  padding-top: 10px;
}

.cesium-cesiumInspector-sectionHeader::before {
  margin-right: 5px;
  content: "-";
  width: 1ch;
  display: inline-block;
}

.cesium-cesiumInspector-section-collapsed
  .cesium-cesiumInspector-sectionHeader::before {
  content: "+";
}

ul.cesium-cesiumInspector-statistics {
  margin: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

ul.cesium-cesiumInspector-statistics + ul.cesium-cesiumInspector-statistics {
  border-top: 1px solid #aaa;
}

.cesium-cesiumInspector-slider {
  margin-top: 5px;
}

.cesium-cesiumInspector-slider input[type="number"] {
  text-align: left;
  background-color: #222;
  outline: none;
  border: 1px solid #444;
  color: #edffff;
  width: 100px;
  border-radius: 3px;
  padding: 1px;
  margin-left: 10px;
  cursor: auto;
}

.cesium-cesiumInspector-slider input[type="number"]::-webkit-outer-spin-button,
.cesium-cesiumInspector-slider input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cesium-cesiumInspector-slider input[type="range"] {
  margin-left: 5px;
  vertical-align: middle;
}

.cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor {
  display: none;
}

.cesium-cesiumInspector-styleEditor {
  padding: 10px;
  border-radius: 5px;
  background: rgba(48, 51, 54, 0.8);
  border: 1px solid #444;
}

.cesium-cesiumInspector-styleEditor textarea {
  width: 100%;
  height: 300px;
  background: transparent;
  color: #edffff;
  border: none;
  padding: 0;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.cesium-3DTilesInspector {
  width: 300px;
  pointer-events: all;
}

.cesium-3DTilesInspector-statistics {
  font-size: 11px;
}

.cesium-3DTilesInspector-disabledElementsInfo {
  margin: 5px 0 0 0;
  padding: 0 0 0 20px;
  color: #eed202;
}

.cesium-3DTilesInspector div,
.cesium-3DTilesInspector input[type="range"] {
  width: 100%;
  box-sizing: border-box;
}

.cesium-cesiumInspector-error {
  color: #ff9e9e;
  overflow: auto;
}

.cesium-3DTilesInspector .cesium-cesiumInspector-section {
  margin-top: 3px;
}

.cesium-3DTilesInspector
  .cesium-cesiumInspector-sectionHeader
  + .cesium-cesiumInspector-show {
  border-top: 1px solid white;
}

input.cesium-cesiumInspector-url {
  overflow: hidden;
  white-space: nowrap;
  overflow-x: scroll;
  background-color: transparent;
  color: white;
  outline: none;
  border: none;
  height: 1em;
  width: 100%;
}

.cesium-cesiumInspector .field-group {
  display: table;
}

.cesium-cesiumInspector .field-group > label {
  display: table-cell;
  font-weight: bold;
}

.cesium-cesiumInspector .field-group > .field {
  display: table-cell;
  width: 100%;
}

.cesium-VoxelInspector {
  width: 300px;
  pointer-events: all;
}

.cesium-VoxelInspector div,
.cesium-VoxelInspector input[type="range"] {
  width: 100%;
  box-sizing: border-box;
}

.cesium-VoxelInspector .cesium-cesiumInspector-section {
  margin-top: 3px;
}

.cesium-VoxelInspector
  .cesium-cesiumInspector-sectionHeader
  + .cesium-cesiumInspector-show {
  border-top: 1px solid white;
}

.cesium-button.cesium-fullscreenButton {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.cesium-button.cesium-vrButton {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.cesium-viewer-geocoderContainer .cesium-geocoder-input {
  border: solid 1px #444;
  background-color: rgba(40, 40, 40, 0.7);
  color: white;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 32px;
  margin: 0;
  padding: 0 32px 0 0;
  border-radius: 0;
  box-sizing: border-box;
  transition:
    width ease-in-out 0.25s,
    background-color 0.2s ease-in-out;
  -webkit-appearance: none;
}

.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input {
  border-color: #aef;
  box-shadow: 0 0 8px #fff;
}

.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
  border-color: #ea4;
  background-color: rgba(15, 15, 15, 0.9);
  box-shadow: none;
  outline: none;
}

.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input,
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus,
.cesium-viewer-geocoderContainer .cesium-geocoder-input-wide {
  padding-left: 4px;
  width: 250px;
}

.cesium-viewer-geocoderContainer .search-results {
  position: absolute;
  background-color: #000;
  color: #eee;
  overflow-y: auto;
  opacity: 0.8;
  width: 100%;
}

.cesium-viewer-geocoderContainer .search-results ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.cesium-viewer-geocoderContainer .search-results ul li {
  font-size: 14px;
  padding: 3px 10px;
}
.cesium-viewer-geocoderContainer .search-results ul li:hover {
  cursor: pointer;
}

.cesium-viewer-geocoderContainer .search-results ul li.active {
  background: #48b;
}

.cesium-geocoder-searchButton {
  background-color: #303336;
  display: inline-block;
  position: absolute;
  cursor: pointer;
  width: 32px;
  top: 1px;
  right: 1px;
  height: 30px;
  vertical-align: middle;
  fill: #edffff;
}

.cesium-geocoder-searchButton:hover {
  background-color: #48b;
}

.cesium-infoBox {
  display: block;
  position: absolute;
  top: 50px;
  right: 0;
  width: 40%;
  max-width: 480px;
  background: rgba(38, 38, 38, 0.95);
  color: #edffff;
  border: 1px solid #444;
  border-right: none;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  box-shadow: 0 0 10px 1px #000;
  transform: translate(100%, 0);
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.2s,
    opacity 0.2s ease-in,
    transform 0.2s ease-in;
}

.cesium-infoBox-visible {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

.cesium-infoBox-title {
  display: block;
  height: 20px;
  padding: 5px 30px 5px 25px;
  background: rgba(84, 84, 84, 1);
  border-top-left-radius: 7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: content-box;
}

.cesium-infoBox-bodyless .cesium-infoBox-title {
  border-bottom-left-radius: 7px;
}

button.cesium-infoBox-camera {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: transparent;
  border-color: transparent;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0;
}

button.cesium-infoBox-close {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 2px;
  font-weight: bold;
  font-size: 16px;
  padding: 0 5px;
  margin: 0;
  color: #edffff;
}

button.cesium-infoBox-close:focus {
  background: rgba(238, 136, 0, 0.44);
  outline: none;
}

button.cesium-infoBox-close:hover {
  background: #888;
  color: #000;
}

button.cesium-infoBox-close:active {
  background: #a00;
  color: #000;
}

.cesium-infoBox-bodyless .cesium-infoBox-iframe {
  display: none;
}

.cesium-infoBox-iframe {
  border: none;
  width: 100%; /* Fallback */
  width: calc(100% - 2px);
}

span.cesium-sceneModePicker-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 3px;
}

.cesium-sceneModePicker-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s linear;
}

.cesium-sceneModePicker-hidden {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.25s,
    opacity 0.25s linear;
}

.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-none {
  display: none;
}

.cesium-sceneModePicker-slide-svg {
  transition: left 2s;
  top: 0;
  left: 0;
}

.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
  box-sizing: border-box;
  padding: 0;
  margin: 3px 0;
}

.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D,
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView,
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D {
  margin: 0 0 3px 0;
}

.cesium-sceneModePicker-wrapper
  .cesium-sceneModePicker-button3D
  .cesium-sceneModePicker-icon2D {
  left: 100%;
}

.cesium-sceneModePicker-wrapper
  .cesium-sceneModePicker-button3D
  .cesium-sceneModePicker-iconColumbusView {
  left: 200%;
}

.cesium-sceneModePicker-wrapper
  .cesium-sceneModePicker-buttonColumbusView
  .cesium-sceneModePicker-icon3D {
  left: -200%;
}

.cesium-sceneModePicker-wrapper
  .cesium-sceneModePicker-buttonColumbusView
  .cesium-sceneModePicker-icon2D {
  left: -100%;
}

.cesium-sceneModePicker-wrapper
  .cesium-sceneModePicker-button2D
  .cesium-sceneModePicker-icon3D {
  left: -100%;
}

.cesium-sceneModePicker-wrapper
  .cesium-sceneModePicker-button2D
  .cesium-sceneModePicker-iconColumbusView {
  left: 100%;
}

.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-selected {
  border-color: #2e2;
  box-shadow:
    0 0 8px #fff,
    0 0 8px #fff;
}

span.cesium-projectionPicker-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 3px;
}

.cesium-projectionPicker-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s linear;
}

.cesium-projectionPicker-hidden {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.25s,
    opacity 0.25s linear;
}

.cesium-projectionPicker-wrapper .cesium-projectionPicker-none {
  display: none;
}

.cesium-projectionPicker-wrapper .cesium-projectionPicker-dropDown-icon {
  box-sizing: border-box;
  padding: 0;
  margin: 3px 0;
}

.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective,
.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic {
  margin: 0 0 3px 0;
}

.cesium-projectionPicker-wrapper
  .cesium-projectionPicker-buttonPerspective
  .cesium-projectionPicker-iconOrthographic {
  left: 100%;
}

.cesium-projectionPicker-wrapper
  .cesium-projectionPicker-buttonOrthographic
  .cesium-projectionPicker-iconPerspective {
  left: -100%;
}

.cesium-projectionPicker-wrapper .cesium-projectionPicker-selected {
  border-color: #2e2;
  box-shadow:
    0 0 8px #fff,
    0 0 8px #fff;
}

.cesium-performance-watchdog-message-area {
  position: relative;
  background-color: yellow;
  color: black;
  padding: 10px;
}

.cesium-performance-watchdog-message {
  margin-right: 30px;
}

.cesium-performance-watchdog-message-dismiss {
  position: absolute;
  right: 0;
  margin: 0 10px 0 0;
}

.cesium-navigationHelpButton-wrapper {
  position: relative;
  display: inline-block;
}

.cesium-navigation-help {
  visibility: hidden;
  position: absolute;
  top: 38px;
  right: 2px;
  width: 250px;
  border-radius: 10px;
  transform: scale(0.01);
  transform-origin: 234px -10px;
  transition:
    visibility 0s 0.25s,
    transform 0.25s ease-in;
}

.cesium-navigation-help-visible {
  visibility: visible;
  transform: scale(1);
  transition: transform 0.25s ease-out;
}

.cesium-navigation-help-instructions {
  border: 1px solid #444;
  background-color: rgba(38, 38, 38, 0.75);
  padding-bottom: 5px;
  border-radius: 0 0 10px 10px;
}

.cesium-click-navigation-help {
  display: none;
}

.cesium-touch-navigation-help {
  display: none;
  padding-top: 5px;
}

.cesium-click-navigation-help-visible {
  display: block;
}

.cesium-touch-navigation-help-visible {
  display: block;
}

.cesium-navigation-help-pan {
  color: #66ccff;
  font-weight: bold;
}

.cesium-navigation-help-zoom {
  color: #65fd00;
  font-weight: bold;
}

.cesium-navigation-help-rotate {
  color: #ffd800;
  font-weight: bold;
}

.cesium-navigation-help-tilt {
  color: #d800d8;
  font-weight: bold;
}

.cesium-navigation-help-details {
  color: #ffffff;
}

.cesium-navigation-button {
  color: #fff;
  background-color: transparent;
  border-bottom: none;
  border-top: 1px solid #444;
  border-right: 1px solid #444;
  margin: 0;
  width: 50%;
  cursor: pointer;
}

.cesium-navigation-button-icon {
  vertical-align: middle;
  padding: 5px 1px;
}

.cesium-navigation-button:focus {
  outline: none;
}

.cesium-navigation-button-left {
  border-radius: 10px 0 0 0;
  border-left: 1px solid #444;
}

.cesium-navigation-button-right {
  border-radius: 0 10px 0 0;
  border-left: none;
}

.cesium-navigation-button-selected {
  background-color: rgba(38, 38, 38, 0.75);
}

.cesium-navigation-button-unselected {
  background-color: rgba(0, 0, 0, 0.75);
}

.cesium-navigation-button-unselected:hover {
  background-color: rgba(76, 76, 76, 0.75);
}

.cesium-selection-wrapper {
  position: absolute;
  width: 160px;
  height: 160px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.2s,
    opacity 0.2s ease-in;
}

.cesium-selection-wrapper-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

.cesium-selection-wrapper svg {
  fill: #2e2;
  stroke: #000;
  stroke-width: 1.1px;
}

.cesium-timeline-main {
  position: relative;
  left: 0;
  bottom: 0;
  overflow: hidden;
  border: solid 1px #888;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cesium-timeline-trackContainer {
  width: 100%;
  overflow: auto;
  border-top: solid 1px #888;
  position: relative;
  top: 0;
  left: 0;
}

.cesium-timeline-tracks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.cesium-timeline-needle {
  position: absolute;
  left: 0;
  top: 1.7em;
  bottom: 0;
  width: 1px;
  background: #f00;
}

.cesium-timeline-bar {
  position: relative;
  left: 0;
  top: 0;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  height: 1.7em;
  background: linear-gradient(
    to bottom,
    rgba(116, 117, 119, 0.8) 0%,
    rgba(58, 68, 82, 0.8) 11%,
    rgba(46, 50, 56, 0.8) 46%,
    rgba(53, 53, 53, 0.8) 81%,
    rgba(53, 53, 53, 0.8) 100%
  );
}

.cesium-timeline-ruler {
  /* NOTE: The label and the ruler must use the same font/size */
  visibility: hidden;
  white-space: nowrap;
  font-size: 80%;
  z-index: -200;
}

.cesium-timeline-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #08f;
}

.cesium-timeline-ticLabel {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-size: 80%;
  color: #eee;
}

.cesium-timeline-ticMain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 50%;
  background: #eee;
}

.cesium-timeline-ticSub {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 33%;
  background: #aaa;
}

.cesium-timeline-ticTiny {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 25%;
  background: #888;
}

.cesium-timeline-icon16 {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url(/2a0c2998445d1ea07470.png);
  background-repeat: no-repeat;
}

.cesium-viewer {
  font-family: sans-serif;
  font-size: 16px;
  overflow: hidden;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cesium-viewer-cesiumWidgetContainer {
  width: 100%;
  height: 100%;
}

.cesium-viewer-bottom {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-right: 5px;
}

.cesium-viewer .cesium-widget-credits {
  display: inline;
  position: static;
  bottom: auto;
  left: auto;
  padding-right: 0;
  color: #ffffff;
  font-size: 10px;
  text-shadow: 0 0 2px #000000;
}

.cesium-viewer-timelineContainer {
  position: absolute;
  bottom: 0;
  left: 169px;
  right: 29px;
  height: 27px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
}

.cesium-viewer-animationContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  width: 169px;
  height: 112px;
}

.cesium-viewer-fullscreenContainer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0;
  width: 29px;
  height: 29px;
  overflow: hidden;
}

.cesium-viewer-vrContainer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0;
  width: 29px;
  height: 29px;
  overflow: hidden;
}

.cesium-viewer-toolbar {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
}

.cesium-viewer-cesiumInspectorContainer {
  display: block;
  position: absolute;
  top: 50px;
  right: 10px;
}

.cesium-viewer-geocoderContainer {
  position: relative;
  display: inline-block;
  margin: 0 3px;
}

.cesium-viewer-cesium3DTilesInspectorContainer {
  display: block;
  position: absolute;
  top: 50px;
  right: 10px;
  max-height: calc(100% - 120px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.cesium-viewer-voxelInspectorContainer {
  display: block;
  position: absolute;
  top: 50px;
  right: 10px;
  max-height: calc(100% - 120px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.cesium-viewer-i3s-explorer ul {
  list-style-type: none;
}

.cesium-viewer-i3s-explorer .layersList {
  padding: 0;
}

.cesium-viewer-i3s-explorer input {
  margin: 0 3px 0 0;
}
.cesium-viewer-i3s-explorer .expandItem {
  cursor: pointer;
  user-select: none;
  width: 20px;
}

.cesium-viewer-i3s-explorer .nested,
.cesium-viewer-i3s-explorer #bsl-wrapper {
  display: none;
}

.cesium-viewer-i3s-explorer .active {
  display: block;
}

.cesium-viewer-i3s-explorer .li-wrapper {
  display: flex;
  flex-direction: row;
  align-content: center;
}