:root {
  --default-font: "Radio Canada";
  --font-size: 14px;
  --header-width: 200px;
  --header-height: 0px;
  --logo-height: 26px;
}

*, *:before, *:after, *::-webkit-scrollbar-thumb {
  box-sizing: border-box;
  border-radius: 0 !important;
}

*::selection {
  background-color: rgb(var(--oi-green));
  color: rgb(var(--white));
}

.unhighlightable {
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.lightmode .dark-stuff {
  display: none;
}

.darkmode .light-stuff, .superdarkmode .light-stuff {
  display: none;
}

#mode-icon img {
  height: 125%;
  aspect-ratio: 1 / 1;
  filter: var(--filter-oi-green);
}

#light-icon, #dark-icon, #superdark-icon {
  transform-origin: center 150%;
  position: absolute;
  transition: transform var(--ani-200) ease;
}

#light-icon {
  transform: rotate(0deg);
  opacity: 1;
}

#dark-icon {
  transform: rotate(-120deg);
  opacity: 0;
}

#superdark-icon {
  transform: rotate(120deg);
  opacity: 1;
}

#mode-icon {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  transition: all var(--ani-100) ease;
}

body > *:not(#header) {
  margin-left: var(--header-width);
  opacity: 0;
  transition: margin-left var(--ani-150) ease, margin-top var(--ani-150) ease, opacity var(--ani-100) ease, min-height var(--ani-150) ease;
}

body.full > *:not(#header) {
  margin-left: 0;
}

body > *:not(#header).show {
  opacity: 1;
}

html, body, select, input {
  font-family: var(--default-font);
  font-size: var(--font-size);
}

html, body, select {
  margin: 0;
}

body, select, input {
  background: rgb(var(--background-colour));
  color: rgb(var(--black));
  transition: background-color var(--ani-200) ease, color var(--ani-200) ease;
}

body {
  /*overflow-y: scroll;*/
}

main {
  padding: 25px;
  box-sizing: border-box;
  min-height: calc(100vh - var(--footer-height));
  /* overflow-x: auto; */
}

/* width */
*::-webkit-scrollbar/*, #header::-webkit-scrollbar, .table-container::-webkit-scrollbar, .page-head-info::-webkit-scrollbar, .index-card::-webkit-scrollbar*/ {
  width: 5px;
  height: 5px;
}

body::-webkit-scrollbar {
  width: 7.5px;
  height: 7.5px;
}

/* Track */
*::-webkit-scrollbar-track {
  background: rgba(var(--oi-green-light-25), 0.5);
}

/* Handle */
*::-webkit-scrollbar-thumb {
  background-color: rgb(var(--oi-green-light-50));
  border-radius: 2.5px;
}

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--oi-green-light));
}

*::-webkit-scrollbar-corner {
  background-color: rgb(var(--oi-green-light-50));
}

#header-real {
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  column-gap: 25px;
  position: fixed;
  left: 0;
  height: 100vh;
  width: var(--header-width);
  z-index: 4;
}

#header-real:before {
  position: absolute;
  content: "";
  inset: 0 0 0 0;
  background-color: rgb(var(--oi-green-light-25));
  z-index: -1;
}

#toggle-header, #toggle-header-space {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px;
}

#toggle-header-space {
  opacity: 0;
  transform: translateX(100%);
}

#toggle-header {
  transform: translateX(0);
  background-color: rgb(var(--oi-green-light-25));
  transition: transform var(--ani-100) ease;
  opacity: 0.5;
  z-index: -2;
}

#toggle-header img {
  transition: transform var(--ani-100) ease;
}

#toggle-header img, #toggle-header-space img {
  max-height: 0.75em;
  max-width: 0.75em;
}

#toggle-header-space:hover ~ #toggle-header {
  transform: translateX(100%);
}

#header-real.hide {
  transform: translateX(-100%);
  pointer-events: none;
  backdrop-filter: none;
}

#header-real.hide #toggle-header img {
  transform: scaleX(-1);
}

#header-real.hide:before {
  opacity: 0;
}

#header-real.animate {
  transition: transform var(--ani-150) ease;
  pointer-events: none;
}

#header-real.animate:before {
  transition: opacity var(--ani-150) ease;
}

#header-top, #header-bottom {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  width: 100%;
}

#header-top {
  align-items: center;
}

.profile-pic {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#header-bottom .profile-pic {
  height: 1.5em;
  width: 1.5em;
}

#header-bottom #user-info {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  column-gap: 10px;
}

#header-bottom #user-info #user-info-main {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

#header-bottom #small-option-container {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 5px;
  grid-template-columns: repeat(2, 1fr);
}

