#popup-login.open {
  display   : block;
  height    : 100%;
  background: 0 0;
  width     : 100%;
  position  : fixed;
  top       : 0;
  bottom    : 0;
  z-index   : 999999;
}

#popup-login:before {
  content   : "";
  display   : block;
  height    : 100%;
  background: #222;
  width     : 100%;
  position  : absolute;
  right     : 0;
  opacity   : 0.85;
}

#popup-login .title-popup {
  font-size  : 26px;
  font-weight: 600;
  text-align : center;
  margin     : 20px 0 10px;
  padding    : 0;
}

#popup-login input {
  padding         : 10px 14px 10px 14px;
  color           : #585858;
  background-color: #ffffff;
  border          : 1px solid #D5D5D8;
  border-radius   : 8px;
  width           : 100%;
}

#popup-login .button {
  background-color: #9378E3;
  color           : #ffffff;
  border-radius   : 8px;
  font-weight     : 400;
  padding         : 12px 30px;
  font-size       : 16px;
  width           : 100%;
  cursor          : pointer;
}

#popup-login .button:hover {
  background-color: #FE829A;
  color           : #ffffff;
  border-radius   : 8px;
}

#popup-login p {
  margin-bottom: 12px;
}

.animate-popup {
  -webkit-animation-duration: 0.6s;
  animation-duration        : 0.6s;
}

/*
====== Popup effect ======
*/
@-webkit-keyframes popup-in {
  0% {
    opacity          : 0;
    -webkit-transform: scale(0.8) translateY(-20%);
  }

  100% {
    opacity          : 1;
    -webkit-transform: scale(1) translateY(0);
  }
}

@-moz-keyframes popup-in {
  0% {
    opacity       : 0;
    -moz-transform: scale(0.8) translateY(-20%);
  }

  100% {
    opacity       : 1;
    -moz-transform: scale(1) translateY(0);
  }
}

@keyframes popup-in {
  0% {
    opacity  : 0;
    transform: scale(0.8) translateY(-20%);
  }

  100% {
    opacity  : 1;
    transform: scale(1) translateY(0);
  }
}

.popup-in {
  -webkit-animation-name     : popup-in;
  -moz-animation-name        : popup-in;
  animation-name             : popup-in;
  display                    : block !important;
  -webkit-animation-duration : 0.3s;
  animation-duration         : 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;
}

@-webkit-keyframes popup-out {
  0% {
    opacity          : 1;
    -webkit-transform: scale(1) translateY(0);
  }

  100% {
    opacity          : 0;
    -webkit-transform: scale(0.8) translateY(-20%);
  }
}

@-moz-keyframes popup-out {
  0% {
    opacity       : 1;
    -moz-transform: scale(1) translateY(0);
  }

  100% {
    opacity       : 0;
    -moz-transform: scale(0.8) translateY(-20%);
  }
}

@keyframes popup-out {
  0% {
    opacity  : 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity  : 0;
    transform: scale(0.8) translateY(-20%);
  }
}

.popup-out {
  -webkit-animation-name     : popup-out;
  -moz-animation-name        : popup-out;
  animation-name             : popup-out;
  display                    : block !important;
  -webkit-animation-duration : 0.3s;
  animation-duration         : 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;
}

/*
*** Site Popup ***
*/
#dashboard-popup {
  display         : none;
  position        : fixed;
  z-index         : 9999999999;
  left            : 0;
  top             : 0;
  width           : 100%;
  height          : 100%;
  margin          : 0;
  padding-top     : 60px;
  overflow        : hidden;
  background-color: rgb(0 0 0 / 64%);
}

.popup-small {
  max-width: 600px;
}

.dashboard-popup-head {
  width          : 100%;
  display        : flex;
  justify-content: end;
}

.dashboard-popup-content {
  position                  : relative;
  display                   : none;
  -webkit-animation-duration: 0.6s;
  animation-duration        : 0.6s;
  padding                   : 20px;
  background                : #fff;
  border-radius             : 12px;
  width                     : 90%;
  margin                    : 20px auto;
}

.dashboard-popup_close {
  cursor: pointer;
  width : 28px;
  height: 28px;
}

/*
====== Zoom effect ======
*/
@-webkit-keyframes pop-in {
  0% {
    opacity          : 0;
    -webkit-transform: scale(0.5);
  }

  100% {
    opacity          : 1;
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes pop-in {
  0% {
    opacity       : 0;
    -moz-transform: scale(0.5);
  }

  100% {
    opacity       : 1;
    -moz-transform: scale(1);
  }
}

@keyframes pop-in {
  0% {
    opacity  : 0;
    transform: scale(0.5);
  }

  100% {
    opacity  : 1;
    transform: scale(1);
  }
}

.fadezoom {
  -webkit-animation-name: pop-in;
  animation-name        : pop-in;
  display               : block !important;
}

@-webkit-keyframes pop-out {
  0% {
    opacity          : 1;
    -webkit-transform: scale(1);
  }

  100% {
    opacity          : 0;
    -webkit-transform: scale(0.5);
  }
}

@-moz-keyframes pop-out {
  0% {
    opacity       : 1;
    -moz-transform: scale(1);
  }

  100% {
    opacity       : 0;
    -moz-transform: scale(0.5);
  }
}

@keyframes pop-out {
  0% {
    opacity  : 1;
    transform: scale(1);
  }

  100% {
    opacity  : 0;
    transform: scale(0.5);
  }
}

.fadezoom-out {
  -webkit-animation-name: pop-out;
  animation-name        : pop-out;
}

@media (max-height: 580px) {
  #dashboard-popup {
    padding-bottom: 60px;
    overflow-y    : auto !important;
  }
}