.spinner {
     width: 34px;
     --b: 4px;
     aspect-ratio: 1;
     border-radius: 50%;
     padding: 1px;
     background: conic-gradient(#0000 10%, rgba(255, 255, 255, 1)) content-box;
     -webkit-mask:
         repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
         radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
     -webkit-mask-composite: destination-in;
     mask-composite: intersect;
     animation: s4 1s infinite steps(10);
 }

 @keyframes s4 {
     to {
         transform: rotate(0.31turn);
     }
 }

 /*=============POPUP=============*/

 .message-info {
     padding: 10px;
     color: #fff;
     visibility: hidden;
     opacity: 0;
     transform: translateX(-50%) scale(.8);
     transition: all 0.2s;
     border-left: 8px solid #20509e;
     position: fixed;
     width: auto;
     left: 44%;
     top: 2%;
     z-index: 1000;
     right: 32%;
 }

 .message-log {
     padding: 10px;
     color: #fcfcfc;
     visibility: hidden;
     border-left: 8px solid #20509e;
     opacity: 0;
     transform: translateX(-50%) scale(.8);
     transition: all 0.2s;
 }

 .message-log.visible {
     visibility: visible;
     opacity: 1;
     transform: scale(1);
 }

 .message-info.visible {
     visibility: visible;
     opacity: 1;
     transform: scale(1);
 }

 .success {
     background-color: rgba(108, 192, 73, 1);

 }

 .error {
     background-color: rgba(151, 43, 43, 1);
 }

 button:disabled {
     cursor: not-allowed;
     background: rgba(91, 91, 91, 1);
 }