:root {
    --darkmPrimaryColor: #0e1621;   
    --darkmSecondaryColor: #17212b; 
    --darkmSecondaryColorDimmed: #17212b66; 
    --darkmPrimaryColorDimmed: #0e162166; 
    --darkmTertiaryColor: #2b5278; 
    --darkmTextColor: #ffffff;
    --darkmSecondaryTextColor: darkgrey;
    --darkmAccentColor: #FFC107;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: Inter, sans-serif;
    background-color: var(--darkmSecondaryColor);
    color : var(--darkmTextColor);
}

.navbar {
    background-color: var(--darkmSecondaryColor); 
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
    z-index: 1000;
}



.logo img {
    height: 40px; /* Limite la hauteur du logo */
    max-width: 100px; /* Limite la largeur maximum pour éviter des logos trop grands */
    border-radius: 8px; /* Ajoute un léger arrondi aux coins */
}

.app-name {
    font-size: 36px;
    color: white;
    margin-left: 10px;
}

.profile-icon {
    width: 40px;
    height: 40px;
    background-color: var(--darkmPrimaryColor);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
}

.profile-icon img {
    width: 24px;
    height: 24px;
}

.lined {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.lined-reverse {
    display: flex;
    flex-direction: row;
    align-items: left;

}

.spread-appart-lined {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
}


.lined-lite {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}



.device-app-row {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Stretch items to have the same height */
    gap: 10px;
}

.streached {
    align-items: stretch; /* Stretch items to have the same height */
}

.stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stacked-from-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start!important;
}
.lined-from-top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start!important;
}
.lined-from-bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start!important;
}
.lined-in-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    width: 70px; /* Width of the sidebar */
    height: calc(100% - 60px); /* Full height of the viewport */
    background-color: var(--darkmSecondaryColor); /* Dark background color for the sidebar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}


.padding-3 {
    padding:3px
}

.padding-10-top-bottom {
    padding-top: 10px;
    padding-bottom: 10px;
}

.spread-appart-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 70px); /* Full height of the viewport */
}
.spread-appart-stack2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 85px); /* Full height of the viewport */
}

.spread-appart-stack4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 35px); /* Full height of the viewport */
}

.spread-appart-stack3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 90px); /* Full height of the viewport */
}

.height100minus140 {
    height:calc(100% - 300px)!important;
}

.spread-appart-lined {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


.max-height-185 {
    max-height: 185px;
}


.height-130 {
    max-height: 130px;
    height: 130px;
}


.min-width-30 {
    min-width: 30px;
}

.width-30p {
    width: 30%;
    max-width: 30%;
}

.height-220 {
    max-height: 220px;
    height: 220px;
}
.height-270 {
    max-height: 270px;
    height: 270px;
}

.min-height-32 {
    min-height: 32px;
}


.max-height-390 {
    max-height: 390px;
}

.max-height-385 {
    max-height: 385px;
}

.height-390 {
    height: 390px;
}


.notificationsidebar {
    position: fixed;
    top: 60px;
    right: 0;
    width: 300px; /* Width of the sidebar */
    height: calc(100% - 75px); /* Full height of the viewport */
    background-color: var(--darkmSecondaryColor); /* Dark background color for the sidebar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-left: 10px;
    margin-right: 10px;
}




.devices-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crée des colonnes automatiques */
    gap: 20px; /* Espace entre les images (ajustez selon vos besoins) */
}


.relative {
    position: relative;
}

.cornered-image {
    position: absolute;
    top: -12px;
    left:-12px;
}






.sidebar-item {
    width: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; 
}


.notification-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: fit-content;
    min-width:12px;
    height: 12px;
    border-radius: 0.5rem;
    background-color: orange;
    color: white;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
}
.notification-badge-ok {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: green;
    color: white;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    opacity: 0.8;
}

.notification-badge-ok-static {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: green;
    color: white;
    font-size: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    padding: 2px;
}


.red {
    background-color: red!important;
}

.blue {
    background-color: blue!important;
}

.sidebar-item:hover {
    background-color: var(--darkmPrimaryColor);
    cursor: pointer;
}

.icon {
    width: 40px;
    height: 40px;
    fill: white;
}

.margin-left-10 {
    margin-left:10px;
}

.margin-left-15 {
    margin-left:15px;
}

.app {
    border-radius: 1px; /* Ajoute un léger arrondi aux coins */
    background-color: var(--darkmPrimaryColor);
    width: calc(100% - 70px - 320px) ;
    height: calc(100% - 60px) ;
    position: fixed;
    top: 60px;
    left: 70px;
    right: 320px;
    border-top-right-radius: 8px;
    overflow-x: auto; /* Ajoute une scrollbar horizontale si nécessaire */
    overflow-y: hidden; /* Empêche la scrollbar verticale si elle n'est pas souhaitée */
}

.app-corner {
    border-top-left-radius: 8px;
}


.app:has(.norightcorner:hover) {
    border-top-left-radius: 0px!important;
}


.width-150 {
    min-width: 150px;
    width: 150px;
}

.width-fit {
    min-width: fit-content;
    width: fit-content;
}

.width-exact-fit {
    min-width: fit-content;
    max-width: fit-content;
    width: fit-content;
}

.overflowY {
    overflow-y: auto; /* Empêche la scrollbar verticale si elle n'est pas souhaitée */
    overflow-x: hidden; /* Ajoute une scrollbar horizontale si nécessaire */
}

.overflowYimportant {
    overflow-y: auto!important; /* Empêche la scrollbar verticale si elle n'est pas souhaitée */
    overflow-x: hidden; /* Ajoute une scrollbar horizontale si nécessaire */
}

.overflowX {
    overflow-x: auto; /* Empêche la scrollbar verticale si elle n'est pas souhaitée */
    overflow-y: hidden; /* Ajoute une scrollbar horizontale si nécessaire */
}


/* Customisation de la scrollbar pour la rendre discrète */
.app::-webkit-scrollbar {
    height: 6px; /* Hauteur de la scrollbar pour la rendre discrète */
    width: 6px; /* Hauteur de la scrollbar pour la rendre discrète */
}


.app::-webkit-scrollbar-track {
    background: #00000000; /* Couleur de fond de la scrollbar */
}

.app::-webkit-scrollbar-thumb {
    background: #888; /* Couleur du "thumb" de la scrollbar */
    border-radius: 10px; /* Bord arrondi pour un look plus subtil */
}
.app::-webkit-scrollbar-thumb:hover {
    background: #555; /* Couleur plus sombre quand on survole la scrollbar */
}

.main-sidebar-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.sized {
    box-sizing: border-box;
    
}

.selected-sidebar-item {
    background-color: var(--darkmPrimaryColor);
}


.notification-item {
    background-color: var(--darkmPrimaryColor);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.5rem;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 10px;
}

