.home {
    .search-for-model {
        .input-group {
            flex: 1;
        }
    }
}

.search-for-model {
    form {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }
    .input-group {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: auto;
        // flex: 1;
        @media (max-width: 767px) {
            flex: 1;
        }
        > * {
            flex: 0 0 auto;
            width: auto !important;
            outline: none;
        }
        .form-control {
            flex: 1 1 auto;
            border-radius: 0 !important;
            border: 0;

            @media (max-width: 390px) {
                border-radius: 0 0 0 5px !important;
            }
        }
        .form-select {
            max-width: 108px;
            text-overflow: ellipsis;
            border-radius: 5px 0 0 5px;
            background-color: #e2e6ea;
            color: $text;
            border: 0;
            font-family: $font;
            font-weight: 500;
            font-size: 15px;

            @media (max-width: 390px) {
                max-width: 100%;
                width: 100% !important;
                border-radius: 5px 5px 0 0 !important;
                min-height: 50px;
            }
        }
        .btn-search {
            border-color: #ffffff;
            border-radius: 0 5px 5px 0;
            border-left-width: 0;
            padding: 10px 14px;
            @media (max-width: 390px) {
                border-radius: 0 0 5px 0 !important;
            }
        }
        .search-for-model-content {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            // max-width: calc(100% - 50px);
            // width: 100% !important;
            @media (max-width: 767px) {
                // max-width: calc(100% - 50px);
                width: 100% !important;
            }
            .model-search-select {
                display: flex;
                @media (max-width: 390px) {
                    flex-wrap: wrap;
                    input.form-control {
                        max-width: calc(100% - 49px);
                    }
                }
            }
            .model-search-text {
                border-radius: 5px !important;
                // display: none;
                width: auto;
            }
            .form-select {
                border-radius: 5px 0 0 5px;
            }
        }
    }
    .btn-not-find {
        background: #6c757d;
        border-radius: 4px;
        color: #fff;
        border: none;
        line-height: 36px;
        font-size: 16px;
        text-decoration: none;
        &:hover {
            background-color: $secondary;
            color: #fff;
        }
        @media (max-width: 767px) {
            width: 100%;
        }
    }
}

.search-bar-container {
    background-color: $text;
    .search-for-model {
        max-width: 915px;
        margin: auto;
        padding: 30px 10px;
    }
}

.home {
    .search-for-model {
        .btn-not-find {
            width: 100%;
        }
    }
}