:root {
   --font-default: "Segoe UI", Arial, sans-serif;
   --font-monospace: "Lucida Consolas", "Consolas", "Courier New", monospace;
   --color-white: #fff;
   --color-orange: #f93;
   --color-light-orange: #fb6;
   --color-dark-orange: #f71;
   --color-red: #a00;
   --color-light-red: #e44;
   --color-green: #070;
   --color-blue: #009;
   --color-light-blue: #07f;
   --color-lighter-blue: #6bf;
   --color-brown: #6b4e3d;
   --color-light-brown: #b69481;
   --color-black: #000;
   --color-dark-grey: #333;
   --color-light-grey: #bbb;
   --color-pale-pink: #ffeaea;
   --color-dark-green: #060;
   --color-light-green: #5a5;
}
@media print {
   .noprint {
      display: none;
   }
   #container {
      max-width: 800px;
   }
}

@media screen {
   .print {
      display: none;
   }
   #container {
      max-width: 1000px;
      margin: 0 auto;
   }

}

body {
   padding: 0;
   margin: 0;
   border-width: 0;
   font-size: 95%;
   font-family: var(--font-default);
   min-height: 800px;
   background-color: var(--color-background-default);
   color: var(--color-text-default);
}

/* Generic overrides */
img {
   border: none;
   vertical-align: middle;
}
ul, ol {
   margin: 0;
   padding: 0 0 0 2em;
}
tt {
   font-family: var(--font-monospace);
   font-size: 1.1em;
}
pre {
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
td, th {
   cursor: default;
}
h1, h3, h4 {
   color: var(--color-text-variation-1);
}
h2 {
   color: var(--color-brown);
}
h1, h2, h3, h4 {
   margin: 0;
}
h2 {
   padding: 10px 0 5px 0;
}
h3, h4 {
   font-family: var(--font-monospace);
}
a {
   font-weight: 600;
   text-decoration: none;
   color: var(--color-text-link);
   cursor: pointer !important;

}
a:hover {
   color: var(--color-text-link-hover);
   text-decoration: underline;
}
a.no_hover {
   color: var(--color-text-link);
   text-decoration: none;
}

input::file-selector-button {
   font-weight: bold;
}
input[type="file"] {
   color: var(--color-brown);
   font-size: 80%;
   width: 300px;
}

input[type="radio"] {
   vertical-align: middle;
   margin: 0 0 2px 2px;
   padding: 0;
}
input[type="submit"], input[type="button"], button {
   cursor: pointer;
   color: var(--color-text-variation-1);
   border:1px solid var(--color-border-default);
   background-color: var(--color-background-variation-1);
   padding: 3px 5px;
   font-weight: bold;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
   background-color: var(--color-background-variation-2);
}
input[type="text"], input[type="password"] {
   background-color: var(--color-background-default);
   border: 1px solid var(--color-border-default);
   padding: 2px;
   color: var(--color-text-default);
   font-size: 100%;
}
input[type=checkbox]:disabled+label {
   color: var(--color-light-brown);
}
textarea {
   font-family: var(--font-monospace);
   background-color: var(--color-background-default);
   color: var(--color-text-default);
   font-size: 110%;
}
dfn.tooltip, strong.tooltip {
   border-bottom: 1px solid var(--color-text-link-hover);
}
label {
   user-select: none;   
}

/* Header and navigation bar */
header {
   display: grid;
   grid-template-columns: 1fr 1fr;
   background-color: var(--color-background-default);
   width: 100%;
}
@media screen and (max-width: 700px) {
   #logo {
      width: 180px;
   }
   #euler_portrait {
      width: 180px;
   }

}
#info_panel {
   text-align: right;
   color: var(--color-text-variation-2);
   font-size: 80%;
}
#info_panel img, #info_panel input[type="image"] {
   margin: 3px 0;
}
@media print {
   #info_panel {
      display: none;
   }

}

nav {
   background-color: var(--color-background-variation-1);
   border-top: 1px solid var(--color-border-default);
   border-bottom: 1px solid var(--color-border-default);
   width: 100%;
   z-index: 999;
}
@media print {
   nav {
      display: none;
   }

}
nav ul {
   max-height: 0;
   transition: max-height 600ms;
   text-align: left;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   overflow: hidden;
}
nav ul a {
   display: block;
   padding: 0.5em;
}
nav ul a:hover {
   background-color: var(--color-background-variation-2);
}
nav a {
   height: 100%;
   color: var(--color-text-default);
   text-decoration: none;
}
nav a:hover {
   text-decoration: none;
   color: var(--color-text-default);
}
nav li {
   width: 100%;
}

.nav_toggle:checked ~ ul {
   display: block;
   max-height: 350px;
}
.nav_toggle {
   display: none;
}
.nav_toggle_label {
   margin-left: 0.5em;
   font-size: 1.25rem;
   cursor: pointer;
}
@media screen and (min-width: 700px) {
   nav ul {
      display: flex;
      text-align: center;
      max-height: none;
   }
   .nav_toggle_label {
      display: none;
   }
   nav li {
      width: 5em;
   }
}

nav #current {
   background-color: var(--color-orange);
   color: var(--color-background-default);
}
nav #highlight {
   color: var(--color-red);
   animation: glow 3s ease-in-out infinite alternate;

}
@keyframes glow {
   80%  {
      color: var(--color-red);
   }
   100% {
      color: var(--color-text-variation-1);
   }
}

