/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __fonts.css project project-deep-sky
 */

div[data-app="true"] {
    position: relative;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary)
}

div[data-app="true"] .datama-plot {
    font-family: var(--font-family);
}

div[data-app="true"] a {
    color: var(--color-primary);
    text-decoration: none;
}

div[data-app="true"] ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

div[data-app="true"] li {
    padding-left: 10px;
}

div[data-app="true"] h1 {
    font-size: 1.5rem;
    line-height: 40px;
}

div[data-app="true"] h2 {
    font-size: 1.25rem;
    line-height: 30px;
}

div[data-app="true"] h3 {
    font-size: 1.1rem;
    line-height: 24px;
}

div[data-app="true"] h4 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 20px;
}

div[data-app="true"] h1, div[data-app="true"] h2, div[data-app="true"] h3, div[data-app="true"] h4, div[data-app="true"] h5, div[data-app="true"] h6 {
    font-family: var(--font-family);
    font-weight: 500;
    color: rgb(var(--color-dark-rgb));
}

div[data-app="true"] h1, div[data-app="true"] h2, div[data-app="true"] h3, div[data-app="true"] h4, div[data-app="true"] h5, div[data-app="true"] h6, div[data-app="true"] ul, div[data-app="true"] pre, div[data-app="true"] p {
    margin-top: 0;
    margin-bottom: 1rem;
}

div[data-app="true"] ul, div[data-app="true"] pre, div[data-app="true"] p, div[data-app="true"] blockquote {
    color: rgb(var(--color-dark-thin-rgb))
}

div[data-app="true"] blockquote {
    font-family: var(--font-family);
    position: relative;
    font-size: 1.5rem;
    font-weight: 300;
}

div[data-app="true"] .bg-primary blockquote {
    font-weight: 100;
}

div[data-app="true"] blockquote:not(.no-quote)::before,
div[data-app="true"] blockquote:not(.no-quote)::after {
    font-size: 30px;
    height: 10px;
    font-weight: 300;
    opacity: .75;
}

div[data-app="true"] blockquote:not(.no-quote)::before {
    content: "❛❛";
    left: 0;
    top: 0;
    margin-right: 5px;
}

div[data-app="true"] blockquote:not(.no-quote)::after {
    content: '❜❜';
    right: 0;
    bottom: 0;
    margin-left: 5px;
}

div[data-app="true"] .datama-icon, div[data-app="true"] .datama-icon path {
    display: flex;
    height: 100%;
    align-items: center;
    width: fit-content;
    fill: rgb(var(--color-dark-rgb))
}

div[data-app="true"] .icon-booting {
    position: absolute;
}

div[data-app="true"] .datama-icon .icon-booting path {
    fill: transparent !important;
}

div[data-app="true"] .datama-badge {
    transform: scale(.5);
    position: absolute;
    bottom: -5px;
    right: -10px;
    font-size: 20px;
    line-height: 20px;
    height: fit-content;
    padding: 5px;
    background: var(--color-white);
    border-radius: 50%;
}

div[data-app="true"] .datama-badge-top .datama-badge {
    top: -5px;
    right: -10px;
}

div[data-app="true"] .font-primary {
    color: rgb(var(--datama-primary-light-rgb));
}

div[data-app="true"] .datama-translate {
    position: fixed;
    z-index: 9;
}

div[data-app="true"] .datama-translated {
    position: relative !important;
    display: inline-block;
}

div[data-app="true"] .datama-translate-hover:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--datama-primary-rgb), .1);
    transition: .2s ease-in;
}

/* ── Translation edition dialog: backdrop ── */
div[data-app="true"] .datama-translation-edition-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 99;
}

/* ── Translation edition dialog: container ── */
div[data-app="true"] .datama-translation-edition {
    position: fixed;
    background: var(--color-bg-light);
    box-shadow: var(--shadow-large, var(--shadow));
    border: var(--border);
    border-radius: var(--border-radius, 8px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 90%);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}

/* ── Header ── */
div[data-app="true"] .datama-translation-edition-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
    flex-shrink: 0;
}

div[data-app="true"] .datama-translation-edition-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgb(var(--color-dark-rgb));
}

div[data-app="true"] .datama-translation-edition-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: rgb(var(--color-dark-rgb));
    opacity: 0.6;
    transition: all 0.15s ease;
}

div[data-app="true"] .datama-translation-edition-close:hover {
    opacity: 1;
    background: var(--hover, rgba(var(--color-dark-rgb), 0.06));
}

/* ── Body: two-column editor + preview ── */
div[data-app="true"] .datama-translation-edition-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

div[data-app="true"] .datama-translation-edition-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

div[data-app="true"] .datama-translation-edition-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--color-dark-rgb), 0.5);
    margin-bottom: 6px;
    display: block;
}

div[data-app="true"] .datama-translation-edition-editor {
    padding: 12px 14px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: var(--border-radius, 6px);
    font-size: 0.85rem;
    line-height: 1.6;
    min-height: 100px;
    background: var(--color-white, #fff);
    color: rgb(var(--color-dark-rgb));
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow-y: auto;
    word-break: break-word;
}

div[data-app="true"] .datama-translation-edition-editor:focus {
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.12);
}

div[data-app="true"] .datama-translation-edition-editor.loading {
    opacity: 0.5;
}

div[data-app="true"] .datama-translation-edition-preview {
    padding: 12px 14px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: var(--border-radius, 6px);
    font-size: 0.85rem;
    line-height: 1.6;
    min-height: 100px;
    background: rgba(var(--color-dark-rgb), 0.02);
    color: rgb(var(--color-dark-rgb));
    overflow-y: auto;
    word-break: break-word;
}

/* ── Variables collapsible section ── */
div[data-app="true"] .datama-translation-edition-variables {
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.06);
    flex-shrink: 0;
}

div[data-app="true"] .datama-translation-edition-variables-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--color-dark-rgb), 0.6);
    transition: color 0.15s ease;
    user-select: none;
}

div[data-app="true"] .datama-translation-edition-variables-toggle:hover {
    color: rgb(var(--color-dark-rgb));
}

div[data-app="true"] .datama-translation-edition-toggle-icon {
    font-size: 0.55rem;
    transition: transform 0.15s ease;
}

div[data-app="true"] .datama-translation-edition-variables-content {
    padding: 0 20px 12px;
    max-height: 200px;
    overflow-y: auto;
}

div[data-app="true"] .datama-translation-edition-variables-content.hide {
    display: none;
}

div[data-app="true"] .datama-translation-edition table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.75rem;
}

div[data-app="true"] .datama-translation-edition table td {
    vertical-align: top;
    padding: 4px 6px;
}

div[data-app="true"] .datama-translation-edition table th {
    padding: 4px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(var(--color-dark-rgb), 0.5);
}

div[data-app="true"] .datama-var-tree {
    font-size: 12px;
    width: 100%;
}

div[data-app="true"] .datama-var-tree-header-row {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border, #ddd);
    margin-bottom: 4px;
}

div[data-app="true"] .datama-var-tree-col-title {
    flex: 1;
}

div[data-app="true"] .datama-var-tree-node {
    border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,.06));
}

div[data-app="true"] .datama-var-tree-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px;
    min-height: 28px;
    transition: background-color .15s;
}

div[data-app="true"] .datama-var-tree-expandable {
    cursor: pointer;
}

div[data-app="true"] .datama-var-tree-expandable:hover {
    background-color: var(--color-bg-hover, rgba(0,0,0,.03));
}

div[data-app="true"] .datama-var-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    font-size: 9px;
    color: var(--color-text-secondary, #888);
    user-select: none;
    transition: transform .15s;
}

div[data-app="true"] .datama-var-tree-toggle-spacer {
    display: inline-block;
    width: 14px;
    min-width: 14px;
}

