.same-line .nav-link {
background-color: white;
color: black;
font-weight: 600;
font-size: 16px;
user-select: none;
border-radius: 12px;
border: 1px solid #0c59b0;
transition: background-color 0.3s, color 0.3s;
display: flex !important;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 16px;
}

.nav-link .circle {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #0c59b0;
background-color: white;
box-sizing: border-box;
position: relative;
transition: background-color 0.3s, border-color 0.3s;
}

.nav-link.active {
background-color: #0c59b0 !important;
color: white !important;
}

.nav-link.active .circle {
background-color: transparent !important;
border-color: white !important;
}

.nav-link.active .circle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: white;
transform: translate(-50%, -50%);
}

.nav-link:hover:not(.active),
.nav-link:focus:not(.active) {
background-color: #e6f0ff;
color: #0c59b0;
}

.nav-link:hover:not(.active) .circle,
.nav-link:focus:not(.active) .circle {
border-color: #0c59b0;
}
.inscrit-stage-box select,
.inscrit-stage-box input,
.inscrit-stage-box textarea {
padding: 10px;
border-radius: 8px;
border: 1px solid #0c59b0;
margin-bottom: 15px;
font-size: 14px;
}
.nav-link:hover .circle::after,
.nav-link:focus .circle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #0c59b0;
transform: translate(-50%, -50%);}









.pack-card {
display: block;
border: 1px solid #0c59b0;
border-radius: 10px;
padding: 15px;
cursor: pointer;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
position: relative;
background-color: white;
min-height: 190px;
}

.click_check_pack {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: -2px;
left: -0.3px;

border: 1px solid #0c59b0;
background-color: white;
transition: all 0.3s ease;
cursor: pointer;
}

