@charset "UTF-8";
.white-bg {
  background-color: #fff; }

.navbar .nav-link {
  color: #fff !important; }

.results {
  background: #222; }

.results .times {
  color: #fff;
  font-size: 14pt;
  font-weight: bold; }

body {
  background: #eee;
  font-family: "Poppins", "Sans-Serif"; }

a {
  color: #666;
  text-decoration: underline; }
  a:hover {
    color: #000; }

.header {
  background: #111; }
  .header img.logo {
    max-height: 80px;
    width: 180px;
    margin-top: 5px; }
  .header .navbar-toggler:focus {
    box-shadow: none; }

h3 {
  color: #fff;
  font-size: 90%;
  font-weight: 200; }

h4 {
  color: #f7c506;
  font-size: 90%;
  font-weight: 400; }

button.btn-primary {
  background-color: #f7c506;
  color: #222;
  --mdb-btn-box-shadow: 0 4px 9px -4px #222222; }
  button.btn-primary:hover {
    background-color: #000; }
  button.btn-primary:focus, button.btn-primary:active {
    background-color: #cc8e22 !important; }
  button.btn-primary:focus, button.btn-primary:active {
    background-color: #cc8e22 !important; }

/* calculator */
.results table td {
  padding-left: 1rem;
  padding-right: 1rem; }
.results table .times td {
  color: #f7c506;
  padding-left: 1rem;
  padding-right: 1rem; }

.calendar {
  height: 146px;
  overflow: hidden; }
  .calendar.off {
    visibility: hidden; }
  .calendar .event {
    width: 300px;
    background: #f7c506;
    height: 110px;
    margin: 0 5px;
    padding: 10px 20px 0 40px; }
    .calendar .event p {
      margin: 0px;
      padding: 0px; }
    .calendar .event a {
      text-decoration: none !important; }
    .calendar .event h3 {
      font-weight: 600;
      font-size: 1.1rem;
      color: #000;
      padding: 1px 0; }
    .calendar .event span {
      font-size: .8rem; }
      .calendar .event span.round {
        font-weight: 600;
        color: #000; }
      .calendar .event span.date {
        font-weight: 600;
        text-decoration: underline;
        color: #000; }
      .calendar .event span.date-tbc {
        background: rgba(209, 2, 2, 0.795);
        color: #fff;
        padding: 3px 6px; }
      .calendar .event span.price {
        background: #000;
        color: #f7c506;
        padding: 3px 6px; }
      .calendar .event span.race {
        background: #fff;
        padding: 3px 6px; }
      .calendar .event span.book {
        background: rgba(209, 2, 2, 0.795);
        padding: 3px 6px;
        color: #fff; }
  .calendar .slick-arrow {
    position: absolute;
    z-index: 20;
    top: 32%;
    color: #fff;
    font-size: 1.4rem;
    left: 10px;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70); }
    .calendar .slick-arrow.fa-circle-arrow-right {
      right: 10px;
      left: auto; }
  .calendar .slick-dots {
    margin: 10px 0px 0 0;
    padding: 0px;
    display: flex;
    justify-content: center; }
    .calendar .slick-dots li {
      display: inline-block;
      width: 14px;
      height: 6px;
      margin: 0 2px;
      background: #ccc; }
      .calendar .slick-dots li.slick-active {
        background-color: #f7c506; }
      .calendar .slick-dots li button {
        display: none; }

/* table */
table#leaguetable td.runner-name,
table#leaguetable th.runner-name,
table#leaguetable td.champ-points,
table#leaguetable th.champ-points, table.dataTable td.runner-name,
table.dataTable th.runner-name,
table.dataTable td.champ-points,
table.dataTable th.champ-points {
  background-color: #fff;
  z-index: 10;
  font-weight: 700; }
table#leaguetable td.runner-name, table.dataTable td.runner-name {
  font-weight: normal; }
  table#leaguetable td.runner-name span, table.dataTable td.runner-name span {
    font-weight: bold; }
table#leaguetable span.score, table.dataTable span.score {
  font-weight: bold;
  font-size: 1rem; }
table#leaguetable .detail, table.dataTable .detail {
  font-weight: normal;
  line-height: 0.8rem;
  font-size: 0.7rem; }
table#leaguetable td.scoring-round, table.dataTable td.scoring-round {
  background-color: #f7c506;
  /*color: #fff !important*/ }
table#leaguetable th, table#leaguetable td, table.dataTable th, table.dataTable td {
  vertical-align: middle;
  padding-right: 5px !important;
  padding-left: 5px !important;
  min-width: 60px;
  text-align: center !important; }
  table#leaguetable th.runner-name, table#leaguetable td.runner-name, table.dataTable th.runner-name, table.dataTable td.runner-name {
    text-align: left !important; }
table#leaguetable th, table#leaguetable td, table.dataTable th, table.dataTable td {
  font-weight: normal;
  font-size: 0.8rem;
  min-width: 70px; }

.filters-row {
  position: relative;
  height: 50px; }
  .filters-row .col-sm-12 {
    width: 154px !important; }
  .filters-row select, .filters-row input {
    font-size: 0.8rem; }
  .filters-row .category {
    left: 96px; }

#leaguetable_filter {
  position: absolute; }
  #leaguetable_filter input {
    max-width: 140px; }
    @media (min-width: 768px) {
      #leaguetable_filter input {
        max-width: auto; } }

.table-key p, .table-key li {
  font-size: 0.9rem; }

/* table styles */
table.dataTable td,
table.dataTable th {
  font-size: 0.8rem;
  padding: 12px 8px; }

table.dataTable th {
  line-height: 1.1rem; }

@media (min-width: 768px) {
  table.dataTable th.sorting:after {
    margin-top: 5px; }

  table.dataTable th.sorting:before {
    margin-bottom: 5px; } }
@media (max-width: 991.98px) {
  table.dataTable th.sorting:after,
  table.dataTable th.sorting:before {
    content: "" !important;
    display: none !important; } }
.champ-btns {
  flex: 0.92 0 0 !important; }
  .champ-btns a.btn-primary {
    border: 0px;
    background: #ccc;
    color: #666;
    font-size: 0.8rem;
    text-decoration: none !important;
    border-radius: 5px 5px 0 0; }
    .champ-btns a.btn-primary.active {
      background: #f7c506;
      color: #222;
      font-weight: 600; }
  .champ-btns.mobile a.btn-primary.active {
    background: #fff;
    color: #222;
    text-decoration: underline; }

.row.footer {
  margin-top: 10px !important;
  margin-bottom: 20px !important; }

.page-item.active .page-link {
  background-color: #f7c506;
  border-color: #f7c506; }

.champ-guide {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins";
  background-color: #000; }
  .champ-guide .header {
    width: 100%;
    position: fixed;
    z-index: 10;
    height: 85px; }
    .champ-guide .header:after {
      background: #fff;
      opacity: 1;
      content: '';
      display: block;
      position: absolute;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 2;
      clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 80%); }
    .champ-guide .header .logo {
      width: 30%;
      float: right;
      z-index: 3;
      position: relative; }
      .champ-guide .header .logo img {
        max-height: 75px;
        margin-top: 5px;
        float: right; }
    .champ-guide .header .title {
      z-index: 3;
      width: 60%;
      margin-left: 10px;
      padding-top: 5px;
      float: left;
      text-align: left;
      position: relative; }
    .champ-guide .header h1 {
      font-weight: 400;
      font-size: 0.8rem;
      line-height: 1.2rem;
      padding: 0px;
      margin: 0px; }
    .champ-guide .header h2 {
      font-weight: 700;
      font-size: 1.7rem;
      padding: 0px;
      margin: 0px;
      color: #f7c506;
      line-height: 1.9rem; }
      .champ-guide .header h2 span {
        font-weight: 300; }
  .champ-guide #main-page {
    width: 100%; }
    .champ-guide #main-page .page-item {
      display: flex;
      align-items: center;
      width: calc(100% - 20px);
      height: calc(100vh - 20px);
      padding: 20px 20px 20px 0;
      margin: auto 0;
      background-color: #000;
      color: #fff; }
      .champ-guide #main-page .page-item h3 {
        margin-top: 0px;
        color: #f7c506 !important; }
      .champ-guide #main-page .page-item a {
        color: #f7c506; }
      .champ-guide #main-page .page-item h4 {
        color: #f7c506; }
      .champ-guide #main-page .page-item:nth-child(even) {
        background-color: #f0f2f3;
        color: #000; }
        .champ-guide #main-page .page-item:nth-child(even) h4 {
          color: #000; }
      .champ-guide #main-page .page-item .content {
        max-width: 600px;
        display: block;
        font-size: 0.8rem;
        margin: 85px 10px auto 10px;
        width: calc(100% - 100px);
        height: calc(100% - 85px);
        overflow-y: hidden;
        text-align: left;
        position: relative; }
        @media (min-width: 768px) {
          .champ-guide #main-page .page-item .content.overview {
            padding-bottom: 70px; }
            .champ-guide #main-page .page-item .content.overview svg {
              bottom: 0px !important; } }
        @media (min-width: 768px) {
          .champ-guide #main-page .page-item .content {
            margin: auto;
            height: auto; } }
        .champ-guide #main-page .page-item .content h3 {
          font-weight: 600;
          line-height: 1.8rem;
          font-size: 1.8rem;
          color: #000;
          margin-bottom: 30px; }
          @media (min-width: 768px) {
            .champ-guide #main-page .page-item .content h3 {
              line-height: 3.8rem;
              font-size: 3.8rem;
              font-weight: 700;
              letter-spacing: -2px; } }
        .champ-guide #main-page .page-item .content h4 {
          font-size: 0.9rem;
          font-weight: 600;
          padding: 5px 0px 0px 0;
          margin: 0px; }
        .champ-guide #main-page .page-item .content p {
          padding-top: 0px;
          padding-bottom: 14px;
          margin: 0px;
          font-size: 0.8rem; }
          .champ-guide #main-page .page-item .content p b {
            font-weight: 600; }
          @media (min-width: 768px) {
            .champ-guide #main-page .page-item .content p {
              line-height: 1.3rem;
              font-size: 1rem; } }
        .champ-guide #main-page .page-item .content ul {
          padding-left: 20px; }
          @media (min-width: 768px) {
            .champ-guide #main-page .page-item .content ul {
              line-height: 1.3rem;
              font-size: 1rem; } }
  .champ-guide ul.side-nav {
    position: fixed;
    right: -10px;
    top: 105px;
    bottom: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-content: center;
    width: 115px;
    z-index: 999;
    padding: 0px;
    margin: 0px; }
    @media (min-width: 992px) {
      .champ-guide ul.side-nav {
        width: 185px; } }
    .champ-guide ul.side-nav li {
      transform: skewX(10deg);
      font-size: 0.7rem;
      font-weight: 600;
      color: black;
      list-style: none;
      margin-right: 0px;
      margin-bottom: 5px;
      background-color: #f7c506;
      padding: 5px;
      text-align: right;
      opacity: 0.7;
      margin-left: 10px; }
      .champ-guide ul.side-nav li span {
        transform: skewX(-10deg);
        padding-right: 15px; }
      .champ-guide ul.side-nav li:hover {
        cursor: pointer;
        border-color: cadetblue; }
      .champ-guide ul.side-nav li.active {
        font-size: 1.1rem;
        opacity: 1;
        margin-left: 0px; }
      .champ-guide ul.side-nav li span {
        display: inline-block; }
      @media (min-width: 992px) {
        .champ-guide ul.side-nav li {
          font-size: 1rem;
          width: 185px; }
          .champ-guide ul.side-nav li.active {
            font-size: 1.5rem; }
          .champ-guide ul.side-nav li span {
            padding-right: 45px; } }
  .champ-guide p.scroll {
    color: #999;
    position: relative;
    bottom: -5px;
    left: 40px;
    width: 100px; }
  .champ-guide .arrows {
    width: 60px;
    height: 72px;
    position: absolute;
    left: 17px;
    margin-left: -30px;
    bottom: 30px;
    transform: scale(0.5); }
    .champ-guide .arrows.top {
      transform: rotate(180deg) scale(0.5);
      top: 10px; }
      @media (min-width: 768px) {
        .champ-guide .arrows.top {
          bottom: auto; } }
  .champ-guide .arrows path {
    stroke: #f7c506;
    fill: transparent;
    stroke-width: 1px;
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite; }
  .champ-guide .arrows.top path {
    stroke: #000; }
  .champ-guide a#page-top {
    color: #000 !important; }
@keyframes arrow {
  0% {
    opacity: 0; }
  40% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-webkit-keyframes arrow /*Safari and Chrome*/ {
  0% {
    opacity: 0; }
  40% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }
  .champ-guide .arrows path.a1 {
    animation-delay: -1s;
    -webkit-animation-delay: -1s;
    /* Safari 和 Chrome */ }
  .champ-guide .arrows path.a2 {
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s;
    /* Safari 和 Chrome */ }
  .champ-guide .arrows path.a3 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    /* Safari 和 Chrome */ }
  @media (max-width: 991.98px) {
    .champ-guide {
      /* For mobile phones: */ }
      .champ-guide ul.side-nav li {
        padding: 2px; } }

ul.pagination li a {
  font-size: 0.8rem !important;
  padding-left: 0.6rem;
  padding-right: 0.4rem; }

.dataTables_info {
  font-size: 0.8rem; }

.table-foot-notes {
  font-size: 0.8rem; }

.page-link {
  color: #111; }

ul.rules-side-nav {
  position: fixed;
  margin: 0px;
  padding: 0px;
  left: 0px; }
  ul.rules-side-nav li {
    list-style-type: none;
    padding: 5px 10px;
    background: #eee;
    margin-bottom: 2px;
    font-size: .8rem; }
    @media (min-width: 992px) {
      ul.rules-side-nav li {
        font-size: 1rem;
        padding: 8px 30px; } }
    ul.rules-side-nav li.active {
      background: #f7c506; }
    ul.rules-side-nav li a {
      text-decoration: none; }

.rules-page .page-item .content p, .rules-page .page-item .content li {
  font-size: 0.8rem; }
  @media (min-width: 992px) {
    .rules-page .page-item .content p, .rules-page .page-item .content li {
      font-size: 1rem; } }
.rules-page .page-item .content:after {
  content: '';
  width: 100%;
  height: 60px;
  display: block; }
.rules-page h3 {
  color: #111;
  font-size: 1.6rem; }

/*# sourceMappingURL=styles.css.map */