/*STYLE en SURCHARGE de BOOTSTRAP*/

                    /*******      IMPORTANT   1   **************/
/* NOTE :  SI LE STYLE N'EST PAS PRIS EN COMPTE ===>>>>   FAIRE/ VIDER LE CACHE DU NAVIGATEUR


                =========>>>>>>>>>>>    CTR + SHIFT + R

*/



    /*$grid-breakpoints: (*/
    /*  xs: 0,*/
    /*  sm: 480px,*/
    /*  md: 768px,*/
    /*  lg: 1024px*/
    /*);*/

    /*$container-max-widths: (*/
    /*  sm: 420px,*/
    /*  md: 720px,*/
    /*  lg: 960px*/
    /*);*/

    /*p{*/
    /*    color: red !important;*/
    /*    border: 1px solid green !important;*/
    /*}*/

                          /*******      IMPORTANT   2   **************/

/*    m - for classes that set margin*/
/*    p - for classes that set padding*/

/******    0 - for classes that eliminate the margin or padding by setting it to 0*/
/*>>>   POUR Beaucoup de propriété : le 0 c'est pour SUPPRIMER  ****/

/*1 - (by default) for classes that set the margin or padding to $spacer * .25*/
/*2 - (by default) for classes that set the margin or padding to $spacer * .5*/
/*3 - (by default) for classes that set the margin or padding to $spacer*/
/*4 - (by default) for classes that set the margin or padding to $spacer * 1.5*/
/*5 - (by default) for classes that set the margin or padding to $spacer * 3*/
/*auto - for classes that set the margin to auto*/


    /*********      POUR DEBUG = SANS IMAGE  BACKGROUND*/
.text-light{
    /*color: #0e0e0e !important;*/
}




/* TODO : Faut revoir l'IMAGE car elle grossi et rapetisse selon ce qu'il y a dans la page !!*/
/*A mon avis l'image faut pas la mettre dans le BODY pour faire ce qu'on veut !!*/
body{
    /*background-image:url(../img/common/Food_HD_7.jpg);*/
    background-image:url(../img/common/Food_HD_9.jpg);
    /*width: 100%;*/
    /*height: 100%;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /*overflow: hidden;*/
    /*position: relative;*/
}

    /*
NOTE :  FAUT VRAIMENYT PENSER à :
          #### SI LE STYLE N'EST PAS PRIS EN COMPTE ===>>>>
            VIDER LE CACHE DU NAVIGATEUR CTRL + SHIFT + R !!!  ######
         */

.jumbotron{
    border-radius: 4px;
}

.sidenav{
    border-radius: 4px;
}

.opac-80{
    opacity: 0.80 !important;
}

.opac-90{
    opacity: 0.90 !important;
}

hr{
    border: #b3b3b3 1px solid;
}

/*temporaire*/
td{
    color: #b3b3b3;
}

label{
    color: #17a2b8;
}

.decal{
    height: 82px;
}

.in-2{
    height: 25px;
    width: 140px !important;
}

.in-search{
    height: 30px;
    width: 160px !important;
}

.bt-2{
    height: 25px;
    line-height: 0;
}

.bt-supp{
    max-width: 40px;
    /*height: 30px;*/
}

.zoneCibleShadow {
    /*width:224px;*/
    /*height:40px;*/
    border: 2px solid green;
    /*margin: 2px 0 2px*/
    /*z-index: -1;*/
}

.navbar{
    /*background-color: #f1f1f1 !important;*/
    background-color: #b3b3b3 !important; /*rgba(32,35,64, 0.6)*/
}

.last{
    text-align: center;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    min-height: 60px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);}

.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    /*height: 100%;*/
}

footer {
    background-color: #b3b3b3 !important;
    color: #17a2b8;
    padding: 15px;
}

.main{
    min-height: 768px;
}

.card-me-1{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-top:2px solid #17a2b8 !important;
    border-radius: 20px !important;
    box-shadow: 6px 6px 10px #202340 !important;
}

.myRecette{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    /*border-top:2px solid #17a2b8 !important;*/
    /*border-radius: 20px !important;*/
    box-shadow: 3px 3px 10px #202340 !important;
}

/*les textes de label bootstrap pour File depassent...
    On peut tronquer mais bon de toute façon c'est moche
*/
.label-file {
   cursor: pointer;
   color: #17a2b8;
   font-weight: bold;
}
.label-file:hover {
    color: #8479c4;
}
/* et on masque le input*/
.input-file {
   display: none;
}

                 /*Rating Input ACTIVE*/
.rating {
    overflow: hidden;
    vertical-align: bottom;
    display: inline-block;
    width: auto;
    height: 25px;
}
.rating > input {
    position: absolute;
    opacity: 0;
}
.rating > label { /* TOUTES les balises LABEL rencontrées */
    /*position: relative;*/
    display: block;
    float: right;
    background: url('../img/common/star-off-big.png');
    background-size: 25px 25px;
}
.rating > label:before { /* Insere un contenu 'vide' avant les balises LABEL */
    display: block;
    opacity: 0;
    content: '';
    width: 25px;
    height: 25px;
    background: url('../img/common/star-on-big.png');
    background-size: 25px 25px;
    transition: opacity 0.2s linear;
}
.ratingActive > label:hover:before,  /*For rating whith input Enabled*/
.ratingActive > label:hover ~ label:before,
.ratingActive:not(:hover) > .inputChecked ~ label:before {/*on cible DANS ratingEnabled (quand pas HOVER) TOUS les label:Before après la class trouvé : 'inputChecked'*/
    opacity: 1;
    cursor: pointer
}
                 /*Rating Input INACTIVE*/
