:root,
:root [ec-theme="light"] {
  --ec-interaction: #0072ee;
  --ec-interaction-hover: #4b8fda;
  --ec-interaction-pressed: #1b68bc;
  --ec-interaction-compl: #ffffff;
  --ec-text-01: #111827;
  --ec-text-01-hover: rgba(17, 24, 39, 0.85);
  --ec-text-01-pressed: rgba(17, 24, 39, 0.65);
  --ec-text-02: rgba(17, 24, 39, 0.7);
  --ec-text-03: rgba(17, 24, 39, 0.5);
  --ec-text-04: #fff;
  --ec-text-05: #0d0c0c;
  --ec-ui-00: rgba(0, 0, 0, 0.02);
  --ec-ui-01: rgba(0, 0, 0, 0.05);
  --ec-ui-02: rgba(0, 0, 0, 0.1);
  --ec-ui-03: rgba(0, 0, 0, 0.18);
  --ec-ui-04: rgba(0, 0, 0, 0.3);
  --ec-background: #f8fafc;
  --ec-elevation-01: #ffffff;
  --ec-elevation-02: #f1f5f9;
  --ec-elevation-03: #e2e8f0;
  --ec-support-01: #19b95e;
  --ec-support-02: #1e73d1;
  --ec-support-03: #e87223;
  --ec-support-04: #cb333b;
  --ec-support-05: #ffcb00;
}
/*color palete dark*/
:root [ec-theme="dark"] {
  --ec-interaction: #ffcb00;
  --ec-interaction-hover: #ffe066;
  --ec-interaction-pressed: #cca200;
  --ec-interaction-compl: #222526;
  --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: #0d0c0c;
  --ec-ui-00: rgba(255, 255, 255, 0.05);
  --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: #030033;
  --ec-elevation-01: #201d4a;
  --ec-elevation-02: #494678;
  --ec-elevation-03: #625f93;
  --ec-support-01: #19b95e;
  --ec-support-02: #1e73d1;
  --ec-support-03: #e87223;
  --ec-support-04: #cb333b;
  --ec-support-05: #ffcb00;
}
/*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;
  --ec-custom-gaminghub: dark;
}
/*custom images*/
:root {
  --ec-secondary-01: #030033;
  --headerBackgroundColor: #161718;
  --headerDesktopMenuBorder: #161718;
  --ec-plus: url("https://predictor.dreamteamfc.com/assets//wc/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://predictor.dreamteamfc.com/assets//wc/images/add.svg") center no-repeat;
  --ec-add-icon-active: url("https://predictor.dreamteamfc.com/assets//wc/images/addActive.svg") center no-repeat;
  --ec-add-icon-hover: url("https://predictor.dreamteamfc.com/assets//wc/images/addHover.svg") center no-repeat;
  --ec-booster: #bd6cef;

  --ec-booster-compl: #ffffff;
  --ec-boost-active: url("https://predictor.dreamteamfc.com/assets//wc/images/boostActive.svg?_t=5");
  --ec-card-perfect-border: #bd6cef;
  --ec-card-perfect-border-width: 2px;
  --ec-secondary-active: var(--ec-interaction);
  --ec-loginNotRegistered-image: url("https://predictor.dreamteamfc.com/assets//wc/images/loginNotRegistered.png?_t=5");
  /*leagues*/
  --ec-leagues-promo: "/assets/wc/images/leaguesPromo.png";
  /*modal*/
  --ec-modal-dark-bg: var(--ec-background) url("https://predictor.dreamteamfc.com/assets//wc/images/modalBg.png")
    right top no-repeat;
  --ec-modal-top-bg: linear-gradient(180deg, #201d4a 0%, #2d4a9d 100%);
  --ec-leagues-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  --ec-md-coming-soon: url("https://predictor.dreamteamfc.com/assets//wc/images/mdComingSoon.png");
  --ec-md-coming-soon2x: url("https://predictor.dreamteamfc.com/assets//wc/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://predictor.dreamteamfc.com/assets//wc/images/share_portrait_bg.png?_t=5");
  --ec-share-template-portrait-semi-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_portrait_semi_bg.png?_t=5");
  --ec-share-template-portrait-final-before-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_portrait_final_before_bg.png?_t=5");
  --ec-share-template-portrait-final-after-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_portrait_final_after_bg.png?_t=5");
  --ec-share-template-landscape-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_landscape_bg.png?_t=5");
  --ec-share-template-landscape-semi-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_landscape_semi_bg.png?_t=5");
  --ec-share-template-landscape-final-before-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_landscape_final_before_bg.png?_t=5");
  --ec-share-template-landscape-final-after-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_landscape_final_after_bg.png?_t=5");
  --ec-share-template-square-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_square_bg.png?_t=5");
  --ec-share-template-square-semi-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_square_semi_bg.png?_t=5");
  --ec-share-template-square-final-before-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_square_final_before_bg.png?_t=5");
  --ec-share-template-square-final-after-bg: url("https://predictor.dreamteamfc.com/assets//wc/images/share_square_final_after_bg.png?_t=5");
  --ec-share-template-excellent-bg: linear-gradient(
    180deg,
    #201d4a 0%,
    #2d4a9d 100%
  );
  --ec-share-template-excellent-shadow: 0px 14.5361px 16.1513px
    rgba(0, 0, 0, 0.1);
  --ec-share-perfect-score-bg: url("https://predictor.dreamteamfc.com/assets//wc/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-custom-leagues-middlePart: #192b59;
  --ec-custom-become-player-bg: #2d4a9d;
  --ec-leagues-title: #2d4a9d;
  --ec-input-border: transparent;
  --ec-input-disabled-border: transparent;
  --ec-points-color: #fff;
  --ec-popular-border: transparent;
  --ec-input-background: #192b59;
  --ec-highlight-01: #201d4a;
  --ec-highlight-02: #192b59;
  --ec-card-not-active-secondary-background: none; /*used if secondary is the same color as card (only ucl)*/
  --ec-gamification-bar: linear-gradient(180deg, #ef4135 0%, #ff762d4a9dd 100%);
  --ec-booster-active-border: #bd6cef;
  --ec-heading-bg: #00439c;

  --ec-highlightedRow: rgba(0, 0, 0, 0.1);
  --ec-league-card-img: url("https://predictor.dreamteamfc.com/assets//wc/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: #201d4a;
  --ec-landing-header-bg: #201d4a;
  --ec-predictions-arrow: url("https://predictor.dreamteamfc.com/assets//wc/images/Vector.svg");
  --ec-card-top-bg: linear-gradient(180deg, #201d4a 0%, #2d4a9d 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: "TheSun-Regular", sans-serif;
  --ec-font-base-semibold: "TheSun-Medium", sans-serif;
  --ec-font-base-bold: "TheSun-Bold", sans-serif;
  --ec-font-comp-regular: "TheSunSlab-Regular", sans-serif;
  --ec-font-comp-bold: "TheSunSlab-Bold", sans-serif;
}
/* 
@font-face {
  font-family: "Base-Regular";
  src: url("./fonts/Regular.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Base-Medium";
  src: url("./fonts/Medium.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Base-Bold";
  src: url("./fonts/Bold.otf") format("opentype");
  font-display: swap;
}

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

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