* {
	margin: 0;padding: 0;
}	
body,html {
	height: 100%;
	color: #1c1c1c;
    font-family: 'Barlow Condensed', sans-serif;

    background: rgba(26, 136, 169, 1.0);
    background: -webkit-linear-gradient(top left, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
    background: -moz-linear-gradient(top left, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
    background: linear-gradient(to bottom right, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));

    text-rendering: geometricPrecision;
}

.body_login {

    
}

@keyframes body_login {
    0% {
        background: rgba(26, 136, 169, 1.0);
        background: -webkit-linear-gradient(top left, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
        background: -moz-linear-gradient(top left, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
        background: linear-gradient(to bottom right, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
    }
    50% {
        background: rgba(26, 136, 169, 1.0);
        background: -webkit-linear-gradient(top left,rgba(36, 141, 103, 1.0),  rgba(26, 136, 169, 1.0) );
        background: -moz-linear-gradient(top left,rgba(36, 141, 103, 1.0), rgba(26, 136, 169, 1.0) );
        background: linear-gradient(to bottom right, rgba(36, 141, 103, 1.0),  rgba(26, 136, 169, 1.0) );
    }
    100% {
        background: rgba(26, 136, 169, 1.0);
        background: -webkit-linear-gradient(top left, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
        background: -moz-linear-gradient(top left, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
        background: linear-gradient(to bottom right, rgba(26, 136, 169, 1.0), rgba(36, 141, 103, 1.0));
    }
}

*:focus {
    outline: none;
    background-color: white;
}

a, input, select {
	color: #000;
    font-family: 'Barlow Condensed', sans-serif;
	border:none;
    text-decoration: none;
    transition: 1s;
    
}

h1, h1 a {
    font-size:16pt;
    color:#000;
}

h2 {
    color: rgb(116, 116, 116);
    text-align: center;
    margin-bottom: 10px;
}

ul {
    list-style: none;
}

#App {
    background-color:#f7f7f7;
    width:90%; min-height:400px;
    margin:10px auto 120px auto;
    padding-bottom: 30px;
    display:block;
    border-radius: 10px;
}


.copyright {
    text-align: center;
    width: 92%;
    padding: 0 10px 0 20px;
    color:#FFFFFF;
    font-weight:normal;
}

.copyright_bottom {
    position: absolute;
    bottom:15px;
}

.logo {
    width: auto; height: 60px;
    margin: 10px 0 10px 0;
    z-index:999;
    /* display: none; */
}

ul.Nav {
    width: 100%;
}
ul.Nav li {
    margin:10px 0 0 0;
}
ul.Nav li:first-child, ul.Nav li:last-child {
    width: 49.5%;
}
ul.Nav li:first-child {
    text-align: left;
}
ul.Nav li:last-child {
    text-align: right;
    font-size: 11pt;
}
ul.Nav li:last-child .logout {
    display: block;
}

.menu {
    font-size: 14pt;
    color: rgb(255, 72, 72);
}
.menu a {

}
.menu .mob {
    /* display: none; */
}
.menu img {
    padding:0;
    margin:0 0 10px 10px;
    display: inline-block;
    vertical-align: middle;
    width: auto; height: 30px;
    font-size: 16pt;
    font-weight: bold;
}
.menu .sub {
    display: inline-block;
}
.menu .sub a:hover {
    background-color: #FFFFFF;
    border-bottom: 1px solid orange;
    font-weight: bold;
}

.loading {
    background-image: url('/images/ui/icon-loading.gif');
    background-size: contain;
    background-position:right;
    background-repeat: no-repeat;
}
.btn-bk {
    background-color:#000;
    color:#FFFFFF;
    font-weight: normal;
    font-size: 14pt;
    font-family: 'Barlow Condensed', sans-serif;
    display: inline-block;
    /* text-transform: lowercase; */
}
.btn-bk:hover {
    background-color: rgb(64, 64, 64);
}
.btn-ok {
    background-color:rgb(119, 183, 100);
    color:#FFF;
}
.btn-ok:hover {
    background-color: yellowgreen;
}
.btn-red {
    background-color:rgb(233, 104, 104);
    color:#FFF;
}
.btn-red:hover {
    background-color: rgb(228, 85, 85);
}
.btn-or {
    background-color:rgb(81, 81, 81);
    color:#FFF;
}
.btn-or:hover {
    background-color: rgb(49, 49, 49);
}

a.btn-bk, a.btn-ok, a.btn-red, a.btn-or {
    font-weight:normal;
    font-size:13pt;
    padding:10px 20px 10px 20px;
    margin:5px;
    border:none;
    border-radius:10px;
    font-family: 'Barlow Condensed', sans-serif;
    display: inline-block;
    text-rendering: geometricPrecision;
    
}
button.btn-bk, button.btn-ok, button.btn-or {
    font-weight: normal;
    font-size: 11pt;
    padding:10px 20px 10px 20px;
    margin:5px;
    border:none;
    border-radius: 10px;
    text-decoration: none;
}
button.btn-bk span {
    color:#fff000;
    text-decoration:underline dotted;
    text-underline-offset: 4px;
}

.btn-valided {
    width: 200px;
    height:80px;
    /* width: 245px;
    height: 75px; */
}

/**/

.logout {
    color: red;
}
.logout:hover {
    text-decoration: underline;
}

#map {
    /* position: absolute;
    top: 0; bottom: 0; */
    width: 100%; height: 350px;
    display: none;
}

#graphic {
    position: absolute;
    top:5px; right: 10px;
    font-size: 12pt;
}
.graphic {
    background-size: contain;
    width: 25px; height: 25px;
}

.shadow {
    -webkit-box-shadow: 2px 2px 2px 5px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.15);
}

/* LOGIN */

.login h1 {
    text-align: center;
}
.login {
    width: 990px; min-height:360px;
    position: absolute;
    text-align: center;
    left: 50%; top:50%;
    margin: -225px auto 0 -495px;
    -webkit-box-shadow: 6px 6px 6px 10px rgba(0,0,0,0.15);
	box-shadow: 6px 6px 10px 6px rgba(0,0,0,0.15);
    border-radius:15px;
    overflow: hidden;
    background-color: white;
}

.login .connect {
    min-height: 360px;
    float: left;
    vertical-align: top;
    border:none;
}
.login .connect_form {
    /* border-radius:15px 0 0 15px; */
    width: 350px;
}
.login .connect_media {
    text-align: center;
    width: 640px;
    position: relative;
}
.login .connect_media video {
    border-radius: 0 15px 15px 0;
    position: absolute;
    left:0; top:0;
}
.login .img_entrepot {
    background-image:url('/images/ui/visuel_login_home.jpg');
    background-size:cover;
    background-position: bottom center;
}
.login .img_entrepot_wide {
    background-image:url('/images/ui/visuel_login_home_wide.jpg');
    background-size:cover;
    background-position: bottom center;
}
.login .connect_media .logo_login {
    width: 60px; height: auto;
    position: absolute;
    left:50%; top:10px;
}

.login span, .createlogin .field {
    width: 95%; min-height: 40px;
    margin: 5px auto 5px auto;
    padding: 5px;
    display: block;
    border-radius: 5px;
}

.login input {
    font-size: 14pt;
    padding: 5px;
    float: right;
    width: 70%;
    background-color: rgb(233, 233, 233);
    border-radius: 5px;
}

/* .login img {
    width:100px; height:100px;
    margin:20px auto 0 auto;
    display: inline-block;
} */


.login .login-button {
    text-align: center;
}

.login .logout {
    color: red;
    font-size: 14pt;
    text-align: center;
    margin: 10px auto 10px auto;
    display: inline-block;
    width: 100%;
}

.login-session {
    position: absolute;
    left: 0; top:-25px;
    width:300px; height:30px;
    color: seagreen;
}
.login-session a {
    color: red;
}

.login ul.HomeAccount {
  margin: 30px 0 20px 0;
}
.login ul.HomeAccount li {
  display: inline;
  width: 30%;
  font-size: 20pt;
  padding: 10px;
  text-align: center;
}

.login span.button {
    text-align: center;
}


/*
    ACCOUNT
*/

.account {
    width:100%; min-height:500px;
    border-radius:10px 10px 0 0;
    /* background: rgb(81,0,201);
    background: linear-gradient(90deg, rgba(81,0,201,1) 0%, rgba(9,36,121,1) 48%, rgba(0,212,255,1) 100%); */
    text-align: left;
}

.account h1 {
    font-size: 16pt;
    margin:10px auto 20px 0;
    text-align: center;
}
.account h2 {
    font-size: 14pt;
    padding: 5px 0 5px 0;
    display: block;
}

.accountHome {
    width:24.5%; min-height: 550px;
    border:1px solid rgba(255, 255, 255, 0.2);
    margin: 25px auto 0 auto;
    display: inline-block;
    border-radius: 5px;
    border-right: 1px solid #eaeaea;
    vertical-align: top;
    text-align: center;
}
.accountHome:last-child {
    border-right: none;
}
.accountHome .download {
    width: 100%;
    text-align: center;
}
.accountHome .download a {
    font-weight: bold;
    font-size: 12pt;
}
.accountHome .btn-bk {
    margin-left: auto;
    margin-right: auto;
}
.account span {
    width: 80%;
    margin:5px auto 5px auto;
}
.account div p {
    font-size: 11pt;
    padding:10px;
    margin:15px 0 15px 0;
    font-weight: normal;
}

/**/

.logo_theme {
    width:100%; height: 100px;
    text-align: center;
}
.logo_theme img {
    width: auto; height: 90px;
}
.account .orders ul li {
    background-color: #f1f1f1;
    border-radius: 5px;
    margin: 5px; padding: 5px;
    text-align: left;
}
.account .orders ul li a.web {
    display: block;
    min-height: 25px;
    margin:5px 0;
}
.account .orders ul li a div {
    color: #3889b8;
}
.account .orders ul li i {
    float: right;
    font-weight: normal;
}
.account .orders ul li .waiting {
    color: rgb(255, 132, 0);
}
.account .orders ul li .confirm {
    color: rgb(13 192 115);
    background: none;
}
.account .orders ul li .inprogress {
    color: rgb(15 170 182);
}
.account .bill ul li b {
    float: right;
}
.account .bill ul li .more {
    color: red;
    font-weight: normal;
}
.bill ul li a {
    border-bottom: 1px solid #dfdfdf;
    display: block;
    margin:0 0 10px 0;
}
.bill ul li a:hover {
    border-bottom: 1px solid orange;
}
.account div:hover {
    background-color: rgb(255, 241, 218);
}

.EC_sens b {
    text-align: center;
    width: 100%;
    padding: 10px 0 0 0;
}

.bill ul li.EC_sens a {
    color: #008e53;
    font-size: 14pt;
    border:none;
}
/**/


.visuel_CT_Num {
  width:215px; height: 180px;
  display: inline-block;
  margin: 0 0 0 15px;
  animation: visuel_CT_Num 1s infinite alternate;
  background-position: center top;
  background-repeat: no-repeat;
}

@keyframes visuel_CT_Num {
  from {
    background-image: url('/images/visuel_facture_client_Key1.png');
  }
  to {
    background-image: url('/images/visuel_facture_client_Key2.png');
  }
}

/* */

.identification {
    top:15%;
	padding:20px;
    margin:-0 auto 0 -495px;
    text-align: left;
    font-size: 14pt;
    background-image: url('/images/ui/visuel_login_first_connexion.jpg');
    background-position:500px bottom;
    background-repeat: no-repeat;
    /* background-color: #b1b1cc; */
     background-color:white;
    min-height: 550px;
}
.identification_ok {
    background-position:50% bottom;
}
.identification h1 {
	margin:10px auto 30px auto;
}

.identification label {
  display:block;
  margin:10px;
  padding:10px;
  width:100%; height:40px;
  border-radius: 5px;
}

.identification label input {
	padding:5px;
	font-size:14pt;
	width:100%;
}

ul.first_connexion li {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}
ul.first_connexion li p {
    padding: 10px;
}

.identification .alert a {
    color:black;
    font-weight: bold;
}


/* ORDER EDIT */

.step {
    width: 600px;
    margin: 0 auto 0 auto;
}

.Nav li, .step li {
    display: inline-block;
    width: 32%;
    text-align: center;
    vertical-align: middle;
}
.Nav li.customer b {
    color:black;
}
.Nav li.customer .logo {
    top:-10px;
}
.step li {
    font-size: 18pt;
    overflow: hidden;
}
.step li img {
    width: 100%; height: auto;
}
.step li:first-child {
    border-radius: 5px 0 0 5px;
}


/* ORDER */

.order h2 {
    width: 90%;
    margin:20px auto 20px auto;
    text-align: left;
    color:black;
    font-size: 22pt;
}

.order .order_search {
    width: 98%;
    background-color: white;
    border-radius: 10px;
    margin: 30px auto 30px auto;
}

.order .order_search .find_Ref, .order .order_search .find_Keyword, .order .order_search .limit_results, .order .order_search .filtre {
    display: inline-block;
}
.order .order_search .find_Ref {
    width: 25%;
}
.order .order_search .find_Keyword {
    width: 25%;
}
.order .order_search .limit_results {
    width: 35%;
}
.order .order_search .filtre {
    width: 10%;
    text-align: left;
}
.order .order_search .filtre select {
    width: 85%;
}

.order .order_search b {
    padding: 0 0 0 15px;
    display: inline-block;
}
.order .order_search input[type='text'], .order .order_search select {
    height: 25px;
    padding: 5px; margin: 5px;
    font-size: 14pt;
    border:1px solid rgb(223, 223, 223);
    border-radius: 10px;
    margin: 10px 15px 10px 15px;

    box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    -webkit-box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    -moz-box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
}
.order .order_search select {
    height: 35px;
    background-color: white;
}

.order .order_search #Ref {
    width: 45%;
    text-transform: uppercase;
}
.order .order_search #Designation {
    width: 70%;
}
.order .order_search .CT_Intitule {
    display:inline-block;
    font-size: 18pt;
    color: red;
    width: 100%;
    text-align: center;
}
.order .order_search .CT_Intitule i {
    font-size: 13pt;
    color: black;
}

