@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root{
    --color-primary:  hsl( 14, 48%, 74%); --color-primary-light:  hsl( 29, 30%, 85%); --color-primary-dark:  hsl( 12, 46%, 55%); --color-primary-transparent:  hsla( 14, 48%, 74%, 0.75);
    --color-primary-lighter:hsl(26, 28%, 95%);
    --color-secondary:hsl(264, 16%, 51%); --color-secondary-light:hsl(264, 16%, 76%); --color-secondary-dark:hsl(264, 16%, 26%); --color-secondary-transparent:hsla(264, 16%, 51%, 0.75);

    --color-info:   hsl(219, 15%, 50%); --color-info-light:   hsl(219, 15%, 65%); --color-info-dark:   hsl(219, 15%, 25%); --color-info-transparent:   hsla(219, 15%, 50%, 0.75);
    --color-warning:hsl( 53, 48%, 74%); --color-warning-light:hsl( 53, 48%, 89%); --color-warning-dark:hsl( 53, 48%, 49%); --color-warning-transparent:hsla( 53, 48%, 74%, 0.75);
    --color-success:hsl(151, 18%, 52%); --color-success-light:hsl(151, 18%, 67%); --color-success-dark:hsl(151, 18%, 27%); --color-success-transparent:hsla(151, 18%, 52%, 0.75);
    --color-danger: hsl(355, 43%, 72%); --color-danger-light: hsl(355, 43%, 87%); --color-danger-dark: hsl(355, 43%, 47%); --color-danger-transparent: hsla(355, 43%, 72%, 0.75);

    --color-white:        #ffffff;
    --color-gray:         hsl(0, 0%, 50%); --color-gray-light:hsl(0, 0%, 75%); --color-gray-dark:hsl(0, 0%, 25%); --color-gray-transparent:hsla(0, 0%, 75%, 0.8);
    --color-black:        #000000;
    --color-text:         #1a1a1a;
    --color-text-medium:  #808080;
    --color-text-light:   #a0a0a0;
    --color-text-lighter: #cccccc;
    --color-text-lightest:#f0f0f0;
    --color-link:         var(--color-primary-dark);
    --color-link-hover:   var(--color-primary);

    --color-reassur-bg:   var(--color-primary-light);
    --color-reassur-text: var(--color-black);
    --color-footer-bg:    var(--color-primary);
    --color-footer-text:  var(--color-white);

    --font-family:'Assistant', sans-serif;
    --font-family-title:"Playfair Display", serif;
    --font-family-serif:"Playfair Display", serif;
}

/* balises html */
body{
    margin:0;
    padding:0;
    font-family:var(--font-family);
    font-size:14px;
    background:var(--color-white);
    color:var(--color-text);
}

a{
    color:var(--color-link);
}
a:hover,
a:focus{
    color:var(--color-link-hover);
}

::selection{
    background-color:var(--color-secondary);
    color:var(--color-white);
}
::-moz-selection{
    background-color:var(--color-secondary);
    color:var(--color-white);
}

/* couleurs des alertes, boutons, textes... standards de bootstrap */
.bg-primary{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white);}
.border-primary{border-color:var(--color-primary);}
.text-primary{color:var(--color-primary) !important;}
.text-primary:hover,
.text-primary:focus{color:var(--color-primary-dark) !important;}
.btn-primary{color:var(--color-black);background-color:var(--color-primary);border-color:var(--color-primary);}
.btn-primary:active,
.btn-primary.active,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.btn-primary:active:focus,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover{color:var(--color-white);background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus{color:var(--color-gray);background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);}
.alert-primary{color:var(--color-black);background-color:var(--color-primary-light);border-color:var(--color-primary);}
.badge-primary{background-color:var(--color-primary); border-color:var(--color-primary); color:var(--color-black);}

.btn-link{color:var(--color-link);font-weight:normal;border-radius:0;}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link.focus,
.btn-link:active:focus,
.btn-link:active,
.btn-link.active:hover,
.btn-link.active:focus,
.btn-link.active.focus,
.btn-link.active{border-color:transparent;}
.btn-link:hover,
.btn-link:focus{color:var(--color-primary-dark);text-decoration:none;background-color:transparent;}

.text-muted{color:var(--color-text-light);}

.label.bg-warning{
    background-color:var(--color-warning-dark);
    border-color:var(--color-warning-dark);
}

