/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Font Declarations =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
@font-face {
  font-family: 'cinzelblack';
  src: url("../res/fonts/cinzel/cinzel-black-webfont.woff2") format("woff2"), url("../res/fonts/cinzel/cinzel-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cinzelbold';
  src: url("../res/fonts/cinzel/cinzel-bold-webfont.woff2") format("woff2"), url("../res/fonts/cinzel/cinzel-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cinzelregular';
  src: url("../res/fonts/cinzel/cinzel-regular-webfont.woff2") format("woff2"), url("../res/fonts/cinzel/cinzel-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cinzel_decorativeblack';
  src: url("../res/fonts/cinzel/cinzeldecorative-black-webfont.woff2") format("woff2"), url("../res/fonts/cinzel/cinzeldecorative-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cinzel_decorativebold';
  src: url("../res/fonts/cinzel/cinzeldecorative-bold-webfont.woff2") format("woff2"), url("../res/fonts/cinzel/cinzeldecorative-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cinzel_decorativeregular';
  src: url("../res/fonts/cinzel/cinzeldecorative-regular-webfont.woff2") format("woff2"), url("../res/fonts/cinzel/cinzeldecorative-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cardo-bold';
  src: url("../res/fonts/cardo/cardo-bold-webfont.woff") format("woff"), url("../res/fonts/cardo/cardo-bold-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cardo-italic';
  src: url("../res/fonts/cardo/cardo-italic-webfont.woff") format("woff"), url("../res/fonts/cardo/cardo-italic-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'cardo-regular';
  src: url("../res/fonts/cardo/cardo-regular-webfont.woff") format("woff"), url("../res/fonts/cardo/cardo-regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'nunitobold';
  src: url("../res/fonts/nunito/nunito-bold-webfont.woff2") format("woff2"), url("../res/fonts/nunito/nunito-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'nunitolight';
  src: url("../res/fonts/nunito/nunito-light-webfont.woff2") format("woff2"), url("../res/fonts/nunito/nunito-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'nunitoregular';
  src: url("../res/fonts/nunito/nunito-regular-webfont.woff2") format("woff2"), url("../res/fonts/nunito/nunito-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Global Variables =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
:root {
  --color-faded-gold: #BFA97C;
  /* #CEBF96 */
  --color-gold: #EAD979;
  --color-deep-gold: #dbb263;
  --color-deeper-gold: #d9a33c;
  --color-deepest-gold: #c98e1d;
  /* #bf7d17 */
  --color-silver: #AAAAAA;
  --color-light-silver: #bfbfbf;
  --color-off-white: #dcd7d1;
  --color-winner-green: #5e8430;
  --color-loser-red: #ab2c2c;
  --color-team-red: #bd3a3a;
  --color-team-blue: #4965d0;
  --color-dev-red: #bb3030;
  --bgColor-light-black: #101110;
  --bgColor-dark-gray: #1c1c1c;
  --bgColor-transp-slate: #202328fa;
  --bgColor-gray: #272727;
  --bgColor-light-gray: #a09f9f;
  --bgColor-medium-gray: #313131;
  --bgColor-header-blue: #192b3e;
  --bgColor-button-blue: #253e57;
  /* #253545 */
  --bgColor-team-red: #4a1f1f;
  --bgColor-team-blue: #252958;
  --bgColor-pfp: #2e2e2e;
  --bgColor-green: #72c60d;
  --bgColor-simple-red: #622626;
  --bgColor-simple-dark-red: #401111;
  --bgColor-deep-velvet: #311515;
  --bgColor-bar-blue: #2f4c61;
  --bgColor-bar-red: #58302e;
  --bgColor-bar-blue-t: #2f4c61a6;
  --bgColor-bar-red-t: #58302ea6;
  --border-gray: #2F2D2F;
  --border-black: #181818;
  --border-coal: #101110;
  --menuBar-height: 4.5rem;
  --footer-height: 5rem;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-=     Mixins    =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Document/body =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
* {
  box-sizing: border-box;
  font-family: 'cardo-regular';
  /* font-variant: small-caps; */
  position: relative;
  cursor: default;
  font-weight: normal;
}

::selection {
  background-color: rgba(161, 161, 161, 0.8);
  color: black;
}

::-moz-focus-inner {
  border: 0;
}

html {
  height: 100vh;
  width: 100vw;
  position: relative;
  font-size: 16px;
}

body {
  position: fixed;
  z-index: 1;
  /*	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 4.5rem auto;*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  background-color: #262626;
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-size: cover;
}

body::after {
  /* Preloads */
  opacity: 0;
  position: absolute;
  z-index: -100;
  content: url("/img/icons/notifIcon0.png") url("/img/icons/notifIcon.png") url("/img/icons/crown.png") url("/img/icons/crownHollow.png") url("/img/icons/check.png") url("/img/icons/checkG.png") url("/img/icons/checkO.png") url("/img/icons/sound_on.png") url("/img/icons/sound_off.png") url("/img/icons/xWhite.png") url("/img/icons/joinWhiteB.png") url("/img/icons/leaveWhite.png") url("/img/bgs/SkalaLogoAnim.webp");
}

body#home, body#tournaments {
  /* background-image: url("/img/bgs/bg2.png"); */
  background-image: url("/img/bgs/bgvideo_poster.png");
  background-position: center;
}

body > * {
  transition: filter ease-out 0.2s;
}

body.blurred > *:not(.overlay) {
  filter: blur(0.15rem);
}

#about body {
  background-image: none;
}

#bgVideoWrapper {
  z-index: -1;
  position: absolute;
  width: 100vw;
  height: 100vh;
  /* background-color: #100501; */
}

#bgVideo {
  position: fixed;
  z-index: -1;
  z-index: 0;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transition: opacity ease-in 1.5s;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Navigation Bar =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
#menuBar {
  position: relative;
  z-index: 75;
  border: 0.1rem solid var(--border-gray);
  background-color: var(--bgColor-light-black);
  outline: 0.15rem solid var(--border-black);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--menuBar-height);
  max-height: var(--menuBar-height);
  width: 100%;
  padding: 0.1rem 0;
}

#navBar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  margin-left: 0.25rem;
  /* padding-left: 10%; */
}

#navBar .textButton {
  font-size: 1.1em;
  height: 50%;
  width: 10rem;
  margin: 0.5rem;
  font-variant: small-caps;
}

#optionBar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
}

#optionBar > * {
  justify-self: center;
}

.menuTitleBox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 0.1rem solid #202320;
  outline: 0.15rem solid #101110;
  padding: 0.15rem;
}

#navBar > .menuTitleBox {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  transform: scaleX(1.1);
}

.menuTitle {
  font-family: 'cinzel_decorativebold';
  text-align: center;
  color: var(--color-faded-gold);
  cursor: default;
  line-height: 1;
  margin: 0.2rem 0.3rem 0.2rem 0.5rem;
  font-size: 2em;
  font-variant: small-caps;
}

#profileButton {
  background-image: url("");
}

#settingsButton {
  background-image: url("/img/icons/gear.png");
}

/* #steamLink {
	width: 7em;
	height: auto;
	border: none;
	background: none;
} */
#pfpChange {
  width: 30rem;
  height: 25rem;
}

#pfpChange .content {
  background-color: var(--bgColor-transp-slate);
  color: var(--color-light-silver);
}

#pfpChange .title {
  font-family: 'cinzelregular';
  font-size: 1.25em;
  margin-bottom: 1em;
  color: var(--color-deep-gold);
}

#loginWindow:not(.plain)::before {
  /*z-index: 150;*/
  content: '';
  position: fixed;
  width: 200vw;
  height: 200vh;
  left: -50vw;
  top: -50vw;
  background-color: black;
  opacity: 0.7;
}

#loginWindow {
  z-index: 15;
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  width: 33rem;
  height: 22rem;
  padding: 0;
  margin: 0;
}

#maintenance .contentBody, #offline .contentBody, #e404 .contentBody {
  background-color: var(--bgColor-transp-slate);
}

#privLogin #loginWindow, #maintenance .cWindow,
#offline .cWindow, #e404 .cWindow {
  width: 50rem;
  height: 33rem;
}

#loginWindow span, #loginWindow a, #maintenance span, #maintenance a, #offline span, #offline a, #e404 span, #e404 a {
  font-family: 'cardo-regular';
  font-variant: normal;
  text-align: center;
}

#loginWindow .title, #maintenance .title, #offline .title, #e404 .title {
  font-family: 'cinzelregular';
  /* font-variant: small-caps; */
  font-size: 1.25em;
  margin-bottom: 1em;
}

#privLogin span, #privLogin div, #privLogin a {
  font-variant: normal;
  text-align: center;
}

.nt, .nt * {
  font-family: 'cardo-regular'			!important;
  font-variant: normal					!important;
}

#loginWindow .wrapper {
  left: 0;
  transition: left ease-in 0.2s;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}

#loginWindow .wrapper.outer {
  overflow: hidden;
}

#loginWindow form {
  position: absolute;
  z-index: 151;
  justify-content: center;
  padding: 2em 3.5em 2em 3.5em;
  background-color: var(--bgColor-transp-slate);
  border-radius: 0.5rem;
}

.cWindow {
  position: absolute;
  z-index: 151;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2em 3.5em 2em 3.5em;
  background-color: var(--bgColor-transp-slate);
  border-radius: 0.5rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cWindow span, .cWindow div {
  color: var(--color-silver);
}

#loginWindow form {
  width: 100%;
  height: 100%;
}

.fCol {
  display: flex;
  flex-flow: column nowrap					!important;
  justify-content: center;
  align-items: center;
}

.fRow {
  display: flex;
  flex-flow: row nowrap						!important;
  justify-content: center;
  align-items: center;
}

#loginWindow .fCol > * {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

#loginWindow .errorMsg {
  margin-top: 0.5em;
}

#loginWindow .errorMsg + * {
  margin-top: 0.5em;
}

#loginWindow input {
  font-size: 1.2em;
}

#loginWindow input[type="submit"] {
  margin-top: 1.5em;
  margin-bottom: 0.25em;
}

input.loading {
  color: transparent;
}

input.loading::after {
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("/img/icons/loading.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 10%;
  filter: invert(1);
}

input.hidden {
  z-index: -100;
}

#loginWindow form .formItem {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  left: -1.5em;
}

#loginWindow form > div > label {
  display: flex;
  justify-content: flex-end;
  padding-right: 0.75em;
  width: 6em;
}

#loginForm {
  left: 0;
}

#resetForm {
  left: 100%;
}

#newPassForm {
  left: -100%;
}

#signin {
  background-color: transparent;
  color: var(--color-faded-gold);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0.25em;
  margin: 0.25em;
  outline: none;
}

#pfpIcon {
  height: calc(var(--menuBar-height) * 0.6);
  width: calc(var(--menuBar-height) * 0.6);
  padding: 0;
  border: 0.15rem solid #202320;
  outline: 0.1rem solid #2C2D2C;
  border-radius: 0.3rem;
}

#pfpIcon .iconImg {
  border-radius: 0.2rem;
}

#signin:hover {
  filter: brightness(1.15);
}

#pfpMenu .content > *:hover {
  filter: brightness(1.15);
  cursor: pointer;
  font-weight: bold;
}

#menuBar .iconImg:hover {
  filter: brightness(1.15);
}

#socialIcon .iconImg {
  background-image: url("/img/icons/friends.png");
}

#searchIcon {
  background-image: url("/img/icons/find.png");
}

#searchBar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  right: 133%;
  margin: 0;
  width: 15em;
  font-size: 1.1em;
  padding: 0;
  transition: border-left-width ease-out 0.2s, border-right-width ease-out 0.2s, width ease-out 0.2s;
}

#searchBar.closed {
  width: 0;
  border: 0;
  transition: border-left-width ease-out 0.2s, border-right-width ease-out 0.2s, width ease-out 0.2s;
}

#searchBar input {
  font-size: 1em;
  font-variant: normal;
  padding: 0.2em 0.1em;
  width: 95%;
  color: var(--color-light-silver);
}

#searchBar.closed input {
  padding: 0;
}

#searchBar .list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  overflow-y: scroll;
}

#searchBar .listOpt {
  width: 100%;
  padding: 0.3em 0.2em;
  padding-left: 1.45em;
}

#searchBar .listOpt img {
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  left: 0.2em;
}

#fightIcon, #searchIcon {
  width: calc(var(--menuBar-height) * 0.35);
  height: calc(var(--menuBar-height) * 0.35);
}

#fightIcon .iconImg {
  background-image: url("/img/icons/swordsW.png");
}

#fightMenu button {
  width: 100%;
  height: 100%;
  margin: 0;
  font-variant: small-caps;
}

#fightMenu .notif.match {
  padding: 0;
  height: auto;
}

#fightMenu .matchCard {
  height: 8rem;
  width: 100%;
  background-color: #2e3139;
  border: 0.1rem solid black;
  margin: 0;
}

#fightMenu div.notif.match .title {
  z-index: 0;
  border-bottom: none;
  font-weight: normal;
  padding-bottom: 0;
  font-size: 1.1em;
}

#fightMenu .match .title::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 50%;
  top: 100%;
  background-color: rgba(46, 54, 63, 0.95);
  border: 0.1em solid var(--border-black);
  border-top: none;
  left: -0.1em;
}

#fightMenu .matchCard:hover {
  box-shadow: none;
  transform: none;
}

#fightMenu .matchCard > span {
  cursor: pointer;
}

#fightMenu #UMT {
  background-color: #3e3e3e;
}

#fightContext {
  position: fixed;
}

#fightContext .content > div {
  cursor: pointer;
}

#fightContext .content > div:not(.rost):hover {
  filter: brightness(1.15);
  font-weight: bold;
}

#fightContext.menu div.rost {
  overflow: hidden;
  background-color: rgba(24, 24, 24, 0.8);
  /* padding: 0.35em 0.75em; */
  height: auto;
  width: 100%;
  max-height: 6em;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}

#fightContext.menu div.rost.cDummy {
  position: fixed;
}

#fightContext.menu div.rost:hover {
  filter: unset;
  font-weight: unset;
  cursor: default;
}

div.rost .grid {
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  justify-content: space-around;
  padding: 0.5em;
  height: 100%;
  width: 100%;
}

