/*
 * Genomac theme for AdminLTE 3
 * Colors, radii, shadows and fonts follow "Genomac — vizuální styl pro web" (the design manual
 * for www.genomac.cz) so the application looks like part of the company website.
 * Marketing-only patterns from the manual (hero strip, alternating white/grey bands, closing CTA)
 * are not reproduced; the tokens, the pink divider line, typography and card shapes are.
 */

:root {
    --gm-ink: #0c1220;
    --gm-muted: #4b5563;
    --gm-bg: #f6f8fc;
    --gm-bg-hard: #f5f7f7;
    --gm-border: rgba(15, 23, 42, .08);
    --gm-accent: #09aebd;
    --gm-accent-dark: #0a5560;
    --gm-secondary: #d63384;
    --gm-tertiary: #1e7855;
    --gm-violet: #460d80;
    --gm-violet-2: #9f2784;
    --gm-navy: #131e55;
    --gm-glow: #7fe3ec;
    --gm-grad-brand: linear-gradient(135deg, #460d80, #9f2784);
    --gm-grad-dark: linear-gradient(135deg, rgba(10, 126, 141, .5), rgba(214, 51, 132, .5));
    --gm-shadow-soft: 0 14px 42px rgba(15, 23, 42, .08);
    --gm-shadow-lift: 0 22px 60px rgba(15, 23, 42, .12);
    --gm-r-md: 14px;
    --gm-r-lg: 18px;
    --gm-r-xl: 24px;
    --gm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --gm-font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Typography ---------- */
body,
.wrapper,
.form-control,
.btn,
.dropdown-menu,
.tooltip,
.popover {
    font-family: var(--gm-font-body);
}

body {
    color: var(--gm-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.info-box-text,
.brand-link,
.display-4,
.lead {
    font-family: var(--gm-font-display);
    letter-spacing: -.03em;
}

/* Manual ch. 2: headings always have tight leading. Card titles keep the AdminLTE leading
   because they sit on a single line next to the card tools. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.08;
    color: var(--gm-ink);
}

h1, .h1, .content-header h1 {
    font-weight: 700;
}

.text-muted {
    color: var(--gm-muted) !important;
}

/* Deliberate deviation from the manual: links on genomac.cz are pure turquoise (#09aebd), but that
   fails WCAG AA contrast on white (about 2.6:1). Link text uses a darker turquoise; the brand
   turquoise stays for hover, icons, rails and accents. */
a {
    color: var(--gm-accent-dark);
}

a:hover {
    color: var(--gm-accent);
}

.text-primary {
    color: var(--gm-accent) !important;
}

/* Small uppercase label used above headings (matches .eyebrow on genomac.cz) */
.gm-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gm-accent);
    margin-bottom: .5rem;
}

/* ---------- Sidebar ---------- */
.main-sidebar.sidebar-dark-primary {
    background: var(--gm-grad-dark), var(--gm-navy);
    box-shadow: none;
}

.main-sidebar.sidebar-dark-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 0, rgba(9, 174, 189, .35), transparent 40%),
        radial-gradient(circle at 92% 100%, rgba(214, 51, 132, .3), transparent 45%);
    pointer-events: none;
}

.main-sidebar.sidebar-dark-primary > * {
    position: relative;
    z-index: 1;
}

[class*="sidebar-dark"] .brand-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .3rem;
    height: 66px;
    padding: .5rem .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

/* Manual ch. 3: the logo is shown untouched (no filter, no recolouring) at the header height of
   30 px. A dark background is one the manual allows for the logo. */
.brand-link .gm-brand-logo {
    height: 30px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    object-position: left;
}

.brand-link .gm-brand-sub {
    font-family: var(--gm-font-body);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    line-height: 1;
    white-space: nowrap;
}

.sidebar-collapse .brand-link .gm-brand-sub {
    display: none;
}

/* Collapsed sidebar: keep the size and let the brand link crop the logo to the "G". */
.sidebar-collapse .brand-link .gm-brand-logo {
    height: 26px;
    max-width: none;
}

.sidebar-collapse .main-sidebar:hover .brand-link .gm-brand-sub {
    display: block;
}

.sidebar-collapse .main-sidebar:hover .brand-link .gm-brand-logo {
    height: 30px;
}

