/* ----------------------------- */
 /* == soft reset KNACSS          */
 /* ----------------------------- */
 /* switching box model for all elements */
 /* soft reset */
 
 html,
 body {
     padding: 0;
     height: 100%;
     margin: 0 auto;
 }
 
 ul,
 ol {
     padding-left: 2em;
 }
 
 ul.unstyled {
     list-style: none;
 }
 
 img {
     height: auto;
     vertical-align: middle;
     border: 0;
 }
 
 blockquote,
 figure {
     margin-left: 0;
     margin-right: 0;
 }
 
 audio,
 canvas,
 video {
     display: inline-block;
 }
 
 svg:not(:root) {
     overflow: hidden;
 }
 /* font-sizing for content */
 
 p,
 .p-like,
 ul,
 ol,
 dl,
 blockquote,
 pre,
 td,
 th,
 label,
 textarea,
 caption,
 details,
 figure {
     margin-top: 0.75em;
     line-height: 1.5;
 }
 
 ul,
 ol {
     padding-left: 2em;
 }
 
 ul.unstyled {
     list-style: none;
 }
 
 em,
 .italic,
 address,
 cite,
 dfn,
 i,
 var {
     font-style: italic;
 }
 
 strong,
 .bold {
     font-weight: bold;
 }
 /* avoid top margins on first content element */
 
 p:first-child,
 .p-like:first-child,
 ul:first-child,
 ol:first-child,
 dl:first-child,
 blockquote:first-child,
 pre:first-child,
 h2:first-child,
 h3:first-child,
 h4:first-child,
 h5:first-child,
 h6:first-child {
     margin-top: 0;
     margin-bottom: 0;
 }
 /* avoid margins on nested elements */
 
 li p,
 li .p-like,
 li ul,
 li ol {
     margin-top: 0;
     margin-bottom: 0;
 }
 /* max values */
 
 img,
 table,
 td,
 blockquote,
 code,
 pre,
 textarea,
 input,
 video {
     max-width: 100%;
 }
 
 a img {
     border: none;
 }
 
 .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
 
 .clearfix {
     display: inline-block;
 }
 
 * html .clearfix {
     height: 1%
 }
 
 .clearfix {
     display: block;
 }
 /* ----------------------------- */
 /* == GLOBAL CSS                 */
 /* ----------------------------- */
 
 .right {
     float: right;
 }
 
 .left {
     float: left;
 }
 
 .grid {
     max-width: 1920px;
 }
 
 .row,
 .col {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 .row,
 .col {
     overflow: hidden;
 }
 
 @media all and (min-width: 50em) {
     .col {
         float: left;
     }
     .col-1 {
         width: 8.33333333%;
     }
     .col-2 {
         width: 16.6666667%;
     }
     .col-3 {
         width: 25%;
     }
     .col-4 {
         width: 33.3333333%;
     }
     .col-5 {
         width: 41.6666666%;
     }
     .col-6 {
         width: 50%;
     }
     .col-7 {
         width: 58.3333333%;
     }
     .col-8 {
         width: 66.6666666%;
     }
     .col-9 {
         width: 75%;
     }
     .col-10 {
         width: 83.3333333%;
     }
     .col-11 {
         width: 91.6666666%;
     }
     .col-12 {
         width: 100%;
     }
 }

body {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

@media all and (max-width: 50em) {
   body {
    font-size: 16px;
} 
}

 /* ----------------------- */
 /* == HEADER              */
 /* --------------------- */

header {
    min-height: 50px;
    width: 100%;
}

header h1 {
    color: rgb(78,117,133);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 26px;
    margin: 50px 100px 40px 0;
    text-align: right;
    text-transform: uppercase;
}

.bandeau-titre {
     border: 2px solid rgb(55, 59, 63);
}
 
 .bandeau-titre h1 {
     color: rgb(78,117,133);
     font-family: 'Montserrat', sans-serif;
     font-size: 24px;
     font-weight: 400;
     padding: 10px 0 14px;
     text-align: center;
     margin: 0;
 }

.bandeau-titre a {
    color: rgb(0,0,0);
    float: right;
    margin-top: -38px;
    margin-right: 100px;
    text-decoration: none;
}

.bandeau-titre i {
    padding-left: 10px;
}

.bandeau-titre a:hover {
    text-decoration: underline;
}

@media all and (max-width: 50em) {
    header h1  {
        font-size: 22px;
        margin: 30px 30px;
    }
    .bandeau-titre h1 {
        font-size: 18px;
        margin-left: 20px;
        text-align: inherit;
    }
    .bandeau-titre a {
    margin-right: 20px;
    margin-top: -33px;
    }
}
/* -------------------------------------- */
 /* == PAGE CONNEXION            */
 /* ------------------------------------ */

.ligne-blocs-connexion {
    margin: 0 auto;
    width: 85%;
}

.bloc-client {
    border: 1px solid rgb(43, 43, 43);
    border-top: none;
    border-bottom: none;
    height: 530px;
    padding-top: 40px;
}

.bloc-client-container {
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
    width: 80%;
}

.bloc-client h2, .bloc-nouveau-client h2 {
    color: rgb(177, 148, 119);
     font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.btn-connexion{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgb(78, 117, 133);
    border-radius: 2px;
    color: rgb(78, 117, 133);
    cursor: pointer;
    font-family: "Lato",sans-serif;
    font-size: 18px;
    margin-top: 20px;
    padding: 10px 0;
    width: 50%;
}

.btn-connexion:hover {
   background: rgba(78, 117, 133,0.1); 
}

.client-form {
    margin: 0;
    padding-bottom: 5px;
    padding-left: 20px;
    text-align: left;
    text-transform: uppercase;
}

.bloc-client h3, .bloc-nouveau-client h3 {
    font-weight: 400;
}

#oublie-mot-passe {
    margin: 20px 0 43px;
    text-align: center;
}

#oublie-mot-passe a {
    color: rgb(78, 117, 133);
    text-decoration: underline;
    text-transform: none;
}

#btn-connexion-align {
    margin-top: 30px;
    text-align: center;
}

