/*--------------------------------------------------------*/
/* font */
/*--------------------------------------------------------*/
body,
.MenuLink,
.Timeline-wrapper,
.ScheduleWeek-title,
.nav-tabs,
.ResultsAndVods-title,
table tr th,
table tr td,
span,
.MatchTable,
div[class^="EventInfo-"],
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
.SpotlightTile-title {
  font-family: var(--font-family);
}

/*--------------------------------------------------------*/
/* adjust */
/*--------------------------------------------------------*/
.LinkOut {
  align-items: baseline;
}

/*--------------------------------------------------------*/
/* padding & margin */
/*--------------------------------------------------------*/

.HGC-MobileNav {
  margin-top: 48px;
}

.HGC-NavBar-Logo {
  margin-top: 1rem;
}

/*--------------------------------------------------------*/
/* image */
/*--------------------------------------------------------*/

.HGC-NavBar-Logo {
  background-image: url('../images/skin/BES_276_Transparent.png') !important;
}

.EsportsPage-background {
  background-image: url('../images/skin/header-bg-small.jpg') !important;
  background-size: 100% auto;
}

#SocialEngagementPanel {
  background-image: url('../images/skin/social-bg-small.jpg');
  background-size: 100% auto;
}

.HGC-Navigation-Spoiler-Wrapper,
.Navbar.is-compact .Navbar-siteMenu .Navbar-modalContent {
  background-image: url(../images/skin/nav-bg-small.jpg);
}

.SocialLink-facebook {
  background-image: url(../images/skin/esports-assets.png);
}

@media screen and (-webkit-min-device-pixel-ratio: 1),
not all,
not all,
screen and (min-resolution: 1dppx) {

  .Timeline-fillbarLensflare,
  .EventInfo-ScheduleTabLink:before,
  .EventInfo-BracketTabLink:before {
    background-image: url(../images/skin/schedule-assets.png);
  }
}

@media(min-width: 960px) {
  .EsportsPage-background {
    background-image: url('../images/skin/header-bg.jpg') !important;
    background-size: auto;
  }

  .SubMenu::before {
    background-image: url(../images/skin/notch.png);
  }

  #SocialEngagementPanel {
    background-image: url('../images/skin/social-bg.jpg');
    background-repeat: repeat-x;
    background-size: auto;
  }
}

@media(min-width: 1120px) {

  .HGC-Navigation-Spoiler-Wrapper,
  .Navbar.is-compact .Navbar-siteMenu .Navbar-modalContent {
    background-image: url(../images/skin/nav-bg.jpg);
  }
}

/*--------------------------------------------------------*/
/* color - rgb */
/*--------------------------------------------------------*/

.table-bordered thead tr,
.table-striped thead tr {
  background: rgba(13, 24, 48, .2) top;
}

.table-bordered tbody tr:nth-child(even),
.table-striped tbody tr:nth-child(even) {
  background: rgba(79, 93, 116, .2);
}

.HGC-dropdown-wrapper.HGC-dropdown--dark .HGC-dropdown-item:hover {
  color: var(--color-light1);
  background-color: var(--color-darkest);
}

.MatchTable:hover .MatchTable-team {
  background: rgba(79, 93, 116, .2);
}

.HGC-dropdown-wrapper.Timeline-phaseSelector-wrapper .HGC-dropdown-button:active,
.HGC-dropdown-wrapper.Timeline-phaseSelector-wrapper .HGC-dropdown-button:hover,
.HGC-dropdown-wrapper.Timeline-phaseSelector-wrapper .HGC-dropdown-button[aria-expanded=true]:active,
.HGC-dropdown-wrapper.Timeline-phaseSelector-wrapper .HGC-dropdown-button[aria-expanded=true]:hover {
  border: 2px solid var(--color-sub);
}

.SpotlightTile-titleWrapper {
  background: linear-gradient(0deg, rgba(13, 20, 38, .6) 50%, rgba(13, 20, 38, 0));
}

.SpotlightTile-wrapper:hover .SpotlightTile-img {
  box-shadow: inset 0 0 0 2px rgba(79, 93, 116, .6);
}

