.borderCard {
    border-width: medium;
    border-color: var(--colorBorder);
}

@media (min-width: 768px) {
  .content-hyperus {
    margin-top: 85px;
    margin-left: 105px;
    width: auto; 
  }
}

@media (max-width: 768px) {
  .sidebar-hyperus {
    margin-top: 70px;
  }
}

@keyframes blink {
    0% {
        opacity: 1;
        scale: 1.1;
    }

    12% {
        opacity: 0.9;
        scale: 1.075;
    }

    25% {
        opacity: 0.8;
        scale: 1.05;
    }

    37% {
        opacity: 0.7;
        scale: 1.025;
    }

    50% {
        opacity: 0.6;
        scale: 1;
    }

    62% {
        opacity: 0.7;
        scale: 1.025;
    }

    75% {
        opacity: 0.8;
        scale: 1.05;
    }

    87% {
        opacity: 0.9;
        scale: 1.075;
    }

    100% {
        opacity: 1;
        scale: 1.1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
        scale: 1.1;
    }

    12% {
        opacity: 0.9;
        scale: 1.075;
    }

    25% {
        opacity: 0.8;
        scale: 1.05;
    }

    37% {
        opacity: 0.7;
        scale: 1.025;
    }

    50% {
        opacity: 0.6;
        scale: 1;
    }

    62% {
        opacity: 0.7;
        scale: 1.025;
    }

    75% {
        opacity: 0.8;
        scale: 1.05;
    }

    87% {
        opacity: 0.9;
        scale: 1.075;
    }

    100% {
        opacity: 1;
        scale: 1.1;
    }
}

.loading-skeleton {
  color: transparent;
  appearance: none;
  -webkit-appearance: none;
  background-color: #ddd;
  border-color: #ddd;
  border-radius: 10px;
  pointer-events: none;
  animation: loading-skeleton 1s infinite alternate;
  
  img {
    filter: grayscale(100) contrast(0%) brightness(1.8);
  }

  &::placeholder {
    color: transparent;
  }
}
@keyframes loading-skeleton {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

.custom-loader {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  color: #330066;
  box-shadow: 
    38px -38px 0 0px, 76px -38px 0 0px, 114px -38px 0 0px,
    38px 0     0 10px, 76px 0     0 10px, 114px 0     0 10px,
    38px 38px  0 0px, 76px 38px  0 0px, 114px 38px  0 0px;
  transform: translateX(-76px);
  animation: d6 2s infinite linear;
}

@keyframes d6 {
  12.5% {box-shadow: 
    38px -38px 0 0px, 76px -38px 0 0px, 114px -38px 0 10px,
    38px 0     0 10px, 76px 0     0 0px, 114px 0     0 10px,
    38px 38px  0 0px, 76px 38px  0 0px, 114px 38px  0 0px}
  25%   {box-shadow: 
    38px -38px 0 10px, 76px -38px 0 0px, 114px -38px 0 10px,
    38px 0     0 0px, 76px 0     0 0px, 114px 0     0 0px,
    38px 38px  0 0px, 76px 38px  0 10px, 114px 38px  0 0px}
  50%   {box-shadow: 
    38px -38px 0 10px, 76px -38px 0 10px, 114px -38px 0 0px,
    38px 0     0 0px, 76px 0     0 0px, 114px 0     0 0px,
    38px 38px  0 0px, 76px 38px  0 0px, 114px 38px  0 10px}
  62.5% {box-shadow: 
    38px -38px 0 0px, 76px -38px 0 0px, 114px -38px 0 0px,
    38px 0     0 10px, 76px 0     0 0px, 114px 0     0 0px,
    38px 38px  0 0px, 76px 38px  0 10px, 114px 38px  0 10px}
  75%   {box-shadow: 
    38px -38px 0 0px, 76px -38px 0 10px, 114px -38px 0 0px,
    38px 0     0 0px, 76px 0     0 0px, 114px 0     0 10px,
    38px 38px  0 0px, 76px 38px  0 0px, 114px 38px  0 10px}
  87.5% {box-shadow: 
    38px -38px 0 0px, 76px -38px 0 10px, 114px -38px 0 0px,
    38px 0     0 0px, 76px 0     0 10px, 114px 0     0 0px,
    38px 38px  0 10px, 76px 38px  0 0px, 114px 38px  0 0px}
}


/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #330066 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: #ffffff;
}

*::-webkit-scrollbar-thumb {
  background-color: #330066;
  border-radius: 10px;
  border: 3px solid #ffffff;
}