:root {
  --bg-main: #fafafa;
  --bg-dark: #323256;
  --bg-subtle: #f3f3f3;
  --bg-detail-subtle: #cbcbd3;
  --accent-main: #323256;
  --accent-main-text: #ffffff;
  --accent-main-hover: #434884;
  --text: #000000;
}

[data-theme="dark"] {
  --bg-main: #28283c;
  --bg-subtle: #28283c;
  --bg-dark: #202031;
  --bg-detail-faint: red;
  --bg-detail-subtle: #3f3f58;
  --accent-main: #ffffff;
  --accent-main-text: #000000;
  --accent-main-hover: #f3f3f3;
  --text: #ffffff;
}

[v-cloak] {
  display: none !important;
}

@font-face {
  font-family: "DINPro-Medium";
  src: url("/css/webfonts/DINPro-Medium.eot?#iefix") format("embedded-opentype"), url("/css/webfonts/DINPro-Medium.otf") format("opentype"), url("/css/webfonts/DINPro-Medium.woff") format("woff"),
    url("/css/webfonts/DINPro-Medium.ttf") format("truetype"), url("/css/webfonts/DINPro-Medium.svg#DINPro-Medium") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DINPro-Bold";
  src: url("/css/webfonts/DINPro-Bold.eot?#iefix") format("embedded-opentype"), url("/css/webfonts/DINPro-Bold.otf") format("opentype"), url("/css/webfonts/DINPro-Bold.woff") format("woff"),
    url("/css/webfonts/DINPro-Bold.ttf") format("truetype"), url("/css/webfonts/DINPro-Bold.svg#DINPro-Bold") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "eFootball-Stencil";
  src: url("/css/webfonts/eFootballStencil-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "eFootball-Sans";
  src: url("/css/webfonts/eFootballSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.2;
}

.hover-effect:hover {
  opacity: 0.65;
}

body {
  color: #000000;
  color: var(--text);
}

.option-files-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  align-items: flex-start;
}

.option-file-index {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 1.4px 3.6px rgba(0, 0, 0, 0.024), 0px 3.8px 10px rgba(0, 0, 0, 0.035), 0px 9px 24.1px rgba(0, 0, 0, 0.046), 0px 30px 80px rgba(0, 0, 0, 0.07);
}

.option-file-index h3 {
  margin: 0;
}

.option-file-index > *:not(:first-child),
.option-file-index > form > *:not(:first-child) {
  margin: 12px 0 0;
}

.option-file-index > form input,
.option-file-index > form textarea {
  width: 100%;
}

.option-file-index img {
  max-width: 100%;
}

a,
a:link,
a:visited,
a:hover {
  color: inherit;
}

.bg-dark a,
.bg-dark a:link,
.bg-dark a:visited,
.bg-dark a:hover {
  /* color: #FFF; */
}

input[type="text"],
input[type="url"],
input[type="number"],
textarea,
select {
  background-color: #f0f0f0;
  background: none;
  border: 1px solid #e0e0e0;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 16px;
}

input:focus-visible,
select:focus-visible {
  outline: none;
  border-color: #323256;
}

.bg-dark input[type="text"],
.bg-dark input[type="number"],
.bg-dark select {
  background-color: #323256;
  border-color: #434884;
  color: inherit;
}

.bg-dark input:focus-visible,
.bg-dark select:focus-visible {
  border-color: #ffffff;
}

.modal input[type="text"],
.modal input[type="number"],
.modal select {
  background-color: #f0f0f0;
  background: none;
  border: 1px solid #e0e0e0;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 16px;
}

.modal input:focus-visible,
.modal select:focus-visible {
  outline: none;
  border-color: #323256;
}

.button,
a.button {
  padding: 8px 14px;
  background-color: #323256;
  background-color: var(--accent-main);
  color: #ffffff;
  color: var(--accent-main-text);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  height: 30px;
  gap: 4px;
}

.bg-dark .button,
.bg-dark a.button {
  background-color: #ffffff;
  color: #323256;
}

.modal .button,
.modal a.button {
  background-color: #323256;
  background-color: var(--accent-main);
  color: #ffffff;
}

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #dc0014;
}

.button > svg {
  width: 16px;
  height: 16px;
}

.button.button-subtle,
a.button.button-subtle {
  background-color: transparent;
  color: #323256;
  color: var(--accent-main);
  border-color: #323256;
  border-color: var(--accent-main);
}

.bg-dark .button.button-subtle,
.bg-dark a.button.button-subtle {
  color: #ffffff;
  border-color: #ffffff;
}

.button.button-subtle:not([disabled]):hover,
a.button.button-subtle:not([disabled]):hover {
  background-color: #323256;
  background-color: var(--accent-main);
  color: #ffffff;
  color: var(--accent-main-text);
  border-color: transparent;
}

.bg-dark .button.button-subtle:not([disabled]):hover,
.bg-dark a.button.button-subtle:not([disabled]):hover {
  background-color: #ffffff;
  color: #323256;
  border-color: transparent;
}

.modal .button:not([disabled]):hover,
.modal a.button:not([disabled]):hover {
  background-color: #323256;
  background-color: var(--accent-main);
  color: #ffffff;
  color: var(--accent-main-text);
  border-color: transparent;
}

a.button[disabled],
.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

a.button:not(.button-subtle):not([disabled]):hover,
.button:not(.button-subtle):not([disabled]):hover {
  opacity: 0.65;
}

.icon-button {
  background: none;
  border: none;
  padding: 6px;
  display: flex;
  opacity: 0.4;
  cursor: pointer;
}

.icon-button > svg {
  margin: 0;
  width: 20px;
  height: 20px;
}

.icon-button:hover {
  opacity: 1;
}

.account-settings {
  max-width: 400px;
  margin-bottom: 20px;
}

.player-grid {
  overflow: hidden;
  margin: -10px;
}

.player-grid > .player-card {
  float: left;
  margin: 10px;
}

.team-kits {
  display: flex;
  font-weight: bold;
}

.team-kits > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-kits > div img {
  width: 180px;
  height: 180px;
}

.coach-container {
  background-color: #f2f2f5;
  padding: 16px 32px 16px 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.271);
  transition: background-color 100ms ease-in-out;
}

.coach-container img.coach_head {
  border-radius: 100%;
  border: 2px solid #d6d6d6;
  width: 64px;
  height: 64px;
  background-color: #fafafa;
  margin-right: 12px;
}

.main-coach-container .player-info-column .player-info {
  max-width: 500px;
}

.header-with-icon {
  display: flex;
  align-items: center;
}

.header-with-icon > *:first-child {
  margin-right: 5px;
}

.header-with-icon > img,
.header-with-icon > svg {
  width: 32px;
  height: 32px;
}

.membership-status {
  padding: 2px 5px;
  color: #fff;
  font-weight: bold;
}

.membership-status.active {
  background-color: #15e415;
}

.membership-status.inactive {
  background-color: #f32a2a;
}

.membership-date {
  padding: 2px 5px;
  font-weight: bold;
  border: 1px solid;
}

.language-select-container,
.sort-select-container {
  position: relative;
  cursor: pointer;
}

.sort-select-container {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
}

.sort-select-container > svg {
  width: 16px;
  height: 16px;
  fill: #000;
  margin-right: 5px;
}

.slidecontainer {
  max-width: 100%;
  width: 500px;
  margin-bottom: 10px;
}

.slidecontainer label {
  margin-bottom: 8px;
  margin-top: 15px;
}

.slidecontainer input.indicator {
  padding: 0;
  background: none;
  border: none;
  font-size: 100%;
  width: 50px;
}

.slidecontainer input.indicator:focus,
input.indicator:hover {
  background-color: #fff;
}

.slide-indicator {
  font-weight: bold;
}

.slider {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 5px 0;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* track */
.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 15px;
  cursor: pointer;
  background: #d3d6df;
  border-radius: 5px;
  border: none;
}

.slider::-moz-range-track {
  width: 100%;
  height: 15px;
  cursor: pointer;
  background: #d3d6df;
  border-radius: 5px;
  border: none;
}

/* thumb */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #9198ae;
  cursor: pointer;
  margin-top: -5px;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #9198ae;
  cursor: pointer;
}

/* Customize the label (the container) */
.checkmark-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 5px 0;
  align-items: center;
}

/* checkmark color container */
.checkmark-container.color-checkmark-container {
  cursor: initial;
  flex-direction: row;
  justify-content: flex-start;
}

/* Hide the browser's default checkbox */
.checkmark-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: relative;
  margin-right: 5px;
  height: 20px;
  width: 20px;
  background-color: #d3d6df;
  background-color: rgba(18, 24, 45, 0.78);
  border-radius: 8px;
  width: 32px;
  height: 16px;
}

/* On mouse-over, add a grey background color */
.checkmark-container:hover input ~ .checkmark {
  background-color: rgb(18, 24, 45);
}

/* When the checkbox is checked, add a blue background */
.checkmark-container input:checked ~ .checkmark {
  /* background-color: #b2b7c6; */
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: block;
}

/* Show the checkmark when checked */
.checkmark-container input:checked ~ .checkmark:after {
  opacity: 1;
  display: block;
  right: 0;
  left: auto;
}

/* Style the checkmark/indicator */
.checkmark-container .checkmark:after {
  /* left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); */
  border: none;
  background: #ffffff;
  opacity: 0.6;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  left: 0;
  top: 0;
}

.stats-container .sort-select-container {
  margin-bottom: 0;
}

.stats-container .sort-select-container > svg {
  width: 16px;
  height: 16px;
  fill: rgba(0, 0, 0, 0.5);
  margin-left: 5px;
}

#language-select,
#sort-select {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}

.stats-block > h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g_id_signin {
  margin-top: 16px;
}

/* basic mobile switch */
@media (min-width: 1024px) {
  .mobile-yes {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .mobile-no {
    display: none !important;
  }
}

.flex-expand > * {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.stats-block-container {
  margin-left: -20px;
  margin-right: -20px;
}

.stats-block {
  width: 33.33%;
  margin-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.stats-block.w-50 {
  width: 50%;
}

.filters-container-submit {
  margin-top: 20px;
}

.filters-container .settings-item {
  margin: 10px 0;
}

.tactics_bar {
  width: 140px;
  height: 8px;
  background: repeating-linear-gradient(to right, #ddd, #ddd 4%, transparent 4%, transparent 5%), repeating-linear-gradient(to right, #00a88b, #00a88b 8%, transparent 8%, transparent 10%);

  background-size: 200%, 100%;
  background-position: -100%;
  background-repeat: repeat-y;
}

.tactic {
  font-weight: bold;
}

.stat-bar {
  position: relative;
  height: 8px;
  border-radius: 5px;
  background: #e6e6e6;
  /* margin-right: 30px; */
  margin-bottom: 15px;
}

.stat-bar > div {
  height: 100%;
  border: 0;
  left: 0;
  top: 0;
  border-radius: 5px;
}

.stats-block h4 .stat {
  padding: 1px 3px;
  margin-right: 10px;
}

.main-stats-cards-container {
  align-items: flex-start;
}

h3,
h4 {
  margin: 15px 0;
}

h3:first-child,
h4:first-child {
  margin-top: 0;
}

.cards-container {
  margin-left: -20px;
  margin-right: -20px;
}

.cards-container > .player-main-column {
  margin-left: 20px;
  margin-right: 20px;
  width: auto;
}

.swiper-container {
  /* margin-left: -20px; */
  /* margin-right: -20px; */
  overflow-x: auto;
  display: flex;
  padding-bottom: 5px;
}

.swiper-container-outer {
  padding-bottom: 20px;
}

.swiper-container:not(.slim) > * {
  padding-left: 20px;
  padding-right: 20px;
}

.custom-scroll-container::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: none;
}

.custom-scroll-container::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #efefef;
  border: 1px solid #e0e0e0;
}

.custom-scroll-container::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #d0d0d0;
}

.custom-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #c0c0c0;
}

.swiper-container::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: none;
}

.swiper-container::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #efefef;
  border: 1px solid #e0e0e0;
}

.swiper-container::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #d0d0d0;
}

.swiper-container::-webkit-scrollbar-thumb:hover {
  background-color: #c0c0c0;
}

.bg-dark .swiper-container::-webkit-scrollbar-track {
  background-color: #404067;
  border: 1px solid #494971;
}

.bg-dark .swiper-container::-webkit-scrollbar-thumb {
  background-color: #575782;
}

.bg-dark .swiper-container::-webkit-scrollbar-thumb:hover {
  background-color: #5e5e82;
}

.player-card-container .player-card {
  /* display: inline-block; */
  margin: 10px;
}

.player-card-container .player-card:hover,
.player-card.clickable:hover {
  transform: translateY(-2px);
}

.player-card-container .player-card:first-child,
.player-card-container a:first-child > .player-card {
  /* margin-left: 20px; */
}

.player-card-container a:first-child > .player-card {
  /* margin-left: 20px; */
}

.player-card-container a:last-child > .player-card {
  /* margin-right: 20px; */
}

.player-card-container .player-card:last-child,
.player-card-container a:last-child > .player-card {
  /* margin-right: 20px; */
}

.player-card-container {
  padding-left: 10px;
  padding-right: 10px;
  /* margin-left: -10px; */
  /* white-space: nowrap; */
  display: flex;
}

.player-card {
  width: 182px;
  height: 256px;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  overflow: hidden;
  user-select: none;
  margin: 0;
  padding: 0;
  background-size: cover;
}

