/* CSS3 Reset
---------------------------------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,article,aside,canvas,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,
mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;text-align: left;}
body{line-height:1;}
article,aside,canvas,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#f1f191;color:#010201;text-decoration:none;}
mark{background-color:#f1f191;color:#010201;font-style:italic;font-weight:bold;}
del{ text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #c1c2c3;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
ul {list-style: none;}
*, *::before, *::after {box-sizing: border-box;}
*::selection {background:#112277; color:#cdf;}


/* Les Fonts : ici !
---------------------------------------------------------------------- */
/* latin-ext */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/lato/Lato_300_latin-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/lato/Lato_300_latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/lato/Lato_400_latin-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/lato/Lato_400_latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/lato/Lato_700_latin.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/lato/Lato_700_latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Variables globales
---------------------------------------------------------------------- */

:root {
	--main-color: #664f73;
	--text-color: #212221;
	--header-bg: #2F2C2F;
	--link-color: #7e32a7;
	--link-hover-color: #510b78;
	--color-error: #ba111a;
	--color-warn: #d76d00;
	--color-valid: #0d9124;
	--color-info: #056a82;
	--wrap-width: 1200px;
}


/* Codes couleurs :
----------------------------------------------------------------------
# 212221 : couleur du texte "normal"
# 111412 : h2
# 212422 : h2
# 313432 : h3
# 414442 : h4
# 515452 : h5
# 616462 : h6
# 4e4f4e : couleur du texte ":input"
# abacaa : bordure ":input"
# 2a292b : fond over-header
# 818480 : fond header, & autre blocs avec fond moyen
# 161516 : fond nav & footer & autre blocs avec fond foncé
# fefdfc : hover border nav
# 181719 : fond boutons & co
# 424143 : fond hover-boutons & co
# 4343da : fond bouton Exergues (& couleur hover)
# fe0504 : fond bouton Exergues && Important (& couleur hover)
# ff0084 : surbrillance de selection du text dans le Header
# 112277 : surbrillance de selection du text (général)
# 727571 : label formulaire
# c1c4d3 : fond couleur clair
# 818493 : fond couleur moyen
# 414453 : fond couleur foncé


---------------------------------------------------------------------- */