.ResultsAndVods .OverflowScroller-rightArrow {
  background: radial-gradient(ellipse farthest-side at center right, var(--color-dark2) 0%, rgba(0, 0, 0, 0) 100%);
}

.ResultsAndVods .OverflowScroller-rightArrow:focus,
.ResultsAndVods .OverflowScroller-rightArrow:hover {
  background: radial-gradient(ellipse farthest-side at center right, var(--color-dark4) 0%, rgba(0, 0, 0, 0) 100%)
}

.ResultsAndVods .OverflowScroller-rightArrow:before {
  background: radial-gradient(ellipse farthest-side at center right, var(--color-dark4) 30%, rgba(0, 0, 0, 0) 60%)
}

/*--------------------------------------------------------*/
/* color - var */
/*--------------------------------------------------------*/
body {
  background-color: var(--color-darkest) !important;
  color: var(--color-sub);
}

p {
  color: var(--color-light1);
}

.Stage-container.group .Stage-subDates,
.Stage-container.phoenix .Stage-subDates {
  color: var(--color-light2);
}

.tab-content {
  color: var(--color-light1);
  border-bottom: 1px solid var(--color-dark1);
}

/**/
.BracketStandings .BracketStandings-header .BracketStandings-header--row .BracketStandings-header-element span {
  color: var(--color-light1);
}

.BracketStandings .BracketStandings-body .BracketStandings-body--row.lower,
.BracketStandings .BracketStandings-body .BracketStandings-body--row.upper {
  background: var(--color-dark2);
}

.BracketStandings .BracketStandings-body {
  border: 1px solid var(--color-dark1);
}

.BracketStandings .BracketStandings-body .BracketStandings-body--row {
  background-color: rgba(0, 0, 0, .1);
}

.BracketStandings .BracketStandings-body .BracketStandings-body--row.eliminated:hover,
.BracketStandings .BracketStandings-body .BracketStandings-body--row.lower:hover,
.BracketStandings .BracketStandings-body .BracketStandings-body--row.upper:hover {
  background-color: var(--color-dark2);
  filter: brightness(1.2);

}

a:focus,
a:hover {
  color: var(--color-sub);
  filter: brightness(1.2);
}

.BracketStandings .BracketStandings-body .BracketStandings-body--row .BracketStandings-column span {
  color: var(--color-light1);
}