#page-connexion {
    margin-bottom: 80px;
}

#admin-identification-message {
    color: rgb(176,49,28);
    font-weight: 600;
    font-style: italic;
    text-align: center;
    margin: 20px 0 50px;
}

.h3-connexion {
     font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    margin: 10px 0 40px;
}

#page-connexion h2 {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 20px;
    margin: 50px 0 10px;
}

.bloc-connexion {
    background-color: rgb(255, 249, 242);
    border: 1px solid rgb(90, 90, 90);
    margin: 0 auto;
    width: 35%;
}

.bloc-connexion-container {
    margin: 0 auto;
    padding: 40px 0 10px;
    width: 78%;
}


.oublie-mot-passe {
    margin-top: 10px;
    text-align: center;
}

.btn-connexion-align {
    text-align: center;
}

.btn-connexion-align {
    margin: 30px 0;
}


.input-connexion {
    border: 1px solid rgb(55, 59, 63);
    height: 35px;
    width: 100%;
}

.oublie-mot-passe a {
    color: rgb(69,201,255);
    font-weight: 400;
}

.connexion-asterix {
    font-size: 16px;
    margin-top: 30px;
}

@media all and (max-width: 40em) {
    #page-connexion h2 {
        font-size: 18px;
        margin: 20px auto;
        width: 90%;
    }
    .bloc-connexion {
        margin: auto;
        width: 60%;
    }
    .bloc-connexion-container {
        width: 85%;
    }
}

@media all and (max-width: 30em) {
    .bloc-connexion {
        width: 90%;
    }
}

@media all and (min-width: 40em) and (max-width: 60em) {
    .bloc-connexion {
        width: 50%;
    }
    .form-connexion h3,
    .btn-connexion,
    .oublie-mot-passe a{
        font-size: 16px;
    }
    #page-connexion h2 {
        font-size: 18px;
    }
}

 /* ----------------------------- */
 /* == MENU                      */
 /* --------------------------- */


.nav-bar-admin {
    background-color: rgb(202,213,218);
}

.client-bar {
     border: 1px solid rgb(55, 59, 63);
     min-height:100vh;
     width: 99%;
 }
 
 .client-user {
     background-color: rgb(78, 117, 133);
     border-bottom: 1px solid rgb(55, 59, 63);
     padding: 40px 0 40px 10px;
 }
 
 .client-user h3 {
     color: rgb(255,255,255);
 font-family: 'Montserrat', sans-serif;
     font-size: 24px;
     font-weight: 400;
     letter-spacing: -0.03em;
     margin: 0 0 10px;
 }
 
 .client-user a {
     color: rgb(255, 249, 242);
     font-size: 18px;
     text-decoration: underline;
 }

.lien-admin-awi {
    color: rgb(68,128,163);
    margin-top: 10px;
}

.lien-admin-accueil{
    color: rgb(55, 59, 63);  
}
 
 .client-btn {
     background: rgb(249, 249, 249);
     border: 1px solid rgb(55, 59, 63);
     border-radius: 2px;
     font-size: 16px;
     float: right;
     display: block;
     margin-top: 20px;
     margin-right: 20px;
 }
 
 .nav-client {
     padding: 0;
 }
 
 .nav-client li {
     border-bottom: 1px solid rgb(55, 59, 63);
     list-style: none;
     padding: 12px 0;
 }
 
 .nav-client li a {
     color: rgb(55, 59, 63);
     padding-left: 10px;
     text-decoration: none;
 }
 
.active-bar-client, #active-bar-client {
     background-color: rgb(255, 187, 69);
     border-left: 3px solid rgb(171, 141, 110);
 }

#active-bar-client-a {
    color: rgb(255,255,255);
}
 /* Règles Mobile*/
 
 @media all and (max-width: 50em) {
     body {
         font-size: 16px;
     }
     .client-bar {
         /* On oblige la navicon à se mettre à droite*/
         
         font-size: 20px;
         direction: rtl;
         background: none;
         min-height: inherit;
     }
     .client-bar * {
         direction: ltr;
         cursor: pointer;
     }
     .client-bar {
         /* taille maximum correspandante à la hauteur de la navicon*/
         
         max-height: 50px;
     }
     .client-bar {
         /* On cache le conetenu qui dépasse */
         
         margin-top: -52px;
         overflow: hidden;
         -webkit-transition: all 0.25s ease;
         -moz-transition: all 0.25s ease;
         transition: all 0.25s ease;
     }
     /* Grace au js, quand on a la classe .active on l'affiche */
     
     .client-bar.active {
         max-height: 5000px;
         width: 100%;
         z-index: 5000;
         margin-top: 0;
     }
     .client-user {
         padding: 10px 0 10px 10px;
     }
     .client-user h3 {
         font-size: 20px;
     }
     .nav-client li a,
     .client-user a {
         font-size: 16px;
     }
     .nav-client li {
         padding: 5px 0;
     }
 }
 /*Règles PC*/
 
 @media all and (min-width: 50em) {
     .client-btn {
         display: none;
     }
     .navigation-client {
         background: none;
         width: 100%;
         font-family: "Muli", sans-serif;
         height: auto;
         text-transform: inherit;
     }
 }

 @media all and (min-width: 40em) and (max-width: 70em) {
     .client-bar {
         width: 98%;
     }
     .client-user h3 {
         font-size: 24px;
     }
     .nav-client li {
         padding: 10px 0 10px 10px;
     }
     .nav-client li a {
         font-size: 16px;
         padding-left: 0;
     }
 }

@media all and (min-width: 50em) and (max-width: 60em) {
    .client-user h3 {
    font-size: 20px;
}
}


 /* ----------------------------- */
 /* == ACCUEIL                   */
 /* --------------------------- */

#page-infos {
    margin: 50px auto;
    width: 85%;
}

#page-accueil {
    margin: 40px auto;
}

.texte-accueil-intro,
.texte-plus-infos{
    margin: 20px auto;
    width: 85%;
}

.texte-accueil-intro a {
    color: rgb(78, 117, 133);
}

