/* Fichier CSS qui permet de définir uniquement les couleurs de différentes classes et polices de caractères utilisées
--> thème principal du site avec les couleurs sous la forme de variable
*/

:root {
    --yellow: #F5B400;
    --yellow-light:#fce5a8;
    --yellow-dark:#bd8a00;
    --green: #52B59B;
    --green-light:#f1fffb;
    --green-light2:#9ff8ab;
    --green-green : #41e757;
    --dark-green :#2ea13e;
    --blue-light: #E5F7F1;
    --blue-light2: #c7dcff;
    --blue: #218E99;
    --blue-shiny:#1CCBDD;
    --blue-dark: #52b59b ;
    --blue-dark-hover: #7ab4a5 ;
    --blue-low-opacity:#52b59b36;
    --red: #ff6363;
    --red-light: #ffbaba;
    --red-dark: #ac3232;
    --orange:#e4800e;
    --grey: #e6e6e6;
    --grey-light : #f8f8f8;
    --white: #FFFFFFFF;
    --black: #000000FF;
    --black-light: #585858;
    --purple: #bd1dcb;
}


.body {
    background-color: var(--grey);
}

a {
    color: inherit;
}

.bg_blue_dark {
    background-color: var(--blue-dark);
}

.border-dark {
    border: var(--blue-dark) 1px solid !important;
}

.text-black {
    color: var(--black)
}
.text-red {
    color: var(--red)
}
.text-black:hover {
    color: var(--black)
}
.text-green {
    color: var(--green);
}

/* BOX SHADOW */
.card_alternative, .notification, .card_list{
    box-shadow: 3px 3px 3px #23395833;
}

/* NAVBAR */
.navbar {
    border-bottom: var(--blue-dark) 2px solid;
    background-color: var(--white);
}
.active {
    border-bottom: var(--yellow) 2px solid;
}

/* FOOTER */
.footer-link {
    text-decoration: underline;
}
.footer-active {
    color: var(--yellow) !important;
}

/* CONTENU SOUS LA NAVBAR */
.volet_gauche {
    border-right: var(--blue-dark) 2px solid;
}
.volet_droit {
    border-left: var(--blue-dark) 2px solid;
}

/* SCROLLBAR */
* {
   scrollbar-width: thin;
   scrollbar-color: var(--yellow) var(--white);
}
.scrollbar_bg_transp::-webkit-scrollbar{
    background-color: transparent !important;
}
.yellow-scrollbar::-webkit-scrollbar, /* scrollbar classique */
#element_volet_central::-webkit-scrollbar, /* scrollbar pour le volet central */
.select2-results__options::-webkit-scrollbar, /* scrollbar pour les options du select2 */
.select2-selection--multiple::-webkit-scrollbar, /* scrollbar pour les options sélectionnées du select2 */
.bg_white
{
    background-color: var(--white);
}
.yellow-scrollbar::-webkit-scrollbar-thumb, /* scrollbar classique */
#element_volet_central::-webkit-scrollbar-thumb, /* scrollbar pour le volet central */
.select2-results__options::-webkit-scrollbar-thumb, /* scrollbar pour les options du select2 */
.select2-selection--multiple::-webkit-scrollbar-thumb /* scrollbar pour les options sélectionnées du select2 */
{
    background: var(--yellow);
}

/* BUTTONS */
/* couleur des polices des buttons */
.btn, .btn_rond, .small_btn_rond, .btn_blue:hover, .btn_blue_outline:hover {
    color: var(--white);
}
.btn_red:hover, .btn_yellow:hover {
    color: var(--black);
}
.btn_yellow:hover{
    background-color: #f7c745;
}
/* les couleurs de fond des différntes buttons */
.btn_blue {
    background-color: var(--blue-dark);
    border: 2px solid var(--blue-dark) !important;
}
.btn_blue:hover {
    background-color: var(--blue-dark-hover);
}
.btn_yellow {
    background-color: var(--yellow);
}

.btn_red, .btn_red_disp {
    background-color: var(--red);
}
.btn_red_disp{
    border: 2px solid var(--red) !important;
}
.btn_red_disp:hover {
    background-color: var(--red-dark);
    border: 2px solid var(--red-dark) !important;
}
.btn-logo:hover > i > svg > path {
    fill: white;
}
/* bouton sans fond mais avec une bordure */
.btn_blue_outline {
    background-color: transparent;
    border: var(--blue-dark) 2px solid;
    color: var(--blue-dark);
    transition: background-color 0.5s ease;
}

.btn_blue_outline:hover {
    background-color: var(--blue-dark);
}
.btn_blue_outline_active {
    border: var(--yellow) 2px solid;
    color: var(--yellow);
}

.btn_red_outline {
    background-color: transparent;
    color: var(--blue-dark);
    border: 2px solid;
}
.btn_red_outline:hover {
    background-color: var(--red);
}


.blinking_alert {
    animation: blinking 1s ease infinite ;
}

