.mobile-hidden
{
	display: none;
}

dialog::backdrop
{
	background-color: rgba(63, 55, 42, 0.5);
}

dialog
{
	background-color: #EFF0E9;
	border: 1px solid #353C34;
	padding: 1rem;
	width: 80%;
	max-width: 600px;
	box-shadow: 0px 1px 5px #353C34;
	animation: fadeInModal 0.3s ease;
}

@keyframes fadeInModal
{
	from
	{
		opacity: 0;
	}

	to
	{
		opacity: 1;
	}
}

.discord-modale
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.discord-modale > img
{
	width: 100%;
	max-width: 300px;
	height: auto;
}

/* ------------------------------- GLOBAL SETTINGS ------------------------------- */



*
{
	box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

body
{
	margin: 0;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

button
{
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
}

.video
{
	width: 100%;
	height: 300px;
	box-shadow: 0px 1px 5px #353C34;
	display: block;
}

/* // ------------------------------- LAYOUTS ------------------------------- // */
.layout
{
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	height: 100%;
	background-color: rgb(63, 55, 42);
}

.layout-light
{
	background-image: radial-gradient(circle, rgba(220, 222, 210, 0.2) 15%, rgba(220,222,210,0.2) 61%, rgba(174,191,163,0.2) 72%, rgba(223,218,197,0.2) 77%, rgba(229,208,165,0.3) 91%, rgba(252,172,48,0.2) 95%),url('images/layoutBG/fondlight.jpg');
}

.layout-dark
{
	background-image: radial-gradient(circle, rgba(220, 222, 210, 0.2) 15%, rgba(220,222,210,0.2) 61%, rgba(174,191,163,0.2) 72%, rgba(223,218,197,0.2) 77%, rgba(229,208,165,0.3) 91%, rgba(252,172,48,0.2) 95%),url('images/layoutBG/fonddark.jpg');
}

.layout-doom
{
	background-image: radial-gradient(circle, rgba(220, 222, 210, 0.2) 15%, rgba(220,222,210,0.2) 61%, rgba(174,191,163,0.2) 72%, rgba(223,218,197,0.2) 77%, rgba(229,208,165,0.3) 91%, rgba(252,172,48,0.2) 95%),url('images/layoutBG/fonddoom.jpg');
}

.layout-content
{
	display: flex;
	align-items: start;
	margin-top: 5vh;
    margin-bottom: 5vh;
	justify-content: center;
	width: 100vw;
}

.cancelled
{
	filter: saturate(0);
}

/* // ------------------------------- FLEX ------------------------------- // */
.flex-row
{
	display: flex;
	flex-direction: row;
}

.flex-col
{
	display: flex;
	flex-direction: column;
}

.flex-wrap
{
    display: flex;
	flex-wrap: wrap;
    gap: 1rem;
}

.justify-center
{
	justify-content: center;
}

.justify-between
{
	justify-content: space-between;
}

.justify-around
{
	justify-content: space-around;
}

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

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

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

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

.gap-1
{
	gap: 1rem;
}

.gap-2
{
	gap: 2rem;
}

/* // ------------------------------- width containers ------------------------------- // */
.w-50
{
	width: 50%;
}

.w-45
{
    width: 45%;
}

.w-75
{
	width: 75%;
}

.w-25
{
	width: 25%;
}

.w-100
{
	width: 100%;
}

.w-66
{
	width: 66%;
}

.w-33
{
	width: 33%;
}

.w-30
{
	width: 29%;
}

.h-50vh {
    height: 50vh;
}

.h-70vh {
    height: 70vh;
}

.h-max
{
    min-height: 100%;
}
/********************** NEWSFEED ********************/

.news-title
{
    color: #353C34;
    text-shadow: 0px 0px 1px #ffffff, 2px 2px 0px #bba684, 3px 2px 0px rgba(255, 204, 0, 0.171);
}
.menu-newsfeed-button-container
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.menu-newsfeed-button
{
    color:#353c3477;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-color: #bdb9b800;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-bottom-color: #FFF;
    background: linear-gradient(0deg, rgba(45, 40, 29, 0) 0%, rgba(115, 109, 109, 0.1) 25%, rgba(173, 168, 157, 0.1) 50%, rgba(173, 168, 157, 0) 100%);
    transition: all 0.2s ease-in-out;
}

/* .menu-newsfeed-button:hover, .menu-newsfeed-button:focus, .menu-newsfeed-button:active
{
    color: #353C34;
    text-decoration: none;
    text-shadow: 1px 1px 2px #B77A16;
    border-color: #353C34;
    border-style: solid;
    border-width: 2px 2px 0 2px;
    transition: all 0.2s ease-in-out;
} */
.menu-newsfeed-button-active
{
    color: #353C34;
    border-color: #FFF;
    border-width: 2px 2px 0 2px;
    box-shadow: none;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

.newsfeed-content
{
    border-width: 0px 2px 2px 2px;
    border-color: #FFF;
    border-style: solid;
}

.news-image
{
    width: 100%;
    max-width: 400px;
    height: auto;
    box-shadow: 0px 1px 7px #353C34;
    border-radius: 5px;
    outline: 1px solid #fff5e6;
}

.bottom-margin-1
{
    margin-bottom: 1rem;
}
/************************ BACKGROUNDS-COLORS and BORDERS ********************/
.bg-light
{
	background: radial-gradient(circle, rgba(239,240,233,0.8) 55%, #eff0e98f 80%, rgba(199, 202, 181, 0.5) 95%);
}

.bg-light-opacity
{
	background: radial-gradient(circle, rgba(239,240,233,1) 55%, #eff0e9 80%, rgba(199, 202, 181, 1) 95%);
}

.bg-head-cancelled
{
	background: linear-gradient(180deg, rgb(113, 113, 113) 0%, rgb(53, 53, 53)100%);
	box-shadow: 0px 2px 5px #353C34;
}

.bg-content-cancelled
{
	background: radial-gradient(circle, rgba(226, 226, 226, 0.8) 55%, #ebebeb8f 80%, rgba(189, 189, 189, 0.5) 95%);
}

.bg-head-past
{
    background: linear-gradient(180deg, rgb(109, 96, 84) 0%, rgb(48, 37, 26)100%);
    box-shadow: 0px 2px 5px #3c3a34;
}

.bg-content-past
{
    background: radial-gradient(circle, rgba(226, 226, 226, 0.8) 55%, #ebebeb8f 80%, rgba(189, 189, 189, 0.5) 95%);
}

.bg-header
{
	background: linear-gradient(180deg, rgba(73,86,70,1) 0%, rgb(42, 45, 40) 100%);
	box-shadow: 0px 2px 5px #353C34;
}

.border-green-lg
{
	border: 3px solid #333b33;
	border-image: linear-gradient(to right, #232323, #414e3f, #6b7567, #414e3f, #232323) 1;
}

.bg-glass
{
	background: linear-gradient(180deg, rgba(79, 71, 60, 0.2) 0%, rgba(22, 25, 22, 0.2) 100%);
	backdrop-filter: blur(10px);
    /* border-radius: 25px; */
    outline: 2px solid #f0f4f0;
    /* border: 3px solid #ffffff; */
    /* border-image: linear-gradient(to right, #bebebe, #d2cccc, #fff5e6, #d2cccc, #bebebe) 1; */
}

.border-green
{
	border: 1px solid #333b33;
	border-image: linear-gradient(to right, #232323, #414e3f, #6b7567, #414e3f, #232323) 1;
}

.border-light
{
	border-width: 1px;
	border-style: solid;
	border-image: linear-gradient(to right, #EFF0E9, #ffffff27, #EFF0E9) 1;
}

.border-top-down-gradient
{
    color: #353c34;
	text-transform: uppercase;
	padding: 1rem 0 1rem 1.5rem;
	text-shadow: 2px 2px 4px #b7791673;
	border: 2px solid #353C34;
	border-image: linear-gradient(to right, transparent, #414e3f53, #6b7567c0, #414e3f53, transparent) 1;
}
/********************** TEXT-COLORS ********************/
.text-green
{
	color: #353C34;
}

.text-light-green
{
	color: #6b7567;
}

.text-light
{
	color: #EFF0E9;
}

.text-frame-title
{
	color: #EFF0E9;
	text-shadow: 1px 1px 2px #B77A16;
}

.text-frame-title > *
{
	font-weight: 100;
}

.index-title
{
	color: #353c34;
	text-transform: uppercase;
	font-weight: 100;
	font-size: 1.3rem;
	padding: 0.5rem 0 0.5rem 1.5rem;
	text-shadow: 2px 2px 4px #b7791673;
	border: 2px solid #353C34;
	border-image: linear-gradient(to right, transparent, #414e3f53, #6b7567c0, #414e3f53, transparent) 1;
}

.text-shadowed
{
	text-shadow: 1px 1px 2px #353C34;
}

.error-text
{
    color: #dc7a1e;
	text-transform: uppercase;
    font-style: italic;
	font-weight: 100;
	font-size: 1.3rem;
	padding: 0.5rem 0 0.5rem 1.5rem;
	text-shadow: 2px 2px 4px #353C34, 1px 1px 0px #353C34;
    border: 2px solid #353C34;
	border: 2px solid #353C34;
	border-image: linear-gradient(to right, transparent, #414e3f53, #dc7a1e, #414e3f53, transparent) 1;
    background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 25%, rgb(255, 255, 255) 75%, rgba(255, 255, 255, 0.0) 100%);
}
/********************** TEXT-STYLES/fonts ********************/
.special-elite-regular {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
  }

.text-interline
{
	line-height: 1.5;
}

/********************** TEXT-SIZES ********************/
.text-small
{
	font-size: 0.7rem;
}

.text-normal-small
{
	font-size: 0.8rem;
}

.text-normal
{
	font-size: 1rem;
}

.text-medium
{
	font-size: 1.2rem;
}

.text-large
{
	font-size: 1.5rem;
}

.text-xlarge
{
	font-size: 2rem;
}

.uppercase
{
	text-transform: uppercase;
}

.italic
{
	font-style: italic;
}

.none
{
	text-decoration: none;
}

.list-none
{
	list-style-type: none;
}

.semi-bold
{
	font-weight: 600;
}

.bold
{
    font-weight: 700;
}

.normal-weight
{
    font-weight: 400;
}

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

.text-line-through
{
	text-decoration: line-through;
}
/********************** FOOTER ********************/
.footer-container
{
    /* position: relative;
    width: 100%;
    bottom: 0; */
    display: flex;
    flex-shrink: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(73,86,70,0.5) 0%, rgba(42, 45, 40, 0.8) 100%);
    box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.5);
    padding: 1rem;
}

.footer-container .fa-solid, .footer-container .fa-brands
{
    padding-right: 0.5rem;
}


.footer-text
{
    color: #EFF0E9;
    text-shadow: 1px 1px 0px #B77A16;
    font-weight: 100;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

a.footer-text:hover
{
    color: #FFF;
    text-shadow: 2px 2px 2px #825b1c;
    text-decoration: underline;
    transition: all 0.2s ease-in-out;
}

.footer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.footer-show {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1rem;
    width: 100%;

}

.footer-list
{
    list-style: none;
}

.footer-list > li
{
    padding: 0.5rem;
}

.footer-sitemap, .footer-about, .footer-social
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-aside
{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.footer-button {
    width: 50%;
    height: 60px;
}

.footer-button:hover
{
    color: #FFF;
    text-shadow: 2px 2px 2px #825b1c;
    transition: all 0.5s ease-in-out;
    transform: scale(1.5);
}

/********************** NOTIFICATIONS ********************/

.notification-container
{
    /* height: 70vh; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.notification-list
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    max-height: 60vh;
    overflow: scroll;
}

/* .notification-infos {
	display: flex;
	width: 90%;
	flex-direction: column;
	align-items: start;
	justify-content: start;
    padding: 1rem;
    margin: auto;
    overflow: auto;
    word-break: break-all;
	box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.5);
}*/

.notification-infos {
	display: flex;
	flex-direction: column;
	width: 90%;
	padding: 1rem;
	margin: auto;
	box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.5);
	/* Ajouts cruciaux */
	overflow: hidden;
	word-break: break-word;
}

/* .notification-infos> p
{
    margin: 0;
    width: 100%;
    background-color: red;
} */

.notification-infos > p {
	margin: 0;
	width: 100%;
	/* Ajouts cruciaux */
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
}

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

.notification-button-grid
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 50%;
    gap: 1rem;
}

.notification-button
{
    background: transparent;
	cursor: pointer;
	box-shadow: 0px 1px 3px #353C34;
	display: flex;
	justify-content: center;
    align-items: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.2rem;
	-webkit-text-stroke: 0.02em #353C34;
    padding: 0.5rem;
	text-shadow: 0px 0px 0px black;
	color: #f0efe992;
	border: 3px solid #EFF0E9;
    height: 40px;
}

.notification-button:hover
{
    color : #353C34;
    text-shadow: 0px 1px 4px rgb(180, 120, 41);
    border-image: linear-gradient(to right, #868686, #d2cccc, #fff5e6, #d2cccc, #868686) 1;
    box-shadow: 0px 1px 5px #353C34;
    transition: all 0.4s ease-in-out;
}

.notification-links
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.notification-links-dropdown
{
    padding : 0.5rem 0 0.5rem 0;
    display: flex;
    gap: 1rem;
    width: 100%;
}

.notification-list-dropdown
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    width: 100%;
    max-height: 75vh;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgb(209, 210, 205) 100%);
    overflow: scroll;
    box-shadow: 0px 1px 7px #353C34;
    border: solid 1px #353C34;
    border-image: linear-gradient(to bottom, #bebebe, #d2cccc, #fff5e6, #d2cccc, #bebebe) 1;
    border-radius: 5px;
}

.notification-active-filter
{
    font-weight: 800;
    background: linear-gradient(90deg, rgba(209, 210, 205, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(209, 210, 205, 0) 100%);
    padding: 0.75rem;
    border: 2px solid #353C34;
	border-image: linear-gradient(to right, transparent, #414e3f53, #6b7567c0, #414e3f53, transparent) 1;
}

.notification-disabled-filter
{
    font-style: italic;
    padding: 0.75rem;
	color: #6b7567;
    border: 2px solid #454844;
    border-image: linear-gradient(to right, transparent, #5656561b, #8f908f25, #5656561b, transparent) 1;
}

/********************** DROPDOWN COMPONENTS ********************/
.dropdown-container
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	position: relative;
}

.chevron
{
	padding-left: 1rem;
}

.dropdown-toggle
{
	width: 200px !important;
}

.dropdown-list
{
	display: flex;
	flex-direction: column;
	width: 200px;
	position: absolute;
	background: #EFF0E9;
	border: 1px solid #353C34;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 0.2rem;
	max-height: 25vh;
	overflow-y: scroll;
	z-index: 1;
}

.dropdown-list > a
{
	text-decoration: none;
	color: #353C34;
	padding: 0.5rem;
	text-shadow: 1px 1px 2px #EFF0E9;
	transition: all 0.2s ease-in-out;
	border: 1px solid #353C34;
	border-image: linear-gradient(to right, #23232300, #414e3f69, #6b7567d2, #414e3f69, #23232300) 1;
}

.dropdown-list > a:hover, .dropdown-list > a:focus
{
	color: #22190f;
	background: radial-gradient(circle, rgba(222, 222, 221, 0.676) 55%, rgba(220, 217, 205, 0.598) 95%);
	text-shadow: 1px 1px 2px #EFF0E9;
	border-radius: 5px;
	box-shadow: inset 0px 1px 5px #353C34;
	outline: none;
}

.search-input
{
	padding: 0.5rem;
	border-width: 2px;
	border-style: solid;
	font-style: italic;
	border-image: linear-gradient(to right, #EFF0E9, #ffffff27, #EFF0E9) 1;
	background-color: #ffffffc7;
	box-shadow: 0px 1px 3px #353C34;
	width: 200px;
	transition: all 0.2s ease-in-out;
}

.search-input:focus
{
	background-color: #fefcec;
	outline: 3px solid #333b337d;
}
/*********************** BUTTONS COMPONENTS ********************/

.light-button
{
	background: linear-gradient(90deg, #fff 0%, #e4e2db 25%, #e4e2db 75%, #fff 100%);
	cursor: pointer;
	box-shadow: 0px 1px 3px #353C34;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0.5rem;
	-webkit-text-stroke: 0.01em #B77A16;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 600;
	color: #343f32;
	border: 3px solid #353C34;
}

.light-button:hover
{
	background: #fff;
	color: #353C34;
	text-shadow: 0px 0px 6px #ffeaa4;
	border-image: linear-gradient(to right, #353C34, #414e3f, #5f7e50, #414e3f, #353C34) 1;
	box-shadow: 0px 1px 5px #353C34;
	transition: all 0.4s ease-in-out;
}

.green-button
{
	background: linear-gradient(180deg, rgba(73,86,70,1) 0%, rgb(42, 45, 40) 100%);
	cursor: pointer;
	box-shadow: 0px 1px 3px #353C34;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0.5rem;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.1rem;
	-webkit-text-stroke: 0.01em #ffffff;
	text-shadow: 0px 0px 2px black;
	font-weight: 500;
	color: #cb9845;
	border: 3px solid #cb9845;
}

.green-button:hover
{
	background: linear-gradient(90deg, rgba(38, 45, 29, 0.8) 0%, rgb(42, 45, 40) 25%, rgb(42, 45, 40) 75%, rgba(38, 45, 29, 0.8) 100%);
	color : #F6B448;
	text-shadow: 1px 1px 2px #B77A16, 0 0 1em rgba(255, 204, 0, 0.171), 0 0 0.2em rgba(255, 204, 0, 0.235);
	border-image: linear-gradient(to right, #B77A16, #cb9845, #F6B448, #cb9845, #B77A16) 1;
	box-shadow: 0px 1px 5px #353C34;
	transition: all 0.4s ease-in-out;
}

.small-button {
    max-width: 110px;
}

.transparent-button
{
	background: transparent;
	cursor: pointer;
	box-shadow: 0px 1px 3px #353C34;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0.5rem;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.2rem;
	-webkit-text-stroke: 0.02em #353C34;
	font-weight: 500;
	text-shadow: 0px 0px 0px black;
	color: #f0efe992;
	border: 3px solid #EFF0E9;
}

.transparent-button:hover
{
	background: linear-gradient(90deg, rgba(45, 40, 29, 0.1) 0%, rgba(45, 43, 40, 0.1) 25%, rgba(45, 43, 40, 0.1) 75%, rgba(45, 38, 29, 0.5) 100%);
	color : #353C34;
	text-shadow: 0px 1px 4px rgb(180, 120, 41);
	border-image: linear-gradient(to right, #868686, #d2cccc, #fff5e6, #d2cccc, #868686) 1;
	box-shadow: 0px 1px 5px #353C34;
	transition: all 0.4s ease-in-out;
}

.link:hover
{
    cursor: pointer;
	color:#EFF0E9;
	text-shadow: 1px 1px 2px #B77A16, 0 0 1em rgba(255, 204, 0, 0.171), 0 0 0.2em rgba(255, 204, 0, 0.235);
	transition: all 0.2s ease-in;
}

/*********************** FORMS ********************/

/* form content */

.content-responsive-wrapper
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 100%;
}

.form-content
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    gap: 1rem;
    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.5);
}

.form-content-list
{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: 100%;
    padding: 1rem;
    gap: 1rem;
    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.5);
}

.archetype-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
}

.archetype-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 1rem; */
    width: 100%;
    padding: 1rem;
    background: radial-gradient(circle, rgba(239,240,233,0.8) 55%, #eff0e98f 80%, rgba(199, 202, 181, 0.5) 95%);
    box-shadow: 0px 1px 5px #353C34;
}

.archetype-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(73,86,70,1) 0%, rgb(42, 45, 40) 100%);
	box-shadow: 0px 2px 5px #353C34;
    padding: 0.5rem;
    margin: 0;
    width: 100%;
}

.archetype-item {
    border-bottom: 1px solid #353C34;
	border-image: linear-gradient(to right, #23232300, #414e3f69, #6b7567d2, #414e3f69, #23232300) 1;
    padding-bottom: 1.2rem;
}

.archetype-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
select[multiple]:focus, select[multiple] {
    padding-top: 0.5rem;
    background-color: red;
}
option {
    padding-top: 0.5rem;
    background-color: #ffffffc7;
}

select[multiple]:focus option:checked {
  background: #353C34 linear-gradient(180deg, rgba(73,86,70,1) 0%, rgb(42, 45, 40) 100%);
  border: 2px solid #ffffff;
  padding-top: 0.5rem;
  box-shadow: 0px 1px 5px #353C34;
}

.select-border-top {
    border: 1px solid #353C34;
	border-image: linear-gradient(to right, #23232300, #414e3f69, #6b7567d2, #414e3f69, #23232300) 1;
}

.content-table
{
    width: 90%;
    margin-bottom: 1rem;
}

.form-wrapper
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem;
}

.form-col
{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	height: 100%;
}

.form-input
{
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.form-input > input,  .form-input > select, .form-input > textarea
{
	padding: 0.5rem;
	border: 1px solid #353C34;
	background-color: #ffffffc7;
	width: 100%;
    gap: 0.5rem;
    box-shadow: 0px 1px 5px #353C34;
}

.form-input > select {
    outline: 3px solid #333b337d;
}

.form-input > input:focus
{
	background-color: #fefcec;
	outline: 3px solid #333b337d;
}

.form-input > textarea:focus
{
    background-color: #fefcec;
    outline: 3px solid #333b337d;
}

.form-input > select:focus
{
    background-color: #fefcec;
    outline: 3px solid #333b337d;
    padding: 0.5rem;
    gap: 0.5rem;
    box-shadow: 0px 1px 5px #353C34;
}

.fomr-input > select:active
{
    background-color: #fefcec;
    outline: 3px solid #333b337d;
    box-shadow: 0px 1px 5px #353C34;
}

.form-input > p
{
	margin: 0;
}

.form-check
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.form-check > input
{
	background-color: #EFF0E9;
    border: 2px solid #353C34;
}

.login-form {
    width: 75%;
}

.form-input > .create-char-select {
    background-color: #ffffffc7; ;
    outline: 3px solid #ffffff7d;
}

.form-input > .create-char-select > .char-option   {
	border: 2px solid #353C34;
    padding : 0.5rem 0 0.5rem 0;
	border-image: linear-gradient(to right, transparent, #414e3f53, #6b7567c0, #414e3f53, transparent) 1;
}

.form-input > .create-char-select > option[selected] {
    color: #EFF0E9;
    background: #353C34 linear-gradient(180deg, rgba(73,86,70,1) 0%, rgb(42, 45, 40) 100%);
    border: 2px solid #ffffff;
    padding-top: 0.5rem;
    box-shadow: 0px 1px 5px #353C34;
}

.form-input > .create-char-select:active {
    background-color: #fefcec;
    outline: 3px solid #333b337d;
}



/*********************** EVENTS COMPONENTS ********************/
.event-content-wrapper
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	break-inside: avoid;
}

.event-image-infos-wrapper
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	break-inside: avoid;
}

/* // ---- Image ----- //  */


.event-image-block
{
	width: 100%;
	height: 30vh;
	overflow: hidden;
    box-shadow: 0px 1px 5px #353C34;
}

.event-image-block > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* // -------- Links ----- // */
.event-links
{
	width: 90%;
	padding: 0.5rem;
}

.event-link {
    text-shadow: 1px 1px 0px #EFF0E9;
}

/* // -------- Infos ----- // */
.event-infos
{
	display: flex;
	width: 90%;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	padding: 1rem;
	box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.5);
}

/* // -------- Buttons ----- // */
.event-button-grid
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	padding: 1rem;
	gap: 1rem;
}

.button-col-1 > *, .button-col-2 > *
{
	width: 100%;
	margin: 1rem 0;
}

.button-col-1 > form > button, .button-col-2 > form > button
{
    width: 100%;
    height: 40px;
}
/* // -------- Attendees list ----- // */
.event-attendees
{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 3rem;
    list-style: none;
}

.event-attendees-manage
{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 3rem;
    list-style: none;
}

.attendee-manage
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-image: radial-gradient(circle, rgba(239,240,233,0.3) 55%, #eff0e941 80%, rgba(199, 202, 181, 0.5) 95%);
    border: 1px solid #353C34;
    border-image: linear-gradient(to right, #232323, #414e3f, #d0dfbe, #414e3f, #232323) 1;
    box-shadow: 0px 1px 3px #353C34;
}

.attendee-manage-buttons
{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: row;
    gap: 1rem;
    padding-top: 1rem;
}

.attendees-manage-pictos
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1rem;
}

.attendee-manage-infos
{
    display: flex;
	flex-direction: column;
	max-width: 300px;
	position: absolute;
	background: #EFF0E9;
	border: 1px solid #353C34;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 0.2rem;
	z-index: 1;
}

/******************** PROFILES COMPONENTS ********************/
.user-show
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
	width: 100%;
}

.user-button-container
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem;
}

.avatar-pict
{
    width: 100px;
    height: 100px;
}

.user-photo
{
	border: double 3px transparent;
	border-radius: 50%;
	background-image: linear-gradient(white, white),linear-gradient(to top, #333b33, rgb(180, 120, 41));
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 0px 5px 3px #353c3496;
}

.avatar-pict
{
    width: 150px;
    height: 150px;
}

/*********************** FRAMES ********************/
.index-author-list
{
	overflow: hidden;
	width: 33%;
	height: 50px;
}

.index-author-list > p
{
	margin: 0;
	padding: 0;
	text-overflow: ellipsis;
	width: 100%;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.basic-frame-header
{
	display: flex;
	width: 90vw;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.basic-frame-header > *
{
	margin: 0;
	padding: 0.5rem;
}

.basic-frame-content
{
	display: flex;
	width: 90vw;
	padding: 1rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.basic-basic-frame-content> *
{
	margin: 0;
	padding: 0;
}

.event-frame-header
{
	display: flex;
	width: 90vw;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
    overflow: hidden;
}

.event-frame-header > *
{
	margin: 0;
	padding: 0.5rem;
    text-overflow: ellipsis;
	width: 100%;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.event-frame-content
{
	display: flex;
	width: 90vw;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* **********************************FORMS  ***********************/
.form-input
{
	padding : 1rem;
}

.form-check
{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding : 1rem;
	gap: 0.5rem;
}

.form-check > input
{
	background-color: #EFF0E9;
	border: 2px solid #353C34;
	accent-color : #353C34;
	width: 25px;
	height: 25px;
	padding : 0.5rem;
}

.form-check > input:checked
{
	outline: 2px solid #EFF0E9;
	box-shadow: 0px 3px 2px #333b33;
}

.form-check > input[type="radio"]:checked
{
    outline: none;
    box-shadow: 0px 3px 2px #333b33;
}

.form-input > input,.form-input > select
{
	padding: 0.5rem;
	border: 1px solid #353C34;
	background-color: #ffffffc7;
	width: 100%;
}

.form-input > input:focus
{
	background-color: #fefcec;
	outline: 3px solid #333b337d;
}

.form-input > p
{
	margin: 0;
}

.form-multi-button
{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/***************************** FLASH MESSAGES********************************** */
.session-message
{
	position: fixed;
	bottom: 8%;
	z-index: 10;
	width: 100%;
	font-size: 1.1rem;
	font-style: oblique;
	text-shadow: 1px 1px 2px #353C34;
	background: rgba(184, 162, 131, 0.5);
	background: linear-gradient(90deg, rgba(184, 162, 131, 0.5) 0%, rgba(0,0,0,0) 75%);
	color: #fff;
	padding: 1rem;
	margin: 0;
}

.fade-out
{
	animation: fade 3s;
}

@keyframes fade
{
	from
	{
		opacity: 1;
	}

	to
	{
		opacity: 0;
	}
}

 .fungi-texture
{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('images/fungi.jpg');
	background-size: cover;
	-webkit-mask-image: linear-gradient(to bottom, transparent 15%, black 50%, transparent 75%);
	mask-image: linear-gradient(to bottom, transparent 15%, black 50%, transparent 85%);
	filter: opacity(5%)  contrast(100%) saturate(20%) blur(1px);
}

/* ------------------------------- GENERIC CARD COMPONENT ------------------------------- */

.card-wrapper
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1rem;
	break-inside: avoid;
}

.card-header
{
	width: 100%;
	display: flex;
	justify-content: space-between;
    overflow: hidden;
}

.card-header > *
{
	margin: 0;
	padding: 0.5rem;
    text-overflow: ellipsis;
	width: 100%;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.card-content
{
	width: 100%;
	padding: 1rem;
}

.card-button-link
{
	display: flex;
	justify-content: center;
	padding: 0.5rem;
	background: #fffdf5;
	cursor: pointer;
	box-shadow: 0px 1px 3px #353C34;
}

.card-button-link:hover
{
	background: #ffffff;
	border : 3px solid #414e3f;
	transition: all 0.2s ease-in;
}

.card-link
{
	height : 200px;
}

/* ------------------------------- MD SCREENS ------------------------------- */
@media (min-width: 768px)
{
	.session-message
	{
		font-size: 1.5rem;
	}

	.dropdown-container
	{
		flex-direction: row;
		justify-content: end;
		gap: 2rem;
		margin: 0 1.5rem 0 0;
	}

	.index-grid
	{
		width: 100%;
		max-width: 800px;
		margin: 1.5em auto;
		column-count: 2;
		column-gap: 3%;
		column-width: 30%;
		-moz-column-count:2;
		-moz-column-gap: 3%;
		-moz-column-width: 30%;
		-webkit-column-count:2;
		-webkit-column-gap: 3%;
		-webkit-column-width: 30%;
	}


.footer-show {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 1rem;
    width: 100%;
}

.footer-sitemap, .footer-about, .footer-social
{
    width: 25%;
}

/********************** NOTIFICATIONS ********************/

.notification-list
{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}

	/********************* frames ****************/
	.basic-frame-header
	{
		width: 75vw;
	}

	.basic-frame-content
	{
		width: 75vw;
	}

	/******************** PROFILES COMPONENTS ********************/
	.user-button-container
	{
		flex-direction: row;
	}

	.avatar-pict
	{
        width: 250px;
        height: 250px;
	}

	.user-photo
	{
		box-shadow: 0px 5px 3px #353c3496, 0 0 25px #79756c;
	}

	/*********************** EVENTS COMPONENTS ********************/
	.event-content-wrapper
	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: start;
		width: 80%;
		break-inside: avoid;
	}

	/* // ---- Image ----- //  */
	.event-image-infos-wrapper
	{
		width: 60%;
		padding: 0 0  1rem 1rem;
	}

	/* // ---- Links ----- //  */
	.event-links
	{
		width: 100%;
	}

	/* // ---- Infos ----- //  */
	.event-infos
	{
		display: flex;
		width: 35%;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		margin: 0 1rem 1rem 1rem;
		box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.5);
	}

    .event-attendees
{
	grid-template-columns: 1fr;
}

.event-attendees-manage
{
    grid-template-columns: 1fr 1fr;
}

.attendees-manage-pictos
{
    flex-direction: row;
}

	/* // ---- Buttons ----- //  */
	.event-button-grid
	{
		flex-direction: row;
		gap: 0;
	}

	.button-col-1
	{
		width: 55%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
	}

    .button-col-1 > a
    {
       margin: 1rem 0;
    }

	.button-col-2
	{
		width: 40%;
		height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
	}

	/********************* forms ****************/
	/* form content */

    .form-content
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    /* gap: 1rem; */
    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.5);
}

.content-responsive-wrapper
{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    padding: 1rem;
    width: 100%;
}

    .form-wrapper
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		width: 100%;
	}

	.form-large
	{
		width: 100%;
	}

	.form-col
	{
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}

	.form-check
	{
		flex-direction: row;
	}

	.form-multi-button
	{
		flex-direction: row;
	}

    .login-form {
        width: 50%;
    }

    .card-wrapper
    {
        width: 100%;
    }
}

/* ------------------------------- LG SCREENS ------------------------------- */
@media (min-width: 1024px)
{
	.desktop-hidden
	{
		display: none;
	}

	.mobile-hidden
	{
		display: block;
	}

	/* ---------- EVENTS COMPONENTS ----------- */
	.event-content-wrapper
	{
		padding: 1rem;
	}

	/* // ---- Image ----- //  */
    .event-image-block {
        height: 40vh;

    }

    /* // ---- Infos ----- //  */

    .attendee-manage
    {
        flex-direction: row;
        justify-content: space-between;
    }

    .attendee-manage-buttons
    {
        display: flex;
        width: 33%;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 1rem;
        padding-top: 0;
    }

    .attendees-manage-pictos
    {
        width: 50%;
    }

}

/* ------------------------------- 2XL SCREENS ------------------------------- */
@media (min-width: 1536px)
{
	.basic-frame-header
	{
		width: 50vw;
	}

	.basic-frame-content
	{
		width: 50vw;
	}

    .event-attendees
    {
        grid-template-columns: 1fr 1fr;
    }

    .event-attendees-manage
    {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .notification-list
{
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 0rem;
    margin-bottom: 1rem; */
    width: 100%;
    max-height: 60vh;
    /* background-color: transparent; */
    /* background: #232323; */
    overflow: scroll;
}

    .notification-list-ul
{
    margin: 0;
    padding: 0;
    width: 100%;
    /* background: red; */
    /* height: 2px; */
}

.notification-infos
{
    width: 100%;
    /* background: red; */
}
}