/* background image */
.login-background {
    background-image: url("../Login_Forms_dark.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-content {
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 20px !important;
    border-radius: 10px !important;
    max-width: 600px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;  /* Stack children vertically */
}

/* restyle radio items */
.radio-group .form-check {
    padding-left: 0 !important;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px !important;
}

/* Ajout de marges pour les éléments */
.mt-4 {
    margin-top: 1.5rem;
}

.my-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Positionnement de la clé utilisateur en haut à droite */
.user-key-top-right {
    position: fixed; /* Change position from absolute to fixed */
    top: 1rem; /* Espace de 10px depuis le haut */
    right: 1rem; /* Espace de 20px depuis le côté droit */
    margin-right: 0.5rem;;
    background-color: #ffffff; /* Fond blanc avec transparence */
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    border-radius: 5px; /* Bords arrondis */
    text-align: right; /* Alignement du texte à droite */
    z-index: 1000; /* Assurez-vous que l'élément est au-dessus */
}

.sensor-defaults-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-top: 0.45rem !important;
    padding: 0.25rem 0.55rem !important;
    border: 1px solid rgba(16, 31, 105, 0.18) !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    color: rgba(16, 31, 105, 0.75) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.sensor-defaults-button:hover {
    border-color: rgba(16, 31, 105, 0.35) !important;
    background-color: rgba(16, 31, 105, 0.04) !important;
    color: #101F69 !important;
}

.sensor-defaults-remove-button {
    color: rgba(230, 0, 28, 0.75) !important;
    font-size: 0.8rem !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.sensor-defaults-remove-button:hover {
    color: #e6001c !important;
    text-decoration: underline !important;
}

#upload-data {
    width: calc(100%-30px);
    height: 100%;
    line-height: 25px;
    border-width: 2px;
    border-style: dashed;
    border-radius: 5px;
    text-align: center;
    margin: 10px;
    border-color: #e6001c; /* Couleur de bordure adaptée au style du bouton */
    color: #e6001c; /* Couleur du texte adaptée au style du bouton */
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 1.2rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: background 0.2s cubic-bezier(0.165, 0.74, 0.44, 1), color 0.2s cubic-bezier(0.165, 0.74, 0.44, 1), border-color 0.2s cubic-bezier(0.165, 0.74, 0.44, 1);
    background: transparent; /* Fond transparent */
}

#upload-data:hover {
    color: #fff !important;
    background-color: #e6001c !important;
}

.dash-uploader-btn-cancel {
    border: 2px solid #101F69 !important;
    color: #101F69 !important;
    border-radius: 0.3rem !important;
    background-color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 1.2rem 1.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    line-height: 1 !important;
    transition: background .2s cubic-bezier(.165,.74,.44,1),color .2s cubic-bezier(.165,.74,.44,1),border-color .2s cubic-bezier(.165,.74,.44,1) !important;
  }

  .dash-uploader-btn-cancel:hover {
    color: #fff !important;
    background: #101F69 !important;
  }

  .dash-uploader-btn-cancel.active, .dash-uploader-btn-cancel:active {
    color: #fff !important; /* Texte blanc pour le bouton actif */
    background-color: #101F69 !important; /* Fond rouge pour le bouton actif */
    border-color: #101F69 !important; /* Bordure rouge pour le bouton actif */
}


.progress-bar {
    background-color: #28a745 !important;
}

.progress {
    font-size:16px !important;
}

.progress-value {
    color:white !important;
}

/* Container principal pour chaque fichier */
.file-container {
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    margin: 0px 5px 15px 5px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
    transition: all 0.3s ease; /* Animation lors du hover */
}

.file-container:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Accentuer l'ombre au hover */
    /* transform: translateY(-3px); Légère élévation au hover */
}

/* Titre du fichier (nom du fichier) */
.file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nom du fichier centré */
.file-name {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    flex: 1;
}

/* Bouton retirer (petit, rond, rouge avec une croix blanche) */
.remove-button {
    background-color: #e6001c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    right: -10px;
    top: -5px;
    transition: background-color 0.3s ease;
}

.remove-button:hover {
    background-color: #c40016;
}

.dropdown-url-container {
    display: flex;
    gap: 10px;
}

.dropdown-player {
    width: 100%;
}

.details-textarea {
    width: 100%;
    margin-top: 10px;
}

/* Dropdown player text align to left */
.dropdown-player .Select-value-label {
    text-align: left !important; /* For the dropdown value */
}

.dropdown-player .dropdown-menu {
    text-align: left !important; /* For the dropdown options */
}

/* Center the refresh button */
.center-button {
    display: flex;
    justify-content: center;
}

