/*
 PPV5 - client - Ange Colonna le 18 mai 2016 .
Fichier propriétaire :  Kalistecom @Group PUBLIKA
Contact : lionel@publika.fr / ange@publika.fr
*/

/** BON DE COMMANDE **/
.smaller{font-size:13px; margin:0px;padding:0px;}
.bold{font-weight: bold;}
.uppercase{ text-transform: uppercase;}
.container_commande h1{ font-family: Marvel;padding-top: 15px; 
                       border-bottom:#f0f0f0 1px solid; 
                       margin-bottom:15px;}
.row_premier{margin-top: 40px;margin-bottom: 15px; border-bottom: #f1f1f1 1px solid;padding-bottom: 15px}
.row_premier > .text-right{ font-weight: bold;text-transform: uppercase;}
.btn_validation{transition-duration:1s; margin-top:10px;text-align:center; border-radius: 5px; color:#fff; border:none; display: block; width: inherit; padding:5px 5px; background-color:green;}
.btn_validation:hover{color:#000;background-color:#7FDD4C;}
.btn_refus{transition-duration:1s; margin-top:10px;text-align:center; 
          border-radius: 5px; color:#fff; border:none; display: block; width: inherit; 
          padding:5px 5px; background-color:red;}
.btn_refus:hover{color:#fff;background-color:#993300;}
.input-sm{width:45px;}
.btn-xs{padding: .175rem .35rem;font-size: 0.7rem;}
/** CUSTOMER ADRESSES **/
.container_adresse p{width:100%;}
.container_adresse label{width:150px;}
.container_adresse.adresse-modal label{ width: auto; font: 20px Arial," sans-serif"}

/** ======= **/
/** CUSTOMER AREA **/
.container_customer{ background-color: #fff; max-width: 1110px; width: 100%;}
h1.h1espace_clt{font-family: Marvel;}
.fulllargeur{width:100%;}
.row_inside p{margin:0px;font-size: 1em;}
.row_inside2 .btn01{display: block;text-align: center; width:100%;background-color: #0795ca;color: #fff;border: none;padding:5px 5px;}
.row_listings{margin-top: 30px;padding-bottom: 30px;}
.row_listings h2{font-family: Marvel;}
ul.tabuleur li{cursor: pointer;list-style-type: none;display: block;}
ul.tabuleur li:hover{background: #f1f1f1 !important;}
/** FAVORIS **/
.row_item_favori img{ width:inherit;}
.row_item_favori{ margin-bottom :10px;}
.refref{ color:#c0c0c0;}
/** FICHE CUSTOMER**/
.container_customer_fiche{width:1024px;}

#kmodale .container_customer_fiche{width: 100%}

#kmodale .container_customer_fiche .col-lg-6{width: 100% !important; flex: 100%; max-width: inherit}

#kmodale .container_customer_fiche .col-lg-6 select{height: 58px; border: 1px solid #E0E0E0; width: 100%}

#kmodale .container_customer_fiche .row{ flex-direction: column}

#kmodale .container_customer_fiche  select { background-position: 97% center;}

.container_customer_fiche label{width:125px;}
.profilinfo label{text-align: right;padding-right: 10px;}
h2{color:var(--bleuclair-pfc);}
.js_tabselected{color: black;border-right: none;z-index: 10;background: #ffffff !important;position: relative;}

.profilmdp label{
display: bloc;
float: left;
text-align: right;
padding-right: 10px;
width:auto;
}



#inscriptionCustomer input, #inscriptionCustomer select{
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
background-color:#fff;
background-clip: padding-box;
border: 1px solid #ced4da;
    border-radius: .25rem;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

::placeholder{ opacity: 1}


button.boutonsubmit{
    transition: all 0.5s;
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 25px;
    background-color: rgba(7, 149, 202,0.3);
    color: rgb(7, 149, 202);
}

.kmodale{left:0; right: 0; margin: auto; max-width: 560px}

.col-lg-6 select#pays{width: 100%}


#inscriptionCustomer select option{
	color: #495057;
	font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}


.container_customer .col-lg-2 img{max-width: 100px; margin: auto}


/**container_inc_users_commande_liste**/
.container_inc_users_commande_liste input{width:100%}
.container_inc_users_commande_liste button.btn002{
    transition-duration: 1s;border: none;background: #ffd000;color: #000;width: 100%;text-align: center;padding: 20px;text-transform: uppercase;margin-top: 15px;
}

/** CONNEXION CUSTOMER **/
.container-connexion{
    text-align: center;
    margin-top: 100px;
    border-radius: 5px;
}
.input-group-addon {
                padding: 6px 12px;
                font-size: 14px;
                font-weight: 400;
                line-height: 1;
                color: #555;
                text-align: center;
                background-color: #eee;
                border: 1px solid #ccc;
                    border-right-color: rgb(204, 204, 204);
                    border-right-style: solid;
                    border-right-width: 1px;
                border-radius: 4px;
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
            }
            .input-group-addon, .input-group-btn {
                white-space: nowrap;
                vertical-align: middle;
            }
            .input-group-addon .fa{vertical-align: -moz-middle-with-baseline;}
            .input-group .form-control, .input-group-addon, .input-group-btn {
                display: table-cell;
            }

.in-left, .in-right{ background-color: #F4F4EF; border-radius: 5px; overflow: hidden;  font: 15px/25px Arial," sans-serif"; color:#000000}

.titre-etape-commande{ background-color: #000000; color: #fff; font: 16px "futura-bold"; padding:  15px 25px; overflow: hidden; border-radius: 5px 5px 0px 0px; margin-top: 25px;}

.titre-etape-commande.titre-etape-commande-1{margin-top: 0}

.in-bg-white{ background-color: #fff}

.in-left h1, .in-left h2, .principale_container .titre-h2{ font: 16px"futura-bold"; color:#000000; margin: 0 0 40px 0; text-transform: uppercase; padding-top: 0}

table thead tr{background-color: #F4F4EF; background-color: #000000; color: #fff; font: 16px "futura-bold"; padding:  15px 25px; overflow: hidden; border-radius: 5px 5px 0px 0px;}

table thead tr, table thead tr th{ border: none}

.container.containercat {
    max-width: 1270px;
    width: 100%;
}

.containercat, .containercat a{font: 13px Arial," sans-serif"; color: #343434;}

.containercat{padding: 22px 0}

.profil-top{display: flex;  margin-top: 16px; }

.logo-profil{ width: 149px; height:  149px; border-radius: 149px; padding:  0 15px; margin-right: 48px}

.btn-bloc-cpte a{ display: block;  width:  100%; padding: 11px 25px; border-radius: 5px; border: 1px solid var(bleuclair-pfc); margin-bottom: 7px; text-transform: uppercase; font-size:  16px; text-align: center; position: relative;}

.btn-bloc-cpte a span{ position: absolute;  left: 25px; top: 16px }

.btn-bloc-cpte a:first-child{ background-color: var(--bleu-pfc); border-color: var(--bleu-pfc); color: #fff }

.btn-bloc-cpte a:first-child span:before, .btn-bloc-cpte a:nth-child(2) span:before{color: #fff}

.btn-bloc-cpte a:nth-child(2){ background-color: var(--bleuclair-pfc); border-color: var(--bleuclair-pfc); color: #fff}

.btn-bloc-cpte a:last-child{ background-color: transparent ; border-color: var(--bleuclair-pfc); color: var(--bleuclair-pfc)}

.btn-bloc-cpte a:last-child span:before{color: var(--bleuclair-pfc)}

.account-detail-bloc label{ font: bold 15px  Arial," sans-serif"; color: var(--bleuclair-pfc); width:  184px; margin-bottom: 0; text-align: left}

.account-detail-bloc{font: bold 15px  Arial," sans-serif"; color: #000000;}

.btn-bloc-cpte{margin-left: auto; max-width: 342px; width:  100%;}

.line-account{display: flex; align-items: flex-start; margin-bottom:  20px}

.icon-shut_down:before {
  content: "\e92f";
  color: var(--bleuclair-pfc);
  font-family: "icomoon"
}
.icon-edit:before {
  content: "\e930";
  color: #fff;
  font-family: "icomoon"

}
.icon-lock_open:before {
  content: "\e931";
  color: #fff;
  font-family: "icomoon"
}

.icon-address:before {
  content: "\e932";
  color: #000000;
}
.icon-love:before {
  content: "\e933";
  color: var(--bleuclair-pfc);
}
.icon-database_system:before {
  content: "\e934";
  color: #000000;
}

.outer-tabulation{ width: 100%; max-width: 364px}

.content-tab{ width: 100%; max-width: 744px; border-radius:  5px; background-color: #F4F4EF; overflow: hidden; padding: 25px 30px 23px 30px}

.outer-tabulation li a{ font: 16px"futura-bold"; color:#000000; text-transform: uppercase; display: flex; background-color:#fff; padding: 16px 20px}

.outer-tabulation li a:hover, .outer-tabulation li.selected a, .outer-tabulation li a.selected, .outer-tabulation li.active a, .outer-tabulation li a.active, .outer-tabulation li.js_tabselected a{ background-color: #F4F4EF; color: var(--bleuclair-pfc) }

.outer-tabulation li a span[class^="icon-"]:before{color:#000000; font-size: 20px}

.outer-tabulation li a span.icon-love:before{font-size:18px}

.outer-tabulation li a span[class^="icon-"]{margin-right: 18px}

.outer-tabulation li a:hover span:before, .outer-tabulation li.selected a span:before, .outer-tabulation li a.selected span:before, .outer-tabulation li.active a span:before, .outer-tabulation li a.active span:before, .outer-tabulation li.js_tabselected a span:before{ color: var(--bleuclair-pfc)}

.content-tab h2{ font: 16px "futura-bold"; color: #000000; margin-bottom:  44px}


.content-tab table{font: 15px  Arial," sans-serif"; color: #000000; }

.content-tab table td{padding: 25px 20px}

.content-tab .container_customers_liste table td{padding: .75rem}

.content-tab table tr{ border-bottom: 1px solid #DEDEDE ; display:  flex; justify-content: space-between; align-items:  center}

.edit-td{ width: 118px; display: flex; justify-content: center; align-items:  center}

.edit-td a{margin: auto 10px;}

.edit-td span:before{ font-size: 20px}

.icon-trash:before {
  content: "\e935";
  color: #de465d;
}

.content-tab table .icon-edit:before{ color: var(--bleuclair-pfc)}

.content-tab table td{ border-top: none}

.link-adress{ font-size: 16px; color: var(--bleuclair-pfc); padding: 12px 0; display: block;}

.link-adress:hover{color: var(--bleu-pfc)}

.link-adress i{display: inline-block; border: 1px solid var(--bleuclair-pfc); border-radius: 20px; width: 20px; height: 20px; text-align: center; font-size: 11px; line-height: 19px;}

.content-tab table{background-color:#fff; overflow: hidden; margin-bottom: 0; font-family: 'futura';}

.col-largeur-link{border-radius: 0 0 5px 5px; background-color:#fff; margin-bottom: 20px}

/*#kmodale{top: 50px !important}*/

#kmodale ~ body{ filter: blur(8px)}

#kmodale h3{ font: 24px "futura-bold"; color: var(--bleu-pfc); margin-bottom: 50px; text-transform: uppercase}

#kmodale input, .value-contry{ height: 58px; border: 1px solid #E0E0E0; margin-bottom: 30px}

.bloc-pop label, .kmodale label{ margin-bottom: 16px; color:#555555; font: bold 20px  Arial," sans-serif";  text-align: left}

#kmodale{padding: 40px 15px; border-radius: 8px}

button, button#js_changemdp, #kmodale button{ background-color: var(--bleu-pfc); color:#fff; text-transform: uppercase; font-size: 16px; padding: 11px 20px; border-radius: 5px}

button#js_changemdp span{margin-right: 20px}

.btn-pop a{ color: var(--bleuclair-pfc); font-size: 18px; text-decoration: none}

.btn-pop a:hover{color: var(--bleu-pfc); text-decoration:  none}

.btn-pop{color: #555555; font-size: 18px}

.adresse-modal .btn-pop{margin-top: 26px}

#kmodale select{ -moz-appearance: none; -webkit-appearance: none; background:  url(' data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjcxMzdBQkMzNjM2MTFFQkE2QzlENTY2RUVGNkQ3RjEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjcxMzdBQkQzNjM2MTFFQkE2QzlENTY2RUVGNkQ3RjEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNzEzN0FCQTM2MzYxMUVCQTZDOUQ1NjZFRUY2RDdGMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCNzEzN0FCQjM2MzYxMUVCQTZDOUQ1NjZFRUY2RDdGMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuXSLCQAAAB4SURBVHjaYmSfeuoCAwODPgNx4AITiGAgHlwEaSgAMYhR/CPLNIEJSHwAchwIaLoIVcPA+P//f7AIx7TTAkDqARDzoyl+CMQGUIMZmGCiSDZ9RFIMYgfAFKPYAANAmwyA1AEo1wGoGCVQMDRANYFs+oCuGAQAAgwAVFUuDHjpoKAAAAAASUVORK5CYII=') right center no-repeat; border: none; cursor:  pointer}

.submit-adress{ width: 100%; max-width:  360px; margin: auto}

.value-contry{display: flex; padding: .375rem .75rem; align-items:  center; border-radius: 5px}

.row_item_favori{background-color: #fff; border-radius:  5px; padding: 25px}

.col-img{padding: 0 30px 0 0}

.col-img img{ width: 100px; height: auto}

.titre-product-favoris{font: bold 16px  Arial," sans-serif"; color:#000; margin-bottom: 9px}

.short-desc-favoris{ color: #707070; font-size:  14px}

.price-favoris{ color: var(--bleuclair-pfc); font: bold 20px  Arial," sans-serif" }

.refref{font: bold 12px Arial," sans-serif"; color: #969696}

.btn-favoris{ margin-left: auto}

.col-text-fav{max-width: 296px; width: 100% }

.btn-favoris a{ display: block; width: 100%; max-width:154px; border-radius: 5px; font-size: 14px; color: var(--bleuclair-pfc); background-color: #F4F4EF; padding: 8px 10px; margin-bottom:  5px}

.btn-favoris a.add-cart-favoris{ background-color: var(--bleuclair-pfc); color: #fff !important}

.row0101{ background-color:#000000; border-radius: 5px 5px 0 0; color:#fff; font-size: 14px; padding: 12px 0; width:  100%}

.customer-name, .command-id{ font: 14px "futura-bold"}

.produittipe{ text-transform:  uppercase; color: var(--bleu-pfc); font: 15px"futura-bold"; max-width:  239px }

.produitdetail div, .produitdetail a{ padding:  6px 10px; border-radius: 17px; background-color: var(--bleuclair-pfc); color: #fff; font-size: 14px; display:  inline-block}

.produitdetail div.boutonOrange{ background-color: #6CA2D8}

.produitdetail div.boutonRouge{ background-color: #DE465D}

.produitdetail div.boutonVert{background-color: var(--bleuclair-pfc)}

.produitdetail{margin-left: auto; text-align: center}

.row0201{ width: 100%; align-items:  center; padding:  20px; border-bottom: 1px solid #DEDEDE; background-color: #fff}

.row0201:last-child{ border-bottom: none}

.teteCde{padding: 0 20px}

.command-id span{ font: 14px "futura"}

.produitdetail a{ min-width: 150px; background-color: #F4F4EF; color: var(--bleuclair-pfc)}

.produitdetail div{ min-width: 195px; position:  relative; text-align:  center; padding-left: 30px}

.boutonOrange{background-color: #6CA2D8; position: relative}

.boutonOrange:before{ content: "\e937";  color: #fff; font-family: "icomoon"}

.boutonVert{background-color: var(--bleuclair-pfc)}

.boutonVert:before{ content: "\e939"; color: #fff; font-family: "icomoon"} 

.boutonRouge{background-color: #DE465D}

.boutonRouge:before{ content: "\e938"; color: #fff; font-family: "icomoon"} 

.produitdetail div:before{ position:  absolute; left: 7px; top: 3px; font-size: 18px}

.content-tab #conteneur{ flex-direction: column}

.content-tab #conteneur h3{ font: 14px "futura-bold"; background-color: #000000; border-radius: 5px 5px 0px 0px; padding: 14px 20px; color: #FFFFFF; margin-bottom: 0}

.full-large-adress{margin-bottom: 20px}

.bydefault{ display:  inline-block; background-color: var(--bleuclair-pfc); color: #fff; font-size: 14px; border-radius: 17px; padding: 9px 15px}

.spanradioliv  label{
  color: #000;
  font-size: 14px;
}

.spanradioliv label, .spanradioliv input[type="radio"]{ display: inline-block; vertical-align: middle; width: auto}

.spanradioliv label{position: relative; top: 3px}

.spanradioliv input{ width: auto; position:  relative; top: -3px; margin-right: 15px}

.bydefault span.icon-CIRCLE---OK{ vertical-align: middle; margin-right:  15px}

.adress-value{ max-width: 340px; width: 100%}

.tabuleur{position: relative; z-index: 0}

.recap-command-table{margin-top: 50px; margin-left: 15px; margin-right: 15px; background-color: #F4F4EF; border-radius: 5px;}

.recap-command-table .col-lg-12{ padding: 20px;}

.recap-command-table table tbody{ background-color: #fff}

.outer-tabulation li#js_favoris a span{margin-right: 13px}

#kmodale .adresse-modal input, .adresse-modal .value-contry{margin-bottom: 19px}

.content-tab .alert.alert-danger{background-color:#000000; color: #FFFFFF; border-color: #000000; font-family: 'futura-bold'}

.container_customers_liste{overflow-x: scroll}

.container_customers_liste table{ width: 1070px}

.content-tab .container_customers_liste table tr, .content-tab table.table-log-user tr{ border: none; display: inherit}

.content-tab table.table-log-user tr{ display: table-row}

.content-tab .container_customers_liste table tr{padding: 15px 20px}

.content-tab .container_customers_liste table tr.thead-tr{ font-family: "futura-bold"; font-size:18px; line-height: 27px; background-color: #000000; border-radius: 5px 5px 0px 0px; color: #FFFFFF; margin-bottom: 0;}

.edit-line-table span:before{color: var(--bleuclair-pfc)}

.row-select-log, .container_inc_users_commande_liste .row{margin-left: -15px; margin-right: -15px}


@media(max-width: 1140px){
	.content-tab{max-width: inherit}
}

@media(max-width:992px){
	.profil-top{ flex-direction: column; align-items:  center}
	.btn-bloc-cpte{margin-left: inherit}
	.logo-profil{margin-right: inherit; margin-bottom: 40px}
	.account-detail-bloc{width: 100%; margin-bottom: 5px}
	.content-tab, .outer-tabulation{max-width: inherit}
	ul.tabuleur li{display: inline-block; vertical-align: middle}
	.outer-tabulation li a span{display: none}
	.recap-command-table .col-lg-12{padding: 0 15px}
}

@media(max-width: 768px){
	table.table thead, .spanradioliv label, .text-default{ display:none}
	table.table tr{ display: flex; flex-wrap: wrap; align-items:center; }
	table.table tr td{ width:100%; border: none; text-align: center;}
	table.table tr td[class^="tot"]{ width: 100%; text-align: center; font: 18px "futura-bold"; color: var(--bleuclair-pfc)}
	table.table tr:nth-child(odd){ background-color:#F4F4EF}
	.bydefault span.icon-CIRCLE---OK, .spanradioliv input{margin-right: inherit}
	.bydefault {border-radius: 20px; padding: 10px;}
	.text-out{display: none}
	.table.table-adress tr td:nth-child(2){ text-align: center; width: 80px}
	.list-inline.tabuleur{margin-bottom:0}
	.btn-favoris{ width: 100%; display:  flex; margin-top: 25px}
	.btn-favoris a{ max-width: inherit; text-align: center; margin-bottom: 0; padding: 14px 10px}
	.btn-favoris a:first-child{ border-radius: 0 0 0 5px}
	.btn-favoris a:last-child{ border-radius: 0 0 5px 0}
	.row_item_favori{padding: 25px 0 0 0; margin-bottom: 20px}
	.col-img {  padding: 0 30px 0 25px;}
	.btn-pop{ flex-direction: column}
	.col-text-fav{max-width: 45%}
	.account-detail-bloc label{ width: 140px}
	.command-item-row{ flex-direction: column-reverse}
	.command-item-row .col-lg-5{margin-bottom: 15px}
	.recap-command-table table td{padding: 5px 15px}
	
}