[class*="sidebar-dark"] .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding-bottom: .4rem;
}

.nav-sidebar .nav-header {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gm-glow);
    padding: .9rem .9rem .3rem;
}

.nav-sidebar .nav-link {
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 500;
    padding: .55rem .9rem;
    transition: background .2s ease, color .2s ease;
}

.nav-sidebar .nav-link > .nav-icon {
    opacity: .85;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: rgba(255, 255, 255, .82);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:focus {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--gm-glow);
}

/* ---------- Top navbar ---------- */
.main-header.navbar-white {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    /* Manual ch. 4: the thin pink divider line is the most recognisable element of the brand. */
    border-bottom: 2px solid var(--gm-secondary);
}

.main-header .nav-link {
    color: var(--gm-ink);
    border-radius: 999px;
}

.main-header .navbar-nav .nav-link:hover {
    background: rgba(9, 174, 189, .08);
    color: var(--gm-accent-dark);
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link.text-dark {
    color: var(--gm-ink) !important;
}

.navbar-badge {
    background: var(--gm-secondary);
    border-radius: 999px;
    font-family: var(--gm-font-display);
}

/* ---------- Content area ---------- */
.content-wrapper {
    background:
        radial-gradient(circle at 15% top, rgba(9, 174, 189, .12), transparent 30%),
        radial-gradient(circle at 85% top, rgba(214, 51, 132, .08), transparent 30%),
        linear-gradient(180deg, #fff 0, var(--gm-bg) 100%);
    background-color: var(--gm-bg);
}

.content-header {
    padding-bottom: 0;
}

.content-header h1 {
    font-size: 1.6rem;
}

.main-footer {
    background: rgba(255, 255, 255, .6);
    /* Closing pink line, as at the end of every page on genomac.cz. */
    border-top: 2px solid var(--gm-secondary);
    color: var(--gm-muted);
    font-size: .82rem;
}

/* ---------- Cards, info boxes, callouts ---------- */
.card {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-r-xl);
    box-shadow: var(--gm-shadow-soft);
    background: rgba(255, 255, 255, .92);
}

.card.elevation-1,
.card.elevation-3 {
    box-shadow: var(--gm-shadow-soft) !important;
}

.card > .card-header {
    border-bottom: 1px solid var(--gm-border);
    border-top-left-radius: var(--gm-r-xl);
    border-top-right-radius: var(--gm-r-xl);
    padding: .9rem 1.25rem;
}

.card > .card-footer {
    background: rgba(246, 248, 252, .7);
    border-top: 1px solid var(--gm-border);
    border-bottom-left-radius: var(--gm-r-xl);
    border-bottom-right-radius: var(--gm-r-xl);
}

.card-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.card.card-outline {
    border-top-width: 3px;
}

.card-primary.card-outline,
.card-info.card-outline {
    border-top-color: var(--gm-accent);
}

.card-success.card-outline {
    border-top-color: var(--gm-tertiary);
}

.card-danger.card-outline,
.card-warning.card-outline {
    border-top-color: var(--gm-secondary);
}

.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
    background: var(--gm-accent);
}

.card-warning:not(.card-outline) > .card-header {
    background: var(--gm-secondary);
    color: #fff;
}

.info-box {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-r-lg);
    box-shadow: var(--gm-shadow-soft);
    background: rgba(255, 255, 255, .92) !important;
    padding: .9rem;
}

.info-box .info-box-icon {
    border-radius: 12px;
    width: 56px;
    font-size: 1.4rem;
}

.info-box-text {
    letter-spacing: -.01em;
}

/* Callout = the manual's .card--rail: white card with a 4 px turquoise rail on the left. */
.callout {
    border-radius: var(--gm-r-lg);
    box-shadow: var(--gm-shadow-soft);
    border: 1px solid var(--gm-border);
    border-left-width: 4px;
}

.callout.callout-info {
    border-left-color: var(--gm-accent);
    background: rgba(255, 255, 255, .92);
}

.callout.callout-info h5 {
    color: var(--gm-ink);
}

.callout.callout-info h5 .fas {
    color: var(--gm-accent);
}

.alert {
    border-radius: var(--gm-r-md);
    border: 1px solid transparent;
}

