@import url('settings.css');

html,
body {
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: relative;
}

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

*[tooltip] {
	position: relative;
}

*[tooltip]::after {
	content: attr(tooltip);
	position: absolute;
	background-color: var(--ColorBackground);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	box-shadow: var(--Shadow);
	border-radius: var(--BorderRadius);
	font-size: 0.875rem;
	font-family: var(--FontPrincipale);
	padding: 10px;
	color: var(--ColorText);
	font-weight: normal;
	text-align: center;
	z-index: -1;
	opacity: 0;
	transition: opacity ease-in-out 0.3s;
}

*[tooltip]:hover::after {
	z-index: 1000;
	opacity: 1;
}

*[tooltip-direction="top"]::after {
	left: 50% !important;
	transform: translate(-50%, -150%) !important;
}

*[tooltip-direction="bottom"]::after {
	left: 50% !important;
	top: 120% !important;
	transform: translate(-50%, 0%) !important;
}

*[tooltip-direction="left"]::after {
	left: 100% !important;
	transform: translate(-115%, -50%) !important;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 1300px;
	width: 100%;
	margin: auto;
	gap: var(--Gap);
}

img {
	max-width: 100%;
}

.screen {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 0px 10px #00000020;
}

p {
	margin: 0px;
}

.certif.fad.fa-badge-check {
	margin-left: 5px;
}

.certif.fad.fa-badge-check:after {
	color: #64c3ee !important;
	opacity: 1 !important;
}

.certif.fad.fa-badge-check:before {
	color: white !important;
}

a {
	color: var(--ColorLink);
	text-decoration: none;
	width: fit-content;
}

.text-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block !important;
	text-align: left !important;
	max-width: 250px;
}

.cls-1 {
	fill: var(--ColorText) !important;
	transition: var(--Transition);
}

.cls-2,
.cls-3,
.cls-4,
.cls-5 {
	fill: var(--ColorTitre) !important;
	transition: var(--Transition);
}

.margin-left-auto {
	margin-left: auto;
}

.margin-right-auto {
	margin-right: auto;
}

.overflow-auto {
	overflow: auto;
}

.row.no-wrap {
	flex-wrap: nowrap;
}

.dragging {
	opacity: 0.5;
}

.canvas {
	position: relative;
	width: 100%;
	height: 300px;
}

body {
	font-family: var(--FontPrincipale);
	font-size: var(--FontSize);
	color: var(--ColorText);
	background: var(--ColorBody);
	transition: var(--Transition);
	background-attachment: fixed;
}

.titre {
	font-family: var(--FontFocus);
	font-weight: bold;
	margin: 0px;
	font-size: var(--FontSize-xl);
	text-align: center;
	text-transform: uppercase;
}

.titre span {
	font-size: inherit;
	color: var(--ColorTitre);
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	flex: 1 0 0%;
	gap: var(--Gap);
}

.column {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1 0 0%;
	align-items: center;
	justify-content: center;
	gap: var(--Gap);
}

.block {
	padding: 1rem;
	border-radius: var(--BorderRadius);
	background-color: var(--ColorContainer);
	box-shadow: var(--Shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	backdrop-filter: var(--Blur);
	width: 100%;
	flex: 1 0 0%;
	gap: var(--Gap);
}

.block.stats strong {
	font-size: var(--FontSize-m);
	color: var(--ColorTitre);
}

.block.disabled {
	opacity: 0.6;
	pointer-events: none;
}

.block .header {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}

.block .header h2 {
	margin: 0px;
	font-size: var(--FontSize-m);
	font-weight: bold;
	text-transform: initial;
}

.block .fad:not(.certif) {
	color: var(--ColorFadIcon);
	background-color: var(--ColorFadIcon10);
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	font-size: var(--FontSize-l);
}

.align-items-start {
	align-items: flex-start;
}

.align-items-end {
	align-items: flex-end;
}

.align-items-stretch {
	align-items: stretch;
}

.align-items-center {
	align-items: center;
}

.justify-content-start {
	justify-content: flex-start;
}

.justify-content-end {
	justify-content: flex-end;
}

pre,
textarea {
	white-space: pre-wrap;
	font-family: var(--FontPrincipale);
	margin: 0px;
	width: 100%;
}


.trait {
	height: 2px;
	width: 100%;
	background-color: var(--ColorText);
	opacity: 0.1;
	border-radius: 50px;
	margin: 10px 0px;
}


form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0px;
	gap: var(--Gap);
	width: 100%;
	flex: 1 0 0%;
}

