html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* C'est la ligne la plus importante */
}

body,
input,
select,
button,
textarea {
	font-family: Inter, sans-serif;
}

form {
	width: 100%;
}

.sidebar {
	width: 210px;
	color: #344054;
	background: #ffffff;
	border-right: 1px solid #eaecf0;
	height: 100vh;
	overflow-y: auto;
	scrollbar-width: none;
}

.sidebarLink {
	margin: 16px;
	padding: 8px 16px;
	font-size: 16px;
	line-height: 24px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	gap: 12px;
}

.sidebarLink:hover {
	background: #f6f7f9;
	border-radius: 6px;
}

.sidebarLink i {
	width: 30px;
	font-size: 22px;
	text-align: center;
	flex-shrink: 0;
}

.sidebarLink.active {
	color: #344054;
	background: #ebeef3;
	border-radius: 6px;
}

.sidebarLink.active:hover {
	background: #eff5ff;
}

.logoContainer {
	text-align: center;
	padding: 20px 0px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.logoContainer img {
	width: 75px;
	height: 75px;
}

.logoText {
	font-size: 24px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	color: #344054;
}

.container {
	display: flex;
}

.rightContainer {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	box-sizing: border-box;
}

.title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	font-size: 32px;
	font-weight: 600;
	color: #344054;
}

.title a {
	color: #344054;
	text-decoration: none;
}

.title .stageName {
	font-size: 32px;
	font-weight: 400;
	color: #344054;
}

.rightContainer .subtitle {
	flex-shrink: 0;
}

.content {
	padding: 32px 16px;
	width: calc(100% - 210px);
	box-sizing: border-box;
	height: 100vh;
	overflow-y: auto;
}

.content.formPageContent {
	width: 100%;
	backdrop-filter: blur(3px);
}

.subtitle {
	font-size: 16px;
	line-height: 24px;
	color: #667085;
	margin-top: 12px;
	margin-bottom: 32px;
}

.secondaryTitle {
	font-weight: 600;
	font-size: 22px;
	margin-bottom: 12px;
}

.formPageContainer {
	width: 800px;
	margin: 32px auto;
	padding: 32px;
	background: white;
	border-radius: 16px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
}

.formPageHeaderContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 16px;
}

.formPageTitle {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 16px;
}

.formPageSubtitle {
	font-size: 16px;
	line-height: 24px;
	color: #667085;
	margin-top: 12px;
	margin-bottom: 16px;
}

.formPageLogoContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.formPageLogoContainer img {
	width: 30%;
	height: auto;
	flex-shrink: 0;
}

.formPageLink {
	color: #1576bc;
	text-decoration: none;
	cursor: pointer;
}

.formPageLink:hover {
	text-decoration: underline;
}

.formPageForm,
.addCandidateForm {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
}

.formPageForm input,
.addCandidateForm input {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #eaecf0;
	border-radius: 6px;
	font-size: 16px;
	line-height: 24px;
}

.formPageLinkContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
}

.formPageSubtitleEmail {
	font-size: 16px;
	font-weight: 800;
	line-height: 24px;
	color: #667085;
	margin-top: 12px;
	margin-bottom: 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
}

.formPageSubtitleEmail i:hover {
	cursor: pointer;
	transform: scale(1.1);
	transition: all 0.1s ease;
}

.formPageSubtitleEmail i:active {
	cursor: pointer;
	transform: scale(0.9);
	transition: all 0.1s ease;
}

.formPageSubmitButton,
.addCandidateSubmitButton {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #eaecf0;
	border-radius: 6px;
	font-size: 16px;
	line-height: 24px;
	background: #1576bc;
	color: white;
	cursor: pointer;
	font-weight: 600;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.formPageSubmitButton:hover,
.addCandidateSubmitButton:hover {
	background: #1b97f0;
}

.formPageSubmitButton:disabled,
.addCandidateSubmitButton:disabled {
	background: #1576bc;
	cursor: not-allowed;
}

.formPageSubmitButton:disabled:hover,
.addCandidateSubmitButton:disabled:hover {
	background: #1576bc;
}

#formPageAlert,
#addCandidateAlert {
	font-size: 16px;
	line-height: 24px;
	color: white;
	padding: 16px;
	border-radius: 6px;
	margin-bottom: 16px;
}

#formPageAlert.success,
#addCandidateAlert.success {
	background: #196400;
}

.alertContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	margin-bottom: 16px;
}

.alertContainer>.alert {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border-radius: 6px;
	background: #ffd90037;
	border: 1px solid #ffd900;
	gap: 16px;
}

.alertContainer>.alert i {
	font-size: 24px;
	color: #344054;
}

.alertContainer>.alert span {
	font-size: 16px;
	color: #344054;
}

#formPageAlert.error,
#addCandidateAlert.error {
	background: #d14646;
}

.jobsTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: 25px;
	border: 1px solid #ececec;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.jobsTable thead th {
	background: #344054;
	color: white;
	text-align: left;
	padding: 22px 16px;
}

.jobsTable tbody th,
.jobsTable tbody td {
	background: #f9fafb;
	font-weight: 600;
	padding: 18px 16px;
	vertical-align: top;
	text-align: left;
}

.jobsTable tbody tr {
	border-bottom: 1px solid #ececec;
}

.jobsTable tbody tr:nth-of-type(even)>td {
	background-color: #f3f3f3;
}

.jobsTable tbody tr:last-of-type {
	border-bottom: 1px solid #ececec;
}

.jobsTable tbody tr:hover>td {
	background-color: #ebeef3;
	cursor: pointer;
}