#header-bottom #small-option-container > * {
  width: 100%;
  height: 100%;
  min-height: 1.75em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contest-header-info {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.contest-header-info > span {
  white-space: nowrap;
  font-size: 0.75em;
}

.web-section, .contest-header-info {
  display: flex;
  align-items: center;
  background-color: rgba(var(--oi-green-light), 25%);
  padding: 3.75px 10px;
  column-gap: 7.5px;
  overflow: hidden;
  justify-content: space-between;
  flex-direction: row;
}

.web-section > .web-section-text {
  width: -webkit-fill-available;
  width: -moz-available;
}

.web-section {
  color: rgb(var(--black));
  text-align: center;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  min-height: 1.875em;
}

.web-section:before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background-color: rgb(var(--oi-green-light));
  transform: translateY(105%);
  transform-origin: bottom;
  transition: transform var(--ani-100) ease;
  border-radius: 2.5px;
  z-index: -1;
}

.web-section:hover:before {
  transform: translateY(0);
}

#nav {
  display: flex;
  flex-direction: column;
  list-style: none;
  row-gap: 10px;
  padding: 0;
  margin: 0;
  width: 100%;
}

#nav * {
  transition: all var(--ani-100) ease;
  transition-property: background-color, color;
}

.show #nav .active {
  background-color: rgb(var(--oi-green));
  color: rgb(var(--white));
}

.show #nav .active .header-page-icon {
  filter: brightness(0) invert(1);
}

html {
  height: 100%;
}

#footer {
  text-align: center;
  font-size: 0.75em;
  filter: var(--filter-oi-green-light);
  height: var(--footer-height);
  position: sticky;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.grid-container {
  width: 100%;
}

.grid-item {
	width:100%;
}

.grid-title {
  font-weight: 600;
  text-transform: uppercase;
}

.index-card-main {
  display: grid;
  font-size: 1.375em;
}

.problem-id, .small-problem-basic {
  min-width: 5em;
  text-align: center;
}

.problem-id, .page-head-id {
  background-color: rgb(var(--oi-green-light-25));
  border-radius: 2.5px;
}

.problem-id, .problem-name, .page-head-id, .page-head-name {
  grid-row: 1;
  position: relative;
}

.problem-id, .problem-name {
  padding: 0.125em 0.5em;
}

.page-head-id, .page-head-name {
  padding: 0.125em 0.375em;
}

.page-head-name:first-child {
  padding-left: 0;
}

table, td, th {
  border-collapse: collapse;
  text-align: center;
}

td, th {
  padding: 7px 8px;
}

table, td {
  border: 0.5px solid rgba(var(--oi-green), 10%);
}

th, .sample-tests .sample-heading, .subtasks .sample-heading {
  border: 0.5px solid rgba(var(--white), 10%);
}

tbody tr:nth-child(even), #submission-table tbody tr:nth-child(4n), #submission-table tbody tr:nth-child(4n+3), #journal-table tbody tr:nth-child(4n), #journal-table tbody tr:nth-child(4n+3) {
  background-color: rgba(var(--oi-green-light), 5%);
}

#submission-table tbody tr:nth-child(4n+1), #submission-table tbody tr:nth-child(4n+2), #journal-table tbody tr:nth-child(4n+1), #journal-table tbody tr:nth-child(4n+2) {
  background-color: unset;
}

tbody tr, .sample {
  transition: all var(--ani-100) ease;
}

tbody tr:hover, .sample:hover {
  background: rgba(var(--oi-green-light), 10%);
}

thead, .sample-heading {
  background-color: rgb(var(--oi-green-light-25));
  color: rgb(var(--oi-green));
  position: relative;
}

.ac, .pass {
  color: rgb(var(--oi-green));
  font-weight: 600;
}

.wa, .mle, .tle, .re, .ce, .sk, .fail {
  color: grey;
}

.ps {
  color: orange;
}

.big-table {
  width: 100%;
  max-width: 100%;
}

.mid-table {
  width: min(100%, max(400px, 40%));
}

h1 {
  position: relative;
  text-align: center;
  font-weight: 600;
}

.view h1 {
  text-transform: uppercase;
  letter-spacing: 0.125em;
}

h1.sp {
  margin-top: 0.5%;
  margin-bottom: 2.5%;
}

h2::before {
  content: "";
  inset: 0 -5px 0 -5px;
  position: absolute;
}

.view .table-container > table { 
  margin: 0 auto;
}

.table-container {
  overflow: auto;
  max-width: 100%;
}

.page-icon {
  height: 0.75em;
}

h1 .page-icon:first-child {
  margin-right: 10px;
  position: relative;
}

.header-page-icon {
  height: 0.75em;
  filter: brightness(75%);
}

button {
  position: relative;
  font: inherit;
  cursor: pointer;
  width: fit-content;
  overflow: hidden;
  background: none;
  border: none;
  padding: 0.25em 0.75em;
  border-radius: 2.5px;
  color: rgb(var(--black));
}

a.no-ul {
  text-decoration: none;
}

button:before, button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

button:before {
  background-color: rgb(var(--oi-green-light-25));
  z-index: -2;
}