.left-align-text {
    text-align: left;
}
.right-align-text {
    text-align: right;
}
.margin-top-10 {
    margin-top: 10px!important;
}
.margin-top-0 {
    margin-top: 0px!important;
}


.padding-top-0 {
    padding-top: 0px!important;
}

.padding-top-5 {
    padding-top: 5px!important;
}



.sticky {
    position: sticky!important;
    top: 0px;
    background-color: var(--darkmPrimaryColor);
    transition: box-shadow 0.3s ease;
}

.sticky.shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.margin-top-0 {
    margin-top: 0px!important;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.full-width {
    width: 100%;
}

.full-widthi {
    width: 100%!important;
}

.max-full-height-minus-30 {
    max-height: calc(100% - 30px);
    box-sizing: border-box;
}

.max-full-height-minus-150 {
    max-height: calc(100% - 150px);
    box-sizing: border-box;
}


/* Customisation de la scrollbar pour la rendre discrète */
.pretty-scrollbar::-webkit-scrollbar {
    height: 6px; /* Hauteur de la scrollbar pour la rendre discrète */
    width: 6px; /* Hauteur de la scrollbar pour la rendre discrète */
}


.hidden-scrollbar::-webkit-scrollbar {
    height: 0px!important; /* Hauteur de la scrollbar pour la rendre discrète */
    width: 0px!important; /* Hauteur de la scrollbar pour la rendre discrète */
}


.pretty-scrollbar::-webkit-scrollbar-track {
    background: #ffffff00; /* Couleur de fond de la scrollbar */
}

.pretty-scrollbar::-webkit-scrollbar-thumb {
    background: #888; /* Couleur du "thumb" de la scrollbar */
    border-radius: 10px; /* Bord arrondi pour un look plus subtil */
}
.app::-webkit-scrollbar-thumb:hover {
    background: #555; /* Couleur plus sombre quand on survole la scrollbar */
}




/* Customisation de la scrollbar pour la rendre discrète */
textarea::-webkit-scrollbar {
    height: 3px; /* Hauteur de la scrollbar pour la rendre discrète */
    width: 3px; /* Hauteur de la scrollbar pour la rendre discrète */
}
textarea::-webkit-scrollbar-track {
    background: #ffffff00; /* Couleur de fond de la scrollbar */
}
textarea::-webkit-scrollbar-thumb {
    background: #888; /* Couleur du "thumb" de la scrollbar */
    border-radius: 10px; /* Bord arrondi pour un look plus subtil */
}



.left-scrollbar {
    direction: rtl;
}
.direction-normal {
    direction: ltr;
}

.full-height {
    height: 100%;
}

.full-width-minus-20 {
    width: calc(100% - 40px );
}
.full-width-minus-40 {
    width: calc(100% - 80px );
}


.notification-content {
    font-size: 14px;
    margin-top: 5px;
    color: var(--darkmSecondaryTextColor);
}

.margin-side-10 {
    margin-left: 10px;
    margin-right: 10px;
}


.text-grey {
    color: var(--darkmSecondaryTextColor)!important;
}

.margin-left-20 {
    margin-left: 20px;
}
.margin-right-30 {
    margin-right: 30px;
}
.margin-right-20 {
    margin-right: 20px;
}
.height-50 {
    height: 50px;
}

.height-70 {
    height: 70px;
}


.height-180 {
    height: 180px;
}


.width-100 {
    width: 100px;
}


.width-50 {
    width: 50px;
}
.height-150 {
    height: 150px;
}
.height-350 {
    height: 350px;
}
.padding-10 {
    padding: 10px;
}
.margin-10 {
    margin: 10px;
}

.margin-5 {
    margin: 5px;
}

.white {
    color: white;
}


.padding-10I {
    padding: 10px!important;
}

.yellow-theme {
    background-color: #f0c84777;
    color: white;
    border: solid 1px orange;
}
.grey-theme {
    background-color: grey;
    color: white;
    border: solid 1px darkgrey;
    padding: 10px;
    box-sizing: border-box;
}
.purple-theme {
    background-color: #7344ef77;
    color: white ;
    border: solid 1px #3919a5;
}
.pink-theme {
    background-color: #d13d6d77;
    color: white;
    border: solid 1px #b83154;
}


.min-height-34 {
    min-height: 34px;
}

.nowrap {
    white-space: nowrap;
}


.error-theme {
    background-color: #f08080;
    color: white;
}

.bg-theme {
    background-color: var(--darkmSecondaryColor);
}
.bg-theme-dimmed {
    background-color: var(--darkmSecondaryColorDimmed);
}


.margin-20 {
    margin: 20px;
}



.included-theme {
    background-color: rgb(54, 209, 54);
    color: white;
    border: none;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 0.5rem;
}
.excluded-theme {
    background-color: rgb(209, 54, 54);
    color: white;
    border: none;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 0.5rem;
}
.soon-theme {
    background-color: rgb(209, 173, 54);
    color: white;
    border: none;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 0.5rem;
}

.standard-theme {
    background-color: var(--darkmSecondaryColor);
    color: white;
    border: none;
}

.no-border {
    border: none;
}

.margin-top-30 {
    margin-top: 30px;
}

.na {
    cursor: not-allowed!important;
}
.ns {
    user-select: none; /* Standard */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari et Chrome */
    -ms-user-select: none; /* Internet Explorer/Edge */
}


.dimmed {
    opacity: 0.5;
}

.dimmed-heavy {
    opacity: 0.25;
}

.add-new-phone {
    height: calc(100vh - 50px - 50px);
    width: calc((100vh - 50px - 50px) * 0.56);

    margin: 30px;
    border-radius: 0.5rem;
    background-color: var(--darkmSecondaryColor);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
}

.add-new-phone-container {
    transition: opacity 0.2s ease-in-out;
    width: fit-content;
    position: relative;
}






button {
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    background-color: var(--darkmPrimaryColor);
    color:white;
    border-radius: 0.25rem;
    font-family: Inter, sans-serif;
    outline: none;
}


.padding-10-20 {
    padding: 10px 20px;


}
.bg-primary {
    background-color: var(--darkmPrimaryColor)!important;
}
.bg-secondary {
    background-color: var(--darkmSecondaryColor);
}

.tiny-button {
    font-size: 12px;
    padding: 4px 6px;

}
.small-button {
    font-size: 12px;
    padding: 5px 10px;

}
.normal-button {
    font-size: 14px;
    padding: 7px 12px;
}


.small-text {
    font-size: 14px!important;
}
.avg-text {
    font-size: 12px!important;
}
.tiny-text {
    font-size: 8px;
}
.big-text {
    font-size: 20px;
}

.black-bg {
    background-color: var(--darkmPrimaryColor);
    color: white;
}

.black-text {
    color: black;
}

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




.stick-to-left {
    display: flex;
    flex-direction: column;
    justify-content: end;  
    align-items: end;  
}
.stick-to-right {
    display: flex;
    flex-direction: column;
    justify-content: start;  
    align-items: start;  
}


.raise-on-hover {
transition: transform 0.3s ease; 
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}

.raise-on-hover:hover {
    transform: translateY(-5px); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
}

.raise-on-hover.active {
    transform: translateY(-5px); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
}

dialog::backdrop {  background-color: rgba(0, 0, 0, 0.2); }
.blur-bg::backdrop {  
    background-color: rgba(0, 0, 0, 0.8);
    filter: blur(10px); /* Floute tout ce qui est derrière le dialog */
}


#addPhoneDialog {
    background-color: var(--darkmSecondaryColor);
    border: none;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}

