@charset "utf-8";
/* Title: Nice Industries Marketing Site Login and Create Account Screens
** Description: Self-contained styles for entry point screens to Nice Industries products
** Author: Jessica Greenwalt
** Created: 06-02-2026
** Updated: 06-03-2026
************************************** */

/* = Reset
** ----------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, button, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
a, article, aside, figure, footer, header, menu, nav, section, menu,
time, mark, audio, video {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    text-align: center;
    box-sizing: border-box;
}

/* = Containers
** ----------------------- */
body {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    min-height: 100vh;
}

.content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.flsbox { 
    position: relative;
    margin: 0 -4px 0 10px;
    width: 100%;
    max-width: 500px;
    padding: 20px 20px 30px 20px;
    background-color: #fff;
    color: #000;
    border: 4px solid #000;
    box-shadow: -1px 1px 0 #000, -2px 2px 0 #000, -3px 3px 0 #000, -4px 4px 0 #000, -5px 5px 0 #000, -6px 6px 0 #000, -7px 7px 0 #000, -8px 8px 0 #000, -9px 9px 0 #000, -10px 10px 0 #000, -11px 11px 0 #000, -12px 12px 0 #000, -13px 13px 0 #000;
}

.login-state {
    display: none;
}

.login-state.active {
    display: flex;
    flex-direction: column;
}

.login-state .col {
    width: 100%;
}

@media (min-width: 900px) {
    .flsbox.login-referral {
        max-width: 800px;
        padding: 24px 40px 40px 40px;
    }
    .login-referral .login-state {
        flex-direction: row;
    }

    .login-referral .login-state.active {
        flex-direction: row;
        gap: 40px;
    }

    .login-referral .login-state.active > .col:first-child {
        flex: 1 1 0;
        min-width: 0;
    }
    .login-referral .login-state.active > .col:last-child {
        flex: 0 1 300px;
        min-width: 0;
        align-content: center;
    }
}

/* = Typography
** ----------------------- */
h2 {
    margin-bottom: 20px;
    font-family: 'Ultra', 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 40px;
}

@media (min-width: 600px) {
    h2 {
        font-size: 40px;
        line-height: 48px;
    }
}

p {
    margin-bottom: 20px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
}

p.finetxt {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Figtree', Helvetica, Arial, sans-serif;
    color: #666;
    line-height: 20px;
}

p.finetxt a {
    color: #000;
    font-weight: 600;
}

.subtitle-error {
    text-align: left;
    color: red;
    margin-bottom: 30px;
}

/* = Decorative Elements
** ----------------------- */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0 22px 0;
    color: #000;
    font-size: 16px;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #c9c9c9;
}

.auth-divider span {
    padding: 0 15px;
}

/* = Form and Form Elements
** ----------------------- */
input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 16px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    color: #000;
    text-align: left;
    background: #fff;
    transition: all 0.15s ease;
}

input:hover {
    border: 2px solid #41FFFF;
}

input:active,
input:focus {
    border: 2px solid #5DF900;
}

.frm-lbl-grp {
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
    width: 100%;
}

.frm-lbl-grp label {
    position: relative;
    z-index: 800;
    margin-bottom: 6px;
    text-align: left;
    float: left;
    margin-top: -20px;
    margin-left: 10px;
    opacity: 0;
    pointer-events: none;
    font-size: 12px;
    font-weight: 600;
    transition: opacity 0.3s ease-in-out;
}

.frm-lbl-grp textarea.slbs + label {
    position: relative;
    bottom: 4px;
}

.frm-lbl-grp input.slbs:focus + label,
.frm-lbl-grp input.slbs:not(:placeholder-shown) + label,
.frm-lbl-grp textarea.slbs:focus + label,
.frm-lbl-grp textarea.slbs:not(:placeholder-shown) + label {
    opacity: 0.6;
    pointer-events: auto;
}

.frm-lbl-grp input.slbs:focus,
.frm-lbl-grp input.slbs:not(:placeholder-shown),
.frm-lbl-grp textarea.slbs:focus,
.frm-lbl-grp textarea.slbs:not(:placeholder-shown) {
    padding: 10px 10px 28px 10px;
}

.frm-lbl-grp.always-visible label {
    opacity: 0.6;
    pointer-events: auto !important;
}

.frm-lbl-grp.always-visible input {
    padding: 10px 10px 28px 10px !important;
}

/* = Buttons */
.btn-fs {
    display: inline-block;
    width: 100%;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px 20px 14px 20px;
    text-align: center;
    text-decoration: none;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    background: #000;
    color: #fff;
}

.btn-fs:hover {
    background: #fff;
    color: #000;
}

.btn-google {
    background: #fff;
    border: 2px solid #000;
    color: #000;
    font-weight: 600;
}

.btn-google:hover {
    color: #fff;
    background: #000;
}

.btn-google .logo {
    position: relative;
    top: 2px;
    margin-right: 6px;
    width: 20px;
    height: 20px;
}

.btn-google .txt {
    position: relative;
    top: -2px;
    font-weight: 600;
}

.btn-txt-lh {
    display: block;
    width: 100%;
    margin-top: 20px;
    color: #000;
    background: none;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
}

.btn-txt-lh:hover {
    color: #31bfbf;
}

