@charset "UTF-8";
@font-face {
  font-family: "Fought";
  src: url("/assets/foughtknight.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Bebas";
  src: url("/assets/bebas.otf") format("opentype");
  font-display: swap;
}
/* ============ DARK THEME (default) ============ */
:root {
  --ground: #0c0a09;
  --ground-2: #120d0a;
  --panel: #17110c;
  --panel-2: #1e150d;
  --sunk: rgba(0, 0, 0, 0.18);
  --edge: #2c2015;
  --edge-hot: #3a2915;
  --rust: #ff5b1e;
  --rust-deep: #b8360c;
  --rail: #3fd9c8;
  --gold: #e5a72b;
  --blood: #c8322c;
  --ink: #ece2d4;
  --ink-strong: #d8ccbc;
  --ink-dim: #a89985;
  --ink-faint: #93826c;
  --hud-bg: linear-gradient(180deg, rgba(10, 8, 6, 0.96), rgba(10, 8, 6, 0.82));
  --card-grad: linear-gradient(180deg, var(--panel), var(--ground-2));
  --card-shadow: -8px 8px 24px rgba(0, 0, 0, 0.4);
  --scan-color: rgba(0, 0, 0, 0.22);
  --scan-opacity: 0.10;
  --glow-1: rgba(255, 91, 30, 0.10);
  --glow-2: rgba(63, 217, 200, 0.05);
  --glow-3: rgba(184, 54, 12, 0.07);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --maxw: 1240px;
}

/* ============ LIGHT / PAPER THEME (Slate & Rust) ============ */
html.light {
  --ground: #eceae6;
  --ground-2: #e0ddd7;
  --panel: #fbfbf9;
  --panel-2: #eeece7;
  --sunk: #e4e1db;
  --edge: #d0ccc3;
  --edge-hot: #b7ab93;
  --rust: #db4a10;
  --rust-deep: #a3300a;
  --rail: #0a6f74;
  --gold: #9c7420;
  --blood: #b0281f;
  --ink: #1c1a16;
  --ink-strong: #33302a;
  --ink-dim: #4f4a41;
  --ink-faint: #6a6459;
  --hud-bg: linear-gradient(180deg, rgba(245, 244, 241, 0.95), rgba(245, 244, 241, 0.8));
  --card-grad: linear-gradient(180deg, var(--panel), var(--panel-2));
  --card-shadow: -6px 8px 20px rgba(40, 40, 44, 0.12);
  --scan-color: rgba(50, 48, 44, 0.10);
  --scan-opacity: 0.05;
  --glow-1: rgba(219, 74, 16, 0.08);
  --glow-2: rgba(10, 111, 116, 0.06);
  --glow-3: rgba(219, 74, 16, 0.05);
}

/* ---- block flow ----------------------------------------------------------- */
p {
  margin: 0 0 9px;
}

ul, ol {
  padding: 0;
  margin: 0 0 9px 25px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

li {
  line-height: 18px;
}

dl {
  margin-bottom: 18px;
}

dt, dd {
  line-height: 18px;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 9px;
}

hr {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--edge);
}

address {
  display: block;
  margin-bottom: 18px;
  font-style: normal;
  line-height: 18px;
}

small {
  font-size: 85%;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

/* ---- headings ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 9px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 18px;
  color: inherit;
  text-rendering: optimizelegibility;
}

h1, h2, h3 {
  line-height: 36px;
}

h1 {
  font-size: 35.75px;
}

h2 {
  font-size: 29.25px;
}

h3 {
  font-size: 22.75px;
}

h4 {
  font-size: 16.25px;
}

h5 {
  font-size: 13px;
}

h6 {
  font-size: 11.05px;
}

/* ---- images --------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

.img-rounded {
  border-radius: 6px;
}

.img-polaroid {
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.img-circle {
  border-radius: 500px;
}

/* ---- tables --------------------------------------------------------------- */
table {
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  text-align: left;
}

/* ---- code ----------------------------------------------------------------- */
code, pre {
  font-family: var(--mono);
}

code {
  padding: 2px 5px;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-radius: 0;
}

pre {
  display: block;
  padding: 12px 14px;
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 18px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  color: var(--ink);
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-radius: 0;
}

pre code {
  padding: 0;
  color: inherit;
  white-space: pre-wrap;
  background: none;
  border: 0;
}

/* ---- abbreviations -------------------------------------------------------- */
abbr[title], abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted var(--ink-faint);
}

abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

/* ---- form controls -------------------------------------------------------- */
button, input, select, textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button, input {
  line-height: normal;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

label {
  display: block;
  margin-bottom: 5px;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

select, input[type=file] {
  height: 30px;
  line-height: 30px;
}

input[type=checkbox], input[type=radio] {
  margin: 4px 0 0;
  line-height: normal;
}

button, input[type=button], input[type=reset], input[type=submit] {
  width: auto;
  cursor: pointer;
}

::placeholder {
  color: var(--ink-faint);
}

/* ---- utilities ------------------------------------------------------------ */
.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

.hidden {
  display: none;
  visibility: hidden;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix::before, .clearfix::after {
  content: "";
  display: table;
  line-height: 0;
}

.clearfix::after {
  clear: both;
}

/* ---- component-animations (fade) — backs the modal .fade reveal ----------- */
.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

/* ---- modals --------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop, .modal-backdrop.fade.in {
  opacity: 0.8;
}

.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1050;
  width: 560px;
  margin-left: -280px;
  outline: none;
}

.modal.fade {
  top: -25%;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 10%;
}

.modal.hide {
  display: none;
}

@media (max-width: 767px) {
  .modal {
    top: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    margin: 0;
  }
  .modal.fade {
    top: -100px;
  }
  .modal.fade.in {
    top: 20px;
  }
}
/* ---- close glyph (modal ×, alert ×) --------------------------------------- */
.close {
  float: right;
  cursor: pointer;
  background: none;
  border: 0;
}

/* ---- tabs (profile show/edit, user show) — show/hide the active pane ------ */
.tab-content {
  overflow: auto;
}

.tab-content > .tab-pane, .pill-content > .pill-pane {
  display: none;
}

.tab-content > .active, .pill-content > .active {
  display: block;
}

/* ---- dropdown menu (profile / messages / content header menus) ------------ */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  margin: 2px 0 0;
  padding: 5px 0;
  list-style: none;
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.open > .dropdown-menu {
  display: block;
}

.dropdown-menu li > a {
  display: block;
  white-space: nowrap;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

/* ---- fluid grid (form layouts, forum posts, pictures) --------------------- */
.row-fluid {
  width: 100%;
}

.row-fluid::before, .row-fluid::after {
  content: "";
  display: table;
  line-height: 0;
}

.row-fluid::after {
  clear: both;
}

.row-fluid [class*=span] {
  display: block;
  float: left;
  box-sizing: border-box;
  width: 100%;
  min-height: 28px;
  margin-left: 1.2820512821%;
}

.row-fluid [class*=span]:first-child {
  margin-left: 0;
}

.row-fluid .span1 {
  width: 7.1581196581%;
}

.row-fluid .span2 {
  width: 15.5982905983%;
}

.row-fluid .span3 {
  width: 24.0384615385%;
}

.row-fluid .span4 {
  width: 32.4786324787%;
}

.row-fluid .span5 {
  width: 40.9188034189%;
}

.row-fluid .span6 {
  width: 49.3589743591%;
}

.row-fluid .span7 {
  width: 57.7991452993%;
}

.row-fluid .span8 {
  width: 66.2393162395%;
}

.row-fluid .span9 {
  width: 74.6794871797%;
}

.row-fluid .span10 {
  width: 83.1196581199%;
}

.row-fluid .span11 {
  width: 91.5598290601%;
}

.row-fluid .span12 {
  width: 100.0000000003%;
}

@media (max-width: 767px) {
  .row-fluid, .row-fluid [class*=span] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
  }
}
/* ---- nav base (nav-list / nav-pills / nav-tabs used in profile, header) --- */
.nav {
  margin-left: 0;
  margin-bottom: 18px;
  list-style: none;
}

.nav > li > a {
  display: block;
}

.nav::before, .nav::after {
  content: "";
  display: table;
  line-height: 0;
}

.nav::after {
  clear: both;
}

.nav-pills > li, .nav-tabs > li {
  float: left;
}

.nav-tabs {
  border-bottom: 1px solid var(--edge);
}

.nav-list {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
}

.nav-list > li > a {
  padding: 3px 15px;
}

/* ---- horizontal definition lists (profile stats, message meta) ------------ */
.dl-horizontal::before, .dl-horizontal::after {
  content: "";
  display: table;
  line-height: 0;
}

.dl-horizontal::after {
  clear: both;
}

.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-horizontal dd {
  margin-left: 180px;
}

@media (max-width: 767px) {
  .dl-horizontal dt {
    float: none;
    clear: none;
    width: auto;
    text-align: left;
  }
  .dl-horizontal dd {
    margin-left: 0;
  }
}
/* ---- well / progress base (topic-move form, edit-profile) ----------------- */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
}

.progress {
  overflow: hidden;
  height: 18px;
  margin-bottom: 18px;
}

.progress .bar {
  float: left;
  width: 0;
  height: 100%;
}

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: "FontAwesome";
  src: url("/assets/fontawesome-webfont.eot?v=4.7.0");
  src: url("/assets/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("/assets/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("/assets/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("/assets/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("/assets/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.2857142857em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.8571428571em;
}

.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.fa-pull-left {
  float: left;
}

.fa-pull-right {
  float: right;
}

.fa.fa-pull-left {
  margin-right: 0.3em;
}
.fa.fa-pull-right {
  margin-left: 0.3em;
}

/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: 0.3em;
}
.fa.pull-right {
  margin-left: 0.3em;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper-pp:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-newspaper-o:before {
  content: "\f1ea";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bell-slash-o:before {
  content: "\f1f7";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-eyedropper:before {
  content: "\f1fb";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-pie-chart:before {
  content: "\f200";
}

.fa-line-chart:before {
  content: "\f201";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-bus:before {
  content: "\f207";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-cc:before {
  content: "\f20a";
}

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}

.fa-meanpath:before {
  content: "\f20c";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-diamond:before {
  content: "\f219";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-venus:before {
  content: "\f221";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-genderless:before {
  content: "\f22d";
}

.fa-facebook-official:before {
  content: "\f230";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-server:before {
  content: "\f233";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-train:before {
  content: "\f238";
}

.fa-subway:before {
  content: "\f239";
}

.fa-medium:before {
  content: "\f23a";
}

.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}

.fa-optin-monster:before {
  content: "\f23c";
}

.fa-opencart:before {
  content: "\f23d";
}

.fa-expeditedssl:before {
  content: "\f23e";
}

.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}

.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}

.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}

.fa-mouse-pointer:before {
  content: "\f245";
}

.fa-i-cursor:before {
  content: "\f246";
}

.fa-object-group:before {
  content: "\f247";
}

.fa-object-ungroup:before {
  content: "\f248";
}

.fa-sticky-note:before {
  content: "\f249";
}

.fa-sticky-note-o:before {
  content: "\f24a";
}

.fa-cc-jcb:before {
  content: "\f24b";
}

.fa-cc-diners-club:before {
  content: "\f24c";
}

.fa-clone:before {
  content: "\f24d";
}

.fa-balance-scale:before {
  content: "\f24e";
}

.fa-hourglass-o:before {
  content: "\f250";
}

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}

.fa-hourglass:before {
  content: "\f254";
}

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}

.fa-hand-scissors-o:before {
  content: "\f257";
}

.fa-hand-lizard-o:before {
  content: "\f258";
}

.fa-hand-spock-o:before {
  content: "\f259";
}

.fa-hand-pointer-o:before {
  content: "\f25a";
}

.fa-hand-peace-o:before {
  content: "\f25b";
}

.fa-trademark:before {
  content: "\f25c";
}

.fa-registered:before {
  content: "\f25d";
}

.fa-creative-commons:before {
  content: "\f25e";
}

.fa-gg:before {
  content: "\f260";
}

.fa-gg-circle:before {
  content: "\f261";
}

.fa-tripadvisor:before {
  content: "\f262";
}

.fa-odnoklassniki:before {
  content: "\f263";
}

.fa-odnoklassniki-square:before {
  content: "\f264";
}

.fa-get-pocket:before {
  content: "\f265";
}

.fa-wikipedia-w:before {
  content: "\f266";
}

.fa-safari:before {
  content: "\f267";
}

.fa-chrome:before {
  content: "\f268";
}

.fa-firefox:before {
  content: "\f269";
}

.fa-opera:before {
  content: "\f26a";
}

.fa-internet-explorer:before {
  content: "\f26b";
}

.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}

.fa-contao:before {
  content: "\f26d";
}

.fa-500px:before {
  content: "\f26e";
}

.fa-amazon:before {
  content: "\f270";
}

.fa-calendar-plus-o:before {
  content: "\f271";
}

.fa-calendar-minus-o:before {
  content: "\f272";
}

.fa-calendar-times-o:before {
  content: "\f273";
}

.fa-calendar-check-o:before {
  content: "\f274";
}

.fa-industry:before {
  content: "\f275";
}

.fa-map-pin:before {
  content: "\f276";
}

.fa-map-signs:before {
  content: "\f277";
}

.fa-map-o:before {
  content: "\f278";
}

.fa-map:before {
  content: "\f279";
}

.fa-commenting:before {
  content: "\f27a";
}

.fa-commenting-o:before {
  content: "\f27b";
}

.fa-houzz:before {
  content: "\f27c";
}

.fa-vimeo:before {
  content: "\f27d";
}

.fa-black-tie:before {
  content: "\f27e";
}

.fa-fonticons:before {
  content: "\f280";
}

.fa-reddit-alien:before {
  content: "\f281";
}

.fa-edge:before {
  content: "\f282";
}

.fa-credit-card-alt:before {
  content: "\f283";
}

.fa-codiepie:before {
  content: "\f284";
}

.fa-modx:before {
  content: "\f285";
}

.fa-fort-awesome:before {
  content: "\f286";
}

.fa-usb:before {
  content: "\f287";
}

.fa-product-hunt:before {
  content: "\f288";
}

.fa-mixcloud:before {
  content: "\f289";
}

.fa-scribd:before {
  content: "\f28a";
}

.fa-pause-circle:before {
  content: "\f28b";
}

.fa-pause-circle-o:before {
  content: "\f28c";
}

.fa-stop-circle:before {
  content: "\f28d";
}

.fa-stop-circle-o:before {
  content: "\f28e";
}

.fa-shopping-bag:before {
  content: "\f290";
}

.fa-shopping-basket:before {
  content: "\f291";
}

.fa-hashtag:before {
  content: "\f292";
}

.fa-bluetooth:before {
  content: "\f293";
}

.fa-bluetooth-b:before {
  content: "\f294";
}

.fa-percent:before {
  content: "\f295";
}

.fa-gitlab:before {
  content: "\f296";
}

.fa-wpbeginner:before {
  content: "\f297";
}

.fa-wpforms:before {
  content: "\f298";
}

.fa-envira:before {
  content: "\f299";
}

.fa-universal-access:before {
  content: "\f29a";
}

.fa-wheelchair-alt:before {
  content: "\f29b";
}

.fa-question-circle-o:before {
  content: "\f29c";
}

.fa-blind:before {
  content: "\f29d";
}

.fa-audio-description:before {
  content: "\f29e";
}

.fa-volume-control-phone:before {
  content: "\f2a0";
}

.fa-braille:before {
  content: "\f2a1";
}

.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}

.fa-glide:before {
  content: "\f2a5";
}

.fa-glide-g:before {
  content: "\f2a6";
}

.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}

.fa-low-vision:before {
  content: "\f2a8";
}

.fa-viadeo:before {
  content: "\f2a9";
}

.fa-viadeo-square:before {
  content: "\f2aa";
}

.fa-snapchat:before {
  content: "\f2ab";
}

.fa-snapchat-ghost:before {
  content: "\f2ac";
}

.fa-snapchat-square:before {
  content: "\f2ad";
}

.fa-pied-piper:before {
  content: "\f2ae";
}

.fa-first-order:before {
  content: "\f2b0";
}

.fa-yoast:before {
  content: "\f2b1";
}

.fa-themeisle:before {
  content: "\f2b2";
}

.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}

.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}

.fa-handshake-o:before {
  content: "\f2b5";
}

.fa-envelope-open:before {
  content: "\f2b6";
}

.fa-envelope-open-o:before {
  content: "\f2b7";
}

.fa-linode:before {
  content: "\f2b8";
}

.fa-address-book:before {
  content: "\f2b9";
}

.fa-address-book-o:before {
  content: "\f2ba";
}

.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}

.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}

.fa-user-circle:before {
  content: "\f2bd";
}

.fa-user-circle-o:before {
  content: "\f2be";
}

.fa-user-o:before {
  content: "\f2c0";
}

.fa-id-badge:before {
  content: "\f2c1";
}

.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}

.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}

.fa-quora:before {
  content: "\f2c4";
}

.fa-free-code-camp:before {
  content: "\f2c5";
}

.fa-telegram:before {
  content: "\f2c6";
}

.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}

.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}

.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}

.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

.fa-shower:before {
  content: "\f2cc";
}

.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}

.fa-podcast:before {
  content: "\f2ce";
}

.fa-window-maximize:before {
  content: "\f2d0";
}

.fa-window-minimize:before {
  content: "\f2d1";
}

.fa-window-restore:before {
  content: "\f2d2";
}

.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}

.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}

.fa-bandcamp:before {
  content: "\f2d5";
}

.fa-grav:before {
  content: "\f2d6";
}

.fa-etsy:before {
  content: "\f2d7";
}

.fa-imdb:before {
  content: "\f2d8";
}

.fa-ravelry:before {
  content: "\f2d9";
}

.fa-eercast:before {
  content: "\f2da";
}

.fa-microchip:before {
  content: "\f2db";
}

.fa-snowflake-o:before {
  content: "\f2dc";
}

.fa-superpowers:before {
  content: "\f2dd";
}

.fa-wpexplorer:before {
  content: "\f2de";
}