.bg-danger{
    background-color:var(--color-danger);
    border-color:var(--color-danger);
    color:var(--color-white);
}
.border-danger{
    border-color:var(--color-danger);
}
.text-danger{
    color:var(--color-danger) !important;
}
.text-danger:hover,
.text-danger:focus{
    color:var(--color-danger-dark) !important;
}
.btn-danger{
    color:var(--color-white);
    background-color:var(--color-danger);
    border-color:var(--color-danger);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.active:hover,
.btn-danger.active:focus,
.btn-danger.active.focus,
.btn-danger:active:focus,
.btn-danger:focus,
.btn-danger.focus{
    color:var(--color-white);
    background-color:var(--color-danger-dark);
    border-color:var(--color-danger-dark);
}
.alert-danger{
    color:var(--color-danger-dark) !important;
    background-color:var(--color-danger-light);
    border:2px solid var(--color-danger);
}
.badge-danger{
    background-color:var(--color-danger);
    border-color:var(--color-danger);
}

.bg-success{
    background-color:var(--color-success);
    border-color:var(--color-success);
    color:var(--color-white);
}
.border-success{
    border-color:var(--color-success);
}
.text-success{
    color:var(--color-success) !important;
}
.text-success:hover,
.text-success:focus{
    color:var(--color-success-dark) !important;
}
.btn-success{
    color:var(--color-black);
    background-color:var(--color-success);
    border:2px solid var(--color-success);
}
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.active:hover,
.btn-success.active:focus,
.btn-success.active.focus,
.btn-success:active:focus,
.btn-success:focus,
.btn-success.focus{
    color:var(--color-white);
    background-color:var(--color-success-dark);
    border-color:var(--color-success-dark);
}
.alert-success{
    color:var(--color-success-dark) !important;
    background-color:var(--color-success-light);
    border:3px solid var(--color-success);
}
.badge-danger{
    background-color:var(--color-success);
    border-color:var(--color-success);
}

.bg-warning{
    background-color:var(--color-warning);
    border-color:var(--color-warning);
    color:var(--color-black);
}
.border-warning{
    border-color:var(--color-warning);
}
.text-warning{
    color:var(--color-warning) !important;
}
.text-warning:hover,
.text-warning:focus{
    color:var(--color-warning-dark) !important;
}
.btn-warning{
    color:var(--color-black);
    background-color:var(--color-warning);
    border-color:var(--color-warning);
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.active:hover,
.btn-warning.active:focus,
.btn-warning.active.focus,
.btn-warning:active:focus,
.btn-warning:focus,
.btn-warning.focus{
    color:var(--color-white);
    background-color:var(--color-warning-dark);
    border-color:var(--color-warning-dark);
}
.alert-warning{
    color:var(--color-black) !important;
    background-color:var(--color-warning-light);
    border:2px solid var(--color-warning);
}
.alert-warning:hover{
    color:var(--color-black) !important;
}
.badge-danger{
    background-color:var(--color-warning);
    border-color:var(--color-warning);
}

.bg-info{
    background-color:var(--color-info);
    border-color:var(--color-info);
    color:var(--color-white);
}
.border-info{
    border-color:var(--color-info);
}
.text-info{
    color:var(--color-info) !important;
}
.text-info:hover,
.text-info:focus{
    color:var(--color-info-dark) !important;
}
.btn-info{
    color:var(--color-white);
    background-color:var(--color-info);
    border-color:var(--color-info);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.active:hover,
.btn-info.active:focus,
.btn-info.active.focus,
.btn-info:active:focus,
.btn-info:focus,
.btn-info.focus{
    color:var(--color-white);
    background-color:var(--color-info-dark);
    border-color:var(--color-info-dark);
}
.alert-info{
    color:var(--color-info-dark) !important;
    background-color:var(--color-info-light);
    border-color:var(--color-info);
}
.badge-danger{
    background-color:var(--color-info);
    border-color:var(--color-info);
}

.border-default{
    border-color:var(--color-primary);
}
.btn-default{
    color:var(--color-black);
    background-color:var(--color-primary);
    border-color:var(--color-primary);
}
.btn-default:hover,
.btn-default:active,
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus,
.btn-default.active.focus,
.btn-default:active:focus,
.btn-default:focus,
.btn-default.focus{
    color:var(--color-primary-light);
    background-color:var(--color-primary-dark);
    border-color:var(--color-primary-dark);
}

.btn-default a{
    color:var(--color-white);
}

.btn-dcs-grey{
    color:var(--color-white);
    background-color:var(--color-gray);
    border-color:var(--color-primary-dark);
}
.btn-dcs-grey:hover,
.btn-dcs-grey:active,
.btn-dcs-grey.active,
.btn-dcs-grey.active:hover,
.btn-dcs-grey.active:focus,
.btn-dcs-grey.active.focus,
.btn-dcs-grey:active:focus,
.btn-dcs-grey:focus,
.btn-dcs-grey.focus{
    color:var(--color-black);
    background-color:var(--color-primary);
    border-color:var(--color-primary-dark) !important;
}

.btn-dcs-grey a{
    color:var(--color-white);
}

/* structure */
#FullBody, #FullContainer{ /* Pour les pages en FullScreen */
    background:var(--color-text-lightest);
}
.SearchBody{
    background-image:none;
}
.navbar-inverse, .sidebar{
    background:var(--color-primary-light);
    border-color:var(--color-text-lightest);
    color:var(--color-black);
}
.navbar-inverse{
    background:var(--color-primary);
}
.navbar-inverse .navbar-nav > li > a{
    color:var(--color-black);
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus{
    color:var(--color-gray-dark);
    background-color:var(--color-primary-lighter);
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus{
    background-color:var(--color-primary-light);;
    color:var(--color-gray-dark);
}

.page-header-content{
    color:var(--color-primary);
    background-color:var(--color-white);
}

.breadcrumb > li > a{
    color:var(--color-gray-dark);
}

.navigation li a{
    color:var(--color-black);
}
.navigation li a:hover,
.navigation li a:focus{
    color:var(--color-gray-dark);
}
.navigation > li > a{
    padding:12px 20px;
    min-height:44px;
    font-weight:500;
}

.navigation > li.active > a, .navigation > li.active > a:hover, .navigation > li.active > a:focus{
    background-color:var(--color-primary);
    color:var(--color-black);
}

.navigation > li ul{
    background-color:var(--color-primary-lighter);
    color:var(--color-black);
}
.navigation > li > ul li.active > a, .navigation > li > ul li.active > a:hover, .navigation > li > ul li.active > a:focus{
    background-color:var(--color-primary-light);
    color:var(--color-black);
}

*:focus{
    border-color:var(--color-primary-dark);
}
.form-control:focus{
    border-color:var(--color-primary);
}
.input-error input{
    border-color:var(--color-danger-dark);
}

.version{
    font-size:11px;
    color:rgba(0, 0, 0, 0.25);
}

h2{
    font-size:32px;
    font-weight:100;
}

.Layer{
    position:absolute;
    width:550px;
    min-width:550px;
    min-height:400px;
    overflow-y:hidden;
    overflow-x:hidden;
    z-index:998;
    left:0px;
    top:0px;
    background-color:var(--color-white);
    border:1px solid var(--color-black);
    color:var(--color-black);
}
.LayerTitre{
    padding:0px 15px;
    font-size:18px;
    color:var(--color-text-medium);
    font-weight:bold;
    text-align:left;
}

#ComplementTitrePage{
    font-size:14px;
    color:var(--color-text-medium);
}

#TitrePanier{
    font-size:11px;
    margin-top:40px;
    margin-bottom:50px;
    padding-left:20px;
}

.TitreModule{
    background:var(--color-text-lighter);
    padding:3px 3px 3px 7px;
    color:var(--color-gray-dark);
    font-weight:bold;
    font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size:14px;
    margin-left:2px;
    margin-top:5px;
    margin-bottom:5px;
}
.TitreModule img{
    padding-right:5px;
}
.TitreModule span{
    float:right;
    margin-right:5px;
}
.TitreModule .FontBouton{
    margin-top:-5px;
}
.TitreModule select{
    font-size:11px;
}
.TitreModule span label{
    font-size:11px;
    font-weight:bold;
}

.Erreur{
    font-weight:bold;
    color:var(--color-danger-dark);
    font-size:12px;
}

.FondGris{
    background-color:var(--color-text-lighter);
}

/* liens */
.LienBarNav{
    text-decoration:none;
    color:var(--color-text-medium);
}
a.LienBarNav:hover{
    text-decoration:underline;
}

.LienPagination{
    text-decoration:none;
}
.LienPagination:visited{
    text-decoration:none;
}

a.disabled,
a.disabled:hover,
a.disabled:focus{
    color:var(--color-text-light) !important;
    background-color:var(--color-white);
}

hr.style15:after{
    background:var(--color-text-lightest);
    color:var(--color-text-medium);
}

.AutoCompleteDivListeStyle{
    border:1px solid var(--color-gray);
    border-radius:3px;
    background-color:var(--color-white);
    color:var(--color-gray-dark);
}
.AutoCompleteDivAct{
    background-color:var(--color-primary);
    color:var(--color-black);
}

.MotDePasseRetrouve{
    font-size:14px;
    font-weight:bold;
    width:100%;
    text-align:center;
}

.DateDerSynchro{
    color:var(--color-text-lighter);
    font-size:10px;
    font-style:italic;
    text-align:right;
    width:100%;
}

.Creation .Titre{
    font-weight:bold;
    background-color:var(--color-text-lighter);
}
.TableInfo{
    border:1px solid var(--color-white);
    border-collapse:collapse;
}
.TableInfo img{
    vertical-align:middle;
    border:0;
    padding-right:4px;
}
.TableInfo td{
    border:1px solid var(--color-white);
    padding:2px;
    vertical-align:middle;
}
.TableInfo .Email{
    font-size:9px;
}

.TableInfoFond{
    background-color:var(--color-text-lightest);
}
.TableInfoFond td{
    border:1px solid var(--color-white);
    padding:2px;
}
.TableInfoFond img{
    vertical-align:middle;
    border:0;
    padding-right:4px;
}

.BottomInfo{
    clear:both;
    padding-top:15px;
    text-align:center;
    color:var(--color-text-medium);
    font-style:italic;
}

#FILTREGF{
    max-width:100%;
}

/* ------------------------------------------------- */
/* ------------------ Home ------------------------- */
/* ------------------------------------------------- */

/* **** home clients **** */
.homepage .bg-home-client{
    border-color:var(--color-info);
    color:var(--color-gray-dark);
    background-color:var(--color-info);
}

/* **** home commandes **** */
.homepage .bg-home-commande{
    border-color:var(--color-danger);
    color:var(--color-white);
    background-color:var(--color-danger);
}

/* **** home reunions **** */
.homepage .bg-home-reunion{
    border-color:var(--color-primary);
    color:var(--color-white);
    background-color:var(--color-primary);
}
/* **** home filleuls **** */
.homepage .bg-home-filleul{
    border-color:var(--color-success);
    color:var(--color-gray-dark);
    background-color:var(--color-success);
}

.homepage .bg-home-client h3 a,
.homepage .bg-home-filleul h3 a{
    color:var(--color-gray-dark);
}
.homepage .bg-home-commande h3 a,
.homepage .bg-home-reunion h3 a,
.homepage .home-actualites h3 a{
    color:var(--color-white);
}
.homepage .home-actualites h4 a{
    color:var(--color-gray-dark);
}

/* **** home bloc menu **** */
.homepage .home-bloc-menu{
    color:var(--color-black);
}

.homepage .home-bloc-menu a{
    color:var(--color-black);
}

/* **** home mes clients **** */
.homepage .mes-clients{
    background:var(--color-info-transparent);
    color:var(--color-white);
}
.homepage .mes-clients h3{
    background-color:var(--color-info);
    color:var(--color-gray-dark);
}

/* **** home mon reseau **** */
.homepage .mon-reseau{
    background:var(--color-success-transparent);
    color:var(--color-gray-dark);
}
.homepage .mon-reseau  h3{
    background-color:var(--color-success);
}

/* **** home mon planning **** */
.homepage .mon-planning{
    background:var(--color-primary-transparent);
    color:var(--color-white);
}
.homepage .mon-planning  h3{
    background-color:var(--color-primary);
}

/* **** home creer commande **** */
.homepage .creer-commande{
    background:var(--color-danger-transparent);
    color:var(--color-white);
}
.homepage .creer-commande h3{
    background-color:var(--color-danger);
}

.homepage .mes-clients a,
.homepage .mon-reseau a{
    color:var(--color-gray-dark);
}
.homepage .mon-planning a,
.homepage .creer-commande a{
    color:var(--color-white);
}

.homepage .home-actualites .title{
    background-color:var(--color-gray-dark);
    color:var(--color-white);
}

/* ---------------------------------------------------------------- */
/* -------------------  Pages de recherche  ----------------------- */
/* ---------------------------------------------------------------- */
.page-search .dl-horizontal > div:nth-of-type(odd){
    background-color:var(--color-text-lightest);
}

/* ---------------------------------------------------------------- */
/* -------------------------  Lignée  ----------------------------- */
/* ---------------------------------------------------------------- */
.page-lignee-arbre .google-visualization-orgchart-linebottom{
    border-bottom:1px solid var(--color-info);
}

.page-lignee-arbre .google-visualization-orgchart-node{
    border:1px solid var(--color-info);
    border-radius:0px;
    background:var(--color-white);
    box-shadow:none;
}
.page-lignee-arbre .google-visualization-orgchart-nodesel{
    border:1px solid var(--color-warning-dark);
    outline:1px solid var(--color-warning-dark);
    background:var(--color-warning-light);
}
.page-lignee-arbre .google-visualization-orgchart-node-medium{
    background:var(--color-white);
}

.page-lignee .TotauxLignee td,
.page-lignee .TotauxPersoLignee td{
    background:var(--color-text-lightest);
}

.page-lignee #TableLignee a{
    color:var(--color-black);
}
.page-lignee #TableLignee .ColNomPrenomFilleul a{
    font-weight:500;
}
.page-lignee #TableLignee a:focus, .page-lignee #TableLignee a:hover{
    color:var(--color-info-dark);
}

