@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap');
	/* Dark Mode Toggle */
	#dark-mode-toggle { display: none; }
	.toggle {
	  display: inline-block;
	  width: 60px;
	  height: 30px;
	  background: var(--toggle-bg);
	  border:solid 2px var(--toggle-circle);
	  border-radius: 30px;
	  position: relative;
	  cursor: pointer;
	  transition: background 0.3s;
	}
	.toggle::before {
	  content: "🙂";/*🌞*/
	  position: absolute;
	  top: 1px;
	  left: 1px;
	  width: 24px;
	  height: 24px;
	  text-align: center !important;
	 line-height:26px;
	  background: var(--toggle-circle);
	  border-radius: 50%;
	  transition: transform 0.3s;
	}
	#dark-mode-toggle:checked + .toggle::before {
		content:"😴";/*🌙*/
		transform: translateX(30px);
	}
	/* end of dark-mode-toggle */
		
	body {
		font-family: "Ubuntu Sans", serif;
		font-optical-sizing: auto;
		font-weight: 300;
		font-style: normal;
		font-variation-settings: "wdth" 100;
		background-color: var(--main-bg);
		background: var(--main-bg-gradient);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		cursor: default;
		transition: background-color 0.3s, color 0.3s; /* optimisation pour le changement de thème */
		}
	
	.h5 sup { color: var(--h1-sup-text); }
	
	.icon::before {
		display: inline-block;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		}
	
	.flash-message {
		position: fixed;		
		left:320px;
		width: inherit;
		top: 8px;
		padding: .2em;
		padding-left: .6em;
		padding-right: .6em;
		z-index: 1000;
		border: solid 1px var(--flash-msg-border);
		opacity: 1;
		font-size: 9pt;
		
		}
	.flash-message i { font-size: 9pt !important; opacity: 1 !important; }
	.flash-message strong {
		display: block;
		border-radius: .4em;
		margin-top: .6em;
		margin-bottom: .6em;
		padding: .2em;
		background-color: var(--flash-msg-bg-strong);
		color: var(--flash-msg-txt-strong);
	}


form textarea.bg-notes:disabled { background-color: var(--notes-bg); color:var(--notes-txt); }



	/* BUTTON */
	.btn-block { width:100% !important; }
	.btn-group-xs > .btn, .btn-xs {
		padding: 1px 5px;
		font-size: 12px;
		line-height: 1.5;
		border-radius: 3px;
		}
	
	
	/* SIDEBAR */
	.dropdown-toggle { outline: 0; }

	.nav-flush .nav-link { border-radius: 0 !important; }



.btn-toggle {
  display: inline-flex;
  padding: .25rem .5rem;
  color: var(--sidebar-color);
  background-color: transparent;
  border: 0;
  
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: white;
  background-color: var(--sidebar-bg-menu);
  width:100%;
  text-align: left;
  transition: all .35s ease;
}

.btn-toggle::after {
	position:absolute;
	left: 220px !important;
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.8%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: var(--sidebar-color);
}
.btn-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  display: inline-flex;
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
  text-decoration: none;
  color: var(--sidebar-color) !important;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--sidebar-bg-menu);
  color: var(--btn-toggle-txt) !important;
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }

small.text-muted { font-size:60%; opacity: .6;}

.bg-notes {
	background-color: var(--notes-bg);
	border: solid 1px var(--notes-border);
	color: var(--notes-txt);
	box-shadow: inset 0px 0px 3px rgba(0,0,0,.1);
}
.bg-notes::selection {
  background: var(--notes-sel-bg);
  color: var(--notes-sel-txt);
}

.terminal {
	background-color: var(--terminal-bg);
	color:var(--terminal-txt);
	font-family: monospace;
	font-size:8pt;
	overflow-x: hidden;
	overflow-y: auto;
	max-height:200px !important;
}
.terminal::selection {
	background-color: var(--terminal-sel-bg);
	color: var(--terminal-sel-txt);
}

.emoji { display:block; font-size:32pt; text-align: center; margin-bottom:-0.3em !important; }

.modal-footer {
	border-top:solid 1px rgba(0,0,0,.1) !important;
}



.title {
	font-size:11pt;
	font-variant: capitalize;
	font-family: monospace;
	color:var(--title-txt);
	margin:0;
	padding:0;
}
.subtitle {
	font-size:10pt;
	color: var(--subtitle-txt);
}


/* ---------------------------------------------------
	TABLES
----------------------------------------------------- */

#content table.table { font-size: 11pt; border: solid 1px transparent; }
#content table.table td, #content table.table th { border: solid 1px transparent; }
#content table.table tbody td { padding: .4em; }
#content table.table thead tr th {	background: var(--table-head-bg); color: var(--table-head-txt) !important; }
#content table.table thead th:first-child {	border-top-left-radius:1em !important; }
#content table.table thead th:last-child { border-top-right-radius:1em !important; }
#content table.table tbody tr td { background: var(--table-body-bg) !important; color: var(--table-body-txt) !important; }
#content table.table tbody tr:last-child td:first-child { border-bottom-left-radius:1em !important; }
#content table.table tbody tr:last-child td:last-child { border-bottom-right-radius:1em !important; }
/* end of table */


