:root {
            --navy: #690f06;
            --blue: #fd0000;
            --blue2: #c90b0e;
            --green: #25834b;
            --ink: #1d1d1d;
            --muted: #6b6b6b;
            --line: #ededed;
            --bg: #f8f8f8;
            --heading-font: "Arial Black","Segoe UI Black","Helvetica Neue",system-ui,sans-serif;
            --condensed-font: "Arial Narrow","Roboto Condensed","Segoe UI",system-ui,sans-serif
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            overflow-x: clip;
            -webkit-font-smoothing: antialiased;
            font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
        }

        main {
            max-width: 1100px;
            margin: 0 auto 48px;
            padding: 0 16px
        }

        .hero {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            min-height: 260px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 48px 20px;
            color: #fff;
            position: relative;
            isolation: isolate;
            background: var(--navy) url('/media/topbanner_2019-bw.jpg') center/cover no-repeat;
            margin-bottom: 32px;
            overflow: hidden;
            transform-origin: top center;
            animation: hero-fold-down .7s cubic-bezier(.22,.61,.36,1) both
        }

            /* Same technique as dbu.dk: the opaque bg_dr graphic fades in from transparent at the top, so the photo shows through. */
            .hero::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -1;
                background: url('/media/bg_dr.png') center bottom/cover no-repeat;
                /* Start at 65% coverage so the photo stays subtle. */
                -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,.65) 0%,black 70%);
                mask-image: linear-gradient(to bottom,rgba(0,0,0,.65) 0%,black 70%)
            }

        .hero-content {
            max-width: 100%;
            text-shadow: 0 2px 12px #00000080;
            /* Set from hero.js while scrolling. */
            transform: translate3d(0,var(--hero-shift,0px),0);
            opacity: var(--hero-fade,1);
            will-change: transform,opacity
        }

            .hero h1 {
                font-family: var(--heading-font);
                font-weight: 900;
                font-size: clamp(16px,6vw,64px);
                line-height: 1.05;
                text-transform: uppercase;
                margin: 0 0 12px;
                animation: hero-text-in .6s ease-out .35s both
            }

            .hero p {
                margin: 0;
                font-size: 18px;
                color: #ffffffe6;
                animation: hero-text-in .6s ease-out .5s both
            }

        @keyframes hero-fold-down {
            from {
                opacity: 0;
                transform: translate3d(0,-100px,0) scaleY(.6)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes hero-text-in {
            from {
                opacity: 0;
                transform: translate3d(0,24px,0)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero,
            .hero h1,
            .hero p {
                animation: none
            }
        }

        .section-title {
            font-family: var(--heading-font);
            font-weight: 900;
            font-size: clamp(24px,3vw,32px);
            text-transform: uppercase;
            margin: 0 0 18px;
            padding-bottom: 10px;
            border-bottom: 4px solid var(--blue);
            display: inline-block
        }

        .calendar-feed-section {
            margin-top: 36px
        }

        .calendar-feed-note,
        .calendar-feed-error {
            color: var(--muted)
        }

        .calendar-feed-error {
            color: #a32020
        }

        .calendar-feed-sessions {
            display: grid;
            gap: 12px
        }

        .calendar-loader {
            display: flex;
            align-items: center;
            gap: 16px;
            background: white;
            padding: 24px
        }

            .calendar-loader[hidden] {
                display: none
            }

            .calendar-loader strong,
            .calendar-loader small {
                display: block
            }

            .calendar-loader small {
                color: var(--muted)
            }

        .calendar-loader-ball {
            flex: none;
            width: 44px;
            height: 44px;
            filter: drop-shadow(0 2px 3px #17284033);
            transform-origin: center bottom;
            animation: calendar-loader-bounce .9s infinite
        }

        .calendar-loader-ball-panels {
            transform-box: view-box;
            transform-origin: center;
            animation: calendar-loader-spin 1.8s linear infinite
        }

        @keyframes calendar-loader-bounce {
            0%, 100% {
                transform: translateY(0) scale(1.08, .92);
                animation-timing-function: cubic-bezier(.33, .67, .67, 1)
            }
            50% {
                transform: translateY(-18px) scale(1);
                animation-timing-function: cubic-bezier(.33, 0, .67, .33)
            }
        }

        @keyframes calendar-loader-spin {
            to {
                transform: rotate(360deg)
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .calendar-loader-ball,
            .calendar-loader-ball-panels {
                animation: none
            }
        }

        .calendar-feed-error-box {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px
        }

            .calendar-feed-error-box p {
                margin: 0
            }

        .calendar-feed-retry {
            border: 0;
            border-radius: 0;
            background: var(--blue);
            color: white;
            font-weight: 700;
            text-transform: uppercase;
            padding: 10px 24px;
            cursor: pointer
        }

            .calendar-feed-retry:hover,
            .calendar-feed-retry:focus-visible {
                filter: brightness(.92)
            }

        .calendar-feed-session {
            display: grid;
            grid-template-columns: 110px minmax(130px,1fr) minmax(180px,1.1fr) 160px;
            gap: 18px;
            align-items: center;
            background: white;
            border-left: 6px solid transparent;
            padding: 24px;
            transition: border-color .2s ease-in-out,box-shadow .2s ease-in-out
        }

        .date .day {
            color: var(--blue2);
            font-family: var(--condensed-font);
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase
        }

        .date strong {
            display: block;
            font-family: var(--heading-font);
            font-weight: 900;
            font-size: 22px;
            text-transform: uppercase
        }

        .calendar-feed-session:hover {
            border-left-color: var(--blue);
            box-shadow: 0 8px 24px #0000001a
        }

        @media (max-width: 720px) {
            .calendar-feed-session.is-active {
                border-left-color: var(--blue);
                box-shadow: 0 8px 24px #0000001a
            }
        }

        .session-name strong {
            display: block;
            font-weight: 800;
            font-size: 17px
        }

        .session-name small {
            display: block;
            color: var(--muted)
        }

        .row-actions {
            display: flex;
            flex-direction: column;
            grid-column: 4;
            grid-row: 1;
            align-self: start;
            gap: 7px
        }

        .row-actions[hidden],
        .event-booking-menu[hidden],
        .row-actions > .clear-choices[hidden] {
            display: none
        }

        .row-actions > .clear-choices {
            min-height: 48px
        }

        .row-actions > .clear-choices,
        .row-actions > .clear-choices:disabled {
            background: var(--blue2);
            color: white
        }

            .row-actions .secondary {
                padding: 8px 10px;
                font-size: 14px
            }

        .roles-summary {
            display: flex;
            gap: 7px;
            flex-wrap: wrap
        }

        .role-chip {
            background: var(--line);
            flex-basis: 100%;
            min-width: 0;
            overflow-wrap: anywhere;
            color: var(--ink);
            font-weight: 400;
            border-radius: 0;
            padding: 6px 10px;
            font-size: 13px
        }

            .role-chip:not(.absent-list) {
                border-left: 4px solid var(--blue2)
            }

            .role-chip.booked:not(.absent-list) {
                border-left-color: var(--green)
            }

            .role-chip .role-empty {
                color: var(--blue2)
            }

            .role-chip.absent-list summary {
                font-weight: 400
            }

        .role-card.booked {
            background: #e2f4e8;
            border-color: #bce4c8
        }

        .thanks-banner {
            position: fixed;
            top: 24px;
            right: 24px;
            background: #26763f;
            color: white;
            padding: 16px 22px;
            border-radius: 12px;
            font-weight: 650;
            font-size: 17px;
            box-shadow: 0 6px 20px #0003;
            transform: translateX(calc(100% + 40px));
            transition: transform .45s ease;
            border-radius: 0;
            text-transform: uppercase;
            z-index: 1000
        }

            .thanks-banner.show {
                transform: translateX(0)
            }

        .welcome-banner {
            position: relative;
            margin-bottom: 24px;
            padding: clamp(24px, 4vw, 40px);
            padding-top: 64px;
            background: var(--blue2);
            color: #fff;
            font-size: clamp(18px, 2.5vw, 24px);
            font-weight: 650;
            overflow-wrap: anywhere;
            animation: welcome-bounce .8s ease-out both
        }

        .welcome-banner[hidden] {
            display: none
        }

            .welcome-banner p {
                margin: 0 0 20px
            }

            .welcome-banner p:last-child {
                margin-bottom: 0
            }

            .welcome-banner button {
                position: absolute;
                top: 8px;
                right: 8px;
                min-height: 48px;
                background: transparent;
                color: #fff
            }

            .welcome-banner button:hover {
                background: var(--navy)
            }

            .welcome-banner button:focus-visible {
                outline: 3px solid #fff;
                outline-offset: 2px
            }

        @keyframes welcome-bounce {
            0% { opacity: 0; transform: translateY(-48px) }
            60% { opacity: 1; transform: translateY(10px) }
            80% { transform: translateY(-5px) }
            100% { opacity: 1; transform: translateY(0) }
        }

        @media (prefers-reduced-motion: reduce) {
            .thanks-banner {
                transition: none
            }

            .welcome-banner {
                animation: none
            }
        }

        .role-chip-list {
            flex-basis: 100%
        }

        button.book:disabled {
            background: #c8c8c8;
            color: #6b6b6b;
            cursor: not-allowed
        }

        .toolbar {
            display: grid;
            grid-template-columns: minmax(0,1fr);
            align-items: start;
            gap: 16px 24px;
            margin-bottom: 16px
        }

        .name-card {
            grid-row: 2;
            min-width: 0;
            background: #fff;
            padding: 20px 24px
        }

        .current-trainer {
            min-width: 0;
            margin: 0;
            overflow-wrap: anywhere
        }

        #switchTrainer {
            min-height: 48px;
            padding: 0 4px;
            background: transparent;
            color: var(--blue2);
            font: inherit;
            text-transform: none;
            letter-spacing: normal
        }

        .current-trainer-identity {
            overflow-wrap: anywhere
        }

        #switchTrainer:hover {
            text-decoration: underline
        }

        #switchTrainer:focus-visible {
            outline: 2px solid var(--blue2);
            outline-offset: 2px
        }

        .booking-menu {
            grid-row: 1;
            justify-self: end;
            position: relative;
            z-index: 2
        }

            .booking-menu > summary {
                display: flex;
                align-items: center;
                gap: 12px;
                min-height: 48px;
                padding: 12px 18px;
                background: var(--ink);
                color: #fff;
                cursor: pointer;
                list-style: none;
                font-weight: 800;
                font-size: 14px;
                text-transform: uppercase;
                letter-spacing: .04em;
                transition: background-color .2s ease
            }

            .booking-menu > summary::-webkit-details-marker {
                display: none
            }

            .booking-menu[open] > summary {
                background: var(--blue2)
            }

            .booking-menu > summary:focus-visible,
            .booking-menu-items button:focus-visible {
                outline: 3px solid var(--blue);
                outline-offset: 3px
            }

        .booking-menu-icon {
            display: grid;
            gap: 5px;
            width: 22px
        }

            .booking-menu-icon span {
                display: block;
                height: 2px;
                background: currentColor;
                transition: transform .2s ease,opacity .2s ease
            }

            .booking-menu[open] .booking-menu-icon span:first-child {
                transform: translateY(7px) rotate(45deg)
            }

            .booking-menu[open] .booking-menu-icon span:nth-child(2) {
                opacity: 0
            }

            .booking-menu[open] .booking-menu-icon span:last-child {
                transform: translateY(-7px) rotate(-45deg)
            }

        .booking-menu-items {
            position: absolute;
            right: 0;
            top: calc(100% + 8px);
            width: 260px;
            max-width: calc(100vw - 64px);
            padding: 8px;
            background: #fff;
            border-top: 3px solid var(--blue);
            box-shadow: 0 12px 32px #00000026
        }

            .booking-menu-items button {
                display: block;
                width: 100%;
                text-align: left;
                background: #fff;
                color: var(--ink);
                border-left: 3px solid transparent
            }

            .booking-menu-items button[hidden] {
                display: none
            }

            .booking-menu-items button:hover,
            .booking-menu-items button[aria-expanded="true"] {
                background: var(--bg);
                border-left-color: var(--blue);
                color: var(--blue2)
            }

        .event-booking-menu {
            grid-row: auto;
            justify-self: stretch;
            z-index: auto
        }

            .event-booking-menu[open] {
                z-index: 3
            }

            .event-booking-menu .booking-menu-items {
                border: 1px solid #c6c6c6;
                box-shadow: none
            }

            .event-booking-menu .booking-menu-items button {
                min-height: 48px;
                overflow-wrap: anywhere
            }

            .event-booking-menu .book:disabled {
                display: none
            }

        @media (prefers-reduced-motion: reduce) {
            .booking-menu-icon span,
            .booking-menu > summary {
                transition: none
            }
        }

        .overview {
            overflow-x: auto
        }

        .booking-panel {
            background: #fff;
            padding: 20px 24px;
            margin-bottom: 20px
        }

        .booking-panel-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px
        }

            .booking-panel-header h2 {
                margin: 0;
                min-width: 0;
                overflow-wrap: anywhere;
                font-family: var(--heading-font);
                text-transform: uppercase
            }

        .booking-panel-close {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            min-height: 44px;
            padding: 6px 10px;
            background: transparent;
            color: var(--blue2)
        }

            .booking-panel-close span {
                font-size: 28px;
                line-height: 1
            }

            .booking-panel-close:hover {
                background: var(--bg);
                color: var(--blue2)
            }

            .booking-panel-close:focus-visible {
                outline: 2px solid var(--blue2);
                outline-offset: 2px
            }

            .campaign-ready-panel > p {
                margin: 0 0 16px;
                color: var(--muted)
            }

        .campaign-ready-form {
            display: flex;
            flex-wrap: wrap;
            align-items: end;
            gap: 8px 12px
        }

            .campaign-ready-form label {
                flex-basis: 100%;
                font-weight: 800;
                font-size: 13px;
                text-transform: uppercase
            }

            .campaign-ready-form input {
                flex: 1 1 220px;
                min-width: 0;
                padding: 10px 12px;
                border: 2px solid #c6c6c6;
                border-radius: 0;
                font: inherit
            }

                .campaign-ready-form input:focus {
                    outline: none;
                    border-color: var(--ink)
                }

        .campaign-ready-status:empty {
            display: none
        }

        .campaign-ready-status.error {
            color: #b00020;
            font-weight: 700
        }

        .campaign-ready-list {
            margin-top: 16px
        }

        .campaign-ready-items {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
            gap: 8px;
            list-style: none;
            padding: 0;
            margin: 0
        }

            .campaign-ready-items li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 10px 12px;
                background: var(--bg)
            }

        .campaign-ready-remove {
            background: transparent;
            color: var(--blue2);
            padding: 4px 8px
        }

            .campaign-ready-remove:hover {
                color: #fff
            }

        .campaign-ready-chip {
            border-left: 3px solid var(--blue)
        }

        .overview table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            margin-bottom: 20px;
            font-size: 14px
        }

            .overview th, .overview td {
                border: 1px solid #ddd;
                padding: 6px 10px;
                text-align: left;
                vertical-align: top;
                white-space: pre
            }

            .overview th {
                background: var(--ink);
                color: #fff;
                text-transform: uppercase;
                font-size: 12px
            }

        .name-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1 1 280px;
            max-width: 420px
        }

            .name-field label {
                font-weight: 800;
                text-transform: uppercase;
                font-size: 13px;
                letter-spacing: .03em
            }

            .name-field input {
                width: 100%;
                padding: 10px 12px;
                border: 2px solid #c6c6c6;
                border-radius: 0;
                /* 16px prevents iOS Safari from zooming in on focus. */
                font-size: 16px;
                background: #fff
            }

                .name-field input:focus {
                    outline: none;
                    border-color: var(--ink)
                }

        .name-field-hint {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.45
        }

        .trainer-name-dialog {
            width: min(480px, calc(100vw - 32px));
            max-height: calc(100dvh - 32px);
            overflow-y: auto;
            border: 0;
            border-left: 4px solid var(--blue);
            padding: 24px;
            color: var(--ink);
            background: #fff
        }

            .trainer-name-dialog::backdrop {
                background: #0009
            }

            .trainer-name-dialog h2 {
                margin: 0 0 20px;
                font-family: var(--heading-font);
                font-size: 24px;
                line-height: 1.2;
                text-transform: uppercase
            }

            .trainer-name-dialog label {
                display: block;
                font-weight: 800;
                margin-bottom: 6px
            }

            .trainer-name-dialog select {
                width: 100%;
                min-height: 48px;
                padding: 10px 12px;
                border: 2px solid #c6c6c6;
                border-radius: 0;
                background: #fff;
                color: var(--ink);
                font: inherit;
                font-size: 16px
            }

            .trainer-name-dialog .name-field input,
            .trainer-name-dialog button {
                min-height: 48px
            }

            .trainer-name-dialog button[type="submit"] {
                width: 100%
            }

            .trainer-name-dialog button[type="button"] {
                background: var(--line);
                color: var(--ink)
            }

            .trainer-name-dialog button[type="button"]:hover {
                background: #ddd
            }

            #trainerNameChoiceHint {
                margin: 0 0 20px;
                color: var(--muted)
            }

            #trainerNameChoiceStatus:empty {
                display: none
            }

            #trainerNameChoiceForm > button {
                margin-top: 16px
            }

            .trainer-name-dialog select:focus-visible,
            .trainer-name-dialog button:focus-visible {
                outline: 3px solid var(--ink);
                outline-offset: 3px
            }

        .trainer-name-actions {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-top: 20px
        }

        button.remove-name {
            background: transparent;
            color: #b00020;
            padding: 0 4px;
            margin-left: 2px;
            font-weight: bold
        }

        button {
            border: 0;
            border-radius: 0;
            background: var(--blue);
            color: white;
            padding: 12px 16px;
            font: inherit;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: .02em;
            cursor: pointer;
            transition: background-color 80ms ease-in-out,color 80ms ease-in-out
        }

            button:hover {
                background: var(--blue2)
            }

            button:disabled {
                background: #e2f4e8;
                color: #26763f;
                cursor: default
            }

        .full {
            background: #e2f4e8;
            color: #26763f;
            padding: 12px 10px;
            text-align: center;
            border-radius: 0;
            font-weight: 650
        }

        .details {
            display: none;
            background: white;
            border: 0;
            border-radius: 0;
            padding: 24px;
            margin-top: 20px
        }

            .details.show {
                display: block;
                border-top: 4px solid var(--blue)
            }

            .details h2 {
                margin: 0 0 12px
            }

        .roles {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 12px;
            margin: 18px 0
        }

        .role-card {
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 16px
        }

            .role-card h3 {
                font-size: 16px;
                margin: 0 0 8px
            }

            .role-card .slot {
                font-size: 13px;
                color: var(--muted);
                margin-bottom: 10px
            }

            .role-card label {
                display: flex;
                gap: 9px;
                align-items: center;
                border-radius: 8px;
                padding: 8px;
                cursor: pointer
            }

                .role-card label:has(input:checked) {
                    background: #fff3eb
                }

            .role-card input {
                accent-color: var(--blue)
            }

            .role-card small {
                color: var(--muted)
            }

        .actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .secondary {
            background: white;
            color: var(--ink);
            border: 2px solid var(--ink)
        }

            .secondary:hover {
                background: var(--ink);
                color: #fff
            }

        .notice {
            display: none;
            margin-top: 16px;
            background: #e4f5e9;
            border: 1px solid #bce4c8;
            color: #176d37;
            border-radius: 0;
            padding: 15px;
            font-weight: 650
        }

            .notice.show {
                display: block
            }

        @media(max-width:720px) {
            main {
                margin: 0 auto 32px
            }

            .hero {
                min-height: 160px;
                padding: 32px 16px
            }

                .hero::before {
                    background-image: url('/media/bg_dr-800.png')
                }

            .calendar-feed-session {
                padding: 18px
            }

            .toolbar {
                gap: 12px
            }

            .name-card {
                padding: 16px
            }

            .name-field {
                flex-basis: auto;
                max-width: none
            }

            .booking-panel {
                padding: 16px
            }

            .calendar-feed-session {
                grid-template-columns: 1fr 1fr;
                gap: 12px
            }

            .date strong {
                font-size: 19px
            }

            .date {
                grid-column: 1;
                grid-row: 1
            }

            .roles-summary {
                grid-column: 1/-1;
                grid-row: 3
            }

            .row-actions {
                grid-column: 2;
                grid-row: 1
            }

            .full {
                grid-column: 2;
                grid-row: 2
            }

                .row-actions button {
                    width: 100%
                }

            .session-name {
                grid-column: 1/-1;
                grid-row: 2
            }

            .roles {
                grid-template-columns: 1fr
            }

            .actions button {
                width: 100%
            }
        }

