/* ST Translation File Interface Styles */

/* ========================================
   Dropzone Core Styles
   ======================================== */

/* Dropzone Base */
#stfDropzone.dropzone {
    height: calc(100% - 250px);
    min-height: 230px;
    position: relative;
    border: none;
    background-color: #F8F9FB;
    padding: 0;
}

#stfDropzone.dropzone .dz-message {
    margin: 0;
    font-size: 110%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

/* Disable cursor when disabled */
.dropzone.dz-clickable.disable-div {
    cursor: default;
}

/* Drag over state */
#stfDropzone.dropzone.stf-drag-over {
    background-color: #EEF7FF;
}

.stf-dropzone-dragover-text {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1763A2;
    line-height: 2;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.stf-dropzone-dragover-text img {
    width: 24px;
    height: 24px;
    order: 2;
}

.stf-dropzone-dragover-text span {
    order: 1;
}

.dropzone.dz-clickable.disable-div .dz-message,
.dropzone.dz-clickable.disable-div .dz-message * {
    cursor: default;
}

.stf-content-main{
    min-height: 90px;
}

/* File Upload Dropzone */
.stf-dropzone-container {
    background: var(--BlueGray08);
    border: 2px dashed var(--Cobalt02);
    border-radius: var(--Radius-M);
    padding: var(--Spacing-XL) var(--Spacing-L);
    width: 100%;
    box-sizing: border-box;
    position: relative; /* For absolute positioned overlay */
}

/* When dragging over - keep blue border */
.stf-dropzone-container.stf-drag-over {
    background: var(--Cobalt08);
    border-color: var(--Cobalt02);
}

/* When has error - remove container's border, error message will have its own */
.stf-dropzone-container.stf-has-error {
    background: transparent;
    border: none;
    padding: 0;
}

/* When has file(s) uploaded - no border */
.stf-dropzone-container.stf-has-file {
    background: var(--Cobalt08);
    border: none;
}

/* When translating - no border */
.stf-dropzone-container.stf-translating {
    border: none;
}

/* Dropzone Content */
.stf-dropzone-content {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-L);
    align-items: center;
    justify-content: center;
}

/* File Type Icons */
.stf-file-types {
    display: flex;
    gap: 23.5px;
    align-items: center;
}

.stf-file-types-image {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.stf-file-type-icon {
    width: 41.125px;
    height: 47px;
    position: relative;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* Drag & Drop Text */
.stf-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-M);
    align-items: center;
    justify-content: center;
    width: 100%;
}

.stf-dropzone-main-text {
    font-size: var(--size-sm);
    font-weight: 400;
    color: var(--Black-Black04);
    text-align: center;
    line-height: normal;
}

.stf-dropzone-main-text .stf-select-file {
    font-weight: 700;
    color: var(--Cobalt02);
    cursor: pointer;
}

.stf-dropzone-main-text .stf-select-file-disabled {
    color: #717172;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
}

.stt-placeholder-warning .stf-select-file-warning-disabled {
    color: #717172;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
}

.stf-dropzone-main-text .stf-cursor-icon {
    display: inline-block;
    width: 28.608px;
    height: 28.608px;
    transform: rotate(344.792deg);
    vertical-align: middle;
    margin-right: 4px;
}

/* Upload Info List */
.stf-upload-info {
    max-width: 100%;
}

.stf-upload-info ul {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    font-size: var(--size-xs);
    font-weight: 400;
    color: var(--Black-Black04);
    line-height: normal;
    text-align: left;
}

.stf-upload-info ul li {
    margin-bottom: 6px;
    text-align: left;
}

.stf-upload-info ul li:last-child {
    margin-bottom: 0;
}

.stt-placeholder-warning {
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    color: var(--Black-Black04);
    font-weight: 400;
}

.stt-placeholder-warning span {
    font-weight: 700;
}

/* File Preview */
.stf-file-preview {
    display: flex;
    align-items: center;
    gap: var(--Spacing-S);
    padding: 0;
    margin: 0;
    min-height: 32px;
}

