/* @override 
	https://shaarli:8890/tpl/chaaplin/css/chaaplin.css?*
	https://favs.rolandtisserand.fr/tpl/chaaplin/css/chaaplin.css?*
	https://shaarli-lastest:8890/tpl/chaaplin/css/chaaplin.css?*
 */
	
	:root {
	--main-color: #007AFF;
	--blank-color:black;
	--light-color:white;
	--dark-main-color: #186446;
	--normal-margin:2.4rem;
	--translucide:rgba(255, 255, 255, 0.62);
	--color00:rgb(255, 255, 255);
	--color10:rgb(246, 246, 246);
	--color01:#f0f0f4;
	--color02:#D8D8DC;
	--color03:#BCBCC0;
	--color04:#AEAEB2;
	--color05:#8E8E93;
	--color06:#6C6C70;
	--color07:#000;
	--color-alerte:#FF353B;
	--bg-alerte:rgba(255, 52, 58, 0.10);
	}

/*div, h1, h2, img, ul, li, p, header, aside, section, footer,svg,path {
	outline-width: 1px;
	outline-style: solid;
	outline-color: rgba(206,206,206,0.3);
}*/
/*
svg {
		outline-width: 1px;
	outline-style: solid;
	outline-color: rgba(206,206,206,0.3);
}*/

/* @group modern-normalize v1.1.0 */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/



*,
::before,
::after {
	box-sizing: border-box;
}


html {
	-moz-tab-size: 4;
	tab-size: 4;
}


html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

body {
	margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
	font-family:
		-apple-system,
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}


/* @end */

/* @group Awesomplete */

.awesomplete [hidden] {
	display: none;
}

.awesomplete .visually-hidden {
	position: absolute;
	clip: rect(0, 0, 0, 0);
}

.awesomplete {
	display: inline-block;
	position: relative;
}

.awesomplete > input {
/*	display: block;*/
}

.awesomplete > ul {
	position: absolute;
	left: 0;
	z-index: 1;
	min-width: 100%;
	box-sizing: border-box;
	list-style: none;
	padding: 0;
	margin: 0;
	background: #fff;
}

.awesomplete > ul:empty {
	display: none;
}

.awesomplete > ul {
	border-radius: .3em;
	margin: .2em 0 0;
	background: hsla(0,0%,100%,.9);
	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
	text-shadow: none;
}

@supports (transform: scale(0)) {
	.awesomplete >
	ul {
	transition: .3s cubic-bezier(.4,.2,.5,1.4);
	transform-origin: 1.43em -.43em;
}

.awesomplete > ul[hidden], .awesomplete > ul:empty {
	opacity: 0;
	transform: scale(0);
	display: block;
	transition-timing-function: ease;
}

/* @end */
}


html {
	font-size: 62.5%;
	line-height: 1.2;
background-color: #e8e8e8;
color: var(--blank-color);

}

body {
	background: var(--color00);
	font-size: 1.6rem;	
	/* iphone debug*/
	  display: flex;
	  flex-direction: column;
	  min-height: 100vh;
}


main {
	padding-left: var(--normal-margin);
	padding-right: var(--normal-margin);	
	
}

.test {
	color: #535553;
}

.no-padding main {
	padding-left: 0;
	padding-right: 0;
}

a {
	text-decoration: none;
	color: var(--main-color);
	transition: color .2s ease-in-out 0s;
}

a:hover {
	color: var(--color07);
}
.infos-font {
	font-size: 1.1rem;
}

.hidden,.visually-hidden {
	display: none;
}

summary {
	cursor: pointer;
}

details summary > * {
  display: inline;
	padding-left: .5ch;
}

details summary {
	  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
}
.alerte-rouge, .pure-alert-error {
	color: red;
	background-color: rgba(255, 0, 0, 0.1);
	padding: 1ch;
	border-radius: .5rem;
}

.pure-alert-success, .pure-alert-warning {
	color: #00CD51;
	background-color: rgba(0, 205, 81, 0.14);
	padding: 1ch;
	border-radius: .5rem;	
	margin-top: var(--normal-margin);
	margin-bottom: var(--normal-margin);
	display: flex;
align-items: center;	
align-content: center;
justify-content: space-between;
}

#shaarli-errors-alert {
	margin-top: var(--normal-margin);
	margin-bottom: var(--normal-margin);	
	display: flex;
align-items: center;	
align-content: center;
justify-content: space-between;
gap:2rem;
font-size: 85%;
}