label:not(.btn, .radio) {
	flex: 1 0 0%;
	width: 100%;
	text-align: left;
}

.form-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	gap: var(--Gap);
}

.form-row .column {
	align-items: flex-start;
	gap: calc(var(--Gap) / 2);
}

.form-row .column span {
	font-size: 0.875rem;
}

.form-row .column span.optional {
	opacity: 0.8;
}

.btn-actions-row p {
	margin-bottom: 10px;
}

.btn-actions-row a,
.btn-actions-row button {
	flex: 1 0 calc(50% - var(--Gap));
}

.form-checkbox {
	align-items: flex-start;
}

input[type="checkbox"] {
	width: 15px;
	padding: 0px;
	margin: 0px;
}

input[type="checkbox"]:checked {
	background-color: var(--ColorRed);
}

.form-checkbox label {
	flex: 1 0 0%;
	margin: 0px;
}

.col-1 {
	flex: 1 0 100%;
}

.col-2 {
	flex: 1 0 0%;
}

.items {
	flex: 1 0 0%;
}

.captcha img {
	width: 100%;
	border-radius: var(--BorderRadius);
}

input:not([type="checkbox"]),
textarea,
select {
	border: none;
	background-color: var(--ColorRow);
	color: var(--ColorText);
	width: 100%;
	flex: 1 0 0%;
	padding: 0.5rem 0.5rem;
	border-radius: var(--BorderRadius);
	font-size: var(--FontSize);
	margin: 0px;
	outline: none;
	border: solid 1px transparent;
}

select option {
	color: var(--ColorText);
	background-color: var(--ColorBackground);
}

input:not([type="checkbox"], [type="range"]),
textarea,
.selecteur-langue select {
	appearance: none;
}

::placeholder {
	color: var(--ColorText);
	opacity: 0.8;
}

.checkbox {
	justify-content: flex-start;
}

column.check {
	border-color: var(--ColorGreen) !important;
}

column.notcheck {
	border-color: var(--ColorRed) !important;
}

column.check span {
	color: var(--ColorGreen);
	flex: 1 0 100%;
}

column.notcheck span {
	color: var(--ColorRed);
	flex: 1 0 100%;
}

.info_mdp {
	flex-direction: column;
	align-items: flex-start;
	gap: calc(var(--Gap) / 2);
	font-size: 0.875rem;
}

.info_mdp h3 {
	font-size: var(--FontSize);
	margin: 0px 0px 0px 0px;
}

.info_mdp > p {
	transition: var(--Transition);
}

.info_mdp p i {
	margin-right: 5px;
	transform: scale(0);
	transition: transform var(--Transition);
}

.info_mdp p.check {
	color: var(--ColorGreen);
}

.info_mdp p.check i {
	transform: scale(1);
}


textarea {
	resize: none;
	height: 100px;
	flex: unset;
}


.form-row .checkbox {
	margin: 0px;
	width: initial;
}

.form-row #MDPLost {
	width: initial;
}

.InputIcon {
	width: 100%;
	position: relative;
}

.InputIcon input {
	flex: 1 0 0%;
}

.InputIcon i {
	width: 20px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translate(0, -50%);
}

.InputIcon span {
	font-size: var(--FontSize-s);
}

span {
	font-size: var(--FontSize);
	width: 100%;
	text-align: left;
}

span a {
	color: var(--ColorLink);
	text-decoration: none;
	font-size: inherit;
}

#actions-absolute {
	position: fixed;
	z-index: 99;
	right: -40px;
	top: 60px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

