.tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    /*        border: 1px solid #dee2e6;*/
    /*        border-radius: 5px;*/
}

    .tags-input span {
        background-color: #007bff;
        color: #fff;
        padding: 2px 10px;
        border-radius: 3px;
        display: flex;
        align-items: center;
    }

        .tags-input span .remove-tag {
            margin-right: 12px;
            cursor: pointer;
            font-weight: bold;
            padding: 0;
        }

    .tags-input input {
        border: none;
        outline: none;
        flex-grow: 1;
        min-width: 150px;
    }

.progress-bar {
    background-color: hotpink;
    border-radius: 5px
}


.custom-upload-file {
    background-color: aliceblue;
    min-width: 150px;
    min-height: 100px;
    border: dashed 2px blue;
    border-radius: 5px;
    display: flex
}

    .custom-upload-file .history-file-upload {
        margin: 10px;
    }

    .custom-upload-file .history-file-img {
        width: 100px;
        aspect-ratio: 1;
    }




.dt-container .bottom {
    display: flex;
    padding: 5px;
}

    .dt-container .bottom .dt-info {
        padding: 7px 10px;
    }

    .dt-container .bottom .dt-paging {
        margin-right: auto;
    }

.dt-container .top {
    padding: 10px;
}

.tox-editor-container .tox-toolbar .tox-toolbar__group:last-child {
    position: absolute;
    top: 0;
    left: 0;
}

.tox-menubar *, .tox-toolbar *, .tox-dialog-wrap * {
    font-family: IRANSansWeb !important;
}

.align-center {
    text-align: center;
}

.dialog-footer-line {
    margin: 10px -16px;
}

.history-file-upload {
    text-align: center;
}

    .history-file-upload img {
        padding: 10px;
        max-width: 160px;
    }

    .history-file-upload input {
        display: none;
    }




.control-label {
    width: 100%;
    font-weight: bolder;
    margin-top: 10px;
}

.select2-selection--multiple {
    overflow: hidden !important;
    height: 38px !important;
}

.modal-w-full {
    width: 90% !important;
    max-width: 90% !important;
}


.flex-container-filter {
    display: flex;
    gap: 8px; /* فاصله بین ورودی‌ها */
    width: 100%; /* یا هر مقدار دلخواه */
}

    .flex-container-filter inpu {
        flex-grow: 1; /* پر کردن فضای باقی‌مانده */
    }

    .flex-container-filter select {
        width: 70px; /* ثابت نگه داشتن عرض ورودی دوم */
    }

.input-clearable {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .input-clearable .form-control {
        padding-left: 2.2rem; /* جا برای دکمه */
    }

    .input-clearable .clear-btn {
        position: absolute;
        left: 8px; /* برای RTL مناسب */
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: transparent;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        color: #999;
        display: none;
    }

        .input-clearable .clear-btn:hover {
            color: #333;
        }

    /* وقتی input مقدار دارد دکمه نمایش داده شود */
    .input-clearable .form-control:not(:placeholder-shown) + .clear-btn {
        display: block;
    }


.star-rating {
    direction: rtl;
    display: inline-flex;
    font-size: 2rem;
    cursor: pointer;
}

.star {
    color: #ccc;
    transition: color 0.2s;
    margin: 0 3px;
}

    .star.active,
    .star:hover,
    .star:hover ~ .star {
        color: gold;
    }