:root {
    --darkmPrimaryColor: #0e1621;   
    --darkmSecondaryColor: #17212b; 
    --darkmSecondaryColorDimmed: #17212b66; 
    --darkmSecondaryColorDimmed2: #17212b99; 
    --darkmPrimaryColorDimmed: #0e162166; 
    --darkmPrimaryColorDimmed2: #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);
}

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

.normal-font {
    font-family: Inter, sans-serif!important;
}

.no-padding {
    padding:0px;
}

.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;
}


.sugestlocation {
    position: absolute;
    bottom: 5px;
    left: 5px;
}


.notification-controller{
    position: absolute;
    bottom: 5px;
    right: 5px;

}



.topzindex {
    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;
}

.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-right {
    display: flex;
    flex-direction: column;
    align-items: end;
}


.stacked-from-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start!important;
}


.from-start {
    display: flex;
    align-items: start;
    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;
    justify-content: flex-end!important;
}
.lined-from-the-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end!important;
}


.lined-in-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.height-100 {
    height: 100px;
}




.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% - 90px); /* 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;
}


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


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


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


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

.height-30 {
    height: 30px;
}
.height-300 {
    height: 300px;
}

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

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


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

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


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

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

.height-390 {
    height: 390px;
}


.nofocus {
    outline: none!important;
}

.height-480 {
    height: 480px;
}

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

.height-ttg {
    height: calc(49.5px * 11 - 30px);
}





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

.notificationsidebar {
    position: fixed;
    top: 60px;
    right: 0;
    width: 300px; /* Width of the sidebar */
    height: 100%; /* 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;
    padding-left: 10px;
    padding-right: 10px;
}






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

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

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

.blue-text {
    color: blue!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-250 {
    min-width: 250px;
    width: 250px;
}


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


.editableBG:hover,
.editableBG:focus {
    background-image: url('/static/icons/pen.svg');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    color: white;
}

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

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

.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%;
}

.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;
}
.center-align-text {
    text-align: center;
}


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


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

.width-70 {
    width: 70px;
}


.sticky {
    position: sticky!important;
    top: 20px;
    background-color: #f1f1f1;
    transition: box-shadow 0.3s ease;
}

.sticky2{
    position: sticky;
    top:10px;
    background-color: var(--darkmPrimaryColor);
}
.sticky3{
    position: sticky;
    top:10px;
}
.sticky4{
    position: sticky;
    top:20px;
}

.sticky5 {
    position: sticky!important;
    top:0px;
}



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

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

.height-255-minus-49 {
    height: calc(255px - 49px);
}
.height-500-minus-28 {
    height: calc(500px - 28px);
}

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

.gap-10 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gap-5 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.full-width {
    width: 100%;
}

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

.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 );
}


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

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

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

.height-37 {
    height: 37px;
}

.height-50vh {
    height: 50vh;
}

.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;
}


.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;
}




.leaflet-popup-content-wrapper, .leaflet-popup-content {
    margin: 10px!important; /* Set padding to 5px */
    font-family: sans-serif,Inter !important; /* Use Inter font */
}

.leaflet-popup-content-wrapper{
    transform: translateY(15px)!important;

}


.leaflet-popup-tip-container,.leaflet-popup-close-button {
    display: none!important;
}




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


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


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


.monthly-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.micro-button {
    font-size: 7px;
    padding: 2px 3px;
}


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

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

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


.smooth-reveal {
    transition: opacity 0.4s ease;
}


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

.true-black-bg {
    background-color: #000000!important;
    color: white!important;
}
.tiktok-bg {
    background-image: linear-gradient(rgba(0,0,0, 0.9), rgba(0, 0, 0, 0.9)), url('/static/images/tiktok-small-2.png');
    background-repeat: repeat;
    background-size: 50px 50px; /* Adjust size as needed */
    background-attachment: fixed; /* Keeps background fixed while scrolling */

}


.inverted-bg {
    filter: invert(1) hue-rotate(180deg)
}
  
@keyframes rotateTiles {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-3deg);
    }
    75% {
        transform: rotate(7deg);
    }
    100% {
        transform: rotate(0deg);
    }
}



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

