@charset "utf-8";
/* FONT-FACES
------------------------------------------------------------*/

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-display: fallback;
	src: local("roboto light"), url("../webfonts/roboto-300.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: local("roboto regular"), url("../webfonts/roboto-400.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: fallback;
	src: local("roboto medium"), url("../webfonts/roboto-500.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: local("roboto bold"), url("../webfonts/roboto-700.woff2") format("woff2");
}

@font-face {
	font-family: "icon";
	font-display: block;
	src: url("../webfonts/icons.woff2") format("woff2");
}

/* CSS VARIABLES
------------------------------------------------------------*/
:root {
	--md-primary-color: #0288D1; /* UI objects BG : top, etc. ; */
	--md-primary-color-variant: #E5e8ff; /* lighter version, semi-transparent of primary */
	--md-secondary-color: #FF5252; /* UI items : FAB, buttons…; */
	--md-secondary-color-variant: #E0D0E3; /* lighter version, semi-transparent of primary */

	--md-app-background-color: #fafafa; /* page background-color */
	--md-card-color: #fff; /* Card background color */
	--md-card-color-hover: #eee; /* Card background color */
	--md-card-color-focus: #fff; /* Card background color */


	--main-md-text-color: #222;
	--scnd-md-text-color: #fff;
}

::selection {
	color: var(--main-md-text-color);
	background: var(--md-primary-color);
}

/* ANIMATIONS
------------------------------------------------------------*/
/* rotating loading spinner */

@keyframes spinnerLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

/* bottom left popup in/out sliding */
@keyframes popup-disapear {
	10% {
		top: 48px;
	}
	90% {
		top: 48px;
	}
	99% {
		top: -48px;
	}
	100% {
		top: -999px;
	}
}

/* makes a box appearing */
@keyframes appear {
	0%   { transform-origin: 50% 50%; transform: scale(0); }
	99%  { transform-origin: 50% 50%; transform: scale(1.05); }
	100% { transform-origin: 50% 50%; transform: scale(1); }
}

@keyframes appearSlow {
	0%   { transform-origin: 50% 50%; transform: scale(0.4 , 1.4); }
	100% { transform-origin: 50% 50%; transform: scale(1, 1); }
}

/* makes a box disapearing vertically */
@keyframes disapear {
	0%   { transform-origin: 0 0; transform: scaleY(1); opacity: 1; }
	100% { transform-origin: 0 0; transform: scaleY(0); opacity: 0; }
}

/* makes a box disapearing honrizontaly */
@keyframes disapearH {
	0%   { transform-origin: 0 0; transform: scaleX(1); opacity: 1; }
	100% { transform-origin: 0 0; transform: scaleX(0); opacity: 0; }
}

/* elements slide smothly to right / left */
@keyframes slideright {
	0%   { left: 50%; opacity: 1; }
	100% { left: 60%; opacity: 0; }
}

@keyframes slideleft {
	0%   { left: 50%; opacity: 1; }
	100% { left: 40%; opacity: 0; }
}

/* material design button-click "ripple" effect */
@keyframes md-ripple {
	0%   { transform: scale(0, 0);   opacity: 1; }
	50%  { transform: scale(25, 25); opacity: .5; }
	100% { transform: scale(25, 25); opacity: 0; }
}

/* popup fade-in */
@keyframes fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* GENERAL PAGE LAYOUT
------------------------------------------------------------ */

* {
	color: inherit;
}

[hidden] {
	display: none!important;
}

:not(img)::before,
:not(img)::after {
	font-family: "icon";
	vertical-align: middle;
	line-height: 1;
	color: inherit;
}

html,
body {
	margin: 0;
	padding: 0;
}

html {
	color: rgba(0, 0, 0, .87);
	font-family: Roboto, Verdana, Helvetica, Arial, sans-serif;
	word-wrap: break-word;
	font-size: 15px;
	height: 100%;
	background: var(--md-app-background-color);
}

body {
	position: relative;
	/*min-height: calc( 100% - 100px);
	padding-bottom: 100px;*/
	min-height: 100%;
	background: inherit;
}

body.noscroll {
	overflow: hidden;
}

#header {/* the top bar(s) */
	z-index: 100;
	color: var(--main-md-text-color);
	color: inherit;
	background: inherit;
	position: sticky;
	top: 0;
	box-shadow: 0 1px 8px rgba(0,0,0,.5);
}

#axe { /* the entire page without top bars (#header) and footer (#footer) */
	padding: 20px;
	margin: auto;
	background: inherit;
}

#page { /* the main frame. #axe minus the "filtre" forms, and the subnav */
	padding: 5px;
	background: inherit;
}

/* Footer */
#footer {
	text-align: center;
	color: #666;
	padding: 0 0 30px;
	font-size: .8em;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	z-index: -1;
}

/* GENERAL STUFF
------------------------------------------------------------------- */

a {
	color: #2196F3;
}

a:hover {
	color: #4f6681;
	text-decoration: underline;
}

img {
	border: none;
}

pre { white-space: pre-wrap; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Trebuchet MS', Roboto, Arial, sans-serif;
	clear: both;
}

textarea {
	resize: both;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}

textarea, input, button {
	font-family: inherit;
	font-size: inherit;
	font-weight: 300;
	border-radius: 0;
}

/* reverting Webkit bullshit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
    -webkit-transition-delay: 9999s;
}

label, input, textarea, select {
	vertical-align: middle;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button {
	cursor:pointer;
}

q, blockquote {
	font-style: italic;
}

#footer a {
	color: inherit;
	text-decoration: none;
}

.centrer {
	text-align: center;
}

.hidden {
	display: none;
}

.info { /* ex : « il n'y a aucun commentaire » est un .info */
	padding: 15px;
	padding-left: 40px;
	position: relative;
	margin: 0;
}

#erreurs, .erreurs {
	display: block;
	clear: both;
	color: #D40000;
	margin: 0 0 15px 0;
}

/* TOP
------------------------------------------------------------------------ */
#top {
	display: flex;
	box-sizing: border-box;
	align-items: center; /* vertical align*/
	height: 64px;
	padding: 8px 20px 8px 8px;
	background: var(--md-card-color);
}

#top a {
	text-decoration: none;
	color: inherit;
}


/* TOP > "hide menu" button (burger menu)
------------------------------------------------------*/
#hide-side-nav {
	padding: 0;
	background-color: transparent;
	border: none;
	opacity: .7;
	flex-shrink: 0;
	outline: none;
}

#hide-side-nav:focus::before {
	background-color: rgba(0, 0, 0, .1);
}

#hide-side-nav:before {
	content: "\e5d2";
	font-size: 1.7em;
	cursor: pointer;
	display: block;
	border-radius: 50%;
	line-height: 48px;
	width: 48px;
}


/* TOP > H1 : title w/ link;
------------------------------------------------------*/
#titre-page {
	font-size: 1.5em;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 auto;
}

#titre-page > a {
	/*display: inline-block;*/
	padding: 0 15px 0 8px;
}

#titre-page > a::before {
	font-size: 1.15em;
	/*line-height: inherit;*/
	vertical-align: bottom;
	padding-right: 10px;
}


body.index    #titre-page > a::before { content: "\e922"; }
body.articles #titre-page > a::before { content: "\e86e"; }
body.ecrire   #titre-page > a::before { content: "\e3c9"; }
body.comments #titre-page > a::before { content: "\e8af"; }
body.files    #titre-page > a::before { content: "\e2bd"; }
body.links    #titre-page > a::before { content: "\e8e6"; }
body.notes    #titre-page > a::before { content: "\e3de"; }
body.feeds    #titre-page > a::before { content: "\e0e5"; position: relative; top: -2px; }
body.agenda   #titre-page > a::before { content: "\e878"; }
body.contacts #titre-page > a::before { content: "\e0ba"; }

body.preferences #titre-page > a::before,
body.maintenance #titre-page > a::before { content: "\e8b8"; }


/* TOP > Search button + searchbar
------------------------------------------------------*/
#search {
	flex: 0 1 auto;
	margin: 0 15px 0 8px;
	display: flex;
	align-items: stretch;
	background-color: rgba(0, 0, 0, .1);
	border-radius: 4px;
}

#search:focus-within { /* background on :focus */
	box-shadow: 0 0 4px black;
}

#input-rechercher {
	display: none;
}

#q { /* normal : transparent; */
	padding: 0;
	border: 1px solid transparent;
	max-width: 350px;
	flex: 1 1 auto;
	order: 2;
	background-color: transparent;
	border-top-right-radius: inherit;
	border-bottom-right-radius: inherit;
	appearance: none;
	outline: none;
}


#label_q {
	flex: 0 0 48px;
	text-align: center;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
	font-size: 0;
}

#label_q::before {
	content: "\e8b6";
	font-size: 1.6rem;
	display: block;
	line-height: 48px;
}

#q,
#label_q { /* hover */
	cursor: text;
}


/* TOP > nav bar
------------------------------------------------------*/
#nav::before {
	font-size: 1.6em;
	text-align: center;
	content: "\e901";
	width: 48px;
	cursor: pointer;
	display: inline-block;
	line-height: 48px;
}

/* TOP > nav bar > menu
----------------------------------------*/
#nav > ul {
	list-style-type: none;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	position: absolute;
	background: var(--md-card-color-focus);
	right: 8px;
	transform: translateY(-700px);
	top: 60px;
	box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.6);
	opacity: 0;
	border-radius: 2px;
	display: grid;
	grid-template-columns: repeat(3, 100px);
	z-index: 2;
}

#nav > ul::before {
	content: "";
	position: absolute;
	padding: 7px;
	top: -7px;
	right: 125px;
	transform: rotate(45deg);
	background: inherit;
}

#nav.visible > ul {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .2s ease-in;
}

#nav > ul > li {
	display: inline-block;
	vertical-align: bottom;
	text-align: center;
	border: 2px solid transparent;
	border-radius: 2px;
}

#nav > ul > li:hover {
	box-shadow: 0 0 3px currentColor;
}

#nav a {
	display: block;
	color: inherit;
	padding: 5px;
	font-size: .8em;
}

#nav a::before {
	display: block;
	font-size: 2em;
	border-radius: 100%;
	height: 1em;
	width: 1em;
	padding: .5em;
	margin: 0 auto 10px;
	box-shadow: 0 0 3px rgba(0, 0, 0, .4) inset;
	text-shadow: 0px 0px 1px white;
}

#nav #lien-liste::before    { content: "\e86e"; background-color: rgba(211,47,47, .5); }
#nav #lien-index::before    { content: "\e922"; background-color: rgba(255,255,255, .5); }
#nav #lien-nouveau::before  { content: "\e3c9"; background-color: rgba(211,47,47, .5); }
#nav #lien-lscom::before    { content: "\e8af"; background-color: rgba(255,167,38, .5); }
#nav #lien-fichiers::before { content: "\e2bd"; background-color: rgba(48,63,159, .5); }
#nav #lien-links::before    { content: "\e8e6"; background-color: rgba(30,136,229, .5); }
#nav #lien-notes::before    { content: "\e3de"; background-color: rgba(174,234,0, .5); }
#nav #lien-rss::before      { content: "\e0e5"; background-color: rgba(239,108,0, .5); }
#nav #lien-agenda::before   { content: "\e878"; background-color: rgba(29,233,182, .5); }
#nav #lien-contacts::before { content: "\e0ba"; background-color: rgba(119,198,255, .5); }


/* TOP > Notif-icon / drop-down menu
------------------------------------------------------*/

#notif-icon::before {
	font-size: 1.6em;
	text-align: center;
	content: "\e7f4";
	width: 48px;
	cursor: pointer;
	display: inline-block;
	line-height: 48px;
}

#notif-icon:not([data-nb-notifs="0"])::before {
	content: "\e7f7";
}

#notif-icon:not([data-nb-notifs="0"])::after {
	content: attr(data-nb-notifs);
	position: absolute;
	color: white;
	font-size: .65em;
	font-family: inherit !important;
	background: red;
	border-radius: 50%;
	padding: 0.1em;
	box-sizing: border-box;
	top: 13px;
	margin-left: 24px;
	font-weight: bold;
	height: 1.9em;
	line-height: 1.7em;
	min-width: 2.1em;
	text-align: center;
	right: 72px;
}

#notif-icon > ul {
	list-style-type: none;
	margin: 0;
	padding: 20px;
	position: absolute;
	background: var(--md-card-color-focus);
	right: 8px;
	transform: translateY( calc(-100% - 50px) ) ;
	top: 60px;
	box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.6);
	opacity: 0;
	border-radius: 2px;
	color: inherit;
	z-index: 1;
}

#notif-icon > ul::before {
	content: "";
	position: absolute;
	padding: 7px;
	top: -7px;
	right: 76px;
	transform: rotate(45deg);
	background: inherit;
}

#notif-icon.visible > ul {
	opacity: 1;
	z-index: 1;
	transition: opacity .4s ease-out;
	transform: translateY(0);
}

#notif-icon a {
	margin: 0;
	padding: 20px;
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 2px;
}

#notif-icon a:hover {
	background: rgba(0, 0, 0, .1);
}

/* TOP > Right nav bar
------------------------------------------------------*/
#nav-acc::before {
	font-size: 2em;
	text-align: center;
	content: "\E55A";
	width: 48px;
	cursor: pointer;
	display: inline-block;
	line-height: 48px;
}

/* TOP > right menu
----------------------------------------*/
#nav-acc > ul {
	list-style-type: none;
	margin: 0;
	padding: 5px 0;
	box-sizing: border-box;
	position: absolute;
	background: var(--md-card-color-focus);
	right: 8px;
	transform: translateY(-230px);
	top: 60px;
	box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.6);
	text-align: right;
	opacity: 0;
	border-radius: 2px;
	color: inherit;
	z-index: 1;
}

#nav-acc > ul::before {
	content: "";
	position: absolute;
	padding: 7px;
	top: -7px;
	right: 29px;
	transform: rotate(45deg);
	background: inherit;
	z-index: -1;
}

#nav-acc.visible > ul {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .2s ease-in;
}

#nav-acc a {
	height: 45px;
	line-height: 45px;
	padding: 0 48px 0 77px;
	display: block;
}

#nav-acc a:hover {
	background: rgba(0, 0, 0, .1);
}

#nav-acc a:after {
	font-size: 1.2em;
	margin-left: 10px;
	font-weight: bold;
}

#nav-acc #lien-preferences:after { content: "\e8b8"; }
#nav-acc #lien-site:after        { content: "\E89E"; }
#nav-acc #lien-deconnexion:after { content: "\E879"; }

/* TOP > Sub-menu (on specific pages)
------------------------------------------------------*/
#sub-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 11px 0 14px;
	background: #fefefe;
	color: #333;
	z-index: -2;
	border-radius: 7px 7px 0 0;
}

.sub-menu-buttons {
	flex: 1 0 auto;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.sub-menu-buttons > li {
	display: inline-block;
}

.sub-menu-buttons li > button:focus,
.sub-menu-buttons li > button::-moz-focus-inner {
	background-color: rgba(0, 0, 0, .05);
	transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
   outline: none;
	border-color: transparent;
}

/* Floating action button (FAB)
------------------------------------------------------------------ */
#fab {
	display: inline-block;
	height: 56px;
	width: 56px;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	position: fixed;
	padding: 0;
	overflow: hidden;
	right: 32px;
	bottom: 32px;
	z-index: 99;
	transition: transform .2s cubic-bezier(.57,.57,.96,1.39);
	border: 0;
}