.click_check_pack:hover {
border-color: #0c59b0;
background: radial-gradient(white 25%, #0c59b0 51%);
}

.click_check_pack:checked {
border-color: #0c59b0;
background: radial-gradient(#0c59b0 25%, white 51%);
}

.click_check_pack:focus {
outline: none;
box-shadow: 0 0 1px #0c59b0;
}
.pack-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.pack-hours {
    font-size: 0.85em;
    //padding: 2px 6px;
   // border-radius: 8px;
    font-weight: bold;
    background-color: #f1f1f1;
    color: black;
    text-align: center;
border-radius: 8px;
    padding: 4px 12px;
    font-family: Poppins, sans-serif;
    position: absolute;
    inset: 16px 16px auto auto;
    margin: -10px;
    }


.matiereId.active {
box-shadow: #0C59B0 0px 2px 10px 0px !important;
background-color: #0c59b0;
color: white;
}

.matiereId:hover .pack-hours,
.matiereId.active .pack-hours {
background-color: yellow;
}

.matiereId:hover {
box-shadow: #0C59B0 0px 2px 10px 0px !important;
color: #0c59b0;
}
.matiereId.active:hover {
box-shadow: #0C59B0 0px 2px 10px 0px !important;
color: white;
}
.pack-price {
font-size: 1.3em;
font-weight: bold;
margin-top: 5px;
}

.input-checkbox-matiere {

content: "\f00c";
font-family: "FontAwesome";
font-size: 10px;
position: absolute;
top: -7px;
left: 5px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: relative;
cursor: pointer;
border-radius: 3px;
}



.input-checkbox-matiere:checked {
background-color: #0c59b0;
color: white;
border: 1px solid white;
border-color: white
}
.input-checkbox-matiere:hover {
background-color: white;
color: white;
border: 1px solid #0c59b0;


}



.matiereblockstage:hover {
box-shadow: #0C59B0 0px 2px 10px 0px !important;
color: #0c59b0;
}

.matiereblockstage.active {
box-shadow: #0C59B0 0px 2px 10px 0px !important;
color: white;
background-color:#0c59b0
}



button.btn_next_stage_eleve,
button.btn_next_stage_parent,
button.s_website_form_send_inscri,
button.s_website_form_eleve_send_inscri,
a.btn_next_stage_eleve,
a.btn_next_stage_parent,
a.s_website_form_parent_write_eleve,
a.s_website_form_send_inscri,
a.btn_next_cours_eleve,
a.btn_next_cours_parent,
a.s_website_form_eleve_write_parent,
a.btn_next_eleve_ruche,
a.s_website_form_eleve_send_inscri {
background-color: #FFD700 !important;
border-color: #FFD700 !important;
color: black !important;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

button.btn_next_stage_eleve:hover,
button.btn_next_stage_parent:hover,
button.s_website_form_send_inscri:hover,
button.s_website_form_eleve_send_inscri:hover,
a.btn_next_stage_eleve:hover,
a.s_website_form_eleve_write_parent:hover,
a.btn_next_eleve_ruche:hover,
a.s_website_form_parent_write_eleve:hover,
a.btn_next_cours_parent:hover,
a.btn_next_cours_eleve:hover,
a.btn_next_stage_parent:hover,
a.s_website_form_send_inscri:hover,
a.s_website_form_eleve_send_inscri:hover {
background-color: #084080 !important;
border-color: #084080 !important;
color: white !important;
}


a.retour_eleve_ruche:hover,
a.retour_parent_ruche:hover,
a.retour_eleve_parent:hover,
a.retour_eleve_cours:hover,
a.retour_parent_stage:hover,
a.btn_next_stage_parent:hover,
a.retour_parent_eleve:hover,
a.retour_eleve_stage:hover {
background-color: #0c59b0 !important;
border-color: #0c59b0 !important;


}






.same-line {
display: flex;
flex-wrap: nowrap;
gap: 5px;
}

.same-line .nav-item {
flex: 1;
}

.same-line .nav-link {
border-radius: 12px;
border: 1px solid #0c59b0;
display: flex;
gap: 8px;
cursor: pointer;
color: black;
}



.custom-select.is-invalid.custom-select {
    border: 1px solid #dc3545;
}
.custom-select-wrapper {
    position: relative;
    width: 100%;
    margin: 15px 0;
}

.custom-select-wrapper select {
    display: none;
}

.custom-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #0c59b0;
    border-radius: 8px;
    background-color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Poppins, sans-serif;
}

.custom-select:hover {
    box-shadow: #0C59B0 0px 2px 10px 0px !important;
}

.custom-select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: #0C59B0 0px 2px 10px 0px !important;
}

.custom-select::after {
    content: "▼";
    font-size: 12px;
    color: #777;
    transition: transform 0.2s;
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: white;
    z-index: 1000;
    display: none;
    margin-top: 5px;
    font-family: Poppins, sans-serif;
}

.custom-select-wrapper.active .custom-options {
    display: block;
}

.custom-select-wrapper.active .custom-select::after {
    transform: rotate(180deg);
}

.custom-option {
    padding: 10px;
    cursor: pointer;
    border-radius: 9px;
    transition: all 0.2s;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: #f5f5f5;
}

.custom-option.selected {
    background-color: #FFEB3B;
    font-weight: bold;
}

.custom-select-wrapper input[type="tel"]{
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #0c59b0;
    border-radius: 8px;
    font-family: Poppins, sans-serif;
    outline: none;
}


.nav-tabs {
border-bottom: 1px solid transparent;}





.custom-checkbox-label {
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    position: relative;
    gap: 8px;
    user-select: none;
    transition: all 0.2s ease-in-out;
    border: 1px solid #0c59b0;
    border-radius: 9px;
}

.custom-checkbox-label:hover {
border-color: #4CAF50;
        box-shadow: #0C59B0 0px 2px 10px 0px !important;
    color: #0c59b0;

}

.custom-checkbox-label input {
    display: none;
}

.custom-checkbox-span {
    width: 14px;
    height: 14px;
    border: 1px solid #0c59b0;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.custom-checkbox-label input:checked ~ .custom-checkbox-span {
    border-color: #fff;
    background-color: transparent;
}

.custom-checkbox-label input:checked ~ strong {
    color: #fff;
}

.custom-checkbox-label input:checked + .custom-checkbox-span::after {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: 12px;
    color: #fff;
}

.custom-checkbox-label input:checked ~ strong,
.custom-checkbox-label input:checked ~ .custom-checkbox-span {
    background-color: transparent;
}

.custom-checkbox-label input:checked ~ strong,
.custom-checkbox-label input:checked ~ .custom-checkbox-span,
.custom-checkbox-label input:checked ~ * {
    background-color: transparent;
}

.custom-checkbox-label input:checked ~ strong,
.custom-checkbox-label input:checked ~ .custom-checkbox-span {
    background-color: transparent;
}

.custom-checkbox-label input:checked ~ .custom-checkbox-span {
    border-color: #fff;
}

.custom-checkbox-label input:checked + .custom-checkbox-span,
.custom-checkbox-label input:checked ~ strong {
    background-color: transparent;
}

.custom-checkbox-label input:checked ~ .custom-checkbox-span::after {
    content: "✔";
    color: #fff;
}

.custom-checkbox-label input:checked ~ * {
    color: #fff !important;
}
.custom-checkbox-label input:checked ~ strong {
    color: #fff !important;
}
.custom-checkbox-label input:checked ~ .custom-checkbox-span {
    border: 2px solid #fff;
}

.custom-checkbox-label input:checked ~ strong,
.custom-checkbox-label input:checked ~ .custom-checkbox-span,
.custom-checkbox-label:has(input:checked) {
    background-color: #0c59b0 !important;
}












/* Wrapper for both inputs */
.inputs-row {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* spacing between inputs */
    margin: 15px 0;
}

/* Each input container */
.input-group {
    flex: 1;
}

/* Styling the input boxes */
.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #0c59b0;
    border-radius: 8px;
    font-family: Poppins, sans-serif;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.input-group input:focus {
    border-color: #4CAF50;
    box-shadow: 0 2px 8px rgba(12, 89, 176, 0.3);
}

span.h2title {
    color: #0c2340;
}



.btn-next-common.disabled {
    background-color: #C1C5CB !important;
    border-color: #C1C5CB !important;
    opacity: .5;
    cursor: not-allowed;
    color: #000 !important;
}
.custom-search {
    border-bottom: 1px solid #C1C5CB;
}

.custom-search-input {
    width: 100%;
    border: 1px solid #C1C5CB;
    border-radius: 4px;
}