div.rost .grid > * {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

div.rost .grid .checkContainer {
  margin-right: 0.5em;
  width: 1.3em;
  height: 1.3em;
  border: solid 0.1rem var(--border-gray);
  flex-shrink: 0;
}

/* .matchCard span {
	z-index: 15;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: cinzelbold;
	font-variant: normal;
	color: silver;
	text-shadow: -0.1em 0.1em 0.25em black;
	text-align: center;
	font-size: 0.9em;
	padding: calc(5% + 0.2em);
	height: 50%;
	width: 100%;
	line-height: 1.2;
} */
#privacy-pdf {
  box-shadow: 0 0 1rem 0.25rem black;
  width: 50%;
  height: 95%;
}

/* ////////////// */
#notifIcon .iconImg {
  background-image: url("/img/icons/notifIcon0.png");
}

#notifIcon.new .iconImg {
  background-image: url("/img/icons/notifIcon.png");
}

#menuBar .iconBtn .menu {
  position: absolute;
  top: calc(100% + 0.67rem + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(46, 46, 46, 0.98);
  box-shadow: 0 0 0.3rem 0.1rem rgba(16, 16, 16, 0.75);
  border-radius: 0.5rem;
  width: 20rem;
  height: auto;
}

#menuBar .iconBtn .menu::before {
  position: absolute;
  z-index: 51;
  top: calc(-0.67rem);
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  border-bottom: 0.67rem solid rgba(46, 46, 46, 0.98);
}

#menuBar .iconBtn .menu::after {
  position: absolute;
  z-index: 50;
  top: calc(-0.67rem - 0.1rem);
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 0;
  height: 0;
  border-left: 0.9rem solid transparent;
  border-right: 0.9rem solid transparent;
  border-bottom: 0.8rem solid var(--border-black);
}

#menuBar .iconBtn .menu > .content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  max-height: 30rem;
  overflow-y: auto;
  padding: 0;
  z-index: unset;
  scrollbar-color: #333333 #1a1a1a;
  border-radius: 0.5rem;
  border: 0.15rem double var(--border-black);
}

#menuBar .iconBtn .menu > .content > *:first-child {
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
}

#menuBar .iconBtn .menu > .content > *:last-child {
  border-bottom-left-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem;
}

#menuBar .iconBtn .menu .title {
  padding: 0.35em;
  background-color: rgba(46, 54, 63, 0.95);
  z-index: -1;
  font-weight: bold;
  border: 0.1em solid var(--border-black);
  width: 100%;
}

#menuBar #pfpMenu {
  width: 15rem;
}

#menuBar #pfpMenu.menu {
  top: calc(100% + 0.75rem + 0.25rem);
}

#socialIcon #socialMenu.menu > .content {
  overflow: hidden;
}

#socialIcon #socialMenu.menu > .content .subContent {
  max-height: inherit;
}

#socialIcon #socialMenu.menu > .content .subContent .subMenu {
  max-height: inherit;
  overflow-y: auto;
}

#notifMenu.fNew::before {
  border-bottom: 0.67rem solid rgba(78, 62, 41, 0.98);
}

#menuBar .iconBtn .content > * {
  margin: 0;
}

#menuBar #socialIcon #socialMenu {
  max-height: 30rem;
}

#menuBar #socialIcon #socialMenu .content {
  padding-top: 1.9rem;
}

#menuBar #socialIcon #socialMenu .tabs {
  position: absolute;
  top: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1.9rem;
  z-index: 10;
}

#menuBar #socialIcon #socialMenu .tabs > * {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 0.15rem solid #1e1d1d;
  background-color: rgba(46, 46, 46, 0.98);
  cursor: default;
}

#menuBar #socialIcon #socialMenu .tabs > *.selected {
  background-color: rgba(56, 56, 56, 0.98);
  color: var(--color-deep-gold);
  font-weight: bold;
}

#menuBar #socialIcon #socialMenu .tabs > *:not(.selected):hover {
  filter: brightness(1.1);
  cursor: pointer;
  font-weight: bold;
}

#menuBar #socialIcon #socialMenu .tabs > *:not(.selected):active {
  filter: brightness(0.9);
}

#menuBar #socialIcon #socialMenu .tabs > *.new {
  background-color: #3F3310;
}

#menuBar #socialIcon #socialMenu .subContent {
  z-index: 5;
  width: 100%;
  left: -100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  transition: 0.3s;
  max-height: 28.1rem;
}

#menuBar #socialIcon #socialMenu .subMenu {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
}

#socialMenu div.empty {
  background-color: unset;
}

#socialMenu #friends > div:not(.empty) {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0.35em;
  outline: none;
  /* border-left: 0.1rem solid var(--border-black);
	border-right: 0.1rem solid var(--border-black); */
}

#socialMenu #friends .pfp {
  margin: 0 0.75em 0 0;
  border-radius: 0.3rem;
}

#friends .pfp::before {
  position: absolute;
  z-index: 99;
  top: -0.2rem;
  right: -0.55rem;
  content: '';
  border-radius: 50%;
  width: 30%;
  height: 30%;
  border: 0.2rem solid #2e2e2e;
  background-color: gray;
}

#friends .online .pfp::before {
  background-color: var(--bgColor-green);
}

#socialMenu .friend .user-info {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
}

#socialMenu .friend .user-info .status {
  text-align: left;
  padding-right: 2.5rem;
}

.inv {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0.5em;
  font-family: 'arial';
  font-size: 2em;
  width: 1em;
  height: 1em;
  background-color: #141414;
  color: #af935e;
}

.crown, .crownH, .nope {
  height: 1em;
  width: 1em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-left: 0.5em;
}

.crown {
  background-image: url("/img/icons/crown.png");
}

.crownH {
  background-image: url("/img/icons/crownHollow.png");
}

.nope {
  background-image: url("/img/icons/nope.png");
}

.crownH:hover::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/img/icons/crown.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 75%;
}

#socialMenu .inv {
  border-radius: 0.1em;
  margin: 0;
}

.inv:hover {
  color: #e3b867;
}

.inv:active {
  color: #957d50;
}

#notifMenu *, #socialMenu * {
  font-variant: normal;
  text-align: center;
  /* border-radius: unset; */
}

#notifMenu div, #notifMenu span {
  color: var(--color-light-silver);
}

#notifMenu .notif {
  margin: 0;
}

#notifMenu .btnBox {
  margin: 0.5em 0 0.25em 0;
}

#notifMenu .exp {
  font-style: italic;
}

#notifMenu .exp + .btnBox {
  margin: 0em 0 0.25em 0;
}

#mordstatsButton {
  background-image: url("/img/icons/mordstats.png");
  grid-row: 1;
}

#skalButton {
  background-image: url("/img/icons/skalagrad_zoom.jpg");
  grid-row: 1;
}

#discordButton {
  background-image: url("/img/icons/discord.png");
  grid-row: 1;
}

#steadyButton {
  background-image: url("/img/icons/steady.png");
  grid-row: 1;
}

#regionContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
  grid-row: 1;
}

#regionContainer img {
  height: 1.6rem;
  width: 1.6rem;
  opacity: 0.8;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#regionSelect {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  font-size: 0.8rem;
  border: 0.1rem solid #585755;
  /* #665c3f */
  margin-top: 0.3rem;
  width: 2.6em;
  height: 1.6em;
  padding: 0.3em;
  background-color: #1b1b1b;
}

#signupRegion {
  display: flex;
  justify-content: space-evenly;
  border: 0.1rem solid #585755;
  background-color: #1b1b1b;
  font-size: 1em;
  width: 4em;
  height: 100%;
  padding: 0.1em 0.3em;
}

#regionSelect:hover, #signupRegion:hover {
  background-color: #2b2b2b;
}

#regionSelect .listSel, #signupRegion .listSel {
  margin: 0;
  width: auto;
}

#regionSelect .dropArrow, #signupRegion .dropArrow {
  margin: 0;
  height: 0.7em;
}

#regionSelect .list {
  width: 9em;
  top: calc(100% + 0.1rem);
  left: auto;
  right: -0.15rem;
  border: 0.1rem solid #202320;
  outline: none;
}

#signupRegion .list {
  width: 15em;
  top: calc(100% + 0.1rem);
  left: 50%;
  transform: translateX(-50%);
  border: 0.1rem solid #202320;
  outline: none;
}

#regionSelect .listOpt {
  font-size: 1.1em;
}

#signupRegion .listOpt {
  font-size: 1em;
}

#variantBar {
  justify-content: center;
  align-items: center;
}

#variantSelect {
  font-size: 1.4em;
  width: 20rem;
  border: 0.2rem solid #202320;
}

#variantSelect .listSel {
  font-family: 'cinzelregular';
  font-variant: small-caps;
  text-align: center;
}

#variantSelect .list {
  outline: 0.2rem solid #202320;
  top: calc(100% + 0.2rem);
}

#variantSelect .listOpt {
  padding: 0.45em;
  font-size: 0.8em;
  color: #ebe6d8;
}

#chartjs-tooltip {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  font-family: 'nunitoregular';
  pointer-events: none;
  font-size: 1em;
  padding: 0.5em;
  background-color: rgba(27, 27, 27, 0.975);
  border: 0.2rem double #101110;
  color: #bfbfbf;
  border-radius: 0.5rem;
  min-width: 16rem;
  max-width: 20rem;
  min-height: 9rem;
}

#chartjs-tooltip::before {
  position: absolute;
  z-index: 51;
  left: calc(-0.63rem);
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 0;
  height: 0;
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;
  border-right: 0.67rem solid rgba(27, 27, 27, 0.975);
}

#chartjs-tooltip::after {
  position: absolute;
  z-index: 50;
  left: calc(-0.67rem - 0.2rem);
  top: 50%;
  transform: translateY(-50%);
  content: '';
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-right: 0.9rem solid var(--border-black);
}

#chartjs-tooltip * {
  margin: 0.1em;
  font-variant: normal;
}

#chartjs-tooltip h2 {
  font-size: 1.1em;
  color: var(--color-faded-gold);
  text-align: center;
}

#chartjs-tooltip hr {
  width: 90%;
  margin: 0.5em;
}

#chartjs-tooltip .mapBG {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
  background-position: center;
  z-index: -1;
  filter: brightness(0.3) blur(0px);
  border-radius: 0.5rem;
  border: 0.05rem solid var(--border-coal);
}

#chartjs-tooltip.heattip {
  min-width: unset;
  min-height: unset;
  font-size: 0.85rem;
}

#chartjs-tooltip.heattip .weapon {
  font-size: 0.85em;
  font-variant: small-caps;
}

#footer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: var(--footer-height);
  width: 100%;
  padding: 1em;
  background-color: #101010;
}

#footer > * {
  width: 33%;
  text-align: center;
}

#footer a {
  color: #386dc5;
  font-variant: normal;
  font-size: 1.1em;
}

/* #colorPicker {
	z-index: 100;
	width: 8rem;
	height: 3rem;
	margin-right: 0;
} */
#colorPicker {
  z-index: 100;
  margin-right: 0;
  width: 8rem;
  height: 3rem;
}

#colorPicker .listContainer, #colorPicker #colorPreview {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: unset;
}

#colorPicker .listContainer:hover, #colorPicker #colorPreview:hover {
  background-color: unset;
}

#colorPicker .listContainer:active, #colorPicker #colorPreview:active {
  background-color: unset;
}

#colorPicker #colorPreview {
  z-index: 50;
  border: 0.2rem solid #202320;
}

#colorPicker #colorPreview:hover {
  filter: brightness(1.15);
}

#colorPicker #colorPreview:active {
  filter: brightness(0.9);
}

#colorPicker .list {
  position: absolute;
  top: calc(100% + 0.67rem + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(46, 46, 46, 0.98);
  box-shadow: 0 0 0.3rem 0.1rem rgba(16, 16, 16, 0.75);
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: repeat(5, 2rem);
  grid-auto-rows: 2rem;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  padding: 0.5rem;
}

#colorPicker .list::before {
  position: absolute;
  z-index: 51;
  top: calc(-0.67rem);
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  border-bottom: 0.67rem solid rgba(46, 46, 46, 0.98);
}

#colorPicker .list::after {
  position: absolute;
  z-index: 50;
  top: calc(-0.67rem - 0.1rem);
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 0;
  height: 0;
  border-left: 0.9rem solid transparent;
  border-right: 0.9rem solid transparent;
  border-bottom: 0.8rem solid var(--border-black);
}

#colorPicker .list::before {
  top: calc(-0.7rem);
}

#colorPicker .list::after {
  top: calc(-0.7rem - 0.1rem);
}

#colorPicker .listOpt {
  width: 2rem;
  height: 2rem;
  border: 0.125rem solid black;
  box-shadow: inset 0 0 0.2rem black;
}

#colorPicker .listOpt:hover {
  filter: brightness(1.15);
}

#colorPicker .listOpt:active {
  filter: brightness(0.9);
}

#colorPreview {
  position: absolute;
  background-color: #2a4c56;
  width: 100%;
  height: 100%;
}

#colorPreview:hover {
  filter: brightness(0.875);
}

#colorPreview:active {
  filter: brightness(0.8);
}

#colorPicker ~ label[for="teamColor"] {
  margin: 0;
}

/* #colorPicker input {
	background-color: #9a9a9a;
}

#colorPicker .picker_wrapper.popup,
#colorPicker .picker_arrow,
#colorPicker .picker_arrow::before,
#colorPicker .picker_arrow::after {
	background: #4f4e4e;
}

#colorPicker .picker_wrapper button {
	background-color: #522b2b;
	background-image: none;
	cursor: default;
	color: #CECECE;
}

#colorPicker .picker_wrapper button:hover {
	filter: brightness(1.1);
}

#colorPicker .picker_wrapper button:active {
	filter: brightness(0.9);
}

#colorPicker * {
	box-shadow:  0 0 0 1px black		!important;
}

 */
#datePickerCont {
  position: absolute;
  top: 1rem;
  right: 5rem;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 50;
}

#datePicker {
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-image: url("/img/icons/swordsR.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.profile .simplepicker-wrapper {
  --simplepicker-bg-color: rgb(132, 132, 132);
  background-color: transparent;
  z-index: 100;
  cursor: default;
  font-size: 1rem;
  /* overflow: hidden; */
  overflow: unset;
  width: auto;
  height: auto;
  position: absolute;
  margin: 0;
  top: 0;
  left: auto;
  right: 125%;
  color: black;
}