.texte-accueil-intro a:hover {
    color: rgba(78, 117, 133,0.7);
}

.acces-vers {
    background-color: rgb(78, 117, 133);
    margin-top: 20px;
    min-height: 100px;
    padding: 40px 0;
    margin-bottom: 40px;
}

#page-accueil h2{
    color: rgb(69,201,255);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 22px;
    margin-left: 7.5%;
    margin-top: 30px;
}

.acces-vers-container {
    margin: 0 auto;
    width: 86%;
}

.style-acces-rapide {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(55, 59, 63);
    cursor: pointer;
    font-family: "Lato",sans-serif;
    font-size: 20px;
    padding: 20px 0 20px 20px;
    text-align: left;
    width: 94%;
}

#acces-groupement-accueil {
    color: rgb(182, 155, 128);
    border: 1px solid rgb(182, 155, 128);
    margin: 0 auto;
        text-align: center;
    width: 30%;
}

#acces-groupement-accueil:hover {
    background-color: rgba(182, 155, 128,0.2);
}

#acces-groupement-accueil a  {
    color: rgb(182, 155, 128);
    text-decoration: none;
}

#first-acces {
    margin-right: auto;
}

.ligne-acces-vers {
    margin-bottom: 5px;
}

.acces-vers a {
    color: rgb(0, 0, 0);
    font-family: "Lato",sans-serif;
    font-size: 20px;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.acces-vers a:hover {

    text-decoration: underline;
}

.style-acces-rapide i {
    padding-right: 20px;
}

.accueil-blocs-container {
    margin: 0 auto;
    width: 87%;
}

.accueil-blocs {
    background-color: rgb(255, 249, 242);
  border: 1px solid rgb(223, 222, 220);
    margin: 20px auto;
    min-height: 340px;
    padding: 0 0 20px;
    width: 95%;  
}

.accueil-blocs h3 {
    border-bottom: 1px solid rgb(255, 187, 69);
    color: rgb(55, 59, 63);
    font-size: 22px;
    font-weight: 400;
    padding: 20px 30px 10px;
    width: 80%;
}

.admin-bloc-contenu {
    color: rgb(55, 59, 63);
    margin-left: auto;
    margin-right: 5px;
    padding-top: 20px;
    width: 93%;
}

.date-activites {
    color: rgb(78, 117, 133);
}

@media all and (max-width: 50em)  {
    #page-accueil h2 {
        font-size: 20px;
    }
    .ligne-acces-vers {
        margin: inherit;
    }
    .style-acces-rapide {
        font-size: 16px;
        margin: 3px auto;
        padding: 14px 0 14px 20px;
        width: 93%;
    }
    .acces-vers {
        padding: 20px 0;
    }
    .accueil-blocs {
        min-height: 300px;
        width: 99%;
    }
    .accueil-blocs h3 {
        font-size: 18px;
    }
}

@media all and (min-width: 50em) and (max-width: 70em) {
    .style-acces-rapide {
        font-size: 16px;
        padding-left: 10px;
    }
    .style-acces-rapide i {
        padding-right: 10px;
    }
}

@media all and (max-width: 40em) {
    .acces-vers a {
        font-size: 18px;
    }
}

@media all and (min-width: 50em) and (max-width: 60em) {
      .acces-vers a,
    .accueil-blocs h3{
        font-size: 16px;
    }
}

@media all and (min-width: 60em) and (max-width: 72em) {
      .acces-vers a,
    .accueil-blocs h3{
        font-size: 18px;
    }
}


 /* -------------------------------------- */
 /* == PAGE INFOS COORDONNEES             */
 /* ------------------------------------ */

.page-client {
    margin : 40px 0 50px;
    right: 0;
    width: 100%;
}

.page-client-container {
    margin: 0 auto;
    width: 85%;
}

.page-client h2,
.page-admin h2{
    color: rgb(69, 201, 255);
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    font-size: 22px;
}
 
 .phrase-info-client {
     font-size: 18px;
     letter-spacing: -0.02em;
     margin-top: 20px;
 }
 
 .menu-informations-client {
     border-bottom: 1px solid rgb(212, 218, 225);
     margin-top: 30px;
     padding-bottom: 15px;
     width: 100%;
 }
 
 .menu-informations-client > span {
     padding-right: 30px;
 }
 
 .menu-informations-client a {
     color: rgb(0, 0, 0);
     text-decoration: none;
 }
 
 .menu-informations-client a.active {
     border-bottom: 3px solid rgb(255, 187, 69);
     padding-bottom: 12px;
 }

 .titre-bloc-client {
     color: rgb(78, 117, 133);
     font-style: italic;
     font-weight: 400;
     font-size: 18px;
     margin: 20px 0 15px;
 }
 
 .bloc-form-client {
     background-color: rgb(255, 249, 242);
     border:1px solid rgb(223, 222, 220);
     color: rgb(55, 59, 63);
     padding: 30px 0 40px;
 }
 
 .bloc-form-client-container {
     margin: 0 auto;
     width: 90%;
 }
 
 .bloc-form-client-container h3{
     color: rgb(55, 59, 63);
     font-weight: 400;
     font-size: 18px;
     margin-bottom: 10px;
 }
 
 
 .valid-client,
.btn-other{
     text-align: center;
    min-height: 50px;
 }

.input-form{
 	border:1px solid rgb(223, 222, 220);
 	color: rgb(79, 67, 61);
 	font-size: 16px;
 	height: 35px;
 	width: 88%;
 }

#non-modifs {
    color: rgb(212, 212, 212);
}


#positionnement-form-right {
    margin-left: 5%;
}

#positionnement-form-right > .input-form {
    width: 92%;
}
 
.valid-client input,
.btn-other a,
.valid-client a {
     color: rgb(78, 117, 133);
     cursor: pointer;
     border: 1px solid rgb(78, 117, 133);
     border-radius: 2px;
     font-family: "Lato",sans-serif;
     font-size: 18px;
     margin-top: 20px;
     background: none;
     padding: 10px 0;
     width: 32%;
 }

