/* === Layout resets ===
   The system font stack is declared ONCE here; everything inherits.
   (The early duplicate on .large-heading was dead — the type-scale
   section deliberately uses font-family: inherit.) */
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    box-sizing: border-box;
    /* fruity ships its own body font-family (IBMPlexSans chain) — the
       stack must be re-asserted on body, html alone loses that fight */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* === Hide LimeSurvey internal logo === */
svg.ls-logo {
    display: none !important;
}

/* === Header logos & "..." menu — geometry via CSS variables ===
   Layout (all widths): institute logo top-left (per-survey theme options
   brandlogo/brandlogofile), TU logo top-right, "..." menu LEFT of the TU
   logo with its dots vertically centered on the logo height. One pair of
   variables drives every dependent rule. */
:root {
    --tu-logo-h: 64px;    /* mobile: compact brand mark */
    --tu-logo-w: 174px;   /* follows the SVG aspect (141.1 x 51.86) */
    --header-gap: 20px;   /* air between menu and TU logo */
}

@media (min-width: 768px) {
    :root {
        --tu-logo-h: 88px;
        --tu-logo-w: 238px;
    }
}

#tug-logo-container {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    background-color: transparent;
    padding: 8px 20px 8px 0;
    width: var(--tu-logo-w);
    height: var(--tu-logo-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#tug-logo-container svg#tu-logo {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;                /* former 1rem/2rem margins inflated the box to 96px */
}

/* Institute logo slot — layout_global.twig renders it only when the
   per-survey option brandlogo=on with an uploaded file exists */
#institute-logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    height: var(--tu-logo-h);
    max-width: 45vw;
    padding: 8px 0 8px 20px;
    display: flex;
    align-items: center;
}

#institute-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

/* "..." menu: left of the TU logo, dots vertically centered on logo height.
   position:fixed pops it out of the (right-aligned) navbar flow — the
   menu was unreachable under the logo below ~1100px viewport width. */
#navbar-menu {
    position: fixed;
    top: calc((var(--tu-logo-h) - 31px) / 2);
    right: calc(var(--tu-logo-w) + var(--header-gap));
    z-index: 10001;
}

/* Dropdown panel: anchor to the viewport right edge (below the TU logo)
   instead of the 43px toggle button — the ~250px panel otherwise leaves
   the viewport on narrow screens (measured x=-69 at 390px). */
#navbar-menu > #main-dropdown {
    position: fixed !important;
    top: calc(var(--tu-logo-h) + 8px) !important;
    right: var(--header-gap) !important;
    left: auto !important;
    inset: auto;
    transform: none !important;
    will-change: auto;
}

/* Content clearance under the fixed header logos. !important outranks the
   fruity JS that redefines body padding-top per title length. */
body {
    padding-top: calc(var(--tu-logo-h) + 24px) !important;
}

/* === Footer === */
.tu-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem 1rem;
    text-align: center;
    font-size: var(--tu-body);
    color: #444;
    background-color: #fff;
    border-top: 1px solid #eee;
    z-index: 1000;
}

.tu-footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.tu-footer-links a {
    color: #444;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s;
}

.tu-footer-links a:hover {
    color: #e4154b;
    text-decoration: underline;
}

body > article {
    padding-bottom: 140px;
}

/* === Progress Bar === */
#progress-bar-wrapper {
    width: calc(100% - 24px);  /* mobile: flush with the type area margins */
    margin: 0 auto 1rem;       /* top gap now comes from the body padding */
}

@media (min-width: 1200px) {
    #progress-bar-wrapper {
        width: 80%;            /* flush with the desktop type area */
    }
}

#progress-bar-wrapper .progress {
    height: 1.5rem;
}

#progress-bar-wrapper .progress-bar {
    font-size: var(--tu-body);
}

/* === Type area (Satzspiegel) ===
   Mobile/tablet: full width with a slim 12px margin; desktop (>=1200px,
   bootstrap xl): 80% of the viewport, centered. Replaces fruity's
   col-xl-8 (2/3) column and the former 15%-padding construction
   (which left only 70% usable width at every size). */
