/* ==========================================================================
   Empower U portal theme
   Loaded after the vendor bundle (common.min.css + style.css) and overrides it.
   All layout chrome uses the eu-* namespace; the tail of this file re-skins the
   vendor component classes (.card/.header/.body/.table/...) that the inner page
   content still relies on.
   ========================================================================== */

:root {
    --eu-primary: #026B4C;
    --eu-primary-2: #016655;
    --eu-primary-dark: #01503A;
    --eu-primary-soft: #EFF8F5;
    --eu-primary-ring: rgba(2, 107, 76, .18);

    --eu-page-bg: #F7F9FD;
    --eu-surface: #FFFFFF;
    --eu-surface-2: #F7F9FD;
    --eu-border: #E7ECF3;
    --eu-border-strong: #D7DEE9;

    --eu-text: #0B1B3F;
    --eu-text-2: #35405C;
    --eu-muted: #66718B;
    --eu-faint: #98A2B3;
    --eu-link: #2F6FD0;

    --eu-green: #1E9E6A;
    --eu-amber: #B45309;
    --eu-red: #C0392B;

    --eu-grad-green: linear-gradient(135deg, #57B07A 0%, #2FB98C 100%);
    --eu-grad-blue: linear-gradient(135deg, #3C96F2 0%, #57B0E9 100%);
    --eu-grad-purple: linear-gradient(135deg, #865CEA 0%, #9A80DA 100%);
    --eu-grad-orange: linear-gradient(135deg, #F97944 0%, #FBAE47 100%);

    --eu-radius: 14px;
    --eu-radius-sm: 10px;
    --eu-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
    --eu-shadow-lg: 0 8px 28px rgba(16, 24, 40, .10);

    --eu-sidebar-w: 248px;
    --eu-topbar-h: 78px;
    --eu-font: 'Inter', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* --------------------------------------------------------------- base ---- */

html, body.eu-body {
    background: var(--eu-page-bg);
}

body.eu-body {
    font-family: var(--eu-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--eu-text-2);
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* buttons and quick-access tiles carry their own colours - .eu-btn-* and
   .eu-quick are less specific than this selector, so anchors styled as either
   must be excluded here */
body.eu-body a:not(.eu-btn):not(.eu-quick) {
    color: var(--eu-link);
    text-decoration: none;
}

body.eu-body a:not(.eu-btn):not(.eu-quick):hover {
    color: var(--eu-primary);
    text-decoration: none;
}

body.eu-body h1, body.eu-body h2, body.eu-body h3,
body.eu-body h4, body.eu-body h5, body.eu-body h6 {
    color: var(--eu-text);
    font-weight: 700;
    margin: 0;
}

.eu-body ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.eu-body ::-webkit-scrollbar-thumb {
    background: #CFD8E6;
    border-radius: 8px;
}

.eu-body ::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------- reset ---- */
/* The vendor bundle carries Materialize, which styles the bare <nav>, <header>
   and <footer> tags (nav gets #ee6e73 and line-height:56px). The chrome uses
   those tags, so neutralise the tag-level rules before the eu-* styles land. */

.eu-body nav.eu-nav,
.eu-body footer.eu-footer,
.eu-body main.eu-content {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    height: auto;
    min-height: 0;
    line-height: 1.5;
    color: inherit;
    width: auto;
}

.eu-body header.eu-topbar {
    background-color: var(--eu-surface);
    background-image: none;
    box-shadow: none;
    height: auto;
    min-height: var(--eu-topbar-h);
    line-height: 1.5;
    color: inherit;
    width: auto;
}

.eu-body aside.eu-sidebar {
    background-color: var(--eu-surface);
    background-image: none;
    box-shadow: none;
    line-height: 1.5;
    color: inherit;
}

/* Materialize forces height/line-height 56px on nav, its links AND the <i>
   glyphs inside; that is what stretched the rows. Neutralise only the box
   metrics here — colours and display stay with the eu-* rules below. */
.eu-body .eu-nav,
.eu-body .eu-nav ul,
.eu-body .eu-nav li,
.eu-body .eu-nav a,
.eu-body .eu-nav i,
.eu-body .eu-nav span {
    height: auto;
    min-height: 0;
    line-height: 1.4;
    float: none;
}

.eu-body .eu-nav ul,
.eu-body .eu-nav li {
    display: block;
    background: none;
}

.eu-body .eu-nav a {
    background: none;
}

.eu-body .eu-topbar a,
.eu-body .eu-topbar button,
.eu-body .eu-footer a,
.eu-body .eu-topbar i,
.eu-body .eu-topbar span {
    line-height: normal;
    height: auto;
    min-height: 0;
    float: none;
}

.eu-body .eu-topbar .eu-icon-btn,
.eu-body .eu-topbar .eu-userbtn,
.eu-body .eu-topbar .eu-burger {
    display: flex;
    height: 40px;
}

.eu-body .eu-help i {
    line-height: 1;
    height: auto;
}

/* -------------------------------------------------------------- shell ---- */

.eu-shell {
    min-height: 100vh;
}

.eu-main {
    margin-left: var(--eu-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .22s ease;
}

.eu-content {
    flex: 1 1 auto;
    padding: 20px 24px 8px;
}

.eu-scrim {
    position: fixed;
    inset: 0;
    background: rgba(11, 27, 63, .45);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

/* ------------------------------------------------------------ sidebar ---- */

.eu-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--eu-sidebar-w);
    background: var(--eu-surface);
    border-right: 1px solid var(--eu-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .22s ease;
}

.eu-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--eu-topbar-h);
    padding: 0 18px;
    border-bottom: 1px solid var(--eu-border);
    flex: 0 0 auto;
}

.eu-brand img {
    max-width: 100%;
    max-height: 52px;
    object-fit: contain;
}

.eu-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 12px 4px;
}

.eu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* top-level link (Dashboard, Pay Slips, Policies, ...) */
.eu-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--eu-radius-sm);
    color: var(--eu-text-2);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .01em;
    transition: background .15s ease, color .15s ease;
}

.eu-nav-link i,
.eu-nav-link .eu-ico {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    font-size: 15px;
    color: var(--eu-primary);
    opacity: .9;
}

.eu-nav-link:hover {
    background: var(--eu-primary-soft);
    color: var(--eu-primary);
}

.eu-nav-link.eu-active {
    background: var(--eu-primary);
    color: #fff;
    box-shadow: 0 4px 12px var(--eu-primary-ring);
}

.eu-nav-link.eu-active i,
.eu-nav-link.eu-active .eu-ico {
    color: #fff;
    opacity: 1;
}

.eu-nav > ul > li {
    margin-bottom: 3px;
}

/* collapsible group */
.eu-group > .eu-nav-link {
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--eu-muted);
    font-weight: 700;
}

.eu-group > .eu-nav-link .eu-caret {
    margin-left: auto;
    font-size: 11px;
    color: var(--eu-faint);
    transition: transform .2s ease;
}

.eu-group.eu-open > .eu-nav-link .eu-caret {
    transform: rotate(180deg);
}

.eu-group > .eu-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.eu-group.eu-open > .eu-sub {
    max-height: 520px;
}

.eu-sub .eu-nav-link {
    padding: 9px 14px 9px 20px;
    font-weight: 500;
    font-size: 13px;
    color: var(--eu-text-2);
}

.eu-sub .eu-nav-link i,
.eu-sub .eu-nav-link .eu-ico {
    font-size: 14px;
    color: var(--eu-muted);
}

.eu-sub .eu-nav-link.eu-active {
    background: var(--eu-primary-soft);
    color: var(--eu-primary);
    font-weight: 600;
    box-shadow: none;
}

.eu-sub .eu-nav-link.eu-active i,
.eu-sub .eu-nav-link.eu-active .eu-ico {
    color: var(--eu-primary);
}

/* help card pinned to the bottom of the sidebar */
.eu-help {
    flex: 0 0 auto;
    margin: 10px 12px 16px;
    padding: 14px;
    border-radius: var(--eu-radius);
    background: var(--eu-primary-soft);
    border: 1px solid #DCEDE6;
    text-align: center;
}

.eu-help-head {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.eu-help-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eu-primary);
    font-size: 19px;
    border: 1px solid #DCEDE6;
}

