/* Variables */
@media {
    :root {
        /* Couleurs */
        --bg-light             : #f8f5ef;
        --bg-light-2           : #D7DBED;
        --bg-light-0           : #f0f2fa;
        --dark                 : #212529;
        --color-success        : #547D65;
        --color-success-hover  : #476955;
        --color-success-light  : #dce9e1;
        --color-primary        : #4972C1;
        --color-primary-hover  : #48649A;
        --color-danger         : #B3495F;
        --color-danger-hover   : #934151;
        --color-warning        : #B85D28;
        --color-warning-hover  : #A2582D;
        --color-secondary      : #49556A;
        --color-secondary-hover: #354055;
        --color-info           : #c1d1e9;
        --color-info-hover     : #a4bbde;
        --color-light-text     : #fff;
        --color-dark-text      : #000;
        --color-muted          : #616D85;
        --color-a-link         : var(--color-primary);
        --color-a-link-hover   : #084FC1;
        --color-a-link-hover   : #0042AD;
        --bs-border-color      : #bcc3df;
        /* Autres */
        --btn-radius           : 20px;
        --pannel-radius        : 0.75rem;
        --rounded              : 0.375rem;
        --rounded-1            : 0.25rem;
        --rounded-2            : 0.5rem;
        --shadow-1             : 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        --shadow-2             : 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    }
    .bg-light {
        background-color: var(--bg-light) !important;
    }
    .bg-light-2 {
        background-color: var(--bg-light-2) !important;
    }
    .bg-light-0 {
        background-color: var(--bg-light-0) !important;
    }
}
/* Surcharge couleurs bootstrap */
@media {
    /* --- Boutons --- */
    .btn-success {
        background-color: var(--color-success);
        border-color    : var(--color-success);
        color           : var(--color-light-text);
    }
    .btn-success:active,
    .btn-success:focus,
    .btn-success:hover {
        background-color: var(--color-success-hover);
        border-color    : var(--color-success-hover);
        color           : var(--color-light-text);
    }
    .btn-primary {
        background-color: var(--color-primary);
        border-color    : var(--color-primary);
        color           : var(--color-light-text);
    }
    .btn-primary:active,
    .btn-primary:focus,
    .btn-primary:hover {
        background-color: var(--color-primary-hover);
        border-color    : var(--color-primary-hover);
        color           : var(--color-light-text);
    }
    .btn-danger {
        background-color: var(--color-danger);
        border-color    : var(--color-danger);
        color           : var(--color-light-text);
    }
    .btn-danger:active,
    .btn-danger:focus,
    .btn-danger:hover {
        background-color: var(--color-danger-hover);
        border-color    : var(--color-danger-hover);
        color           : var(--color-light-text);
    }
    .btn-warning {
        background-color: var(--color-warning);
        border-color    : var(--color-warning);
        color           : var(--color-light-text);
    }
    .btn-warning:active,
    .btn-warning:focus,
    .btn-warning:hover {
        background-color: var(--color-warning-hover);
        border-color    : var(--color-warning-hover);
        color           : var(--color-light-text);
    }
    .btn-secondary {
        background-color: var(--color-secondary);
        border-color    : var(--color-secondary);
        color           : var(--color-light-text);
    }
    .btn-secondary:active,
    .btn-secondary:focus,
    .btn-secondary:hover {
        background-color: var(--color-secondary-hover);
        border-color    : var(--color-secondary-hover);
        color           : var(--color-light-text);
    }
    .btn-info {
        background-color: var(--color-info);
        border-color    : var(--color-info);
        color           : var(--color-dark-text);
    }
    .btn-info:active,
    .btn-info:focus,
    .btn-info:hover {
        background-color: var(--color-info-hover);
        border-color    : var(--color-info-hover);
        color           : var(--color-dark-text);
    }
    /* --- Badges --- */
    .badge-success {
        background-color: var(--color-success);
        color           : var(--color-light-text);
    }
    .badge-primary {
        background-color: var(--color-primary);
        color           : var(--color-light-text);
    }
    .badge-danger {
        background-color: var(--color-danger);
        color           : var(--color-light-text);
    }
    .badge-warning {
        background-color: var(--color-warning);
        color           : var(--color-light-text);
    }
    .badge-secondary {
        background-color: var(--color-secondary);
        color           : var(--color-light-text);
    }
    .badge-info {
        background-color: var(--color-info);
        color           : var(--color-dark-text);
    }
    /* --- Texte --- */
    .text-success {
        color: var(--color-success) !important;
    }
    .text-primary {
        color: var(--color-primary) !important;
    }
    .text-danger {
        color: var(--color-danger) !important;
    }
    .text-warning {
        color: var(--color-warning) !important;
    }
    .text-secondary {
        color: var(--color-secondary) !important;
    }
    .text-info {
        color: var(--color-info) !important;
    }
    .text-muted {
        color: var(--color-muted) !important;
    }
    /* --- Arrière-plans --- */
    .bg-success,
    .text-bg-success {
        background-color: var(--color-success) !important;
        color           : var(--color-light-text);
    }
    .bg-primary,
    .text-bg-primary {
        background-color: var(--color-primary) !important;
        color           : var(--color-light-text);
    }
    .bg-danger,
    .text-bg-danger {
        background-color: var(--color-danger) !important;
        color           : var(--color-light-text) !important;
    }
    .bg-warning,
    .text-bg-warning {
        background-color: var(--color-warning) !important;
        color           : var(--color-light-text) !important;
    }
    .bg-secondary,
    .text-bg-secondary {
        background-color: var(--color-secondary) !important;
        color           : var(--color-light-text);
    }
    .bg-info,
    .text-bg-info {
        background-color: var(--color-info) !important;
        color           : var(--color-dark-text);
    }
    .bg-muted,
    .text-bg-muted {
        background-color: var(--color-muted) !important;
        color           : var(--color-light-text);
    }
    /* --- Bordures --- */
    .border-success {
        border-color: var(--color-success) !important;
    }
    .border-primary {
        border-color: var(--color-primary) !important;
    }
    .border-danger {
        border-color: var(--color-danger) !important;
    }
    .border-warning {
        border-color: var(--color-warning) !important;
    }
    .border-secondary {
        border-color: var(--color-secondary) !important;
    }
    .border-info {
        border-color: var(--color-info) !important;
    }
    .border-muted {
        border-color: var(--color-muted) !important;
    }
    .dropdown-item.active,
    .dropdown-item:active {
        background: var(--color-primary) !important;
    }
}
/* Components */
@media {
    h2 {
        font-size  : 26px;
        font-weight: 400;
    }
    a {
        color          : var(--color-a-link);
        text-decoration: none;
        transition     : color 0.2s ease;
    }
    .badge[data-copy-text] {
        cursor    : pointer;
        background: var(--bg-light);
        color     : var(--dark);
    }
    .badge[data-copy-text]:before {
        content     : "\f0c5";
        font-weight : 400;
        font-family : "Font Awesome 7 Pro";
        margin-right: 5px;
    }
    .badge[data-copy-text].copied:before {
        content: "\f00c";
    }
    .badge[data-copy-text]:hover {
        background: var(--color-primary);
        color     : #fff;
    }
    .badge[data-copy-text].copied {
        background: var(--color-success);
        color     : #fff;
    }
    .btn-link {
        display        : inline;
        padding        : 0;
        border         : none;
        background     : none;
        color          : var(--color-a-link);
        text-decoration: none;
        transition     : color 0.2s ease;
        cursor         : pointer;
    }
    .btn-link:hover,
    a:hover {
        color: var(--color-a-link-hover);
    }
    a.active {
        color      : var(--color-success);
        font-weight: bold;
    }
    .btn {
        border-radius: var(--btn-radius);
        white-space  : nowrap;
        padding      : 4px 12px;
    }
    .pannel {
        padding      : 16px 24px;
        background   : #fff;
        border-radius: var(--pannel-radius);
    }
    .pannel-outline {
        padding      : 16px 24px;
        border       : 1px solid #fff;
        border-radius: var(--pannel-radius);
    }
    .form-control,
    .form-select {
        padding: 4px 16px;
    }
    .form-label > .form-control {
        margin-top: 8px;
    }
    .input-group .btn {
        border: 0;
    }
    .seo_google {
        border       : 1px solid var(--color-success);
        color        : var(--color-success);
        padding      : 8px;
        font-size    : 14px;
        border-radius: var(--pannel-radius);
        display      : none;
        background   : var(--color-success-light);
    }
    .hide {
        display: none !important;
    }
    .flex-group,
    .flex-group-column {
        display  : flex;
        flex-wrap: wrap;
        gap      : 16px;
    }
    .flex-group > .badge,
    .flex-group-column > .badge {
        text-align: left;
    }
    .flex-group-column {
        flex-direction: column;
    }
    .gap-1 {
        gap: 0.25rem;
    }
    .gap-2 {
        gap: 0.5rem;
    }
    .gap-3 {
        gap: 1rem;
    }
    #iframe_display {
        overflow  : hidden;
        background: var(--color-secondary);
    }
    .dropzone.dropzone-files {
        border-radius: var(--rounded);
        background   : var(--bg-light);
        border       : 3px dashed var(--color-success);
    }
    .input-file-zone > input[type="file"] {
        display      : block;
        width        : 100%;
        min-height   : 118px;
        cursor       : pointer;
        padding      : 33px 12px;
        border-radius: var(--rounded);
        background   : var(--bg-light);
        border       : 3px dashed var(--color-success);
    }
    .input-file-zone > input[type=file]::file-selector-button {
        background: transparent !important;
        border    : none;
    }
    .slim-file-hopper {
        border-radius: var(--rounded);
    }
    [data-state="empty"] .slim-file-hopper {
        border: 3px dashed var(--color-success);
    }
    .slim {
        background-color: var(--bg-light) !important;
    }
    .list-group-item-action:focus,
    .list-group-item-action:hover {
        background-color: var(--bg-light);
    }
    note {
        font-size  : 14px;
        font-style : italic;
        font-weight: 400;
        color      : var(--color-muted);
        display    : block;
    }
    h4 > note {
        margin-top: 10px;
    }
    .input-group-text {
        background: transparent;
        height    : 100%;
        border    : none;
    }
    .pannel-target {
        margin-bottom: 24px;
    }
    .form-check-input:checked {
        background-color: var(--color-success);
        border-color    : var(--color-success-hover);
    }
    .google_url {
        height     : 100%;
        display    : flex;
        align-items: flex-end;
        font-weight: 400;
    }
    .google {
        border       : 1px solid var(--bs-border-color);
        border-radius: 4px;
        padding      : 8px;
        background   : #fff;
        min-width    : 100%;
        font-family  : arial, sans-serif;
        font-size    : medium;
        font-weight  : 400;
    }
    .google h3 {
        white-space: nowrap;
        font-size  : medium;
        font-weight: 400;
        line-height: 1.24;
        color      : #2518b5 !important;
        padding    : 0;
        margin     : 0;
        position   : relative;
        max-width  : 536px;
        display    : block;
        overflow   : hidden;
    }
    .google_url {
        font-size  : 14px !important;
        color      : #00802a;
        overflow   : hidden;
        line-height: 1.24;
    }
    .google_desc {
        color      : #444;
        font-size  : small !important;
        max-height : 32px;
        overflow-y : hidden;
        display    : inline-block;
        height     : 32px;
        line-height: 1.2;
        word-break : break-word;
        position   : relative;
    }
    .pointer {
        cursor: pointer;
    }
    .pagination {
        display        : flex;
        gap            : 16px;
        padding-top    : 1.5rem;
        flex-wrap      : wrap;
        justify-content: center;
    }
    .pagination > li > .page-link {
        border-radius  : 20px !important;
        height         : 38px;
        min-width      : 38px;
        display        : flex;
        justify-content: center;
        align-items    : center;
        border-color   : transparent;
    }
    .pagination > li.page-item.active > .page-link {
        background: var(--color-success);
    }
    .custom-field-inline-edit-link {
        float       : left;
        margin-right: 5px;
    }
    .badge-list {
        display  : flex;
        gap      : 3px 6px;
        flex-wrap: wrap;
    }
    #container-modules_link label {
        margin-bottom: 0.5rem;
    }
    .company_visuals .visual {
        border-radius: 0.375rem;
        border       : 1px solid var(--bs-border-color);
        width        : 100%;
        max-width    : 400px;
        height       : 150px;
        object-fit   : contain;
    }
    .company_visuals .visual.mobile-splash {
        max-width : 100%;
        height    : auto;
        object-fit: contain;
    }
    .company_visuals .visual {
        border-radius: 0.375rem;
        width        : 100%;
    }
    .badge-result {
        padding: 3px;
        color  : #000;
    }
    .badge-result::before {
        content     : "\f111";
        font-family : "Font Awesome 5 Pro";
        font-weight : 900;
        margin-right: 8px;
        display     : inline-block;
    }
    .badge-result.good::before {
        color: var(--color-success);
    }
    .badge-result.warning::before {
        color: #EFAD71;
    }
    .badge-result.bad::before {
        color: var(--color-danger-hover);
    }
    .donut-size {
        font-size: 12em;
    }
    .pie-wrapper {
        position: relative;
        width   : 1em;
        height  : 1em;
        margin  : 0 auto;
    }
    .pie-wrapper .pie {
        position: absolute;
        top     : 0;
        left    : 0;
        width   : 100%;
        height  : 100%;
        clip    : rect(0, 1em, 1em, 0.5em);
    }
    .pie-wrapper .half-circle {
        position     : absolute;
        top          : 0;
        left         : 0;
        width        : 100%;
        height       : 100%;
        border       : 0.1em solid var(--color-success);
        border-radius: 50%;
        clip         : rect(0em, 0.5em, 1em, 0em);
    }
    .pie-wrapper .right-side {
        transform: rotate(0deg);
    }
    .pie-wrapper .label {
        position     : absolute;
        top          : 0.52em;
        right        : 0.4em;
        bottom       : 0.4em;
        left         : 0.4em;
        display      : block;
        background   : none;
        border-radius: 50%;
        color        : #7F8C8D;
        font-size    : 0.25em;
        line-height  : 2.6em;
        text-align   : center;
        cursor       : default;
        z-index      : 2;
    }
    .pie-wrapper .smaller {
        padding-bottom: 20px;
        color         : #BDC3C7;
        font-size     : 0.45em;
        vertical-align: super;
    }
    .pie-wrapper .shadow {
        width        : 100%;
        height       : 100%;
        border       : 0.1em solid #BDC3C7;
        border-radius: 50%;
    }
    .modal-header,
    .offcanvas-header {
        background-color: #c5cbe1;
    }
    .offcanvas {
        background: var(--bg-light);
        width     : 750px !important;
        max-width : 100% !important;
    }
    .offcanvas.offcanvas-lg {
        width    : 750px !important;
        max-width: 100% !important;
    }
    #offcanvas-content {
        overflow-y: auto;
    }
    .password-security-check {
        padding-top: 24px;
    }
    .password-security-check > .badge {
        text-align: left;
    }
    .password-security-check > .badge.text-success {
        color      : #fff !important;
        background : var(--color-success);
        font-weight: 400;
    }
}
/* Helpers */
@media {
    .img-fit {
        height    : 100%;
        width     : 100%;
        object-fit: cover;
    }
    .img-contain {
        height    : 100%;
        width     : 100%;
        object-fit: contain;
    }
}
/* TABS */
@media {
    .nav-pills .nav-link {
        border-radius: var(--btn-radius);
        padding      : 4px 12px;
        color        : var(--color-primary);
    }
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        background: var(--color-primary);
        color     : #fff;
    }
    .form_tabs > .nav-pills {
        gap           : 16px;
        padding-bottom: 1.5rem;
    }
    .form_tabs > .nav-pills .nav-link {
        position   : relative;
        border     : 1px solid var(--color-primary);
        font-weight: normal;
    }
    .form_tabs > .nav-pills .nav-link.secondary {
        border: 1px solid var(--color-secondary);
    }
    .form_tabs > .nav-pills .nav-link.secondary:not(.active) {
        color: var(--color-secondary);
    }
    .form_tabs > .nav-pills .nav-link.secondary.active {
        background: var(--color-secondary);
    }
    .form_tabs .nav-pills .nav-link.primary:not(:first-child):before {
        content   : "";
        position  : absolute;
        top       : 16px;
        left      : -17px;
        width     : 16px;
        height    : 1px;
        background: var(--color-primary);
    }
    .form_tabs .nav-link .badge {
        background   : none;
        border       : 1px solid var(--color-primary);
        color        : var(--color-primary-hover);
        border-radius: 20px;
        font-size    : 12px;
        padding      : 4px;
        height       : 22px;
        min-width    : 22px;
    }
    .form_tabs .nav-link.active .badge {
        background: var(--color-primary);
        border    : 1px solid #fff;
        color     : #fff;
    }
    /* Medias tabs */
    .nav-underline {
        gap          : 0;
        margin-bottom: 1.5rem;
    }
    .nav-underline .nav-link {
        padding            : 6px 16px;
        color              : var(--color-muted);
        font-weight        : 500;
        position           : relative;
        border-bottom-width: 3px;
        cursor             : pointer;
    }
    .nav-underline .nav-link:not(.active):after {
        content   : "";
        bottom    : -2px;
        left      : 0;
        position  : absolute;
        width     : 100%;
        height    : 1px;
        background: var(--color-muted);
    }
    .nav-underline .nav-link.active {
        border-bottom-color: var(--color-success);
        color              : var(--color-success);
        font-weight        : 500;
        border-top         : none;
        border-left        : none;
        border-right       : none;
    }
    .nav-underline .nav-link > i {
        margin-right: 8px;
    }
}
/* structure */
@media {
    .main {
        margin-top               : 68px;
        margin-bottom            : 120px;
        padding                  : 1rem;
        border-bottom-left-radius: 0;
        border-top-left-radius   : 0;
        display                  : flex;
        flex-direction           : column;
        min-height               : calc(100vh - 56px);
        min-width                : 0;
        overflow                 : hidden;
        transition               : margin-left 0.35s ease-in-out,left 0.35s ease-in-out,margin-right 0.35s ease-in-out,right 0.35s ease-in-out;
        width                    : 100%;
    }
    .wrapper {
        display: flex;
    }
    .page-title {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        gap            : 1rem;
        padding-bottom : 16px;
    }
    .page-title .btn-menu {
        display    : flex;
        align-items: center;
        gap        : 1rem;
    }
    .g-3 {
        gap: 1rem;
    }
    .g-2 {
        gap: 0.5rem;
    }
    .g-1 {
        gap: 0.25rem;
    }
    .pannel-action {
        display        : flex;
        justify-content: space-between;
    }
    .pannel-action .form_save_btn {
        display        : flex;
        align-items    : flex-end;
        flex-wrap      : wrap;
        flex-direction : column;
        justify-content: space-between;
        gap            : 16px;
    }
    .pannel-action .left-links {
        display        : flex;
        flex-direction : column;
        justify-content: space-between;
    }
    .pannel-action .left-links > .links {
        display    : flex;
        flex-wrap  : wrap;
        gap        : 16px;
        align-items: flex-end;
    }
    .pannel-action .secondary_actions {
        justify-content: flex-end;
    }
    @media (max-width:767px) {
        .sidebar.menu-open {
            width: 100%;
        }
        .main {
            padding: 8px 8px 80px;
        }
        .pannel-action,
        .pannel-action .left-links,
        .secondary_actions {
            flex-direction: column;
            gap           : 5px;
        }
        .pannel-action .left-links > .links {
            display: none;
        }
        .publish {
            position       : fixed;
            bottom         : 0;
            right          : 0;
            width          : 100%;
            z-index        : 50;
            padding        : 16px;
            background     : var(--dark);
            justify-content: center;
            gap            : 10%;
        }
    }
}
/* Topbar */
@media {
    nav.navbar {
        position       : fixed;
        width          : 100%;
        top            : 0;
        left           : 0;
        background     : #fff;
        z-index        : 100;
        display        : flex;
        gap            : 3%;
        justify-content: space-between;
        padding        : 0px 1rem 0px 32px;
        min-height     : 60px;
    }
    .offcanvas .form-control,
    .pannel .form-control,
    .pannel .form-select,
    .pannel .input-group,
    nav.navbar .form-control,
    nav.navbar .form-control,
    nav.navbar .form-select,
    nav.navbar .input-group,
    nav.navbar .input-group {
        background-color: var(--bg-light);
    }
    nav.navbar .form-select,
    nav.navbar .input-group {
        min-width: 230px;
    }
    .menu-center {
        display    : flex;
        gap        : 1rem;
        align-items: center;
    }
    .menu-right {
        display        : flex;
        gap            : 1rem;
        justify-content: flex-end !important;
    }
    .dev_mode {
        display        : flex;
        justify-content: flex-end;
    }
    .select2-container--default .select2-selection--multiple,
    .select2-container--default .select2-selection--single {
        background-color: var(--bg-light) !important;
        margin-top      : 0 !important;
        border-radius   : var(--btn-radius) !important;
        border          : var(--bs-border-width) solid var(--bs-border-color) !important;
        padding         : 3px 16px !important;
        min-height      : 34px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top  : 4px !important;
        right: 8px !important;
    }
    .select2-container {
        width: 100% !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--color-primary);
        border-radius   : 0.375rem;
        cursor          : default;
        margin-right    : 5px;
        margin-top      : 0;
        padding         : 0 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        margin-top  : 0;
        margin-right: 0;
    }
    .form-control[type="color"] {
        padding: 0;
    }
    .form-control[type="color"]::-webkit-color-swatch {
        border: none;
    }
}
/* Burger */
@media {
    #burger {
        right                      : 1rem;
        display                    : none;
        -webkit-box-align          : center;
        -ms-flex-align             : center;
        align-items                : center;
        -webkit-box-pack           : center;
        -ms-flex-pack              : center;
        justify-content            : center;
        height                     : 60px;
        width                      : 60px;
        /* CODE SVG */
        cursor                     : pointer;
        -webkit-tap-highlight-color: transparent;
        transition                 : transform 400ms;
        -moz-user-select           : none;
        -webkit-user-select        : none;
        -ms-user-select            : none;
        user-select                : none;
    }
    #burger .line {
        fill          : none;
        transition    : stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke        : var(--dark);
        stroke-width  : 3;
        stroke-linecap: round;
    }
    #burger.active {
        transform: rotate(45deg);
    }
    #burger .top {
        stroke-dasharray: 40 121;
    }
    #burger .bottom {
        stroke-dasharray: 40 121;
    }
    #burger.active .top {
        stroke-dashoffset: -68px;
    }
    #burger.active .bottom {
        stroke-dashoffset: -68px;
    }
    #main-menu .menu-right {
        flex-direction : row;
        margin-left    : auto;
        width          : auto;
        justify-content: space-around;
    }
    #main-menu .menu-left {
        width: auto;
    }
    #main-menu .menu-right .icon-menu {
        margin: 0 auto;
    }
    @media(max-width:1199px) {
        #burger {
            display: flex;
            flex   : 0 0 60px;
        }
        .sidebar-brand-text svg {
            display: none;
        }
        nav.navbar {
            padding-left: 0;
            gap         : 12px;
        }
    }
    @media(max-width:1080px) {
        nav.navbar.multisite_space .dev_mode,
        nav.navbar.multisite_space .dev_notifs {
            display: none;
        }
    }
    @media(max-width:992px) {
        nav.navbar .dev_mode,
        nav.navbar .dev_notifs {
            display: none;
        }
        nav.navbar.multisite_space .search_bar {
            display: none;
        }
    }
    @media(max-width:767px) {
        nav.navbar .search_bar {
            display: none;
        }
        nav.navbar .site_access {
            /*display: none;*/
        }
    }
}
/* sidebar */
@media {
    .sidebar {
        padding-top: 76px;
        direction  : ltr;
        max-width  : 264px;
        min-width  : 264px;
        z-index    : 50;
    }
    .sidebar-content {
        position: fixed;
        height  : calc(100vh - 76px);
        overflow: auto;
        top     : 76px;
    }
    .simplebar-placeholder {
        display: none;
    }
    .sidebar-brand-text {
        font-size     : 16px;
        text-transform: uppercase;
        font-weight   : 700;
        display       : flex;
        align-items   : center;
        gap           : 8px;
        width         : 100%;
        max-width     : 204px;
        line-height   : 110%;
        overflow      : hidden;
    }
    .dashboard-support,
    .sidebar,
    body,
    body.sidebar,
    main {
        background: var(--bg-light);
    }
    .sidebar-content {
        display       : flex;
        margin-left   : 10px;
        flex-direction: column;
        height        : calc(100vh - 76px);
        width         : 264px;
        background    : var(--bg-light);
        overflow      : visible;
    }
    .sidebar-nav {
        flex-grow    : 1;
        list-style   : none;
        margin-bottom: 0;
        padding-left : 0;
    }
    .sidebar-link,
    a.sidebar-link {
        background     : var(--bg-light);
        color          : var(--dark);
        cursor         : pointer;
        display        : block;
        font-weight    : 400;
        padding        : 6px 26px;
        position       : relative;
        text-decoration: none;
        transition     : background 0.1s ease-in-out;
        border-radius  : 0 var(--btn-radius) var(--btn-radius) 0;
    }
    a.sidebar-link > i {
        width          : 30px;
        width          : 30px;
        display        : inline-flex;
        justify-content: center;
    }
    body .sidebar-link i,
    body .sidebar-link svg,
    body a.sidebar-link i,
    body a.sidebar-link svg {
        color: var(--dark);
    }
    .sidebar-link:hover {
        background-color: #ffffff77;
    }
    .simplebar-content-wrapper {
        padding: 0 1rem 0 0;
    }
    #sidebar .separateur:before {
        content   : "";
        width     : calc(100% - 40px);
        height    : 1px;
        background: #00000022;
        position  : absolute;
        top       : 0;
        left      : 26px;
    }
    .sidebar [data-bs-toggle=collapse]:after {
        border      : solid;
        border-width: 0 0.075rem 0.075rem 0;
        content     : " ";
        display     : inline-block;
        padding     : 2px;
        position    : absolute;
        right       : 1.5rem;
        top         : 15px;
        transform   : rotate(45deg);
        transition  : all 0.2s ease-out;
    }
    .sidebar [aria-expanded=true]:after,
    .sidebar [data-bs-toggle=collapse]:not(.collapsed):after {
        top      : 17px;
        transform: rotate(-135deg);
    }
    .sidebar-dropdown .sidebar-link {
        font-size  : 90%;
        font-weight: 400;
        padding    : 6px 1.5rem 6px 60px;
    }
    .sidebar-item.active > .sidebar-link {
        font-weight: 600;
        background : #ffffff;
    }
    @media(max-width:1199px) {
        .main {
            margin-top: 76px;
            min-height: calc(100vh - 76px);
        }
        .sidebar {
            padding-top: 24px;
            position   : fixed;
            z-index    : 80;
            top        : 76px;
            left       : -100%;
            transition : left ease 0.2s;
        }
        .sidebar.menu-open {
            left: 0;
        }
        .sidebar-content {
            top        : 76px;
            padding-top: 1rem;
            box-shadow : var(--shadow-1);
        }
    }
    @media(max-width:766px) {
        .sidebar-content {
            width        : 100vw;
            max-width    : 100vw;
            padding-left : 5%;
            padding-right: 5%;
        }
        .sidebar {
            position : absolute;
            left     : -110%;
            width    : 100vw;
            max-width: 100vw;
        }
    }
    @media {
        .btn_ajax_switch {
            display    : flex;
            gap        : 5px;
            align-items: center;
        }
    }
}
/* Inputs */
@media {
    input[type="color"]:not(#builder_sidebar input[type="color"]) {
        height       : 34px;
        width        : 34px;
        border-radius: 50% 0 0 50% !important;
        border       : 1px solid var(--color-muted);
    }
    input[type="color"]+span.value:not(#builder_sidebar input[type="color"]) {
        height       : 34px;
        width        : calc(100% - 34px);
        border       : 1px solid var(--color-muted);
        border-left  : none;
        transform    : translate(24px,0);
        border-radius: 0 34px 34px 0;
        display      : flex;
        align-items  : center;
        padding      : 16px;
        margin-top   : -34px;
    }
    .colorpicker-input {
        overflow: hidden;
    }
    .form-control:not(textarea),
    .form-select {
        border-radius: var(--btn-radius);
        padding-left : 16px;
        padding-right: 16px;
        padding-right: 5px;
    }
    .input-group > .form-control {
        border    : none;
        background: transparent;
    }
    .input-group {
        border       : 1px solid var(--bs-border-color);
        border-radius: var(--btn-radius);
        border-color : var(--bs-border-color);
    }
    .filter-pannel .form-group {
        min-width: 230px;
    }
    .filter-pannel .export-options {
        display        : flex;
        justify-content: flex-end;
        flex           : 1 1 0;
    }
    /* Radio switch*/
    @media {
        .form-radio-switch {
            padding-left : 2.5em;
            margin-bottom: 0.125rem;
            display      : block;
            min-height   : 1.5rem;
        }
        .form-radio-switch label {
            margin-left: 4px;
        }
        .form-radio-switch .form-check-input {
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
            width              : 2em;
            margin-left        : -2.5em;
            background-image   : var(--bs-form-switch-bg);
            background-position: left center;
            border-radius      : 2em;
            transition         : background-position 0.15s ease-in-out;
            background-color   : #fff;
        }
        .form-radio-switch .form-check-input:checked {
            display: none;
        }
        .form-radio-switch .form-check-input[value="1"] {
            border: 1px solid var(--bs-border-color);
        }
        .form-radio-switch .form-check-input[value="0"] {
            background-color   : var(--color-success);
            border-color       : var(--color-success-hover);
            background-position: right center;
            --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
        }
    }
}
/* Dashboard */
@media {
    /* .row.option-menu {
        gap: 24px;
    } */
    .option-menu .group-title {
        font-size  : 26px;
        font-weight: 400;
    }
    .option-menu-item {
        padding      : 16px;
        background   : #fff;
        display      : flex;
        gap          : 1rem;
        border-radius: var(--pannel-radius);
        color        : var(--dark);
        border       : 1px solid #fff;
        transition   : border-color ease 0.2s;
        height       : 100%;
    }
    .option-menu-item:hover {
        border-color: var(--color-primary);
    }
    .option-menu-item > i {
        flex           : 0 0 50px;
        width          : 50px;
        height         : 50px;
        background     : var(--bg-light);
        display        : flex;
        justify-content: center;
        align-items    : center;
        color          : var(--color-muted);
        font-size      : 30px;
        border-radius  : var(--pannel-radius);
    }
    .option-menu-item .infos {
        display       : flex;
        flex-direction: column;
    }
    .option-menu-item .title {
        font-weight  : bold;
        margin-bottom: 3px;
    }
    .option-menu-item .desc {
        font-size  : 14px;
        color      : var(--color-muted);
        line-height: 1.2;
    }
    .order-steps {
        display  : flex;
        gap      : 1rem;
        width    : 100%;
        flex-wrap: wrap;
    }
    .order-step .group-title {
        font-size  : 26px;
        font-weight: 400;
    }
    .order-step-item {
        padding      : 8px;
        background   : #fff;
        display      : flex;
        gap          : 12px;
        border-radius: var(--pannel-radius);
        color        : var(--dark);
        border       : 1px solid #fff;
        height       : 100%;
        flex         : 2 2 auto;
        position     : relative;
    }
    .order-step-item.active {
        border-color: var(--color-success);
        color       : var(--color-success);
    }
    .order-step-item.active + .order-step-item.active:before {
        content   : "";
        width     : 1rem;
        height    : 1px;
        position  : absolute;
        top       : 50%;
        right     : 100%;
        background: var(--color-success);
    }
    .order-step-item.active {
        border-color: var(--color-success);
        color       : var(--color-success);
    }
    .order-step-item > i {
        flex           : 0 0 30px;
        width          : 30px;
        height         : 30px;
        background     : var(--bg-light);
        display        : flex;
        justify-content: center;
        align-items    : center;
        color          : var(--color-muted);
        font-size      : 16px;
        border-radius  : var(--pannel-radius);
    }
    .order-step-item .infos {
        display        : flex;
        flex-direction : column;
        justify-content: center;
    }
    .order-step-item .title {
        font-weight: bold;
    }
    .order-step-item .desc {
        font-size  : 14px;
        color      : var(--color-muted);
        line-height: 1.2;
    }
}
/*Max*/
@media {
    .breadcrumb {
        margin-bottom: 0;
    }
    .breadcrumb-item.active {
        font-weight: bold;
    }
    .filter-btn {
        display: none;
    }
    .dropdown-submenu {
        position: relative;
    }
    .dropdown-submenu .dropdown-menu {
        position   : static;
        float      : none;
        display    : none;
        margin-left: 0.5rem;
        margin-top : 0;
        border     : 0;
        padding    : 0;
    }
    .dropdown-submenu.show .dropdown-menu {
        display: block;
    }
    .chart {
        width : 100%;
        height: 400px;
    }
    /* .admin_select_options {
        flex            : 0 0 150px;
        list-style-type : none;
        border          : 2px solid #fff;
        margin          : 5px;
        background-color: #fff;
    } */
    .admin_select_options label {
        padding      : 12px;
        transition   : background ease 0.2s;
        /* border       : 2px solid #fff; */
        /* margin-bottom: 0;
        display      : block; */
        /* font-size    : 14px; */
        /* text-align   : center; */
        cursor       : pointer;
        border-radius: var(--rounded-2);
    }
    .admin_select_options label:hover {
        background: var(--bg-light);
    }
    .admin_select_options label img {
        /* position       : relative;
        color          : #fff;
        width          : 150px;
        fill           : #fff;
        display        : flex;
        justify-content: center;
        text-align     : center;
        display        : inline-block; */
    }
    .admin_select_options input[type="radio"]:checked+label {
        /* border: 2px solid #000; */
        font-weight: bold;
        background : var(--color-success-light);
    }
    .admin_select_options input[type="radio"]:not(:checked)+label i {
        display: none;
    }
    .admin_select_options input[type="radio"] {
        opacity : 0;
        position: fixed;
        width   : 0;
        border  : 2px solid #fff;
    }
    .table:not(.head-bg-none) thead th {
        background-color: var(--bg-light);
    }
    table.table-sm {
        font-size: 14px;
    }
    table.table-marketing td {
        border-radius: 0 !important;
    }
}
/* Contrast testeur */
@media {
    div[data-contrast-result] {
        height       : 34px;
        border-radius: 34px;
        /* border       : 1px solid var(--color-muted); */
        display      : flex;
        align-items  : center;
        font-weight  : bold;
    }
    div[data-contrast-result]:after {
        font-family: "Font Awesome 7 Pro";
        font-weight: 400;
        margin-left: 0.5rem;
    }
    div[data-contrast-result].contrast-excellent {
        color: var(--color-success);
    }
    div[data-contrast-result].contrast-excellent:after {
        content: "\f560";
        color  : var(--color-success);
    }
    div[data-contrast-result].contrast-good {
        color: var(--color-success);
    }
    div[data-contrast-result].contrast-good:after {
        content: "\f00c";
        color  : var(--color-success);
    }
    div[data-contrast-result].contrast-acceptable {
        color: var(--color-danger);
    }
    div[data-contrast-result].contrast-acceptable:after {
        content: "\f06a";
        color  : var(--color-danger);
    }
    div[data-contrast-result].contrast-poor {
        color: var(--color-danger);
    }
    div[data-contrast-result].contrast-poor:after {
        content: "\f057";
        color  : var(--color-danger);
    }
}
/* Table-grid */
@media {
    .table-grid {
        border-collapse: separate;
        border-spacing : 0 10px;
        vertical-align : middle;
        width          : 100%;
    }
    .table-grid thead {
        border: 0 solid transparent;
    }
    .table-grid th {
        font-weight: 500;
        font-size  : 14px;
    }
    .table-grid tbody tr {
        background  : #fff;
        border-color: var(--bg-light);
    }
    .gu-mirror.tr-mirror td {
        visibility: hidden;
    }
    .gu-mirror.tr-mirror {
        background   : #49556A55;
        display      : block;
        border-radius: var(--pannel-radius);
        opacity      : 0.5;
        border       : 2px dashed var(--color-secondary);
    }
    .table-grid td {}
    .gu-mirror.tr-mirror td {
        background    : transparent;
        vertical-align: middle;
        padding       : 0.5rem;
        white-space   : nowrap;
        border        : none;
    }
    .table-grid.warped td {
        display        : flex;
        flex-direction : column;
        justify-content: center;
        flex           : 2 2 auto;
    }
    .table-grid.warped td:last-child {
        align-items: flex-end;
    }
    .table-grid td:last-child {
        border-radius: 0 var(--rounded-2) var(--rounded-2) 0;
    }
    .table-grid td:first-child {
        border-radius: var(--rounded-2) 0 0 var(--rounded-2);
    }
    .table-grid.warped td:last-child {
        flex: 1 0 auto;
    }
    .table-grid.warped td:first-child {
        flex: 0 0 auto;
    }
    .table-grid td > img {
        height       : 90px;
        width        : 90px;
        border-radius: var(--rounded-2);
    }
    .table-grid td:has( > img) {
        width: 90px;
    }
    .table-grid.warped tr {
        display        : flex;
        justify-content: space-between;
        flex-wrap      : wrap;
        border-radius  : var(--rounded-2);
        gap            : 4px;
        /* overflow       : hidden; */
        padding        : 8px;
    }
    .table-grid.warped td {
        background   : #fff;
        flex         : 2 2 auto;
        border-radius: 0 !important;
    }
    .table-grid.warped thead {
        display: none;
    }
    .table-grid.warped tbody {
        display       : flex;
        flex-direction: column;
        gap           : 1rem;
    }
    .table-grid .input-group {
        height: 34px;
    }
    @media(max-width:766px) {
        .table-grid td > img {
            height       : 40px;
            width        : 40px;
            border-radius: var(--rounded-2);
        }
        .table-grid thead {
            display: none;
        }
        .filter-btn {
            display: block;
        }
        .filter-pannel {
            display: none;
        }
        .breadcrumb-item,
        .breadcrumb-item+.breadcrumb-item::before {
            display: none;
        }
        .breadcrumb-item:last-child {
            display      : inline;
            overflow     : hidden;
            text-overflow: ellipsis;
            white-space  : nowrap;
        }
    }
    .table-search .img-search {
        width     : 90px;
        height    : 90px;
        object-fit: cover;
        background: var(--bg-light);
    }
    .table-search [post_infos] {
        border    : none;
        min-height: 106px;
    }
    .table-search td[post_image] {
        width: 106px;
    }
    .table-search td[action_menu] {
        height         : 100%;
        justify-content: flex-end;
        min-height     : 106px;
    }
    .table-search .content-short {
        white-space: normal;
        max-width  : 350px;
        max-height : 106px;
        font-size  : 13px;
    }
    /* table-img-format */
    @media {
        table.table-img-format {
            /* background: var(--bg-light); */
        }
        table.table-img-format > :not(caption) > * > * {
            padding         : 0.5rem;
            background-color: var(--bg-light);
            border-color    : #fff;
            vertical-align  : middle;
        }
        table.table-img-format .form-control {
            background: #fff;
            border    : none;
            padding   : 3px 16px;
        }
        table.table-img-format > thead > tr > :first-child {
            border-radius: var(--rounded-2) 0 0 0;
        }
        table.table-img-format > thead > tr > :last-child {
            border-radius: 0 var(--rounded-2) 0 0;
        }
        table.table-img-format > tbody > tr:last-child > :last-child {
            border-radius: 0 0 var(--rounded-2) 0;
        }
        table.table-img-format > tbody > tr:last-child > :first-child {
            border-radius: 0 0 0 var(--rounded-2);
        }
    }
    /* Index-list blog / module-base */
    @media {
        #btn_multisites {
            display        : flex;
            gap            : 5px;
            justify-content: center;
            flex-wrap      : wrap;
            align-items    : center;
            width          : 100%;
        }
        .table-grid [post_infos] {
            white-space: normal;
            min-width  : 150px;
        }
        .table-grid tbody tr > div,
        [post_infos] {
            display        : flex;
            flex-direction : column;
            justify-content: center;
        }
        [select_grab] {
            display        : flex;
            justify-content: space-around;
            flex-direction : column;
            align-items    : center;
            gap            : 1rem;
        }
        [post_lang] {
            display  : flex;
            flex-wrap: wrap;
        }
        .table-grid [post_image] i[class*="fa"] {
            font-size: 30px;
        }
        [select_grab] .fa-grip-dots {
            cursor: grab;
        }
        .btn_action_status,
        [post_state] > span {
            display    : flex;
            align-items: center;
            gap        : 5px;
            font-size  : 15px;
        }
        .table-grid [post_contact_details] {
            display       : flex;
            flex-direction: column;
            gap           : 5px;
        }
        .table-grid [post_contact_details] > div {
            display    : flex;
            align-items: center;
            gap        : 5px;
        }
        .table-grid.warped [post_image] img,
        .table-grid.warped [post_image] svg {
            width : 80px;
            height: 80px;
        }
        .table-grid.warped [post_image] {
            display: block !important;
            flex   : 0 0 auto;
        }
        .dates-repeater-content > .items:first-child hr {
            display: none;
        }
        .d-warped {
            display: none;
        }
        .table-grid.warped .d-warped {
            display: initial;
        }
    }
    /* Médias */
    @media {
        .admin-media-list {
            display        : flex;
            flex-wrap      : wrap;
            gap            : 15px;
            justify-content: flex-start;
        }
        .admin-media-list .media-item {
            border-radius: var(--rounded-2);
            overflow     : hidden;
            border       : 4px transparent solid;
            transition   : border 0.2s ease;
            cursor       : pointer;
        }
        .admin-media-list .media-item:hover {
            border-color: var(--color-primary);
        }
        .admin-media-list .media-item.active {
            border-color: var(--color-success);
        }
        .admin-media-list .media-item {
            position: relative;
        }
        .admin-media-list .media-item img {
            height: 100px;
            width : auto;
        }
        .admin-media-list .media-item > .custom-checkbox {
            display : none;
            position: absolute;
            top     : 5px;
            right   : 5px;
        }
        .admin-media-list.selection .media-item > .custom-checkbox {
            display       : block;
            pointer-events: none;
        }
        .admin-media-list.selection .media-item > a {
            pointer-events: none;
        }
        #mass_actions {
            display: none;
        }
        #mass_actions.active {
            display: flex;
        }
        table.media-table {
            font-size: 12px;
        }
        table.media-table th {
            background-color: #fff;
        }
        .nav-tabs-sm .nav-link {
            padding: 5px 10px;
        }
        .offcanvas-img {
            position: relative;
        }
        .offcanvas-img > a {
            position: absolute;
            bottom  : 8px;
            right   : 8px;
        }
        .admin-media-list .media-file {
            width        : 70px;
            height       : 70px;
            border-radius: var(--rounded-2);
            overflow     : hidden;
            border       : 4px transparent solid;
            transition   : border 0.2s ease;
            cursor       : pointer;
        }
    }
}
/* Tables */
@media {
    .table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-bg-type: var(--bg-light-0);
    }
}
/* Nestables */
@media {
    ol.dd-list > li.dd-item [select_grab] {
        border     : none;
        text-indent: unset;
        height     : 70px;
        width      : 40px;
        overflow   : visible;
        padding    : 0 0 30px;
    }
    ol.dd-list > li.dd-item [select_grab]:before {
        content: none;
    }
    ol.dd-list > li.dd-item > div {
        display      : flex;
        flex-wrap    : wrap;
        gap          : 16px;
        border-radius: var(--pannel-radius);
        padding      : 5px 5px 5px 48px;
    }
    ol.dd-list > li.dd-item > div > div {
        display        : flex;
        flex-direction : column;
        justify-content: center;
    }
    ol.dd-list > li.dd-item > button[data-action] {
        position  : absolute;
        visibility: hidden;
    }
    ol.dd-list > li.dd-item [post_infos] {
        flex: 2 2 auto;
    }
    ol.dd-list > li.dd-item [post_image] img {
        background-color: var(--bg-light);
    }
    ol.dd-list > .dd-placeholder {
        background-color: #00000033;
        border-radius   : var(--pannel-radius);
    }
}
/* Menu config */
@media {
    #form_type {
        display: flex;
        gap    : 1rem;
    }
    .menu-item-type-selector {
        padding : 0;
        position: relative;
    }
    .menu-item-type-selector input {
        position: absolute;
        top     : 0;
        left    : 0;
        width   : 100%;
        height  : 100%;
        opacity : 0;
    }
    .menu-item-type-selector label {
        padding      : 12px;
        border       : 1px solid var(--bs-border-color);
        border-radius: var(--pannel-radius);
        padding      : 16px;
        background   : #fff;
        display      : flex;
        gap          : 1rem;
        color        : var(--dark);
        transition   : border-color ease 0.2s;
        align-items  : center;
        cursor       : pointer;
    }
    .menu-item-type-selector label:hover {
        border-color: var(--color-success);
    }
    .menu-item-type-selector input:checked + label {
        border-color: var(--color-success);
        background  : var(--color-success);
        color       : #fff;
    }
    .menu-item-type-selector i,
    .menu-type-icon {
        flex           : 0 0 50px;
        width          : 30px;
        height         : 30px;
        background     : var(--bg-light);
        display        : flex;
        justify-content: center;
        align-items    : center;
        color          : var(--color-muted);
        font-size      : 20px;
        border-radius  : var(--pannel-radius);
    }
    [data-type-hide] {
        display: none;
    }
    [data-type-hide].active {
        display: block;
    }
    [data-type-hide].row.active {
        display: flex;
    }
}
/* sidebar menu */
@media {
    #sidebar ul {
        padding         : 0 0 0 8px;
        list-style      : none;
        position        : relative;
        background-color: #fff;
        padding         : 5px;    
		border-radius: 16px;
    border: 1px solid rgba(30, 58, 110, .1);
    box-shadow: 0 4px 24px rgba(30, 58, 110, .08);
    }
    #sidebar ul li {
        display: block;
    }
    #sidebar ul li img {
        max-width    : 100%;
        border-radius: var(--pannel-radius);
    }
    #sidebar ul li a > i {
        display        : flex;
        justify-content: center;
        width          : 25px;
    }
    #sidebar ul.menu-level-0 li a {
        /* background     : var(--bg-light);*/
        color          : var(--dark);
        cursor         : pointer;
        display        : flex;
        align-items    : center;
        gap            : 1rem;
        font-weight    : 400;
        padding        : 6px 26px 6px 5px;
        text-decoration: none;
        transition     : background 0.1s ease-in-out;
        border-radius  : var(--pannel-radius);
    }
	
	
    #sidebar ul.menu-level-0 li:hover a {
        background: var(--bg-light);
    }
    #sidebar .sidebar-content > ul > li:hover {
        /*filter: drop-shadow(0 2px 7px rgb(0 0 0 / 0.06)) drop-shadow(0 2px 5px rgb(0 0 0 / 0.1));*/
        z-index: 1;
    }
    #sidebar ul.menu-level-0 li.sub-menu:hover a {
        border-radius: var(--pannel-radius) 0 0 var(--pannel-radius);
    }
    #sidebar li.sub-menu ul > li {
        background: #ffffff;
    }
    #sidebar li.sub-menu > a:after {
        content    : "\f061";
        font-family: "Font Awesome 7 Pro";
        position   : absolute;
        right      : 16px;
        color      : var(--color-muted);
        font-size  : 14px;
    }
    #sidebar li.sub-menu ul > li:hover > a {
        background   : var(--bg-light);
        border-radius: var(--pannel-radius);
    }
    #sidebar li.sub-menu:hover > ul {
        display      : block;
        position     : absolute;
        top          : 0;
        width        : 100%;
        background   : #ffffff;
        border-radius: 0 var(--pannel-radius) var(--pannel-radius) var(--pannel-radius);
        padding      : 5px;
    }
    @media(min-width:767px) {
        #sidebar ul li {
            position: relative;
        }
        #sidebar ul.menu-level-0 li a {
            position: relative;
        }
        #sidebar li.sub-menu ul {
            display   : none;
            background: var(--bg-light);
        }
        #sidebar li.sub-menu:hover > ul {
            width: 100%;
            left : 100%;
        }
        #sidebar li.goBack {
            display: none;
        }
    }
    @media (max-width:766px) {
        #sidebar li {
            position: unset;
        }
        #sidebar li.sub-menu ul,
        #sidebar li.sub-menu:hover > ul {
            display   : block;
            position  : relative;
            top       : 0;
            width     : 100%;
            height    : calc(100vh - 60px);
            background: var(--bg-light);
        }
        #sidebar li.sub-menu ul > li {
            background: transparent;
        }
        #sidebar li.sub-menu ul > li:hover > a,
        #sidebar ul.menu-level-0 li a,
        #sidebar ul.menu-level-0 li:hover a {
            background: transparent;
            padding   : 8px 16px;
        }
        #sidebar li.sub-menu:hover > ul,
        #sidebar ul.menu-level-0 ul {
            padding: 0;
            z-index: 1;
        }
        #sidebar li.sub-menu ul,
        #sidebar li.sub-menu:hover ul {
            left    : 100%;
            display : none;
            position: absolute;
        }
        #sidebar.menu-open li.sub-menu ul {
            display   : block;
            opacity   : 0;
            transition: all ease.2s;
        }
        #sidebar.menu-open li.sub-menu.active > ul {
            display: block;
            opacity: 1;
            left   : 0;
        }
    }
    #sidebar li.sub-menu:hover > ul.multi-column-split,
    #sidebar li.sub-menu:hover > ul.multi-column-split,
    ul.multi-column-split {
        column-count: 2;
        width       : 200% !important;
    }
}
/* tree checkbox */
@media {
    ul.tree-checkbox {
        display       : flex;
        flex-direction: column;
        gap           : 5px;
    }
    ul.tree-checkbox li {
        background   : #fff;
        padding      : 4px 8px;
        border-radius: 5px;
        position     : relative;
        overflow     : hidden;
    }
    ul.tree-checkbox li i {
        width          : 25px;
        display        : inline-flex;
        justify-content: center;
        padding        : 0 3px;
    }
    ul.tree-checkbox li > ul {
        padding-left : 12px;
        flex         : 0 0 100%;
        border       : 2px solid var(--bg-light);
        margin-top   : 5px;
        border-radius: 5px;
    }
    ul.tree-checkbox li input:before {
        content : "";
        width   : 100%;
        height  : 100%;
        position: absolute;
        top     : 0;
        cursor  : pointer;
    }
}
/* icon select */
@media {
    .form-control-icon {
        display  : flex;
        flex-wrap: wrap;
    }
    .form-control-icon input {
        width        : calc(100% - 34px);
        border-radius: 0 34px 34px 0;
    }
    .form-control-icon label {
        width: 100%;
    }
    .form-control-icon .icon-preview {
        width          : 34px;
        height         : 34px;
        background     : var(--color-secondary);
        color          : #fff;
        font-size      : 20px;
        display        : flex;
        justify-content: center;
        align-items    : center;
        border-radius  : 34px 0 0 34px;
    }
    #iconSelectorModal {
        z-index: 99999;
    }
    #iconSelectorModal #iconList {
        display  : flex;
        flex-wrap: wrap;
        gap      : 5px;
    }
    #iconSelectorModal #iconList .form-check-label {
        width          : 100px;
        height         : 100px;
        border         : 1px solid #ddd;
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;
        border-radius  : 5px;
        text-align     : center;
        font-size      : 14px;
        padding        : 5px;
        line-height    : 16px;
    }
    #iconSelectorModal #iconList .form-check-label:hover {
        border-color: var(--color-success);
    }
    #iconSelectorModal #iconList .form-check-label i {
        height         : 100%;
        font-size      : 25px;
        width          : 100%;
        display        : flex;
        justify-content: center;
        align-items    : center;
    }
    #iconSelectorModal #iconList {
        max-height: 70vh;
        overflow-y: scroll;
    }
    #iconSelectorModal #iconList .form-check {
        padding: 0;
    }
    #iconSelectorModal #iconList .form-check input {
        display: none;
    }
    #iconSelectorModal #iconList .form-check input {
        display: none;
    }
    #iconSelectorModal #iconList .form-check input:checked + label {
        border-color: var(--color-danger);
    }
}
/* Reservation */
@media {
    #reservationsCapacity .selected {
        background-color: #000!important;
    }
    #reservationsCapacity .selecting {
        background-color: #000!important;
    }
    #reservationsCapacity .isWeekend {
        background-color: var(--bg-light-2)!important;
    }
    #reservationsCapacity .isWeekend.selected {
        background-color: #000!important;
    }
    #reservationsCapacity .selected a.dropdown-toggle {
        color: #fff;
    }
    #reservationsCapacity .selecting a.dropdown-toggle {
        color: #fff;
    }
    #reservationsCapacity .isWeekend.selected a.dropdown-toggle {
        color: #fff;
    }
    #reservationsCapacity td {
        color       : #000;
        border-right: 1px solid #fff;
        padding     : 5px!important !important;
        min-width   : 60px;
    }
    #reservationsCapacity .pastille {
        width           : 30px;
        height          : 20px;
        font-size       : 12px;
        border-radius   : 40px;
        display         : inline-flex;
        justify-content : center;
        background-color: var(--color-success);
        align-items     : center;
        color           : #fff;
    }
    #reservationsCapacity thead th {
        padding   : 2px;
        background: var(--bg-light-2);
    }
    #reservationsCapacity tr.tr-cat-title > td {
        padding    : 16px 16px 4px 0;
        font-weight: 500;
    }
    @media (max-width:1420px) {
        .head-cell {
            position: sticky;
            top     : 0;
            left    : 0;
            z-index : 200;
        }
    }
    .periode_container .periode-header {
        margin-bottom: 24px;
        padding      : 12px;
        border-radius: var(--pannel-radius);
    }
    .periode_container .items {
        padding: 12px;
    }
    .periode_container label {
        font-weight: 500;
        color      : #000;
        white-space: nowrap;
    }
    .periode_container .btn-gestion-section {
        display    : flex;
        align-items: center;
    }
    .periode_container .items:nth-child(even) {
        background-color: var(--bg-light-0)!important;
        border-radius   : var(--pannel-radius);
    }
    .ajaxSearchUsers + .select2 .select2-selection {
        background-color: #fff !important;
    }
    @media (max-width:580px) {
        .periode_container .form-group {
            width: 100%;
        }
        .periode_container .btn-gestion-section {
            width: 100%;
        }
    }
}
/* Shop forms */
@media {
    .shop-images#pictures_more .slim {
        min-height: 180px;
    }
    .shop-images#pictures_more .slim-label {
        font-size  : 14px;
        line-height: 14px;
    }
}
/* Messages */
@media {
    #message-container {
        min-height: 350px;
    }
    .message-list {
        display       : flex;
        flex-direction: column;
        gap           : 8px;
        background    : var(--bg-light);
        padding       : 8px;
        border-radius : var(--pannel-radius);
        height        : 100%;
        overflow-y    : auto;
        height        : 100%;
        max-height    : calc(100vh);
        /*290px*/
    }
    .message-list .message-list-header {
        display       : flex;
        flex-wrap     : wrap;
        gap           : 8px;
        align-items   : center;
        padding-bottom: 12px;
    }
    .message-list .message-list-header .search-bar {
        max-width : 250px;
        background: #fff;
    }
    .message-user {
        background   : var(--bg-light-0);
        border-radius: var(--pannel-radius);
        Padding      : 8px;
        border       : 1px solid transparent;
        transition   : all ease 0.2s;
        cursor       : pointer;
    }
    .message-user:hover {
        background: #fff;
    }
    .message-user.active {
        border-color: var(--color-success);
        background  : #fff;
        cursor      : default;
    }
    .message-content .date,
    .message-user .message-user-date-last {
        font-size: 13px;
        color    : var(--color-muted);
    }
    .message-user .message-user-message {
        font-size  : 14px;
        color      : var(--color-muted);
        line-height: 110%;
    }
    .message-content {
        list-style    : none;
        display       : flex;
        flex-direction: column;
        gap           : 1rem;
        height        : calc(100vh - 375px);
        overflow-y    : scroll;
        padding       : 0 24px 48px;
    }
    .message-content .message {
        background   : var(--bg-light-0);
        border-radius: var(--pannel-radius);
        Padding      : 8px;
        font-size    : 14px;
        color        : var(--dark);
        line-height  : 120%;
    }
    .message-content li {
        max-width: 450px;
    }
    .message-content li.admin {
        align-self: flex-end;
    }
    .message-content .date {
        padding-top: 2px;
    }
    .message-content li.admin .date {
        text-align: right;
    }
    .message-content li.admin .message {
        /*background: var(--color-primary);
        color     : #fff;*/
        background: #f9ecec;
        color     : #000000;
    }
    .message-content li.form {
        padding  : 0;
        max-width: unset;
    }
    @media (max-width:767px) {
        .message-list {
            height    : auto;
            max-height: unset;
            overflow-y: visible;
        }
        .message-content {
            height    : auto;
            overflow-y: visible;
            padding   : 0;
        }
        .message-content li:not(.admin) {
            padding-right: 16px;
        }
        .message-content li.admin {
            padding-left: 16px;
        }
    }
}
input[type=tel] {
    border      : 2px solid;
    border-color: #fff;
}
.iti {
    display: block !important;
}
/* d-flex g-3 align-items-center flex-wrap */
.form-filter.products-filter {
    display        : flex;
    gap            : 1rem;
    align-items    : center;
    flex-wrap      : wrap;
    justify-content: space-between;
}
.form-filter .products-filter-inputs,
.form-filter .products-filters-action {
    display    : flex;
    gap        : 1rem;
    align-items: center;
    flex-wrap  : wrap;
}
.form-filter .products-filters-action.active {
    width: 100%;
}
.form-filter .products-filters-action.active .btn-advanced-search {
    background: var(--color-danger);
    color     : #fff;
}