#fab::before {
	content: "\E145";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	color: var(--scnd-md-text-color);
	line-height: 56px;
	text-align: center;
	font-size: 1.9em;
	background: #f44336;
	background: var(--md-secondary-color);
}

#fab:focus {
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.15), 0 8px 17px 0 rgba(0, 0, 0, 0.4);
	outline: none;
}

#fab.hidden {
	transform: scale(0);
	transition: transform .2s cubic-bezier(.2,-.5,.5,.2);
}

/* The notif bubble that shows up in case of a message */

#popup-notif {
	position: fixed;
	z-index: 110;
	background: var(--md-primary-color);
	color: white;
	top: -60px;
	left: 50%;
	padding: 5px 15px;
	transform: translateX(-50%);
	border-radius: 20px;
	box-shadow: 0px 0 7px gray;
	text-align: center;
}

#popup-notif.visible {
	top: 48px;
}

#popup-notif.fading {
	animation: popup-disapear 4s;
	animation-fill-mode: none;
	animation-fill-mode: forwards;
}

#popup-notif #counter {
	margin: 0 8px;
	height: 15px;
	width: 15px;
	border: 3px solid rgba(255, 255, 255, .3);
	border-top-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	vertical-align: middle;
	animation: none;
	display: none;
}

#popup-notif #counter.rotating {
	animation: spinnerLoading 0.6s infinite linear;
	display: inline-block;
}

/* SUBNAV (with nb articles/comms or link to "see online")
------------------------------------------------------------------ */
#subnav {
	margin: 10px 5px 20px;
	display: flex;
}

#subnav > .nombre-elem {
	font-weight: bold;
	margin: auto 0 auto auto ;
	display: flex;
	align-items: first baseline;
	height: 48px;
}

#subnav > .nombre-elem > ul { /* list on link-hover on comm-page */
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 5px 0;
	position: relative;
	z-index: +1;
	border-radius: 3px;
}

#subnav > .nombre-elem > ul:hover {
	box-shadow: 0 15px 20px rgba(0, 0, 0, .2);
	background: var(--md-card-color);
	z-index: +2;
}

#subnav > .nombre-elem li+li {
	display: none;
}

#subnav > .nombre-elem ul:hover > li:hover {
	background: var(--md-card-color-hover);
}

#subnav > .nombre-elem ul:hover li+li {
	display: block;
}

#subnav > .nombre-elem a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 10px;
}

#subnav > .nombre-elem > ul > li > a {
	display: block;
	box-sizing: border-box;
}

/* GENERAL FORM STUFF
----------------------------------------------------------*/
select {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 250px;
	appearance: none;

	padding: 5px 20px 5px 15px;
	cursor: pointer;
	font-size: inherit;
	background: var(--md-card-color) no-repeat 100% 50% / 20px url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij48cGF0aCBkPSJNMTAuNSAxNWw3LjUgNy41IDcuNS03LjV6Ii8+PC9zdmc+Cg==");

    border: 1px solid silver;
    color: var(--main-md-text-color);

    border-radius: 4px;
}

select:focus {
	box-shadow: 0px 0px 5px 2px silver;
	outline: none;

}

select option,
select optgroup::before {
	border: 0;
	background: white;
	color: #333;
}

select optgroup::before {
	background: #eee;
	text-align: center;
}

legend {
	padding: 0;
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.text, *[type='submit'] {
	box-sizing: border-box;
	padding: 5px;
	background: none;
}

.text {
	margin: 0;
	padding: 10px;
	border: 1px solid silver;
	border-radius: 4px;
	background: var(--md-card-color);
	position: relative;
	outline: none;
}

.text:invalid {
	box-shadow: none;
	outline: none;
	border-bottom-color: red;
}

.text:focus {
	box-shadow: 0px 0px 5px 2px silver;
	z-index: 2;
	border-radius: 4px;
	border-color: transparent;
}

/* FORMS defaults
-------------------------------------------------------------*/
/*input buttons */
.submit-bttns {
	text-align: right;
	margin: 20px auto 5px;
	box-sizing: border-box;
	width: 100%;
	max-width: 700px;
	padding: 0 20px;
}

.submit-bttns .button-delete {
	float: left;
	min-width: 130px;
}

.submit {
	color: white;
	font-weight: 500;
	vertical-align: middle;
	padding: 8px 9px;
	border-radius: 4px;
	border: 0px solid transparent;
	min-width: 100px;
	text-transform: uppercase;
}

.submit:hover {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.button-submit {
	min-width: 120px;
	background: #2196f3;
}

.button-delete {
	color: #f44336;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
	transition: box-shadow .2s;
	background: rgba(244, 67, 54, .1);
}

.button-cancel {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
	background: white;
	color: #777;
	background: var(--md-card-color-hover);
	color: var(--main-md-text-color);
	margin-right: 5px;
	transition: box-shadow .2s;
}

.submit[disabled] {
	color: silver;
	background: #eee;
	box-shadow: none;
	cursor: auto;
}

.submit {
	position: relative;
	overflow: hidden;
}

.submit:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, .5);
	opacity: 0;
	border-radius: 100%;
	transform: scale(1, 1) translate(-50%);
}

/* for mouse focus */
.submit:focus:hover::after {
	animation: md-ripple 1s ease-out;
}

/* for keyboard focus */
.submit:focus:not(:hover)::after {
	background: rgba(255, 255, 255, .2);
	transform: scale(1, 1);
	border-radius: 0;
	opacity: 1;
}

/* checkboxes with "toggle-button" style */
.checkbox-toggle {
	margin: 25px 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.checkbox-toggle+label {
	cursor: pointer;
	position: relative;
}

.checkbox-toggle+label::after {
	position: absolute;
	right: -30px;
	top: -1px;
	width: 22px;
	height: 22px;
	border-radius: 100%;
	background: #ECECEC;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	content: '';
	transition: all 0.3s ease;
}

.checkbox-toggle:checked + label::after {
	right: -50px;
	background: var(--md-secondary-color);
}

.checkbox-toggle+label::before {
	position: absolute;
	right: -50px;
	top: 3px;
	height: 15px;
	width: 40px;
	background: #B2B2B2;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	content: '';
}

.checkbox-toggle:checked + label:before {
	background: var(--md-secondary-color);
	opacity: .6
}

.checkbox-toggle:focus+label::after {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2), 0 0 0 5px rgba(0, 0, 0, .1);
}

.checkbox-toggle:not(:disabled):active + label::after {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2), 0 0 0 15px rgba(160, 194, 249, .4);
}

/* ERREURS */
#erreurs, .erreurs, #succes, .succes {
	display: block;
	clear: both;
	margin: 0 0 15px 0;
}

#erreurs, .erreurs {
	color: #D40000;
}

#succes, .succes {
	color: #00A400;
}

#erreurs ul {
	list-style-type: square;
	padding-left: 20px;
	margin-top: 10px;
}

#erreurs li {
	margin: 0;
}

/* Popup (initially hidden)
********************************************/
/* on popup display */
#popup-wrapper {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0, .5); /* dark */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 150;
	animation: fade-in .2s;
	backdrop-filter: blur(2px);
}

#popup {
	display: flex;
	flex-direction: column;
	min-height: 350px;
	min-width: 600px;
	width: 600px;
	background: var(--md-card-color);
	box-shadow: 0px 6px 48px 0 black;
	padding: 0;
	overflow: hidden; /* for rounded corners */
	border-radius: 2px;
	resize: both;
	max-height: calc(100% - 10px);
	animation:  appearSlow .1s;
	border-radius: 4px;
}

#popup > .popup-title {
	padding: 5px 15px;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 20px;
}

#popup > .popup-title::after {
	content: "";
	display: block;
	background: transparent;
	height: 5px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
}

#popup > .popup-title > .button-cancel {
	background: transparent;
	border: 0;
	min-width: 0;
	padding: 10px;
	color: inherit;
	margin-right: 0;
	border-radius: 50%;
}

#popup > .popup-title > .button-cancel:hover {
	box-shadow: none;
	background: rgba(0, 0, 0, .1);
}

#popup > .popup-title > .button-cancel::before {
	content: "\e5cd";
	display: inline-block;
	font-size: 1.4em;
}

#popup > .popup-title > .item-menu-options::before {
	font-size: 1.4em;
}

#popup > .popup-content {
	padding: 15px;
	overflow-y: scroll;
	position: relative;
	flex: 1;
}

#popup > .popup-content::before {
	content: "";
	display: block;
	background: linear-gradient(var(--md-card-color) 50%, transparent);
	height: 8px;
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: 1;
	left: 0;
}

#popup .popup-footer {
	padding: 10px;
	text-align: right;
	display: flex;
	justify-content: space-between;
}

#popup .popup-footer .submit {
	font-size: .9em;
}

#popup .popup-footer .button-submit {
	background: white;
	color: #222;
}

/* Page maintenance.
********************************************/
#form_export, #form_import, #form_optimi,
#e_json, #e_html, #e_zip {
	display: none;
}

/* MAIN PAGES TILES Styles
*************************************/

/* empty pages : add fun image; */
#post-list:empty,
#blocBillets:empty,
#liste-commentaires:empty,
#list-link:empty,
#daily-events:empty,
#table-contacts > tbody:empty {
	height: 500px;
	background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PHN0eWxlPi5jbHMtMntmaWxsOiNiZGJlYzB9LmNscy0yLC5jbHMtNSwuY2xzLTZ7c3Ryb2tlOiM0NTQxM2M7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kfS5jbHMtNXtmaWxsOm5vbmV9LmNscy02e2ZpbGw6Izg3ODk4Y308L3N0eWxlPjwvZGVmcz48Zz48ZWxsaXBzZSBjeD0iMjQiIGN5PSI0NS4yMiIgZmlsbD0iIzQ1NDEzYyIgb3BhY2l0eT0iLjE1IiByeD0iMjMuMTMiIHJ5PSIxLjc4Ii8+PHBhdGggZD0iTTQ1IDEyLjU3YTEuMTggMS4xOCAwIDAgMC0xLjE5LTEuMThIMTAuNjJWNDRINDJhMyAzIDAgMCAwIDMtM3oiIGNsYXNzPSJjbHMtMiIvPjxwYXRoIGZpbGw9IiNmMGYwZjAiIGQ9Ik0zOS42NyA0MS42M0EyLjM3IDIuMzcgMCAwIDAgNDIgNDRINS44N2EyLjM3IDIuMzcgMCAwIDEtMi4zNy0yLjM3VjYuMDVhMS4xOCAxLjE4IDAgMCAxIDEuMTktMS4xOGgzMy43OWExLjE4IDEuMTggMCAwIDEgMS4xOSAxLjE4eiIgLz48cGF0aCBmaWxsPSIjZTBlMGUwIiBkPSJNNDIgNDRhMi4zNyAyLjM3IDAgMCAxLTIuMzctMi4zN3YtLjg5SDUuODdhMi4zNyAyLjM3IDAgMCAxLTIuMzctMi4zN3YzLjI2QTIuMzcgMi4zNyAwIDAgMCA1Ljg3IDQ0eiIvPjxwYXRoIGQ9Ik0zOS42NyA0MS42M0EyLjM3IDIuMzcgMCAwIDAgNDIgNDRINS44N2EyLjM3IDIuMzcgMCAwIDEtMi4zNy0yLjM3VjYuMDVhMS4xOCAxLjE4IDAgMCAxIDEuMTktMS4xOGgzMy43OWExLjE4IDEuMTggMCAwIDEgMS4xOSAxLjE4eiIgY2xhc3M9ImNscy01IiAvPjxyZWN0IHdpZHRoPSIyOC40NiIgaGVpZ2h0PSI2LjUyIiB4PSI3LjA2IiB5PSI5LjAyIiBjbGFzcz0iY2xzLTYiIHJ4PSIuNjMiIHJ5PSIuNjMiLz48cmVjdCB3aWR0aD0iMTUuNDIiIGhlaWdodD0iMTUuNDIiIHg9IjcuNjUiIHk9IjE5LjEiIGNsYXNzPSJjbHMtNiIgcng9IjEuMzUiIHJ5PSIxLjM1Ii8+PHBhdGggZD0iTTI2LjYzIDI3LjE0aDguODkiIGNsYXNzPSJjbHMtNSIgLz48cGF0aCBkPSJNMjYuNjMgMjMuNDZoOC44OSIgY2xhc3M9ImNscy01IiAvPjxwYXRoIGQ9Ik0yNi42MyAxOS43N2g4Ljg5IiBjbGFzcz0iY2xzLTUiIC8+PHBhdGggZD0iTTI2LjYzIDMwLjgzaDguODkiIGNsYXNzPSJjbHMtNSIgLz48cGF0aCBkPSJNMjYuNjMgMzQuNTFoOC44OSIgY2xhc3M9ImNscy01IiAvPjxwYXRoIGQ9Ik03LjY1IDM5LjI2aDI3Ljg3IiBjbGFzcz0iY2xzLTUiIC8+PHBhdGggZD0iTTE4LjgyIDI4YTEzLjQzIDEzLjQzIDAgMCAxLTEuMjctNCAuNTkuNTkgMCAwIDAtLjU5LS41NmgtMi45YS41Ny41NyAwIDAgMC0uNTguNDkgMTguMzQgMTguMzQgMCAwIDEtMS4yMyAzLjc0QTEzLjM0IDEzLjM0IDAgMCAxIDcuNjUgMzN2LjE4QTEuMzQgMS4zNCAwIDAgMCA5IDM0LjUxaDEyLjcyYTEuMzUgMS4zNSAwIDAgMCAxLjM1LTEuMzV2LTFBOS4zMSA5LjMxIDAgMCAxIDE4LjgyIDI4eiIgY2xhc3M9ImNscy0yIiAvPjwvZz48L3N2Zz4K);
	background-size: 120px;
	opacity: .3;
	box-shadow: none;
	position: relative;
}

#blocBillets:empty::after,
#post-list:empty::after,
#liste-commentaires:empty::after,
#list-link:empty::before,
#daily-events:empty::before,
#table-contacts > tbody:empty::before {
	content: "Rien ici…";
	font-family: inherit;
	font-size: 2em;
	position: absolute;
	bottom: 150px;
	left: 0;
	right: 0;
	text-align: center;
}

#table-contacts > tbody:empty + thead {
	display: none;
}


/* form writing */
#apercu, #form-ecrire .main-form, #form-ecrire #date-and-opts,
#graphs .graph,
#post-new-lien, .linkbloc,
.billets,
#auth, #install,
#form-image, #image-section, #files-section,
#preferences > div, #maintenance-form form,
#post-nv-commentaire, .comm-main-frame,
#form-rss-config,
.notebloc, #post-new-note,
#calendar-table, #calendar-table > tbody, #events-section,
#daily-events, #side-nav,
#table-contacts,
#post-list
 {
	padding: 15px;
	background: var(--md-card-color);
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), 0 3px 1px -2px rgba(0,0,0,0.2);
	border-radius: 4px;
}
/* AUTH
-------------------------------------------------------------------------------- */