.player-card-shadow {
  box-shadow: 0 0 32px rgb(0 0 0 / 5%), 0 0 16px rgb(0 0 0 / 10%), 0 0 8px 0px rgb(0 0 0 / 20%), 0 0 2px 0px rgb(0 0 0 / 40%);
}

.player-info-column .player-card {
  margin: 0 auto 20px;
}

.player-card-name {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 28px;
  font-size: 21px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 6;
  font-family: "DINPro-Medium", "Open Sans", sans-serif;
  color: #fff;
  text-transform: uppercase;
  line-height: 28px;
  white-space: nowrap;
}

.player-card-name.no-background {
  background: none;
}

.player-card-ovr {
  position: absolute;
  text-align: center;
  font-size: 36px;
  font-family: "DINPro-Bold", "Open Sans", sans-serif;
  font-weight: bold;
  color: #fff;
  width: 66px;
  top: 30px;
  left: 0;
  z-index: 4;
}

span.player-card-ovr-hint {
  font-size: 22px;
  vertical-align: top;
}

.player-card-position {
  position: absolute;
  text-align: center;
  font-size: 25px;
  font-family: "DINPro-Bold", "Open Sans", sans-serif;
  font-weight: bold;
  color: #fff;
  width: 66px;
  top: 2px;
  left: 0;
  z-index: 4;
}

.player-card-teamlogo {
  position: absolute;
  width: 34px;
  left: 16px;
  top: 79px;
  z-index: 4;
}

.player-card-teamlogo.default {
  top: 121px;
}

.player-card-image-featured {
  width: 256px;
  height: 256px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.player-card-image {
  width: 128px;
  height: 128px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

.player-card-image-featured.editable {
  max-width: 256px;
  max-height: 256px;
  width: auto;
  height: auto;
}

.player-card-image.editable {
  max-width: 128px;
  max-height: 128px;
  width: auto;
  height: auto;
}

.player-card-ball {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 71px;
  left: 12px;
  z-index: 3;
}

.player-card-overlay {
  background-image: url(/pes-2021/graphics/cards/overlay.png);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 5;
}

.stats-col-1,
.stats-col-2 {
  font-family: "DINPro-Bold", "Open Sans", sans-serif !important;
  font-size: 21px;
  color: #fff;
  position: absolute;
  top: 138px;
  z-index: 5;
  font-weight: bold;
}

.player-card-stats-name {
  font-family: "DINPro-Medium", "Open Sans", sans-serif !important;
  font-weight: normal;
}

.stats-col-1 {
  left: 10px;
}

.stats-col-2 {
  left: 94px;
}

.stats-col-bg {
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  top: 128px;
  height: 100px;
  width: 100%;
  z-index: 4;
}

.player-card-large .stats-col-bg {
  background: rgba(0, 0, 0, 0.55);
}

.player-card-clicktrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* cursor: pointer; */
}

button.player-card-download-button {
  position: absolute;
  right: 0;
  z-index: 10;
  display: none;
  background: none;
  border: none;
  padding: 5px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 100ms ease-in-out;
}

.player-card:hover button.player-card-download-button {
  display: initial;
}

button.player-card-download-button:hover {
  background-color: rgba(0, 0, 0);
}

button.player-card-download-button svg {
  fill: #fff;
  margin: 0;
  width: 16px;
  height: 16px;
}

.touch button.player-card-download-button {
  display: initial;
}

.player-card abbr {
  text-decoration: none;
}

.player-card-frame,
.player-card-frame-fg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: 100%;
}

.player-card-frame-fg {
  z-index: 5;
}

.player-card.efootball-2022 .player-card-name {
  font-family: "eFootball-Sans", "Open Sans", sans-serif;
  background: none;
  bottom: initial;
  top: 133px;
  font-size: 21px;
  text-overflow: clip;
  text-transform: none;
}

.player-card.efootball-2022 .player-card-ovr {
  font-family: "eFootball-Stencil", "Open Sans", sans-serif;
  font-size: 35px;
  font-weight: normal;
  top: 0px;
  left: 0;
  width: 66px;
}

.player-card.efootball-2022 .player-card-position {
  font-family: "eFootball-Sans", "Open Sans", sans-serif;
  top: 35px;
  left: 0px;
  font-size: 20px;
  width: 66px;
}

.player-card.efootball-2022 .player-card-image {
  width: 105px;
  height: 105px;
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
}

.player-card.efootball-2022 img.player-card-teamlogo {
  left: 13px;
  top: 66px;
  width: 38px;
  height: 38px;
}

.player-card-stars {
  display: flex;
  justify-content: center;
  top: 123px;
  color: #909090;
  gap: 2px;
  position: absolute;
  width: 100%;
}

.player-card-stars > svg {
  width: 12px;
  height: 12px;
}

.player-card-stars svg.filled {
  color: #feff05;
}

.player-card-details {
  font-family: "eFootball-Sans", "Open Sans", sans-serif;
  display: flex;
  color: #ffffff;
  font-size: 11px;
  gap: 6px;
  width: 100%;
  position: absolute;
  justify-content: center;
  top: 161px;
}

.player-card-level__container {
  font-family: "eFootball-Sans", "Open Sans", sans-serif;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  gap: 1px;
  width: 100%;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 178px;
}

span.player-card-level__label {
  color: #c0c0c0;
  font-size: 14px;
  line-height: 1;
}

span.player-card-level__indicator {
  font-size: 18px;
}

.player-card-country {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 183px;
  left: 133px;
}

.player-card-gamelogo {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 219px;
  left: 133px;
}

.player-card-condition {
  position: absolute;
  left: 80px;
  bottom: 8px;
  width: 22px;
  height: 22px;
}

.player-card-league {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 185px;
  left: 20px;
}

.player-card-feet {
  color: #464646;
  position: absolute;
  top: 224px;
  left: 20px;
  display: flex;
  gap: 2px;
}

.player-card-feet > svg.active {
  color: #fff;
}

.player-card-feet > svg {
  width: 12px;
  height: 21px;
}

#disqus_thread {
  width: 1000px;
  max-width: 100%;
}

/* position block */
.player-positions-new {
  display: flex;
  flex-flow: column;
  margin-top: 20px;
  margin-bottom: 20px;
}

.player-positions-row {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 5px;
  align-items: center;
}

.player-positions-item {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px;
  width: 50px;
}

.player-positions-item.main {
  border: 2px solid #000;
}

.player-positions-item span.pos {
  margin: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.125);
  font-weight: bold;
  text-align: center;
}

.player-positions-item .stat {
  border: 0;
  border-radius: 0;
}

.player-positions-row .stat_tier_3,
.player-positions-row .stat_tier_2_5 {
  background: rgba(250, 250, 250, 0.2);
}

.player-positions-row .stat_tier_2,
.player-positions-row .stat_tier_1_5 {
  background: rgba(250, 250, 250, 0.36);
}

.player-positions-row .stat_tier_1,
.player-positions-row .stat_tier_0_5 {
  background: rgba(250, 250, 250, 0.52);
}

.player-positions-row .stat_tier_0 {
  background: rgba(250, 250, 250, 0.7);
}

h1 {
  font-size: 20px;
}

h1:first-child {
  margin-top: 0;
}

.games-container {
  display: flex;
  padding-bottom: 10px;
}

.games-container > .game {
  margin-left: 10px;
  margin-right: 10px;
}

.games-container > .game:first-child {
  margin-left: 0;
}

.games-container img {
  height: 250px;
}

.gumroad-container {
  overflow: hidden;
}

.gumroad-container-compact {
  max-width: 500px;
}

.gumroad-container > * {
  float: left;
}

.button-plus {
  padding: 5px 8px;
  /* background-color: #dcdee7; */
  color: #000;
  border: 2px solid #ba8710;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: all 100ms ease-in-out;
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  border-radius: 5px;
  font-size: 16px;
}

.button-plus:hover {
  background-color: #ba8710;
  border-color: transparent;
  color: #000;
}

.button-plus img {
  width: 20px;
  height: 20px;
  margin: 0;
}

.button-plus > * {
  vertical-align: middle;
}

.max-100 {
  max-width: 100%;
}

.flex-grid {
  display: flex;
}

.flex-grid-header {
  font-size: 18px;
  margin-bottom: 15px;
  max-width: 500px;
}

.flex-grid-centered {
  text-align: center;
}

.flex-grid > div {
  flex: 1;
  border-right: 1px solid lightgrey;
}

.flex-grid > div:last-child {
  border-right: none;
}

/* main */
body {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  /* color: #303030; */
  margin: 40px 0 0 0;
  padding: 0;
  line-height: 1.2;
  background: #f2f2f3;
}

.main-wrapper {
  background: #fafafa;
  background: var(--bg-main);
}

.native-ad {
  text-align: center;
  margin: 20px 0;
}

h2 {
  font-size: 18px;
  margin: 16px 0;
}

h3 {
  font-size: 16px;
  margin: 12px 0;
}

h2:first-child,
.anchor + h2 {
  margin-top: 0;
}

p {
  max-width: 1200px;
  line-height: 1.5;
}

p:last-child {
  margin-bottom: 0;
}

p.note {
  background-color: #ffffcc;
  border-left: 8px solid #ffeb3b;
  padding: 8px 12px;
  max-width: 100%;
}

p.note-positive {
  background-color: #dbffdb;
  border-left: 8px solid #0aff0a;
  padding: 8px 12px;
  max-width: 100%;
}

p.warning {
  background-color: #ffdbdb;
  border-left: 8px solid #ff0a0a;
  padding: 8px 12px;
  max-width: 100%;
}

.main-header {
  margin-top: 0;
}

.team-table .namelink,
.squad-table .namelink {
  vertical-align: middle;
}

#ajax-loader {
  padding: 15px;
}

/* important leagues */

.important-leagues {
  display: flex;
  gap: 12px;
}