.pure-alert-close {
	padding: .5rem;
	cursor: pointer;
}

#search-result-block {
	background-color: var(--color10);
	color: var(--color06);
	padding: 1ch;
	border-radius: .5rem;	
	margin-top: var(--normal-margin);
	margin-bottom: var(--normal-margin);
display: flex;
	align-items: center;
	gap:1rem;
	margin-right: 1rem;
	margin-left: 1rem;
}

#search-result-block .label-tag a {
	color: var(--color06);
	background-color: var(--light-color);
	display: inline-flex;
	border-radius: 2rem;	
	padding: .2rem;
	padding-left: 1rem;
	padding-right: .6rem;
	align-items: center;
}

#search-result-block .remove svg {
	margin-left: .5rem;
	margin-top: .3rem;
}

#search-result-block .remove svg circle {
	fill: var(--color01);
}


.shaarli_title {
	font-weight: 600;
	letter-spacing: .05ch;
}
/* @group Add / Edit */

#shaare {
		margin-bottom:var(--normal-margin);
}

.batch-addform [type="submit"] {
		margin-top:var(--normal-margin);
	
}
.edit-link-container textarea {
	min-height: 30vh;
}

.edit-link-container .awesomplete {
	width: 100%;
}

.md_help {
	font-size: 1.2rem;
	padding-bottom: var(--normal-margin);
	color: var(--color06);
}

.addlink-batch summary {
		margin-bottom: 20px;

}

.created-date {
		font-size: 1.2rem;
	margin-bottom: 3ch;
	display: block;
	color: var(--color05);
}
/* @end */

/* @group Tags */

.tag-sort {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	margin-top: 2.4rem;
	gap:.5rem;
}

.tag-sort a, .daily-nav a {
	background-color: var(--color01);
	padding: 1ch;
	border-radius: 1rem;
	transition: background 200ms ease-in-out 0s;
	color: var(--color06);
}

.tag-sort a:hover, .daily-nav a:hover {
	background-color: var(--color10);
	color: var(--color06);
	
}

.taglist-container .rename-tag-form {
    display: none;
}


.tag-list-item {
	border-bottom: 1px solid var(--color01);
display: flex;
flex-direction: row;
	align-items: center;
	gap:1rem;
	min-height:4.5rem;
}

.tag-list-item .rename-tag,.tag-list-item .delete-tag, .validate-rename-tag {
	font-size: 1.2rem;
	padding-left: 1ch;
}

input.rename-tag-input {
	margin-bottom: 0;
	width: 80% !important;
	font-size: 1.2rem;
}

.tag-list-item .svg-fill {
	fill:var(--color03);
}

.tag-link {
	flex-grow: 3;
}

.count {
	color: var(--color03);
}

.delete-tag {
	color: var(--color-alerte);
}

/* @end */

/* @group Forms */

.form-entry {
	border-bottom: 1px solid var(--color01);
	padding-top: 1rem;
	padding-bottom: 1rem;
	display: flex;
	flex-direction: row;
	gap:1rem;
align-items: center;
flex-wrap: wrap;
}


.form-entry.altform {
	border: none;
	margin-bottom: 1rem;
}

#editlinkform .form-entry {
	border-bottom: none;
}

.form-entry label {
	flex-grow: 3;
	flex-basis:85%;
	margin-bottom: 0;
}

.form-entry select {
	width: 100%;
	margin: 0;
	display: block;
}

label,.label-desc {
	font-size: 1.2rem;
	margin-bottom: 1ch;
	display: block;
	color: var(--color05);
}

#plugin_table label, #disabled_plugins label {
	margin-bottom: 0;
	
}

th {
	text-align: left;
}

.label-name {
	color: var(--color07);
	font-size: 1.6rem;
	display: block;
}

[type="url"], [type="text"], [type="password"], textarea {
	border: none;
	width: 100%;
	padding: 1ch;
	border-radius: .8rem;
	margin-bottom: 1ch;
	background-color: var(--color01);
	color: var(--blank-color);
}

.tools-server section [type="text"],.tools-server section [type="text"]:hover,.tools-server section [type="text"]:focus {
	background-color: var(--color00);
}

[type="submit"] {
	background-color: var(--main-color);
	border-radius: 25px;
	border: none;
	padding: .5ch;
	padding-left: 1.5ch;
	padding-right: 1.5ch;
	margin-bottom: 2.4rem;
	cursor: pointer;
	color: white;
	transition: filter 200ms ease-in-out 0s;
	filter: brightness(100%);
}

