/* fonts */

/* general style declarations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.parent {
  height: 100%;
  background: url("https://static.esea.net/global/images/background.jpg")
    no-repeat fixed 50% 0px / cover #f2f3f7;
}

body.parent {
  height: 100%;
  text-align: center;
  margin: 0;
}

img {
  border: 0;
}

form {
  margin: 0;
  padding: 0;
  display: block;
}

small {
  font-weight: normal;
  font-size: 8px;
  color: #000000;
}

.dark small {
  color: #fafbfa;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  line-height: 1em;
}

body,
td,
th,
select,
button,
input,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span,
label {
  font-family: var(--font-family-main);
  font-size: 12px;
  font-weight: 400;
  color: #000000;
}

.dark body,
.dark td,
.dark th,
.dark select,
.dark button,
.dark input,
.dark textarea,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark div,
.dark span,
.dark label {
  color: #fafbfa;
}

.modal td,
.modal th,
.modal select,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6,
.modal div,
.modal span,
.modal label {
  color: #000;
}

.dark select,
.dark button,
.dark input,
.dark textarea {
  background-color: #333433;
  border: 1px solid #555655;
}

input:focus,
textarea:focus {
  outline: none;
}

.dark input:focus,
.dark textarea:focus {
  border: 1px solid #999999;
  outline: none;
}

.dark button,
.dark input[type="submit"] {
  background-color: #222;
  cursor: pointer;
  font-weight: bold;
}

blockquote {
  color: #7a7a7a;
}

acronym,
acronym a,
acronym a:hover {
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  cursor: help;
  border-bottom: 1px dotted #000000;
}

.dark acronym,
.dark acronym a,
.dark acronym a:hover {
  color: #fafbfa;
}

thead th,
thead td,
.sub-header {
  background-color: #fafafa;
  padding: 3px 3px 3px 3px;
  border-bottom: 1px solid #eaeaea;
}

.dark thead th,
.dark thead td,
.dark .sub-header {
  background-color: #222;
  border-bottom: none;
}

thead select.blend,
.sub-header select.blend {
  margin: 1px;
  background-color: #fafafa;
  border-width: 0;
  font-weight: bold;
}

thead select.blend:focus,
.sub-header select.blend:focus {
  margin: 0;
  background-color: #ffffff;
  border-width: 1px;
  font-weight: normal;
}

.footer {
  border-bottom: 1px solid #eaeaea;
}

.actions {
  height: 18px;
  margin: 5px 0 0 0;
  padding: 0;
}

.country-flag {
  width: 18px;
  height: 12px;
  vertical-align: middle;
}

img.game-icon {
  width: 16px;
  height: 13px;
  float: left;
  margin: 0 4px 0 0;
}

ul,
ol {
  padding: 5px 0 5px 10px;
  margin: 0 0 0 10px;
}

/* links */
a {
  color: #517099;
  text-decoration: none;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: transparent;
  transition: text-decoration 200ms;
  font-weight: bold;
}

.dark a {
  color: #619dff;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

a.new {
  color: #00ac17;
}

a.black {
  color: #000000;
  text-decoration: none;
}

.dark a.black {
  color: #fafbfa;
}

.karma {
  text-decoration: none;
}

.karma.plus {
  color: #3366ff;
}

.karma.minus {
  color: #ff0000;
  font-weight: bold;
}

/* video */
.video-container-normal {
  position: relative;
}

.video-container-expanded {
  position: absolute;
  z-index: 201;
  top: 202px;
  left: 50%;
  margin: 0 0 0 -493px;
  width: 985px;
}

.video-container-normal video,
.video-container-expanded video {
  width: 100%;
}

.video-container-normal img.video-expand,
.video-container-expanded img.video-expand {
  position: absolute;
  display: none;
}

/* page layout */
#layout-header {
  min-width: 1045px;
  height: 80px;
  text-align: left;
  background-color: #212121;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

#layout-header > div {
  width: 1033px;
  padding: 0 6px 0 6px;
  margin: 0 auto 0 auto;
}

div#layout-header a.home img {
  margin: 11px 0 0 0;
}

div#layout-header input[type="text"] {
  float: right;
  width: 189px;
  height: 30px;
  margin: 24px 0 0 0;
  padding: 0 0 0 6px;
  vertical-align: middle;
  background-color: #fefefe;
  border: 1px solid #ffffff;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  font-weight: normal;
  font-size: 13px;
  font-family: var(--font-family-main);
  color: #111111;
}

div#layout-header input[type="text"]:hover {
  color: #000000;
}

div#layout-header input[type="text"]:focus {
  outline: none;
}

::-webkit-input-placeholder {
  font-weight: normal;
  font-size: 14px;
  font-family: var(--font-family-main);
  color: #111111;
}

.dark ::-webkit-input-placeholder {
  color: #f4f4f4;
}

textarea::placeholder {
  font-weight: normal;
  font-size: 10px;
  font-family: var(--font-family-main);
  color: var(--color-gray);
}

.dark textarea::placeholder {
  color: #f4f4f4;
}

div#layout-header input[type="image"] {
  float: right;
  width: 32px;
  height: 32px;
  margin: 24px 0 0 0;
}

div#popup div.content {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 201;
  width: 450px;
  background-color: #ffffff;
  padding: 25px;
  text-align: left;
  margin: -250px 0 0 -200px;
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
}

div#popup li {
  list-style-position: inside;
  list-style-image: url("/global/images/icon_sortable.png");
  border: 1px solid #dddddd;
  padding: 5px 8px 5px 8px;
  margin: 0 0 2px 0;
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
}

div#popup li input,
div#popup li img {
  vertical-align: text-bottom;
  margin: 0 0 0 0;
}

#layout-status {
  display: flex;
  justify-content: center;
  background-color: #3eb047;
  padding: 4px 0;
  margin: 0;
  clear: both;
  overflow: auto;
  text-align: left;
  min-width: 1045px;
}

.layout-status--container {
  display: flex;
  width: 1033px;
  align-items: center;
}

#layout-status.hidden {
  display: none;
}

.layout-status--data {
  flex-grow: 1;
}

#layout-status[data-impact="scheduled"] {
  background-color: #0074d9;
}

#layout-status[data-impact="minor"],
#layout-status[data-impact="in_progress"] {
  background-color: #cca900;
}

#layout-status[data-impact="major"] {
  background-color: #ff851b;
}

#layout-status[data-impact="critical"] {
  background-color: #ff4136;
}

#layout-status div,
#layout-status span,
#layout-status a {
  color: #ffffff;
  font-weight: normal;
  font-size: 14px;
  font-family: var(--font-family-main);
}

#layout-status .details,
#layout-status .last-updated-time {
  font-size: 12px;
}

#layout-ticker {
  box-sizing: border-box;
  background: transparent;
  display: flex;
  padding: 16px;
  margin: 0;
  justify-content: space-between;
  width: 1240px;
  margin: 0 auto;
  text-align: left;
  align-items: center;
  color: #fafbfa;
  text-shadow: 1px 1px 4px #000;
}

#layout-ticker a {
  color: #fafbfa;
}

#layout-ticker * {
  font-size: 14px;
  color: #fafbfa;
}

#layout-ticker .ticker {
  flex-grow: 1;
}

#layout-ticker b,
#layout-ticker #clock {
  font-weight: 600;
}

#layout-ticker img.country-flag {
  vertical-align: -2px;
  margin-right: 3px;
}

#layout-ticker div a:last-of-type img {
  margin-right: 5px;
}

div#layout-container {
  width: 1045px;
  margin: 0 auto 0 auto;
  background-position: 0 181px;
  background-repeat: repeat-y;
  text-align: left;
  clear: none;
}

#layout-region-selector {
  margin: 0 0 0 0;
  padding: 0;
  height: auto;
}

#layout-region-selector img {
  margin: 0 8px 0 0;
}

#layout-region-selector a span.right {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

#layout-region-selector a.open {
  background: transparent;
}

#layout-region-selector a.open span.right {
  transform: rotate(-90deg);
}

#layout-region-selector div {
  position: absolute;
  width: 203px;
  margin: 0 0 0 0;
  background-color: #212121;
  z-index: 100;
}

#layout-region-selector a {
  display: block;
  height: 27px;
  padding: 10px 10px 0 10px;
  text-decoration: none;
  color: #c8c8c8;
  font-weight: normal;
  font-size: 14px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  -webkit-font-smoothing: antialiased;
}

#layout-region-selector a:last-of-type {
  margin-bottom: 0;
}

#layout-region-selector a:hover {
  background-color: #1e1e1e;
  color: #ffffff;
}

#layout-region-selector a:hover img {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

#layout-navigation {
  width: 203px;
  padding: 0 0 0 0;
  margin: 0 0 10px 0;
}

#layout-navigation a.menu-main {
  display: block;
  height: 25px;
  padding: 5px 0 0 10px;
  margin: 0 0 0 0;
  background-color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  font-family: var(--font-family-main);
  color: #575757;
}

.dark #layout-navigation a.menu-main {
  background-color: #333433;
  color: #fafbfa;
}

.dark #layout-navigation a.menu-main.active {
  color: #ffffff;
}

#layout-navigation a.menu-main:last-of-type:not(.active) {
  margin: 0;
}

#layout-navigation div.menu-sub {
  background-color: #f5f5f5;
}

.dark #layout-navigation div.menu-sub {
  background-color: #444;
}

#layout-navigation div.menu-sub a {
  display: block;
  padding: 3px 0 4px 15px;
  font-size: 13px;
  font-family: var(--font-family-main);
  color: #323232;
  font-weight: 500;
}

.dark #layout-navigation div.menu-sub a {
  color: #cccdcc;
}

#layout-navigation div.menu-sub a.active {
  text-decoration: none;
}

#layout-navigation div.menu-sub a.active,
#layout-navigation div.menu-sub a:hover {
  color: #000000;
  background-color: #eaeaea;
}

.dark #layout-navigation div.menu-sub a.active,
.dark #layout-navigation div.menu-sub a:hover {
  color: #cccdcc;
  background-color: #444;
}

div#layout-column-left {
  float: left;
  width: 203px;
  padding: 0 6px 10px 6px;
  margin: 0 10px 0 0;
}

div#layout-container.layout-standard div#layout-column-center {
  float: left;
  width: 583px;
  padding: 0 6px 0 6px;
}

div#layout-container.layout-home div#layout-column-center {
  float: left;
  width: 442px;
  padding: 0 6px 0 6px;
}

div#layout-container.layout-stats div#layout-column-center {
  float: left;
  width: 967px;
  padding: 0 0 0 6px;
}

div#layout-column-right > div {
  display: none;
}

div#layout-container.layout-standard div#layout-column-right {
  float: left;
  width: 203px;
  padding: 0 6px 10px 6px;
  margin: 0 0 0 10px;
  overflow: hidden;
}

div#layout-container.layout-standard
  div#layout-column-right
  div.layout-standard {
  display: block;
}

div#layout-container.layout-home div#layout-column-right {
  float: left;
  width: 344px;
  padding: 0 6px 10px 6px;
  margin: 0 0 0 10px;
  text-align: center;
}

div#layout-container.layout-home div#layout-column-right div.layout-home {
  display: block;
}

div#layout-container.layout-stats div#layout-column-right {
  display: none;
}

div#layout-footer-container {
  margin: 10px 0 0 0;
  padding: 0;
  background-color: #212121;
  min-width: 1045px;
}

div#layout-footer-content {
  width: 1007px;
  text-align: left;
  padding: 0 19px 0 19px;
  margin: 0 auto 0 auto;
}

div#layout-footer-container img {
  float: left;
  width: 46px;
  height: 52px;
  margin: 14px 19px -10px 0;
}

div#layout-footer-container span {
  margin: 22px 0;
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
  color: #cfcfcf;
}

div#layout-footer-container a {
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
  color: #f5f5f5;
}

div#layout-footer-container a:hover {
  text-decoration: underline;
}

div#layout-footer-container span.right {
  width: 470px;
}

/* modules */
div.module {
  width: 100%;
  padding: 0;
  margin: 0 0 12px 0;
  background-color: #ffffff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  text-align: left;
}

.dark div.module {
  background-color: #333433;
}

div.module header {
  height: 27px;
  margin: 0 0 0 0;
  padding: 10px 10px 0 10px;
  background-color: #212121;
  border: 0;
  text-align: left;
}

div.module header,
div.module header span,
div.module header div {
  font-weight: normal;
  font-size: 14px;
  color: #cfcfcf;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  -webkit-font-smoothing: antialiased;
}

div.module header span.right select {
  margin-top: -6px;
  font-weight: bold;
  font-size: 11px;
  font-family: var(--font-family-main);
  color: #000000;
  text-shadow: none;
}

div.module section {
  padding: 10px;
}