/* Tables and data views */
.grid {
  border-collapse: collapse;
}
.grid tr {
   background-color: var(--color-background-default);
}
.grid .shade {
   background-color: var(--color-pale-pink);
}
.grid .unrealistic_cell {
   background-color: var(--color-background-variation-1);
}
.grid .unrealistic {
   color: var(--color-red);
   font-weight: bold;
}
.grid .change_rating_period {
   border-bottom: 2px solid var(--color-brown);
}
.grid .top {
   vertical-align: top;
}
.grid th {
   color: var(--color-text-variation-1);
   text-align: center;
   font-weight: bold;
}
.grid td, .grid th {
   background-color: inherit;
   padding: 2px;
   border: 1px solid var(--color-border-default);
}

.table_view {
   cursor: default;
   margin: 10px 0;
}
.table_view .cell {
   float: left;
}
.table_view .row {
   width: 100%;
   margin: 5px 0;
}
.table_view .lines {
   border-bottom: 1px solid var(--color-border-default);
}
.table_view .row:after {
   content: "";
   clear: both;
   display: table;
}
.table_center {
   margin-left:auto;
   margin-right:auto;
}

.data_entry {
   padding: 10px;
   border: 1px solid var(--color-border-default);
   margin: 10px 0;
   box-shadow: 5px 5px 5px var(--color-border-default);
}
.data_entry .row {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin: 5px 0;
}
.data_entry .label {
   width: 175px;
   font-weight: bold;
}
.data_entry .submit {
   width: 100%;
   text-align: right;
}
.data_entry .mini {
   min-width: 45px;
   font-size: 85%;
}
.data_entry .last {
   flex-grow: 1;
}
.data_entry .center {
   text-align: center;
}
.data_entry textarea {
   width: 500px;
   height: 100px;
}
.data_entry .large_textarea {
   width: 750px;
   height: 400px;
}
@media screen and (max-width: 575px) {
   .data_entry textarea, .data_entry .large_textarea {
      width: 300px;
   }
}
@media screen and (max-width: 350px) {
   .data_entry textarea, .data_entry .large_textarea {
      width: 250px;
   }
}


/* Global classes */
.hljs {
   font-size: 105%;
   background: var(--background-default);
}

.flex_vertical_align {
   display: flex;
   align-items: center;
}
.icon {
   width: 20px;
}
.mini_icon {
   width: 12px;
}
.flag {
   width: 23px;
   vertical-align: middle;
}
.anchor {
   position: relative;
   top: -80px;
}
.subtle_icon img {
   opacity: 0.6;
   width: 20px;
}

.csrf_form {
   display: inline;
}
.csrf_form input[type=submit] {
   background: inherit;
   border: none;
   padding: 0;
   vertical-align: top;
}
.csrf_form input {
   vertical-align: middle;
   font-family: inherit;
   font-size: inherit;
   font-weight: 550;
   color: var(--color-text-link);
}
.csrf_form input[type=submit]:hover {
   color: var(--color-text-link-hover);
   text-decoration: underline;
}
.csrf_form input:active, .csrf_form input:focus {
   outline-style: none;
}

.tooltip {
   position: relative;
   display: inline-block;
   cursor: help;
}
.tooltip .tooltiptext, .tooltip .tooltiptext_narrow, .tooltip .tooltiptext_left, .tooltip .tooltiptext_right, .tooltip .tooltiptext_wide, .tooltip .tooltiptext_narrower {
   line-height: initial;
   visibility: hidden;
   background-color: var(--color-background-default);
   color: var(--color-text-default);
   border: 1px solid var(--color-border-variation-1);
   text-align: center;
   border-radius: 5px;
   padding: 5px 10px;
   position: absolute;
   z-index: 1;
   font-weight: normal;
   font-size: 80%;
   top: 100%;
   margin-top: 10px;
   width: 200px;
   word-wrap: break-word;
}
.tooltip .tooltiptext  {
   left: 50%;
   margin-left: -100px;
}
.tooltip .tooltiptext_narrow {
   left: 50%;
   margin-left: -60px;
   width: 120px;
}
.tooltip .tooltiptext_narrower {
   left: 50%;
   margin-left: -40px;
   width: 80px;
}
.tooltip .tooltiptext_left {
   left: 105%;
}
.tooltip .tooltiptext_right {
   right: 105%;
}
.tooltip .tooltiptext_wide {
   left: 105%;
   width: 250px;
}

.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptext_narrow, .tooltip:hover .tooltiptext_left, .tooltip:hover .tooltiptext_right, .tooltip:hover .tooltiptext_wide, .tooltip:hover .tooltiptext_narrower {
   visibility: visible;
}

.problem_content {
   background-color: var(--color-background-default);
   font-size: 110%;
   border: solid 1px var(--color-border-default);
   box-shadow: 5px 5px 5px var(--color-border-default);
   padding:10px;
}
.problem_content img {
   max-width: 100%;
   object-fit: contain;
   overflow-x: auto;
}

.all_problems {
   page-break-inside: avoid;
   font-size: 90%;
   margin-bottom: 20px;
}
.all_problems a:hover {
   text-decoration: none;
}

.content_tab {
   overflow: hidden;
   background-color: var(--color-background-variation-1);
   border-top: 1px solid var(--color-border-default);
   border-bottom: 1px solid var(--color-border-default);
   margin: 20px 0;
   font-size: 90%;
}
.content_tab a, .content_tab input {
   float: left;
   display: block !important;
   color: var(--color-text-variation-1);
   font-weight: bold;
   text-align: center;
   padding: 5px 2px;
   text-decoration: none;
   width: 65px;
}
.content_tab a.resources {
   width: 85px;
}

.content_tab a:hover, .content_tab input:hover {
   background-color: var(--color-background-variation-2);
   color: var(--color-text-variation-1);
}
.content_tab #current {
   background-color: var(--color-orange);
   color: var(--color-background-default);
}

