.skeleton.svelte-mpffga {
  display: block;
  box-sizing: border-box;
  width: 100%;
  background-image: linear-gradient(
    90deg,
    var(--baseColor) 25%,
    var(--highlightColor) 37%,
    var(--baseColor) 63%
  );
  background-size: 400% 100%;
  background-repeat: no-repeat;
  background-color: var(--baseColor);
  animation: svelte-mpffga-loading-animation var(--animationLength) ease
    infinite;
}
.skeleton[hidden="true"].svelte-mpffga {
  display: none;
}
@keyframes svelte-mpffga-loading-animation {
  0% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}
@media only screen and (max-width: 600px) {
  .popup {
         width: 396px;
         height: 270px;
         position:fixed;
         z-index: 9999;
         top: 15%;
         left: 6%;
         }
 .overlay {
     
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 99;
 }

}
@media only screen and (min-width: 601px)
{
   .popup {
              position: fixed;
              width: 396px;
              height: 370px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              padding: 20px;
              z-index: 9999;
              display: none;

            }
    .overlay {
      
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 99;
      display: none;
  }

}