/*
    Violet clair : #853ea5
    Violet foncé : #502d87
    Gris clair   : #4a4a49
    Gris foncé   : #3c3c3b
*/

.light-theme {
    --btn-login_background: #853ea5;
    --btn-login_color: white;
    --forgot_password: #853ea5;
    --a_link: black;
    /* a, a:link, a:visited */
    --main_background: rgb(249 250 251/1); /*white;*/
    /*#F0F2F5; */
    /* div.main */
    --menu_header_background: white;
    --menu_background: rgba(133, 62, 165, 0.8);
    /* #cssmenu */
    --menu_background_hide_menu: white;
    /* #hide_menu */
    --menu_toggle: #4a4a49;
    /* #hide_menu #toggle */
    --menu_label_color: white;
    /* #cssmenu ul li a */
    --menu_sub_background: whitesmoke;
    /* #cssmenu ul ul li a */
    --menu_sub_color: #4a4a49;
    /* #cssmenu ul ul li a */
    --menu_icon_color: white;
    /* #cssmenu ul li a span */
    --menu_active_icon_color: white;
    /* #cssmenu ul li a.active_li span */
    --menu_active_label_color: #853ea5;
    /* #cssmenu ul li a.active_li */
    --menu_active_label_background: #d9d9d8;
    /* #cssmenu ul li a.active_li */
    --menu_mini_color: #4a4a49;
    /* div.mini_menu */
    --menu_mini_background: white;
    /* div.mini_menu */
    --menu_mini_border: #853ea5;
    /* div.mini_menu */
    --dashboard_h4: #333333;
    /* .sub-header h4 */
    --dashboard_box_background: white;
    /* .dashboard-box */
    --dashboard_text_color: black;
    /* .horizontal-list */
    --dashboard_footer_color: #333333;
    /* .sub-footer span */
    --rightblock_background: rgb(249 250 251/1); /*#f0f2f5; */
    /* div.rightblock */
    --header_background: #4a4a49;
    /* div.header */
    --header_color: white;
    /* div.topleft */
    --select_background: white;
    /* div.styled-select select */
    --select_color: black;
    /* div.styled-select select */
    --lnr: #502d87;
    /* lnr */
    --lnr_title: black;
    /* lnr-title */
    --list_background: white;
    /* listBackground*/
    --list_color: black;
    /* listBackground*/
    --list_header_color: black;
    /* div.listHeader */
    --detail_background: white;
    --detail_background-2: rgb(249 250 251/1);
    /* div.detail */
    --detail_color: black;
    /* div.detail */
    --list_body_background: white;
    /* div.listBody */
    --list_body_color: black;
    /* div.listBody */
    --input_background: white;
    /* input */
    --input_color: black;
    /* input */
    --input_background_ko: #f8e0e0;
    /* require_ko */
    --input_color_ko: black;
    /* require_ko */
    --input_background_readonly: #f6f6f6;
    /* input.readonly */
    --input_border: none;
    /* input.readonly */
    --person_forms_link: #1a0dab;
    /* person_forms_link */
    --dropdown-background: white;
    /* dropdown */
    --dropdown-color: #502d87;
    /* dropdown */
    --action_background: #f6f6f6;
    /* div.actionmenu */
    --action_color: black;
    /* div.actionmenu ul li */
    --dialog_header_border: #502d87;
    --dialog_header_background: #853ea5;
    --dialog_header_color: #fff;
    --dialog_header_button_background: #853ea5;
    --dialog_header_button_hover_background: #502d87;
    --dialog_background: white;
    /* .ui-widget-content */
    --dialog_color: black;
    /* .ui-widget-content */
    --event_color: black;
    /* .event */
    --calendar_top_date_color: black;
    --calendar_top_date_background: #eee;
    /* .calendar_top_date */
    --placeholder_color: #555555;
    /* placeholder */
    --welcome_tile_color: black;
    /* div.welcome_tile */
    --welcome_tile_background: white;
    /* div.welcome_tile */
    --divmsg_tile_color: #333333;
    /* div.welcome_tile */
    --divmsg_tile_background: white;
    /* div.welcome_tile */
    --divmsg_header_background: #853ea5;
    --mytile_background: white;
    /* div.mytile */
    --mytile_color: black;
    /* div.mytile */
    --mytile_hover_background: rgba(134, 63, 166, 0.25);
    /* div.tiledivover */
    --mytile_hover_color: black;
    /* div.tiledivover */
    --mygroup_manager_header_background: white;
    /* mygroup_manager_header */
    --mygroup_manager_header_color: black;
    /* mygroup_manager_header */
    --mygroup_manager_body_background: white;
    /* mygroup_manager_header */
    --mygroup_manager_body_color: black;
    /* mygroup_manager_header */
    --grid_odd_background: #eee;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --grid_even_background: #fff;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --grid_odd_color: #000000;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --grid_even_color: #000000;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --filterboximg: #502d87;
    /* span.filterboximg */
    --cross_delete_blue: blue;
    /* lnr-cross-delete-blue */
    --faketabup_background: #502d87;
    --faketabdown_background: #853ea5;
    --faketab_line: #502d87;
    --calendar_cell_hover: rgba(133, 62, 165, 0.5);
    --autocomplete_list_color: #333;
    --form_message_background: #853ea5;
    --form_message_color: white;
    --spinner_color: #502d87;
    --grid_color_filter: none;
    --help_background: #853ea5;
    --help_border: #502d87;
    --help_header_border: #502d87;
    --help_header_background: #853ea5;
    --help_header_color: #fff;
    --help_header_button_background: #853ea5;
    --help_header_button_hover_background: #502d87;
    --help_result_background: #fff;
    --help_result_delimiter: #888;
    --button_background: #853ea5;
    --button_hover_background: #502d87;
    --h3_color: black;
    --button_color: #853ea5;
    --button_color_hover: #502d87;
    --button_background_color: #853ea5;
    --button_background_color_hover: #502d87;
    --button_text_color: #fff;
    --button_text_color_hover: #fff;
    --button_background_color_active: #853ea5;
    --c_select-dropdown-content: #f9f9f9;
    --c_select-dropdown-content_li: black;
    --tabContainer-background: white;
    --tabCommon-color: rgb(107 114 128/1); /*#502d87; */
    --tabUp: rgb(126 34 206/1); /* #502d87; */
    --qrcode-background-color: white;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --timeline_header_background: white;
}

.dark-theme {
    --btn-login_background: #853ea5;
    --btn-login_color: white;
    --forgot_password: #853ea5;
    --a_link: #bbbbbb;
    /* a, a:link, a:visited */
    --main_background: #2b2b2b;
    /* div.main */
    --menu_header_background: #bbbbbb;
    --menu_background: #2b2b2b;
    /* #cssmenu */
    --menu_background_hide_menu: #2b2b2b;
    /* #hide_menu */
    --menu_toggle: #bbbbbb;
    /* #hide_menu #toggle */
    --menu_label_color: #bbbbbb;
    /* #cssmenu ul li a */
    --menu_sub_background: #2b2b2b;
    /* #cssmenu ul ul li a */
    --menu_sub_color: #bbbbbb;
    /* #cssmenu ul ul li a */
    --menu_icon_color: white;
    /* #cssmenu ul li a span */
    --menu_active_icon_color: #2b2b2b;
    /* #cssmenu ul li a.active_li span */
    --menu_active_label_color: #853ea5;
    /* #cssmenu ul li a.active_li */
    --menu_active_label_background: #d9d9d8;
    /* #cssmenu ul li a.active_li */
    --menu_mini_color: #bbbbbb;
    /* div.mini_menu */
    --menu_mini_background: #2b2b2b;
    /* div.mini_menu */
    --menu_mini_border: #2b2b2b;
    /* div.mini_menu */
    --dashboard_h4: #bbbbbb;
    /* .sub-header h4 */
    --dashboard_box_background: #2b2b2b;
    /* .dashboard-box */
    --dashboard_text_color: #bbbbbb;
    /* .horizontal-list */
    --dashboard_footer_color: #bbbbbb;
    /* .sub-footer span */
    --rightblock_background: #2b2b2b;
    /* div.rightblock */
    --header_background: #2b2b2b;
    /* div.header */
    --header_color: #bbbbbb;
    /* div.topleft */
    --select_background: #2b2b2b;
    /* div.styled-select select */
    --select_color: #ffffff;
    /* div.styled-select select */
    --lnr: #bbbbbb;
    /* lnr */
    --lnr_title: #bbbbbb;
    /* lnr-title */
    --list_background: #2b2b2b;
    /* listBackground*/
    --list_color: #bbbbbb;
    /* listBackground*/
    --list_header_color: #bbbbbb;
    /* div.listHeader */
    --detail_background: #2b2b2b;
    --detail_background-2: #2b2b2b; /*rgb(249 250 251/1);*/
    /* div.detail */
    --detail_color: #bbbbbb;
    /* div.detail */
    --list_body_background: #2b2b2b;
    /* div.listBody */
    --list_body_color: #bbbbbb;
    /* div.listBody */
    --input_background: #2b2b2b;
    /* input */
    --input_color: #ffffff;
    /* input */
    --input_background_ko: #f8e0e0;
    /* require_ko */
    --input_color_ko: #2b2b2b;
    /* require_ko */
    --input_background_readonly: #2b2b2b;
    /* input.readonly */
    --input_border: initial;
    /* input.readonly */
    --person_forms_link: #ffffff;
    /* person_forms_link */
    --dropdown-background: #2b2b2b;
    /* dropdown */
    --dropdown-color: #bbbbbb;
    /* dropdown */
    --action_background: #2b2b2b;
    /* div.actionmenu */
    --action_color: #bbbbbb;
    /* div.actionmenu ul li */
    --dialog_header_border: #502d87;
    --dialog_header_background: #853ea5;
    --dialog_header_color: #fff;
    --dialog_header_button_background: #853ea5;
    --dialog_header_button_hover_background: #502d87;
    --dialog_background: #2b2b2b;
    /* .ui-widget-content */
    --dialog_color: #bbbbbb;
    /* .ui-widget-content */
    --event_color: #2b2b2b;
    /* .event */
    --calendar_top_date_color: #eee; /* #2b2b2b; */
    --calendar_top_date_background: #2b2b2b; /* #eee; */
    /* .calendar_top_date */
    --placeholder_color: #bbbbbb;
    /* placeholder */
    --welcome_tile_color: #bbbbbb;
    /* div.welcome_tile */
    --welcome_tile_background: #2b2b2b;
    /* div.welcome_tile */
    --divmsg_tile_color: #bbbbbb;
    /* div.welcome_tile */
    --divmsg_tile_background: #2b2b2b;
    /* div.welcome_tile */
    --divmsg_header_background: #2b2b2b;
    --mytile_background: #2b2b2b;
    /* div.mytile */
    --mytile_color: #bbbbbb;
    /* div.mytile */
    --mytile_hover_background: rgba(59, 59, 59, 0.75);
    /* div.tiledivover */
    --mytile_hover_color: black;
    /* div.tiledivover */
    --mygroup_manager_header_background: #2b2b2b;
    /* mygroup_manager_header */
    --mygroup_manager_header_color: #bbbbbb;
    /* mygroup_manager_header */
    --mygroup_manager_body_background: #2b2b2b;
    /* mygroup_manager_header */
    --mygroup_manager_body_color: #bbbbbb;
    /* mygroup_manager_header */
    --grid_odd_background: #2b2b2b;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --grid_even_background: #2b2b2b;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --grid_odd_color: #bbbbbb;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --grid_even_color: #bbbbbb;
    /* .tablesorter-metro-dark tr:nth-child(odd) > td */
    --filterboximg: #bbbbbb;
    /* span.filterboximg */
    --cross_delete_blue: #bbbbbb;
    /* lnr-cross-delete-blue */
    --faketabup_background: #502d87;
    --faketabdown_background: #853ea5;
    --faketab_line: #502d87;
    --calendar_cell_hover: rgba(133, 62, 165, 0.5);
    --autocomplete_list_color: #bbbbbb;
    --form_message_background: #853ea5;
    --form_message_color: white;
    --spinner_color: #333;
    --grid_color_filter: grayscale(30%);
    --help_background: #2b2b2b;
    --help_border: #502d87;
    --help_header_border: #502d87;
    --help_header_background: #853ea5;
    --help_header_color: #fff;
    --help_header_button_background: #853ea5;
    --help_header_button_hover_background: #502d87;
    --help_result_background: #fff;
    --help_result_delimiter: #888;
    --h3_color: #bbbbbb;
    --button_color: #853ea5;
    --button_color_hover: #502d87;
    --button_background_color: #853ea5;
    --button_background_color_hover: #502d87;
    --button_text_color: #fff;
    --button_text_color_hover: #fff;
    --button_background_color_active: #853ea5;
    --c_select-dropdown-content: #2b2b2b;
    --c_select-dropdown-content_li: #bbbbbb;
    --tabContainer-background: #2b2b2b;
    --tabCommon-color: #bbbbbb;
    --tabUp: rgb(168 85 247);
    --qrcode-background-color: #bbbbbb;
    --card: 0 0% 16.9%;
    --card-foreground: 224 71.4% 4.1%;
    --timeline_header_background: #2b2b2b;
}

