.find-designer.vertical-form {

    .form-content {
        position: relative;
    }

    label {
        font-family: 'BodyFont', sans-serif;
        font-size: 0.9375rem;
        letter-spacing: unset;
    }

    input[name="other_type"] {
        margin-top: 0.7em;
    }

    .validation-message {
        bottom: -1.25rem;
        color: red;
        font-size: 0.8rem;
        margin-top: 0.35em;
        position: absolute;
        right: 0;
        text-align: right;
    }
}

.find-designer.horizontal-form {

    .form-content {
        position: relative;
    }

    .validation-message {
        bottom: -1rem;
        color: red;
        font-size: 0.75rem;
        margin-top: 0.35em;
        position: absolute;
        right: 0;
        text-align: right;
    }
}

.findCNY {
    min-height: calc( 100vh - 80px ) !important;
    opacity: 1;
    transition: 200ms all ease-out;

    .theme-container__inner {
        min-height: inherit;
    }

    .theme-container__wrapper {
        min-height: inherit;
        position: unset;
    }

    /* .shortcode-module.filter-form {
        position: unset;
    } */

    .form-block {
        min-height: calc( 100vh - 80px ) !important;
    }

    .vertical-form {
        transition: 400ms all ease-out;

        label {
            color: #333;
            font-family: 'BodyFont', sans-serif;
            font-size: 1.125rem;
            letter-spacing: unset;
            padding-bottom: 0.25em;
        }
    }

    .preloader {
        background-color: #fff;
        left: 0;
        min-height: calc(100vh - 80px);
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10;
        transition: 400ms all ease-out;

        .loading-message__text {
            background-color: #fff;
            border-radius: 4px;
            margin: 0 2.22em;
            text-align: center;
    
            p strong {
                color: var(--bodyColor);
            }
        }
    }
}