div.module hr {
  height: 1px;
  border: 0;
  margin: 0;
  padding: 0;
  background-color: #e0e0e0;
}

.dark div.module hr {
  background-color: #555655;
}

div.module .actions {
  margin: 7px 0 -6px 0;
  padding-left: 0;
}

div.module > iframe,
div.module > object {
  margin-bottom: -2px;
}

div#module-ads-skyscraper {
  text-align: center;
}

div#module-ads-support {
  text-align: center;
}

div#module-events div.sub-header {
  margin: 7px 0 1px 0;
}

div#module-events ul {
  padding: 0;
  margin: 0;
}

div#module-events li {
  list-style-type: none;
  border-bottom: 1px solid #ececec;
  padding: 3px 0 4px 0;
}

div#module-events li:last-child,
div#module-events li:last-child:hover {
  border: 0;
}

div#module-events li span.left {
  display: block;
  width: 82%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
  float: none;
}

div#module-events li span.right {
  font-weight: normal;
  font-size: 10px;
  font-family: var(--font-family-main);
  padding-left: 0;
}

div#module-events li img {
  width: 16px;
  height: 13px;
  float: left;
  margin: 0 5px 0 0;
}

div#module-events table.calendar {
  width: 185px;
  margin: -1px 0 9px -1px;
}

div#module-events table.calendar tr.month {
  display: none;
}

.layout-home div#module-events table.calendar {
  width: 326px;
}

.layout-home div#module-events table.calendar th {
  width: 14%;
  height: 24px;
  font-weight: bold;
  font-size: 11px;
  font-family: var(--font-family-main);
}

.layout-home div#module-events table.calendar * td {
  height: 21px;
  font-size: 11px;
}

div#module-promotions {
  text-align: center;
}

div#module-poll input.submit {
  background-color: #000000;
  border: 1px solid #000000;
  color: #ffffff;
  font-weight: bold;
}

div#module-poll div.left {
  width: 83%;
}

div#module-premium-checklist .checklist {
  background-color: #fffee8;
  text-align: center;
}

div#module-premium-checklist div a {
  color: #333333;
}

div#module-premium-checklist h1 {
  min-height: 50px;
  margin: 0 0 18px 0;
  padding: 5px 0 0 55px;
  background-image: url("/images/premium_checklist_unchecked.png");
  background-repeat: no-repeat;
  text-align: left;
  font-weight: normal;
}

div#module-premium-checklist h1:last-of-type {
  margin-bottom: 6px;
}

div#module-premium-checklist h1.checked {
  background-image: url("/images/premium_checklist_checked.png");
}

div#module-premium-checklist h1 .action {
  display: block;
  margin: 0 0 3px 0;
  font-weight: bold;
  font-size: 14px;
  font-family: var(--font-family-main);
  color: #000000;
}

.layout-standard div#module-premium-checklist h1 {
  min-height: 25px;
  background-size: 25px;
  margin: 0 0 13px 0;
  padding: 3px 0 0 30px;
}

.layout-standard div#module-premium-checklist h1 a {
  font-size: 13px;
}

.layout-standard div#module-premium-checklist .action-description {
  display: none;
}

div#module-league h1 span.left {
  width: 54%;
  overflow: hidden;
}

div.server-container:not(:first-child) {
  margin-top: 2px;
}

div.server-container h1,
div.server-container h2 {
  border-width: 1px;
  border-style: solid;
  padding: 4px;
  margin: 4px;
  cursor: pointer;
  height: 12px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  font-weight: normal;
}

div.server-container div {
  display: none;
  overflow: hidden;
  white-space: nowrap;
  width: 190px;
  padding: 10px;
  position: absolute;
  margin: -15px 0 0 -207px;
  border-width: 1px;
  border-style: solid;
  z-index: 1;
}

div.server-container:hover div {
  display: block;
}

.open,
.live {
  background-color: #f3fff2;
  border-color: #cbdec9;
}

.dark .open,
.dark .live {
  background-color: #444;
  border-color: #555655;
  color: #fafbfa;
}

.full {
  background-color: #fef7f7;
  border-color: #ebd1d1;
}

.upcoming {
  background-color: #eff6fc;
  border-color: #c0ccd7;
}

.dark .upcoming {
  background-color: #444;
  border-color: #555655;
  color: #fafbfa;
}

.completed {
  background-color: #fdfae9;
  border-color: #e3e2cd;
}

.dark .completed {
  background-color: #444;
  border-color: #555655;
  color: #fafbfa;
}

div#module-recent-discussion.fixed {
  position: fixed;
  top: 32px;
  width: 203px;
  padding-top: 10px;
  z-index: 1;
}

div#module-recent-discussion .recent-items a {
  font-weight: normal;
  color: rgb(153, 153, 153);
  font-size: 14px;
}

div#module-recent-discussion .recent-items a.new {
  color: #517099;
  font-weight: 500;
}

.dark div#module-recent-discussion .recent-items a.new {
  color: #619dff;
}

div#module-recent-discussion .recent-items a {
  text-transform: lowercase;
}

div.summary {
  display: none;
  position: absolute;
  width: 171px;
  background-color: #ffffe1;
  border: 1px solid #000000;
  padding: 5px;
  color: #000000;
  overflow: visible;
  white-space: normal;
}

div.filter {
  display: none;
  position: absolute;
  margin: -153px 0 0 34px;
  border: 1px solid #000000;
  width: 113px;
  height: 125px;
  padding: 2px 4px 2px 4px;
  border: 1px solid #000000;
  border-color: #b2b2b2 #000000 #000000 #b2b2b2;
  background-color: #ffffff;
  z-index: 1;
}

div.filter .left {
  width: 80%;
  height: 20px;
}

div.filter .right {
  width: 15%;
  height: 20px;
}

div#module-recent-downloads a.tab {
  padding: 3px 3px 0 3px;
  margin: 0 5px 0 0;
}

div#module-headlines .tab {
  padding: 3px 8px 0 8px;
  margin: 0 6px 0 0;
}

div#module-headlines .tabContent {
  border-bottom: 0;
  margin-bottom: 0;
}

div#module-headlines .actions {
  text-align: right;
}

div#module-headlines h1 {
  border-bottom: 1px solid #ececec;
  padding: 10px 10px 10px 10px;
  cursor: pointer;
  font-weight: normal;
  font-size: 10px;
  font-family: var(--font-family-main);
  color: #c8c8c8;
}

div#module-headlines h1:hover {
  background-color: #fdfdfd;
}

div#module-headlines h2 {
  border-bottom: 1px solid #ececec;
  padding: 6px 10px 6px 10px;
  cursor: pointer;
}

div#module-headlines h1 canvas.content-preview {
  float: left;
  margin: 0 9px 0 0;
}

div#module-headlines h1 img.game-icon {
  margin: 1px 4px 0 0;
}

div#module-headlines h2 img {
  float: left;
  width: 16px;
  height: 13px;
  margin: 1px 7px 0 0;
}

div#module-headlines h1 a.headline {
  display: block;
  color: #323232;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--font-family-main);
  text-decoration: none;
  margin: 0 0 4px 0;
}

div#module-headlines h1 a.type {
  color: #14be00;
  font-weight: bold;
  font-size: 10px;
  font-family: var(--font-family-main);
  text-decoration: none;
}

div#module-headlines h2 a.headline {
  color: #323232;
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
  text-decoration: none;
}

div#module-headlines h1 div.comments {
  min-width: 32px;
  height: 27px;
  float: right;
  text-align: center;
  padding: 5px 0 0 0;
  background-image: url("/images/comments_large_off.png");
  background-repeat: no-repeat;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--font-family-main);
  color: #646464;
}

div#module-headlines h1:hover div.comments {
  background-image: url("/images/comments_large_on.png");
  color: #148c00;
}

div#module-headlines h2 div.comments {
  height: 15px;
  float: right;
  text-align: right;
  padding: 0 21px 0 0;
  background-image: url("/images/comments_small_off.png");
  background-repeat: no-repeat;
  background-position: 100% 2px;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--font-family-main);
  color: #969696;
}

div#module-headlines h2:hover div.comments {
  background-image: url("/images/comments_small_on.png");
  color: #148c00;
}

div#module-headlines h1 div.preview {
  font-weight: normal;
  margin: 11px 0 0 0;
  font-weight: normal;
  font-size: 11px;
  font-family: var(--font-family-main);
  color: #323232;
}

#module-stats div.stats-container {
  width: 206px;
  margin: 0 0 20px 0;
  text-align: left;
}

#module-stats .actions {
  text-align: right;
}

div#module-your-activity ul {
  padding: 0;
  margin: 0;
}

div#module-your-activity li {
  list-style-type: none;
  border-bottom: 1px solid #ececec;
  padding: 3px 0 4px 0;
}

div#module-your-activity li:last-child,
div#module-your-activity li:last-child:hover {
  border: 0;
}

div#module-your-activity li:hover {
  background-color: #fafff9;
  border-bottom: 1px solid #d3e8d0;
}

div#module-your-activity li img {
  width: 16px;
  height: 13px;
  float: left;
  margin: 0 5px 0 0;
}

div#module-ads-home-bottom {
  text-align: center;
}

/* content item declarations */
.content-details {
  padding: 10px 10px 10px 10px;
  background-color: #fafafa;
  border: 1px solid #f1f1f1;
  border-width: 1px 0 1px 0;
}

.content-details h1 {
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
  font-weight: bold;
  margin: 0 0 4px 0;
}

.content-text {
  text-align: justify;
  background-color: #ffffff;
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
}

.dark .content-text {
  background-color: #333433;
}

.content-text li {
  padding-bottom: 5px;
}

.content-footer {
  padding: 2px 10px 10px 10px;
  background-color: #fafafa;
  border: 1px solid #f1f1f1;
  border-width: 1px 0 1px 0;
}

/* bbcode style */
div.bbcode-image {
  background-color: #ffffff;
  width: 144px;
  text-align: center;
  margin: 10px;
  clear: both;
}

div.bbcode-match {
  text-align: center;
  margin: 0 0 10px 0;
}

div.bbcode-match div.team,
div.bbcode-team {
  text-align: center;
  margin: 0 0 10px 0;
}

div.bbcode-match img,
div.bbcode-team img {
  max-width: 65px;
  margin: 0 0 7px 0;
}

div.bbcode-match h1 {
  padding: 25px 0 8px 0;
  font-size: 12px;
}

div.bbcode-match div.prediction-content {
  text-align: left;
  margin: 12px 0 0 0;
}

div.bbcode-match h2 {
  margin: 0 0 5px 0;
}

/* tab style */
.tab {
  display: block;
  float: left;
  height: 16px;
  padding: 3px 5px 0 5px;
  margin: 0 6px 0 0;
  text-decoration: none;
  color: #969696;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--font-family-main);
}

.tab:hover,
.tab.hover,
.tab.activeTab {
  color: #148200;
}

/* comments */
.comment-parent-actions {
  padding: 0 0 7px 0;
  line-height: 18px;
}

.comment-container {
  width: 706px;
  background-color: #ffffff;
}

.comment-container .sub-header {
  padding: 2px 3px 3px 0;
}

.comment-container .comment-number {
  display: block;
  float: left;
  width: 50px;
  margin-right: 11px;
}

.comment-container .comment-controls {
  float: left;
  width: 50px;
  padding: 3px 0 15px 0;
  border: 0px solid red;
}

.comment-container .comment-content {
  overflow: hidden;
  float: right;
  padding: 3px 0 20px 0;
  width: 645px;
  text-align: left;
}

.comment-content-switch {
  color: #8a8a8a;
  cursor: pointer;
}

.comment-content textarea {
  width: 95%;
  height: 100px;
}

.comment-page-marker {
  border: 1px dashed gray;
  width: 689px;
  margin: 10px 0 10px 0;
  padding: 7px;
  text-align: center;
  cursor: pointer;
}

a.media-preview div {
  display: none;
  background-color: #ffffff;
  position: absolute;
  z-index: 3;
  padding: 10px;
  border: 1px solid #dedede;
}

a.media-preview div * {
  max-width: 200px;
  max-height: 275px;
}

.comment-nuked {
  color: #ff0000;
}

/* demos */
#featured-demo div.note2 {
  float: right;
  width: 220px;
}

#featured-demo div.note2 b {
  display: block;
  margin-bottom: 5px;
}

#demo-details div.left {
  width: 345px;
}

#demo-details div.left .data {
  width: 260px;
}

#demo-details div.right {
  width: 170px;
  text-align: center;
}

div.clip-preview {
  float: left;
  padding: 5px 0 0 0;
  text-align: center;
  margin: 10px 0 0 13px;
}

div.clip-preview img {
  width: 120px;
  border: 1px solid #999999;
}

