body {
      background-color: #1e1e1e; /* Dark theme background */
      color: #d5a865;
      font-family: Arial, sans-serif;
      padding: 10px;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      overflow-y: hidden;
  }

  hr
  {
    border: 1px solid #d5a865;
  }

  .hr-menu
  {
    border: 1px solid #634e2e;
  }

  label
  {
    color: #d5a865;
    display: block;
  }
  
 
  #GridMelodyHolder {
    text-align: left;
    /*max-width: 800px;*/
    margin: auto;
  }


  #setting_window
  {
    z-index: 100;
    left: 50%;
    position: absolute;
    width: 300px;
    height: 300px;
    display: none;

    /*background-color: #E0E5EC;*/
    background: #242424; /* Neutral background for the button */
    border-radius: 15px;
    /*
    box-shadow: 
        9px 9px 16px rgb(163,177,198,0.6), 
        -9px -9px 16px rgba(255,255,255, 0.5);
        */
        box-shadow: 
        9px 9px 16px rgba(0, 0, 0, 0.7), 
        -9px -9px 16px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
  
        
    padding: 15px;

  }

  .close_button
  {
    text-align:center;
    width:24px;
    height:24px;
    cursor: pointer;

    font-family: 'FontAwesome';
    font-size:14px;
    padding-top: 2px;
    /*
    box-shadow: 
      5px 5px 8px rgb(163,177,198,0.6), 
      -5px -5px 8px rgba(255,255,255, 0.5);
    */
      box-shadow: 
      5px 5px 8px rgba(0, 0, 0, 0.7), 
      -5px -5px 8px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

     border-radius: 50%;
  }
  .close_button::after
  {
    content: "\f00d";
  }

  .close_button:hover
  {
    box-shadow: 
    5px 5px 10px #866a3f, 
    -5px -5px 10px #433521;
  }

  .rowheader
  {
    width: 200;
  }

  .cell {
    width: 40px;
    height: 40px;
    background-color: #444;
    border-radius: 5px;
    cursor: pointer;
    /*transition: background 0.2s;*/
  }


  .note_name
  {
    font-size: 10px;
    text-align: center;
  }
  

  #RowPropModal
  {
    z-index: 100;
    display: none;
    position: absolute;

    /*
    background-color: #E0E5EC;
    border-radius: 15px;

    box-shadow: 
        9px 9px 16px rgb(163,177,198,0.6), 
        -9px -9px 16px rgba(255,255,255, 0.5);
*/

    /*background-color: #E0E5EC;*/
    background: #242424; /* Neutral background for the button */
    border-radius: 15px;
    /*
    box-shadow: 
        9px 9px 16px rgb(163,177,198,0.6), 
        -9px -9px 16px rgba(255,255,255, 0.5);
        */
        box-shadow: 
        9px 9px 16px rgba(0, 0, 0, 0.7), 
        -9px -9px 16px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

    padding: 15px;

  }

  
  /*
  .rowheader_cell {
    text-align: left;
    width: 150px;
    height: 40px;
    background-color: #393939;
    border-radius: 5px;
    color:#fff;
    font-size:8pt;
    cursor: pointer;
    transition: background 0.2s;
  }
*/
  /*
  .cell_note_select {
    width: 40px;
    height: 40px;
    background-color: #323232;
    border-radius: 5px;
    color:#fff;
    font-size:8pt;
    cursor: pointer;
    transition: background 0.2s;
  }
    */

  #DrumPatternNameHolder
  {
    margin-bottom: 10px;
  }
  #DrumPatternStyleHolder
  {
    /*margin-bottom: 10px;*/

  }

  .toolbarholder
  {
    border-top:1px solid #d5a865;
    padding-top: 3px;
  }
  
  .patrow
  {
    border-top:1px solid #d5a865;
    padding-top: 10px;
  }

  


  .gtoolbar
  {
    /*
    padding-bottom: 10px ;
    padding-top: 5px ;
    */
    /*border-bottom:1px solid #d5a865;*/
  }
  
  
  /*
  .gtoolbar td
  {
    padding-right: 10px;
  }

  .controls, .upload, .save-load {
    margin: 20px 0;
    text-align: center;
  }
  
  .controls input[type="range"] {
    width: 50%;
    margin: 0 10px;
  }
  */
  
  
  
  /*################################################################################*/