.order .order_search .what_display {
    width: 30%;
    display: inline-block;
    vertical-align: middle;
}
.order .order_search .what_display input {
    margin:5px 0 0 5px;
    padding:0;
}

.filtre {
    margin: 0;
    width:15%;
    text-align: right;
    display: inline-block;
}

.filtre select {
    box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    -webkit-box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    -moz-box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    font-size: 14pt;
    padding: 5px;
    border-radius: 10px;
    border:1px solid rgb(223, 223, 223);
    font-weight: normal;
    height: 35px;
}

/**/


.order .article {
    background-color: white;
    border-bottom: 1px solid rgb(231, 231, 231);
}
.order .articles .article:hover {
    box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    -webkit-box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    -moz-box-shadow: 4px 11px 4px -9px rgba(0,0,0,0.15) inset;
    border:1px solid rgb(210, 210, 210);
}
.order .resultats .article:hover {
    background-color:#b6eee2; 
}
.order .article li {
    display: inline-block;
    vertical-align: middle;
    min-height: 40px;
    position: relative;
    padding: 10px 0 0 0;
    font-size: 14pt;
    color:black;
    font-weight: normal;
}
.order .article li:nth-child(1) {
    width: 5%;
    text-align: center;
}
.order .article li:nth-child(2) {
    width: 10%;
    overflow: hidden;
}

