/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font), sans-serif;
    font-size: 20px;
    font-weight: 400;
}


:root,
html {
    /* ===== Colors ===== */
    /* --body-color: #E4E9F7; */
    --body-image: url('../img/fond_abeille_1.png');
    --color1: #ffffff;
    --color2: #e8e8e8;
    --font: 'Nunito';
    --body-color: #ffffff;
    --body-img: url('../img/svg/ftb.svg');
    --sidebar-color: #FFF;
    --primary-color: #3d76ad;
        /*  --primary-color: #278a0e;*/
    --titre-color: #3d76ad;
    --btn-mag: #ebebeb;
    --btn-mag-hover: #d4d4d4;
    --btn-mag-radius: 0.35rem;
    --hover-link: #ebebeb;
    --hover-link-text: #3b3b3b;
    --bg-mag: #f1f1f1;
    --bg-cal: #fff;
    --bg-mag-text: #464646;
    --bg-form: #efefef;
    --border-form: #dddddd;
    /* --primary-color-light: #F6F5FF; */
    --primary-color-light: #ebebeb;
    --toggle-color: #DDD;
    --text-color: #707070;
    --bg-a: #3d76ad;
    --bg-b: #f33838;
    --bg-notification-danger:#f33838;
    --bg-c: #52982b;
    --bg-d: #d17018;
    --warning: #f07f05;
    --bar-param: 500px;
    --bg-horloge: #fff;
    --input-disabled: #efefef;
    --input-text-disabled: #757779;
    --icon-date: url("images/ui-icons_222222_256x240.png");
        --img-logo: url("images/magesquo_logo_blanc.png");
    /* ====== Transition ====== */
    /* --tran-05: all 0.2s ease;
--tran-05: all 0.3s ease;
--tran-04: all 0.3s ease;
    */
    --tran-05: all 0.8s ease;
    --attente: #ffffffc4;
    --bg-pale-o: #3d77adc7;
    --bg-border-dot: #efefef;
        --bg-border-dot-hover: #bbbaba6e;
    --bs-gradient: linear-gradient(180deg, rgba(79, 82, 87, 0.1), rgba(99, 92, 92, 0.25));
    --disabled-bg: #fbfbfb;
        --disabled-border: none;
        --disabled-color: #ccc;
}

body.dark,
html.dark {
    --body-image: url('../img/fond_abeille_1.png');
        --color1: #505050;
        --color2: #373737;
    --font: 'Nunito';
    /* --body-color: #18191a; */
    --body-color: #1b1b1b;
        --body-img: url('../img/svg/ftn.svg');
    --sidebar-color: #242526;
    /* --primary-color: #3d76ad; */
    --primary-color: #3d76ad;
    --titre-color: #3d77adcc;
    --bg-mag: #242526;
    --bg-form: #333;
    --bg-cal: #333;
    --btn-mag: #3a3b3c;
    --btn-mag-radius: 0.35rem;
    --btn-mag-hover: #66666630;
    --border-form: #444;
    --bg-mag-text: #dddddd;
    --primary-color-light: #3a3b3c;
    --hover-link: #3a3b3c;
    --hover-link-text: #b3b3b3;
    --toggle-color: #fff;
    --text-color: #ccc;
    --bg-a: #3d77ad80;
    --bg-b: #f3383880;
    --bg-notification-danger:#f33838;
    --bg-c: #52982b80;
    --bg-d: #d1701880;
    --warning: #f07e05b7;
    --input-disabled: #333333;
    --input-text-disabled: #757779;
    --icon-date: url("images/ui-icons_888888_256x240.png");
        --img-logo: url("images/magesquo_logo_noir.png");
        --attente: #18191ac4;
        --bg-horloge: #18191a;
    --bg-pale-o: #3d77ad80;
    --bg-border-dot: #222;
        --bg-border-dot-hover: #4444446e;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --disabled-bg: #1b1b1b;
        --disabled-border: none;
        --disabled-color: #555;
}

/* 
body {
transform: scale(1.1);
} */

a {
    font-size: 100% !important;
}

html {
    /* background-color: var(--body-color);*/
    background-image: var(--body-image);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--bg-mag-text);
}

body {

    /* background-image: var(--body-image);
    background-repeat: no-repeat;
    background-size: cover;
        */
    min-height: 100vh;
    background-color: var(--body-color) !important;
    transition: var(--tran-05);
    scrollbar-width: 8px;
        /* Largeur mince de la barre de défilement */
    scrollbar-color: var(--btn-mag) var(--btn-mag-hover);
    /* Couleurs de la barre de déscroll
    /* zoom: 110%;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    transform-origin: 0 0; */
}

.logobk {
    background-color: #3a3b3c;
    max-width: 100px;
    border-radius: var(--btn-mag-radius);
    -webkit-border-radius: var(--btn-mag-radius);
    -moz-border-radius: var(--btn-mag-radius);
    -ms-border-radius: var(--btn-mag-radius);
    -o-border-radius: var(--btn-mag-radius);
}
.erreur {
	padding: 15px;
	width: 100%;
	position: absolute;
	top: 45%;
}
.discover {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 13px;
    margin-right: 12px;
}

.form-control:disabled {
    background-color: var(--disabled-bg);
        opacity: 1;
        color: var(--disabled-color);
        border: none;
}

#cookie-banner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
        /* Centrer horizontalement */
        transform: translate(-50%, -50%);
        /* Ajuster pour centrer correctement */
        width: 100%;
        /* 50% de la largeur de la page */
        height: 100%;
    background: var(--body-color);
    padding: 10px;
    text-align: center;
    z-index: 1000;
}

#cookie-banner button {
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: var(--btn-mag-radius);
    cursor: pointer;
}



#calendaro {
    max-width: 1100px;
    margin: 40px auto;
}

.h-100 {
    min-height: 120px;
}



.table100 {
    width: 100%;

}
.table100 tr {
    padding: 0;
    border-bottom: 0.05rem dotted #555
}

.form-range::-moz-range-track {
    width: 100%;
        height: 0.65rem;
        color: transparent;
        cursor: pointer;
        background-color: var(--bg-form);
    border: 1px solid var(--border-form);
        border-radius: 0.2rem;
}

.form-range::-moz-range-thumb {
    width: 0.65rem;
        height: 0.65rem;
        background-color: #3d76ad;
        border: 0;
        border-radius: 0.2rem;
        -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -moz-appearance: none;
        appearance: none;
}

.bx-flxxx {
    font-size: 18px !important;
}

.bx {
    color: #6c757d
}


/* .bx:hover, .btn:hover{
transform: rotate(3deg) scale(1);
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale(1);
    text-shadow: 1px 6px 8px rgba(20, 202, 233, 0.89);
    /* -webkit-box-shadow: 1px 1px 52px 18px rgba(21,203,227,1) inset;
-moz-box-shadow: 1px 1px 52px 18px rgba(21,203,227,1) inset; 
} */

.icon-btn {
    top: 15px;
        position: relative;
        margin-right: 2px;
}

