html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 auto 80px auto;
  background: #fcfcfc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/*
 * Bootstrap 5.3 theme overrides restoring the customized Bootstrap 4.2 build's
 * brand: green primary, dark navy navbar, green links and green form focus
 * rings. BS5.3 hardcodes its blue $primary into widgets, so everything green
 * needs its variables re-pointed here.
 */
:root {
  --bs-primary: #28a745;
  --bs-primary-rgb: 40, 167, 69;
  --bs-secondary: #101c28;
  --bs-secondary-rgb: 16, 28, 40;
  --bs-dark: #101c28;
  --bs-dark-rgb: 16, 28, 40;
  --bs-link-color: #28a745;
  --bs-link-color-rgb: 40, 167, 69;
  --bs-link-hover-color: #19692c;
  --bs-link-hover-color-rgb: 25, 105, 44;
  /* BS5.3 grew the global radius from .25rem to .375rem (affects buttons,
     inputs, cards, alerts, navbar corners, ...) */
  --bs-border-radius: .25rem;
  --bs-border-radius-sm: .2rem;
  --bs-border-radius-lg: .3rem;
  /* restore the Bootstrap 4.2 font stack; BS5.3 prepends system-ui, which
     resolves to Segoe UI Variable on Windows 11 instead of Segoe UI */
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* BS4 showed underlines on hover only; BS5.3 hardcodes underline on all links */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* BS5.3 underlines .btn-link text permanently; BS4 kept it hover-only */
.btn-link {
  text-decoration: none;
}

.btn-link:hover, .btn-link:focus {
  text-decoration: underline;
}

/* BS4 kept no focus ring on .btn-link */
.btn-link:focus {
  box-shadow: none;
}

/* BS5.3 dropped the 1px transparent border from .btn-link (the .nav-link
   reset removes it), which made the navbar menu buttons 2px narrower */
.btn.nav-link {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
}

/*
 * Buttons: BS5.3 hardcodes every variant to the blue $primary, so the variants
 * the app uses get their BS4 green/navy palette back (flat, without the old
 * $enable-gradients sheen). Focus rings keep the .2rem BS4 width.
 */
.btn {
  --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #28a745;
  --bs-btn-border-color: #28a745;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #218838;
  --bs-btn-hover-border-color: #1e7e34;
  --bs-btn-active-bg: #1e7e34;
  --bs-btn-active-border-color: #1c7430;
  --bs-btn-disabled-bg: #28a745;
  --bs-btn-disabled-border-color: #28a745;
  --bs-btn-focus-shadow-rgb: 72, 180, 97;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #17a2b8;
  --bs-btn-border-color: #17a2b8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #138496;
  --bs-btn-hover-border-color: #117a8b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #117a8b;
  --bs-btn-active-border-color: #10707f;
  --bs-btn-focus-shadow-rgb: 58, 176, 195;
}

.btn-light {
  --bs-btn-color: #212529;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #e2e6ea;
  --bs-btn-hover-border-color: #dae0e5;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #dae0e5;
  --bs-btn-active-border-color: #d3d9df;
  --bs-btn-focus-shadow-rgb: 216, 217, 219;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #101c28;
  --bs-btn-border-color: #101c28;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #05090d;
  --bs-btn-hover-border-color: #010304;
  --bs-btn-active-bg: #010304;
  --bs-btn-active-border-color: #000;
  --bs-btn-focus-shadow-rgb: 52, 62, 72;
}

/* BS 5.3 compiles this from the blue $primary, so it needs its own override */
.nav-pills {
  --bs-nav-pills-link-active-bg: #28a745;
  --bs-nav-pills-link-active-color: #fff;
}

/* same as above: the active dropdown item (the scoreboard's contest dropdown)
   highlights in the brand green, not the BS5.3 default blue */
.dropdown-menu {
  --bs-dropdown-link-active-bg: #28a745;
}

/*
 * Forms: BS4.2 used darker input text, a cooler border, an inner shadow and a
 * .2rem green focus ring; BS5.3 flattened all of it. Placeholders were #6c757d,
 * not the new 75% body color. Checkboxes keep the BS5 widget, recolored below.
 */
.form-control {
  color: #495057;
  border-color: #ced4da;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  /* BS4 sized every control at calc(2.25rem + 2px); BS5.3 auto-sizes, which
     leaves the selects 3px shorter than before */
  height: calc(2.25rem + 2px);
}

select.form-control[size], select.form-control[multiple] {
  height: auto;
}

.form-control::placeholder {
  color: #6c757d;
}

.form-control:focus, .form-select:focus {
  color: #495057;
  border-color: #71dd8a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 .2rem rgba(40, 167, 69, .25);
}

/* BS5.3 hardcodes the checked checkbox and its focus ring to the blue $primary */
.form-check-input:checked {
  background-color: #28a745;
  border-color: #28a745;
}

.form-check-input:focus {
  border-color: #71dd8a;
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .25);
}