.profile .simplepicker-wrapper .simplepicker-calender td.y {
  background-color: #4f7e4f;
}

.profile .simplepicker-wrapper .simplepicker-calender td.n {
  background-color: #605e5e;
}

.profile .simplepicker-wrapper * {
  font-family: 'cardo-regular';
  font-variant: normal;
  font-size: 1em;
  background-repeat: no-repeat;
}

.simplepicker-picker-section {
  border-bottom: 1px solid black;
}

.profile .simpilepicker-date-picker {
  width: 21rem;
  background-color: var(--simplepicker-bg-color);
  margin: 0;
}

/* .profile .simplepicker-calender tbody td {
	width: 100%;
} */
.profile .simplepicker-month-switcher {
  margin: 0.2rem;
}

.profile .simplepicker-day-header {
  background-color: var(--bgColor-simple-dark-red);
}

.profile .simplepicker-date-section {
  background-color: var(--bgColor-simple-red);
}

.profile .simplepicker-date-section > div {
  margin: 0;
  padding: 0;
  font-size: 1.4em;
}

.profile .simplepicker-select-pane {
  justify-content: space-between;
}

.profile .simplepicker-time-wrapper {
  display: flex;
  flex-flow: row nowrap;
  font-size: 0.9em;
}

.profile .simplepicker-time, .simplepicker-selected-date {
  display: flex;
  justify-content: center;
  align-items: center;
}

.simplepicker-time.no-time {
  color: transparent;
}

.simplepicker-time.no-time ~ .simplepicker-timezone {
  display: none;
}

.simplepicker-time > div {
  display: none;
  position: absolute;
  color: rgba(224, 224, 224, 0.95);
}

.simplepicker-time.no-time > div {
  display: flex;
}

.profile .simplepicker-select-pane .simplepicker-time, .simplepicker-timezone {
  font-size: 1em;
  width: unset;
  flex: unset;
  margin: 0.2em 0.1em;
}

.simplepicker-fade ~ .simplepicker-timezone {
  color: rgba(224, 224, 224, 0.95);
}

.simplepicker-selected-date {
  font-size: 1.2em;
}

.profile .simplepicker-select-pane * {
  font-family: 'calibri';
}

body.profile .simplepicker-btn {
  background-color: rgba(174, 174, 174, 0.95);
  color: var(--bgColor-simple-red);
  /* border-color: var(--bgColor-simple-red); */
  border: none;
}

body.profile .simplepicker-btn:not(.listOpt) {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

body.profile .simplepicker-btn:hover {
  background-color: var(--bgColor-simple-red);
  color: #fff;
}

body.profile .simplepicker-btn:active {
  background-color: #442020;
}

body.profile .simplepicker-ok-btn {
  background-color: var(--bgColor-simple-red);
  color: var(--color-off-white);
  border: 1px solid black;
}

body.profile .simplepicker-cancel-btn {
  background-color: #4f4e4e;
  color: var(--color-off-white);
  border: 1px solid black;
}

body.profile .simplepicker-cancel-btn:hover, body.profile .simplepicker-cancel-btn:active {
  background-color: #4f4e4e;
}

.profile .simplepicker-calender tbody::after, .profile .simplepicker-calender tbody td::after {
  z-index: -1;
  background-color: #949494;
}

.profile .simplepicker-calender tbody .active::after, .profile .simplepicker-calender tbody td:active::after {
  background-color: var(--bgColor-simple-red);
}

/* .profile .simplepicker-time-section input:focus {
	border-bottom-color: var(--bgColor-simple-red);
}

.profile .simplepicker-time-section input::selection {
	background-color: var(--bgColor-simple-red);
} */
.simplepicker-time-section #chalTime {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#chalTime .listContainer {
  background-color: transparent;
}

#chalTime .listContainer:hover {
  color: var(--bgColor-simple-red);
  background-color: rgba(0, 0, 0, 0.1);
}

#chalTime .listContainer:active {
  background-color: rgba(0, 0, 0, 0.15);
}

#chalTime .listSel {
  font-size: 1.5em;
}

#chalTime .list {
  max-height: 933%;
  width: 110%;
  z-index: 100;
}

.simplepicker-wrapper #chalMode {
  margin-left: 0;
}

.profile .simplepicker-bottom-part {
  padding: 0 0 0.75em 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.simplepicker-wrapper .listContainer {
  cursor: default;
  padding: 0.35em 0.1em;
}

.simplepicker-wrapper .listContainer.region {
  margin-left: 0.5rem;
  width: 5em;
}

.simplepicker-wrapper #teamChallengeSelect {
  margin: 0.5rem;
  margin-bottom: 0;
  width: calc(100% - 1rem);
}

.simplepicker-wrapper .listSel {
  display: flex;
  justify-content: center;
}

.simplepicker-wrapper .list {
  width: 12.5em;
  top: calc(100% + 0.0rem);
  left: 50%;
  transform: translateX(-50%);
  border: 0.1rem solid #202320;
  outline: none;
  background-color: var(--simplepicker-bg-color);
}

.simplepicker-wrapper #teamChallengeSelect .list {
  width: 100%;
}

.simplepicker-wrapper .listOpt.selected {
  /* background-color: #016565; */
  background-color: var(--bgColor-simple-dark-red);
  color: #fff;
}

.simplepicker-wrapper .listOpt:hover {
  background-color: var(--bgColor-simple-red);
}

.simplepicker-wrapper .listOpt {
  margin: 0;
  cursor: default;
}

.simplepicker-wrapper .chalOpts {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 1rem 0.25rem 0.5rem 0.25rem;
}

.simplepicker-wrapper .chalOpts > div {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.simplepicker-wrapper #chalVar {
  display: flex;
}

/* #teamColor {
	position: absolute;
	height: 0;
	width: 0;
	opacity: 0;
} */
.pickerWrapper {
  opacity: 0;
}

div.dialogueBox.menu.overlay {
  z-index: 500;
  font-size: 1.2em;
}

div.dialogueBox.menu.overlay.match-found {
  background-image: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

div.dialogueBox.menu.overlay.match-found .content {
  background-color: transparent;
  justify-content: space-between;
  min-height: 26rem;
}

div.dialogueBox.menu.overlay.match-found .content div, div.dialogueBox.menu.overlay.match-found .content span {
  text-shadow: 2px 2px 5px black;
}

div.dialogueBox.menu.overlay.match-found .content button {
  font-size: 1.4em;
}

div.dialogueBox.menu.overlay.match-found .content .contentTitle {
  font-size: 1.8em;
}

div.dialogueBox.menu.overlay.match-found::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url("/img/bgs/SkalaLogoAnim.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
  filter: brightness(0.75);
  background-color: rgba(28, 28, 28, 0.95);
}

div.dialogueBox.menu.overlay.fancy button {
  font-family: 'cinzel_decorativebold';
  font-variant: small-caps;
  color: var(--color-faded-gold);
  font-size: 1.2em;
  background-color: var(--bgColor-dark-gray);
}

div.dialogueBox.menu.overlay .icon {
  position: absolute;
  z-index: 25;
  width: 1.5rem;
  height: 1.5rem;
}

div.dialogueBox.menu.overlay .icon.sound {
  right: 0.75rem;
  bottom: 0.75rem;
  background-image: url("/img/icons/sound_on.png");
}

div.dialogueBox.menu.overlay .icon.sound.muted {
  background-image: url("/img/icons/sound_off.png");
  filter: brightness(0.7);
}

div.dialogueBox.menu.overlay .icon.xBtn {
  top: 0.75rem;
  right: 0.75rem;
}

div.dialogueBox.menu.overlay .content {
  background-color: rgba(28, 28, 28, 0.95);
  font-size: 1em;
  max-width: 50vw;
}

div.dialogueBox.menu.overlay .content .contentTitle {
  color: var(--color-faded-gold);
}

div.dialogueBox.menu.overlay .content > * {
  margin: 0.5em;
  color: var(--color-light-silver);
}

div.dialogueBox.menu.overlay .content * {
  font-variant: normal;
  text-align: center;
}

div.dialogueBox.menu.overlay .msg {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

div.dialogueBox.menu.overlay .msg b {
  margin-bottom: 0.75em;
  font-weight: bold;
}

.btnBox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 0.2em 0;
}

.btnBox button {
  margin: 0 0.5em;
  font-variant: small-caps;
  background-color: var(--bgColor-light-gray);
  color: black;
  border: 0.1em solid black;
  font-size: 0.8em;
}

.btnBox.red button {
  background-color: #522b2b;
  color: #CECECE;
  font-size: 1em;
}

.btnBox button:hover {
  filter: brightness(1.15);
}

.btnBox button:active {
  filter: brightness(0.9);
}

#teamInviteMenu > .content {
  background-color: rgba(28, 28, 28, 0.97);
  font-size: 1.2em;
  padding: 1.5em 2.5em;
}

#teamInviteMenu > .content > div {
  color: var(--color-faded-gold);
}

#teamInviteMenu .listContainer {
  font-size: 1em;
  outline: 0.2rem solid #202320;
  width: 15em;
}

#teamInviteMenu .listOpt {
  font-size: 0.9em;
}

#lobbyOverlay {
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  z-index: 90;
  bottom: 0;
  right: 0;
  width: 22.5rem;
  /* height: 15rem; */
  border-top-left-radius: 0.25rem;
  padding: 0.5rem 1.5rem 0.5rem 1rem;
  font-size: 1rem;
  transition: transform ease-out 0.2s, filter ease-out 0.2s;
  border: 0.1rem solid #232323;
  /* 	& .tool-src {
		padding: 0.15rem 0.3rem;
	} */
}

#autoqueue {
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 0.5rem;
  background-image: url("/img/icons/repeat_on.png");
  background-size: contain;
  opacity: 0.9;
}

#autoqueue:not(.on) {
  filter: grayscale(1);
}

#autoqueue:not(.on):hover {
  filter: grayscale(0.7);
}

#autoqueue:not(.on):active {
  filter: grayscale(0.7) brightness(0.8);
}

#autoqueue.on:hover {
  filter: grayscale(0.2);
}

#autoqueue.on:active {
  filter: grayscale(0.2) brightness(0.8);
}

#lobbyOverlay.min {
  transform: translateY(calc(100% - 2.75rem));
}

#lobbyOverlay::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  border-top-left-radius: 0.25rem;
  background-color: rgba(94, 100, 106, 0.95);
  background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
  background-color: rgba(99, 49, 49, 0.85);
  background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.58));
  background-color: rgba(229, 99, 99, 0.9);
  background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.85));
  background-color: rgba(229, 99, 99, 0.9);
  background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0.5), rgba(10, 10, 10, 0.75));
}

#lobbyOverlay *:not(.tooltip) {
  color: var(--color-light-silver);
}

#lobbyOverlay > div.minBtn {
  position: absolute;
  top: 0.5rem;
  right: 0.25em;
}

#lobbyOverlay > div.minBtn::before {
  content: '-';
  display: flex;
  font-size: 1.3rem;
  height: 0.85rem;
  width: 0.85rem;
  justify-content: center;
  align-items: center;
  font-family: 'arial';
  color: black;
  background-color: var(--bgColor-light-gray);
  border-radius: 0.2rem;
  border: 0.1rem solid var(--border-black);
}

#lobbyOverlay.min > div.minBtn::before {
  content: '+';
}

#lobbyOverlay > div.minBtn:hover::before {
  filter: brightness(1.1);
}

#lobbyOverlay > div.minBtn:active::before {
  filter: brightness(0.9);
}

#lobbyOverlay > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

#lobbyOverlay > .opts {
  flex-flow: column nowrap;
  width: 100%;
  margin-bottom: 1em;
}

#lobbyOverlay .listContainer {
  padding-top: 0;
  padding-bottom: 0;
}

#lobbyOverlay .list {
  overflow-y: auto;
}

#lobbyOverlay > .opts > div {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

#lobbyOverlay > .opts > div > div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-end;
}

#lobbyOverlay > .opts > div > div.searching {
  flex-flow: row nowrap;
  align-items: center;
}

#lobbyOverlay .checkContainer {
  margin-left: 0.5em;
}

#lobbyOverlay .checkContainer > .popText {
  font-size: 0.9em;
  flex-flow: column nowrap;
  top: 0;
  left: 100vw;
  transform: translate(-100%, -100%);
  width: 20em;
  height: auto;
  transition: opacity 0.1s ease-in-out 0s, left 0s ease 0.1s;
}

#lobbyOverlay .popText > span {
  text-indent: -2em;
  margin-left: 2em;
}

#lobbyOverlay .popText > span + span {
  padding-top: 0.5em;
}

#lobbyOverlay .checkContainer:hover > .popText {
  opacity: 1;
  left: 0;
  transition: opacity 0.1s ease-in-out 1s, left 0s ease 0.0s;
}

#lobbyOverlay button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 0.1em 0.5em;
  color: #CECECE;
  border: 0.1rem solid black;
  font-size: 1em;
  font-variant: normal;
}

#lobbyOverlay .opts button:not(.searching) {
  background-color: #522b2b;
  font-variant: small-caps;
}

#lobbyOverlay button.searching {
  background-color: #3e3e3e;
}

#lobbyOverlay button.searching > span {
  padding-left: 0.5em;
}

#lobbyOverlay .searching > img {
  padding-right: 0.5em;
  height: 1em;
}

#lobbyOverlay #lobbySize {
  right: -0.2rem;
}

#lobbyOverlay #lobbyMode {
  width: 10em;
}

#lobbyOverlay #lobbyMode .opt, #lobbyOverlay #lobbyReg .opt {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

#lobbyOverlay #lobbyMode .opt .checkContainer, #lobbyOverlay #lobbyReg .opt .checkContainer {
  margin-right: 0.5em;
}

#lobbyOverlay > .slot {
  justify-content: flex-start;
  width: 100%;
  height: 3rem;
}

#lobbyOverlay > div:first-of-type {
  margin-bottom: 0.5em;
}

#lobbyOverlay > div * {
  font-variant: normal;
}

.pfp {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bgColor-pfp);
  border: 0.1rem solid var(--border-gray);
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.5rem;
}

#lobbyOverlay .pfp:not(.none) {
  cursor: pointer;
}

#lobbyOverlay .pfp.none {
  background-image: url("/img/icons/invite.png");
}

#lobbyOverlay .pfp.none.srch {
  background-image: url("/img/icons/searchSlot.png");
}