.bx-sad,
.bx-bug,
.bx-meh,
.bx-smile {
    color: #6c757d;
}

.bx-sad:hover,
.bx-bug:hover {
    color: #b3620c;
}
.bx-meh:hover {
    color: #3d76ad;
}
.bx-smile:hover {
    color: #3a9d23;
}
.bug_bas {
    position: absolute;
    bottom: 45px;
}

.bug_reponse {
    position: absolute;
        /* bottom: 7px; */
        left: 770px;
        top: 6px;
}

.custom-tooltip {
    position: absolute;
    background-color: var(--body-color);
    border: 1px solid var(--border-form);
    padding: 20px;
    white-space: pre-line;
        /* Pour conserver les sauts de ligne */
    z-index: 999999;
    width: 550px;
    border-radius: var(--btn-mag-radius);
}
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--hover-link-text);
}
.alert-mag {
    /* background-color: var(--bg-form); */
    padding: 8px;
    border-radius: var(--btn-mag-radius);
    border: 1px solid #f80;
    font-weight: 700;
    color: #f80
}

.modal-content {
    position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        color: var(--bs-modal-color);
        pointer-events: auto;
        background-color: var(--bg-form);
        background-clip: padding-box;
        border: 1px solid var(--border-form);
        border-radius: var(--btn-mag-radius);
        outline: 0;
}

.bg-gradient {
    background-image: var(--bs-gradient) !important;
}

.placeholder {
    display: inline-block;
        min-height: 1em;
        vertical-align: middle;
    cursor: pointer !important;
        background-color: currentcolor;
        opacity: 0.9 !important;
    font-weight: 400 !important;
}
thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: var(--border-form);
    border-style: solid;
    border-width: 0;
}

thead td {
    font-weight: 700;
}
.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color);
    background-color: var(--btn-mag-hover) !important;
    color: var(--bg-mag-text) !important;
}

.form-control::file-selector-button {
    padding: 0.375rem 0.75rem;
        margin: -0.375rem -0.75rem;
        -webkit-margin-end: 0.75rem;
        margin-inline-end: 0.75rem;
        color: var(--bg-mag-text);
        background-color: var(--bg-form);
        pointer-events: none;
        border-color: inherit;
        border-style: solid;
        border-width: 0;
        border-inline-end-width: 1px;
        border-radius: var(--btn-mag-radius);
        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;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--bg-form);
}

.richText .richText-editor {
    padding: 6px;
        background-color: var(--bg-form);
        border-left: var(--border-form);
        font-family: var(--font);
        height: 100px;
        outline: 0;
        overflow-y: scroll;
        overflow-x: auto;
}

.richText .richText-toolbar {
    position: sticky;
        top: 0;
        min-height: 20px;
        background-color: inherit;
        border: 1px solid var(--border-form);
    border-radius: var(--btn-mag-radius) !important;
}

.richText .richText-toolbar ul li a:hover {
    background-color: var(--hover-link-text);
    border-radius: var(--btn-mag-radius) !important;
}

.richText .richText-toolbar:last-child {
    font-size: 12px;
        z-index: -1;
        display: none;
}

.richText .richText-toolbar ul li a {
    display: block;
        padding: 8px 12px;
        border-right: var(--border-form);
        cursor: pointer;
        -webkit-transition: background-color .4s;
        -moz-transition: background-color .4s;
        transition: background-color .4s;
}

.richText {
    z-index: 1;
        position: relative;
        background-color: var(--bg-form);
        border: var(--border-form);
        color: #333;
        width: 100%;
}
.mt-icon {
    margin-top: 18px
}

.mt-signup {
    margin-top: 9px !important;
}
p,
span,
div,
td,
tr {
    color: var(--bg-mag-text);
}

.mt-bot {
    padding-bottom: 50px;
}
.bg-horloge {
    background-color: var(--bg-horloge);
}

.fenetre_overlay {
    display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: var(--attente);
}

.rappel_fenetre {
    background-color: var(--bg-horloge);
        width: 550px;
        height: 550px;
        position: relative;
        z-index: 1000;
        padding: 30px;
        border: 1px dotted var(--border-form);
        border-radius: var(--btn-mag-radius);
}

.close-button {
    position: absolute;
        top: 1px;
        right: 15px;
        font-size: 30px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-color);
}
.roundedi {
    border-radius: 15px;
    border: 0.1rem dashed var(--border-form);
    padding: 10px;
}
.attente {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Pour centrer le contenu dans le div, nous utilisons flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--attente);
    z-index: 1000;
}

.graph-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 110px;
    align-items: flex-end;
    margin-bottom: 10px;
}

.bardevis {
    width: 9%;
    background-color: #3d76ad49;
    border-top: 5px solid #3d76ad;
}

.barprod {
    width: 9%;
    background-color: #b6650f49;
    border-top: 5px solid #b6640f;
}

.barfact {
    width: 9%;
    background-color: #19875449;
    border-top: 5px solid #198754;
}

.barreg {
    width: 9%;
        background-color: #dc354549;
    border-top: 5px solid #dc3545;
}

.text-xs {
    font-size: 50%;
   
   
    display: block;
    
}
.text-shad:hover {text-shadow: 0px 0px 20px #DDD6BF;}
.titre_menu_item {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 125%;
    /* border-bottom:0.02rem dashed var(--border-form); */
    margin-bottom: 10px;
    padding-bottom: 2px;

}



.rounded {
    border-radius: 15px;
}

/* Chrome, Brave, Edge */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--btn-mag);
    border-radius: 6px;
}

::-webkit-scrollbar-track {
    background-color: var(--btn-mag-hover);
    border-radius: 6px;
}
a {
    text-decoration: none;
}

::selection {
    background-color: var(--primary-color);
    color: #fff;
}

.border-conn {
    border: 0.1rem dashed var(--border-form);
    border-radius: 6px;
    padding: 10px;
    margin-top: 60px;
}
.img-logo {
    background-image: var(--img-logo);
    /* background-color: var(--img-logo); */
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.border-tab {
    border: 0.1rem dashed var(--border-form);
    border-radius: 6px;
    padding: 10px;
}

.bas-tb {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.border-tab:hover {
    border: 0.1rem solid var(--border-form);
    border-radius: 6px;
    padding: 10px;
}
.text-warning {
    color: var(--warning) !important;
}
.card-header {
    background-color: var(--bg-form) !important;
    border-bottom: 1px solid var(--border-form);

    font-weight: 500;
}
.card-footer {
    background-color: var(--bg-form) !important;
    border-top: 1px solid var(--border-form);
    text-align: right;
}
.card-body {
    background-color: var(--body-color);
    border: 0px solid var(--border-form);
}

.valign{
    display: flex;
  align-items: center;
  justify-content: flex-end; /* Aligne le contenu à droite */
}

.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--border-form);
    --bs-card-border-radius: var(--btn-mag-radius);
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(0.375rem - 1px);
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    /* --bs-card-bg: #fff; */
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bg-mag);
    background-clip: border-box;
    border: 1px solid var(--bg-mag);
    border-radius: var(--btn-mag-radius);
}

