@import url('/assets/css/stylesB.css') all;

@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.cdnfonts.com/css/australia-2');
@font-face {
    font-family: 'DIN Next Rounded LT W01 Light';
    src: url('/assets/css/custom/ARTDUBIENETRE/fonts/DINNextRoundedLTW01Light.eot'); /* IE9 Compat Modes */
    src: url('/assets/css/custom/ARTDUBIENETRE/fonts/DINNextRoundedLTW01Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/css/custom/ARTDUBIENETRE/fonts/DINNextRoundedLTW01Light.woff2') format('woff2'), /* Super Modern Browsers */
         url('/assets/css/custom/ARTDUBIENETRE/fonts/DINNextRoundedLTW01Light.woff') format('woff'), /* Modern Browsers */
         url('/assets/css/custom/ARTDUBIENETRE/fonts/DINNextRoundedLTW01Light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/assets/css/custom/ARTDUBIENETRE/fonts/DINNextRoundedLTW01Light.svg#DINNextRoundedLTW01-Light') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

:root{
    --color-primary:  hsl( 31, 53%, 74%); --color-primary-light:  hsl( 31, 53%, 84%); --color-primary-dark:  hsl( 31, 53%, 44%); --color-primary-lighter:hsl( 31, 53%, 94%); /* beige #e0be9a */
    --color-primary-transparent:hsla( 31, 53%, 74%, 0.75);
    --color-secondary:hsl(194, 18%, 47%); --color-secondary-light:hsl(194, 18%, 67%); --color-secondary-dark:hsl(194, 18%, 27%); /* bleu #62828C */
    --color-tertiary: hsl(172, 80%, 25%); --color-tertiary-light: hsl(172, 80%, 55%); --color-tertiary-dark: hsl(172, 80%, 13%); /* atoll #0d7163 */
    
    --color-info:     hsl(217, 95%, 72%); --color-info-light:     hsl(217, 95%, 92%); --color-info-dark:     hsl(217, 95%, 42%); /* bleu */
    --color-info-transparent:hsla(217, 95%, 72%, 0.75);
    --color-warning:  hsl( 38, 95%, 72%); --color-warning-light:  hsl( 38, 95%, 92%); --color-warning-dark:  hsl( 38, 95%, 42%); /* jaune */
    --color-warning-transparent:hsla( 38, 95%, 72%, 0.75);
    --color-success:  hsl(107, 95%, 72%); --color-success-light:  hsl(107, 95%, 92%); --color-success-dark:  hsl(117, 95%, 42%); /* vert #91FB73 */
    --color-success-transparent:hsla(107, 95%, 72%, 0.75);
    --color-danger:   hsl(353, 95%, 72%); --color-danger-light:   hsl(353, 95%, 92%); --color-danger-dark:   hsl(353, 95%, 42%); /* rouge */
    --color-danger-transparent:hsla(353, 95%, 72%, 0.75);

    --color-white:      #fff;
    --color-black:      #000;
    --color-gray:       #808080; --color-gray-light:#b3b3b3; --color-gray-lighter:#e5e5e5; --color-gray-lightest:#f0f0f0; --color-gray-dark:#4c4c4c; --color-gray-darker:#2d2d2d;
    --color-text:       var(--color-black);
    --color-text-dark:  var(--color-black);
    --color-text-medium:var(--color-gray-dark);
    --color-text-light: var(--color-gray);
    --color-link:      hsl(25, 21%, 23%);
    --color-link-hover:hsl(25, 21%, 53%); /*#a0826d*/
    --color-footer-bg:  var(--color-white);
    --color-footer-text:var(--color-black);

    --font-family:      'Marcellus', serif;
    --font-family-sans: 'DIN Next Rounded LT W01 Light', sans-serif;
    --font-family-serif:'Australia', serif;
    --font-family-title:'DIN Next Rounded LT W01 Light', sans-serif;
}

body{
    font-family:var(--font-family);
    font-size:16px;
    font-weight:400;
    background:var(--color-white);
    color:var(--color-text);
    margin:0;
    padding:0;
}

::selection{
    background:var(--color-primary);
    color:var(--color-black);
}
::-moz-selection{
    background:var(--color-primary);
    color:var(--color-black);
}
::-webkit-input-placeholder{
    color:var(--color-text);
    font-weight:500;
}
::-moz-placeholder{
    color:var(--color-text);
    font-weight:500;
}
:-ms-input-placeholder{
    color:var(--color-text);
    font-weight:500;
}
:-moz-placeholder{
    color:var(--color-text);
    font-weight:500;
}

h1, h2, h3, h4, h5{
    font-family:var(--font-family-title);
}

h1, h2{
    font-weight:bold;
}

.btn, a{
    font-family:var(--font-family-sans);
}
.btn-primary{
    font-weight:600;
}

a{
    color:var(--color-link);
    font-weight:600;
    transition:color 0.2s ease;
}
a:hover,
a:active,
a:focus{
    color:var(--color-link-hover);
}

.form-control{
    font-family:var(--font-family-sans);
    font-size:14px;
}

.fs-10{
    font-size:12px;
}

.CdeGroupe .TotauxCli td:last-child{
    background-color:var(--color-primary-lighter);
}

/* couleurs */

.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:hover,
.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{
    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-white);
    background-color:var(--color-primary-light);
    border-color:var(--color-primary-light);
}
.alert-primary{
    color:var(--color-primary-dark) !important;
    background-color:var(--color-primary-lighter);
    border-color:var(--color-primary-light);
}