#lobbyOverlay .pfp:not(.srch):hover {
  filter: brightness(1.1);
}

#lobbyOverlay .pfp:not(.srch):active {
  filter: brightness(0.9);
}

#lobbyOverlay .username {
  font-size: 1.1em;
}

#lobbyOverlay .username:not(.none) {
  cursor: pointer;
}

#lobbyOverlay .username:not(.none):hover {
  font-weight: bold;
}

#lobbyOverlay .bottom {
  justify-content: space-between;
  width: 100%;
  font-size: 1em;
  margin-top: 1em;
}

#lobbyOverlay .bottom > button {
  font-size: 1em;
  background-color: #3e3e3e;
}

#lobbyOverlay .region {
  /* position: absolute;
	bottom: 0.5em;
	left: 1em; */
  min-width: 5em;
  display: flex;
  justify-content: flex-start;
}

#lobbyOverlay .region > .dropDown {
  left: 0;
  top: auto;
  bottom: calc(100% + 0.2rem);
  width: 6em;
}

#lobbyOverlay .region > .listSel {
  text-align: center;
}

#lobbyOverlay .region > .dropArrow {
  transform: rotate(180deg);
}

#lobbyOverlay .mmr {
  margin-left: 0.75em;
  font-family: 'nunitoregular';
  font-size: 0.9em;
  top: 0.15em;
}

.binCont > span {
  margin-right: 0.25em;
}

.binSwitch {
  display: grid		!important;
  grid-template-columns: repeat(2, 1fr);
  z-index: 10;
  align-items: center;
  border: 0.15em solid var(--border-black);
  background-color: var(--bgColor-medium-gray);
  width: auto;
}

.binSwitch:not(.color) > div {
  padding: 0.1em 0.75em;
  display: flex;
  justify-content: center;
}

.binSwitch.color {
  width: 2.3em;
  height: 1.3em;
  border: 0.15em solid var(--border-black);
  /* outline: 0.15em solid var(--border-black); */
  margin: 0.15em;
  border-radius: 1rem;
  overflow: hidden;
}

.binSwitch.color > div {
  padding: 0;
  height: 100%;
  width: 50%;
}

.binSwitch::after {
  content: '';
  z-index: -1;
  width: 50%;
  height: 100%;
  position: absolute;
}

.binSwitch:not(.color)::after {
  background-color: var(--bgColor-button-blue);
  transition: left linear 0.15s;
  border-radius: 0.25em;
}

.binSwitch.color::after {
  transition: left linear 0.15s, background-color linear 0.15s;
  border-radius: 50%;
}

.binSwitch.color.s0::after {
  background-color: var(--color-winner-green);
}

.binSwitch.color.s1::after {
  background-color: var(--color-loser-red);
}

.binSwitch.s0::after {
  left: 0;
}

.binSwitch.s1::after {
  left: 50%;
}

.binSwitch.s0:not(.color) > div:nth-of-type(2):hover,
.binSwitch.s1:not(.color) > div:nth-of-type(1):hover {
  background-color: #192b3e60;
  filter: brightness(1.1);
}

.binSwitch.s0:not(.color) > div:nth-of-type(2):active,
.binSwitch.s1:not(.color) > div:nth-of-type(1):active {
  background-color: #192b3e60;
  filter: brightness(0.9);
}

.binSwitch.color:hover {
  filter: brightness(1.1);
}

.binSwitch.color:active {
  filter: brightness(0.9);
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-= General Classes =-=-=-=-=-=-==-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
.flex.c {
  display: flex						!important;
  justify-content: center				!important;
  align-items: center					!important;
}

.flex.row {
  flex-flow: row nowrap				!important;
}

.flex.col {
  flex-flow: column nowrap			!important;
}

.flex.st {
  justify-content: flex-start			!important;
  align-items: flex-start				!important;
}

.teamRed {
  color: var(--color-team-red) !important;
}

.teamBlue {
  color: var(--color-team-blue) !important;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  font-family: 'cardo-regular';
  line-height: 1.35;
  font-size: 1.5em;
  margin-bottom: 0.5em;
  color: var(--color-faded-gold);
}

.title div, .title span {
  color: var(--color-faded-gold);
  font-family: 'cardo-regular';
  line-height: 1.35;
}

body:not(.editing) .pref.edit {
  display: none						!important;
}

body.editing .pref.show {
  display: none						!important;
}

.linkButton {
  z-index: 10;
  height: calc(var(--menuBar-height) * 0.7);
  width: calc(var(--menuBar-height) * 0.7);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* background-color: contain; */
  transition-duration: 0.1s;
  cursor: pointer;
  margin: 0.2rem 0.3rem;
  border: 0.1rem solid #353535;
  flex-shrink: 0;
}

.linkButton.rounded {
  border-radius: 10%;
}

.icon {
  flex-shrink: 0;
  object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.btn {
  cursor: pointer;
}

.iconBtn {
  /* z-index: 15; */
  display: flex;
  margin: 0 0.5rem;
  height: calc(var(--menuBar-height) * 0.4);
  width: calc(var(--menuBar-height) * 0.4);
  outline: 0.15rem solid var(--border-gray);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  cursor: pointer;
  object-fit: contain;
  border: none;
  outline: none;
}

.iconBtn .iconImg {
  padding: 0.1rem;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.iconBtn.new::after {
  z-index: 16;
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  width: 40%;
  height: 40%;
  background-color: var(--color-loser-red);
  border-radius: 50%;
  pointer-events: none;
}

.iconBtn > .iconImg {
  cursor: pointer;
  object-fit: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.iconButton:hover {
  opacity: 0.85;
}

.iconButton:active {
  opacity: 0.9;
}

.textButton {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  font-family: 'cinzelregular';
  background-color: var(--border-black);
  color: var(--color-faded-gold);
  border: 0.2rem solid #202320;
  outline: 0.2rem solid #2C2D2C;
  margin: 0.2rem;
  transition: 0.1s;
}

.textButton.selected {
  background-color: #3F3310;
  color: var(--color-gold);
  border: 0.2rem solid #272F35;
  outline: 0.2rem solid #3E3B2B;
}

.textButton:not(.selected):hover {
  background-color: #3D310F;
  color: white;
}

.subBar {
  display: flex;
  width: 100%;
  height: 3.5rem;
  padding: 0.25rem;
  border: 0.2rem solid var(--border-black);
  border-top: none;
  background-color: var(--bgColor-dark-gray);
}

.panelBody {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 3rem;
}

.contentBody {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* padding: 3rem; */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #333333 #1a1a1a;
  scrollbar-width: 1rem;
}

#about .contentBody {
  overflow-y: scroll;
}

.profile .contentBody.plain {
  min-height: calc(100vh - var(--menuBar-height));
  flex-flow: column nowrap;
  justify-content: space-between;
}

.contentBody .panelBody {
  height: auto;
  padding: 0;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.contentBody.plain {
  height: 100%;
  width: 100%;
  padding: 0;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--bgColor-dark-gray);
}

.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* box-shadow: inset 0 0 2000px rgba(57, 57, 57, 0.33); */
  border-radius: 0.5rem;
  background-color: #1f1f1f;
  opacity: 0.98;
}

.contentBlock {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem 3rem;
}

.contentBlock:not(.plain) {
  max-height: 78vh;
}

.contentTitle {
  font-family: 'cinzelregular';
  font-variant: small-caps;
  text-align: center;
  color: var(--color-faded-gold);
  margin: 0 0.5rem 1rem 0.5rem;
  font-size: 1.8em;
  width: 100%;
}

/* #tournaments .contentTitle {
	margin-bottom: 0.25em;
} */
#home .contentBlock .contentTitle + .contentTitle, #tournaments .contentBlock .contentTitle + .contentTitle {
  margin-bottom: 0.5em;
  font-variant: normal;
  font-family: 'cardo-regular';
  font-size: 1.6em;
}

.listContainer.contentTitle {
  width: 15em;
  font-size: 1.6em;
}

table .teamName {
  text-align: left;
}

.listContainer {
  font-family: 'cinzelregular';
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  cursor: default;
  padding: 0.25em 0;
  transition: 0.1s;
  color: var(--color-light-silver);
}

.listContainer:not(.plain) {
  border: 0.2rem solid #202320;
  background-color: rgba(16, 16, 16, 0.975);
  color: var(--color-faded-gold);
}

.listContainer:not(.plain):hover {
  background-color: rgba(22, 22, 28, 0.975);
}

.listContainer:not(.plain):active {
  background-color: rgba(8, 8, 8, 0.975);
}

.vList {
  display: flex							!important;
  flex-direction: column					!important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.hList {
  display: flex							!important;
  flex-direction: row						!important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid							!important;
  justify-content: center;
  align-items: center;
}

.vCont {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.listSel {
  width: 100%;
  margin: 0 0.5em;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.dropDown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0;
  z-index: 99;
  outline: 0.2rem solid #202320;
  top: calc(100% + 0.2rem);
  overflow: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  background-color: rgba(18, 19, 15, 0.97);
  scrollbar-color: #333333 #1a1a1a;
  overflow-y: auto;
  max-height: 75vh;
}

.dropArrow {
  height: 0.85em;
  margin-right: 0.5em;
}

.listOpt {
  position: relative;
  z-index: 99;
  display: flex;
  font-variant: normal;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.15em;
  font-size: 0.75em;
  color: #ebe6d8;
  /*background-color: #12130f;*/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-size: 0.9em;
}

.opacityBG ~ .listOpt {
  background-color: transparent;
}

.listOpt.selected {
  background-color: #44381e;
}

.listOpt.predicted {
  background-color: #55482b;
  color: var(--color-faded-gold);
}

.listOpt:hover, .listOpt.nav {
  background-color: #55482b;
}

.listOpt .short {
  display: none;
}

.allOpt {
  font-variant: small-caps;
  background-color: rgba(74, 38, 38, 0.9);
}

.noneOpt {
  color: #ebe6d894;
}

.menu {
  position: absolute;
  top: 0;
}

/* .menu:not(.overlay) {
	background-color: rgba(30, 30, 30, 0.8);
} */
.menu.overlay {
  position: absolute;
  z-index: 500;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
}

.menu.overlay::before {
  z-index: -1;
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}

.menu > .content {
  z-index: 1;
  padding: 0.5em 2em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  width: 100%;
  height: 100%;
}

.menu > .content > * {
  margin: 0.5em;
  color: var(--color-light-silver);
}

.menu > .content * {
  font-variant: normal;
  text-align: center;
}

.menu.left {
  transition: left 0.4s ease-in-out;
  left: 0;
  right: auto;
}

.menu.right {
  transition: right 0.4s ease-in-out;
  left: auto;
  right: 0;
}

.tableContainer {
  overflow: hidden;
  max-height: 90%;
  height: auto;
  width: 100%;
  outline: 0.2rem double #0c0c0c;
}

.opacityBG {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: #12130f;
  opacity: 0.95;
  background-size: 100%;
  background-position: center;
}

/* Plain namecards
.nameCard {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 10rem;
	width: 20%;
	margin: 3% 2.5%;
	padding: 0.5em;
	border-radius: 5px;
	background-color: #2e3139;
	font-size: 1.4em;
}

.nameCard div {
	text-align: center;
	color: #b7ad90;
}
*/
.nameCard {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3em;
  height: 6rem;
  width: 22.5%;
  margin: 0.75rem 1.25%;
  padding: 0.5rem;
  /* background-color: #373017; */
  background-color: #443a29;
  border: 0.2rem double #151515;
  border-radius: 0.5em;
  left: 0;
  transition: left 0.2s ease-in-out, transform 0.2s ease-in-out;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.nameCard.centered {
  transform: translateX(-50%);
  left: 50%;
}

.nameCard span {
  text-align: center;
  color: #d7d1bf;
  font-variant: normal;
  line-height: 1.2;
}

.nameCard.selected {
  border: 0.1rem solid #a2893d;
  padding: 0.6rem;
}

.gridContainer {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.spacerLine {
  width: 85%;
  height: 0.2rem;
  background-color: #484848;
}

.champIcon {
  height: 1.8em;
  width: auto;
  margin-left: 0.4em;
}

.ytIcon, .steamIcon {
  height: auto;
  width: 2.5rem;
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  opacity: 0.7;
}

.steamIcon {
  opacity: 0.6;
}

.numImg1 {
  height: 1.15em;
  width: auto;
}

.numImg2 {
  height: 1.05em;
}

.numImg3 {
  height: 0.95em;
}

@keyframes fade-in {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.fadeable {
  z-index: 100;
  left: 50%;
  top: 50%;
  opacity: 0.5;
  transition: 0.3s;
}

.fadeable:hover {
  opacity: 1;
}

.emptyText {
  font-variant: small-caps;
}

#notifMenu .notif.emptyText {
  color: rgba(255, 255, 255, 0.4);
  padding-top: 1em;
  padding-bottom: 1em;
}

tr.emptyText, .gridContainer div.emptyText {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  color: rgba(255, 255, 255, 0.4);
  background-color: #161616;
  font-size: 1.2em;
}

div.loading {
  height: 6rem;
  width: 100%;
  display: flex;
}

div.loading:hover {
  filter: none;
  background-color: #161616;
}

.gridContainer div.emptyText, .gridContainer div.loading {
  width: 100%;
  margin-top: 1rem;
  border-radius: 0.5rem;
}

.loading + .empty {
  display: none;
}

div.empty {
  padding: 1em;
  background-color: #161616;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-variant: small-caps;
}

#socialMenu .empty {
  height: 100%;
  width: 100%;
}

div:not(.title) + .empty, *:not(.title) + .emptyText {
  display: none								!important;
}

tr.loading, .gridContainer div.loading {
  height: 10rem;
}

tr.loading, td.loading, div.loading {
  background-color: #161616;
}

tr.loading::before, td.loading::before, div.loading::before {
  position: absolute;
  content: '';
  background-image: url("/img/icons/loading.webp");
  background-repeat: no-repeat;
  background-size: 4rem 4rem;
  background-position: center;
  opacity: 0.25;
  width: 100%;
  height: 100%;
}

.errorMsg, #loginWindow form .errorMsg {
  color: #c44343;
  font-variant: normal;
}

h1.bodyTitle {
  text-align: center;
  padding: 0.75em 2em;
  font-family: 'cinzelregular';
  font-size: 2.6em;
  color: #bfbfbf;
  margin: 0;
  width: 100%;
  background-color: var(--bgColor-header-blue);
  background-image: radial-gradient(circle farthest-corner, rgba(0, 0, 0, 0.35), transparent);
}

h1.bodyTitle > .float {
  z-index: 25;
}

h1.bodyTitle > .float > div {
  margin: 0 0.5rem;
}

h1.bodyTitle > .float > div:first-child {
  margin-left: 0;
}

h1.bodyTitle > .float > div:last-child {
  margin-right: 0;
}

.helper:not(.custom) {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 1em;
  height: 1em;
  margin-left: 1em;
  font-size: 1.2em;
  padding: 0.6em;
  left: 100%;
  color: #4285f4;
  border: 0.1rem solid #4285f4;
  border-radius: 50%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.popText {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 15em;
  font-size: 0.8em;
  font-variant: normal;
  font-family: 'cardo-regular';
  opacity: 0;
  left: 100vw;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5em;
  border-radius: 0.3em;
  color: var(--color-silver);
  background-color: #2a2a2a;
  transition: opacity 0.1s ease-in-out, left 0s ease 0.1s;
}

.helper:hover > .popText {
  opacity: 1;
  left: 150%;
  transition: opacity 0.1s ease-in-out, left 0s ease 0s;
}

.statText * {
  font-variant: normal;
}

.notif {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 1em;
  padding: 0.25em 0.75em;
  outline: 0.15rem double var(--border-black);
}

.notif.new {
  background-color: rgba(78, 62, 41, 0.9);
}

.notif:not(.mini) > *:not(span) {
  margin: 0.25em 0;
}

.notif div.ts {
  font-size: 0.75em;
  margin-left: auto;
  margin-top: 0;
  right: -0.5em;
}

.notif div.ts > .date {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  transform: translateY(-105%);
  right: -0.35em;
  width: 15em;
  padding: 0.35em 0;
  background-color: var(--bgColor-dark-gray);
  border: 0.1rem solid var(--border-gray);
  border-radius: 0.3rem;
}

.btnBox + div.ts, .actRes + div.ts {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  margin: 0;
}

.notif div.ts:hover {
  filter: brightness(1.25);
}

.notif div.ts:hover > .date {
  filter: brightness(0.8);
  display: flex;
}

.notif.mini {
  position: absolute;
  z-index: 500;
  top: 1rem;
  right: 1rem;
  width: 16rem;
  min-height: 9rem;
  box-shadow: 0 0 5px 5px black;
  background-color: var(--bgColor-transp-slate);
  padding: 0.5rem 1rem 0.5rem 1rem;
  color: var(--color-silver);
  justify-content: space-around;
  align-items: center;
  opacity: 1;
  transition: opacity linear 0s 0s;
}

.notif.mini.no-body {
  min-height: 6rem;
}

.notif.mini.no-body .title {
  margin: 0;
  color: var(--color-silver);
}

.notif.mini .title {
  top: 0;
  width: 100%;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--color-deepest-gold);
  font-size: 1.4em;
}

.notif.mini .title:not(:last-child) {
  position: absolute;
  border-bottom: 0.1rem solid var(--border-coal);
}

.notif.mini.fade {
  transition: opacity linear 0.5s 0s;
}

.notif.mini .body {
  text-align: center;
  padding: 0.5rem 0;
}

.notif.mini .title + .body {
  margin-top: 2rem;
}

.notif .x {
  position: absolute;
  top: 0;
  right: 0;
  height: 1.8rem;
  width: 1.8rem;
  z-index: 505;
  padding: 0.2rem;
}

.x {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: default;
  object-fit: contain;
  height: 1em;
  width: 1em;
}

.x:hover {
  filter: brightness(1.2);
  font-weight: normal;
}

.x:active {
  filter: brightness(0.8);
  font-weight: normal;
}

div.pref.edit:not(.icon), .actRes {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  background-size: contain;
  font-size: 0.9em;
  padding: 0em 0.3em;
  border-radius: 0.05em;
  color: var(--color-light-silver);
  background-color: rgba(0, 0, 0, 0.2);
  border: 0.1rem solid #2a4247;
  font-variant: normal;
}

.actRes {
  font-style: italic;
  color: var(--color-silver);
}

div.pref.edit:not(.icon):hover {
  background-color: rgba(48, 48, 48, 0.2);
}

div.pref.edit:not(.icon):active {
  background-color: rgba(0, 0, 0, 0.3);
}

.collapsable {
  transition: height 0.3s ease-out, margin-top 0.3s ease-out, margin-bottom 0.3s ease-out, padding 0.3s ease-out;
  overflow: hidden;
}

.collapsed {
  height: 0				!important;
  margin-top: 0			!important;
  margin-bottom: 0		!important;
  padding: 0				!important;
  border: none			!important;
}

.cDummy {
  position: absolute;
  opacity: 0;
  z-index: -1;
  left: 0;
  top: 0;
}

.frReq {
  background-image: url("/img/icons/addFriend.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.profile .frReq {
  position: absolute;
  left: calc(100% + 0.25em);
  top: 50%;
  transform: translateY(-50%);
  width: 0.8em;
  height: 0.8em;
}

.profile #linkedAccs h2 {
  margin-bottom: 0.25em;
}

.profile #linkedAccs .acc {
  padding: 0.2em;
  min-width: 3em;
  margin: 0 0.5em 0 1em;
}

.profile #linkedAccs .disc.acc {
  cursor: pointer;
  z-index: 11;
}

.profile #linkedAccs .icon {
  width: 1.4em;
  height: auto;
  border-radius: 0.2em;
  margin: 0.2em;
}

