:root {
  /* border-radiux & shdows */
  --border-radius-thumbnail-small: 0px;
  --border-radius-thumbnail-medium: 8px;
  --border-radius-thumbnail-large: 20px;
  --shadow-thumbnail-small: 0px;
  --shadow-thumbnail-medium: 8px;
  --shadow-thumbnail-large: 20px;
  /* password policy color */
  --color-input-password-valid-policy: #ffffff;
  /* OVERALL */
  /* scrollbar */
  --color-scrollbar-thumb: #353535;
  --color-scrollbar-track: #1d1e1c;
  --color-scrollbar-corner: #1d1e1c;
  --borderRadius-scrollbar-track: 10px;
  --color-scrollbar-thumb-hover: #454545;
  /* modal overlay */
  --color-modal-overlay: rgba(0, 0, 0, 0.8);
  /* color sets */
  --color-primary1: #ffffff;
  --color-primary2: #d8d8d8;
  --color-primary3: #8c8c8c;
  --color-primary4: #26333e;
  --color-secondary1: #1f2b35;
  --color-secondary2: #11181e;
  --color-secondary3: #19232b;
  --color-secondary4: #0c141b;
  --color-highlight-hover1: #f00038;
  --color-highlight-hover2: #f00038;
  --color-error: #ff0000;
  --color-relax: #f00038;
  --color-gradient1: linear-gradient(90deg, #f00038 0%, #f81147);
  --color-gradient2: #ffffff;
  /* Thumbnail */
  /* Placeholder */
  --color-thumbnail-placeholder-bg: #26333e;

  /* EPG */
  /* Header grid */
  --color-epg-header-grid-bg: var(--color-secondary4);
  --color-epg-header-grid-bg-hover: #111111;
  /* background */
  --color-background: #0c141b;
  --color-background-asset: var(--color-secondary4);
  /* CONTENT */
  /* font & icons (content) */
  --color-content-default1: var(--color-primary1);
  --color-content-default2: var(--color-primary2);
  --color-content-default3: var(--color-primary3);
  --color-content-highlight-hover: var(--color-highlight-hover1);
  --color-content-hover-for-highlighted: var(--color-highlight-hover2);
  --color-content-error: var(--color-error);
  --color-promo-banner-txt-bg: var(--color-secondary4);
  /* overlays (content)*/
  --color-content-overlay1: var(--color-secondary3);
  --color-content-overlay2: var(--color-secondary2);
  --color-content-overlay3: var(--color-secondary3);
  /* progress bar (content) */
  --color-content-progressbar-main: var(--color-gradient1);
  --color-content-progressbar-buffer-empty1: transparent;
  --color-content-progressbar-buffer-empty2: rgba(255, 255, 255, 0.5);
  /* inputs (content) */
  --color-input-primary: var(--color-primary1);
  --color-input-placeholder: var(--color-primary2);
  --color-input-border-bottom: var(--color-primary3);
  --color-input-border-bottom-focus: var(--color-highlight-hover1);
  /* button: normal (content) */
  --color-button-normal-font: var(--color-primary1);
  --color-button-normal-bg: var(--color-highlight-hover1);
  --color-button-normal-border: transparent;
  --color-button-normal-font-hover: var(--color-primary1);
  --color-button-normal-bg-hover: var(--color-highlight-hover2);
  --color-button-normal-border-hover: transparent;
  --borderSize-button-normal: 1px;
  --borderRadius-button-normal: 40px;
  /* button: ghost (content) */
  --color-button-ghost-font: var(--color-highlight-hover1);
  --color-button-ghost-bg: transparent;
  --color-button-ghost-border: var(--color-highlight-hover1);
  --color-button-ghost-font-hover: var(--color-primary1);
  --color-button-ghost-bg-hover: var(--color-highlight-hover1);
  --color-button-ghost-border-hover: transparent;
  --borderSize-button-ghost: 1px;
  --borderRadius-button-ghost: 40px;
  /* button: bordered (content) */
  --color-button-bordered-font: var(--color-primary1);
  --color-button-bordered-bg: rgba(29, 30, 28, 0.4);
  --color-button-bordered-border: var(--color-primary1);
  --color-button-bordered-font-hover: var(--color-secondary3);
  --color-button-bordered-bg-hover: var(--color-primary1);
  --color-button-bordered-border-hover: transparent;
  --borderSize-button-bordered: 1px;
  --borderRadius-button-bordered: 20px;
  /* button: link (content) */
  --color-button-link-font: var(--color-highlight-hover1);
  --color-button-link-font-hover: var(--color-highlight-hover2);
  /* button: disabled (content) */
  --color-button-disabled-font: var(--color-primary2);
  --color-button-disabled-bg: var(--color-primary3);
  --color-button-disabled-border: transparent;
  --borderSize-button-disabled: 1px;
  --borderRadius-button-disabled: 40px;
  /* button: switch (content) */
  --color-button-switch-circle: var(--color-primary1);
  --color-button-switch-label: var(--color-secondary3);
  --color-button-switch-bg: var(--color-primary1);
  --color-button-switch-circle-active: var(--color-primary1);
  --color-button-switch-label-active: var(--color-primary1);
  --color-button-switch-bg-active: var(--color-highlight-hover1);
  --color-button-switch-circle-disable: var(--color-primary2);
  --color-button-switch-label-disable: var(--color-primary3);
  --color-button-switch-bg-disable: var(--color-primary3);
  /* button: Age restriction (content) */
  --color-inner-spin-button: var(--color-content-default3);
  --color-inner-spin-button-hover: var(--color-content-default1);
  /* Saved fixed button bar (content) */
  --color-save-bar-bg: var(--color-secondary2);
  /* button: strate nav */
  --color-button-arrow-icon: var(--color-primary1);
  --color-button-arrow-bg: rgba(0, 0, 0, 0.7);
  --color-button-arrow-icon-hover: var(--color-primary1);
  --color-button-arrow-bg-hover: var(--color-highlight-hover1);
  /* PLAY ICON && LOCK AND UNLOCK ICON */
  --color-icon-playlock-fill: var(--color-primary1);
  --color-icon-playlock-stroke: var(--color-primary1);
  --color-icon-playlock-fill-hover: var(--color-highlight-hover1);
  --color-icon-playlock-stroke-hover: var(--color-highlight-hover1);
  --color-icon-playlock-circle-fill: var(--color-secondary4);
  --color-icon-playlock-circle-fillOpacity: 0.4;
  --color-icon-playlock-circle-strokeWidth: 1;
  --color-border-right-padlock-container: var(--color-highlight-hover1);
  --color-border-top-padlock-container: var(--color-highlight-hover1);
  /* SELECT DROPDOWN */
  /* Font */
  --color-select-primary1: var(--color-primary1);
  --color-select-highlight-hover: var(--color-secondary3);
  --color-select-highlight-active: var(--color-highlight-hover1);
  /* Background */
  --color-select-background: var(--color-secondary3);
  --color-select-background-hover: var(--color-highlight-hover1);
  --color-select-background-active: var(--color-secondary3);
  --borderRadius-select-normal: 5px;
  --boxShadow-select-normal: 0 2px 10px 2px rgba(0, 0, 0, 0.7);
  /* Search */
  /* fonts & icons (search) */
  --color-search-primary1: var(--color-primary1);
  --color-search-channel-primary1: var(--color-primary1);
  /* background */
  --color-search-input-bg: rgba(255, 255, 255, 0.2);
  --color-search-channel-input-bg: rgba(255, 255, 255, 0.2);
  /* SCROLLTOPHEADER */
  --color-scrollTopHeader-primary1: var(--color-primary1);
  --color-scrollTopHeader-primary2: var(--color-primary2);
  --color-scrollTopHeader-primary3: var(--color-primary3);
  --color-scrollTopHeader-highlight-hover1: var(--color-highlight-hover1);
  --color-scrollTopHeader-highlight-hover2: var(--color-highlight-hover2);
  --color-scrollTopHeader-bg: var(--color-secondary4);
  /* LOG IN */
  /* Sign in page header */
  --color-login-scrollTopHeader-bg: var(--color-secondary4);
  /* font & icons (Log In) */
  --color-login-primary1: var(--color-primary1);
  --color-login-primary2: var(--color-primary2);
  --color-login-primary3: var(--color-primary3);
  --color-login-highlight-hover1: var(--color-highlight-hover1);
  --color-login-highlight-hover2: var(--color-highlight-hover2);
  --color-login-error: var(--color-error);
  /* inputs (Log In) */
  --color-login-input-primary: var(--color-primary1);
  --color-login-input-placeholder: var(--color-primary2);
  --color-login-input-border-bottom: var(--color-primary3);
  --color-login-input-border-bottom-focus: var(--color-highlight-hover1);
  /* button: normal (Log In) */
  --color-button-login-normal-font: var(--color-primary1);
  --color-button-login-normal-bg: var(--color-highlight-hover1);
  --color-button-login-normal-border: transparent;
  --color-button-login-normal-font-hover: var(--color-primary1);
  --color-button-login-normal-bg-hover: var(--color-highlight-hover2);
  --color-button-login-normal-border-hover: transparent;
  --borderSize-button-login-normal: 1px;
  --borderRadius-button-login-normal: 40px;
  /* button: ghost (Log In) */
  --color-button-login-ghost-font: var(--color-primary1);
  --color-button-login-ghost-bg: transparent;
  --color-button-login-ghost-border: var(--color-primary1);
  --color-button-login-ghost-font-hover: var(--color-primary1);
  --color-button-login-ghost-bg-hover: var(--color-highlight-hover1);
  --color-button-login-ghost-border-hover: transparent;
  --borderSize-button-login-ghost: 1px;
  --borderRadius-button-login-ghost: 40px;
  /* button: bordered (Log In) */
  --color-button-login-bordered-font: var(--color-primary1);
  --color-button-login-bordered-bg: rgba(29, 30, 28, 0.4);
  --color-button-login-bordered-border: var(--color-primary1);
  --color-button-login-bordered-font-hover: var(--color-secondary3);
  --color-button-login-bordered-bg-hover: var(--color-primary1);
  --color-button-login-bordered-border-hover: transparent;
  --borderSize-button-login-bordered: 1px;
  --borderRadius-button-login-bordered: 40px;
  /* button: link (Log In) */
  --color-button-login-link-font: var(--color-highlight-hover1);
  --color-button-login-link-font-hover: var(--color-highlight-hover2);
  /* button: disabled (Log In) */
  --color-button-login-disabled-font: var(--color-primary2);
  --color-button-login-disabled-bg: var(--color-primary3);
  --color-button-login-disabled-border: transparent;
  --borderSize-button-login-disabled: 1px;
  --borderRadius-button-login-disabled: 40px;
  /* NAVIGATION */
  /* fonts & icons (navigation) */
  --color-nav-primary1: var(--color-primary1);
  --color-nav-primary2: var(--color-primary2);
  --color-nav-primary3: var(--color-primary3);
  --color-nav-hover: var(--color-highlight-hover1);
  --color-nav-active: var(--color-highlight-hover1);
  /* background (navigation) */
  --color-nav-background: var(--color-secondary3);
  /* separator (navigation) */
  --color-nav-separator: rgba(255, 255, 255, 0.2);
  /* toggle button (navigation) */
  --color-nav-toggle-default: var(--color-secondary1);
  --color-nav-toggle-hover: var(--color-highlight-hover1);
  --color-nav-toggle-icon-default: var(--color-primary3);
  --color-nav-toggle-icon-hover: var(--color-secondary3);
  /* switch icon (navigation) */
  --color-nav-switch-icon-circle-stroke: var(--color-primary1);
  --color-nav-switch-icon-circle-fill: var(--color-secondary3);
  --color-nav-switch-icon-path: var(--color-primary1);
  /* SLIDESHOW */
  /* fonts & icons (slideshow) */
  --color-slideshow-primary1: var(--color-primary1);
  --color-slideshow-primary2: var(--color-primary2);
  --color-slideshow-primary3: var(--color-primary3);
  --color-slideshow-highlight-hover1: var(--color-highlight-hover1);
  --color-slideshow-highlight-hover2: var(--color-highlight-hover2);
  /* overlay (slideshow) */
  --color-slideshow-overlay-before: linear-gradient(
    to bottom,
    #000000,
    rgba(0, 0, 0, 0)
  );
  --color-slideshow-overlay-after: linear-gradient(
    to top,
    #000000,
    rgba(0, 0, 0, 0)
  );
  /* button: bordered (slideshow) */
  --color-button-slideshow-bordered-font: var(--color-primary1);
  --color-button-slideshow-bordered-bg: rgba(29, 30, 28, 0.4);
  --color-button-slideshow-bordered-border: var(--color-primary1);
  --color-button-slideshow-bordered-font-hover: var(--color-secondary3);
  --color-button-slideshow-bordered-bg-hover: var(--color-primary1);
  --color-button-slideshow-bordered-border-hover: transparent;
  --borderSize-button-slideshow-bordered: 1px;
  --borderRadius-button-slideshow-bordered: 40px;
  /* THUMBNAIL */
  /* fonts & icons (thumbnail) */
  --color-thumbnail-primary1: var(--color-primary1);
  --color-thumbnail-primary2: var(--color-primary2);
  --color-thumbnail-primary3: var(--color-primary3);
  --color-thumbnail-highlight-hover1: var(--color-highlight-hover1);
  --color-thumbnail-overlay-background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    var(--color-secondary4)
  );
  /* PLAYER */
  /* font & icons & bg (player) */
  --color-player-default1: var(--color-primary1);
  --color-player-default2: var(--color-primary2);
  --color-player-default3: var(--color-primary3);
  --color-player-highlight-hover1: var(--color-highlight-hover1);
  --color-player-overlay: rgba(0, 0, 0, 0.65);
  --color-player-background: var(--color-secondary4);
  --subtitle-vertical-position: -2%;
  /* SIGN UP */
  --color-stepFont: var(--color-primary1);
  --color-stepBG: var(--color-primary3);
  --color-stepActiveFont: var(--color-secondary3);
  --color-stepActiveBG: var(--color-highlight-hover1);
  --color-stepLabel: var(--color-primary3);
  --color-stepEmptybar: var(--color-primary3);
  --color-stepFullbar: var(--color-highlight-hover1);
  /*ACCOUNT */
  --color-account-separator: rgba(255, 255, 255, 0.3);
  --main-profile-label-font: var(--color-primary1);
  /* FONT-SIZES */
  --fontSize-xxxl: clamp(50px, 3.75vw, 60px);
  --fontSize-xxl: clamp(24px, 2.25vw, 36px);
  --fontSize-xl: clamp(18px, 1.5vw, 24px);
  --fontSize-l: clamp(16px, 1.125vw, 18px);
  --fontSize-m: clamp(14px, 1vw, 16px);
  --fontSize-s: clamp(14px, 0.875vw, 14px);
  --fontSize-xs: clamp(11px, 0.6875vw, 11px);
  --fontSize-xxs: clamp(8px, 0.5625vw, 9px);
}
/* You can use font-converter.net to transform TTF font to various format */
/* You can use CONVERSIO (chrome extension) to convert TTF in OTF */
@font-face {
  font-family: beemix-font;
  src: url("/fonts/OpenSans-Regular.eot"); /* IE9 Compat Modes */
  src: url("/fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/fonts/OpenSans-Regular.otf") format("opentype"),
    /* Open Type Font */ url("/fonts/OpenSans-Regular.svg") format("svg"),
    /* Legacy iOS */ url("/fonts/OpenSans-Regular.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/fonts/OpenSans-Regular.woff")
      format("woff"),
    /* Modern Browsers */ url("/fonts/OpenSans-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}