.bg-blue{
    background-color:var(--color-tertiary);
    border-color:var(--color-tertiary);
    color:var(--color-white);
}
.text-blue{
    color:var(--color-tertiary) !important;
}
.text-blue:hover,
.text-blue:focus{
    color:var(--color-white) !important;
}

.bg-danger-800{
    background-color:var(--color-danger-dark);
    border-color:var(--color-danger-dark);
    color:var(--color-white);
}

.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);
}

.bg-success{
    background-color:var(--color-success);
    border-color:var(--color-success);
    color:var(--color-black);
}
.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-black);
    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);
}

.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-warning-dark) !important;
    background-color:var(--color-warning-light);
    border:2px solid 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);
}

.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-black);
    background-color:var(--color-primary-light);
    border-color:var(--color-primary);
}
.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-primary-light);
    background-color:var(--color-primary);
    border-color:var(--color-primary-dark) !important;
}

.btn-dcs-grey a{
    color:var(--color-white);
}


/* communs */

.table{
    background-color:rgba(255,255,255,0.5);
}

.btn{
    border-radius:0;
}
.btn-sm:not(.btn-rounded),
.btn-group-sm > .btn:not(.btn-rounded),
.btn-xs:not(.btn-rounded),
.btn-group-xs > .btn:not(.btn-rounded){
    border-radius:0;
}

.form-control:focus{
    border-color:var(--color-primary-light);
}

.navbar-inverse{
    background:var(--color-tertiary);
    color:var(--color-primary-dark);
    border:none;
}
.navbar-inverse .navbar-collapse,
.sidebar-xs-indicator .navbar-inverse{
    min-height:24px;
}
.sidebar{
    background:var(--color-primary-light);
}
.sidebar-logo{
    position:relative;
    height:98px;
    padding:20px;
    z-index:1;
}
.bodylogin .sidebar-logo,
.bodypaiementmdp .sidebar-logo{
    background:none;
    height:34px;
}

.page-mdp .panel-body .row .col-sm-6{
    margin-top:5px !important;
    margin-bottom:5px;
}

.page-header{
    border-bottom-color:transparent;
}
.page-header-default{
    box-shadow:none;
}

.page-header-content{
    background-color:var(--color-white);
    color:var(--color-primary);
}
.page-header-content h1{
    font-size:22px;
    font-weight:bold;
    line-height:34px;
}