.eu-help-title {
    font-weight: 700;
    color: var(--eu-text);
    font-size: 13.5px;
    line-height: 1.25;
}

.eu-help-sub {
    color: var(--eu-muted);
    font-size: 11.5px;
}

.eu-help .eu-btn {
    width: 100%;
    margin-top: 12px;
}

/* ------------------------------------------------------------- topbar ---- */

.eu-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--eu-topbar-h);
    background: var(--eu-surface);
    border-bottom: 1px solid var(--eu-border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
}

.eu-burger {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    /* The <button> keeps the UA's 1px 6px padding and the scoped topbar rule
       only sets display:flex, so without these the bars glyph sat top-left of
       the hover pill instead of in its centre. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--eu-radius-sm);
    background: transparent;
    color: var(--eu-text);
    font-size: 18px;
    cursor: pointer;
}

.eu-burger:hover {
    background: var(--eu-surface-2);
}

.eu-welcome {
    min-width: 0;
    flex: 1 1 auto;
}

.eu-welcome-hi {
    font-size: 12.5px;
    color: var(--eu-muted);
    line-height: 1.3;
}

.eu-welcome-name {
    font-size: 21px;
    font-weight: 800;
    color: var(--eu-text);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eu-welcome-meta {
    font-size: 12.5px;
    color: var(--eu-muted);
    margin-top: 2px;
}

.eu-welcome-meta .eu-dot {
    margin: 0 7px;
    color: var(--eu-border-strong);
}

.eu-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.eu-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eu-text-2);
    font-size: 17px;
    background: transparent;
    border: 0;
}

.eu-icon-btn:hover {
    background: var(--eu-surface-2);
    color: var(--eu-primary);
}

.eu-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #E5484D;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-sizing: content-box;
}

.eu-userbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.eu-userbtn:hover {
    background: var(--eu-surface-2);
    border-color: var(--eu-border);
}

.eu-userbtn img,
.eu-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--eu-surface-2);
}

.eu-userbtn-name {
    font-weight: 700;
    color: var(--eu-text);
    font-size: 13.5px;
    line-height: 1.2;
    text-align: left;
}

.eu-userbtn-sub {
    font-size: 11.5px;
    color: var(--eu-muted);
    text-align: left;
}

/* dropdowns */
.eu-dd {
    position: relative;
}

.eu-dd-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    box-shadow: var(--eu-shadow-lg);
    padding: 6px;
    z-index: 1050;
    display: none;
}

