.clear {
  clear: both;
}

/*Размеры сетки*/
.playoff {
  width: 910px;
  background-color: rgba(var(--color-bg-additional), 1);
  font-family: "PT Sans Narrow", "Arial", sans-serif;
}

.playoff.empty {
  height: 395px;
  padding-top: 64px;
  font-size: 15px;
  color: rgba(var(--color-text-additional), 1);
  text-align: center;
}

/*Ширина колонок*/
.playoff .playoff-col {
  float: left;
  height: 100%;
}

.playoff.teams-16 .playoff-col {
  width: calc(100% / 4);
}

.playoff.teams-8 .playoff-col {
  width: calc(100% / 3);
}

.playoff.teams-4 .playoff-col {
  width: calc(100% / 2);
}

.playoff.teams-2 .playoff-col {
  width: 100%;
}

/*Заголовок колонок*/
.playoff .playoff-col .playoff-col-title {
  position: relative;
  margin: 16px 0;
  height: 36px;
  font-size: 15px;
  line-height: 36px;
  text-align: center;
}

.playoff .playoff-col.final .playoff-col-title.target-1 {
  font-weight: 600;
  color: #d50028;
  text-transform: uppercase;
}

/*Матчи в колонках (отступы)*/
.playoff .playoff-col .playoff-col-matches {
  padding: 0 8px 8px;
}

.playoff.teams-16 .playoff-col .playoff-col-matches {
  padding: 0 12px 8px;
}

.playoff.teams-8 .playoff-col .playoff-col-matches {
  padding: 0 24px 12px;
}

.playoff.teams-4 .playoff-col .playoff-col-matches {
  padding: 0 24px 12px;
}

.playoff.teams-2 .playoff-col .playoff-col-matches {
  padding: 0 8px 32px;
}

.playoff.teams-16 .playoff-col.final-8 .playoff-col-matches {
  margin-top: 0;
}

.playoff.teams-16 .playoff-col.quarter .playoff-col-matches {
  margin-top: 72px;
}

.playoff.teams-16 .playoff-col.semi .playoff-col-matches {
  margin-top: 184px;
}

.playoff.teams-16 .playoff-col.final .playoff-col-matches {
  margin-top: 408px;
}

.playoff.teams-8 .playoff-col.quarter .playoff-col-matches {
  margin-top: 0;
}

.playoff.teams-8 .playoff-col.semi .playoff-col-matches {
  margin-top: 108px;
}

.playoff.teams-8 .playoff-col.final .playoff-col-matches {
  margin-top: 288px;
}

.playoff.teams-4 .playoff-col.semi .playoff-col-matches {
  margin-top: 0;
}

.playoff.teams-4 .playoff-col.final .playoff-col-matches {
  margin-top: 160px;
}

.playoff.teams-2 .playoff-col.final .playoff-col-matches {
  margin-top: 0;
}

.playoff .playoff-col .playoff-col-matches:last-child {
  margin-bottom: 0 !important;
}

/*Отступы для матча*/
.playoff.teams-16 .playoff-col.final-8 .playoff-col-matches .playoff-match:not(:last-child) {
  margin-bottom: 40px;
}

.playoff.teams-16 .playoff-col.quarter .playoff-col-matches .playoff-match:not(:last-child) {
  margin-bottom: 152px;
}

.playoff.teams-16 .playoff-col.semi .playoff-col-matches .playoff-match:not(:last-child) {
  margin-bottom: 376px;
}

.playoff.teams-8 .playoff-col.quarter .playoff-col-matches .playoff-match:not(:last-child) {
  margin-bottom: 80px;
}

.playoff.teams-8 .playoff-col.semi .playoff-col-matches .playoff-match:not(:last-child) {
  margin-bottom: 262px;
}

.playoff.teams-4 .playoff-col.semi .playoff-col-matches .playoff-match:not(:last-child) {
  margin-bottom: 168px;
}

/* Отступ для матча за 3 место */
.playoff.teams-16 .playoff-col.final .playoff-match:first-child {
  margin-bottom: 264px;
}

.playoff.teams-8 .playoff-col.final .playoff-match:first-child {
  margin-bottom: 172px;
}

.playoff.teams-4 .playoff-col.final .playoff-match:first-child {
  margin-bottom: 144px;
}

/*Матч*/
.playoff .playoff-match {
  position: relative;
  background-color: #f1f1f1;
}

.playoff .playoff-match .playoff-match-cont {
  position: relative;
  z-index: 2;
  background-color: #f1f1f1;
  display: table;
  width: 100%;
  height: 100%;
}

/*Информация о матче с отсутствующими командами*/
.playoff .playoff-match .playoff-match-cont .playoff-match-empty {
  display: table-cell;
  vertical-align: middle;
  color: rgba(var(--color-text-additional), 1);
  text-align: center;
}

.playoff.teams-16 .playoff-match .playoff-match-cont .playoff-match-empty {
  font-size: 14px;
  line-height: 14px;
}

.playoff.teams-8 .playoff-match .playoff-match-cont .playoff-match-empty {
  font-size: 15px;
  line-height: 15px;
}