table {
    border-collapse: separate;
    /*border-spacing: 20px;*/
    /*background-color: #e0e5ec;*/
}

#PatternLabel
{
  font-size: 10px;
  text-align: center;
  padding-right: 30px ;
  color:rgb(168, 93, 199);
}
/**********************************************************************************************/

.automationbtn
{
  width: 58px;
  height: 30px;
  text-align: center;
  border-radius: 8px;
  background-color: #673e00 !important;
}

.automationbtn-small
{
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 8px;
  background-color: #673e00 !important;
}

.normbtn
{
  width: 50px;height: 50px;
  text-align: center;
  border-radius: 15px;
}


.cellbtn
{
  width: 50px;height: 50px;
  text-align: center;
  border-radius: 15px;
}

.audition-btn
{
  width: 50px;height: 50px;
  text-align: center;
  border-radius: 15px;
}

.audition-btn-small
{
  width: 45px;height: 50px;
  text-align: center;
  border-radius: 10px;
  width:45px !important;
}

.big-cell-btn
{
  width: 54px;
  height: 50px;
  text-align: center;
  border-radius: 15px;
}

.small-cell-btn
{
  width: 30px;
  height: 30px;
  border-radius: 15px;
  text-align: center;
}

#ABCWizardText
{
  width: 400px;
  height: 200px;
  background: #242424; /* Neutral background for the button */
  color: #d5a865;
}


#DrumWizardText
{
  width: 400px;
  height: 200px;
  background: #242424; /* Neutral background for the button */
  color: #d5a865;
}

#GNotesWizardText
{
  width: 400px;
  height: 200px;
  background: #242424; /* Neutral background for the button */
  color: #d5a865;
}



.autolabelgap
{
  height: 20px;
}

.autolabel
{
  font-size: 12px;
  padding-bottom: 5px;
}

#AutoMapper
{
  min-width:200px;
}

#AutoProps
{
  min-width:200px;
}

#LiveCellProps
{
  min-width:200px;
}


.neumorphic-button:focus
{
  outline: none;
  border-color: 1px solid #d5a865;
}

.neumorphic-button {
  border: none;
  
  
  background: #242424; /* Neutral background for the button */
  box-shadow: 
      10px 10px 20px rgba(0, 0, 0, 0.7), 
      -10px -10px 20px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
  
  margin-right: 12px;
  margin-bottom: 8px;
  position: relative;
  color: #d5a865;
  
  text-align: center;
}

/* This has to come in the last since it has highest priority*/
.neumorphic-button:hover {
  box-shadow: 
  5px 5px 10px #5b482b, 
  -5px -5px 10px #433521;
}

/*
.neumorphic-button.active {
background: #ff5722; 
box-shadow: 
    0 0 20px rgba(255, 87, 34, 0.8),
    0 0 40px rgba(255, 87, 34, 0.5), 
    10px 10px 20px rgba(0, 0, 0, 0.7), 
    -10px -10px 20px rgba(255, 255, 255, 0.1);
}

.neumorphic-button.active {
background-color: #d5a865;
box-shadow: inset 0 8px 14px 1px #d5a865, inset 0 -1px 12px -2px #000;
}
*/

.neumorphic-button.notehit {
  background-color: #d5a865;
  box-shadow: inset 0 8px 14px 1px #d5a865, inset 0 -1px 12px -2px #000;
  color:#666;
  }
  
.neumorphic-button.notedown {
  background-color: #d18c26;
  box-shadow: inset 0 8px 14px 1px #d18c26, inset 0 -1px 12px -2px #000;
  color:#666;
}

.neumorphic-button.noteup {

  background-color: #d5a865;
  box-shadow: inset 0 8px 14px 1px #d5a865, inset 0 -1px 12px -2px #000;
  color:#666;
  
  }