.ratingInactive .che:before {/*For rating whith input Disabled*/
    opacity: 1;
}

.infoMessOk {
    border-left: 6px solid #4cae4c!important;
}
.infoMessNok{
    border-left: 4px solid red !important;
}

.active_arrow_up, .active_delete_cross, .active_arrow_down{
    display: block; /*ça met les element en dessous les autres*/
    width:25px;
    opacity: 40%;
    top: 50px;
}

.hidden_mini_button{
    display: block; /*ça met les element en dessous les autres*/
    width:25px;
    opacity: 0%;
    top: 50px;
}

.active_arrow_up:hover, .active_delete_cross:hover, .active_arrow_down:hover{
    display: block; /*ça met les element en dessous les autres*/
    width:28px;
    opacity: 100%;
    cursor: pointer;
}

.hr_cible_Shadow {
    opacity: 0;    /* Je prefere car on garde l'épaisseur.. */
    /*opacity: 100%;*/
    /*border-width: 0 0 0 0;*/
    margin: 0 50px 0 50px;
}

.hr_cible_Active {
    border-color: blueviolet;
    border-style: dashed;
    border-width: 2px;
    margin: -10px 2px 5px 2px;
    height: 4px;
}

.border_Shadow {
    border: 2px solid #e9ecef;
    /*margin: 0 2px 2px 2px;*/
}

.border_Active {
    border: 2px dashed blueviolet !important;
    /*margin: 0 2px 2px 2px;*/
}

.border_Active_Delete {
    border: 2px dashed red !important;
    /*margin: 0 2px 2px 2px;*/
}

textarea{
    resize: none;
}

.recipeImgLoad:hover {
    cursor: pointer
}

.crosscloseimg {
    height: 20px;
    width: 20px;
    right: -15px;
    top: -10px;
    opacity: 50%;
    cursor: zoom-in	;
    position: absolute;
}
.crosscloseimg:hover {
    /*cursor: pointer;*/
    /* à priori je peux utiliser*/
    cursor: url('../img/common/cursor_trash.cur'), auto;
    /*cursor: url('F:\##_TRAVAIL_WEB_www\CuisineZZen_MVC\web\view\img\common\corbeille-fleche.png'), auto;*/
}


.crosscloseimg1 { /* Image seule faut décaler différemment à droite !! */
    right: 0;
}

.noCross {
    display: none;
}

.imgZoom:hover {
    cursor: zoom-in;
}

/* TODO Modifier couleur sur  le HOVER dans les MENU
    car c'est GRIS CLAIR D'ORIGINE et ça ne se voit pas bien*/

.suggestionlist {
    border: 1px solid #ccc;
    margin-top: 5px;
    padding: 0;
    list-style-type: none;
    position: absolute;
    background-color: white;
    width: 250px; /* Ajuste la largeur selon tes besoins */
    z-index: 10;
    /*display: none; !* à priori ne sert pas *!*/
    max-height: 350px; /* Hauteur pour afficher environ 10 éléments (ajuste selon la hauteur de tes li) */
    overflow-y:auto; /* Ajouter une barre de défilement verticale si nécessaire */
}
.suggestionlist li {
    padding: 8px 10px;
    cursor: pointer;
}
.suggestionlist li:hover {
    background-color: #17a2b8;
}

/* Element (LI) Actif ou Surligné dans liste déroulate d'Ingrédient !*/
.suggestion-active {
    background-color: #17a2b8; /* Couleur de surbrillance */
    cursor: pointer;
}

/*Gestion des SELECT par Gemini*/
select[data-default-text="Defaut_Select"] {
    font-style: italic;
    font-weight: lighter;
    color: #999;
}
select:not([data-default-text]) {
    font-style: normal;
    font-weight: normal;
    color: #000; /* Ou votre couleur de texte par défaut */
}
.default-option-list {      /*ITALIC & Grisé un peu*/
    font-style: italic;
    font-weight: lighter;
    color: #999;
}
.other-option-list {    /* NORMAL */
    font-style: normal;
    font-weight: normal;
    color: #000;
}

/* Gestion pour griser les "placeholder" des INPUT
      CE SONT "TOUS" les "PLACE-HOLDER" ==> Si on veut cibler certain : on peut !!! voir GEMINI*/
input::placeholder { /* Standard */
    font-style: italic;
    font-weight: lighter;
    color: #999;
}
input::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    font-style: italic;
    font-weight: lighter;
    color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
    font-style: italic;
    font-weight: lighter;
    color: #999;
}
input:-ms-input-placeholder { /* IE 10+ */
    font-style: italic;
    font-weight: lighter;
    color: #999;
}
input:-moz-placeholder { /* Firefox 4 to 18 */
    font-style: italic;
    font-weight: lighter;
    color: #999;
}

.ingredient-input-bold {
    font-weight: bold;
}

/* Styles pour la mise en évidence du select de catégorie lors de l'auto-complétion */
.category-highlight-active {
    border: 2px solid greenyellow !important; /* Bordure vert/jaune */
    /*border-color: #28a745 !important;*/
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.7) !important; /* Ombre rouge autour */
    /*transition: box-shadow 1s ease-out, border-color 1s ease-out !important; !* Transition douce pour l'effet de fondu *!*/
}

/* Cette classe est ajoutée après un court délai pour déclencher l'effet de fondu */
.category-highlight-fade-out {
    box-shadow: 0 0 0 rgba(255, 0, 0, 0) !important; /* L'ombre disparaît */
    border-color: transparent !important; /* La bordure disparaît */
}