.articles_catalog .article li:nth-child(2) {
    width: 10%;
    overflow:visible;
}

.order .article li:nth-child(3) {
    width: 45%;
    text-align: left;
}
.order .article li:nth-child(4) {
    width: 17%;
    text-align: center;
}
.order .article li:nth-child(5) {
    width: 7%;
    text-align: right;
}
.order .article li:nth-child(6) {
    width: 5%;
    text-align: right;
}
.order .article li:nth-child(7) {
    width: 8%;
    text-align: right;
}

.order .article li:nth-child(2) {
    width: 10%;
}

.order .article li:nth-child(2) .photo {
    width:55px; height: 55px;
    background-color: white;
    position: absolute;
    right: 5px; top:5%;
    text-align: center;
    vertical-align: middle;
}
.order .article li:nth-child(2) .photoBig {
    z-index: 999;
    position: absolute;
    left:70%; bottom:0;
    -webkit-box-shadow: 0px 10px 13px -7px #0000007c, 3px 5px 15px 5px rgba(0,0,0,0); 
    box-shadow: 0px 10px 13px -7px #0000007c, 3px 5px 15px 5px rgba(0,0,0,0);
}

.order .article li img.delete, .order .article li img.disable {
    width: 30px; height: auto;
    cursor:no-drop;
}
.order .article li .delete:hover {
    width: 35px;
}

.order ul.disable li {
    opacity: 0.2;
    /* text-decoration:line-through; */
}
.order ul.disable:hover {
    cursor:no-drop;
}

