.field-layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-layout input, textarea {
	background: none;
	outline: none;
	border: none;
	font-size: 14px;
	width: 100%;
}

.field-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 5px;
	cursor: text;
	font-family: var(--main-font);
	background-color: var(--gray3-col);
	color: var(--gray1-col);
    border-radius: 10px;
	border-style: solid;
	border-width: 2px;
	font-size: 14px;
	border-color: var(--gray2-col);
	transition: border-color 0.3s;
	transition: background-color 0.3s;
	height: 100%;
}

.field-content:focus-within {
    border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
}

.field-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--gray1-col);
	font-size: 14px;
    font-family: var(--main-font);
    font-weight: var(--big-bold);
}
.input-field {
    background-color: var(--light_gray-col);
    color: var(--gray-col);
    padding: 10px;
    border-radius: 5px;
    height: 35px;
    border: none;
    font-size: 14px;
    font-family: var(--main-font);
}

.input-field-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.input-field-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--gray-col);
    font-family: var(--main-font);
    font-weight: var(--main-bold);
    font-size: medium;
}

.input-field:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--light_gray-col);
}
.button-style {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	padding-left: 15px;
	padding-right: 15px;
    gap: 10px;
    border-radius: 10px;
    border: none;
    font-family: var(--main-font);
    font-size: 15px;
    color: var(--white-col);
    background-color: var(--blue-col);
	transition: background-color 0.3s;
}

.button-style.cancel {
	background-color: var(--gray1-col);
}

.button-style.danger {
	background-color: var(--red-col);
}

.button-style:active {
    transform: scale(0.97);
}
.button-style:hover {
	background-color: color-mix(in srgb, var(--blue-col) 85%, transparent);
}

.button-style.cancel:hover {
	background-color: color-mix(in srgb, var(--gray1-col) 85%, transparent);
}

.button-style.danger:hover {
	background-color: color-mix(in srgb, var(--red-col) 85%, transparent);
}
.link-style {
    color: var(--black-col);
    font-family: var(--main-font);
    font-size: 13px;
}
.info-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    background-color: var(--gray2-col);
    color: var(--black-col);
    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    font-family: var(--main-font);
    letter-spacing: 0.6px;
}

.info-box.info {
    background-color: var(--gray2-col);
    color: var(--gray1-col);
}

.info-box.error {
    color: color-mix(in srgb, var(--red-col) 90%, transparent);
    background-color: color-mix(in srgb, var(--red-col) 20%, transparent);
    border-color: color-mix(in srgb, var(--red-col) 60%, transparent);
}

.info-box.warning {
    color: color-mix(in srgb, var(--orange-col) 90%, transparent);
    background-color: color-mix(in srgb, var(--orange-col) 15%, transparent);
    border-color: color-mix(in srgb, var(--orange-col) 50%, transparent);
}

.info-box.success {
    color: var(--green-col);
    background-color: color-mix(in srgb, var(--green-col) 20%, transparent);
    border-color: color-mix(in srgb, var(--green-col) 60%, transparent);
}

.info-box-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-background {
    background-image: url(/images/backgroundc296396ded0b0a4970d9.svg);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
}

.login-page-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box; 
    background-color: var(--white-col);
	gap: 2px;
	width: 33%;
}

.login-page-children-style {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-bottom: 100px;
}

.login-logo-style {
    height: 200px;
    margin-bottom: auto;
}

.content-style-div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 70%;
}

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

.login-page-buttons-layout {
	width: 100%;
	height: 30px;
}

.login-page-link {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.login-page-link.center {
	justify-content: center;
}

.login-page-link.right {
	justify-content: flex-end;
}
.divider-style {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--gray2-col);
    font-family: var(--main-font);
    font-weight: var(--main-weight);
}

.sep {
    height: 1.5px;
    width: 100%;
    background-color: var(--gray2-col);
}
.navigation-button-style {
	position: relative;
    background: none;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
	padding: 10px;
    color: var(--black-col);
    font-family: var(--main-font);
    font-weight: var(--mid-bold);
    font-size: medium;
    cursor: pointer;
	border-radius: 10px;
    transition: transform 0.1s ease;
	background-color: var(--white-col);
	transition: background-color 0.3s;
}

