/* --------------------- Style Buttons to show Toast Loader --------------------- */

.call-to-action{

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.btn-info-load{

    color: #1B77EC;
    background-color: #fff;
    font-size: 18px;
    width: 148px;
    height: 40px;
    border: 1px solid #1B77EC;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
}
.btn-info-load:active{

   transform: scale(0.98);
   opacity: 0.9;
}

.btn-success-load{

    color: #01ad23;
    background-color: #fff;
    font-size: 18px;
    width: 148px;
    height: 40px;
    border: 1px solid #01ad23;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
}

.btn-success-load:active{

    transform: scale(0.98);
    opacity: 0.9;
 }

.btn-warning-load{

    color: #d6ad13;
    background-color: #fff;
    font-size: 18px;
    width: 148px;
    height: 40px;
    border: 1px solid #d6ad13;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
}

.btn-warning-load:active{

    transform: scale(0.98);
    opacity: 0.9;
 }

.btn-error-load{

    color: #d63b3f;
    background-color: #fff;
    font-size: 18px;
    width: 148px;
    height: 40px;
    border: 1px solid #d63b3f;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
}

.btn-error-load:active{

    transform: scale(0.98);
    opacity: 0.9;
 }

/* --------------------- End Style Buttons to show Toast Loader --------------------- */












/* ----------------------------------------- */
/* -------------------------------------------------- */
/* ---------------------------------------------------------- */

/* --------------------- Information Toast Loader --------------------- */

.toast.info-loader{
    background-color: #fff; 
    border-radius: 10px;
    border: 1px solid var(--blue);
    border: 1px solid #1b77ec; /* This is fallbacks for browser IE*/
}

/* End Information Toast Loader --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */


/* --------------------- Style Information Toast Loader Icon --------------------- */

.bi-info-circle-fill{

    color: #006FFF;
    font-size: 28px;
    
}
    


/* --------------------- Style button close Loader Icon --------------------- */

.bi.bi-x-lg{

    font-size: 14px;
    position: absolute;
    top: 3px;
    left: 3px;
    color: #A5A5A5;
    transform: rotate(-45deg);
    
}



/* --------------------- Success Toast Loader --------------------- */

.toast.success-loader{
    background-color: #fff; 
    border-radius: 10px;
    border: 1px solid #01ad23; 
}

/* End Success Toast Loader --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */



/* --------------------- Style Success Toast Loader Icon --------------------- */

.bi-check-circle-fill{

    color: #01ad23;
    font-size: 28px;
    
}


/* --------------------- Warning Toast Loader --------------------- */

.toast.warning-loader{
    background-color: #fff; 
    border-radius: 10px;
    border: 1px solid #d6ad13; 
}

/* End Success Toast Loader --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */



/* --------------------- Style Warning Toast Loader Icon --------------------- */

.bi-exclamation-circle-fill{

    color: #d6ad13;
    font-size: 28px;
    
}


/* --------------------- Error Toast Loader --------------------- */

.toast.error-loader{
    background-color: #fff; 
    border-radius: 10px;
    border: 1px solid #d63b3f; 
}

/* End Success Toast Loader --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */


/* --------------------- Style Error Toast Loader Icon --------------------- */

.bi-x-circle-fill{

    color: #d63b3f;
    font-size: 28px;
    
}

.btn-info{

    position: relative;
}

/* ---------------------  Style Loader --------------------- */

.loader {
    width: 28px;
    height: 28px;
    border:2px solid rgb(241, 241, 241);
    border-radius: 50%;
    box-sizing: border-box;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);    
  }
  .loader::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset:-2px;
    border-radius: 50%;
    border:2px solid #A5A5A5;
    animation: prixClipFix 4s forwards linear;
    animation-delay: 0.5s;


  }

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }
    

/* --------------------- End Style Loader --------------------- */