.BracketStandings .BracketStandings-body .BracketStandings-body--row.upper .Placement-bar {
  border: 1px solid var(--color-sub);
  background: linear-gradient(90deg, #fff, var(--color-sub));
  box-shadow: 0 0 15px var(--color-sub2);
}

.BracketStandings .BracketStandings-body .BracketStandings-body--row .BracketStandings-column .Placement-text {
  color: var(--color-sub);
}

.BracketStandings .BracketStandings-body .BracketStandings-body--row.eliminated .Placement-text {
  color: var(--color-sub3);
}

/* nav*/
.MenuLink:active,
.MenuLink:focus,
.MenuLink:link,
.MenuLink:visited,
.blog .table a:visited,
.blog p a:visited,
.blog table a:visited,
.table a,
[data=blog] .table a:visited,
[data=blog] p a:visited,
[data=blog] table a:visited,
a,
a:visited,
p a,
table a {
  color: var(--color-sub);
}

.blog .table a:visited,
.blog p a:visited,
.blog table a:visited,
[data=blog] .table a:visited,
[data=blog] p a:visited,
[data=blog] table a:visited,
a:visited {
  color: var(--color-light1);

}

.LinkOut:active:hover,
.LinkOut:focus:hover,
.LinkOut:link:hover,
.LinkOut:visited:hover {
  color: var(--color-light6);
}

.MenuItem:hover {
  background-color: var(--color-dark1);
}

.MenuItem--showSubMenu,
.MenuItem--showSubMenu:hover {
  background-color: var(--color-light3);
}

.SubMenu {
  background-color: var(--color-darkest);
  border: 1px solid var(--color-light4);
}

/* nav bg*/
.Navbar.is-compact .Navbar-mobile,
.Navbar.is-compact .Navbar-siteMenu .Navbar-modalContent {
  background-color: var(--color-dark4);
}

.nav-tabs .active {
  background-image: radial-gradient(ellipse farthest-side at center bottom, var(--gradient-dark2), rgba(0, 0, 0, 0) 75%);
}

.HGC-Navigation-Spoiler-Wrapper {
  background-color: var(--color-dark4);
}

.HGC-Navigation-Spoiler-Wrapper {
  border-top: 1px solid var(--color-dark3);
  border-bottom: 1px solid var(--color-dark2);
}

.ResultsAndVods-wrapper .TabsSimpleAtDifferentBreakpoints-title {
  border-bottom: 1px solid var(--color-light3);
}

.ResultsAndVods-wrapper {
  border-top: 2px solid var(--color-dark3);
}

.SchedulePage-regionNav {
  border-image: linear-gradient(90deg, var(--color-light3), var(--color-sub));
}

@media (min-width: 960px) {
  .Tabs--gradientBorder {
    border-image: linear-gradient(90deg, var(--color-light3), var(--color-sub));
  }
}

/* ad */
.SpotlightTile-img {
  box-shadow: inset 0 0 0 2px var(--color-dark2);
}

/**/
.nav-tabs {
  border-bottom: 1px solid var(--color-dark2);
}

.HGC-dropdown-wrapper.Timeline-phaseSelector-wrapper .HGC-dropdown-button,
.HGC-dropdown-wrapper.Timeline-phaseSelector-wrapper .HGC-dropdown-button[aria-expanded=true] {
  border: 2px solid var(--color-dark3);
  border-image: linear-gradient(var(--color-light3), var(--color-dark3)) 10 49%;
  text-shadow: 0 0 15px var(--color-light3);
}

.border-defaults,
.Timeline-borderWrapper,
.Timeline-item,
.Timeline-spacer,
.Timeline-subgroup,
.Timeline-leftArrow {
  border-image: linear-gradient(var(--color-light3), var(--color-dark3)) 10 49%;
}

.Timeline-doubleRow .Timeline-navigationWrapper {
  border-image: border-image: linear-gradient(var(--color-light3), var(--color-dark3)) 10 49%;
}

.Timeline-navigationWrapper {
  background: linear-gradient(var(--gradient-dark6), var(--gradient-dark5));
}

.Timeline-navigation {
  background-color: var(--gradient-dark2);
}

.Timeline-item {
  background-image: linear-gradient(var(--gradient-dark2), rgba(0, 0, 0, 0));
}

.Timeline-fillbar {
  background-color: var(--color-sub);
}

.Timeline-fillbarDivider {
  background-color: var(--color-dark4);
}

@media (min-width: 640px) {

  .Timeline-phaseSelector,
  .Timeline-yearSelector {
    background: linear-gradient(180deg, var(--gradient-dark1), var(--gradient-dark2));
  }
}

.StartTime-date,
.ResultsAndVods-title {
  color: var(--color-light5);
}

.StartTime-time,
.TabsSimpleAtDifferentBreakpoints-content {
  color: var(--color-light1);
}

.ResultsAndVods-title {
  color: var(--color-light5);

}

.MatchVod {
  border: 2px solid var(--color-dark2);
}

.ResultsAndVods-item:hover .MatchVod {
  border: 2px solid var(--gradient-dark5);
}

.ResultsAndVods-item:hover .MatchTable {
  background: linear-gradient(180deg, var(--gradient-dark5), var(--gradient-dark6));
}

/* media */
#SocialEngagementPanel {
  border-top: 2px solid var(--color-dark3);
}

/* table */

.MatchTable {
  background: linear-gradient(180deg, var(--gradient-dark1), var(--gradient-dark2));
}

.table-bordered {
  background: var(--color-darkest);
  ;
  border: 2px solid var(--color-light4);
}

.table-bordered tbody tr {
  box-shadow: -4px -4px 4px -4px var(--color-light4);
  ;
}