.profile #linkedAccs .icon.intr {
  width: 1.5em;
  height: auto;
  cursor: pointer;
  margin: 0;
  padding: 0.2em;
}

.icon.intr {
  cursor: pointer;
}

.profile #linkedAccs .x.icon {
  height: 1.4em;
}

#linkedAccs .statText > div.grid {
  grid-template-areas: 'di d ds du'
 'si s ss su';
  justify-items: center;
}

.profile .acc div {
  padding: 0 0.5em;
  font-size: 0.9em;
  top: -0.1em;
}

.checkWrap {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  cursor: default;
}

#profileMenu .checkWrap, #profileMenu .checkWrap * {
  cursor: default;
}

.checkWrap .checkContainer {
  margin-right: 0.5em;
}

.checkContainer {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  width: 1em;
  height: 1em;
}

.checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-size: 100%;
  transition-duration: 0.1s;
  background-color: #101010;
  background-image: none;
  font-weight: bold;
}

.checkbox.gray {
  background-color: #333;
}

.checkbox:not(.disabled):hover {
  filter: brightness(1.15);
  background-color: #2d2d2d;
}

.checkbox:not(.disabled):hover.gray {
  background-color: #403f3f;
}

.checkbox:not(.disabled):active {
  filter: brightness(0.9);
  background-color: #0a0a0a;
}

.checkbox:not(.disabled):active.gray {
  background-color: #2f2f2f;
}

.checked {
  background-image: url("/img/icons/check.png");
}

.checked.g {
  background-image: url("/img/icons/checkG.png");
}

.checked.o {
  background-image: url("/img/icons/checkO.png");
}

.tooltip, .texttip {
  position: fixed								!important;
  opacity: 0.9;
  background-color: #dedede;
  color: black;
  border: 0.1rem solid #2F2D2F;
  font-variant: normal						!important;
  z-index: 999								!important;
  padding: 0.1em 0.5em;
  font-size: 0.85rem;
  font-family: 'cardo-bold';
  transition: opacity 0.1s ease-in, left 0s ease-in 0s;
}

.tooltip {
  display: none								!important;
}

.tool-src:hover > .tooltip:not(.invisible) {
  display: flex								!important;
}

.texttip {
  border-radius: 0.2rem;
  opacity: 0.75;
}

.tHide {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: default;
  opacity: 0;
  left: 1000%							!important;
  transition: opacity 0.1s ease-in, left 0s ease-in 0.1s;
}

#linkedAccs .texttip {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.offscr {
  position: absolute;
  opacity: 0;
  width: 1px;
  left: -200vw;
}

.warning {
  background-image: url("/img/icons/warning.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= General Elements =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}

form input {
  background-color: #5b7188;
  border: 0.1rem solid #161616;
  cursor: text;
  font-size: 1.2em;
  text-align: left;
  padding: 0.1em 0.5em;
  font-variant: normal;
}

form label, form span {
  color: var(--color-silver);
}

form input[type="submit"] {
  background-color: lightslategray;
  cursor: default;
  font-variant: small-caps;
  padding: 0.1em 1em;
}

form input[type="submit"]:hover {
  filter: brightness(1.15);
}

form input[type="submit"]:active {
  filter: brightness(0.9);
}

form .form-cbox {
  display: flex;
  align-items: center;
}

.checkContainer + label {
  margin-left: 0.5rem;
}

a, .linkText {
  color: #4285f4;
  text-decoration: none;
  cursor: pointer;
}

b {
  font-weight: bold					!important;
}

.tableContainer table {
  display: block;
  height: 100%;
  border-collapse: collapse;
  border: 0.2rem solid #161616;
}

.tableContainer thead {
  z-index: 15;
  display: block;
  height: 2.5em;
  background-color: #1a1a1a;
  border-top: 0.2rem solid #121212;
  border-bottom: 0.2rem solid #121212;
  width: 100%;
}

.tableContainer thead tr {
  border: none;
  width: 100%;
  height: 100%;
}

.tableContainer tbody {
  z-index: 10;
  display: block;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  scrollbar-color: #333333 #1a1a1a;
  scrollbar-width: 1rem;
}

#profileBox .tableContainer > table {
  max-height: inherit;
}

#profileBox .tableContainer > table > tbody {
  max-height: inherit;
  overflow-y: scroll;
}

.tableContainer thead + tbody {
  height: calc(100% - 2.5em);
}

.tableContainer tr {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #1b1b1b;
  border-top: 0.2rem double #101110;
  border-bottom: 0.2rem double #101110;
}

.tableContainer tr a {
  font-variant: normal;
}

.tableContainer th {
  color: var(--color-faded-gold);
  font-size: 1.4em;
  font-weight: normal;
  font-variant: normal;
}

/* Table headers tooltips
th div {
	z-index: 20;
	position: absolute;
	display: none;
	visibility: hidden;
	width: 5em;
	height: 5em;
	left: 100%;
	top: 0;
	background-color: var(--bgColor-light-black);
}

th:hover div {
	display: block;
	visibility: visible;
	transition: ease-in-out;
}

th div:hover {
	display: none;
	visibility: hidden;
}*/
.tableContainer td {
  height: 100%;
  color: var(--color-silver);
  font-size: 1.2em;
  text-align: center;
  font-weight: normal;
  font-variant: normal;
}

.tableContainer td * {
  font-weight: normal;
  font-variant: normal;
}

.tableContainer td, .tableContainer th {
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  background-color: transparent;
  border: none;
  border-width: 0;
  text-align: center;
  margin: 0;
  padding: 0.5em 1em;
}

input:focus {
  outline: unset;
  text-align: left;
}

button:hover {
  filter: brightness(1.15);
}

button:active {
  filter: brightness(0.9);
}

input::selection {
  color: #1e180d;
  background-color: rgba(255, 255, 255, 0.2);
  /* color: #dfc882; */
}

input:placeholder-shown {
  text-transform: none;
  text-align: left;
  color: var(--color-faded-gold);
}

input::placeholder {
  text-transform: none;
  text-align: left;
  color: var(--color-faded-gold);
  opacity: 0.5;
}

input::-ms-input-placeholder {
  text-transform: none;
  text-align: left;
  color: var(--color-faded-gold);
  opacity: 0.5;
}

button {
  font-size: 1em;
  background-color: #522b2b;
  color: #CECECE;
  border: 0.1rem solid black;
  padding: 0.25em 0.75em;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(18, 18, 18, 0.9);
}

::-webkit-scrollbar-thumb {
  background: #3c3c3c;
}

hr {
  width: 100%;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-=-=-= Home =-=-=-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
#home {
  align-items: center;
}

#home .contentBlock {
  width: 33rem;
  height: 78vh;
  justify-content: flex-start;
}

#home .boardBox .contentTitle {
  margin-bottom: 0.15em;
}

#home .boardBox .listContainer {
  border: 0.2rem solid #202320;
  font-size: 1.2em;
  margin-bottom: 0.6em;
  width: 15em;
  text-align: center;
}

/* #home .listOpt {
	font-size: 0.9em;
} */
/*
@keyframes scrolling {
	0% {
		left: 0;
	}
	49% {
		left: -100%;
		opacity: 1;
	}
	50% {
		left: -100%;
		opacity: 0;
	}
	51% {
		left: 100%;
		opacity: 1;
	}
	100% {
		left: 0;
	}
}

@keyframes scrolling-start {
	0% { left: 0; }
	95% { left: -200%; }
}

@keyframes scrolling-loop {
	0% { left: 100%; }
	95% { left: -100%; }
}*/
#ticker {
  z-index: 5;
  position: relative;
  left: 50%;
  width: 200%;
  min-height: 3rem;
  margin-top: 0.15rem;
  padding: 0;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}

#ticker:hover {
  opacity: 1;
}

#ticker > .item {
  display: flex;
  position: absolute;
  flex-shrink: 0;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0.15rem;
  width: auto;
  padding: 0.2rem;
  color: var(--color-silver);
  font-size: 1.2em;
  font-family: 'cinzelregular';
  border: 0.1px solid green;
  margin: 0 0.1em;
  left: 100vw;
  transition-duration: 16s;
  transition-timing-function: linear;
  /*
	animation: scrolling;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 1.5s;
	*/
}

#ticker .winner {
  font-family: 'cinzel_decorativebold';
  color: var(--color-winner-green);
  font-size: 0.9em;
}

#ticker .loser {
  color: var(--color-loser-red);
  font-size: 0.9em;
}

#newsFeed {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
  scrollbar-color: #333333 #1a1a1a;
  scrollbar-width: 1rem;
  outline: 0.2rem solid #262626;
}

#newsFeed tr:not(.loading) {
  height: 13rem;
  border-top: none;
  border-bottom: 0.2rem double #453921;
  cursor: pointer;
}

#newsFeed tr:last-of-type {
  border-bottom: 0.2rem solid #161616;
}