#actions-absolute a,
#actions-absolute button {
	font-size: var(--FontSize-s);
	vertical-align: middle;
	text-decoration: none;
	font-weight: bold;
	font-family: var(--FontPrincipale);
	padding: 8px 75px 8px 16px;
	border-radius: 50px 0px 0px 50px;
	box-shadow: var(--Shadow);
	transition: var(--Transition);
	border: none;
	margin: 0px -20px 10px 0px;
	backdrop-filter: var(--Blur);
}

#actions-absolute span {
	margin-right: 5px;
	font-size: var(--FontSize-s);
}

#actions-absolute a:hover,
#actions-absolute button:hover {
	margin-right: 0px;
	transition: var(--Transition);
}

#actions-absolute a,
#actions-absolute button {
	background-color: var(--ColorContainer);
	color: var(--ColorText);
}

button {
	cursor: pointer;
}

.btn-index {
	padding: 10px 18px;
	border-radius: 50px;
	font-family: var(--FontFocus);
	text-transform: uppercase;
	text-decoration: none;
	transition: var(--Transition);
	border: none;
	text-align: center;
	border: solid 2px;
	font-size: var(--FontSize);
	backdrop-filter: var(--Blur);
	font-weight: 900;
}

.btn-index {
	color: var(--ColorContainer);
	background-color: var(--ColorText);
	border-color: var(--ColorText);
}

.btn-index:hover {
	color: var(--ColorText);
	background-color: transparent;
}

.btn-arrow::after {
	content: "➜";
	margin-left: 10px;
	transition: var(--Transition) !important;
	transition-property: margin-left;
	color: var(--ColorContainer);
}

.btn-arrow:hover::after {
	margin-left: 20px;
	color: var(--ColorText);
}

.row-switch {
	margin-bottom: 5px;
	justify-content: center;
}

.row-switch p {
	margin-right: 10px;
}

.row-switch p::after {
	content: ' :';
}

.row-filters {
	width: unset;
	display: flex;
	justify-content: center;
	align-items: center;
}

.row-filters p {
	margin-right: 10px;
	white-space: nowrap;
}

.filter {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.filter span {
	cursor: pointer;
	background-color: transparent;
	padding: 0px 10px;
	color: var(--ColorBlue);
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--BorderRadius);
	transition: var(--Transition);
}

.filter span:hover {
	background-color: var(--ColorBlue10);
	color: var(--ColorBlue);
}

.filter.active span {
	background-color: var(--ColorBlue);
	color: var(--ColorTextBtn);
}

.filter.active span:hover {
	background-color: var(--ColorBlue2);
	color: var(--ColorTextBtn);
}

.switch,
.radio {
	display: flex;
	gap: var(--Gap);
	cursor: pointer;
}

.switch input,
.radio input {
	display: none;
}

.radio span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--Gap);
	padding: 0.5rem 1rem;
	color: var(--ColorText);
	background-color: var(--ColorContainer);
	border-radius: var(--BorderRadius);
	width: fit-content;
}

.radio span i {
	margin: 0px;
}

.switch span,
.old_switch {
	transition: var(--Transition);
	width: 35px;
	height: 20px;
	border-radius: 50px;
	cursor: pointer;
	background-color: var(--ColorBackground);
	position: relative;
	display: block;
}

.switch span::before,
.old_switch .dot {
	content: '';
	height: 16px;
	width: 16px;
	background-color: white;
	border-radius: 50px;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: var(--Transition);
}

.switch input:checked + span,
.old_switch.Selected {
	background-color: var(--ColorGreen);
	transition: var(--Transition);
}

.radio input:checked + span {
	background-color: var(--ColorBlue10);
	color: var(--ColorBlue);
	transition: var(--Transition);
}

.switch.blue input:checked + span {
	background-color: var(--ColorBlue);
}

.switch.red input:checked + span {
	background-color: var(--ColorRed);
}

.switch input:checked + span::before,
.old_switch.Selected .dot {
	left: calc(100% - 18px);
	transition: var(--Transition);
}

.switch input:disabled + span {
	opacity: 0.4;
}

