h1{
	font-size: 2.5rem;
}
h2{
	font-size: 2rem;
}
h3{
	font-size: 1.25em;
}
main{
	background:#F9F9F9;
	color:#303E91;
}
.bouton_action{
	margin-top:15px;
	padding:10px 15px;
	background:#303E91;
	color:white;
	border:1px solid white;
	border-radius:5px;
	text-align:center;
}
.bouton_action:hover{
	background:white;
	color:#303E91;
}
.bouton_inactive{
	margin-top:15px;
	padding:10px 15px;
	background:#E8E8E8;
	color:#666666;
	border:1px solid white;
	border-radius:5px;
	text-align:center;
}
.bouton_inactive:hover{
	margin-top:15px;
	padding:10px 15px;
	background:#E8E8E8;
	color:#666666;
	border:1px solid white;
	border-radius:5px;
	text-align:center;
	text-decoration:none;
}
.page_title{
	position:relative;
	border-top:solid 1px #303E91;
	background-image:url("/maca_icerns_portal/static/src/img/bienvenue_numstrat.jpg");
	background-position: 50% 50%;
	background-size: cover;
	background-color:rgba(0, 0, 0, 0.5);
	background-repeat: no-repeat;
	text-align:center;
	color:white;
}
.page_title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity to darken the image */
    z-index: 1;
}
.page_title h1{
	position:relative;
	z-index:2;
}
.page_title ul{
	position:relative;
	z-index:2;
}
.container_full_flex{
	display:flex;
	width:100%;
	flex-wrap: wrap;
}
.deux_col>div{
	width:50%;
	min-width:350px;
}
.une_col{
	justify-content: center;
}
.col_full_flex{
	flex:1;
	padding:15px;
}
.selected{
	background:#303E91;
	color:white;
}
.unselected{
	background:#E8E8E8;
	color:#303E91;
}
.unselected:hover{
	background:#C0C0C0;
	color:white;
}
#parcours{
	padding:5px;
	display:flex;
	list-style-type: none;
}
#parcours>li{
	margin-right:15px;
	width:33%;
	border-radius:5px;
	font-size:1rem;
	text-align:center;
	padding:5px;
}
#modal{
	padding:15px;
	display:none;
	position: absolute;
	top: 1vh;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width:1170px;
	z-index: 9999;
	background-color: rgba(232, 232, 232, 0.9);
	height:98vh;
	border-radius:10px;
}
#button_bar{
	text-align:right;
	font-size:1.6rem;
	
}
#close_modal{
	cursor:pointer;
}
#modal_container{
	height:90vh;
	overflow: auto;
}
#modal_loading{
	display:none;
	position: absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background-color: rgba(232, 232, 232, 0.9);
	z-index: 9999;
}
.loader {
    position: relative;
    width: 64px;
    height: 64px;
    border: 8px solid transparent;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 8px solid transparent;
    border-top-color: #303E91;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader::before {
    width: 48px;
    height: 48px;
    top: 8px;
    left: 8px;
    animation-duration: 0.5s;
}

.loader::after {
    width: 32px;
    height: 32px;
    top: 16px;
    left: 16px;
    animation-duration: 0.75s;
}
/*DATE PICKER*/
.ui-datepicker {
	background: rgba(232, 232, 232, 0.9); /* Change background color */
	border: 0px; /* Change border color */
	padding: 10px; /* Add padding */
	border-radius: 8px; /* Add rounded corners */
	width: 300px; /* Set width */
}

.ui-datepicker-header {
	background: #303E91; /* Change header background color */
	color: white; /* Change header text color */
	border: none; /* Remove header border */
	border-radius: 8px 8px 0 0; /* Round top corners */
}

.ui-datepicker-title {
	font-weight: bold; /* Make title bold */
	font-size: 1.2em; /* Increase font size */
}

.ui-datepicker th {
	color: #303E91; /* Change color of day names */
}

.ui-datepicker td a {
	color: #303E91; /* Change color of day numbers */
	text-decoration: none; /* Remove underline from day numbers */
}

.ui-datepicker td a:hover {
	background: #303E91; /* Change background color on hover */
	color: white; /* Change text color on hover */
}

.ui-datepicker .ui-datepicker-buttonpane {
	background: #303E91; /* Change button pane background */
	border-radius: 0 0 8px 8px; /* Round bottom corners */
}

.ui-datepicker .ui-datepicker-buttonpane button {
	background: white; /* Change button background */
	color: #303E91; /* Change button text color */
	border: 1px solid #fff; /* Add border to buttons */
	padding: 5px 10px; /* Add padding to buttons */
	border-radius: 4px; /* Add rounded corners to buttons */
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
	background: #303E91; /* Change button background on hover */
	color: white; /* Change button text color on hover */
}
.ui-datepicker-prev, .ui-datepicker-next {
            background-color: #303E91; /* Change background color */
            color: white; /* Change text color */
            border: none; /* Remove border */
            border-radius: 50%; /* Make buttons round */
            width: 2em; /* Set width */
            height: 2em; /* Set height */
            display: flex;
            justify-content: center;
            align-items: center;
			cursor:pointer;
        }

.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
	background-color: white; /* Change background color on hover */
	color:#303E91;
}

.ui-datepicker-prev span, .ui-datepicker-next span {
	display: none!important; /* Hide default text */
}

.ui-datepicker-prev::before {
	content: '◄'; /* Custom previous arrow */
	font-size: 1.5em;
}

.ui-datepicker-next::before {
	content: '►'; /* Custom next arrow */
	font-size: 1.5em;
}
.ui-state-highlight{
	background:white !important;
	border:1px solid #303E91 !important;
	font-weight:bold!important;
	color:#303E91 !important;
}
.ui-datepicker td.ui-datepicker-current-day a {
            background-color: #303E91; /* Couleur de fond */
            color: white; /* Couleur du texte */
            border: 1px solid #303E91; /* Bordure */
			font-weight:bold;
        }
@media screen and (max-width: 500px) {
	#parcours{
		padding:5px;
		display:flex;
		list-style-type: none;
		flex-wrap: wrap;
		justify-content: center;
	}
	#parcours>li{
		margin-right:5px;
		margin-bottom:5px;
		width:100%;
		border-radius:5px;
		font-size:1rem;
		text-align:center;
		padding:5px;
	}
	.col_full_flex{
		padding:0px;
	}
}