#openStatsDialog {
    background-color: var(--darkmSecondaryColor);
    border: none;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}



#openProfileDialog {
    background-color: var(--darkmSecondaryColor);
    border: none!important;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}


#dialogAddAPI {
    background-color: var(--darkmSecondaryColor);
    border: none!important;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}

#dialogAddModel {
    background-color: var(--darkmSecondaryColor);
    border: none!important;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}


#openPhoneSettingsDialog {
    background-color: var(--darkmSecondaryColor);
    border: none!important;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}

#openWorkerDialog {
    background-color: var(--darkmSecondaryColor);
    border: none!important;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}


#openEditAccountDialog {
    background-color: var(--darkmSecondaryColor);
    border: none!important;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}



#loginDialog {
    background-color: var(--darkmSecondaryColor);
    border: none;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}



input,textarea {
    outline: none; /* Supprime la bordure de focus par défaut */
    transition: none; /* Désactive les transitions */
    border-radius: 0.15rem;
    padding: 0px;
    font-family: Inter, sans-serif;
    margin: 0px;
    border: none;
}


.full-width-minus-10 {
    width: calc(100% - 10px);
}


select {
    outline: none; /* Supprime la bordure de focus par défaut */
    transition: none; /* Désactive les transitions */
    border-radius: 0.15rem;
    border: none;
    -webkit-appearance: none; /* Désactiver l'apparence par défaut dans Safari et Chrome */
    -moz-appearance: none;    /* Désactiver l'apparence par défaut dans Firefox */
    appearance: none;  
}

.padding-5 {
    padding: 5px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    color: grey;
}
input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    color: grey;
}
.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    color: grey;
}
/* Styles de base pour le dialog */
dialog {
    display: none; /* Caché par défaut */
    opacity: 0; /* Opacité initiale */
    transition: opacity 0.05s ease; /* Transition pour le fondu */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
    outline: none;
    
    user-select: none; /* Standard */
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Safari et Chrome */
    -ms-user-select: none; /* Internet Explorer/Edge */
}


/* État actif du dialog */
dialog.open {
    display: block; /* Affiche le dialog */
    opacity: 1; /* Opacité à 100% */
}

/* Animation de fermeture */
dialog.close {
    opacity: 0; /* Réduit l'opacité à 0% */
}


.wrap-elements {
    display: flex;           /* Active le mode Flexbox */
    flex-wrap: wrap;        /* Permet l'enroulement des éléments */
    gap: 10px;              /* Espacement entre les éléments */
}

.wrap-elements > * {
    flex: 0 1 auto;         /* Ne permet pas à l'élément d'agrandir le parent */
    width: 100px;           /* Largeur fixe pour chaque élément, ajuste selon tes besoins */
    background-color: lightblue; /* Juste pour voir les éléments */
    padding: 10px;          /* Espacement intérieur */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}


.bubble-theme{
    background-color: var(--darkmSecondaryColor);
    border-radius: 0.25rem;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 5px;
}

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


.loader {
    width: 50px;
    height: 50px;
    aspect-ratio: 1;
    display: grid;
  }
  .loader:before,
  .loader:after {
    content: "";
    grid-area: 1/1;
    margin: 0 0 15px 15px;
    --c:#0000 calc(100%/3),var(--darkmAccentColor) 0 calc(2*100%/3),#0000 0;
    --c1:linear-gradient(90deg,var(--c));
    --c2:linear-gradient( 0deg,var(--c));
    background: var(--c1),var(--c2),var(--c1),var(--c2);
    background-size: 300% 4px,4px 300%;
    background-repeat: no-repeat;
    animation: l12 1s infinite linear;
  }
  .loader:after {
    margin: 15px 15px 0 0;
    transform: scale(-1,-1);
  }
  @keyframes l12 {
    0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
    25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
    50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
    75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
   75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
    100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
  }


.f-loader {
    width:  50px;   
    height: 50px;
    top: 50%; /* Move it to the vertical center */
    left: 50%; /* Move it to the horizontal center */
    transform: translate(-50%, -50%);
    opacity: 0.75;
    aspect-ratio: 1; /* Maintient le rapport d'aspect carré */
    display: grid; /* Utilise un affichage en grille pour le loader */
    position: absolute; /* Permet de superposer le loader */
    z-index: 1000; /* Assure que l'élément est au-dessus des autres éléments */
    background-color: var(--darkmSecondaryColor);
    box-shadow: 0  calc((100vh - 50px - 50px) * (4 / 610))  calc((100vh - 50px - 50px) * (10 / 610)) rgba(0, 0, 0, 0.3); 
    padding:  calc((100vh - 50px - 50px) * (15 / 610));;
    border-radius: 0.5rem;
}



/* HTML: <div class="loader"></div> */
.s-loader {
    width: 15px;
    height: 15px;
    aspect-ratio: 1;
    display: grid;
  }
  .s-loader:before,
  .s-loader:after {
    content: "";
    grid-area: 1/1;
    margin: 0 0 5px 5px;
    --c:#0000 calc(100%/3),var(--darkmAccentColor) 0 calc(2*100%/3),#0000 0;
    --c1:linear-gradient(90deg,var(--c));
    --c2:linear-gradient( 0deg,var(--c));
    background: var(--c1),var(--c2),var(--c1),var(--c2);
    background-size: 300% 2px,2px 300%;
    background-repeat: no-repeat;
    animation: l12 1s infinite linear;
  }
  .s-loader:after {
    margin: 5px 5px 0 0;
    transform: scale(-1,-1);
  }
  @keyframes l12 {
    0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
    25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
    50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
    75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
   75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
    100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
  }

/* HTML: <div class="loader"></div> */
.t-loader {
    width: 15px;
    height: 15px;
    aspect-ratio: 1;
    display: inline-grid;
    opacity: 0;
  }
  .t-loader:before,
  .t-loader:after {
    content: "";
    grid-area: 1/1;
    margin: 0 0 5px 5px;
    --c:#0000 calc(100%/3),var(--darkmAccentColor) 0 calc(2*100%/3),#0000 0;
    --c1:linear-gradient(90deg,var(--c));
    --c2:linear-gradient( 0deg,var(--c));
    background: var(--c1),var(--c2),var(--c1),var(--c2);
    background-size: 300% 2px,2px 300%;
    background-repeat: no-repeat;
    animation: l12 1s infinite linear;
  }
  .t-loader:after {
    margin: 5px 5px 0 0;
    transform: scale(-1,-1);
  }
  @keyframes l12 {
    0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
    25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
    50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
    75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
   75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
    100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
  }




