:root {
  --bg: white;
  --cl: white;
}

#workspace{
  background-color: transparent;
}
#choose-file{
  font-size: 13px;
}
.drop-info{
  font-size: 13px;
}
#tInput input {
    background-color: transparent;
    color: #bababc;
    width: 35px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    max-width: 40px;
    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;
    height:60%;
}

/*.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;
}

.pitch-range-slider{
  background-color: var(--fg) !important;
}

.reset-b{
  display: flex;
  flex-direction:row;
    background-position: 6px;
    border-style: none;
    background-color: rgba(0, 0, 0, .25);
    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-equilizer{
  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='M3 2a1 1 0 0 0-1 1v2h2V3a1 1 0 0 0-1-1ZM2 10v7a1 1 0 1 0 2 0v-7H2ZM10 2a1 1 0 0 0-1 1v7h2V3a1 1 0 0 0-1-1ZM9 15v2a1 1 0 1 0 2 0v-2H9ZM2.5 6a1.5 1.5 0 1 0 0 3h1a1.5 1.5 0 1 0 0-3h-1ZM8 12.5A1.5 1.5 0 0 1 9.5 11h1a1.5 1.5 0 0 1 0 3h-1A1.5 1.5 0 0 1 8 12.5ZM17 2a1 1 0 0 0-1 1v2h2V3a1 1 0 0 0-1-1ZM16 10v7a1 1 0 1 0 2 0v-7h-2ZM15 7.5A1.5 1.5 0 0 1 16.5 6h1a1.5 1.5 0 0 1 0 3h-1A1.5 1.5 0 0 1 15 7.5Z'/%3E%3C/g%3E%3C/svg%3E");
    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{
  margin: auto;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  text-transform: uppercase;
  font-size: 16px;
  color: #000;
  background: #00A1FF;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

#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: center;
  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;
  border-radius: 15px;
  padding: 3px;
  min-width: 372px;
  max-width: auto;
  margin-bottom: 10px;
}

.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: 200px;
  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: var(--primary-color);
}
#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;
}
#progress .finger-item i{
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  border-radius: 10px 10px 7px 7px;
  background-clip: padding-box;
}
#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: var(--primary-color);
  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;
  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;
}

@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: rgb(0, 0, 255);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999999999;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh;
}
.full-screen-box .inner-box{
  border: none;
  padding: 0px;
}

.download-panel{
  color: #bababc;
  min-height: 84px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0px 41px !important;
  position: fixed;
  bottom: 0
}
.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;
}
.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: 50%;
  transform: translate(-50%, -50%);
  
  /* Circle Background */
  width: 20px; /* Size of the circle */
  height: 20px;
  border-radius: 50%; /* Makes it a perfect circle */
  background-color: white; /* White circle background */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Optional shadow for better visibility */
}

.wavesurfer-handle-start::after, .wavesurfer-handle-end::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* Triangle (Arrow) */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px; /* Creates the triangle */
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.8); /* Arrow color */
}

.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{
  overflow: auto;
}
#box{
  margin:0px 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:0px 100px;  
  }
  
  .editor-cont{
   margin-top: 0 !important;
   padding: 0px 30px;
   background-color: #000;
  }
  .download-panel{
    position: fixed;
    bottom: 0;
  }
  .right-panel-options{
    margin-bottom: 92px;
  }
  .fade-cont{
      height: 129px;
   }
   #wave-display{
     height: auto !important;
   }
   .cut-cont{
     height: 129px;
   }
   .t-input-cont{
    height: 150px;
  }
   .download-panel .download-cont{
     margin-top: 20px;
   }
   #lower_container{
     height: auto !important;
   }
   #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) {

  .input-box-cont{
    padding: 0px;
  }
#box {
  margin: 0px 24px;
}
.boxes{font-size: 12px;}
.choose-file{
  font-size: 12px;
}

#tInput {
  margin: 0px;
}
}
.download-dropdown-menu{
  background: #36363b;
  padding: 0;
  margin: 0;
  transform: translate3d(0px, -94px, 0px) !important;
  min-width: 143px;
}
.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;
}
#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;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#top-ad-panel{
  height: 50px;
}
#t-equilizer{
  margin-left: 28px;
}
.shareModal {
  z-index: 100000000000;
}
#workspace{
  display: none;
}

#spinner {
	display: block;
  position: absolute;
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%);
}
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's above other elements */
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Additional styling for the text */
.spinner-container p {
  margin-top: 20px;
  font-size: 18px;
  color: white; /* White text for visibility on dark overlay */
  display: block;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.spinner-msg{
  position:absolute;
  top: 66%
}

#cutter{
  flex-direction: row;
  justify-content: center;
}

@media(max-width:768px){
  #cutter{
    flex-direction: column;
  }
}

.btn-cont{
  display: flex;
  gap:20px
}