/* ---------popup------------- */
.center-notif {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.popup {
  width:350px;
  height:280px;
  padding:30px 20px;
  background:white;
  border-radius:.1rem;
  box-sizing:border-box;
  /* border: 1px solid gray; */
  z-index:2147483647;
  text-align:center;
  opacity:0;
  top:-200%;
  transform:translate(-50%,-50%) scale(0.5);
  transition: opacity 300ms ease-in-out,
              top 1000ms ease-in-out,
              transform 1000ms ease-in-out;
}
.popup.active {
  opacity:1;
  border: 1px solid gray !important;
  /* display: block; */
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  transition: transform 300ms cubic-bezier(0.18,0.89,0.43,1.19);
}
.popup .icon {
  margin:5px 0px;
  width:50px;
  height:50px;
  /* border:2px solid #34f234; */
  text-align:center;
  display:inline-block;
  border-radius:50%;
  line-height:60px;
}
.popup .icon i.fa {
  font-size:30px;
  color:#34f234;
} 
.popup .title {
  margin:5px 0px;
  font-size:30px;
  font-weight:600;
}
.popup .description {
  color:var(--aside-color);
  font-size:15px;
  padding:5px;
}
.popup .dismiss-btn {
  margin-top:15px;
}
.popup .dismiss-btn button {
  padding:10px 20px;
  background:var(--aside-color);
  color:#f5f5f5;
  border:2px solid #111;
  font-size:16px;
  font-weight:600;
  outline:none;
  border-radius:10px;
  cursor:pointer;
  transition: all 300ms ease-in-out;
}
.popup .dismiss-btn button:hover {
  color:var(--aside-color);
  background:#f5f5f5;
}
.popup > div {
  position:relative;
  top:10px;
  opacity:0;
}
.popup.active > div {
  top:0px;
  opacity:1;
}
.popup.active .icon {
  transition: all 300ms ease-in-out 250ms;
}
.popup.active .title {
  transition: all 300ms ease-in-out 300ms;
}
.popup.active .description {
  transition: all 300ms ease-in-out 350ms;
}
.popup.active .dismiss-btn {
  /* opacity: 1; */
  color: #111 !important;
  transition: all 300ms ease-in-out 400ms;
}
/* popup-gloabal not js */
.popup-gloabal {
width:350px;
height:280px;
padding:30px 20px;
background:white;
border-radius:.1rem;
box-sizing:border-box;
/* border: 1px solid var(--aside-color); */
z-index:2;
text-align:center;
/* display:none; */
opacity: 0;
top:-200%;
transform:translate(-50%,-50%) scale(0.5);
transition: opacity 300ms ease-in-out,
            top 1000ms ease-in-out,
            transform 1000ms ease-in-out;
}
.popup-gloabal.active {
/* display:block; */
opacity: 1;
top:50%;
transform:translate(-50%,-50%) scale(1);
transition: transform 300ms cubic-bezier(0.18,0.89,0.43,1.19);
}
.popup-gloabal .icon {
margin:5px 0px;
width:50px;
height:50px;
/* border:2px solid #34f234; */
text-align:center;
display:inline-block;
border-radius:50%;
line-height:60px;
}
.popup-gloabal .icon i.fa {
font-size:30px;
color:#34f234;
} 
.popup-gloabal .title {
margin:5px 0px;
font-size:30px;
font-weight:600;
}
.popup-gloabal .description {
color:#222;
font-size:15px;
padding:5px;height: auto;
}
.popup-gloabal .dismiss-btn {
margin-top:15px;
}
.popup-gloabal .dismiss-btn button {
padding:10px 20px;
background:var(--aside-color);
color:#f5f5f5;
border:2px solid #111;
font-size:16px;
font-weight:600;
outline:none;
border-radius:10px;
cursor:pointer;
transition: all 300ms ease-in-out;
}
.popup-gloabal .dismiss-btn button:hover {
color:#111;
background:#f5f5f5;
}
.popup-gloabal > div {
position:relative;
top:10px;
opacity:0;
}
.popup-gloabal.active > div {
top:0px;
opacity:1;
}
.popup-gloabal.active .icon {
transition: all 300ms ease-in-out 250ms;
}
.popup-gloabal.active .title {
transition: all 300ms ease-in-out 300ms;
}
.popup-gloabal.active .description {
transition: all 300ms ease-in-out 350ms;
}
.popup-gloabal.active .dismiss-btn {
transition: all 300ms ease-in-out 400ms;
}