.neumorphic-button.notehold {
    background-color: #dec5a1;
    box-shadow: inset 0 8px 14px 1px #dec5a1, inset 0 -1px 12px -2px #000;
    color:#666;
    }


/**********************************************************************************************/

.neumorphic-button-small {
  border: none;
  background: #242424; /* Neutral background for the button */
  box-shadow: 
      10px 10px 20px rgba(0, 0, 0, 0.7), 
      -10px -10px 20px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
  /*margin: 20px auto;*/
  /*transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;*/
  position: relative;
  color: #d5a865;
  text-align: center;
}


/* This has to come in the last since it has highest priority*/
.neumorphic-button-small:hover {
  box-shadow: 
  5px 5px 10px #5b482b, 
  -5px -5px 10px #433521;
}

/*
.neumorphic-button-small.active {
background: #ff5722; 
box-shadow: 
    0 0 20px rgba(255, 87, 34, 0.8),
    0 0 40px rgba(255, 87, 34, 0.5), 
    10px 10px 20px rgba(0, 0, 0, 0.7), 
    -10px -10px 20px rgba(255, 255, 255, 0.1);
}
*/

.neumorphic-button-small.notehit {
  background-color: #d5a865;
  box-shadow: inset 0 8px 14px 1px #d5a865, inset 0 -1px 12px -2px #000;
  color:#666;
  }
  
.neumorphic-button-small.notedown {
  background-color: #d18c26;
  box-shadow: inset 0 8px 14px 1px #d18c26, inset 0 -1px 12px -2px #000;
  color:#666;
}

.neumorphic-button-small.noteup {

  background-color: #d5a865;
  box-shadow: inset 0 8px 14px 1px #d5a865, inset 0 -1px 12px -2px #000;
  color:#666;
  
  }

.neumorphic-button-small.notehold {
    background-color: #dec5a1;
    box-shadow: inset 0 8px 14px 1px #dec5a1, inset 0 -1px 12px -2px #000;
    color:#666;
    }
    
/**********************************************************************************************/
#beatgrid
{
  user-select:none;
}

.scroll-button
{
  color: #d5a865;
}



.scrollfitbutton
{
  margin-left: 10px;
}


.isplaying
{
  color: #00ffff ;
}
/* 
.isplayingFullPattern
{
  color: #ff0000cf ;
}
*/
.isbusy
{
  color: #ff0000cf !important;
}

.isplayerLoading
{
  /*background-color: rgba(128, 0, 255, 1) ;*/
  
  background-color: rgb(247, 78, 78) ;
  color: #333 ;
}
  
.beatmarker
{
  background-color: #383838;
}

.mainbeatmarker
{
  background-color: #535353;
}

  
.actionbarbtn
{
  /*margin-right: 0;
  margin-right: 20px;*/
  margin-top: 0px ;
  width: 58px;
  height: 36px;
  text-align: center;
  border-radius: 10px;
}



.toptoolbarbtn
{
  /*margin-top: 10px ;
  margin-bottom: 10px ;
  */
  margin-right: 10px;
  width: 50px;
  height: 36px;
  text-align: center;
  border-radius: 10px;
}

.headercols_td
{
  padding-right: 10px;
  text-align: center;
}

.patholder
{
  padding-bottom: 10px;
  padding-left: 10px;
  text-align: left;
}

#patternmode
{
  margin-left: 20px;
}


button:disabled,
button[disabled]{
  color: #333;
  box-shadow: 
  0 0 0px #000,
  inset 0 0 0px #000;
}

.buttonpressed
{
  box-shadow: 
  0 0 20px #dbba89,
  inset 0 0 0px #000 !important;
}

.pgbtn
{
  /*width: 58px;*/
  width: 44px;
  height: 30px;
  text-align: center;
  border-radius: 8px;
}

.patselbtn
{
  font-size: 10px;
  width: 44px;
  height: 20px;
  text-align: center;
  border-radius: 8px;
}