.card-img,
.card-img-top {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center !important;
    width: 25%;
}

.readonly {
    background-color: var(--input-disabled) !important;
    color: var(--input-text-disabled) !important;
}

.position-absolute {
    position: relative !important;
}

.list-group {
    --bs-list-group-color: var(--text-color);
    --bs-list-group-bg: var(--bg-form);
    --bs-list-group-border-color: var(--border-form);
    --bs-list-group-border-width: 0.1rem;
    --bs-list-group-border-radius: 0px;
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-item-padding-y: 0.5rem;
    --bs-list-group-action-color: #495057;
    --bs-list-group-action-hover-color: var(--hover-link-text);
    --bs-list-group-action-hover-bg: var(--hover-link);
    --bs-list-group-action-active-color: var(--bg-mag-text);
    --bs-list-group-action-active-bg: #e9ecef;
    --bs-list-group-disabled-color: #6c757d;
    --bs-list-group-disabled-bg: #fff;
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #3d76ad;
    --bs-list-group-active-border-color: #3d76ad;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0px;
    width: 100%;
}


/*======================================
Our Achievement CSS
========================================*/
.our-achievement {
    /* background-color: #3c75ab; */
    background-image: url('../images/fond.svg');
    background-repeat: no-repeat;
    background-clip: border-box;
    background-size: cover;
    text-align: center;
    padding: 320px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .our-achievement {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .our-achievement {
        padding: 60px 0;
    }
}

.our-achievement .title h2 {
    color: #fff;
    font-weight: 700;
    font-size: 35px;
    margin-bottom: 10px;
}

.our-achievement .title p {
    color: #fff;
}

.our-achievement .single-achievement {
    margin-top: 50px;
    text-align: center;
    padding: 0px 10px;
}

.our-achievement .single-achievement h3 {
    font-size: 35px;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;
    color: #fff;
}

.our-achievement .single-achievement p {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    text-transform: capitalize;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
    .our-achievement .title h2 {
        font-size: 24px;
            line-height: 32px;
    }

    .our-achievement .single-achievement {
        margin-top: 30px;
    }

    .our-achievement .single-achievement h3 {
        font-size: 28px;
    }
}


.input-group-text .bx {
    margin-top: 0px;
}

.center-graph {
    display: flex;
    justify-content: center;
    align-items: center;
    /* /height: 100vh; Ajustez selon vos besoins */
}

.right-graph {
    display: flex;
    justify-content: right;
    align-items: right;
    /* /height: 100vh; Ajustez selon vos besoins */
}

.small {
    font-size: 80% !important;
}
.small_xs {
    font-size: 70% !important;
}
.text-leger {
    font-weight: 300;
    color: var(--bg-mag-text);
}

.text-right {
    text-align: right;
}

.text-grand {
    font-size: 42px;
    font-weight: 400;
}
td {
    padding-left: 3px;
    padding-right: 3px;
}

/* .alert-mag {
--bs-alert-color: #fff;
    --bs-alert-bg: #3d76ad;
    --bs-alert-border-color: var(--border-form);
} */
.btn-close {
    color: #fff !important;
}

.btn-sm {
    font-size: 13px !important;
}

.btn-close:hover {
    color: #3d76ad88 !important;
}

#session_bar {
    height: 3px;
    background-color: var(--primary-color);
}

.progress {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: #e9ecef;
    --bs-progress-border-radius: 0.375rem;
    /* --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); */
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #3d76ad;
    --bs-progress-bar-transition: width 0.3s ease;
    display: flex;
    height: 3px;
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: var(--sidebar-color);
}

/* PROGRESS BAR UPLOAD */
#progress-wrp {
    /* border: 1px solid #ffffff; */
    padding: 0px;
    position: relative;
    border-radius: 5px;
    /* margin: 10px; */
    text-align: left;
    /* background: rgb(105, 101, 101);
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
    */
}

#progress-wrp .progress-bar {
    height: 3px;
    border-radius: 5px;
    background-color: #0db816;
    width: 0;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
    font-family: inherit;
}

#progress-wrp .status {
    top: 3px;
    left: 50%;
    position: absolute;
    display: inline-block;
    color: #ffffff;
}

/* ******************** FLGA */
/* ****************************** custom-file-input */
.custom-file {
    /* position: relative;
display: inline-block;
    */
    width: 0;
    height: calc(1.5em + 0.75rem + 2px);
    /* margin-bottom: 0; */
}

.custom-file-input {
    /* position: relative;
z-index: 2;
    */
    width: 0;
    /* height: calc(1.5em + 0.75rem + 2px);
margin: 0;
    */
    opacity: 0;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Parcourir";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0;
}

.custom-file-input:focus~.custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-file-input[disabled]~.custom-file-label,
.custom-file-input:disabled~.custom-file-label {
    background-color: #e9ecef;
}

.custom-file-input:lang(en)~.custom-file-label::after {
    content: "Explorer";
}

.custom-file-input~.custom-file-label[data-browse]::after {
    content: attr(data-browse);
}

.was-validated .custom-file-input:valid~.custom-file-label,
.custom-file-input.is-valid~.custom-file-label {
    border-color: #28a745;
}