.playoff.teams-4 .playoff-match .playoff-match-cont .playoff-match-empty {
  font-size: 15px;
  line-height: 15px;
}

/*Высота карточки матча*/
.playoff.teams-16 .playoff-match {
  height: 72px;
}

.playoff.teams-8 .playoff-match {
  height: 102px;
}

.playoff.teams-4 .playoff-match {
  height: 120px;
}

.playoff.teams-2 .playoff-match {
  width: 500px;
  margin: auto;
}

/*Отступы внутри карточки матча*/
.playoff.teams-16 .playoff-match .playoff-match-cont {
  padding: 4px 8px;
}

.playoff.teams-8 .playoff-match .playoff-match-cont {
  padding: 8px;
}

.playoff.teams-4 .playoff-match .playoff-match-cont {
  padding: 12px;
}

.playoff.teams-2 .playoff-match .playoff-match-cont {
  padding: 24px;
}

/*Команды в матче*/
.playoff .playoff-match table {
  position: relative;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

.playoff .playoff-match table:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: calc(100% - 32px);
  height: 1px;
  background-color: #dddddd;
  z-index: 1;
}

.playoff .playoff-match table td {
  padding: 0;
}

.playoff .playoff-match .team {

}

.playoff.teams-16 .playoff-match .team {
  width: 132px;
}

.playoff.teams-8 .playoff-match .team {
  width: 180px;
}

.playoff.teams-4 .playoff-match .team {
  width: 272px;
}

.playoff.teams-2 .playoff-match .team {
  width: 120px;
  text-align: center;
}

.playoff.teams-2 .playoff-match .team.team1 {
  float: left;
}

.playoff.teams-2 .playoff-match .team.team2 {
  float: right;
}

.playoff .playoff-match .team-cont {
  display: flex;
}

.playoff.teams-2  .playoff-match .team-cont {
  flex-direction: column;
  align-items: center;
}

/*Логотип команды*/
.playoff .playoff-match .team-cont > img {
  flex-shrink: 0;
  margin-right: 8px;
}

.playoff.teams-16 .playoff-match .team-cont > img {
  width: 24px;
  height: 24px;
}

.playoff.teams-8 .playoff-match .team-cont > img {
  width: 34px;
  height: 34px;
}

.playoff.teams-4 .playoff-match .team-cont > img {
  width: 38px;
  height: 38px;
}

.playoff.teams-2 .playoff-match .team-cont > img {
  float: none;
  width: 64px;
  height: 64px;
  margin: 0 0 6px;
}

