@import url("../global/global.css?ver=1.14");
@import url("../layout/header.css");
@import url("../layout/footer.css");

/*details-hero-start*/
.forum-hero {
    position: relative;
    overflow: hidden;
    background-color: rgb(243, 242, 251);
}

@media (min-width: 576px) {
    .forum-hero::before {
        content: "";
        position: absolute;
        inset: 0px;
        background-image: url("../../images/blogs/blog-image.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        opacity: 0.5;
    }

    .forum-hero::after {
        content: "";
        position: absolute;
        inset: 0px;
        background: linear-gradient(90deg, rgba(243, 242, 251, 0) 0%, rgba(243, 242, 251, 0.55) 10%, rgb(243, 242, 251) 30%);
    }
}

.forum-hero .container {
    position: relative;
    z-index: 2;
}

/*details-hero-end*/

/*details-hero-content-start*/
.details-hero-content {
    max-width: 85%;
    z-index: 1;
    position: relative;
    padding: 10px 0 40px;
}

@media (max-width: 576px) {
    .details-hero-content {
        max-width: 100%;
        padding: 10px 0 30px;
    }
}

.details-hero-title {
    font-size: 2rem;
    margin-bottom: 25px;
}

.details-hero-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

@media (max-width: 576px) {
    .details-hero-badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.details-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin-bottom: 25px;
}

.details-hero-meta .details-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-2);
    font-weight: 600;
}

.details-hero-meta .details-hero-meta-item b {
    color: var(--color-text-1);
    font-weight: 700;
}

.details-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.details-hero-actions .btn {
    min-width: 200px;
}

@media (max-width: 576px) {
    .details-hero-title {
        font-size: 1.5rem;
    }

    .details-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .details-hero-actions .btn {
        width: 100%;
    }
}

/*details-hero-content-end*/

/*details-main-start*/
.details-main {
    margin-block: 20px;
}

.details-content {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

/*details-post-card-start*/
.details-post-card {
    padding: 0px;
    overflow: hidden;
}

.details-post-card .details-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 20px;
}

.details-post-card .details-post-header-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.details-post-card .details-post-id {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-2);
}

.details-post-card .details-post-datetime {
    font-size: 12px;
    color: var(--color-text-2);
    font-weight: 600;
}

.details-post-card .details-post-body {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 20px;
}

/*details-post-author-start*/
.details-post-card .details-post-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: 140px;
    row-gap: 6px;
}

.details-post-card .details-post-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 4px;
}

.details-post-card .details-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.details-post-card .details-post-name {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--color-text-1);
    margin-bottom: 0px;
}

.details-post-card .details-post-join {
    font-size: 11px;
    color: var(--color-text-2);
}

.details-post-card .details-post-counters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.details-post-card .details-post-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.details-post-card .details-post-counter-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text-2);
}

.details-post-card .details-post-counter-label {
    font-size: 10px;
    color: var(--color-text-2);
}

/*details-post-author-end*/

/*details-post-content-start*/
.details-post-card .details-post-content {
    flex: 1 1 0%;
    min-width: 0px;
}

.details-post-card .details-post-content p {
    font-size: 14px;
}

.details-post-card .details-post-content p:last-child {
    margin-bottom: 0px;
}

.details-post-card .details-post-content ol {
    margin: 0px 0px 14px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 6px;
}

.details-post-card .details-post-content ol li {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0px;
}

/*details-post-content-end*/

/*details-post-attachments-start*/
.details-post-attachments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 16px;
}

.details-attachment-image {
    width: 150px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgb(236, 236, 236);
}

.details-attachment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.details-attachment-file {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgb(236, 236, 236);
    border-radius: 10px;
    padding: 16px;
    min-width: 180px;
    height: 90px;
}

.details-attachment-file-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #EEEEEE;
}

.details-attachment-file-icon svg {
    width: 35px;
    height: 35px;
}

.details-attachment-file-name {
    font-size: 13px !important;
    font-weight: 700;
    color: var(--color-text-1);
    margin-bottom: 2px;
    text-align: left;
}