.fa-meetup:before {
  content: "\f2e0";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.badges-list {
  text-align: center;
}
.badges-list div {
  padding-right: 5px;
  padding-bottom: 5px;
  float: left;
  transition: all 500ms ease;
}
.badges-list div.not-granted {
  opacity: 0.4;
}
.badges-list div.not-granted:hover {
  opacity: 0.7;
}
.badges-list div > span {
  display: block;
  width: 61px;
  height: 61px;
  background: url("/assets/img/badges.png") no-repeat top left;
}
.badges-list div > span.poster6 {
  background-position: 0 -355px;
}
.badges-list div > span.poster2 {
  background-position: 0 -71px;
}
.badges-list div > span.poster4 {
  background-position: 0 -142px;
}
.badges-list div > span.poster1 {
  background-position: 0 -213px;
}
.badges-list div > span.poster8 {
  background-position: 0 -284px;
}
.badges-list div > span.poster7 {
  background-position: 0 0;
}
.badges-list div > span.poster5 {
  background-position: 0 -426px;
}
.badges-list div > span.poster3 {
  background-position: 0 -497px;
}

.widget > .tabbable ul.nav {
  background-color: rgb(68, 68, 68);
}
.widget > .tabbable ul.nav li a {
  background-color: rgb(249.9, 249.9, 249.9);
}

.widget .no-border {
  border: 0;
}

.widget {
  position: relative;
  clear: both;
  width: auto;
  margin-bottom: 15px;
  overflow: hidden;
}

.widget-header {
  position: relative;
  height: 30px;
  background-color: rgb(243.2, 243.2, 243.2);
  background-image: linear-gradient(to bottom, #fafafa, #e9e9e9);
  background-repeat: repeat-x;
  border: 1px solid #D5D5D5;
}
.widget-header h3 {
  position: relative;
  left: 10px;
  display: inline-block;
  margin-right: 3em;
  font-size: 14px;
  font-weight: 800;
  color: #555;
  line-height: 18px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
.widget-header [class^=fa-], .widget-header [class*=" fa-"] {
  display: inline-block;
  margin-left: 13px;
  margin-right: -2px;
  font-size: 16px;
  color: #555;
}
.widget-header.small {
  height: 30px;
  line-height: 30px;
}
.widget-header.small [class^=fa-], .widget-header.small [class*=" fa-"] {
  margin-top: -4px;
}
.widget-header.small h3 {
  top: 0;
}

.widget-content {
  padding: 15px;
  background: rgb(249.9, 249.9, 249.9);
  border: 1px solid #D5D5D5;
}

.widget-header + .widget-content {
  border-top: none;
}

a.flip {
  background: url("/assets/img/arrow.gif") left center no-repeat;
  padding-left: 15px;
}

div.flip {
  display: none;
  border: 1px dotted var(--edge);
  border-left: 0;
  border-right: 0;
  padding: 10px;
  margin: 10px;
  background-color: var(--panel-2);
  color: var(--ink-strong);
}

span.spoiler {
  text-shadow: 0 0 8px #000;
  color: transparent;
  transition: all 500ms ease-in;
}
span.spoiler:hover {
  text-shadow: none;
  color: inherit;
}

video.embed-video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

div.preview {
  clear: both;
  position: relative;
  margin: 5px 0px;
  padding: 39px 19px 14px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 4px 4px 4px 4px;
  background-color: #fff;
}
div.preview > a.btn {
  position: absolute;
  right: -1px;
  top: -1px;
  font-size: 12px;
}
div.preview:after {
  background-color: #F5F5F5;
  border: 1px solid #DDDDDD;
  border-radius: 4px 0 4px 0;
  color: #9DA0A4;
  content: "Podglad";
  font-size: 12px;
  font-weight: bold;
  left: -1px;
  padding: 3px 7px;
  position: absolute;
  top: -1px;
}

.browser-alert {
  position: relative;
  background-color: #52575C;
  text-shadow: none;
  border-color: rgb(57.9655172414, 61.5, 65.0344827586);
  color: #BBBFC2;
  padding-right: 180px;
}
.browser-alert p {
  margin: 0;
}
.browser-alert .icons {
  position: absolute;
  right: 10px;
  top: 10px;
}
.browser-alert .icons a {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: -9999px;
  margin-left: 4px;
  margin-right: 4px;
  outline: 0;
  background: url("/assets/img/browsers.png") no-repeat top left;
}
.browser-alert .icons a.chrome {
  background-position: 0 0;
}
.browser-alert .icons a.firefox {
  background-position: -33px 0;
}
.browser-alert .icons a.opera {
  background-position: -66px 0;
}
.browser-alert .icons a.safari {
  background-position: -99px 0;
}

.user-content-info p.counter {
  display: inline-block;
  vertical-align: top;
  padding-left: 10px;
}
.user-content-info .progress {
  display: inline-block;
  width: 120px;
}

@break-lines {
  word-wrap: break-word;
}
.span4 .tab-content {
  margin: 10px;
}

body > .navbar-fixed {
  border-top: 1px solid rgb(89, 89, 89);
}

table th.edit, table th.destroy, table th.publish {
  width: 75px;
}
table tr.spacer td {
  background-color: rgb(239.1379310345, 240, 240.8620689655) !important;
}
table tr.spacer:hover {
  background-color: rgb(239.1379310345, 240, 240.8620689655) !important;
}

span.manage {
  font-weight: normal !important;
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  padding: 0;
  margin: 0;
}
span.manage .btn a {
  color: #272B30;
}
span.manage .btn-danger {
  color: #fff;
}

body {
  background-color: rgb(68, 68, 68);
}

.deleted {
  opacity: 0.7;
}

.tabbable {
  padding: 0 !important;
}

ul.nav-pills li.new-message a {
  font-weight: bold;
  background-color: rgb(251.9645669291, 201.374015748, 129.5354330709);
}
ul.nav-pills li.new-message a:hover {
  background-color: rgb(250.7598425197, 180.0905511811, 79.7401574803);
}

.nav {
  margin-left: 0;
  margin-right: 15px;
  margin-top: 20px;
  margin-bottom: 5px;
  list-style: none;
}
.nav li a span.pending {
  color: #F6D30D;
}

.span8 h1 {
  font-size: 3em;
}

.nav.nav-pills.small {
  float: right;
  margin-right: 0;
}
.nav.nav-pills.small li > a {
  text-shadow: none;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: normal;
  color: #272B30;
  background-color: rgb(221.85, 221.85, 221.85);
  background-image: linear-gradient(rgb(229.5, 229.5, 229.5), rgb(216.75, 216.75, 216.75) 1, rgb(242.25, 242.25, 242.25));
}
.nav.nav-pills.small li > a:hover {
  background-color: rgb(209.1, 209.1, 209.1);
  background-image: linear-gradient(rgb(216.75, 216.75, 216.75), #cccccc 1, rgb(229.5, 229.5, 229.5));
  color: rgb(173.3070866142, 103.4251968504, 4.1929133858);
}
.nav.nav-pills.small li > a.voted {
  color: rgb(72.7987012987, 116.7402597403, 34.7597402597) !important;
  background-color: rgb(209.1, 209.1, 209.1);
  background-image: linear-gradient(rgb(216.75, 216.75, 216.75), #cccccc 1, rgb(229.5, 229.5, 229.5));
  cursor: default;
}

h3 > i {
  padding-right: 5px;
  padding-left: 5px;
}

table th > a {
  color: #52575C;
  border-bottom: 1px dotted #52575C;
}
table th > a:hover {
  text-decoration: none;
}

.quote-show:hover .manage, .questionnaire-show:hover .manage, .download:hover .manage, .article:hover .manage, .screens:hover .manage, .clan:hover .manage, .page:hover .manage, .journal:hover .manage {
  display: inline-block;
}

.ui-autocomplete-loading {
  background: url("/assets/img/indicator.gif") no-repeat right center;
}

dl.message dt, dl.message dd {
  padding: 5px;
}

.action-new {
  padding-bottom: 20px;
  float: right;
}
.action-new .add-content {
  width: 130px;
}
.action-new .add-content i {
  line-height: 14px;
}

.right-align {
  text-align: right;
}

p.center {
  text-align: center;
}

p.right {
  float: right;
  padding-left: 6px;
  padding-bottom: 6px;
}

p.left {
  float: left;
  padding-right: 6px;
  padding-bottom: 6px;
}

.widget.streams .widget-content {
  padding: 10px;
}
.widget.streams .widget-content ul {
  margin: 0;
}

.widget.ql {
  opacity: 0.8;
  transition: all 1000ms ease;
}
.widget.ql:hover {
  opacity: 1;
  box-shadow: 0px 0px 5px rgb(200.0483870968, 48.4193548387, 36.9516129032);
}
.widget.ql a {
  display: block;
  height: 50px;
  background: url("/assets/quake_live.jpg") left center no-repeat;
  text-indent: -9999px;
}

.widget.widget-tabs.widget-users-main li a i {
  color: #272B30;
}
.widget.widget-tabs .nav {
  margin: 0;
  background-color: rgb(243.2, 243.2, 243.2);
  background-image: linear-gradient(to bottom, #fafafa, #e9e9e9);
  background-repeat: repeat-x;
}
.widget.widget-tabs .nav li {
  float: right;
}
.widget.widget-tabs .nav li a {
  border-radius: 0;
  line-height: 19px;
  font-size: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.widget.widget-tabs .nav li a:focus {
  border-bottom-color: rgb(249.9, 249.9, 249.9);
}
.widget.widget-tabs .widget-content {
  padding: 0;
}
.widget.widget-tabs .widget-content p.show-more {
  margin-left: 10px;
}
.widget.widget-tabs .widget-content .widget-header {
  float: left;
  border: 0;
  background: transparent;
}
.widget.widget-tabs .widget-content .widget-header h3 {
  margin-right: 0;
}

@media (max-width: 1200px) {
  .widget.widget-tabs .nav li a {
    font-size: 11px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .widget.widget-tabs .widget-header * {
    font-size: 12px;
  }
}
ol.activity {
  height: 250px;
  overflow: hidden;
  position: relative;
}
ol.activity.expanded {
  height: auto;
}
ol.activity.expanded:after {
  height: 0;
}
ol.activity li {
  padding-bottom: 5px;
}
ol.activity abbr {
  color: #BBBFC2;
  border: 0;
  cursor: auto;
  text-align: right;
}
ol.activity:after {
  background-color: rgba(249.9, 249.9, 249.9, 0.4);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(249.9, 249.9, 249.9));
  background-repeat: repeat-x;
  bottom: 0;
  left: 0;
  height: 20px;
  position: absolute;
  width: 100%;
  content: "";
}

.recent-articles .media {
  margin-top: 0;
}
.recent-articles img {
  width: 30px;
  height: 30px;
}
.recent-articles .media + .media {
  padding-top: 10px;
  border-top: 1px dotted #757C82;
}

.downloads h5 {
  text-align: center;
}

.two-boxes {
  overflow: hidden;
  margin-bottom: 5px;
}
.two-boxes .widget {
  overflow: visible;
  margin-bottom: -5px;
}
.two-boxes .widget .widget-content {
  padding-bottom: 500px;
  margin-bottom: -500px;
}

#markdown-flags .modal-body {
  text-align: center;
}

#registerModal {
  font-size: 15px;
}
#registerModal .modal-body {
  max-height: 600px;
}
#registerModal .modal-header h3 {
  background: url("/assets/square.png") left center no-repeat;
  padding-left: 30px;
}
#registerModal ul li {
  padding: 5px;
}
#registerModal .help-inline {
  font-size: 10px;
}
#registerModal h4 + ul {
  list-style: square;
}

.fb_edge_widget_with_comment {
  padding-top: 10px;
}

.profile .nav.nav-list {
  border-radius: 0;
  margin-top: 0;
}
.profile .nav.nav-list li > a {
  font-size: 13px;
  padding: 5px 10px;
}
.profile .nav.nav-list li.active > a {
  background-color: #fff;
  font-weight: bold;
  text-shadow: none;
  color: rgb(173.3070866142, 103.4251968504, 4.1929133858);
}
.profile .nav.nav-list li.active > a:hover {
  background-color: rgb(242.25, 242.25, 242.25);
}
.profile .nav.nav-list .nav-header {
  font-size: 13px;
  padding: 4px 6px;
}

.footer {
  margin: 20px 0;
  padding: 10px;
  border-top: 1px dotted #757C82;
}

/* FORMS */
select.datetime {
  width: 100px;
}

.pagination-right {
  text-align: right !important;
}

#category-filter {
  display: inline-block;
}

.navbar-inner {
  padding: 0;
}

.simple_form .error span.help-inline {
  margin-top: 5px;
  display: block;
  background: url("/assets/img/error.png") left center no-repeat;
  padding-left: 20px;
}

a.bold {
  font-weight: bold;
}

a.feed {
  background: url("/assets/feed-icon-14x14.png") center center no-repeat;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  float: right;
  padding: 0;
}

.ui-autocomplete {
  z-index: 9 !important;
}

@media (max-width: 767px) {
  .widget-content table.table-cards {
    background: transparent !important;
  }
  .widget-content table.table-cards, .widget-content table.table-cards tbody, .widget-content table.table-cards tbody tr, .widget-content table.table-cards tbody td {
    display: block;
    width: auto;
  }
  .widget-content table.table-cards thead {
    display: none;
  }
  .widget-content table.table-cards tbody tr {
    margin-bottom: 12px;
    border: 1px solid rgba(128, 128, 128, 0.35);
  }
  .widget-content table.table-cards tbody td {
    display: block;
    width: auto !important;
    height: auto !important;
    text-align: left !important;
    background-image: none !important;
    border: none;
    padding: 4px 10px;
    padding-left: 10px !important;
    white-space: normal;
  }
  .widget-content table.table-cards tbody td:empty {
    display: none;
  }
  .widget-content table.table-cards tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: bold;
    color: #757C82;
  }
  .widget-content table.table-cards tbody td.card-title {
    font-size: 15px;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
  }
  .widget-content table.table-cards-sections thead, .widget-content table.table-cards-sections thead tr, .widget-content table.table-cards-sections thead th {
    display: block;
  }
  .widget-content table.table-cards-sections thead th {
    padding: 10px 0 4px;
    font-size: 15px;
    font-weight: bold;
  }
  .widget-content table.table-cards-sections tbody tr.header {
    display: none;
  }
}
/*!
 * jQuery UI Bootstrap (0.5)
 * http://addyosmani.github.com/jquery-ui-bootstrap
 *
 * Copyright 2012 - 2013, Addy Osmani
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Portions copyright jQuery UI & Twitter Bootstrap
 */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
}

.ui-helper-clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.ui-helper-clearfix {
  /*display: inline-block; */
  display: block;
  min-height: 0; /* support: IE7 */
}

/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {
  height: 1%;
}

/* end clearfix */
.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
 * jQuery UI Resizable 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/resizable/
 */
.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  z-index: 99999;
  display: block;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

/*
 * jQuery UI Selectable 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://jqueryui.com/selectable/
 */
.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

/*
 * jQuery UI CSS Framework 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 *
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/
 */
/* Component containers
----------------------------------*/
.ui-widget {
  font-family: var(--sans);
  font-size: 13px;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: var(--sans);
  font-size: 1em;
}

.ui-widget-content {
  border: 1px solid #aaaaaa;
  background: #ffffff url("/assets/images/ui-bg_glass_75_ffffff_1x400.png") 50% 50% repeat-x;
  color: #404040;
}

.ui-widget-content a {
  color: #404040;
}

.ui-widget-header {
  font-weight: bold;
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border: 1px solid #666;
}

.ui-widget-header a {
  color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #333;
  font-size: 13px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.1s linear background-image;
  -moz-transition: 0.1s linear background-image;
  -ms-transition: 0.1s linear background-image;
  -o-transition: 0.1s linear background-image;
  transition: 0.1s linear background-image;
  overflow: visible;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
  color: #555555;
  text-decoration: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background-position: 0 -15px;
  color: #333;
  text-decoration: none;
}

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited {
  color: #212121;
  text-decoration: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: 1px solid #aaaaaa;
  font-weight: normal;
  color: #212121;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  color: #212121;
  text-decoration: none;
}

.ui-widget :active {
  outline: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight p, .ui-state-error p, .ui-state-default p {
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  margin: 7px 15px;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  position: relative;
  margin-bottom: 18px;
  color: #404040;
  background-color: #eedc94;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
  background-image: linear-gradient(top, #fceec1, #eedc94);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #eedc94 #eedc94 #e4c652;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
  color: #363636;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
  position: relative;
  margin-bottom: 18px;
  color: #ffffff;
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
  color: #cd0a0a;
}

.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
  color: #cd0a0a;
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  font-weight: normal;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
} /* For IE8 - See #6059 */
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  width: 16px;
  height: 16px;
  background-image: url("/assets/images/ui-icons_222222_256x240.png");
}

.ui-widget-content .ui-icon {
  background-image: url("/assets/images/ui-icons_222222_256x240.png");
}

.ui-widget-header .ui-icon {
  background-image: url("/assets/images/ui-icons_222222_256x240.png");
}

.ui-state-default .ui-icon {
  background-image: url("/assets/images/ui-icons_888888_256x240.png");
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
  background-image: url("/assets/images/ui-icons_454545_256x240.png");
}

.ui-state-active .ui-icon {
  background-image: url("/assets/images/ui-icons_454545_256x240.png");
}

.ui-state-highlight .ui-icon {
  background-image: url("/assets/images/ui-icons_2e83ff_256x240.png");
}

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
  background-image: url("/assets/images/ui-icons_f6cf3b_256x240.png");
}

/* positioning */
.ui-icon-carat-1-n {
  background-position: 0 0;
}

.ui-icon-carat-1-ne {
  background-position: -16px 0;
}

.ui-icon-carat-1-e {
  background-position: -32px 0;
}

.ui-icon-carat-1-se {
  background-position: -48px 0;
}

.ui-icon-carat-1-s {
  background-position: -64px 0;
}

.ui-icon-carat-1-sw {
  background-position: -80px 0;
}

.ui-icon-carat-1-w {
  background-position: -96px 0;
}

