.kzvn-login-html {
    /* colors */
    --white-color: white;
    /* grey */
    --kzvn-grey-color-700: hsla(0, 0%, 42%, 1);
    /*download btn color*/
    --auth-download-btn:#eef2fa;
    /* contrast */
    --contrast-color: hsla(216, 26%, 93%, 1);
    --contrast-color-50p: hsla(216, 26%, 93%, .5);
    --contrast-color-hover: hsla(216, 19%, 85%, 1);
    /* blue */
    --kzvn-blue-color: hsla(218, 47%, 36%, 1);
    --kzvn-blue-color-shade-100: hsla(218, 67%, 98%, 1);
    --kzvn-blue-color-shade-200: hsla(216, 26%, 93%, 1);
    --kzvn-blue-color-shade-300: hsla(216, 19%, 85%, 1);
    /* green */
    --kzvn-green-color: hsla(65, 100%, 32%, 1);
    --kzvn-green-color-shade-900: hsla(65, 100%, 39%, 1);
    --kzvn-green-color-shade-50pct: hsla(65, 100%, 32%, .5);
    --kzvn-green-color-shade-20pct: hsla(65, 100%, 32%, .24);
    /* error */
    --error-text-color: #dc3545;
    /* alert - danger */
    --alert-danger-text-color: #721c24;
    --alert-danger-bkg-color: #f8d7da;
    --alert-danger-border-color:#f5c6cb;
    /* alert - warning */
    --alert-warning-text-color: #856404;
    --alert-warning-bkg-color: #fff3cd;
    --alert-warning-border-color: #ffeeba;
    /* alert success */
    --alert-success-text-emphasis: #0a3622;
    --alert-success-bg-subtle: #d1e7dd;
    --alert-success-border-subtle: #a3cfbb;
    /* height */
    --navbar-height: 4.4rem;
    --content-height: calc(100dvh - 4.4rem);
    /* animation */
    --animation-ease-3ms: all .3s ease;
    --animation-ease-7ms: all .7s ease;
    --animation-bkg: background 0.8s;
    --animation-pop: pop .2s ease-in-out;
    --animation-slide-down: slide-down .3s ease-in-out;
    /* borders */
    --border-base-width:1px;
    --border-2px-width:2px;
    --border-radius: .3rem;
    --border-basic: var(--border-base-width) solid var(--contrast-color-hover);
    --border-2px: var(--border-2px-width) solid var(--contrast-color-hover);
    --border-2px-hover: var(--border-2px-width) solid hsl(213, 7%, 73%);
    --border-alert-danger: var(--border-base-width) solid var(--alert-danger-border-color);
    --border-alert-warning: var(--border-base-width) solid var(--alert-warning-border-color);
    /* shadows */
    --box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
    /* pwd-strength-colors */
    --pwd-strength-very-weak:#de425b;
    --pwd-strength-weak:#ef8f50;
    --pwd-strength-modirate:#ead474;
    --pwd-strength-strong:#7fb269;
    --pwd-strength-very-strong:#488f31;

}


@keyframes pop {
    0% {
        display: none;
        opacity: 0;
    }
    1% {
        display: block;
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}



@keyframes slide-down {
    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}