/* Structure générale
---------------------------------------------------------------------- */
html {font-size:62.5%; font-family: "Lato", sans-serif;}
body {font-size:12px; background: #F1F2F2; font-family: "Lato", sans-serif; color: var(--text-color);}
body > header {
	text-align: center;
	background: var(--header-bg);
	width:100%;
	padding: 0px 0 0 0;
	position:relative;
	font-size: 0;
}
body > footer {
	font-size: 12px;
	text-align: center;
	width: 100%;
	min-height: 100px;
	overflow: hidden;
	position:relative;
	background: #161516;
	padding-top: 30px;

}
body > nav {
	width: 100%;
	z-index:101;
	position:relative;
	background: #161516;

}
aside {}

main { min-height:calc(100vh - 68px - 100px); margin-bottom: 120px; } /* Taille header + taille footer */
main > section { max-width: var(--wrap-width); margin: 25px auto; padding: 0 25px; }
main > section.wide { max-width: 1400px; }

.df3-internal-server-error { z-index: 1000 !important; }

/* Charte graphique élémentaire
---------------------------------------------------------------------- */
h1 {
	text-align: center;
	font-size:50px;
	line-height:56px;
	color:#111412;
	font-weight: 100;
	padding:5vh 20px;
	letter-spacing: 1px;
	margin:0;
	font-variant: small-caps;
	position:relative;
	font-family: "Lato", sans-serif;
}
h2 {
	font-size:20px;
	line-height: 24px;
	font-weight: 300;
	color:#212422;
	letter-spacing: 0.5px;
	margin:2vh 0px;
	padding:0;
	font-family: "Lato", sans-serif;
	text-transform: uppercase;
}
h3 {
	font-size:24px;
	font-weight: normal;
	color:#313432;
	margin:6px 0px;
	font-family: "Lato", sans-serif;
	padding:0;
}
h4 {
	font-size:20px;
	font-weight: bold;
	color:#414442;
	margin:6px 0px;
	padding:0;
}
h5 {
	font-size:16px;
	font-weight: bold;
	color:#515452;
	margin:6px 0px;
	padding:0;
}
h6 {
	font-size:14px;
	font-weight: bold;
	color:#616462;
	margin:4px 0px;
	padding:0;
}
p {
	margin:6px 0px;
	font-size:13px;
	text-align: justify;
	line-height: 16px;
}
p.quote { margin: 10px; padding: 10px; background: #f7f7f7; border: 1px solid #eee; border-radius: 5px; font-style: italic; }

a { text-decoration: none; transition: all 0.5s; color: var(--link-color); }
a:hover { color: var(--link-hover-color); }
hr {border-top: 1px solid; display: block; height: 1px;}
[data-action] { cursor: pointer; }

sub { font-size: 0.7em; }

.neg { color: var(--color-error); }
.pos { color: var(--color-valid); }

blockquote {font-size:22px; text-align: center; letter-spacing: 0.5px; line-height: 26px; font-style: italic; quotes:"\00ab" "\00bb";}
blockquote:after {content:open-quote; font-size:30px;}
blockquote:before {content:close-quote;font-size:30px;}

figure { text-align: center;}
figcaption { font-size:10px; font-style: italic; text-align: center; padding-top:10px;}
figure img { min-width: 30px;}

.btn {
	background-color: #664F73;
	border: 0;
	border-radius: 15px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	line-height: 35px;
	overflow: hidden;
	padding: 0 15px;
	margin: 3px;
	transition: all 0.4s ease;
	vertical-align: middle;
	white-space: nowrap;
}
.btn.btn-toggle {
	background-color: #ddd;
	color: #000;
}
.btn.btn-toggle.on {
	background-color: #664F73;
	color: #fff;
}
.btn i {
	margin: 0 10px 0 -15px;
	padding: 0 15px;
	position: relative;
	z-index: 5;
	width: 42px;
}
.btn i:after{
	background-color: rgba(47,44,47,0.25);
	content: "";
	display: block;
	height: 50px;
	left: 0;
	position: absolute;
	top: -20px;
	width: 100%;
	z-index: -5;
}
.btn:disabled, a.btn.disabled {
	cursor: default;
	background-color: #cecece !important;
}
.btn.true {
	background-color: #94B9B1;
	color: #FFFFFF;
}
.btn.false {
	background-color: #C86372;
	color: #FFFFFF;
}
.btn:not(:disabled):hover {
	background-color: #2F2C2F !important;
	color: #FFFFFF !important;
}

.btn:not(:disabled):hover,
.btn:not(:disabled).danger:hover,
.btn:not(:disabled).valid:hover,
.btn:not(:disabled).info:hover {
	background-color: #2F2C2F;
	color: #FFFFFF;
}

.btn.danger { background-color: var(--color-error); }
.btn.valid { background-color: var(--color-valid) }
.btn.info { background-color: var(--color-info) }
.good { color: var(--color-valid); }
.bad { color: var(--color-error); }

.btn.small {
	line-height: 22px;
	padding: 0 10px;
	border-radius: 10px;
	font-size: 10px;
}
.btn.small i {
	padding: 0 6px;
	margin: 0 5px 0 -10px;
	width: 20px;
}

.btn.medium {
	line-height: 28px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 12px;
}
.btn.medium i {
	padding: 0 10px;
	margin: 0 5px 0 -12px;
	width: 30px;
}

.btn.btn-i { padding: 0; }
.btn.btn-i > i { margin: 0; padding: 0 10px; width: 35px; text-align: center; }
.btn.btn-i.small > i { padding: 0 5px; width: 28px; }
.btn > span { display: inline-block; padding: 0 5px; }

.btn i.end {
	padding: 0;
	text-align: center;
	margin: 0 -12px 0 5px;
}
.btn {display: inline-block; justify-content: space-between; align-items: center;} /* ça n'a pas l'air d'avoir casser les autres boutons, à voir si c'est bon */


.btn.btn-left { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.btn.btn-right { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.btn.btn-middle { border-radius: 0; margin-left: 0; margin-right: 0; }
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: rgba(102, 79, 115, 0.9);
	color: #fff;
	border-radius: 50%;

	margin: 2px;
	width: 20px;
	height: 20px;

	transition: background 0.4s ease;
}
.btn-icon:hover {
	background: #2F2C2F;
}
.btn-icon > i,
.btn-icon > .fa { font-size: 12px; }
.btn-icon > i:hover,
.btn-icon > .fa:hover { color: #fff; }

.btn-grp { display: flex; padding: 10px; }
.btn-grp.left { justify-content: flex-start; }
.btn-grp.center { justify-content: center; }
.btn-grp.right { justify-content: flex-end; }
.btn-grp > .btn { background: #ddd; color: #000; margin: 0; }
.btn-grp > .btn.on { background: #664f73; color: #fefefe; }
.btn-grp > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-grp > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-grp > .btn:not(:last-child):not(:first-child) { border-radius: 0; }

.btn.inv { background-color: var(--main-color); color: #fff; }

.status {
	background-color: #888;
	border: 0;
	border-radius: 15px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	line-height: 35px;
	overflow: hidden;
	padding: 0 15px;
	margin: 3px;
	transition: all 0.4s ease;
	vertical-align: middle;
	white-space: nowrap;
}
.status i {
	margin: 0 10px 0 -15px;
	padding: 0 5px;
	position: relative;
	z-index: 5;
	width: 35px;
	text-align: center;
}
.status i:after{
	background-color: rgba(47,44,47,0.25);
	content: "";
	display: block;
	height: 50px;
	left: 0;
	position: absolute;
	top: -20px;
	width: 100%;
	z-index: -5;
}
.status > span { display: inline-block; padding: 0 5px; }
.status.danger { background-color: var(--color-error); }
.status.warn { background-color: var(--color-warn); }
.status.valid { background-color: var(--color-valid) }
.status.info { background-color: var(--color-info) }

.status.small {
	background-color: transparent;
	line-height: 22px;
	padding: 0 5px;
	border-radius: 10px;
	font-size: 10px;
	color: var(--text-color);
}
.status.small i {
	padding: 0;
	margin: 0 5px 0 -10px;
	width: auto;
	background-color: transparent;
}
.status.small i::after {
	background-color: transparent;
}

.status.medium {
	background-color: transparent;
	line-height: 28px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 12px;
	color: var(--text-color);
}
.status.medium i {
	padding: 0;
	margin: 0 5px 0 -12px;
	width: auto;
	background-color: transparent;
}
.status.medium i::after {
	background-color: transparent;
}

.status.medium.danger { color: var(--color-error); }
.status.medium.warn { color: var(--color-warn); }
.status.medium.valid { color: var(--color-valid) }
.status.medium.info { color: var(--color-info) }

.status.small.danger { color: var(--color-error); }
.status.small.warn { color: var(--color-warn); }
.status.small.valid { color: var(--color-valid) }
.status.small.info { color: var(--color-info) }


input[type="text"],
input[type="email"],
input[type="password"],
select {
	background-color: #F1F2F2;
	border: 1px solid #e6e7e8;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	height: 25px;
	padding: 0 10px;
	height: 30px;
	width: 100%;
}
input.error, select.error {
	border-color: #C86372;
}
input[type="text"].small,
input[type="email"].small,
input[type="password"].small,
select.small {
	height: 22px;
	border-radius: 0;
	font-size: 10px;
	padding: 0 5px;
}

input[type="password"].password-valid { background: #87ff9c; border: 1px solid #095b17; }
input[type="password"].password-invalid { background: #ff8792; border: 1px solid #770b0b; }
input[readonly] { color: #888; }

input[type='text']::placeholder,
input[type='password']::placeholder,
input[type='email']::placeholder,
textarea::placeholder { color:#aaa; font-style: italic; font-family: "Lato", sans-serif;}


textarea {
	background-color: #F1F2F2;
	border: 1px solid #e6e7e8;
	border-radius: 0 15px 15px 0;
	height: 60px;
	padding: 5px;
	font-family: "Lato", sans-serif;
}

.notification, .error-msg, .error-info, .error-warn {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	background: #eee;
	border: 1px solid #aaa;
	padding: 15px;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	margin: 20px 0;
}
.notification > i { font-size: 24px; margin: 10px; }
.notification > p { font-size: 16px; }
.notification.t-notice { background: #ffffff; border-color: #eee; color: #777; }
.notification.t-info, .error-info { background: #ddf0fd; border-color: #3586ba; color: #0569a9; }
.notification.t-error, .error-msg { background: #ffdce0; border-color: #fa3c4a; color: #cb000f; }
.notification.t-warning, .error-warn { background: #ffecdd; border-color: #ff8e3d; color: #eb6100; }
.notification.t-success { background: #e8ece4; border-color: #3ddb34; color: #54ba00; }

.notification-box { position: sticky; top: 49px; z-index: 10; }
.notification-box > .notification { border: none; border-radius: 0; margin: 0; }

.fa, .fab, .fad, .fal, .far, [class^="i-"], [class*=" i-"], .fas {
    display: inline-block;
}

body > .sideIco.top {
  bottom: auto;
  top: 120px;
}
body > .sideIco {
  position: fixed;
  bottom: 15px;
  right: 0;
  width: 30px;
  z-index: 1000;
}
body > .sideIco > * {
  background: #000;
  border-radius: 10px 0 0 10px;
  color: #aaa;
  width: 100%;
  display: block;
  font-size: 20px;
  opacity: 0.2;
  padding: 8px 0;
  text-align: center;
  margin-top: 8px;
  transition: all 0.4s ease;
  cursor: pointer;
}
body > .sideIco > .on {
  opacity: 0.7;
}

/* Redirection
---------------------------------------------------------------------- */
.redirect { display: flex; flex-direction: column; align-items: center; max-width: 800px; padding: 25px; margin: 40px auto; background:#fbfbfb; border: 1px solid var(--main-color); border-radius: 8px; box-shadow: 0 0 25px rgba(0,0,0,0.2); }
.redirect > i { font-size: 28px; margin-bottom: 25px; }
.redirect > p { font-size: 15px; line-height: 1.2; margin-bottom: 25px; text-align: center; padding: 20px; width: 100%; border-radius: 8px; }
.redirect.success > p { background-color:  #3ddb34; color: #fff; }
.redirect.error > p { background-color:  #ed4646; color: #fff; }

@media all and (max-width: 800px) {
	.redirect { margin: 40px 20px; }
}


/* styles remis en forme pour les contenus issus de wysiwyg
---------------------------------------------------------------------- */
.bloc-content .content {font-size:13px; line-height: 16px; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
.bloc-content .content ul {margin:8px 0 8px 8px;  list-style:disc;}
.bloc-content .content li {margin-left:12px;}
.bloc-content .content li li {list-style:circle;}
.bloc-content .content li li li {list-style:diamond;}



/* Header
---------------------------------------------------------------------- */
body > .container {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	background: #2F2C2F;
	min-height: 30px;
	width: 100%;
}
body > header .logo {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 0 25px;
	z-index: 2;
	height: 200px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
body > header .logo.align-start { justify-content: flex-start; }
body > header .logo.align-center { justify-content: center; }
body > header .logo.align-right { justify-content: flex-end; }
body > header .logo img { max-height: 150px; }
@media all and (max-width: 699px) {
	body > header .logo { justify-content: center; }
}

body > header .banner {
	min-height: 250px;
	position:relative;
	display: flex;
}
body > header .banner > img {position:absolute; width:100%; height:100%; object-fit: cover;  z-index:0;}
body > header .banner .container {position:relative; width:100%; height:100%; top:0; left:0; z-index:2;}


body .wrapBanner {width:100%; max-width:1170px; height:100%; margin: 0 auto;}
body .banner .wrapBanner {padding:120px 0 0 0; text-align: right;}
body .wrapBanner > h1 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: bold; padding: 0 25px; font-size: 80px; }

body .wrapBanner.task-header { padding:70px 0 0 0; text-align: left;}
body .wrapBanner.task-header > h1 { color: #fff; font-size:48px; text-align: left; padding: 0;}
body .wrapBanner.task-header > h2 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-weight: bold; font-size:32px; text-align: left; font-variant: normal; text-transform: none; position:relative; padding:5px 0;}
body .wrapBanner.task-header > h2 .space { display: inline-block; width:30px; }
body .wrapBanner.task-header > h2 .sub { display: inline-block; margin-left:20px; width:20px; height:20px; border:#fff solid; border-width: 0 0 2px 2px; top:-10px; position: relative; }
body .wrapBanner h1[jsinfos],
body .wrapBanner h2[jsinfos] {cursor: pointer;}

@media all and (max-width: 999px) {
	body > header .logo { justify-content: flex-start; }
	body .wrapBanner > h1 { font-size: 40px; text-align: center; }
}

.container .profil {
	padding: 10px 0;
	text-align: right;
	position: relative;
}
.container .profil h3 {text-align: right; padding-right:75px;}
.container .profil h3,
.container .profil h3 a {color:#fff; font-size: 16px; font-weight: 300;}
.container .profil .image {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border: 5px solid #2F2C2F;
    border-radius: 100%;
	background: center center no-repeat;
	background-size: cover;
}
.container .profil .image.user .initial {width:50px; height: 50px;}

.container.overhead > .logo {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 25px;
	z-index: 2;
	height: 61px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.container.overhead > .logo > a { display: block; height: 100%;  border: solid #2F2C2F; border-width: 0 5px 5px 5px; border-radius: 0 0 16px 16px; padding:10px; background: #fbfbfb;}
.container.overhead > .logo img { display: block; height: 100%; object-fit: contain;  }




/* -------------------------------------------------------------------
----------------------------------------------------------------------
								STRUCTURE
----------------------------------------------------------------------
---------------------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; }

/*  Navigation
------------------- */
nav.mainNav {position:fixed; bottom:0; display:flex; z-index: 101; left: 0; border-top: 1px solid #A6A7A8; background: #fff; transition: opacity 0.5s ease;}
nav.mainNav::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #F1F2F2;
}
nav.mainNav .menuSmart {cursor: pointer;}
nav.mainNav .smallLogo { padding:4px 10px; flex:0; align-self: center; opacity: 0; transition: opacity 0.5s ease; }
nav.mainNav .smallLogo img {height: 32px; max-width: 100px;}
nav.mainNav > div {text-align: center; flex:1; align-self: flex-end;}
nav.mainNav > div > i.fa { display:none; }


nav.mainNav > div > ul {font-size:0; display: inline-block; transition: padding 0.5s ease; display:flex; justify-content: center;}
nav.mainNav > div > ul li {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	display: inline-block;
	position:relative;
	text-transform: uppercase;
	transition:border-color 0.3s ease;
	cursor: pointer;
}
nav.mainNav > div > ul > li.selected,
nav.mainNav > div > ul > li:hover,
nav.mainNav > div > ul > li.selected a,
nav.mainNav > div > ul > li:hover a {color: #664f73;}
nav.mainNav > div > ul > li a {padding: 0 25px 25px 25px; color:#2F2C2F; display: block; }
nav.mainNav > div > ul > li > ul {
	position:absolute;
	top:44px;
	overflow:hidden;
	max-height: 0px;
	border-radius: 0 0 10px 10px;
	z-index:200;
	background: #151515;
	transition: max-height 0.5s ease 0s;
}
nav.mainNav > div > ul > li:hover ul {display:block; max-height: 210px;}
nav.mainNav > div > ul > li  li { white-space: nowrap; width:100%; border-bottom: 1px solid #444;}
nav.mainNav > div > ul > li  li:hover {border-bottom:none; background:#a00;}

nav.mainNav.scroll > div > ul {padding:0;}
nav.mainNav.scroll .smallLogo,
.simpleHeader nav.mainNav .smallLogo {opacity: 1;}


nav.mainNav > div > ul > li a span.icon {
	display: block;
	position: relative;
	width: 75px;
	height: 50px;
	margin: -15px auto 0 auto;
	border: 1px solid #A6A7A8;
	border-radius: 100%;
	background-color: #FFFFFF;
	text-align: center;
	line-height: 50px;
}
nav.mainNav > div > ul li a span.icon i {
	position: relative;
	font-size: 22px;
}
nav.mainNav > div > ul li a span.icon:before {
	content: "";
	display: block;
	position: absolute;
	width: calc(100% + 2px);
	height: 35px;
	bottom: -1px;
	left: -1px;
	background-color: #FFFFFF;
}

nav.mainNav > div > ul li.selected li a,
nav.mainNav > div > ul li:hover li a {
	color: #2F2C2F;
}
nav.mainNav > div > ul li.selected:before,
nav.mainNav > div > ul li:hover:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background-color: #664F73;
}
nav.mainNav > div > ul li:last-child {
	margin: 0;
}



/* Page
---------------------------------------------------------------------- */
ul.ariane, nav.breadcrumb { display: none; }


/* Modal
---------------------------------------------------------------------- */
.classic-modal {
	height: auto;
	left: 30%;
	max-width: 630px;
	min-width: 300px;
	top: 0;
	width: 50%;
	z-index: 20000;
	background:rgba(255,255,255,0.9);
	border-radius: 15px;
	border: 1px solid #A6A7A8;
	box-shadow: 0 0 25px rgba(0,0,0,0.2);
}
.simple-modal {
	height: auto;
	left: 50%;
	max-width: 630px;
	min-width: 300px;
	position: fixed;
	top: 0;
	transform: translateX(-50%);
	visibility: hidden;
	width: 50%;
	z-index: 20000;
	background:rgba(255,255,255,0.9);
	border-radius: 15px;
	border: 1px solid #A6A7A8;
	box-shadow: 0 0 25px rgba(0,0,0,0.2);
}
.modal.small {
	max-width: 400px;
	min-width: 250px;
}
.modal.big {
	left:20vw;
	width: 75vw;
	max-width: none;
}
.modal > .title {
	padding: 15px 45px 15px 15px;
	font-size: 16px;
	font-variant: small-caps;
	background: #fbfbfb;
	color: #8e7499;
	letter-spacing: 2px;
	cursor: pointer;
	border-radius: 15px 15px 0 0;
	border-bottom: 1px solid #e6e7e8;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.modal > .title > span { font-weight: bold; }
.modal.on {visibility: visible; top: 6vh;}
.modal .simpleModal-content {
	margin: 0 auto;
	opacity: 0;
	position: relative;
	transform: translateY(-50%);
	transition: all 0.3s;
	padding: 10px;
}
.modal .classicContent {
	padding: 10px;
	background: #fff;
	opacity: 1;
}
.modal.on .simpleModal-content {border-radius: 0 0 3px 3px; opacity: 1; transform: translateY(0%);}

.simpleModal-overlay {
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: all 0.3s;
	visibility: hidden;
	width: 100%;
	z-index: 2000;
}
.modal.on ~ .simpleModal-overlay {background-color: rgba(100, 100, 100, 0.8); opacity: 1; visibility: visible;}
.modal h3 {font-size: 2.4em;	font-weight: normal; padding: 0.4em; text-align: center; color:#fff;}

.modal .wrap-form {padding: 10px;}
.modal .wrap-form label {color:#fff;}
.modal .wrap-form .btn {
	border-radius: 6px;
	cursor: pointer;
	display: block;
	margin: 10px auto;
	padding: 10px 20px;
	font-variant: small-caps;
	background: #4343da;
	font-size:16px;
}
.modal .wrap-form .btn:hover {color:#4343da; background: #fff;}

.modal .products,
.modal .nav {display: flex; justify-content: center;	text-align: center;}
.modal h4 {margin: 15px 0;}
.modal h4,
.modal .price {font-size: 18px;}
.modal img {max-height: 250px; object-fit: contain; width: 100%;}
.modal .nav div {flex: 1;}

.modal > .close::before  {
	font-family: FontAwesome;
	content:"\f00d";
	background: transparent;
	color: #664f73;

	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #e6e7e8;
	border-top-right-radius: 15px;

	font-size: 22px;
	font-weight: normal;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;

	right: 0;
	top: 0;

	width: 47px;
	height: 47px;
	z-index:1;
	cursor: pointer;

	transition: all 0.2s ease-in;
}
.modal > .close:hover::before {
	background: #664f73;
	color: #fff;
}

.modal#askConfirmation .askMessage {
	padding: 15px 0;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.4em;
}
.modal#askConfirmation nav.actions {
	text-align: center;
}
.modal nav.actions { margin: 15px 0; }
.modal nav.actions.center { text-align: center; }
.modal nav.actions.left { text-align: left; }
.modal nav.actions.right { text-align: right; }
.modal article > div {
	margin: 5px 0;
}
.modal article > div.label {
	font-size: 14px;
	color: #8e7499;
}

.modal .mission-details {
	display: flex;
	flex-wrap: wrap;
}
.modal .mission-details > article { flex: 1 1 50%; }
.modal .mission-details > article.full-width { flex: 1 1 100%; }

/* Éléments génériques
---------------------------------------------------------------------- */
figure.user-pic > img {  }
figure.company-pic > img {  }


/* Rubrique
---------------------------------------------------------------------- */


/* Bloc Onglets
---------------------------------------------------------------------- */
.bloc-tabs { max-width: 1200px; margin: 0 auto; padding: 0 25px; }
.bloc-tabs .tab { padding: 0; margin: 25px 0; overflow: hidden; }
.tab > .content { display: block; padding: 15px; }

/* Bloc Onglets - Accordéon
---------------------------------------------------------------------- */
.bloc-tabs.mode-accordion .tab > header {
	font-variant: small-caps;
	background: #8e7499;
	padding-right: 65px;
	letter-spacing: 2px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.bloc-tabs.mode-accordion .tab > header > h2 { color: #fff; font-size: 16px; }
.bloc-tabs.mode-accordion .tab > header > h2 > i { vertical-align: middle; padding-bottom: 2px; }
.bloc-tabs.mode-accordion .tab.form-tofill > header > h2 > i { color: var(--color-error); }
.bloc-tabs.mode-accordion .tab > header > i { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; color: #fff; font-size: 22px; height: 100%; width: 50px; transition: transform 0.3s; }
.bloc-tabs.mode-accordion .tab.expand > header > i { transform: rotateX(180deg); }

@media all and (max-width: 600px) {
	.bloc-tabs {
		padding: 0 5px;
	}
}

/* Bloc Formulaire
---------------------------------------------------------------------- */
form nav.actions { text-align: right; }
nav.actions.center { text-align: center; }
nav.actions.left { text-align: left; }
nav.actions.right { text-align: right; }

/* Loader
---------------------------------------------------------------------- */
.loader { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.loader > i { font-size: 36px; margin-bottom: 30px; }
.loader > span { font-size: 18px; line-height: 1.2; }

/* Liste de "cartes"
---------------------------------------------------------------------- */
.cards-list > article { padding: 0; margin-bottom: 10px; border: 1px solid #A6A7A8; font-size: 14px;  }
.cards-list > article.box:first-of-type { margin-top: 0; }
.cards-list > article.box:last-of-type { margin-bottom: 0; }
.cards-list > article header,
.cards-list > article header { display: flex; padding: 10px 15px; border-bottom: 1px solid #A6A7A8; background: #fbfbfb; }
.cards-list > article header > .title { font-weight: bold; font-size: 1.1em; }
.cards-list > article header > .date,
.cards-list > article header > .align-right { margin-left: auto; }
.cards-list > article header > .state-icon:not(.forced)::before { content: '\f128'; font-family: 'FontAwesome'; font-size: 15px; margin-right: 5px; color: #777; }
.cards-list > article header > .state-icon.forced > i { font-size: 15px; margin-right: 5px; color: var(--state-color, #777); }
.cards-list > article > div.description { display: flex; padding: 15px; }
.cards-list > article > div.description > figure { height: 150px; max-width: 30%; margin-right: 10px; }
.cards-list > article > div.description > figure > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.cards-list > article > div.description > .details { flex: 1 1; }
.cards-list > article > div.description > .details > table tr > th { min-width: 100px; white-space: nowrap; padding: 4px 3px 4px 0; }
.cards-list > article > div.description > .details > table tr > td { padding: 4px 0; }
.cards-list > article > div.description > div.infos { flex: 1 1; padding: 0 10px; }
.cards-list > article > div.description > div.infos > span { display: block; }
.cards-list > article > div.description > div.infos > div.title { font-size: 1.1em; padding: 10px 0; font-weight: bold; }
.cards-list > article > div.description > div.infos > span:not(:last-of-type) { margin-bottom: 8px; }
.cards-list > article > div.description > div.infos > span > i { width: 20px; text-align: center; font-size: 18px; color: #664f73; margin-right: 5px; vertical-align: middle; }
.cards-list > article > div.description > div.infos > span > img { width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; border: 1px solid var(--main-color); object-fit: cover; vertical-align: middle; }
.cards-list > article > div.description > div.infos > span > span { display: inline-block; vertical-align: middle; }
.cards-list > article > div.description > aside.actions { flex: 0 1 20%; display: flex; align-items: end; justify-content: start; flex-direction: column; }
.cards-list > article > div.description > aside.actions.vertical { display: flex; flex-direction: column; align-items: end; }
.cards-list > article > div.description > aside.actions > button { display: block; text-align: left; }
.cards-list > article > div.description > aside.actions > button:not(:last-of-type) { margin-bottom: 10px; }
.cards-list > nav.filters { margin-bottom: 15px; }
.cards-list > nav.filters > select { display: inline-block; border-radius: 0; width: auto;}
.cards-list > nav.actions { display: flex; padding: 15px 0; justify-content: flex-end; }
.cards-list > nav.actions.left { justify-content: flex-start; }
.cards-list > nav.actions.center { justify-content: center; }
.cards-list > nav.actions.right { justify-content: flex-end; }
.cards-list > nav.actions > .left { margin-right: auto; }
.cards-list > nav.actions > .right { margin-left: auto; }

/* Liste d'"items"
---------------------------------------------------------------------- */
.items-list > nav.actions { display: flex; padding: 15px 0; justify-content: flex-end; }
.items-list > nav.actions.left { justify-content: flex-start; }
.items-list > nav.actions.center { justify-content: center; }
.items-list > nav.actions.right { justify-content: flex-end; }
.items-list > nav.actions > .left { margin-right: auto; }
.items-list > nav.actions > .right { margin-left: auto; }
.items-list > nav.filters { /* TODO: List filters */ }
.items-list ul { display: block; padding: 0; }
.items-list ul > li { display: flex; align-items: center; justify-content: space-between; }
.items-list ul > li:nth-child(odd) { background: #ede9ee; }
.items-list ul > li.group { background: var(--main-color); color: #fff; }
.items-list ul > li.group:not(:first-child) { margin-top: 40px; }
.items-list ul > li > .type { flex: 0 0 25px; width: 25px; min-height: 100%; background: var(--line-color, var(--main-color)); align-self: stretch;  position: relative; margin-right: 10px; }
.items-list ul > li > .type::before {
	content: '?'; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #fff;
	position: absolute; top: 50%; left: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
.items-list ul > li > .icon { padding: 10px; width: 40px; }
.items-list ul > li > .icon > [class*='-icon']:not(.forced)::before { content: '\f128'; font-family: 'FontAwesome'; font-size: 20px; margin-right: 5px; color: #777; }
.items-list ul > li > .icon > [class*='-icon'].forced > i { font-size: 15px; margin-right: 5px; color: var(--state-color, #777); }
.items-list ul > li > .infos-main { display: flex; flex-direction: row; align-items: center; }
.items-list ul > li > .infos-main > .date { flex: 0 0 80px; font-size: 22px; line-height: 1.1; width: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 0; }
.items-list ul > li > .infos-main > .date > .day { line-height: 1.3; font-weight: bold; }
.items-list ul > li > .infos-main > .date > .date { font-size: 0.7em; }
.items-list ul > li > .infos-main > .price { flex: 1 1 100px; font-size: 16px; min-width: 130px; text-align: right; }
.items-list ul > li > .infos-main > .price.green { color: #0d9124; }
.items-list ul > li > .infos-main > .price.red { color: #ba111a; }
.items-list ul > li > .infos-main > .price.blue { color: #0e5cc8; }
.items-list ul > li > .infos-main > .price > .amount { line-height: 1.5; font-weight: bold; }
.items-list ul > li > .infos-main > .price > .currency { font-size: 0.7em; }
.items-list ul > li > .infos-main > .price > .info { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.75em; }
.items-list ul > li > .infos-main > .price > .info > label { font-weight: bold; }
.items-list ul > li > .infos { display: flex; flex-direction: column; padding: 10px 10px 10px 40px; flex: 1 1; }
.items-list ul > li > .infos > span { line-height: 1.3; display:inline-block; }
.items-list ul > li > .infos > span.title { font-weight: bold; font-size: 15px; margin-bottom: 5px; }
.items-list ul > li.group > .infos > span.title { margin-bottom: unset; }
.items-list ul > li > .infos i { font-size: 14px; width: 24px; text-align: left; }
.items-list ul > li > nav.actions { display: flex; padding: 10px; }
.items-list ul > li > nav.actions.vertical { flex-direction: column; }
.items-list ul > li .status { color: inherit; }
.items-list > .list-with-preview { display: flex; flex-direction: row; }
.items-list > .list-with-preview ul { flex: 1 1 45%; }
.items-list > .list-with-preview ul > li.open-preview { cursor: pointer; }
.items-list > .list-with-preview ul > li.open-preview.on { background: var(--line-color, var(--main-color)) !important; color: #fff; }
.items-list > .list-with-preview ul > li.open-preview.on > .icon > .state-icon::before { color: #fff !important; }
.items-list > .list-with-preview ul > li.open-preview.on > .infos-main > .price { color: #fff; }
.items-list > .list-with-preview .preview-panel { position: sticky; top: 70px; display: flex; flex: 1 1 55%; max-width: 10%; overflow: hidden; flex-direction: column; border: 1px solid var(--main-color); max-height: calc(100vh - 200px); }
.items-list > .list-with-preview .preview-panel:not(.on) { display: none; }
.items-list > .list-with-preview .preview-panel > header { position: relative; background: var(--main-color); color: #fff; width: 100%; }
.items-list > .list-with-preview .preview-panel > header > .title { position: relative; font-size: 14px; padding: 15px 45px 15px 15px; margin-left: 10px; height: 45px; display: flex; align-items: center; }
.items-list > .list-with-preview .preview-panel > header > .title::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; background: #eee; display: block; }
.items-list > .list-with-preview .preview-panel > header > .infos { display: flex; flex-wrap: wrap; background: rgba(255, 255, 255, 0.2); font-size: 14px; }
.items-list > .list-with-preview .preview-panel > header > .infos:not(:empty) { padding: 15px; }
.items-list > .list-with-preview .preview-panel > header > .infos > span { flex: 1 1 33.3333333%; max-width: 33.33333333%; list-style: 1.3; }
.items-list > .list-with-preview .preview-panel > header > .infos i { font-size: 16px; width: 30px; text-align: center; }
.items-list > .list-with-preview .preview-panel > header > .close { position: absolute; top: 0; right: 0; height: 45px; width: 45px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.items-list > .list-with-preview .preview-panel > header > .close::before { content: '\f00d'; font-family: 'FontAwesome'; font-size: 16px; color: #fff; }
.items-list > .list-with-preview .preview-panel > nav { display: flex; justify-content: flex-end; width: 100%; padding: 10px; }
.items-list > .list-with-preview .preview-panel > .panel-content { display: flex; flex-direction: column; flex: 1 1; width: 100%; min-height: 400px; }
.items-list > .list-with-preview .preview-panel > .panel-content > .loader { flex: 1 1; width: 100%; }
.items-list > .list-with-preview .preview-panel > .panel-content > iframe { flex: 1 1; width: 100%; height: 100%; min-height: 400px; }
.items-list > div.empty { padding: 25px; text-align: center; font-size: 1.2em; }

@media all and (max-width: 999px) {
	.items-list ul > li > .infos-main { flex-direction: column; padding: 5px 0; }
	.items-list ul > li > .infos-main > .date { flex-basis: auto; font-size: 20px; padding: 5px; }
	.items-list ul > li > .infos-main > .amount { flex-basis: auto; font-size: 14px; padding: 5px; }

	.items-list ul > li > .infos-main > .price { flex-basis: auto; }
}

/* Liste d'"items" - Devis
 * - état
 * - référence
 * - contact / société
 * - date
 * - bouton lien
---------------------------------------------------------------------- */

/* Liste d'"items" - Facture
---------------------------------------------------------------------- */
.items-list.bills { --color-fa: #5e2281; --color-av: #9fa5ac; }
.items-list.bills ul > li.bill { min-height: 70px; }
.items-list.bills ul > li.bill.state-2 > .icon > .state-icon::before { content: '\f00c'; color: #0d9124; }
.items-list.bills ul > li.bill.state-1 > .icon > .state-icon::before { content: '\f09d'; color: #ba111a; }
.items-list.bills ul > li.bill.state-1.late > .icon > .state-icon::before { content: '\f071'; color: #ba111a; }
.items-list.bills ul > li.bill.state-0 > .icon > .state-icon::before { content: '\f068'; color: #aaa; }
.items-list.bills ul > li.bill.state-0.cancelled > .icon > .state-icon::before { content: '\f05e'; color: #aaa; }
.items-list.bills ul > li.bill.cancelled { opacity: 0.4; }
.items-list.bills ul > li.bill.type-fa { --line-color: var(--color-fa); }
.items-list.bills ul > li.bill.type-fa > .type::before { content: 'Facture'; }
.items-list.bills ul > li.bill.type-av { --line-color: var(--color-av);  }
.items-list.bills ul > li.bill.type-av > .type::before { content: 'Avoir'; }
.items-list.bills ul > li.bill.type-fa.late { background: #fff1f1; }
.items-list.bills ul > li.bill.type-fa.late:nth-child(odd) { background: #ffe8e8; }
.items-list.bills ul > li.bill.type-fa.late > .infos > span.msg-late { color: #ff7a00; font-weight: bold; font-size: 14px; white-space: nowrap; margin-bottom: 5px; margin-top: -5px; }
.items-list.bills ul > li.bill.type-fa.late > .infos > span.termdate { color: #ff7a00; font-weight: bold; }
.items-list.bills ul > li.bill.type-fa > .infos > span.paid { font-weight: bold; color: #0d9124; }
.items-list.bills ul > li.bill.type-fa > .infos > span.paid-partial { font-weight: bold; color: #ba111a; }
.items-list.bills.panel-on ul > li.bill .billPay { display: none; }
.items-list.bills .preview-panel[data-billtype="fa"] { border-color: var(--color-fa); }
.items-list.bills .preview-panel[data-billtype="fa"] > header { background-color: var(--color-fa); }
.items-list.bills .preview-panel[data-billtype="av"] { border-color: var(--color-av); }
.items-list.bills .preview-panel[data-billtype="av"] > header { background-color: var(--color-av); }

/* Liste d'"items" - Paiements
---------------------------------------------------------------------- */
.items-list.payments { --color-payment: #5e2281; --color-rbst: #9fa5ac; }
.items-list.payments ul > li.way-1 { --line-color: var(--color-payment); }
.items-list.payments ul > li.way-1 > .type::before { content: 'Paiement'; }
.items-list.payments ul > li.way-0 { --line-color: var(--color-rbst);  }
.items-list.payments ul > li.way-0 > .type::before { content: 'Rbst'; }

/* Signature devis
---------------------------------------------------------------------- */
.app-sign >.object-view > header { margin-bottom: 40px; }
.app-sign > .object-view > header > .contact { display: none; }

.signing-module { display: flex; align-items: stretch; margin-bottom: 120px; }
.signing-module > aside { flex: 1 1 50%; max-width: 50%; }
.signing-module > aside > nav { padding: 10px 0; }
.signing-module > section { flex: 1 1 50%; max-width: 50%; display: flex; justify-content: center; align-items: center; }


.signing-module .quote-preview > object { width: 100%; height: 50vh; max-height: 880px; }

.signing-module > .simple-sign { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 400px; max-width: 800px; margin: 0 auto; }
.signing-module .sign-checkbox { display: flex; flex-direction: column; padding: 25px 0; align-items: center; }
.signing-module .sign-checkbox > label.yn-checkbox { margin-bottom: 20px; }
.signing-module .sign-checkbox > label.yn-checkbox + label { font-size: 15px; }

.signing-module .signing-area nav.actions { text-align: center; }

.signing-module .signing-area form > p { padding: 10px; font-size: 14px; text-align: center; }


/* Module Canvas */
.signing-module.mode-canvas .signing { position: relative; width: 300px; margin: 0 auto; border: 2px solid var(--main-color); border-radius: 6px; height: 180px; }
.signing-module.mode-canvas .signing button { position: absolute; top: 0; left: 0; font-size: 0.8em; border-radius: 0; border-bottom-right-radius: 4px; margin: 0; z-index: 20; }
.signing-module.mode-canvas .signing canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Paiement
---------------------------------------------------------------------- */
.payment-area .payment-request .btn { display: none; }

/* Détails objet
---------------------------------------------------------------------- */
.object-view {}
.object-view > header { background: #664f73; color: #fff; border: 1px solid #584662; border-radius: 3px; }
.object-view > header a { color: #fff; }
.object-view > header a:hover { color: #2c133a; }
.object-view > header > h1 { font-size: 22px; font-weight: normal; line-height: 36px; margin: 10px 0; padding: 0; color: #fff; }
.object-view > header > nav.shortcuts { display: flex; justify-content: center; align-items: center; padding: 10px 0; flex-wrap: wrap; }
.object-view > header > nav.shortcuts > a { cursor: pointer; padding: 15px; }
.object-view > header > nav.shortcuts > a > i { font-size: 40px; color: #fff; transition: color 0.3s ease-in; }
.object-view > header > nav.shortcuts > a > i:hover { color: #2c133a; }
.object-view > header > .object-state { display: flex; justify-content: center; align-items: center; padding: 0 15px; margin: 0 auto; margin-bottom: 20px; max-width: 600px;  }
.object-view > header > .object-state .state-icon { display: inline-flex; justify-content: center; align-items: center; margin-right: 8px; background: #666; border: 1px solid #666; color: #fff; border-radius: 50%; padding: 5px; width: 34px; height: 34px; }
.object-view > header > .object-state .state-icon::before { font-family: 'FontAwesome'; font-size: 20px;  }
.object-view > header > .object-state .state-label { font-size: 16px; }
.object-view > header > .stateflow { --sf-color: var(--state-color, #2c133a); }
.object-view > header > .stateflow.state-quote { --sf-color: #056a82; }
.object-view > header > .stateflow.state-confirm { --sf-color: #0d9124; }

.object-view > header > .summary { padding: 15px; }
.object-view > header > .summary > div { background: rgba(255, 255, 255, 0.2); border: 1px solid #2c133a; border-radius: 5px; margin: 0 auto; max-width: 600px; }
.object-view > header > .summary > div > .title { background: #2c133a; font-size: 16px; text-align: center; padding: 10px;  }
.object-view > header > .summary > div > .content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px;  }
.object-view > header > .summary > div > .content > span { margin: 7px; }
.object-view > header > .summary > div > .content > span > i { color: #2c133a; font-size: 26px; margin-right: 5px; vertical-align: middle; }
.object-view > header > .summary > div > .content > span > span { font-size: 16px; vertical-align: middle; }
.object-view > header > .summary.spec > div > .content { justify-content: flex-start; }
.object-view > header > .summary.spec > div > .content > span { flex: 0 50%; margin: 0; padding: 7px; font-size: 14px; }
.object-view > header > .summary.spec > div > .content > span > strong { vertical-align: middle; }
.object-view > header > .summary.spec > div > .content > span > span { font-size: 14px; }
.object-view > header > .contact { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px; }
.object-view > header > .contact > div { margin: 10px 25px; }
.object-view > header > .contact > div > .title { font-size: 20px; text-align: center; padding: 15px 0; }

.object-contact { display: flex; }
.object-contact > figure > img { width: 120px; height: 120px; border: 1px solid #2c133a; border-radius: 50%; object-fit: cover; }
.object-contact > div { display: flex; flex-direction: column; padding: 10px; }
.object-contact > div > .name { flex: 0 1; font-size: 16px; margin-bottom: 10px; }
.object-contact > div > .infos { flex: 1 1; display: flex; flex-direction: column; }
.object-contact > div > .infos > span {}
.object-contact > div > .infos > span:not(:last-of-type) { margin-bottom: 5px; }
.object-contact > div > .infos > span > i { width: 20px; font-size: 18px; margin-right: 5px; text-align: center; vertical-align: middle; }
.object-contact > div > .infos > span > span { vertical-align: middle; }


.object-contact.small > figure > img { width: 80px; height: 80px; }
.object-contact.small > div > .infos > span > i { width: 12px; font-size: 10px; }
.object-contact.small > div > .name { font-size: 12px; }

.object-view > header > .contact .client-contacts { width: 100%; }
.object-view > header > .contact .client-contacts > ul { display: flex; justify-content: center; width: 100%; flex-wrap: wrap; }

@media all and (max-width: 700px) {
	.object-view > header > .contact { flex-direction: column; align-items: center; }
}
@media all and (max-width: 400px) {
	.object-contact { display: flex; flex-direction: column ; }
	.object-view > header > .summary.spec > div > .content > span { flex: 0 100%; }
}



/* StateFlow
---------------------------------------------------------------------- */
.stateflow { position: relative; margin: 40px 0; --sf-color: #2c133a; --sf-bg: #ccc; --sf-line-height: 14px; padding: 0 20px; background: #eee; padding: 20px; margin: 20px; border-radius: 8px; border: 1px solid #2c133a; }
.stateflow .line { position: relative; background: var(--sf-bg); height: var(--sf-line-height); width: 100%; margin: 10px 0; border-radius: 10px; overflow: hidden; }
.stateflow .line > span { position: absolute; background: var(--sf-color); top: 0; left: 0; height: var(--sf-line-height); }
.stateflow ul { width: 100%; display: flex; justify-content: space-between; }
.stateflow ul > li { position: relative; display: flex; justify-content: center; align-items: center; color: var(--main-color); flex: 1 1; height: 34px; font-weight: bold;  font-size: 1.1em; }
.stateflow ul > li > i { display: flex; justify-content: center; align-items: center; font-size: 16px; content: ''; font-family: 'FontAwesome'; position: absolute; top: -34px; height: 34px; width: 34px; background: var(--sf-bg); border-radius: 50%; left: 50%; transform: translateX(-50%); }
.stateflow ul > li.on { color: var(--sf-color); }
.stateflow ul > li.on > i { background: var(--sf-color); color: #fff; }

@media all and (max-width: 599px) {
	.stateflow ul > li { height: 100px; width: 30px; }
	.stateflow ul > li > span { position: absolute; transform: rotateZ(-70deg) translateY(-16px); width: 100px; text-align: right; padding-right: 10px; }
}

/* Bloc Form
---------------------------------------------------------------------- */
.bloc-form {}
.bloc-form > .message { border-radius: 3px; padding: 15px 10px; color: #fff; margin: 10px 0; text-align: center; font-size: 1.2em; }
.bloc-form > .message.hidden { display: none; }
.bloc-form > .message.ok { background: #45bb5a; border: 1px solid #0d9124; }
.bloc-form > .message.error { background: #ba111a; border: 1px solid #97181f; }
.bloc-form > .message.error > .errors { background: #ec4b53; border-radius: 3px; margin: 15px 10px; box-shadow: inset 0 0 15px rgba(50, 0, 0, 0.2); }
.bloc-form > .message.error > .errors li { margin-left: 0; list-style: none; }
.bloc-form > .actions { text-align: right; }
.bloc-form > .actions > .btn.cancel { background: #ba111a; }
.bloc-form > .actions > .btn.edit { background: #056a82; }
.bloc-form > .display { display: flex; flex-wrap: wrap; }
.bloc-form > .display .field { flex: 1 1 100%; font-size: 14px; padding: 5px; }
.bloc-form > .display .field > span { display: block; }
.bloc-form > .display .field > .title { font-size: 12px; color: #727571; margin-bottom: 5px; }
.bloc-form > .display .field > .value { font-weight: bold; color: #664f73; line-height: 22px; }
.bloc-form > .display .field > .value > .answer-icon::before { display: flex; justify-content: center; align-items: center; font-family: 'FontAwesome'; color: #fff; border-radius: 50%; height: 22px; width: 22px; font-size: 12px; }
.bloc-form > .display .field > .value > .answer-icon.yes::before { content: '\f00c'; background: #0d9124; }
.bloc-form > .display .field > .value > .answer-icon.no::before { content: '\f00d'; background: #ba111a; }
.bloc-form > .display .field.empty > .value > i { font-size: 14px; }
.bloc-form > .display .field.empty.required > .value > i { color: var(--color-error); }
.bloc-form > .display .field.empty > .value { font-weight: normal; font-style: italic; color: #777; font-size: 0.8em; }

.bloc-form > .display .field.mod-photo {}
.bloc-form > .display .field.mod-photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 2px solid #664f73; }

.bloc-form > .display .group { flex: 1 1 100%; margin: 0 0 10px 10px; padding: 5px; }
.bloc-form > .display .group > header { position: relative; cursor: pointer; width: 100%; padding: 10px 0; background: #8e7499; color: #fff; border-radius: 3px; transition: background-color 0.3s ease; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.bloc-form > .display .group > header:hover,
.bloc-form > .display .group.expand > header { background: #664f73; }
.bloc-form > .display .group > header > .group-title { padding-left: 10px; font-weight: bold; }
.bloc-form > .display .group > header > i { position: absolute; right: 0; padding-right: 10px; transition: transform 0.3s ease; }
.bloc-form > .display .group.expand > header > i { transform: rotateX(180deg); }
.bloc-form > .display .group > .fields { display: flex; flex-wrap: wrap; }
.bloc-form > .edit > form button { background: #0d9124; }

.bloc-form.edit > .display { display: none; }
.bloc-form.edit > .actions > .btn.edit { display: none; }
.bloc-form:not(.edit) > .edit { display: none; }
.bloc-form:not(.edit) > .actions > .btn.cancel { display: none; }

.bloc-form .digiForm { display: flex; flex-wrap: wrap; }
.bloc-form .digiForm section { display: flex; flex: 1 1 100%; flex-wrap: wrap; }
.bloc-form .digiForm article { flex: 1 1 100%; padding: 0 5px; margin: 10px 0; }
.bloc-form .digiForm .form-title { flex: 1 1 100%; }
.bloc-form .digiForm input,
.bloc-form .digiForm select { transition: border-color 0.3s ease; }
.bloc-form .digiForm input:focus,
.bloc-form .digiForm select:focus { border-color: #664f73; box-shadow: none; color: #000; }

.bloc-form .digiForm article.col-sm-9,
.bloc-form .digiForm section.col-sm-9,
.bloc-form > .display .field.col-sm-9 { flex-basis: 75%; max-width: 75%; }
.bloc-form .digiForm article.col-sm-8,
.bloc-form .digiForm section.col-sm-8,
.bloc-form > .display .field.col-sm-8 { flex-basis: 66.666666667%; max-width: 66.666666667%; }
.bloc-form .digiForm article.col-sm-6,
.bloc-form .digiForm section.col-sm-6,
.bloc-form > .display .field.col-sm-6 { flex-basis: 50%; max-width: 50%; }
.bloc-form .digiForm article.col-sm-4,
.bloc-form .digiForm section.col-sm-4,
.bloc-form > .display .field.col-sm-4 { flex-basis: 33.333333333%; max-width: 33.333333333%; }
.bloc-form .digiForm article.col-sm-3,
.bloc-form .digiForm section.col-sm-3,
.bloc-form > .display .field.col-sm-3 { flex-basis: 25%; max-width: 25%; }

.bloc-form .digiForm label,
.bloc-form .digiForm .formCheckbox label { font-size: 10px; }

@media all and (max-width: 499px) {
	.bloc-form .digiForm article,
	.bloc-form .digiForm section,
	.bloc-form > .display .field { flex-basis: 100% !important; max-width: 100% !important; }
}

/* Form - Module Upload Photo
---------------------------------------------------------------------- */
.digiForm article.trombiPicture { text-align: center; }
.digiForm article.trombiPicture figure img { width:30%; border-radius: 50%; width: 180px; height: 180px; object-fit: cover; border: 2px solid #664f73;  }
.digiForm article.trombiPicture span { font-size: 12px; }
.digiForm article.trombiPicture span.newPic { display: block; cursor: pointer; padding: 5px 0; text-align: center; }
.digiForm article.trombiPicture span.newPic:hover { text-decoration: underline; }

/* Bloc Missions
---------------------------------------------------------------------- */
.bloc-missions > article.accepted { background: #c5edc3; }
.bloc-missions > article.declined { background: #ffd5d2; }
.bloc-missions > article.archive { display: none; opacity: 0.7; }

@media all and (max-width: 600px) {
	.bloc-missions .details tr {
		display: flex;
		flex-direction: column;
	}
}

/* Liste événements
---------------------------------------------------------------------- */
.page-events .staff-state-todo > td { color: var(--color-error); }
.page-events .staff-state-invited > td { color: var(--color-warn); }
.page-events .staff-state-done > td { color: var(--color-valid); }

/* Gestion Événement
---------------------------------------------------------------------- */
.event-manager {}
.event-manager > header { background: #664f73; color: #fff; border: 1px solid #584662; border-radius: 3px; }
.event-manager > header a { color: #fff; }
.event-manager > header a:hover { color: #2c133a; }
.event-manager > header > h1 { font-size: 22px; font-weight: normal; line-height: 36px; margin: 10px 0; padding: 0; color: #fff; }
.event-manager > header > .summary { padding: 15px; }
.event-manager > header > .summary > div { background: rgba(255, 255, 255, 0.2); border: 1px solid #2c133a; border-radius: 5px; margin: 0 auto; max-width: 600px; }
.event-manager > header > .summary > div > .title { background: #2c133a; font-size: 16px; text-align: center; padding: 10px;  }
.event-manager > header > .summary > div > .content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px;  }
.event-manager > header > .summary > div > .content > span { margin: 7px; }
.event-manager > header > .summary > div > .content > span > i { color: #2c133a; font-size: 26px; margin-right: 5px; vertical-align: middle; }
.event-manager > header > .summary > div > .content > span > span { font-size: 16px; vertical-align: middle; }
.event-manager > header > .summary.spec > div > .content { justify-content: flex-start; }
.event-manager > header > .summary.spec > div > .content > span { flex: 0 50%; margin: 0; padding: 7px; font-size: 14px; }
.event-manager > header > .summary.spec > div > .content > span > strong { vertical-align: middle; }
.event-manager > header > .summary.spec > div > .content > span > span { font-size: 14px; }
.event-manager > header > .contact { display: flex; justify-content: center; flex-wrap: wrap; padding: 15px; }
.event-manager > header > .contact > div { margin: 10px 25px; }
.event-manager > header > .contact > div > .title { font-size: 20px; text-align: center; padding: 15px 0; }
.event-manager > header > .contact > div > .content { display: flex; }
.event-manager > header > .contact > div > .content > figure > img { width: 120px; height: 120px; border: 1px solid #2c133a; border-radius: 50%; object-fit: cover; }
.event-manager > header > .contact > div > .content > div { display: flex; flex-direction: column; padding: 10px; }
.event-manager > header > .contact > div > .content > div > .name { flex: 0 1; font-size: 16px; margin-bottom: 10px; }
.event-manager > header > .contact > div > .content > div > .infos { flex: 1 1; display: flex; flex-direction: column; }
.event-manager > header > .contact > div > .content > div > .infos > span {}
.event-manager > header > .contact > div > .content > div > .infos > span:not(:last-of-type) { margin-bottom: 5px; }
.event-manager > header > .contact > div > .content > div > .infos > span > i { width: 20px; font-size: 18px; margin-right: 5px; text-align: center; vertical-align: middle; }
.event-manager > header > .contact > div > .content > div > .infos > span > span { vertical-align: middle; }
.event-manager > header > nav.shortcuts { display: flex; justify-content: center; align-items: center; padding: 10px 0; flex-wrap: wrap; }
.event-manager > header > nav.shortcuts > a { cursor: pointer; padding: 15px; }
.event-manager > header > nav.shortcuts > a > i { font-size: 40px; color: #fff; transition: color 0.3s ease-in; }
.event-manager > header > nav.shortcuts > a > i:hover { color: #2c133a; }

@media all and (max-width: 700px) {
	.event-manager > header > .contact { flex-direction: column; align-items: center; }
}
@media all and (max-width: 400px) {
	.event-manager > header > .contact > div > .content { display: flex; flex-direction: column ; }
	.event-manager > header > .summary.spec > div > .content > span { flex: 0 100%; }
}

.event-manager > .details > article { border-color: #ccc; }
.event-manager > .details > article > header > h3 { font-size: 18px; color: #664f73; font-weight: normal; text-align: center; margin: 10px 0; }
.event-manager > .details > article > header > .shortcut { cursor: pointer; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; height: 46px; width: 42px; }
.event-manager > .details > article > header > .shortcut.prev { left: 0; }
.event-manager > .details > article > header > .shortcut.next { right: 0; }
.event-manager > .details > article:first-of-type > header > .shortcut.prev { display: none; }
.event-manager > .details > article:last-of-type > header > .shortcut.next { display: none; }
.event-manager > .details > article > header > .shortcut > i { color: #e8e8e8; font-size: 18px; transition: color 0.3s ease-in;  }
.event-manager > .details > article > header > .shortcut:hover > i { color: #664f73; }
.event-manager > .details > article > div { display: flex; }
.event-manager > .details > article > div > figure { flex: 1 1; max-width: 450px; max-height: 300px; }
.event-manager > .details > article > div > figure > img { width: 100%; height: 100%; object-fit: cover; }
.event-manager > .details > article > div > aside { display: flex; flex-direction: column; flex: 1 1; padding: 15px; }
.event-manager > .details > article > div > aside > table { flex: 1 1; width: 100%; }
.event-manager > .details > article > div > aside > div,
.event-manager > .details > article > div > aside > p { margin: 0 0 15px 0; }
.event-manager > .details > article > div > aside > p { font-size: 14px; line-height: 1.4em; }
.event-manager > .details > article > div > aside > nav.actions { margin-top: auto; height: 50px; }
.event-manager > .details > article > div.map { display: block; width: 100%; height: 350px; }
.event-manager > .details > article div.empty { flex: 1 1; padding: 25px; text-align: center; font-size: 1.2em; }

.event-manager > .details > article h4 { width: 100%; font-size: 1.3em; font-weight: normal; padding: 10px; background: #664f73; color: #fff; }
.event-manager > .details > article div.infos:not(.grid-item) { flex: 1 1; padding: 0 10px; }
.event-manager > .details > article div.infos > span { display: block; }
.event-manager > .details > article div.infos > div.title { font-size: 1.1em; padding: 10px 0; font-weight: bold; }
.event-manager > .details > article div.infos > span:not(:last-of-type) { margin-bottom: 8px; }
.event-manager > .details > article div.infos > span > i { width: 20px; text-align: center; font-size: 18px; color: #664f73; margin-right: 5px; vertical-align: middle; }
.event-manager > .details > article div.infos > span > span { display: inline-block; vertical-align: middle; }

/* --- Gestion Événement - Panier (générique)
---------------------------------------------------------------------- */
.event-manager .basket > table { width: 100%; }
.event-manager .basket > table > thead th { background: #664f73; color: #fff; padding: 10px; }
.event-manager .basket > table > tbody td { padding: 6px 10px; }

/* --- Gestion Événement - Flux Produits (générique)
---------------------------------------------------------------------- */
.products-workflow { display: flex; flex-direction: column; flex: 1 1; width: 100%; }
.products-workflow > nav.step { display: flex; width: 100%; }
.products-workflow > nav.step > button { position: relative; flex: 1 1; text-align: center; border: none; background: #cecece; color: #fff; height: 36px; padding: 10px; cursor: pointer; font-weight: bold; }
.products-workflow > nav.step > button:not(:last-of-type) { margin-right: 21px; }
.products-workflow > nav.step > button:not(:last-of-type)::after {
	position: absolute;
	right: -18px;
	top: 0;

	content: '';
	font-size: 0;
	border-width: 18px 0 18px 18px;
	border-style: solid;
	border-bottom-color: transparent;
	border-top-color: transparent;
	border-left-color: #cecece;

	z-index: 1;
}
.products-workflow > nav.step > button:not(:first-of-type)::before {
	position: absolute;
	left: -18px;
	top: 0;

	content: '';
	font-size: 0;
	border-width: 18px 0 18px 18px;
	border-style: solid;
	border-bottom-color: #cecece;
	border-top-color: #cecece;
	border-left-color: transparent;

	z-index: 1;
}
.products-workflow > nav.step > button:disabled { background: #f4f4f4; color: #888; cursor: default; }
.products-workflow > nav.step > button:disabled::after { border-left-color: #f4f4f4; }
.products-workflow > nav.step > button:disabled::before { border-top-color: #f4f4f4; border-bottom-color: #f4f4f4;  }

.products-workflow > nav.step > button.sent.on { background: #ba111a; color: #fff; }
.products-workflow > nav.step > button.sent.on::after { border-left-color: #ba111a; }
.products-workflow > nav.step > button.sent.on::before { border-right-color: #ba111a; }

.products-workflow > nav.step > button.received.on { background: #dd2e37; color: #fff; }
.products-workflow > nav.step > button.received.on::after { border-left-color: #dd2e37; }
.products-workflow > nav.step > button.received.on::before { border-top-color: #dd2e37; border-bottom-color: #dd2e37; }

.products-workflow > nav.step > button.gathered.on { background: #23ad3b; color: #fff; }
.products-workflow > nav.step > button.gathered.on::after { border-left-color: #23ad3b; }
.products-workflow > nav.step > button.gathered.on::before { border-top-color: #23ad3b; border-bottom-color: #23ad3b; }

.products-workflow > nav.step > button.back.on { background: #0d9124; color: #fff; }
.products-workflow > nav.step > button.back.on::before { border-top-color: #0d9124; border-bottom-color: #0d9124; }

.products-workflow > ul.products { display: block; width: 100%;}

.products-workflow > ul.products > li { display: block; width: 100%; border-left: 4px solid #cecece;  }
.products-workflow > ul.products > li.category { border-color: #555 !important; padding: 10px; font-size: 14px; font-weight: bold; background: #bbb; }

.products-workflow.step-sent > ul.products > li { border-color: #ba111a; }
.products-workflow.step-received > ul.products > li { border-color: #dd2e37; }
.products-workflow.step-gathered > ul.products > li { border-color: #23ad3b; }
.products-workflow.step-back > ul.products > li { border-color: #0d9124; }
.products-workflow.step-done > ul.products > li { border-color: #0d9124; }
.products-workflow.step-done > ul.products > li.missing { border-color: #ba111a; }
.products-workflow.step-done > ul.products > li.return { border-color: #105a6d; }
.products-workflow.step-done > ul.products > li.clean { opacity: 0.4; }

.products-workflow > ul.products > li > div.qtty-history { display: flex; width: 100%; background: #cecece; color: #fff; }
.products-workflow > ul.products > li > div.qtty-history > span { display: flex; justify-content: center; align-items: center; flex: 1 0; font-size: 16px; font-weight: bold; height: 32px; }
.products-workflow > ul.products > li > div.qtty-history > span > input { font-family: "Lato", sans-serif; background: rgba(255, 255, 255, 0.5); border: none; border-radius: 0; height: 100%; border-radius: 0; margin: 0; font-size: 16px; color: #fff; text-align: center; box-shadow: 0 0 8px inset rgba(0, 0, 0, 0.3); }
.products-workflow.step-sent > ul.products > li > div.qtty-history > span.qtty-sent { background-color: #ba111a; }
.products-workflow.step-received > ul.products > li > div.qtty-history > span.qtty-sent,
.products-workflow.step-received > ul.products > li > div.qtty-history > span.qtty-received { background-color: #dd2e37; }
.products-workflow.step-gathered > ul.products > li > div.qtty-history > span.qtty-sent,
.products-workflow.step-gathered > ul.products > li > div.qtty-history > span.qtty-received,
.products-workflow.step-gathered > ul.products > li > div.qtty-history > span.qtty-gathered { background-color: #23ad3b; }
.products-workflow.step-back > ul.products > li > div.qtty-history > span.qtty-sent,
.products-workflow.step-back > ul.products > li > div.qtty-history > span.qtty-received,
.products-workflow.step-back > ul.products > li > div.qtty-history > span.qtty-gathered,
.products-workflow.step-back > ul.products > li > div.qtty-history > span.qtty-back { background-color: #0d9124; }
.products-workflow.step-done > ul.products > li > div.qtty-history > span.qtty-sent,
.products-workflow.step-done > ul.products > li > div.qtty-history > span.qtty-received,
.products-workflow.step-done > ul.products > li > div.qtty-history > span.qtty-gathered,
.products-workflow.step-done > ul.products > li > div.qtty-history > span.qtty-back { background-color: #0d9124; }
.products-workflow.step-done > ul.products > li.missing > div.qtty-history > span.qtty-sent,
.products-workflow.step-done > ul.products > li.missing > div.qtty-history > span.qtty-received,
.products-workflow.step-done > ul.products > li.missing > div.qtty-history > span.qtty-gathered,
.products-workflow.step-done > ul.products > li.missing > div.qtty-history > span.qtty-back { background-color: #ba111a; }
.products-workflow.step-done > ul.products > li.return > div.qtty-history > span.qtty-gathered,
.products-workflow.step-done > ul.products > li.return > div.qtty-history > span.qtty-back { background-color: #105a6d; }

.products-workflow > ul.products > li > div.infos { display: flex; width: 100%; padding-right: 0; }
.products-workflow > ul.products > li > div.infos > figure { position: relative; padding: 10px 0; }
.products-workflow > ul.products > li > div.infos > figure > img { width: 80px; height: 80px; object-fit: cover; margin: 15px 0; }
.products-workflow > ul.products > li > div.infos > .content { flex: 1 1; display: flex; }
.products-workflow > ul.products > li > div.infos > .content > .product { flex: 1 1; padding: 10px; }
.products-workflow > ul.products > li > div.infos > .content > .product > .name { font-size: 16px; margin-bottom: 2px; }
.products-workflow > ul.products > li > div.infos > .content > .product > .ref { font-size: 10px; color: #666; }
.products-workflow > ul.products > li > div.infos > .content > .product > .qtty { font-size: 20px; padding: 5px; }
.products-workflow > ul.products > li > div.infos > .content > .product > .exceptions > p { padding: 5px;  margin: 0; font-weight: bold; }
.products-workflow > ul.products > li > div.infos > .content > .product > .exceptions > p.warning { color: #ba111a; }
.products-workflow > ul.products > li > div.infos > .content > .product > .exceptions > p.info { color: #0d9124; }

.products-workflow > ul.products > li > div.infos > .content > .input { display: flex; flex-direction: column; }
.products-workflow > ul.products > li > div.infos > .content > .input > i { font-size: 24px; margin-bottom: 10px; }
.products-workflow > ul.products > li > div.infos > .content > .input > div.input-ctrl { display: flex; flex-direction: column-reverse; padding: 0; height: 100%; }
.products-workflow > ul.products > li > div.infos > .content > .input > div.input-ctrl > button { margin: 0; border-radius: 0; flex: 1 1; }
.products-workflow > ul.products > li > div.infos > .content > .input > div.input-ctrl > button > i {}
.products-workflow > ul.products > li > div.infos > .content > .input > div.input-ctrl > button.fill > i::before { content: "\f102"; }
.products-workflow > ul.products > li > div.infos > .content > .input > div.input-ctrl > button.empty > i::before { content: "\f103"; }
.products-workflow > ul.products > li > div.infos > .content > .input > div.input-ctrl > input { display: none; }

.products-workflow > nav.actions { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; padding: 5px; }
.products-workflow.step-done > nav.actions { display: none; }
.products-workflow > nav.actions > button.fill-all > i,
.products-workflow > nav.actions > button.empty-all > i { font-size: 1.2em; }

/* --- Gestion Événement - Bloc Lieu
---------------------------------------------------------------------- */
.event-manager > .details > article.event-place {}
.event-manager > .details > article.event-place > .map .waypoint-infos {}
.event-manager > .details > article.event-place > .map .waypoint-infos > .name { font-weight: bold; margin-bottom: 4px; }

@media all and (max-width: 600px) {
	.event-manager .basket > table { display: flex; flex-direction: column; }
	.event-manager .basket > table > thead th { display: none; }
	.event-manager .basket > table > tbody > tr { display: flex; flex-direction: column; padding: 10px; }
}

/* --- Gestion Événement - Bloc Livraisons
---------------------------------------------------------------------- */
.event-manager > .details > article.event-supply {}
.event-manager > .details > article.event-supply ul.deliveries { display: block; width: 100%; }
.event-manager > .details > article.event-supply ul.deliveries > li { padding: 10px; }
.event-manager > .details > article.event-supply ul.deliveries > li:not(:last-child) { border-bottom: 1px solid #ccc; }
.event-manager > .details > article.event-supply ul.deliveries > li > header { display: flex; margin-bottom: 10px; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .id { flex: 1 1; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .id > .supplier { font-size: 16px; font-variant: small-caps; color: #664f73; margin-bottom: 5px; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status {}
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status > span { display: block; margin: 0 5px; background: #eee; text-align: center; width: 80px; line-height: 22px; border-radius: 10px; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status > span.status-new { background: #cdcdcd; color: #fff; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status > span.status-gathering { background: #e8c239; color: #fff; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status > span.status-preparing { background: #1582c8; color: #fff; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status > span.status-sent { background: #94d12a; color: #fff; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status > span.status-delivered-part { background: #e2562e; color: #fff; }
.event-manager > .details > article.event-supply ul.deliveries > li > header > .status > span.status-delivered { background: #23ad3b; color: #fff; }
.event-manager > .details > article.event-supply ul.deliveries > li > div:not(:last-child) { margin-bottom: 10px; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket { display: none; padding-top: 10px; margin: 0 -10px; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table { width: 100%; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > thead th .mode-switch { background: #0d9124; display: block; margin: 0 auto; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > thead th.col-qtty { text-align: center; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket.edit > table > thead th .mode-switch { background: #ba111a; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty { text-align: center; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket.edit > table > tbody td.col-qtty { min-width: 145px; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty input { width: 35px; margin: 3px 0; text-align: center; vertical-align: middle; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty input.complete { border-color: #167827; background: #d6f1db; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty .progress-bar { width: 125px; height: 22px; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty .progress-bar .text { font-size: 10px; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty button.sub { background: #ba111a; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty button.add {	background: #0d9124; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty button.fill { font-size: 1.2em; background: #105a6d; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket:not(.edit) > table > tfoot > tr.actions { display: none; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tfoot > tr.actions .btn.save { background: #0d9124; }
.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tfoot > tr.actions > td:last-of-type { display: flex; justify-content: center; }

@media all and (max-width: 600px) {
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > thead th.col-btn { display: block; width: 100%; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > thead th.col-btn > button { margin: 0 0 0 auto; }

	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > thead > tr,
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tfoot > tr { display: block; width: 100%; }

	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tfoot > tr.actions > td:first-of-type { display: none; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tfoot > tr.actions > td:last-of-type { display: block; width: 100%; padding: 10px; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tfoot > tr.actions > td:last-of-type > button { display: block; margin: 0 0 0 auto; }

	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody > tr { display: flex; flex-direction: column; padding: 10px; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody > tr:not(:last-of-type) { border-bottom: 1px solid #eee; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td { padding: 0; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td:not(:last-of-type) { margin-bottom: 5px; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-ref { font-size: 9px; color: #555; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty { padding: 10px 25px 0 25px; }
	.event-manager > .details > article.event-supply ul.deliveries > li > .basket > table > tbody td.col-qtty > .progress-bar { width: 100%; }
}

/* --- Gestion Événement - Bloc Déroulé
---------------------------------------------------------------------- */
.event-manager > .details > article.event-keypoints {}
.event-manager > .details > article.event-keypoints ul.keypoints { display: block; width: 100%; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.date { background: #664f73; color: #fff;  }
.event-manager > .details > article.event-keypoints ul.keypoints > li.date > span { display: flex; width: 200px; justify-content: center; align-items: center; height: 40px; font-size: 14px; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint { display: flex; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .timeline { position: relative; width: 100px; text-align: right; padding: 10px 15px 10px 10px; border-right: 2px solid #664f73; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .timeline > span { font-size: 16px; color: #664f73; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .timeline > span:after { content: ''; position: absolute; background: #664f73; width: 16px; height: 16px; right: -9px; border-radius: 50%; top: 11px; box-shadow: 0 0 3px #664f73; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .details { flex: 1 1; padding: 10px 10px 10px 15px; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .details > div:not(:last-of-type) { margin-bottom: 15px; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .details > .title { font-size: 16px; color: #664f73; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .details > .infos { display: flex; flex-direction: row; padding: 0; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .details > .infos > span { margin: 4px; }
.event-manager > .details > article.event-keypoints ul.keypoints > li.keypoint .details > .description { line-height: 1.2em; }

/* --- Gestion Événement - Bloc Staff
---------------------------------------------------------------------- */
.event-manager > .details > article.event-staff {}
.event-manager > .details > article.event-staff .staff-needs { display: block; width: 100%; }
.event-manager > .details > article.event-staff .staff-need { display: flex; background: #664f73; color: #fff; padding: 10px 0; align-items: center; }
.event-manager > .details > article.event-staff .staff-need > figure { width: 75px; height: 75px; margin: 0 10px; }
.event-manager > .details > article.event-staff .staff-need > figure > img { display: block; width: 100%; height: 100%; }
.event-manager > .details > article.event-staff .staff-need div.infos > span.type { font-size: 16px; }
.event-manager > .details > article.event-staff .staff-need .progress-bar { border: 2px solid #3b2149; }
.event-manager > .details > article.event-staff .staff-need > .toggle-btn { cursor: pointer; display: flex; justify-content: center; align-items: center; width: 90px; }
.event-manager > .details > article.event-staff .staff-need > .toggle-btn > i { font-size: 24px; transition: transform 0.5s ease; transform-origin: 50% 50%; }
.event-manager > .details > article.event-staff .staff-needs > li.open > .staff-need > .toggle-btn > i { transform: rotateX(180deg); }

.event-manager > .details > article.event-staff .staffs > li { border-left: 6px solid #664f73; display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px 0; }
.event-manager > .details > article.event-staff .staffs > li:not(:last-of-type) { border-bottom: 1px solid #664f73; }
.event-manager > .details > article.event-staff .staffs > li > header { display: flex; }
.event-manager > .details > article.event-staff .staffs > li > header > figure { width: 75px; height: 75px; border-radius: 50%; overflow: hidden; margin: 0 10px; }
.event-manager > .details > article.event-staff .staffs > li > header > figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.event-manager > .details > article.event-staff .staffs > li > header > div.infos > span.name { font-size: 16px; height: 20px; line-height: 20px; }
.event-manager > .details > article.event-staff .staffs > li > .infos-mission { margin: 0 0 0 10px; }
.event-manager > .details > article.event-staff .staffs > li > .infos-mission > span.period { line-height: 20px; font-size: 14px; }

.event-manager > .details > article.event-staff .staffs > li > .infos-mission-real { margin: 0 0 0 10px; }
.event-manager > .details > article.event-staff .staffs > li > .infos-mission-real > span.status-running { font-size: 14px; color: #664f73; font-style: italic; line-height: 20px; }
.event-manager > .details > article.event-staff .staffs > li > .infos-mission-real > span.time-start > i { color: #0d9124; }
.event-manager > .details > article.event-staff .staffs > li > .infos-mission-real > span.time-end > i { color: #ba111a; }
.event-manager > .details > article.event-staff .staffs > li > .infos-mission-real > span.pause-real .time-selector button.cancel { display: none; }

.event-manager > .details > article.event-staff .staffs > li > .review { padding: 0 10px; }
.event-manager > .details > article.event-staff .staffs > li > .review .top { display: flex; align-items: center; margin-bottom: 3px; justify-content: space-between; }
.event-manager > .details > article.event-staff .staffs > li > .review .top > .note { }
.event-manager > .details > article.event-staff .staffs > li > .review .top > button { }
.event-manager > .details > article.event-staff .staffs > li > .review textarea.comment { font-family: "Lato", "sans-serif"; resize: vertical; width: 250px; height: 92px; margin-bottom: 5px; font-size: 11px; border-radius: 3px; }

.event-manager > .details > article.event-staff .staffs > li > nav.actions { display: block; margin: 10px 0 -10px 0; padding: 5px; width: 100%; }

@media all and (max-width: 1000px) {
	.event-manager > .details > article > div { flex-direction: column; align-items: center; }
	.event-manager > .details > article > div > figure { max-width: 650px; }

	.event-manager > .details > article.event-staff .staffs > li { flex-direction: column; }
	.event-manager > .details > article.event-staff .staffs > li > .infos-mission { margin: 10px 0 0 0; }
	.event-manager > .details > article.event-staff .staffs > li > .infos-mission > span.period { font-size: 12px; }

	.event-manager > .details > article.event-staff .staffs > li > .infos-mission-real { margin: 10px 0 0 0; }

	.event-manager > .details > article.event-staff .staffs > li > .review { padding: 10px; }
	.event-manager > .details > article.event-staff .staffs > li > .review .rating { font-size: 22px; }
	.event-manager > .details > article.event-staff .staffs > li > .review textarea.comment { width: 100%; }
}
@media all and (max-width: 500px) {
	.event-manager > .details > article.event-staff .staff-need > figure { width: 65px; height: 65px; margin: 0 5px; }
	.event-manager > .details > article.event-staff .staff-need > .toggle-btn { width: 60px; }
	.event-manager > .details > article.event-staff .staff-need > .toggle-btn > i { font-size: 22px; }
	.event-manager > .details > article.event-staff .staff-need .progress-bar { width: 120px;  height: 20px; }
	.event-manager > .details > article.event-staff .staff-need .progress-bar .text { font-size: 12px; }
}

/* --- Gestion Événement - Bloc Mission Staff
---------------------------------------------------------------------- */
.event-manager > .details > article.event-mission {}
.event-manager > .details > article.event-mission > div { flex-direction: column; align-items: flex-start; }
.event-manager > .details > article.event-mission > div > h3 { padding: 0 10px; text-align: center; width: 100%; }
.event-manager > .details > article.event-mission > div:nth-child(even) { background-color: #fdfdfd; }
.event-manager > .details > article.event-mission .state { width: 100%; text-align: center; font-size: 1.3em; font-weight: bold; padding: 15px; }
.event-manager > .details > article.event-mission .state-declined { color: var(--color-error); }
.event-manager > .details > article.event-mission .state-running { color: var(--color-info); }
.event-manager > .details > article.event-mission .state-done,
.event-manager > .details > article.event-mission .state-coming { color: var(--color-valid); }
.event-manager > .details > article.event-mission .state-missed { color: var(--color-warn); }
.event-manager > .details > article.event-mission .state-waiting { color: #666; }
.event-manager > .details > article.event-mission .actions { padding: 10px; text-align: center; width: 100%; }
.event-manager > .details > article.event-mission .description { padding: 10px; }
.event-manager > .details > article.event-mission .description > span { font-weight: bold; }
.event-manager > .details > article.event-mission .start > i { color: var(--color-valid); }
.event-manager > .details > article.event-mission .end > i { color: var(--color-error); }
.event-manager > .details > article.event-mission .time > i { color: var(--color-info); }
.event-manager > .details > article.event-mission .review { padding: 10px; }

/* --- Gestion Événement - Bloc Matériel
---------------------------------------------------------------------- */
.event-manager > .details > article.event-ressources {}
.event-manager > .details > article.event-ressources > div { flex-direction: column; }

@media all and (max-width: 700px) {
	.event-manager > .details > article.event-ressources nav.step > button { font-size: 10px; padding: 10px 6px;height: 32px; }
	.event-manager > .details > article.event-ressources nav.step > button:not(:last-of-type) { margin-right: 18px; }
	.event-manager > .details > article.event-ressources nav.step > button:not(:last-of-type)::after { right: -16px; border-width: 16px 0 16px 16px; }
	.event-manager > .details > article.event-ressources nav.step > button:not(:first-of-type)::before { left: -16px; border-width: 16px 0 16px 16px; }

	.event-manager > .details > article.event-ressources ul.products > li > div.infos > .content > .input > div.input-ctrl > button { min-height: 48px; }
	.event-manager > .details > article.event-ressources ul.products > li > div.infos > .content > .input > div.input-ctrl > button > i { min-width: 48px; }

}
@media all and (max-width: 400px) {
	.event-manager > .details > article.event-ressources ul.products > li > div.infos > figure > img {
		width: 65px;
		height: 65px;
	}
}

/* Fiche Entité (générique)
---------------------------------------------------------------------- */
.view-entity > header .name { font-size: 34px; line-height: 40px; padding: 0; text-align: center; margin: 10px 0; }
.view-entity > header > figure > img { border-radius: 50%; width: 180px; height: 180px; object-fit: cover; box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2); border: 2px solid #f1f2f2; }

/* Fiche Staff
---------------------------------------------------------------------- */
.view-entity.staff > header > .categories { color: #777; font-size: 22px; line-height: 30px; padding: 0; text-align: center; font-weight: 100; font-variant: normal; text-transform: none; margin: 10px 0; }
.view-entity.staff > header > .categories > span:not(:last-of-type)::after { content: '/'; margin: 0 0.3em; }
.view-entity.staff > header > .review { display: flex; justify-content: center; align-items: center; }
.view-entity.staff > header > .review > .rating { font-size: 22px; }
.view-entity.staff > article > header {}
.view-entity.staff > article > header > h2 {}

.view-entity.staff > article.staff-missions {}
.view-entity.staff > article.staff-missions .mission figure {}
.view-entity.staff > article.staff-missions .mission figure > img { display: block; width: 100px; height: 100px; object-fit: cover; }
.view-entity.staff > article.staff-missions .mission figure > img.nopic { padding: 25px 0; object-fit: contain; }
.view-entity.staff > article.staff-missions .mission > header { display: flex; padding: 10px; background: #8e7499; color: #fff; font-size: 14px; }
.view-entity.staff > article.staff-missions .mission > header > .title {}
.view-entity.staff > article.staff-missions .mission > header > .title > a { font-weight: bold; color: #eee; }
.view-entity.staff > article.staff-missions .mission > header > .title > a:hover { color: #fff; }
.view-entity.staff > article.staff-missions .mission > header > .date { margin-left: auto; }
.view-entity.staff > article.staff-missions .mission > div { display: flex; }
.view-entity.staff > article.staff-missions .mission .details { flex: 1 1; padding: 10px; }
.view-entity.staff > article.staff-missions .mission .details > .type { font-size: 14px; color: #777; }
.view-entity.staff > article.staff-missions .mission .review { flex: 1 1; padding: 10px; }
.view-entity.staff > article.staff-missions .mission .review > .comment { margin: 10px 0; font-weight: 100; font-style: italic; }

@media all and (max-width: 800px) {
	.view-entity.staff > article.staff-missions .mission figure > img { margin: 15px auto; width: 180px; height: 150px; }
	.view-entity.staff > article.staff-missions .mission figure > img.nopic { display: none; }
	.view-entity.staff > article.staff-missions .mission > div { flex-direction: column; }
}

/* Liste Sociétés
---------------------------------------------------------------------- */
.list-companies .create { text-align: right; padding-bottom: 25px; }
.list-companies article > a { color: var(--text-color); }
.list-companies header .logo { min-height: 50px; max-height: 70px; max-width: 100px; object-fit: cover; }
.list-companies header .preview { display: flex; flex-direction: column; padding: 10px; }
.list-companies header .preview > span { margin-bottom: 5px; }
.list-companies header .name { font-size: 16px; font-weight: bold; }
.list-companies header .others { display: flex; flex-direction: column; align-items: flex-end; }
.list-companies header .others > span { margin-bottom: 5px; }
.list-companies header .others > a { margin-top: auto; }

/* Liste de contacts
---------------------------------------------------------------------- */
.list-contacts .contact figure { padding: 25px; }
.list-contacts .contact.small figure { padding: 10px; }
.list-contacts .contact figure > img { width: 130px; height: 130px; object-fit: cover; border-radius: 50%; box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2); border: 3px solid #f1f2f2; }
.list-contacts .contact.small figure > img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2); border: 2px solid #f1f2f2; }
.list-contacts .contact .infos { display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.list-contacts .contact.small .infos { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.list-contacts .contact .infos > span { margin-bottom: 5px; }
.list-contacts .contact .infos > .name { font-size: 1.3em; font-weight: bold; }
.list-contacts .contact .infos > .name:not(:last-of-type) { margin-bottom: 10px; }
.list-contacts .contact .infos > .function { font-style: italic; }
.list-contacts .contact .infos > .email { text-align: center; font-size: 11px; }
.list-contacts .contact .infos > .phone { text-align: center; font-size: 11px; }
.list-contacts .contact .infos > .socials img { height: 30px; }
.list-contacts .contact .infos > .interests { display: flex; flex-wrap: wrap; justify-content: center; }
.list-contacts .contact .infos > .interests .interest { background: #664f73; padding: 5px 10px; border-radius: 10px; color: #fefefe; margin: 3px }

/* Fiche Société
---------------------------------------------------------------------- */
.view-entity.company > header { position: relative; border-radius: 3px; padding: 25px 0; border: 1px solid #8e7499; background-size: cover; }
.view-entity.company > header.banner { background-size: cover; background-position: 50%; }
.view-entity.company > header.no-banner { background: #d8d0db; }
.view-entity.company > header.edit { padding: 25px; }
.view-entity.company > header.edit label { color: #664f73; }
.view-entity.company > header > figure > img { height: 120px; width: 120px; object-fit: contain; }
.view-entity.company > header.banner > .content { margin: 15px auto 0 auto; max-width: 500px; padding: 15px; background: rgb(226, 226, 226, 0.8); border-radius: 5px; }
.view-entity.company > header .content > .infos { display: flex; flex-direction: column; align-items: center; }
.view-entity.company > header .content > .infos > span { margin-bottom: 2px; }
.view-entity.company a.edit { position: absolute; right: 0; top: 0; border-bottom-left-radius: 3px; display: flex; justify-content: center; align-items: center; height: 40px; width: 40px; background: rgba(112, 82, 117, 0.9); border: none; cursor: pointer; }
.view-entity.company a.edit > i { position: relative; right: -2px; font-size: 15px; color: #fff; }

@media all and (max-width: 500px) {
	.view-entity.company > header.banner { padding-bottom: 0; }
	.view-entity.company > header.banner > .content { border-radius: 0; }
}

/* Trombinoscope
---------------------------------------------------------------------- */
.trombi {}
.trombi .search > input,
.trombi .search > .tags-container { font-size: 20px; border-radius: 15px; padding: 0 25px; height: 35px; text-align: left; background: #fff; border: 1px solid #8e7499; margin: 5px 0; }
.trombi .search > .tags-container > input { font-size: 20px; }
.trombi .search > .tags-container { padding: 0 15px; }

/* Fil d'actualités
---------------------------------------------------------------------- */
.news {}
.news > .create { margin-bottom: 25px; }
.news > .create .input-text { background: #fefefe; margin-right: 0; }
.news > .create .input-text textarea { height: 100px; }
.news > .create .cfg { display: flex; padding: 5px; }
.news > .create .cfg > button.attach { display: flex; justify-content: center; align-items: center; border: none; border-radius: 50%; padding: 0; width: 30px; height: 30px; margin: 0 3px; background: #f1f2f2; cursor: pointer; transition: 0.3s ease; }
.news > .create .cfg > button.attach:hover,
.news > .create .cfg > button.attach.on { background: #664f73; color: #fff; }
.news > .create .cfg > button.attach.multi { margin-left: auto; }
.news > .create .cfg-panel { display: none; padding: 10px; }
.news > .create .cfg-panel.on { display: block; }
.news > .create .cfg-panel > .title { font-weight: bold; padding-bottom: 10px; }
.news > .create .cfg-panel article > label { display: block; margin: 5px 0; }
.news > .create .cfg-panel textarea { width: 100%; resize: vertical; }
.news > .create .cfg-survey .answer > div { position: relative; }
.news > .create .cfg-survey .answer > div input { padding-right: 50px; }
.news > .create .cfg-survey .answer > div .delete { position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center; height: 100%; width: 40px; padding-right: 5px; border: none; border-radius: 0 15px 15px 0; background: transparent; color: var(--color-error); cursor: pointer; transition: all 0.3s ease; }
.news > .create .cfg-survey .answer > div .delete::before { content: '\f014'; font-family: 'FontAwesome'; font-size: 14px; }
.news > .create .cfg-survey .answer > div .delete:hover { color: #fff; background: var(--color-error); }
.news .post { margin-bottom: 10px; }

/* Actualités / Post
---------------------------------------------------------------------- */
.post { background: #fefefe; border-radius: 5px; border: 1px solid #ccc; }
.post > header { display: flex; padding: 10px; border-bottom: 1px solid #ccc; }
.post > header figure { margin-right: 10px; }
.post > header figure > img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2); border: 2px solid #f1f1f2; }
.post > header h1 { font-size: 18px; line-height: 24px; padding: 0; }
.post > header .infos { display: flex; flex-direction: column; justify-content: flex-start; padding: 5px;  }
.post > header .infos > span.author { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
.post > header .meta { display: flex; flex-direction: column; justify-content: flex-start; margin-left: auto; padding: 5px; }
.post > .content { padding: 10px; font-size: 14px; line-height: 18px; text-align: justify; }
.post > .comments { border-top: 1px solid #ccc; }
.post > .comments > .create { padding: 10px; }
.post > .comments > ul { padding: 10px; overflow-y: auto; max-height: 300px; }
.post > .comments .comment { display: flex; align-items: flex-start; }
.post > .comments .comment figure > img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2); border: 2px solid #f1f1f2; }
.post > .comments .comment > div { padding: 10px; }
.post > .comments .comment > div .author { font-weight: bold; }
.post > .comments .comment > div .date { color: #555; }
.post > .comments .comment > div .message { margin-top: 10px; }
.post > .attachment { }
.post > .attachment > .header { background: #584662; padding: 10px; }
.post > .attachment > .header h2 {  color: #fff; font-size: 16px; margin: 0; }
.post > .attachment > .header h2 > i { margin-right: 5px; }
.post > .attachment > .header .infos { display: flex; justify-content: center; flex-wrap: wrap; color: #fff; background: #664f73; padding: 10px; border-radius: 4px; margin-top: 10px; }
.post > .attachment > .header .infos > span { padding: 5px; flex: 1 1; text-align: center; }
.post > .attachment > .header .infos i { margin-right: 5px; font-size: 14px; width: 15px; text-align: center; }
.post > .attachment > .content { padding: 20px; text-align: justify; font-size: 13px; line-height: 16px; border-bottom: 1px solid #ddd; }
.post > .attachment > .content h3 { font-size: 22px; line-height: 26px; text-align: center; color: #664f73; }
.post > .attachment > .interaction { padding: 10px; margin: 10px auto; max-width: 360px; }
.post > .attachment > .interaction p { font-size: 15px; padding: 10px 0; text-align: center; }
.post > .attachment.survey .responses { display: flex; flex-direction: column; padding: 10px; }
.post > .attachment.survey .responses .response { position: relative; border-radius: 5px; background: #fbfbfb; border: 1px solid #ccc; padding: 10px; font-size: 13px; transition: all 0.3s ease; }
.post > .attachment.survey .responses .response .value { position: relative; display: block; width: 100%; height: 100%; z-index: 2; }
.post > .attachment.survey.voted .responses .response .value { padding-left: 60px; }
.post > .attachment.survey .responses .response .progress-overlay { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; background: #ccc; z-index: 1; width: 0%; transition: width 0.3s ease; }
.post > .attachment.survey .responses .response.on .progress-overlay { background-color: #8e7499; }

.post > .attachment.survey .responses .response .result { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; height: 100%; width: 60px; z-index: 3; }

.post > .attachment.survey:not(.voted) .responses .response { cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; }
.post > .attachment.survey:not(.voted) .responses .response .progress-overlay,
.post > .attachment.survey:not(.voted) .responses .response .result { display: none; }

.post > .attachment.survey .responses .response i { margin-right: 10px; }
.post > .attachment.survey:not(.voted) .responses .response:hover { border-color: #664f73; background-color: #664f73; color: #fff; }
.post > .attachment.survey .responses .response:not(:last-of-type) { margin-bottom: 5px; }

@media all and (max-width: 699px) {
	.post > .attachment > .header .infos { flex-direction: column; }
	.post > .attachment > .header .infos > span { text-align: left; }
}

/* Devis
---------------------------------------------------------------------- */
.quote.state-20 .state-icon::before { content: '\f0c8' !important; color: #056a82 !important; }
.quote.state-60 .state-icon::before { content: '\f14a' !important; color: #0d9124 !important; }
.quote.state-99 .state-icon::before { content: '\f05e' !important; color: #ba111a !important; }

.quote.object-view .object-state .state-icon::before { color: #fff !important; }
.quote.state-20.object-view > header > .object-state .state-icon { background-color: #056a82 !important; }
.quote.state-60.object-view > header > .object-state .state-icon { background-color: #0d9124 !important; }
.quote.state-99.object-view > header > .object-state .state-icon { background-color: #ba111a !important; }

/* Liste des devis
---------------------------------------------------------------------- */
.quotes { display: flex; flex-wrap: wrap; padding: 5px 25px; }
.quotes > .notification { flex: 1 1 100%; margin-top: 0; }
.quotes > .quote { flex: 1 1 33.333333333%; min-width: 280px; max-width: calc(33.3333333% - 30px); margin: 15px; }
.quotes > .quote.recent { display: grid; grid-template-columns: repeat(2, 1fr); flex-basis: 100%; max-width: 100%; margin-bottom: 15px; }
.quotes > .quote.recent header { grid-column: span 2; }
.quotes > .quote.recent > figure > img { height: 280px; width: 100%; display: block; object-fit: cover; }
.quotes > .quote header > .title { font-size: 15px; }

.quotes > .quote:not(.recent) > .description { flex-direction: column; }
.quotes > .quote:not(.recent) > .description > figure { max-width: unset; width: 100%; margin-right: 0; margin-bottom: 10px; }
.quotes > .quote:not(.recent) > .description > .infos { display: flex; flex-direction: row; flex-wrap: wrap; }
.quotes > .quote:not(.recent) > .description > .infos > span { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); margin: 5px; white-space: nowrap; }

@media all and (max-width: 999px) {
	.quotes > .quote { flex: 1 1 50%; max-width: calc(50% - 10px); }
	.quotes > .quote.recent { flex-basis: 100%; max-width: 100%; }
}

@media all and (max-width: 699px) {
	.quotes > .quote { flex: 1 1 100%; max-width: calc(100% - 10px); }
	.quotes > .quote.recent { flex-basis: 100%; max-width: 100%; }
}

/* Fiche du devis
---------------------------------------------------------------------- */
.object-view.quote .quote-main figure { width: 100%; height: 100%; min-height: 300px; max-height: 600px; }
.object-view.quote .quote-main figure > img { display: block; object-fit: cover; width: 100%; height: 100%; }
.object-view.quote .quote-main .keypoints {}
.object-view.quote .quote-main .keypoints > ul { display: block; width: 100%; }
.object-view.quote .quote-main .keypoints > ul > li.date { background: #664f73; color: #fff;  }
.object-view.quote .quote-main .keypoints > ul > li.date > span { display: flex; width: 200px; justify-content: center; align-items: center; height: 40px; font-size: 14px; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint { display: flex; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .timeline { position: relative; width: 100px; text-align: right; padding: 10px 15px 10px 10px; border-right: 2px solid #664f73; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .timeline > span { font-size: 16px; color: #664f73; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .timeline > span:after { content: ''; position: absolute; background: #664f73; width: 16px; height: 16px; right: -9px; border-radius: 50%; top: 11px; box-shadow: 0 0 3px #664f73; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .details { flex: 1 1; padding: 10px 10px 10px 15px; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .details > div:not(:last-of-type) { margin-bottom: 15px; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .details > .title { font-size: 16px; color: #664f73; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .details > .infos { display: flex; flex-direction: row; padding: 0; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .details > .infos > span { margin: 4px; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .details > .infos > span > i { width: 20px; text-align: center; font-size: 18px; color: #664f73; margin-right: 5px; vertical-align: middle; }
.object-view.quote .quote-main .keypoints > ul > li.keypoint .details > .description { line-height: 1.2em; }
.object-view.quote .quote-main .brief { padding: 10px; font-size: 15px; line-height: 1.2; padding: 0 25px; }
.object-view.quote .quote-main .brief p,
.object-view.quote .quote-main .brief span { font-size: 15px; line-height: 1.2; }
.object-view.quote .quote-main .actions { display: flex; justify-content: flex-end; align-items: center; margin-top: auto; padding: 10px; }
.object-view.quote .quote-main .actions a[data-shortcut] { margin: auto; font-weight: bold; cursor: pointer; }
.object-view.quote .quote-main .actions a[data-shortcut]:hover { color: #584661; text-decoration: underline; }
.object-view.quote .quote-plaquette object { width: 100%; height: calc(100vw * 0.75); max-height: 880px; }

.df3-basket table.basket {
	--basket-color-main: #664f73;
	--basket-color-border: #664f73;
	--basket-color-txt: #000;
	--basket-color-txt-line: var(--basket-color-txt);
	--basket-color-subtotal-bg: #664f73;
	--basket-color-subtotal-txt: #fff;
}
.df3-basket table.basket { border-spacing: 0px; border: none; margin : 0; width: 100%; }
.df3-basket table.basket td:not(:empty) { padding:8px 6px; }
.df3-basket table.basket td:empty { display: none; }
.df3-basket table.basket .ref-title,
.df3-basket table.basket .img-title,
.df3-basket table.basket .name-title,
.df3-basket table.basket .qtty-title,
.df3-basket table.basket .tva-title,
.df3-basket table.basket .dates-title,
.df3-basket table.basket .price-title,
.df3-basket table.basket .ttc-title { background-color: var(--basket-color-main); color:#fff; padding:12px 7px; font-size: 12px; font-weight: bold; border-bottom: 1px solid --basket-color-border }

.df3-basket table.basket .qtty-title,
.df3-basket table.basket .tva-title { text-align: center; }

.df3-basket table.basket .price-title,
.df3-basket table.basket .ttc-title { text-align: right; }

.df3-basket table.basket .name-title { width:40%; }

.df3-basket table.basket .ref { font-size: 11px; font-weight: bold; border-bottom: 1px solid --basket-color-border;  }
.df3-basket table.basket .name { font-size: 11px; border-bottom: 1px solid --basket-color-border;  }
.df3-basket table.basket .nameTxt { font-size: 12px; font-weight: bold; color: var(--basket-color-txt-line); }
.df3-basket table.basket .nameDetail { font-size: 11px; color: var(--basket-color-txt); }
.df3-basket table.basket .panel-dates-txt { font-style: italic; color: #888; }
.df3-basket table.basket .smallImg { min-width: 15mm;; border-bottom: 1px solid --basket-color-border; }



.df3-basket table.basket .tva > div, .df3-basket table.basket .qtty > div { font-size: 11px; text-align: center; border-bottom: 1px solid --basket-color-border; white-space: nowrap;  }
.df3-basket table.basket .ttc > div, .df3-basket table.basket .price > div { font-size: 11px; text-align: right; border-bottom: 1px solid --basket-color-border; padding-right: 6px; white-space: nowrap;  }

.df3-basket table.basket .group-line { background-color: #eee; border-bottom: 1px solid var(--main-color); font-weight: bold; color: var(--basket-color-main); }
.df3-basket table.basket .group-line.group-level-0 { padding-left: 8px; font-size: 16px; }
.df3-basket table.basket .group-line.group-level-1 { padding-left: 16px; font-size: 14px; }
.df3-basket table.basket .group-line.group-level-2 { padding-left: 24px; font-size: 12px; }
.df3-basket table.basket .group-line-data { background-color: #eee; border-bottom: 1px solid var(--main-color); }
.df3-basket table.basket .group-line-data > div { color: var(--basket-color-main); font-weight: bold; text-align: right; border-bottom: 1px solid --basket-color-border; padding-right: 6px; white-space: nowrap; }
.df3-basket table.basket .group-line-data.group-level-0-data > div { font-size: 15px; }
.df3-basket table.basket .group-line-data.group-level-1-data > div { font-size: 13px; }
.df3-basket table.basket .group-line-data.group-level-2-data > div { font-size: 11px; }

.df3-basket table.basket tr > td.sub-group-0:first-child { padding-left: 16px; }
.df3-basket table.basket tr > td.sub-group-1:first-child { padding-left: 24px; }
.df3-basket table.basket tr > td.sub-group-2:first-child { padding-left: 32px; }

.df3-basket table.basket .noborder,
.df3-basket table.basket td.noborder { border-bottom: 0px; }

.df3-basket table.basket .subtotal { font-size: 12px; font-weight: bold; text-align: right; background-color: var(--basket-color-subtotal-bg); color: var(--basket-color-subtotal-txt); }
.df3-basket table.basket .subtotal-data { font-size: 12px; text-align: right; background-color: var(--basket-color-subtotal-bg); color: var(--basket-color-subtotal-txt); padding-right: 6px; white-space: nowrap; }
.df3-basket table.basket .subtotal-data > div { text-align: right; }

.df3-basket table.basket .total { font-size: 14px; text-align: right; background-color: var(--basket-color-main); color:#fff; font-weight: bold; }
.df3-basket table.basket .total-data { color:#fff; font-size: 16px; text-align: right; background-color: var(--basket-color-main); font-weight: bold; white-space: nowrap; }
.df3-basket table.basket .total-data > div { text-align: right; }

.df3-basket table.basket .ttc div, .df3-basket table.basket .price div, .df3-basket table.basket .subtotal-data div, .df3-basket table.basket .total-data div {padding-right: 5px;}

.df3-basket table.basket .assortment .assortment-group {margin-bottom:3px; padding:0; font-size:11px; font-weight: normal; color: var(--basket-color-main);}
.df3-basket table.basket .assortment .assortment {margin-top:5px; margin-bottom:10px; margin-left:8px; list-style: none;}
.df3-basket table.basket .assortment .assortment-piece {padding:0;}
.df3-basket table.basket .assortment .assortment-piece .assort-qtty {font-size:10px; }
.df3-basket table.basket .assortment .assortment-piece .assort-prod-name {font-size:10px;}

.df3-basket table.basket .variations-infos { margin: 5px 0 0 0px; border-spacing: 0px; }
.df3-basket table.basket .variations-infos .variation-line { color: #888; padding: 1px 0; }
.df3-basket table.basket .variations-infos .variation-title { color: #888; }
.df3-basket table.basket .variations-infos .variation-value { color: #888; }

.df3-basket .ht-rates {
	margin-top:20px;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.df3-basket .ht-rates td {
	text-align: right;
	font-size: 12px;
	font-weight: bold;
	background-color: var(--basket-color-subtotal-bg);
	color: var(--basket-color-subtotal-txt);
	padding: 4px 6px;
}
.df3-basket .ht-rates .ht-rates-data {
	width: 110px;
}
.df3-basket .ht-rates td div { text-align: right; }

.df3-basket .choiceBlocs {	border-collapse: collapse; 	border-spacing: 0px; width:100%; margin:50px auto;}
.df3-basket .choiceBloc {background:var(--basket-color-subtotal-bg); color:var(--basket-color-subtotal-txt);}
.df3-basket .choiceBloc table {width:100%; border-collapse: collapse; 	border-spacing: 0px;}
.df3-basket .choiceTitle { vertical-align: middle; background: var(--basket-color-main); color:#fff; font-size:18px; text-align: left; padding:10px 0; width:100%;}
.df3-basket .choiceTitle .theTitle {vertical-align: middle; color:#fff; font-size:18px; text-align: left; }
.df3-basket .choiceAccroche {color:#fff; font-size:13px; padding:8px 5px; font-weight: normal; text-align: center;}
.df3-basket .choicePrice {text-align: center; padding:12px 5px;  color:#fff;}
.df3-basket .choicePriceHT {font-size:24px;}
.df3-basket .choicePriceTTC {font-size:16px;}
.df3-basket .choicePriceHT span {font-size:16px;}
.df3-basket .choicePriceTTC span {font-size:12px;}
.df3-basket .choiceTitle .theCheckBox {width:15%; padding:0 5px;}
.df3-basket .choiceTitle .theCheckBox table {width:5mm; height: 5mm;  border:1px solid --basket-color-main; margin:3mm auto; }
.df3-basket .choiceTitle .theCheckBox table td {width:5mm; height: 5mm;  }

.df3-basket .choiceBloc .choicePriceTVAs-bloc {text-align: center; margin:0 auto; width:auto;}
.df3-basket .choiceBloc .choicePriceTVAs {text-align: left;  color:#fff;}


/* Textarea avec contrôles intégrés
---------------------------------------------------------------------- */
.input-text { display: flex; background: #F1F2F2; border: 1px solid #A6A7A8; border-radius: 5px; }
.input-text > div { flex: 1 1; margin-right: 10px; }
.input-text > nav.actions { display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; }
.input-text > div > label { display: inline-block; padding: 5px; background: #A6A7A8; color: #fff; border-bottom-right-radius: 5px; }
.input-text > div > .input { display: flex; width: 100%; margin: 10px; }
.input-text > div > .input figure > img { margin-right: 10px; width: 45px; height: 45px; border-radius: 50%; object-fit: cover; box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2); border: 2px solid #f1f1f2; }
.input-text > div > .input textarea { display: block; width: 100%; resize: vertical; background: none; border: none; border-radius: 0; margin: 10px; padding: 0; height: 50px; }
@media all and (max-width: 600px) {
	.input-text { flex-direction: column; }
	.input-text > nav.actions { flex-direction: row; }
}

/* Barre de progression
---------------------------------------------------------------------- */
.progress-bar { display: inline-block; position: relative; height: 25px; width: 150px; background: #d4d4d4; border: 1px solid #664f73; border-radius: 5px; overflow: hidden; }
.progress-bar > .cursor { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #806c8a; transition: width 0.3s ease; z-index: 1, background: 0.5s ease; }
.progress-bar > .text {
	display: flex; justify-content: center; align-items: center;
	position: absolute; left: 0; top: 0; bottom: 0; right: 0;
	color: #fff; text-shadow: 1px 1px 1px #333; font-size: 13px; letter-spacing: 0.1em; font-weight: bold; z-index: 2;
}

/* Sélecteur de temps
---------------------------------------------------------------------- */
.time-selector { padding: 0 3px; }
.time-selector > input { width: 75px; border-radius: 0; font-size: 10px; padding: 0 5px; margin: 3px 0; text-align: center; vertical-align: middle; }
.time-selector > .btn { margin: 3px 0; vertical-align: middle; }
.time-selector > .btn.step { padding: 0 5px; }
.time-selector > .btn.step.minus { background-color: #ba111a; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.time-selector > .btn.step.plus { background-color: #0d9124; border-radius: 0; }
.time-selector > .btn.validate { background-color: #0d9124; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.time-selector > .btn.cancel { background-color: #ba111a; border-radius: 0; }

/* Article Box
---------------------------------------------------------------------- */
article.box { background: #fbfbfb; border: 1px solid #8e7499; margin: 30px 0; border-radius: 3px; overflow: hidden; }
article.box > header { position: relative; padding: 10px; }
article.box > header > h2 { text-align: center;; margin: 0; padding: 0; font-size: 18px; line-height: 24px; }
article.box > header > h2 > i { font-size: 24px; margin-right: 6px; color: #333; }
article.box > nav { text-align: right; padding: 10px; }
article.box.box-custom > div { padding: 10px; }

.cards-list.choices > article.box { margin: 0; border-radius: 0; }
.cards-list.choices > article.box:first-child { border-radius: 3px 3px 0 0; }
.cards-list.choices > article.box:last-child { border-radius: 3px 3px 0 0; }
.cards-list.choices > article.box:not(:last-child) { border-bottom: none; }
.cards-list.choices > article.box > header { border-bottom: none; align-items: center; }
.cards-list.choices > article.box > header > .choice { margin-right: 10px; }
.cards-list.choices > article.box > header > .info { font-size: 12px; margin-left: 10px; margin-right: 10px; }

/* Champs avec contrôles personnalisés
---------------------------------------------------------------------- */
.input-ctrl { padding: 5px; }
.input-ctrl > input { width: 60px; border-radius: 0; font-size: 10px; padding: 0 5px; margin: 3px 0; text-align: center; vertical-align: middle; }
.input-ctrl > button { margin: 3px 0; vertical-align: middle; }
.input-ctrl > button.fill,
.input-ctrl > button.empty { font-size: 1.2em; }
.input-ctrl > button:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-ctrl > button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Rangée || Colonne de blocs
---------------------------------------------------------------------- */
.struct-blocs {width:100%; padding:0; margin:0;}
.struct-blocs.struct-wrap {max-width:1200px; margin:0 auto;}
.struct-blocs > .ct-blocs {display:flex; justify-content: space-between;}
.struct-blocs > .ct-blocs.column {flex-direction:column; height: 100%;}
.struct-blocs > .ct-blocs 	> * {flex:1;}
/*.struct-blocs > .ct-blocs.column > * {align-self:center;}*/
.struct-blocs > .ct-2-1		> :nth-child(1)	{flex:2;}
.struct-blocs > .ct-1-2		> :nth-child(2)	{flex:2;}
.struct-blocs > .ct-1-1-2	> :nth-child(3) {flex:2;}
.struct-blocs > .ct-1-2-1	> :nth-child(2) {flex:2;}
.struct-blocs > .ct-2-1-1	> :nth-child(1) {flex:2;}
.struct-blocs > .ct-3-1		> :nth-child(1)	{flex:3;}
.struct-blocs > .ct-1-3		> :nth-child(2)	{flex:3;}
/*.struct-blocs.struct-span-2 > .ct-blocs {flex-direction: column;}*/
.struct-blocs.struct-span-1 > .ct-blocs {flex-direction: column;}
.struct-blocs.struct-span-0 > .ct-blocs {flex-direction: column;}


/* Pagination
---------------------------------------------------------------------- */
ul.pages { display: flex; justify-content: center; }
ul.pages li > a,
ul.pages li > span { position: relative; margin: 5px; display: flex; justify-content: center; align-items: center; height: 50px; width: 34px; background-color: #fbfbfb; border: 1px solid #ccc; border-radius: 5px; ;}


ul.pages li > a:hover { background-color: #ddd; }
ul.pages li.i > span { border-color: #664f73; background-color: #8e7499; color: #fff; }
ul.pages li.dots > span { border-color: transparent; background-color: transparent; }
ul.pages li.prev > a::before,
ul.pages li.next > a::before,
ul.pages li.prev > span::before,
ul.pages li.next > span::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; content: ''; font-family: 'FontAwesome'; }

ul.pages li.prev > a::before,
ul.pages li.prev > span::before { content: '\f053'; }
ul.pages li.next > a::before,
ul.pages li.next > span::before { content: '\f054'; }

ul.pages li.prev > span,
ul.pages li.next > span { color: #bbb; border-color: #ddd; }

/* Blocs empilés (news)
---------------------------------------------------------------------- */
.struct-stacked {margin: 10px;}
.struct-stacked .bloc-news { opacity: 0; background:#f1f3f2;}
.struct-stacked .new {border: 1px solid rgba(195, 195, 195, 0.2);}
.struct-stacked img {width: 100%;	display: block;}
.struct-stacked article {padding: 10px;}
.struct-stacked article > h2 {margin-top:0; font-size:18px; line-height: 22px;}
.struct-stacked article > .chapo {font-size:13px; line-height: 15px;}
.struct-stacked .buttons {padding:10px 0; text-align: center;}
.struct-stacked.style-1 article {
	position: relative;
	top: -3px;
}
.struct-stacked.style-1 article:before {
	border-bottom: 15px solid;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	content: "";
	display: block;
	position: absolute;
	top: -15px;
	width: 0;
}
.struct-stacked.style-1 .new:nth-child(even) article:before {
	left: 30px;
}
.struct-stacked.style-1 .new:nth-child(odd) article:before {
	right: 30px;
}
.struct-stacked.style-1 .chapo {
	font-size: 13px;
}

.struct-stacked.style-2 h2 {
	font-size: 20px;
	margin-top: 20px;
	position: relative;
}
.struct-stacked.style-2 h2:before {
	border-top: 5px solid;
	content: "";
	height: 10px;
	position: absolute;
	top: -10px;
	width: 30px;
}
.struct-stacked.style-2 .chapo {
	font-size: 14px;
}

@media all and (max-width: 700px) {
	.struct-stacked .bloc-news {left: 15px !important;}
	.struct-stacked .chapo {text-align: justify;}
}


/* -------------------------------------------------------------------
----------------------------------------------------------------------
								BLOCS GENERIQUES
----------------------------------------------------------------------
---------------------------------------------------------------------- */


/* Contenu
---------------------------------------------------------------------- */
.bloc-content > .pos-bottom {flex-direction: column-reverse;}
.bloc-content > .pos-top {flex-direction: column;}
.bloc-content > .pos-right {flex-direction: row-reverse;}
.bloc-content figure {width:100%; font-size: 0;}
.bloc-content figure img {width:100%;}
.bloc-content figure figcaption {font-size:11px; font-style: italic;}
.bloc-content .cover-full figure {height:100%; }
.bloc-content .cover-full figure img {height:100%; object-fit: cover;}
.bloc-content .cover-margin figure {padding:20px; }
.bloc-content > div > section {padding:20px; }
.bloc-content .hgroup h1 {font-size:36px; line-height: 40px; padding:0; margin-bottom:24px;}
.bloc-content .hgroup h2 {font-size:24px; line-height: 28px; font-style: italic; font-weight: normal; font-variant: none; padding:0; margin-bottom: 16px; color:#888;}
.bloc-content .hgroup h3 {font-size:13px; line-height: 13px; font-weight: normal; font-variant: none; display:inline-block; border-bottom:1px solid #bbb; color:#bbb; padding:5px 30px 5px 0; margin-top:0; margin-bottom: 24px; width:auto; font-style: italic;}
.bloc-content .content {font-size:13px; text-align: justify;}

.bloc-content > .align-start h1,
.bloc-content > .align-start h2 {text-align: left;}
.bloc-content > .align-center h1,
.bloc-content > .align-center h2 {text-align: center;}
.bloc-content > .align-end h1,
.bloc-content > .align-end h2 {text-align: right;}


.bloc-content .buttons { display: flex; flex-wrap: wrap; justify-content: end; margin-top:20px;}
.bloc-content > .align-center .buttons {justify-content: center;}
.bloc-content > .align-start .buttons {justify-content: center;}
.bloc-content .buttons a {
	border-radius: 5px;
	height: 50px;
	margin: 5px;
	padding: 0 10px;
	transition: all 0.3s;
	line-height: 50px;
}
.bloc-content .buttons a:hover {background: #000;}
.bloc-content .buttons span { vertical-align: middle;}

.bloc-content .file {overflow: hidden; position: relative; min-width: 70px; }
.bloc-content .file span {display: block; position: relative;  text-align: center; top: 0; transition: all 0.3s;}
.bloc-content .file:hover span {top: 150%;}
.bloc-content .file:before {
	bottom: 100%;
	font-size: 22px;
	left: 0;
	line-height: 50px;
	color:#fff;
	position: absolute;
	text-align: center;
	transition: all 0.3s;
	width: 100%;
}
.bloc-content .file:hover:before {bottom: 0;}

.bloc-content .goto {font-size:15px;}
.bloc-content .goto span:before {
	font: normal normal normal 14px/1 FontAwesome;
	margin-right: 5px;
	transition: color 0.3s;
}
.bloc-content .goto:hover {color:#fff;}


/* Titre
---------------------------------------------------------------------- */
.bloc-title {}
.bloc-title h1,
.bloc-title h2 {margin:0px;	padding:3vh 1.5vw;}
.bloc-title.align-start h1,
.bloc-title.align-start h2 {text-align: left;}
.bloc-title.align-center h1,
.bloc-title.align-center h1 span,
.bloc-title.align-center h2,
.bloc-title.align-center h2 span {text-align: center;}
.bloc-title.align-end h1,
.bloc-title.align-end h1 span,
.bloc-title.align-end h2,
.bloc-title.align-end h2 span {text-align: right;}
.struct-blocs > .ct-blocs.column > .bloc-title {display:flex; flex-direction: column; justify-content: center;}
.struct-blocs > .ct-blocs.column > .bloc-title h1,
.struct-blocs > .ct-blocs.column > .bloc-title h2 {flex:1; display:flex; flex-direction: column; justify-content: center;}


/* Texte
---------------------------------------------------------------------- */
.bloc-text {font-size:13px; line-height: 15px; padding:3vh 1.5vw;}
.bloc-text .hgroup {}
.bloc-text .hgroup h2 {}
.bloc-text .hgroup h3 {}
.bloc-text .content {}
.bloc-text .content blockquote {font-size:16px;  line-height: 18px;}
.bloc-text .content blockquote:after  {font-size:22px;}
.bloc-text .content blockquote:before {font-size:22px;}
.bloc-text .content img {max-width: 90% !important; height:auto !important;}


/* Image
---------------------------------------------------------------------- */
.bloc-image {width:100%; font-size: 0;}
.bloc-image img {width:100%;}
.bloc-image a {display:block;}
.bloc-image a img {}
.bloc-image figcaption {font-size:11px; font-style: italic;}
.bloc-image.cover-full img {height:100%; object-fit: cover;}
.bloc-image.cover-margin {padding:20px; }
.struct-blocs > .ct-blocs.column > .bloc-image:last-child {display:flex; flex-direction: column; justify-content: end;}
.struct-blocs > .ct-blocs.column > .bloc-image:only-child {justify-content: start;}


/* Video
---------------------------------------------------------------------- */
.bloc-video {
	background: none;
	position: relative;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: top center;
}

.bloc-video .video-details > h2,
.bloc-video .video-details > div {margin: 10px 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); text-align: center;}
.bloc-video .video-details > h2 {font-weight: normal; text-align: center;}
.bloc-video .video-details {padding: 3vh 3vw; text-align: center;}
.bloc-video .video-details > div {font-size: 17px;}
.bloc-video .video-container {}
.bloc-video iframe {
	z-index: 0;
	height: 55.77vw;
	width: calc(100vw - 18px);
}
.struct-wrap .bloc-video iframe {max-width:1200px; max-height: 670px;}
.bloc-video .video-container.highlight iframe {}

/* Bouton
---------------------------------------------------------------------- */
.bloc-button {padding:3vh 3vw;}
.bloc-button.align-start,
.bloc-button.align-start h2 {text-align: left;}
.bloc-button.align-center,
.bloc-button.align-center h2  {text-align: center;}
.bloc-button.align-end,
.bloc-button.align-end h2  {text-align: right;}
.bloc-button h2 {}
.bloc-button a {}




/* Formulaire - structure
---------------------------------------------------------------------- */

.digiForm {width: 100%;margin: 0 auto; padding:0;}
.digiForm div {display: inline-block; vertical-align: middle;}

.digiForm article {font-size: 0; margin:16px 0;}
.digiForm article > label{width: 20%; text-align: right; padding-right:20px; }
.digiForm article label  {font-size: 16px; display: inline-block; color:#727571; vertical-align: middle;}
.digiForm article > div {width: 80%; max-width: 700px; font-size: 16px; text-align: left; display: inline-block;}
.digiForm article.formTxt {font-size:13px; line-height: 14px; margin-left: 30%; max-width: 700px; text-align: justify;}

.form-top .digiForm {max-width: 1200px;}
.form-top .digiForm article {}
.form-top .digiForm article > label {width:100%; display:block; text-align: left; padding-right: 0; margin-bottom: 5px;}
.form-top .digiForm article > div {width:100%; max-width: none; display: block;}
.form-top .digiForm article.formTxt {margin-left:0; max-width: none;}
.form-top .digiForm article.docUploadFile > .newDoc { font-size: 12px; cursor: pointer; padding-top: 5px; display: inline-block; }

.digiForm .form-title {
	font-size:20px;
	font-weight: normal;
	display: block;
	color:#515352;
	margin:20px 0 6px 0;
	border-bottom:1px solid #031207;
	padding:0 0 4px 0;
}
.digiForm section {margin:40px 0;}
.digiForm section > section {margin:0;}
.digiForm .invisible div {border: none; padding: 0; margin: 0;}

.digiForm article div textarea { width: 100%; min-height: 120px;}
.digiForm article div textarea[rows="10"] { min-height: 70px;}

form article s{text-decoration: none;}
form article s::before {content:" *"; font-size:14px; color:#d00; }

.digiForm .formCheckbox ul.checkboxes label {vertical-align: top; font-size:14px;}
.digiForm .formCheckbox input {vertical-align: top;}

.digiForm .formRadio ul {text-align: left;}
.digiForm .formRadio ul li {display: inline-block; padding-right: 20px;}
.digiForm .formRadio ul li label {text-align: left; font-size:14px; color:#4e4f4e;}

/* Formulaire - Messages
---------------------------------------------------------------------- */
form ul.error-msg { display: block; margin-bottom: 10px; background: #f91b1b; color: #fff; border: 1px solid #aa0000; border-radius: 3px; padding: 10px; }
form ul.error-msg > li { font-size: 14px; line-height: 18px; }
form .message { display: block; margin-bottom: 10px; padding: 15px 10px; text-align: center; font-size: 14px; line-height: 18px; }
form .message.hide,
form .message.hidden { display: none; }
form .message.success { background: #14ba40; border: 1px solid #008800; color: #fff; }
form .message.error { background: #f91b1b; border: 1px solid #aa0000; color: #fff; }

/* Formulaire - Errors
---------------------------------------------------------------------- */
form article.error label { color:#d00;}
form article.error input,
form article.error select { border-color:#d00; color:#d00; box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2) inset, 0 0 2px 1px rgba(240, 61, 31, 0.3);}

ul.errors {background : #B71D21; padding:20px;}
ul.errors li {list-style: circle; margin-left:10px;	color:#fff;	margin-bottom: 3px;font-size: 13px;}

/* Formulaire - Spec
---------------------------------------------------------------------- */
.extForm article { margin: 16px 0; }
.extForm article label{font-size: 16px; display: inline-block; color:#727571; vertical-align: middle; margin-bottom: 5px;}

/* Formulaire - Image upload
---------------------------------------------------------------------- */
.digiForm article .upload-img > .preview { display: block; }
.digiForm article .upload-img > .preview > img { max-width: 150px; max-height: 100px; border: 1px solid #664f73; margin: 5px 0; }

/* Templates de messages
---------------------------------------------------------------------- */
.message-tpl { display: none; border-radius: 4px; padding: 10px; }
.message-tpl.error { background: #f91b1b; border: 1px solid #aa0000; color: #fff; }
.message-tpl.success { background: #14ba40; border: 1px solid #008800; color: #fff;}

/* Login - Indentification
---------------------------------------------------------------------- */
.digiForm.login {
	max-width: 700px;
	margin:25px auto;
	padding: 15px;
	border: 1px solid #A6A7A8;
	border-radius: 4px;
	background: #fff;
}
.digiForm.login h2 {
	margin: 0 0 15px 0;
	padding: 0 0 0 15px;
	border-left: 5px solid #664F73;
	color: #8E7499;
}
.digiForm.login article {
	margin: -15px 0 0 0;
	padding: 15px 15px;
	border-left: 5px solid #A6A7A8;
}
.digiForm.login .message {
	margin: 0;
	border-left-width: 5px;
	border-radius: 0 3px 3px 0;
}
.digiForm.login .error-msg {
	margin: 0;
	border-left-width: 5px;
	border-radius: 0 3px 3px 0;
}
.digiForm.login article > label { padding-top: 8px;	vertical-align: top;}
.forgetPwd {cursor: pointer; font-size:11px; padding:5px; display:block;}
.forgetPass h3 {text-align: center;}



/* Date Picker
---------------------------------------------------------------------- */
div.date-Picker {
	display: none;
	z-index: 9100;
	position:absolute;
	top:0;
	left: 120px;
	background: #f1f2f2;
	border: 1px solid #e6e7e8;
	border-radius: 6px;
}
div.date-Picker header {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin:2px;
	border-radius: 2px;
	background: #f1f2f2;
	color: #727571;
	font-size:0px;
	text-align: center;
	font-weight: bold;
	height: 25px;
}
div.date-Picker header span {
	width:15%;
	font-size:20px;
	color: #727571;
	margin-top:-3px;
	display: inline-block;
	cursor: pointer;
	text-align: center;
}
div.date-Picker header span.t {
	width:70%;
	font-size:14px;
	vertical-align: top;
	text-align: center;
}
div.date-Picker>div.main {
	position:relative;
	margin:2px;
	padding:3px;
	background: #f1f2f2;
	border-radius: 2px;
	text-align: center;
}
div.date-Picker>div.main>table>tbody>tr>td {
	vertical-align: top;
	border-left:1px solid #ddd;
	padding-left: 10px;
	padding-right: 10px;

}
div.date-Picker>div.main>table>tbody>tr>td:first-child {
	padding-left:0px;
	border: none;
}
div.date-Picker>div.main>table>tbody>tr>td:last-child {
	padding-right:0px;
}
div.date-Picker>div.main>table tr>td>table {
	padding:5px;
	background: #f1f2f2;
	font-size:14px;
	border-spacing: 0;
	border-collapse: collapse;
}
div.date-Picker table tr>td table thead td {
	color: #727571;
	font-weight: bold;
	padding:8px;
}
div.date-Picker table tr>td table tbody td {
	color: #727571;
	padding:10px 8px;
	cursor: pointer;
	text-align: center;
}
div.date-Picker table tr > td table tbody td.p {
	color:#ddd;
}

div.date-Picker table tr>td table tbody td.off {cursor: auto; color:#aaa;}

div.date-Picker table tr > td tbody.months td {
	padding:20px 6px;
}

.d-picker table tr > td table tbody td:hover,
.d-picker table tr > td table tbody td.select {
	color: #fefefe;
	background:#664F73;
	border-radius: 3px;
}

div.date-Picker > div.time {
	text-align: right;
	position:relative;
}
div.date-Picker > div.main::after,
div.date-Picker > div.time::after {
	content:"\f017"; font-family: FontAwesome;
	font-size:20px;
	top:0; right:-32px; height:100%; width:30px;
	border-radius: 0 4px 4px 0; box-shadow: 2px 0 6px #aaa;
	display:none; position:absolute; background:#fff;
	flex-direction:column;
	justify-content:center;
	text-align: center;
	color:#888;
}
div.date-Picker > div.main::after {
	content:"\f073";
}

div.date-Picker > div.time div.time{
	font-weight: bold;
	text-align: center;
	padding:3px;
	cursor: pointer;
	border:#eee 1px solid;
}
div.date-Picker > div.time div.time span {color: #727571; text-align: center; font-size:15px; font-weight: bold; padding-top:0; display: inline-block;}
div.date-Picker > div.time div.time button {margin-left:10px; display: inline-block; width:30px; }
div.date-Picker div.minutes {display: none;}
div.date-Picker div.time li {
	width: 16.5%;
	text-align: center;
	font-size:11px;
	display: inline-block;
	padding: 5px 0;
	cursor: pointer;
	color: #727571;
}
div.date-Picker div.time li.select,
div.date-Picker div.time li:hover {
	color:#fff;
	background:#38a;
	border-radius: 3px;
}
div.date-Picker div.time button {
	line-height: 25px;
}
div.date-Picker div.time i {
	font-size:14px;
	padding:2px 8px;
	cursor: pointer;
}

/* ToolTip
---------------------------------------------------------------------- */

.toolTip {
	position:absolute;
	z-index:10100;
	border-radius: 5px;
	background: rgba(73, 34, 91, 0.85); /* --main-color-shade2 */
	height:auto;
	width:auto;
	max-width: 200px;
	min-height: 30px;
}
.toolTip.map {max-width: 350px;}
.toolTip h3 {color:#fff; padding:8px; font-size:12px; margin:0; text-align: center; font-weight: 300;}
.toolTip h3 > b {font-weight: bold;}
.toolTip h3 > span {font-weight: bold; padding-top:8px; padding-bottom:2px; display: inline-block;}
.toolTip > div {font-size:12px; color:#eee; padding:10px 8px; border-top:1px solid #fff; background: rgba(150, 90, 144, 0.4); border-radius: 0 0 5px 5px;}
.toolTip > div:empty {display:none;}
.toolTip > img {max-width: 100%;}
.toolTip h5 {font-size:13px; margin-bottom: 4px;}
.toolTip address {color:#eee; padding:3px 8px; margin:0;}
.toolTip.log-infos {max-width: 400px; background: rgba(114, 114, 114, 0.8); text-align: left;}
.toolTip.log-infos > * {text-align: left;}
.toolTip.log-infos li {margin: 8px 0; font-size:11px;}

.toolTip.bottom::before,
.toolTip.top::before {
	border-left:transparent 7px solid;
	border-right: transparent 7px solid;
	position:absolute;
	left: calc(50% - 7px);
	content:"";
}
.toolTip.left::before,
.toolTip.right::before {
	border-bottom:transparent 7px solid;
	border-top: transparent 7px solid;
	position:absolute;
	top: calc(50% - 7px);
	content:"";
}
.toolTip.bottom::before { border-bottom:var(--main-color-shade2) 7px solid; top:-7px;}
.toolTip.top::before {border-top:var(--main-color-shade2) 7px solid; bottom:-7px;}
.toolTip.left::before { border-left:var(--main-color-shade2) 7px solid; right:-7px;}
.toolTip.right::before {border-right:var(--main-color-shade2) 7px solid; left:-7px;}


/* Définition importantes, prioritaires sur les autres déclarations
---------------------------------------------------------------------- */
.hide { display:none; }

/* Bloc Contrats
---------------------------------------------------------------------- */
.list-contracts > table { width: 100%; border: 1px solid #eee; border-collapse: collapse; }
.list-contracts > table > thead {}
.list-contracts > table > thead > tr > th { background: #fbfbfb; border-bottom: 1px solid #eee; padding: 10px; }
.list-contracts > table > tbody > tr > td { background: #fff; padding: 10px; }
.list-contracts > table > tbody > tr > td.mission-title { width: 70%; }
.list-contracts > table > tbody > tr > td.actions i { padding: 3px; }
.list-contracts > table > tbody > tr.empty > td { text-align: center; padding: 15px; }



:root {
	--main-color: #720090;
	--main-color-shade: #3f0050;
	--main-color-shade2: #49225b;
	--main-color-shade3: #5d0075;
	--main-color-shade4: #b251cc;
	--main-txt-color: #333;
	--main-bg: #f8f8f8;

	--main-txt-low-color: #888;
	--main-txt-hight-color: #000;

	--main-txt-color-inv: #fff;
	--main-txt-low-color-inv: #ddd;
	--main-txt-hight-color-inv: #fff;

	--cmp-address-title-bg: #ebb98b;

	--stateflow-main-color: #c9a68e;
	--stateflow-done-color: #b15213;
	--stateflow-on-color: #c97b47;

	--stateflow-main-green: #9c9;
	--stateflow-done-green: #080;
	--stateflow-on-green: #0a0;

	--stateflow-main-blue: #aaf;
	--stateflow-done-blue: #00a;
	--stateflow-on-blue: #44f;

	--stateflow-main-red: #faa;
	--stateflow-done-red: #a00;
	--stateflow-on-red: #f44;

	--stateflow-win-color: #0a0;
	--stateflow-lost-color: #f00;

	--stateflow-arrow-height: 13px;
	--stateflow-arrow-width: 8px;

	--stateflow-exergue-arrow-width: 11px;
	--stateflow-exergue-arrow-height: 17px;

	--stateflow-losange-width: 20px;
	--stateflow-pipe-width: 20px;


	--module-clients: #77ddcc;
	--module-crm: #ffee47;
	--module-com: #3aaae7;
	--module-cms: #720090;
	--module-sale: #c93636;
	--module-order: #901c1c;
	--module-production: #faac49;
	--module-event: #00c510;
	--module-field: #7d5530;
	--module-project: #ec36ac;
	--module-gen: #720090;

	--module-clients-txt: #333;
	--module-crm-txt: #333;
	--module-com-txt: #fff;
	--module-cms-txt: #fff;
	--module-sale-txt: #fff;
	--module-order-txt: #fff;
	--module-production-txt: #fff;
	--module-event-txt: #fff;
	--module-field-txt: #fff;
	--module-project-txt: #fff;
	--module-gen-txt: #fff;

	--obj-agenda-task: #444;
	--obj-agenda-call: #77f;
	--obj-agenda-rdv: #229;
	--obj-emailing: #49d;
	--obj-mail: #7433a9;
	--obj-sms: #00acd5;
	--obj-oppt: #e92;
	--obj-quote: #f39200;
	--obj-sale: #d01;
	--obj-order: #901c1c;
	--obj-ticket: #5aa;
	--obj-message: #000;
	--obj-note: #5a5;
	--obj-action: #fe4;
	--obj-event: #00c510;
	--obj-form: #875da9;
	--obj-bill: #aaa;
	--obj-transaction: #aaa;
	--obj-mission: #6af;
	--obj-project: #e52a85;
	--obj-task: #eb094e;
	--obj-user: #b251cc; /* #aa66bc; b665cc*/

/*	--fa-primary-color: #555;*/
	--fa-secondary-color: #555;
	--fa-primary-opacity: 1;
	--fa-secondary-opacity: 0.6;

	--fa-secondary-inv-color: #fff;

}
:root {
	--prod-material: #fe9;
	--prod-ressource: #4d7;
	--prod-tomake: #a9d;
	--prod-assort: #cbf;
	--prod-staff: var(--obj-mission);

	--act-normal: linear-gradient(to bottom, #f8f8f8, #E0E0E0);
	--act-valid: linear-gradient(to bottom, #9c6, #694);
/*	--act-valid-alt: ;*/
	--act-modify: linear-gradient(to bottom, #5AC, #47A);
/*	--act-modify-alt: ;*/
	--act-add: linear-gradient(to bottom, #cFf13E, #aFc110);
/*	--act-add-alt: ;*/
	--act-warn: linear-gradient(to bottom, #d95, #c73);
	--act-danger: linear-gradient(to bottom, #d77, #b55);
	--act-access: linear-gradient(to bottom, #7cd, #59b);
	--act-inv: linear-gradient(to bottom, #999, #666);
	--act-inv-danger: linear-gradient(to bottom, #fefefe, #f0f0f0);

	--notif-ok-bg: #96c964;
	--notif-ok-color: #679a45;
	--notif-msg-bg: #74c9da;
	--notif-msg-color: #4983a0;
	--notif-info-bg: #cf8ef9;
	--notif-info-color: #9666b4;
	--notif-warn-bg: #c84;
	--notif-warn-color: #a6723f;
	--notif-danger-bg: #db7575;
	--notif-danger-color: #a55858;
	--notif-system-bg: #500;
	--notif-system-color: #a55858;

	--remove: #a43;
	--add: #3a5;
	--danger: #a66;

	--count-main: #f55;
	--count-info: #55F;
	--count-ok: #5a0;

	--agd-rdv: var(--obj-agenda-rdv);
	--agd-call: var(--obj-agenda-call);
	--agd-task: var(--obj-agenda-task);
	--agd-perso: repeating-linear-gradient(45deg, rgba(0, 120, 0, 0.7) 5px, rgba(0, 200, 0, 0.7) 5px, transparent 8px, transparent 8px);
	--agd-perso-color: #d2f0d2;
	--agd-intv: #21cb00;
	--agd-bloq: repeating-linear-gradient( -45deg, rgba(0,0,250,0.1) 5px,  rgba(0,0,250,0.1) 5px, transparent 8px, transparent  8px);
	--agd-weekend: repeating-linear-gradient( -45deg, rgba(150,100,50,0.2) 5px, rgba(150,100,50,0.2) 5px, transparent 8px, transparent 8px);
	--agd-opt: #ffb400;
	--agd-optresa: #f60;
	--agd-optvalid: #f0f;
	--agd-resa: #3737c8;
	--agd-resapaid: #0000b4;
	--agd-mission: #aaa;
	--agd-holiday: #aaa;
	--agd-remote: #aaa;
	--agd-pause: #aaa;

	--bg-inactive: repeating-linear-gradient( 45deg,  rgba(100,100,100,0.1), rgba(100,100,100,0.1) 1px, rgba(255,255,255,0.6)  8px, rgba(255,255,255,0.6) 9px );

	--progress-low: linear-gradient(to bottom, rgb(221, 119, 119), rgb(187, 85, 85));
	--progress-avg: linear-gradient(to bottom, rgb(221, 153, 85), rgb(204, 119, 51));
	--progress-high: linear-gradient(to right, rgb(153, 221, 102), rgb(102, 187, 68));
}


/* Surcharge feuille de style par défaut
---------------------------------------------------------------------- */
main { min-height:calc(100vh - 68px - 100px - 250px); margin-bottom: 0px; }
.jaction, [jsinfos] {cursor: pointer;}
.account-view > .account-panel {box-shadow: none;}
nav.actions {text-align: right;}
.digiForm div.hide {display: none;}
#downloadFile {display: none;}

/* Projets
---------------------------------------------------------------------- */
.projets {}
.projets h2 {
	margin: 0;
	background: #8e7499;
	color: #fff;
	font-size: 22px;
	line-height: 30px;
	padding: 10px;
	text-align: center;
}

article .content {font-size:14px;}

.projects {}
.projects > li { background: #fbfbfb; border: 1px solid #8e7499; margin: 15px 0; border-radius: 4px; overflow: hidden; cursor: pointer; transition: background 0.3s ease; }
.projects > li header {position: relative; padding: 10px; border-bottom: 1px solid #A6A7A8;background: #fbfbfb;  transition: background 0.3s ease; }
.projects > li header h3 { text-align: left; margin: 0; padding: 0; font-size: 15px; line-height: 24px; font-weight: bold;}
.projects > li header .ref {font-size:12px; color:#999; font-weight: bold;}
.projects > li header .bccref {font-size:12px; color:#338; font-weight: bold; margin-left:20px;}
.projects > li article {padding:10px;}
.projects > li article .content {font-size:14px; padding-top:5px; border-top:1px solid #eee; margin-top:5px;}

.projects > li.new-grp {margin-top:40px;}
.projects > li.new-grp:first-child {margin-top:0px;}
.projects > li.new-grp h3 {font-size:22px;}
.projects > li.next {margin-left:30px;}

.projects > li:hover,
.projects > li:hover header  {background: #f4f5f4;}

/* Utilisateurs
---------------------------------------------------------------------- */
.user {display: flex; justify-content: start;}
.user > span {display: inline-block; width:60px; align-self: center; margin-right: 10px; color:#999;}
.user > figure {font-size:0; text-align: center; display:inline-flex; justify-content: center; margin-right: 5px; }
.user > figure img { cursor: pointer; object-fit: cover; margin: 0px; width:40px; border-radius: 40px;  height: 40px;}

.user .sale img,
.user .sale .initial {border:3px solid var(--module-crm); }
.user .techf img,
.user .techf .initial 	{border:3px solid var(--module-field);}
.user .project img,
.user .project .initial 	{border:3px solid var(--module-project);}
.user .project img,
.user .project .initial 	{border:3px solid var(--module-project);}
.user .eml img,
.user .eml .initial 	{border:3px solid var(--module-com);}
.user .root img,
.user .root .initial,
.user .admin .initial,
.user .admin img {
	border: 3px double transparent;
	background-origin: border-box;
	background-clip: content-box, border-box;
}
.user .root img,
.user .root .initial { background-image: linear-gradient(white, white), linear-gradient(90deg,var(--module-production), var(--module-crm), var(--module-production));}
.user .admin img,
.user .admin .initial { background-image: linear-gradient(white, white), linear-gradient(90deg,var(--module-sale), var(--module-production), var(--module-crm), var(--module-production), var(--module-sale));}
.user .adv img		{border:3px solid var(--module-sale);}
.user .acc	img		{border:3px solid var(--module-order);}
.user .prod img		{border:3px solid var(--module-production);}
.user .initial {background:#555; color:#fff; font-size:24px; text-transform: uppercase; border-radius: 25px; width:40px; height: 40px; display: flex; flex-direction: row; justify-content: center; margin-right: 5px; cursor: pointer;}
.user .initial b {align-self: center; font-weight: 400;}
.user .initial b {align-self: center; font-weight: 400;}
.user .initial.blue {background: #008;}
.user .initial.grey {background: #777;}
.user .initial.orange {background: #f80;}
.user .initial.brown {background: #a50;}
.user .initial.pink {background: #d5a;}
.user .initial.purple {background: #808;}
.user .initial.black {background: #111;}
.user .initial.green {background: #080;}
.user .initial.redish {background: #c33;}
.user .initial.yellow {background: #fc0;}

.team-list .member {display: flex; justify-content: space-between; padding:8px 0; border-bottom: 1px solid #eee;}
.team-list .member aside {text-align: center; width:50px; align-self: center; padding-top:5px;}
.team-list .member > div {text-align: left; flex:1;}
.team-list .member > div h3 {text-align: left; font-size:16px;}
.team-list .member > div div.contact {}
.team-list .member > div div.contact a {margin-right: 8px;}
.team-list .member > nav {text-align: right; white-space: nowrap;}
.team-list .member:hover {background: #f5f5f5;}


section.project {
	max-width: 1800px;
}

header.project {
	background: #8e7499;
	color: #fff;
}
header.project > section {
	max-width: calc(1800px - 20px);
	margin:0 auto;
	padding: 10px 25px;
	display:flex;
	justify-content: space-between;
}
header.project .ref {display: block;}
header.project .crea {display: block;}
section.project .description { background: #fbfbfb; border: 1px solid #8e7499; margin: 15px 0; border-radius: 4px; padding: 15px 20px 20px 20px; }
section.project .description h4 {margin-top:0;}
section.project .collaboration {display:flex; min-height:400px; height: 60vh;}
section.project .collaboration .ressources {flex:1; display:flex; flex-direction: column;}
section.project .collaboration .teams {}
section.project .collaboration .teams h6 {}
section.project .collaboration .teams .user {padding:5px 0;}
section.project .collaboration .teams + .filelist {margin-top:10px; flex: 1; display: flex; flex-direction: column; }
section.project .collaboration > .project-exchanges {padding-left:20px; flex: 1.5; }
section.project .collaboration .files { flex:1;  background: #fbfbfb; border: 1px solid #8e7499; margin: 15px 0 0 0; border-radius: 4px;}
section.project .collaboration .files header {padding: 10px; border-bottom: 1px solid #A6A7A8;background: #fbfbfb; display: flex; justify-content: space-between; }
section.project .collaboration .files header h3 { text-align:left; align-self: center; margin: 0; padding: 0; font-size: 15px; line-height: 24px; font-weight: bold;}
section.project .collaboration .files .list {padding:10px;}
section.project .collaboration .filelist .list { flex: 1 1 0; overflow-y: auto; }

.month-nav {display:flex; margin:20px auto; min-width:320px; align-items: center; justify-content: center;}
.month-nav .ico {font-size:50px; margin:0 30px;}
.month-nav .actual-month {min-width:200px; text-align: center;}
.month-nav .actual-month h2 {margin:0 0 10px 0; text-align: center;}
.month-nav .actual-month .total-month-time {display:block; text-align: center; font-size:11px; font-weight: normal;}


/* Chat rooms
----------------------------------------------------------------------

.exchanges {display:flex;}
.exchanges > aside {background: #8e7499; width:200px; border-radius: 4px 4px 0 4px; color:#fff;}
.exchanges > aside h6 {color:#fff; font-size:16px; padding:10px; }
.exchanges > aside ul.channels {}
.exchanges > aside ul.channels li {font-size:14px; color:#ddd; padding:5px 10px 5px 18px ; position: relative; cursor: pointer;}
.exchanges > aside ul.channels li::before {position:absolute; left:0px; top:5px; font-family: FontAwesome; font-weight: 900; font-family: 12px;  }
.exchanges > aside ul.channels li.on,
.exchanges > aside ul.channels li:hover {background: #7d6687;}
.exchanges > aside ul.channels li.on::before,
.exchanges > aside ul.channels li:hover::before {content:"\f0da"; }
.exchanges > section {background: #fff; flex:1; border-radius: 4px 4px; display:flex; flex-direction: column;}
.exchanges > section .messages {}
.exchanges > section .new-msg {height:120px;}
.exchanges  .mce-branding-powered-by {display: none;}
.exchanges  .mce-container-body iframe {height:80px !important;}
button.saveBtDf {background-color:#6ac; background-image: linear-gradient(to bottom, #9c6, #694); color:#fff; border-radius: 3px; width:50px;}
button.saveBtDf i {color:#fff;}

.exchanges .messages {flex:1; overflow-y: auto;}
.exchanges .messages > li {display:flex; padding:5px; flex-direction: row;}
.exchanges .messages > li > aside {width:50px;}
.exchanges .messages > li > aside i {color:#999; padding-top:5px; display: none;}
.exchanges .messages > li:hover > aside i {display: block;}
.exchanges .messages > li:hover {background: #fbfbfb;}
.exchanges .messages > li > article {flex:1; }
.exchanges .messages > li > article > .entete {padding-bottom: 6px;}
.exchanges .messages > li > article > .entete b {font-size:16px;}
.exchanges .messages > li > article > .entete i {color:#999;}
.exchanges .messages > li > article > .content {font-size:14px; line-height: 1.3;}
.exchanges .messages > li > article > .content a {color:#04b;}
.exchanges .messages > li > article > .content a:hover {text-decoration: underline;}
.exchanges .messages > li > article > .content a:visited {color:#70a;}
.exchanges .messages > li > article > .link {margin:8px 0px; border:1px solid #eee; border-radius: 0 4px 4px 0; border-left: 3px solid #ccc; padding: 0 0 0 8px; display: flex; cursor: pointer;}
.exchanges .messages > li > article > .link figure {width:50px; height:50px;}
.exchanges .messages > li > article > .link figure img {width:100%; height: 100%; object-fit: cover;}
.exchanges .messages > li > article > .link div {padding:0 0 0 12px;}
.exchanges .messages > li > article > .link h6 {color:#777;}
.exchanges .messages > li > article > .link p {color:#777;}


#mceu_16-body {width: 100%; display: flex; justify-content: space-between;}
#mceu_16 {flex:1;}
#mceu_12-body {display: flex;}

.files .appUpload-wrap {display: none;}


/* Listing de fichiers
---------------------------------------------------------------------- */

.files .list {display:flex; flex-wrap:wrap;}
.files .list li {border-radius: 5px; border:1px solid #e5e5e5;  margin:0 12px 8px 0; background: #f5f5f5; display:flex; position: relative; transition: all 0.3s ease; cursor: pointer;}
.files .list .file {max-width: 200px; width:auto; height:60px; padding:8px; }
.files .list .file i {font-size:28px; margin-right: 8px; align-self: center;}
.files .list .file.pdf i {color:#a00; }
.files .list .file.xls i {color:#0a0; }
.files .list .file span {font-size:14px; flex:1; overflow: hidden; white-space: nowrap; align-self: center;}
.files .list .img {width:60px; height: 60px; }
.files .list .img img {width:100%; height:100%; object-fit: cover; border-radius:6px; }
.files .list .img::after {position:absolute; content:""; width:100%; height: 100%; z-index:0; background:#000; opacity: 0.04; top:0; left:0; transition: all 0.3s ease;}
.files .list li.file:hover { background: #fbfbfb;}
.files .list .img:hover::after {opacity: 0;}
.files .list li .close {display:none; position:absolute; border-radius: 100%; width:16px; height: 16px; background: #eaeaea; top:-6px; right:-6px; text-align: center; border:1px solid #e5e5e5;}
.files .list li .close i {font-size:8px; margin:0; color:#aaa; align-self: center;}
.files .list li.file .close i {color:#aaa; }
.files .list li:hover .close {display: block;}


/* Donut compteur
---------------------------------------------------------------------- */

header.project .counter.style-donut { position: relative; }
header.project .counter.style-donut::before { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: #fbfbfb; border-radius: 50%; z-index: -1; }

.bloc-counter { position:relative;  display: flex; flex-direction: column; align-items: center; --color: var(--main-color); --color-container: #eee; z-index:10;}
.bloc-counter .title { color: var(--color); font-size: 28px; text-align: center; line-height: 32px; }
.bloc-counter .icon { background: var(--color-container); padding: 15px; border: 3px solid var(--color); border-radius: 4px; transform: rotate(45deg); margin-bottom: 20px; }
.bloc-counter .icon > i { font-size: 34px; color: var(--color); transform: rotate(-45deg); width: 35px; height: 35px; text-align: center; }
.bloc-counter .counter svg { height: 60px; }

.counter svg .value-container { stroke: var(--color-container); stroke-width: 20; }
.counter svg .text { fill: var(--color); font-size: 20px; }
.counter svg .value { stroke: var(--color); stroke-width: 20; }
.counter svg .cursor { fill: var(--color); }
.counter svg img {
    border: none;
	width:100%;
	height:100%;
    object-fit: cover;
    border-radius: 100%;
    z-index:0;
}


/* Checklist de la tâche
---------------------------------------------------------------------- */
div.checklist-bloc {margin-bottom: 20px; overflow-y:auto;}
div.checklist-bloc ul {}
div.checklist-bloc ul:empty::before {content:"Aucune";}
div.checklist-bloc ul li {padding:5px; display:flex; position: relative;}
div.checklist-bloc ul li i {margin-top:1px; font-size:16px; margin-right: 10px; align-self: center;}
div.checklist-bloc ul li > span {font-size:15px; align-self: center; flex:1;}
div.checklist-bloc ul li .cp-title {font-size:15px; }
div.checklist-bloc ul li .content {font-size:11px; color:#888; padding:4px 0 8px 0;}
div.checklist-bloc ul li .content:empty {padding:0; display: none;}
div.checklist-bloc ul li span.date {font-size:10px; color:#aaa; display: block; padding-top:4px;}
div.checklist-bloc ul li:nth-child(even) {background: #fbfbfb;}
div.checklist-bloc ul li.empty {text-align: center; font-size:16px; padding:8px; background: var(--color-valid); color:#fff; display:block; border-radius: 8px; margin-bottom: 8px;}
div.checklist-bloc ul li.digiForm {display:block;}
div.checklist-bloc ul li.digiForm > div {display:flex;}
div.checklist-bloc ul li.digiForm input {align-self: center; max-width: 600px; font-size:12px;}
div.checklist-bloc ul li.digiForm textarea {width:100%; height:40px; padding-left:10px; font-size:12px; max-width: 600px;}
div.checklist-bloc ul li:not(.digiForm,.empty):hover {background:#eef;}
div.checklist-bloc ul li .tools {position:absolute; right:0; top:5px; background:rgba(255,255,255, 0.2); padding:5px;}
div.checklist-bloc ul li .tools .removeCheckPoint {color: var(--color-error); cursor: pointer;}


/* Arbre des sous-tâches
---------------------------------------------------------------------- */
.task-list-nav {margin-top:40px; text-align: right;}
.task-tree-list {margin-top:10px; }
.task-tree-list > table {width:100%;border-spacing: 0; border-collapse: collapse;}
.task-tree-list > table > thead {background: #7d6687; position: sticky; top: 45px; z-index:10;}
.task-tree-list > table > thead th {background: #7d6687; color:#fff; padding:10px; font-size:14px;}
.task-tree-list > table > tbody {}
.task-tree-list > table > tbody tr {border-bottom: 1px solid #f5f5f5;}
.task-tree-list > table > tbody tr td {font-size:14px; padding:10px;}
.task-tree-list > table > tbody tr td div.level-bars { height:100%; display:inline-table; border-left:1px solid #e6e6e6; margin-left:8px; width: 10px; vertical-align: middle; }
.task-tree-list > table > tbody tr td div.level-bars > div { height:100%; width: 10px;}
.task-tree-list > table > tbody tr td div.name {vertical-align: middle; display: inline-block;}
.task-tree-list > table > tbody tr td div.name i.far {margin-left:3px; margin-right: 5px;}

.task-tree-list > table > tbody tr:nth-child(odd)  td {background: #fbfbfb; }
.task-tree-list > table > tbody tr:nth-child(even)  td {}
.task-tree-list > table > tbody tr:nth-child(odd):hover td,
.task-tree-list > table > tbody tr:nth-child(even):hover td {background: #dcb4ee;}
.task-tree-list > table > tbody tr td.task-name {cursor: pointer;}
.task-tree-list > table > tbody tr td.task-name .i-dot-circle {color:#999;}
.task-tree-list > table > tbody tr td.task-prog {width:300px;}
.task-tree-list > table > tbody tr td.task-date {width:90px; text-align: center;}
.task-tree-list > table > tbody tr td.task-budget {text-align: center; width:80px;}
.task-tree-list > table > tbody tr td.task-budget i {font-size:24px; color:#555;  cursor: pointer;}
.task-tree-list > table > tbody tr td.task-budget .free {color:#f3d;}
.task-tree-list > table > tbody tr td.task-budget .quote {color:#fd0;}
.task-tree-list > table > tbody tr td.task-budget .bill {color:#00a;}
.task-tree-list > table > tbody tr td.task-budget .paid {color:#0a0;}
.task-tree-list > table > tbody tr td.task-valid {text-align: center; width:70px;}
.task-tree-list > table > tbody tr td.task-valid i {font-size:24px; color:#555; cursor: pointer;}
.task-tree-list > table > tbody tr td.task-valid i.validated {color:#0d0;}
.task-tree-list > table > tbody tr td.task-valid i.tested {color:#00d;}
.task-tree-list > table > tbody tr td.task-valid i.almost-done {color:#fa0;}
.task-tree-list > table > tbody tr td.task-valid i.inprogress {font-size:18px;}
.task-tree-list > table > tbody tr td.task-recette {text-align: center; width:115px;}
.task-tree-list > table > tbody tr td.task-recette .checkbox-field {vertical-align: middle;}
.task-tree-list > table > tbody tr td.task-recette div.checklist {position:relative; display: inline-block;}
.task-tree-list > table > tbody tr td.task-recette i.checklist {margin-left:10px; font-size:24px; vertical-align: middle; color:#999; transition: all 0.3s ease;  cursor: pointer;}
.task-tree-list > table > tbody tr td.task-recette i.checklist.info {cursor:default;}
.task-tree-list > table > tbody tr td.task-recette i.checklist:hover {color:#555;}
.task-tree-list > table > tbody tr td.task-recette i.confirmed {font-size: 18px; color: var(--color-valid);}
.task-tree-list > table > tbody tr td.task-recette span.nb {position:absolute; top:-6px; right:-10px; z-index:10; background: rgba(200,0,0,0.8); color:#fff; border-radius: 10px; padding:3px; font-size:9px;}
.task-tree-list > table > tbody tr td.task-recette span.nb.done {background: rgba(0,200, 0, 0.8);}
.task-tree-list > table > tbody tr td.task-recette span.nb.almost {background: rgba(250, 170, 0, 0.8);}
.task-tree-list > table > tbody tr td span.flags {display: block; opacity: 0.9; text-align: center; padding-top:3px;}
.task-tree-list > table > tbody tr td span.flags i {font-size:10px; margin:0 2px;}
.task-tree-list > table > tbody tr:hover td.task-valid i {color:#fff;}
.task-tree-list > table > tbody tr td .progress {background: #eee; height:20px; width:200px; border:1px solid #ddd;}
.task-tree-list > table > tbody tr td .progress  div {background: #090; height:20px;}
.task-tree-list > table > tbody tr.level-1 td .progress,
.task-tree-list > table > tbody tr.level-1 td .progress div {height:10px;}
.task-tree-list > table > tbody tr.level-2 td .progress,
.task-tree-list > table > tbody tr.level-2 td .progress div {height:5px;}
.task-tree-list > table > tbody tr.level-3 td .progress,
.task-tree-list > table > tbody tr.level-3 td .progress div {height:3px;}
.task-tree-list > table > tbody tr.level-1 td,
.task-tree-list > table > tbody tr.level-2 td,
.task-tree-list > table > tbody tr.level-3 td,
.task-tree-list > table > tbody tr.level-4 td {font-size:12px; padding:8px 10px;}
.task-tree-list > table > tbody tr td.task-name,
.task-tree-list > table > tbody tr[class^="level-"] td.task-name {padding:0; vertical-align: middle; height: 1px;}


/* Checkbox : etat on/off */

.checkbox-field { display: inline-block; vertical-align: middle; }
.checkbox input, .checkbox-field input { display: none; }
.checkbox-field .cadre { border: 1px solid #ccc; cursor: pointer; width:auto; display: inline-block; white-space: nowrap; }
.checkbox-field .cadre .button {
	vertical-align: middle;
	background-color:#F5F5F5;
	background: linear-gradient(to top, #eee, #F9F9F9);
	line-height: 12px;
	display: inline-block;
	font-size:10px;
	border: 1px solid;
	border-color: #F5F5F5 #F1F1F1  #efefef #F1F1F1;
	padding:3px 2px 3px 4px;
	color:#ccc;
	width:22px;
	line-height: 13px;
	text-align: center;
	margin: 0;
	letter-spacing: 0.19em;
}
.checkbox-field .cadre .button::after {
	content: "|||";
}
.checkbox-field .cadre:hover .button {
   background: linear-gradient(to top, #ddd, #eee);
}
.checkbox-field .cadre.off div:last-child,
.checkbox-field .cadre.on div:first-child {
	vertical-align: middle;
	color:#fff;
	background-color:#a66;
	background-image: linear-gradient(to bottom, #e99, #c77);
	display: inline-block;
	padding:3px 6px;
	font-size:11px;
	line-height: 15px;
	font-weight: 900;
	text-align: center;
	width:auto;
	min-width: 26px;
	margin: 0;
}
.checkbox-field .cadre.on div:first-child	{ background-color:#9c6;	background-image: linear-gradient(to bottom, #9c6, #694); }
.checkbox-field .cadre.disable .button{ background-color:#FaFaFa; background-image: linear-gradient(to top, #f9f9f9, #FcFcFc); }
.checkbox-field .cadre.disable.off div:last-child	{ background-color:#a66;	background-image: linear-gradient(to bottom, #fcc, #dbb); }
.checkbox-field .cadre.disable.on div:first-child	{ background-color:#bd9;	background-image: linear-gradient(to bottom, #cda, #ab8); }
.checkbox-field .cadre div[class*="i-"],
.checkbox-field .cadre div[class*=" i-"] { font-size:14px; font-weight:normal; margin: 0 5px; }
.checkbox-field.small .cadre.on div, .checkbox-field.small .cadre.off div {
	font-size: 8px; line-height: 8px;
	padding:2px 6px 3px 6px;
}
.checkbox-field.medium .cadre.on div, .checkbox-field.medium .cadre.off div {
	font-size: 9px;
}

.checkbox-field.switch .cadre.off div:last-child {background-color:#88d;	background-image: linear-gradient(to bottom, #99e, #77c);}
.checkbox-field.switch .cadre.disable.off div:last-child	{ background-color:#66a;	background-image: linear-gradient(to bottom, #ccf, #bbd); }
.checkbox-field.ico i {font-size:30px;}
.checkbox-field.ico.small i {font-size:16px;}
.checkbox-field.ico.medium i {font-size:24px;}
.checkbox-field.ico.on i.green-grey {color:#0a0;}
.checkbox-field.ico.off i.green-grey {color:#999;}
.checkbox-field.ico.on i.green-red {color:#0a0;}
.checkbox-field.ico.off i.green-red {color:#999;}


/* Popin confirm
------------------------------ */
.confirmPop {
	position:absolute;
	width:280px;
	height: auto;
	min-height: 60px;
	border:2px solid #000;
	border-radius: 5px;
	background: #555;
	font-size:12px;
	text-align: center;
	padding:20px;
	z-index:11000;
}

.confirmPop span {
	color:#fff;
	font-weight: bold;
	text-align: center;
	display:block;
}

.confirmPop .btOk, .confirmPop .btCancel {
	margin: 10px 20px 0px 20px;
	min-width: 75px;
}




/* digi notifs
---------------------------------------------------------------------- */

.notif {padding:10px; font-size:12px; border-radius: 5px; text-align: center; min-height: 80px; display:flex; flex-direction: column; justify-content: center;}
.notif.simple {text-align: left; min-height: unset; display:block;}
.notif.info {background:#74c9da; border:1px solid #4983a0; color:#fff;}
.notif.warn {background:#c84; border:1px solid #a6723f; color:#fff; }
.notif.msg {background:#cf8ef9; border:1px solid #9666b4;  color:#fff;}
.notif.ok {background:#96c964; border:1px solid #679a45; color:#fff; }
.notif.danger {background:#db7575; border:1px solid #a55858;  color:#fff;}
.notif.system {background:#500; border:1px solid #a55858;  color:#fff;}

.digi-notifs {
	position:fixed;
	z-index: 21000;
	top: 0;
	left:0;
	width: 100%;
	background: #fff;
	border-radius: 5px;
}
.digi-notifs.notif-report .notif {text-align: left;}
.digi-notifs.notif-report {
	max-height: 60vh;
	top:20vh;
	width:70vw;
	left:15vw;
	padding:20px;
	background: rgba(255,255,255,0.8);
	border:1px solid #eee;
	border-radius: 10px;
	overflow-y:auto;
}
.digi-notifs .notif {
	margin: 5px;
	min-height: 60px;
	font-size: 14px;
	padding: 10px 30px;
	position: relative;
	display:flex; flex-direction: column; justify-content: center;
}
.digi-notifs .notif .close {
	position: absolute;
	top: calc(50% - 15px);
	right: 5px;
	font-size: 24px;
	color: #aaa;
}
.digi-notifs.notif-report  .notif .close {top: 15px;}




/* radio-grp : group de boutons radio attaché, ou de checkbox d'ailleur
---------------------------------------------------------------------- */

.radio-grp-field { }
.radio-grp input, .radio-grp-field input { display:none; }
.radio-grp-field span {
	background-color:#F5F5F5;
	background-image: linear-gradient(to bottom, #FFF, #EEE);
	border:solid 1px;
	line-height: 14px;
	font-weight:bold;
	display: inline-block;
	border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
	border-radius: 3px 3px 3px 3px;
	font-size:12px;
	padding:7px 13px;
	color:#555;
	cursor:pointer;
}
.radio-grp-field.wrap {white-space: normal;}
.radio-grp-field { display: inline-block; font-size: 0; position: relative; vertical-align: middle; white-space: nowrap; }
.radio-grp-field > span {border-radius: 0px; margin:0px; margin-left:-1px}
.radio-grp-field > span:first-child {border-bottom-left-radius: 3px; border-top-left-radius: 3px; }
.radio-grp-field > span:last-child {border-bottom-right-radius: 3px; border-top-right-radius: 3px; }
.radio-grp-field span:hover { background-color:#aaa; background-image: linear-gradient(to bottom, #eee, #ddd); }
.radio-grp-field span.selected { background-color:#777; background-image: linear-gradient(to bottom, #666, #777); color:#fff;}
.radio-grp-field span i {font-size:14px;}
.radio-grp-field span img {background: #F5F5F5;}
.radio-grp-field span:hover img {background-color:#aaa; background-image: linear-gradient(to bottom, #eee, #ddd);}
.radio-grp-field span.selected img[src*='svg'] {background: #fff;}

.radio-grp-field.small span {
	font-size: 10px;
	line-height: 13px;
	padding: 2px 10px;
	font-weight: normal;
}


/* Choix multiples
---------------------------------------------------------------------- */
.list-choice .user img {width:100px; height:100px; border-radius: 50px;}
.list-choice .user .initial {width:100px; height:100px; border-radius: 50px;}
.list-choice {display:flex; flex-wrap: wrap; }
.list-choice .member {display:flex; cursor: pointer; width:120px; height:180px; padding:8px; background: #f5f5f5; border-radius: 8px; margin:4px; flex-direction: column; justify-content: center; }
.list-choice .member .user {margin: 8px 0;}
.list-choice .member.select {background: #adc;}
.list-choice .member .radio-grp-field span {padding:5px; line-height: 12px; }
.list-choice .alertlevel0 {color: #aaa;}
.list-choice .alertlevel10 {color: var(--color-info);}
.list-choice .alertlevel20 {color: var(--color-warn);}
.radio-grp-field.no-bg {background:rgba(255,255,255, 0.1); border-radius: 8px;}
.radio-grp-field.no-bg span {background: none; border:none; border-radius: 8px;}
.radio-grp-field.no-bg span.selected {background: #fff;}
.list-choice .alertChoice,
.list-choice .roleChocie {text-align: center;}


/* Choix multiples
---------------------------------------------------------------------- */
.mini-menu-bloc {
	height:20px;
	width:auto;
	padding:2px 5px 5px 5px;
	cursor: pointer;
	background: #eee;
	text-align: center;
	border-radius: 10px;
	transition: all 0.3s ease;
}
.mini-menu-bloc.discret {opacity: 0.5;}
.mini-menu-bloc.top-right {position:absolute; right:3px; top:-7px; z-index:1;}
.mini-menu-bloc.top-corner-right {position:absolute; right:10px; top:10px; z-index:1;}
.mini-menu-bloc.right {position:absolute; right:10px; top:calc(50% - 8px); z-index:1;}

.mini-menu-bloc i {  font-size:16px; color:#999; margin-left:5px; }
.mini-menu-bloc i:first-child {  margin-left:0px; }
.mini-menu-bloc i:hover {color:var(--main-txt-color);}

.mini-menu-bloc.big {height:30px; padding:4px 5px 4px 5px;}
.mini-menu-bloc.big i {font-size: 22px;}

.mini-menu-dropdown {display:none; position:absolute; top:-7px; min-height:50px; width:180px; padding:5px; /*right:27px; */font-size:14px; background: #f5f5f5; text-align: center; border-radius: 3px; z-index:10; box-shadow: 0 0 1px 1px rgba(0,0,0,0.1); z-index:22000;}
.mini-menu-dropdown > ul > li {display:flex; justify-content: space-between; background:#fbfbfb; color:var(--main-txt-color); padding:8px; border-radius: 3px; cursor: pointer; font-weight: bold; color:var(--main-txt-low-color); align-items: center;}
.mini-menu-dropdown > ul > li i {font-size: 16px; min-width: 20px;}
.mini-menu-dropdown > ul > li:hover:not(.menu-info) {background:#707; color:#fff; }
.mini-menu-dropdown > ul > li.menu-info {background: #f5f5f5; cursor: default;}
.mini-menu-dropdown > ul > li.menu-warn {color:var(--warn);}
.mini-menu-dropdown > ul > li.menu-warn:hover {background:var(--warn); color:#fff;}
.mini-menu-dropdown > ul > li.menu-danger {color:var(--danger);}
.mini-menu-dropdown > ul > li.menu-danger:hover {background:var(--danger); color:#fff;}




/* Tooltip
---------------------------------------------------------------------- */
.toolTip {
	position:absolute;
	z-index:10100;
	border-radius: 5px;
	background: rgba(73, 34, 91, 0.85); /* --main-color-shade2 */
	height:auto;
	width:auto;
	max-width: 200px;
	min-height: 30px;
}
.toolTip.map {max-width: 350px;}
.toolTip h3 {color:#fff; padding:8px; font-size:12px; margin:0; text-align: center; font-weight: 300;}
.toolTip h3 > span {font-weight: bold; padding-top:8px; padding-bottom:2px; display: inline-block;}
.toolTip > div {font-size:12px; color:#eee; padding:10px 8px; border-top:1px solid #fff; background: rgba(150, 90, 144, 0.4); border-radius: 0 0 5px 5px;}
.toolTip > div:empty {display:none;}
.toolTip > img {max-width: 100%;}
.toolTip h5 {font-size:13px; margin-bottom: 4px;}
.toolTip address {color:#eee; padding:3px 8px; margin:0;}
.toolTip.log-infos {max-width: 400px; background: rgba(114, 114, 114, 0.8); text-align: left;}
.toolTip.log-infos > * {text-align: left;}
.toolTip.log-infos li {margin: 8px 0; font-size:11px;}

.toolTip.bottom::before,
.toolTip.top::before {
	border-left:transparent 7px solid;
	border-right: transparent 7px solid;
	position:absolute;
	left: calc(50% - 7px);
	content:"";
}
.toolTip.left::before,
.toolTip.right::before {
	border-bottom:transparent 7px solid;
	border-top: transparent 7px solid;
	position:absolute;
	top: calc(50% - 7px);
	content:"";
}
.toolTip.bottom::before { border-bottom:var(--main-color-shade2) 7px solid; top:-7px;}
.toolTip.top::before {border-top:var(--main-color-shade2) 7px solid; bottom:-7px;}
.toolTip.left::before { border-left:var(--main-color-shade2) 7px solid; right:-7px;}
.toolTip.right::before {border-right:var(--main-color-shade2) 7px solid; left:-7px;}


/* Panneau latéral
---------------------------------------------------------------------- */
body > aside.alertCenter {padding:0;}
body > aside.alertCenter ul {margin-top:20px; overflow-y: auto;}
body > aside.alertCenter li {
	width:100%;
	position:relative;
	top:auto;
	right:auto;
	margin:0;
	background:#222;
	box-shadow: inset -1px 7px 3px -1px rgba(50,50,50,0.8);
	background:linear-gradient(to bottom, #222, #1a1a1a);
	border:2px solid #000;
	transition: background 0.5s ease;
	display:flex;
	min-height: 50px;
}

aside.latPanel li a {cursor: pointer;}
aside.latPanel > .close {display:inline-block; position:relative; text-align: right; padding:5px; height:40px;vertical-align: middle;}
aside.latPanel > .close::before {background: #000;font-size:30px; display:inline; position:relative; top:auto; right:auto; color:#aaa;}
aside.latPanel > .search {display:inline-block; width:calc(100% - 50px); vertical-align: middle;}
aside.latPanel > nav {position:absolute; right:20px; top:20px;}
aside.latPanel > nav button {margin-left:20px;}
aside.timerCenter nav > span, aside.latPanel > nav > span {font-size:18px; font-weight: bold; color:#ccc; vertical-align: middle;}
aside.latPanel > nav button {vertical-align: middle;}
aside.latPanel li:hover {background:linear-gradient(to bottom, #2a2a2a, #222);}
aside.latPanel.jObj li .close::before {
	background: #000;
	top:4px;
	right:4px;
	font-size:12px;
	line-height: 18px;
	border:none;
	font-weight: normal;
}

body > aside.alertCenter li.read {background:linear-gradient(to bottom, #555, #444); }
body > aside.alertCenter.viewAll,
body > aside.alertCenter.viewOld {
	overflow-y:auto;
}
body > aside.alertCenter.viewAll li,
body > aside.alertCenter.viewOld li {
	width:100%;
}

body > .sideIco {
	position: fixed;
	bottom: 15px;
	right: 0;
	width: 30px;
	z-index:1000;
}
body > .sideIco.top {
	bottom: auto;
	top:120px;
}
body > .sideIco > * {
	background: #000;
	border-radius: 10px 0 0 10px;
	color: #aaa;
	width:100%;
	display: block;
	font-size: 20px;
	opacity: 0.2;
	padding: 8px 0;
	text-align: center;
	margin-top: 8px;
	transition: all 0.4s ease;
	cursor: pointer;
}

body > .sideIco > .on {opacity: 0.7;}

body > .sideIco .sideAccess {position: relative;}
body > .sideIco .sideAccess i {}
body > .sideIco .sideAccess span {
	position:absolute;
	top:-3px;
	left:-6px;
	background: #55f;
	color:#fff;
	height: 20px;
	line-height: 18px;
	font-weight: bold;
	padding:1px;
	text-align: center;
	border-radius: 10px;
	min-width: 20px;
	font-size: 12px;
}

body > .sideIco > *:hover { opacity: 1; color:#eee;}

body > aside {
	position:fixed;
	top:0px;
	padding:20px 0 10px 10px;
	right:-20vw;
	width:20vw;
	z-index:10000;
	height:calc(100vh);
	background: rgba(0,0,0,0.95);
	transition:right 0.5s ease;
	color:#fff;
/*	overflow-y: auto;*/
}


aside.alertCenter {width:25vw; max-width: 300px; right:-25vw;}

body > aside.alertCenter li.read {background:linear-gradient(to bottom, #555, #444); }
body > aside.alertCenter.viewAll,
body > aside.alertCenter.viewOld {
	overflow-y:auto;
}
body > aside.alertCenter.viewAll li,
body > aside.alertCenter.viewOld li {
	width:100%;
}

body > aside.on {right:0; }


/* Module jRating
---------------------------------------------------------------------- */
.rating {}
.rating.mode-edit { cursor: pointer; }
.rating.version-stars { display: inline-block; position: relative; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.rating.version-stars div > i { margin: 1px; }
.rating.version-stars > .stars-back { color: #ccc; z-index: 0; }
.rating.version-stars > .stars-front { position: absolute; color: #664f73; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; }


/* Module Booking
---------------------------------------------------------------------- */
.booking {}
.booking aside > .date-Picker { position: sticky !important; top: 58px; }
.booking aside { flex: 0 0; }

/* yn-Checkbox
---------------------------------------------------------------------- */
.yn-checkbox { display: inline-block; vertical-align: middle; position: relative; cursor: pointer; width: 70px; height: 28px; border-radius: 5px; background: #ddd; border: 1px solid #bbb; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2); }
.yn-checkbox input { position: absolute; opacity: 0; height: 0; width: 0; }
.yn-checkbox .state::before { font-family: 'FontAwesome'; position: absolute; top: 2px; bottom: 2px; justify-content: center; align-items: center; width: 58%; border-radius: 3px; color: #fbfbfb; font-size: 12px; z-index: 1; }
.yn-checkbox .state-yes::before { display: none; content: '\f00c'; left: 2px; background: #0d9124; box-shadow: inset 0 0 8px rgba(200, 200, 200, 0.25); }
.yn-checkbox .state-no::before { display: flex; content: '\f00d'; right: 2px; background: #ba111a; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25); }
.yn-checkbox input:checked ~ .state-yes::before { display: flex; }
.yn-checkbox input:checked ~ .state-no::before { display: none; }
.yn-checkbox .switch { position: absolute; background: #c6c6c6; left: 0; top: 0; bottom: 0; width: 42%; border-radius: 5px; transition: left 0.3s ease; z-index: 2; }
.yn-checkbox .switch::before { display: flex; justify-content: center; align-items: center; content: '| | |'; font-size: 13px; color: #777; height: 100%; width: 100%; text-align: center; }
.yn-checkbox input:checked ~ .switch { left: 58%; }
article.error .yn-checkbox { border-color: #d00; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), 0 0 5px rgba(240, 61, 31, 0.3)}

/* jSelect
---------------------------------------------------------------------- */
.select-wrapper { position: relative; height: 30px; }
.select-wrapper > select { display: none; }
.select-wrapper .select-box { position: absolute; top: 0; left: 0; width: 100%; background: #fefefe; }
.select-wrapper.open .select-box { box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.2); z-index: 50; }
.select-wrapper .select-box > .selected { position: relative; display: block; width: 100%; height: 30px; line-height: 30px; padding: 0 40px 0 10px; cursor: pointer; }
.select-wrapper .select-box > .selected::before { position: absolute; right: 0; top: 0; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; content: '\f078'; font-family: 'FontAwesome'; transition: transform 0.3s ease; }
.select-wrapper.open .select-box > .selected::before { transform: rotateX(180deg); }
.select-wrapper .select-box > .options {  display: none; background: #fefefe; overflow-y: auto; max-height: 100px; }
.select-wrapper .select-box > .options > ul { }
.select-wrapper .select-box > .options > ul li.option { width: 100%; padding: 8px; height: 28px; cursor: pointer; }
.select-wrapper .select-box > .options > ul li.option.selected,
.select-wrapper .select-box > .options > ul li.option:hover { background: #664f73; color: #fefefe; }

/* Flex Form
---------------------------------------------------------------------- */
.flex-form {}
.flex-form article.field { display: flex; width: 100%; }
.flex-form article.field > label { display: flex; align-items: center; flex: 1 1; max-width: 20%; }
.flex-form article.field > div { flex: 1 1; margin: 5px 0; }
.flex-form nav.actions { display: flex; justify-content: center; }

/* jUploadGallery
---------------------------------------------------------------------- */
.upload-gallery { display: flex; flex-wrap: wrap; }
.upload-gallery .add-picture { display: flex; justify-content: center; align-items: center; height: 70px; width: 90px; margin: 5px; border-radius: 4px; border: 1px solid #ccc; cursor: pointer; transition: all 0.3s ease; }
.upload-gallery .add-picture::before { content: "\f030"; font-family: 'FontAwesome'; font-size: 24px; color: #ccc; transition: all 0.3s ease; }
.upload-gallery .add-picture:hover { border-color: #664f73; }
.upload-gallery .add-picture:hover::before { color: #664f73; }
.upload-gallery .add-picture input { display: none; }
.upload-gallery img { height: 70px; width: 90px; object-fit: contain; margin: 5px; }

/* jGallery
---------------------------------------------------------------------- */
.gallery { display: block; position: relative; width: 100%; height: 400px; overflow: hidden; }
/* .gallery img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #444; transition: left 0.5s ease; }*/
.gallery .ctrl {
	position: absolute; top: 50%;
	display: flex; justify-content: center; align-items: center;
	height: 80px; width: 30px; transform: translateY(-50%);
	background: #111; color: #fefefe;
	opacity: 0; transition: opacity 0.4s ease;
	cursor: pointer;
}
.gallery .ctrl.prev { left: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.gallery .ctrl.next { right: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }

.gallery:hover .ctrl { opacity: 0.7; }
.gallery .ctrl:hover { opacity: 0.9; }

.gallery .ctrl::before { content: ''; font-family: 'FontAwesome'; font-size: 15px; }
.gallery .ctrl.prev::before { content: '\f053'; }
.gallery .ctrl.next::before { content: '\f054'; }
.gallery > .pictures { height: 100%; background: #444; }
.gallery > .pictures > img { position: absolute; height: 100%; object-fit: contain; object-position: center center; width: 100%; cursor: pointer; }

/* jTags
---------------------------------------------------------------------- */
.tags-container { position: relative; display: flex !important; border: 1px solid #e6e7e8; background: #F1F2F2; flex-wrap: wrap; }
.tags-container input[type="text"] { flex: 1 1; border: none; background: none; width: auto; min-width: 100px; }
.tags-container .tag { position: relative; display: flex; align-items: center; font-size: 12px; background: #8e7499; color: #fff; border-width: 0 1px 1px 1px; border-style: solid; border-color: #8e7499; padding: 6px 20px 6px 6px; margin: 2px; cursor: pointer; user-select: none; }
.tags-container .tag::before { position: absolute; content: 'x'; display: flex; justify-content: center; align-items: center; right: 0; top: 0; height: 100%; width: 16px; }
.tags-container > .results { position: absolute; top: 100%; left: 0; right: 0; max-height: 180px; overflow-y: auto; border: 1px solid #eee; margin: 0 -1px; z-index: 100; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.2); }
.tags-container > .results .tag-sugg { padding : 10px 8px; background: #fdfdfd; cursor: pointer; font-family: sans-serif; font-size: 0.8em; line-height: 1.1em; transition: all 0.3s ease; }
.tags-container > .results .tag-sugg.on,
.tags-container > .results .tag-sugg:hover { background: #8e7499; color: #fff; }


/* Select Choice
---------------------------------------------------------------------- */
.select-choice-container {
	display: flex;
	border: 1px solid #999;
	border-radius: 3px;
	width: 100%;
	align-items: stretch;
	cursor: default;
}
.digiForm div.select-choice-container { display: flex; }
.select-choice-container .select-choice-list {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1;
	padding: 4px;
	min-height: 42px;
}
.select-choice-container .select-choice-list:empty {
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.select-choice-container .select-choice-list:empty::after {
	content: 'Choisir un ou plusieurs bons de commande...';
	color: #777;
	font-style: italic;
	font-size: 12px;
}
.select-choice-container .select-choice-list > .select-choice-item {
	display: flex;
	align-items: center;
	border-radius: 13px;
	background-color: var(--main-color);
	margin: 4px;
	color: #fff;
	font-size: 12px;
	height: 26px;
	padding: 0 10px;
}
.select-choice-container .select-choice-list > .select-choice-item > i {
	cursor: pointer;
	margin-left: 10px;
}
.select-choice-container .select-choice-add {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--main-color);
	color: #fff;
	width: 30px;
	margin-left: auto;
}

.app-List { width: 100%; position:relative; margin: 20px auto; border: 1px solid #8d8d8d; }
.app-List header {padding-left:0px;}
.app-List > header { display: flex; justify-content: center; align-items: center; background-color: #8d8d8d; color: #fff; }
.app-List > header > nav > h4 { color: inherit; font-size: 14px; }
.app-List table { width: 100%; border:none; border-spacing: 0; border-collapse: collapse; }
.app-List table td { margin:0; }
.app-List table tr.noresult { display:none; }
.app-List table tr.noresult td,
div.noresult {
	padding:30px;
	font-weight: bold;
	font-size:14px;
	text-align: center;
	color:#d00;
}
.dashboard .app-List table tr.noresult td,
div.noresult {
	padding:10px;
	font-size:12px;
	font-weight: normal;
	color: #555;
}
div.noresult { border:1px solid #eee;}
.app-List table tr.headcols td,
.app-List thead th { /* titre */
	height:24px;
	font-size:12px;
	padding:3px 4px;
	line-height: 16px;
	background: linear-gradient(to bottom, #eee, #d5d5d5);
	color:#555;
	text-align: left;
	cursor: pointer;
}
.app-List table tr.headcols td.nb {text-align: right; padding-right: 20px;}
.app-List table tr.headcols td:hover { background: linear-gradient(to bottom, #ddd, #c5c5c5); }
.app-List table tr.headcols td.on { background: linear-gradient(to bottom, #999, #777); color:#fff; }
.app-List table tr.headcols td i { padding:0 4px 0 8px; float:right; }
.app-List table tr.headcols td.ico i { float:none; }
.app-List table tr.headcols td.action i { float: none; }
.app-List table tr td, .app-List table tr th  {
	height:24px;
	padding:3px 4px;
	font-size:11px;
	line-height: 14px;
	background: #fff;
	border-bottom: 1px solid #ddd;
}
.app-List table tr th  {
	white-space: nowrap;
}
.app-List table tr td.link { font-weight: bold; cursor: pointer; }
.app-List table tr td.link-sec { cursor: pointer; }
.app-List table tr td.link:hover,
.app-List table tr td.link-sec:hover { text-decoration: underline;}
.app-List table tr td.link a {color:#333; width:100%;}
.app-List table tr td.link a:visited {color:#720090;}
.app-List table tr td.link.a {padding:1px; overflow: hidden;}
.app-List table tr td.link.a a {color:#333; display: block; min-height: 20px; width:100%; padding:5px 4px;}
.app-List table tr td.link.a a:visited {color:#720090;}

.app-List table tr.search td { height:36px; }
.app-List table tr.search td input { height:22px; border:1px solid #ccc; font-size:11px; line-height: 14px; padding:2px 3px; width:97%}
.app-List table tr.search .action {white-space: nowrap; display: none;}
.app-List tbody th,
.app-List table tr .action {	text-align: center; }
.app-List tbody i,
.app-List table tr td.action i { padding:0 8px; color:#555; font-size: 14px; }
.app-List table tr:nth-child(even) td, .app-List table tr:nth-child(even) th { background: #f5f5f5; }
.app-List > div { padding:4px 8px; text-align: right; }
.app-List div.table {text-align: left; padding:0; width: 100%;}
.app-List select { line-height: 14px; height:auto; padding:0; margin:2px; }
.app-List header>div > span,
.app-List aside > div > span { display: inline-block; padding: 0 30px 0 3px; font-size: 11px; line-height: 24px; vertical-align: middle; }
.app-List header div > i { padding:6px;}
.app-List header div > i[class^="i-"] { cursor: pointer;}
.app-List header i.active { background: #bdf;}
.app-List header .multiBloc { background: #bdf; line-height: 24px; height: 24px; }
.app-List header div span.multiCpt { padding-right:10px;}
.app-List header div span div.ico-count { margin:0px;}
.app-List header div span div.ico-count span {
	padding:2px 5px;
	font-size:8px;
	line-height: 13px;
	position:relative;
}
.app-List table td a {font-weight: bold;}

.app-List header > div:first-child {
	background: linear-gradient(to bottom, #f8f8f8, #eaeaea);
	vertical-align: middle;
	margin: 0;
	padding: 3px 5px;
	height:34px;
	border-bottom: 1px solid #ccc;
	display: block;
}
.app-List header aside { float:right; height:28px; }
.app-List header aside > div{
	display: inline-block;
	padding-right: 20px;
	padding-left: 20px;
	height: 28px;
	border-left:1px solid #ccc;
	margin-left: 20px;
	border-right:1px solid #ccc;
	margin-right: 20px;
}
.app-List .pagination {text-align: right;}
.app-List tbody th i,
.app-List tbody th u,
.app-List .action i { cursor: pointer;}
.app-List tbody th u {text-decoration: none;}
.app-List tbody th u * {vertical-align: middle;}
.app-List tbody th u span {text-decoration: underline;}
.app-List table tbody tr:hover:nth-child(odd) td,
.app-List table tbody tr:hover:nth-child(odd) th, /* {background: #dadaff;}*/
.app-List table tbody tr:hover:nth-child(even) td,
.app-List table tbody tr:hover:nth-child(even) th {background: #dadaff;}
.app-List table tbody tr.new td,
.app-List table tbody tr.new:hover td {	background: #efe; height: 60px;}
.app-List table tbody tr.dragging td {	opacity: 0.9; background:#fee; }
.app-List table tbody tr.selected:hover:nth-child(odd) td,
.app-List table tbody tr.selected:nth-child(odd) td {background: #bdf;}
.app-List table tbody tr.selected:hover:nth-child(even) td,
.app-List table tbody tr.selected:nth-child(even) td {background: #b5d5ff;}

.app-List .lineDrag { z-index:2; position:absolute; width:auto; height:auto; opacity: 0.9; cursor: move;}

.app-List table tbody tr td.pic {line-height: unset; font-size: 0;}
.app-List table tbody tr td.qtty { text-align: center;}
.app-List table tbody tr td.nb { text-align: right; padding-right: 20px; white-space: nowrap;}
.app-List table tbody tr td.price { text-align: right; padding-right: 20px; white-space: nowrap;}
.app-List table tbody tr td.date { text-align: left; }
.app-List table tbody tr td.small {font-size:9px; color:#999;}
.app-List table tbody tr td hr {border:none; border-bottom: 1px solid #bbb; height: 0; margin:5px 0;}
.app-List td.price.discreet {color:#aaa;}
.app-List td.price.credit {color:#00c;}
.app-List td.price.debit {color:#c00;}
.app-List table tbody tr td.subtotal { color:#000; text-align: right; background: #eee;	white-space: nowrap;}
.app-List table tr td.total {
	text-align: right;
	background-color: #000;
	color:#fff;
	font-weight: bold;
	white-space: nowrap;
}
.app-List table tbody tr:hover td.total {background-color: #000;}
.app-List td.progress { vertical-align: top;}

.app-List table tr td.total.neg,
.app-List table tbody tr td.subtotal.neg,
.app-List table tbody tr td.neg { color:#f00;}


.app-List td.lw-vs {width:50px; max-width:50px;}
.app-List td.lw-s {max-width:80px;}

fieldset>.app-List {margin:0;}

.app-List td.lw-vl {min-width:400px;}
.app-List td.lw-vvl {min-width:600px;}
.app-List .notif {min-height: auto;}

.dropdown-select { position: relative; }

.dropdown-select.mini p { padding:2px;}
.dropdown-select.mini p > i.i-caret-down{ display: none;}
.dropdown-select.mini .btn { background: linear-gradient(to bottom, #f8f8f8, #eaeaea); border-radius: 6px 8px; padding: 5px; color: #000; }
/* Drop down Select */

select.dropdown, .dropdown-select select {
	display: none;
}
.dropdown-select {
	position:relative;
}
.dropdown-select>p>span {
	display:inline;
}
.dropdown-select>p>i {
	padding-left:3px;
	float:right;
	vertical-align: middle;
	margin:0px;
}
.dropdown-select>p {
	background: linear-gradient(to bottom, #f8f8f8, #eaeaea);
	border-radius: 8px;
	cursor: pointer;
	font-weight: normal;
	display: inline-block;
	font-size: 12px;
	white-space: normal;
	margin: 0;
	overflow: hidden;
	padding: 6px 8px;
	vertical-align: middle;
	width: 100%;

}
.dropdown-select > p:hover { background: linear-gradient(to bottom, #f8f8f8, #eaeaea); }
.dropdown-select ul {
	position:absolute;
	top:30px;
	display:none;
	z-index:10;
}
.dropdown-select ul li {
	background-color:#f2f2f2;
	border-style:solid;
	cursor: pointer;
	border-width:1px 0px;
	border-radius: 5px;
	width: auto;
	border-color:#fff #fafafa #ddd;
	vertical-align:middle;
	padding:5px 12px;
	font-size:11px;
}
.dropdown-select ul li:hover, .dropdown-select ul li.selected {
	background-color:#ececec;
	position:relative;
}
.dropdown-select ul li:hover::after, .dropdown-select ul li.selected::after {
	opacity: 0.15;
	transition: opacity 0.1s ease-in-out 0s;
	content:"";
	position:absolute;
	top:0; left:0; width:100%;height:100%; background: #fff;
}

/** Tooltip **/
.toolTip {
	position:absolute;
	z-index:10100;
	border-radius: 5px;
	background: rgba(73, 34, 91, 0.85); /* --main-color-shade2 */
	height:auto;
	width:auto;
	max-width: 200px;
	min-height: 30px;
}
.toolTip.map {max-width: 350px;}
.toolTip h3 {color:#fff; padding:8px; font-size:12px; margin:0; text-align: center; font-weight: 300;}
.toolTip h3 > b {font-weight: bold;}
.toolTip h3 > span {font-weight: bold; padding-top:8px; padding-bottom:2px; display: inline-block;}
.toolTip > div {font-size:12px; color:#eee; padding:10px 8px; border-top:1px solid #fff; background: rgba(150, 90, 144, 0.4); border-radius: 0 0 5px 5px;}
.toolTip > div:empty {display:none;}
.toolTip > img {max-width: 100%;}
.toolTip h5 {font-size:13px; margin-bottom: 4px;}
.toolTip address {color:#eee; padding:3px 8px; margin:0;}
.toolTip.log-infos {max-width: 400px; background: rgba(114, 114, 114, 0.8); text-align: left;}
.toolTip.log-infos > * {text-align: left;}
.toolTip.log-infos li {margin: 8px 0; font-size:11px;}

.toolTip.bottom::before,
.toolTip.top::before {
	border-left:transparent 7px solid;
	border-right: transparent 7px solid;
	position:absolute;
	left: calc(50% - 7px);
	content:"";
}
.toolTip.left::before,
.toolTip.right::before {
	border-bottom:transparent 7px solid;
	border-top: transparent 7px solid;
	position:absolute;
	top: calc(50% - 7px);
	content:"";
}
.toolTip.bottom::before { border-bottom:var(--main-color-shade2) 7px solid; top:-7px;}
.toolTip.top::before {border-top:var(--main-color-shade2) 7px solid; bottom:-7px;}
.toolTip.left::before { border-left:var(--main-color-shade2) 7px solid; right:-7px;}
.toolTip.right::before {border-right:var(--main-color-shade2) 7px solid; left:-7px;}

/* Dépoôt facture
---------------------------------------------------------------------- */
.deposit-module { padding: 20px; }
.deposit-module .deposit-module-container { display: flex; flex-direction: row;  }
.deposit-module .uploadZone { min-height: 400px; position: relative; flex: 1 1 50%; margin-right: 20px; }
.deposit-module .uploadZone figure { cursor: pointer; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; cursor: pointer; }
.deposit-module .uploadZone figure > i { font-size: 40px; color: #666; }
.deposit-module .uploadZone .uploadProgress { position: relative; width: 100%; height: 4px; background: transparent; }
.deposit-module .uploadZone .uploadProgress > span { position: absolute; top: 0; left: 0; display: block; height: 100%; background: var(--main-color); transition: width 0.5s ease; }

.deposit-module .uploadZone .pdf-iframe { width: 100%; height: 100%; }
.deposit-module .uploadZone .pdf-iframe > iframe { width: 100%; height: 100%; }

.deposit-module .uploadZone.upload-success .uploadProgress > span { background: green; }
.deposit-module .uploadZone.upload-error .uploadProgress > span { background: red; }

.deposit-module .uploadZone.upload-success figure { display: none; }
.deposit-module .uploadZone:not(.upload-success) .pdf-iframe { display: none; }

.deposit-module .otherData { flex: 1 1 50%; }
.deposit-module > nav { padding: 0 20px 20px 20px; }

/* Grid
---------------------------------------------------------------------- */
.grid { display: flex; padding: 5px; width: 100%; --margin: 0 !important; }
.grid.align-center { align-items: center; }
.grid.wrap { flex-wrap: wrap; }
.grid.no-padding { padding: 0; }
.grid.vertical { flex-direction: column; }
.grid.reverse { flex-direction: row-reverse; }
.grid.vertical.reverse { flex-direction: column-reverse; }

.grid > * { --margin: 5px; flex: 1 1; margin: var(--margin) !important; }
.grid.no-padding > * { --margin: 0; }
.grid > .push-end { margin-left: auto; }
.grid.reverse > .push-end { margin-right: auto; }

.grid > [class*="col-"] { flex: 1 1 var(--col-size); max-width: calc(var(--col-size) - 2 * var(--margin)); }
.grid > .col-auto { flex: 1 1; max-width: auto; }
.grid > .col-full { flex: 1 1 100%; max-width: 100%; }
.grid > .col-1  { --col-size: calc(100% * 1 / 12); }
.grid > .col-2  { --col-size: calc(100% * 2 / 12); }
.grid > .col-3  { --col-size: calc(100% * 3 / 12); }
.grid > .col-4  { --col-size: calc(100% * 4 / 12); }
.grid > .col-5  { --col-size: calc(100% * 5 / 12); }
.grid > .col-6  { --col-size: calc(100% * 6 / 12); }
.grid > .col-7  { --col-size: calc(100% * 7 / 12); }
.grid > .col-8  { --col-size: calc(100% * 8 / 12); }
.grid > .col-9  { --col-size: calc(100% * 9 / 12); }
.grid > .col-10 { --col-size: calc(100% * 10 / 12); }
.grid > .col-11 { --col-size: calc(100% * 11 / 12); }
.grid > .col-12 { --col-size: calc(100% * 12 / 12); }

@media all and (min-width: 2199px) {
	.grid > .col-xl-1  { --col-size: calc(100% * 1 / 12); }
	.grid > .col-xl-2  { --col-size: calc(100% * 2 / 12); }
	.grid > .col-xl-3  { --col-size: calc(100% * 3 / 12); }
	.grid > .col-xl-4  { --col-size: calc(100% * 4 / 12); }
	.grid > .col-xl-5  { --col-size: calc(100% * 5 / 12); }
	.grid > .col-xl-6  { --col-size: calc(100% * 6 / 12); }
	.grid > .col-xl-7  { --col-size: calc(100% * 7 / 12); }
	.grid > .col-xl-8  { --col-size: calc(100% * 8 / 12); }
	.grid > .col-xl-9  { --col-size: calc(100% * 9 / 12); }
	.grid > .col-xl-10 { --col-size: calc(100% * 10 / 12); }
	.grid > .col-xl-11 { --col-size: calc(100% * 11 / 12); }
	.grid > .col-xl-12 { --col-size: calc(100% * 12 / 12); }
}

@media all and (min-width: 1699px) {
	.grid > .col-l-1  { --col-size: calc(100% * 1 / 12); }
	.grid > .col-l-2  { --col-size: calc(100% * 2 / 12); }
	.grid > .col-l-3  { --col-size: calc(100% * 3 / 12); }
	.grid > .col-l-4  { --col-size: calc(100% * 4 / 12); }
	.grid > .col-l-5  { --col-size: calc(100% * 5 / 12); }
	.grid > .col-l-6  { --col-size: calc(100% * 6 / 12); }
	.grid > .col-l-7  { --col-size: calc(100% * 7 / 12); }
	.grid > .col-l-8  { --col-size: calc(100% * 8 / 12); }
	.grid > .col-l-9  { --col-size: calc(100% * 9 / 12); }
	.grid > .col-l-10 { --col-size: calc(100% * 10 / 12); }
	.grid > .col-l-11 { --col-size: calc(100% * 11 / 12); }
	.grid > .col-l-12 { --col-size: calc(100% * 12 / 12); }
}

@media all and (max-width: 1199px) {
	.grid > .col-m-1  { --col-size: calc(100% * 1 / 12); }
	.grid > .col-m-2  { --col-size: calc(100% * 2 / 12); }
	.grid > .col-m-3  { --col-size: calc(100% * 3 / 12); }
	.grid > .col-m-4  { --col-size: calc(100% * 4 / 12); }
	.grid > .col-m-5  { --col-size: calc(100% * 5 / 12); }
	.grid > .col-m-6  { --col-size: calc(100% * 6 / 12); }
	.grid > .col-m-7  { --col-size: calc(100% * 7 / 12); }
	.grid > .col-m-8  { --col-size: calc(100% * 8 / 12); }
	.grid > .col-m-9  { --col-size: calc(100% * 9 / 12); }
	.grid > .col-m-10 { --col-size: calc(100% * 10 / 12); }
	.grid > .col-m-11 { --col-size: calc(100% * 11 / 12); }
	.grid > .col-m-12 { --col-size: calc(100% * 12 / 12); }
}

@media all and (max-width: 799px) {
	.grid > .col-s-1  { --col-size: calc(100% * 1 / 12); }
	.grid > .col-s-2  { --col-size: calc(100% * 2 / 12); }
	.grid > .col-s-3  { --col-size: calc(100% * 3 / 12); }
	.grid > .col-s-4  { --col-size: calc(100% * 4 / 12); }
	.grid > .col-s-5  { --col-size: calc(100% * 5 / 12); }
	.grid > .col-s-6  { --col-size: calc(100% * 6 / 12); }
	.grid > .col-s-7  { --col-size: calc(100% * 7 / 12); }
	.grid > .col-s-8  { --col-size: calc(100% * 8 / 12); }
	.grid > .col-s-9  { --col-size: calc(100% * 9 / 12); }
	.grid > .col-s-10 { --col-size: calc(100% * 10 / 12); }
	.grid > .col-s-11 { --col-size: calc(100% * 11 / 12); }
	.grid > .col-s-12 { --col-size: calc(100% * 12 / 12); }
}

@media all and (max-width: 599px) {
	.grid > .col-xs-1  { --col-size: calc(100% * 1 / 12); }
	.grid > .col-xs-2  { --col-size: calc(100% * 2 / 12); }
	.grid > .col-xs-3  { --col-size: calc(100% * 3 / 12); }
	.grid > .col-xs-4  { --col-size: calc(100% * 4 / 12); }
	.grid > .col-xs-5  { --col-size: calc(100% * 5 / 12); }
	.grid > .col-xs-6  { --col-size: calc(100% * 6 / 12); }
	.grid > .col-xs-7  { --col-size: calc(100% * 7 / 12); }
	.grid > .col-xs-8  { --col-size: calc(100% * 8 / 12); }
	.grid > .col-xs-9  { --col-size: calc(100% * 9 / 12); }
	.grid > .col-xs-10 { --col-size: calc(100% * 10 / 12); }
	.grid > .col-xs-11 { --col-size: calc(100% * 11 / 12); }
	.grid > .col-xs-12 { --col-size: calc(100% * 12 / 12); }
}


@media all and (min-width: 1200px) {
	.mobile-only { display: none !important; }
}

@media all and (max-width: 1199px) {
	.desktop-only { display: none !important; }
}