:root,
:root [ec-theme="light"] {
  --ec-interaction: #e12c1f;
  --ec-interaction-hover: #ed8179;
  --ec-interaction-pressed: #b52318;
  --ec-interaction-compl: #ffffff;
  --ec-text-01: #000;
  --ec-text-01-hover: #396b83;
  --ec-text-01-pressed: #0b1418;
  --ec-text-02: #455c67;
  --ec-text-03: #9c9c9c;
  --ec-text-04: #fff;
  --ec-text-05: #000;
  --ec-ui-00: #ffffff;
  --ec-ui-01: #e3e8ea;
  --ec-ui-02: #d0d8db;
  --ec-ui-03: #b3c0c5;
  --ec-ui-04: #999999;
  --ec-background: #f1f3f8;
  --ec-elevation-01: #ffffff;
  --ec-elevation-02: #f85f31;
  --ec-elevation-03: #ffffff;
  --ec-support-01: #0a9504;
  --ec-support-02: #205bc8;
  --ec-support-03: #e87223;
  --ec-support-04: #cb333b;
  --ec-support-05: #f8d148;
  --ec-secondary-01: #f3ad5d;
}
/*color palete dark*/
:root [ec-theme="dark"] {
  --ec-interaction: #f8d148;
  --ec-interaction-hover: #fceaaa;
  --ec-interaction-pressed: #f6c517;
  --ec-interaction-compl: #2a2e33;
  --ec-text-01: #ffffff;
  --ec-text-01-hover: rgba(255, 255, 255, 0.9);
  --ec-text-01-pressed: rgba(255, 255, 255, 0.7);
  --ec-text-02: rgba(255, 255, 255, 0.7);
  --ec-text-03: rgba(255, 255, 255, 0.5);
  --ec-text-04: #ffffff;
  --ec-text-05: #000;
  --ec-ui-00: #ffffff0c;
  --ec-ui-01: rgba(255, 255, 255, 0.1);
  --ec-ui-02: rgba(255, 255, 255, 0.25);
  --ec-ui-03: rgba(255, 255, 255, 0.35);
  --ec-ui-04: rgba(255, 255, 255, 0.55);
  --ec-background: #2a2e33;
  --ec-elevation-01: #222529;
  --ec-elevation-02: #f85f31;
  --ec-elevation-03: linear-gradient(90deg, #ef4135 0%, #ff762d 100%);
  --ec-support-01: #0a9504;
  --ec-support-02: #205bc8;
  --ec-support-03: #e87223;
  --ec-support-04: #cb333b;
  --ec-support-05: #f8d148;
  --ec-secondary-01: #f3ad5d;
}
/*dark/light custom blocks*/
:root {
  --ec-card-theme: dark;
  --ec-card-top-theme: dark;
  --ec-card-predicted-theme: dark;
  --ec-bg-theme: light;
  --ec-custom-switch-joker: light;
  --ec-custom-alert: dark;
  --ec-custom-no-leagues: dark;
  --ec-custom-landing: light;
}
/*custom images*/
:root {
  --ec-plus: url("https://acc-wkpool.espngoal.nl/assets//espn/images/plus.svg") center no-repeat;
  --ec-minus-interaction: url('data:image/svg+xml,<svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="1" d="M0 0H12V3.5H0V0Z" fill="%2300EEFF"/></svg>')
    center no-repeat;
  --ec-minus-dark: url('data:image/svg+xml,<svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="1" d="M0 0H12V3.5H0V0Z" fill="%23FFFFFF"/></svg>')
    center no-repeat;
  --ec-minus-light: url('data:image/svg+xml,<svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="1" d="M0 0H12V3.5H0V0Z" fill="%231A313C"/></svg>')
    center no-repeat;
  --ec-add-icon: url("https://acc-wkpool.espngoal.nl/assets//espn/images/add.svg") center no-repeat;
  --ec-add-icon-active: url("https://acc-wkpool.espngoal.nl/assets//espn/images/addActive.svg") center
    no-repeat;
  --ec-add-icon-hover: url("https://acc-wkpool.espngoal.nl/assets//espn/images/addHover.svg") center no-repeat;
  --ec-card-top-perfect-bg: #fff url("https://acc-wkpool.espngoal.nl/assets//espn/images/card-top-perfect.jpg")
    top center no-repeat;
  --ec-booster: linear-gradient(90deg, #0cae3f 51.89%, #a2d31e 100%);

  --ec-booster-compl: #ffffff;
  --ec-boost-active: url("https://acc-wkpool.espngoal.nl/assets//espn/images/boostActive.svg?_t=5");
  --ec-card-perfect-border: linear-gradient(
    90deg,
    #0cae3f 51.89%,
    #a2d31e 100%
  );
  --ec-card-perfect-border-width: 2px;
  --ec-secondary-active: var(--ec-interaction);
  --ec-loginNotRegistered-image: url("https://acc-wkpool.espngoal.nl/assets//espn/images/loginNotRegistered.png?_t=5");
  /*leagues*/
  --ec-leagues-promo: "/assets/espn/images/leaguesPromo.png?_t=5";
  /*modal*/
  --ec-modal-dark-bg: var(--ec-background)
    url("https://acc-wkpool.espngoal.nl/assets//espn/images/modalBg.png") right top no-repeat;
  --ec-modal-top-bg: linear-gradient(180deg, #ef4135 0%, #ff762d 100%);
  --ec-leagues-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  --ec-md-coming-soon: url("https://acc-wkpool.espngoal.nl/assets//espn/images/mdComingSoon.png");
  --ec-md-coming-soon2x: url("https://acc-wkpool.espngoal.nl/assets//espn/images/mdComingSoon2x.png");
}
/*corners*/
:root {
  --ec-border-radius: 4px;
  --ec-border-radius-excelent: 4px;
  --ec-border-radius-button: 4px;
  --ec-border-radius-popular: 34px;
  --ec-from-guide-radius: 8px;
}
/* share Templates */
:root {
  --ec-share-template-portrait-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_portrait_bg.png?_t=5");
  --ec-share-template-portrait-semi-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_portrait_semi_bg.png?_t=5");
  --ec-share-template-portrait-final-before-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_portrait_final_before_bg.png?_t=5");
  --ec-share-template-portrait-final-after-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_portrait_final_after_bg.png?_t=5");
  --ec-share-template-landscape-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_landscape_bg.png?_t=5");
  --ec-share-template-landscape-semi-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_landscape_semi_bg.png?_t=5");
  --ec-share-template-landscape-final-before-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_landscape_final_before_bg.png?_t=5");
  --ec-share-template-landscape-final-after-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_landscape_final_after_bg.png?_t=5");
  --ec-share-template-square-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_square_bg.png?_t=5");
  --ec-share-template-square-semi-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_square_semi_bg.png?_t=5");
  --ec-share-template-square-final-before-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_square_final_before_bg.png?_t=5");
  --ec-share-template-square-final-after-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/share_square_final_after_bg.png?_t=5");
  --ec-share-template-excellent-bg: linear-gradient(
    180deg,
    #0929c9 0%,
    #0a0a61 100%
  );
  --ec-share-template-excellent-shadow: 0px 14.5361px 16.1513px
    rgba(0, 0, 0, 0.1);
  --ec-share-perfect-score-bg: url("https://acc-wkpool.espngoal.nl/assets//espn/images/inputShare.jpg");
  --ec-share-title-size: 48px;
  --ec-share-title-line-height: 52.8px;
  --ec-share-description-size: 36px;
  --ec-share-description-line-height: 39.6px;
  --ec-share-square-title-size: 48px;
  --ec-share-square-title-line-height: 52.8px;
  --ec-share-square-description-size: 36px;
  --ec-share-square-description-line-height: 39.6px;
}
/*custom stuff*/
:root {
  --ec-input-border: transparent;
  --ec-input-disabled-border: transparent;
  --ec-points-color: var(--ec-booster);
  --ec-popular-border: transparent;
  --ec-input-background: #e12c1f;
  --ec-highlight-01: linear-gradient(180deg, #ef4135 0%, #ff762d 100%);
  --ec-highlight-02: #ef4135;
  --ec-card-not-active-secondary-background: none; /*used if secondary is the same color as card (only ucl)*/
  --ec-gamification-bar: linear-gradient(
    89.33deg,
    #45ebe7 17.83%,
    #0093e0 83.96%
  );
  --ec-booster-active-border: #0cae3f;
  --ec-heading-bg: #00439c;

  --ec-highlightedRow: rgba(0, 0, 0, 0.1);
  --ec-league-card-img: url("https://acc-wkpool.espngoal.nl/assets//espn/images/leagueCard.png");
  --ec-new-game-card: linear-gradient(90deg, #0324d1 0%, #020568 82.05%);
  --ec-leagues-not-logged: linear-gradient(
    224.29deg,
    #010056 0%,
    #0232ff 101.27%
  );
  --ec-no-leagues-bg: linear-gradient(180deg, #ef4135 0%, #ff762d 100%);
  --ec-landing-header-bg: linear-gradient(90deg, #0230f8 0%, #010255 100%);
  --ec-predictions-arrow: url("https://acc-wkpool.espngoal.nl/assets//espn/images/Vector.svg");
  --ec-card-top-bg: linear-gradient(180deg, #ef4135 0%, #ff762d 100%);
}
/* body:before {
  background: #000040;
} */
.navigation.navigation--with-lv3 {
  background-color: #040a63;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 960px) {
  .navigation.navigation--with-lv3 {
    background-color: #040a63;
    background-position: center -40px;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

#root:not(.landing) {
}
@media (min-width: 1024px) {
  :root {
  }
}
/* SWIPER */
.swiper {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  list-style: none;
  padding: 0;
  height: 100%;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  /*justify-content: center;*/
}
.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  flex-shrink: 0;
  width: auto;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-horizontal.swiper-css-mode {
  > .swiper-wrapper {
    scroll-snap-type: x mandatory;
  }
}

/* FONTS FOR SHARE TEMPLATES ONLY */
:root {
  --ec-font-base-regular: "PlayoffProSans-Regular", sans-serif;
  --ec-font-base-semibold: "PlayoffProSans-Medium", sans-serif;
  --ec-font-base-bold: "PlayoffProSans-Bold", sans-serif;
  --ec-font-comp-regular: "PlayoffProSansComp-Regular", sans-serif;
  --ec-font-comp-bold: "PlayoffProSansComp-Bold", sans-serif;
}

@font-face {
  font-family: "PlayoffProSans-Regular";
  src: url("./fonts/PlayoffProSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "PlayoffProSans-Medium";
  src: url("./fonts/PlayoffProSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "PlayoffProSans-Bold";
  src: url("./fonts/PlayoffProSans-Bold.woff2") format("woff2");
}

/* "Comp" (Heavy) variantai */
@font-face {
  font-family: "PlayoffProSansComp-Regular";
  src: url("./fonts/PlayoffProSans-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlayoffProSansComp-Bold";
  src: url("./fonts/PlayoffProSans-HeavyItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}