@font-face {
    font-family: "Exo2.0";
    font-style: normal;
    font-weight: normal;
    src: url("Exo2.0-Medium.otf") format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto Regular"), local("Roboto-Regular"),
        url(Roboto.woff) format("woff");
}

@font-face {
    font-family: "exo";
    font-style: normal;
    font-weight: normal;
    src: url("Exo2.0-Medium.otf") format("truetype");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: normal;
    src: url(Roboto.woff) format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
    src: url("OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    src: url("material-design-icons/MaterialIcons.woff2") format("woff2");
}

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: "liga";
}

/* SPINNER */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#overlay {
    height: 100%;
    min-height: 60px;
    padding-top: 15px;
    width: 0;
    position: absolute;
    z-index: 1003;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
}

#loader {
    z-index: 110;
    display: none;
    position: absolute;
    top: calc(50vh - 40px);
    left: calc(50vw - 40px);
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #502d87;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader2 {
    z-index: 110;
    display: none;
    position: sticky;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 15px solid #f3f3f3;
    border-radius: 50%;
    border-top: 15px solid #502d87;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loaderDialog {
    z-index: 110;
    position: sticky;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    border: 15px solid #f3f3f3;
    border-radius: 50%;
    border-top: 15px solid #502d87;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

/***********/
/* SPINNER */
/***********/
.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: var(--spinner_color);

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

body {
    display: flex;
    flex-direction: row;
    margin: 0;
    font-family: Roboto, sans-serif;
    height: 100vh;
}

p {
    margin: 0;
}

div {
    box-sizing: border-box;
}

h1 {
}

h2 {
}

h3 {
    color: var(--h3_color);
}

h4 {
    margin-top: 0;
    margin-bottom: 0.66em;
}

@media screen and (max-width: 360px) {
    body {
    }

    div.login {
        display: block;
        width: auto;
        left: 2px;
        right: 2px;
        margin-left: auto;
        bottom: 100px;
    }
}

/********************/
/*   Common Header  */
/********************/
div.rightblock {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* prend toute la place restante */
    min-width: 0;
    /* obligatoire pour que les elements enfants ne dépassent pas */
    background-color: var(--rightblock_background);
}

div.header {
    display: flex;
    justify-content: space-between;
    height: 40px;
    background-color: var(--header_background);
    box-sizing: border-box;
}

div.topleft {
    display: block;
    box-sizing: border-box;
    float: left;
    height: 100%;
    line-height: 35px;
    cursor: pointer;
}

div.topleft div {
    margin-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--header_color);
    font-size: x-large;
}

@media all and (max-width: 768px) {
    div.topleft div {
        display: none;
    }
}

div.topright {
    display: flex;
    height: 100%;
    text-align: right;
    padding-right: 10px;
}

img.avatar {
    position: relative;
    object-fit: cover;
    width: 34px;
    height: 34px;
    top: -1px;
    border-radius: 50%;
}

div.avatar {
    position: relative;
    width: 34px;
    height: 34px;
    line-height: 34px;
    top: 3px;
    background-color: lightgray;
    color: white;
    text-align: center;
    overflow: hidden;
    border-radius: 50%;
}

img.avatar-big {
    position: relative;
    object-fit: cover;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
}

div.main {
    display: flex;
    overflow: auto;
    box-sizing: border-box;
    margin: 10px 10px 10px 10px;
    background-color: var(--main_background);
}

form.BOForm {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

div.buttonbar {
    position: fixed;
    top: 0;
    left: 220px;
    height: 40px;
    z-index: 10;
    display: block;
}

.show_hide {
    display: none;
    cursor: pointer;
}

/* END */

.checkboxLabel {
    font-size: 14px;
}

.fieldlabel {
    font-size: 100%;
    text-align: right;
    white-space: nowrap;
}

.field-label-2 {
    color: rgb(107 114 128/1);
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

.required::before {
    content: "* ";
    color: red;
}

a,
a:link,
a:visited,
a:active {
    color: var(--a_link);
    text-decoration: none;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: normal;
    cursor: pointer;
}

/********/
/* FORM */
/********/
div.listBackground {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    color: var(--list_color);
    background-color: var(--list_background);
    overflow: auto;
}

div.listBackground2 {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    color: var(--list_color);
    background-color: var(--list_background);
}

div.detail {
    position: relative;
    display: block;
    width: 100%;
    color: var(--detail_color);
    background-color: var(--detail_background);
    overflow: auto;
}

div.listHeader {
    font-size: 16px;
    line-height: 30px;
    padding-left: 4px;
    color: var(--list_header_color);
    box-sizing: border-box;
    overflow: auto;
    border-bottom: 1px solid #c5c5c5;
    margin-bottom: 5px;
}

div.listFilter {
    box-sizing: border-box;
    padding: 10px 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

div.detail2 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-left: 4px;
    padding-right: 4px;
    border-left: 2px solid grey;
    border-right: 2px solid grey;
    width: 860px;
    height: 100px;
    text-align: left;
    color: #000000;
    background-color: white;
    overflow: auto;
}

div.detail3 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-left: 4px;
    padding-right: 4px;
    border-left: 2px solid grey;
    border-right: 2px solid grey;
    border-bottom: 2px solid grey;
    width: 860px;
    height: 60px;
    text-align: left;
    color: #000000;
    background-color: white;
    overflow: auto;
}

div.newdetail {
    position: relative;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 0;
    padding-left: 4px;
    padding-right: 4px;
    border: 2px solid grey;
    text-align: left;
    color: #000000;
    background-color: white;
    overflow: auto;
}

table.detail {
    font-size: 10pt;
    text-align: center;
    overflow: scroll;
}

/*************/
/* LIST FORM */
/*************/
div.listBody {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 16px;
    color: var(--list_body_color);
    background-color: var(--list_body_background);
    min-height: 300px;
    overflow: auto;
}

div.listBody2 {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 16px;
    color: var(--list_body_color);
    background-color: var(--list_body_background);
    min-height: 300px;
}

/********/
/* TABS */
/********/
div.tabContainer {
    background-color: var(--tabContainer-background);
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    padding: 8px;
    margin: 20px 10px 10px 10px;
}

span.tabCommon {
    background-color: var(--tabContainer-background);
    margin-right: 0;
    color: var(--tabCommon-color);
    border-bottom: 1px solid rgba(107 114 128/0.3);
    font-size: 14px;
    padding: 3px 15px 3px 15px;
    cursor: pointer;
}

span.tabUp {
    color: var(--tabUp); /* rgb(126 34 206/1); */
    border-bottom: 2px solid rgb(126 34 206/1);
}

span.tabCommon:last-child {
    margin-right: 0;
}

div.tabContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    padding: 0 1rem 1rem;
}