.screeningManagerCell {
	display: flex;
	align-items: center;
}

.screeningManagerTd {
	padding: 0 !important;
}

.largeCell {
	padding: 16px;
}

.kpisContainer {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.kpiContainer {
	background: #f9fafb;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 24px;
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #344054;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.kpiTitle {
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
}

.kpiValue {
	font-weight: 600;
	font-size: 48px;
	margin-top: 16px;
}

.stage-refused>rect {
	fill: #ff000024 !important;
}

.subgraph-padding {
	padding: 20px;
}

.node.clickable.hover>rect {
	cursor: pointer;
	fill: #d8d8ff !important;
}

.diagramContainer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.diagram-viewport {
	position: relative;
	width: 90%;
	aspect-ratio: 16/9;
	max-width: 1200px;
}

.diagram-viewport>pre {
	background-color: #f8f9fa;
	background-image: radial-gradient(circle at 1px 1px, #cccccc 1px, transparent 0);
	background-size: 20px 20px;
	border-radius: 16px;
	border: 1px solid #ececec;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.buttonContainer {
	position: absolute;
	top: 35px;
	right: 35px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 10px;
	z-index: 1000;
}

.buttonContainer>button {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #ececec;
	background: #f9fafb;
	cursor: pointer;
}

.buttonContainer>button:hover {
	background: #eff5ff;
}

.candidatesContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0px;
}

.pageInfo {
	font-size: 12px;
	line-height: 24px;
	color: #667085;
	padding: 8px 16px;
	border: 1px solid #ececec;
	background: #f9fafb;
	border-left: none;
}

.searchContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0px;
}

.searchContainer>input {
	flex-grow: 1;
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px 0px 0px 6px;
	font-size: 16px;
	line-height: 24px;
}

.searchContainer>input.jobSearchInput {
	border-radius: 6px 6px 0px 0px;
}

.searchContainer>input:focus {
	outline: none;
	border: 1px solid #1576bc;
	border-radius: 6px 0px 0px 6px;
}

.searchContainer>input.jobSearchInput:focus {
	border-radius: 6px 6px 0px 0px;
}

.sortButtonContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 16px;
}

.button {
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	font-size: 14px;
	line-height: 16px;
	cursor: pointer;
	background: #f9fafb;
	color: #344054;
	font-weight: 600;
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.button:hover {
	background: #eff5ff;
}

.button:active,
.button.active {
	transform: scale(0.98);
	background: #eff5ff;
}

.button#previousPageButton,
.button#nextPageButton {
	border-radius: 0px;
	border-left: none;
}

.button.addButton {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 18px 16px;
	border-radius: 6px;
	border: none;
}

.button.addButton:hover {
	background: #eff5ff;
	cursor: pointer;
	border: none;
}

.button:disabled,
.button:disabled:hover,
.button:disabled:active {
	background: #f9fafb;
	cursor: not-allowed;
	opacity: 0.5;
	transform: none !important;
}

.button.zoom-in,
.button.zoom-out,
.button.zoom-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0px;
}

td:has(.footerButtonContainer) {
	white-space: normal !important;
}

.searchContainer>button {
	width: 42px;
	height: 42px;
	border: 1px solid #ececec;
	background: #f9fafb;
	cursor: pointer;
	border-left: none;
}

.searchContainer>button.nextPageButton {
	border-radius: 0px 6px 6px 0px;
}

.candidatesTable,
.exercisesTable,
.infoTable,
.interviewersTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	border: 1px solid #ececec;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	margin-bottom: 25px;
}

.candidatesTable thead th,
.exercisesTable thead th,
.infoTable thead th,
.interviewersTable thead th {
	background: #344054;
	color: white;
	text-align: left;
	padding: 22px 16px;
}

.candidatesTable tbody th,
.exercisesTable tbody th,
.infoTable tbody th,
.candidatesTable tbody td,
.exercisesTable tbody td,
.infoTable tbody td,
.infoTable tfoot td,
.exercisesTable tfoot td,
.interviewersTable tbody td {
	background: #f9fafb;
	font-weight: 500;
	padding: 18px 16px;
	vertical-align: middle;
	text-align: left;
}

.interviewerFeedbackCell {
	white-space: pre-wrap;
}

tbody#emailTemplateStagesTable td {
	white-space: normal !important;
}

.flexCellContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	white-space: nowrap;
	gap: 12px;
}

.candidatesTable tbody tr,
.exercisesTable tbody tr,
.infoTable tbody tr,
.infoTable tfoot tr,
.exercisesTable tfoot tr,
.interviewersTable tbody tr {
	border-bottom: 1px solid #ececec;
}

.candidatesTable tbody tr:nth-of-type(even)>td,
.exercisesTable tbody tr:nth-of-type(even)>td,
.infoTable tbody tr:nth-of-type(even)>td,
.interviewersTable tbody tr:nth-of-type(even)>td {
	background-color: #f3f3f3;
}

.candidatesTable tbody tr:last-of-type,
.exercisesTable tbody tr:last-of-type,
.infoTable tbody tr:last-of-type,
.interviewersTable tbody tr:last-of-type {
	border-bottom: 1px solid #ececec;
}

.candidatesTable tbody tr:hover>td,
.exercisesTable tbody tr:hover>td,
.interviewersTable tbody tr:hover>td {
	background-color: #ebeef3;
	cursor: pointer;
}

.infoTable tbody tr:hover>td,
.interviewersTable tbody tr:hover>td {
	background-color: #ebeef3;
}