.LigneeParNiveau{
    border-collapse:collapse;
}
.LigneeParNiveau td{
    border:0px;
    border-bottom:1px solid var(--color-text-lighter);
    padding:0px;
    font-weight:bold;
}
.LigneeParNiveau .Totaux{
    border-bottom:1px solid var(--color-white);
    padding:2px;
}

.page-lignee .ZoneLigneeParNiveau{
    min-height:120px;
}

/* ---------------------------------------------------------------- */
/* --------------------  Liste réunions  -------------------------- */
/* ---------------------------------------------------------------- */
.ui_tpicker_time{
    color:var(--color-primary-dark);
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-priority-primary{
    background-color:var(--color-primary-dark);
    border-color:var(--color-primary-dark);
    color:var(--color-white);
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-priority-primary:hover{
    background-color:var(--color-primary-dark);
    border-color:var(--color-primary-dark);
    color:var(--color-white);
    -webkit-box-shadow:0 0 0 100px rgba(0, 0, 0, 0.05) inset;
    box-shadow:0 0 0 100px rgba(0, 0, 0, 0.05) inset;
}
.ui-datepicker table td.ui-datepicker-today .ui-state-highlight{
    background-color:var(--color-primary-dark);
    color:var(--color-white);
}

/************* COMMANDE ET COMMANDE GROUPEE **********************/
.TableInfo .Groupe{
    border:1px solid transparent;
    padding:0px;
    border-collapse:collapse;
}
.TableInfo .Groupe td{
    border:1px solid var(--color-white);
    padding:2px;
}

.Message{
    font-weight:bold;
    margin:10px auto;
    text-align:center;
}
.AucunEnreg{
    text-align:center;
    font-weight:bold;
    margin:10px;
}
.AucunEnreg i{
    font-weight:normal;
}

.CommandeRegle{
    font-size:10px;
}
.Compteur{
    color:var(--color-gray);
}
.NoScript{
    color:var(--color-danger-dark);
    font-weight:bold;
    margin:10px auto 20px auto;
}
/* Saisie des commandes */
.CommandeOrigine{
    padding:2px;
    margin-bottom:10px;
    font-weight:bold;
    font-size:14px;
    text-align:center;
}
/* Paramètre des menus de gauche */
.LienMenu{
    text-decoration:none;
}

.LienMenu div{
    width:16px;
    height:16px;
    float:left;
    margin-right:1px;
    margin-left:1px;
    background-repeat:no-repeat;
}

.LienArticlePanier{
    text-decoration:none;
}
.LienArticlePanier:hover{
    text-decoration:underline;
}

.BoutonValiderCmde{
    text-align:center;
}
.BoutonValiderCmde .LienMenu{
    font-size:11px;
    font-weight:normal;
}
.DivCodePromo{
    border-radius:0px;
    background-color:var(--color-text-lighter);
    padding:5px;
    margin:auto;
    text-align:center;
}
.TextMenuGauche{
    text-decoration:none;
    font-weight:normal;
}

/* Menu du panier des vendeurs */
table.MenuGauchePanierVendeur td{
    padding-top:1px;
    padding-bottom:1px;
}
.MenuGauchePanierVendeur .ArticlesAjoutes{
    padding:5px 0;
    text-align:center;
    font-style:italic;
}
.MenuGauchePanierVendeur .BoutonValiderCmde{
    border:1px solid var(--color-secondary);
}

.ReprendrePanier{
    background-color:var(--color-white);
    border:1px solid var(--color-gray);
    color:var(--color-black);
    display:inline-block;
    margin:10px 0 20px;
    padding:3px 12px;
    text-decoration:none;
}
.ReprendrePanier:hover{
    background-color:var(--color-text-lighter);
}
.MenuGauchePanierVendeur .ArticlesAjoutes{
    font-style:italic;
    padding:5px 0;
    text-align:center;
}
.MenuGauchePanierVendeur .BoutonValiderCmde{
    background-color:var(--color-text-lightest);
    border:thin solid var(--color-text-light);
    font-size:11px;
}
.MenuGauchePanierVendeur .BoutonValiderCmde:hover{
    background-color:var(--color-white);
}
.MenuGauchePanierVendeur .BoutonValiderCmde a{
    color:var(--color-gray-dark);
}

/* Paramètres des div */
.separateur{
    width:inherit;
    height:10px;
    background-color:transparent;
}

#LogoEntreprise{
    display:table-cell;
    width:auto;
    max-height:80px;
    vertical-align:middle;
    background-color:var(--color-white);
    margin:0px 0px 0px 30px;
}
#IMGLogoEntreprise{
    width:auto;
    max-height:80px;
    max-width:100%;
}
#NomEntrepriseHaut{
    display:table-cell;
    height:80px;
    vertical-align:middle;
    text-align:right;
    color:var(--color-white);
}