/* Nouvelle classe pour centrer la barre de progression et le texte */
.centered-progress-status {
    display: flex;
    margin-top:10px;
    flex-direction: column;  /* Placer les éléments l'un sous l'autre */
    align-items: center;     /* Centrer horizontalement */
    justify-content: center; /* Centrer verticalement */
}

/* Classe pour le texte de status */
.status-text {
    font-size: 16px;        /* Taille du texte */
    color: #101F69;         /* Couleur du texte */
    font-weight:bold;
    margin-top: 5px;        /* Espacement au-dessus du texte */
}

.center-uploader {
    display: flex;
    justify-content: center;
    width: 100%;   /* Ajuster la largeur pour qu'elle prenne tout l'espace disponible */
    max-width: 100%;  /* S'assurer qu'il ne dépasse pas la largeur maximale */
    height: auto !important;  /* Adapter la hauteur à son contenu */
}

.button-maj {
    background-color: rgba(40,167,69,0.7) !important;  /* Vert par défaut */
    border: 2px solid #28a745 !important;  /* Bordure verte */
    color: white !important;               /* Texte en blanc */
    border-radius: 0.3rem !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 1.2rem 1.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    line-height: 1 !important;
    transition: background .2s cubic-bezier(.165,.74,.44,1),color .2s cubic-bezier(.165,.74,.44,1),border-color .2s cubic-bezier(.165,.74,.44,1) !important;
  }

  .button-maj:hover {
    background-color: #28a745 !important; /* Vert plus foncé */
    border-color: #28a745 !important;     /* Bordure plus foncée */
    color: white !important;              /* Texte reste blanc */
  }

  .button-maj:disabled {
    cursor: not-allowed; /* Change le curseur en une icône "non autorisé" */
    background-color: rgba(40,167,69,0.4) !important; /* Modifier la couleur de fond du bouton désactivé */
    border-color: rgba(40,167,69,0.4) !important; /* Bordure plus pâle pour le bouton désactivé */
    color: rgba(255, 255, 255, 0.5) !important; /* Couleur de texte plus pâle pour le bouton désactivé */
}

/* Désactiver le hover lorsque le bouton est désactivé */
.button-maj:disabled:hover {
    background-color: rgba(40,167,69,0.4) !important; /* Assurez-vous que le hover n'altère pas la couleur */
    border-color: rgba(40,167,69,0.4) !important; /* Pas de changement de bordure au survol */
    color: rgba(255, 255, 255, 0.5) !important; /* Pas de changement de couleur au survol */
}

  /* Couleur de texte par défaut */
body, h1, h2, h3, h4, h5, h6, p, span, a, button {
    color: #101F69;
}

.Select-menu-outer {
    z-index: 1001 !important; /* Plus grand que les autres éléments pour s'assurer qu'il reste au-dessus */
    position: absolute !important; /* Le menu doit être positionné de manière absolue */
    background-color: white; /* Assurez-vous que le menu est visible sur un fond blanc */
    border: 1px solid #ccc; /* Ajoutez une bordure pour mieux délimiter le menu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoutez une légère ombre pour plus de visibilité */
}

/* Assurez-vous que le dropdown utilise également cette couleur */
.dropdown-player .Select-value-label, .dropdown-player .dropdown-menu, .dropdown-player .Select-menu-outer {
    color: #101F69 !important;
}

/* Modifier la bordure du champ URL */
input[type='url'], 
.details-textarea, 
textarea {
    border: 1px solid #cccccc !important; /* Fine bordure bleue */
    border-radius: 4px; /* Ajout d'un léger arrondi */
    padding: 8px; /* Espacement interne pour rendre le champ plus agréable */
    color: #101F69; /* Couleur du texte en bleu foncé */
    outline: none; /* Retirer le contour bleu par défaut lors de la sélection */
    transition: border-color 0.3s ease; /* Transition douce pour le changement de bordure */
}


/* Hauteur du contenu principal à 80% de l'écran */
.main-container {
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 20px !important;
    border-radius: 10px !important;
    max-width: 600px !important;
    width: 100% !important;
    /* height: 90vh; */
    display: flex !important;
    flex-direction: column !important;  /* Stack children vertically */
}

/* Conteneur de la liste des fichiers avec scroll */
.scrollable-list-container {
    flex-grow: 1; /* Permet au conteneur de grandir et de rétrécir selon l'espace disponible */
    max-height: calc(80vh - 250px); /* Ajuster la hauteur maximale en fonction des autres éléments (250px est un exemple) */
    overflow-y: auto; /* Activer le défilement vertical */
}

/* Liste défilable */
.scrollable-list {
    height: 100%; /* Prendre tout l'espace disponible pour permettre le scroll */
}

.list-group-item {
    padding: 0;
    background-color: transparent;
    border: none;
}