/*Название команды*/
.playoff .playoff-match .team-cont > span {
  float: left;
  color: rgba(var(--color-text-additional), 1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playoff.teams-16 .playoff-match .team-cont > span {
  width: 100px;
  max-width: 100%;
  font-size: 12px;
  line-height: 24px;
}

.playoff.teams-8 .playoff-match .team-cont > span {
  width: 118px;
  max-width: 100%;
  font-size: 13px;
  line-height: 34px;
}

.playoff.teams-4 .playoff-match .team-cont > span {
  width: 228px;
  max-width: 100%;
  font-size: 15px;
  line-height: 38px;
}

.playoff.teams-2 .playoff-match .team-cont > span {
  width: 120px;
}

/*Счет, время матча*/
.playoff .playoff-match .score {
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

.playoff .playoff-match table tr .score.series:not(:first-child) {
  border-left: 1px solid #dddddd;
}

.playoff .playoff-match .score.score--winner {
  font-weight: 700;
}

.playoff .playoff-match .score.score--looser {
  opacity: 0.75;
}

.playoff .playoff-match .additional,
.playoff .playoff-match .datetime {
  position: relative;
  z-index: 2;
  background-color: #f1f1f1;
  color: rgba(var(--color-text-additional), 1);
  text-align: center;
}

.playoff.teams-16 .playoff-match .score {
  width: 18px;
  font-size: 15px;
}

.playoff.teams-16 .playoff-match .additional {
  width: 30px;
  font-size: 11px;
  line-height: 12px;
}

.playoff.teams-16 .playoff-match .datetime {
  width: 42px;
  font-size: 11px;
  line-height: 12px;
}

.playoff.teams-8 .playoff-match .score {
  width: 24px;
  font-size: 16px;
}

.playoff.teams-8 .playoff-match .additional {
  width: 42px;
  font-size: 13px;
  line-height: 14px;
}

.playoff.teams-8 .playoff-match .datetime {
  width: 60px;
  font-size: 13px;
  line-height: 14px;
}

.playoff.teams-4 .playoff-match .score {
  width: 36px;
  font-size: 18px;
  line-height: 19px;
}

.playoff.teams-4 .playoff-match .additional {
  width: 42px;
  font-size: 14px;
  line-height: 15px;
}

.playoff.teams-4 .playoff-match .datetime {
  width: 80px;
  font-size: 15px;
  line-height: 16px;
}

.playoff.teams-2 .playoff-match .score-cont {
  float: left;
  width: 212px;
}

.playoff.teams-2 .playoff-match .score {
  float: left;
  display: table;
  width: 212px;
  height: 92px;
  font-size: 28px;
  font-weight: 600;
}

.playoff.teams-2 .playoff-match .score.series {
  height: 32px;
}

.playoff.teams-2 .playoff-match .score a {
  display: table-cell;
  vertical-align: middle;
}

.playoff.teams-2 .playoff-match .additional {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 400;
  line-height: 32px;
}

.playoff.teams-2 .playoff-match .score .matches-score,
.playoff.teams-2 .playoff-match .score .series-score {
  display: table-row;
  width: 100%;
  vertical-align: middle;
  font-size: 24px;
  font-weight: 400;
}

.playoff.teams-2 .playoff-match .score .series-score a {
  display: table-cell;
  vertical-align: middle;
}

.playoff.teams-2 .playoff-match .score .series-score a {
  color: #ff4847;
}

.playoff.teams-2 .playoff-match .score .matches-score .match-score {
  display: inline-block;
  width: 56px;
  font-weight: 600;
  line-height: 32px;
}

.playoff.teams-2 .playoff-match .score .matches-score .separator {
  display: inline-block;
  width: 20px;
  line-height: 32px;
}

.playoff.teams-2 .playoff-match .datetime {
  float: left;
  display: table;
  width: 212px;
  height: 92px;
  font-size: 19px;
  line-height: 21px;
  text-transform: uppercase;
}

.playoff.teams-2 .playoff-match .datetime > span {
  display: table-cell;
  vertical-align: middle;
}

/*Соединители*/
.playoff.teams-16 .playoff-col.final .playoff-match:first-child:after,
.playoff.teams-16 .playoff-col.semi .playoff-match:after,
.playoff.teams-16 .playoff-col.semi .playoff-match:before,
.playoff.teams-16 .playoff-col.quarter .playoff-match:after,
.playoff.teams-16 .playoff-col.quarter .playoff-match:before,
.playoff.teams-16 .playoff-col.final-8 .playoff-match:after {
  content: '';
  position: absolute;
  background-color: rgba(var(--color-text-base), 0.20);
  z-index: 1;
}

.playoff.teams-16 .playoff-col.final .playoff-match:first-child:after,
.playoff.teams-16 .playoff-col.semi .playoff-match:before,
.playoff.teams-16 .playoff-col.quarter .playoff-match:before {
  width: 1px;
}

.playoff.teams-16 .playoff-col.semi .playoff-match:after,
.playoff.teams-16 .playoff-col.quarter .playoff-match:after,
.playoff.teams-16 .playoff-col.final-8 .playoff-match:after {
  top: 50%;
  left: calc(100% - 1px);
  width: 126px;
  height: 1px;
}

.playoff.teams-16 .playoff-col.quarter .playoff-match:before {
  top: -20px;
  left: calc(50% - 1px);
  height: 113px;
}

.playoff.teams-16 .playoff-col.semi .playoff-match:before {
  top: -76px;
  left: calc(50% - 1px);
  height: 225px;
}

.playoff.teams-16 .playoff-col.final .playoff-match:first-child:after {
  top: -188px;
  left: calc(50% - 1px);
  height: 449px;
}

.playoff.teams-8 .playoff-col.final .playoff-match:after,
.playoff.teams-8 .playoff-col.semi .playoff-match:after,
.playoff.teams-8 .playoff-col.semi .playoff-match:before,
.playoff.teams-8 .playoff-col.quarter .playoff-match:after {
  content: '';
  position: absolute;
  background-color: rgba(var(--color-text-base), 0.20);
  z-index: 1;
}

.playoff.teams-8 .playoff-col.final .playoff-match:first-child:after,
.playoff.teams-8 .playoff-col.semi .playoff-match:after {
  width: 1px;
  left: calc(50% - 1px);
}

.playoff.teams-8 .playoff-col.quarter .playoff-match:after,
.playoff.teams-8 .playoff-col.semi .playoff-match:before {
  top: 50%;
  left: 100%;
  width: 175px;
  height: 1px;
}

.playoff.teams-8 .playoff-col.final .playoff-match:first-child:after {
  top: -129px;
  height: 365px;
}

.playoff.teams-8 .playoff-col.semi .playoff-match:after {
  top: -41px;
  height: 183px;
}

.playoff.teams-4 .playoff-col.final .playoff-match:first-child:after,
.playoff.teams-4 .playoff-col.semi .playoff-match:first-child:after,
.playoff.teams-4 .playoff-col.semi .playoff-match:last-child:after {
  content: '';
  position: absolute;
  background-color: rgba(var(--color-text-base), 0.20);
  z-index: 1;
}

.playoff.teams-4 .playoff-col.final .playoff-match:first-child:after {
  top: -84px;
  left: 50%;
  width: 1px;
  height: 289px;
}

.playoff.teams-4 .playoff-col.semi .playoff-match:last-child:after,
.playoff.teams-4 .playoff-col.semi .playoff-match:first-child:after {
  top: 50%;
  left: 100%;
  height: 1px;
  width: 252px;
}