.center-in-phone {
    display: grid; /* Utilise un affichage en grille pour le loader */
    position: absolute; /* Permet de superposer le loader */
    z-index: 1000; /* Assure que l'élément est au-dessus des autres éléments */
    background-color: var(--darkmSecondaryColor);
    box-shadow: 0  calc((100vh - 50px - 50px) * (4 / 610))  calc((100vh - 50px - 50px) * (10 / 610)) rgba(0, 0, 0, 0.3); 
    padding:  calc((100vh - 50px - 50px) * (15 / 610));;
    border-radius: 0.5rem;
}

.f-loader:before,
.f-loader:after {
    content: "";
    grid-area: 1/1;
    margin: 0 0  calc((100vh - 50px - 50px) * (15 / 610))  calc((100vh - 50px - 50px) * (15 / 610));;
    --c:#0000 calc(100%/3),var(--darkmAccentColor) 0 calc(2*100%/3),#0000 0;
    --c1:linear-gradient(90deg,var(--c));
    --c2:linear-gradient(0deg,var(--c));
    background: var(--c1),var(--c2),var(--c1),var(--c2);
    background-size: 300%  calc((100vh - 50px - 50px) * (4 / 610)), calc((100vh - 50px - 50px) * (4 / 610)) 300%;
    background-repeat: no-repeat;
    animation: l12 0.75s infinite linear;
}

.f-loader:after {
    margin:  calc((100vh - 50px - 50px) * (15 / 610))  calc((100vh - 50px - 50px) * (15 / 610)) 0 0;
    transform: scale(-0.99,-0.99);
}

.margin-no-bottom{
    margin-bottom: 0!important;
}


.f-loader:before {
    transform: scale(0.99,0.99);
}



.clickableTab:hover{
    color:white;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    cursor:pointer;
}


#editableSubTab:hover{
    color:lightgrey;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    cursor:pointer;
    background-color: var(--darkmPrimaryColor);
}

#editableSubTab {
    background-color: inherit;
    color:white;
    color: var(--darkmSecondaryTextColor);
    font-size: 16px;
    transition: width 0.2s, background 0.3s ease;
}

#editableSubTab:focus {
    background-color: var(--darkmPrimaryColor);
    color:white;
    color: var(--darkmSecondaryTextColor);
    font-size: 16px;
}

.discret-input {
    color: white;
    background-color: var(--darkmSecondaryColor);
    border-bottom: #0e1621 1px solid;
    font-size: 14px;
    width: 20px;
}
.discret-input3 {
    color: white;
    background-color: var(--darkmSecondaryColor);
    border-bottom: #0e1621 1px solid;
    border-radius: 0px;
    font-size: 14px;
}

.discret-input2 {
    color: white;
    background-color: var(--darkmPrimaryColor);
    border-bottom: #0e1621 1px solid;
    font-size: 14px;
}


.text-14 {
    font-size: 14px;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor:default!important;
}


.phone-preview-box {
    height: calc(100vh - 50px - 50px);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
}


.width-75p {
    width: 75%;
}

.ratio1 {
    aspect-ratio: 1;
}
.ratio70 {
    width: 70px;
    height: 70px;
}

.phone-preview-container {
    width: fit-content;
    min-width: fit-content;
    margin: 20px;
    margin-right: 0px;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.phone-preview-container-from-top {
    width: fit-content;
    min-width: fit-content;
    margin: 20px;
    margin-right: 0px;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.margin-25p-iphone {
    margin: calc(25%  * 0.5081967213);
}

.margin-25p  {
    margin: 25%;
}

textarea {
    resize: none;
}

.centering-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

}

.centering-container-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.touch-id {
    background-color: black;
    border-radius: 50%;
    border-top: calc((100vh - 50px - 50px) * (2 / 610)) solid #eeeeee33;
    height: calc((100vh - 50px - 50px ) * (66 / 610) - 20px);
    width: calc((100vh - 50px - 50px ) * (66 / 610) - 20px);
    transition: background-color 0.3s ease, height 0.3s ease, width 0.7s ease, font-size 0.3s ease, color 0.3s ease;
    overflow: hidden; /* Pour masquer le texte */
}


.touch-id-static {
    background-color: black;
    border-radius: 50%;
    border-top: calc((100vh - 50px - 50px) * (2 / 610)) solid #eeeeee33;
    height: calc((100vh - 50px - 50px ) * (66 / 610) - 20px);
    width: calc((100vh - 50px - 50px ) * (66 / 610) - 20px);
    transition: background-color 0.3s ease, height 0.3s ease, width 0.7s ease, font-size 0.3s ease, color 0.3s ease;
    overflow: hidden; /* Pour masquer le texte */

}




.touch-id span {
    opacity: 0; /* Masque le texte par défaut */
    transition: opacity 0.1s ease; /* Transition pour l'opacité */
}

.touch-id:hover {
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    background-color: var(--darkmPrimaryColor);
    color: white;
    border-radius: 0.25rem;
    border: none;
    height: fit-content;
    width: fit-content;
}

.touch-id:hover span {
    opacity: 1; /* Rends le texte visible au survol */
}






.configuration-tile {
    background-color: var(--darkmPrimaryColor);
    color: white;
    border-radius: 0.25rem;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}


.select-2 {
    background-color: var(--darkmSecondaryColor);
    padding: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    border-radius: 0.25rem;
}

.select-3 {
    background-color: var(--darkmSecondaryColor);
    padding: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: white;
    border-radius: 0.25rem;
}

.select-4 {
    background-color: var(--darkmPrimaryColor);
    padding-top: 4px;
    padding-bottom: 2px;
    color: white;
    border-bottom: var(--darkmSecondaryColor) 1px solid;
}



.select-5 {
    background-color: var(--darkmPrimaryColor);
    padding: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: white;
    border-radius: 0.25rem;
}


.select-6 {
    background-color: var(--darkmSecondaryColor);
    padding-top: 4px;
    padding-bottom: 2px;
    color: white;
    border-bottom: var(--darkmPrimaryColor) 1px solid;
}

.select-7 {
    background-color: var(--darkmPrimaryColor);
    padding: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: white;
    border-radius: 0.25rem;
}



.phone-part-top {
    height: calc((100vh - 50px - 50px) * (70 / 610));

    border-top-left-radius:calc((100vh - 50px - 50px) * (45 / 610));
    border-top-right-radius:calc((100vh - 50px - 50px) * (45 / 610));
    background-color: black;
    margin: calc((100vh - 50px - 50px) * 0.5081967213 * (4 / 310));
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: calc((100vh - 50px - 50px) * (2 / 610)) solid #eeeeee33;

}
.phone-part-middle {
    height: calc((100vh - 50px - 50px) * (470 / 610));
    background-color: black;
    margin: calc((100vh - 50px - 50px) * 0.5081967213 * (4 / 310));
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: calc((100vh - 50px - 50px) * 0.5081967213 * (20 / 310));
    padding-right: calc((100vh - 50px - 50px) * 0.5081967213 * (20 / 310));
    overflow: hidden; 
}


.phone-part-middle-iphoneX {
    height: calc((100vh - 50px - 50px) * (590 / 610));
    background-color: black;
    margin: calc((100vh - 50px - 50px) * 0.5081967213 * (4 / 310));
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: calc((100vh - 50px - 50px) * 0.5081967213 * (8 / 310));
    padding-right: calc((100vh - 50px - 50px) * 0.5081967213 * (8 / 310));
    padding-bottom: calc((100vh - 50px - 50px) * (7 / 610));
    padding-top: calc((100vh - 50px - 50px) * (7 / 610));
    
    
    border-top: calc((100vh - 50px - 50px) * (2 / 610)) solid #eeeeee33;
    border-top-left-radius:calc((100vh - 50px - 50px) * (30 / 610));
    border-top-right-radius:calc((100vh - 50px - 50px) * (30 / 610));

    border-bottom: calc((100vh - 50px - 50px) * (2 / 610)) solid #eeeeee33;
    border-bottom-left-radius:calc((100vh - 50px - 50px) * (30 / 610));
    border-bottom-right-radius:calc((100vh - 50px - 50px) * (30 / 610));



    position: relative;


}
.size-iphoneX {
    border-top-left-radius:calc((100vh - 50px - 50px) * (22 / 610))!important;
    border-top-right-radius:calc((100vh - 50px - 50px) * (22 / 610))!important;
    border-bottom-left-radius:calc((100vh - 50px - 50px) * (22 / 610))!important;
    border-bottom-right-radius:calc((100vh - 50px - 50px) * (22 / 610))!important;
    width: 100%!important;
    height: 100% !important;
    object-fit: cover!important;
    object-position: 50% 0px !important;


}




.div-head-iphoneX {
    position: absolute; /* Positionnement absolu à l'intérieur de la div parent */
    top: 0; /* Aligné tout en haut */
    left: 50%; /* Centré horizontalement */
    width: 40%;

    height: calc(50% * 0.03 );
    

    
    border-bottom-left-radius:calc((100vh - 50px - 50px) * (15 / 610));
    border-bottom-right-radius:calc((100vh - 50px - 50px) * (15 / 610));

    transform: translateX(-50%); /* Ajuste pour compenser la largeur du div */
    background-color: black; /* Couleur de fond pour mieux visualiser */
    padding: 10px;
}
  




#preview-phone-capture {
    height: calc((100vh - 50px - 50px) * (470 / 610));
    position: relative;
}