.was-validated .custom-file-input:valid:focus~.custom-file-label,
.custom-file-input.is-valid:focus~.custom-file-label {
    border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .custom-file-input:invalid~.custom-file-label,
.custom-file-input.is-invalid~.custom-file-label {
    border-color: #dc3545;
}

.was-validated .custom-file-input:invalid:focus~.custom-file-label,
.custom-file-input.is-invalid:focus~.custom-file-label {
    border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.input-group>.form-control:focus,
.input-group>.custom-select:focus,
.input-group>.custom-file .custom-file-input:focus~.custom-file-label {
    z-index: 3;
}

.input-group>.custom-file .custom-file-input:focus {
    z-index: 4;
}

/* ******************************* custom-file-input */
/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 230px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;
    border-right: .01rem solid var(--border-form);
}

.sidebar.close {
    width: 75px;
}

.logo-lettre {
    width: 100%;
    height: 0px;
    /* background-color: blue; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 17px;
}
b {
    font-weight: 600;
}

.ml-2 {
    margin-left: 10px;
}

p {
    margin: 0 !important;
}

/* ===== Reusable code - Here ===== */
.sidebar li {
    height: 34px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.sidebar header .image,
.sidebar .icon,
.sidebar .icon_red,
.sidebar .icon_exp {
    min-width: 51px;
    border-radius: 6px;
}

.sidebar .text,
.sidebar .icon {
    color: var(--text-color);
    transition: var(--tran-05);
}

.txt-bar,
.ico-bar {
    font-size: 100%;
    margin-top: 3px;
    background-color: var(--bg-form);
    border-radius: 6px;
    padding: 5px;
    margin-right: 5px;
}

.ico-bar {
    font-size: 120% !important;
    margin-top: -2px;
}

.sidebar .icon,
.sidebar .icon_red,
.sidebar .icon_exp {
    min-width: 48px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-color);
}
.l-2 {
    width: 20px;
}
span .l-2 {
    display: inline-block;
}

.icon-ltr {
    background-color: transparent;
}

.icon_red {
    color: #dc3545 !important;
}
.icon_exp {
    color: var(--primary-color);
}

.logo-ltr {
    width: 48px;
    height: 48px;
    background-color: #3d76ad;
    color: #fff;
    text-align: center;
    /* padding-top: -6px; */
    font-weight: 800;
    border-radius: 31%;
    font-size: 32px;
    text-decoration: none;
}

.logo-ltr-p {
    min-width: 24px;
    height: 24px;
    background-color: #3d76ad;
    color: #fff;
    text-align: center;
    /* padding-top: -6px; */
    font-weight: 800;
    border-radius: 6px;
    font-size: 17px;
    text-decoration: none;
    margin-left: 12px;
    margin-right: 12px;
}

.sidebar .text {
    /* font-size: 17px;
font-weight: 500;
    */
    white-space: nowrap;
    opacity: 1;
}

.sidebar.close .text,
.sidebar.close .horloge {
    opacity: 0;
}

/* =========================== */
.sidebar header {
    position: relative;
    margin-top: 0px;
}

.sidebar header .image-text {
    /* display: flex; */
    /* align-items: center; */
    /* border-bottom: 1px dotted var(--primary-color); */
    /* border: 1px solid var(--border-form); */
    /* border-radius: 6px; */
    /* background: rgb(227,230,232); */
    /* background: -moz-linear-gradient(90deg, rgba(227,230,232,0.49761911600577735) 0%, rgba(61,118,173,1) 100%); */
    /* background: -webkit-linear-gradient(90deg, rgba(227,230,232,0.49761911600577735) 0%, rgba(61,118,173,1) 100%); */
    /* background: linear-gradient(90deg, rgba(227,230,232,0.49761911600577735) 0%, rgba(61,118,173,1) 100%); */
    /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3e6e8",endColorstr="#3d76ad",GradientType=1); */
    padding: 0px;
    /* margin-top: 15px; */
    text-align: center;
    min-height: 40px;
}

.sidebar header .logo-text {
    display: flex;
    flex-direction: column;
}

header .image-text .name {
    margin-top: 2px;
    font-size: 20px;
    font-weight: 800;
}

header .image-text .profession {
    font-size: 16px;
    margin-top: -2px;
    display: block;
}

.sidebar header .image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar header .image img {
    width: 30px;
    border-radius: 6px;
    margin-left: -4px;
}

/* .sidebar header .toggle {
position: absolute;
    top: 45%;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    height: 25px;
    width: 25px;
    background-color: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    transition: var(--tran-05);
} */
.sidebar header .toggle {
    position: absolute;
    top: 50%;
    right: -28px;
    transform: translateY(-50%) rotate(180deg);
    height: 30px;
    width: 30px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: var(--tran-05);
    font-weight: 800;
}

body.dark .sidebar header .toggle {
    color: var(--text-color);
}

.horloge {
    font-size: 100%;
    color: var(--text-color);
}

.lien-case {
    width: 54px;
    height: 1px;
    position: absolute;
    background-color: var(--primary-color);
    top: 43px;
    left: -54px;
    z-index: 2000;
    opacity: 0.50;
}

hr {
    border-color: var(--primary-color);
    opacity: 0.50;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}
.mhr-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.petit {
    font-size: 70%;
    font-weight: 500;
    color: var(--text-color);
}



.sidebar.close .toggle {
    transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu {
    margin-top: 6px;
}

.smenu,
.target {
    /* background-color: var(--bg-mag); */
    padding: 20px;
}

h5 {
    font-weight: 500 !important;
}

.bg-tb-a {
    /* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(61, 118, 173, 0.8) 65%); */
    background-color: var(--bg-a);
    padding: 16px 8px 8px 8px;
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
}

.bg-tb-b {
    /* background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(240, 6, 6, 0.8) 65%); */
    background-color: var(--bg-b);
    padding: 16px 8px 8px 8px;
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
}

.bg-tb-c {
    /* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(96, 184, 46, 0.8) 65%); */
    background-color: var(--bg-c);
    padding: 16px 8px 8px 8px;
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
}

.bg-tb-d {
    /* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 134, 22, 0.8) 65%); */
    background-color: var(--bg-d);
    padding: 16px 8px 8px 8px;
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
}

.ui-autocomplete {
    max-height: 550px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

/* html .ui-autocomplete {
height: 500px;
}

*/
.ui-widget-content {
    border: 1px solid var(--border-form) !important;
    background: var(--bg-cal);
    color: var(--text-color);
    width: auto !important;
    border-radius: var(--btn-mag-radius);
    /* top:185px !important;
left: 15px !important;
    */
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
        margin: .5em .2em .4em;
        cursor: pointer;
        padding: .2em .6em .3em .6em;
        width: auto;
        overflow: visible;
        border-radius: var(--btn-mag-radius);
        width: 40%;
}

.err {
    /* background-color: var(--body-color); */
    color: var(--primary-color);
    font-size: 90px;
    font-weight: 900;
    margin: auto;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid var(--border-form);
    background: var(--hover-link);
    font-weight: normal;
    color: var(--hover-link-text);
}

.form-navbar {
    /* margin-top: 17px; */
    color: var(--primary-color);
}
.form-check-input {
    height: 1.1em !important;
    background-color: var(--bg-form);
    border-color: var(--border-form);
}

.form-check-input:checked,
.form-check-input:focus {
    height: 1.1em !important;
    background-color: var(--bg-form);
    border-color: var(--border-form);
}

.sidebar li.search-box {
    border-radius: 6px;
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

/* #horloge{
border-radius: 6px;
    background-color: var(--primary-color-light);

    transition: var(--tran-05);
} */
.sidebar li.search-box input {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: var(--primary-color-light);
    color: var(--text-color);
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    transition: var(--tran-05);
}

.sidebar li a {
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-05);
}

.sidebar li a:hover {
    background-color: var(--hover-link);
    color: var(--hover-link-text);
}

.svert {
    background-color: #3d76ad33;
    border-radius: 6px;
}

.sidebar li a:hover .icon,
.sidebar li a:hover .text {
    color: var(--hover-link-text);
}

body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
    color: var(--hover-link-text);
}

.sidebar .menu-bar {
    height: calc(100% - 120px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* overflow-y: scroll; */
}

.menu-bar::-webkit-scrollbar {
    display: none;
}

.sidebar .menu-bar .mode,
.sidebar .menu-bar .mode-p {
    border-radius: 6px;
    /* background-color: var(--primary-color-light); */
    position: relative;
    transition: var(--tran-05);
    /* margin-bottom: 20px; */
    margin-bottom: -15px;
}

.menu-bar .mode .sun-moon,
.menu-bar .mode-p .collap-ext {
    height: 50px;
    width: 48px;
}

.mode-text,
.mode-text-p {
    margin-top: -10px;
}

.mode .sun-moon i,
.mode-p .collap-ext i {
    position: absolute;
    margin-top: 4px;
}

.mode .sun-moon i.sun,
.mode-p .collap-ext i.collapse {
    opacity: 0;
}

body.dark .mode .sun-moon i.sun,
body.dark .mode-p .collep-ext i.collapse {
    opacity: 1;
}

body.dark .mode .sun-moon i.moon,
body.dark .mode-p .collap-ext i.collapse {
    opacity: 0;
}

.menu-bar .bottom-content .toggle-switch,
.menu-bar .bottom-content .toggle-plein {
    position: absolute;
    right: 0;
    height: 100%;
    min-width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    margin-top: -12px;
}

.toggle-switch .switch,
.toggle-plein .switch-p {
    position: relative;
    height: 22px;
    width: 35px;
    border-radius: 25%;
    background-color: var(--primary-color);
    transition: var(--tran-05);
    margin-right: -10px;
}

.switch::before,
.switch-p::before {
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    border-radius: 25%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--sidebar-color);
    transition: var(--tran-05);
}
div.toggle-plein#tog span.switch-p.tog::before {
    left: 20px;
}

.pointer {
    cursor: pointer;
}
.move {
    cursor: move;
}
body.dark .switch::before {
    left: 20px;
}

#annonce,
#check-all {
    display: inline-block;
}

#etat-bar,
#menu-list,
.etat-bar {
    padding: 3px;
}

.sticky-bottom {
    position: -webkit-sticky;
    position: relative;
    z-index: 1020;
    left: 50%;
    bottom: -10%;
    width: 30%
}

.home {
    position: absolute;
    top: 0;
    top: 0;
    left: 230px;
    height: 100vh;
    width: calc(100% - 230px);
    background-color: var(--body-color);
    background-image: var(--body-img);
    background-size: cover;
    transition: var(--tran-02);
}

input[type="checkbox"] {
    -webkit-appearance: none;
        appearance: none;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 22px;
    height: 22px;
    transform: translateY(0.33em);
    -webkit-transform: translateY(0.33em);
    -moz-transform: translateY(0.33em);
    -ms-transform: translateY(0.33em);
    -o-transform: translateY(0.33em);
}

input[type="checkbox"] {
background-image: url('../css/images/bx-checkbox.svg') !important;
background-size: contain;
/* Ajuste l'image à la taille du conteneur */
background-repeat: no-repeat;
/* Évite la répétition de l'image */
background-position: center;
/* Centre l'image dans le checkbox */
width: 22px;
height: 22px;
/* Ajuste la hauteur pour correspondre à la largeur */
appearance: none;
/* Supprime le style par défaut du checkbox */
cursor: pointer;
border: none;
}

input[type="checkbox"]:checked {
background-image: url('../css/images/bx-checkbox-checked.svg') !important;
background-size: contain;
/* Ajuste l'image à la taille du conteneur */
background-repeat: no-repeat;
/* Évite la répétition de l'image */
background-position: center;
/* Centre l'image dans le checkbox */
width: 22px;
height: 22px;
/* Ajuste la hauteur pour correspondre à la largeur */
appearance: none;
/* Supprime le style par défaut du checkbox */
cursor: pointer;
border: none;
}

/* !  Modifier le input checked   */
/*  ! eviter le gros switch */
#attente_target,
#attente_resultat {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.descrip {
    border-left: 4px solid var(--border-form);
    margin-left: 5px;
}