.details-attachment-file-size {
    font-size: 11px !important;
    color: var(--color-text-2);
    margin-bottom: 0px !important;
    text-align: left;
}

/*details-post-attachments-end*/

/*details-post-tags-start*/
.details-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.details-post-tags span {
    background-color: #F5F5F5;
    color: var(--color-text-1);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 4px 12px;
    text-align: center;
}

/*details-post-tags-end*/

/*details-post-footer-start*/
.details-post-card .details-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid #EEEEEE;
    padding: 15px 25px;
}

.details-post-card .details-post-footer-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.details-post-card .details-post-action {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
}

.details-post-card .details-post-like {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
}

/*details-post-footer-end*/

/*details-post-card-modifiers-start*/
.details-post-card--accepted {
    background-color: #fafdf9;
    border-color: #aaff8e;
}

.details-post-card--accepted .details-post-header,
.details-post-card--accepted .details-post-footer {
    border-color: #aaff8e;
}

.details-post-card--accepted .details-post-action,
.details-post-card--accepted .details-post-like {
    color: var(--color-text-2);
}

.details-post-card--accepted .details-post-action svg path,
.details-post-card--accepted .details-post-like svg path {
    stroke: var(--color-text-2);
}

.details-post-card--official {
    background-color: #F7F2FA;
    border-color: rgba(105, 43, 140, 0.25);
}

.details-post-card--official .details-post-header,
.details-post-card--official .details-post-footer {
    border-color: rgba(105, 43, 140, 0.15);
}

/*details-post-card-modifiers-end*/

@media (max-width: 576px) {
    .details-post-card .details-post-header {
        padding: 15px;
    }

    .details-post-card .details-post-body {
        flex-direction: column;
        align-items: center;
        padding: 15px;
        row-gap: 15px;
    }

    .details-post-card .details-post-author {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .details-post-card .details-post-avatar {
        width: 48px;
        height: 48px;
        margin-bottom: 0px;
    }

    .details-post-card .details-post-footer {
        padding: 12px 15px;
    }
}

@media (max-width: 500px) {
    .details-post-card .details-post-author {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info info"
            "join counters";
        align-items: center;
    }

    .details-post-card .details-post-author .d-flex:first-child {
        grid-area: info;
    }

    .details-post-card .badge-pill {
        font-size: 11px;
        padding: 2px 10px;
    }

    .details-post-card .details-post-join {
        grid-area: join;
        justify-self: start;
    }

    .details-post-card .details-post-counters {
        grid-area: counters;
        justify-self: end;
        display: flex;
    }

    .details-post-card .details-post-counter {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }
}

/*details-post-card-end*/

/*details-reply-card-start*/
.details-reply-card {
    display: flex;
}

.details-reply-card .details-reply-guest,
.details-reply-card .details-reply-user {
    width: 100%;
    display: none;
}

.details-reply-card.is-guest .details-reply-guest {
    display: block;
}

.details-reply-card.is-logged-in .details-reply-user {
    display: block;
}

/*details-reply-card-end*/

/*details-reply-guest-start*/
.details-reply-guest-title {
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-bottom: 10px;
    text-align: center;
}

.details-reply-guest-subtitle {
    font-size: 13px;
    text-align: center;
    margin-bottom: 20px;
}

.details-reply-guest-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.details-reply-guest-actions .btn {
    flex: 1 1 0%;
    min-width: unset;
}

.details-reply-guest-note {
    background-color: #F5F5F5;
    color: var(--color-text-2);
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    padding: 12px 15px;
    text-align: center;
    margin-bottom: 20px;
}

.details-reply-guest-editor {
    position: relative;
    margin-bottom: 20px;
}

.details-reply-guest-editor-textarea {
    width: 100%;
    background-color: #EDEDED;
    color: var(--color-text-2);
    border: 1px solid rgb(226, 226, 226);
    border-radius: 10px;
    padding: 15px 15px 30px;
    font-size: 13px;
    opacity: .75;
    min-height: 100px;
    resize: none;
}

.details-reply-guest-editor-textarea::placeholder {
    color: var(--color-text-2);
}

.details-reply-guest-editor-textarea:disabled {
    cursor: not-allowed;
}

.details-reply-guest-editor-lock {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.details-reply-guest-contacts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.details-reply-guest-contacts .details-reply-contact-btn {
    flex: 1 1 0%;
    min-width: unset;
    transition: all 0.3s;
    padding: 10px 16px;
}

.details-reply-guest-contacts .details-reply-contact-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 400px) {
    .details-reply-guest-contacts {
        flex-direction: column;
    }

    .details-reply-guest-contacts .details-reply-contact-btn {
        width: 100%;
    }
}

/*details-reply-guest-end*/

/*details-reply-user-start*/
.details-reply-user-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.details-reply-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.details-reply-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.details-reply-user-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-1);
    margin-bottom: 2px;
}