[type="submit"]:hover {
	filter: brightness(150%);
}

.button-red {
	background-color: var(--color-alerte);
	border-radius: 25px;
	border: none;
	padding: .5ch;
	padding-left: 1ch;
	padding-right: 1ch;
	margin-bottom: 2ch;
	cursor: pointer;
	color: white;
	transition: filter 200ms ease-in-out 0s;
	filter: brightness(100%);	
}

.button-red:hover {
	filter: brightness(150%);
	color: var(--light-color);	
}

select {
margin-bottom: 2ch;
width: 100%;
}

[type=radio] {
	margin-right: 1ch;
}

.submit-sticky {
	position: sticky;
	top: 20px;
	z-index: 1000;
}

.radio-buttons {
	display: flex;
	gap:1rem;
	
}

.margin-top {
		margin-top: 2.4rem;
}

/* @end */

/* @group Quotidien */

#daily h2 svg {
	display: inline;
vertical-align: bottom;
}

#daily h2 svg:hover svg-line-thin {
	stroke: blue ;
}
.daily-nav {
	display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap:1rem;
justify-content: space-between;
}
.col-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2vw;
  word-break: break-all;
}

.daily-entry-title {
	font-weight: 600;
}

.daily-entry {
	border-bottom: 1px solid var(--color01);
padding-bottom: 1rem;margin-bottom: 1rem;

}


.daily-about h3 {
		margin-top: 2.4rem;
		border-bottom: 1px solid var(--color01);
padding-bottom: 1rem;
}

/* @end */

/* @group the_header */
#the-header {
position: fixed;
bottom: 0;
width: 100%;
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
background-color: rgba(255,255,255,0.72);
z-index: 500;
box-shadow: 0 1px 2px rgba(68, 68, 68, 0.14);
display: flex;
flex-direction: column-reverse;
}

#icon-navbar {
display: flex;
flex-direction: row;
gap:.5rem;
padding: .5rem;
justify-content: space-between;
border-top: 1px solid var(--color01);
}

/*.nav_main {
	display: none;
}

.nav_main ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.nav_main ul a {
	margin-left: 1rem;
	margin-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	display: block;
border-bottom: 1px solid var(--subtle-color);
}*/

.toggle_nav {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: unset;
	border: none;
	z-index: 250;
	align-items: center;
	cursor: pointer;
}

#nav-links {
	display: none;
	font-size: 2rem;
	border-top: 1px solid var(--color01);}

#nav-links.active {
display: flex;
}

#nav-links ul {
	display: flex;
	flex-direction: column;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav-links li {
	display: flex;
	flex-direction: row;
	align-items:center;
	border-bottom: 1px solid var(--color01);
}

#nav-links li a, .shaarli_title {
	display: flex;
	flex-direction: row;
	padding-right: 2.4rem;
	padding-left: 2.4rem;
	flex-grow: 1;
	min-height: 5rem;
	transition: background 200ms ease-in-out 0s;
	margin: .5rem;
	border-radius: .5rem;
	align-items: center;
	gap:2.4rem;
	color: var(--color06);
}

#nav-links li a:hover {
	background-color: var(--color01);
	color: var(--main-color);
}

#nav-links svg {
/*	height: 3rem;*/
	width: auto;
}

a#shaarli-menu-shaare {
}


/* Animation */
#menu-icon-anime {
  display: block;
  width: 19px;
  height: 21px;
  position: relative;
  transform: rotate(0deg);
	overflow: hidden;
}

#menu-icon-anime span {
  display: block;
  position: absolute;
  height: .15rem;
  width: 100%;
  background: var(--color06);
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .15s ease-in-out;
}

.toggle_nav:hover > #menu-icon-anime span {
  background: var(--main-color);
	
}

#menu-icon-anime span:nth-child(1) {
  top: 1px;
}

#menu-icon-anime span:nth-child(2),
#menu-icon-anime span:nth-child(3) 
{
  top: 8px;
}

#menu-icon-anime span:nth-child(4) {
  top: 15px;
}

#menu-icon-anime.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#menu-icon-anime.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu-icon-anime.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#menu-icon-anime.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
/* End Animation */

/* @end */

/* @group Search + Filters */

#search {
	margin-left: 1rem;
	margin-top: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	display: none;
	flex-direction: row;
	gap:0rem;
	align-items: center;
	justify-content: space-between;
}

/* N'afficher la recherche que sur la liste */
.filters #search {
	display: flex;	
}