#newsFeed tr * {
  cursor: pointer;
}

#home tr.loading {
  height: 53vh;
}

#newsFeed td {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0;
  background-image: url("");
  background-size: cover;
  background-position: center;
  position: relative;
}

#newsFeed .tListContent {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  min-height: 4.75rem;
  width: 100%;
  padding: 0.3em;
  font-size: 0.9em;
}

#newsFeed td div {
  padding: 0.1rem;
}

#newsFeed td div:not(.opacityBG) {
  position: relative;
  z-index: 10;
  color: #C6C4BC;
  font-variant: normal;
}

#newsFeed td div:nth-of-type(2) {
  /*font-variant: small-caps;*/
  font-size: 1.2em;
}

#newsFeed td div > .opacityBG {
  bottom: 0;
  opacity: 0.9;
}

#newsFeed td > .opacityBG {
  opacity: 0.8;
  transition: 0.15s;
}

/*
#newsFeed td > .tListContent:hover ~ .opacityBG {
	opacity: 1;
}

#newsFeed td > .opacityBG:hover {
	opacity: 1;
}*/
#home .boardBox.match thead tr:nth-of-type(1) {
  width: 100%;
}

#home .boardBox td {
  height: 3rem;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-=-=-= Matchups =-=-=-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
#matchPoolBox, #matchScheduleBox {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 45rem;
  height: unset;
  max-height: 78vh;
}

#matchups .panel {
  margin-left: 0;
  margin-right: 0;
}

.multiPanel {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

#matchScheduleBox::before {
  background-color: var(--bgColor-gray);
  box-shadow: none;
  border-top-right-radius: 0;
}

#filterBox::before {
  background-color: var(--bgColor-gray);
  box-shadow: none;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

#filterBox {
  width: 25rem;
  border-left: 0.1rem dashed var(--bgColor-gray);
}

#filterBox > div {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0.5em;
}

#filterBox label {
  color: var(--color-silver);
  font-size: 1.1em;
  font-variant: normal;
  width: 4.5em;
  text-align: right;
  padding-right: 1em;
}

#filterBox > div > label:nth-of-type(2) {
  margin-left: 1em;
}

#fBoxTeam {
  width: 75%;
  height: auto;
  padding: 0;
}

#varFilter {
  width: 75%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

#fBoxMode {
  width: 100%;
}

#fBoxMode .listSel, #fBoxPNum .listSel {
  font-variant: normal;
}

#varFilter .listSel, #fBoxReg .listSel {
  padding: 0em 0.5em;
}

#filterBox .listContainer {
  font-size: 1.1em;
  margin: 0;
  border: 0.2rem solid #202320;
}

#filterBox .listSel {
  margin: 0;
  text-align: center;
}

#filterBox .listOpt {
  justify-content: center;
  font-size: 0.8em;
  padding: 0.25em 1em;
}

#fBoxTeam .dropArrow {
  position: absolute;
  z-index: 14;
  right: 0;
  left: auto;
  height: 100%;
  width: 0.85em;
  object-fit: contain;
}

#fBoxTeam input {
  z-index: 15;
  width: 100%;
  font-family: 'cinzelregular';
  color: var(--color-faded-gold);
  font-size: 1em;
  padding-right: 1.5em;
}

#fBoxTeam .list {
  max-height: 50vh;
  width: auto;
  overflow-y: auto;
}

#fBoxReg .list {
  width: 10em;
  left: 50%;
  transform: translateX(-50%);
}

#filterBox button {
  font-size: 1em;
  background-color: #522b2b;
  color: #CECECE;
  border: 0.1rem solid black;
  padding: 0.25em 0.75em;
  margin-top: 1em;
}

#filterBox button:hover {
  filter: brightness(1.15);
}

#filterBox button:active {
  filter: brightness(0.9);
}

#matchFrame {
  padding: 0.5rem 1rem;
  width: 25rem;
  border: 0.2rem solid #202320;
  margin-bottom: 0.75rem;
}

#matchFrame .listSel {
  font-size: 1em;
  font-family: 'cinzelregular';
  font-variant: small-caps;
  text-align: center;
  padding: 0;
}

#matchFrame .list {
  outline: 0.2rem solid #202320;
  top: calc(100% + 0.2rem);
}

#matchFrame .listOpt {
  padding: 0.4em;
  font-size: 0.6em;
  color: #ebe6d8;
}

#matchups .tableContainer {
  height: auto;
  max-height: 90%;
  overflow: hidden;
}

#matchPool.gridContainer, #matchSchedule.gridContainer {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#matchPoolGrid, #matchScheduleGrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.matchCard {
  z-index: 30;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  margin: 0.75rem 1.25%;
  height: 8rem;
  width: 22.5%;
  background-color: #2e3139;
  border: 0.1rem solid black;
  border-radius: 0.5em;
  padding: 0;
  overflow: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.matchCard .warning {
  position: absolute;
  z-index: 75;
  width: 2em;
  height: 2em;
  right: 0;
  left: auto;
  opacity: 0.95;
  padding: 0.5em;
  background-size: 75%;
}

.matchCard .warning .popText {
  left: auto;
  right: 100vw;
  font-size: 1em;
  transition: opacity 0.1s ease-in-out, right 0s ease 0.1s;
  color: var(--color-light-silver);
}

.matchCard .warning.helper:hover .popText {
  right: 125%;
  transition: opacity 0.1s ease-in-out, right 0s ease 0s;
}

.matchCard span:nth-of-type(1) .warning {
  top: 0;
  bottom: auto;
}

.matchCard span:nth-of-type(1) .warning .popText {
  top: 100%;
  bottom: auto;
}

.matchCard span:nth-of-type(2) .warning {
  top: auto;
  bottom: 0;
}

.matchCard span:nth-of-type(2) .warning .popText {
  top: auto;
  bottom: -75%;
}

.matchCard span .warning .popText:hover {
  display: none;
}

.matchCard:hover {
  /* border: 0.1rem solid #877a51; */
  box-shadow: 0 0 0.5rem 0.1rem black;
  transform: scale(102%, 102%);
  /*margin: 0.65rem 1%;
	height: 8.2rem;
	width: 23%;*/
}

.matchCard > div.teamBG {
  position: absolute;
  left: -5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110%;
  height: 100%;
  font-size: 1em;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  transform: skewY(5deg);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-size: 100%;
  outline: 0.15rem solid black;
}

.matchCard span {
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'cinzelbold';
  font-variant: normal;
  color: silver;
  text-shadow: -0.1em 0.1em 0.25em black;
  text-align: center;
  font-size: 0.9em;
  padding: calc(5% + 0.2em);
  height: 50%;
  width: 100%;
  line-height: 1.2;
}

.matchCard > div.t1 {
  background-color: var(--bgColor-team-blue);
  background-image: url("/img/insigniaFG0.png");
  background-size: 97.5%;
  filter: brightness(1.1);
}

.matchCard > div.t1 > .opacityBG {
  background-image: linear-gradient(to left, #253152, black 66%);
  opacity: 0.5;
}

.matchCard > div.t2 {
  background-color: var(--bgColor-team-red);
  background-image: url("/img/insigniaIC0.png");
}

.matchCard > div.t2 > .opacityBG {
  background-image: linear-gradient(to left, black 25%, #4a1f1f);
  opacity: 0.55;
}

.matchCard span.t1:hover ~ div.t1 {
  background-image: url("/img/insigniaFG1.png");
  filter: brightness(0.95);
}

.matchCard span.t2:hover ~ div.t2 {
  background-image: url("/img/insigniaIC1.png");
  filter: brightness(1.1);
}

.matchCard > div:nth-of-type(1) {
  z-index: 10;
  top: -50%;
  /* background-position: 92.5% 190%; */
}

.matchCard > div:nth-of-type(1).t1 {
  background-position-y: 10%;
  background-position-x: 75%;
}

.matchCard > div:nth-of-type(1).t2 {
  background-position-y: 10%;
}

.matchCard > div:nth-of-type(2) {
  top: 50%;
  z-index: 5;
  /* background-position: 7.5% -30%; */
}

.matchCard > div:nth-of-type(2).t1 {
  background-position-y: bottom;
  background-position-x: 67%;
}

.matchCard > div:nth-of-type(2).t2 {
  background-position-y: 90%;
}

.matchCard > div:nth-of-type(1) span {
  top: 66.7%;
}

.matchCard > div:nth-of-type(2) span {
  top: 17%;
}

/* .matchCard:hover > div.teamBG {
	outline: 0.1rem solid #877a51;
} */
/* Cards with info sliders
.cardWrapper {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	margin: 0.75rem 1.25%;
	height: 8rem;
	width: 22.5%;
	padding: 0;
	justify-content: space-around;
    border: 0.1rem solid black;
	overflow: visible;
	border: 0;
}

.matchCard {
	margin: 0;
	width: 100%;
	height: 100%;
}

.matchCard.elevated {
	z-index: 32;
}

.infoSlider {
	z-index: 31;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column nowrap;
	position: absolute;
	left: calc(100% - 0.1rem);
	width: 150%;
	height: 100%;
	border: 0.1rem solid black;
	transition: 0.3s;
	border-radius: 5px;
	overflow: hidden;
	background-color: gray;
}

/* set infoslider to display on opposite side if right does not have space * /

.infoSlider.collapsed {
	width: 0px;
	visibility: hidden;
}*/
/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Tournaments =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
.champCell {
  flex-flow: column nowrap;
  justify-content: space-around;
}

.champCell span:nth-of-type(1) {
  font-family: "cinzelregular";
  text-decoration: underline;
  color: #d2931e;
}

#tourneyScheduleBox, #tourneyHistoryBox, #tourneys {
  width: 45rem;
}

#tourneys tr {
  min-height: 6em;
}

/*
#tourneyScheduleTable tr:first-of-type {
}

#tourneyScheduleTable last-of-type {
}
*/
#tourneys td {
  height: 100%;
  padding: 0.5em 1em;
}

#tourneys td * {
  padding: .2rem 0;
}

#tourneyScheduleTable td:nth-of-type(1), #tourneys.sched td:nth-of-type(1) {
  width: 37.5%;
}

#tourneyScheduleTable td:nth-of-type(2), #tourneys.sched td:nth-of-type(2) {
  width: 15%;
  flex-direction: column;
  font-size: 1.1em;
}

#tourneyScheduleTable td:nth-of-type(3), #tourneys.sched td:nth-of-type(3) {
  width: 25%;
  font-size: 1.1em;
  flex-direction: column;
}

#tourneyScheduleTable td:nth-of-type(4), #tourneys.sched td:nth-of-type(4) {
  width: 22.5%;
  font-size: 1.1em;
  flex-direction: column;
}

/*----------------------------------------------------------------*/
#tourneyHistoryTable td:nth-of-type(1), #tourneys.past td:nth-of-type(1) {
  width: 37.5%;
}

#tourneyHistoryTable td:nth-of-type(2), #tourneys.past td:nth-of-type(2) {
  width: 20%;
  font-size: 1.1em;
  flex-direction: column;
}

#tourneyHistoryTable td:nth-of-type(3), #tourneys.past td:nth-of-type(3) {
  width: 20%;
  font-size: 1.1em;
  flex-direction: column;
}

#tourneyHistoryTable td:nth-of-type(4), #tourneys.past td:nth-of-type(4) {
  width: 22.5%;
  flex-direction: column;
  font-size: 1.1em;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Leaderboards =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
.boardBox {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 45rem;
}

.boardBox .tableContainer {
  overflow: hidden;
}

.leaderboard {
  width: 100%;
  border: 0.2rem solid #161616;
  border-collapse: collapse;
}

.leaderboard a.name {
  color: var(--color-silver);
}

.leaderboard a.name:hover {
  filter: brightness(1.2);
}

.leaderboard td {
  height: 3rem;
}

.boardBox.match th:nth-of-type(1), .boardBox.match td:nth-of-type(1) {
  width: 15%;
}

.boardBox.match td:nth-of-type(1) {
  font-size: 1.2em;
  font-weight: bold;
  font-family: 'cardo-regular';
}

.boardBox.match th:nth-of-type(2), .boardBox.match td:nth-of-type(2) {
  width: 55%;
  justify-content: flex-start;
  padding: 0 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boardBox.match th:nth-of-type(3), .boardBox.match td:nth-of-type(3) {
  width: 15%;
}

.boardBox.match td:nth-of-type(4), .boardBox.match th:nth-of-type(4) {
  width: 15%;
  filter: brightness(0.8);
}

.boardBox.match td:nth-of-type(4) img, .boardBox.match th:nth-of-type(4) img {
  object-fit: contain;
}

.boardBox.match th:nth-of-type(4) img {
  height: 1.67rem;
}

.boardBox.match td:nth-of-type(4) img {
  height: 1.25rem;
}

.boardBox.match td:nth-of-type(3), .boardBox.match td:nth-of-type(4) {
  font-family: 'times';
}

/*----------------------------------------------------------------*/
#tourneyBoard th:nth-of-type(1), #tourneyBoard td:nth-of-type(1),
#topTourneyBoard th:nth-of-type(1), #topTourneyBoard td:nth-of-type(1) {
  /*width: 12%;*/
  width: 15%;
}

#tourneyBoard th:nth-of-type(2), #tourneyBoard td:nth-of-type(2),
#topTourneyBoard th:nth-of-type(2), #topTourneyBoard td:nth-of-type(2) {
  width: 55%;
  justify-content: flex-start;
  padding: 0 1em;
}

#tourneyBoard th:nth-of-type(3), #tourneyBoard td:nth-of-type(3),
#topTourneyBoard th:nth-of-type(3), #topTourneyBoard td:nth-of-type(3) {
  /*width: 12%;*/
  width: 15%;
}

#tourneyBoard th:nth-of-type(4), #tourneyBoard td:nth-of-type(4),
#topTourneyBoard th:nth-of-type(4), #topTourneyBoard td:nth-of-type(4) {
  /*width: 10%;*/
  width: 15%;
}

/*
#tourneyBoard th:nth-of-type(5), #tourneyBoard td:nth-of-type(5),
#topTourneyBoard th:nth-of-type(5), #topTourneyBoard td:nth-of-type(5) {
	width: 11%;
}*/
/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= About Page =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
#aboutBox {
  width: 100%;
  min-height: calc(100vh - var(--menuBar-height) - var(--footer-height));
  height: auto;
  max-height: unset;
  margin: 0;
  padding: 0;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}

