:root{
    --rtl__font:"Noto Kufi Arabic";
    --ltr__font:"Ropa Sans";
    --rtl__fs:12px;
    --ltr__fs:16px;
    --rds:17px;
    --cP:rgb(0, 38, 155);
    --cP2:rgb(0, 38, 155,0.1);
    --cB:rgb(255, 255, 255);
    --cF:rgb(24, 24, 24);
    --cD:rgb(132, 132, 134,0.1);
    --cS:rgb(218, 218, 218);
    --cM:rgb(153, 153, 153);
    --c0:rgb(223, 49, 43);
    --c02:rgb(223, 49, 43,0.1);
    --c1:rgb(21, 201, 132);
    --c12:rgb(52, 232, 52,0.1);
    --c2:rgb(189, 186, 17);
    --c22:rgb(189, 186, 17,0.1);
    --cBlack:rgb(0, 0, 0);
    --cWhite:rgb(255, 255, 255);
    --cBlue:rgb(64, 107, 221);
    --cGreen:rgb(2, 159, 114);
    --cPink:rgb(220, 65, 147);
    --animate-delay:0.1s;
}

.fsS{
    font-size:12px !important;
}


/* loading-bar */
.loading{width:100%; position:absolute; top:0; left:0; height:3px; border:0; border-radius:0px; overflow:hidden;}
.loading:after{content:" "; display:block; width:150px; top:-50%; height:250%; position:absolute; animation:loadingbar 2s linear infinite; z-index:2; background:var(--cP);}
@keyframes loadingbar{from{left:-120px;} to{left:100%;}}


popup{display:block; position:fixed; bottom:30px; left:50%; font-size:12px !important; transform:translateX(-50%); background-color:var(--cD); backdrop-filter:blur(10px); color:var(--cP); border:1px solid var(--cS); padding:10px 20px; border-radius:var(--rds); display:none; width:70%; z-index:1000;}


.pulse{animation:pulse-animation 1.5s infinite;}
@keyframes pulse-animation{0%{box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.3);} 100%{box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);}}