/* Styles Boites de Dialogue */
.TitleDlg{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding:4px;
    cursor:move;
}

.TableSansBordure{
    border:0px;
}
.TableSansBordure td{
    border:0px;
}

#SaisieClientEnLigne .ReadOnly,
.SaisieClientEnLigne .ReadOnly{
    color:var(--color-gray);
}
#SaisieClientEnLigne img,
.SaisieClientEnLigne img{
    vertical-align:middle;
}

/* ---------------------------------------------------------------- */
/* --------------------  Votre commande   ------------------------- */
/* ---------------------------------------------------------------- */
.page-commande .wizard > .steps > ul > li.current .number,
.page-abonnement .wizard > .steps > ul > li.current .number{
    border-color:var(--color-primary-dark);
    background-color:var(--color-primary);
    color:var(--color-black);
}

.page-commande .wizard > .steps > ul > li.current > a,
.page-abonnement .wizard > .steps > ul > li.current > a{
    font-weight:bold;
}

.page-commande .wizard > .steps > ul > li:before, .wizard > .steps > ul > li:after,
.page-abonnement .wizard > .steps > ul > li:before, .wizard > .steps > ul > li:after{
    background-color:var(--color-black);
}

.titre-tab-bleu{
    color:var(--color-primary-dark);
    font-weight:bold;
}