#search form {
	display: flex;
	flex-direction: row;
	gap:1rem;
  align-content: stretch;
  flex: 1;
}

#search form input[type="text"] {
	flex: 1;
	margin: 0;
	display: inline-flex;
}

form input[type="text"], textarea,input[type="url"] {
	transition: background 200ms ease-in-out 0s;	
}

form input[type="text"]:hover, textarea:hover,input[type="url"]:hover {
	background-color: var(--color10);	
}

form input[type="text"]:focus, textarea:focus,input[type="url"]:focus {
	background-color: var(--color10);	
}

form .awesomplete {
	flex: 1;
}

#search form [type="submit"] {
	margin: 0;
	background-color: inherit;
	padding-left: 0rem;
}

form [type="text"]::placeholder {
	color: var(--color06);	
}

input#tagfilter_value {
}

.button_filters {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: unset;
	border: none;
	align-items: center;
	cursor: pointer;
	padding: 0;
	margin: 0 ;
	display: inline-flex;
	
}

.sub-nav {
margin-bottom: 2.4rem;
font-size: 1.2rem;
flex-wrap:wrap;
gap:1rem;
justify-content: center;
display: none;
}

.sub-nav.active {
display: flex;
}


.sub-nav a {
	flex-grow: 0;
	background-color: var(--color01);
		min-height: auto;
		margin: 0;
		border-radius: .5rem;
		padding: .5rem;
		padding-bottom: .2rem;
	text-align: center;
}

.sub-nav a span {
	display: block;
}

/* @end */

/* @group buttons, svg... */
.svg-line {
	fill: none;
	stroke: var(--color06);
	stroke-width: .15rem;
	stroke-miterlimit: 10;
stroke-linecap:round;
stroke-linejoin:round;
}

.svg-line-thin {
	fill: none;
	stroke: var(--color06);
	stroke-width: 1px;
	stroke-miterlimit: 10;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}

#nav-links .svg-line-thin {
	stroke: var(--main-color);
}

.svg-close {
	fill: none;
	stroke: var(--color06);
	stroke-width: 1px;
stroke-linecap:round;
stroke-linejoin:round;	
vector-effect:non-scaling-stroke;
}

#shaarli-success-alert .svg-close {
	stroke: #00CD51;
	
}

#shaarli-errors-alert .svg-close {
	stroke: red;
}

.expand-private .svg-line {
	stroke: var(--color-alerte);
	
}

.expand-private .svg-fill {
	fill : var(--color-alerte);
}

.svg-focus {
	stroke: var(--main-color);
}
/*
	--main-color: #1b926c;
	--blank-color:black;
	--color00: #d0d0d0;
	--dark-main-color: #186446;
	--subtle-color:lightgrey;
	--very-subtle-color:#f3f2f2;*/

.svg-fill {
	fill: var(--color06);
	stroke: none;
	transition: fill 200ms ease-in-out 0s;
}



.filter-on .svg-fill, .expanded-active .svg-fill {
	fill: #00CD51;
}

.filter-on:hover .svg-fill {
	fill: red;
}

a:hover .svg-fill {
	fill: var(--main-color);
}

.svg-fill-empty {
	fill: transparent;
}

.svg-fill-negative {
	fill: var(--translucide);
}

.reserve {
	width: 22px;
	display: block;
}

.icon_button {
display: inline-block;
padding: .5rem;
padding-bottom: .30rem;
border-radius: .5rem;
/*background-color: var(--very-subtle-color);*/
transition: background 200ms ease-in-out 0s;
}

.icon_button:hover {
background-color: var(--color01);
}

.navigation .icon_button {
background-color: var(--color10);	
}

.navigation .icon_button:hover {
background-color: var(--color01);	
}

/* @end */

/* @group Navigation */

.navigation {
	margin-bottom: var(--normal-margin);
	min-height: 5.9rem;
	display: flex;
	gap:1.5rem;
	align-content: center;
	align-items: center;
	border-bottom: 1px solid var(--color01);
	padding-left: 1rem;
}

.pagination {
	font-size: 75%;
	color: var(--color05);
}

.linksperpage .selected {
	color: var(--main-color);
	border-color: var(--main-color);
}

.linklist-paging .options .filter-on {
	color: #00CD51;
	background-color: inherit;
}

.linklist-paging .options .filter-on:hover {
color: red;	
}
.linklist-paging .options .filter-on::after {
	content: ' ✓';
}

.linklist-paging .options .filter-on:hover::after {
	content: ' X';
}