td.faketabup {
    cursor: default;
    width: 100px;
    padding-left: 1em;
    padding-right: 1em;
    height: 2em;
    line-height: 2em;
    background-color: var(--faketabup_background);
    filter: var(--grid_color_filter);
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    border-radius: 4px 4px 0 0;
}

td.faketabdown {
    cursor: default;
    width: 100px;
    padding-left: 1em;
    padding-right: 1em;
    height: 2em;
    line-height: 2em;
    background-color: var(--faketabdown_background);
    filter: var(--grid_color_filter);
    font-size: 14px;
    text-align: center;
    font-weight: normal;
    color: white;
    white-space: nowrap;
    border-radius: 4px 4px 0 0;
}

td.faketabdown:hover {
    background-color: var(--faketabup_background);
    /*white;*/
    filter: var(--grid_color_filter);
    cursor: pointer;
}

td.faketabline {
    cursor: default;
}

div.faketabcontentup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

div.faketabcontentdown {
    display: none;
}

.form_completed_hidden,
p.form_completed_hidden ~ p {
    color: lightgray !important;
}

/************/
/*  BUTTON  */
/************/
button,
input.bouton {
    cursor: pointer;
}

div.menubar {
    height: 30px;
    width: auto;
    text-align: center;
    vertical-align: middle;
    padding-right: 2px;
    padding-left: 2px;
    background-color: #f5f5f5;
    border: 1px solid #888;
}

a.menubarbtn {
    color: black;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-size: 8pt;
    cursor: pointer;
}

a.menubarbtn:link {
    color: black;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-size: 8pt;
}

a.menubarbtn:visited {
    color: black;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-size: 8pt;
}

a.menubarbtn:active {
    color: black;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    font-size: 8pt;
}

a.flatmenubar,
a.flatmenubar:hover {
    float: left;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
    border-radius: 3px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    /* centrage vertical */
    text-align: center;
    /* centrage horizontal */
    margin-left: 3px;
    margin-right: 3px;
}

/*************/
/*  REQUIRED */
/*************/
span.required {
    color: red;
    font-weight: bold;
}

/****************/
/*  LANG FLAGS  */
/****************/
option.lang_1 {
    background-image: url("../pictures/en.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-color: #ffffff;
    margin-right: 3px;
    margin-left: 3px;
    color: #333333;
    text-align: left;
}

option.lang_2 {
    background-image: url("../pictures/fr.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-color: #ffffff;
    margin-right: 3px;
    margin-left: 3px;
    color: #333333;
    text-align: left;
}

.pagesize {
    font-size: 8pt;
}

.toolbarfilterbtn {
    width: 120px;
    height: 22px;
    border-radius: 4px 4px 4px 4px;
}

a.menu,
a.menu:link,
a.menu:visited,
a.menu:active,
a.menu:hover {
    font-size: 11pt;
}

/* START */
/* Contact */
#office {
    margin: 5px;
    border: solid 1px black;
    padding: 10px;
}

div.assists {
    display: inline-flex;
    flex-wrap: wrap;
}

div.assist {
    display: table;
    position: relative;
    border: solid 1px black;
    height: 220px;
    width: 175px;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 5px;
}

div.assist-content {
    float: left;
    min-width: 175px;
    height: 225px;
    border: 1px solid black;
    margin: 5px;
    padding:5px;
}

div.assist-content2 {
    float: left;
    width: 175px;
    height: 190px;
    border: 1px solid black;
    margin: 2px;
}

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

div.workers {
    display: inline-block;
    margin: 5px 82px 10px;
}

div.coworkers {
    display: none;
    width: calc(100% - 5px);
    height: max-content;
    overflow: auto;
    margin-left: 5px;
}

/* END */

div.calendar {
    position: static;
    display: block;
    background: whitesmoke;
}

table.calendar {
    border: solid grey 1px;
    border-collapse: collapse;
    border-spacing: 0;
}

tr.calhead {
    border: 1px solid #ccc;
    height: 25px;
    font-style: normal;
    font-weight: normal;
    font-size: 10pt;
}

th.calhour {
    border: 1px solid #ccc;
    border-right: 1px solid black;
    width: 50px;
}

th.caldayWeek {
    text-align: center;
    border: 1px solid #ccc;
    border-right: 1px solid black;
    width: 90px;
    background-color: gainsboro;
    cursor: pointer;
}

th.caldayDay {
    text-align: center;
    border: 1px solid #ccc;
    border-right: 1px solid black;
    width: 927px;
    background-color: gainsboro;
    cursor: pointer;
}

tr.calbody {
    border: 1px solid #ccc;
    height: 20px;
    font-style: normal;
    font-weight: normal;
    font-size: 10pt;
}

td.calbody {
    border: 1px solid #ccc;
    text-align: right;
}

div.eventbody {
    display: block;
    font-style: normal;
    font-weight: normal;
    font-size: 8pt;
    text-align: left;
    padding-top: 2px;
    padding-left: 2px;
    color: black;
    overflow: hidden;
}

span {
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: normal;
}

select {
    font-family: Roboto, sans-serif;
}

input,
textarea {
    font-family: Roboto, sans-serif;
    overflow: hidden;
    width: 100%;
    height: 25px;
    border: solid 1px lightgrey;
    box-sizing: border-box;
}

input {
    background-color: var(--input_background);
    color: var(--input_color);
}

textarea {
    background-color: var(--input_background);
    color: var(--input_color);
    resize: none;
    border-radius: 20px;
    padding: 5px 8px 5px 8px;
}

div.filter {
    position: absolute;
    float: left;
    width: 150px;
    text-align: center;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    background-color: lightgrey;
}

div.filtertitle {
    background-color: grey;
    height: 22px;
}

div.calendartoolbar {
    position: relative;
    top: 0;
    left: 0;
    height: 40px;
    width: 1075px;
    display: block;
    background-color: white;
    padding-top: 2px;
}

.file-wrapper {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.file-wrapper .button {
    background-color: black;
    color: white;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    padding: 4px 18px;
}

.file-wrapper input {
    cursor: pointer;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.ui-dialog {
    z-index: 1001 !important;
}

.ui-autocomplete {
    z-index: 99999 !important;
    font-size: 12px !important;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 5px;
}

.ui-widget {
    font-family: Roboto, sans-serif;
}

.ui-widget input {
    font-family: Roboto, sans-serif;
    font-size: 15px;
}

.ui-corner-all {
    border-radius: 4px;
}

.ui-tooltip {
    z-index: 11000;
}

.jqte {
    margin: 0;
    border: 1px solid lightgrey;
    border-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.jqte_editor,
.jqte_source {
    min-height: 300px;
}

.jqte_editor h2 {
    font-family: "Exo2.0", sans-serif;
}

div.styled-select select {
    background: var(--select_background);
    color: var(--select_color);
    width: 300px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 25px;
    float: left;
    padding-bottom: 5px;
    padding-left: 2px;
}

div.styled-select.active,
a.skill_label.active {
    border: 2px solid #f99da4 !important;
}

.styled-select {
    position: relative;
    width: 300px;
    height: 25px;
    overflow: hidden;
    background-color: var(--select_background);
    border: 1px solid #bdc3c7;
    float: left;
}

.styled-select2 {
    width: 300px;
    height: 25px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 20px;
    background-color: white;
    border: 1px solid #bdc3c7;
    float: left;
}

.styled-select2 .form-dropdown {
    position: absolute;
    right: 0;
    margin-right: 2px;
    height: 25px;
    width: 25px;
    font-size: 1.8em;
    font-weight: bold;
}

.styled-select2 select::-ms-expand {
    display: none;
}

.styled-select2 select {
    width: calc(100% + 30px);
    height: 25px;
    border: none;
    position: absolute;
    background-color: transparent;
    appearance: none;
}

select.select {
    color: #4a4a49;
}

span.filterboximg {
    color: var(--filterboximg) !important;
}

.studio_available {
    text-align: left;
    cursor: pointer;
}

.studio_available .togglehide {
    display: none;
}

.studio_locked .togglehide {
    display: block;
}

.blue {
    color: blue;
}

.studio_locked {
    text-align: left;
    cursor: pointer;
}

.studio_submit,
.studio_draft {
    background-color: #502d87;
    color: white;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    height: 30px;
    line-height: 20px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: none;
    border: 0;
    min-width: 100px;
    white-space: nowrap;
}

.studio_submit:disabled,
.studio_submit[disabled] {
    color: rgb(128, 128, 128);
}

.studio_submit_label {
    color: white;
}

.studio_submit:hover {
}

::-webkit-input-placeholder {
    font-style: italic;
    color: #555;
}

input::placeholder {
    font-style: italic;
    color: var(--placeholder_color);
}

.require_callback {
    background-color: #f8e0e0;
}

.event_line .error {
    border: 2px solid red;
}

.event_line .error2 {
    background-color: red;
}

.event_line .success {
    background-color: lightgreen;
}

.tablesorter-header-inner {
    white-space: nowrap;
}

.tablesorter {
    font-family: "Roboto", sans-serif !important;
}

.tablesorterWindowSize {
    outline: 1px solid #502d87;
}

.tablesorter th,
.tablesorter td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tablesorter tr.type1,
.tablesorter tr.type2 {
    cursor: pointer;
    height: 25px;
}

.tablesorter tr.type1noclick,
.tablesorter tr.type2noclick {
    cursor: default;
    height: 25px;
}

.tablesorter tbody tr td {
    padding-left: 5px;
}

.tablesorter.tablesorter-metro-dark .tablesorter-header-inner {
    padding: 0;
    font-weight: 500;
}

.tablesorter-pager {
    font-size: 0.8em;
}

.tablesorter-pager div {
    cursor: pointer;
    color: #fff;
}

.tablesorter-metro-dark caption,
.tablesorter-metro-dark th,
.tablesorter-metro-dark thead td,
.tablesorter-metro-dark tfoot th,
.tablesorter-metro-dark tfoot td {
    font-size: 13px;
}

.pager > div:not(.pagelist),
.pager > .pagelist > .goto {
    width: 28px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 28px;
    background-color: #333;
    margin-right: 3px;
}

.pager .current {
    text-shadow: 1px 0 0 #fff;
    background-color: #502d87 !important;
}

/* Table search */

#search_2 tr > td,
#search_1 tr > td {
    padding-bottom: 10px;
}

/* Table Catering */

table#tablescroll {
    width: 100%;
    border-spacing: 0;
    border: 2px solid black;
}

table#tablescroll th,
table#tablescroll td,
table#tablescroll tr,
table#tablescroll thead,
table#tablescroll tbody,
table#tablescroll tfoot {
    display: block;
}

table#tablescroll thead tr,
table#tablescroll tfoot tr {
    /* minus scroll bar width */
    width: calc(100% - 11px);
}