.btn-txt-lh:active {
    color: #46b900;
}

.btn-txt-lh.inactive {
    color: #a7a7a7;
    pointer-events: none;
}

.btn-back {
    position: absolute;
    bottom: 10px;
    left: 12px;
    display: block;
    padding: 0;
    padding-left: 18px;
    border: none;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    background: url('/static/img/ic-back-c.svg') no-repeat left center;
    opacity: 0.6;
    transition: 0.15s ease;
    cursor: pointer;
}

.btn-back:hover {
    background: url('/static/img/ic-back-c-blk.svg') no-repeat left center;
    opacity: 1;
}

#updatePasswordBtn {
    margin-bottom: 20px;
}

#resendOtpBtn {
    margin-bottom: 2px;
}

/* = Flash Messages
** ----------------------- */

#flashContainer {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    padding: 0 20px;
    z-index: 2000;
}

.flash-message {
    display: block;
    margin-bottom: 10px;
    padding: 10px 20px 14px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #000;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.flash-persist {
    color: #bf2789;
    background: #ffd2ee;
    border: 2px solid #ff34b7;
}

.flash-success,
.flash-dismiss {
    color: #46b900;
    background: #ddfdce;
    border: 2px solid #5df700;
}

.flash-message.flash-exit {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}


/* = In-App Browser Modal
** ----------------------- */

.inapp-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.inapp-modal-overlay.show {
    display: flex;
}

.inapp-modal {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 360px;
    margin: 20px;
    text-align: center;
}

.inapp-modal h2 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #000;
}

.inapp-modal p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.inapp-modal .steps {
    text-align: left;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}

.inapp-modal .steps p {
    margin-bottom: 8px;
    color: #333;
}

.inapp-modal .steps p:last-child {
    margin-bottom: 0;
}

.inapp-modal .copy-link-btn {
    width: 100%;
    padding: 12px;
    background: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
}

.inapp-modal .copy-link-btn:hover {
    background: #333;
}

.inapp-modal .copy-link-btn.copied {
    background: #2a7;
}

.inapp-modal .close-modal-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.inapp-modal .close-modal-btn:hover {
    background: #f9f9f9;
}

/* = OTP Verification Loading
** ----------------------- */

.otp-verifying {
    position: relative;
    overflow: hidden;
}

.otp-verifying input {
    border-color: #5DF900;
    pointer-events: none;
    color: #666666;
}

.otp-verifying::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #41FFFF, #5DF900, transparent);
    animation: otp-sweep 1.2s ease-in-out infinite;
}

@keyframes otp-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes shake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-4px) rotate(-1.00deg); }
    30% { transform: translateX(3px) rotate(1.00deg); }
    45% { transform: translateX(-3px) rotate(-0.5deg); }
    60% { transform: translateX(2px) rotate(0.5deg); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.otp-shake {
    animation: shake 0.5s ease-out;
}

/* = Static Highlighter Background
** ----------------------- */

.bg-hdf {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

.highlighter-bg--static .bg-hdf line {
    animation: none;
    stroke-dashoffset: 0;
}

line {
    stroke-width: 150;
    stroke-linecap: butt;
    stroke-dasharray: 1400; /* adjust according to length */
    stroke-dashoffset: 1400;
    /* filter: blur(1px) brightness(1.2); */
    opacity: 0.6;
    animation-fill-mode: forwards;
}

line.yellow {
    stroke: #ffff00;
}
line.green {
    stroke: #70ff00;
}
line.blue {
    stroke: #4effff;
}
line.orange {
    stroke: #ffc507;
}
line.pink {
    stroke: #ff3edc;
}

.line1 {
    animation: drawLine 2s ease forwards;
}
.line2 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.25s;
}
.line3 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.75s;
}
.line4 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.6s;
}

/* Green Lines */
.line5 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.75s;
}
.line6 {
    animation: drawLine 2s ease forwards;
    animation-delay: 2.25s;
}
.line7 {
    animation: drawLine 2s ease forwards;
    animation-delay: 3s;
}
.line8 {
    animation: drawLine 2s ease forwards;
    animation-delay: 3.25s;
}

/* Blue Lines */
.line9 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.5s;
}
.line10 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1s;
}
.line11 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.5s;
}
.line12 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.8s;
}

/* Orange Lines */
.line13 {
    animation: drawLine 2s ease forwards;
}
.line14 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.6s;
}
.line15 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.75s;
}
.line16 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.6s;
}

/* Pink Lines */
.line17 {
    animation: drawLine 2s ease forwards;
    animation-delay: 2.3s;
}
.line18 {
    animation: drawLine 2s ease forwards;
    animation-delay: 2.8s;
}
.line19 {
    animation: drawLine 2s ease forwards;
    animation-delay: 3s;
}
.line20 {
    animation: drawLine 2s ease forwards;
    animation-delay: 4s;
}

/* Yellow Lines */
.line21 {
    animation: drawLine 2s ease forwards;
    animation-delay: 4.4s;
}
.line22 {
    animation: drawLine 2s ease forwards;
    animation-delay: 5s;
}
.line23 {
    animation: drawLine 2s ease forwards;
    animation-delay: 5.4s;
}
.line24 {
    animation: drawLine 2s ease forwards;
    animation-delay: 6.2s;
}