/* CSS Document */


/******************************* Base *******************************/

:root {
	
	--black: #353535;
	--blue: #09205c;
	--purple: #4d47a6;
	--grey: #f0f0f0;
	--green: #47A699;
	--red: #A44D46;
	
	--gap: 20px;
	
	/* Font size */
	--fsize1: 16px;
	--fsize2: 1.25em;
	--fsize3: 1.6em;
	--fsize4: 2.25em;
	--fsize5: 2.85em;
	--fsize6: 3.5em;
	--fsize7: 4.15em;
	--fsize8: 4.80em;
	--fsizemin : max(0.75em, 12px);
	
	--fontfam : "STIX Two Text";
	
	--light : 300;
	--bold : bold;
	
	--bshad : 1px 1px 10px rgba(0 0 0 / 10%);
	--bshad2 : 1px 1px 10px rgba(0 0 0 / 50%);
	
}

body {
	margin: 0;
	font-family: "Mukta", sans-serif;
	color: var(--blue);
	font-size: var(--fsize1);
	animation: fondu 1s forwards ease-in-out;
	background-image: url("/assets/img/background.jpg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top right;
}

@keyframes fondu {
	from {opacity: 0;}
	to {opacity: 1;}
}

h1, h2 {
	font-family: var(--fontfam);
}

h1 {
	font-size: 5em;
	margin: 0;
}

h2 {
	font-size: var(--fsize3);
	margin: 0;
}

.alerte {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 20px;
	text-align: center;
	background-color: var(--black);
	color: #fff;
	animation: disparait 10s forwards;
	pointer-events: none;
	user-select: none;
	z-index: 103;
	box-shadow: var(--bshad3);
	width: 400px;
	max-width: 90%;
}

@keyframes disparait {
	0% {opacity: 1;}
	90% {opacity: 1;}
	99% {opacity: 0;}
	100% {opacity: 0; display: none;}
}



.logo {
	max-height: 60px;
	position: fixed;
	right: 0;
	bottom: 0;
	margin: 20px;
	z-index: -1;
}


main {
	width: 90%;
	max-width: 1200px;
	margin: 50px auto;
}

#tabs {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 10px;
	margin: 20px auto;
	border-radius: 200px;
	background-color: var(--grey);
	max-width: 1200px;
	width: 90%;
	position: relative;
	grid-gap: 5px;
}

#tabs::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 10px;
	background-color: var(--purple);
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 200px;
}

#tabs > a, #tabs .has-sub-menu {
	padding: 5px 20px;
	border-radius: 100px;
}

#tabs a.active-tab {
	background-color: var(--green);
	color: #fff;
}

#tabs a span {
	vertical-align: middle;
	margin-left: 5px;
}

.has-sub-menu {
	position: relative;
	min-width: 200px;
	text-align: center;
	user-select: none;
	cursor: pointer;
}

.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 100%;
	overflow: hidden;
	max-height: 0;
	transition: 0.5s;
}

.has-sub-menu:hover .sub-menu {
	max-height: 300px;
}

.sub-menu a {
	padding: 5px 20px;
	background-color: var(--blue);
	color: #fff;
	transition: 0.2s;
}

.sub-menu a:not(:last-child) {
	border-bottom: solid 1px var(--green);
}

.sub-menu a:hover {
	background-color: var(--green);
}

.generation-form {
	display: flex;
	justify-content: center;
	flex-direction: column;
	grid-gap: var(--gap);
	max-width: 800px;
}

.wide-generation-form {
	display: flex;
	justify-content: center;
	flex-direction: column;
	grid-gap: var(--gap);
}

.accordion-content-padding .generation-form{
	padding: var(--gap);
}

.form-subcontainer {
	display: flex;
	flex-direction: column;
	grid-gap: 5px;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="file"]):not([type="radio"]), textarea, select {
	border: solid 1px var(--grey);
	outline: none;
	padding: 5px 5px;
	font-family: inherit;
	resize: none;
	position: relative;
	font-size: inherit;
	min-width: 200px;
}

input[type="submit"] {
	background-color: var(--blue);
	color: #fff;
	font-family: inherit;
	padding: 5px 20px;
	border: none;
	cursor: pointer;
	transition: 0.2s;
	font-size: inherit;
	outline: none;
}

input[type="submit"]:hover {
	background-color: var(--purple);
}

fieldset {
	border: solid 1px var(--blue);
}

.required {
	position: relative;
}

label {
	user-select: none;
}


.required::before {
	content: "*";
	position: absolute;
	right: calc(100% + 5px);
	top: 0;
	color: red;
}

.custom-input-container {
	position: relative;
}

.custom-input-container .input-has-label{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

.input-has-label {
	height: 1px;
	width: 1px;
	padding: 0;
	margin: 0;
	border: none;
	opacity: 0;
}

.input-label, .custom-button {
	text-align: center;
	border: solid 1px var(--green);
	padding: 5px 20px;
	color: #fff;
	cursor: pointer;
	transition: 0.2s;
	background-color: var(--green);
	min-width: 300px;
	display: inline-block;
}

.input-label {
	width: 100%;
}

.input-label:hover, .custom-button:hover {
	background-color: #fff;
	color: var(--green);
}

.label-radio {
	white-space: nowrap;
	background-color: var(--grey);
	padding: 5px;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
}

.display-error {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--fsize6);
}

.loginform {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100vh;
	grid-gap: 20px;
}

.page-404 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	color: var(--coul1);
	height: 100vh;
}

.accordions-container {
	display: flex;
	flex-direction: column;
	grid-gap: 10px;
}

.accordion input[type="radio"] {
	display: none;
}

.accordion-title {
	padding:10px;
	background-color: var(--purple);
	color: #fff;
	display: block;
	cursor: pointer;
}

.accordion input[type="radio"]:not(:checked) + .accordion-content {
	max-height: 0px;
	overflow: hidden;
	border: solid 1px transparent;
}

.accordion input[type="radio"]:checked + .accordion-content{
	max-height:10000px;
	border: solid 1px var(--purple);
}

.accordion-content-padding {
	padding: 10px;
	display: flex;
	flex-direction: column;
	grid-gap: 10px;
}

.accordion-content-row, .accordion-content-row-header {
	display: grid;
	grid-template-columns: 50px repeat(3, 1fr);
	align-items: center;
}

.accordion-content-row-header {
	text-align: center;
	background-color: var(--blue);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 10px 0;
}

.accordion-content-row:nth-of-type(even) {
	background-color: rgba(77, 71, 166, 0.25);
}

.accordion-content-row:nth-of-type(even) input {
	background-color: transparent;
}

/* Allergenes */

#sub-tabs-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	grid-gap: var(--gap);
	flex-wrap: wrap;
}

.sub-tabs-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	filter: drop-shadow(10px 10px 0px var(--purple));
}

.sub-tabs-title {
	background: var(--grey);
	padding: 5px 15px 0px 15px;
	border-top-right-radius: 80px;
	border-top-left-radius: 80px;
}

.sub-tabs-links {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--grey);
	padding: 10px;
	border-radius: 80px;
	position: relative;
	grid-gap: 5px;
}


.sub-tabs-links a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 20px;
	border-radius: 50px;
	transition: 0.2s;
}


.sub-tabs-links a:hover {
	background-color: var(--purple);
	color: #fff;
}

.sub-tabs-links a.sub-tab-active {
	background-color: var(--green);
	color: #fff;
}

#allergens-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	grid-gap: 10px;
	flex-wrap: wrap;
}

#allergens-container > * > .button-allergen {
	border: solid 1px #cecece;
	padding: 0;
	background-color: #ffffff;
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	cursor: pointer;
}

.allergen {
	padding: 5px 15px;
	border-radius: 50px;
	border: dashed 1px;
	background-color: #fff;
	color: #898989;
	display: flex;
	justify-content: center;
	align-items: center;
	grid-gap: 5px;
}

.allergen-label {
	cursor: pointer;
}

.allergen-label input[type="checkbox"]:checked + .allergen {
	background-color: var(--green);
	color: #fff;
	border-style: solid;
}

.products-allergens-table tr td{
	padding: 5px;
}

.products-allergens-table tr:nth-of-type(even){
	background-color: rgba(77, 71, 166, 0.25);
}

.products-allergens-table tr td:last-of-type{
	text-align: center;
	background-color: var(--red);
	color: #fff;
	width: 5%;
}

.products-allergens-table tr td:first-of-type{
	width: 30%;
}

.products-allergens-table tr td:last-of-type form {
	display: flex;
	justify-content: center;
	align-items: center;
}

.remove-product {
	padding: 0;
	background-color: transparent;
	height: 30px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: none;
}

.card-table tr td{
	padding: 5px;
}

.card-table tr:first-of-type{
	background-color: var(--purple);
	color: #fff;
}

.card-table tr:nth-of-type(even){
	background-color: rgba(77, 71, 166, 0.25);
}

.card-table tr td:first-of-type{
	width: 5%;
}

.card-table tr td:last-of-type form {
	display: flex;
	justify-content: center;
	align-items: center;
}