.btn {
	border: none;
	padding: 0.5rem 2rem;
	border-radius: var(--BorderRadius);
	font-weight: bold;
	font-size: var(--FontSize);
	text-decoration: none;
	outline: none;
	font-family: var(--FontPrincipale);
	transition: var(--Transition);
	text-align: center;
	box-shadow: var(--Shadow2);
	cursor: pointer;
	backdrop-filter: var(--Blur);
	color: var(--ColorText);
	background-color: var(--ColorContainer);
	white-space: nowrap;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.btn.icon-only {
	padding: 0.5rem 1rem;
}

.btn.btn-valid:not(.block) {
	background-color: var(--ColorGreen);
	color: var(--ColorTextBtn);
}

.btn.btn-valid:hover {
	background-color: var(--ColorGreen2);
	transition: 0.3s;
}

.btn.btn-stats:not(.block) {
	background-color: var(--ColorOrange);
	color: var(--ColorTextBtn);
}

.btn.btn-stats:hover {
	background-color: var(--ColorOrange2);
	transition: 0.3s;
}

.btn.btn-edit:not(.block) {
	background-color: var(--ColorBlue);
	color: var(--ColorTextBtn);
}

.btn.btn-edit:hover {
	background-color: var(--ColorBlue2);
	transition: var(--Transition);
}

.btn.btn-supp:not(.block) {
	background-color: var(--ColorRed);
	color: var(--ColorTextBtn);
}

.btn.btn-supp:hover {
	background-color: var(--ColorRed2);
	transition: var(--Transition);
}

}

.block .btn {
	background-color: var(--ColorRow);
}

.btn-round {
	background-color: var(--ColorBackground);
	border-radius: 100%;
	border: none;
	color: var(--TextColor);
	height: 30px;
	width: 30px;
}

.btn-slider {
	height: 30px;
	width: 30px;
	background-color: transparent;
	color: var(--ColorText);
	border: solid 2px var(--ColorText);
	border-radius: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	transition: var(--Transition);
	backdrop-filter: var(--Blur);
}

.btn-slider:not(:disabled):hover {
	background-color: var(--ColorText);
	color: var(--ColorContainer);
}

.hyperlien {
	color: var(--ColorLink);
}

button.hyperlien {
	background: unset;
	padding: unset;
	border: unset;
	font-size: 1rem;
}

.btn-profil {
	color: var(--ColorText);
	background-color: var(--ColorBackground);
	padding: 8px 16px;
	border-radius: 20px;
	border: none;
	font-size: var(--FontSize);
}

.btn-profil i {
	margin-right: 5px;
}

.block.select {
	border: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: var(--FontSize);
	background-color: var(--ColorContainer) !important;
	margin-top: 0px;
	padding: 0.5rem 1rem;
	width: unset;
	flex: unset;
}

.block.select select {
	padding: 0px;
	background-color: transparent;
}


.btn-cancel {
	border: none;
	background-color: transparent;
	font-size: var(--FontSize);
	font-family: var(--FontPrincipale);
	width: initial !important;
	transition: var(--Transition);
	text-align: center;
	cursor: pointer;
}

.btn-cancel {
	color: var(--ColorText);
}

.btn-cancel:hover {
	opacity: 0.4;
	transition: var(--Transition);
}

.btn-visit {
	padding: 10px 10px;
	height: 40px;
	width: 40px;
	border-radius: 50px;
	font-weight: bold;
	font-size: var(--FontSize);
	text-decoration: none;
	outline: none;
	box-shadow: var(--Shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--Transition);
	text-align: center;
	border: solid 1px var(--ColorBackground);
	background-color: var(--ColorBackground);
	color: var(--ColorText);
}

.btn-visit i {
	transition: var(--Transition) !important;
}

.btn-visit:hover i {
	transform: rotate(90deg);
}