.phone-part-middle .automation-description {
    height: calc((100vh - 50px - 50px) * (470 / 610));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;}







.phone-part-bottom {
    height: calc((100vh - 50px - 50px) * (66 / 610));
    border-bottom-left-radius:calc((100vh - 50px - 50px) * (45 / 610)) ;
    border-bottom-right-radius:calc((100vh - 50px - 50px) * (45 / 610)) ;
    background-color: black;
    margin: calc((100vh - 50px - 50px) * 0.5081967213 * (4 / 310));
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: calc((100vh - 50px - 50px) * (2 / 610)) solid #eeeeee33;
}
.phone-part-top-container, .phone-part-bottom-container, .phone-part-middle-container {
    width: calc((100vh - 50px - 50px) * 0.5081967213);
}


.iphone-width {
    width: calc((100vh - 50px - 50px) * 0.5081967213);
    max-width: calc((100vh - 50px - 50px) * 0.5081967213);
}


.iphone-size {
    height: calc((100vh - 50px - 50px) );
    width: calc((100vh - 50px - 50px) * 0.5081967213);
    max-width: calc((100vh - 50px - 50px) * 0.5081967213);
}

.max-bza {
    max-width: calc((100vh - 50px - 50px - 80px) * 0.5081967213);
}

.max-bza2 {
    max-width: calc((100vh - 50px - 50px - 280px) * 0.5081967213);
}


.phone-actions-tile {
    height: calc((100vh - 50px - 50px) );
    width: calc(100% - 60px - ((100vh - 50px - 50px) * 0.5081967213)) ;
}


.phone-actions-tile-2 {
    height: calc((100vh - 50px - 50px) );
    width: calc(100% - 40px ) ;
    padding: 10px;
    margin: 20px;
    box-sizing: border-box;
}


.phone-height {
    height: calc((100vh - 60px - 60px) );
}

.secondary-bg {
    background-color: var(--darkmSecondaryColor);
}


.loading-image {
    filter: blur(10px); 
    animation: blurAnimation 5s infinite alternate; 
    transition: filter 0.5s ease-in-out; 
    overflow: hidden;
}

@keyframes blurAnimation {
    0% {
        filter: blur(10px) invert(0%) brightness(1); /* Flou à 10px au début */
    }
    100% {
        filter: blur(50px) invert(100%) brightness(0.5); /* Flou à 50px à la fin */
   . }
}

.overflow-hidden {
    overflow: hidden;
}

.rounded-corner {
    border-radius: 0.5rem;
}
.rounded-corner-tiny {
    border-radius: 0.15rem;
}

#postTitlePreview,#postBodyPreview,#postBody,#postTitle {
    width: 450px;
    color: white;
    background-color: var(--darkmSecondaryColor);
}

.phone-actions-tile {
    padding: 10px;
    margin: 20px;
    box-sizing: border-box;
}

.phone-quick-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: calc(100%);
    justify-content: space-between;
}


.flex-children {
    display: flex;
    width: 100%;
    gap: 10px;
}
.flex-children > * {
    flex:1;
}


.flex-children2 {
    display: flex;
    gap: 10px;
}
.flex-children2 > * {
    flex:1;
}

.margin-top-3 {
    margin-top:3px;
}


.padding-10-side{
    padding-left: 10px;
    padding-right: 10px;
}
.margin-10-side{
    margin-left: 10px;
    margin-right: 10px;
}

.margin-20-side{
    margin-left: 20px;
    margin-right: 20px;
}

.margin-10-bottom{
    margin-bottom: 10px;
}

.padding-10-bottom{
    padding-bottom: 10px;
}

.padding-left-10{
    padding-left: 10px;
}

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

.height-minus-30 {
    height: calc(100% - 30px);
}


.height-100vh-minus-100 {
    height: calc(100vh - 100px);
}