.scroll {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.scroll-s {
    height: 220px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.scroll-xs {
    height: 65px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.scroll-m {
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.scroll-l {
    height: 765px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.menu-mag {
    display: inline-flex;
}
.tip {
    background-color: var(--bg-mag);
    border-radius: var(--btn-mag-radius);
    font-size: 50%;
    margin-top: 15px
}

.trsoul {
    border-bottom: 0.1rem dotted var(--border-form);
}

.trsoul:hover {
    border-bottom: 0.10rem solid var(--border-form);
    background-color: var(--bg-form);
}

.bande {
    margin-bottom: 5px;
        background-color: #ff790080;
        color: var(--bg-mag-text);
        border-radius: var(--btn-mag-radius);
        max-height: 8px;
        width: 100%;
        position: relative;
        bottom: 3px;
}



.conn {
    position: absolute;
    top: 0;
    top: 0;
    left: 0px;
    height: 100vh;
    width: calc(100% - 0px);
    background-color: var(--body-color);
    /* background-image: url('../img/fond_2.png'); */
    background-position: bottom;
    background-repeat: no-repeat;
    transition: var(--tran-05);
}

.home .text {
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 12px 60px;
}

.sidebar.close~.home {
    left: 75px;
    height: 100vh;
    width: calc(100% - 75px);
    transition: var(--tran-05);
}

body.dark .home .text {
    color: var(--text-color);
}

/* .attente,
.attente_menu,
.attente_target {
position: relative;
    display: flex;
    color: var(--text-color);
} */
.text-bold {
    font-weight: 600;
}

.txt {
    color: var(--bg-mag-text);
}

.titre-bloc {
    color: var(--primary-color);
    font-weight: 800;
}

#resultat {
    padding: 20px 10px 30px 25px;
    color: var(--text-color);
}

.bg-mag {
    /* background-color: var(--sidebar-color); */
    color: var(--bg-mag-text) !important;
    /* border-radius: var(--btn-mag-radius) !important;
    border: .01rem solid var(--border-form); */
}

.bg-bilan {
    padding: 15px;
        /* background-color: var(--body-color); */
        /* margin: -2px; */
        border: 20px solid transparent;
        border-radius: 0px;
}
.bg-pale-o {
    background-color: var(--bg-pale-o) !important;
    border-color: var(--bg-pale-o) !important;
        color: #ffffff !important;
}

.border-dot-infos {
    border: 1px dotted var(--border-form);
        margin: 0;
        padding: 20px;
        border-radius: var(--btn-mag-radius);
        background-color: var(--bg-border-dot);
        margin-bottom: 25px;
        height: 310px;
}

.border-dot {
    border: 1px dotted var(--border-form);
        margin: 0;
        padding: 20px;
        border-radius: var(--btn-mag-radius);
        background-color: var(--bg-border-dot);
    /* background-image: linear-gradient(to right bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12); */
    /*background: rgb(0,0,0); */
    /* background: -moz-radial-gradient(circle, rgba(0,0,0,0) 70%, rgba(61,118,173,0.2539216370141807) 100%);
background: -webkit-radial-gradient(circle, rgba(0, 0, 0, 0) 70%, rgba(61, 118, 173, 0.2539216370141807) 100%);
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 70%, rgba(61, 118, 173, 0.2539216370141807) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#3d76ad", GradientType=1);
    */
}

.border-fiche {
    border: 1px dotted var(--border-form);
        padding: 18px;
        border-radius: var(--btn-mag-radius);
        background-color: var(--bg-border-dot);
        height: 115px;
}

.border-dot:hover,
.border-dot-infos:hover {
    background-color: var(--bg-border-dot-hover);
    /* box-shadow: 0px 0px 120px var(--btn-mag-radius) var(--btn-mag-hover)  ; */
    z-index: 10000;
}

.bg-graph {
    padding-top: 10px;
    background-color: var(--bg-a);
    border-radius: var(--btn-mag-radius);
}

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.325rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.5;
    /* --bs-btn-color: #212529; */
    --bs-btn-color: var(--bg-mag-text)
            /* --bs-btn-bg: transparent; */
            --bs-btn-border-width: 1px;
    /* --bs-btn-border-color: transparent; */
    --bs-btn-border-radius: var(--btn-mag-radius);
    /* --bs-btn-hover-border-color: transparent; */
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    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;
}
.btn-danger {
    border-radius: var(--btn-mag-radius) !important;
}

.btn-mag {
    background-color: #343a40 !important;
    color: var(--bg-mag-text);
    border-color: var(--border-form) !important;
    padding: 0.375rem 0.75rem 0.375rem 0.75rem !important;
    /* margin: 10px 0px 10px 0px; */
    display: block !important;
    width: 100%;
    text-align: left;
    /* font-size: 17px;*/
    font-weight: 400;
    border-radius: var(--btn-mag-radius) !important;
}

.btn-mag:hover,
.btn-mag-n:hover {
    background-color: #343a40;
    color: var(--bg-mag-text) !important;
    border-color: var(--border-form) !important;
    border-radius: var(--btn-mag-radius) !important;
    box-shadow: 0px 0px 80px var(--btn-mag-radius) var(--btn-mag-hover);
}
.btn-primary {
    margin: 0px 0px 10px 0px;
}
.btn-mag-demi {
    background-color: var(--btn-mag) !important;
    color: var(--bg-mag-text);
    border-color: var(--border-form) !important;
    padding: 0.30rem 0.60rem 0.30rem 0.60rem !important;
    margin: 10px 0px 10px 0px;
    display: block !important;
    width: 100%;
    text-align: left;
    /* font-size: 17px;*/
    font-weight: 400;
    width: 50%;
    border-radius: var(--btn-mag-radius) !important;
}
.btn-mag-court {
    background-color: var(--btn-mag) !important;
    color: var(--bg-mag-text);
    border-color: var(--border-form) !important;
    padding: 0.30rem 0.60rem 0.30rem 0.60rem !important;
    margin: 10px 0px 10px 0px;
    display: block !important;

    text-align: left;
    /* font-size: 17px;*/
    font-weight: 400;
    width: auto;
}

.btn-mag-n {
    /* background-image: linear-gradient(to bottom, var(--color1), var(--color2)); Remplacez var(--color1) et var(--color2) par les couleurs de votre choix */
    background-color: var(--btn-mag);
    color: var(--bg-mag-text);
    /* border-color: var(--border-form) ; */
    border-radius: var(--btn-mag-radius) !important;
    margin: 0px 0px 10px 0px;
    font-weight: 400;
    position: relative;
}
.dropdown-menu {
    border-radius: var(--btn-mag-radius) !important;
    background-color: var(--btn-mag);
    color: var(--bg-mag-text)
}
.dropdown-item {
    color: var(--bg-mag-text);
}

.dropdown-item:hover, .dropdown-item:focus {
	color: var(--bg-mag-text);
	background-color: var(--btn-mag-hover);
}

.btn-mag-n {
    margin-top: 5px;
}

.btn-mag-danger {
    background-color: var(--btn-mag) !important;
    color: #fc0000 !important;
    border-color: var(--border-form) !important;
    padding: 0.30rem 0.60rem 0.30rem 0.60rem !important;
    margin: 0px 0px 10px 0px;
    display: block !important;
    width: 100%;
    /* text-align: left; */
    /* font-size: 17px;*/
    font-weight: 400;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y)) !important;
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.navbar-brand {
    color: var(--primary-color);
    font-weight: 700;
    top: 2px;
        position: relative
}

.mr-4 {
    margin-right: 20px;
}

.mr-2 {
    margin-right: 10px;
}
.mr-1 {
    margin-right: 5px;
}

.nav-link {
    color: var(--bg-mag-text) !important;
}

.nav-link:hover {
    color: var(--primary-color) !important;
    box-shadow: 0px 0px 15px var(--btn-mag-radius) var(--bg-border-dot-hover);
}

.mr-3 {
    margin-right: 10px;
}
.w-33 {
    width: 33%;
}
.w-50 {
    width: 50%;
}
.w-25 {
    width: 25%;
}
.souligne {
    text-decoration: underline;
}

.puce {
    background-color: var(--warning);
    color: #fff;
    border-radius: var(--btn-mag-radius);
    font-size: 80%;
    padding: 3px 10px 3px 10px;
}

.puce-bottom {
    background-color: var(--primary-color);
        color: #fff;
        border-radius: var(--btn-mag-radius);
        font-size: 80%;
        padding: 3px 6px 3px 6px;
        display: inline-block;
        width: auto;
        min-width: 32px;
        text-align: center;
}

.puce-tab {
    width: 90px;
}

.puce-blue {
    background-color: var(--bg-a);
    color: #fff;
    border-radius: var(--btn-mag-radius);
    font-size: 80%;
    padding: 5px;
}

.puce-btn {
    background-color: var(--bg-form);
    color: var(--bg-mag-text);
    border-radius: var(--btn-mag-radius);
    font-size: 100%;
    padding: 5px 6px 5px 6px;
}

.notification-mark {
    width: 9px;
    height: 9px;
    top: -5px;
    right: -4px;
    border-radius: 50%;
    position: absolute;
    background-color: var(--bg-notification-danger);
}


.puce-btn:hover {
    color: #3d76ad;
    box-shadow: 0px 0px 15px var(--btn-mag-radius) var(--bg-border-dot-hover);
}
.puce-mag {
    background-color: var(--bg-form);
    color: var(--bg-mag-text);
    border-radius: var(--btn-mag-radius);
    font-size: 85%;
    padding: 3px 6px 3px 6px;
}

.puce-mag:hover {
    color: #3d76ad;
    box-shadow: 0px 0px 15px var(--btn-mag-radius) var(--bg-border-dot-hover);
}

.puce-2 {
    width: 50px;
        /* display: inline-block; */
        text-align: center;
        font-weight: 500;
}

.puce-bar {
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 7px;
    font-size: 80%;
    padding: 3px 15px 1px 15px;
    width: 33%;
    margin-right: auto;
    margin-left: auto;
}

.puce-titre {
    background-color: var(--bg-border-dot);
        color: var(--bg-mag-text);
        border-radius: var(--btn-mag-radius);
        font-size: 100%;
        padding: 3px 15px 2px 15px;
        width: 50%;
        margin-right: auto;
        margin-left: auto;
    text-align: right;
}

.puce-titre:hover {
    box-shadow: 0px 0px 120px var(--btn-mag-radius) var(--bg-border-dot-hover);
}

.title-row {
    border-collapse: collapse;
    border-bottom: 1px solid var(--primary-color);
}
th,
td {
    padding: 3px;
}
.btn.rappel {
    position: relative;
}

.btn.rappel::before {
    content: '';
        display: block;
        width: 8px;
        height: 8px;
        background-color: #fd0707;
        position: absolute;
        top: 0;
        left: 101%;
        transform: translateX(-101%);
        margin: 0;
        padding: 0;
        border-top-right-radius: var(--btn-mag-radius);
        /* border-left: 50px solid transparent; */
        /* border-right: 50px solid transparent; */
        /* border-bottom: 100px solid red; */
        border-bottom-left-radius: 150%;
        /* border: 1px solid var(--border-form); */
}

.input-group>.form-control,
.input-group>.form-select,
.input-group>.form-floating {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-top-right-radius: var(--btn-mag-radius) !important;
    border-bottom-right-radius: var(--btn-mag-radius) !important;
}

.absplus {
    position: absolute !important;
    right: 10px;
    z-index: 900;
    }

.abs {
    position: absolute !important;
    /* right: 8px; */
    z-index: 900;
}
.bx-close {
    padding: 0px;
        background-color: #335e898a;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
    margin-top: 30px;
        
        position: absolute !important;
        left: 100px;
        top: 10px;
}
.page_bas {
    /* background-color: #9876548a; */
    padding: 10px;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%
}
.rel {
    position: absolute !important;
	background-color: var(--bg-mag);
	z-index: 3;
    width: 100%;
        padding-right: 100px;
        padding-left: 100px;
        padding-top: 100px;
        padding-bottom: 50px;
	border-radius: var(--btn-mag-radius);
	min-height: 150px;
    top: 0;
        left: 0;
        height: 100vh;
}
/* .check {
margin-right: 10px;
transform: translateY(-5px);
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
} */

.form-check .form-check-input {
    /* float: left; */
    margin-left: -1.5em;
}

.copied {
    background-color: #355923;
    color: #fff;
    border-radius: 7px;
    font-size: 100%;
    padding: 3px 15px 1px 15px;
    position: absolute;
    margin-top: 7px;
}

.pull-right {
    float: right;
    clear: both;
}

.pull-left {
    float: left;
    clear: both;
}

#toggle-bar {
    background-color: var(--sidebar-color);
    overflow-y: auto;
    transition: transform 0.3s;
    padding: 35px 10px 30px 25px;
    color: var(--text-color);
    width: var(--bar-param);
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: 0.1rem solid var(--border-form);
}

#toggle-bar.open {
    transform: translateX(var(--bar-param));
}

