/* Company SSO header login/account widget. Scoped so Hello Elementor cannot restyle it. */
.csl-header-account {
    --csl-ha-primary: #164b68;
    --csl-ha-primary-dark: #0e354b;
    --csl-ha-accent: #BCE153;
    --csl-ha-text: #173043;
    --csl-ha-muted: #71808a;
    --csl-ha-line: #e3e9ed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.2;
    z-index: 999;
}
.csl-header-account *,
.csl-header-account *::before,
.csl-header-account *::after { box-sizing: border-box; }
.csl-header-account svg { width: 1em; height: 1em; display: block; fill: currentColor; }

body .csl-header-account .csl-header-login-link,
body .csl-header-account .csl-header-account-trigger {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    margin: 0;
    padding: 9px 14px;
    color: var(--csl-ha-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    outline: 0;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
body .csl-header-account .csl-header-login-link:hover,
body .csl-header-account .csl-header-login-link:focus-visible,
body .csl-header-account .csl-header-account-trigger:hover,
body .csl-header-account .csl-header-account-trigger:focus-visible,
body .csl-header-account.is-open .csl-header-account-trigger {
    color: var(--csl-ha-primary);
    background: rgba(22, 75, 104, .06);
    border-color: rgba(22, 75, 104, .12);
    text-decoration: none;
}
.csl-header-login-link svg { width: 18px; height: 18px; }

.csl-header-account-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    display: block;
    border: 2px solid rgba(22, 75, 104, .1);
    border-radius: 50%;
    background: #eef4f6;
}
.csl-header-account-avatar img,
.csl-header-account-menu-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    object-fit: cover;
    border: 0 !important;
    border-radius: 50% !important;
}
.csl-header-account-name {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csl-header-account-chevron {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    transition: transform .18s ease;
}
.csl-header-account.is-open .csl-header-account-chevron { transform: rotate(180deg); }

.csl-header-account-menu {
    position: absolute;
    top: calc(100% + 0px);
    right: 0;
    width: 270px;
    max-width: min(92vw, 360px);
    overflow: hidden;
    padding: 8px;
    color: var(--csl-ha-text);
    background: #fff;
    border: 1px solid var(--csl-ha-line);
    border-radius: 15px;
    box-shadow: 0 18px 48px rgba(17, 45, 61, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transform-origin: top right;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
    z-index: 10000;
}
.csl-header-account.is-open .csl-header-account-menu,
.csl-header-account:focus-within .csl-header-account-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
@media (hover:hover) and (pointer:fine) {
    .csl-header-account--logged-in:hover .csl-header-account-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.csl-header-account-menu-head {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 10px 10px 12px;
    border-bottom: 1px solid #eef1f3;
}
.csl-header-account-menu-avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    display: block;
    padding: 2px;
    background: rgba(188, 225, 83, .32);
    border-radius: 50%;
}
.csl-header-account-menu-identity { min-width: 0; display: block; }
.csl-header-account-menu-identity strong,
.csl-header-account-menu-identity small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csl-header-account-menu-identity strong {
    margin: 0 0 4px;
    color: var(--csl-ha-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}
.csl-header-account-menu-identity small {
    color: var(--csl-ha-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}
.csl-header-account-menu-items { display: grid; gap: 2px; padding-top: 7px; }
body .csl-header-account .csl-header-account-menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    color: #344c59;
    background: transparent;
    border: 0;
    border-radius: 9px;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    transition: background-color .16s ease, color .16s ease;
}
body .csl-header-account .csl-header-account-menu-item:hover,
body .csl-header-account .csl-header-account-menu-item:focus-visible {
    color: var(--csl-ha-primary);
    background: #f2f7f8;
    text-decoration: none;
    outline: 0;
}
.csl-header-account-menu-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #6d818c;
}
.csl-header-account-menu-icon svg { width: 18px; height: 18px; }
body .csl-header-account .csl-header-account-menu-item:hover .csl-header-account-menu-icon { color: currentColor; }
body .csl-header-account .csl-header-account-menu-logout {
    margin-top: 4px;
    padding-top: 10px;
    color: #9b4141;
    border-top: 1px solid #eef1f3;
    border-radius: 0 0 9px 9px;
}
body .csl-header-account .csl-header-account-menu-logout:hover { color: #873434; background: #fff5f5; }

@media (max-width: 767px) {
    .csl-header-account-name { max-width: 130px; }
    .csl-header-account-menu { top: calc(100% + 8px); }
}