.navigation-button-style.active {
	color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
}

.navigation-button-style:not(.active):hover {
    background-color: var(--gray3-col);
}

.navigation-button-notification-style {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	right: 10px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	color: var(--white-col);
	background-color: var(--blue-col);
}	
.vertical-divider-style {
    width: 1.5px;
    height: 100%;
    background-color: var(--gray2-col);
}
.avatar-style-container {
	width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--blue-col);
    color: var(--white-col);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
	font-family: var(--main-font);
}
.logo-style-dashboard {
    width: 100%;
    height: 100px;
    justify-content: center;
}

.dashboard-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
	font-family: var(--main-font);
    font-weight: var(--mid-bold);
}

.dashboard-sidebar-layout {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 23%;
    padding: 20px;
	height: 100%;
	box-sizing: border-box; 
	background-color: var(--white-col);
}

.dashboard-sidebar-content {
    display: flex;
    flex-direction: column;
	justify-content: space-around;
	box-sizing: border-box; 
	gap: 10px;
}

.dashboard-rightside-main {
	display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: var(--white-col);
    color: var(--black-col);
}

.dashboard-header-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: right;
	box-sizing: border-box; 
	height: 80px;
	width: 100%;
	background-color: var(--white-col);
}

.dashboard-user-container {
	border-radius: 10px;
	padding: 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	transition: background-color 0.3s;
}

.dashboard-user-container:hover {
	background-color: var(--gray3-col);
}

.dashboard-avatar-container {
	width: 50px;
	height: 50px;
}

.dashboard-main-container {
	display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    background-color: var(--gray3-col);
    gap: 20px;
	overflow-y: auto; 
}

.dashboard-top-layout {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
}

.dashboard-top-button-layout {
	height: 30px;
	display: flex;
	flex-direction: row;
	justify-items: center;
	gap: 20px;
}

.dashboard-top-title-layout {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-items: center;
}

.dashbord-mini-info-layout {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

.dashboard-profile-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.dashboard-profile-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 14px;
	gap: 10px;
	font-family: var(--main-font);
    font-weight: var(--mid-bold);
}
.container-widget-layout {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: 10px;
	padding: 15px;
	gap: 20px;
	border-style: solid;
	border-width: 2px;
	border-color: var(--white-col);
	background-color: var(--white-col);
	box-shadow: 0 4px 8px 0 var(--gray2-col), 0 6px 20px 0 var(--gray2-col);
	transition: border-color 0.3s;
	transition: background-color 0.3s;
	transition: transform 0.15s;
}

.container-widget-layout.active {
	border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
	transform: scale(1.03);
}

.container-widget-title {
	display: flex;
	flex-direction: row;
	gap: 15px;
	font-size: 22px;
	font-weight: var(--big-bold);
}

.container-widget-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
}
.icon-atom-style {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: 10px;
	font-size: 24px;
}
.tag-widget-style {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 5px;
	gap: 20px;
	border-radius: 10px;
	font-size: 12px;
}

.icon-widget-style {
	cursor: pointer;
}
.student-home-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.student-home-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 20px;
}

.student-home-phase-layout {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.student-home-phase-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.student-home-phase-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.student-home-deadline {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-left: 55px;
}

.student-home-info-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.student-home-info-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.info-widget-layout {
	display: flex;
	flex-direction: row;
	gap: 15px;
	height: 100%;
}

.info-widget-text {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--gray1-col);
}

.info-widget-main-container.active {
	background-color: var(--white-col);
}
.warnings-banner {
	width: 100%;
	border: 2px solid var(--gray2-col);
	border-radius: 5px;
	box-sizing: border-box;
	font-family: var(--main-font);
	overflow: hidden;
}

.warnings-banner-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	cursor: pointer;
	background-color: var(--gray2-col);
	user-select: none;
	color: var(--gray1-col);
}

.warnings-banner-header:hover {
	opacity: 0.85;
}