.modebtn
{
  width:60px;

  /*margin-top: 20px;*/
    /*margin-left: 20px;
  margin-right: 10px;
  */
  /*height: 30px;*/

  /* Match Play Button*/
  margin-top: 14px;
  height: 36px;

  text-align: center;
  border-radius: 8px;

}

.modebtn-toptoolbar
{
  width: 60px !important;;
}

.group_row
{
  margin-top: 10px;
}

#groupmode
{
  margin-left: 20px;
}

.grpholder
{
  padding-top: 14px;
  padding-bottom: 10px;
  padding-left: 10px;
  text-align: left;
}

.bottomscroll
{
  padding-top: 20px;
}


.leftscroll
{
  
  padding-right: 10px;
  padding-left: 10px;
  
}

.header-button-groups
{
  background-color: #d4abfc50 !important;
  color:#d5a865;
}

.header-button-pattern
{
  /*background-color: #71512e !important;*/
  color:#d5a865;
  border-top: 2px solid d5a865;
}

.header-button-drums
{
  /*background-color: #ffd08450 !important;*/
  border-bottom: 1px solid #463823;
  border-right: 1px solid #463823;
}


.header-button-keys
{
  background-color: #3c2951b3 !important;
}

.header-button-root-key
{
  background-color: #8865b2b1 !important;
}

/*
.mode-focussed
{
  background-color: #a55208;
    box-shadow: inset 0 8px 14px 1px #e27411, inset 0 -1px 12px -2px #000;
    color:#fff;
}
*/
.mode-focussed {
  background: rgba(204, 129, 38, 0.772);
  box-shadow: 
    0 0 30px rgba(255, 140, 0, 0.8),
    inset 0 0 20px rgba(255, 140, 0, 0.8);
  color: #000 !important;
}

.pattern-focussed
{
  box-shadow: 
  0 0 30px rgba(128, 0, 255, 1),
  inset 0 0 20px rgba(128, 0, 255, 1);
  background: rgba(128, 0, 255, 0.7);
}

.sample-focussed
{
  background: rgba(0, 255, 0, 0.5);

  box-shadow: 
  0 0 30px rgba(0, 255, 0, 0.8),
  inset 0 0 20px rgba(0, 255, 0, 0.8);
  color:black !important
}

.sample-focussed-current
{
  background: rgba(0, 255, 0, 0.5);

  box-shadow: 
  0 0 30px rgba(0, 255, 0, 0.8),
  inset 0 0 20px rgba(0, 255, 0, 0.8);
  color:black !important;

  border: 2px solid red;
  
}

.sample-current
{
  border: 2px solid red;
}

.sample-focussed-empty
{
  background: rgba(150, 150, 150, 0.5);

  box-shadow: 
  0 0 30px rgba(150, 150, 150, 0.8),
  inset 0 0 20px rgba(150, 150, 150, 0.8);
  color:#fff
}

.slot-is-empty
{
  color: rgba(150, 150, 150, 0.5);
}
.slot-has-sample
{
  color: rgba(0, 255, 0, 0.9);;
}

.pattern-play-selected
{
  color: rgba(0, 255, 0, 0.9) !important;
}

.pattern-play-empty
{
  color: rgba(150, 150, 150, 0.5);
  height: 16px;
}



.group-focussed
{
  background: rgba(0, 255, 0, 0.5);

  box-shadow: 
  0 0 30px rgba(0, 255, 0, 0.8),
  inset 0 0 20px rgba(0, 255, 0, 0.8);
  color:black
}

.playerbtn
{
  margin-top: 20px ;
  width: 50px;
  height: 36px;
  text-align: center;
  border-radius: 10px;
}


.neumorphic-std-button {
  padding-top: 3px;
  /*width: 50px;*/
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  /*transition: all 0.3s ease;*/
}

.neumorphic-ok-button {
  width: 50px;
  
  border: none;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  /*transition: all 0.3s ease;*/
}

.neumorphic-cancel-button {
  width: 90px;
  
  border: none;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  /*transition: all 0.3s ease;*/
}


.curstep
{
  background-color: #94c0ec;
}



#StatusMessage
{
  width:200px;
  font-size: 12px;
  text-align: right;
  color:#a55208;
  vertical-align: bottom;
}