table#tablescroll tr th {
    cursor: pointer;
    color: white;
    font-weight: normal;
    font-size: 0.9em;
    text-align: center;
    box-sizing: border-box;
}

table#tablescroll tr.type1 {
    background-color: white;
    color: black;
    font-size: 0.9em;
    cursor: pointer;
}

table#tablescroll tr.type2 {
    background-color: whitesmoke;
    color: black;
    font-size: 0.9em;
    cursor: pointer;
}

table#tablescroll tr:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
}

table#tablescroll tbody {
    max-height: 150px;
    overflow-y: auto;
    text-align: center;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

table#tablescroll thead {
    background-color: #4a4a49;
}

table#tablescroll tfoot {
    text-align: center;
}

table#tablescroll tbody td,
table#tablescroll thead th,
table#tablescroll tfoot td {
    width: 16%;
    float: left;
    border-right: 1px solid black;
    box-sizing: border-box;
}

table#tablescroll thead tr th,
table#tablescroll tfoot tr {
    height: 30px;
    line-height: 30px;
}

table#tablescroll tbody td:last-child,
table#tablescroll thead th:last-child,
table#tablescroll tfoot td:last-child {
    border-right: none !important;
}

div.ImageWait {
    text-align: center;
    background-image: url("../pictures/ajax.gif");
    background-repeat: no-repeat;
    background-position: center center;
}

.dialogNoTitle .ui-dialog-titlebar {
    display: none;
}

input.form_radio {
    width: auto;
    height: auto;
}

/*************/
/* DASHBOARD */
/*************/

.dsWidgetContainer {
    display: flex;
    flex-flow: column;
    width: calc((100% - 20px) / 2);
    min-width: 550px;
    height: 300px;
    margin: 5px;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: 1px solid hsl(220 13% 94%);
    border-radius: 0.5rem;
    padding: 0 0.5rem;
}

.dsWidgetTitle {
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.dsWidgetContent {
    flex: 1 1 auto;
    overflow: auto;
}

.customTable {
    font: 12px/18px "Roboto", Sans-serif;
    color: #000;
    background-color: var(--main_background);
    border-spacing: 0;
    margin: 10px 0 15px;
    text-align: left;
    border: #502d87 1px solid;
}

.customTable thead th,
.customTable tfoot td {
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    background-color: #333;
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customTable thead th {
    position: sticky;
    top: 0;
}

.tablesorter-metro-dark tr.odd > td {
    background-color: #eee;
}

.tablesorter-metro-dark tr:nth-child(odd) > td {
    background-color: var(--grid_odd_background);
    color: var(--grid_odd_color);
}

.tablesorter-metro-dark tr:nth-child(even) > td {
    background-color: var(--grid_even_background);
    color: var(--grid_even_color);
}

.customTable tbody td {
    background-color: #fff;
/*    vertical-align: top;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
}

.customTable tbody tr:nth-child(odd) > td {
    background-color: var(--grid_odd_background);
    color: var(--grid_odd_color);
}

.customTable tbody tr:nth-child(even) > td {
    background-color: var(--grid_even_background);
    color: var(--grid_even_color);
}

.customTable tbody tr > td.enabled {
    background-color: #bbb;
}

.customTable tbody tr:hover > td {
    background-color: #bbb;
    color: #000;
}

.customTable tbody tr:hover > td > span {
    color: #000;
}

/* Stylé surchargé pour les custom table des dotations */
.customDotationTable {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

.customDotationTable tbody tr td span,
.customDotationTable thead tr th span {
    display: flex;
    justify-content: flex-start;
    column-gap: 5px;
    cursor: pointer;
}

.customDotationTable tbody tr td.selected {
    background-color: #aaa !important;
}

.customDotationTable tbody tr td i,
.customDotationTable thead tr th i {
    font-size: 18px;
}

.customDotationTable tbody tr td i.lnr-cross-circle {
    color: red;
}

.customDotationTable tbody tr td i.lnr-checkmark-circle {
    color: green;
}

.customDotationTable tbody tr td i.lnr-question-circle {
    color: darkgray;
}

.customDotationTable tbody tr td i.lnr-menu-circle {
    color: transparent;
}

.customDotationTable thead tr th i.lnr-menu-circle {
    color: transparent;
}

.customDotationTable thead tr th i {
    color: #fff;
}

.poweredScroll {
    float: right;
    width: 110px;
    margin-bottom: 10px;
    text-align: center;
}

.poweredNoScroll {
    float: right;
    right: 0;
    bottom: 10px;
    width: 110px;
    text-align: center;
}

input.error {
    border: 2px solid red;
}

div.myghosttile {
    min-width: 350px;
    width: calc(30% - 20px);
    height: 150px;
    margin-bottom: 40px;
    flex-grow: 1;
    margin-right: 20px;
    margin-left: 20px;
}

div.mytile {
    cursor: pointer;
    min-width: 300px;
    width: calc(30% - 20px);
    height: 150px;
    margin-bottom: 40px;
    flex-grow: 1;
    margin-right: 20px;
    margin-left: 20px;
    background-color: var(--mytile_background);
    color: var(--mytile_color);
    overflow: hidden;
    padding: 10px;
    transition: transform 0.25s ease;
    transform: scale(1);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: 0.5rem;
}

div.mytile:hover {
    transition: transform 0.1s ease;
    transform: scale(1.05);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    z-index: 1000;
}

div.mytile:hover div.tiledivover {
    display: block;
}

div.tiledivover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mytile_hover_background);
    color: var(--mytile_hover_color);
    text-align: center;
    line-height: 130px;
}

span.tilebutton {
    text-align: center;
    margin: 10px;
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #dae2e6;
}

div.mytile hr {
    height: 1px;
    border: 0;
    background-color: #bbb;
}

div.mytile img.avatar {
    position: relative;
    object-fit: cover;
    width: 80px;
    height: 80px;
    top: 5px;
    border-radius: 50%;
}

div.mytile div.avatar {
    position: relative;
    width: 80px;
    height: 80px;
    line-height: 80px;
    top: 5px;
    background-color: lightgray;
    color: white;
    text-align: center;
    overflow: hidden;
    border-radius: 50%;
    font-size: 2.5rem;
}

div.divlist {
    height: calc(100vh - 120px);
}

span.doctile {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    font-size: 13px;
}

ul.doctile {
    list-style: none;
    margin: 0;
    padding: 5px 0 0 10px;
}

span.cateringtile {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    font-size: 13px;
}

ul.cateringtile {
    list-style: none;
    margin: 0;
    padding: 5px 0 0 10px;
    cursor: default;
}

span.formtile {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    font-size: 13px;
}

ul.formtile {
    list-style: none;
    margin: 0;
    padding: 5px 0 0 10px;
    cursor: default;
}

span.infotile {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    font-size: 13px;
}

ul.infotile {
    list-style: none;
    margin: 0;
    padding: 5px 0 0 10px;
    cursor: default;
}

div.mymessagestile,
div.welcome_tile {
    position: relative;
    margin-left: 50px;
    margin-right: 50px;
    color: var(--welcome_tile_color);
    background-color: var(--welcome_tile_background);
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: 1px solid hsl(220 13% 94%);
    border-radius: 0.5rem;
}

div.welcome_tile {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

div.welcome_tile > img {
    max-height: 80px;
    max-width: 300px;
    object-fit: contain;
}

@media screen and (max-width: 700px) {
    div.welcome_tile {
        margin: 10px;
    }

    div.welcome_tile > img {
        max-width: 100%;
    }
}

div.actionmenu {
    display: none;
    position: absolute;
    right: 1px;
    top: 36px;
    z-index: 100;
    background-color: var(--action_background);
    color: var(--action_color);
    padding: 10px 0 10px 0;
    border: 1px solid #c5c5c5;
    border-radius: 0 0 4px 4px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
    min-width: 130px;
}

ul.actionmenu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 25px;
}

div.actionmenu ul li {
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

div.actionmenu ul li:hover {
    border-left: 5px solid #853ea5;
    background-color: rgba(154, 154, 153, 0.5);
    padding-left: 5px;
}

div.filterTag {
    float: left;
    background-color: royalblue;
    color: white;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    font-size: 11px;
    margin-top: 6px;
    margin-right: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

div.filterTagClose {
    float: right;
    margin-left: 10px;
    height: 19px;
    line-height: 19px;
    font-weight: bold;
    cursor: pointer;
}

div.filterTagClose::after {
    content: " x";
}

div.filtermenu {
    display: none;
    position: absolute;
    right: 1px;
    top: 36px;
    z-index: 100;
    background-color: var(--action_background);
    padding: 10px 10px 10px 10px;
    border: 1px solid #c5c5c5;
    flex-direction: column;
}

.notification_div {
    width: 50px;
    height: 100%;
    cursor: pointer;
    margin-right: 10px;
    padding-top: 4px;
}

.notification_icon {
    position: relative;
    line-height: 40px;
    color: white;
    opacity: 0.3;
    font-size: 30px;
    transform: rotate(-30deg);
    margin: -5px 5px 5px 5px;
}

.notification_icon_on {
    opacity: 1;
}

#notification_counter {
    display: none;
    position: relative;
    color: white;
    background: red;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    line-height: 15px;
    top: -45px;
    left: 0;
}

.messageslist {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 40px;
    width: 300px;
    min-height: 100px;
    max-height: calc(-100px + 100vh);
    overflow: scroll;
    z-index: 10000;
    background-color: #f2f3f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

.message_item {
    padding-bottom: 10px;
    cursor: pointer;
    padding-left: 5px;
    padding-top: 5px;
    border-radius: 8px;
    background: rgba(133, 62, 165, 0.5);
    color: white;
    margin-bottom: 3px;
}

.message_item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    background-color: #853ea5;
}

.message_no_new_message {
    display: block;
    text-align: center;
    height: 100px;
    line-height: 100px;
    font-style: italic;
    opacity: 0.5;
}

.message_age {
    display: block;
    font-size: 12px;
    line-height: 10px;
}

input[type="checkbox"] {
    width: auto;
    height: auto;
    box-sizing: initial;
}

.message_read {
    color: rgba(0, 0, 0, 0.5);
}

.slideshow {
    width: calc(100% - 100px);
    /*350px;*/
    height: 200px;
    overflow: hidden;
    border: 3px solid #f2f2f2;
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
    width: 100%;
    height: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.slideshow li {
    float: left;
    width: 100%;
}

#message-box * {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.divmsg {
    display: none;
    position: relative;
    overflow: hidden;
    background-color: var(--divmsg_tile_background);
    color: var(--divmsg_tile_color);
    width: 100%;
    height: 135px;
    min-height: 135px;
    border-radius: 4px;
}

.divmsg:first-of-type {
    display: block;
}

div.message_next {
    position: absolute;
    top: 60px;
    left: calc(100% - 30px);
    width: 30px;
    opacity: 0.8;
}

span.message_next {
    margin-right: 5px;
    font-size: 40px;
    background: white;
    color: rgba(80, 45, 135, 0.3);
}

.message_next:hover {
    color: rgba(80, 45, 135, 1);
}

div.message_full {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(256, 256, 256, 0.8);
    text-align: center;
    cursor: pointer;
}

div.message_full:hover {
    background: rgba(133, 62, 165, 0.6);
}

div.message_full:hover span {
    color: rgba(256, 256, 256, 1);
}

span.message_full {
    margin-right: 5px;
    font-size: 30px;
    color: rgba(80, 45, 135, 1);
}

div.message_min {
    display: none;
    position: absolute;
    bottom: -32px;
    width: 100%;
    background: rgba(256, 256, 256, 1);
    text-align: center;
    cursor: pointer;
    border-left: 1px solid #dae2e6;
    border-right: 1px solid #dae2e6;
    border-bottom: 1px solid #dae2e6;
}

div.message_min:hover {
    background: rgba(133, 62, 165, 0.6);
}

div.message_min:hover span {
    color: rgba(256, 256, 256, 1);
}

span.message_min {
    margin-right: 5px;
    font-size: 30px;
    color: rgba(80, 45, 135, 1);
}

#clear_translation_lang1 {
    color: red;
    font-weight: bold;
    position: absolute;
    display: none;
    right: 3px;
    bottom: 3px;
    cursor: pointer;
}

#clear_translation_lang2 {
    color: red;
    font-weight: bold;
    position: absolute;
    display: none;
    right: 3px;
    bottom: 3px;
    cursor: pointer;
}

#clear_translation_lang1:hover {
    display: block;
}