.valid-client a,
.btn-other a{
    text-decoration: none;
    padding: 10px 50px;
}

.btn-other a{
    color: rgb(177, 148, 119);
     border: 1px solid rgb(177, 148, 119);
    text-decoration: none;
}

#input-password {
    width: 55%;
}

.phrase-info-mdp {
    margin-bottom: 20px;
}
 
 
 .valid-client input:hover {
     background-color: rgba(78, 117, 133,0.1)
 }

.btn-other input:hover {
    background-color: rgba(177, 148, 119,0.15)
}

.valid-client a:hover {
    background-color: rgba(78, 117, 133,0.1)
}

.btn-other a:hover {
    background-color: rgba(177, 148, 119,0.15)
}

.ligne-btn-cmd {
    margin: 10px 0 30px;
   text-align: center; 
}

.ligne-btn-cmd span {
    padding: 0 20px;
}

.ligne-btn-cmd .valid-client a {
    padding: 10px 70px;
}
 
#cmd-btn6 {
    margin: 25px 0 20px;
}

#cmd-btn6 a {
    padding: 10px 70px;
}
 
 
 @media all and (max-width: 50em) {
     .page-client {
         margin-top: 20px;
     }
     .menu-informations-client > span {
         padding-right: 10px;
     }
     .menu-informations-client a {
         line-height: 45px;
     }
     .menu-informations-client {
         padding-bottom: 8px;
     }
     .menu-informations-client {
         margin-top: 10px;
     }
     .phrase-info-client {
         display: none;
     }
     .bloc-form-client-container h3 {
         font-size: 16px;
     }
     .valid-client input{
         font-size: 16px;
         width: 45%;
     }
     .valid-client a,
     .btn-other a{
         font-size: 16px;
     }
     .btn-other input {
         font-size: 16px;
     }
         #positionnement-form-right {
        margin-left: 0;
        margin-top: 20px;
    }
    .input-form,
     #positionnement-form-right > .input-form{
        width: 85%;
    }
     .menu-informations-client a.active {
         padding-bottom: 17.5px;
     }
     #input-password {
         width: 85%;
     }
     #btn-a-smartphone {
         font-size: 15px;
        padding: 10px 5px; 
     }
     .valid-client a, .btn-other a {
         padding: 10px;
     }
 }
@media all and (min-width: 50em) and (max-width: 62em) {
    .menu-informations-client a {
        line-height: 2.4em;
    }  
    .menu-informations-client {
        padding-bottom: 4px;
    }
}

/* ----------------------------- */
 /* == GROUPEMENT               */
 /* -------------------------- */

#bloc-form-gp-solu1 {
    padding: 40px 0;
}

#bloc-form-gp-solu2 {
   padding: 25px 0; 
}

.msg-groupement-solu1 {
    text-align: center;
}

.nom-groupement {
    text-transform: uppercase;
    line-height: 1.6em;
}

#valid-client-gp-solu2  {
        margin-top: 50px;
    margin-bottom: 40px;
    text-align: center;
}

.list-gp-solu2 {
margin-left: 30%;
}

.list-gp-solu2 li {
    list-style: url('../img/fleche-ul.png');
}

.gp-case-livraison {
    margin-top: 40px;
}

.gp-case-livraison input {
    height: 20px;
    margin-right: 10px;
    width: 20px;
}

.adresse-groupe {
	padding-bottom : 20px;
}
#bloc-form-client-container-transport {
    padding-top: 20px;
}

.gp-transport-frais h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin: 10px 0;
    text-transform: uppercase;
}

.icon-print {
    height: 30px;
    margin-bottom: 20px;
}

.icon-print i {
    float: right;
}


/* ------------------------------ */
 /* == GROUPEMENT LISTE           */
 /* ---------------------------- */

#bloc-form-client-container-gp-liste {
    width: 100%;
}

.zone-recherche {
    text-align: center;
}

.zone-recherche > form > input {
    background: rgb(255,255,255) url("../img/icone-loupe.png") no-repeat scroll 95% center;
    border: 1px solid rgb(221, 220, 219);
    border-radius: 5px;
    color: rgb(221, 220, 219);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    width: 30%;
}

.gp-compteur {
    color: rgb(78, 117, 133);
   float: right;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.2em;
    margin: -25px 40px 0 0;
}

.accordion-container h3 {
    font-weight: 600;
    margin: 10px 0 0;
    text-decoration: underline;
}

.accordion-container h4 {
    color: rgb(78, 117, 133);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    margin: 20px 0 0;
    text-transform: uppercase;
}

.bloc-accordion {
    margin-top: 40px;
}

.accordion-container {
    background-color: rgb(255, 255, 255);
    padding: 20px 50px;
}


.titre-details-cmd {
      color: rgb(55, 59, 63);
    text-transform: uppercase;
}

.cmd-center {
margin-left: 20%;
}

.cmd-right {
    float: right;
    margin-right: 5%;
}


.ligne-cote-cmd {
    border-bottom: 1px solid rgb(78, 117, 133);
    padding: 15px 0 ;
    margin-bottom: 15px;
}


.ligne-cote-left img {
    float: left;
    padding-right: 20px;
    width: 3%;
}

.cmd-contenu {
    font-size: 16px;
}


.ligne-cote-right {
    font-size: 16px;
    float: right;
    margin-top: -20px;
}

.ligne-cote-cmd-total {
    font-size: 16px;
    float: right;
    padding: 10px 0;
    margin-bottom: 40px;
    width: 30%;
}

.ligne-cote-cmd-total-border {
       border-bottom: 1px solid rgb(43,43,43); 
    padding-bottom: 10px;
}

.ligne-cote-cmd-total > .ligne-cote-right,
.ligne-cote-cmd-total-border > .ligne-cote-right{
    margin-top: 0;
}


.search-result-float {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(78, 117, 133);
    margin-left: 34%;
    padding: 0;
    width: 31.5%;
}

.menu-group-result {
    margin: 0;
    padding: 0;
}

.li-result  {
    border-bottom: 1px solid rgb(223, 223, 223);
    display: block;
    font-size: 18px;
    font-weight: 300;
    margin: 0;
    padding: 6px 0 6px 6px;
}