.warnings-banner-summary {
	display: flex;
	align-items: center;
	gap: 12px;
}

.warnings-badge {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.warnings-badge.error {
	color: var(--red-col);
}

.warnings-badge.warning {
	color: var(--orange-col);
}

.warnings-banner-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.warnings-banner-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	font-size: 13px;
	letter-spacing: 0.4px;
	border-top: 1px solid var(--gray2-col);
}

.warnings-banner-item.error {
	color: color-mix(in srgb, var(--red-col) 90%, transparent);
	background-color: color-mix(in srgb, var(--red-col) 8%, transparent);
}

.warnings-banner-item.warning {
	color: color-mix(in srgb, var(--orange-col) 90%, transparent);
	background-color: color-mix(in srgb, var(--orange-col) 6%, transparent);
}

.respo-dashboard-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.encadrant-dashboard-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.encadrant-group-card {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.encadrant-group-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.encadrant-group-title {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}

.encadrant-group-members {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.encadrant-member-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	border-radius: 8px;
	background-color: var(--gray3-col);
}

.encadrant-group-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.encadrant-deliverable-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.respo-dashboard-fixed {
    padding: 1.5rem;
    max-width: 100%;
    overflow-x: hidden; /* Empêche le scroll horizontal */
}

.compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.compact-header h1 {
    font-size: 1.5rem; /* Réduit la taille du titre */
    margin: 0;
}

.compact-header p {
    font-size: 0.9rem;
    color: #666;
}

.compact-export-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    background: #2d3748;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Conteneur vertical des deux sections */
.dashboard-layout-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.compact-phase-card {
    background: white;
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
}

/* Grille de statistiques qui s'adapte à la largeur */
.compact-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Badge de statut discret en haut à droite */
.status-badge-active {
    background: #e6fffa;
    color: #285e61;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #b2f5ea;
}

/* Bordure spéciale pour attirer l'attention de l'étudiant sur sa deadline */
.student-alert-border {
    border-left: 4px solid var(--blue-col) !important;
}

/* Cartes horizontales ultra-compactes */
.mini-info-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.mini-info-card .icon-blue { color: #3182ce; font-size: 1.2rem; }
.mini-info-card .icon-green { color: #38a169; font-size: 1.2rem; }
.mini-info-card .icon-orange { color: #dd6b20; font-size: 1.2rem; }

.mini-info-card div {
    display: flex;
    flex-direction: column;
}

.mini-info-card .label {
    font-size: 0.75rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mini-info-card .value {
    font-size: 1rem;
    font-weight: 700;
    color: #2d3748;
}

.clickable-card:hover {
    border-color: var(--blue-col);
    cursor: pointer;
    background: #f7fafc;
}
.progress-bar-bg {
	position: relative;
    height: 8px;
    background: var(--beige-col);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
	position: absolute;
    height: 8px;
    background: var(--blue-col);
    border-radius: 4px;
}
.ter-widget-info-style {
	display: flex;
	flex-direction: row;
	gap: 20px;
	color: var(--gray1-col);
}

.ter-widget-info-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
}

.ter-widget-info-header {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.ter-widget-info-text {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	flex: 1;
}
.icon-button-close {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 7px;
	border-radius: 10px;
	cursor: pointer;
	color: var(--gray1-col);
	background-color: var(--gray3-col);
	transition: color 0.3s;
	transition: background-color 0.3s;
}

.icon-button-close:hover {
	color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 20%, transparent);
}
.expanded-overflow-menu-layout {
	position: relative;
}

.expanded-overflow-menu {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	right: 0;
	opacity: 0;
	z-index: 1000;
	padding: 8px;
	pointer-events: none;
	width: max-content;
	transition: opacity 0.3s;
}

.expanded-overflow-menu .container-widget-content {
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.expanded-overflow-menu.expanded {
	opacity: 1;
	pointer-events: auto;
}

.overflow-menu-option {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background-color: var(--white-col);
	transition: background-color 0.3s;
	border-radius: 10px;
}

.overflow-menu-option:hover {
	background-color: color-mix(in srgb, var(--blue-col) 20%, transparent);
}
.user-widget-wrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-style: solid;
	border-width: 2px;
	border-color: var(--beige-col);
	background-color: var(--beige-col);
	transition: background-color 0.3s;
	border-radius: 10px;
	height: 50px;
}

.user-widget-wrapper.selected {
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
	border-color: var(--blue-col);
}

.user-widget-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.user-widget-name {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.user-widget-left {
	width: 50px;
	height: 50px;
}

.user-widget-right {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-weight: var(--mid-bold);
	font-size: 14px;
}

.user-selected-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 3px;
	background-color: var(--blue-col);
	top: 10px;
	right: 10px;
	color: var(--white-col);
	font-size: 15px;
	opacity: 0;
	transition: opacity 0.3s;
}

.user-selected-icon.selected {
	opacity: 1;
}

.user-widget-buttons-layout {
	display: flex;
	flex-direction: row;
	gap: 15px;
}
.group-project-widget-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.group-project-widget-title {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	gap: 18px;
}

.group-project-widget-title-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 5px;
}

.group-widget-buttons-layout {
	display: flex;
	flex-direction: row;
	gap: 15px
}

.group-project-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.group-project-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: var(--gray1-col);
	font-weight: var(--small-bold);
	gap: 10px;
}

.group-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	opacity: 0;
	max-height: 0;
	transition: max-height 0.3s;
	transition: opacity 0.3s;
}

.group-content.expanded {
	opacity: 1;
	max-height: 400;
}

.group-content-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.group-add-user-div {
	
}
.modal-dialog-layout {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-dialog-content {
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	gap: 20px;
	background-color: var(--beige-col);
	border-radius: 10px;
	padding: 20px;
	width: 80%;
}

.modal-dialog-content #content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	overflow-y: auto;
}

.modal-dialog-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.modal-dialog-label {
	font-weight: var(--big-bold);
	font-size: 20px;
}
.user-list-layout {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	width: 100%;
	overflow-y: auto; 
}

.user-list-buttons {
	display: flex;
	flex-direction: row;
	height: 30px;
	gap: 20px;
}

.user-list-dialog-content #content {
	height: 600px;
}

