@charset "UTF-8";

:root {
  background-color: var(--main-bk-color);
  --content-voffset: 70px;
  --mainmenu-height: 49px;
  --bottom-bar-offset: 2em;
  --control-background: #ffffff;
  --control-outline: #c9c7c5;
  --control-outline-hover: #a9a7a5;
  --action: #d76212;
  --mainblock: #2a2a2a;
  --mainblockelement: #3a3a3a;
  --mainblockelementhover: #585858;
  --header-ink: #bbbbbb;
  --button-minor-face: #4d5d66;
  --button-major-face: #d95d07;
  --main-ink-color: #dfdedc;
  --mainmenu-bk: #d95d07;
  --menu-ink-color: #ffffff;
  --dark-ink-color: #111315;
  --main-bk-color: #1f1e1e;
  --orange-background: #ffaa46;
  --link-hover: #ffaa46;
  --orange-medium: #ff7c22;
  --link-medium: #ff7c22;
  --border-intense: #d95d07;
  --highlight: #ffaa46;
  --form-label: #d95d07;
  --colorpositive: #66adee;
  --colorpositiveminor: #66eeb5;
  --colornegative: #ee4422;
  --colornegativeminor: #f1c562;
  --header-default: #d2af8c;
  --major-ink: #d2af8c;
  --table-border: #272727;
  --table-header: #504943;
  --table-header-border: #857a70;
  --table-row: #2a2a2a;
  --table-row-odd: #403f3e;
  --table-row-hover: #373533;
  --table-row-highlight: #69625a;
  --shadow1: rgba(0, 0, 0, 0.3);
  --shadow2: rgba(255, 255, 255, 0.15);
  --shadow3: rgba(255, 170, 70, 0.25);
  --shadow4: rgba(0, 0, 0, 0.05);
  --showimage: rgba(0, 0, 0, 0.9);
  --tag-minor: #3a3a3a;
}

html, body {
  min-height: 100%;
  min-width: 310px;
  margin: 0;
  padding: 0;
}

/*@media (prefers-color-scheme: moo) {
  :root {
    --action: #d76212;
    --mainblock: #dddddd;
    --header-ink: #222f42;
    --button-minor-face: #4d5d66;
    --button-major-face: #222f42;
    --main-ink-color: #2e2e2e;
    --menu-ink-color: #ffffff;
    --mainmenu-bk: #222f42;
    --dark-ink-color: #111315;
    --main-bk-color: #eeeeee;
    --orange-background: #ffaa46;
    --link-hover: #ffaa46;
    --orange-medium: #ff7c22;
    --link-medium: #ff7c22;
    --highlight:  #ffaa46;
    --form-label: #222f42;
    --border-intense: #d95d07;
    --colorpositive: #66adee;
    --colorpositiveminor: #66eeb5;
    --colornegative: #ee4422;
    --colornegativeminor: #f1c562;
    --header-default: #eeeeee;
    --major-ink: #1e2b37;
    --table-border: #272727;
    --table-header: #1e2b37;
    --table-header-border: black;
    --table-row: #eaf5ff;
    --table-row-odd: #aaceff;
    --table-row-hover: #373533;
    --table-row-highlight: #69625a;
    --shadow1: rgba(0, 0, 0, 0.3);
    --shadow2: rgba(255, 255, 255, 0.15);
    --shadow3: rgba(255, 170, 70, 0.25);
    --shadow4: rgba(0, 0, 0, 0.05);
    --showimage: rgba(0, 0, 0, 0.9);
    --tag-minor: #3a3a3a;
  }
}*/

html {
  background-color: var(--main-bk-color);
}

body {
  color: var(--main-ink-color);
  padding: 0px;
  font-family: "Fira Sans", "fontello", "Roboto", "Tahoma", "Calibri", sans-serif;
  font-size: 13.6px;
  line-height: 20px;
  font-weight: 400;
  overflow-x: auto;
  overflow-y: auto;
}

body.modal-open {
  overflow: hidden;
  /*position: fixed;*/
}

* {
  box-sizing: border-box;
}

/* general stuff */
/*svg {
  display: block;
  width: 100%;
  margin: 0 auto;
}*/

div {
  outline: 0;
}

p {
  margin-top: 12px;
  margin-bottom: 13px;
}

p:first-child {
  margin-top: 0px;
}

.hidden {
  display: none !important
}

.cookieconsent {
  position: fixed;
  bottom: 0;
  height: auto;
  width: 100%;
  background-color: var(--dark-ink-color);
  color: var(--main-ink-color);
  padding: 15px;
  border: 1px solid var(--border-intense);
  z-index: 8888;
}

.pictofont {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  /*line-height: 16px;*/
  /*speak: never;*/
  /*background-color: inherit;
  color: inherit;*/
  display: inline-block;
  text-decoration: inherit;
  margin-right: 1px;
  margin-left: 1px;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* Font smoothing. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pictofontsmall {
  font-size: 80%;
  margin: 0px 0px 2px 0px;
  vertical-align: middle;
}

.iconok {
  display: inline-block;
  font-family: "fontello";
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--colorpositive);
  font-size: 15px;
  padding: 0px 2px;
  width: 20px;
  height: 20px;
  cursor: default;
  border-radius: 50%;
}

.dragdrophandle {
  cursor: move;
  min-width: 20px;
  min-height: 20px;
}

.konfiguracja > div.incontent {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

div.dragdropplaceholder, span.dragdropplaceholder {
  display: block;
  background: transparent;
  background-color: rgba(255, 170, 70, 0.25);
  border: 1px dashed var(--link-medium);
  border-radius: 2px;
  float: left;
}

/* element styles */
.standardcolor {
  color: var(--main-ink-color) !important;
}

a:hover .standardcolor {
  color: var(--link-hover) !important;
}

.standardcase {
  text-transform: none !important;
}

.uppercase {
  text-transform: uppercase;
}

.major {
  color: var(--major-ink);
}

.minor {
  color: #a0a09e;
}

.wrap {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

hr {
  border: 0;
  border-top: 1px solid #6c6c6c;
}

hr.bright90 {
  border: 0;
  height: 1px;
  width: 90%;
  border-top: 1px solid var(--control-outline);
}

strong, b, .strong {
  font-weight: 500;
}

small, .small {
  font-size: 95%;
}

.normalsize {
  font-size: 13.6px !important;
}

.bigger {
  font-size: 110%;
}

.biggest {
  font-size: 130%;
}

span.highlight {
  color: var(--highlight);
}

.positive {
  color: var(--colorpositive);
}

.positiveimportant, .positiveimportant a {
  color: var(--colorpositive) !important;
}

.positivesecondary {
  color: var(--colorpositiveminor);
}

.negative {
  color: var(--colornegative);
}

.negativesecondary {
  color: var(--colornegativeminor);
}

.fullwidth {
  width: 100%;
}

.halfwidth {
  width: 49%;
}

.fullheight {
  height: calc(100vh - var(--content-voffset));
}

.quotviewpresent > .fullheight {
  height: calc(100vh - var(--content-voffset) - var(--bottom-bar-offset));
}

.maxheight {
  max-height: calc(100vh - var(--content-voffset));
}

.quotviewpresent > .maxheight {
  max-height: calc(100vh - var(--content-voffset) - var(--bottom-bar-offset));
}

.smallgapbelow {
  margin-bottom: 3px !important;
}

.flex {
  display: flex;
}
.flex-items-center {
  align-items: center !important;
}
.flex-items-start {
  align-items: start !important;
}
.flex-align-self-start {
  align-self: start !important;
}
.flex-align-self-center {
  align-self: center !important;
}
.flex-align-self-end {
  align-self: flex-end;
}
.flex-justify-start {
  justify-content: flex-start !important;
}
.flex-justify-end {
  justify-content: flex-end !important;
}
.flex-justify-center {
  justify-content: center;
}
.flex-justify-spacebetween {
  justify-content: space-between;
}
.flex-row {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.flex-rowgap5 {
  row-gap: 5px;
}
.flex-colgap3 {
  column-gap: 3px;
}
.flex-grow {
  flex-grow: 1;
}
.flex-nogrow {
  flex-grow: 0;
}
.flex-noshrink {
  flex-shrink: 0;
}
.flexbreak {
  flex-basis: 100%;
  height: 0;
}

.quotationwidget {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 200px;
  position: sticky;
  left: 0;
  top: var(--content-voffset);
  max-height: calc(100vh - var(--content-voffset));
  overflow-y: auto;
}

div.sidecontent.sticky,
div.contentblock .sticky {
  position: sticky;
  top: var(--content-voffset);
}

div.basiscontent {
  flex-basis: content;
}

div.basis250{
  flex-basis: 250px;
}

div.basis300{
  flex-basis: 300px;
}

div.basis350{
  flex-basis: 350px;
}

div.basis1k{
  flex-basis: 1000px;
}

div.basis10p{
  flex-basis: 10%;
}

div.basis20p{
  flex-basis: 20%;
}

div.basis30p{
  flex-basis: 30%;
}

div.basis40p{
  flex-basis: 40%;
}

div.basis50p{
  flex-basis: 50%;
}

div.basis60p{
  flex-basis: 60%;
}
.verticalscroll {
  overflow-y: auto;
}

div.mainmenu {
  display: flex;
  position: sticky;
  top: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  min-height: var(--mainmenu-height);
  background: var(--mainmenu-bk);
  box-shadow: 0px 5px 5px 0px var(--shadow1);
  z-index: 1; /*because it partially hides under main content*/
}

div.mainmenu > a {
  color: var(--menu-ink-color);
  text-decoration: none;
  padding: 15px;
  font-size: 15.8px;
  flex-grow: 0;
}

div.mainmenu > a.selected {
  border-bottom: 5px solid var(--highlight);
  padding-bottom: 10px;
}

div.mainmenu > a.disabled {
  color: rgba(150, 150, 150, 0.5);
  cursor: default;
}

div.mainmenu a.close-menu {
  color: var(--menu-ink-color);
}

div.mainmenu > a:not(.disabled, .menulogo):hover {
  background: var(--highlight);
  color: var(--dark-ink-color);
}

div.mainmenu > div.fillspace {
  margin-right: auto;
}

div.mainmenu > .menulogo {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 30px;
  background-color: #999999;
  flex-grow: 0;
  flex-shrink: 0;
}

div.mainmenu > .menulogo > img {
  width: 100%;
  max-width: 100%;
  display: block;
}

div.mainmenu > a.bordered {
  padding: 13px 15px;
  border: 2px solid #fff;
  border-radius: 6px;
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  div.mainmenu > a:not(.menulogo) {
    display: none;
  }
  div.mainmenu > div.menubuttonwrapper.menuitems {
    display: flex;
  }
}

div.modalwrap {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.75);
  z-index: 8888;
  opacity: 1;
  animation: fadein 0.25s both alternate;
}

div.modalwrap.hidden {
  opacity: 0 !important;
}

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

div.modalwrap>.usermenu, div.modalwrap>.basketmenu, div.modalwrap>.menuitems {
  background-color: var(--mainblock);
  min-width: 300px;
  max-width: 600px;
  min-height: 200px;
  max-height: calc(100% - var(--mainmenu-height) - 5px);
  margin-top: var(--mainmenu-height);
  margin-right: 5px;
  padding: 5px;
  box-shadow: 0px 5px 15px 10px var(--shadow1);
  animation: slide-in 0.25s both alternate;
}

@keyframes slide-in {
  0% {transform: translateX(600px);}
  100% {transform: translateX(0);}
}

div.modalwrap>.basketmenu .quotelements {
  gap: 3px;
}

div.modalwrap>.basketmenu .quotelementwrapper {
  border-radius: 3px;
  column-gap: 2px;
}

div.modalwrap>.basketmenu .quotelementwrapper>div {
  background-color: var(--mainblockelement);
  padding: 5px;
}

div.modalwrap>.basketmenu .quotelementwrapper:hover>div {
  background-color: var(--mainblockelementhover);
}

div.quotelementmoredetails img {
  max-width: 100px;
  max-height: 100px;
}

#showimage {
  display: block;
  position: absolute;
  top: 0; left: 0;
  background-color: var(--showimage);
  width: 100%;
  height: 100vh;
  z-index: 100;
}

#showimage > div {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

#showimage > div > img {
  max-width: 90%;
  max-height: 90%;
  border: 1px solid var(--orange-medium);
}

div.pdfpreview {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0; border: 0;
  background-color: rgba(0,0,0,0.75);
  z-index: 8888;
  padding: 20px;
}

div.pdfpreview div {
  width: 100%;
  background-color: var(--orange-medium);
  text-align: right;
}

div.pdfpreview div a {
  color: white;
  margin: 6px;
}

div.pdfpreview object {
  width: 100%;
  height: 95%;
}

form.searchbox {
	display: flex;
	padding: 5px 20px 20px 20px;
	margin: 0;
	flex-wrap: nowrap;
}

form.searchbox input[type=search] {
	flex-grow: 10;
}

form.searchbox input[type=submit] {
	flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 34px;
  outline: 1px solid var(--button-major-face);
}

.textright {
  text-align: right;
  justify-content: flex-end;
}

.textleft {
  text-align: left;
}

.textcenter, .center {
  text-align: center;
}

.article {
  font-size: 15.6px;
  line-height: 25px;
}

blockquote {
  position: relative;
  background: #3b3b3b;
  margin: 10px 0px 10px 0px;
  border-left: 5px solid #555555;
  padding: 10px;
  overflow: hidden;
}

blockquote cite {
  font-weight: 300;
  color: #a0a09e;
  display: block;
  font-size: 100%;
  font-style: italic;
}

blockquote cite::after {
  content: " wrote:";
}

blockquote blockquote {
  max-height: none !important;
  background: #414141;
}

blockquote blockquote blockquote {
  max-height: none !important;
  background: #484848;
  display: none;
  visibility: hidden;
}

blockquote blockquote blockquote blockquote {
  max-height: none !important;
  background: #4e4e4e;
  display: none;
  visibility: hidden;
}

blockquote blockquote blockquote blockquote blockquote {
  max-height: none !important;
  background: #555555;
  display: none;
  visibility: hidden;
}

sup {
  font-size: 11.6px;
  line-height: 14px;
  display: inline-block;
  margin-left: 5px;
  margin-top: -3px;
  text-align: center;
  vertical-align: top;
}

sup.counter, span.counter {
  font-size: 12.6px;
  color: var(--dark-ink-color);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 13.6px;
  position: relative;
  margin-right: -16px;
  margin-left: 5px;
  padding: 1px 4px;
  text-align: center;
  vertical-align: super;
  background-color: #ffffff;
  will-change: box-opacity;
  border-radius: 3px;
}

span.counter {
  /*position: relative;
  margin: 0 0 0 5px;*/
  font-weight: 500;
}

span.boxpulsealert, div.boxpulsealert, a.boxpulsealert, img.iconpulsealert {
  box-shadow: 0 0 0 rgba(146, 64, 63, 0);
  -webkit-animation: pulseboxalert 2s infinite;
          animation: pulseboxalert 2s infinite;
}

@-webkit-keyframes pulse {
  0% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);}
  30% {box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);}
  100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
@keyframes pulse {
  0% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);}
  30% {box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);}
  100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
