body {
    background: black;
}

#bg-video {
    height: 100%;
    z-index: 1;
    position: fixed;
}

.authentication-bg {
    z-index: 2;
}

.app-brand {
    z-index: 2;
    position: fixed;
}

.authentication-inner {
    background-color: black;
}

.authentication-bg {
    position: relative;
    border: 20px solid black;
    border-radius: 40px;
    box-shadow: inset 0 0 0 1px #dbaf6c;
    margin-left: -20px;
}

.authentication-wrapper .authentication-bg {
    background-color: #222;
}

.copyright-text {
    z-index: 2;
    position: fixed;
    left: 24px;
    bottom: 20px;
}

.inner-content {
    margin-top: 168px;
}

.ornament-left {
    position: absolute;
    left: 1px;
    top: 14px;
    width: 49.8%;
    height: 160px;
}

.ornament-right {
    position: absolute;
    right: 1px;
    top: 14px;
    width: 49.8%;
    height: 160px;
}

/* base state: no animation yet */
.reveal-left {
    -webkit-mask-image: linear-gradient(#000 0 0);
    -webkit-mask-size: 0% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-image: linear-gradient(#000 0 0);
    mask-size: 0% 100%;
    mask-repeat: no-repeat;
    mask-position: left;

    /* hints & isolation */
    will-change: -webkit-mask-size, mask-size;
    transform: translateZ(0); /* layer promotion */
    contain: paint; /* isolate painting */
}

.reveal-right {
    -webkit-mask-image: linear-gradient(#000 0 0);
    -webkit-mask-size: 0% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: right;
    mask-image: linear-gradient(#000 0 0);
    mask-size: 0% 100%;
    mask-repeat: no-repeat;
    mask-position: right;

    /* hints & isolation */
    will-change: -webkit-mask-size, mask-size;
    transform: translateZ(0); /* layer promotion */
    contain: paint; /* isolate painting */
}

/* only added when we're ready to animate */
.reveal-left.is-animating,
.reveal-right.is-animating {
    animation: sweep 800ms ease-out forwards;
}

.form-password-toggle .input-group-text {
    z-index: 2;
}

@keyframes sweep {
    to {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
}

/* @media (max-height: 740px) {
    .ornament-left {
        height: 120px;
    }

    .ornament-right {
        height: 120px;
    }
} */

@media (max-width: 600px) {
    .authentication-bg {
        border: unset;
        border-radius: unset;
    }
}