.CNYMatchFinder {
    min-height: calc(100vh - 80px) !important;

    .theme-section__wrapper {
        max-width: unset;
        transition: 400ms all ease-out;
    }

    .theme-container__wrapper {
        min-height: calc(100vh - 80px) !important;
        padding: 2em 0;
    }

    .filter-form {
        label {
            color: #333;
            font-family: 'BodyFont', sans-serif;
            font-size: 1.125rem;
            letter-spacing: unset;
            padding-bottom: 0.5em;
        }
    }

    .loading-message {
        min-height: calc(100vh - 80px) !important;

        .loading-message__text {
            background-color: #fff;
            border-radius: 4px;
            margin: 0 2.22em;
            text-align: center;
    
            p strong {
                color: var(--bodyColor);
            }
        }
    }

    .submission-block {
        min-height: calc( 100vh - 144px ) !important;

        .filter-form {
            max-width: 612px;
            margin: 0 auto;
            width: 100%;
        }
    }

    .submission-block.stylebook-selection {

        .form-content__wrapper {
            width: 100% !important;

            .check-img-fieldset {
                max-width: unset !important;
            }
        }

        .stylebook-wrapper {
            margin: 0 auto;
            max-width: 1094px;
            padding: 0 2.1875em;
            position: relative;
            width: 100%;

            .stylebook-head {
                display: flex;
                flex-flow: row wrap;
                gap: 1em;
                justify-content: space-between;
                padding-bottom: 1em;

                & > div {
                    @media( max-width:640px ) {
                        width: 100%;
                    }
                }

                .form-violator {
                    padding-bottom: 0 !important;
                }
            }
        }

        .like-counter {
            align-items: center;
            background-color: #ff999a;
            border-radius: 0 5px 5px 0;
            display: flex;
            flex-flow: column nowrap;
            gap: 0.25em;
            justify-content: center;
            left: 0;
            padding: 1em;
            position: absolute;
            text-align: center;
            top: -1rem;
            z-index: 5;

            @media( max-width:640px ) {
                border-radius: 5px 0 0 5px;
                left: unset;
                right: 0;
            }

            span {
                color: #fff;
                font-size: 0.9375rem;
                text-transform: uppercase;

                strong {
                    color: #fff;
                    font-size: 0.6875rem;
                    letter-spacing: 2px;
                }
            }
        }

        .button-group {
            padding: 0 2.1875em;
        }

        .validation-message {
            bottom: -1.25rem !important;
            left: 50% !important;
            margin: 0 auto;
            max-width: 1094px;
            padding: 0 2.6875em;
            transform: translateX(-50%);
        }
    }

    .find-designer-query {
        display: block;

        .find-designer-query__wrapper {
            align-items: center;
            display: flex;
            flex-flow: row;
            gap: 0em;
            justify-content: center;
            transition: 400ms all ease-out;

            .submission-block {
                align-items: center;
                display: flex;
                justify-content: center;
                width: 100%;

                .form-content__wrapper {
                    height: 100%;
                    width: 85%;
                    display: flex;
                }

                fieldset {
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto;
                    max-width: 612px;
                    width: 100%;

                    .form-content--2col {
                        display: flex;
                        gap: 1em;

                        @media( max-width:640px ) {
                            flex-flow: row wrap;
                        }
                    }
                    
                    .form-content {
                        padding-bottom: 1.15em;
                        position: relative;
                        width: 100%;

                        label {
                            color: #333;
                            font-family: 'BodyFont', sans-serif;
                            font-size: 1.125rem;
                            letter-spacing: unset;
                            padding-bottom: 0.25em;
                        }

                        span.form-violator {
                            color: #333;
                            font-size: 0.9375rem;
                            padding-bottom: 1em;
                        }

                        .validation-message {
                            bottom: -2px;
                            color: red;
                            font-size: 0.8rem;
                            left: 0;
                            margin-top: 0.35em;
                            position: absolute;
                        }
                    }
                }    

                fieldset.check-img-fieldset {
                    max-width: 1024px;
                }    

                .form-content-check {

                    label {
                        position: relative;

                        .img-zoom {
                            align-items: center;
                            background-color: rgb(var(--accent));
                            bottom: 0;
                            display: flex;
                            height: 2rem;
                            justify-content: center;
                            position: absolute;
                            right: 0;
                            width: 2rem;

                            i {
                                color: #fff;
                            }
                        }
                    }
                }

                .image-selection {
                    display: grid;
                    gap:1rem;
                    grid-template-columns: repeat( auto-fill, minmax(241px, 1fr) );
                    max-height: 30rem;
                    overflow: auto;
                    padding-right: 1em;
                    width: 100%;

                    @media( max-width:640px ) {
                        grid-template-columns: 1fr 1fr;
                        padding-right: unset;
                    }

                    input[type="checkbox"] {
                        display:none;
                    }

                    .stylebook-accent {
                        align-items: center;
                        background-color: rgb(var(--primary));
                        display: flex;
                        grid-column-start: 2;
                        grid-row-start: 1;
                        height: 100%;
                        justify-content: center;
                        padding: 1.5em;
                        text-align: center;
                        width: 100%;

                        @media( max-width:640px ) {
                            grid-column: 1 / -1;
                            grid-column-start: 1;
                        }

                        strong {
                            color: #fff;
                        }
                    }

                    .form-content-check {
                        position: relative;
                        width: 100%;
                    }
        
                    .img-wrapper {
                        padding-bottom: 0;
                        width: 100%;
                    }
        
                    .img-cont {
                        display: flex;
                        height: 23.875rem;
                        justify-content: center;
                        position: relative;
                        width: 100%;

                        @media( max-width:640px ) {
                            height: 15rem;
                        }

                        a {
                            width: 100%;
                        }
    
                        picture {
                            width: 100%; 

                            img {
                                height: 100%;
                                object-fit: cover;
                                width: 100%;       
                            }
                        }

                        label {
                            background-color: #f9faf9;
                            border-radius: 6px;
                            bottom: 0;
                            cursor: pointer;
                            margin: 1em;
                            max-width: 105px;
                            position: absolute;
                            width: 100%;

                            .like-button__wrapper {
                                margin: 0.45em;
                                position: relative;

                                div.like-button--like {
                                    height: 100%;
                                    left: 0;
                                    position: absolute;
                                    top: 0;
                                    width: 100%;

                                    span {
                                        align-items: center;
                                        background-color: rgb(var(--primary));
                                        border-radius: 4px;
                                        color: #fff;
                                        display: flex;
                                        font-size: 0.95rem;
                                        height: 100%;
                                        justify-content: center;
                                        letter-spacing: 3px;
                                        margin-right: -3px;
                                        text-transform: uppercase;
                                        width: 100%;
                                    }
                                }

                                span.like-button--liked {
                                    align-items: center;
                                    color: #a7a59a;
                                    display: flex;
                                    font-size: 0.95rem;
                                    justify-content: center;
                                    letter-spacing: 3px;
                                    line-height: 1;
                                    margin-right: -3px;
                                    padding: 0.7em 1.1em;
                                    text-transform: uppercase;
                                }
                            }
                            
                        }
                        
                    }
        
                    .img-wrapper span {
                        text-align: center;
                    }
    
                    .img-overlay::after {
                        content: '';
                        background-color: rgba(var(--buttonPrimaryColor), 0.9);
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        top: 0;
                        left: 0;
                        filter: opacity(1);
                    }
                }
            }
        }
    }
}

