.parsley-error {
    background: #fff !important;
    border-color: #ff5b57 !important;
}
.parsley-error:focus {
    border-color: #cc4946 !important;
    outline: 0;
    box-shadow: 0 0 0 0.125rem rgba(204, 73, 70, 0.3) !important;
}
.parsley-success {
    background: #fff !important;
    border-color: #00acac !important;
}
.parsley-success:focus {
    border-color: #008a8a !important;
    outline: 0;
    box-shadow: 0 0 0 0.125rem rgba(0, 172, 172, 0.3) !important;
}
.parsley-error,
.parsley-success {
    color: #2d353c !important;
    box-shadow: none !important;
}
.parsley-error:focus,
.parsley-success:focus {
    color: #2d353c !important;
}
.form-inline .parsley-errors-list {
    display: none !important;
}
.parsley-errors-list {
    padding: 0 !important;
    list-style-type: none !important;
    margin: 0 !important;
    color: #e5603b;
    font-size: 12px !important;
    line-height: inherit !important;
}
.parsley-errors-list.filled {
    margin-top: 5px !important;
}
textarea {
    resize: none;
}

/* style the background and the text color of the input ... */
.vue-tags-input {
    background: #3f9ce8;
    max-width: none !important;
    width: 100%;
    font-family: "Muli", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.vue-tags-input .ti-new-tag-input {
    background: transparent;
    color: #575757;
    font-family: "Muli", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
}

.vue-tags-input .ti-input {
    padding: 4px 10px;
    border: 1px solid #d4dae3;
    border-radius: 0.25rem;
    transition: border-color ease-in-out 0.15s;
}

/* we cange the border color if the user focuses the input */
.vue-tags-input.ti-focus .ti-input {
    border: 1px solid #ebde6e;
}

/* some stylings for the autocomplete layer */
.vue-tags-input .ti-autocomplete {
    background: #283944;
    border: 1px solid #8b9396;
    border-top: none;
}

/* the selected item in the autocomplete layer, should be highlighted */
.vue-tags-input .ti-item.ti-selected-item {
    background: #ebde6e;
    color: #283944;
}

/* style the placeholders color across all browser */
.vue-tags-input ::-webkit-input-placeholder {
    color: #a4b1b6;
}

.vue-tags-input ::-moz-placeholder {
    color: #a4b1b6;
}

.vue-tags-input :-ms-input-placeholder {
    color: #a4b1b6;
}

.vue-tags-input :-moz-placeholder {
    color: #a4b1b6;
}

/* default styles for all the tags */
.vue-tags-input .ti-tag {
    position: relative;
    background: #3f9ce8 !important;
    color: #ffffff !important;
    font-size: 1em !important;
}

/* we defined a custom css class in the data model, now we are using it to style the tag */
.vue-tags-input .ti-tag.custom-class {
    background: transparent;
    border: 1px solid #ebde6e;
    color: #ebde6e;
    margin-right: 4px;
    border-radius: 0px;
    font-size: 13px;
}

/* the styles if a tag is invalid */
.vue-tags-input .ti-tag.ti-invalid {
    background-color: #e88a74;
}

/* if the user input is invalid, the input color should be red */
.vue-tags-input .ti-new-tag-input.ti-invalid {
    color: #e88a74;
}

/* if a tag or the user input is a duplicate, it should be crossed out */
.vue-tags-input .ti-duplicate span,
.vue-tags-input .ti-new-tag-input.ti-duplicate {
    text-decoration: line-through;
}

/* if the user presses backspace, the complete tag should be crossed out, to mark it for deletion */
.vue-tags-input .ti-tag:after {
    transition: transform .2s;
    position: absolute;
    content: '';
    height: 2px;
    width: 108%;
    left: -4%;
    top: calc(50% - 1px);
    background-color: #000;
    transform: scaleX(0);
}

.vue-tags-input .ti-deletion-mark:after {
    transform: scaleX(1);
}
.cursor-pointer {
    cursor: pointer;
}
.multiselect__tags {
    border-color: #d4dae3 !important;
}
.multiselect__select:before {
    color: #575757 !important;
    border-color: #575757 transparent transparent !important;
}
.daterangepicker.single.show-ranges {
    min-width: 386px !important;
}