.candidatesTable tbody td>a,
.exercisesTable tbody td>a,
.interviewersTable tbody td>a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	font-size: 18px;
}

.infoTable tbody td>a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	font-size: 14px;
}

.candidatesTable tbody td a>i:hover,
.exercisesTable tbody td a>i:hover,
.infoTable tbody td a>i:hover,
.interviewersTable tbody td a>i:hover {
	transform: scale(1.1);
	transition: all 0.1s ease;
}

.filter-row>td {
	background: #5a6578 !important;
	padding: 0px 16px !important;
	color: white !important;
}

.filter-row:hover>td {
	cursor: default !important;
}

#filterRow0>td {
	padding: 13px 16px !important;
}

td.noWrapCell {
	white-space: nowrap !important;
}

th.stageProcessColumn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

th.stageProcessColumn span {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.deleteFilterButton {
	color: white !important;
	background: none !important;
	border: none !important;
}

.footerButtonContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0px;
}

.no-exercises {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f9fafb;
	border: 1px solid #ececec;
	border-radius: 16px;
	margin-bottom: 16px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	padding: 24px 0px;
}

#addExerciseRow>td {
	padding: 0px;
}

.infoTable tfoot tr>td {
	padding: 0px;
}

.deactivatedExercise {
	opacity: 0.3;
}

.deactivatedExercise>td {
	background-color: #f9fafb !important;
}

.candidate-stage-class>rect {
	fill: #deff96 !important;
	stroke: #356400 !important;
	color: #196400 !important;
	animation: blink 1s ease-in-out infinite;
}

/* Animation de la candidate stage avec fill, stroke et color qui clignote*/

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

.candidateContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.candidateHeaderContainer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	flex-grow: 1;
	flex-basis: 0;
}

.candidateHeader {
	position: sticky;
	top: 0;
	left: 0;
	width: 500px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
	padding: 16px;
	border: 1px solid #ececec;
	border-radius: 16px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	background: #f9fafb;
}

.candidateActions {
	width: calc(100% - 32px);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 16px;
}

.candidateInfo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
}

.candidateInfo>div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.candidateActions>button.acceptButton {
	flex-grow: 1;
	flex-basis: 0;
	background: rgb(34, 83, 63);
	color: white;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	cursor: pointer;
	font-weight: 600;
}

.candidateActions>button.rejectButton {
	flex-grow: 1;
	flex-basis: 0;
	background: rgb(164, 41, 67);
	color: white;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	cursor: pointer;
	font-weight: 600;
}

.acceptButton:hover,
.rejectButton:hover,
.confirmButton:hover,
.cancelButton:hover {
	transform: scale(0.98);
	opacity: 0.8;
	transition: all 0.2s ease;
}

.jobStatus {
	margin-left: 10px;
}

.candidatePortfolioAndCoverLetterContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
}

.candidateCoverLetterContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	flex-grow: 1;
	flex-basis: 0;
	max-width: 500px;
	gap: 16px;
	background: #f9fafb;
	padding: 16px;
	border: 1px solid #ececec;
	border-radius: 16px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.cvViewerContainer {
	flex-grow: 1;
	flex-basis: 0;
	max-width: 800px;
	height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.cvViewerContainer.resumeAIMark-0 {
	box-shadow: 0 0 20px 10px rgba(164, 41, 67, 0.5);
	border-radius: 16px;
	border: 1px solid #ff0000;
}

.cvViewerContainer.resumeAIMark-1 {
	box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.5);
	border-radius: 16px;
	border: 1px solid #ffa500;
}

.cvViewerContainer.resumeAIMark-2 {
	box-shadow: 0 0 20px 10px rgba(0, 128, 0, 0.5);
	border-radius: 16px;
	border: 1px solid #008000;
}

.cvViewerContainer.resumeAIMark-0>embed {
	border: 5px solid #ff0000;
}

.cvViewerContainer.resumeAIMark-1>embed {
	border: 5px solid #ffa500;
}

.cvViewerContainer.resumeAIMark-2>embed {
	border: 5px solid #008000;
}

.cvViewerContainer>embed {
	width: 100%;
	aspect-ratio: 70/99;
	border: 1px solid #ececec;
	border-radius: 16px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.resumeAIMarkContainer {
	display: flex;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 8px;
	padding: 16px;
	border-radius: 16px;
}

.resumeAIMarkContainer.resumeAIMark-0 {
	background: #ff000060;
	border: 1px solid #ff0000;
}

.resumeAIMarkContainer.resumeAIMark-1 {
	background: #ffa50060;
	border: 1px solid #ffa500;
}

.resumeAIMarkContainer.resumeAIMark-2 {
	background: #00800060;
	border: 1px solid #008000;
}

.select2 {
	width: 350px;
}

.select2-container .select2-selection--single.alert {
	border: 1px solid #df9992;
	background-color: #fff9f9;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus-visible,
.select2-container--default .select2-selection--single:active,
.select2-container--default .select2-selection--single[aria-expanded="true"] {
	outline: none;
	border: 1px solid #344054;
}

.select2-option-title {
	font-size: 16px;
	font-weight: 500;
}

.select2-option-title-description {
	font-size: 14px;
	font-weight: 400;
	color: #666;
}

.select2-option-title-description .select2-results__option--highlighted {
	color: #ccc;
}

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

.headerContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 16px;
}

.candidateProfilePictureContainer {
	width: 100px;
	height: 100px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: 1px solid #ececec;
	background: #f9fafb;
	cursor: pointer;
}

.candidateProfilePictureContainer>img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.candidateInfoContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
}