.ellipsis-box {
  white-space: nowrap;     /* Prevents text from wrapping */
  overflow: hidden;        /* Hides overflow */
  text-overflow: ellipsis; /* Adds the ellipsis */
  /*border: 1px solid #ccc;*/  /* Optional: just to visualize the box */
}

#tooltip
{
  width: 600px;            /* Fixed width */
  padding-left: 10px;
  font-size: 10px;
  height: 10px;
  /*margin-bottom: 6px;*/
  /*text-align: right;*/
  color:#a55208;
  vertical-align: bottom;
}


/*************************************************************/
.led-holder
{
  text-align: center;
}
.led {
  /*width: 24px;*/
  height: 10px;
  border-radius: 2;
  background: #242424; /* Neutral background for the LED */
  box-shadow: 
      5px 5px 10px rgba(0, 0, 0, 0.6), 
      -5px -5px 10px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
  margin-top: 10px ;
  margin-bottom: 14px ;
  
  /*transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;*/
  position: relative;
}

.led.on {
  background: rgb(246, 174, 6); /* Bright yellow when on */
  box-shadow: 
      0 0 10px rgba(250, 173, 8, 0.8), 
      0 0 20px rgba(204, 141, 6, 0.68); /* Glowing effect */
}
/*************************************************************/

.playselectorbtn
{
  margin-top: 10px;
  width: 50px;
  height: 36px;
  text-align: center;
  border-radius: 10px;
}

#livecelllabel
{
  margin-bottom: 10px;
}

.pat_inst_selector_holder
{
  width:150px;
  vertical-align: top;
}
.insttoolbar_holder
{
  height: 80px;
}

.insttoolbar td
{
  padding-left: 10px;
}

.barlabel
{
  font-size: 12px ;
  text-align: center;
}
.small-label
{
  font-size: 10px ;
  text-align: center;
}
.small-title
{
  font-size: 10px ;
  color:#987848;
  margin-bottom: 6px;
}

  .volvel_holder
  {
    margin-top: 26px;
    text-align:center;
    font-size: 10px ;
    width: 150px;
    padding-left: 2px;
  }

  .input-container {
    position: relative;
    width: 236px;
    /*padding: 15px;*/
    /*min-width: 150px;*/
  }  

  .input {
    width: 100%;
    padding: 8px;
    
    border: none;
    outline: none;

    background: #242424; /* Neutral background for the button */
    border-radius: 10px;
        box-shadow: 
        5px 5px 10px rgba(0, 0, 0, 0.7), 
        5px 5px 10px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

    font-size: 14px;
    appearance: none;
    cursor: pointer;

    color: #d5a865;
  }



  .dropdown-container 
  {
      position: relative;
      /*width: 100px;*/
      /*padding: 15px;*/
      min-width: 150px;
  }

  .dropdown-container-small 
  {
    position: relative;
    min-width: 100px;
  }

  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

::-webkit-scrollbar-track {
    background: #242424; /* Neutral background for the scrollbar track */
    border-radius: 10px;
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.7), 
        inset -5px -5px 10px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
}

::-webkit-scrollbar-thumb {
    background: #c8913e; /* Thumb color */
    border-radius: 10px;
    box-shadow: 
        5px 5px 10px rgba(0, 0, 0, 0.7), 
        -5px -5px 10px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
}

::-webkit-scrollbar-thumb:hover {
    background: #c8913e; /* Thumb color on hover */
    box-shadow: 
        5px 5px 10px #866a3f, 
        -5px -5px 10px #433521;
}

  .dropdown {
      width: 100%;
      padding: 8px;
      
      
      border: none;
      outline: none;
      /*
      background: #ecf0f3;
      box-shadow:  
            5px 5px 10px #d1d9e6,  
            -5px -5px 10px #ffffff;
            */

      background: #242424; /* Neutral background for the button */
      border-radius: 10px;
          box-shadow: 
          5px 5px 10px rgba(0, 0, 0, 0.7), 
          5px 5px 10px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

      font-size: 14px;
      appearance: none;
      cursor: pointer;

      color: #d5a865;
  }

  .dropdown:hover {
      box-shadow: 
       5px 5px 10px #866a3f, 
       -5px -5px 10px #433521;
  }

  .dropdown:focus {
    box-shadow: 
    5px 5px 10px #866a3f, 
    -5px -5px 10px #433521;
  }

  .dropdown-container::after {
      content: '\25BC'; /* Downward arrow */
      font-size:12px;
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      pointer-events: none;
      color: #7d8da5;
  }