#pageauth {
	font-size: 1em;
	display: block;
	clear: both;
	margin: auto;
	text-align: center;
}

#auth,
#install {
	width: 320px;
	margin: auto;
	box-sizing: border-box;
}

#auth p {
	display: flex;
	align-items: center;
}

#auth p label:not([for="stay_logged"]) {
	width: 0px;
	overflow: hidden;
	font-size: 1.7em;
	padding-left: 40px;
	margin-right: -40px;
	z-index: 3;
	height: 40px;
}

#auth p label:not([for="stay_logged"])::before {
	margin-left: -40px;
	width: 40px;
	display: inline-block;
}

#auth p input.text {
	flex: 1;
	padding-left: 40px;
}

#auth p input#stay_logged {
	margin: 20px 5px;
}

/* formulaire d’installation */
#install p {
	text-align: left;
}

#install p label {
	display: block;
	text-align: left;
	padding-left: 5px;
}

#install p input.text {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
	width: 100%;
}

#install #mdp,
#install #mysql_password {
	padding-right: 35px;
}

#install .unveilmdp {
	border: none;
	background: none;
	padding: 0;
	outline: none;
	margin-right: -30px;
	margin-left: -30px;
	position: relative;
	z-index: 2;
}

#install .unveilmdp:focus {
	text-shadow: 0 0 4px red;
}


#install .unveilmdp::before {
	content: "\e8f4";
	font-size: 2em;
}

#install input[type="text"]+.unveilmdp::before {
	color: red;
}

#pageauth .erreurs {
	display: inline-block;
	text-align: left;
}

#auth p label[for="user"]::before     { content: "\e7FD"; }
#auth p label[for="password"]::before { content: "\e897"; }

#auth .button-submit,
#install .button-submit {
	width: 200px;
	line-height: 1.9em;
	margin-top: 20px;
}

#pageauth h1 {
	margin: 0 auto 25px;
	font-size: 2.7em;
}

#pageauth h1#step { /* install */
	font-size: 1.8em;
	color: #999;
}

#pageauth label {
	text-align: center;
}

#pageauth label[for="sgdb"] {
	display: inline;
}

/* GRAPHS
-------------------------------------------------------------------------------- */


#graphs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 40px;
}

#graphs .graph {
	margin-bottom: 60px;
	flex: 0 1 calc( 50% - 40px );
	width: calc(50% - 40px );
	background-color: var(--md-card-color);
}

#graphs .graph .form-legend {
	font-weight: 500;
	margin-bottom: 20px;
}

.graph-container {
	height: 180px;
}

.graph-container > canvas {
	height: 150px;
}

.graph-container .graphique {
	position: relative;
	top: -181px;
	height: 180px;
	padding: 30px 0 0;
	text-align: center;
	direction: rtl;
	overflow: hidden;
}

.graph-container .graphique a {
	color: inherit;
	text-decoration: none;
}

.graph-container .month {
	vertical-align: bottom;
	display: inline-block;
	text-align: center;
	padding-bottom: 50px;
	width: 30px;
	position: relative;
	opacity: .7;
}

.graph:hover .graph-container .month {
	opacity: 1;
}

.graph-container .month:first-of-type {
	background: red;
	width: 0px;
}

.graph-container .month::before {
	content: '';
	border: 2px solid white;
	height: 5px;
	width: 5px;
	transform: translateX(5px) translateY(-5px);
	display: inline-block;
	position: absolute;
	border-radius: 50%;
	background: rgba(33,150,243,1);
}

.graph-container .month:first-of-type::before {
	content: none;
}

.graph-container .month-bar {
	min-height: 1px;
}

.graph-container .month-name {
	bottom: 0;
	display: block;
	white-space: pre;
	font-size: 80%;
	line-height: 100%;
	text-transform: capitalize;
	border: 1px solid transparent;
	border-radius: 2px;
}

.graph-container .month-nb {
	top: -25px;
	left: -5px;
	position: absolute;
	width: 40px;
	color: #777;
	font-weight: bold;
}

.graph-container .month:hover::before {
	border: 2px solid rgba(33,150,243,1);
	background: white;
}

.graph-container .month:hover .month-bar {
	background: linear-gradient(to left, transparent 13px, rgba(33,150,243,1) 10px, rgba(33,150,243,1) 15px, transparent 15px);
}

.graph-container .month:hover .month-name {
	font-weight: bold;
	border-color: currentColor;
}

/* global search results */
#graphs .legend > span {
	font-variant: none;
	text-decoration: underline
}

#resultat-recherche {
	list-style-type: none;
	padding-left: 10px;
}

#resultat-recherche li {
	display: inline-block;
}

#resultat-recherche a {
	text-decoration: none;
	color: inherit;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
	padding: 6px 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	border-radius: 2px;
	border: 0px solid transparent;
}

#resultat-recherche a:hover {
	background-color: rgba(0, 0, 0, .05);
}

/* TABLE LISTE BILLETS
--------------------------------------------------------------------------- */
#body.articles #axe {
	max-width: 1100px;
}

#blocBillets h2 {
	font-size: 1em;
	opacity: .8;
	padding: 20px 5px 15px;
	margin: 40px 0 0;
	/*border-top: 1px solid silver;*/
}

.billets {
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: var(--md-card-color);
}

.billets > li {
	padding: 0px 15px;
	min-height: 60px;
	margin: 1px 0;
	display: flex;
	align-items: center;
	border-radius: 4px;
	transition: background-color 0.3s ease 0s;
}

.billets > li:hover {
	background-color: var(--md-card-color-hover);
}

.billets > li > a {
	text-decoration: none;
	opacity: .5;
	transition: opacity .3s ease 0s;
	color: inherit;
}

.billets > li:hover > a {
	opacity: 1;
}

.billets > li > a::before {
	font-size: 1.6em;
	margin-right: 5px;
	opacity: .8;
}

.billets > li > a.titre { /*title*/
	flex: 1;
	opacity: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.billets > li > a.titre::before {
	font-size: 1.9em;
	margin-right: 20px;
}

.billets > li.on > a.titre::before {
	content: "\E8F4";
	color: rgba(101, 234, 143, 1);
}

.billets > li.off > a.titre::before {
	content: "\E8F5";
}

.billets > li > a.titre > span { /* "planned" */
	padding: 1px 10px;
	color: var(--main-md-text-color);
	background: var(--md-primary-color);
	margin: 0 10px 0 0;
	border-radius: 10px;
	/*text-decoration: none;*/
}

.billets > li > a.date::before {
	content: "\E616";
}

.billets > li > a.comments { /*comms*/
	padding: 0 0 0 12px;
	margin: 0 15px 0 10px;
}

.billets > li > a.comments::before {
	content: "\e8af";
}

.billets > li > a.preview::before { /* prev */
	content: "\E0E2";
}

/* ECRIRE
---------------------------------------------------------------------------------- */

/* apercu */
#apercu,
#form-ecrire {
	padding: 0 0 1px;
	clear: both;
}

#apercu {
	margin-bottom: 15px;
}

#apercu > h2 {
	background: var(--md-card-color);
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	padding: 10px 20px;
	border-bottom: 1px solid #ddd;
	margin: 0;
}

#apercu > div {
	margin: 20px;
}

#apercu blockquote,
.link-content blockquote,
.commentbloc .comm-content blockquote {
	padding: 10px 10px 10px 15px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

/* bootstrap style */
#apercu pre,
.link-content pre,
.commentbloc .comm-content pre {
    font-size: .9em;
    margin: .5em 0;
    background-color: #272822;
    font-family: monospace, 'courier new';
    padding: 1em;
	overflow-x: auto;
	color: #f8f8f2;
	border-radius: 4px;
}

#apercu code,
.link-content code,
.commentbloc .comm-content code {
	padding: 3px;
	margin: 0;
	color: #c7254e;
	background-color: #f9f2f4;
}

#apercu pre > code,
.link-content pre > code,
.commentbloc .comm-content pre > code {
	background-color: inherit;
	color: inherit;
	padding: 0;
	word-break: keep-all;
	white-space: pre;
	hyphens: none;
}

#apercu kbd,
.link-content kbd,
.commentbloc .comm-content kbd {
	padding: 1px 2px;
	border: 2px #000 outset;
	background: #333;
	color: #fff;
	border-radius: 5px;
	font-size: .9em;
}


#apercu pre[data-language]::before,
.link-content pre[data-language]::before,
.commentbloc .comm-content pre[data-language]::before {
	content: attr(data-language);
	display: block;
	padding: 15px 2px;
	background: rgba(0, 0, 0, .1);
	flex: 0 0 45px;
	text-align: center;
	font-family: inherit;
}

#apercu img {
	padding: 2px;
	border: 1px solid #ddd;
	max-width: 100%;
	height: auto;
}

#form-ecrire {
	display: flex;
}

#form-ecrire textarea {
	resize: vertical;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;

}

#form-ecrire .main-form {
	flex: 1 1 auto;
	padding: 0;
}
#form-ecrire .main-form .text {
	width: 100%;
	margin: 0;
	padding: 15px;
	border: 1px solid transparent;
	border-bottom-color: silver;

}

#titre {
	font-weight: bold;
	font-size: 1.15em;
	border-radius: 0;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

#chapo_note {
	display: flex;
}

#chapo_note > textarea {
	width: auto;
	min-width: 0;
	border-radius: 0;
}

#form-ecrire #chapo {
	flex: 2 2 auto;
	border-right: 1px solid silver;
}
#form-ecrire #notes {
	flex: 1 2 auto;
}

#type_tags,
#mots_cles {
	border-radius: 0;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

#form-ecrire .main-form > *:last-child {
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

#content_format {
	position: relative;
	z-index: 1;
}

#content_format:focus-within {
	background: var(--md-card-color-focus);
	box-shadow: 0px 0px 5px 2px silver;
}

/* Boutons de formatage  */
p.formatbut {
	margin: 0;
	padding: 5px;
	background: var(--md-card-color-focus);
	position: relative;
	z-index: +3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.formatbut .but {
	padding: 0;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background: inherit;
	border: 1px solid transparent;
	border-radius: 4px;
}

.formatbut .but:hover {
	transition: border-color .3s;
	border-color: silver;
}

.formatbut .but:active {
	border-color: gray;
	background: var(--md-card-color-focus);
}

.formatbut span.spacer {
	margin: 0 10px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #fff;
	height: 30px;
	display: inline-block;
	vertical-align: middle;
}

.formatbut > .but::before {
	font-size: 1.4em;
	display: inline-block;
	padding: 5px;
}

#button01::before { content: "\e238"; }  /* bold */
#button02::before { content: "\e23f"; }  /* ital */
#button03::before { content: "\e249"; }  /* underline */
#button04::before { content: "\e246"; }  /* strike */
#button05::before { content: "\e236"; }  /* left align */
#button06::before { content: "\e234"; }  /* center align */
#button07::before { content: "\e234"; }  /* right align */
#button08::before { content: "\e235"; }  /* justify */
#button09::before { content: "\e250"; }  /* link */
#button10::before { content: "\e244"; }  /* quote */
#button11::before { content: "\e3c4"; }  /* image */
#button12::before { content: "\e86f"; }  /* code */
#button13::before { content: "\e23c"; }  /* color edit */
#button14::before { content: "\e245"; }  /* font size edit */
#button15::before { content: "\e24a"; }  /* unicode char insert */
#button16::before { content: "\e241"; }  /* ul list */
#button17::before { content: "\e242"; }  /* ol list */
#button18::before { content: "\e8ce"; }  /* autocorrect */
#button19::before { content: "\e5d0"; }  /* fullscreen */
#button20::before { content: ""; }  /* word counter */

#button19 {  }

#button20 {
	margin-left: auto;
	border: none;
	line-height: 2em; /* why? */
}

.but-dropdown {
	position: relative;
}

.but-dropdown .list {
	display:none;
	padding: 3px;
	background-color: inherit;
	width: 140px;
	position: absolute;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, .3);
}

.but-dropdown:hover .list {
	display: block;
}

.but-dropdown .list button:hover {
	background-color: var(--md-card-color-hover);
}

/* list colors */
.but-dropdown .list-color {
	font-size: 0;
}

.but-dropdown .list-color button {
	display: inline-block;
	background: white;
	margin: 3px;
	width: 22px;
	height: 22px;
	border: 1px solid silver;
	border-radius: 50%;
}

.but-dropdown .list-color button:hover {
	border-color: gray;
}

/* list sizes */
.but-dropdown .list-size {
	width: 180px;
	padding-left: 0;
	padding-right: 0;
}

.but-dropdown .list-size button {
	padding: 10px;
	text-align: left;
	background: inherit;
	width: 100%;
	border: 0px solid transparent;
}

/* list caractères unicodes */
.but-dropdown .list-spechr {
	text-align: left;
	width: 364px;
	padding: 3px 3px 1px;
}

.but-dropdown .list-spechr button {
	background: inherit;
	margin: 0 2px 2px 0;
	width: 26px;
	padding: 0;
	height: 26px;
	border: 1px solid #ddd;
	border-radius: 2px;
	text-align: center;
}

#form-ecrire .main-form #contenu {
	box-shadow: none;
}

/* fullscreen textarea */
#form-ecrire.fullscreen_text #content_format {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	height: 100%;
}

#form-ecrire.fullscreen_text #content_format .formatbut {
	text-align: center;
	opacity: .4;
}

#form-ecrire.fullscreen_text #content_format #button19::before {
	content: "\e5d1";
}

#form-ecrire.fullscreen_text #content_format .formatbut:hover {
	opacity: 1;
}

#form-ecrire.fullscreen_text #content_format #contenu {
	font-size: 1.3em;
	padding: 80px 40px 40px;
	height: 100%;
}

/* tags
-------------------------------------------- */
#form-ecrire #wrap {
	padding: 0;
	margin: 0;
}

#tag_bloc {
	display: flex;
	border-bottom: 1px solid silver;
	align-items: center;
	position: relative;
	z-index: +1
}

#tag_bloc:focus-within {
	background: var(--md-card-color-focus);
	box-shadow: 0px 0px 5px 2px silver;
}

#selected {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#selected > li {
	display:inline-block;
	padding: 5px 10px;
	color: #333;
	background: #eee;
	border: 1px solid silver;
	border-radius: 20px;
	margin: 5px;
}

#selected li:first-of-type {
	margin-left: 15px;
}

#selected > li > a {
	color: inherit;
	margin-left: 6px;
	text-decoration: none;
	padding: 3px;
}

#selected > li:hover > a {
	color: crimson;
}

#form-ecrire #type_tags {
	flex: 1 1 100px;
	justify-content: flex-start;
	border: none;
	box-shadow: none;
	background: transparent;
	border-bottom-color: transparent;
}

/* boutons d’options et date */
#form-ecrire #date-and-opts {
	flex: 0 0 300px;
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	text-align: right;
}

#date-and-opts > div:last-of-type {
	flex: 1;
}

#datetime input {
}

#date-and-opts > div > span {
	display: block;
	margin: 0 0 30px;
}