.paginator {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.paginator .page-selector,
.paginator .limit-selector {
	display: flex;
	flex-direction: row;
}

.paginator .limit-selector {
	display: flex;
	flex-direction: row;
}

.paginator .page-selector a,
.paginator .limit-selector a {
	padding: 8px;
	background-color: var(--ColorRow);
}

.paginator .page-selector a:not([disabled]):hover,
.paginator .limit-selector a:not([disabled], .active):hover {
	background-color: var(--ColorRowHover);
}

.paginator .limit-selector a.active {
	background-color: var(--ColorBlue10);
	color: var(--ColorBlue)
}

.paginator .limit-selector a:first-child,
.paginator .page-selector a:first-child {
	border-radius: var(--BorderRadius) 0 0 var(--BorderRadius);
}

.paginator .limit-selector a:last-child,
.paginator .page-selector a:last-child {
	border-radius: 0 var(--BorderRadius) var(--BorderRadius) 0;
}

.paginator * {
	color: var(--ColorText);
}

.paginator .page {
	background-color: var(--ColorRow);
	padding: 8px 10px;
}

.end {
	justify-content: flex-end;
}

.btn-download {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #21212130;
	top: 0px;
	left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--Transition);
	opacity: 0;
}

.btn-download a,
.btn-download button {
	margin: 0px !important;
	width: 40px;
	height: 40px;
	border-radius: 100% !important;
	padding: 0px !important;
	margin: 0px 5px !important;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--Transition);
}

.btn-download a i,
.btn-download button i {
	font-size: var(--FontSize-s) !important;
	width: unset !important;
	margin-right: 0px !important;
}


.margin-left {
	margin-left: 20px;
}

.margin-right {
	margin-right: 20px;
}

.badges {
	padding: 4px 10px;
	border-radius: 8px;
	font-weight: 800;
	width: unset;
	font-size: var(--FontSize) !important;
	vertical-align: middle;
	background-color: var(--ColorText10);
	color: var(--ColorText);
	backdrop-filter: var(--Blur);
	white-space: nowrap;
	position: relative;
}

.badges i {
	margin-right: 8px;
}

.badges.dot::before {
	content: '•';
	margin-right: 8px;
}

.badges.green {
	background-color: var(--ColorGreen10);
	color: var(--ColorGreen);
}

.badges.orange {
	background-color: var(--ColorOrange10);
	color: var(--ColorOrange);
}

.badges.red {
	background-color: var(--ColorRed10);
	color: var(--ColorRed);
}

.badges.blue {
	background-color: var(--ColorBlue10);
	color: var(--ColorBlue);
}

*[disabled] {
	opacity: 0.4;
}

.SearchTarget {
	border: solid 3px var(--ColorLink);
	order: -10000;
}

.error {
	color: var(--ColorRed);
}

section.account {
	padding: 4rem 3rem 4rem 3rem;
	min-height: 100vh;
}

section.landing {
	padding: 4rem 0rem;
}

#certification {
	width: 18px;
	margin: 0px 0px 0px 5px;
}

.mini-menu {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
}

.mini-menu #clearsearch {
	margin: 0px;
	position: absolute;
	top: 50%;
	transform: translate(0px, -50%);
	right: 5rem;
	color: var(--ColorText);
}

.mini-menu button {
	margin: unset;
}

.mini-menu form {
	width: 350px;
	flex: unset;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	position: relative;
}

.mini-menu form input {
	flex: 1 0 0%;
	padding: 10px;
	box-shadow: var(--Shadow);
}

.mini-menu form input {
	background-color: var(--ColorContainer);
	margin: 0px;
}

.nbr-vues.skeleton,
.nbr-plus.skeleton {
	display: flex;
	border-radius: var(--BorderRadius);
	overflow: hidden;
	margin-left: 5px;
	position: relative;
}

.skeleton::before {
	content: '';
	display: block;
	background-color: var(--ColorBackground);
	position: absolute;
	left: 0px;
	top: 0px;
}

.skeleton::after {
	content: '';
	display: block;
	background: linear-gradient(to left, var(--ColorText10), var(--ColorText10));
	position: absolute;
	left: 0px;
	top: 0px;
	border-radius: var(--BorderRadius);
	animation-name: skeleton;
	animation-iteration-count: infinite;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
}

.nbr-vues.skeleton,
.nbr-vues.skeleton::before,
.nbr-vues.skeleton::after {
	height: 20px;
	width: 120px;
}

.nbr-plus.skeleton,
.nbr-plus.skeleton::before,
.nbr-plus.skeleton::after {
	height: 20px;
	width: 80px;
}

.container-password {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0px;
	margin: 0px 0px 0px 0px;
}

.no-link {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--Gap);
	margin: 0px;
}

.block .no-link {
	margin: 0px;
}

.container-password .no-link {
	margin: 100px 0px 0px 0px;
}


.no-link > i {
	font-size: var(--IconSize-l);
	color: var(--ColorText);
	background-color: var(--ColorContainer);
	padding: 0px;
	border-radius: 100%;
	box-shadow: var(--Shadow);
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block .no-link > i {
	background-color: var(--ColorBackground);
}

.no-link h2 {
	font-size: var(--FontSize-l);
	margin: 0 0px;
}

.no-link h3 {
	margin: 10px 0px;
}

.no-link > p {
	margin: 0px 0px 0px 0px;
	text-align: center;
	width: 100%;
}

.no-link ul {
	padding: 0px;
	margin: 0px;
	width: 600px;
}

.no-link ul li,
.no-link ul .block {
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10px;
}

.no-link ul li i {
	font-size: 30px;
	width: 45px;
	margin-right: 10px;
	display: flex;
	justify-content: center;
}

.no-link ul li p {
	text-align: left;
	width: 100%;
	margin: 0px;
}

.no-link form.password {
	width: 400px;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.no-link form.password input {
	margin: 0px;
	width: calc(100% - 40px - 20px);
	height: 40px;
}

.no-link form.password button {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px !important;
	height: 40px;
	width: 40px;
}

.no-link form.password button i {
	margin-right: 0px !important;
}

.no-link form.password span {
	width: 100%;
	margin-top: 20px;
	text-align: center;
	font-size: var(--FontSize-s);
}

@media screen and (max-width: 600px) {
	.no-link {
		text-align: center;
	}

	.no-link form {
		width: 100%;
	}
}

.scale {
	transition: var(--Transition);
}

.scale:hover {
	transform: scale(1.02);
	transition: var(--Transition);
}

.lien-alerte {
	color: var(--ColorRed);
}

.ghost {
	background-color: var(--ColorContainer);
	background-image: linear-gradient(45deg, var(--ColorRow) 25%, transparent 0, transparent 50%, var(--ColorRow) 0, var(--ColorRow) 75%, transparent 0, transparent);
	background-size: 1rem 1rem;
}

.ghost img {
	opacity: 0.5;
}

.selected {
	background-color: var(--ColorBlue);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .15) 0, rgba(255, 255, 255, .15) 75%, transparent 0, transparent);
	background-size: 1rem 1rem;
}

.selected img {
	opacity: 0.5;
}

.custombox {
	height: 20px;
	width: 20px;
	border-radius: 5px;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custombox i {
	color: white;
	font-size: 10px;
	transform: scale(0);
}

.custombox {
	border: solid 2px var(--ColorText);
}


.Selected .custombox {
	opacity: 1;
}

.Selected .custombox {
	background-color: var(--ColorBlue) !important;
	border: solid 2px var(--ColorBlue) !important;
}

.Selected .custombox i {
	transform: scale(1);
}

.notification {
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	display: none;
	align-items: center;
	justify-content: center;
	top: -5px;
	right: -5px;
	background-color: var(--ColorRed);
	border-radius: 50px;
	color: white !important;
	font-size: var(--FontSize-s) !important;
	z-index: 10;
}

.pulse.notification::after {
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: var(--ColorRed);
	z-index: -1;
	border-radius: 50px;

	animation-name: Pulse;
	animation-duration: 3s;
	animation-play-state: running;
	animation-iteration-count: infinite;
}

@keyframes Pulse {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0;
		transform: scale(3);
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}

#update-confirm-dialog {
	display: flex;
	flex-direction: column;
	gap: var(--Gap);
}

.notif,
#update-confirm-dialog {
	position: fixed;
	transform: translate(-50%, 0px);
	left: 50%;
	z-index: 1000;
	bottom: 2rem;
	background-color: var(--ColorContainer);
	padding: 1rem;
	margin: 0px 0px 0px 0px;
	border-radius: var(--BorderRadius);
	box-shadow: var(--Shadow);
	transition: var(--Transition);
	backdrop-filter: var(--Blur);
	opacity: 1;
}

#update-confirm-dialog.hide {
	transform: translateY(100%);
	opacity: 0;
	z-index: -10;
}

.notif .row {
	align-items: center;
	flex-wrap: nowrap;
	margin: 0px !important;
	padding: 0px !important;
	width: 100% !important;
}

.notif .row i {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.25rem;
	padding: 10px;
	border-radius: 50%;
	margin: 0px;
	width: 3rem;
	height: 3rem;
	color: white;
}

.notif .row .column {
	align-items: flex-start !important;
	margin: 0px !important;
	padding: 0px !important;
	flex: 1 0 0%;
}

.notif p {
	margin: 0px;
}

.notif .row .column a {
	font-size: var(--FontSize-s);
	margin-top: 5px;
}

.notif.erreur .row i {
	background-color: var(--ColorRed);
}

.notif.succes .row i {
	background-color: var(--ColorGreen);
}

.notif.edit .row i {
	background-color: var(--ColorBlue);
}

.notif.attente .row i {
	background-color: var(--ColorOrange);
}

.container-progress {
	width: 100%;
	height: 0.5rem;
	background-color: var(--ColorBackground);
	border-radius: 20px;
}

.container-progress .progress {
	height: 100%;
	background-color: var(--ColorBlue);
	border-radius: 20px;
}

.row-progress-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 10px;
	width: 100%;
}

.container-progress-bar {
	width: calc(100% - 50px);
	height: 10px;
	background-color: var(--ColorBackground);
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}

.container-progress-bar.container-progress-bar-input {
	width: 100%;
	height: 20px;
	cursor: pointer;
}

.container-progress-bar .progress-bar,
.container-progress-bar #trustLevelProgress {
	height: 100%;
	background-color: var(--ColorBlue);
	transition: background-color 0.3s ease-in-out;
}

.container-progress-bar .progress-bar.red,
.container-progress-bar #trustLevelProgress.red {
	background-color: var(--ColorRed);
}

.container-progress-bar .progress-bar.yellow,
.container-progress-bar #trustLevelProgress.yellow {
	background-color: var(--ColorYellow);
}

.container-progress-bar .progress-bar.green,
.container-progress-bar #trustLevelProgress.green {
	background-color: var(--ColorGreen);
}


input[type="range"] {
	cursor: pointer;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	padding: 0px;
	margin: 0px !important;
	height: 100%;
	width: 100%;
	opacity: 0;
}

.facebook {
	background-color: #3b5998 !important;
}

.twitter {
	background-color: #1DA1F2 !important;
}

.linkedin {
	background-color: #0a66c2 !important;
}

.whatsapp {
	background-color: #00e676 !important;
}

.copied {
	position: relative;
}

.copied::before {
	content: attr(text-copied);
	position: absolute;
	background-color: var(--ColorGreen2);
	font-weight: bold;
}

.copied-side.copied {
	border-radius: 0px 10px 10px 0px;
}

.copied-side.copied::before {
	transform: translate(0%, -50%);
	top: 50%;
	right: 100%;
	padding: 0.5rem 1rem;
	border-radius: 10px 0px 0px 10px;
	height: 100%;
	font-size: var(--FontSize-s);
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

.copied-full.copied::before {
	top: 0px;
	left: 0px;
	border-radius: var(--BorderRadius);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

button[class*="btn"] i,
a[class*="btn"] i {
	transition: unset;
}

.column.required.alert input {
	border-color: var(--ColorRed) !important;
}

.column.required.alert label,
.checkbox.required.alert {
	color: var(--ColorRed);
}

.publique:not(.bloque) .badges:not(.green),
.actif:not(.bloque) .badges:not(.green) {
	display: none !important;
}

.privee:not(.bloque) .badges:not(.blue) {
	display: none !important;
}

.en-attente:not(.bloque) .badges:not(.orange) {
	display: none !important;
}

.bloque .badges:not(.red),
.banni .badges:not(.red) {
	display: none !important;
}

.non-admin .fa-crown {
	display: none;
}

.non-certifie .certif {
	display: none;
}

progress {
	appearance: none;
	border: none;
	background-color: var(--ColorBackground);
}

.drag-drop-container {
	position: relative;
}

.drag-drop-container input {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.drag-drop-container .drag-drop {
	width: 100%;
	border-radius: var(--BorderRadius);
	background-color: var(--ColorRow);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.drag-drop-container .drag-drop i {
	font-size: var(--FontSize-l);
	color: var(--ColorLink);
}

.drag-drop-container .drag-drop p {
	margin-top: 10px;
}

.container-tab-selector {
	width: 100%;
	display: flex;
	align-items: center;
	transition: var(--Transition);
	overflow: auto;
}

.container-tab-selector .tab {
	padding: 0.5rem 0.75rem calc(0.5rem - 2px) 0.75rem;
	background-color: transparent;
	border-bottom: solid 2px transparent;
	border-radius: 4px 4px 0px 0px;
	color: var(--ColorText);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: calc(var(--Gap) / 2);
}

.container-tab-selector .tab .notification {
	position: relative;
	top: 0;
	right: 0;
	width: 1rem;
	height: 1rem;
}

.container-tab-selector .tab:hover {
	background-color: var(--ColorBlue10);
	border-color: var(--ColorBlue10);
}

.container-tab-selector .tab.active {
	border-color: var(--ColorBlue);
}



.SelectTheme.items {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--Gap);
	background-color: var(--ColorRow);
	border: solid 2px var(--ColorBackground);
	color: var(--ColorText);
	border-radius: var(--BorderRadius);
	padding: 1.5rem 1rem;
	cursor: pointer;
}

.qr_code {
	width: 10rem;
	position: relative;
}

.no-flex {
	flex: unset !important;
	width: unset !important;
}

.color-input {
	display: flex;
	align-items: center;
	width: 100%;
	gap: var(--Gap);
}

.color-input .color-selector .color-element {
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--ElementColor);
	display: block;
	border-radius: 100%;
	position: relative;
	cursor: pointer;
}

.color-input .color-selector input:checked + .color-element::after {
	content: '';
	position: absolute;
	display: block;
	background-color: var(--ColorContainer);
	border-radius: 100%;
	width: 1rem;
	height: 1rem;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}

.color-input .color-selector input {
	display: none;
}

.tag-selector {
	max-width: fit-content;
	width: fit-content;
}

.block.select.tag-selector {
	color: var(--SelectColor);
	background-color: var(--SelectBackgroundColor) !important;
}

.block.select.tag-selector select {
	color: var(--SelectColor);
}

.tag-selector select option {
	--OptionColor: var(--ColorText);

	color: var(--OptionColor);
}

@media screen and (max-width: 1000px) {

	.block,
	.column,
	form {
		flex: unset;
		width: 100%;
	}
}

@media screen and (max-width: 800px) {

	*[tooltip]::after {
		display: none;
	}
}

@media screen and (max-width: 700px) {
	.form-row {
		flex-direction: column;
		margin-bottom: 0px;
	}

	.checkbox {
		flex-direction: row;
	}

	.form-row .column.col-2 {
		width: 100%;
	}

	.titre {
		font-size: var(--FontSize-l);
	}

	.notif {
		width: 90%;
		margin-bottom: 30px;
	}

	.notif .row p {
		width: calc(100% - 50px);
	}

	.btn-actions-row a,
	.btn-actions-row button {
		flex: unset;
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.btn-index {
		font-size: var(--FontSize-s);
	}

	#actions-absolute a,
	#actions-absolute button {
		font-size: var(--FontSize);
	}

	#actions-absolute span {
		display: none;
	}

	.no-link ul,
	.no-link > p {
		width: unset;
	}

	.container-mes-link .mini-menu form {
		width: 200px;
	}

	.container-raccourcisseur .mini-menu form {
		width: 100%;
	}

	.mini-menu .btn-valid span {
		display: none;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes skeleton {
	from {
		left: -100%;
	}

	to {
		left: 100%;
	}
}