.important-leagues .top-logo {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

.important-leagues img {
  width: 80px;
  height: 80px;
}

/* login / register forms */

.main-page form {
  overflow: hidden;
  line-height: 1.5;
}

.login-container {
  background: white;
  margin: 0 auto;
  padding: 30px;
  width: 512px;
  overflow: hidden;
}

input.login-input {
  width: 100%;
  margin: 5px 0 15px;
  padding: 5px;
  border: 1px solid #ddd;
}

.card-edit-button {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 14px;
  color: #e0e0e0 !important;
  margin-top: 12px;
}

.card-edit-button:hover {
  color: #ffffff !important;
}

.card-edit-button > svg {
  width: 16px;
  height: 16px;
}

.card-edit-button > span {
  margin-left: 8px;
}

.button.outline-button {
  background-color: transparent;
  border: 2px solid #9da3b9;
  color: inherit;
}

.bg-dark .outline-button:hover {
  border-color: #ffffff;
  background-color: initial;
}

.button img {
  width: 20px;
  height: 20px;
  margin: 0 5px 0 0;
}

button svg,
button img {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

.button.right {
  float: right;
}

.button.left {
  float: left;
}

.button.bold {
  background: #dc0014;
  color: #fafafa;
  border-radius: 0;
}

.button.bold:hover {
  background: #303030;
}

.button.disabled {
  cursor: default;
}

.button.active {
  background-color: #bbbfd2;
}

.button.active:hover {
  background-color: #aaaec2;
}

p.info-message {
  background: rgba(0, 0, 0, 0.13);
  padding: 10px;
  margin: 0 0 20px;
}

p.error-message {
  background: rgba(255, 0, 0, 0.33);
  padding: 10px;
  margin: 0 0 20px;
}

p.success-message {
  background: rgba(0, 255, 0, 0.33);
  padding: 10px;
  margin: 0 0 20px;
}

/* login hint */

.header {
  overflow: visible;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-icon {
  /* margin-top: 7px; */
  height: 40px;
  cursor: pointer;
}

.search-icon > div {
  background-image: url(http://i.imgur.com/l2AJXcD.png);
  background-size: 256px 256px;
  width: 21px;
  height: 22px;
  background-position: 0 -145px;
  margin: 9px;
}

.login-hint {
  height: 40px;
  cursor: pointer;
  position: relative;
}

.login-hint img {
  width: 32px;
  height: 32px;
  margin-top: 4px;
}

/* .login-dropdown {
    margin: 0;
    padding: 0;
    background: #FAFAFA;
    list-style: none;
    position: absolute !important;
    right: 0;
    display: none;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
} */

.login-hint:hover .login-dropdown {
  display: block;
}

.login-dropdown-section {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.login-hint .login-dropdown-section:last-child {
  border-bottom: none;
}

.login-hint ul a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
}

.login-hint ul a:hover {
  background: #f1f1f1;
}

/* Account tabs */
ul.tab-header {
  list-style: none;
  padding: 0;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin: 0 0 20px;
  font-size: 0;
}

ul.tab-header:first-child {
  margin-top: 10px;
}

ul.tab-header > li {
  float: none;
  display: inline-block;
}

.tab-header > li > a {
  text-decoration: none;
  padding: 10px 20px;
  display: block;
  transition: background 70ms ease-out;
  -webkit-transition: background 70ms ease-out;
  -moz-transition: background 70ms ease-out;
  -o-transition: background 70ms ease-out;
  border-bottom: 2px solid transparent;
  font-size: 16px;
}

.tab-header > li > a:hover {
  background: #f7f7f7;
}

.tab-header > li.active > a {
  background: #f7f7f7;
  border-bottom: 2px solid #dc0014;
  box-sizing: border-box;
}

table.basic-table {
  border-collapse: collapse;
  border-color: #e0e0e0;
  border: none;
}

.basic-table td {
  padding: 10px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  transition: background 70ms ease-out;
  -webkit-transition: background 70ms ease-out;
  -moz-transition: background 70ms ease-out;
  -o-transition: background 70ms ease-out;
  /*white-space: nowrap;*/
}

.basic-table tr:first-child {
  font-weight: bold;
}

.basic-table td:hover {
  background: #f5f5f5;
}

.basic-table td:last-child {
  border-right: none;
}

.basic-table tr:last-child td {
  border-bottom: none;
}

/* kits */

.kit-container {
  overflow: hidden;
}

.kit-container > div {
  float: left;
  margin: 0 15px 15px 0;
  position: relative;
  width: calc((100% - 15px * 4) / 5);
  font-size: 0;
}

.kit-container > div:nth-child(5n) {
  margin-right: 0;
}

.kit-container img {
  width: 100%;
}

.kit-container span.name {
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  background: rgba(0, 0, 0, 0.57);
  position: absolute;
  bottom: 0;
  color: white;
  padding: 5px;
  text-align: center;
}

.kit-container .delete-warning {
  font-size: 16px;
  position: absolute;
  background: hsla(0, 0%, 0%, 0.4);
  color: #fff;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 3px 10px;
  border-left: 6px solid hsl(0, 92%, 45%);
}

.anchor {
  padding-top: 0;
  top: -50px;
  visibility: hidden;
  display: block;
  position: relative;
}

.video-container-outer {
  max-width: 800px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  cursor: pointer;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.lightboxable {
  cursor: pointer;
}

/* versions list */

.versions-list {
  /* overflow-x: auto; */
  /* overflow-y: hidden; */
  /* white-space: nowrap; */
  /* margin: -5px; */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.versions-list a {
  text-decoration: none;
  /* display: flex; */
}

.versions-list-el {
  /* margin: 5px; */
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  font-size: 15px;
  height: 24px;
}

.versions-list-el.versions-list-el-button {
  padding-left: 8px;
}

.versions-list-el .club-flag {
  width: 16px;
  height: 16px;
}

.versions-list-el .club-flag:first-child {
  margin-left: 8px;
}

.bg-dark li.versions-list-el {
  background: #49496e;
}

li.versions-list-el:hover {
  background: #f0f0f0;
}

.bg-dark li.versions-list-el:hover {
  background: #ffffff;
  color: #000000;
}

img.versions-list-flag.league {
  background: #303030;
  padding: 2px;
  border-radius: 3px;
}

.player-condition {
  background-color: #202020;
  border: 2px solid rgba(0, 0, 0, 0.125);
  font-weight: bold;
  text-align: center;
  padding: 2px 5px;
  border-radius: 5px;
  display: inline-block;
}

.player-condition-A {
  color: #02fec5;
}
.player-condition-B {
  color: #a8fe02;
}
.player-condition-C {
  color: #edc216;
}
.player-condition-D {
  color: #fbb206;
}
.player-condition-E {
  color: #fd3730;
}

.stat {
  color: #303030;
}

.stat.white {
  color: inherit;
}

span.change {
  font-weight: bold;
}

.change.plus {
  color: red;
}

.change.plus:before {
  content: "+";
}

.change.minus {
  color: blue;
}

.change.minus:before {
  content: "-";
}

ul.footer-social-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
}

ul.footer-social-list:last-child {
  /* margin-bottom: 0; */
}

ul.footer-social-list > li {
  display: flex;
  align-items: center;
  float: left;
  margin-bottom: 5px;
  padding-right: 20px;
  margin-right: 20px;
}

ul.footer-social-list > li {
  display: flex;
  align-items: center;
  float: left;
}

svg.footer-social-list-img {
  width: 18px;
  height: 18px;
  /* fill: #fff; */
  margin-right: 5px;
}

ul.footer-social-list > li:not(:last-child) {
  border-right: 1px solid #6f7690;
}

span.footer-copyright {
  font-size: 14px;
  color: #8a9199;
}

/* quicklinks */
.quicklinks {
  overflow: hidden;
  margin: 10px 0;
  padding: 0;
}

.quicklinks > li {
  float: left;
  white-space: nowrap;
  margin: 0 5px 7px 0;
  padding-right: 5px;
  border-right: 1px solid #7c7c7c;
  list-style: none;
}

.comparison-remove {
  color: #e0e0e0;
  font-weight: normal;
  font-size: 0.7em;
  cursor: pointer;
}

.main-container {
  background: #fafafa;
  background: var(--bg-main);
}

.top-data td {
  line-height: 1.5;
}

span.shortlist-remove:hover {
  color: #dc0014;
}

span.shortlist-remove {
  font-weight: bold;
  cursor: pointer;
  padding: 4px;
  display: block;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left td {
  padding: 0;
}

.news-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  overflow-x: auto;
}

h2.news-subheader {
  clear: both;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}

h2.news-subheader:first-child {
  margin-top: 0;
}

.news-block {
  /* position: relative; */
  width: 33.33333%;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}

.news-link {
  display: block;
  position: relative;
  text-decoration: none;
}

.news-link:nth-child(3n + 1) .news-block {
  /* clear: both; */
}

.news-link:last-child > .news-block {
  /* margin: 0 0 1% 0; */
}

/* .news-block-img-container {
  border-radius: 10px;
  overflow: hidden;
} */

.news-block-dummy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  z-index: 2;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
}

.news-link:hover .news-block-dummy {
  opacity: 0.25;
}

.news-block:hover .news-block-img {
  /* opacity: 0.8; */
}

.news-block-header {
  font-size: 16px;
  margin-top: 12px;
  bottom: 0;
  z-index: 1;
  font-weight: bold;
}

.news-block-meta {
  margin-top: 8px;
  opacity: 0.8;
  font-size: 15px;
}

.news-block-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  overflow: hidden;
}

.news-container.align-top .news-block-img {
  background-position: top;
}

.news-container.compact a.news-link {
  overflow: hidden;
}

.news-container.compact .news-block-img {
  width: 148px;
  height: 148px;
}

.news-container.compact .news-block-img-container {
  float: left;
  margin-right: 10px;
}

.news-container.compact .news-block-header {
  font-size: 16px;
  padding-top: 0;
}

.news-container.compact .news-block-meta {
  font-size: 12px;
}

.sortable thead {
  cursor: pointer;
}

.slider-container {
  float: left;
  width: 195px;
  margin: 0 10px;
  padding: 8px 10px 8px 0;
}

.text-container {
  float: left;
  max-width: 100%;
  margin: 0 10px;
  padding: 8px 10px 8px 0;
}

.text-container,
.slider-container {
  /* max-width: 40%; */
  /* height: 60px; */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

select.search-value,
input.search-value {
  max-width: 100%;
}

label {
  display: block;
}

.search-pos,
.search-playing-style {
  cursor: pointer;
}

.area-header-container {
  display: flex;
  align-items: center;
  /* overflow: hidden; */
}

.search-area-container {
  background-color: #f0f0f0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px;
}

.search-area-container:not(.open) {
  display: none;
}

.search-playing-style {
  font-weight: bold;
  color: #aaa;
  width: 180px;
  float: left;
}

.search-playing-style.pes-2015 {
  width: 210px;
}

.search-playing-style-active {
  color: #000;
}

.search-label {
  white-space: nowrap;
}

.search-label-active {
  font-weight: bold;
}

.search-value {
  margin-top: 8px;
}

/* search options */
ul#search-options {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  align-items: center;
}

ul#search-options > h3 {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#search-options li {
  display: flex;
  padding: 4px 8px;
  border-radius: 16px;
  cursor: pointer;
  gap: 8px;
  background-color: #f0f0f0;
  color: #000000;
  align-items: center;
  border: 1px solid #e0e0e0;
  font-size: 13px;
}

#search-options li:hover {
  background-color: #e0e0e0;
}

#search-options li.subtle {
  background: #323256;
  color: #ffffff;
  border-color: transparent;
}

#search-options li.subtle:hover {
  background-color: #434884;
}

#search-options li svg {
  width: 16px;
  height: 16px;
}

span.red-x {
  font-weight: bold;
  background: #ffffff;
  color: #000000;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-block;
  padding: 4px;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
}

/* header */
.header-container {
  width: 100%;
  background-color: #fafafa;
  border-bottom: 1px solid #eaeaea;
  /* box-shadow: 0 2px 4px -2px rgba(17, 17, 17, 0.15); */
  position: fixed;
  top: 0;
  z-index: 500;
}