#aboutBox:before {
  box-shadow: none;
}

#about h1.bodyTitle {
  font-family: 'cinzel_decorativebold';
  font-size: 2.8em;
}

#aboutBox .bodyTitle {
  color: #bfbfbf;
  line-height: unset;
  line-height: unset;
  font-variant: small-caps;
}

#aboutBox h2 {
  font-size: 1.6em;
  padding: 0.5em;
  color: var(--color-faded-gold);
  width: 65%;
  text-align: center;
  background-color: #101010;
  margin: 0 0 0.1rem 0;
  border-radius: 0.25em;
  transition: background-color 0.05s ease-in-out;
  cursor: pointer;
  font-variant: small-caps;
}

#aboutBox h2:hover {
  filter: brightness(1.1);
}

#aboutBox p {
  font-size: 1.25em;
  margin: 0.5em 25% 2em 25%;
  color: #bfbfbf;
  font-variant: normal;
  text-indent: 1em;
  text-align: center;
}

#aboutBox p * {
  color: #bfbfbf;
  font-variant: normal;
  text-align: center;
}

#aboutBox p a {
  color: #4285f4;
  text-decoration: none;
  cursor: pointer;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Signup Page =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
#signup .contentBody {
  width: 100%;
  height: 100%;
}

#signupBox.contentBlock {
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  max-height: unset;
  margin: 0;
}

#signup h1.bodyTitle {
  font-family: 'cinzelregular';
  width: 100%;
  background-color: var(--bgColor-header-blue);
  background-image: radial-gradient(circle farthest-corner, rgba(0, 0, 0, 0.35), transparent);
  color: var(--color-faded-gold);
}

#signupBox form {
  align-items: center;
}

#signupBox form > div {
  margin: 0.5rem 0;
}

#signupBox form > div.titled {
  margin-right: 6rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

#signupBox .text.titled label {
  display: inline-block;
  width: 6rem;
  margin-right: 1rem;
  text-align: right;
  line-height: 1.3;
}

#signupBox .text {
  font-variant: normal;
  color: var(--color-deep-gold);
  text-align: center;
}

#signupBox .text input {
  background-color: #939393;
  width: 20rem;
}

#signupBox input[type="submit"], #pfpChange input[type="submit"] {
  background-color: #522b2b;
  color: #CECECE;
  margin: 1rem 0;
  width: auto;
}

.pfpUpload input[type="file"] {
  position: absolute;
  z-index: 25;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: default;
  padding: 0;
}

#signupBox .fileInput > div {
  background-color: #394141;
  color: #CECECE;
  height: 100%;
  padding: 0.25em 0.5em;
  width: auto;
}

.pfpUpload {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  margin: 1rem 0;
}

.pfpUpload label {
  border: none;
  cursor: default;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}

.pfpUpload label > div {
  width: auto;
  padding: 0.25em 0.5em;
  background-color: #522b2b;
  color: #CECECE;
}

.pfpUpload:hover label > div {
  filter: brightness(1.15);
}

.pfpUpload:active label > div {
  filter: brightness(0.9);
}

.pfpUpload > .pfpPreview {
  min-height: 64px;
  min-width: 64px;
  max-height: 128px;
  max-width: 128px;
  background-color: var(--bgColor-pfp);
}

#signupBox form .errorMsg {
  width: 32rem;
  padding: 0 6rem;
  margin: 0;
  text-align: center;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= User Profile =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
.profile h1 {
  --menu-btn-size: 3rem;
  --menu-btn-offset: 1rem;
  --profile-color: var(--bgColor-header-blue);
  background-color: var(--profile-color);
}

#joinBtn {
  background-image: url("/img/icons/joinWhiteB.png");
  width: calc(var(--menu-btn-size) + 1rem);
  height: calc(var(--menu-btn-size) + 1rem);
  margin-top: -0.5rem;
}

#leaveBtn {
  background-image: url("/img/icons/leaveWhite.png");
}

.profile .menuBtn, .profile .editBtn, .profile .float {
  position: absolute;
  background-size: contain;
  background-position: center;
  top: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
}

.profile .menuBtn.left, .profile .editBtn.left, .profile .float.left {
  left: var(--menu-btn-offset);
  right: auto;
}

.profile .menuBtn.right, .profile .editBtn.right, .profile .float.right {
  left: auto;
  right: var(--menu-btn-offset);
}

.profile .menuBtn.top, .profile .editBtn.top, .profile .float.top {
  top: var(--menu-btn-offset);
  bottom: auto;
}

.profile .menuBtn.bottom, .profile .editBtn.bottom, .profile .float.bottom {
  top: auto;
  bottom: var(--menu-btn-offset);
}

.profile .binCont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile .icon.btn {
  width: var(--menu-btn-size);
  height: var(--menu-btn-size);
}

.profile .icon.power {
  width: 2rem;
  height: 2rem;
  margin: 0;
}

.profile .menuBtn:hover, .profile .editBtn:hover {
  cursor: pointer;
}

.profile .menuBtn {
  width: var(--menu-btn-size);
  height: var(--menu-btn-size);
  background-image: url("/img/icons/menu.png");
}

.profile .editBtn {
  width: 2.25rem;
  height: 2.25rem;
  left: calc(100% + 2rem);
  top: 50%;
  transform: translateY(-50%);
  background-image: url("/img/icons/edit.png");
}

.profile .menu + .menuBtn {
  z-index: 30;
}

.icon.power {
  background-image: url("/img/icons/power.png");
}

.profile h1 > .menu {
  height: 100%;
  width: auto;
  padding: 1em 2em;
  padding-right: calc(var(--menu-btn-size) + var(--menu-btn-offset) + 2em);
}

.profile h1 > #bgImage {
  position: absolute;
  height: 100%;
  width: 25rem;
  z-index: 0;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
}

.profile h1 > #bgImage::before {
  content: '';
  position: absolute;
  background: linear-gradient(to right, transparent, var(--profile-color));
  width: 100%;
  height: 100%;
  left: 0;
}

.menu.right.menuHide {
  right: -25rem;
}

.menu.left.menuHide {
  left: -25rem;
}

.textStat {
  color: var(--color-light-silver);
}

.win {
  color: var(--color-winner-green) !important;
}

.loss {
  color: var(--color-loser-red) !important;
}

.nc, .draw {
  color: gray;
}

a.def {
  color: unset;
}

a.def:hover {
  filter: brightness(1.1);
}

.profile .bodyTitle {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-image: unset;
}

.profile .bodyTitle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle farthest-corner, rgba(0, 0, 0, 0.35), transparent);
  z-index: 5;
}

.profile .bodyTitle > * {
  z-index: 10;
}

.profile #username {
  font-variant: small-caps;
}

.profile #recStatus, .profile #recDrop {
  z-index: 15;
}

.profile .bodyTitle > #recStatus, .profile .bodyTitle > #recDrop {
  font-size: 0.55em;
}

.profile #recStatus.open, #recStatus.open ~ #recDrop > .listSel {
  color: var(--color-winner-green);
}

.profile #recStatus.closed, #recStatus.closed ~ #recDrop > .listSel {
  color: #a53b3b;
}

.profile #recStatus.closed {
  display: none;
}

#userProfile #supporterStatus {
  font-weight: bold;
  font-size: 0.8em;
  font-variant: small-caps;
  font-family: 'cinzelregular';
}

#userProfile #supporterStatus.td {
  color: var(--color-dev-red);
}

#userProfile #supporterStatus.t3 {
  color: #d2903a;
}

#userProfile #supporterStatus.t2 {
  color: #99a1ac;
}

#userProfile #supporterStatus.t1 {
  color: #9e6237;
}

.profile .regPrefCont {
  position: absolute;
  right: var(--menu-btn-offset);
  top: 1rem;
  font-size: 2rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.profile .regPrefCont > img {
  width: 1.6em;
  height: 0.8em;
  filter: brightness(0.9);
  border: 0.05rem solid black;
}

.profile #regPref, .profile #regPrefDrop {
  font-size: 0.75em;
  z-index: 1;
  padding: 0;
  color: var(--color-faded-gold);
}

.profile #regPrefDrop {
  margin-top: 0.5em;
}

.profile #regPrefDrop .dropDown {
  width: 10em;
}

.profile #changeBG {
  z-index: 25;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  font-size: 0.45em;
  background-color: rgba(16, 16, 16, 0.975);
  padding: 0.15em;
}

.profile #changeBG:hover {
  background-color: rgba(22, 22, 28, 0.975);
}

.profile #changeBG:active {
  background-color: rgba(8, 8, 8, 0.975);
}

#prefEdit {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

#prefEdit > div {
  margin: 0.25em 0.5em;
}

.profile .bodyTitle > span {
  font-family: 'cinzelregular';
  font-size: 1.15em;
  color: var(--color-faded-gold);
}

.profile .info {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 0.5em;
  margin-top: 0.5em;
}

.profile .info > div {
  border-left: 0.1rem solid black;
  width: 20em;
  padding: 0 1.25em;
  height: 8rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

#teamProfile.profile .info > div {
  width: 50%;
}

.profile .info > div:first-of-type {
  border: none;
  justify-content: flex-end;
}

.profile .info > div:last-of-type {
  justify-content: flex-start;
}

.profile .info > div:only-of-type {
  justify-content: center;
}

.profile .bodyTitle h2 {
  padding: 0;
  margin: 0;
  color: var(--color-faded-gold);
  font-size: 1.2em;
}

.profile .statText {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 0 0.75em;
}

#genStats div {
  font-variant: normal;
  margin: 0 0.5em;
}

#genStats > div:last-of-type {
  margin-right: 0;
}

#currentTeams .noTeam {
  color: var(--color-deeper-gold);
}

#rosterBox {
  margin: 0;
}

#rosterBox h2 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

#rosterBox .editing {
  left: 1em;
  font-size: 0.65em;
}

#teamRoster {
  display: inline-grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  font-size: 1em;
  overflow: hidden;
}

body:not(.editing) #teamRoster > div.player.captain:nth-of-type(3n+1) + div + div.player:not(.captain), body:not(.editing) #teamRoster > div.player.captain:nth-of-type(3n+1) + div.player:not(.captain), body:not(.editing) #teamRoster > div.player.captain:nth-of-type(3n+2) + div.player:not(.captain) {
  padding-left: 0.25em;
  padding-right: 1.75em;
}

#teamRoster > .player {
  display: grid;
  grid-template-columns: [name] 1fr [crown] auto;
  align-items: center;
  justify-items: center;
  border-right: 1px solid #bfbfbfaf;
  margin-right: -1px;
  padding: 0 0.75em;
}

body.editing #teamRoster > .player {
  grid-template-columns: [name] 1fr [crown] 1.5em [x] 1.5em;
}

body:not(.editing) #teamRoster > div.player.captain {
  padding: 0 0.25em;
}

#teamRoster > .player > .name {
  grid-column: name;
  font-variant: normal;
  color: var(--color-light-silver);
  padding: 0 0.25em;
}

#teamRoster > .player > .name.owner {
  color: var(--color-deeper-gold);
}

#teamRoster > .player > .crown {
  grid-column: crown;
  margin: 0 0.25em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/img/icons/crown.png");
}

#teamRoster > .player > .crown.edit:hover {
  opacity: 0.7;
}

#teamRoster > .player > .crown.edit:active {
  opacity: 0.6;
}

#teamRoster > .player > .crown.off {
  background-image: url("/img/icons/crownHollow.png");
  display: none;
}

#teamRoster > .player > .crown.off.edit {
  display: block;
}

#teamRoster > .player > .crown.off.edit:hover {
  background-image: url("/img/icons/crown.png");
  opacity: 0.3;
}

#teamRoster > .player > .crown.off.edit:active {
  background-image: url("/img/icons/crown.png");
  opacity: 0.2;
}

#teamRoster > .player > .x {
  grid-column: x;
  margin-right: 0.25em;
  background: unset;
}

.xBtn {
  background-image: url("/img/icons/xWhite.png");
  background-size: contain;
  border-radius: 0.1em;
}

.xBtn:hover {
  filter: brightness(1.15);
}

.xBtn:active {
  filter: brightness(0.9);
}

.xBtn.hov:hover {
  background-color: rgba(127, 127, 127, 0.1);
}

.xBtn.hov:active {
  background-color: rgba(127, 127, 127, 0.1);
}

/* #teamRoster .crown:not(.invis) {
	margin-right: 0.25em;
} */
.profile #teamLevel * {
  font-size: 1.5rem;
  color: var(--color-faded-gold);
  z-index: 30;
}

#profileMenu {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.45em;
  font-variant: normal;
  width: 25rem;
  /* background-color: rgba(44, 50, 58, 0.99); */
  background: linear-gradient(to right, rgba(44, 50, 58, 0.96), rgba(44, 50, 58, 0.96) 85%, transparent);
  z-index: 25;
}

#profileMenu *, #profileMenu a {
  color: var(--color-light-silver);
  cursor: pointer;
  font-variant: normal;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#profileMenu .edit {
  cursor: default;
}

.profile .contentBlock.plain {
  width: 100%;
  height: auto;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  margin: 0.5em 0 1.5rem 0;
}

.profile .contentBlock.panel {
  width: 40rem;
}

#profileBox > div {
  margin: 1.5rem 2.5rem 0 2.5rem;
}

#profileBox .tableContainer {
  max-height: 30rem;
  /* overflow: auto; */
}

#profileBox #matches {
  max-height: 90vh;
  width: 42rem;
}

#profileBox #matches::before {
  background-color: #242424;
}

#profileBox #matches .tableContainer {
  display: flex;
  flex-flow: row nowrap;
  max-height: 36.75rem;
  flex-shrink: 0;
  background-color: #1b1b1b;
  overflow-x: hidden;
}

#profileBox #matches .graphBox {
  display: grid;
  grid-template-areas: 'back title'
 'back graph';
  grid-template-columns: 3rem 1fr;
  justify-items: center;
  align-items: center;
  background-color: #312222;
  /* #232a31 */
  background-size: 0;
}

#profileBox #matches .graphBox .listContainer {
  width: 15em;
  font-size: 1.2em;
  border: none;
  background-color: transparent;
}

#profileBox #matches .graphBox .listContainer:hover {
  background-color: rgba(255, 255, 255, 0.075);
}