.details-reply-user-status {
    font-size: 12px;
    color: var(--color-text-2);
    margin-bottom: 0px;
}

.details-reply-user-textarea {
    width: 100%;
    border: 1px solid #EEEEEF;
    border-radius: 10px;
    padding: 15px;
    font-size: 13px;
    margin-bottom: 15px;
    outline: none;
    min-height: 180px;
}

.details-reply-user-textarea:focus {
    border-color: var(--primary-color);
}

.details-reply-user-options {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.details-reply-official-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.details-reply-official-label span {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
}

.details-reply-user-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.details-reply-user-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgba(105, 43, 140, 0.08);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    padding: 12px 15px;
}

.details-reply-user-hint svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/*details-reply-user-end*/

/*uploader-start*/
.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

.upload-section .section-title {
    font-size: 20px;
    font-weight: 600;
}

@media (min-width: 576px) {
    .upload-section .section-title {
        font-size: 16px;
    }
}

.upload-section .dropzone {
    border-radius: 10px;
}

.upload-section .dz-message {
    display: none;
}

.upload-section .uploader-card {
    position: relative;
    background-color: #fff;
    border: 2px dashed #D1D1D1;
    box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.02), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
    border-radius: 10px;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    height: 145px;
}

@media (max-width: 400px) {
    .upload-section .uploader-card {
        height: 100%;
        aspect-ratio: 1/1;
    }
}

.upload-section .uploader-card .uploader-default {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.upload-section .uploader-card.hover {
    background: #eafff8;
}

/* وقتی در حالت خطاست، عنوان به بالا راست برود */
.upload-section .uploader-card.error .uploader-title-box {
    position: absolute;
    top: 16px;
    right: 16px;
}

.upload-section .uploader-card.error .uploader-title-box .uploader-title,
.upload-section .uploader-card.error .uploader-title-box .uploader-sub-title {
    text-align: right;
}

/* وقتی در حالت خطاست، دکمه وسط صفحه باشد */
.upload-section .uploader-card.error .uploader-actions {
    position: relative;
    top: 35px;
}

.upload-section .uploader-title-box .uploader-title {
    color: var(--color-text-1);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
}

.upload-section .uploader-title-box .uploader-sub-title {
    color: var(--color-text-2);
    font-size: 10px;
    font-weight: 500;
    text-align: center;

}

.upload-section .uploading-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 16px;
    gap: 16px;
    height: 100px;
    background: #fff;
    border: 1px solid #F6F6F6;
    border-radius: 8px;
}

.upload-section .cancel-btn {
    pointer-events: auto !important;
    z-index: 999;
    position: relative;
}

.upload-section .uploading-row .uploader-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.upload-section .uploading-row .uploader-subtle {
    color: #888888;
    font-size: 10px;
    margin-top: 12px;
}

.upload-section .progress-rail {
    width: 100%;
    height: 8px;
    background: #E7E7E7;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 12px;
}

.upload-section .progress-bar {
    height: 100%;
    width: 0;
    background: #1960dc;
    transition: width .2s linear;
}

.upload-section .uploader-card.error {
    border-color: #ff0034;
}

