:root {
    --header-color-font: #0D141C;
    --header-color-logo-font: #0D141C;
    --header-color-border: #E5E8EB;
    --header-color-taskmate: #E8EDF2;
    --header-color-taskmate-hover: #85888b;
    --header-font-size-extra-large: 32px;
    --header-font-size-large: 24px;
    --header-font-size-medium: 18px;
    --header-font-size-regular: 16px;
    --header-font-size-small: 14px;
}


.fragment-header {
    display: flex;
    padding: 0px 40px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #E5E8EB;
}

.fragment-header__logo {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--header-color-logo-font);
    font-feature-settings: 'dlig' on;
    font-family: Inter;
    font-size: var(--header-font-size-medium);
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    text-decoration: none;
    /* 127.778% */
}

.fragment-header__logo img {
    height: 65px;
}

.fragment-header-menu {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
}

.fragment-header-menu__navigation,
.fragment-header-auth {
    display: flex;
    height: 40px;
    align-items: center;
    gap: 36px;
}


.fragment-header-menu__navigation a,
.fragment-header-auth a {
    display: flex;
    align-items: center;
    align-self: stretch;
    color: var(--header-color-font);
    font-feature-settings: 'dlig' on;
    font-family: Inter;
    font-size: var(--header-font-size-small);
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
    /* 150% */
}

.fragment-header-menu__taskmate {
    display: flex;
    height: 40px;
    min-width: fit-content;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    color: var(--header-color-font);
    text-align: center;
    font-feature-settings: 'dlig' on;
    text-overflow: ellipsis;
    font-family: Inter;
    font-size: var(--header-font-size-small);
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    text-decoration: none;
    background: var(--header-color-taskmate);
}

.fragment-header-menu__taskmate:hover {
    background: var(--header-color-taskmate-hover);
}

.fragment-header-menu__navigation a.is-active,
.fragment-header-auth a.is-active {
    font-weight: 700;
    position: relative;
}

.fragment-header-menu__navigation a.is-active::after,
.fragment-header-auth a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--header-color-font);
    border-radius: 2px;
}

.fragment-header-menu__logout {
    display: flex;
    align-items: center;
    align-self: stretch;
    color: var(--header-color-font);
    font-feature-settings: 'dlig' on;
    font-family: Inter;
    font-size: var(--header-font-size-small);
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    text-decoration: none;
}

.fragment-header-menu__logout button {
    all: unset;
    cursor: pointer;
}

.fragment-header-menu__logout:hover {}

@media (max-width:948px) {

    .fragment-header-menu,
    .fragment-header-menu__navigation,
    .fragment-header-auth {
        gap: 16px;
    }

    .fragment-header-menu__navigation a,
    .fragment-header-auth a {
        font-size: 12px
    }

}

@media (max-width:784px) {

    .fragment-header-menu,
    .fragment-header-menu__navigation,
    .fragment-header-auth {
        gap: 8px;
    }

    .fragment-header-menu__navigation a,
    .fragment-header-auth a {
        font-size: 10px
    }

    .fragment-header__logo img {
        height: 48px;
    }

}

@media (max-width:668px) {
    .fragment-header-auth {
        display: none;
    }

}