html,
body {
   width: 100%;
   overflow-x: hidden;
   margin: 0;
   padding: 0;
   min-height: 100vh;
}

body {
   max-width: 1000px;
   justify-self: center;
}

@keyframes gradientMove {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.confirm {
   /*background: linear-gradient(315deg, #0d6efd 25%, #64a2ff 50%, #0d6efd 75%);*/
   background: linear-gradient(315deg, #ffc000 25%, #f4ff00b0 50%, #ffc000 75%);
   background-size: 200% 200%;
   animation: gradientMove 6s ease-in-out infinite;
}

input[type=range] {
   box-sizing: border-box;
   appearance: none;
   width: 90%;
   margin: 0;
   padding: 0 2px;
   overflow: hidden;
   border: 0;
   border-radius: 1px;
   outline: none;
   background: linear-gradient(grey, grey) no-repeat center;
   background-size: 100% 2px;
   pointer-events: none;

   &:active,
   &:focus {
      outline: none;
   }

   &::-webkit-slider-thumb {
      height: 20px;
      width: 20px;
      border-radius: 20px;
      background-color: #fff;
      position: relative;
      margin: 5px 0;
      cursor: pointer;
      appearance: none;
      pointer-events: all;
      box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);

      &::before {
         content: ' ';
         display: block;
         position: absolute;
         top: 13px;
         left: 100%;
         width: 2000px;
         height: 2px;
      }
   }
}

.multi-range {
   position: relative;
   height: 50px;

   input[type=range] {
      position: absolute;

      &:nth-child(1) {
         &::-webkit-slider-thumb::before {
            background-color: red;
         }
      }

      &:nth-child(2) {
         background: none;

         &::-webkit-slider-thumb::before {
            background-color: grey;
         }
      }
   }
}

#loading-popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   background-color: rgba(0, 0, 0, 0.8);
}

.hidden {
   display: none;
}

.title-fade {
   -webkit-mask-image: linear-gradient(90deg, #000000, #000000 80%, #ffffff00 95%);
   mask-image: linear-gradient(90deg, #000000, #000000 80%, #ffffff00 95%);
   white-space: nowrap;
   overflow: hidden;
}

#btn_add_set {
   position: fixed;
   bottom: 0;
   right: 0;
   z-index: 1050;
}

.modal {
   z-index: 9999;
}

* {
   user-select: none;
   -webkit-user-select: none;
}

#edit_set_thumbnail_bg {
   filter: blur(25px);
   transform: scale(0.90);
   z-index: 0;
   opacity: 1;
}

#edit_set_thumbnail {
   transform: scale(0.85);
   display: none;
   position: relative;
   z-index: 1;
}

#search_btn {
   background-color: #FFC000;
   color: #000;
   border-radius: 50px;
   cursor: pointer;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
   width: fit-content;
   margin: 20px auto;
   padding-left: 25px !important;
   padding-right: 25px !important;
   border: none;
   display: flex;
   align-items: center;
}

.fa-arrow-left {
   color: #FFC000;
}

.btn-soundset {
   background-color: #FFC000;
}

.nav-link.active {
   background-color: #FFC000 !important;
   color: #000 !important;
}

.form-check-input:checked {
   background-color: #FFC000 !important;
   border-color: #FFC000 !important;
}