/* ################################# */

  .droplist {
    width: 100%;
    padding: 8px;
    
    border: none;
    outline: none;

    background: #242424; /* Neutral background for the button */
    border-radius: 10px;
        box-shadow: 
        5px 5px 10px rgba(0, 0, 0, 0.7), 
        5px 5px 10px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

    font-size: 14px;
    appearance: none;
    cursor: pointer;

    color: #d5a865;
}

.droplist:hover {
    box-shadow: 
     5px 5px 10px #866a3f, 
     -5px -5px 10px #433521;
}

.droplist:focus {
  box-shadow: 
  5px 5px 10px #866a3f, 
  -5px -5px 10px #433521;
}


/*####################################################*/

.dsample_set_holder
{
  width: 250px;
}

.isample_set_holder
{
  width: 250px;
}

.inst_type_holder
{
  width: 250px;
}

.note_scale_holder
{
  width: 250px;
}

.instselbar
{
  padding-bottom: 5px;
  border-top:1px solid #d5a865;
}
/**********************************************************************/
/*
        .slider {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #E0E5EC;
          transition: 0.4s;
          border-radius: 10px;
        }

        .slider::before {
            position: absolute;
            content: "";
            height: 15px;
            width: 15px;
            left: 5px;
            bottom: 5px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
            box-shadow: 
                3px 3px 6px rgb(163,177,198,0.6), 
                -3px -3px 6px rgba(255,255,255, 0.5);
        }
*/

        .itypename
        {
          font-size: 12px;
          border: 1px solid #ccc;
          border-radius: 3px ;
          margin-top: 10px;
          margin-bottom: 10px;
        }

        .volvelrange
        {
          margin-top: 15px;
          width: 150px;
          border: 1px solid #ccc;
          color :#ccc;
        }