#clear_translation_lang2:hover {
    display: block;
}

#n_translation_lang1:hover + #clear_translation_lang1 {
    display: block;
}

#n_translation_lang2:hover + #clear_translation_lang2 {
    display: block;
}

.search_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    clear: both;
    font-size: 10px;
    width: 300px;
}

#recap_list .search_list {
    clear: initial;
}

#recap_list p {
    clear: both;
    min-height: 25px;
}

.search_list .item {
    background-color: #9d64b7;
    border: 1px solid rgb(128, 128, 128);
    border-radius: 3px 3px 3px 3px;
    padding: 2px;
    color: white;
    margin: 0 5px 0 5px;
}

.search_list .item .text {
    vertical-align: top;
}

.search_list .item .del {
    float: initial;
    cursor: pointer;
    color: white;
    margin-left: 2px;
    font-size: 12px;
}

.input_error {
    background-color: #f8e0e0;
}

.customTable td.selected {
    color: #853ea5 !important;
    background-color: #d9d9d8 !important;
}

input.readonly {
    background-color: var(--input_background_readonly);
    border: var(--input_border);
}

#headerTile {
    width: 250px;
    height: 150px;
    cursor: pointer;
    text-align: center;
}

#headerOver {
    display: none;
    position: absolute;
    width: 100%;
    height: calc(100% - 25px);
    color: white;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.4);
}

#headerImg {
    max-width: 200px;
    max-height: 100px;
}

#headerTile:hover #headerOver {
    display: block;
}

.fancybox-content {
    height: 90vh !important;
}

#d_message p {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

#d_message table {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.mce-tinymce .char_count {
    margin: 2px 0 2px 2px !important;
    padding: 8px !important;
}

/* Optional: Remove the html path code from the status bar. */
.mce-path {
    display: none !important;
}

input[type="radio"] {
    width: auto;
    height: auto;
}

.select_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    font-size: 10px;
    width: 300px;
}

