#formation *{
font-family: "Lato", sans-serif;
}
#formation *,
#reservations-list  *
{ }
.details-date {
display: flex;
gap: 20px;
}
.i-detail {
position: absolute;
align-self: self-end;
width: fit-content; 
margin: 10px 0; 
padding: 5px 10px; 
color: white; 
border-radius: 5px; 
}
@media screen and (max-width: 600px) {
.i-detail {
position: relative;
}
.details-date {
display: flex;
flex-direction: column;
}
}
.register-formation {
color: #144094;
font-weight: bold;
}
#formation {
display: flex;
flex-direction: column;
gap: 15px;
color: #144094;
}
#formation section{
margin: 15px 0;
}
#formation .text-primary{
color: #133B8A;
}
#formation details > summary { }
#formation details > summary::-webkit-details-marker {
display: none;
}
#formation details {
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 15px;
}
#formation label.required::after{
content: "*";
color: #EE7202;
}
#formation hr { border: 1px solid #cfcfcf;
}
#formation input, 
#formation textarea {
background-color: #f2f3ff;
border-radius: 4px;
width: 300px;
padding: 5px 8px;
border: 1px solid #133B8A;
border: 0;
outline: 0;
}
#formation input:focus, 
#formation textarea:focus {
outline: 2px solid #133B8A;
}
@media screen and (max-width: 600px) {
#formation input, 
#formation textarea {
width: 200px;
}
}
#formation input[type="number"] {
width: 100px;
}
#formation input[type="checkbox"] {
width: fit-content;
}
#formation .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#formation .col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#formation .form-group {
display: flex;
flex-direction: column;
gap: 10px;
}
#formation button[type="submit"] {
background: rgb(19,59,138);
background: linear-gradient(90deg, rgba(19,59,138,1) 0%, rgba(34,82,177,1) 100%);
color: white;
width: fit-content;
padding: 8px 15px;
border-radius: 5px;
border: none;
cursor: pointer;
}
#formation .title-section {
font-weight: bolder;
color: #01A6E7;
margin: 10px 0;
font-size: 18pt;
}
#formation .description {
display: flex;
flex-direction: column;
}
#form-reservation-formation {
gap: 20px;
display: flex;
flex-direction: column;
}
#formation .description {
display: flex;
flex-direction: column;    
}
#formation .horaire .horaires {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
#formation .horaire .horaires .horaires-item {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
#formation .horaire .horaires .horaires-item:last-child{
border-right: none;
}
#formation .formation-sended {
background-color: rgb(132, 223, 132, 0.5);
padding: 10px 20px;
border-radius: 5px;
}
#formation {
padding: 20px;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0 0px 8px 0 rgba(44,44,44, 0.1), 0 0px 20px 0 rgba(44,44,44, 0.1);
margin: 20px;
}
#formation .main-formateur,
#formation .formateurs
{
display: flex;
flex-direction: column;
gap: 5px;
}
#reservations-list .formateur-name,
#formation .formateur-name {
background: rgb(19,59,138);
background: linear-gradient(90deg, rgba(19,59,138,1) 0%, rgba(34,82,177,1) 100%);
color: white;
width: fit-content;
padding: 5px 10px;
border-radius: 5px;
}
#formation .formateurs .formateurs-list {
display: flex;
flex-direction: row;
}
#formation .detailsForm {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
#formation .details-form {
box-shadow: 0 0px 8px 0 rgba(44,44,44, 0.1), 0 0px 20px 0 rgba(44,44,44, 0.1);
}
#formation .details-form .detailsForm {
margin: 20px 0;
} #reservations-list {
display: flex;
flex-direction: column;
gap: 15px;
}
#reservations-list details {
padding: 10px 20px;
border-radius: 10px;
box-shadow: 0 0px 8px 0 rgba(44,44,44, 0.1), 0 0px 20px 0 rgba(44,44,44, 0.1);
}
#reservations-list details > summary {
list-style: none;
}
#reservations-list .details-title{
font-weight: bold;
color: #133B8A;
display: flex;
}
#reservations-list summary:hover {
cursor: pointer;
}
#reservations-list .details-content {
padding: 20px 0;
}
#reservations-list .details-content .description {
padding: 20px 0;
}
.formateurs-instructor{
display: flex;
flex-direction: column;
gap: 10px;
}  .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color:  rgb(19,59,138);
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#map-formation {
height: 600px;
width: 100%;
border-radius: 20px;
}