.headerContainerLeft {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

.jobNameLink {
	color: #344054d6;
	text-decoration: none;
	font-size: 24px;
	font-weight: 600;
}

#stageTitle {
	font-size: 24px;
	font-weight: 600;
	color: #344054d6;
}

.tableButton {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #ececec;
	background: #f9fafb;
	cursor: pointer;
}

.tableButton:hover {
	background: #eff5ff;
}

.tableInput {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	font-size: 16px;
	line-height: 24px;
}

.tableTextarea {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	font-size: 16px;
	line-height: 24px;
}

.slackChannelContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	width: 100%;
}

.slackChannelContainer>label {
	font-size: 16px;
	font-weight: 600;
	color: #344054;
	white-space: nowrap;
}

#slackChannelInfo.found,
.slackChannelInfo.found {
	color: #196400;
}

#slackChannelInfo.not-found,
.slackChannelInfo.not-found {
	color: #ff0000;
}

.close-modal {
	font-size: 24px;
	cursor: pointer;
}

.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
	align-items: center;
	justify-content: center;
}

.modal-content {
	background-color: #ffffff;
	margin: 1% auto;
	padding: 16px;
	border: none;
	border-radius: 12px;
	width: 90%;
	max-width: 1000px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	animation: fadeIn 0.3s ease-out;
}

.modal-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ececec;
	padding: 0px 16px 0px 16px;
}

.modal-header h2 {
	font-size: 24px;
	font-weight: 600;
}

.modal-body {
	padding: 16px;
	flex-grow: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

.infoDiv {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}

.infoDiv>.info {
	font-size: 16px;
	font-weight: 400;
	color: #344054;
}

.infoDiv>ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: #34405433;
	border-radius: 6px;
	border: 1px solid #344054;
	padding: 8px 16px;
}

.infoDiv>ul>li {
	font-size: 14px;
	font-weight: 500;
	color: #344054;
}

.activeInfoContainer {
	/* Donne une taille au container pour l'exemple */
	width: 30px;
	height: 30px;

	/* Centre le contenu horizontalement et verticalement */
	display: grid;
	place-items: center;
}

.activeInfoContainer>div {
	/* Force les deux enfants à se superposer dans la même cellule */
	grid-area: 1 / 1;
	border-radius: 50%;
}

.smallCircle {
	width: 10px;
	height: 10px;
	z-index: 2;
	/* S'assure qu'il est au-dessus */
}

.largeCircle {
	width: 30px;
	height: 30px;
}

.smallCircle.active {
	background: rgb(34, 83, 63);
}

.largeCircle.active {
	background: rgb(34, 83, 63, 0.2);
}

.smallCircle.inactive {
	background: rgb(164, 41, 67);
}

.largeCircle.inactive {
	background: rgb(164, 41, 67, 0.2);
}

.candidateLeftContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
}

.iconContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 6px;
	background: #344054;
	color: white;
}

.iconContainer>i {
	font-size: 18px;
	color: white;
}

.iconContainer:hover {
	cursor: pointer;
	background: #445060;
	transition: background 0.2s ease;
}

.stageNamesContainer,
.emailTypesContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.emailTypesContainer {
	background: #344054;
	color: white;
}

.nextStageName,
.sentEmails,
.emailsToBeSent,
.refusedStageName {
	flex-grow: 1;
	flex-basis: 0;
	text-align: center;
	line-height: 2.5;
	border-bottom: 2px solid transparent;
}

.nextStageName:hover,
.refusedStageName:hover {
	cursor: pointer;
	background: #fbfdff;
	border-bottom: 2px solid #f1f6ff;
	transition: background 0.2s ease;
}

.sentEmails:hover,
.emailsToBeSent:hover {
	background: #475772;
	cursor: pointer;
	border-bottom: 2px solid #c5d9ff;
	transition: background 0.2s ease;
}

.nextStageName.active,
.refusedStageName.active {
	border-bottom: 2px solid #344054;
}

.sentEmails.active,
.emailsToBeSent.active {
	border-bottom: 2px solid #c5d9ff;
}

.modal-header:has(.stageNamesContainer, .emailTypesContainer) {
	padding: 0;
}

.stageName {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	color: white;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	position: relative;
	cursor: help;
	white-space: nowrap;
}

.stageName::after {
	content: "Code couleur:\A• Vert: Étape terminée\A• Rouge: Candidat refusé\A• Bleu: Exercices programmés\A• Orange: Action du candidat requise";
	position: absolute;
	top: 120%;
	right: 0;
	margin-bottom: 8px;
	padding: 12px 16px;
	background: #344054;
	color: white;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 400;
	white-space: pre;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	width: 220px;
	text-align: left;
	line-height: 1.6;
}

.stageName::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 2px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #344054;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 1001;
}

.stageName:hover::after,
.stageName:hover::before {
	opacity: 1;
}

.stageName.completed,
.stageName.completed::after {
	background: rgb(34, 83, 63);
}

.stageName.completed::before {
	border-top-color: rgb(34, 83, 63);
}

.stageName.refused,
.stageName.refused::after {
	background: rgb(164, 41, 67);
}

.stageName.refused::before {
	border-top-color: rgb(164, 41, 67);
}

.stageName.scheduled,
.stageName.scheduled::after {
	background: rgb(52, 64, 84);
}

.stageName.scheduled::before {
	border-top-color: rgb(52, 64, 84);
}

.stageName.autonomous,
.stageName.autonomous::after {
	background: rgb(255, 170, 0);
	color: black;
}

.stageName.autonomous::before {
	border-top-color: rgb(255, 170, 0);
}