.stf-file-preview .stf-remove-file {
    width: 16px;
    height: 16px;
    margin-right: var(--Spacing-XS);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.stf-file-preview .stf-remove-file:hover {
    opacity: 1;
}

.stf-file-preview .stf-file-dot {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stf-file-preview .stf-file-name {
    font-size: 15px;
    color: #222;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drag Over Message */
.stf-drag-over-message {
    width: 100%;
    text-align: center;
    color: var(--Cobalt02);
    font-size: var(--size-md);
    font-weight: 700;
    line-height: 32px;
    word-wrap: break-word;
    pointer-events: none;
}

.stf-drag-over-message img {
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

/* Hide original dropzone message when file exists */
.stf-dropzone-container.stf-has-file .stf-dropzone-content {
    display: none;
}

/* Hide fallback input to prevent flicker */
.stf-dropzone-fallback {
    display: none;
}

/* Hide dropzone preview */
#stfDropzone .dz-preview {
    display: none !important;
}

/* ========================================
   Dropzone Error Message Styles (Figma Design)
   ======================================== */

.stf-dropzone-error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.stf-dropzone-error-message {
    background: #F2F3F5;
    border: 2px dashed #C90012;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    min-height: 86px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
}

.stf-dropzone-error-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stf-dropzone-error-icon svg {
    width: 24px;
    height: 24px;
}

.stf-dropzone-error-text {
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    color: #C90012;
    line-height: normal;
    padding-right: 32px;
}

.stf-dropzone-error-close {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

/* ========================================
   File Upload List Styles
   ======================================== */

.stf-file-upload-list {
    display: flex;
    flex-direction: column;
    padding:  0;
    width: 100%;
    min-height: auto !important;
    max-height: 328px;
    overflow-y: auto;
}

.stf-translation-boxes:has(.stf-file-upload-list > *) {
    padding: var(--Spacing-XL) 0;
}

.stf-file-upload-list::-webkit-scrollbar {
    width: 6px;
}

.stf-file-upload-list::-webkit-scrollbar-track {
    background: transparent;
}

.stf-file-upload-list::-webkit-scrollbar-thumb {
    background-color: var(--BlueGray03);
    border-radius: 3px;
}

.stf-file-upload-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--BlueGray02);
}

.stf-file-upload-item {
    display: flex;
    flex-direction: column;
    /* gap: 4px; */
    padding: 8px 0;
    background: #FFFFFF;
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-row {
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 8px 8px 8px 0;
}

.stf-file-upload-status-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stf-file-upload-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.stf-file-upload-status.uploading svg {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.stf-file-upload-status-text {
    font-size: 14px;
    font-weight: 700;
    color: #0284C2;
}

.stf-file-upload-name-container {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.stf-file-upload-dot {
    font-size: 16px;
    color: #000000;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stf-file-upload-name {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    flex-shrink: 1;
    width: 0;
}

.stf-file-upload-progress-bar {
    display: flex;
    height: 6px;
    width: 100%;
    background: #E6E8EC;
    position: relative;
}

.stf-file-upload-progress-fill {
    height: 100%;
    background: #0284C2;
    transition: width 0.3s ease;
    width: 0%;
}

.stf-file-upload-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 4px solid #F2F3F5;
    background: #F2F3F5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.stf-file-upload-btn:hover:not(:disabled) {
    background: #E6E8EC;
    border-color: #E6E8EC;
}

.stf-file-upload-btn:disabled {
    cursor: not-allowed;
    background: #F2F3F5;
    border-color: #F2F3F5;
}

.stf-file-upload-btn:disabled svg path {
    fill: #C0C5D0;
}

.stf-file-upload-btn:not(:disabled) {
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.stf-file-upload-btn:not(:disabled) svg path {
    fill: #1763A2;
}

.stf-file-upload-btn svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   File Upload Item State Management
   ======================================== */

/* Base file upload item with state support */
.stf-file-upload-item {
    background: white;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* row-gap: 4px; */
    padding: 8px 0 0 0;
    position: relative;
    width: 100%;
    min-height: 58px; /* Ensure consistent height regardless of progress bar or border */
    transition: background-color 0.2s ease;
}

.stf-file-upload-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.stf-file-upload-content {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.stf-file-upload-list-content {
    flex: 1;
    display: flex;
    gap: 4px;
    align-items: center;
    min-width: 0;
}

/* Row 2: Status section (left aligned) - now includes cancel button */
.stf-file-upload-row2 {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 0 8px 0 0;
}

.stf-file-upload-status-section {
    display: flex;
    gap: 4px;
    align-items: center;
}

.stf-file-upload-status-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stf-file-upload-status-icon svg {
    width: 15px;
    height: 15px;
}

/* Animated sync icon - but NOT for task-done */
.stf-file-upload-sync-icon {
    animation: stf-sync-spin 1.5s linear infinite;
}

/* Remove animation for task-done icon in translate_complete state */
.stf-file-upload-item[data-state="translate_complete"] .stf-file-upload-sync-icon {
    animation: none;
}

@keyframes stf-sync-spin {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes stf-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stf-file-upload-status-text {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    white-space: pre;
}

/* Row 1: Main content section */
.stf-file-upload-row1 {
    flex: 1;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

/* Language tag */
.stf-file-upload-language-tag {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
}

.stf-file-upload-language-badge {
    background: #D5EBDF;
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
}

.stf-file-upload-language-text {
    font-size: 14px;
    font-weight: 600;
    color: #04883D;
    text-align: center;
    white-space: pre;
    line-height: 19px;
}

/* Title section */
.stf-file-upload-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

/* Actions wrapper for count and edit buttons */
.stf-file-upload-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Word count display - Updated for Figma design */
.stf-file-upload-word-count {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.stf-file-upload-wordcount-icon {
    width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stf-file-upload-wordcount-icon svg {
    width: 100%;
    height: 100%;
}

.stf-file-upload-wordcount-text {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    white-space: pre;
    line-height: normal;
}

/* Error display */
.stf-file-upload-error-section {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.stf-file-upload-error {
    display: flex;
    gap: 4px;
    align-items: center;
}

.stf-file-upload-error-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stf-file-upload-error-icon svg {
    width: 18px;
    height: 18px;
}

.stf-file-upload-error-text {
    font-size: 14px;
    font-weight: 400;
    color: #D22B3A;
    white-space: pre;
    line-height: normal;
}

/* OCR badge (top-right) */
.stf-file-upload-ocr-badge {
    position: absolute;
    top: 0;
    right: 0.2px;
    width: 18px;
    height: 18px;
}

.stf-file-upload-ocr-badge svg {
    width: 100%;
    height: 100%;
}

/* Action buttons */
.stf-file-upload-result-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-shrink: 0;
}

.stf-file-upload-result-btn {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
    height: 24px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background 0.2s;
}

.stf-file-upload-result-btn:hover {
    background: #EEF7FF;
}

.stf-file-upload-result-btn-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stf-file-upload-result-btn-icon svg {
    width: 100%;
    height: 100%;
}

.stf-file-upload-result-btn-text {
    font-size: 14px;
    font-weight: 600;
    color: #1763A2;
    text-align: center;
    white-space: pre;
    line-height: normal;
}

.stf-file-upload-download-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #F2F3F5;
    border: 4px solid #F2F3F5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.stf-file-upload-download-btn:hover {
    background: #E6E8EC;
    border-color: #E6E8EC;
}

.stf-file-upload-download-btn svg {
    width: 16px;
    height: 16px;
}

/* Progress bar (Gauge) - NEW FIGMA DESIGN */
/* When visible, replaces border-bottom. When hidden, show border-bottom instead */
.stf-file-upload-gauge {
    display: flex;
    height: 0;
    width: 100%;
    align-items: flex-start;
    flex-shrink: 0;
    background: #E6E8EC;
    overflow: hidden;
    position: relative;
    transition: height 0.2s ease;
}

.stf-gauge-on {
    height: 100%;
    background: #0284C2;
    flex-shrink: 0;
    width: 40%;
    position: absolute;
}

/* Continuous animation class - only apply when needed */
.stf-gauge-on.stf-gauge-continuous {
    animation: stf-progress-slide 1.5s ease-in-out infinite;
}

@keyframes stf-progress-slide {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

.stf-gauge-off {
    display: none;
}

/* NEW: Sync icon wrapper and animation */
.stf-file-upload-status-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stf-file-upload-sync-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    animation: stf-sync-spin 1.5s linear infinite;
}

@keyframes stf-sync-spin {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Nakaguro dot icon */
.stf-file-upload-dot {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.stf-file-upload-status-text {
    font-size: 14px;
    font-weight: 700;
    color: #0284C2;
    line-height: normal;
    white-space: pre;
}

/* NEW: Count and Edit button styles */
.stf-file-count-btn,
.stf-file-edit-btn {
    width: auto;
    height: 32px;
    box-sizing: border-box;
    border: unset;
    border-radius: 4px;
    background: var(--mono-blue-gray-blue-gray-06-f-2-f-3-f-5, #F2F3F5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 4px 8px;
    gap: 4px;
    flex-shrink: 0;
    background-color: #F2F3F5;
}

.stf-file-count-btn:has(.stf-file-btn-label-ensable):hover{
    background:#C9E6FF;
}

.stf-file-count-btn img,
.stf-file-edit-btn img{
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.stf-file-edit-btn:has(.stf-file-btn-label-ensable):hover{
    background:#C9E6FF;
}

.stf-file-edit-btn.stf-btn-disabled span.stf-file-state-ocr img{
    filter: brightness(0) saturate(100%) invert(80%) sepia(2%) saturate(8%) hue-rotate(317deg) brightness(106%) contrast(85%);
}
/* Disabled state - gray background */
.stf-btn-disabled {
    cursor: not-allowed;
}

.stf-btn-disabled img {
    display: block;
}

/* Enabled state - no background, blue icon */
.stf-btn-enabled {
    cursor: pointer;
}

.stf-btn-enabled:hover {
    background: #EEF7FF;
    border-radius: 4px;
}

.stf-btn-enabled img {
    display: block;
}

/* Error icon and text */
.stf-file-upload-error {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.stf-file-upload-error-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ========================================
   STATE-SPECIFIC STYLES
   ======================================== */

/* UPLOADING STATE - Show progress bar, no border */
.stf-file-upload-item[data-state="uploading"] {
    border-bottom: none;
}

.stf-file-upload-item[data-state="uploading"] .stf-file-upload-status-text {
    color: #0284C2;
}

.stf-file-upload-item[data-state="uploading"] .stf-file-upload-gauge {
    height: 6px; /* Show progress bar */
}

.stf-file-upload-item[data-state="uploading"] .stf-file-upload-gauge-on {
    background: #0284C2;
}

.stf-file-upload-item[data-state="uploading"] .stf-file-upload-status-icon svg path {
    fill: #0284C2;
}

/* COUNTING STATE - Show progress bar, no border */
.stf-file-upload-item[data-state="counting"] {
    border-bottom: none;
}

.stf-file-upload-item[data-state="counting"] .stf-file-upload-status-text {
    color: #0284C2;
}

.stf-file-upload-item[data-state="counting"] .stf-file-upload-gauge {
    height: 6px; /* Show progress bar */
}

.stf-file-upload-item[data-state="counting"] .stf-file-upload-gauge-on {
    background: #0284C2;
}

.stf-file-upload-item[data-state="counting"] .stf-file-upload-status-icon svg path {
    fill: #0284C2;
}

/* UPLOAD_COMPLETE STATE - Hide progress bar, show border */
.stf-file-upload-item[data-state="upload_complete"] {
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-item[data-state="upload_complete"] .stf-file-upload-gauge {
    height: 0; /* Hide progress bar but keep in layout */
}

/* Override: When preparing to count (showProgressBar = true but status still upload_complete) */
.stf-file-upload-item[data-state="upload_complete"].stf-preparing-count .stf-file-upload-gauge {
    height: 6px !important; /* Force show progress bar */
    display: flex !important;
}

/* COUNT_COMPLETE STATE - Hide progress bar, show border */
.stf-file-upload-item[data-state="count_complete"] {
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-item[data-state="count_complete"] .stf-file-upload-gauge {
    height: 0; /* Hide progress bar but keep in layout */
}

/* FILE_ERROR STATE - Hide progress bar, show border */
.stf-file-upload-item[data-state="file_error"] {
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-item[data-state="file_error"] .stf-file-upload-gauge {
    height: 0; /* Hide progress bar but keep in layout */
}

/* COUNT_ERROR STATE - Hide progress bar, show border */
.stf-file-upload-item[data-state="count_error"] {
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-item[data-state="count_error"] .stf-file-upload-gauge {
    height: 0; /* Hide progress bar but keep in layout */
}

.stf-file-upload-item[data-state="count_error"] .stf-file-upload-wordcount-text ,
.stf-file-upload-item[data-state="translate_error"] .stf-file-upload-wordcount-text {
    color: #D22B3A;
}

.stf-file-upload-item[data-state="count_error"] .stf-file-upload-wordcount-icon,
.stf-file-upload-item[data-state="translate_error"] .stf-file-upload-wordcount-icon {
    filter: invert(25%) sepia(92%) saturate(3062%) hue-rotate(343deg) brightness(80%) contrast(96%);
}

/* TEXT_PROCESSING STATE - Show progress bar with green color, no border */
.stf-file-upload-item[data-state="text_processing"] {
    border-bottom: none;
}

.stf-file-upload-item[data-state="text_processing"] .stf-file-upload-status-text {
    color: #04883D;
}

.stf-file-upload-item[data-state="text_processing"] .stf-file-upload-gauge {
    height: 6px; /* Show progress bar */
}

.stf-file-upload-item[data-state="text_processing"] .stf-gauge-on {
    background: #04883D; /* Green color */
}

.stf-file-upload-item[data-state="text_processing"] .stf-file-upload-status-icon svg path {
    fill: #04883D;
}

/* TRANSLATION_PENDING STATE - Show progress bar with green color, no border */
.stf-file-upload-item[data-state="translation_pending"] {
    border-bottom: none;
}

.stf-file-upload-item[data-state="translation_pending"] .stf-file-upload-status-text {
    color: #04883D;
}

.stf-file-upload-item[data-state="translation_pending"] .stf-file-upload-gauge {
    height: 6px; /* Show progress bar */
}

.stf-file-upload-item[data-state="translation_pending"] .stf-gauge-on {
    background: #04883D; /* Green color */
}

/* TRANSLATING STATE - Show progress bar with percentage and green color, no border */
.stf-file-upload-item[data-state="translating"] {
    border-bottom: none;
}

.stf-file-upload-item[data-state="translating"] .stf-file-upload-status-text {
    color: #04883D;
}

.stf-file-upload-item[data-state="translating"] .stf-file-upload-gauge {
    height: 6px; /* Show progress bar */
}

.stf-file-upload-item[data-state="translating"] .stf-gauge-on {
    background: #04883D; /* Green color */
    animation: none; /* No animation, will be controlled by percentage */
    position: relative; /* Change from absolute to relative for percentage control */
}

.stf-file-upload-item[data-state="translating"] .stf-file-upload-status-icon svg path {
    fill: #04883D;
}

/* TRANSLATE_COMPLETE STATE - Hide progress bar, show border */
.stf-file-upload-item[data-state="translate_complete"] {
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-item[data-state="translate_complete"] .stf-file-upload-status-text {
    color: #04883D;
}

.stf-file-upload-item[data-state="translate_complete"] .stf-file-upload-gauge {
    height: 0; /* Hide progress bar but keep in layout */
}

.stf-file-upload-item[data-state="translate_complete"] .stf-file-upload-status-icon svg circle {
    fill: #04883D;
}

.stf-file-upload-item[data-state="translate_complete"] .stf-file-upload-status-icon svg path {
    stroke: white;
}

/* CONVERTING STATE - Show progress bar, no border */
.stf-file-upload-item[data-state="file_converting"] {
    border-bottom: none;
}

.stf-file-upload-item[data-state="file_converting"] .stf-file-upload-status-text {
    color: #0284C2;
}

.stf-file-upload-item[data-state="file_converting"] .stf-file-upload-gauge {
    height: 6px; /* Show progress bar */
}

.stf-file-upload-item[data-state="file_converting"] .stf-file-upload-gauge-on {
    background: #0284C2;
}

.stf-file-upload-item[data-state="file_converting"] .stf-file-upload-status-icon svg path {
    fill: #0284C2;
}

/* OCR_NEEDED STATE - Hide progress bar, show border */
.stf-file-upload-item[data-state="ocr_needed"] {
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-item[data-state="ocr_needed"] .stf-file-upload-gauge {
    height: 0; /* Hide progress bar but keep in layout */
}

/* FILE CONVERT COMPLETE STATE - Hide progress bar, show border */
.stf-file-upload-item[data-state="file_convert_complete"] {
    border-bottom: 1px solid #D9DCE3;
}

.stf-file-upload-item[data-state="file_convert_complete"] .stf-file-upload-gauge {
    height: 0; /* Hide progress bar but keep in layout */
}

/* ========================================
   HOVER STATES
   ======================================== */

/* Hover effect on entire item (except error states) */
.stf-file-upload-item[data-state="uploading"]:hover,
.stf-file-upload-item[data-state="counting"]:hover,
.stf-file-upload-item[data-state="upload_complete"]:hover,
.stf-file-upload-item[data-state="count_complete"]:hover,
.stf-file-upload-item[data-state="translation_pending"]:hover,
.stf-file-upload-item[data-state="text_processing"]:hover,
.stf-file-upload-item[data-state="translating"]:hover,
.stf-file-upload-item[data-state="translate_complete"]:hover,
.stf-file-upload-item[data-state="ocr_needed"]:hover,
.stf-file-upload-item[data-state="file_converting"]:hover,
.stf-file-upload-item[data-state="file_convert_complete"]:hover,
.stf-file-upload-item[data-state="translate_scheduled"]:hover {
    background: #EEF7FF;
    cursor: pointer;
}

/* Error states hover - use same blue background as normal states */
.stf-file-upload-item[data-state="file_error"]:hover,
.stf-file-upload-item[data-state="count_error"]:hover,
.stf-file-upload-item[data-state="translate_error"]:hover {
    background: #EEF7FF;
}

/* Close button (X) for file items */
.stf-file-close-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Show close button on hover for specific states (NOT for translating/text_processing/translate_complete) */
.stf-file-upload-item[data-state="uploading"] .stf-file-close-btn,
.stf-file-upload-item[data-state="counting"] .stf-file-close-btn,
.stf-file-upload-item[data-state="file_converting"] .stf-file-close-btn,
.stf-file-upload-item[data-state="upload_complete"] .stf-file-close-btn,
.stf-file-upload-item[data-state="count_complete"] .stf-file-close-btn,
.stf-file-upload-item[data-state="translation_pending"] .stf-file-close-btn,
.stf-file-upload-item[data-state="file_error"] .stf-file-close-btn,
.stf-file-upload-item[data-state="count_error"] .stf-file-close-btn,
.stf-file-upload-item[data-state="upload_error"] .stf-file-close-btn,
.stf-file-upload-item[data-state="translate_error"] .stf-file-close-btn,
.stf-file-upload-item[data-state="word_limit_error"] .stf-file-close-btn,
.stf-file-upload-item[data-state="file_convert_complete"] .stf-file-close-btn{
    display: flex;
}

.stf-file-close-btn img {
    width: 24px;
    height: 24px;
    display: block;
}

.stf-file-close-btn:hover {
    opacity: 0.7;
}

/* ========================================
   Cancel Button for Translating State
   ======================================== */
.stf-file-cancel-btn {
    padding: 2px var(--Spacing-S, 8px);
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    gap: var(--Spacing-XS, 4px);
    border: 1px solid var(--Cobalt02, #1763A2);
}

.stf-file-cancel-btn:hover {
    background: var(--Cobalt07, #C9E6FF);
    border-radius: 4px;
}

.stf-file-cancel-btn img {
    width: 18px;
    height: 18px;
    display: block;
}

.stf-file-cancel-btn span{
    font-size: var(--size-sm, 14px);
    color: var(--Cobalt02, '#1763A2');
}

/* ========================================
   Translation Result and Download Buttons
   ======================================== */

.stf-file-trans-result-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    height: 24px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background 0.2s;
    flex-shrink: 0;
    min-width: 88px;
    justify-content: center;
}

.stf-file-trans-result-btn:hover {
    background: #C9E6FF;
}

.stf-file-trans-result-btn img {
    width: 16px;
    height: 16px;
    display: block;
}

.stf-file-trans-result-text {
    font-size: 14px;
    font-weight: 600;
    color: #1763A2;
    text-align: center;
    white-space: pre;
    line-height: normal;
}

.stf-file-download-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #F2F3F5;
    border: 4px solid #F2F3F5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.stf-file-download-btn:hover {
    background: #E6E8EC;
    border-color: #E6E8EC;
}

.stf-file-download-btn img {
    width: 16px;
    height: 16px;
    display: block;
}


/* ========================================
   PDF OCR Dialog Styles
   ======================================== */

/* Dialog Overlay */
.stf-ocr-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dialog Content */
.stf-ocr-dialog-content {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 16px 16px -8px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
    padding: 40px;
    max-width: 1080px;
    width: 1080px;
    max-height: 90vh;
    position: relative;
}

/* Dialog Header */
.stf-ocr-dialog-header {
    margin-bottom: 40px;
    position: relative;
}

.stf-ocr-dialog-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    padding-right: 40px;
}

.stf-ocr-dialog-close {
    position: absolute;
    right: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Dialog Body */
.stf-ocr-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Source Language */
.stf-ocr-source-lang {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 321px;
}

.stf-ocr-label {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

.stf-ocr-required {
    color: #D22B3A;
    margin-left: 4px;
}

.stf-ocr-select {
    background: #FFFFFF;
    border: 1px solid #B3B9C6;
    border-radius: 4px;
    height: 36px;
    padding: 4px 8px;
    font-size: 14px;
    color: #000000;
    width: 100%;
}

.stf-ocr-select option:first-child {
    color: #B3B9C6;
}

/* Table */
.stf-ocr-table-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*== T4VPM-20 2026/01/12 MOD VNJ START ==*/
.stf-ocr-table-header {
    display: grid;
    grid-template-columns: 1fr 160px 160px 160px;
    gap: 24px;
    font-size: 16px;
    font-weight: 700;
    color: #313131;
}
/*== T4VPM-20 2026/01/12 MOD VNJ END ==*/

.stf-ocr-table-body {
    display: flex;
    flex-direction: column;
    max-height: 210px;
    overflow-y: auto;
}

.stf-ocr-table-body::-webkit-scrollbar {
  width: 6px;
}

.stf-ocr-table-body::-webkit-scrollbar-track {
  background: var(--BlueGray06, #F2F3F5);
  border-radius: var(--Radius-L, 16px);
}

.stf-ocr-table-body::-webkit-scrollbar-thumb {
  background: var(--BlueGray03, #CCD0D9);
  border-radius: var(--Radius-L, 16px);
}

.stf-ocr-table-body::-webkit-scrollbar-thumb:hover {
  background: var(--BlueGray02, #C0C5D0);
}

/*== T4VPM-20 2026/01/12 MOD VNJ START ==*/
.stf-ocr-file-row {
    display: grid;
    grid-template-columns: 1fr 160px 160px 160px;
    gap: 24px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #B3B9C6;
}
/*== T4VPM-20 2026/01/12 MOD VNJ END ==*/

.stf-ocr-file-name {
    font-size: 16px;
    color: #000000;
}

.stf-ocr-format-select {
    background: #FFFFFF;
    border: 1px solid #B3B9C6;
    border-radius: 4px;
    height: 36px;
    padding: 4px 8px;
    font-size: 14px;
    color: #000000;
    width: 100%;
}

.stf-ocr-format-select option:first-child {
    color: #B3B9C6;
}

.stf-ocr-radio-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stf-ocr-radio {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #939394;
    border-radius: 50%;
    outline: none;
    position: relative;
    background: #FFFFFF;
    flex-shrink: 0;
}

/* Checked state - 5px blue border */
.stf-ocr-radio:checked {
    border: 4px solid #1763A2;
    background: #FFFFFF;
}

/* Hover state (enabled only) */
.stf-ocr-radio:not(:disabled):hover {
    border-color: #1763A2;
}

/* Disabled state - gray background, gray border */
.stf-ocr-radio:disabled {
    cursor: not-allowed;
    background: #F8F9FB;
    border: 1px solid #D9DCE3;
}

/* Disabled checked state */
.stf-ocr-radio:disabled:checked {
    background: #F8F9FB;
    border: 1px solid #D9DCE3;
}

/* Dialog Footer */
.stf-ocr-dialog-footer {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.stf-ocr-submit-btn {
    background: #1763A2;
    border: 1px solid #1763A2;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 154px;
}

.stf-ocr-submit-btn:hover {
    background: #145080;
}

.stf-ocr-submit-btn:disabled {
    background: #F2F3F5;
    border-color: #F2F3F5;
    cursor: not-allowed;
    color: #C0C5D0;
    font-weight: 600;
}

.stf-ocr-loading {
    background-color: #F2F3F5 !important;
    border-color: #F2F3F5 !important;
    color: #1763A2 !important;
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    cursor: not-allowed;
}

.stf-ocr-sync-custom {
    animation: stf-sync-spin 1.5s linear infinite;
}

.stf-ocr-loading-text {
    color: #1763A2 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 27px !important;
}

.stf-ocr-submit-btn .stf-ocr-default-text {
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
}

.stf-ocr-submit-btn:disabled .stf-ocr-default-text {
    color: #C0C5D0;
    font-weight: 600;
}

/* Reusable styles from translate_text.css */
/* These can be shared between translate text and translate file */

/* Service Bar - Can be reused */
.stf-service-bar {
    border-bottom: 1px solid var(--BlueGray05);
    position: relative;
}

.stf-service-content {
    overflow: hidden;
}

.stf-service-label {
    line-height: 33px;
    min-width: max-content;
}

.stf-service-buttons {
    gap: 10px;
    min-height: 27px;
    cursor: default;
}

.stf-service-button {
    background-color: #F2F3F5;
    border: none;
    gap: 4px;
    padding: 4px 16px;
    border-radius: var(--Spacing-XS);
    width: 152px;
    color: #717172;
    white-space: nowrap;
    line-height: 18px;
    border: none !important;
    height: 28px;
}

.btn-service-mode-ultra {
    padding: 4px 10px !important;
}

/* Icon school - change when active */
.btn-service-mode-ultra.active .icon-school {
    content: url('/_common/images/member/v1/rztapp/translate_file/school.svg');
}

.btn-service-mode-ultra.stf-external-api-option.active {
    background-color: #F2F3F5;
}
.btn-service-mode-ultra.stf-external-api-option.active::after {
    content: '';
    width: 112px;
    height: 2px;
    position: absolute;
    left: 20px;
    bottom: 0;
    border-radius: 1px;
    background: #1763A2;
}
.btn-service-mode-ultra.stf-external-api-option.active.en::after {
    width: 147px;
}

.stf-service-button.active {
    background-color: #C9E6FF;
    color: #1763A2;
    border: none !important;
}
.stf-service-button:not(.active):hover {
    background-color: var(--Cobalt08) !important;
}
.stf-service-button.stf-external-api-option:not(.active):hover {
    background-color: #F2F3F5 !important;
    color: #1763A2;
}

.stf-service-button.en {
    width: 187px !important;
}


/* Upper Area */
.stf-upper-area {
    gap: var(--Spacing-S);
}

/* Header */
.stf-header {
    gap: var(--Spacing-S);
    padding: 0 var(--Spacing-M);
    box-sizing: border-box;
}

.stf-title-section {
    gap: var(--Spacing-M);
    min-height: 1px;
    min-width: 1px;
    padding: var(--Spacing-M) 0 var(--Spacing-XS) 0;
    box-sizing: border-box;
}

.stf-title {
    color: var(--black-black-01-text-primary);
    white-space: nowrap;
    line-height: 1;
}

/* Tabs - Can be reused */
.stf-tabs {
    min-height: 1px;
    min-width: 1px;
}

.stf-tab {
    background-color: var(--White);
    height: 32px;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--BlueGray02);
    border-bottom: none;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.stf-tab:hover {
    background-color: var(--Cobalt08);
}

.stf-tab.active {
    background-color: var(--Cobalt08);
    border-color: var(--Cobalt02);
}

.stf-tab-content {
    gap: var(--Spacing-S);
    min-height: 1px;
    min-width: 1px;
    padding: var(--Spacing-S) var(--Spacing-S) var(--Spacing-S) 0;
    width: 148px;
    box-sizing: border-box;
    color: var(--Cobalt02);
    white-space: nowrap;
    line-height: 1;
}

.stf-tab.active .stf-tab-content {
    font-weight: 700;
}

.stf-tab-bar {
    background-color: var(--Cobalt02);
    height: 1px;
    width: 100%;
}

/* Action Bar */
.stf-action-bar {
    padding: 0 var(--Spacing-L);
    box-sizing: border-box;
}

.stf-action-left {
    min-height: 1px;
    min-width: 1px;
}

.stf-clear-button {
    overflow: hidden;
    border-radius: var(--Spacing-XS);
    border: none;
    background: transparent;
    color: var(--BlueGray02);
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
    line-height: 19px;
    transition: color 0.2s ease;
}

.stf-clear-button:not(.disabled) {
    color: var(--Cobalt02);
}

.stf-clear-button.disabled {
    cursor: not-allowed;
    color: var(--BlueGray02);
}

.stf-clear-button .stf-clear-icon {
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.stf-clear-button.disabled .stf-clear-icon {
    filter: brightness(0) saturate(100%) invert(80%) sepia(2%) saturate(8%) hue-rotate(317deg) brightness(106%) contrast(85%);
}

/* Checkbox - Can be reused */
.stf-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--Grey-Grey05, #e0e0e0);
    border-radius: 2px;
    cursor: pointer;
    background-color: var(--White);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.stf-checkbox:checked {
    background-color: var(--Cobalt02, #1763a2);
    border-color: var(--Cobalt02, #1763a2);
}

.stf-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--White);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.stf-checkbox:hover {
    border-color: var(--Cobalt02, #1763a2);
}

.stf-checkbox:disabled {
    background-color: var(--Grey-Grey05, #e0e0e0);
    border-color: var(--Grey-Grey05, #e0e0e0);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Translate Button */
.stf-translate-button {
    background-color: var(--BlueGray06);
    gap: var(--Spacing-S);
    padding: var(--Spacing-XS) var(--Spacing-S);
    border-radius: var(--Spacing-XS);
    width: 160px;
    border: none;
    font-weight: 400;
    color: var(--BlueGray02);
    white-space: nowrap;
    line-height: 19px;
    cursor: not-allowed;
    box-sizing: border-box;
}

.stf-translate-button:not(.disabled):hover {
    background-color: var(--GC-Cobalt03);
    color: var(--White);
}

.stf-translate-button:not(.disabled) {
    background-color: var(--Cobalt02);
    color: var(--White);
    cursor: pointer;
}

/* Language Selector - Can be reused */
.stf-language-selector {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding:0 0 8px 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.stf-language-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    min-height: 1px;
    min-width: 1px;
}

.stf-language-title {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 24px 0 16px;
    width: 100%;
    box-sizing: border-box;
}

.stf-language-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--black-black-01-text-primary);
    white-space: nowrap;
    line-height: 19px;
}

.stf-language-selectors {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0px 8px 16px;
    width: 100%;
    box-sizing: border-box;
}

.stf-language-from,
.stf-language-to {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 480px;
    min-height: 1px;
    min-width: 1px;
}

.stf-language-select {
    background-color: var(--White);
    display: flex;
    height: 36px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--BlueGray01);
    font-weight: 400;
    font-size: 14px;
    color: var(--black-black-01-text-primary);
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
}

.stf-language-arrow {
    display: flex;
}

/* Execution Options - Can be reused */
.stf-execution-options {
    display: flex;
    gap: 16px;
    width: 100%;
    border-top: 1px solid var(--BlueGray04);
    box-sizing: border-box;
}

.stf-execution-settings {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    width: 140px;
}

.stf-execution-title {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    line-height: 19px;
    padding-bottom: 4px;
}

.stf-execution-select {
    background-color: var(--White);
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 8px;
    border-radius: 4px;
    width: 100%;
    border: 1px solid var(--BlueGray01);
    font-weight: 400;
    font-size: 14px;
    color: var(--black-black-01-text-primary);
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
}

/* Execution Note */
.stf-execution-note {
    height: 28px;
}

.stf-execution-note img {
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
}

.stf-execution-note #stf-current-reservations {
    padding: var(--Spacing-XS);
    background: var(--Cobalt08);
}

.stf-error-alert-content{
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 8px;
}

.stf-error-alert-content .stf-error-alert-message{
    color: #D22B3A;
}

.stf-file-state-ocr{
    position: absolute;
    top: -4px;
    right: calc(100% - 40px);
}

.stf-ocr-select2-dropdown .select2-results__option:not(.select2-results__option--group){
    padding: 8px !important;
    line-height: 19px;
}

.stf-ocr-select2-dropdown .select2-results__options--nested .select2-results__option--selected:not(.select2-results__option--highlighted){
    background-color: transparent !important;
    color: inherit !important;
}

.stf-ocr-select2-dropdown .select2-results__option:has(.stf-ocr-option-selected) {
    background: #EEF7FF !important;
    color: #626263 !important;
    outline: 2px solid #7FC5FF !important;
    outline-offset: -2px;
    border-radius: 4px;
}

.stf-ocr-select2-dropdown .select2-results__options {
    max-height: 280px !important;
}


.link_policy{
    gap: 10px;
    height: 24px;
}

.link_policy-content{
    color: var(--Cobalt02) !important;
    font-size: 14px;
    line-height: 100%;
}

.link_policy-img{
    height: 24px;
}

/* Select Box GPT Bunya */
.select-gpt-bunya {
    background-color: #fff;
}

.select-gpt-bunya .select2-container .select2-selection:hover {
    background-color: #EEF7FF;
}

.select-gpt-bunya .select2-container--default .select2-selection--single,
.select-gpt-bunya .select2-container--default .select2-selection--single:focus-visible{
    border: none;
}

.select-gpt-bunya .select2-container .select2-selection--single {
    height: 36px !important;
    padding: 4px 0;
}

.select-gpt-bunya .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    color: #313131;
}

/* Icon select box */
.select-gpt-bunya .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 30px;
    height: 30px !important;
    padding: 4px 8px 4px 4px;
    top: 3px !important;
    right: 0 !important;
}

.select-gpt-bunya .select2-container .select2-selection__arrow::after {
    content: "";
    width: 18px;
    height: 18px;
    right: 8px !important
}

/* Add border to the selected option display when dropdown is open AND option is selected */
body:has(.select2-results__option--selected) .select-gpt-bunya .select2-container--open .select2-selection--single {
    border: none !important;
}

/* Fix border and border radius */
body:has(.select-gpt-bunya .select2-container--open) .select2-container--open .select2-dropdown--below {
    border-radius: 0 !important;
    border: 1px solid #CCD0D9 !important;
    border-top: 1px solid #CCD0D9 !important;
}
body:has(.select-gpt-bunya .select2-container--open) .select2-container--open .select2-dropdown--above {
    border-radius: 0 !important;
    border: 1px solid #CCD0D9 !important;
    border-bottom: 1px solid #CCD0D9 !important;
}

/* Css Border, Background color for selected, hover option */
body:has(.select-gpt-bunya .select2-container--open) .select2-container .select2-results__option--selected {
    background-color: #EEF7FF !important;
    border: 2px solid #A4D6FF !important;
}

body:has(.select-gpt-bunya .select2-container--open) .custom-options-dropdown .select2-results ul li:first-child:not(.select2-results__option--selected) {
    background-color: #FFF !important;
}

body:has(.select-gpt-bunya .select2-container--open) .custom-options-dropdown .select2-results ul li.select2-results__option--highlighted:first-child:not(.select2-results__option--selected) {
    background-color: #EEF7FF !important;
}

/* Css height of Options */
body:has(.select-gpt-bunya .select2-container--open) .custom-options-dropdown .select2-results ul li {
    line-height: 19px !important;
    height: auto !important;
    color: #313131 !important
}

/* Css scrollbar */
body:has(.select-gpt-bunya .select2-container--open) .custom-options-dropdown .select2-results ul {
    scrollbar-color: #E3E2E2 #FFF;
}
body:has(.select-gpt-bunya .select2-container--open) .custom-options-dropdown .select2-results ul::-webkit-scrollbar-track {
    background-color: #FFF;
}
body:has(.select-gpt-bunya .select2-container--open) .custom-options-dropdown .select2-results ul::-webkit-scrollbar-thumb  {
    background-color: #E3E2E2;
}

.reference-file-sync-custom {
    animation: stf-sync-spin 1.5s linear infinite;
}

button.stf-file-notes-close-button.stf-line-height-19{
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 19px;
}

.stf-file-btn-label {
    font-size: 14px;
    line-height: 19px;
    font-weight: 400;
    white-space: nowrap;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}

.stf-file-btn-label.stf-file-btn-label-disable {
    color: #C0C5D0;
}

.stf-file-btn-label.stf-file-btn-label-ensable {
    color: #1763A2;
}

.stf-note-estimated-processing-time-utra-mode {
    border: none;
    padding: 4px 0;
    font-size: 14px;
    line-height: 100%;
    color: #717172;
}