.li-result a  {
      color: rgb(78, 117, 133);
    text-decoration: none;
}

@media all and (max-width: 40em) {
    #accordion h3 {
        font-size: 16px;
    }
    .cmd-center {
        margin-left: 8%;
    }
    .cmd-right {
        margin-right: 10%;
    }
    .ligne-cote-left img {
        width: 5.5%;
    }
    .zone-recherche > form > input {
        width: 60%;
    }
    .search-result-float { 
        margin-left: 18%;
        width: 63.5%;
    }
    .gp-compteur {
        margin-top: 0;
    }
    .ligne-cote-cmd-total {
        width: 90%;
    }
    .list-gp-solu2 {
        margin-left: 10px;
    }
}

 @media all and (min-width: 50em) and (max-width: 65em) {
     .cmd-center {
         margin-left: 8%;
     }
     .ligne-cote-cmd,
     .ligne-cote-cmd-total,
     .accordion-container1-contenu{
         font-size: 16px;
     }
     .cmd-right {
         margin-right: 10%;
     }
      .ligne-cote-cmd-total {
        width: 50%;
    }
     .ligne-cote-left img {
         width: 4%;
     }
     .zone-recherche > form > input{
         width: 40%;
     }
     .search-result-float {
         width: 41.5%;
     }
     .search-result-float {
         margin-left: 29%;
     }
 }

@media all and (max-width: 32em) {
    .cmd-center {
        display: none;
    } 
    #accordion h3 {
        font-size: 14px;
    }
    .accordion-container2-contenu a {
        margin-top: -10px;
    }
    .accordion-container1-contenu, .accordion-container2-contenu {
        padding: 20px 30px;
    }
}

@media all and (min-width: 40em) and (max-width: 50em) {
    .client-user a,
    .nav-client li a{
        font-size: 14px;
    } 
    .client-user h3{
        font-size: 16px;
    }
    .cmd-center {
        margin-left: 4%;
    }
    .accordion-container1-contenu, .accordion-container2-contenu,
    #accordion-contenu h4{
        padding : 0 20px 20px;
    }
    #accordion-contenu h4 {
        padding-top: 20px;
    }
    .ligne-cote-cmd-total {
        width: 60%;
    }
      .zone-recherche > form > input {
        width: 50%;
    }
    .search-result-float { 
        margin-left: 23%;
        width: 53.5%;
    }
    .gp-compteur {
        margin-top: 0;
    }
}


/* ------------------------ */
 /* == VOTES               */
 /* --------------------- */

.votes-etape1 h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}

.votes-etape1 a {
    color: rgb(55, 59, 63);
}

.votes-pdf-recap {
    padding-top: 10px;
}

.votes-etape1 a:hover {
    color: rgb(78, 117, 133);
}

.votes-etape1-btn {
    margin: 30px 0 30px;
  text-align: center;  
}

.btn-votes {
    background-color: rgb(55, 59, 63);
    border: 1px solid rgb(78, 117, 133);
    cursor: pointer;
    color: rgb(255,255,255);
    font-size: 16px;
    padding: 8px 0;
    margin: 0 5px;
    width: 14%;
}

.votes-pdf {
	margin-top: 20px;
}

.vote-actif {
	background-color: rgba(55, 59, 63,0.5);
    border: 1px solid rgb(89,173,213);
}

#valide-client-vote {
    text-align: right;
    margin-right: 60px;
    margin-bottom: 15px;
}

.fond_mineur {
    background: rgba(54, 59, 63, 0.8) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 52;
}

.div_mineur {
    background: rgb(255, 255, 255) none repeat scroll 0 0;
    border: 1px solid rgb(78, 117, 133);
    border-radius: 6px;
    color: rgb(54, 59, 63);
    left: 40%;
    position: fixed;
    text-align: center;
    top: 45%;
    width: 400px;
    z-index: 53;
}

.div_mineur tbody{
    margin: 0;
    padding: 0;
}

.div_mineur td,
.div_mineur th{
    margin: 0;
    padding: 0;
}
.div_mineur table {
   border-collapse: collapse; 
}

.btn-mineur {
    background-color: rgb(78, 117, 133);
    border: none;
    color: rgb(255,255,255);
    cursor: pointer;
     font-family: "Lato",sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 6px 0;
    width: 100%;
    
}

#btn-mineur-change {
    background-color: rgb(221,220,219);
        border-bottom-left-radius :6px;
    color: rgb(0,0,0);
}

.votes-etape4 {
    margin-bottom: 20px;
    width: 70%;
}

.votes-recap {
    float: right;
        font-weight: 600;
        margin-top: -70px;
        text-transform: uppercase;
}


.msg-erreur-vote {
    padding: 25px 5px;
}

#message_mineur {
    font-size: 16px;
}

#message_mineur2 {
   font-size: 16px;
    font-style: italic;
}

.btn-votes:hover {
    background-color: rgba(55, 59, 63,0.5);
}

@media all and (max-width: 50em) {
    .btn-votes {
        font-size: 14px;
        width: 25%;
    }
    .votes-etape1 h4 {
        font-size: 20px;
    }
}

@media all and (min-width: 50em) and (max-width: 70em)  {
    .btn-votes {
        width: 20%;
    }
}

@media all and (max-width: 35em) {
    .valid-client input{
        width: 80%;
    } 
    .div_mineur {
        left: 10%;
        width: 320px;
    }
}

@media all and (min-width: 35em) and (max-width: 50em) {
    .div_mineur {
        left: 25%;
        width: 350px;
    }
}

@media all and (min-width: 50em) and (max-width: 70em) {
    .valid-client input{
        width: 40%;
    }  
}

/* ---------------------------- */
 /* == COMMANDES               */
 /* ------------------------- */

#bloc-form-commandes {
    padding: 0;
}

#bloc-form-cmd2  {
    padding: 0 0 50px;
    width: 100%;
}

.fil-ariane img {
    padding: 0 10px;
}