#formstatut > select {
	margin-right: 0;
}

#date-and-opts > div > span::before {
	font-size: 1.4em;
	margin-right: 15px;
}

#formdate::before {
	content: "\e935";
	color: rgba(252, 101, 101, 1);
}

#formheure::before {
	content: "\e8b5";
	color: rgba(255, 165, 0, 1);
}

#formstatut::before {
	content: "\e8f4";
	color: rgba(55, 110, 250, 1);
}

#formallowcomment::before {
	content: "\e253";
	color: rgba(101, 234, 143, 1);
}

#form-ecrire .submit-bttns {
	padding: 0;
	display: flex;
	justify-content: space-between;
}

#form-ecrire .button-delete {
	min-width: 100px;
	float: none;
	background-color: rgba(244, 67, 54, .1);
}

#form-ecrire:invalid .button-submit {
	color: #aaa;
	background: #ddd;	
	box-shadow: none;
}

/* COMMENTAIRES
-------------------------------------------------------------------------------- */


.commentbloc {
	margin: 20px auto;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: flex;
}

.commentbloc:target {
	padding-top: 84px;
	margin-top: -84px;
}

.commentbloc .comm-side-icon {
	flex: 0 0 160px;
	text-align: center;
}

.commentbloc:not(:last-of-type) .comm-side-icon::after {
	content: "";
	background-color: currentColor;
	opacity: .1;
	display: block;
	width: 6px;
	height: 20%;
	height: calc(100% - 120px);
	position: relative;
	margin: 0 auto;
	top: 10px;
}

.commentbloc .comm-side-icon img {
	margin: 10px auto;
	border-radius: 50%;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
	width: 48px;
}

.commentbloc .comm-main-frame {
	position: relative;
	padding: 0;
	flex: 1;
	min-width: 0;
	border-radius: 3px;
}

.comm-main-frame::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity 0.3s ease-in-out 0s;
	z-index: -1;
	border-radius: inherit;
}

.commentbloc:hover .comm-main-frame::after {
  opacity: 1;
}

.commentbloc .comm-header,
.commentbloc .comm-content,
.commentbloc .comm-comment {
	padding: 15px;
}

.commentbloc .comm-header {
	display: flex;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	align-items: center;
	border-bottom: 1px solid #eee;
}

.commentbloc .comm-header > .comm-title {
	flex: 1 1 auto;
}

.commentbloc .webpage a,
.commentbloc .email a,
.commentbloc .reply {
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	width: 20px;
	height: 20px;
	overflow: hidden;
	opacity: .3;
}

.commentbloc .webpage a::before,
.commentbloc .email a::before,
.commentbloc .reply::before {
	font-size: 20px;
}

.commentbloc .reply::before {     content: "\e15e"; }
.commentbloc .email a::before {   content: "\e554"; }
.commentbloc .webpage a::before { content: "\e80b"; }

.commentbloc:hover .webpage a,
.commentbloc:hover .email a,
.commentbloc:hover .reply {
	opacity: .6;
}

.commentbloc .author {
	font-weight: bold;
}

.commentbloc .author a,
.commentbloc .author a:hover,
.commentbloc:hover .author a {
	color: inherit;
	text-decoration: none;
	word-break: break-word;
}

.commentbloc .comm-header .link-article {
	flex: 1 1 auto;
	text-align: right;
	color: gray;
	font-style: italic;
}

.commentbloc .comm-side-icon .date {
	color: gray;
	display: block;
	font-size: .8em;
}

.commentbloc .comm-side-icon .date span {
	display: block;
}

.commentbloc a {
	color: inherit;
	transition: color 0.3s ease-in-out 0s;
}

/* com options button */
.item-menu-options {
	z-index: 4;
	padding: 10px;
	margin-left: 10px;
	position: relative;
	z-index: 20;
}

.item-menu-options::before {
	content: "\e5d4";
	font-size: 1.7em;
	cursor: pointer;
}

.item-menu-options > ul {
	right: 9999px;
	position: absolute;
	top: -10px;
	background: var(--md-card-color);
	margin: 0;
	padding: 4px 0;
	list-style: none;
	border-radius: 3px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: top .2s .3s ease-in, opacity .2s .3s ease-in, right ease-out 0s .5s;
}

.item-menu-options:hover ul {
	right: 5px;
	opacity: 1;
	top: 5px;
	transition: top .2s ease-in .05s, opacity .2s ease-in .05s, right 0s ease-out .05s;
}

.item-menu-options > ul > li {
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
}

.item-menu-options > ul > li:hover {
	background: #f5f5f5;
}

.item-menu-options > ul > li > button,
.item-menu-options > ul > li > a {
	color: inherit;
	text-decoration: none;
	padding: 10px 50px 10px 40px;
	display: block;
	border: 0;
	background-color: transparent;
	font-weight: inherit;
	text-align: left;
}

.commentbloc .comm-content p:first-of-type { margin-top: 0; }
.commentbloc .comm-content p:last-of-type { margin-bottom: 0; }

/* desactivated comments */
.privatebloc .comm-main-frame {
	filter: brightness(.8) opacity(.8);
}
.privatebloc .comm-side-icon {
	filter: saturate(0) contrast(0.6) opacity(.6);
}

.privatebloc h3, .privatebloc h3 a {
	font-style: italic;
}

/* Commentbloc on Hover */
.commentbloc:hover .comm-content a {
	color: #45a6ff;
}

/* Comment form */
.comm-main-frame > #form-commentaire {
	margin: 15px;
}

#form-commentaire .formatbut {
	border: 1px solid silver;
	border-bottom: 0;
	margin: 0;
	padding: 5px;
	background: var(--md-card-color-focus);
	position: relative;
	z-index: +3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#form-commentaire .field {
	position: relative;
	z-index: 1
}

#form-commentaire textarea.text {
	border-left: 1px solid silver;
	border-right: 1px solid silver;
}

#form-commentaire .infos {
	margin: 15px auto 0;
	max-width: 660px;
}

#form-commentaire .infos > span {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}

#form-commentaire span > input.text {
	flex: 1;
	padding: 10px 0 10px 40px;
	margin-left: -40px;
	border-color: transparent;
	border-bottom-color: silver; 
}

#form-commentaire label {
	overflow: hidden;
	font-size: 0;
	opacity: .5;
	position: relative;
	z-index: 2;
}

#form-commentaire label::before {
	font-size: 1.4rem;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

#form-commentaire label[for^="auteur"]::before  { content: "\e7fd"; }
#form-commentaire label[for^="email"]::before   { content: "\e554"; }
#form-commentaire label[for^="webpage"]::before { content: "\e80b"; }

/* New Comment */
#post-nv-commentaire {
	margin-top: 35px;
}

#post-nv-commentaire h2 {
	margin: 0;
	font-size: 1.1em;
	text-transform: uppercase;
}

#post-nv-commentaire #form-commentaire {
	margin-top: 15px;
}

/* ajax loading animation */
.ajaxloading .comm-main-frame::before {
	content: "";
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(255, 255, 255, .5);
}

.ajaxloading .comm-main-frame::after {
	content: "";
	z-index: +1;
	height: 20px;
	width: 20px;
	border: 4px solid rgba(0, 0, 0, .1);
	border-top-color: rgba(0, 0, 0, .5);
	border-radius: 50%;
	animation: spinnerLoading 0.6s infinite linear;
	top: calc(50% - 15px);
	box-shadow: none;
	left: calc(50% - 15px);
}

/* Ajax removing comment animation (vertical) */
.deleteFadeOut {
	opacity: 1;
	animation: disapear .6s;
}

/* Ajax removing comment animation (Horizontal) */
.deleteFadeOutH {
	opacity: 1;
	animation: disapearH .6s;
}

/* FORMULAIRE IMAGE
---------------------------------------------------------------------------------- */
/* IMAGES : DnD area */
#form-image #dragndrop-area {
	background: var(--md-card-color-hover);
	border: 1px dashed gray;
	padding: 15px;
	border-radius: 6px;
}

#form-image #dragndrop-area > p {
	text-align: center;
}

/* IMAGES : DnD area : ondrag-style */
#form-image #dragndrop-area.fullpagedrag {
	background-color: rgba(84, 145, 245, .3);
	border-color: #0061FF;
}

#form-image #dragndrop-area.fullpagedrag > :nth-child(n+2) {
	visibility: hidden;
}

#form-image #dragndrop-area.fullpagedrag::before {
	content: "";
	z-index: 100;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: inherit;
	opacity: .3;
}

#form-image .fullpagedrag #dragndrop-title {
	color: inherit;
	pointer-events: none;
}

/* IMAGES : DnD area : Title bloc */
#form-image #dragndrop-title {
	font-size: 160%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 50px;
	opacity: .5;
}

#form-image .upload-info {
	font-size: .7em;
	padding-top: 1em;
}

/* IMAGES : DnD area : Manual select form */
#form-image #file-input-wrapper {
	margin: 40px auto 20px;
	display: flex;
	justify-content: center;
}
#form-image #fichier {
	order: 1;
}

#form-image #file-input-wrapper > label::before {
	content: "\e43e";
	width: 40px;
	height: 40px;
	background: var(--md-secondary-color);
	border-radius: 50%;
	color: var(--scnd-md-text-color);
	display: block;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
	text-align: center;
	font-size: 1.6em;
	line-height: 40px;
	cursor: pointer;
}

#form-image #file-input-wrapper > label:active::before {
	transform: scale(1.1);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
}

#form-image #fichier[type="file"] {
	order: 1;
	background: transparent;
	width: 0;
	padding: 0;
	border: 0;
}

#form-image #fichier[type="file"][required]:valid {
	width: auto;
	padding: 0;
	border: 0;
}

#form-image #fichier[type="url"] {
	width: 60%;
}

#form-image #fichier[type="url"] + label {
	display: none;
}

#click-change-form {
	text-transform: none;
}

/* IMAGES : transfert progression box */

#count {
	text-align: center;
	padding: 20px 0;
}
#count.spinning::before {
	content: "";
	display: inline-block;
	height: 20px;
	width: 20px;
	border: 4px solid rgba(0, 174, 239, 0.4);
	border-top-color: rgba(0, 174, 239, 1);
	border-radius: 50%;
	animation: spinnerLoading 0.6s infinite linear;
}

/* IMAGES : name, descr, album, private info-fields */
#img-others-infos p:not(.submit-bttns) {
	display: flex;
	width: 660px;
	max-width: 100%;
	margin: 15px auto;
	flex-direction: row-reverse;
}

#img-others-infos label:not([for="statut"]) {
	overflow: hidden;
	font-size: 0;
	z-index: 2;
	opacity: .5;
}

#img-others-infos label:not([for="statut"])::before {
	font-size: 1.4rem;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

#img-others-infos label[for^="nom_entree"]::before  { content: "\e892"; }
#img-others-infos label[for^="description"]::before { content: "\e560"; }
#img-others-infos label[for^="dossier"]::before     { content: "\e2c7"; }

#img-others-infos .text {
	flex: 1;
	padding: 10px 0 10px 40px;
	min-width: 0;
	margin-left: -40px;
}

#onclicshow {
	display: none;
}

/* IMAGES : on edit page : forms */
#form-image .display-media {
	text-align: center;
	margin: 20px auto 40px;
	max-width: 700px;
}

#form-image .display-media .media {
	padding: 10px;
	background: #FFF;
	box-shadow: 0px 7px 40px rgba(0, 0, 0, 0.4);
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

#interg-codes {
	margin: 30px 6%;
}

#interg-codes input.text {
	width: 100%;
	padding-left: 0;
	border-color: transparent;
	border-bottom-color: silver; 

}

#fichier-meta-info {
	border-radius: 5px;
	margin: 20px 6%;
	display: block;
	padding: 15px;
	list-style: outside none none;
	//box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
	//background: var(--md-card-color-hover);
}
#fichier-meta-info > li {
	padding: 5px;
}

#fichier-meta-info b {
	display: inline-block;
	width: 40%;
	text-align: right;
}

/* IMAGES : on drop, file boxes wth status */
#result .fileinfostatus {
	padding: 10px;
	margin: 5px auto 0;
	max-width: 600px;
	border-radius: 3px;
	display: flex;
}

#result .fileinfostatus .filelink:not([href]) {
	display: none;
}

#result .fileinfostatus .filename,
#result .fileinfostatus .filelink {
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 100 1 0;
}

#result .fileinfostatus > span,
#result .fileinfostatus > a {
	margin: 5px;
	white-space: nowrap;
}

#result .fileinfostatus .uploadstatus {
	font-weight: bold;
}

#result .success {
	background-color: #00e676;
}

#result .failure {
	background-color: #f44336;
}

#result .pending {
	background-color: var(--md-card-color-hover);
}


/* IMAGES : Liste des images : sous la forme d’un mur d’images */
#image-section,
#files-section {
	margin-top: 40px;
	padding: 0;
}


#image-wall {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
	grid-gap: 15px;
	align-items: center;
	padding: 15px 0;
}

#image-wall .image_bloc {
	position: relative;
}

#image-wall .image_bloc img {
	width: 100%;
	height: auto;
	min-height: 150px;
	max-height: 300px;
}

#image-wall .image_bloc > span {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0; right: 0; top: 0; bottom: 0;
	opacity: 0;
	transition: opacity .3s;
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: 50%;
	z-index: -1;
	background: rgba(0, 0, 0, .5);
}

#image-wall .image_bloc > span .vignetteAction {
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background: transparent;
}

#image-wall .image_bloc > span > .vignetteAction::before {
	content: "";
	font-size: 3.2em;
	background: white;
	border-radius: 50%;
	padding: 5px;
	color: black;
}

#image-wall .image_bloc > span > .vignetteAction.imgShow::before  { content: "\e8a0"; }
#image-wall .image_bloc > span > .vignetteAction.imgEdit::before  { content: "\e3c9"; }
#image-wall .image_bloc > span > .vignetteAction.imgDL::before    { content: "\e171"; }
#image-wall .image_bloc > span > .vignetteAction.imgSuppr::before { content: "\e92b"; }

#image-wall .image_bloc:hover > span {
	opacity: 1;
	z-index: 1;
}


/* Liste des fichiers : sous la forme d’un tableau */
#file-list {
	width: 100%;
	border-collapse: collapse;
}

#file-list,
#file-list tr,
#file-list td {
	border: 0;
}

#file-list thead {
	background: var(--md-card-color-focus);
}

#file-list thead th {
	padding: 5px;
	text-align: left;
}

#file-list tr {
	border-bottom: 1px solid rgba(0, 0, 0, .05);
}

#file-list td {
	padding: 10px;
}

#file-list td img {
	vertical-align: middle;
	width: 30px;
}

#file-list tr td a {
	color: inherit;
	text-decoration: none;
}

#file-list tr td:nth-of-type(1),
#file-list tr td:nth-of-type(n+5) {
	padding-left: 15px;
	width: 30px;
}

#file-list tr td:nth-of-type(2) {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	max-width: 0;
}

#file-list tr td:nth-of-type(n+3) {
	font-size: .9em;
}

#file-list tr th:nth-of-type(2),
#file-list tr th:nth-of-type(n+3),
#file-list tr td:nth-of-type(2),
#file-list tr td:nth-of-type(n+3) {
	white-space: nowrap;
}

