.range-color-danger h3{text-align: center; text-transform: uppercase; color: #575757; font-size: 1.2em; margin-top: 10px;}
        .range-color-danger{margin: 0;}

        .slider {
          --value: 0; /* add a default value for --value */
          position: relative; /* make the pseudo-element relative to the slider */
          -webkit-appearance: none;
          appearance: none;
          width: 100%;
          height: 5px!important;
          background: #c8c8c8;
          outline: none;
          opacity: 0.7;
          -webkit-transition: .2s;
          transition: opacity .2s;
        }

        /* add this pseudo-element to fill the slider */
        .slider::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: calc((100% - 15px) * (var(--value) / 100)); /* calculate the width based on the slider value */
          height: 100%;
          background-color: #cecece; /* set the fill color */
          z-index: 1; /* position the pseudo-element above the slider thumb */
        }

        .slider:hover {
          opacity: 1;
        }

        .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 18px;
          height: 18px;
          background: #fff;
          border: none;
          cursor: pointer;
          box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.6);
          border-radius: 50%;
          cursor: ew-resize;
          position: relative; /* make the thumb relative to the slider */
          z-index: 2; /* position the thumb above the pseudo-element */
        }

        .slider::-moz-range-thumb {
          width: 18px;
          height: 18px;
          background: #fff;
          border: none;
          cursor: pointer;
          box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.6);
          border-radius: 50%;
          cursor: ew-resize;
          position: relative; /* make the thumb relative to the slider */
          z-index: 2; /* position the thumb above the pseudo-element */
        }
		/* temp CSS for iframe holding Verge3D app - to be refined & integrated into plugins.css or other appropriate file */
		/*body {
			height: 100vh;
		}	*/	
		.app_container {
		    height: 90vh;
			display: flex;
			flex-direction: column;
		}
		#app_iframe {
			width: 100%;
			flex-grow: 1;
		}
  .app_container iframe { pointer-events: none; }

  #overlay-box {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

#overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    text-align: center;
}

#close-button {
    margin-top: 10px;
}