#main-form,
#main-form .items-select__input,
#main-form .dropdown-wrapper,
#main-form .dropdown-wrapper__input {
    background-color: var(--FORM);
}

.nav {
    border: none !important;
}

.nav>li>a {
    padding: 8px 12px;
}

.nav-tabs>li>a {
    line-height: 1;
}

.nav-link {
    margin-bottom: 0 !important;
    margin-right: 0.5rem;
    display: flex !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 8px 12px;
    align-items: center;
    gap: 7px;
    transition: none !important;
    font-weight: 500 !important;
}

.nav-link.active {
    color: var(--WHITE) !important;
    background-color: var(--PRIMARY) !important;
}

.nav-link.active path {
    fill: var(--WHITE);
}

.nav-link:hover {
    cursor: pointer;
    color: var(--WHITE) !important;
    background-color: var(--PRIMARY) !important;
}

.nav-link:hover path {
    fill: var(--WHITE);
}

.filter-text {
    bottom: -25px;
    left: 0;
}

.tab-content>.active {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
}

#pills-tab {
    flex-wrap: nowrap !important;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    border: 0 !important;
}

#pills-tab::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1200px) {
    #main-form {
        padding: 15px;
        gap: 10px;
        background-color: var(--FORM);
    }

    #tours {
        min-height: 282px;
    }

    #school {
        min-height: 340px;
    }

    #placements {
        min-height: 280px;
    }

    #excursions {
        min-height: 224px;
    }

    #search-by-text {
        min-height: 108px;
    }

    #pills-tab {
        position: absolute;
        top: -40px;
        left: 0;
        max-width: 100%;
    }

    .nav-link {
        background-color: var(--WHITE) !important;
    }

    .form-wrapper {
        display: flex;
        min-height: 340px;
        background-color: var(--BACKGROUND);
    }
}

@media (min-width: 1200px) {
    #main-form {
        padding: 20px 30px 25px 30px;
        gap: 20px;
    }

    .form-wrapper {
        display: flex;
        width: 100%;
        /* min-height: 228px; */
        background-color: var(--BACKGROUND);
    }

    .form-item {
        height: 45px;
    }

    .form-item--expanded {
        height: 100px;
    }
}