.page-paiement-libre h2{
    margin-top:20px;
}

.breadcrumb-line:not([class*=bg-]){
    background-color:var(--color-primary);
    border-top:1px solid var(--color-primary);
    border-bottom:1px solid var(--color-primary);
    color:var(--color-white);
}
.breadcrumb{
    padding:11px 0;
}
.breadcrumb > li > a{
    color:var(--color-white);
}

.navigation{
    padding-top:0;
}
.navigation li a{
    color:var(--color-link);
}
.navigation li a:hover,
.navigation li a:focus{
    background-color:var(--color-tertiary);
    color:var(--color-white);
}

.navigation > li ul{
    background-color:var(--color-primary-lighter);
    color:var(--color-black);
}
.navigation > li ul li a{
    font-weight:400;
}

.navigation > li.active > a,
.navigation > li.active > a:hover,
.navigation > li.active > a:focus{
    background-color:var(--color-primary);
    color:var(--color-link);
}

.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);
    color:var(--color-black);
}

.LienBarNav,
.breadcrumb{
    font-family:var(--font-family-sans);
    font-size:16px;
}

.LienFamille{
    font-size:14px;
}

/* ---------------------------------------------------------------- */
/* --------------------  Votre commande   ------------------------- */
/* ---------------------------------------------------------------- */

.page-commande .wizard > .steps > ul > li.current .number,
.page-abonnement .wizard > .steps > ul > li.current .number{
    background-color:var(--color-primary);
    border-color:var(--color-primary);
}
.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);
}
.page-commande .wizard > .steps > ul > li.done .number,
.page-abonnement .wizard > .steps > ul > li.done .number{
    background-color:var(--color-primary-dark);
    border-color:var(--color-tertiary-dark);
}

.titre-tab-bleu{
    color:var(--color-tertiary);
    font-weight:bold;
    font-size:105%;
}

.panel-default > .panel-heading{
    background-color:#eeeeee;
}

/* ------------------------------------------------- */
/* ------------------ Home ------------------------- */
/* ------------------------------------------------- */

#ConteneurGlobalSA{
    font-size:90%;
}

/* **** home clients **** */
.homepage .bg-home-client{
    border-color:var(--color-info);
    background-color:var(--color-info);
}

/* **** home commandes **** */
.homepage .bg-home-commande{
    border-color:var(--color-danger);
    background-color:var(--color-danger);
}

/* **** home reunions **** */
.homepage .bg-home-reunion{
    border-color:var(--color-warning);
    background-color:var(--color-warning);
}
/* **** home filleuls **** */
.homepage .bg-home-filleul{
    border-color:var(--color-success);
    background-color:var(--color-success);
}


/* **** home mes clients **** */
.homepage .mes-clients{
    background:var(--color-info-transparent);
}
.homepage .mes-clients h3{
    background-color:var(--color-info);
}

/* **** home mon reseau **** */
.homepage .mon-reseau{
    background:var(--color-success-transparent);
}
.homepage .mon-reseau h3{
    background-color:var(--color-success);
}

/* **** home mon planning **** */
.homepage .mon-planning{
    background:var(--color-warning-transparent);
}
.homepage .mon-planning h3{
    background-color:var(--color-warning);
}

/* **** home creer commande **** */
.homepage .creer-commande{
    background:var(--color-danger-transparent);
}
.homepage .creer-commande h3{
    background-color:var(--color-danger);
}


.homepage .home-actualites .title{
    background-color:var(--color-primary-dark);
    color:var(--color-white);
}
.homepage .home-actualites h4 a{
    color:var(--color-black);
}

.homepage .bg-home-client h3,
.homepage .bg-home-commande h3,
.homepage .bg-home-reunion h3,
.homepage .bg-home-filleul h3{
    font-size:21px;
}
.homepage .mes-clients h3,
.homepage .mon-planning h3,
.homepage .mon-reseau h3{
    font-size:20px;
}
@media (min-width:1280px){
    .homepage .creer-commande h3{
        font-size:15px;
        line-height:30px;
    }
}
@media (min-width:1440px){
    .homepage .creer-commande h3{
        font-size:20px;
    }
}