.tooltip {
	position: relative;
}

.tooltip .tooltipText {
	position: absolute;
	top: 120%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: #344054;
	color: white;
	padding: 8px 16px;
	font-size: 12px;
	border-radius: 7px;
	visibility: hidden;
}

.tooltipText.leftTooltip {
	left: auto;
	right: 0;
	transform: translateX(0);
}

.tooltip:hover .tooltipText,
.filterContainer.tooltip>label:hover .tooltipText {
	visibility: visible;
}

.tooltip:hover:active .tooltipText,
.filterContainer.tooltip>label:hover:active .tooltipText {
	visibility: hidden;
}

.filterContainer.tooltip>label .tooltipText {
	position: absolute;
	top: 0;
	left: 25%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	transform: translateX(0);
	white-space: nowrap;
	border: 1px solid #ececec;
	border-radius: 6px;
	background: #f9fafb;
	color: #344054;
	font-size: 14px;
	padding: 8px 16px;
	font-size: 12px;
	border-radius: 7px;
	visibility: hidden;
}

.smallUserIcon {
	border-radius: 100px;
	width: 50px;
	vertical-align: middle;
	object-fit: cover;
}

button.close-modal {
	background: none;
	border: none;
	cursor: pointer;
}

.canvasContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin-bottom: 32px;
}

.canvaWrapper {
	width: 60%;
	aspect-ratio: 16/9;
	padding: 24px;
	border: 1px solid #ececec;
	border-radius: 16px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	background: #f9fafb;
	margin-bottom: 32px;
}

select#funnelJobSelect,
select#timeSelector {
	width: 60%;
	padding: 12px 8px;
	border: 1px solid #ececec;
	border-radius: 6px;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 12px;
}

.cvsToScreenNumberNotification {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 600;
	color: white;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cvsToScreenNumberNotificationText {
	text-align: center;
	color: white;
}

.redNotification {
	background: rgb(249, 39, 84);
}

.orangeNotification {
	background: rgb(255, 183, 0);
}

.greenNotification {
	background: rgb(56, 130, 100);
}

#jobTitle {
	cursor: pointer;
}

.fa-spin-custom {
	animation: fa-spin-custom 1s linear infinite;
}

@keyframes fa-spin-custom {
	0% {
		transform: rotate(0deg);
	}

	30% {
		transform: rotate(260deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.exercise-row-edit>td {
	cursor: -webkit-grab !important;
	cursor: grab !important;
}

body.is-dragging,
body.is-dragging * {
	cursor: grabbing !important;
}

@-webkit-keyframes wobble-hor-top {

	0%,
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}

	15% {
		-webkit-transform: translateX(-30px) rotate(6deg);
		transform: translateX(-30px) rotate(6deg);
	}

	30% {
		-webkit-transform: translateX(15px) rotate(-6deg);
		transform: translateX(15px) rotate(-6deg);
	}

	45% {
		-webkit-transform: translateX(-15px) rotate(3.6deg);
		transform: translateX(-15px) rotate(3.6deg);
	}

	60% {
		-webkit-transform: translateX(9px) rotate(-2.4deg);
		transform: translateX(9px) rotate(-2.4deg);
	}

	75% {
		-webkit-transform: translateX(-6px) rotate(1.2deg);
		transform: translateX(-6px) rotate(1.2deg);
	}
}

@keyframes wobble-hor-top {

	0%,
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}

	15% {
		-webkit-transform: translateX(-30px) rotate(6deg);
		transform: translateX(-30px) rotate(6deg);
	}

	30% {
		-webkit-transform: translateX(15px) rotate(-6deg);
		transform: translateX(15px) rotate(-6deg);
	}

	45% {
		-webkit-transform: translateX(-15px) rotate(3.6deg);
		transform: translateX(-15px) rotate(3.6deg);
	}

	60% {
		-webkit-transform: translateX(9px) rotate(-2.4deg);
		transform: translateX(9px) rotate(-2.4deg);
	}

	75% {
		-webkit-transform: translateX(-6px) rotate(1.2deg);
		transform: translateX(-6px) rotate(1.2deg);
	}
}

.fa-bell {
	cursor: pointer;
	font-size: 16px;
}

.fa-check {
	font-size: 16px;
}

.fa-bell.wobble-hor-top {
	-webkit-animation: wobble-hor-top 0.8s infinite both;
	animation: wobble-hor-top 0.8s infinite both;
}

#interviewersTableBody>tr>td {
	cursor: default;
}

.headerContainer>button.stageButton {
	width: auto;
	padding: 8px 16px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: 1px solid #ececec;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	background: #344054;
	color: white;
	cursor: pointer;
}

#createSlackChannelButton {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 16px;
}

.form-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

.form-group>label {
	font-size: 16px;
	font-weight: 600;
	color: #344054;
}

.form-group>input {
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	margin-bottom: 16px;
}

.form-group-checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
}

.form-group-checkbox>label {
	font-size: 16px;
	font-weight: 600;
	color: #344054;
}

.footerDivContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.channelNameContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

.channelNameContainer>input {
	width: 100%;
}

.channelNameContainer>span {
	font-size: 14px;
	font-weight: 600;
	color: #667085;
	padding: 8px 16px;
}

.infoActionsContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.infoCVContainer,
.infoActionsContainer {
	flex-grow: 1;
}

.actionsContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin-bottom: 16px;
	width: 100%;
}

.actionsContainer>button.acceptButton {
	background: rgb(34, 83, 63);
	color: white;
	border: none;
	border-radius: 6px;
	padding: 16px 32px;
	cursor: pointer;
	font-weight: 600;
	flex-grow: 1;
	flex-basis: 0;
	width: 100%;
}