.order .article li img.frais {
    width: 30px; height: 30px;
    position: absolute;
    top:25%; left: -20px;
    box-shadow: rgba(255, 255, 255, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    background-color:white;
    border-radius: 50%;
    border:2px solid white;
}
.order .article li img.preco {
    /* -webkit-transform:rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    transform: rotate(-25deg);
    width: 70px; height: auto;
    position: absolute;
    right:0; top:25%; */

    width: 70px;
    height: auto;
    position: absolute;
    left: -35px;
    top: -10px;

}


.order .article li input[type='checkbox'] {
    width:30px; height:30px;
}

.order .article .comment {
    color: #757575;
}
.order .article .rupture {
    color: red;
}
.order .article input.qte, .order .article .moreqty {
    width: 50%; height: 70%;
    font-size: 14pt;
    margin-top:10px;
    border:1px solid rgb(212, 212, 212);
    text-align: center ;
    border-radius: 5px;
}

.order .article .moreqty {
    display:none;
    background-color: white;
    border:1px solid red; 
}

.order .article li .qty {
    line-height: 85%;
    margin-bottom: 10px;
}
.order .article li .comment {
    font-size: 14px;
}

.order .article li .stock_out {
    margin:5px;
}
.order .article li .stock_out i {
    color:red;
}
.order .article li .qty i {
    font-size: 11pt;
}
.order .article li .moveqty {
    width: 25px; height:25px;
    background-color: white;
    border:1px solid rgb(212, 212, 212);
    color:red;
}

.order .article li .moveqty_left {
    border-radius: 15px 0 0 15px;
    z-index:-10;
}
.order .article li .moveqty_right {
    border-radius: 0 15px 15px 0;
    margin:-5px 0 0 -3px;
    display: inline-block;
    top:-5px;
}

.order .article select.qte, .order .new_article select.qte {
    width: 100%; height: 35px;
    border-radius: 5px;
    font-size: 16pt;
}

.order .articles .ViewLotSerie {
    color:rgb(255, 102, 0);
}
.order .articles .ViewLotSerie:hover {
    color:rgb(255, 102, 0);
}

.order .articles .LotSerie {
    font-size:14pt;
    margin: 10px;
    display:none;
}
.order .articles .LotSerie ul li {
    display: inline-block;
    padding:5px;
    border-top: 1px solid rgb(197, 197, 197);
    border-right: 1px solid red;
    border-bottom: 1px solid rgb(197, 197, 197);
    border-left: 1px solid rgb(197, 197, 197);
    margin:2px;
}

.order .article .box, .order .new_article .box {
    font-size:14pt;
    display:block;
    margin:5px 0 5px 0;
}
.order .article .auKg, .order .new_article .auKg {
    font-size:11pt;
    width:100%;
    display:block;
    text-align:right;
}

.order .article .wanted {
    border:2px dashed rgb(255, 185, 185);
    padding:5px;
    margin:5px 0 5px 0;
    border-radius:5px;
    line-height: 120%;
}
.order .article .delivery {
    border:2px dashed rgb(139, 158, 31);
    padding:5px;
    border-radius:5px;
    margin:5px 0 5px 0;
    line-height: 120%;
}

.order .article_title {
    background: linear-gradient(0deg, rgb(241, 241, 241) 0%, rgb(226, 226, 226) 100%);
    border: 1px solid white;
}

.order .article .AddCart {
    width: 30px; height: auto;
}

/* PRECO */

label.preco_date {
    border:1px solid white;
    padding:5px; margin:5px;
    border-radius: 10px;
    background-color: #FFFFFF;
    display: inline-block;
}
label.preco_date:hover {
    border:1px solid rgb(115, 115, 115);
}
label.preco_date i {
    color: #787878;
}


/* FACTURE */

.total_EC_Echeance {
    text-align: right;
    font-size: 22pt;
    padding: 0 10% 0 0;
    color:red;
    font-weight: bold;
}
.EC_Echues i {
    color: red;
}
.EC_Echeance i {
    color: #008e53;
}

.facture a.pdf img {
    width: 25px; height:auto;
    float: right;
    margin-right: 10px;
}
.Factures .month, .Factures .year {
    font-size: 16pt;
    border-bottom: 2px solid rgb(221, 221, 221);
    padding: 0 0 0 20px;
    background: rgb(203,203,203);
    background: linear-gradient(0deg, rgb(241, 241, 241) 0%, rgba(250,250,250,1) 100%);
}
.Factures .year h3 {
    color: #00a2ff;
    font-size:24pt;
    padding:10px 0 10px 0;
}

.order .status i {
    color: rgb(48, 170, 103);
}
.order .status .btn-ok {
    padding: 5px 10px 5px 10px;
    font-size: 13pt;
}
.order .article .Total {
    font-weight: bold;
    font-size: 14pt;
}
.order .statusOrder {
    width:100px; height: 25px;
    position: absolute;
    bottom:15px; right:0;
    transition: height 0.15s ease-out;
    background-color: white;
    overflow: hidden;
    padding: 5px;
    border-radius: 10px;
    font-size: 14pt;
    z-index: 999;
}
.order .statusOrder:hover {
    height: 250px;
    background-color: white;
    transition: height 0.25s ease-in;
    -webkit-box-shadow: 0px 10px 13px -7px #0000007c, 3px 5px 15px 5px rgba(0,0,0,0); 
    box-shadow: 0px 10px 13px -7px #0000007c, 3px 5px 15px 5px rgba(0,0,0,0);
    position: absolute;
}

.order .statusOrder .num_status {
    width: 95%;
    text-align: center;
    color: #18aa75;
    border:1px dashed #26d394;
    padding: 2px;
    display: block;
    border-radius: 5px;
}
.order .statusOrder i {
    font-size: 11pt;
}

.order .statusOrder label:hover {
    color:black;
}
.order .statusOrder label {
    margin: 5px 0;
    display: inline-block;
}

.order .statusOrder label.sum {
    /* opacity: 0.5; */
}
.order .statusOrder label.sum input {
    /* display: none; */
}
.order .statusOrder label.client {
    color: #757575;
}


.order .new_article {
    -webkit-animation-name: color-transition;
	animation-name: new_article-transition;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-iteration-count: 2;
	animation-iteration-count:2;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@-webkit-keyframes .new_article {
	0% {
		background-color: #3fe1bb;
	}
	100% {
		background-color: #FFFFFF;
	}
}
@keyframes new_article-transition {
    0% {
		background-color: #3fe1bb;
	}
	100% {
		background-color: #FFFFFF;
	}
}


.NavOrder, .TotalOrder, .TotalOrder_PizzaFocaccia {
    width: 100%; min-height: 50px;
    margin: 20px auto 30px auto;
    border-top:1px dashed #bfbfbf;
    text-align: center;
}
.NavOrder li, .TotalOrder li, .TotalOrder_PizzaFocaccia li {
    width: auto;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    position: relative;
}
.NavOrder select {
    font-size:14pt;
    padding:5px;
    background-color: black;
    color: white;
    border-radius: 10px;
    margin:5px 0 0 0;
}
.NavOrder .arrow_down {
    position:absolute;
    left: 50%;
    margin:-18px 0 0 -15px;
    width: 25px;
}

.NavOrder .new_order, .NavOrder .new_order_preco {
    display: none;
    position:absolute;
    margin-left:-100px;
    margin-top:10px;
    width:400px; min-height:200px;
    z-index:999;
    background-color: white;
    -webkit-box-shadow: 0px 10px 13px -7px #0000007c, 3px 5px 15px 5px rgba(0,0,0,0); 
    box-shadow: 0px 10px 13px -7px #0000007c, 3px 5px 15px 5px rgba(0,0,0,0);
    border-radius: 10px;
}

.NavOrder .new_order_preco {
    margin-left:100px;
}

.NavOrder .new_order .edit, .NavOrder .new_order .delete, .NavOrder .new_order .valided {
    width: 25px;
    height: auto;
}

.NavOrder .new_order .edited {
    display: none;
}

.NavOrder .new_order .cadencier input {
    font-weight: normal;
    font-size: 13pt;
    padding: 10px 20px 10px 20px;
    margin: 5px;
    border-radius: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    display: inline-block;
    text-rendering: geometricPrecision;
    background-color: white;
    border:1px solid black
}

.NavOrder .new_order_preco label {
    margin:10px;
    display: inline-block;
    font-size: 14pt;
}
.NavOrder .new_order_preco label input[type='checkbox'] {
    margin:5px;
}

/**/
.TotalOrder li:first-child, .TotalOrder li:first-child, .TotalOrder_PizzaFocaccia li:first-child {
    width: 25%;
}
.TotalOrder li:first-child, .TotalOrder li:last-child, .TotalOrder_PizzaFocaccia li:last-child {
    width: 25%;
}
.TotalOrder li:nth-child(2), .TotalOrder_PizzaFocaccia li:nth-child(2) {
    width: 48%;
}

.TotalOrder li, .TotalHT {
    font-size: 16pt;
}

.TotalOrder b em {
    color: #b5b5b5;
}


.current_order {
    position: fixed;
    left:0; bottom: 0;
    width: 100%;
    height: 80px;
    background-color: white;
    font-size: 16pt;
    -webkit-box-shadow: -3px -12px 10px -2px rgba(0,0,0,0.25); 
    box-shadow: -3px -12px 10px -2px rgba(0,0,0,0.25);
    transition: 1s;
}

.current_order_edited {
    background: rgb(179,179,179);
    background: linear-gradient(0deg, rgba(179,179,179,1) 0%, rgba(175,175,175,1) 0%, rgba(255,255,255,1) 100%);
}

.current_order .cart {
    width: 80%;
    margin:0 auto 0 auto;
    height: 80px;
}
.current_order .cart ul {
    width: 100%;
}
.current_order .cart ul li {
    width: 15%;
    display: inline-block;
    vertical-align: top;
    width:33%; height: 80px;
    padding:5px 0 0 0;
}
.current_order .cart ul li:first-child {
    font-size: 14pt;
}
.current_order .cart ul li:nth-child(2) {
    text-align: center;
}
.current_order .cart ul li:last-child {
    text-align: right;
}
.current_order .cart ul li:last-child a {
    text-align: center;
}
.current_order .cart ul li:last-child img {
    width:40px; height:auto;
    vertical-align: middle;
}
.current_order .cart .totalHT {
    font-weight: bold;
}
.current_order .cart .totalArticle, .current_order .cart .totalHT {
    font-size: 20pt;
    text-align: center;
}

.current_order .ScrollPage {
    position: fixed;
    bottom:20px;
    right: 10px;
}

/* ORDER VIEW */

.orders_lists {
    width: 99%;
    border-bottom: 1px solid rgb(231, 231, 231);
    background-color: white;
    margin:0 auto 0 auto;
    font-size: 14pt;
}
.orders_lists:hover {
    background-color: #dbfff0;
}

.orders_lists li {
    display: inline-block;
    vertical-align: middle;
    min-height: 40px;
    position: relative;
    padding: 10px 0 0 0;
}
.orders_lists li:nth-child(1) {
    width: 10%;
    text-align: center;
    font-weight:bold;
}
.orders_lists li:nth-child(2) {
    width: 20%;
}
.orders_lists li:nth-child(3) {
    width: 25%;
    text-align: center;
}
.orders_lists li:nth-child(4) {
    text-align: right;
    width: 10%;
}
.orders_lists li:nth-child(5) {
    text-align: center;
    width: 10%;
}
.orders_lists li:nth-child(6) {
    width: 20%;
}
.orders_lists li:nth-child(6) .statusOrder{
    color: #444444;
}



.orders_lists li .duplicate {
    width: 30px; height: auto;
    position: absolute;
    left:-20px;
    opacity: 0.5;
}
.orders_lists li .csv {
    width: 25px; height: auto;
    /* position: absolute;
    left:90px; top:15px; */
}
.orders_lists input[name="DO_Piece"] {
    border:1px solid rgb(222, 222, 222);
    margin: 5px auto 5px auto;
    padding: 5px;
    width:75px;
    font-size: 14pt;
}

.orders_lists input[name="DO_Piece"]::placeholder {
    color: #d0d0d0;
}
.orders_lists li .duplicate:hover {
    opacity: 1; 
}

.orders_lists a.edit {
    font-size: 12pt;
}

.orders_lists .Intitule {
    color: #00a2ff;
}
.orders_lists .E_ValFrais {
    font-size: 12pt;
}
.orders_lists i.E_ValFrais {
    color: #7a96a6;
}

.orders_lists li .NoRead {
    color: red;
}
.orders_lists li .frais, .orders_lists li .preco {
    position: absolute;
}
.orders_lists li .frais {
    width: 30px; height: auto;
    top:-5px; right: -35px;
}
.orders_lists li .preco {
    width: 55px; height: auto;
    top:30px; right: -45px;
}
.orders_lists li .LinkEdit {
    font-size: 12pt;
    color: rgb(255, 111, 0);
}

.orders_lists .sage_DO_Piece {
    border:1px solid #008e53;
    background-color: #c5ffea;
    border-radius: 5px;
    padding: 2px;
    font-size:12pt;
}

.order_search .LinkEdit {
    text-align: center;
    font-size: 20pt;
    width: 100%;
    padding: 5px;
}

ul.title_list {
    color: black;
}
ul.title_list li:nth-child(7) {
    color: black;
}

.TotalOrder b.free, .current_order b.free {
    color: #008e53;
}

.confirm_sage {
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
	background-color:#FFFFFF;
	position:absolute;
	width:600px; min-height:250px;
	margin:0 auto 0 -250px;
	left:50%; top:15%;
	padding:25px;
	border-radius:5px;
	display:none;
}
.confirm_sage div {
	position:relative;
}
.confirm_sage h3 {
	text-align:center;
}
.confirm_sage h3 b {
	color:red;
}
.confirm_sage p {
	padding:20px;
	font-size:14pt;
	text-align:center;
}

.close, .closeIMG {
	width:25px; height:25px;
	border-radius:50%;
	text-align:center;
	background-color:#FFFFFF;
	border:2px solid #000000;
	position:absolute;
	top:-30px; right:-30px;
	font-size:14pt;
	font-weight:bold;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}


/*
    Catalogue
*/

.catalog {
    text-align: center;
}

.catalog h2 {
    border-bottom:1px solid rgb(141, 141, 141);
    width:100%;
    font-size: 28pt;
    text-align: center;
}

.catalog .gallery {
    height: 500px;
}

.articles_catalog label {
    min-height: 450px;
    display: inline-block;
}

.articles_catalog .article li:nth-child(1), .articles_catalog .article li:nth-child(2) {
    background-color: white;
    height: 200px;
    /* position: absolute;
    top:-20px;
    left:0; */
}
.articles_catalog .article li:nth-child(1) {
    display: none;
}
.articles_catalog .article li:nth-child(2) {
    width:99%;
    text-align: center;
}
.articles_catalog .article li:nth-child(2) .photo {
    left: 0; top:30px;
    width: 100%; height: auto;
}
.articles_catalog .article li:nth-child(2) .photoBig {
    width: 500px; height: 500px;
    background-color: white;
}
.articles_catalog .photoBig {
    left: 50%; top:150px;
    margin: 0 0 0 -250px;
    padding:20px;
    position: fixed;
    z-index: 999;
    -webkit-box-shadow: 2px 2px 2px 5px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.15);
    vertical-align:middle;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: white;
}

.articles_catalog .article li:nth-child(2) .photoBig img {
    width: 100%; height: 100%;

}
.articles_catalog .article li:nth-child(3) {
    width: 100%;
    text-align: center;
}
.articles_catalog .article li:nth-child(3) #graphic {
    top:-30px;
}
.articles_catalog .article li:nth-child(4) {
    width: 100%;
    height: 70px;

}
.articles_catalog .article li:nth-child(4) input[name='qty']{
    height: 30%;
}

