* {
    -webkit-overflow-scrolling: touch;
  }

  *::-webkit-scrollbar {
    width: 10px;
  }

  *::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #66FF66 0, #CDFF66 51%, #FFFF66 99%);
  }

  *::-webkit-scrollbar-thumb {
    opacity: 0;
    border-radius: 45px;
    box-shadow: 0px 0px 0px 100000vh #ffffff;
  }

  .scroll::-webkit-scrollbar {
    width: 5px;
    margin-right: 8px;
  }

  .scroll::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #18FF18 0, #CDFF66 51%, #FFFF66 99%);
  }

  .scroll::-webkit-scrollbar-thumb {
    opacity: 0;
    border-radius: 45px;
    box-shadow: 0px 0px 0px 100000vh #ffffff;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f1fff1 inset !important;
  }

  .select-sim div::-webkit-scrollbar {
    width: 10px;
  }

  .select-sim div::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #66FF66 0, #cDFF66 51%, #FFFF66 99%);
  }

  .select-sim div::-webkit-scrollbar-thumb {
    opacity: 0;
    border-radius: 45px;
    box-shadow: 0px 0px 0px 100000vh #ffffff;
  }

  .shadow-main:hover {
    box-shadow: 14px 12px 48px 8px #80FF66;
  }

  /*
  .shadow-main {
    --r: 50%;
    position: relative;
    border-radius: var(--r);
    transform-style: preserve-3d;
  }

  .shadow-main sh {
    position: absolute;
    inset: -150px;
    
    border-radius: calc(150px + var(--r));
    transform: translateZ(-1px)
  }

  .shadow-main sh:hover:before {
    content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--r);
  filter: blur(10px);
  transform: translate(10px,8px);
  background: linear-gradient(to right, #66FF66 0 ,  #cDFF66 51%, #FFFF66  99% ) ;
  }
  */







  .turn-main {
    animation: turn 1s linear 88;
  }




  @keyframes turn {
    1% {
      background: linear-gradient(3.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    2% {
      background: linear-gradient(7.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    3% {
      background: linear-gradient(10.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    4% {
      background: linear-gradient(14.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    5% {
      background: linear-gradient(18deg, #66FF66, #cDFF66, #FFFF66);
    }

    6% {
      background: linear-gradient(21.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    7% {
      background: linear-gradient(25.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    8% {
      background: linear-gradient(28.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    9% {
      background: linear-gradient(32.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    10% {
      background: linear-gradient(36deg, #66FF66, #cDFF66, #FFFF66);
    }

    11% {
      background: linear-gradient(39.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    12% {
      background: linear-gradient(43.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    13% {
      background: linear-gradient(46.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    14% {
      background: linear-gradient(50.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    15% {
      background: linear-gradient(54deg, #66FF66, #cDFF66, #FFFF66);
    }

    16% {
      background: linear-gradient(57.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    17% {
      background: linear-gradient(61.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    18% {
      background: linear-gradient(64.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    19% {
      background: linear-gradient(68.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    20% {
      background: linear-gradient(72deg, #66FF66, #cDFF66, #FFFF66);
    }

    21% {
      background: linear-gradient(75.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    22% {
      background: linear-gradient(79.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    23% {
      background: linear-gradient(82.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    24% {
      background: linear-gradient(86.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    25% {
      background: linear-gradient(90deg, #66FF66, #cDFF66, #FFFF66);
    }

    26% {
      background: linear-gradient(93.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    27% {
      background: linear-gradient(97.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    28% {
      background: linear-gradient(100.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    29% {
      background: linear-gradient(104.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    30% {
      background: linear-gradient(108deg, #66FF66, #cDFF66, #FFFF66);
    }

    31% {
      background: linear-gradient(111.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    32% {
      background: linear-gradient(115.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    33% {
      background: linear-gradient(118.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    34% {
      background: linear-gradient(122.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    35% {
      background: linear-gradient(126deg, #66FF66, #cDFF66, #FFFF66);
    }

    36% {
      background: linear-gradient(129.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    37% {
      background: linear-gradient(133.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    38% {
      background: linear-gradient(136.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    39% {
      background: linear-gradient(140.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    40% {
      background: linear-gradient(144deg, #66FF66, #cDFF66, #FFFF66);
    }

    41% {
      background: linear-gradient(147.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    42% {
      background: linear-gradient(151.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    43% {
      background: linear-gradient(154.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    44% {
      background: linear-gradient(158.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    45% {
      background: linear-gradient(162deg, #66FF66, #cDFF66, #FFFF66);
    }

    46% {
      background: linear-gradient(165.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    47% {
      background: linear-gradient(169.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    48% {
      background: linear-gradient(172.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    49% {
      background: linear-gradient(176.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    50% {
      background: linear-gradient(180deg, #66FF66, #cDFF66, #FFFF66);
    }

    51% {
      background: linear-gradient(183.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    52% {
      background: linear-gradient(187.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    53% {
      background: linear-gradient(190.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    54% {
      background: linear-gradient(194.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    55% {
      background: linear-gradient(198deg, #66FF66, #cDFF66, #FFFF66);
    }

    56% {
      background: linear-gradient(201.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    57% {
      background: linear-gradient(205.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    58% {
      background: linear-gradient(208.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    59% {
      background: linear-gradient(212.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    60% {
      background: linear-gradient(216deg, #66FF66, #cDFF66, #FFFF66);
    }

    61% {
      background: linear-gradient(219.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    62% {
      background: linear-gradient(223.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    63% {
      background: linear-gradient(226.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    64% {
      background: linear-gradient(230.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    65% {
      background: linear-gradient(234deg, #66FF66, #cDFF66, #FFFF66);
    }

    66% {
      background: linear-gradient(237.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    67% {
      background: linear-gradient(241.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    68% {
      background: linear-gradient(244.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    69% {
      background: linear-gradient(248.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    70% {
      background: linear-gradient(252deg, #66FF66, #cDFF66, #FFFF66);
    }

    71% {
      background: linear-gradient(255.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    72% {
      background: linear-gradient(259.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    73% {
      background: linear-gradient(262.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    74% {
      background: linear-gradient(266.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    75% {
      background: linear-gradient(270deg, #66FF66, #cDFF66, #FFFF66);
    }

    76% {
      background: linear-gradient(273.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    77% {
      background: linear-gradient(277.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    78% {
      background: linear-gradient(280.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    79% {
      background: linear-gradient(284.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    80% {
      background: linear-gradient(288deg, #66FF66, #cDFF66, #FFFF66);
    }

    81% {
      background: linear-gradient(291.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    82% {
      background: linear-gradient(295.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    83% {
      background: linear-gradient(298.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    84% {
      background: linear-gradient(302.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    85% {
      background: linear-gradient(306deg, #66FF66, #cDFF66, #FFFF66);
    }

    86% {
      background: linear-gradient(309.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    87% {
      background: linear-gradient(313.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    88% {
      background: linear-gradient(316.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    89% {
      background: linear-gradient(320.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    90% {
      background: linear-gradient(324deg, #66FF66, #cDFF66, #FFFF66);
    }

    91% {
      background: linear-gradient(327.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    92% {
      background: linear-gradient(331.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    93% {
      background: linear-gradient(334.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    94% {
      background: linear-gradient(338.4deg, #66FF66, #cDFF66, #FFFF66);
    }

    95% {
      background: linear-gradient(342deg, #66FF66, #cDFF66, #FFFF66);
    }

    96% {
      background: linear-gradient(345.6deg, #66FF66, #cDFF66, #FFFF66);
    }

    97% {
      background: linear-gradient(349.2deg, #66FF66, #cDFF66, #FFFF66);
    }

    98% {
      background: linear-gradient(352.8deg, #66FF66, #cDFF66, #FFFF66);
    }

    99% {
      background: linear-gradient(356.4deg, #66FF66, #cDFF66, #FFFF66);
    }
  }


  .shift {
    display: inline-block;
    -webkit-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-animation-name: shift;
    animation-name: shift;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 88888888;
    animation-iteration-count: 88888888;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }

  .shift::before {
    -webkit-transform: translateY(-48px);
    transform: translateY(-48px);
  }

  @-webkit-keyframes shift {
    50% {
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    }
  }

  @keyframes shift {
    50% {
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    }
  }

  .shift-2 {
    display: inline-block;
    -webkit-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-animation-name: shift-2;
    animation-name: shift-2;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 88888888;
    animation-iteration-count: 88888888;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }

  .shift-2::before {
    -webkit-transform: translateX(-48px);
    transform: translateX(-48px);
  }

  @-webkit-keyframes shift-2 {
    50% {
      -webkit-transform: translateX(4px);
      transform: translateX(4px);
    }
  }

  @keyframes shift-2 {
    50% {
      -webkit-transform: translateX(4px);
      transform: translateX(4px);
    }
  }

  .count1 {
    display: flex;
    width: 600px;
  }

  .count1__dist {
    width: 45%;
  }

  .count1__val {


    border-right: #d8d8d8 1px solid;
  }

  .count1__dist [type="range"] {
    width: 100%;
    -webkit-appearance: none;
    height: 14px;
    border-radius: 12px;
    background: #f1f1f1;
    outline: none;
    padding: 0;
    margin: 0;
  }

  /* custom thum */
  .count1__dist [type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ccff89;
    border: #d8d8d880 8px solid;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;

    box-shadow: 1px 1px 1px 18px #d8d8d880;
  }

  .count1__dist [type="range"]::-webkit-slider-thumb:hover {
    background: #ccff9288;
  }

  .count1__dist [type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ccff89;
    border: #d8d8d880 8px solid;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;

    box-shadow: 1px 1px 1px 18px #d8d8d880;
  }

  .count1__dist [type="range"]::-moz-range-thumb:hover {
    background: #ccff9288;
  }

  .count2 {
    display: flex;
    width: 600px;
  }

  .count2__distD {
    width: 45%;
  }

  .count2__val {


    border-right: #d8d8d8 1px solid;
  }

  .count2__distD [type="range"] {
    width: 100%;
    -webkit-appearance: none;
    height: 14px;
    border-radius: 12px;
    background: #f1f1f1;
    outline: none;
    padding: 0;
    margin: 0;
  }

  /* custom thum */
  .count2__distD [type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ccff89;
    border: #d8d8d880 8px solid;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;

    box-shadow: 1px 1px 1px 18px #d8d8d880;
  }

  .count2__distD [type="range"]::-webkit-slider-thumb:hover {
    background: #ccff9288;
  }

  .count2__distD [type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ccff89;
    border: #d8d8d880 8px solid;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;

    box-shadow: 1px 1px 1px 18px #d8d8d880;
  }

  .count2__distD [type="range"]::-moz-range-thumb:hover {
    background: #ccFF8988;
  }

  /* remove border */
  input::-moz-focus-inner,
  input::-moz-focus-outer {
    border: 0;
  }

  /* Audio range themed to color-main */
.audio-progress {
  accent-color: var(--color-main, #5fff8f); /* fallback if CSS vars available */
}

/* WebKit (Chrome/Safari/Edge) */
.audio-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--color-main, #5fff8f);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
  margin-top: -5px;
}
.audio-progress::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
      to right,
      var(--color-main, #5fff8f) 0%,
      var(--color-main, #5fff8f) var(--fill, 50%),
      #e5e7eb var(--fill, 50%),
      #e5e7eb 100%
  );
}

/* Firefox */
.audio-progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--color-main, #5fff8f);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}
.audio-progress::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
}
.audio-progress::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--color-main, #5fff8f);
}