@-webkit-keyframes pulseboxalert {
  0% {box-shadow: 0 0 0 0 rgba(146, 64, 63, 0);}
  30% {box-shadow: 0 0 10px 0 rgba(146, 64, 63, 1);}
  35% {box-shadow: 0 0 0 10px rgba(146, 64, 63, 0.5);}
  50% {box-shadow: 0 0 0 17px rgba(146, 64, 63, 0);}
  100% {box-shadow: 0 0 0 0 rgba(146, 64, 63, 0);}
}
@keyframes pulseboxalert {
  0% {box-shadow: 0 0 0 0 rgba(146, 64, 63, 0);}
  30% {box-shadow: 0 0 10px 0 rgba(146, 64, 63, 1);}
  35% {box-shadow: 0 0 0 10px rgba(146, 64, 63, 0.5);}
  50% {box-shadow: 0 0 0 17px rgba(146, 64, 63, 0);}
  100% {box-shadow: 0 0 0 0 rgba(146, 64, 63, 0);}
}
div.fillbar, div.fillbarplaceholder {
  width: 20px;
  height: 20px;
}

div.fillbar {
  border: 1px solid #685d51;
}

div.progressbarcustom {
  width: 100%;
  height: 25px;
  overflow: hidden;
  white-space: nowrap;
}