.upload-section .error-list::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clip-path='url(%23clip0_1505_11819)'><path d='M8.00016 4.16634C8.27631 4.16634 8.50016 4.3902 8.50016 4.66634V8.66634C8.50016 8.94248 8.27631 9.16634 8.00016 9.16634C7.72402 9.16634 7.50016 8.94248 7.50016 8.66634V4.66634C7.50016 4.3902 7.72402 4.16634 8.00016 4.16634Z' fill='%23FF0034'/><path d='M8.00016 11.333C8.36835 11.333 8.66683 11.0345 8.66683 10.6663C8.66683 10.2982 8.36835 9.99967 8.00016 9.99967C7.63197 9.99967 7.3335 10.2982 7.3335 10.6663C7.3335 11.0345 7.63197 11.333 8.00016 11.333Z' fill='%23FF0034'/><path fill-rule='evenodd' clip-rule='evenodd' d='M0.833496 7.99967C0.833496 4.04163 4.04212 0.833008 8.00016 0.833008C11.9582 0.833008 15.1668 4.04163 15.1668 7.99967C15.1668 11.9577 11.9582 15.1663 8.00016 15.1663C4.04212 15.1663 0.833496 11.9577 0.833496 7.99967ZM8.00016 1.83301C4.59441 1.83301 1.8335 4.59392 1.8335 7.99967C1.8335 11.4054 4.59441 14.1663 8.00016 14.1663C11.4059 14.1663 14.1668 11.4054 14.1668 7.99967C14.1668 4.59392 11.4059 1.83301 8.00016 1.83301Z' fill='%23FF0034'/></g><defs><clipPath id='clip0_1505_11819'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>");
    display: inline-block;
    width: 16px;
    height: 16px;
}

.upload-section .error-list {
    color: #ff0034;
    font-size: 12px;
    font-weight: 500;
    text-align: justify;
    padding: 0;
    margin-top: 50px;
    margin-bottom: 0;
    display: flex;
    align-items: start;
    gap: 5px;
}

.upload-section .error-list li {
    list-style-type: none;
    margin-bottom: 0;
}

.upload-section .preview-card {
    position: absolute;
    background: #eafff8;
    color: #fff;
    height: 140px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.02), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
    border-radius: 10px;
}

@media (max-width: 400px) {
    .upload-section .preview-card {
        height: 100%;
        aspect-ratio: 1/1;
    }
}