#profileBox #matches .graphBox .listContainer:active {
  background-color: rgba(255, 255, 255, 0.2);
}

#profileBox #matches .graphBox > .arrow {
  justify-self: flex-start;
}

#profileBox #matches .graphBox #hRC {
  background-color: #333646;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#profileBox #matches .graphBox > * {
  z-index: 3;
}

#profileBox #matches .graphBox > *.heatmap {
  z-index: 2;
}

#profileBox #matches .graphBox::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  background-image: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#profileBox #matches .graphBox::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, black 150%);
}

.graphBox {
  width: auto;
  height: auto;
  background-color: #2c2c2c;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}

#profileBox #graphs {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

#profileBox #graphs .graphBox {
  position: relative;
  margin-bottom: 2rem;
  padding: 0.75rem;
  padding-bottom: 1rem;
}

#profileBox .graphBox > .graph.mmr {
  /* width: 540px;
	height: 270px; */
  width: 33.75rem;
  height: 16.875rem;
}

#profileBox .graphBox > .graph.weapons {
  /* width: 540px;
	height: 270px; */
  width: 33.75rem;
  max-height: 27.5rem;
  /* height: 16.875rem; */
  overflow-y: auto;
}

#profileBox .graphBox > .graph.heatmap {
  width: 33.75rem;
  max-height: 33.75rem;
  background-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#profileBox .graph.heatmap > canvas {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}

#profileBox .graph.heatmap .chartjs-size-monitor {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: inherit;
  z-index: 1;
  visibility: visible;
  filter: blur(5px);
}

.tableContainer.sliding > * {
  left: 0;
  transition: left ease-in-out 0.2s;
  flex-shrink: 0;
  width: 100%;
}

.tableContainer.sliding.sl1 > * {
  left: -100%;
}

.arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 100%;
  font-size: 3em;
  color: #c8c8c8;
  cursor: pointer;
  background-image: linear-gradient(to right, #2d2d2d, #171717);
}

.arrow:hover {
  filter: brightness(1.15);
}

.arrow:active {
  filter: brightness(0.9);
}

.arrow.left::before {
  content: '<';
}

/* #profileBox .statGraph > canvas {
	width: 300rem;
	height: 150rem;
} */
#matchHistory {
  border: 0;
  width: 100%;
}

#matchHistory tr.match {
  height: 7rem;
}

table tr.clpsTrig, table tr.clpsTrig * {
  cursor: pointer;
}

table tr.clpsTrig:hover {
  filter: brightness(1.1);
}

table tr.clpsTrig:active {
  filter: brightness(0.925);
}

table tr.extra {
  background-color: #141414;
  border: none;
  /* 	padding-bottom: 0.75em; */
  border-bottom: 0.4em double #020202;
}

tr.extra.matchDetails td {
  width: 100%;
  height: auto;
  flex-flow: row wrap;
}

tr.extra.matchDetails > td {
  align-items: flex-start;
}

tr.extra.matchDetails div.match-info {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding: 0.3em 0.5em;
  color: var(--color-faded-gold);
}

tr.extra.matchDetails div.match-info.grd-1 {
  background: linear-gradient(to left, var(--bgColor-team-blue), var(--bgColor-team-red));
}

tr.extra.matchDetails div.match-info.grd-2 {
  background: linear-gradient(to right, var(--bgColor-team-blue), var(--bgColor-team-red));
}

tr.extra.matchDetails div.match-info div.mID {
  position: absolute;
  right: 0.5em;
}

tr.extra.matchDetails div.match-info div.reg {
  position: absolute;
  left: 0.5em;
}

tr.extra.matchDetails table {
  font-size: 0.75em;
  width: 50%;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--border-coal);
}

tr.extra.matchDetails tbody {
  overflow: hidden;
}

tr.extra.matchDetails tr.t-1 {
  background-color: var(--bgColor-team-red);
}

tr.extra.matchDetails tr.t-2 {
  background-color: var(--bgColor-team-blue);
}

/* #matchHistory tr.extra td:nth-of-type(1) tr:nth-of-type(1) {
    background-color: var(--bgColor-team-red);
}

#matchHistory tr.extra td:nth-of-type(2) tr:nth-of-type(1) {
    background-color: var(--bgColor-team-blue);
} */
tr.extra.matchDetails table.team tr > * {
  /* flex-flow: row nowrap; */
  padding: 0.2em 0.5em;
  /* 	a {
		color: inherit;
	} */
}

tr.extra.matchDetails table tr[class^="t-"]:nth-of-type(1) > .name {
  width: 85%;
}

tr.extra.matchDetails table tr:nth-of-type(1) > .score {
  background-color: var(--bgColor-dark-gray);
  background-color: #1c1c1cc5;
  border: 0.15em double black;
  border-radius: 0.2em;
  width: 15%;
  padding: 0 0.2em;
  margin: 0.2em;
}

tr.extra.matchDetails table tr:nth-of-type(2) {
  background-color: #131313;
}

tr.extra.matchDetails table tr.player {
  outline: 0.2rem double #101110;
  border: 0;
  padding: 0.2rem 0;
}

tr.extra.matchDetails table tr.player td:nth-of-type(1), tr.extra.matchDetails table tr.player th:nth-of-type(1) {
  padding: 0.2em 0.5em;
}

tr.extra.matchDetails table tr.player a {
  color: var(--color-light-silver);
}

#matchHistory tr.extra.matchDetails table tr.player > *:nth-of-type(1) {
  width: 70%;
  justify-content: flex-start;
  display: flex;
  flex-flow: row nowrap;
  /* 	> div.ov-bg {
		z-index: 2;
		position: absolute;
		width: 72.5%;
		background: linear-gradient(to right, transparent 0%, transparent 80%, #1b1b1b 100%);
		height: 100%;
		pointer-events: none;
	} */
}

#matchHistory tr.extra.matchDetails table tr.player > *:nth-of-type(1) > a {
  z-index: 1;
  max-width: 75%;
}

#matchHistory tr.extra.matchDetails table tr.player > *:nth-of-type(1) > span.mmr {
  z-index: 3;
}

#matchHistory tr.extra.matchDetails table tr.player > *:nth-of-type(2) {
  width: 10%;
}

#matchHistory tr.extra.matchDetails table tr.player > *:nth-of-type(3) {
  width: 10%;
}

#matchHistory tr.extra.matchDetails table tr.player > *:nth-of-type(4) {
  width: 10%;
}

/* #matchHistory tr.extra, #matchHistory tr.cDummy {
	padding: 1rem;
} */
tr.extra.matchDetails div, tr.extra.matchDetails + tr.cDummy div {
  word-wrap: anywhere;
}

.profile table tr.col-flow td {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}

#matchHistory tr.match td {
  padding: 1rem;
}

#matchHistory tr.match td:nth-of-type(1) {
  padding: 0;
  width: 35%;
}

#matchHistory tr.match td:nth-of-type(2) {
  width: 45%;
}

#matchHistory tr.match td:nth-of-type(3) {
  width: 20%;
}

#matchHistory .mapBG + div {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 25;
  width: 100%;
  height: 100%;
}

#matchHistory tr.match td:first-of-type div {
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--color-off-white);
  text-shadow: 1px 1px 5px black;
}

/* #matchHistory tr.extra td > div {
	display: flex;
	flex-flow: row nowrap;
}

#matchHistory tr.extra td > div {
	margin: 0.25em 0;
} */
/* #matchHistory tr.extra td > div > * {
	margin: 0 0.25em;
} */
/* #matchHistory tr.extra td:nth-of-type(1) a {
	color: var(--color-team-red);
}

#matchHistory tr.extra td:nth-of-type(2) a {
	color: var(--color-team-blue);
} */
#matchHistory tr.extra a {
  color: var(--color-light-silver);
}

#matchHistory tr.extra .linkText.hm {
  color: var(--color-light-silver);
  padding: 0.25em;
  width: 100%;
  /* 	background-color: var(--bgColor-pfp); */
  background-color: #222a33;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
  background-size: 20px;
}

#matchHistory tr.extra .linkText.hm:hover {
  filter: brightness(1.15);
}

#matchHistory tr.extra .linkText.hm:active {
  filter: brightness(0.9);
}

.depth:hover {
  filter: brightness(1.15);
}

.depth:active {
  filter: brightness(0.9);
}

#matchHistory .mapBG {
  position: absolute;
  z-index: 20;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(1px);
}

#matchHistory a.def {
  color: var(--color-off-white);
}

.profile #weaponStatsChart {
  width: 33.75rem;
  max-height: 20rem;
}

.profile #weaponStatsChart.empty, .profile #weaponStatsChart.loading {
  height: 10rem;
  border: 0.1rem solid black;
  border-radius: 0.5rem;
  background-color: #202020;
}

.profile #weaponStatsChart .listSel {
  font-variant: small-caps;
}

.graphBox .loading {
  background-color: unset;
}

.bar-chart.red .chart > div.bar {
  background-color: var(--bgColor-bar-red-t);
}

.bar-chart.red.h .details {
  background-color: var(--bgColor-bar-red);
}

.bar-chart.h {
  display: grid;
  grid-template-areas: 'icons chart'
 'scale scale';
  width: 100%;
  grid-template-columns: 2.5rem auto;
  grid-template-rows: auto 1.5rem;
  padding-right: 1rem;
  overflow-y: auto;
  background: inherit;
}

.bar-chart.h > .icons {
  grid-area: icons;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 2.5rem;
  margin: 0.225rem 0;
}

.bar-chart.h > .icons > div {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 2.5rem;
  height: 2rem;
  /* filter: brightness(0.9); */
}

.bar-chart.h > .gridlines {
  grid-area: chart;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.bar-chart.h > .gridlines td {
  border: 2px solid #2229;
}

.bar-chart.h > .gridlines td:last-child {
  display: none;
}

.bar-chart.h > .chart {
  grid-area: chart;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 2.5rem;
  margin-bottom: 1.5rem;
}

.bar-chart.h > .chart > .bar {
  background-color: var(--bgColor-bar-blue-t);
  margin: 0.2rem 0.1rem;
  padding: 0 0.33em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1em;
}

.bar-chart.h > .chart > .bar > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: '..';
  color: #a09f9fb0;
  font-family: 'cinzelregular';
  text-shadow: 0.05rem 0.05rem 0.1rem #0009;
}

.bar-chart.h .details {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  background-color: var(--bgColor-bar-blue);
  color: #e3e3e3;
  padding: 0.5em 0.75em;
  border-radius: 0.33rem;
}

.bar-chart.h .details > span {
  color: var(--color-deeper-gold);
  font-size: 1.05em;
}

.bar-chart.h .details > .stat {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row nowrap;
}

.bar-chart.h .details > .stat > div {
  width: 1em;
  height: 1em;
  margin-right: 0.33em;
}

.bar-chart.h .details > .stat > div.kw {
  background-color: #33709c;
}

.bar-chart.h .details > .stat > div.db {
  background-color: #a83631;
}

.bar-chart.h > .scale {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: inherit;
  padding-left: 2.5rem;
  padding-right: 0.5rem;
  margin-top: 0.15rem;
  border-top: 0.25rem double #202020;
  grid-area: scale;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  color: silver;
  font-size: 0.8em;
}

.bar-chart.h > .scale > div {
  width: 0;
  display: flex;
  justify-content: center;
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Final Rules =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Mobile Rules =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
@media (hover: none), (hover: on-demand) {
  body {
    font-size: 2rem;
  }
  .nameCard {
    width: 42.5%;
    margin: 3.5%;
    height: 6em;
  }
}

@media screen and (max-width: 64em) {
  .contentBlock:not(.plain) {
    width: 78vw					!important;
    height: auto				!important;
  }
  #menuBar {
    min-height: unset;
    max-height: unset;
    height: 8rem;
  }
  #menuBar .menuTitleBox {
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }
  #menuBar .menuTitle:nth-of-type(1) {
    margin-bottom: 0.3rem;
  }
  #menuBar .menuTitle:nth-of-type(2) {
    margin-top: 0.3rem;
    flex-flow: row nowrap;
  }
  #menuBar .menuTitle:nth-of-type(2) * {
    margin: 0 0.15em;
  }
  #menuBar .textButton {
    height: 2em;
    margin: 0.25rem 0.5rem;
  }
  #navBar {
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-right: auto;
  }
  #optionBar {
    width: auto;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto auto;
  }
  #searchIcon {
    grid-column: 1;
    grid-row: 2;
  }
  #pfpIcon {
    grid-row: 1;
    grid-column: 1;
  }
  #aboutBox h2 {
    width: 100%;
    border-radius: 0;
  }
  #home .panelBody {
    display: grid;
    grid-template-columns: auto;
  }
  #home #newsBox {
    grid-row: 3;
  }
  #aboutBox p {
    margin: 0.5em 10% 2em 10%;
  }
  #matchScheduleBox::before {
    border-radius: 0.5rem;
  }
  #filterBox::before {
    border-radius: 0.5rem;
  }
  #filterBox {
    border-left: none;
  }
}

/*/
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 * =-=-=-=-==-=-=-=-=-=-=-=-= Final Rules =-=-=-=-==-=-=-=-=-=-=-=-=
 * =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
/*/
.hidden {
  display: none			!important;
  visibility: hidden;
  opacity: 0;
}

.invis {
  visibility: hidden;
}

.fade {
  opacity: 0				!important;
}

.off {
  opacity: 0.5;
}

.disabled {
  opacity: 0.5;
  /* filter: saturate(0.5)					!important; */
}

.sneaky {
  position: absolute;
  z-index: -1000;
  opacity: 0;
}

.link {
  cursor: pointer								!important;
}

.disabled:hover {
  opacity: 0.5;
  /* filter: saturate(0.5)					!important; */
}

.disabled:active {
  opacity: 0.5;
  /* filter: saturate(0.5)					!important; */
}

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

.emChecker {
  height: 0;
  width: 0;
  position: fixed									!important;
  left: -1000%									!important;
  outline: none									!important;
  border: none									!important;
  padding: 0										!important;
  margin: 0										!important;
  box-sizing: content-box							!important;
  opacity: 0										!important;
}

#preloader {
  position: absolute								!important;
  left: 200vw										!important;
  top: 200vh										!important;
}

#preloader img {
  display: block								!important;
}
/*# sourceMappingURL=style.css.map */