.details-intro {
    margin: 8px 0 0;
    color: var(--muted)
}

.overview td small {
    font-size: 12px;
    color: var(--muted)
}

.absent-list summary {
    cursor: pointer;
    font-weight: 650
}



button.book.absent:disabled {
    background: #c8c8c8;
    color: #6b6b6b
}

button.book:disabled {
    display: none
}

/* Login */
body.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 16px;
    position: relative;
    isolation: isolate;
    background: var(--navy) url('/media/topbanner_2019-bw.jpg') center/cover no-repeat
}

    body.login-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: url('/media/bg_dr.png') center bottom/cover no-repeat;
        -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,.65) 0%,black 70%);
        mask-image: linear-gradient(to bottom,rgba(0,0,0,.65) 0%,black 70%)
    }

.login-card {
    width: 100%;
    max-width: 480px;
    margin: 0;
    padding: 24px;
    background: #fff;
    border-left: 4px solid var(--blue)
}

    .login-card h1 {
        margin: 0 0 4px;
        font-family: var(--heading-font);
        font-weight: 900;
        font-size: 24px;
        line-height: 1.1;
        text-transform: uppercase
    }

    .login-card > p {
        margin: 0 0 24px;
        color: var(--muted)
    }

    .login-card form {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .login-card label {
        font-weight: 800;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: .03em
    }

    .login-card input {
        width: 100%;
        padding: 12px;
        border: 2px solid #c6c6c6;
        border-radius: 0;
        /* 16px+ prevents iOS Safari from zooming in on focus. */
        font-size: 20px;
        letter-spacing: .3em;
        font-family: inherit
    }

        .login-card input:focus {
            outline: none;
            border-color: var(--ink)
        }

        .login-card input[aria-invalid="true"] {
            border-color: var(--blue)
        }

    .login-card button {
        margin-top: 8px;
        min-height: 48px;
        width: 100%
    }

.login-error {
    margin: 0;
    color: var(--blue2);
    font-weight: 700;
    font-size: 14px
}