.header {
  height: 40px;
  width: auto;
  max-width: 1400px;
  margin: 0 auto;
  overflow: visible;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.header.fw {
  max-width: initial;
  margin-left: 20px;
  margin-right: 20px;
}

.header-note {
  background-color: rgb(220, 222, 231);
}

.header-note.warning {
  background-color: #f11e1e;
  color: #ffffff;
}

.header-note > .header {
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-note.important {
  background: rgb(212 20 38);
  color: #ffffff;
  padding: 12px 0;
}

.header-note-button {
  fill: #8d909e;
  padding: 5px;
  background: 0;
  border: 0;
  font-size: 0;
  transition: fill 100ms ease-in-out;
}

.header-note-button:hover {
  fill: #6f7386;
}

.header-note-button svg {
  width: 16px;
  height: 16px;
}

.header-note-content {
  padding: 10px 0;
}

/*
.header-note.note {
background: #ffffb0;
}
*/

.header-note .namelink {
  border-color: rgba(30, 30, 30, 0.3);
}

.header-note.important .namelink:hover {
  border-color: #f1f1f1;
}

.header-note.important > .header > a {
  /* color: #f1f1f1; */
  text-decoration: none;
  border-bottom: 2px solid;
  font-weight: bold;
}

/* footer */
.footer-container {
  background-color: #f2f2f3;
  border-top: 1px solid #cbcbd3;
}

.footer {
  width: auto;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
}

.shortlist-button,
.site-logo > div,
.menu-mobile > div,
.compare-button,
.change-ovr,
.squad-change,
.kit-container .open-menu div {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM5OTkiIGQ9Ik05LjQ4NiA0NTMuNDk0SDQuNTU0Yy0uMDM3LjI5Ny0uMDYzLjU5NC0uMDgzLjg5Mmw0LjkyLS4wMDRjLjAzLS4yOTYuMDUtLjU5NC4xLS44ODh6bTIzLjM1LTEuNDNsLTcuMTI1IDcuMDkyIDQuNDUtLjAwNGMtLjQgMS4wOTItLjk4IDIuMTEtMS43NCAzLjAzNi0xLjgxIDIuMjE2LTQuMzkgMy41OTctNy4yNSAzLjg4OC0yLjg2LjI5LTUuNjYtLjU0My03Ljg5LTIuMzQ4LTEuNjUtMS4zNC0yLjc5LTMuMDc0LTMuNDEtNC45NTVsLTIuNzEgMi42OTctMi4yNS0yLjIzYy43OSAzLjE0IDIuNTYgNi4wNiA1LjI4IDguMjU4IDIuODEgMi4yNzMgNi4yNSAzLjQ4NyA5LjgyIDMuNDk3LjU2IDAgMS4xMS0uMDI2IDEuNjctLjA4MyA0LjE2LS40MjMgNy45MS0yLjQzIDEwLjU1LTUuNjUzIDEuNDYtMS43OSAyLjUtMy45IDMuMDUtNi4xMmw0LjcyLS4wMS03LjE0LTcuMDh6Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM5OTkiIGQ9Ik0zMC4xMjQgNDUyLjMzMmwyLjcxMy0yLjcgMi4yMSAyLjE5M2MtLjc5Mi0zLjEyNC0yLjUzNy02LjAzNC01LjI0LTguMjIyLTIuODA4LTIuMjczLTYuMjQtMy40ODYtOS44MTMtMy40OTctLjU1MiAwLTEuMTEuMDI2LTEuNjY3LjA4My00LjE2LjQyLTcuOTA2IDIuNDMtMTAuNTQ3IDUuNjUtMS40NiAxLjc4LTIuNDk2IDMuODktMy4wNDYgNi4xMUguMDEybDcuMTQgNy4wOCA3LjEyNi03LjFIOS44MzZjLjQwNy0xLjEuOTgtMi4xMSAxLjczOC0zLjA0IDEuODE2LTIuMjIgNC4zOS0zLjYgNy4yNS0zLjg5IDIuODYyLS4yOSA1LjY2NS41NCA3Ljg5NCAyLjM0IDEuNjU2IDEuMzQzIDIuNzg4IDMuMDggMy40MDYgNC45NnoiLz48cGF0aCBmaWxsPSIjOTk5IiBkPSJNMzkuOTg2IDQ4OC40OTNsLTE0LjY4Ni0uODEtNS4zMDgtMTMuNzE2LTUuMzA4IDEzLjcxNy0xNC42ODYuODEgMTEuNDA1IDkuMjg1LTMuNzY4IDE0LjIxIDEyLjM1Ny03Ljk4IDEyLjM1NyA3Ljk3LTMuNzctMTQuMjIiLz48cGF0aCBmaWxsPSIjRTJDMzFBIiBkPSJNOTUuOTg2IDQ4OC40OTNsLTE0LjY4Ni0uODEtNS4zMDgtMTMuNzE2LTUuMzA4IDEzLjcxNy0xNC42ODYuODEgMTEuNDA1IDkuMjg1LTMuNzY4IDE0LjIxIDEyLjM1Ny03Ljk4IDEyLjM1NyA3Ljk3LTMuNzctMTQuMjIiLz48cGF0aCBmaWxsPSIjREMwMDE0IiBkPSJNNjAuNTM2IDM1NS45MDZoLTQuMzEzYy01LjYzMyAwLTguNDkgMy4wNS04LjQ5IDkuMDYzdjEwLjU2YzAgMS4zNi4xNSAyLjQ4LjQ0NCAzLjM0LjMuODcuNzk0IDEuNTkgMS40NyAyLjE0LjY1Ni41MyAxLjcyIDEuMTkgMy4xNiAxLjk2bDYuNTM1IDMuNjZjLjg0NS41MSAxLjQ2NC45NCAxLjgzOCAxLjI3LjMzMi4yOS41Ljg5LjUgMS43N3Y4Ljc3YzAgMS44OC0uODIgMi44LTIuNTEgMi44aC0xLjIyMmMtMS45MyAwLTIuODctLjkyLTIuODctMi44di0zLjAzaC03LjM0NHYyLjgxYzAgNi40NDIgMi44NTYgOS43MSA4LjQ5IDkuNzFoNC4yNGM1LjY4IDAgOC41Ni0zIDguNTYtOC45MnYtMTFjMC0xLjg3LS4xNzItMy4xMTctLjUyNy0zLjgwNC0uMzUtLjY3NS0uODQyLTEuMjU3LTEuNDY1LTEuNzMtLjYwNC0uNDYtMS42NC0xLjEwNi0zLjA4NC0xLjkyNWwtNi41My0zLjUxNWMtLjg1LS41Mi0xLjQ2OC0uOTQ2LTEuODQtMS4yNy0uMzMtLjI5LS41LS44ODctLjUtMS43NzV2LTguNTU0YzAtMS45My44OTMtMi44NjQgMi43MjYtMi44NjRoMS4wOGMxLjg4IDAgMi43OTYuOTM3IDIuNzk2IDIuODd2NC43NWg3LjM0NXYtNS4yNTVjMC02LjAxLTIuODU3LTkuMDYtOC40OS05LjA2em0tNDcuNzMyIDBILjAwMnY1Mi4wNmg3LjM0NXYtMTguNjkyaDUuNTNjNS42MzIgMCA4LjQ4OC0zLjAyNSA4LjQ4OC04Ljk5MlYzNjQuOTdjMC02LjAxNC0yLjg4LTkuMDY0LTguNTYtOS4wNjR6bTEuMjE3IDIzLjg3MmMwIDEuODgzLS44MiAyLjc5OC0yLjUxIDIuNzk4SDcuMzV2LTE5Ljk3M2gzLjgwNGMxLjkzMiAwIDIuODcuOTE1IDIuODcgMi43OTh2MTQuMzh6bTEyLjM3IDI4LjE4N2gxNy41NXYtNi42OThIMzMuNzNWMzg0LjUzaDkuMDU3di02LjY5OEgzMy43M3YtMTUuMjI4aDEwLjIwN3YtNi42OTdIMjYuMzg0djUyLjA1OHptNjIuMTgtMjIuNTc1bC02LjIxLTI5LjQ4M2gtOC4wM3Y1Mi4wNmg3LjM1bC0uNjctMzEuNjU1IDQuNzMgMjIuMzFoNS42OGw0LjczLTIyLjMxLS42NyAzMS42NTRoNy4zNXYtNTIuMDZIOTQuOGwtNi4yMiAyOS40ODN6bTk1LjE3IDIyLjU3NWgxNy41NnYtNi42OThoLTEwLjIxVjM4NC41M2g5LjA2di02LjY5OGgtOS4wNnYtMTUuMjI4aDEwLjIxdi02LjY5N2gtMTcuNTZ2NTIuMDU4em0zOS44Ny0yMS41OWMyLjctMS4yNzIgNC4wNy00LjE5MiA0LjA3LTguNjgyVjM2NC45N2MwLTYuMDE0LTIuNzMtOS4wNjMtOC4xMy05LjA2M2gtMTMuNzR2NTIuMDZoNy4zNXYtMjAuODVoMy43N2w0LjQ5IDIwLjY3NC4wNC4xOGg3bC00Ljg0LTIxLjU5em0tMy4yOC05LjExMmMwIDIuMzY2LS45NCAzLjUxNy0yLjg3IDMuNTE3aC00LjN2LTE4LjE3Nmg0LjMxYzEuOTMgMCAyLjg3IDEuMTUgMi44NyAzLjUxN3YxMS4xNXptLTYwLjY3LTE0LjY2aDYuNjJ2NDUuMzYyaDcuMzV2LTQ1LjM2aDYuNjJ2LTYuNjk4aC0yMC41N3Y2LjY5N3ptLTM3LjUxLTYuNjk3aC01LjE3Yy01LjYzIDAtOC40OSAzLjA1LTguNDkgOS4wNjN2NDIuOTloNy4zNXYtMTguOTFoNy40N3YxOC45aDcuMzV2LTQyLjk5YzAtNi4wMi0yLjg2LTkuMDctOC40OS05LjA3em0xLjE1IDI2LjQ1NGgtNy40NlYzNjUuNGMwLTEuODgyLjkyLTIuNzk3IDIuOC0yLjc5N2gxLjg3YzEuODggMCAyLjguOTE1IDIuOCAyLjc5OHYxNi45NnptMjUuMS0yNi40NTRoLTQuMzFjLTUuNjMgMC04LjQ5IDMuMDUtOC40OSA5LjA2M3YxMC41NmMwIDEuMzYuMTUgMi40OC40NSAzLjM0LjMuODcuNzk2IDEuNTkgMS40NyAyLjE0LjY1OC41MyAxLjcyIDEuMTkgMy4xNiAxLjk2bDYuNTM3IDMuNjZjLjg0LjUxIDEuNDYuOTQgMS44MzQgMS4yNy4zMy4yOS41Ljg5LjUgMS43N3Y4Ljc3YzAgMS44OC0uODIgMi44LTIuNTEgMi44aC0xLjIyYy0xLjkzIDAtMi44Ny0uOTItMi44Ny0yLjh2LTMuMDNoLTcuMzV2Mi44MWMwIDYuNDQyIDIuODU2IDkuNzEgOC40OSA5LjcxaDQuMjRjNS42OCAwIDguNTYtMyA4LjU2LTguOTJ2LTExYzAtMS44Ny0uMTcyLTMuMTE3LS41My0zLjgwNC0uMzUtLjY3NS0uODQtMS4yNTctMS40NjItMS43My0uNjA0LS40Ni0xLjY0LTEuMTA2LTMuMDg0LTEuOTI1bC02LjUzLTMuNTE1Yy0uODUtLjUyLTEuNDY1LS45NDYtMS44NC0xLjI3LS4zMy0uMjktLjQ5Ni0uODg3LS40OTYtMS43NzV2LTguNTU0YzAtMS45My44OS0yLjg2NCAyLjcyNC0yLjg2NGgxLjA4YzEuODg0IDAgMi44LjkzNyAyLjggMi44N3Y0Ljc1aDcuMzQ1di01LjI1NWMwLTYuMDEtMi44NTYtOS4wNi04LjQ5LTkuMDZ6Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM5OTkiIGQ9Ik0wIDI1NC45Mzh2NmgzNHYtNkgwem0wIDE4aDM0di02SDB2NnptMCAxMmgzNHYtNkgwdjZ6Ii8+PHBhdGggZmlsbD0iIzlGQTNBNyIgZD0iTTIgMzExYzEuMTA0IDAgMi0uODk2IDItMnMtLjg5Ni0yLTItMi0yIC44OTUtMiAyIC44OTYgMiAyIDJ6bTAgMmMtMS4xMDQgMC0yIC44OTYtMiAycy44OTYgMiAyIDIgMi0uODk2IDItMi0uODk2LTItMi0yem0wIDZjLTEuMTA0IDAtMiAuODk2LTIgMnMuODk2IDIgMiAyIDItLjg5NiAyLTItLjg5Ni0yLTItMnoiLz48L3N2Zz4=);
  background-size: 256px 256px;
}

/* kit menu */
.kit-container .open-menu {
  position: absolute;
  font-size: 15px;
  color: #fafafa;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  transition: background 70ms ease-out;
  -webkit-transition: background 70ms ease-out;
  -moz-transition: background 70ms ease-out;
  -o-transition: background 70ms ease-out;
}

.kit-container .open-menu:hover {
  background: #d0d0d0;
}

.kit-container .open-menu div {
  background-size: 512px 512px;
  width: 4px;
  height: 16px;
  margin: 7px auto;
  background-position: 0 -307px;
}

.kit-container .menu {
  display: none;
  position: absolute;
  background: #fafafa;
  right: 0;
  font-size: 15px;
  top: 30px;
  padding: 0;
  margin: 0;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.kit-container .menu-open .menu {
  display: block;
}

.kit-container .menu-open .open-menu {
  background: #d0d0d0;
}

.kit-container .menu li {
  float: none;
  list-style: none;
  padding: 8px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  transition: background 70ms ease-out;
  -webkit-transition: background 70ms ease-out;
  -moz-transition: background 70ms ease-out;
  -o-transition: background 70ms ease-out;
}

.kit-container .menu li:hover {
  background: #f7f7f7;
}

.kit-container .menu li a {
  text-decoration: none;
}

.kit-container .menu li:last-child {
  border: none;
}

/* navigation */
.site-link {
  display: flex;
}

.site-logo {
  /* float: left; */
  width: 120px;
  height: 40px;
  position: relative;
}

.site-logo > div {
  background-position: 0 -178px;
  width: 115px;
  height: 26px;
  position: absolute;
  left: 0;
  top: 7px;
}

.nav {
  margin: 0;
  padding: 0;
  display: flex;
  /* overflow-x: auto; */
}

.nav > li {
  display: flex;
  list-style: none;
  /* font-size: 18px; */
  transition: background 70ms ease-out;
  -webkit-transition: background 70ms ease-out;
  -moz-transition: background 70ms ease-out;
  -o-transition: background 70ms ease-out;
  position: relative;
}

.nav > li.new:after {
  content: "*new";
  position: absolute;
  color: red;
  text-transform: uppercase;
  top: 1px;
  font-weight: bold;
  right: 1px;
  font-size: 7pt;
}

.nav > li:hover,
.nav > li.active {
  /* background: #fcfcfc; */
}

.nav > li > a,
.nav > li > span {
  font-size: 14px;
  /* font-weight: bold; */
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  transition: color 100ms ease-in-out;
}

.nav > li > span {
  cursor: default;
}

.nav > li:hover > a,
.nav > li:hover > span {
  color: rgba(0, 0, 0, 0.3);
}

.nav > li:hover > .nav2-container,
.login-hint:hover > .nav2-container {
  display: block;
}

.menu-triangle {
  display: none;
  position: absolute;
  left: 50%;
  color: #fdfdfd;
  width: 15px;
  height: 7px;
  z-index: 30;
  margin-top: 9px;
  transform: translate(-50%, 0);
  top: 100%;
}

.nav > li:hover .menu-triangle,
.login-hint:hover > .menu-triangle {
  display: block;
}

.nav2-container,
.login-dropdown {
  display: none;
  position: absolute;
  z-index: 25;
  padding-top: 16px;
  top: 100%;
}

.login-dropdown {
  position: absolute;
  right: 0;
}

.nav2 {
  padding: 10px 0;
  text-transform: none;
  list-style: none;
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  background: #fdfdfd;
  border-radius: 8px;
  box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), 0 -18px 60px -10px rgb(0 0 0 / 3%);
  /* box-shadow: 0 0 0 9px red; */
}

.nav2 > li {
  transition: background-color 100ms ease-in-out;
  -webkit-transition: background-color 100ms ease-in-out;
  -moz-transition: background-color 100ms ease-in-out;
  -o-transition: background-color 100ms ease-in-out;
  will-change: background-color;
}

.nav2 > li:hover {
  background-color: #e6e6e6;
}

.nav2 > li:first-child {
  /* padding-left: 0; */
  border: none;
  font-weight: bold;
}

.nav2.nohighlight > li:first-child {
  font-weight: normal;
}

.nav2 > li:first-child > a,
.nav2 > li > a.important {
  /* color: rgb(227, 0, 20) */
}

.header-games .nav2 > li:nth-child(n) > a {
  color: #303030;
  font-weight: normal;
}

.nav2 > li > a {
  text-decoration: none;
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

img.featured_image {
  height: 14px;
  margin-right: 6px;
}

.nav3 {
  list-style: none;
  top: 0;
  margin: 0;
  padding: 0;
  width: auto;
  white-space: nowrap;
}

.nav2 > li:hover > .nav3 {
  display: block;
}

.nav3 > li {
  padding: 8px 0 8px 0;
}

.nav3 > li > a {
  color: #303030;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.07s;
  -webkit-transition: all 0.07s;
  -moz-transition: all 0.07s;
  -o-transition: all 0.07s;
}

.nav3 > li > a:hover {
  border-color: #303030;
}

li.hidden-touch {
  display: none;
}

#nav.touch li.hidden-touch {
  display: block;
}

.search-headerbar {
  display: inline-block;
}

#input-headerbarsearch {
  width: 150px;
  padding: 4px 8px;
  float: right;
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  transition: width 100ms ease;
}

