/* gui.css - Custom styles for dat.GUI */

.dg.ac {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

.dg {
    /* Base background - faded dark */
    background-color: rgba(255, 255, 255, 0.25) !important;
    font-family: findreplace, sans-serif !important;
    font-style: normal;
    font-weight: 300;
    font-size: 15px;
    color: #ffffff !important;
}

.dg * {
    font-family: findreplace, sans-serif !important;
    font-size: 15px !important;
}
    
    /* Test pattern background using gradients */
  
  .dg .title {
    color: #ffffff !important;
    background-color: transparent !important; /* Semi-transparent title bar */
    font-size: 15px !important;
  }
  
  .dg .cr {
    background-color: transparent !important;
    font-size: 15px !important;
    min-height: 40px !important;
  }
  
  /* Make the property name container transparent */
  .dg .property-name {
    background-color: transparent !important;
    font-size: 15px !important;
  }

  .dg .close-button {
    background-color: transparent !important;
  }
  
  .dg .close-top {
    background-color: transparent !important;
  }
  
  .dg .close-bottom {
    background-color: transparent !important;
  }
  
  /* Make slider track background transparent or very subtle */
  .dg .slider {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  
  .dg .slider-fg {
    background-color: #86868673 !important;
    height: 100% !important;
  }
  
  /* Slider container */
  .dg .c.slider {
    height: 30px !important;
    min-height: 30px !important;
  }
  
  /* Remove blue from close button */
  .dg .close-button:hover,
  .dg .close-top:hover,
  .dg .close-bottom:hover {
    background-color: transparent !important;
    color: #ffffff !important;
  }
  
  /* Remove blue from input focus */
  .dg .c input[type=text]:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #ffffff !important;
    outline: none !important;
  }
  
  /* Remove blue from any buttons */
  .dg button {
    background-color: transparent !important;
    color: #ffffff !important;
  }
  
  .dg button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Remove blue from links and other elements */
  .dg a,
  .dg a:visited,
  .dg a:hover,
  .dg a:active {
    color: #ffffff !important;
    background-color: transparent !important;
  }
  
  /* Remove any blue borders or outlines */
  .dg * {
    border-color: transparent !important;
  }
  
  .dg *:focus {
    outline: none !important;
    border-color: transparent !important;
  }

  .dg .dg {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .dg .c input[type=text] {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.25) !important; /* Match GUI background */
    font-family: findreplace, sans-serif !important;
    font-style: normal;
    font-size: 15px;
    border-color: transparent !important;
  }

  .dg select,
  .dg option {
    font-family: findreplace, sans-serif !important;
    background-color: rgba(255, 255, 255, 0.25) !important; /* Match GUI background */
    color: #ffffff !important;
    font-size: 12px !important; /* 3px smaller than slider title (15px) */
  }
  
  /* Dropdown select styling */
  .dg select {
    border: none !important;
    padding: 4px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  
  .dg li {
    font-size: 15px !important;
  }

@media (max-width: 767px) {
  .dg.ac {
    top: 10px !important;
    right: auto !important;
    left: 10px !important;
    width: calc(100% - 20px) !important;
    margin: 0 auto;
  }

  .dg, .dg * {
    font-size: calc(15px - 5px) !important; /* Reduce by 5px */
  }
  
  /* Divide slider heights by 2 in mobile */
  .dg .cr {
    min-height: 20px !important; /* 40px / 2 */
  }
  
  .dg .slider {
    height: 15px !important; /* 30px / 2 */
    min-height: 15px !important;
  }
  
  .dg .c.slider {
    height: 15px !important; /* 30px / 2 */
    min-height: 15px !important;
  }
  
  /* Divide select height by 2 in mobile */
  .dg select {
    height: 15px !important; /* 30px / 2 */
    min-height: 15px !important;
    padding: 2px !important; /* Reduce padding too */
    font-size: 7px !important; /* 3px smaller than slider title (10px) */
  }
  }