body{
      font-family: sans-serif;
      font-size:12px;
      background-color: #2ca9bc;
      background: url('../grfx/bg2.jpg');
      background-repeat: no-repeat;
      background-size:  cover;
      background-attachment: fixed;
      background-position: center center; 
   }

   h3{
      height:17px;
      overflow:hidden;
   }
   .button{
      width:25px;
      height:25px;
      padding: 20px;
      margin-right:20px;
      border: none;
      font-size: 16px;
      cursor: pointer;     
   }   
   #load_factory_data,#load_user_data{
       background:url('../grfx/load.svg');
            background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat;      
   }

   #save_sequences,#save_json_data{
      background:url('../grfx/save.svg');
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
      position: relative;
      z-index: 100;
   } 
   #save_json_data_txt{
      background:url('../grfx/save_txt.svg');
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
      position: relative;
      z-index: 100;
   }    
   
   #load_json_data_txt{
      background:url('../grfx/load_txt.svg');
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
      position: relative;
      z-index: 100;
   }       
   
   #save_sequences_new{
      background:url('../grfx/save_new.svg');
            background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
   }       
   #remove_user_data{
      background:url('../grfx/trash2.svg');
            background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
   } 
   #dialog_cancel{
       background:url('../grfx/cancel.svg');
            background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat;      
   }
   #dialog_ok{
       background:url('../grfx/ok.svg');
            background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat;      
   }   

   .head_buttons{
      background-color: rgba(255,255,255,0.5);
      display: block;
      height:50px;
      border-radius: 5px;
   }

   .share-icon{
      background:url('../grfx/share.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:right;
      cursor: pointer;
   }
   
   .help-icon{
      background:url('../grfx/help.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:right;
      cursor: pointer;
   }

   .option-icon{
      background:url('../grfx/option.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:right;
      cursor: pointer;
   }
   
   .save_last_preset-icon{
      background:url('../grfx/save.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:right;
      cursor: pointer;      
   }   

   .load_last_preset-icon{
      background:url('../grfx/load.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:right;
      cursor: pointer;      
   }

   .play-icon{
      background:url('../grfx/play.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:left;
      cursor:pointer;
   }

   .record-red-icon{
      background:url('../grfx/record_red.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:left;
      cursor:pointer;
      display: none;
   }  

   .record-black-icon{
      background:url('../grfx/record_black.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:left;
      cursor:pointer;
   } 


   .stop-icon{
      background:url('../grfx/stop.svg') no-repeat center center;
      background-size: contain;
      background-repeat: no-repeat;
      width:50px;
      height:50px;
      overflow:hidden;
      float:left;
      display: none;
      cursor: pointer;
   }

   .add-icon{
      background:url('../grfx/add.svg') no-repeat center center;
      background-size: contain;
      width:50px;
      height:50px;
      overflow:hidden;
      float:left;
      cursor: pointer;
   }   

   .delete_item{
      background:url('../grfx/trash2.svg') no-repeat center center;
      background-size: contain;
      width:25px;
      height:25px;
      overflow:hidden;
      float:left;
      cursor: pointer;    
      border:0;  
   }

   .change_name_item{
      background:url('../grfx/pen.svg') no-repeat center center;
      background-size: contain;
      width:25px;
      height:25px;
      overflow:hidden;
      cursor: pointer;    
      border:0;  
      position:absolute;

   }

   .move_sequence_down{
       background:url('../grfx/down.svg') no-repeat center center;
      background-size: contain;
      width:25px;
      height:25px;
      overflow:hidden;
      float:left;
      cursor: pointer;    
      border:0;     
   }
   .move_sequence_up{
       background:url('../grfx/up.svg') no-repeat center center;
      background-size: contain;
      width:25px;
      height:25px;
      overflow:hidden;
      float:left;
      cursor: pointer;    
      border:0;     
   }

   .head_playtime{
      float:left;
      font-size:large;
      padding:10px;
      width:100%;
      background-color: rgba(255,255,255,0.5);
      display: block;
      border-radius: 5px;
   }   

   .br{
      clear:both;
      height:5px;
   }

   textarea{
      font-family: monospace;
   }

   .action_fieldset{
      width:115px;
   }

   #sequences{
      width:100%; 
   }

   .section_div{
      display: block;
      overflow-x: scroll;
   }

   .section_div_overflow{
      --overflow:hidden;
   }

   input.slider{
      width:100px;
   }

   input.slider_text{
      width:60px;
      margin-left: 0px;
      text-align:center;
      height:25px;
      font-size:25px;
      color:black;
     background: rgb(122,0,0);

   }

   .info_field{
      border:1px solid black;
      background-color:#ededed;;
      padding:2px;
      width:100px;
      float:right;
      text-align:center;
   }

   .select_field{
      width:100%;
      border:1 px solid gray;
   }

   .fieldset-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem; /* Abstand zwischen den Fieldsets */
      --max-width: 100%;
      box-sizing: border-box;
      overflow: visible;
   }

   input, div {
     max-width: 100%;
     box-sizing: border-box;
   }

   .fieldset_level_1{
      flex: 1 1 200px; /* wächst, schrumpft, hat min. 300px Breite */
      border:0;
      border-right:5px solid #cccccc;
   }
   .fieldset_level_1_bigger{
      flex: 1 1 300px; /* wächst, schrumpft, hat min. 300px Breite */
   }
   .fieldset_level_1_smaller{
      flex: 0 0 100px; /* wächst, schrumpft, hat min. 300px Breite */
      min-width: 50px;
   }
   .fieldset_level_2{
      border:0;
      float: left;
   }

   .input_val{
      width:50px;
   }
   .input_val2{
      width:100px;
   }

   .freq_table_border{
      border:1px solid black;
   }

   .tabs{
      width:500px;
   }
   .json_data{
      width:100%;
      height:80px;
      position:relative;
      z-index:100;
   }
   .dialog_message{
      width:100%;
      line-height:50px;
      height:100%;
      text-align: center;
      vertical-align: middle;
      font-weight:bold;
   }

   .button_load{
      background:url(../grfx/load.png);
      background-size:25px;
      background-position: center;
      background-repeat: no-repeat;
      width:30px;
      height:30px;
      cursor: pointer;
   }


   .button_save{
      background:url(../grfx/save.png);
      background-size:25px;
      background-position: center;
      background-repeat: no-repeat;
      width:30px;
      height:30px;
      cursor: pointer;
   }

   .button_remove{
      background:url(../grfx/remove.png);
      background-size:25px;
      background-position: center;
      background-repeat: no-repeat;
      width:30px;
      height:30px;
      cursor: pointer;
   }

   .button_play{
      background:url(../grfx/play.png);
      background-size:25px;
      background-position: center;
      background-repeat: no-repeat;
      width:30px;
      height:30px;
      cursor: pointer;
   }

   .button_stop{
      background:url(../grfx/stop.png);
      background-size:25px;
      background-position: center;
      background-repeat: no-repeat;
      width:30px;
      height:30px;
      cursor: pointer;
   }

   .wave_descr_start, .wave_descr_end{
      float:left;
      width:9vmin;
      height:9vmin;
      font-size: 1.5vmin;
      text-align: center;
      vertical-align: middle;
       margin-right:5px;
       border-radius: 5px;
       border:1px solid black;
        display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
   }

   .wave_descr_content{
      --margin-top:20px;
   }

   .wave_desc_delta{
      background-color:#3f2cbc;
      color:white;
   }

   .wave_desc_theta{
      background-color:#2ca9bc;
      color:black;
   }

   .wave_desc_alpha{
      background-color:#ffff33;
      color:black;
   }

   .wave_desc_beta{
      background-color:#cc0033;
      color:white;
   }

   select   {
      width: 150px;
      border:1px solid #cccccc;
      background-color:#ededed;
   }

   #play_btn,#stop_btn{
      width:50px;
      height:50px;
   }


   #preferences{
      width:100%;
      display: inline-block;
      overflow-x: scroll;
      overflow-y: hidden;
   }

   .pref_container{
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;    
         height:250px;
   }

   .ui-widget-content{
      background: rgba(255,255,255,0.7);
   }
   .ui-state-active,
   .ui-widget-content .ui-state-active,
   .ui-widget-header .ui-state-active,
   a.ui-button:active,
   .ui-button:active,
   .ui-button.ui-state-active:hover {
      background-color: #2ca9bc;
   }

   .ui-widget-content{

   }

   .ui-widget-overlay
   {
     opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
     filter: Alpha(Opacity=50) !important;

     background: rgb(50, 50, 50) !important; /* This will make it darker */
   }

   #cookie_disclaimer{
      width:400px;
      height:225px;
      border:1px solid black;
      position:absolute;
      top:0px;
      right:0px;
      padding:10px;
      background-color:#517e95;
      display:none;
   }

   .cookie_disclaimer_title{
      font-size:16px;
      color:#faf5cd;
      margin-bottom: 10px;
      font-weight: bold;
   }

   .cookie_disclaimer_content{
      font-size:16px;
      background-color:#517e95;
      color:white;
   }

   .cookie_button_no{
      background-color:red;
      color:white;
   }

   .cookie_button_yes{
      background-color:green;
      color:white;
   }
   #help_content{
      height:180px;
      width:500px;
      
   }

   .tabs-lang-scroll{
      overflow-y:scroll;
      height:130px;
   }

   .trash{
      background:url('../grfx/trash20x20.png');
      background-repeat: no-repeat;
      background-position: center;
      min-width:25px;
      min-height:25px;   
      background-color:;
      --background-color: #F2F2F2;
      border:0px;
      margin-top:2px;   
      cursor:pointer;
   }

   #piano{
      border:1px solid black;
      overflow: hidden;
   }

   .piano_key{
      cursor: pointer;
   }

   #def_freq{
      width:30px;
   }

   #def_oct{
      width:100px;
   }

   .move_arrows_left,.move_arrows_right{
      font-size: 20px;
      border:1px solid gray;
      cursor: pointer;
      margin-bottom: 5px;
      width:20px;
   }
  .arrows_top{
      margin-top:30px;
      float:left;
  }
  .mute{
      background-color: ;
      width:25px;
      height:25px;
  }
  .mute_pressed{
      background-color: yellow;
      font-weight:bold;
  }
  .mute_released{
      background-color:;
      font-weight:normal;
  }
  .overlay{
   position: absolute;
   z-index: 10;
   width:100%;
   height:100%;
   background-color: rgba(0,0,0,0.2);
  }

  #record_links{
   float:left;
  }

  button.add-btn, button.sub-btn{
   all: unset; /* entfernt alle Standard-Button-Stile */
   display: inline-block;
   padding: 0;
   margin: 0;
   width: fit-content;
   height: fit-content;
   cursor: pointer;
  }

  .sequence_name{
   color:black;
  }