#input-headerbarsearch::placeholder {
  color: #949494;
}

#input-headerbarsearch:focus {
  outline: none;
  border-color: #323256;
  width: 300px;
  max-width: 98%;
}

/* main page structure */
.main-page {
  width: 98%;
  max-width: 1600px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 17px 0 20px 0;
}

.fw-container {
  position: relative;
  /* overflow: hidden; */
}

@keyframes bgAnimation {
  0% {
    background-position: -30% 20%, 120% 90%;
  }
  100% {
    background-position: -10% 50%, 110% 50%;
  }
}

.bg-dark {
  /* background-image: url(/graphics/background/top-left.png), url(/graphics/background/bottom-right.png); */
  /* background-color: #292f43; */
  /* background: linear-gradient(165deg, rgba(37, 53, 110, 1) 0%, rgba(39, 48, 80, 1) 11%, rgba(64, 53, 93, 1) 83%, rgba(96, 44, 111, 1) 100%); */
  background-color: #323256;
  background-color: var(--bg-dark);
  color: #ffffff;
  animation: 1s ease-out 0s 1 bgAnimation;
}

.bg-gray {
  background-color: #f3f3f3;
  background-color: var(--bg-subtle);
  border-top: 1px solid #cbcbd3;
  border-bottom: 1px solid #cbcbd3;
  border-color: var(--bg-detail-subtle);
}

.bg-dark + .bg-gray,
.bg-gray + .bg-gray {
  border-top: none;
}

.bg-dark .subtle-text {
  opacity: 0.6;
  /* color: #b5b9c9; */
}

.top-container h2 {
  margin-top: 15px;
  margin-bottom: 8px;
}

.description {
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 15px;
}

.container {
  width: 98%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}

.container-large {
  width: auto;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
  /* padding-top: 20px; */
  /* padding-bottom: 20px; */
}