.form_box {
   background-color: var(--color-background-variation-1);
   border: 1px solid var(--color-border-default);
   padding: 10px;
   border-radius: 5px;
   box-shadow: 5px 5px 5px var(--color-border-default);
}
.custom_tags {
  border-collapse: collapse;
}

.custom_tags td, .custom_tags th {
   vertical-align: top;
   padding: 5px;
   border: 1px solid var(--color-border-default);
}
.post_message {
   color: var(--color-text-default);
   padding: 5px;
   font-family: var(--font-monospace);
   font-size: 1.1em;
   vertical-align: top;
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.post_message_archive_icon {
   margin-top: 3px;
   text-align: right;
}
.post_message ol {
   margin-left: 10px;
}
.post_message ol[type=i] {
   margin-left: 25px;
}
.post_message img {
   max-width: 100%;
}
.forum_quote {
   background-color: var(--color-background-default);
   padding: 5px;
   padding-left: 20px;
   border: 1px solid var(--color-border-default);
   border-left: 2px solid var(--color-brown);
   margin: 5px;
}
.forum_quote blockquote {
   margin: 0px;
}
.forum_quote blockquote::before {
   content: "\201C";
   font-family: Georgia, serif;
   font-size: 300%;
   color: var(--color-brown);
   display: block;
   height: 30px;
}
.forum_quote blockquote::after {
   content: "";
}

.forum_hide {
   background-color: var(--color-orange);
   color: var(--color-orange);
   cursor: help;
   padding-left: 5px;
   padding-right: 5px;
}
.forum_hide:hover {
   color: var(--color-black);
}

.collapsible {
   background-color: var(--color-background-variation-1);
   border: 1px solid var(--color-background-variation-2);
   border-bottom: none;
   cursor: pointer;
   padding: 5px;
   font-weight: bold;
   text-align: left;
   user-select: none;
   min-height: 1lh;
}
.collapsible:before {
   content: "\feff";
}
.active {
   border-bottom: 1px solid var(--color-background-variation-2);
}
.collapsible:after {
   content: "\002B";
   float: right;
}
.active:after {
   content: "\2212";
}
.collapsible_content {
   border: 1px solid var(--color-border-default);
   border-top: none;
   padding: 0 5px;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-out;
}
.collapsible_content pre {
   font-size: 110%;
}

.warning {
   color: var(--color-red);
   font-weight: 550;
}
.small_notice {
   color: var(--color-text-variation-1);
   font-size: 85%;
}
.highlight_block {
   color: var(--color-white);
   padding: 1px;
   border-radius: 5px;
   display: inline-block;
   width: 20px;
   text-align: center;
}
.highlight_block_okay {
   background-color: var(--color-light-green);
}
.highlight_block_opt_out {
   background-color: var(--color-light-brown);
}
.highlight_block_private {
   background-color: var(--color-light-blue);
}
.highlight_block_bad {
   background-color: var(--color-light-red);
}
.progress_opt_out {
   border: 2px solid var(--color-light-blue);
   border-radius: 10px;
}
.ord_block {
   display: inline-block;
   width: 40px;
   text-align: left;
   font-size: 70%;
}
.handy_tip {
   padding: .5em;
   border:  2px dotted #999;
}
.standout_box {
   text-align: center;
   font-size: 110%;
   border: 1px solid var(--color-border-default);
   padding: 5px;
   background-color: var(--color-background-variation-1);
   color: var(--color-text-variation-1);
}

.line_numbers {
   border-left: 35px solid var(--color-border-default);
   position: relative;
}

.line_numbers pre {
   margin:0;
   counter-reset: linenumbers;
   margin-left: 10px;
}

.line_numbers pre div:before {
   color: #666;
   content: counter(linenumbers);
   counter-increment: linenumbers;
   left: -15px;
   position: absolute;
   text-align: right;
}

.information_box {
   margin: 0 20px;
   border: 2px solid var(--color-border-default);
   background-color: var(--color-background-variation-1);
   color: var(--color-text-default);
   padding: 10px;
   font-size: 90%;
   display: flow-root;
}
.friend_key  {
   cursor: pointer;
}
.friend_key:active img {
   transform: translate(1px, 1px);
   opacity: 75%;
}

.progress_bar {
   display: block;
   width: 100%;
   border: 1px solid var(--color-border-default);
   padding: 0px 0;
}
.progress_bar_block {
   color: var(--color-white);
   text-align: center;
   font-weight: bold;
   background-color: var(--color-orange);
   height: 15px;
}
.progress_bar_block_grey {
   color: var(--color-white);
   text-align: center;
   font-weight: bold;
   background-color: var(--color-light-grey);
   height: 15px;
}

.progress_bar_overlay {
   vertical-align: middle;
   color: var(--color-white);
   position: relative;
   text-align: center;
   width: 100%;
   height: 15px;
   border: 1px solid var(--color-border-default);
}

.progress_bar_overlay_block_orange {
   position: absolute;
   background-color: var(--color-orange);
   height: 15px;
}
.progress_bar_overlay_threshold {
   position: absolute;
   border-right: 2px solid var(--color-brown);
   height: 15px;
   margin-left: -1px;
}
.progress_bar_overlay_block_grey {
   position: absolute;
   background-color: var(--color-light-grey);
   height: 15px;
}
.progress_bar_overlay_block_light_orange {
   position: absolute;
   background-color: var(--color-light-orange);
   height: 15px;
}
.jump_to {
   width: 30px !important;
}
.above_below {
   margin-top: 20px;
   margin-bottom: 20px;
}

/* Pagination */
.pagination {
   font-size: 80%;
   height: 1%; /* IE tweak (holly hack) */
   text-align: center;
   margin: 20px 0;
}
.pagination a, .pagination a:link, .pagination a:visited, .pagination a:active {
   display: block;
   float: left;
   font-weight:bold;
   text-decoration: none;
   color: var(--color-text-variation-1);
   margin: 2px 5px 2px 0;
   padding:3px;
   background-color:var(--color-background-variation-1);
   width: 2em;
   border:1px solid var(--color-border-default);
}
.pagination a:hover {
   background-color: var(--color-background-variation-2);
}
.pagination a.current {
   background-color: var(--color-orange);
   color: var(--color-background-default);
   font-weight: bold;
}
.pagination span {
   float: left;
   font-weight: bold;
}
.pagination input[type="text"] {
   width: 50px;
}
.pagination:after  {
   content: "";
   display: table;
   clear: both;
}

@media screen and (max-width: 750px) {
   .pagination #go_to {
      content: "";
      clear: both;
      display: table;
   }

}

