/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[5].oneOf[12].use[3]!./src/components/loader.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
    width: 90px;
    height: 14px;
    box-shadow: 0 2px 0 #5f696900;
    position: relative;
    clip-path: inset(-40px 0 -5px)
  }
  .loader:before {
    content: "";
    position: absolute;
    inset: auto calc(50% - 17px) 0;
    height: 50px;
    --g:no-repeat linear-gradient(#0EA5E9 0 0);
    background: var(--g),var(--g),var(--g),var(--g);
    background-size: 16px 14px;
    animation:
      l7-1 2s infinite ease-in-out,
      l7-2 2s infinite ease-in-out;
  }
  @keyframes l7-1 {
    0%,
    100%  {background-position: 0 -50px,100% -50px}
    17.5% {background-position: 0 100%,100% -50px,0 -50px,100% -50px}
    35%   {background-position: 0 100%,100% 100% ,0 -50px,100% -50px}
    52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% -50px}
    70%,
    98%  {background-position: 0 100%,100% 100% ,0 calc(100% - 16px),100% calc(100% - 16px)}
  }
  @keyframes l7-2 {
    0%,70% {transform:translate(0)}
    100%  {transform:translate(200%)}
  }