.linklist-paging .options {
		display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap:.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
		border-bottom: 1px solid var(--color01);
padding-bottom: var(--normal-margin);
}

.options ul {
	display: flex;
	flex-direction: column;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.linksperpage {
		margin-bottom: 2rem;
}

.linksperpage ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
	align-items: center;
}

.linksperpage li a {
	padding: .5rem;
	border: 1px solid var(--color05);
	border-radius: .8rem;
	color: var(--color05);
}

.linksperpage input {
	width: 5ch;
	padding: .5rem;
	margin: 0;
	border-width: 1px;
	border-style: dashed;
	border-color: var(--color05);
	text-align: center;
	color: var(--color05);
	border-radius: .8rem;
}

.options-title {
	display: block;
	padding-bottom: .5rem;
	font-weight: 600;
}

/* @end */

/* @group linklist */

#linklist header {
	display: flex;
	align-items: center;
	min-height: 5.9rem;
}


.linklist-item-thumbnail {
	display: inline-block;
	padding-right: .5rem;
	/* Trick to stop that fucking space under pictures. >_> */
line-height: 0;
	vertical-align: middle;
}

.header_thumb {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	background-color: var(--color10);
	filter: brightness(95%);
	object-fit: cover;
}

#linklist h2 {
	color: var(--blank-color);
	display: inline;
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding-right: 1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#linklist h2 a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;

}

#linklist img {
	display: inline-block;
	padding: 0;
	margin: 0;
	border-radius: 5px;
}

#linklist figure {
	padding: 0;
	margin: 0;
	margin-bottom: var(--normal-margin);
}

#linklist :target {
scroll-margin-top: 3rem;
box-shadow: 0 3px 1rem rgba(68, 68, 68, 0.21);
}

.linklist-item {
	border-bottom: 1px solid var(--color01);
	padding-right: 4rem;
	padding-left: 1rem;
	word-wrap: break-word;
	position: relative;
	min-height: 6rem;
}

.linklist-item-description {
	font-size: 90%;
	max-width: 90rem;
	line-height: 1.5;
}


.linklist-item .tags {
	display: inline-flex;
	flex-direction:row;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	margin-bottom: 1ch;
	padding: 0;
	gap:1rem;
	font-size: 1.2rem;
	
}

.linklist-item .tags a {
	padding: .3ch;
	padding-left: 1ch;
	padding-right: 1ch;
	border-radius: 15px;
	background-color: var(--color01);	
}

.link-expand {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	max-height: 5.9rem;
	padding: 0;
	border: none;
	z-index: 200;
	cursor: pointer;
	width: 44px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background: none;
	justify-content: center;
	align-items: center;
}

.link-expand.expand-private {
	background-color: var(--bg-alerte);
}

.link-expand svg {
}

/* Animating + to X */
.link-expand .plus-cross {
transform: rotate(0deg);
transition: transform 200ms ease-in-out 0s;
}

.link-expand.active .plus-cross {
transform: rotate(45deg);
}

.link-content {
	  overflow: hidden;
  transition: max-height 0.3s ease-out;
  max-height: 0;
}

/* Expand post if link contain anchor or single */
:target .link-content, .full-post .link-content, .expanded-post .link-content {
  max-height: 100%;
}

:target .plus-cross,.full-post .plus-cross, .expanded-post .plus-cross {
	display: none;
}

.expanded-post .item_action span {
	display: none;
}

#linklist .full-post h2 {
	font-size: 2.5rem;
	font-weight: 400;
}

#linklist .full-post {
border-bottom: none;
}


.nav_item_actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: 1rem;
	margin-bottom: 1rem;
	justify-content: center;
	gap:1rem;
}

.nav_item_actions .item_action {
	display: flex;
	flex-direction: column;
	font-size: 1.2rem;
	background-color: var(--color01);
	border-radius: .5rem;
padding: .5rem;
text-align: center;
align-items: flex-end;
transition: background 100ms ease-in-out 0s;
}

.nav_item_actions .item_action:hover {
	background-color: var(--color10);
	
}

.nav_item_actions a {
	color: var(--color06);
}

.nav_item_actions a:hover {
	color:  var(--main-color);
}

.nav_item_actions a:hover .svg-fill {
	transition: fill 100ms ease-in-out 0s;
	fill: var(--main-color);
}

.nav_item_actions .item_action svg {
	margin-bottom: .5rem;
	flex-grow: 1;
	margin-left: auto;
	margin-right: auto;
}

