/* Loading indicator pour les containers de fichiers */
.loading-indicator-container {
    position: absolute;
    right: 2.5% !important;
    border: 2px solid transparent;
    border-top: 2px solid #000000;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

.loading-indicator.hidden {
    opacity: 0;
}
/* Flashing animation for warning status indicator */
/* Status Indicator Styles for File Container */
.StatusIndicator {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 16px;
    vertical-align: middle;
    box-shadow: 0 0 2px rgba(0,0,0,0.08);
    cursor: pointer;
}
.StatusIndicator--success {
    background: #2ecc40;
    color: #fff;
    border: 2px solid #27ae60;
}
.StatusIndicator--warning {
    background: none;
    color: #f39c12 !important;
    border: 2px solid #f39c12;
}
.StatusIndicator--error {
    background: #e74c3c;
    color: #fff;
    border: 2px solid #c0392b;
}
.StatusIndicator__icon {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}
.StatusIndicator__icon--warning {
    color: #f39c12;
}
.StatusIndicator__icon--error {
    color: #e74c3c;
}

.StatusIndicator--clickable {
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s, filter 0.2s;
}

/* Effet ombré et enfoncé sur tous les clickable */
.StatusIndicator--clickable:hover {
    box-shadow: 0 2px 12px rgba(44,44,44,0.18), 0 1px 4px rgba(44,44,44,0.12);
    filter: brightness(0.98) drop-shadow(0 2px 6px rgba(44,44,44,0.10));
    background: linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
}

.StatusIndicator--success.StatusIndicator--clickable:hover {
    border-color: #27ae60;
    background: linear-gradient(180deg, #eaffea 0%, #c6f5c6 100%);
}
.StatusIndicator--warning.StatusIndicator--clickable:hover {
    border-color: #f39c12;
    background: linear-gradient(180deg, #fffbe6 0%, #f9e5b3 100%);
    box-shadow: 0 2px 12px rgba(243,156,18,0.35), 0 1px 4px rgba(44,44,44,0.12);
    filter: brightness(0.98) drop-shadow(0 2px 6px rgba(243,156,18,0.15));
}
.StatusIndicator--error.StatusIndicator--clickable:hover {
    border-color: #c0392b;
    background: linear-gradient(180deg, #ffeaea 0%, #f5c6c6 100%);
}


.FileContainerEnabled,
.FileContainerDisabled,
.FileContainerProcessing {
    position: relative;
    display: flex;
    padding: 20px;
    /* Ajoute un padding pour un meilleur espacement */
    width: 100%;
    height: calc(var(--height-container)*1.1);
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    flex-direction: row;
    /* Stack items vertically */
    align-items: center;
    /* Center items horizontally */

}


.FileContainerEnabled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.308);
    /* Ajoute une ombre légère */
    background-color: white;
    /* Assurez-vous que le fond est blanc pour un meilleur contraste */
}





.FileContainerDisabled,
.FileContainerProcessing {
    box-shadow: 'none';
    background-color: #f7f3f3;
    pointer-events: 'none';
}

.FileContainer_Name {
    width: 90%;
    color: rgba(0, 0, 0, 0.322);
    text-align: left;
    align-items: center;
    /* Centrer le texte verticalement */
    margin-bottom: 0;
    font-size: calc(var(--font-size)*1);
    margin-left: 0;
}

.FileContainer_ImageContainer {
    display: flex;
    /* Active Flexbox */
    justify-content: center;
    /* Centre les éléments horizontalement */
    align-items: center;
    /* Centre les éléments verticalement */
    height: 27px;
    width: 29px !important;
    left: 1%;
    margin-right: 1%;
    overflow: hidden;
    background-color: #12C2E9;
    border-radius: 4px;
    margin-left: 0;
}



.FileContainer_Image {
    height: var(--font-size) !important;
    border: none !important;
    filter: invert(1);
}

.DownloadButton {
    position: absolute;
    height: 28px !important;
    width: 28px !important;
    opacity: 1;
    border-radius: 15px;
    border: none;
    pointer-events: all;
    right: 2% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.DownloadButton .i {
    height: calc(var(--font-size)*0.5);
}

.DownloadButton:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.RemoveTargetDocumentContainerButton {
    position: absolute;
    height: 2px !important;
    width: 6px !important;
    opacity: 0.3;
    border: none !important;
    pointer-events: all;
    right: 10%;
    display: flex;
    /* Utilise flexbox */
    justify-content: center;
    /* Centre horizontalement */
    align-items: center;
    /* Centre verticalement */
    background-color: #000;
}

.RemoveTargetDocumentContainerButton::before {
    content: '';
    position: absolute;
    top: -10px;
    /* Adjust as needed */
    left: -10px;
    /* Adjust as needed */
    right: -10px;
    /* Adjust as needed */
    bottom: -10px;
    /* Adjust as needed */
    border-radius: 50%;
    /* Make it circular */
    background-color: transparent;
    /* Transparent background */
    pointer-events: all;
    /* Enable pointer events on the pseudo-element */
}

.RemoveTargetDocumentContainerButton:hover {
    opacity: 1;
}















.custom-arrow {
    font-size: calc(var(--height-container)*0.4);
    /* Ajuste la taille de l'icône */
    line-height: 1.5;
    /* Ajuste la hauteur de la ligne */
    color: var(--color);
    /* Optionnel : change la couleur de l'icône */
}

@media screen and (max-width: 768px) and (max-height: 1024px) {



    .RemoveTargetDocumentContainerButton {
        right: 15% !important;
    }



}