.prix_public_conseille{
    color:var(--color-gray);
}
.stock_qte{
    font-style:italic;
    color:var(--color-gray);
}
.stock_feu_vert{
    background-color:#8bc413;
}
.stock_feu_orange{
    background-color:#ff9900;
}
.stock_feu_rouge{
    background-color:#f54a46;
}

.CdeGroupe .TotauxCli td:first-child{
    text-align:left;
    font-weight:500;
}
.CdeGroupe .TotauxCli td:last-child{
    border-color:var(--color-gray);
    background-color:var(--color-text-lightest);
    text-align:right;
    font-weight:bold;
}

/* ---------------------------------------------------------------- */
/* ------------------------  Catalogue   -------------------------- */
/* ---------------------------------------------------------------- */
.page-produit ul#thumblist li a:hover,
.page-produit ul#thumblist li a:focus,
.page-produit ul#thumblist li a.zoomThumbActive{
    border:1px solid var(--color-primary-dark);
}

.page-catalogue .Div_Catalogue .Div_CatPasPhoto,
.page-client.page-home .Div_Catalogue .Div_CatPasPhoto{
    background:var(--color-text-lightest);
}

.page-catalogue td.ColPhoto,
.page-client.page-home td.ColPhoto{
    font-style:italic;
    color:var(--color-text);
}