.select2-item-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.select2-item-img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 4px;
	background: #f5f5f5;
}


/* =========================================
   GLOBAL SORTABLE SYSTEM
========================================= */

/* =========================================
   GLOBAL SORTABLE + ADMIN LIST SYSTEM
========================================= */

/* Container */
.sortable-container {
  position: relative;
  border-top: 1px solid #eee;
}

/* Élément */
.sortable-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f3f3;
  position: relative;
  transition: background 0.15s ease,
              box-shadow 0.15s ease,
              transform 0.15s ease;
}

/* Hover léger premium */
.sortable-item:hover {
  background: #f9fafb;
}

/* Handle */
.sortable-handle {
  cursor: grab;
  user-select: none;
  color: #bbb;
}

.sortable-handle:active {
  cursor: grabbing;
}

/* Contenu principal */
.sortable-content {
  flex-grow: 1;
}

/* Ligne secondaire (ex: group label) */
.sortable-meta {
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 2px;
}

/* Ligne principale */
.sortable-title {
  font-size: 14px;
}

/* Boutons action */
.sortable-actions button {
  opacity: .7;
}

.sortable-actions button:hover {
  opacity: 1;
}

/* Élément sélectionné */
.sortable-chosen {
  background: #ffffff !important;
  border-color: #d0d7de !important;
}

/* Élément en drag */
.sortable-drag {
  opacity: 0.95 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
  transform: scale(1.02);
  z-index: 999;
}

/* Placeholder */
.sortable-ghost {
  opacity: 0.3 !important;
  background: #f8f9fa !important;
  border: 1px dashed #ced4da !important;
  border-radius: 8px;
}