@import "footer.css";

@media screen and (width <= 1023px) {
    .page-header .header.content .logo img {
        max-width: 160px;
    }
}

@media screen and (width <= 767px) {
    .page-header .header.content .logo img {
        max-width: 120px;
    }
}

.company-register-flow {
    background-image: url("../images/company_bg.svg");
    background-size: cover;
    position: relative;
    --font-color: #FFFFFF;
}

.company-register-flow .page-title {
    font-size: 40px;
    margin-block: 8px;
    @media screen and (width >= 1440px) {
        font-weight: var(--weightBold);
        font-size: 55.61px;
        letter-spacing: 0;
        margin-block: 16px;
    }
    @media screen and (width <= 767px) {
        font-size: 20px;
    }
}

.company-register-flow .page-wrapper {
    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 18, 20, 90%);
        pointer-events: none;
        z-index: -1;
    }
}

.company-register-flow .page-header {
    text-align: center;
    padding-block: 16px;
    @media screen and (width >= 1440px) {
        padding-block: 56px;
    }
    @media screen and (width <= 767px) {
        padding-top: 56px;
    }
}

.company-register-flow form.form {
    max-width: 560px;
    margin-inline: auto;
    background-color: rgba(35, 45, 61, 1);
    padding: 48px 36px;
    border-radius: 20px;
    margin-bottom: 40px;
    &.create {
        max-width: 1428px;
        @media screen and (width <= 1023px) {
            max-width: 90%;
            padding: 32px 24px;
        }
    }
    &.form-login, &.forget {
        max-width: 915px;
        padding-block: 120px;
        padding-inline: 56px;
        @media screen and (width <= 1023px) {
            max-width: 90%;
        }
        @media screen and (width <= 1023px) {
            padding: 36px 24px;
        }
    }
    &.otp-form {
        max-width: 560px;
        padding-block: 56px;
        padding-inline: 56px;
        @media screen and (width <= 1023px) {
            max-width: 90%;
        }
        @media screen and (width <= 1023px) {
            padding: 32px 20px;
        }
    }
    @media screen and (width <= 767px) {
        padding: 36px 24px;
        margin-bottom: 20px;
    }
}

.company-register-flow form.form.otp-form {
    & .description {
        font-size: 20px;
        margin-bottom: 24px;
        text-align: center;
        @media screen and (width <= 767px) {
            font-size: 14px;
            margin-bottom: 16px;
        }
    }
    & .otp-input-group {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        @media screen and (width <= 767px) {
            margin-inline: auto;
            max-width: 75%;
        }
        & input {
            flex-basis: calc(calc(100% / 6) - 16px);
            border: 1.2px solid #E3E5E9;
            padding: 0;
            height: 60px;
            padding: 8px;
            border-radius: 9.6px;
            background: #FFFFFF;
            text-align: center;
            @media screen and (width <= 767px) {
                flex-basis: calc(calc(100% / 3) - 8px);
            }
        }
        & .otp-digit.mage-error {
            border: 2px solid #E93B3B !important;
            animation: shake 0.3s ease-in-out;
        }
    }
    & .secondary {
        margin-top: 16px;
        text-align: center;
        & .resend {
            color: rgba(90, 146, 219, 1);
            text-decoration: underline;
            font-weight: var(--weightBold);
            font-size: 16px;
        }
    }
    & .actions-toolbar {
        margin-top: 24px;
        text-align: center;
        @media screen and (width >= 1440px) {
            margin-top: 40px;
        }
    }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(2px); }
}

.company-register-flow form.form fieldset {
    row-gap: 24px;
    @media screen and (width >= 1440px) {
        row-gap: 32px;
    }
    @media screen and (width <= 767px) {
        row-gap: 16px;
    }
}

.company-register-flow form.create fieldset {
    row-gap: 40px;
    @media screen and (width >= 1440px) {
        row-gap: 56px;
    }
    @media screen and (width <= 767px) {
        row-gap: 16px;
    }
}

.company-register-flow form.form .field:not(.choice) .label {
    font-size: 18px;
    font-weight: var(--weightSemibold);
    margin-bottom: 12px;
    @media screen and (width >= 1440px) {
        font-size: 30px;
        font-weight: var(--weightBold);
        margin-bottom: 16px;
    }
}

.company-register-flow form.form .field {
    &.consent {
        font-weight: var(--weightRegular);
        font-size: 20px;
        color: var(--textGray);
        @media screen and (width <= 767px) {
            font-size: 17px;
        }
        @media screen and (width >= 1440px) {
            font-size: 28.49px;
        }

    }
    &.consent a {
        color: var(--primary-color);
    }
    &.full-field {
        grid-column: 1 / -1;
    }
}

.company-register-flow .form .actions-toolbar {
    margin-top: 40px;
    text-align: center;
    @media screen and (width >= 1440px) {
        margin-top: 56px;
    }
}

.company-register-flow .form .actions-toolbar .signup-link {
    font-weight: var(--weightRegular);
    font-size: 16px;
    @media screen and (width >= 1440px) {
        font-size: 25px;
    }
}

.company-register-flow .form .actions-toolbar a {
    color: rgba(90, 146, 219, 1);
    text-decoration: underline;
    font-weight: var(--weightBold);
    font-size: 16px;
    @media screen and (width >= 1440px) {
        font-size: 25px;
    }
}

.company-register-flow .form .actions-toolbar button {
    max-width: 320px;
    width: 100%;
    @media screen and (width <= 767px) {
        max-width: 100%;
    }
    @media screen and (width >= 1440px) {
        max-width: 400px;
    }
}

