:root{

    --darker : #1f2933;
    --blacker :#000000;
    --blacky :#292828;
    
    --greysy : #b8b8b8;
    --greyser : #7c7c7c;
    --whity :#fff;
    --whiter :#f1f1f1;

    --greeny : #258624;
    --greener : #1c4b1b;

    --redy : #df0808;
    --reder : #b90505;

    --bludy :#0538a5;
    --bluder :rgb(21, 21, 139);

    --shady : #35353580;
    --shader : #272727ad;


  
 /* ----------------------------    */
    --back:#1f2933;
    --fond:#1f2933;
    --text-w:#ffffff;
    --text-b:#000000;
    --more:#f1f1f1;
    --button:#0d2863;
    --detail:#0b410d;
}


/* ------------------------------MESSAGE STYLE---------------- */

.notify {
    display: flex;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 20px; 
    padding: 2px;
    padding-right: 2px;
    border-radius: 5px;
    margin: 10px 0;
    z-index: 99999999; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: rgb(247, 247, 247);
    transition: opacity 0.3s ease;
}

.notify  .notify-icon-container {
    z-index: 11;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size:14px ;
    box-shadow: inset  1px 1px 2px rgba(0, 0, 0, 0.514); 
    background-color: #fff;
}

.notify  .notify-icon {
    font-size: 23px;
}

.notify  .success .notify-icon{
   color: #169916;
}

.notify  .info .notify-icon{
   color: #214ec9; 
}

.notify  .warning .notify-icon{
   color: #f0ad4e; 
}

.notify  .error .notify-icon{
   color: #da160f; 
}

.notify  .message-container {
    padding: 10px;
    margin-left: -20px;
    padding-left: 15px;
    border-radius: 1px;
    flex-grow: 1;
}



/* ---------------------------MESSAGE---------------------- */







.inconer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    right: 50%;
    transform: translate(-50%,-50%);
    padding: 2px;
    padding-right: 2px;
    border-radius: 5px;
    margin: 10px 0;
    z-index: 99999999999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: rgb(247, 247, 247);
    transition: opacity 0.3s ease;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

.iconerDiv {
    z-index: 99999991;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size:18px ;
    box-shadow: inset  1px 1px 2px rgba(0, 0, 0, 0.514); 
    background-color: #fff;
}

.inconer-icon { font-size: 30px}

.success .inconer-icon{ color: #169916}

.info .inconer-icon{color: #214ec9;}

.warning .inconer-icon{color: #f0ad4e;}

.error .inconer-icon{color: #da160f;}

/* ---------------------------MESSAGE---------------------- */


    
/* <div class="loadCover"> 
    <div class="loadsvg">
        <img src="assets/img/loader.svg" alt="svg">
    </div>
</div>


<div class="loadCenter">
    <div class="loadsvg">
         <img src="assets/img/loader.svg" alt="svg">
    </div>
</div> */




/* -------------------- */
.loadCenter{
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    padding: 8px;
    pointer-events: none;
    animation: showloader  0.5s  forwards;
}

.loadCenter .loadsvg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #63636398;
    backdrop-filter: blur(2px);
    border: 1px solid #dddddd;
    box-shadow: 1px 1px 8px var(--blacker);
    padding: 8px;

}

.loadCenter .loadsvg img{
    width: 100px;
    height: 100px;
    margin: 20px;
    display: inline-block;
}




/* --------------------- */
.loadCover{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #c4c4c400;
    backdrop-filter: blur(1px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

.loadCover .loadsvg{
    z-index: 9999999;
    position: absolute;
    right: 10px;
    bottom: 5px;
}

.loadCover .loadsvg img {
    width: 60px;
    height: 60px;
    margin: 20px;
    display: inline-block;
}