.container-full {
  margin: 0 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.announcement {
  border-top: 25px solid #2d3e7d;
  background-color: #f2f2f5;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.13);
}

.pb-0 {
  padding-bottom: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.mt-0\.5 {
  margin-top: 8px;
}

.mt-1 {
  margin-top: 20px;
}

.mt-2 {
  margin-top: 40px !important;
}

.pt-2 {
  padding-top: 40px !important;
}

.flex {
  display: flex;
}

.p1 {
  padding: 2px;
}

.p2 {
  padding: 4px;
}

.p3 {
  padding: 8px;
}

.p4 {
  padding: 16px;
}

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

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

.flex-centered {
  align-items: center;
  justify-content: center;
}

.logo-main {
  width: 256px;
}

/* player main */
.player-main {
  overflow: hidden;
  margin-top: 15px;
}

.shortlist-button {
  cursor: pointer;
  width: 20px;
  height: 19px;
  margin: 0px 0 0 10px;
  position: absolute;
  background-position: 0 -237px;
}

.top-header .shortlist-button,
.top-header .compare-button {
  position: relative;
  margin-left: 10px;
}

.top-header .ovr {
  margin-right: 5px;
}

.top-header .compare-button {
  margin-left: 5px;
}

.shortlist-button.active {
  background-position: -28px -237px;
}

.change-ovr {
  width: 59px;
  height: 37px;
  position: absolute;
  font-size: 22px;
  color: #fff;
  text-align: center;
  margin-left: 5px;
  background-size: 512px 512px;
}

.change-ovr.plus {
  background-position: 0 -91px;
  line-height: 46px;
}

.change-ovr.minus {
  background-position: 0 -51px;
  line-height: 28px;
}

.squad-change {
  width: 12px;
  height: 11px;
  margin: 6px 5px;
  position: absolute;
}

.squad-change.plus {
  background-position: 0 -105px;
}

.squad-change.minus {
  background-position: 0 -94px;
}

.compare-button {
  cursor: pointer;
  width: 20px;
  height: 17px;
  margin: 0 0 0 35px;
  position: absolute;
  background-position: 0 -219px;
}

.ad-container {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}

.sticky-ad-container {
  margin-right: 30px;
  margin-top: 0;
  padding-top: 0;
  top: 70px;
  position: sticky;
}

.player-main-column,
.third-ad-container {
  vertical-align: top;
  display: inline-block;
  margin-right: 40px;
}

.third-ad-container {
  padding-top: 20px;
}

.player-main-column:last-child {
  padding-right: 0;
}

.player-info-column {
  /* background: #7C7C7C; */
  /* padding: 20px; */
  flex: 0;
  padding-right: 40px;
  margin-right: 40px;
  border-right: 1px solid #ddd;
}

.stat-container {
  overflow: hidden;
}

.stat-left-column {
  float: left;
}

.stat-right-column {
  float: right;
  margin-left: 40px;
}

.stat-area-header {
  margin-bottom: 10px;
}

.value-B {
  color: #b0975e;
}

.value-A {
  color: #947432;
}

.stat-container .player-stats {
  margin-bottom: 20px;
}

.stat-area-value {
  font-style: italic;
  font-weight: bold;
}

/* top info */
.top-info {
  padding-left: 30px;
}

.main-page .top-info {
  padding-left: 0;
  overflow: hidden;
}

.top-left {
  /* float: left; */
  /* overflow: hidden; */
}

.top-right {
  float: left;
  margin-left: 20px;
  max-width: 740px;
}

.top-text {
  /* float: left; */
}

.top-logo {
  width: 128px;
  height: 128px;
  float: left;
  margin-right: 15px;
  flex-shrink: 0;
  /*-webkit-filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
	filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));*/
}

.nteam-logo {
  margin-top: -10px;
}

.top-logo.league {
  background: #303030;
  padding: 3px;
  border-radius: 5px;
}

.top-header {
  margin: 0 0 12px 0;
  padding: 1px 0 0 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  line-height: 1;
}

.top-header.wrap {
  white-space: initial;
}

/*league list new pes 2015 */
ul.leagues-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

li.leagues-list-el {
  list-style: none;
  float: left;
  padding: 10px;
  margin: 0 10px 10px 0;
  overflow: hidden;
  width: 240px;
}

.leagues-list-el:hover {
  background: #eee;
}

img.leagues-list-logo {
  float: left;
  margin-right: 10px;
  padding: 3px;
  width: 35px;
  height: 35px;
}

.leagues-list-logo.league {
  background: #303030;
  border-radius: 5px;
}

.leagues-list-text {
  line-height: 35px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
  height: 35px;
}

/* tables */
/* table a {
text-decoration: none;
border-bottom: 1px solid #bbb;
color: #303030;
} */

/* table a:hover {
border-color: #303030;
} */

/* player */

.player-index-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.player-index-list > li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  padding-left: 0;
  padding-right: 0;
}

.player-stats {
  border-spacing: 0 5px;
  border-collapse: collapse;
}

.player-stats-modern {
  /* margin-right: 40px; */
  border-spacing: 0 8px;
}

.player-stats-modern tr {
  /* background: #FAFAFA; */
}

.player-stats-modern tr td {
  padding-left: 10px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  display: table-cell;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tactics-block-container h3 {
  text-align: center;
}

.player-stats-modern:not(.coach-tactics) tr td:not(.stat):not(.tactic) {
  width: 99%;
  max-width: 0;
}

.coach-tactics {
  width: 100%;
}

.player-stats-modern tr td:first-child {
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.coach-tactics td:first-child {
  color: #545454;
  text-align: right;
}

.stat_tier_3 {
  background-color: #02fec5;
  stroke: #02fec5;
  color: #000;
}

.stat_tier_2_5 {
  background-color: #03fe11;
  color: #000;
}

.stat_tier_2 {
  background-color: #a8fe02;
  stroke: #a8fe02;
  color: #000;
}

.stat_tier_1_5 {
  background-color: #fafe03;
  color: #000;
}

.stat_tier_1 {
  background-color: #fbb206;
  stroke: #fbb206;
  color: #000;
}

.stat_tier_0_5 {
  background-color: #fd6e1b;
  color: #000;
}

.stat_tier_0 {
  background-color: #fd3730;
  stroke: #fd3730;
  color: #000;
}

/* .squad-table .stat_tier_3, .squad-table .stat_tier_2, .squad-table .stat_tier_1, .squad-table .stat_tier_0 {
	background-color: #292F43;
	color: #FFF;
}

.squad-table .stat_tier_2 {
	background-color: #495067;
}

.squad-table .stat_tier_1 {
	background-color: #71778C;
}

.squad-table .stat_tier_0 {
	background-color: #9FA3B0;
	color: #000;
} */

.stat_tier_0,
.stat_tier_1,
.stat_tier_2,
.stat_tier_3,
.stat_tier_0_5,
.stat_tier_1_5,
.stat_tier_2_5 {
  border: 2px solid rgba(0, 0, 0, 0.125);
}

.player-stats tr {
  border-bottom: 1px solid #e0e0e0;
}

.player-stats tr:nth-child(odd),
.player-info tr:nth-child(odd) {
  /* background: #f4f4f4; */
}

.player-stats td {
  padding: 5px 9px;
}

.player-stats.similar-players tr {
  border: 0;
}

.player-stats.similar-players tr:nth-child(odd) {
  /*background: #f0f0f0;*/
}

.player-stats.similar-players td {
  padding: 6px 5px;
}

.player-stats td:first-child {
  text-align: center;
  padding: 0 4px;
}

.player-stats td:last-child {
}

.stat {
  font-weight: bold;
  text-align: center;
  padding: 2px 5px;
  border-radius: 5px;
  display: inline-block;
}

.ovr {
  color: #303030;
  padding: 0px 5px;
  border-radius: 9px;
}

li.versions-list-el .stat {
  border: 1px solid transparent;
}

li.versions-list-el .stat.white {
  border-color: #e0e0e0;
}

.white {
  /* background: #fff; */
  border: 1px solid #e0e0e0;
}

.green {
  background: #88c900;
}

.yellow {
  background: #ffff00;
  /* border: 1px solid #c7c7c7; */
}

.orange {
  background: #feb907;
}

.red {
  background: #ef1e1e;
  color: #fff;
}

.pes2017-stat {
  color: #fff;
}
.pes2017-1 {
  background: #108e6d;
}
.pes2017-2 {
  background: #156e58;
}
.pes2017-3 {
  background: #597b0a;
}
.pes2017-4 {
  background: #76710d;
}
.pes2017-5 {
  background: #704c1b;
}
.pes2017-6 {
  background: #673939;
}

.player-info {
  border-collapse: collapse;
  width: 100%;
}

.player-info tr {
  border-bottom: 1px solid #e0e0e0;
}

.player-info td {
  padding: 9px 10px 9px 4px;
}

.player-info td:nth-child(2) {
  text-align: right;
  padding: 4px 4px 4px 10px;
}

.player-info .image-container > img {
  width: 18px;
  margin-right: 4px;
}

.player-info .image-container {
  display: flex;
  vertical-align: middle;
  justify-content: flex-end;
}

.Goalkeeper,
.Defender,
.Midfielder,
.Forward {
  border-radius: 5px;
  padding: 1px 6px;
  /* color: #fff; */
}

.Goalkeeper {
  background: #feb907;
}

.Defender {
  background: #00abd2;
}

.Midfielder {
  background: #88c900;
}

.Forward {
  background: #ef1e1e;
}

/* player positions overview */
.player-positions {
  text-align: center;
  border-spacing: 0 15px;
  font-size: 13px;
  margin: 0 auto;
}

span.pos {
  border-radius: 5px;
  padding: 3px 6px;
  margin: 4px;
}

.search-value.pos {
  line-height: 2.5;
}

.fw-2 {
  background: #ef1e1e;
}

.fw-1 {
  background: #f09090;
}

.mf-2 {
  background: #88c900;
}

.mf-1 {
  background: #b6c98d;
}

.df-2 {
  background: #00abd2;
}

.df-1 {
  background: #92c6d1;
}

.gk-2 {
  background: #feb907;
}

.gk-1 {
  background: #fce7b1;
}

.fw-0,
.mf-0,
.df-0,
.gk-0 {
  border: 1px solid #e0e0e0;
}

/*gameplan*/
.game-plan-container {
  width: 1000px;
  max-width: 100%;
  position: relative;
  display: inline-block;
}

.game-plan-dummy {
  margin-top: 52%;
}

.game-plan-dummy.lineup-edit {
  margin-top: 70%;
}

.game-plan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.game-plan-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.gp-mobile {
  display: none;
}

.game-plan-position {
  width: 20%;
  position: absolute;
  text-align: center;
  border-collapse: collapse;
  line-height: 1;
}

.game-plan-position a {
  text-decoration: none;
}

.game-plan-position img {
  margin-bottom: 4px;
  max-width: 55%;
  -webkit-filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.5));
}

.gp-player-name {
  /* color: #fff; */
  font-size: 18px;
  font-weight: bold;
  color: #202020;
  text-transform: uppercase;
}

.gp-player-name a,
.gp-player-name a:link,
.gp-player-name a:visited,
.gp-player-name a:hover {
  color: #fff;
}

.gp-player-pos {
  background: #202020;
  padding: 1px 4px;
  border-radius: 3px;
  color: #fff;
  border-left: 5px solid;
  font-weight: bold;
  line-height: 2;
}

.gp-pos-Goalkeeper {
  border-color: #feb907;
}

.gp-pos-Defender {
  border-color: #00abd2;
}

.gp-pos-Midfielder {
  border-color: #88c900;
}

.gp-pos-Forward {
  border-color: #ef1e1e;
}

.gp-player-ovr {
  font-size: 26px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
}

.gp-player-ovr > td {
  padding: 0px;
}

.gp-red {
  color: #e63837;
}

.gp-orange {
  color: #de6f00;
}

.gp-yellow {
  color: #deaa00;
}

.gp-green {
  color: #b4cf2d;
}

.gp-boot-name {
  color: #e0e0e0;
  font-size: 14px;
}

.gk {
  left: 40%;
  bottom: 1%;
}

.gp-sitename {
  color: #fff;
  font-size: 17px;
  position: absolute;
  right: 1%;
  bottom: 1%;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.main-form {
  width: 600px;
  margin: 0 auto;
  padding: 50px 0;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.centered {
  text-align: center;
  justify-content: center;
}

.main-form .button-container {
  text-align: center;
  justify-content: center;
}

h1.page-title {
  margin-bottom: 0;
}

.main-form.main-form-with-icon {
  margin: 50px auto 20px;
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
}

svg.main-form-icon {
  width: 24px;
  height: 24px;
  color: rgb(136 76 183 / 63%);
  position: absolute;
  left: 10px;
}

.main-form-with-icon .input-fullwidth {
  border: none;
}

.main-form-with-icon .input-fullwidth:focus {
  outline: none;
}

ul.features-main {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5px 0 10px;
}

ul.features-main > li {
  margin: 5px 10px;
  font-size: 15px;
}

ul.features-main > li > a {
  text-decoration: none;
  border-bottom: 1px solid rgb(136 76 183 / 63%);
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 100ms ease-in-out;
}

ul.features-main > li > a:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

/* input fields */
.input-fullwidth {
  padding: 5px;
  width: 100%;
  font-size: 20px;
  background-color: transparent;
  border-radius: 10px;
  border: 2px solid #dadce7;
}

.bg-dark input.input-fullwidth {
  color: #fff;
  border: 2px solid rgb(136 76 183 / 63%);
  border-radius: 10px;
  padding: 10px;
  padding-left: 40px;
  transition: border-color 100ms ease-in-out;
}

.bg-dark .input-fullwidth:focus {
  border-color: white;
}

.input-fullwidth::placeholder {
  color: #dadce7;
}

.bg-dark .input-fullwidth::placeholder {
  color: #7d859f;
}

/* hexagon */
.hexagon-container {
  width: 200px;
  margin: 0 auto;
}

.hexagon {
  width: 100%;
}

.squad-table {
  margin: 0px;
  padding: 0px;
  border-spacing: 0;
}

.squad-table-stat {
  padding: 2px 5px;
  border-radius: 5px;
  display: inline-block;
}

.squad-table a {
  text-decoration: none;
  color: #303030;
  border-bottom: 1px solid #e0e0e0;
}

.sorttable_sorted,
.sorttable_sorted_reverse {
  background: #bdbdbd;
}

.squad-table a:hover {
  border-color: #303030;
}

.squad-table tbody tr {
  height: 45px;
}

.squad-table tr:hover {
  background: #e8e8e8;
}

.squad-table td,
.squad-table th {
  padding: 6px 12px;
  white-space: nowrap;
  /* font-size: 15px; */
}

.squad-table tbody td {
  border-bottom: 1px solid #e0e0e0;
}

.squad-table tbody .headcol.pes-2016,
.squad-table tbody .headcol.pes-2017,
.squad-table tbody .headcol.pes-2018,
.squad-table tbody .headcol.pes-2019,
.squad-table tbody .headcol.pes-2020,
.squad-table tbody .headcol.pes-2021,
.squad-table tbody .headcol.efootball-2022,
.squad-table tbody .headcol.pes-2021-mobile {
  padding: 0;
}

.team-table .squad-table tbody .headcol {
  padding: 7px 7px;
}

.player_head {
  width: 90px;
}

.coach_head {
  width: 128px;
  height: 128px;
}

.squad-table .player_head {
  width: 64px;
  height: 64px;
  vertical-align: middle;
  margin-right: 5px;
}

.featured_icon {
  width: 14px;
  vertical-align: middle;
}

.featured_text {
  background-repeat: no-repeat;
  background-image: url(/pes-2019/graphics/cards/featured_player.png);
  padding-left: 22px;
  background-size: 17px;
  background-position-y: center;
}

.squad-table .featured_icon {
  margin-left: 10px;
}

.namelink {
  text-decoration: none;
  color: #303030;
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.07s;
  -webkit-transition: all 0.07s;
  -moz-transition: all 0.07s;
  -o-transition: all 0.07s;
}

.namelink:hover {
  border-color: #303030;
}

.bg-dark .namelink {
  color: #fff;
  border-color: #6f7690;
}

.bg-dark .namelink:hover {
  border-color: #ffffff;
}

.subtle-text .namelink {
  color: inherit;
}

.subtle-text .namelink:hover {
  color: #ffffff;
}

.squad-table-collapsed tr:nth-child(n + 11) {
  /* display: none; */
}

.search-playing-styles-container {
  overflow: hidden;
  float: left;
  padding: 15px 0 10px 0;
}

.search-positions-container {
  overflow: hidden;
  float: left;
  padding: 10px 0 0 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

.search-area-header {
  display: flex;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}

.search-area-header.open {
  background: #f0f0f0;
}

.show-more {
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}

.show-more:hover {
  color: #dc0014;
}

thead tr th,
thead tr td {
  text-align: left;
  background-color: #dbdbdb;
  font-weight: bold;
  position: sticky;
  z-index: 2;
  top: 40px;
}

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

.squad-table-pos {
  padding: 2px 5px;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.125);
}

.squad-table-Goalkeeper {
  background: rgba(254, 185, 7, 0.3);
}

.squad-table-Defender {
  background: rgba(0, 171, 210, 0.3);
}

.squad-table-Midfielder {
  background: rgba(136, 201, 0, 0.3);
}

.squad-table-Forward {
  background: rgba(239, 30, 30, 0.3);
}

.country-flag {
  height: 13px;
}

.pes-2018 .country-flag,
.pes-2019 .country-flag,
.pes-2020 .country-flag,
.pes-2021 .country-flag,
.efootball-2022 .country-flag {
  height: 20px;
}

.club-flag {
  height: 20px;
  margin: 3px 0;
}

picture > .club-flag {
  margin: 0;
  display: block;
}

picture > img {
  display: block;
}

.team-table .club-flag {
  height: 25px;
  vertical-align: top;
}

.club-flag.league-table {
  margin-right: 8px;
  vertical-align: middle;
}

.percentage-bar {
  position: relative;
  border-radius: 20px;
  background: #e6e6e6;
  margin-bottom: 15px;
}

.percentage-bar > div {
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 20px;
  text-align: center;
  padding: 4px;
  font-weight: bold;
}

/* level slider */
input[type="range"].level-slider {
  -webkit-appearance: none;
  width: 312px;
  margin: 7px 0;
  background: none;
}
input[type="range"].level-slider:focus {
  outline: none;
}
input[type="range"].level-slider::-webkit-slider-runnable-track {
  width: 312px;
  height: 12px;
  cursor: pointer;
  background: rgba(18, 24, 45, 0.78);
  border-radius: 5px;
  border: 0px solid #010101;
}
input[type="range"].level-slider::-webkit-slider-thumb {
  box-shadow: 2.6px 2.6px 2.4px rgba(0, 0, 0, 0.22), 0px 0px 2.6px rgba(13, 13, 13, 0.22);
  border: 0px solid #00001e;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type="range"].level-slider::-webkit-slider-thumb:before {
  content: "1";
  font-size: 20px;
  color: red;
  z-index: 99;
}
input[type="range"].level-slider:focus::-webkit-slider-runnable-track {
  background: rgba(18, 24, 45, 0.78);
}
input[type="range"].level-slider::-moz-range-track {
  width: 312px;
  height: 12px;
  cursor: pointer;
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  background: rgba(18, 24, 45, 0.78);
  border-radius: 16.6px;
  border: 0px solid #010101;
}
input[type="range"].level-slider::-moz-range-thumb {
  box-shadow: 2.6px 2.6px 2.4px rgba(0, 0, 0, 0.22), 0px 0px 2.6px rgba(13, 13, 13, 0.22);
  border: 0px solid #00001e;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #ffffff;
  cursor: pointer;
}
input[type="range"].level-slider::-ms-track {
  width: 312px;
  height: 12px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"].level-slider::-ms-fill-lower {
  background: rgba(18, 24, 45, 0.78);
  border: 0px solid #010101;
  border-radius: 33.2px;
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
}
input[type="range"].level-slider::-ms-fill-upper {
  background: rgba(18, 24, 45, 0.78);
  border: 0px solid #010101;
  border-radius: 33.2px;
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
}
input[type="range"].level-slider::-ms-thumb {
  box-shadow: 2.6px 2.6px 2.4px rgba(0, 0, 0, 0.22), 0px 0px 2.6px rgba(13, 13, 13, 0.22);
  border: 0px solid #00001e;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #ffffff;
  cursor: pointer;
  height: 12px;
}
input[type="range"].level-slider:focus::-ms-fill-lower {
  background: rgba(18, 24, 45, 0.78);
}
input[type="range"].level-slider:focus::-ms-fill-upper {
  background: rgba(18, 24, 45, 0.78);
}

/* level */
.level-container {
  display: flex;
  align-items: flex-start;
  margin-top: 25px;
}

.level-container > *:not(:last-child) {
  margin-right: 10px;
}

.level-container .stat {
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.level-slider-container {
  display: flex;
  flex-direction: column;
}

.level-indicator {
  margin-top: 10px;
  color: #d4d6e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.level-indicator > label {
  display: flex;
  align-items: center;
}

.button-container > .level-indicator {
  margin: 0;
}

#level {
  font-weight: bold;
  font-size: 18px;
  color: #fff;
}

#player-id {
  cursor: pointer;
}

.dropdown-list {
  position: absolute;
  z-index: 10;
  max-height: 512px;
  overflow-y: auto;
  background-color: #ffffff;
  display: flex;
  right: initial;
  padding: 16px 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), 0 -18px 60px -10px rgb(0 0 0 / 3%);
}

.dropdown-list-scroll-container {
  overflow-y: auto;
  max-height: 100%;
}

.dropdown-player {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-right: 12px;
}

.dropdown-player > span {
  margin-left: 12px;
}

.dropdown-player > img {
  width: 64px;
  height: 64px;
}

.dropdown-player:hover {
  background-color: #f5f5f5;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 20px;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-container {
  width: 800px;
  height: 500px;
  background: white;
  position: relative;
  border-radius: 12px;
  color: #000000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 2.2px rgba(0, 0, 0, 0.02), 0px 0px 5.3px rgba(0, 0, 0, 0.028), 0px 0px 10px rgba(0, 0, 0, 0.035), 0px 0px 17.9px rgba(0, 0, 0, 0.042), 0px 0px 33.4px rgba(0, 0, 0, 0.05),
    0px 0px 80px rgba(0, 0, 0, 0.07);
}

.modal-close-button {
  background: none;
  border: none;
  padding: 8px;
  margin: 0;
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
}

.modal-close-button > svg {
  width: 20px;
  height: 20px;
  margin: 0;
}

.shortlist-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
  overflow-y: auto;
}

.shortlist-list > li > svg {
  width: 16px;
  height: 16px;
}

.shortlist-list > li {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  align-items: center;
}