.eu-dd.eu-open > .eu-dd-menu {
    display: block;
}

.eu-dd-menu.eu-dd-wide {
    width: 330px;
}

.eu-dd-head {
    padding: 10px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eu-faint);
}

.eu-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--eu-radius-sm);
    color: var(--eu-text-2);
    font-size: 13px;
}

.eu-dd-item:hover {
    background: var(--eu-surface-2);
    color: var(--eu-primary);
}

.eu-dd-item i {
    width: 16px;
    text-align: center;
    color: var(--eu-muted);
}

.eu-dd-scroll {
    max-height: 320px;
    overflow-y: auto;
}

.eu-dd-foot {
    border-top: 1px solid var(--eu-border);
    margin-top: 4px;
    padding-top: 4px;
    text-align: center;
}

.eu-dd-foot a {
    display: block;
    padding: 9px;
    font-size: 12.5px;
    font-weight: 600;
}

.eu-dd-notif {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--eu-radius-sm);
    align-items: flex-start;
}

.eu-dd-notif:hover {
    background: var(--eu-surface-2);
}

.eu-dd-notif img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
}

.eu-dd-notif-title {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--eu-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eu-dd-notif-date {
    font-size: 11.5px;
    color: var(--eu-muted);
    margin-top: 2px;
}

/* -------------------------------------------------------------- cards ---- */

.eu-card {
    background: var(--eu-surface);
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    box-shadow: var(--eu-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eu-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
}

.eu-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--eu-text);
}

.eu-card-link {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.eu-card-body {
    padding: 0 18px 16px;
    flex: 1 1 auto;
}

.eu-card-body.eu-flush {
    padding-left: 0;
    padding-right: 0;
}

/* Scrollable card body - the list keeps its own height so the card stays level
   with its neighbours in the row instead of stretching them. */
.eu-card-body.eu-scroll-y {
    max-height: 232px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* room for the scrollbar so rows are not clipped by it */
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #CFD8E6 transparent;
}

.eu-card-foot {
    border-top: 1px solid var(--eu-border);
    padding: 12px 18px;
    text-align: center;
}

.eu-card-foot a {
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------------------------------------------------------- stat tiles ---- */

.eu-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.eu-tile {
    position: relative;
    border-radius: var(--eu-radius);
    padding: 16px 18px;
    color: #fff;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--eu-shadow);
}

.eu-tile.eu-t-green {
    background: var(--eu-grad-green);
}

.eu-tile.eu-t-blue {
    background: var(--eu-grad-blue);
}

.eu-tile.eu-t-purple {
    background: var(--eu-grad-purple);
}

.eu-tile.eu-t-orange {
    background: var(--eu-grad-orange);
}

.eu-tile-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    padding-right: 56px;
}

.eu-tile-head > i:first-child {
    font-size: 15px;
    opacity: .95;
    margin-top: 2px;
}

.eu-tile-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.eu-t-green .eu-tile-badge {
    color: #2FA672;
}

.eu-t-blue .eu-tile-badge {
    color: #3C96F2;
}

.eu-t-purple .eu-tile-badge {
    color: #865CEA;
}

.eu-t-orange .eu-tile-badge {
    color: #F97944;
}

.eu-tile-split {
    display: flex;
    align-items: flex-end;
    margin-top: auto;
}

.eu-tile-stat {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 10px;
}

.eu-tile-stat + .eu-tile-stat {
    border-left: 1px solid rgba(255, 255, 255, .32);
    padding-left: 14px;
}

.eu-tile-stat-label {
    font-size: 12.5px;
    opacity: .92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eu-tile-stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 2px;
}

/* single-value tile (Today's Check-in) */
.eu-tile-big {
    font-size: 28px;
    font-weight: 700;
    margin-top: auto;
    line-height: 1.2;
}

.eu-tile-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 8px;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #B4530A;
    font-size: 11.5px;
    font-weight: 700;
}