button:after {
  background-color: rgb(var(--oi-green-light));
  transform: translateY(105%);
  transition: transform var(--ani-100) ease;
  border-radius: 2.5px;
  z-index: -1;
}

button:hover::after {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.page-head, .index-card-main {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

.page-head {
  font-weight: 600;
}

h2 {
  font-weight: 600;
  position: relative;
  width: fit-content;
  display: flex;
  column-gap: 10px;
}

h2::before {
  background: rgb(var(--oi-green-light-25));
  z-index: -1;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform var(--ani-100) ease;
  border-radius: 2.5px;
}

section:hover > h2::before, .index-card:hover > h2::before {
  transform: scaleY(1);
}

section {
  margin-top: 50px;
  margin-bottom: 50px;
  max-width: 100%;
}

.inline-code {
  font-family: var(--code-font);
  border: 1px solid rgb(var(--oi-green-light));
  padding: 1px 2.5px;
  border-radius: 2.5px;
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
}

.code {
  font-family: var(--code-font);
  font-size: 15px;
  min-width: 120px;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  padding: 5px;
  padding-left: 10px;
  padding-right: 15px;
}

.setting-code {
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.copyable {
  cursor: pointer;
}

.index-container {
  width: 100%;
}

.index-child {
  display: grid;
  height: 100%;
  width: 100%;
  grid-gap: 10px;
}

.index-card {
	width: 100%;
  overflow-y: auto;
	border: 2px solid rgb(var(--oi-green-light-25));
	padding: 15px;
  margin: 0;
  border-radius: 5px;
  box-sizing: border-box;
  transition: all var(--ani-100) ease;
}

.index-card h2 {
  text-align: center;
  margin: auto;
}

.ann-head, .ann-content {
  block-size: fit-content;
}

.ann-head {
	background-color: rgb(var(--oi-green-light-25));
  padding: 5px 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.ann-content {
  background-color: rgba(var(--background-colour), 75%);
	border: 2.5px solid rgb(var(--oi-green-light-25));
  padding: 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.prob-button {
  width: 100%;
}

.count {
  display: inline;
  color: rgb(var(--oi-green-light));
  background-color: rgba(var(--oi-green-light-25), 75%);
  padding: 0 5px;
  transition: all var(--ani-100) ease;
  border-radius: 2.5px;
}

section:hover .count {
  color: rgb(var(--oi-green));
}

.page-head-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  margin-top: -10px;
  margin-bottom: 20px;
  gap: 10px 20px;
}

.page-head-info-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.problem-info-popup {
  position: absolute;
  opacity: 0;
  top: calc(100% + 10px);
  pointer-events: none;
  z-index: 1;
  width: max-content;
  background-color: rgba(var(--oi-green-light-25), 75%);
  backdrop-filter: saturate(180%) blur(15px);
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  transition: opacity 0.25s ease, top 0.25s ease;
  left: 0;
}

.problem-info-popup > div {
  padding: 5px 10px;
}

.problem-info-popup > div:first-child {
  background-color: rgba(var(--oi-green-light), 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2.5px;
}

.problem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;

  > div {
    font-size: 0.75em;
    color: rgb(var(--oi-green));
    background-color: rgba(var(--oi-green-light), 0.5);
    padding: 0.125em 0.375em;
  }

  .hide-tags & {
    display: none;
  }

  #problems & {
    > div {
      animation: card-appear var(--ani-100) ease;
    }
  }
}

.problems-list, .contests-list {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.hide-solved {
  .problems-list {
    > .solved {
      display: none;
    }
  }  
}

.page-head-info-section:hover > .problem-info-popup {
  opacity: 1;
  top: 100%;
  pointer-events: revert;
}

mark, .small-problem-basic {
  padding: 0.125em 0.375em;
}

mark {
  display: inline;
  color: inherit;
}

.stat-label, .stat-no {
  padding: 0.25em 0.375em;
  display: flex;
  align-items: center;
}

.stat-label, mark {
  background-color: rgb(var(--oi-green-light-25));
}

.stat-label {
  border-top-left-radius: 2.5px;
  border-bottom-left-radius: 2.5px;
}

.stat-no {
  background-color: rgb(var(--oi-green-light-50));
  border-top-right-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
}

.stat-label, .small-icon {
  --small-icon-size: min(12px, 1em);
}

.stat-label img {
  height: var(--small-icon-size);
  width: var(--small-icon-size);
}

.small-icon {
  max-height: var(--small-icon-size);
  max-width: var(--small-icon-size);
}

.stat-label > span:has(> .small-icon:only-child) {
  height: var(--small-icon-size);
}

section {
  width: fit-content;
  block-size: fit-content;
}

.index-container section {
  margin: 0;
}

#logo {
  z-index: 1;
  white-space: nowrap;
  text-decoration: none;
  color: rgb(var(--black));
  position: relative;
}

.user-input {
	height: 100%;
  width: 100%;
  border: 0px;
  padding: 0px;
  font-size: 16px;
}

.subtask-constraint {
  text-align: left;
}

.digit {
  display: flex;
  justify-content: center;
  height: 1em;
  align-items: center;
}

.digit.narrow {
  width: 0.25em;
}

.digit.wide {
  width: 0.53125em;
}

.clock {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.125em;
  font-weight: 500;
}

#header-real #clock {
  color: rgb(var(--oi-green));
  column-gap: 0.25em;
}

#header-real #clock > .digit {
  font-size: 0.75em;
}

.contest-header-info .clock > .digit {
  font-size: 1.125em;
}

#header-real .contest-clocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#contest-clock {
  justify-content: center;
}

