.lockscreen {
    background: none !important;
}
.home-page-class {
    background: #000 !important;
}
.login-out {
    animation: loginout 2s ease forwards;
    animation-delay: 1s;
}
@keyframes loginout {
    /* from {top:0px;opacity:100;}
    to {top:-100vh;opacity:0;} */
    from {transform: translateY(0px) translateX(0px); opacity:100;}
    to {transform: translateY(-100vh) translateX(0px); opacity:0;}
}

.lockscreen-focus {
    animation: focus 1s ease forwards;
    animation-delay: 0s;
}
@keyframes focus {
    from {background-size: 100% 100%; backdrop-filter: blur(0px)}
    to {background-size: 102% 102%; backdrop-filter: blur(5px)}
}

.home-page-out {
    animation: loginout 1s ease forwards;
    animation-delay: 0.5s;
}

.lockscreen-out {
    animation: loginout 2s ease forwards;
}

.lockscreen-enter {
    animation: blur 1s ease forwards;
}

@keyframes blur {
    /* from {filter: blur(5px); opacity: 0; transform: scale(1.05)}
    to {filter: blur(0px); opacity: 100; transform: scale(1);} */
    from {filter: blur(5px); opacity: 0; background-size: 102% 102%;}
    to {filter: blur(0px); opacity: 100; background-size: 100% 100%;}
}

.lockscreen--login-enter {
    animation: loginEnter 1s ease forwards;
}

@keyframes loginEnter {
    from {opacity: 0;}
    to {opacity: 100;}
}

.date-time-out {
    animation: timeOut 1s ease forwards;
}

@keyframes timeOut {
    from {opacity: 100;}
    to {opacity: 0;}
}

.shake {
    animation: shake 500ms ease-in-out;
}
    
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(+4px, 0, 0); }
    30%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(+6px, 0, 0); }
    50% { transform: translate3d(-5px, 0, 0); }
}

.error-password {
    width: 100px;
    display: inline-block;
    margin: auto;
    color: #F73232;
    margin-right: 10px;
    font-size: 13px;
    display: none;
}

.portal-minimize {
    /* animation: minimize 0.5s ease forwards;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%; */
	-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }

/* @keyframes minimize {
    0% {
        transform: skew(0deg, 0deg) scale(1);
        clip-path: inset(0% 0% 0% 0% round 0% 0% 0% 0%);
    }
    100% {transform: skew(25deg, 0deg) scale(0);
         clip-path: inset(0% 0% 0% 0% round 5% 25% 5% 25%);
    }
} */

.portal-restore {
	-webkit-animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-right {
    0% {
      -webkit-transform: translateZ(-1400px) translateX(100%);
              transform: translateZ(-1400px) translateX(100%);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0) translateX(0);
              transform: translateZ(0) translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-fwd-right {
    0% {
      -webkit-transform: translateZ(-1400px) translateX(1000px);
              transform: translateZ(-1400px) translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0) translateX(0);
              transform: translateZ(0) translateX(0);
      opacity: 1;
    }
  }