.page-catalogue .Div_Catalogue:after{
    content:'';
    display:block;
    margin:1px auto;
    text-align:center;
    width:75%;
    height:1px;
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
}
.Div_Catalogue .Div_CatInfo a{
    color:var(--color-gray-dark);
}
.Div_Catalogue .Div_CatPasPhoto{
    color:var(--color-gray);
    font-style:italic;
}

.FinRechercheCatalogue{
    clear:both;
}

#PrixFinal{
    font-weight:bold;
}

#DescriptionWeb{
    color:var(--color-text);
}
#BlocDescription .panel-body,
#BlocDescription .panel-body p,
#BlocDescription .panel-body font,
.tab-content > .tab-pane,
.tab-content > .tab-pane p,
.tab-content > .tab-pane font{
    font-family:var(--font-family) !important;
    font-size:18px !important;
    line-height:26px !important;
}

#InfosCommercialesProduit{
    text-align:left;
}
#BlocInfosPrincipales .panel-flat > .panel-heading{
    padding-bottom:5px;
}
.InfosProduit img{
    max-width:100%;
    height:auto;
}

.etiquette{
    display:inline-block;
    margin-bottom:10px;
    padding:5px 10px;
    background-color:var(--color-white);
    border:2px solid var(--color-black);
    color:var(--color-black);
    font-weight:600;
}

.img-parfum{
    max-height:125px;
    width:auto;
}

#ParfumsSimilaires > h3,
#ParfumNotes > .row > h3{
    font-family:var(--font-family);
    font-size:20px;
    font-weight:300;
    letter-spacing:2px;
}

#ParfumNotes .img-notes{
    padding:25px;
}
#ParfumNotes .col-xs-4 h3,
#ParfumNotes h5{
    margin-bottom:2px;
    font-family:var(--font-family);
    font-weight:bold;
    font-size:16px;
}
#ParfumNotes p{
    font-weight:300;
    line-height:18px;
}