.ui-icon-carat-1-nw {
  background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
  background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-off {
  background-position: -96px -144px;
}

.ui-icon-radio-on {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  -khtml-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  -khtml-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -khtml-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -khtml-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa url("/assets/images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
  margin: -8px 0 0 -8px;
  padding: 8px;
  background: #aaaaaa url("/assets/images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

/*
 * jQuery UI Accordion 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://jqueryui.com/accordion/
 */
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion {
  width: 100%;
}

.ui-accordion .ui-accordion-header {
  cursor: pointer;
  position: relative;
  margin-top: 1px;
  zoom: 1;
  font-weight: bold;
}

.ui-accordion .ui-accordion-li-fix {
  display: inline;
}

.ui-accordion .ui-accordion-header-active {
  border-bottom: 0 !important;
}

.ui-accordion .ui-accordion-header a {
  display: block;
  font-size: 1em;
  padding: 0.5em 0.5em 0.5em 1.7em;
}

.ui-accordion-icons .ui-accordion-header a {
  padding-left: 2.2em;
}

.ui-accordion .ui-accordion-header .ui-icon {
  position: absolute;
  left: 0.5em;
  top: 50%;
  margin-top: -8px;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  margin-top: -2px;
  position: relative;
  top: 1px;
  margin-bottom: 2px;
  overflow: auto;
  display: none;
  zoom: 1;
}

.ui-accordion .ui-accordion-content-active {
  display: block;
}

/*
 * jQuery UI Autocomplete 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://jqueryui.com/autocomplete/
 */
.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

/*
 * jQuery UI Button 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Button#theming
 */
.ui-button {
  cursor: pointer;
  display: inline-block;
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  padding: 5px 14px 6px;
  margin: 0;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #333;
  font-size: 13px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.1s linear background-image;
  -moz-transition: 0.1s linear background-image;
  -ms-transition: 0.1s linear background-image;
  -o-transition: 0.1s linear background-image;
  transition: 0.1s linear background-image;
  overflow: visible;
} /* the overflow property removes extra width in IE */
.ui-button-primary {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.ui-button-success {
  color: #ffffff;
  background-color: #57a957;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.ui-button-error {
  color: #ffffff;
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.ui-button-icon-only {
  width: 2.2em;
} /* to make room for the icon, a width needs to be set here */
/* button elements seem to need a little more width */
.ui-button-icons-only {
  width: 3.4em;
}

button.ui-button-icons-only {
  width: 3.7em;
}

/*button text element */
.ui-button .ui-button-text {
  display: block;
}

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
  padding: 0.4em;
  text-indent: -9999999px; /*tempfix*/
  display: none;
}

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
  padding: 0.4em 1em 0.4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
  padding: 0.4em 2.1em 0.4em 1em;
}

.ui-button-text-icons .ui-button-text {
  padding-left: 2.1em;
  padding-right: 2.1em;
}

/* no icon support for input elements, provide padding by default */
/* input.ui-button { padding: .4em 1em; } */
/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon {
  top: 50%;
  margin-top: -3px;
  margin-bottom: 3px;
}

.ui-button-icon-only .ui-icon {
  left: 50%;
  margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
  left: 0.5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

/*button sets*/
.ui-buttonset {
  margin-right: 7px;
}

.ui-buttonset .ui-state-active {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: -0.4em;
}

/* workarounds */
button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
} /* reset extra padding in Firefox */
/*
 * jQuery UI Menu 1.10.0
 *
* Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-menu {
  list-style: none;
  padding: 2px;
  margin: 0;
  display: block;
  float: left;
  outline: none;
}

.ui-menu .ui-menu {
  margin-top: -3px;
  position: absolute;
}

.ui-menu .ui-menu-item {
  margin: 0;
  padding: 0;
  zoom: 1;
  float: left;
  clear: left;
  width: 100%;
}

.ui-menu .ui-menu-divider {
  margin: 5px -2px 5px -2px;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}

.ui-menu .ui-menu-item a {
  text-decoration: none;
  display: block;
  padding: 2px 0.4em;
  line-height: 1.5;
  zoom: 1;
  font-weight: normal;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
  font-weight: normal;
  margin: 0;
  color: #ffffff;
  background: #0064cd;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/* Fix problem with border in ui-state-active */
.ui-menu .ui-menu-item a.ui-state-active {
  padding: 1px 0.4em;
}

.ui-menu .ui-state-disabled {
  font-weight: normal;
  margin: 0.4em 0 0.2em;
  line-height: 1.5;
}

.ui-menu .ui-state-disabled a {
  cursor: default;
}

/* icon support */
.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item a {
  position: relative;
  padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
  position: static;
  float: right;
}

.ui-menu {
  width: 200px;
  margin-bottom: 2em;
}

/*
 * jQuery UI spinner 1.10.0
 *
* Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  padding: 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 22px;
}

.ui-spinner-button {
  width: 16px;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

.ui-spinner a.ui-spinner-button {
  border-top: none;
  border-bottom: none;
  border-right: none;
} /* more specificity required here to overide default borders */
.ui-spinner .ui-icon {
  position: absolute;
  margin-top: -8px;
  top: 50%;
  left: 0;
} /* vertical centre icon */
.ui-spinner-up {
  top: 0;
}

.ui-spinner-down {
  bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
  /* need to fix icons sprite */
  background-position: -65px -16px;
}

/*
 * jQuery UI Dialog 1.10.0
 *
 * Copyright 2013, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Dialog#theming
 */
.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  width: 300px;
  overflow: hidden;
  outline: 0;
  background-clip: padding-box;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  /*left: 50%;
  margin-left: -280px;*/
  outline: medium none;
  position: fixed;
  /*top: 10%;
  width: 560px;*/
  z-index: 1050;
}

.ui-dialog .ui-dialog-titlebar { /*padding: .4em 1em;*/
  position: relative;
  padding: 5px 15px;
  border: 0px 0px 0px 1px solid;
  border-color: white;
  padding: 5px 15px;
  font-size: 18px;
  text-decoration: none;
  background: none;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -khtml-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -khtml-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom: 1px solid #ccc;
}

.ui-dialog .ui-dialog-title {
  float: left;
  color: #404040;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 19px;
  margin: -20px 0 0 0;
  padding: 1px;
  height: 18px;
  font-size: 20px;
  font-weight: bold;
  line-height: 13.5px;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=25);
  -khtml-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
  background: none;
  border-width: 0;
  border: none;
  box-shadow: none;
}

.ui-dialog .ui-dialog-titlebar-close span {
  display: block;
  margin: 1px;
  text-indent: 9999px;
}

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
  padding: 1px;
  filter: alpha(opacity=90);
  -khtml-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
  zoom: 1;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin: 0.5em 0 0 0;
  background-color: #f5f5f5;
  padding: 5px 15px 5px;
  border-top: 1px solid #ddd;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
  -moz-box-shadow: inset 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
  zoom: 1;
  margin-bottom: 0;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-se {
  width: 14px;
  height: 14px;
  right: 3px;
  bottom: 3px;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/*
 * jQuery UI Slider 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

/*
 * jQuery UI Tabs 1.9.2
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://jqueryui.com/tabs/
 */
.ui-tabs .ui-tabs-nav {
  background: none;
  border-color: #ddd;
  border-style: solid;
  border-width: 0 0 1px;
}

.ui-tabs {
  position: relative;
  padding: 0.2em;
  zoom: 1;
  border: 0px;
} /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav li:hover, .ui-tabs .ui-tabs-nav li a:hover {
  background: whiteSmoke;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0px;
  color: #00438A;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
  border-bottom: 1px solid #DDD;
}

.ui-tabs .ui-tabs-nav li {
  text-decoration: none;
  list-style: none;
  float: left;
  position: relative;
  top: 1px;
  padding: 0px 0px 1px 0px;
  white-space: nowrap;
  background: none;
  border: 0px;
}

.ui-tabs-nav .ui-state-default {
  -webkit-box-shadow: 0px 0px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 0px 0px #ffffff; /* FF3.5 - 3.6 */
  box-shadow: 0px 0px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

.ui-tabs .ui-tabs-nav li a {
  float: left;
  text-decoration: none;
  cursor: text;
  padding: 0 15px;
  margin-right: 2px;
  line-height: 34px;
  border: 1px solid transparent;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: 0;
  padding-bottom: 0px;
  outline: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-bottom-color: #ffffff;
  cursor: default;
  color: gray;
  outline: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
  background-color: #ffffff;
  outline: none;
  border: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active:hover {
  background: #ffffff;
  outline: none;
  margin-bottom: 0px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
  cursor: text;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
  cursor: pointer;
  color: #0069D6;
  background: none;
  font-weight: normal;
  margin-bottom: -1px;
}

/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

.ui-tabs-panel .ui-button {
  text-decoration: none;
}

.ui-tabs .ui-tabs-hide {
  display: none !important;
}

/* IE fix for background inheritance from ui-widget*/
.ui-tabs .ui-tabs-nav li {
  filter: none;
}

/*
 * jQuery UI Tooltip 1.9.0
 *
 * Copyright 2012-10-11, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://jqueryui.com/tooltip/
 */
.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -o-box-shadow: 0 0 5px #ddd;
  -moz-box-shadow: 0 0 5px #ddd;
  -webkit-box-shadow: 0 0 5px #ddd;
  /*box-shadow: 0 2px 5px #ddd;*/
  box-shadow: inset 0 1px 0 #ffffff;
}

body .ui-tooltip {
  border-width: 2px;
}

/*
 * jQuery UI Datepicker 1.9.0
 *
 * Copyright 2012-10-11, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://jqueryui.com/datepicker/
 */
.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
  border: 0px;
  font-weight: bold;
  width: 100%;
  padding: 4px 0;
  background-color: #f5f5f5;
  color: #808080;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { /*top: 1px;*/ }

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover { /*left:1px;*/ }

.ui-datepicker .ui-datepicker-next-hover { /*right:1px;*/ }

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span, .ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0em;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
  display: none; /*sorry for IE5*/
  display/**/: block; /*sorry for IE5*/
  position: absolute; /*must have*/
  z-index: -1; /*must have*/
  filter: mask(); /*must have*/
  top: -4px; /*must have*/
  left: -4px; /*must have*/
  width: 200px; /*must have*/
  height: 200px; /*must have*/
}

.ui-datepicker th {
  font-weight: bold;
  color: gray;
}

.ui-datepicker-today a:hover {
  background-color: #808080;
  color: #ffffff;
}

.ui-datepicker-today a {
  background-color: #BFBFBF;
  cursor: pointer;
  padding: 0 4px;
  margin-bottom: 0px;
}

.ui-datepicker td a {
  margin-bottom: 0px;
  border: 0px;
}

.ui-datepicker td:hover {
  color: #ffffff;
}

.ui-datepicker td .ui-state-default {
  border: 0px;
  background: none;
  margin-bottom: 0px;
  padding: 5px;
  color: gray;
  text-align: center;
  filter: none;
}

.ui-datepicker td .ui-state-active {
  background: #BFBFBF;
  margin-bottom: 0px;
  font-size: normal;
  text-shadow: 0px;
  color: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.ui-datepicker td .ui-state-hover {
  color: #ffffff;
  background: #0064cd;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

/*
 * jQuery UI Progressbar 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Progressbar#theming
 */
.ui-progressbar {
  height: 2em;
  text-align: left;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
  /*this can be removed if ui-widget-header is blue*/
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

/*** Input field styling from Bootstrap **/
input, textarea {
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input:focus, textarea:focus {
  outline: 0;
  border-color: rgba(82, 168, 236, 0.8);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

input[type=file]:focus, input[type=checkbox]:focus, select:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: 1px dotted #666;
}

input[type=text],
input[type=password],
.ui-autocomplete-input,
textarea,
.uneditable-input {
  display: inline-block;
  padding: 4px;
  font-size: 13px;
  line-height: 18px;
  color: #808080;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/**Toolbar**/
.ui-toolbar {
  padding: 7px 14px;
  margin: 0 0 18px;
  background-color: #f5f5f5;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
  background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
  background-image: linear-gradient(top, #ffffff, #f5f5f5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
  -moz-box-shadow: inset 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
}

/***Dialog fixes**/
.ui-dialog-buttonset .ui-button:nth-child(2) {
  cursor: pointer;
  display: inline-block;
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  padding: 5px 14px 6px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #333;
  font-size: 13px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  -ms-transition: 0.1s linear all;
  -o-transition: 0.1s linear all;
  transition: 0.1s linear all;
  overflow: visible;
}

/***Wijmo Theming**/
div.wijmo-wijmenu {
  padding: 0 20px;
  background-color: #222;
  background-color: #222222;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.wijmo-wijmenu .ui-state-default {
  box-shadow: none;
  color: #BFBFBF;
}

.wijmo-wijmenu .ui-state-default .wijmo-wijmenu-text {
  color: #BFBFBF;
}

.wijmo-wijmenu .ui-state-hover {
  background: #444;
  background: rgba(255, 255, 255, 0.05);
}

.wijmo-wijmenu .ui-state-hover .wijmo-wijmenu-text {
  color: #ffffff;
}

div.wijmo-wijmenu .ui-widget-header h3 {
  position: relative;
  margin-top: 1px;
  padding: 0;
}

.wijmo-wijmenu h3 a {
  color: #FFFFFF;
  display: block;
  float: left;
  font-size: 20px;
  font-weight: 200;
  line-height: 1;
  margin-left: -20px;
  margin-top: 1px;
  padding: 8px 20px 12px;
}

.wijmo-wijmenu h3 a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  text-decoration: none;
}

.wijmo-wijmenu .ui-widget-header {
  border: 0px;
}

.wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child {
  padding: 0.3em 0;
}

div.wijmo-wijmenu .wijmo-wijmenu-item .wijmo-wijmenu-child {
  background: #333;
  border: 0;
  margin: 0;
  padding: 6px 0;
  width: 160px;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

div.wijmo-wijmenu .wijmo-wijmenu-item {
  margin: 0;
  border: 0;
}

.wijmo-wijmenu a.wijmo-wijmenu-link {
  margin: 0;
  line-height: 19px;
  padding: 10px 10px 11px;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

div.wijmo-wijmenu .wijmo-wijmenu-child .wijmo-wijmenu-link {
  display: block;
  float: none;
  padding: 4px 15px;
  width: auto;
}

div.wijmo-wijmenu .wijmo-wijmenu-child .wijmo-wijmenu-text {
  float: none;
}

.wijmo-wijmenu .wijmo-wijmenu-item .wijmo-wijmenu-child .ui-state-hover {
  background: #191919;
}

.wijmo-wijmenu .wijmo-wijmenu-item .wijmo-wijmenu-separator {
  padding: 5px 0;
  background-image: none;
  background-color: #222;
  border-top: 1px solid #444;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

.wijmo-wijmenu .wijmo-wijmenu-item input {
  -moz-transition: none 0s ease 0s;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid #111111;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--sans);
  line-height: 1;
  margin: 5px 10px 0 10px;
  padding: 4px 9px;
  width: 100px;
}

.wijmo-wijmenu .wijmo-wijmenu-item input:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

.wijmo-wijmenu .wijmo-wijmenu-item input:focus {
  background-color: #FFFFFF;
  border: 0 none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  color: #404040;
  outline: 0 none;
  padding: 5px 10px;
  text-shadow: 0 1px 0 #FFFFFF;
}

.wijmo-wijmenu .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  text-shadow: none;
}

.wijmo-wijmenu .ui-state-default {
  box-shadow: none;
  color: #BFBFBF;
  filter: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- atmosphere ---- */
.atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.atmo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% -10%, var(--glow-1), transparent 55%), radial-gradient(90% 55% at 85% 108%, var(--glow-2), transparent 60%), radial-gradient(80% 60% at 8% 100%, var(--glow-3), transparent 60%);
}

.atmo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, var(--scan-color) 3px, rgba(0, 0, 0, 0) 4px);
  opacity: var(--scan-opacity);
  mix-blend-mode: multiply;
}

.wrap {
  position: relative;
  z-index: 1;
}

.wrap a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--rust);
  color: #140b06;
}

/* =====================  HUD TOP BAR  ===================== */
.hud {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--hud-bg);
  border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(6px);
}

.hud-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding: 0 22px;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.8vw, 12px);
  align-self: stretch;
  flex: 0 0 auto;
  width: 210px;
}

.brand .mascot {
  height: 100%;
  width: auto; /* fill the full HUD-bar height */
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(63, 217, 200, 0.3));
}

.brand .mark {
  font-family: "Fought", var(--sans);
  font-size: clamp(31px, 2.5vw, 38px);
  line-height: 0.8;
  letter-spacing: 2px;
  color: var(--rust);
  text-shadow: 0 0 16px rgba(255, 91, 30, 0.4), 0 2px 0 rgba(90, 28, 7, 0.4);
}

nav.main {
  display: flex;
  justify-content: flex-start;
  gap: 2px;
  margin-left: 0;
  flex: 1 1 auto;
  min-width: 0;
}

nav.main a {
  font-family: "Bebas", var(--sans);
  font-size: 18px;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
  padding: 8px 12px 6px;
  position: relative;
  transition: color 0.18s;
  white-space: nowrap;
}

nav.main a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

nav.main a:hover, nav.main a:focus-visible {
  color: var(--ink);
  outline: none;
}

nav.main a:hover::after, nav.main a:focus-visible::after {
  transform: scaleX(1);
}

nav.main a.active {
  color: var(--rust);
}

nav.main a.active::after {
  transform: scaleX(1);
}

/* HUD search form — scoped to .hud so it never bleeds into the /search results
   page's own <div class="search"> (both share the class; HUD is a <form>). */
.hud .search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ground-2);
  border: 1px solid var(--edge);
  padding: 6px 10px;
  margin: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.hud .search svg {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

.hud .search input {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  width: clamp(70px, 6.5vw, 100px);
  outline: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.hud .search input:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* focus indicator: highlight the whole clipped box border rust (the input itself
   is borderless), instead of the generic offset outline ring that looked odd
   floating around the angled box. */
.hud .search:focus-within {
  border-color: var(--rust);
}

.hud .search input::placeholder {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}

.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 31px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--edge-hot);
  padding: 0 clamp(8px, 0.75vw, 12px);
  transition: all 0.18s;
  white-space: nowrap;
}

.btn-login:hover {
  border-color: var(--rust);
  color: var(--rust);
  text-decoration: none;
}

.btn-join {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #170c05;
  background: var(--rust);
  padding: 8px 13px;
  transition: all 0.18s;
  white-space: nowrap;
}

.btn-join:hover {
  background: var(--rust-deep);
  color: #fff;
  text-decoration: none;
}

.btn-login .badge-notify {
  color: var(--rust);
}

.btn-login .fa-user,
.btn-login .fa-bell,
.btn-login .fa-wrench {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
}

.btn-login .fa-bell {
  font-size: 13px;
}