.articles_catalog .article {
    width: 250px; height: 380px;
    margin: 20px 15px 65px 15px;
    vertical-align: top;
    background-color: white;
    position: relative;
    display: inline-block;
}
.articles_catalog .article .AR_Ref {
    background-color:white;
    position: absolute;
    left:0; top:-20px;
    width:40%;
    border-bottom: 1px solid rgb(234, 234, 234);
}
.articles_catalog .article .inOrder {
    background-color:white;
    position: absolute;
    left:0px; top:5px;
    width: 55%;
    border-bottom: 1px solid rgb(234, 234, 234);
}
.articles_catalog .article .inOrder img {
    width: 20px;
    vertical-align: middle;
}
.articles_catalog button.AddLastOrder {
    padding: 5px 20px 5px 20px;
    margin:30px auto 0 -30px;
    z-index: 999;
    background-color: white;
    color:black;
    font-size: 12pt;
    border-radius: 0 0 10px 10px;
    border-top:none;
    border-right:1px solid rgb(231, 231, 231);
    border-bottom:1px solid rgb(231, 231, 231);
    border-left:1px solid rgb(231, 231, 231);
}
.articles_catalog button.AddLastOrder:hover {
    background-color: black;
    color: white;
    border:1px solid white;
}



.articles_catalog .article li:nth-child(5), .articles_catalog .article li:nth-child(7) {
    width:45%; height: 20px;
    vertical-align: top;
    font-size: 16pt;
    text-align: center;
}
.articles_catalog .article li:nth-child(5) i.auKg {
    display: inline-block;
    width: 40px;
    text-align: left;
    font-size: 12pt;
}