.link_footer {
	font-size: 1.2rem;
	color: var(--color05);
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap:1rem;
	align-items: center;
	padding-bottom: 2.4rem;
}

.ctrl-checkbox {
	display: none;
}

.ctrl-checkbox.active {
	display: inline;
}

.rounded-checkbox {
	width: 2.2rem;
	height: 2.2rem;
	background-color: var(--color00);
	border-radius: 50%;
	vertical-align: text-top;
	border: .2rem solid var(--main-color);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	position: relative;
	margin-right: .5rem;
	display: inline-block;
}

.rounded-checkbox:checked:after {
	content: " ";
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: var(--main-color);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* @end */

/* @group tools */

.tools-template #content {
 	max-width: 80rem;
 }
.tools-section {
	margin-bottom:var(--normal-margin);
}


.tools-section:first-of-type {
	margin-top: var(--normal-margin);
}


.tools-section ul {
	padding: 0;
	margin: 0;
}

.tools-section li {
	display: flex;
	border-bottom: 1px solid var(--color01);
	align-items: center;
	min-height: 4.8rem;
		background-color: var(--color00);
	transition: background 200ms ease-in-out 0s;
}

.tools-section li:hover {
		background-color: var(--color10);

}


.tools-section a {
	display: flex;
	flex-grow: 2;
	border-radius: 5px;
}

.tools-section a:hover {
	color: var(--main-color);
}

.tools-bookmarklets {
	max-width: 60rem;
	display: none;
}

.tools-bookmarklets li {
	display: inline-block;
	border-bottom: none;
	padding-right: 2rem;
}

.tools-bookmarklets li:hover {
	background-color: var(--color00);
}

.tools-bookmarklets ul {
	display: flex;
	flex-direction: row;
}

.bookmarklet-link {
	cursor: move;
	background-color: var(--color10);
	padding: 1rem;
	border-radius: 1rem;
	margin-bottom: 2.4rem;
	margin-top: 1.4rem;
  -webkit-user-select: none; 
  -ms-user-select: none; 
user-select: none; 
transition: box-shadow 200ms ease-in-out 0s;
border: 1px solid var(--color00);
box-shadow: var(--color02) 0px 1px 4px;
}

.bookmarklet-link:hover {
	color: var(--main-color);
box-shadow: var(--color06) 0px 1px 4px;
}}

#pluginform table {
	margin-bottom: 2.4rem;
	width: 100%;
}

#pluginform td {
	border-bottom: 1px solid var(--color10);
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.tools-server p {
	overflow-wrap: anywhere;
}

.tools-plugins [type=submit] {
	margin-top: var(--normal-margin);
}

.circle-green {
	width: 1rem;
	height: 1rem;
	background-color: #00CD51;
	display: block;
	border-radius: 50%;
}

.circle-red {
	width: 1rem;
	height: 1rem;
	background-color: red;
	display: block;
	border-radius: 50%;
}

.circle-orange {
	width: 1rem;
	height: 1rem;
	background-color: orange;
	display: block;
	border-radius: 50%;
}

.link-back {
	display: inline-block;
	padding-right: .5rem;
	
}


.link-back:hover .svg-line-thin {
	stroke: var(--main-color);
}
/* @end */

/* @group Footer */
#footer {
/*	margin-top: auto;
	/* Astuce pour placer le footer en pied de page *!/
	padding-top:var(--normal-margin) ;
	padding-bottom: var(--normal-margin);*/
}
.footer-ours {
	margin-top: var(--normal-margin);
	margin-bottom:6rem;
	margin-left:1rem;
	margin-right:1rem;
}


/* @end */

/* @group Mur d'images */

.picwall-container {
	position: relative;
}

.picwall-container div {
	display: flex;
}

.picwall-container h2 {
	margin: 0;

}

.picwall-container {
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap:.5rem;
	margin-bottom: var(--normal-margin);
	margin-top:var(--normal-margin);
}

.picwall-container figure {
margin: 0;
display: flex;
flex-direction: column;
box-shadow: 0 1px 3px var(--color05);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	transition: transform 150ms ease-in-out 0s;
	transform: translateY(0rem);

}
.picwall-container figure:hover {
	transform: translateY(-.5rem);
}
.picwall-container img {
	display: block;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	max-width: 100%;
	height: auto;
	width: 100%;
	filter: brightness(97%);
}

.picwall-container figcaption {
	font-size: 1.2rem;
	background-color: var(--color00);
	padding: 1ch;
text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;	
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;}


/* @end */