/* BS5.3 set appearance:none on .form-control, which removed the native arrow
   from the selects (the old build kept it; only .form-select was unstyled) */
select.form-control {
  -webkit-appearance: auto;
  appearance: auto;
}

/* BS5 tightened card padding (1.25rem -> 1rem), header caps (.75rem 1.25rem
   -> .5rem 1rem), title spacing (.75rem -> .5rem) and lightened the border */
.card {
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-padding-y: .75rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-title-spacer-y: .75rem;
  --bs-card-border-color: rgba(0, 0, 0, .125);
  --bs-card-cap-bg: rgba(0, 0, 0, .03);
}

/* BS5.3 switched headings to fluid sizes below 1200px (e.g. h3 shrinks by ~5px
   on a phone); BS4 kept them fixed */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

/* BS5.3 faded the <hr> to 25% opacity with a full-color border; BS4 used a
   solid 1px rgba(0,0,0,.1) rule */
hr {
  opacity: 1;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

/* BS5 alert padding grew to 1rem all around; BS4 used .75rem 1.25rem */
.alert {
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-padding-y: .75rem;
}

.alert-success {
  --bs-alert-color: #155724;
  --bs-alert-bg: #d4edda;
  --bs-alert-border-color: #c3e6cb;
  background-image: linear-gradient(180deg, #daf0e0, #d4edda);
}

.alert-info {
  --bs-alert-color: #0c5460;
  --bs-alert-bg: #d1ecf1;
  --bs-alert-border-color: #bee5eb;
  background-image: linear-gradient(180deg, #d8eff3, #d1ecf1);
}

.alert-warning {
  --bs-alert-color: #856404;
  --bs-alert-bg: #fff3cd;
  --bs-alert-border-color: #ffeeba;
  background-image: linear-gradient(180deg, #fff5d5, #fff3cd);
}

.alert-danger {
  --bs-alert-color: #721c24;
  --bs-alert-bg: #f8d7da;
  --bs-alert-border-color: #f5c6cb;
  background-image: linear-gradient(180deg, #f9dde0, #f8d7da);
}

/* BS5.3 resolves text-muted to a 75% body color instead of $gray-600 */
.text-muted {
  color: #6c757d !important;
}

.bg-gradient-warning {
  background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x !important;
}

/*
 * Navbar: BS5.3 defaults the horizontal padding to 0 (the grid .col-10 rule
 * below would give 15px), while BS4 kept 1rem; the dark navbar also faded the
 * toggler color and its icon from .5 to .55 opacity.
 */
nav.navbar {
  padding-left: 1rem;
  padding-right: 1rem;
}

.navbar-dark {
  --bs-navbar-color: rgba(255, 255, 255, .5);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar {
  margin-bottom: 20px;
}

.navbar-brand img {
  height: 2.5em;
}

/* the navbar menu items are white-on-dark; scoped here so .nav-link elements
   on light page backgrounds keep their regular link color */
nav.navbar .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

.challenges {
  display: flex;
  flex-wrap: wrap;
}

.challenges .challenge {
  width: 20em;
}

.challenges .challenge.solved {
    opacity: 0.5;
    transition: opacity .2s ease-out;
}

.challenges .challenge.solved:hover {
    opacity: 1;
}

/* the user's standing in a contest card: the table keeps its natural width
   (no stretching, like the scoreboard page); the reserved right padding
   hosts the tail of the last rotated header label, which extends past the
   last column, so no scrollbar appears when the table fits; min-width lets
   the wrapper shrink below the table's size, so on narrow screens the table
   scrolls instead of overflowing the card */
.standing {
    min-width: 0;
}

.standing .table-responsive {
    padding-right: 110px;
}

.tag-value {
  color: #fff;
  text-shadow:
    -1px -1px 0px #000,
     0px -1px 0px #000,
     1px -1px 0px #000,
    -1px  0px 0px #000,
     1px  0px 0px #000,
    -1px  1px 0px #000,
     0px  1px 0px #000,
     1px  1px 0px #000;
}

.registration ul {
    list-style-type: none;
    padding-left: 1em;
}

.registration ul li:before {
    content: '- ';
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

/* the scoreboard's contest title doubles as the dropdown toggle, styled like
   the site's form controls: bordered like the selects, heading typography
   (the site fixes h4 at 1.5rem), the caret pinned to the right edge and the
   green focus ring, so it clearly reads as an interactive control. the
   wrapper shrink-wraps the toggle so the menu's percentage minimum width
   resolves to the title's own content width, not the whole column */
.contest-select {
  position: relative;
  width: fit-content;
}

.contest-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  padding: .375rem .75rem;
  text-align: left;
  color: inherit;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: var(--bs-border-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

/* bootstrap pins the caret right after the text; here it marks the control's
   right edge, like a select's native arrow */
.contest-toggle::after {
  flex: none;
  margin-left: 0;
}

.contest-toggle:hover {
  background-color: #f8f9fa;
}

.contest-toggle:focus {
  color: inherit;
  border-color: #71dd8a;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 .2rem rgba(40, 167, 69, .25);
}

/* the menu spans at least the toggle's width, so it sits integrated under the title */
.contest-select .dropdown-menu {
  min-width: 100%;
}

.scoreboard {
    width: auto;
    table-layout: fixed;
    /* BS5 paints cells with --bs-table-bg (body white); BS4 cells were transparent */
    --bs-table-bg: transparent;
    /* BS5.3 switched table text to --bs-emphasis-color (#000); BS4 used the body color */
    --bs-table-color: #212529;
    --bs-table-striped-color: #212529;
}

/* BS4's .table th carried a 1px top border and thead th a 2px bottom border;
   BS5.3 only draws a 1px bottom border on every cell */
.scoreboard thead th {
    border-top: 1px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
}

.scoreboard td {
    border: 1px dotted rgba(0, 0, 0, 0.2);
}

.scoreboard td, .scoreboard th {
    padding: .4rem;
}

.scoreboard .header-index {
    width: 2em;
    text-align: right;
}

.scoreboard .column-index {
    text-align: right;
}

.scoreboard th.header-task {
    transform: translate(60px, 15px) rotate(45deg);
}

.scoreboard th.header-task div {
    height: 130px;
    text-align: left;
    border-right: 1px dotted rgba(0, 0, 0, 0.3);
    width: 30px;
}

.scoreboard tr td:first-child {
    border-left: 0;
}

.scoreboard tr td:last-child {
    border-right: 0;
}

.scoreboard th.header-task div a {
    display: block;
    width: 130px;
    height: 30px;
    transform: translate(-48px, 55px) rotate(-90deg);
    font-size: 90%;
    font-weight: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.scoreboard .header-nick {
    width: 5em;
}

.scoreboard .column-nick {
    text-overflow: ellipsis;
    /*overflow: hidden;*/
    white-space: nowrap;
}

.scoreboard .header-total {
    width: 1em;
}

.scoreboard .column-solve {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 30px;
    color: #ffffff;
      text-shadow:
    -1px -1px 0px #28a745,
     0px -1px 0px #28a745,
     1px -1px 0px #28a745,
    -1px  0px 0px #28a745,
     1px  0px 0px #28a745,
    -1px  1px 0px #28a745,
     0px  1px 0px #28a745,
     1px  1px 0px #28a745;
    font-weight: lighter;
    cursor: default;
}

.classification-junior:not(.ai-usage-unspecified) {
    background-color: #e6daae !important;
}

.classification-senior:not(.ai-usage-unspecified) {
    background-color: #cdd7f3 !important;
}

/* BS5 paints table cells via --bs-table-bg, which overrides row-level backgrounds */
tr.classification-junior:not(.ai-usage-unspecified) > td,
tr.classification-junior:not(.ai-usage-unspecified) > th {
    background-color: #e6daae !important;
    /* BS5 stripes via an inset box-shadow that would darken odd rows over the
       classification color; BS4 painted the row solid */
    box-shadow: none;
}

tr.classification-senior:not(.ai-usage-unspecified) > td,
tr.classification-senior:not(.ai-usage-unspecified) > th {
    background-color: #cdd7f3 !important;
    box-shadow: none;
}

/* the logged-in user's own row: heavier top and bottom borders framing the
   row (a background tint would fight the classification colors above), plus
   bold rank, nick and total (the solve cells keep their own lighter look);
   the frame goes on the cells so it wins the collapsed-border conflict
   against the neighboring rows and thead */
.scoreboard tr.me > td {
    border-top: 3px solid #212529;
    border-bottom: 3px solid #212529;
}

.scoreboard tr.me .column-index,
.scoreboard tr.me .column-nick,
.scoreboard tr.me .column-total {
    font-weight: bold;
}

/* BS5 badges default to white text, which is unreadable on the light inline
   background colors the app puts on its category tags */
.badge {
    color: inherit;
}

/* BS4 gutters: columns carried 15px side padding even outside .row, and rows
   used 30px gutters; the templates rely on .col-* as standalone containers */
.col-lg-10, .col-10 {
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    --bs-gutter-x: 1.875rem;
}

/* BS5's grid forces direct .row children to width:100%, flex-shrink:0 and gutter
   padding; the templates place .card directly inside .row, which relied on
   shrinking to fit */
.row > .card {
    width: auto;
    flex-shrink: 1;
    padding-left: 0;
    padding-right: 0;
}

.ai-usage-no .column-nick:before {
    content: '💪 ';
}

blockquote {
    border-left: 5px solid #ddd;
    margin: 0 0 18px;
    padding: 9px 18px;
}

blockquote p {
    margin: 7px;
}

.task-description {
    border-color: #3ea3c8;
}

.task-description pre {
    margin: 7px;
}

ul {
    margin-bottom: 0;
}

.action {
    display: inline-block;
    width: auto;
    line-height: 1.6rem;
    padding: 0.2rem 0.4rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem;
}

.action.download {
    border-left-color: #f0ad4e;
}

.action.download .badge {
    color: #fff;
    background-color: #f0ad4e;
}

.action.web {
    border-left-color: #5FD847;
}

.action.command {
    font-family: monospace;
    border-left-color: #86BA4A;
}

.action span.name {
    font-family: monospace;
    padding-right: 0.4rem;
}

a:hover .action {
    text-decoration: none;
}

a:hover .action span.name {
    text-decoration: underline;
    color: #297590;
}

.highlight {
    padding: 10px;
    font-size: 90%;
}

.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080 } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #000080 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080 } /* Generic.Subheading */
.highlight .gt { color: #0044DD } /* Generic.Traceback */
.highlight .kc { color: #008000 } /* Keyword.Constant */
.highlight .kd { color: #008000 } /* Keyword.Declaration */
.highlight .kn { color: #008000 } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000 } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #7D9029 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #0000FF } /* Name.Class */
.highlight .no { color: #880000 } /* Name.Constant */
.highlight .nd { color: #AA22FF } /* Name.Decorator */
.highlight .ni { color: #999999 } /* Name.Entity */
.highlight .ne { color: #D2413A } /* Name.Exception */
.highlight .nf { color: #0000FF } /* Name.Function */
.highlight .nl { color: #A0A000 } /* Name.Label */
.highlight .nn { color: #0000FF } /* Name.Namespace */
.highlight .nt { color: #008000 } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #AA22FF } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #666666 } /* Literal.Number.Bin */
.highlight .mf { color: #666666 } /* Literal.Number.Float */
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #BB6622 } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #BB6688 } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0000FF } /* Name.Function.Magic */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .vm { color: #19177C } /* Name.Variable.Magic */
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */