body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	background-color: #f2f2f2;
	max-width: 550px;
	margin: 0 auto;
	min-height: 98vh;
}

h1 {
	margin-bottom: 0px;
	color: #ffffff;
	display: flex;
	align-items: center;
	font-weight: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 23px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	line-height: 1.2;
	position: relative;
	z-index: 2;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

h2 {
	margin-top: 60px;
	margin-bottom: 20px;
	color: #666;
	display: flex;
	align-items: center;
	font-weight: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 18px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	line-height: 1;
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

h3 {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #333;
	display: flex;
	align-items: center;
	font-weight: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 18px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	line-height: 1;
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.h3container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 20px;
	flex-wrap:wrap-reverse;
	row-gap:20px;
	column-gap:20px;
}

h4 {
	margin-block-start: 1px;
	margin-block-end: 5px;
	margin-bottom: 5px;
	color: #ccc;
	display: flex;
	align-items: center;
	font-weight: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 13px;
	font-family: monospace, monospace;
	font-weight: bold;
	line-height: 1;
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

h5 {
	margin-block-start: 1px;
	margin-block-end: 5px;
	margin-top: 11px;
	margin-bottom: 16px;
	color: #333;
	display: flex;
	align-items: center;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 13px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: bold;
	line-height: 1;
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.footer {
	margin-top: 50px;
	color: rgb(155, 155, 155);
	font-weight: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 7px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	line-height: 1;
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

h2::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 1.5px;
	background-color: #d6d6d6;
}

label,
p {
	font-size: 12px;
	color: #333;
	text-transform: normal;
	letter-spacing: 0.5px;
	margin-top: 5px;
	margin-bottom: 3px;
}

input[type="text"],
input[type="number"],
select,
button {
	width: 100%;
	padding: 8px;
	margin-bottom: 0px;
	border: 1px solid #a4a4a4;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: white;
   	transition: background-color 0.1s ease, border-color 0.1s ease;
   	margin-top: 5px;
}

input::placeholder,textarea::placeholder {
  	color: #ccc; 
}

button:hover {
   	background-color: #dbdbdb; 
	border-color: #bbb;
}

.CopyCodeButton {

font-family: monospace, monospace; background: #303030; border: 1px solid #545454; color: white

}


.CopyCodeButton:hover {
   	background-color: black; 
   	border: 1px solid #545454;
}

.gold {
	background: linear-gradient(25deg, #7D7D7D 0%, #6A6A6A 15%, #D7D7D7 50%, #7D7D7D 60%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shine 5s linear infinite;
}

@keyframes shine {
	to {
background-position: 200% center;
	}
}

select {
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" height="16" width="16"><path d="M6 9l6 6 6-6"/></svg>');
	background-repeat: no-repeat;
	background-position: right 8px center;
	padding-right: 24px;
	margin-top: 5px;
}

button {
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#result-container,
#resultHEAD-container {
	margin-top: 10px;
	background: #dddddd;
	padding: 15px;
	border-radius: 4px;
}

#result,
#resultM,
#resultHEAD,
#resultHEADM {
	font-size: 15px;
	color: #333;
}

#result span,
#resultHEAD span {
	font-size: 12px;
	color: #666;
}

#resultM span,
#resultHEADM span {
	font-size: 12px;
	color: #666;
}

#preview-container,
#previewHEAD-container {
	max-width: 600px;
	width: 100%;
	margin-top: 0px;
	display: contents;
}

#preview,
#previewM,
#previewE,
#previewEM,
#previewHEAD,
#previewHEADM,
#previewHEADE,
#previewHEADEM {
	width: 100%;
	padding-bottom: 56.50%;
	position: relative;
	background-image: url('');
	background-position: center center;
	background-size: cover;
	background-color: white;
	margin-top: 0px;
}

#caption,
#captionM,
#captionHEAD,
#captionHEADM {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 10px;
	font-size: 7px;
	text-transform: uppercase;
	letter-spacing: 0.75px;
	color: white;
}

textarea {
	width: 100%;
	height: 100px;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 15px;
	border: 1px solid #545454;
	border-radius: 6px;
	box-sizing: border-box;
	resize: none;
	font-size: 8px;
	font-family: monospace, monospace;
	background: #000;
	color: gray;
	scrollbar-color: #666 #333;
}

textarea::-webkit-scrollbar {
	width: 10px;
}

textarea::-webkit-scrollbar-track {
	background: #333;
}

textarea::-webkit-scrollbar-thumb {
	background: #666;
}

select {
	appearance: none;
	padding-right: 30px;
}

.symbole {
	width: 35px;
	height: 35px;
	margin-right: 20px;
	stroke: white;
	stroke-miterlimit: 10;
	stroke-width: .5;
	fill: none;
}

.icon {
	height: 10px;
	margin-right: 8px;
	fill: #a4a4a4;
	width: auto;
	overflow: visible;
}

.warning {
	height: 14px;
	margin-right: 8px;
	fill: #a13b0b;
	width: auto;
	overflow: visible;
}

.erreururl {
	height: 14px;
	margin-right: 8px;
	fill: #af2005;
	width: auto;
	overflow: visible;
}

.bigicon {
	height: 16px;
	margin-right: 8px;
	fill: #666;
	width: auto;
	overflow: visible;
}

.sectioniconsmall {
	height: 23px;
	margin-right: 14px;
	width: auto;
	overflow: visible;
}

.sectionicon {
	height: 120px;
	padding-top: 20px;
	width: 100%;
	overflow: visible;
}

#textOptions {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
	column-gap: 10px;
}

.flexbox {
	margin-top: 10px;
	column-gap: 35px;
	flex-wrap: nowrap;
	position: relative;
}

.flexbox::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 0.75px);
	width: 1.5px;
	background-color: silver;
	display: none
}

.input-field {
	margin-right: 0px;
	margin-bottom: 5px;
	flex: 1 1 200px;
	/* Adjust width as needed */
}

.input-field label {
	display: block;
}

.bonus {
	display: none;
}

.antibonus {
	display: block;
}

.proporCHECK {
	display: block;
}

.proporNOCHECK {
	display: none;
}

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

.autocomplete-items {
	position: absolute;
	width: auto;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	font-size: 12px;
}

.autocomplete-items div {
	padding: 5px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
	background-color: #e9e9e9;
}

.autocomplete-active {
	background-color: gray !important;
	color: #ffffff;
}

.container input[type="checkbox"] {
	display: none;
}

.container {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	line-height: 2.2;
	color: #333;
	cursor: pointer;
	padding-left: 35px;
	margin-top: 14px;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	width: 25px;
	height: 25px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: 1px solid #a4a4a4;
	background-color: white;
	border-radius: 6px;
}

.container input[type="checkbox"]:checked+.checkmark {
	background-image: url('data:image/svg+xml;utf8,<svg fill="dodgerblue" enable-background="new 0 0 25 25" height="25" viewBox="0 0 25 25" width="25" xmlns="http://www.w3.org/2000/svg"><path d="m18.9 11.8-2.8 2.8c-1.4 1.4-3.6 1.4-4.9 0-.4-.2-.6-.5-.7-.8l1.2-1.2c.1.3.3.6.5.9.8.8 2 .8 2.8 0l2.8-2.8c.8-.8.8-2 0-2.8s-2-.8-2.8 0l-.8.7c-.7-.1-1.4-.1-2.1.1l1.8-1.8c1.4-1.4 3.6-1.4 5-.1s1.3 3.6 0 5zm-12.8 6.4c1.4 1.3 3.6 1.3 5 0l1.8-1.8c-.7.1-1.4.1-2.1 0l-.7.7c-.8.8-2 .8-2.8 0s-.8-2 0-2.8l2.8-2.8c.8-.8 2-.8 2.8 0 .3.3.4.6.5.9l1.1-1.2c-.1-.3-.3-.6-.6-.8-1.4-1.4-3.6-1.4-4.9 0l-2.9 2.8c-1.3 1.4-1.3 3.6 0 5z"/></svg>');
}

.container input[type="checkbox"]:not(:checked)+.checkmark {
	background-image: url('data:image/svg+xml;utf8,<svg fill="gray" enable-background="new 0 0 25 25" height="25" viewBox="0 0 25 25" width="25" xmlns="http://www.w3.org/2000/svg"><path d="m18.2 19.3-12.5-12.5 1.1-1.1 12.5 12.5zm-5.2-9.5 1.9-1.9c.8-.8 2-.8 2.8 0s.8 2 0 2.8l-1.9 1.9 1.1 1.1 1.9-1.9c1.4-1.4 1.4-3.6 0-4.9-1.3-1.4-3.5-1.4-4.9-.1l-1.9 2zm-1 5.4-1.9 1.9c-.8.8-2 .8-2.8 0s-.8-2 0-2.8l1.9-1.9-1.1-1.1-2 1.9c-1.4 1.4-1.4 3.6 0 4.9 1.4 1.4 3.6 1.4 5 .1l1.9-1.9z"/></svg>');
}

.tab {
	display: none;
}

.tab.active {
	display: block;
}

.tab-buttons {
	margin-bottom: 0px;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tab-button {
	cursor: pointer;
	padding: 20px;
	background-color: #e0e0e0;
	border-radius: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 12px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: normal;
	color: rgb(30, 30, 30);
	min-width: 180px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	transition: background-color 0.1s, color 0.1s;
}

.tab-button:hover {
	background-color: silver;
	color: rgb(30, 30, 30); 
}

.tab-button.active {
	background-color: #6b6b6b;
}

.tab-buttons .tab-button {
	display: inline-block;
}

.textareaforrow {
	width: calc(100% - 10px);
	padding: 8px;
	margin-top: 6px;
	margin-bottom: 12px;
	border: 1px solid #a4a4a4;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: white;
	resize: none;
	height: 33px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: black;
	overflow: hidden;
}

.row-container {
	display: flex;
	align-items: center;
}

.btn {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: transparent !important; 
	background-size: 12px 12px;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	margin-left: 4px;
	overflow: visible;
	transition: transform 0.1s ease; 
}

.btn:hover {
	transform: scale(1.01);
}

.btn.remove {
	background-image: url('data:image/svg+xml;utf8,<svg fill="Crimson" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m1.74 22.25c.72.71 1.94.69 2.62.02l7.64-7.65 7.64 7.65c.69.7 1.89.69 2.6-.02.71-.72.72-1.92.02-2.6l-7.64-7.65 7.64-7.63c.7-.7.71-1.91-.02-2.62-.72-.7-1.92-.7-2.6-.02l-7.64 7.64-7.64-7.64c-.68-.67-1.91-.69-2.62.02-.7.72-.68 1.94-.02 2.62l7.65 7.63-7.65 7.65c-.67.67-.69 1.89.02 2.6z"/></svg>');
}

.btn.remove:hover {
	background-image: url('data:image/svg+xml;utf8,<svg fill="DarkRed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m1.74 22.25c.72.71 1.94.69 2.62.02l7.64-7.65 7.64 7.65c.69.7 1.89.69 2.6-.02.71-.72.72-1.92.02-2.6l-7.64-7.65 7.64-7.63c.7-.7.71-1.91-.02-2.62-.72-.7-1.92-.7-2.6-.02l-7.64 7.64-7.64-7.64c-.68-.67-1.91-.69-2.62.02-.7.72-.68 1.94-.02 2.62l7.65 7.63-7.65 7.65c-.67.67-.69 1.89.02 2.6z"/></svg>'); 
}

.btn.up {
	background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m23.45 15.22-9.91-10.03c-.45-.47-.95-.67-1.53-.68-.59 0-1.08.21-1.53.68l-9.93 10.03c-.36.36-.55.81-.55 1.34 0 1.08.86 1.95 1.94 1.95.54 0 1.03-.22 1.41-.61l8.67-8.8 8.65 8.8c.37.39.89.61 1.41.61 1.07 0 1.93-.87 1.93-1.95 0-.53-.19-.99-.55-1.34z"/></svg>');
}

.btn.up:hover {
	background-image: url('data:image/svg+xml;utf8,<svg fill="darkgray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m23.45 15.22-9.91-10.03c-.45-.47-.95-.67-1.53-.68-.59 0-1.08.21-1.53.68l-9.93 10.03c-.36.36-.55.81-.55 1.34 0 1.08.86 1.95 1.94 1.95.54 0 1.03-.22 1.41-.61l8.67-8.8 8.65 8.8c.37.39.89.61 1.41.61 1.07 0 1.93-.87 1.93-1.95 0-.53-.19-.99-.55-1.34z"/></svg>'); 
}

.btn.down {
	background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m22.07 5.5c-.52 0-1.03.23-1.41.61l-8.65 8.79-8.67-8.79c-.38-.38-.87-.61-1.41-.61-1.07 0-1.94.87-1.94 1.95 0 .53.19.97.55 1.34l9.93 10.03c.46.47.94.68 1.53.68.58 0 1.08-.21 1.53-.68l9.91-10.03c.36-.36.55-.81.55-1.34 0-1.08-.85-1.95-1.93-1.95z"/></svg>');
}

.btn.down:hover {
	background-image: url('data:image/svg+xml;utf8,<svg fill="darkgray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m22.07 5.5c-.52 0-1.03.23-1.41.61l-8.65 8.79-8.67-8.79c-.38-.38-.87-.61-1.41-.61-1.07 0-1.94.87-1.94 1.95 0 .53.19.97.55 1.34l9.93 10.03c.46.47.94.68 1.53.68.58 0 1.08-.21 1.53-.68l9.91-10.03c.36-.36.55-.81.55-1.34 0-1.08-.85-1.95-1.93-1.95z"/></svg>');
}

.controls {
	display: flex;
	margin-bottom: 7px;
	margin-left: 7px;
}

.line-number {
	color: rgb(155, 155, 155);
	margin-right: 10px;
	margin-bottom: 7px;
	width: 20px;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 12px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	line-height: 1;
	position: relative;
	text-align: right;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
	  
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 180px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 15px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -100px;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 12px;
	line-height: 1.6;
	margin-bottom: 5px;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.retour {
	text-decoration: none; 
	color: silver; 
	cursor: pointer; 
	transition: color 0.1s ease; 
	font-size: 12px;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	letter-spacing: 1px;
	align-items: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.retour::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url('data:image/svg+xml,%3Csvg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m10 4-4 4 4 4" fill="none" stroke="silver" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/%3E%3C/svg%3E');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 4px;
	transition: background-image 0.1s ease;
	vertical-align: bottom;
}

.retour:hover {
	color: black;
}

.retour:hover::before {
	background-image: url('data:image/svg+xml,%3Csvg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m10 4-4 4 4 4" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/%3E%3C/svg%3E');
}