@font-face {
    font-family: "Font Awesome 6 Pro Brands";
    src:
        url("fonts/fa-brands-400.ttf") format("ttf"),
        url("fonts/fa-brands-400.woff2") format("woff2");
}
 
@font-face {
    font-family: "Font Awesome 6 Pro Regular";
    src:
        url("fonts/fa-regular-400.ttf") format("ttf"),
        url("fonts/fa-regular-400.woff2") format("woff2");
}
 
@font-face {
    font-family: "Font Awesome 6 Pro Solid";
    src:
        url("fonts/fa-solid-900.ttf") format("ttf"),
        url("fonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

header {
    position: relative;
    display: flex;
    height: 80px;
    max-width: 100%;
    padding: 0px 255px;
    justify-content: space-between;
    align-items: center;
    background: var(--basiques-blanc-ffffff, #FFF);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
    z-index: 1;
}
a.logo-link {
    height: 34px;
}
.dashboard-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    padding: 5px;
    align-items: center;
    gap: 10px;
    background: var(--basiques-blanc-ffffff, #FFF);
}
.events-link {
    text-decoration: none;
    display: flex;
    height: 100%;
    padding: 5px;
    align-items: center;
    gap: 10px;  
    background: var(--basiques-blanc-ffffff, #FFF);
}
.dashboard-link:hover {
    background-color: #E83E66;
}
.dashboard-link:hover span #dashboard-icon, .dashboard-link:hover span #dashboard-text {
    color: white;
}
.events-link:hover span #events-icon, .events-link:hover span #events-text {
    color: white;
}
.events-link:hover,
.dashboard-link:hover {
    background-color: #E83E66;
    color: white;
    text-decoration: none;
}
.dashboard-link.selected {
    border-bottom: 5px solid #E83E66;
}
.events-link.selected {
    border-bottom: 5px solid #E83E66;
}
.dashboard-link span {
    width: 120px;
    display: flex;
    justify-content: center;
}
.dashboard-link:not(.selected) span {
    width: 120px;
    margin-bottom: 5px;
}
.events-link span {
    width: 120px;
    display: flex;
    justify-content: center;
}
.events-link:not(.selected) span {
    width: 120px;
    margin-bottom: 5px;
}
#dashboard-icon, #events-icon {
    margin-top: 4px;
    margin-right: 10px;
    float:left;
    color: var(--scope-rose-e-83-e-66, #E83E66);
}
#logout-icon {
    float: left;
    padding-left: 4px;
    margin-top: 7px;
    margin-right: 12px;
    color: var(--scope-violet-7-a-67-ab, #7A67AB);
}
#admin-icon {
    float: left;
    padding-left: 4px;
    margin-top: 7px;
    margin-right: 12px;
    color: var(--scope-violet-7-a-67-ab, #E83E66);
}

#admin-icon:before {
    content: '\f013';
    font-family: "Font Awesome 6 Pro Solid";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    float:left;
    margin-left:15px;
    margin-top:3px;
}

#logout-icon:before {
    content: '\f2f5';
    font-family: "Font Awesome 6 Pro Solid";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    float:left;
    margin-left:15px;
    margin-top:3px;
}
#dashboard-text, #events-text {
    color: var(--scope-noir-1-d-1-d-1-b, #1D1D1B);
    /* Paragraphes/p - 16px - 1.5 - Open Sans - Bold */
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */ 
}
.header-buttons {
    display: flex;
    padding: 20px 0px;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}
.datetime-events {
    text-decoration: none;
    margin-right: 190px;
    border: none;
    width: 250px;
    height: 25px;
    position: absolute;
}
#datetime-events-text{
    /* Paragraphes/p - 16px - 1.5 - Open Sans - Medium */
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}
#admin-button {
    text-decoration: none;
    margin-right: 150px;
    border: none;
    background-color: white;
    background: url("/images/header/Rectangle.svg") center no-repeat;
    width: 190px;
    height: 40px;
    position: absolute;
    fill: var(--basiques-blanc-ffffff, #FFF);
}
#admin-button:hover {
    background: url("/images/header/RectangleFull.svg") center no-repeat;
}
#admin-button:hover #admin-text, #admin-button:hover #admin-icon {
    color: white;
}
#logout-button {
    text-decoration: none;
    border: none;
    background: url("/images/header/Logout.svg") center no-repeat;
    width: 131px;
    height: 40px;
    position: absolute;
    fill: var(--basiques-blanc-ffffff, #FFF);
}
#logout-button:hover {
    background: url("/images/header/LogoutFull.svg") center no-repeat;
}
#logout-button:hover #logout-text, #logout-button:hover #logout-icon {
    color: white;
}
#admin-text {
    margin-top: 8px;
    color: var(--scope-rose-e-83-e-66, #E83E66);
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}
#logout-text {
    margin-top: 8px;
    color: var(--scope-violet-7-a-67-ab, #7A67AB);
    /* Paragraphes/p - 16px - 1.5 - Open Sans - Bold */
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}
.header-navigation {
    height: 100%;
    display: flex;
    align-items: center;
}
.header-logo {
    margin-right: 30px;
}

@media (max-height: 720px) {
    header {
        height: 60px;
    }
}

@media (max-height: 576px) {
    header {
        height: 50px;
    }
}

@media (max-width: 1280px) {
    header {
        padding: 0 120px;
    }
}

@media (max-width: 1024px) {
    header {
        padding: 0 100px;
    }
}

@media (max-width: 720px) {
    header {
        padding: 0 50px;
    }
}

@media (max-width: 576px) {
    header {
        padding: 0;
    }
}