div.progressbarcustom > span {
  position: relative;
  display: inline-block;
  height: 100%;
  font-size: 95%;
  overflow: visible;
  padding-left: 5px;
  text-align: center;
  line-height: 25px;
  color: var(--menu-ink-color);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

div.progressbarlegendcustom {
  width: 16px;
  height: 16px;
  border: 1px solid #222;
  margin-right: 10px;
  vertical-align: text-top;
  display: inline-block;
}

div.progressbarcustom > span.title {
  background-color: #383838;
  padding: 0px 10px;
}

div.progressbarcontainer {
  margin-bottom: 5px;
}

div.progressbartitle {
  float: left;
  width: 130px;
  padding-right: 10px;
  text-align: right;
  line-height: 25px;
}

div.progressbar {
  height: 25px;
  border: 1px solid #685d51;
  background-color: #262626;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
}

div.progressbar span {
  height: 100%;
  display: block;
  width: 0;
  color: var(--main-ink-color);
  background-color: #685d51;
  line-height: 25px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
  padding-left: 5px;
  white-space: nowrap;
}

h1 {
  color: var(--header-default);
  margin: 0px 0px 0px 0px;
  font-size: 23.8px;
  line-height: 130%;
  font-weight: 500;
  text-transform: uppercase;
}

h2 {
  color: var(--header-default);
  margin: 0px 0px 20px 0px;
  font-size: 20.4px;
  line-height: 30px;
  font-weight: 500;
  text-transform: none;
}

h1 + h2 {
  margin-top: 10px;
}

h3 {
  color: var(--header-default);
  margin: 0px 0px 0px 0px;
  font-size: 17.68px;
  line-height: 25px;
  font-weight: 300;
  text-transform: none;
}

h4 {
  color: var(--header-default);
  margin: 0px 0px 0px 0px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 300;
  margin-bottom: 10px;
  text-transform: uppercase;
}

h5 {
  color: var(--header-default);
  margin: 0px 0px 0px 0px;
  font-size: 15.9936px;
  line-height: 20px;
  margin-bottom: 5px;
  font-weight: 300;
  text-transform: uppercase;
}

.mainblockaction h1, .mainblockaction h2, .mainblockaction h3, .mainblockaction h4, .mainblockaction h5 {
  color: var(--button-minor-face) !important;
}

div.buttoncontainer + h5 {
  padding: 5px 0px;
  margin-bottom: 0px;
}

h6 {
  color: var(--header-default);
  margin: 0px 0px 5px 0px;
  font-size: 13.6px;
  line-height: 20px;
  font-weight: 300;
  text-transform: uppercase;
}

a h1, a h2, a h3, a h4, a h5 {
  color: var(--orange-medium);
}

/* links */
a.anchor {
  position: relative;
  top: -70px;
  display: block;
  visibility: hidden;
}

a:link, .aslink {
  color: var(--orange-medium);
  text-decoration: none;
}

a:visited {
  color: var(--orange-medium);
  text-decoration: none;
}

a:active {
  color: var(--highlight);
  text-decoration: none;
}

a:hover, .aslink:hover {
  color: var(--highlight);
  text-decoration: underline;
}

.mainblockaction a:link, .mainblockaction .aslink {
  color: var(--action);
}

.mainblockaction a:visited {
  color: var(--action);
}

a.minor:link, a.minor:visited {
  color: #a0a09e;
}

a.minor:active, a.minor:hover {
  color: var(--orange-background);
}

a.positive {
  color: var(--colorpositive);
}

a.positivesecondary {
  color: var(--colorpositiveminor);
}

a.negative {
  color: var(--colornegative);
}

.highlight a:link, .authorside a:link, .highlight a:visited, .authorside a:visited {
  color: var(--highlight);
}

.highlight a:hover, .authorside a:hover, .highlight a:active, .authorside a:active {
  color: var(--link-hover);
}

a.inlinebutton:link, a.inlinebutton:visited,
span.inlinebutton:link, span.inlinebutton:visited,
a.linkbutton:link, a.linkbuttonlarge:link, a.linkbutton:visited, a.linkbuttonlarge:visited,
span.linkbutton:link, span.linkbuttonlarge:link, span.linkbutton:visited, span.linkbuttonlarge:visited,
a.linkbuttonflat:link, a.linkbuttonflat:visited, span.linkbuttonflat:link, span.linkbuttonflat:visited,
a.actionbutton:link, a.actionbuttonlarge:link, a.actionbutton:visited, a.actionbuttonlarge:visited,
span.actionbutton:link, span.actionbuttonlarge:link, span.actionbutton:visited, span.actionbuttonlarge:visited {
  color: var(--menu-ink-color);
  text-decoration: none;
}

a.tag:link, a.tag:visited, span.tag:link, span.tag:visited,
a.inlinebutton.minor:link, a.inlinebutton.minor:visited, span.revealspoiler:link, span.revealspoiler:visited,
span.inlinebutton.minor:link, span.inlinebutton.minor:visited,
a.linkbutton.minor:link, a.linkbuttonlarge.minor:link, a.linkbutton.minor:visited, a.linkbuttonlarge.minor:visited,
span.linkbutton.minor:link, span.linkbuttonlarge.minor:link, span.linkbutton.minor:visited, span.linkbuttonlarge.minor:visited,
a.linkbuttonflat.minor:link, a.linkbuttonflat.minor:visited, span.linkbuttonflat.minor:link, span.linkbuttonflat.minor:visited,
a.actionbutton.minor:link, a.actionbuttonlarge.minor:link, a.actionbutton.minor:visited, a.actionbuttonlarge.minor:visited,
span.actionbutton.minor:link, span.actionbuttonlarge.minor:link, span.actionbutton.minor:visited, span.actionbuttonlarge.minor:visited {
  color: var(--menu-ink-color);
  text-decoration: none;
}

div.spoiler {
  background-color: #383838;
  padding: 10px;
}

a.nocolor:link {
  color: inherit;
  text-decoration: none;
}

a.nocolor:visited {
  color: inherit;
  text-decoration: none;
}

a.nocolor:active {
  color: var(--orange-background);
  text-decoration: none;
}

a.nocolor:hover {
  color: var(--orange-background);
  text-decoration: none;
}

a.nocolor:hover h2, a.nocolor:active h2, a.nocolor:hover h3, a.nocolor:active h3, a.nocolor:hover h4, a.nocolor:active h4 {
  color: var(--orange-background);
  text-decoration: none;
}

a.tag, span.tag, a.linktag, a.gametag {
  display: inline-block;
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
  font-size: 12.92px;
  text-decoration: none;
  line-height: 16px;
  padding: 7px 10px;
  vertical-align: top;
  /*margin-right: 5px;*/
  flex: 0 1 auto;
  /*text-shadow: 1px 1px 0px rgba(0,0,0, 0.3);*/
  border-radius: 2px;
}

a.tag.link, span.tag.link, a.linktag.link, a.gametag.link {
  color: var(--orange-medium);
}

span.tag {
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
}

.linktag {
  background-color: var(--button-major-face);
}

.tag.minor, a.tag.minor {
  color: var(--main-ink-color);
  background-color: var(--tag-minor);
}

.tag .minor {
  color: #caced1;
}

.tag.minor .minor {
  color: #aeadab;
}

.tag.positive {
  color: var(--menu-ink-color);
  background-color: #58a3e7;
}

.tag.negative {
  color: var(--menu-ink-color);
  background-color: #8b3838;
}

.tag.highlight {
  color: var(--dark-ink-color);
  background-color: var(--link-hover);
}

a.tag.selected {
  background-color: var(--link-hover) !important;
  color: var(--dark-ink-color) !important;
  text-shadow: none;
}

a.tag:active, a.tag:hover {
  background-color: var(--link-hover) !important;
  color: var(--dark-ink-color) !important;
  text-shadow: none;
}

a.tag:active .minor, a.tag:active .major, a.tag:active .standardcolor, a.tag:hover .minor, a.tag:hover .major, a.tag:hover .standardcolor {
  color: var(--dark-ink-color) !important;
  text-shadow: none;
}

a.taginline, span.taginline {
  line-height: 10px;
  margin-left: 1px;
  margin-right: 1px;
  padding: 5px 7px;
}

div.incontentlist .listitem.tag {
  display: block;
  font-size: inherit;
  line-height: inherit;
  border-top: 0px;
  margin-bottom: 5px;
}

div.illustration a.tag {
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin-right: 0px;
  border-radius: 0px;
}

div.tagcontainerstretched > .tag {
  flex: 1 1 20%;
  padding: 10px;
  text-align: center;
}

div.tagcontainerstretched > .linkbutton, div.tagcontainerstretched > .actionbutton,
div.buttoncontainerstretched > .linkbutton, div.buttoncontainerstretched > .actionbutton {
  flex: 1 1 auto;
}

div.tagcontainer, div.tagcontainerstretched, div.buttoncontainer, div.buttoncontainerstretched {
  display: flex;
  flex-wrap: wrap;
  line-height: 25px;
  gap: 5px;
}

div.buttoncontainer, div.buttoncontainerstretched {
  line-height: 30px;
  align-items: flex-start;
}

div.tagcontainer.nowrap, div.tagcontainerstretched.nowrap, div.buttoncontainer.nowrap, div.buttoncontainerstretched.nowrap {
  flex-wrap: nowrap;
}

div.tagcontainer.textright, div.tagcontainerstretched.textright, div.buttoncontainer.textright, div.buttoncontainerstretched.textright {
  justify-content: flex-end;
}

div.tagcontainer + div.buttoncontainer, div.tagcontainerstretched + div.buttoncontainer {
  margin-top: 10px;
}

td > div.buttoncontainer {
  margin: -3px;
}

div.buttoncontainer .linkbutton, div.buttoncontainer .actionbutton {
  padding: 10px 20px;
}

div.buttoncontainer + div.buttoncontainer {
  margin-top: 15px;
}

div.hiddenitems {
  display: none;
  min-width: 100%;
}

div.loadingtextcontainer {
  position: relative;
}

div.loadingtext {
  position: absolute;
  top: 0px;
  opacity: 0;
  -webkit-animation: loadingTextCycle 45s infinite;
          animation: loadingTextCycle 45s infinite;
}

div.loadingtext.one {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

div.loadingtext.two {
  -webkit-animation-delay: 17s;
          animation-delay: 17s;
}

div.loadingtext.three {
  -webkit-animation-delay: 32s;
          animation-delay: 32s;
}

@-webkit-keyframes loadingTextCycle {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loadingTextCycle {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
div.loadingdot {
  display: inline-block;
  margin-left: 2px;
  margin-right: 2px;
  position: relative;
  font-size: 12px;
  opacity: 0;
  -webkit-animation: showHideDot 1.5s ease-in-out infinite;
          animation: showHideDot 1.5s ease-in-out infinite;
}

div.loadingdot.one {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

div.loadingdot.two {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

div.loadingdot.three {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

div.loadingdot.four {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

div.loadingdot.five {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes showHideDot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes showHideDot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

div.bodycontainer {
  padding: 15px;
}

div.contentblock {
  padding: 5px;
}

div.contentblock .contentbackground {
  background-color: var(--mainblock);
  color: var(--main-ink-color);
  margin: 0;
  break-inside: avoid-column;
  border-radius: 3px;
  box-shadow: 5px 5px 10px 0px var(--shadow4);
}

div.contentblock .itemcontainer {
  padding: 7px;
  border-radius: 3px;
  background-color: var(--mainblock);
  border-radius: 3px;
  box-shadow: 5px 5px 10px 0px var(--shadow4);
  margin-bottom: 3px;
}

div.contentblock .itemcontainer img {
  max-width: 200px;
  max-height: 200px;
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  display: block;
  border: 1px solid var(--orange-background);
  padding: 1px;
}

div.contentblock .itemcontainer:hover img {
  /*transform: scale(0.95, 0.95);*/
  transform: scale(1.03, 1.03);
}

div.maincontainer {
  display: flex;
  padding: 15px;
  justify-content: center;
  align-items: flex-start;
  min-width: 600px;
}

div.maincontainer > .minw60perc {
  min-width: 60%;
}

div.maincontainer > .minw50perc {
  min-width: 50%;
}

div.maincontainer > .minw30perc {
  min-width: 30%;
}

div.maincontainer > .minw15perc {
  min-width: 15%;
}

div.maincontainer.fullheight {
  height: calc(100vh - var(--content-voffset));
}

div.maincontainer.fullheight.quotviewpresent {
  height: calc(100vh - var(--content-voffset) - var(--bottom-bar-offset));
}

div.debug {
  clear: both;
  font-size: 13.6px;
  color: #aaa;
  order: 50;
}

div.maincontent, div.sidecontent {
  padding: 5px;
  display: flex;
  flex-direction: column;
}

div.mainheader0, div.maincontent0, div.maincontent1, div.maincontent2, div.maincontent3,
div.sidecontent0, div.sidecontent1, div.sidecontent2, div.sidecontent3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(-webkit-min-content, -webkit-max-content);
  grid-auto-rows: minmax(min-content, max-content);
  grid-auto-columns: auto;
  gap: 20px 20px;
  grid-auto-flow: row dense;
  min-width: 0;
  width: 69%;
  width: calc(100% - 320px);
  float: left;
  padding-bottom: 20px;
}

div.mainheader0, div.maincontent0, div.sidecontent0 {
  order: 0;
}

div.maincontent1, div.sidecontent1 {
  order: 1;
}

div.maincontent2, div.sidecontent2 {
  order: 2;
}

div.maincontent3, div.sidecontent3 {
  order: 3;
}

div.mainheader0 {
  width: 100%;
  padding-bottom: 20px;
}

div.maincontent0.fullwidth, div.maincontent1.fullwidth, div.maincontent2.fullwidth, div.maincontent3.fullwidth {
  width: 100%;
  float: none;
}

div.maincontent0.fullwidthlimited, div.maincontent1.fullwidthlimited, div.maincontent2.fullwidthlimited, div.maincontent3.fullwidthlimited {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

div.maincontent0.fullwidthnarrow, div.maincontent1.fullwidthnarrow, div.maincontent2.fullwidthnarrow, div.maincontent3.fullwidthnarrow {
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

div.sidecontent0, div.sidecontent1, div.sidecontent2, div.sidecontent3 {
  width: 300px;
  float: right;
  clear: right;
  padding-bottom: 20px;
}

div.sidecontent0:empty, div.sidecontent1:empty, div.sidecontent2:empty, div.sidecontent3:empty {
  padding-bottom: 0px;
}

div.subcontent0, div.subcontent1, div.subcontent2, div.subcontent3 {
  display: flex;
  flex-direction: column;
  /*flex: 0 0 auto;*/
  min-width: 0;
}

div.maincontent0 > h1.header, div.maincontent1 > h1.header, div.maincontent2 > h1.header, div.maincontent3 > h1.header,
div.sidecontent0 > h1.header, div.sidecontent1 > h1.header, div.sidecontent2 > h1.header, div.sidecontent3 > h1.header,
div.subcontent0.nostretch > h1.header, div.subcontent1.nostretch > h1.header, div.subcontent2.nostretch > h1.header, div.subcontent3.nostretch > h1.header {
  margin-bottom: -20px;
}

div.subcontent0 > div.mainblock + h1.header, div.subcontent1 > div.mainblock + h1.header, div.subcontent2 > div.mainblock + h1.header, div.subcontent3 > div.mainblock + h1.header {
  margin-top: 20px;
}

div.maincontent0.smallgaps > h1.header, div.maincontent1.smallgaps > h1.header, div.maincontent2.smallgaps > h1.header, div.maincontent3.smallgaps > h1.header,
div.sidecontent0.smallgaps > h1.header, div.sidecontent1.smallgaps > h1.header, div.sidecontent2.smallgaps > h1.header, div.sidecontent3.smallgaps > h1.header,
div.subcontent0.smallgaps > h1.header, div.subcontent1.smallgaps > h1.header, div.subcontent2.smallgaps > h1.header, div.subcontent3.smallgaps > h1.header {
  margin-bottom: -5px;
}

div.subcontent0.nostretch.smallgaps > h1.header, div.subcontent1.nostretch.smallgaps > h1.header, div.subcontent2.nostretch.smallgaps > h1.header, div.subcontent3.nostretch.smallgaps > h1.header {
  margin-bottom: 0px;
}

div.subcontent0.columns2, div.subcontent1.columns2, div.subcontent2.columns2, div.subcontent3.columns2 {
  position: relative;
  display: block;
  -moz-column-count: 2;
  column-count: 2;
  -moz-column-gap: 10px;
  column-gap: 10px;
}

div.subcontent0.columns2 > div.mainblock, div.subcontent1.columns2 > div.mainblock, div.subcontent2.columns2 > div.mainblock, div.subcontent3.columns2 > div.mainblock {
  margin-bottom: 10px;
}

div.grid2columns, div.grid3columns, div.fixed300left, div.fixed300right {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(-webkit-min-content, -webkit-max-content);
  grid-auto-rows: minmax(min-content, max-content);
  grid-auto-columns: auto;
  gap: 20px 20px;
  grid-auto-flow: row dense;
}

div.grid2columns.columnseparator, div.grid3columns.columnseparator {
  gap: 20px 40px;
}

div.grid2columns.columnseparator > div:not(:last-child), div.grid3columns.columnseparator > div:not(:last-child) {
  border-right: 1px dotted #6c6c6c;
  padding-right: 20px;
  margin-right: -20px;
}

div.subcontent0.nostretch, div.subcontent1.nostretch, div.subcontent2.nostretch, div.subcontent3.nostretch {
  display: block;
}

div.subcontent0.nostretch.gaps > *, div.subcontent1.nostretch.gap > * s, div.subcontent2.nostretch.gaps > *, div.subcontent3.nostretch.gaps > * {
  margin-bottom: 20px;
}

div.subcontent0.nostretch.smallgaps > *, div.subcontent1.nostretch.smallgaps > *, div.subcontent2.nostretch.smallgaps > *, div.subcontent3.nostretch.smallgaps > * {
  margin-bottom: 5px;
}

div.grid2columns {
  grid-template-columns: 1fr 1fr;
}

div.grid3columns {
  grid-template-columns: 1fr 1fr 1fr;
}

div.fixed300left {
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
}

div.fixed300right {
  grid-template-columns: 1fr 300px;
  grid-template-rows: 1fr;
}

div.subcontent0.gaps, div.subcontent1.gaps, div.subcontent2.gaps, div.subcontent3.gaps {
  gap: 20px 20px;
}

div.flexcolumn {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

div.flexcolumn.smallgaps,
div.grid2column.smallgaps, div.grid3column.smallgaps,
div.maincontent0.smallgaps, div.maincontent1.smallgaps, div.maincontent2.smallgaps, div.maincontent3.smallgaps,
div.sidecontent0.smallgaps, div.sidecontent1.smallgaps, div.sidecontent2.smallgaps, div.sidecontent3.smallgaps,
div.subcontent0.smallgaps, div.subcontent1.smallgaps, div.subcontent2.smallgaps, div.subcontent3.smallgaps {
  gap: 5px 5px;
}

div.grid2rowspan, span.grid2rowspan, a.grid2rowspan {
  grid-row: span 2;
}

div.grid2colspan, span.grid2colspan, a.grid2colspan {
  grid-column: span 2;
}

div.spacerheader {
  margin-top: 30px;
}

div.spacebottom {
  margin-bottom: 5px !important;
}

/* content blocks */
nav.breadcrumbs {
  position: relative;
  color: var(--main-ink-color);
  padding: 0px;
  overflow: hidden;
  border-radius: 3px;
}

nav.breadcrumbs .crumb {
  position: relative;
  display: inline-block;
  padding: 0px 10px 0px 21px;
  margin-right: 5px;
  line-height: 30px;
  background-color: #383838;
}

nav.breadcrumbs .crumb:before {
  content: "";
  position: absolute;
  border-style: solid;
  top: 50%;
  margin-top: -20px;
  border-width: 20px 0px 20px 10px;
  border-color: transparent transparent transparent var(--main-bk-color);
  left: -2px;
}

nav.breadcrumbs .crumb:after {
  content: "";
  position: absolute;
  border-style: solid;
  top: 50%;
  margin-top: -20px;
  border-width: 20px 0px 20px 10px;
  border-color: transparent transparent transparent #383838;
  left: -5px;
}

nav.breadcrumbs .crumb:first-child, nav.breadcrumbs .crumb:first-child:hover {
  padding-left: 10px;
  text-decoration: none;
}

nav.breadcrumbs .crumb:first-child:before, nav.breadcrumbs .crumb:first-child:after {
  border-width: 0px;
}

nav.breadcrumbs .crumb:last-child {
  background-color: var(--mainblock);
  padding-right: 20px;
  border-radius: 3px;
}

div.mainblock, div.mainblockaction, div.actionmessage, div.actionmessageerror {
  border-spacing: 0px;
  background-color: var(--mainblock);
  color: var(--main-ink-color);
  margin: 0;
  flex-grow: 1;
  break-inside: avoid-column;
  border-radius: 3px;
  box-shadow: 5px 5px 10px 0px var(--shadow4);
}

div.mainblock.nogrow {
  flex-grow: 0;
}

div.maincontent0:not(.smallgaps):not(.fullwidth) nav.quickmenu,
div.maincontent1:not(.smallgaps):not(.fullwidth) nav.quickmenu,
div.maincontent2:not(.smallgaps):not(.fullwidth) nav.quickmenu,
div.maincontent3:not(.smallgaps):not(.fullwidth) nav.quickmenu {
  margin-bottom: -10px;
}

div.maincontent0.smallgaps nav.quickmenu,
div.maincontent1.smallgaps nav.quickmenu,
div.maincontent2.smallgaps nav.quickmenu,
div.maincontent3.smallgaps nav.quickmenu,
div.subcontent0.smallgaps nav.quickmenu,
div.subcontent1.smallgaps nav.quickmenu,
div.subcontent2.smallgaps nav.quickmenu,
div.subcontent3.smallgaps nav.quickmenu {
  margin-bottom: 5px !important;
}

nav.quickmenu.attached + div.mainblock, nav.quickmenu.attached + div.mainblockaction,
nav.switchtabs.attached + div.mainblock, nav.switchtabs.attached + div.mainblockaction {
  margin-top: -15px;
  /*-webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;*/
}

h1.header.withimage + div.mainblock {
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

/* fix for the rounder corners antialiasing problem */
/*div.mainblock.withillustration { background: linear-gradient(90deg, rgba(28,32,34,1) 0%, rgba(28,32,34,1) 1%, rgba(235,234,229,1) 1%); } */
.illustrationleft, .illustrationleftsmall, .illustrationright, .illustrationrightsmall, .illustrationgame, .authorleft, .profileleft {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: 200px auto;
  /*grid-auto-rows: minmax(min-content, max-content);*/
  gap: 0px 0px;
}

.illustrationleftsmall {
  grid-template-columns: 100px auto;
}

.illustrationright {
  grid-template-columns: auto 200px;
}

.illustrationrightsmall {
  grid-template-columns: auto 100px;
}

.authorleft {
  grid-template-columns: 150px auto;
  min-height: 250px;
}

.profileleft {
  grid-template-columns: 150px auto;
  min-height: 150px;
}

.illustrationleft div.illustration, .illustrationleftsmall div.illustration, .illustrationright div.illustration, .illustrationrightsmall div.illustration, .illustrationgame div.illustration, .illustrationleft div.profileimage, .illustrationleftsmall div.profileimage, .profileleft div.profileimage {
  grid-row-start: span 10;
  position: relative;
  background-position: center center;
  background-size: cover;
  transition: width 0.1s ease-in-out;
}

.illustrationright div.illustration, .illustrationrightsmall div.illustration {
  grid-column-start: 2;
}

.illustrationleft div.profileimage, .illustrationleftsmall div.profileimage {
  min-height: 150px;
}

.illustrationtop div.illustration {
  height: 50px;
  position: relative;
  background-position: center center;
  background-size: cover;
  transition: width 0.1s ease-in-out;
}

.illustrationvideo div.illustration {
  height: 210px;
  position: relative;
  background-color: #0f1010;
  background-position: center center;
  background-size: auto 100%;
  transition: background-size 0.2s ease-in-out;
}

.illustrationvideo div.illustration:hover {
  background-size: auto 108%;
}

div.authorleft div.authorside {
  grid-row-start: span 10;
  position: relative;
  background-color: #252424;
  border-right: 1px dotted #6c6c6c;
  text-align: center;
  overflow: hidden;
}

div.authorside div.userprofileimage, div.postauthor div.userprofileimage {
  position: relative;
  margin: 0px;
  margin-bottom: 5px;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 150px;
}

div.boardpost {
  display: grid;
  grid-template-columns: 150px 1fr minmax(auto, -webkit-max-content);
  grid-template-columns: 150px 1fr minmax(auto, max-content);
  grid-template-rows: 50px 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

div.mainblockaction.boardpost {
  grid-template-rows: 0px 1fr;
}

div.postauthor .badges {
  display: block;
}

div.boardpost > div:nth-child(1) {
  grid-area: 1/1/3/2;
  position: relative;
  min-height: 250px;
  background-color: #252424;
  border-right: 1px dotted #6c6c6c;
  text-align: center;
  overflow: hidden;
}

div.boardpost > div:nth-child(2) {
  grid-area: 1/2/2/3;
  overflow: visible;
  text-align: right;
}

div.boardpost > div:nth-child(2) > .tag {
  vertical-align: baseline;
  margin-right: 10px;
}

div.boardpost > div:nth-child(3) {
  grid-area: 1/3/2/4;
  overflow: visible;
}

div.boardpost > div:nth-child(4) {
  grid-area: 2/2/3/4;
}

div.mainblockaction {
  background-color: var(--main-ink-color);
  color: var(--main-bk-color);
  overflow: visible;
}

div.mainblock.highlight, div.highlight {
  background-color: #383838;
}

div.incontent {
  padding: 20px;
  word-break: normal;
  overflow-wrap: anywhere;
}

div.incontent.article {
  padding: 30px;
}

div.incontentlist {
  padding: 12px 20px;
}

div.incontentshortlist {
  padding: 7px 15px;
}

div.incontentblocklist {
  padding: 0px;
}

.attachedlistitem {
  display: block;
  padding: 10px 20px 10px 20px;
  border-top: 5px solid var(--main-bk-color);
  clear: both;
}

.attachedlistitem span.datefixedwidth, .listitem span.datefixedwidth, .attachedlistitem span.date, .listitem span.date,
div.bottomcontent span.datefixedwidth, div.bottomcontent span.date {
  font-size: 85%;
  display: inline-block;
}

.attachedlistitem span.title, .listitem span.datefixedwidth + span.title {
  margin-left: 100px;
  display: block;
}

.attachedlistitem span.sourcename, .listitem span.sourcename, div.bottomcontent span.sourcename {
  font-size: 85%;
}

div.incontentshortlist .listitem span.title {
  margin-left: 0px;
  display: inline-block;
  width: 100%;
  text-decoration: inherit;
}

.listitem span.storeprice {
  text-align: right;
  float: right;
  width: 60px;
  color: var(--main-ink-color);
}

.listitem span.storediscount {
  text-align: right;
  float: right;
  color: var(--orange-background);
}

.listitem a.storelink {
  text-align: right;
  float: right;
  min-width: 100px;
  text-transform: uppercase;
}

.listitemblock {
  display: block;
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
}

.listitem {
  display: block;
  /*white-space: nowrap;*/
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 0px;
  border-top: 1px dotted #6c6c6c;
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
}

.listitem.highlight {
  background-color: #383838;
}

.incontentblocklist .listitem {
  padding: 10px;
  border-top: 2px solid var(--main-bk-color);
}

.listitem.hasbuttons {
  line-height: 30px;
}

.incontentblocklist .listitem:last-child {
  padding-bottom: 10px;
}

.incontentblocklist a.listitem:hover, .incontentblocklist a.listitem:active {
  text-decoration: none;
  background-color: #383838;
}

.listitem:first-child {
  border-top: 0px;
}

div.mainblock a.linkcontent:hover, div.mainblock a.linkcontent:active,
a.attachedlistitem:hover span.standardcolor, a.attachedlistitem:active span.standardcolor,
a.attachedlistitem:hover span.minor, a.attachedlistitem:active span.minor,
a.listitem:not(.tag):hover span.standardcolor, a.listitem:not(.tag):active span.standardcolor,
a.listitem:not(.tag):hover span.minor, a.listitem:not(.tag):active span.minor {
  color: var(--orange-background);
}

a.listitem.tag:hover span.standardcolor, a.listitem.tag:active span.standardcolor,
a.listitem.tag:hover span.major, a.listitem.tag:active span.major,
a.listitem.tag:hover span.minor, a.listitem.tag:active span.minor {
  color: var(--dark-ink-color);
}

div.incontentlist.columns2, div.incontentlist.columns3, div.incontentlist.columns4 {
  position: relative;
  -moz-column-count: 2;
  column-count: 2;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

div.incontentlist.columns3 {
  -moz-column-count: 3;
  column-count: 3;
}

div.incontentlist.columns4 {
  -moz-column-count: 4;
  column-count: 4;
}

div.incontentlist.columns2::before, div.incontentlist.columns3::before, div.incontentlist.columns4::before {
  position: relative;
  display: block;
  -moz-column-span: all;
       column-span: all;
  margin-bottom: -1px;
  content: " ";
  height: 1px;
  background-color: var(--mainblock);
}

div.incontentlist.columns2 .spanned, div.incontentlist.columns3 .spanned, div.incontentlist.columns4 .spanned {
  -moz-column-span: all;
       column-span: all;
}

div.incontent img {
  vertical-align: middle;
}

div.incontent.article img.articleimage, div.incontent article img.articleimage, div.article img.articleimage {
  display: block;
  max-width: 100%;
  /*width: 100%;
  width: calc(100% + 80px);
  margin-left: calc(-40px);
  margin-right: calc(-40px);*/
}

iframe.articlevideo {
  margin: 0 auto 0 auto;
  display: block;
}

div.incontentlist .datefixedwidth, .attachedlistitem .datefixedwidth {
  float: left;
}

div.bottomcontent {
  padding: 0px 20px 20px 20px;
  line-height: 25px;
  /*overflow: hidden;*/
}

.article + div.bottomcontent {
  padding: 0px 40px 40px 40px;
}

div.mainblock a.linkcontent {
  display: inline-block;
  text-align: right;
  /* float: right; */
  margin-left: 10px;
  color: #a0a09e;
  font-size: 100%;
  text-transform: uppercase;
  /*line-height: 25px;*/
}

div.bottomcontent a.linkcontent {
  font-size: 85%;
}

div.bottomcontent div.likebutton.mini, div.bottomcontent div.likebuttonoff.mini {
  margin-top: -1px;
}

div.headercontent {
  padding: 10px 20px 0px 20px;
  margin: 0px;
  overflow: hidden;
  color: #a0a09e;
  font-size: 11.56px;
  text-transform: uppercase;
  line-height: 30px;
}

div.belowheadercontent {
  color: #a0a09e;
  font-size: 11.56px;
  text-transform: uppercase;
  line-height: 25px;
  margin-bottom: 20px;
}

h2 + div.belowheadercontent {
  margin-top: -20px;
}

div.headercontent h2 + div.belowheadercontent {
  margin-top: -5px;
}

div.belowheadercontent span {
  margin-right: 30px;
}

.limitcontentvertical {
  max-height: 750px;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.limitcontentvertical.limitvertical1 {
  max-height: 400px;
}

.limitcontentvertical.expanded {
  max-height: none;
  height: auto;
  overflow: inherit;
}

.limitcontentverticalend {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  padding-top: 60px;
  text-align: center;
  background-image: linear-gradient(to bottom, rgba(42, 42, 42, 0) 0%, var(--mainblock) 50%);
}

.limitcontentverticalend .showmoreverticalbutton {
  position: relative;
  top: -8px;
}

.nopadding {
  padding: 0px !important;
}

.videocontainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.videowrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fullimagecontainer, .fullimagecontainer > img {
  position: relative;
  display: block;
  width: 100%;
}

h1.header {
  color: var(--header-ink);
  padding: 0px 2px;
  font-size: 140%;
  line-height: 30px;
  font-weight: inherit;
  text-transform: uppercase;
  /* border-bottom: 1px dotted gray; */
}

h1.header.main {
  color: var(--orange-background);
  padding: 0px 2px;
  font-size: 165%;
  line-height: 30px;
  font-weight: inherit;
  text-transform: uppercase;
  /* border-bottom: 1px dotted gray; */
}

h1.header.withimage {
  padding: 20px 0px 0px 10px;
  border-bottom: 2px solid var(--main-bk-color);
  margin-top: -20px;
  background-repeat: repeat;
  background-position: left bottom;
  background-color: var(--main-bk-color);
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

div.actionmessage, div.actionmessageerror {
  padding: 20px;
}

div.actionmessage {
  background-color: var(--orange-background);
  color: var(--main-bk-color);
}

div.actionmessageerror {
  background-color: #683737;
  color: var(--menu-ink-color);
}

div.actionmessage.inline, div.actionmessageerror.inline {
  border-radius: 0px;
}

div.notice0, div.notice1, div.notice2, div.notice3, div.notice4 {
  padding: 20px;
  margin: 0px;
  border-radius: 3px;
}

div.notice0.small, div.notice1.small, div.notice2.small, div.notice3.small, div.notice4.small {
  padding: 7.5px 20px;
}

div.mainblock > div.notice0, div.mainblock > div.notice1, div.mainblock > div.notice2, div.mainblock > div.notice3, div.mainblock > div.notice4,
div.mainblockaction > div.notice0, div.mainblockaction > div.notice1, div.mainblockaction > div.notice2, div.mainblockaction > div.notice3, div.mainblockaction > div.notice4 {
  border-radius: 0px;
}

div.notice0 {
  background-color: var(--mainblock);
  color: #a0a09e;
}

div.notice1 {
  background-color: #683737;
  color: var(--main-ink-color);
}

div.notice2 {
  background-color: var(--orange-background);
  color: var(--main-bk-color);
}

div.notice3 {
  background-color: #4e5256;
  color: var(--main-ink-color);
}

div.notice4 {
  background-color: #404040;
  color: var(--main-ink-color);
}

div.footer {
  text-transform: uppercase;
  font-size: 85%;
  color: #777;
  text-align: center;
  padding: 50px 20px 20px 20px;
  margin: 0 auto 0 auto;
  clear: both;
  max-width: 1400px;
  min-width: 310px;
}

div.languageselector {
  margin-bottom: 20px;
  font-size: 120%;
  color: #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.footer .footeritems a:not(:empty), div.footer .footeritems span:not(:empty), div.languageselector a {
  border-left: solid #777 1px;
  margin-left: 7px;
  padding-left: 7px;
}

div.footer .footeritems a:first-child, div.footer .footeritems span:first-child, div.languageselector a:first-child {
  border-left: 0px;
}

div.footer .footeritems #adconsent-link a {
  margin-left: 0px;
  padding-left: 0px;
}

/* label - value views */
/*div.itempaircontainer { }*/
div.itempairlabel {
  font-size: 90%;
  color: #a0a09e;
  text-transform: uppercase;
  display: table-cell;
  line-height: 20px;
  margin: 0px;
  padding: 0px 10px 0px 0px;
  vertical-align: top;
  white-space: nowrap;
  /*overflow: hidden;*/
  box-sizing: border-box;
}

div.itempairvalue, div.itempairvalueright {
  display: table-cell;
  line-height: 20px;
  padding: 0px 0px 0px 5px;
  width: auto;
  box-sizing: border-box;
}

div.itempairspacer {
  display: table-cell;
  line-height: 20px;
  padding: 0 5px;
}

div.itempairvalueright {
  text-align: right;
  width: 100%;
}

/* forum */
div.forumthreadinlist {
  display: grid;
  grid-template-columns: 1fr 80px 180px;
  grid-template-rows: auto;
  align-items: center;
}

div.forumthreadinlist > div:nth-child(1) {
  align-self: start;
  padding-right: 20px;
}

div.forumthreadinlist > div:nth-child(2) {
  padding-right: 20px;
}

div.forumthreadinlist > div:nth-child(3) > .postername {
  display: block;
}

div.forumthreadinlist > div:nth-child(4) {
  padding: 0px 5px 2px 0px;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
}

div.forumpost {
  margin-bottom: 5px;
}

div.authorleft.preview div.authorside div.userprofileimage {
  margin-bottom: 0px;
}

div.authorleft.preview {
  min-height: 150px;
}

div.treeroot {
  margin: 0;
  padding: 5px;
}
div.treebranch {
  padding-left: 0.5rem;
}
div.treebranch.collapsed {
  display: none;
}
div.treeleaf{
  display: flex;
}
div.treeleaf > button.openable {
  text-transform: none;
  font-weight: inherit;
  font-size: inherit;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  width: calc(1lh + 6px);
  line-height: normal;
  flex-grow: 0;
}
div.treeleaf > a{
  flex-grow: 1;
}
div.treeleaf > a.kategclear{
  flex-grow: 0;
  padding-right: 7px;
  padding-left: 7px;
}
div.treeleaf > a, div.treeleaf > button.openable{
  text-decoration: none;
  background-color: var(--button-minor-face);
  color: var(--main-ink-color);
  padding: 3px;
  border-bottom: 1px solid var(--table-header-border);
}
div.treeleaf.selected > button.openable, div.treeleaf.selected > a,
div.treeleaf.active > button, div.treeleaf.active > a{
  background-color: var(--button-major-face) !important;
  color: var(--menu-ink-color)
}
div.treeleaf.selected > button.openable:hover, div.treeleaf.selected > a:hover,
div.treeleaf > a:hover, div.treeleaf > button.openable:hover{
  background-color: var(--orange-background) !important;
  color: var(--main-bk-color);
}
div.treeleaf > button:not(.openable){
  display: none;
}
div.treeleaf > button.openable > span.closed::before{
  content: '▷';
}
div.treeleaf > button.openable > span.opened::before{
  content: '▽';
}
div.treeindent {
  font-size: 2rem;
  text-align: left;
  width: 3rem;
}

.ishelp {
  cursor: help;
}

span.tooltip {
  cursor: help;
  border-bottom: 1px dotted var(--header-default);
  pointer-events: all;
}

span.tooltip span.helpmark, span.tooltip span.helpmarkleft {
  display: inline-block;
  width: 15px;
  margin-left: 5px;
  background-color: rgba(128, 128, 128, 0.4);
  color: var(--main-bk-color) !important;
  text-shadow: none;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  line-height: 15px;
  border-radius: 50%;
}

span.tooltipnoline {
  cursor: help;
  border-bottom: 0px dotted var(--header-default) !important;
}

span.tooltip span.helpmarkleft {
  margin: 0px 5px 0px 0px;
}

.likebutton span.tooltip {
  cursor: inherit;
}

/* --- forms --- */
div.formbody.inline {
  display: inline-block;
  vertical-align: middle;
}

/*
div.formbody.inline + div.formbody.inline,
.linkbutton + div.formbody.inline, div.formbody.inline + .linkbutton,
.actionbutton + div.formbody.inline, div.formbody.inline + .actionbutton {
   margin-left: 5px;
}*/
div.dropdownblock {
  float: left;
  text-align: right;
  font-size: 90%;
  color: #9d928d;
  font-weight: 500;
  text-transform: uppercase;
}

div.dropdownblockleft {
  float: left;
  font-size: 90%;
  color: #9d928d;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 5px;
}

div.dropdownblock select {
  width: 145px;
}

div.formelement {
  margin-bottom: 5px;
}

div.formelement:last-child {
  margin-bottom: 0px;
}

div.formbody.inline div.formelement {
  margin-bottom: 0px;
}

div.formmultiselect {
  background-color: #ffffff;
}

div.formelementfloat {
  float: left; /*padding-right: 5px;*/
}

div.formelementempty {
  margin-bottom: 5px;
  height: 40px;
  white-space: normal;
  padding-left: 5px;
  padding-right: 5px;
}

div.formseparatorspace {
  margin-bottom: 20px;
}

div.formelementcustomcontent {
  display: block;
  padding: 0px 10px 2px 6px;
  line-height: 20px;
  white-space: normal;
  /*margin-bottom: 3px;*/
}

div.formcolumn {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin-bottom: 5px;
  /*display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  vertical-align: top;
  align-items: stretch;
  gap: 0px 5px;
  flex: 0 1 100%;*/
}

div.formcolumn:not(.fullwidth) + div.formcolumn:not(.fullwidth) {
  padding-left: 10px;
}

div.formelementgroupinline {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  vertical-align: top;
  align-items: stretch;
  gap: 0px 5px;
}

div.formelementgroupinline::after { /* ... so the last items on the line of inline group won't grow */
  content: "";
  flex-grow: 1000000000;
}

div.formgrouptitle, div.formelementgrouptitle {
  font-size: 100%;
  color: #444;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 27px;
  border-radius: 2px;
}

/*div.formelementgrouptitle:not(:empty) {
  padding-left: 0px;
  padding-top: 15px;
}*/

div.formelementgroup {
  background-color: #d3d1cf;
  padding: 10px 10px 5px 10px;
  margin: 0px;
  margin-bottom: 5px;
  border-radius: 3px;
}

div.formelementgroup.container {
  background-color: #c7c5c1;
  margin: -10px;
  margin-bottom: 5px;
}

div.formelementgroup > div.formelementgroup {
  padding: 0px;
}

label.formlabel, label.formlabeltop, label.formlabelside, label.formlabelcolumn, label.formlabelcolumnext,
label.formlabelempty, label.formlabelemptytop, label.formlabelemptyside, label.formlabelemptycolumn, label.formlabelemptycolumnext,
.checkbox label {
  display: inline-block;
  font-size: 13.6px;
  color: #c9c7c5;
  /*text-transform: uppercase;*/
  text-align: left;
  line-height: 40px;
  background-color: #424242;
  margin: 0px 0px 0px 0px;
  padding: 0px 10px 0px 10px;
  min-width: 30%;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 0px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.checkbox label.toggleswitch {
  padding-left: 10px;
}

label.formlabeltop, label.formlabelemptytop {
  display: block;
  line-height: 25px;
  padding-top: 20px;
  padding-left: 5px;
  font-weight: 500;
}

label.formlabelempty, label.formlabelemptytop, label.formlabelemptyside, label.formlabelemptycolumn, label.formlabelemptycolumnext {
  background-color: transparent;
  height: 27px;
}

label.formlabelside {
  display: inline-block;
  line-height: 40px;
  margin: 0px;
  padding: 0px 10px 0px 10px;
  width: 100%;
  min-width: auto;
  font-weight: 500;
  border-radius: 0px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

div.mainblockaction label {
  background-color: var(--main-ink-color);
  color: #424242;
}

div.mainblockaction label.formlabelside {
  background-color: #c9c7c5;
  color: #424242;
}

div.formelement .checkbox {
  display: inline-block;
  width: 100%;
}

div.formelement.inlinecheckbox {
  display: inline-block;
  width: auto;
  flex-grow: 1;
}

div.formelement.inlinecheckbox .checkbox label {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
}

label.formlabelcolumn, label.formlabelcolumnext {
  width: 100%;
  margin-bottom: 0; /*$marginformbetween*/
  font-weight: 500;
  line-height: 25px;
  padding: 0px;
}

label.formlabelcolumnext {
  width: calc(100% + 5px);
  margin-left: -5px;
}

input, button {
  font-size: 13.6px;
  outline: 1px solid #c9c7c5;
  background-color: #ffffff;
  border: 0;
  /*height: 38px;*/
  line-height: 20px;
  /*line-height: 40px;*/
  padding: 0px 10px 0px 10px;
  margin: 0px;
  width: 100%;
  border-radius: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

div.menubuttonwrapper {
  position: relative;
}

div.menubuttonwrapper button {
  font-size: inherit;
  outline: initial;
  background-color: inherit;
  border: 0;
  height: unset;
  width: unset;
  min-width: 24px;
  min-height: 24px;
  border-radius: 9999px;
  padding: 5px;
  line-height: inherit;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25);
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.menubuttonwrapper button.usermenu {
  margin-right: 5px;
}

div.menubuttonwrapper.menuitems {
  display: none;
}

span.basketcounter {
  display:inline-block;
  position: absolute;
  bottom: -5px;
  left: -10px;
  background-color: var(--colorpositive);
  font-weight: 700;
  border-radius: 9999px;
  padding: 0 5px;
}

input::-webkit-input-placeholder {
  color: #bbb;
}

input:-moz-placeholder {
  color: #bbb;
}

input::-moz-placeholder {
  color: #bbb;
}

input:-ms-input-placeholder {
  color: #bbb;
}

textarea::-webkit-input-placeholder {
  color: #bbb;
}

textarea:-moz-placeholder {
  color: #bbb;
}

textarea::-moz-placeholder {
  color: #bbb;
}

textarea:-ms-input-placeholder {
  color: #bbb;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  font-size: 13.6px;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* input:hover   { outline: $outlineformthicknessfocus solid $colorlinkhover; background-color: $colorforminputback; } */
input:hover {
  outline: 2px solid #a9a7a5;
}

input:focus {
  outline: 2px solid var(--button-major-face);
  background-color: #ffffff;
}

input:disabled {
  background-color: var(--main-ink-color) !important;
}

input:disabled:hover {
  outline: 1px solid #c9c7c5;
}

input[type=checkbox] {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  padding: 0px;
  border: 2px solid #676f72;
  outline: 0;
  margin: 0px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.6);
  border-radius: 2px;
}

/* checkbox re-style */
.checkbox input[type=checkbox] {
  opacity: 0;
  display: none;
}

.checkbox label {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  height: 40px;
  line-height: 17px;
  font-weight: normal;
  width: 100%;
  color: var(--menu-ink-color) !important;
  background-color: #8f6666 !important;
  white-space: normal;
  text-transform: none;
  padding-left: 47px;
  margin: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 2px;
}

.checkbox input[type=checkbox]:checked + label {
  background-color: #527495 !important;
}

.checkbox label:not(.toggleswitch)::before, .checkbox label:not(.toggleswitch)::after {
  position: absolute;
  content: "";
  display: inline-block;
}

.checkbox label:not(.toggleswitch)::before {
  height: 32px;
  width: 32px;
  border: 4px solid #8f6666;
  left: 0px;
  top: 0px;
  background-color: #bd6161;
  cursor: pointer;
  border-radius: 2px;
}

.checkbox input[type=checkbox]:checked + label:not(.toggleswitch)::before {
  background-color: #58a3e7;
  border-color: #527495;
}

.checkbox label:not(.toggleswitch)::after {
  height: 6px;
  width: 17px;
  border-left: 0px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  /* transform: rotate(-45deg);*/
  left: 11px;
  top: 11px;
  cursor: pointer;
  content: "";
}

.checkbox input[type=checkbox]:checked + label:not(.toggleswitch)::after {
  height: 8px;
  width: 14px;
  border: 0px;
  border-left: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  transform: rotate(-45deg);
  left: 10px;
  top: 10px;
  cursor: pointer;
  content: "";
}

.checkbox input[type=checkbox]:focus + label:not(.toggleswitch)::before {
  outline: 0;
}

.checkbox input[type=checkbox]:disabled + label:not(.toggleswitch) {
  background-color: #666;
}

.neutralcheckbox label {
  background-color: #676f72 !important;
}

.neutralcheckbox input[type=checkbox]:not(:checked) + label.toggleswitch::after {
  content: attr(data-switchon);
}

.neutralcheckbox input[type=checkbox]:checked + label.toggleswitch::after {
  content: attr(data-switchoff);
}

.neutralcheckbox label:not(.toggleswitch)::before {
  background-color: #676f72;
  border-color: #676f72;
}

.neutralcheckbox label:not(.toggleswitch)::after {
  border: 2px solid #a5a5a5;
  width: 15px;
  height: 15px;
  left: 10px;
  top: 10px;
}

/*.checkbox:hover label, .checkbox:hover input[type="checkbox"]:checked + label, .neutralcheckbox:hover label { background-color: $colorlinkhover !important; color: $colorhighlighttext !important; }
.checkbox:hover label::before { border-color: $colorlinkhover !important; background-color: $colorlinkhover !important; } */
/* radio classic re-style */
div.radio input:checked, div.radio input:not(:checked) {
  position: absolute;
  left: -9999px;
}

div.radio input:checked + label, div.radio input:not(:checked) + label {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  cursor: pointer;
  line-height: 30px;
  display: inline-block;
  color: #666;
}

div.radio input:checked + label::before, div.radio input:not(:checked) + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border: 1px solid #c7c7c7;
  border-radius: 2px;
  background: #ffffff;
}

div.radio input:checked + label::after, div.radio input:not(:checked) + label::after {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--orange-medium);
  position: absolute;
  top: 7px;
  left: 4px;
  border-radius: 2px;
  /*-webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;*/
}

div.radio input:not(:checked) + label::after {
  opacity: 0;
  transform: scale(0);
}

div.radio input:checked + label::after {
  opacity: 1;
  transform: scale(1);
}

/* radio switch re-style */
div.radioswitch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
}

div.radioswitch input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

div.radioswitch label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #676f72;
  color: var(--menu-ink-color);
  text-align: center;
  overflow: hidden;
  white-space: normal;
  min-height: 40px;
  height: 50px;
  line-height: 15px;
  padding: 5px 10px 5px 10px;
  margin: 0px;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25);
}

div.radioswitch label:hover {
  cursor: pointer;
}

div.radioswitch input:checked + label {
  background-color: var(--orange-background);
  color: var(--dark-ink-color);
  border: 2px solid #676f72;
}

div.radioswitch input.positivebutton:checked + label {
  background-color: #58a3e7;
  color: var(--menu-ink-color);
}

div.radioswitch input.negativebutton:checked + label {
  background-color: #bd6161;
  color: var(--menu-ink-color);
}

div.radioswitch label:first-of-type {
  border-radius: 2px 0 0 2px;
}

div.radioswitch label:last-of-type {
  border-radius: 0 2px 2px 0;
}

select {
  font-size: 13.6px;
  text-transform: none;
  outline: 1px solid #c9c7c5;
  border: 0;
  height: 38px;
  background-color: #ffffff;
  color: #151716;
  width: 100%;
  line-height: 40px;
  margin: 0px;
  margin-top: 1px;
  padding: 0px 6px 0px 6px;
  cursor: pointer;
  border-radius: 2px;
}

/* select:hover { outline: $outlineformthicknessfocus solid $colorlinkhover; background-color: $colorforminputback !important; color: #151716 } */
select:hover {
  outline: 2px solid #a9a7a5;
}

select:focus {
  outline: 2px solid var(--button-major-face);
  background-color: #ffffff !important;
}

select option {
  text-transform: none;
}

select optgroup {
  font-weight: 500;
}

select[multiple] {
  color: var(--menu-ink-color);
  overflow: hidden;
} /* hide text to prevent flashes with tokenizer */
select[multiple] option:checked {
  color: var(--menu-ink-color);
  background-color: #ffffff;
}

select[multiple].extraspace {
  min-height: 160px;
}

select[multiple].extrahalfspace {
  min-height: 98px;
}

select:disabled {
  background-color: var(--main-ink-color);
  cursor: inherit;
}

select:disabled:hover, select:disabled:focus {
  outline: 1px solid #c9c7c5;
}

/* select re-style */
.formselect {
  position: relative;
}

.formselect select::-ms-expand {
  display: none;
}

.formselect::after:not([multiple]) {
  content: "▼";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 8px;
  background: #888;
  color: var(--menu-ink-color);
  line-height: 40px;
  pointer-events: none;
  text-shadow: none;
}

.formselect:hover::after {
  color: var(--orange-background);
}

textarea {
  width: 100%;
  height: 80px;
  margin: 0px;
  padding: 10px;
  background-color: var(--control-background);
  outline: 1px solid var(--control-outline);
  border: 0;
  color: #151716;
  font-size: 13.6px;
  line-height: 20px;
  resize: vertical;
  border-radius: 2px;
  font-family: inherit;
}

textarea:hover {
  outline: 2px solid var(--control-outline-hover);
  background-color: var(--control-background);
}

textarea:focus {
  outline: 2px solid var(--button-major-face);
  background-color: var(--control-background);
}

textarea#inputlarge {
  height: 500px;
}

textarea.richtexteditor, textarea.richtexteditorautosave {
  height: 300px;
}

textarea.richtexteditor:hover, textarea.richtexteditor:focus, textarea.richtexteditorautosave:hover, textarea.richtexteditorautosave:focus {
  background-color: var(--control-background) !important;
}

textarea:disabled {
  outline: 0;
  border-bottom: 2px solid #aaa;
  background-color: #aaa !important;
}

@-webkit-keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* validation */
div.inputvalidationmsg {
  display: block;
  opacity: 0;
  height: 0px;
  overflow: hidden;
}

div.inputvalidationmsg > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8b3838;
  color: var(--menu-ink-color);
  font-size: 95%;
  line-height: 110%;
  text-align: center;
  transition: opacity 0.25s ease-out;
  opacity: 0;
  padding: 5px 10px;
  overflow: visible;
  z-index: 2;
  width: 40%;
  min-width: 100px;
  min-height: 50px;
  top: -50px;
  margin-left: auto;
  border-radius: 2px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

div.inputvalidationmsg > div:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border-right-color: #8b3838;
  border-width: 10px;
  margin-top: -10px;
}

input[type=email]:not(:-moz-placeholder-shown):not(:focus):invalid:required + div.inputvalidationmsg > div {
  opacity: 1;
}

input[type=email]:not(:-ms-input-placeholder):not(:focus):invalid:required + div.inputvalidationmsg > div {
  opacity: 1;
}

input[type=email]:not(:placeholder-shown):not(:focus):invalid:required + div.inputvalidationmsg > div {
  opacity: 1;
}

input[type=email]:not(:-moz-placeholder-shown):not(:focus):invalid:required + div.inputvalidationmsg {
  opacity: 1;
  overflow: visible;
}

input[type=email]:not(:-ms-input-placeholder):not(:focus):invalid:required + div.inputvalidationmsg {
  opacity: 1;
  overflow: visible;
}

input[type=email]:not(:placeholder-shown):not(:focus):invalid:required + div.inputvalidationmsg {
  opacity: 1;
  overflow: visible;
}

/* infield labels */
.infield label.formlabel, .infield label.formlabeltop, .infield label.formlabelside,
.infield label.formlabelempty, .infield label.formlabelemptytop, .infield label.formlabelemptyside {
  display: block;
  z-index: 2;
  position: relative;
  text-transform: none;
  pointer-events: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 20px;
  line-height: 20px;
  font-weight: 500;
  font-size: 13px;
  color: var(--form-label) !important;
  background-color: transparent !important;
  padding-top: 2px;
  padding-left: 6px;
  border-radius: 0;
}

.infield input[type=text]:not(.dropdown-input), .infield input[type=number], .infield input[type=date], .infield input[type=password], .infield input[type=email], .infield input[type=search],
.infield select {
  padding-top: 18px;
  height: 50px;
  margin-top: -20px;
  position: relative;
}

.infield textarea {
  margin-top: 2px;
  position: relative;
}

.infield.emptylabel input[type=text], .infield.emptylabel input[type=number], .infield.emptylabel input[type=date], .infield.emptylabel input[type=password], .infield.emptylabel input[type=email], .infield.emptylabel input[type=search],
.infield.emptylabel select, .infield.emptylabel .ts-control {
  margin-top: 0px;
  padding-top: 0px;
}

.infield.emptylabel textarea, .infield.emptylabel .ts-wrapper.multi .ts-control {
  margin-top: 0px;
  padding-top: 10px;
}

.infield input[type=submit], .infield input[type=button], .infield input[type=reset], .infield button {
  height: 50px;
}

.infield div.radioswitch {
  display: flex;
}

.infield.emptylabel div.radioswitch {
  min-height: 50px;
}

div.infield:not(.inlinecheckbox) > .checkbox label {
  height: 50px;
  padding-left: 57px;
}

div.infield:not(.inlinecheckbox) > .checkbox label.toggleswitch {
  padding-left: 10px;
}

div.infield:not(.inlinecheckbox) > .checkbox > label:not(.toggleswitch)::before {
  height: 42px;
  width: 42px;
}

div.infield:not(.inlinecheckbox) > .checkbox > label:not(.toggleswitch)::after {
  left: 16px;
  top: 16px;
}

div.infield:not(.inlinecheckbox) > .checkbox > input[type=checkbox]:checked + label:not(.toggleswitch)::after {
  left: 15px;
  top: 15px;
}

div.infield:not(.inlinecheckbox) > .neutralcheckbox > label:not(.toggleswitch)::after {
  left: 15px;
  top: 15px;
}

div.formelementempty.infield {
  height: 50px;
}

input[type=submit], input[type=button], input[type=reset], button {
  outline: 0;
  border: 0px solid var(--button-major-face);
  background-color: var(--button-major-face);
  color: var(--menu-ink-color);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  /*width: 100%;
  height: 40px;*/
  margin: 0px;
  padding: 15px 20px;
  /*padding-left: 20px;
  padding-right: 20px;*/
  cursor: pointer;
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);*/
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

/* button:hover */
input[type=submit]:hover, input[type=submit]:focus,
input[type=reset]:hover, input[type=reset]:focus,
input[type=button]:hover, input[type=button]:focus {
  background-color: var(--orange-background) !important;
  color: var(--dark-ink-color) !important;
}

button:hover, button:focus {
  background-color: var(--orange-background);
  color: var(--dark-ink-color);
}

input[type=submit]:disabled, input[type=reset]:disabled {
  background-color: var(--button-minor-face) !important;
  color: var(--menu-ink-color) !important;
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

input[type=submit]:disabled:hover, input[type=reset]:disabled:hover {
  background-color: var(--button-minor-face) !important;
  color: var(--menu-ink-color) !important;
  outline: 0 solid var(--button-minor-face) !important;
  opacity: 0.5;
}

input[type=submit].nobackbutton, input[type=reset].nobackbutton {
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--button-major-face) !important;
}

input[type=submit].nobackbutton:hover, input[type=reset].nobackbutton:hover {
  color: var(--orange-background) !important;
  background-color: transparent !important;
}

input[type=submit].inlinebutton, input[type=reset].inlinebutton, button.inlinebutton, span.inlinebutton, a.inlinebutton, div.likebutton, div.likebuttonoff, div.likebuttondisabled {
  display: inline-block;
  background-color: var(--button-major-face);
  color: var(--menu-ink-color);
  font-size: 13.6px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  width: auto;
  height: auto;
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

button.squaresvgbutton {
  display: inline-block;
  background-color: var(--button-major-face);
  color: var(--menu-ink-color);
  padding: 3px;
  width: 22px;
  height: 22px;
  font-size: 12px;
}

button.squaresvgbutton svg {
  width: 100%;
  height: 100%;
}

input[type=submit].inlinebutton.large, input[type=reset].inlinebutton.large, button.inlinebutton.large, span.inlinebutton.large, a.inlinebutton.large, div.likebutton.large, div.likebuttonoff.large, div.likebuttondisabled.large {
  padding: 10px 20px 10px 20px;
  font-size: 16px;
  line-height: 20px;
}

a.linkbuttonflat {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1px 1px;
  padding: 1px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: var(--button-major-face);
  text-align: center;
  color: var(--menu-ink-color);
  text-transform: uppercase;
  cursor: pointer;
}

a.linkbutton, a.linkbuttonlarge, span.linkbutton, span.linkbuttonlarge, a.actionbutton, a.actionbuttonlarge, span.actionbutton, span.actionbuttonlarge, div.blocktoggletrigger {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0px 5px;
  padding: 15px 20px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-size: 16px;
  line-height: 20px;
  background: var(--button-major-face);
  /*white-space: nowrap;*/
  margin-right: 0px;
  text-align: center;
  color: var(--menu-ink-color);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

.linkbutton.nowrap, .linkbuttonlarge.nowrap, .linkbuttonflat.nowrap {
  flex-direction: row !important;
}

/*a.actionbutton, a.actionbuttonlarge, span.actionbutton, span.actionbuttonlarge {
   //height: calc($lineheightform + ($lineheightform / 4));
   line-height: $lineheightform;
   margin: 0px;
   padding: 0px 20px 0px 20px;
}*/
.buttonnote {
  font-size: 85%;
  font-weight: 300;
  text-transform: none;
  white-space: normal;
}

.minor .buttonnote.minor {
  color: #edeff0;
}

input[type=submit].iconbutton {
  padding: 0px 9px;
  font-size: 16px;
}

input[type=submit].iconbuttonlarge {
  font-size: 22px;
}

input[type=submit].deletebutton, input[type=reset].deletebutton, span.deletebutton, div.deletebutton {
  background: inherit;
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
}

.tag + span.deletebutton {
  background-color: #8b3838;
  margin-left: -3px;
}

input[type=submit].negativebutton, span.negativebutton, div.negativebutton, a.negativebutton {
  background: inherit;
  background-color: #8b3838;
}

input[type=submit].positivebutton, input[type=reset].positivebutton, span.positivebutton, div.positivebutton, a.positivebutton {
  background: inherit;
  background-color: #58a3e7;
}

input[type=submit].extraspace {
  height: 60px;
}

input[type=submit].minor, input[type=reset].minor, button.minor {
  background: inherit;
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
}

input[type=submit].minor:hover, input[type=reset].minor:hover, button.minor:hover {
  background-color: var(--orange-background);
  color: var(--dark-ink-color);
}

div.blocktogglecontainer {
  display: block;
}

div.blocktogglecontainer.withgrid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

div.blocktoggletrigger {
  background-color: #676f72;
  margin-bottom: 10px;
  font-size: 13.6px;
  font-weight: 400;
  display: inline-block;
  white-space: nowrap;
}

/*div.blocktoggletriggerselected { }*/
div.blocktoggleplaceholder {
  margin-bottom: 10px;
}

div.blocktogglecontainer.withgrid div.blocktogglecontent {
  flex: 1;
}

div.blocktogglecontainer.withgrid div.blocktoggleplaceholder {
  flex: 1 1 50%;
}

div.blocktoggletrigger .pictofont {
  width: 15px;
}

/*a.linkbutton + a.linkbutton:not(.quickmenu), a.linkbuttonlarge + a.linkbutton:not(.quickmenu) { margin-top: 5px; }*/
a.linkbuttonlarge, span.linkbuttonlarge, a.actionbuttonlarge, span.actionbuttonlarge {
  padding: 25px;
}

a.linkbutton.minor, a.linkbuttonlarge.minor, span.linkbutton.minor, span.linkbuttonlarge.minor,
a.linkbuttonflat.minor, span.linkbuttonflat.minor,
a.actionbutton.minor, a.actionbuttonlarge.minor, span.actionbutton.minor, span.actionbuttonlarge.minor {
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
}

.linkbutton.disabled, .linkbuttonlarge.disabled, .linkbuttonflat.disabled {
  background-color: #383838;
  color: #a0a09e;
  cursor: auto;
}

a.linkbutton:not(.disabled):hover, a.linkbutton:not(.disabled):active, span.linkbutton:not(.disabled):hover, span.linkbutton:not(.disabled):active,
a.linkbuttonlarge:not(.disabled):hover, a.linkbuttonlarge:not(.disabled):active, span.linkbuttonlarge:not(.disabled):hover, span.linkbuttonlarge:not(.disabled):active,
a.linkbuttonflat:not(.disabled):hover, a.linkbuttonflat:not(.disabled):active, span.linkbuttonflat:not(.disabled):hover, span.linkbuttonflat:not(.disabled):active,
a.linkbutton.selected, span.linkbutton.selected, div.blocktoggletrigger:hover,
a.actionbutton:hover, a.actionbutton:active, span.actionbutton:hover, span.actionbutton:active,
a.actionbuttonlarge:hover, a.actionbuttonlarge:active, span.actionbuttonlarge:hover, span.actionbuttonlarge:active {
  background-color: var(--orange-background);
  color: var(--dark-ink-color);
}

a.linkbutton:not(.disabled):hover .minor, a.linkbutton:not(.disabled):active .minor, span.linkbutton:not(.disabled):hover .minor, span.linkbutton:not(.disabled):active .minor,
a.linkbuttonlarge:not(.disabled):hover .minor, a.linkbuttonlarge:not(.disabled):active .minor, span.linkbuttonlarge:not(.disabled):hover .minor, span.linkbuttonlarge:not(.disabled):active .minor,
a.linkbuttonflat:not(.disabled):hover .minor, a.linkbuttonflat:not(.disabled):active .minor, span.linkbuttonflat:not(.disabled):hover .minor, span.linkbuttonflat:not(.disabled):active .minor {
  color: var(--dark-ink-color);
}

div.subcontent0:not(.smallgaps) > div.mainblock + .linkbutton,
div.subcontent1:not(.smallgaps) > div.mainblock + .linkbutton,
div.subcontent2:not(.smallgaps) > div.mainblock + .linkbutton,
div.subcontent3:not(.smallgaps) > div.mainblock + .linkbutton,
div.subcontent0:not(.smallgaps) > div.mainblock + .actionbutton,
div.subcontent1:not(.smallgaps) > div.mainblock + .actionbutton,
div.subcontent2:not(.smallgaps) > div.mainblock + .actionbutton,
div.subcontent3:not(.smallgaps) > div.mainblock + .actionbutton {
  margin-top: 1px;
  /*margin-top: -3px;
  z-index: 1;

  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  border-top-right-radius: 0px;*/
}

div.blocktogglecontent {
  display: none;
  min-width: 100%;
}

.clickable {
  cursor: pointer;
}

.cornerbutton {
  margin-right: -10px;
  margin-left: 10px;
}

.inlinebutton.minor {
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
}

.inlinebutton.disabled {
  background-color: #383838;
  color: #a0a09e;
}

.toggleactionbuttontrue, .toggleactionbuttonset, .selectedbutton {
  background-color: #58a3e7 !important;
  color: var(--menu-ink-color);
}

.toggleactionbuttonfalse {
  background-color: var(--button-major-face);
}

.toggleactionbuttontrue:hover {
  background-color: var(--orange-background) !important;
  color: var(--dark-ink-color) !important;
}

.inlinebutton.nobackground {
  background-color: transparent;
  color: var(--orange-medium);
  box-shadow: none;
}

.toggleactionbuttontrue.nobackground {
  background-color: transparent !important;
  color: var(--colorpositive);
  box-shadow: none;
}

.inlinebutton:not(.disabled):hover {
  background-color: var(--orange-background) !important;
  color: var(--dark-ink-color) !important;
}

.inlinebutton.active, .inlinebutton.tagfilter.active {
  background-color: var(--orange-background);
  color: var(--dark-ink-color);
}

.inlinebutton.tagfilter {
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
  text-transform: none;
  font-size: 95%;
}

.inlinebutton.iconbutton {
  width: 30px;
  height: 30px;
  font-size: 16px;
  padding: 0px;
}

h1 .inlinebutton {
  padding: 0px 10px 0px 10px;
  font-size: 13.6px;
  line-height: 30px;
}

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

table.fixed {
  table-layout: fixed;
}

table.bordered {
  border: 1px solid var(--table-header);
}

table caption {
  color: var(--header-default);
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
}

th {
  text-align: left;
  padding: 10px 10px 3px 10px;
  color: var(--header-default);
  background-color: var(--table-header);
  text-transform: uppercase;
  border-bottom: 1px solid var(--table-header-border);
  font-weight: 400;
  vertical-align: bottom;
  white-space: nowrap;
  outline: 0 !important;
}

th.sortable {
  cursor: pointer;
}

thead.sticky {
  position: sticky;
  top: 0;
}

tfoot.sticky {
  position: sticky;
  bottom: 0;
}

th.sorting:hover, th.sorting_asc:hover, th.sorting_desc:hover {
  background-color: #645e58;
}

.tablesorter th:not(.sorting_disabled) {
  padding-right: 20px;
}

th.noborder {
  border-bottom: 0px solid var(--table-header-border);
}

tfoot th {
  border-bottom: 0px solid var(--table-header-border);
  border-top: 1px solid var(--table-header-border);
}

td {
  padding: 4px 10px;
  background-clip: padding-box;
  border-radius: 0px;
  vertical-align: top;
  white-space: nowrap;
  border-bottom: 1px solid var(--table-border);
}

th.nopadding, td.nopadding {
  padding: 0px;
}

th.lowpadding, td.lowpadding {
  padding: 2px 10px;
}

th.extrapadding, td.extrapadding {
  padding: 10px 10px;
}

tr {
  background-color: var(--table-row);
}

tr:nth-child(2n+1) {
  background-color: var(--table-row-odd);
}

tr.positive {
  background-color: #3d4246;
}

tr.negative {
  background-color: #463738;
}

tr:hover, table.withhiddenrows tr:hover {
  background-color: var(--table-row-hover);
}

tr.nohover, tr.nohover:hover {
  background-color: #2b2a29;
}

tr.highlight {
  background-color: var(--table-row-highlight);
}

tr.separatorabove:not(:first-child) td, tr.separatorabove:not(:first-child) th {
  border: 0;
  border-top: 10px solid var(--main-bk-color);
}

tr.separator + tr:not(.child) td, tr.separator + tr:not(.child) th,
tr.separator + tr.child + tr td, tr.separator + tr.child + tr th {
  border: 0;
  border-top: 10px solid var(--main-bk-color);
}

tr.subheader {
  background-color: var(--table-header);
}

tr.subheader td {
  color: var(--header-default);
}

tr.subheader:hover {
  background-color: var(--table-header) !important;
}

/*th.bordered, td.bordered { border-top: 2px solid #cb8b51; border-bottom: 2px solid #cb8b51; }*/
td.subheader.dtr-control {
  pointer-events: none !important;
}

td.subheader.dtr-control::before {
  display: none !important;
}

td.wrap {
  white-space: normal;
}

td.breakword {
  word-break: break-word;
}

td.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}

td.lineright, th.lineright {
  border-right: 1px solid var(--table-border);
}

td.alignright, th.alignright {
  text-align: right;
}

td.aligncenter, th.aligncenter {
  text-align: center;
}

tr.onelinehover td div {
  height: 15px;
  overflow: hidden;
}

tr.onelinehover:hover td {
  padding-bottom: 20px;
  border-top: 2px solid #cb8b51;
  border-bottom: 2px solid #cb8b51;
}

tr.onelinehover:hover td div {
  height: auto;
  overflow: visible;
}

tr.onelinehover td div.formelement {
  overflow: visible;
}

tr.multilinehover td div {
  height: 15px;
  overflow: hidden;
}

tr.multilinehover:hover td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-top: 2px solid #cb8b51;
  border-bottom: 2px solid #cb8b51;
}

/* collapsible table rows */
tr.hasdetails {
  cursor: pointer;
}

tr.hasdetails:hover {
  background-color: #674936;
}

tr.hasdetails td.details-control {
  cursor: pointer;
  padding: 6px 0px 0px 5px;
}

tr.hasdetails.shown {
  background-color: #674936;
}

tr.details td {
  padding-bottom: 20px;
  border-bottom: 5px solid #1d1e1f;
}

tr.hasdetails td div.collapser {
  width: 6px;
  height: 6px;
  border-right: 2px solid #ff9030;
  border-bottom: 2px solid #ff9030;
  transform-origin: 3px 3px;
  transform: rotate(-45deg);
}

tr.hasdetails.shown td.details-control div.collapser {
  transform: rotate(45deg);
  transform-origin: 7px 5px;
}

/*tr.hasdetails.shown td.details-control, tr.details td:first-child { border-left: 3px solid #ff9030; } */
tr.hasdetails:hover td div.collapser, div.collapser:hover {
  border-color: #eee;
}

/* article  tables */
article table, div.article table {
  width: auto;
  border: 1px solid var(--table-header);
}

article td:not(:last-child), article th:not(:last-child),
div.article td:not(:last-child), div.article th:not(:last-child) {
  border-right: 1px solid var(--table-border);
}

article tr, div.articlele tr {
  background-color: #353535;
}

article tr:nth-child(2n+1), div.article tr:nth-child(2n+1) {
  background-color: #393939;
}

article th, article td, div.article th, div.article td {
  white-space: initial;
  overflow-wrap: break-word;
}

/* misc layout tables */
table.layout {
  border: 0px solid #000;
  border-spacing: 0px;
  background: transparent;
  margin: 0px;
}

table.layout tr {
  background: transparent;
}

table.layout tr:hover {
  background: transparent;
}

table.layout td {
  padding: 0px;
  border: 0px solid #000;
  white-space: normal;
}

/* datatables */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer;
  /*cursor: hand;*/
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 20px;
}

/*table.dataTable thead .sorting {
  background-image: url("images/sort_both.png");
  background-position: right bottom 3px;
}
table.dataTable thead .sorting_asc {
  background-image: url("images/sort_asc.png");
  background-position: right bottom 3px;
}
table.dataTable thead .sorting_desc {
  background-image: url("images/sort_desc.png");
  background-position: right bottom 3px;
}
table.dataTable thead .sorting_asc_disabled {
  background-image: url("images/sort_asc_disabled.png");
  background-position: right bottom 3px;
}
table.dataTable thead .sorting_desc_disabled {
  background-image: url("images/sort_desc_disabled.png");
  background-position: right bottom 3px;
}*/
table.dataTable thead .sorting::after {
  content: "\f0dc";
  color: var(--table-header-border);
  font-family: "fontello";
  position: absolute;
  line-height: 16px;
  margin-left: 5px;
}

table.dataTable thead .sorting_asc::after {
  content: "\f0de";
  color: var(--orange-background);
  font-family: "fontello";
  position: absolute;
  line-height: 16px;
  margin-left: 5px;
}

table.dataTable thead .sorting_desc::after {
  content: "\f0dd";
  color: var(--orange-background);
  font-family: "fontello";
  position: absolute;
  line-height: 16px;
  margin-left: 5px;
}

table.dataTable thead .sorting_asc_disabled::after {
  content: "\f0de";
  color: var(--table-header-border);
  font-family: "fontello";
  position: absolute;
  line-height: 16px;
  margin-left: 5px;
}

table.dataTable thead .sorting_desc_disabled::after {
  content: "\f0dd";
  color: var(--table-header-border);
  font-family: "fontello";
  position: absolute;
  line-height: 16px;
  margin-left: 5px;
}

table.fixedHeader-floating {
  position: fixed !important;
  background-color: white;
}

table.fixedHeader-floating.no-footer {
  border-bottom-width: 0;
}

table.fixedHeader-locked {
  position: absolute !important;
  background-color: white;
}

@media print {
  table.fixedHeader-floating {
    display: none;
  }
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
  cursor: default !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty::before {
  display: none !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  position: relative;
  padding-left: 40px;
  cursor: pointer;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  top: 15px;
  left: 5px;
  height: 20px;
  width: 20px;
  margin-top: -10px;
  display: block;
  position: absolute;
  color: var(--menu-ink-color);
  border: 0px solid #ffffff;
  border-radius: 1em;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  /*font-weight: 500;*/
  font-size: 20px;
  line-height: 20px;
  content: "+";
  background-color: var(--button-minor-face);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
  content: "-";
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
}

table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
  padding-left: 27px;
}

table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control::before {
  left: 4px;
  height: 14px;
  width: 14px;
  border-radius: 14px;
  line-height: 14px;
  text-indent: 3px;
}

table.dataTable.dtr-column > tbody > tr > td.dtr-control,
table.dataTable.dtr-column > tbody > tr > th.dtr-control,
table.dataTable.dtr-column > tbody > tr > td.control,
table.dataTable.dtr-column > tbody > tr > th.control {
  position: relative;
  cursor: pointer;
}

table.dataTable.dtr-column > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control::before,
table.dataTable.dtr-column > tbody > tr > td.control::before,
table.dataTable.dtr-column > tbody > tr > th.control::before {
  top: 50%;
  left: 5px;
  height: 20px;
  width: 20px;
  margin-top: -10px;
  display: block;
  position: absolute;
  color: var(--menu-ink-color);
  border: 0px solid #ffffff;
  border-radius: 1em;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  /*font-weight: 500;*/
  font-size: 20px;
  line-height: 20px;
  content: "+";
  background-color: var(--button-minor-face);
}

table.dataTable.dtr-column > tbody > tr.parent td.dtr-control::before,
table.dataTable.dtr-column > tbody > tr.parent th.dtr-control::before,
table.dataTable.dtr-column > tbody > tr.parent td.control::before,
table.dataTable.dtr-column > tbody > tr.parent th.control::before {
  content: "-";
  background-color: var(--button-minor-face);
  color: var(--menu-ink-color);
}

table.dataTable > tbody > tr.child {
  padding: 0.5em 1em;
}

table.dataTable > tbody > tr.child:hover {
  background: transparent !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  margin-left: 25px;
  padding: 0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
  padding-top: 5px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
  padding-top: 0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
  border-bottom: none;
}

table.dataTable > tbody > tr.child span.dtr-title {
  display: inline-block;
  min-width: 100px;
  font-weight: normal;
  color: var(--header-default);
}

table.dataTable > tbody > tr.child span.dtr-data {
  white-space: normal;
}

table.dataTable > tbody > tr.child td.child {
  border-bottom: 5px solid var(--main-bk-color);
}

/*
table.dataTable > tbody > tr.child tr.childrow {
  display: grid;
  grid-template-columns: minmax(min-content, 150px) 1fr;
  grid-auto-rows: auto;
  justify-items: start;
  align-items: start;
  justify-content: start;
  grid-gap: 20px;
}*/
table.dataTable > tbody > tr.child tr.childrow > td.title {
  font-weight: normal;
  color: var(--header-default);
  text-transform: uppercase;
  font-size: 90%;
  width: 20%;
  padding-right: 20px;
}

table.dataTable > tbody > tr.taggeditem.filterhidden + tr.child {
  display: none;
}

div.dtr-modal {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  padding: 10em 1em;
}

div.dtr-modal div.dtr-modal-display {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  z-index: 102;
  overflow: auto;
  background-color: #f5f5f7;
  border: 1px solid black;
  border-radius: 0.5em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

div.dtr-modal div.dtr-modal-content {
  position: relative;
  padding: 1em;
}

div.dtr-modal div.dtr-modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 1px solid #eaeaea;
  background-color: #f9f9f9;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 12;
}

div.dtr-modal div.dtr-modal-close:hover {
  background-color: #eaeaea;
}

div.dtr-modal div.dtr-modal-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.6);
}

/* pagination */
div.paginationcontainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px 10px;
  border-spacing: 0px;
  padding: 0px;
  margin: 0px 0px 0px 0px;
  text-transform: none;
  overflow: hidden;
  position: relative;
  height: auto;
  text-align: right;
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
}

ul.pagination {
  text-align: right;
  color: var(--menu-ink-color);
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 2px;
}

ul.pagination li {
  display: inline;
  padding: 0px;
}

ul.pagination li.dot {
  display: inline-block;
  line-height: 35px;
  padding: 0px 4px 0px 4px;
}

ul.pagination li.left {
  float: left;
}

ul.pagination a {
  display: inline-block;
  padding: 10px 20px;
  background: var(--button-minor-face);
  white-space: nowrap;
  margin: 0px;
  text-align: center;
  color: var(--menu-ink-color);
  font-size: 13.6px;
  line-height: 20px;
  text-transform: uppercase;
  border-radius: 2px;
}

ul.pagination a.large {
  padding: 20px 40px 20px 40px;
  font-size: 16px;
}

ul.pagination a.active {
  background-color: var(--button-major-face);
  color: var(--menu-ink-color);
}

/*ul.pagination a::after {
   content: '|';
   color: #888;
   margin-left: 5px;
   margin-right: -11px;
} */
ul.pagination a:hover {
  text-decoration: none;
  background: var(--orange-background);
  color: var(--dark-ink-color);
}

ul.pagination a.current {
  background: var(--orange-background);
  color: var(--dark-ink-color);
}

ul.pagination .page_info {
  color: #aaa;
  margin-right: 10px;
}

div.paginationjump {
  display: block;
  text-align: right;
  margin: 0px;
  padding: 0px;
  width: 170px;
}

div.paginationjump .formcolumn {
  margin-bottom: 0px;
}

div.paginationjump div.formcolumn:not(.fullwidth) + div.formcolumn:not(.fullwidth) {
  padding-left: 3px;
}

div.paginationjump input[type=number] {
  width: 50px;
  height: 40px;
  line-height: 20px;
  outline: 0;
}

div.paginationjump input[type=submit] {
  height: 40px;
}

div.paginationjump .info {
  color: #aaa;
  width: 300px;
  line-height: 30px;
  display: inline-block;
  margin-right: 5px;
}

img.mailicon {
  width: 16px;
  height: 16px;
  float: left;
  margin-right: 0px;
}

img.mailiconlarge {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 15px;
}

span.platformpc, span.platformxbox, span.platformps4, span.platformany {
  font-size: 12px;
  color: #aaa;
  width: 20px;
  display: inline-block;
  text-align: center;
}

span.platformxbox {
  color: #24b34b;
}

span.platformps4 {
  color: #5f94d3;
}

/* clipboard button */
span.clipboardbutton, span.clipboardbuttonsmall {
  position: relative;
  margin-left: 8px;
  padding: 4px 6px;
  vertical-align: bottom;
  font-size: 14px !important;
  font-weight: 500;
  color: var(--orange-medium) !important;
  border: 0px solid var(--button-major-face);
  border-radius: 2px;
  cursor: pointer;
}

span.clipboardbuttonsmall {
  font-size: 13px !important;
  margin-left: 5px;
  padding: 3px 4px;
  color: #888 !important;
}

.clipboardbutton:hover, .clipboardbuttonsmall:hover {
  background-color: var(--orange-background) !important;
  color: var(--dark-ink-color) !important;
  border: 0px solid var(--orange-background);
}

div.report-link {
  line-height: 0;
  z-index: initial !important;
  padding-right: 3px;
  margin-top: -3px;
}

div.advertmargin1 {
  margin-top: 20px;
}

div.advertmargin2 {
  margin-top: 30px;
}

div.advertmargin3 {
  margin-top: 50px;
}

div.advertmargin4 {
  margin-top: 20px;
  margin-bottom: 20px;
}

@-webkit-keyframes pulsepositive {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 173, 238, 0.6);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(102, 173, 238, 0);
  }
  33% {
    box-shadow: 0 0 0 0 rgba(102, 173, 238, 0);
  }
}

@keyframes pulsepositive {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 173, 238, 0.6);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(102, 173, 238, 0);
  }
  33% {
    box-shadow: 0 0 0 0 rgba(102, 173, 238, 0);
  }
}
@-webkit-keyframes pulseneutral {
  0% {
    box-shadow: 0 0 0 0 rgba(150, 150, 150, 0.6);
  }
  33% {
    box-shadow: 0 0 0 10px rgba(150, 150, 150, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(150, 150, 150, 0);
  }
}
@keyframes pulseneutral {
  0% {
    box-shadow: 0 0 0 0 rgba(150, 150, 150, 0.6);
  }
  33% {
    box-shadow: 0 0 0 10px rgba(150, 150, 150, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(150, 150, 150, 0);
  }
}
@-webkit-keyframes pulsenegative {
  0% {
    box-shadow: 0 0 0 0 rgba(238, 78, 34, 0.6);
  }
  33% {
    box-shadow: 0 0 0 10px rgba(238, 78, 34, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(238, 78, 34, 0);
  }
}
@keyframes pulsenegative {
  0% {
    box-shadow: 0 0 0 0 rgba(238, 78, 34, 0.6);
  }
  33% {
    box-shadow: 0 0 0 10px rgba(238, 78, 34, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(238, 78, 34, 0);
  }
}
@-webkit-keyframes pulsenegativehigh {
  0% {
    box-shadow: 0 0 0 0 rgba(208, 38, 84, 0.6);
  }
  75% {
    box-shadow: 0 0 0 10px rgba(208, 38, 84, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(208, 38, 84, 0);
  }
}
@keyframes pulsenegativehigh {
  0% {
    box-shadow: 0 0 0 0 rgba(208, 38, 84, 0.6);
  }
  75% {
    box-shadow: 0 0 0 10px rgba(208, 38, 84, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(208, 38, 84, 0);
  }
}
@-webkit-keyframes pulsealert {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 160, 60, 0.6);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(250, 160, 60, 0);
  }
  33% {
    box-shadow: 0 0 0 0 rgba(250, 160, 60, 0);
  }
}
@keyframes pulsealert {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 160, 60, 0.6);
  }
  25% {
    box-shadow: 0 0 0 10px rgba(250, 160, 60, 0);
  }
  33% {
    box-shadow: 0 0 0 0 rgba(250, 160, 60, 0);
  }
}

/*.tooltip {
  position: relative;
}*/
/*.tooltip:before, .tooltip:after {
  position: absolute;
  content: '';
  transition: all 0.4s ease;
  opacity: 0;
}*/
/*arrow*/
/*.tooltip:before{
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: var(--table-header) transparent transparent transparent;
  top: -15px;
  left: 35px;
  transform: translateY(20px);
}*/
/*tooltip box*/
/*.tooltip:after{
  content: attr(data-tooltip);
  background: var(--table-header);
  width: 160px;
  height: 40px;
  top: -75px;
  left: 30px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}*/
/*tooltip hover*/
/*.tooltip:hover:before, .tooltip:hover:after {
  transform: translateY(-2px);
  opacity: 1;
}*/

.qiparent {
  border: 1px solid var(--mainblock);
}

.qiparent > .qitooltip {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 5px;
  background-color: var(--table-header);
  border: 1px solid var(--main-bk-color);
  visibility: hidden;
  opacity: 0;
  box-shadow: -2px, 2px, 5px var(--shadow2);
  transition: opacity 0.3s, visibility 0s;
  min-width: 120px;
}

.qiparent:hover {
  border-color: var(--button-major-face);
}

.qiparent:hover > .qitooltip {
  visibility: visible;
  opacity: 1;
}

.qiparent > .qitooltip > img {
  display: block;
  width: 150px;
  height: 150px;
  padding-left: 15px;
}

.qidetails {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.qidetailsactions {
  flex-basis: 30px;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.svgbutton {
  height: auto;
  width: unset;
  padding: 0;
  border: 5px solid var(--table-header);
  border-radius: 20px;
  background-color: var(--table-header);
}

.svgbutton:hover,
.svgbutton:active {
  border-color: var(--header-default);
  background-color: var(--header-default);
}

.svgbutton.destructive,
.squaresvgbutton.destructive {
  color: var(--colornegative) !important
}

.svgbutton.destructive:hover,
.squaresvgbutton.destructive:hover {
  background-color: var(--colornegative) !important;
  border-color: var(--colornegative) !important;
  color: var(--menu-ink-color) !important;
}

.svgbutton.marginbottom {
  margin-bottom: 3px;
}

div.thumbnail {
  width: 210px;
  height: auto;
  /*max-height: 300px;*/
  cursor: pointer;
}

div.thumbnail > img:hover {
  transform:scale(1.05, 1.05);
}

div.thumbnail > img {
  width: 100%;
  height: auto;
  padding: 3px;
  border: 1px solid var(--orange-background);
  transition:all .3s ease-in-out;
}

#quotview {
  width: 100%;
  height: var(--bottom-bar-offset);
  position: fixed;
  bottom: 0;
  margin: 0;
  padding: 0;
}

#quotview.up {
  top: var(--content-voffset);
  height: calc(100vh - var(--content-offset));
}

#quotview > div.quottoggle {
  height: var(--bottom-bar-offset);
  background-color: var(--button-minor-face);
  cursor: pointer;
}

#quotview > div.quottoggle:hover {
  height: var(--bottom-bar-offset);
  background-color: var(--orange-background);
  color: var(--dark-ink-color);
  cursor: pointer;
}

#quotview > div.quottoggle > * {
  font-size: 1.2em;
}

#quotview.up > div.quottoggle > span.chevron:before {
  content: "\0025bd";
}

#quotview:not(.up) > div.quottoggle > span.chevron:before {
  content: "\0025b3";
}

#quotview:not(.up) > div.quotcontent {
  display: none;
}

#quotview.up > div.quotcontent {
  display: block !important;
}

#quotview > div.quotcontent {
  background-color: var(--tag-minor);
  height: calc(100vh - var(--content-voffset) - var(--bottom-bar-offset));
  overflow-y: auto;
  padding: 5px 15px;
}

.quotcontentelementcontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
}

.quotcontentelementcontainer3 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
}

.quotcontentelement {
  max-width: 350px;
  margin-right: 3px;
  margin-bottom: 3px;
  border: 1px solid var(--main-bk-color);
  border-radius: 4px;
}

.qidetails3 {
  background-color: var(--mainblock);
  flex-basis: 350px;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  padding: 15px;
  border: 3px solid var(--table-row-highlight);
  /*margin-left: 5px;*/
}

.quotcontentelementcontainer3 > table > tbody > tr {
  position: relative;
}

.quotcontentelementcontainer3 > table > tbody > tr.highlight:after {
  content: "";
  position: absolute;
  border-width: 15px 0 14px 15px;
  border-style: solid;
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) var(--table-row-highlight);
  top: 10px;
  margin-top: -11px;
  right: -14px;
}

.quotcontentelement:hover {
  border-color: var(--colornegativeminor) !important;
}

.quotcontentelement > div.inner {
  display: flex;
  height: 100%;
}

.qiimage {
  max-width: 100%;
  max-height: 300px;
  margin-top: auto;
  padding: 1px;
  border: 1px solid var(--orange-background);
}

.prevent-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.qidetailsactions > .deleteqiitem {
  margin-top: auto;
}

/* BEGIN styles for single- or multi-option selects a'la TomSelect but by me */
div.selecthost {
  position: relative;
}
div.selecthost > select {
  margin-top: -20px;
  width: 1px !important;
  height: 50px;
  border: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  white-space: nowrap !important;
  position: absolute !important;
  appearance: none;
}
div.selecthost > div.selecteditem {
  background-color: var(--control-background);
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: flex-start;
  padding: 20px 30px 0 10px;
  margin-top: -20px;
  line-height: 30px;
  border: 1px solid var(--control-outline);
  outline: 1px solid var(--control-outline);
  border-radius: 2px;
}
div.selecthost > div.selecteditem > div.content {
  flex-grow: 1;
  cursor: pointer;
  min-height: 30px;
}
div.selecthost > div.selecteditem > div.deleteme {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 5px !important;
  font-size: 25px !important;
  display: inline-block;
  cursor: pointer;
}
div.selecthost > div.selecteditems {
  background-color: var(--control-background);
  outline: 1px solid var(--control-outline);
  min-height: 80px;
  padding: 10px 10px 25px 10px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
div.selecthost > div.selecteditem.active,
div.selecthost > div.selecteditems.active {
  outline: 2px solid var(--button-major-face);
}
div.selecthost > div.selecteditem:hover,
div.selecthost > div.selecteditems:hover {
  outline: 2px solid var(--control-outline-hover);
}
div.selecthost > div.selecteditem.active:hover
div.selecthost > div.selecteditems.active:hover {
  outline: 2px solid var(--button-major-face);
}
div.selecthost > div.selecteditems > div.selecteditem {
  background-color: var(--button-minor-face);
  color: var(--main-ink-color);
  margin-bottom: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: flex-start;
  padding: 3px;
  border: 1px solid var(--control-outline);
  border-radius: 2px;
  gap: 5px;
}
div.selecthost > div.selecteditems > div.selecteditem > div.content {
  flex-grow: 1;
  cursor: default;
}
div.selecthost > div.selecteditems > div.selecteditem > div.deleteme {
  width: 25px;
  height: auto;
  cursor: pointer;
  border: 1px solid var(--control-outline);
  border-radius: 2px;
  color: var(--main-ink-color);
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
}
div.selecthost > div.selecteditems > div.selecteditem > div.deleteme:hover {
  background-color: var(--colornegative);
  color: var(--main-ink-color);
}
div.selectwrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--control-background);
  border: 0;
  border-radius: 2px;
  outline: 1px solid var(--control-outline);
  padding: 6px 2px 6px 2px;
  box-shadow: 2px 5px 10px var(--shadow1);
}
div.selectwrapper > div.selectwrapperitems {
  overflow-y: scroll;
  max-height: 300px;
}
div.selectwrapper > div.selectwrapperitems > div.itemwrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  border-bottom: 1px solid var(--control-outline);
  cursor: pointer;
  padding: 2px;
}
div.selectwrapper > div.selectwrapperitems > div.itemwrapper:hover {
  background-color: var(--colorpositive);
}
div.selectwrapper > div.selectwrapperitems > div.itemwrapper > div.selitemdesc {
  flex-grow: 1;
  padding: 2px;
}
div.selectwrapper > div.selectwrapperitems > div.itemwrapper > div.selitemvalue {
  flex-basis: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 2px;
  text-align: center;
}
div.selectwrapper > div.selectwrapperitems > div.itemwrapper > input.selitemile {
  flex-basis: 50px !important;
}
div.selectwrapper > div.selectwrapperitems > div.itemwrapper > input[type=number] {
  flex-basis: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0 0 0 5px;
  margin: 0;
  height: auto;
}
div.selectwrapper > div.selectwrapperitems > div.itemwrapper > button {
  flex-basis: 20px;
  padding: 5px;
  height: auto;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
}
/* END styles for multi-option selects a'la TomSelect but by me */
img.intable {
  max-width: 200px;
  max-height: 200px;
}

/* tomselect overridden styles */
.ts-wrapper.single {
  background:#fff
}
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
  cursor:pointer
}
.ts-wrapper.plugin-drag_drop.multi>.ts-control>div.ui-sortable-placeholder {
  visibility:visible !important;
  background:#e6e6e6 !important;
  outline:1px dotted gray !important;
  border-radius:1px;
  float:left
}
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content:"!";
  visibility:hidden
}
.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow:0 2px 5px rgba(0,0,0,.2)
}
.plugin-checkbox_options .option input {
  margin-right:7px;
  border:1px solid #676f72
}
.plugin-checkbox_options .option input:checked::after {
  display:block;
  position:relative;
  height:3px;
  width:6px;
  border:0px;
  border-left:3px solid #676f72;
  border-bottom:3px solid #676f72;
  transform:rotate(-45deg);
  left:2px;
  top:2px;
  cursor:pointer;
  content:""
}
.plugin-clear_button .ts-control {
  padding-right:calc(1em + 18px) !important
}
.plugin-clear_button .clear-button {
  opacity:0;
  position:absolute;
  top:2px;
  right:-2px;
  margin-right:0 !important;
  padding:5px !important;
  font-size:25px !important;
  color:#1f1e1e !important;
  background:rgba(0,0,0,0) !important;
  transition:opacity .5s;
  cursor:pointer
}
.plugin-clear_button.focus.has-items .clear-button,
.plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity:1
}
.ts-wrapper.extendedmulti.plugin-clear_button .clear-button,
.ts-wrapper.extraspace.plugin-clear_button .clear-button,
.ts-wrapper.extrahalfspace.plugin-clear_button .clear-button {
  top:-5px;
  right:-4px
}
.ts-wrapper .dropdown-header {
  position:relative;
  padding:10px 8px;
  border-bottom:1px solid #d0d0d0;
  background:#f8f8f8;
  border-radius:3px 3px 0 0
}
.ts-wrapper .dropdown-header-close {
  position:absolute;
  right:8px;
  top:50%;
  color:#303030;
  opacity:.4;
  margin-top:-12px;
  line-height:20px;
  font-size:20px !important
}
.ts-wrapper .dropdown-header-close:hover {
  color:#000
}
.ts-wrapper .ts-control:hover {
  outline:2px solid #a9a7a5
}
.ts-wrapper.dropdown-active .ts-control,
.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow:none;
  outline:2px solid #d95d07
}
.plugin-dropdown_input .dropdown-input-wrap {
  padding:7px
}
.plugin-dropdown_input .dropdown-input {
  outline:0;
  border:1px solid #a9a7a5;
  border-bottom:2px solid #a9a7a5;
  box-shadow:inset 1px 1px 3px 0px rgba(0,0,0,.15);
  display:block;
  line-height:30px;
  width:100%;
  background:#f9f9f9;
  border-radius:2px
}
.plugin-dropdown_input .dropdown-input::placeholder {
  color:#888
}
.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input {
  min-width:0
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input {
  flex:none;
  min-width:4px
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-webkit-input-placeholder {
  color:rgba(0,0,0,0)
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder {
  color:rgba(0,0,0,0)
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder {
  color:rgba(0,0,0,0)
}
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display:flex
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right:1px solid #f2f2f2;
  border-top:0 none;
  flex-grow:1;
  flex-basis:0;
  min-width:0
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right:0 none
}
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display:none
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top:0 none
}
.ts-wrapper.plugin-remove_button .item {
  display:inline-flex;
  align-items:center;
  padding-right:0 !important;
  float:left
}
.ts-wrapper.plugin-remove_button .item .remove {
  color:inherit;
  text-decoration:none;
  vertical-align:middle;
  display:inline-block;
  font-size:28.6px;
  margin-top:-3px;
  padding:0 6px;
  color:#a5a5a5;
  border-radius:0 2px 2px 0;
  box-sizing:border-box;
  margin-left:5px
}
.ts-wrapper.multi.plugin-remove_button .item .remove {
  font-size:22.6px;
  margin-top:0px;
  color:#c2c5c7;
  margin-left:10px
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  color:#1f1e1e
}
.ts-wrapper.multi.plugin-remove_button .item .remove:hover {
  color:#fff
}
.ts-wrapper.plugin-remove_button .item.active .remove {
  border-left-color:#cacaca
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background:none
}
.ts-wrapper.plugin-remove_button.disabled .item .remove {
  border-left-color:#fff
}
.ts-wrapper.plugin-remove_button .remove-single {
  position:absolute;
  right:0;
  top:0;
  font-size:23px
}
.ts-wrapper {
  position:relative;
  text-transform:none;
  font-weight:400
}
.ts-dropdown,
.ts-control,
.ts-control input {
  color:#303030;
  font-family:inherit;
  font-size:inherit;
  font-feature-settings:normal;
  line-height:20px
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  cursor:text
}
.ts-control {
  outline:1px solid #c9c7c5;
  border:0 none;
  line-height:35px;
  margin:0px;
  padding:0px 10px;
  padding-top:20px;
  margin-top:-20px;
  min-height:50px;
  width:100%;
  overflow:hidden;
  position:relative;
  z-index:1;
  box-sizing:border-box;
  box-shadow:none;
  border-radius:2px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:5px
}
.ts-wrapper.single .ts-control {
  align-content:center
}
.ts-wrapper.multi .ts-control {
  padding-top:20px;
  padding-bottom:4px;
  background-color:#fff
}
.ts-wrapper.extraspace .ts-control {
  min-height:160px
}
.ts-wrapper.extrahalfspace .ts-control {
  min-height:100px
}
.ts-wrapper.extendedmulti .ts-control {
  cursor:pointer
}
.disabled .ts-control,
.disabled .ts-control * {
  cursor:default !important
}
.focus .ts-control {
  box-shadow:none
}
.ts-control>* {
  vertical-align:baseline;
  display:inline-block
}
.ts-control>div.item {
  line-height:16px;
  white-space:normal
}
.ts-wrapper.multi .ts-control>div {
  cursor:pointer;
  margin:0px;
  padding:3px 10px;
  background:#676f72;
  color:#fff;
  font-size:12.6px;
  text-decoration:none;
  line-height:20px;
  border:0 solid #d0d0d0;
  border-radius:2px
}
.ts-wrapper:not(.form-select):not(.plugin-clear_button).single .ts-control {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 2px center;
  background-size:15px 10px;
  padding-right:20px
}
.ts-wrapper.multi .ts-control>div.active {
  background:#676f72;
  color:#fff;
  border:0 solid #cacaca
}
.ts-wrapper.multi.disabled .ts-control>div,
.ts-wrapper.multi.disabled .ts-control>div.active {
  color:#7d7d7d;
  background:#fff;
  border:0 solid #fff
}
.ts-control>input {
  flex:1 1 auto;
  min-width:7rem;
  display:inline-block !important;
  padding:0 !important;
  height:auto !important;
  min-height:0 !important;
  width:auto !important;
  max-height:none !important;
  max-width:100% !important;
  margin:0 !important;
  text-indent:0 !important;
  border:0 none !important;
  outline:0 !important;
  background:none !important;
  line-height:inherit !important;
  -webkit-user-select:auto !important;
  -moz-user-select:auto !important;
  -ms-user-select:auto !important;
  user-select:auto !important;
  box-shadow:none !important
}
.ts-control>input::-ms-clear {
  display:none
}
.ts-control>input:focus {
  outline:none !important
}
.has-items .ts-control>input,
.ts-control>input[type=select-multiple] {
  height:25px !important
}
input[type=select-multiple]::-webkit-input-placeholder {
  color:inherit
}
input[type=select-multiple]:-moz-placeholder {
  color:inherit
}
input[type=select-multiple]::-moz-placeholder {
  color:inherit
}
input[type=select-multiple]:-ms-input-placeholder {
  color:inherit
}
.ts-control.rtl {
  text-align:right
}
.ts-control.rtl.single .ts-control:after {
  left:15px;
  right:auto
}
.ts-control.rtl .ts-control>input {
  margin:0 4px 0 -2px !important
}
.disabled .ts-control {
  opacity:.5;
  background-color:#fafafa
}
.input-hidden .ts-control>input {
  opacity:0;
  position:absolute;
  left:-10000px
}
.ts-dropdown {
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  min-width:280px;
  z-index:10;
  border:1px solid #767676;
  background:#fff;
  margin:0px;
  box-sizing:border-box;
  box-shadow:2px 5px 10px rgba(0,0,0,.5);
  border-radius:3px
}
.ts-dropdown [data-selectable] {
  cursor:pointer;
  overflow:hidden
}
.ts-dropdown [data-selectable] .highlight {
  color:inherit;
  font-weight:500;
  border-radius:1px
}
.ts-dropdown .option:not(:empty),
.ts-dropdown .optgroup-header:not(:empty),
.ts-dropdown .no-results:not(:empty),
.ts-dropdown .create:not(:empty) {
  padding:5px 10px
}
.ts-dropdown div.optgroup .option:not(:empty) {
  padding-left:20px
}
.ts-dropdown .no-results:not(:empty) {
  color:#777
}
.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
  cursor:inherit;
  opacity:.5
}
.ts-dropdown [data-selectable].option {
  opacity:1;
  cursor:pointer
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top:0 none
}
.ts-dropdown .optgroup-header {
  color:#303030;
  background:#fff;
  font-weight:500;
  cursor:default
}
.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
  background-color:#ffaa46;
  color:#111315;
  background-color:Highlight;
  color:HighlightText
}
.ts-dropdown .create:hover.create,
.ts-dropdown .option:hover.create,
.ts-dropdown .active.create {
  color:#111315;
  color:HighlightText
}
.ts-dropdown .create {
  color:rgba(48,48,48,.5)
}
.ts-dropdown .spinner {
  display:inline-block;
  width:30px;
  height:30px;
  margin:5px 8px
}
.ts-dropdown .spinner:after {
  content:" ";
  display:block;
  width:24px;
  height:24px;
  margin:3px;
  border-radius:50%;
  border:5px solid #d0d0d0;
  border-color:#d0d0d0 rgba(0,0,0,0) #d0d0d0 rgba(0,0,0,0);
  animation:lds-dual-ring 1.2s linear infinite
}
@keyframes lds-dual-ring {
  0% {
    transform:rotate(0deg)
  }
  100% {
    transform:rotate(360deg)
  }
}
.ts-dropdown-content {
  overflow-y:auto;
  overflow-x:hidden;
  max-height:375px;
  scroll-behavior:smooth
}
.ts-hidden-accessible {
  border:0 !important;
  clip:rect(0 0 0 0) !important;
  -webkit-clip-path:inset(50%) !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  padding:0 !important;
  position:absolute !important;
  width:1px !important;
  white-space:nowrap !important
}
/* END tomselect overridden styles */