.eu-tile-chip.eu-chip-muted {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

.eu-tile-foot {
    margin-top: 7px;
    font-size: 12px;
    opacity: .95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------- quick access ---- */

.eu-quick-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

.eu-quick {
    /* Per-tile hue, set inline from employe.portal.quick.tile.color. */
    --eu-q: var(--eu-primary);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 10px;
    min-height: 108px;
    border: 1px solid transparent;
    border-radius: var(--eu-radius);
    background: var(--eu-q);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 2px rgba(11, 27, 63, .18);
    box-shadow: var(--eu-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Progressive enhancement: browsers without color-mix() keep the flat hue
   above, which still reads correctly with the white label. */
@supports (background: color-mix(in srgb, #000 50%, #fff)) {
    .eu-quick {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--eu-q) 90%, #0B1B3F) 0%,
            color-mix(in srgb, var(--eu-q) 68%, #FFFFFF) 100%);
    }
}

.eu-quick:hover {
    transform: translateY(-2px);
    box-shadow: var(--eu-shadow-lg);
    filter: saturate(1.06) brightness(1.04);
    color: #fff;
}

.eu-quick-ico {
    font-size: 22px;
    line-height: 1;
    color: #fff;
}

.eu-quick.eu-quick-add,
.eu-quick.eu-quick-add:hover {
    border-style: dashed;
    border-color: var(--eu-border-strong);
    color: var(--eu-muted);
    background: transparent;
    text-shadow: none;
    box-shadow: none;
    filter: none;
    cursor: pointer;
}

.eu-quick.eu-quick-add:hover {
    border-color: var(--eu-primary-ring);
    color: var(--eu-primary);
}

.eu-quick.eu-quick-add .eu-quick-ico {
    color: var(--eu-muted);
}

.eu-quick.eu-quick-add:hover .eu-quick-ico {
    color: var(--eu-primary);
}

/* --------------------------------------------------------------- grid ---- */

.eu-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.eu-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eu-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eu-section {
    background: var(--eu-surface);
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    box-shadow: var(--eu-shadow);
    padding: 18px;
    margin-bottom: 16px;
}

.eu-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--eu-text);
    margin-bottom: 14px;
}

/* ------------------------------------------------------------- tables ---- */

.eu-table-wrap {
    overflow-x: auto;
}

.eu-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.eu-table thead th {
    background: var(--eu-surface-2);
    color: var(--eu-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    padding: 10px 14px;
    white-space: nowrap;
    border-top: 1px solid var(--eu-border);
    border-bottom: 1px solid var(--eu-border);
}

.eu-table thead th:first-child {
    border-left: 1px solid var(--eu-border);
    border-radius: var(--eu-radius-sm) 0 0 var(--eu-radius-sm);
}

.eu-table thead th:last-child {
    border-right: 1px solid var(--eu-border);
    border-radius: 0 var(--eu-radius-sm) var(--eu-radius-sm) 0;
}

.eu-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--eu-border);
    color: var(--eu-text-2);
    vertical-align: middle;
}

.eu-table tbody tr:last-child td {
    border-bottom: 0;
}

.eu-table tbody tr:hover td {
    background: #FBFCFE;
}

/* --------------------------------------------------------------- pills ---- */

.eu-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.6;
}

.eu-pill-pending {
    background: #FEF2E4;
    color: var(--eu-amber);
}

.eu-pill-approved {
    background: #EAF6F0;
    color: #1D6443;
}

.eu-pill-rejected {
    background: #FDECEC;
    color: var(--eu-red);
}

.eu-pill-info {
    background: #EAF1FB;
    color: #24559C;
}

.eu-pill-muted {
    background: #F1F4F9;
    color: var(--eu-muted);
}

/* ------------------------------------------------------------ buttons ---- */

.eu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--eu-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}