.fil-ariane a {
    color: rgb(55,59,63);
    padding-left: 10px;
    text-decoration: none;
}

.ariane-active {
  font-weight: 600;
}

.fil-ariane a:hover {
    text-decoration: underline;
}

.titre-ariane {
    color: rgb(69, 201, 255);
    font-family: "Montserrat",sans-serif;
    font-size: 22px;
    font-weight: 400;
}

.haut-commmandes {
    border-bottom: 1px solid rgb(78, 117, 133);
    font-weight: 600;
    padding: 8px 50px;
}

.actions-commandes-nbr {
    float: right;
}

.container-commmandes {
    margin: 20px auto;
    width: 90%;
}

.bloc-cmd-actions {
    padding: 30px 0;
    text-align: center;
    width: 99%;
}

.bloc-cmd-actions h4 {
    font-weight: 400;
}

.part-ss-titre {
    font-style: italic;
    font-size: 16px;
}

.bouton-quantite {
    margin-top: 20px;
}

.ui-select-native {
    -moz-appearance: none;
    background: #fff url("../img/back-select.png") no-repeat scroll 100% center;
    border: 1px solid rgb(78, 117, 133);
    color: rgb(0,0,0);
    cursor: pointer;
    float: none;
    font-size: 16px;
    height: 30px;
    outline: medium none;
    padding-left: 5px;
    padding-right: 100px;
    width: inherit;
}

#valid-client-cmd input {
    width: 40%;
}

.cmd-etape6 {
    margin: 30px 0;
}

.cmd-etape6 h3 {
    text-transform: uppercase;
}

.cmd-etape6 h4 {
    font-style: italic;
    margin: 0;
}

.produit-un {
	margin-bottom: 50px;
}

#cmd-left6,
#cmd-right6 {
    text-align: inherit;
}

#cmd-left6 {
    border-right: 1px solid rgb(78, 117, 133);
    padding-left: 18%;
    width: 80%;
}

#cmd-right6 {
    padding-left: 18%;
    width: 80%;
}

#cmd-btn6 input {
    margin : 0 40px;
}

#ui-select-native-change {
    padding-right: 50px;
}

.bloc-livraison-contenu {
    padding: 0 0 40px;
}

.bloc-cmd-livraison h3 {
    color: rgb(78, 117, 133);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.indications-livraison-horaires {
    color: rgb(55, 59, 63);
    padding-left: 30px;
}

.livraion-prix-right {
    color: rgb(55, 59, 63);
    float: right;
    font-weight: 600;
    font-size: 16px;
    margin-right: 18%;
    margin-top: -5px;
}

.bloc-cmd-livraison a {
    color: rgb(78, 117, 133);
    font-size: 16px;
    font-style: italic;
    float: right;
    margin: 0 50px;
}


#bloc-cmd-livraison-gp {
    margin: 20px auto;
    width: 90%;
}

.bloc-livraison-gp-texte {
    margin: 30px 0 50px;
    text-align: center;
}

.livraison-gp-texte1 {
    font-weight: 600;
}

.livraison-gp-texte2 {
    font-style: italic;
}

#bloc-cmd-livraison-gp h3 {
    color: rgb(78, 117, 133);
    text-transform: uppercase;
}

.recap-dividendes {
    margin: 20px 40px 60px 40px;
}

.recap-dividendes-prod {
    font-weight: 600;
    margin-right: 50px;
}

.recap-dividendes-right {
    float: right;
}

.cmd-etape8 {
    margin: 10px auto;
    width: 90%;
}

#form-produits {
    margin-top: 50px;
}

.cmd-etape8 h3,
.confirm-bloc h3{
    color: rgb(78, 117, 133);
    margin: 20px 0;
    text-transform: uppercase;
}

.recap-cmd-complement {
      margin: 20px 60px 0 40px;
}

.recap-cmd-complement i {
    position: absolute;
    right: 10%;
}

.cmd-etape8-total {
    border-top: 1px solid rgb(78, 117, 133);
    float: right;
    margin-right: 6.5%;
    margin-bottom: 20px;
    padding-top: 10px;
    width: 25%; 
}

#recap-total-livraison {
    font-style: italic;
}

#bloc-form-cmd9 {
    width: 100%;
}

.confirm-bloc {
    background-color: rgb(243,243,243);
    min-height: 300px;
    padding: 20px 50px;
}

#bloc-confirm-change {
    margin-bottom: 20px;
}

.confirm-montant {
    color: rgb(163,55,63);
    font-style: italic;
    font-weight: 600;
}


@media all and (min-width: 50em) and (max-width: 60em) {
    #cmd-left6,
    #cmd-right6{
        padding-left: 10%;
    } 
    #cmd-left6 {
        width: 89%;
    }
    .ui-select-native {
        font-size: 14px;
    }
    #cmd-btn6 input {
        width: 30%;
    }
}

@media all and (min-width: 50em) and (max-width: 70em) {
  #valid-client-cmd input {
    font-size: 16px;
      width: 50%;
}  
     #cmd-btn6 input {
        width: 30%;
    }
    .cmd-etape8-total {
        margin-top: 30px;
        width: 35%;
        margin-right: 0;
    }
    .fil-ariane a {
        font-size: 16px;
    }
    .recap-dividendes{
        margin: 20px 0 40px;
    }
    .recap-cmd-complement {
       margin: 20px 0 0; 
    }
}

#barre-right {
    border-right: 1px solid rgb(78, 117, 133);
}

