/* DELAY Module styling */
.delay-module {
    border: 1px solid #35100B;
    background-color: #f2eed3;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-width: 260px;
    max-width: 260px;
    align-items: center;
    padding-top: 15px;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* Module title */
  .module-title.delay {
    color: #f2eed3;
    text-align: center;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    margin-bottom: 0px;
    background-color: #CF814D; /* Blue title for DELAY */
    padding: 5px 0;
    border: 0px solid #35100B;
    width: 100%;
    margin-top: -15px;
  }
  
  /* Section container */
  .delay-sections {
    display: flex;
    width: 100%;
    height: 433px;
  }
  
  /* Individual sections with color coding */
  .delay-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;
  }
  
  .red-section {
    background-color: #E5AB5F;
    width: 25%;
  }
  
  .orange-section {
    background-color: #CF814D;
    width: 25%;
  }
  
  .yellow-section {
    background-color: #BA5446;
    width: 25%;
  }
  
  .green-section {
    background-color: #6B8F53;
    width: 25%;
  }
  
  /* Slider container */
  .delay-slider-container {
    height: 319px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
    margin-top: 15px;
    width: 25%;
  }
  
  /* Slider track */
  .delay-slider-track {
    position: absolute;
    top: 0;
    height: 297px;
    width: 5px;
    background-color: #35100B;
    border-radius: 2.5px;
  }
  
  /* Vertical slider */
  .delay-slider {
    -webkit-appearance: none;
    width: 33px;
    height: 297px;
    margin-top: 0px;
    background: transparent;
    transform-origin: center;
    writing-mode: vertical-lr; /* Modern vertical orientation */
    direction: rtl; /* Bottom to top orientation */
    z-index: 1;
  }
  
  /* Slider thumb */
  .delay-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #35100B;
    width: 26px;
    height: 18px;
    cursor: pointer;
    margin-left: 0.6px;
    border-radius: 5px;
    background-image: linear-gradient(to right, #f2eed3 35%, transparent 35%, transparent 65%, #f2eed3 65%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  /* Firefox slider styling */
  .delay-slider::-moz-range-track {
    width: 100%;
    height: 5px;
    background: transparent;
  }
  
  .delay-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: #f2eed3;
    border: 1.5px solid #35100B;
    border-radius: 50%;
    cursor: pointer;
  }
  
  /* Slider labels */
  .delay-slider-label {
    position: relative;
    bottom: 2px;
    font-family: "Nunito", sans-serif;
    font-size: 10px;
    font-variant-caps: all-small-caps;
    font-weight: 750;
    color: #35100B;
    text-align: center;
  }
  
  /* Switches container in red section */
  .delay-switches {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
  }
  
  /* Side label for switches */
  .side-label {
    position: absolute;
    right: -45px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }
  
  /* Knob positioning */
  .delay-section .knob-container {
    margin-top: 0px;
  }
  /* Switches container in red section */
  .delay-switches {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 0px;
    align-items: center;
  }
  
  /* Switch container with label */
  .delay-switch-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  
  /* Horizontal switch styling */
  .horizontal-switch {
    width: 35px;
    height: 18px;
    background-color: #35100B;
    border-radius: 5px;
    border: 2px solid #35100B;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  /* Switch handle */
  .horizontal-switch::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0.5px;
    width: 17px;
    height: 18px;
    border-radius: 3px;
    background-color: #E5AB5F;
    transition: transform 0.2s;
    background-image: url("../control icons/on.svg");
    background-position: center;
      background-repeat: no-repeat;
      background-size: 12px 12px;
  }
  
  /* Active state moves handle to right */
  .horizontal-switch.active::after {
    transform: translateX(17px);
  }
  
  /* Switch label */
  .delay-switch-label {
    font-family: "Nunito", sans-serif;
    font-size: 10px;
    font-variant-caps: all-small-caps;
    font-weight: 750;
    color: #35100B;
    text-align: center;
  }
  /* Updated DELAY Module title styling with four colored rectangles */
  .module-title.delay {
    color: #f2eed3;
    text-align: center;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 16px;
    margin-bottom: 0px;
    background-color: transparent; /* Remove the solid background */
    padding: 5px 0;
    border: 0px solid #35100B;
    width: 100%;
    margin-top: -15px;
    position: relative;
    overflow: hidden;
    display: flex;
  }
  
  /* Individual colored sections of the title */
  .delay-title-section {
    height: 100%;
    width: 25%;
    position: absolute;
    top: 0;
  }
  
  /* Position each section */
  .red-title {
    background-color: #E5AB5F;
    left: 0;
  }
  
  .orange-title {
    background-color: #CF814D;
    left: 25%;
  }
  
  .yellow-title {
    background-color: #BA5446;
    left: 50%;
  }
  
  .green-title {
    background-color: #6B8F53;
    left: 75%;
  }
  
  /* Text positioning on top of the colored sections */
  .delay-title-text {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    display: block;
    left: 2.5px;
  }