.eu-btn-primary {
    background: var(--eu-primary);
    color: #fff;
}

.eu-btn-primary:hover {
    background: var(--eu-primary-dark);
    color: #fff;
    box-shadow: 0 6px 16px var(--eu-primary-ring);
}

.eu-btn-ghost {
    background: var(--eu-surface);
    border-color: var(--eu-border-strong);
    color: var(--eu-text-2);
}

.eu-btn-ghost:hover {
    border-color: var(--eu-primary);
    color: var(--eu-primary);
}

.eu-btn-block {
    width: 100%;
}

/* --------------------------------------------------------- list items ---- */

/* Upcoming events */
.eu-event {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-radius: var(--eu-radius-sm);
    background: var(--eu-surface-2);
    margin-bottom: 10px;
}

.eu-event-date {
    flex: 0 0 52px;
    width: 52px;
    text-align: center;
    color: var(--eu-primary);
}

.eu-event-day {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
}

.eu-event-mon {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .85;
}

.eu-event-title {
    font-size: 13.2px;
    font-weight: 700;
    color: var(--eu-text);
}

.eu-event-sub {
    font-size: 12px;
    color: var(--eu-muted);
    margin-top: 2px;
}

/* Birthdays */
.eu-bday {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.eu-initials {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.eu-bday-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.eu-bday-code {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--eu-muted);
    letter-spacing: .02em;
}

.eu-bday-name {
    display: block;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--eu-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eu-bday-date {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--eu-muted);
}

/* Notice board */
.eu-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius-sm);
    background: var(--eu-surface);
}

.eu-notice-ico {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: #F0EBFD;
    color: #7C4DD6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.eu-notice-title {
    font-size: 13.2px;
    font-weight: 700;
    color: var(--eu-text);
}

.eu-notice-meta {
    font-size: 12px;
    color: var(--eu-muted);
    margin-top: 4px;
}

.eu-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

.eu-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--eu-border-strong);
    cursor: pointer;
    transition: background .15s ease, width .15s ease;
}

.eu-dots span.eu-on {
    width: 18px;
    border-radius: 999px;
    background: var(--eu-primary);
}

/* Say it out counters */
.eu-counters {
    display: flex;
    text-align: center;
    margin-top: 18px;
}

.eu-counter {
    flex: 1 1 0;
    min-width: 0;
}

.eu-counter + .eu-counter {
    border-left: 1px solid var(--eu-border);
}

.eu-counter-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--eu-text);
    line-height: 1.15;
}

.eu-counter-label {
    font-size: 12px;
    color: var(--eu-muted);
    margin-top: 2px;
}

/* Useful contacts */
.eu-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--eu-border);
}

.eu-contact:last-child {
    border-bottom: 0;
}

.eu-contact-ico {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--eu-primary-soft);
    color: var(--eu-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.eu-contact-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--eu-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eu-contact-num {
    font-size: 12.5px;
    color: var(--eu-muted);
    white-space: nowrap;
}

.eu-contact-call {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eu-muted);
}

.eu-contact-call:hover {
    background: var(--eu-primary-soft);
    color: var(--eu-primary);
}

/* -------------------------------------------------------- empty state ---- */

.eu-empty {
    text-align: center;
    padding: 26px 14px;
    color: var(--eu-muted);
}

.eu-empty i {
    font-size: 26px;
    color: var(--eu-border-strong);
    display: block;
    margin-bottom: 10px;
}

.eu-empty-text {
    font-size: 12.8px;
}

/* ------------------------------------------------------------- footer ---- */

.eu-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px 20px;
    font-size: 12.5px;
    color: var(--eu-muted);
}

.eu-footer a {
    color: var(--eu-muted);
}

.eu-footer a:hover {
    color: var(--eu-primary);
}

.eu-footer-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ---------------------------------------------------------- page head ---- */

.eu-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.eu-page-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--eu-text);
}

.eu-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--eu-muted);
    list-style: none;
    margin: 0;
    padding: 0;
}

