@font-face {
    font-family: "Century Gothic";
    src: url("../font/Century Gothic.ttf") format("truetype");
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../font/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Bold";
    src: url("../font/JetBrainsMono-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Bold Italic";
    src: url("../font/JetBrainsMono-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono ExtraBold";
    src: url("../font/JetBrainsMono-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono ExtraBold Italic";
    src: url("../font/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono ExtraLight";
    src: url("../font/JetBrainsMono-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono ExtraLight Italic";
    src: url("../font/JetBrainsMono-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Italic";
    src: url("../font/JetBrainsMono-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Light";
    src: url("../font/JetBrainsMono-Light.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Light Italic";
    src: url("../font/JetBrainsMono-LightItalic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Medium";
    src: url("../font/JetBrainsMono-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Medium Italic";
    src: url("../font/JetBrainsMono-MediumItalic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono SemiBold";
    src: url("../font/JetBrainsMono-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono SemiBold Italic";
    src: url("../font/JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Thin";
    src: url("../font/JetBrainsMono-Thin.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono Thin Italic";
    src: url("../font/JetBrainsMono-ThinItalic.woff2") format("woff2");
}

@font-face {
    font-family: 'Poppins Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Regular'), url('../font/Poppins-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Italic'), url('../font/Poppins-Italic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Thin'), url('../font/Poppins-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Thin Italic'), url('../font/Poppins-ThinItalic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins ExtraLight';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraLight'), url('../font/Poppins-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Poppins ExtraLight Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraLight Italic'), url('../font/Poppins-ExtraLightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Light';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Light'), url('../font/Poppins-Light.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Light Italic'), url('../font/Poppins-LightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Medium'), url('../font/Poppins-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Medium Italic'), url('../font/Poppins-MediumItalic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins SemiBold'), url('../font/Poppins-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Poppins SemiBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins SemiBold Italic'), url('../font/Poppins-SemiBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Bold'), url('../font/Poppins-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Bold Italic'), url('../font/Poppins-BoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraBold'), url('../font/Poppins-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Poppins ExtraBold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins ExtraBold Italic'), url('../font/Poppins-ExtraBoldItalic.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Black';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Black'), url('../font/Poppins-Black.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Black Italic'), url('../font/Poppins-BlackItalic.woff') format('woff');
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../icon/MaterialIcons-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('../icon/MaterialIconsOutlined-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url('../icon/MaterialIconsRound-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url('../icon/MaterialIconsSharp-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Material Icons TwoTone';
    font-style: normal;
    font-weight: 400;
    src: url('../icon/MaterialIconsTwoTone-Regular.otf') format('opentype');
}

.material-icons {
    font-family: 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Vous pouvez changer la taille ici */
    text-transform: none;
    text-align: center;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
}

.material-icons-outlined {
    font-family: 'Material Icons Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Vous pouvez changer la taille ici */
    text-transform: none;
    text-align: center;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
}

.context-menu-icon {
    font-size: 1rem;
    width: 1rem;
    height: auto;
}

.valid-icon {
    color: #4caf50;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.invalid-icon {
    color: #f44336;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.context-menu-title {
    font-size: 1rem;
    margin-left: 0.5rem;
    white-space: nowrap;
    color: #000000;
}

.material-icons.outlined {
    font-family: 'Material Icons Outlined', sans-serif;
}

.material-icons.round {
    font-family: 'Material Icons Round', sans-serif;
}

.material-icons.sharp {
    font-family: 'Material Icons Sharp', sans-serif;
}

.material-icons.twotone {
    font-family: 'Material Icons TwoTone', sans-serif;
    /* autres styles ici */
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Poppins Regular',  "Century Gothic", Helvetica Neue, Arial, sans-serif;
}

h1 {
    color: #007bc2;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #007bc2;
    font-weight: normal;
    margin-bottom: 1.5rem;
    font-family: 'Poppins SemiBold', Lato , sans-serif;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: white;
    font-weight: normal;
    margin: 0;
}

#wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
}

#wrapper header {
    height: 4rem;
}

main {
    flex: 1;
    margin-left: 70px;
    overflow: auto;
}

hr {
    border: 0;
    border-top: 1px solid #c0c0c0;
    margin: 1rem 0;
    width: 100%;
}

.hidden {
    display: none;
}

#main-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: white;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

#user-menu {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1001;
    height:10.5rem;
    width: 6rem;
}

#user-menu-button {
    font-size: 2rem;
    color: #00456f;
    height: 4rem;
    width: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

#user-menu-button:hover {
    cursor: pointer;
    color: #ec6338;
}

#user-menu-dropdown {
    position: fixed;
    right: 2%;
    top : 4rem;
    border: 1px solid #e5e4e4;
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: auto;
    padding: 0.8rem;
    transition: all 0.5s ease-out;
    overflow: hidden;
    max-height: 0;
    z-index: 1002;
    background-color: white;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}


#logout-link {
    text-decoration: none;
    padding: 0.5rem;
    line-height: 1.5rem;
    border: 1px solid #00456f;
    border-radius: 35px;
    background-color: #00456f;
    color: #fff;
    margin: 0.5rem 0;
    width: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logout-icon {
    font-size: 1.2rem;
}

#logout-link:hover {
    background-color: #fff;
    border: 1px solid #00456f;
    color: #00456f;
    transition: 0.1s;
}

#user-menu-name {
    border-radius: 5px;
    color: black;
    background-color: white;
    font-family: 'Poppins Regular',  sans-serif;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}

#user-menu-content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    border-radius: 4px;
    height: 100%;
}

.account-icon {
    font-size: 2.5rem;
}

#navigation-path {
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    margin: 0 0 2.5rem 1.5rem;
    color: #007bc2;
    font-size: 1.3rem;
    font-family: "Poppins Regular",  sans-serif;
    height: 100%;
}

#navigation-path-editor {
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    margin: 0 0 2.5rem 1.5rem;
    color: #007bc2;
    font-size: 1.3rem;
    font-family: "Poppins Regular",  sans-serif;
    height: 100%;
}

#navigation-path > #navigation-client, #navigation-path-editor > #navigation-client, #navigation-path > #navigation-client-link, #navigation-path-editor > #navigation-client-link {
    color: #ec6338;;
}

#navigation-path > #navigation-client-link:hover, #navigation-path-editor > #navigation-client-link:hover {
    color: white;
}

#navigation-path > a, #navigation-path-editor > a {
    margin: 0 0.5rem;
    text-decoration: none;
    color: #007bc2;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

#navigation-path > p, #navigation-path-editor > p {
    margin: 0 0.5rem;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

#navigation-path img, #navigation-path-editor img {
    height: 1.3rem;
    margin-right: 0.5rem;
}

#path-app-logo:hover {
    background-color: #ec6338;
    color: white;
    fill: white;
}

.navigation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#navigation-path > a:hover, #navigation-path-editor > a:hover {
    background-color: #ec6338;
    color: white;
}

#navigation-path > :first-child, #navigation-path-editor > :first-child {
    color: #007bc2;
    display: flex;
    align-items: center;
    justify-content: center;
}

#navigation-path > :nth-child(3), #navigation-path-editor > :nth-child(3) {
    text-transform: capitalize;
    color: #ec6338;
}

#navigation-path > :first-child {
    font-size: 1.5rem;
    width: auto;
    height: auto;
}


.home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#right {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

@media (max-width: 1350px) {
    #navigation-path, #navigation-path-editor, .home-icon, .navigation-icon {
        font-size: 1.2rem;
    }

    #navigation-path img, #navigation-path-editor img {
        height: 1.1rem;
    }
}

@media (max-width: 1050px) {

    #navigation-path, #navigation-path-editor, .home-icon, .navigation-icon {
        font-size: 1rem;
    }

    #navigation-path, #navigation-path-editor {
        flex-wrap: wrap;
    }

    #navigation-path img, #navigation-path-editor img {
        height: 1rem;
    }

}

@media (max-width: 850px) {
    #navigation-path img, #navigation-path-editor img {
        height: 0.9rem;
    }
}