#logo {
  display: flex;
  align-items: flex-start;
  column-gap: calc(var(--logo-height) / 4);
}

#logo-icon, #logo-word {
  height: var(--logo-height);
}

#logo-icon > polygon {
  transition: fill var(--ani-100) ease;
}

.logo-icon-a, #logo:hover .logo-icon-b {
  fill: rgb(var(--oi-green));
}

.logo-icon-b, #logo:hover .logo-icon-a {
  fill: rgb(var(--oi-green-mid));
}

#logo-word {
  margin-top: calc(var(--logo-height) / 16);
}

.web-section.pfp-container {
  padding: 0;
}

.sample-explanation {
  text-align: left;
}

.sample-tests td, .sample-tests tr, .subtasks td, .subtasks td {
  border: none;
  background-color: transparent;
}

.stylized-number {
  font-size: 1.25em;
  font-weight: 600;
  font-style: italic;
  color: rgb(var(--oi-green-light));
  width: 100%;
}

.rank {
  font-size: medium;
  font-weight: normal;
  background-color: rgb(var(--oi-green-light-25));
  padding: 2.5px 7.5px;
  border-radius: 2.5px;
  color: rgb(var(--oi-green));
  text-decoration: none;
}

.rank img {
  margin-right: 5px;
}

.sample-tests, .subtasks, .sample-tests th, .subtasks th {
  border: 0;
}

.sample-tests tr {
  background-color: transparent !important;
}

.sample-tests tr:hover {
  background-color: inherit;
}

.sample-tests thead, .subtasks thead {
  background-color: transparent;
}

textarea {
  resize: none; 
  white-space: pre-wrap; 
  overflow-wrap: normal;
  background: transparent;
  color: rgb(var(--black));
}

select, input, textarea {
  border: rgb(var(--oi-green-light-50)) 1.5px solid;
  border-radius: 2.5px;
  font-size: 0.75em;
  outline: none;
  transition: border-color var(--ani-100) ease;
  min-height: 1.75em;
}

select:focus, input:focus, textarea:focus {
  border-color: rgb(var(--oi-green-light));
}

input[type="file"] {
  border: none;
}

.index-card-item .stat-block {
  font-size: 0.8125em;
}

.index-card-item, .ann-card {
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.index-card-item {
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  gap: 10px;
}

.index-card-item:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform var(--ani-100) ease;
  border-radius: 5px;
  background-color: rgba(var(--oi-green-light), 25%);
  transform: translateY(105%);
  z-index: -1;
}

.index-card-item:hover::before {
  transform: translateY(0);
}

.all-stats-block {
  display: flex;
  align-items: center;
  gap: 5px;
}

.table-control {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  justify-content: space-between;
}

#pageNumber::-webkit-outer-spin-button, #pageNumber::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#pageNumber {
  text-align: center;
}

.nav-icon {
  height: 12px;
  width: 12px;
  transition: filter var(--ani-100) ease;
}

button:hover .nav-icon {
  filter: brightness(0) invert(1);
}

.nav-button {
  padding: 0 5px;
}

.white-pic {
  filter: brightness(0) invert(1);
}

.ann-date {
  font-size: 12px;
  color: rgb(var(--oi-green));
  display: block;
  margin-bottom: 5px;
}

.ann-title {
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  display: block;
}

.table-content-icon, .table-head-icon {
  height: 12px;
  width: 12px;
  padding: 0 2px;
  vertical-align: baseline;
}

.table-head-icon {
  filter: var(--filter-oi-green);
}

.numbers, .stat-no, .subtask-points {
  letter-spacing: 0.025em;
}

.pfp {
  border-radius: 5px;
  object-fit: cover;
  background-color: rgb(var(--oi-green-light-50));
  position: relative;
}

.user-basic .pfp {
  height: 100%;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: cover;
  margin-right: 0.5em;
}

.contest-block > .contest-pic {
  height: 100%;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.5em;
}

.user-basic .pfp {
  border-radius: 2.5px 0 0 2.5px;
}