.eu-crumbs li + li:before {
    content: "/";
    margin-right: 8px;
    color: var(--eu-border-strong);
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1400px) {
    .eu-quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .eu-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eu-row-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eu-row-3 > *:last-child:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .eu-sidebar {
        transform: translateX(-100%);
        box-shadow: var(--eu-shadow-lg);
    }

    body.eu-nav-open .eu-sidebar {
        transform: translateX(0);
    }

    body.eu-nav-open .eu-scrim {
        opacity: 1;
        visibility: visible;
    }

    .eu-main {
        margin-left: 0;
    }

    .eu-content {
        padding: 16px;
    }

    .eu-topbar {
        padding: 12px 16px;
    }

    .eu-welcome-name {
        font-size: 18px;
    }

    .eu-userbtn-name,
    .eu-userbtn-sub,
    .eu-userbtn .eu-caret {
        display: none;
    }
}

@media (min-width: 992px) {
    body.eu-nav-collapsed .eu-sidebar {
        transform: translateX(-100%);
    }

    body.eu-nav-collapsed .eu-main {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .eu-row-2,
    .eu-row-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .eu-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .eu-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eu-welcome-meta {
        display: none;
    }

    .eu-footer {
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   Vendor component re-skin — keeps the inner content of the other portal
   pages consistent with the new theme without rewriting their markup.
   ========================================================================== */

.eu-body .card {
    background: var(--eu-surface);
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius);
    box-shadow: var(--eu-shadow);
    margin-bottom: 16px;
}

.eu-body .card > .header {
    padding: 16px 18px 4px;
    background: transparent;
    border-bottom: 0;
    color: var(--eu-text);
}

.eu-body .card > .header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--eu-text);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.eu-body .card > .header h2 strong {
    font-weight: 700;
}

.eu-body .card > .body {
    padding: 14px 18px 18px;
    font-size: 13.5px;
}

.eu-body .table {
    font-size: 13px;
    color: var(--eu-text-2);
    margin-bottom: 0;
}

.eu-body .table > thead > tr > th {
    background: var(--eu-surface-2);
    color: var(--eu-muted);
    font-weight: 600;
    font-size: 12px;
    border-top: 1px solid var(--eu-border);
    border-bottom: 1px solid var(--eu-border);
    padding: 10px 14px;
    white-space: nowrap;
}

.eu-body .table > tbody > tr > td {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--eu-border);
    vertical-align: middle;
}

.eu-body .table-hover > tbody > tr:hover > td {
    background: #FBFCFE;
}

.eu-body .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 16px;
    font-size: 12.5px;
}

.eu-body .breadcrumb .page-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--eu-text);
    margin: 0 14px 0 0;
}

.eu-body .breadcrumb-item a {
    color: var(--eu-muted);
}

.eu-body .breadcrumb-item.active {
    color: var(--eu-text-2);
}

.eu-body .block-header {
    padding: 0;
    margin-bottom: 4px;
}

.eu-body .btn-primary,
.eu-body .btn.btn-primary {
    background: var(--eu-primary);
    border-color: var(--eu-primary);
    border-radius: var(--eu-radius-sm);
    font-weight: 600;
    /* the theme has to state the label colour itself: the vendor bundle's
       .page-link (blue) and .card-action a (amber) land on the same buttons at
       equal specificity and would otherwise win on source order */
    color: #fff;
}

.eu-body .btn-primary:hover,
.eu-body .btn.btn-primary:hover,
.eu-body .btn-primary:focus,
.eu-body .btn.btn-primary:focus {
    background: var(--eu-primary-dark);
    border-color: var(--eu-primary-dark);
    color: #fff;
}

.eu-body .form-control,
.eu-body .form-select {
    border-radius: var(--eu-radius-sm);
    border-color: var(--eu-border-strong);
    font-size: 13.5px;
    padding: 9px 12px;
    color: var(--eu-text-2);
}

.eu-body .form-control:focus,
.eu-body .form-select:focus {
    border-color: var(--eu-primary);
    box-shadow: 0 0 0 3px var(--eu-primary-ring);
}

.eu-body label,
.eu-body .form-label {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--eu-text-2);
}

.eu-body .nav-tabs .nav-link.active {
    color: var(--eu-primary);
    border-bottom-color: var(--eu-primary);
}

.eu-body .dataTables_wrapper .dataTables_filter input,
.eu-body .dataTables_wrapper .dataTables_length select {
    border-radius: var(--eu-radius-sm);
    border: 1px solid var(--eu-border-strong);
    padding: 6px 10px;
}

.eu-body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--eu-primary) !important;
    border-color: var(--eu-primary) !important;
    color: #fff !important;
    border-radius: 8px;
}

