.ninja-add{
position:absolute;
bottom:15px;
right:15px;
width:42px;
height:42px;
border-radius:50%;
background:#000;
color:#fff;
font-size:22px;
border:none;
cursor:pointer;
}

/* spinner */

.ninja-spinner{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
background: rgba(255, 255, 255, 0.63) !important;
}

.ninja-spinner div{
width:36px;
height:36px;
border:4px solid #93e1ee7a;
border-top:4px solid #13bdd7;
border-radius:50%;
animation:nspin 0.8s linear infinite;
}

@keyframes nspin{
to{transform:rotate(360deg)}
}


/* popup */

.ninja-popup{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.4);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:0.3s;
z-index:9999;
}

.ninja-popup.show{
opacity:1;
pointer-events:auto;
}

.ninja-popup-inner{
background:#fff;
padding:30px;
border-radius:14px;
max-width:420px;
width:90%;
}


/* toast */

.ninja-toast{
position:fixed;
left:50%;
bottom:30px;
transform:translateX(-50%);
background:#111;
color:#fff;
padding:12px 18px;
border-radius:8px;
opacity:0;
transition:.3s;
z-index:9999;
}

.ninja-toast.show{
opacity:1;
}

.ninja-toast.ok{
background:#16a34a;
}

.ninja-toast.err{
background:#dc2626;
}