.select_list .item {
    line-height: normal;
    background-color: #9d64b7;
    border: 1px solid rgb(128, 128, 128);
    border-radius: 3px 3px 3px 3px;
    padding: 5px;
    color: white;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.select_list .item .text {
    line-height: normal;
}

.select_list .item .del {
    float: initial;
    cursor: pointer;
    color: white;
    margin-left: 2px;
    font-size: 10px;
}

.breadcrumb {
    /*centering*/
    text-align: center;
    display: inline-block;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    border-radius: 5px;
    /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
    counter-reset: flag;
}

.breadcrumb a {
    text-decoration: none;
    outline: none;
    display: block;
    float: left;
    font-size: 12px;
    line-height: 36px;
    color: white;
    /*need more margin on the left of links to accomodate the numbers*/
    padding: 0 10px 0 60px;
    background: #666;
    background: linear-gradient(#666, #333);
    position: relative;
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
    padding-left: 46px;
    border-radius: 5px 0 0 5px;
    /*to match with the parent's radius*/
}

.breadcrumb a:first-child:before {
    left: 14px;
}

.breadcrumb a:last-child {
    border-radius: 0 5px 5px 0;
    /*this was to prevent glitches on hover*/
    padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb a.active,
.breadcrumb a:hover {
    background: #333;
    background: linear-gradient(#333, #000);
}

.breadcrumb a.active:after,
.breadcrumb a:hover:after {
    background: #333;
    background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
    content: "";
    position: absolute;
    top: 0;
    right: -18px;
    /*half of square's length*/
    /*same dimension as the line-height of .breadcrumb a */
    width: 36px;
    height: 36px;
    /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
    transform: scale(0.707) rotate(45deg);
    /*we need to prevent the arrows from getting buried under the next link*/
    z-index: 1;
    /*background same as links but the gradient will be rotated to compensate with the transform applied*/
    background: #666;
    background: linear-gradient(135deg, #666, #333);
    /*stylish arrow design using box shadow*/
    box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4),
        3px -3px 0 2px rgba(255, 255, 255, 0.1);
    /*
		5px - for rounded arrows and
		50px - to prevent hover glitches on the border created using shadows*/
    border-radius: 0 5px 0 50px;
}

/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
    content: none;
}

@media all and (max-device-width: 768px) {
    .breadcrumb a {
        padding: 0 10px 0 30px;
    }

    .breadcrumb a:first-child {
        padding-left: 10px;
        border-radius: 5px 0 0 5px;
    }
}

.flat a,
.flat a:after {
    background: white;
    color: black;
    transition: all 0.5s;
}

.flat a:before {
    background: white;
    box-shadow: 0 0 0 1px #ccc;
}

.flat a:hover,
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
    background: #9d65b7;
    color: white;
}

.tablesorter-metro-dark {
    margin: 0;
}

.tablesorterWrapper {
    margin: 10px 0 0;
}

.consolemessage {
    max-height: 400px;
    overflow: auto;
}

.badge_manual {
    float: left;
    margin-right: 5px;
    font-size: 1.5em;
}

.newbie {
    float: none;
    font-size: 1.5em;
}

.baby-bottle {
    float: initial;
    font-size: 1.5em;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

input.form_field_missing {
    background-color: #f8e0e0 !important;
    border-bottom: solid 2px red !important;
}

label.form_field_missing {
    background-color: #f8e0e0 !important;
    border-bottom: solid 2px red !important;
}

div.form_field_missing {
    background-color: #f8e0e0 !important;
    border-bottom: solid 2px red !important;
}

select.form_field_missing {
    background-color: #f8e0e0 !important;
}

/*
    Violet clair : #853ea5
    Violet foncé : #502d87
    Gris clair   : #4a4a49
    Gris foncé   : #3c3c3b
*/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 25px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #9d64b7;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 18px;
}

input:not(:checked) + .slider {
    background-color: #d0d0da;
}

input:checked + .slider {
    background-color: #9d64b7;
}

input:checked + input.slider_neutral {
    background-color: #9d64b7;
}

input:not(:checked) + .slider_neutral {
    background-color: #9d64b7;
}

input:not(:checked) + .slider_reverse {
    background-color: #9d64b7;
}

input:checked + .slider_reverse {
    background-color: #d0d0da;
}

input:focus + .slider {
    box-shadow: 0 0 1px #9d64b7;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.lnr-convoc {
    float: initial;
    font-size: 1.5em;
}

div.catering_confirm_container {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

div.catering_confirm {
    float: left;
    width: 100px;
    border: 1px solid lightgray;
    padding: 5px 10px 5px 10px;
    cursor: pointer;
    background-color: #59698d;
    background-color: rgba(133, 62, 165, 0.5);
    background-color: #a07cb0;
    color: white;
    transition: all 0.1s ease-in-out;
}

div.catering_confirm:hover {
    transform: scale(1.1);
}

div.catering_confirm_yes {
    background-color: #502d87;
    font-weight: bold;
    color: white;
}

div.catering_confirm_yes:hover {
    transform: none;
}

div.error {
    text-align: center;
    border: 1px solid lightgray;
    height: calc(100vh - 60px);
    padding-top: 100px;
    font-style: italic;
}

.reolinNumber {
    text-align: right;
}

#groupcompensationgrid tbody tr:last-child td {
    font-weight: bold;
}

.charttooltiptable {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 5px;
    padding: 2px 5px;
}

.charttooltipsquare {
    display: block;
    float: left;
    border: 2px solid white;
    border-radius: 2px;
    margin-right: 5px;
    width: 10px;
    height: 10px;
}

/* NEW Calendar */
.calendar_day {
    position: relative;
    overflow: visible;
    float: left;
    border-right: 1px solid lightgrey;
    height: 100%;
}

.calendar_cell {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid lightgrey;
}

.calendar_cell:hover {
    background-color: var(--calendar_cell_hover);
}

.calendar_cell_unavailable {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid lightgrey;
    background-color: grey;
}

.midnight {
    border-bottom: 1px solid red;
}

.calendar_grid td.midnight_top {
    border-top: 1px solid red;
}

.calendar_top_date {
    font-size: 0.8em;
    font-weight: bold;
    background-color: var(--calendar_top_date_background);
    text-align: center;
    padding: 8px;
    width: 100%;
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    cursor: pointer;
    font-family: Roboto, sans-serif;
    color: var(--calendar_top_date_color);
}

.fc-col-header-cell.fc-day {
    background-color: #eee;
    text-align: center;
    padding: 8px;
    width: 100%;
    border-bottom: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    cursor: pointer;
}

.fc-col-header-cell.fc-day .fc-scrollgrid-sync-inner a {
    font-family: Roboto, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: capitalize;
}

.event {
    transition: all 0.1s ease-in-out;
    color: var(--event_color);
}

.event:not(.show):hover {
    transform: scale(1.05);
    z-index: 100 !important;
}

.event.show {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    background-color: grey;
    cursor: pointer;
    border: 2px solid white;
    z-index: 1;
}

.event.show div {
    background: rgba(255, 255, 255, 0.8);
    height: calc(100%);
    word-wrap: break-word;
    overflow: hidden;
    font-family: small Arial, sans-serif;
    font-size: 12px;
}

.event.show div span:first-child {
    font-weight: bold;
    font-size: smaller;
    color: black;
}

.event,
.event div {
    border-radius: 4px;
}

.event-continuation {
    border-top: 2px dashed #fff; /* Ligne pointillée en haut */
}

#skills_warning {
    display: none;
    cursor: help;
    font-size: 1.5em;
}

/* personnal space */
ul.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.no-bullets > li {
    cursor: pointer;
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
}

ul.no-bullets > li:hover {
    background-color: #9d65b7;
    color: white;
}

li.selected {
    background-color: #9d65b7;
    color: white;
    cursor: pointer;
}

svg.grouphome_nb_persons_svg {
    border-radius: 4px;
}

line.grouphome_nb_persons_total {
    stroke: darkgrey;
    stroke-width: 100%;
}

line.grouphome_nb_persons_current {
    stroke: green;
    stroke-width: 100%;
}

div.event_tile {
    position: relative;
    border: 2px solid lightgrey;
    border-radius: 4px;
    background-color: rgb(240, 240, 240);
    color: rgb(50, 50, 50);
    height: 100px;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 4px;
    font-size: 14px;
    cursor: pointer;
}

div.event_tile:hover {
    background-color: rgb(200, 200, 200);
}

span.event_tile_nb_participants {
    position: absolute;
    right: 12px;
    bottom: 20px;
    font-size: 12px;
}

svg.event_tile_nb_participants_svg {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

line.event_tile_line_total {
    stroke: darkgrey;
    stroke-width: 10;
}

line.event_tile_line_current {
    stroke: green;
    stroke-width: 10;
}

span.help {
    color: rgb(116, 174, 254);
    font-size: 1.2em;
    margin-left: 3px;
    line-height: 1.2em;
}

span.help:hover {
    color: blue;
}

div.last7days {
    width: auto;
    height: auto;
    overflow: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

div.mailstatus {
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    height: 4.5em;
    width: 8em;
    text-align: center;
    padding-top: 5px;
}

div.mailstatus:first-child {
    border-left: 1px solid lightgrey;
}

.mailstatus_label {
    font-size: 0.7em;
}

.mailstatus_value {
    font-size: 0.7em;
    color: grey;
}

.mailstatus_help {
    color: rgb(26, 84, 254);
    font-size: 0.9em;
    margin-left: 3px;
    float: none;
    cursor: pointer;
}

.mailstatus_help:hover {
    color: blue;
}

.clickable {
    cursor: pointer;
}

.person_forms_link {
    color: var(--person_forms_link);
}

.dropdown {
    pointer-events: none;
    /* quand on clique on passe au travers de cet élément et c'est le select en dessous qui prend le click */
    position: absolute;
    right: 5px;
    width: 15px;
    height: 20px;
    margin-top: 2px;
    padding-left: 3px;
    line-height: 20px;
    font-weight: bold;
    background: var(--dropdown-background);
    color: var(--dropdown-color);
}

.ui-widget-content {
    background-color: var(--dialog_background);
    color: var(--dialog_color);
}

.mygroup_manager_header {
    text-align: center;
    padding-bottom: 20px;
    background-color: var(--mygroup_manager_header_background);
    color: var(--mygroup_manager_header_color);
}

.mygroup_manager_body {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    overflow: auto;
    background-color: var(--mygroup_manager_body_background);
    color: var(--mygroup_manager_body_color);
}

.div_groupHome {
    margin: 0 5px;
}

@media all and (max-device-width: 768px) {
    .mygroup_manager_body {
        flex-direction: column;
    }

    .div_groupHome {
        margin: 5px 5px;
    }
}

.lnr-cross-delete-blue {
    color: var(--cross_delete_blue);
    line-height: 25px;
    font-weight: bold;
    position: relative;
    margin-right: 3px;
    margin-top: -25px;
    cursor: pointer;
}

.divmsg_header {
    background-color: var(--divmsg_header_background);
}

.ui-widget-header {
    border: 1px solid var(--dialog_header_border);
    background: var(--dialog_header_background);
    color: var(--dialog_header_color);
    filter: var(--grid_color_filter);
    font-weight: bold;
}

.ui-button {
    background-color: var(--dialog_header_button_background);
}

.ui-button:hover {
    border: 1px solid var(--dialog_header_button_hover_background);
    background: var(--dialog_header_button_hover_background);
}

.ui-widget-content a {
    color: var(--autocomplete_list_color);
}

.ui-state-default {
    background: var(--faketabdown_background);
}

.ui-state-hover {
    background: var(--faketabup_background);
    border-color: var(--faketabup_background);
}

.ui-state-active {
    background: var(--faketabup_background);
}

.ui-datepicker {
    z-index: 1002 !important;
}

.require_ok {
    color: var(--input_color);
    background-color: var(--input_background);
}

.require_ko {
    color: var(--input_color_ko) !important;
    background-color: var(--input_background_ko) !important;
}

.lobibox-header {
    border-radius: 4px 4px 0 0;
}

.lobibox-footer {
    border-radius: 0 0 4px 4px;
}

.autocomplete-highlight {
    color: red;
}

.form_price_tag {
    position: absolute;
    top: 6px;
    right: -65px;
    padding: 5px 10px;
    border-radius: 2px;
    border-color: #296ba0;
    background-color: #2e79b4;
    color: #fff;
    width: 90px;
    text-align: right;
    box-shadow: 2px 2px 5px #aaa;
}

.form_price_total {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 10px;
    margin: 10px;
    width: 200px;
    text-align: right;
    border-radius: 2px;
    border-color: #296ba0;
    background-color: #2e79b4;
    color: #fff;
    box-shadow: 2px 2px 5px #aaa;
}

.grid-cross {
    color: red;
    filter: var(--grid_color_filter);
    font-weight: bold;
    float: none;
    font-size: 1.5em;
    cursor: pointer;
}

.grid-magnifier {
    color: #853ea5;
    filter: var(--grid_color_filter);
    font-weight: bold;
    float: none;
    font-size: 1.5em;
    cursor: pointer;
}

.grid-plus {
    color: green;
    filter: var(--grid_color_filter);
    font-weight: bold;
    float: none;
    font-size: 1.5em;
    cursor: pointer;
}

.custom-combobox {
    position: relative;
    display: inline-block;
    width: calc(100% - 26px);
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}

.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
    background-color: transparent !important;
    color: var(--input_color) !important;
}

.availability_v2_icon {
    float: none;
    cursor: pointer;
    margin-left: 5px;
    font-size: 1.3em;
}

/************/
/* timeline */
/************/
table.timeline {
    width: 100%;
    border-collapse: collapse;
}

table.timeline thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--timeline_header_background);
}

table.timeline thead th {
    height: 25px;
    border-bottom: 1px solid lightgrey;
}

table.timeline thead th:first-child {
    width: 300px;
    white-space: nowrap;
    font-weight: normal;
}

table.timeline thead th:last-child {
    display: flex;
    position: relative;
    text-align: left;
    font-size: 0.7em;
    font-weight: normal;
}

div.timeline_col_hours {
    flex: 1;
    border-left: 1px solid lightgrey;
    text-indent: 2px;
}

div.timeline_col_hours_busy {
    background-color: lightgray;
}

div.timeline_col_hours_add {
    cursor: cell;
    border-left: 1px solid #eee;
}

table.timeline tbody td {
    height: 30px;
    border-bottom: 1px solid #eee;
    cursor: default;
}

table.timeline tbody td:first-child {
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.8em;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 290px;
}

.timeline_event_container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
}

.timeline_event {
    position: absolute;
    background-color: lightblue;
    height: 25px;
    margin-top: 3px;
    border-radius: 4px;
    border: 1px solid white;
    line-height: 25px;
    text-indent: 4px;
    font-size: 0.7em;
    cursor: pointer;
    color: var(--event_color);
}

