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



.margin-top-10i {
    margin-top: 10px !important;
}


.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,
#manageCategoriesDialog,
#editProxyCategoriesDialog {
    background-color: var(--darkmSecondaryColor);
    border: none;
    color: white;
    text-align: left;
    border-radius: 0.5rem;
}

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

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

#setTimerDialog {
    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);
}

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

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

.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-bottom-left {
    position: absolute;
    bottom: 0;
    left: 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-bottom-left {
    border-bottom-left-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;
}

.max-width-200 {
    max-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);
}