.search_input {
   position: relative;
   display: inline-block;
}
.search_input input[type="text"] {
   padding: 3px;
   border: 1px solid var(--color-border-default);
}
.search_result {
   position: absolute;
   z-index: 999;
   top: 100%;
   left: 0;
}
.search_input input[type="text"], .search_result {
   width: 100%;
}
.search_result p {
   margin: 0;
   padding: 3px;
   border: 1px solid var(--color-border-default);
   border-top: none;
   cursor: pointer;
   background-color: var(--color-background-default);
}
.search_result p:hover {
   background: var(--color-background-variation-1);
}

/* ACP File Management & Problem Edit */
.resource_click, .resource_link {
   color: var(--color-text-link);
   font-weight: 600;
   cursor: pointer;
   transition: 0.3s;
}

.resource_click:hover, .resource_link:hover {
   text-decoration: none;
   color: var(--color-text-link-hover);
}

.acp_modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   right: 0;
   top: 0;
   width: 300px;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.7);
   border-bottom-left-radius: 10px;
   border-bottom: 2px solid var(--color-border-default);
   border-left: 2px solid var(--color-border-default);
}

.acp_modal_content {
   margin: auto;
   display: block;
   max-width: 250px;
   background-color: white;
   padding: 10px;
}

#acp_caption {
   margin: auto;
   display: block;
   width: 250px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 50px;
}

.acp_close {
   position: absolute;
   top: 0;
   right: 15px;
   color: var(--color-dark-orange);
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
}

.acp_close:hover,
.acp_close:focus {
   color: #bbb;
   text-decoration: none;
   cursor: pointer;
}

@media only screen and (max-width: 700px){
   .acp_modal_content {
      width: 100%;
   }
}



/* Global ids */
#tag_update #tags, #edit_problem #tags {
   width: 400px;
}
#acp_rename #tags {
   width: 300px;
}
#search_tags .cell, #tag_update .cell {
   margin: 3px;
}

#search_tags #tags {
   width: 400px;
}
@media screen and (max-width: 600px) {
   #search_tags #tags {
      width: 350px;
   }
}
@media screen and (max-width: 400px) {
   #search_tags #tags {
      width: 250px;
   }
}
#search_tags #no_tags {
   width: 200px;
}

#tag_buttons {
   display: inline-block;
   white-space: nowrap;
}



#captcha_image {
   border: 1px solid var(--color-border-default);
   width: 136px;
   height: 68px;
}
#header:after {
   content: "";
   clear: both;
   display: table;
}
#admin_message {
   text-align: left;
   margin: 0 auto;
   border: 1px solid var(--color-red);
   font-size: 90%;
}
#message {
   position: fixed;
   overflow: hidden;
   top: 0;
   left: 0;
   width: 100%;
   -webkit-animation: message_hide 3s linear forwards;
   animation: message_hide 3s linear forwards;
}
.message_body {
   background-color: var(--color-background-default);
   color: var(--color-orange);
   text-align: center;
   font-weight: bold;
   line-height: 1.5em;
   border: 1px solid var(--color-border-default);
}

@keyframes message_hide {
   0% {
      top: -100px;
   }
   10% {
      top: 0;
   }
   90% {
      top: 0;
   }
   100% {
      top: -100px;
   }
}
#message a {
   color: var(--color-orange);
}

#modal_window {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
   -webkit-animation-name: modal_fade_in;
   -webkit-animation-duration: 0.5s;
   animation-name: modal_fade_in;
   animation-duration: 0.5s
}
@-webkit-keyframes modal_fade_in {
   from {opacity: 0}
   to {opacity: 1}
}
@keyframes modal_fade_in {
   from {opacity: 0}
   to {opacity: 1}
}
#modal_content {
   position: fixed;
   top: 0;
   width: 100%;
   -webkit-animation-name: model_content_slide_in;
   -webkit-animation-duration: 0.5s;
   animation-name: model_content_slide_in;
   animation-duration: 0.5s
}
@-webkit-keyframes model_content_slide_in {
   from {top: -300px; opacity: 0}
   to {top: 0; opacity: 1}
}
@keyframes model_content_slide_in {
   from {top: -300px; opacity: 0}
   to {top: 0; opacity: 1}
}

#footer {
   color: var(--color-text-variation-1);
   margin-top: 50px;
   text-align: center;
   padding: 20px;
   font-size: 90%;
}
#content {
   padding: 10px;
}
#cache_info {
   font-size: 70%;
   text-align: right;
   color: var(--color-text-variation-2);
}