.black-bg-dimmed {
    background-color: var(--darkmPrimaryColorDimmed);
    color: white;
}
.black-bg-dimmed2 {
    background-color: var(--darkmPrimaryColorDimmed2);
    color: white;
}

.black-bgi {
    background-color: var(--darkmPrimaryColor)!important;
    color: white;
}

.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 */
}




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


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

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

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


#manualDialog {
    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;
}
#openGlobalSearchDialog {
    background-color: transparent;
    border: none;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}
#openGroupUploadDialog {
    background-color: var(--darkmSecondaryColor);
    border: none;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}


#openExpiredDialog {
    background-color: var(--darkmSecondaryColor);
    border: none!important;
    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;
}
#openSoftwareSettingsDialog {
    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;
}


#emailFarmingDialog {
    border: none;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}


.enormous-dialog {
    width: 90vw;
    height: 90vh;
}


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


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


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


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;  
    font-family: Inter, sans-serif;
}

.padding-5 {
    padding: 5px;
}

.padding-4 {
    padding: 4px;
}

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 */
}

.box-shadow {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 
}
.no-shadow {
    box-shadow: none!important;
}


/* É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% */
}

.flexed {
    display: flex;
}


.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;
}
.padding-bottom-10 {
    padding-bottom: 10px;
}
.padding-bottom-0 {
    padding-bottom: 0px;
}
.height-210 {
    height: 210px;
} 
.max-height-210 {
    max-height: 210px;
}


.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:  calc((100vh - 50px - 50px) * (50 / 610));
    height:  calc((100vh - 50px - 50px) * (50 / 610));
    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 1s 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;
    font-size: 14px;
    width: 25px;
}

.inline-flex{
    display: inline-flex;
}


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

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

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

.max-height-minus-225{
    height: calc(100% - 225px);
}
.max-height-minus-35{
    height: calc(100% - 35px);
}





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

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

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

.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);
}

.full-height-minus-135 {
    height: calc(100% - 135px);
}
.full-height-minus-130 {
    height: calc(100% - 130px);
}
.full-height-minus-125 {
    height: calc(100% - 125px);
}

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

textarea {
    resize: none;
}

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

.centering-container2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.height-47 {height:47px}

.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-0 {
    background-color: var(--darkmSecondaryColor);
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: white;
    border-radius: 0.25rem;
    pointer-events: none; /* Makes the input field non-interactive */
    user-select: none; /* Prevents text selection */
    cursor: default; /* Changes cursor to default to indicate non-interactivity */
}

.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));
}


.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);
}

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

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




.secondary-bgi {
    background-color: var(--darkmSecondaryColor)!important;
}


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



.loading-image-static {
    filter: blur(10px); 
    transition: filter 0.5s ease-in-out; 
    overflow: hidden;
    position: relative;
}

@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 */
    }
}

.relative {
    position: relative;
}

.center-y-right-5px {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.reveal-child-on-hover {
    position: relative;
    overflow: hidden;
}

.reveal-child-on-hover .child-to-reveal {
    right: -100%;
    opacity: 0;
    transition: right 0.5s ease-in-out, opacity 0.3s ease-in-out;
}

.fast-reveal {
    transition: right 0.1s ease-in-out, opacity 0.1s ease-in-out!important;
}

.reveal-child-on-hover:hover .child-to-reveal {
    right: 0px;
    opacity: 1;
}


.opacity-reveal {
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}
.opacity-reveal:hover {
    opacity: 1;
}




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

.absolute-top-right {
    position: absolute;
    top: 10px;
    right:10px;
}

.absolute-top-right2 {
    position: absolute;
    top: 40px;
    right:15px;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}





.absolute-over {
    position: absolute;
    top: -10px;
    right: 0;
    transform: translate(0%, -100%);
}

.absolute-stick-to-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.absolute-stick-to-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.absolute-stick-to-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}
.absolute-stick-to-top-right {
    position: absolute;
    top: 0;
    right: 0;
}


.absolute-stick-to-right-center {
    position: absolute;
    right: 0;
    transform: translate(0%,0%);
}
.absolute-stick-to-right-center2 {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: 0;
}

.absolute-stick-to-left-center {
    position: absolute;
    left: 0;
    transform: translate(0%,0%);
}

