﻿/* Left column configuration in desktop configuration */

.create-background > div {
    height: 100%
}

.assura-title-desktop {
    text-align: center;
    width: 270px
}

.icon-banner {
    width: 164px
}

.assura-contact-desktop {
    width: calc(100% - 32px)
}

/******************************************************/

.assura-title-mobile,
.account-create-steps-mobile,
.assura-contact-mobile {
    display: none
}

.error-message {
    position: absolute;
    top: 8px;
    width: 640px
}

.account-create-steps {
    padding-top: 28px
}

    .account-create-steps,
    .account-create-steps > div {
        display: flex;
        justify-content: space-between
    }

        .account-create-steps > div {
            height: 64px;
            align-items: center;
            justify-content: flex-start;
            --widthToSplit: calc(100% - 64px);
            width: calc(var(--widthToSplit) / 3);
            border-bottom-width: 2px;
            border-bottom-style: solid
        }

        .account-create-steps .number {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-right: 12px;
            border-width: 2px;
            border-style: solid;
            border-radius: 12px
        }

@media screen and (max-width: 1343px) {
    body {
        height: auto;
        min-height: 100%;
    }

    .content {
        height: auto;
        min-height: calc(100% - 32px);
        width: calc(100% - 32px);
        margin: 16px
    }

    .error-message {
        position: fixed
    }

    .assura-title-mobile {
        display: block
    }

    .assura-contact-mobile {
        display: flex
    }

    .account-create-steps {
        padding-top: 60px
    }
}

@media screen and (max-width: 895px) {
    .content,
    .w-640 {
        width: 100%
    }

    .content {
        min-height: 100%;
        margin: 0
    }

    .error-message {
        width: calc(100% - 32px);
        left: 16px;
        right: 16px
    }

    .account-create-steps-mobile {
        display: block
    }

    .account-create-steps {
        padding-top: 24px
    }

        .account-create-steps > div {
            height: 0
        }

            .account-create-steps > div > div,
            .account-create-steps > div > .number {
                display: none
            }
}