/*##################################################################*/
/*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neumorphic Range Slider</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #E0E5EC;
            font-family: Arial, sans-serif;
        }*/

        .rangeSlider
        {
          width:70% !important;
          
        }
        .range-value-display
        {
          width:25% !important;
          /*background-color: #E0E5EC;*/
          background: #242424; /* Neutral background for the button */
          border: 0px;
          text-align: center;
          color: #d5a865;
        }


        .neumorphic-range-container {
            /*width: 200px;*/
            padding: 10px;
            /*background-color: #E0E5EC;*/
            background: #242424; /* Neutral background for the button */
            border-radius: 20px;
            /*
            box-shadow: 
                9px 9px 16px rgb(163,177,198,0.6), 
                -9px -9px 16px rgba(255,255,255, 0.5);
                */
                box-shadow: 
                9px 9px 16px rgba(0, 0, 0, 0.7), 
                -9px -9px 16px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
        
        }

        .neumorphic-range {
            -webkit-appearance: none;
            width: 100%;
            height: 10px;
            background: transparent;
            outline: none;
            margin: 5px 0;
            border: 0;
        }

        /* Custom slider track */
        .neumorphic-range::-webkit-slider-runnable-track {
            width: 100%;
            height: 10px;
            /*background: #E0E5EC;*/
            background: #242424; /* Neutral background for the button */
            border-radius: 10px;
            /*
            box-shadow: 
                inset 3px 3px 6px rgb(163,177,198,0.6), 
                inset -3px -3px 6px rgba(255,255,255, 0.5);
                */
                box-shadow: 
                inset 3px 3px 6px  rgba(0, 0, 0, 0.7), 
                inset -3px -3px 6px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
        
        }

        /* Custom slider thumb */
        .neumorphic-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: #535353; /* Neutral background for the button */
            cursor: pointer;
            border-radius: 50%;
            margin-top: -5px;
            /*
            box-shadow: 
                6px 6px 12px rgb(163,177,198,0.6), 
                -6px -6px 12px rgba(255,255,255, 0.5);
                */
                box-shadow: 
                6px 6px 12px  rgba(0, 0, 0, 0.7), 
                -6px -6px 12px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

            transition: all 0.3s ease;
        }

        /* Active/hover states */
        .neumorphic-range::-webkit-slider-thumb:hover {
            box-shadow: 
                8px 8px 16px rgb(163,177,198,0.7), 
                -8px -8px 16px rgba(255,255,255, 0.7);
        }

        .neumorphic-range::-webkit-slider-thumb:active {
            box-shadow: 
                inset 3px 3px 6px rgb(163,177,198,0.6), 
                inset -3px -3px 6px rgba(255,255,255, 0.5);
        }

        /* Value display */
        .value-display {
            text-align: center;
            color: #5D6D7E;
            font-size: 12px;
            margin-top: 10px;
            background-color: #E0E5EC;
            padding: 4px;
            border-radius: 4px;
            box-shadow: 
                3px 3px 6px rgb(163,177,198,0.6), 
                -3px -3px 6px rgba(255,255,255, 0.5);
        }


        .range-value-display:focus
        {
          text-align: center; 
          outline: none;
          border-radius: 5px;

          box-shadow: 
          5px 5px 10px #866a3f, 
          -5px -5px 10px #433521;
      
        }

        /*
    </style>
</head>
<body>
    <div class="neumorphic-range-container">
        <input type="range" min="0" max="100" value="50" class="neumorphic-range">
        <div class="value-display">50</div>
    </div>

    <script>
        const rangeSlider = document.querySelector('.neumorphic-range');
        const valueDisplay = document.querySelector('.value-display');

        rangeSlider.addEventListener('input', () => {
            valueDisplay.textContent = rangeSlider.value;
        });
    </script>
</body>
</html>*/


.focussed
{
  /*border: 2px solid #d18c26;*/
 /* border: 2px solid rgb(180, 105, 255);*/
  border: 2px solid #eee;

}

/*################*/
.hr-dialog-top
{
  
  border-bottom:1px solid #987848;
  padding-bottom: 10px; 
  margin-bottom:20px; 
  height: 5px;

}

.hr-dialog-bottom
{
  
  border-bottom:1px solid #987848;
  padding-bottom: 10px; 
  margin-bottom: 20px; 
  height: 10px;
}

.textbox-container
{
  padding: 10px;
}

.textbox {
  width: 100%;
  height: 100%;
  background: none;
  border: 1px solid #d5a865;
  /*padding: 0 12px;*/
  text-align: center;
  color: #d5a865;
  font-size: 14px;
  outline: none;
}


.modal
{

  /*
  z-index: 100;
  display: none;
  position: absolute;
  */

  /*
  background-color: #E0E5EC;
  border-radius: 15px;

  box-shadow: 
      9px 9px 16px rgb(163,177,198,0.6), 
      -9px -9px 16px rgba(255,255,255, 0.5);
*/

  /*background-color: #E0E5EC;*/
  color: #d5a865;
  background: #242424; /* Neutral background for the button */
  border-radius: 15px;
  
  /*
  box-shadow: 
      9px 9px 16px rgb(163,177,198,0.6), 
      -9px -9px 16px rgba(255,255,255, 0.5);
      */
      box-shadow: 
      9px 9px 16px rgba(0, 0, 0, 0.7), 
      -9px -9px 16px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

  padding: 15px;

}

#MixerUI
{
  min-width:200px;
  min-height:600px;

  margin-left: 40px;


  color: #d5a865;
  background: #242424; /* Neutral background for the button */
  border-radius: 15px;

  box-shadow: 
  9px 9px 16px rgba(0, 0, 0, 0.7), 
  -9px -9px 16px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */

  padding: 15px;
  width:900px;
}

/****************************************************************************************/
.drumpat_table
{
  border-collapse: collapse;
}