.timeline_event.timeline_show {
    background-color: rgb(230, 230, 230);
    cursor: default;
    color: black;
}

.timetable_midnight {
    border-left: 1px solid red !important;
}

.timetable_title {
    text-align: center;
}

.timeline_completion {
    float: left;
    font-size: 9px;
    padding: 0 4px;
    border-radius: 9px;
    line-height: 16px;
    margin: 3px 0 0 2px;
    color: white;
    text-align: center;
    text-indent: initial;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline_completion_ko {
    background-color: red;
}

.timeline_completion_ok {
    background-color: green;
}

.timeline_completion_show {
    background-color: gray;
    border-color: initial;
}

.noresult {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    width: 400px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-style: italic;
    border: 1px solid lightgrey;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.my_account {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    background-color: rgb(74, 74, 73);
    color: white;
    line-height: 1.5em;
    padding: 10px;
    font-size: 0.9em;
    text-align: right;
    position: fixed;
    top: 40px;
    right: 0;
    z-index: 10000;
}

.my_account button {
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    text-align: right;
    font-size: 1em;
    margin-bottom: 5px;
}

.helpDialog {
    z-index: 10001;
    display: none;
    flex-direction: column;
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 400px;
    width: 300px;
    padding: 10px;
    border-radius: 4px;
    border-color: var(--help_border);
    background-color: var(--help_background);
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.helpDialog #help-close {
    position: absolute;
    right: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    text-align: center;
    background-color: var(--help_background);
    border: 3px solid white;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

.helpDialog h3 {
    margin-top: 0.5em;
    text-align: center;
    color: var(--help_header_color);
}

.helpDialog #help-input {
    flex-shrink: 0;
    height: 40px;
    line-height: 40px;
    font-size: 1.1em;
    border-radius: 4px;
}

.helpDialog #help-results {
    overflow: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: var(--help_result_background);
    border-radius: 4px;
}

.helpDialog #help-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.helpDialog #help-results ul li {
    border-bottom: 1px solid var(--help_result_delimiter);
    padding: 5px 5px 15px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.helpDialog #help-results .article-title {
    font-size: 1.2em;
}

.helpDialog #help-results .article-body {
    white-space: break-spaces;
    font-size: 0.9em;
}

.helpDialog .highlight {
    background-color: yellow;
    font-weight: bold;
}

.helpDialog .help-no-result {
    text-align: center;
    padding: 1em;
    font-style: italic;
}

.helpDialog .help-footer {
    padding: 5px;
    background: var(--help_result_background);
    border-radius: 4px;
}

.availability_button {
    display: block;
    cursor: pointer;
    background-color: var(--button_background);
    color: #eee;
}

.availability_button:hover {
    background-color: var(--button_hover_background);
}

.message_info {
    border: 1px solid #b3d4e6;
    padding: 10px;
    border-radius: 4px;
    background: #e0eef5 none repeat scroll 0 0;
    color: #1f5b7a;
}

.message_warning {
    border: 1px solid #b3d4e6;
    padding: 10px;
    border-radius: 4px;
    background: #e0eef5 none repeat scroll 0 0;
    color: #1f5b7a;
}

.msg {
    background: #fff none repeat scroll 0 0;
    border: 0.1rem solid #d9d9d9;
    border-radius: 5px;
    color: #404040;
    font-family: "proxima-nova", "Helvetica Neue", "Helvetica", "Arial",
        sans-serif;
    margin-bottom: 20px;
    padding: 15px;
}

.msg--info {
    background: #e0eef5 none repeat scroll 0 0;
    border-color: #b3d4e6;
    color: #1f5b7a;
}

.msg--success {
    background: #def0a8 none repeat scroll 0 0;
    border-color: #a6cc33;
    color: #485c0a;
}

.msg--warning {
    background: #fdeeb4 none repeat scroll 0 0;
    border-color: #d6bd5c;
    color: #6c5a13;
}

.msg--error {
    background: #fdc3c3 none repeat scroll 0 0;
    border-color: #d98c8c;
    color: #821717;
}

.trombi-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
}

.trombi-subtitle {
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    margin-left: 20px;
}

.trombi-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 50px;
}

.trombi-tile {
    float: left;
    border: 1px solid lightgrey;
    width: 160px;
    text-align: center;
    margin: 5px;
    border-radius: 4px;
}

.trombi-pic-container {
    height: 150px;
    margin-top: 5px;
}

.trombi-pic-img {
    max-width: 150px;
    max-height: 150px;
    margin-left: auto;
    margin-right: auto;
}

.alert-mark-as-read {
    color: red;
    position: relative;
    top: -20px;
    right: 5px;
    font-size: 20px;
}

/* Customize styles */

.alert-icon {
    float: left;
    color: white;
    margin-right: 5px;
    font-size: 2em;
}

.div0 {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
}

.scroll {
    flex-grow: 1;
}

.skill_label {
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    width: 120px;
    display: inline-block;
}

.info_global_container {
    display: flex;
    flex-direction: column;
}

.info_container {
    width: calc(100% - 20px);
    min-height: 60px;
    margin: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
    cursor: grab;
    padding: 10px;
}

.info_container.dragging {
    border: 2px dashed #000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.info_container:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.info_container p {
    margin: 0;
    padding: 10px;
    font-size: 16px;
}

.info_title {
    font-size: 12pt;
    font-weight: bold;
    height: 25px;
    margin-left: 0.3em;
    margin-right: 0.5em;
    text-align: left;
    float: left;
    border: 0;
    cursor: pointer;
}

.info_title_hidden {
    color: #a3a3a3;
    font-style: italic;
    font-weight: normal;
}

.info_filters_container {
    display: none;
}

.info_skills_container {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    max-height: 50px;
    flex-wrap: wrap;
}

.diet_class,
.tag {
    display: inline-block;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-top: 2px;
    margin-left: 2px;
    padding: 3px;
    font-size: 0.7rem;
    font-weight: lighter;
}

.diet_class_bigger {
    font-size: 1em;
    padding: 5px;
}

.diet_class_right {
    float: right;
}

.diet_class1 {
    background-color: #1d76db;
    color: #ffffff;
}

.diet_class2 {
    background-color: #808080;
    color: #ffffff;
}

.diet_class3 {
    background-color: #0e8a16;
    color: #ffffff;
}

.diet_class4 {
    background-color: #d93f0b;
    color: #ffffff;
}

.diet_class5 {
    background-color: #fbca04;
    color: #000000;
}

.question_div {
    display: flex;
    justify-content: space-between;
}

.global_spinner {
    display: none;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(20, 20, 20, 0.8);
}

.preview {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    background: white;
    z-index: 1;
    border-radius: 20px 0 0 20px;
}

.preview_hidden {
    width: 0;
    height: 0;
}

.preview_shown {
    transition: width 0.5s ease;
    /* Propriété à animer, durée et fonction de transition */
    width: 50%;
    height: 100%;
    padding: 20px;
    border: 1px solid #cccccc;
}

.preview-close-button {
    height: 23px;
    width: 23px;
    font-size: 23px;
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight: bold;
    cursor: pointer;
}

.popup {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: calc(100% - 4px);
    margin: 2px 0 2px 0;
    border: 1px solid #c5c5c5;
    border-radius: 10px 0 0 10px;
    background-color: white;
    transition: width 0.2s linear;
}

.hidden {
    border: none;
    width: 0;
    transition: width 0.1s linear;
}

.hidden .popup-header,
.hidden .popup-body {
    display: none;
    padding: 0;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.popup-body {
    padding: 5px;
    display: flex;
    flex-grow: 1;
}

.popup-close-button {
    font-size: 25px;
    color: var(--button_color);
    cursor: pointer;
}

.popup-close-button:hover {
    color: var(--button_color_hover);
}

.c_select-dropdown {
    position: relative;
    display: inline-block;
}

.c_select-dropbtn {
    height: 25px;
    border: none;
    border-bottom: 1px solid lightgray;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 700px) {
    .c_select-dropbtn {
        max-width: 200px;
    }
}

.c_select-dropdown-content {
    display: none;
    position: absolute;
    margin: 0;
    background-color: var(--c_select-dropdown-content);
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    padding: 0;
    list-style-type: none;
    z-index: 2;
    text-align: left;
    border-radius: 0 0 15px 15px;
}

.c_select-dropdown-content li {
    font-size: 12px;
    color: var(--c_select-dropdown-content_li);
    padding: 6px 6px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c_select-dropdown-content li:hover,
.c_select-dropdown li.hover {
    background-color: #f1f1f1;
    color: var(--button_color_hover);
}

.c_select-dropdown-content li:last-child:hover {
    background-color: #f1f1f1;
    color: var(--button_color_hover);
    border-radius: 0 0 24px 24px;
}

.c_select-dropdown-check-shown {
    float: none;
    margin-right: 5px;
}

.c_select-dropdown-check-hidden {
    float: none;
    margin-right: 5px;
    color: transparent;
}

.c_select-show {
    display: block;
}

div.detail-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--detail_color);
    background-color: var(--detail_background);
    flex-grow: 1;
}

div.detail-header {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    color: var(--list_header_color);
    margin: 5px;
}

p.detail-header-title {
    border-bottom: 1px solid #c5c5c5;
    padding-right: 5px;
    margin-left: 5px;
}

@media all and (max-device-width: 768px) {
    p.detail-header-title {
        display: none;
    }
}

div.detail-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-top: 20px;
}

div.detail-footer {
    display: flex;
    flex-grow: 1;
}

input[type="text"],
input[type="email"],
input[type="number"] {
    border: none;
    border-bottom: solid 1px lightgrey;
}

input[type="text"].error,
input[type="email"].error,
input[type="number"].error {
    border-bottom: solid 1px red !important;
}

input[type="text"].warning,
input[type="email"].warning,
input[type="number"].warning {
    border-bottom: solid 1px orange;
}