#file-list tr td:nth-of-type(n+4) a {
	height: 30px;
	width: 30px;
	overflow: hidden;
	display: block;
	box-sizing: border-box;
	padding-left: 30px;
}

#file-list tr td:nth-of-type(n+4) a::before {
	font-size: 1.4em;
	display: block;
	line-height: 30px;
	margin-left: -30px;
	text-align: center;
}

#file-list tr td:nth-of-type(5) a::before { content: '\e884'; } /* DL */
#file-list tr td:nth-of-type(6) a::before { content: '\e92b'; } /* RM */

#file-list tr td:last-of-type {
	padding-right: 15px;
}

#file-list tbody tr:hover {
	background-color: var(--md-card-color-hover);
	transition: background-color .5s;
}

/* IMAGES : buttons, list of albums/file-type */

.list-buttons {
	background: var(--md-card-color-focus);
}

.list-buttons button:not([id]) {
	background: transparent;
	border: 0;
	margin: 0 5px;
	padding: 15px 1px;
	cursor: pointer;
	border-radius: 0;
}

.list-buttons button[data-folder]::after {
	content: '('attr(data-count)')';
	font-family: inherit;
	padding-left: 5px;
}
.list-buttons button:not([id]):hover,
.list-buttons button:not([id]).current {
	transition: box-shadow 0.1s ease-in;
	box-shadow: 0 3px 0 #2196f3 inset;
}

.list-buttons button:not([id]).current {
	font-weight: bold;
}

#load_all {
	float: right;
	color: #2196f3;
	margin-top: 6px;
}

#load_all[data-diff="0"] {
	display: none;
}
/* MES LIENS
--------------------------------------------------------------------------- */


#list-link {
	column-width: 700px;
	column-gap: 20px;
}

/* LINKS : Post new link
------------------------------------------------------*/
#post-new-lien,
#post-new-note {
	position: relative;
	z-index: 1;
	max-width: 550px;
	width: 100%;
	box-sizing: border-box;
	padding: 5px 15px;
	margin: 50px auto 70px;
}

#post-new-lien::after,
#post-new-note::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 0 17px 0 rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.5s ease-in-out 0s;
	z-index: -1;
	border-radius: inherit;
}

#post-new-lien:hover::after,
#post-new-lien.focusedField::after,
#post-new-note:hover::after,
#post-new-note.focusedField::after {
	opacity: 1;
}

#post-new-lien .contain-input {
	display: flex;
	align-items: center;
}

#post-new-lien label[for="url"] {
	height: 24px;
	overflow: hidden;
	flex: 0 0 24px;
}

#post-new-lien label[for="url"]::before {
	content: "\e894";
	font-size: 1.3em;
	line-height: 24px;
	opacity: .5;
}

#post-new-lien #url {
	width: 50px;
	background: inherit;
	box-shadow: none;
	border: none;
	flex: 1 1 auto;
	padding: 15px;
}

#post-new-lien .submit {
	color: silver;
	flex: 0;
	margin-left: 5px;
}

#post-new-lien #url:not(:placeholder-shown)+.submit {
	color: inherit;
}

/* Form new link (title, descr, tags…)
------------------------------------------------------------*/
#post-lien {
	margin: auto;
	width: 800px;
	max-width: 100%;
	padding: 0 0 15px;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
	background: var(--md-card-color);
	display: flex;
	flex-direction: column;
	resize: both;
	overflow: hidden;
	min-height: 200px;
	min-width: 200px;
	border-radius: 8px;
}

#post-lien input.readonly-like { /* form nouveau lien (#2), le lien de l’URL */
	color: #bbb;
	font-style: italic;
}

#post-lien .text {
	max-width: 100%;
	box-shadow: none;
	border-radius: 0;
	border-color: transparent;
	border-bottom-color: silver;
	padding: 15px;
}

#post-lien .text:focus {
	border-radius: 0;
}

#post-lien #url:focus,
#post-lien #title:focus {
	background: var(--md-card-color-focus);
	box-shadow: 0px 0px 5px 2px silver;
	position: relative;
	z-index: +1;
}


#post-lien fieldset {
	min-height: 130px;
	height: 100%;
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
}

#post-lien fieldset:focus-within {
	background: var(--md-card-color-focus);
	box-shadow: 0px 0px 5px 2px silver;
}

#post-lien textarea {
	resize: none;
	flex: 1;
}

#post-lien > p {
	padding-left: 15px;
}

#post-lien .submit-bttns {
	max-width: none;
}

/* LINKS : list of link-blocs
--------------------------------------------------------------*/

.linkbloc {
	position: relative;
	z-index: 1;
	margin: 20px auto;
	padding: 0;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.linkbloc::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity 0.3s ease-in-out 0s;
	z-index: -1;
	border-radius: inherit;
}

.linkbloc:hover::after {
  opacity: 1;
}

.linkbloc:hover {
	z-index: 10;
}

.linkbloc:first-of-type {
	margin-top: 0;

}
.linkbloc:first-of-type:last-of-type {
	display: inline-block; /* firefox bugfix for avoid collumn-break when single element */
}

.linkbloc.privatebloc {
    border-left: 10px #555 solid;
    filter: brightness(.8) opacity(.8);
}

.linkbloc .link-header,
.linkbloc .link-content,
.linkbloc .link-footer {
	padding: 15px;
}

.linkbloc .link-header {
	display: flex;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	/*border-bottom: 1px solid #eee;*/
}

.linkbloc .date {
	flex: 1 1 auto;
	text-align: right;
	color: gray;
	font-style: italic;
}

/* LINKS : link header
--------------------------------*/
.linkbloc .titre-lien {
	text-decoration: none;
	font-weight: bold;
	color: inherit;
	flex: 0 1 auto;
	display: block;
}

.linkbloc .titre-lien:hover {
	color: #888;
}

.linkbloc .date,
.linkbloc .hard-link {
	font-size: .9em;
	color: #aaa;
}

.linkbloc .hard-link {
	word-break: break-all;
}
/* LINKS : link content
--------------------------------*/
.linkbloc .link-content p {
	opacity: .9;
}
/* LINKS : link footer
--------------------------------*/
.linkbloc .link-footer {
	/*background-color: var(--md-card-color-hover);*/
	border-top: #eee;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

.linkbloc .link-tags {
	margin: 0;
	padding: 0;
}

.linkbloc .link-tags li {
	display: inline-block;
	padding: 3px 0;
}

.linkbloc .link-tags a {
	display: inline-block;
	text-decoration: none;
	padding: 5px 10px;
	background-color: white;
	border: 1px solid silver;
	border-radius: 20px;
	color: inherit;
}

.linkbloc .link-tags a:hover {
	background: rgba(0, 0, 0, .1);
}

#post-lien #liste-tags {
	min-width: 400px;
	width: 50%;
	margin: 0 0 2px 25%;
	padding-left: 21px;
	line-height: 19px;
}

#post-lien #type_tags {
	margin-bottom: 0;
	flex: 1 1 100px;
	border: none;
	background: transparent;
}

/* RSS Reader CSS
------------------------------------------------------------ */

#body.feeds #page,
#body.feeds #axe {
	padding: 0;
}

#body.feeds #fab {
	left: 198px;
	transition: transform .2s cubic-bezier(.2,-.5,.5,.2), left .3s ease;
}

/* the left sidebar, with the list of feeds */
#feed-list {
	margin: 0 0 20px 0;
	padding: 0;
	list-style-type: none;
	overflow-y: hidden;
	overflow-x: hidden;
	position: fixed;
	width: 320px;
	height: calc(100% - 64px);
	border-radius: 0;
	transform: translateX(0px);
	transition: transform .3s ease;
	box-shadow: none;
	background-color: var(--md-card-color);
}

#feed-list:hover {
	overflow-y: scroll;
}

#feed-list.hidden-list {
	transform: translateX(-360px);	
}

#feed-list.hidden-list + #rss-list {
	margin-left: 30px;
}

#feed-list.hidden-list ~ #fab {
	left: -82px;
}

#feed-list li {
	position: relative;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 185px;
	padding: 15px 50px 15px 60px;
	margin: 5px 0;
	background-repeat: no-repeat;
	background-color: inherit;
	background-position: 20px center;
	cursor: pointer;
	background-size: 20px 20px;
	border-radius: 0 25px 25px 0;
	transition: background-color .3s;

}

#feed-list li:not(.special):hover {
	background-size: 0 0;
	background-color: var(--md-primary-color-variant);
}

#feed-list li.feed-site > button {
	display: inline-block;
	background-color: transparent;
	border: 0;
	padding: 0;
	position: absolute;
	left: 12px;
	top: 10px;
	opacity: 0;
}

#feed-list li.feed-site > button::before {
	content: "\e8b8";
	font-size: 1.5em;
	display: inline-block;
	height: 25px;
	width: 30px;
	border-radius: 50%;
	padding: 3px;
}

#feed-list li.feed-site:hover > button {
	transition: .2s opacity;
	opacity: 1;
}

#feed-list li.feed-folder > ul > li.feed-site > button {
	left: 22px;
}

#feed-list > li.special {
	padding: 0 110px 0 0;
}


#feed-list > li.special > ul {
	padding: 0;
	width: 100%;
}

#feed-list > li.special > ul > li {
}

#feed-list > li.special > ul > li::before {
	content: "\e901";
	font-size: 1.6em;
	font-weight: normal;
	position: absolute;
	top: 12px;
	left: 20px;
	opacity: .4;
}

#feed-list > li.special .all-feeds::before   { content: "\e8ef"; }
#feed-list > li.special .today-feeds::before { content: "\e8df"; }
#feed-list > li.special .fav-feeds::before   { content: "\e87d"; }

#feed-list li[class^="feed-"]:not([data-nbrun="0"])::before {
	content: attr(data-nbrun);
	font-family: inherit;
	position: absolute;
	right: 20px;
	padding: 2px;
	opacity: .7;
}

#feed-list li[class^="feed-"]:not([data-nbrun="0"]).active-site::before {
	color: inherit;
}

#feed-list > li.feed-folder > ul {
	font-weight: normal;
	padding-left: 0;
	margin-left: -65px;
	margin-right: -45px;
	height: 0;
	overflow: hidden;
}

#feed-list > li.feed-folder > ul > li {
	padding-left: 70px;
	padding-right: 40px;
	margin-left: 5px;
	background-position: 30px center;
}

#feed-list > li.feed-folder.open {
	padding-bottom: 0;
}

#feed-list > li.feed-folder.open > ul {
	height: auto;
	overflow: visible;
	margin-top: 20px;
}

#feed-list li.feed-folder a.unfold {
	margin-left: 11px;
	overflow: visible;
	transition: transform ease .2s;
	color: inherit;
	position: absolute;
	left: 0;
	top: 7px;
}

#feed-list li.feed-folder .unfold::before {
	content: "\e313";
	font-size: 2em;
	display: inline-block;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	padding: 3px;
	opacity: .4;
}

#feed-list li.feed-folder.active-site .unfold::before,
#feed-list > li.special > ul > li.active-site::before {
	color: inherit;
}

#feed-list li.feed-folder.open .unfold {
	transform: rotate(90deg);
}

#feed-list li.feed-error {
	color: red;
}

#feed-list li.active-site,
#feed-list > li.feed-folder.active-site {
	background-color: var(--md-primary-color-variant);
	color: var(--md-primary-color);
}

#feed-list li[data-nbrun="0"] {
	font-weight: normal;
}

#feed-list li[data-nbrun="0"] .counter {
	visibility: hidden;
}

/* block with list of elements to read */
#rss-list {
	margin-left: 360px;
	margin-right: 30px;
	transition: margin-left .3s ease;

}

/* button bar above posts */
#post-list-title {
	padding: 30px 0px 30px 10px;
	display: flex;
	align-items: center;
}

#post-list-title > .posts-actions-buttons {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

#post-list-title > .posts-actions-buttons > li {
	display: inline;
}

#post-list-title > .posts-actions-buttons button {
	font-size: 0;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	padding: 6px;
	opacity: .6;
}

#post-list-title > .posts-actions-buttons button::before {
	font-size: 1.5rem;
}

#post-list-title > .posts-actions-buttons button:hover {
	background-color: var(--md-card-color-hover);
}

#post-list-title > .posts-actions-buttons > li:nth-of-type(1) > button::before        { content: "\e8f4"; }
#post-list-title > .posts-actions-buttons > li:nth-of-type(2) > button::before        { content: "\e5d7"; }
#post-list-title > .posts-actions-buttons > li:nth-of-type(2) > button.unfold::before { content: "\e5d6"; }
#post-list-title > .posts-actions-buttons > li:nth-of-type(3) > button::before { content: "\e627"; }
#post-list-title > .posts-actions-buttons > li:nth-of-type(4) > button::before { content: "\e923"; }

#post-list-title > p {
	margin: 0;
}

#post-list-title > .item-menu-options button:focus {
	background-color: rgba(0, 0, 0, .1);
}

#post-list-title > .item-menu-options li > button {
	overflow: hidden;
	padding: 10px 70px 10px 40px;
}

/* Liste des posts à lire. */
#post-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#post-list > li {
	padding: 10px;
	border-bottom: 1px solid #dadce0;
	/*margin: 0 0 20px;*/
	background: var(--md-card-color);
}

#post-list > li.read:not(.open-post) {
	color: gray;
	opacity: 0.8;
}

#post-list > li img,
#post-list > li table {
	max-width: 100%;
	height: auto;
}

#post-list > li .youtube-iframe-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin: 10px 0 50px;
}

#post-list > li .youtube-iframe-container > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* rss entry title */
#post-list > li > .post-head {
	padding-left: 42px;
}

#post-list > li > .post-head a {
	outline: none;
}

/* bouton fav */
#post-list > li > .post-head > .lien-fav {
	width: 32px;
	margin-right: 10px;
	text-decoration: none;
	color: inherit;
	opacity: .4;
	border-radius: 50%;
	display: inline-block;
	line-height: 32px;
	text-align: center;
	margin-left: -42px;
}

#post-list > li > .post-head > .lien-fav:hover {
	background: rgba(0,0,0, .1);
	opacity: .6;
}

#post-list > li > .post-head > .lien-fav::before {
	content: "\e87e";
	font-size: 1.3em;
}

#post-list > li[data-is-fav="1"] > .post-head > .lien-fav::before {
	content: "\e87d";
	color: var(--md-primary-color);
}

/* le dossier */
#post-list > li > .post-head > .folder {
	margin: 0 10px 0 0;
	padding: 1px 10px;
	background-color: var(--md-card-color-hover);
	color: var(--md-primary-color);
	border-radius: 10px;
	font-style: italic;
}

#post-list > li:hover > .post-head > .folder {
	background-color: var(--md-card-color-focus);
}

#post-list > li > .post-head > .folder:empty {
	display: none;
}

#post-list > li.open-post > .post-head > .folder {
	color: var(--md-primary-color-variant);
	background-color: var(--md-primary-color);
}

/* le titre */
#post-list > li > .post-head > .post-title {
	font-weight: bold;
	text-decoration: none;
	color: inherit;
	padding: 15px 0;
}