.user-select-search {
	height: 30px;
}
.group-inv-button-layout {
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.confirmation-dialog-layout-layout {
	width: 50%;
}

.confirmation-dialog-layout {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	color: var(--grey2-col);
}


.confirmation-text-layout {
	font-size: 13px;
	text-align: center;
	font-weight: var(--mid-bold);
}

.confirmation-dialog-layout #button-content {
	display: flex;
	flex-direction: row;
	height: 30px;
	justify-items: center;
	gap: 10px;
	width: 100%;
}

.confirmation-dialog-layout button {
	flex: 1;
}
.ter-list-page-layout {
	display: flex;
	flex-direction: row;
	gap: 20px;
	width: 100%;
}

.ter-list-group-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ter-list-project-layout {
	flex: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.subject-widget-layout {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.subject-widget-title-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.subject-widget-expand-button-layout {
	display: flex;
	flex-direction: row;
	gap: 10px;
	height: 30px;
}

.subject-widget-title-right {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.subject-widget-tag-layout {
	display: flex;
	flex-direction: row;
	gap: 5px;
	font-weight: var(--mid-bold);
}

.subject-widget-tag-style {
	display: flex;
	flex-direction: row;
	padding: 8px;
	font-size: 12px;
	color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 20%, transparent);
	border-radius: 10px;
	gap: 2px;
}

.subject-widget-footer-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.subject-widget-footer-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	color: var(--gray1-col);
}

.subject-widget-state-style {
	display: flex;
	flex-direction: row;
	padding: 8px;
	font-size: 12px;
	border-radius: 10px;
	gap: 2px;
}
.subject-widget-task-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.subject-widget-expandable {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	word-break: break-word;
  	overflow-wrap: anywhere;
	transition: max-height 0.4s, opacity 0.4s;
}

.subject-widget-expandable.expanded {
	max-height: 500px;
	opacity: 1;
}

.subject-widget-state-style.draft {
	color: var(--gray1-col);
	background-color: color-mix(in srgb, var(--gray1-col) 20%, transparent);
}

.subject-widget-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.subject-widget-expand-button {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.subject-widget-state-style.submitted {
	color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 20%, transparent);
}

.subject-widget-state-style.validated {
	color: var(--green-col);
	background-color: color-mix(in srgb, var(--green-col) 20%, transparent);
}

.subject-widget-state-style.rejected {
	color: var(--red-col);
	background-color: color-mix(in srgb, var(--red-col) 20%, transparent);
}
.number-field-layout {
	display: flex;
	flex-direction: row;
	gap: 10px;
	flex: 1;
	padding: 0px;
	padding-left: 5px;
}

.subject-classement-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.subject-send-button {
	align-self: flex-end;
}
.input-attachement-style {
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: dashed;
	transition: border-color 0.5s;
	transition: background-color 0.5s;
	height: 100px;
}

.input-attachement-style:hover, .input-attachement-style.active {
	border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
}

.input-attachement-main-layout {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.input-file-widget-super-layout {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 16px;
}

.input-file-widget-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: 5px;
	font-size: 25px;
}

.input-file-widget-info-layout {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 15px;
}

.input-file-list-layout {
	display: flex;
	flex-direction: column;
	height: auto;
}
.dropdown-layout {
	position: relative;
	width: 100%;
}

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

.dropdown-content-layout {
	position: absolute;
	top: 120%;
	width: 100%;
	display: flex;
	height: auto;
	flex-direction: column;
	gap: 0px;
}

.dropdown-option-style {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	box-sizing: border-box;
    color: var(--black-col);
    border-radius: 5px;
	width: 100%;
	cursor: pointer;
	transition: background-color 0.3s;
}

.dropdown-option-style:hover {
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
}

.dropdown-option-style.selected {
	background-color: color-mix(in srgb, var(--blue-col) 20%, transparent);
}
.ter-execution-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.ter-execution-upload-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 10px;
}