.modal-container > h3 {
  padding: 16px;
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shortlist-list > li:hover {
  background-color: #fafafa;
}

.shortlist-create-button {
  background: none;
  border: none;
  padding: 16px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
}

.shortlist-create-button:hover {
  background-color: #fafafa;
}

.modal-inner {
  padding: 16px;
}

.player-info__img-entry {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.player-info img {
  width: 24px;
  height: 24px;
}

.player-progression__container {
  display: grid;
  align-items: center;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.player-progression_area {
  background-color: #49496e;
  border-radius: 4px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  height: 24px;
}

.player-progression__label {
  padding: 0px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 24px;
}

.player-progression__content {
  display: flex;
  gap: 8px;
  align-items: stretch;
  align-items: center;
}

.player-progression__button {
  display: flex;
  background: #fff;
  height: 24px;
  padding: 0;
  border: none;
  color: #000;
  font-weight: bold;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}

.player-progression__button[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.player-progression__button > svg {
  width: 16px;
  height: 16px;
  margin: 0;
  pointer-events: none;
}

.stat-name__container {
  display: flex;
  justify-content: space-between;
}

span.stat-change-indicator {
  background-color: #32c85a;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 2px 4px;
  font-size: 12px;
  border-radius: 4px;
}

.stat-name.highlighted {
  background-color: #adf0c0;
  /* background: #abedbc; */
  border-radius: 4px;
}

.player-progression__indicator {
  font-size: 14px;
  width: 18px;
  text-align: center;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 1275px) {
  .top-left {
    float: none;
  }

  .top-right {
    float: none;
    margin: 10px 0 0 0;
  }

  .top-text {
    float: none;
    line-height: 1.5;
  }
}

@media (max-width: 1000px) {
  /* kit container */

  .kit-container > div:nth-child(n) {
    margin-right: 15px;
    width: calc((100% - 15px * 3) / 4);
  }

  .kit-container > div:nth-child(4n) {
    margin-right: 0;
  }

  .squad-change {
    margin-top: 3px;
  }

  .player-main-column {
    padding-right: 20px;
  }

  .gp-player-ovr {
    font-size: 24px;
  }

  .gp-player-name {
    font-size: 16px;
  }

  .gp-player-pos {
    font-size: 14px;
  }

  .game-plan-dummy {
    margin-top: 60%;
  }

  .shortlist-button {
    margin-top: -2px;
  }
}

@media (max-width: 900px) {
  .squad-table {
    width: 100%;
  }

  .third-ad-container {
    padding: 0;
    display: block;
  }

  .squad-table tr:hover {
    background: transparent;
  }

  .news-block {
    /* width: 100%;
margin-bottom: 6%; */
  }

  .input-headerbarsearch {
    /*
width: 60px;
position: absolute;
height: 30px;
right: 0;
top: 5px;
display: block;
margin: 0;
*/
  }

  .input-headerbarsearch:focus {
    /*width: 98%;*/
  }

  .news-block-img {
    /* min-width: 100%;
max-height: none; */
  }

  .squad-table td,
  .squad-table th {
    padding: 7px 7px;
    width: auto;
  }

  .squad-table td.headcol {
    width: 99%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shortlist-button {
    margin-top: -3px;
  }

  .squad-table-container {
    /*
margin-left: 118px;
overflow-x: auto;
*/
  }

  .squad-table td {
    /*
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
*/
  }

  .headcol {
    /*
position: absolute;
left: 0;
width: 200px;
overflow: hidden;
z-index: 0;
*/
  }

  .team-table {
    margin-left: 0;
  }

  .player-positions {
    /*
font-size: 10px;
*/
  }

  .hexagon-container {
    width: 175px;
  }

  .player-main-column {
    width: 32%;
    padding: 0;
  }

  .player-main-column.stats {
    width: auto;
  }

  .player-info-column {
    width: 100%;
  }

  .player-info-column-1,
  .player-info-column-2 {
    width: 49%;
    display: inline-block;
  }

  .player-positions {
    margin: 0 auto;
  }

  .player-info-column-1 {
    float: left;
  }

  .player-info-column-2 {
    float: right;
  }

  .game-plan-dummy {
    margin-top: 65%;
  }
}

/* responsive phones */
@media (max-width: 767px) {
  /* basic mobile switch */
  .mobile-yes {
    /* display: initial; */
  }

  /* kit container */

  .kit-container > div:nth-child(n) {
    margin-right: 15px;
    width: calc((100% - 15px * 2) / 3);
  }

  .kit-container > div:nth-child(3n) {
    margin-right: 0;
  }

  /* open search */
  .search-open .login-hint,
  .search-open .menu-toggle,
  .search-open .menu-toggle-2 {
    display: none;
  }

  .search-open .header-right {
    float: none;
    height: 100%;
    width: 100%;
  }

  .search-open .search-headerbar {
    width: 100%;
    padding: 0 15px;
  }

  .search-open .input-headerbarsearch {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    float: right;
  }

  #input-headerbarsearch:focus {
    width: 100%;
    max-width: initial;
  }

  .header.search-open {
    margin: 0 auto;
  }

  /* login / register forms */
  .login-container {
    background: none;
    margin: 0;
    padding: 0;
    width: auto;
  }

  .player-stats td:last-child {
    width: 99%;
  }

  .player-stats td {
    padding: 8px 12px;
  }

  .player-stats,
  .player-index {
    width: 100%;
  }

  h3,
  h4 {
    margin: 15px 0;
  }

  h3:first-child,
  h4:first-child {
    margin-top: 0;
  }

  .player-stats tr {
    margin: 3px 0 0 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .player-index {
    border-collapse: collapse;
  }

  .player-index tr {
    border-bottom: 1px solid #e0e0e0;
  }

  .player-index td {
    padding: 8px 0;
  }

  .games {
    text-align: center;
  }

  .games .game {
    margin-right: 5px;
    float: none;
    display: inline;
  }

  .games .game img {
    height: 120px;
  }

  .top-right {
    /* margin-left: 10px; */
  }

  .change-ovr {
    background-size: 256px 256px;
    width: 30px;
    height: 19px;
    font-size: 11px;
  }

  .change-ovr.plus {
    background-position: 0 -45px;
    line-height: 26px;
  }

  .change-ovr.minus {
    background-position: 0 -25px;
    line-height: 14px;
  }

  /*league list new pes 2015 */
  li.leagues-list-el {
    width: 100%;
    padding: 5px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
  }

  img.leagues-list-logo {
    width: 30px;
    height: 30px;
  }

  .leagues-list-text {
    line-height: 30px;
    height: 30px;
    overflow: visible;
  }

  body.menu-open {
  }

  .menu-open .main-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 40px 0 0 0;
  }

  .menu-open .input-headerbarsearch {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
  }

  .menu-open .login-hint {
    opacity: 0;
  }

  .header {
    margin: 0;
  }

  .header-left {
    /* left: 0; */
    /* position: absolute; */
  }

  .search-playing-style {
    line-height: 1.5;
    font-size: 13px;
    float: left;
    width: 50%;
  }

  .search-label {
    /* font-size: 11px; */
  }

  .search-label-active,
  .search-playing-style-active {
    /* color: #dc0014; */
  }

  .player-main-column {
    width: 49%;
    display: block;
    width: 100%;
  }

  .player-main-column.player-info-column,
  .player-main-column.stats {
    width: 100%;
    overflow: hidden;
  }

  .player-info-column h3,
  .player-info-column h4 {
    margin: 0 0 15px 0;
  }

  .stat-left-column,
  .stat-right-column {
    width: 47.5%;
    margin: 0;
    overflow: hidden;
  }

  .player-stats td {
    white-space: nowrap;
  }

  .player-info-column-1,
  .player-info-column-2 {
    width: 100%;
    margin: 15px 0;
  }

  /* main page structure */
  .main-page {
    /* position: relative; */
    /* width: auto; */
    /* padding-top: 10px; */
    /* margin: 0; */
  }

  .top-left,
  h1,
  h2,
  h4,
  p,
  .versions-list,
  .player-main,
  #disqus_thread,
  .main-page form,
  .quicklinks,
  .main-page > h3,
  .header-note > .header,
  .login-container,
  ul#search-options,
  .kit-container,
  .lineup-options,
  #save-search,
  .important-leagues,
  .checkmark-list {
    /* margin-left: 10px; */
    /* margin-right: 10px; */
  }

  #disqus_thread {
    width: auto;
  }

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

  .important-leagues .top-logo {
    margin: 0 5px 10px;
  }

  /* top info */
  .top-info {
  }

  .top-logo {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }

  .top-header {
    font-size: 19px;
  }

  h2 {
    font-size: 1.25em;
  }

  .ovr {
    border-radius: 4px;
  }

  .versions-list {
    /* margin: 15px 5px; */
  }

  li.versions-list-el {
  }

  .game-plan-dummy {
    margin-top: 100%;
  }

  .gp-sitename {
    font-size: 0.7em;
  }

  .gp-player-ovr {
    font-size: 1.2em;
  }

  .gp-player-pos {
    font-size: 0.7em;
    border-left-width: 0.4em;
  }

  .gp-player-name {
    font-size: 0.7em;
  }
}

@media (max-width: 500px) {
  /* kit container */

  .kit-container > div:nth-child(n) {
    margin-right: 15px;
    width: calc((100% - 15px) / 2);
  }

  .kit-container > div:nth-child(2n) {
    margin-right: 0;
  }
}

.pes-master-player-top {
  width: 300px;
  height: 250px;
}
/* @media(min-width: 520px) { .pes-master-player-top { width: 468px; height: 60px; } } */
@media (min-width: 750px) {
  .pes-master-player-top {
    width: 728px;
    height: 90px;
  }
}
.pes-master-home-top {
  width: 300px;
  height: 250px;
}
@media (min-width: 520px) {
  .pes-master-home-top {
    width: 468px;
    height: 60px;
  }
}
@media (min-width: 750px) {
  .pes-master-home-top {
    width: 728px;
    height: 90px;
  }
}
.pes-master-home-bottom {
  width: 300px;
  height: 250px;
}
@media (min-width: 340px) {
  .pes-master-home-bottom {
    width: 336px;
    height: 280px;
  }
}
@media (min-width: 520px) {
  .pes-master-home-bottom {
    width: 468px;
    height: 60px;
  }
}
@media (min-width: 750px) {
  .pes-master-home-bottom {
    width: 728px;
    height: 90px;
  }
}
.pes-master-league-team-bottom {
  width: 300px;
  height: 250px;
}
@media (min-width: 340px) {
  .pes-master-league-team-bottom {
    width: 336px;
    height: 280px;
  }
}
@media (min-width: 520px) {
  .pes-master-league-team-bottom {
    width: 468px;
    height: 60px;
  }
}
@media (min-width: 750px) {
  .pes-master-league-team-bottom {
    width: 728px;
    height: 90px;
  }
}
.pes-master-player-bottom {
  width: 300px;
  height: 250px;
}
@media (min-width: 340px) {
  .pes-master-player-bottom {
    width: 336px;
    height: 280px;
  }
}
@media (min-width: 520px) {
  .pes-master-player-bottom {
    width: 468px;
    height: 60px;
  }
}
@media (min-width: 750px) {
  .pes-master-player-bottom {
    width: 728px;
    height: 90px;
  }
}
.third-ad {
  width: 300px;
  height: 250px;
}
@media (min-width: 340px) {
  .third-ad {
    width: 336px;
    height: 280px;
  }
}
@media (min-width: 520px) {
  .third-ad {
    width: 468px;
    height: 60px;
  }
}
@media (min-width: 750px) {
  .third-ad {
    width: 120px;
    height: 600px;
  }
}
@media (min-width: 950px) {
  .third-ad {
    width: 300px;
    height: 600px;
  }
}

.ad,
.third-ad-container {
  max-width: 100%;
  margin: 30px 0;
}
@media (min-width: 520px) {
  .ad {
    /* max-width: 468px; */
  }
}
@media (min-width: 800px) {
  .ad,
  .third-ad {
    max-width: 728px;
  }
}

/* .smaller-ad { width: 300px; height: 250px; }
@media(min-width: 340px) { .smaller-ad { width: 336px; height: 280px; } }
@media(min-width: 520px) { .smaller-ad { width: 468px; height: 60px; } }
@media(min-width: 750px) { .smaller-ad { width: 728px; height: 90px; } } */

.ad-mobile {
  display: none;
}

#ad-bottom {
  margin-top: 0;
}

.ad-container.ad-first {
  margin-bottom: 0;
}

.smaller-ad {
  width: 336px;
  height: 280px;
}

.zig-zag-overlay {
  position: absolute;
  bottom: 0;
  height: 12px;
  width: 100%;
  fill: #fafafa;
  display: none;
}

.team-block {
  padding-left: 10px;
  padding-right: 10px;
  width: 25%;
  margin-bottom: 10px;
}

.team-block-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.team-block-inner {
  background-color: #fdfeff;
  display: flex;
  align-items: center;
  padding: 10px;
  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.271);
  border-radius: 5px;
  transition: background-color 100ms ease-in-out;
}

.team-block-inner:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.627);
}

.team-block-logo {
  margin-left: 10px;
  margin-right: 10px;
  width: 24px;
  height: 24px;
}

.team-block-logo:first-child {
  margin-left: 0;
}

span.team-block-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-block > a {
  text-decoration: none;
}

.stat-donut-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 10px;
}

