canvas {
    width: 100%;
    border-radius: 4px;
    border-color: #fff;
    border-width: 2px;
    display: block;
    margin-bottom: 15px 0px;
  }
  .wrapper {
    display: flex;
    box-shadow: 10px 10px 20px 5px rgb(0 0 0 / 12%);
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    border-radius: 10px;
    padding: 25px 20px;
  }
  .wrapper #svg-img {
    height: 234px;
  }
  
  .record-svg {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #buttons {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #buttons button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    text-transform: uppercase;
    color: #fff;
    padding: 1rem 2rem;
  }
  #buttons button span {
    font-weight: 600;
  }
  #buttons button svg {
    fill: #fff;
    height: 18px;
  }
  #stopwatch {  
    font-size: 18px;
    padding: 16px 0px;
    font-weight: 700;
    text-align: center;
  
  }
  
  /* editor.css */
  :root {
    --bg: white;
    --cl: white;
  }
  
  #tInput input {
      background-color: transparent;
      color: #bababc;
      width: 32px;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 600;
      max-width: 32px;
      border-width: 0px;
      margin: 1px;
      text-align: center;
      height: 29px;
  }
  #tInput {
      display: flex;
      margin: 10px;
      gap: 10px;
  }
  
  .eq-b{
        width: 10%;
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-content: center;
      align-items: center;
  }
  
  /*.rev-save button{
    margin: 20px !important;
  }*/
  
   /* Dropdown Button */
  .dropbtn {
    background-color: white;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
      border-color: #0a87ff;
      background-color: #0a87ff;
      display: block;
      width: 100%;
      min-width: 136px;
      padding: 9px 25px;
      font-size: 18px;
      line-height: 24px;
      font-weight: 500;
      letter-spacing: -.2px;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: grey;
  }
  
  .dropb{
    border-radius: 15px;
  }
  
  /* The container <div> - needed to position the dropdown1 content */
  .dropdown1 {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown1-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 15px;
  }
  
  /* Links inside the dropdown1 */
  .dropdown1-content button {
    border-style: none;
    background-color: white;
    width:100%;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown1 links on hover */
  .dropdown1-content button:hover {background-color: #ddd}
  
  /* Show the dropdown1 menu (use JS to add this class to the .dropdown1-content container when the user clicks on the dropdown1 button) */
  .show {display:block;}  
  
  #dn1{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #inputFile{
    position: fixed;
    cursor: pointer !important;
  }
  
  #equalizer{
        
        flex-wrap:wrap;
      }
  
  .custom-file{
    width: 500px !important;
    cursor: pointer !important;
  }
  
  .bass-text{
    margin-bottom: 20px;
  }
  
  .fimg{
    margin-bottom: 20px;
  }
  
  .InputButton{
    width:100% !important;
  }
  .custom-file-label{
  cursor: pointer !important;
  }
  
  button i{
    height: 20px !important;
    margin-bottom: 0px !important;
  }
  .pitch-range-slider{
    background-color: var(--fg) !important;
  }
  
  .reset-b{
    display: flex;
    flex-direction:row;
      background-position: 6px;
      border-style: none;
      background-color: transparent;
     
      
      border-radius: 15px;
      }
  .rs{
    height: 54px;
    width: 25px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cstyle%3E.a{fill:%23fff}%3C/style%3E%3Cpath d='M.5 0c.3 0 .5.2.5.5V4h3.5c.3 0 .5.2.5.5s-.2.5-.5.5h-4C.2 5 0 4.8 0 4.5v-4C0 .2.2 0 .5 0z' class='a'/%3E%3Cpath d='M1.4 7.7c.4.9 1.2 1.8 2.1 2.5.9.6 1.9.9 2.9.8 1.1-.1 2.1-.5 2.9-1.2.7-.7 1.3-1.6 1.5-2.7.3-1 .2-2.2-.3-3.2-.4-.9-1.1-1.8-2-2.3-.9-.5-2-.7-3-.6-1 .2-1.9.7-2.7 1.4L1.3 4.6c-.7.9-.8.1-.8-.6l1.6-2.2C3 .8 4.1.2 5.4.1 6.6-.1 7.9.1 9 .7c1.1.7 1.9 1.7 2.5 2.8.5 1.2.6 2.6.3 3.8-.3 1.3-.9 2.4-1.9 3.3-1 .8-2.2 1.3-3.4 1.4-1.3.1-2.5-.3-3.6-1-1-.7-2-1.8-2.4-3 0-.7.7-.7.9-.3z' class='a'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: 6px;
    display: block;
  }
  
  .n-text{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #nt-bass{
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20pt' height='20pt' viewBox='0 0 20 20' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 15 0 L 5 0 C 4.078125 0 3.335938 0.746094 3.332031 1.667969 L 3.332031 17 C 3.335938 17.792969 3.890625 18.472656 4.667969 18.632812 L 4.667969 20 L 6.667969 20 L 6.667969 18.667969 L 13.332031 18.667969 L 13.332031 20 L 15.332031 20 L 15.332031 18.632812 C 16.109375 18.472656 16.664062 17.792969 16.667969 17 L 16.667969 1.667969 C 16.664062 0.746094 15.921875 0 15 0 Z M 6 19.332031 L 5.332031 19.332031 L 5.332031 18.667969 L 6 18.667969 Z M 14.667969 19.332031 L 14 19.332031 L 14 18.667969 L 14.667969 18.667969 Z M 16 17 C 16 17.550781 15.550781 18 15 18 L 5 18 C 4.449219 18 4 17.550781 4 17 L 4 1.667969 C 4 1.113281 4.449219 0.667969 5 0.667969 L 15 0.667969 C 15.550781 0.667969 16 1.113281 16 1.667969 Z M 16 17 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 10 6.667969 C 7.054688 6.667969 4.667969 9.054688 4.667969 12 C 4.671875 14.945312 7.054688 17.328125 10 17.332031 C 12.945312 17.332031 15.332031 14.945312 15.332031 12 C 15.332031 9.054688 12.945312 6.667969 10 6.667969 Z M 10 16.667969 C 7.421875 16.667969 5.332031 14.578125 5.332031 12 C 5.335938 9.425781 7.425781 7.335938 10 7.332031 C 12.578125 7.332031 14.667969 9.421875 14.667969 12 C 14.667969 14.578125 12.578125 16.667969 10 16.667969 Z M 10 16.667969 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 10 8 C 7.789062 8 6 9.789062 6 12 C 6.003906 14.207031 7.792969 15.996094 10 16 C 12.210938 16 14 14.210938 14 12 C 14 9.789062 12.210938 8 10 8 Z M 10 15.332031 C 8.160156 15.332031 6.667969 13.839844 6.667969 12 C 6.667969 10.160156 8.160156 8.667969 10 8.667969 C 11.839844 8.667969 13.332031 10.160156 13.332031 12 C 13.332031 13.839844 11.839844 15.332031 10 15.332031 Z M 10 15.332031 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 10 1.332031 C 8.710938 1.332031 7.667969 2.378906 7.667969 3.667969 C 7.667969 4.953125 8.710938 6 10 6 C 11.289062 6 12.332031 4.957031 12.332031 3.667969 C 12.332031 2.378906 11.289062 1.332031 10 1.332031 Z M 10 5.332031 C 9.078125 5.332031 8.332031 4.585938 8.332031 3.667969 C 8.335938 2.746094 9.078125 2 10 2 C 10.921875 2 11.667969 2.746094 11.667969 3.667969 C 11.667969 4.585938 10.921875 5.332031 10 5.332031 Z M 10 5.332031 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 10 2.667969 C 9.449219 2.667969 9 3.113281 9 3.667969 C 9 4.21875 9.449219 4.667969 10 4.667969 C 10.550781 4.667969 11 4.21875 11 3.667969 C 11 3.113281 10.550781 2.667969 10 2.667969 Z M 10 4 C 9.816406 4 9.667969 3.851562 9.667969 3.667969 C 9.667969 3.484375 9.816406 3.332031 10 3.332031 C 10.183594 3.332031 10.332031 3.484375 10.332031 3.667969 C 10.332031 3.851562 10.183594 4 10 4 Z M 10 4 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 4.667969 1.332031 L 5.332031 1.332031 L 5.332031 2 L 4.667969 2 Z M 4.667969 1.332031 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 14.667969 1.332031 L 15.332031 1.332031 L 15.332031 2 L 14.667969 2 Z M 14.667969 1.332031 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 4.667969 16.667969 L 5.332031 16.667969 L 5.332031 17.332031 L 4.667969 17.332031 Z M 4.667969 16.667969 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 14.667969 16.667969 L 15.332031 16.667969 L 15.332031 17.332031 L 14.667969 17.332031 Z M 14.667969 16.667969 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 10 10.332031 C 9.078125 10.332031 8.332031 11.078125 8.332031 12 C 8.335938 12.921875 9.078125 13.664062 10 13.667969 C 10.921875 13.667969 11.667969 12.921875 11.667969 12 C 11.667969 11.078125 10.921875 10.332031 10 10.332031 Z M 10 13 C 9.449219 13 9 12.550781 9 12 C 9 11.449219 9.449219 11 10 11 C 10.550781 11 11 11.449219 11 12 C 11 12.550781 10.550781 13 10 13 Z M 10 13 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 2 11.667969 L 0.667969 11.667969 C 0.484375 11.667969 0.332031 11.816406 0.332031 12 C 0.332031 12.183594 0.484375 12.332031 0.667969 12.332031 L 2 12.332031 C 2.183594 12.332031 2.332031 12.183594 2.332031 12 C 2.332031 11.816406 2.183594 11.667969 2 11.667969 Z M 2 11.667969 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 2.234375 9.429688 L 1.234375 8.429688 C 1.101562 8.304688 0.890625 8.308594 0.765625 8.4375 C 0.640625 8.570312 0.640625 8.773438 0.765625 8.902344 L 1.765625 9.902344 C 1.898438 10.03125 2.109375 10.027344 2.234375 9.894531 C 2.359375 9.765625 2.359375 9.558594 2.234375 9.429688 Z M 2.234375 9.429688 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 2.226562 14.097656 C 2.097656 13.972656 1.894531 13.972656 1.765625 14.097656 L 0.765625 15.097656 C 0.632812 15.226562 0.628906 15.4375 0.757812 15.570312 C 0.882812 15.703125 1.09375 15.707031 1.226562 15.578125 C 1.230469 15.574219 1.234375 15.570312 1.234375 15.570312 L 2.234375 14.570312 C 2.363281 14.4375 2.359375 14.226562 2.226562 14.097656 Z M 2.226562 14.097656 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 19.332031 11.667969 L 18 11.667969 C 17.816406 11.667969 17.667969 11.816406 17.667969 12 C 17.667969 12.183594 17.816406 12.332031 18 12.332031 L 19.332031 12.332031 C 19.515625 12.332031 19.667969 12.183594 19.667969 12 C 19.667969 11.816406 19.515625 11.667969 19.332031 11.667969 Z M 19.332031 11.667969 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 19.226562 8.429688 C 19.097656 8.304688 18.894531 8.304688 18.765625 8.429688 L 17.765625 9.429688 C 17.632812 9.5625 17.632812 9.773438 17.765625 9.902344 C 17.828125 9.964844 17.910156 10 18 10 C 18.089844 10 18.171875 9.964844 18.234375 9.902344 L 19.234375 8.902344 C 19.363281 8.769531 19.359375 8.558594 19.226562 8.429688 Z M 19.226562 8.429688 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(100%25,100%25,100%25);fill-opacity:1;' d='M 19.234375 15.097656 L 18.234375 14.097656 C 18.101562 13.96875 17.890625 13.972656 17.765625 14.105469 C 17.640625 14.234375 17.640625 14.441406 17.765625 14.570312 L 18.765625 15.570312 C 18.898438 15.695312 19.109375 15.691406 19.234375 15.5625 C 19.359375 15.433594 19.359375 15.226562 19.234375 15.097656 Z M 19.234375 15.097656 '/%3E%3C/g%3E%3C/svg%3E%0A");
      background-position: 10px;
      display: flex;
      width: 50px;
      height: 50px;
       /*padding-bottom: calc(100% * 3 / 4);*/
      border-radius: 15px 0px 0px 15px;
      
      background-repeat: no-repeat;
  }
  #nt-cutter{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.08 6.665A3.5 3.5 0 106.665 8.08L8.585 10l-1.921 1.922a3.5 3.5 0 101.414 1.414l2.614-2.614a.591.591 0 00.028-.028l6.653-6.653a1 1 0 00-1.414-1.414L10 8.586l-1.92-1.92zM5 3.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm0 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z' fill='%23fff'/%3E%3Cpath d='M11.35 11.36a1 1 0 011.415-.001l4.608 4.6a1 1 0 01-1.413 1.415l-4.608-4.6a1 1 0 01-.001-1.414z' fill='%23fff'/%3E%3C/svg%3E");
      background-position: 6px;
      display: flex;
      width: 50px;
      height: 50px;
      padding:left:20px !important;
      border-radius: 15px 0px 0px 15px;
      background-position: 15px;
      background-repeat: no-repeat;
  }
  #nt-speed{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0a1 1 0 100 2h3a1 1 0 100-2h-3zm8 11.5A6.5 6.5 0 016.02 15h-2.27a8.5 8.5 0 102.27-10h5.98v.019a6.5 6.5 0 015.998 6.481zM3 13a1 1 0 110-2h4a1 1 0 110 2H3zm7.985-.108a1 1 0 001.345-.437l1.816-3.564a1 1 0 00-1.782-.908l-1.816 3.564a1 1 0 00.437 1.345zM1 9a1 1 0 110-2h8a1 1 0 110 2H1z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
      background-position: 10px;
      display: flex;
      width: 50px;
      height: 50px;
      border-radius: 15px 0px 0px 15px;
      
      background-repeat: no-repeat;
  }
  #nt-pitch{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M9 2a1 1 0 112 0v16a1 1 0 11-2 0V2zM1 9a1 1 0 012 0v2a1 1 0 11-2 0V9zM14 4a1 1 0 00-1 1v10a1 1 0 102 0V5a1 1 0 00-1-1zM5 5a1 1 0 012 0v10a1 1 0 11-2 0V5zM18 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z'/%3E%3C/g%3E%3C/svg%3E");
      background-position: 10px;
      display: flex;
      width: 50px;
      height: 50px;
      border-radius: 15px 0px 0px 15px;
      
      background-repeat: no-repeat;
  }
  #nt-gain{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)' fill='%23fff'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 3.067c0-1.271-1.483-1.966-2.46-1.152L3.637 6H1.445a1.5 1.5 0 00-1.5 1.5v5a1.5 1.5 0 001.5 1.5h2.192l4.903 4.085c.977.814 2.46.12 2.46-1.153V3.067zM4.64 7.768L9 4.135v11.73l-4.36-3.633A1 1 0 004 12H1.945V8H4a1 1 0 00.64-.232z'/%3E%3Cpath d='M17.267 3.401a1 1 0 10-1.414 1.414 7.333 7.333 0 010 10.37 1 1 0 001.414 1.414 9.333 9.333 0 000-13.198z'/%3E%3Cpath d='M14.488 6.347a1 1 0 10-1.415 1.414 3.167 3.167 0 010 4.478 1 1 0 101.415 1.414 5.167 5.167 0 000-7.306z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
      background-position: 10px;
      display: flex;
      width: 50px;
      height: 50px;
      border-radius: 15px 0px 0px 15px;
      
      background-repeat: no-repeat;
  }
  
  .range-slider {
      position: relative;
      height: 80px;
      width:100%;
  }
  
  #fade_rev_cut{
    display:none;
  }
  .rng{
    background-color: rgba(0,0,0,.25);
    margin-bottom: 20px;
    height:100px;
    padding: 10px 10px 30px 10px;
    border-radius: 15px;
  }
  
  .b-text{
    margin:15px;
  }
  
  .between{
    background-color: rgba(0,0,0,.25);
    padding: 20px 20px 0px 20px;
    border-radius: 15px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  
  .between2{
   /* background-color: rgba(0,0,0,.25);*/
    margin: 0px 0px 0px 0px;
    padding: 20px 20px 0px 20px;
    border-radius: 15px;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .btn-active:disabled{
    opacity: 50%;
  }
  
  #split-down{
    width: 100% !important;
  }
  
  #fade_in_btn{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.1' d='M1 20c-.552 0-1-.446-1-.998v-4.215a1 1 0 011-1h.294c2.74.005 4.094-.163 5.705-.937 1.931-.927 3.601-2.653 5.035-5.476 1.37-2.697 2.882-4.55 4.583-5.718C18.64.267 20.274-.014 23.547.001H24a1 1 0 011 1V19.01c0 .552-.448.99-1 .99H1z' fill='%23fff'/%3E%3Cpath d='M1 15.787a1 1 0 110-2h.294c2.74.005 4.094-.163 5.705-.937 1.931-.927 3.601-2.653 5.035-5.476 1.37-2.697 2.882-4.55 4.583-5.718C18.64.267 20.274-.014 23.547.001H24a1 1 0 110 2h-.462c-2.893-.013-4.197.211-5.79 1.304-1.402.962-2.702 2.558-3.93 4.975-1.626 3.199-3.607 5.247-5.953 6.373-1.962.942-3.55 1.14-6.574 1.134H1z' fill='%23fff'/%3E%3C/svg%3E");
      background-position: 50%;
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 15px 0px 0px 15px;
      cursor: pointer;
      background-repeat: no-repeat;
  }
  #fade_out_btn{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.1' d='M24 20c.552 0 1-.446 1-.998v-4.215a1 1 0 00-1-1h-.294c-2.74.005-4.094-.163-5.705-.937-1.931-.927-3.601-2.653-5.035-5.476-1.37-2.697-2.882-4.55-4.583-5.718C6.36.267 4.726-.014 1.453.001H1a1 1 0 00-1 1V19.01c0 .552.448.99 1 .99h23z' fill='%23fff'/%3E%3Cpath d='M24 15.787a1 1 0 100-2h-.294c-2.74.005-4.094-.163-5.705-.937-1.931-.927-3.601-2.653-5.035-5.476-1.37-2.697-2.882-4.55-4.583-5.718C6.36.267 4.726-.014 1.453.001H1a1 1 0 100 2h.462c2.893-.013 4.197.211 5.79 1.304 1.402.962 2.702 2.558 3.93 4.975 1.626 3.199 3.607 5.247 5.953 6.373 1.962.942 3.55 1.14 6.574 1.134H24z' fill='%23fff'/%3E%3C/svg%3E");
      background-position: 50%;
      display: block;
      border-radius: 0px 15px 15px 0px;
      width: 50px;
      height: 50px;
      cursor: pointer;
      background-repeat: no-repeat;
  }
  button:focus{
   outline:none !important;
   }
  
  timeline{
    color:white !important;
  }
  .btn-active {
      background-color: rgba(0,0,0,.25);
      border-radius: 15px;
      box-sizing: border-box;
      height: 60px;
      line-height: normal;
      padding: 10px 26px;
      border: none;
      color: #fff;
      font-weight: 600;
      font-family: Open Sans,sans-serif !important;
  }
  .feat {
   display: flex;
   width: 100%;
   flex-direction: column;
   color: white;
   height: 230px;
   --fc: white;
   justify-content:center;
  }
  .full-screen-box .feat{
    height: 100vh;
    background: rgb(21, 21, 25) !important;
    justify-content:unset !important;
  }
  #bar1{
    display: flex;justify-content: space-between; width:100%;
    align-items: center;
    margin-bottom: 10px;
  }
  
  #play_btn{
      height: 50px;
      width:auto;
      margin:0px !important;
      background-color: transparent;
      border-radius: 15px;
      box-sizing: border-box;
      line-height: normal;
      padding: 8px 16px;
      border: none;
      color: #fff;
      font-weight: 600;
      font-family: Open Sans,sans-serif !important;
      margin-right: 30px;
      transition: all .15s;
  }
  
  .ply{
    background-color: var(--bg) !important;
  
    margin-top: 30px;
    background-color: red;
    border-style: none;
    padding:4% 5% 0 5%;
    padding: auto
  }
  button::-moz-focus-inner {
    border: 0;
  }
  
  button:active {
    background-color: var;
  }
  
  button:hover {
      opacity: 70%;
      border-color: --var(cl);
      background-color: --var(cl) !important;
  }
  
  #filters_panel{
    background-color: rgba(0,0,0,.25);
      border-radius: 15px;
      box-sizing: border-box;
  }
  
  .t-1 {
      display: flex;
      justify-content: center;
  
      background-color: white;
      padding-bottom: 1rem;
      border-style: solid;
      border-width:0px;
      border-radius: 10px;
  }
  .end{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end
  }
  
  .btn-success{
      background-color: red !important;
  }
  
  .new-block {
      width: 24%;
      font-size: 1rem;
  }
  
  .nbtn {
      padding: 7%;
      border-style: solid;
      border-radius: 10px;
  }
  
  
  .new-btn {
      padding:4% 5% 0 5%;
      border-style: solid;
      border-radius: 10px;
  }
  
  .pl-3 {
      margin-top: 1rem;
      width:85%;
      display: flex;
      justify-content: space-between !important;
      flex-direction: row;
  }
  
  
  .Button {
  
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1.2rem;
    position: relative;
    background-color: white;
    border: none;
    color: var(--fc) !important;
    padding: 1rem;
    text-align: center;
    transition-duration: 0.4s;
    overflow: hidden;
    border-radius: 15px;
  
  }
  
  .features{
    margin-top: 10px;
    display: flex;
    align-items: center !important;
    justify-content: space-between;
  }
  
  .allf{
    background-color: rgba(0,0,0,.25);
    display: flex;
    color:white !important;
    align-items: center;
    justify-content: center;
    margin: 20px 0px 20px 0px;
    border-radius: 15px;
    padding: 3px;
    
  }
  
  
  
  .ft{
    opacity: 0%;
    cursor:pointer !important;
    text-align: center;
  display: flex;
    flex-direction: row;
    padding-bottom: 10px;
    margin-right: 100px
    align-items: center;
    justify-content: center;
    width: 45px;
    border-style: solid
    border-radius: 0px;
    color: white !important;
  }
  
  .button {
    align-items: center;
    height: 50px;
    width: 100px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1.2rem;
    position: relative;
    background-color: white;
    border: none;
    color: black !important;
    padding: 1rem;
    text-align: center;
    transition-duration: 0.4s;
    overflow: hidden;
    border-radius: 15px;
  }
  
  .button:hover {
    background: #fff;
    box-shadow: 0px 1px 3px 2px white;
    color: #000;
  }
  
  .button:after {
    content: "";
    background: var(--fc);
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
  }
  
  .button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
  }
  
  .button:focus { outline:0; }
  
  
  #slider {
      display: table-cell;
      vertical-align: middle;
  }
  
  .knob {
      display: contents;
      color: white;
      background-color: red !important;
  
  }
  
  .filter-buttons {
      width: 134px;
      height: 52px;
  }
  
  #waveform {
      position: relative;
      border-radius: 10px !important;
  }
  
  
  #waveform-timeline {
      color: white;
      margin-bottom: 2rem;
  }
  #select_sample {
      text-align: center;
      color: white;
      margin-right: auto;
      margin-left: auto;
      width: 60%;
  }
  
  .down {
      /*display: flex;*/
      justify-content: end;
    align-items: center;
    margin-bottom: 15px;
  }
  .knob-name {
      font-size: 1rem !important;
  }
  .help-modal-text {
      font-size: 24px;
      font-weight: bold;
  }
  @media screen and (max-width: 800px) {
      .new-block {
          width:45%;
      }
  
      .eq-b{
        width: 20%;
        margin-bottom: 20px;
      }
  
      #equalizer input{
        margin-bottom: 2px !important;
      }
  
  
      #select_sample {
          width: 90%;
          margin-right: 5%;
          margin-left: 5%;
      }
  }
  
  
  @media screen and (max-width: 650px) {
  
  
  
      .new-block {
          width: 90%;
          font-size: 1rem;
      }
  
      .between2{
        width:100%;
        padding-left: 0px;
        padding-right: 0px;
      }
  
      #select_sample {
          text-align: center;
          color: white;
          margin-right: 20%;
          margin-left: 20%;
          min-width: 100% !important;
      }
  
      #bar1{
        flex-direction: column;
      }
  
  
  
  
      #select_sample {
          width: 100%;
          margin-right: 0%;
          margin-left: 0%;
      }
  
      .InputButton{
        width: 140px !important;
        height: 70px !important;
      }
      .down {
        display: flex;
        flex-direction: column;
      }
  
      .between {
       
        margin: 20px 0px !important;
        width:100%;
      }
      #play_pause {
        width: 100% !important;
      }
      #play_btn {
        width: 100% !important;
      }
      #dn {
        width: 100% !important;
      }
      #export1{
        width: 100% !important;
      }
  
  
  
  }
  @media screen and (max-width: 450px) {
      .Button {
          text-align:left;
      }
    .allf{
      width:-webkit-fill-available;
      width: -moz-available;
    }
    .features{
      flex-direction: column;
    }
  }
  #progress{
     width: 112px;
    height: 70px;
    margin: auto;
    margin-left: auto;
  }
  #progress:before,
  #progress:after{
    display: table;
    content: "";
  }
  #progress:after{
    clear: both;
  }
  #progress .finger{
    float: left;
    margin: 0 2px 0 0;
    width: 20px;
    height: 100%;
  }
  #progress .finger-1{
    animation: finger-1-animation 2s infinite ease-out;
  }
  #progress .finger-2{
    animation: finger-2-animation 2s infinite ease-out;
  }
  #progress .finger-3{
    animation: finger-3-animation 2s infinite ease-out;
  }
  #progress .finger-4{
    animation: finger-4-animation 2s infinite ease-out;
  }
  
  #progress .finger-item{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 8px 8px;
    background-clip: padding-box;
    background: #fff;
  }
  #progress .finger-item span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 5px 5px 0 5px;
  }
  #progress .finger-item span:before,
  #progress .finger-item span:after{
    content: "";
    position: relative;
    display: block;
    margin: 0 0 2px 0;
    width: 100%;
    height: 2px;
    background: var(--fc);
  }
  #progress .finger-item i{
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 14px;
    height: 14px;
    border-radius: 10px 10px 7px 7px;
    background-clip: padding-box;
    background: var(--fc);
  }
  #progress .last-finger{
    position: relative;
    float: left;
    width: 24px;
    height: 100%;
    overflow: hidden;
  }
  #progress .last-finger-item{
    position: absolute;
    right: 0;
    top: 32px;
    width: 110px;
    height: 20px;
    border-radius: 0 5px 14px 0;
    background: #fff;
    background-clip: padding-box;
    animation: finger-5-animation 2s infinite linear;
  }
  #progress .last-finger-item i{
    position: absolute;
    left: 0;
    top: -8px;
    width: 22px;
    height: 8px;
    background: #fff;
    overflow: hidden;
  }
  #progress .last-finger-item i:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 20px;
    border-radius: 0 0 15px 15px;
    background-clip: padding-box;
    background-clip: var(--fc);
  }
  
  @keyframes finger-1-animation{
    0%{
      padding: 12px 0 5px 0;
    }
    20%{
      padding: 12px 0 5px 0;
    }
    29%{
      padding: 4px 0 24px 0;
    }
    35%{
      padding: 4px 0 24px 0;
    }
    41%{
      padding: 12px 0 5px 0;
    }
    100%{
      padding: 12px 0 5px 0;
    }
  }
  
  @keyframes finger-2-animation{
    0%{
      padding: 6px 0 2px 0;
    }
    24%{
      padding: 6px 0 2px 0;
    }
    33%{
      padding: 2px 0 16px 0;
    }
    39%{
      padding: 2px 0 16px 0;
    }
    45%{
      padding: 6px 0 2px 0;
    }
    100%{
      padding: 6px 0 2px 0;
    }
  }
  @keyframes finger-3-animation{
    0%{
      padding: 0 0 0 0;
    }
    20%{
      padding: 0 0 0 0;
    }
    37%{
      padding: 0 0 12px 0;
    }
    43%{
      padding: 0 0 12px 0;
    }
    49%{
      padding: 0 0 0 0;
    }
    100%{
      padding: 0 0 0 0;
    }
  }
  @keyframes finger-4-animation{
    0%{
      padding: 8px 0 3px 0;
    }
    32%{
      padding: 8px 0 3px 0;
    }
    41%{
      padding: 4px 0 20px 0;
    }
    47%{
      padding: 4px 0 20px 0;
    }
    53%{
      padding: 8px 0 3px 0;
    }
    100%{
      padding: 8px 0 3px 0;
    }
  }
  @keyframes finger-5-animation{
    0%{
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
    34%{
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
    43%{
      top: 20px;
      right: 2px;
      border-radius: 0 8px 20px 0;
      background-clip: padding-box;
      transform: rotate(-12deg);
    }
    50%{
      top: 20px;
      right: 2px;
      border-radius: 0 8px 20px 0;
      background-clip: padding-box;
      transform: rotate(-12deg);
    }
    60%{
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
    100%{
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
  }
  .boxes {
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 15px 24px;
    height: 54px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #000;
  }
  .boxes svg,
  #dropbox svg,
  #filepicker svg {
    height: 24px !important;
    width: 24px !important;
  }
  .file-pick-dropdown {
    color: #000;
    cursor: pointer;
    display: inline-flex;
    background: #fff;
    height: 54px;
    border-left: 1px solid rgba(95, 88, 88, 0.75);
    padding: 13px 20px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    align-items: center;
    position: relative;
  }
  .file-pick-dropdown i {
    margin: 0;
  }
  .file-picker-dropdown {
    width: 221px;
    position: absolute;
    background: #fff;
    top: 111%;
    right: 0px;
    display: none;
    box-shadow: rgb(26 26 26 / 20%) 0px 0px 12px;
    border-radius: 4px;
  }
  .arrow-sign {
    font-size: 18px;
  }
  .file-picker-dropdown svg {
    height: 24px;
    width: 24px;
  }
  .file-picker-dropdown button,
  .file-picker-dropdown a {
    border: none;
    width: 100%;
    border-radius: 4px;
    text-align: left;
    background: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding: 15px 24px;
    list-style: none;
    height: 54px;
  }
  .file-picker-dropdown button:hover {
    background: #e9e4e4;
  }
  #downloadButton svg {
    height: 25px;
  }
  .full-screen-box{
    background-color: #111218 !important;
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 30px auto !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    z-index: 10 !important;
  }
  .full-screen-box .inner-box{
    border: none;
    padding: 0px;
  }
  
  .download-panel{
    color: #bababc;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 28%);
      border-top: 1px solid #151519;
      background: #202024;
      min-height: 84px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0px 41px !important;
  }
  .fade-cont ,.t-input-cont ,.t-input-cont{
    padding: 30px 20px; 
    border-top: 1px solid #e0e2e4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bababc;
    border-top: 1px solid #151519;
    background: #202024;
  }
  .cut-cont{
   height: 35%;
   display: flex;
   align-items: center;
   justify-content: center;
  }
   .t-input-cont{
    height: 45%;
  }
  .fade-cont{
    height: 20%;
  }
  #fade_rev_cut{
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
  }
  .input-box-cont{
    background-color: transparent;
    border: 1px solid #575759;
    color: #bababc;
    border-radius: 4px;
    padding: 6px 10px 6px;
    font-weight: 400;
    font-size: 15px;
  }
  #waveform{
    background-color: #0B0B0E;
  }
  .wavesurfer-handle-start,.wavesurfer-handle-end{
    position: absolute !important;
    z-index: 1 !important;
    width: 11px !important;
    background-color: #feca28 !important;
    cursor: ew-resize;
    height: 101% !important;
    top: -1px  !important;
  }
  .wavesurfer-handle-end{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .wavesurfer-handle-start{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .wavesurfer-handle-start::before , .wavesurfer-handle-end::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 4px;
    margin-top: -6px;
    width: 3px;
    height: 12px;
    border-radius: 1px;
    background-color: rgba(0,0,0,.25);
  }
  .wavesurfer-region{
    border-top:2px solid #feca28 !important;
    border-bottom:2px solid #feca28 !important;
    border-radius: 4px !important;
    z-index: 999 !important;
  }
  .editor-cont{
    padding: 0px 85px;
  }
  wave::-webkit-scrollbar {
    height: 8px;
    display: none;
  }
   
  wave::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    width: 8px;
    border-radius: 10px;
    display: none;
  }
  wave::-webkit-scrollbar-thumb {
    background-color: black;
    outline: 1px solid slategrey;
    display: none;
  }
  #wave-display{
    height: 580px !important;
    overflow-y: auto !important;
  }
  #lower_container{
    height: 580px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #box{
    margin:20px 190px;  
    padding: 15px;
  }
  .fade-label{
  display: none;
  }
  .inner-box{
    border: 1px dashed rgba(0,0,0,.15);
    background: rgba(0,0,0,.1);
    padding: 40px;
  }
  #wave-display::-webkit-scrollbar {
    background: #000;
      width: 8px;
  }
   
  #wave-display::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    width: 8px;
    border-radius: 10px;
  }
  #wave-display::-webkit-scrollbar-thumb {
    background-color: #202024;
    /* outline: 1px solid slategrey; */
    /* display: none; */
    border: 1px solid #000;
    border-radius: 4px;
  }
  .irs--modern .irs-min, .irs--modern .irs-max{
    background: transparent !important;
  }
  @media (max-width:992px) {
    #box{
      margin:20px 100px;  
    }
    .full-screen-box{
      position: relative !important;
      height: auto !important;
      max-height: none !important;
      margin: 15px auto !important;
      border-radius: 12px !important;
    }
    .editor-cont{
     margin-top: 0 !important;
     padding: 0px 30px;
    }
    .download-panel{
      position: relative !important;
      bottom: auto !important;
      width: 100% !important;
    }
    .right-panel-options{
      margin-bottom: 92px;
    }
    .fade-cont{
        height: 129px;
     }
     #wave-display{
       height: auto !important;
     }
     .t-input-cont{
      height: 150px;
    }
     .download-panel .download-cont{
       margin-top: 20px;
     }
     #lower_container{
       height: auto !important;
       margin-bottom: 100px;
     }
     #fades{
       gap: 20px;
     }
     #fade_in_btn,#fade_out_btn{
       border-radius: 0px;
       width: 60px;
     }
     .fade-label{
      display: block;
      margin-bottom: 4px;
      }
  }
  #download-button .spinner-border{
    width: 1.5rem;
    height: 1.5rem;
  }
  @media (max-width:768px) {
  #box {
    margin: 20px 24px;
  }
  .boxes{font-size: 13px;}
  }
  .download-dropdown-menu{
    background: #36363b;
    padding: 0;
    margin: 0;
    transform: translate3d(0px, -94px, 0px) !important;
    min-width: 143px;
    bottom: unset !important;
  }
  .download-dropdown{
    display: flex;
    flex-direction: column;
    padding: 0px 0px 7px 0;
    margin-bottom: -7px;
    bottom: 10px;
    font-size: 15px;
  }
  .download-dropdown button{
    background: transparent;
    border: none;
    color: #fff;
    border-radius: 0;
    padding: 8px 0px;
    text-transform: uppercase;
  }
  .download-dropdown button:hover{
    background:#424247 ;
    color: #fff;
  }
  .download-cont{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00; /* Red */
  }
  .tooltip-main {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-weight: 700;
    background: #f3f3f3;
    border: 1px solid #737373;
    color: #737373;
    margin: 4px 121px 0 5px;
    float: right;
    text-align: left !important;
  }
  
  .tooltip-main {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-weight: 700;
    background: #f3f3f3;
    border: 1px solid #737373;
    color: #737373;
    margin: 4px 121px 0 5px;
    z-index: 9999999999;
    float: right;
    text-align: left !important;
  }
  
  .tooltip-qm {
    float: left;
    z-index: 9999999999;
  
    margin: -2px 0px 3px 4px;
    font-size: 12px;
  }
  
  .tooltip-inner {
    z-index: 9999999999;
  
    background: #FFFFFF;
    color: rgba(0, 0, 0, .7);
  }
  
  .tooltip.show {
    z-index: 9999999999;
  
    opacity: 1;
  }
  
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #FFFFFF;
    /* Red */
  }
  #h1-panel img{
    height: 20px;
    margin-top: 3px;
  }
  #h1-panel h1{
    font-size: 20px;
    margin-left: 5px;
  }
  .download-modal-container {
    position: fixed;
    display: none;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: #00000085;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
  }
  #download-modal {
    height: 250px;
    width: 500px;
    max-width: 100%;
    background: #404040;
    color: #d9d9d9;
    -webkit-box-shadow: 0 0 0 1px rgb(0 0 0 / 30%), 0 4px 24px rgb(0 0 0 / 20%);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 30%), 0 4px 24px rgb(0 0 0 / 20%);
    border-radius: 3px;
  }
  .download-modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 42px;
    align-items: center;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid #212121;
    background-color: #4d4d4d;
    padding: 0px 14px;
  }
  .download-modal-header svg {
    fill: #d9d9d9;
    height: 20px;
    width: 20px;
    cursor: pointer;
  }
  .download-modal-body {
    padding: 30px 16px 16px 16px;
  }
  .download-modal-body p {
    color: #fff;
    font-size: 17px;
    text-align: center;
    margin-top: 19px;
  }
  .lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  
  .feature-content-box {
     max-width: 100% !important;
    }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .recording-msg{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
  }
  .resume{
    background-color: #1b2fe7;
    border-radius: 50% !important;
    padding: 20px 24px !important;
    margin-left: 12px;
    height: 52px;
    width: 52px;
    padding: 1rem 21px !important;
  }
  @media (max-width:768px){
  .wrapper{
   margin: 0 20px;
   width: 100%;
  }
  }

  /* Custom premium enhancements for recorder UI */
  #stopwatch {
      font-family: 'Outfit', 'Inter', -apple-system, sans-serif !important;
      font-weight: 800;
      font-size: 3.5rem !important;
      letter-spacing: 0.05em;
      color: #1A2EE7;
      text-shadow: 0 4px 12px rgba(26, 46, 231, 0.15);
      margin: 15px 0;
  }

  #buttons button {
      font-family: 'Outfit', 'Inter', sans-serif !important;
      font-weight: 600;
      font-size: 1.1rem !important;
      border-radius: 50px !important; /* Premium rounded pill */
      padding: 12px 35px !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      color: #ffffff !important;
  }

  #buttons button svg {
      fill: #ffffff !important;
      width: 18px;
      height: 18px;
      margin-right: 8px;
      transition: transform 0.3s ease;
  }

  #buttons button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
  }

  #buttons button:hover svg {
      transform: scale(1.1);
  }

  .recording-msg {
      font-family: 'Outfit', 'Inter', sans-serif !important;
      font-weight: 600;
      letter-spacing: 0.1em;
      color: #ff4757 !important; /* Beautiful premium red */
      animation: pulse 1.5s infinite;
      text-shadow: 0 0 10px rgba(255, 71, 87, 0.3);
  }

  @keyframes pulse {
      0% { opacity: 0.6; }
      50% { opacity: 1; }
      100% { opacity: 0.6; }
  }

  /* 123apps / online-voice-recorder.com style circular recorder UI */
  .record-center-container {
      width: 100%;
      height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0;
      position: relative;
  }

  .mic-ripple-container {
      position: relative;
      width: 160px;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .record-circle-btn {
      width: 110px;
      height: 110px;
      border-radius: 50% !important;
      border: none !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
      z-index: 10;
      position: relative;
      padding: 0 !important;
  }

  .record-circle-btn svg {
      width: 42px;
      height: 42px;
      transition: transform 0.3s ease;
  }

  .record-circle-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  }

  .record-circle-btn:active {
      transform: scale(0.96);
  }

  .ripple-wave {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      width: 110px;
      height: 110px;
      border-radius: 50%;
      opacity: 0;
      z-index: 1;
      pointer-events: none;
      transition: all 0.3s ease;
  }

  /* Ripple animations when recording is active */
  .mic-ripple-container.active .ripple-1 {
      animation: rippleEffect 2.4s infinite linear;
  }
  .mic-ripple-container.active .ripple-2 {
      animation: rippleEffect 2.4s infinite linear 0.8s;
  }
  .mic-ripple-container.active .ripple-3 {
      animation: rippleEffect 2.4s infinite linear 1.6s;
  }

  @keyframes rippleEffect {
      0% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.5;
      }
      100% {
          transform: translate(-50%, -50%) scale(2.5);
          opacity: 0;
      }
  }

  /* Minimalist Cut UI overrides for Mic Recorder - Sleek Light Theme Alignment */
  .full-screen-box:has(.tool-mic-recorder) {
      background-color: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
  }

  .full-screen-box .feat.tool-mic-recorder {
      height: auto !important;
      min-height: unset !important;
      background: #ffffff !important; /* Premium clean white background matching theme */
      justify-content: unset !important;
      position: relative !important;
  }

  .feat.tool-mic-recorder {
      height: auto !important;
      background: #ffffff !important;
      justify-content: unset !important;
      position: relative !important;
  }

  /* Hide options and tabs menus completely */
  .tool-mic-recorder #menu,
  .tool-mic-recorder .down {
      display: none !important;
  }

  /* Full-width waveform display */
  .tool-mic-recorder #wave-display {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      height: auto !important;
      overflow-y: visible !important;
  }

  /* Re-adjust waveform card padding to expand waveform full-width */
  .tool-mic-recorder .editor-cont {
      padding: 0px 25px 30px 25px !important;
  }

  .tool-mic-recorder #waveform {
      background-color: #eef7fc !important; /* Soft premium light pastel blue waveform track */
      border: 1px solid rgba(26, 46, 231, 0.1) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      margin-bottom: 10px !important;
  }

  .tool-mic-recorder #wave-timeline {
      margin-bottom: 25px !important;
      filter: invert(1) !important; /* Smart invert to make timeline text/notches dark grey */
      opacity: 0.8 !important;
  }

  /* Position right panel (holding Reset/X button) absolutely at top right */
  .tool-mic-recorder .col-lg-4 {
      position: absolute !important;
      top: 25px !important;
      right: 25px !important;
      width: auto !important;
      height: auto !important;
      background-color: transparent !important;
      z-index: 100 !important;
  }

  .tool-mic-recorder #lower_container {
      height: auto !important;
      background-color: transparent !important;
  }

  .tool-mic-recorder #right-panel-options {
      height: auto !important;
      background-color: transparent !important;
  }

  .tool-mic-recorder .t-input-cont,
  .tool-mic-recorder .fade-cont {
      display: none !important;
  }

  .tool-mic-recorder .cut-cont {
      padding: 0 !important;
      background: transparent !important;
  }

  /* Style Reset button as a premium "X" Close/Reset button at top right */
  .tool-mic-recorder #undo_get_selection_btn {
      background: rgba(0, 0, 0, 0.05) !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 50% !important;
      width: 36px !important;
      height: 36px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      color: transparent !important;
      position: relative !important;
      padding: 0 !important;
      outline: none !important;
  }

  .tool-mic-recorder #undo_get_selection_btn * {
      display: none !important;
  }

  .tool-mic-recorder #undo_get_selection_btn::before,
  .tool-mic-recorder #undo_get_selection_btn::after {
      content: '' !important;
      position: absolute !important;
      width: 14px !important;
      height: 2px !important;
      background-color: #202024 !important; /* Dark charcoal X mark */
      top: 50% !important;
      left: 50% !important;
  }

  .tool-mic-recorder #undo_get_selection_btn::before {
      transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .tool-mic-recorder #undo_get_selection_btn::after {
      transform: translate(-50%, -50%) rotate(-45deg) !important;
  }

  .tool-mic-recorder #undo_get_selection_btn:hover {
      background: rgba(0, 0, 0, 0.1) !important;
      transform: scale(1.08) !important;
  }

  /* Style H1 panel title */
  .tool-mic-recorder #h1-panel {
      display: flex !important;
      align-items: center !important;
      margin-bottom: 25px !important;
      gap: 12px !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
      padding-bottom: 15px !important;
      padding-right: 50px !important; /* Keep space clear for top-right close button */
  }

  .tool-mic-recorder #h1-panel img {
      width: 24px !important;
      height: 24px !important;
      filter: none !important; /* Keep original color */
  }

  .tool-mic-recorder #h1-panel h1 {
      font-family: 'Outfit', 'Inter', sans-serif !important;
      font-weight: 600 !important;
      font-size: 1.5rem !important;
      color: #202024 !important; /* Dark text matching theme */
      margin: 0 !important;
  }

  /* Circular dark Play button common style */
  .tool-mic-recorder #play_btn {
      background-color: #202024 !important; /* Dark charcoal circle */
      color: #ffffff !important;
      border: none !important;
      border-radius: 50% !important;
      width: 50px !important;
      height: 50px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      font-size: 0 !important;
      padding: 0 !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
  }

  .tool-mic-recorder #play_btn i {
      font-size: 16px !important;
      margin: 0 !important;
      color: #ffffff !important;
  }

  .tool-mic-recorder #play_btn:hover {
      background-color: #333338 !important;
      transform: scale(1.08) !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  }

  /* Solid Save/Download button common style */
  .tool-mic-recorder #download-button {
      background-color: var(--fc, #1A2EE7) !important; /* Solid theme colored button */
      color: #ffffff !important; /* White text */
      border: none !important;
      border-radius: 50px !important;
      padding: 12px 35px !important;
      font-family: 'Outfit', 'Inter', sans-serif !important;
      font-weight: 600 !important;
      font-size: 1.1rem !important;
      box-shadow: 0 4px 15px rgba(26, 46, 231, 0.2) !important;
      cursor: pointer !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      text-transform: none !important;
  }

  .tool-mic-recorder #download-button:hover {
      transform: translateY(-2px) !important;
      opacity: 0.95 !important;
      box-shadow: 0 6px 20px rgba(26, 46, 231, 0.3) !important;
  }

  .tool-mic-recorder #download-button::after {
      display: none !important;
  }

  /* Beautiful dropup menu for Save format selections - Light Theme */
  .tool-mic-recorder .download-dropdown-menu {
      background-color: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 12px !important;
      padding: 8px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
      min-width: 120px !important;
      position: absolute !important;
      top: auto !important;
      bottom: calc(100% + 8px) !important;
      right: 0 !important;
      left: auto !important;
      margin: 0 !important;
      transform: none !important;
      display: none; /* Controlled by display toggler */
  }

  .tool-mic-recorder .download-dropdown {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
  }

  .tool-mic-recorder .dropb {
      background: transparent !important;
      border: none !important;
      color: #202024 !important;
      padding: 8px 16px !important;
      text-align: center !important;
      font-family: 'Outfit', 'Inter', sans-serif !important;
      font-weight: 500 !important;
      font-size: 0.95rem !important;
      border-radius: 6px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      text-transform: uppercase !important;
      width: 100% !important;
  }

  .tool-mic-recorder .dropb:hover {
      background-color: var(--fc, #1A2EE7) !important;
      color: #ffffff !important;
  }

  /* Cyan Drag handles & selection borders for WaveSurfer regions */
  .tool-mic-recorder .wavesurfer-handle-start,
  .tool-mic-recorder .wavesurfer-handle-end {
      background-color:#1B2FE7!important;
      width: 10px !important;
  }

  .tool-mic-recorder .wavesurfer-handle-start::before,
  .tool-mic-recorder .wavesurfer-handle-end::before {
      background-color: rgba(0, 0, 0, 0.3) !important;
  }

  .tool-mic-recorder .wavesurfer-region {
      border-top: 2px solid #1B2FE7 !important;
      border-bottom: 2px solid #1B2FE7 !important;
      background-color: rgba(0, 210, 255, 0.15) !important;
  }

  /* RESPONSIVE LAYOUT RULES */

  /* Desktop layouts */
  @media (min-width: 768px) {
      .feat.tool-mic-recorder {
          padding-bottom: 75px !important; /* Space for bottom controls */
      }

      .tool-mic-recorder #play_btn {
          position: relative !important;
          bottom: auto !important;
          left: auto !important;
          margin: 18px auto 12px auto !important;
          z-index: 10 !important;
      }

      .tool-mic-recorder #download-panel {
          position: absolute !important;
          bottom: 15px !important;
          right: 25px !important;
          width: auto !important;
          background-color: transparent !important;
          border: none !important;
          box-shadow: none !important;
          min-height: unset !important;
          padding: 0 !important;
          z-index: 100 !important;
      }

      .tool-mic-recorder .download-cont {
          background-color: transparent !important;
          padding: 0 !important;
      }
  }

  /* Mobile & Tablet layouts (Natural stacked flow to prevent overlaps) */
  @media (max-width: 767px) {
      .feat.tool-mic-recorder {
          padding-bottom: 25px !important;
      }

      .tool-mic-recorder #play_btn {
          position: relative !important;
          bottom: auto !important;
          left: auto !important;
          margin: 20px auto 15px auto !important; /* Center-aligned below timeline */
          z-index: 10 !important;
      }

      .tool-mic-recorder #download-panel {
          position: relative !important;
          bottom: auto !important;
          right: auto !important;
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          margin-top: 10px !important;
          background-color: transparent !important;
          border: none !important;
          box-shadow: none !important;
          min-height: unset !important;
          padding: 0 !important;
          z-index: 10 !important;
      }

      .tool-mic-recorder .download-cont {
          background-color: transparent !important;
          padding: 0 !important;
          width: 100% !important;
          display: flex !important;
          justify-content: center !important;
      }

      .tool-mic-recorder #download-button {
          width: 100% !important; /* Full width touch target on mobile */
          max-width: 280px !important;
          text-align: center !important;
          justify-content: center !important;
      }

      .tool-mic-recorder .download-dropdown-menu {
          width: 100% !important;
          max-width: 280px !important;
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
      }
  }