.ter-execution-deliverable-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
}

.ter-execution-deliverable-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 10px 15px;
	border: 1px solid var(--gray2-col);
	border-radius: 8px;
	background: var(--bg-col);
}

.ter-execution-deliverable-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.ter-execution-deliverable-name {
	font-weight: var(--big-bold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ter-execution-deliverable-meta {
	color: var(--gray1-col);
	font-size: 12px;
}

.ter-page-container-layout {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.ter-page-left-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.ter-widget-title-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	height: 100%;
}

.ter-widget-container.selected {
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
	border-color: var(--blue-col);
}

.ter-widget-title-container {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: center;
}

.ter-widget-date-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	color: var(--gray1-col);
	font-size: 15px;
}

.ter-widget-title-right-layout {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ter-widget-icon {
	display: flex;
	padding: 10px;
	font-size: 24px;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 20%, transparent)
}

.ter-widget-date-layout {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}

.ter-widget-info-layout {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 100px;
}

.ter-widget-info-layout-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ter-widget-tag-pos {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 30px;
}

.ter-widget-button-pos {
	position: absolute;
	right: 10px;
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.ter-widget-tick {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 3px;
	background-color: var(--blue-col);
	top: 15px;
	right: 15px;
	color: var(--white-col);
	font-size: 15px;
	opacity: 0;
	transition: opacity 0.3s;
}

.ter-widget-tick.selected {
	opacity: 1;
}
.empty-container-layout {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 30px;
	color: var(--gray1-col);
}
.ter-title-style {
	font-weight: var(--big-bold);
	font-size: 25px;
}
.my-grade-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.my-grade-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px;
}

.my-grade-value {
	font-size: 28px;
	font-weight: var(--big-bold);
	color: var(--blue-col);
}

.my-grade-comment {
	color: var(--gray1-col);
	font-size: 13px;
	padding: 0 10px 10px;
	white-space: pre-wrap;
}

.date-layout-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	height: auto;
}

.ter-list-label-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}