.user-basic, .small-problem-basic {
  background-color: rgb(var(--oi-green-light-25));
  display: flex;
  position: relative;
  height: 1.5em;
  align-items: center;
  justify-content: center;
  border-radius: 2.5px;
}

.user-basic, .small-problem-block > .small-problem-basic {
  margin-right: 5px;
}

.user-basic, .small-problem-basic, .small-problem-name {
  white-space: nowrap;
}

.user-basic {
  padding-right: 5px;
}

a.data-href:has(.user-block, .small-problem-block, .contest-block) {
  display: flex;
  width: fit-content;
}

.user-block, .small-problem-block, .contest-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
}

.contest-block {
  height: 1.5em;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/*
table [data-href] {
  transition: background-color var(--ani-100) ease;
}

table [data-href]:hover {
  background-color: rgb(var(--oi-green-light));
}

[data-href] {
  cursor: pointer;
}
*/

table .data-href {
  transition: background-color var(--ani-100) ease;
}

table .data-href:hover {
  background-color: rgb(var(--oi-green-light-50)) !important;
}

.data-href {
  cursor: pointer;
}

.table-list {
  display: grid;
  overflow: auto;
  grid-row-gap: 10px;
}

.template-list {
  grid-template-columns: max-content max-content;
}

.user-list {
  grid-template-columns: max-content max-content max-content;
}

.table-list .list-block {
  padding: 2.5px 5px;
}

.table-list .list-block-content {
  padding: 5px 10px;
}

.list-block {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}

.list-block-content {
  display: block;
  text-align: center;
}

.subtask-bar {
  display: flex;
  width: 100%;
  height: 100%;
  border: 0.5px solid rgba(var(--black), 25%);
}

.subtask-bar .subtask-score {
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: min-content;
}

.subtask-bar .subtask-score:not(:first-child) {
  border-left: 0.5px solid rgba(var(--black), 25%);
}

#contest button:first-of-type, #problem button:first-of-type {
  margin-left: 0;
}

#back {
  overflow: hidden;
  position: fixed;
  top: calc(var(--header-height) + 10px);
  right: 0;
  z-index: 1;
}

#back-button {
  background-color: rgba(var(--oi-green-light-25), 75%);
  backdrop-filter: saturate(180%) blur(15px);
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  height: 25px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  color: rgb(var(--oi-green));
  margin: 0;
  animation: back-appear var(--ani-200) ease;
  text-transform: uppercase;
  width: fit-content;
  position: relative;
  transition: all var(--ani-100) ease;
  cursor: pointer;
  border-radius: 2.5px 0 0 2.5px;
}

#back-button:hover {
  background-color: rgb(var(--oi-green-light));
}

#podium {
  display: grid;
  grid-column-gap: 10px;
  grid-template-rows: repeat(6, 40px);
  grid-template-columns: repeat(3, 120px);
}

#podium .prize-group:nth-child(1) {
  grid-column: 2;
  grid-row: 1 / span 3;
}

#podium .prize-group:nth-child(2) {
  grid-column: 1;
  grid-row: 2 / span 3;
}

#podium .prize-group:nth-child(3) {
  grid-column: 3;
  grid-row: 3 / span 3;
}

#podium .prize-step:nth-child(4) {
  background: gold;
  grid-column: 2;
  grid-row: 4 / span 3;
}

#podium .prize-step:nth-child(5) {
  background: silver;
  grid-column: 1;
  grid-row: 5 / span 2;
}

#podium .prize-step:nth-child(6) {
  background: #cd7f32;
  grid-column: 3;
  grid-row: 6 / span 1;
}

#podium .prize-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

#podium .prize-step {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.multi-container {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  justify-content: center;
}

.multi-container section {
  margin: 0;
}

.MathJax {
  font-size: 0.7em;
}

.status-msg {
  font-size: 12px;
  padding: 5px;
  border: 1px solid rgb(var(--oi-green));
  margin-top: 10px;
  border-radius: 2.5px;
  font-family: var(--code-font);
  background-color: rgba(var(--oi-green-light-25), 75%);
}

.ann-content > p:first-child {
  margin-top: 0;
}

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

#txtHint {
  position: fixed;
  z-index: 3;
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 10px 15px;
  left: var(--header-width);
  bottom: 0;
  max-height: 150px;
  width: fit-content;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity var(--ani-100) ease, transform var(--ani-100) ease;
}

#txtHint.active {
  pointer-events: revert;
  transform: translateX(0);
  opacity: 1;
}

#txtHint > div {
  background-color: rgba(var(--oi-green-light-25), 75%);
  backdrop-filter: saturate(180%) blur(15px);
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

#txtHint > div > span:first-child {
  padding: 5px 10px;
  text-align: center;
  background-color: rgba(var(--oi-green-light), 25%);
  border-radius: 5px 5px 0 0;
}