@keyframes blinking {
    0% {
        border-color: var(--white);
    }
    50% {
        border-color: var(--red);
    }
    100% {
        border-color: var(--white);
    }

}

.alert_animation path{
    animation: svg-blinking 1s ease infinite;
}

@keyframes svg-blinking {
    0% {
        color: var(--black);
    }
    50% {
        color: var(--red);
    }
    100% {
        color: var(--black);
    }
}

/* FORMULAIRE */
.field-form {
    border: 0;
    border-bottom: darkgrey 1px solid !important;
}

select:invalid {
    color: gray;
}
option{
    color: black;
}
option[value=""] {
    color: gray;
}

/* BARRE DE RECHERCHE */
.searchbar,
.searchbar_list,
.searchbar_tray {
    border-bottom: var(--blue-dark) 2px solid;
    background-color: transparent;
}

/* INPUT TYPE NUMBER */
input[type="number"], .card-border-blue {
    border: var(--blue-dark) 1px solid;
}

/* SELECTEUR */
/* barre de recherche */
input[id="searchbar"],
input[id="searchbar_list"],
input[id="searchbar_tray"],
input[id="recherche_alternative"],
input[id=searchbar_pdf], 
input[type="date"] {
    border-bottom: var(--blue-dark) 1px solid !important;
}
/* select classique */
select {
    border: var(--blue-dark) 1px solid !important;
}
/* select2 : select à choix multiple */
.select2-container--default .select2-selection--multiple {
    background-color: transparent !important;
    border-bottom: var(--blue-dark) 1px solid !important;
}
/* quand l'option est sélectionnée */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--grey) !important;
}
/* croix rouge pour supprimée une option */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: red !important;
}
/* hover des options */
.select2-results__option--highlighted, .select2-results__option:hover, option:checked, .option:hover {
    background-color: var(--blue-light2) !important;
    color: black !important;
}

li[aria-selected="true"]{
    background-color: var(--grey) !important;
}

/* SWITCH */
.switch input + span {
    background: var(--white);
    border: var(--blue-dark) 2px solid;
}
.disabled-switch,
.disabled_btn_change{
    pointer-events: none;
}
.disabled_btn_change{
    background-color: var(--grey) !important;
}
.disabled-switch input + span {
    background: var(--grey);
    border: var(--blue-dark) 2px solid;
}
.switch input + span:before {
    background: var(--blue-dark);
}
.switch input:checked + span:before {
    background: var(--white);
}
.switch input:checked + span {
    background: var(--blue-dark);
}

/* IMAGES */
.image_preview {
    border: var(--blue-dark) 1px solid;
}

/* CARD LIST */
.card_list{
    background-color: var(--white);
    transition: background-color 0.5s ease;
}
.card_list:hover {
    background-color: var(--blue-light);
}

.border-right-white {
    border-right: var(--white) 1px solid !important;
}

.border_blue {
     border: var(--blue-dark) 1px solid;
}
.bg_blue_light{
    background-color : var(--blue-light)
}
/* LIEN JAUNE */
.lien, .text-orange {
    color: var(--yellow);
}
.lien:hover{
    color: var(--yellow);
}
.lien-blue {
    color: var(--blue-dark)
}
/* ALTERNATIVE */
.card_alternative:hover{
    background-color: var(--blue-light);
}

/* NOTIFICATION */
.reussi {
    border: 2px solid var(--green);
}
.echec {
    border: 2px solid var(--red);
}
.notification {
    background-color: var(--white);
}

.border-bottom-only {
    border-bottom: solid 1px black;
}

.a_btn{
    color: var(--blue-dark);
}

.historique:hover > .a_btn{
    color: white;
}

.label-plateau{
    color: grey;
}


/* PROFIL */
.clean_a, .clean_a:hover {
    text-decoration: none;
    color: var(--black);
}
.clean_a_red, .clean_a_red:hover {
    text-decoration: none;
    color: var(--red);
}


.line_separator{
    border-bottom: solid 1px var(--blue-dark);
    padding-bottom: 10px;
}
.bcgnd_hover_selection, .bcgnd_hover_selection:hover{
    background-color: var(--blue);
}

.normal_italic{
    font-style: italic;
    font-weight: normal;
}
.italic{
    font-style: italic;
}
.basic_underline{
    text-decoration: underline;
}

.partie_blanche{
    background: white;
    border-left: solid 2px var(--blue-dark);
}

.table tbody tr.highlight td {
  background-color: #ddd;
}

.disabled-link {
    color: darkgray;
}

.back-grey{
    background-color: #e6e6e6;
}

#pagination {
    background-color: var(--white);
}

.error_message{
    color : var(--red)
}
.drag_component :active{
    cursor:move
}

.light_blue_bgd{
    background-color: var(--blue-light2)
}

.darker_label{
    color: var(--black);
    opacity: 1 !important;
    transform: scale(1) translateY(-1.5rem) translateX(-0.7rem) !important
}

.cta {
    animation: cta 1.5s ease infinite;
}