.alert-info {
    background: rgba(9, 174, 189, .1);
    border-color: rgba(9, 174, 189, .25);
    color: var(--gm-accent-dark);
}

.alert-info a {
    color: var(--gm-accent-dark);
    font-weight: 600;
}

.alert-warning {
    background: rgba(214, 51, 132, .1);
    border-color: rgba(214, 51, 132, .25);
    color: var(--gm-secondary);
}

/* ---------- Color utilities remapped to the brand ---------- */
.bg-primary,
.bg-info,
.btn-info {
    background-color: var(--gm-accent) !important;
    color: #fff !important;
}

.bg-success,
.btn-success {
    background-color: var(--gm-tertiary) !important;
    color: #fff !important;
}

.bg-danger,
.btn-danger {
    background-color: var(--gm-secondary) !important;
    color: #fff !important;
}

/* Yellow "warning" is outside the two-colour palette. The manual gives the alerting role to
   pink, so warning becomes a light pink tint; solid pink stays reserved for danger. */
.bg-warning,
.btn-warning,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: rgba(214, 51, 132, .12) !important;
    border-color: rgba(214, 51, 132, .3) !important;
    color: var(--gm-secondary) !important;
}

.btn-warning:hover {
    background-color: rgba(214, 51, 132, .2) !important;
    border-color: rgba(214, 51, 132, .4) !important;
    color: var(--gm-secondary) !important;
}

.text-warning {
    color: var(--gm-secondary) !important;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .3em .65em;
}

.badge-danger {
    background-color: var(--gm-secondary);
}

.badge-info,
.badge-primary {
    background-color: var(--gm-accent);
}

.badge-success {
    background-color: var(--gm-tertiary);
}

.badge-warning {
    background-color: rgba(214, 51, 132, .14);
    color: var(--gm-secondary);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 999px;
    font-family: var(--gm-font-display);
    font-weight: 700;
    padding: .5rem 1.1rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn-sm {
    padding: .3rem .75rem;
    font-size: .8rem;
}

.btn-block {
    border-radius: 999px;
}

/* Manual ch. 7: the violet gradient is the single main call to action on a screen.
   Everything else (toggles, secondary actions, row actions) uses turquoise or outlines. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background: var(--gm-grad-brand);
    border: 0;
    box-shadow: 0 10px 24px rgba(159, 39, 132, .25);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: var(--gm-grad-brand);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(159, 39, 132, .32);
}

.btn-info, .btn-success, .btn-danger {
    border: 0;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--gm-accent-dark);
    border-color: rgba(9, 174, 189, .35);
    background: rgba(9, 174, 189, .06);
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
    color: #fff;
    background: var(--gm-accent);
    border-color: var(--gm-accent);
}

.btn-outline-success {
    color: var(--gm-tertiary);
    border-color: rgba(30, 120, 85, .4);
}

.btn-outline-success:hover {
    background: var(--gm-tertiary);
    border-color: var(--gm-tertiary);
    color: #fff;
}

.btn-outline-danger {
    color: var(--gm-secondary);
    border-color: rgba(214, 51, 132, .4);
}

.btn-outline-danger:hover {
    background: var(--gm-secondary);
    border-color: var(--gm-secondary);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--gm-ink);
    border-color: var(--gm-border);
    background: #fff;
}

.btn-outline-secondary:hover {
    background: var(--gm-bg);
    color: var(--gm-ink);
    border-color: rgba(15, 23, 42, .18);
}

/* Segmented toggles (paternal / maternal line, inbox / sent) built from .btn-group. */
.btn-group > .btn-info,
.btn-group > .btn-outline-info {
    box-shadow: none;
}

/* ---------- Forms ---------- */
.form-control,
.custom-select {
    border-radius: var(--gm-r-md);
    border-color: var(--gm-border);
    padding: .6rem .95rem;
    height: auto;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--gm-accent);
    box-shadow: 0 0 0 4px rgba(9, 174, 189, .15) !important;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append .input-group-text,
.input-group-append .btn {
    border-radius: 0 var(--gm-r-md) var(--gm-r-md) 0;
    border-color: var(--gm-border);
    background: #fff;
    color: var(--gm-muted);
}

.input-group-append .btn + .input-group-text {
    border-left: 0;
}

.input-group-append .btn:not(:last-child) {
    border-radius: 0;
}

label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--gm-muted);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--gm-accent);
    border-color: var(--gm-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px rgba(9, 174, 189, .15);
}