#txtHint > div > div {
  padding: 5px 5px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#txtHint > div > div > a {
  padding: 5px;
  border-radius: 2.5px;
  transition: all var(--ani-100) ease;
  background-color: none;
}

#txtHint > div > div > a:hover {
  background-color: rgba(var(--oi-green-light), 25%);
}

#search {
  border: none;
  background-color: transparent;
  border-radius: 2.5px;
  padding: 0 5px;
  text-align: center;
  height: 2.25em;
  width: 100%;
}

#search::placeholder {
  color: rgb(var(--oi-green));
}

#search:focus {
  outline: none;
}

#search-box {
  background-color: rgba(var(--oi-green-light), 25%);
  position: relative;
  overflow: hidden;
}

#search-box:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--oi-green-light));
  transform: translateY(105%);
  transition: transform var(--ani-100) ease;
  z-index: -1;
}

#search-box:has(#search:focus):before {
  transform: translateY(0);
}

.buttons-container, .blocks-container {
  display: flex;
  flex-wrap: wrap;
}

.buttons-container {
  gap: 5px;
}

.blocks-container {
  gap: 25px;
}

.stat-block {
  white-space: nowrap;
  display: inline-flex;
}

#friend {
  opacity: 25%;
  transition: all var(--ani-100) ease;
  cursor: pointer;
}

#friend.friend-on {
  opacity: 1;
}

.solved-on {
  opacity: 1;
}

.ann-card a {
  color: rgb(var(--black));
}

table {
  border-radius: 5px;
  overflow: hidden;
}

.CodeMirror {
  border-radius: 5px;
  background-color: rgb(var(--background-colour)) !important;
  border: 1.5px solid rgba(var(--black), 0.1);
  transition: border-color var(--ani-100) ease, filter var(--ani-200) ease;
}

.CodeMirror-focused {
  border-color: rgba(var(--black), 0.25);
}

#greet {
  width: unset;
  text-align: center;
}

.data-href a {
  display: block;
  padding: 7px 8px;
  text-decoration: none;
  color: rgb(var(--black));
  transition: color var(--ani-200) ease;
}

.data-href td, td.data-href, .data-href th, th.data-href {
  padding: 0;
}

a.data-href {
  text-decoration: none;
  color: rgb(var(--black));
}

hr {
  width: 100%;
  background-color: rgb(var(--oi-green-light));
  border: none;
  height: 2px;
}

#submission-table, #journal-table {
  width: 100%;
}

#big-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - var(--header-height) - var(--footer-height));
}

#big-clock > .digit {
  font-size: 1000% !important;
  cursor: default;
}

#popup-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  animation: fade var(--ani-100) ease;
  backdrop-filter: brightness(0.75) blur(15px);
  z-index: 1;
}

#popup-container > .popup-window {
  cursor: pointer;
  animation: main-appear-translate var(--ani-200) ease, main-appear-scale var(--ani-200) ease, fade var(--ani-200) ease;
}

.sort-button-focus {
  background: rgb(var(--oi-green-light)) !important;
}

.tabs-container {
  display: flex;
  gap: 20px;
  width: 100%;
}

.tabs-container > .tabs-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tabs-container > .tabs-selector > .tab-selection, .files-container > div {
  cursor: pointer;
  padding: 5px 10px;
  position: relative;
  color: rgb(var(--oi-green));
  transition: color var(--ani-100) ease, transform var(--ani-100) ease;
  border-radius: 2.5px;
  transform: scale(0.9);
  transform-origin: left;
  overflow: hidden;
  min-width: fit-content;
  white-space: nowrap;
}

.tabs-container > .tabs-selector > .tab-selection mark, .files-container > div mark {
  color: rgb(var(--oi-green));
}

.tabs-container > .tabs-selector > .tab-selection:before, .tabs-container > .tabs-selector > .tab-selection:after, .tabs-container > .tabs-content > .tabs-content-animator, .tabs-container > .tabs-content > .tabs-content-animator:before, .files-container > div:before, .files-container > div:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.tabs-container > .tabs-selector > .tab-selection:before, .tabs-container > .tabs-selector > .tab-selection:after, .files-container > div:before, .files-container > div:after {
  z-index: -1;
}

.tabs-container > .tabs-selector > .tab-selection:after, .files-container > div:after {
  background-color: rgb(var(--oi-green));
  border-radius: 2.5px;
  transform: translateX(-101%);
  transition: transform var(--ani-100) ease;
}

.tabs-container > .tabs-selector > .tab-selection.active::after, .files-container > div.active:after {
  transform: translateX(0);
}

.tabs-container > .tabs-selector > .tab-selection:before, .files-container > div:before {
  background-color: rgb(var(--oi-green-light-25));
  border-radius: 2.5px;
  transform: translateX(-101%);
  transition: transform var(--ani-100) ease;
}

.tabs-container > .tabs-selector > .tab-selection:hover::before, .files-container > div:hover::before {
  transform: translateX(0);
}