.absolute-stick-to-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}




.pointer-events-none {
    pointer-events: none;
}


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

.height-230 {
    height: 230px;
}




.exclamation-2 {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    color: red;
    background-color: var(--darkmSecondaryColor);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: shake 3.5s infinite alternate;
  }

.paste-btn {
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.bottom-abs-btn {
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.tenbox {
    width: 10px!important;
    height: 10px!important;
}

.tenbox2 {
    width: 14px!important;
    height: 14px!important;
}

.green-circle {
    width: 10px;
    height: 10px;
    background-color: limegreen;
    border-radius: 50%;
    transform: translateY(1px);
    display: inline-block;
}
.red-circle {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    transform: translateY(1px);
    display: inline-block;
}
.orange-circle {
    width: 10px;
    height: 10px;
    background-color: orange;
    border-radius: 50%;
    transform: translateY(1px);
    display: inline-block;
}
.yellow-circle {
    width: 10px;
    height: 10px;
    background-color: yellow;
    border-radius: 50%;
    display: inline-block;
    transform: translateY(1px);
}
.grey-circle {
    width: 10px;
    height: 10px;
    background-color: grey;
    border-radius: 50%;
    transform: translateY(1px);
    display: inline-block;
}

.bigger-circle {
    width: 15px!important;
    height: 15px!important;
}


.exclamation-3 {
    position: absolute;
    top: 5px;
    right: -10px;
    width: 15px;
    height: 15px;
    background-color: var(--darkmAccentColor);
    color: black;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: shake 3.5s infinite alternate;
  }

.exclamation {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background-color: var(--darkmAccentColor);
    color: black;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: shake 3.5s infinite alternate;
  }

@keyframes shake {
    0% {
        transform: translateY(-15px);
    }
    25% {
        transform: translateY(-8px);
    }
    50% {
        transform: translateY(-15px);
    }
    75% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(-15px);
    }
}

.overflow-hidden {
    overflow: hidden;
}

.underline {
    text-decoration: underline;
}
.no-underline {
    text-decoration: none;
}   

.b {
    font-weight: bold;
}


.darken-on-hover2 {
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Smooth transition effect */
    opacity: 0; /* Default opacity set to 50% */
}

.darken-on-hover2:hover {
    opacity: 1; /* Restores the opacity to 100% on hover */
    background-color: var(--darkmPrimaryColorDimmed);
}

.transparent-text {
    display: none;
}


.rounded-corner {
    border-radius: 0.5rem;
}
.rounded-corner-top-right {
    border-top-right-radius: 0.5rem;
}
.rounded-corner-top-left {
    border-top-left-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;
}


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

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




.padding-1 {
    padding: 1px;
}


.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;
}

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

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

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

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

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

.transparent-bg {
    background-color: transparent;
}

.width-640 {
    width: 640px;
}
.width-600 {
    width: 600px;
}
.height-570 {
    height: 570px;
}

.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;
}

.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;
}
.averageBG {
    background-color: var(--darkmPrimaryColor);
    border-radius: 0.25rem;
    padding: 2px 5px;
}

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


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

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

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





.uploadedBG {
    background-color: green;
    border-radius: 0.25rem;
    padding: 2px 5px;
}
.height-24p5 {
    height: 24.5px;
}
.size-24 {
    width: 24px;
    height: 24px;
}

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

.exportedBG {
    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
}
.expiredTag {
    background-color: #eee;
    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;
}

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

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

.usedBG {
    background-color: grey;
    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;
}
.deadBG {
    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;
    border-radius: 0.5rem;
    aspect-ratio: 1 / 1; /* Maintient le ratio carré */
    overflow: hidden; /* Masque tout débordement d'image */
}

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


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

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


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


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


.max-height-70vh {
    max-height: 70vh;
}

.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;
}
.badge-spoof-counter-left {
    position: absolute;
    bottom: 10px;
    left: 50%; 
    transform: translateX(-50%); 
}





.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;
}

.width-25p {
    width: 25%!important;
}
.width-25p {
    width: 25%!important;
}
.width-25 {
    width: 25px;
}

.height-25 {
    height:25px;
}
.height-15 {
    height:15px;
}
.height-20 {
    height:20px;
}


