/* ========================================
   HOMES.COM Solutions 2.0
   Component: Form 2
======================================== */
.paragraph--type--form-2 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--g-m);
    padding: var(--sp-m) var(--sp-horizontal);
    margin: 0 auto;

    &.bg-color-alt {
        .main-wrapper .bottom-form-wrapper .form-inner .webform-flex--container>.form-item>input:not([type="checkbox"]) {
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-slate-300);
            background: var(--color-white);
            margin-bottom: 0;
            height: 40px;
        }
    }

    &.bg-color-default {
        .main-wrapper .bottom-form-wrapper .form-inner .webform-flex--container>.form-item>input:not([type="checkbox"]) {
            border-radius: var(--radius-sm);
            border: 1px solid var(--color-slate-300);
            background: var(--color-slate-50);
            margin-bottom: 0;
            height: 40px;
        }
    }

    .main-wrapper {
        display: flex;
        width: 1280px;
        justify-content: center;
        align-items: flex-start;
        gap: var(--g-m);

        .top-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            flex: 1 0 0;
            align-self: stretch;
            height: 611px;
        }

        .text-wrapper {
            display: flex;
            padding: var(--cp-s) var(--cp-m) var(--cp-s) 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 40px;
            align-self: stretch;

            .heading-wrapper {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 24px;
                align-self: stretch;

                .logo {
                    max-width: 377px;
                }
            }

            .text-md {
                font-weight: 300;
            }

            .bottom-wrapper {
                align-items: flex-start;
                gap: var(--g-xs);
                display: flex;
            }
        }

        .lower-wrapper {
            display: flex;
            flex-direction: column;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--g-m);
            flex: 1 0 0;
            align-self: stretch;
            max-width: 624px;

            .sub-area {
                .heading-xxs {}
            }

            .bottom-form-wrapper {
                padding: var(--cp-m);

                .form-spinner {
                    background: inherit;
                    padding: 35px;
                    height: 530px;
                    width: 540px;
                    display: none;

                    .circle-spinner {
                        background: url(/solutions/themes/custom/themekit/dist/assets/images/svg/spinner.svg);
                        background-repeat: no-repeat;
                        height: 100%;
                        margin: 0 auto;
                        width: 50px;
                        display: flex;
                        align-content: center;
                        margin-top: 40%;
                        display: none;
                    }
                }

                .form-inner {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: flex-start;
                    flex: 1 0 0;
                    align-self: stretch;
                    gap: var(--g-m);

                    .webform-flex--container>.form-item>input:not([type="checkbox"]) {
                        border-radius: var(--radius-sm);
                        border: 1px solid var(--color-slate-300);
                        background: var(--color-slate-50);
                        margin-bottom: 0;
                        height: 40px;
                    }

                    form {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        flex: 1 0 0;
                        align-self: stretch;
                        gap: var(--g-s);

                        .webform-flexbox {
                            display: flex;
                            margin: 0;
                            gap: var(--g-s);
                        }
                    }

                    .webform-flex--container>.form-item>label {
                        color: var(--color-slate-900);
                        font-family: Outfit;
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 300;
                        line-height: 150%;
                    }

                    .webform-flex--container>.form-item {
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                    }

                    .webform-flexbox .webform-flexbox {
                        margin: 0;
                        gap: var(--g-s);
                    }

                    .form-item-markup {
                        margin: 0;

                        p {
                            margin-bottom: 0;
                        }
                    }

                    .webform-flex--container {
                        margin: auto;
                    }

                    .form-flexbox {
                        display: flex;
                        margin: 0;
                        gap: var(--g-s);
                        flex-direction: column;
                    }

                    .edit-flexbox {
                        display: flex;
                        flex-direction: row;
                        gap: var(--g-s);

                        .webform-flexbox .webform-flexbox {
                            margin: 0;
                        }
                    }

                    #edit-flexbox-04 {
                        margin: 0;
                    }

                    .form-actions {
                        margin: 0;
                    }

                    input[type="submit" i] {
                        border-style: none;
                        display: flex;
                        align-items: flex-end;
                    }
                }

            }
        }
    }

    @media (max-width: 767px) {
        padding: var(--sp-s) var(--sp-horizontal);

        .main-wrapper {
            flex-direction: column;

            .content-wrapper {
                flex-direction: column;
            }

            .top-wrapper {
                display: flex;
                padding: 0;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--g-m);
                align-self: stretch;
                width: 100%;

                .text-wrapper {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: var(--g-xxs);
                    align-self: stretch;
                    padding: 0;
                }
            }

            .bottom-form-wrapper {
                display: flex;
                padding: var(--Card-Padding-CP-M, 24px);
                flex-direction: column;
                align-items: flex-start;
                gap: var(--Gap-G-S, 24px);
                align-self: stretch;

                .webform-flexbox {
                    display: flex;
                    margin: 0;
                    gap: var(--g-s);
                    flex-direction: column;
                }

            }
        }
    }

}