.toast-position{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 15px;
}
.toast-container h3{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
}

.toast-container p{
    font-size: 14px;
    color: #363A3E;
    margin-bottom: 0;
}
.toast-container{
   position: fixed;
   margin: 15px;
   display: flex;
   flex-direction: column;
   gap: 1em;
   z-index: 9999;
}

.toast-container[toast-position^="top-"]{
    top: 0;
}

.toast-container[toast-position$="-right"]{
    right: 0;
}

.toast-container[toast-position$="-left"]{
    left: 0;
}

.toast-container[toast-position^="bottom-"]{
    bottom: 0;
}

.toast-container[toast-position$="-center"]{
    left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 992px){
    .toast-container[toast-position^="top-"]{
        top: 92px;
    }
}

.toast{
    display: inline-flex;
    align-items: center;
    width: 425px;
    height: 60px;
    padding: 10px;
    position: relative;
    box-shadow: 0 0.25rem 0.5625rem -0.0625rem rgb(0 0 0 / 3%), 0 0.275rem 1.25rem -0.0625rem rgb(0 0 0 / 5%);
    transition: transform 0.5s cubic-bezier(.58,.08,0,.9);
    z-index: 99999;
}

.toast-container[toast-position$="-right"] .toast{
  
    transform: translateX(150%);
}

.toast-container[toast-position$="-left"] .toast{
    transform: translateX(-150%);
}


.toast-container[toast-position$="-center"] .toast{
    transform: translateY(-150vh);
}

.toast-container .toast.show{

    transform: translate(0, 0);
}

.toast-container .btn-close{
    background-color: transparent;
    border: 0;
    outline: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  
}

/* .btn-close .bi-x.close{
    color: #737980;
    background-color: transparent;
    border: 0;
} */



.btn-close:hover{

    opacity: 0.7;
}

.toast .headlines{
    
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* --------------------- Style Headlines Toast --------------------- */

.toast .hedaline[data-state="info"]{

    color: var(--blue);
    color: #1b77ec; /* This is fallbacks for browser IE*/

}

.toast .hedaline[data-state="success"]{

    color: var(--green);
    color: #01ad23; /* This is fallbacks for browser IE*/

}

.toast .hedaline[data-state="warning"]{

    color: var(--yellow);
    color: #d6ad13; /* This is fallbacks for browser IE*/

}

.toast .hedaline[data-state="error"]{

    color: var(--red);
    color: #d63b3f; /* This is fallbacks for browser IE*/

}

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


/* --------------------- Information Toast --------------------- */
.toast.information{
    background-color: #cce7ff; /* This is fallbacks for browser IE*/
    background-color: var(--pastelblue);
    border-radius: 10px;
    border: 1px solid var(--blue);
    border: 1px solid #1b77ec; /* This is fallbacks for browser IE*/
}
/* End Information Toast --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */


/* --------------------- Success Toast --------------------- */
.toast.success{
    background-color: #e4ffe9; /* This is fallbacks for browser IE*/
    background-color: var(--pastelgreen);
    border-radius: 10px;
    border: 1px solid var(--green);
    border: 1px solid #01ad23; /* This is fallbacks for browser IE*/
}
/* End Success Toast --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */


/* --------------------- Success Toast --------------------- */
.toast.warning{
    background-color: #fff2c7; /* This is fallbacks for browser IE*/
    background-color: var(--pastelyellow);
    border-radius: 10px;
    border: 1px solid var(--yellow);
    border: 1px solid #d6ad13; /* This is fallbacks for browser IE*/
}
/* End Success Toast --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */


/* --------------------- Success Toast --------------------- */
.toast.error{
    background-color: #fee1e3; /* This is fallbacks for browser IE*/
    background-color: var(--pastelred);
    border-radius: 10px;
    border: 1px solid var(--red);
    border: 1px solid #d63b3f; /* This is fallbacks for browser IE*/
}
/* End Success Toast --------------------- */
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */

/* --------------------- Style Icon --------------------- */

.toast > i{
    font-size: 24px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    margin-right: 10px;
    
}

/* --------------------- Style Information Icon --------------------- */

/* .bi-info{

    color: var(--blue);
    border: 1px solid var(--blue);
    border: 1px solid #1b77ec; 
    background-color: var(--white);
    background-color: #ffffff; 
} */
/* End  Style Information Icon --------------------- */



/* --------------------- Style Success Icon --------------------- */

.bi-check{

    color: var(--green);
    border: 1px solid var(--green);
    border: 1px solid #01ad23; /* This is fallbacks for browser IE*/
    background-color: var(--white);
    background-color: #ffffff; /* This is fallbacks for browser IE*/
}
/* End Style Success Icon --------------------- */



/* --------------------- Style Warning Icon --------------------- */

.bi-exclamation{

    color: var(--yellow);
    border: 1px solid var(--yellow);
    border: 1px solid #d6ad13; /* This is fallbacks for browser IE*/
    background-color: var(--white);
    background-color: #ffffff; /* This is fallbacks for browser IE*/
}
/* End Style Warning Icon --------------------- */



/* --------------------- Style Error Icon --------------------- */

.bi-x{

    color: var(--red);
    border: 1px solid var(--red);
    border: 1px solid #d63b3f; /* This is fallbacks for browser IE*/
    background-color: var(--white);
    background-color: #ffffff; /* This is fallbacks for browser IE*/
}
/* End Style Error  Icon --------------------- */










/* --------------------- End Responsive Mobile --------------------- */



/* --------------------- Style Buttons to show Toast Loader --------------------- */
/* 
.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 --------------------- */

.toast.info-loader > i{

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


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

.toast .btn-close i {

    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 --------------------- */

.toast.success-loader > i{

    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 --------------------- */

.toast.warning-loader > i{

    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 --------------------- */

.toast.error-loader > i{

    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 --------------------- */
.loading .btn-loading {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    background: #fff;
    margin: auto;
    color: var(--primary-color);
    align-content: center;
    align-items: center;
    justify-content: center;
}