@media all and (max-width: 50em) {
    #barre-right {
        border-right: none;
        border-bottom: 1px solid rgb(78, 117, 133);
    }
    .haut-commmandes {
        padding: 8px 40px;
    }
    #valid-client-cmd input {
        width: 80%;
    }
    #cmd-left6 {
        border-right: none;
        border-bottom: 1px solid rgb(78, 117, 133);
    }
    #cmd-left6, #cmd-right6 {
        margin-bottom: 10px;
    }
    .cmd-etape6 {
        margin-top: 0;
    }
    #cmd-btn6 input {
        margin: 0 10px;
        width: 35%;
    }
    .ui-select-native {
        font-size: 14px;
    }
    .bloc-cmd-livraison h3 {
        margin: 20px 0;
    }
    .bloc-cmd-livraison {
        padding-bottom: 20px;
    }
    .livraion-prix-right {
        margin-right: 0;
    }
    .cmd-etape8-total {
        margin-top: 20px;
        margin-right: 0;
        width: 40%;
    }
    .recap-dividendes {
        margin-bottom: 20px;
        margin-right: 0;
        margin-left: 0;
    }
    .recap-cmd-complement {
        margin-left: 0;
        margin-right: 0;
    }
    .recap-dividendes-prod {
        margin-right: 20px;
    }
    .confirm-bloc {
        min-height: 380px;
    }
}

@media all and (max-width: 35em) {
    .actions-commandes-nbr {
        float: inherit;
        margin-left: 10px;
    }
    .haut-commmandes {
        font-size: 14px;
        padding: 8px 10px;
    }
     #valid-client-cmd input {
        font-size: 14px;
        width: 80%;
    }
    #cmd-left6, #cmd-right6 {
        padding-left: 5%;
    }
    .cmd-etape8-total {
        width: 70%;
    }
    #cmd-btn6 input {
        width: 50%;
    }
}

@media all and (max-width: 25em) {
   .cmd-etape8-total {
        width: 100%;
    } 
}

/* ---------------------- */
 /* == ADMIN             */
 /* ------------------- */

.admin-ligne-menu {
    border-top: 2px solid rgb(55,59,63);
}

.page-admin {
    margin: 40px 0 50px;
    width: 100%;
}

#bloc-admin-utilisateurs {
    margin-bottom: 50px;
    padding: 25px 0;
}

.new-admin {
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: right;
}

.new-admin a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgb(55, 59, 63);
    border-radius: 2px;
    color: rgb(55, 59, 63);
    cursor: pointer;
    font-family: "Lato",sans-serif;
    font-size: 18px;
    padding: 10px 70px;
    width: 22%;
    text-decoration: none;
}

#btn-csv {
    padding: 10px 30px;
    margin-left: 20px;
}

#btn-csv2 {
    margin-right: 20px;
}

.icon-print a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgb(55, 59, 63);
    border-radius: 2px;
    color: rgb(55, 59, 63);
    cursor: pointer;
    font-family: "Lato",sans-serif;
    float: right;
    font-size: 18px;
    padding: 10px 30px;
    text-decoration: none;
}

.new-admin a:hover,
.icon-print a:hover{
    background-color: rgba(55, 59, 63,0.1);
}

.barre-search-admin {
    text-align: center;
}

.barre-search-admin > form > input {
    background: rgb(255, 255, 255) url("../img/icone-loupe.png") no-repeat scroll 96% center;
    border: 1px solid rgb(220, 221, 219);
    border-radius: 6px;
    color: rgb(175, 167, 160);
     font-family: "Lato",sans-serif;
    font-size: 16px;
    font-style: italic;
    padding: 8px;
    text-align: left;
    text-decoration: none;
    width: 30%;
}

.onglet {
    margin: 0 0 10px;
}

.onglet-utilisateurs {
    border-collapse: collapse;
    border: 1px solid rgb(43,43,43);
    border-radius: 2px;
    border-bottom: none;
    padding: 5px 15px 10px;
}

#onglet-utilisateurs-actif {
    background-color: rgba(43,43,43,0.1);
}


#table-sequence2 {
    font-size: 18px;
    font-weight: 300;
    margin-top: 30px;
    width: 100%;
    border-collapse: collapse;
}

#table-sequence2  thead  {
    font-family: "Montserrat",sans-serif;
    border-bottom: 1px solid rgb(78, 117, 133);
    height: 40px;
  text-align: left;  
}

#table-sequence2  thead th {
    color: rgb(78, 117, 133);  
    font-weight: 600;
}

#th-left {
    width: 30%;
}

#th-right {
    width: 55%;
}

.th-right-prod {
    width: 35%;
}

.th-left-prod {
    width: 25%;
}


#table-sequence2  td,
#table-sequence2  th{
    color: rgb(55,59,63);
    font-weight: 400;
    padding-left: 40px;
}

#ligne1 {
    background-color: rgb(243,243,243);
}


#ligne1,
#ligne2 {
    border-bottom: 1px solid rgb(78, 117, 133);
    height: 50px;
}

#table-titre {
    font-weight: 500;
}

#admin-icon img {
   padding: 0 5px; 
}

.admin-nav {
    text-align: center;
    margin-top: 30px;
}

.admin-nav  a {
    color: rgb(78, 117, 133);
    font-size: 18px;
    font-weight: 600;
    padding: 0 5px;
    text-decoration: none;
}

.smartphone-only,
.smartphone-only-titre{
    display: none;
}

#bloc-admin-utilisateurs {
    margin-top: 40px;
}

.bloc-admin-utilisateurs2 {
    margin: 0 auto;
    width: 90%;
}


#ligne-admin {
    min-height: 60px;
    overflow: visible;
    padding-left: 220px;
    position: relative;
    width: auto;
}

.titre-label-admin {
    font-family: "Montserrat",sans-serif;
    font-weight: 600;
    left: 0;
    line-height: 2.6em;
    position: absolute;
    white-space: normal;
    width: 220px;
}

.admin-form-texte,
.admin-form-email,
.admin-form-number,
.admin-form-text,
.admin-form-date,
.admin-form-password{
    border: 1px solid rgb(43, 43, 43);
    color: rgb(120, 120, 120);
    font-size: 15px;
    font-style: italic;
    padding: 5px;
    width: 60%;
}

#bloc-admin-produits {
    margin-top: 30px;
}

#admin-icon a i {
    padding-right: 10px;
}

.reini-password {
    margin: 20px 0 50px;
}

.reini-password a {
    color: rgb(55,59,63);
}

#btn-admin-prod {
    margin-top: 15px;
}

#btn-admin-prod input:first-child {
    margin-right: 10px;
}

.admin-form-checkbox {
  height: 20px;
    margin-top: 5px;
    width: 20px;
}