/* the vendor theme's page loader / right settings sidebar are not used */
.eu-body .page-loader-wrapper,
.eu-body #rightsidebar,
.eu-body .overlay {
    display: none !important;
}

/* ========================================================== modal ======= */

.eu-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(11, 27, 63, .5);
}

.eu-modal.eu-open {
    display: flex;
}

.eu-modal-dialog {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--eu-surface);
    border-radius: var(--eu-radius);
    box-shadow: var(--eu-shadow-lg);
}

.eu-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--eu-border);
}

.eu-modal-body {
    padding: 18px;
    overflow-y: auto;
}

.eu-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--eu-border);
}

.eu-modal-msg {
    margin-right: auto;
    font-size: 12.5px;
    color: var(--eu-muted);
}

.eu-modal-msg.eu-err {
    color: var(--eu-red);
}

.eu-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.eu-pick {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
}

.eu-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eu-pick-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius-sm);
    font-size: 12.8px;
    font-weight: 600;
    color: var(--eu-text-2);
    transition: border-color .15s ease, background .15s ease;
}

.eu-pick-body i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

.eu-pick:hover .eu-pick-body {
    border-color: var(--eu-border-strong);
}

.eu-pick input:checked + .eu-pick-body {
    border-color: var(--eu-primary);
    background: var(--eu-primary-soft);
    color: var(--eu-primary);
}

.eu-pick input:focus-visible + .eu-pick-body {
    box-shadow: 0 0 0 3px var(--eu-primary-ring);
}

@media (max-width: 767.98px) {
    .eu-pick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------- recent-requests table -- */

.eu-table td:nth-child(1) {
    min-width: 128px;
}

.eu-table td:nth-child(2),
.eu-table th:nth-child(2) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.eu-table td:nth-child(4),
.eu-table th:nth-child(4) {
    white-space: nowrap;
    text-align: right;
    color: var(--eu-muted);
}

.eu-table td:nth-child(3) {
    white-space: nowrap;
}

/* ------------------------------------------- sidebar link overrides ----- */
/* Scoped with .eu-body so they outrank the vendor reset block above. */

.eu-body .eu-nav a.eu-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    /* `body.eu-body a` (0,1,1) outranks the bare `.eu-nav-link` colour, so the
       top-level links rendered link-blue while the deeper `.eu-sub .eu-nav-link`
       rule kept its own colour. Restate colour and hover at this specificity. */
    color: var(--eu-text-2);
}

.eu-body .eu-nav a.eu-nav-link:hover {
    background: var(--eu-primary-soft);
    color: var(--eu-primary);
}

.eu-body .eu-nav a.eu-nav-link:hover i {
    color: var(--eu-primary);
}

.eu-body .eu-nav a.eu-nav-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex: 0 0 18px;
    line-height: 1;
}

.eu-body .eu-nav a.eu-nav-link.eu-active {
    background: var(--eu-primary);
    color: #fff;
}

.eu-body .eu-nav a.eu-nav-link.eu-active i {
    color: #fff;
}

.eu-body .eu-nav .eu-sub a.eu-nav-link {
    padding: 8px 14px 8px 20px;
}

.eu-body .eu-nav .eu-sub a.eu-nav-link.eu-active {
    background: var(--eu-primary-soft);
    color: var(--eu-primary);
}

.eu-body .eu-nav .eu-sub a.eu-nav-link.eu-active i {
    color: var(--eu-primary);
}

.eu-body .eu-nav .eu-group > a.eu-nav-link {
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--eu-muted);
}

.eu-body .eu-nav a.eu-nav-link .eu-caret {
    margin-left: auto;
    flex: 0 0 12px;
    width: 12px;
    font-size: 11px;
}

/* ------------------------------------------------ recent-requests fit --- */

.eu-body .eu-table {
    table-layout: auto;
}

.eu-body .eu-table th,
.eu-body .eu-table td {
    padding: 11px 10px;
    font-size: 12.5px;
}

.eu-body .eu-table td:nth-child(2),
.eu-body .eu-table th:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* --------------------------------------------- quick-access picker ------ */
/* Materialize decorates every [type=checkbox] + span with its own :before
   checkmark and a 35px left pad. The picker draws its own state, so strip
   the vendor decoration off these labels. */

.eu-body .eu-pick input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.eu-body .eu-pick input[type="checkbox"] + .eu-pick-body,
.eu-body .eu-pick input[type="checkbox"]:checked + .eu-pick-body,
.eu-body .eu-pick input[type="checkbox"]:not(:checked) + .eu-pick-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    position: static;
    line-height: 1.4;
    height: auto;
    font-size: 12.8px;
    -webkit-user-select: none;
    user-select: none;
}