.max-width-450 {
    max-width: 450px;
}
.max-width-550 {
    max-width: 550px;
}

.max-width-850 {
    max-width: 850px;
}
.width-850 {
    width: 850px;
}
.width-325 {
    width: 325px;
}

.margin-top-5 {
    margin-top:5px;
}

.margin-bottom-5 {
    margin-bottom:5px;
}

.margin-right-10 {
    margin-right:10px;
}

.full-height-minus-46 {
    height: calc(100% - 46px);
}

.margin-right-15 {
    margin-right:15px;
}
.margin-right-5 {
    margin-right:5px;
}
.margin-left-5 {
    margin-left:5px;
}


.addedBG {
    background-color: blue;
    border-radius: 0.25rem;
    padding: 2px 5px;
}

.createdBG {
    background-color: green;
    border-radius: 0.25rem;
    padding: 2px 5px;
}


.solvedBG {
    background-color: green;
    border-radius: 0.25rem;
    padding: 2px 5px;
}


.importedBG {
    background-color: darkgreen;
    border-radius: 0.25rem;
    padding: 2px 5px;
}


.loggedBG {
    background-color: darkgreen;
    border-radius: 0.25rem;
    padding: 2px 5px;
}
.checkedBG {
    background-color: darkgreen;
    border-radius: 0.25rem;
    padding: 2px 5px;
}


.pendingBG {
    background-color: grey;
    border-radius: 0.25rem;
    padding: 2px 5px;
}

.newTag {
    background-color: var(--darkmAccentColor);
    border-radius: 0.5rem;
    padding: 2px 5px;
    font-size:10px;
    margin-right:5px;
    color:black
}

.todoBG {
    background-color: grey;
    border-radius: 0.25rem;
    padding: 2px 5px;
}


.devicelessBG {
    background-color: grey;
    border-radius: 0.25rem;
    padding: 2px 5px;
}


.failedBG {
    background-color: red;
    border-radius: 0.25rem;
    padding: 2px 5px;
}

.removedBG {
    background-color: darkorange;
    border-radius: 0.25rem;
    padding: 2px 5px;
}

.unsolvedBG {
    background-color: darkorange;
    border-radius: 0.25rem;
    padding: 2px 5px;
}

.bannedBG {
    background-color: red;
    border-radius: 0.25rem;
    padding: 2px 5px;
}

.wipedBG {
    background-color: red;
    border-radius: 0.25rem;
    padding: 2px 5px;
}
.fvBG {
    background-color: darkorange;
    border-radius: 0.25rem;
    padding: 2px 5px;
}

.shadowbannedBG {
    background-color: darkorange;
    border-radius: 0.25rem;
    padding: 2px 5px;
}



.gallery-img-container {
    margin: 3px;
    position: relative; /* Nécessaire pour positionner les éléments enfants */
    min-width: 100px;
    min-height: 100px;
    max-height: 150px;
    max-width: 150px;
    aspect-ratio: 1 / 1; /* Maintient le ratio carré */
    overflow: hidden; /* Masque tout débordement d'image */
}

.gallery-img-container img {
    width: 100%; /* Remplit le conteneur */
    height: 100%; /* Remplit le conteneur */
    object-fit: cover; /* Remplit le conteneur tout en conservant le ratio */
}

.imgModelSettings {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

.fit-cover {
    object-fit: cover;
}

.badge-spoof-counter {
    position: absolute;
    top: 5px;
    right: 5px;
}


.progress-bar {
    background-color: #4caf50; /* Couleur de la barre de progression */
    height: 5px;
    width: 0;
    transition: width 0.2s;
    position: absolute; /* Positionnement absolu pour le centrer */
    bottom: 0; /* Alignement en bas */
    left: 0; /* Commence à gauche */
    right: 0; /* S'étend jusqu'à la droite */
}

.percentage-text {
    display: block;
    text-align: center; /* Centre le texte horizontalement */
    position: absolute; /* Positionnement absolu pour le centrer */
    bottom: 10px; /* Place le texte juste au-dessus de la barre de progression */
    left: 50%; /* Alignement horizontal au milieu */
    transform: translateX(-50%); /* Décalage pour centrer horizontalement */
    font-weight: bold; /* Optionnel : Met le texte en gras */
    font-size: 12px;
    color: #fff; /* Couleur du texte, à ajuster selon votre design */
    z-index: 1; /* S'assurer que le texte est au-dessus de la barre de progression */
}
.height-50p {
    height: 50%!important;
}
.width-50p {
    width: 50%!important;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Crée des colonnes automatiques */
    gap: 10px; /* Espace entre les images (ajustez selon vos besoins) */
}

.padding-20 {
    padding:20px;
}

.automation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crée des colonnes automatiques */
    gap: 20px; /* Espace entre les images (ajustez selon vos besoins) */
}



.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Crée des colonnes automatiques */
    gap: 10px; /* Espace entre les images (ajustez selon vos besoins) */
}

.reports-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Crée des colonnes automatiques */
    gap: 10px; /* Espace entre les images (ajustez selon vos besoins) */
}



.device-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); /* Crée des colonnes automatiques */
    gap: 10px; /* Espace entre les images (ajustez selon vos besoins) */
}
.device-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crée des colonnes automatiques */
    gap: 10px; /* Espace entre les images (ajustez selon vos besoins) */
}
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* Crée des colonnes automatiques */
    gap: 10px; /* Espace entre les images (ajustez selon vos besoins) */
}

.max-full-height-minus-98{
    max-height: calc(100% - 98px);
}

.full-height-minus-160 {
    max-height: calc(100% - 160px);
    height: calc(100% - 160px);
}
.full-height-minus-325 {
    max-height: calc(100% - 325px);
    height: calc(100% - 325px);
}

.full-height-minus-400 {
    max-height: calc(100% - 400px);
    height: calc(100% - 400px);
}


.imgModelSettingPreview {
    height: 400px;
}

.max-height-290 {
    max-height: 290px;
}


.max-full-height-minus-120{
    max-height: calc(100% - 120px);
}



#installed-apps-list>div:not(.no-effect) {
    opacity: 0; /* Invisible par défaut */
    transform: translateY(20px); /* Décalage vers le bas pour l'effet */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transition pour l'animation */
}

#aiIsLoaderLoader {
    opacity: 0; /* Invisible par défaut */
    transition: opacity 0.5s ease;/* Transition pour l'animation */
}


.opacity05 {
    opacity:0.5;
    transition: opacity 0.5s ease;
}

.opacity05:hover {
    opacity:1;
}


.fit-height {
    height: fit-content;
    max-height: fit-content;
}

#installed-apps-list>div:not(.no-effect).visible {
    opacity: 1; /* Rendre visible */
    transform: translateY(0); /* Retour à la position d'origine */
}