.width-87 {
    width:87px;
}

.height-327 {
    height:327px;
}


.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) */
}
.gallery-grid2 {
    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) */
}
.gallery-gridB {
    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) */
}

.gallery-grid3 {
    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) */
}

.gallery-grid4 {
    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) */
}


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




.summary-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) */
}


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

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

.background-cover-top {
    background-size: cover;
    background-position: top;
}


/*
.background-cover-top > * {
    visibility: hidden;
}
*/




.height-200 {
    height: 200px;
}

.height-375 {
    height: 375px;
}
.height-325 {
    height: 325px;
}

.height-400 {
    height: 400px;}

.width-400 {
    width: 400px;
}

.selected-layout {
    border: solid 1px var(--darkmAccentColor);
}

.wasselected-layout {
    border: solid 1px #FF0000bd;
}
        



.unselected-layout {
    border: solid 1px rgba(0, 0, 0, 0);
}
.unselected-layout:hover {
    border: solid 1px var(--darkmAccentColor);
}




.padding-20 {
    padding:20px;
}

.padding-2 {
    padding:2px;
}
.margin-2 {
    margin:2px;
}

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

.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) */
}
.configuration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Crée des colonnes automatiques */
    gap: 20px; /* Espace entre les images (ajustez selon vos besoins) */
}


.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) */
}

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


.panel-account-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) */
}





.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) */
}




.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 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-100 {
    max-height: calc(100% - 100px);
    height: calc(100% - 100px);
}


.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 */
}

.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;
}


.height-242 {
    height: 242px;
}
.width-60 {
    width: 60px;
}


.red-alert {
    background-color: rgba(189, 7, 7, 0.551);
    color: white;
    border: solid 1px red;
    border-radius: 0.25rem;
    width: 100%;
    box-sizing: border-box;
}
.orange-alert {
    background-color: rgba(255, 165, 0, 0.551);
    color: white;
    border: solid 1px orange;
    border-radius: 0.25rem;
    width: 100%;
    box-sizing: border-box;
}








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


.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:not(.globalSearchItem) {
    text-decoration: none;
    outline: none;
}
a {
    color: inherit;
}



#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; 
}

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

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


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

@media only screen and (max-width: 1300px) {
    .notificationsidebar {
        display: none;
    }
    .app {
        width: calc(100% - 70px - 20px) ;
    }
}
@media only screen and (max-width: 600px) {
    .stack-if-600 {
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    .stack-if-600>*{
        width: 100%;
    }
    .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;
    border-bottom: var(--darkmPrimaryColor) 1px solid;
}
    




.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-bottom: 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;
}



.marginBottomMinus4 {
    margin-bottom: -4px;
}


.moveDown15 {
    transform: translateY(15px);
}
.moveUp15 {
    transform: translateY(-15px);
}
.moveUp10 {
    transform: translateY(-10px);
}


.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.75;
    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: rgb(82, 236, 82) ; /* Couleur de la barre */
}

.height-20 {
    height: 20px;
}

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

.width-200 {
    width: 200px;
}

#schedulerCollumn {
    position: relative
}

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

#initial-container2 {
    min-height: 300px;
}

#connectionErrorAlert {
    margin-top:0px;
}

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


.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;
}

.opacited {
    opacity: 1;
}

.extra-rows {
    display: none;
}


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

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



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

.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;
}

.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;
}

.layout-grid {
    columns:150px;
    gap: 10px;
}
.layout-grid > * {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
}


.secondary-border {
    border: 1px solid var(--darkmSecondaryColor);
}
.red-border {
    border: 1px solid red;
}
.green-border {
    border: 1px solid green;
}



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




.accent-border {
    border: 1px solid var(--darkmAccentColor);
}

.accent-border-on-hover:hover {
    border: 1px solid var(--darkmAccentColor);
}

.black {
    color: black;
}


.darken-on-hover {
    transition: background-color 0.3s ease;
}

.darken-on-hover:hover {
    background-color: rgba(0, 0, 0, 1); /* Adjust the color and opacity as needed */
    color: white;
    cursor: pointer;
}








.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);
}


.hideO {
    opacity:0;
}


.stick-to-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.grow {
    flex-grow: 1;
}

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