.actionsContainer>button.rejectButton {
	background: rgb(164, 41, 67);
	color: white;
	border: none;
	border-radius: 6px;
	padding: 16px 32px;
	cursor: pointer;
	font-weight: 600;
	flex-grow: 1;
	flex-basis: 0;
	width: 100%;
}

#askAgreeModal .modal-content {
	width: 400px;
	height: fit-content;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 16px;
}

#askAgreeModal .modal-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

#askAgreeModal .buttonsContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
}

.confirmButton {
	background: rgb(34, 83, 63);
	color: white;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	cursor: pointer;
	font-weight: 600;
	flex-grow: 1;
}

.confirmButton#rejectWithoutEmailButton {
	background: rgb(34, 65, 83);
	color: white;
}

.confirmButton:disabled,
.cancelButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cancelButton {
	background: rgb(164, 41, 67);
	color: white;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	cursor: pointer;
	font-weight: 600;
	flex-grow: 1;
}

.actionsContainer>button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.emailContainer,
.templateContainer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 16px;
	gap: 32px;
}

#emailContainer,
#scheduleEmailContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

.emailContentContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 16px;
}

.toolbarContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

.toolbarContainer>button {
	height: 50px;
	border: 1px solid #ececec;
	background: #f9fafb;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: none;
	border-top: none;
	flex-grow: 1;
}

.toolbarContainer>button:last-of-type {
	border-left: none;
}

.leftContainer {
	width: 70%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

.rightContainer {
	flex-grow: 1;
}

.emailInputContainer,
.templateInputContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}

.emailContent,
.templateContent {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.emailContentTextarea,
.templateContentTextarea {
	width: 100%;
	height: 300px;
	border: 1px solid #ececec;
	border-radius: 0px 0px 6px 6px;
	font-size: 16px;
	line-height: 24px;
	padding: 8px 16px;
	resize: vertical;
}

.emailPreviewContainer,
.templatePreviewContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	background: #344054;
	color: white;
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	width: calc(100% - 32px);
}

.objectPreviewContainer,
.titlePreviewContainer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

.emailPreviewContainer>span,
.objectPreviewContainer>span,
.titlePreviewContainer>span {
	font-size: 16px;
	font-weight: 600;
	color: white;
}

.emailPreviewSeparator,
.templatePreviewSeparator {
	width: 100%;
	height: 1px;
	background: #ececec;
	margin-bottom: 8px;
}

#emailTemplatePreviewContainer,
#templatePreviewContainer {
	width: 100%;
	height: fit-content;
	font-size: 16px;
	line-height: 24px;
}

#emailTemplatePreviewContainer>a,
#templatePreviewContainer>a {
	color: rgb(0, 255, 247);
	text-decoration: none;
}

#emailTemplatePreviewContainer>a:hover,
#templatePreviewContainer>a:hover {
	text-decoration: underline;
}

.availableVariablesContainer {
	flex-grow: 1;
}

.availableVariablesContainer>h2 {
	font-size: 20px;
	font-weight: 600;
	color: #344054;
	margin-bottom: 16px;
}

.availableVariablesContainer>ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.availableVariablesContainer>ul>li {
	font-size: 16px;
	font-weight: 400;
	color: #344054;
}

.emailContent>input,
.templateContent>input {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px 6px 0px 0px;
	font-size: 16px;
	line-height: 24px;
}

.copyButton>i {
	cursor: pointer;
}

.copyButton>i:hover {
	transform: scale(1.1);
}

.copyButton>i:active {
	transform: scale(0.95);
}

.footerButtonContainer>button#editJob {
	margin-top: 0px;
	background: #344054;
	font-weight: 600;
	font-size: 14px;
	border-radius: 0px 0px 6px 6px;
}

.footerButtonContainer>button#editJob:hover {
	background: #4a5568;
	font-weight: 600;
}

.footerButtonContainer>button#editJob:active {
	transform: scale(0.99);
}

.paramsRow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	margin-bottom: 15px;
}

.paramsRow select {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 7px;
	font-size: 16px;
}

span.stageType {
	display: inline-block;
	padding: 4px 8px;
	font-size: 13px;
	font-weight: 600;
	color: white;
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	white-space: nowrap;
}

.stageType.new {
	background: linear-gradient(40deg, rgb(101, 184, 219), rgb(56, 132, 165));
	color: white;
}

.stageType.refused,
.stageType.offerRefused {
	background: linear-gradient(40deg, rgb(226, 57, 93), rgb(164, 41, 67));
	color: white;
}

.stageType.quiz,
.stageType.screeningCV,
.stageType[class*="quiz&screeningCV"] {
	background: linear-gradient(40deg, rgb(255, 210, 120), rgb(255, 170, 0));
	color: black;
}

.stageType.onlineInterview,
.stageType.finalInterview,
.stageType.hired {
	background: linear-gradient(40deg, rgb(55, 134, 103), rgb(23, 59, 47));
	color: white;
}

.stageType.caseStudy {
	background: linear-gradient(40deg, rgb(102, 133, 255), rgb(142, 70, 153));
	color: white;
}

.stageType.madeOffer {
	background: linear-gradient(40deg, rgb(156, 90, 255), rgb(102, 70, 153));
	color: white;
}

.kpiValue:has(a) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

.kpiValue a {
	font-size: 14px;
	font-weight: 600;
	color: #344054;
	text-decoration: none;
}