.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--gm-accent);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(9, 174, 189, .25);
}

/* ---------- Tables ---------- */
.table thead th {
    font-family: var(--gm-font-body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gm-muted);
    border-top: 0;
    border-bottom: 1px solid var(--gm-border);
}

.table td {
    border-top: 1px solid var(--gm-border);
    font-variant-numeric: tabular-nums;
}

/* ---------- Login and other account pages ---------- */
.gm-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .5rem 0 .25rem;
}

.gm-login-brand img {
    height: 34px;
    width: auto;
}

.gm-login-brand span {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gm-muted);
}

.login-box-msg {
    color: var(--gm-muted);
}

.gm-or-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--gm-muted);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gm-or-divider::before,
.gm-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gm-border);
}

/* ---------- Home page feature boxes ---------- */
/* All four feature icons share the leading turquoise: the manual forbids turquoise and pink side
   by side in equal areas and the gradient anywhere but on buttons. */
.gm-feature .info-box-icon {
    background: rgba(9, 174, 189, .12);
    color: var(--gm-accent);
}

.gm-feature .info-box-content {
    padding-left: .35rem;
}

.gm-feature .info-box-number {
    font-size: .8rem;
    font-weight: 400;
    white-space: normal;
    line-height: 1.6;
}

/* ---------- Map legend chips ---------- */
.gm-legend-chip {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--gm-border);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Section head (manual 6.5) with the DNA strip motif (manual 7) ---------- */
.gm-section-head {
    max-width: 720px;
    margin: 2.5rem auto 1.75rem;
    text-align: center;
}

.gm-section-head h2 {
    font-size: clamp(1.55rem, 4vw, 2.3rem);
    margin: 0 0 .75rem;
}

.gm-section-head p {
    font-size: 1rem;
    margin: 0;
    color: var(--gm-muted);
}

.gm-marker {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    margin-bottom: 1rem;
}

.gm-marker i {
    display: block;
    width: 3px;
    border-radius: 1px;
    background: #e2e7e7;
}

.gm-marker i.gm-marker-primary,
.gm-marker i.gm-marker-secondary {
    height: 20px !important;
}

.gm-marker i.gm-marker-primary {
    background: var(--gm-accent);
}

.gm-marker i.gm-marker-secondary {
    background: var(--gm-secondary);
}

/* ---------- News posts on the home page ---------- */
.gm-news-card > .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    padding: 1.2rem 1.6rem .6rem;
    border-bottom: 0;
}

.gm-news-card .gm-news-meta {
    flex: 0 0 100%;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gm-accent);
}

.gm-news-card .card-title {
    float: none;
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
}

.gm-news-card .card-tools {
    float: none;
    margin: 0 0 0 auto;
}

.gm-news-card > .card-body {
    padding: .5rem 1.6rem 1.5rem;
}

/* Content comes from the WYSIWYG editor: keep it in the article style of the manual
   (leading 1.8, ink text, rounded images) and tame oversized headings. */
.post-content {
    line-height: 1.8;
    color: var(--gm-ink);
    overflow-wrap: break-word;
}

.post-content > :last-child {
    margin-bottom: 0;
}

.post-content p {
    margin: 0 0 1.1rem;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
    font-size: 1.15rem;
    margin: 1.25rem 0 .5rem;
    line-height: 1.3;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--gm-r-md);
}

.post-content a {
    color: var(--gm-accent-dark);
    font-weight: 600;
}

.gm-news-empty > .card-body {
    padding: 2.5rem 1.5rem;
    color: var(--gm-muted);
}

.gm-news-empty .fas {
    display: block;
    font-size: 1.6rem;
    color: var(--gm-accent);
    margin-bottom: .6rem;
}

/* ---------- Genetic lines ----------
   The paternal line uses the leading turquoise, the maternal line the pink. Both come from the
   manual's palette; a page always shows one line, so one colour leads and the other appears only
   in small toggles and menu icons. Pages opt in with .gm-line + .gm-line-paternity/-maternity
   (set on .content-wrapper by _Layout from ViewData["LineType"], or on a local container). */