#tile_grid .tile_box {
   position:relative;
   text-align:center;
   float: left;
   border: 1px solid var(--color-border-default);
   width: 130px;
   height: 130px;
   padding:  5px;
   margin: 1px;
   border-radius:15px;
}
#tile_grid .inner_box {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
#tile_grid img {
   width: 75px;
   border-radius: 7px;
}
#tile_grid a {
   text-decoration: none;
}
#tile_grid:after {
   content: "";
   clear: both;
   display: table;
}
#main_table {
   cursor: default;
}
#completion_form {
   max-width: 400px;
}
#new_problems ul {
   padding-left: 30px;
}
#report_captcha {
   display: none;
}

#snackbar {
   visibility: hidden;
   font-weight: bold;
   min-width: 150px;
   margin-left: -125px;
   background-color: var(--color-background-default);
   color: var(--color-orange);
   text-align: center;
   border-radius: 5px;
   border: 1px solid var(--color-border-variation-1);
   padding: 16px;
   position: fixed;
   z-index: 1;
   left: 50%;
   bottom: 30px;
}

#snackbar.show {
   visibility: visible;
   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
   from {bottom: 0; opacity: 0;}
   to {bottom: 30px; opacity: 1;}
}
@keyframes fadeout {
   from {bottom: 30px; opacity: 1;}
   to {bottom: 0; opacity: 0;}
}

/* Page specifics */
@media screen and (max-width: 400px) {
   #about_page #euler_portrait {
      width: 150px;
   }
}
#about_page #tagline {
   text-align:center;
   font-size:125%;
   font-style:italic;
   color:var(--color-text-variation-2);
}

#problems_table_page .pinned_problem {
   color:var(--color-light-red);
}
#problems_table_page .watched_problem {
   border: 2px solid var(--color-lighter-blue);
   padding: 0 5px 2px 5px;
   border-radius: 10px;
}
#problems_table_page .sortby {
   color: var(--color-text-default);
   font-weight: bold;
}
#problems_table_page .age_minutes {
   color: var(--color-dark-orange);
}
#problems_table_page .age_hours {
   color: var(--color-dark-orange);
}
#problems_table_page .age_days {
   color: var(--color-text-variation-1);
}
#problems_table_page .age_weeks {
   color: var(--color-text-variation-2);
}
#problems_table_page #problems_table {
   margin-top: 30px;
}
#problems_table_page #problems_table th.id_column {
   width: 50px;
}
#problems_table_page #problems_table td.id_column {
   height:  30px;
   text-align:center;
   font-weight: bold;
}
#problems_table_page #problems_table th.title_column {
   width: 250px;
   max-width: 250px;
   word-wrap:break-word;
}
#problems_table_page #problems_table th.solved_by_column {
   width: 80px;
}
#problems_table_page #problems_table th.difficulty_column {
   width: 80px;
}
#problems_table_page #problems_table td.difficulty_column {
   padding: 5px;
}
#problems_table_page #problems_table th.final_column {
   border:  none;
   background:none;
   width: 250px;
   max-width: 250px;
}
#problems_table_page #problems_table a {
   text-decoration: none;
}
#problems_table_page table.final_column {
   width: 100%;
}
#problems_table_page .final_column .icon_td {
   text-align: center;
   width: 25px;
}
#problems_table_page .final_column .poster_info_2 {
   font-size: 80%;
   text-align: right;
   color:var(--color-text-variation-2);
}
@media screen and (max-width: 650px) {
   #problems_table_page .poster_info_1 {
      display: none;
   }
}
@media screen and (max-width: 500px) {
   .grid {
      font-size: 85%;
   }

   #problems_table_page .poster_info_2 {
      display: none;
   }
}

#show_problem_table {
   width: 100%
}
#previous_problem {
   float: left;
}
#next_problem {
   float: right;
}



#problem_info h3 {
   margin-bottom:5px;
}
#problem_icons {
   float: right;
}
#problem_answer {
   margin: 0 auto;
   text-align: center;
   width: 500px;
}

#forum_page .post_actions {
   text-align: right;
}
#forum_page .post_box {
   background-color: var(--color-background-almost-default);
   border: 1px solid var(--color-border-variation-1);
   margin: 5px 0;
}
#forum_page .post_header {
   background-color: var(--color-background-variation-2);
   border-bottom: 1px solid var(--color-border-variation-1);
   padding: 3px;
}
#forum_page .post_header:after {
   content: "";
   clear: both;
   display: table;
}
#forum_page .post_user {
   float: left;
}
#forum_page .post_date {
   float: right;
}
#forum_page .edited {
   cursor: help;
}
#forum_page .write_post {
   border: 1px solid var(--color-border-default);
   width: 95%;
   max-width: 95%;
   height: 200px;
   padding: 5px;
}
#forum_page #draft_status {
   float: right;
   visibility: hidden;
   vertical-align: middle;
   font-size: 80%;
   color: var(--color-text-variation-2);
}

#forum_page #thread_info {
   float: right;
}
#forum_page .action_buttons {
   font-size: 75%;
   text-align: right;
   font-weight: bold;
}
#forum_page .action_buttons img {
   vertical-align:bottom;
}
#forum_page .suspicious_code {
   text-align:center;
   color: var(--color-red);
   border: 1px solid var(--color-border-default);
   background-color: var(--color-background-variation-1);
   padding: 5px;
}
#forum_page #make_post, #forum_page .update {
   text-align: right;
}

#progress_page h3 {
   margin-bottom: 10px;
}