input.name {
    border: none;
    margin-bottom: 5px;
    width: 100%;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: capitalize;
    text-align: left;
}

input.bold {
    font-weight: bold;
}

input.uppercase {
    text-transform: uppercase;
}

.discussion {
    position: absolute;
    height: 60px;
    width: 60px;
    right: 40px;
    bottom: 40px;
    border-radius: 50%;
    background-color: var(--lnr);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 10px;
    column-gap: 7px;
    z-index: 999999;
    transition: 0.3s;
}

.discussion:hover {
    background-color: var(--lnr);
    width: 250px;
    border-radius: 10px;
    transition: 0.3s;
}

.discussion span.lnr-bubble {
    font-size: 2em;
    float: none;
    color: #ffffff;
    align-self: center;
    flex-grow: 1;
    text-align: center;
}

.discussion:hover p {
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
    flex-grow: 1;
}

.discussion p {
    align-self: center;
    display: none;
    color: #ffffff;
}

.thread .messages .content {
    margin-left: 0;
    padding: 0;
    height: auto;
}

@media all and (max-device-width: 768px) {
    .discussion {
        right: 20px;
        bottom: 20px;
    }
}

.customFieldContainer {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.buttonv2 {
    border: none;
    border-radius: 15px;
    padding: 15px;
}

svg.grouphome_progress_svg {
    border-radius: 4px;
}

line.grouphome_progress_total {
    stroke: darkgrey;
    stroke-width: 100%;
}

line.grouphome_progress_current {
    stroke: green;
    stroke-width: 100%;
}

select.selectNG {
    background: transparent;
    border: none;
    border-bottom: 1px solid lightgrey;
}

img.qrcode {
    height: 150px;
    width: 150px;
    background-color: var(--qrcode-background-color);
}

.lobibox .lobibox-btn {
    border-radius: 10px;
}

.tag_bigger {
    font-size: 1em;
    padding: 5px;
}

.tag_right {
    float: right;
}

.tag_circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    padding: 1px;
}
.tag_blue {
    background-color: #1d76db;
    color: #ffffff;
}

.tag_grey {
    background-color: #808080;
    color: #ffffff;
}

.tag_green {
    background-color: #0e8a16;
    color: #ffffff;
}

.tag_orange {
    background-color: #d93f0b;
    color: #ffffff;
}

.tag_yellow {
    background-color: #fbca04;
    color: #000000;
}

/* NG 2024-11 */
div.detail-container-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--detail_color);
    background-color: var(--detail_background-2);
    flex-grow: 1;
}

div.detail-header-2 {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    color: var(--list_header_color);
    background-color: var(--detail_background-2);
    border-radius: 0.5rem;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    margin: 5px 5px 0.5rem 5px;
}

.btn-new-picture {
    position: absolute;
    bottom: 0;
    right: 0;
    --tw-bg-opacity: 1;
    background-color: var(--button_background_color);
    color: rgb(255 255 255/1);
    border-radius: 9999px;
    border: 2px solid white;
    width: 2.5rem;
    height: 2.5rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.status-selector {
    position: relative;
    display: inline-block;
}

.status-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
    min-height: 30px;
    min-width: 100px;
}

.status-button::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 4px;
}

.status-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    min-width: 150px;
    z-index: 1000;
    border: 1px solid #e5e7eb;
}

.status-dropdown.active {
    display: block;
}

.status-option {
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
    width: 100%;
    border: none;
    background: none;
}

.status-option:hover {
    background-color: #f3f4f6;
}

/* Couleurs des statuts */
.status-benevole {
    background-color: #f3e8ff;
    color: #6b21a8;
}

.status-salarie {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-intermittent {
    background-color: #dcfce7;
    color: #166534;
}

.status-prestataire {
    background-color: #ffedd5;
    color: #9a3412;
}

.status-artiste {
    background-color: #fce7f3;
    color: #831843;
}

.text-gray-500 {
    color: rgb(107 114 128/1);
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.mt-4 {
    margin-top: 1rem;
}

.detail-card {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: hsl(var(--card-foreground));
    background-color: hsl(var(--card));
    margin: 5px;
    padding: 1.5rem;
    display: grid;
    flex-grow: 1;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    border: 1px solid hsl(220 13% 94%);
    border-radius: 0.5rem;
    gap: 0.25rem;
}

.detail-card-title {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.detail-card-title h3 {
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.avatar-container {
    width: 8rem;
    height: 8rem;
}

.no-avatar-container {
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(243 232 255/1);
}

.no-avatar-icon {
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238534a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-user'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    color: #8534a5;
}

.user-new-picture {
    display: inline-block;
    vertical-align: center;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-user'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.user-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(133, 62, 165)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.comment-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgb(133, 62, 165)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'%3E%3C/path%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'%3E%3C/path%3E%3Cpath d='M10 9H8'%3E%3C/path%3E%3Cpath d='M16 13H8'%3E%3C/path%3E%3Cpath d='M16 17H8'%3E%3C/path%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.emergency-contact-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(133, 62, 165)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3Cpath d='M14.5 2 20 7.5'%3E%3C/path%3E%3Cpath d='M20 2 14.5 7.5'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.gender-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z' fill='rgb(107 114 128/1)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}
.birth-name-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z' fill='rgb(107 114 128/1)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
}
.nickname-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z' fill='rgb(107 114 128/1)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
}
.birthdate-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z' fill='rgb(107 114 128/1)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

.add-button-icon {
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238534a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    color: #8534a5;
    background-color: transparent; /* Fond transparent */
    border: none; /* Retire la bordure */
    padding: 0; /* Retire le padding */
    cursor: pointer; /* Curseur pointer au survol */
}

.field-container {
    display: grid;
    grid-template-columns: 150px 1fr 30px;
    align-items: center;
    gap: 0;
    width: 100%;
    text-align: right;
}

.field-container label {
    margin-right: 0.5rem;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .field-container {
        grid-template-columns: 1fr;
        gap: 0.1rem;
        text-align: left;
    }

    .field-container label {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

.managerTag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 13px;
    line-height: 1.25rem;
    margin-right: 8px;
    margin-top: 8px;
    white-space: nowrap;
    cursor: default;
}

.managerTag-departments {
    color: rgb(29 78 216/1);
    background-color: rgb(29 78 216/0.1);
}

.managerTag-locations {
    color: rgb(21 128 61/1);
    background-color: rgb(21 128 61/0.1);
}

.managerTag-groups {
    color: rgb(194 65 12/1);
    background-color: rgb(194 65 12/0.1);
}

.service-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(29, 78, 216)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='6' rx='1'/%3E%3Crect x='2' y='15' width='6' height='6' rx='1'/%3E%3Crect x='16' y='15' width='6' height='6' rx='1'/%3E%3Cpath d='M12 9v3'/%3E%3Cpath d='M5 15v-3h14v3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

.location-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(21, 128, 61)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

.group-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(194, 65, 12)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

/* ici */
.header-content {
    display: flex;
    justify-content: space-between;
}

.button-container {
    display: flex;
    height: 30px;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 1200px) {
    /* Le conteneur des infos à droite */
    div[style*="display: flex;flex-direction: column;flex-grow: 1;"] {
        display: flex;
        flex-direction: column;
    }

    /* Le conteneur qui contient à la fois les infos et les boutons */
    .header-content {
        flex-direction: column-reverse; /* Inverse l'ordre des éléments */
    }

    /* Conteneur des boutons */
    .button-container {
        margin-left: 1.5rem;
        margin-bottom: 1rem; /* Espace entre les boutons et le contenu en dessous */
        height: auto !important;
    }
}

/* Style pour le spinner de chargement */
.loading-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 5px;
    vertical-align: middle; /* Aligne verticalement avec le texte */
    position: relative;
    top: -1px; /* Ajustement fin de la position */
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Style pour les boutons désactivés */
.button-disabled {
    pointer-events: none;
}

.no_mailing-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff9c4; /* Jaune pâle */
    color: #333; /* Texte foncé */
    border: 1px solid #f4c542; /* Bordure jaune foncé */
    border-left: 5px solid #f4a442; /* Bande verticale */
    padding: 12px 15px;
    margin-top: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    gap: 15px;
    max-width: fit-content;
}

.no_mailing-alert-text {
    flex: 1;
}

.no_mailing-alert-btn {
    background-color: var(--button_background);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

#div3 #forms1 tr.form_completed_hidden_true {
    display: none;
}

div.slidingDiv a:link {
    color: revert;
    text-decoration: revert;
    font-weight: revert;
    font-style: revert;
}

/*
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
}
*/

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 0;
}

.contact-title {
    text-align: center;
    margin-bottom: 40px;
/*    color: #333;*/
    font-size: 2.5rem;
    font-weight: 300;
}

.contact-member {
/*    background: white;*/
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: none;
}

.contact-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.contact-photo-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #e0e0e0;
    transition: border-color 0.3s ease;
}

.contact-member:hover .contact-photo-container {
    border-color: #007bff;
}

.contact-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-info {
    /*
    color: #333;
     */
}

.contact-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    /*
    color: #2c3e50;
    color: #8fa4b3;
     */
}

.contact-communication {
    font-size: 0.9rem;
    line-height: 1.6;
    /*
    color: #666;
     */
}

.contact-communication a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-communication a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.contact-communication-phone {
    margin-bottom: 5px;
}

.contact-communication-email {
    word-break: break-word;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .contact-member {
        padding: 20px;
    }

    .contact-photo-container {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

}

.event-card {
    /*
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
     */
    border-radius: 16px;
    padding: 30px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.event-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.event-header {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.event-title {
    /*
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
     */
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
}

.event-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.event-details {
    position: relative;
}

.event-detail-section {
    margin-bottom: 20px;
/*    padding: 15px; */
    /*
    background: rgba(255, 255, 255, 0.1);
     */
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.event-detail-section:last-child {
    margin-bottom: 0;
}

.event-detail-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

.event-detail-label {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.event-detail-content {
    font-size: 1rem;
/*    line-height: 1.4; */
    line-height: 1;
}