.kpiValue>a:has(i) {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.kpiValue a:hover {
	transform: scale(1.1);
}

span.required {
	color: red;
	font-size: 12px;
	font-weight: 600;
}

.candidateQnAItem {
	display: flex;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 8px;
	padding: 0px 16px;
}

.selectContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

.selectContainer>label {
	font-size: 16px;
	font-weight: 600;
	color: #344054;
}

.exerciseSeparator>td {
	background: #344054 !important;
	height: 4px !important;
	padding: 0px !important;
	pointer-events: none !important;
}

#emailTemplateModal .modal-content {
	width: 90%;
	max-width: 1500px;
}

#saveEmailTemplateButton:disabled {
	color: black;
	cursor: not-allowed;
}

.stageProcessRowContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
}

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

.separator {
	width: 100%;
	height: 1px;
	background: #ddd;
}

.emailTemplatesTable tbody tr:hover,
.emailTemplatesTable tfoot tr:hover {
	cursor: pointer;
}

.emailTemplatesTable .footerButtonContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.emailTemplatesTable tfoot tr:hover>td {
	cursor: pointer;
	background: #ebeef3;
}

.emailTemplatesTable .fa-trash:hover {
	transform: scale(1.1);
}

.select2-container--open {
	z-index: 9999999 !important;
}

.emailTemplatesTable,
.modal-body,
.modal-content {
	overflow: visible !important;
}

.stageProcessItem {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.hiringOfficeLogo {
	width: 75px;
	height: 75px;
	border-radius: 50%;
}

.arrowsContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 64px;
	margin-bottom: 16px;
	width: 100%;
}

.arrowButton {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 16px;
	border-radius: 6px;
	background: #f9fafb;
	border: 1px solid #ececec;
	width: 50px;
	height: 50px;
}

.arrowButton:hover {
	background: #eff5ff;
}

.arrowButton:disabled {
	background: #f9fafb;
	border: 1px solid #ececec;
	cursor: not-allowed;
	opacity: 0.5;
}

.infoAndCommentsContainer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

.infoContainer {
	flex-grow: 1;
	flex-basis: 0;
	max-width: 1000px;
}

.commentsContainer {
	width: 30%;
	max-width: 800px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	height: 100%;
}

.stickyCommentsContainer {
	position: sticky;
	top: 0;
	width: 100%;
	height: fit-content;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

textarea#commentsTextarea {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid #ececec;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: #344054;
	resize: vertical;
	min-height: 60px;
	box-sizing: border-box;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-top-left-radius: 0px;
	border-right: none;
}

textarea#commentsTextarea:focus {
	border-radius: 0px 0px 0px 6px;
	outline: none;
	border: 1px solid #00724c !important;
	border-right: none;
}

.commentsContainerInner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-height: 400px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 25px;
	border-radius: 6px;
}

.senderContainer {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
}

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

.sendButtonContainer>button {
	height: 100%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 0px;
}

#commentsContainer {
	height: 100%;
	max-height: 400px;
	border: 1px solid #ececec;
	border-bottom: none;
	border-radius: 6px 6px 0px 0px;
	overflow-y: auto;
}

#commentsList {
	display: flex;
	flex-direction: column;
	padding-top: 16px;
	min-height: 100px;
}

.commentBox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-left: 16px;
	width: fit-content;
	max-width: 80%;
	margin-bottom: 16px;
}

.commentContentContainer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	border: 1px solid #ececec;
	border-radius: 6px;
	padding: 8px;
	gap: 24px;
}

.commentAuthorContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
	width: fit-content;
}

.commentAuthorName {
	font-size: 12px;
	font-weight: 500;
	color: #344054;
	white-space: nowrap;
}

.commentContent {
	font-size: 14px;
	font-weight: 400;
	color: #344054;
	white-space: pre-wrap;
	text-align: left;
	align-self: center;
}

.commentAuthorPicture {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #ececec;
	background: #f9fafb;
}

.commentDateContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.commentDate {
	font-size: 8px;
	font-weight: 500;
	color: #344054a2;
	padding-right: 8px;
	padding-top: 4px;
}

.commentBox.own {
	margin-left: auto;
	margin-right: 16px;
	align-items: flex-end;
}

.commentBox.other {
	margin-left: 16px;
	margin-right: auto;
	align-items: flex-start;
}

.infoCell {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.infoCell>a {
	text-decoration: none;
	color: inherit;
	font-size: 16px;
	font-weight: 500;
}

.candidateQnAContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
	width: calc(100% - 32px);
	padding: 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	background: #f9fafb;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 25px;
}

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

.candidateQnAItemLabel {
	font-size: 14px;
	font-weight: 500;
	color: #344054;
}

.candidateQnAItemAnswer {
	font-size: 14px;
	font-weight: 400;
	color: #344054;
}

.sentEmailItem {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	background: #f9fafb;
	padding: 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 16px;
	width: calc(100% - 34px);
}

.sentEmailsContainerInner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	overflow-y: auto;
	max-height: 500px;
	border: none;
	width: 100%;
}

.sentEmailContentContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
}

.sentEmailContentTitle {
	font-size: 14px;
	font-weight: 500;
	color: #344054;
}

.sentEmailContent {
	font-size: 14px;
	font-weight: 400;
	color: #344054;
	white-space: pre-line;
	text-align: left;
	align-self: center;
	width: 100%;
}

.sentEmailFooterContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 12px;
}

.sentEmailFooterItem {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
}

.sentEmailFooterItem>i,
.sentEmailFooterItem>span {
	font-size: 12px;
	font-weight: 400;
	color: #344054a2;
}