.btn-admin.pending {
  border-color: rgba(255, 91, 30, 0.55);
}

.btn-admin.pending .badge-notify {
  color: var(--rust);
  font-weight: 700;
  line-height: 1;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--edge-hot);
  padding: 6px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}

.btn-icon svg {
  width: 15px;
  height: 15px;
}

.btn-icon.lbl {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
}

.btn-icon:hover, .btn-icon:focus-visible {
  border-color: var(--rust);
  color: var(--rust);
  outline: none;
}

/* mobile controls */
.burger {
  display: none;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--edge-hot);
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: background 0.18s;
}

.burger:hover span, .burger:focus-visible span {
  background: var(--rust);
}

.burger:focus-visible {
  outline: none;
  border-color: var(--rust);
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--edge);
  background: var(--hud-bg);
  padding: 12px 22px 18px;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu nav a {
  font-family: "Bebas", var(--sans);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 10px 2px;
  border-bottom: 1px solid var(--edge);
}

.mobile-menu nav a.active {
  color: var(--rust);
}

.mobile-menu nav a:hover {
  color: var(--ink);
}

.mobile-menu .search.m {
  display: flex;
  width: 100%;
  margin-top: 14px;
}

.mobile-menu .search.m input {
  width: 100%;
}

.mobile-menu .m-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.mobile-menu .m-actions .btn-login,
.mobile-menu .m-actions .btn-join,
.mobile-menu .m-actions .btn-icon {
  flex: 1;
  text-align: center;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 981px) and (max-width: 1120px) {
  .admin-hud nav.main, .admin-hud .hud-tools {
    display: none;
  }
  .admin-hud .burger {
    display: flex;
  }
  .admin-hud.nav-open .mobile-menu {
    display: block;
  }
}
/* =====================  BUTTONS (global .btn reskin)  ===================== */
/* Bootstrap's .btn is a light gradient pill — reskin every button to the flat
   angular HUD look so bare .btn (admin nav, edit/destroy manage links, etc.)
   stops falling back to Bootstrap. Placed before the context rules (modal /
   form-actions / #comments / .btn-info) so those still layer on top. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.4;
  padding: 7px 13px;
  margin-bottom: 0;
  background: var(--ground-2);
  background-image: none;
  border: 1px solid var(--edge);
  border-radius: 0;
  color: var(--ink-dim);
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn:hover, .btn:focus {
  background: var(--ground-2);
  background-image: none;
  border-color: var(--rust);
  color: var(--rust);
  text-decoration: none;
  outline: none;
}

.btn.btn-mini, .btn.btn-small {
  padding: 4px 9px;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.btn.btn-large {
  padding: 10px 20px;
  font-size: 12px;
}

.btn.btn-danger {
  border-color: var(--blood);
  color: var(--blood);
}

.btn.btn-danger:hover {
  background: var(--blood);
  border-color: var(--blood);
  color: #fff;
}

.btn.btn-success {
  background: var(--rust);
  border-color: var(--rust);
  color: #170c05;
}

.btn.btn-success:hover {
  background: var(--rust-deep);
  border-color: var(--rust-deep);
  color: #fff;
}

.btn.btn-primary {
  border-color: var(--rust);
  color: var(--rust);
}

.btn.btn-primary:hover {
  background: var(--rust);
  border-color: var(--rust);
  color: #170c05;
}

.btn.disabled, .btn[disabled] {
  opacity: 0.45;
  border-color: var(--edge);
  color: var(--ink-faint);
  cursor: default;
}

.btn.disabled:hover, .btn[disabled]:hover {
  background: var(--ground-2);
  border-color: var(--edge);
  color: var(--ink-faint);
}

.hud-tools {
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.9vw, 14px);
  flex: 0 0 auto;
}

/* =====================  MAIN GRID  ===================== */
.grid {
  max-width: var(--maxw);
  margin: 30px auto 0;
  padding: 0 22px 60px;
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 34px;
  align-items: start;
}

.grid.full {
  grid-template-columns: 1fr;
}

/* Let the content/rail tracks shrink below their content's min-content so a wide
   child (full-article code blocks, the inline-flex paginator, long tokens) can't
   blow the 1fr track past the viewport. */
.grid > main, .grid > aside {
  min-width: 0;
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.sec-head h2 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--ink);
}

.sec-head .idx {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--rust);
  text-transform: uppercase;
}

.sec-head .line {
  flex: 1;
  height: 1px;
  background: var(--edge);
  align-self: center;
}

/* feed */
.feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card {
  position: relative;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--type-c, var(--rust));
  padding: 20px 24px 18px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.card:hover {
  border-color: var(--edge-hot);
  border-left-color: var(--type-c, var(--rust));
  transform: translateX(3px);
  box-shadow: var(--card-shadow);
}

.card .kicker, .article .kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.article .kicker a {
  color: var(--ink-dim);
}

.article .kicker a:hover {
  color: var(--rust);
}

.tagchip {
  color: var(--type-c, var(--rust));
  border: 1px solid currentColor;
  padding: 2px 7px;
  letter-spacing: 0.18em;
}

.tagchip.pin {
  color: var(--blood);
}

.card h3 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: var(--ink);
  transition: color 0.18s;
}

.card.pinned h3 {
  font-size: 32px;
}

.card:hover h3 {
  color: var(--type-c, var(--rust));
}

.card p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 70ch;
}

.card.pinned p {
  color: var(--ink-strong);
  font-size: 16px;
}

.card .foot, .article .foot,
.download .foot, .quote-show .foot, .questionnaire-show .foot, .clan .foot, .information .foot,
.screens .foot {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* card with screenshot-style media: kicker spans the top, thumb + body below */
.card.media {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 22px;
  align-items: start;
}

.card.media > .kicker {
  grid-column: 1/-1;
}

.shot {
  aspect-ratio: 4/3;
  border: 1px solid var(--edge-hot);
  position: relative;
  overflow: hidden;
  background: radial-gradient(70% 90% at 30% 20%, rgba(63, 217, 200, 0.32), transparent 60%), radial-gradient(80% 80% at 90% 100%, rgba(255, 91, 30, 0.35), transparent 55%), linear-gradient(135deg, #1c2b2c, #241410);
  margin-bottom: 8px;
}

.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seeall {
  margin-top: 24px;
  display: flex;
  gap: 22px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seeall a {
  color: var(--ink-dim);
  border-bottom: 1px dashed var(--edge-hot);
  padding-bottom: 3px;
  transition: color 0.18s, border-color 0.18s;
}

.seeall a:hover {
  color: var(--rust);
  border-color: var(--rust);
}

/* shared metric chips (votes / comments) — one icon set everywhere */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.pill svg {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.pill.up {
  color: var(--rail);
}

.pill.cm {
  color: var(--ink-dim);
}

.pill a {
  color: inherit;
  padding: 0;
  margin: 0;
  background: none;
}

.pill a:hover {
  color: var(--rust);
  text-decoration: none;
}

.pill i.fa {
  display: none;
}

.pill a.voted {
  color: var(--gold);
}

.pill a::after {
  content: "";
  position: absolute;
  inset: -6px -5px;
}

.card .foot .more {
  margin-left: auto;
  color: var(--type-c, var(--rust));
  letter-spacing: 0.12em;
}

/* =====================  SHARED BODY CHROME  ===================== */
/* Breadcrumbs (application/_breadcrumbs) — mono HUD trail with a rail home
   glyph, chevron dividers, rust active crumb, and an optional action button
   (e.g. news "Dodaj newsa") pushed to the right. */
.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 0;
  /* reset the legacy Bootstrap .breadcrumb box (border + bg + radius) fully */
  border: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  border-radius: 0;
  box-shadow: none;
  /* legacy Bootstrap sets `text-shadow: 0 1px 0 #fff` on .breadcrumb, which
     inherits to every crumb and glows white on the dark theme. */
  text-shadow: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-faint);
  text-shadow: none;
}

.breadcrumb li a {
  color: var(--ink-dim);
  transition: color 0.15s;
}

.breadcrumb li a:hover, .breadcrumb li a:focus-visible {
  color: var(--rust);
  text-decoration: none;
}

.breadcrumb li.active a {
  color: var(--rust);
}

/* drop the leading home glyph — the "Główna" crumb already covers it */
.breadcrumb li:first-child:has(.fa-home) {
  display: none;
}

.breadcrumb .divider {
  display: inline-flex;
  color: var(--ink-faint);
  opacity: 0.55;
}

.breadcrumb .divider i {
  font-size: 8px;
}

/* right-aligned action button in the breadcrumb row (replaces the old Atom pill) */
.breadcrumb .action-new {
  margin: 0 0 0 auto;
}

/* Page header (content_for :header widget) — icon + Bebas title, like sec-head. */
.page-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}

.page-head i.fa {
  color: var(--rust);
  font-size: 19px;
}

.page-head h3 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

/* Flashes (application/_flashes) — angular mono bars, left accent by kind. */
.wrap > .alert {
  position: relative;
  max-width: calc(var(--maxw) - 44px);
  margin: 22px auto -8px;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rust);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  padding: 13px 40px 13px 16px;
  text-shadow: none;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.wrap > .alert.alert-success, .wrap > .alert.alert-notice {
  border-left-color: var(--rail);
}

.wrap > .alert.alert-error, .wrap > .alert.alert-alert {
  border-left-color: var(--blood);
}

.wrap > .alert.alert-warning {
  border-left-color: var(--gold);
}

.wrap > .alert .close {
  position: absolute;
  top: 9px;
  right: 13px;
  padding: 0;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  transition: color 0.15s;
}

.wrap > .alert .close:hover, .wrap > .alert .close:focus-visible {
  color: var(--rust);
}

/* Modals (register / markdown help) — reskin Bootstrap's fixed dialog as an
   angular console panel; positioning still comes from the legacy modal CSS. */
.modal {
  background: var(--card-grad);
  border: 1px solid var(--edge-hot);
  color: var(--ink);
  box-shadow: var(--card-shadow);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.modal.hide {
  display: none;
}

.modal-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255, 91, 30, 0.06), transparent);
}

.modal-header h3 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

.modal-header .close {
  float: right;
  padding: 0;
  margin: -2px 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 20px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  transition: color 0.15s;
}

.modal-header .close:hover, .modal-header .close:focus-visible {
  color: var(--rust);
}

.modal-body {
  padding: 18px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-dim);
}

.modal-body h4 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 16px 0 6px;
}

.modal-body ul {
  margin: 0 0 10px;
}

.modal-body a {
  color: var(--rust);
}

.modal-body a:hover {
  color: var(--rust-deep);
  text-decoration: underline;
}

.modal-body .help-inline {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--edge);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.modal-footer .btn, .modal-body .btn {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--edge-hot);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-shadow: none;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.modal-footer .btn:hover, .modal-footer .btn:focus-visible {
  border-color: var(--rust);
  color: var(--rust);
}

.modal-footer .btn.pull-left {
  margin-right: auto;
}

.modal-footer .btn-success {
  background: var(--rust);
  border-color: var(--rust);
  color: #170c05;
}

.modal-footer .btn-success:hover, .modal-footer .btn-success:focus-visible {
  background: var(--rust-deep);
  border-color: var(--rust-deep);
  color: #fff;
}

/* Tooltip + popover bubbles for the jQuery shims (assets/shims/bootstrap-
   tooltip.js / bootstrap-popover.js). Styled as angular HUD chips on the dark
   panel rather than Bootstrap's rounded black tooltip. Positioning (top/left)
   is set inline by the shim; these rules own the look + fade. */
.tooltip, .popover {
  position: absolute;
  z-index: 1070;
  display: block;
  opacity: 0;
  transition: opacity 0.15s linear;
}

.tooltip.in, .popover.in {
  opacity: 1;
}

/* ---- tooltip -------------------------------------------------------------- */
.tooltip {
  padding: 5px 0;
}

.tooltip-inner {
  max-width: 220px;
  padding: 6px 9px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--edge-hot);
  box-shadow: var(--card-shadow);
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: var(--edge-hot);
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: var(--edge-hot);
}

.tooltip.left .tooltip-arrow {
  right: 0;
  top: 50%;
  margin-top: -5px;
  border-left-color: var(--edge-hot);
}

.tooltip.right .tooltip-arrow {
  left: 0;
  top: 50%;
  margin-top: -5px;
  border-right-color: var(--edge-hot);
}

/* ---- popover -------------------------------------------------------------- */
.popover {
  max-width: 276px;
  padding: 1px;
  font-family: var(--sans);
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--edge-hot);
  box-shadow: var(--card-shadow);
}

.popover-title {
  margin: 0;
  padding: 8px 12px;
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255, 91, 30, 0.06), transparent);
}

.popover-content {
  padding: 9px 12px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.popover-content img {
  max-width: 100%;
  height: auto;
}

.popover .arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

.popover.top .arrow {
  bottom: -12px;
  left: 50%;
  margin-left: -6px;
  border-top-color: var(--edge-hot);
}

.popover.bottom .arrow {
  top: -12px;
  left: 50%;
  margin-left: -6px;
  border-bottom-color: var(--edge-hot);
}

.popover.left .arrow {
  right: -12px;
  top: 50%;
  margin-top: -6px;
  border-left-color: var(--edge-hot);
}

.popover.right .arrow {
  left: -12px;
  top: 50%;
  margin-top: -6px;
  border-right-color: var(--edge-hot);
}

/* =====================  RIGHT RACK  ===================== */
/* The rack scrolls with the page. It used to be `position: sticky; top: 80px`,
   but the rack is often taller than the viewport (long activity console), so it
   pinned near the top and stayed fixed for most of a long article before
   releasing — reading as a laggy sidebar. Plain flow scrolls 1:1 with content. */
.rack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mod {
  background: var(--card-grad);
  border: 1px solid var(--edge);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.mod-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255, 91, 30, 0.06), transparent);
}

.mod-head .tick {
  width: 6px;
  height: 14px;
  background: var(--rust);
  box-shadow: 0 0 8px var(--rust);
}

.mod-head h4 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.1em;
  margin: 0;
  color: var(--ink);
  flex: 1;
}

.mod-head .hint {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.mod-body {
  padding: 15px;
}

/* activity console */
.console {
  padding: 6px 0;
}

.console .line {
  display: block;
  padding: 8px 15px;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.console .line:hover {
  background: rgba(255, 91, 30, 0.06);
  border-left-color: var(--rust);
}

.console .who {
  color: var(--rail);
}

.console .act {
  color: var(--ink-faint);
}

.console .subj {
  color: var(--ink);
}

.console .when {
  color: var(--ink-faint);
  font-size: 10px;
}

.console .cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--rust);
  margin-left: 2px;
  vertical-align: -2px;
  opacity: 0.8;
}

.console .tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--edge);
  margin-bottom: 4px;
}

.console .tabs button {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  color: var(--ink-faint);
  cursor: pointer;
  background: transparent;
  border: 0;
  line-height: 1;
}

.console .tabs button:hover {
  color: var(--ink);
}

.console .tabs .on {
  color: var(--rust);
  border-bottom: 2px solid var(--rust);
}

/* quote */
.quote blockquote {
  margin: 0;
  font-family: var(--sans);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-strong);
  padding-left: 16px;
  border-left: 2px solid var(--rust-deep);
}

/* the quote links to its show page (like the comment count) — inherit the serif
   body colour and warm to rust on hover so it reads as clickable. */
.quote blockquote a {
  color: inherit;
  transition: color 0.15s;
}

.quote blockquote a:hover {
  color: var(--rust);
  text-decoration: none;
}

.quote .src {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 12px 0 0;
  word-break: break-all;
}

.quote .who {
  color: var(--rail);
}

/* shared metric foot (quote + poll) */
.qfoot {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
}

/* poll */
.poll .q {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
}

.poll label,
.poll .answer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
  padding: 9px 11px;
  border: 1px solid var(--edge);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.poll label:hover,
.poll .answer:hover {
  border-color: var(--rust);
  color: var(--ink);
  background: rgba(255, 91, 30, 0.06);
  text-decoration: none;
}

.poll label .box,
.poll .answer .box {
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-faint);
  flex: none;
}

.poll .answer.results {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.poll .poll-results {
  display: grid;
  gap: 12px;
}

.poll .result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}

.poll .result-percent {
  flex: none;
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.poll .result-track {
  height: 4px;
  margin-top: 6px;
  background: var(--line);
  overflow: hidden;
}

.poll .result-fill {
  display: block;
  height: 100%;
  background: var(--rust);
}

.poll .summary {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 12px 0 0;
}

.poll input {
  position: absolute;
  opacity: 0;
}

.poll label:has(input:checked) {
  border-color: var(--rust);
  color: var(--ink);
}

.poll .vote {
  margin-top: 6px;
  width: 100%;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #170c05;
  background: var(--rust);
  border: 0;
  padding: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.poll .vote:hover {
  background: var(--rust-deep);
  color: #fff;
}

/* =====================  FULL ARTICLE (content show / index)  ===================== */
/* Full-content panel shared by the news index list and the news/article show
   page — same angular language as .card but no hover-translate (long bodies)
   and a full-width serif body. The type spine reads --type-c (set inline). */
.article {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 22px 26px 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.article .a-title {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.03;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}

.article.pinned .a-title {
  font-size: 36px;
}

.article .a-title a {
  color: inherit;
  transition: color 0.18s;
}

.article .a-title a:hover {
  color: var(--type-c, var(--rust));
}

.article > .foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}

/* source footer (Źródło:) */
.article > footer {
  margin: 14px 0 0;
}

.article > footer .muted {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0;
  font-style: normal;
}

.article > footer .muted em {
  font-style: normal;
}

.article > footer a {
  color: var(--rail);
}

.article > footer a:hover {
  color: var(--rust);
}

/* manage links (edit/destroy) pushed to the top-right corner. Shared by every
   content show that carries a span.manage — news/article, download, quote,
   screenshot, CMS page — so edit/destroy read identically everywhere. The
   containers must be positioned for the absolute placement to anchor
   (download/article already are; quote-show/screens/page set below). */
.quote-show, .screens, .page {
  position: relative;
}

.article .manage, .download .manage, .quote-show .manage, .screens .manage, .page .manage {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article .manage a, .download .manage a, .quote-show .manage a, .screens .manage a, .page .manage a {
  color: var(--ink-faint);
  border: 1px solid var(--edge-hot);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.15);
  transition: color 0.15s, border-color 0.15s;
}

.article .manage a:hover, .download .manage a:hover, .quote-show .manage a:hover, .screens .manage a:hover, .page .manage a:hover {
  color: var(--rust);
  border-color: var(--rust);
  text-decoration: none;
}

/* keep the always-visible flex layout even while the card is hovered: a legacy
   rule (main.sass) flips .manage to display:inline-block on :hover, which
   reflows the buttons and makes them flicker on hover-enter. */
.article:hover .manage, .download:hover .manage, .quote-show:hover .manage, .screens:hover .manage, .page:hover .manage {
  display: flex;
}

/* delete: solid danger fill on hover so the label stays readable — blood-red
   text on the tinted button was unreadable. */
.article .manage .btn-danger:hover, .download .manage .btn-danger:hover, .quote-show .manage .btn-danger:hover, .screens .manage .btn-danger:hover, .page .manage .btn-danger:hover {
  background: var(--blood);
  border-color: var(--blood);
  color: #fff;
}

/* rendered markdown body — shared by the news .a-body and the article show
   .article .content (and reused for further rendered bodies). */
.a-body, .article .content {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-strong);
}

.a-body p, .article .content p {
  margin: 0 0 14px;
}

.a-body a, .article .content a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.a-body a:hover, .article .content a:hover {
  border-bottom-color: var(--rust);
}

.a-body h1, .a-body h2, .a-body h3, .a-body h4,
.article .content h1, .article .content h2, .article .content h3, .article .content h4 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 22px 0 10px;
  line-height: 1.1;
}