.calender-layout {
	position: absolute;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 9999;
	width: 100%;
	pointer-events: none;
}

.calender-layout.expand {
	opacity: 1;
	pointer-events: auto;
}

.date-input-layout {
	border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
}

.date-selection-content {
	width: 100%;
}

.date-selection-content-layout {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.calender-layout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: auto;
}

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

.calender-title {
	font-weight: 400;
}

.calender-content-style {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
  	grid-template-rows: repeat(6, auto);
	width: 100%;
}

.calender-cell {
	--radius: 10px;
	border-radius: var(--radius);
	padding: 6px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.3s;
	border-style: solid;
	border-width: 0px;
	border-radius: 6px;
	padding: 7px;
}

.calender-cell.between {
	border-radius: 0px 0px 0px 0px;
	border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 40%, transparent);
	color: var(--blue-col);
}

.calender-cell.first {
	border-radius: var(--radius) 0px 0px var(--radius);
	border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 40%, transparent);
	color: var(--blue-col);
}

.calender-cell.last {
	border-radius: 0px var(--radius) var(--radius) 0px;
	border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 40%, transparent);
	color: var(--blue-col);
}

.calender-cell:hover {
  	background-color: var(--gray2-col);
}
.ter-list-addter-row {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.ter-list-addter-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ter-list-buttons {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 20px;
}

.ter-list-modal-content {
	flex: 1;
}

.ter-list-buttons button {
	flex: 1;
}

.ter-list-modal-style #content {
	height: 500px;
}
.conv-layout {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 10px;
	gap: 15px;
	border-style: solid;
	border-width: 2px;
	border-color: var(--beige-col);
	background-color: var(--beige-col);
	box-sizing: border-box;
	border-radius: 10px;
	transition: border-color 0.3s;
	transition: background-color 0.3s;
	transition: transform 0.15s;
}

.conv-name {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

.conv-last-message {
	display: flex;
	flex-direction: row;
	gap: 5px;
	align-items: center;
	font-size: 13px;
	color: var(--gray1-col);
}

.conv-layout.active {
	border-color: var(--blue-col);
	background-color: color-mix(in srgb, var(--blue-col) 10%, transparent);
	transform: scale(1.03);
}

.conv-content-layout {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.message-layout {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.message-content-layout {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 14px;
	max-width: 50%;
}

.message-style-content {
	background-color: var(--beige-col);
	box-sizing: border-box;
	padding: 10px;
	border-radius: 10px;
	overflow-wrap: break-word;
}

.message-style-date {
	color: var(--gray1-col);
}

.message-style-date.left {
	align-self: flex-start;
}

.message-style-date.right {
	align-self: flex-end;
}

.message-layout.left {
	justify-content: flex-start;
}

.message-layout.right {
	justify-content: flex-end;
}
.chat-layout-style {
	display: flex;
	flex-direction: row;
	gap: 20px;
	height: 100%;
}

.chat-sidebar-layout {
	height: 100%;
	flex: 1;
}

.chat-content-layout {
	display: flex;
	flex-direction: column;
	flex: 2;
	height: 100%;
}

.chat-content-messages {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	overflow-y: auto;
}

.chat-content-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 30px;
	gap: 10px;
}
.tag-selection-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
}

.tag-selection-layout {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.tag-selection-container input {
	width: auto;
}
.input-area-layout {
	height: auto;
}

.input-area-style {
	background: none;
	outline: none;
	border: none;
	resize: none;
	flex: 1;
}
.subject-page-main-layout {
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: 100%;
}

.subject-page-sub-layout {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	height: 100%;
}

.project-modal-style {
	height: 90%;
}

.user-selection-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	height: 200px;
	overflow-y: auto;
	width: 100%;
}

.user-selection-content input {
	flex: 1;     
}

.user-selection-input {
	display: flex;
	flex-direction: row;
}
.grade-widget-header {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
}

.grade-widget-title {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	gap: 18px;
}

.grade-widget-title-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 5px;
}

.grade-widget-expand-button {
	position: absolute;
	top: 0px;
	right: 0px;
}

.grade-widget-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.2s, opacity 0.2s;
}