#progress_page .problem_history td {
   padding: 5px;
   font-size: 100%;
}
#progress_page .history_panel {
   float: left;
   padding-right: 50px;
   margin-bottom: 20px;
}
#progress_page #final_division {
   clear: both;
}
#progress_page #friend_image_box {
   float: right;
   text-align: center;
}
#progress_page #friend_box img {
   border: 1px solid var(--color-border-default);
   width: 100px;
}
#progress_page #level_image_box {
   padding: 10px;
   border: 1px solid var(--color-border-default);
   float: left;
   margin-right: 20px;
}
#progress_page #profile_name_text {
   font-size: 300%;
}
#progress_page #level_text {
   font-size: 200%;
}
#progress_page .progress_bar {
   clear: both;
}


#progress_page #difficulty_progress_table th, #progress_page #difficulty_progress_table td {
   min-width: 80px;
   text-align :center;
}
#progress_page #difficulty_progress_table td.progress {
   font-size: 80%;
}
#progress_page #difficulty_progress_table #tag {
   text-align: left;
   width: 300px;
}
#progress_page #difficulty_progress_table #progress {
   text-align: left;
   width: 300px;
}

#progress_page .difficulty_progress_bar_box {
   margin-left: 20px;
   width: 200px;
   border: 1px solid var(--color-border-default);
   margin-top: 2px;
}
@media screen and (max-width: 450px) {
   #progress_page .difficulty_progress_bar_box {
      display: none;
   }
}

#progress_page .difficulty_progress_bar {
   height: 7px;
}
#progress_page .difficulty_progress_bar_box span {
   right: 0;
   top: 15px;
}
#progress_page .challenge_complete {
   color: var(--color-orange);
   font-weight: bold;
}

#progress_page #levels_completed_section, #bonus_unlocked_section, #progress_page #awards_section, #progress_page #problems_section, #progress_page #posts_made_section {
   margin: 30px 0;
}
#progress_page .level_box, #progress_page .bonus_box, #progress_page .award_box, #progress_page .post_made_box {
   position: relative;
   text-align: center;
   float: left;
   border: 1px solid var(--color-border-default);
   width: 80px;
   height: 80px;
   padding: 5px;
   margin: 1px;
   border-radius: 15px;
   font-size: 95%;
}
#progress_page .award_box img {
   border-radius: 7px;
}
#progress_page .inner_box {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}
#progress_page .post_made_box {
   border-radius: 0px;
   font-size: 90%;
   width: 90px;
   height: 20px;
   font-family: var(--font-monospace);
   text-align: left;
}
#progress_page #levels_completed_grid img, #bonus_unlocked_grid img, #progress_page #problem_solving_awards_grid img, #progress_page #other_awards_grid img {
   width: 75px;
}
#progress_page #bonus_unlocked_grid .unsolved {
   filter: grayscale(1);
}
#progress_page .problems_solved_grid table {
   border-collapse: separate;
   border-spacing: 1px;
   background-color: var(--color-border-default);
   border: 3px solid var(--color-background-default);
   border-radius: 3px;
}
#progress_page .problems_solved_grid table.grid_incomplete {
   border-color: var(--color-background-default);
}
#progress_page .problems_solved_grid table.grid_complete {
   border-color: var(--color-orange);
}
#progress_page .problems_solved_grid table.grid_strike {
   border-color: var(--color-brown);
}
#progress_page .problems_solved_grid .recent {
   border-bottom: 2px solid var(--color-green)
}
#progress_page #levels_completed_grid:after, #progress_page #bonus_unlocked_grid:after, #progress_page #problem_solving_awards_grid:after, #progress_page #other_awards_grid:after, #progress_page #posts_made_section:after, #progress_page #history_section:after, #progress_page #problems_solved_section:after {
   content: "";
   clear: both;
   display: table;
}
#progress_page #problem_solving_awards_grid:after, #progress_page #other_awards_grid:after, #progress_page #problems_solved_section:after {
   margin-bottom: 30px;
}

#progress_page .problems_solved_grid .problem_solved {
   color: var(--color-dark-grey);
}
#progress_page .problems_solved_grid {
   float: left;
   margin-right: 20px;
}
#progress_page .problems_solved_table {
   margin-bottom: 30px;
}
#progress_page .problems_solved_table td {
   padding: 0;
   width: 27px;
   height: 27px;
   line-height: 27px;
   vertical-align: middle;
   text-align: center;
   font-size: 75%;
   color: var(--color-text-default);
}
@media screen and (max-width: 500px) {
   #progress_page .problems_solved_table td {
      line-height: 21px;
      width: 21px;
      height: 21px;
   }
   #progress_page .problems_solved_table td.four_digit {
      font-size: 65%;
   }

}
#progress_page .problems_solved_table .tooltiptext_narrow {
   font-size: 100%;
}
#progress_page .problems_solved_grid a {
   color: inherit;
   display: block;
   width: 100%;
   text-decoration: none;
   font-weight: normal;
}

#progress_page .problem_solved {
   color: var(--color-text-default);
   background-color: var(--color-orange);
}
#progress_page .problem_unsolved {
   color: var(--color-text-medium);
   background-color: var(--color-background-default);
}
#progress_page .own_problem_solved {
   color: var(--color-green);
   font-weight: bold;
}
#progress_page .own_problem_solved .own_progress {
   color: var(--color-green);
}
#progress_page .own_problem_unsolved .own_progress {
   color: var(--color-red);
}
#progress_page .pinned_problem {
   background-color: var(--color-light-red);
   color: white !important;
}
#progress_page .strike {
   color: var(--color-brown);
   font-weight: 700;
   background-color: var(--color-background-variation-1);
}
#progress_page td.grid_status {
   height: 0;
}
.grid_status div {
   height: 5px;
}
#progress_page .grid_status_incomplete {
   background-color: var(--color-border-default);
}
#progress_page .grid_status_strike {
   background-color: var(--color-brown);
}
#progress_page .grid_status_complete {
   background-color: var(--color-green);
}
#progress_page #posts_made_section .post_permanent {
   color: var(--color-green);
}
#progress_page #posts_made_section .post_temporary, #progress_page #posts_made_section .kudos_temporary {
   color: var(--color-text-variation-1);
}