:root {
    --gm-line-pat: var(--gm-accent);
    --gm-line-pat-dark: var(--gm-accent-dark);
    --gm-line-pat-soft: rgba(9, 174, 189, .12);
    --gm-line-pat-border: rgba(9, 174, 189, .35);
    --gm-line-pat-glow: var(--gm-glow);
    --gm-line-mat: var(--gm-secondary);
    --gm-line-mat-dark: #a31f66;
    --gm-line-mat-soft: rgba(214, 51, 132, .12);
    --gm-line-mat-border: rgba(214, 51, 132, .35);
    --gm-line-mat-glow: #f7a1cc;
}

.gm-line-paternity {
    --gm-line: var(--gm-line-pat);
    --gm-line-dark: var(--gm-line-pat-dark);
    --gm-line-soft: var(--gm-line-pat-soft);
    --gm-line-border: var(--gm-line-pat-border);
}

.gm-line-maternity {
    --gm-line: var(--gm-line-mat);
    --gm-line-dark: var(--gm-line-mat-dark);
    --gm-line-soft: var(--gm-line-mat-soft);
    --gm-line-border: var(--gm-line-mat-border);
}

/* Page header: eyebrow with the line name and a coloured rail next to the title. */
.gm-line .content-header h1 {
    border-left: 4px solid var(--gm-line);
    padding-left: .75rem;
}

.gm-line .gm-line-eyebrow {
    color: var(--gm-line);
    margin: 0 0 .25rem .95rem;
}

/* Cards, boxes, badges and charts inside a line page take the line colour. */
.gm-line .card.card-outline {
    border-top-color: var(--gm-line);
}

.gm-line .info-box .info-box-icon {
    background: var(--gm-line-soft) !important;
    color: var(--gm-line) !important;
}

.gm-line .info-box .info-box-icon.gm-icon-muted {
    background: rgba(75, 85, 99, .1) !important;
    color: var(--gm-muted) !important;
}

.gm-line .badge-info,
.gm-line .badge-primary {
    background-color: var(--gm-line);
}

.gm-line .text-primary {
    color: var(--gm-line) !important;
}

.circular-chart .circle {
    stroke: var(--gm-line, var(--gm-accent));
}

.gm-line .btn-info,
.gm-line .btn-info:hover,
.gm-line .btn-info:focus {
    background-color: var(--gm-line) !important;
}

.gm-line .btn-outline-info {
    color: var(--gm-line-dark);
    border-color: var(--gm-line-border);
    background: rgba(255, 255, 255, .6);
}

.gm-line .btn-outline-info:hover {
    color: #fff;
    background: var(--gm-line);
    border-color: var(--gm-line);
}

/* Line toggle buttons keep their own line colour wherever they appear: filled when active,
   outlined otherwise. */
.gm-btn-line-paternity,
.gm-btn-line-maternity {
    background: rgba(255, 255, 255, .6);
    box-shadow: none;
}

.gm-btn-line-paternity {
    color: var(--gm-line-pat-dark);
    border: 1px solid var(--gm-line-pat-border);
}

.gm-btn-line-maternity {
    color: var(--gm-line-mat-dark);
    border: 1px solid var(--gm-line-mat-border);
}

.gm-btn-line-paternity:hover,
.gm-btn-line-paternity.active,
.gm-btn-line-paternity:not(:disabled):not(.disabled).active {
    color: #fff;
    background: var(--gm-line-pat);
    border-color: var(--gm-line-pat);
}

.gm-btn-line-maternity:hover,
.gm-btn-line-maternity.active,
.gm-btn-line-maternity:not(:disabled):not(.disabled).active {
    color: #fff;
    background: var(--gm-line-mat);
    border-color: var(--gm-line-mat);
}

/* Sidebar menu icons of the two lines. */
.nav-sidebar .nav-icon.gm-nav-paternity {
    color: var(--gm-line-pat-glow);
    opacity: 1;
}

.nav-sidebar .nav-icon.gm-nav-maternity {
    color: var(--gm-line-mat-glow);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .btn, .nav-sidebar .nav-link, .messaging-box {
        transition: none !important;
    }
}