.homepage .bg-home-commande,
.homepage .bg-home-commande h3,
.homepage .bg-home-commande h3 a,
.homepage .creer-commande,
.homepage .creer-commande a,
.homepage .creer-commande h3,
.homepage .bg-home-reunion,
.homepage .bg-home-reunion h3,
.homepage .bg-home-reunion h3 a,
.homepage .mon-planning,
.homepage .mon-planning a,
.homepage .mon-planning h3{
    color:var(--color-white);
}

.homepage .bg-home-client h3,
.homepage .bg-home-client h3 a,
.homepage .mes-clients,
.homepage .mes-clients a,
.homepage .home-actualites h3 a{
    color:var(--color-white);
}
.homepage .bg-home-filleul h3,
.homepage .bg-home-filleul h3 a,
.homepage .mon-reseau,
.homepage .mon-reseau a{
    color:var(--color-black);
}


/* ---------------------------------------------------------------- */
/* --------------------  Synthèse d'Activité  --------------------- */
/* ---------------------------------------------------------------- */

.page-synthese .BoutonSA1 .panel-body{
	background:var(--color-secondary);
	border:1px solid var(--color-secondary);
	color:var(--color-white);
}
.page-synthese .BoutonSA2 .panel-body{
	background:var(--color-primary);
	border:1px solid var(--color-primary);
	color:var(--color-black);
}
.page-synthese .BoutonSA3 .panel-body{
	background:var(--color-info);
	border:1px solid var(--color-info);
	color:var(--color-white);
}

.page-synthese .BoutonSA1 .panel-body:hover{
	background:var(--color-secondary-dark);
}
.page-synthese .BoutonSA2 .panel-body:hover{
	background:var(--color-primary-dark);
}
.page-synthese .BoutonSA3 .panel-body:hover{
	background:var(--color-info-dark);
}

.page-synthese .SALigne1 .panel-body{
	background:var(--color-secondary);
	border-color:var(--color-secondary);
	color:var(--color-white);
}
.page-synthese .SALigne1 .panel-body:hover{
	background:var(--color-secondary-dark);
}

.page-synthese .SALigne2 .panel-body{
	background:var(--color-primary);
	border-color:var(--color-primary);
	color:var(--color-black);
}
.page-synthese .SALigne2 .panel-body:hover{
	background:var(--color-primary-dark);
}

.page-synthese .SALigne3 .panel-body{
	background:var(--color-warning);
	border-color:var(--color-warning);
	color:var(--color-black);
}
.page-synthese .SALigne3 .panel-body:hover{
	background:var(--color-warning-dark);
}

.page-synthese .SAClients .panel-body{
	background:var(--color-info);
	border-color:var(--color-info);
	color:var(--color-black);
}
.page-synthese .SAClients .panel-body:hover{
	background:var(--color-info-dark);
	color:var(--color-white);
}

.page-synthese .SAVendeurs .panel-body{
	background:var(--color-success);
	border-color:var(--color-success);
	color:var(--color-black);
}
.page-synthese .SAVendeurs .panel-body:hover{
	background:var(--color-success-dark);
	color:var(--color-white);
}

@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);
    }
	.sidebar-logo{
        background-image:none;
    }
}

@media (min-width:769px){
    .sidebar-xs .sidebar-main .navigation > li > a > span{
        background-color:var(--color-primary-dark);
        border-color:var(--color-primary);
        color:var(--color-white);
    }
    .sidebar-xs .sidebar-main .navigation > li > ul{
        background-color:var(--color-primary-lighter);
    }
    .sidebar-xs .sidebar-main .navigation > li:hover:not(.active) > a{
        background-color:var(--color-primary-dark);
    }
    .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);
    }
}