/*.subheader-form {
    display: block;
    position: fixed;
	top: 10%;
        left: 50%;
transform: translate(-50%);
    visibility: hidden;
    z-index: 999;
	background-color: var(--translucide);
	padding: 1rem;
	border-radius: 1rem;
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
box-shadow: 0 1px 8px rgba(75, 75, 75, 0.49);
}

*/

.subheader-form {
    visibility: hidden;
display: none;
}

.subheader-form .item_action {
	font-size: 1.2rem;
	background-color: var(--main-color);
	color: var(--color00);
	transition: background 200ms ease-in-out 0s;
}

.subheader-form .item_action:hover {
	background-color: var(--color06);
}

.subheader-form a:hover {
	color: var(--light-color);
}

.subheader-form.open {
    visibility: visible;
	display: block;
}

.filter-on {
background-color: red;	
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0 }
	
	.sr-only-focusable:active, .sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto
}



/*.shaarli-menu {
	position: fixed;
	top: 0;
	transition: max-height .5s;
	z-index: 999;
	background: var(--main-color);
	width: 100%;
	max-height: 45px;
	overflow: hidden;
	-webkit-font-smoothing: antialiased
}

.shaarli-menu.open {
	transition: max-height .75s;
	max-height: 500px
}



.menu-toggle {
	display: none;
	position: absolute;
	top: 5px;
	right: 0;
	width: 34px;
	height: 45px
}

.menu-toggle .bar {
	display: block;
	position: absolute;
	top: 18px;
	right: 7px;
	border-radius: 100px;
	background-color: #b0ddce;
	width: 20px;
	height: 2px;
	transition-duration: .5s
}

.menu-toggle .bar:first-child {
	transform: translateY(-6px)
}

.menu-toggle.x .bar {
	transform: rotate(45deg)
}

.menu-toggle.x .bar:first-child {
	transform: rotate(-45deg)
}*/
/*
@media screen and (max-width: 64em) {
	.menu-toggle {
		display: block
	}
}*/

/* @group Switch */
/* © : https://codepen.io/cbp/pen/BaPXOd */
.switch {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 31px;
  width: 51px;
  min-width: 51px;
  position: relative;
  border-radius: 16px;
  cursor: pointer;
  outline: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  background-color: #e5e5e5;
  -webkit-transition-duration: 600ms;
  -moz-transition-duration: 600ms;
  transition-duration: 600ms;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
}
.switch::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 27px;
  width: 47px;
  content: " ";
  position: absolute;
  left: 2px;
  top: 2px;
  background-color: #ffffff;
  border-radius: 16px;
  z-index: 1;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.switch::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 27px;
  width: 27px;
  content: " ";
  position: absolute;
  border-radius: 27px;
  background: #ffffff;
  z-index: 2;
  top: 2px;
  left: 2px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 4px 11px 0px rgba(0, 0, 0, 0.08), -1px 3px 3px 0px rgba(0, 0, 0, 0.14);
  -webkit-transition: -webkit-transform 300ms, width 280ms;
  -moz-transition: -moz-transform 300ms, width 280ms;
  transition: transform 300ms, width 280ms;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
  -moz-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
  transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
}
.switch:checked {
  background-color: var(--main-color);
}
.switch:checked::after {
  -webkit-transform: translate3d(16px, 0, 0);
  -moz-transform: translate3d(16px, 0, 0);
  -ms-transform: translate3d(16px, 0, 0);
  -o-transform: translate3d(16px, 0, 0);
  transform: translate3d(16px, 0, 0);
  right: 18px;
  left: inherit;
}
.switch:active::after {
  width: 35px;
}
.switch:checked::before, .switch:active::before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.switch:disabled {
  opacity: 0.5;
  cursor: default;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}
.switch:disabled:active::before, .switch:disabled:active::after, .switch:disabled:checked::before {
  width: 27px;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}
.switch:disabled:active::before {
  height: 27px;
  width: 41px;
  -webkit-transform: translate3d(6px, 0, 0);
  -moz-transform: translate3d(6px, 0, 0);
  -ms-transform: translate3d(6px, 0, 0);
  -o-transform: translate3d(6px, 0, 0);
  transform: translate3d(6px, 0, 0);
}
.switch:disabled:checked:active::before {
  height: 27px;
  width: 27px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.switch::before {
  background-color: #ffffff;
}
.switch::after {
  background: #ffffff;
}
.switch:checked {
  background-color: var(--main-color);
}




/* @end */

/* @group Plugins */
 hr {
 	display: none;
 }
 
 #plugin_zone_start_linklist {
 	margin: 1rem;
margin-top: 0;
 }