.drumpat_tr
{
    height: 50px;
}

.drumpat_td
{
    border: 1px solid #777;
    width:30px;
    height: 30px;
    text-align: center;
    padding:3px;
}

.drumpat_filled
{
    background-color: rebeccapurple;
}

.drumpat_headertd
{
    background-color: rgb(55, 55, 55);
}

.drumpat_accent
{
    background-color: rgb(75, 59, 76);
}

.drumpat_titlecell
{
    width: 100px;
}

/****************************************************************************************/
/* Check Box */

.checkbox-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  cursor: pointer;
}

.checkbox-label {
  color: #d5a865;
  margin-left: 15px;
  font-size: 14px;
}

.neumorphic-checkbox {
  position: relative;
  width: 24px;
  height: 24px;
}

.neumorphic-checkbox input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.neumorphic-check-button {
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #242424; /* Neutral background for the button */
  box-shadow: 
      10px 10px 20px rgba(0, 0, 0, 0.7), 
      -10px -10px 20px rgba(255, 255, 255, 0.1); /* Neumorphic shadows */
  margin-right: 8px;
  margin-bottom: 8px;
  position: relative;
  color: #d5a865;
  text-align: center;
  transition: all 0.3s ease;
}

.neumorphic-check-button:focus {
  outline: none;
  border: 1px solid #d5a865;
}

.neumorphic-checkbox input:checked + .neumorphic-check-button {
  box-shadow: 
      inset 5px 5px 10px rgba(0, 0, 0, 0.7), 
      inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.neumorphic-checkbox input:checked + .neumorphic-check-button::after {
  content: "✓";
  color: #d5a865;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
}


/****************************************************************************************/
.liveQuantizeBeatTD
{
  padding:5px;
}



#MultiTrackEditor
{
  overflow-y: auto;
  overflow-x: hidden;
  height:500px;
  /*border: 1px solid red;*/
}

.zoomToolBarBtn
{
  margin-top:18px;

  /*margin-left: 20px;*/
  margin-right: 10px;
  width: 50px;
  height: 36px;
  text-align: center;
  border-radius: 10px;
}

#CurrentChannel
{
  color: rgba(0, 255, 0, 0.9);
}

#songsamppat_holder
{
  margin-bottom: 8px ;
  width:100px
}


#GRSCriptTA
{
  width:100%;
  height: calc(100vh - 100px);;
  background: #242424; /* Neutral background for the button */
  color: #d5a865;
  font-size: 20px;
}

.GRAssistantTA
{
  width:100%;
  height: calc(50vh - 100px);;
  background: #242424; /* Neutral background for the button */
  color: #d5a865;
  font-size: 20px;
}

#CellPropsFileDetails
{
    width: 500px;
    font-size:12px;
    font-family:monospace;
    padding:3px !important;
}

#ProjectTitle 
{
  font-size:24px;
  text-align:right;
}

.ProjectTitleTD
{
  
}


#CircularFaderTable td
{
  border: 1px solid #6d5635;
}

.fadertable td
{
  padding: 4px;
}

/*********************************************************/

/* Hide default checkbox */
    .griddj-checkbox {
      position: relative;
      width: 18px;
      height: 18px;
      appearance: none; /* for modern browsers */
      -webkit-appearance: none;
      -moz-appearance: none;
      /*background-color: lightgray;*/
      /*border: 1px solid #999;*/
      cursor: pointer;

    background: #242424; /* Neutral background for the button */
    
    box-shadow: 
      2px 2px 5px rgba(0, 0, 0, 0.7), 
      -2px -2px 5px rgba(255, 255, 255, 0.1); 
    
    }

    /* Checked state */
    .griddj-checkbox:checked {
      /*background-color: green; /* Change this to whatever you want */
      /*background-color: #d5a865;*/
    }

    /* Optional: add a checkmark */
    .griddj-checkbox:checked::after {
      content: '';
      position: absolute;
      left: 5px;
      top: 1px;
      width: 5px;
      height: 10px;
      border: solid #d5a865;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      
    }