div.clip-preview div {
  position: relative;
  top: -14px;
  height: 13px;
  width: 118px;
  padding: 1px 1px 0 1px;
  white-space: nowrap;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #999999;
  border-top: 0;
}

#featured-download .right {
  width: 60%;
  text-align: left;
}

#upload-progress {
  padding: 2px;
  width: 376px;
  border: 1px inset #555555;
  height: 14px;
}

#upload-progress .progress-bar {
  height: 100%;
  background-color: #44d033;
  width: 0;
}

/* forums */
#forums-default .forum-details {
  padding-left: 28px;
}

#forums-default table tbody tr:last-child td {
  border-bottom: none;
  padding-bottom: 8px;
}

#forums-new-topic input.path {
  width: 181px;
  height: 100px;
  margin: 0 6px 0 0;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-family-main);
}

#forums-new-topic input.path:last-of-type {
  margin: 0;
}

/* recruitment */
#recruitment-default input.path {
  width: 181px;
  height: 100px;
  margin: 0 6px 0 0;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-family-main);
}

#recruitment-default input.path.off {
  opacity: 0.5;
}

#recruitment-default input.path:hover {
  opacity: 1;
}

#recruitment-default input.path:last-of-type {
  margin: 0;
}

#recruitment-filter select {
  font-size: 16px;
}

#recruitment-filter select.focus {
  font-weight: bold;
  background-color: #3eb047;
  color: #ffffff;
}

#recruitment-manage-ad label {
  width: 140px;
}

#recruitment-manage-ad div.data {
  margin-left: 140px;
}

/* support */
#support-faq .search {
  background-color: #fafafa;
  border: 1px solid #f0f1f3;
  border-width: 1px 0 1px 0;
  padding: 26px 10px 26px 10px;
}

#support-faq input.text {
  width: 471px;
  height: 24px;
  padding: 2px 0 2px 0;
  margin: 0;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-family-main);
}

#support-faq input.submit {
  float: right;
  height: 30px;
  width: 64px;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-family-main);
}

#support-faq div.left {
  margin: 6px 10px 0 5px;
  width: 165px;
  line-height: 1.6em;
}

#support-faq div.left li {
  list-style-type: circle;
  list-style-position: inside;
}

#support-faq div.left a {
  font-weight: bold;
  font-size: 10px;
}

#support-faq h1 {
  background-color: #ebeff2;
  margin: 18px 0 2px 0;
  padding: 6px 2px 6px 2px;
  border: 1px solid #95b3d7;
  border-width: 1px 0 1px 0;
}

#support-faq h1:first-of-type {
  margin-top: 0;
}

#support-faq h1 span {
  float: right;
  font-weight: normal;
}

#support-faq div.question {
  padding: 10px 4px 10px 2px;
  border-bottom: 1px solid #f0f1f3;
}

#support-faq .row2 {
  background-color: #f8f8f8;
}

#support-faq div.question img {
  margin: 2px 0 0 0;
  float: left;
  clear: left;
}

#support-faq div.question span {
  float: right;
  clear: right;
  width: 50px;
  text-align: right;
}

#support-faq div.question a.section {
  float: right;
  width: 110px;
  text-align: right;
}

#support-faq div.question a.question {
  margin: 0 146px 0 15px;
  display: block;
  color: #000000;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
}

#support-faq div.answer {
  padding: 8px 5px 0 5px;
  line-height: 1.4em;
  font-size: 12px;
}

#support-faq div.answer li {
  list-style-position: inside;
}

#support-tickets-default input.submit {
  height: 30px;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-family-main);
}

#support-tickets-open label {
  width: 130px;
}

#support-tickets-open div.data {
  margin-left: 130px;
}

#support-tickets-open #st-filter {
  position: absolute;
  top: 330px;
  margin: 0 0 0 40px;
  width: 415px;
  border: 1px solid #000000;
  padding: 15px;
  background-color: #ffffff;
  font-size: 11px;
  z-index: 201;
}

#support-tickets-open #st-filter li {
  margin-bottom: 10px;
}

#support-tickets-view label {
  width: 120px;
}

#support-tickets-view div.data {
  margin-left: 120px;
}

#support-suspects input.trigger {
  display: block;
  padding: 3px;
  margin: 10px auto 0 auto;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-family-main);
}

/* poll */
#poll-comments div.footer {
  border-top: 1px solid #f0f1f3;
  padding: 10px 0 10px 0;
}

body.poll-popup {
  margin: 0;
}

#region-results {
  width: 180px;
  background-color: #ffffff;
  border: 1px solid #000000;
  position: absolute;
  display: none;
  padding: 5px;
}

#region-results .graph {
  height: 10px;
  border: 1px solid #000000;
  background-color: #ff0000;
  float: left;
}

#region-results .votes {
  font-size: 8px;
  margin-left: 5px;
  color: #444444;
  float: left;
}

#region-results .text {
  font-size: 10px;
  padding: 2px 0 10px 0;
}

#region-results .title {
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 10px;
}

/* subscribe */
#subscribe-default .path {
  width: calc(100% - 20px - 2px);
  margin: 0 0 6px 0;
  padding: 20px 0 20px 20px;
  border: 1px solid #eaeaea;
  background-color: #fbfbfb;
  text-align: left;
  font-weight: normal;
  font-size: 18px;
  font-family: var(--font-family-main);
  text-decoration: none;
}

#subscribe-default .path:last-of-type {
  margin: 0;
}

#subscribe-default .path input {
  float: right;
  margin: 8px 6px 0 0;
  font-weight: bold;
  font-size: 18px;
  font-family: var(--font-family-main);
}

#subscribe-select-tier table {
  width: 100%;
  border-spacing: 0;
}

#subscribe-select-tier table th.tier {
  width: 100px;
  text-align: center;
}

#subscribe-select-tier table td,
#subscribe-select-tier table th {
  height: 30px;
}

#subscribe-select-tier table td {
  text-align: center;
}

#subscribe-select-tier table td img {
  max-width: 20px;
}

#subscribe-select-tier table td input[type="radio"] {
  vertical-align: middle;
  margin: 1px 2px 0 0;
}

#subscribe-select-tier table span {
  display: block;
  padding: 4px 0 0 0;
  font-weight: normal;
}

#subscribe-select-tier table label {
  width: auto;
}

#subscribe-select-tier table td select,
#subscribe-select-tier table td input[type="text"] {
  width: 90%;
}

#subscribe-select-tier table td div.option {
  float: right;
  margin: 0 0 10px 0;
  text-align: left;
  width: 95%;
}

#subscribe-redeem-code label {
  width: 120px;
}

#subscribe-redeem-code div.data {
  margin-left: 120px;
}

/* servers */
#servers-admin-application label {
  width: 140px;
}

#servers-players table {
  width: 100%;
}

#servers-players th.acronym {
  text-align: right;
}

#servers-players td.stat {
  text-align: right;
}

#servers-players td {
  vertical-align: top;
}

#servers-ghosts div {
  margin: 0 0 10px 0;
  padding: 0 5px 5px 5px;
  border: 1px solid #b8b8b8;
}

#servers-ghosts h1.sub-header {
  margin: 0 -5px 5px -5px;
  border: 1px solid #b8b8b8;
  border-width: 0 0 1px 0;
}

/* stats */
#stats-match-view span {
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
  padding: 0 10px 10px 10px;
  display: block;
}

#stats-match-view .match-details {
  float: right;
  width: 165px;
  text-align: center;
}

#stats-match-view .match-details table {
  margin: 10px 0 0 0;
  text-align: left;
  width: 100%;
}

.match-header {
  background-color: #fafafa;
}

.dark .match-header {
  background-color: #444;
}

.match-roster {
  width: 162px;
  margin: 0 0 10px 0;
}

.match-preview {
  float: left;
  width: 239px;
  margin: 0 0 10px 0;
  text-align: center;
}

#stats-match-view h2 {
  margin: 6px 0 2px 0;
  padding: 0 0 2px 0;
  font-weight: normal;
  border-bottom: 1px dotted #bbbbbb;
}

.match-header div {
  width: 267px;
}

.match-header h1 {
  font-size: 20px;
  margin: 10px 0 10px 0;
}

.match-map {
  width: 120px;
  height: 90px;
  padding: 3px;
  background-color: #ebeff2;
  border: 1px solid #b8b8b8;
  margin: auto;
}

#stats-match-view .actions {
  margin: 15px 0 10px 0;
}

#stats-match-view .box {
  border: 0;
}

img.stats-game {
  opacity: 0.7;
  padding: 1px;
}

img.stats-game-selected,
img.stats-game:hover {
  opacity: 1;
  padding: 1px;
  background-color: #000000;
}

#stats-leaders {
  padding: 5px 0 0 0;
}

.stats-container h1 {
  font-size: 20px;
}

.stats-cat-leader {
  width: 59px;
  height: 77px;
}

.stats-container div.center {
  height: 60px;
  padding-top: 3px;
  margin-bottom: 5px;
}

.stats-container h2 {
  display: block;
  float: left;
  clear: both;
  margin: 10px 0 0 0;
  font-weight: bold;
  color: #00af00;
}

.stats-container {
  display: inline;
  width: 175px;
  height: 210px;
  margin: 0 5px 30px 5px;
}

.stats-container .stat {
  float: right;
  margin-left: 8px;
}

.stats-container div.sub-header {
  margin-left: 66px;
  font-weight: bold;
  text-align: center;
}

.stats-container .row1 {
  padding: 0 0 2px 0;
  margin: 0;
}

.stats-container .map {
  width: 120px;
  height: 90px;
}

#demo-details .demos-map {
  width: 120px;
  height: 90px;
  margin: 0 auto;
}

#stats-leaders-map div.stats-container,
#stats-leaders-weapon div.stats-container,
#stats-leaders-class div.stats-container {
  float: left;
  display: inline;
  width: 265px;
  height: auto;
  min-height: 300px;
  margin: 0 5px 30px 5px;
}

#stats-leaders-map div.stats-container div.sub-header,
#stats-leaders-weapon div.stats-container div.sub-header,
#stats-leaders-class div.stats-container div.sub-header {
  margin-left: 115px;
}

/* teams */
#teams-manage #profile-header h1 {
  margin-left: 0;
}

#teams-manage table {
  width: 100%;
}

#teams-manage label {
  width: 120px;
}

#teams-manage .tabContent {
  text-align: justify;
  font-weight: normal;
  font-size: 12px;
  font-family: var(--font-family-main);
}

#body-manage-roster .row1 {
  width: 320px;
}

/* league */
#league-register-payments table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;
  margin: -12px 0 -12px 0;
}

#league-register-payments th {
  padding: 0 5px 0 5px;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--font-family-main);
}

.dark #league-register-payments table td {
  color: #000;
}

.dark #league-register-payments table td form {
  color: #fff;
}

#league-register-payments tr.division td {
  border: 1px solid #44d033;
  border-width: 1px 0 1px 0;
  padding: 5px;
  background-color: #e6ffe3;
}

#league-register-payments tr.division.status-alert td {
  background-color: #ffe6e6;
  border-color: #ff0000;
}

#league-register-payments tr.division td:first-child {
  width: 22px;
  padding-right: 0;
  border-width: 1px 0 1px 1px;
  border-radius: 4px 0 0 4px;
}

#league-register-payments tr.division td:last-child {
  border-width: 1px 1px 1px 0;
  border-radius: 0 4px 4px 0;
}

.dark .server-container span,
.dark .server-container div {
  color: #fafbfa;
}

.dark .server-container a,
.dark .server-container b {
  color: #619dff;
}

.dark .server-container b {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: transparent;
  transition: text-decoration 200ms;
}

.dark .server-container b:hover {
  text-decoration-color: currentColor;
}

#league-register-join h1 {
  display: block;
  padding: 7px 5px 8px 5px;
  margin: 0 0 10px 0;
  border-radius: 4px;
}

#league-register-join h1.incomplete {
  color: #383838;
  border: 1px solid #9d9d9d;
  background-color: #f5f5f5;
}

#league-register-join h1.complete {
  border: 1px solid #44d033;
  background-color: #e6ffe3;
  color: #000;
}

#league-register-join label {
  width: 30px;
}

#league-register-join div.data {
  font-size: 11px;
  font-weight: bold;
  padding: 2px 0 0 0;
  margin: 0 0 10px 30px;
}

#league-register-join div.reg-option {
  border-top: 1px dotted #bbbbbb;
  margin-top: 5px;
  padding-top: 10px;
}

#league-register-join div.reg-option label {
  width: 100px;
}

#league-register-join div.reg-option div.data {
  font-size: 10px;
  font-weight: normal;
  margin: 0 0 0 100px;
  padding: 0;
}

#league-standings .division {
  background-color: #fafafa;
  border: 1px solid #f0f1f3;
  border-width: 1px 0 1px 0;
}