#post-list > li > .post-head > .post-title:hover {
	text-decoration: underline;
}

/* infos meta du post (site, date…) */
#post-list > li > .post-head > .meta {
	opacity: .5;
	font-size: .9em;
}

/* le nom du site */
#post-list > li > .post-head > .meta > .site {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 50%;
}

/* date */
#post-list > li > .post-head > .meta > .date {
	overflow: hidden;
	text-overflow: ellipsis;
}
#post-list > li > .post-head > .meta > .date::before {
	content: "\e3fa";
	font-size: .25em;
	margin: 0 7px;
}

#post-list > li > .post-head > .meta > .share {
	opacity: 0;
	transition: opacity 0.2s ease 0s;
}

#post-list > li:hover > .post-head > .meta > .share {
	opacity: 1;
}

#post-list > li > .post-head > .meta > .share > a {
	margin-left: 5px;
	text-decoration: none;
	color: inherit;
	border-radius: 50%;
	width: 32px;
	display: inline-block;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1.3em;
}

#post-list > li > .post-head > .meta > .share > .lien-share::before { content: "\e80d"; }
#post-list > li > .post-head > .meta > .share > .lien-open::before  { content: "\E89E"; }
#post-list > li > .post-head > .meta > .share > .lien-mail::before  { content: "\E0E1"; }

#post-list > li > .rss-item-content {
	height: 0;
	overflow: hidden;
	opacity: 0;
}

#post-list > li > .rss-item-content * {
	max-width: 100%;
}

/* opened post */
#post-list > li.open-post {
	cursor: auto;
}

#post-list > li.open-post .rss-item-content {
	margin-left: 10px;
	transition: opacity .7s cubic-bezier(0.175, 0.585, 0.32, 1);
	opacity: 1;
	height: auto;
	margin-bottom: 15px;
}

#post-list > li > hr.clearboth {
	clear: both;
	margin: 0;
	height: 0;
	padding: 0;
	border: none;
}

#rss-list > .keyshortcut {
	color: gray;
	margin-top: 20px;
	text-align: center;
}

/* Edit feed popup */
#popup.popup-edit-feed .feed-content > div {
	position: relative;
	padding-left: 55px;
	margin: 5px 0;
}


#popup.popup-edit-feed .feed-content > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#popup.popup-edit-feed .feed-content > div::before {
	font-size: 1.4em;
	position: absolute;
	left: 20px;
	top: 19px;
	opacity: .5;
}

#popup.popup-edit-feed .feed-content > div label {
	margin: 0 0 0px;
	padding: 5px;
	position: relative;
	display: flex;
	/*align-items: center;*/
	overflow: hidden;
	flex: 1;
	flex-basis: 40%;
}

#popup.popup-edit-feed .feed-content > div .text {
	min-width: 0;
	padding: 15px 30px 5px 5px;
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: transparent;
}

#popup.popup-edit-feed .feed-content > div label > span {
	position: absolute;
	left: 5px;
	padding: 15px 5px 5px 5px;
	transition: all 200ms;
	opacity: 0.5;
	z-index: 0;
	font-weight: 300;
}

#popup.popup-edit-feed .feed-content label > .text:not(:placeholder-shown) + span,
#popup.popup-edit-feed .feed-content label > .text:focus + span {
	/*transform: scale(.75) translateY(-14px);*/
	transform: scale(.75) translateY(0px);
	transform-origin: top left;
	padding-top: 0;
	padding-bottom: 0;
}

#popup.popup-edit-feed .feed-content label > .text:focus + span,
#popup.popup-edit-feed .feed-content label > .text:invalid + span {
	opacity: 1;
}

#popup.popup-edit-feed .feed-content label > .text:invalid + span {
	color: red;
}

#popup.popup-edit-feed .feed-content-url::before    { content: "\E80B"; }
#popup.popup-edit-feed .feed-content-title::before  { content: "\E892"; }
#popup.popup-edit-feed .feed-content-folder::before { content: "\E2C7"; }


#popup.popup-edit-feed .feed-content > .feed-content-lastpost {
	font-style: italic;
	margin-top: 25px;
}

#popup.popup-edit-feed .feed-content > .feed-content-lastpost > span {
	padding-left: 5px;
}

#popup.popup-edit-feed .feed-content-url input {
	background-size: 20px 20px;
	background-position: calc(100% - 5px) 14px;
	background-repeat: no-repeat;
}


#popup.popup-edit-feed .feed-content .feed-content-error {
	background: rgba(255, 0, 0, .6);
	padding: 15px;
	margin-left: 60px;
	margin-right: 5px;
	margin-bottom: 15px;
	border-radius: 4px;
	color: white;
}

#popup.popup-edit-feed .feed-content .feed-content-error:empty {
	display: none;
}

/* notif node */
#progress-bar {
	display: block;
}

#progress-bar #tasks_comp2 {
	background: #fff;
	border: 1px solid black;
	border-radius: 4px;
	height: 8px;
	vertical-align: middle;
}/* NOTES
------------------------------------------------------------ */

.notes-menu-buttons button::before {
	font-size: 1.6em;
}

#list-notes {
}

#list-notes > #are-pinned:not(:empty) {
	margin-bottom: 20px;
}

#post-new-note {
	cursor: pointer;
}

#post-new-note .contain::before {
	content: "\e3de";
	font-size: 1.3em;
	margin-right: 10px;
	line-height: inherit;
}

#post-new-note .contain {
	line-height: 3em;
	opacity: .7;
}

.notebloc {
	max-height: 303px;
	width: 240px;
	vertical-align: text-top;
	display: inline-flex; 
	flex-direction: column;
	transition: box-shadow .2s ease-in;
	margin: 10px;
	padding: 0 0 15px;
	border-radius: 5px;
	position: relative;
}

.notebloc[data-isarchived="0"] {
	filter: sepia(1);
}

.notebloc[data-ispinned="1"]::after {
	content: "\e226";
	font-size: 1.8em;
	position: absolute;
	right: -9px;
	top: -9px;
	/*transform: rotate(35deg);*/
	color: #222;
}

.notebloc:hover {
	box-shadow: 0 2px 15px rgba(0,0,0,0.30);
}

.notebloc .title,
#popup.popup-note .popup-title {
	display: flex;
	position: relative;
}

.notebloc .title > h2,
#popup.popup-note .popup-title > h2 {
	padding: 15px;
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
	flex: 1;
	outline: none;
}

.notebloc > .content {
	white-space: pre-line;
	overflow-y: hidden;
}

.notebloc > .content,
#popup.popup-note .content {
	margin: 0;
	padding: 15px;
	font-size: 1em;
	flex: 1;
}

/* popup */
#popup.popup-note {
	transition: .3s background-color ease;
}

#popup.popup-note .popup-title {
	padding: 0;
	background-color: transparent;
}

#popup.popup-note > .popup-title > .pinnedIcon::before { content: "\e226"; }
#popup.popup-note[data-ispinned="0"] > .popup-title > .pinnedIcon::before { color: rgba(0, 0, 0, .4); }
#popup.popup-note[data-ispinned="1"] > .popup-title > .pinnedIcon::before { color: rgba(0, 0, 0, 1); }

#popup.popup-note .popup-title::after { content: none; }
#popup.popup-note .popup-content::before { content: none; }

#popup.popup-note > .popup-content {
	background: transparent;
	border: 0;
	outline: none;
	resize: none;
	padding-bottom: 0;
	padding-top: 0;
}

#popup.popup-note > .popup-footer {
	padding: 0 5px 5px;
	flex-wrap: wrap;
	position: relative;
}

#popup.popup-note > .popup-footer > button,
#popup.popup-note > .popup-title > button {
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
	padding: 0;
	color: rgba(0, 0, 0, .6);
	transition: opacity .2s ease-in;
}

#popup.popup-note > .popup-footer > button:hover,
#popup.popup-note > .popup-title > button:hover {
	background-color: rgba(0, 0, 0, .1);
}

#popup.popup-note > .popup-footer > button::before,
#popup.popup-note > .popup-title > button::before {
	font-size: 1.6em;
}

#popup.popup-note > .popup-footer > .colorIcon::before { content: "\e40a"; }
#popup.popup-note > .popup-footer > .supprIcon::before { content: "\e92b"; }
#popup.popup-note > .popup-footer > .archiveIcon::before { content: "\e149"; }

#popup.popup-note[data-isarchived="1"] > .popup-footer > .archiveIcon::before { color: rgba(0, 0, 0, .4); }
#popup.popup-note[data-isarchived="0"] > .popup-footer > .archiveIcon::before { color: rgba(0, 0, 0, 1);}


#popup.popup-note > .popup-footer > .colors {
	display: none;
	position: absolute;
	list-style: none;
	height: 87px;
	width: 87px;
	left: 4px;
	bottom: 4px;
	margin: 0;
	padding: 2px;
	background-color: white;
	border-radius: 2px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
	font-size: 0;
}

#popup.popup-note > .popup-footer .colorIcon:focus + .colors,
#popup.popup-note > .popup-footer .colors:hover {
	display: block;
}

#popup.popup-note > .popup-footer > .colors > li {
	box-sizing: border-box;
	border: 1px silver solid;
	cursor: pointer;
	width: 25px;
	height: 25px;
	display: inline-block;
	border-radius: 50%;
	margin: 2px;
}

#popup.popup-note > .popup-footer > .colors > li:hover {
	opacity: .95;
	border-color: gray;
}

#popup.popup-note > .popup-footer li > button:focus,
#popup.popup-note > .popup-footer li > button::-moz-focus-inner {
	background-color: rgba(0, 0, 0, .05);
	transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	outline: none;
	border-color: transparent;
}

#popup.popup-note > .popup-footer > .date {
	padding: 0 15px;
	text-align: right;
	font-style: italic;
	font-size: .9em;
	color: #666;
	width: 100%;
}

#popup.popup-note .submit-bttns {
	padding: 0;
	margin: 5px 10px;
	width: auto;
	flex: 1;
	max-width: none;
}


#popup.popup-note .popup-footer .button-cancel {
	background: transparent;
	color: #222;
}

/* Agenda CSS
------------------------------------------------------------ */
#body.agenda {
	background-color: white;
}


/* the calendar side bar management */
#body.agenda #page,
#body.agenda #axe {
	padding: 0;
}

#body.agenda #header {
}

#sub-menu #cal-size {
	margin: 0 5px;
}

/* the left sidebar, with the list of feeds */
#side-nav {
	margin: 0;
	padding: 30px 5px;
	position: fixed;
	width: 280px;
	height: calc(100% - 64px);
	border-radius: 0;
	transform: translateX(0px);
	transition: transform .3s ease;
	box-sizing: border-box;
	box-shadow: none;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

#side-nav .ical-link {
	margin-top: auto;
	text-align: center;
}

#side-nav .ical-link > button {
	background: inherit;
	border: none;
}

#side-nav.hidden-sidenav {
	transform: translateX(-280px);	
}

#side-nav.hidden-sidenav + #calendar-wrapper {
	margin-left: 0px;
}

#side-nav.hidden-sidenav ~ #fab {
	left: -82px;
}


/* the mini-calendar */
#mini-calendar-table {
	text-align: center;
	border-collapse: separate;
	border-spacing: 0px;
	empty-cells: hide;
	table-layout: fixed;
	font-weight: 300;
	margin-bottom: 20px;
}

#mini-calendar-table button {
	display: inline-block;
	border: 0;
	border-radius: 50%;
	background: transparent;
	padding: 0;
	margin: 0;
}

#mini-calendar-table > thead {
	font-weight: bold;
}

#mini-calendar-table > thead td button:focus,
#mini-calendar-table > thead td button:hover {
	background: rgba(0, 0, 0, .1);
}

#mini-calendar-table > thead td button:active {
	background: rgba(0, 0, 0, .3);
}

#calendar-table-nav #next-cal::before {
	content: "\e315";
}

#mini-calendar-table #mini-next-month::before { content: "\e315"; }
#mini-calendar-table #mini-prev-month::before { content: "\e314"; }

#mini-calendar-table .dayAbbr th {
	opacity: .6;
	padding: 10px;
}

#mini-calendar-table > tbody {
	font-size: .8em;
}


#mini-calendar-table > tbody > tr {
	position:relative;
}

#mini-calendar-table > tbody > tr::after { /* week-number */
	content: attr(data-week);
	position: absolute;
	/*top: 0;*/
	left: 0;
	display: inline;
	color: gray;
	font-size: .8em;
	font-family: inherit!important;
	font-weight: normal;
	background: linear-gradient( 135deg, #bbb, transparent 40% );
	border-top-left-radius: 5px;
	padding: 5px;
}

#mini-calendar-table > tbody td {
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid transparent;
	width: 38px;
	height: 38px;
	padding: 0;
}

#mini-calendar-table > tbody td:hover {
	background-color: var(--md-card-color-focus);
}

#mini-calendar-table > tbody td.hasEvent {
	background-image: radial-gradient(50% 50%, var(--md-secondary-color), transparent 55%);
}

#mini-calendar-table > tbody td.isToday {
	font-weight: bold;
	background-image: radial-gradient(50% 50%, var(--md-primary-color), transparent 85%);
}

/* the calendar wrapper
--------------------------------------------- */
#calendar-wrapper {
	margin-left: 280px;
	margin-right: 0;
	transition: margin-left .3s ease;
}

#calendar-wrapper {
	padding: 20px;
	box-sizing: border-box;
	display: block;
}

#calendar-table-nav {
	padding: 0px 0px 15px 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 55px;
	box-sizing: border-box;
}

#calendar-table-nav > button.cal-mode {
	background: var(--md-card-color);
	border-radius: 5px;
	padding: 6px 15px;
	margin-right: 5px;
	border: 1px solid silver;
}

/* the table --------------------------- */


#calendar-wrapper[data-display-mode="table-day-mode"]      button.cal-mode#show-full-day,
#calendar-wrapper[data-display-mode="table-week-mode"]     button.cal-mode#show-full-week,
#calendar-wrapper[data-display-mode="table-month-mode"]    button.cal-mode#show-full-month,
#calendar-wrapper[data-display-mode="table-year-mode"]     button.cal-mode#show-full-year,
#calendar-wrapper[data-display-mode="table-tasklist-mode"] button.cal-mode#show-full-tasklist {
	background: var(--md-card-color-focus);
}

#calendar-table {
	text-align: center;
	table-layout: fixed;
	border-collapse: collapse;
	height: calc(100vh - 64px - 44px - 36px - 15px - 1px );
	display: grid;
	grid-template-rows: min-content 1fr;
	padding: 0;
	empty-cells: hide;
	/*box-shadow: none;*/
	overflow: hidden;
}

#calendar-table thead,
#calendar-table tbody,
#daily-events-wrapper {
	display: none;
}

#calendar-wrapper[data-display-mode="table-day-mode"] .day-mode { display: grid; }
#calendar-wrapper[data-display-mode="table-week-mode"] .week-mode { display: grid; min-width: calc(7 * 140px); }
#calendar-wrapper[data-display-mode="table-month-mode"] .month-mode { display: grid; }
#calendar-wrapper[data-display-mode="table-year-mode"] .year-mode { display: grid; }
#calendar-wrapper[data-display-mode="table-tasklist-mode"] #daily-events-wrapper { display: block; }
#calendar-wrapper[data-display-mode="table-tasklist-mode"] #calendar-table { display: none; }