.articles_catalog .article .auKg, .articles_catalog .new_article .auKg {
    display: inline-block;
}
.articles_catalog .article .ref {
    width: 80px; height: 25px;
    background-color: white;
    position: absolute;
    left:0; top:-25px;
    border-bottom:1px solid rgb(234, 234, 234);
    font-size: 14pt;
}
.articles_catalog .article .title {
    display: inline-block;
    width: 98%;
}

.articles_catalog ul.article li img.frais {
    left: -5px; top:30px;
}
.articles_catalog ul.article li img.preco {
    left: 120px; top:-25px;
}

.articles_catalog .article .photo {
    width: 100%; height: 200px;
    text-align: center;
}
.articles_catalog .portrait {
    width: auto; height: 180px;
}
.articles_catalog .landscape {
    width: 180px; height: auto;
}

/**/

.articles_catalog .article .top_heart {
    background-image: url('/images/ui/icon_top_heart.png');
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 200%;
    width:25px; height:25px;
    position: absolute;
    right: -5px; top:-15px;
    opacity: 0.4;
}
.articles_catalog .article .top_heart_check {
    background-position: right top;
    opacity: 1;
}

ul.famille {
    text-align: center;
}
ul.famille li {
    display: inline-block;
    margin:5px;
}
ul.famille li span {
    font-size: 16pt;
    border:1px solid white;
    padding: 3px; margin: 3px 2px 3px 2px;
    border-radius: 5px;
}
ul.famille li span:hover {
    cursor: pointer;
    background-color: #000;
    color: white;
}

ul.famille li span.preco {
    color: #18aa75;
}
ul.famille li span.preco:hover {
    background-color: #18aa75;
    color:white;
}

.familles {
    margin:0 0 20px 0;
    text-align: center;
}
.catalog h1 {
    font-size: 16pt;
    display: inline-block;
    margin:0 10px 10px 10px;
    border-right: #757575;
}
.catalog h1:hover {
    color: #757575;
    border-bottom: 1px solid orange;
}
.catalog h3 {
    margin:10px 0 10px 0;
    border-top:1px solid rgb(217, 217, 217);
}

/**/

/* COMMENT */