.a-body h1, .article .content h1 {
  font-size: 26px;
}

.a-body h2, .article .content h2 {
  font-size: 23px;
}

.a-body h3, .article .content h3 {
  font-size: 20px;
}

.a-body h4, .article .content h4 {
  font-size: 18px;
}

.a-body ul, .a-body ol, .article .content ul, .article .content ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

/* line-height here overrides the reset's `li { line-height: 18px }`, which
   otherwise leaks into loose-list <li><p>… paragraphs and cramps them. */
.a-body li, .article .content li {
  margin: 3px 0;
  line-height: 1.62;
}

.a-body img, .article .content img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--edge-hot);
  margin-bottom: 14px;
}

.a-body blockquote, .article .content blockquote {
  margin: 0 0 14px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--rust-deep);
  color: var(--ink-dim);
  font-style: italic;
}

.a-body pre, .a-body code, .article .content pre, .article .content code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--ground-2);
  border: 1px solid var(--edge);
}

.a-body code, .article .content code {
  padding: 1px 5px;
}

.a-body pre, .article .content pre {
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: 0;
}

.a-body pre code, .article .content pre code {
  border: 0;
  padding: 0;
  background: none;
}

.a-body hr, .article .content hr {
  border: 0;
  border-top: 1px solid var(--edge);
  margin: 20px 0;
}

/* =====================  ARTICLES (index rows + show)  ===================== */
/* Index: search box + compact .media rows (avatar · Bebas title · serif
   preview · mono info line) on the rail spine. */
.article_search {
  margin: 0;
}

.article_search input, input.search-query {
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 0 18px;
  background: var(--panel);
  border: 1px solid var(--edge-hot);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  padding: 10px 13px;
}

.article_search input:focus, input.search-query:focus {
  border-color: var(--rust);
  outline: none;
  box-shadow: none;
}

/* Index search boxes (downloads / articles / clans / screens): icon + field
   (reuses .input-prepend/.add-on), capped width, flush against the icon box so
   it reads as one control rather than blending into the page. Keyed on the
   shared .search-query so every index search is identical. */
.input-prepend:has(.search-query) {
  max-width: 380px;
  margin: 0 0 18px;
}

.input-prepend .search-query {
  margin: 0;
}

/* Focus: highlight the whole control (icon box + field) rust, so the prepended
   icon border matches the field instead of staying edge-colored. !important
   beats bootswatch's `input[type=text]:focus { border-color:#f89406!important }`
   which would otherwise leave the field a mismatched orange. */
.input-prepend:has(.search-query):focus-within .add-on,
.input-prepend:has(.search-query):focus-within .search-query {
  border-color: var(--rust) !important;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.article-list .media {
  position: relative;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 15px 18px;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rail);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: border-color 0.2s, transform 0.2s;
}

.article-list .media:hover {
  border-color: var(--edge-hot);
  transform: translateX(3px);
}

.article-list .media img, .article-list .media .media-object {
  float: none;
  width: 52px;
  height: 52px;
  flex: none;
  margin: 0;
  object-fit: cover;
  border: 1px solid var(--edge-hot);
  border-radius: 0;
}

.article-list .media-body {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.article-list .media-heading {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
}

.article-list .media-heading a {
  color: var(--ink);
  transition: color 0.15s;
}

.article-list .media:hover .media-heading a {
  color: var(--rust);
}

.article-list .info {
  margin: 9px 0 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.article-list .info a {
  color: var(--rail);
}

.article-list .info a:hover {
  color: var(--rust);
  text-decoration: none;
}

.article-list .info i.fa {
  color: var(--ink-faint);
}

/* Show: the .article panel (styled above) frames title + meta + body + foot.
   The download show (.download) shares the title + nav-pills vote treatment. */
.article h3, .download h3 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 33px;
  letter-spacing: 0.02em;
  line-height: 1.04;
  margin: 0 0 8px;
  color: var(--ink);
}

/* article + download show: .manage sits inside the <h3>; let it use the shared
   absolute top-right placement (like news) and reserve title space so a long
   heading doesn't run under the buttons. */
.article h3:has(.manage), .download h3:has(.manage), .page h3:has(.manage) {
  padding-right: 176px;
}

.article > h6, .article .clearfix h6 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  margin: 0 0 14px;
}

/* "Wyświetleń: N" line. No top border of its own — it groups with the vote/
   comment .foot below, which owns the single separator; a border here too made a
   double rule stacked a few px apart. */
.article .clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

.article .clearfix h6 {
  margin: 0;
}

/* pull the separated .foot up close to the Wyświetleń line so the two read as
   one footer block rather than a stray metric far below. */
.article .clearfix + .foot {
  margin-top: 10px;
}

.article .clearfix .pull-right {
  float: none;
}

.article .nav-pills, .download .nav-pills, .quote-show .nav-pills, .questionnaire .nav-pills, .information .nav-pills {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  gap: 16px;
  box-shadow: none;
}

.article .nav-pills > li, .download .nav-pills > li, .quote-show .nav-pills > li, .questionnaire .nav-pills > li, .information .nav-pills > li {
  display: inline-flex;
}

.article .nav-pills a, .download .nav-pills a, .quote-show .nav-pills a, .questionnaire .nav-pills a, .information .nav-pills a {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--rail);
}

.article .nav-pills a:hover, .download .nav-pills a:hover, .quote-show .nav-pills a:hover, .questionnaire .nav-pills a:hover, .information .nav-pills a:hover {
  color: var(--rust);
  text-decoration: none;
}

.article .nav-pills a.voted, .download .nav-pills a.voted, .quote-show .nav-pills a.voted, .questionnaire .nav-pills a.voted, .information .nav-pills a.voted {
  color: var(--gold);
}

/* Legacy `.nav.nav-pills.small` (main.sass) paints a gray gradient box + dark
   text at (0,3,2) — higher than the panel rules above — and marks .voted
   !important. Reskin it at equal/greater specificity (later load) so vote/comment
   pills read as flat mono HUD links on every content show page (news excepted —
   it emits its own .foot pills). Removed with Bootstrap in teardown Z. */
.nav.nav-pills.small {
  float: none;
  margin: 0;
  display: flex;
  gap: 16px;
  box-shadow: none;
}

.nav.nav-pills.small li > a {
  background: none;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--rail);
}

.nav.nav-pills.small li > a:hover {
  background: none;
  background-image: none;
  color: var(--rust);
  text-decoration: none;
}

.nav.nav-pills.small li > a.voted {
  color: var(--gold) !important;
  background: none !important;
  background-image: none !important;
}

/* =====================  PAGINATION  ===================== */
.pagination {
  margin: 26px 0 0;
  text-align: left;
}

.pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.pagination li {
  display: inline-flex;
}

.pagination li a {
  display: block;
  min-width: 34px;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: var(--ground-2);
  border: 1px solid var(--edge);
  padding: 7px 11px;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.pagination li a:hover {
  color: var(--rust);
  border-color: var(--rust);
  background: var(--panel);
}

.pagination li.active a {
  color: #170c05;
  background: var(--rust);
  border-color: var(--rust);
}

.pagination li.disabled a {
  color: var(--ink-faint);
  opacity: 0.5;
  pointer-events: none;
}

/* =====================  CONTENT FORMS (simple_form / form-horizontal)  ===================== */
/* Shared by the news/article/download/quote/… new+edit forms (control-group +
   controls + form-actions). Angular fields, mono labels, rust focus. */
/* Some forms (download, questionnaire, information) group fields in <fieldset>s.
   Left as-is the browser draws a legacy rounded box border around each group,
   which looked odd and inconsistent with the borderless quote form. Strip the
   fieldset box and render the <legend> as a flush section header (mono, on the
   edge divider) so every "dodaj" form reads the same. */
form fieldset {
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

form fieldset:last-of-type {
  margin-bottom: 0;
}

form legend {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--edge);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}

.form-horizontal .control-group, form .control-group {
  margin: 0 0 16px;
}

.control-group .control-label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  width: auto;
  text-align: left;
  float: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.control-group .controls {
  margin: 0;
}

.control-group input[type=text], .control-group input[type=datetime-local],
.control-group input[type=email], .control-group input[type=password],
.control-group input[type=url], .control-group input[type=number],
.control-group textarea, .control-group select,
form.news-form input[type=text], form.news-form textarea, form.news-form select {
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--edge-hot);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 11px;
  transition: border-color 0.15s;
}

.control-group input::placeholder, form.news-form input::placeholder {
  color: var(--ink-faint);
}

.control-group textarea {
  min-height: 260px;
  font-size: 13px;
  resize: vertical;
}

.control-group input:hover, .control-group textarea:hover, .control-group select:hover {
  border-color: var(--edge-hot);
}

.control-group input:focus, .control-group textarea:focus, .control-group select:focus {
  border-color: var(--rust);
  outline: none;
  box-shadow: none;
}

/* Checkbox rows: checkbox first, its label inline to the right (the port emits
   label-before-controls markup meant for the old horizontal grid). */
.control-group:has(> .controls > input[type=checkbox]) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-group:has(> .controls > input[type=checkbox]) .control-label {
  order: 2;
  margin: 0;
}

.control-group:has(> .controls > input[type=checkbox]) .controls {
  order: 1;
  width: auto;
}

.control-group input[type=checkbox] {
  width: auto;
  height: auto;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--rust);
}

.control-group .help-inline {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--blood);
}

.form-actions, .form-horizontal .form-actions {
  margin: 24px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--edge);
  display: flex;
  gap: 10px;
  align-items: center;
  background: none;
}

.form-actions .btn, form .btn {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--edge-hot);
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  text-shadow: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.form-actions .btn:hover, form .btn:hover {
  border-color: var(--rust);
  color: var(--rust);
}

.form-actions .btn-success {
  background: var(--rust);
  border-color: var(--rust);
  color: #170c05;
}

.form-actions .btn-success:hover {
  background: var(--rust-deep);
  border-color: var(--rust-deep);
  color: #fff;
}

/* "anuluj" cancel link: a subtle mono text control that reads as intentional
   next to the bordered buttons (comment form, standalone post form, forum
   reply). Muted ink, hover rust; padding matches button height for alignment. */
a.cancel {
  display: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 9px 8px;
  cursor: pointer;
  transition: color 0.15s;
}

a.cancel:hover, a.cancel:focus-visible {
  color: var(--rust);
}

/* Validation summary shown above content forms. Keep it alongside the inline
   field errors: the summary announces the failed submission and lists every
   problem, while .help-inline keeps each message next to its field. */
main > .alert-error {
  margin: 0 0 22px;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--blood) 8%, var(--panel));
  border: 1px solid var(--edge);
  border-left: 3px solid var(--blood);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  text-shadow: none;
}

main > .alert-error ul {
  margin: 0;
  padding-left: 18px;
}

main > .alert-error li + li {
  margin-top: 3px;
}

/* =====================  TABLES (shared)  ===================== */
/* Redesign for Bootstrap `.table*` (downloads index/show, ranking, admin, …):
   mono grid, HUD-tinted header, rust hover, teal links. */
.table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  border-radius: 0;
  background: var(--panel);
  border: 1px solid var(--edge-hot);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-dim);
}

.table th, .table td {
  padding: 9px 12px;
  border: 1px solid var(--edge);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.table thead th {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: linear-gradient(180deg, rgba(255, 91, 30, 0.07), transparent);
  white-space: nowrap;
}

.table thead th a, .table .sort_link {
  color: var(--ink-dim);
}

.table thead th a:hover, .table .sort_link:hover {
  color: var(--rust);
  text-decoration: none;
}

.table .sort_link.asc, .table .sort_link.desc {
  color: var(--rust);
}

/* label column on attribute (two-column) tables — row-header <th> */
.table tbody th {
  width: 168px;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 91, 30, 0.04);
  font-weight: 400;
}

.table.table-striped tbody tr:nth-child(2n+1) {
  background: var(--panel-2);
}

/* Bootstrap paints odd-row stripes on the <td> (beats a tr-level rule); override
   at the td level. A warm token-based tint reads better than a flat black/grey
   wash on both themes. */
.table.table-striped tbody tr:nth-child(2n+1) > td {
  background: var(--panel-2);
}

.table.table-hover tbody tr:hover > td {
  background: rgba(255, 91, 30, 0.07);
}

.table a {
  color: var(--rail);
}

.table a:hover {
  color: var(--rust);
  text-decoration: none;
}

.table td p {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-dim);
}

.table td p:last-child {
  margin-bottom: 0;
}

/* On medium widths the two-column grid gives the main column less room than a
   wide multi-column table needs (its nowrap headers won't shrink), so the table
   used to overflow onto the sidebar. Wrapping it lets it scroll horizontally
   within the column instead. On narrow screens the table collapses to cards
   (below), where nothing overflows and the scroll never engages. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 18px;
}

.table-wrap .table {
  margin: 0;
}

/* =====================  DOWNLOADS (index + show)  ===================== */
/* "Dodaj …" button row. Legacy main.sass floats .action-new right (+ a fixed
   130px .add-content width), which makes the following list wrap awkwardly beside
   it. Drop the float and pin it to its own right-aligned row above the list, used
   the same way across downloads / screeny / cytaty / ankiety. */
.downloads .action-new, .action-new {
  float: none;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
  padding: 0;
}

.action-new .add-content {
  width: auto;
}

/* index header row: search box on the left, "Dodaj …" button on the right, one
   line (shared by downloads / screeny / articles). */
.index-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.index-toolbar .action-new {
  margin: 0;
}

.index-toolbar .pull-left, .index-toolbar form {
  margin: 0;
}

/* the search's .input-prepend ships an 18px bottom margin (legacy form spacing)
   that inflates the toolbar row and reads as extra padding — drop it here. */
.index-toolbar .input-prepend {
  margin-bottom: 0;
}

.btn-info, .action-new .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--rail);
  color: var(--rail);
  background: transparent;
  border-radius: 0;
  text-shadow: none;
  transition: color 0.15s, background 0.15s;
}

.btn-info:hover, .action-new .btn:hover {
  background: var(--rail);
  color: #06201d;
  text-decoration: none;
}

.downloads h5, .screens h5 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.07em;
  line-height: 1.9;
  color: var(--ink-faint);
  margin: 0 0 16px;
  text-align: center;
}

.downloads h5 a, .screens h5 a {
  color: var(--rail);
}

.downloads h5 a:hover, .screens h5 a:hover {
  color: var(--rust);
}

/* download show: angular panel frame around the attribute table */
.download {
  position: relative;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rust);
  padding: 22px 26px 20px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.download .table {
  background: none;
  margin-top: 6px;
}

/* footer bar: the shared .foot flex row (metric pills) gets its own separator so
   votes/comments sit in a defined footer like the article show. "Plik nie działa?"
   rides in the same row, pushed to the right edge via margin-left:auto. */
.download .foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}

.download .broken {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.download .broken i.fa {
  color: var(--blood);
  margin-right: 7px;
}

.download .broken a {
  color: var(--rail);
}

.download .broken a:hover {
  color: var(--rust);
}

/* screenshot gallery (download show) */
.thumbnails {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
  padding: 0;
}

.thumbnails li {
  margin: 0;
}

.thumbnails .thumbnail {
  display: block;
  padding: 3px;
  background: var(--ground-2);
  border: 1px solid var(--edge-hot);
  border-radius: 0;
  transition: border-color 0.18s, transform 0.18s;
}

.thumbnails .thumbnail:hover {
  border-color: var(--rust);
  transform: translateY(-2px);
}

.thumbnails img {
  display: block;
  max-width: 168px;
  height: auto;
}

/* .table-cards collapses to stacked cards on narrow screens (the row cells
   carry data-label; the first cell is .card-title). Keeps the wide downloads
   index off the horizontal scrollbar at phone widths. */
@media (max-width: 720px) {
  /* Collapse the whole table to block boxes. Leaving <table>/<tbody> in their
     default table display keeps the table-layout algorithm alive, which sizes
     to the cells' intrinsic width and overflows the viewport even after the
     rows themselves are stacked. Forcing block layout lets the cards flow in
     the parent's width. */
  .table-cards, .table-cards tbody {
    display: block;
  }
  .table-cards {
    border: 0;
    background: none;
    font-size: 12px;
  }
  .table-cards thead {
    display: none;
  }
  /* The forum index isn't inside .widget-content, so main.sass's card rules
     never apply; hide the forum's column-label row (tr.header) and any empty
     cells (e.g. a forum with no moderators) here so they don't dangle as
     label-only rows. */
  .table-cards tbody tr.header {
    display: none;
  }
  .table-cards tbody tr {
    display: block;
    margin: 0 0 12px;
    border: 1px solid var(--edge);
    border-left: 3px solid var(--edge-hot);
    background: var(--card-grad);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  }
  /* unread forum/topic → rust card spine (read stays neutral) */
  #forum .table-cards tbody tr:has(td.card-title.unread),
  #topics .table-cards tbody tr:has(a.unread) {
    border-left-color: var(--rust);
  }
  .table-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 14px;
    flex-wrap: wrap;
    border: 0;
    border-bottom: 1px solid var(--edge);
    padding: 8px 13px;
    text-align: right;
  }
  /* value side (everything after the ::before label) may be a long run of links
     — e.g. the moderators list. Each is its own flex item, so without wrap they
     run off-screen; wrapping keeps the card within the viewport. */
  .table-cards tbody td > * {
    min-width: 0;
  }
  .table-cards tbody td:last-child {
    border-bottom: 0;
  }
  .table-cards tbody td:empty {
    display: none;
  }
  .table-cards tbody td::before {
    content: attr(data-label);
    flex: none;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: left;
  }
  .table-cards tbody td.card-title {
    background: rgba(255, 91, 30, 0.06);
    justify-content: flex-start;
  }
  .table-cards tbody td.card-title::before {
    content: "";
    display: none;
  }
  /* the forum/topic title cell carries its own left-border spine on desktop;
     drop it on mobile so it doesn't double up with the card's left spine. */
  #forum .table-cards tbody td.card-title,
  #topics .table-cards tbody td.title.card-title {
    border-left: 0;
  }
  .table-cards tbody td.card-title a {
    font-family: "Bebas", var(--sans);
    font-size: 18px;
    letter-spacing: 0.02em;
  }
  #forum .table-cards tbody td.card-title, #topics .table-cards tbody td.title.card-title {
    flex-wrap: wrap;
  }
}
/* =====================  SCREENY (index grid + show)  ===================== */
/* Index: a responsive grid of angular thumbnail tiles; the search box reuses
   input.search-query and the filter list reuses .screens h5 (above). Show: one
   large lightbox image + mono attribute lines. */
.screens .action-new {
  margin: 0 0 14px;
}

.screens .clearfix {
  margin: 0 0 6px;
}

.screens .pull-left {
  float: none;
}

.screens ul.unstyled {
  list-style: none;
  margin: 6px 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.screens ul.unstyled li {
  margin: 0;
}

.screens ul.unstyled a {
  display: block;
  padding: 3px;
  background: var(--ground-2);
  border: 1px solid var(--edge-hot);
  transition: border-color 0.18s, transform 0.18s;
}

.screens ul.unstyled a:hover {
  border-color: var(--rust);
  transform: translateY(-2px);
}

.screens ul.unstyled img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* show: manage buttons sit in flow above the image (not overlapping it) */
.screens .manage {
  position: static;
  top: auto;
  right: auto;
  justify-content: flex-end;
  margin: 0 0 14px;
}

/* show: single large image, centered, capped width */
.screens ul.unstyled.single {
  display: block;
  margin: 0 0 20px;
  text-align: center;
}

.screens ul.unstyled.single a {
  display: inline-block;
}

.screens ul.unstyled.single img {
  max-width: 100%;
  width: auto;
}

/* .img-rounded ships from Bootstrap; strip the radius so tiles stay angular */
.img-rounded {
  border-radius: 0;
}

/* show attribute lines: mono HUD rows keyed by their fa glyph */
.screens ~ p {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  margin: 0 0 8px;
}

.screens ~ p i.fa {
  color: var(--rail);
  margin-right: 8px;
}

.screens ~ p a {
  color: var(--rail);
}

.screens ~ p a:hover {
  color: var(--rust);
}

/* vote/comment footer bar (shared .foot pills), separated from the attribute
   lines above so it reads as a defined footer like the other show pages. */
main.screens .foot {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}

/* =====================  SCREENY FILMSTRIP  ===================== */
.gallery {
  max-width: var(--maxw);
  margin: 6px auto 0;
  padding: 0 22px 8px;
}

.gallery .sec-head .see {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
}

.gallery .sec-head .see:hover {
  color: var(--rust);
}

.film-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 0 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.film {
  position: relative;
  flex: none;
  width: 268px;
  aspect-ratio: 16/10;
  border: 1px solid var(--edge);
  scroll-snap-align: start;
  overflow: hidden;
  background: linear-gradient(160deg, #16262b, #2a1610);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: border-color 0.18s, transform 0.18s;
}

.film:hover {
  border-color: var(--rust);
  transform: translateY(-3px);
}

.film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film .f-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(6, 4, 3, 0.92));
}

.film .f-cap b {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.03em;
  color: #f4ece0;
}

.film .f-cap .pill {
  color: rgba(244, 236, 224, 0.72);
  font-family: var(--sans);
  font-size: 10px;
}

.film .f-cap .pill svg {
  width: 11px;
  height: 11px;
}

/* =====================  QUOTES / QUESTIONNAIRES / INFORMATION  ===================== */
/* Standalone /cytaty, /ankiety, /information pages. <main> carries the scope class
   (quotes / questionnaires / information). Their feed/rail surfaces are done
   elsewhere; this styles the archive index lists + show panels. */
/* shared archive/add footer links: a mono link row with a hairline divider
   sitting symmetrically in the gap between items (14px each side). */
.archive-add {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
}

.archive-add li {
  margin: 0;
}

.archive-add li + li {
  border-left: 1px solid var(--edge-hot);
  padding-left: 14px;
}

.archive-add a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rail);
}

.archive-add a:hover {
  color: var(--rust);
  text-decoration: none;
}

/* index lists (quotes + questionnaires): each li is a panel on the rail spine */
main.quotes:not(.show) > ul:not(.breadcrumb), main.questionnaires:not(.show) > ul:not(.breadcrumb) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li, main.questionnaires:not(.show) > ul:not(.breadcrumb) > li {
  position: relative;
  margin: 0;
  padding: 14px 18px;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rail);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li p, main.questionnaires:not(.show) > ul:not(.breadcrumb) > li p {
  margin: 0 0 6px;
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li p:last-child, main.questionnaires:not(.show) > ul:not(.breadcrumb) > li p:last-child {
  margin-bottom: 0;
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li > p:first-child {
  font-family: var(--sans);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}

/* the whole quote is a link to its show page — inherit the serif body colour
   (not the rail link colour applied to the meta links below) and warm to rust on
   hover so the row reads as clickable. */
main.quotes:not(.show) > ul:not(.breadcrumb) > li > p:first-child a {
  color: inherit;
  transition: color 0.15s;
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li > p:first-child a:hover {
  color: var(--rust);
  text-decoration: none;
}

main.questionnaires:not(.show) > ul:not(.breadcrumb) > li > p:first-child a {
  font-family: "Bebas", var(--sans);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

main.questionnaires:not(.show) > ul:not(.breadcrumb) > li > p:first-child a:hover {
  color: var(--rust);
  text-decoration: none;
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li p:not(:first-child), main.questionnaires:not(.show) > ul:not(.breadcrumb) > li p:not(:first-child) {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li i.fa, main.questionnaires:not(.show) > ul:not(.breadcrumb) > li i.fa {
  color: var(--rail);
  margin-right: 6px;
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li a, main.questionnaires:not(.show) > ul:not(.breadcrumb) > li p:not(:first-child) a {
  color: var(--rail);
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li a:hover, main.questionnaires:not(.show) > ul:not(.breadcrumb) > li p:not(:first-child) a:hover {
  color: var(--rust);
  text-decoration: none;
}

main.quotes:not(.show) > ul:not(.breadcrumb) > li em, main.questionnaires:not(.show) > ul:not(.breadcrumb) > li em {
  font-style: normal;
}

/* Edytuj/Usuń lifted out of the quote panel to the top-right corner above it */
.quote-show .manage {
  position: static;
  top: auto;
  right: auto;
  justify-content: flex-end;
  margin: 0 0 12px;
}

/* quote show: big blockquote panel on the rust spine */
.quote-show .quote {
  position: relative;
  margin: 0;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rust);
  padding: 22px 26px 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.quote-show blockquote {
  margin: 0;
  padding: 0 0 0 16px;
  border: 0;
  border-left: 3px solid var(--edge-hot);
}

.quote-show blockquote p {
  font-family: var(--sans);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
}

.quote-show blockquote small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.quote-show .added {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: right;
  margin: 12px 0 8px;
}

.quote-show .added a {
  color: var(--rail);
}

.quote-show .added a:hover {
  color: var(--rust);
}

/* questionnaire show: question panel + voting list or results meters */
.questionnaire-show .questionnaire {
  position: relative;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rail);
  padding: 22px 26px 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.questionnaire > p:first-child {
  font-family: "Bebas", var(--sans);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}

.questionnaire > ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.questionnaire > ul > li {
  margin: 0;
}

.questionnaire a.answer {
  display: block;
  padding: 10px 14px;
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--edge-hot);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.15s, color 0.15s;
}

.questionnaire a.answer:hover {
  border-left-color: var(--rust);
  color: var(--rust);
  text-decoration: none;
}

/* results table: answer row + [percent | meter bar] row */
.questionnaire table {
  width: 100%;
  background: transparent;
  margin: 0 0 12px;
  border-collapse: collapse;
}

.questionnaire table td {
  padding: 4px 6px;
  border: 0;
}

.questionnaire tr.answer td {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  padding-top: 12px;
  font-weight: 400;
}

.questionnaire td.percent {
  width: 56px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--rail);
  white-space: nowrap;
}

/* pool.gif is a neutral-gray 1×11 bar stretched by inline width%; tint it rail-teal */
.questionnaire td img {
  display: block;
  height: 12px;
  border-radius: 0;
  filter: sepia(1) hue-rotate(120deg) saturate(6) brightness(1.05);
}

.questionnaire .summary {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-align: right;
  margin: 6px 0 0;
}

/* information show: thumb-left media panel (same spine treatment as .articles .media) */
.information {
  position: relative;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 16px 18px;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rail);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.information .thumb {
  flex: none;
  display: block;
}

.information .thumb img {
  width: 120px;
  height: auto;
  border: 1px solid var(--edge-hot);
  border-radius: 0;
}

.information header {
  flex: 1;
  min-width: 0;
}

.information header h2 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 1.06;
  margin: 0 0 6px;
}

.information header h2 a {
  color: var(--ink);
  transition: color 0.15s;
}

.information header h2 a:hover {
  color: var(--rust);
  text-decoration: none;
}

.information header p {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.information header p a {
  color: var(--rail);
}

.information header p a:hover {
  color: var(--rust);
  text-decoration: none;
}

.information .see-more {
  color: var(--rust);
}

/* =====================  FORUMS (ForumBase)  ===================== */
/* Full-width forum layout (.grid.full.forum). Driven entirely by site tokens —
   the legacy per-forum light/dark theme + "Wersja" switch is retired (hidden),
   so both forum-theme classes render the same redesign look. forum.sass +
   forum_dark.sass pruned. */
.theme-selector {
  display: none;
}

.forum .widget-content {
  background: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.container-fluid.forums, .container-fluid.topics {
  max-width: none;
  margin: 0;
  padding: 0;
}

.container-fluid.forums .widget, .container-fluid.topics .widget {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ---- index (#forum) + topic list (#topics): shared .table draws the grid; add
   forum-specific column treatments here ---- */
#forum table, #topics table {
  margin: 0 0 20px;
}

/* index section title (thead colspan) → HUD section bar */
#forum thead th {
  background: linear-gradient(90deg, var(--panel-2), var(--ground-2));
  color: var(--ink);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rust);
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
}

/* column-label rows */
#forum tr.header th, #topics thead th {
  background: var(--ground-2);
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-transform: none;
  text-align: center;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--edge);
}

#forum tr.header th:first-child, #topics thead th:first-child {
  text-align: left;
}

#forum a, #topics a {
  color: var(--rail);
}

#forum a:hover, #topics a:hover {
  color: var(--rust);
  text-decoration: none;
}

/* Forum names / topic titles read as normal sentence-case serif rather than
   the Bebas all-caps used elsewhere — topic titles are full sentences, and a
   long list of them in caps is hard on the eyes. */
#forum a.name, #topics a.read, #topics a.unread {
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--ink);
}

#forum a.name:hover, #topics a.read:hover, #topics a.unread:hover {
  color: var(--rust);
}

#topics a.unread {
  color: var(--ink);
  font-weight: 600;
}

#forum a.no-access {
  color: var(--ink-faint);
}

#forum td p {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-dim);
  margin: 4px 0 0;
}

/* unread indicator: a single glowing rust dot before the title, so unread
   threads are obvious at a glance. Read items get no dot. (The old rust
   left-spine on the cell was dropped — the dot alone marks unread; the spine
   doubled up with it.) */
#forum td.card-title.unread a.name::before,
#topics td.title.card-title a.unread::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 5px var(--rust);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* count + meta columns */
#forum td.topics, #forum td.posts, #topics td.post_count, #topics td.view_count {
  text-align: center;
  vertical-align: middle;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
}

#forum td.moderators {
  text-align: center;
  vertical-align: middle;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
}

/* centre the subforum table's last-post + moderators columns (topics/posts already centred) */
#forum td.last-post {
  text-align: center;
  vertical-align: middle;
}

#forum td.last-post span, #topics td.last-post span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
}

#forum td.last-post span a, #topics td.last-post span a {
  color: var(--rail);
}

/* vertically centre every cell against its row so short columns (icon, author,
   counts) sit level with the topic title instead of clinging to the top. */
#topics tbody td {
  vertical-align: middle;
}

/* topic icons + badges */
#topics td.icon {
  text-align: center;
  width: 34px;
}

#topics td.icon i.fa {
  display: inline-block;
  font-size: 14px;
  color: var(--ink-faint);
}

#topics td.icon i.fa-bolt {
  color: var(--rust);
}

#topics td.icon i.fa-lock {
  color: var(--gold);
}

#topics i.fa-thumb-tack {
  color: var(--rust);
  margin-right: 5px;
}

/* page-number list drops onto its own line beneath the topic title (mono, small)
   rather than trailing inline after the (variable-length) title. */
#topics span.pages {
  display: block;
  margin: 5px 0 0;
  font-family: var(--sans);
  font-size: 10px;
}

#topics span.pages a {
  color: var(--ink-faint);
  padding: 0 6px 0 0;
}

/* ---- topic header + actions ---- */
.topic-header {
  margin: 0 0 16px;
}

.topic-header h3 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topic-header h3 i.fa-lock {
  color: var(--gold);
  font-size: 20px;
}

.topic-header h3 i.fa-bolt {
  color: var(--rust);
  font-size: 20px;
}

.forum-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.forum-actions .btn-group {
  position: relative;
}

.forum-actions .moderation-menu .dropdown-menu {
  background: var(--card);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  text-align: left;
  min-width: 190px;
}

.forum-actions .moderation-menu li > a,
.forum-actions .moderation-menu li button {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: 11px var(--sans);
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}

.forum-actions .moderation-menu li > a:hover,
.forum-actions .moderation-menu li button:hover {
  background: rgba(255, 91, 30, 0.1);
  color: var(--rust);
}

.forum-actions .moderation-menu li form {
  margin: 0;
}

.forum-actions .moderation-menu li i {
  width: 16px;
  margin-right: 5px;
  text-align: center;
}

.forum-actions .moderation-menu .divider {
  height: 1px;
  margin: 5px 0;
  background: var(--edge);
}

@media (max-width: 480px) {
  .forum-actions {
    justify-content: stretch;
  }
  .forum-actions > .btn-group, .forum-actions > .add-post {
    flex: 1 1 auto;
  }
  .forum-actions .btn {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
  }
}
.topic .follow-topic {
  text-align: right;
  margin: 0 0 12px;
}

.topic .follow-topic form {
  margin: 0;
}

/* ---- posts thread ---- */
.topic .thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic .post.row-fluid {
  display: flex;
  margin: 0;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--edge-hot);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  overflow: hidden;
}

.topic .post.first-post {
  border-left-color: var(--rust);
}

.topic .post.deleted {
  opacity: 0.5;
}

.topic .post .span2.author {
  flex: none;
  width: 172px;
  margin: 0;
  padding: 16px 14px;
  background: var(--sunk);
  border-right: 1px solid var(--edge);
  text-align: center;
}

.topic .post .author h4 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}

.topic .post .author h4 a {
  color: var(--rail);
}

.topic .post .author .avatar {
  display: inline-block;
}

.topic .post .author .avatar img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--edge-hot);
  border-radius: 0;
}

.topic .post .author .info {
  margin-top: 10px;
}

/* --ink-dim (not --ink-faint) so the join-date/rank line stays legible on the
   light author panel instead of washing out to grey. */
.topic .post .author .info p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  margin: 3px 0;
}

.topic .post .author .info p.rang {
  color: var(--gold);
}

/* body is a flex column so the .buttons row (margin-top:auto) pins to the bottom
   even on short posts; the row's default align-items:stretch makes the body fill
   the taller author column's height, so the buttons land in its bottom-right. */
.topic .post .span10.body {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 16px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.topic .post .body .header {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.topic .post .body .header .pull-right {
  float: none;
}

.topic .post .body .content {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.topic .post .body .content blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-left: 2px solid var(--rust-deep);
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink-faint);
}

/* post foot pinned to the bottom of the body: signature (left) + action buttons
   (right) on one row; the divider only shows when there is a signature. */
.topic .post .body .post-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.topic .post .body .post-foot:has(.signature) {
  border-top: 1px solid var(--edge);
}

.topic .post .body .signature {
  flex: 1;
  min-width: 0;
  max-height: 80px;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  opacity: 0.85;
}

.topic .post .body .buttons {
  flex: none;
  margin-left: auto;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ---- inline reply + forms (reuse shared .control-group / .form-actions / .btn) ---- */
.post-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}

.post-form, .topic-form, .forum-form {
  background: none;
}

.forum .well {
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: none;
}

.alert-access {
  background: var(--panel-2);
  border: 1px solid var(--edge);
  color: var(--ink-dim);
  text-shadow: none;
}

/* forum totals line ("postów: … / komentarzy: …"): smaller than body copy and
   spaced from what precedes it. The top margin collapses with the forums table's
   20px bottom margin on the index (so that page keeps its gap), while on the
   forum/topic view it lifts the line off the zero-bottom-margin pagination. */
.forum-stats {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

.forum-stats small {
  font-size: inherit;
}

.label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 0;
  color: #120a05;
  background: var(--ink-faint);
  text-shadow: none;
}

.label-success, .label-info {
  background: var(--rail);
}

.label-important, .label-moved {
  background: var(--blood);
  color: #fff;
}

.label-warning {
  background: var(--gold);
}

.label-inverse {
  background: var(--edge-hot);
  color: var(--ink);
}

/* =====================  MARKDOWN EDITOR (src/markdown-editor.js)  ===================== */
/* Vanilla toolbar that replaces the old markItUp! sprite. Font-Awesome / text
   glyphs on a flat HUD bar; the textarea keeps the shared .control-group look. */
.md-editor {
  max-width: 640px;
}

.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  padding: 4px 5px;
  margin: 0;
  background: var(--ground-2);
  border: 1px solid var(--edge-hot);
  border-bottom: 0;
}

.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink-dim);
  cursor: pointer;
  text-shadow: none;
  transition: color 0.12s, background 0.12s;
}

.md-btn .fa {
  font-size: 14px;
  line-height: 1;
}

.md-btn.md-btn-text {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.md-btn:hover, .md-btn:focus-visible {
  color: var(--rust);
  background: var(--panel);
  outline: none;
}

.md-btn:active {
  color: var(--rust-deep);
}

.md-sep {
  width: 1px;
  height: 18px;
  margin: 0 5px;
  background: var(--edge-hot);
  opacity: 0.7;
}

/* the textarea already carries the shared .control-group styling; just seam it
   to the toolbar (the toolbar owns the top border). */
.md-body textarea.markItUpEditor {
  display: block;
  margin: 0;
}

/* preview swaps in place: hide the toolbar + textarea, show rendered HTML. */
.md-editor.previewing .md-toolbar,
.md-editor.previewing .md-body {
  display: none;
}

.md-preview {
  display: none;
}

.md-editor.previewing .md-preview {
  display: block;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--edge-hot);
  padding: 16px 18px;
}

/* the rendered body reuses the shared .a-body markdown styling (added in JS),
   so it renders exactly like the live news/article page in both themes. Strip
   the legacy content.sass `div.preview` chrome (fixed white bg, grey border,
   top padding + the "Podglad" :after pill) so the themed .md-preview panel above
   shows through instead of an always-white box. */
.md-preview .preview {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  position: static;
}

.md-preview .preview:after {
  content: none;
  display: none;
}

.md-preview .preview.a-body > :first-child {
  margin-top: 0;
}

.md-preview-loading {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0;
}

.md-preview .md-preview-close {
  margin-top: 16px;
}

/* mobile: shared .table-cards collapses rows to cards; keep the index section
   title (thead) visible as a section bar rather than hiding it. */
@media (max-width: 720px) {
  /* Keep the index section title visible, but as a block section bar — a
     table-header-group would re-pin the collapsed table to table layout and
     bring back the horizontal overflow. */
  .table-cards-sections thead,
  .table-cards-sections thead tr,
  .table-cards-sections thead th {
    display: block;
  }
  .topic .post.row-fluid {
    flex-direction: column;
  }
  .topic .post .span2.author {
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--edge);
  }
  /* avatar first, then nickname; the register-date / rank metadata is dropped
     to keep the author bar to a single compact line on phones. */
  .topic .post .author .avatar {
    order: -1;
  }
  .topic .post .author h4 {
    margin: 0;
  }
  .topic .post .author .avatar img {
    width: 44px;
    height: 44px;
  }
  .topic .post .author .info {
    display: none;
  }
}
/* =====================  USERS / PROFILE  ===================== */
/* Index/ranking/content/observed/messages tables reuse the shared .table; this
   adds the column extras + the profile-show hero/tabs/stats/menu/forms.
   users.sass, ranking.sass, identities.sass, journals.sass pruned; badges.sass
   kept (award-icon sprite). Auth-gated surfaces (messages, identities, edit,
   profile menu) styled from the markup map, not guest-verified. */
/* observed ("Obserwatorium") table: narrow action column + stacked last-post */
.observed td.last-post span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
}

.observed td.last-post span a {
  color: var(--rail);
}

.observed .follow-topic form {
  margin: 0;
}

.observed td:first-child, .observed th.observed {
  width: 1%;
  white-space: nowrap;
}

/* shared table column bits (avatar, index status/msg) */
.table td.avatar, .table th.avatar {
  width: 52px;
}

.table td.avatar img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--edge-hot);
  border-radius: 0;
  display: block;
}

.users.index td.status, .users.index td.msg {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
}

/* ranking */
.ranking h2 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0 0 16px;
}

.ranking td.position {
  width: 44px;
  text-align: center;
  font-family: "Bebas", var(--sans);
  font-size: 22px;
  color: var(--rust);
}

.ranking td.login span {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 3px;
}

.ranking td.points {
  text-align: center;
  white-space: nowrap;
}

.ranking td.points p {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
}

.ranking td.points span {
  font-family: var(--sans);
  font-size: 11px;
  background: none;
  padding: 0;
}

.ranking td.points span.up {
  color: var(--rail);
}

.ranking td.points span.down {
  color: var(--blood);
}

/* profile show: hero */
.user-details .hero-unit {
  position: relative;
  margin: 0 0 18px;
  padding: 22px 26px 22px 140px;
  min-height: 96px;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rust);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.user-details .hero-unit .img {
  position: absolute;
  left: 26px;
  top: 22px;
  float: none;
  margin: 0;
}

.user-details .hero-unit .img img, .user-details .hero-unit .img-polaroid {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--edge-hot);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  display: block;
}

.user-details .hero-unit h1 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  margin: 0 0 4px;
  line-height: 1;
}

.user-details .hero-unit small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.7;
}

.user-details .hero-unit .lead {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-dim);
  margin: 12px 0 0;
}

.user-details .hero-unit blockquote {
  border: 0;
  border-left: 2px solid var(--edge-hot);
  padding: 0 0 0 12px;
  margin: 12px 0 0;
  float: none;
}

.user-details .hero-unit blockquote p {
  font-family: var(--sans);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
  margin: 0;
}

.user-details .hero-unit blockquote small {
  color: var(--ink-faint);
}

/* "napisz" PW action pinned to the hero's bottom-right, clear of the clipped corner */
.user-details .hero-unit .profile-actions {
  position: absolute;
  right: 20px;
  bottom: 14px;
  margin: 0;
}

/* ranking ribbon → angular HUD badge (sprite dropped) */
.user-details .ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  background: none;
  margin: 0;
  padding: 8px 14px;
  text-align: center;
  line-height: 1.2;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-left: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.user-details .ribbon span {
  display: block;
  font-family: "Bebas", var(--sans);
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.user-details .ribbon.pos-1, .user-details .ribbon.pos-1 span {
  color: var(--gold);
}

.user-details .ribbon.pos-2 span, .user-details .ribbon.pos-3 span {
  color: var(--rail);
}

/* merit box */
.user-stats {
  display: inline-block;
  margin: 0 0 16px;
}

.user-stats .org, .user-stats .ql {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: var(--ground-2);
  border: 1px solid var(--edge);
  padding: 8px 14px;
  display: inline-block;
}

.user-stats .org span {
  color: var(--rust);
}

/* tabs (profile show + edit) */
.user-tabs .nav-tabs, .edit-profile .nav-tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 18px;
  padding: 0;
  border-bottom: 1px solid var(--edge);
  box-shadow: none;
}

.user-tabs .nav-tabs > li, .edit-profile .nav-tabs > li {
  margin: 0;
}

.user-tabs .nav-tabs > li > a, .edit-profile .nav-tabs > li > a {
  display: block;
  margin: 0;
  padding: 9px 15px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 2px solid transparent;
}

.user-tabs .nav-tabs > li > a:hover, .edit-profile .nav-tabs > li > a:hover {
  background: none;
  color: var(--ink);
  border-bottom-color: var(--edge-hot);
}

.user-tabs .nav-tabs > li.active > a, .edit-profile .nav-tabs > li.active > a {
  background: none;
  color: var(--rust);
  border-bottom-color: var(--rust);
}

/* dl stats + message meta */
.dl-horizontal {
  margin: 0;
}

.dl-horizontal dt {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  width: 160px;
}

.dl-horizontal dd {
  margin-left: 176px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.dl-horizontal dd a {
  color: var(--rail);
}

/* ranking-history chart: this is a legacy CLASSLESS Highcharts SVG (no
   .highcharts-* classes; light fills via `fill=` presentation attrs). CSS fill
   beats presentation attrs, so recolor the white background rect + all text by
   attribute/element so it reads on the dark panel. Series/gridlines left as-is. */
#ranking_history {
  margin-top: 18px;
  background: var(--panel);
  border: 1px solid var(--edge);
}

#ranking_history rect[fill="#FAFAFA"], #ranking_history rect[fill="#FFFFFF"], #ranking_history rect[fill="#ffffff"], #ranking_history rect[fill=white] {
  fill: var(--panel) !important;
}

#ranking_history text {
  fill: var(--ink-dim) !important;
}

/* activity feed */
ol.user-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol.user-activity li {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-dim);
  padding: 8px 0;
  border-bottom: 1px solid var(--edge);
}

ol.user-activity li:last-child {
  border-bottom: 0;
}

ol.user-activity .abbr {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
}

/* badges grid (sprite kept from badges.sass) */
.badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* profile menu (auth-gated) */
.profile-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--edge);
  box-shadow: none;
}

.profile-nav > li {
  margin: 0;
  position: relative;
}

.profile-nav > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 13px;
  border-radius: 0;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.profile-nav > li > a:hover, .profile-nav > li.active > a {
  background: rgba(255, 91, 30, 0.08);
  color: var(--rust);
}

.profile-nav .dropdown-menu {
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
}

.profile-nav .dropdown-menu > li > a {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-dim);
  padding: 6px 14px;
}

.profile-nav .dropdown-menu > li > a:hover {
  background: rgba(255, 91, 30, 0.08);
  color: var(--rust);
}

.profile-nav .caret {
  border-top-color: currentColor;
}

/* messages + identities + edit-profile progress */
tr.unread td {
  font-weight: 700;
}

.identities table {
  background: none;
  margin-top: 12px;
}

.identities th {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 18px;
  color: var(--ink);
  padding-left: 0;
  background: none;
}

.edit-profile .progress {
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: none;
  height: 16px;
}

.edit-profile .progress .bar, .edit-profile .progress-success .bar, .edit-profile .progress-info .bar {
  background: var(--rail);
  box-shadow: none;
}

/* profile hero on phones: smaller avatar/name, keep the name clear of the badge */
@media (max-width: 560px) {
  .user-details .hero-unit {
    padding: 18px 18px 18px 118px;
  }
  .user-details .hero-unit .img {
    left: 18px;
    top: 18px;
  }
  .user-details .hero-unit .img img, .user-details .hero-unit .img-polaroid {
    width: 82px;
    height: 82px;
  }
  .user-details .hero-unit h1 {
    font-size: 28px;
    padding-right: 62px;
  }
}
/* Notification inbox: retained history with a strong but compact unread state. */
.notification-inbox {
  max-width: 900px;
}

.notifications-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 14px;
}

.notifications-actions .btn {
  margin: 0;
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}

.notification-item {
  margin: 0;
  border-bottom: 1px solid var(--edge);
}

.notification-item > a {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 13px 15px;
  color: var(--ink-dim);
  transition: background 0.16s, color 0.16s;
}

.notification-item > a:hover, .notification-item > a:focus-visible {
  color: var(--ink);
  background: rgba(255, 91, 30, 0.06);
  text-decoration: none;
  outline: none;
}

.notification-marker {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--edge-hot);
}

.notification-item.unread {
  background: linear-gradient(90deg, rgba(255, 91, 30, 0.09), transparent 65%);
}

.notification-item.unread .notification-marker {
  background: var(--rust);
  box-shadow: 0 0 10px rgba(255, 91, 30, 0.7);
}

.notification-item.unread .notification-content {
  color: var(--ink-strong);
  font-weight: 600;
}

.notification-copy {
  min-width: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
}

.notification-copy strong {
  display: block;
  margin-top: 4px;
  color: var(--rail);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.notification-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.notification-meta time, .notification-meta small {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.notification-item.unread .notification-meta small {
  color: var(--rust);
}

.notification-item .fa-chevron-right {
  color: var(--edge-hot);
  font-size: 10px;
}

.notifications-empty {
  padding: 56px 20px;
  text-align: center;
  border: 1px solid var(--edge);
  background: var(--card-grad);
}

.notifications-empty > i {
  font-size: 30px;
  color: var(--rust);
  opacity: 0.8;
}

.notifications-empty h4 {
  margin: 12px 0 5px;
  font-family: "Bebas", var(--sans);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.notifications-empty p {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-faint);
}

.btn-notifications {
  border-color: rgba(255, 91, 30, 0.55);
}

.btn-notifications .badge-notify {
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 560px) {
  .notification-item > a {
    grid-template-columns: 7px minmax(0, 1fr) 10px;
    gap: 10px;
    padding: 12px 9px;
  }
  .notification-meta {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
  }
  .notification-item .fa-chevron-right {
    grid-column: 3;
    grid-row: 1/span 2;
  }
  .notifications-actions {
    justify-content: stretch;
  }
  .notifications-actions .btn {
    width: 100%;
  }
}
/* =====================  SEARCH  ===================== */
/* /search: form reuses shared .control-group; results are a .media-list. Match
   highlight recolored from bootstrap yellow to a gold wash. search.sass pruned. */
.search .highlight {
  background: rgba(229, 167, 43, 0.22);
  color: var(--ink-strong);
  padding: 0 2px;
}

.search > p {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.search > p strong {
  color: var(--ink);
}

/* form: inline checkboxes */
.search .form-horizontal .controls > span {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  padding: 0;
}

.search .form-horizontal .controls > span label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
  padding: 0;
}

.search .form-actions {
  border: 0;
  padding: 0;
  margin: 14px 0 0;
  background: none;
}

/* results list */
.search ul.media-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search li.media {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 14px 18px;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rail);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.search li.media .pull-left {
  float: none;
  flex: none;
  width: 66px;
  text-align: center;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.search li.media .pull-left i {
  display: block;
  font-size: 22px;
  color: var(--rail);
  margin-bottom: 6px;
}

.search .media-body {
  flex: 1;
  min-width: 0;
}

.search .media-heading {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.search .media-heading a {
  color: var(--ink);
}

.search .media-heading a:hover {
  color: var(--rust);
  text-decoration: none;
}

.search .media-body .date {
  float: none;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.search .media-body p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-dim);
  margin: 6px 0 0;
}

.search .media-body p:last-child {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.search .media-body a {
  color: var(--rail);
}

.search .media-body a:hover {
  color: var(--rust);
  text-decoration: none;
}

/* =====================  AUTH / DEVISE  ===================== */
/* Sign in / up / password / confirmation. Forms reuse the shared .control-group
   / .form-actions. devise.sass + signup.sass pruned (sprite icons dropped). */
.widget-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0 0 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--edge);
  box-shadow: none;
}

.widget-header i.fa {
  color: var(--rust);
  font-size: 20px;
}

.widget-header h3 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0;
  text-shadow: none;
  line-height: 1.1;
}

.control-group .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
}

.devise-links {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.devise-links li {
  height: auto;
  margin: 0;
}

.devise-links a {
  display: inline-block;
  padding: 0;
  background: none;
  line-height: 1.6;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--rail);
}

.devise-links a:hover {
  color: var(--rust);
  text-decoration: none;
}

.help-inline {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--blood);
}

/* registration: social + separator + prepend-icon inputs */
.social {
  text-align: center;
  margin: 0 0 6px;
}

.social p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}

.social .buttons a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  margin: 0;
  width: auto;
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.social .buttons a:hover {
  border-color: var(--rust);
  color: var(--rust);
  text-decoration: none;
  background: var(--ground-2);
}

.social .buttons a span {
  display: none;
}

.separator {
  margin: 22px 0;
  text-align: center;
  position: relative;
}

.separator:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--edge);
}

.separator span {
  position: relative;
  background: var(--ground);
  padding: 0 16px;
}

.separator em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* .form-horizontal is more specific than a bare .input-prepend in legacy
   Bootstrap (`.form-horizontal .input-prepend { display: inline-block }`), so
   match that specificity here or the icon add-on won't stretch to the input. */
.form-horizontal .input-prepend, .input-prepend {
  display: flex;
  align-items: stretch;
}

.input-prepend .add-on {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: auto;
  background: var(--panel-2);
  border: 1px solid var(--edge-hot);
  border-right: 0;
  color: var(--ink-faint);
  margin: 0;
}

.input-prepend .add-on i {
  font-size: 14px;
  line-height: 1;
}

.form-horizontal .input-prepend input, .input-prepend input {
  flex: 1;
  min-width: 0;
  margin: 0;
  border-left: 0;
}

/* focus: the input border already goes rust (.control-group input:focus); match
   the prepended icon box so the whole control reads as one rust-outlined field
   rather than the input flipping colour while the icon stays edge-hot. */
.input-prepend:focus-within .add-on {
  border-color: var(--rust);
}

/* Auth pages (sign-in / sign-up) carry no sidebar content, so collapse the
   empty rail to one full-width column and center a shared, narrow form block.
   This also unifies the input width across both views — sign-in inputs used to
   stretch to 640px while sign-up was 340px. Breadcrumb stays full-width. */
.grid:has(> main.registrations), .grid:has(> main.sessions) {
  grid-template-columns: 1fr;
}

.grid:has(> main.registrations) > .rack, .grid:has(> main.sessions) > .rack {
  display: none;
}

main.registrations > :not(.breadcrumb), main.sessions > :not(.breadcrumb) {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.registrations form.v2 .control-group {
  margin-bottom: 12px;
}

.g-recaptcha {
  margin: 14px auto;
}

/* =====================  STATIC PAGES + ERRORS  ===================== */
/* /terms /privacy (main.terms), user pages (.page / main.pages), 404
   (main.errors): prose blocks — serif body, Bebas subheads, teal links, mono
   note. pages.sass pruned. */
main.terms h2, main.terms h3, main.terms h4,
main.pages h2, main.pages h3, main.pages h4,
.page h3, .page h4,
main.errors h2, main.errors h4 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 22px 0 10px;
  line-height: 1.1;
}

main.terms h2, main.errors h2, .page h3 {
  font-size: 30px;
}

main.terms h4, main.pages h4, .page h4, main.errors h4 {
  font-size: 20px;
}

main.terms > :first-child, main.errors > h2:first-child, .page > :first-child {
  margin-top: 0;
}

main.terms p, main.pages p, .page p, main.errors p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0 0 12px;
}