.col-centered.col-xl-8 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

@media (min-width: 1200px) {
    .col-centered.col-xl-8 {
        width: 80% !important;
        flex: 0 0 80% !important;
        max-width: 80% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.survey-name {
    text-align: center !important;
}

.form-heading p,
.survey-description p,
.survey-welcome p {
    text-align: center !important;
}

/* === Center bottom anonymous text === */
.ls-emailed-token,
.survey-anonymous,
#ls-token-entry {
    text-align: center !important;
}
/* === Question Layout === */
.question-container {
/*    display: flex !important;*/
    flex-direction: column !important;
    gap: 0 !important;
    row-gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* === Answer controls on ONE indent line ===
   The question rows stack different Bootstrap gutters per type
   (measured on 258439: radios +12, datepicker +14, text fields +24,
   image-select +45 from the title edge). One outer padding (19px) puts
   every control on the same line at title+19px; the type-specific inner
   gutters are neutralized. */
.question-container .answer-container {
    padding-left: 19px !important;
    padding-right: 19px !important;
}

.question-container .ls-answers .col-md-12,
.question-container .ls-answers .col-sm-auto {
    padding-left: 0 !important;
}

li.answer-item.imageselect-container {
    padding-left: 0 !important;
}

/* === Group rhythm: one gap instead of stacked ones ===
   Stock utilities ship group-outer/group-container margins of 15/30px and
   the h2 a 1em top margin — stacked with the question margin that summed
   up to 134px between a group's last answer and the next group title
   (measured on 258439 'Adresse'). */
.group-outer-container,
.group-container {
    margin-top: 8px;
    margin-bottom: 12px;
}

.group-container .group-title {
    margin-top: 8px;           /* stock: 1em — the container margins already provide the air */
}
/* === Remove space between label and answer box === */
.question-title-container,
.question-title-container.col-12 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.question-container > [class*="col-"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* === Answer box spacing === */
.question-text-container {
    margin: 0 !important;
    padding: 0 !important;
}

.ls-answers {
    margin: 0 !important;
    padding-top: 0 !important;
}

.ls-label-question {
    margin-bottom: 0 !important;
}

.text-long .answer-item {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* === Type scale (design tokens) ===
   Single anchor --tu-h1 (the survey title); every other level is a
   ratio of it — DOM-position safe (an em cascade would break across the
   sibling containers title/group/question live in). The mobile block
   flips the whole scale with one knob; individual levels can be
   decoupled later by overriding their var per breakpoint.
   NOTE: the anchor is px ON PURPOSE (h1 is specified as an absolute
   24px at 100% browser zoom); body text stays fruity-controlled rem —
   if fruity ever changes its body size or root scaling, the h1:body
   RATIO drifts, not the h1 size. The --tu-* names are a public API
   for child themes (institute logos etc.) — do not rename. */
:root {
    --tu-h1: 25px;                                /* desktop anchor */
    --tu-h2: calc(var(--tu-h1) * 0.76);           /* 19px: group titles */
    --tu-question: calc(var(--tu-h1) * 0.68);     /* 17px: question text, bold — one step below group titles */
    --tu-body: calc(var(--tu-h1) * 0.6);          /* 15px: body + answer labels */
    --tu-zebra: rgb(243, 244, 249);               /* array row striping, between white and hover */
}

@media (max-width: 767.98px) {
    :root {
        --tu-h1: 20px;                            /* one knob moves the whole scale */
        --tu-body: 14px;                          /* px override does not ride fruity's root scaling */
    }
}

/* Body rides the token scale too — otherwise the question text would fall
   BELOW the fruity body size and answer labels would outsize their own
   question. */
body {
    font-size: var(--tu-body);
}

/* === Page headings ===
   Group titles render as <h2> in most surveys, one level BELOW the
   survey title (h1). font-family: inherit drops the stale IBMPlexSerif
   first-family (webfont removed earlier). */
.large-heading {
    font-size: var(--tu-h1);
    line-height: 1.25;
    font-family: inherit;
}

.group-container .group-title {
    font-size: var(--tu-h2);
    line-height: 1.3;
    font-family: inherit;
}

/* === Rich-text headings: visual hierarchy ===
   Scoped to rich-text containers; the theme chrome keeps its own design.
   h3/h4 sit at body level by design (a 24px h1 leaves only ~1.3x of
   headroom over the 18.24px body) — expressed as em in body context,
   so they follow any future body/root change automatically. */
.survey-description h1,
.question-text h1,
.ls-label-question h1 {
    font-size: var(--tu-h1);
    line-height: 1.3;
}

.survey-description h2,
.question-text h2,
.ls-label-question h2 {
    font-size: var(--tu-h2);
    line-height: 1.3;
}

.survey-description h3,
.question-text h3,
.ls-label-question h3 {
    font-size: 1.01em;
    line-height: 1.35;
}

.survey-description h4,
.question-text h4,
.ls-label-question h4 {
    font-size: 1em;
    line-height: 1.4;
}

/* === Survey description text: one step smaller (matches the h2 scale-down;
   stock .form-heading ships 1.2825rem which would outsize the new h2) === */
/* === Survey description text: rides body level (formerly 1.15rem,
    which would now outsize the body itself) === */
.survey-description {
    font-size: 1em;
}

/* === Content links: always recognizable ===
   BS5 ships text-decoration:none; a TU blue link without underline is
   indistinguishable from body text (reported: "email address doesn't
   look like a link"). Content links get the underline back. */
.survey-description a,
.question-text a,
.ls-label-question a,
.answer-container a {
    text-decoration: underline;
}

.survey-description a:hover,
.question-text a:hover,
.ls-label-question a:hover,
.answer-container a:hover {
    text-decoration: underline;
}

/* === Group/survey titles: never break mid-word (wrap at spaces only) === */
.group-title,
.large-heading {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* === Question text: 16px, bold — clearly above the 14px answer labels === */
.question-container .ls-label-question {
    font-size: var(--tu-question); /* stock: 24px */
    font-weight: 700;
}

/* === Answer-level texts in tables: ride the body token ===
   fruity pins array row labels AND column headers (and multiple-choice
   table items) at its legacy 1.14rem (18.24px) — they ignored the body
   override because they carry their own font-size. Row labels render
   like body text (w400), column headers keep semi-bold for contrast. */
table.ls-answers th.answertext {
    font-size: var(--tu-body);
    font-weight: 400;
}

/* Radio arrays: the row labels ARE the questions' statements — bold,
   matching the question-text weight. Scoped to .radio-array so
   checkbox tables (answer options, not questions) stay normal. */
table.radio-array th.answertext {
    font-weight: 700;
}

table.ls-answers thead th.answer-text {
    font-size: var(--tu-body);
    font-weight: 700;
}

/* Text arrays: ROW labels dock right against their input column (stock
   left-aligns short labels like "Name" leaving 133px of dead space) and
   render bold like question statements. tbody only — the thead cells of
   text arrays carry the SAME class 'answertext' (no hyphen, unlike radio
   arrays' 'answer-text') and would inherit the right-alignment. */
table.text-array tbody th.answertext {
    text-align: right;
    font-weight: 700;
}

/* Text-array column headers: bold, docking LEFT at their own field's
   edge (the inputs sit 8px inside the cell). Specificity note: stock
   centers these headers; the cells may carry 'answertext' (no hyphen)
   OR 'answer-text' depending on question view — cover both, the class
   bump outguns the stock centering. */
table.text-array thead th.answertext,
table.text-array thead th.answer-text {
    text-align: left;
    padding-left: 8px;
    font-weight: 700;
    font-size: var(--tu-body);
}

/* === Zebra striping on array tables, one tone ===
   Stock zebra only hit tables at rgb(249,249,251); this keeps it on
   array/matrix tables (where it groups the row visually, e.g. the
   senate composition matrix) at a slightly darker tone between the old
   zebra and the hover colour rgb(238,239,247). List questions (radio/
   checkbox options) stay white — zebra there looked noisy. */
table.ls-answers.table-striped > tbody > tr:nth-child(2n),
table.ls-answers tbody tr.ls-even {
    background-color: var(--tu-zebra);
}

/* Group descriptions are body-level text (stock pins them at 18px via
   ".group-container .group-description" — matched selector for selector) */
.group-container .group-description {
    font-size: var(--tu-body);
}

/* === Buttons: uniform 14px (stock .btn 1.14rem / .btn-lg 1.425rem) === */
.btn,
.btn-lg {
    font-size: var(--tu-body);
}

/* === Legacy-size cleanup: every remaining fruity text level rides a token.
   Sources verified via CSSOM audit (theme_apple.css): answer labels,
   welcome/description prose, language changer, dropdown entries,
   datasecurity notice, ranking/numeric helpers, error pages (45.6px
   titles!), completed/end page, quota + thank-you messages, alerts,
   public statistics, print-answers view. */
.form-heading,
.ls-answers label,
.answer-item label,
.control-label,
.ls-answers .ls-heading th,
.form-change-lang .control-label,
.form-change-lang #language-changer-select,
.dropdown-menu .dropdown-item,
.datasecurity-checkbox-label,
.select-sortable-lists:not(.ranking-advanced-style) .label,
.numeric-multi .dynamic-total,
.question-count-text,
.slider-list .slider .tooltip,
body.error-page .error-content,
body.error-page .error-link,
.completed-wrapper .completed-Content,
.quotamessage,
.alert > .alert-header,
.public-stats .statsNumRecords,
.printanswers-container span {
    font-size: var(--tu-body);
}

body.error-page .error-title,
.completed-wrapper .completed-heading,
.public-stats .statsSurveyTitle {
    font-size: var(--tu-h1);      /* these are page-level headings */
}

.well .thankyou {
    font-size: var(--tu-h2);
}

/* === Radios & checkboxes: touch-friendly, TU brand color ===
   The parent theme ships the "awesome-bootstrap-checkbox" system:
   the real input is hidden (opacity:0, absolute 17px) and a FAKE
   control is drawn via label::before/::after (19px ring, green dot).
   We disable the fakes and style the REAL inputs instead.

   List items stay in normal INLINE flow (no flex): the estate carries
   two markup generations — older questions put the input directly in
   the li (e.g. 258439), newer wrap it in .row > .col-auto (638847).
   In both, input and label share one line box, so vertical-align
   (see input rule below) centers the control on the text line and
   anchors it to the FIRST line of multi-line labels. Flex would make
   the input a flex item in the old markup and silently ignore
   vertical-align there. */
li.radio-item,
li.checkbox-item {
    /* Touch-friendly rows (20px line + 24px padding) with the text
       VERTICALLY centered — min-height left inline content top-heavy with
       a 23px sack below each row once labels became inline (258439).
       margin-bottom 0 neutralizes the stock 1em — the padding IS the
       rhythm (24px between option lines). */
    padding: 10px 0;
    margin-bottom: 0;
}

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    content: none !important;  /* kill the fake ring/dot */
    display: none !important;
}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: static;          /* stock: absolute 17px box */
    opacity: 1;                /* stock: 0 (invisible) */
    width: 18px;               /* proportional to the 14px answer text */
    height: 18px;
    flex: none;
    /* List controls live INSIDE .row > .col-auto as inline content next to
       their label — top margins are eaten by baseline alignment there.
       vertical-align: middle centers the control on the glyph line. */
    vertical-align: middle;
    margin: 0 0.5rem 0 0;
    cursor: pointer;
    background-color: #fff;
}

.radio-item input[type="radio"] {
    border: 2px solid #767676;
    border-radius: 50%;
}

.checkbox-item input[type="checkbox"] {
    border: 2px solid #767676;
    border-radius: 3px;
}

.radio-item input[type="radio"]:checked {
    border-color: #0c5a77;
    background: radial-gradient(circle, #0c5a77 0 44%, transparent 50%);
}

.checkbox-item input[type="checkbox"]:checked {
    border-color: #0c5a77;
    background-color: #0c5a77;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.7 5.3a1 1 0 0 1 0 1.4l-4.5 4.5a1 1 0 0 1-1.4 0L3.3 7.7a1 1 0 0 1 1.4-1.4l2.2 2.2 3.8-3.8a1 1 0 0 1 1.4 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
}

.radio-item input[type="radio"]:hover:not(:disabled),
.checkbox-item input[type="checkbox"]:hover:not(:disabled) {
    border-color: #0c5a77;
}

.radio-item input[type="radio"]:focus-visible,
.checkbox-item input[type="checkbox"]:focus-visible {
    outline: 2px solid #0c5a77;
    outline-offset: 2px;
}

.radio-item input[type="radio"]:disabled,
.checkbox-item input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Touch target: generous vertical padding on the answer labels */
/* Labels flow INLINE next to their input: the text starts on the input's
   line (first-line anchoring for wrapped options — inline-block labels
   would baseline-align to their LAST line) and narrow screens wrap the
   text around the input instead of stacking the label below it. Vertical
   padding would be ignored on inline elements — the li's min-height
   provides the row spacing. */
.radio-item label,
.checkbox-item label {
    display: inline;
    margin: 0;
    cursor: pointer;
}

/* === Array cells: radios exactly under the column headers ===
   In array questions (type F etc.) every td.answer-cell also carries
   .radio-item and contains the answer text again in a
   label.ls-label-xs-visibility (fruity's responsive fallback). Stock hides
   only its INNER span offscreen — the label box itself stays inline
   (~26px) next to the input. With the real-input redesign above the input
   became flow-relevant, so the input+label group gets centered and every
   array radio sits ~15.5px LEFT of its column header center (measured on
   survey 638847 G06Q17, headers at 624.0 vs radios at 608.5).
   Hide the ghost box ONLY outside fruity's collapse band — inside it
   (viewport <=760px, or iPad-like device-width 768-1024) the thead is
   hidden by "table.ls-answers thead {display:none}" and these labels are
   the ONLY answer texts shown. The media list below is the exact
   complement of fruity's collapse condition. */
@media (min-width: 761px) and (max-device-width: 767px),
       (min-width: 761px) and (min-device-width: 1025px) {
    td.answer-item.radio-item label.ls-label-xs-visibility,
    td.answer-item.checkbox-item label.ls-label-xs-visibility {
        display: none;
    }
}

td.answer-item.radio-item input[type="radio"],
td.answer-item.checkbox-item input[type="checkbox"] {
    display: block;
    margin: 0 auto;           /* block centers horizontally; the td's own
                                  vertical-align: middle centers the row height —
                                  no baseline game, no hand-tuned margins */
}

/* === Array column widths: use the available space ===
   LimeSurvey renders arrays with an inline colgroup — label column
   hard-coded 70%, every answer column 5%. On single-statement arrays
   (empty row label, e.g. 638847 qid 353075) 70% of the table is dead
   space and each answer column gets ~50px: headers wrap, radios squeeze
   right. Override the inline widths (!important beats them): label
   column 30% (fits the longest subquestion label on one line), answer
   columns without a width share the remaining 70% EQUALLY per the
   fixed-table-layout algorithm. */
table.ls-answers col.col-answers {
    width: 30% !important;
}

/* Single-statement arrays (ALL row labels empty — e.g. 638847 qid 353075
   "Wie gerne arbeiten Sie an der TU Graz?"): the label column is dead
   space, give the answers essentially the whole table width. The
   tugMarkNoLabelArrays() script in layout_global.twig sets the class —
   CSS cannot detect text nodes (labels are raw text next to the hidden
   input, and 377 estate arrays have exactly one LABELED row, so row
   count is not a safe discriminator either). */
table.ls-answers.array-no-label col.col-answers {
    width: 2% !important;
}

table.ls-answers colgroup.col-responses col.ls-col-odd,
table.ls-answers colgroup.col-responses col.ls-col-even {
    width: auto !important;
}

/* Tighter header padding: "sehr ungern" needs ~105px of the 118px column —
   the stock 8px horizontal padding pushed it into a wrap. */
table.ls-answers thead th {
    padding-inline: 4px;
}

/* === Links: TU theme primary blue ===
   Content links get the theme primary color (matches buttons/progress).
   Footer links keep their own gray styling (.tu-footer-links a is more
   specific and remains defined below/above). */
a {
    color: #0c5a77;
}

/* font-size: inherit cancels the parent's GLOBAL
   "a { font-size: 0.9975rem }" (theme_apple.css etc.), which pins every
   link to 15.96px: visibly smaller than welcome/question text (20–20.5px)
   and larger than footer text (14.4px). Links must flow with their
   context; scoped anchor rules in the parent (nav dropdown, datasecurity
   link) keep winning by specificity and stay intact. custom.css loads
   after the variation CSS, so source order settles the tie. */
a {
    font-size: inherit;
}

a:hover {
    color: #0e6d8f;
}

/* === Mandatory marker: TU brand red, inline with the question text ===
   The marker is a plain text asterisk placed adjacent to the question
   text (see question_text_content.twig override) — no whitespace means
   no line-break opportunity, so it always stays on the same line. */
.asterisk.asterisk-text {
    color: #e4154b;
    font-weight: 700;
    display: inline;
    font-style: normal; /* neutralizes any inherited <i> styling */
    margin-left: 0.1rem;
    margin-right: 0.3rem;
}

/* Question texts are wrapped in <p> blocks; the first one must flow
   inline with the asterisk so the marker never sits on its own line. */
.ls-label-question p:first-of-type {
    display: inline;
}

/* === Readable text: darken gray answer/label text to black ===
   Scoped intentionally — semantic colors (validation errors, alerts,
   muted help texts) keep their meaning. Do NOT reintroduce a global
   "force everything black" rule: it hides error feedback. */
body {
    color: #000000;
}

.answertext,
.control-label,
.answertext.control-label,
.ls-answers .answertext,
.subquestion-list .answertext,
.answer-item,
.radio-item,
.answers-list,
.ls-label-question,
.question-text,
.ls-question-text,
th.answertext,
td.answer-item {
    color: #000000 !important;
}


/* === Fix welcome container width === */
#welcome-container {
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    /* no extra horizontal padding — the type area (Satzspiegel) already
       provides the margins; the former 10% doubled them up */
}

/* === Center privacy/anonymous text === */
.ls-privacy-block {
    text-align: center !important;
}

.ls-privacy-head,
.ls-privacy-body {
    text-align: center !important;
}

.ls-privacy-body p {
    text-align: center !important;
}

/* ============================================================
   TU Graz brand colors (primary: TU blue #0c5a77)
   The parent theme (fruity_twentythree) ships compiled CSS
   with literal colors (stock green #14AE5C) — tokens alone do
   not recolor everything, so the affected components are
   overridden here with strong specificity. custom.css loads
   last, after css/variations/*.css from the parent.
   ============================================================ */
:root {
    --bs-primary: #0c5a77;
    --bs-primary-rgb: 12, 90, 119;
}

.btn-primary {
    color: #ffffff;
    background-color: #0c5a77;
    border-color: #0c5a77;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;
    background-color: #0e6d8f;
    border-color: #0e6d8f;
}

.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
    color: #ffffff;
    background-color: #0a4c64;
    border-color: #0a4c64;
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #ffffff;
    background-color: #0c5a77;
    border-color: #0c5a77;
    opacity: 0.65;
}

.btn-outline-primary {
    color: #0c5a77;
    border-color: #0c5a77;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff;
    background-color: #0c5a77;
    border-color: #0c5a77;
}

.progress-bar {
    background-color: #0c5a77;
    color: #ffffff;
}

/* Text/link utilities built from the primary token */
.text-primary {
    color: #0c5a77 !important;
}

.bg-primary {
    background-color: #0c5a77 !important;
}