.onEmptyFocus {
    border: 1px solid red !important;
}

.search-handler {
    bottom: 0;
    left: 0;
    max-width: 390px;
    padding: 1em;
    position: fixed;
    width: 100%;
    z-index: 45;
    animation: fadeIN 1000ms;

    @media( max-width:640px ) {
        max-width: unset;
        padding: unset;
    }

    .search-handler__wrapper {
        background-color: #fff;
        border-radius: 4px;
        border: 3px solid rgb(var(--accent));
        display: flex;
        flex-flow: column nowrap;
        gap: 0.75em;
        padding: 1em;
        position: relative;

        @media( max-width:640px ) {
            background: linear-gradient(70deg, #4BFFF0 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(30deg, #00ffcb 60%, #00CEA5 60%);
            border-radius: unset;
            border: unset;
        }
    }

    .search-handler__close {
        cursor: pointer;
        padding: 0.25em;
        position: absolute;
        right: 0;
        top: 0;

        i {
            font-size: 1.4rem;
            color: #b1b1b1;
            
            @media( max-width:640px ) {
                color: #fff;
            }
        }
    }

    .search-handler__heading {
        color: #A3A092;
        font-family: 'SecondaryFont', sans-serif;
        font-size: 0.75rem;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;

        @media( max-width:640px ) {
            color: var(--bodyColor);
        }
    }

    .search-handler__content {
        align-items: center;
        display: flex;
        font-size: 0.9375rem;
        gap: 1em;
        
        img {
            border-radius: 50%;
            height: 5.625rem; 
            object-fit: cover;
            width: 5.625rem; 

            @media( max-width:640px ) {
                height: 4.625rem; 
                width: 4.625rem;
            }
        }

        .right-content {
            flex-grow: 1;

            strong {
                color: var(--bodyColor);
            }
        }
    }
}

.form-message-prompt {
    align-items: center;
    display: flex;
    height: calc(100% + 1px);
    left: 0;
    padding: 1em 2.22em;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 55;

    .form-message-prompt__wrapper {
        align-items: center;
        display: flex;
        gap: 1em;
        justify-content: space-between;
    }

    .form-message {
        color: #fff;
        font-size: 1.0625rem;
    }

    .form-message--close > i {
        color: #fff;
        cursor: pointer;
        font-size: 1.5rem;
    }
}

.form-message-prompt.incomplete-message {
    background-color: rgb(var(--primary));
}

.form-message-prompt.error-message {
    background-color: #FF9999;
}

.form-message-prompt.success-message {
    background-color: rgb(var(--primary));
}

.form-message-thankyou {
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    height: 100vh;
    left: 0;
    padding: 1em 2.22em;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 55;

    .form-message-prompt__wrapper {
        align-items: center;
        background-color: #fff;
        border-radius: 4px;
        display: flex;
        flex-flow: column nowrap;
        gap: 2.5em;
        justify-content: center;
        max-width: 715px;
        padding: 5.9375em;

        @media( max-width:640px ) {
            padding: 2.75em;
        }
    }

    .form-message {

        h2 {
            font-size: 2rem;
            margin-bottom: 0.85em;
        }
    }
}

.shortcode-form.contact-us {
    .form-content {
        position: relative;

        .validation-message {
            color: red;
            font-size: 0.9375rem;
            font-style: italic;
            left: 0;
            margin-top: 0.35em;
        }
    }
}

@keyframes fadeIN {
    0% { filter: opacity(0); }
    100% { filter: opacity(1); }
}