.tabs-container > .tabs-selector > .tab-selection.active, .files-container > div.active {
  color: rgb(var(--white));
  transform: scale(1);
}

.tabs-container > .tabs-content {
  width: fill-available;
  width: -moz-available;
  width: -webkit-fill-available;
  width: -moz-available;
  display: flex;
  position: relative;
  border-radius: 5px;
  overflow-x: auto;
}

.tabs-container > .tabs-content > .tabs-content-animator {
  overflow: hidden;
  border-radius: 5px;
  pointer-events: none;
}

.tabs-container > .tabs-content > .tabs-content-animator:before {
  background-color: rgb(var(--background-colour));
  border-radius: 5px;
  /*
  transform: translateY(0);
  transition: transform var(--ani-100) ease;
  */
  opacity: 1;
  transition: opacity var(--ani-100) ease;
}

.tabs-container > .tabs-content > .tabs-content-animator.non-active:before {
  /* transform: translateY(100%); */
  opacity: 0;
}

.tabs-container > .tabs-content > section {
  margin: 0;
}

.tabs-container > .tabs-content > section:not(.active) {
  display: none;
}

.tabs-container > .tabs-content > section > *:nth-child(1), .tabs-container > .tabs-content > section > section:nth-child(1) > h2, .tabs-container > .tabs-content > section > *:nth-child(1) > a > .index-card-item {
  margin-top: 0;
}

.suffix {
  color: rgb(var(--black));
  opacity: 0.5;
  font-size: 0.75em;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  row-gap: 15px;
  column-gap: 20px;
  align-items: center;
}

.settings-grid > .setting-submit {
  grid-column: 1 / 3;
}

.settings-grid > div {
  text-align: center;
}

.rejudge-button {
  opacity: 0.5;
}

#header.show:hover #mode-button, .show #mode-button:hover::before {
  width: 15px;
}

#mode-button {
  background-color: rgba(var(--opposite-theme-mid), 0.125);
}

#mode-button, #mode-button:before {
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: width var(--ani-100) ease;
}

#mode-button:before {
  content: "";
  background-color: rgb(var(--opposite-theme-light));
}

.data-grid {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0.25em 0.75em;
}

.data-grid > *, .problem-samples > *, .problem-subtasks > * {
  padding: 5px;
}

.problem-samples, .problem-subtasks {
  display: grid;
}

.problem-samples {
  grid-template-columns: repeat(3, min-content) auto;
  gap: 5px 10px;
}

.problem-subtasks {
  grid-template-columns: repeat(2, min-content) auto;
  gap: 2.5px 10px;
}

.subtask-points {
  text-align: center;
}

/*.problem-samples .stylized-number, .problem-subtasks .stylized-number, */.stylized-number {
  border-right: rgb(var(--oi-green-light-50)) 2.5px solid;
  padding-right: 7.5px;
  margin-right: 5px;
  text-align: center;
}

.submission-graph {
  display: grid;
  height: 150px;
  align-items: end;
  grid-auto-flow: column;
  grid-template-rows: auto repeat(2, min-content);
  justify-items: center;
  gap: 5px;
  padding-top: 1.5em;
  overflow-x: auto;
}

.graph-bar {
  background: rgb(var(--oi-green-light));
  width: 90%;
  position: relative;
  max-width: 1.5em;
}

.graph-bar:before {
  content: attr(data-before);
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  transform: translateY(-100%);
  font-size: small;
  color: rgb(var(--oi-green));
}

.graph-month {
  width: 100%;
  text-align: center;
  position: relative;
  color: rgb(var(--oi-green));
  white-space: nowrap;
  padding: 0 5px;
}

.graph-month:before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background: rgb(var(--oi-green-light-25));
  z-index: -1;
}

#submit-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 25px;
}

.run-sample-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ani-100) ease;
}

.problem-code-avaliable .run-sample-button:not(:disabled) {
  opacity: 1;
  pointer-events: revert;
}