.grade-widget-content.expanded {
	max-height: 500px;
	opacity: 1;
}

.grade-widget-buttons-layout {
	display: flex;
	flex-direction: row;
	gap: 15px;
}

.grade-widget-sub-style {
	display: grid;
	grid-template-columns: 20px 1fr 80px 40px auto;
	align-items: center;
	font-size: small;
	font-weight: var(--small-bold);
	min-width: 250px;
	padding: 10px;
	color: var(--gray1-col);
	border-radius: 10px;
	background-color: var(--beige-col);
}
.group-view-selection-modal {
	width: 50%;
}
.ter-admin-button-nav-layout {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.ter-admin-selected-ter-title {
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.users-table-style {
    text-align: left;
    width: 100%;
    border-spacing: 0;
    border-style: solid;
    border-radius: 10px;
	border-color: var(--white-col);
    font-size: 14px;
	box-shadow: 3px 3px 5px var(--gray2-col)
}

.users-table-style th {
    padding: 10px;
	background-color: var(--white-col);
}

.users-table-avatar-container {
	width: 40px;
	height: 40px;
}

.users-table-style td {
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-color: var(--gray2-col);
	background-color: var(--white-col);
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    padding: 10px;
}

.users-table-options {
	display: flex;
	flex-direction: row;
	gap: 12px;
	font-size: 18px;
}

.users-table-tag-layout {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.users-table-user-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
}



.stage-offre-list-layout {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.notif-card {
    display: flex;
    background: white;
    border: 1px solid var(--light_gray-col); 
    padding: 15px;
    cursor: pointer;
    transition: transform 0.1s;
    align-items: center;
}

.notif-card:hover {
    transform: scale(1.01);
}

.notif-card.is-unread {
    border-left: 5px solid var(--blue-col); 
}

.notif-card.is-read {
    opacity: 0.6;
}

.notif-indicator {
    width: 30px;
}

.blue-dot {
    width: 12px;
    height: 12px;
    background-color: var(--blue-col); 
    border-radius: 50%;
}

.notif-body {
    flex: 1;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.notif-title {
    font-weight: bold;
    font-size: 16px;
}

.notif-date {
    font-size: 12px;
    color: var(--gray-col);
}

.notif-text {
    margin: 0;
    font-size: 14px;
    color: var(--dark_gray-col); 
}
.notif-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
}

.mark-all-read-btn {
	background: none;
	border: 1px solid var(--blue-col);
	color: var(--blue-col);
	padding: 8px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	align-self: flex-start;
	transition: background-color 0.2s;
}

.mark-all-read-btn:hover {
	background-color: var(--blue-col);
	color: white;
}

.notif-preferences {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.notif-prefs-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;
}

.notif-pref-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
}

.notif-pref-item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--blue-col);
	cursor: pointer;
}

.profile-page-layout {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.profile-page-right-layout {
	display: flex;
	flex: 2;
	gap: 20px;
	flex-direction: column;
}

.profile-page-left-layout {
	flex: 1;
}

.profile-page-avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	gap: 20px;
}

.profile-page-info {
	display: flex;
	flex-direction: column;
	gap: 20px
}
.help-container-layout {
	display: flex;
	flex-direction: row;
	gap: 15px;
	height: 100%;
}

.help-container-text {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: space-between;
}
.help-page-widget-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}
body {
    margin: 0px;
    padding: 0px;
	overflow: hidden;
}

:root {
    --deep_blue-col: #26266e;
	--blue-col: #256ae1;
    --cyan-col: #2596be;
    --black-col: #333333;
    --gray1-col: #636363;
	--gray2-col: #e8e8e8;
	--gray3-col: #f9f9f9;
    --white-col: #ffffff;
	--beige-col: #f1f5f9;
    --red-col: #ff3333;
    --green-col: #63ba63;
	--purple-col: #a000a3;
    --yellow-col: #ffcc00;
    --orange-col: #ff6600;
    --main-font: sans-serif;
    --big-bold: 800;
	--mid-bold: 500;
	--small-bold: 200;
}