.stat-donut-block {
  display: flex;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/*
.stat-donut {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    margin-right: 10px;
    border: 5px solid #fff;
    box-sizing: border-box;
}*/

.stat-donut-name {
  font-weight: bold;
  margin-left: 8px;
}

.stat-donut {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  background: #292f43 linear-gradient(to right, #292f43 50%, white 50%);
  color: white;
  border-radius: 50%;
}

text.donut-inner-text {
  fill: white;
  text-anchor: middle;
  line-height: 1;
  font-weight: bold;
}

svg.donut {
  position: relative;
  width: 40px;
  height: 40px;
}

@keyframes spin {
  to {
    transform: rotate(180deg);
  }
}

@keyframes background {
  50% {
    background-color: currentColor;
  }
}

.stat-donut:after {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #292f43;
  border-radius: 50%;
}

.stat-donut:before {
  content: "";
  position: absolute;
  display: block;
  background-color: inherit;
  height: 100%;
  width: 50%;
  bottom: 0;
  right: 0;
  border-radius: 100%;
  /* border-top-left-radius: 0; */
  border-radius: 0 100% 100% 0 / 50%;
  /* border-radius: "0 100% 100% 0 / 50%"; */
  transform: rotate(0);
  transform-origin: 0 50%;
  animation: 50s spin infinite linear, 100s background infinite step-end;
  animation-play-state: paused;
  animation-delay: inherit;
}

.gp-container-new {
  width: 100%;
}

.gp-container-new .game-plan-dummy {
  margin-top: 50%;
}

.gp-player {
  position: absolute;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gp-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  /* width: 100%; */
}

.gp-player-gk {
  bottom: 1%;
  left: 40%;
}

.gp-face {
  width: 80px;
  height: 80px;
}

.gp-position {
  display: flex;
  width: 80px;
  justify-content: space-between;
  background: #202020;
  border-radius: 3px;
  align-items: center;
  padding: 2px;
  margin-bottom: 4px;
  max-width: 90%;
}

.gp-playername {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

.gp-container-new .gp-player-pos {
  border: 0;
  padding: 0;
  line-height: 1;
}

.gp-container-new .gp-pos-Forward {
  color: #ef1e1e;
}

.gp-container-new .gp-pos-Midfielder {
  color: #88c900;
}

.gp-container-new .gp-pos-Defender {
  color: #00abd2;
}

.gp-container-new .gp-pos-Goalkeeper {
  color: #feb907;
}

.gp-container-new .gp-player-ovr {
  font-size: 16px;
  text-shadow: none;
  font-style: normal;
}

.game-plan {
  background-color: #2d5f1f;
  background-image: url(/graphics/gameplan/gameplan_new.svg);
  background-size: cover;
  background-position: center;
}

/* media */
@media (max-width: 1439px) {
  /* open search */
  .search-open .nav {
    display: none;
  }

  .header,
  .container-large {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  .footer {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }

  .swiper-container {
    display: flex;
    flex: 1;
    /* margin-left: -20px; */
    /* margin-right: -20px; */
  }

  .swiper-container > .player-card-container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .stats-block {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    width: 50%;
  }

  .stat-bar {
    margin-right: 0;
  }

  .sticky-ad-container {
    display: none;
  }

  .ad-mobile {
    display: block;
    margin-top: 0;
    width: auto;
    width: 100%;
  }

  .main-form {
    width: 400px;
  }

  .input-fullwidth {
    font-size: 18px;
  }

  .gp-container-new .game-plan-dummy {
    margin-top: 55%;
  }

  .gp-container-new .game-plan-dummy {
    margin-top: 55%;
  }
}

@media (max-width: 1023px) {
  .main-stats-cards-container {
    flex-direction: column;
  }

  .player-info-column {
    margin-top: 20px;
    margin-bottom: 20px;
    border: none;
    order: 2;
  }

  .main-coach-container > * {
    width: 100%;
  }

  .main-coach-container .player-info-column {
    order: 0;
    margin: 0 0 40px 0;
  }

  .main-coach-container .player-info-column .player-info {
    margin-top: 0;
  }

  .hexagon-positions-container {
    display: flex;
    align-items: center;
  }

  .hexagon-container {
    display: flex;
    justify-content: center;
    width: 50%;
  }

  .hexagon {
    width: 60%;
  }

  .player-positions-new {
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .player-info {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
  }

  .header {
    width: auto;
    margin-left: 12px;
    margin-right: 12px;
  }

  ul.footer-social-list > li {
    border: 0 !important;
    float: none;
  }

  .news-container-teaser {
    flex-wrap: nowrap;
  }

  .bg-dark {
    background-size: contain;
  }

  .team-block {
    width: 50%;
  }
  .gp-container-new .game-plan-dummy {
    margin-top: 75%;
  }

  .gp-face {
    width: 64px;
    height: 64px;
  }

  .gp-container-new .gp-player-ovr,
  .gp-container-new .gp-player-pos {
    font-size: 14px;
  }

  ul.tab-header {
    /* margin-left: -10px; */
    /* margin-right: -10px; */
    margin-bottom: 10px;
  }

  ul.tab-header ~ ul.tab-header {
    margin-bottom: 20px;
  }

  /* navigation */
  .site-logo {
    float: none;
    text-align: center;
    margin-left: 8px;
  }

  .nav {
    flex-direction: column;
    position: fixed;
    background: #fafafa;
    top: 40px;
    left: 0;
    bottom: 0;
    width: 70%;
    overflow-y: auto;
    transition: transform 300ms ease-out, box-shadow 0s linear 300ms;
    -webkit-transition: -webkit-transform 300ms ease-out, -webkit-box-shadow 0s linear 300ms;
    -moz-transition: -moz-transform 300ms ease-out, -moz-box-shadow 0s linear 300ms;
    -o-transition: -o-transform 300ms ease-out, box-shadow 0s linear 300ms;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
  }

  .menu-open .nav {
    transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
    -moz-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
  }

  .opera .nav {
    transform: none;
    -o-transform: none;
    transition: left 300ms ease-out, box-shadow 0s linear 300ms;
    -o-transition: left 300ms ease-out, box-shadow 0s linear 300ms;
    left: -100%;
  }

  .opera.menu-open .nav {
    left: 0;
  }

  .nav3 {
    display: block;
    position: initial;
    font-size: 90%;
    background: none;
  }

  .nav2 > li:first-child > .nav3 > li {
    padding: 0;
    font-size: 11pt;
    font-weight: normal;
  }

  .nav2 > li:first-child > .nav3 > li > a {
    padding: 8px 14px;
    display: block;
  }

  .nav2 > li:first-child > .nav3 {
    border-bottom: 1px solid #e0e0e0;
  }

  .nav3 > li {
    text-decoration: none;
    /* display: block; */
    padding: 0;
  }

  .nav3 > li > a {
    padding: 10px 30px;
    display: block;
  }

  .nav3 > li > a:hover {
    border-color: transparent;
  }

  #black-overlay {
    background-color: rgb(0, 0, 0);
    z-index: -1;
    position: fixed;
    top: 41px;
    left: 0;
    height: 100%;
    width: 100%;
    transition: visibility 0s linear 300ms, opacity 300ms ease-out;
    -webkit-transition: visibility 0s linear 300ms, opacity 300ms ease-out;
    -moz-transition: visibility 0s linear 300ms, opacity 300ms ease-out;
    -o-transition: visibility 0s linear 300ms, opacity 300ms ease-out;
    visibility: hidden;
    opacity: 0;
  }

  .menu-open #black-overlay {
    opacity: 0.8;
    visibility: visible;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
  }

  .menu-toggle,
  .menu-toggle-2 {
    transition: opacity 200ms ease-out;
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
  }

  .nav > li {
    flex-direction: column;
    border-bottom: 1px solid #ddd;
  }

  .nav .menu-triangle {
    display: none !important;
  }

  .nav > li:hover {
    background: transparent;
  }

  .nav > li > a,
  .nav > li > span {
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav > li > a,
  .nav > li:hover > a,
  .nav > li > span,
  .nav > li:hover > span {
    color: #000;
  }

  .nav2-container:not(.login-dropdown) {
    display: block;
    position: relative;
    top: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .nav2-container:not(.login-dropdown) > .nav2 {
    padding: 0;
    background: transparent;
    text-transform: none;
    font-size: 11pt;
    float: none;
    position: static;
    border: none;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease-out, border-width 200ms ease-out;
    -webkit-transition: max-height 200ms ease-out, border-width 200ms ease-out;
    -moz-transition: max-height 200ms ease-out, border-width 200ms ease-out;
    -o-transition: max-height 200ms ease-out, border-width 200ms ease-out;
    border-bottom: 0px solid #bbb;
    margin: 0;
    width: 100%;
  }

  li.open .nav2 {
    max-height: 1000px !important;
  }

  .nav2 {
    box-shadow: none;
  }

  .nav2 > li {
    padding: 0;
    float: none;
  }

  .nav2 > li > a {
    padding: 10px 20px;
    text-decoration: none;
  }

  .header-games .nav3 {
    display: none !important;
  }

  .header-games .nav2 > li:nth-child(n) > a {
    border-bottom: 1px solid transparent;
  }

  .search-headerbar {
  }

  .menu-mobile {
    width: 16px;
    height: 16px;
    fill: #b1b7c1;
  }

  .search-header-mobile {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 38px;
    height: 100%;
  }

  .menu-mobile > div {
    width: 17px;
    height: 15px;
    background-position: 0 -127px;
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
  }

  .menu-open .menu-mobile > div {
    /* background-position: -6px -127px; */
  }

  .search-header-mobile > div {
    width: 21px;
    height: 22px;
    position: absolute;
    background-position: 0 -145px;
    right: 8px;
    top: 9px;
  }

  .mobile-menu {
    background: #fff;
    width: 0%;
    position: fixed;
    top: 40px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .mobile-menu-open .mobile-menu {
    width: 60%;
  }
}

@media (max-width: 767px) {
  #input-headerbarsearch {
    width: 80px;
  }

  .logo-main {
    width: 200px;
  }

  ul.features-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bg-dark {
    background-size: 100%;
  }

  .stats-block,
  .stats-block.w-50 {
    width: 100%;
  }

  .stat-bar {
    margin-right: 0;
  }

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

  .cards-container > div {
    margin-bottom: 40px;
  }
  .cards-container > div:last-child {
    margin-bottom: 0;
  }

  .hexagon-positions-container {
    flex-direction: column;
  }

  .hexagon-container {
    width: 100%;
    margin-bottom: 20px;
  }

  .player-positions-new {
    width: 100%;
  }

  .top-container {
    flex-direction: column;
    align-items: center;
  }

  .top-container > .player-card {
    /* margin-left: auto;
    margin-right: auto; */
  }

  .top-info {
    padding-left: 0;
    margin-top: 20px;
  }

  .ad-mobile {
    width: auto;
  }

  .news-block {
    width: 50%;
  }

  .news-container-teaser .news-block {
    width: 40vw;
    flex-shrink: 0;
  }

  @keyframes bgAnimation {
    0% {
      background-position: -30% -20%, 130% 120%;
    }
    100% {
      background-position: top left, bottom right;
    }
  }

  .bg-dark {
    background-position: top left, bottom right;
  }

  .main-form {
    width: 100%;
  }

  .important-leagues img {
    width: 64px;
    height: 64px;
  }

  .gp-container-new .game-plan-dummy {
    margin-top: 150%;
  }

  .gp-face {
    width: 50px;
    height: 50px;
  }

  .gp-playername {
    font-size: 13px;
  }

  .gp-container-new .gp-player-ovr,
  .gp-container-new .gp-player-pos {
    font-size: 13px;
  }

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

  .container-top .top-logo {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }

  .stat-donut-container {
    margin-left: -6px;
    margin-right: -6px;
  }

  .stat-donut-block {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 6px;
  }

  .container-large .squad-table-container {
    margin-left: -20px;
    margin-right: -20px;
  }

  ul.tab-header {
    margin-left: -20px;
    margin-right: -20px;
  }

  /* level slider */
  .level-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #292f43;
    z-index: 99;
    padding: 20px 20px 10px 20px;
    margin-top: 0;
  }

  span.level-indicator {
    margin-top: 5px;
    font-size: 14px;
  }

  #level {
    font-size: 16px;
  }

  .level-slider-container {
    flex-grow: 1;
  }

  input[type="range"].level-slider {
    width: auto;
  }
}

@media (max-width: 424px) {
  .player-positions-new {
    font-size: 14px;
  }

  .player-positions-item {
    margin-left: 5px;
    margin-right: 5px;
  }

  .input-headerbarsearch {
    width: 60px;
  }

  .search-open .search-headerbar {
    left: 15px;
    right: 15px;
  }

  .ad-mobile-bottom {
    margin-left: -20px;
    margin-right: -20px;
  }

  .team-block-container {
    flex-direction: column;
  }

  .team-block {
    width: 100%;
  }

  .gp-face {
    width: 40px;
    height: 40px;
  }

  .gp-container-new .gp-position {
    padding: 0px 2px;
  }

  .gp-playername {
    text-overflow: ellipsis;
    max-width: 110%;
  }

  .gp-playername > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* animation: scroll-left 15s linear infinite; */
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    10% {
      transform: translateX(-100%);
    }
    20% {
      transform: translateX(0);
    }
    30% {
      transform: translateX(100%);
    }
    40% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(0);
    }
  }
}

@media (max-width: 374px) {
  ul.features-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 320px) {
  .smaller-ad {
    width: 300px;
    height: 250px;
  }
}

/* changelog */
.player-changes-list {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 30px;
}

.player-change-block {
  display: flex;
  align-items: flex-start;
}

.player-change-block > .player-card {
  margin-right: 20px;
}

table.stat-changes-table {
  border-spacing: 0 8px;
  margin: -8px 20px;
}

.stat-changes-table .stat {
  display: table-cell;
}

.player-change {
  padding: 0 5px;
  color: #a0a0a0;
}

.player-change.up {
  color: #e22323;
}

.player-change.down {
  color: #2ab1e4;
}

.player-change > svg {
  width: 20px;
  height: 20px;
}

.stat-changes-table td:last-child {
  padding: 0 5px 0 10px;
  white-space: nowrap;
}

.player-change-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

.player-change-stats .stat {
  width: 32px;
  text-align: center;
}

.player-change-stats > div {
  display: flex;
  align-items: center;
}

.player-change-stats > .player-change-stat > div:last-child {
  margin-left: 10px;
}

@media (max-width: 1439px) {
  .nav > li > a,
  .nav > li > span {
    /* font-size: 13px; */
  }

  .player-change-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  #input-headerbarsearch {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .player-changes-list {
    gap: 40px;
  }

  .player-change-block {
    flex-direction: column;
  }

  .player-change-block > .player-card {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .player-change-stats {
    grid-template-columns: 1fr;
  }

  #player-progression-toggle {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #292f43;
    z-index: 99;
    padding: 20px;
    margin-top: 0;
    height: 70px;
  }

  .player-progression__container {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    background: #292f43;
    z-index: 99;
    padding: 20px 20px 10px 20px;
    margin-top: 0;
  }
}