#league-standings .division form {
  float: right;
  margin: 5px 3px 0 0;
}

#league-standings .division h1 {
  font-size: 20px;
  margin: 0 0 10px 0;
}

#league-standings table {
  width: 100%;
  margin: 0 0 0 0;
}

#league-standings table td,
#league-standings table th {
  padding: 2px;
}

#league-standings tr.conference-header td {
  background-color: #ebeff2;
  padding: 6px 2px 6px 2px;
  border: 1px solid #95b3d7;
  border-width: 1px 0 1px 0;
}

#league-standings tr.conference-header td h2 {
  display: inline;
  font-size: 11px;
  font-weight: bold;
}

#league-standings tr.conference-legend th {
  background-color: #f8f8f8;
  padding: 4px 2px 4px 2px;
  font-weight: bold;
}

#league-standings tr.group td {
  background-color: #fdfdfd;
  padding: 4px 0 4px 2px;
  border: 1px solid #f0f1f3;
  border-width: 1px 0 1px 0;
}

#league-standings th.stat {
  text-align: right;
  width: 30px;
}

#league-standings td.stat {
  text-align: right;
  width: 35px;
}

#league-predictions .division {
  background-color: #fafafa;
  border: 1px solid #f0f1f3;
  border-width: 1px 0 1px 0;
  margin: 0 0 10px 0;
}

#league-predictions .division form {
  float: right;
  margin: 5px 3px 0 0;
}

#league-predictions .division h1 {
  font-size: 20px;
  margin: 0 0 10px 0;
}

#league-predictions .prediction-container {
  margin: 0 0 28px 0;
  padding: 0 0 10px 0;
  border-bottom: 0 solid #ececec;
}

#league-predictions .prediction-team {
  width: 110px;
  padding: 5px 0 0 0;
  text-align: center;
  overflow: hidden;
}

#league-predictions .logo {
  margin: 0 auto;
}

#league-predictions .logo-bottom-padding {
  padding-bottom: 7px;
}

#league-predictions .prediction-stats {
  margin: 3px 0 0 0;
}

#league-predictions .prediction-content {
  float: left;
  width: 319px;
  margin: 0 12px 0 12px;
}

#league-predictions h2 {
  margin: 5px 0 4px 0;
  padding: 0 0 4px 0;
  font-weight: normal;
  border-bottom: 1px dotted #bbbbbb;
}

#league-predictions h2 b {
  color: #444444;
}

#league-predictions h3 {
  margin: 0 0 12px 0;
  font-weight: normal;
  line-height: 1.3em;
}

#league-predictions h4 {
  width: 80px;
  padding: 4px;
  margin: 14px 11px 0 11px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--font-family-main);
}

#league-predictions h4.winner {
  background-color: #e6ffe3;
  border: 1px solid #44d033;
}

#league-predictions h4.loser {
  background-color: #fae9e9;
  border: 1px solid #ff0000;
}

#league-predictions .actions {
  margin: 0 0 10px 0;
}

div.prediction {
  width: 319px;
  margin: 10px auto 0 auto;
}

div.prediction textarea {
  width: 225px;
  height: 55px;
  float: right;
}

div.prediction label {
  width: 55px;
}

div.prediction div.data {
  margin-left: 55px;
}

div.prediction input.submit {
  width: 80px;
  margin: 3px 0 5px 0;
}

#league-all-star-game .note2 {
  margin: 0 0 10px 15px;
}

#league-all-star-game .note2 select {
  float: right;
}

#league-all-stars div.left {
  width: 46%;
  margin: 0 0 0 15px;
  line-height: 2.2em;
}

#league-all-stars input.checkbox {
  float: left;
  margin: 7px 5px 0 0;
}

#league-match-setup table th,
#league-match-setup table td {
  padding: 2px;
}

#league-match-setup table.roster {
  width: 45%;
  border-spacing: 0;
  border-collapse: collapse;
}

#league-match-setup .sub-header {
  margin: 25px 0 5px 0;
  width: 200px;
  font-weight: bold;
}

#league-match-setup .note2 {
  float: right;
  width: 50%;
  margin: 25px 0 0 0;
}

#league-match-setup table.offers,
#league-match-setup table.games {
  width: 100%;
  margin: 25px 0 10px 0;
  border-spacing: 0;
  border-collapse: collapse;
}

#league-match-setup table.offers td {
  padding: 8px 0 8px 0;
}

#league-match-setup table.offers td.offer {
  text-align: left;
  padding: 8px 0 8px 50px;
}

#league-match-setup #offer-new {
  margin-top: 8px;
}

#league-match-setup #offer-accepted {
  background-color: #f3fff2;
}

.dark #league-match-setup #offer-accepted {
  background-color: rgba(20, 130, 0, 0.2);
}

#league-schedule .header {
  background-color: #fafafa;
  border: 1px solid #f0f1f3;
  border-width: 1px 0 1px 0;
}

#league-schedule .header h1 {
  font-size: 20px;
  margin: 0 0 8px 0;
}

#league-schedule .stats-leaders {
  width: 350px;
  font-weight: bold;
  font-size: 11px;
  margin: 18px 0 5px 0;
  padding: 0 0 3px 0;
  border-bottom: 1px dotted #bbbbbb;
}

#league-schedule .stats-leader {
  width: 115px;
  float: left;
  margin: 0 8px 0 0;
  line-height: 1.4em;
}

#league-schedule .stats-leader a {
  color: #000000;
}

#league-schedule .stats-leader img.profile {
  float: left;
  max-width: 40px;
  margin-right: 6px;
}

#league-schedule .stats-leader .no-image {
  float: left;
  max-width: 40px;
  margin-right: 6px;
  width: 40px;
  height: 52px;
}

#league-schedule table.calendar {
  margin-bottom: 2px;
  width: 165px;
}

#league-schedule select[name="region_id"] {
  width: 165px;
  margin-bottom: 2px;
}

#league-schedule div.note {
  margin: 0 8px 10px 8px;
  padding: 8px;
}

#league-schedule div.note a {
  font-weight: bold;
}

#league-schedule div.match-container {
  float: left;
  width: 277px;
  margin: 0 0 10px 0;
}

#league-schedule div.match-container:nth-child(even) {
  float: right;
}

#league-schedule div.match-overview {
  width: 269px;
  height: 103px;
  border: 1px solid #d4d0c8;
  border-bottom: none;
  line-height: 1.3em;
  padding: 3px;
}

#league-schedule div.match-footer {
  width: 269px;
  color: #5e5e5e;
  border: 1px solid #d4d0c8;
  border-top: none;
  padding: 3px;
  white-space: nowrap;
  overflow: hidden;
}

#league-schedule div.match-overview table {
  width: 100%;
  margin-bottom: 6px;
}

#league-schedule div.match-overview table a {
  font-weight: bold;
}

#league-schedule div.match-overview table th {
  padding: 2px;
  text-align: left;
}

#league-schedule div.match-overview table td {
  padding: 2px;
  border-bottom: 1px dashed #d4d0c8;
}

#league-schedule div.match-overview table .stat {
  text-align: center;
  width: 20px;
}

#league-schedule div.match-overview table .winner {
  background-color: #f8f8f8;
}

/* calendar */
table.calendar {
  margin: -1px 0 -1px -1px;
  border-spacing: 1px;
  border-collapse: separate;
  background-color: #ffffff;
}

#league-schedule table.calendar tr.month a {
  color: #5f697d;
  text-shadow: 1px 1px 0 #ffffff;
}

table.calendar * th,
table.calendar * td {
  text-align: center;
  padding: 0;
  text-shadow: 1px 1px 0 #ffffff;
  border: 1px solid #ffffff;
}

table.calendar * th {
  height: 18px;
  background-color: #e5e6ea;
  border-color: #d9dbe0;
  color: #5f697d;
}

table.calendar * td {
  height: 16px;
  background-color: #ffffff;
  color: #4e4e4e;
}

table.calendar .cal-highlight {
  background-color: #ffffff;
  border-color: #d3e8d0;
}

table.calendar .cal-highlight a {
  font-weight: bold;
  text-decoration: none;
  color: #14be00;
}

table.calendar .cal-current-day,
table.calendar td:hover {
  background-color: #ffffff;
  border-color: #e6e6e6;
  font-weight: bold;
}

/* row style */
#sorted {
  background-color: #f0f0f0;
}

.dark #sorted {
  background: #222;
}

.row1.highlight,
.row1:hover,
.row2.highlight,
.row2:hover {
  background-color: #e8e8e8;
  color: #000;
}

.dark .row1.highlight,
.dark .row1:hover,
.dark .row2.highlight,
.dark .row2:hover {
  background-color: #222;
  color: #fafbfa;
}

.row1.highlight #sorted,
.row1:hover #sorted,
.row2.highlight #sorted,
.row2:hover #sorted {
  background-color: #d8d8d8;
  color: #000;
}

.dark .row1.highlight #sorted,
.dark .row1:hover #sorted,
.dark .row2.highlight #sorted,
.dark .row2:hover #sorted {
  background-color: #000;
  color: #fafbfa;
}

.row1 {
  background: #ffffff;
}

.dark .row1 {
  background: #333433;
}

.row1,
.row1 td,
.row1 th {
  border-bottom: 1px solid #f0f1f3;
}

.dark .row1,
.dark .row1 td,
.dark .row1 th {
  border-bottom: none;
}

.row1 td,
.row1 th {
  background: inherit;
}

.row2 {
  background: #fbfbfb;
}

.dark .row2 {
  background: #444;
}

.row2,
.row2 td,
.row2 th {
  border-bottom: 1px solid #f0f1f3;
}

.dark .row2,
.dark .row2 td,
.dark .row2 th {
  border-bottom: none;
}

.row2 td,
.row2 th {
  background: inherit;
}

.icon-sort {
  margin-left: 1px;
  border: 0;
}

/* box scores */
.box {
  border-collapse: collapse;
  margin: 0;
  border: 1px solid #b8b8b8;
}

.box .header th {
  font-weight: normal;
  background-color: #ebeff2;
  padding: 0 3px 1px 3px;
  line-height: 1.8em;
}

.box th,
.box td,
.box .row1 th,
.box .row1 td,
.box .row2 th,
.box .row2 td {
  border: 1px solid #b8b8b8;
  font-size: 10px;
}

.dark .box th,
.dark .box td,
.dark .box .row1 th,
.dark .box .row1 td,
.dark .box .row2 th,
.dark .box .row2 td {
  border: 1px solid #555655;
  font-size: 10px;
}

.box .acronym {
  padding: 0 0 2px 0;
  text-align: center;
}

.box .tabArea {
  width: auto;
  border: 0;
  padding: 0 0 4px 4px;
  text-align: right;
  background: transparent;
}

.box .ct,
.box .blue {
  color: #0000ff;
}

.box .t,
.box .red {
  color: #ff0000;
}

.box .stat {
  font-weight: normal;
  font-size: 10px;
  font-family: var(--font-family-main);
  white-space: nowrap;
  text-align: center;
}

.box .rank,
.box .rank * {
  font-weight: normal;
  font-size: 9px;
  font-family: var(--font-family-main);
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}

/* in-game */
/* set margin to 1px because 0 causes steam webkit to bug 7/31/2010 */
body.ingame {
  background-color: #ffffff;
  margin: 1px 25px 1px 1px;
  padding: 0;
}

body.ingame div.container {
  width: 833px;
}

body.ingame div.header {
  background-color: #f1f2f5;
  background-image: url("/images/logo_esea_ingame.png");
  background-repeat: no-repeat;
  background-position: 5px 5px;
  border-bottom: 1px solid #404040;
  padding: 5px 5px 5px 100px;
  margin: 0 0 5px 0;
}

body.ingame div.header div.ad {
  height: 90px;
}

body.ingame div.footer {
  width: 100%;
  text-align: center;
  border: 0;
  margin: 15px 0 0 0;
}

/* general modifiers */
.note {
  background-color: #ffffcc;
  border: 2px solid;
  border-color: #efd1b2 #713900 #713900 #efd1b2;
  padding: 7px;
  line-height: 1.5em;
}

.dark .note {
  color: #000;
}

.note2 {
  border-top: 2px solid #95b3d7;
  padding: 7px;
  background-color: #f3f8fd;
  color: #000;
}

.dark .note2 {
  background-color: #222;
  color: #fafbfa;
}

.online {
  background-color: #f5fff1;
}

.strikethrough {
  text-decoration: line-through;
}

/* quick stem page hack fixes */
.module-header {
  height: 27px;
  margin: 0 0 0 0;
  padding: 10px 10px 0 10px;
  background-color: #212121;
  border: 0;
  text-align: left;
  font-weight: normal;
  font-size: 14px;
  color: #cfcfcf;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  -webkit-font-smoothing: antialiased;
}