#calendar-wrapper[data-display-mode="table-tasklist-mode"] > #calendar-table-nav > .planning-filters {
	display: block;
}
#calendar-wrapper[data-display-mode="table-tasklist-mode"] > #calendar-table-nav > .prev-next {
	display: none;
}


#calendar-table thead {
	background: inherit;
	grid-template-rows: minmax(45px, auto);
	align-items: center;
}

#calendar-table > thead > tr {
	display: grid;
}

#calendar-table > thead > tr > td {
	padding: 5px;
}

#mini-calendar-table > thead td button,
#calendar-table-nav button {
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 6px;
	outline: none;
}
#mini-calendar-table > thead td button::before,
#calendar-table-nav button:not(.cal-mode)::before {
	content: "\e315";
	font-size: 1.5rem;
}

#mini-calendar-table > thead td button:focus,
#calendar-table-nav button:focus {
	background: rgba(0, 0, 0, .2);
}

#calendar-table-nav .prev-next,
#calendar-table-nav .planning-filters {
	margin-left: auto;
}

#calendar-table-nav .planning-filters {
	display: none;
}

#calendar-table-nav #prev-cal::before {
	content: "\e314";
}

#calendar-table > thead > tr.dayAbbr {
	grid-template-columns: repeat(7, calc(100% / 7));
	border-left: 1px solid transparent;
}
#calendar-table > thead > tr.dayAbbr > td {
	border-right: 1px solid transparent;
}

#calendar-table > tbody {
	grid-auto-rows: 1fr;
	font-weight: 300;
	max-height: 100%;
	padding: 0px;
	box-shadow: none;
	border: 1px solid #ddd;
	border-width: 0 0 1px 1px;
	overflow-y: auto;
	border-radius: 0;
}

#calendar-table > tbody > tr {
	display: grid;
}

#calendar-table > tbody > tr > td {
	border: 1px solid #ddd;
	border-width: 1px 1px 0 0;
	padding: 5px;
	min-width: 0;
	min-height: 0;
	transition: background-color .3s;
	position: relative;
	text-align: right;
	overflow: auto;
}

#calendar-table > tbody td:hover {
	background-color: var(--md-card-color-hover);
}

#calendar-table > tbody td.isToday {
	font-weight: bold;
}

/* the event labels in the calendar (only on "bigcalendar" display mode) */
#calendar-table .eventLabel {
	background-color: red;
	font-weight: bold;
	text-align: left;
	font-size: .8em;
	padding: 2px;
	overflow: hidden;
	white-space: pre;
	text-overflow: ellipsis;
	display: block;
	margin: 3px 1px;
	border-radius: 3px;
	border: 1px solid black;
	cursor: pointer;
	position: relative;
	z-index: +1;
	box-sizing: border-box;
	color: black;
}

#calendar-table thead .eventLabel {
	white-space: normal;
}

#calendar-table .eventLabel:hover {
	box-shadow: 0 0 3px grey;
	z-index: +5;
	border: 1px solid white;
}

#calendar-table > tbody .eventLabel.pastEvent  {
	filter: saturate(.5);
}

#calendar-table > tbody time {
	margin: 0 5px 0 0;
}


/* Specific for calendar in YEAR mode */

#calendar-wrapper[data-display-mode="table-year-mode"] > #calendar-table > tbody {
	text-transform: uppercase;
}

#calendar-wrapper[data-display-mode="table-year-mode"] > #calendar-table > tbody tr {
	grid-template-columns: repeat(4, 25%);
	justify-content: space-around;
	border: none;
}

#calendar-wrapper[data-display-mode="table-year-mode"] > #calendar-table > tbody > tr > td {
	cursor: pointer;
}



/* Specific for calendar in MONTH mode */

#calendar-wrapper[data-display-mode="table-month-mode"] > #calendar-table > tbody tr {
	grid-template-columns: repeat(7, calc(100% / 7));
	min-height: 0;
	position: relative; /* for week number positionning */
}

#calendar-wrapper[data-display-mode="table-month-mode"] > #calendar-table > tbody > tr::before { /* week-number on rows*/
	content: attr(data-week);
	position: absolute;
	color: gray;
	font-size: .8em;
	font-family: inherit!important;
	font-weight: normal;
	background: linear-gradient( 135deg, #bbb, transparent 40% );
	padding: 5px;
	z-index: +1;
}

#calendar-wrapper[data-display-mode="table-month-mode"] > #calendar-table > tbody > tr > td {
	cursor: pointer;
}

#calendar-wrapper[data-display-mode="table-month-mode"] > #calendar-table > tbody > tr > td:last-of-type {
	border-right: 0;
}



/* Specific for calendar in WEEK mode */

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table {
	overflow-x: auto;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > thead > tr > th {
	cursor: pointer;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > thead span.today {
	padding: 4px 10px;
	border-radius: 20px;
	background: var(--md-primary-color);
	color: var(--main-md-text-color);
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody {
	grid-auto-rows: auto auto 1fr;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr {
	min-height: 0;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr > td {
	text-align: center;
	vertical-align: top;
	padding: 3px;
	overflow:auto;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr > td:empty {
	padding: 0;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(1) {
	grid-template-columns: 100%;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(1) > td {
	border-top: none;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(1) > #wholeWeek > .eventLabel {
	display: flex;
	flex-wrap: wrap;
	overflow: visible;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(1) > #wholeWeek > .eventLabel.endsAfter::after {
	content: "";
	position: absolute;
	width: 10px;
	background: inherit;
	right: -8px;
	top: 0px;
	height: 100%;
	box-sizing: border-box;
	clip-path: polygon( 0% 0%, 2px 0%, 100% 50%, 2px 100%, 0% 100%);
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(1) > #wholeWeek > .eventLabel.startBefore::before {
	content: "";
	position: absolute;
	width: 10px;
	background: inherit;
	left: -8px;
	top: 0px;
	height: 100%;
	box-sizing: border-box;
	clip-path: polygon( 0% 0%, 2px 0%, 100% 50%, 2px 100%, 0% 100%);
	transform: scaleX(-1);
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(1) > #wholeWeek > .eventLabel > .eventLabelHours {
	order: 2;
	flex: 0 0 auto;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(2) > td {
	border-top: none;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(2) > td > .eventLabel > .eventLabelHours {
	display: none;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table > tbody > tr:nth-of-type(n+2) {
	grid-template-columns: repeat(7, calc(100% / 7));
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table .eventLabel {
	font-weight: normal;
	font-size: .9em;
	padding: 5px 3px;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table .eventLabel:not(:first-of-type) {
	margin-top: 5px;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table .eventLabel:not(:last-of-type) {
	margin-bottom: 5px;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table .eventLabel > .eventLabelHours {
	display: flex;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table .eventLabel > .eventLabelHours > span {
	flex: 1;
	text-align: right;
	color: rgba(0, 0, 0, .6);
	font-style: italic;
	margin-left: 5px;
}

#calendar-wrapper[data-display-mode="table-week-mode"] > #calendar-table .eventLabel > .eventLabelTitle {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 auto;
}



/* Specific for calendar in DAY mode */

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > thead {
	position: relative;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > thead::after {
	content: "";
	display: block;
	background-color: transparent;
	height: 5px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	z-index: 2;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
	left: 0;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody {
	position: relative;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr {
	grid-template-rows: 45px;
	grid-template-columns: 70px minmax(200px, 1fr);
	grid-auto-columns: 1fr;
	grid-auto-flow: column;

}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr > td {
	padding: 0;
	overflow: visible;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr > td > .eventLabel {
	position: absolute;
	display: inline-block;
	width: 99%;
	min-width: 200px;
	right: 0;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr > td:nth-of-type(2) > .eventLabel {
	left: 0;
	right: auto;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr > td:first-of-type {
	cursor: pointer;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr > td:first-of-type > span {
	background: var(--md-card-color);
	transform: translateY( -50% );
	display: inline-block;
	vertical-align: middle;
	padding: 0px 15px 0 10px;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr > td:nth-of-type(2):hover {
	background-color: inherit;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr:first-of-type > td:hover {
	background-color: transparent;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr:first-of-type > td:first-of-type > span {
	display: none;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr#h0000::after {
	content: "";
	z-index: +2;
	position: absolute;
	top: var(--nowLineTop);
	background: red;
	left: 70px;
	right: 0;
	height: 3px;
}

#calendar-wrapper[data-display-mode="table-day-mode"] > #calendar-table > tbody > tr#h0000::before {
	content: "";
	z-index: +2;
	position: absolute;
	top: calc( var(--nowLineTop) - 4px );
	background: red;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	left: 64px;
}



/* the daily shedule list
-------------------------------*/

#daily-events {
	padding: 0;
}

#daily-events > div {
	padding: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	display: flex;
	align-items: center;
	cursor: pointer;
}

#daily-events > div:hover {
    background-color: var(--md-card-color-hover);
}

#daily-events > div .eventDate {
	flex-shrink: 0;
}

#daily-events > div .eventDate > span {
	vertical-align: middle;
}

#daily-events > div .eventDate > .event-dd {
	font-size: 1.5em;
	display: inline-block;
	width: 2ch;
	text-align: center;
}

#daily-events > div .eventDate > .event-mmdd {
	text-transform: uppercase;
	font-size: .8em;
	letter-spacing: .8px;
	margin: 0 10px;
	width: 8em;
	text-align: center;
	display: inline-block;
	white-space: pre-line;
}

#daily-events > div .eventDate > .event-hhii {
	margin: 0 20px 0 0;
}

#daily-events > div .eventSummary {
	flex: 1;
	padding: 0 0 0 10px;
	align-items: center;
}

#daily-events > div > .eventSummary {
	flex: 1;
	display: flex;
}

#daily-events > div > .eventSummary > span {
	margin: 0 10px;
	hyphens: auto;
}

#daily-events > div > .eventSummary > span.color {
	height: 22px;
	border-radius: 10px;
	flex: 0 0 22px;
}

#daily-events > div > .eventSummary > span.title {
	font-weight: bold;
}



/* the display-event popup
----------------------------------------------- */
#popup.popup-event > .event-title > span.event-color {
	display: inline-block;
	width: 22px;
	background-color: white;
	height: 22px;
	margin-right: 15px;
	border-radius: 50%;
}

#popup.popup-event > .event-title > span.event-name {
	font-size: 1.3em;
	letter-spacing: 1px;
	flex: 1;
}

#popup.popup-event > .event-content ul {
	line-height: 1.4em;
	list-style-type: none;
	padding: 10px 0 10px 60px;
	margin: 0;
}

#popup.popup-event > .event-content ul > li {
	white-space: pre-line;

	padding: 10px 0;
	margin: 0;
	position: relative;
}

#popup.popup-event > .event-content ul > li::before {
	font-size: 1.4em;
	position: absolute;
	left: -40px;
	top: 10px;
	opacity: .5;
}

#popup.popup-event > .event-content ul > li.event-persons > span {
	border: 1px solid silver;
	display: inline-block;
	padding: 3px 8px;
	margin: -3px 5px 8px 0;
	border-radius: 20px;
	background: var(--md-card-color-focus);
}


#popup.popup-event .event-time::before        { content: "\e924"; }
#popup.popup-event .event-loc::before         { content: "\e567"; }
#popup.popup-event .event-persons::before     { content: "\e7fb"; }
#popup.popup-event .event-description::before { content: "\e88e"; }

#popup.popup-event .event-time span {
	display: block;
}

#popup.popup-event .event-time span.time {
	font-size: .9em;
	opacity: .7;
}


/* popup for editing an event
------------------------------------------ */
#popup.popup-edit-event .event-title {
	padding-top: 0;
	padding-bottom: 0;
}

#popup.popup-edit-event > .event-title > button.event-color {
	display: inline-block;
	width: 25px;
	background-color: white;
	height: 25px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
}

#popup.popup-edit-event .colors {
	display: none;
	position: absolute;
	list-style: none;
	height: 95px;
	width: 95px;
	left: 4px;
	top: 4px;
	margin: 0;
	padding: 0;
	background-color: white;
	border-radius: 2px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
	font-size: 0;
	z-index: +2;
}

#popup.popup-edit-event .event-color:focus + .colors,
#popup.popup-edit-event .colors:hover {
	display: block;
}

#popup.popup-edit-event .colors > li {
	box-sizing: border-box;
	border: 1px silver solid;
	cursor: pointer;
	width: 25px;
	height: 25px;
	display: inline-block;
	border-radius: 50%;
	margin: 5px 0 0 5px;
}

#popup.popup-edit-event .colors > li:hover {
	opacity: .95;
	border-color: gray;
}

#popup.popup-edit-event li > button:focus,
#popup.popup-edit-event li > button::-moz-focus-inner {
	background-color: rgba(0, 0, 0, .05);
	transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	outline: none;
	border-color: transparent;
}

#popup.popup-edit-event .event-title .text {
	background-color: transparent;
	font-weight: 400;
	font-size: 1.3em;
	box-shadow: none;
	letter-spacing: 1px;
	border: none;
	flex: 1;
	min-width: 0;
}

#popup.popup-edit-event .event-content > div {
	position: relative;
	padding-left: 55px;
	margin: 5px 0;
}

#popup.popup-edit-event .event-content-date p { /* for date & toogle button */
	padding: 5px 5px 0;
}

#popup.popup-edit-event .event-content-date p.date-time-allday {
	display: flex;
	align-items: center;
	padding: 20px 5px 0;
}

#popup.popup-edit-event .event-content > div > p:first-of-type {
	margin: 0;
	margin-right: 55px;
}

#popup.popup-edit-event .event-content > div > p > .checkbox-toggle {
	margin: 0;
}

#popup.popup-edit-event .event-content > div:not(.event-content-date) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#popup.popup-edit-event .event-content > div::before {
	font-size: 1.4em;
	position: absolute;
	left: 20px;
	top: 19px;
	opacity: .5;
}

#popup.popup-edit-event .event-content > div:not(.event-content-date) label {
	margin: 0 0 0px;
	padding: 5px;
	position: relative;
	display: flex;
	/*align-items: center;*/
	overflow: hidden;
	flex: 1;
	flex-basis: 40%;
}

#popup.popup-edit-event .event-content > div:not(.event-content-date) .text {
	min-width: 0;
	padding: 15px 5px 5px 5px;
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: transparent;
}

#popup.popup-edit-event .event-content > div:not(.event-content-date) label > span {
	position: absolute;
	left: 5px;
	padding: 15px 5px 5px 5px;
	transition: all 200ms;
	opacity: 0.5;
	z-index: 0;
	font-weight: 300;
}

#popup.popup-edit-event .event-content label > .text:not(:placeholder-shown) + span,
#popup.popup-edit-event .event-content label > .text:focus + span {
	/*transform: scale(.75) translateY(-14px);*/
	transform: scale(.75) translateY(0px);
	transform-origin: top left;
	padding-top: 0;
	padding-bottom: 0;
}