.company-register-flow .form .actions-toolbar .secondary {
    margin-top: 24px;
    flex-direction: column;
    @media screen and (width <= 767px) {
        margin-top: 16px;
    }
}

.company-register-flow .form.password .note {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: var(--weightBold);
    @media screen and (width >= 1440px) {
        font-size: 30px;
    }
}

.company-register-flow .field.captcha .captcha-image {
    display: flex;
    margin-top: 24px;
    gap: 24px;
    @media screen and (width <= 767px) {
        justify-content: start;
        flex-wrap: wrap;
    }
}

.company-register-flow .field.captcha .captcha-image button {
    color: rgba(90, 146, 219, 1);
    text-decoration: underline;
    font-weight: var(--weightBold);
    font-size: 16px;
    padding: 0;
    border: 0;
    background-color: transparent;
    @media screen and (width >= 1440px) {
        font-size: 25px;
    }
}

.field input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    bottom: 0;
    cursor: pointer;
}

.field.field.choice label {
    display: flex;
    align-items: center;
}

.field.field.choice label > * {
    max-width: calc(100% - 36px);
    @media screen and (width >= 1440px) {
        max-width: calc(100% - 56px);
    }
}

.field input[type="checkbox"] + label:before {
    content: '';
    cursor: pointer;
    display: block;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA0NSA0NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMi45MjE2IiB5PSIyLjg2ODg3IiB3aWR0aD0iMzkuNjQzIiBoZWlnaHQ9IjM5LjY0MyIgcng9IjkuOTEwNzQiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjIuOTIxNiIgeT0iMi44Njg4NyIgd2lkdGg9IjM5LjY0MyIgaGVpZ2h0PSIzOS42NDMiIHJ4PSI5LjkxMDc0IiBzdHJva2U9IiNEMUQ1REIiIHN0cm9rZS13aWR0aD0iMy45NjQzIi8+Cjwvc3ZnPgo=");
    width: 24px;
    height: 24px;
    background-size: 24px;
    margin-inline-end: 8px;
    @media screen and (width >= 1440px) {
        width: 40px;
        height: 40px;
        background-size: 40px;
        margin-inline-end: 12px;
    }
}

.field input[type=checkbox]:checked+label:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA0NSA0NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMi43NDk3MyIgeT0iMi44Njg4NyIgd2lkdGg9IjM5LjY0MyIgaGVpZ2h0PSIzOS42NDMiIHJ4PSI5LjkxMDc0IiBmaWxsPSIjNUE5MkRCIi8+CjxyZWN0IHg9IjIuNzQ5NzMiIHk9IjIuODY4ODciIHdpZHRoPSIzOS42NDMiIGhlaWdodD0iMzkuNjQzIiByeD0iOS45MTA3NCIgc3Ryb2tlPSIjNUE5MkRCIiBzdHJva2Utd2lkdGg9IjMuOTY0MyIvPgo8cGF0aCBkPSJNMTguMzMzNyAzMS43OTgzQzE4LjE4NTQgMzEuNzkzMyAxOC4wMzk3IDMxLjc1ODEgMTcuOTA1NSAzMS42OTQ4QzE3Ljc3MTMgMzEuNjMxNSAxNy42NTE1IDMxLjU0MTQgMTcuNTUzMyAzMS40MzAyTDEwLjE5MTEgMjQuMDY3OUMxMC4wNTA3IDIzLjk3NjkgOS45MzI4MyAyMy44NTUyIDkuODQ2MzggMjMuNzExOUM5Ljc1OTkzIDIzLjU2ODcgOS43MDcxNSAyMy40MDc3IDkuNjkyMDIgMjMuMjQxMUM5LjY3NjkgMjMuMDc0NSA5LjY5OTgyIDIyLjkwNjYgOS43NTkwNyAyMi43NTAyQzkuODE4MzEgMjIuNTkzNyA5LjkxMjMzIDIyLjQ1MjggMTAuMDM0IDIyLjMzOEMxMC4xNTU3IDIyLjIyMzIgMTAuMzAxOSAyMi4xMzc1IDEwLjQ2MTUgMjIuMDg3NUMxMC42MjEyIDIyLjAzNzUgMTAuNzkwMSAyMi4wMjQzIDEwLjk1NTUgMjIuMDQ5MUMxMS4xMjEgMjIuMDczOSAxMS4yNzg2IDIyLjEzNiAxMS40MTY2IDIyLjIzMDZDMTEuNTU0NSAyMi4zMjUzIDExLjY2OTIgMjIuNDUgMTEuNzUxOSAyMi41OTU0TDE4LjMzMzcgMjkuMTMzMUwzMy43NTAzIDEzLjc2MDdDMzMuOTU3OSAxMy42MjYyIDM0LjIwNDYgMTMuNTY1MiAzNC40NTA5IDEzLjU4NzVDMzQuNjk3MyAxMy42MDk5IDM0LjkyOSAxMy43MTQzIDM1LjEwODkgMTMuODg0MUMzNS4yODg4IDE0LjA1MzggMzUuNDA2NiAxNC4yNzkgMzUuNDQzMiAxNC41MjM3QzM1LjQ3OTkgMTQuNzY4MyAzNS40MzM0IDE1LjAxODEgMzUuMzExMSAxNS4yMzMyTDE5LjExNDEgMzEuNDMwMkMxOS4wMTYgMzEuNTQxNCAxOC44OTYxIDMxLjYzMTUgMTguNzYxOSAzMS42OTQ4QzE4LjYyNzcgMzEuNzU4MSAxOC40ODIgMzEuNzkzMyAxOC4zMzM3IDMxLjc5ODNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
}