.content-text {
  margin-bottom: 12px;
}

.stem-links {
  padding: 10px;
}

/* xp profile */
.xp {
  width: 364px;
  height: 75px;
  position: relative;
}

.xp-darken {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}

.xp-box-top {
  position: absolute;
  top: 5px;
  width: 100%;
}

.xp-level {
  text-align: center;
  margin: 0 auto;
}

h3.xp-h3 {
  font-size: 8px;
  margin-top: 6px;
  margin-bottom: 2px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
}

h2.xp-h2 {
  font-size: 30px;
  margin: 0;
  color: rgba(255, 255, 255, 1);
  font-weight: 300;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.xp-prestige {
  position: absolute;
  top: 3px;
  left: 10px;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.xp-experience {
  position: absolute;
  top: 3px;
  right: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.xp-progress {
  width: 95%;
  height: 5px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.xp-progress-filled {
  background: #e5c700;
  box-shadow: 0 0 40px rgba(229, 199, 0, 0.8);
  height: 5px;
}

.rank-spacer {
  width: 100%;
  height: 14px;
}

.rank-spacer-pro {
  height: 7px;
}

/* mobile tweaks */
@media only screen and (max-device-width: 720px) {
  html.parent {
    background-position: 0 0;
  }
}

/* twitch clips */
.twitch-thumb {
  position: relative;
  display: block;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s, opacity 0.1s;
}

.twitch-thumb img {
  display: block;
  max-width: 100%;
  height: auto;
}

.twitch-thumb:hover {
  opacity: 0.9;
  transform: scale(1.015);
  z-index: 1;
}

.twitch-thumb span {
  position: absolute;
  top: 5px;
  font-size: 10px;
  color: #fff;
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.5);
}

.twitch-thumb .duration {
  left: 5px;
}

.twitch-thumb .date {
  right: 5px;
}

.twitch-thumb .submitting-user {
  background: transparent;
  font-size: 12px;
  font-weight: bold;
  color: #3d8b3d;
  left: 0;
}

.twitch-thumb .rating {
  right: 0;
  background: transparent;
  color: black;
  font-size: 12px;
}

.cotw-entries hr {
  padding: 10px 0;
}

.cotw-entry {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.cotw-entry div {
  flex-grow: 1;
}

.cotw-entry .twitch-thumb {
  max-width: 50%;
}

.cotw-entry .cotw-info {
  padding: 0 10px;
  position: relative;
}

.cotw-entry .cotw-info h2.title {
  font-size: 14px;
  color: #3eb047;
}

.cotw-entry .cotw-info span.submitting-user {
  position: absolute;
  bottom: 0;
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.cotw-entry .cotw-info span.rating {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* profile clips tab. */
.profile-clips {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -10px;
}

.profile-clips .no-clips {
  padding-bottom: 10px;
}

.profile-clips .twitch-thumb {
  width: calc(50% - 5px);
  margin-bottom: 10px;
}

.profile-clips .twitch-thumb:nth-child(odd) {
  margin-right: 5px;
}

.profile-clips .twitch-thumb:nth-child(even) {
  margin-left: 5px;
}

/* profile clip tab */
div.random-clips {
  margin-top: 8px;
  margin-bottom: 0;
}

div.random-clips header {
  background: #3eb047;
  color: #fff;
}

div.module .random-clips--listing {
  display: flex;
  padding: 10px 5px;
  align-items: center;
  justify-content: center;
}

section.random-clips--listing .twitch-thumb {
  display: block;
  flex: 0 0 calc(25% - 7px);
  padding: 0;
  margin: 0 5px;
  flex-grow: 1;
  max-width: 250px;
}

.section.random-clips--listing .twitch-thumb span {
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
}

.section.random-clips--listing .twitch-thumb .date {
  bottom: 5px;
  top: auto;
  right: auto;
}

/* csgostats leaderboards */
.leaderboard-table {
  font-size: 14px !important;
  border: 0;
}
.leaderboard-table thead {
  background: #212121;
  color: #fff;
  font-size: 14px !important;
}
.leaderboard-table tbody td {
  padding: 7px 4px;
  text-align: center;
  line-height: 6px;
}
.leaderboard-table thead th:first-of-type {
  text-align: left;
}
.leaderboard-table thead th {
  padding: 6px;
  font-weight: 500;
  text-align: center;
}
.leaderboard-table thead tr {
  color: #d0d0d0 !important;
  font-size: 14px !important;
  font-weight: normal;
  line-height: 24px;
}
.leaderboard-table thead tr th:first-child {
  padding-left: 16px;
}
.leaderboard-table tbody tr td:first-child {
  text-align: left;
}
.leaderboard-table tbody tr:nth-child(even) {
  background: #efefef;
}

.dark .leaderboard-table tbody tr:nth-child(even) {
  background: #444;
}
.module-header-nav {
  text-align: center;
  list-style-type: none;
  padding: 14px;
  margin: 0;
}
.module-header-nav li a {
  display: inline-block;
  color: #cfcfcf !important;
  margin: 0 22px;
  text-transform: uppercase;
  transition: color 0.6s ease;
  text-decoration: none;
  font-size: 14px;
}
.module-header-nav li {
  display: inline-block;
}
.module-header-nav li a.active {
  border-bottom: 2px solid #3eb047;
  color: #212121 !important;
}

.dark .module-header-nav li a.active {
  border-bottom: 2px solid #3eb047;
  color: #fafbfa !important;
}

.module-header-nav a:hover {
  color: #212121 !important;
  text-decoration: none;
}
.dark .module-header-nav a:hover {
  color: #fafbfa !important;
  text-decoration: none;
}
#insider-leaderboard-header {
  background: url("/images/leaderboard-header-bg.png");
  background-size: cover;
  background-position: center center;
  color: #fff !important;
  text-align: center;
  font-size: 24px !important;
  position: relative;
}
#insider-leaderboard-header-inner {
  background: rgba(0, 0, 0, 0.3);
  padding: 28px 0;
}
#insider-leaderboard-player-unrank {
  font-size: 26px !important;
  color: #fff;
  text-align: center;
  padding-bottom: 14px;
}
#insider-leaderboard-player-name {
  display: inline-block;
  font-size: 32px !important;
  color: #fff;
}
#insider-leaderboard-player {
  margin: auto;
  padding-bottom: 15px;
  text-align: center;
}
#insider-leaderboard-player-avatar {
  border-radius: 3px;
  overflow: hidden;
  display: inline;
  height: 50px;
  overflow: hidden;
  position: absolute;
  width: 50px;
  display: block;
  background: #2b2b2b;
  background: linear-gradient(to bottom right, #2b2b2b, #161616);
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
}
#insider-leaderboard-player-avatar img.no-image {
  width: 46px;
  height: 37px;
  top: 6px;
  position: absolute;
  left: 3px;
}
#insider-leaderboard-player-avatar img {
  width: 50px;
  top: -8px;
  left: 0;
  position: absolute;
}
#insider-leaderboard-player-rank-number {
  color: #00b433;
  font-size: 32px !important;
}
#insider-leaderboard-player-rank {
  display: inline-block;
  font-size: 32px !important;
  color: #fff;
}
#insider-leaderboard-alias {
  margin-left: 75px;
  font-size: 32px;
  color: #fff;
}
#insider-header-spacer {
  display: inline-block;
  width: 110px;
}
#insider-chart-holder {
  padding-top: 30px;
}
.float-col-25 {
  float: left;
  width: 25%;
}
.float-col-20 {
  float: left;
  width: 20%;
}
.float-col-18 {
  float: left;
  width: 18%;
}
.float-col-23 {
  float: left;
  width: 23%;
}
.float-col-50 {
  float: left;
  width: 50%;
}
.leaderboard-doughnut-outer {
  height: 140px;
  width: 140px;
  margin: auto;
  position: relative;
}
.leaderboard-doughnut-stat-small,
.leaderboard-doughnut-stat {
  position: absolute;
  font-size: 28px !important;
  line-height: 32px;
  top: 50%;
  color: #fff;
  margin-top: -36px;
  left: 0;
  right: 0;
  text-align: center;
}

.leaderboard-doughnut-stat-small {
  margin-top: -10px;
  font-size: 15px !important;
  line-height: 1.1em;
}
.leaderboard-doughnut-label {
  font-size: 14px;
  line-height: 1.2em;
  color: #fff;
  display: block;
  padding-top: 4px;
}
.leaderboard-rank {
  text-overflow: ellipsis;
  line-height: 26px;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  width: 26px;
  text-align: center;
  margin-right: 4px;
}
.leaderboard-avatar {
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  width: 35px;
  height: 35px;
  position: relative;
}
.leaderboard-avatar img {
  width: 35px;
  position: absolute;
  left: 0;
}
.leaderboard-avatar img.no-image {
  top: 4px;
}
.leaderboard-alias {
  text-overflow: ellipsis;
  line-height: 26px;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  max-width: 95px;
  font-size: 13px;
}
.leaderboard-bar-outer {
  padding-top: 10px;
  padding-left: 6px;
  padding-right: 6px;
}
.leaderboard-bar-outer-min {
  padding: 4px 0;
}
.leaderboard-bar-bg {
  height: 5px;
  border-radius: 2px;
  background: #3a3a3a;
}
.leaderboard-bar {
  float: left;
  border-radius: 2px;
  height: 5px;
  transition: width 0.3s ease;
}
.bgc-6ac971 {
  background: #6ac971;
}
.bgc-ff6c14 {
  background: #ff6c14;
}
.bgc-4B94DF {
  background: #4b94df;
}
.bgc-4BDFC5 {
  background: #4bdfc5;
}
.bgc-4B94DF {
  background: #4b94df;
}
.bgc-DFA74B {
  background: #dfa74b;
}
.bgc-DF724B {
  background: #df724b;
}
.bgc-DF4BC4 {
  background: #df4bc4;
}
.bgc-8E4BDF {
  background: #8e4bdf;
}
.bgc-F1BC4C {
  background: #f1bc4c;
}
.bgc-4BA2DF {
  background: #4ba2df;
}
.bgc-ff6c14 {
  background: #ff6c14;
}
.bgc-BCDF4B {
  background: #bcdf4b;
}
.csgo-leaderboards td,
.csgo-leaderboards th,
.csgo-leaderboards select,
.csgo-leaderboards button,
.csgo-leaderboards input,
.csgo-leaderboards textarea,
.csgo-leaderboards h1,
.csgo-leaderboards h2,
.csgo-leaderboards h3,
.csgo-leaderboards h4,
.csgo-leaderboards h5,
.csgo-leaderboards h6,
.csgo-leaderboards div,
.csgo-leaderboards span,
.csgo-leaderboards label {
  font-family: var(--font-family-display);
}
.csgo-leaderboards th {
  color: #fff;
  background: #111;
}
.csgo-leaderboards td a {
  text-decoration: none;
}
.csgo-leaderboards td,
.csgo-leaderboards th {
  font-size: 13px;
}
.insider-subscribe {
  position: relative;
  font-size: 20px;
}
div.leaderboard-percentile-small {
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-weight: normal;
}
div.leaderboard-percentile {
  position: absolute;
  bottom: 19px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-weight: normal;
}
.insider-subscribe::before,
.insider-subscribe::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 10px;
  height: 100%;
  background: #0073e4;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  z-index: 1;
}
.insider-subscribe::before {
  right: auto;
  left: 0;
}

.toggleables {
  display: inline-block;
  color: #999;
  cursor: pointer;
  text-decoration: none !important;
  font-size: 12px !important;
  background: #f6f6f6;
  border-radius: 4px;
}

.toggleables span {
  display: inline-block;
  padding: 5px;
  color: #999;
  text-decoration: none !important;
  font-size: 12px !important;
}

.toggleables span.active {
  color: #111;
  border-bottom: 2px solid #3eb047;
}

.info-link {
  font-weight: bold;
  color: #00ac17;
}

#layout-navigation a {
  position: relative;
}

.nav-new {
  position: absolute;
  right: 4px;
  top: 6px;
  background: #05adef;
  color: #fff;
  text-shadow: none;
  padding: 2px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0;
}

.menu-sub a .nav-new {
  top: 3px;
}

.module-header-nav .insider a::before {
  content: "";
  float: left;
  display: block;
  width: 17px;
  height: 17px;
  background: url("/global/images/icon_insider.medium.png") no-repeat 50% 50%;
  position: relative;
  left: -5px;
  bottom: 1px;
  overflow: hidden;
  border-radius: 3px;
}

#weapon-nav li {
  float: left;
  display: block;
  font-size: 14px;
}
#weapon-nav li a {
  padding: 14px 12px 13px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  text-align: left;
  margin-right: 12px;
}

#weapons-nav li::first-child a {
  margin-right: 26px;
}

