/* /////// */

.plusgros    {
    font-size: 1.0rem !important;
}

/* Styles pour le bloc à afficher avant tous les éléments */
#blocreglementnok {
    position: relative;
    z-index: 9999; /* Valeur à ajuster selon les besoins, assure-toi qu'elle est plus élevée que celle du off-canvas */
}




/* /////// */

:root   {
    --offcanvas-width: 320px;
    --topNavbarHeight: 0px;
}
.offcanvas  {
        width: 320px;
        top: var(--topNavbarHeight);
       height: calc(100% - var(--topNavbarHeight));
    }


@media (min-width: 992px) {
   
    main, #yo_container {
        margin-left: var(--offcanvas-width);
        /* background-color: #91ff00; */
    }

    .offcanvas  {
        visibility: visible !important;
        -webkit-transform: none;
                transform: none;
        top: var(--topNavbarHeight);
       height: calc(100% - var(--topNavbarHeight));
        border: none;
        width: 320px;
        
    }

    .offcanvas-backdrop::before{
        display: none;
    }
    .offcanvas-header  .btn-close {
        visibility: hidden;
    }
    #topNavbar  {
        visibility: hidden;
    }
    
}



/* /////// */



main, header, footer    {
    margin-top: 0px;
    /*margin-left: 200px;*/
}






.borduredz    {
    border: #dcdcdc solid;
}


.bordureprimary2px    {
    border: #198754 solid 2px;
}



.borduredanger2px    {
    border: #dc3545 solid 2px;
}






.rowclsequencefalse    {
    border: #eeeeee solid;
    color: #868e96;
    font-style: italic;
    font-size: smaller;
}





/* ///////////// */


.h3boldsmall    {
    font-size: 18px;
    font-weight: bold;
}

.filltreactif    {
    font-weight: bold;
    border-color: #ffae00;
    background-color: #ffae0018;
    border-width: 1px;
    -webkit-box-shadow: 3px 2px 2px rgb(209, 209, 209);
            box-shadow: 3px 2px 2px rgb(209, 209, 209);
}


/* TEST STICKY HEADER TABLE */
table {
    border-collapse: separate;
    border-spacing: 0;
}

.sticky_th {
    background-color: #9b9b9b;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
          box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}


.btnnav    {
    padding: 8px 0px 5px 0px !important;
    font-size: 0.9rem;
}

.btnselected    {
    background:  rgb(38, 89, 93) !important;
    color: #fff !important;
  
}

.btn-light:hover  {
    background:  rgb(238, 238, 238) !important;
}

.small  {
    font-size: small;
}

.etape   {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #f5f6f4;
    padding: 10px;
    color: #686868;
}

.etapeencours   {
    background-color: #26595d;
    font-weight: bold;
    color: #FFFFFF;
}

.client_bol  {
    background-color: #e5ebe0;
}

.bloctitre {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #f5f6f4;
    padding: 20px;
/*    -webkit-box-shadow: rgb(170 170 170 / 20%) 2px 2px 8px 0px;
              box-shadow: rgb(170 170 170 / 20%) 2px 2px 8px 0px; */
}

.bloctitretutos {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #f5f6f4;
    padding: 5px 20px 5px 20px;
/*    -webkit-box-shadow: rgb(170 170 170 / 20%) 2px 2px 8px 0px;
              box-shadow: rgb(170 170 170 / 20%) 2px 2px 8px 0px; */
}

.bloccreate {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #f5f6f4;
    padding: 40px 
}

.blocupdate {
    background-color: #fdfdfd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 40px;
    -webkit-box-shadow: rgb(170 170 170 / 30%) 2px 2px 8px 0px;
            box-shadow: rgb(170 170 170 / 30%) 2px 2px 8px 0px;
}

.blocpremierpas {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 100px;
    -webkit-box-shadow: rgb(170 170 170 / 20%) 2px 2px 8px 0px;
            box-shadow: rgb(170 170 170 / 20%) 2px 2px 8px 0px;
    background: radial-gradient(at 10% 10%, rgb(38, 89, 93) 0%, rgb(43, 47, 35) 100%);
    color: #fff;
    margin-bottom: 240px;
}