.comments {
    text-align: center;
}
.comments textarea {
    width: 80%;
    min-height:100px;
    margin: 20px auto 20px auto;
    padding: 10px;
    font-size: 14pt;
    display: block;
    border-radius: 10px;
    border:none;
}
.comments .comment {
    background-color: white;
    padding: 30px 20px 50px 20px;
    margin: 40px auto 40px auto;
    width: 70%;
    position: relative;
    border-radius: 10px;
    font-size: 14pt;
}
.comments .comment_left {
    text-align: left;
}
.comments .comment_right {
    text-align: right;
}
.comments .comment span {
    background-color: white;
    position: absolute;
    font-size: 14pt;
    padding: 5px 10px 5px 10px;
    top:-15px;
}
.comments .comment_left span {
    left: 20px;
    color:cadetblue;
}
.comments .comment_right span {
    right: 20px;
    color: turquoise;
    border-radius: 5px;
}
.comments .attach {
    position: absolute;
    bottom: -15px; 
    width: 25px; height: auto;
}
.comments .comment_left .attach {
    left: 10px;
}
.comments .comment_right .attach {
    right: 10px;
}

.comments .attach_file {
    position: absolute;
    bottom: -25px;
}
.comments .attach_file img {
    width: 25px; height: auto;
    margin: 0 10px 0 10px;
    -webkit-box-shadow: 2px 2px 2px 5px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.15);
}
.comments .comment_left .attach_file {
    left: 40px;
}
.comments .comment_right .attach_file {
    right: 40px;
}
.comment input[type='file'] {
    display: none;
}

/* ADDRESS */

.order .edit_address {
    background-color: white;
    display: none;
}
.edit_address li {
    width: 45%;
    margin:5px;
    padding:5px;
    display: inline-block;
    background-color: rgb(244, 244, 244);
    text-align: left;
    border-radius: 5px;
}
.edit_address li input {
    float: right;
    width: 60%;
    height: 25px;
    border-radius: 5px;
    font-size: 14pt;
    color: black;
    padding: 5px;
}

.edit_address li.place {
    width: 100%;
    background: none;
    text-align: center;
}
.edit_address li.place .mapboxgl-ctrl {
    width: 98%;
}
.edit_address .mapboxgl-ctrl-geocoder {
    width: 100%;
    max-width: 100%;
}
.edit_address li.place input {
    float: none;
    border:1px solid #dedede;
    width: 98%; height: 30px;
    font-size: 14pt;
    padding-left: 30px;
}
.edit_address .save {
    background: none;
    text-align: center;
}
 #map{
    width: 80%;
    margin: 10px auto 10px auto;
}

.mapboxgl-ctrl-geocoder--suggestion-title, .mapboxgl-ctrl-geocoder--suggestion-address {
    font-size: 14pt;
}

/**/

.Address label {
    width: 30%; min-height: 220px;
    padding: 15px 0 15px 50px;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
    border:1px solid rgb(205, 205, 205);
    font-size: 14pt;
}
.Address label ul li {
    width: 49%;
    display: inline-block;
}

.Address label h3 {
    width: 100px;
    color: red;
}

.Address label ul li:last-child {
    font-weight: bold;
}

.Address .AddressChecked {
    background-color: rgb(231, 255, 233);
    border-radius: 5px;
    border:1px solid rgb(152, 255, 183);
    background-image: url('/images/ui/btn_valided.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 8%;
}

/* RECHERCHE */

.resultats {
    margin: 30px auto 30px auto;
    display: none;
    -webkit-box-shadow: 3px 3px 3px 6px rgba(0,0,0,0.15);
	box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.15);
    border-radius: 10px;
}
.resultats h2 {
    padding: 0 auto 0 30px;
    color: rgb(163, 217, 69);
    width: 100%;
}

.limit_results {

}
 .limit_results label {
    width:30%;
    display: inline-block;
}
.limit_results input[type='checkbox'] {
    background: none;
    margin:5px;
    border:none;
}

.resultats .article {
    background-color:rgb(241, 255, 219);
    border-radius: 10px;
}

/**/

.tips {
    margin: 15px 0 15px 0;
    padding: 10px 0 10px 0;
    font-size: 12pt;
    width: 100%;
    min-height: 50px;
    border-top:1px solid gray;
}
.tips img {
    width: auto; height: 30px;
    margin: 0 0 0 30px;
    text-align: center;
}
.tips img:nth-child(2) {
    width: 80px; height: auto;
}

/* hourly */

.agenda_delivery {
    margin:15px auto 15px auto;
    width: 95%;
    background-color: white;
}
.agenda_delivery h2 {
    text-align: center;
    background-color: white;
    padding: 5px 0 5px 0;
    margin-bottom: 20px;
}
.agenda_delivery .day span {
    background: none;
}
.agenda_delivery ul {
    margin: 0 auto 0 auto;
    width: 100%;
    border:1px solid #C5C5C5;
}
.agenda_delivery ul li {
    display: inline-block;
    width: 14%;
    vertical-align: top;
    font-size: 14pt;
    padding: 10px;
}
.agenda_delivery ul li:hover {
    background-color:rgb(243, 243, 243);
}
.agenda_delivery ul li b {
    font-size: 16pt;
}


/* New client */

.createlogin {
    font-size:14pt;
}
.createlogin .step {
    text-align: center;
    color: #dbdbdb;
}
.createlogin .require {
    color:red;
    padding: 0 5px 0 0;
}
.createlogin .agenda_delivery ul li {
    width: 15%;
    padding: 5px;
    text-align: left;
}
.createlogin .agenda_delivery ul li div:hover {
    background-color: rgb(240, 240, 240);
}
.createlogin .agenda_delivery ul li span {
    margin:5px;
    padding: 0;
    width: 100%;
}
.agenda_delivery ul li div.day {
    width: 90%;
    padding:5px; margin:5px;
}

.createlogin .agenda_delivery ul li select {
    margin: 0 10px 0 0; padding: 0;
    float: right;
}

.createlogin input[type='checkbox'] {
    float: left;
    width:30px;
    height:30px;
    margin: 0 20px -5px 20px;
}

.createlogin .signature {
    height: 80px;
}
.createlogin .signature input {
    font-family: 'Satisfy', 'cursive';
    font-size: 26pt;
    background: white;
    border:2px dotted #C5C5C5;
    outline:none;
    height: 50px;
    text-align: center;
    float: right;
    margin: -15px 0 0 0;
}

/* */


/* ALERT */


