body{
  
    font-size:0.8rem;
}
body.loading{
    overflow:hidden;
}
body.loading .ball-loading{
    display:flex;
}

.ball-loading{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.4);
    z-index:var(--z-index-high);
    backdrop-filter:blur(4px);
    display:none;
}
.ball-loading .ball{
    height:20px;
    width:20px;
    border-radius:50%;
    background:var(--primary);
    animation:bounce 0.6s linear infinite;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.ball-loading .ball:nth-of-type(2){
    background:red;
    animation-delay:0.2s;
}
.ball-loading .ball:nth-of-type(3){
    background:orange;
    animation-delay:0.4s;
}
@keyframes bounce{
    0%,40%,80%,100%{
        transform:translateY(0)
    }
    40%{
        transform:translateY(30px);
    }
}
/* .notify{
   
    width:100%;
    max-width:500px;
    position:fixed;
    top:0;
    right:0;
     overflow:hidden;
   clip-path:inset(0 round 0);
   padding-bottom:10px;
   animation:trans-in-from-right 0.2s linear forwards;
   z-index:var(--z-index-highest);
    
}
.notify.success{
     background:#4caf50;
    color:white;
}
.notify.error{
     background:#e4b006;
    color:white;
}
.notify .svg{
    display:none;
}
.notify.success .svg.check{
    display:flex;
}
.notify.error .svg.error{
    display:flex;
}
.notify .bar-line{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
   height:5px;
   width:100%;
   background:rgba(255,255,255,0.4);
   overflow:hidden;
   clip-path:inset(0 round 0)

}
.notify .bar-line::before{
    content:'';
    background:white;
    height:100%;
    width:100%;
    position:absolute;
    animation:trans-out 2s linear forwards;

} */
@keyframes trans-out{
    0%{
        transform:translateX(0);
    }
     100%{
        transform:translateX(-100%)
     }
}
@keyframes trans-in-from-right{
    0%{
        right:-100%;
    }
    100%{
        right:0;
    }
}