#home.pushed {
    margin-right: var(--bar-param);
    /* transition: margin-right 0.3s; */
    transition: var(--tran-05);
}
.fond {
    /* background-image: url('../img/svg/fond_01.svg'); */
    background-size: cover;
}

.titre {
    color: var(--titre-color);
    font-weight: 500;
}

.box-mag {
    z-index: 5000;
        position: absolute;
        margin-right: 23px;
        margin-left: 113px;
        margin-top: 42%;
    
    }
span.menu-horizontal {
    display: inline-block;
}

.form-control,
.form-control:focus {
    color: var(--text-color);
    background-color: var(--bg-form);
    border: 1px solid var(--border-form);
    border-radius: var(--btn-mag-radius);
}
.form-control-n {
    color: var(--text-color);
    background-color: var(--bg-form);
    border: 1px solid var(--border-form);
    border-radius: var(--btn-mag-radius);
        padding: 0.3rem 0.75rem 0.3rem 0.75rem
}

.form-control-n:hover {
    box-shadow: 0px 0px 80px var(--btn-mag-radius) var(--btn-mag-hover);
    /* z-index: 10000; */
}

.icon-bar {
    top: 3px;
    position: relative;
    margin-right: 2px;
}

.icon-bar-p {
    top: 3px;
    position: relative;
}