.alert {
    margin:5px auto 5px auto;
    padding:10px;
    text-align:center;
    border-radius: 10px;
    font-size: 14pt;
    display: block;
    width:80%;
}
.error, input.error {
    background-color:#ffdfdf;
    color:#c42121;
}

.warning, input.warning {
    background-color:#fffeda;
    color:#a64200;
}

.confirm, input.confirm {
    background-color:#dbffea;
    color:black 
}

.info {
    background-color:#fff6a6;
    color:#0f0f0f; 

    -webkit-animation-name: color-transition;
	animation-name: color-transition;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@-webkit-keyframes info {
	0% {
		background-color: #fff6a6;
		border-color: #178ea6;
	}
	100% {
		background-color: #ffeb3b;
		border-color: #0b5e6e;
	}
}

@keyframes color-transition {
    0% {
		background-color: #fffbdb;
		border-color: #178ea6;
	}
	100% {
		background-color: #fff6a6;
		border-color: #0b5e6e;
	}
}

.anim_valided {
    -webkit-animation-name: anim_valided-transition;
	animation-name: anim_valided-transition;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count:1;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@-webkit-keyframes anim_valided {
	0% {
		background-color: #3fe1bb;
	}
	100% {
		background-color: #FFFFFF;
	}
}
@keyframes anim_valided-transition {
    0% {
		background-color: #3fe1bb;
	}
	100% {
		background-color: #FFFFFF;
	}
}


@media screen and (min-width: 1281px) {

    select[name='custom_CT_Num'] {
        font-size: 14pt;
        padding: 2px;
    }

    .agenda_delivery ul li span {
        display: inline-block;
    }
}

/* 1280 X 1024 */
  
@media screen and (min-width: 1025px) and (max-width: 1280px) {

    #App {
        width: 95%;
    }
    .a.btn-bk, a.btn-ok, a.btn-red, a.btn-or {
        font-size: 11pt;
        padding: 5px;
        margin:3px;
    }

    select[name='custom_CT_Num'] {
        font-size: 14pt;
        padding: 2px;
        width:100%;
    }

    .agenda_delivery ul li span {
        display: block;
    }

    .order .article li {
        font-size: 12pt;
        min-height: 30px;
        padding-top: 10px;
    }

    .orders_lists li:nth-child(2) {
        width: 30%;
    }
    .orders_lists li:nth-child(3) {
        width: 15%;
    }

    .article .AR_UniteVen {
        display: block;
    }
    .order .article li:nth-child(4) {
        padding-top: 0;
    }
    #graphic {
        font-size: 10pt;
        top:5px;
    }
    .box {
        margin-top:-5px;
    }
    .box i {
        font-size: 10pt;
    }
    .agenda_delivery ul li span select {
        float: right;
    }
}

/* 1024 X 768 */
  
  @media screen and (min-width: 800px) and (max-width: 1024px) {

    .alert {
        font-size: 14pt;
    }

    .btn-ok, .btn-bk {
        font-size: 10pt;
    }

    #App {
      width: 98%;
    }
    #App .content {
      width: 100%;
      margin: 0;
    }

    .step {
        width: 70%;
        margin: 0 auto 0 auto;
    }
    .step li {
        width: 32%;
    }


    .a.btn-bk, a.btn-ok, a.btn-red, a.btn-or {
        font-size: 11pt;
        padding: 5px;
        margin:3px;
    }

    .order .order_search {
        width:99%;
    }
    
    .order .article li {
        font-size: 14pt;
    }
    .order .article li:nth-child(4) {
        padding: 10px 0;
    } 
    .order .article li i.AR_UniteVen {
        display: block;
        font-size: 12pt;
    }

    .order ul.order_search {
      margin: 20px auto 20px auto; padding: 0;
      width: 95%;
    }
    .order ul.order_search li {
      padding: 5px;
    }
    .order .article li img.frais {
        width: 30px;
        left: -20px;
    }
    .order .article li img.preco {
        width: 60px;
        top:10%;
    }


    .TotalOrder li, .TotalHT {
        font-size: 18pt;
    }
    .TotalOrder li, .TotalHT b {
        font-size: 18pt;
        font-weight: bold;
    }

    .agenda_delivery ul {
        width: 100%;
    }
    .agenda_delivery ul li {
        width: 13.5%;
        vertical-align: top;
        font-size: 12pt;
    }
    .agenda_delivery ul li div {
        padding: 10px;
    }
    .agenda_delivery ul li select {
        font-size: 10pt;
    }
    .agenda_delivery ul li span {
        display: block;
        width: 100%;
        margin:2px 0 2px 0;
    }
    .agenda_delivery ul li span select {
        float: right;
    }
    .agenda_delivery p {
        text-align:center; width:100%; padding-bottom:15px;
    }

    .Address label {
        width: 25%;
    }

}
  /* Mobile */
  
  @media screen and (min-width: 320px) and (max-width: 450px) {
    
    
    #App {
        width: 98%;
        margin:5px auto 0 auto;
      }

    .Nav li:first-child {
        text-align: left;
    }

    .Nav li .logged {
        padding: 0 10px 0 0;
    }

    .Nav li .mob {
        display: inline-block;
        font-size: 16pt;
    }
    .Nav li a {
        font-size: 12pt;
    }

    .Nav li .logo {
        width:35px; height:auto;
        display: block;
    }

    .Nav li .sub, ul.Nav li:last-child .logout {
        display:none;
    }
  }

  /* Mobile (petit) */
@media screen and (min-width: 320px) {
    /* Styles spécifiques pour les petits mobiles */
    .login {
        width:100%;
        position: relative;
        left: 0; top:0;
        margin: 0;
    }
    .login .connect {
        width: 100%;
        float: none;
    }
}

/* Mobile (moyen) */
@media screen and (min-width: 481px) {
    /* Styles pour les mobiles plus larges */
    .login {
        width:100%;
        position: relative;
        left: 0; top:0;
        margin: 0;
    }
    .login .connect {
        width: 100%;
        float: none;
    }
}

/* Tablette (portrait) */
@media screen and (min-width: 768px) {
    /* Styles pour tablettes en mode portrait */
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tablette (paysage) et petit desktop */
@media screen and (min-width: 1024px) {
    /* Styles pour tablettes en mode paysage et petits écrans desktop */
    .client-list-item {
        max-width: 50%;
    }
}