@keyframes cta {
    0% {
        color: var(--black);
    }
    50% {
        color: var(--yellow);
    }
    100% {
        color: var(--black);
    }
}

.blinking_cta {
    animation: blinking-cta 1.5s ease infinite ;
}

@keyframes blinking-cta {
    0% {
        border-color: var(--yellow);
    }
    50% {
        border-color: var(--blue-dark);
    }
    100% {
        border-color: var(--yellow);
    }

}

.validated_sub svg path {
    fill: var(--green)    ;
}

#log_table li:nth-child(even),
#bundle_list_container li:nth-child(even),
#note_archive_table li:nth-child(even){
    background-color: var(--grey-light);
}
#log_table li:nth-child(odd),
#bundle_list_container li:nth-child(odd),
#note_archive_table li:nth-child(odd){
    background-color: var(--green-light);
}

#note_archive_table li:hover{
    background-color: var(--yellow-light);
}


.positive {
    color: var(--green-green );
}

.negative{
    color: var(--red);
}

.stock{
    color: var(--blue);        
}

.réparation{
    color: var(--yellow-dark);    
}
.inventaire{
    color: var(--purple);
}
.bg_yellow_light{
    background-color: var(--yellow-light);
}
.cross-btn{
    color:#000
}
.yellow_btn{
    background-color: var(--yellow);
    color: var(--black);
    border: 2px solid var(--yellow) !important
}
.yellow_btn:hover{
    background-color: var(--yellow-light);
}
.dropdown_opts:hover{
    font-weight: bold;
}
.stock_less {
    border: none;
}
.stock_red,
.stock_orange,
.stock_green{
    border: 3px solid var(--red);
    border-radius: 10px;
    padding: 3% 10%;
}
.stock_orange{
    border: 3px dashed var(--orange);
}
.stock_green{
    border: 3px solid var(--green-green);
}
.select_mimic li:hover {
    background-color: var(--blue-dark);
}
#choix_list,
#choix_tray{
    background-color: var(--grey-light);
}
.bundle_li_infos:hover{
    background-color:rgba(0, 0, 0, 0.041);
}
.menu_opts:hover{
    background-color: var(--blue-dark);
}

.enbabled_btn_charts{
    color: #FFD666 !important;
    border: 2px solid #FFD666 ;
    cursor: pointer !important;
}
.disabled_btn_charts{
    color: #FFC52726 !important;
    border: 2px solid #FFC52726;
    cursor: default !important;
}
.dummy_btn_charts{
    color: #dcdcdc !important;
    border: 2px solid #dcdcdc ;
    cursor: pointer !important;
}
.home_back_btn{
    border: var(--yellow) 2px solid !important;
    color: var(--black);
    background-color: var(--white);
}
.gray_img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
#choix_pagination{
    background-color: var(--white);
}

.dropdown-content {
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content div:hover {background-color: var(--green);}

.comments_list:hover{
    background-color: var(--grey);
}
.quantity_ul{
    border-radius: 10px;
    border:1px solid var(--blue-dark) ;
}
.qtt_li:nth-child(even){
    background-color: var(--grey-light)
}
.qtt_li:nth-child(odd){
    background-color: var(--green-light)
}
.number_selector{
    background-color: var(--blue-light);
}
.number_selector:hover{
    background-color: var(--blue-low-opacity);
}
.location_container{
    border: solid 2px var(--blue-dark);
}
.svg-inline--fa{
    color: var(--blue-dark)
}
.opacity-25{
    color: var(--black)
}
.btn_icon:hover{
    background-color: var(--blue-dark);
    transition: 0.75s ease background-color;
}
.stock_advice{
    background-color: var(--white);
    color: var(--black);
}
.stock_advice_black{
    background-color: var(--black-light);
    color: var(--white);
}
.helper_container{
    background-image: radial-gradient(circle, #7ab4a5, #7fc0c1, #8fcbdb, #a8d4f0, #c7dcff);
    box-shadow: 0px 0px 7px 0px rgba(33,142,153,0.73);
    transition: background-image 0.5s ease;
    -webkit-transition: background-image 0.5s ease;
}
.helper_container svg circle{
    fill: white;
}
.helper_container svg path{
    stroke: white;
}
.helper_container:hover {
    background-image: radial-gradient(circle, #78afa0, #7dbfc0, #8bc5d4, #a5d1ec, #c2d6f8);
}
.btn_change_up:hover,
.btn_change_down:hover{
    background-color: var(--blue-dark);
}
.number-input div:before,
.number-input div:after {
      background-color: #212121;
}
.number-input div {
  border: 1px solid var(--green);
}
.switch_on,
.switch_off{
    background-color: var(--yellow);
    pointer-events: none;
    border: solid 1px var(--yellow) !important;
    transition: background-color ease 0.5s;
    color: var(--white);
}
.switch_off{
    background-color: var(--grey);
    pointer-events: all;
    color: var(--black);
}
.switch_off:hover{
    background-color: var(--yellow-light);
}
#input_date_end:focus,
#input_date_start:focus{
    outline: 1px solid var(--green);
}