.upload-section .preview-card .title::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clip-path='url(%23clip0_1505_1510)'><path fill-rule='evenodd' clip-rule='evenodd' d='M10.6668 4.49967C10.2066 4.49967 9.8335 4.87277 9.8335 5.33301C9.8335 5.79325 10.2066 6.16634 10.6668 6.16634C11.1271 6.16634 11.5002 5.79325 11.5002 5.33301C11.5002 4.87277 11.1271 4.49967 10.6668 4.49967ZM8.8335 5.33301C8.8335 4.32049 9.65431 3.49967 10.6668 3.49967C11.6794 3.49967 12.5002 4.32049 12.5002 5.33301C12.5002 6.34553 11.6794 7.16634 10.6668 7.16634C9.65431 7.16634 8.8335 6.34553 8.8335 5.33301Z' fill='%2300A484'/><path fill-rule='evenodd' clip-rule='evenodd' d='M7.96191 0.833008H8.03841C9.57734 0.832999 10.7834 0.832993 11.7244 0.959506C12.6875 1.089 13.4475 1.35923 14.0441 1.95577C14.6406 2.55231 14.9108 3.31232 15.0403 4.27548C15.1668 5.21647 15.1668 6.4225 15.1668 7.96143V8.03792C15.1668 9.57685 15.1668 10.7829 15.0403 11.7239C14.9108 12.687 14.6406 13.447 14.0441 14.0436C13.4475 14.6401 12.6875 14.9103 11.7244 15.0398C10.7834 15.1664 9.57734 15.1663 8.03841 15.1663H7.96191C6.42298 15.1663 5.21696 15.1664 4.27597 15.0398C3.31281 14.9103 2.55279 14.6401 1.95625 14.0436C1.35971 13.447 1.08949 12.687 0.959994 11.7239C0.833481 10.7829 0.833488 9.57685 0.833496 8.03793V7.96142C0.833488 6.42249 0.833481 5.21647 0.959994 4.27548C1.08949 3.31232 1.35971 2.55231 1.95625 1.95577C2.55279 1.35923 3.31281 1.089 4.27597 0.959506C5.21696 0.832993 6.42298 0.832999 7.96191 0.833008ZM2.66336 13.3365C2.28359 12.9567 2.06566 12.4429 1.95108 11.5906C1.84876 10.8296 1.83547 9.85869 1.83375 8.55976L2.83047 7.68764C3.23988 7.32941 3.85693 7.34995 4.2416 7.73463L7.10142 10.5944C7.73138 11.2244 8.72303 11.3103 9.45193 10.798L9.65073 10.6583C10.2228 10.2563 10.9969 10.3028 11.5167 10.7706L13.6657 12.7047C13.6891 12.7258 13.7139 12.7442 13.7398 12.7601C13.632 12.9873 13.4993 13.1741 13.337 13.3365C12.9572 13.7162 12.4434 13.9342 11.5911 14.0488C10.7245 14.1653 9.58565 14.1663 8.00016 14.1663C6.41468 14.1663 5.27587 14.1653 4.40921 14.0488C3.55695 13.9342 3.04313 13.7162 2.66336 13.3365ZM4.40921 1.95059C3.55695 2.06517 3.04313 2.2831 2.66336 2.66287C2.28359 3.04264 2.06566 3.55646 1.95108 4.40873C1.85432 5.12839 1.83718 6.03572 1.83415 7.23065L2.17197 6.93506C2.97759 6.23015 4.19177 6.27058 4.94871 7.02752L7.80852 9.88734C8.09487 10.1737 8.54562 10.2127 8.87694 9.97988L9.07573 9.84017C10.0293 9.17004 11.3193 9.24768 12.1856 10.0273L14.0349 11.6917C14.0399 11.6586 14.0446 11.6249 14.0492 11.5906C14.1658 10.724 14.1668 9.58516 14.1668 7.99967C14.1668 6.41419 14.1658 5.27538 14.0492 4.40873C13.9347 3.55646 13.7167 3.04264 13.337 2.66287C12.9572 2.2831 12.4434 2.06517 11.5911 1.95059C10.7245 1.83407 9.58565 1.83301 8.00016 1.83301C6.41468 1.83301 5.27587 1.83407 4.40921 1.95059Z' fill='%2300A484'/></g><defs><clipPath id='clip0_1505_1510'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>");
    display: inline-block;
    width: 16px;
    height: 16px;
}

.upload-section .preview-card .title {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-section .preview-wrap {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.upload-section .preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 16px;
}

/*uploader-end*/

/*uploaded-files-list-start*/
.upload-section .uploaded-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.upload-section .uploaded-file-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgb(236, 236, 236);
    border-radius: 10px;
    padding: 10px 40px 10px 10px;
    min-height: 90px;
    min-width: 200px;
    flex: 1;
}

.upload-section .uploaded-file-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid rgb(236, 236, 236);
    box-shadow: 0 2px 4px -2px rgba(16, 24, 40, 0.02), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
}

.upload-section .uploaded-file-thumb {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #EEEEEE;
    overflow: hidden;
}

.upload-section .uploaded-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.upload-section .uploaded-file-thumb svg {
    width: 35px;
    height: 35px;
}

.upload-section .uploaded-file-info {
    flex: 1 1 0%;
    min-width: 0px;
}

.upload-section .uploaded-file-name {
    font-size: 13px !important;
    font-weight: 700;
    color: var(--color-text-1);
    margin-bottom: 2px !important;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-section .uploaded-file-size {
    font-size: 11px !important;
    color: var(--color-text-2);
    margin-bottom: 0px !important;
    text-align: left;
}

/*uploaded-files-list-end*/

/*details-main-end*/