.eu-body .eu-pick .eu-pick-body::before,
.eu-body .eu-pick .eu-pick-body::after,
.eu-body .eu-pick input[type="checkbox"] + .eu-pick-body::before,
.eu-body .eu-pick input[type="checkbox"] + .eu-pick-body::after,
.eu-body .eu-pick input[type="checkbox"]:checked + .eu-pick-body::before,
.eu-body .eu-pick input[type="checkbox"]:checked + .eu-pick-body::after {
    content: none;
    display: none;
    border: 0;
    background: none;
}

.eu-body .eu-pick .eu-pick-icon {
    width: 18px;
    flex: 0 0 18px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}

.eu-body .eu-pick .eu-pick-label {
    flex: 1 1 auto;
    min-width: 0;
}

.eu-body .eu-pick .eu-pick-tick {
    flex: 0 0 16px;
    width: 16px;
    font-size: 12px;
    color: var(--eu-primary);
    opacity: 0;
    transition: opacity .15s ease;
}

.eu-body .eu-pick input[type="checkbox"]:checked + .eu-pick-body .eu-pick-tick {
    opacity: 1;
}

/* ==========================================================================
   Inner-page vendor overrides — the 29 re-skinned pages keep their original
   markup (.card/.nav-link/.material-icons/...), so restyle those in place.
   ========================================================================== */

/* common.min.css floats every material icon, which breaks inline alignment */
.eu-body .material-icons {
    float: none;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1;
}

/* the vendor accent pill on profile tabs was the old theme's pink */
.eu-body .profile-tab-box .nav .nav-link,
.eu-body .nav .nav-item.tab-all .nav-link {
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--eu-muted);
    background: transparent;
}

.eu-body .profile-tab-box .nav .nav-link.active,
.eu-body .nav .nav-item.tab-all .nav-link.active {
    background: var(--eu-primary);
    color: #fff;
}

.eu-body .profile-tab-box {
    border-bottom: 1px solid var(--eu-border);
    padding: 10px 0;
    margin-bottom: 4px;
}

/* breadcrumb header row */
.eu-body .breadcrumb-style {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.eu-body .breadcrumb-item + .breadcrumb-item::before {
    color: var(--eu-border-strong);
}

/* buttons */
.eu-body .btn {
    border-radius: var(--eu-radius-sm);
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 20px;
}

.eu-body .btn-success,
.eu-body .btn-info {
    background: var(--eu-primary);
    border-color: var(--eu-primary);
    color: #fff;
}

.eu-body .btn-success:hover,
.eu-body .btn-info:hover {
    background: var(--eu-primary-dark);
    border-color: var(--eu-primary-dark);
}

.eu-body .btn-danger {
    background: transparent;
    border-color: var(--eu-border-strong);
    color: var(--eu-text-2);
}

.eu-body .btn-danger:hover {
    border-color: var(--eu-red);
    color: var(--eu-red);
    background: transparent;
}

/* material-style underline inputs used by the request forms */
.eu-body .form-line {
    border-bottom: 1px solid var(--eu-border-strong);
}

.eu-body .form-line.focused {
    border-bottom-color: var(--eu-primary);
}

.eu-body .form-line .form-control {
    border: 0;
    border-radius: 0;
    padding-left: 0;
    background: transparent;
}

.eu-body .form-line .form-control:focus {
    box-shadow: none;
}

/* status chips the request lists render */
.eu-body .badge {
    border-radius: 999px;
    font-weight: 700;
    font-size: 11.5px;
    padding: 4px 11px;
}

/* cards inside pages should not double-pad now that .eu-content has padding */
.eu-body .container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* the vendor "more options" affordance in card headers */
.eu-body .header-dropdown .material-icons {
    color: var(--eu-faint);
    font-size: 18px;
}

.eu-body .card > .header .header-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* style.css hard-codes the old theme's pink accent with !important */
.eu-body .tab-all a.active,
.eu-body .profile-tab-box .nav .nav-link.active,
.eu-body .nav .nav-item.tab-all .nav-link.active {
    background-color: var(--eu-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--eu-primary-ring) !important;
    border-radius: 999px;
    height: auto;
    line-height: 1.4;
}

.eu-body .buttons-pdf,
.eu-body .dt-buttons .btn {
    background-color: var(--eu-primary) !important;
    border-color: var(--eu-primary) !important;
    color: #fff !important;
}