#popup.popup-edit-event .event-content label > .text:focus + span,
#popup.popup-edit-event .event-content label > .text:invalid + span {
	opacity: 1;
}

#popup.popup-edit-event .event-content label > .text:invalid + span {
	color: red;
}

#popup.popup-edit-event .event-content-date::before    { content: "\e924"; }
#popup.popup-edit-event .event-content-loc::before     { content: "\e567"; }
#popup.popup-edit-event .event-content-persons::before { content: "\e7fb"; }
#popup.popup-edit-event .event-content-descr::before   { content: "\e88e"; }

#popup.popup-edit-event .event-content-date label[for="date"] {
	flex: 1;
}

#popup.popup-edit-event .event-content-date > .date-time-input > label[for^="time"]::before {
	position: relative;
	left: 25px;
	z-index: +5;
}

#popup.popup-edit-event .event-content-date > .date-time-input > label[for="time-start"]::before { content: "\e5d8"; }
#popup.popup-edit-event .event-content-date > .date-time-input > label[for="time-end"]::before { content: "\e5db"; }

#popup.popup-edit-event .event-content-date > .date-time-input > label[for^="time"] > input {
	padding-left: 25px;
}

#popup.popup-edit-event .event-content-date > .date-time-input.date-only > label[for^="time"] {
	display: none;
}

#popup.popup-edit-event .event-content-loc .text,
#popup.popup-edit-event .event-content-persons .text,
#popup.popup-edit-event .event-content-descr .text {
	width: 100%;
}

#popup.popup-edit-event #event-content-persons-selected {
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
}

#popup.popup-edit-event #event-content-persons-selected > li {
	border: 1px solid silver;
	border-radius: 20px;
	padding: 5px 10px;
	display: inline-block;
	background: var(--md-card-color-focus);
	margin: 5px;
}

#popup.popup-edit-event #event-content-persons-selected > li > a {
	color: inherit;
	margin-left: 6px;
	text-decoration: none;
	padding: 3px;
}

#popup.popup-edit-event #event-content-persons-selected > li:hover > a {
	color: crimson;
}

#popup.popup-edit-event #event-content-persons-selected:not(:empty) {
	margin-top: 9px;
}

#popup.popup-edit-event .event-content-descr .text {
	height: 100%;
	resize: vertical;
}

#popup.popup-edit-event #allDay+label {
	flex: 1;
}

#popup.popup-edit-event .popup-footer {
	justify-content: flex-end;
}



/* Contacts Page CSS
------------------------------------------------------------ */

#body.contacts #fab::before {
	content: "\e7fe";
}

#table-contacts {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
}

#table-contacts,
#table-contacts tr,
#table-contacts td {
	border: none;
}

/*#table-contacts > thead {
	background-color: var(--md-card-color-hover);
}*/

#table-contacts tr {
	border-bottom: 1px solid rgba(0, 0, 0, .05);
}

#table-contacts > tbody > tr:hover {
	background-color: var(--md-card-color-hover);
	transition: background-color .5s;
}

#table-contacts th {
	padding: 20px 10px 10px;
	text-align: left;
	white-space: nowrap;
}

#table-contacts td {
	padding: 10px;
	max-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 2px;
}

#table-contacts tr > td.icon {
	width: 40px;
	max-width: 40px;
	cursor: pointer;
}

#table-contacts tr > td.icon > span {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-block;
	background-size: 40px 40px;
	box-shadow: 0 0px 3px black inset;
}

#table-contacts tr > td.name {
	max-width: 100%;
	width: 220px;
	cursor: pointer;
}

#table-contacts tr > td > a {
	color: grey;
	text-decoration: none;
}
#table-contacts tr > td > a+a {
	margin-left: 7px;

}

#table-contacts tr > td > a:hover {
	text-decoration: underline;
}

#table-contacts tr > td.label,
#table-contacts tr > th.label {
	text-align: center;
}

#table-contacts tr > td.label > span {
	padding: 1px 10px;
	background-color: var(--md-secondary-color);
	color: var(--scnd-md-text-color);
	border-radius: 10px;
}

#table-contacts tr > td.label > span:empty {
	display: none;
}

#table-contacts tr > td.buttons {
	width: 40px;
	max-width: 40px;
	position: relative;
	background-size: 0;
	opacity: 0;
}
#table-contacts tr:hover > td.buttons {
	opacity: 1;
}

#table-contacts tr > td.buttons > button {
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	padding: 0;
}

#table-contacts tr > td.buttons > button::before {
	content: '\e3c9';
	font-size: 1.4em;
	opacity: .8;
	display: block;
	height: 30px;
	width: 30px;
	line-height: 28px;
}

#table-contacts tr > td.buttons > button:hover {
	background-color: rgba(0, 0, 0, .1);
}

#table-contacts tr > td.buttons > button:focus {
	background-color: rgba(0, 0, 0, .2);
}


/* the display-contact popup
----------------------------------------------- */

#popup.popup-contact > .contact-title {
	padding-top: 10px;
	padding-bottom: 10px;
}
#popup.popup-contact > .contact-title > .contact-img-name {
	flex: 1;
}
#popup.popup-contact > .contact-title .contact-img {
	vertical-align: middle;
	margin-right: 5px;
	box-shadow: 0 0px 3px black inset;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: relative;
	display: inline-block;
	background-size: 40px 40px;
}

#popup.popup-contact > .contact-title span {
	vertical-align: middle;
}

#popup.popup-contact > .contact-title span.contact-name {
	font-size: 1.3em;
	letter-spacing: 1px;
}
#popup.popup-contact > .contact-title span.contact-label {
	padding: 1px 10px;
	background-color: var(--md-primary-color);
	color: var(--main-md-text-color);
	border-radius: 10px;
	margin-left: 10px;
}

#popup.popup-contact > .contact-title span.contact-label:empty {
	display: none;
}

#popup.popup-contact > .contact-title > .button-edit {
	border: 0;
	background: transparent;
	position: absolute;
	right: 38px;
	bottom: -17px;
	z-index: 10;
}

#popup.popup-contact > .contact-title > .button-edit::before {
	content: "\e3c9";
	color: white;
	color: var(--main-md-text-color);
	height: 40px;
	width: 40px;
	background: var(--md-primary-color);
	border-radius: 50%;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
	display: inline-block;
	line-height: 40px;
	text-align: center;
}

#popup.popup-contact > .contact-content ul {
	line-height: 1.4em;
	list-style-type: none;
	padding: 10px 0 10px 60px;
	margin: 0;
}

#popup.popup-contact > .contact-content ul > li::before {
	font-size: 1.4em;
	position: absolute;
	left: -40px;
	top: 10px;
	opacity: .5;
}

#popup.popup-contact > .contact-content ul > li {
	padding: 10px 0;
	margin: 0;
	position: relative;
}

#popup.popup-edit-contact .contact-content .contact-emails::before,
#popup.popup-contact > .contact-content ul > li.contact-emails::before { content: '\e0e6'; }
#popup.popup-edit-contact .contact-content .contact-phones::before,
#popup.popup-contact > .contact-content ul > li.contact-phones::before { content: '\e0b0'; }
#popup.popup-edit-contact .contact-content .contact-address::before,
#popup.popup-contact > .contact-content ul > li.contact-address::before { content: '\e0c8'; }
#popup.popup-edit-contact .contact-content .contact-label::before,
#popup.popup-contact > .contact-content ul > li.contact-label::before { content: '\e892'; }
#popup.popup-edit-contact .contact-content .contact-birthday::before,
#popup.popup-contact > .contact-content ul > li.contact-birthday::before { content: '\e7e9'; }
#popup.popup-edit-contact .contact-content .contact-links::before,
#popup.popup-contact > .contact-content ul > li.contact-links::before { content: '\e250'; }
#popup.popup-edit-contact .contact-content .contact-social::before,
#popup.popup-contact > .contact-content ul > li.contact-social::before { content: '\e8dc'; }
#popup.popup-edit-contact .contact-content .contact-notes::before,
#popup.popup-contact > .contact-content ul > li.contact-notes::before { content: '\e06f'; }
#popup.popup-edit-contact .contact-content .contact-other::before,
#popup.popup-contact > .contact-content ul > li.contact-other::before { content: '\e88e'; }


#popup.popup-contact > .contact-content ul > li > span,
#popup.popup-contact > .contact-content ul > li > a {
	display: block;
	text-decoration: none;
}

/* the edit-contact popup
----------------------------------------------- */

#popup.popup-edit-contact > .contact-title {
	padding-top: 10px;
	padding-bottom: 10px;
}

#popup.popup-edit-contact .contact-content > .onshowmore {
	display: none;
}
#popup.popup-edit-contact .contact-content.show-more > .onshowmore {
	display: block;
}

#popup.popup-edit-contact .contact-content > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 5px 0;
	position: relative;
	padding-left: 55px;
}

#popup.popup-edit-contact .contact-content > div::before {
	font-size: 1.4em;
	position: absolute;
	left: 20px;
	top: 19px;
	opacity: .5;
}

#popup.popup-edit-contact .contact-content label {
	margin: 0 0 0px;
	padding: 5px;
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	flex: 1;
	flex-basis: 40%;
}

#popup.popup-edit-contact .contact-content .text {
	min-width: 0;
	padding: 15px 5px 5px 5px;
	width: 100%;
	position: relative;
	z-index: 1;
	background-color: transparent;
	border-color: transparent;
	border-bottom-color: silver;
	border-radius: 0;
}

#popup.popup-edit-contact .contact-content label > span {
	position: absolute;
	left: 5px;
	padding: 15px 5px 5px 5px;
	transition: all 200ms;
	opacity: 0.5;
	z-index: 0;
	font-weight: 300;
}

#popup.popup-edit-contact .contact-content label > input:not(:placeholder-shown) + span,
#popup.popup-edit-contact .contact-content label > input:focus + span {
	transform: scale(.75) translateY(-14px);
	transform-origin: top left;
	padding-top: 0;
	padding-bottom: 0;
}
#popup.popup-edit-contact .contact-content label > input:focus + span,
#popup.popup-edit-contact .contact-content label > input:invalid + span {
	opacity: 1;
}
#popup.popup-edit-contact .contact-content label > input:invalid + span {
	color: red;
}
#popup.popup-edit-contact .contact-content label:not(:last-of-type) > button.add {
	display: none;
}

#popup.popup-edit-contact .contact-content label:last-of-type > button.rem {
	visibility: collapse;
}

#popup.popup-edit-contact .contact-content label > button.rem {
	visibility: hidden;
	visibility: collapse;
	opacity: 0;
}

#popup.popup-edit-contact .contact-content label:not(:only-of-type):hover > input:not(:placeholder-shown) ~ button.rem,
#popup.popup-edit-contact .contact-content label:not(:only-of-type):not(:last-of-type):hover > input:placeholder-shown ~ button.rem,
#popup.popup-edit-contact .contact-content label:not(:only-of-type) > input:not(:placeholder-shown):focus ~ button.rem {
	visibility: visible;
	opacity: 1;
}

#popup.popup-edit-contact .contact-content label > button {
	background-color: transparent;
	border: 0;
	padding: 0;
	margin: 0 5px 0 15px;
	transition: opacity .3s;
}

#popup.popup-edit-contact .contact-content label > button::before {
	font-size: 1.4em;
}

#popup.popup-edit-contact .contact-content label > button.add::before {
	content: "\e3ba";
	color: lightgreen;
}
#popup.popup-edit-contact .contact-content label > button.rem::before {
	content: "\e888";
	color: indianred;
}

/* avatar */
#popup.popup-edit-contact .contact-content > div.contact-img-fullname {
	display: grid;
	padding-left: 0;
	grid-template-columns: 55px 1fr 5fr;
}

#popup.popup-edit-contact .contact-content .contact-img {
	grid-row: 1;
	grid-column: 1;
	box-shadow: 0 0px 3px black inset;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-block;
	background-size: 40px 40px;

}

/* title, first- and lastname */
#popup.popup-edit-contact .contact-content label[for="contact-title"]     { grid-row: 1; grid-column: 2; }
#popup.popup-edit-contact .contact-content label[for="contact-firstname"] { grid-row: 1; grid-column: 3; }
#popup.popup-edit-contact .contact-content label[for="contact-lastname"]  { grid-row: 1; grid-column: 4; }
/* surname */
#popup.popup-edit-contact .contact-content .contact-surname > input  { flex: 1; }
/* email(s) */
#popup.popup-edit-contact .contact-content .contact-emails::before { content: '\e0e6'; }
#popup.popup-edit-contact .contact-content .contact-emails > input { flex: 1 1 100%; }
/* phone(s) */
#popup.popup-edit-contact .contact-content .contact-phones::before { content: '\e9cd'; }
#popup.popup-edit-contact .contact-content .contact-phones > input { flex: 1 1 100%; }
/* address */
#popup.popup-edit-contact .contact-content .contact-address {
	display: grid;
	grid-template-columns: repeat(10, 10%);
}
#popup.popup-edit-contact .contact-content .contact-address::before { content: '\e569'; }

#popup.popup-edit-contact .contact-content label[for="contact-nb"] { grid-row: 1; grid-column: 1 / span 1; }
#popup.popup-edit-contact .contact-content label[for="contact-st"] { grid-row: 1; grid-column: 2 / span 9; }
#popup.popup-edit-contact .contact-content label[for="contact-co"] { grid-row: 2; grid-column: 1 / span 10; }
#popup.popup-edit-contact .contact-content label[for="contact-cp"] { grid-row: 3; grid-column: 1 / span 2; }
#popup.popup-edit-contact .contact-content label[for="contact-ci"] { grid-row: 3; grid-column: 3 / span 8; }
#popup.popup-edit-contact .contact-content label[for="contact-sa"] { grid-row: 4; grid-column: 1 / span 3; }
#popup.popup-edit-contact .contact-content label[for="contact-cn"] { grid-row: 4; grid-column: 4 / span 7; }

/* PRÉFÉRENCES
------------------------------------------------------------ */

#preferences {
	max-width: 900px;
	margin: auto;
}

/* field sets */
#preferences .pref {
	padding: 0 0 20px;
	margin-top: 40px;
}

#preferences .form-legend {
	padding: 20px;
	font-weight: 500;
	font-size: 1.1em;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	background-color: var(--md-card-color-hover);
}

#preferences p {
	display: flex;
	align-items: center;
}

#preferences label {
	text-align: right;
	padding-right: 5px;
	flex: 0 1 45%;
}

#preferences a {
	padding: 15px 0;
}

#preferences textarea.text {
	width: auto;
}

#preferences .submit-bttns {
	margin-top: 40px;
}

/* MAINTENANCE */
#maintenance-form form + form {
	margin-top: 30px;
}

#maintenance-form fieldset {
	padding-bottom: 20px;
	margin-bottom: 20px;
	margin: 0 auto;
}

#maintenance-form legend {
	font-weight: bold;
	color: #1e88e5;
}

#maintenance-form p > label {
	display: inline-block;
	width: 40%;
	text-align: right;
	padding-right: 5px;
}

#maintenance-form #nb-artic,
#maintenance-form #nb-links {
	display: none;
}

#maintenance-form .submit-bttns {
	margin: 0px auto 15px;
	padding: 0px 20px;
	max-width: 700px;
}