/* ---------------------------------------------------
	BOOTSTRAP-TABLE PAGINATION
----------------------------------------------------- */
.pagination .page-item a.page-link { color: var(--pagination-txt); }
.pagination .page-item.active a.page-link { background-color:var(--pagination-sel-bg); border:solid 1px rgba(0,0,0,.3); color:var(--pagination-sel-txt); }
.page-list button.btn.btn-secondary.dropdown-toggle { background-color:var(--pagination-dropdown-bg); padding:.2em; color:var(--pagination-dropdown-txt); }
.page-list a.active, .page-list a:focus { background-color:var(--pagination-focus-bg); color:var(--pagination-focus-txt); }
/* end of bootstrap-table pagination */


/* PROGRESS CIRCLE */
.progress-circle {
		width: 26px;
		height:26px;
		text-align:center;
		padding-top: 3px;
		margin:.2em;
		margin-left:1em;
		font-family: monospace;
		font-size: 11pt;
		font-weight: 800;
		color: var(--progress-txt);
		border-radius:50%;
	}
a.text-light, a.text-dark {
	text-decoration: none;
	padding: .1em;
	padding-left: .2em;
	padding-right: .2em;
	border-radius: .2em;
	border:solid 1px transparent;
	}
a.text-light:hover, a.text-dark:hover {
	background-color: var(--link-hover-bg);
	border: solid 1px var(--link-hover-border);
	transition: all .4s linear;
	}
.progress-circle-lg {
	display:inline-block;
	width: 40px;
	height: 40px;
	font-size:14pt;
	padding-top: 6px;
	}
.progress-circle-lg::after {
	font-size:10pt;
	color:var(--progress-lg-txt);
	}
/* end of progress-circle */

#submitDone, #submitUndone, #submitDelete { display:none; }
	
.badge-type {
	font-size: 14pt;
	font-weight: 200 !important;
	padding:.1em;
	padding-top: .4em;
	padding-left:.6em;
	padding-right:.6em;
	margin:0;
	color: var(--badge-type-txt) !important;
	vertical-align: top;
	}
	
.badge-xs {
	font-size: 9pt;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	float:right;
	}


/* iOS 7 Style from http://codepen.io/Hack_iOS7/pen/xbhGK?editors=110 */
.ui-switch { margin: 7px auto;-webkit-appearance: none;outline: 0;border: none;cursor: pointer;position: relative;display: block;width: 51px;height: 31px;border-radius: 15px;background-color: #ddd;transition: .6s ease; }
.ui-switch:before { content: "";z-index: 100;display: block;width: 47px;height: 27px;position: absolute;right: 2px;top: 2px;border-radius: 15px;background-color: white;transition: .4s ease; }
.ui-switch:after { content: "";z-index: 200;position: absolute;left: 2px;top: 2px;width: 27px;height: 27px;background-color: white;border-radius: 29px;box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.35), 0px 4px 5px rgba(0, 0, 0, 0.15);transition: .4s ease; }
.ui-switch:checked { background-color: #43b33f; }
.ui-switch:checked.default { background-color: #43b33f; }
.ui-switch:checked:before { width: 12px;height: 0px;top: 15px;right: 15px; }
.ui-switch:checked:after { left: 22px; }
.ui-switch:checked:active:after { margin-left: -5px; }
.ui-switch:active:after { padding-left: 5px; }
.ui-switch:hover:after { width:32px;padding-left: 5px; }
.ui-switch:checked:hover:after { margin-left: -5px; }
/* end of iOS 7 style */
	

/* ALERTS */
.alert, .card {
	border:solid 2px rgba(0,0,0,.1);
}
/* end of alerts */



/* ---------------------------------------------------
	SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
	display: flex;
	width: 100%;
	align-items: stretch;
	perspective: 1500px;
}
#content {
	width: 100%;
	padding: 20px;
	min-height: 100vh;
	/* transition: all 0.3s; */
	}
	
/* #content .navbar .text-center { color: var(--topbar-color) !important; text-shadow:none !important;} */
#content .navbar span { color: var(--topbar-color) !important; }

.sidebar-header { background-color: var(--sidebar-header-bg-color) !important; }

#content .navbar {
	margin-top:-20px !important;
	margin-left:-20px !important;
	margin-right:-20px !important;
	padding:0 !important;
	height:42px !important;
	line-height: 42px;
	color: var(--topbar-color) !important;
	text-shadow: var(--topbar-shadow);
	background-color: var(--topbar-bg-color);
	margin-bottom: 2rem !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	}

.navbar-btn {
	box-shadow: none;
	outline: none !important;
	border: none;
	}


#sidebar {
	min-width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	background: var(--sibebar-bg-color);
	color: var(--sibebar-color);
	
	transform-origin: bottom left;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	
	}
	