#friends_page #friends_image_section {
   float: right;
   text-align: right;
   margin-bottom: 10px;
}
#friends_page #friends_image {
   border:1px solid var(--color-border-default);
   width: 200px;
   margin-bottom: 5px;
}
#friends_page #friends_table th {
   max-width: 4em;
}
#friends_page #friends_table .rank_column {
   width: 2em;
   border: none;
   background: none;
   text-align: right;
   font-size: 80%;
   color: var(--color-text-variation-1);
   font-weight: bold;
}
#friends_page #friends_table .username_column {
   width: 15em;
   text-align: left;
}
#friends_page #friends_table .language_column {
   width: 8em;
   text-align: left;
}
#friends_page #friends_table .location_column, #friends_page #friends_table .solved_column, #friends_page #friends_table .level_column, #friends_page #friends_table .awards_column {
   text-align: center;
}
#friends_page #friends_key_section {
   clear: both;
}
#friends_page #friends_key_section input[type="input"] {
   width: 400px;
}
#friends_page #friends_key_section #my_own_key, #friends_page #friends_key_section input[type="input"] {
   font-family: var(--font-monospace);
   font-size: 110%;
}

@media screen and (max-width: 450px) {
   #friends_page #friends_table .awards_column {
      display: none;
   }
   #friends_page #friends_key_section #my_own_key, #friends_page #friends_key_section input[type="input"] {
      font-size: 90%;
      width: 250px;
   }
}

#account_page #profile_image_box {
   float: right;
   width: 250px;
   font-size: 80%;
   text-align: center;
   margin-top: 20px;
}
#account_page #profile_image_box_clear {
   clear: both;
}
#account_page #profile_image_box a {
   color: var(--color-text-default);
}
#account_page #confirm_section {
   margin: 10px 50px;
   display: none;
   text-align:center;
}
#account_page #confirm_section #captcha_image {
   margin-top: 20px;
}

#news_page .news {
   background-color: var(--color-background-variation-1);
   border:1px solid var(--color-border-default);
   padding: 10px;
   margin-bottom: 10px;
}

#statistics_page #id_current {
   background-color: var(--color-background-variation-2);
}
#statistics_page .color_normal {
   color: var(--color-text-default);
}
#statistics_page .color_highlight {
   color: var(--color-orange);
   font-weight: bold;
}

#statistics_select_page #select_grid .select_box {
   float: left;
   vertical-align: top;
   margin: 15px 5px 15px 0;
   width: 100px;
   text-align: center;
   border: 1px solid var(--color-border-default);
   height: 120px;
   padding: 20px;
}
#statistics_select_page .select_box img {
   vertical-align: top;
   width: 100px;
   border-radius: 7px;
}
#statistics_select_page .select_box a {
   text-decoration: none;
}
#statistics_select_page #did_you_know {
   clear: both;
}
#statistics_select_page #levels_table td, #statistics_select_page #awards_table td {
   width: 90px;
   font-size: 90%;
   text-align: center;
   padding: 5px;
}
#statistics_select_page #levels_table img, #statistics_select_page #awards_table img {
   width: 70px;
}
#statistics_select_page #levels_table a, #statistics_select_page #awards_table a {
   color: var(--color-text-default);
   font-weight: bold;
}
#statistics_locations_page th {
   max-width: 10em;
}
#statistics_locations_page td {
   text-align: center;
}
#statistics_locations_page .location_column {
   text-align: left;
   width: 15em;
}
#statistics_locations_page a {
   text-decoration: none;
}
#statistics_locations_page .user_column, #statistics_locations_page .level_column, #statistics_locations_page .mean_column {
   text-align: center;
   max-width: 10em;
}
#statistics_locations_page tr:nth-child(even) {
   background-color: var(--color-background-variation-1);
}
@media screen and (max-width: 500px) {
   #statistics_locations_page .flag_icon {
      display: none;
   }
}
@media screen and (max-width: 450px) {
   #statistics_locations_page #location_table {
      font-size: 85%;
   }
}

#statistics_languages_page th {
   width: 10em;
}
#statistics_languages_page .rank_column {
   background-color: var(--color-background-default);
   border: none;
   text-align: right;
   font-weight: bold;
   width: 2em;
}
#statistics_languages_page tr:nth-child(even) {
   background-color: var(--color-background-variation-1);
}
#statistics_languages_page td {
   text-align: center;
   width: 10em;
}
#statistics_languages_page .language_column {
   text-align: left;
}
#statistics_languages_page a {
   text-decoration: none;
}
@media screen and (max-width: 500px) {
   #statistics_languages_page #languages_table {
      font-size: 90%;
   }
}