div[data-app="true"] .datama-var-tree-key {
    font-weight: 500;
    color: var(--color-text, #333);
    white-space: nowrap;
}

div[data-app="true"] .datama-var-type-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

div[data-app="true"] .datama-var-type-string {
    background: #e8f5e9;
    color: #2e7d32;
}

div[data-app="true"] .datama-var-type-number {
    background: #e3f2fd;
    color: #1565c0;
}

div[data-app="true"] .datama-var-type-boolean {
    background: #fff3e0;
    color: #e65100;
}

div[data-app="true"] .datama-var-type-object {
    background: #f3e5f5;
    color: #7b1fa2;
}

div[data-app="true"] .datama-var-type-array {
    background: #fce4ec;
    color: #c62828;
}

div[data-app="true"] .datama-var-type-null {
    background: #f5f5f5;
    color: #9e9e9e;
}

div[data-app="true"] .datama-var-tree-value {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    color: var(--color-text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

div[data-app="true"] .datama-var-tree-count {
    font-size: 10px;
    color: var(--color-text-secondary, #999);
    font-style: italic;
}

div[data-app="true"] .datama-var-tree-path {
    margin-left: auto;
    font-family: monospace;
    font-size: 10px;
    color: var(--color-text-tertiary, #aaa);
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

div[data-app="true"] .datama-var-tree-path:hover {
    background: var(--color-bg-hover, rgba(0,0,0,.06));
    color: var(--color-text, #333);
}

div[data-app="true"] .datama-var-tree-path-copied {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}

div[data-app="true"] .datama-var-tree-children {
    overflow: hidden;
    transition: max-height .2s ease-in-out;
}

div[data-app="true"] .datama-var-tree-collapsed {
    display: none;
}

div[data-app="true"] .datama-translation-edition-preview {
    font-size: .8rem;
    white-space: wrap;
    padding: 10px;
    height: fit-content;
    border: var(--border);
    border-radius: var(--border-radius);
    position: relative;
}

div[data-app="true"] .datama-translation-edition table pre > code ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

div[data-app="true"] .datama-translation-edition table pre > code li {
    display: inline-block;
    list-style: none;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

div[data-app="true"] .datama-instance-type {
    font-weight: 300;
    font-size: 0.65rem;
    font-style: italic;
}

/* ── Footer: action buttons ── */
div[data-app="true"] .datama-translation-edition-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
    flex-shrink: 0;
}

div[data-app="true"] .datama-translation-edition-footer .datama-button {
    min-height: 32px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}

div[data-app="true"] .datama-translation-edition-btn-reset {
    margin-right: auto;
}

/* ── Responsive: stack columns on small dialogs ── */
@media screen and (max-width: 600px) {
    div[data-app="true"] .datama-translation-edition-body {
        grid-template-columns: 1fr;
    }
    div[data-app="true"] .datama-translation-edition {
        width: 95%;
    }
}

div[data-app="true"] ul > .datama-translated,
div[data-app="true"] div > .datama-translated {
    width: 100%;
}

div[data-app="true"] .datama-context-menu {
    box-shadow: var(--shadow);
    border: var(--border);
    cursor: pointer;
    color: var(--color-dark);
}

div[data-app="true"] .datama-context-menu > li:not(:first-child) {
    border-top: var(--border);
}

div[data-app="true"] .datama-context-menu > li:hover {
    background: var(--hover);
    transition: var(--transition-in);
}

div[data-app="true"] #datama-translation-autocomplete {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

div[data-app="true"] .datama-autocomplete-item {
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
}

div[data-app="true"] .datama-autocomplete-item .datama-autocomplete-type {
    flex-shrink: 0;
}

div[data-app="true"] .datama-autocomplete-key {
    flex: 1;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div[data-app="true"] .datama-autocomplete-value {
    flex-shrink: 0;
    max-width: 90px;
    font-weight: 300;
    font-size: 10px;
    line-height: 14px;
    color: var(--color-text-secondary, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

div[data-app="true"] .datama-autocomplete-active {
    background: var(--hover, #f0f0f0);
    outline: none;
}

div[data-app="true"] .datama-description {
    font-size: .8rem;
}

div[data-app="true"] .datama-italic {
    font-style: italic;
    font-weight: 300;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __generic.css project project-deep-sky
 */

.datama-divider {
    display: inline-block;
}
.datama-divider:not(.vertical) {
    border-top: var(--border);
    width: 100%;
    height: 1px;
    margin: 5px 0;
    min-width: 10px;
}
.datama-divider.vertical {
    border-left: var(--border);
    width: 1px;
    height: 1rem !important;
    margin: 2px 10px !important;
    line-height: unset !important;
    min-height: 10px;
    align-self: center;
}
.datama-divider.datama-divider-half:not(.vertical) {
    width: 50%;
    margin: 5px 0 5px 50%;
    transform: translateX(-50%);
}
.datama-divider.datama-divider-half.vertical {
    height: 50%;
    margin: 50% 5px 0;
    transform: translateY(-50%);
}
* ::-webkit-scrollbar-thumb {
    background: rgba(var(--color-dark-rgb), .5);
    opacity: 0.5 !important;
    border-radius: 10px !important;
    transition: .1s ease-out;
}
* ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--datama-primary-rgb), 1);
    transition: .2s ease-in;
}
* ::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

.datama-increase {
    color: green;
}

.datama-decrease {
    color: red;
}

.datama-danger{
    color: var(--color-danger);
}

.datama-module-title {
    width: 100%;
    white-space: wrap;
    font-size: 24px; /* Default size for large screens */
    line-height: 40px;
    height: 40px;
    padding: 0 20px 10px 20px;
    box-sizing: content-box;
    transition: font-size 0.3s ease; /* Smooth transition between sizes */
}

.header-title {
    font-size: 24px; /* Default size for large screens */
    transition: font-size 0.3s ease; /* Smooth transition between sizes */
}

/* Hide input when in auto mode */
.datama-input-hidden {
    display: none !important;
}

/* Manual font size mode - override responsive sizing */
.datama-module-title-manual {
    font-size: inherit !important;
    line-height: inherit !important;
    /* height: inherit !important; */
}

/* Responsive font-size for datama-module-title */
@media screen and (max-width: 1920px) {
    .datama-module-title {
        font-size: 22px;
        line-height: 38px;
        height: 38px;
    }
}

@media screen and (max-width: 1600px) {
    .datama-module-title {
        font-size: 20px;
        line-height: 36px;
        height: 36px;
    }
}

@media screen and (max-width: 1366px) {
    .datama-module-title {
        font-size: 18px;
        line-height: 34px;
        height: 34px;
    }
}

@media screen and (max-width: 1200px) {
    .datama-module-title {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
    }
}

@media screen and (max-width: 1024px) {
    .datama-module-title {
        font-size: 15px;
        line-height: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 900px) {
    .datama-module-title {
        font-size: 14px;
        line-height: 28px;
        height: 28px;
    }
}

@media screen and (max-width: 768px) {
    .datama-module-title {
        font-size: 13px;
        line-height: 26px;
        height: 26px;
    }
}

@media screen and (max-width: 600px) {
    .datama-module-title {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 480px) {
    .datama-module-title {
        font-size: 11px;
        line-height: 22px;
        height: 22px;
    }
}

@media screen and (max-width: 360px) {
    .datama-module-title {
        font-size: 10px;
        line-height: 20px;
        height: 20px;
    }
}

/* Responsive font-size for header-title */
@media screen and (max-width: 1920px) {
    .header-title {
        font-size: 18px;
    }
}

@media screen and (max-width: 1600px) {
    .header-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 1366px) {
    .header-title {
        font-size: 15px;
    }
}

@media screen and (max-width: 1200px) {
    .header-title {
        font-size: 14px;
    }
}

@media screen and (max-width: 1024px) {
    .header-title {
        font-size: 13px;
    }
}

@media screen and (max-width: 900px) {
    .header-title {
        font-size: 12px;
    }
}

@media screen and (max-width: 768px) {
    .header-title {
        font-size: 11px;
    }
}

@media screen and (max-width: 600px) {
    .header-title {
        font-size: 10px;
    }
}

@media screen and (max-width: 480px) {
    .header-title {
        font-size: 9px;
    }
}

@media screen and (max-width: 360px) {
    .header-title {
        font-size: 8px;
    }
}
.datama-module-comment {
    font-size: 14px;
}
.datama-module-comment li {
    position: relative;
}

.datama-module-comment p,
.datama-module-comment ul {
    margin-bottom: .5rem;
}
.datama-module-comment ul {
    margin-top: .5rem;
}
.datama-module-comment ul > li::after {
    content: "•" !important;
}
.datama-module-comment ul ul > li::after {
    content: "◦" !important;
}
.datama-module-comment ul ul ul > li::after {
    content: "⁃" !important;
}

.datama-module-comment ul > li::after {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1rem;
}
.datama-module-comment:empty {
    display: none;
}
.datama-translated.editable {
    cursor: pointer;
}

.w-auto {
    width: auto !important;
}

.h-auto {
    height: auto !important;
}

.opacity-0 {
    opacity: 0;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __vars.css project project-deep-sky
 */

:root {
    /* COLORS */
    --datama-white-hex: #FFFFFF;
    --datama-white-rgb: 255, 255, 255;
    /* Business Green */
    --datama-primary-hex: #00484A;
    --datama-primary-rgb: 0, 72, 74;
    /* Datama Green */
    --datama-primary-light-hex: #16D0B4;
    --datama-primary-light-rgb: 22, 208, 180;
    /* Datama Yellow */
    --datama-yellow-hex: #FEDA6A;
    --datama-yellow-rgb: 254, 218, 106;
    /* Editable Colors */
    --color-white-hex: #FFFFFF;
    --color-white-rgb: 255, 255, 255;
    /* Asset Blue */
    --color-secondary-hex: #4286F4;
    --color-secondary-rgb: 66, 134, 244;
    /* Power Orange */
    --color-danger-hex: #F8663C;
    --color-danger-rgb: 248, 102, 60;
    /* Warning Yellow */
    --color-warning-hex: #F5B700;
    --color-warning-rgb: 245, 183, 0;
    /* Dark color */
    --color-dark-hex: #1D1D1B;
    --color-dark-rgb: 29, 29, 27;
    /* Grey */
    --color-dark-thin-hex: #586F70;
    --color-dark-thin-rgb: 88, 111, 112;
    /* Lighter black */
    --color-grey-text-hex: #1F1F1F;
    --color-grey-text: 31, 31, 31;
    /* Gold */
    --color-gold-hex: #CFAC03;
    --color-gold-rgb: 207, 176, 3;

    --color-light-rgb: var(--color-white-rgb);
    --color-bg-light-rgb: var(--color-white-rgb);
    --color-bg-dark-rgb:  var(--color-dark-rgb);
    --font-family: Montserrat, Roboto, Arial, sans-serif !important;
    /* USEFUL */
    --datama-primary: rgb(var(--datama-primary-rgb));
    --datama-primary-light: rgb(var(--datama-primary-light-rgb));
    --datama-warning: rgb(var(--color-warning-rgb));
    --color-primary: rgb(var(--datama-primary-rgb));
    --color-primary-light: rgb(var(--datama-primary-light-rgb));
    --color-warning: rgb(var(--color-warning-rgb));
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-danger: rgb(var(--color-danger-rgb));
    --color-white: rgb(var(--color-white-rgb));
    --color-dark: rgb(var(--color-dark-rgb));
    --color-light: rgb(var(--color-light-rgb));
    --color-gold: rgb(var(--color-gold-rgb));
    --color-bg-dark: rgb(var(--color-bg-dark-rgb));
    --color-bg-light: rgb(var(--color-bg-light-rgb));
    --color-bg-dark-opacity: rgba(var(--color-bg-dark-rgb), 0.2);
    --color-dark-grey: rgb(var(--color-dark-thin-rgb));
    /* SHADOW */
    --shadow-color: rgba(var(--color-dark-rgb), 0.25);
    --shadow-small: 0 0 5px var(--shadow-color);
    --shadow: 0 0 10px var(--shadow-color);
    --shadow-large: 0 0 15px var(--shadow-color);
    /* BORDER */
    --border: 1px solid rgba(var(--color-dark-rgb), 0.1);
    --border-dark: 1px solid rgba(var(--color-dark-rgb), 0.25);
    --border-primary: 1px solid rgba(var(--datama-primary-rgb), 0.25);
    --border-secondary: 1px solid rgba(var(--color-secondary-rgb), 0.25);
    --border-radius: 10px;
    --border-radius-rounded: 50px;
    --border-square: 0;
    /* STATE */
    --hover: rgba(var(--color-dark-rgb), 0.1);
    /* TRANSITION */
    --transition-out: .2s ease-out;
    --transition-in: .1s ease-in;
    --transition-long-out: 1s ease-out;
    --transition-long-in: 1s ease-in;
    /* TEXT */
    --text-font-color: rgb(var(--color-grey-text));
    --quote-font-color: rgb(var(--color-dark-thin-rgb));
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __boxes.css project project-deep-sky
 */

.datama-promo-boxes {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0 20px;
}

.datama-promo-boxes > .datama-promo-box {
    width: 100%;
    max-width: 33.33%;
    padding-bottom: 10px;
    border: var(--border);
    border-radius: var(--border-radius);
    margin: 0 20px;
    transition: .1s ease-out;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-align: center;
}
.datama-promo-boxes > .datama-promo-box:hover {
    margin-top: -5px;
    margin-bottom: 5px;
    box-shadow: var(--shadow);
    transition: .2s ease-in;
}
.datama-promo-boxes > .datama-promo-box > .datama-promo-box-sub-title {
    font-size: 1.25rem;
    font-weight: 300;
    color: rgb(var(--datama-primary-light-rgb))
}
.datama-promo-boxes > .datama-promo-box > .datama-promo-box-title {
    position: relative;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    padding: 10px 0px;
    margin: -1px;
    margin-bottom: 10px;
    color: rgb(var(--color-light-rgb));
    background-color: rgb(var(--datama-primary-rgb));
    border-radius: var(--border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.datama-promo-boxes > .datama-promo-box > *:not(button):not(.datama-promo-box-title) {
    line-height: 20px;
    height: 20px;
}
.datama-promo-boxes > .datama-promo-box > button {
    padding: 5px 20px;
    border-radius: 20px;
    line-height: 20px;
    margin: 0 auto !important;
}
.datama-promo-boxes > .datama-promo-box > button > .datama-button-icon {
    font-size: 18px;
    line-height: 20px;
    margin-right: 5px;
    margin-left: -5px;
}
.datama-promo-boxes > .datama-promo-box > button > .datama-button-icon svg {
    font-size: 20px;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __button.css project project-deep-sky
 */

.datama-button {
    position: relative;
    width: fit-content;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 6px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    background: rgba(var(--color-white-rgb), 1);
    color: var(--color-dark);
    cursor: pointer;
    justify-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    font-size: 0.75rem;
    font-weight: 500;
    min-height: 36px;
    gap: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

.datama-button:hover:not(:disabled) {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transform: translateY(-1px);
}
.datama-button:hover > *,
.datama-button:hover path {
    transition: .1s ease-in;
}
.datama-button > .datama-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 100%;
}

.datama-button:not(.no-text) > .datama-button-icon {
    margin: 0 5px 0 -5px;
}
.datama-button > .datama-button-icon svg {
    display: block;
}

.datama-button.no-text {
    padding: 5px 10px;
}
.datama-button.primary,
.datama-button.primary path {
    color: rgb(var(--datama-primary-rgb));
    fill: rgb(var(--datama-primary-rgb));
}
.apply-advanced-settings,
.apply-advanced-settings .datama-icon,
.apply-advanced-settings .datama-icon path,
.apply-advanced-settings svg,
.apply-advanced-settings svg path {
   fill: var(--color-white) !important;
   color: var(--color-white) !important;
}

.datama-button.transparent {
    background: transparent;
    border: 0;
    color: rgb(var(--color-dark-rgb));
}

.datama-button.transparent:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Ensure transparent buttons in tables have no borders */
.datama-table .datama-button.transparent,
.datama-table .datama-button.transparent:focus,
.datama-table .datama-button.transparent:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 3px !important;
}

.datama-table .datama-button.transparent:hover {   
    background: rgba(var(--datama-primary-rgb), 0.05) !important;
}

.datama-button.secondary,
.datama-button.secondary path {
    color: rgb(var(--color-secondary-rgb));
    fill: rgb(var(--color-secondary-rgb));
}
.datama-button.primary:not(.no-hover):hover {
    background: rgba(var(--datama-primary-rgb), 0.08);
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}
.datama-button.secondary:not(.no-hover):hover {
    background: rgba(var(--color-secondary-rgb), .35) !important;
}
.datama-button.bg-primary,
.datama-button.bg-primary path {
    background: var(--datama-primary);
    color: var(--color-white);
    fill: var(--color-white);
    border-color: var(--datama-primary);
}
.datama-button.bg-primary:not(.no-hover):hover {
    background: rgba(var(--datama-primary-rgb), 0.9);
    border-color: rgba(var(--datama-primary-rgb), 0.9);
    box-shadow: 0 2px 4px 0 rgba(var(--datama-primary-rgb), 0.25);
}
.datama-button.outline-primary {
    background: transparent;
    border: 1px solid var(--datama-primary);
    color: var(--datama-primary);
}
.datama-button.outline-primary:not(.no-hover):hover {
    background: rgba(var(--datama-primary-rgb), 0.05);
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}

/* Highlight for buttons */
.datama-button.highlight {
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 1);
    background-color: rgba(var(--datama-primary-rgb), 1) !important;
    border-radius: 2px;

    .datama-button-icon path {
        fill: rgb(var(--color-white-rgb)) !important;
    }
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __dialog.css project project-deep-sky
 */

.datama-dialog {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.datama-dialog-open {
    visibility: visible;
    opacity: 1;
    z-index: 999;
    transition: var(--transition-in);
}
.datama-dialog-hidden {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transition: var(--transition-out);
}

.datama-dialog > .datama-dialog-container {
    box-shadow: var(--shadow-large);
    border: var(--border);
    border-radius: var(--border-radius);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 85%;
    min-width: 80%;
    max-width: 90%;
    min-height: 60%;
    max-height: 90%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-light);
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    container-type: inline-size;
}

.datama-dialog.no-border > .datama-dialog-container {
    border: unset !important;
}

.datama-dialog > .datama-dialog-container > header *,
.datama-dialog > .datama-dialog-container > footer * {
    font-size: 16px !important;
}

.datama-dialog > .datama-dialog-container .datama-light-version {
    display: block;
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 2;
    color: var(--color-bg-light);
    font-size: 12px;
    word-wrap: break-word;
    width: min-content;
}

.datama-dialog > .datama-dialog-container > header .datama-divider.vertical,
.datama-dialog > .datama-dialog-container > footer .datama-divider.vertical {
    height: 15px !important;
    margin-top: 7.5px !important;
}
.datama-dialog > .datama-dialog-container > header,
.datama-dialog > .datama-dialog-container > footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
}

.datama-dialog > .datama-dialog-container > header {
    padding: 0 30px 0 10px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    flex-shrink: 0;
}
.datama-dialog > .datama-dialog-container > footer {
    padding-bottom: 10px;
}
.datama-dialog > .datama-dialog-container > footer:empty {
    display: none;
}
.datama-dialog > .datama-dialog-container > header {
    border-bottom: 1px solid rgba(var(--color-dark-rgb), .05);
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon * {
    font-size: 14px !important;
    line-height: 14px;
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon {
    line-height: 30px;
    margin: 0 10px 0 -5px;
    width: 20px;
    display: flex;
    justify-content: center;
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon + button,
.datama-dialog > .datama-dialog-container > header > h2 + button {
    margin-left: auto !important;
}
.datama-dialog > .datama-dialog-container > header > h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    margin: 0;
    letter-spacing: .5px;
    flex: 1;
}
.datama-dialog > .datama-dialog-container > header > button {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 16px !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 8px;
}

.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon + button,
.datama-dialog > .datama-dialog-container > header > h2 + button {
    margin-left: auto !important;
}

/* Fix icon centering and cropping in dialog header buttons */
.datama-dialog > .datama-dialog-container > header > button svg,
.datama-dialog > .datama-dialog-container > header > button .datama-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.datama-dialog > .datama-dialog-container > header button:hover {
    background: var(--hover);
}

.datama-dialog > .datama-dialog-container > main {
    /*display: flex;*/
    /*flex-direction: column;*/
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
}
.datama-dialog > .datama-dialog-container > main > h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
}
.datama-dialog > .datama-dialog-container > main label {
    display: inline-block;
    font-weight: 500;
    margin-right: 10px;
}





.datama-dialog > .datama-dialog-container > main > .datama-tabs-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-content {
    padding-right: 10px;
    padding-left: 10px;
    flex: 1;
    overflow-y: auto;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 30px 0 30px;
    box-sizing: border-box;
    z-index: 10;
}
div[data-app="true"] .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header button {
    padding: 2px !important;
    margin: 0 !important;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border:transparent !important; 
}
div[data-app="true"] .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header .datama-divider {
    margin: 5px 8px !important;
    height: 28px !important;
    align-self: center !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header .datama-tab-icon {
    display: none;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab {
    padding: 0;
    display: flex;
    justify-content: center;
    background: #fbfcfd;
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
    max-width: 800px;
    width: 100%;
    padding: 70px 30px 20px 30px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure fieldsets and form elements maintain their white background */
.datama-dialog .datama-fieldset,
.datama-dialog .datama-reactive-table-container,
.datama-dialog .datama-button-group {
    background: var(--color-white);
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer > .datama-tab-content-wrapper {
    padding-bottom: 80px;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs {
    background: var(--datama-primary);
    width: unset;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item {
    display: flex;
    justify-content: center;
    padding: 0 10px !important;
    margin: 5px 0;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge {
    background: transparent;
    border: 1px solid transparent;
    transform: scale(.75) !important;
    right: -10px;
    bottom: -5px;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge path {
    color: red !important;
    fill: red !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button {
    font-size: 20px;
    line-height: 20px;
    border-radius: 0px !important;
    width: 60px;
    text-align: center;
    padding: 10px 0;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item.disabled {
    background: rgba(0,0,0,0.25);
    opacity: 1 !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button path {
    color: rgba(var(--datama-white-rgb), .5) !important;
    fill: rgba(var(--datama-white-rgb), .5) !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active path {
    color: rgba(var(--datama-white-rgb), 1) !important;
    fill: rgba(var(--datama-white-rgb), 1) !important;
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active {
    border-left: 2px solid rgba(var(--datama-white-rgb), 1);
    padding-left: 5px !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
    display: flex !important;
    grid-template-columns: unset !important;
    font-size: 20px;
    line-height: 20px;
    border-radius: 0px !important;
    width: 40px;
    text-align: center;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
    display: none !important;
}



.datama-dialog > .datama-dialog-container .datama-tab-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 1rem !important;
}
.datama-dialog > .datama-dialog-container .datama-tab-header .datama-tab-title {
    /* white-space: nowrap; */
    font-size: 1.05rem;
    margin-left: 0;
    margin-right: auto;
    font-weight: 600;
    margin-bottom: 0;
    flex: 1;
}

.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button {
    margin-left: 8px;
}
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button .datama-button-icon {
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fix SVG sizing in dialog tab header buttons */
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button .datama-button-icon svg,
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}
.datama-dialog > .datama-dialog-container .datama-tab-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 60px;
    padding: 15px 0 !important;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #fbfcfd;
    border-top: var(--border);
}

.datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.datama-dialog > .datama-dialog-container .datama-tab-content *:not(.datama-panels):not(.datama-panels *) {
    font-size: .75rem !important;
}
.datama-dialog > .datama-dialog-container .datama-tab-content > h3 {
    font-size: .9rem !important;
    line-height: 1rem;
    margin-bottom: .25rem;
}
.datama-dialog > .datama-dialog-container .datama-tab-content .datama-section {
    padding: 10px 10px;
}
@media screen and (max-width: 400px) {
    .datama-dialog > .datama-dialog-container .datama-tab {
        padding: 5px 20px !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 80px - 1rem) !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button {
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button > span {
        font-size: .75rem;
        line-height: 18px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button .datama-button-icon {
        height: 15px;
        margin-top: 2px;
    }
    
    /* Remove container constraint on mobile */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        max-width: none;
        padding: 20px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
        max-width: none;
        padding: 0 20px;
    }
    
    /* Remove horizontal padding from specific containers */
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab,
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Add padding to header in mobile and prevent overflow */
    .datama-dialog > .datama-dialog-container .datama-tab-header {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0 !important;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Adjust content padding for mobile */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        padding: 70px 20px 20px 20px;
    }
}
@media screen and (min-width: 401px) and (max-width: 900px) {
    .datama-dialog > .datama-dialog-container .datama-tab {
        padding: 5px 20px !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 90px - 1rem) !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button {
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button > span {
        font-size: .75rem;
        line-height: 18px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button .datama-button-icon {
        height: 15px;
        margin-top: 2px;
    }
    
    /* Remove container constraint on tablet */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        max-width: none;
        padding: 20px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
        max-width: none;
        padding: 0 20px;
    }
    
    /* Remove horizontal padding from specific containers */
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab,
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Add padding to header in tablet and prevent overflow */
    .datama-dialog > .datama-dialog-container .datama-tab-header {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0 !important;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Adjust content padding for tablet */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        padding: 70px 20px 20px 20px;
    }
}
@media screen and (min-width: 800px) {
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 80px - 1rem) !important;
    }
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __fieldset.css project project-deep-sky
 */

.datama-fieldset {
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: 12px;
    padding: 0;
    margin: 0 0 2rem 0;
    background: var(--color-white);
    box-shadow: 0 2px 8px 0 rgba(var(--color-dark-rgb), 0.08);
    overflow: visible;
    position: relative;
    container-type: inline-size;
}

.datama-fieldset-wrapper {
    margin-bottom: 2rem;
}

.datama-fieldset-title-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.datama-fieldset-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.datama-fieldset-legend-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.datama-fieldset-legend {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(var(--color-dark-rgb), 0.7);
    margin: 0;
    line-height: 1.5;
    max-width: 600px;
}

.datama-fieldset-container {
    padding: 0.5rem 2rem;
    gap: 0.25rem;
    display: flex;
    flex-direction: column;
}

.datama-fieldset-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
}

.datama-fieldset-row:last-child {
    border-bottom: none;
}

.datama-fieldset-left {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    justify-content: center;
}

.datama-fieldset-label-container {
    display: flex;
    align-items: center;
}

/* Label container with tooltip styling */
.datama-fieldset-label-container[title] {
    position: relative;
}

.datama-fieldset-label-container[title]:hover {
    color: var(--datama-primary);
}

.datama-fieldset-label-container[title]:hover::after {
    opacity: 1;
    background: var(--datama-primary);
}

.datama-fieldset-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.4;
    margin: 0;
    cursor: help;
}

.datama-fieldset-description {
    font-size: 0.8125rem;
    color: rgba(var(--color-dark-rgb), 0.7);
    line-height: 1.4;
    max-width: 400px;
    margin-top: 0;
}

.datama-fieldset-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Help icon styling for fieldset */
.datama-fieldset-help-icon {
    display: inline-flex;
    align-items: center;
    color: rgba(var(--color-dark-rgb), 0.5);
    text-decoration: none;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: help;
}

.datama-fieldset-help-icon:hover {
    color: var(--datama-primary);
}

.datama-fieldset-help-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Documentation button styling for fieldset */
.datama-fieldset-title-container .datama-documentation,
.datama-fieldset-legend-container .datama-documentation {
    flex-shrink: 0;
    margin-left: auto;
}

.datama-fieldset-title-container .datama-documentation button,
.datama-fieldset-legend-container .datama-documentation button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-dark-rgb), 0.3);
    background: var(--color-white);
    color: rgba(var(--color-dark-rgb), 0.6);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: help;
}

.datama-fieldset-title-container .datama-documentation button:hover,
.datama-fieldset-legend-container .datama-documentation button:hover {
    border-color: var(--datama-primary);
    color: var(--datama-primary);
    background: rgba(var(--datama-primary-rgb), 0.05);
}

/* Responsive behavior - stack on small screens */
@media (max-width: 700px) {
    .datama-fieldset-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .datama-fieldset-right {
        justify-content: flex-start;
        min-width: unset;
    }
    
    .datama-fieldset-left {
        min-height: auto;
    }
    
    .datama-fieldset-description {
        max-width: unset;
    }
    
    .datama-fieldset-container {
        padding: 1rem;
        gap: 1rem;
    }
}

@container (max-width: 400px) {
    .datama-fieldset-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .datama-fieldset-right {
        justify-content: flex-start;
    }
    
    .datama-fieldset-right .datama-input,
    .datama-fieldset-right .datama-input-select {
        max-width: 300px;
    }
}

/* Special styling for inputs inside fieldset */
.datama-fieldset .datama-input-container {
    margin-bottom: 0;
    width: fit-content;
}

/* Override input container gap to be more compact in fieldset */
.datama-fieldset .datama-input-container {
    gap: 0.75rem;
}

/* Ensure labels inside fieldset inputs are not displayed (we use our own) */
.datama-fieldset .datama-input-label {
    display: none;
}

/* Fix number input units positioning in fieldsets */
.datama-fieldset .datama-input-with-unit {
    display: flex;
    align-items: center;
    position: relative;
}

.datama-fieldset .datama-input-with-unit input {
    flex: 1;
    margin-right: 0;
}

.datama-fieldset .datama-input-unit {
    position: absolute;
    right: 1.5rem; /* Fine-tuned adjustment for perfect separation */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(var(--color-dark-rgb), 0.6);
    pointer-events: none;
    z-index: 1; /* Behind spinners to avoid interference */
    background: transparent; /* Remove white background */
    padding: 0;
}

/* Style inputs inside fieldset to match select style */
.datama-fieldset input,
.datama-fieldset select {
    background: var(--color-white);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    color: var(--color-dark);
    border-radius: 6px;
    padding: 0.25rem 1rem;
    font-size: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
}

.datama-fieldset input:focus,
.datama-fieldset select:focus {
    outline: none;
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.1);
}

.datama-fieldset input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.5);
}

/* Ensure dropdowns in fieldsets appear above other fieldsets */
.datama-fieldset .datama-input-select-open > .datama-input-select-dropdown {
    z-index: 1500 !important; /* Same high z-index as regular dropdowns */
    position: absolute;
}

/* Ensure select containers have proper positioning context */
.datama-fieldset .datama-select-container,
.datama-fieldset .datama-input-container {
    position: relative;
    width: auto;
}

/* Fieldsets containing open selects should have higher z-index */
.datama-fieldset:has(.datama-input-select-open) {
    z-index: 100;
    position: relative;
}

/* Inputs in fieldset should maintain their normal styles - no additional overrides needed */

/* Market Equation container with fieldset-like styling */
.datama-market-equation-container {
    overflow-x: visible;
    overflow-y: visible;
    position: relative;
    z-index: 10;
    min-width: 0;
}

/* Full width market equation that extends beyond container */
.datama-dialog .datama-market-equation-fullwidth {
    box-sizing: border-box;
    padding: 0;
    margin: 0 -30px;
    max-width: calc(100% + 40px);
    overflow-x: auto;
}

/* Remove borders from the Market Equation table inside the container */
.datama-market-equation-container #container-center-market-equation-table,
.datama-market-equation-container [id*="market-equation-table"] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Ensure table container respects parent overflow */
.datama-market-equation-container .datama-reactive-table-container {
    overflow-x: visible;
    overflow-y: visible;
    min-width: 100%;
    width: max-content;
}

/* Ensure the table itself can expand beyond container */
.datama-market-equation-container .datama-reactive-table {
    min-width: 100%;
    width: max-content;
}

/* Inline FieldSet Layout - flat style without cards */
.datama-fieldset-inline {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin-top: 1rem;
}

.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container {
    position: relative;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.5px;
    background: rgba(var(--color-dark-rgb), 0.08);
    z-index: 0;
}

.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend {
    background: var(--color-white);
    padding: 0 0.75rem;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark);
    display: inline-block;
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Documentation button positioning for inline fieldset */
.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-documentation.datama-button.no-text {
    position: relative;
    z-index: 2;
    background: var(--color-white);
    margin-left: -10px;
    border: 0;
    box-shadow: none;
    height: 20px;
    margin-top: 2px;
    padding: 0 10px 0 0;
}

.datama-fieldset-inline .datama-fieldset-container {
    padding: 0.5rem 2rem;
}

.datama-fieldset-inline .datama-fieldset-row {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0.75rem;
    box-shadow: none;
    container-type: inline-size;
}

.datama-fieldset-inline .datama-fieldset-row:not(:last-child) {
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
    /* padding-bottom: 0.75rem; */
    /* margin-bottom: 0.75rem; */
    margin-top: -1rem;
}

.datama-fieldset-inline .datama-fieldset-row:last-child {
    margin-bottom: 0;
    margin-top: -16px;
}


/* Dark mode for inline fieldset */
@media (prefers-color-scheme: dark) {}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2024 DATAMA SAS, All rights reserved.
 * Generated for file : __image.css project project-deep-sky
 */

.datama-image {
    transition: var(--transition-in);
    box-sizing: border-box;
    justify-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}
.datama-image.small {
    margin: 0 auto;
    width: 30%;
    max-width: 30%;
}
.datama-image.medium {
    margin: 0 auto;
    width: 60%;
    max-width: 60%;
}
.datama-image.large {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __input.css project project-deep-sky
 */

.datama-input-container {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}

/* Responsive input containers - wrap on small screens */
@media (max-width: 900px) {
    .datama-input-container {
        gap: 0.5rem;
    }
    
    .datama-input-container .datama-input-label {
        width: 100%;
        margin-bottom: 0.25rem;
        margin-right: 0;
    }
    
    .datama-input-container .datama-input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    
    /* Special handling for number inputs with units */
    .datama-input-container.datama-input-with-unit .datama-input[type="number"] {
        width: calc(100% - 3rem);
        max-width: calc(100% - 3rem);
    }
    
    /* Select inputs responsive */
    .datama-input-container .datama-input-select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

@container (max-width: 200px) {
    .datama-input-container {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .datama-input-container .datama-input-label {
        width: 100%;
        margin-bottom: 0.25rem;
        margin-right: 0;
    }
    
    .datama-input-container .datama-input,
    .datama-input-container .datama-input-select {
        width: 100%;
        min-width: 150px;
    }
}

.datama-input-container:not(.datama-input-container-light) {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 1.5rem;
}

/* Add margin to inputs with scale effects to prevent cropping */
.datama-input[type="color"] {
    margin: 0.5rem;
}

.datama-input.datama-input-switch {
    margin: 0.5rem;
}

/* Labels améliorés */
.datama-input-label {
    font-weight: 500;
    color: rgba(var(--color-dark-rgb), 0.9);
    font-size: 0.75rem;
    min-width: 80px;
    white-space: nowrap;
    user-select: none;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Focus effect on labels */
.datama-input-container:focus-within .datama-input-label {
    color: var(--datama-primary);
}

/* Subtle container hover effect */
.datama-input-container:hover .datama-input-label {
    color: rgba(var(--color-dark-rgb), 1);
}

/* Help icon styling */
.datama-input-help-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    color: rgba(var(--color-dark-rgb), 0.5);
    text-decoration: none;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: help;
}

.datama-input-help-icon:hover {
    color: var(--datama-primary);
}

.datama-input-help-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Documentation button - original style by default */
.datama-documentation {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    color: rgba(var(--color-dark-rgb), 0.5);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: help;
}

.datama-documentation:hover {
    color: var(--datama-primary);
    background: rgba(var(--datama-primary-rgb), 0.1);
    transform: scale(1.05);
}

.datama-documentation svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* When documentation is inside label - pure link style */
.datama-input-label .datama-documentation {
    margin-left: auto;
    margin-right: 2px; /* Add right margin to prevent crop */
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    padding: 2px !important; /* Small padding to prevent crop */
    border-radius: 0 !important;
    opacity: 0.6;
    color: rgba(var(--color-dark-rgb), 0.5);
    transform: none !important;
    box-shadow: none !important; /* Remove any shadow */
    outline: none !important; /* Remove outline */
}

.datama-input-label .datama-documentation:hover {
    opacity: 1;
    background: none !important;
    color: var(--datama-primary);
    transform: none !important;
    box-shadow: none !important; /* Ensure no shadow on hover */
    outline: none !important; /* Ensure no outline on hover */
}

.datama-input-label .datama-documentation:focus {
    box-shadow: none !important;
    outline: none !important;
}

.datama-input-label .datama-documentation svg {
    width: 16px;
    height: 16px;
}
.datama-input {
    position: relative;
    width: fit-content;
    display: inline-block;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--color-white-rgb), 1);
    color: var(--color-dark);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 6px;
    outline: none;
    min-width: 200px;
    max-width: 350px;
    min-height: 33px; /* Slightly taller like Linear */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    font-size: 0.75rem;
    font-family: var(--font-family);
    line-height: 1rem;
    font-weight: 400;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

/* États des inputs améliorés - style Linear */
.datama-input:focus {
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.08), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    background: rgba(var(--color-white-rgb), 1);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input:hover:not(:focus):not(:disabled) {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    background: rgba(var(--color-white-rgb), 1);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.4);
    font-style: normal;
    font-weight: 400;
}
/* Cursor styles for different input types */
.datama-input[type="text"],
.datama-input[type="number"],
.datama-input[type="email"],
.datama-input[type="tel"],
.datama-input[type="password"],
.datama-input[type="url"] {
    cursor: text !important;
}

/* Date inputs should have pointer cursor */
.datama-input[type="date"],
.datama-input[type="datetime-local"] {
    cursor: pointer !important;
}

.datama-input[type="color"] {
    min-width: unset;
    width: 40px;
    height: 30px;
    min-height: unset !important;
    min-width: unset !important;
    max-width: unset;
    padding: 1px 8px;
    cursor: pointer !important;
    transition: all var(--transition-out);
    border-radius: var(--border-radius);
    transform-origin: center;
}

.datama-input[type="color"]:hover {
    transform: scale(1.1);
    transition: all var(--transition-in);
}

.datama-input[type="range"] {
    cursor: pointer !important;
}

/* Number input avec spinners natifs - pas de règles spéciales nécessaires */

/* Number input with unit support */
.datama-input-container.datama-input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
}

.datama-input-container.datama-input-with-unit .datama-input[type="number"] {
    padding-right: 3rem; /* Even more space for proper separation */
    width: 200px; /* Force consistent width for inputs with units */
    min-width: 200px;
    max-width: 200px;
}

.datama-input-unit {
    position: absolute;
    right: 2rem; /* Fine-tuned adjustment for perfect separation */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(var(--color-dark-rgb), 0.6);
    pointer-events: none;
    z-index: 1; /* Behind spinners to avoid interference */
    background: transparent; /* Remove white background */
    padding: 0;
    font-weight: 500;
}

/* Style pour les spinners WebKit (Chrome/Safari) - visibles uniquement au hover */
.datama-input[type="number"]::-webkit-outer-spin-button,
.datama-input[type="number"]::-webkit-inner-spin-button {
    opacity: 0;
    height: 20px;
    width: 16px;
    cursor: pointer;
    background: rgba(var(--color-dark-rgb), 0.1);
    border-radius: 3px;
    margin: 1px;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input[type="number"]:hover::-webkit-outer-spin-button,
.datama-input[type="number"]:hover::-webkit-inner-spin-button {
    opacity: 1;
}

.datama-input[type="number"]:hover::-webkit-inner-spin-button:hover,
.datama-input[type="number"]:hover::-webkit-outer-spin-button:hover {
    background: rgba(var(--datama-primary-rgb), 0.15);
}

/* Select inputs should have pointer cursor */
.datama-input-select {
    cursor: pointer !important;
}

/* Only clickable elements in select dropdown should have pointer cursor */
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option,
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-actions .datama-input-select-action-btn,
.datama-input-select > .datama-input-select-dropdown .datama-input-select-search-clear {
    cursor: pointer !important;
}

/* Search input should have text cursor */
.datama-input-select > .datama-input-select-dropdown .datama-input-select-search input {
    cursor: text !important;
}

/* Non-clickable elements in select dropdown should have default cursor */
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-label,
.datama-input-select > .datama-input-select-dropdown .datama-input-select-message {
    cursor: default !important;
}

/* Special inputs should have pointer cursor */
.datama-input-radio,
.datama-input-checkbox,
.datama-input-radio-weighted,
.datama-input-checkbox-weighted,
.datama-input-radio *,
.datama-input-checkbox *,
.datama-input-radio-weighted *,
.datama-input-checkbox-weighted * {
    cursor: pointer !important;
}
/* Switch moderne - style Linear */
.datama-input.datama-input-switch {
    cursor: pointer;
    height: 20px !important;
    width: 44px !important;
    min-height: 20px !important;
    min-width: 44px !important;
    max-width: 35px !important;
    position: relative;
    background: rgba(var(--color-dark-rgb), 0.15);
    border: 1px solid rgba(var(--color-dark-rgb), 0.1);
    padding: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    border-radius: 12px;
    box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

.datama-input.datama-input-switch::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    transform: translateY(-50%);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.1), 
                0 1px 2px 0 rgba(var(--color-dark-rgb), 0.06);
}

.datama-input.datama-input-switch[data-value="true"] {
    background: var(--datama-primary);
    border-color: var(--datama-primary);
    box-shadow: inset 0 1px 2px 0 rgba(var(--datama-primary-rgb), 0.1);
}

.datama-input.datama-input-switch[data-value="true"]::before {
    left: calc(100% - 17px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-white);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.15), 
                0 1px 2px 0 rgba(var(--color-dark-rgb), 0.1);
}

.datama-input.datama-input-switch:hover:not(.datama-input-disabled) {
    transform: scale(1.02);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05),
                0 4px 8px 0 rgba(var(--color-dark-rgb), 0.08);
}

.datama-input.datama-input-switch:hover:not(.datama-input-disabled):not([data-value="true"]) {
    background: rgba(var(--color-dark-rgb), 0.3);
}

.datama-input.datama-input-switch:hover:not(.datama-input-disabled)[data-value="true"] {
    background: rgba(var(--datama-primary-rgb), 0.8);
}

/* Styles pour les range inputs */
.datama-input[type="range"] {
    padding: 0.75rem 0;
    background: transparent;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
}

/* Container for range with track fill effect */
.datama-input-container.range-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.datama-input-container.range-container .range-slider {
    flex: 1;
    position: relative;
}

.datama-input-container.range-container .range-value-input {
    width: 80px;
    min-width: 80px;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 6px;
    font-size: 0.75rem;
    text-align: center;
    background: var(--color-white);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: text !important;
    font-weight: 400;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
    min-height: 33px;
    line-height: 1.25rem;
}

.datama-input-container.range-container .range-value-input:focus {
    outline: none;
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.08), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-container.range-container .range-value-input:hover {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-container.range-container .range-slider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 8px;
    background: linear-gradient(to right, var(--datama-primary) 0%, var(--datama-primary) var(--range-fill, 50%), rgba(var(--color-dark-rgb), 0.1) var(--range-fill, 50%), rgba(var(--color-dark-rgb), 0.1) 100%);
    border-radius: 4px;
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 1;
}

.datama-input[type="range"]::-webkit-slider-track {
    width: 100%;
    height: 8px;
    background: transparent;
    border-radius: 4px;
    border: none;
}

.datama-input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--datama-primary);
    cursor: pointer;
    border: 3px solid var(--color-white);
    box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
    margin-top: -4px;
    position: relative;
    z-index: 2;
    transition: all var(--transition-out);
}

.datama-input[type="range"]::-webkit-slider-thumb:hover {
    background: rgba(var(--datama-primary-rgb), 0.9);
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.4);
    transition: all var(--transition-in);
}

.datama-input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: rgba(var(--color-dark-rgb), 0.1);
    border-radius: 4px;
    border: none;
}

.datama-input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: var(--datama-primary);
    cursor: pointer;
    border: 3px solid var(--color-white);
    box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
    transition: all var(--transition-out);
}

.datama-input[type="range"]::-moz-range-thumb:hover {
    background: rgba(var(--datama-primary-rgb), 0.9);
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.4);
    transition: all var(--transition-in);
}

.datama-input[type="range"]:focus {
    outline: none;
}

.datama-input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.25), 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
}

.datama-input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.25), 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
}
.datama-input[type="date"]::-webkit-calendar-picker-indicator,
.datama-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin-left: -30px;
    margin-right: 10px;
    cursor: pointer;
}
.datama-input:hover {
    background: rgba(var(--color-dark-rgb), .05);
    transition: var(--transition-in);
}
.datama-input-select {
    cursor: pointer;
    padding: 0.5rem 2.5rem 0.5rem 0.875rem;
    display: flex;
    align-items: center;
    min-height: 33px;
    max-width: 400px;
    background: rgba(var(--color-white-rgb), 1);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 6px;
    font-weight: 400;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-select:hover:not(.disabled) {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-select:focus-within,
.datama-input-select.datama-input-select-open {
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.08), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-select.datama-input-select-light {
    border: none !important;
    background: transparent;
    font-size: initial;
    min-width: unset;
    padding: 0 1.5rem 0 0;
    min-height: auto;
    box-shadow: none !important;
}
.datama-input-select.datama-input-select-light > .datama-input-select-value {
    align-items: center;
    height: 100%;
    display: flex;
    font-weight: 600;
}
.datama-input-select.datama-input-select-light.primary > .datama-input-select-value {
    color: var(--datama-primary);
}
.datama-input-select.datama-input-select-light.primary::after {
    border-top-color: var(--datama-primary);
}
.datama-input-select.datama-input-select-light:hover {
    background: rgba(var(--datama-primary-rgb), 0.05);
    border-radius: 4px;
}

/* Icône de dropdown améliorée - style Linear */
.datama-input-select::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    height: 0;
    width: 0;
    text-align: center;
    pointer-events: none !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: 4px solid transparent;
    border-top: 5px solid rgba(var(--color-dark-rgb), 0.4);
    transform: translateY(-50%);
}

.datama-input-select.datama-input-select-open::after {
    transform: translateY(-50%) rotate(180deg);
    border-top-color: var(--datama-primary);
}
.datama-input-select > .datama-input-select-dropdown {
    display: inline-block;
    position: absolute;
    width: max-content;
    min-width: 100%;
    top: calc(100% + 6px);
    left: 0;
    visibility: hidden;
    z-index: -1;
    opacity: 0;
    height: 0;
    overflow-y: auto;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
    font-size: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(var(--color-dark-rgb), 0.05), 
                0 10px 15px -3px rgba(var(--color-dark-rgb), 0.08),
                0 0 0 1px rgba(var(--color-dark-rgb), 0.06);
}

/* Smart positioning: prefer bottom, fallback to top when near viewport edge */
.datama-input-select > .datama-input-select-dropdown {
    /* Default: open downward and to the left */
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
}

/* When dropdown would go off-screen at bottom, open upward */
.datama-input-select > .datama-input-select-dropdown.dropdown-upward {
    top: auto;
    bottom: calc(100% + 6px);
    margin-bottom: 6px;
    margin-top: 0;
}

/* When dropdown would go off-screen on the right, align to the right */
.datama-input-select > .datama-input-select-dropdown.dropdown-right-aligned {
    left: auto;
    right: 0;
}

/* When dropdown would go off-screen on both sides, center it */
.datama-input-select > .datama-input-select-dropdown.dropdown-centered {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Ensure upward positioning works when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-upward {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
}

/* Ensure right-aligned positioning works when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-right-aligned {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* Ensure centered positioning works when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-centered {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Dropdown positioning classes */
.datama-input-select > .datama-input-select-dropdown.dropdown-right {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    position: absolute !important;
}

.datama-input-select > .datama-input-select-dropdown.dropdown-left {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    position: absolute !important;
}

.datama-input-select > .datama-input-select-dropdown.dropdown-left-side {
    left: auto !important;
    right: 100% !important;
    top: 0 !important;
    transform: none !important;
    position: absolute !important;
    margin-right: 4px !important;
}

.datama-input-select > .datama-input-select-dropdown.dropdown-right-side {
    left: 100% !important;
    right: auto !important;
    top: 0 !important;
    transform: none !important;
    position: absolute !important;
    margin-left: 4px !important;
}

.datama-input-select-open > .datama-input-select-dropdown {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    height: unset;
    max-height: 280px;
    min-height: 60px;
    visibility: visible;
    opacity: 1;
    z-index: 1500; /* Increased to appear above all panels and other elements */
    background: var(--color-white);
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
}

/* Ensure positioning classes work when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-right {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    position: absolute !important;
}

.datama-input-select-open > .datama-input-select-dropdown.dropdown-left {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    position: absolute !important;
}

.datama-input-select-open > .datama-input-select-dropdown.dropdown-left-side {
    left: auto !important;
    right: 100% !important;
    top: 0 !important;
    transform: none !important;
    position: absolute !important;
    margin-right: 4px !important;
}

.datama-input-select-open > .datama-input-select-dropdown.dropdown-right-side {
    left: 100% !important;
    right: auto !important;
    top: 0 !important;
    transform: none !important;
    position: absolute !important;
    margin-left: 4px !important;
}

.datama-input-select > .datama-input-select-value {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    pointer-events: none;
}
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-label {
    font-style: italic;
    font-size: .9rem;
    padding: 3px 10px;
    order: 3; /* Ensure group label appears after search and messages */
}
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option {
    cursor: pointer !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.5rem 2.5rem 0.5rem 0.875rem;
    position: relative;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.03);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 40px;
    display: flex;
    align-items: center;
    order: 3; /* Ensure options appear after search and messages */
    font-weight: 400;
    border-radius: 4px;
    margin: 2px 4px;
}

.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option:hover {
    background: rgba(var(--datama-primary-rgb), 0.06);
    color: var(--datama-primary);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border-color: transparent;
}

/* Full custom color hover (text + background) - default behavior */
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option.custom-color-hover-text:hover {
    background: color-mix(in srgb, var(--custom-color) 5%, transparent);
    color: var(--custom-color);
}

/* Bar-only custom color hover (no text/background change) */
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option.custom-color-no-hover-text:hover {
    background: rgba(var(--datama-primary-rgb), 0.05);
    color: var(--datama-primary);
}

/* Override for bar-only mode - higher specificity */
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option.custom-color-no-hover-text:hover:has(.figure.custom-color) {
    background: rgba(var(--datama-primary-rgb), 0.05) !important;
    color: var(--datama-primary) !important;
}

.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option.has-custom-color.custom-color-no-hover-text:hover {
    background: rgba(var(--datama-primary-rgb), 0.05) !important;
    color: var(--datama-primary) !important;
}

/* Fallback for older browser support - full color hover only */
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option.custom-color-hover-text:hover:has(.figure.custom-color) {
    background: color-mix(in srgb, var(--custom-color) 5%, transparent);
    color: var(--custom-color);
}

.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option.has-custom-color.custom-color-hover-text:hover {
    background: color-mix(in srgb, var(--custom-color) 5%, transparent);
    color: var(--custom-color);
}

.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option:last-child {
    border-bottom: none;
    margin-bottom: 4px;
}

.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option[data-selected="selected"] {
    background: rgba(var(--datama-primary-rgb), 0.1);
    color: var(--datama-primary);
    font-weight: 500;
}

.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option[data-selected="selected"]::after {
    content: '';
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: 4px;
    height: 8px;
    border: solid var(--datama-primary);
    border-width: 0 2px 2px 0;
    transform: translateY(-50%) rotate(45deg);
    animation: checkmark-appear-select 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkmark-appear-select {
    0% {
        transform: translateY(-50%) rotate(45deg) scale(0);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) rotate(45deg) scale(1);
        opacity: 1;
    }
}
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option[data-warning]::after {
    content: '⚠';
    font-size: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    right: unset;
}
/* États disabled et read-only améliorés */
.datama-input.datama-input-disabled:not([type="color"]):not(.datama-input-switch):not(.datama-input-select),
.datama-input-select.disabled,
.datama-input:disabled:not([type="color"]):not(.datama-input-switch):not(.datama-input-select) {
    cursor: not-allowed !important;
    opacity: 0.6;
    background: rgba(var(--color-dark-rgb), 0.05);
    border-color: rgba(var(--color-dark-rgb), 0.1);
    color: rgba(var(--color-dark-rgb), 0.6);
}

/* Read-only styles - exclude special inputs */
.datama-input.datama-input-read-only:not([type="color"]):not(.datama-input-switch):not(.datama-input-select),
.datama-input:read-only:not([type="color"]):not(.datama-input-switch):not(.datama-input-select) {
    cursor: default !important;
    background: rgba(var(--color-dark-rgb), 0.02);
    border-color: rgba(var(--color-dark-rgb), 0.15);
}

.datama-input.datama-input-disabled:hover,
.datama-input-select.disabled:hover,
.datama-input:disabled:hover,
.datama-input.datama-input-read-only:hover:not([type="color"]):not(.datama-input-switch):not(.datama-input-select),
.datama-input:read-only:hover:not([type="color"]):not(.datama-input-switch):not(.datama-input-select) {
    border-color: rgba(var(--color-dark-rgb), 0.1);
    box-shadow: none;
}

/* Special disabled styles for color picker and switch */
.datama-input[type="color"].datama-input-disabled,
.datama-input[type="color"]:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

.datama-input.datama-input-switch.datama-input-disabled,
.datama-input.datama-input-switch:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* Special disabled styles for select inputs */
.datama-input-select.datama-input-disabled,
.datama-input-select:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

.datama-input.datama-input-select-weighted > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option {
    padding: 0 10px 0 22px;
}
.datama-input.datama-input-select-weighted > .datama-input-select-dropdown > .datama-input-select-group > .datama-input-select-group-option[data-selected="selected"]::after {
    left: 8px;
    right: unset;
    transform: translateY(-50%) rotate(45deg);
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option {
    display: flex;
    flex-wrap: nowrap;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .text-container {
    flex: 1;
    min-width: 0;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .text-container > .detail {
    font-size: .7rem;
    line-height: .5rem;
    padding-bottom: 2px;
    transition: .1s ease-out;
    opacity: 0;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure {
    min-width: 100px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    padding-left: 10px;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure > .bar {
    margin: .4rem 0;
    height: .4rem;
    border-radius: .2rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(var(--datama-primary-rgb), 0.8);
    min-width: .3rem;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option.steps > .figure > .bar {
    background-color: rgba(var(--datama-yellow-rgb), .8);
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure.variant > .bar {
    background-color: rgba(var(--color-secondary-rgb), .8);
}

.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure.warning > .bar {
    background-color: rgba(var(--datama-yellow-rgb), .8);
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure.custom-color > .bar {
    background-color: var(--custom-color);
    opacity: 0.8;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option:hover > .figure > .bar {
    margin: .3rem 0;
    height: .6rem;
    border-radius: .3rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(var(--datama-primary-rgb), 1);
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option:hover > .figure.variant > .bar {
    background-color: rgba(var(--color-secondary-rgb), 1);
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option:hover > .figure.warning > .bar {
    background-color: rgba(var(--datama-yellow-rgb), 1);
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option.steps:hover > .figure > .bar {
    background-color: rgba(var(--datama-yellow-rgb), 1);
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option:hover > .figure.custom-color > .bar {
    background-color: var(--custom-color);
    opacity: 1;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem; /* Add space between label text and value */
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container > .label,
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container > .value {
    font-size: .7rem;
    line-height: .5rem;
    display: inline-block;
    opacity: 0;
    transition: .1s ease-out;
}
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option > .figure > .text-container > .value {
    width: 100%;
    text-align: right;
    font-weight: 600;
}
.datama-input.datama-input-select-weighted:hover  .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .label,
.datama-input.datama-input-select-weighted:hover  .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .value,
.datama-input.datama-input-select-weighted:hover  .datama-input-select-group-option[data-selected="selected"] > .text-container > .detail {
    transition: .1s ease-out;
    opacity: 0;
}
.datama-input.datama-input-select-weighted .datama-input-select-group:not(:hover) > .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .label,
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option:hover > .figure > .text-container > .label,
.datama-input.datama-input-select-weighted .datama-input-select-group:hover > .datama-input-select-group-option:hover[data-selected="selected"] > .figure > .text-container > .label,
.datama-input.datama-input-select-weighted .datama-input-select-group:not(:hover) > .datama-input-select-group-option[data-selected="selected"] > .figure > .text-container > .value,
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option:hover > .figure > .text-container > .value,
.datama-input.datama-input-select-weighted .datama-input-select-group:hover > .datama-input-select-group-option:hover[data-selected="selected"] > .figure > .text-container > .value,
.datama-input.datama-input-select-weighted .datama-input-select-group:not(:hover) > .datama-input-select-group-option[data-selected="selected"] > .text-container > .detail,
.datama-input.datama-input-select-weighted .datama-input-select-group > .datama-input-select-group-option:hover > .text-container > .detail,
.datama-input.datama-input-select-weighted .datama-input-select-group:hover > .datama-input-select-group-option:hover[data-selected="selected"] > .text-container > .detail {
    opacity: 1;
    transition: .1s ease-in;
}

/* === RADIO BUTTONS ET CHECKBOXES === */
.datama-input-radio-group,
.datama-input-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.datama-input-radio,
.datama-input-checkbox,
.datama-input-radio-weighted,
.datama-input-checkbox-weighted {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    min-height: 48px;
    background: rgba(var(--color-white-rgb), 1);
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

.datama-input-radio:hover,
.datama-input-checkbox:hover,
.datama-input-radio-weighted:hover,
.datama-input-checkbox-weighted:hover {
    background: rgba(var(--datama-primary-rgb), 0.02);
    border-color: rgba(var(--datama-primary-rgb), 0.12);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-1px);
}

/* Style personnalisé pour les radio buttons et checkboxes - style Linear */
.datama-input-radio input[type="radio"],
.datama-input-checkbox input[type="checkbox"],
.datama-input-radio-weighted input[type="radio"],
.datama-input-checkbox-weighted input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid rgba(var(--color-dark-rgb), 0.2);
    background: var(--color-white);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

/* Radio buttons - circular */
.datama-input-radio input[type="radio"],
.datama-input-radio-weighted input[type="radio"] {
    border-radius: 50%;
}

/* Checkboxes - rounded square */
.datama-input-checkbox input[type="checkbox"],
.datama-input-checkbox-weighted input[type="checkbox"] {
    border-radius: 4px;
}

/* Hover states */
.datama-input-radio input[type="radio"]:hover,
.datama-input-checkbox input[type="checkbox"]:hover,
.datama-input-radio-weighted input[type="radio"]:hover,
.datama-input-checkbox-weighted input[type="checkbox"]:hover {
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.1);
}

/* Checked states */
.datama-input-radio input[type="radio"]:checked,
.datama-input-checkbox input[type="checkbox"]:checked,
.datama-input-radio-weighted input[type="radio"]:checked,
.datama-input-checkbox-weighted input[type="checkbox"]:checked {
    background: var(--datama-primary);
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.3);
}

/* Radio dot */
.datama-input-radio input[type="radio"]:checked::after,
.datama-input-radio-weighted input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-white);
    transform: translate(-50%, -50%);
}

/* Checkbox checkmark - modern SVG-like design */
.datama-input-checkbox input[type="checkbox"]:checked::after,
.datama-input-checkbox-weighted input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 8px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    animation: checkmark-appear-checkbox 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkmark-appear-checkbox {
    0% {
        transform: translate(-50%, -60%) rotate(45deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -60%) rotate(45deg) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -60%) rotate(45deg) scale(1);
        opacity: 1;
    }
}

@keyframes checkmark-appear {
    0% {
        transform: translateY(-50%) rotate(45deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-50%) rotate(45deg) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) rotate(45deg) scale(1);
        opacity: 1;
    }
}


.datama-input-radio label,
.datama-input-checkbox label {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-dark);
    flex: 1;
}

/* Weighted variants avec figure */
.datama-input-radio-weighted,
.datama-input-checkbox-weighted {
    align-items: flex-start;
    flex-wrap: wrap;
}

.datama-input-radio-weighted .text-container,
.datama-input-checkbox-weighted .text-container {
    flex: 1;
    min-width: 0;
}

.datama-input-radio-weighted .text-container .text,
.datama-input-checkbox-weighted .text-container .text {
    font-weight: 500;
    color: var(--color-dark);
    display: block;
    margin-bottom: 0.25rem;
}

.datama-input-radio-weighted .text-container .detail,
.datama-input-checkbox-weighted .text-container .detail {
    font-size: 0.75rem;
    color: rgba(var(--color-dark-rgb), 0.7);
    opacity: 0.8;
}

.datama-input-radio-weighted .figure,
.datama-input-checkbox-weighted .figure {
    min-width: 100px;
    margin-left: auto;
    text-align: right;
}

.datama-input-radio-weighted .figure .datama-label,
.datama-input-checkbox-weighted .figure .datama-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    opacity: 0.8;
    gap: 0.5rem; /* Add space between label text and value */
}

.datama-input-radio-weighted .figure .datama-label .value,
.datama-input-checkbox-weighted .figure .datama-label .value {
    font-weight: 600;
    color: var(--datama-primary);
}

.datama-input-radio-weighted .figure .bar,
.datama-input-checkbox-weighted .figure .bar {
    height: 4px;
    background: rgba(var(--color-dark-rgb), 0.15);
    border-radius: 2px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-radio-weighted:hover .figure .bar,
.datama-input-checkbox-weighted:hover .figure .bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--color-dark-rgb), 0.25);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom color support for radio and checkbox weighted */
.datama-input-radio-weighted .figure.custom-color .bar,
.datama-input-checkbox-weighted .figure.custom-color .bar {
    background: var(--custom-color);
    opacity: 0.8;
}

.datama-input-radio-weighted:hover .figure.custom-color .bar,
.datama-input-checkbox-weighted:hover .figure.custom-color .bar {
    background: var(--custom-color);
    opacity: 1;
}

/* Full custom color hover (text + background) - default behavior */
.datama-input-radio-weighted.custom-color-hover-text:hover,
.datama-input-checkbox-weighted.custom-color-hover-text:hover {
    background: color-mix(in srgb, var(--custom-color) 3%, transparent);
    border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

/* Bar-only custom color hover (no text/background change) */
.datama-input-radio-weighted.custom-color-no-hover-text:hover,
.datama-input-checkbox-weighted.custom-color-no-hover-text:hover {
    background: rgba(var(--datama-primary-rgb), 0.03);
    border-color: rgba(var(--datama-primary-rgb), 0.1);
}

/* Override for bar-only mode - higher specificity */
.datama-input-radio-weighted.custom-color-no-hover-text:hover:has(.figure.custom-color),
.datama-input-checkbox-weighted.custom-color-no-hover-text:hover:has(.figure.custom-color) {
    background: rgba(var(--datama-primary-rgb), 0.03) !important;
    border-color: rgba(var(--datama-primary-rgb), 0.1) !important;
}

.datama-input-radio-weighted.has-custom-color.custom-color-no-hover-text:hover,
.datama-input-checkbox-weighted.has-custom-color.custom-color-no-hover-text:hover {
    background: rgba(var(--datama-primary-rgb), 0.03) !important;
    border-color: rgba(var(--datama-primary-rgb), 0.1) !important;
}

/* Fallback for older browser support - full color hover only */
.datama-input-radio-weighted.custom-color-hover-text:hover:has(.figure.custom-color),
.datama-input-checkbox-weighted.custom-color-hover-text:hover:has(.figure.custom-color) {
    background: color-mix(in srgb, var(--custom-color) 3%, transparent);
    border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

.datama-input-radio-weighted.has-custom-color.custom-color-hover-text:hover,
.datama-input-checkbox-weighted.has-custom-color.custom-color-hover-text:hover {
    background: color-mix(in srgb, var(--custom-color) 3%, transparent);
    border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

/* États disabled pour radio/checkbox */
.datama-input-radio.datama-input-disabled,
.datama-input-checkbox.datama-input-disabled,
.datama-input-radio-weighted.datama-input-disabled,
.datama-input-checkbox-weighted.datama-input-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.datama-input-radio.datama-input-disabled input,
.datama-input-checkbox.datama-input-disabled input,
.datama-input-radio-weighted.datama-input-disabled input,
.datama-input-checkbox-weighted.datama-input-disabled input {
    cursor: not-allowed;
}


/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
    /* Tres style elouan mais il faudrait faire un vrai sujet la dessus car ce n'est pas fonctionnel */
    /*.datama-input {*/
    /*    background: rgba(var(--color-white-rgb), 0.05);*/
    /*    color: var(--color-white);*/
    /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
    /*}*/

    /*.datama-input:focus {*/
    /*    background: rgba(var(--color-white-rgb), 0.1);*/
    /*    box-shadow: 0 0 0 3px rgba(var(--datama-primary-light-rgb), 0.3);*/
    /*}*/

    /*.datama-input-select {*/
    /*    background: rgba(var(--color-white-rgb), 0.05);*/
    /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
    /*}*/

    /*.datama-input-select-open > .datama-input-select-dropdown {*/
    /*    background: var(--color-dark);*/
    /*    border-color: rgba(var(--datama-primary-light-rgb), 0.3);*/
    /*    box-shadow: var(--shadow-large);*/
    /*}*/
}

/* === FONCTIONNALITÉS AVANCÉES DES SELECTS === */

/* Search input in dropdown */
.datama-input-select-search {
    position: sticky;
    top: 0;
    background: var(--color-white);
    border-bottom: 2px solid rgba(var(--color-dark-rgb), 0.1);
    padding: 0.375rem;
    z-index: 1000;
    position: relative;
}

.datama-input-select-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    padding-right: 2rem;
    border: 1px solid rgba(var(--color-dark-rgb), 0.2);
    border-radius: calc(var(--border-radius) / 2);
    outline: none;
    font-size: 0.75rem;
    background: var(--color-white);
    transition: all var(--transition-out);
}

.datama-input-select-search input:focus {
    border-color: var(--datama-primary);
    box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.1);
    transition: all var(--transition-in);
}

.datama-input-select-search input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.5);
    font-style: italic;
}

/* Clear search button */
.datama-input-select-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(var(--color-dark-rgb), 0.5);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer !important;
    padding: 0.25rem;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-out);
}

.datama-input-select-search-clear:hover {
    background: rgba(var(--color-dark-rgb), 0.1);
    color: rgba(var(--color-dark-rgb), 0.8);
    transition: all var(--transition-in);
}

.datama-input-select-search-clear:active {
    transform: translateY(-50%) scale(0.95);
}

/* Select All / Deselect All buttons */
.datama-input-select-actions {
    position: sticky;
    bottom: 0;
    background: var(--color-white);
    border-top: 2px solid rgba(var(--color-dark-rgb), 0.1);
    padding: 0.5rem 0.75rem;
    display: flex;
    gap: 0.5rem;
    z-index: 1001;
    order: 4; /* Ensure actions appear at the bottom */
    margin-top: auto; /* Push to bottom */
}

.datama-input-select-action-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--datama-primary);
    background: transparent;
    color: var(--datama-primary);
    border-radius: calc(var(--border-radius) / 2);
    cursor: pointer !important;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all var(--transition-out);
    text-align: center;
}

.datama-input-select-action-btn:hover {
    background: var(--datama-primary);
    color: var(--color-white);
    transition: all var(--transition-in);
}

.datama-input-select-action-btn:active {
    transform: scale(0.98);
}

/* Messages d'état */
.datama-input-select-message {
    padding: 1rem;
    text-align: center;
    color: rgba(var(--color-dark-rgb), 0.6);
    font-style: italic;
    font-size: 0.75rem;
    order: 2; /* Ensure message appears after search */
    z-index: 1; /* Lower z-index than actions */
}

.datama-input-select-message.no-results {
    color: rgba(var(--color-dark-rgb), 0.8);
}

.datama-input-select-message.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.datama-input-select-message.loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--datama-primary-rgb), 0.3);
    border-top: 2px solid var(--datama-primary);
    border-radius: 50%;
    animation: datama-spin 1s linear infinite;
}

/* Options masquées par la recherche */
.datama-input-select-group-option.hidden {
    display: none !important;
}

/* Ensure proper order for select group */
.datama-input-select > .datama-input-select-dropdown > .datama-input-select-group {
    order: 3; /* Ensure group appears after search and messages */
}

/* Animation de spinner */
@keyframes datama-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Highlight des termes de recherche */
.datama-search-highlight {
    background: rgba(var(--datama-primary-rgb), 0.2);
    color: var(--datama-primary);
    font-weight: 600;
    border-radius: 2px;
    padding: 0 2px;
}

/* Compteur de sélection pour les selects multiples - style Linear */
.datama-input-select-counter {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--datama-primary);
    color: var(--color-white);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    min-height: unset !important;
    line-height: 18px !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    z-index: 150;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px 0 rgba(var(--datama-primary-rgb), 0.3),
                0 0 0 2px var(--color-white);
    /* Force perfect circle with explicit constraints */
    flex-shrink: 0;
    flex-grow: 0;
    aspect-ratio: 1 / 1;
    line-height: 1;
}

.datama-input-select-counter.visible {
    transform: scale(1);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Styles pour les options avec icônes */
.datama-input-select-group-option.with-icon {
    padding-left: 2.5rem;
}

.datama-input-select-group-option.with-icon::before {
    content: attr(data-icon);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
}

/* === STYLES POUR LES INPUTS TITLE SIZE (WATERFALL) === */
/* Masquer par défaut les inputs Title Size */
.datama-input-container[id*="-tab-font-size-of-title-container"],
.datama-input-container[id*="-tab-font-size-of-plot-title-container"] {
    display: none;
}

/* Alignement et espacement des inputs Title Size */
.datama-input-container[id*="-tab-font-size-of-title-container"] .datama-input {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    margin-left: 15px;
}

/* Styles spécifiques pour Plot Title Size */
.datama-input-container[id*="-tab-font-size-of-plot-title-container"] .datama-input {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    margin-left: 15px;
}

/* Responsive behavior for Title Size inputs - same as other inputs */
@media (max-width: 768px) {
    .datama-input-container[id*="-tab-font-size-of-title-container"] .datama-input,
    .datama-input-container[id*="-tab-font-size-of-plot-title-container"] .datama-input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        flex: 1 1 auto;
    }
}

/* Refresh button in select dropdown */
.datama-input-select-refresh-btn {
    position: absolute;
    right: -0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    margin: 0 0.5rem;
    transition: opacity 0.2s, transform 0.2s;
    line-height: 1;
}

.datama-input-select-refresh-btn:hover {
    transform: translateY(-50%) scale(1.1);
    background: rgba(var(--datama-primary-rgb), 0.08);
    height: 100%;
    border-radius: 4px;
}

.datama-input-select:has(.datama-input-select-refresh-btn)::after {
    right: 2rem;
}

/* Refresh button standalone */
.datama-input-refresh-button {
    display: inline-flex;
    align-items: center;
    background: var(--datama-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.datama-input-refresh-button:hover:not(:disabled) {
    background: var(--datama-primary-dark);
    transform: scale(1.02);
}

.datama-input-refresh-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.datama-input-refresh-button .refresh-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __introduction.css project project-deep-sky
 */

main.datama-light-modules .datama-light-introduction,
main.datama-light-modules .datama-light-introduction-no-metrics,
main.datama-light-modules .datama-light-introduction-no-dimensions {
    height: 100%;
    overflow-x: hidden;
}
main.datama-light-modules .datama-light-introduction::after,
main.datama-light-modules .datama-light-introduction-no-metrics::after,
main.datama-light-modules .datama-light-introduction-no-dimensions::after {
    content: "";
    background-color: var(--datama-primary-light);
    display: block;
    height: calc(100% - 40vh);
    position: sticky;
    margin-top: -40vh;
    top: 40vh;
    bottom: 0;
    width: 110%;
    left: -5%;
    right: -5%;
    z-index: -1;
    border-radius: 50% 50% 0 0;
}
.qv-object-content-container:has(.datama-light) {
    z-index: 0;
    background-color: transparent;
}
#qv-page-container main.datama-light-modules .datama-light-introduction::before,
#qv-page-container main.datama-light-modules .datama-light-introduction-no-metrics::before,
#qv-page-container main.datama-light-modules .datama-light-introduction-no-dimensions::before {
    content: "";
    background-color: var(--datama-primary-light);
    display: block;
    height: calc(100% - 40vh);
    position: absolute;
    top: 40vh;
    bottom: 0;
    left: -5%;
    right: -5%;
    z-index: -1;
    border-radius: 50% 50% 0 0;
}
main.datama-light-modules .datama-light-introduction .datama-logo-full,
main.datama-light-modules .datama-light-introduction-no-metrics .datama-logo-full,
main.datama-light-modules .datama-light-introduction-no-dimensions .datama-logo-full {
    width: 20%;
    min-width: 90px;
}
main.datama-light-modules .datama-light-introduction-section {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
}
main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo,.datama-viewer-no-license-demo {
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    padding: 20px;
    width: 100%;
    gap: 20px;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}
main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo .datama-introduction-gif {
    object-fit: contain;
    align-self: center;
    width: 100%;
}
main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo .datama-introduction-indications {
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* RESPONSIVE */
@media screen and (max-width: 767px) {
    main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo {
        flex-direction: column;
        max-width: 90%;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo {
        flex-direction: column;
        max-width: 70%;
        grid-template-rows: 1fr;
        grid-template-columns: 2fr 1fr;
    }
}
@media screen and (min-width: 1200px) {
    main.datama-light-modules .datama-light-introduction-section .datama-introduction-demo {
        flex-direction: row;
        max-width: 50%;
        grid-template-rows: 1fr;
        grid-template-columns: 3fr 1fr;
    }
}

/* RESPONSIVE */
@media screen and (max-width: 767px) {
    main.datama-light-modules .datama-light-introduction-section .datama-viewer-no-license-demo {
        flex-direction: column;
        max-width: 90%;
        grid-template-columns: 1fr;
        font-size: 20px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    main.datama-light-modules .datama-light-introduction-section .datama-viewer-no-license-demo {
        flex-direction: column;
        max-width: 70%;
        grid-template-columns: 1fr;
        font-size: 20px;
    }
}
@media screen and (min-width: 1200px) {
    main.datama-light-modules .datama-light-introduction-section .datama-viewer-no-license-demo {
        flex-direction: row;
        max-width: 50%;
        grid-template-columns: 1fr;
        font-size: 20px;
    }
}
.datama-market-equation-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 10;
}
.datama-market-equation-container > * {
    width: 100%;
    min-width: 0;
}
.datama-market-equation-container > .datama-market-equation-steps-container {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    height: 50px;
    width: max-content;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    overflow: visible;
}

.datama-market-equation-container > .datama-market-equation-steps-container > .datama-market-equation-parenthesis,
.datama-market-equation-container > .datama-market-equation-steps-container > .datama-market-equation-operator {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 0.5rem;
    font-size: 24px;
    font-weight: 500;
    color: var(--datama-primary);
}
.datama-market-equation-operand-container {
    margin: 0 0.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-white);
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
    min-width: 120px;
}
.datama-market-equation-operand-container::before,
.datama-market-equation-operand-container::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 4px;
    border: 1px solid rgba(var(--datama-primary-rgb), 0.2);
    border-radius: 6px;
}
.datama-market-equation-operand-container::before {
    left: 0;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.datama-market-equation-operand-container::after {
    right: 0;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.datama-market-equation-value-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
}
.datama-market-equation-value-container > * {
    display: inline-block;
    box-sizing: border-box;
}
.datama-market-equation-value-container > .datama-market-equation-value {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-dark);
    text-align: center;
}
.datama-market-equation-value-container > .datama-market-equation-operator {
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--datama-primary);
    min-width: 16px;
    text-align: center;
}
.datama-market-equation-value-container > .datama-market-equation-operator + .datama-market-equation-value {
    flex: 1;
    padding: 0.25rem 0.5rem;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __notification.css project project-deep-sky
 */

.datama-light-notifications {
    display: flex;
    flex-direction: column;
    position: absolute;
    max-width: 33.33vw !important;
    bottom: 40px;
    right: 20px;
    transition: var(--transition-long-in);
    z-index: 999;
    direction: rtl;
}
.datama-light-notifications .datama-notification-icon {
    order: 1;
    margin-left: auto;
    margin-bottom: -25px;
}
.datama-light-notifications .datama-notification-text {
    order: 2;
}
#qv-page-container .datama-light-notifications {
    display: flex;
    flex-direction: column;
    position: absolute;
    max-width: 33.33% !important;
    bottom: 40px;
    right: 20px;
    transition: var(--transition-long-in);
    z-index: 999;
    direction: rtl;
}
.datama-light-notifications > .datama-notification {
    width: fit-content;
    min-width: 250px;
    direction: ltr;
    padding: 10px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--border-radius);
    border: 1px solid rgba(var(--datama-primary-rgb),0.1);
    transition: var(--transition-long-out);
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    background: var(--color-white);
    cursor: pointer;
    margin-top: 10px;
    float: right;
    position: relative;
}
.datama-light-notifications > .datama-notification[data-type="accent"] {
    font-size: 16px;
}
.datama-light-notifications > .datama-notification[data-type="warning"] {
    border: 1px solid rgba(var(--color-warning-rgb), 1);
}
.datama-light-notifications > .datama-notification[data-type="error"] {
    border: 1px solid rgba(var(--color-danger-rgb), 1);
}
.datama-light-notifications > .datama-notification[data-type="accent"]::before {
    content: unset;
    display: inline-block;
    width: 30px;
    height: 30px;
    float: left;
    border-radius: 50%;
    font-size: 25px;
    text-align: center;
    background: rgba(var(--color-bg-light-rgb), 1);
    color: rgba(var(--datama-primary-rgb), .8);
}
.datama-notification > * {
    width: 100%
}
/** RICH NOTIFICATION (icon + contents + buttons) */
.datama-light-notifications > .datama-notification.datama-notification-rich {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    max-width: 400px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-icon {
    grid-row: 1;
    grid-column: 1;
    width: auto;
    margin-right: 10px;
    align-self: start;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-content-body {
    grid-row: 1;
    grid-column: 2;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-content-body > .datama-title-h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-content-body > p {
    margin: 0;
    font-weight: 300;
    padding-right: 30px;
}
.datama-light-notifications > .datama-notification.datama-notification-rich > .datama-notification-buttons {
    grid-row: 2;
    grid-column: 1 / -1;
    width: auto;
    justify-self: end;
    margin-top: 8px;
}
.datama-light-notifications > .datama-notification p {
    margin: 0;
    font-weight: 300;
}
.datama-light-notifications > .datama-notification p ~ p {
    margin-top: 10px;
}
.datama-light-notifications > .datama-notification.datama-notification-show[data-type="accent"] {
    border: 2px solid rgba(var(--datama-primary-rgb), 1);
}
.datama-light-notifications > .datama-notification.datama-notification-show {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    gap: 10px;
}
.datama-light-notifications > #container-center-container-center-footer-current-version-notification.datama-notification-show {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
}
.datama-light-notifications > #container-center-container-center-footer-current-version-notification span.datama-icon.arrow-up-right svg path {
    fill: var(--color-white) !important;
}
.datama-light-notifications > .datama-notification[data-type="warning"].datama-notification-show:hover::after {
    color: var(--color-warning);
}
.datama-light-notifications > .datama-notification[data-type="error"].datama-notification-show:hover::after {
    color: var(--color-danger);
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons:empty {
    display: none;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons > button:not(:last-child) {
    margin-right: 10px;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons > button > * {
    line-height: 20px;
}
.datama-light-notifications > .datama-notification > .datama-notification-buttons > button .datama-icon.peace {
    transform: translateY(-2px);
}
/** NOTICATION PROGRESS */
.datama-light-notifications > .datama-notification.datama-notification-progress {
    padding-bottom: 20px;
    box-sizing: border-box;
    width: 300px;
}
.datama-light-notifications > .datama-notification > .datama-progress {
    position: absolute;
    left: 10px;
    bottom: 5px;
    height: 6px;
    right: 10px;
    width: calc(100% - 20px);
    display: flex;
    flex-wrap: nowrap;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.datama-light-notifications > .datama-notification > .datama-progress > .datama-progress-bar {
    display: inline-block;
    background: rgba(var(--datama-primary-rgb), 1);
    height: 100%;
    transition: var(--transition-in);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.datama-light-notifications > .datama-notification[data-type="warning"] > .datama-progress > .datama-progress-bar  {
    background: var(--color-warning);
}
.datama-light-notifications > .datama-notification[data-type="error"] > .datama-progress > .datama-progress-bar  {
    background: var(--color-danger);
}
.datama-light-notifications > .datama-notification > p {
    text-align: left;
}
.datama-light-notifications > .datama-notification > .datama-notification-icon + * {
    line-height: 20px;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="analysis"] {

    transform: scale(.75) translateY(15px);
    width: 20px;
    height: 10px;
    --c: no-repeat radial-gradient(farthest-side,var(--datama-primary) 93%,var(--datama-primary));
    background:
            var(--c) 0    0,
            var(--c) 50%  0,
            var(--c) 100% 0;
    background-size: 4px 4px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="analysis"]:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 6px;
    background: var(--datama-primary-light);
    left: 0;
    top: 0;
    animation:
            l4-1 1s  linear infinite alternate,
            l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="default"] {

    transform: scale(.75);
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
    --c: linear-gradient(var(--datama-primary) 0 0);
    --r1: radial-gradient(farthest-side at bottom, var(--datama-primary-light) 93%, #0000);
    --r2: radial-gradient(farthest-side at top   , var(--datama-primary-light) 93%, #0000);
    background:
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2);
    background-repeat: no-repeat;
    animation: l2 1s infinite alternate;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="done"] {

    transform: rotate(-45deg) scale(.6) translateY(5px);
    animation: writing-check 1s forwards;
    border-color: var(--datama-primary-light);
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"] {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    color: var(--color-danger)
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::before,
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::after {
    width: 15px;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    left: 2.5px;
    top: 9px;
    content: '';
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::before {
    animation: notification-error-icon-left 1s forwards;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="error"]::after {
    animation: notification-error-icon-right 1s forwards;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="warning"] {
    width: 0;
    height: 0;
    border-bottom: 20px solid currentColor;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    color: var(--color-warning);
    position: relative;
    animation: notification-warning-icon 1s ease-in forwards;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="warning"]::before {
    width: 0;
    height: 0;
    color: white;
    position: absolute;
    left: -8px;
    top: 3px;
    content: '';
    border-bottom: 16px solid currentColor;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.datama-light-notifications > .datama-notification .datama-notification-icon[data-icon="warning"]::after {
    content: '!';
    color: var(--color-warning);
    position: absolute;
    left: -2px;
    top: 3px;
    font-weight: bold;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="default"] {
    --c: linear-gradient(var(--color-warning) 0 0);
    --r1: radial-gradient(farthest-side at bottom, var(--color-warning) 93%, #0000);
    --r2: radial-gradient(farthest-side at top   , var(--color-warning) 93%, #0000);
    background:
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2),
            var(--c) ,var(--r1),var(--r2);
    background-repeat: no-repeat;
    animation: l2 1s infinite alternate;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="done"] {
    border-color: var(--color-warning);
}
.datama-light-notifications > .datama-notification[data-type="error"] .datama-notification-icon[data-icon="done"] {
    border-color: var(--color-danger);
}
.datama-light-notifications > .datama-notification[data-type="error"] .datama-notification-icon[data-icon="analysis"] {

    transform: scale(.75) translateY(15px);
    width: 20px;
    height: 10px;
    --c: no-repeat radial-gradient(farthest-side,var(--color-danger) 93%,var(--color-danger));
    background:
            var(--c) 0    0,
            var(--c) 50%  0,
            var(--c) 100% 0;
    background-size: 4px 4px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
}
.datama-light-notifications > .datama-notification[data-type="error"] .datama-notification-icon[data-icon="analysis"]:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 6px;
    background: var(--color-danger);
    left: 0;
    top: 0;
    animation:
            l4-1 1s  linear infinite alternate,
            l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="analysis"] {
    transform: scale(.75) translateY(15px);
    width: 20px;
    height: 10px;
    --c: no-repeat radial-gradient(farthest-side,var(--color-warning) 93%,var(--color-warning));
    background:
            var(--c) 0    0,
            var(--c) 50%  0,
            var(--c) 100% 0;
    background-size: 4px 4px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
}
.datama-light-notifications > .datama-notification[data-type="warning"] .datama-notification-icon[data-icon="analysis"]:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 6px;
    background: var(--color-warning);
    left: 0;
    top: 0;
    animation:
            l4-1 1s  linear infinite alternate,
            l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
@keyframes notification-warning-icon {
    0% {
        transform: scale(.8);
    }
    10% {
        transform: scale(1.2);
    }
    20% {
        transform: scale(.9);
    }
}
@keyframes notification-error-icon-left {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
@keyframes notification-error-icon-right {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}
@keyframes writing-check {
    0% {
        height: 12px;
        width: 5px;
        border-left: 5px solid ;
        border-bottom: 5px solid transparent;
    }
    50% {
        height: 12px;
        width: 20px;
        border-left: 5px solid var(--datama-primary-light);
        border-bottom: 5px solid transparent;
    }
    100% {
        height: 12px;
        width: 20px;
        border-left: 5px solid var(--datama-primary-light);
        border-bottom: 5px solid var(--datama-primary-light);
    }
}
@keyframes l2 {
    0%,25% {
        background-size: 4px 0,4px 2px,4px 2px,4px 0,4px 2px,4px 2px,4px 0,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(50% - 1px),0 calc(50% + 1px),50% 50%,50% calc(50% - 1px),50% calc(50% + 1px),100% 50%,100% calc(50% - 1px),100% calc(50% + 1px);
    }
    50% {
        background-size: 4px 100%,4px 2px,4px 2px,4px 0,4px 2px,4px 2px,4px 0,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(0% - 1px),0 calc(100% + 1px),50% 50%,50% calc(50% - 1px),50% calc(50% + 1px),100% 50%,100% calc(50% - 1px),100% calc(50% + 1px);
    }
    75% {
        background-size: 4px 100%,4px 2px,4px 2px,4px 100%,4px 2px,4px 2px,4px 0,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(0% - 1px),0 calc(100% + 1px),50% 50%,50% calc(0% - 1px),50% calc(100% + 1px),100% 50%,100% calc(50% - 1px),100% calc(50% + 1px);
    }
    95%,100% {
        background-size: 4px 100%,4px 2px, 4px 2px,4px 100%,4px 2px,4px 2px,4px 100%,4px 2px,4px 2px;
        background-position: 0 50%,0 calc(0% - 1px),0 calc(100% + 1px),50% 50%,50% calc(0% - 1px),50% calc(100% + 1px),100% 50%,100% calc(0% - 1px),100% calc(100% + 1px);
    }
}
@keyframes l4-0 {
    0%      {background-position: 0  100%,50% 0   ,100% 0}
    8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
    50%     {background-position: 0  0   ,50% 100%,100% 0}
    58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
    100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}
@keyframes l4-1 {
    100% {left:calc(100% - 4px)}
}
@keyframes l4-2 {
    100% {top:-0.1px}
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __panels.css project project-deep-sky
 */

.datama-panels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.datama-panels > .datama-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    overflow: visible;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}
.datama-panels > .datama-panel:hover {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 2px 6px 0 rgba(var(--color-dark-rgb), 0.08);
}
.datama-panels > .datama-panel:has(.datama-input-select-open) {
    z-index: 10;
}
.datama-panels > .datama-panel > .datama-panel-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    background: rgba(var(--color-white-rgb), 1);
    color: var(--color-dark);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon {
    margin-left: -.25rem;
    margin-right: .5rem;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon * {
    font-size: .9rem !important;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header {
    flex: 1;
    margin-right: auto;
    margin-left: 0;
}
.datama-panels > .datama-panel > .datama-panel-header-container:hover {
    background: rgba(var(--datama-primary-rgb), 0.02);
    color: var(--datama-primary);
}
.datama-panels > .datama-panel > .datama-panel-content {
    width: 100%;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    background: rgba(var(--color-white-rgb), 0.98);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: none;
    opacity: 1;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel > .datama-panel-content:has(.datama-input-select-open) {
    overflow: visible !important;
}
.datama-panels > .datama-panel:has(.datama-panel-content .datama-input-select-open) {
    z-index: 100;
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-content {
    height: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container {
    border-bottom: 1px solid transparent;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.datama-panels > .datama-panel > .datama-panel-header-container {
    position: relative;
}
.datama-panels > .datama-panel > .datama-panel-header-container::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 5px solid rgba(var(--color-dark-rgb), 0.4);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-bottom-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel > .datama-panel-header-container:hover::after {
    border-bottom-color: var(--datama-primary);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container::after {
    transform: translateY(-50%) rotate(180deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-bottom-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:hover::after {
    border-bottom-color: var(--datama-primary);
}

/* Permettre l'overflow pour les dropdowns une fois l'animation terminée */
.datama-panel-content.allow-overflow {
    overflow: visible !important;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __plotter.css project project-deep-sky
 */

.plotter {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.plotter .plotter-shortcut-on-hover {
    visibility: hidden;
    opacity: 0;
    transition: .1s ease-out;
}
.plotter .plotter-shortcuts:hover .plotter-shortcut-on-hover {
    visibility: visible;
    opacity: 1;
    transition: .2s ease-in;
}
/* Hide resize handle/affordance when panel is fullscreen */
/* Hide drag handle in quick-actions when fullscreen */
.plotter .plotter-panel.fullscreen > .plotter-panel-quick-actions::before {
    display: none !important;
}
.plotter-plot .domain {
    display: none;
}
.plotter-plot {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.plotter-plot .overlay {
    width: 100% !important;
}

.plotter .plotter-annotation {
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    text-align: center;
}
.plotter .plotter-annotation > div {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}
.plotter .plotter-annotation > div > * {
    pointer-events: all;
}
.plotter .plotter-annotation > .plotter-annotation-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.plotter .plotter-annotation > .plotter-annotation-top,
.plotter .plotter-annotation > .plotter-annotation-top-trace,
.plotter .plotter-annotation > .plotter-annotation-positive {
    position: absolute;
    top: 0;
}

.plotter .plotter-annotation > .plotter-annotation-bottom,
.plotter .plotter-annotation > .plotter-annotation-bottom-trace,
.plotter .plotter-annotation > .plotter-annotation-negative {
    position: absolute;
    bottom: 0;
}
.plotter-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-right: auto;
}
.plotter-header .plotter-title {
    line-height: 30px;
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    gap: 0.25rem;
    align-items: center;
}
.plotter-header .plotter-title > * {
    width: unset !important;
    white-space: nowrap;
}
.plotter-header .plotter-title > .datama-input-container {
    flex-wrap: nowrap;
    white-space: nowrap;
}
.plotter-shortcuts .datama-input-select {
    width: 100px;
}
.plotter-shortcuts .datama-input-container {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .25rem;
}
.plotter-header .plotter-title > .datama-translated {
    font-weight: 300;
}
.plotter-header .plotter-title .datama-input-select.datama-input-select-light {
    height: 1.5rem;
    padding: 0 1rem 0 0;
}
.plotter-header .plotter-title .datama-input-select::after {
    right: .25rem;
    transform: unset;
}
/* Add edit icon to editable labels */
.plotter-editable-label {
    position: relative;
    cursor: pointer;
}
.plotter-editable-label:hover::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.15s ease;
}
.plotter-header .plotter-title .datama-input-select.datama-input-select-light > .datama-input-select-value {
    font-weight: 400;
    font-size: 20px;
}
.plotter-header .plotter-subtitle {
    line-height: 20px;
    font-size: 18px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
.plotter-header .plotter-subtitle:empty {
    display: none;
}
.plotter-footer {
    display: flex;
    flex-direction: column;
    line-height: 30px;
}
.plotter-shortcuts .datama-icon {
    font-size: 20px;
}
.plotter-no-events {
    pointer-events: none !important;
}
.plotter-shortcuts {
    display: flex;
    width: 100%;
    margin-right: auto;
    justify-content: flex-end;
    min-height: 40px; /* Change from fixed height to min-height */
    line-height: 40px;
    font-size: 20px;
    flex-wrap: wrap; /* Allow wrapping when space is limited */
    align-items: center; /* Center items vertically */
    gap: 8px; /* Increase gap between items for better spacing */
    row-gap: 12px; /* Add specific row gap for wrapped lines */
}
.plotter-shortcuts.plotter-shortcuts-hover-only {
    opacity: 0;
    transition: .1s ease-out;
}
.plotter:hover .plotter-shortcuts.plotter-shortcuts-hover-only {
    opacity: 1;
    transition: .2s ease-in;
}
.plotter-shortcuts > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important; /* Remove margins since we use gap */
    margin-right: 0 !important; /* Remove margins since we use gap */
    display: flex;
    flex-wrap: nowrap;
    gap: 4px; /* Add small gap within each shortcut item */
    flex-shrink: 1; /* Allow items to shrink when space is limited */
    min-width: 0; /* Allow items to shrink below their content width */
    align-items: center; /* Ensure vertical alignment within each item */
}
.plotter-shortcuts > .datama-button > .datama-button-text {
    font-size: .8rem;
    align-self: center;
}

/* Add margin bottom to buttons for alignment with selects */
.plotter-shortcuts .datama-button {
    margin-bottom: 4px;
}

.plotter-shortcuts .datama-input-container {
    margin-bottom: 4px;
}

/* Button group for desktop - make it transparent to layout */
.plotter-shortcuts-button-group {
    display: contents; /* Make it transparent on desktop */
}

/* Show dividers in button group on both desktop and mobile */
.plotter-shortcuts-button-group .datama-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(var(--color-dark-rgb), 0.2);
    margin: 0 8px;
    flex-shrink: 0;
}

/* Hide mobile separator on desktop */
.plotter-shortcuts-separator {
    display: none;
}

/* Style for active toggle buttons in shortcuts */
.plotter-shortcuts .datama-button.active {
    background-color: rgba(var(--datama-primary-rgb), 0.1) !important;
    border-color: rgba(var(--datama-primary-rgb), 0.3) !important;
    color: var(--datama-primary) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.plotter-shortcuts .datama-button.active .datama-icon,
.plotter-shortcuts .datama-button.active .datama-icon path {
    color: var(--datama-primary) !important;
    fill: var(--datama-primary) !important;
}

.plotter-shortcuts .datama-button.active:hover {
    background-color: rgba(var(--datama-primary-rgb), 0.15) !important;
    border-color: rgba(var(--datama-primary-rgb), 0.4) !important;
    transform: scale(1.02);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.plotter-shortcuts > .datama-input {
    line-height: 40px;
}
div[data-app="true"] .plotter-shortcuts .datama-input-label {
    margin-right: 5px !important;
    margin-left: 5px !important;
}
.plotter-shortcuts > .datama-input-container > *:not(.datama-input-select-counter) {
    display: inline-block;
    min-width: unset;
    line-height: 30px;
    min-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

/* Disable counter completely in plotter shortcuts */
.plotter-shortcuts .datama-input-select-counter {
    display: none !important; /* Hide counter in shortcuts */
}

/* Hover effects for all buttons in shortcuts, including inactive ones */
.plotter-shortcuts .datama-button:not(.active):hover {
    background-color: rgba(var(--color-dark-rgb), 0.04) !important;
    border-color: rgba(var(--color-dark-rgb), 0.12) !important;
    transform: translateY(-1px);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-shortcuts .datama-button:not(.active):hover .datama-icon,
.plotter-shortcuts .datama-button:not(.active):hover .datama-icon path {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive shortcuts menu */
.plotter-shortcuts-hamburger {
    display: none; /* Hidden by default on desktop */
    padding: 8px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    background: rgba(var(--color-dark-rgb), 0.05) !important;
    border: 1px solid rgba(var(--color-dark-rgb), 0.1) !important;
}

.plotter-shortcuts-hamburger:hover {
    background: rgba(var(--color-dark-rgb), 0.08) !important;
    border-color: rgba(var(--color-dark-rgb), 0.15) !important;
    transform: translateY(-1px);
}

.plotter-shortcuts-hamburger .datama-icon {
    font-size: 18px !important;
}

.plotter-shortcuts-content {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    z-index: 1;
}

/* Responsive design for shortcuts */
@media screen and (max-width: 1024px) {
    .plotter-shortcuts-content, .plotter-shortcuts-content * {
        gap: 4px;
        row-gap: 0;
    }

    .plotter-shortcuts {
        position: relative;
    }
}
@media screen and (max-width: 768px) {
    .plotter-shortcuts-hamburger {
        display: flex !important; /* Show hamburger on mobile */
        order: 1;
        margin-left: auto;
    }

    .plotter-shortcuts-content {
        position: absolute;
        top: 100%;
        right: 0;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        background: var(--color-white);
        border: 1px solid rgba(var(--color-dark-rgb), 0.1);
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.15);
        padding: 12px;
        min-width: 200px;
        z-index: 1000;
        flex-direction: column;
        align-items: stretch;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .plotter-shortcuts.plotter-shortcuts-expanded .plotter-shortcuts-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Style for input containers in mobile menu - keep them full width and stacked */
    .plotter-shortcuts-content .datama-input-container {
        width: 100%;
        margin-bottom: 8px;
    }

    .plotter-shortcuts-content .datama-input-container > * {
        width: 100%;
    }

    /* Button group container for horizontal layout in mobile */
    .plotter-shortcuts-button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .plotter-shortcuts-button-group .datama-button {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    /* Show and style dividers in button group for mobile */
    .plotter-shortcuts-button-group .datama-divider {
        display: block !important; /* Override desktop hiding */
        width: 1px;
        height: 20px;
        background-color: rgba(var(--color-dark-rgb), 0.2);
        margin: 0 8px;
        flex-shrink: 0;
    }

    /* Show separator between selects and buttons in mobile menu */
    .plotter-shortcuts-separator {
        display: block !important; /* Override desktop hiding */
        width: 100%;
        height: 1px;
        background-color: rgba(var(--color-dark-rgb), 0.1);
        margin: 16px 0 12px 0;
    }

    /* Add margin left to M1 input container */
    .plotter-shortcuts .datama-input-container:has([id*="-step"]) {
        padding-left: 0;
        padding-top: 1rem;
    }

    /* Add margin right to M2 input container */
    .plotter-shortcuts .datama-input-container:has([id*="-metric"]) {
        padding-right: 0;
        padding-bottom: 1rem;
    }
}
.plotter-plot {
    cursor: crosshair;
    position: relative;
}
.plotter-traces[data-trace="events"] .plotter-trace-element-cursor {
    pointer-events: none;
}
.plotter-traces[data-trace="areas"] .plotter-trace-element-dot {
    cursor: pointer;
}
.plotter-trace-element,
.plotter-line {
    cursor: pointer;
}
.plotter *[data-hover="out"]:not([opacity="0"]) {
    opacity: .1;
    transition: .2s ease-in;
}
.plotter *[data-hover="in"]:not([opacity="0"]):not([opacity="1"]),
.plotter *[data-hover="scope"]:not([opacity="0"]) {
    opacity: .5;
    transition: .2s ease-in;
}
.plotter *[data-hover="in"],
.plotter *.plotter-lock {
    stroke-width: 1.5px;
    stroke-opacity: 1;
    transition: 0.2s ease-in;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.plotter-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 20px;
    pointer-events: none;
    top: 80px;
    z-index: 10;
}
.plotter-hover p {
    margin-bottom: 0 !important;
}
.plotter-hover .datama-translated {
    display: inline;

}
.plotter-hover main > div {
    width: 100%;
}
.plotter-hover .plotter-hover-element {
    position: absolute;
    opacity: 1;
    transition: .1s ease-in;
    background-color: var(--color-white);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    min-width: 200px;
    white-space: pre-wrap;
    padding: 5px 10px;
    border: 1px solid rgba(var(--color-dark-rgb), 0.25);
    border-radius: 6px;
}
.plotter-hover .plotter-hover-element.plotter-lock {
    pointer-events: all;
}
.plotter-hover .plotter-hover-element.hide:not(.plotter-lock) {
    z-index: -1;
    opacity: 0;
    transition: .2s ease-out opacity;
}

.plotter-hover-dim1 {
    margin-bottom: 4px;
}
.plotter-hover-dim2 {
    margin-bottom: 6px;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.plotter-hover-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.plotter-hover-metric {
    margin-top: 2px;
    margin-bottom: 4px;
    font-size: 0.95em;
}
.plotter-hover-metric:last-child {
    margin-bottom: 0;
}
.plotter-hover-metric-secondary {
    font-style: italic;
}

.plotter .plotter-panel .hidden {
    display: none !important;
}
.plotter-hover .plotter-hover-element::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 5px;
    background-color: var(--color-white);
}
.plotter-hover .plotter-hover-element.bottom.left::after {
    bottom: calc(100% - 4px);
    left: 0;
    border-radius: 5px;
    border-top: 4px solid rgba(var(--color-dark-rgb), .5);
    border-right: 4px solid transparent;
}
.plotter-hover .plotter-hover-element.bottom.right {
    transform: translateX(-100%);
}
.plotter-hover .plotter-hover-element.bottom.right::after {
    bottom: calc(100% - 4px);
    right: 0;
    border-top: 4px solid rgba(var(--color-dark-rgb), .5);
    border-left: 4px solid transparent;
}
.plotter-hover .plotter-hover-element.top.left {
    transform: translateY(-100%);
}
.plotter-hover .plotter-hover-element.top.left::after {
    top: calc(100% - 4px);
    left: 0;
    border-bottom: 4px solid rgba(var(--color-dark-rgb), .5);
    border-right: 4px solid transparent;
}
.plotter-hover .plotter-hover-element.top.right {
    transform: translate(-100%, -100%);
}
.plotter-hover .plotter-hover-element.top.right::after {
    top: calc(100% - 4px);
    right: 0;
    border-bottom: 4px solid rgba(var(--color-dark-rgb), .5);
    border-left: 4px solid transparent;
}

/* PlotterInputs styles - make it extend to the footer */
.plotter-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 280px;
    background-color: var(--datama-background-color, #fff);
    /*border-left: 1px solid var(--datama-border-color, #e0e0e0);*/
    z-index: 10;
    overflow-y: auto;
    transition: transform 0.3s ease;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05);
    padding-left: 30px;
}

/* Create a two-column dot pattern resize handle */
.plotter-panel > .plotter-panel-quick-actions::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 6px;
    height: 60px;
    background-color: rgba(var(--color-dark-rgb), 0.1);
    /*background-image:*/
    /*    radial-gradient(circle, var(--shadow-color) 1.5px, transparent 1.5px),*/
    /*    radial-gradient(circle, var(--shadow-color) 1.5px, transparent 1.5px);*/
    border: var(--border);
    border-radius: var(--border-radius-rounded);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    cursor: ew-resize;
    z-index: 101;
    transition: opacity 0.2s ease;
}
.plotter-panel > .plotter-panel-quick-actions:hover::before {
    border: 1px solid rgba(var(--datama-primary-rgb), .33);
    background-color: rgba(var(--datama-primary-rgb), 1);
}

/* Highlight the resize handle on hover */
.plotter-panel:hover::before {
    opacity: 1;
}

/* Remove the glow effect */
.plotter-panel::after {
    display: none;
}

.plotter-panel.collapsed {
    transform: translateX(105%);
    opacity: 0;
    pointer-events: none;
}

.plotter .plotter-panel .plotter-panel-quick-actions {
    width: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
}
.plotter .plotter-panel .plotter-panel-quick-actions > button {
    width: 30px;
    height: 30px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.plotter .plotter-panel .plotter-panel-quick-actions > button:not(:first-child) {
    border-top: var(--border);
}
.plotter .plotter-panel .plotter-panel-quick-actions > button:hover {
    background-color: rgba(var(--datama-primary-rgb), .1);
    transition: .1s ease-in;
}

/* Increase font size for quick actions buttons */
.plotter .plotter-panel .plotter-panel-quick-actions .datama-button {
    font-size: 1rem;
}

/* Dynamic width for header and shortcuts based on panel state and width */
.plotter-header,
.plotter-shortcuts {
    transition: width 0.3s ease;
    width: 100%; /* Default to full width */
}

/* When panel is open, adjust width of header and shortcuts based on panel width */
.plotter.panel-open .plotter-header,
.plotter.panel-open .plotter-shortcuts {
    width: calc(100% - var(--plotter-panel-width, 280px));
    padding-right: 8px;
}

/* When panel is collapsed, allow header and shortcuts to use full width */
.plotter.panel-closed .plotter-header,
.plotter.panel-closed .plotter-shortcuts,
.plotter:not(.panel-open):not(.panel-closed) .plotter-header,
.plotter:not(.panel-open):not(.panel-closed) .plotter-shortcuts {
    width: 100%;
}

.plotter-panel .datama-input-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.plotter-panel .datama-input-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-top: 15px;
}

.plotter-panel .datama-input-radio-group,
.plotter-panel .datama-input-checkbox-group {
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(73, 158, 149, 0.5) transparent;
}

.plotter-panel .datama-input-radio,
.plotter-panel .datama-input-checkbox {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 0;
    margin: 0 0 8px 0 !important;
    min-height: unset !important;
    max-height: unset !important;
    height: auto !important;
}

.plotter-panel .datama-input-radio input,
.plotter-panel .datama-input-checkbox input {
    margin-right: 8px;
    accent-color: #499e95;
}

.plotter-panel .datama-input-radio-weighted,
.plotter-panel .datama-input-checkbox-weighted {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.2s;
    cursor: pointer;
}

.plotter-panel .datama-input-radio-weighted:hover,
.plotter-panel .datama-input-checkbox-weighted:hover {
    background-color: rgba(73, 158, 149, 0.1);
}

.plotter-panel .datama-input-radio-weighted input,
.plotter-panel .datama-input-checkbox-weighted input {
    margin-right: 8px;
    accent-color: #499e95;
}

.plotter-panel .datama-input-radio-weighted .text-container,
.plotter-panel .datama-input-checkbox-weighted .text-container {
    flex: 1;
}

.plotter-panel .datama-input-radio-weighted .text,
.plotter-panel .datama-input-checkbox-weighted .text {
    display: block;
    font-weight: 500;
}

.plotter-panel .datama-input-radio-weighted .detail,
.plotter-panel .datama-input-checkbox-weighted .detail {
    display: block;
    font-size: 0.8em;
    color: #666;
}

.plotter-panel .datama-input-radio-weighted .figure,
.plotter-panel .datama-input-checkbox-weighted .figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 10px;
}

.plotter-panel .datama-input-radio-weighted .figure .datama-label,
.plotter-panel .datama-input-checkbox-weighted .figure .datama-label {
    font-size: 0.8em;
    margin-bottom: 2px;
    color: #499e95;
}

.plotter-panel .datama-input-radio-weighted .figure .bar,
.plotter-panel .datama-input-checkbox-weighted .figure .bar {
    height: 4px;
    background-color: #499e95;
    border-radius: 2px;
}

/* Match height with datama-light-modules */
.datama-module .plotter-panel {
    height: 100%;
}

/* Make the entire input clickable */
.plotter-panel .datama-input-radio label,
.plotter-panel .datama-input-checkbox label {
    cursor: pointer;
    flex: 1;
}

/* Ensure the panel is properly positioned in the datama-light-modules context */
.datama-light-modules .plotter {
    position: relative;
    height: 100%;
}

/* Ensure the panel matches the height of datama-light-modules */
.datama-light-modules .plotter .plotter-panel {
    position: absolute; /* Use fixed positioning to ignore container boundaries */
    top: 0; /* Adjust based on header height */
    bottom: 0; /* Adjust based on footer height */
    max-height: 100%;
}

/* Match height with datama-module */
.datama-module .plotter-panel {
    height: 100%;
}

/* Make sure the plotter container takes full height in datama-light-modules */
.datama-light-modules .plotter {
    height: 100%;
}

/* Styling for inputs in shortcuts */
.plotter-shortcuts .shortcut-input {
    display: flex;
    align-items: center;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 0 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 250px;
    min-width: 100px; /* Set minimum width */
    min-height: 32px;
    flex-shrink: 1; /* Allow shrinking */
    flex-grow: 0; /* Don't grow beyond content */
}

.plotter-shortcuts .shortcut-input .datama-input-label {
    font-size: 12px;
    margin: 0 5px 0 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.plotter-shortcuts .shortcut-input .datama-input-select,
.plotter-shortcuts .shortcut-input select {
    font-size: 12px;
    max-width: 150px;
    min-width: 80px; /* Minimum width to remain usable */
    min-height: 28px;
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    flex-shrink: 1; /* Allow select to shrink */
    overflow: hidden; /* Prevent text overflow */
    text-overflow: ellipsis; /* Add ellipsis to select content */
}

/* Style for multiple select */
.plotter-shortcuts .shortcut-input .datama-input-select[multiple],
.plotter-shortcuts .shortcut-input select[multiple] {
    height: auto;
    max-height: 100px;
}

/* Compact dropdown in shortcuts */
.plotter-shortcuts .shortcut-input .datama-input-select-dropdown {
    max-height: 200px;
    overflow-y: auto;
}

/* Resize handle for plotter inputs - make it very visible */
.plotter-panel-resize-handle {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 10px !important;
    height: 100% !important;
    cursor: ew-resize !important;
    background-color: rgba(73, 158, 149, 0.3) !important;
    border-left: 3px solid rgba(73, 158, 149, 0.8) !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

/* Add a visual indicator inside the handle */
.plotter-panel-resize-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 2px;
    height: 30px;
    background-color: rgba(73, 158, 149, 0.8);
    transform: translateY(-50%);
}

/* Make sure the resize handle is visible on hover */
.plotter-panel:hover .plotter-panel-resize-handle {
    background-color: rgba(73, 158, 149, 0.5) !important;
    border-left: 3px solid rgba(73, 158, 149, 1) !important;
}

/* Style for when resizing is happening */
.plotter.resizing {
    cursor: ew-resize !important;
    user-select: none;
}

.plotter.resizing * {
    cursor: ew-resize !important;
}


/* Adjust the toggle button position to match original style */
.plotter-panel-toggle {
    display: flex;
    left: 0;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: center;
    box-shadow: none;
    background: transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--datama-primary, #499e95);
    transform: translate(-20px, 10px) rotate(180deg) scale(.7);
    cursor: pointer;
    transition: right 0.3s ease;
}

.plotter-panel-toggle::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -20px;
    width: 40px;
    height: 40px;
}

/* Add a class for when resizing is happening to remove transition */
.plotter-panel-toggle.resizing {
    transition: none;
}

/* Style for the toggle button when panel is collapsed */
.plotter-panel.collapsed + .plotter-panel-toggle {
    right: 0;
}

.datama-light-modules .plotter .plotter-panel.collapsed + .plotter-panel-toggle {
    opacity: 0;
    pointer-events: none;
}

/* Adjust the plot size when inputs panel is open */
.panel-open .plotter-plot {
    transition: width 0.3s ease;
}
.panel-open .plotter-legends {
    margin-left: -20px;
}

.panel-closed .plotter-plot {
    transition: width 0.3s ease;
}

/* Ensure scrollable containers have enough height for 3 items */
.plotter-panel .datama-input-radio-group,
.plotter-panel .datama-input-checkbox-group {
    max-height: 220px !important; /* Increased to accommodate larger items */
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
}

/* Improved scrollbar styling */
.plotter-panel .datama-input-radio-group,
.plotter-panel .datama-input-checkbox-group {
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 200, 200, 0.3) transparent;
}

/* Webkit scrollbar styling - more elegant and subtle */
.plotter-panel .datama-input-radio-group::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Hide scrollbar buttons */
.plotter-panel .datama-input-radio-group::-webkit-scrollbar-button,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-button {
    display: none;
}

.plotter-panel .datama-input-radio-group::-webkit-scrollbar-track,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.plotter-panel .datama-input-radio-group::-webkit-scrollbar-thumb,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-thumb {
    background-color: rgba(200, 200, 200, 0.3);
    border-radius: 10px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.plotter-panel .datama-input-radio-group::-webkit-scrollbar-thumb:hover,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-thumb:hover {
    background-color: rgba(150, 150, 150, 0.5);
}

/* Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
    .plotter-panel .datama-input-radio-group,
    .plotter-panel .datama-input-checkbox-group {
        scrollbar-width: thin;
        scrollbar-color: rgba(200, 200, 200, 0.3) transparent;
    }
}

/* Plotter inputs container for regular inputs */
.plotter-panel-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--datama-border-color, #e0e0e0);
}

/* Plotter inputs table container */
.plotter-panel-table-container {
    flex: 1;
    overflow-y: auto;
    height: calc(100% - 1px); /* Adjust for the border */
}

/* When both inputs and table are present */
.plotter-panel-container + .plotter-panel-table-container {
    height: calc(100% - 1px);
}

.plotter-panel .datama-input-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.plotter *[data-hidden="true"],
.datama-waterfall-container *[data-hidden="true"] {
    display: none;
}

/* Force table layout to fixed */
div[data-app="true"] .datama-reactive-table {
    table-layout: fixed !important;
}

/* Force selected column to be narrow */
/*div[data-app="true"] .datama-reactive-table th:first-child:not(.sortable),*/
/*div[data-app="true"] .datama-reactive-table td:first-child:not(.sortable) {*/
/*    width: 30px !important;*/
/*    min-width: 30px !important;*/
/*    max-width: 30px !important;*/
/*    padding: 0 !important;*/
/*    overflow: hidden !important;*/
/*}*/

/* Make checkbox container compact */
div[data-app="true"] .checkbox-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Make checkbox itself compact */
div[data-app="true"] .reactive-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}


/* Plotter integration styles */
.plotter-panel-table-container {
    padding: 0;
    height: 100%;
    overflow: hidden; /* Change to hidden to prevent double scrollbars */
    box-sizing: border-box;
    width: 100%;
}

.plotter-panel .datama-reactive-table-container {
    margin: 0;
    max-height: 100%;
    overflow-x: auto !important; /* Force horizontal scrolling */
    overflow-y: auto;
    box-shadow: none;
    border: var(--border);
    box-sizing: border-box;
    width: 100%;
    margin-top: -1px;
}

.plotter-panel .datama-reactive-table {
    box-shadow: none;
    width: 100%;
    table-layout: fixed; /* Ensure columns maintain their width */
    min-width: 100%; /* Ensure the table doesn't shrink below container width */
    border: unset;
}
/* Allow other columns to stretch */
.plotter-panel .datama-reactive-table col:not(:first-child) {
    width: auto; /* Allow columns to stretch */
}

.plotter-panel .datama-reactive-table-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--color-bg-light, #fff);
}

.plotter-panel .datama-reactive-table {
    font-size: 14px;
    font-family: var(--font-family);
    font-weight: 400;
}

.plotter-panel .datama-reactive-table-cell {
    padding: 1rem 1.5rem;
}

/* Override padding for first column in plotter inputs */
/*.plotter-panel .datama-reactive-table-cell:not(.sortable):not(.filterable):first-child {*/
/*    padding: 0 !important;*/
/*    width: 30px !important;*/
/*    min-width: 30px !important;*/
/*    max-width: 30px !important;*/
/*    overflow: hidden !important;*/
/*}*/

.plotter-panel .pagination-container {
    padding: 8px;
}

.plotter-panel .pagination-button {
    padding: 4px 8px;
    font-size: 12px;
}

.plotter-panel .page-indicator {
    font-size: 12px;
}

.plotter-panel-title {
    margin: 16px 16px 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--datama-primary, #499e95);
    display: none; /* Hide the title by default */
}

.plotter-legends {
    padding: 12px;
    min-width: 80px; /* Minimum width to prevent text crushing */
    order: 1;
}
.plotter-legends-layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.plotter-legends-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
	opacity: 0;
}
.plotter-legends-layout:hover .plotter-legends-actions {
	opacity: 1;
}
.plotter-legends-list {
    min-width: 0;
    flex: 1;
}
.plotter-legend-sort-control {
    margin: 0;
    padding: 2px;
	border: none;
    border-radius: 6px;
    background: rgba(var(--color-dark-rgb), 0.05);
    color: rgba(var(--color-dark-rgb), 0.9);
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: background-color .15s ease-in, border-color .15s ease-in, color .15s ease-in;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plotter-legend-sort-control:hover {
    background-color: rgba(var(--color-dark-rgb), 0.04);
}
.plotter-legend-sort-control {
    background-color: rgba(var(--datama-primary-rgb), 0.1);
    color: var(--datama-primary);
}
.plotter-legend-sort-control:hover {
    background-color: rgba(var(--datama-primary-rgb), 0.15);
}
.plotter-legend-sort-control > svg,
.plotter-legend-sort-control > svg path
{
    display: block;
    width: 16px;
    height: 16px;
	color: var(--datama-primary);
    fill: var(--datama-primary);
}
.plotter-legends .plotter-legend {
    margin-bottom: 6px;
    line-height: 22px;
    display: flex;
    align-items: center;
    min-height: 22px;
}
.plotter-legends .plotter-legend > svg {
    min-width: 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    padding: 1px;
    margin-right: 8px;
    flex-shrink: 0; /* Prevents icon size reduction */
}
.plotter-legends .plotter-legend > span {
    display: inline-block;
    font-size: 14px;
    max-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.2;
}
.plotter-legend-eye {
    margin-left: 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex: 1; /* Allows eye icon to take available space */
}

.plotter-legend-eye:hover {
    opacity: 1;
}

.plotter-axis-sort-icon {
    opacity: 0;
    pointer-events: none;
}

.plotter-axis-sort-icon.is-active-sort {
    opacity: 1;
}

.plotter-axis-header:hover .plotter-axis-sort-icon {
    opacity: 1;
}

.legend-disabled {
    opacity: 0.5 !important;
}


/* Responsive legends - Size adaptation based on screen */
@media screen and (max-width: 1200px) {
    .plotter-legends {
        padding: 10px;
        min-width: 70px;
    }
    .plotter-legends .plotter-legend > span {
        font-size: 13px;
        max-height: 40px;
    }
    .plotter-shortcuts .shortcut-input .datama-input-label {
        max-width: 60px; /* Reduce label width on medium screens */
    }
}

@media screen and (max-width: 900px) {
    .plotter-legends {
        padding: 8px;
        min-width: 60px;
    }
    .plotter-legends .plotter-legend > span {
        font-size: 12px;
        max-height: 36px;
    }
    .plotter-legends .plotter-legend > svg {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }
}

@media screen and (max-width: 600px) {
    .plotter-legends {
        padding: 6px;
        min-width: 50px;
    }
    .plotter-legends .plotter-legend > span {
        font-size: 11px;
        max-height: 32px;
        -webkit-line-clamp: 1; /* Single line on very small screens */
        line-clamp: 1;
    }
    .plotter-legends .plotter-legend > svg {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
}

/* Responsive label collapsing for shortcuts - Progressive approach */

@media screen and (max-width: 900px) {
    .plotter-shortcuts .shortcut-input .datama-input-label {
        max-width: 40px; /* Further reduce label width */
        font-size: 11px; /* Slightly smaller font */
    }
    div[data-app="true"] .plotter .plotter-shortcuts * {
        line-height: 20px !important;
        font-size: 10px !important;
    }
}

@media screen and (max-width: 767px) {
    div[data-app="true"] .plotter .plotter-title * {
        line-height: 26px !important;
        font-size: 18px !important;
    }
    div[data-app="true"] .plotter .plotter-subtitle * {
        line-height: 20px !important;
        font-size: 16px !important;
    }
    div[data-app="true"] .plotter .plotter-shortcuts {
        line-height: 20px !important;
        font-size: 14px !important;
        min-height: 20px; /* Change to min-height */
        gap: 6px !important; /* Reduce gap on mobile */
        row-gap: 8px !important; /* Reduce row gap on mobile */
    }
    div[data-app="true"] .plotter .plotter-shortcuts .datama-input-container {
        margin: 0 !important;
        height: auto; /* Allow height to adapt */
        min-height: 20px; /* Set minimum height */
    }
    div[data-app="true"] .plotter .plotter-footer {
        line-height: 18px;
        font-size: 14px;
    }

    /* Very aggressive label reduction on mobile */
    .plotter-shortcuts .shortcut-input .datama-input-label {
        max-width: 20px; /* Very small labels */
        font-size: 10px;
    }
}

@media screen and (max-width: 600px) {
    /* Hide labels completely on very small screens and rely on tooltips */
    .plotter-shortcuts .shortcut-input .datama-input-label {
        display: none;
    }

    /* Make selects more compact */
    .plotter-shortcuts .shortcut-input {
        max-width: 120px; /* Smaller containers */
        padding: 0 4px; /* Less padding */
    }

    .plotter-shortcuts .shortcut-input .datama-input-select,
    .plotter-shortcuts .shortcut-input select {
        max-width: 110px; /* Smaller selects */
        font-size: 11px; /* Smaller font */
    }

    /* Increase spacing between wrapped lines on very small screens */
    .plotter-shortcuts {
        row-gap: 10px !important; /* More space between rows */
    }

    div[data-app="true"] .plotter .plotter-title * {
        line-height: 20px !important;
        font-size: 14px !important;
    }
    div[data-app="true"] .plotter .plotter-subtitle * {
        line-height: 20px !important;
        font-size: 12px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    div[data-app="true"] .plotter .plotter-title {
        line-height: 30px;
        font-size: 20px;
    }
    div[data-app="true"] .plotter .plotter-subtitle {
        line-height: 24px;
        font-size: 18px;
    }
    div[data-app="true"] .plotter .plotter-shortcuts {
        line-height: 20px !important;
        font-size: 14px !important;
    }
    div[data-app="true"] .plotter .plotter-shortcuts .datama-input-container {
        margin: 0 !important;
        margin-right: 5px !important;
        height: 20px;
    }
    div[data-app="true"] .plotter .plotter-footer {
        line-height: 22px;
        font-size: 15px;
    }
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __reactive_table.css project project-deep-sky
 */

/* DataMaReactiveTable styles */
.datama-reactive-table-container {
    width: 100%;
    height: 100%;
    /* Enable horizontal scrolling */
    overflow-x: auto !important; /* Force horizontal scrolling */
    /* Prevent content from being cut off */
    overflow-y: auto;
    font-family: var(--datama-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--datama-text-color, #333);
    background-color: var(--datama-background-color, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 0;
    /*border-left: var(--border);*/
    border-right: var(--border);
    border-bottom: var(--border);
    /* Remove top border from container */
    border-top: none;
    /* Improve scrollbar appearance */
    scrollbar-width: thin;
    scrollbar-color: var(--datama-border-color, #e0e0e0) transparent;
}

.datama-reactive-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    margin: 0;
    /* Use fixed layout to ensure columns maintain their width */
    table-layout: fixed;
}

/* Header styles */
.datama-reactive-table-header {
    background-color: var(--datama-background-color, #fff);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Add back the top border on the header, match thickness with left border */
.datama-reactive-table-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px; /* Match the 1px thickness of the left border */
    background-color: var(--datama-border-color, #e0e0e0);
    z-index: 11;
}

.datama-reactive-table-header::after {
    content: '';
    position: absolute;
    height: 1px;
    background-color: var(--datama-border-color, #e0e0e0);
    z-index: 11;
    margin-top: auto;
    width: 100%;
}

.datama-reactive-table-header-row {
    height: 48px;
    background: rgba(var(--datama-primary-rgb), .08);
}

/* Cell styles */
.datama-reactive-table-cell {
    padding: 1rem 1.5rem;
    text-align: left;
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
    overflow: visible; /* Allow content to be visible */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break words to prevent overflow */
}

/* Override padding for first column (selected) */
/*.datama-reactive-table-cell:not(.filterable):first-child {*/
/*    padding: 0 !important;*/
/*}*/

/* Allow cells to stretch */
.datama-reactive-table-cell:not(:first-child) {
    width: auto; /* Allow cells to stretch */
}

.datama-reactive-table th.datama-reactive-table-cell {
    font-weight: 500;
    color: var(--datama-primary, #499e95);
    white-space: normal; /* Allow header text to wrap */
    padding: 12px 16px;
    line-height: 24px;
}

/* Override padding for first header cell (selected) */
/*.datama-reactive-table th.datama-reactive-table-cell:not(.filterable):first-child {
    padding: 0 !important;
}*/

/* Header content with sort icon */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-text-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.header-title-row,
.header-subtitle-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.datama-reactive-table-cell.filterable > .header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.datama-reactive-table-cell.filterable > .header-content > .datama-button {
    width: 20px;
    height: 20px;
}
.datama-reactive-table-cell.filterable > .header-content > .datama-button:hover {
    background: rgba(var(--datama-primary-rgb), .2);
    transition: .1s ease-in;
}
.datama-reactive-table-cell.filterable > .header-content > .datama-button .datama-button-icon {
    font-size: 18px;
}
.datama-reactive-table-cell.filterable > .header-content > .header-text {
    width: calc(100% - 48px);
}
.datama-reactive-table-cell.filterable > .header-content > .filter-container {
    width: 100%;
    display: flex;
}
.datama-reactive-table-cell.filterable > .header-content > .filter-container {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
}
.datama-reactive-table-cell.filterable > .header-content > .filter-container input {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
}


.header-content.sortable {
    cursor: pointer;
}

.header-content.sortable:hover {
    color: var(--datama-primary-dark, #3a7e77);
}

.sort-icon {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    position: relative;
    cursor: pointer;
    transition: opacity .12s ease;
}

.sort-icon::before,
.sort-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.3;
    transition: opacity .12s ease;
}

.sort-icon::before {
    top: 0;
    border-bottom: 4px solid currentColor;
    transform: translateX(-50%);
}

.sort-icon::after {
    bottom: 0;
    border-top: 4px solid currentColor;
    transform: translateX(-50%);
}

.sort-icon.sort-asc::before,
.sort-icon.asc::before {
    opacity: 1;
}

.sort-icon.sort-desc::after,
.sort-icon.desc::after {
    opacity: 1;
}

/* Hover: darken both arrows for feedback */
.sort-icon:hover::before,
.sort-icon:hover::after {
    opacity: 0.6;
}
/* Keep active arrow fully opaque even on hover */
.sort-icon.asc:hover::before { opacity: 1; }
.sort-icon.desc:hover::after { opacity: 1; }

/* Reveal header controls (sort icons and filter toggles) only on header hover */
/* Hide all header controls by default except the active sort icon */
.datama-reactive-table-header.hover-reveal-controls .sort-icon,
.datama-reactive-table-header.hover-reveal-controls .filter-toggle-button {
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s ease;
}
.datama-reactive-table-header.hover-reveal-controls .sort-icon.asc,
.datama-reactive-table-header.hover-reveal-controls .sort-icon.desc {
    opacity: 1;
    visibility: visible;
}
/* Reveal all controls when hovering the header area, header row, or a given column */
.datama-reactive-table-header.hover-reveal-controls:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls:hover .filter-toggle-button,
.datama-reactive-table-header.hover-reveal-controls .datama-reactive-table-header-row:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls .datama-reactive-table-header-row:hover .filter-toggle-button,
.datama-reactive-table-header.hover-reveal-controls th:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls th:hover .filter-toggle-button,
.datama-reactive-table-header.hover-reveal-controls .header-content:hover .sort-icon,
.datama-reactive-table-header.hover-reveal-controls .header-content:hover .filter-toggle-button {
    opacity: 1;
    visibility: visible;
}

/* Filter styles */
.filter-container {
    margin-top: 8px;
}

.filter-input {
    width: 100%;
    padding: 6px 8px;
    border: var(--border);
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}

.filter-input:focus {
    border-color: var(--datama-primary, #499e95);
    box-shadow: 0 0 0 2px rgba(73, 158, 149, 0.2);
}

/* Row styles */
.datama-reactive-table-row {
    border-bottom: 1px solid transparent;
    transition: background-color 0.2s ease;
}

.datama-reactive-table-row.bordered {
    border-bottom: var(--border);
    transition: background-color 0.2s ease;
}

.datama-reactive-table-row.striped {
    background-color: var(--datama-stripe-color, rgba(0, 0, 0, 0.02));
}

.datama-reactive-table-row.hoverable:hover {
    background-color: var(--datama-hover-color, rgba(73, 158, 149, 0.1));
}

.datama-reactive-table-row.clickable {
    cursor: pointer;
}

/* Cell alignment */
.datama-reactive-table-cell.align-left {
    text-align: left;
}

.datama-reactive-table-cell.align-center,
.datama-reactive-table-cell.text-center {
    text-align: center;
}

.datama-reactive-table-cell.align-right {
    text-align: right;
}

/* Checkbox styles */
.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.checkbox-container.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reactive-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 2px solid var(--datama-border-color, #e0e0e0);
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.reactive-checkbox:checked {
    background-color: var(--datama-primary, #499e95);
    border-color: var(--datama-primary, #499e95);
}

.reactive-checkbox:checked::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    top: -1px;
    left: 3px;
}

.reactive-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(73, 158, 149, 0.2);
}

.checkbox-label {
    margin-left: 8px;
    font-size: 14px;
}

/* Bordered table */
.datama-reactive-table.bordered {
    border: var(--border);
}

.datama-reactive-table.bordered .datama-reactive-table-cell {
    border-right: var(--border);
}

.datama-reactive-table.bordered .datama-reactive-table-cell:last-child {
    border-right: none;
}

/* Vertical separators */
.datama-reactive-table.vertical-separators .datama-reactive-table-cell {
    border-right: var(--border);
}

.datama-reactive-table.vertical-separators .datama-reactive-table-cell:last-child {
    border-right: none;
}

.datama-reactive-table.no-vertical-separators .datama-reactive-table-cell {
    border-right: none;
}

/* Horizontal separators */
.datama-reactive-table.horizontal-separators tbody > tr:not(:last-child) > .datama-reactive-table-cell {
    border-bottom: var(--border);
}

.datama-reactive-table.horizontal-separators tbody > tr:not(:last-child) > .datama-reactive-table-cell:last-child {
    border-bottom: none;
}

.datama-reactive-table.no-horizontal-separators tbody > tr:not(:last-child) > .datama-reactive-table-cell {
    border-bottom: none;
}

/* Compact table */
.datama-reactive-table.compact .datama-reactive-table-cell {
    padding: 8px 12px;
}

.datama-reactive-table.compact .datama-reactive-table-header-row {
    height: 40px;
}

/* Pagination styles */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-top: var(--border);
}

.pagination-button {
    background-color: transparent;
    border: var(--border);
    border-radius: 4px;
    padding: 6px 12px;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-button[disabled="false"]:hover {
    background-color: var(--datama-primary, #499e95);
    color: white;
    border-color: var(--datama-primary, #499e95);
}

.pagination-button[disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-indicator {
    margin: 0 12px;
    font-size: 14px;
}

/* Empty state */
.empty-state {
    padding: 32px;
    text-align: center;
    color: var(--datama-text-muted, #999);
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .datama-reactive-table-cell {
        padding: 8px 12px;
    }
    
    .datama-reactive-table th.datama-reactive-table-cell {
        font-size: 13px;
    }
    
    .datama-reactive-table td.datama-reactive-table-cell {
        font-size: 13px;
    }
}

/* Interest bar styles (similar to the existing interest bars) */
.interest-bar-container {
    width: 100%;
    height: 4px;
    background-color: var(--datama-border-color, #e0e0e0);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.interest-bar {
    height: 100%;
    background-color: var(--datama-primary, #499e95);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Add a class for the anomaly count title to display on two lines */
.anomaly-count-header .header-text {
    white-space: pre-line;
}

/* Allow text wrapping in specific cells if needed */
.datama-reactive-table-cell.wrap-text {
    white-space: normal;
}

/* Checkbox column specific styling */
.datama-reactive-table-cell.align-center .checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Ensure the checkbox column is not too wide */
.datama-reactive-table-cell[id^="header-selected"] {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Style for checkbox cells to ensure they're properly centered */
td.datama-reactive-table-cell[id^="cell-selected"] {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Make the checkbox container compact */
td.datama-reactive-table-cell[id^="cell-selected"] .checkbox-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make the checkbox itself compact */
td.datama-reactive-table-cell[id^="cell-selected"] .reactive-checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

/* Make interest score column wider but allow stretching */
.datama-reactive-table-cell[id^="header-interestScore"] {
    min-width: 220px !important; /* Minimum width */
    white-space: nowrap !important;
}

/* Style for interest score cells - prevent wrapping but allow stretching */
td.datama-reactive-table-cell[id^="cell-interestScore"] {
    min-width: 220px !important; /* Minimum width */
}

/* Prevent text wrapping in specific cells */
.datama-reactive-table-cell.nowrap-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
} 
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __sections.css project project-deep-sky
 */

.datama-section {
    padding: 40px;
    width: 100%;
}
.datama-section-medium {
    padding: 40px 16.67%;
}
.datama-section > h3 {
    font-size: 26px;
    letter-spacing: 1px;
}
.datama-section.bg-gradient {
    background: linear-gradient(to bottom, rgba(var(--datama-primary-light-rgb), .75) 0% , var(--color-white) 40%);
}
.datama-section.bg-gradient-reverse {
    background: linear-gradient(to top, rgba(var(--datama-primary-light-rgb), .75) 0% , var(--color-white) 40%);
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __start_end.css project project-deep-sky
 */

.datama-start-end .datama-input-label {
    font-weight: 400 !important;
}
.datama-start-end .datama-input {
    background: transparent;
    border: none;
    font-weight: 600;
    border-bottom: var(--border-dark);
    border-radius: var(--border-square);
    width: fit-content !important;
    padding-bottom: 5px !important;
    min-width: unset !important;
}
.datama-start-end .datama-start-end-metrics .datama-input {
    width: auto !important;
}
/* Fix date input sizing and layout */
.datama-start-end .datama-input.datama-input-date {
    padding: 5px 8px;
    min-width: 140px !important; /* Increase to accommodate calendar icon */
    width: 160px !important; /* Set comfortable width for dates + icon */
    max-width: 180px !important; /* Allow for longer dates */
    flex: 1; /* Allow to grow in flex container */
}

.datama-start-end .datama-input.datama-input-date + .datama-input-date {
    padding: 5px 8px;
    margin-right: 0;
    margin-left: 12px; /* Increase spacing for better separation */
    min-width: 140px !important;
    width: 160px !important;
    max-width: 180px !important;
    flex: 1;
}

.datama-start-end .datama-input.datama-input-date + .datama-input-date::before {
    content: " - ";
    position: absolute;
    transform: translateX(-100%);
    margin-left: -16px; /* Adjust positioning to prevent overlap */
    margin-right: 0;
    width: auto;
    font-weight: normal;
    color: rgba(var(--color-dark-rgb), 0.6);
}

/* Create proper flex container for date inputs */
.datama-start-end .datama-start-end-container > div:has(.datama-input-date) {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0 !important; /* Remove margin-bottom from date input containers */
}

/* Remove margin-bottom specifically from date input lines in StartEnd component */
.datama-start-end .datama-start-end-container > .datama-start-end-container.mb-2 {
    margin-bottom: 0 !important;
}
/* Fix main container layout - remove RTL direction chaos */
.datama-start-end .datama-start-end-content > .datama-start-end-container {
    display: flex;
    flex-direction: column;
    /* Remove gap to tighten spacing between lines */
    /* Remove problematic RTL direction */
    direction: ltr;
    padding: 12px;
    margin-right: 8px; /* Reduce excessive right margin */
}

.datama-start-end .datama-start-end-content > * {
    border: 1px solid transparent !important;
    border-radius: var(--border-radius) !important;
    transition: .1s ease-out;
}

.datama-start-end .datama-start-end-content > *:hover {
    border: var(--border) !important;
    transition: .2s ease-in;
}

/* Fix individual elements layout */
.datama-start-end .datama-start-end-content > .datama-start-end-container > *:not(button) {
    width: 100%;
    direction: ltr; /* Ensure consistent text direction */
}

/* Fix VS label positioning */
.datama-start-end .datama-start-end-content > .datama-start-end-container > label {
    width: fit-content;
    /* Remove float: right to prevent layout issues */
    align-self: center;
    text-align: center;
    margin: 0; /* Remove all margins */
}

/* Fix button positioning */
.datama-start-end .datama-start-end-content> .datama-start-end-container button {
    /* Remove float: right */
    align-self: flex-end;
    margin: 0; /* Remove all margins */
}

/* Remove margins from arrow button specifically in VS container */
.datama-start-end .datama-start-end-content > .datama-start-end-container > div[id*="-vs-container"] button:not(.ml-0) {
    margin: 0 !important; /* Remove all margins including inherited ones */
}

/* Fix VS container layout - VS on left, arrow button on right */
.datama-start-end .datama-start-end-content > .datama-start-end-container > div[id*="-vs-container"] {
    display: flex;
    align-items: center;
    justify-content: space-between; /* VS on left, button on right */
    flex-direction: row !important; /* Ensure horizontal layout */
    width: 100%; /* Ensure full width for proper space-between */
    /* Remove order property to keep natural position between end and start inputs */
}

/* Improve responsive layout for the entire content */
.datama-start-end .datama-start-end-content {
    gap: 12px; /* Add gap between comparison containers */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center !important;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __steps.css project project-deep-sky
 */

.datama-license-manager .datama-steps {
    display: flex;
    flex-direction: column;
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets {
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-bottom: 2rem;
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullet {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    line-height: 32px;
    background: rgb(var(--datama-primary-rgb), 1);
    color: rgb(var(--color-light-rgb));
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullets-link {
    position: relative;
    flex: 1;
    margin: 0 20px;
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullets-link:not(.datama-steps-bullets-link-half)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 1px;
    background: rgba(var(--color-dark-rgb), .1);
}
.datama-license-manager .datama-steps > .datama-steps-header > .datama-steps-bullets > .datama-steps-bullets-link.datama-steps-bullets-link-half {
    flex: .5;
}
.datama-license-manager .datama-steps > .datama-steps-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.datama-license-manager .datama-steps > .datama-steps-content > .datama-step {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.datama-license-manager .datama-steps > .datama-steps-content > .datama-step > .datama-step-header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 1rem;
}
.datama-license-manager .datama-steps > .datama-steps-content > .datama-step > .datama-step-content {
    font-size: 12px;
    line-height: 20px;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2024 DATAMA SAS, All rights reserved.
 * Generated for file : __table.css project project-deep-sky
 */

.datama-table-container {
    margin: 0 auto 1rem auto;
    width: 100%;
}
.datama-table-container + .datama-table-container {
    margin-top: -1rem;
}
.datama-table-container > .datama-table {
    min-width: 100%;
}
.datama-table-container > .datama-table.datama-table-full {
    width: 100%;
}
.datama-table {
    border-collapse: collapse;
    table-layout:fixed;
}
.datama-table > .datama-table-thead > .datama-table-row > .datama-table-th {
    border-bottom: var(--border);
}
.datama-table > .datama-table-tfoot > .datama-table-row > .datama-table-th {
    border-top: var(--border);
    padding: 0 20px;
}
.datama-table .datama-input {
    width: 100% !important;

}
.datama-table > .datama-table-tbody > .datama-table-row:nth-child(2n) {
    background: rgba(var(--color-dark-rgb), 0.025);
    transition: var(--transition-out);
}
.datama-table > .datama-table-tbody > .datama-table-row:hover {
    background: rgba(var(--color-dark-rgb), 0.05);
    transition: var(--transition-in);
}
.datama-table > .datama-table-tbody > .datama-table-row .datama-table-td,
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th {
    vertical-align: middle;
    text-align: left;
    border-collapse: collapse;
    padding: 5px 20px;
}
.datama-table > .datama-table-tbody > .datama-table-row .datama-table-td.text-center .datama-icon,
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th.text-center .datama-icon {
    margin: 0 auto;
}

.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub {
    line-height: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    font-size: .7rem;
    font-weight: 500;
}
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub > div {
    line-height: initial !important;
    min-height: initial !important;
    height: initial !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 5px 0;
}
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub > div > span {
    line-height: 10px !important;
    min-height: 10px !important;
    height: 10px !important;
    font-size: 10px;
}
.datama-table > .datama-table-thead > .datama-table-row .datama-table-th .datama-table-sub > div > span.datama-icon {
    font-size: 14px !important;
}

.datama-table > .datama-table-tbody > .datama-table-row > .datama-table-td *:not(.datama-input-select-dropdown):not(.datama-divider):not(svg):not(.datama-input-switch),
.datama-table > .datama-table-tfoot > .datama-table-row > .datama-table-th *:not(.datama-input-select-dropdown):not(.datama-divider):not(svg):not(.datama-input-switch),
.datama-table > .datama-table-thead > .datama-table-row > .datama-table-th *:not(.datama-input-select-dropdown):not(.datama-divider):not(svg):not(.datama-input-switch) {
    min-height: 26px;
    line-height: 26px;
    height: 26px;
}

.datama-table .datama-table-row.small * {
    line-height: 1rem !important;
    height: unset !important;
    font-size: 0.75rem;
    min-height: 1rem !important;
}
/* RESPONSIVE */
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .datama-table .datama-input:not(.datama-input-switch) {
        min-width: 75px !important;
    }
    .datama-table > .datama-table-tbody > .datama-table-row .datama-table-td,
    .datama-table > .datama-table-thead > .datama-table-row .datama-table-th {
        padding: 5px 10px;
    }
    .datama-table .datama-button {
        padding: 0 10px !important;
    }
}
@media screen and (max-width: 1199px) {
    .datama-table .datama-table-sub .datama-table-div-text {
        display: none !important;
    }
}
@media screen and (min-width: 1200px) {
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __tabs.css project project-deep-sky
 */

.datama-tabs-container {
    display: grid;
    overflow: auto;
}
.datama-tabs-container.horizontal {
    /*justify-content: flex-start;*/
    /*flex-wrap: nowrap;*/
    grid-template-areas: "menu contents";
    grid-template-columns: fit-content(300px) 1fr;
    grid-template-rows: 1fr;
}
.datama-tabs-container.vertical {
    grid-template-areas: "menu" "contents";
    grid-template-rows: fit-content(60px) 1fr;
    grid-template-columns: 1fr;
    /*flex-direction: column;*/
    /*justify-content: flex-start;*/
}
.datama-tabs-container > .datama-tabs {
    margin: 0;
    padding: 5px 0 0 0;
    list-style: none;
    text-align: left;
    border-right: var(--border);
}
.datama-tabs-container.vertical > .datama-tabs {
    display: flex;
    justify-content: right;
}
.datama-tabs-container.vertical.center > .datama-tabs {
    justify-content: center;
}
.datama-tabs-container.vertical.right > .datama-tabs {
    justify-content: flex-end;
}
.datama-tabs-container.vertical.left > .datama-tabs {
    justify-content: flex-start;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item {
    padding: 5px 10px;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
    display: grid;
    grid-template-areas: "icon text documentation";
    grid-template-columns: 30px 0 0;
    grid-template-rows: 1fr;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
    text-align: center;
    grid-area: icon;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon > span.datama-icon{
    display: inline-block;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation {
    text-align: left;
    grid-area: documentation;
    opacity: 0;
    transition: .2s ease-out;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item:hover > .datama-button > .datama-documentation {
    transition: .1s ease-in;
    opacity: 1;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
    text-align: left;
    grid-area: text;
    width: 100%;
    padding: 0 5px;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button {
    background: transparent;
    border: none;
    font-size: 16px;
    line-height: 1rem;
    font-weight: 500;
    padding: 0;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active > span,
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active path {
    color: var(--color-primary);
    fill: var(--color-primary);
}
.datama-tabs-container > .datama-tabs-content {
    max-height: 100%;
    overflow-y: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab {
    position: relative;
    height: 100%;
    padding: 5px 20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer > .datama-tab-content {
    height: calc(100% - 82px - 1rem);
    overflow: auto;
    margin-right: -20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-header > .datama-tab-content {
    height: calc(100% - 70px - 1rem);
    overflow: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer.datama-tab-has-header > .datama-tab-content {
    height: calc(100% - 128px - 1rem);
    overflow: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 1rem;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header > .datama-tab-icon {
    margin-left: 0;
    margin-right: 0;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header > .datama-tab-title {
    margin-left: 0;
    margin-right: auto;
    font-weight: 600;
    margin-bottom: 0;
}
.datama-tab-subtitle {
    color: var(--color-primary);
    font-size: 0.75rem; 
    margin-bottom: 0;
    margin-top: 0.25rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.waterfall-font-category {
    color: var(--color-primary);
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0.5rem 0 1rem 0;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;

}

.waterfall-font-category::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 80%;
    transform: translateX(-50%);
    width: 150px;
    height: 1px;
    background-color: var(--color-primary);
    opacity: 0.6;

}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button {
    border: 0;
    font-size: 20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button,
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button path {
    color: var(--color-primary);
    fill: var(--color-primary);
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    background: var(--color-white);
    border-top: var(--border);
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-footer button {
    font-size: 16px;
}
.datama-tabs-item .datama-documentation {
    padding: 2px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: 0.2s ease-out;
    background: transparent;
    border: none;
}
.datama-tabs-item .datama-documentation path {
    fill: rgba(var(--color-dark-rgb), 1);
}
.datama-tabs-item .datama-documentation:hover path {
    fill: rgba(var(--datama-primary-rgb), 1);
    transition: 0.1s ease-in;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
    margin: 0;
}
/* RESPONSIVE */
@media screen and (max-width: 767px) {
    .datama-tabs-container > .datama-tabs {
        width: 40px;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
        grid-area: icon;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
        display: none;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 0 10px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .datama-tabs-container > .datama-tabs {
        width: 40px;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item {
        padding: .5rem 0 ;
        display: flex;
        justify-content: center;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
        display: flex;
        justify-content: center;
        grid-template-areas: none;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
        display: none;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 0 10px;
    }
}
@media screen and (min-width: 1200px) {
    .datama-tabs-container > .datama-tabs > .datama-tabs-item .datama-button {
        grid-template-columns: 30px 1fr 20px;
        width: 100%;
        text-align: left;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 5px 20px;
    }
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __waterfall.css project project-deep-sky
 */


#datama-testing-text {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

div[data-app="true"] .no-click,
div[data-app="true"] .no-click * {
    pointer-events: none !important;
}
div[data-app="true"] .cursor-wait {
    cursor: wait !important;
}
div[data-app="true"] .no-data {
    cursor: not-allowed !important;
}
div[data-app="true"] .datama-waterfall-context-menu, div[data-app="true"] .datama-context-menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: white;
    width: fit-content;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 14px;
    line-height: 30px;
    z-index: 999;
}
div[data-app="true"] .datama-waterfall-context-menu.show, div[data-app="true"] .datama-context-menu.show {
    visibility: visible;
    opacity: 1;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider, div[data-app="true"] .datama-context-menu .datama-context-menu-divider {
    width: 100%;
    position: relative;
    padding: 5px 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider:hover, div[data-app="true"] .datama-context-menu .datama-context-menu-divider:hover {
    background: transparent !important;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider > span, div[data-app="true"] .datama-context-menu .datama-context-menu-divider > span {
    font-size: 10px;
    line-height: 10px;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-divider + .datama-context-menu-divider, div[data-app="true"] .datama-context-menu .datama-context-menu-divider + .datama-context-menu-divider {
    display: none;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-icon, div[data-app="true"] .datama-context-menu .datama-context-menu-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    transform: translateY(-50%);
}
div[data-app="true"] .datama-waterfall-context-menu li, div[data-app="true"] .datama-context-menu li {
    display: flex;
    position: relative;
    width: 100%;
    transition: 0.2s ease-out;
}
div[data-app="true"] .datama-waterfall-context-menu li.figured li, div[data-app="true"] .datama-context-menu li.figured li {
    padding-right: 150px;
}
div[data-app="true"] .datama-waterfall-context-menu li.figured li.disabled *, div[data-app="true"] .datama-context-menu li.figured li.disabled * {
    pointer-events: none !important;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul, div[data-app="true"] .datama-context-menu li > ul {
    border: 1px solid rgba(0, 0, 0, 0.1);
    list-style: none;
    position: absolute;
    padding: 0;
    left: 100%;
    top: 0;
    display: none;
    flex-wrap: wrap;
    width: fit-content;
    background-color: white;
    margin: 0;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul.scrollable, div[data-app="true"] .datama-context-menu li > ul.scrollable {
    max-height: 240px;
    overflow-y: auto;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:not(:hover) .selected .bar, div[data-app="true"] .datama-context-menu li > ul:not(:hover) .selected .bar {
    margin-top: 5px;
    transition: var(--transition-in);
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:not(:hover) .selected .datama-label, div[data-app="true"] .datama-context-menu li > ul:not(:hover) .selected .datama-label {
    opacity: 1;
    transition: var(--transition-in);
    bottom: 5px;
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:hover > li:hover .figure .bar, div[data-app="true"] .datama-context-menu li > ul:hover > li:hover .figure .bar {
    margin-top: 5px;
    transition: var(--transition-in);
}
div[data-app="true"] .datama-waterfall-context-menu li > ul:hover > li:hover .figure .datama-label, div[data-app="true"] .datama-context-menu li > ul:hover > li:hover .figure .datama-label {
    opacity: 1;
    transition: var(--transition-in);
    bottom: 5px;
}
div[data-app="true"] .datama-waterfall-context-menu li > a, div[data-app="true"] .datama-context-menu li > a {
    display: inline;
    white-space: nowrap;
    padding: 0 20px 0 30px;
    color: black;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    text-rendering: geometricprecision;
}
div[data-app="true"] .datama-waterfall-context-menu li > a.icon, div[data-app="true"] .datama-context-menu li > a.icon {
    position: relative;
}
div[data-app="true"] .datama-waterfall-context-menu li > a.sub::after, div[data-app="true"] .datama-context-menu li > a.sub::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    border-left: 3px solid rgba(0, 0, 0, 0.5);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}
div[data-app="true"] .datama-waterfall-context-menu li:hover, div[data-app="true"] .datama-context-menu li:hover {
    background: rgba(0, 0, 0, 0.05);
    transition: var(--transition-in);
}
div[data-app="true"] .datama-waterfall-context-menu li:hover > ul, div[data-app="true"] .datama-context-menu li:hover > ul {
    display: flex;
}
div[data-app="true"] .datama-waterfall-context-menu li.selected::after, div[data-app="true"] .datama-context-menu li.selected::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    bottom: 3px;
    width: 5px;
    background: rgba(0, 0, 0, 0.1);
}
div[data-app="true"] .datama-waterfall-context-menu.to-right li > ul, div[data-app="true"] .datama-context-menu.to-right li > ul {
    left: 100%;
    right: unset;
}
div[data-app="true"] .datama-waterfall-context-menu.to-left li > ul, div[data-app="true"] .datama-context-menu.to-left li > ul {
    left: unset;
    right: 100%;
}
div[data-app="true"] .datama-waterfall-context-menu.to-top li > ul, div[data-app="true"] .datama-context-menu.to-top li > ul {
    top: unset;
    bottom: 0;
}
div[data-app="true"] .datama-waterfall-context-menu.to-bottom li > ul, div[data-app="true"] .datama-context-menu.to-bottom li > ul {
    top: 0;
    bottom: unset;
}
div[data-app="true"] .datama-waterfall-context-menu.datama-context-menu-show, div[data-app="true"] .datama-context-menu.datama-context-menu-show {
    visibility: visible;
    opacity: 1;
    transition: transform var(--transition-in), opacity 0.15s ease-in;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateX(0) !important;
    display: block;
}
div[data-app="true"] .datama-waterfall-context-menu .figure, div[data-app="true"] .datama-context-menu .figure {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 135px;
    top: 0;
    bottom: 0;
    right: 5px;
    pointer-events: none;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .bar, div[data-app="true"] .datama-context-menu .figure > .bar {
    height: 10px;
    display: block;
    border-radius: 15px;
    margin-top: 10px;
    transition: var(--transition-out);
    order: 1;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .datama-label, div[data-app="true"] .datama-context-menu .figure > .datama-label {
    width: 100%;
    opacity: 0;
    height: 15px;
    font-size: 10px;
    font-weight: 300;
    line-height: 15px;
    transition: var(--transition-out);
    order: 2;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .datama-label > .datama-label-text, div[data-app="true"] .datama-context-menu .figure > .datama-label > .datama-label-text {
    max-width: 70px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
div[data-app="true"] .datama-waterfall-context-menu .figure > .datama-label > .value, div[data-app="true"] .datama-context-menu .figure > .datama-label > .value {
    position: absolute;
    right: 0;
    font-weight: 600;
    max-width: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
div[data-app="true"] .datama-waterfall-context-menu .steps .figure .bar, div[data-app="true"] .datama-context-menu .steps .figure .bar {
    background: rgba(var(--color-secondary-rgb));
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions .figure .bar, div[data-app="true"] .datama-context-menu .dimensions .figure .bar {
    background: rgba(var(--datama-primary-rgb));
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input, div[data-app="true"] .datama-context-menu .datama-context-menu-input {
    display: flex !important;
    flex-wrap: nowrap;
    padding-right: 60px;
    padding-left: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > span, div[data-app="true"] .datama-context-menu .datama-context-menu-input > span {
    line-height: 30px;
    white-space: nowrap;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > input, div[data-app="true"] .datama-context-menu .datama-context-menu-input > input {
    position: absolute;
    right: 5px;
    width: 30px;
    height: 20px;
    margin: 5px 0 0;
    line-height: 30px;
    padding: 0 5px;
    text-align: center;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    min-height: unset;
    font-size: 12px;
    -moz-appearance: textfield;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > input::-webkit-inner-spin-button, div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu-input > input::-webkit-outer-spin-button, div[data-app="true"] .datama-context-menu .datama-context-menu-input > input::-webkit-inner-spin-button, div[data-app="true"] .datama-context-menu .datama-context-menu-input > input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu .dimensions, div[data-app="true"] .datama-waterfall-context-menu .datama-context-menu .steps, div[data-app="true"] .datama-context-menu .datama-context-menu .dimensions, div[data-app="true"] .datama-context-menu .datama-context-menu .steps {
    padding: 0 !important;
    padding-right: 150px !important;
    margin: 0 !important;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a, div[data-app="true"] .datama-waterfall-context-menu .steps > a, div[data-app="true"] .datama-context-menu .dimensions > a, div[data-app="true"] .datama-context-menu .steps > a {
    display: flex !important;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a > .figure-label, div[data-app="true"] .datama-waterfall-context-menu .steps > a > .figure-label, div[data-app="true"] .datama-context-menu .dimensions > a > .figure-label, div[data-app="true"] .datama-context-menu .steps > a > .figure-label {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a > .figure-label > .text, div[data-app="true"] .datama-waterfall-context-menu .steps > a > .figure-label > .text, div[data-app="true"] .datama-context-menu .dimensions > a > .figure-label > .text, div[data-app="true"] .datama-context-menu .steps > a > .figure-label > .text {
    width: 100%;
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions > a > .figure-label > .detailed, div[data-app="true"] .datama-waterfall-context-menu .steps > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .dimensions > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .steps > a > .figure-label > .detailed {
    width: 100%;
    height: 10px;
    line-height: 10px;
    font-size: 10px;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: var(--transition-out);
}
div[data-app="true"] .datama-waterfall-context-menu .dimensions.selected > a > .figure-label > .detailed, div[data-app="true"] .datama-waterfall-context-menu .steps.selected > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .dimensions.selected > a > .figure-label > .detailed, div[data-app="true"] .datama-context-menu .steps.selected > a > .figure-label > .detailed {
    opacity: 1;
    transition: 0.2s ease-int;
}
div[data-app="true"] .datama-waterfall-context-menu ul:hover li:not(:hover) .figure-label .detailed, div[data-app="true"] .datama-context-menu ul:hover li:not(:hover) .figure-label .detailed {
    opacity: 0 !important;
    transition: var(--transition-out);
}
div[data-app="true"] .datama-waterfall-context-menu ul:hover li:hover .figure-label .detailed, div[data-app="true"] .datama-context-menu ul:hover li:hover .figure-label .detailed {
    opacity: 1 !important;
    transition: 0.2s ease-int;
}
div[data-app="true"] .datama-hover {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    z-index: 999;
    pointer-events: none;
    max-width: 400px;
}
div[data-app="true"] .datama-hover > p {
    font-family: "Karla", "Arial";
    margin: 0;
    padding: 0;
}
div[data-app="true"] .datama-hover > header {
    font-size: 12px;
    line-height: 18px;
    display: flex;
    flex-wrap: wrap;
}
div[data-app="true"] .datama-hover > header > div {
    display: flex;
    flex-wrap: wrap;
    width: 25%;
}
div[data-app="true"] .datama-hover > header > div > * {
    width: 100%;
}
div[data-app="true"] .datama-hover > main {
    padding: 0;
}
div[data-app="true"] .datama-hover > main, div[data-app="true"] .datama-hover > main * {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    font-family: "Karla", sans-serif;
    text-align: justify;
}
div[data-app="true"] .datama-hover > main strong, div[data-app="true"] .datama-hover > main b {
    font-weight: 600;
}
div[data-app="true"] .datama-hover.datama-hover-show {
    visibility: visible;
    opacity: 1;
    transition: transform var(--transition-in), opacity 0.15s ease-in;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transform: translateX(0) !important;
}
div[data-app="true"] .datama-hover.datama-hover-left.datama-hover-top {
    box-shadow: -10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(-10px);
}
div[data-app="true"] .datama-hover.datama-hover-left.datama-hover-bottom {
    box-shadow: -10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(-10px);
}
div[data-app="true"] .datama-hover.datama-hover-right.datama-hover-top {
    box-shadow: 10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(10px);
}
div[data-app="true"] .datama-hover.datama-hover-right.datama-hover-bottom {
    box-shadow: 10px 0 15px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(10px);
}
div[data-app="true"] .datama-waterfall-bar {
    transition: var(--transition-out);
}
div[data-app="true"] .datama-waterfall-bar:hover, div[data-app="true"] .datama-waterfall-bar.hover {
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
    stroke-width: 1.5px;
    stroke-opacity: 1;
    transition: 0.2s ease-in;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    /*fill-opacity: 0.75;*/
}
div[data-app="true"] .datama-waterfall-bar[data-depth="0"]:not(div[data-app="true"] .datama-waterfall-bar[data-expanded=true]), div[data-app="true"] .datama-waterfall-bar[data-depth="1"]:not(div[data-app="true"] .datama-waterfall-bar[data-expanded=true]) {
    cursor: zoom-in;
}
div[data-app="true"] .datama-waterfall-bar.has-children, div[data-app="true"] .datama-waterfall-bar[data-type=net], div[data-app="true"] .datama-waterfall-bar[data-depth="2"] {
    cursor: zoom-out;
}
div[data-app="true"] .datama-waterfall-bar[data-type=net] {
    cursor: zoom-out !important;
}
div[data-app="true"] .datama-waterfall-annotations {
    transition: 0.2s ease-in;
}

.datama-waterfall-with-shortcut {
    box-sizing: content-box;
    padding-top: 40px;
}
div[data-app="true"] .datama-shortcut {
    height: 40px;
    margin: -40px 0 0;
    padding: 0 20px;
    line-height: 40px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    list-style: none;
}
div[data-app="true"] .datama-shortcut .datama-shortcut-item {
    background: transparent;
    border: none;
    font-size: 16px;
    display: flex;
    justify-content: center;
    justify-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
}
div[data-app="true"] .datama-shortcut .datama-shortcut-item.active,
div[data-app="true"] .datama-shortcut .datama-shortcut-item.active * {
    color: #149588;
    fill: #149588;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : footer.css project project-deep-sky
 */
.datama-official-footer-link {
    text-decoration: unset;
}
div[data-app="true"] .datama-light-footer {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 0 10px !important;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-x: hidden;
}
div[data-app="true"] .datama-light-footer:empty {
    display: none;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    height: 40px;
    line-height: 20px;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
    align-self: center;
    margin-right: auto;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
    white-space: nowrap;
    align-self: center;
    text-decoration: none;
}
@media screen and (max-width: 400px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 5px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .65rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: .70rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
@media screen  and (min-width: 401px) and (max-width: 600px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 5px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .65rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: .70rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 800px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 10px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .75rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: 1rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : header.css project project-deep-sky
 */

.datama-light-header {
    height: 40px;
    display: flex;
    justify-content: flex-end;
    border-bottom: var(--border);
}
.datama-light-header .datama-header-logo {
    cursor: pointer;
    font-size: 20px;
    line-height: 20px;
    position: relative;
    /*border-right: var(--border);*/
}
.datama-light-header .datama-header-logo + button {
    border-left: unset !important;
}

.datama-light-header .datama-header-logo .datama-image {
    padding: 0 10px;
    margin-top: 7px;
    height: 26px;
    width: auto;
}

.datama-light-header button, .datama-light-header a {
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 40px;
    font-size: 20px !important;
    text-transform: capitalize;
    white-space: nowrap;
    transition: var(--transition-out);
    border-radius: 0;
}
.datama-light-header button:hover,
.datama-light-header a:hover,
.datama-light-header .datama-header-logo:hover {
    background: var(--hover);
    transition: var(--transition-in);
}
.datama-light-header button > span.datama-button-text {
    align-self: center;
    margin-left: 5px;
    font-size: 16px;
}

/* Badge styles for logo */
.datama-header-logo-badge {
    position: absolute;
    bottom: 6px;
    right: 0px;
    background: var(--accent, #00484A);
    color: white;
    border-radius: 12px;
    min-width: 12px;
    height: 12px;
    padding: 0 4px;
    font-size: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 2px solid var(--background, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.datama-header-logo-badge.pulse {
    animation: datama-badge-pulse 2s infinite;
}

@keyframes datama-badge-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : modules.css project project-deep-sky
 */

.datama-light-header + .datama-light-modules {
    height: calc(100% - 72px);
}
.datama-module {
    position: relative;
}
.datama-light-modules {
    position: relative;
    width: 100%;
    height: calc(100vh - 2px);
    padding: 0 10px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
.datama-light:not(.configurable) .datama-module {
    min-height: calc(100vh - 12px);
    max-height: calc(100vh - 12px);
}
.datama-light:not(.configurable).demo .datama-module {
    min-height: 100vh;
    max-height: 100vh;
}
.datama-light:not(.configurable) .datama-module.ha-75 {
    min-height: calc(75vh - 2px) !important;
    max-height: calc(75vh - 2px) !important;
}
.datama-light:not(.configurable).demo .datama-module.ha-75 {
    min-height: calc(75vh - 40px) !important;
    max-height: calc(75vh - 40px) !important;
}
.datama-light.configurable .datama-module.ha-75 {
    min-height: calc(75vh - 72px) !important;
    max-height: calc(75vh - 72px) !important;
}
#qv-page-container .datama-light-modules {
    position: relative;
    width: 100%;
    height: calc(100% - 2px);
    padding: 0 10px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
#qv-page-container .datama-light:not(.configurable) .datama-module {
    min-height: calc(100vh - 2px);
    max-height: calc(100vh - 2px);
}
.datama-light:not(.configurable).demo .datama-module {
    min-height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
}
.datama-light.configurable .datama-module {
    min-height: calc(100vh - 82px);
    max-height: calc(100vh - 82px);
}
.datama-light:not(.configurable) .datama-module.ha-75 {
    min-height: calc(75% - 2px) !important;
    max-height: calc(75% - 2px) !important;
}
.datama-light:not(.configurable).demo .datama-module.ha-75 {
    min-height: calc(75% - 40px) !important;
    max-height: calc(75% - 40px) !important;
}
.datama-light.configurable .datama-module.ha-75 {
    min-height: calc(75% - 72px) !important;
    max-height: calc(75% - 72px) !important;
}
.datama-light .datama-module > .datama-section {
    margin: -40px -10px 0;
    width: calc(100% + 20px);
}
.datama-light .datama-module > .datama-section.h-100 {
    height: calc(100% + 40px);
}
.datama-light .datama-module > svg {
    margin-top: 40px;
}
.datama-light-modules .datama-slide-actions {
    padding: 5px 0;
}
.datama-light-modules .datama-slide-actions > button > * {
    line-height: 18px;
    font-size: 18px;
}
.datama-light-modules .datama-slide-actions > span {
    height: 10px !important;
    margin: 5px 5px !important;
}
.datama-light-modules .datama-slide-actions > button {
    width: 30px;
    height: 30px;
    font-weight: 600;
}
.datama-light-modules .datama-slide-actions > button path,
.datama-light-modules .datama-slide-actions > button * {
    fill: rgb(var(--color-dark-rgb));
    color: rgba(var(--color-dark-rgb), .75);
    fill-opacity: .75;
}
.datama-light-modules .datama-slide-actions > button path:hover,
.datama-light-modules .datama-slide-actions > button:hover * {
    fill-opacity: 1;
    color: rgba(var(--color-dark-rgb), 1);
}
.datama-light-modules .datama-slide-actions > button.active *,
.datama-light-modules .datama-slide-actions > button.active path {
    color: rgba(var(--datama-primary-rgb), 1);
    fill: rgb(var(--datama-primary-rgb));
}
.demo .datama-module:not(.global)::after {
    content:  "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAA4CAYAAADkQPSjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAxLSURBVHgB7Z1dcts4EoAbtCe1b6s9wTAnGM0JRj5BkhPYedvamrGVE0Q+gWVnaytvkU8Q5wRWThDNCcKcYDVvM45FTHcD1C9/0CQoUTK/KscxRYEAiG78dTdU2O93YQYX4AMF3/Cf/0Ogf8e/JtFwOIUDJDzva+ebYziJ/jscQ0tLCsf400HBOQNvaGp0TPhbfwxKjeBBf47eDyNoaWlZIYA6UdBDgRzBM7jHXuMtPEWO4SBHAS1+qFcAF4T4M0Ah/Br+ux/C0yKClpYMtiWACSH3hk9FCNXhzoNb/LBtASRICD/i4k8HDp8JtLTksAsBJLq4UNOHQ2cGt9DSksOuBJC4OOheUMO43X5oKWKXAtg54F5wCt/hNbS0FLBLASRO4fCYwiNuvrf7ni0O7FoAw4NaEcVhJzzAz9H/hu3iS4sTxyBlzbSKBegYVzYDtqaR92g/0GY9jMADdk65Mq/EbYAI6oYET6lR9O5qZ4suaWVHpk3bBsF8hmD2hQnKXyVl5Tu9Es9eRlzfChPpoVDdO38jx7Yx/K1/hntfH0DGZXQzHEAJbN5/QQHo4XO7sNkAEyZ4T4RCcicxi2PrHT1/uQtWTfc+4z1foQzfsewlh6r88mP1ArROyh5m3DrF/E1s2T9Jn8eCPYOrwhuVGkc36QrIvqeXYBT05jvScAdHcIuN9w7c8lSUnlGIN/4UItdDrE6xvrvGwquovuF37JRGRQrBqwByRs/7Q/zlbtytMZPvhqIFCyvo9IwulAGf6dL48Tn3trLroYShNr+vGbwtnS/Hsi89DwXdScF8QkX6cuP7F/0rfKbbYptD3kTpkRXSQ7X5eOX6ZksoNchSBv7ngDE4abE5Cv7lemv4n34XBfyL7WXLCZ955hk8g6/7ZJ9KgsAKgZRlFaVQX9l/Wr/A+dWClW6Tt/u07Sm6xu9ei1bOS1te8fNI2KvWN/eUeoR18SEtH94F0Gp093Gwhn+63BaevznFuSb11OUFb5PBPgghKR5sCF8898YDahTgj3BZcLjxlstviD3Ox42rGug9lXn3YZZQZ37B9Pr3QmHPJ1Eua0JY1ypoBB5h4SOviuw5XhUaLYQsfEbx+C87NgrfQsj/0BShSuNFwTXv3CZaNT3Kl+Oe81z4/Cr6RT7WlEE9Aqj9ueCYlSYWvjoZhL/iWL9hcNmPuTeoz2LICKEfTT+zjVZBdYWm9CJPPtJztbyKub5DqI/Q9ubMrvcBi5EsEFXBz0v2SwwDqLcxGLDsXswCFQ9De+Ajzxq6pBS9pUdKbAYv826wI6E6er5VsDdPFH6jBZCHHttogAQNexrUC9qGty1LIT9mgRp+tNsDfggwLZ/pAW5ZZWD39M5gW1iF3+wecNu9UtAg21RfcXpc0dmN0xladNGbq6GlobR8ppe3KDTL3dvzDyl8HHU0VgA9Dj0kVG+EHmBtrLxq/mJsg4BqhNYowA+UlvI6JAwzy6i2rPAIHBLLTdG2RSxewp7ShidZe/Bf5czjOhQlbm69MIM3mMbmCwsk81LVh5ijxG1ynOGw+4iNTqYaadHrGr93h/U2LW0aaOZII6hGx+bnFvMyhmRLyuSHFFwI7izX/fVqegp7Rl6oCUHCn/P8zbErnzJBV1hP5O/5iCv+1EaOWFm8FeUHlUtzBZCGREpwPxlBv7+Klq7Q/8c4sabf7kNZs5LHgpFlVI1pgjMofGK/wECofGJ4tfaMCKjsHJVOYBqoPI04yBtks+7GtqF/Aemq7mOqgTul98ku0oXgyjHfG62lL1V4l9H1hvnkBPMzFpYvbO4cUAleEmqjTHOjAIYgMQxQWx/2biKZ9+Q4/kbvhiO2i3RP60eoCr2LDMVlDeOvQUJRelqYXhqBqPebZtku2/JJ7E9/avIijHulBOou6yO2Ttd7FptFpnw+F3z+DdzTcjYLzKQoDEcgHOLmvFvmSGj6mI57fRe1JVlba+4ijIjv+o/czyWN0EcvUB1Jg4gK7ij6fDktJ7PAXB7znyd2D9P6m9f00pEMiaPcT49EVmCd5s4BafECNGnkjm0Yobk8HyKGcKjEvPhj3KtWy574/IXwVPhzC4GNY+yVAys4RgGbet5CfTdWAKObq8KxPS8p06rWPw4r+jTO6WhYVTi0YsPeAyv7LrBz6HHRfXXUd4N7wGKs93Fqhdj9nh7ECjWabsT+nm+yFp5s2btYdlqqfwEtXiiob3KQ/gVm7CDtzF4LYII1I+ry3iENIcjiIU7G9RoOmUXZUdEk3vFxMmQ67LLvghXllnjHL9e3ZOsM9lQAl8IxvLQNbjGJFlbAvrEUGqG3oWgOvOy7YD6SmsGLqsKWxl4J4Dw8AFvJPK0G95TLvgus0UAff0zcmZrqey8EkJ1Sj+CKG98Ta3jcEGbw4SmWfRdwj6dZ0fVhCzReAMPzNxeo8QdQp1NqQ7EBsz6KNuZbSrPkDR/Clmi2PyA7SGoyJXt6wvdr/6VtDK3wbYFdCB/RXHckGnYCe4RXhbYpItgjuDEE4viqaWRu07Ss4Uf4xG2tuT3gcUpkrGKmHOTVuK68ggd4Ht0MyZrmM+wTJhCutOebWsPra/z9eqns1Y2VDxwbiiIEGSRsZPdp6ps8Nqi+A9mhPI2cA4pDUVjfrEM4Dmwp6rMbJHQaLtuj0MphtnVEoSgivP81+XL6CPtfjwBWXzSQOJKm+WatYjbn9wNJYyBXnZvCqOLtHDIPckJ2d0Ej51vq6bwN6+sagkr8q1ZgjeQe0HXqdK7ELlcRf1BSDwN3s7m/4LLwnmZ4dzQZgameGhT2ejNZ2/cugLx6J0HBuiuRewEcfK/mplq74lGLQu+D+9A7KjzbwsSW6UFLNhIH7CAjtMgqIttb/z1g4HCSzirRyl8SDRI49Gyxl5XUdSQe9u7leSbqqV3KfgrtELQIb8rZHhrUk3zHmwDawyxo6TyUfG/DoVSJnFG7eQdv2NWtOmJrSgTQfUg5kwUsyotjass+gJZMUs73y0dntyUevShx51NiEeYITvHl9paudDiGSZx7Pl82VcNFmFj7r3FsPqY/59bqMw7E1IN6cBdAUhIoDDhXLZ6vSQngY3j+pr989NXcZhTaoad3KKL1eX+KWzy3yfCfouhh26dh5wBKIBdAnbJKV2WFcT00H50rIUuPLRhspLJobq2+mgYJjL+hGB/2KRq60AEwZ/bgxm/z0A9KTVwcj3Po8NFX5/0RmKE81UVrqO1OmdXMASr9gY2211nxxCmBfAiqvQTBSdIap6wqVVniDTOuu8eEcUGVSi8JtnsBdFQVn7K7tkAzqzQaCFOvqj0LSLVF8hy6HQghXamL6lsmgMpqcF8oNdq4diQIo+cGVfAYfBJ7VELLPONezNseE6P3zApo2/iPmCdqGzIB1Hweuq8MR2nH9tooVxH4QnG0aL8CY4bNfgUFagihSArTxEVtyUJ5VlAPHJbRuW3IBPABX+aRr8asBjkf3oIvKE6lZ4GxQ5d6bCy1w+a6c1pqaIPXjqElHZ8KahEg2rltSATwkhK3WnoM1ZhkHVpvcyWLZp1NRDaSNs9+VyH95XEFa9PpoxdcjDB8l/2A8KpME8skQdtwFcDJiskXHVpSngh70le5N1ClxDKr8hRoufhknua7IVWKt561FqFOeOSyVxPuePGOrFC3QphFwFsIEVTjMtmasO33lcuXXASQ5hEnyxc4Vr8uIYTUc5Ix6/viaMY2Nmb5RoP5W38OKpEz8Dh0tELtvWGXrt8Fl7b+FmkaBdoKYQosMKaNR1CO23WbZFZ6RgijvC/mCSBp4EtM+Oc0A1RufJo1dQRFkODFcILfOZG4cHChXJ+x9DX7rFFGmhRo58TXvKhkHovTpfzH4kYxZcWTdXgIXQ/gOficYx8IPFcuJ4TXVrFvpklK0KSZuTCzvhFv5ndKYU+lb4uExTbykbWB6y6d6mP2V3Cjmc7rc+nx8p5hj30aQP75cmYsj+PvIneRJBKyDXjUW8k75blsHk1adNBj1+FrNEyZFOUT0z2xLjOUbpiZVlL2ondmVpnPMN2BPZartyg7ZBkbR+CXCPwSgQds3Ty37TnvPZrVagc/zKS+6f9sOrio7w5dY5uJJOS2DwfDumGbu4AOoORAtMaT4jtu6FcQct+wOdwjH9iIm+/kjoQb7np+9sAUP5uUye9K2TktLD9u3mcd39VSDVbQ5j12+D1SfdN79OSMS/wNY+wpEBTep2oAAAAASUVORK5CYII=");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 400px;
    opacity: 0.2;
    pointer-events: none;
}
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : index.css project project-deep-sky
 */

@import url("configuration/__vars.css");
@import url("configuration/__fonts.css");
@import url("configuration/__generic.css");
@import url("modules/__sections.css");
@import url("modules/__tabs.css");
@import url("modules/__steps.css");
@import url("modules/__boxes.css");
@import url("modules/__panels.css");
@import url("modules/__table.css");
@import url("modules/__button.css");
@import url("modules/__input.css");
@import url("modules/__fieldset.css");
@import url("modules/__waterfall.css");
@import url("modules/__dialog.css");
@import url("modules/__notification.css");
@import url("modules/__market_equation.css");
@import url("modules/__start_end.css");
@import url("modules/__image.css");
@import url("modules/__introduction.css");
@import url("modules/__plotter.css");
@import url("modules/__reactive_table.css");
@import url("parts/header.css");
@import url("parts/footer.css");
@import url("parts/modules.css");

div[data-app="true"] * {
    box-sizing: border-box;
}

div[data-app="true"].no-events,
div[data-app="true"].no-events * {
    pointer-events: none !important;
}

div[data-app="true"]  {
    color: var(--color-dark);
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
#qv-page-container div[data-app="true"]  {
    color: var(--color-dark);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

div[data-app="true"] button, div[data-app="true"] a {
    cursor: pointer;
}

.datama-light .disabled:not(.dimension-pill):not(.kpi),
div[data-app="true"] .disabled:not(.dimension-pill):not(.kpi) {
    opacity: .5;
    cursor: not-allowed;
}

div[data-app="true"] .lock,
.datama-light .lock {
    position: relative;
}

div[data-app="true"] .lock::after,
.datama-light .lock::after {
    position: absolute;
    bottom: -.1rem;
    right: 0;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--datama-primary);
    border-radius: 1.2rem;
    content: "🔒";
    line-height: 1.2rem;
    font-size: .8rem;
    padding: .1rem;
    box-shadow: var(--shadow);
    text-align: center !important;
}

.datama-light {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.datama-light > .datama-light-header {
    order: 1;
}
.datama-light > .datama-light-modules {
    order: 2;
}
.datama-light > .datama-light-introduction {
    order: 3;
}
.datama-light > .datama-light-footer {
    order: 4;
}
.datama-light > .datama-light-notifications {
    order: 5;
}
#qv-page-container .datama-light {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.datama-light > * {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}
#qv-page-container .datama-light > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.datama-light > div {
    padding: 0 20px;
}

div[data-app="true"] .datama-slide-actions {
    visibility: hidden;
    opacity: 0;
    transition: .1s ease-out;
}

div[data-app="true"]:hover .datama-slide-actions {
    visibility: visible;
    opacity: 1;
    transition: .1s ease-in;
}
div[data-app="true"] .datama-slide-actions .datama-input-label,
div[data-app="true"] .datama-slide-actions .datama-input-select {
    min-width: unset;
    margin: 0 !important;
}
div[data-app="true"] .plotter-shortcuts .datama-input-label,
div[data-app="true"] .plotter-shortcuts .datama-input-select {
    min-width: unset;
    margin: 0 !important;
    font-weight: 600;
    font-size: .75rem;
}
div[data-app="true"] .datama-slide-actions {
    position: absolute;
    right: 10px;
    top: 0;
}

div[data-app="true"] .datama-grow {
    flex: 1;
}

div[data-app="true"] .text-right {
    text-align: right !important;
}

div[data-app="true"] .text-left {
    text-align: left !important;
}

div[data-app="true"] .text-center {
    text-align: center !important;
}

div[data-app="true"] .no-border {
    border: unset !important;
}

div[data-app="true"] .datama-hidden {
    display: none;
}

div[data-app="true"] .border-none {
    border: none;
}

div[data-app="true"] .border-square {
    border-radius: 0;
}

div[data-app="true"] .border-round-1 {
    border-radius: 5px;
}

div[data-app="true"] .border-round-2 {
    border-radius: 10px;
}

div[data-app="true"] .border-round-3 {
    border-radius: 15px;
}

div[data-app="true"] .border-round-4 {
    border-radius: 20px;
}

div[data-app="true"] .border-round-5 {
    border-radius: 25px;
}

div[data-app="true"] .border-round {
    border-radius: 100em;
}

div[data-app="true"] .border-radius {
    border-radius: var(--border-radius);
}

div[data-app="true"] .border {
    border: var(--border-primary);
}

div[data-app="true"] .border-primary {
    border-color: var(--color-primary);
}

div[data-app="true"] .border-secondary {
    border-color: var(--color-secondary);
}

div[data-app="true"] .border-warning {
    border-color: var(--color-warning);
}

div[data-app="true"] .border-error {
    border-color: var(--color-danger);
}

div[data-app="true"] .relative {
    position: relative;
}

div[data-app="true"] .absolute {
    position: absolute;
}

div[data-app="true"] .fixed {
    position: fixed;
}

div[data-app="true"] .sticky {
    position: sticky;
}

div[data-app="true"] .d-flex {
    display: flex;
}

div[data-app="true"] .flex-wrap {
    flex-wrap: wrap;
}

div[data-app="true"] .flex-nowrap {
    flex-wrap: nowrap;
}

div[data-app="true"] .flex-start {
    justify-content: flex-start;
}

div[data-app="true"] .flex-end {
    justify-content: flex-end;
}

div[data-app="true"] .flex-center {
    justify-content: center;
}

div[data-app="true"] .flex-column {
    flex-direction: column;
}

div[data-app="true"] .align-middle {
    vertical-align: middle;
    align-items: center;
}

div[data-app="true"] .justify-start {
    justify-content: flex-start;
}

div[data-app="true"] .justify-end {
    justify-content: flex-end;
}

div[data-app="true"] .justify-center {
    justify-content: center;
}

div[data-app="true"] .justify-space-between {
    justify-content: space-between;
}

div[data-app="true"] .justify-space-around {
    justify-content: space-around;
}

div[data-app="true"] .primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

div[data-app="true"] .secondary {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

div[data-app="true"] .primary-light {
    color: var(--color-primary-light) !important;
    border-color: var(--color-secondary) !important;
}

div[data-app="true"] .icon-primary .datama-icon,
div[data-app="true"] .icon-primary .datama-icon path {
    color: var(--color-primary);
    fill: var(--color-primary);
}

div[data-app="true"] .icon-secondary .datama-icon,
div[data-app="true"] .icon-secondary .datama-icon path {
    color: var(--color-secondary);
    fill: var(--color-secondary);
}

div[data-app="true"] .icon-primary-light .datama-icon,
div[data-app="true"] .icon-primary-light .datama-icon path {
    color: var(--color-primary-light);
    fill: var(--color-primary-light);
}

div[data-app="true"] .icon-danger .datama-icon,
div[data-app="true"] .icon-danger .datama-icon path {
    color: var(--color-danger);
    fill: var(--color-danger);
}

div[data-app="true"] .dark {
    color: rgb(var(--color-dark-rgb)) !important;
}

div[data-app="true"] .dark-light {
    color: rgb(var(--color-dark-thin-rgb)) !important;
}

div[data-app="true"] .white {
    color: rgb(var(--color-light-rgb)) !important;
}

div[data-app="true"] .small {
    font-size: small !important;
}

div[data-app="true"] .large {
    font-size: large !important;
}

div[data-app="true"] .strong {
    font-weight: 600 !important;
}

div[data-app="true"] .light {
    font-weight: 300 !important;
}

div[data-app="true"] .underlined {
    position: relative;
}

div[data-app="true"] .underlined::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transition: .1s ease-out;
    opacity: .5;
}

div[data-app="true"] .underlined:hover::after {
    left: 0;
    right: 0;
    transition: .1s ease-in;
    opacity: 1;
}

div[data-app="true"] .p-0 {
    padding: 0 !important;
    border: transparent;
}

div[data-app="true"] .p-1 {
    padding: 5px !important;
}

div[data-app="true"] .p-2 {
    padding: 10px !important;
}

div[data-app="true"] .p-3 {
    padding: 15px !important;
}

div[data-app="true"] .p-4 {
    padding: 20px !important;
}

div[data-app="true"] .p-5 {
    padding: 25px !important;
}

div[data-app="true"] .pl-0 {
    padding-left: 0 !important;
}

div[data-app="true"] .pl-1 {
    padding-left: 5px !important;
}

div[data-app="true"] .pl-2 {
    padding-left: 10px !important;
}

div[data-app="true"] .pl-3 {
    padding-left: 15px !important;
}

div[data-app="true"] .pl-4 {
    padding-left: 20px !important;
}

div[data-app="true"] .pl-5 {
    padding-left: 25px !important;
}

div[data-app="true"] .pr-0 {
    padding-right: 0 !important;
}

div[data-app="true"] .pr-1 {
    padding-right: 5px !important;
}

div[data-app="true"] .pr-2 {
    padding-right: 10px !important;
}

div[data-app="true"] .pr-3 {
    padding-right: 15px !important;
}

div[data-app="true"] .pr-4 {
    padding-right: 20px !important;
}

div[data-app="true"] .pr-5 {
    padding-right: 25px !important;
}

div[data-app="true"] .pb-0 {
    padding-bottom: 0 !important;
}

div[data-app="true"] .pb-1 {
    padding-bottom: 5px !important;
}

div[data-app="true"] .pb-2 {
    padding-bottom: 10px !important;
}

div[data-app="true"] .pb-3 {
    padding-bottom: 15px !important;
}

div[data-app="true"] .pb-4 {
    padding-bottom: 20px !important;
}

div[data-app="true"] .pb-5 {
    padding-bottom: 25px !important;
}

div[data-app="true"] .pt-0 {
    padding-top: 0 !important;
}

div[data-app="true"] .pt-1 {
    padding-top: 5px !important;
}

div[data-app="true"] .pt-2 {
    padding-top: 10px !important;
}

div[data-app="true"] .pt-3 {
    padding-top: 15px !important;
}

div[data-app="true"] .pt-4 {
    padding-top: 20px !important;
}

div[data-app="true"] .pt-5 {
    padding-top: 25px !important;
}

div[data-app="true"] .m-0 {
    margin: 0 !important;
}

div[data-app="true"] .m-1 {
    margin: 5px !important;
}

div[data-app="true"] .m-2 {
    margin: 10px !important;
}

div[data-app="true"] .m-3 {
    margin: 15px !important;
}

div[data-app="true"] .m-4 {
    margin: 20px !important;
}

div[data-app="true"] .m-auto {
    margin: auto !important;
}

div[data-app="true"] .m-5 {
    margin: 25px !important;
}

div[data-app="true"] .ml-0 {
    margin-left: 0 !important;
}

div[data-app="true"] .ml-1 {
    margin-left: 5px !important;
}

div[data-app="true"] .ml-2 {
    margin-left: 10px !important;
}

div[data-app="true"] .ml-3 {
    margin-left: 15px !important;
}

div[data-app="true"] .ml-4 {
    margin-left: 20px !important;
}

div[data-app="true"] .ml-auto {
    margin-left: auto !important;
}

div[data-app="true"] .ml-5 {
    margin-left: 25px !important;
}

div[data-app="true"] .mr-0 {
    margin-right: 0 !important;
}

div[data-app="true"] .mr-1 {
    margin-right: 5px !important;
}

div[data-app="true"] .mr-2 {
    margin-right: 10px !important;
}

div[data-app="true"] .mr-3 {
    margin-right: 15px !important;
}

div[data-app="true"] .mr-4 {
    margin-right: 20px !important;
}

div[data-app="true"] .mr-auto {
    margin-right: auto !important;
}

div[data-app="true"] .mr-5 {
    margin-right: 25px !important;
}

div[data-app="true"] .mb-0 {
    margin-bottom: 0 !important;
}

div[data-app="true"] .mb-1 {
    margin-bottom: 5px !important;
}

div[data-app="true"] .mb-2 {
    margin-bottom: 10px !important;
}

div[data-app="true"] .mb-3 {
    margin-bottom: 15px !important;
}

div[data-app="true"] .mb-4 {
    margin-bottom: 20px !important;
}

div[data-app="true"] .mb-auto {
    margin-bottom: auto !important;
}

div[data-app="true"] .mb-5 {
    margin-bottom: 25px !important;
}

div[data-app="true"] .mt-0 {
    margin-top: 0 !important;
}

div[data-app="true"] .mt-1 {
    margin-top: 5px !important;
}

div[data-app="true"] .mt-2 {
    margin-top: 10px !important;
}

div[data-app="true"] .mt-3 {
    margin-top: 15px !important;
}

div[data-app="true"] .mt-4 {
    margin-top: 20px !important;
}

div[data-app="true"] .mt-auto {
    margin-top: auto !important;
}

div[data-app="true"] .mt-5 {
    margin-top: 25px !important;
}

/** NEGATIVE MARGIN*/

div[data-app="true"] .m--1 {
    margin: -5px !important;
}

div[data-app="true"] .m--2 {
    margin: -10px !important;
}

div[data-app="true"] .m--3 {
    margin: -15px !important;
}

div[data-app="true"] .m--4 {
    margin: -20px !important;
}

div[data-app="true"] .m--5 {
    margin: -25px !important;
}

div[data-app="true"] .ml--0 {
    margin-left: -0 !important;
}

div[data-app="true"] .ml--1 {
    margin-left: -5px !important;
}

div[data-app="true"] .ml--2 {
    margin-left: -10px !important;
}

div[data-app="true"] .ml--3 {
    margin-left: -15px !important;
}

div[data-app="true"] .ml--4 {
    margin-left: -20px !important;
}

div[data-app="true"] .ml--5 {
    margin-left: -25px !important;
}

div[data-app="true"] .mr--1 {
    margin-right: -5px !important;
}

div[data-app="true"] .mr--2 {
    margin-right: -10px !important;
}

div[data-app="true"] .mr--3 {
    margin-right: -15px !important;
}

div[data-app="true"] .mr--4 {
    margin-right: -20px !important;
}

div[data-app="true"] .mr--5 {
    margin-right: -25px !important;
}

div[data-app="true"] .mb--1 {
    margin-bottom: -5px !important;
}

div[data-app="true"] .mb--2 {
    margin-bottom: -10px !important;
}

div[data-app="true"] .mb--3 {
    margin-bottom: -15px !important;
}

div[data-app="true"] .mb--4 {
    margin-bottom: -20px !important;
}

div[data-app="true"] .mb--5 {
    margin-bottom: -25px !important;
}

div[data-app="true"] .mt--1 {
    margin-top: -5px !important;
}

div[data-app="true"] .mt--2 {
    margin-top: -10px !important;
}

div[data-app="true"] .mt--3 {
    margin-top: -15px !important;
}

div[data-app="true"] .mt--4 {
    margin-top: -20px !important;
}

div[data-app="true"] .mt--5 {
    margin-top: -25px !important;
}

/** NEGATIVE MARGIN*/

div[data-app="true"] .bg-dark {
    background: rgb(var(--color-dark-rgb));
    color: rgb(var(--color-light-rgb));
}

div[data-app="true"] .bg-white {
    color: rgb(var(--color-dark-rgb));
    background: rgb(var(--color-light-rgb));
}

div[data-app="true"] .bg-primary {
    background: var(--color-primary);
}

div[data-app="true"] .bg-primary * {
    color: rgb(var(--color-light-rgb))
}

div[data-app="true"] .bg-primary .primary,
div[data-app="true"] .bg-primary a {
    color: rgb(var(--color-light-rgb)) !important;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline;
}

div[data-app="true"] .bg-primary .datama-divider {
    border-color: rgba(var(--color-light-rgb), .25) !important;
}

div[data-app="true"] .bg-secondary {
    background: var(--color-secondary);
}

div[data-app="true"] .bg-red {
    background: red;
}

div[data-app="true"] .bg-red * {
    color: rgb(var(--color-light-rgb))
}

div[data-app="true"] .bg-secondary * {
    color: rgb(var(--color-light-rgb));
    fill: rgb(var(--color-light-rgb));
}

div[data-app="true"] .bg-secondary .primary,
div[data-app="true"] .bg-secondary a {
    color: rgb(var(--color-light-rgb)) !important;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline;
}

div[data-app="true"] .bg-secondary .datama-divider {
    border-color: rgba(var(--color-light-rgb), .25) !important;
}

#datama-testing-text,
.datama-testing-text,
.datama-test-hidden {
    position: absolute !important;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
    z-index: -1;
    top: 0;
    left: 0;
}

div[data-app="true"] .allow-overflow {
    overflow-y: visible !important;
    overflow-x: scroll !important;
}

div[data-app="true"] .w-100 {
    width: 100%;
}

div[data-app="true"] .w-75 {
    width: 75%;
}

div[data-app="true"] .w-66 {
    width: 66.66%;
}

div[data-app="true"] .w-50 {
    width: 50%;
}

div[data-app="true"] .w-33 {
    width: 33.33%;
}

div[data-app="true"] .w-25 {
    width: 25%;
}

div[data-app="true"] .ha-100 {
    height: 100%;
    min-height: 100% !important;
    max-height: 100% !important;
}

div[data-app="true"] .ha-75 {
    height: 75%;
    min-height: 75% !important;
    max-height: 75% !important;
}

div[data-app="true"] .ha-66 {
    height: 66.66%;
    min-height: 66.66% !important;
    max-height: 66.66% !important;
}

div[data-app="true"] .ha-50 {
    height: 50%;
    min-height: 50% !important;
    max-height: 50% !important;
}

div[data-app="true"] .ha-33 {
    height: 33.33%;
    min-height: 33.33% !important;
    max-height: 33.33% !important;
}

div[data-app="true"] .ha-25 {
    height: 25%;
    min-height: 25% !important;
    max-height: 25% !important;
}

div[data-app="true"] .fit-content {
    width: fit-content;
}

div[data-app="true"] .disabled:not(.dimension-pill):not(.kpi) {
    cursor: not-allowed !important;
    opacity: .75;
}

div[data-app="true"] .v-btn--disabled * {
    color: rgba(var(--color-dark-rgb), .26) !important;
}

div[data-app="true"] .p-absolute {
    position: absolute;
}

div[data-app="true"] .top-0 {
    top: 0 !important;
}

div[data-app="true"] .top-1 {
    top: 5px !important;
}

div[data-app="true"] .top-2 {
    top: 10px !important;
}

div[data-app="true"] .top-3 {
    top: 15px !important;
}

div[data-app="true"] .top-4 {
    top: 20px !important;
}

div[data-app="true"] .top-5 {
    top: 25px !important;
}

div[data-app="true"] .left-0 {
    left: 0 !important;
}

div[data-app="true"] .left-1 {
    left: 5px !important;
}

div[data-app="true"] .left-2 {
    left: 10px !important;
}

div[data-app="true"] .left-3 {
    left: 15px !important;
}

div[data-app="true"] .left-4 {
    left: 20px !important;
}

div[data-app="true"] .left-5 {
    left: 25px !important;
}

div[data-app="true"] .bottom-0 {
    bottom: 0 !important;
}

div[data-app="true"] .bottom-1 {
    bottom: 5px !important;
}

div[data-app="true"] .bottom-2 {
    bottom: 10px !important;
}

div[data-app="true"] .bottom-3 {
    bottom: 15px !important;
}

div[data-app="true"] .bottom-4 {
    bottom: 20px !important;
}

div[data-app="true"] .bottom-5 {
    bottom: 25px !important;
}

div[data-app="true"] .right-0 {
    right: 0 !important;
}

div[data-app="true"] .right-1 {
    right: 5px !important;
}

div[data-app="true"] .right-2 {
    right: 10px !important;
}

div[data-app="true"] .right-3 {
    right: 15px !important;
}

div[data-app="true"] .right-4 {
    right: 20px !important;
}

div[data-app="true"] .right-5 {
    right: 25px !important;
}