#weapon-nav li a.active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
  color: #fff;
  border-bottom: 2px solid #e6d330;
  margin-bottom: -1px;
}
#weapon-nav ul:after {
  content: "";
  display: table;
  clear: both;
}
.nav-awp {
  background: url("/global/images/awp-icon.png") no-repeat 90% 50%;
}
.nav-awp a {
  width: 100px;
}
.nav-rifle {
  background: url("/global/images/ak47-icon.png") no-repeat 90% 50%;
}
.nav-rifle a {
  width: 60px;
}
.nav-pistol {
  background: url("/global/images/deagle-icon.png") no-repeat 90% 50%;
}
.nav-pistol a {
  width: 54px;
}
#weapon-nav ul {
  padding: 0 8px;
  margin: 0 35px 8px 35px;
  list-style-type: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
div.stat-header-info {
  margin-left: 96px;
  padding: 24px 10px;
  text-align: left;
  color: #fff;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  line-height: 20px;
}

/* Leaderboard stat compare */

a.subscribe-bar {
  padding: 18px 43px;
  display: block;
  background: url("/global/images/insider-star-banner.png") no-repeat 100% 50%
    #319ce9;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: left;
  font-size: 22px;
}

.dark a.subscribe-bar {
  color: #fff;
}

.compare-stat-row {
  float: left;
  width: 100%;
}
.dark .compare-stat-row-outer:nth-child(odd) > .compare-stat-row {
  background: #444;
}

.player1-stat,
.player2-stat {
  opacity: 0.3;
}
.player1-stat.stat-leader,
.player2-stat.stat-leader {
  opacity: 1;
}
.compare-player1-container,
.compare-player2-container {
  overflow: hidden;
  position: relative;
}
.compare-player1-outer,
.compare-player2-outer {
  width: 50%;
}
.compare-player1-outer {
  float: left;
}
.compare-player2-outer {
  float: right;
}
.compare-player-bg {
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  overflow: hidden;
  z-index: 0;
  background-size: 200%;
  background-position: center center;
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
  background-repeat: no-repeat;
}

.compare-player-bg-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.loader-wrapper-small {
  width: 22px;
  height: 22px;
}

#player-search-predictions {
  display: none;
}

.show-predictive-player-search #player-search-predictions {
  display: block !important;
}

.search-prediction-row:first-child {
  border-top: 0;
}

.search-prediction-row {
  border-top: 1px solid #eee;
}

.search-prediction-row div {
  display: block;
  padding: 4px;
  cursor: pointer;
  text-align: left;
}
.search-prediction-row div:hover {
  background: #ddd;
}

.predictive-search-form {
  position: relative;
  text-align: left;
}

.predictive-search-form .loader-wrapper-small {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  margin-right: -8px;
  display: none;
}
.predictive-search-form.searching .loader-wrapper-small {
  display: block;
}

.player-search {
  float: left;
  width: 189px;
  height: 30px;
  padding: 0 0 0 6px;
  vertical-align: middle;
  background-color: #fefefe;
  border: 1px solid #ffffff;
  border-radius: 4px 0 0 4px;
  font-weight: normal;
  font-size: 13px;
  font-family: var(--font-family-main);
  color: #111111;
}

#player-search-predictions {
  position: absolute;
  width: 236px;
  display: none;
}

#player-search-predictions-inner {
  padding: 4px;
  position: absolute;
  border-radius: 6px;
  top: 0;
  left: 0;
  right: 0;
  background: #f6f6f6;
  font-size: 13px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
}