#installed-apps-warning-scan {
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transition pour l'animation */
    opacity: 0; /* Invisible par défaut */
    transform: translateY(-10px); /* Déplacement vers le haut */
}

#installed-apps-warning-scan.visible {
    opacity: 1; /* Visible */
    transform: translateY(0); /* Retour à la position originale */
}

.sidebar-item img {
    height: 24px;
    height: 24px;
}

.configuration-alert {
    background-color: rgba(189, 7, 7, 0.551);
    color: white;
    border: solid 1px red;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.sized {
    box-sizing: border-box;
}
.boxed {
    box-sizing: content-box;
}


.height-100 {
    height:100px
}

.absolute-bottom-center {
    position: absolute;
    bottom: 00px; /* Aligns the element to the bottom */
    left: 50%; /* Centers the element horizontally */
    transform: translateX(-50%); /* Adjusts the position to truly center it */
}

.absolute-center-left {
    position: absolute;
    left: 10px; /* Aligns the element to the bottom */
    top: -50px;
    transform: translateY(-50%);
}   
.absolute-center-right {
    position: absolute;
    right: 10px; /* Aligns the element to the bottom */
    top: -50px;
    transform: translateY(-50%);
}


.liner {
    position: absolute;
    width: 3px;
    background-color: darkslategrey;
    opacity: 0.5;
    height: 100px;
    left: 50%; /* Centers the element horizontally */
    top: -100px; /* Aligns the element to the bottom */
    z-index:2;
    
    pointer-events: none;
}


.absolute-top-center {
    position: absolute;
    top: -100px; /* Aligns the element to the bottom */
    left: 50%; /* Centers the element horizontally */
    transform: translateX(-50%); /* Adjusts the position to truly center it */
    z-index:10;
    text-align: center;
    font-family: monospace;
}



.absolute-bottom-right {
    position: absolute;
    bottom: 0px; /* Aligns the element to the bottom */
    right: 0px; /* Centers the element horizontally */
    z-index:10;
    font-family: monospace;
}


.no-corner-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.no-corner-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.full-width-minus-30 {
    width: calc(100% - 60px);
}

.configuration-alert {
    opacity: 0; /* Initialement invisible */
    transform: scaleY(0); /* Initialement rétréci */
    transform-origin: top; /* Transformation depuis le haut */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transition pour un effet fluide */
    height: 0; /* Aucune hauteur initiale */
}   

.left-align {
    text-align: left;
}
.right-align {
    text-align: right;
}

.configuration-alert.visible {
    opacity: 1; /* Rendre visible */
    transform: scaleY(1); /* Expander l'élément */
    height: auto; /* La hauteur prend la taille du contenu */
    padding: 5px;
    margin-top: 10px;
}


.appearLater {
    margin-top: 0; /* Initialement invisible */
    margin-bottom: 0; /* Initialement invisible */
    padding-top: 0; /* Initialement invisible */
    padding-bottom: 0; /* Initialement invisible */
    opacity: 0; /* Initialement invisible */
    height: 0; /* Initialement hauteur nulle */
    transition: height 1s ease, opacity 1s ease-in-out, padding 0.3s ease, margin 0.3s ease; /* Transition de hauteur, opacité, et marge */
}

.appearLater.appearing {
    opacity: 1;
    height: auto; /* Hauteur normale une fois l'animation terminée */
    margin-top: 10px; /* Marge finale de 10px */
    padding-top: 10px; /* Marge finale de 10px */
    padding-bottom: 10px; /* Marge finale de 10px */
    margin-bottom: 10px; /* Marge finale de 10px */
}





.disappearLater.disappear {
    margin-top: 0; 
    margin-bottom: 0; 
    padding-top: 0; 
    padding-bottom: 0;
    opacity: 0; 
    height: 0; 
}

.disappearLater {
    opacity: 1;
    height: auto; 
    margin-top: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin-bottom: 10px;
    transition: height 1s ease, opacity 0.2s ease-in-out, padding 0.3s ease, margin 0.3s ease; 
}



.scrollable {
    overflow-y: auto; /* Cela laisse le navigateur gérer le défilement seulement si nécessaire */
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide {
    display: none;
}

a {
    text-decoration: none;
    outline: none;
}

#div-map {
    height: 200px;
    animation: none;
}

 
table {
    table-layout: fixed;
}
 
.table-auto {
    table-layout: auto!important;
}

thead tr th {
    font-weight: normal;
    color:var(--darkmSecondaryTextColor);
    font-size: 14px;
    width: fit-content;
}
tbody tr td {
    font-size: 14px;

}

tbody tr td{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
thead tr td{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}

.height-25 {
    height:25px
}


.tooltip {
    transition: opacity 0.5s ease; /* Animation for fade in/out */
    transition:display 0.5s ease;
    border: 1px solid var(--darkmSecondaryColor);
    max-width: 300px;
    text-align: center;
    z-index: 1000000;

    text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
word-break: break-word;

    
}


.monospace{
    font-family: monospace!important;
}

.text-no-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    direction: ltr; 
}

.red-text {
    color:red;
}
.orange-text {
    color:orange;
}
.green-text {
    color:#00ff00
}
.margin-left-5 {
    margin-left: 5px;
}


.size16 {
    height: 14px;
    width: 14px;
}

@media only screen and (max-width: 600px) {



    .notificationsidebar {
        display: none;
    }
    .app {
        width: calc(100% - 70px - 20px) ;
    }


    .flex-boxing3>*{
        min-width: 1px!important;
    }
    
    .stack-if-600 {
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .margin-10-side-if-600 {
        margin-left: 10px;
        margin-right: 10px;
    }
    .stack-if-600>*{
        width: 100%;
    }
}
@media only screen and (min-width: 601px) {



    .flex-boxing3>*{
    min-width: 550px!important;
        
    }
}

@media only screen and (max-width: 6000px) {
    
    .stack-if-600-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .stack-if-600-2>*{
        width: 100%;
        margin-top: 3px;
    }
    .hide-if-600 {
        display: none;
    }
    .wide-if-600 {
        width: 100%;
    }
    .spread-if-600 {
        justify-content: space-between;
    }
}

.containerScheduleEmpty {
    width: 100%;
    max-width:100%;
    min-height: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
}
    


.containerLineBottom {
    border-bottom: var(--darkmPrimaryColor) 1px solid;
}

.containerLineBottom2 {
    border-bottom: var(--darkmSecondaryColor) 1px solid;
}

.containerSchedule {
    width: 100%;
    max-width: 100%;
    min-height: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    border-top: var(--darkmPrimaryColor) 1px solid;
}

.containerSchedule .draggableSchedule {
    flex-direction: row-reverse;
    border-radius: 0rem;
    height: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
    width:100%;
    max-width: calc(((100vh - 50px - 50px) * 0.5081967213) - 123px);
    
}

.containerSchedule  .dragableItemMainInfos {
    flex-direction: row-reverse;
}

.containerSchedule  .dragableItemAdditionnalInfos {
    display: none;
}
    

.draggableSchedule {
    background-color: var(--darkmPrimaryColor);
    border: 1px solid var(--darkmSecondaryColor);
    cursor: move;
    display: flex;
    text-align: center;
    border-radius: 0.5rem;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}





.accountItem {
    background-color: var(--darkmSecondaryColor);
    border: 1px solid var(--darkmPrimaryColor);
    display: flex;
    text-align: center;
    border-radius: 0.5rem;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 47px;
}




.importedItem {
    background-color: var(--darkmPrimaryColor);
    border: 1px solid var(--darkmSecondaryColor);
    display: flex;
    text-align: center;
    border-radius: 0.5rem;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}





.moveDown15 {
    transform: translateY(15px);
}

.moveDown5 {
    transform: translateY(5px);
}

.thin-scrollbar::-webkit-scrollbar {
    height: 3px; /* Hauteur de la scrollbar pour la rendre discrète */
    width: 3px; /* Hauteur de la scrollbar pour la rendre discrète */
}



.bandeau,.bandeau2 {
    position: absolute;
    opacity: 0.5;
    height: 1px; /* Hauteur de la barre */
    background-color: var(--darkmAccentColor); /* Couleur de la barre */
    left: 0; /* Alignement à gauche */
    right: 0; /* Alignement à droite */
    display: flex; /* Utiliser flex pour centrer le texte */
    align-items: center; /* Centrer verticalement */
}

.bandeau2 {
    background-color: green ; /* Couleur de la barre */
}

.height-20 {
    height: 20px!important;
}

.height-20 {
    height: 20px!important;
}

.width-20 {
    width: 20px!important;
    min-width: 20px;
}


.height-40 {
    height: 40px!important;
}

.width-40 {
    width: 40px!important;
}


#schedulerCollumn {
    position: relative
}

#initial-container {
    min-height: 50px;
}