#sidebar.active {
	margin-left: calc(var(--sidebar-width) * -1 ) !important;
	transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
	transform: rotateY(100deg);
	}

#sidebar a, #sidebar a:hover, #sidebar a:focus {
	color: inherit;
	text-decoration: none;
	transition: all 0.5s;
	}


#sidebar ul.components { padding: 0px; }
#sidebar ul li a { padding: 10px; display: flex; }
#sidebar ul li a:hover, #sidebar ul li a.active { color: var(--sidebar-hover-color); }
#sidebar ul li.active > a, a[aria-expanded="true"] { color: var(--sidebar-active-color); }
#sidebar ul li.active > a:hover, a[aria-expanded="true"]:hover { color: var(--sidebar-active-color); }
#sidebar a[data-bs-toggle="collapse"] { /*position: relative;*/ border-radius: 0 !important; }
#sidebar ul.components li .btn-toggle { border-radius: 0 !important; }
#sidebar ul.components li:hover .btn-toggle, #sidebar ul.components li.active:focus .btn-toggle { color: var(--sidebar-active-color) !important; }
#sidebar ul.components li .btn-toggle::after {
	font: var(--fa-font-solid);
	content: '\f054';
	vertical-align: middle;
	color:var(--btn-toggle-txt) !important;
	}


	
#sidebar a.link-dark { margin-left:0; padding-left:32px; }
#sidebar a.link-dark:hover, #sidebar a.link-dark.active { color:var(--sidebar-active-color) !important; }
#sidebar .dev {
	/* pour affichage d'une version alpha ou beta */
	font-size:9pt;
	color:rgb(223, 64, 64);
	font-weight: bolder;
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	margin-left: 1.4em;
	padding: .2em .4em .2em .4em;
	text-transform: uppercase;
	border: solid 2px rgb(223, 64, 64);
	border-radius: 6px;
	transform: rotate(5deg);
	box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

	
#sidebar ul li ul { background-color: var(--sidebar-sub-bg); }
#sidebar ul li ul li { background-color: var(--sidebar-sub-bg); }
#sidebar ul li a i {
	width: 32px;
	height:32px;
	color: var(--sidebar-icon-color);
	font-size:22px;
	}


#sidebar .copyright {
	position:fixed;
	bottom:2em;
	left:0;
	right:0;
	width: var(--sidebar-width);
	margin:0;
	padding:0;
	text-align:center;
	font-size:11pt;
	font-weight: 100 !important;
	}
#sidebar .copyright:hover { color:var(--sidebar-hover-color) !important; }

/* bouton pour masquer la sidebar */
#sidebarCollapse {
	display:block;
	position:relative;
	margin-left:-10px;
	top:4px;
	width: 42px;
	height: 42px;
	background: transparent;
	cursor: pointer;
	z-index:1000;
	}

#sidebarCollapse span {
	width: 90%;
	height: 2px;
	margin: 0 auto;
	display: block;
	background: var(--sidebar-collapse-color);
	transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
	transition-delay: 0.2s;
	}
#sidebarCollapse span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
#sidebarCollapse span:nth-of-type(2) { opacity: 0; }
#sidebarCollapse span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
#sidebarCollapse.active span { transform: none; opacity: 1; margin: 8px auto; }
/* end of sidebar styles */

.todo {
	/* min-height: 18rem;
	max-height: 18rem; */
	background-color: var(--notes-bg);
	color: var(--notes-txt) !important;
	}
.todo-add {
	background-color: var(--notes-bg);
	}
.todo-date{
	color:rgba(0,0,0,.6);
	text-align:right;
	font-style:italic;
	}
.todo h6 a {
	color: var(--notes-txt) !important;
	text-decoration: none;
}
.todo h6 a:hover { text-decoration: underline; transition: all ease-in-out .3s !important; }
.todo .content {
	overflow-x: hidden;
	overflow-y: auto;
	max-height:12rem;
	}
.todo .text-sm { font-size: 76%; color:var(--notes-txt); }


/* ---------------------------------------------------
	MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
	#sidebar { margin-left: calc(var(--sidebar-width) * -1 ); transform: rotateY(90deg); }
	#sidebar.active { margin-left: 0 !important; transform: none; }
	#sidebarCollapse span:first-of-type,
	#sidebarCollapse span:nth-of-type(2),
	#sidebarCollapse span:last-of-type { transform: none; opacity: 1; margin: 5px auto; }
	#sidebarCollapse.active span { margin: 0 auto; }
	#sidebarCollapse.active span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
	#sidebarCollapse.active span:nth-of-type(2) { opacity: 0; }
	#sidebarCollapse.active span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	body { font-size:120%; }
	}


/* ---------------------------------------------------
	CONTENT STYLE
----------------------------------------------------- */
#content {
	width: 100%;
	padding: 20px;
	min-height: 100vh;
	transition: all 0.8s ease !important;
	}