.input-group-text {
    color: var(--text-color);
    background-color: var(--bg-form) !important;
    border: 1px solid var(--border-form) !important;
    font-weight: 500;
}

.graph {
    padding: 20px;
}

.ui-widget-header {
    border: 1px solid var(--border-form);
        background: var(--sidebar-color);
        color: var(--bg-mag-text);
        font-weight: bold;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid var(--border-form);
    background: var(--sidebar-color);
    font-weight: normal;
    color: var(--bg-mag-text);
    border-radius: var(--btn-mag-radius);
}

.ui-widget-header .ui-icon {
    background-image: url("../css/images/ui-icons_888888_256x240.png");
}
.ui-datepicker-days-cell-over .ui-datepicker-current-day .ui-datepicker-today {
    background-color: #f00;
}
.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: .5em;
    text-align: center;
    text-decoration: none;
    width: 50px;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
/* .ui-widget-header, */
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    border: 1px solid var(--border-form);
        background: var(--primary-color);
        /* font-weight: bold; */
        color: #fff;
}
.ui-widget-header .ui-state-hover {
    background-color: var(--hover-link);
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
        margin: 4px 0 0 -4px;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
}
.ui-datepicker-week-col {
    text-align: center;
}
.ui-datepicker-month,
.ui-datepicker-year {
    font-weight: 700;
    font-size: 17px;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
        line-height: 50px;
        text-align: center;
}

.sous-tb {
    font-weight: 700 !important;
        color: var(--primary-color);
        height: 50px;
        vertical-align: top;
}
.l-1 {
    width: 24px;
}
.l-2 {
    width: 42px;
}
.l-3 {
    width: 56px;
}
.l-4 {
    width: 62px;
}
.l-5 {
    width: 80px;
}

.l-9 {
    width: 120px;
}

.l-12 {
    width: 150px;
}
.l-49 {
    width: 49%;
}
.l-30 {
    width: 30%;
}
.l-25 {
    width: 25%;
}
.l-20 {
    width: 20%;
}
.l-160 {
    width: 160px;
}
.btn-tab {
    padding: 4px;
    margin: 2px;
    background-color: var(--bg-form);
}
.btn-tab-warning {
    padding: 4px;
    color: #ff7c01 !important;
        margin: 2px;
    background-color: var(--bg-form);
}
.btn-tab-danger {
    padding: 4px;
    color: #ff0101 !important;
        margin: 2px;
    background-color: var(--bg-form);
}
.btn-tab-success {
    padding: 4px;
    color: #28a745 !important;
        margin: 2px;
    background-color: var(--bg-form);
}

span[contenteditable]:focus,
p[contenteditable]:focus {
    background-color: var(--bg-form) !important;
    border-bottom: 0.05rem solid #ff0101 !important;
    /* border-radius:6px; */
    padding: 0px;
        outline: 0px solid #09a41a;
    }

[contenteditable] {
    border-bottom: 0.05rem dotted var(--primary-color);
}

