body {
    margin: 0;
    width: 100%;
    height: auto;
    background-color: #fefffe;
    display: flex;
    flex-direction: column;
}

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

.direction-row {
    display: flex;
    flex-direction: row;
}

/*Header et menus*/

.header {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.header_blue_bar {
    display: flex;
    position: absolute;
    z-index: 0;
    background-color: #B4C4CF;
    width: 97.5%;
    height: 58px;
    border-radius: 12px;
    top: 6px;
}

.header_marine_bar {
    display: flex;
    width: 98.5%;
    z-index: 1;
    background-color: #004C6C;
    border-radius: 12px;
    padding: 10px 0;
    margin-top: 15px;
}

.header_marine_bar img {
    width: 167px;
    height: 40px;
    margin-left: 30px;
}

.header_marine_bar div {
    width: fit-content;
    height: fit-content;
}

.side-menu {
    display: flex;
    height: 1019px;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 20px 0 rgba(92, 115, 160, 0.07);
    width: fit-content;
    z-index: 3;
    bottom: 0;
    padding: 30px 0 48px;
    background-color: white;
}

.side-menu-pages {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.onglet a {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #637381;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 45px;
    text-decoration: none;
    width: 100%;
}

.onglet {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-button img {
    width: 20px;
    height: 20px;
    opacity: 0.5;
    margin: 5px 30px 0 0;
}

.toggle-button{
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;}

.menu-lign {
    border: 1px solid #DFE4EA;
    width: auto;
    margin: 26px 45px;
}

.onglet:hover {
    cursor: pointer;
    color: #004C6C;
    background-color: rgba(0, 76, 108, 0.05);
    border-right: 3px solid #004C6C;
    width: 297px;
}

.side-menu-profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 0px 0px 45px;
}

.side-menu-profile-image {
    width: fit-content;
    height: fit-content;
    border-radius: 40px;
}

.side-menu-profile-image img {
    width: 49px;
    height: 49px;
    border-radius: 40px;
}

.side-menu-profile-text {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

/*--------------------------------------COMPTEUR DE DEMANDES------------------------------------*/

.side-menu-counter {
    padding: 0px 14px;
    height: 34px;
    background-color: rgba(0, 76, 108, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin-right: 45px;
}

.side-menu-counter p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #637381;
}






/*---------------------------------------JAVASCRIPT---------------------------------------------*/

.hidden-menu {
    display: none;
    flex-direction: column;
}

.hidden-menu div {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hidden-menu div:hover {
    cursor: pointer;
}

.hidden-menu a {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #637381;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 55px;
    text-decoration: none;
}

.hidden-menu a:hover {
    color: #004C6C;
}


/*---------------------------------------CSS DU KIT UI------------------------------------------*/


/*Boutons validation*/
button {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.confirm,
.deny {
    width: fit-content;
    border: none;
    border-radius: 6px;
    color: white;
    padding: 13px 34px;
    height: 45px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
}

.deny {
    background-color: #E10E0E;
}

.confirm {
    background-color: #1A8245;
}


button:hover {
    cursor: pointer;
}

/*Boutons*/

.light-button {
    padding: 10px 20px 10px 20px;
    background-color: rgba(0, 76, 108, 0.08);
    border-radius: 7px;
}

.dark-button {
    background-color: #004C6C;
    color: white;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    height: 50px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-decoration: none;
}

.alt-dark-button {
    background-color: #004C6C;
    color: white;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-decoration: none;
    padding: 10px 28px;
    border-radius: 7px;
}

.alt-dark-button a {
    color: white;
    text-decoration: none;
}

.large-dark-button {
    background-color: #004C6C;
    color: white;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-decoration: none;
    padding: 8px 38px;
    border-radius: 7px;
    width: fit-content;
}

.large-dark-button a {
    color: white;
    text-decoration: none;
}

.details-button {
    background-color: rgba(0, 76, 108, 0.08);
    color: #475467;
    text-decoration: none;
        font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.details-button,
.dark-button {
    padding: 13px 28px 13px 28px;
    border-radius: 6px;
}

.light-button,
.details-button,
.dark-button,
.alt-dark-button {
    width: fit-content;
    border: none;
}

.light-button a{
    color: #475467;
}

.dark-button a {
    color: white;
}

.dark-button a,
.light-button a{
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    text-decoration: none;
}

.light-button img {
    width: 16px;
    height: 16px;
    margin-left: 5px;
}

/*Statuts de validation*/

.confirmed,
.pending,
.denied {
    width: fit-content;
    border-radius: 30px;
    padding: 3px 10px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
}

.confirmed {
    color: #1A8245;
    background-color: #DAF8E6;
}

.pending {
    color: #82791A;
    background-color: #F8F5DA;
}

.denied {
    color: #821A1D;
    background-color: #F8DADD;
}

/*Fonts*/

h1 {
    font-size: 28.85px;
    margin-top: 30px;
}

h2 {
    font-size: 24px;
    margin-top: 35px;
}

h1,
h2 {
    font-weight: 600;
    line-height: 24.57px;
    color: #1B3168;
}

h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 24.57px;
    color: rgba(0, 76, 108, 0.78);
    margin: 20px 0 25px;
}


.petit_texte,

.petit_texte,
p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24.57px;
    color: black;
}

p {
    margin: 25px 0;
}

.petit_texte a{
    font-weight: 700;
    font-size: 16px;
    line-height: 24.57px;
    color: #004C6C;
    text-decoration: none;
}

.click-link{
    font-weight: 700;
    font-size: 16px;
    line-height: 24.57px;
    color: #004C6C;
    text-decoration: none;
}

.email-link{
    font-weight: 400;
    font-size: 16px;
    line-height: 24.57px;
    color: #004C6C;
}

a:hover {
    cursor: pointer;
}

.email {
    font-size: 16px;
    line-height: 24.57px;
    color: #004C6C;
    text-decoration: underline;
}

h1,
h2,
h3,
p,
p a,
.petit_texte,
.petit_texte a,
.petit_texte,
.petit_texte a,
.email {
    font-family: "Epilogue", sans-serif;
}

.placeholder {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #9CA3AF;
}

.break-details {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}

.label-input {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #111928;
    margin-bottom: 10px;
}

.label-select {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
}

.label-field {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #111928;
    font-weight: 500;
    margin: 0;
}

.label-fixed-value {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #6B7280;
    font-weight: 500;
    margin: 0;
}

.fixed-value {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #9CA3AF;
    font-weight: 400;
}

.select-option {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
}

.text-no-margin {
    margin: 0;
}

.text-low-margin {
    margin: 5px 0;
}

.job {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #637381;
    margin: 0;
}

.username {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #111928;
    margin: 0;
}

.number {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #004C6C;
    background-color: #F9FAFB;
    border: 2px solid #004C6C;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
}

.number:hover,
.username,
.label-select {
    font-weight: 500;
}

.email,
.placeholder,
.break-details,
.label-input,
.job {
    font-weight: 400;
}

.number:hover {
    background-color: #004C6C;
    color: white;
    cursor: pointer;
}

/*Divs*/

select,
input {
    align-items: center;
}

select {
    min-width: 350px;
    padding: 12px 16px 12px 20px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    margin-left: -220px;
    padding-left: 20px;
}

.select-input {
    background-image: url(images/chevron-en-bas.png);
    background-repeat: no-repeat;
    background-color: white;
    background-position: 95%;
    background-size: 16px 16px;
    min-width: 314px;
    padding: 12px 16px 12px 20px;
}

.date-input {
    background-image: url(images/calendrier.png);
    background-repeat: no-repeat;
    background-color: white;
    background-position: 5%;
    background-size: 16px 16px;
    min-width: 265px;
    margin-bottom: 20px;
    padding: 12px 0px 12px 45px;
    margin-top: 0;
}

textarea {
    min-height: 186px;
    min-width: 56%;
    padding: 20px 15px;
    height: fit-content;
}

.textarea-comment {
    margin: 10px 0 40px;
}

.form-request {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

select,
input,
textarea {
    display: flex;
    border-radius: 6px;
    width: fit-content;
    appearance: none;
    border: 1px solid #DFE4EA;
}

.email-input {
    background-image: url(images/mail.png);
    background-repeat: no-repeat;
    background-color: white;
    background-position: 5%;
    background-size: 16px 16px;
    min-width: 305px;
    margin-bottom: 20px;
    padding: 12px 0px 12px 45px;
}

.email-input::placeholder {
    background-position: 10%;
}

.password-input {
    background-image: url(images/eye.png);
    background-repeat: no-repeat;
    background-color: white;
    background-position: 95%;
    background-size: 16px 16px;
    min-width: 314px;
    margin-bottom: 20px;
    padding: 12px 16px 12px 20px;
}

.small-password-input{
        background-image: url(images/eye.png);
    background-repeat: no-repeat;
    background-color: white;
    background-position: 95%;
    background-size: 16px 16px;
    min-width: 273px;
    margin-bottom: 20px;
    padding: 12px 16px 12px 20px;
}

.filterbox {
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    padding: 10px 14px;
    min-width: 187px;
    min-height: 44px;
    background-color: white;
}

.defaultbox-input {
    min-width: 273px;
    margin-bottom: 20px;
    padding: 12px 16px 12px 20px;
    margin-top: 0;
}

.defaultbox {
    background-color: #F3F4F6;
    border-color: #F3F4F6;
}

.default-email{
        background-image: url(images/mail.png);
    background-repeat: no-repeat;
    background-color: #F3F4F6;
    border-color: #F3F4F6;
    background-position: 5%;
    background-size: 16px 16px;
    min-width: 273px;
    margin-bottom: 20px;
    padding: 10px 0px 12px 37px;
}

.default-select {
    background-image: url(images/chevron-en-bas.png);
    background-repeat: no-repeat;
    background-color: #F3F4F6;
    border-color: #F3F4F6;
    background-position: 95%;
    background-size: 16px 16px;
    min-width: 273px;
    margin-bottom: 20px;
    padding: 12px 16px 12px 20px;
}

.file-input {
    min-width: 273px;
    margin-bottom: 20px;
    padding: 12px 16px 12px 20px;
    margin-top: 0;
}

.stepbox {
    width: 204px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 7px;
    background-color: rgba(0, 76, 108, 0.05);
}

.stepbox p {
    display: flex;
    flex-wrap: wrap;
}

.line {
    max-width: 595px;
    border: 1px solid #004C6C;
}

.filter-info-medium {
    width: 164px;
}

.filter-info-type {
    width: 205px;
    padding-left: 27px;
}

.filter-info-small {
    width: 120px;
}

.filter-info-details {
    width: 118px;
    padding-right: 24px;
}

.filter-info-large {
    width: 589px;
    padding-left: 27px;
}

.filter-info-larger {
    width: 589px;
    padding-left: 27px;
    padding-right: 24px;
}

.filter-info-details,
.filter-info-medium,
.filter-info-small,
.filter-info-type,
.filter-info-large,
.filter-info-larger {
    display: flex;
    align-items: center;
    height: 72px;
}



/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------CORPS-----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/

/*PLACEMENT DU CONTAINER :
<?php
    include "[nom du menu latéral]";
?>
<div class="History">
</div>
*/

.cont2 {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

/*PLACEMENT DE CETTE BALISE:
JUSTE AVANT LE FOOTER, SEULEMENT METTRE UNE BALISE FERMEE
CAR ELLE EST DEJA OUVERTE DANS LE FICHIER DU MENU LATERAL :

</div>
<?php
    include "footer.php";
?>
*/



.title-with-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.title-with-dark-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    margin-top: 30px;
}

.title-with-dark-button h1 {
    margin: 0;
}

.larger-filter {
    width: 558px;
}

.large-filter {
    width: 530px;
}

.small-filter {
    width: 81px;
}

.medium-filter {
    width: 122px;
}

.medium-filter p {
    padding-left: 80px;
}

.type-filter {
    width: 159px;
}

label {
    display: flex;
    flex-wrap: nowrap;
}

/* CSS Pour tout ce qui est de la partie des filtres
Le CSS du dessous reste inchangĆ© (j'ai mĆŖme tout control-c control-v de github mdr)
*/
.filterBar {
    padding: 20px 25px;
    background-color: #F9FAFB;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    max-width: 1103px;
    height: 69px;
}

.filterBar div {
    margin: 0 4px;
}

.filter {
    min-width: 0px;
    height: 24px;
    border-radius: 8px;
    border-width: 1px;
    padding: 10px 14px;

}

.filterMargin {
    margin-right: 2%;
}

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

.list_conge {
    display: flex;
    flex-direction: row;
}

.info {
    padding-top: 16px;
    padding-right: 78px;
    padding-left: 34px;
    padding-bottom: 16px;
}

.containerFilter {
    border-radius: 12px;
    border-width: 1px;
    border: 1px solid #EAECF0;
    width: fit-content;
    max-height: 100%;
    margin-top: 50px;
}

.infoButton {
    width: 184px;
    height: 72;
    border-bottom-width: 1px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;

}

.infoDetail {
    padding-top: 20px;
    padding-right: 24px;
    height: 100%;
    padding-left: 122px;
    margin-bottom: 5.4%;
}

.filterBorderBottom {
    border-bottom: 1px solid #EAECF0;
}

.History {
    margin-top: 1.5%;
    margin-left: 3%;
    width: 75%;
}

/*---------------------------------------PAGE DE CONNEXION------------------------------------------*/

.wholeConnection {
    max-width: 44%;
    text-align: left;
}

.connexion {
    text-align: left;
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
}

input {
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 64%;
    top: 68%;
    transform: translateY(-50%);
    cursor: pointer;
    color: grey;
}

.toggle-password img {
    width: 20px;
    height: 20px;
}

.forgot-password {
    margin-top: 10px;
}

.erreur {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

/*Page d'accueil*/
.wholeAccueil {
    max-width: 700px;
    font-family: 'Epilogue';
}

.timeline-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.steps-container {
    display: flex;
    flex-direction: column;
    justify-content: left;
    width: 860px;
}

.timeline {
    display: flex;
    align-items: center;
    position: relative;
}

.etape {
    border: 2px solid #004080;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    font-weight: bold;
    color: #004080;
}
.etape-noms{
        display: flex;
        justify-content: space-between;
        width: 78%;
        margin: 0;
}

.etape-noms p{
        font-weight: 500;
}

.active {
    background-color: #1b316b;
    color: white;
}

.line {
    width: 250px;
    height: 2px;
    background-color: #1b316b;
}

.descriptions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

.description-box {
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 10px;
    width: 140px;
}

.bottomAccueil {
    margin-top: 40px;
}

.whole_forgot_pword {
    padding-top: 2%;
    padding-left: 3%;
}

@media (max-width: 1023px) {
        .steps-container {
                justify-self: center;
                width: 100%;
                height: 75%;
        }

    .timeline {
        flex-direction: column;
    }

    .line {
        width: 2px;
        height: 125px;
    }

    .descriptions {
        flex-direction: column;
        align-items: center;
        height: 100%;
    }

    .description-box {
        width: 90%;
        margin-bottom: 10px;
    }

    .timeline-container{
        flex-direction: row;
        height: 100%;
        width: 50%;
    }

    .etape-noms{
        flex-direction: column;
        height: 430px;
        gap: 25%;
        margin-left: 10px;
        min-width: 100px;
    }
}

@media (max-width: 600px){
        .descriptions{
                height: 85%;
        }
}

/*------------------------------------PAGE DEMANDE CONGE-------------------------------------------*/
.date {
    display: flex;
    gap: 20px
}

.demande {
    padding: 30px 45px;
}

/* PAGE MON EQUIPE  */
.margin-team {
    padding-left: 20%;
}

.details-padding {
    padding-left: 69px;
}
.background_new_request_message{
    background-color: green;
    width: fit-content;
    padding: 10px;
    border-radius: 16px;
}
.new_request_message{
    color: white;
}

/*----------------------------------BURGER MENU----------------------------------------------------------- */
.hamburger {
  position: fixed;
  z-index: 100;
  top: 26px;
  right: 20px;
  padding: 8px;
  border: none;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(92, 115, 160, 0.25);
}

.closeIcon {
  display: none;
}

.menu {
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.2s;
  top: -20px;
  left: 45%;
  right: 0;
  bottom: 15%;
  z-index: 99;
  background: rgba(255, 255, 255, 0.95);
  color: white;
  list-style: none;
  padding-top: 6rem;
  box-shadow: -10px 10px 20px 0 rgba(92, 115, 160, 0.07);
}

.material-icons {
  font-size: 28px;
  color: #004C6C;
}

.showMenu {
  transform: translateY(0);
}

.menu a{
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: #637381;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 45px;
    text-decoration: none;
}

.menu a:hover {
    color: #004C6C;
}

@media (min-width:1025px) {
  .hamburger {
    display: none;
  }
  .menu {
    display: none;
  }
}

/*------------------------------------RESPONSIVE----------------------------------------*/

.counter-row{
        display: flex;
        align-items: center;
        gap: 10px;;
}

@media (max-width: 1024px){
        .side-menu {
            display: none;
        }

        .History{
                width: 95%;
        }

        .cont2{
                justify-content: center;
        }
}

@media (max-width: 768px){
        textarea{
                min-width: 80%;
        }
}

@media (max-width: 425px){
                .filter-info-large,
                .filter-info-larger{
                width: 150px;
        }
        .large-filter,
        .larger-filter{
                width: 150px;
        }
}

@media (max-width: 550px){
        .menu{
                left: 27%;
        }
                .date{
                flex-direction: column;
                gap: 5px;
                margin-top: 5px;
        }
        .title-with-dark-button{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
        }
}

@media (max-width: 1160px){
        .br-hidden{
                display: none;
        }
}
@media (max-width: 980px){
        .hide0{
                display: none;
        }
                .filter-info-large,
                .filter-info-larger{
                width: 500px;
        }
        .large-filter,
        .larger-filter{
                width: 500px;
        }
}

@media (max-width: 1495px){
        .hide1{
                display: none;
        }
}

@media(max-width: 1375px){
        .hide2{
                display: none;
        }
}

@media(max-width: 740px){
        .hide3{
                display: none;
        }
                .filter-info-large,
                .filter-info-larger{
                width: 300px;
        }
        .large-filter,
        .larger-filter{
                width: 300px;
        }
}

@media(max-width: 565px){
        .hide4{
                display: none;
        }

        .filter-info-medium{
                padding-left: 27px;
        }
}