.loader-small {
  display: block;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #3eb047;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader-small:before {
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #6ecc76;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
.loader-small:after,
.loader-small:before {
  content: "";
  position: absolute;
  box-shadow: 0 0 30px rgba(62, 176, 71, 0.5);
}
.loader-small:after {
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #81d388;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
.no-stats-info {
  padding: 8px;
  background: #ccc;
  text-align: center;
  font-size: 14px;
}

.player-1-nostats {
  float: left;
  width: 50%;
}

.player-2-nostats {
  float: right;
  width: 50%;
}

.compare-player-outer {
  position: relative;
  z-index: 0;
  height: 162px;
}

.compare-player-avatar {
  width: 162px;
  height: 162px;
  background-position: center center;
  background-size: 120%;
}

.compare-player1-outer .compare-player-avatar {
  float: left;
}

.compare-player2-outer .compare-player-avatar {
  float: right;
}

.compare-player-name {
  height: 162px;
}

.compare-player1-outer .compare-player-name {
  margin-left: 162px;
}
.compare-player2-outer .compare-player-name {
  margin-right: 162px;
}

.compare-player-name-inner {
  position: absolute;
  bottom: 18px;
  padding: 12px 16px;
  color: #eee;
}

.compare-player1-outer .compare-player-name-inner {
  right: 4px;
}
.compare-player2-outer .compare-player-name-inner {
  left: 4px;
}
.compare-player-name-text {
  font-size: 15px;
  color: #ddd;
  line-height: 1em;
}
.compare-player1-outer .compare-player-name-text {
  text-align: right;
}
.compare-player2-outer .compare-player-name-text {
  text-align: left;
}
.compare-player-alias {
  text-transform: uppercase;
  line-height: 1em;
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  max-width: 208px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.stat-compare {
  float: left;
  width: 100%;
}
.player1-stat {
  float: left;
  width: 33.33333%;
}
.player2-stat {
  float: right;
  width: 33.33333%;
}
.stat-info {
  margin-left: 33.33333%;
  margin-right: 33.33333%;
  text-align: center;
}
.stat-bar {
  height: 8px;
  background: #000;
  float: left;
  width: 100%;
}
.stat-bar-progress {
  height: 8px;
  background: #009bf0;
}

.clear-bars .stat-bar-progress {
  background: #ccc;
}

.clear-bars .percentile-bar {
  background: #ccc;
}

.player1-stat .stat-bar-progress {
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}
.player2-stat .stat-bar-progress {
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
}

.player1-stat .stat-bar {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.player2-stat .stat-bar {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.player1-stat .percentile-info {
  text-align: right;
}
.player1-stat .stat-bar {
  float: right;
}
.player1-stat .stat-bar-progress {
  float: right;
}
.player2-stat .stat-bar {
  float: left;
}
.player2-stat .stat-bar-progress {
  float: left;
}

.percentile-bar {
  background: #009bf0;
  height: 3px;
}
.clear-bars .stat-bar-progress {
  background: #ccc;
}
.compare-player-clear {
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 0px;
  font-size: 30px;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  line-height: 18px;
  cursor: pointer;
  text-align: center;
}

.player1-stat .percentile-bar {
  float: right;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.player2-stat .percentile-bar {
  float: left;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.player1-stat-number {
  float: left;
  width: 30px;
  font-size: 14px;
}
.player2-stat-number {
  float: right;
  width: 30px;
  font-size: 14px;
}
.percentile-info {
  color: #999;
}

.compare-vs-label {
  background: #00bdfe;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  width: 120px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-size: 15px;
  padding: 5px 0;
}

/****
 * New stuff.
 */

/* variables */
:root {
  /* colors */
  --color-black: #1f2021;
  --color-blue: #1f96f2;
  --color-charcoal: #404144;
  --color-gray: #969696;
  --color-green: #1faf50;
  --color-gray-light: #e0e0e0;
  --color-off-white: #f4f4f4;
  --color-transparent: transparent;
  --color-white: #fff;
  --color-red: #f1707a;
  --color-yellow-dark: #cca900;

  /* fonts families */
  --font-family-main: Roboto, Verdana, sans-serif;
  --font-family-display: "Oswald", var(--font-family-main);

  /* font sizes. */
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-xxxl: 22px;

  /* font weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* spacing */
  --gutter-sm: 5px;
  --gutter-md: 10px;
  --gutter-lg: 20px;

  /* animation duration. */
  --transition-duration: 0.2s;

  /* other keywords. */
  --auto: auto;
  --border-color: border-color;
  --capitalize: capitalize;
  --center: center;
  --collapse: collapse;
  --color: color;
  --flex: flex;
  --none: none;
  --space-between: space-between;
  --space-around: space-around;
  --stretch: stretch;
  --uppercase: uppercase;
}

/* elements */
strong {
  font-weight: var(--font-weight-bold);
}

/* tables */
.table {
  border-collapse: var(--collapse);
}

.table th,
.table td {
  border: var(--none);
  background-color: var(--color-transparent);
  padding: var(--gutter-md);
}

.table th {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  text-transform: var(--uppercase);
  font-size: var(--font-size-md);
  padding-top: 0;
}

.table tbody th {
  padding-top: var(--gutter-md);
}

.table.table-padding-sm th,
.table.table-padding-sm td {
  padding: var(--gutter-sm);
}

.table tbody tr:nth-child(odd) {
  background-color: var(--color-off-white);
}

.dark .table tbody tr:nth-child(odd) {
  background-color: #444;
}

/* helper classes. */

/* lengths. */
.full-width {
  width: 100%;
}

/* - font sizes */
.font-size-sm {
  font-size: var(--font-size-sm);
}

.font-size-md {
  font-size: var(--font-size-md);
}

.font-size-lg {
  font-size: var(--font-size-lg);
}

.font-size-xl {
  font-size: var(--font-size-xl);
}

/* - font families */
.font-family-display {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold) !important;
}

/* - font colors */
.color-gray {
  color: var(--color-gray);
}

.color-charcoal {
  color: var(--color-charcoal);
}

.color-off-white {
  color: var(--color-off-white);
}

.color-green {
  color: var(--color-green);
}

.color-red {
  color: var(--color-red);
}

.color-yellow-dark {
  color: var(--color-yellow-dark);
}

/* - font transformations */
.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

/* - font weights */
.font-weight-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-weight-bold {
  font-weight: var(--font-weight-bold);
}

/* - font positions */
.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

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

/* - flex */
.flex {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-align-center {
  display: var(--flex);
  align-items: var(--center);
}

.flex-align-end {
  display: var(--flex);
  align-items: flex-end;
}

.flex-align-stretch {
  display: var(--flex);
  align-items: var(--stretch);
}

.flex-justify-center {
  justify-content: var(--center);
}

.flex-justify-space-between {
  justify-content: var(--space-between);
}

.flex-justify-space-around {
  justify-content: var(--space-around);
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-halves {
  flex: 0 1 50%;
}

/* - backgrounds */
.bg-gray {
  background-color: var(--color-gray);
}

.bg-gray-light {
  background-color: var(--color-gray-light);
}

.bg-off-white {
  background-color: var(--color-off-white);
}

.dark .bg-off-white {
  background-color: #444;
}

/* - spacing */
.margin-top-md {
  margin-top: var(--gutter-md);
}

.padding-none {
  padding: var(--none);
}

.padding-md {
  padding: var(--gutter-md);
}

.padding-lg {
  padding: var(--gutter-lg);
}

.padding-top-sm {
  padding-top: var(--gutter-sm);
}

.padding-top-md {
  padding-top: var(--gutter-md);
}

.padding-top-lg {
  padding-top: var(--gutter-lg);
}

.padding-right-none {
  padding-right: 0;
}

.padding-right-sm {
  padding-right: var(--gutter-sm);
}

.padding-right-md {
  padding-right: var(--gutter-md);
}

.margin-right-sm {
  margin-right: var(--gutter-sm);
}

.padding-bottom-sm {
  padding-bottom: var(--gutter-sm);
}

.margin-bottom-none {
  margin-bottom: var(--none);
}

.padding-left-none {
  padding-left: var(--none);
}

.padding-left-sm {
  padding-left: var(--gutter-sm);
}

.padding-left-md {
  padding-left: var(--gutter-md);
}

.margin-left-sm {
  margin-left: var(--gutter-sm);
}

/* - borders */
.rounded {
  border-radius: var(--gutter-sm);
}

/* markdown content. */
.markdown img {
  max-width: 100%;
  height: auto;
}

.markdown h1 {
  font-size: 15px;
}

.markdown h2 {
  font-size: 14px;
}

.markdown h3 {
  font-size: 13px;
}

.markdown h4 {
  font-size: 12px;
}

.markdown h5 {
  font-size: 11px;
}

.markdown h6 {
  font-size: 10px;
}

/* markdown help */

.markdown-help > table {
  width: 100%;
  clear: both;
}

.markdown-help > table > tbody > tr > td {
  padding: 5px;
}

.markdown-help > table > tbody > tr > td:first-child {
  width: 1%;
  white-space: nowrap;
}

.markdown-help > table > tbody > tr:nth-child(even) {
  background-color: #fbfbfb;
}

.dark .markdown-help > table > tbody > tr:nth-child(even) {
  background-color: #444;
}

.flex {
  display: flex;
}

.flex-centered {
  display: flex;
  align-items: center;
}

.flex-grow {
  flex-grow: 1;
}

.flex-align-start {
  display: flex;
  align-items: flex-start;
}

/**
 * Clubs.
 */

.club-list-table tbody tr,
.war-list-table tbody tr {
  cursor: pointer;
  transition: background-color var(--transition-duration);
}

.club-list-table.table tbody tr:hover,
.war-list-table.table tbody tr:hover {
  background: var(--color-gray-light);
}

.dark .club-list-table.table tbody tr:hover,
.dark .war-list-table.table tbody tr:hover {
  background: #222;
}

.dark .club-list-table.table th,
.dark .war-list-table.table th {
  padding-top: 10px;
}

.clubs-table-profile td {
  padding: var(--gutter-sm);
}

.clubs-table-profile td:first-child {
  width: 100%;
}

.clubTabs .tab {
  margin-right: 0;
}

/* clubs - filters */

.club--filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.club--filter label {
  width: auto;
  padding-right: 5px;
}

.club--filter select {
  width: auto;
  max-width: 115px;
}

/* clubs - invite member form */
.invite-to-club {
  margin: 0;
}

.invite-to-club .name {
  width: 100px;
  margin-right: 5px;
}

.invite-to-club input[type="number"] {
  width: 4em;
}

.invite-to-club .name::placeholder {
  font-size: 10px;
  color: #666;
}

.invite-to-club .invite-fields label {
  width: auto;
  margin-right: 5px;
  margin-bottom: 0;
  white-space: nowrap;
}

/* clubs - queue times table */
.queue-times--table {
  margin: 10px 0;
  width: 100%;
}

.queue-times--table td {
  vertical-align: top;
}

.queue-times--table label {
  float: none;
  font-weight: 400;
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

.queue-times--table label span {
  display: block;
}

.queue-times--table .queue-time {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

/* clubs - profile. */
#clubs-profile #profile-header {
  float: none;
}

#clubs-profile #profile-header h1 {
  margin-left: 0;
}

.clubs-profile--content {
  display: flex;
}

.clubs-profile--left {
  flex-grow: 1;
}

.clubs-profile--right {
  margin-left: 10px;
  margin-bottom: 10px;
}

.what-to-watch {
  background-color: #f9f9f9;
}

.what-to-watch h4 {
  background-color: #3eb047;
  color: #fff;
  padding: 5px;
}

.what-to-watch .view-more {
  text-align: center;
  padding: 5px 5px 8px;
  font-weight: bold;
  line-height: 1;
}

.what-to-watch .recent-items {
  padding: 10px;
  white-space: nowrap;
}

.what-to-watch img {
  vertical-align: middle;
}

.what-to-watch ul {
  list-style: none;
  padding: 5px;
  margin: 0;
}

.what-to-watch ul li {
  padding-bottom: 5px;
}

.what-to-watch ul li > * {
  margin-right: 2px;
}

.what-to-watch ul li:last-child {
  padding-bottom: 0;
}

.what-to-watch ul .user-link {
  flex-grow: 1;
}

.what-to-watch ul .user-link a {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.what-to-watch ul a {
  display: inline-block;
}

/* clubs - streams */
.club-streams--list {
  width: 100%;
}

.club-streams--list strong {
  font-weight: 700;
}

.club-streams--list td {
  vertical-align: middle;
}

.club-streams--list img {
  vertical-align: middle;
}

.club-streams--list .viewers {
  text-align: right;
}

.club-streams--list .game,
.club-streams--list .date {
  width: 1%;
  white-space: nowrap;
}

.club-streams--list .date {
  text-align: right;
}

/* clubs manage division - queue times */
.add-queue-time--selections {
  display: flex;
  align-items: flex-end;
}

.add-queue-time--times {
  display: flex;
  align-items: center;
}

.add-queue-time--selections {
  padding: 10px 0;
}

.add-queue-time--group.day {
  padding-right: 10px;
}

#clubs-manage-queue .queue-time input {
  margin-right: 5px;
}

/* clubs manage division - rules */
.clubs-manage-rules textarea {
  width: 100%;
  box-sizing: border-box;
}

.clubs-manage-rules form,
#clubs-manage-rules form * {
  box-sizing: border-box;
}

.clubs-manage-rules .markdown-help .markdown-toggle {
  text-align: right;
  margin-top: 10px;
  float: right;
}

.rules-default {
  padding-left: 10px;
  border-left: 2px solid #ccc;
}

/* clubs manage - member */
.clubs-manage-members .member-actions {
  width: 75px;
  margin: 0 5px;
}

.clubs-manage-members .member-actions form {
  padding: 0 5px;
}

/* clubs mange - division fees */
.manage-division-fee .fee-item {
  width: 50px;
}

.manage-division-fee .fee-item:disabled {
  background-color: var(--color-off-white);
}

/* my clubs page. */
.my-club-links {
  margin-top: -8px;
}

.my-club-links div {
  font-size: 10px;
  line-height: 1;
}

.my-club-links a {
  font-size: 10px;
  color: white;
}

/* find a club page */
.find-a-club .find-title {
  font-size: 12px;
  margin-top: 3px;
}

.find-a-club .form-items {
  display: flex;
  align-items: center;
}

.find-a-club .form-items > * {
  margin: 0 5px 0 0;
  width: auto;
}

/* Clubs - announcement */
.post-announcement {
  margin-bottom: 20px;
}

.post-announcement textarea {
  height: 8em;
  width: 100%;
  box-sizing: border-box;
}

/* Clubs - manage profile */

.club-entity-form .tabContent > .sub-header.processed {
  padding-left: 18px;
  background-image: url("/global/images/icon_show.png");
  background-repeat: no-repeat;
  background-position: 4px 5px;
}

.club-entity-form .tabContent > .sub-header.processed.clicked {
  background-image: url("/global/images/icon_hide.png");
}

.clubs-existing-prizes input[type="text"]::placeholder {
  color: #ccc;
  font-size: 10px;
}

.member-options .club--filters {
  margin: 0 0 0 auto;
}

.member-options .club--filters label {
  margin: 0;
}

.member-options {
  justify-content: space-between;
}

.club-logo-none {
  width: 170px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  font-size: 50px;
}

.club-details {
  border: 1px solid var(--color-gray-light);
}

.club-info-table td,
.club-info-table th {
  color: var(--color-charcoal);
  padding: 3px 0;
}

.club-info-table th {
  white-space: nowrap;
  padding-right: var(--gutter-lg);
}

.club-info-table-stats thead tr:first-child th {
  color: var(--color-charcoal);
}

.club-info-table-stats thead th:first-child {
  border-bottom: none;
}

.club-info-table-stats th,
.club-info-table-stats td {
  padding: var(--gutter-md) var(--gutter-sm);
}

.club-info-table-stats thead tr:nth-child(even) th {
  padding-top: var(--gutter-sm);
  padding-bottom: var(--gutter-sm);
}

.club-info-table-stats tbody tr:nth-child(even) td,
.club-info-table-stats tbody tr:nth-child(even) th {
  padding-top: 0;
}

.club-info-table-stats thead tr:first-child th {
  padding-top: 0;
}

.club-info-table-stats thead th {
  background-color: transparent;
  color: var(--color-gray);
}

.club-info-table-stats tbody th {
  text-align: right;
  color: var(--color-gray);
}

.club-war-detail-stats {
  color: var(--color-charcoal);
  margin-bottom: var(--gutter-sm);
}

.club-streams-summary {
  margin: 0;
  padding: 0;
  list-style: none;
}

.club-streams-summary img {
  display: block;
  margin-right: 2px;
}

.club-recent-matches-table img {
  display: block;
}

.member-ellipsis a[class^="account-"] {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 80px;
  overflow: hidden;
  display: inline-block;
}

.club-war-vs-header a {
  max-width: 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.club-tabs {
  position: relative;
}

.club-tabs .clubs-tabs-extra {
  position: absolute;
  right: 0;
}

.queue-times--table {
  text-align: center;
}

.queue-times--table {
  border-spacing: 2px 0;
}

.queue-times--table th {
  border-top-left-radius: var(--gutter-sm);
  border-top-right-radius: var(--gutter-sm);
  background: var(--color-off-white);
  font-weight: var(--font-weight-normal);
  border-bottom: var(--none);
}

.queue-times--table td {
  border-bottom-left-radius: var(--gutter-sm);
  border-bottom-right-radius: var(--gutter-sm);
  border: 1px solid var(--color-off-white);
  vertical-align: middle;
  width: 14.25%;
}

.queue-times--table label {
  width: 100%;
  text-align: center;
}

a.view-more-button {
  display: inline-block;
  border-radius: var(--gutter-sm);
  border: 1px solid var(--color-gray-light);
  line-height: 1;
  padding: 2px var(--gutter-lg);
  color: var(--color-gray-light);
  text-decoration: none;
  transition: var(--color) var(--transition-duration),
    var(--border-color) var(--transition-duration);
}

a.view-more-button:hover {
  color: var(--color-gray);
  border-color: var(--color-gray);
}

.clubs-announcements-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clubs-announcements-list li:nth-child(even) {
  background-color: var(--color-off-white);
}

.dark .clubs-announcements-list li:nth-child(even) {
  background-color: #444;
}

.clubs-announcements-list .date {
  flex: 0 0 100px;
  border-right: 1px solid var(--color-gray-light);
  position: relative;
}

.clubs-announcements-list .date:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  border: 2px solid var(--color-green);
  background-color: var(--color-white);
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

.clubs-announcements-list img {
  max-width: 372px;
}

.war-list-table {
  overflow: auto;
}

.club-regions {
  width: 238px;
  border: 1px solid rgb(208, 208, 208);
  padding: var(--gutter-sm);
}

.dark .club-regions {
  border: 1px solid #999999;
}

.club-regions label {
  display: block;
  float: none;
  width: auto;
  font-weight: normal;
  clear: none;
}

.submit-cotw {
  width: 100%;
  border: none;
  background-color: #42a23a;
  padding: 7px 0;
  color: white;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.submit-cotw:hover {
  background-color: #055d00;
}

h4#cotw-modal-by {
  color: #333;
  font-size: 14px;
  padding: 0 0 10px;
}

#cotw-modal-rate-clip h2 {
  font-size: 14px;
  padding: 10px 0;
  color: #333;
}

#cotw-modal-rate-clip select {
  font-size: 14px;
  background-color: #3eb047;
  color: white;
  border: none;
}

.switch-field {
  padding: 30px;
  overflow: hidden;
}

.switch-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}

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

.switch-field label {
  float: left;
  clear: none;
}

.switch-field label {
  display: inline-block;
  width: 20px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3),
    0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #3eb047;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

.select2-container--default .select2-selection--multiple.maps-container {
  border-radius: 0;
  border: 1px solid #aaa;
  min-height: 26px;
}

.select2-container--open .select2-dropdown--below.maps-dropdown,
.select2-container--open .select2-dropdown--above.maps-dropdown {
  width: 200px !important;
  text-align: left;
  border: 1px solid #aaa;
  border-radius: 0;
  transform: translateY(-1px);
}

.select2-container--open .select2-dropdown--above.maps-dropdown {
  transform: translateY(1px);
}

.maps-dropdown .select2-results__option {
  position: relative;
}

.maps-dropdown .select2-results__option[aria-selected]:after {
  content: "✖";
  color: var(--color-red);
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.maps-dropdown .select2-results__option[aria-selected="true"]:after {
  color: var(--color-green);
  content: "✓";
}

.select2-container--default
  .maps-dropdown
  .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(31, 150, 242, 0.5);
}

.maps-container .select2-search__field::placeholder {
  font-size: 10px;
}

/**
 * Facelift.
 */
div.module header {
  background-color: #333333;
  color: #ffffff;
}

.dark div.module header {
  background-color: #222;
}

#layout-region-selector a {
  color: #fff;
}

div#layout-footer-container {
  background-color: #111111;
}

#layout-header {
  background-color: #111111;
}

#layout-header {
  min-width: 1240px;
}
div#layout-container,
div#network-contents,
#layout-header > div,
div#layout-footer-content {
  width: 1240px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

div#layout-column-left,
#layout-region-selector div {
  width: 225px;
  padding-left: 0;
  padding-right: 0;
}

div#module-recent-discussion > section {
  max-height: 450px;
  overflow: auto;
}

div#module-recent-discussion.fixed {
  width: 225px;
}

div#module-recent-discussion .recent-items li {
  margin-bottom: 4px;
}

div#module-recent-discussion .recent-items li img.tier-icon {
  float: none;
  margin: 0 6px 0 0;
  vertical-align: -1px;
}

div#layout-container.layout-standard div#layout-column-center {
  width: 726px;
}
div#layout-container.layout-standard div#layout-column-right {
  padding-right: 0;
  padding-left: 0;
  width: 225px;
}