/* Prose list/link styling is scoped to the .page content wrapper (not the bare
   main.pages scope) so it doesn't bleed onto the <ul class="breadcrumb"> that
   sits as a direct child of <main class="pages">, which would override the
   chrome breadcrumb component (mono grey trail) with 15px teal list styling. */
main.terms ul, .page ul, main.errors ul {
  margin: 0 0 14px 22px;
}

main.terms li, .page li, main.errors li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 4px;
}

main.terms a, .page a, main.errors a {
  color: var(--rail);
}

main.terms a:hover, .page a:hover, main.errors a:hover {
  color: var(--rust);
  text-decoration: none;
}

.page h5 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

.page p.note {
  border-top: 1px solid var(--edge);
  padding-top: 12px;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
}

/* 404 — a focused landing panel rather than a loose prose block. */
.grid:has(> main.errors) {
  grid-template-columns: 1fr;
}

.grid:has(> main.errors) > .rack {
  display: none;
}

main.errors {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 250px);
}

main.errors .error-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(300px, 1.2fr);
  align-items: center;
  gap: clamp(28px, 6vw, 82px);
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  min-height: 360px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 76px);
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--rust);
  box-shadow: var(--card-shadow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

main.errors .error-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  left: -110px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--rail) 30%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 90px color-mix(in srgb, var(--rail) 12%, transparent);
}

main.errors .error-card::after {
  content: "404 / SIGNAL LOST";
  position: absolute;
  right: 26px;
  bottom: 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

main.errors .error-code {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bebas", var(--sans);
  font-size: clamp(104px, 15vw, 184px);
  line-height: 0.75;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-shadow: 5px 5px 0 color-mix(in srgb, var(--rust) 32%, transparent);
}

main.errors .error-target {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 0.68em;
  height: 0.68em;
  margin: 0 0.03em;
  color: transparent;
  border: 0.07em solid var(--rust);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.06em var(--panel), inset 0 0 0 0.075em var(--rail);
}

main.errors .error-target::before, main.errors .error-target::after {
  content: "";
  position: absolute;
  background: var(--rust);
}

main.errors .error-target::before {
  width: 0.34em;
  height: 0.025em;
}

main.errors .error-target::after {
  width: 0.025em;
  height: 0.34em;
}

main.errors .error-copy {
  max-width: 570px;
}

main.errors .error-copy .error-kicker {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rail);
}

main.errors .error-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.95;
}

main.errors .error-copy > p:not(.error-kicker) {
  max-width: 530px;
  margin-bottom: 24px;
  font-size: 16px;
}

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

main.errors .error-actions .btn {
  justify-content: center;
}

@media (max-width: 760px) {
  main.errors {
    min-height: 0;
  }
  main.errors .error-card {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 34px;
    padding: 42px 24px 58px;
    text-align: center;
  }
  main.errors .error-card::before {
    left: 50%;
    top: -180px;
    transform: translateX(-50%);
  }
  main.errors .error-code {
    font-size: clamp(96px, 32vw, 150px);
  }
  main.errors .error-copy {
    margin: 0 auto;
  }
  main.errors .error-actions {
    justify-content: center;
  }
}
@media (max-width: 460px) {
  main.errors .error-actions {
    flex-direction: column;
  }
  main.errors .error-actions .btn {
    display: flex;
  }
}
/* pages INDEX (admin list of CMS pages). It reuses the main.pages scope, so the
   prose `main.pages ul` rule above turned its list of page links into a bare
   disc-bullet list that read as unstyled. Re-style just the index list (never the
   .breadcrumb ul) as panels on the rail spine, matching the other index lists. */
main.pages.index ul:not(.breadcrumb) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

main.pages.index ul:not(.breadcrumb) > li {
  margin: 0;
  background: var(--card-grad);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--rail);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: border-color 0.15s;
}

main.pages.index ul:not(.breadcrumb) > li:hover {
  border-color: var(--edge-hot);
}

main.pages.index ul:not(.breadcrumb) > li a {
  display: block;
  padding: 11px 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 0.15s;
}

main.pages.index ul:not(.breadcrumb) > li a:hover {
  color: var(--rust);
  text-decoration: none;
}

/* =====================  ADMIN  ===================== */
/* Admin (Shell > .grid.full.admin > main). Reuses shared .table/.btn/.label/
   .control-group/.alert/pagination; this adds the nav row + admin-specific bits,
   all .grid.admin-scoped. admin/admin.sass pruned. Auth-gated (admin only). */
.grid.admin main > a.btn {
  margin: 0 5px 18px 0;
}

.grid.admin table thead th h4 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0;
}

.grid.admin td.center {
  text-align: center;
}

.grid.admin .users table td {
  vertical-align: middle;
}

.grid.admin .users table td p {
  margin: 6px 0 0;
}

.grid.admin td .label {
  margin: 2px;
}

.grid.admin .versions table td p {
  max-height: 80px;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  margin: 0;
}

.grid.admin .versions table tr:hover td p {
  max-height: none;
}

.grid.admin .settings .alert {
  margin-bottom: 16px;
}

.grid.admin .settings pre {
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-radius: 0;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 12px;
  margin: 6px 0 0;
  overflow-x: auto;
}

.grid.admin .settings > p {
  margin: 0 0 16px;
  font-family: var(--sans);
  color: var(--ink-dim);
}

.grid.admin .settings textarea, .grid.admin textarea#setting {
  width: 100%;
  min-height: 320px;
  font-family: var(--mono);
  font-size: 13px;
}

.grid.admin .settings fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.grid.admin .broken_file_reports > p {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
}

.grid.admin .broken_reports table td p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-dim);
}

/* =====================  PICTURES (bespoke gallery layout)  ===================== */
/* Kept as its own no-HUD layout (PicturesBase) but themed with tokens so it reads
   on the dark ground. Reuses input.search-query; pictures.sass folded in here. */
.container-fluid.pictures {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 20px;
}

.container-fluid.pictures .row-fluid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.container-fluid.pictures .span2 {
  flex: none;
  width: 190px;
}

.container-fluid.pictures .span10 {
  flex: 1;
  min-width: 0;
}

.container-fluid.pictures .widget, .container-fluid.pictures .widget-content {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.pictures .span2 ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.pictures .span2 ul li {
  margin: 0;
}

.pictures .span2 ul a {
  display: block;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border-left: 2px solid transparent;
}

.pictures .span2 ul a:hover {
  color: var(--rust);
  border-left-color: var(--rust);
  text-decoration: none;
}

.pictures .span2 ul.unstyled {
  border-top: 1px solid var(--edge);
  padding-top: 12px;
}

.pictures .span2 ul.unstyled i.fa {
  color: var(--rail);
  margin-right: 4px;
}

.pictures .browser ul.thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pictures li.picture {
  width: 172px;
  margin: 0;
  list-style: none;
}

.pictures li.picture .thumbnail {
  display: block;
  padding: 4px;
  background: var(--ground-2);
  border: 1px solid var(--edge-hot);
  border-radius: 0;
  transition: border-color 0.18s;
}

.pictures li.picture .thumbnail:hover {
  border-color: var(--rust);
}

.pictures li.picture img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.pictures .caption {
  padding: 8px 2px 0;
}

.pictures .caption p {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

.pictures .caption a {
  color: var(--rail);
}

.pictures .caption a:hover {
  color: var(--rust);
  text-decoration: none;
}

.pictures li.unapproved {
  opacity: 0.55;
}

.pictures li.unapproved:hover {
  opacity: 1;
}

.pictures .browser > p {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
}

/* =====================  COMMENT THREAD  ===================== */
/* Shared read/write comment thread (shared/_add_show_comments) rendered inside
   every content show page's <div id="comments">. Angular panels keyed left by
   rust; avatar pinned left; mono meta + serif body; hover-revealed footer. */
#comments {
  border-top: 1px solid var(--edge);
  padding-top: 22px;
  margin-top: 26px;
}

#comments > p {
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
}

#comments .comment_container {
  position: relative;
  overflow: hidden;
  margin: 0 0 14px;
  padding: 14px 16px 12px 74px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

#comments .comment_container.highlighted {
  border-color: var(--rust);
}

#comments .comment_container.deleted {
  opacity: 0.5;
}

#comments .comment_container .avatar {
  position: absolute;
  left: 14px;
  top: 14px;
  float: none;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
}

#comments .comment_container .avatar img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 1px solid var(--edge-hot);
  border-radius: 0;
}

#comments .comment_content {
  margin: 0;
}

/* header row: meta (left) + manage links (right) on one line, wrapping the manage
   block below the meta on narrow screens. The divider lives on the row so it
   underlines the whole header. */
#comments .comment_head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  border-bottom: 1px solid var(--edge);
  padding-bottom: 6px;
  margin: 0 0 9px;
}

#comments .comment_content .meta {
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  background: none;
}

#comments .comment_content .meta a {
  color: var(--rail);
  font-weight: 400;
}

#comments .comment_content .meta a:hover {
  color: var(--rust);
  text-decoration: none;
}

#comments .comment_content p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-strong);
  margin: 0 0 7px;
}

#comments .comment_content p:last-child {
  margin-bottom: 0;
}

/* Long comments are capped with a fade + "pokaż więcej" expander (added by
   comments-collapse.js only when the body actually overflows), so a thread of
   verbose comments doesn't stretch the page to tens of thousands of px. The CAP
   here must match the JS threshold. */
#comments .comment_content.is-collapsible {
  position: relative;
  max-height: 220px;
  overflow: hidden;
}

#comments .comment_content.is-collapsible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(rgba(0, 0, 0, 0), var(--panel));
  pointer-events: none;
}

#comments .comment_content.is-expanded {
  max-height: none;
}

#comments .comment_content.is-expanded::after {
  content: none;
}

#comments .comment-more {
  display: inline-block;
  margin: 9px 0 0;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}

#comments .comment-more:hover, #comments .comment-more:focus-visible {
  color: var(--rust);
}

/* manage links (delete | edit | reply | vote). A flex row pushed to the right of
   the header via margin-left:auto — NOT floated: the old float:right shared the
   meta's row and crushed the author/date into a sliver on narrow screens. Sitting
   in .comment_head it stays on the meta's line on desktop and wraps below it (its
   own right-aligned line) when there isn't room. flex-wrap lets the links
   themselves reflow too. */
#comments .comment_manage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: 2px 5px;
  padding: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

#comments .comment_manage a {
  color: var(--ink-dim);
}

#comments .comment_manage a:hover {
  color: var(--rust);
  text-decoration: none;
}

#comments .comment_manage a.voted {
  color: var(--gold) !important;
}

#comments .comment_manage i.fa {
  font-size: 10px;
}

/* footer (reply-to / permalink) — mono, revealed on row hover like the legacy. */
#comments .comment_bottom {
  visibility: hidden;
  margin-top: 9px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

#comments .comment_container:hover .comment_bottom {
  visibility: visible;
}

#comments .comment_bottom p {
  margin: 0;
  padding: 0;
}

#comments .comment_bottom a {
  color: var(--ink-faint);
}

#comments .comment_bottom a:hover {
  color: var(--rust);
}

#comments p.is-reply {
  float: right;
}

#comments p.id {
  float: left;
}

#comments .nested {
  margin-left: 30px;
  border-left: 1px solid var(--edge);
  padding-left: 16px;
}

#comments .nested .nested .nested {
  margin-left: 30px;
}

/* comment form / signed-out prompt */
#comments #new_comment {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--edge);
}

#comments #new_comment h3, #comments #new_comment h4 {
  font-family: "Bebas", var(--sans);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-shadow: none;
  margin: 0 0 12px;
  text-align: left;
  padding: 0;
}

#comments #new_comment h4 a {
  color: var(--rust);
}

#comments #new_post {
  padding-left: 14px;
  border-left: 3px solid var(--rust);
}

#comments #new_post textarea, #comments textarea.markitup-simple {
  width: 100%;
  height: 160px;
  margin: 0 0 12px;
  background: var(--ground-2);
  border: 1px solid var(--edge);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  padding: 11px;
}

#comments #new_post textarea:focus, #comments textarea.markitup-simple:focus {
  border-color: var(--rust);
  outline: none;
  box-shadow: none;
}

#comments .btn {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--edge-hot);
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  text-shadow: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

#comments .btn:hover, #comments .btn:focus-visible {
  border-color: var(--rust);
  color: var(--rust);
}

#comments .btn-success {
  background: var(--rust);
  border-color: var(--rust);
  color: #170c05;
}

#comments .btn-success:hover, #comments .btn-success:focus-visible {
  background: var(--rust-deep);
  border-color: var(--rust-deep);
  color: #fff;
}

/* =====================  FOOTER  ===================== */
footer.site-foot {
  border-top: 1px solid var(--edge);
  background: var(--ground-2);
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 22px 38px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}

.foot-inner .note {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  line-height: 1.8;
  text-align: center;
}

.foot-inner .note a {
  color: var(--ink-dim);
}

.foot-inner .note a:hover {
  color: var(--rust);
}

/* =====================  FOCUS (keyboard)  ===================== */
/* Nav links, the theme toggle and the burger carry their own focus treatment
   (active underline / accent border). Every other interactive element gets a
   consistent rail-teal ring on keyboard focus, and none on mouse (:focus-visible). */
.brand:focus-visible,
.btn-login:focus-visible,
.btn-join:focus-visible,
.seeall a:focus-visible,
.card h3 a:focus-visible,
.card .foot a:focus-visible,
.mod a:focus-visible,
.breadcrumb li a:focus-visible,
.breadcrumb .feed:focus-visible,
.wrap > .alert .close:focus-visible,
.modal a:focus-visible,
.modal .close:focus-visible,
.modal-footer .btn:focus-visible,
#comments a:focus-visible,
#comments .btn:focus-visible,
.article .a-title a:focus-visible,
.article .kicker a:focus-visible,
.article .manage a:focus-visible,
.download .manage a:focus-visible,
.quote-show .manage a:focus-visible,
.screens .manage a:focus-visible,
.page .manage a:focus-visible,
.a-body a:focus-visible,
.pagination li a:focus-visible,
.articles .media-heading a:focus-visible,
.articles .info a:focus-visible,
.article .nav-pills a:focus-visible,
.download .nav-pills a:focus-visible,
.quote-show .nav-pills a:focus-visible,
.questionnaire .nav-pills a:focus-visible,
.information .nav-pills a:focus-visible,
.nav.nav-pills.small li > a:focus-visible,
.questionnaire a.answer:focus-visible,
.archive-add a:focus-visible,
main.quotes:not(.show) > ul:not(.breadcrumb) > li a:focus-visible,
main.questionnaires:not(.show) > ul:not(.breadcrumb) > li a:focus-visible,
.information header a:focus-visible,
#forum a:focus-visible,
#topics a:focus-visible,
.topic .post .body .buttons a:focus-visible,
.forum-actions .btn:focus-visible,
.user-tabs .nav-tabs > li > a:focus-visible,
.edit-profile .nav-tabs > li > a:focus-visible,
.profile-nav > li > a:focus-visible,
.profile-nav .dropdown-menu > li > a:focus-visible,
.search .media-heading a:focus-visible,
.search .media-body a:focus-visible,
.devise-links a:focus-visible,
.social .buttons a:focus-visible,
main.terms a:focus-visible,
main.pages a:focus-visible,
.page a:focus-visible,
main.errors a:focus-visible,
.table a:focus-visible,
.downloads h5 a:focus-visible,
.download .broken a:focus-visible,
.thumbnails .thumbnail:focus-visible,
.btn-info:focus-visible,
.form-actions .btn:focus-visible,
.console .tabs button:focus-visible,
.poll .answer:focus-visible,
.gallery .sec-head .see:focus-visible,
.film:focus-visible,
.mobile-menu nav a:focus-visible,
.foot-inner .note a:focus-visible {
  outline: 2px solid var(--rail);
  outline-offset: 2px;
}

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 980px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .rack {
    position: static;
  }
  nav.main {
    display: none;
  }
  .hud-tools {
    display: none;
  }
  .burger {
    display: flex;
  }
  .hud.nav-open .mobile-menu {
    display: block;
  }
}
@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .hud-inner {
    height: 54px;
    gap: 12px;
  }
  .card.pinned h3 {
    font-size: 26px;
  }
  .card.media {
    grid-template-columns: 1fr;
  }
  .card.media .shot {
    max-width: 200px;
  }
}
/* Narrow screens: the absolute top-right manage buttons would overlap the news
   kicker / article title, so drop them to a static right-aligned action row. */
@media (max-width: 700px) {
  .article .manage, .download .manage, .quote-show .manage, .screens .manage, .page .manage {
    position: static;
    top: auto;
    right: auto;
    justify-content: flex-end;
    margin: 0 0 14px;
  }
  .article h3:has(.manage), .download h3:has(.manage), .page h3:has(.manage) {
    padding-right: 0;
  }
  .article h3 .manage, .download h3 .manage, .page h3 .manage {
    margin: 10px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}
/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-family: var(--sans);
  font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
  width: auto;
  height: auto;
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
  border: none;
}

/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 39, ../sass/lightbox.sass */
.lb-container {
  padding: 10px;
}

/* line 42, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 51, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 62, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  /* Trick IE into showing hover */
  display: block;
}

/* line 72, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}

/* line 76, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(next.png) right 48% no-repeat;
}

/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -ms-border-bottom-left-radius: 4px;
  -o-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -ms-border-bottom-right-radius: 4px;
  -o-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 95, ../sass/lightbox.sass */
.lb-data {
  padding: 0 10px;
  color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 107, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 11px;
}
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-close {
  width: 35px;
  float: right;
  padding-bottom: 0.7em;
  outline: none;
}
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
}
#at-view {
    position:absolute;
    top: 0;
    left: 0;
    display: none;
    margin-top: 18px;
    background: white;
    border: 1px solid #DDD;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    min-width: 120px;
}

#at-view .cur {
    background: #3366FF;
    color: white;
}
#at-view .cur small {
    color: white;
}
#at-view strong {
    color: #3366FF;
}
#at-view .cur strong {
    color: white;
    font:bold;
}
#at-view ul {
    /* width: 100px; */
    list-style:none;
    padding:0;
    margin:auto;
}
#at-view ul li {
    display: block;
    padding: 5px 10px;
    border-bottom: 1px solid #DDD;
    cursor: pointer;
    /* border-top: 1px solid #C8C8C8; */
}
#at-view small {
    font-size: smaller;
    color: #777;
    font-weight: normal;
}