.noEmailsSent {
	font-size: 14px;
	font-weight: 400;
	color: #344054a2;
	text-align: center;
	margin-top: 16px;
	width: 100%;
}

.emailTemplateLink {
	color: rgb(34, 92, 128);
	text-decoration: none;
	font-size: 24px;
	font-weight: 500;
}

.emailTemplateLink:hover {
	color: rgb(34, 83, 63);
}

.rightContainer>.buttonsContainer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rightContainer>.buttonsContainer>button {
	flex-grow: 1;
	flex-basis: 0;
	height: 40px;
	border: 1px solid #ececec;
	background: #f9fafb;
	cursor: pointer;
}

.rightContainer>.buttonsContainer>button:hover {
	background: #eff5ff;
	border-color: #eff5ff;
}

.rightContainer>.buttonsContainer>button:active {
	background: #c3c9d4;
	border-color: #c3c9d4;
}

.rightContainer>.buttonsContainer>button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.changeStageForm,
.scheduleChangeForm {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

.changeStageForm>label,
.scheduleChangeForm>label {
	font-size: 16px;
	font-weight: 600;
	color: #344054;
}

.searchInput {
	padding: 8px 16px;
	vertical-align: middle;
	width: 272px;
	border: 1px solid #ececec;
	border-radius: 6px;
	font-size: 16px;
	line-height: 24px;
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 10;
}

#locationsButton {
	background: #f9fafb;
	cursor: pointer;
	font-size: 14px;
	width: fit-content;
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid #ececec;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #344054;
}

#locationsButton:hover {
	background: #eff5ff;
}

#locationsButton:active {
	background: #c3c9d4;
}

#areAllInterviewsRemoteContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin-bottom: 16px;
	background: #f9fafb;
	padding: 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	width: fit-content;
	cursor: pointer;
}

#areAllInterviewsRemoteContainer:hover {
	background: #f8fbff;
	border-color: #eff5ff;
}

#areAllInterviewsRemoteContainer>label,
#areAllInterviewsRemoteContainer>input {
	cursor: pointer;
}

.scheduleChangeInfoContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	background: #f9fafb;
	padding: 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 25px;
}

.scheduleChangeInfo>.scheduleChangeInfoValue {
	font-size: 14px;
	font-weight: 400;
	color: #344054;
}

.scheduleChangeInfoContainer>button {
	font-size: 14px;
	font-weight: 500;
	color: white;
	background: rgb(164, 41, 67);
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	cursor: pointer;
	margin-top: 16px;
}

.scheduleChangeInfo {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.scheduleChangeInfoTitle {
	font-size: 14px;
	font-weight: 600;
	color: #344054;
}

.interviewerInfoContainer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
}

.interviewerContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin-bottom: 16px;
}

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

.interviewerInfoItem>span {
	font-size: 14px;
	font-weight: 400;
	color: #344054;
}

.interviewerContainer>img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

tr.addExerciseRow>td,
tr.addManagerRow>td {
	padding: 0px;
}

.filterContainer,
.managerFilterContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	width: 100%;
	height: fit-content;
	margin-bottom: 16px;
}

.filterItem {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid #ececec;
	border-radius: 6px;
	background: #f9fafb;
	color: #344054;
	font-size: 14px;
	font-weight: 600;
	line-height: 28px;
}

.filterItem>select {
	width: 250px;
}

.filterItem:has(input[type="checkbox"]) {
	cursor: pointer;
}

.filterItem:has(input[type="checkbox"]):active {
	transform: scale(0.99);
}

.tableCheckbox {
	cursor: pointer;
	margin: 0px;
}

.pingContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: 6px;
}

.pingContainer>i {
	font-size: 16px;
	cursor: pointer;
}

.pingContainer>i:hover {
	transform: scale(1.1);
}

/* Responsive layout */

@media (max-width: 1024px) {
	.content {
		width: 100%;
		padding: 24px 12px;
	}

	.formPageContainer {
		width: 100%;
		margin: 16px auto;
		padding: 24px 16px;
		border-radius: 12px;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
	}

	.formPageLogoContainer img {
		width: 40%;
		max-width: 220px;
	}
}

@media (max-width: 768px) {

	html,
	body {
		height: auto;
		overflow: auto;
	}

	.container {
		flex-direction: column;
	}

	.sidebar {
		width: 100%;
		height: auto;
		border-right: none;
		border-bottom: 1px solid #eaecf0;
	}

	.content {
		width: 100%;
		padding: 24px 12px;
		height: auto;
	}

	.formPageContainer {
		width: 100%;
		margin: 16px auto;
		padding: 24px 16px;
		box-shadow: none;
		border-radius: 12px;
	}

	.formPageTitle {
		font-size: 20px;
		text-align: center;
	}

	.formPageSubtitle,
	.formPageSubtitleEmail {
		font-size: 14px;
		text-align: center;
	}

	.formPageForm,
	.addCandidateForm {
		align-items: stretch;
	}

	.formPageForm input,
	.addCandidateForm input,
	.formPageSubmitButton,
	.addCandidateSubmitButton {
		font-size: 14px;
	}

	.formPageLogoContainer {
		flex-direction: column;
	}

	.formPageLogoContainer img {
		width: 55%;
		max-width: 260px;
	}
}

@media (max-width: 480px) {
	.formPageContainer {
		padding: 20px 12px;
	}

	.formPageTitle {
		font-size: 18px;
	}

	.formPageForm input,
	.addCandidateForm input,
	.formPageSubmitButton,
	.addCandidateSubmitButton {
		font-size: 13px;
	}
}