#LesBienfaits{
    margin-top:15px;
    margin-bottom:15px;
}
#LesBienfaits h5{
    margin:15px auto 30px auto;
    font-family:var(--font-family);
    font-weight:normal;
    font-size:25px;
}
#LesBienfaits .picto-soin{
    margin:0 auto;
    max-width:100px;
    height:auto;
}

#BlocIdees .illu img{
    width:100%;
    height:auto;
}
#BlocIdees .illu-makeup{
    height:150px;
    border:5px solid var(--color-white);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
#BlocIdees .illu-makeup.double-height{
    height:300px;
}

#Div_Similaires{
    position:relative;
    float:none;
    clear:both;
    margin:15px auto;
}
#Div_Similaires > span{
    position:relative;
    display:inline-block;
    width:30px;
    height:30px;
    margin:6px;
    padding:3px;
    border-radius:50%;
}
#Div_Similaires > span:hover{
    opacity:0.75;
}
#Div_Similaires > span a{
    position:absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#Div_Recommandations div.row > div.col-xs-12{
    min-height:155px;
    text-align:center;
}
#Div_Recommandations div.row > div.col-xs-12 img{
    max-width:100%;
    height:auto;
}
#Div_Recommandations div.row > div.col-xs-12 p{
    min-height:45px;
}

/************** REUNION *************************/
#TableLstReunionDatee{
    border-collapse:collapse;
}
#TableLstReunionDatee tr{
    vertical-align:top;
}
#TableLstReunionDatee .FontBouton{
    font-size:9px;
    width:150px;
}
/************** LIGNEE GRAPHE HIERARCHIQUE *************************/
#TitreNomVendeurOrgChart{
    font-size:14px;
    font-weight:bold;
    display:block;
    width:100%;
    text-align:center;
}
#TitreStatutVendeurOrgChart{
    font-size:14px;
    font-weight:bold;
    display:block;
    width:100%;
    text-align:center;
}
#TitreMoisAnneeOrgChart{
    margin-top:8px;
    font-size:12px;
    font-weight:bold;
    display:block;
    width:100%;
    text-align:center;
}
#TitreCompteurOrgChart{
    font-size:12px;
    font-weight:bold;
    display:block;
    width:100%;
    text-align:center;
}
#TitreSommaireOrgChart{
    margin-top:8px;
    font-size:10px;
    display:block;
    width:100%;
    text-align:center;
}
#orgchart_div .orgchart_statut{
    color:var(--color-text-medium);
    font-size:10px;
    font-style:italic;
}

#orgchart_PhotoVendeur{
    max-width:125px;
    max-height:138px;
    text-align:center;
    overflow:hidden;
    margin-top:3px;
    margin-bottom:3px;
    border:none;
    display:inline-block;
}

#orgchart_NomPrenom{
    font-weight:bold;
    margin-top:3px;
}

/* ---------------------------------------------------------------- */
/* --------------------  Synthèse d'Activité  --------------------- */
/* ---------------------------------------------------------------- */
.page-synthese .BoutonSA1 .panel-body{
    background:var(--color-danger);
    border:1px solid var(--color-danger);
    color:var(--color-white);
}
.page-synthese .BoutonSA2 .panel-body{
    background:var(--color-primary);
    border:1px solid var(--color-primary);
    color:var(--color-white);
}
.page-synthese .BoutonSA3 .panel-body{
    background:var(--color-info);
    border:1px solid var(--color-info);
    color:var(--color-gray-dark);
}

.page-synthese .BoutonSA1 .panel-body:hover{
    background:var(--color-danger-transparent);
    color:var(--color-black);
}
.page-synthese .BoutonSA2 .panel-body:hover{
    background:var(--color-primary-transparent);
    color:var(--color-black);
}
.page-synthese .BoutonSA3 .panel-body:hover{
    background:var(--color-info-transparent);
    color:var(--color-black);
}

.page-synthese .SALigne1 .panel-body{
    background:var(--color-danger);
    border-color:var(--color-danger);
}
.page-synthese .SALigne1 .panel-body:hover{
    background:var(--color-danger-transparent);
}
.page-synthese .SALigne2 .panel-body{
    background:var(--color-primary);
    border-color:var(--color-primary);
}
.page-synthese .SALigne2 .panel-body:hover{
    background:var(--color-primary-transparent);
}
.page-synthese .SALigne3 .panel-body{
    background:var(--color-gray);
    border-color:var(--color-gray);
    color:var(--color-white);
}
.page-synthese .SALigne3 .panel-body:hover{
    background:var(--color-gray-transparent);
}
.page-synthese .SAClients .panel-body{
    background:var(--color-info);
    border-color:var(--color-info);
    color:var(--color-white);
}
.page-synthese .SAClients .panel-body:hover{
    background:var(--color-info-transparent);
}
.page-synthese .SAVendeurs .panel-body{
    background:var(--color-success);
    border-color:var(--color-success);
    color:var(--color-white);
}
.page-synthese .SAVendeurs .panel-body:hover{
    background:var(--color-success-transparent);
}