#layout-navigation {
  width: auto;
}

div#module-events table.calendar {
  width: 100%;
}

#league-schedule table.calendar {
  width: 100%;
}

.stats-container {
  width: 225px;
}

div#layout-footer-container span {
  font-size: 14px;
}

div#layout-footer-container a {
  font-size: 14px;
  margin-left: 6px;
  font-weight: bold;
}

div#layout-footer-container span.right {
  width: auto;
}

#layout-header {
  height: 77px;
}

#new-header {
  background-color: rgb(17, 18, 17);
  box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;
  color: rgb(250, 251, 250);
  min-width: 1240px;
  position: relative;
  display: block;
  text-align: left;
}

#new-header > div {
  display: grid;
  width: 1210px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  -moz-box-align: center;
  align-items: center;
  grid-auto-flow: column;
  column-gap: 32px;
  grid-template-columns: 1fr;
}

#new-header i {
  transition: color 0.2s;
}

#new-header .nh-left {
  -moz-box-flex: 1;
  flex-grow: 1;
}

#new-header .nh-logo {
  display: grid;
  -moz-box-align: center;
  align-items: center;
  background-color: rgb(17, 18, 17);
  grid-auto-flow: column;
  grid-template-columns: 28% calc(72% - 4px);
  min-height: 45px;
  width: 180px;
}

.nh-logged-out-grid {
  display: inline-grid;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  grid-template-columns: auto auto auto;
  justify-items: center;
  font-size: 14px;
  align-items: center;
}

.nh-logged-out-grid > *:nth-child(3n + 1) {
  justify-self: end;
}

.nh-logged-out-grid > *:nth-child(3n) {
  justify-self: start;
}

.nh-logged-out-grid a {
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
}

.nh-logged-out-grid a.smaller {
  color: #999999;
  font-size: 10px;
}

.nh-logged-out-grid span {
  color: #0e9648;
}

.nh-search {
  position: relative;
}

.nh-search > i {
  cursor: pointer;
}

#new-header .nh-search > i:hover {
  color: #fff;
}

.nh-search > div {
  display: none;
}

.nh-search form {
  background-color: #fff;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 28px;
}

.nh-search form input {
  background-color: transparent;
  cursor: default;
  margin: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  appearance: none;
  color: #111111;
  display: block;
  font-size: 16px;
  line-height: 18px;
  padding: 8px;
  width: 100%;
  font-weight: 500;
  min-width: 150px;
}

.nh-search form input::placeholder {
  color: #999;
}

.nh-with-badge {
  position: relative;
}

.nh-badge {
  background-color: #0e9648;
  border-radius: 99999px;
  color: #ffffff;
  display: inline-block;
  font-size: 8px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  width: 16px;
  z-index: 1;
  left: 100%;
  margin-left: -4px;
  margin-top: -4px;
  position: absolute;
  top: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.nh-badge .small {
  color: #fff;
  font-size: 8px;
  padding-left: 1px;
}

.nh-action-wrapper {
  position: relative;
  margin-top: 4px;
}

.nh-action > i {
  font-size: 24px;
  color: #555;
  cursor: pointer;
}

.nh-action:hover > i {
  color: #fff;
}

.nh-more {
  position: relative;
  white-space: nowrap;
}

.nh-more > div {
  display: none;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 28px;
  overflow: hidden;
}

.nh-more > div i {
  font-size: 18px;
  line-height: 1;
  color: #0e9648;
  margin: 7px 10px;
  transition: color 0.2s;
}

.nh-more > div > a {
  display: block;
  text-decoration: none;
  padding: 2px 6px;
  transition: background-color 0.2s, color 0.2s;
}

.nh-more .nh-more-teams i {
  vertical-align: 4px;
}

.nh-more > div > a:hover {
  background-color: rgb(14, 150, 72);
}

.nh-more .nh-more-teams a {
  color: rgb(69, 122, 208);
}

.nh-more .menu-drop-team {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  margin-top: -4px;
}

.nh-more > div > a span {
  transition: color 0.2s;
}

.nh-more > div > a:hover i {
  color: #fff;
}

.nh-more > div > a:hover span {
  color: #fff;
}

.nh-more > div > a span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #999;
}

.nh-more-stats {
  display: grid;
  background-color: #eee;
  font-size: 12px;
  grid-column-gap: 16px;
  grid-row-gap: 4px;
  grid-template-columns: auto auto;
  justify-items: center;
  padding: 8px 16px;
}

.nh-more-stats a {
  color: #457ad0;
  font-weight: 700;
  font-size: 12px;
}

.nh-more-stats a span {
  color: #111;
  font-weight: 400;
  padding-left: 4px;
  font-size: 12px;
}

.nh-user {
  display: flex;
  height: 100%;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-left: 1px solid rgb(51, 52, 51);
  padding-left: 32px;
}

.nh-user > a {
  text-decoration: none;
  display: inline-block;
}

.nh-user > a > img {
  display: block;
  height: 45px;
  max-width: 100%;
  width: 45px;
  object-fit: cover;
  transition: border-color 200ms ease 0s;
  border: 2px solid rgb(85, 86, 85);
  border-radius: 99999px;
  overflow: hidden;
  cursor: pointer;
  margin-top: -4px;
  margin-bottom: -4px;
  box-shadow: rgba(0, 0, 0, 0.5) 2px 0 4px;
}

.nh-user > a:hover > img {
  border-color: #999999;
}

.nh-user > div {
  margin-left: 16px;
}

.nh-user > div > div {
  margin-bottom: 4px;
  max-width: 120px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nh-user > div > div > a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #ffffff;
  border-bottom: 1px solid;
  border-color: transparent;
  font-weight: 700;
  -webkit-transition: border 200ms;
  transition: border 200ms;
  display: inline-block;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.nh-user > div > div > a:hover {
  text-decoration: underline;
}

.nh-user button {
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  border-spacing: 0;
  cursor: pointer;
  line-height: inherit;
  margin: 0;
  opacity: 1;
  padding: 0;
  pointer-events: auto;
  text-indent: 0;
  border-bottom: 1px solid;
  border-color: transparent;
  color: #999999;
  font-weight: 500;
  -webkit-transition: border 200ms;
  transition: border 200ms;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.nh-user button:hover {
  text-decoration: underline;
}

div.module header {
  font-weight: 500;
  position: relative;
  background-color: #333333;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  padding: 12px 16px;
  height: auto;
}

div.module header > .icon {
  width: 22px;
  display: inline-block;
}

div.module header > .icon > i {
  color: #0e9648;
  font-size: 18px;
}

#layout-region-selector > a {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  padding: 10px 10px 7px 10px;
}

#layout-region-selector > a > span {
  margin-top: 2px;
}

#layout-navigation,
#layout-navigation * {
  -webkit-font-smoothing: antialiased;
}

#layout-navigation a.menu-main {
  padding: 11px 20px;
  height: auto;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.2s, background-color 0.2s, text-decoration 0.2s;
}

#layout-navigation a.menu-main.active.expanded {
  background-color: rgb(85, 86, 85);
  color: rgb(250, 251, 250);
}

.dark #layout-navigation a.menu-main.active.expanded {
  background-color: #cccdcc;
  color: #111211;
}

#layout-navigation a.menu-main.expanded {
  text-decoration: none;
}

#layout-navigation div.menu-sub a {
  font-size: 16px;
  padding: 11px 18px;
}

#layout-navigation div.menu-sub {
  background-color: #eee;
}

#layout-navigation div.menu-sub a:hover {
  background-color: transparent;
}

#layout-navigation a.menu-main > .icon {
  display: inline-block;
  margin-right: 11px;
}

#layout-navigation a.menu-main > .icon > i {
  font-size: 18px;
  transition: color 0.2s, transform 0.2s;
}

#layout-navigation a.menu-main.expanded > .icon > i {
  transform: rotate(90deg);
}

.dark #layout-navigation a.menu-main.active > .icon > i {
  color: #fff;
}

#layout-navigation a.menu-main.expanded > .icon > i {
  color: #fff;
}

.dark #layout-navigation a.menu-main.expanded > .icon > i {
  color: #111211;
}

#layout-navigation div.menu-sub a.active {
  background-color: #ccc;
}

.dark #layout-navigation div.menu-sub a.active {
  background-color: #555;
  color: #cccdcc;
}

.stat-table-legend {
  background: #fff;
  font-size: 14px;
  line-height: 1.2em;
}

.dark .stat-table-legend {
  background: #333433;
  font-size: 14px;
  line-height: 1.2em;
}

.create-team-form input[type="text"],
.create-team-form input[type="password"] {
  width: 250px;
}

.dark .select2-container--default .select2-selection--multiple {
  background-color: #444;
  color: #000;
}

.dark .select2-container--default .select2-selection--multiple.maps-container {
  border: none;
  background-color: #444;
}

.join-setting-club-form p {
  margin: 0;
}

.dark .club-info-table td,
.dark .club-info-table th {
  color: #fafbfa;
}

.dark .club-details,
.dark .queue-times--table td {
  border-color: #555655;
}

.dark #clubs-members table th,
.dark #clubs-standings table th {
  padding-top: 10px;
}

.club-standings-date-score .heading-font {
  font-family: var(--font-family-display);
  text-transform: uppercase;
  vertical-align: -1px;
}

.club-standings-bg {
  background-color: #f4f4f4;
}

.dark .club-standings-bg {
  background-color: #444;
}

.club-standings-date-score {
  background-color: #ccc;
}

.dark .club-standings-date-score {
  background-color: #222;
}

.club-standings-table-new th {
  padding-top: 10px;
}

#league-header {
  margin-bottom: 10px;
}

#league-header img {
  max-width: 100%;
}

.social {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: 4px;
  grid-template-columns: auto auto auto;
  margin-top: 2px;
  margin-bottom: 2px;
  justify-content: space-evenly;
}

.social a,
.social button {
  text-decoration: none;
  background-color: rgb(51, 52, 51);
  cursor: pointer;
  border-radius: 99999px;
  padding: 8px;
  margin-left: 4px;
  margin-right: 4px;
  transition: background-color 200ms ease 0s;
  border: none;
}

.social .twitter:hover {
  background-color: #38a1f3;
}

.social .facebook:hover {
  background-color: #3b5998;
}

.social .twitch:hover {
  background-color: #a064d5;
}

.social .discord:hover {
  background-color: #7289da;
}

.social .steam:hover {
  background-color: #2a475e;
}

.social a:first-child {
  margin-left: 0;
}

.social svg {
  width: 18px;
  fill: rgb(204, 205, 204);
  transition: fill 200ms ease 0s, border-color 200ms ease 0s;
  width: 18px;
  height: 18px;
  display: block;
}

.social-sep {
  width: 1px;
  background-color: rgb(85, 86, 85);
  align-self: stretch;
  opacity: 0.5;
  margin-left: 8px;
  margin-right: 8px;
}

.social button {
  font-family: Roboto, Verdana, Tahoma, Georgia, sans-serif;
  background-color: rgb(51, 52, 51);
  border: none;
  border-spacing: 0px;
  cursor: pointer;
  margin: 0px 4px;
  padding: 8px;
  pointer-events: auto;
  text-decoration: none;
  text-indent: 0px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 99999px;
  transition: background-color 200ms ease 0s;
  outline: none;
}

.social button.dark svg {
  fill: rgb(69, 122, 208);
}

.social button.system svg .eclipse-moon {
  fill: #fff;
}

.social button.light svg,
.social button.system svg .eclipse-sun {
  fill: rgb(255, 234, 0);
}

.social button:hover {
  background-color: rgb(153, 153, 153);
}

.dark .social button:hover {
  background-color: rgb(153, 153, 153);
}

.dark .note div {
  color: #000;
}

.club-fee-table th {
  padding-top: 10px;
}

.club-manage-members-table tbody tr:nth-child(4n + 1) {
  background-color: #eee;
}

.dark .club-manage-members-table tbody tr:nth-child(4n + 1) {
  background-color: #444;
}

.dark .modal,
.dark .modal div {
  color: #000;
}

.dark .modal h2 {
  color: #3eb047;
}

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

body ::-webkit-scrollbar-track {
  background-color: #eeefee;
}

body ::-webkit-scrollbar-thumb {
  background-color: #cccdcc;
  border-radius: 4px;
  border: 2px solid #eeefee;
}

html.dark body ::-webkit-scrollbar-track {
  background-color: #444;
}

html.dark body ::-webkit-scrollbar-thumb {
  background-color: #555655;
  border: 2px solid #444;
}

.club-war-overview {
  background-color: rgba(244, 244, 244, 0.75);
}

.dark .club-war-overview {
  background-color: rgba(34, 34, 34, 0.75);
}

.dark .club-info-table-stats thead tr:first-child th {
  color: #fff;
}