#connectionErrorAlert {
    margin-top:0px;
}


.nospin::-webkit-outer-spin-button,
.nospin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.nospin {
  -moz-appearance: textfield;
}


.highlight-on-hover:hover *:not(.no-highlight-on-hover) {
    background-color: var(--darkmPrimaryColor); /* ou toute autre stylisation */
}



.line-height-1 {
    line-height: 1.5; /* Utilise une valeur numérique relative */
}

.message-ai{
    padding: 10px;
    margin: 10px;
    background-color: var(--darkmSecondaryColor);
    border-radius: 0.5rem;
    border-bottom-left-radius: 0rem;
}
.message-error{
    padding: 10px;
    margin: 10px;
    background-color: #ff0000bd;
    border-radius: 0.5rem;
    border-bottom-left-radius: 0rem;
}
.message-user {
    padding: 10px;
    margin: 10px;
    background-color: var(--darkmTertiaryColor);
    border-radius: 0.5rem;
    border-bottom-right-radius: 0rem;
}

.border-transparent {
    border: 2px solid #ffffff00;
}

.border-green {
    border: 2px solid green;
}

.border-red {
    border: 2px solid red;
}

.border-orange {
    border: 2px solid orange;
}


.onlyMoveOut button {
    background-color: red!important;
}

.orangeBG  {
    background-color: orange!important;
}
.orange  {
color: orange!important;
}
.vert  {
    color: green!important;
}

.opacited {
    opacity: 1;
}

.extra-rows {
    display: none;
}


#groupSelected {
    color:      var(--darkmAccentColor)!important;
}
.accented {
    color:      var(--darkmAccentColor)!important;
}

.padding-bottom-5 {
    padding-bottom: 5px;
}
.padding-top-5 {
    padding-top: 5px;
}

.flex-boxing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.flex-boxing>*{flex-grow: 1;}

.flex-boxing2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.flex-boxing2>* {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

.flex-boxing3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.flex-boxing3>*{
    flex-grow: 1;
}

.flex {display:flex}




.device-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; 
}

.chat-grid {
    columns:300px;
    gap: 10px; /* par exemple */
}


.chat-grid > * {
    margin-bottom: 10px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
}


.message-bubble {
    padding: 5px;
    margin: 5px;
    border-radius: 0.5rem;
    max-width: 90%;

}
.message-bubble.me {
    background-color: var(--darkmPrimaryColor);
    align-self: flex-end;
    border-bottom-right-radius: 0rem;
}
.message-bubble.match {
    background-color: white;
    color:black;
    align-self: flex-start;
    border-bottom-left-radius: 0rem;
}

.message-date-header {
    padding: 5px;
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: var(--darkmSecondaryTextColor);
}

.message-bubble.match>.message-time {
    font-size: 12px;
    align-self: flex-start;
    color: var(--darkmSecondaryTextColor);
}
.message-bubble.me>.message-time {
    font-size: 12px;
    align-self: flex-end;
    color: var(--darkmSecondaryTextColor);
}


.draggable-report {
    cursor: move;
}

/* Optionnel : pour indiquer que le groupe est une zone de dépôt valide */
.reports-groups-grid .spread-appart-lined {
    transition: background-color 0.3s;
}

.reports-groups-grid .spread-appart-lined.drag-over {
    background-color: #d1e7dd33; /* Couleur de surbrillance lors du drag over */
}

/* CSS pour la sélection des groupes via clic droit */
.group-item .small-text {
    color: white; /* Couleur par défaut */
    transition: color 0.3s ease;
}

.group-item.selected .small-text {
    color: #FFC107; /* Couleur lorsqu'il est sélectionné */
}

body.selection-mode {
    cursor: pointer;
}


.dragging {
    opacity: 0.5;
}

.group-item .small-text {
    transition: color 0.3s ease;
}

#elementsClickedBox {
    margin-top: 10px;
    min-height: 100px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#elementsClickedBox img {
    border: 1px solid #ccc;
    cursor: pointer;
    max-width: 150px;
    object-fit: contain;
}

.click-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }



.portrait-9-16 {
    aspect-ratio: 9 / 16; /* Ratio 9:16 pour un format portrait */
    height: 100%;
    width: auto; /* Largeur automatique en fonction du ratio */
}

.portrait-9-19 {
    aspect-ratio: 9 / 19; /* Ratio 9:16 pour un format portrait */
    height: 100%;
    width: auto; /* Largeur automatique en fonction du ratio */
}

.portrait-18-39 {
    aspect-ratio: 18 / 39; /* Ratio 9:16 pour un format portrait */
    height: 100%;
    width: auto; /* Largeur automatique en fonction du ratio */
}





.magicw {
    height: 100%;
    width: 100px;
}

.flex-1 {
    flex: 1;
}


.absolute-tucked-button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}



.full-height-minus-166 {
    height: calc(100% - 166px); /* Hauteur définie */
}