@keyframes badge {
  from {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
  to {
    filter: brightness(1);
  }
}

@keyframes badge-before {
  0% {
    left: -150%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

.badge > .badge-before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  transform: skewX(-30deg);
  animation: badge-before 5s ease infinite;
}

.badge {
  position: relative;
  overflow: hidden;
}

.badge:not(.badge-nomask) {
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-origin: content-box;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-origin: content-box;
  -webkit-mask-position: center;
}

.badge > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sample-explanation > p:first-child {
  margin-top: 0;
}

.sample-explanation > p:last-child {
  margin-bottom: 0;
}

.statement-grid, .statement-data, .statement-run {
  display: grid;
  align-items: center;
}

.statement-run {
  justify-items: center;
}

.statement-grid > div, .case-table > div {
  padding: 5px 10px;
}

.statement-run > div {
  padding: 2.5px 10px;
}

.statement-data {
  width: fit-content;
  gap: 2.5px 5px;
}

.statement-data > div {
  padding: 2.5px 5px;
  text-align: center;
}

.statement-grid .grid-head, .statement-run .grid-head {
  font-size: 0.75em;
  opacity: 0.5;
  font-style: italic;
}

.statement-data .grid-head {
  color: rgb(var(--oi-green));
  border-bottom: rgb(var(--oi-green-light-50)) 2.5px solid;
  margin-bottom: 2.5px;
  padding-bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.statement-data .grid-content-number {
  background-color: rgba(var(--oi-green-light-50), 0.5);
  padding: 1.25px 5px;
  margin: 1.25px 2.5px;
}

.statement-grid .grid-head, .statement-grid .grid-content-id, .statement-grid .grid-content-name {
  text-align: center;
}

.statement-grid > div:has(.grid-content-id), .statement-grid > div:has(.grid-content-name), .statement-data .grid-content-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.statement-grid > div:has(.grid-content-id), .statement-data .grid-content-group {
  border-right: rgb(var(--oi-green-light-50)) 2.5px solid;
  --grid-content-id-margin: 5px;
  margin: var(--grid-content-id-margin) 0;
  height: calc(100% - var(--grid-content-id-margin) * 2);
}

.statement-part-head {
  margin-top: 50px;
}

.statement-data-container {
  display: flex;
  gap: 20px 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.case-table > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-table > div:not(.case-table-head, .stylized-number) {
  border-top: 2.5px solid rgb(var(--oi-green-light-25));
}

.case-table > div.case-table-head:not(.suffix) {
  color: rgb(var(--oi-green));
  font-weight: 600;
}

#submission-grid, #journal-grid {
  opacity: 0;
  transition: opacity 0.25s ease;
  display: grid;
  align-items: center;
  width: 100%;
  row-gap: 10px;
  column-gap: 5px;
  text-align: center;
  overflow-x: auto;
}

#submission-grid.show, #journal-grid.show {
  opacity: 1;
}

#submission-grid a, #journal-grid a {
  color: rgb(var(--black));
  text-decoration: none;
  transition: color var(--ani-100) ease;
}

#submission-grid a:hover, #journal-grid a:hover {
  color: rgb(var(--oi-green));
}

#submission-grid > *, #journal-grid > * {
  padding: 5px;
}

.sample-io {
  white-space: pre;
}

.rank-block[data-badge-colour="a"] {
  --selected-badge-colour: var(--badge-a);
}

.rank-block[data-badge-colour="b"] {
  --selected-badge-colour: var(--badge-b);
}

.rank-block[data-badge-colour="c"] {
  --selected-badge-colour: var(--badge-c);
}

.rank-block[data-badge-colour="d"] {
  --selected-badge-colour: var(--badge-d);
}

.rank-block[data-badge-colour="e"] {
  --selected-badge-colour: var(--badge-e);
}

.rank-block {
  background: rgba(var(--selected-badge-colour), 0.125);
  border-left: 0.25em rgba(var(--selected-badge-colour), 0.5) solid;
}

p {
  line-height: 1.5;
}

#language-container {
  display: grid;
  font-size: 0.875em;
  grid-template-columns: repeat(5, 4em);
  grid-template-rows: repeat(3, 2em);
  gap: 0.25em;
}

.language-cell {
  display: flex;
  align-items: center; 
  justify-content: center;
  transition: color var(--ani-100) ease, background-color var(--ani-100) ease, opacity var(--ani-100) ease, transform var(--ani-100) ease;
}

.language-cell:hover {
  transform: scale(1.125);
}

.language-cell.language-all-allow {
  color: rgb(var(--oi-green));
  background-color: rgb(var(--oi-green-light-50));
  font-weight: bold;
}

.language-cell.language-all-ban {
  opacity: 0.25;
}

.language-cell.language-partial-allow {
  color: rgb(var(--opposite-theme-dark));
  background-color: rgb(var(--opposite-theme-light-50));
}

section:has(> .bilingual-statement, > .trilingual-statement) {
  min-width: 100%;
}

.bilingual-statement, .trilingual-statement {
  display: grid;
  column-gap: 1em;

  &.bilingual-statement {
    grid-template-columns: repeat(2, 1fr);
  }
  
  &.trilingual-statement {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problem-icon {
  display: inline-block;
  height: 0.875em;
  aspect-ratio: 1 / 1;
  background-color: rgb(var(--oi-green));
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-origin: content-box;
  mask-position: center;
  margin-right: 0.375em;
  vertical-align: middle;
  transition: background-color var(--ani-100) ease;

  &:hover {
    background-color: rgb(var(--black));
  }
}

.problem-logo {
  height: 1.5em;

  > img {
    height: 100%;

    &.problem-logo-dark {
      display: none;
    }
  }
}

input[type="checkbox"] {
  accent-color: rgb(var(--oi-green));
}