:root{
	color-scheme: light dark; /* both supported */
	--general-text-color : #626262;
	--backdrop-filter-blur-radius : 5px;
	--box-border-radius : 2px;
	--box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	--default-space-size: 10px;
	--default-block-background-color : rgba(234,234,234,1);
	--kanban-item-background-color : #ffffff;
	--default-strong-color : #223058;
	--user-image-size : 32px;

	--box-text-color : var(--general-text-color);
	--box-text-color-hover : #444444;

	--scrollbar-size : 11px;
	--scrollbar-track-color : rgba(0, 0, 0, 0.1);
	--scrollbar-thumb-color : rgba(197, 197, 197, 0.85);

	--list-card-text-color : #333333;

	--list-text-color : var(--box-text-color);
	--list-text-color-hover : var(--box-text-color-hover);

	--font-awesome-familly : "Font Awesome 5 Free";
	--font-awesome-weight :  900;

	--list-button-default-bg-color: rgba(255,255,255,0.0);
	--list-button-hover-bg-color: rgba(255,255,255,0.3);

	--list-button-default-color: var(--list-text-color);
	--list-button-hover-color: var(--list-button-default-color);

	--edge-size: 0.5em;

	/* attention le clip fait aussi sauter les ombres */
	--default-clip-path :  polygon(
		var(--edge-size) 0%,
		100% 0,
		100% calc(100% - var(--edge-size)),
		calc(100% - var(--edge-size)) 100%,
		0 100%,
		0% var(--edge-size)
	);

	--gallery-grid-min-width: 100px;
}

#of_planning {
	width: 100%;
	height: 100vh;
}

.planningof-header{
	display: block;
	position: sticky;
	top:0px;
	z-index: 1;

	padding: var(--default-space-size);
	margin-bottom: var(--default-space-size);
	background: var(--default-block-background-color);
	-webkit-backdrop-filter: blur(var(--backdrop-filter-blur-radius));
	backdrop-filter: blur(var(--backdrop-filter-blur-radius));
	box-shadow: var(--box-shadow)
}

.nav-button, .small-action-btn{
	cursor: pointer;
	border: none;
	padding: 7px 7px;
	margin: 0;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	border-radius: var(--box-border-radius);

	background-color: var(--list-button-default-bg-color);
	color: var(--list-button-default-color);
}

nav.top-nav-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-title{
	font-weight: bold;
}


/* Link style button */
.button-link-style {

	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	font-weight: bold;
	background: transparent;

	/* inherit font & color from ancestor */
	color: var(--colortextlink);
	cursor: pointer;

	/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
	line-height: normal;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;

	/* Corrects inability to style clickable `input` types in iOS */
	-webkit-appearance: none;
}

.button-link-style:hover,
.button-link-style:focus  {
	text-decoration: underline;
	color: var(--colortextlink);
}

/* Remove excess padding and border in Firefox 4+ */
.button-link-style::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.weekend{
	background: #f4f7f4;
}

.now {
	background: #F0DFE5;
}