/* @group addlink */
.toolbar-plugin {
	display: grid;
  grid-template-columns: 1fr auto;
	gap:1rem;
	flex-direction: row;
	padding-top: 0rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
}
  .toolbar-plugin input {
margin: 0;
}


/* @end */

.favorite-tag {
	margin-right: 1ch;
	padding: .3ch;
	padding-left: 1ch;
	padding-right: 1ch;
	border-radius: 15px;
	background-color: var(--color01);
	transition: background 200ms ease-in-out 0s;
}

.favorite-tag:hover {
	background-color: var(--color10);
	color: var(--main-color);
}

/* @end */

@media (min-width: 768px) {
	body {
		display: grid;
		grid-template-columns: auto 2fr 2fr;
		/*		grid-template-rows: 1fr 2fr 2fr;*/
		gap: 0px 0px;
		grid-template-areas: "header main main"
	    "header main main"
	    "header footer footer";
		gap: 2rem;
	}
	
	#the-header {
		grid-area: header;
	}
	
	#content {
		grid-area: main;
		margin-right: 2rem;
		max-width: 100%;
	}
	
	#footer {
		align-self: end;
		grid-area: footer;
	}
	
	#the-header {
		position: relative;
		bottom: auto;
		width: auto;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: inherit;
		z-index: auto;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		background-color: var(--color10);
		padding-top: 2.4rem;
	}
	
	#nav-links {
		display: flex;
		font-size: inherit;
		position: sticky;
		top: 20px;
		min-width: 25rem;
		border-top: none;
	}
	
	#nav-links ul {
		height: -webkit-fill-available;
	}
	
	#nav-links li {
		border-bottom: none;
	}
	
	#nav-links li a {
		white-space: nowrap;
		padding-right: .8rem;
		padding-left: .8rem;
		margin-left: 1.6rem;
		margin-right: 1.6rem;
	}
	
	#nav-links li a#shaarli-menu-logout {
		
	}
	
	.nav_item_actions {
	justify-content: start;
}


	
	#icon-navbar {
		display: none;
	}
	
	#search {
		margin-top: 3.5rem;
	}
	
	.picwall-container {
		grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
		gap: 3rem;
	}
	
	.navigation {
		padding-left: 0;
	}
	
	.linklist-paging .options {
		padding-left: 0;
		padding-right: 0;
	}
	
	#linklist :target {
		border-radius: 1rem;
		border: 3px solid var(--color01);
	}
	
	#linklist header {
	display: flex;
	align-items: center;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
	
	#linklist h2 {
		font-weight: 300;
	}
	
	.linklist-item {
		font-size: 125%;
	}
	
	.footer-ours {
		margin-left: 0rem;
		margin-right: 0rem;
	}
	
	.link_footer {
	display: flex;
	justify-content: start;
}
	
	.subheader-form.open {
		position: fixed;
		width: 50rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 400;
		background-color: var(--color00);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.29);
		border-radius: 1rem;
		padding: 1rem;
		bottom: 20vh;
	}
	
	.tools-server section {
		background-color: var(--color10);
		padding: 2.4rem;
		margin-bottom: 2.4rem;
		border-radius: 2.4rem;
	}
	
	.tools-server h3 {
		margin-top: 0;
	}
	
	.tools-bookmarklets {
	display: block;
}
}
@media (prefers-color-scheme: dark) {
	:root {
		--main-color: #007AFF;
		--blank-color: rgb(201, 209, 217);
		--light-color: #1C1C1E;
		--dark-main-color: #186446;
		--translucide: rgba(255, 255, 255, 0.62);
		--color00: #1C1C1E;
		--color10: #313133;
		--color01: #2C2C2E;
		--color02: #3A3A3C;
		--color03: #BCBCC0;
		--color04: #AEAEB2;
		--color05: #8E8E93;
		--color06: #c8c8d2;
		--color07: rgb(201, 209, 217);
	}
	
	#the-header {
		background-color: var(--color01);
		box-shadow: none;
	}
	
	#nav-links li a:hover {
		background-color: var(--color02);
	}
	
	.bookmarklet-link {
		border: none;
		box-shadow: none;
	}
	.bookmarklet-link:hover {
		background-color: var(--color00);
		box-shadow: none;
	}
	
	.switch {
		background-color: var(--color03);
	}
	
	.switch::before {
		background-color: var(--color02);
	}
}