#statistics_problems_page #graph_images img {
   width: 400px;
}
@media screen and (max-width: 450px) {
   #statistics_problems_page #graph_images img {
      width: 300px;
   }
}
#statistics_problems_page .table_block {
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
}
#statistics_problems_page th {
   width: 80px;
}
#statistics_problems_page .n_column {
   width: 2em;
   font-weight: bold;
   text-align: right;
}
#statistics_problems_page .atleast_column {
   width: 120px;
}
#statistics_problems_page td, #statistics_problems_page th {
   text-align: center;
   font-size: 75%;
}
#statistics_problems_page .n_column, #statistics_problems_page .blank_column {
   background-color: var(--color-background-default);
   border: none;
}
#statistics_problems_page .blank_column {
   width: 50px;
}
#statistics_problems_page tr:nth-child(even) {
   background-color: var(--color-background-variation-1);
}
#statistics_problems_page:after {
   content: "";
   clear: both;
   display: table;
}
#statistics_general_table_page h2 {
   margin-bottom: 10px;
}

#statistics_general_table_page #flag_image {
   width: 90px;
   float: left;
   margin: 10px 30px;
}
#statistics_general_table_page #image_box {
   padding: 10px;
   border: 1px solid var(--color-border-default);
   float: left;
   margin-right: 20px;
}
#statistics_general_table_page #image_box img {
   vertical-align: top;
}
#statistics_general_table_page #image_box:after {
   clear: both;
}
#statistics_general_table_page .rank_column {
   border: none;
   background: none;
   font-weight: bold;
   text-align: right;
   font-size: 80%;
   color: var(--color-text-variation-1);
}
#statistics_general_table_page .username_column {
   width: 15em;
   text-align: left;
}
#statistics_general_table_page .location_column, #statistics_general_table_page .solved_column, #statistics_general_table_page .level_column {
   text-align: center;
}
#statistics_general_table_page .language_column {
   width: 8em;
}
#statistics_general_table_page a {
   text-decoration: none;
}
#statistics_general_table_page img {
   vertical-align: middle;
}
@media screen and (max-width: 450px) {
   #statistics_general_table_page #main_table {
      font-size: 85%;
   }
}

#statistics_eulerians_page li {
   margin-bottom: 30px;
}
#statistics_eulerians_page .subtitle {
   font-size: 120%;
   font-variant: small-caps;
}
#statistics_eulerians_page .rank_column {
   border: none;
   background: none;
   font-weight: bold;
   text-align: right;
   font-size: 80%;
   color:var(--color-text-variation-1);
}
#statistics_eulerians_page .username_column {
   width: 15em;
   text-align: left;
}
#statistics_eulerians_page .location_column, #statistics_eulerians_page .score_column {
   text-align: center;
}
#statistics_eulerians_page .score_column {
   width: 4em;
   text-align: center;
}
#statistics_eulerians_page .performance_column, #statistics_eulerians_page .language_column {
   width: 8em;
}

@media screen and (max-width: 500px) {
   #statistics_eulerians_page .performance_bar {
      display: none;
   }
   #statistics_eulerians_page .performance_numeric {
      display: block;
   }
   #statistics_eulerians_page #eulerians_table {
      font-size: 75%;
   }
}

@media screen and (max-width: 700px) {
   #statistics_eulerians_page .language_column {
      display: none;
   }
}
#statistics_eulerians_page img {
   vertical-align: middle;
}
#statistics_eulerians_page a {
   text-decoration: none;
}

#statistics_fastest_solvers_page .username_column {
   max-width: 15em;
   text-align: left;
}
#statistics_fastest_solvers_page .language_column {
   width: 8em;
   text-align: left;
}
#statistics_fastest_solvers_page .time_column {
   text-align: left;
}
#statistics_fastest_solvers_page #id_current {
   background-color: var(--color-background-variation-2);
}

/* Utility styles */
.no_border {
   border-collapse: collapse;
}
td.no_border, th.no_border, .no_border td, .no_border th {
   padding: 1px;
   border: none;
}
.no_border tr {
   background-color: inherit;
}
.center {
   text-align: center !important;
}
table.center {
   margin-left: auto;
   margin-right: auto;
}
.right {
   text-align: right !important;
}
.left {
   text-align: left !important;
}
.margin_left {
   margin-left: 100px;
}
.add_border {
   border: 1px solid var(--color-border-default);
}
.float_right {
   float: right;
}

.float_left {
   float: left;
}
.padding {
   padding: 10px;
}

.strong {
   font-weight: bold;
}
.italic {
   font-style: italic;
}
.larger {
   font-size: 110%;
}
.largest {
   font-size: 120%;
}
.smaller {
   font-size: 90%;
}
.smallest {
   font-size: 80%;
}
.red {
   color: var(--color-red);
}
.green {
   color:var(--color-green);
}
.blue {
   color:var(--color-blue);
}
.light_blue {
   color:var(--color-light-blue);
}
.orange {
   color:var(--color-orange);
}
.dark_green {
   color:var(--color-dark-green);
}
.red_box {
   outline: 2px solid var(--color-red);
   border-radius: 10px;
   padding-bottom: 2px;
}
.hidden {
   position: absolute;
   left: -999em;
   width: 1em;
   overflow: hidden;
}
.monospace {
   font-family: var(--font-monospace);
}
.strikethrough {
   text-decoration: line-through;
}
.w25 {
   width: 25px;
}
.w50 {
   width: 50px;
}
.w75 {
   width: 75px;
}
.w100 {
   width: 100px;
}
.w150 {
   width: 150px;
}
.w200 {
   width: 200px;
}
.w250 {
   width: 250px;
}
.w300 {
   width: 300px;
}
.w400 {
   width: 400px;
}
.w500 {
   width: 500px;
}
.w600 {
   width: 600px;
}

.truncate {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

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

.bonus_problem_unsolved_image {
   width: 30px;
   filter: grayscale(0.5);
   margin-right: 10px;
}
.list_gap_between li + li {
   margin-top: 20px;
}
.tag_color {
   color: var(--color-text-link);
   font-weight: bold;
}