.Standings-table .table-bordered tbody tr:hover,
.Standings-table .table-striped tbody tr:hover {
  background-color: var(--color-light3);
}


.blog .table tbody th td,
.blog .table tbody tr td,
.blog table tbody th td,
.blog table tbody tr td,
.table tbody th td,
.table tbody tr td,
[data=blog] .table tbody th td,
[data=blog] .table tbody tr td,
[data=blog] table tbody th td,
[data=blog] table tbody tr td,
table tbody th td,
table tbody tr td {
  color: var(--color-table);
}

.LinkOut,
.LinkOut:active,
.LinkOut:focus,
.LinkOut:link,
.LinkOut:visited {
  color: var(--color-light5);

}

.Competitor .MatchTeam-name,
.MatchTable-team .MatchTeam-name {
  color: var(--color-table);

}

.ScheduledMatch .MatchTable {
  background: linear-gradient(180deg, var(--gradient-dark3), var(--gradient-dark4));
}

.MatchTable:hover {
  background: linear-gradient(180deg, var(--gradient-dark1), var(--gradient-dark3));
}

.ScheduledMatch:hover {
  background: linear-gradient(180deg, var(--gradient-dark5), var(--gradient-dark6));

}

.Schedule-container .ScheduledMatches .OverflowScroller-rightArrow {
  background: linear-gradient(270deg, var(--color-darkest), rgba(0, 0, 0, 0));

}

.ScheduleWeek-dateRange,
.EventInfo-label {
  color: var(--color-sub);
}

@media(min-width: 640px) {
  .Schedule-container .tab-content {
    background-color: var(--gradient-dark2);
    background: linear-gradient(180deg, var(--gradient-dark1), var(--gradient-dark2));
  }
}

@media(min-width: 960px) {
  .HGC-Navigation-Spoiler-Wrapper {
    border-right: 1px solid var(--color-dark1);
  }
}

/**/
.custom-scrollbar,
.hgc-scrollbar {
  overflow-x: scroll;
}

@media(min-width: 960px) {

  .custom-scrollbar,
  .hgc-scrollbar {
    overflow-x: hidden;
  }
}

.custom-scrollbar::-webkit-scrollbar,
.hgc-scrollbar::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.hgc-scrollbar::-webkit-scrollbar {
  background-color: var(--color-darkest);
  height: 8px;
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.hgc-scrollbar::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background-color: var(--color-dark3);
}

.custom-scrollbar::-webkit-scrollbar-track,
.hgc-scrollbar::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background-color: var(--color-dark1);
}

.custom-scrollbar::-webkit-scrollbar-corner,
.hgc-scrollbar::-webkit-scrollbar-corner,
.table-responsive::-webkit-scrollbar-corner,
.hgc-scrollbar::-webkit-scrollbar-corner {
  background-color: transparent;
}

.EsportsPage-wrapper .EsportsPage-background-left,
.EsportsPage-wrapper .EsportsPage-background-right {
  border-right: 2px solid var(--color-dark2);
  background-image: url(../images/skin/bg-triangles.png), linear-gradient(to left, var(--color-dark1) 0, rgba(0, 0, 0, 0) 30px);
}

.MenuItem.hasSubMenu.MenuItem--showSubMenu>.MenuLink::after,
.MenuItem.hasSubMenu>.MenuLink::after,
.dropdown .dropdown-toggle:after {
  background-image: url(../images/skin/blog-icons.png);
}

.blog .table thead tr th,
.blog table thead tr th,
.table thead tr th,
[data=blog] .table thead tr th,
[data=blog] table thead tr th,
table thead tr th {
  font-family: var(--font-family);
}

.Button:not([disabled]):active,
.Button:not([disabled]):hover,
.btn:not([disabled]):active,
.btn:not([disabled]):hover,
.button:not([disabled]):active,
.button:not([disabled]):hover {
  border-color: var(--gradient-dark5);
}

.Button, .btn, .button{
  font-family: var(--font-family);
  border-color: var(--color-light3);
  background-color: var(--gradient-dark6);
}