/* ---------------------------------------------------------------- */
/* --------------------------  Comptes   -------------------------- */
/* ---------------------------------------------------------------- */
.page-compte .tab-commandes .LstCdeColInfo a{
    color:var(--color-black);
    font-weight:500;
}
.page-compte .tab-commandes .LstCdeColInfo a:focus, .page-compte .tab-commandes .LstCdeColInfo a:hover{
    text-decoration:underline;
}

.page-compte .tab-commandes .table .icon-cancel-square2{
    color:var(--color-danger-dark);
}
.page-compte .tab-commandes .table .icon-notification2{
    color:var(--color-warning-dark);
}
.page-compte .tab-commandes .table .icon-checkmark{
    color:var(--color-success-dark);
}

.page-compte form#SaisieInfoPerso #TabInfosPerso > .row:nth-child(odd){
    background-color:var(--color-white);
}

/* ---------------------------------------------------------------- */
/* ------------------------  Documents   -------------------------- */
/* ---------------------------------------------------------------- */
.page-documents .panel-group-control .panel-title + a:before{
    content:'\e9b7';
    font-size:16px;
    font-weight:400;
}
.page-documents .panel-group-control .panel-title + a.collapsed:before{
    content:'\e9b8';
}

.page-documents .media-list .media:hover{
    background-color:rgba(128, 128, 128, 0.1);
}

/*----- PaiementLibre - Responsive -----*/
#FormPaiementDirect{
    margin-bottom:20px;
}

#FormPaiementDirect .DivInfoPaiement{
    width:98%;
    margin-right:auto;
    margin-left:auto;
    padding:5px 10px 10px 10px;
}

#FormPaiementDirect .Bouton{
    padding:2px 8px;
    border:1px solid var(--color-text);
    background-color:var(--color-text-lightest);
}

#FormPaiementDirect .TableInfoPaiement, .TablePaiement{
    width:60%;
    border-collapse:collapse;
}

#LayerPaiementsCmde .PaiementsTitre{
    display:block;
    text-align:center;
    margin:5px auto 10px auto;
    font-weight:bold;
}
#LayerPaiementsCmde #TablePaiementsCmde a{
    display:block;
    min-height:36px;
    line-height:36px;
    margin-top:1em;
    margin-bottom:1em;
    border:1px solid var(--color-text-lighter);
}
#LayerPaiementsCmde #TablePaiementsCmde a.PaiementExt:hover{
    text-decoration:none;
}
#LayerPaiementsCmde #TablePaiementsCmde form.RattacheReglementACommande{
    border:1px solid var(--color-text-lighter);
}
#ReglementsRattachement{
    overflow-y:auto;
    margin-left:auto;
    margin-right:auto;
}
a.LienPaiements{
    display:block;
    font-weight:bold;
}
a.LienPaiements:hover{
    text-decoration:none;
}

.nav-tabs{
    margin-bottom:0;
}
.tab-content{
    padding:20px 10px;
    border:1px solid var(--color-text-lighter);
    border-top:none;
}

/***** Media Queries pour adaptation responsive *****/
@media (max-width:480px){
    .page-commande .wizard > .steps > ul > li.current:after,
    .page-abonnement .wizard > .steps > ul > li.current:after{
        background-color:var(--color-text-lighter);
    }
}

@media (max-width:768px) {
    .nav-tabs > li.active > a:after,
    .nav-tabs > li.active > a:hover:after,
    .nav-tabs > li.active > a:focus:after{
        background-color:var(--color-primary-dark);
    }
}

@media (min-width:769px) {
    .sidebar-xs .sidebar-main .navigation > li > ul{
        background-color:var(--color-primary-light);;
        color:var(--color-black);
    }
    .sidebar-xs .sidebar-main .navigation > li > a > span{
        background-color:var(--color-primary);
        border:1px solid var(--color-primary);
        color:var(--color-black);
    }
    .sidebar-xs .sidebar-logo.hidden-xs{
        background-color:var(--color-primary-light);;
        color:var(--color-black);
    }
    .nav-tabs.nav-tabs-highlight > li.active > a,
    .nav-tabs.nav-tabs-highlight > li.active > a:hover,
    .nav-tabs.nav-tabs-highlight > li.active > a:focus{
        border-top-color:var(--color-primary-dark);
    }
}