.blocfiltres {
    margin-bottom: 30px;
    /* border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;    
    background-color: rgba(0, 0, 0, 0.01);
    border: dotted rgba(0, 0, 0, 0.05);*/ 
}

#nomCamp    {
    color: #9b9b9b !important;
    font-size: 12px;
    margin-top: 0px;
}

.avatar {
  vertical-align: middle;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.5);
}

.decaleIconeNav    {
    margin-right: 10px;
}

.decaleIconeBouton    {
    margin-left: 6px;
}

.iconeNav  {
    color:  rgb(0, 0, 0) !important;
}

.iconeNav:hover, .iconeSuppr:hover  {
    color:  rgba(0, 0, 0, 0.5) !important;
}

.avatarGrand {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.7);
}

.bloclistelight {
    background: #FEFFFE;
    /*-webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.03);
            box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.03);*/
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(214, 214, 214);
    margin: 5px 0px 10px 0px;
    padding: 10px;
}

.bloclistelocation {
    background: #FEFFFE;
    -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.03);
            box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(214, 214, 214);
    margin: 5px 0px 10px 0px;
    padding: 0px;
}



.toplocation    {
    background: #FEFFFE;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-bottom: none;
    border-color: rgb(214, 214, 214);
    margin: 0px 0px 0px 0px;
    padding: 10px;
}

.middlelocation    {
    background: #FEFFFE;
    border-style: solid;
    border-width: 1px;
    border-top: 1px dashed;
    border-top: none;
    border-bottom: none;
    border-color: rgb(214, 214, 214);
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
}

.middlelocationtraiter    {
    background: #FEFFFE;
    border-style: solid;
    border-width: 1px;
    border-top: none;
    border-bottom: none;
    border-color: rgb(214, 214, 214);
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
}

.top-success    {
    border-top-color: #198754;
}
.top-danger    {
    border-top-color: #dc3545;
}
.top-warning    {
    border-top-color: #ffc107;
}
.top-secondary    {
    border-top-color: #868e96;
}

.todo  {
    background-color: #ffffff;
    border-radius: 3px;
    border-color: rgb(173, 173, 173);
    border: 1px dashed;
    height: 60px;
}
.done   {
    background-color: #f3f3f3;
    border-radius: 3px;
    font-style: italic;
    color: #9b9b9b;
    height: 60px;
}

.bottomlocation    {
    background: #FEFFFE;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-top: none;
    border-color: rgb(214, 214, 214);
    margin: 0px 0px 0px 0px;
    /* haut | droit | bas | gauche */
    padding: 5px 10px 0px 10px;
}

.grey   {
    color: grey;
}

.vertfonce, .iconetitre   {
/*    color: #686868;*/
    color:  rgb(38, 89, 93);
}

.dmx-notify .dmx-icon {
    background: rgba(0, 0, 0, 0.3); /*Add whatever background color you like here*/
    padding: 8px 15px;
    margin-top: -0.5em;
    margin-left: -0.5em;
    border-bottom-left-radius: .25em;
    border-top-left-radius: .25em;
}

.dmx-notify {
    line-height: 80px;
    font-size: 16px;
}

.btnIcone    {
    margin: 0px 0px 5px 0px;
    padding: 3px 3px 3px 3px;
}

.btnIcone:hover    {
    /*border-style: solid;
    border-width: 1px;
    border-color: rgb(218, 218, 218);*/
    background-color: rgb(245, 245, 245);
}

.cerclecouleur {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.096);
    float:left;
    margin-right: 5px;
}


.cerclecouleur2 {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.096);
    float:inline-start;
    margin-right: 5px;
}





/* commentaire */


.avatarsupermini {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.5);
}

.avatarmini {
  vertical-align: middle;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.5);
}

.avatarpetit {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.5);
}

.avatargrand {
  vertical-align: middle;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.5);
}