.search-fields {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.chapter-add-panel {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.chapter-add-panel label {
    display: block;
}
.chapter-add-panel .input-field {
    margin-bottom: 0.35rem;
}

.input-field {
    flex-grow: 1;
}

.input-field label i {
    width: 1.5rem;
    text-align: center;
}

.input-field input,  #sort-select+.select-custom-container {
    width: 18.5rem;
}

.input-field div.tag-field {
    width: calc(18.5rem - 5.35rem);
}

.input-field div.tag-field input {
    width: 100%;
}

button.selected {
    background-color: var(--internal-hover-light-block-color);
    padding: 0.55em 1.1em;
    margin: 0.20em 0.15em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.included-tags {
    padding-top: 0.5em;
    margin-bottom: 0.5em!important;
}

.excluded-tags {
    padding-bottom: 0.5em;
}

.included-tags .included-tag {
    display: inherit;
    background-color: var(--included-tags-color);
}

.excluded-tags .excluded-tag {
    display: inherit;
    background-color: var(--excluded-tags-hover-color);
}

.included-tags .included-tag span.is-delete:focus, .included-tags .included-tag span.is-delete:hover {
    background-color: var(--included-tags-hover-color);
}

.excluded-tags .excluded-tag span {
    color: inherit;
}

.tag-field>input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ban-tag-button {
    margin: 0 0.23rem 0 -0.025rem;
}

.add-tag-button {
    margin: 0 0.23rem 0 -0.45rem;
}

.ban-tag-button:hover {
    margin: 0 0.23rem 0 -0.025rem;
    padding: 0.5em 1em;
}

.add-tag-button:hover {
    margin: 0 0.23rem 0 -0.45rem;
    padding: 0.5em 1em;
}

.add-tag-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ban-tag-button {
    border-radius: 0;
}

.advance-search-panel .sorting .sort-buttons {
    display: inline-block;
}

@media (max-width: 651px) {
    .input-field {
        flex-grow: 0;
    }

    .search-tags {
        text-align: center;
    }

    .advance-search-panel .sorting {
        text-align: center;
    }

    .advance-search-panel .sorting .select-custom-container {
        text-align: left;
    }

    .advance-search-panel .sorting .sort-buttons {
        display: block;
    }
}

@media (max-width: 380px) {
    .input-field input, .select-custom-container {
        width: 75vw;
    }

    .input-field div.tag-field {
        width: calc(75vw - 5.35rem);
    }
}