:root {
    --easing-default: cubic-bezier(0.645, 0.045, 0.355, 1);
}

@keyframes cardheader {
    0% {
        opacity: 0;
        -webkit-transform: translateY(230px);
        transform: translateY(230px);
    }
    40%,
    50% {
        opacity: 1;
        -webkit-transform: translateY(230px);
        transform: translateY(230px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes panelentry {
    0% {
        opacity: 0;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes innerpanelentry {
    0% {
        opacity: 0;
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
    }
    100% {
        opacity: 10;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
.login-page {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 91, 200, 1);
    padding: 1.5rem;
    min-height: 100vh;
}
.login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.login-panel {
    border-radius: 5px;
    background-color: #FFFFFF;
    width: 100%;
    opacity: 0;
    animation: panelentry 0.5s var(--easing-default) 1125ms 1 normal forwards;
}
.login-panel-inner {
    opacity: 0;
    animation: innerpanelentry 0.5s var(--easing-default) 1.35s 1 normal forwards;
}
.card-header {
    opacity: 0;
    animation: cardheader 1.5s var(--easing-default) 0s 1 normal forwards;
}
.text-center {
    text-align: center;
}