.ts-wrapper.single > .ts-control {
    background-image: none !important;
    box-shadow: none !important;
    background-repeat: no-repeat !important;
}

.ts-wrapper > .ts-dropdown {
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
    border-width: 1px !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    border-radius: 0.5rem !important;
    width: 100% !important;
    padding: 0.625rem !important;
}

.ts-wrapper > .ts-dropdown:focus {
    color: rgb(59 130 246 / var(--tw-text-opacity, 1)) !important;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important;
}

.ts-control {
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
    border-width: 1px !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    border-radius: 0.5rem !important;
    display: block !important;
    width: 100% !important;
    padding: 0.625rem !important;
}

.ts-control > input {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.ts-control:focus{
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important;
}

/*  px-5 py-2.5 text-center me-2 mb-2*/
.ts-wrapper.multi > .ts-control > .item {
    margin-bottom: 0.125rem !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    background-image: linear-gradient(to right, rgb(59, 130, 246), rgb(37, 99, 235), rgb(29, 78, 216)) !important;
    font-weight: 500 !important;
    border-radius: 0.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    text-align: center !important;
}

.ts-wrapper.multi > .ts-control > .item:hover {
    background-image: linear-gradient(to right bottom, rgb(59, 130, 246), rgb(37, 99, 235), rgb(29, 78, 216)) !important;
}

.ts-wrapper.multi > .ts-control > .item > a {
    border-left-width: 1px;
    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1)) !important;
}

.ts-dropdown-content > .option.active {
    --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important;
    background-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

html.dark .ts-wrapper > .ts-dropdown {
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

html.dark .ts-control {
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    caret-color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

html.dark .ts-control > input {
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

html.dark .ts-control::placeholder {
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important;
}