.bloc-admin-utilisateurs2 h3 {
    color: rgb(78, 117, 133);
    font-family: "Montserrat",sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-top: 20px;
    text-transform: uppercase;
}

.bloc-admin-rapport {
    margin: 0 auto;
    width: 90%;
}

.nom-rapport-admin {
    text-align: center;
}

.nom-rapport-admin h3 {
    color: rgb(78, 117, 133);
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 30px;
    text-transform: uppercase;
    
}

.admin-cmd-bloc {
     font-family: "Montserrat",sans-serif;
    padding: 30px 50px 50px;
}


@media all and (max-width: 50em) {
   #th-right {
    display: none;
} 
    .smartphone-only-titre {
        display: inherit;
        padding-left: 5px;
    }
    .smartphone-only {
       display: inherit; 
    }
    #smartphone-none {
        display: none;
        width: inherit;
    }
    #smartphone-size {
        width: 78%;
    }
    #admin-icon img {
        padding: 0 1px;
    }
    #table-sequence2 {
        font-size: 16px;
    }
    #th-left {
        display: inline-flex;
        width: 80%;
    }
    #table-sequence2 td {
        padding: 12px 0 10px 12px;
    }
    .admin-sequence2 h1 {
       font-size: 30px; 
    }
    .barre-search-admin > form > input {
        width: 60%;
    }
    .titre-label-admin {
        position: inherit;
    }
    #ligne-admin {
        padding-left: 0;
    }
    .admin-form-texte {
        width: 90%;
    }
    .new-admin {
        margin-top: 20px;
    }
    .new-admin a {
      font-size: 16px; 
       padding: 10px 40px;
    }
    .awm-commandes-bloc-6 {
        margin-bottom: 20px;
    }
    .admin-cmd-bloc {
        padding-bottom: 10px;
    }

}

@media all and (max-width: 50em) {
       .admin-supp {
        margin-bottom: 20px;
    } 
    .admin-form-texte {
        width: 70%;
    }
}

@media all and (min-width: 50em) {
    #smartphone-only {
        display: none;
    }
}

@media all and (min-width: 50em) and (max-width: 75em) {
   .new-admin a {
      font-size: 16px; 
    }
    .new-admin {
        margin-top: 20px;
    }
}

@media all and (min-width: 50em) and (max-width: 60em) {
    .admin-form-texte, .admin-form-email, .admin-form-number, .admin-form-text, .admin-form-date, .admin-form-password {
    width: 85%;
}
}


/* -------------------------- */
 /* == FOOTER                 */
 /* ------------------------- */
 
.barre-footer1 {
    border-bottom: 3px solid rgb(55, 59, 63);
}

.barre-footer2 {
  border-bottom: 15px solid rgb(255, 187, 69);  
}
 

/*   Admin-Onglets   */
.invit-onglet-conteneur
{
margin: 0;
padding:0 0 0 5px;
}

.invit-onglet-label
{
display:inline-block;
margin:5px 0 0;
padding:5px 10px ;
border:1px solid rgb(43,43,43);
    border-bottom: none;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:rgb(0,0,0);
cursor: pointer;
}

.invit-onglet-inactif
{
background:white;
}

.invit-onglet-inactif:hover
{
 background:rgba(55, 59, 63,0.1);
}

.invit-onglet-affiche
{
background-color: rgba(43, 43, 43, 0.1);
    border-bottom: 1px solid rgb(232, 232, 232);
padding-bottom:4px;
cursor:text;
}

.invit-onglet-contenu
{
background-color:white;
margin-top:-1px;
padding:0;
display:none;
border:1px solid #AAA;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
color:#555;
cursor: text;
}

 

#textarea-admin {
    margin-top: 0;
}

#input_ut_fac_field {
    border: none;
    padding: 5px 0;
}

.cmd-cpl-nbr {
    border: 1px solid rgb(78, 117, 133);
    color: rgb(0, 0, 0);
    float: none;
    font-size: 16px;
    height: 26px;
    outline: medium none;
    width: 20%;
}

.textarea-admin {
      border: 1px solid rgb(43, 43, 43);
     color: rgb(120, 120, 120);
    font-size: 15px;
    font-style: italic;
    padding: 5px;
    margin: 0;
     min-height: 80px;
    width: 90%;
}

.produit-erreur {
    color: rgb(172,41,41);
    font-style: italic;
}

.lien-logiciel {
    background-color: rgb(70, 201, 255);
    float: right;
    margin-right: 100px;
    margin-bottom: 1%;
    padding: 10px 0;
    text-align: center;
    width: 14%;
}

.lien-logiciel:hover {
    background-color: rgba(70, 201, 255,0.8); 
}

.lien-logiciel a {
    color: rgb(255,255,255);
    text-decoration: none;
}

.btn-commande-reglement {
  color: rgb(78, 117, 133);
cursor: pointer;
border: 1px solid rgb(78, 117, 133);
border-radius: 2px;
font-family: "Lato",sans-serif;
font-size: 18px;
    float: right;
    margin-right: 19%;
margin-top: 20px;
background: none;
    background-color: rgba(0, 0, 0, 0);
padding: 10px 0;
width: 32%;  
}

#commandes-from {
    margin-top: 10px;
}

#form-produits {
    margin-left: 40px;
}

#input_ta_type,
#input_limit-select,
#input_cmds-select{
    -moz-appearance: none;
background: #fff url("../img/back-select.png") no-repeat scroll 100% center;
border: 1px solid rgb(78, 117, 133);
color: rgb(0,0,0);
cursor: pointer;
float: none;
font-size: 16px;
height: 30px;
outline: medium none;
padding-left: 5px;
padding-right: 100px;
width: inherit;
}

#input_limit-select,
#input_cmds-select{
    float: right;
    margin-right: 2%;
}

@media all and (max-width: 50em) {
    #input_limit-select,
    #input_cmds-select{
        margin-top: 10px;
        float: none;
    }
}

.vot-procuration {
    color: rgb(78, 117, 133);
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 10px;
    text-decoration: underline;
}