/* LEFT MENU + CONTENT */
.boxUnderContent {
  background-color: var(--color-background-1);
  margin: -10px -9px 0;
  padding: 10px 9px 0;
}
.boxUnderContent .boxOverContent {
  margin-bottom: 10px;
}
.boxUnderContent.isSticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.mobile_ad .boxUnderContent.isSticky,
.tablet_ad .boxUnderContent.isSticky {
  display: none !important;
}
@media only screen and (max-width: 799px) {
  .responsive .boxUnderContent {
    margin: 0;
    padding: 0;
  }
  .responsive .boxUnderContent .boxOverContent {
    margin: 10px 0 0 0;
  }
}
.boxOverContent {
  cursor: pointer;
  user-select: none;
  background-color: var(--color-boxOverContent-1);
  display: none;
}
.boxOverContent--detail {
  max-width: 660px;
  position: sticky;
  margin: 0 auto;
  bottom: 0;
  z-index: 3;
}
.detail-experimental.mobile_ad .boxOverContent,
.detail-experimental.tablet_ad .boxOverContent,
.mobile_ad .boxOverContent--detail,
.tablet_ad .boxOverContent--detail {
  display: none !important;
}
.boxOverContent--detailModern {
  position: sticky;
  bottom: 0;
  margin-bottom: -10px;
  padding-top: 10px;
  margin-top: auto;
}
.boxOverContent--active {
  display: block;
}
.boxOverContent--a {
  background-color: var(--color-background-1);
  margin: -10px -9px 0;
  padding: 10px 9px 0;
}
.boxOverContent--a .boxOverContent {
  margin-bottom: 10px;
}
.boxOverContent--a.isSticky {
  position: sticky;
  top: 0;
  z-index: 4;
}
.boxOverContent--type-5 {
  margin-bottom: 10px;
}
.boxOverContent--type-5 .boxOverContent__banner {
  grid-template: none;
}
.boxOverContent--type-5 .boxOverContent__image {
  width: 100%;
}
.boxOverContent--type-5 .boxOverContent__close {
  position: absolute;
  background-image: url(/res/_fs/build/decoration-sprite.aa80bcd.svg);
  background-position-x: -232px;
  background-position-y: 7px;
  top: 0;
  right: 0;
}
.boxOverContent--standings {
  max-width: 660px;
  margin: 0 auto 10px auto;
}
.boxOverContent__banner {
  display: grid;
  grid-template: " .    .   .           .    .    .   icon        icon " 12px " .    .   logo        .    text .   icon        icon " max-content " .    tac tac         tac  tac  tac tac         .    " max-content " .    .   .           .    .    .   .           .    " 8px / 20px 1fr max-content 15px auto 1fr max-content 20px;
  color: var(--color-boxOverContent-2);
  position: relative;
}
.boxOverContent__bannerLink {
  position: absolute;
  width: 100%;
  height: 100%;
}
.boxOverContent__image {
  grid-area: logo;
  align-self: center;
}
.boxOverContent__text {
  grid-area: text;
  font-size: 16px;
  font-family: 'Arial', 'Helvetica', sans-serif, 'Tahoma', 'Verdana';
  line-height: 18px;
  align-self: center;
  font-weight: bold;
}
.boxOverContent__text span {
  color: var(--color-boxOverContent-3);
}
.boxOverContent__tac {
  grid-area: tac;
  opacity: 0.7;
  margin-top: 3px;
  text-align: center;
}
.boxOverContent__close {
  grid-area: icon;
  opacity: 0.5;
  transition: 250ms;
  width: 40px;
  height: 40px;
  z-index: 4;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boxOverContent__close:hover {
  opacity: 1;
  text-decoration: none;
}
.boxOverContent__svg {
  width: 13px;
  height: 13px;
  color: var(--color-boxOverContent-2);
}
.boxOverContent__arrow {
  display: none;
}
.boxOverContent__getOffer {
  display: none;
}
.boxOverContent__getOfferLink {
  background-color: var(--color-boxOverContent-2);
  color: var(--color-boxOverContent-1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  font-weight: bold;
  font-size: 12px;
  margin: 0 10px 10px 10px;
  text-decoration: none;
  text-align: center;
  flex: 1;
}
.boxOverContent__getOfferLink:hover {
  text-decoration: none;
}
@media only screen and (max-width: 799px) {
  .responsive:not(.detailbody) .boxOverContent__banner {
    grid-template: " .    .           .     .     icon  icon " 10px " .    logo        .     text  icon  icon " max-content " .    tac         tac   tac   tac   .    " max-content " .    .           .     .     .     .    " 10px / 12px max-content 12px 1fr 20px 12px;
  }
  .responsive:not(.detailbody) .boxOverContent__banner.isExpanded .boxOverContent__tac {
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
  }
  .responsive:not(.detailbody) .boxOverContent__banner.isExpanded .boxOverContent__arrow {
    transform: rotate(225deg) translate(-5px, -7px);
  }
  .responsive:not(.detailbody) .boxOverContent__banner.isExpanded + .boxOverContent__getOffer {
    display: flex;
  }
  .responsive:not(.detailbody) .boxOverContent--type-5 .boxOverContent__banner {
    grid-template: none;
  }
  .responsive:not(.detailbody) .boxOverContent--type-5 .boxOverContent__bannerLink {
    display: block;
  }
  .responsive:not(.detailbody) .boxOverContent--type-5 .boxOverContent__image {
    width: 100%;
  }
  .responsive:not(.detailbody) .boxOverContent--type-5 .boxOverContent__close {
    width: 40px;
  }
  .responsive:not(.detailbody) .boxOverContent--a {
    margin: 0;
    padding: 0;
  }
  .responsive:not(.detailbody) .boxOverContent__bannerLink {
    display: none;
  }
  .responsive:not(.detailbody) .boxOverContent__image {
    width: var(--width-boxOverContent-logo);
  }
  .responsive:not(.detailbody) .boxOverContent__text {
    font-size: 12px;
    line-height: 14px;
    text-decoration: none;
  }
  .responsive:not(.detailbody) .boxOverContent__tac {
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    line-height: 12px;
    text-align: initial;
  }
  .responsive:not(.detailbody) .boxOverContent__close {
    width: 32px;
  }
  .responsive:not(.detailbody) .boxOverContent__close ~ .boxOverContent__arrow {
    display: none;
  }
  .responsive:not(.detailbody) .boxOverContent__arrow {
    transform: rotate(45deg) translate(1px, 2px);
    grid-area: icon;
    border-style: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: relative;
    align-self: center;
    justify-self: center;
    transition: 250ms;
    opacity: 0.5;
  }
}
@media only screen and (max-width: 479px) {
  .responsive.detailbody .boxOverContent__banner {
    grid-template: " .    .           .     .     icon  icon " 10px " .    logo        .     text  icon  icon " max-content " .    tac         tac   tac   tac   .    " max-content " .    .           .     .     .     .    " 10px / 12px max-content 12px 1fr 20px 12px;
  }
  .responsive.detailbody .boxOverContent__banner.isExpanded .boxOverContent__tac {
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
  }
  .responsive.detailbody .boxOverContent__banner.isExpanded .boxOverContent__arrow {
    transform: rotate(225deg) translate(-5px, -7px);
  }
  .responsive.detailbody .boxOverContent__banner.isExpanded + .boxOverContent__getOffer {
    display: flex;
  }
  .responsive.detailbody .boxOverContent--type-5 .boxOverContent__banner {
    grid-template: none;
  }
  .responsive.detailbody .boxOverContent--type-5 .boxOverContent__bannerLink {
    display: block;
  }
  .responsive.detailbody .boxOverContent--type-5 .boxOverContent__image {
    width: 100%;
  }
  .responsive.detailbody .boxOverContent--type-5 .boxOverContent__close {
    width: 40px;
  }
  .responsive.detailbody .boxOverContent--a {
    margin: 0;
    padding: 0;
  }
  .responsive.detailbody .boxOverContent__bannerLink {
    display: none;
  }
  .responsive.detailbody .boxOverContent__image {
    width: var(--width-boxOverContent-logo);
  }
  .responsive.detailbody .boxOverContent__text {
    font-size: 12px;
    line-height: 14px;
    text-decoration: none;
  }
  .responsive.detailbody .boxOverContent__tac {
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    line-height: 12px;
    text-align: initial;
  }
  .responsive.detailbody .boxOverContent__close {
    width: 32px;
  }
  .responsive.detailbody .boxOverContent__close ~ .boxOverContent__arrow {
    display: none;
  }
  .responsive.detailbody .boxOverContent__arrow {
    transform: rotate(45deg) translate(1px, 2px);
    grid-area: icon;
    border-style: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: relative;
    align-self: center;
    justify-self: center;
    transition: 250ms;
    opacity: 0.5;
  }
}