/* NOTIFY */
.notifications-container {
    max-height: 100vh;
    max-width: 80%;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 9999
}

.notifications-container.notify-is-x-center {
    left: 50%;
    transform: translateX(-50%)
}

.notifications-container.notify-is-y-center {
    top: 50%;
        transform: translateY(-50%)
}

.notifications-container.notify-is-center {
    left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
}

.notifications-container.notify-is-left {
    left: 0
}

.notifications-container.notify-is-right {
    right: 0
}

.notifications-container.notify-is-top {
    top: 0
}

.notifications-container.notify-is-bottom {
    bottom: 0
}

.notifications-container.notify-is-x-center.notify-is-top {
    top: var(--distance)
}

.notifications-container.notify-is-x-center.notify-is-bottom {
    bottom: var(--distance)
}

.notifications-container>* {
    pointer-events: auto
}

.notify {
    --notify-error: #a20a0a;
        /* rgb(235, 87, 87);*/
        --notify-error-progress: rgb(204, 174, 174);
    --notify-success: #09a41a;
        /* rgb(111, 207, 151);*/
        --notify-success-progress: rgb(172, 199, 165);
    --notify-warning: #bc6b15;
        /* rgb(242, 201, 76);*/
        --notify-warning-progress: #d38b3e;
        --notify-info: #3d76ad;
            --notify-info-progress: #6892b9;
    --notify-gray: #efefef;
        /* rgb(51, 51, 51);*/
        --notify-gray-2: rgb(77, 77, 77);
        --notify-gray-3: rgb(130, 130, 130);
        --notify-white: rgb(255, 255, 255);
        --notify-white-2: rgb(255, 255, 255);
        --notify-padding: 0.75rem;
        --notify-icon-size: 32px;
        --notify-close-icon-size: 16px;
        align-items: center;
        border-radius: var(--btn-mag-radius);
        box-sizing: border-box;
        display: flex;
        font-family: var(--font);
        overflow: hidden;
        padding: var(--notify-padding);
        position: relative;
        text-decoration: none;
        transition-timing-function: ease;
        width: 100%
}

.notify__icon {
    align-items: center;
        display: flex;
        flex-shrink: 0;
        height: var(--notify-icon-size);
        justify-content: center;
        margin-right: 12px;
        width: var(--notify-icon-size);
    color: #fff
}

.notify__close {
    align-items: center;
        cursor: pointer;
        display: flex;
        height: var(--notify-close-icon-size);
        justify-content: center;
        position: absolute;
        right: 12px;
        top: 12px;
        user-select: none;
        width: var(--notify-close-icon-size)
}

.notify__close * {
    pointer-events: none
}

.notify__title {
    font-size: 1rem;
        font-weight: 600;
        padding-right: calc(var(--notify-padding) + var(--notify-close-icon-size));
    color: #fff
}

.notify__text {
    font-size: 0.875rem;
        margin-top: 0.25rem
}

.notify--type-1 {
    background-color: #fff;
        border: 1px solid currentColor
}

.notify--type-1 .notify__close {
    color: var(--notify-gray-3)
}

.notify--type-1 .notify__title {
    color: var(--notify-gray)
}

.notify--type-1 .notify__text {
    color: var(--notify-gray-2)
}

.notify--type-2 {
    color: var(--notify-gray)
}

.notify--type-3 {
    color: var(--notify-white-2)
}

.notify--type-3 .notify__text {
    color: var(--notify-white-2);
        text-align: center;
}

.notify--error.notify--type-1 {
    box-shadow: 0 2px 26px rgba(215, 0, 0, 0.1);
        color: var(--notify-error)
}

.notify--error.notify--type-2,
.notify--error.notify--type-3 {
    background-color: var(--notify-error)
}

.notify--warning.notify--type-1 {
    box-shadow: 0 2px 26px rgba(242, 201, 76, 0.1);
        color: var(--notify-warning)
}

.notify--warning.notify--type-2,
.notify--warning.notify--type-3 {
    background-color: var(--notify-warning)
}

.notify--success.notify--type-1 {
    box-shadow: 0 2px 26px rgba(82, 215, 0, 0.1);
        color: var(--notify-success)
}

.notify--success.notify--type-2,
.notify--success.notify--type-3 {
    background-color: var(--notify-success)
}

.notify--info.notify--type-1 {
    box-shadow: 0 2px 26px rgba(84, 175, 202, 0.1);
        color: var(--notify-info)
}

.notify--info.notify--type-2,
.notify--info.notify--type-3 {
    background-color: var(--notify-info)
}

.notify--fade {
    opacity: 0;
        will-change: opacity
}

.notify--fadeIn {
    opacity: 1
}

.notify--slide {
    opacity: 0;
        will-change: opacity, transform
}

.notify-is-center .notify--slide,
.notify-is-y-center .notify--slide,
.notify-is-x-center:not(.notify-is-bottom) .notify--slide {
    transform: translateY(-20px)
}

.notify-is-x-center.notify-is-bottom .notify--slide {
    transform: translateY(20px)
}

.notify-is-right .notify--slide {
    transform: translateX(calc(var(--distance) + 110%))
}

.notify-is-left .notify--slide {
    transform: translateX(calc((var(--distance) * -1) - 110%))
}

.notify-is-x-center:not(.notify-is-bottom) .notify--slideIn,
.notify-is-center .notify--slideIn,
.notify-is-y-center .notify--slideIn,
.notify-is-x-center.notify-is-bottom .notify--slideIn {
    opacity: 1;
        transform: translateY(0)
}

.notify-is-right .notify--slideIn,
.notify-is-left .notify--slideIn {
    opacity: 1;
        transform: translateX(0)
}

.notify-is-left .notify {
    left: var(--distance)
}

.notify-is-right .notify {
    right: var(--distance)
}

.notify-is-top .notify,
.notify-is-center .notify,
.notify-is-y-center .notify,
.notify-is-x-center.notify-is-top .notify {
    margin-top: var(--gap)
}

.notify-is-bottom .notify,
.notify-is-x-center:not(.notify-is-top) .notify {
    margin-bottom: var(--gap)
}

.notify.notify-autoclose {
    --progress-height: 5px;
        padding-bottom: calc(var(--notify-padding) + var(--progress-height))
}

.notify.notify-autoclose::before {
    animation: progress calc(var(--timeout) * 1ms) linear forwards;
        bottom: 0;
        content: '';
        height: var(--progress-height);
        left: 0;
        position: absolute;
        transform: scale3d(1, 1, 1);
        transform-origin: left;
        width: 100%
}

@keyframes progress {
    to {
            transform: scale3d(0, 1, 1)
        }
}

.notify.notify-autoclose.notify--error::before {
    background-color: var(--notify-error-progress)
}

.notify.notify-autoclose.notify--warning::before {
    background-color: var(--notify-warning-progress)
}

.notify.notify-autoclose.notify--success::before {
    background-color: var(--notify-success-progress)
}

.notify.notify-autoclose.notify--info::before {
    background-color: var(--notify-info-progress)
}