.height-600 {
    height: 600px;
}
.height-60 {
    height: 60px;
}
.height-580 {
    height: 580px;
}





.progress-container {
    width: 100%;
    background-color: var(--darkmPrimaryColor);
    border-radius: 25px;
    padding: 2px;
    position: relative;
}

.progress-bar {
    width: 0%;
    height: 4px;
    background-color: var(--darkmAccentColor);
    border-radius: 25px;
    text-align: center;
    color: white;
    line-height: 20px;
    font-weight: bold;
}



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

.pin-bottom {
    border-right: 1px solid var(--darkmSecondaryColor);
    border-bottom: 1px solid var(--darkmSecondaryColor);
    z-index: 999999;
    width: 10px;
    height: 10px;
    background-color: var(--darkmPrimaryColor);
    position: absolute;
    transform: rotate(45deg);
    bottom: -5px;
    left: 50%;
    transform-origin: center;
    pointer-events: none;
}
.pin-bottom-right {
    border-right: 1px solid var(--darkmSecondaryColor);
    border-bottom: 1px solid var(--darkmSecondaryColor);
    z-index: 999999;
    width: 10px;
    height: 10px;
    background-color: var(--darkmPrimaryColor);
    position: absolute;
    transform: rotate(45deg);
    bottom: -5px;
    right: 10px;
    transform-origin: center;
    pointer-events: none;
}



.pin-top {
    border-left: 1px solid var(--darkmSecondaryColor);
    border-top: 1px solid var(--darkmSecondaryColor);
    z-index: 999999;
    width: 10px;
    height: 10px;
    background-color: var(--darkmPrimaryColor);
    position: absolute;
    transform: rotate(45deg);
    top: -5px;
    left: 50%;
    transform-origin: center;
    pointer-events: none;
}
.pin-top-left {
    border-left: 1px solid var(--darkmSecondaryColor);
    border-top: 1px solid var(--darkmSecondaryColor);
    z-index: 999999;
    width: 10px;
    height: 10px;
    background-color: var(--darkmPrimaryColor);
    position: absolute;
    transform: rotate(45deg);
    top: -5px;
    left: 10px;
    transform-origin: center;
    pointer-events: none;
}

.thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}
.thumbnailContainer {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    background-color: var(--darkmSecondaryColor);
}


.thumbnail-container {
    padding-top: 120px;
}


.width-300 {
    width: 300px;
}

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

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

.margin-top-2 {
    margin-top: 2px;
}
.margin-top-4 {
    margin-top: 4px;
}

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



#accountsStatsChart {
    height: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


.opacity75 {
    opacity: 0.75;
}
.opacity50 {
    opacity: 0.5;
}





.layout-grid2 {
    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) */
}


.layoutMinuteSlot {
    width: 100%;
    max-width: 100%;
    height: 5px;
    display: flex;
    align-items: center;
    justify-content: right;
    position: relative;
}


.minute-separator {
    width: 100%;
    height: 2px;
    background-color: var(--darkmPrimaryColor);
    transition: background-color 0.1s ease;
    cursor: pointer;
}



.separator-container:hover .minute-separator {
    background-color: var(--darkmAccentColor);
}


img,a {
    -webkit-user-drag: none; /* Disables dragging in WebKit-based browsers (e.g., Chrome, Safari) */
    user-drag: none; /* Standard property, though not widely supported yet */
    user-select: none; /* Prevents text selection, which can also help in some cases */
  }
  


.z-index-1000 {
    z-index: 1000;
}


.z-index-10000 {
    z-index: 10000;
}



#searchDevice {
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

#searchDevice:hover,
#searchDevice:focus {
    opacity: 1;
}

.red-hover {
    transition: opacity 0.2s, fill 0.2s;
    opacity: 0.5;
}

.red-hover:hover {
    opacity: 1;
    stroke: red;
}

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


input.cant-be-empty::placeholder {
    color: rgba(255, 0, 0, 0.531);
}

.fill-white {
    fill: white;
}


.secondary-solid-on-hover {
    transition: background-color 0.2s ease;
}
.secondary-solid-on-hover:hover {
    background-color: var(--darkmSecondaryColor);
}