@charset "UTF-8"; /* Importing required modules */ /*Responsive Design tokens*/ :root { /* light */ --light-all: 0, 100%, 100%; --light-all-h: 0; --light-all-s: 100%; --light-all-l: 100%; --light-background: 10, 30%, 96%; --light-background-h: 10; --light-background-s: 30%; --light-background-l: 96%; --light-text: 0, 0%, 0%; --light-text-h: 0; --light-text-s: 0%; --light-text-l: 0%; --light-primary: 38, 96%, 65%; --light-primary-h: 38; --light-primary-s: 96%; --light-primary-l: 65%; --light-secondary: 30, 56%, 94%; --light-secondary-h: 30; --light-secondary-s: 56%; --light-secondary-l: 94%; --light-neutral: 0, 0%, 100%; --light-neutral-h: 0; --light-neutral-s: 0%; --light-neutral-l: 100%; --light-positive: 87, 34%, 86%; --light-positive-h: 87; --light-positive-s: 34%; --light-positive-l: 86%; --light-negative: 340, 51%, 89%; --light-negative-h: 340; --light-negative-s: 51%; --light-negative-l: 89%; --light-warning: 41, 87%, 61%; --light-warning-h: 41; --light-warning-s: 87%; --light-warning-l: 61%; /* dark */ --dark-all: 0, 0%, 10%; --dark-all-h: 0; --dark-all-s: 0%; --dark-all-l: 10%; --dark-background: 0, 0%, 0%; --dark-background-h: 0; --dark-background-s: 0%; --dark-background-l: 0%; --dark-text: 0, 0%, 95%; --dark-text-h: 0; --dark-text-s: 0%; --dark-text-l: 95%; --dark-primary: 40, 92%, 60%; --dark-primary-h: 40; --dark-primary-s: 92%; --dark-primary-l: 60%; --dark-secondary: 34, 38%, 33%; --dark-secondary-h: 34; --dark-secondary-s: 38%; --dark-secondary-l: 33%; --dark-neutral: 0, 0%, 10%; --dark-neutral-h: 0; --dark-neutral-s: 0%; --dark-neutral-l: 10%; --dark-positive: 81, 11%, 32%; --dark-positive-h: 81; --dark-positive-s: 11%; --dark-positive-l: 32%; --dark-negative: 343, 48%, 17%; --dark-negative-h: 343; --dark-negative-s: 48%; --dark-negative-l: 17%; --dark-warning: 29, 43%, 16%; --dark-warning-h: 29; --dark-warning-s: 43%; --dark-warning-l: 16%; /*Black/White*/ --light_light: black; --light_dark: white; --dark_light: white; --dark_dark: black; /*Basics*/ --body-bg_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - -33%)); --body-bg_dark: hsl(var(--all-h), var(--all-s), calc(var(--all-l) - 30%)); --center-bg_light: hsl(var(--all-h), var(--all-s), var(--all-l)); --center-bg_dark: hsl(var(--all-h), var(--all-s), calc(var(--all-l) - 1%)); --center-center-bg_light: #f9f9f9; --center-center-bg_dark: hsl(var(--all-h), var(--all-s), calc(var(--all-l) + 5%)); /*Primary*/ --primary_light: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --primary_dark: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --primary-bg_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 5%)); --primary-bg_dark: hsl(var(--primary-h), calc(var(--primary-s) - 4%), calc(var(--primary-l) - 4%)); --primary-color_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 100%)); --primary-color_dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + -67%)); --primary-bg-hover_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 5%)); --primary-bg-hover_dark: hsl(var(--primary-h), calc(var(--primary-s) - 4%), calc(var(--primary-l) - 10%)); --primary-color-hover_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 100%)); --primary-color-hover_dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + -40%)); --primary-bg-40: hsla(var(--primary-h), calc(var(--primary-s)), calc(var(--primary-l)), 0.1); --primary-bg-20: hsla(var(--primary-h), calc(var(--primary-s)), calc(var(--primary-l)), 0.2); /*Secondary*/ --secondary_light: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)); --secondary_dark: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)); --secondary-bg_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 26%), 1); --secondary-bg_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 23%), calc(var(--secondary-l) - 6%)); --secondary-bg-on-third_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 18%), 1); --secondary-bg-on-third_dark: hsla(var(--secondary-h), calc(var(--secondary-s) + -20%), calc(var(--secondary-l) + -2%), 1); --secondary-color_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 30%), 1); --secondary-color_dark: hsl(var(--primary-h), calc(var(--primary-s) + 0%), calc(var(--primary-l) + 4%)); --secondary-bg-hover_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%), 1); --secondary-bg-hover_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + -7%)); --secondary-bg-light_light: hsla(var(--primary-h), calc(var(--primary-s) - 29%), calc(var(--primary-l) + 7%), 1); --secondary-bg-light_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 4%), calc(var(--secondary-l) - 0%)); --secondary-color-hover_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 34%), 1); --secondary-color-hover_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 42%)); --secondary-color-on-secondary_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 28%), 0.75); --secondary-color-on-secondary_dark: hsla(var(--primary-h), calc(var(--primary-s) + -26%), calc(var(--primary-l) + 23%), 0.6); --secondary-variant-color_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 35%), 1); --secondary-variant-color_dark: hsl(var(--primary-h), calc(var(--primary-s) - 25%), calc(var(--primary-l) - -11%)); --secondary-variant-bg_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 19%), 1); --secondary-variant-bg_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 4%), calc(var(--secondary-l) - 0%)); --secondary-bg-light-dark_light: hsla(var(--primary-h), calc(var(--primary-s) - 29%), calc(var(--primary-l) + 7%), 1); --secondary-bg-light-dark_dark: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 22%)); --secondary-icon-color_light: hsla(var(--primary-h), calc(var(--primary-s) + -80%), calc(var(--primary-l) - -10%), 1); --secondary-icon-color_dark: hsl(var(--primary-h), calc(var(--primary-s) - 38%), calc(var(--primary-l) + -20%)); --secondary-arrow-icon_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 21%), 1); --secondary-arrow-icon_dark: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 22%)); --secondary-bg-on-white_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 26%), 1); --secondary-bg-on-white_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 23%), calc(var(--secondary-l) - 1%)); /*Third*/ --third-bg_light: hsl(var(--secondary-h), calc(var(--secondary-s)), calc(var(--secondary-l))); --third-bg_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 31%), calc(var(--secondary-l) - 3%)); --third-color_light: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 47%)); --third-color_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 41%)); --third-color-secondary_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 10%), calc(var(--secondary-l) - 32%)); --third-color-secondary_dark: hsl(var( --secondary-h), calc(var(--secondary-s) - 13%), calc(var(--secondary-l) - -16%)); --third-bg-hover_light: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + -7%)); --third-bg-hover_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + -10%)); --third-color-hover_light: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + -51%)); --third-color-hover_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 56%)); --third-color-medium_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 19%), calc(var(--secondary-l) - 14%)); --third-color-medium_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 18%), calc(var(--secondary-l) - -5%)); --third-color-low_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 6%), calc(var(--secondary-l) - 6%)); --third-color-low_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 21%), calc(var(--secondary-l) + -9%)); --third-variant-bg_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 36%), calc(var(--secondary-l) - 0%)); --third-variant-bg_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 18%), calc(var(--secondary-l) - 0%)); --third-variant-color_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 18%), calc(var(--secondary-l) - 61%)); --third-variant-color_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 45%)); --third-variant-bg-hover_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 54%), calc(var(--secondary-l) - 4%)); --third-variant-bg-hover_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 18%), calc(var(--secondary-l) - 0%)); --third-variant-color-hover_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 52%), calc(var(--secondary-l) - 69%)); --third-variant-color-hover_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%)); --third-ongrey-bg_light: hsl(var(--secondary-h), calc(var(--secondary-s) - 22%), calc(var(--secondary-l) - 3%)); --third-ongrey-bg_dark: hsl(var(--secondary-h), calc(var(--secondary-s) - 31%), calc(var(--secondary-l) - 9%)); --third-ongrey-color_light: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 47%)); --third-ongrey-color_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 41%)); /*Positive*/ --positive-bg_light: hsl(var(--positive-h), var(--positive-s), var(--positive-l)); --positive-bg_dark: hsl(var(--positive-h), calc(var(--positive-s) - -8%), calc(var(--positive-l) - 1%)); --positive-color_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 50%)); --positive-color_dark: hsl(var( --positive-h), calc(var(--positive-s) + 25%), calc(var(--positive-l) + 44%)); --positive-color-secondary_light: hsl(var(--positive-h), calc(var(--positive-s) - 20%), calc(var(--positive-l) - 29%)); --positive-color-secondary_dark: hsl(var(--positive-h), calc(var(--positive-s) - -3%), calc(var(--positive-l) - -13%)); --positive-bg-hover_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 12%)); --positive-bg-hover_dark: hsl(var(--positive-h), calc(var(--positive-s)), calc(var(--positive-l))); --positive-color-hover_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 56%)); --positive-color-hover_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 10%)); --positive-on-positive-bg_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 24%)); --positive-on-positive-bg_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 24%)); --positive-on-positive-color_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 59%)); --positive-on-positive-color_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 59%)); --positive-on-positive-bg-hover_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 40%)); --positive-on-positive-bg-hover_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 40%)); --positive-on-positive-color-hover_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 71%)); --positive-on-positive-color-hover_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 71%)); --positive-color-medium_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 21%)); --positive-color-medium_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 21%)); --positive-color-low_light: hsl(var(--positive-h), calc(var(--positive-s) - 6%), calc(var(--positive-l) - 6%)); --positive-color-low_dark: hsl(var(--positive-h), calc(var(--positive-s) - 6%), calc(var(--positive-l) - 6%)); --positive-bg-100_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + -19%)); --positive-bg-100_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + 2%)); --positive-bg-80_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + -13%)); --positive-bg-80_dark: hsl(var(--positive-h), calc(var(--positive-s) + -1%), calc(var(--positive-l) + -2%)); --positive-bg-60_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + -9%)); --positive-bg-60_dark: hsl(var(--positive-h), calc(var(--positive-s) + -1%), calc(var(--positive-l) + -5%)); --positive-bg-40_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + -5%)); --positive-bg-40_dark: hsl(var(--positive-h), calc(var(--positive-s) + -1%), calc(var(--positive-l) + -8%)); --positive-bg-20_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + 1%)); --positive-bg-20_dark: hsl(var(--positive-h), calc(var(--positive-s) + -2%), calc(var(--positive-l) + -11%)); --positive-bg-dark_dark: hsl(var(--positive-h), calc(var(--positive-s) - -9%), calc(var(--positive-l) - -5%)); --positive-variant-bg_dark: hsl(var(--positive-h), calc(var(--positive-s) + 2%), calc(var(--positive-l) - 4%)); --positive-variant-color_dark: hsl(var(--positive-h), calc(var(--positive-s) + 25%), calc(var(--positive-l) + 45%)); /*White*/ --white-bg_light: hsl(var(--neutral-h), var(--neutral-s), var(--neutral-l)); --white-bg_dark: hsl(var(--neutral-h), var(--neutral-s), calc(var(--neutral-l) + 12%)); --white-color_light: hsl(var(--text-h), var(--text-s), calc(var(--text-l))); --white-color_dark: hsl(var(--text-h), var(--text-s), calc(var(--text-l) + 75%)); --white-bg-hover_light: hsl(var(--neutral-h), var(--neutral-s), calc(var(--neutral-l) * 0.95)); --white-bg-hover_dark: hsl(var(--primary-h), calc(var(--primary-s) - 70%), calc(var(--primary-l) - 70%)); --white-color-hover_light: hsl(var(--text-h), var(--text-s), calc(var(--text-l))); --white-color-hover_dark: hsl(var(--neutral-h), var(--neutral-s), calc(var(--neutral-l) + 75%)); --white-bg_darker_light: #faf7f2; --white-bg_darker_dark: hsl(var(--neutral-h), var(--neutral-s), calc(var(--neutral-l) + 12%)); --white-bg-dark-special_light: hsl(var(--neutral-h), var(--neutral-s), var(--neutral-l)); --white-bg-dark-special_dark: #474747; /*Transparent*/ --transparent-3xs_light: rgba(0, 0, 0, 0.02); --transparent-3xs_dark: rgba(255, 255, 255, 0.02); --transparent-2xs_light: rgba(0, 0, 0, 0.04); --transparent-2xs_dark: rgba(255, 255, 255, 0.04); --transparent-xs_light: rgba(0, 0, 0, 0.08); --transparent-xs_dark: rgba(255, 255, 255, 0.08); --transparent-sm_light: rgba(0, 0, 0, 0.15); --transparent-sm_dark: rgba(255, 255, 255, 0.15); --transparent-md_light: rgba(0, 0, 0, 0.2); --transparent-md_dark: rgba(255, 255, 255, 0.2); --transparent-lg_light: rgba(0, 0, 0, 0.4); --transparent-lg_dark: rgba(255, 255, 255, 0.4); --transparent-xl_light: rgba(0, 0, 0, 0.65); --transparent-xl_dark: rgba(255, 255, 255, 0.65); --transparent-2xl_light: rgba(0, 0, 0, 0.90); --transparent-2xl_dark: rgba(255, 255, 255, 0.90); --transparent-lg-reverse_light: rgba(255, 255, 255, 0.4); --transparent-lg_reverse_dark: rgba(0, 0, 0, 0.4); /*Grey*/ --grey-2xs_light: rgba(244, 244, 244, 1); --grey-2xs_dark: rgba(40, 40, 40, 1); --grey-xs_light: rgba(235, 235, 235, 1); --grey-xs_dark: rgba(72, 72, 72, 1); --grey-sm_light: rgba(190, 190, 190, 1); --grey-sm_dark: rgba(90, 90, 90, 1); /*Warning*/ --warning-bg_light: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + 7%)); --warning-bg_dark: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + 8%)); --warning-color_light: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + -10%)); --warning-color_dark: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + 32%)); --warning-bg-hover_light: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + -10%)); --warning-bg-hover_dark: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + -10%)); --warning-color-hover_light: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + -10%)); --warning-color-hover_dark: hsl(var(--warning-h), var(--warning-s), calc(var(--warning-l) + -10%)); /*Negative*/ --negative-bg_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + 3%)); --negative-bg_dark: hsl(var( --negative-h), calc(var(--negative-s) - 32%), calc(var(--negative-l) + 9%)); --negative-color_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -53%)); --negative-color_dark: hsl(var( --negative-h), calc(var(--negative-s) - -15%), calc(var(--negative-l) + 55%)); --negative-color-secondary_light: hsl(var(--negative-h), calc(var(--negative-s) - 14%), calc(var(--negative-l) + -30%)); --negative-color-secondary_dark: hsl(var( --negative-h), calc(var(--negative-s) - 14%), calc(var(--negative-l) + 34%)); --negative-bg-hover_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -2%)); --negative-bg-hover_dark: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + 3%)); --negative-color-hover_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -42%)); --negative-color-hover_dark: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + 28%)); --negative-color-medium_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -53%)); --negative-color-medium_dark: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -53%)); --negative-color-low_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -53%)); --negative-color-low_dark: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -53%)); --negative-color-indicator_light: hsl(var( --negative-h), calc(var(--negative-s) - -38%), calc(var(--negative-l) + -42%)); --negative-color-indicator_dark: hsl(var(--negative-h), calc(var(--negative-s) - -22%), calc(var(--negative-l) + 33%)); --negative-variant-bg_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + 3%)); --negative-variant-bg_dark: hsl(var(--negative-h), calc(var(--negative-s) - 31%), calc(var(--negative-l) + 9%)); --negative-variant-color_light: hsl(var(--negative-h), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -53%)); --negative-variant-color_dark: hsl(var(--negative-h), calc(var(--negative-s) + -6%), calc(var(--negative-l) + 64%)); --negative-bg-dark_dark: hsl(var(--negative-h), calc(var(--negative-s) - 15%), calc(var(--negative-l) + 22%)); --negative-bg-100_light: hsl(var(--negative-h), var(--negative-s), calc(var(--negative-l) + -19%)); --negative-bg-100_dark: hsl(var(--negative-h), var(--negative-s), calc(var(--negative-l) + 18%)); --negative-bg-80_light: hsl(var(--negative-h), var(--negative-s), calc(var(--negative-l) + -13%)); --negative-bg-80_dark: hsl(var(--negative-h), calc(var(--negative-s) + -16%), calc(var(--negative-l) + 11%)); --negative-bg-60_light: hsl(var(--negative-h), var(--negative-s), calc(var(--negative-l) + -9%)); --negative-bg-60_dark: hsl(var(--negative-h), calc(var(--negative-s) + -18%), calc(var(--negative-l) + 10%)); --negative-bg-40_light: hsl(var(--negative-h), var(--negative-s), calc(var(--negative-l) + -5%)); --negative-bg-40_dark: hsl(var(--negative-h), calc(var(--negative-s) + -20%), calc(var(--negative-l) + 8%)); --negative-bg-20_light: hsl(var(--negative-h), var(--negative-s), calc(var(--negative-l) + 1%)); --negative-bg-20_dark: hsl(var(--negative-h), calc(var(--negative-s) + -23%), calc(var(--negative-l) + 7%)); /*Blue*/ --blue-bg_light: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 61%), calc(var(--primary-l) + 27%)); --blue-bg_dark: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 77%), calc(var(--primary-l) - 28%)); --blue-color_light: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 49%), calc(var(--primary-l) + -26%)); --blue-color_dark: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 63%), calc(var(--primary-l) - -17%)); --blue-color-secondary_light: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 70%), calc(var(--primary-l) + -3%)); --blue-color-secondary_dark: hsl(calc(var( --primary-h) + 159), calc(var(--primary-s) - 74%), calc(var(--primary-l) - 6%)); --blue-bg-hover_light: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 61%), calc(var(--primary-l) + 22%)); --blue-bg-hover_dark: hsl(calc(var( --primary-h) + 159), calc(var(--primary-s) - 61%), calc(var(--primary-l) + -20%)); --blue-color-hover_light: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 49%), calc(var(--primary-l) - 39%)); --blue-color-hover_dark: hsl(calc(var(--primary-h) + 159), calc(var(--primary-s) - 49%), calc(var(--primary-l) - 39%)); --blue-filter: brightness(0) saturate(95%) invert(207%) sepia(106%) saturate(275%) hue-rotate(-266deg) brightness(54%) contrast(96%); /*Text*/ --font-color-primary_light: hsla(var(--text-h), var(--text-s), var(--text-l), 1); --font-color-primary_dark: hsla(var(--text-h), var(--text-s), var(--text-l), 1 ); --font-color-secondary_light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.6); --font-color-secondary_dark: hsla(var(--text-h), var(--text-s), var(--text-l), 0.5); --font-color-third_light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.35); --font-color-third_dark: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3); --font-color-link_light: hsl(var(--primary-h), calc(var(--primary-s) - 13%), calc(var(--primary-l) - 14%)); --font-color-link_dark: hsl(var(--primary-h), calc(var(--primary-s) - 13%), calc(var(--primary-l) - 14%)); /* Icon Colors */ --icon-color-primary_light: hsl(var(--text-h), calc(var(--text-s)), calc(var(--text-l) - -58%)); --icon-color-primary_dark: hsl(var(--text-h), calc(var(--text-s)), calc(var(--text-l) + -41%)); --icon-color-secondary_light: hsl(var(--text-h), calc(var(--text-s)), calc(var(--text-l) - 12%)); --icon-color-secondary_dark: hsl(var(--text-h), calc(var(--text-s)), calc(var(--text-l) - -1%)); --icon-color-third_light: hsl(var(--text-h), calc(var(--text-s)), calc(var(--text-l) - 12%)); --icon-color-third_dark: hsl(var(--text-h), calc(var(--text-s)), calc(var(--text-l) - 12%)); /*Rating scale*/ --icon-color-rating-1_light: hsl(calc(var(--negative-h) - 9), calc(var(--negative-s) - 0%), calc(var(--negative-l) + -53%)); --icon-color-rating-1_dark: hsl(var(--negative-h), calc(var(--negative-s) - 4%), calc(var(--negative-l) + 33%)); --icon-color-rating-2_light: hsl(calc(var( --primary-h) - 9), var(--primary-s), calc(var(--primary-l) - 26%)); --icon-color-rating-2_dark: hsl(calc(var( --primary-h) - 25), calc(var(--primary-s) - 19%), calc(var(--primary-l) - 1%)); --icon-color-rating-3_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 13%)); --icon-color-rating-3_dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 13%)); --icon-color-rating-4_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) - 50%)); --icon-color-rating-4_dark: hsl(var(--positive-h), calc(var(--positive-s) - -3%), calc(var(--positive-l) - 10%)); /*Inputs*/ /* Light Input Styles */ --input-bg_light: #eeeeee; --input-bg_dark: #3f3f3f; --input-bg-focus_light: rgba(255,255,255,1); --input-bg-focus_dark: black; --input-bg-tag_light: hsl(var(--secondary-h), calc(var(--secondary-s) + -11%), calc(var(--secondary-l) - 8%)); --input-bg-tag_dark: rgba(0,0,0,0.05); --input-color-tag_light: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 38%), 1); --input-color-tag_dark: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 17%), 1); --input-color_light: rgba(0,0,0,.7); --input-color_dark: rgba(255, 255, 255, 0.9); --input-color-hover_light: rgba(0,0,0,1); --input-color-hover_dark: rgba(255, 255, 255, 0.9); --input-border_light: rgba(0,0,0,0); --input-border_dark: rgba(0,0,0,0); --input-border-focus_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + -10%)); --input-border-focus_dark: rgba(255, 255, 255, 0.2); --input-primary-bg_light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + -10%)); --input-primary-bg_dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + -10%)); --input-primary-text_light: hsl(var(--background-h), var(--background-s), calc(var(--background-l))); --input-primary-text_dark: hsl(var(--background-h), var(--background-s), calc(var(--background-l))); --input-placeholder_light: rgba(0,0,0,0.2); --input-placeholder_dark: rgba(255,255,255,0.3); --input-positive-bg_light: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + -8%)); --input-positive-bg_dark: hsl(var(--positive-h), var(--positive-s), calc(var(--positive-l) + -1%)); /* Picture Styles */ --picture-bg_light: white; --picture-bg_dark: #4a4a4a; --picture-color_light: #4a4a4a; --picture-color_dark: rgba(255, 255, 255, 0.65); /* Light Gradient Upgrade */ --gradient-upgrade: linear-gradient(90deg, hsla(39,98%,58%,1) 0%, hsla(4,98%,58%,1) 100%); --gradient-upgrade-hover: linear-gradient(90deg, hsla(39,98%,50%,1) 0%, hsla(4,93%,49%,1) 100%); /* Gradient Orange and Red */ --gradient-orange-light_light: hsl(var(--secondary-h), calc(var(--secondary-s) + 51%), calc(var(--secondary-l) - 3%)); --gradient-orange-light_dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - -8%)); --gradient-red-light_light: hsl(var(--negative-h), var(--negative-s), calc(var(--negative-l) - 10%)); --gradient-red-light_dark: hsl(var(--negative-h), calc(var(--negative-s) + -23%), calc(var(--negative-l) + 7%)); --gradient-orange-to-red-light_light: var(--gradient-orange-light_light) 0%, var(--gradient-red-light_light) 100%; --gradient-orange-to-red-light_dark: var(--gradient-orange-light_dark) 0%, var(--gradient-red-light_dark) 100%; /* Gradient Orange and Red Full */ --gradient-orange_light: hsl(var(--primary-h), calc(var(--primary-s)), calc(var(--primary-l))); --gradient-orange_dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l))); --gradient-orange-hover_light: hsl(var(--primary-h), calc(var(--primary-s)), calc(var(--primary-l) - 8%)); --gradient-orange-hover_dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l))); --gradient-red_light: hsl(var(--negative-h), calc(var(--negative-s) - -15%), calc(var(--negative-l) - 40%)); --gradient-red_dark: hsl(calc(var(--negative-h) + -11), calc(var(--negative-s) + 29%), calc(var(--negative-l) + 27%)); --gradient-red-hover_light: hsl(var(--negative-h), calc(var(--negative-s) - -22%), calc(var(--negative-l) - 44%)); --gradient-red-hover_dark: hsl(calc(var(--negative-h) + -11), calc(var(--negative-s) + 29%), calc(var(--negative-l) + 27%)); --gradient-orange-to-red_light: var(--gradient-orange_light) 0%, var(--gradient-red_light) 100%; --gradient-orange-to-red_dark: var(--gradient-orange_dark) 0%, var(--gradient-red_dark) 100%; --gradient-orange-to-red-hover_light: var(--gradient-orange-hover_light) 0%, var(--gradient-red-hover_light) 100%; --gradient-orange-to-red-hover_dark: var(--gradient-orange-hover_dark) 0%, var(--gradient-red-hover_dark) 100%; /* Gradient Positive */ --gradient-positive_light: var(--positive-bg); --gradient-positive_dark: var(--positive-color); --gradient-positive-light-to-dark_light: var(--gradient-positive_light) 0%, var(--gradient-positive_dark) 100%; --gradient-positive-light-to-dark_dark: var(--gradient-positive_dark) 0%, var(--gradient-positive_light) 100%; /*Teamtailor*/ --teamtailor-bg_light: #fae8ef; --teamtailor-color_light: #ea3884; --teamtailor-bg_dark: #6b0c34; --teamtailor-color_dark: #ea3884; /*Filter*/ --filter-chip-icon_light: invert(40%) sepia(81%) saturate(181%) hue-rotate(128deg) brightness(92%) contrast(0%); --filter-chip-icon_dark: invert(-1%) sepia(81%) saturate(181%) hue-rotate(128deg) brightness(92%) contrast(0%); /*Light theme - Default on page load*/ --light: var(--light_light); --dark: var(--dark_light); --body-bg: var(--body-bg_light); --center-bg: var(--center-bg_light); --center-center-bg: var(--center-center-bg_light); --primary: var(--primary_light); --primary-bg: var(--primary-bg_light); --primary-color: var(--primary-color_light); --primary-bg-hover: var(--primary-bg-hover_light); --primary-color-hover: var(--primary-color-hover_light); --secondary: var(--secondary_light); --secondary-bg: var(--secondary-bg_light); --secondary-bg-on-third: var(--secondary-bg-on-third_light); --secondary-color: var(--secondary-color_light); --secondary-bg-hover: var(--secondary-bg-hover_light); --secondary-bg-light: var(--secondary-bg_light_light); --secondary-color-hover: var(--secondary-color-hover_light); --secondary-color-on-secondary: var(--secondary-color-on-secondary_light); --secondary-variant-color: var(--secondary-variant-color_light); --secondary-variant-bg: var(--secondary-variant-bg_light); --secondary-bg-light-dark: var(--secondary-bg-light-dark_light); --secondary-icon-color: var(--secondary-icon-color_light); --secondary-arrow-icon: var(--secondary-arrow-icon_light); --secondary-bg-on-white: var(--secondary-bg-on-white_light); --third-bg: var(--third-bg_light); --third-color: var(--third-color_light); --third-color-secondary: var(--third-color-secondary_light); --third-bg-hover: var(--third-bg-hover_light); --third-color-hover: var(--third-color-hover_light); --third-color-medium: var(--third-color-medium_light); --third-color-low: var(--third-color-low_light); --third-variant-bg: var(--third-variant-bg_light); --third-variant-color: var(--third-variant-color_light); --third-variant-bg-hover: var(--third-variant-bg-hover_light); --third-variant-color-hover: var(--third-variant-color-hover_light); --third-ongrey-bg: var(--third-ongrey-bg_light); --third-ongrey-color: var(--third-ongrey-color_light); --white-bg: var(--white-bg_light); --white-color: var(--white-color_light); --white-bg-hover: var(--white-bg-hover_light); --white-bg-darker: var(--white-bg-darker_light); --white-bg-dark-special: var(--white-bg-dark-special_light); --transparent-3xs: var(--transparent-3xs_light); --transparent-2xs: var(--transparent-2xs_light); --transparent-xs: var(--transparent-xs_light); --transparent-sm: var(--transparent-sm_light); --transparent-md: var(--transparent-md_light); --transparent-lg: var(--transparent-lg_light); --transparent-lg-reverse: var(--transparent-lg-reverse_light); --transparent-xl: var(--transparent-xl_light); --transparent-2xl: var(--transparent-2xl_light); --grey-2xs: var(--grey-2xs_light); --grey-xs: var(--grey-xs_light); --grey-sm: var(--grey-sm_light); --positive-bg: var(--positive-bg_light); --positive-color: var(--positive-color_light); --positive-color-secondary: var(--positive-color-secondary_light); --positive-bg-hover: var(--positive-bg-hover_light); --positive-color-hover: var(--positive-color-hover_light); --positive-on-positive-bg: var(--positive-on-positive-bg_light); --positive-on-positive-color: var(--positive-on-positive-color_light); --positive-on-positive-bg-hover: var(--positive-on-positive-bg-hover_light); --positive-on-positive-color-hover: var(--positive-on-positive-color-hover_light); --positive-color-medium: var(--positive-color-medium_light); --positive-color-low: var(--positive-color-low_light); --positive-bg-100: var(--positive-bg-100_light); --positive-bg-80: var(--positive-bg-80_light); --positive-bg-60: var(--positive-bg-60_light); --positive-bg-40: var(--positive-bg-40_light); --positive-bg-20: var(--positive-bg-20_light); --negative-bg: var(--negative-bg_light); --negative-color: var(--negative-color_light); --negative-color-secondary: var(--negative-color-secondary_light); --negative-bg-hover: var(--negative-bg-hover_light); --negative-color-hover: var(--negative-color-hover_light); --negative-color-medium: var(--negative-color-medium_light); --negative-color-low: var(--negative-color-low_light); --negative-color-indicator: var(--negative-color-indicator_light); --negative-variant-color: var(--negative-variant-color_light); --negative-bg-100: var(--negative-bg-100_light); --negative-bg-80: var(--negative-bg-80_light); --negative-bg-60: var(--negative-bg-60_light); --negative-bg-40: var(--negative-bg-40_light); --negative-bg-20: var(--negative-bg-20_light); --transparent-2xs: var(--transparent-2xs_light); --transparent-xs: var(--transparent-xs_light); --transparent-sm: var(--transparent-sm_light); --transparent-md: var(--transparent-md_light); --transparent-lg: var(--transparent-lg_light); --transparent-xl: var(--transparent-xl_light); --transparent-2xl: var(--transparent-2xl_light); --warning-bg: var(--warning-bg_light); --warning-color: var(--warning-color_light); --warning-bg-hover: var(--warning-bg-hover_light); --warning-color-hover: var(--warning-color-hover_light); --blue-bg: var(--blue-bg_light); --blue-color: var(--blue-color_light); --blue-color-secondary: var(--blue-color-secondary_light); --blue-bg-hover: var(--blue-bg-hover_light); --blue-color-hover: var(--blue-color-hover_light); --font-color-primary: var(--font-color-primary_light); --font-color-secondary: var(--font-color-secondary_light); --font-color-third: var(--font-color-third_light); --font-color-link: var(--font-color-link_light); --icon-color-primary: var(--icon-color-primary_light); --icon-color-secondary: var(--icon-color-secondary_light); --icon-color-third: var(--icon-color-third_light); --icon-color-rating-1: var(--icon-color-rating-1_light); --icon-color-rating-2: var(--icon-color-rating-2_light); --icon-color-rating-3: var(--icon-color-rating-3_light); --icon-color-rating-4: var(--icon-color-rating-4_light); --picture-bg: var(--picture-bg_light); --picture-color: var(--picture-color_light); --gradient-orange-light: var(--gradient-orange-light_light); --gradient-red-light: var(--gradient-red-light_light); --gradient-orange-to-red-light: var(--gradient-orange-to-red-light_light); --gradient-orange: var(--gradient-orange); --gradient-red: var(--gradient-red); --gradient-orange-to-red: var(--gradient-orange-to-red_light); --gradient-orange-to-red-hover: var(--gradient-orange-to-red-hover_light); --gradient-positive: var(--gradient-positive_light); --gradient-positive-light-to-dark: var(--gradient-positive-light-to-dark_light); --input-bg: var(--input-bg_light); --input-bg-focus: var(--input-bg-focus_light); --input-bg-tag: var(--input-bg-tag_light); --input-color-tag: var(--input-color-tag_light); --input-color: var(--input-color_light); --input-color-hover: var(--input-color-hover_light); --input-border: var(--input-border_light); --input-border-focus: var(--input-border-focus_light); --input-primary-bg: var(--input-primary-bg_light); --input-primary-text: var(--input-primary-text_light); --input-placeholder: var(--input-placeholder_light); --input-positive-bg: var(--input-positive-bg_light); --teamtailor-bg: var(--teamtailor-bg_light); --teamtailor-color: var(--teamtailor-color_light); --filter-chip-icon: var(--filter-chip-icon_light); } /*Theme light switch*/ :root:not([data-theme=dark]), [data-theme=light] { --all: var(--light-all); --all-h: var(--light-all-h); --all-s: var(--light-all-s); --all-l: var(--light-all-l); --background: var(--light-background); --background-h: var(--light-background-h); --background-s: var(--light-background-s); --background-l: var(--light-background-l); --text: var(--light-text); --text-h: var(--light-text-h); --text-s: var(--light-text-s); --text-l: var(--light-text-l); --primary: var(--light-primary); --primary-h: var(--light-primary-h); --primary-s: var(--light-primary-s); --primary-l: var(--light-primary-l); --secondary: var(--light-secondary); --secondary-h: var(--light-secondary-h); --secondary-s: var(--light-secondary-s); --secondary-l: var(--light-secondary-l); --neutral: var(--light-neutral); --neutral-h: var(--light-neutral-h); --neutral-s: var(--light-neutral-s); --neutral-l: var(--light-neutral-l); --positive: var(--light-positive); --positive-h: var(--light-positive-h); --positive-s: var(--light-positive-s); --positive-l: var(--light-positive-l); --negative: var(--light-negative); --negative-h: var(--light-negative-h); --negative-s: var(--light-negative-s); --negative-l: var(--light-negative-l); --warning: var(--light-warning); --warning-h: var(--light-warning-h); --warning-s: var(--light-warning-s); --warning-l: var(--light-warning-l); --light: var(--light_light); --dark: var(--dark_light); --body-bg: var(--body-bg_light); --center-bg: var(--center-bg_light); --center-center-bg: var(--center-center-bg_light); --primary: var(--primary_light); --primary-bg: var(--primary-bg_light); --primary-color: var(--primary-color_light); --primary-bg-hover: var(--primary-bg-hover_light); --primary-color-hover: var(--primary-color-hover_light); --secondary: var(--secondary_light); --secondary-bg: var(--secondary-bg_light); --secondary-bg-on-third: var(--secondary-bg-on-third_light); --secondary-color: var(--secondary-color_light); --secondary-bg-hover: var(--secondary-bg-hover_light); --secondary-bg-light: var(--secondary-bg_light_light); --secondary-color-hover: var(--secondary-color-hover_light); --secondary-color-on-secondary: var(--secondary-color-on-secondary_light); --secondary-variant-color: var(--secondary-variant-color_light); --secondary-variant-bg: var(--secondary-variant-bg_light); --secondary-bg-light-dark: var(--secondary-bg-light-dark_light); --secondary-icon-color: var(--secondary-icon-color_light); --secondary-arrow-icon: var(--secondary-arrow-icon_light); --secondary-bg-on-white: var(--secondary-bg-on-white_light); --third-bg: var(--third-bg_light); --third-color: var(--third-color_light); --third-color-secondary: var(--third-color-secondary_light); --third-bg-hover: var(--third-bg-hover_light); --third-color-hover: var(--third-color-hover_light); --third-color-medium: var(--third-color-medium_light); --third-color-low: var(--third-color-low_light); --third-variant-bg: var(--third-variant-bg_light); --third-variant-color: var(--third-variant-color_light); --third-variant-bg-hover: var(--third-variant-bg-hover_light); --third-variant-color-hover: var(--third-variant-color-hover_light); --third-ongrey-bg: var(--third-ongrey-bg_light); --third-ongrey-color: var(--third-ongrey-color_light); --white-bg: var(--white-bg_light); --white-color: var(--white-color_light); --white-bg-hover: var(--white-bg-hover_light); --white-bg-darker: var(--white-bg-darker_light); --white-bg-dark-special: var(--white-bg-dark-special_light); --transparent-3xs: var(--transparent-3xs_light); --transparent-2xs: var(--transparent-2xs_light); --transparent-xs: var(--transparent-xs_light); --transparent-sm: var(--transparent-sm_light); --transparent-md: var(--transparent-md_light); --transparent-lg: var(--transparent-lg_light); --transparent-lg-reverse: var(--transparent-lg-reverse_light); --transparent-xl: var(--transparent-xl_light); --transparent-2xl: var(--transparent-2xl_light); --positive-bg: var(--positive-bg_light); --positive-color: var(--positive-color_light); --positive-color-secondary: var(--positive-color-secondary_light); --positive-bg-hover: var(--positive-bg-hover_light); --positive-color-hover: var(--positive-color-hover_light); --positive-on-positive-bg: var(--positive-on-positive-bg_light); --positive-on-positive-color: var(--positive-on-positive-color_light); --positive-on-positive-bg-hover: var(--positive-on-positive-bg-hover_light); --positive-on-positive-color-hover: var(--positive-on-positive-color-hover_light); --positive-color-medium: var(--positive-color-medium_light); --positive-color-low: var(--positive-color-low_light); --positive-bg-100: var(--positive-bg-100_light); --positive-bg-80: var(--positive-bg-80_light); --positive-bg-60: var(--positive-bg-60_light); --positive-bg-40: var(--positive-bg-40_light); --positive-bg-20: var(--positive-bg-20_light); --negative-bg: var(--negative-bg_light); --negative-color: var(--negative-color_light); --negative-color-secondary: var(--negative-color-secondary_light); --negative-bg-hover: var(--negative-bg-hover_light); --negative-color-hover: var(--negative-color-hover_light); --negative-color-medium: var(--negative-color-medium_light); --negative-color-low: var(--negative-color-low_light); --negative-color-indicator: var(--negative-color-indicator_light); --negative-variant-bg: var(--negative-variant-bg_light); --negative-variant-color: var(--negative-variant-color_light); --negative-bg-100: var(--negative-bg-100_light); --negative-bg-80: var(--negative-bg-80_light); --negative-bg-60: var(--negative-bg-60_light); --negative-bg-40: var(--negative-bg-40_light); --negative-bg-20: var(--negative-bg-20_light); --transparent-2xs: var(--transparent-2xs_light); --transparent-xs: var(--transparent-xs_light); --transparent-sm: var(--transparent-sm_light); --transparent-md: var(--transparent-md_light); --transparent-lg: var(--transparent-lg_light); --transparent-xl: var(--transparent-xl_light); --transparent-2xl: var(--transparent-2xl_light); --grey-2xs: var(--grey-2xs_light); --grey-xs: var(--grey-xs_light); --grey-sm: var(--grey-sm_light); --warning-bg: var(--warning-bg_light); --warning-color: var(--warning-color_light); --warning-bg-hover: var(--warning-bg-hover_light); --warning-color-hover: var(--warning-color-hover_light); --blue-bg: var(--blue-bg_light); --blue-color: var(--blue-color_light); --blue-color-secondary: var(--blue-color-secondary_light); --blue-bg-hover: var(--blue-bg-hover_light); --blue-color-hover: var(--blue-color-hover_light); --font-color-primary: var(--font-color-primary_light); --font-color-secondary: var(--font-color-secondary_light); --font-color-third: var(--font-color-third_light); --font-color-link: var(--font-color-link_light); --icon-color-primary: var(--icon-color-primary_light); --icon-color-secondary: var(--icon-color-secondary_light); --icon-color-third: var(--icon-color-third_light); --icon-color-rating-1: var(--icon-color-rating-1_light); --icon-color-rating-2: var(--icon-color-rating-2_light); --icon-color-rating-3: var(--icon-color-rating-3_light); --icon-color-rating-4: var(--icon-color-rating-4_light); --picture-bg: var(--picture-bg_light); --picture-color: var(--picture-color_light); --gradient-orange-light: var(--gradient-orange-light_light); --gradient-red-light: var(--gradient-red-light_light); --gradient-orange-to-red-light: var(--gradient-orange-to-red-light_light); --gradient-orange: var(--gradient-orange); --gradient-red: var(--gradient-red); --gradient-orange-to-red: var(--gradient-orange-to-red_light); --gradient-orange-to-red-hover: var(--gradient-orange-to-red-hover_light); --gradient-positive: var(--gradient-positive_light); --gradient-positive-light-to-dark: var(--gradient-positive-light-to-dark_light); --input-bg: var(--input-bg_light); --input-bg-focus: var(--input-bg-focus_light); --input-bg-tag: var(--input-bg-tag_light); --input-color-tag: var(--input-color-tag_light); --input-color: var(--input-color_light); --input-color-hover: var(--input-color-hover_light); --input-border: var(--input-border_light); --input-border-focus: var(--input-border-focus_light); --input-primary-bg: var(--input-primary-bg_light); --input-primary-text: var(--input-primary-text_light); --input-placeholder: var(--input-placeholder_light); --input-positive-bg: var(--input-positive-bg_light); --teamtailor-bg: var(--teamtailor-bg_light); --teamtailor-color: var(--teamtailor-color_light); --filter-chip-icon: var(--filter-chip-icon_light); } /*Theme dark switch*/ :root:not([data-theme=light]), [data-theme=dark] { --all: var(--dark-all); --all-h: var(--dark-all-h); --all-s: var(--dark-all-s); --all-l: var(--dark-all-l); --background: var(--dark-background); --background-h: var(--dark-background-h); --background-s: var(--dark-background-s); --background-l: var(--dark-background-l); --text: var(--dark-text); --text-h: var(--dark-text-h); --text-s: var(--dark-text-s); --text-l: var(--dark-text-l); --primary: var(--dark-primary); --primary-h: var(--dark-primary-h); --primary-s: var(--dark-primary-s); --primary-l: var(--dark-primary-l); --secondary: var(--dark-secondary); --secondary-h: var(--dark-secondary-h); --secondary-s: var(--dark-secondary-s); --secondary-l: var(--dark-secondary-l); --neutral: var(--dark-neutral); --neutral-h: var(--dark-neutral-h); --neutral-s: var(--dark-neutral-s); --neutral-l: var(--dark-neutral-l); --positive: var(--dark-positive); --positive-h: var(--dark-positive-h); --positive-s: var(--dark-positive-s); --positive-l: var(--dark-positive-l); --negative: var(--dark-negative); --negative-h: var(--dark-negative-h); --negative-s: var(--dark-negative-s); --negative-l: var(--dark-negative-l); --warning: var(--dark-warning); --warning-h: var(--dark-warning-h); --warning-s: var(--dark-warning-s); --warning-l: var(--dark-warning-l); --light: var(--light_dark); --dark: var(--dark_dark); --body-bg: var(--body-bg_dark); --center-bg: var(--center-bg_dark); --center-center-bg: var(--center-center-bg_dark); --primary: var(--primary_dark); --primary-bg: var(--primary-bg_dark); --primary-color: var(--primary-color_dark); --primary-bg-hover: var(--primary-bg-hover_dark); --primary-color-hover: var(--primary-color-hover_dark); --secondary: var(--secondary_dark); --secondary-bg: var(--secondary-bg_dark); --secondary-bg-on-third: var(--secondary-bg-on-third_dark); --secondary-color: var(--secondary-color_dark); --secondary-bg-hover: var(--secondary-bg-hover_dark); --secondary-bg-light: var(--secondary-bg-dark_dark); --secondary-color-hover: var(--secondary-color-hover_dark); --secondary-color-on-secondary: var(--secondary-color-on-secondary_dark); --secondary-variant-color: var(--secondary-variant-color_dark); --secondary-variant-bg: var(--secondary-variant-bg_dark); --secondary-bg-light-dark: var(--secondary-bg-light-dark_dark); --secondary-icon-color: var(--secondary-icon-color_dark); --secondary-arrow-icon: var(--secondary-arrow-icon_dark); --secondary-bg-on-white: var(--secondary-bg-on-white_dark); --third-bg: var(--third-bg_dark); --third-color: var(--third-color_dark); --third-color-secondary: var(--third-color-secondary_dark); --third-bg-hover: var(--third-bg-hover_dark); --third-color-hover: var(--third-color-hover_dark); --third-color-medium: var(--third-color-medium_dark); --third-color-low: var(--third-color-low_dark); --third-variant-bg: var(--third-variant-bg_dark); --third-variant-color: var(--third-variant-color_dark); --third-variant-bg-hover: var(--third-variant-bg-hover_dark); --third-variant-color-hover: var(--third-variant-color-hover_dark); --third-ongrey-bg: var(--third-ongrey-bg_dark); --third-ongrey-color: var(--third-ongrey-color_dark); --white-bg: var(--white-bg_dark); --white-color: var(--white-color_dark); --white-bg-hover: var(--white-bg-hover_dark); --white-bg-darker: var(--white-bg-darker_dark); --white-bg-dark-special: var(--white-bg-dark-special_dark); --positive-bg: var(--positive-bg_dark); --positive-color: var(--positive-color_dark); --positive-color-secondary: var(--positive-color-secondary_dark); --positive-bg-hover: var(--positive-bg-hover_dark); --positive-color-hover: var(--positive-color-hover_dark); --positive-on-positive-bg: var(--positive-on-positive-bg_dark); --positive-on-positive-color: var(--positive-on-positive-color_dark); --positive-on-positive-bg-hover: var(--positive-on-positive-bg-hover_dark); --positive-on-positive-color-hover: var(--positive-on-positive-color-hover_dark); --positive-color-medium: var(--positive-color-medium_dark); --positive-color-low: var(--positive-color-low_dark); --positive-bg-100: var(--positive-bg-100_dark); --positive-bg-80: var(--positive-bg-80_dark); --positive-bg-60: var(--positive-bg-60_dark); --positive-bg-40: var(--positive-bg-40_dark); --positive-bg-20: var(--positive-bg-20_dark); --negative-bg: var(--negative-bg_dark); --negative-color: var(--negative-color_dark); --negative-color-secondary: var(--negative-color-secondary_dark); --negative-bg-hover: var(--negative-bg-hover_dark); --negative-color-hover: var(--negative-color-hover_dark); --negative-color-medium: var(--negative-color-medium_dark); --negative-color-low: var(--negative-color-low_dark); --negative-color-indicator: var(--negative-color-indicator_dark); --negative-variant-bg: var(--negative-variant-bg_dark); --negative-variant-color: var(--negative-variant-color_dark); --negative-bg-100: var(--negative-bg-100_dark); --negative-bg-80: var(--negative-bg-80_dark); --negative-bg-60: var(--negative-bg-60_dark); --negative-bg-40: var(--negative-bg-40_dark); --negative-bg-20: var(--negative-bg-20_dark); --transparent-3xs: var(--transparent-3xs_dark); --transparent-2xs: var(--transparent-2xs_dark); --transparent-xs: var(--transparent-xs_dark); --transparent-sm: var(--transparent-sm_dark); --transparent-md: var(--transparent-md_dark); --transparent-lg: var(--transparent-lg_dark); --transparent-lg-reverse: var(--transparent-lg-reverse_dark); --transparent-xl: var(--transparent-xl_dark); --transparent-2xl: var(--transparent-2xl_dark); --grey-2xs: var(--grey-2xs_dark); --grey-xs: var(--grey-xs_dark); --grey-sm: var(--grey-sm_dark); --warning-bg: var(--warning-bg_dark); --warning-color: var(--warning-color_dark); --warning-bg-hover: var(--warning-bg-hover_dark); --warning-color-hover: var(--warning-color-hover_dark); --blue-bg: var(--blue-bg_dark); --blue-color: var(--blue-color_dark); --blue-color-secondary: var(--blue-color-secondary_dark); --blue-bg-hover: var(--blue-bg-hover_dark); --blue-color-hover: var(--blue-color-hover_dark); --font-color-primary: var(--font-color-primary_dark); --font-color-secondary: var(--font-color-secondary_dark); --font-color-third: var(--font-color-third_dark); --font-color-link: var(--font-color-link_dark); --icon-color-primary: var(--icon-color-primary_dark); --icon-color-secondary: var(--icon-color-secondary_dark); --icon-color-third: var(--icon-color-third_dark); --icon-color-rating-1: var(--icon-color-rating-1_dark); --icon-color-rating-2: var(--icon-color-rating-2_dark); --icon-color-rating-3: var(--icon-color-rating-3_dark); --icon-color-rating-4: var(--icon-color-rating-4_dark); --picture-bg: var(--picture-bg_dark); --picture-color: var(--picture-color_dark); --gradient-orange-light: var(--gradient-orange-light_dark); --gradient-red-light: var(--gradient-red-light_dark); --gradient-orange-to-red-light: var(--gradient-orange-to-red-light_dark); --gradient-orange: var(--gradient-orange); --gradient-red: var(--gradient-red); --gradient-orange-to-red: var(--gradient-orange-to-red_dark); --gradient-orange-to-red-hover: var(--gradient-orange-to-red-hover_dark); --gradient-positive: var(--gradient-positive_dark); --gradient-positive-light-to-dark: var(--gradient-positive-light-to-dark_dark); --input-bg: var(--input-bg_dark); --input-bg-focus: var(--input-bg-focus_dark); --input-bg-tag: var(--input-bg-tag_dark); --input-color-tag: var(--input-color-tag_dark); --input-color: var(--input-color_dark); --input-color-hover: var(--input-color-hover_dark); --input-border: var(--input-border_dark); --input-border-focus: var(--input-border-focus_dark); --input-primary-bg: var(--input-primary-bg_dark); --input-primary-text: var(--input-primary-text_dark); --input-placeholder: var(--input-placeholder_dark); --input-positive-bg: var(--input-positive-bg_dark); --teamtailor-bg: var(--teamtailor-bg_dark); --teamtailor-color: var(--teamtailor-color_dark); --filter-chip-icon: var(--filter-chip-icon_dark); } /*Theme prefered light*/ @media (prefers-color-scheme: light) { :root:not([data-theme=dark]), [data-theme=light] { --all: var(--light-all); --all-h: var(--light-all-h); --all-s: var(--light-all-s); --all-l: var(--light-all-l); --background: var(--light-background); --background-h: var(--light-background-h); --background-s: var(--light-background-s); --background-l: var(--light-background-l); --text: var(--light-text); --text-h: var(--light-text-h); --text-s: var(--light-text-s); --text-l: var(--light-text-l); --primary: var(--light-primary); --primary-h: var(--light-primary-h); --primary-s: var(--light-primary-s); --primary-l: var(--light-primary-l); --secondary: var(--light-secondary); --secondary-h: var(--light-secondary-h); --secondary-s: var(--light-secondary-s); --secondary-l: var(--light-secondary-l); --neutral: var(--light-neutral); --neutral-h: var(--light-neutral-h); --neutral-s: var(--light-neutral-s); --neutral-l: var(--light-neutral-l); --positive: var(--light-positive); --positive-h: var(--light-positive-h); --positive-s: var(--light-positive-s); --positive-l: var(--light-positive-l); --negative: var(--light-negative); --negative-h: var(--light-negative-h); --negative-s: var(--light-negative-s); --negative-l: var(--light-negative-l); --warning: var(--light-warning); --warning-h: var(--light-warning-h); --warning-s: var(--light-warning-s); --warning-l: var(--light-warning-l); --light: var(--light_light); --dark: var(--dark_light); --body-bg: var(--body-bg_light); --center-bg: var(--center-bg_light); --center-center-bg: var(--center-center-bg_light); --primary: var(--primary_light); --primary-bg: var(--primary-bg_light); --primary-color: var(--primary-color_light); --primary-bg-hover: var(--primary-bg-hover_light); --primary-color-hover: var(--primary-color-hover_light); --secondary: var(--secondary_light); --secondary-bg: var(--secondary-bg_light); --secondary-bg-on-third: var(--secondary-bg-on-third_light); --secondary-color: var(--secondary-color_light); --secondary-bg-hover: var(--secondary-bg-hover_light); --secondary-bg-light: var(--secondary-bg_light_light); --secondary-color-hover: var(--secondary-color-hover_light); --secondary-color-on-secondary: var(--secondary-color-on-secondary_light); --secondary-variant-color: var(--secondary-variant-color_light); --secondary-variant-bg: var(--secondary-variant-bg_light); --secondary-bg-light-dark: var(--secondary-bg-light-dark_light); --secondary-icon-color: var(--secondary-icon-color_light); --secondary-arrow-icon: var(--secondary-arrow-icon_light); --secondary-bg-on-white: var(--secondary-bg-on-white_light); --third-bg: var(--third-bg_light); --third-color: var(--third-color_light); --third-color-secondary: var(--third-color-secondary_light); --third-bg-hover: var(--third-bg-hover_light); --third-color-hover: var(--third-color-hover_light); --third-color-medium: var(--third-color-medium_light); --third-color-low: var(--third-color-low_light); --third-variant-bg: var(--third-variant-bg_light); --third-variant-color: var(--third-variant-color_light); --third-variant-bg-hover: var(--third-variant-bg-hover_light); --third-variant-color-hover: var(--third-variant-color-hover_light); --third-ongrey-bg: var(--third-ongrey-bg_light); --third-ongrey-color: var(--third-ongrey-color_light); --white-bg: var(--white-bg_light); --white-color: var(--white-color_light); --white-bg-hover: var(--white-bg-hover_light); --white-bg-darker: var(--white-bg-darker_light); --white-bg-dark-special: var(--white-bg-dark-special_light); --transparent-3xs: var(--transparent-3xs_light); --transparent-2xs: var(--transparent-2xs_light); --transparent-xs: var(--transparent-xs_light); --transparent-sm: var(--transparent-sm_light); --transparent-md: var(--transparent-md_light); --transparent-lg: var(--transparent-lg_light); --transparent-lg-reverse: var(--transparent-lg-reverse_light); --transparent-xl: var(--transparent-xl_light); --transparent-2xl: var(--transparent-2xl_light); --grey-2xs: var(--grey-2xs_light); --grey-xs: var(--grey-xs_light); --grey-sm: var(--grey-sm_light); --positive-bg: var(--positive-bg_light); --positive-color: var(--positive-color_light); --positive-color-secondary: var(--positive-color-secondary_light); --positive-bg-hover: var(--positive-bg-hover_light); --positive-color-hover: var(--positive-color-hover_light); --positive-on-positive-bg: var(--positive-on-positive-bg_light); --positive-on-positive-color: var(--positive-on-positive-color_light); --positive-on-positive-bg-hover: var(--positive-on-positive-bg-hover_light); --positive-on-positive-color-hover: var(--positive-on-positive-color-hover_light); --positive-color-medium: var(--positive-color-medium_light); --positive-color-low: var(--positive-color-low_light); --positive-bg-100: var(--positive-bg-100_light); --positive-bg-80: var(--positive-bg-80_light); --positive-bg-60: var(--positive-bg-60_light); --positive-bg-40: var(--positive-bg-40_light); --positive-bg-20: var(--positive-bg-20_light); --negative-bg: var(--negative-bg_light); --negative-color: var(--negative-color_light); --negative-color-secondary: var(--negative-color-secondary_light); --negative-bg-hover: var(--negative-bg-hover_light); --negative-color-hover: var(--negative-color-hover_light); --negative-color-medium: var(--negative-color-medium_light); --negative-color-low: var(--negative-color-low_light); --negative-color-indicator: var(--negative-color-indicator_light); --negative-variant-bg: var(--negative-variant-bg_light); --negative-variant-color: var(--negative-variant-color_light); --negative-bg-100: var(--negative-bg-100_light); --negative-bg-80: var(--negative-bg-80_light); --negative-bg-60: var(--negative-bg-60_light); --negative-bg-40: var(--negative-bg-40_light); --negative-bg-20: var(--negative-bg-20_light); --transparent-2xs: var(--transparent-2xs_light); --transparent-xs: var(--transparent-xs_light); --transparent-sm: var(--transparent-sm_light); --transparent-md: var(--transparent-md_light); --transparent-lg: var(--transparent-lg_light); --transparent-xl: var(--transparent-xl_light); --transparent-2xl: var(--transparent-2xl_light); --warning-bg: var(--warning-bg_light); --warning-color: var(--warning-color_light); --warning-bg-hover: var(--warning-bg-hover_light); --warning-color-hover: var(--warning-color-hover_light); --blue-bg: var(--blue-bg_light); --blue-color: var(--blue-color_light); --blue-color-secondary: var(--blue-color-secondary_light); --blue-bg-hover: var(--blue-bg-hover_light); --blue-color-hover: var(--blue-color-hover_light); --font-color-primary: var(--font-color-primary_light); --font-color-secondary: var(--font-color-secondary_light); --font-color-third: var(--font-color-third_light); --font-color-link: var(--font-color-link_light); --icon-color-primary: var(--icon-color-primary_light); --icon-color-secondary: var(--icon-color-secondary_light); --icon-color-third: var(--icon-color-third_light); --icon-color-rating-1: var(--icon-color-rating-1_light); --icon-color-rating-2: var(--icon-color-rating-2_light); --icon-color-rating-3: var(--icon-color-rating-3_light); --icon-color-rating-4: var(--icon-color-rating-4_light); --picture-bg: var(--picture-bg_light); --picture-color: var(--picture-color_light); --gradient-orange-light: var(--gradient-orange-light_light); --gradient-red-light: var(--gradient-red-light_light); --gradient-orange-to-red-light: var(--gradient-orange-to-red-light_light); --gradient-orange: var(--gradient-orange); --gradient-red: var(--gradient-red); --gradient-orange-to-red: var(--gradient-orange-to-red_light); --gradient-orange-to-red-hover: var(--gradient-orange-to-red-hover_light); --gradient-positive: var(--gradient-positive_light); --gradient-positive-light-to-dark: var(--gradient-positive-light-to-dark_light); --input-bg: var(--input-bg_light); --input-bg-focus: var(--input-bg-focus_light); --input-bg-tag: var(--input-bg-tag_light); --input-color-tag: var(--input-color-tag_light); --input-color: var(--input-color_light); --input-color-hover: var(--input-color-hover_light); --input-border: var(--input-border_light); --input-border-focus: var(--input-border-focus_light); --input-primary-bg: var(--input-primary-bg_light); --input-primary-text: var(--input-primary-text_light); --input-placeholder: var(--input-placeholder_light); --input-positive-bg: var(--input-positive-bg_light); --teamtailor-bg: var(--teamtailor-bg_light); --teamtailor-color: var(--teamtailor-color_light); --filter-chip-icon: var(--filter-chip-icon_light); } } /*Theme prefered dark*/ @media (prefers-color-scheme: dark) { :root:not([data-theme=light]), [data-theme=dark] { --all: var(--dark-all); --all-h: var(--dark-all-h); --all-s: var(--dark-all-s); --all-l: var(--dark-all-l); --background: var(--dark-background); --background-h: var(--dark-background-h); --background-s: var(--dark-background-s); --background-l: var(--dark-background-l); --text: var(--dark-text); --text-h: var(--dark-text-h); --text-s: var(--dark-text-s); --text-l: var(--dark-text-l); --primary: var(--dark-primary); --primary-h: var(--dark-primary-h); --primary-s: var(--dark-primary-s); --primary-l: var(--dark-primary-l); --secondary: var(--dark-secondary); --secondary-h: var(--dark-secondary-h); --secondary-s: var(--dark-secondary-s); --secondary-l: var(--dark-secondary-l); --neutral: var(--dark-neutral); --neutral-h: var(--dark-neutral-h); --neutral-s: var(--dark-neutral-s); --neutral-l: var(--dark-neutral-l); --positive: var(--dark-positive); --positive-h: var(--dark-positive-h); --positive-s: var(--dark-positive-s); --positive-l: var(--dark-positive-l); --negative: var(--dark-negative); --negative-h: var(--dark-negative-h); --negative-s: var(--dark-negative-s); --negative-l: var(--dark-negative-l); --warning: var(--dark-warning); --warning-h: var(--dark-warning-h); --warning-s: var(--dark-warning-s); --warning-l: var(--dark-warning-l); --light: var(--light_dark); --dark: var(--dark_dark); --body-bg: var(--body-bg_dark); --center-bg: var(--center-bg_dark); --center-center-bg: var(--center-center-bg_dark); --primary: var(--primary_dark); --primary-bg: var(--primary-bg_dark); --primary-color: var(--primary-color_dark); --primary-bg-hover: var(--primary-bg-hover_dark); --primary-color-hover: var(--primary-color-hover_dark); --secondary: var(--secondary_dark); --secondary-bg: var(--secondary-bg_dark); --secondary-bg-on-third: var(--secondary-bg-on-third_dark); --secondary-color: var(--secondary-color_dark); --secondary-bg-hover: var(--secondary-bg-hover_dark); --secondary-bg-light: var(--secondary-bg-dark_dark); --secondary-color-hover: var(--secondary-color-hover_dark); --secondary-color-on-secondary: var(--secondary-color-on-secondary_dark); --secondary-variant-color: var(--secondary-variant-color_dark); --secondary-variant-bg: var(--secondary-variant-bg_dark); --secondary-bg-light-dark: var(--secondary-bg-light-dark_dark); --secondary-icon-color: var(--secondary-icon-color_dark); --secondary-arrow-icon: var(--secondary-arrow-icon_dark); --secondary-bg-on-white: var(--secondary-bg-on-white_dark); --third-bg: var(--third-bg_dark); --third-color: var(--third-color_dark); --third-color-secondary: var(--third-color-secondary_dark); --third-bg-hover: var(--third-bg-hover_dark); --third-color-hover: var(--third-color-hover_dark); --third-color-medium: var(--third-color-medium_dark); --third-color-low: var(--third-color-low_dark); --third-variant-bg: var(--third-variant-bg_dark); --third-variant-color: var(--third-variant-color_dark); --third-variant-bg-hover: var(--third-variant-bg-hover_dark); --third-variant-color-hover: var(--third-variant-color-hover_dark); --third-ongrey-bg: var(--third-ongrey-bg_dark); --third-ongrey-color: var(--third-ongrey-color_dark); --white-bg: var(--white-bg_dark); --white-color: var(--white-color_dark); --white-bg-hover: var(--white-bg-hover_dark); --white-bg-darker: var(--white-bg-darker_dark); --white-bg-dark-special: var(--white-bg-dark-special_dark); --positive-bg: var(--positive-bg_dark); --positive-color: var(--positive-color_dark); --positive-color-secondary: var(--positive-color-secondary_dark); --positive-bg-hover: var(--positive-bg-hover_dark); --positive-color-hover: var(--positive-color-hover_dark); --positive-on-positive-bg: var(--positive-on-positive-bg_dark); --positive-on-positive-color: var(--positive-on-positive-color_dark); --positive-on-positive-bg-hover: var(--positive-on-positive-bg-hover_dark); --positive-on-positive-color-hover: var(--positive-on-positive-color-hover_dark); --positive-color-medium: var(--positive-color-medium_dark); --positive-color-low: var(--positive-color-low_dark); --positive-bg-100: var(--positive-bg-100_dark); --positive-bg-80: var(--positive-bg-80_dark); --positive-bg-60: var(--positive-bg-60_dark); --positive-bg-40: var(--positive-bg-40_dark); --positive-bg-20: var(--positive-bg-20_dark); --negative-bg: var(--negative-bg_dark); --negative-color: var(--negative-color_dark); --negative-color-secondary: var(--negative-color-secondary_dark); --negative-bg-hover: var(--negative-bg-hover_dark); --negative-color-hover: var(--negative-color-hover_dark); --negative-color-medium: var(--negative-color-medium_dark); --negative-color-low: var(--negative-color-low_dark); --negative-color-indicator: var(--negative-color-indicator_dark); --negative-variant-bg: var(--negative-variant-bg_dark); --negative-variant-color: var(--negative-variant-color_dark); --negative-bg-100: var(--negative-bg-100_dark); --negative-bg-80: var(--negative-bg-80_dark); --negative-bg-60: var(--negative-bg-60_dark); --negative-bg-40: var(--negative-bg-40_dark); --negative-bg-20: var(--negative-bg-20_dark); --transparent-3xs: var(--transparent-3xs_dark); --transparent-2xs: var(--transparent-2xs_dark); --transparent-xs: var(--transparent-xs_dark); --transparent-sm: var(--transparent-sm_dark); --transparent-md: var(--transparent-md_dark); --transparent-lg: var(--transparent-lg_dark); --transparent-lg-reverse: var(--transparent-lg-reverse_dark); --transparent-xl: var(--transparent-xl_dark); --transparent-2xl: var(--transparent-2xl_dark); --grey-2xs: var(--grey-2xs_dark); --grey-xs: var(--grey-xs_dark); --grey-sm: var(--grey-sm_dark); --warning-bg: var(--warning-bg_dark); --warning-color: var(--warning-color_dark); --warning-bg-hover: var(--warning-bg-hover_dark); --warning-color-hover: var(--warning-color-hover_dark); --blue-bg: var(--blue-bg_dark); --blue-color: var(--blue-color_dark); --blue-color-secondary: var(--blue-color-secondary_dark); --blue-bg-hover: var(--blue-bg-hover_dark); --blue-color-hover: var(--blue-color-hover_dark); --font-color-primary: var(--font-color-primary_dark); --font-color-secondary: var(--font-color-secondary_dark); --font-color-third: var(--font-color-third_dark); --font-color-link: var(--font-color-link_dark); --icon-color-primary: var(--icon-color-primary_dark); --icon-color-secondary: var(--icon-color-secondary_dark); --icon-color-third: var(--icon-color-third_dark); --icon-color-rating-1: var(--icon-color-rating-1_dark); --icon-color-rating-2: var(--icon-color-rating-2_dark); --icon-color-rating-3: var(--icon-color-rating-3_dark); --icon-color-rating-4: var(--icon-color-rating-4_dark); --picture-bg: var(--picture-bg_dark); --picture-color: var(--picture-color_dark); --gradient-orange-light: var(--gradient-orange-light_dark); --gradient-red-light: var(--gradient-red-light_dark); --gradient-orange-to-red-light: var(--gradient-orange-to-red-light_dark); --gradient-orange: var(--gradient-orange); --gradient-red: var(--gradient-red); --gradient-orange-to-red: var(--gradient-orange-to-red_dark); --gradient-orange-to-red-hover: var(--gradient-orange-to-red-hover_dark); --gradient-positive: var(--gradient-positive_dark); --gradient-positive-light-to-dark: var(--gradient-positive-light-to-dark_dark); --input-bg: var(--input-bg_dark); --input-bg-focus: var(--input-bg-focus_dark); --input-bg-tag: var(--input-bg-tag_dark); --input-color-tag: var(--input-color-tag_dark); --input-color: var(--input-color_dark); --input-color-hover: var(--input-color-hover_dark); --input-border: var(--input-border_dark); --input-border-focus: var(--input-border-focus_dark); --input-primary-bg: var(--input-primary-bg_dark); --input-primary-text: var(--input-primary-text_dark); --input-placeholder: var(--input-placeholder_dark); --input-positive-bg: var(--input-positive-bg_dark); --teamtailor-bg: var(--teamtailor-bg_dark); --teamtailor-color: var(--teamtailor-color_dark); --filter-chip-icon: var(--filter-chip-icon_dark); } } /*Breakpoints*/ /*Z-index*/ /*Z-index generator*/ /*Replace*/ /*Font*/ /*Font fluid*/ /*Icon size*/ /*Border radius*/ /*Space*/ /*Gap*/ /*Padding*/ .l_padding_fluid_16_20 { padding: clamp(1.6rem, 1vw + 1.1rem, 2rem); } .l_padding_fluid_10_15, .l_padding_fluid_2xl_3xl, .c_card_neutral.l_padding_fluid_10_15, .c_card_main.l_padding_fluid_10_15 { padding: clamp(1.2rem, 1vw + 0.7rem, 1.6rem); } .l_padding_fluid_5_8, .l_padding_fluid_sm_lg { padding: clamp(0.4rem, 1vw + -0.1rem, 0.8rem); } /*Box Shadow*/ /*Opacity*/ /*Inputs*/ /*Transitions*/ /*Card*/ /*Shortcut for Border Radius*/ /*Truncate text*/ /*Clamp fallbak*/ /*Generate dark-theme*/ /*Background and Color generator*/ /*Background and Color with Hover generator*/ /*Color generator*/ /*Background generator*/ /*Border color generator*/ /*Border bottom color generator*/ /*Border top color generator*/ /*Border left color generator*/ /*Border right color generator*/ /*Gradients*/ /*Svg - Fill*/ /*Filter generator*/ /*Box shadow generator*/ /*Placeholders*/ /*Keyframes*/ /*Add arrow to a box*/ /* Importing required modules */ /*GRADIENTS*/ .th_gradient_positive_light_to_dark, .c_progress_bar__progress, .app_progress_small:not(.app_progress_stats_supplier):not(.app_progress_stats_client), .app_progress_small.app_progress_small_positive { background: -webkit-linear-gradient(to right, var(--gradient-positive-light-to-dark)); background: -moz-linear-gradient(to right, var(--gradient-positive-light-to-dark)); background: -o-linear-gradient(to right, var(--gradient-positive-light-to-dark)); background: linear-gradient(to right, var(--gradient-positive-light-to-dark)); } .th_gradient_orange_to_red_light, .app_background_lightorange_to_lightred { background: -webkit-linear-gradient(to right, var(--gradient-orange-to-red-light)); background: -moz-linear-gradient(to right, var(--gradient-orange-to-red-light)); background: -o-linear-gradient(to right, var(--gradient-orange-to-red-light)); background: linear-gradient(to right, var(--gradient-orange-to-red-light)); } .th_gradient_orange_to_red, .app_progress_stats:not(.app_progress_stats_supplier):not(.app_progress_stats_client), .app_background_gradient_orangetored, .th_gradient_icon_ai { background: -webkit-linear-gradient(to right, var(--gradient-orange-to-red)); background: -moz-linear-gradient(to right, var(--gradient-orange-to-red)); background: -o-linear-gradient(to right, var(--gradient-orange-to-red)); background: linear-gradient(to right, var(--gradient-orange-to-red)); } .th_gradient_orange_to_red_vertical { background: -webkit-linear-gradient(0deg, var(--gradient-orange-to-red)); background: -moz-linear-gradient(0deg, var(--gradient-orange-to-red)); background: -o-linear-gradient(0deg, var(--gradient-orange-to-red)); background: linear-gradient(0deg, var(--gradient-orange-to-red)); } .th_gradient_icon_ai { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; display: inline-block; vertical-align: middle; } /*BASE*/ .th_black_white { color: var(--light); } .th_black_white_color_inverted { color: var(--dark); } .th_black_white_bg_inverted, .cke_wysiwyg_div, .cke_wysiwyg_frame, .cke_contents { background-color: var(--dark); } .th_black_white_important, .pager span, .pager a:hover, .pager a.current { color: var(--light) !important; } .th_white_black_border { border-color: var(--dark); } /*MAIN*/ .th_body_bg { background-color: var(--body-bg); } .th_center_bg { background-color: var(--center-bg); } .th_center_center_bg { background-color: var(--center-center-bg); } /*FONTS*/ .th_font_color_primary, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .app_font_color_main, .app_icon_color_first, .app_icon_color_first a, body, .app_menu_second ul > li a, .app_feed_item_headline, .app_feed_item_headline a, .app_icon_style a, .app_tabs_first > a, .app_dropdown_style > div:not(.app_dropdown_style_notfirstdiv) a, .app_clear_link, .app_clear_link a, .app_filter_summary > a, .app_button_boldtext, .select2-container--default .select2-selection--single .select2-selection__rendered, .fal.fa-ban, .app_tags_wrapper_lastspanremovelink a.fal, .app_link_withicon:before, .app_link_withicon, .app_clear_input_button, .app_settings_wrapper > div > div > div:last-child, a:not(.fal):not(.fas):not(.fak):not(.app_button):not(.wp-block-button__link):not(.c_button_secondary):not(.c_button_negative):not(.c_button_primary):not(.c_card_matchlinkcolor):not(.l_font_color_secondary):not(.l_color_icon_primary):not(.th_third_ongrey_color):not(.th_color_icon_primary):not([data-font-variant=secondary]):not([data-font-variant=link]), .app_clear_link_withborder_a a, .app_sidebar_right_iconbar .app_dropdown_wrapper_header > .fal:not(a), .app_checkboxes_withonlytext_small > div, .c_checkboxes_filter_button > button, .fileUpload .fileBtn label, .fileUpload .fileName, .c_product_header__actions .fal, .c_product_header__actions .fas:hover, h1, h2, h3, h4, h5, .l_font_color_primary, .l_font_color_primary_next_a a, [data-font-variant=primary] { color: var(--font-color-primary); } .th_font_color_primary_important { color: var(--font-color-primary) !important; } .th_font_color_secondary, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th, .app_settings_wrapper > div > div > div:first-child, .app_table_labelleft_valueright tr > td:last-of-type, .l_font_color_secondary, a.l_font_color_secondary, [data-font-variant=secondary] { color: var(--font-color-secondary); } .th_font_color_secondary_important, .app_font_color_second, .app_style_small, .app_feed_horisontell.app_feed_horisontell_withbackgroundheader > div > div:nth-of-type(4), .app_item_withicon > div:last-of-type, .app_clear_link_second_color a, a.app_clear_link_second_color, .app_filter_summary, .app_item_slashicon, .dynamicResumeItemSubTitle, .app_ratingstar_edit_large .ratingstar.colorGrey { color: var(--font-color-secondary) !important; } .th_border_color_secondary { border-color: var(--font-color-secondary); } .th_font_color_third, .l_font_color_third, .app_font_color_third, .charcount_chars, [data-font-variant=third] { color: var(--font-color-third); } .th_font_link_color { color: var(--font-link-color); } /*ICONS*/ .th_icon_color_primary, .app_details_withicon > div > div:first-child span:not(.app_color_brainville_green), .c_chat_icon_minimize, .c_chat_icon_fullscreen, .c_chat_icon_close, .c_chat_icon_dropdown { color: var(--icon-color-primary); } .th_icon_color_hover_primary, .dynamicResumeItemActions span.fal, .dynamicResumeItemActions span.fa-light, .dynamicResumeActions span.fal, .dynamicResumeActions span.fa-light { color: var(--icon-color-primary); transition: color 0.2s ease-in; } .th_icon_color_hover_primary:hover, .dynamicResumeItemActions span.fal:hover, .dynamicResumeItemActions span.fa-light:hover, .dynamicResumeActions span.fal:hover, .dynamicResumeActions span.fa-light:hover { color: var(--font-color-primary); } .th_icon_color_primary_border { border-color: var(--icon-color-primary); } .th_icon_color_secondary, .app_item_withicon > div:first-of-type, .app_icon_color_second { color: var(--icon-color-secondary); } .th_icon_border_color_secondary, .app_fix_kronrightgadgetlist > div:hover, .app_background_ghost_withstyle:hover { border-color: var(--icon-color-secondary); } .th_icon_color_third, .app_item_withnotextonlyicon a, .app_item_withnotextonlyicon span, .app_dashboard_item_header .fas { color: var(--icon-color-third); } .th_icon_border_color_third, .app_fix_kronrightgadgetlist > div, .app_background_ghost_withstyle { border-color: var(--icon-color-third); } .th_icon_color_rating_1, .th_icon_color_rating_2, .th_icon_color_rating_3, .th_icon_color_rating_4 { --fa-secondary-color: var(--transparent-lg); } .th_icon_color_rating_1 { color: var(--icon-color-rating-1); } .th_icon_color_rating_2 { color: var(--icon-color-rating-2); } .th_icon_color_rating_3 { color: var(--icon-color-rating-3); } .th_icon_color_rating_4 { color: var(--icon-color-rating-4); } /*PRIMARY*/ .th_primary, .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover, .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current.xdsoft_disabled:hover, .mtz-monthpicker td.ui-state-active { color: var(--primary-color); background-color: var(--primary-bg); } .th_primary_hover, .c_buttondropdown_primary .c_buttondropdown__button, a.c_buttondropdown_primary .c_buttondropdown__button, .app_button_positive, .app_button_onlyicon.app_background_color_brainville_green { color: var(--primary-color); background-color: var(--primary-bg); } .th_primary_hover:hover, .c_buttondropdown_primary .c_buttondropdown__button:hover, .app_button_positive:hover, .app_button_onlyicon.app_background_color_brainville_green:hover { color: var(--primary-color-hover); background-color: var(--primary-bg-hover); } .th_primary_inverted { color: var(--primary-bg); background-color: var(--primary-color); } .th_primary_inverted_hover { color: var(--primary-bg); background-color: var(--primary-color); } .th_primary_inverted_hover:hover { color: var(--primary-bg-hover); background-color: var(--primary-color-hover); } .th_primary_bg, .app_slider > div:nth-child(2) > span > span.app_slider_active, .app_progress_stats_supplier, .c_toggle__container input:checked + .c_toggle__item, .c_chip_with_rightlink.c_chip_primary > a:last-of-type:hover, .c_chip_with_rightlink.c_chip_secondary > a:last-of-type:hover, .c_chip_with_rightlink.c_chip_white > a:last-of-type:hover, .c_chip_with_rightlink[data-chip~=primary] > a:last-of-type:hover, .c_chip_with_rightlink[data-chip~=secondary] > a:last-of-type:hover, .c_chip_with_rightlink[data-chip~=white] > a:last-of-type:hover, .app_background_color_brainville_green { background-color: var(--primary-bg); } .th_primary_color, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_today, .c_chip_with_rightlink.c_chip_primary > a:last-of-type:hover > span, .c_chip_with_rightlink.c_chip_secondary > a:last-of-type:hover > span, .c_chip_with_rightlink.c_chip_white > a:last-of-type:hover > span, .c_chip_with_rightlink[data-chip~=primary] > a:last-of-type:hover > span, .c_chip_with_rightlink[data-chip~=secondary] > a:last-of-type:hover > span, .c_chip_with_rightlink[data-chip~=white] > a:last-of-type:hover > span { color: var(--primary-color); } .th_primary_color_inverted, .xdsoft_datetimepicker .xdsoft_today_button, .xdsoft_datetimepicker .xdsoft_label, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today, [id^=select2-professionalProfileId-] > li:first-of-type::after, [id*=select2-professionalProfileId-] > li:first-of-type::after, [id^=select2-copyId-] > li:nth-of-type(2)::after, [id*=select2-copyId-] > li:nth-of-type(2)::after, [id=select2-ResumeId-results] > li:first-of-type::after, .app_color_brainville_green, a.app_color_brainville_green, .app_text_createtextaslink, .app_resume_tagline, .app_form_suggestions:not(.app_form_suggestions_notclickable) > span:not(:first-of-type), .app_link_green, .app_hover_color_green_elements > span:hover a, .app_hover_color_green_elements > a:hover, .app_hover_color_green:hover, .app_link_blue, .app_color_brainville_yellow, .app_ratingstar_edit_large .ratingstar.colorOrange, .ratingstar.fa-star.fas.colorOrange, .app_font_color_second > .app_color_brainville_orange, .app_color_brainville_orange, .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-heart, .app_searchfilter > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-heart, .c_button_as_radiocheck__button_active > .c_button_as_radiocheck__button_radiocheck:before, .c_product_header__actions .fal:not(.fa-heart):hover, [data-font-variant=link], a[data-font-variant=link] { color: var(--primary-bg); } .th_primary_color_inverted_important, .app_color_brainville_green_important, .app_color_brainville_orange_hover:hover, .app_color_brainville_yellow_important, a.app_color_brainville_yellow_important { color: var(--primary-bg) !important; } .th_primary_border_color, .app_checkboxes_large .newCheckboxesActive, .subscriptionPlanBoxSuggested { border-color: var(--primary-bg); } .th_primary_border_bottom_color { border-bottom-color: var(--primary-bg) !important; } /*SECONDARY*/ .th_secondary, .select2-container--default .select2-results__option--highlighted[aria-selected], .app_background_color_orange_withtext, .app_feed_horisontell > .app_feed_background_neutral { color: var(--secondary-color); background-color: var(--secondary-bg); } .th_secondary_important { color: var(--secondary-color) !important; background-color: var(--secondary-bg) !important; } .th_secondary_hover, .app_button_neutral, table tr td a.app_button.app_button_neutral, .app_button_neutral.app_button_positive_onhover:hover, .app_header_buttons .app_button_neutral, .app_background_color_orange_withtext .app_button_neutral:not(.app_button_upgrade), .app_button_negative, .app_button_onlyicon { color: var(--secondary-color); background-color: var(--secondary-bg); } .th_secondary_hover:hover, .app_button_neutral:hover, table tr td a.app_button.app_button_neutral:hover, .app_button_neutral.app_button_positive_onhover:hover, .app_background_color_orange_withtext .app_button_neutral:hover:not(.app_button_upgrade), .app_button_negative:hover, .app_button_onlyicon:hover { color: var(--secondary-color-hover); background-color: var(--secondary-bg-hover); } .th_secondary_inverted { color: var(--secondary-bg); background-color: var(--secondary-color); } .th_secondary_inverted_hover { color: var(--secondary-bg); background-color: var(--secondary-color); } .th_secondary_inverted_hover:hover { color: var(--secondary-bg-hover); background-color: var(--secondary-color-hover); } .th_secondary_color, .app_dashboard_item_iconnumberlinkvertical > div > a > span:first-of-type > span:nth-of-type(2), .app_dashboard_item_iconnumberlinkvertical > div > span:first-of-type > span:nth-of-type(2), .c_checkboxes_filter_button .fad, .c_checkboxes_filter_button > button > span.fad, .c_tabs input[type=radio]:checked + label { color: var(--secondary-color); } .th_secondary_color_inverse { color: var(--secondary-bg); } .th_secondary_color_inverse_lightmode_default_darkmode_dark { color: var(--secondary-arrow-icon); } .th_secondary_bg, .app_checkboxes_large > button:hover, .app_checkboxes > button:not(.app_background_color_orange_withtext):hover, .app_checkboxes > div:hover, .app_checkboxes_large > a:hover, .app_checkboxes_hoverstate, .app_checkboxes_large .newCheckboxesActive, .subscriptionPlanBoxSuggested, .app_searchfilter > div:not(.app_searchfilter_withdiv):hover:not(.app_font_color_second):not(.app_box_message):not(.app_searchfilter_addlink), .app_searchfilter > .app_searchfilter_activelink, .app_searchfilter_withdiv > .app_searchfilter_activelink, .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message):not(.app_searchfilter_addlink), .app_searchfilter > div > a:hover:not(.app_font_color_second):not(.app_box_message), .app_checkboxes_withonlytext > div > div.app_checkboxes_withonlytext_active, ul.ui-autocomplete.ui-front.ui-menu.ui-widget > li:hover, .c_tabs__selected, .c_button_as_radiocheck__button_active, .app_button_onlyicon_active, .app_background_color_brainville_yellow, .app_background_color_brainville_yellow_light, .tabWithNumber > div > span.app_background_color_brainville_yellow_light:last-of-type:not(:only-of-type) { background-color: var(--secondary-bg); } .th_secondary_bg_on_third, .app_box_plain_orange .app_button_neutral:not(:hover) { background-color: var(--secondary-bg-on-third); } .th_secondary_bg_inverted { background-color: var(--secondary-color); } .th_secondary_bg_light { background-color: var(--secondary-bg-light); } .th_secondary_bg_fill, #map_sweden .st0, #map_denmark .st0, #map_norway .st0, #map_finland .st0 { fill: var(--secondary-bg); } .th_secondary_border_color, .app_background_color_orange_withtext, .app_feed_horisontell > .app_feed_background_neutral { border-color: var(--secondary-bg); } .th_secondary_border_bottom_color { border-bottom-color: var(--secondary-bg) !important; } .th_secondary_variant, .app_tags_tag_Approved, .app_tags_tag_Negotiating, .app_tags_tag_RequestAdditions { color: var(--secondary-variant-color); background-color: var(--secondary-variant-bg); } .th_secondary_variant_color, .app_radiobutton_toggle input:checked + label, .l_socialshare_item_wrapper:hover .l_socialshare_item_icon { color: var(--secondary-variant-color); } .th_secondary_variant_bg, .app_radiobutton_toggle input:first-of-type:checked ~ div, .app_radiobutton_toggle input:not(:first-of-type):not(:last-of-type):checked ~ div, .app_radiobutton_toggle input:last-of-type:checked ~ div { background-color: var(--secondary-variant-bg); } .th_secondary_variant_bg_inverted { background-color: var(--secondary-variant-color); } .th_secondary_icon_color { color: var(--secondary-icon-color); } /*THIRD*/ .th_third, .app_feed_horisontell_icons > a:nth-of-type(4n) > div:first-of-type, .app_background_random_wrapper > div:nth-of-type(4n) .app_background_random, .app_dashboard_item_icontextnumberlink span.fas, .app_dashboard_item_icontextnumberlink span.fad, .app_dashboard_item_iconnumberlinkvertical span.fas, .app_icon_orangebackground_withstyle, .app_icon_orangebackground_withstyle_span > span, .app_table_gridlayout tr > th, .app_table_gridlayout tr > th a, .app_table_gridlayout tfoot tr:nth-of-type(odd) > td, .app_table_gridlayout tfoot tr:nth-of-type(even) > td, .app_box_plain_orange, .app_box_Approved, .app_box_Negotiating, .app_box_RequestAdditions, .informationBox.app_box_plain_orange, .app_box_message_orange, .tutorialBox_orange, .app_avatar.app_avatar_skill { color: var(--third-color); background-color: var(--third-bg); } .th_third_ongrey { color: var(--third-ongrey-color); background-color: var(--third-ongrey-bg); } .th_third_hover, .app_box_plain_orange.app_box_plain_orange_withhover { color: var(--third-color); background-color: var(--third-bg); } .th_third_hover:hover, .app_box_plain_orange.app_box_plain_orange_withhover:hover { color: var(--third-color-hover); background-color: var(--third-bg-hover); } .th_third_inverted { color: var(--third-ongrey-bg); background-color: var(--third-ongrey-color); } .th_third_inverted_hover { color: var(--third-bg); background-color: var(--third-color); } .th_third_inverted_hover:hover { color: var(--third-bg-hover); background-color: var(--third-color-hover); } .th_third_variant, .flip-container-front, .app_tags_tag.app_tags_tag_neutral, .app_background_orange_variant_withstyle, .app_avatar.app_avatar_role { color: var(--third-variant-color); background-color: var(--third-variant-bg); } .th_third_variant_hover { color: var(--third-variant-color); background-color: var(--third-variant-bg); } .th_third_variant_hover:hover { color: var(--third-variant-color-hover); background-color: var(--third-variant-bg-hover); } .th_third_variant_color, .app_avatar.app_avatar_role > span { color: var(--third-variant-color); } .th_third_color, .app_icon_color_third, .app_feed_subitemwithicon > span.app_icon_color_third, .app_text_color_orange, .app_dashboard_item_content a.app_text_color_orange, .app_background_color_orange_withtext a:not(.app_button):not(.app_button_upgrade), .itemTableTwoRows tr:nth-of-type(3n+3) > td, .app_tags_tag.app_tags_tag_neutral_hollow, .app_tags_tag.app_tags_tag_orange_ghost, .app_box_plain_orange h3, a.app_text_color_orange, .app_background_color_orange_withtext .app_font_color_second, .app_background_color_orange_withtext a.app_dashboard_item_header > span, .th_indicator_icon_color_requestadditions, .th_indicator_icon_color_negotiating { color: var(--third-color); } .th_third_color_inverted { color: var(--third-bg); } .th_third_color_hover { color: var(--third-color-hover); } .th_third_ongrey_color, a.th_third_ongrey_color { color: var(--third-ongrey-color); } .th_third_bg, .app_outside_mainnavigation > ul > li > ul > li:hover > a, .app_table_gridlayout tr:hover, .app_background_color_brainville_blue, .app_startpages_background_image, .app_orange_background, .app_background_orange_withstyle { background-color: var(--third-bg); } .th_third_bg_inverted { background-color: var(--third-color); } .th_third_bg_hover, .c_chip_with_rightlink.c_chip_primary > a:first-of-type:hover, .c_chip_with_rightlink[data-chip~=primary] > a:first-of-type:hover, .app_box_plain_orange .app_table_gridlayout tr > th, .app_box_plain_orange .app_progress_small > span { background-color: var(--third-bg-hover); } .th_third_bg_low, .app_progress_small > span, .app_progress_stats > span, .app_progress_stats.app_progress_stats_higher > span { background-color: var(--third-color-low); } .th_third_border_color, .app_tags_tag.app_tags_tag_neutral_hollow, .app_tags_tag.app_tags_tag_orange_ghost, #PublicProfileCompetenceAreas .app_tags_tag_neutral_hollow:hover, .app_box_message_orange, .tutorialBox_orange { border-color: var(--third-bg); } .th_third_border_bottom_color, .app_box_message_orange:after, .app_box_message_orange:before, .tutorialBox_orange:after, .tutorialBox_orange:before { border-bottom-color: var(--third-bg) !important; } .th_third_color_medium, .app_icon_color_orange, .app_style_small .fas, .dynamicResumeItemDate .fas { color: var(--third-color-medium); } .th_third_color_low { color: var(--third-color-low); } .th_third_color_stroke { stroke: var(--third-color-low); } /*TRANSPARENT*/ .th_transparent, .app_feed_horisontell_icons > a:nth-of-type(4n+2) > div:first-of-type, .app_background_random_wrapper > div:nth-of-type(4n+2) .app_background_random, .c_chat_header, .chatFooter, .l_socialshare__container, .app_box_plain_grey, .app_box_plain_grey_onwhite, .app_box_Pending, .app_box_message_grey, .tutorialBox_grey, .app_box_message_greyonwhite, .tutorialBox_greyonwhite, .app_background_color_grey_withtext, .app_background_color_lightgrey_withtext { color: var(--transparent-xl); background-color: var(--transparent-2xs); } .th_transparent_variant, .app_tags_tag.app_tags_tag_grey, .app_tags_wrapper_details .app_tags_tag, .app_tags_tag.app_tags_tag_ligthgrey, .app_tags_tag_Pending, .app_background_grey_variant_withstyle, .app_background_lightgrey_variant_withstyle { color: var(--transparent-xl); background-color: var(--transparent-xs); } .th_transparent_hover { color: var(--transparent-xl); background-color: var(--transparent-2xs); } .th_transparent_hover:hover { color: var(--transparent-2xl); background-color: var(--transparent-sm); } .th_transparent_2xs_bg, .app_dropdown_style > div:not(.app_dropdown_style_notfirstdiv):hover, .app_dropdown_style > li:not(.divider):not(.emptyrow):hover, .app_checkboxes > div:not(.app_background_color_orange_withtext):not(.newCheckboxesActive), .app_checkboxes_large > button:not(.app_background_color_orange_withtext):not(.newCheckboxesActive), .app_checkboxes_large > a:not(.app_background_color_orange_withtext):not(.newCheckboxesActive), .app_checkboxes > button:not(.app_background_color_orange_withtext):not(.newCheckboxesActive), .app_grid_internal, .vatinfo_searchresult:hover, .dynamicResumeTutorial > div, .informationBox, .tabWithNumber > div > span:last-of-type:not(:only-of-type):not(.th_positive), .chatNotification, .app_table_gridlayout tr:nth-of-type(odd), .c_tabs__container_onwhite, .c_tabs__item:hover, .c_tabs label.c_tabs__item:hover, .c_chip_with_rightlink.c_chip_primary > a:last-of-type, .c_chip_with_rightlink.c_chip_secondary > a:last-of-type, .c_chip_with_rightlink.c_chip_white > a:last-of-type, .c_chip_with_rightlink[data-chip~=primary] > a:last-of-type, .c_chip_with_rightlink[data-chip~=secondary] > a:last-of-type, .c_chip_with_rightlink[data-chip~=white] > a:last-of-type, .c_button_as_radiocheck__button:not(.c_button_as_radiocheck__button_active), .app_grey_background, .app_background_grey_withstyle, .app_lightgrey_background, .app_background_lightgrey_withstyle, .app_background_lightgrey, div.profilePictureWrapper > span.profilePictureFallback:not(.backgroundTransparent).app_background_lightgrey, .app_background_main, .MainContent, .app_background_main_nextdivs_onodds > div:nth-of-type(odd) { background-color: var(--transparent-2xs); } .th_transparent_2xs_color, .app_color_grey, .app_item_withicon_horizontel > div:first-child, .th_indicator_icon_color_withdrawn { color: var(--transparent-2xs); } .th_transparent_2xs_border, .app_box_message_grey, .tutorialBox_grey, .app_box_message_greyonwhite, .tutorialBox_greyonwhite, .app_dashboard_indicator_red { border-color: var(--transparent-2xs); } .th_transparent_2xs_border_bottom, .app_box_message_grey:after, .app_box_message_grey:before, .tutorialBox_grey:after, .tutorialBox_grey:before, .app_box_message_greyonwhite:after, .app_box_message_greyonwhite:before, .tutorialBox_greyonwhite:after, .tutorialBox_greyonwhite:before { border-bottom-color: var(--transparent-2xs) !important; } .th_transparent_2xs_stroke, .highcharts-container .highcharts-grid > path { stroke: var(--transparent-2xs); } .th_transparent_xs_bg, .app_slider > div:nth-child(2) > span, .fileUpload .fileBtn, .c_chip_with_rightlink.c_chip_secondary > a:first-of-type:hover, .c_chip_with_rightlink.c_chip_white > a:first-of-type:hover, .c_chip_with_rightlink[data-chip~=secondary] > a:first-of-type:hover, .c_chip_with_rightlink[data-chip~=white] > a:first-of-type:hover, .app_tags_wrapper a:hover > .app_tags_tag_grey { background-color: var(--transparent-xs); } .th_transparent_xs_color { color: var(--transparent-xs); } .th_transparent_xs_border, .app_box_add, .app_tags_tag.app_tags_tag_grey_hollow_small { border: 0.1rem solid var(--transparent-xs); } .th_transparent_xs_border_top, .app_border_top_grey { border-top: 0.1rem solid var(--transparent-xs); } .th_transparent_xs_border_bottom, .app_settings_wrapper > div > div, .ganttChart tr th, .ganttChart tr td { border-bottom: 0.1rem solid var(--transparent-xs); } .th_transparent_xs_border_right, .ganttMonth, .cellWidth { border-right: 0.1rem solid var(--transparent-xs); } .th_transparent_sm_bg { background-color: var(--transparent-sm); } .th_transparent_sm_color { color: var(--transparent-sm); } .th_transparent_sm_border { border-color: var(--transparent-sm); } .th_transparent_sm_border_top { border-top-color: var(--transparent-sm); } .th_transparent_sm_border_right, .ganttChart tr th:first-child, .resources td:first-child { border-right-color: var(--transparent-sm); } .th_transparent_md_bg, .c_toggle__container .c_toggle__item { background-color: var(--transparent-md); } .th_transparent_md_color, .dynamicResumeItemAsCircle .dynamicResumeItemIcon > span, .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_neutral > span:first-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle), .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_neutral > span:last-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle) { color: var(--transparent-md); } .th_transparent_md_border, .app_checkboxes_large:not(.app_checkboxes_noheight) > button, .app_checkboxes_large:not(.app_checkboxes_noheight) > a { border-color: var(--transparent-md); } .th_transparent_lg_bg { background-color: var(--transparent-lg); } .th_transparent_lg_bg_swap { background-color: var(--transparent-lg_dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_transparent_lg_bg_swap { background-color: var(--transparent-lg_light); } } :root[data-theme=dark] .th_transparent_lg_bg_swap { background-color: var(--transparent-lg_light); } .th_transparent_lg_color, .svg-funnel-js__labels .svg-funnel-js__label .label__title, .th_indicator_icon_color_pending { color: var(--transparent-lg); } .th_transparent_xl_bg { background-color: var(--transparent-xl); } .th_transparent_xl_bg_swap_onlyhover:hover { transition: background 0.2s ease-in; background-color: var(--transparent-xl_dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_transparent_xl_bg_swap_onlyhover:hover { background-color: var(--transparent-xl_light); } } :root[data-theme=dark] .th_transparent_xl_bg_swap_onlyhover:hover { background-color: var(--transparent-xl_light); } .th_transparent_xl_color, .app_icon_color_grey, .app_font_color_grey, .supplierList > div:nth-child(2), .tabWithNumber > div > span:last-of-type:not(:only-of-type):not(.th_positive), .ganttItem, .app_font_headlinestyle_text { color: var(--transparent-xl); } .th_transparent_xl_border, .app_tags_tag.app_tags_tag_dashed { border-color: var(--transparent-xl); } .th_transparent_2xl_bg { background-color: var(--transparent-2xl); } .th_transparent_2xl_color, .select2-container--default .select2-selection--single .select2-selection__clear:hover, .c_chip_with_rightlink.c_chip_secondary > a:first-of-type:hover > span, .c_chip_with_rightlink.c_chip_white > a:first-of-type:hover > span, .c_chip_with_rightlink[data-chip~=secondary] > a:first-of-type:hover > span, .c_chip_with_rightlink[data-chip~=white] > a:first-of-type:hover > span, .app_font_headlinestyle_withtwospans, .app_font_headlinestyle_withtwospans > span:first-of-type, .app_font_headlinestyle_withtwospans > label { color: var(--transparent-2xl); } .th_transparent_lg_light_xl_dark_color, .select2-container--default .select2-selection--single .select2-selection__clear, .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_grey > span:first-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle), .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_grey > span:last-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle) { color: var(--transparent-lg); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_transparent_lg_light_xl_dark_color, :root:not([data-theme=light]):not([data-theme=dark]) .select2-container--default .select2-selection--single .select2-selection__clear, :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_grey > span:first-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle), :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_grey > span:last-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle) { color: var(--transparent-xl); } } :root[data-theme=dark] .th_transparent_lg_light_xl_dark_color, :root[data-theme=dark] .select2-container--default .select2-selection--single .select2-selection__clear, :root[data-theme=dark] .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_grey > span:first-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle), :root[data-theme=dark] .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_grey > span:last-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle) { color: var(--transparent-xl); } /*WHITE*/ .th_white, .svg-funnel-js__labels .svg-funnel-js__label .label__value, .xdsoft_datetimepicker, .xdsoft_datetimepicker .xdsoft_calendar th, .app_position_searchprofilepen, .app_position_sticky, .app_box_small, .app_dropdown_style, .app_checkboxes_large:not(.app_checkboxes_noheight) > button:not(.newCheckboxesActive), .app_checkboxes_large:not(.app_checkboxes_noheight) > a:not(.newCheckboxesActive), .app_checkboxes_large.app_checkboxes_white > button:not(.app_background_color_orange_withtext):not(.newCheckboxesActive), .app_checkboxes_whitebackground > button:not(.app_background_color_orange_withtext):not(.newCheckboxesActive), .app_feed_wrapper:not(.app_box_plain), .app_feed_small_wrapper, .app_feed_horisontell > div:not(.app_clients_logotypeswithborder), .app_icon_asbuttons > span:not(:empty), .app_box_white, .app_dashboard > div, .app_checkboxes_withonlytext > div, .app_sortdropdown > div, .dynamicResumeItemAsCircle .flip-container-flipper .flip-container-back, .app_outside_mainnavigation, .app_outside_mainnavigation > ul > li > ul, .knowledgeBox, .slideDownAdder, .modalButtons, .remodal, .chatBox, #Chat, .c_chat_container, .tooltipster-sidetip .tooltipster-box, .sp_echart_tooltip__content, .app_table_gridlayout, ul.ui-autocomplete.ui-front.ui-menu.ui-widget, .monthpicker-display, .mtz-monthpicker.ui-datepicker-header, .ui-widget-content, .c_card_secondary .select2-container--default .select2-selection--single, .select2-dropdown, .c_tabs, .c_tabs input[type=radio]:checked + label > .notification, .c_tabs__container_onwhite .c_tabs__selected, .c_buttondropdown__items_container, .slideDownAdder .app_button_neutral, .knowledgeBox .app_button_neutral, .app_sidebar_right #PersonalIdentityContainer, .app_box_message_white, .app_feed_rightcolumn, .app_background_color_white_withtext, .app_background_white, .app_button_background_white, .app_main_background, .app_background_white_withstyle, .app_background_white_withstyle_andshadow, .app_background_white_withstyle_onlysmallshadow, .app_background_borderwithshadow { color: var(--white-color); background-color: var(--white-bg); } .th_white_hover { color: var(--white-color); background-color: var(--white-bg); } .th_white_hover:hover { color: var(--white-color-hover); background-color: var(--white-bg-hover); } .th_white_inverted { color: var(--white-bg); background-color: var(--white-color); } .th_white_inverted_hover { color: var(--white-bg); background-color: var(--white-color); } .th_white_inverted_hover:hover { color: var(--white-bg-hover); background-color: var(--white-color-hover); } .th_white_color, .app_color_white, .app_background_gradient_redtoorange.app_feed_wrapper div, .app_table_stats tr:hover td, .c_tabs__item, .c_tabs label.c_tabs__item, .c_tabs__container_onwhite .c_tabs input[type=radio]:checked + label, .c_button_as_radiocheck__button_icon, .c_button_as_radiocheck__button .c_avatar, .c_button_as_radiocheck__button_text, .c_button_as_radiocheck__button_radiocheck, .app_button_clear { color: var(--white-color); } .th_white_color_hover { color: var(--white-color-hover); } .th_white_color_inverted { color: var(--white-bg); } .th_white_bg, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_label, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .c_tabs__container:not(.c_tabs__container_onwhite), .app_tags_tag.app_tags_tag_neutral_hollow, .app_tags_tag.app_tags_tag_orange_ghost, .app_tags_tag.app_tags_tag_grey_hollow_small { background-color: var(--white-bg); } .th_white_bg_inverted, .app_slider > div:nth-child(2) > span > span, .app_outside_mainnavigation_hamburger .app_outside_mainnavigation_line { background-color: var(--white-color); } .th_white_bg_hover { background-color: var(--white-bg-hover); } .th_white_bg_darker, .th_white_bg_darker_next_target > div { background-color: var(--white-bg-darker); } .th_white_border_color, .knowledgeBox, .tooltipster-sidetip .tooltipster-box, .sp_echart_tooltip__content, .select2-dropdown, .app_box_message_white, .app_background_borderwithshadow { border-color: var(--white-bg); } .th_white_border_bottom_color, .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background, .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border, .app_box_message_white:after, .app_box_message_white:before { border-bottom-color: var(--white-bg) !important; } .th_white_border_left_color, .knowledgeBox.knowledgeBoxRight:after, .knowledgeBox.knowledgeBoxRight:before, .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background, .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border { border-left-color: var(--white-bg) !important; } .th_white_border_right_color, .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background, .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border { border-right-color: var(--white-bg) !important; } .th_white_border_top_color, .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background, .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { border-top-color: var(--white-bg) !important; } .th_white_bg_fill, .highcharts-container > svg > rect { fill: var(--white-bg); } .th_white_bg_stroke, #map_sweden .st0, #map_denmark .st0, #map_norway .st0, #map_finland .st0 { stroke: var(--white-bg); } .th_white_color_fill, .highcharts-container > svg > g text > tspan { fill: var(--font-color-secondary); } .th_white_color_stroke { stroke: var(--white-color); } /*POSITIVE*/ .th_positive, .app_feed_horisontell_icons > a:nth-of-type(4n+1) > div:first-of-type, .app_background_random_wrapper > div:nth-of-type(4n+1) .app_background_random, .app_box_plain_green, .app_box_Accepted, .app_box_message_green, .app_background_color_green_withtext, .app_background_color_green_light_withtext { color: var(--positive-color); background-color: var(--positive-bg); } .th_positive_hover { color: var(--positive-color); background-color: var(--positive-bg); } .th_positive_hover:hover { color: var(--positive-color-hover); background-color: var(--positive-bg-hover); } .th_positive_inverted { color: var(--positive-bg); background-color: var(--positive-color); } .th_positive_inverted_hover { color: var(--positive-bg); background-color: var(--positive-color); } .th_positive_inverted_hover:hover { color: var(--positive-bg-hover); background-color: var(--positive-color-hover); } .th_positive_variant, .app_tags_tag_positive, .app_tags_tag.app_tags_tag_positive, .app_tags_tag_Accepted, .app_tags_tag_category, .app_background_green_variant_withstyle { background-color: var(--positive-bg_light); color: var(--positive-color_light); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_positive_variant, :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag_positive, :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag_Accepted, :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag_category, :root:not([data-theme=light]):not([data-theme=dark]) .app_background_green_variant_withstyle { background-color: var(--positive-variant-bg_dark); color: var(--positive-variant-color_dark); } } :root[data-theme=dark] .th_positive_variant, :root[data-theme=dark] .app_tags_tag_positive, :root[data-theme=dark] .app_tags_tag_Accepted, :root[data-theme=dark] .app_tags_tag_category, :root[data-theme=dark] .app_background_green_variant_withstyle { background-color: var(--positive-variant-bg_dark); color: var(--positive-variant-color_dark); } .th_positive_variant_bg, .app_avatar.app_avatar_category { background-color: var(--positive-bg_light); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_positive_variant_bg, :root:not([data-theme=light]):not([data-theme=dark]) .app_avatar.app_avatar_category { background-color: var(--positive-variant-bg_dark); } } :root[data-theme=dark] .th_positive_variant_bg, :root[data-theme=dark] .app_avatar.app_avatar_category { background-color: var(--positive-variant-bg_dark); } .th_positive_variant_color, .app_avatar.app_avatar_category > span { color: var(--positive-color); } .th_positive_bg, .app_background_green_withstyle { background-color: var(--positive-bg); } .th_positive_bg_important { background-color: var(--positive-bg) !important; } .th_positive_bg_hover, .app_tags_wrapper a:hover > .app_tags_tag_positive { background-color: var(--positive-bg-hover); } .th_positive_bg_inverted { background-color: var(--positive-color); } .th_positive_color, .js_professionalprofile_addstartodefaultprofile span[id*=select2-professionalProfileId-]::after, .app_text_color_green, .app_dashboard_item_content a.app_text_color_green, .app_background_color_green_withtext a:not(.app_button):not(.fal):not(.app_button_upgrade), .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-plus-circle, .app_searchfilter > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-plus-circle, .app_background_color_green_withtext .app_font_color_second, .app_background_color_green_withtext a.app_dashboard_item_header > span, .th_indicator_icon_color_accepted, a.th_positive_color { color: var(--positive-color); } .th_positive_color_important, a.th_positive_color_important { color: var(--positive-color) !important; } .th_positive_color_inverse { color: var(--positive-bg); } .th_positive_color_inverse_lightmode_default_darkmode_dark { color: var(--positive-bg_light); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_positive_color_inverse_lightmode_default_darkmode_dark { color: var(--positive-bg-dark_dark); } } :root[data-theme=dark] .th_positive_color_inverse_lightmode_default_darkmode_dark { color: var(--positive-bg-dark_dark); } .th_positive_color_medium, .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_positive > span:first-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle), .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_positive > span:last-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle) { color: var(--positive-color_medium); } .th_positive_color_low { color: var(--positive-color_low); } .th_positive_border_color, .app_box_message_green { border-color: var(--positive-bg_light); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_positive_border_color, :root:not([data-theme=light]):not([data-theme=dark]) .app_box_message_green { border-color: var(--positive-color_dark); } } :root[data-theme=dark] .th_positive_border_color, :root[data-theme=dark] .app_box_message_green { border-color: var(--positive-color_dark); } .th_positive_border_bottom_color, .app_box_message_green:after, .app_box_message_green:before { border-bottom-color: var(--positive-bg_light) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_positive_border_bottom_color, :root:not([data-theme=light]):not([data-theme=dark]) .app_box_message_green:after, :root:not([data-theme=light]):not([data-theme=dark]) .app_box_message_green:before { border-bottom-color: var(--positive-color_dark) !important; } } :root[data-theme=dark] .th_positive_border_bottom_color, :root[data-theme=dark] .app_box_message_green:after, :root[data-theme=dark] .app_box_message_green:before { border-bottom-color: var(--positive-color_dark) !important; } .th_positive_bg_100, .green100 { background-color: var(--positive-bg-100); } .th_positive_border_color_100 { border-color: var(--positive-bg-100); } .th_positive_bg_80, .green80 { background-color: var(--positive-bg-80); } .th_positive_bg_60, .green60 { background-color: var(--positive-bg-60); } .th_positive_border_color_60 { border-color: var(--positive-bg-60); } .th_positive_bg_40, .green40 { background-color: var(--positive-bg-40); } .th_positive_bg_20, .green20 { background-color: var(--positive-bg-20); } /*WARNING*/ .th_warning { color: var(--warning-color); background-color: var(--warning-bg); } .th_warning_hover { color: var(--warning-color); background-color: var(--warning-bg); } .th_warning_hover:hover { color: var(--warning-color-hover); background-color: var(--warning-bg-hover); } .th_warning_inverted { color: var(--warning-bg); background-color: var(--warning-color); } .th_warning_inverted_hover { color: var(--warning-bg); background-color: var(--warning-color); } .th_warning_inverted_hover:hover { color: var(--warning-bg-hover); background-color: var(--warning-color-hover); } .th_warning_color { color: var(--warning-color); } .th_warning_bg { background: var(--warning-bg); } .th_warning_bg_next_td td { background: var(--warning-bg) !important; } /*NEGATIVE*/ .th_negative, .app_feed_horisontell_icons > a:nth-of-type(4n+3) > div:first-of-type, .app_background_random_wrapper > div:nth-of-type(4n+3) .app_background_random, .app_box_plain_red, .field-validation-error, .app_box_Rejected, .app_box_Withdrawn, .app_box_message_red, .app_background_color_red_withtext, .app_background_color_red_light_withtext { color: var(--negative-color); background-color: var(--negative-bg); } .th_negative_hover { color: var(--negative-color); background-color: var(--negative-bg); } .th_negative_hover:hover { color: var(--negative-color-hover); background-color: var(--negative-bg-hover); } .th_negative_inverted { color: var(--negative-bg); background-color: var(--negative-color); } .th_negative_inverted_hover { color: var(--negative-bg); background-color: var(--negative-color); } .th_negative_inverted_hover:hover { color: var(--negative-bg-hover); background-color: var(--negative-color-hover); } .th_negative_bg, .app_background_red_withstyle, .app_background_color_red { background-color: var(--negative-bg); } .th_negative_bg_next_td td { background-color: var(--negative-bg) !important; } .th_negative_bg_hover, .app_tags_wrapper a:hover > .app_tags_tag_negative { background-color: var(--negative-bg-hover); } .th_negative_bg_inverted, .app_dashboard_indicator_red, .app_background_color_brainville_red { background-color: var(--negative-color); } .th_negative_bg_inverted_important, .app_progress_stats_client, .app_progress_stats .app_progress_stats.app_progress_stats_client { background-color: var(--negative-color) !important; } .th_negative_color, .app_color_brainville_red, .colorRed, .dynamicResumeItemActions span.editableBlock_deleteButton:hover, .app_hover_color_red:hover, .dynamicResumeActions .fa-ban:hover, .app_font_color_second > .app_color_brainville_red, .app_text_color_red, .app_dashboard_item_content a.app_text_color_red, .app_background_color_red_withtext a:not(.app_button):not(.app_button_upgrade), .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-eye-slash, .app_searchfilter > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-eye-slash, .app_background_color_red_withtext .app_font_color_second, .app_background_color_red_withtext a.app_dashboard_item_header > span, .th_indicator_icon_color_rejected { color: var(--negative-color); } .th_negative_color_inverse { color: var(--negative-bg); } .th_negative_color_inverse_lightmode_default_darkmode_dark { color: var(--negative-bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_negative_color_inverse_lightmode_default_darkmode_dark { color: var(--negative-bg-dark_dark); } } :root[data-theme=dark] .th_negative_color_inverse_lightmode_default_darkmode_dark { color: var(--negative-bg-dark_dark); } .th_negative_color_medium, .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_negative > span:first-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle), .app_tags_tag:not(.app_tags_tag_texticon).app_tags_tag_negative > span:last-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle) { color: var(--negative-color-medium); } .th_negative_color_low { color: var(--negative-color-low); } .th_negative_border_color, .app_box_message_red { border-color: var(--negative-bg); } .th_negative_border_bottom_color, .app_box_message_red:after, .app_box_message_red:before { border-bottom-color: var(--negative-bg) !important; } .th_negative_variant, .app_tags_tag.app_tags_tag_negative, .app_tags_tag_Rejected, .app_tags_tag_Withdrawn, .app_background_red_variant_withstyle, .app_avatar.app_avatar_region { background-color: var(--negative-bg_light); color: var(--negative-color_light); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_negative_variant, :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag.app_tags_tag_negative, :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag_Rejected, :root:not([data-theme=light]):not([data-theme=dark]) .app_tags_tag_Withdrawn, :root:not([data-theme=light]):not([data-theme=dark]) .app_background_red_variant_withstyle, :root:not([data-theme=light]):not([data-theme=dark]) .app_avatar.app_avatar_region { background-color: var(--negative-variant-bg_dark); color: var(--negative-variant-color_dark); } } :root[data-theme=dark] .th_negative_variant, :root[data-theme=dark] .app_tags_tag.app_tags_tag_negative, :root[data-theme=dark] .app_tags_tag_Rejected, :root[data-theme=dark] .app_tags_tag_Withdrawn, :root[data-theme=dark] .app_background_red_variant_withstyle, :root[data-theme=dark] .app_avatar.app_avatar_region { background-color: var(--negative-variant-bg_dark); color: var(--negative-variant-color_dark); } .th_negative_variant_color { color: var(--negative-color_light); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_negative_variant_color { color: var(--negative-variant-color_dark); } } :root[data-theme=dark] .th_negative_variant_color { color: var(--negative-variant-color_dark); } .th_negative_bg_100, .yellow100 { background-color: var(--negative-bg-100); } .th_negative_bg_80, .yellow80 { background-color: var(--negative-bg-80); } .th_negative_bg_60, .yellow60 { background-color: var(--negative-bg-60); } .th_negative_bg_40, .yellow40 { background-color: var(--negative-bg-40); } .th_negative_bg_20, .yellow20 { background-color: var(--negative-bg-20); } .th_negative_indicator_color { color: var(--negative-color-indicator); } /*BLUE*/ .th_blue, .app_tags_tag.app_tags_tag_blue, .app_tags_tag_competence { color: var(--blue-color); background-color: var(--blue-bg); } .th_blue_hover { color: var(--blue-color); background-color: var(--blue-bg); } .th_blue_hover:hover { color: var(--blue-color-hover); background-color: var(--blue-bg-hover); } .th_blue_bg, .app_avatar.app_avatar_competence { background-color: var(--blue-bg); } .th_blue_color, .app_avatar.app_avatar_competence > span, .th_indicator_icon_color_approved { color: var(--blue-color); } .th_blue_color_inverted { color: var(--blue-bg); } .th_blue_filter, .app_avatar.app_avatar_competence > span { filter: var(--blue-filter); } /*SHADOW ???*/ .th_box_shadow_small, .select2-dropdown { box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_box_shadow_small, :root:not([data-theme=light]):not([data-theme=dark]) .select2-dropdown { box-shadow: 0px 0.3px 0.4px rgba(0, 0, 0, 0.225), 0px 0.7px 1px rgba(0, 0, 0, 0.323), 0px 1.3px 1.9px rgba(0, 0, 0, 0.4), 0px 2.2px 3.4px rgba(0, 0, 0, 0.477), 0px 4.2px 6.3px rgba(0, 0, 0, 0.575), 0px 10px 15px rgba(0, 0, 0, 0.8); } } :root[data-theme=dark] .th_box_shadow_small, :root[data-theme=dark] .select2-dropdown { box-shadow: 0px 0.3px 0.4px rgba(0, 0, 0, 0.225), 0px 0.7px 1px rgba(0, 0, 0, 0.323), 0px 1.3px 1.9px rgba(0, 0, 0, 0.4), 0px 2.2px 3.4px rgba(0, 0, 0, 0.477), 0px 4.2px 6.3px rgba(0, 0, 0, 0.575), 0px 10px 15px rgba(0, 0, 0, 0.8); } .th_box_shadow_popup, .knowledgeBox, .slideDownAdder { box-shadow: 0px 0.4px 2.2px rgba(0, 0, 0, 0.042), 0px 1px 5.3px rgba(0, 0, 0, 0.061), 0px 1.9px 9.9px rgba(0, 0, 0, 0.075), 0px 3.4px 17.6px rgba(0, 0, 0, 0.089), 0px 6.3px 33px rgba(0, 0, 0, 0.108), 0px 15px 79px rgba(0, 0, 0, 0.15); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_box_shadow_popup, :root:not([data-theme=light]):not([data-theme=dark]) .knowledgeBox, :root:not([data-theme=light]):not([data-theme=dark]) .slideDownAdder { box-shadow: 0px 0.3px 0.4px rgba(0, 0, 0, 0.225), 0px 0.7px 1px rgba(0, 0, 0, 0.323), 0px 1.3px 1.9px rgba(0, 0, 0, 0.4), 0px 2.2px 3.4px rgba(0, 0, 0, 0.477), 0px 4.2px 6.3px rgba(0, 0, 0, 0.575), 0px 10px 15px rgba(0, 0, 0, 0.8); } } :root[data-theme=dark] .th_box_shadow_popup, :root[data-theme=dark] .knowledgeBox, :root[data-theme=dark] .slideDownAdder { box-shadow: 0px 0.3px 0.4px rgba(0, 0, 0, 0.225), 0px 0.7px 1px rgba(0, 0, 0, 0.323), 0px 1.3px 1.9px rgba(0, 0, 0, 0.4), 0px 2.2px 3.4px rgba(0, 0, 0, 0.477), 0px 4.2px 6.3px rgba(0, 0, 0, 0.575), 0px 10px 15px rgba(0, 0, 0, 0.8); } .th_box_shadow_pp, .p_publicprofile_block_item { box-shadow: 0px 0px clamp(0rem, 1vw + -0.5rem, 0.4rem) rgba(0, 0, 0, 0.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .th_box_shadow_pp, :root:not([data-theme=light]):not([data-theme=dark]) .p_publicprofile_block_item { box-shadow: 0px 0px clamp(0rem, 1vw + -0.5rem, 0.4rem) rgba(0, 0, 0, 0.4); } } :root[data-theme=dark] .th_box_shadow_pp, :root[data-theme=dark] .p_publicprofile_block_item { box-shadow: 0px 0px clamp(0rem, 1vw + -0.5rem, 0.4rem) rgba(0, 0, 0, 0.4); } /*INPUTS*/ .th_input_bg, input[type=email], input[type=number], input[type=select], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=time], input[type=week], select, textarea, .tag-editor, .c_checkboxes_fancy > button, .fileUpload, .app_fixselectradiusleft > select, .app_select_disabled, .app_radiobutton_toggle, .monthpicker-display, .cke_chrome, .cke_reset.cke_chrome, .select2-container--default .select2-selection--single, .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-selection--multiple { color: var(--input-color); background-color: var(--input-bg); } .th_input_focus_bg, .app_input_text_large .select2-container--default.select2-container--focus .select2-selection--multiple, input[type=email]:focus, input[type=number]:focus, input[type=select]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, select:focus, textarea:focus { background-color: var(--input-bg-focus); } .th_input_focus_border_color, .app_input_text_large .select2-container--default.select2-container--focus .select2-selection--multiple, input[type=email]:focus, input[type=number]:focus, input[type=select]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, select:focus, textarea:focus { border-color: var(--input-border-focus); } .th_input_placeholder, .select2-container--classic .select2-selection--single .select2-selection__placeholder, .select2-container--default .select2-selection--single .select2-selection__placeholder, .select2-container--default .select2-selection--multiple .select2-selection__placeholder, .select2-container--default .select2-results__option[aria-disabled=true] { color: var(--input-placeholder); } .th_input_border, input[type=email], input[type=number], input[type=select], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=time], input[type=week], select, textarea, .tag-editor, .c_checkboxes_fancy > button, .fileUpload, .select2-container--default .select2-selection--single, .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-selection--multiple { border-color: var(--input-border); } .th_input_color_tag, .tag-editor, .tag-editor .tag-editor-tag:not(.active), .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--input-color-tag); } .th_input_bg_tag, .tag-editor .tag-editor-tag:not(.active), .tag-editor .tag-editor-delete, .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--input-bg-tag); } .th_input_positive_bg, .c_card_positive input[type=email], [data-card~=positive] input[type=email], .c_card_positive input[type=number], [data-card~=positive] input[type=number], .c_card_positive input[type=select], [data-card~=positive] input[type=select], .c_card_positive input[type=password], [data-card~=positive] input[type=password], .c_card_positive input[type=search], [data-card~=positive] input[type=search], .c_card_positive input[type=tel], [data-card~=positive] input[type=tel], .c_card_positive input[type=text], [data-card~=positive] input[type=text], .c_card_positive input[type=url], [data-card~=positive] input[type=url], .c_card_positive input[type=color], [data-card~=positive] input[type=color], .c_card_positive input[type=date], [data-card~=positive] input[type=date], .c_card_positive input[type=datetime], [data-card~=positive] input[type=datetime], .c_card_positive input[type=datetime-local], [data-card~=positive] input[type=datetime-local], .c_card_positive input[type=month], [data-card~=positive] input[type=month], .c_card_positive input[type=time], [data-card~=positive] input[type=time], .c_card_positive input[type=week], [data-card~=positive] input[type=week], .c_card_positive select, .c_card_positive textarea, [data-card~=positive] select, [data-card~=positive] textarea, .c_card_positive .tag-editor, [data-card~=positive] .tag-editor, .c_card_positive .select2-container--default .select2-selection--single, [data-card~=positive] .select2-container--default .select2-selection--single { background-color: var(--input-positive-bg); } /*Teamtailor*/ .th_teamtailor_bg { background-color: var(--teamtailor-bg); } .th_teamtailor_color { color: var(--teamtailor-color); } /*Deprecated*/ .gr_light_red_to_red_low_opacity, .c_toggle__container input:checked + .js_shareprofile_change_color.c_toggle__item { background: linear-gradient(90deg, hsl(var(--md-sys-color-inverse-on-surface)), hsl(var(--md-sys-color-error-container))); } .c_toggle__container input:checked + .js_shareprofile_change_color.c_toggle__item:after { background-color: hsl(var(--md-sys-color-error)); } .app_statistics_ads_value > span:nth-of-type(1) { font-weight: 700 !important; } .app_statistics_ads_value > span:nth-of-type(2) { font-weight: 400; } .app_statistics_ads_footer, .app_statistics_ads_tags { align-self: flex-end; } .app_statistics_ads_tags { background: var(--positive-color); color: var(--positive-bg); font-weight: 700; border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; padding: 0.3rem 1rem; margin-top: 2rem; } .app_icon_upgradeduotone { --fa-secondary-opacity: 1.0; --fa-primary-color: #f3cc0a; --fa-secondary-color: #e68b08; } .profilePictureWrapperLarge .app_icon_upgradeduotone { font-size: 2rem; } .app_icon_reachduotone { --fa-secondary-opacity: 1.0; --fa-primary-color: #e2aa3c; --fa-secondary-color: #2b87a9; } .app_icon_greenad { --fa-primary-color: var(--positive-on-positive-color); --fa-secondary-color: var(--positive-on-positive-bg); } .app_icon_funfact { --fa-primary-color: var(--negative-color-low); --fa-secondary-color: var(--negative-color); } /* Importing required modules */ .l_font_size_xs, l_font_size_xsmall, .app_font_size_1, .app_font_size_versmall { font-size: 1.15rem; font-size: min(max(1rem, 5cqw), 1.15rem); font-size: clamp(1rem, 5cqw, 1.15rem); } .app_dropdown_style button, .app_dropdown_style input, [data-font-size=small]:not([data-font-type=title]), .l_font_size_sm, .l_font_size_secondary, .app_font_size_second, .app_style_small, .app_button_astextbutton, .app_feed_horisontell.app_feed_horisontell_withbackgroundheader > div > div:nth-of-type(4), .app_item_withicon > div:last-of-type, .app_filter_summary, .charcount_chars, .app_form_suggestions > span, .formOptional, .field-validation-error { font-size: 1.3rem; font-size: min(max(1.2rem, 5cqw), 1.3rem); font-size: clamp(1.2rem, 5cqw, 1.3rem); } .app_clear_input_button, .app_dropdown_style, .app_dropdown_style .app_link_withicon, [data-font-type=title][data-font-size=medium], [data-font-type=text], [data-font-size=normal]:not([data-font-type=title]), .l_font_size_md, .l_font_size_normal, body, .l_font_size_primary, label, .app_label, .app_font_size_button { font-size: 1.5rem; font-size: min(max(1.3rem, 5cqw), 1.5rem); font-size: clamp(1.3rem, 5cqw, 1.5rem); } .app_button_newitembutton > span:first-of-type, .app_button_newleadbutton > span:first-of-type, [data-font-type=title][data-font-size=large], .l_font_size_large, .l_font_size_lg, .app_tabs_first > a, .app_font_size_large { font-size: 1.7rem; font-size: min(max(1.7rem, 5cqw), 1.7rem); font-size: clamp(1.7rem, 5cqw, 1.7rem); } [data-font-size="3xl"]:not([data-font-type=title]), .app_font_color_gradient_yellowtored, .l_font_size_number_large { font-size: 3.5rem; font-size: min(max(2.8rem, 5cqw), 3.5rem); font-size: clamp(2.8rem, 5cqw, 3.5rem); } .l_font_size_number_medium { font-size: 2rem; font-size: min(max(1.8rem, 5cqw), 2rem); font-size: clamp(1.8rem, 5cqw, 2rem); } .app_font_headlinestyle_text, .app_font_headlinestyle_withtwospans > span:first-of-type, .app_font_headlinestyle_withtwospans > label, .l_font_size_h1, h1, .app_font_size_h1, .app_font_size_extralarge, .app_icon_size_verylarge { font-size: 2.3rem; font-size: min(max(1.8rem, 3cqw), 2.3rem); font-size: clamp(1.8rem, 3cqw, 2.3rem); } .app_resume_tagline, .app_menu_second ul > li, .l_font_size_h2, h2, .app_h2 { font-size: 2rem; font-size: min(max(1.6rem, 5cqw), 2rem); font-size: clamp(1.6rem, 5cqw, 2rem); } .app_statistics_adbox_text > span:nth-of-type(1), .app_button_newitembutton > span:last-of-type, .app_button_newleadbutton > span:last-of-type, .l_font_size_h3, h3, .app_h3, .dynamicResumeItemTitle, .app_box_small_headline { font-size: 1.7rem; font-size: min(max(1.45rem, 5cqw), 1.7rem); font-size: clamp(1.45rem, 5cqw, 1.7rem); } .l_font_size_h4, h4, .app_tabs_second > a, .app_tabs_second > div { font-size: 1.5rem; font-size: min(max(1.3rem, 5cqw), 1.5rem); font-size: clamp(1.3rem, 5cqw, 1.5rem); } .l_font_size_h5 { font-size: 1.7rem; font-size: min(max(1.7rem, 5cqw), 1.7rem); font-size: clamp(1.7rem, 5cqw, 1.7rem); } .app_font_headlinestyle_withtwospans > span:last-of-type, .app_font_headlinestyle_withtwospans > h1, .app_font_color_gradient_yellowtored { font-size: 4.1rem; font-size: min(max(2.8rem, 5cqw), 4.1rem); font-size: clamp(2.8rem, 5cqw, 4.1rem); } [data-font-weight=small], .l_font_weight_sm, .app_font_weight_slim { font-weight: 300; } .app_statistics_adbox_text > span:nth-of-type(2), [data-font-weight=normal], .l_font_weight_md, body, .l_font_weight_normal, .app_font_weight_normal, .app_label_second, .app_font_size_main, .l_font_size_h3, h3, .app_h3, .dynamicResumeItemTitle, .app_box_small_headline { font-weight: 400; } .l_font_weight_normal_important { font-weight: 400 !important; } .app_resume_tagline, [data-font-weight=medium], .dynamicResumeItemSubTitle, .app_font_weight_mediumlarge, label, .app_label, .app_font_weight_medium, .app_feed_item_headline, .app_feed_item_headline a, .dynamicResumeItemTitle, .app_tabs_first > a, .app_tabs_second > a, .app_tabs_second > div { font-weight: 500; } .app_menu_second ul > li, .app_input_withsearchicon input, .app_button_withicon.fal, .app_button_withicon.fas, .app_button_withicon, .app_link_withicon, .app_dropdown_style > div:not(.app_dropdown_style_notfirstdiv), .app_dropdown_style button, .app_dropdown_style input, .app_dropdown_style .app_link_withicon, .app_dropdown_style > li:first-of-type, [data-font-type=title][data-font-size=large], [data-font-type=title][data-font-size=medium], [data-font-type=title][data-font-size=normal], [data-font-weight=semibold], .app_font_headlinestyle_withtwospans > span:last-of-type, .app_font_headlinestyle_withtwospans > h1, .app_font_color_gradient_yellowtored, .l_font_weight_xl, .app_button_boldtext, .app_font_weight_large, .l_font_size_number_large, .app_font_firstrowboldsecondlight > div:first-child, .l_font_size_number_medium { font-weight: 600; } .app_statistics_adbox_text > span:nth-of-type(1), [data-font-weight=bold], .l_font_weight_2xl { font-weight: 700; } .l_lineheight_1, .app_font_headlinestyle_withtwospans { line-height: 1; } .l_font_size_h1, h1, .app_font_size_h1 { line-height: 1.2; } [data-font-type=title][data-font-size=large], [data-font-type=title][data-font-size=medium], [data-font-type=title][data-font-size=normal], .app_font_color_gradient_yellowtored, .app_main_header h1, .l_lineheight_2xl, h1, h2, h3, h4, .l_font_size_large:not(.l_lineheight_1), .app_tabs_first > a, .app_font_size_large { line-height: 1.3; } .app_font_headlinestyle_text, .l_lineheight_3xl { line-height: 1.5; } .l_lineheight_static_14 { line-height: 1.4rem !important; } .app_position_searchprofilepen, .l_icon_size_xs { font-size: 1.1rem; font-size: min(max(1.3rem, 5cqw), 1.1rem); font-size: clamp(1.3rem, 5cqw, 1.1rem); } .c_sidemenu > li > a > div:first-of-type, .c_sidemenu > li > div > div:first-of-type, .l_icon_size_sm, .app_icon_size_small, .fal.editableBlock_deleteButton, .fal.editableBlock_editButton, .dynamicResumeItemActions > span.fal { font-size: 1.5rem; font-size: min(max(1.6rem, 5cqw), 1.5rem); font-size: clamp(1.6rem, 5cqw, 1.5rem); } .app_icon_size_small_important { font-size: 1.5rem !important; font-size: min(max(1.6rem, 5cqw), 1.5rem) !important; font-size: clamp(1.6rem, 5cqw, 1.5rem) !important; } .app_input_withsearchicon input, .app_input_withsearchicon button, .app_input_withsearchicon_inside button#searchButton, .app_dropdown_style > div > a > span:before, .app_dropdown_style > div > form > button > span:before, .app_dropdown_style > div > div > span:before, .app_dropdown_style a:before, .l_icon_size_md, .app_icon_size_medium, .app_icon_style a, .app_icon_style, .app_item_withnotextonlyicon a, .app_item_withnotextonlyicon span { font-size: 2rem; font-size: min(max(1.9rem, 5cqw), 2rem); font-size: clamp(1.9rem, 5cqw, 2rem); } .app_sidebar_right_iconbar .app_dropdown_wrapper_header > .fal:not(a), .app_sidebar_right_header > ul li > span, .l_icon_size_lg, .app_icon_size_large, .app_icon_size_large_link a.fal, .app_icon_size_large_link a.fas, .dynamicResumeActions span.fal:not(.l_icon_size_sm), .dynamicResumeActions a .fal, .c_product_header__actions .fal, .c_product_header__actions .tooltipstered.fal, .c_product_header__actions .app_icon_size_medium.fal, .c_product_header__actions .fas, .l_icon_size_lg .fal, .app_icon_size_large .fal, .app_icon_size_large_link a.fal .fal, .app_icon_size_large_link a.fas .fal, .dynamicResumeActions span.fal:not(.l_icon_size_sm) .fal, .dynamicResumeActions a .fal .fal, .c_product_header__actions .fal .fal, .c_product_header__actions .tooltipstered.fal .fal, .c_product_header__actions .app_icon_size_medium.fal .fal, .c_product_header__actions .fas .fal { font-size: 2.6rem; font-size: min(max(2.2rem, 5cqw), 2.6rem); font-size: clamp(2.2rem, 5cqw, 2.6rem); } .c_avatar_edit_icon, .c_product_header_with_bg div.editableArea .fa-pen, .l_icon_size_xl { font-size: 4rem; font-size: min(max(2.3rem, 5cqw), 4rem); font-size: clamp(2.3rem, 5cqw, 4rem); } /* Fonts */ body, .app_button_clear, .app_feed_item_headline, .app_font_family_first { font-family: Poppins, "Sans Serif"; } h1, h2, h3, h4, .app_font_family_second, .app_menu_second ul > li, .app_font_family_headlines, .app_resume_tagline, .dynamicResumeItemSubTitle, .app_tabs_second > a, .app_tabs_second > div { font-family: Poppins, "Sans Serif"; } html { font-size: 62.5%; } @media (max-width: 49.9375rem) { html { max-width: 100%; font-size: 67%; } } h1, h2, h3, h4, h5 { padding: 0; margin: 0; } .l_font_size_fluid_12_15 { font-size: clamp(1.2rem, 0.75vw + 0.83rem, 1.5rem); } /* Fonts - Weights */ /* Fonts - Line heights */ .l_lineheight_0 { line-height: 0; } /*Fonts - Colors*/ .l_font_color_link, a.l_font_color_link { color: var(--primary-bg); } /* Icon sizes */ /* Fonts - Decorative styles */ .app_font_headlinestyle_withtwospans { margin-bottom: 1rem; } .app_font_headlinestyle_withtwospans > span:first-of-type, .app_font_headlinestyle_withtwospans > label { display: block; margin-bottom: 0.5rem; } .app_font_headlinestyle_withtwospans > span:last-of-type, .app_font_headlinestyle_withtwospans > h1, .app_font_color_gradient_yellowtored { background-image: linear-gradient(45deg, #f9b125, #e52451); background-color: #f9b125; background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; -webkit-box-decoration-break: clone; } /*Data-Font*/ /*Data-Font - Variants*/ /*Data-Font - Size*/ /*Data-Font - Weight*/ /*Data-Font - Type*/ [data-font-type=title] { /*Size for title: small, medium, large etc.*/ } [data-font-type=title] > a { text-decoration: none !important; } [data-font-type=title][data-font-size=normal][data-font-fluid~=parent] { font-size: 1.3rem; font-size: min(max(1.2rem, 11qw), 1.3rem); font-size: clamp(1.2rem, 11qw, 1.3rem); } [data-font-type=title][data-font-size=normal][data-font-fluid~=full_width] { font-size: 1.3rem; font-size: min(max(1.2rem, 3cqw), 1.3rem); font-size: clamp(1.2rem, 3cqw, 1.3rem); } [data-font-type=title][data-font-size=normal][data-font-fluid~=breakpoint] { font-size: clamp(1.2rem, 0.25vw + 1.07rem, 1.3rem); } [data-font-type=title][data-font-size=medium][data-font-fluid~=parent] { font-size: 1.5rem; font-size: min(max(1.3rem, 11cqw), 1.5rem); font-size: clamp(1.3rem, 11cqw, 1.5rem); } [data-font-type=title][data-font-size=medium][data-font-fluid~=full_width] { font-size: 1.5rem; font-size: min(max(1.3rem, 3cqw), 1.5rem); font-size: clamp(1.3rem, 3cqw, 1.5rem); } [data-font-type=title][data-font-size=medium][data-font-fluid~=breakpoint] { font-size: clamp(1.3rem, 0.5vw + 1.05rem, 1.5rem); } [data-font-type=title][data-font-size=large][data-font-fluid~=parent] { font-size: 1.7rem; font-size: min(max(1.7rem, 11cqw), 1.7rem); font-size: clamp(1.7rem, 11cqw, 1.7rem); } [data-font-type=title][data-font-size=large][data-font-fluid~=full_width] { font-size: 1.7rem; font-size: min(max(1.7rem, 3cqw), 1.7rem); font-size: clamp(1.7rem, 3cqw, 1.7rem); } [data-font-type=title][data-font-size=large][data-font-fluid~=breakpoint] { font-size: clamp(1.7rem, 0vw + 1.7rem, 1.7rem); } /* Main selector for the product header */ .c_product_header { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: minmax(0, max-content) minmax(0, max-content) minmax(0, max-content); gap: 0 1.5rem; grid-template-areas: "image title actions" "image undertitle actions" "image buttons buttons"; /* Modified version with background */ /* Background selector */ /* Title selector */ /* Subtitle selector */ /* Image selector */ /* Buttons selector */ /* Actions selector */ /* Responsive design for mobile devices */ } .c_product_header_with_bg { /* Grid-template-areas for the modified version with background */ grid-template-areas: "background background background" "image title actions" "image undertitle actions" "image buttons buttons" "image . ."; grid-template-rows: auto auto auto auto auto; /* Responsive design for mobile devices */ /* Styles for the editing area */ } @media (max-width: 49.9375rem) { .c_product_header_with_bg { grid-template-areas: "background background" "image actions" "title title" "undertitle undertitle" "buttons buttons" !important; grid-template-columns: auto 0 !important; } } .c_product_header_with_bg div.editableArea { margin-bottom: 0; } .c_product_header_with_bg div.editableArea > div:nth-child(2) { position: relative; z-index: 0; transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity, filter; } .c_product_header_with_bg div.editableArea .fa-pen { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); opacity: 0; transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1), transform 0.55s cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; } .c_product_header_with_bg div.editableArea:hover::before { opacity: 1; } .c_product_header_with_bg div.editableArea:hover .fa-pen { opacity: 1; transform: translate(-50%, -50%) scale(1); } .c_product_header_with_bg div.editableArea:hover > div:nth-child(2), .c_product_header_with_bg div.editableArea .profilePictureWrapper:hover .fa-camera { opacity: 0.2; filter: blur(0.1rem); transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity, filter; } .c_product_header__background { grid-area: background; margin-bottom: 1rem; /* Responsive design for mobile devices */ } @media (max-width: 49.9375rem) { .c_product_header__background { width: 100%; } } .c_product_header__background > div:first-of-type:not(.editableArea), .c_product_header__background > div.editableArea > div:last-of-type { height: 16rem; background-size: cover; background-position: center; border-radius: 2rem; } .c_product_header__title { grid-area: title; } @media (max-width: 49.9375rem) { .c_product_header__title h1, .c_product_header__title .c_chip__container { justify-content: center; } } .c_product_header__title_under { grid-area: undertitle; margin-bottom: 0.5rem; } @media (max-width: 49.9375rem) { .c_product_header__title_under .sp_add_dot_between_items { justify-content: center; } } .c_product_header__image { grid-area: image; /* Adjustment for the version with background */ } .c_product_header_with_bg .c_product_header__image { margin-top: -3.6rem; } @media (max-width: 49.9375rem) { .c_product_header_with_bg .c_product_header__image { margin-top: -5rem; } } .c_product_header__buttons { grid-area: buttons; display: flex; flex-wrap: wrap; gap: 0.5rem; flex-direction: row; width: 100%; margin-top: 0.7rem; /* Responsive design for mobile devices */ } @media (max-width: 49.9375rem) { .c_product_header__buttons { justify-content: center; } } .c_product_header__buttons .c_product_header__buttons_standout_mo { /* Responsive design for mobile devices */ } @media (max-width: 49.9375rem) { .c_product_header__buttons .c_product_header__buttons_standout_mo { flex: 1; } } .c_product_header__buttons *:not(.c_product_header__buttons_standout_mo) { /* Responsive design for mobile devices */ } @media (max-width: 49.9375rem) { .c_product_header__buttons *:not(.c_product_header__buttons_standout_mo) { flex: 0; } } .c_product_header__actions { grid-area: actions; display: flex; align-items: flex-start; grid-gap: 0.8rem; /* Responsive design for mobile devices */ } .c_product_header__actions .fal, .c_product_header__actions .fas { text-align: center; transition: color 0.2s ease-in; } .c_product_header__actions .fal, .c_product_header__actions .fas, .c_product_header__actions a { text-decoration: none; } @media (max-width: 49.9375rem) { .c_product_header__actions { position: relative; justify-self: right; border-radius: 1.5rem; display: flex; justify-content: center; align-items: center; height: 5rem; line-height: 1; gap: 0; padding: 1rem; z-index: 2; border: 0.1rem solid rgba(0, 0, 0, 0.05); box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.012), 0px 2.5px 4.2px rgba(0, 0, 0, 0.014), 0px 6px 10px rgba(0, 0, 0, 0.02); background-color: rgba(255, 255, 255, 0.8); } } @media (max-width: 49.9375rem) and (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .c_product_header__actions { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.03), 0px 2.5px 4.2px rgba(0, 0, 0, 0.05), 0px 6px 10px rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.8); } } @media (max-width: 49.9375rem) { :root[data-theme=dark] .c_product_header__actions { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.03), 0px 2.5px 4.2px rgba(0, 0, 0, 0.05), 0px 6px 10px rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.8); } } @media (max-width: 49.9375rem) { .c_product_header { grid-template-areas: "image actions" "title title" "undertitle undertitle" "buttons buttons"; grid-template-columns: auto 0; grid-template-rows: minmax(0, max-content) minmax(0, max-content) minmax(0, max-content); gap: 0.5rem; justify-items: center; text-align: center; } } /*Importing required modules*/ /*Avatar sizes*/ /*Avatar icon and font sizes*/ /*Avatar radius sizes*/ /*Mixin for all avatars*/ .c_avatar { --_avatar__width: var(--avatar__width, 4rem); --_avatar__height: var(--avatar__height, 4rem); --_avatar__font_size: var(--avatar__font_size, 4rem); --_avatar__icon_text_size: var(--avatar__icon_text_size, 4rem); --_avatar__bg: var(--avatar__bg, var(--dark)); --_avatar__color: var(--avatar__color, var(--font-color-primary)); width: var(--_avatar__width); height: var(--_avatar__height); min-width: var(--_avatar__width); min-height: var(--_avatar__height); font-size: var(--_avatar__font_size); background: var(--_avatar__bg); color: var(--_avatar__color); display: flex; justify-content: center; align-items: center; overflow: hidden; text-align: center; border-radius: 26%; position: relative; /*Sizes*/ /*Variants*/ /*Styles*/ /*Specials*/ } .c_avatar_background { width: var(--_avatar__width); height: var(--_avatar__height); min-width: var(--_avatar__width); min-height: var(--_avatar__height); } .c_avatar > div, .c_avatar > span { display: flex; align-items: center; justify-content: center; background-position: center; background-repeat: no-repeat; background-size: cover; } .c_avatar > img { object-fit: contain; } .c_avatar .c_avatar_background_logotype:not(img):not(.js_check_background_image_size_color) { background-size: contain; transform: scale(0.76); } .c_avatar .c_avatar_background_logotype.js_check_background_image_size_color { background-size: contain; transform: scale(1); } .c_avatar .c_avatar_background_profile:not(img) { background-size: 100%; } .c_avatar img.c_avatar_background_logotype { width: 76%; height: auto; min-width: 76%; min-height: 0; } .c_avatar img.c_avatar_background_profile { width: 100%; height: auto; min-width: 100%; min-height: 0; } .c_avatar_text, .c_avatar_icon { font-size: var(--_avatar__icon_text_size); font-weight: 600; color: rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .c_avatar_text, :root:not([data-theme=light]):not([data-theme=dark]) .c_avatar_icon { color: #b0b0b0; } } :root[data-theme=dark] .c_avatar_text, :root[data-theme=dark] .c_avatar_icon { color: #b0b0b0; } .c_avatar_xs { --avatar__width: clamp(2.15rem, 0.75vw + 1.78rem, 2.45rem); --avatar__height: clamp(2.15rem, 0.75vw + 1.78rem, 2.45rem); --avatar__font_size: 0.9rem; --avatar__icon_text_size: clamp(0.7rem, 0.5vw + 0.45rem, 0.9rem); } .c_avatar_sm { --avatar__width: clamp(2.5rem, 2.5vw + 1.25rem, 3.5rem); --avatar__height: clamp(2.5rem, 2.5vw + 1.25rem, 3.5rem); --avatar__font_size: 1.6rem; --avatar__icon_text_size: clamp(1.25rem, 0.88vw + 0.81rem, 1.6rem); } .c_avatar_md { --avatar__width: clamp(5.2rem, 0.75vw + 4.83rem, 5.5rem); --avatar__height: clamp(5.2rem, 0.75vw + 4.83rem, 5.5rem); --avatar__font_size: 2rem; --avatar__icon_text_size: clamp(1.5rem, 1.25vw + 0.88rem, 2rem); } .c_avatar_lg { --avatar__width: clamp(7.2rem, 0.75vw + 6.83rem, 7.5rem); --avatar__height: clamp(7.2rem, 0.75vw + 6.83rem, 7.5rem); --avatar__font_size: 3rem; --avatar__icon_text_size: clamp(2.4rem, 1.5vw + 1.65rem, 3rem); } .c_avatar_xl { --avatar__width: clamp(9.7rem, 0.75vw + 9.32rem, 10rem); --avatar__height: clamp(9.7rem, 0.75vw + 9.32rem, 10rem); --avatar__font_size: 4rem; --avatar__icon_text_size: clamp(3.2rem, 2vw + 2.2rem, 4rem); } .c_avatar_2xl { --avatar__width: clamp(12.7rem, 0.75vw + 12.33rem, 13rem); --avatar__height: clamp(12.7rem, 0.75vw + 12.33rem, 13rem); --avatar__font_size: 5rem; --avatar__icon_text_size: clamp(3.8rem, 3vw + 2.3rem, 5rem); } .c_avatar_fluid_lg { --avatar__width: 7.5rem; --avatar__width: min(max(2.45rem, 20cqw), 7.5rem); --avatar__width: clamp(2.45rem, 20cqw, 7.5rem); --avatar__height: 7.5rem; --avatar__height: min(max(2.45rem, 20cqw), 7.5rem); --avatar__height: clamp(2.45rem, 20cqw, 7.5rem); --avatar__font_size: 3rem; --avatar__icon_text_size: clamp(1.5rem, 3.75vw + -0.38rem, 3rem); } .c_avatar_fluid_xl { --avatar__width: 10rem; --avatar__width: min(max(2.45rem, 20cqw), 10rem); --avatar__width: clamp(2.45rem, 20cqw, 10rem); --avatar__height: 10rem; --avatar__height: min(max(2.45rem, 20cqw), 10rem); --avatar__height: clamp(2.45rem, 20cqw, 10rem); --avatar__font_size: 4rem; --avatar__icon_text_size: clamp(2.5rem, 3.75vw + 0.63rem, 4rem); } .c_avatar_fluid_2xl { --avatar__width: 13rem; --avatar__width: min(max(10rem, 20cqw), 13rem); --avatar__width: clamp(10rem, 20cqw, 13rem); --avatar__height: 13rem; --avatar__height: min(max(10rem, 20cqw), 13rem); --avatar__height: clamp(10rem, 20cqw, 13rem); --avatar__font_size: 5rem; --avatar__icon_text_size: clamp(2.5rem, 6.25vw + -0.63rem, 5rem); } .c_avatar_primary, .c_avatar .c_avatar_skill { --avatar__bg: var(--third-bg); --avatar__color: var(--third-color); } .c_avatar_secondary, .c_avatar .c_avatar_role { --avatar__bg: var(--third-variant-bg); --avatar__color: var(--third-variant-color); } .c_avatar_positive, .c_avatar .c_avatar_category { --avatar__bg: var(--positive-bg); --avatar__color: var(--positive-color); } .c_avatar_negative, .c_avatar .c_avatar_location { --avatar__bg: var(--negative-bg); --avatar__color: var(--negative-color); } .c_avatar_blue, .c_avatar .c_avatar_competence { --avatar__bg: var(--blue-bg); --avatar__color: var(--blue-color); } .c_avatar_border, .c_avatar .profilePictureWrapper { border-color: rgba(0, 0, 0, 0.08); border-style: solid; border-width: 0.1rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .c_avatar_border, :root:not([data-theme=light]):not([data-theme=dark]) .c_avatar .profilePictureWrapper { border-color: rgba(255, 255, 255, 0.08); } } :root[data-theme=dark] .c_avatar_border, :root[data-theme=dark] .c_avatar .profilePictureWrapper { border-color: rgba(255, 255, 255, 0.08); } .c_avatar_shadow { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.012), 0px 2.5px 4.2px rgba(0, 0, 0, 0.014), 0px 6px 10px rgba(0, 0, 0, 0.02); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .c_avatar_shadow { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.03), 0px 2.5px 4.2px rgba(0, 0, 0, 0.05), 0px 6px 10px rgba(0, 0, 0, 0.1); } } :root[data-theme=dark] .c_avatar_shadow { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.03), 0px 2.5px 4.2px rgba(0, 0, 0, 0.05), 0px 6px 10px rgba(0, 0, 0, 0.1); } .c_avatar_shadow_lg_next > div, .c_avatar_shadow_lg { box-shadow: 0px 0px 0.2px rgba(0, 0, 0, 0.008), 0px 0px 0.5px rgba(0, 0, 0, 0.012), 0px 0px 0.9px rgba(0, 0, 0, 0.015), 0px 0px 1.3px rgba(0, 0, 0, 0.018), 0px 0px 1.9px rgba(0, 0, 0, 0.02), 0px -2.7px 2.7px rgba(0, 0, 0, 0.022), 0px -3.8px 3.8px rgba(0, 0, 0, 0.025), 0px -5.5px 5.5px rgba(0, 0, 0, 0.028), 0px -8.4px 8.4px rgba(0, 0, 0, 0.032), 0px -15px 15px rgba(0, 0, 0, 0.04); } .c_avatar_logotype { background: var(--picture-bg); color: var(--picture-color); } .c_avatar_logotype img { width: 76%; } .c_avatar_bg_white { background-color: white !important; } .c_avatar_banner img { border-radius: 2rem; height: 8rem; object-fit: cover; width: 100%; } .c_avatar_on_banner .c_avatar_lg { margin-top: -3.75rem; margin-bottom: 1rem; } .c_avatar_on_banner .c_avatar_fluid_lg { margin-top: -3.75rem; margin-bottom: 1rem; } .c_avatar_on_banner .c_avatar_fluid_xl { margin-top: -5rem; margin-bottom: 1rem; } .c_avatar_stacked { display: flex; align-items: center; } .c_avatar_stacked > div, .c_avatar_stacked > a { border-width: 0.2rem; border-color: var(--dark); } .c_avatar_stacked > div:not(:first-of-type), .c_avatar_stacked > a:not(:first-of-type) { margin-left: -1rem; } .c_avatar_stacked > div:first-of-type, .c_avatar_stacked > a:first-of-type { margin-left: -0.2rem; } .c_avatar_stacked_logotype { display: flex; align-items: center; } .c_avatar_stacked_logotype > div, .c_avatar_stacked_logotype > a { border-width: 0.1rem; border-color: var(--transparent-sm); } .c_avatar_stacked_logotype > div:not(:first-of-type), .c_avatar_stacked_logotype > a:not(:first-of-type) { margin-left: -1rem; } .c_avatar_stacked_logotype > div:first-of-type, .c_avatar_stacked_logotype > a:first-of-type { margin-left: -0.2rem; } .c_avatar_and_add_button { --avatar__width: clamp(2.15rem, 0.75vw + 1.78rem, 2.45rem); --avatar__height: clamp(2.15rem, 0.75vw + 1.78rem, 2.45rem); --avatar__font_size: 0.9rem; } .c_avatar_and_add_button .c_avatar_xs { box-shadow: none; border-width: 0.17rem; border-color: var(--icon-color-primary); } .c_avatar_and_add_button .fa-plus { font-size: clamp(1.1rem, 1vw + 0.6rem, 1.5rem); font-weight: 500; font-family: Poppins; } .c_avatar_and_add_button .fa-plus:before { font-family: "Font Awesome 7 Pro"; } .c_avatar_locked { overflow: visible; } .c_avatar_locked .fa-lock { position: absolute; top: -0.3rem; right: -0.5rem; font-size: 1.5rem; background: var(--dark); border-radius: 50%; padding: 0.5rem; color: var(--transparent-xl); transition: opacity 0.3s ease; z-index: 1; } .c_avatar_locked_sm .fa-lock { top: -0.5rem; right: -0.5rem; font-size: 1rem; } .c_avatar_locked .c_button, .c_avatar_locked .c_buttondropdown_primary .c_buttondropdown__button, .c_buttondropdown_primary .c_avatar_locked .c_buttondropdown__button, .c_avatar_locked .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_secondary .c_avatar_locked .c_buttondropdown__button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .c_avatar_locked .c_avatar_background, .c_avatar_locked .c_avatar_icon { transition: opacity 0.5s ease; } .c_avatar_locked:hover .fa-lock, .c_avatar_locked:hover .c_avatar_background, .c_avatar_locked:hover .c_avatar_icon { opacity: 0; } .c_avatar_locked:hover .c_button, .c_avatar_locked:hover .c_buttondropdown_primary .c_buttondropdown__button, .c_buttondropdown_primary .c_avatar_locked:hover .c_buttondropdown__button, .c_avatar_locked:hover .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_secondary .c_avatar_locked:hover .c_buttondropdown__button { opacity: 1; } .c_avatar_edit_wrapper { position: relative; z-index: 0; transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity, filter; } .c_avatar_edit_wrapper::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); z-index: 1; } .c_avatar_edit_wrapper:hover::before { opacity: 1; } .c_avatar_edit_wrapper:hover .c_avatar_edit_icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } .c_avatar_edit_wrapper:hover .c_avatar_icon { opacity: 0.2; filter: blur(0.1rem); } .c_avatar_edit_icon { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); opacity: 0; transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1), transform 0.55s cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; text-decoration: none; } .c_avatar_icon { transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity, filter; } /*Deprectated*/ /*-----Function (Stack images on top of each other)-----*/ .app_move_divs_left > div:not(:first-of-type) { margin-left: -1rem; } .app_move_divs_left > div:nth-of-type(1) { margin-left: -0.2rem; } .app_move_divs_left > div { border: 0.2rem solid white; } .app_move_divs_left_red > div:not(:first-of-type) { border: 0.2rem solid var(--negative-bg); } .app_move_divs_left_green > div:not(:first-of-type) { border: 0.2rem solid var(--positive-bg); } .app_move_divs_left_orange > div:not(:first-of-type) { border: 0.2rem solid var(--third-bg); } .app_move_divs_left_red div.profilePictureWrapper { background: var(--negative-bg); } .app_move_divs_left_green div.profilePictureWrapper { background: var(--positive-bg); } .app_move_divs_left_orange div.profilePictureWrapper { background: var(--third-bg); } /*Avatar statistics*/ /*Avatar*/ .app_avatar { background-color: var(--secondary-bg); border-radius: 26%; width: 10rem; height: 10rem; display: flex; align-items: center; justify-content: center; text-align: center; } .app_avatar > span { background-size: contain; width: 4rem; height: 4rem; font-size: 4rem; background-repeat: no-repeat; background-position: center; } .app_avatar.app_avatar_region > span { filter: invert(9%) sepia(57%) saturate(1000%) hue-rotate(297deg) brightness(100%) contrast(17%); } .app_avatar.app_avatar_role > span { filter: invert(75%) sepia(53%) saturate(800%) hue-rotate(1deg) brightness(147%) contrast(53%); } .app_avatar.app_avatar_skill > span { filter: invert(75%) sepia(53%) saturate(800%) hue-rotate(1deg) brightness(147%) contrast(53%); } .app_avatar.app_avatar_category > span { filter: brightness(0) saturate(100%) invert(84%) sepia(11%) saturate(378%) hue-rotate(66deg) brightness(88%) contrast(71%); } .app_avatar_sm { width: 3.5rem; min-width: 3.5rem; height: 3.5rem; border-radius: 26%; } .app_avatar_sm > span { width: 2rem; height: 2rem; } .app_avatar_md { width: 5.5rem; min-width: 5.5rem; height: 5.5rem; border-radius: 26%; } .app_avatar_md > span { width: 3rem; height: 3rem; } /*Fixes*/ .app_fixheightonprofilepicture > .profilePictureWrapper.profilePictureWrapperLarge, .app_fixheightonprofilepicture > .profilePictureWrapper.profilePictureWrapperLarge > .profilePicture { min-height: 21rem !important; height: 21rem !important; background-position: center center !important; } .app_fix_useendclientlogotype > .c_avatar_xs { box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); position: absolute; top: -0.5rem; right: -0.5rem; } div.profilePictureWrapper > span.profilePictureFallback.fa-building { font-size: 4rem; } .app_changebackgroundcoloronimage .profilePictureFallback { background: rgba(255, 255, 255, 0.7) !important; color: var(--positive-color) !important; } /* Mobile */ @media (max-width: 49.9375rem) { .app_fixprofilepictureonmobilebottommenu > div.profilePictureWrapper.profilePictureWrapperSmall > span.profilePictureFallback { width: 2.2rem !important; height: 2.2rem !important; } } /*CSS Variables*/ .c_card, .app_sidebar_right #PersonalIdentityContainer, [data-card] { --_card__bg: var(--card__bg, var(--white-bg)); --_card__color: var(--card__color, var(--font-color-primary)); --_card__padding: var(--card__padding, clamp(1rem, 0.5vw + 0.75rem, 1.2rem)); --_card__shadow: var(--card__shadow, none); --_card__icon_color: var(--card__icon_color, var(--secondary-color)); --_card__icon_size: var(--card__icon_size, 2rem); --_card__radius: var(--card__radius, clamp(1.5rem, 1.25vw + 0.88rem, 2rem)); --_card__arrow_radius: var(--card__arrow_radius, 1.5rem); --_card__border_color: var(--card__border_color, transparent); --_card__headline_color: var(--card__headline_color, var(--font-color-primary)); background-color: var(--_card__bg); color: var(--_card__color); padding: var(--_card__padding); border-radius: var(--_card__radius); box-shadow: var(--_card__shadow); position: relative; line-height: 1.4; border: 0.1rem solid transparent; /*Message box*/ /*Outline*/ /*Dashed*/ /*Size*/ /*Variant*/ /*Skeleton*/ } .c_card h1, .app_sidebar_right #PersonalIdentityContainer h1, [data-card] h1, .c_card h2, .app_sidebar_right #PersonalIdentityContainer h2, [data-card] h2, .c_card h3, .app_sidebar_right #PersonalIdentityContainer h3, [data-card] h3, .c_card h4, .app_sidebar_right #PersonalIdentityContainer h4, [data-card] h4 { color: var(--_card__headline_color); } .c_card a, .app_sidebar_right #PersonalIdentityContainer a, [data-card] a, .c_card a.app_link_visited { text-decoration: none !important; } .c_card__actions .fal, .c_card__actions .fa-light { font-size: var(--_card__icon_size); color: var(--_card__icon_color); } .c_card__actions .fal.fa-heart { color: var(--primary-bg); } .c_card > div > strong > a.c_card_matchlinkcolor, .app_sidebar_right #PersonalIdentityContainer > div > strong > a.c_card_matchlinkcolor, [data-card] > div > strong > a.c_card_matchlinkcolor { color: var(--_card__color); } .c_card_fluid_from_parent_100 { border-radius: 3rem; border-radius: min(max(2rem, 3cqw), 3rem); border-radius: clamp(2rem, 3cqw, 3rem); padding: 1.6rem; padding: min(max(1rem, 1.5cqw), 1.6rem); padding: clamp(1rem, 1.5cqw, 1.6rem); } .c_card_arrow_top_left, [data-card~=dashed][data-card~=message_top_left], [data-card~=warning][data-card~=message_top_left], [data-card~=teamtailor][data-card~=message_top_left], [data-card~=transparent][data-card~=message_top_left], [data-card~=withdrawn][data-card~=message_top_left], [data-card~=rejected][data-card~=message_top_left], [data-card~=accepted][data-card~=message_top_left], [data-card~=approved][data-card~=message_top_left], [data-card~=negotiating][data-card~=message_top_left], [data-card~=requestadditions][data-card~=message_top_left], [data-card~=pending][data-card~=message_top_left], [data-card~=negative][data-card~=message_top_left], [data-card~=positive][data-card~=message_top_left], [data-card~=white][data-card~=message_top_left], [data-card~=third][data-card~=message_top_left], [data-card~=secondary][data-card~=message_top_left], [data-card~=primary][data-card~=message_top_left], .c_card_arrow_top_center, [data-card~=dashed][data-card~=message_top_center], [data-card~=warning][data-card~=message_top_center], [data-card~=teamtailor][data-card~=message_top_center], [data-card~=transparent][data-card~=message_top_center], [data-card~=withdrawn][data-card~=message_top_center], [data-card~=rejected][data-card~=message_top_center], [data-card~=accepted][data-card~=message_top_center], [data-card~=approved][data-card~=message_top_center], [data-card~=negotiating][data-card~=message_top_center], [data-card~=requestadditions][data-card~=message_top_center], [data-card~=pending][data-card~=message_top_center], [data-card~=negative][data-card~=message_top_center], [data-card~=positive][data-card~=message_top_center], [data-card~=white][data-card~=message_top_center], [data-card~=third][data-card~=message_top_center], [data-card~=secondary][data-card~=message_top_center], [data-card~=primary][data-card~=message_top_center], .c_card_arrow_left_top, [data-card~=dashed][data-card~=message_left_top], [data-card~=warning][data-card~=message_left_top], [data-card~=teamtailor][data-card~=message_left_top], [data-card~=transparent][data-card~=message_left_top], [data-card~=withdrawn][data-card~=message_left_top], [data-card~=rejected][data-card~=message_left_top], [data-card~=accepted][data-card~=message_left_top], [data-card~=approved][data-card~=message_left_top], [data-card~=negotiating][data-card~=message_left_top], [data-card~=requestadditions][data-card~=message_left_top], [data-card~=pending][data-card~=message_left_top], [data-card~=negative][data-card~=message_left_top], [data-card~=positive][data-card~=message_left_top], [data-card~=white][data-card~=message_left_top], [data-card~=third][data-card~=message_left_top], [data-card~=secondary][data-card~=message_left_top], [data-card~=primary][data-card~=message_left_top], .c_card_arrow_top_right, [data-card~=dashed][data-card~=message_top_right], [data-card~=warning][data-card~=message_top_right], [data-card~=teamtailor][data-card~=message_top_right], [data-card~=transparent][data-card~=message_top_right], [data-card~=withdrawn][data-card~=message_top_right], [data-card~=rejected][data-card~=message_top_right], [data-card~=accepted][data-card~=message_top_right], [data-card~=approved][data-card~=message_top_right], [data-card~=negotiating][data-card~=message_top_right], [data-card~=requestadditions][data-card~=message_top_right], [data-card~=pending][data-card~=message_top_right], [data-card~=negative][data-card~=message_top_right], [data-card~=positive][data-card~=message_top_right], [data-card~=white][data-card~=message_top_right], [data-card~=third][data-card~=message_top_right], [data-card~=secondary][data-card~=message_top_right], [data-card~=primary][data-card~=message_top_right], .c_card_arrow_bottom_center, [data-card~=dashed][data-card~=message_bottom_center], [data-card~=warning][data-card~=message_bottom_center], [data-card~=teamtailor][data-card~=message_bottom_center], [data-card~=transparent][data-card~=message_bottom_center], [data-card~=withdrawn][data-card~=message_bottom_center], [data-card~=rejected][data-card~=message_bottom_center], [data-card~=accepted][data-card~=message_bottom_center], [data-card~=approved][data-card~=message_bottom_center], [data-card~=negotiating][data-card~=message_bottom_center], [data-card~=requestadditions][data-card~=message_bottom_center], [data-card~=pending][data-card~=message_bottom_center], [data-card~=negative][data-card~=message_bottom_center], [data-card~=positive][data-card~=message_bottom_center], [data-card~=white][data-card~=message_bottom_center], [data-card~=third][data-card~=message_bottom_center], [data-card~=secondary][data-card~=message_bottom_center], [data-card~=primary][data-card~=message_bottom_center] { border-radius: var(--_card__arrow_radius); display: inline-block; } .c_card_arrow_top_center, [data-card~=dashed][data-card~=message_top_center], [data-card~=warning][data-card~=message_top_center], [data-card~=teamtailor][data-card~=message_top_center], [data-card~=transparent][data-card~=message_top_center], [data-card~=withdrawn][data-card~=message_top_center], [data-card~=rejected][data-card~=message_top_center], [data-card~=accepted][data-card~=message_top_center], [data-card~=approved][data-card~=message_top_center], [data-card~=negotiating][data-card~=message_top_center], [data-card~=requestadditions][data-card~=message_top_center], [data-card~=pending][data-card~=message_top_center], [data-card~=negative][data-card~=message_top_center], [data-card~=positive][data-card~=message_top_center], [data-card~=white][data-card~=message_top_center], [data-card~=third][data-card~=message_top_center], [data-card~=secondary][data-card~=message_top_center], [data-card~=primary][data-card~=message_top_center] { margin-top: 1rem; } .c_card_arrow_top_center:after, [data-card~=dashed][data-card~=message_top_center]:after, [data-card~=warning][data-card~=message_top_center]:after, [data-card~=teamtailor][data-card~=message_top_center]:after, [data-card~=transparent][data-card~=message_top_center]:after, [data-card~=withdrawn][data-card~=message_top_center]:after, [data-card~=rejected][data-card~=message_top_center]:after, [data-card~=accepted][data-card~=message_top_center]:after, [data-card~=approved][data-card~=message_top_center]:after, [data-card~=negotiating][data-card~=message_top_center]:after, [data-card~=requestadditions][data-card~=message_top_center]:after, [data-card~=pending][data-card~=message_top_center]:after, [data-card~=negative][data-card~=message_top_center]:after, [data-card~=positive][data-card~=message_top_center]:after, [data-card~=white][data-card~=message_top_center]:after, [data-card~=third][data-card~=message_top_center]:after, [data-card~=secondary][data-card~=message_top_center]:after, [data-card~=primary][data-card~=message_top_center]:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .c_card_arrow_top_center:after, [data-card~=dashed][data-card~=message_top_center]:after, [data-card~=warning][data-card~=message_top_center]:after, [data-card~=teamtailor][data-card~=message_top_center]:after, [data-card~=transparent][data-card~=message_top_center]:after, [data-card~=withdrawn][data-card~=message_top_center]:after, [data-card~=rejected][data-card~=message_top_center]:after, [data-card~=accepted][data-card~=message_top_center]:after, [data-card~=approved][data-card~=message_top_center]:after, [data-card~=negotiating][data-card~=message_top_center]:after, [data-card~=requestadditions][data-card~=message_top_center]:after, [data-card~=pending][data-card~=message_top_center]:after, [data-card~=negative][data-card~=message_top_center]:after, [data-card~=positive][data-card~=message_top_center]:after, [data-card~=white][data-card~=message_top_center]:after, [data-card~=third][data-card~=message_top_center]:after, [data-card~=secondary][data-card~=message_top_center]:after, [data-card~=primary][data-card~=message_top_center]:after { border-width: 1rem; border-bottom-color: var(--_card__bg); top: -2.05rem; right: 50%; margin-right: -1rem; } .c_card_arrow_top_left, [data-card~=dashed][data-card~=message_top_left], [data-card~=warning][data-card~=message_top_left], [data-card~=teamtailor][data-card~=message_top_left], [data-card~=transparent][data-card~=message_top_left], [data-card~=withdrawn][data-card~=message_top_left], [data-card~=rejected][data-card~=message_top_left], [data-card~=accepted][data-card~=message_top_left], [data-card~=approved][data-card~=message_top_left], [data-card~=negotiating][data-card~=message_top_left], [data-card~=requestadditions][data-card~=message_top_left], [data-card~=pending][data-card~=message_top_left], [data-card~=negative][data-card~=message_top_left], [data-card~=positive][data-card~=message_top_left], [data-card~=white][data-card~=message_top_left], [data-card~=third][data-card~=message_top_left], [data-card~=secondary][data-card~=message_top_left], [data-card~=primary][data-card~=message_top_left] { margin-top: 1rem; } .c_card_arrow_top_left:after, [data-card~=dashed][data-card~=message_top_left]:after, [data-card~=warning][data-card~=message_top_left]:after, [data-card~=teamtailor][data-card~=message_top_left]:after, [data-card~=transparent][data-card~=message_top_left]:after, [data-card~=withdrawn][data-card~=message_top_left]:after, [data-card~=rejected][data-card~=message_top_left]:after, [data-card~=accepted][data-card~=message_top_left]:after, [data-card~=approved][data-card~=message_top_left]:after, [data-card~=negotiating][data-card~=message_top_left]:after, [data-card~=requestadditions][data-card~=message_top_left]:after, [data-card~=pending][data-card~=message_top_left]:after, [data-card~=negative][data-card~=message_top_left]:after, [data-card~=positive][data-card~=message_top_left]:after, [data-card~=white][data-card~=message_top_left]:after, [data-card~=third][data-card~=message_top_left]:after, [data-card~=secondary][data-card~=message_top_left]:after, [data-card~=primary][data-card~=message_top_left]:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .c_card_arrow_top_left:after, [data-card~=dashed][data-card~=message_top_left]:after, [data-card~=warning][data-card~=message_top_left]:after, [data-card~=teamtailor][data-card~=message_top_left]:after, [data-card~=transparent][data-card~=message_top_left]:after, [data-card~=withdrawn][data-card~=message_top_left]:after, [data-card~=rejected][data-card~=message_top_left]:after, [data-card~=accepted][data-card~=message_top_left]:after, [data-card~=approved][data-card~=message_top_left]:after, [data-card~=negotiating][data-card~=message_top_left]:after, [data-card~=requestadditions][data-card~=message_top_left]:after, [data-card~=pending][data-card~=message_top_left]:after, [data-card~=negative][data-card~=message_top_left]:after, [data-card~=positive][data-card~=message_top_left]:after, [data-card~=white][data-card~=message_top_left]:after, [data-card~=third][data-card~=message_top_left]:after, [data-card~=secondary][data-card~=message_top_left]:after, [data-card~=primary][data-card~=message_top_left]:after { border-width: 1rem; border-bottom-color: var(--_card__bg); top: -2.05rem; left: 1rem; } .c_card_arrow_top_right, [data-card~=dashed][data-card~=message_top_right], [data-card~=warning][data-card~=message_top_right], [data-card~=teamtailor][data-card~=message_top_right], [data-card~=transparent][data-card~=message_top_right], [data-card~=withdrawn][data-card~=message_top_right], [data-card~=rejected][data-card~=message_top_right], [data-card~=accepted][data-card~=message_top_right], [data-card~=approved][data-card~=message_top_right], [data-card~=negotiating][data-card~=message_top_right], [data-card~=requestadditions][data-card~=message_top_right], [data-card~=pending][data-card~=message_top_right], [data-card~=negative][data-card~=message_top_right], [data-card~=positive][data-card~=message_top_right], [data-card~=white][data-card~=message_top_right], [data-card~=third][data-card~=message_top_right], [data-card~=secondary][data-card~=message_top_right], [data-card~=primary][data-card~=message_top_right] { margin-top: 1rem; } .c_card_arrow_top_right:after, [data-card~=dashed][data-card~=message_top_right]:after, [data-card~=warning][data-card~=message_top_right]:after, [data-card~=teamtailor][data-card~=message_top_right]:after, [data-card~=transparent][data-card~=message_top_right]:after, [data-card~=withdrawn][data-card~=message_top_right]:after, [data-card~=rejected][data-card~=message_top_right]:after, [data-card~=accepted][data-card~=message_top_right]:after, [data-card~=approved][data-card~=message_top_right]:after, [data-card~=negotiating][data-card~=message_top_right]:after, [data-card~=requestadditions][data-card~=message_top_right]:after, [data-card~=pending][data-card~=message_top_right]:after, [data-card~=negative][data-card~=message_top_right]:after, [data-card~=positive][data-card~=message_top_right]:after, [data-card~=white][data-card~=message_top_right]:after, [data-card~=third][data-card~=message_top_right]:after, [data-card~=secondary][data-card~=message_top_right]:after, [data-card~=primary][data-card~=message_top_right]:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .c_card_arrow_top_right:after, [data-card~=dashed][data-card~=message_top_right]:after, [data-card~=warning][data-card~=message_top_right]:after, [data-card~=teamtailor][data-card~=message_top_right]:after, [data-card~=transparent][data-card~=message_top_right]:after, [data-card~=withdrawn][data-card~=message_top_right]:after, [data-card~=rejected][data-card~=message_top_right]:after, [data-card~=accepted][data-card~=message_top_right]:after, [data-card~=approved][data-card~=message_top_right]:after, [data-card~=negotiating][data-card~=message_top_right]:after, [data-card~=requestadditions][data-card~=message_top_right]:after, [data-card~=pending][data-card~=message_top_right]:after, [data-card~=negative][data-card~=message_top_right]:after, [data-card~=positive][data-card~=message_top_right]:after, [data-card~=white][data-card~=message_top_right]:after, [data-card~=third][data-card~=message_top_right]:after, [data-card~=secondary][data-card~=message_top_right]:after, [data-card~=primary][data-card~=message_top_right]:after { border-width: 1rem; border-bottom-color: var(--_card__bg); top: -2.05rem; right: 1rem; } .c_card_arrow_left_top, [data-card~=dashed][data-card~=message_left_top], [data-card~=warning][data-card~=message_left_top], [data-card~=teamtailor][data-card~=message_left_top], [data-card~=transparent][data-card~=message_left_top], [data-card~=withdrawn][data-card~=message_left_top], [data-card~=rejected][data-card~=message_left_top], [data-card~=accepted][data-card~=message_left_top], [data-card~=approved][data-card~=message_left_top], [data-card~=negotiating][data-card~=message_left_top], [data-card~=requestadditions][data-card~=message_left_top], [data-card~=pending][data-card~=message_left_top], [data-card~=negative][data-card~=message_left_top], [data-card~=positive][data-card~=message_left_top], [data-card~=white][data-card~=message_left_top], [data-card~=third][data-card~=message_left_top], [data-card~=secondary][data-card~=message_left_top], [data-card~=primary][data-card~=message_left_top] { margin-left: 1rem; } .c_card_arrow_left_top:after, [data-card~=dashed][data-card~=message_left_top]:after, [data-card~=warning][data-card~=message_left_top]:after, [data-card~=teamtailor][data-card~=message_left_top]:after, [data-card~=transparent][data-card~=message_left_top]:after, [data-card~=withdrawn][data-card~=message_left_top]:after, [data-card~=rejected][data-card~=message_left_top]:after, [data-card~=accepted][data-card~=message_left_top]:after, [data-card~=approved][data-card~=message_left_top]:after, [data-card~=negotiating][data-card~=message_left_top]:after, [data-card~=requestadditions][data-card~=message_left_top]:after, [data-card~=pending][data-card~=message_left_top]:after, [data-card~=negative][data-card~=message_left_top]:after, [data-card~=positive][data-card~=message_left_top]:after, [data-card~=white][data-card~=message_left_top]:after, [data-card~=third][data-card~=message_left_top]:after, [data-card~=secondary][data-card~=message_left_top]:after, [data-card~=primary][data-card~=message_left_top]:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .c_card_arrow_left_top:after, [data-card~=dashed][data-card~=message_left_top]:after, [data-card~=warning][data-card~=message_left_top]:after, [data-card~=teamtailor][data-card~=message_left_top]:after, [data-card~=transparent][data-card~=message_left_top]:after, [data-card~=withdrawn][data-card~=message_left_top]:after, [data-card~=rejected][data-card~=message_left_top]:after, [data-card~=accepted][data-card~=message_left_top]:after, [data-card~=approved][data-card~=message_left_top]:after, [data-card~=negotiating][data-card~=message_left_top]:after, [data-card~=requestadditions][data-card~=message_left_top]:after, [data-card~=pending][data-card~=message_left_top]:after, [data-card~=negative][data-card~=message_left_top]:after, [data-card~=positive][data-card~=message_left_top]:after, [data-card~=white][data-card~=message_left_top]:after, [data-card~=third][data-card~=message_left_top]:after, [data-card~=secondary][data-card~=message_left_top]:after, [data-card~=primary][data-card~=message_left_top]:after { border-width: 1rem; border-right-color: var(--_card__bg); left: -2rem; top: 1rem; } .c_card_arrow_bottom_center:after, [data-card~=dashed][data-card~=message_bottom_center]:after, [data-card~=warning][data-card~=message_bottom_center]:after, [data-card~=teamtailor][data-card~=message_bottom_center]:after, [data-card~=transparent][data-card~=message_bottom_center]:after, [data-card~=withdrawn][data-card~=message_bottom_center]:after, [data-card~=rejected][data-card~=message_bottom_center]:after, [data-card~=accepted][data-card~=message_bottom_center]:after, [data-card~=approved][data-card~=message_bottom_center]:after, [data-card~=negotiating][data-card~=message_bottom_center]:after, [data-card~=requestadditions][data-card~=message_bottom_center]:after, [data-card~=pending][data-card~=message_bottom_center]:after, [data-card~=negative][data-card~=message_bottom_center]:after, [data-card~=positive][data-card~=message_bottom_center]:after, [data-card~=white][data-card~=message_bottom_center]:after, [data-card~=third][data-card~=message_bottom_center]:after, [data-card~=secondary][data-card~=message_bottom_center]:after, [data-card~=primary][data-card~=message_bottom_center]:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .c_card_arrow_bottom_center:after, [data-card~=dashed][data-card~=message_bottom_center]:after, [data-card~=warning][data-card~=message_bottom_center]:after, [data-card~=teamtailor][data-card~=message_bottom_center]:after, [data-card~=transparent][data-card~=message_bottom_center]:after, [data-card~=withdrawn][data-card~=message_bottom_center]:after, [data-card~=rejected][data-card~=message_bottom_center]:after, [data-card~=accepted][data-card~=message_bottom_center]:after, [data-card~=approved][data-card~=message_bottom_center]:after, [data-card~=negotiating][data-card~=message_bottom_center]:after, [data-card~=requestadditions][data-card~=message_bottom_center]:after, [data-card~=pending][data-card~=message_bottom_center]:after, [data-card~=negative][data-card~=message_bottom_center]:after, [data-card~=positive][data-card~=message_bottom_center]:after, [data-card~=white][data-card~=message_bottom_center]:after, [data-card~=third][data-card~=message_bottom_center]:after, [data-card~=secondary][data-card~=message_bottom_center]:after, [data-card~=primary][data-card~=message_bottom_center]:after { border-width: 1rem; border-top-color: var(--_card__bg); bottom: -2rem; right: 50%; margin-right: -1rem; } .c_card_outlined, [data-card~=dashed][data-card~=outlined], [data-card~=warning][data-card~=outlined], [data-card~=teamtailor][data-card~=outlined], [data-card~=transparent][data-card~=outlined], [data-card~=withdrawn][data-card~=outlined], [data-card~=rejected][data-card~=outlined], [data-card~=accepted][data-card~=outlined], [data-card~=approved][data-card~=outlined], [data-card~=negotiating][data-card~=outlined], [data-card~=requestadditions][data-card~=outlined], [data-card~=pending][data-card~=outlined], [data-card~=negative][data-card~=outlined], [data-card~=positive][data-card~=outlined], [data-card~=white][data-card~=outlined], [data-card~=third][data-card~=outlined], [data-card~=secondary][data-card~=outlined], [data-card~=primary][data-card~=outlined], .c_card_outlined_onhover:hover, [data-card~=dashed][data-card~=outlined_onhover]:hover, [data-card~=warning][data-card~=outlined_onhover]:hover, [data-card~=teamtailor][data-card~=outlined_onhover]:hover, [data-card~=transparent][data-card~=outlined_onhover]:hover, [data-card~=withdrawn][data-card~=outlined_onhover]:hover, [data-card~=rejected][data-card~=outlined_onhover]:hover, [data-card~=accepted][data-card~=outlined_onhover]:hover, [data-card~=approved][data-card~=outlined_onhover]:hover, [data-card~=negotiating][data-card~=outlined_onhover]:hover, [data-card~=requestadditions][data-card~=outlined_onhover]:hover, [data-card~=pending][data-card~=outlined_onhover]:hover, [data-card~=negative][data-card~=outlined_onhover]:hover, [data-card~=positive][data-card~=outlined_onhover]:hover, [data-card~=white][data-card~=outlined_onhover]:hover, [data-card~=third][data-card~=outlined_onhover]:hover, [data-card~=secondary][data-card~=outlined_onhover]:hover, [data-card~=primary][data-card~=outlined_onhover]:hover { transition: border 0.3s; border: 0.1rem solid var(--card__border_color); } .c_card_outlined, [data-card~=dashed][data-card~=outlined], [data-card~=warning][data-card~=outlined], [data-card~=teamtailor][data-card~=outlined], [data-card~=transparent][data-card~=outlined], [data-card~=withdrawn][data-card~=outlined], [data-card~=rejected][data-card~=outlined], [data-card~=accepted][data-card~=outlined], [data-card~=approved][data-card~=outlined], [data-card~=negotiating][data-card~=outlined], [data-card~=requestadditions][data-card~=outlined], [data-card~=pending][data-card~=outlined], [data-card~=negative][data-card~=outlined], [data-card~=positive][data-card~=outlined], [data-card~=white][data-card~=outlined], [data-card~=third][data-card~=outlined], [data-card~=secondary][data-card~=outlined], [data-card~=primary][data-card~=outlined] { --card__bg: transparent; } .c_card_dashed, [data-card~=dashed][data-card~=dashed], [data-card~=dashed], [data-card~=warning][data-card~=dashed], [data-card~=teamtailor][data-card~=dashed], [data-card~=transparent][data-card~=dashed], [data-card~=withdrawn][data-card~=dashed], [data-card~=rejected][data-card~=dashed], [data-card~=accepted][data-card~=dashed], [data-card~=approved][data-card~=dashed], [data-card~=negotiating][data-card~=dashed], [data-card~=requestadditions][data-card~=dashed], [data-card~=pending][data-card~=dashed], [data-card~=negative][data-card~=dashed], [data-card~=positive][data-card~=dashed], [data-card~=white][data-card~=dashed], [data-card~=third][data-card~=dashed], [data-card~=secondary][data-card~=dashed], [data-card~=primary][data-card~=dashed] { --card__bg: transparent; border: 0.1rem dashed var(--card__border_color); } .c_card_dashed_with_animation_on_hover { transition: transform 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .c_card_dashed_with_animation_on_hover:hover { box-shadow: 0 0 0.05rem rgba(121, 92, 52, 0.03), 0 0 0.5rem rgba(121, 92, 52, 0.05), 0 0 0.8rem rgba(121, 92, 52, 0.12); transform: scale(1.01); --card__bg: var(--white-bg-dark-special); } .c_card_sm, [data-card~=sm], .c_card .app_box_plain_small, .app_sidebar_right #PersonalIdentityContainer .app_box_plain_small, [data-card] .app_box_plain_small { --card__padding: clamp(0.2rem, 0.5vw + -0.05rem, 0.4rem) clamp(0.6rem, 0.5vw + 0.35rem, 0.8rem); --card__radius: clamp(0.8rem, 1vw + 0.3rem, 1.2rem); } .c_card_sm.c_card_shadow, .c_card_shadow[data-card~=sm], .c_card .app_box_plain_small.c_card_shadow, .app_sidebar_right #PersonalIdentityContainer .app_box_plain_small.c_card_shadow, [data-card] .app_box_plain_small.c_card_shadow { --card__shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); } .c_card_md, [data-card~=md] { --card__padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); --card__radius: clamp(1.5rem, 1.25vw + 0.88rem, 2rem); } .c_card_md.c_card_shadow, .c_card_shadow[data-card~=md] { --card__shadow: 0 0 0.05rem rgba(121, 92, 52, 0.03), 0 0 0.5rem rgba(121, 92, 52, 0.05), 0 0 0.8rem rgba(121, 92, 52, 0.12); } .c_card_lg, [data-card~=lg] { --card__padding: clamp(1.6rem, 1vw + 1.1rem, 2rem); --card__radius: clamp(2rem, 2.5vw + 0.75rem, 3rem); } .c_card_lg.c_card_shadow, .c_card_shadow[data-card~=lg] { --card__shadow: 0px 0px 0.7px rgba(0, 0, 0, 0.017), 0px 0px 1.9px rgba(0, 0, 0, 0.025), 0px 0px 4.5px rgba(0, 0, 0, 0.033), 0px 0px 15px rgba(0, 0, 0, 0.05); } .c_card_shadow, .c_card[data-card~=shadow], .app_sidebar_right [data-card~=shadow]#PersonalIdentityContainer, [data-card~=shadow][data-card] { --card__shadow: 0px 0px 0.7px rgba(0, 0, 0, 0.017), 0px 0px 1.9px rgba(0, 0, 0, 0.025), 0px 0px 4.5px rgba(0, 0, 0, 0.033), 0px 0px 15px rgba(0, 0, 0, 0.05); } .c_card_primary, [data-card~=primary] { --card__bg: var(--primary-bg); --card__color: var(--primary-color); --card__border_color: var(--primary-color); } .c_card_primary [data-font-size=large][data-font-fluid=parent], [data-card~=primary] [data-font-size=large][data-font-fluid=parent] { --card__color: var(--primary-color); } .c_card_secondary, [data-card~=secondary] { --card__bg: var(--third-ongrey-bg); --card__color: var(--third-ongrey-color); --card__border_color: var(--secondary-color); --card__headline_color: var(--secondary-color-hover); } .c_card_secondary [data-font-variant=secondary], [data-card~=secondary] [data-font-variant=secondary], .c_card_secondary .th_font_color_secondary, .c_card_secondary .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_secondary .xdsoft_time_box > div > div, .c_card_secondary .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_secondary .xdsoft_label > .xdsoft_select, .c_card_secondary .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_secondary td, .c_card_secondary .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_secondary th, [data-card~=secondary] .th_font_color_secondary, [data-card~=secondary] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=secondary] .xdsoft_time_box > div > div, [data-card~=secondary] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=secondary] .xdsoft_label > .xdsoft_select, [data-card~=secondary] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=secondary] td, [data-card~=secondary] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=secondary] th { color: var(--secondary-color-on-secondary); } .c_card_third, [data-card~=third], .c_card_pending, [data-card~=pending] { --card__bg: var(--transparent-2xs); --card__color: var(--font-color-primary); --card__border_color: var(--transparent-sm); } .c_card_warning, [data-card~=warning] { --card__bg: var(--warning-bg); --card__color: var(--font-color-primary); --card__border_color: var(--warning-color); } .c_card_white, .p_publicprofile_block_item, [data-card~=white], .c_card .app_box_plain_hollow, .app_sidebar_right #PersonalIdentityContainer .app_box_plain_hollow, [data-card] .app_box_plain_hollow { --card__bg: var(--white-bg-dark-special); --card__color: var(--white-color); --card__border_color: var(--transparent-sm); } .c_card_transparent, [data-card~=transparent] { --card__bg: var(--transparent-3xs); --card__color: var(--white-color); --card__border_color: var(--transparent-sm); } .c_card_positive, [data-card~=accepted], [data-card~=positive], .c_card_accepted { --card__bg: var(--positive-bg); --card__color: var(--positive-color); --card__border_color: var(--positive-bg-60); } .c_card_positive [data-font-variant=secondary], [data-card~=accepted] [data-font-variant=secondary], [data-card~=positive] [data-font-variant=secondary], .c_card_positive .th_font_color_secondary, .c_card_positive .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_positive .xdsoft_time_box > div > div, .c_card_positive .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_positive .xdsoft_label > .xdsoft_select, .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive td, .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive th, [data-card~=accepted] .th_font_color_secondary, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=accepted] .xdsoft_time_box > div > div, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=accepted] .xdsoft_label > .xdsoft_select, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] td, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] th, [data-card~=positive] .th_font_color_secondary, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=positive] .xdsoft_time_box > div > div, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=positive] .xdsoft_label > .xdsoft_select, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] td, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] th, .c_card_accepted [data-font-variant=secondary], .c_card_accepted .th_font_color_secondary, .c_card_accepted .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_accepted .xdsoft_time_box > div > div, .c_card_accepted .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_accepted .xdsoft_label > .xdsoft_select, .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted td, .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted th { color: var(--positive-color-secondary); } .c_card_positive .c_card_white [data-font-variant=secondary], .c_card_positive .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=accepted] .c_card_white [data-font-variant=secondary], [data-card~=accepted] .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=positive] .c_card_white [data-font-variant=secondary], [data-card~=positive] .p_publicprofile_block_item [data-font-variant=secondary], .c_card_positive [data-card~=white] [data-font-variant=secondary], [data-card~=accepted] [data-card~=white] [data-font-variant=secondary], [data-card~=positive] [data-card~=white] [data-font-variant=secondary], .c_card_positive .c_card_white.th_font_color_secondary, .c_card_positive .th_font_color_secondary.p_publicprofile_block_item, .c_card_positive .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_positive .xdsoft_time_box > div > div.c_card_white, .c_card_positive .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_positive .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_positive .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_positive .xdsoft_label > .c_card_white.xdsoft_select, .c_card_positive .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_positive .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive td.c_card_white, .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive td.p_publicprofile_block_item, .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive th.c_card_white, .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive th.p_publicprofile_block_item, [data-card~=accepted] .c_card_white.th_font_color_secondary, [data-card~=accepted] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=accepted] .xdsoft_time_box > div > div.c_card_white, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=accepted] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=accepted] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=accepted] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] td.c_card_white, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] td.p_publicprofile_block_item, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] th.c_card_white, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] th.p_publicprofile_block_item, [data-card~=positive] .c_card_white.th_font_color_secondary, [data-card~=positive] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=positive] .xdsoft_time_box > div > div.c_card_white, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=positive] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=positive] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=positive] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] td.c_card_white, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] td.p_publicprofile_block_item, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] th.c_card_white, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] th.p_publicprofile_block_item, .c_card_positive .th_font_color_secondary[data-card~=white], .c_card_positive .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_positive .xdsoft_time_box > div > div[data-card~=white], .c_card_positive .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_positive .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive td[data-card~=white], .c_card_positive .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_positive th[data-card~=white], [data-card~=accepted] .th_font_color_secondary[data-card~=white], [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=accepted] .xdsoft_time_box > div > div[data-card~=white], [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=accepted] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] td[data-card~=white], [data-card~=accepted] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=accepted] th[data-card~=white], [data-card~=positive] .th_font_color_secondary[data-card~=white], [data-card~=positive] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=positive] .xdsoft_time_box > div > div[data-card~=white], [data-card~=positive] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=positive] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] td[data-card~=white], [data-card~=positive] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=positive] th[data-card~=white], .c_card_accepted .c_card_white [data-font-variant=secondary], .c_card_accepted .p_publicprofile_block_item [data-font-variant=secondary], .c_card_accepted [data-card~=white] [data-font-variant=secondary], .c_card_accepted .c_card_white.th_font_color_secondary, .c_card_accepted .th_font_color_secondary.p_publicprofile_block_item, .c_card_accepted .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_accepted .xdsoft_time_box > div > div.c_card_white, .c_card_accepted .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_accepted .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_accepted .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_accepted .xdsoft_label > .c_card_white.xdsoft_select, .c_card_accepted .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_accepted .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted td.c_card_white, .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted td.p_publicprofile_block_item, .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted th.c_card_white, .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted th.p_publicprofile_block_item, .c_card_accepted .th_font_color_secondary[data-card~=white], .c_card_accepted .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_accepted .xdsoft_time_box > div > div[data-card~=white], .c_card_accepted .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_accepted .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted td[data-card~=white], .c_card_accepted .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_accepted th[data-card~=white] { color: var(--transparent-lg); } .c_card_negative, [data-card~=rejected], [data-card~=negative], .c_card_rejected { --card__bg: var(--negative-bg); --card__color: var(--negative-color); --card__border_color: var(--negative-bg); } .c_card_negative [data-font-variant=secondary], [data-card~=rejected] [data-font-variant=secondary], [data-card~=negative] [data-font-variant=secondary], .c_card_negative .th_font_color_secondary, .c_card_negative .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_negative .xdsoft_time_box > div > div, .c_card_negative .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_negative .xdsoft_label > .xdsoft_select, .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative td, .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative th, [data-card~=rejected] .th_font_color_secondary, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=rejected] .xdsoft_time_box > div > div, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=rejected] .xdsoft_label > .xdsoft_select, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] td, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] th, [data-card~=negative] .th_font_color_secondary, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negative] .xdsoft_time_box > div > div, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=negative] .xdsoft_label > .xdsoft_select, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] td, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] th, .c_card_rejected [data-font-variant=secondary], .c_card_rejected .th_font_color_secondary, .c_card_rejected .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_rejected .xdsoft_time_box > div > div, .c_card_rejected .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_rejected .xdsoft_label > .xdsoft_select, .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected td, .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected th { color: var(--negative-color-secondary); } .c_card_negative .c_card_white [data-font-variant=secondary], .c_card_negative .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=rejected] .c_card_white [data-font-variant=secondary], [data-card~=rejected] .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=negative] .c_card_white [data-font-variant=secondary], [data-card~=negative] .p_publicprofile_block_item [data-font-variant=secondary], .c_card_negative [data-card~=white] [data-font-variant=secondary], [data-card~=rejected] [data-card~=white] [data-font-variant=secondary], [data-card~=negative] [data-card~=white] [data-font-variant=secondary], .c_card_negative .c_card_white.th_font_color_secondary, .c_card_negative .th_font_color_secondary.p_publicprofile_block_item, .c_card_negative .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_negative .xdsoft_time_box > div > div.c_card_white, .c_card_negative .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_negative .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_negative .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_negative .xdsoft_label > .c_card_white.xdsoft_select, .c_card_negative .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_negative .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative td.c_card_white, .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative td.p_publicprofile_block_item, .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative th.c_card_white, .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative th.p_publicprofile_block_item, [data-card~=rejected] .c_card_white.th_font_color_secondary, [data-card~=rejected] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=rejected] .xdsoft_time_box > div > div.c_card_white, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=rejected] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=rejected] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=rejected] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] td.c_card_white, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] td.p_publicprofile_block_item, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] th.c_card_white, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] th.p_publicprofile_block_item, [data-card~=negative] .c_card_white.th_font_color_secondary, [data-card~=negative] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negative] .xdsoft_time_box > div > div.c_card_white, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negative] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=negative] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=negative] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] td.c_card_white, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] td.p_publicprofile_block_item, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] th.c_card_white, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] th.p_publicprofile_block_item, .c_card_negative .th_font_color_secondary[data-card~=white], .c_card_negative .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_negative .xdsoft_time_box > div > div[data-card~=white], .c_card_negative .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_negative .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative td[data-card~=white], .c_card_negative .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_negative th[data-card~=white], [data-card~=rejected] .th_font_color_secondary[data-card~=white], [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=rejected] .xdsoft_time_box > div > div[data-card~=white], [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=rejected] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] td[data-card~=white], [data-card~=rejected] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=rejected] th[data-card~=white], [data-card~=negative] .th_font_color_secondary[data-card~=white], [data-card~=negative] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negative] .xdsoft_time_box > div > div[data-card~=white], [data-card~=negative] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=negative] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] td[data-card~=white], [data-card~=negative] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negative] th[data-card~=white], .c_card_rejected .c_card_white [data-font-variant=secondary], .c_card_rejected .p_publicprofile_block_item [data-font-variant=secondary], .c_card_rejected [data-card~=white] [data-font-variant=secondary], .c_card_rejected .c_card_white.th_font_color_secondary, .c_card_rejected .th_font_color_secondary.p_publicprofile_block_item, .c_card_rejected .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_rejected .xdsoft_time_box > div > div.c_card_white, .c_card_rejected .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_rejected .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_rejected .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_rejected .xdsoft_label > .c_card_white.xdsoft_select, .c_card_rejected .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_rejected .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected td.c_card_white, .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected td.p_publicprofile_block_item, .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected th.c_card_white, .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected th.p_publicprofile_block_item, .c_card_rejected .th_font_color_secondary[data-card~=white], .c_card_rejected .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_rejected .xdsoft_time_box > div > div[data-card~=white], .c_card_rejected .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_rejected .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected td[data-card~=white], .c_card_rejected .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_rejected th[data-card~=white] { color: var(--transparent-lg); } .c_card_additions, [data-card~=negotiating], [data-card~=requestadditions] { --card__bg: var(--third-bg); --card__color: var(--third-color); --card__border_color: var(--third-bg); } .c_card_additions [data-font-variant=secondary], [data-card~=negotiating] [data-font-variant=secondary], [data-card~=requestadditions] [data-font-variant=secondary], .c_card_additions .th_font_color_secondary, .c_card_additions .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_additions .xdsoft_time_box > div > div, .c_card_additions .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_additions .xdsoft_label > .xdsoft_select, .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions td, .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions th, [data-card~=negotiating] .th_font_color_secondary, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negotiating] .xdsoft_time_box > div > div, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=negotiating] .xdsoft_label > .xdsoft_select, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] td, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] th, [data-card~=requestadditions] .th_font_color_secondary, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=requestadditions] .xdsoft_time_box > div > div, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=requestadditions] .xdsoft_label > .xdsoft_select, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] td, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] th { color: var(--third-color-secondary); } .c_card_additions .c_card_white [data-font-variant=secondary], .c_card_additions .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=negotiating] .c_card_white [data-font-variant=secondary], [data-card~=negotiating] .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=requestadditions] .c_card_white [data-font-variant=secondary], [data-card~=requestadditions] .p_publicprofile_block_item [data-font-variant=secondary], .c_card_additions [data-card~=white] [data-font-variant=secondary], [data-card~=negotiating] [data-card~=white] [data-font-variant=secondary], [data-card~=requestadditions] [data-card~=white] [data-font-variant=secondary], .c_card_additions .c_card_white.th_font_color_secondary, .c_card_additions .th_font_color_secondary.p_publicprofile_block_item, .c_card_additions .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_additions .xdsoft_time_box > div > div.c_card_white, .c_card_additions .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_additions .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_additions .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_additions .xdsoft_label > .c_card_white.xdsoft_select, .c_card_additions .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_additions .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions td.c_card_white, .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions td.p_publicprofile_block_item, .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions th.c_card_white, .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions th.p_publicprofile_block_item, [data-card~=negotiating] .c_card_white.th_font_color_secondary, [data-card~=negotiating] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negotiating] .xdsoft_time_box > div > div.c_card_white, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negotiating] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=negotiating] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=negotiating] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] td.c_card_white, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] td.p_publicprofile_block_item, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] th.c_card_white, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] th.p_publicprofile_block_item, [data-card~=requestadditions] .c_card_white.th_font_color_secondary, [data-card~=requestadditions] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=requestadditions] .xdsoft_time_box > div > div.c_card_white, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=requestadditions] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=requestadditions] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=requestadditions] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] td.c_card_white, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] td.p_publicprofile_block_item, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] th.c_card_white, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] th.p_publicprofile_block_item, .c_card_additions .th_font_color_secondary[data-card~=white], .c_card_additions .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_additions .xdsoft_time_box > div > div[data-card~=white], .c_card_additions .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_additions .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions td[data-card~=white], .c_card_additions .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_additions th[data-card~=white], [data-card~=negotiating] .th_font_color_secondary[data-card~=white], [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=negotiating] .xdsoft_time_box > div > div[data-card~=white], [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=negotiating] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] td[data-card~=white], [data-card~=negotiating] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=negotiating] th[data-card~=white], [data-card~=requestadditions] .th_font_color_secondary[data-card~=white], [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=requestadditions] .xdsoft_time_box > div > div[data-card~=white], [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=requestadditions] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] td[data-card~=white], [data-card~=requestadditions] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=requestadditions] th[data-card~=white] { color: var(--transparent-lg); } .c_card_blue, [data-card~=approved], .c_card_approved { --card__bg: var(--blue-bg); --card__color: var(--blue-color); --card__border_color: var(--blue-bg); } .c_card_blue [data-font-variant=secondary], [data-card~=approved] [data-font-variant=secondary], .c_card_blue .th_font_color_secondary, .c_card_blue .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_blue .xdsoft_time_box > div > div, .c_card_blue .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_blue .xdsoft_label > .xdsoft_select, .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue td, .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue th, [data-card~=approved] .th_font_color_secondary, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=approved] .xdsoft_time_box > div > div, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=approved] .xdsoft_label > .xdsoft_select, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] td, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] th, .c_card_approved [data-font-variant=secondary], .c_card_approved .th_font_color_secondary, .c_card_approved .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_approved .xdsoft_time_box > div > div, .c_card_approved .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_approved .xdsoft_label > .xdsoft_select, .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved td, .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved th { color: var(--blue-color-secondary); } .c_card_blue .c_card_white [data-font-variant=secondary], .c_card_blue .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=approved] .c_card_white [data-font-variant=secondary], [data-card~=approved] .p_publicprofile_block_item [data-font-variant=secondary], .c_card_blue [data-card~=white] [data-font-variant=secondary], [data-card~=approved] [data-card~=white] [data-font-variant=secondary], .c_card_blue .c_card_white.th_font_color_secondary, .c_card_blue .th_font_color_secondary.p_publicprofile_block_item, .c_card_blue .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_blue .xdsoft_time_box > div > div.c_card_white, .c_card_blue .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_blue .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_blue .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_blue .xdsoft_label > .c_card_white.xdsoft_select, .c_card_blue .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_blue .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue td.c_card_white, .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue td.p_publicprofile_block_item, .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue th.c_card_white, .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue th.p_publicprofile_block_item, [data-card~=approved] .c_card_white.th_font_color_secondary, [data-card~=approved] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=approved] .xdsoft_time_box > div > div.c_card_white, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=approved] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=approved] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=approved] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] td.c_card_white, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] td.p_publicprofile_block_item, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] th.c_card_white, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] th.p_publicprofile_block_item, .c_card_blue .th_font_color_secondary[data-card~=white], .c_card_blue .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_blue .xdsoft_time_box > div > div[data-card~=white], .c_card_blue .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_blue .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue td[data-card~=white], .c_card_blue .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_blue th[data-card~=white], [data-card~=approved] .th_font_color_secondary[data-card~=white], [data-card~=approved] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=approved] .xdsoft_time_box > div > div[data-card~=white], [data-card~=approved] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=approved] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] td[data-card~=white], [data-card~=approved] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=approved] th[data-card~=white], .c_card_approved .c_card_white [data-font-variant=secondary], .c_card_approved .p_publicprofile_block_item [data-font-variant=secondary], .c_card_approved [data-card~=white] [data-font-variant=secondary], .c_card_approved .c_card_white.th_font_color_secondary, .c_card_approved .th_font_color_secondary.p_publicprofile_block_item, .c_card_approved .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_approved .xdsoft_time_box > div > div.c_card_white, .c_card_approved .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_approved .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_approved .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_approved .xdsoft_label > .c_card_white.xdsoft_select, .c_card_approved .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_approved .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved td.c_card_white, .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved td.p_publicprofile_block_item, .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved th.c_card_white, .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved th.p_publicprofile_block_item, .c_card_approved .th_font_color_secondary[data-card~=white], .c_card_approved .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_approved .xdsoft_time_box > div > div[data-card~=white], .c_card_approved .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_approved .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved td[data-card~=white], .c_card_approved .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_approved th[data-card~=white] { color: var(--transparent-lg); } .c_card_withdrawn, [data-card~=withdrawn] { --card__bg: var(--transparent-xl); --card__color: var(--dark); --card__border_color: var(--transparent-xl); } .c_card_withdrawn [data-font-variant=secondary], [data-card~=withdrawn] [data-font-variant=secondary], .c_card_withdrawn .th_font_color_secondary, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_withdrawn .xdsoft_time_box > div > div, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker .c_card_withdrawn .xdsoft_label > .xdsoft_select, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn td, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn th, [data-card~=withdrawn] .th_font_color_secondary, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=withdrawn] .xdsoft_time_box > div > div, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select, .xdsoft_datetimepicker [data-card~=withdrawn] .xdsoft_label > .xdsoft_select, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] td, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar th, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] th { color: var(--transparent-lg-reverse); } .c_card_withdrawn .c_card_white [data-font-variant=secondary], .c_card_withdrawn .p_publicprofile_block_item [data-font-variant=secondary], [data-card~=withdrawn] .c_card_white [data-font-variant=secondary], [data-card~=withdrawn] .p_publicprofile_block_item [data-font-variant=secondary], .c_card_withdrawn [data-card~=white] [data-font-variant=secondary], [data-card~=withdrawn] [data-card~=white] [data-font-variant=secondary], .c_card_withdrawn .c_card_white.th_font_color_secondary, .c_card_withdrawn .th_font_color_secondary.p_publicprofile_block_item, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_withdrawn .xdsoft_time_box > div > div.c_card_white, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker .c_card_withdrawn .xdsoft_time_box > div > div.p_publicprofile_block_item, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker .c_card_withdrawn .xdsoft_label > .c_card_white.xdsoft_select, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker .c_card_withdrawn .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn td.c_card_white, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn td.p_publicprofile_block_item, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn th.c_card_white, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn th.p_publicprofile_block_item, [data-card~=withdrawn] .c_card_white.th_font_color_secondary, [data-card~=withdrawn] .th_font_color_secondary.p_publicprofile_block_item, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.c_card_white, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=withdrawn] .xdsoft_time_box > div > div.c_card_white, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=withdrawn] .xdsoft_time_box > div > div.p_publicprofile_block_item, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_label > .c_card_white.xdsoft_select, .xdsoft_datetimepicker [data-card~=withdrawn] .xdsoft_label > .c_card_white.xdsoft_select, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, .xdsoft_datetimepicker [data-card~=withdrawn] .xdsoft_label > .p_publicprofile_block_item.xdsoft_select, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar td.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] td.c_card_white, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar td.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] td.p_publicprofile_block_item, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar th.c_card_white, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] th.c_card_white, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar th.p_publicprofile_block_item, .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] th.p_publicprofile_block_item, .c_card_withdrawn .th_font_color_secondary[data-card~=white], .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker .c_card_withdrawn .xdsoft_time_box > div > div[data-card~=white], .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker .c_card_withdrawn .xdsoft_label > [data-card~=white].xdsoft_select, .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn td[data-card~=white], .c_card_withdrawn .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar .c_card_withdrawn th[data-card~=white], [data-card~=withdrawn] .th_font_color_secondary[data-card~=white], [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div[data-card~=white], .xdsoft_datetimepicker .xdsoft_timepicker [data-card~=withdrawn] .xdsoft_time_box > div > div[data-card~=white], [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_label > [data-card~=white].xdsoft_select, .xdsoft_datetimepicker [data-card~=withdrawn] .xdsoft_label > [data-card~=white].xdsoft_select, [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar td[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] td[data-card~=white], [data-card~=withdrawn] .xdsoft_datetimepicker .xdsoft_calendar th[data-card~=white], .xdsoft_datetimepicker .xdsoft_calendar [data-card~=withdrawn] th[data-card~=white] { color: var(--transparent-lg); } .c_card_teamtailor, [data-card~=teamtailor] { --card__bg: var(--teamtailor-bg); --card__color: var(--teamtailor-color); --card__border_color: var(--teamtailor-bg); } .c_card_skeleton { --_skeleton__bg: var(--skeleton__bg, var(--primary-bg-20)); --card__bg: var(--primary-bg-10); } .c_card_skeleton__third { --skeleton__bg: var(--third-bg); } .c_card_skeleton__icon { background-color: var(--_skeleton__bg); width: 4rem; height: 4rem; border-radius: 2rem; } .c_card_skeleton__title { width: 100%; } .c_card_skeleton__title > div { background-color: var(--_skeleton__bg); width: 100%; height: 3rem; border-radius: 1rem; margin-bottom: 0.5rem; } .c_card_skeleton__title > div:last-of-type { margin-bottom: 0; } .c_card_skeleton__subtitle { background-color: var(--_skeleton__bg); width: 100%; height: 1.5rem; border-radius: 0.7rem; margin-bottom: 0.5rem; } .c_card_skeleton__number { background-color: var(--_skeleton__bg); width: 100%; height: 6rem; border-radius: 1.5rem; } .c_card_skeleton__button { background-color: var(--_skeleton__bg); width: 12rem; height: 4rem; border-radius: 1.5rem; } .c_card_skeleton__tags { background-color: var(--_skeleton__bg); width: 7rem; height: 3rem; border-radius: 1.5rem; } .c_card_skeleton_small .c_card_skeleton__icon { width: 6rem; height: 6rem; } .c_card_skeleton_small .c_card_skeleton__title { width: 100%; height: 3.8rem; border-radius: 1rem; margin-bottom: 0.5rem; } .c_card_skeleton_small .c_card_skeleton__subtitle { width: 100%; height: 1.5rem; border-radius: 0.7rem; margin-bottom: 0.5rem; } .c_card_skeleton_small .c_card_skeleton__tags { background-color: var(--_skeleton__bg); width: 5.8rem; height: 1.8rem; border-radius: 1rem; } .c_card_skeleton_small .c_card_skeleton__actions { background-color: var(--_skeleton__bg); width: 1.8rem; height: 1.8rem; border-radius: 1rem; } .c_card_skeleton_expert_image, .c_card_skeleton_expert_text_long, .c_card_skeleton_expert_text_short { background: linear-gradient(90deg, var(--transparent-xs), var(--transparent-xs), var(--transparent-xs)); } .c_card_skeleton_expert_badge { background: linear-gradient(90deg, var(--third-bg), var(--transparent-2xs), var(--third-bg)); } .c_card_skeleton_expert_image { width: clamp(2.45rem, 20cqw, 10rem); height: clamp(2.45rem, 20cqw, 10rem); border-radius: 37%; } .c_card_skeleton_expert_text_long { width: 17rem; height: 1.5rem; border-radius: 0.75rem; display: inline-flex; } .c_card_skeleton_expert_text_short { width: 6rem; height: 1.5rem; border-radius: 0.75rem; display: inline-flex; } .c_card_skeleton_expert_badge { color: var(--third-color); width: 9rem; height: 1.5rem; border-radius: 0.75rem; display: inline-flex; } /*Shortcuts [data-card]*/ [data-card~=primary]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=secondary]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=third]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=white]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=positive]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=negative]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=pending]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=requestadditions]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=negotiating]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=approved]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=accepted]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=rejected]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=withdrawn]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=transparent]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=teamtailor]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=warning]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } [data-card~=dashed]:not([data-card*=sm], [data-card*=lg], [data-card*=md]) { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } .c_card_icons { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: var(--transparent-xs); border-radius: 26%; } .c_card_icons > span { font-size: 1.8rem; } /*Deprecated*/ /*Card - Mixins*/ /*Plain Box - Main*/ .app_box_plain { border-radius: clamp(1.5rem, 1.25vw + 0.88rem, 2rem); padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } .app_box_plain.app_padding_40 { padding: 4rem; } .app_sidebar_right #AvailabilityGadgetHeadlineCell .app_box_plain { border: none; padding: 0; border-radius: 0; margin-bottom: 0; background: transparent; } /*Plain Box - Theme*/ /*Orange*/ .app_box_plain_orange { /*Progress inactive state*/ } /*Grey*/ /*Positive*/ /*Negative*/ /*Dashed*/ .app_box_plain_dashed { border: 0.1rem dashed rgba(0, 0, 0, 0.17); transition: border 0.2s; } .app_box_plain_dashed .app_opacity_low { transition: opacity 0.2s; } .app_box_plain_dashed:hover .app_opacity_low { opacity: 1; } .app_box_plain_dashed:hover { border: 0.1rem dashed rgb(249, 177, 35); } /*Only show this box on mobile (uses on the startpage on the outside)*/ @media (max-width: 49.9375rem) { .app_box_plain_mobile { border-radius: 1.5rem; padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); background: rgba(255, 255, 255, 0.75); } } /*Gradient*/ .app_box_plain_gradient_redtoorange_light { background: rgb(255, 215, 230); background: linear-gradient(323deg, rgb(255, 215, 230) 0%, rgb(255, 233, 188) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=" #ffd7e6",endColorstr="#ffe9bc",GradientType=1); } /*Message box*/ .tutorialBox, .app_box_message { display: inline-block; margin-top: 2rem; border-radius: 1.5rem; padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); position: relative; } .tutorialBox:after, .tutorialBox:before, .app_box_message:after, .app_box_message:before { bottom: 100%; left: 4rem; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(255, 255, 255, 0); } .tutorialBox:before, .app_box_message:before { margin-left: -16px; border-width: 16px; } .tutorialBox:after, .app_box_message:after { margin-left: -15px; border-width: 15px; } .app_box_message.app_padding_40 { padding: 4rem; } /*Themes*/ /*Variants*/ .app_box_message_right:after, .app_box_message_right:before { right: 4rem; left: auto; } .app_box_message_arrowleft { margin-top: 0; } .app_box_message_arrowleft:after { right: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #ffffff; border-width: 1rem; margin-top: -1rem; left: auto !important; border-bottom-color: transparent !important; margin-left: auto !important; left: auto !important; bottom: auto !important; } .app_box_message_arrowleft:before { content: none !important; } .app_box_message_arrowleft.app_box_message_white:after, .app_box_message_arrowleft.app_box_message_white:before { border-bottom-color: transparent !important; } .app_box_message_arrowleft_mobile { margin-top: 0; } .app_box_message_arrowleft_mobile:after { right: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #ffffff; border-width: 1rem; margin-top: -1rem; left: auto !important; border-bottom-color: transparent !important; margin-left: auto !important; left: auto !important; bottom: auto !important; } .app_box_message_arrowleft_mobile:before { content: none !important; } .app_box_message_arrowleft_mobile.app_box_message_white:after, .app_box_message_arrowleft_mobile.app_box_message_white:before { border-bottom-color: transparent !important; } /*Backgrounds*/ .app_background_position_x_center_div > div { background-position-x: center !important; } /*Primary*/ /*Secondary*/ .app_background_color_orange_withtext, .app_feed_horisontell > .app_feed_background_neutral { border-style: solid; border-width: 1px; } /*Third*/ .app_startpages_background_image { text-align: center; padding: 5rem 2rem; margin-bottom: 2.5rem; } .app_orange_background, .app_background_orange_withstyle { padding: 1.5rem; border-radius: 2.5rem; } .app_background_orange_variant_withstyle { padding: 1.5rem; border-radius: 2.5rem; } /*Fourth*/ .app_grey_background, .app_background_grey_withstyle, .app_lightgrey_background, .app_background_lightgrey_withstyle { padding: 1.5rem; border-radius: 2.5rem; } .app_background_grey_variant_withstyle, .app_background_lightgrey_variant_withstyle { padding: 1.5rem; border-radius: 2.5rem; } /*Positive*/ .app_background_green_withstyle { padding: 1.5rem; border-radius: 2.5rem; } .app_background_green_variant_withstyle { padding: 1.5rem; border-radius: 2.5rem; } /*White*/ .app_background_neutral { background: rgba(0, 0, 0, 0.1); } .app_feed_rightcolumn { padding: 1rem; border-radius: 1.5rem; align-items: center; } .app_main_background, .app_background_white_withstyle { padding: 1.5rem; border-radius: 2.5rem; } .app_background_white_withstyle_andshadow, .app_background_white_withstyle_onlysmallshadow { box-shadow: 0 1.6px 1.7px rgba(0, 0, 0, 0.014), 0 3.8px 4px rgba(0, 0, 0, 0.02), 0 7.1px 7.5px rgba(0, 0, 0, 0.025), 0 12.7px 13.4px rgba(0, 0, 0, 0.03), 0 23.8px 25.1px rgba(0, 0, 0, 0.036), 0 57px 60px rgba(0, 0, 0, 0.05); padding: 2.5rem; border-radius: 2.5rem; } /*Negative*/ .app_background_red_withstyle { padding: 1.5rem; border-radius: 2.5rem; } .app_background_red_variant_withstyle { padding: 1.5rem; border-radius: 2.5rem; } .app_dashboard_indicator_red { border-style: solid; border-width: 1px; position: absolute; top: -0.2rem; right: -0.5rem; border-radius: 1rem; width: 2rem; height: 2rem; } /*Hollow*/ .app_background_ghost_withstyle { border-style: solid; border-width: 1px; background: transparent; padding: 1.5rem; border-radius: 2.5rem; transition: border 0.2s; } /*Transparent*/ .app_background_transparent { background-color: transparent !important; } /*Gradient*/ .app_background_gradient_greentoorange { background: linear-gradient(133deg, rgb(0, 160, 156) 40%, rgb(249, 177, 35) 100%); } .app_background_gradient_redtoorange, .app_background_gradient_redtoorange.app_feed_wrapper { background: linear-gradient(150deg, rgb(228, 35, 80) 29%, rgb(249, 177, 35) 100%); } .app_background_gradient_orangetowhite { background: rgb(228, 35, 80); background: linear-gradient(155deg, rgb(228, 35, 80) 0%, rgb(252, 176, 69) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e42350",endColorstr="#fcb045",GradientType=1); } /*Border with shadow*/ .app_background_borderwithshadow { border-style: solid; border-width: 2px; border-radius: 2rem; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07); padding: 2rem; } /*Tokens*/ /*Main elements*/ body { background-color: var(--body-bg); color: var(--font-color-primary); line-height: 1.55; display: flex; padding: 1.6rem; } @media (max-width: 70.1875rem) { body { padding: 0 !important; margin: 0; } } @media (max-width: 49.9375rem) { body { background-color: var(--center-center-bg); } } body.l_main_wrapper_full_height { height: 100vh; overflow: hidden; } body.l_main_wrapper_full_height .l_main_wrapper { height: 100%; justify-content: flex-start; overflow: hidden; } body.l_main_wrapper_full_height .l_main_wrapper__center_right { height: 86vh; } body.l_main_wrapper_full_height .l_main_wrapper__center { overflow: auto; } body.l_main_wrapper_full_height .c_table_admin_overflow { overflow: visible; } body.l_main_wrapper_full_height .c_table_admin { width: 100%; } body.l_main_wrapper_full_height .c_table_admin td, body.l_main_wrapper_full_height .c_table_admin th { overflow: hidden; word-break: break-all; min-width: 2em !important; text-align: left; max-width: 6em !important; text-overflow: ellipsis; } body.l_main_wrapper_full_height td.l_table_admin_minimized_size_sm, body.l_main_wrapper_full_height th.l_table_admin_minimized_size_sm { max-width: 3.5rem !important; } body.l_main_wrapper_full_height td.l_table_admin_minimized_size_xs, body.l_main_wrapper_full_height th.l_table_admin_minimized_size_xs { max-width: 2rem !important; } /*Main container*/ .l_main_wrapper { background-color: var(--center-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; margin-bottom: auto; max-width: 140rem; width: 140rem; transition: width 0.5s, max-width 0.5s; overflow: hidden; border-radius: 2.5rem; padding-bottom: 1.2rem; padding-top: 1.2rem; box-shadow: 0px 0px 1.1px rgba(0, 0, 0, 0.004), 0px 0px 2.4px rgba(0, 0, 0, 0.006), 0px 0px 4px rgba(0, 0, 0, 0.008), 0px 0px 6px rgba(0, 0, 0, 0.009), 0px 0px 8.6px rgba(0, 0, 0, 0.01), 0px 0px 12.2px rgba(0, 0, 0, 0.011), 0px 0px 17.3px rgba(0, 0, 0, 0.012), 0px 0px 25.2px rgba(0, 0, 0, 0.014), 0px 0px 38.8px rgba(0, 0, 0, 0.016), 0px 0px 69px rgba(0, 0, 0, 0.02); } @media (max-width: 70.1875rem) { .l_main_wrapper { min-width: 100%; max-width: 100%; width: 100%; padding: 0; padding-bottom: 10rem; margin: 0; justify-content: flex-start; border-radius: 0; } } @media (max-width: 49.9375rem) { .l_main_wrapper { background-color: var(--center-center-bg); box-shadow: none; padding-bottom: 10rem; } } .l_main_wrapper_wide { max-width: 100%; width: 100%; } .l_main_wrapper_wide .l_main_wrapper__rightsidebar { max-width: clamp(30rem, 12.5vw + 23.75rem, 35rem); min-width: clamp(20rem, 37.5vw + -2.5rem, 35rem); width: clamp(20rem, 37.5vw + -2.5rem, 35rem); } .l_main_wrapper__top { display: grid; grid-template-columns: 15rem 1fr; transition: grid-template-columns 0.5s; width: 100%; } .c_main_wrapper_padview .l_main_wrapper__top { grid-template-columns: 6rem 1fr; } @media (max-width: 70.1875rem) { .l_main_wrapper__top { grid-template-columns: 6rem 1fr; } } @media (max-width: 49.9375rem) { .l_main_wrapper__top { grid-template-columns: 0 1fr; grid-gap: 0 !important; } } .l_main_wrapper__top_wide { grid-template-columns: 18rem 1fr; } @media (max-width: 70.1875rem) { .l_main_wrapper__top_wide { grid-template-columns: 8rem 1fr; } } @media (max-width: 49.9375rem) { .l_main_wrapper__top_wide { grid-template-columns: 0 1fr; grid-gap: 0 !important; } } .l_main_wrapper__top_outside { display: flex; flex-direction: column; width: 100%; padding: 1.6rem; } .l_main_wrapper__leftmenu { display: flex; flex-direction: column; align-items: stretch; align-content: stretch; width: auto; padding-top: 1rem; z-index: 104; } .l_main_wrapper__leftmenu .c_hamburger > .c_hamburger_input { display: none; } @media (max-width: 49.9375rem) { .l_main_wrapper__leftmenu .c_hamburger > .c_hamburger_input { display: block; } } .l_main_wrapper__leftmenu .c_hamburger > span { display: none; } @media (max-width: 49.9375rem) { .l_main_wrapper__leftmenu .c_hamburger > span { display: block; } } @media (max-width: 49.9375rem) { .l_main_wrapper__leftmenu .c_sidemenu { padding-top: 4.6rem; } } @media (max-width: 70.1875rem) { .l_main_wrapper__leftmenu { width: 8rem; padding-top: 2.2rem; padding-right: 1rem; } .l_main_wrapper__top_wide .l_main_wrapper__leftmenu { width: 10rem; } } @media (max-width: 49.9375rem) { .l_main_wrapper__leftmenu { width: 0; padding: 0; } } .l_main_wrapper__right { width: 100%; display: flex; flex-direction: column; align-items: stretch; align-content: stretch; min-width: 0; padding-right: 1.8rem; } @media (max-width: 70.1875rem) { .l_main_wrapper__right { margin-right: 1rem; margin-top: 1rem; } } @media (max-width: 49.9375rem) { .l_main_wrapper__right { margin: 0; padding: 0; } } .l_main_wrapper__topmenu { width: 100%; display: flex; align-items: center; align-content: stretch; justify-content: space-between; margin-bottom: 1.2rem; } @media (max-width: 49.9375rem) { .l_main_wrapper__topmenu { margin-bottom: 0; padding: 1rem; padding-bottom: 0; } } .l_main_wrapper__topmenu > .app_menu_second { margin-right: 0; } .l_main_wrapper__center_right { background-color: var(--center-center-bg); grid-gap: 2.4rem; width: 100%; display: flex; flex-direction: row; align-items: stretch; align-content: stretch; padding: 1.7rem; border-radius: 3rem; } @media (max-width: 49.9375rem) { .l_main_wrapper__center_right { flex-direction: column; padding: 0; border-radius: 0; margin-bottom: 7rem; } } .l_main_wrapper__center { width: 100%; display: flex; flex-direction: column; min-width: 0; } @media (max-width: 49.9375rem) { .l_main_wrapper__center { width: 100%; border-radius: 0; padding: 1rem; } } .l_main_wrapper__rightsidebar { transition: width 0.5s, max-width 0.5s, min-width 0.5s; max-width: clamp(30rem, 5vw + 27.5rem, 32rem); min-width: clamp(20rem, 25vw + 5rem, 30rem); width: clamp(20rem, 25vw + 5rem, 30rem); } @media (max-width: 49.9375rem) { .l_main_wrapper__rightsidebar { min-width: 100% !important; } } .l_main_wrapper__bottom { width: 100%; padding: 1.6rem; } .out_main_container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; margin-bottom: auto; max-width: 140rem; width: 140rem; overflow: visible; } .out_main_wrapper__bottom { padding: 1.6rem; } .out_main_wrapper__bottom, .out_main_wrapper { max-width: 100%; width: 100%; } /*Start*/ /*Change logo on dark theme*/ .mo_logo > a > div, .l_logo_outside, .l_logo { background-image: url("/Content/Images/Logotype/LoggaDark.png"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 100%; } .c_main_wrapper_padview .mo_logo > a > div, .c_main_wrapper_padview .l_logo_outside, .c_main_wrapper_padview .l_logo { background-image: url("/Content/Images/Logotype/LoggaAvatar.png"); } @media (max-width: 70.1875rem) { .mo_logo > a > div, .l_logo_outside, .l_logo { background-image: url("/Content/Images/Logotype/LoggaAvatar.png"); } } @media (max-width: 49.9375rem) { .mo_logo > a > div, .l_logo_outside, .l_logo { background-image: url("/Content/Images/Logotype/LoggaDark.png"); } } .l_logo { height: 2.8rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .l_logo { background-image: url("/Content/Images/Logotype/LoggaLight.png"); } } :root[data-theme=dark] .l_logo { background-image: url("/Content/Images/Logotype/LoggaLight.png"); } @media (max-width: 49.9375rem) { .l_logo { display: none; } } .l_logo_outside { height: 3.6rem; width: 15rem; } @media (max-width: 49.9375rem) { .l_logo_outside { height: 2.8rem; width: 11rem; } } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .l_logo_outside { background-image: url("/Content/Images/Logotype/LoggaLight.png"); } } :root[data-theme=dark] .l_logo_outside { background-image: url("/Content/Images/Logotype/LoggaLight.png"); } .mo_logo { max-height: 3rem; max-width: 9rem; margin-left: 4rem; display: flex; align-items: center; width: 100%; } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .mo_logo > a > div { background-image: url("/Content/Images/Logotype/LoggaLight.png"); } } :root[data-theme=dark] .mo_logo > a > div { background-image: url("/Content/Images/Logotype/LoggaLight.png"); } @media (min-width: 70.1875rem) { .mo_logo { display: none; } } @media (max-width: 70.1875rem) { .mo_logo { display: none; } } @media (max-width: 49.9375rem) { .mo_logo { display: inline-block; } } /*Links*/ .l_link_clear_next > a, a.l_link_clear { color: inherit !important; } .l_link_primary_with_hover, a.l_link_primary_with_hover { color: var(--th-transparent_xl) !important; border-bottom: 0.15rem solid transparent; transition: border 0.3s; } .l_link_primary_with_hover:hover, a.l_link_primary_with_hover:hover { border-bottom-color: var(--th-transparent_xl); } .l_link_secondary_with_primary_hover, a.l_link_secondary_with_primary_hover { color: var(--font-color-secondary) !important; transition: color 0.2s; } .l_link_secondary_with_primary_hover:hover, a.l_link_secondary_with_primary_hover:hover { color: var(--primary) !important; } /*Line height*/ .l_line_height_0 { line-height: 0; } /*Colors*/ .l_color_primary { color: var(--primary-bg); } .l_color_positive { color: var(--positive-color); } .l_color_icon_primary { color: var(--icon-color-primary); } .l_color_icon_primary .fal, .l_color_icon_primary a.fal, .l_color_icon_primary.fal, .l_color_icon_primary .fak, .l_color_icon_primary.fak, .l_color_icon_primary .fa-light, .l_color_icon_primary a.fa-light, .l_color_icon_primary.fa-light, .l_color_icon_primary.fab, .l_color_icon_primary.fa-brands { color: var(--icon-color-primary); transition: color 0.2s; } .l_color_icon_primary .fal:hover, .l_color_icon_primary a.fal:hover, .l_color_icon_primary.fal:hover, .l_color_icon_primary .fak:hover, .l_color_icon_primary.fak:hover, .l_color_icon_primary .fa-light:hover, .l_color_icon_primary a.fa-light:hover, .l_color_icon_primary.fa-light:hover, .l_color_icon_primary.fab:hover, .l_color_icon_primary.fa-brands:hover { color: var(--light); } .l_color_icon_primary.fal.fa-eye-slash:hover, .l_color_icon_primary.fal.fa-trash-alt:hover, .l_color_icon_primary.fa-light.fa-trash-alt:hover { color: var(--negative-color); } .l_color_icon_primary.fal.fa-heart:hover, .l_color_icon_primary.fas.fa-heart, .l_color_icon_primary.fas.fa-heart:hover { color: var(--primary-bg); } .l_icon_diff_color_inverse .fa-inverse { color: var(--white); } .l_color_negative_hover:hover, .fal.l_color_negative_hover:hover { color: var(--negative-color); } /*Border radius*/ .l_radius_small, .l_radius_sm { border-radius: 0.5rem; } .l_radius_medium, .l_radius_md { border-radius: 0.8rem; } .l_radius_large, .l_radius_lg { border-radius: 1.2rem; } .l_radius_xl { border-radius: 1.5rem; } .l_radius_round { border-radius: 10rem; } /*Borders*/ .l_border_bottom_light_gray { border-bottom: 1px solid var(--transparent-xs); } .l_border_top_light_gray { border-top: 1px solid var(--transparent-xs); } /*Box Shadow*/ .l_box_shadow_small { box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); } .l_box_shadow_feed_large { box-shadow: 0px 0.2px 0.2px -5px rgba(0, 0, 0, 0.003), 0px 0.3px 0.5px -5px rgba(0, 0, 0, 0.005), 0px 0.6px 0.9px -5px rgba(0, 0, 0, 0.007), 0px 0.9px 1.4px -5px rgba(0, 0, 0, 0.008), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.009), 0px 1.8px 2.8px -5px rgba(0, 0, 0, 0.011), 0px 2.5px 4px -5px rgba(0, 0, 0, 0.012), 0px 3.7px 5.8px -5px rgba(0, 0, 0, 0.014), 0px 5.6px 9px -5px rgba(0, 0, 0, 0.016), 0px 10px 16px -5px rgba(0, 0, 0, 0.02); } .dark .l_box_shadow_small { box-shadow: 0px 0.3px 0.4px rgba(0, 0, 0, 0.225), 0px 0.7px 1px rgba(0, 0, 0, 0.323), 0px 1.3px 1.9px rgba(0, 0, 0, 0.4), 0px 2.2px 3.4px rgba(0, 0, 0, 0.477), 0px 4.2px 6.3px rgba(0, 0, 0, 0.575), 0px 10px 15px rgba(0, 0, 0, 0.8); } .l_box_shadow_none { box-shadow: none; } /*Background*/ .l_background_transparent { background: transparent; } /*Opacity*/ .l_opacity_0, .l_opacity_none { opacity: 0; } .l_opacity_low, .l_opacity_low_on_hover:hover { opacity: 0.3; transition: opacity 0.3s; } .l_opacity_medium { opacity: 0.5; } .l_opacity_high { opacity: 0.7; } .l_opacity_full { opacity: 1; } /*Margins and Paddings*/ .l_padding_left_none, .l_padding_left_0 { padding-left: 0; } .l_padding_left_3xs, .l_padding_left_1 { padding-left: 0.1rem; } .l_padding_left_2xs, .l_padding_left_2 { padding-left: 0.2rem; } .l_padding_left_xs, .l_padding_left_3 { padding-left: 0.3rem; } .l_padding_left_sm, .l_padding_left_4 { padding-left: 0.4rem; } .l_padding_left_md, .l_padding_left_6 { padding-left: 0.6rem; } .l_padding_left_lg, .l_padding_left_8 { padding-left: 0.8rem; } .l_padding_left_xl, .l_padding_left_10 { padding-left: 1rem; } .l_padding_left_2xl, .l_padding_left_12 { padding-left: 1.2rem; } .l_padding_left_3xl, .l_padding_left_16 { padding-left: 1.6rem; } .l_padding_left_4xl, .l_padding_left_20 { padding-left: 2rem; } .l_padding_left_5xl, .l_padding_left_24 { padding-left: 2.4rem; } .l_padding_left_6xl, .l_padding_left_32 { padding-left: 3.2rem; } .l_padding_left_7xl, .l_padding_left_40 { padding-left: 4rem; } .l_padding_left_8xl, .l_padding_left_60 { padding-left: 6rem; } .l_padding_left_9xl, .l_padding_left_100 { padding-left: 10rem; } .l_padding_right_none, .l_padding_right_0 { padding-right: 0; } .l_padding_right_3xs, .l_padding_right_1 { padding-right: 0.1rem; } .l_padding_right_2xs, .l_padding_right_2 { padding-right: 0.2rem; } .l_padding_right_xs, .l_padding_right_3 { padding-right: 0.3rem; } .l_padding_right_sm, .l_padding_right_4 { padding-right: 0.4rem; } .l_padding_right_md, .l_padding_right_6 { padding-right: 0.6rem; } .l_padding_right_lg, .l_padding_right_8 { padding-right: 0.8rem; } .l_padding_right_xl, .l_padding_right_10 { padding-right: 1rem; } .l_padding_right_2xl, .l_padding_right_12 { padding-right: 1.2rem; } .l_padding_right_3xl, .l_padding_right_16 { padding-right: 1.6rem; } .l_padding_right_4xl, .l_padding_right_20 { padding-right: 2rem; } .l_padding_right_5xl, .l_padding_right_24 { padding-right: 2.4rem; } .l_padding_right_6xl, .l_padding_right_32 { padding-right: 3.2rem; } .l_padding_right_7xl, .l_padding_right_40 { padding-right: 4rem; } .l_padding_right_8xl, .l_padding_right_60 { padding-right: 6rem; } .l_padding_right_9xl, .l_padding_right_100 { padding-right: 10rem; } .l_padding_top_none, .l_padding_top_0 { padding-top: 0; } .l_padding_top_3xs, .l_padding_top_1 { padding-top: 0.1rem; } .l_padding_top_2xs, .l_padding_top_2 { padding-top: 0.2rem; } .l_padding_top_xs, .l_padding_top_3 { padding-top: 0.3rem; } .l_padding_top_sm, .l_padding_top_4 { padding-top: 0.4rem; } .l_padding_top_md, .l_padding_top_6 { padding-top: 0.6rem; } .l_padding_top_lg, .l_padding_top_8 { padding-top: 0.8rem; } .l_padding_top_xl, .l_padding_top_10 { padding-top: 1rem; } .l_padding_top_2xl, .l_padding_top_12 { padding-top: 1.2rem; } .l_padding_top_3xl, .l_padding_top_16 { padding-top: 1.6rem; } .l_padding_top_4xl, .l_padding_top_20 { padding-top: 2rem; } .l_padding_top_5xl, .l_padding_top_24 { padding-top: 2.4rem; } .l_padding_top_6xl, .l_padding_top_32 { padding-top: 3.2rem; } .l_padding_top_7xl, .l_padding_top_40 { padding-top: 4rem; } .l_padding_top_8xl, .l_padding_top_60 { padding-top: 6rem; } .l_padding_top_9xl, .l_padding_top_100 { padding-top: 10rem; } .l_padding_bottom_none, .l_padding_bottom_0 { padding-bottom: 0; } .l_padding_bottom_3xs, .l_padding_bottom_1 { padding-bottom: 0.1rem; } .l_padding_bottom_2xs, .l_padding_bottom_2 { padding-bottom: 0.2rem; } .l_padding_bottom_xs, .l_padding_bottom_3 { padding-bottom: 0.3rem; } .l_padding_bottom_sm, .l_padding_bottom_4 { padding-bottom: 0.4rem; } .l_padding_bottom_md, .l_padding_bottom_6 { padding-bottom: 0.6rem; } .l_padding_bottom_lg, .l_padding_bottom_8 { padding-bottom: 0.8rem; } .l_padding_bottom_xl, .l_padding_bottom_10 { padding-bottom: 1rem; } .l_padding_bottom_2xl, .l_padding_bottom_12 { padding-bottom: 1.2rem; } .l_padding_bottom_3xl, .l_padding_bottom_16 { padding-bottom: 1.6rem; } .l_padding_bottom_4xl, .l_padding_bottom_20 { padding-bottom: 2rem; } .l_padding_bottom_5xl, .l_padding_bottom_24 { padding-bottom: 2.4rem; } .l_padding_bottom_6xl, .l_padding_bottom_32 { padding-bottom: 3.2rem; } .l_padding_bottom_7xl, .l_padding_bottom_40 { padding-bottom: 4rem; } .l_padding_bottom_8xl, .l_padding_bottom_60 { padding-bottom: 6rem; } .l_padding_bottom_9xl, .l_padding_bottom_100 { padding-bottom: 10rem; } .l_padding_none, .l_padding_0 { padding: 0; } .l_padding_3xs, .l_padding_1 { padding: 0.1rem; } .l_padding_2xs, .l_padding_2 { padding: 0.2rem; } .l_padding_xs, .l_padding_3 { padding: 0.3rem; } .l_padding_sm, .l_padding_4 { padding: 0.4rem; } .l_padding_md, .l_padding_6 { padding: 0.6rem; } .l_padding_lg, .l_padding_8 { padding: 0.8rem; } .l_padding_xl, .l_padding_10 { padding: 1rem; } .l_padding_2xl, .l_padding_12 { padding: 1.2rem; } .l_padding_3xl, .l_padding_16 { padding: 1.6rem; } .l_padding_4xl, .l_padding_20 { padding: 2rem; } .l_padding_5xl, .l_padding_24 { padding: 2.4rem; } .l_padding_6xl, .l_padding_32 { padding: 3.2rem; } .l_padding_7xl, .l_padding_40 { padding: 4rem; } .l_padding_8xl, .l_padding_60 { padding: 6rem; } .l_padding_9xl, .l_padding_100 { padding: 10rem; } .l_padding_left_right_none, .l_padding_left_right_0 { padding-left: 0; padding-right: 0; } .l_padding_left_right_3xs, .l_padding_left_right_1 { padding-left: 0.1rem; padding-right: 0.1rem; } .l_padding_left_right_2xs, .l_padding_left_right_2 { padding-left: 0.2rem; padding-right: 0.2rem; } .l_padding_left_right_xs, .l_padding_left_right_3 { padding-left: 0.3rem; padding-right: 0.3rem; } .l_padding_left_right_sm, .l_padding_left_right_4 { padding-left: 0.4rem; padding-right: 0.4rem; } .l_padding_left_right_md, .l_padding_left_right_6 { padding-left: 0.6rem; padding-right: 0.6rem; } .l_padding_left_right_lg, .l_padding_left_right_8 { padding-left: 0.8rem; padding-right: 0.8rem; } .l_padding_left_right_xl, .l_padding_left_right_10 { padding-left: 1rem; padding-right: 1rem; } .l_padding_left_right_2xl, .l_padding_left_right_12 { padding-left: 1.2rem; padding-right: 1.2rem; } .l_padding_left_right_3xl, .l_padding_left_right_16 { padding-left: 1.6rem; padding-right: 1.6rem; } .l_padding_left_right_4xl, .l_padding_left_right_20 { padding-left: 2rem; padding-right: 2rem; } .l_padding_left_right_5xl, .l_padding_left_right_24 { padding-left: 2.4rem; padding-right: 2.4rem; } .l_padding_left_right_6xl, .l_padding_left_right_32 { padding-left: 3.2rem; padding-right: 3.2rem; } .l_padding_left_right_7xl, .l_padding_left_right_40 { padding-left: 4rem; padding-right: 4rem; } .l_padding_left_right_8xl, .l_padding_left_right_60 { padding-left: 6rem; padding-right: 6rem; } .l_padding_left_right_9xl, .l_padding_left_right_100 { padding-left: 10rem; padding-right: 10rem; } .l_padding_top_bottom_none, .l_padding_top_bottom_0 { padding-top: 0; padding-bottom: 0; } .l_padding_top_bottom_3xs, .l_padding_top_bottom_1 { padding-top: 0.1rem; padding-bottom: 0.1rem; } .l_padding_top_bottom_2xs, .l_padding_top_bottom_2 { padding-top: 0.2rem; padding-bottom: 0.2rem; } .l_padding_top_bottom_xs, .l_padding_top_bottom_3 { padding-top: 0.3rem; padding-bottom: 0.3rem; } .l_padding_top_bottom_sm, .l_padding_top_bottom_4 { padding-top: 0.4rem; padding-bottom: 0.4rem; } .l_padding_top_bottom_md, .l_padding_top_bottom_6 { padding-top: 0.6rem; padding-bottom: 0.6rem; } .l_padding_top_bottom_lg, .l_padding_top_bottom_8 { padding-top: 0.8rem; padding-bottom: 0.8rem; } .l_padding_top_bottom_xl, .l_padding_top_bottom_10 { padding-top: 1rem; padding-bottom: 1rem; } .l_padding_top_bottom_2xl, .l_padding_top_bottom_12 { padding-top: 1.2rem; padding-bottom: 1.2rem; } .l_padding_top_bottom_3xl, .l_padding_top_bottom_16 { padding-top: 1.6rem; padding-bottom: 1.6rem; } .l_padding_top_bottom_4xl, .l_padding_top_bottom_20 { padding-top: 2rem; padding-bottom: 2rem; } .l_padding_top_bottom_5xl, .l_padding_top_bottom_24 { padding-top: 2.4rem; padding-bottom: 2.4rem; } .l_padding_top_bottom_6xl, .l_padding_top_bottom_32 { padding-top: 3.2rem; padding-bottom: 3.2rem; } .l_padding_top_bottom_7xl, .l_padding_top_bottom_40 { padding-top: 4rem; padding-bottom: 4rem; } .l_padding_top_bottom_8xl, .l_padding_top_bottom_60 { padding-top: 6rem; padding-bottom: 6rem; } .l_padding_top_bottom_9xl, .l_padding_top_bottom_100 { padding-top: 10rem; padding-bottom: 10rem; } .l_margin_left_none, .l_margin_left_0 { margin-left: 0; } .l_margin_left_3xs, .l_margin_left_1 { margin-left: 0.1rem; } .l_margin_left_2xs, .l_margin_left_2 { margin-left: 0.2rem; } .l_margin_left_xs, .l_margin_left_3 { margin-left: 0.3rem; } .l_margin_left_sm, .l_margin_left_4 { margin-left: 0.4rem; } .l_margin_left_md, .l_margin_left_6 { margin-left: 0.6rem; } .l_margin_left_lg, .l_margin_left_8 { margin-left: 0.8rem; } .l_margin_left_xl, .l_margin_left_10 { margin-left: 1rem; } .l_margin_left_2xl, .l_margin_left_12 { margin-left: 1.2rem; } .l_margin_left_3xl, .l_margin_left_16 { margin-left: 1.6rem; } .l_margin_left_4xl, .l_margin_left_20 { margin-left: 2rem; } .l_margin_left_5xl, .l_margin_left_24 { margin-left: 2.4rem; } .l_margin_left_6xl, .l_margin_left_32 { margin-left: 3.2rem; } .l_margin_left_7xl, .l_margin_left_40 { margin-left: 4rem; } .l_margin_left_8xl, .l_margin_left_60 { margin-left: 6rem; } .l_margin_left_9xl, .l_margin_left_100 { margin-left: 10rem; } .l_margin_right_none, .l_margin_right_0 { margin-right: 0; } .l_margin_right_3xs, .l_margin_right_1 { margin-right: 0.1rem; } .l_margin_right_2xs, .l_margin_right_2 { margin-right: 0.2rem; } .l_margin_right_xs, .l_margin_right_3 { margin-right: 0.3rem; } .l_margin_right_sm, .l_margin_right_4 { margin-right: 0.4rem; } .l_margin_right_md, .l_margin_right_6 { margin-right: 0.6rem; } .l_margin_right_lg, .l_margin_right_8 { margin-right: 0.8rem; } .l_margin_right_xl, .l_margin_right_10 { margin-right: 1rem; } .l_margin_right_2xl, .l_margin_right_12 { margin-right: 1.2rem; } .l_margin_right_3xl, .l_margin_right_16 { margin-right: 1.6rem; } .l_margin_right_4xl, .l_margin_right_20 { margin-right: 2rem; } .l_margin_right_5xl, .l_margin_right_24 { margin-right: 2.4rem; } .l_margin_right_6xl, .l_margin_right_32 { margin-right: 3.2rem; } .l_margin_right_7xl, .l_margin_right_40 { margin-right: 4rem; } .l_margin_right_8xl, .l_margin_right_60 { margin-right: 6rem; } .l_margin_right_9xl, .l_margin_right_100 { margin-right: 10rem; } .l_margin_top_none, .l_margin_top_0 { margin-top: 0; } .l_margin_top_3xs, .l_margin_top_1 { margin-top: 0.1rem; } .l_margin_top_2xs, .l_margin_top_2 { margin-top: 0.2rem; } .l_margin_top_xs, .l_margin_top_3 { margin-top: 0.3rem; } .l_margin_top_sm, .l_margin_top_4 { margin-top: 0.4rem; } .l_margin_top_md, .l_margin_top_6 { margin-top: 0.6rem; } .l_margin_top_lg, .l_margin_top_8 { margin-top: 0.8rem; } .l_margin_top_xl, .l_margin_top_10 { margin-top: 1rem; } .l_margin_top_2xl, .l_margin_top_12 { margin-top: 1.2rem; } .l_margin_top_3xl, .l_margin_top_16 { margin-top: 1.6rem; } .l_margin_top_4xl, .l_margin_top_20 { margin-top: 2rem; } .l_margin_top_5xl, .l_margin_top_24 { margin-top: 2.4rem; } .l_margin_top_6xl, .l_margin_top_32 { margin-top: 3.2rem; } .l_margin_top_7xl, .l_margin_top_40 { margin-top: 4rem; } .l_margin_top_8xl, .l_margin_top_60 { margin-top: 6rem; } .l_margin_top_9xl, .l_margin_top_100 { margin-top: 10rem; } .l_margin_bottom_none, .l_margin_bottom_0 { margin-bottom: 0; } .l_margin_bottom_3xs, .l_margin_bottom_1 { margin-bottom: 0.1rem; } .l_margin_bottom_2xs, .l_margin_bottom_2 { margin-bottom: 0.2rem; } .l_margin_bottom_xs, .l_margin_bottom_3 { margin-bottom: 0.3rem; } .l_margin_bottom_sm, .l_margin_bottom_4 { margin-bottom: 0.4rem; } .l_margin_bottom_md, .l_margin_bottom_6 { margin-bottom: 0.6rem; } .l_margin_bottom_lg, .l_margin_bottom_8 { margin-bottom: 0.8rem; } .l_margin_bottom_xl, .l_margin_bottom_10 { margin-bottom: 1rem; } .l_margin_bottom_2xl, .l_margin_bottom_12 { margin-bottom: 1.2rem; } .l_margin_bottom_3xl, .l_margin_bottom_16 { margin-bottom: 1.6rem; } .l_margin_bottom_4xl, .l_margin_bottom_20 { margin-bottom: 2rem; } .l_margin_bottom_5xl, .l_margin_bottom_24 { margin-bottom: 2.4rem; } .l_margin_bottom_6xl, .l_margin_bottom_32 { margin-bottom: 3.2rem; } .l_margin_bottom_7xl, .l_margin_bottom_40 { margin-bottom: 4rem; } .l_margin_bottom_8xl, .l_margin_bottom_60 { margin-bottom: 6rem; } .l_margin_bottom_9xl, .l_margin_bottom_100 { margin-bottom: 10rem; } .l_margin_none, .l_margin_0 { margin: 0; } .l_margin_3xs, .l_margin_1 { margin: 0.1rem; } .l_margin_2xs, .l_margin_2 { margin: 0.2rem; } .l_margin_xs, .l_margin_3 { margin: 0.3rem; } .l_margin_sm, .l_margin_4 { margin: 0.4rem; } .l_margin_md, .l_margin_6 { margin: 0.6rem; } .l_margin_lg, .l_margin_8 { margin: 0.8rem; } .l_margin_xl, .l_margin_10 { margin: 1rem; } .l_margin_2xl, .l_margin_12 { margin: 1.2rem; } .l_margin_3xl, .l_margin_16 { margin: 1.6rem; } .l_margin_4xl, .l_margin_20 { margin: 2rem; } .l_margin_5xl, .l_margin_24 { margin: 2.4rem; } .l_margin_6xl, .l_margin_32 { margin: 3.2rem; } .l_margin_7xl, .l_margin_40 { margin: 4rem; } .l_margin_8xl, .l_margin_60 { margin: 6rem; } .l_margin_9xl, .l_margin_100 { margin: 10rem; } .l_margin_left_right_none, .l_margin_left_right_0 { margin-left: 0; margin-right: 0; } .l_margin_left_right_3xs, .l_margin_left_right_1 { margin-left: 0.1rem; margin-right: 0.1rem; } .l_margin_left_right_2xs, .l_margin_left_right_2 { margin-left: 0.2rem; margin-right: 0.2rem; } .l_margin_left_right_xs, .l_margin_left_right_3 { margin-left: 0.3rem; margin-right: 0.3rem; } .l_margin_left_right_sm, .l_margin_left_right_4 { margin-left: 0.4rem; margin-right: 0.4rem; } .l_margin_left_right_md, .l_margin_left_right_6 { margin-left: 0.6rem; margin-right: 0.6rem; } .l_margin_left_right_lg, .l_margin_left_right_8 { margin-left: 0.8rem; margin-right: 0.8rem; } .l_margin_left_right_xl, .l_margin_left_right_10 { margin-left: 1rem; margin-right: 1rem; } .l_margin_left_right_2xl, .l_margin_left_right_12 { margin-left: 1.2rem; margin-right: 1.2rem; } .l_margin_left_right_3xl, .l_margin_left_right_16 { margin-left: 1.6rem; margin-right: 1.6rem; } .l_margin_left_right_4xl, .l_margin_left_right_20 { margin-left: 2rem; margin-right: 2rem; } .l_margin_left_right_5xl, .l_margin_left_right_24 { margin-left: 2.4rem; margin-right: 2.4rem; } .l_margin_left_right_6xl, .l_margin_left_right_32 { margin-left: 3.2rem; margin-right: 3.2rem; } .l_margin_left_right_7xl, .l_margin_left_right_40 { margin-left: 4rem; margin-right: 4rem; } .l_margin_left_right_8xl, .l_margin_left_right_60 { margin-left: 6rem; margin-right: 6rem; } .l_margin_left_right_9xl, .l_margin_left_right_100 { margin-left: 10rem; margin-right: 10rem; } .l_margin_top_bottom_none, .l_margin_top_bottom_0 { margin-top: 0; margin-bottom: 0; } .l_margin_top_bottom_3xs, .l_margin_top_bottom_1 { margin-top: 0.1rem; margin-bottom: 0.1rem; } .l_margin_top_bottom_2xs, .l_margin_top_bottom_2 { margin-top: 0.2rem; margin-bottom: 0.2rem; } .l_margin_top_bottom_xs, .l_margin_top_bottom_3 { margin-top: 0.3rem; margin-bottom: 0.3rem; } .l_margin_top_bottom_sm, .l_margin_top_bottom_4 { margin-top: 0.4rem; margin-bottom: 0.4rem; } .l_margin_top_bottom_md, .l_margin_top_bottom_6 { margin-top: 0.6rem; margin-bottom: 0.6rem; } .l_margin_top_bottom_lg, .l_margin_top_bottom_8 { margin-top: 0.8rem; margin-bottom: 0.8rem; } .l_margin_top_bottom_xl, .l_margin_top_bottom_10 { margin-top: 1rem; margin-bottom: 1rem; } .l_margin_top_bottom_2xl, .l_margin_top_bottom_12 { margin-top: 1.2rem; margin-bottom: 1.2rem; } .l_margin_top_bottom_3xl, .l_margin_top_bottom_16 { margin-top: 1.6rem; margin-bottom: 1.6rem; } .l_margin_top_bottom_4xl, .l_margin_top_bottom_20 { margin-top: 2rem; margin-bottom: 2rem; } .l_margin_top_bottom_5xl, .l_margin_top_bottom_24 { margin-top: 2.4rem; margin-bottom: 2.4rem; } .l_margin_top_bottom_6xl, .l_margin_top_bottom_32 { margin-top: 3.2rem; margin-bottom: 3.2rem; } .l_margin_top_bottom_7xl, .l_margin_top_bottom_40 { margin-top: 4rem; margin-bottom: 4rem; } .l_margin_top_bottom_8xl, .l_margin_top_bottom_60 { margin-top: 6rem; margin-bottom: 6rem; } .l_margin_top_bottom_9xl, .l_margin_top_bottom_100 { margin-top: 10rem; margin-bottom: 10rem; } /*Margins - specifics*/ .l_margin_inline_start { margin-inline-start: auto; } .l_margin_inline_end { margin-inline-end: auto; } .l_margin_inline_center { margin-inline-start: auto; margin-inline-end: auto; } .l_margin_top_auto { margin-top: auto; } .l_margin_bottom_auto { margin-bottom: auto; } .l_margin_left_auto { margin-left: auto; } .l_margin_right_auto { margin-right: auto; } .l_margin_left_right_auto { margin-left: auto; margin-right: auto; } .l_margin_top_bottom_auto { margin-top: auto; margin-bottom: auto; } .l_margin_bottom_30_next > div:not(.c_chip_asinput):not(:last-of-type) { margin-bottom: 3rem; } .l_margin_bottom_24_next > div:not(.c_chip_asinput):not(:last-of-type) { margin-bottom: 2.4rem; } @media (max-width: 70.1875rem) { .pad_margin_inline_start_initial { margin-inline-start: initial; } } @media (max-width: 49.9375rem) { .pad_margin_inline_start_initial { margin-inline-start: auto; } } @media (max-width: 49.9375rem) { .mo_margin_top_24 { margin-top: 2.4rem; } } /*Paddings - specifics*/ /*Position*/ .l_position_relative { position: relative; } .l_position_absolute { position: absolute; } .l_position_absolute_center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .l_position_absolute_slashicon { position: absolute; left: -3px; top: 0px; text-shadow: -2px 1px 0px #f8f7f2; } /*Flex*/ .l_flex { display: flex; } .l_flex_important { display: flex !important; } .l_flex_wrap { flex-wrap: wrap; } .l_flex_column { flex-direction: column; } .l_flex_column_center { display: flex; justify-content: center; align-items: center; } .l_flex_center { justify-content: center; align-items: center; } .l_flex_row { flex-direction: row; } .l_flex_align_center { align-items: center; } .l_flex_align_start { align-items: flex-start; } .l_flex_align_end { align-items: flex-end; } .l_flex_justifycontent_center { justify-content: center; } .l_flex_justifycontent_start { justify-content: flex-start; } .l_flex_justifycontent_end { justify-content: flex-end; } .l_flex_justifycontent_spacebetween { justify-content: space-between; } .l_flex_grow { flex-grow: 1; } .l_flex_one { flex: 1; } .l_flex_one_next > span { text-align: left; justify-content: space-between; flex: 1; width: 100%; } .l_flex_one_next > span > a:first-child { flex: 1; } .l_flex_inline { display: inline-flex; } .l_flex_alignself_start { align-self: flex-start; } .l_flex_alignself_end { align-self: flex-end; } .l_flex_alignself_center { align-self: center; } .l_flex_column_mobile_row { flex-direction: column; } @media (max-width: 49.9375rem) { .l_flex_column_mobile_row { flex-direction: row; } } .l_flex_row_pad_column_children_full_width { flex-direction: row; } @media (max-width: 70.1875rem) { .l_flex_row_pad_column_children_full_width { flex-direction: column; } .l_flex_row_pad_column_children_full_width > div, .l_flex_row_pad_column_children_full_width > div.app_width_65procent, .l_flex_row_pad_column_children_full_width > div.app_width_35procent { width: 100% !important; } } .l_flex_row_mobile_column_children_full_width { flex-direction: row; } @media (max-width: 70.1875rem) { .l_flex_row_mobile_column_children_full_width { flex-direction: column; } .l_flex_row_mobile_column_children_full_width > div, .l_flex_row_mobile_column_children_full_width > div.app_width_65procent, .l_flex_row_mobile_column_children_full_width > div.app_width_35procent, .l_flex_row_mobile_column_children_full_width > div.app_width_60procent, .l_flex_row_mobile_column_children_full_width > div.app_width_40procent { width: 100% !important; } } .l_flex_row_mobile_column { flex-direction: row; } @media (max-width: 49.9375rem) { .l_flex_row_mobile_column { flex-direction: column; } } @media (max-width: 49.9375rem) { .mo_flex_grow { flex-grow: 1; } } @media (max-width: 70.1875rem) { .pad_flex_grow { flex-grow: 1; } } @media (max-width: 49.9375rem) { .mo_flex_wrap { flex-wrap: wrap; } } @media (max-width: 70.1875rem) { .pad_flex_direction_column { flex-direction: column; } } @media (max-width: 49.9375rem) { .mo_flex_align_start, [data-flex~=align_end].mo_flex_align_start { align-items: flex-start; } } /*Flex attributes*/ [data-flex~=flex] { display: flex; } [data-flex~=inlineflex] { display: inline-flex; } [data-flex~=column], [data-flex~=col] { flex-direction: column; } [data-flex~=row] { flex-direction: row; } [data-flex~=row_reverse] { flex-direction: row-reverse; } [data-flex~=col_reverse] { flex-direction: column-reverse; } @media (max-width: 49.9375rem) { [data-flex~=mo_column], [data-flex~=mo_col] { flex-direction: column; } [data-flex~=mo_column] > *, [data-flex~=mo_column] > .l_width_60procent, [data-flex~=mo_column] > .l_width_40procent, [data-flex~=mo_column] > .l_width_20procent, [data-flex~=mo_column] > .l_width_80procent, [data-flex~=mo_column] > .l_width_70procent, [data-flex~=mo_column] > .l_width_30procent, [data-flex~=mo_column] .l_width_one_third, [data-flex~=mo_col] > *, [data-flex~=mo_col] > .l_width_60procent, [data-flex~=mo_col] > .l_width_40procent, [data-flex~=mo_col] > .l_width_20procent, [data-flex~=mo_col] > .l_width_80procent, [data-flex~=mo_col] > .l_width_70procent, [data-flex~=mo_col] > .l_width_30procent, [data-flex~=mo_col] .l_width_one_third { width: 100%; } } @media (max-width: 49.9375rem) { [data-flex~=mo_row] { flex-direction: row; } } @media (max-width: 70.1875rem) { [data-flex~=pad_row] { flex-direction: row; } } @media (max-width: 70.1875rem) { [data-flex~=pad_column] { flex-direction: column; } } [data-flex~=align_start] { align-items: flex-start; } [data-flex~=align_center] { align-items: center; } [data-flex~=align_end] { align-items: flex-end; } [data-flex~=align_baseline] { align-items: baseline; } [data-flex~=justify_center] { justify-content: center; } [data-flex~=justify_start], [data-flex~=justify_start].c_form__title { justify-content: flex-start; } [data-flex~=justify_end] { justify-content: flex-end; } [data-flex~=justify_spacebetween] { justify-content: space-between; } [data-flex~=grow] { flex-grow: 1; } [data-flex~=wrap] { flex-wrap: wrap; } @media (max-width: 49.9375rem) { [data-flex~=mo_align_center] { align-items: center; } } @media (max-width: 49.9375rem) { [data-flex~=mo_align_start] { align-items: start; } } @media (max-width: 49.9375rem) { [data-flex~=mo_justify_start] { justify-content: start; } } /*Grid*/ .l_grid { display: grid; } .l_grid_columns_2_mobile_1 { grid-template-columns: fit-content(8ch) auto; } @media (max-width: 49.9375rem) { .l_grid_columns_2_mobile_1 { grid-template-columns: 1fr; } } .l_grid_columns_2 { display: grid; grid-template-columns: auto 1fr; grid-gap: 0.5rem 2rem; } @media (max-width: 49.9375rem) { .l_grid_columns_2 { grid-template-columns: 1fr; } } .l_grid_rows_3_adminspecific { display: grid; grid-template-columns: 5rem 1fr 8rem; grid-gap: 0.5rem 2rem; align-items: center; } @media (max-width: 49.9375rem) { .l_grid_rows_3_adminspecific { grid-template-columns: 1fr; } } .l_grid_columns_2_mobile_1_simple { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } @media (max-width: 49.9375rem) { .l_grid_columns_2_mobile_1_simple > div { border-bottom: none; padding-bottom: 0; } } .l_grid_columns_2_mobile_1_simple > div:nth-of-type(even) { text-align: right; } @media (max-width: 49.9375rem) { .l_grid_columns_2_mobile_1_simple > div:nth-of-type(even) { text-align: left; border-bottom: none; padding-bottom: 2rem; } } @media (max-width: 49.9375rem) { .l_grid_columns_2_mobile_1_simple > div:nth-of-type(odd) { font-weight: 600; } } @media (max-width: 49.9375rem) { .l_grid_columns_2_mobile_1_simple { grid-template-columns: 1fr; grid-gap: 0.5rem; } } @media (max-width: 49.9375rem) { .l_grid_columns_2_mobile_1_simple .l_border_top_light_gray { border-top: none; } } @media (max-width: 49.9375rem) { .l_grid_columns_2_mobile_1_simple .l_padding_top_20, .l_grid_columns_2_mobile_1_simple .l_padding_top_10 { padding-top: 0; } } .l_grid_columns_2_pad_1 { grid-template-columns: fit-content(8ch) auto; } @media (max-width: 70.1875rem) { .l_grid_columns_2_pad_1 { grid-template-columns: 1fr; } } .l_grid_autofit_three_boxes { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); align-content: start; } .l_grid_autofit_three_boxes > * { width: 100%; } .l_grid_autofit { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); grid-auto-flow: dense; } .l_grid_autofit > * { width: 100%; grid-column: span 2; } .l_grid_autofit > *[data-span=half] { grid-column: span 3; } .l_grid_autofit > *[data-span="2"] { grid-column: span 4; } .l_grid_autofit > *[data-span="3"] { grid-column: span 6; } @media (max-width: 49.9375rem) { .l_grid_autofit > * { grid-column: 1/-1; } } .l_grid_column_7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } /*Data-grid*/ [data-grid~=grid] { display: grid; } [data-grid~=col_1] { grid-template-columns: repeat(1, minmax(15rem, 1fr)); padding: 1rem; margin: -1rem; } [data-grid~=col_2] { grid-template-columns: repeat(2, minmax(15rem, 1fr)); padding: 1rem; margin: -1rem; } [data-grid~=col_3] { grid-template-columns: repeat(3, minmax(15rem, 1fr)); padding: 1rem; margin: -1rem; } [data-grid~=col_4] { grid-template-columns: repeat(4, minmax(15rem, 1fr)); padding: 1rem; margin: -1rem; } [data-grid~=col_5] { grid-template-columns: repeat(5, minmax(15rem, 1fr)); padding: 1rem; margin: -1rem; } [data-grid~=col_6] { grid-template-columns: repeat(6, minmax(15rem, 1fr)); padding: 1rem; margin: -1rem; } [data-grid~=col_7] { grid-template-columns: repeat(7, minmax(15rem, 1fr)); padding: 1rem; margin: -1rem; } @media (max-width: 49.9375rem) { [data-grid~=mo_col_1] { grid-template-columns: repeat(1, minmax(15rem, 1fr)); grid-row-gap: 2rem !important; } } .l_justify_self_end { justify-self: self-end; } .l_justify_self_start { justify-self: self-start; } .l_align_self_center { align-self: center; } .l_align_self_stretch { align-self: stretch; } .l_align_self_start { align-self: start; } .l_align_self_end { align-self: end; } .l_align_start_mobile_center { align-items: flex-start; } @media (max-width: 49.9375rem) { .l_align_start_mobile_center { align-items: center; } } /*Gap*/ .l_gap_none, .l_gap_0 { grid-gap: 0; } .l_gap_3xs, .l_gap_1 { grid-gap: 0.1rem; } .l_gap_2xs, [data-flex~=gap_2xs], [data-grid~=gap_2xs], .l_gap_2 { grid-gap: 0.2rem; } .l_gap_xs, [data-flex~=gap_xs], [data-grid~=gap_xs], .l_gap_3 { grid-gap: 0.3rem; } .l_gap_sm, [data-flex~=gap_sm], [data-grid~=gap_sm], .l_gap_4 { grid-gap: 0.4rem; } .l_gap_md, .c_chip_with_rightlink > a:first-of-type, .l_gap_md > #PersonalIdentityContainer, .c_chip_with_rightlink > a:first-of-type > #PersonalIdentityContainer, [data-flex~=gap_md] > #PersonalIdentityContainer, [data-grid~=gap_md] > #PersonalIdentityContainer, [data-flex~=gap_md], [data-grid~=gap_md], .l_gap_6 { grid-gap: 0.6rem; } .l_gap_lg, .c_buttondropdown_primary .c_buttondropdown__button, .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown__items_item a, .c_buttondropdown__items_item button, .c_buttondropdown__items_item input, [data-flex~=gap_lg], [data-grid~=gap_lg], .l_gap_8 { grid-gap: 0.8rem; } .l_gap_xl, .l_main_wrapper__topmenu, [data-flex~=gap_xl], .l_grid_autofit_three_boxes, .l_grid_autofit, [data-grid~=gap_xl], .l_gap_10 { grid-gap: 1rem; } .l_gap_2xl, [data-flex~=gap_2xl], [data-grid~=gap_2xl], .l_gap_12 { grid-gap: 1.2rem; } .l_gap_3xl, .l_main_wrapper__top, .l_main_wrapper__top_outside, [data-flex~=gap_3xl], [data-grid~=gap_3xl], .l_gap_16 { grid-gap: 1.6rem; } .l_gap_4xl, [data-flex~=gap_4xl], [data-grid~=gap_4xl], .l_gap_20 { grid-gap: 2rem; } .l_gap_5xl, [data-flex~=gap_5xl], [data-grid~=gap_5xl], .l_gap_24 { grid-gap: 2.4rem; } .l_gap_6xl, .l_gap_32 { grid-gap: 3.2rem; } .l_gap_7xl, .l_gap_40 { grid-gap: 4rem; } .l_gap_8xl, [data-flex~=gap_8xl], [data-grid~=gap_8xl], .l_gap_60 { grid-gap: 6rem; } .l_gap_9xl, .l_gap_100 { grid-gap: 10rem; } .l_gap_row_none, .l_gap_row_0 { row-gap: 0; } .l_gap_row_3xs, .l_gap_row_1 { row-gap: 0.1rem; } .l_gap_row_2xs, [data-flex~=gap_row_2xs], [data-grid~=gap_row_2xs], .l_gap_row_2 { row-gap: 0.2rem; } .l_gap_row_xs, [data-flex~=gap_row_xs], [data-grid~=gap_row_xs], .l_gap_row_3 { row-gap: 0.3rem; } .l_gap_row_sm, [data-flex~=gap_row_sm], [data-grid~=gap_row_sm], .l_gap_row_4 { row-gap: 0.4rem; } .l_gap_row_md, .c_chip__container, .app_tags_wrapper, .c_chip__container_small, .app_tags_wrapper_small, [data-flex~=gap_row_md], [data-grid~=gap_row_md], .l_gap_row_6 { row-gap: 0.6rem; } .l_gap_row_lg, [data-flex~=gap_row_lg], [data-grid~=gap_row_lg], .l_gap_row_8 { row-gap: 0.8rem; } .l_gap_row_xl, [data-flex~=gap_row_xl], [data-grid~=gap_row_xl], .l_gap_row_10 { row-gap: 1rem; } .l_gap_row_2xl, [data-flex~=gap_row_2xl], [data-grid~=gap_row_2xl], .l_gap_row_12 { row-gap: 1.2rem; } .l_gap_row_3xl, [data-flex~=gap_row_3xl], [data-grid~=gap_row_3xl], .l_gap_row_16 { row-gap: 1.6rem; } .l_gap_row_4xl, [data-flex~=gap_row_4xl], [data-grid~=gap_row_4xl], .l_gap_row_20 { row-gap: 2rem; } .l_gap_row_5xl, [data-flex~=gap_row_5xl], [data-grid~=gap_row_5xl], .l_gap_row_24 { row-gap: 2.4rem; } .l_gap_row_6xl, .l_gap_row_32 { row-gap: 3.2rem; } .l_gap_row_7xl, .l_gap_row_40 { row-gap: 4rem; } .l_gap_row_8xl, [data-flex~=gap_row_8xl], [data-grid~=gap_row_8xl], .l_gap_row_60 { row-gap: 6rem; } .l_gap_row_9xl, .l_gap_row_100 { row-gap: 10rem; } .l_gap_column_none, .l_gap_column_0 { column-gap: 0; } .l_gap_column_3xs, .l_gap_column_1 { column-gap: 0.1rem; } .l_gap_column_2xs, .c_chip__container, .app_tags_wrapper, .c_chip__container_small, .app_tags_wrapper_small, [data-flex~=gap_col_2xs], [data-grid~=gap_col_2xs], .l_gap_column_2 { column-gap: 0.2rem; } .l_gap_column_xs, [data-flex~=gap_col_xs], [data-grid~=gap_col_xs], .l_gap_column_3 { column-gap: 0.3rem; } .l_gap_column_sm, [data-flex~=gap_col_sm], [data-grid~=gap_col_sm], .l_gap_column_4 { column-gap: 0.4rem; } .l_gap_column_md, [data-flex~=gap_col_md], [data-grid~=gap_col_md], .l_gap_column_6 { column-gap: 0.6rem; } .l_gap_column_lg, [data-flex~=gap_col_lg], [data-grid~=gap_col_lg], .l_gap_column_8 { column-gap: 0.8rem; } .l_gap_column_xl, [data-flex~=gap_col_xl], [data-grid~=gap_col_xl], .l_gap_column_10 { column-gap: 1rem; } .l_gap_column_2xl, [data-flex~=gap_col_2xl], [data-grid~=gap_col_2xl], .l_gap_column_12 { column-gap: 1.2rem; } .l_gap_column_3xl, [data-flex~=gap_col_3xl], [data-grid~=gap_col_3xl], .l_gap_column_16 { column-gap: 1.6rem; } .l_gap_column_4xl, [data-flex~=gap_col_4xl], [data-grid~=gap_col_4xl], .l_gap_column_20 { column-gap: 2rem; } .l_gap_column_5xl, [data-flex~=gap_col_5xl], [data-grid~=gap_col_5xl], .l_gap_column_24 { column-gap: 2.4rem; } .l_gap_column_6xl, .l_gap_column_32 { column-gap: 3.2rem; } .l_gap_column_7xl, .l_gap_column_40 { column-gap: 4rem; } .l_gap_column_8xl, [data-flex~=gap_col_8xl], [data-grid~=gap_col_8xl], .l_gap_column_60 { column-gap: 6rem; } .l_gap_column_9xl, .l_gap_column_100 { column-gap: 10rem; } .l_gap_fluid_medium_to_xl_100 { gap: 1.6rem; gap: min(max(0.4rem, 1.5cqw), 1.6rem); gap: clamp(0.4rem, 1.5cqw, 1.6rem); } .l_gap_none_important { grid-gap: 0 !important; } @media (max-width: 49.9375rem) { .mo_gap_row_xl { row-gap: 1rem; } } /*Position*/ .l_absolute_top_right_small { position: absolute; top: 0.3rem; right: 1rem; } .l_absolute_top_right_0 { position: absolute; top: 0; right: 0; } .l_absolute_top_right_10 { position: absolute; top: 1rem; right: 1rem; } .l_absolute_top_right_12 { position: absolute; top: 1.2rem; right: 1.2rem; } .l_absolute_top_right_20 { position: absolute; top: 2rem; right: 2rem; } .l_absolute_top_left_5 { position: absolute; top: 0.5rem; left: 0.5rem; } .l_absolute_top_left_10 { position: absolute; top: 1rem; left: 1rem; } .l_absolute_top_right_medium { position: absolute; top: 0.7rem; right: 1.5rem; } .l_absolute_bottom_right_minus_5 { position: absolute; bottom: -0.5rem; right: -0.5rem; } .l_absolute_bottom_right_10 { position: absolute; bottom: 1rem; right: 1rem; } .l_absolute_top_left_minus_5 { position: absolute; top: -0.5rem; left: -0.5rem; } .l_absolute_top_right_minus_5 { position: absolute; top: -0.5rem; right: -0.5rem; } .l_absolute { position: absolute; } .l_absolute_center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .l_absolute_with_progress_icons { position: absolute; } .l_absolute_with_progress_icons > fal:first-of-type { left: 50%; } .l_absolute_with_progress_icons > fal:nth-of-type(2) { left: 69%; } .l_absolute_with_progress_icons > fal:last-of-type { left: 90%; } .l_absolute_tag_on_profile_picture { z-index: 2; background: var(--dark); border-radius: 50%; padding: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.05); position: absolute; top: -0.5rem; left: -0.7rem; font-size: 1.5rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .l_absolute_setmanager { position: absolute; top: 2.5rem; left: 0px; background: white; border-radius: 1.5rem; padding: 1rem; z-index: 2; min-width: 15rem; } /*Display*/ .l_display_none, #js_boost_button.l_display_none, .js_expandtooriginalsize.l_display_none, .js_expandtofullsize.l_display_none, .js_darkmode.l_display_none, .js_lightmode.l_display_none, .js_padview.l_display_none, .js_desktopview.l_display_none, .app_dropdown_wrapper.l_display_none, .app_tags_wrapper_small.l_display_none, .app_display_flex.l_display_none, .c_button_secondary.l_display_none, .c_buttondropdown_secondary .l_display_none.c_buttondropdown__button, .js_maximize.l_display_none, .js_minimize.l_display_none { display: none; } .l_display_none_important { display: none !important; } .d-none { display: none; } .l_display_block { display: block; } .l_display_block_important { display: block !important; } .l_display_inline_block, label, .app_label { display: inline-block; } .l_display_table_row { display: table-row !important; } .l_visibility_hidden { visibility: hidden; } .l_visibility_visible { visibility: visible; } .l_overflow_hidden { overflow: hidden; } .l_overflow_vertical_scroll { overflow-y: scroll; } .l_ellips { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } /*Order*/ .l_order_1 { order: 1; } .l_order_2 { order: 2; } .l_order_3 { order: 3; } .l_order_4 { order: 4; } @media (max-width: 49.9375rem) { .mo_order_1 { order: 1; } } @media (max-width: 49.9375rem) { .mo_order_2 { order: 2; } } @media (max-width: 49.9375rem) { .mo_order_3 { order: 3; } } @media (max-width: 49.9375rem) { .mo_order_4 { order: 4; } } /*Text*/ .l_text_align_center { text-align: center; } @media (max-width: 49.9375rem) { .mo_text_align_center, .l_text_align_right.mo_text_align_center { text-align: center; } } .l_text_align_right { text-align: right; } @media (max-width: 49.9375rem) { .mo_text_align_right { text-align: right; } } .l_text_align_left { text-align: left; } @media (max-width: 49.9375rem) { .mo_text_align_left, .l_text_align_center.mo_text_align_left { text-align: left; } } .l_text_decoration_none, a.l_text_decoration_none { text-decoration: none !important; } .l_text_overflow_wrap { overflow-wrap: anywhere; } .l_text_overflow_ellips { text-overflow: ellipsis; } .l_text_word_break_all { word-break: break-all; } /*White space*/ .l_nowrap { white-space: nowrap; } .l_wrap { white-space: normal; } /*Cursor*/ .l_cursor_pointer { cursor: pointer; } .l_cursor_auto, .c_button_secondary.l_cursor_auto, .c_buttondropdown_secondary .l_cursor_auto.c_buttondropdown__button { cursor: auto; } .l_cursor_auto_important { cursor: auto !important; } /*Width*/ .l_width_fluid_10_13 { width: clamp(10rem, 7.5vw + 6.25rem, 13rem); } .l_width_fluid_20_24 { min-width: clamp(20rem, 10vw + 15rem, 24rem); } .l_width_fluid_20_24_max { max-width: clamp(20rem, 10vw + 15rem, 24rem); min-width: clamp(20rem, 10vw + 15rem, 24rem); width: clamp(20rem, 10vw + 15rem, 24rem); } .l_width_fluid_24_28 { min-width: clamp(24rem, 10vw + 19rem, 28rem); } .l_width_fluid_swimlane_wide { min-width: clamp(34rem, 10vw + 29rem, 38rem); } .l_width_fluid_swimlane_2wide { min-width: clamp(34rem, 20vw + 24rem, 42rem); } .l_width_full, #PersonalIdentityContainer, .l_width_full_next > div { width: 100%; } .l_width_full_important { width: 100% !important; } @media (max-width: 49.9375rem) { .mo_width_full { width: 100%; } } .l_width_one_third { width: 33.3333333333%; } .l_width_two_third { width: 66.6666666667%; } .l_width_one_fourth { width: 25%; } .l_width_three_fourth { width: 75%; } .l_width_one_fifth { width: 20%; } .l_width_one_sixth { width: 16.6666666667%; } .l_width_one_seventh { width: 14.2857142857%; } .l_width_one_seventh_all { width: 14.2857142857%; min-width: 14.2857142857%; max-width: 14.2857142857%; } .l_width_half { width: 50%; } .l_width_10procent { width: 20%; } .l_width_15procent { width: 20%; } .l_width_20procent { width: 20%; } .l_width_80procent { width: 80%; } .l_width_90procent { width: 90%; } .l_width_75procent { width: 75%; } .l_width_65procent { width: 65%; } .l_width_35procent { width: 35%; } .l_width_20 { width: 2rem; } .l_width_40 { width: 4rem; } .l_width_80 { width: 8rem; } .l_width_min_0 { min-width: 0; } .l_width_min_40procent { min-width: 40%; } .l_width_min_60procent { min-width: 60%; } .l_width_min_full { min-width: 100%; } .l_width_max_title { max-width: 60rem; } .l_width_max_full { max-width: 100%; } .l_width_max_60procent { max-width: 60%; } .l_width_max_400 { max-width: 40rem; } .l_width_max_500 { max-width: 50rem; } .l_width_40_mobile_full { min-width: 40rem; width: 40rem; } @media (max-width: 49.9375rem) { .l_width_40_mobile_full { min-width: 100%; width: 100%; max-width: 100%; } } .l_width_auto, .c_table_admin.l_width_auto, .c_form__input input.l_width_auto { width: auto; } .l_width_inherit { width: inherit; } .l_width_date_with_time { min-width: 16rem; } @media (max-width: 49.9375rem) { .mo_width_full, .c_card__item.mo_width_full, .l_width_50procent.mo_width_full, .l_width_25procent.mo_width_full, .l_width_75procent.mo_width_full, .l_width_20procent.mo_width_full, .app_width_60procent.mo_width_full, .app_width_40procent.mo_width_full { width: 100%; max-width: 100%; } } @media (max-width: 70.1875rem) { .pad_width_full { width: 100% !important; max-width: 100% !important; } } /*Hover states*/ .l_hover_dashed_border:not(.l_cancel_hover_dashed_border), .l_hover_dashed_border_next > div:not(.l_cancel_hover_dashed_border) { transition: outline 0.3s; outline-color: transparent; outline-width: 0.15rem; outline-style: dashed; } .l_hover_dashed_border:not(.l_cancel_hover_dashed_border):hover, .l_hover_dashed_border_next > div:not(.l_cancel_hover_dashed_border):hover { outline-color: var(--primary); outline-width: 0.15rem; outline-style: dashed; } .l_hover_dashed_border_offset:not(.l_cancel_hover_dashed_border), .l_hover_dashed_border_offset_next > div:not(.l_cancel_hover_dashed_border) { outline-offset: 0.4rem; border-radius: clamp(0rem, 1.6vw + -0.64rem, 0.8rem); } /*----Deprecated - Width-----*/ .app_width_10procent, .l_width_10procent { width: 10%; } .app_width_20procent, .l_width_20procent { width: 20%; } .app_width_25procent, .l_width_25procent { width: 25%; } .app_width_30procent, .l_width_30procent { width: 30%; } .app_width_35procent, .l_width_35procent { width: 35%; } .app_width_40procent, .l_width_40procent { width: 40%; } .app_width_50procent, .l_width_50procent { width: 50%; } .app_width_55procent, .l_width_55procent { width: 55%; } .app_width_60procent, .l_width_60procent { width: 60%; } .app_width_65procent, .l_width_65procent { width: 65%; } .app_width_70procent, .l_width_70procent { width: 70%; } .app_width_75procent, .l_width_75procent { width: 75%; } .app_width_80procent, .l_width_80procent { width: 80%; } .app_width_100procent, .app_width_100procent_nextdivs > div, .app_width_100procent_form form, .app_width_100procent_link a, .l_width_100procent, .l_width_100procent_nextdivs > div, .l_width_100procent_form form, .l_width_100procent_link a { width: 100%; } .app_width_100procent_important, .app_width_100procent_nextdiv_important > div, .l_width_100procent_important, .l_width_100procent_nextdiv_important > div { width: 100% !important; } .app_width_8 { width: 0.8rem; } .app_width_12, .app_width_12_divs > div { width: 1.2rem; } .app_width_16 { width: 1.6rem; } .app_width_17 { width: 1.7rem; } .app_width_20 { width: 2rem; } .app_width_50 { width: 5rem; } .app_width_75 { width: 7.5rem; } .app_width_100 { width: 10rem; } .app_width_130, .app_width_130_divs > div { width: 13rem; } .app_width_250 { width: 25rem; } .app_width_300 { width: 30rem; } .app_width_340 { width: 34rem; } .app_width_400 { width: 40rem; } @media (max-width: 49.9375rem) { .app_width_400 { width: 100%; } } .app_width_500 { width: 50rem; } @media (max-width: 49.9375rem) { .app_width_500 { width: 100%; } } .app_width_max_50procent { max-width: 50%; } .app_width_max_200 { max-width: 20rem; } .app_width_max_550 { max-width: 55rem; } .app_width_max_1200_width_100procent { width: 100%; max-width: 120rem; } .app_width_max_1500_width_100procent { width: 100%; max-width: 150rem; } .app_width_max_min_width_35procent { width: 35%; max-width: 35%; min-width: 35%; } .app_width_max_min_width_22procent { width: 22% !important; max-width: 22% !important; min-width: 22% !important; } .app_width_max_min_width_100procent, .app_width_max_min_width _100procent_nextdivs > div { min-width: 100%; max-width: 100%; width: 100%; } .app_width_max_width_60 { width: 6rem; max-width: 6rem; } .app_width_max_width_250 { width: 25rem; max-width: 25rem; } .app_width_max_width_310 { width: 31rem; max-width: 31rem; } .app_width_max_width_350 { width: 35rem; max-width: 35rem; } .app_width_max_width_440 { width: 44rem; max-width: 44rem; } .app_width_max_width_550 { width: 55rem; max-width: 55rem; } .app_width_max_width_700 { width: 70rem; max-width: 70rem; } .app_width_max_width_800 { width: 80rem; max-width: 80rem; } .app_width_min_0 { min-width: 0rem; } .app_width_min_17 { min-width: 1.7rem; } .app_width_min_75 { min-width: 7.5rem; } .app_width_min_100 { min-width: 10rem; } .app_width_min_130 { min-width: 13rem; } .app_width_min_134 { min-width: 13.4rem; } .app_width_min_200 { min-width: 20rem; } .app_width_min_400 { min-width: 40rem; } /*Height*/ .l_height_fluid_10_13 { height: clamp(10rem, 7.5vw + 6.25rem, 13rem); } .l_height_full { height: 100%; } .l_height_min_28 { min-height: 2.8rem; } .l_height_min_600 { min-height: 60rem; } .l_height_12 { height: 1.2rem; } .l_height_20 { height: 2rem; } .l_height_40 { height: 4rem; } .l_height_max_290 { max-height: 29rem; } .h_truncate_3 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @supports (-webkit-line-clamp: 3) { .h_truncate_3 { overflow: hidden; text-overflow: ellipsis; white-space: initial; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } .l_container_type_inline { container-type: inline-size; } /*Z-index*/ .l_zindex_1 { z-index: 1; } .l_zindex_2 { z-index: 2; } .l_zindex_3 { z-index: 3; } /*Hide Show*/ @media (min-width: 70.1875rem) { .mo_hide:not(.l_display_none) { display: flex !important; } } @media (max-width: 70.1875rem) { .mo_hide:not(.l_display_none) { display: flex !important; } } @media (max-width: 49.9375rem) { .mo_hide:not(.l_display_none) { display: none !important; } } @media (min-width: 70.1875rem) { .mo_show { display: none !important; } } @media (max-width: 70.1875rem) { .mo_show { display: none !important; } } @media (max-width: 49.9375rem) { .mo_show { display: flex !important; } } @media (min-width: 70.1875rem) { .pad_hide { display: flex !important; } } @media (max-width: 70.1875rem) { .pad_hide { display: none !important; } } @media (max-width: 49.9375rem) { .pad_hide { display: none !important; } } @media (min-width: 70.1875rem) { .pad_show { display: none !important; } } @media (max-width: 70.1875rem) { .pad_show { display: flex !important; } } @media (max-width: 49.9375rem) { .pad_show { display: flex !important; } } @media (min-width: 70.1875rem) { .desktop_hide { display: none !important; } } @media (max-width: 70.1875rem) { .desktop_hide { display: flex !important; } } @media (max-width: 49.9375rem) { .desktop_hide { display: flex !important; } } @media (min-width: 70.1875rem) { .desktop_show { display: flex !important; } } @media (max-width: 70.1875rem) { .desktop_show { display: none !important; } } @media (max-width: 49.9375rem) { .desktop_show { display: none !important; } } @media (max-width: 49.9375rem) { .mo_hide_only { display: none !important; } } @media (max-width: 49.9375rem) { .mo_show_only { display: flex !important; } } @media (max-width: 70.1875rem) { .pad_hide_only { display: none !important; } } @media (max-width: 70.1875rem) { .pad_show_only { display: flex !important; } } @media (min-width: 70.1875rem) { .desktop_hide_only { display: none !important; } } @media (min-width: 70.1875rem) { .desktop_show_only { display: flex !important; } } .hide_all { display: none !important; } @media (min-width: 70.1875rem) { .hide_all { display: none !important; } } @media (max-width: 70.1875rem) { .hide_all { display: none !important; } } @media (max-width: 49.9375rem) { .hide_all { display: none !important; } } /*Scroll*/ .l_scroll_container { position: relative; } .l_scroll_container:not(.l_scroll_container_no_margin_bottom) { margin-bottom: 2.5rem; } .l_scroll_target::-webkit-scrollbar { height: 1rem; width: 40%; text-align: center; transition: visibility 0.3s ease-in; } .l_scroll_vertical.l_scroll_target::-webkit-scrollbar { width: 0.7rem; } .l_scroll_target::-webkit-scrollbar-track { visibility: hidden; background: white; border-radius: 2rem; border: 3px solid white; transition: visibility 0.3s ease-in; } .l_scroll_container:hover .l_scroll_target::-webkit-scrollbar-track, .app_feed_horisontell:hover .l_scroll_target::-webkit-scrollbar-track, .app_feed_horisontell.l_scroll_target:hover::-webkit-scrollbar-track { visibility: visible; background: white; border-radius: 2rem; border: 3px solid white; } .l_scroll_target::-webkit-scrollbar-thumb { visibility: hidden; background-color: #fce4b8; border-radius: 2rem; transition: visibility 0.3s ease-in; } .l_scroll_container:hover .l_scroll_target::-webkit-scrollbar-thumb, .app_feed_horisontell:hover .l_scroll_target::-webkit-scrollbar-thumb, .app_feed_horisontell.l_scroll_target:hover::-webkit-scrollbar-thumb { visibility: visible; background-color: #fce4b8; border-radius: 2rem; } .app_feed_horisontell, .l_scroll_vertical { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0); } .l_scroll_target::-webkit-scrollbar-thumb:window-inactive { opacity: 0; } .l_scroll_target::-webkit-scrollbar-button { width: 20%; } /* Horizontal scroll */ .l_scroll_horisontell_wrapper { position: relative; } .l_scroll_horisontell { --gap: 1rem; display: grid; gap: var(--gap); grid-auto-flow: column; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-padding: var(--gap); padding-bottom: var(--gap); /* Hidden scrollbar by default */ scrollbar-width: thin; /* For Firefox */ scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); /* Transparent scrollbar by default */ -ms-overflow-style: none; /* For IE and older Edge */ /* Webkit scrollbar (Chrome, Safari, new Edge) */ /* On hover, make scrollbar visible */ /* Firefox scrollbar on hover */ } .l_scroll_horisontell::-webkit-scrollbar { height: 8px; /* Adjust scrollbar height if needed */ background-color: transparent; /* Invisible scrollbar background */ transition: background-color 0.3s ease, opacity 0.3s ease; } .l_scroll_horisontell::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0); /* Fully transparent thumb by default */ border-radius: 4px; /* Adjust rounding if needed */ transition: background-color 0.3s ease, opacity 0.3s ease; /* Smooth animation on hover */ } .l_scroll_horisontell:hover::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); /* Adjust color on hover */ } .l_scroll_horisontell:hover { scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Visible scrollbar on hover */ } .l_scroll_horisontell_fadeeffect { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 15rem; /* Adjust the width of the fade effect */ pointer-events: none; /* Allow interactions with underlying content */ background: linear-gradient(to left, var(--center-center-bg), rgba(255, 255, 255, 0)); /* Adjust colors as needed */ } .l_scroll_horisontell_medium { grid-auto-columns: 30rem; } .l_scroll_horisontell_fluid_wide { grid-auto-columns: clamp(34rem, 10vw + 29rem, 38rem); } .l_scroll_horisontell_fluid_2wide { grid-auto-columns: clamp(34rem, 20vw + 24rem, 42rem); } .l_scroll_horisontell_fluid_24 { grid-auto-columns: clamp(20rem, 10vw + 15rem, 24rem); } .l_scroll_horisontell > div { scroll-snap-align: start; width: 100%; } /*Vertical scroll*/ .l_scroll_vertical { overflow-x: hidden; overflow-y: scroll; scroll-snap-type: y mandatory; } /*Vertical align*/ .l_vertical_align_textbottom { vertical-align: text-bottom; } /*Fixes*/ @media (max-width: 49.9375rem) { .l_only_show_one_location_on_mobile > span:not(:nth-of-type(1)) { display: none; } } .remodal p { padding-top: 1rem; padding-bottom: 1rem; } .js_change_owner_in_stream #changeOwner { position: absolute; right: 0rem; top: -2rem; } .l_smallfeed_button { margin-top: 0.6rem; margin-inline-start: auto; } /*PersonalIdentityContainer*/ .app_sidebar_right #PersonalIdentityContainer { padding: clamp(1rem, 0.5vw + 0.75rem, 1.2rem); } .c_card_neutral > #PersonalIdentityContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } /*Social share*/ .l_socialshare__container { border-radius: 10rem; padding: 1rem 1rem; } .l_socialshare_item_wrapper:before { content: ""; display: block; position: absolute; top: 0.25em; left: 0.25em; width: 2em; height: 1.5em; border-radius: 50%; box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); } .l_socialshare_item_circle { color: var(--white-bg); } .l_socialshare_item_icon { transition: color 0.2s ease-in; color: var(--secondary-color); } /*Tiny MCE*/ .l_tinymce_formatting .details > span > span, .l_tinymce_formatting > span:not(.details):not(.read-more) { display: block; margin-bottom: 1rem; } .l_tinymce_formatting > .summary > span, .l_tinymce_formatting .details > span:first-child, .l_tinymce_formatting .details > span:not(:first-child) span { display: block; margin-bottom: 1rem; } .l_tinymce_formatting p { margin-bottom: 1rem; } /*Outside*/ .app_startpages_background_image { position: relative; border-radius: 3rem; padding: 6rem 20%; overflow: auto; background-repeat: no-repeat; background-position-y: 0px; background-size: cover; } @media (max-width: 70.1875rem) { .app_startpages_background_image { padding: 1.5rem; } } @media (max-width: 49.9375rem) { .app_startpages_background_image { padding: 4rem; } .app_startpages_background_image .app_width_75procent { width: 100%; } } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .app_startpages_background_image:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); border-radius: 3rem; /* Change the opacity value to adjust the darkness */ } } :root[data-theme=dark] .app_startpages_background_image:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); border-radius: 3rem; /* Change the opacity value to adjust the darkness */ } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .app_startpages_background_image * { z-index: 1; } } :root[data-theme=dark] .app_startpages_background_image * { z-index: 1; } .l_section_left_and_right__container { height: 33rem; display: flex; align-items: center; justify-content: center; padding: 4rem; } .l_section_left_and_right__container > img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /*Base class*/ .c_button, .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_primary .c_buttondropdown__button { --_button__bg: var(--button__bg, var(--white-bg)); --_button__color: var(--button__color, var(--white-color)); --_button__bg_hover: var(--button__bg_hover, var(--button__bg)); --_button__color_hover: var(--button__color_hover, var(--button__color)); --_button__padding: var(--button__padding, 0.5rem 1.7rem); --_button__border: 0.1rem solid var(--button__border_color, var(--button__bg)); --_button__height: var(--button__height, 4rem); --_button__font_size: var(--button__font_size, clamp(1.3rem, 0.5vw + 1.05rem, 1.5rem)); --_button__font_weight: var(--button__font_weight, 600); --_button__radius: var(--button__radius, 1.2rem); background: var(--_button__bg); color: var(--_button__color); display: inline-flex; align-items: center; justify-content: center; padding: var(--_button__padding); border: 0.1rem solid var(--_button__border); height: var(--_button__height); cursor: pointer; font-size: var(--_button__font_size); font-weight: var(--_button__font_weight); white-space: nowrap; border-radius: var(--_button__radius); transition: color 0.3s ease, background 0.3s; width: auto; /*Hover effekt*/ /*Handle if button is a link*/ /*Size*/ /*Variants*/ /*Bara text*/ /*Bara ikon*/ /*Text + Ikon*/ /*Vertikal knapp*/ } .c_button:hover, .c_buttondropdown_secondary .c_buttondropdown__button:hover, .c_buttondropdown_primary .c_buttondropdown__button:hover { background: var(--_button__bg_hover); color: var(--_button__color_hover); } .c_button a, .c_buttondropdown_secondary .c_buttondropdown__button a, .c_buttondropdown_primary .c_buttondropdown__button a { text-decoration: none; } a.c_button, .c_buttondropdown_secondary a.c_buttondropdown__button, .c_buttondropdown_primary a.c_buttondropdown__button { text-decoration: none !important; background: var(--_button__bg); color: var(--_button__color) !important; } a.c_button:hover, .c_buttondropdown_secondary a.c_buttondropdown__button:hover, .c_buttondropdown_primary a.c_buttondropdown__button:hover { background: var(--_button__bg_hover); color: var(--_button__color_hover); } .c_button_small, .c_buttondropdown_sm.c_buttondropdown_primary .c_buttondropdown__button, .c_buttondropdown_sm.c_buttondropdown_secondary .c_buttondropdown__button, .c_button.c_button_small_next_button a.c_button_secondary, .c_button.c_button_small_next_button .c_buttondropdown_secondary a.c_buttondropdown__button, .c_buttondropdown_secondary .c_button.c_button_small_next_button a.c_buttondropdown__button, .c_buttondropdown_secondary .c_button_small_next_button.c_buttondropdown__button a.c_button_secondary, .c_buttondropdown_secondary .c_button_small_next_button.c_buttondropdown__button a.c_buttondropdown__button, .c_buttondropdown_primary .c_button_small_next_button.c_buttondropdown__button a.c_button_secondary, .c_buttondropdown_primary .c_button_small_next_button.c_buttondropdown__button .c_buttondropdown_secondary a.c_buttondropdown__button, .c_button_small.c_button_text_with_background_onhover { --button__height: 2.6rem; --button__font_size: 1.1rem; --button__radius: 0.8rem; line-height: 1.2 !important; --button__padding: 0rem 0.7rem; } .c_button_primary { --button__bg: var(--primary-bg); --button__color: var(--primary-color); --button__bg_hover: var(--primary-bg-hover); --button__color_hover: var(--primary-color-hover); /*Stacked icons - add icon*/ } .c_button_primary .sp_stacked_icon_with_add > svg > path { fill: var(--primary-color); } .c_button_primary .sp_stacked_icon_with_add > svg > path:first-of-type { stroke: var(--primary-bg); } .c_button_primary:hover .sp_stacked_icon_with_add > svg > path:first-of-type { stroke: var(--primary-bg-hover); transition: stroke 0.3s; } .c_button_secondary, a.c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_secondary .c_buttondropdown__button { --button__bg: var(--secondary-bg); --button__color: var(--secondary-color); --button__bg_hover: var(--secondary-bg-hover); --button__color_hover: var(--secondary-color-hover); /*Stacked icons - add icon*/ } .c_button_secondary .sp_stacked_icon_with_add > svg > path, .c_buttondropdown_secondary .c_buttondropdown__button .sp_stacked_icon_with_add > svg > path { fill: var(--secondary-color); } .c_button_secondary .sp_stacked_icon_with_add > svg > path:first-of-type, .c_buttondropdown_secondary .c_buttondropdown__button .sp_stacked_icon_with_add > svg > path:first-of-type { stroke: var(--secondary-bg); } .c_button_secondary:hover .sp_stacked_icon_with_add > svg > path:first-of-type, .c_buttondropdown_secondary .c_buttondropdown__button:hover .sp_stacked_icon_with_add > svg > path:first-of-type { stroke: var(--secondary-bg-hover); transition: stroke 0.3s; } .c_card_white .c_button_secondary, .c_card_white .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_secondary .c_card_white .c_buttondropdown__button, [data-card~=white] .c_button_secondary, [data-card~=white] .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_secondary [data-card~=white] .c_buttondropdown__button { --button__bg: var(--secondary-bg-on-white) ; } .c_card_positive .c_button_secondary, .c_card_positive .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_secondary .c_card_positive .c_buttondropdown__button, [data-card~=positive] .c_button_secondary, [data-card~=positive] .c_buttondropdown_secondary .c_buttondropdown__button, .c_buttondropdown_secondary [data-card~=positive] .c_buttondropdown__button { --button__bg: none; --button__color: var(--positive-color); --button__color_hover: var(--positive-color); --button__bg_hover: var(--transparent-xs); } .c_button_third { --button__bg: var(--third-bg); --button__color: var(--third-color); --button__bg_hover: var(--third-bg-hover); --button__color_hover: var(--third-color-hover); } .c_button_white { --button__bg: var(--white-bg); --button__color: var(--white-color); --button__bg_hover: var(--white-bg-hover); --button__color_hover: var(--white-color-hover); } .c_button_positive { --button__bg: var(--positive-bg); --button__color: var(--positive-color); --button__bg_hover: var(--positive-bg-hover); --button__color_hover: var(--positive-color-hover); } .c_button_negative { --button__bg: var(--negative-color); --button__color: var(--negative-bg); --button__bg_hover: var(--negative-color-hover); --button__color_hover: var(--negative-bg-hover); } .c_button_premium, .c_button .app_button_upgrade, .c_buttondropdown_secondary .c_buttondropdown__button .app_button_upgrade, .c_buttondropdown_primary .c_buttondropdown__button .app_button_upgrade { --button__bg: linear-gradient(to right, var(--gradient-orange-to-red)); --button__color: var(--dark); --button__bg_hover: linear-gradient(to right, var(--gradient-orange-to-red-hover)); --button__color_hover: var(--dark); --button__border: none; } .c_button_teamtailor { --button__bg: var(--teamtailor-color); --button__color: var(--teamtailor-bg); --button__bg_hover: var(--teamtailor-bg); --button__color_hover: var(--teamtailor-color); } .c_button_boosted { --button__bg: var(--negative-bg-20); --button__color: var(--negative-color); } .c_button_disabled { opacity: 0.2; cursor: default; } .c_button_clear { padding: 0; border: none; background: none; margin: 0; } .c_button_shadow { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.012), 0px 2.5px 4.2px rgba(0, 0, 0, 0.014), 0px 6px 10px rgba(0, 0, 0, 0.02); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .c_button_shadow { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.03), 0px 2.5px 4.2px rgba(0, 0, 0, 0.05), 0px 6px 10px rgba(0, 0, 0, 0.1); } } :root[data-theme=dark] .c_button_shadow { box-shadow: 1px 0.2px 0.3px rgba(0, 0, 0, 0.006), 0px 0.4px 0.7px rgba(0, 0, 0, 0.008), 0px 0.8px 1.3px rgba(0, 0, 0, 0.01), 0px 1.3px 2.2px rgba(0, 0, 0, 0.03), 0px 2.5px 4.2px rgba(0, 0, 0, 0.05), 0px 6px 10px rgba(0, 0, 0, 0.1); } .c_button_round { --button__radius: 50%; --button__height: 4rem; width: var(--button__height); --button__padding: 0; --button__font_size: 1.5rem; } .c_button_outlined { --button__bg: transparent; --button__bg_hover: transparent; transition: border 0.2s; --button__color: var(--font-color-primary); --button__color_hover: var(--font-color-primary); } .c_button_outlined > .fa-light, .c_button_outlined > .fa-kit { color: var(--icon-color-primary); font-weight: 300; } .c_button_outlined.c_button_primary { border: 0.1rem solid var(--primary-bg); } .c_button_outlined.c_button_primary:hover { border: 0.1rem solid var(--primary-bg-hover); } .c_button_outlined.c_button_secondary, .c_buttondropdown_secondary .c_button_outlined.c_buttondropdown__button { border: 0.1rem solid var(--secondary-bg); } .c_button_outlined.c_button_secondary:hover, .c_buttondropdown_secondary .c_button_outlined.c_buttondropdown__button:hover { border: 0.1rem solid var(--secondary-bg-hover); } .c_button_outlined.c_button_third { border: 0.1rem solid var(--third-color); } .c_button_outlined.c_button_third:hover { border: 0.1rem solid var(--third-color-hover); } a.c_button_outlined.c_button_third { --button__color: var(--third-color); --button__color_hover: var(--third-color-hover); } .c_button_outlined.c_button_white { border: 0.1rem solid var(--transparent-sm); } .c_button_outlined.c_button_white:hover { border: 0.1rem solid var(--transparent-md); } .c_button_outlined.c_button_teamtailor { border: 0.1rem solid var(--teamtailor-color); } .c_button_outlined.c_button_teamtailor:hover { border: 0.1rem solid var(--teamtailor-color); } .c_button_text { --button__bg: none; --button__color: var(--font-color-primary); --button__color_hover: var(--light); --button__border: none; --button__padding: 0; --button__font_size: clamp(1.3rem, 0.5vw + 1.05rem, 1.5rem); --button__font_weight: 600; } .c_button_text_with_background_onhover { --button__bg: none; --button__bg_hover: var(--transparent-xs); --button__color: var(--font-color-primary); --button__padding: 0.5rem 1rem; --button__border: none; --button__font_size: clamp(1.3rem, 0.5vw + 1.05rem, 1.5rem); --button__font_weight: 600; --button__radius: 1.2rem; --button__height: 4rem; margin: 0; } .c_card_positive .c_button_text_with_background_onhover:hover { background-color: var(--input-positive-bg); } .c_button_icon { --button__height: 4rem; --button__font_weight: inherit; width: var(--button__height); } .c_button_icon_without_background { background: none; border: none; } .c_button_icon_with_background_onhover { --button__padding: 0.3rem 1rem; --button__bg: none; --button__bg_hover: var(--transparent-xs); --button__border: none; --button__height: 4rem; --button__radius: 1.2rem; --button__font_weight: 300; margin: 0; } .c_card_positive .c_button_icon_with_background_onhover:hover { background-color: var(--input-positive-bg); } .c_button_icon_small { --button__height: 2.6rem; width: var(--button__height); } .c_button_icon > span { width: 2rem; height: 2rem; font-size: 2rem; } @media (max-width: 49.9375rem) { .c_button_icon.mo_button_text { width: 100%; } } @media (max-width: 49.9375rem) { .c_button_icon.mo_button_text > span { width: auto; height: auto; font-size: inherit; } } @media (max-width: 70.1875rem) { .c_button_icon.pad_button_text { width: 100%; } } @media (max-width: 70.1875rem) { .c_button_icon.pad_button_text > span { width: auto; height: auto; font-size: inherit; } } .c_button_with_icon { font-family: Poppins, "Sans Serif"; gap: 0.7rem; width: auto; } .c_button_with_icon.fal:before, .c_button_with_icon.fa-light:before, .c_button_with_icon.fa-kit:before { font-weight: 300; } .c_button_with_icon:before { font-size: 1.9rem; font-family: "Font Awesome 7 Pro", "Sans Serif"; } .c_button_with_icon > span:first-of-type { display: flex; align-content: center; font-size: 1.9rem; } .c_button_with_icon > span:first-of-type:before { font-size: 1.9rem; } .c_button_with_icon.c_button_small > span:first-of-type, .c_buttondropdown_sm.c_buttondropdown_primary .c_button_with_icon.c_buttondropdown__button > span:first-of-type, .c_buttondropdown_sm.c_buttondropdown_secondary .c_button_with_icon.c_buttondropdown__button > span:first-of-type { display: flex; align-content: center; font-size: 1.3rem; } .c_button_with_icon.c_button_small > span:first-of-type:before, .c_buttondropdown_sm.c_buttondropdown_primary .c_button_with_icon.c_buttondropdown__button > span:first-of-type:before, .c_buttondropdown_sm.c_buttondropdown_secondary .c_button_with_icon.c_buttondropdown__button > span:first-of-type:before { font-size: 1.3rem; } .c_button_vertical { height: auto; white-space: initial; text-align: center; padding: 1rem; } .c_button_vertical .fal, .c_button_vertical .fa-light, .c_button_vertical .fa-kit { font-size: 3rem; } .c_button_vertical .fa-kit { font-size: 2.5rem; font-weight: 300; } /*Icon change on hover (need two span next to each other*/ .c_button_change_icon_on_hover { display: flex; justify-content: center; align-items: center; position: relative; } .c_button_change_icon_on_hover > span { position: absolute; display: block; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 2.2rem; } .c_button_change_icon_on_hover__default { transition: opacity 0.3s, transform 0.3s, color 0.3s !important; } .c_button_change_icon_on_hover__hover { transition: opacity 0.3s, transform 0.3s, color 0.3s !important; transform: rotate(-180deg) scale(0.5); opacity: 0; } .c_button_change_icon_on_hover:hover .c_button_change_icon_on_hover__hover { transform: rotate(0deg) scale(1); opacity: 1; } .c_button_change_icon_on_hover:hover .c_button_change_icon_on_hover__default { transform: rotate(180deg) scale(0.5); opacity: 0; } /*Button as radiocheck*/ .c_button_as_radiocheck__container { display: flex; grid-gap: 0.6rem; } .c_button_as_radiocheck__container_md > .c_button_as_radiocheck__button { width: 12rem; } .c_button_as_radiocheck__container_sm > .c_button_as_radiocheck__button { width: 10.8rem; } .c_button_as_radiocheck__container_sm .c_button_as_radiocheck__button_text { font-size: 1.1rem; } @media (max-width: 49.9375rem) { .c_button_as_radiocheck__container { flex-wrap: wrap; } } .c_button_as_radiocheck__button:not(.c_button_as_radiocheck__button_active) { border: none; } .c_button_as_radiocheck__button { position: relative; cursor: pointer; outline: none; border-style: solid; border-width: 1px; border-radius: 0.8rem; padding: 1rem; } .c_button_as_radiocheck__button_radiocheck { position: absolute; top: 1rem; left: 1rem; font-size: 2rem; } .c_button_as_radiocheck__button_active { border: none; transition: background 0.6s; } .c_button_as_radiocheck__button_active > .c_button_as_radiocheck__button_radiocheck { animation: at_pulse_animation 0.4s ease-out; } .c_button_as_radiocheck__button_active > .c_button_as_radiocheck__button_radiocheck.fa-square:before { content: "\f14a"; font-weight: 900 !important; } .c_button_as_radiocheck__button_active > .c_button_as_radiocheck__button_radiocheck.fa-circle:before { content: "\f192"; font-weight: 900 !important; } .c_button_as_radiocheck__button_active > .c_button_as_radiocheck__button_radiocheck:before { transition: font-weight 0.2s; } .c_button_as_radiocheck__button_icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.4; min-width: 1.9rem; text-align: center; transition: opacity 0.2s; margin-top: 1rem; } .c_button_as_radiocheck__button .c_avatar { opacity: 0.4; margin: 1rem auto 1rem auto; transition: opacity 0.2s; } .c_button_as_radiocheck__button:hover > .c_button_as_radiocheck__button_icon, .c_button_as_radiocheck__button_active > .c_button_as_radiocheck__button_icon, .c_button_as_radiocheck__button_active > .c_avatar, .c_button_as_radiocheck__button:hover > .c_avatar { opacity: 1; } /*Button as dropdown*/ .c_buttondropdown { position: relative; display: inline-block; } .c_buttondropdown_separator { margin-left: 0.5rem; margin-right: 0.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; border-bottom: 0.1rem solid var(--transparent-xs); } .c_buttondropdown:hover .c_buttondropdown__items { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } @media (max-width: 49.9375rem) { .c_buttondropdown:hover .c_buttondropdown__items_fix_bottomonmobile_center { transform: translateX(40%); } } @media (max-width: 49.9375rem) { .c_buttondropdown:hover .c_buttondropdown__items_fix_bottomonmobile_left { transform: translateX(75%); } } @media (max-width: 49.9375rem) { .c_buttondropdown:hover .c_buttondropdown__items_fix_bottomonmobile_right { transform: translateX(-75%); } } .c_buttondropdown_primary .c_buttondropdown__button { --button__padding: 0.5rem 1.3rem; } .c_buttondropdown_secondary .c_buttondropdown__button { --button__padding: 0.5rem 1.3rem; } .c_buttondropdown__button { cursor: pointer; } .c_buttondropdown__button > span { line-height: 1; } .c_buttondropdown__items { position: absolute; top: 2rem; right: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.3s ease, transform 0.3s ease; transform: translateY(-10px); z-index: 104; } .c_buttondropdown__items_left { left: -1rem; right: auto; } .c_buttondropdown__items_top { top: auto; bottom: 4rem; } @media (max-width: 49.9375rem) { .c_buttondropdown__items_fix_bottomonmobile_center { top: auto; bottom: 4rem; transform: translateY(-100%); } } @media (max-width: 49.9375rem) { .c_buttondropdown__items_fix_bottomonmobile_left { top: auto; bottom: 4rem; transform: translateY(-100%); } } @media (max-width: 49.9375rem) { .c_buttondropdown__items_fix_bottomonmobile_right { top: auto; bottom: 4rem; transform: translateY(-100%); } } .c_buttondropdown__items_container { border-radius: 0.8rem; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } .c_buttondropdown__items:not(.c_buttondropdown__items_horizontal) ul { list-style: none; padding: 0; margin: 0; } .c_buttondropdown__items:not(.c_buttondropdown__items_horizontal) ul li:first-of-type { padding-top: 0.5rem; } .c_buttondropdown__items:not(.c_buttondropdown__items_horizontal) ul li:last-of-type { padding-bottom: 0.5rem; } .c_buttondropdown__items_horizontal ul { list-style: none; padding: 0 0 1rem 0; margin: 0; } .c_buttondropdown__items_horizontal ul li:first-of-type { padding-top: 0; } .c_buttondropdown__items_horizontal ul li:last-of-type { padding-bottom: 0; } .c_buttondropdown__items_item { padding-left: 0.5rem; padding-right: 0.5rem; } .c_buttondropdown__items_item_negative, .c_buttondropdown__items_item_negative > span:first-of-type { color: var(--negative-color-indicator) !important; } .c_buttondropdown__items_item a, .c_buttondropdown__items_item button, .c_buttondropdown__items_item input { padding: 1.4rem; border-radius: 0.8rem; border: none; background: transparent; color: var(--font-color-primary); opacity: 0.7; display: inline-flex; justify-content: flex-start; align-items: center; width: 100%; text-decoration: none !important; font-weight: 600; line-height: 1; white-space: nowrap; font-size: 1.5rem; cursor: pointer; } .c_buttondropdown__items_item a_negative, .c_buttondropdown__items_item button_negative, .c_buttondropdown__items_item input_negative { color: var(--negative-color-indicator); } .c_buttondropdown__items_item a > span:first-of-type:not(:only-of-type), .c_buttondropdown__items_item button > span:first-of-type:not(:only-of-type), .c_buttondropdown__items_item input > span:first-of-type:not(:only-of-type) { width: 2rem; display: flex; justify-content: center; text-align: center; align-items: center; font-size: 2rem; font-weight: 300; } .c_buttondropdown__items_item a > span:first-of-type, .c_buttondropdown__items_item button > span:first-of-type, .c_buttondropdown__items_item input > span:first-of-type { width: 2rem; text-align: center; } .c_buttondropdown__items_item:hover a, .c_buttondropdown__items_item:hover button, .c_buttondropdown__items_item:hover input { background-color: var(--transparent-xs); opacity: 1; border-radius: 0.8rem; } .c_buttondropdown__items_item_linkwithicon { font-family: Poppins, "Sans Serif"; color: var(--font-primary); } .c_buttondropdown__items_item_linkwithicon::before { font-family: "Font Awesome 7 Pro", "Sans Serif"; width: 1.6rem; font-weight: 300; } /*Old classes --deprecated */ /*Neutral*/ .app_button_neutral, table tr td a.app_button.app_button_neutral, .app_button_neutral.app_button_positive_onhover:hover, .app_header_buttons .app_button_neutral, .app_background_color_orange_withtext .app_button_neutral:not(.app_button_upgrade) { border: none; } .app_button_neutral:hover, table tr td a.app_button.app_button_neutral:hover, .app_button_neutral.app_button_positive_onhover:hover:hover, .app_header_buttons .app_button_neutral:hover, .app_background_color_orange_withtext .app_button_neutral:not(.app_button_upgrade):hover { border: none; } .app_box_plain.app_box_plain_green .app_button_neutral { background: var(--positive-on-positive-bg) !important; color: var(--positive-on-positive-color) !important; } .app_box_plain.app_box_plain_green .app_button_neutral:hover { background: var(--positive-on-positive-bg-hover) !important; color: var(--positive-on-positive-color-hover) !important; } .app_knowledgebox_upgrade .app_button.app_button_neutral { border: none; width: 100%; } /*Positive*/ .app_button_positive { border: none; transition: all 0.2s ease-in; } /*Negative*/ .app_button_negative { border: none; transition: all 0.2s ease-in; } /*Small*/ a.app_button_small, .app_button_small, .app_buttons_small a:not(.app_chatlink), .app_buttons_small .fal:not(.app_chatlink) { height: 2.6rem !important; font-size: 1.1rem !important; border-radius: 0.8rem !important; line-height: 1.2 !important !important; padding: 0rem 0.7rem !important; } @media (max-width: 49.9375rem) { a.app_button_small.app_height_auto_mobile { height: auto !important; min-height: 0 !important; } } @media (max-width: 49.9375rem) { .app_button_small_mobile, .app_button_small_mobile a, .app_button_small_mobile .fal { padding: 0.2rem 1rem !important; height: 2.6rem !important; font-size: 1.1rem !important; border-radius: 0.8rem !important; } } @media (max-width: 49.9375rem) { a.app_button_small.app_height_100procent_mobile_important { height: 100% !important; } } a.app_button_small.app_height_100procent { height: 100%; } a.app_button_small.app_height_100procent_important { height: 100% !important; } /*Only iconbutton*/ .app_button_onlyicon { border: none; transition: all 0.2s ease-in; display: inline-flex; align-items: center; padding: 0.5rem 1rem !important; min-width: 4rem; max-width: 4rem; text-align: center; font-size: 2rem !important; } .app_button_onlyicon:hover { border: none; } .app_button_onlyicon > span { display: inline-block; vertical-align: middle; font-size: 2.6rem; } .app_button_onlyicon.app_button.app_show_rightcolumn_click_mobile { display: none; } input.app_button, a.app_button, button.app_button, .app_button { height: 4rem; white-space: nowrap; border-radius: 1.2rem; font-size: 1.5rem; outline: none; padding: 0.5rem 1.7rem; text-decoration: none; cursor: pointer; } input.app_button, a.app_button:not(.fal), button.app_button, .app_button:not(.fal) { font-weight: 600; } input.app_button:not(.app_display_none), a.app_button:not(.app_display_none), button.app_button:not(.app_display_none), .app_button:not(.app_display_none) { display: inline-flex; align-items: center; justify-content: center; text-align: center; } a.app_button { line-height: 2.3rem; } .app_button_noticeme { background-size: 200% auto !important; transition: 0.5s; color: white; border: none; background: rgb(47, 60, 77); background-image: linear-gradient(to right, #c21500 0%, #ffc500 51%, #c21500 100%); } .app_button_noticeme:hover { background-position: right center; } .app_button_nexttoinput { width: auto; } .app_button_astextbutton { border: none; background: none; font-weight: 400 !important; padding: 0.4rem 1.2rem !important; height: auto !important; } .app_button_astextbutton:hover, .app_button_astextbutton_active { background-color: var(--third-bg) !important; color: var(--third-color) !important; } .app_button_clear { border: none; background: none; padding: 0; margin: 0; } .app_button_large { padding: 1rem 8rem !important; height: 5rem !important; font-size: 1.6rem !important; border-radius: 1.2rem !important; } .app_button_wide { width: 100% !important; } .app_buttons_small .fal { font-size: 1.6rem !important; display: flex; justify-content: center; align-items: center; } button.app_button:not(.app_button_onlyicon) > span { margin-right: 5px; } .app_input_button_onlyicon { font-size: 2rem; background: none; border: none; } .app_button_withoutbackground { background: transparent !important; border: none !important; color: var(--font-color-primary) !important; } /*CSS Variables*/ .c_badge, [data-badge~=withdrawn_indicator], [data-badge~=rejected_indicator], [data-badge~=accepted_indicator], [data-badge~=approved_indicator], [data-badge~=negotiating_indicator], [data-badge~=requestadditions_indicator], [data-badge~=pending_indicator], [data-badge~=rejected], [data-badge~=accepted], [data-badge~=approved], [data-badge~=negotiating], [data-badge~=requestadditions], [data-badge~=pending], [data-badge~=transparent], [data-badge~=negative], [data-badge~=positive], [data-badge~=third], [data-badge~=secondary], [data-badge~=primary] { --_badge__bg: var(--badge__bg, var(--white-bg)); --_badge__bg_hover: var(--badge__bg_hover, var(--white-bg)); --_badge__color: var(--badge__color, var(--font-color-primary)); --_badge__color_hover: var(--badge__color_hover, var(--font-color-primary)); --_badge__width: var(--badge__width, 2rem); --_badge__height: var(--badge__height, 2rem); --_badge__radius: var(--badge__radius, 10rem); --_badge__font_size: var(--badge__font_size, clamp(1.3rem, 3cqw, 1.5rem)); --_badge__font_weight: var(--badge__font_weight, 600); --_badge__border: var(--badge__border, none); --_badge__top: var(--badge__top, auto); --_badge__bottom: var(--badge__bottom, auto); --_badge__left: var(--badge__left, auto); --_badge__right: var(--badge__right, auto); --_badge__position: var(--badge__position, absolute); --_badge__shadow: var(--badge__shadow, none); --_badge__padding: var(--badge__padding, 0 0.8rem); background-color: var(--_badge__bg); color: var(--_badge__color); font-size: var(--_badge__font_size); font-weight: var(--_badge__font_weight); border-radius: var(--_badge__radius); border: var(--_badge__border); position: var(--_badge__position); top: var(--_badge__top); bottom: var(--_badge__bottom); left: var(--_badge__left); right: var(--_badge__right); padding: var(--_badge__padding); box-shadow: var(--_badge__shadow); min-width: var(--_badge__width); height: var(--_badge__height); display: inline-flex; justify-content: center; align-items: center; white-space: nowrap; font-family: Poppins, "Sans Serif"; /*Variants*/ /*Sizes*/ /*Position*/ /*Specials*/ } .c_badge > span.fal, [data-badge~=withdrawn_indicator] > span.fal, [data-badge~=rejected_indicator] > span.fal, [data-badge~=accepted_indicator] > span.fal, [data-badge~=approved_indicator] > span.fal, [data-badge~=negotiating_indicator] > span.fal, [data-badge~=requestadditions_indicator] > span.fal, [data-badge~=pending_indicator] > span.fal, [data-badge~=rejected] > span.fal, [data-badge~=accepted] > span.fal, [data-badge~=approved] > span.fal, [data-badge~=negotiating] > span.fal, [data-badge~=requestadditions] > span.fal, [data-badge~=pending] > span.fal, [data-badge~=transparent] > span.fal, [data-badge~=negative] > span.fal, [data-badge~=positive] > span.fal, [data-badge~=third] > span.fal, [data-badge~=secondary] > span.fal, [data-badge~=primary] > span.fal { font-size: 0.9rem !important; } .c_badge > span.fal:hover, [data-badge~=withdrawn_indicator] > span.fal:hover, [data-badge~=rejected_indicator] > span.fal:hover, [data-badge~=accepted_indicator] > span.fal:hover, [data-badge~=approved_indicator] > span.fal:hover, [data-badge~=negotiating_indicator] > span.fal:hover, [data-badge~=requestadditions_indicator] > span.fal:hover, [data-badge~=pending_indicator] > span.fal:hover, [data-badge~=rejected] > span.fal:hover, [data-badge~=accepted] > span.fal:hover, [data-badge~=approved] > span.fal:hover, [data-badge~=negotiating] > span.fal:hover, [data-badge~=requestadditions] > span.fal:hover, [data-badge~=pending] > span.fal:hover, [data-badge~=transparent] > span.fal:hover, [data-badge~=negative] > span.fal:hover, [data-badge~=positive] > span.fal:hover, [data-badge~=third] > span.fal:hover, [data-badge~=secondary] > span.fal:hover, [data-badge~=primary] > span.fal:hover { color: inherit !important; } .c_badge_primary, [data-badge~=primary] { --badge__bg: var(--secondary-color); --badge__bg_hover: var(--secondary-color); --badge__color: var(--dark); } .c_badge_secondary, [data-badge~=secondary] { --badge__bg: var(--secondary-bg); --badge__bg_hover: var(--secondary-bg); --badge__color: var(--secondary-color); } .c_badge_third, [data-badge~=third], .c_badge_pending, [data-badge~=pending] { --badge__bg: var(--transparent-xs); --badge__bg_hover: var(--transparent-xs); --badge__color: var(--transparent-xl); } .c_badge_negative, [data-badge~=rejected], [data-badge~=negative], .c_badge_rejected { --badge__bg: var(--negative-color-indicator); --badge__bg_hover: var(--negative-color-indicator); --badge__color: var(--dark); } .c_badge_positive, [data-badge~=accepted], [data-badge~=positive], .c_badge_accepted { --badge__bg: var(--positive-color); --badge__bg_hover: var(--positive-color); --badge__color: var(--dark); } .c_badge_transparent, [data-badge~=transparent] { --badge__bg: transparent; --badge__bg_hover: transparent; --badge__color: var(--transparent-lg); } .c_badge_additions, [data-badge~=negotiating], [data-badge~=requestadditions] { --badge__bg: var(--third-bg); --badge__bg_hover: var(--third-bg); --badge__color: var(--third-color); } .c_badge_blue, [data-badge~=approved] { --badge__bg: var(--blue-bg); --badge__bg_hover: var(--blue-bg); --badge__color: var(--blue-color); } .c_badge_pending_indicator, [data-badge~=pending_indicator] { --badge__bg: var(--light); opacity: 0.2; } .c_badge_additions_indicator, [data-badge~=negotiating_indicator], [data-badge~=requestadditions_indicator] { --badge__bg: var(--third-color); opacity: 0.7; } .c_badge_approved_indicator, [data-badge~=approved_indicator] { --badge__bg: var(--blue-color); opacity: 0.7; } .c_badge_withdrawn_indicator, [data-badge~=withdrawn_indicator] { --badge__bg: var(--transparent-xl); } .c_badge_accepted_indicator, [data-badge~=accepted_indicator] { --badge__bg: var(--positive-color); } .c_badge_rejected_indicator, [data-badge~=rejected_indicator] { --badge__bg: var(--negative-color); opacity: 0.7; } .c_badge_disabled, [data-badge~=disabled] { opacity: 0.3; } .c_badge_xs, [data-badge~=xs] { --badge__font_size: clamp(1.2rem, 3cqw, 1.3rem); --badge__font_weight: 500; --badge__width: 1.8rem; --badge__height: 1.8rem; --badge__padding: 0.4rem; line-height: 1; } .c_badge_sm, [data-badge~=sm] { --badge__font_size: clamp(1.2rem, 3cqw, 1.3rem); --badge__font_weight: 500; --badge__width: 2rem; --badge__height: 2rem; } .c_badge_md, [data-badge~=md] { --badge__font_size: clamp(1.3rem, 3cqw, 1.5rem); --badge__font_weight: 600; --badge__width: 2.2rem; --badge__height: 2.2rem; } .c_badge_lg, [data-badge~=lg] { --badge__font_size: clamp(1.3rem, 3cqw, 1.5rem); --badge__font_weight: 600; --badge__width: 3rem; --badge__height: 3rem; } .c_badge_top, [data-badge~=top] { --badge__top: -0.8rem; } .c_badge_top.c_badge_inside, .c_badge_inside[data-badge~=top], .c_badge_top[data-badge~=inside], [data-badge~=inside][data-badge~=top] { --badge__top: 0.8rem; } .c_badge_bottom, [data-badge~=bottom] { --badge__bottom: -0.8rem; } .c_badge_bottom.c_badge_inside, .c_badge_inside[data-badge~=bottom], .c_badge_bottom[data-badge~=inside], [data-badge~=inside][data-badge~=bottom] { --badge__bottom: 0.8rem; } .c_badge_right, [data-badge~=right] { --badge__right: -0.8rem; } .c_badge_right.c_badge_inside, .c_badge_inside[data-badge~=right], .c_badge_right[data-badge~=inside], [data-badge~=inside][data-badge~=right] { --badge__right: 0.8rem; } .c_badge_left, [data-badge~=left] { --badge__left: -0.8rem; } .c_badge_left.c_badge_inside, .c_badge_inside[data-badge~=left], .c_badge_left[data-badge~=inside], [data-badge~=inside][data-badge~=left] { --badge__left: 0.8rem; } .c_badge_border, [data-badge~=border] { --badge__border: 0.2rem solid var(--dark); } .c_badge_border.c_badge_sm:not(.c_badge_indicator):not([data-badge~=indicator]), .c_badge_sm[data-badge~=border]:not(.c_badge_indicator):not([data-badge~=indicator]), .c_badge_border[data-badge~=sm]:not(.c_badge_indicator):not([data-badge~=indicator]), [data-badge~=sm][data-badge~=border]:not(.c_badge_indicator):not([data-badge~=indicator]) { --badge__width: calc(2rem + 0.2rem); --badge__height: calc(2rem + 0.2rem); } .c_badge_border.c_badge_md:not(.c_badge_indicator):not([data-badge~=indicator]), .c_badge_md[data-badge~=border]:not(.c_badge_indicator):not([data-badge~=indicator]), .c_badge_border[data-badge~=md]:not(.c_badge_indicator):not([data-badge~=indicator]), [data-badge~=md][data-badge~=border]:not(.c_badge_indicator):not([data-badge~=indicator]) { --badge__width: calc(2.2rem + 0.2rem); --badge__height: calc(2.2rem + 0.2rem); } .c_badge_border.c_badge_lg:not(.c_badge_indicator):not([data-badge~=indicator]), .c_badge_lg[data-badge~=border]:not(.c_badge_indicator):not([data-badge~=indicator]), .c_badge_border[data-badge~=lg]:not(.c_badge_indicator):not([data-badge~=indicator]), [data-badge~=lg][data-badge~=border]:not(.c_badge_indicator):not([data-badge~=indicator]) { --badge__width: calc(3rem + 0.2rem); --badge__height: calc(3rem + 0.2rem); } .c_badge_shadow, [data-badge~=shadow] { --badge__shadow: -0.3px 0.3px 0.7px rgba(0, 0, 0, 0.02), -0.9px 0.9px 2.2px rgba(0, 0, 0, 0.03), -4px 4px 10px rgba(0, 0, 0, 0.05); } .c_badge_relative, [data-badge~=relative] { --badge__position: relative; --badge__right: auto; --badge__top: auto; --badge__left: auto; } .c_badge_relative.sp_admin_board_pending_indicator, .sp_admin_board_pending_indicator[data-badge~=relative] { top: auto; left: auto; right: auto; } .c_badge_outlined, [data-badge~=withdrawn_indicator][data-badge~=outlined], [data-badge~=rejected_indicator][data-badge~=outlined], [data-badge~=accepted_indicator][data-badge~=outlined], [data-badge~=approved_indicator][data-badge~=outlined], [data-badge~=negotiating_indicator][data-badge~=outlined], [data-badge~=requestadditions_indicator][data-badge~=outlined], [data-badge~=pending_indicator][data-badge~=outlined], [data-badge~=rejected][data-badge~=outlined], [data-badge~=accepted][data-badge~=outlined], [data-badge~=approved][data-badge~=outlined], [data-badge~=negotiating][data-badge~=outlined], [data-badge~=requestadditions][data-badge~=outlined], [data-badge~=pending][data-badge~=outlined], [data-badge~=transparent][data-badge~=outlined], [data-badge~=negative][data-badge~=outlined], [data-badge~=positive][data-badge~=outlined], [data-badge~=third][data-badge~=outlined], [data-badge~=secondary][data-badge~=outlined], [data-badge~=primary][data-badge~=outlined] { --badge__bg: transparent; --badge__bg_hover: var(--transparent_xs); } .c_badge_square, [data-badge~=square] { --badge__radius: 0.5rem; } .c_badge_square.c_badge_sm, .c_badge_sm[data-badge~=square], .c_badge_square[data-badge~=sm], [data-badge~=sm][data-badge~=square] { --badge__padding: 0 0.6rem; } .c_badge_square.c_badge_md, .c_badge_md[data-badge~=square], .c_badge_square[data-badge~=md], [data-badge~=md][data-badge~=square] { --badge__padding: 0 0.7rem; } .c_badge_square.c_badge_lg, .c_badge_lg[data-badge~=square], .c_badge_square[data-badge~=lg], [data-badge~=lg][data-badge~=square] { --badge__padding: 0 0.8rem; } .c_badge_indicator, [data-badge~=indicator] { --badge__width: 1.2rem; --badge__height: 1.2rem; --badge__padding: 0.6rem; } .c_badge_indicator.c_badge_top, .c_badge_indicator[data-badge~=top], .c_badge_top[data-badge~=indicator], [data-badge~=indicator][data-badge~=top] { --badge__top: -0.6rem; } .c_badge_indicator.c_badge_right, .c_badge_indicator[data-badge~=right], .c_badge_right[data-badge~=indicator], [data-badge~=indicator][data-badge~=right] { --badge__right: -0.6rem; } .c_badge_rectangle, [data-badge~=rectangle] { --badge__width: 0.5rem; --badge__height: 2.7rem; --badge__padding: 0.3rem; --badge__radius: 0.2rem; } .c_badge_rectangle.c_badge_top, .c_badge_rectangle[data-badge~=top], .c_badge_top[data-badge~=rectangle], [data-badge~=rectangle][data-badge~=top] { --badge__top: 1.5rem; } .c_badge_rectangle.c_badge_left, .c_badge_rectangle[data-badge~=left], .c_badge_left[data-badge~=rectangle], [data-badge~=rectangle][data-badge~=left] { --badge__left: -0.25rem; } /*Shortcuts [data-badge]*/ [data-badge~=primary] { /*Outlined*/ } [data-badge~=secondary] { /*Outlined*/ } [data-badge~=third] { /*Outlined*/ } [data-badge~=positive] { /*Outlined*/ } [data-badge~=negative] { /*Outlined*/ } [data-badge~=transparent] { /*Outlined*/ } [data-badge~=pending] { /*Outlined*/ } [data-badge~=requestadditions] { /*Outlined*/ } [data-badge~=negotiating] { /*Outlined*/ } [data-badge~=approved] { /*Outlined*/ } [data-badge~=accepted] { /*Outlined*/ } [data-badge~=rejected] { /*Outlined*/ } [data-badge~=pending_indicator] { /*Outlined*/ } [data-badge~=requestadditions_indicator] { /*Outlined*/ } [data-badge~=negotiating_indicator] { /*Outlined*/ } [data-badge~=approved_indicator] { /*Outlined*/ } [data-badge~=accepted_indicator] { /*Outlined*/ } [data-badge~=rejected_indicator] { /*Outlined*/ } [data-badge~=withdrawn_indicator] { /*Outlined*/ } /*Container*/ .c_chip__container, .app_tags_wrapper, .app_tags_wrapper_small { display: flex; align-items: center; white-space: nowrap; flex-wrap: wrap; } /*CSS Variables*/ .c_chip, .app_tags_tag, [data-chip~=receivedoffers], [data-chip~=draft], [data-chip~=withdrawn], [data-chip~=rejected], [data-chip~=accepted], [data-chip~=evaluation], [data-chip~=approved], [data-chip~=negotiating], [data-chip~=requestadditions], [data-chip~=additions], [data-chip~=pending], [data-chip~=blue], [data-chip~=negative], [data-chip~=positive], [data-chip~=hollow], [data-chip~=white], [data-chip~=third], [data-chip~=secondary], [data-chip~=primary] { --_chip__bg: var(--chip__bg, var(--white-bg)); --_chip__bg_hover: var(--chip__bg_hover, var(--white-bg)); --_chip__color: var(--chip__color, var(--font-color-primary)); --_chip__color_hover: var(--chip__color_hover, var(--font-color-primary)); --_chip__padding: var(--chip__padding, 0.6rem 1.2rem); --_chip__radius: var(--chip__radius, 2rem); --_chip__gap: var(--chip__gap, 0.6rem); --_chip__icon_color: var(--chip__icon_color, var(--icon-color-primary)); --_chip__icon_filter_color: var(--chip__icon_filter_color, none); --_chip__font_size: var(--chip__font_size, clamp(1.3rem, 3cqw, 1.5rem)); --_chip__font_weight: var(--chip__font_weight, 400); --_chip__border_color: var(--chip__border_color, transparent); background-color: var(--_chip__bg); color: var(--_chip__color); padding: var(--_chip__padding); font-size: var(--_chip__font_size); font-weight: var(--_chip__font_weight); gap: var(--_chip__gap); border-radius: var(--_chip__radius); display: inline-flex; justify-content: center; align-items: center; white-space: nowrap; border-width: 0.1rem; border-style: solid; border-color: var(--_chip__border_color); /*Children*/ /*Sizes*/ /*Variants*/ } .c_chip.l_gap_0, .l_gap_0.app_tags_tag, .l_gap_0[data-chip~=receivedoffers], .l_gap_0[data-chip~=draft], .l_gap_0[data-chip~=withdrawn], .l_gap_0[data-chip~=rejected], .l_gap_0[data-chip~=accepted], .l_gap_0[data-chip~=evaluation], .l_gap_0[data-chip~=approved], .l_gap_0[data-chip~=negotiating], .l_gap_0[data-chip~=requestadditions], .l_gap_0[data-chip~=additions], .l_gap_0[data-chip~=pending], .l_gap_0[data-chip~=blue], .l_gap_0[data-chip~=negative], .l_gap_0[data-chip~=positive], .l_gap_0[data-chip~=hollow], .l_gap_0[data-chip~=white], .l_gap_0[data-chip~=third], .l_gap_0[data-chip~=secondary], .l_gap_0[data-chip~=primary] { grid-gap: 0; } .c_chip_hover:not(.c_chip_with_rightlink), [data-chip~=receivedoffers][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=draft][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=withdrawn][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=rejected][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=accepted][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=evaluation][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=approved][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=negotiating][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=requestadditions][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=additions][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=pending][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=blue][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=negative][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=positive][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=hollow][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=white][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=third][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=secondary][data-chip~=hover]:not(.c_chip_with_rightlink), [data-chip~=primary][data-chip~=hover]:not(.c_chip_with_rightlink) { transition: background 0.2s ease-in, color 0.15s ease-in; } .c_chip_hover:not(.c_chip_with_rightlink):hover, [data-chip~=receivedoffers][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=draft][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=withdrawn][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=rejected][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=accepted][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=evaluation][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=approved][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=negotiating][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=requestadditions][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=additions][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=pending][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=blue][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=negative][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=positive][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=hollow][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=white][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=third][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=secondary][data-chip~=hover]:not(.c_chip_with_rightlink):hover, [data-chip~=primary][data-chip~=hover]:not(.c_chip_with_rightlink):hover { background-color: var(--_chip__bg_hover); color: var(--_chip__color_hover); } .c_chip_clicked:not(.c_chip_with_rightlink) { background-color: var(--_chip__bg_hover); color: var(--_chip__color_hover); } .c_chip .fal:not(.l_color_primary):not(.l_color_negative_hover), .app_tags_tag .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=receivedoffers] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=draft] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=withdrawn] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=rejected] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=accepted] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=evaluation] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=approved] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=negotiating] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=requestadditions] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=additions] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=pending] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=blue] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=negative] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=positive] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=hollow] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=white] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=third] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=secondary] .fal:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=primary] .fal:not(.l_color_primary):not(.l_color_negative_hover), .c_chip .fas:not(.l_color_primary), .app_tags_tag .fas:not(.l_color_primary), [data-chip~=receivedoffers] .fas:not(.l_color_primary), [data-chip~=draft] .fas:not(.l_color_primary), [data-chip~=withdrawn] .fas:not(.l_color_primary), [data-chip~=rejected] .fas:not(.l_color_primary), [data-chip~=accepted] .fas:not(.l_color_primary), [data-chip~=evaluation] .fas:not(.l_color_primary), [data-chip~=approved] .fas:not(.l_color_primary), [data-chip~=negotiating] .fas:not(.l_color_primary), [data-chip~=requestadditions] .fas:not(.l_color_primary), [data-chip~=additions] .fas:not(.l_color_primary), [data-chip~=pending] .fas:not(.l_color_primary), [data-chip~=blue] .fas:not(.l_color_primary), [data-chip~=negative] .fas:not(.l_color_primary), [data-chip~=positive] .fas:not(.l_color_primary), [data-chip~=hollow] .fas:not(.l_color_primary), [data-chip~=white] .fas:not(.l_color_primary), [data-chip~=third] .fas:not(.l_color_primary), [data-chip~=secondary] .fas:not(.l_color_primary), [data-chip~=primary] .fas:not(.l_color_primary), .c_chip .fa-kit:not(.l_color_primary), .app_tags_tag .fa-kit:not(.l_color_primary), [data-chip~=receivedoffers] .fa-kit:not(.l_color_primary), [data-chip~=draft] .fa-kit:not(.l_color_primary), [data-chip~=withdrawn] .fa-kit:not(.l_color_primary), [data-chip~=rejected] .fa-kit:not(.l_color_primary), [data-chip~=accepted] .fa-kit:not(.l_color_primary), [data-chip~=evaluation] .fa-kit:not(.l_color_primary), [data-chip~=approved] .fa-kit:not(.l_color_primary), [data-chip~=negotiating] .fa-kit:not(.l_color_primary), [data-chip~=requestadditions] .fa-kit:not(.l_color_primary), [data-chip~=additions] .fa-kit:not(.l_color_primary), [data-chip~=pending] .fa-kit:not(.l_color_primary), [data-chip~=blue] .fa-kit:not(.l_color_primary), [data-chip~=negative] .fa-kit:not(.l_color_primary), [data-chip~=positive] .fa-kit:not(.l_color_primary), [data-chip~=hollow] .fa-kit:not(.l_color_primary), [data-chip~=white] .fa-kit:not(.l_color_primary), [data-chip~=third] .fa-kit:not(.l_color_primary), [data-chip~=secondary] .fa-kit:not(.l_color_primary), [data-chip~=primary] .fa-kit:not(.l_color_primary), .c_chip .far:not(.l_color_primary):not(.l_color_negative_hover), .app_tags_tag .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=receivedoffers] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=draft] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=withdrawn] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=rejected] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=accepted] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=evaluation] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=approved] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=negotiating] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=requestadditions] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=additions] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=pending] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=blue] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=negative] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=positive] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=hollow] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=white] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=third] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=secondary] .far:not(.l_color_primary):not(.l_color_negative_hover), [data-chip~=primary] .far:not(.l_color_primary):not(.l_color_negative_hover) { color: var(--_chip__icon_color); } .c_chip > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), .app_tags_tag > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=receivedoffers] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=draft] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=withdrawn] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=rejected] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=accepted] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=evaluation] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=approved] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=negotiating] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=requestadditions] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=additions] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=pending] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=blue] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=negative] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=positive] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=hollow] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=white] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=third] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=secondary] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=primary] > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), .c_chip > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), .app_tags_tag > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=receivedoffers] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=draft] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=withdrawn] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=rejected] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=accepted] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=evaluation] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=approved] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=negotiating] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=requestadditions] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=additions] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=pending] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=blue] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=negative] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=positive] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=hollow] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=white] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=third] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=secondary] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far), [data-chip~=primary] > a > span:first-child:not(:only-of-type):not(.fas, .fal, .fa-kit, .far) { filter: var(--_chip__icon_filter_color); } .c_chip.l_flex_justifycontent_start, .l_flex_justifycontent_start.app_tags_tag, .l_flex_justifycontent_start[data-chip~=receivedoffers], .l_flex_justifycontent_start[data-chip~=draft], .l_flex_justifycontent_start[data-chip~=withdrawn], .l_flex_justifycontent_start[data-chip~=rejected], .l_flex_justifycontent_start[data-chip~=accepted], .l_flex_justifycontent_start[data-chip~=evaluation], .l_flex_justifycontent_start[data-chip~=approved], .l_flex_justifycontent_start[data-chip~=negotiating], .l_flex_justifycontent_start[data-chip~=requestadditions], .l_flex_justifycontent_start[data-chip~=additions], .l_flex_justifycontent_start[data-chip~=pending], .l_flex_justifycontent_start[data-chip~=blue], .l_flex_justifycontent_start[data-chip~=negative], .l_flex_justifycontent_start[data-chip~=positive], .l_flex_justifycontent_start[data-chip~=hollow], .l_flex_justifycontent_start[data-chip~=white], .l_flex_justifycontent_start[data-chip~=third], .l_flex_justifycontent_start[data-chip~=secondary], .l_flex_justifycontent_start[data-chip~=primary] { justify-content: flex-start !important; } a.c_chip, a.app_tags_tag, a[data-chip~=receivedoffers], a[data-chip~=draft], a[data-chip~=withdrawn], a[data-chip~=rejected], a[data-chip~=accepted], a[data-chip~=evaluation], a[data-chip~=approved], a[data-chip~=negotiating], a[data-chip~=requestadditions], a[data-chip~=additions], a[data-chip~=pending], a[data-chip~=blue], a[data-chip~=negative], a[data-chip~=positive], a[data-chip~=hollow], a[data-chip~=white], a[data-chip~=third], a[data-chip~=secondary], a[data-chip~=primary], .c_chip a, .app_tags_tag a, [data-chip~=receivedoffers] a, [data-chip~=draft] a, [data-chip~=withdrawn] a, [data-chip~=rejected] a, [data-chip~=accepted] a, [data-chip~=evaluation] a, [data-chip~=approved] a, [data-chip~=negotiating] a, [data-chip~=requestadditions] a, [data-chip~=additions] a, [data-chip~=pending] a, [data-chip~=blue] a, [data-chip~=negative] a, [data-chip~=positive] a, [data-chip~=hollow] a, [data-chip~=white] a, [data-chip~=third] a, [data-chip~=secondary] a, [data-chip~=primary] a { text-decoration: none !important; } .c_chip > span:first-of-type, .app_tags_tag > span:first-of-type, [data-chip~=receivedoffers] > span:first-of-type, [data-chip~=draft] > span:first-of-type, [data-chip~=withdrawn] > span:first-of-type, [data-chip~=rejected] > span:first-of-type, [data-chip~=accepted] > span:first-of-type, [data-chip~=evaluation] > span:first-of-type, [data-chip~=approved] > span:first-of-type, [data-chip~=negotiating] > span:first-of-type, [data-chip~=requestadditions] > span:first-of-type, [data-chip~=additions] > span:first-of-type, [data-chip~=pending] > span:first-of-type, [data-chip~=blue] > span:first-of-type, [data-chip~=negative] > span:first-of-type, [data-chip~=positive] > span:first-of-type, [data-chip~=hollow] > span:first-of-type, [data-chip~=white] > span:first-of-type, [data-chip~=third] > span:first-of-type, [data-chip~=secondary] > span:first-of-type, [data-chip~=primary] > span:first-of-type { min-width: 1.6rem; text-align: center; overflow: hidden; text-overflow: ellipsis; } .c_chip_md, [data-chip~=md] { --chip__font_size: clamp(1.2rem, 3cqw, 1.3rem); --chip__font_weight: 500; } .c_chip_md:not(.c_chip_with_rightlink), [data-chip~=md]:not(.c_chip_with_rightlink) { --chip__padding: 0.25rem 1rem; } .c_chip_sm, [data-chip~=sm], .c_chip__container_small .c_chip, .c_chip__container_small .app_tags_tag, .c_chip__container_small [data-chip~=receivedoffers], .c_chip__container_small [data-chip~=draft], .c_chip__container_small [data-chip~=withdrawn], .c_chip__container_small [data-chip~=rejected], .c_chip__container_small [data-chip~=accepted], .c_chip__container_small [data-chip~=evaluation], .c_chip__container_small [data-chip~=approved], .c_chip__container_small [data-chip~=negotiating], .c_chip__container_small [data-chip~=requestadditions], .c_chip__container_small [data-chip~=additions], .c_chip__container_small [data-chip~=pending], .c_chip__container_small [data-chip~=blue], .c_chip__container_small [data-chip~=negative], .c_chip__container_small [data-chip~=positive], .c_chip__container_small [data-chip~=hollow], .c_chip__container_small [data-chip~=white], .c_chip__container_small [data-chip~=third], .c_chip__container_small [data-chip~=secondary], .c_chip__container_small [data-chip~=primary] { --chip__font_size: clamp(1rem, 3cqw, 1.15rem); --chip__font_weight: 500; } .c_chip_sm:not(.c_chip_with_rightlink), [data-chip~=sm]:not(.c_chip_with_rightlink), .c_chip__container_small .c_chip:not(.c_chip_with_rightlink), .c_chip__container_small .app_tags_tag:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=receivedoffers]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=draft]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=withdrawn]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=rejected]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=accepted]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=evaluation]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=approved]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=negotiating]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=requestadditions]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=additions]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=pending]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=blue]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=negative]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=positive]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=hollow]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=white]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=third]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=secondary]:not(.c_chip_with_rightlink), .c_chip__container_small [data-chip~=primary]:not(.c_chip_with_rightlink) { --chip__padding: 0.2rem 0.7rem; } .c_chip_sm .fa-duotone, [data-chip~=sm] .fa-duotone, .c_chip__container_small .c_chip .fa-duotone, .c_chip__container_small .app_tags_tag .fa-duotone, .c_chip__container_small [data-chip~=receivedoffers] .fa-duotone, .c_chip__container_small [data-chip~=draft] .fa-duotone, .c_chip__container_small [data-chip~=withdrawn] .fa-duotone, .c_chip__container_small [data-chip~=rejected] .fa-duotone, .c_chip__container_small [data-chip~=accepted] .fa-duotone, .c_chip__container_small [data-chip~=evaluation] .fa-duotone, .c_chip__container_small [data-chip~=approved] .fa-duotone, .c_chip__container_small [data-chip~=negotiating] .fa-duotone, .c_chip__container_small [data-chip~=requestadditions] .fa-duotone, .c_chip__container_small [data-chip~=additions] .fa-duotone, .c_chip__container_small [data-chip~=pending] .fa-duotone, .c_chip__container_small [data-chip~=blue] .fa-duotone, .c_chip__container_small [data-chip~=negative] .fa-duotone, .c_chip__container_small [data-chip~=positive] .fa-duotone, .c_chip__container_small [data-chip~=hollow] .fa-duotone, .c_chip__container_small [data-chip~=white] .fa-duotone, .c_chip__container_small [data-chip~=third] .fa-duotone, .c_chip__container_small [data-chip~=secondary] .fa-duotone, .c_chip__container_small [data-chip~=primary] .fa-duotone { font-size: clamp(1.3rem, 3cqw, 1.5rem); } .c_chip_primary, [data-chip~=primary], .c_chip_skill, .c_chip_additions, [data-chip~=negotiating], [data-chip~=requestadditions], [data-chip~=additions], .c_chip_receivedoffers, [data-chip~=receivedoffers] { --chip__bg: var(--third-bg); --chip__bg_hover: var(--third-bg-hover); --chip__color: var(--third-color); --chip__icon_color: var(--secondary-color); --chip__border_color: var(--third-bg); } .c_chip_secondary, [data-chip~=secondary], .c_chip_role { --chip__bg: var(--third-variant-bg); --chip__bg_hover: var(--third-variant-bg-hover); --chip__color: var(--third-variant-color); --chip__icon_color: var(--transparent_xl); --chip__icon_filter_color: var(--filter-chip-icon); --chip__border_color: var(--third-variant-bg); } .c_chip_third, [data-chip~=third], .c_chip_pending, [data-chip~=pending] { --chip__bg: var(--grey-xs); --chip__bg_hover: var(--third-variant-bg-hover); --chip__icon_color: var(--transparent-xl); --chip__border_color: var(--grey-xs); --chip__color: var(--transparent-xl); } .c_chip_white, [data-chip~=white] { --chip__bg: var(--white-bg); --chip__bg_hover: var(--white-bg); --chip__icon_color: var(--transparent-md); --chip__border_color: var(--white-bg); --chip__color: var(--font-color-primary); } .c_chip_positive, [data-chip~=positive], .c_chip_category, .c_chip_accepted, [data-chip~=accepted] { --chip__bg: var(--positive-bg); --chip__bg_hover: var(--positive-bg-hover); --chip__color: var(--positive-color); --chip__border_color: var(--positive-bg); --chip__icon_color: var(--positive-color-medium); } .c_chip_negative, [data-chip~=negative], .c_chip_location, .c_chip_rejected, [data-chip~=rejected] { --chip__bg: var(--negative-bg); --chip__bg_hover: var(--negative-bg-hover); --chip__color: var(--negative-color); --chip__icon_filter_color: (40%) sepia(81%) saturate(181%) hue-rotate(128deg) brightness(92%) contrast(0%); --chip__border_color: var(--negative-bg); } .c_chip_blue, [data-chip~=blue], .c_chip_competence, .c_chip_approved, [data-chip~=evaluation], [data-chip~=approved] { --chip__bg: var(--blue-bg); --chip__bg_hover: var(--blue-bg-hover); --chip__color: var(--blue-color); --chip__border_color: var(--blue-bg); } .c_chip_withdrawn, [data-chip~=withdrawn], .c_chip_draft, [data-chip~=draft] { --chip__bg: var(--transparent-xl); --chip__color: var(--dark); } .c_chip_hollow, [data-chip~=hollow] { --chip__bg: transparent; --chip__bg_hover: var(--transparent_xs); --chip__border_color: var(--third-bg); } .c_chip_outlined, [data-chip~=receivedoffers][data-chip~=outlined], [data-chip~=draft][data-chip~=outlined], [data-chip~=withdrawn][data-chip~=outlined], [data-chip~=rejected][data-chip~=outlined], [data-chip~=accepted][data-chip~=outlined], [data-chip~=evaluation][data-chip~=outlined], [data-chip~=approved][data-chip~=outlined], [data-chip~=negotiating][data-chip~=outlined], [data-chip~=requestadditions][data-chip~=outlined], [data-chip~=additions][data-chip~=outlined], [data-chip~=pending][data-chip~=outlined], [data-chip~=blue][data-chip~=outlined], [data-chip~=negative][data-chip~=outlined], [data-chip~=positive][data-chip~=outlined], [data-chip~=hollow][data-chip~=outlined], [data-chip~=white][data-chip~=outlined], [data-chip~=third][data-chip~=outlined], [data-chip~=secondary][data-chip~=outlined], [data-chip~=primary][data-chip~=outlined] { --chip__bg: transparent; --chip__bg_hover: var(--transparent_xs); } .c_chip_outlined.c_chip_primary, .c_chip_primary[data-chip~=receivedoffers][data-chip~=outlined], .c_chip_primary[data-chip~=draft][data-chip~=outlined], .c_chip_primary[data-chip~=withdrawn][data-chip~=outlined], .c_chip_primary[data-chip~=rejected][data-chip~=outlined], .c_chip_primary[data-chip~=accepted][data-chip~=outlined], .c_chip_primary[data-chip~=evaluation][data-chip~=outlined], .c_chip_primary[data-chip~=approved][data-chip~=outlined], .c_chip_primary[data-chip~=negotiating][data-chip~=outlined], .c_chip_primary[data-chip~=requestadditions][data-chip~=outlined], .c_chip_primary[data-chip~=additions][data-chip~=outlined], .c_chip_primary[data-chip~=pending][data-chip~=outlined], .c_chip_primary[data-chip~=blue][data-chip~=outlined], .c_chip_primary[data-chip~=negative][data-chip~=outlined], .c_chip_primary[data-chip~=positive][data-chip~=outlined], .c_chip_primary[data-chip~=hollow][data-chip~=outlined], .c_chip_primary[data-chip~=white][data-chip~=outlined], .c_chip_outlined[data-chip~=primary], [data-chip~=primary][data-chip~=outlined], .c_chip_outlined.c_chip_secondary, .c_chip_secondary[data-chip~=receivedoffers][data-chip~=outlined], .c_chip_secondary[data-chip~=draft][data-chip~=outlined], .c_chip_secondary[data-chip~=withdrawn][data-chip~=outlined], .c_chip_secondary[data-chip~=rejected][data-chip~=outlined], .c_chip_secondary[data-chip~=accepted][data-chip~=outlined], .c_chip_secondary[data-chip~=evaluation][data-chip~=outlined], .c_chip_secondary[data-chip~=approved][data-chip~=outlined], .c_chip_secondary[data-chip~=negotiating][data-chip~=outlined], .c_chip_secondary[data-chip~=requestadditions][data-chip~=outlined], .c_chip_secondary[data-chip~=additions][data-chip~=outlined], .c_chip_secondary[data-chip~=pending][data-chip~=outlined], .c_chip_secondary[data-chip~=blue][data-chip~=outlined], .c_chip_secondary[data-chip~=negative][data-chip~=outlined], .c_chip_secondary[data-chip~=positive][data-chip~=outlined], .c_chip_secondary[data-chip~=hollow][data-chip~=outlined], .c_chip_secondary[data-chip~=white][data-chip~=outlined], .c_chip_outlined[data-chip~=secondary], [data-chip~=secondary][data-chip~=outlined], .c_chip_outlined.c_chip_third, .c_chip_third[data-chip~=receivedoffers][data-chip~=outlined], .c_chip_third[data-chip~=draft][data-chip~=outlined], .c_chip_third[data-chip~=withdrawn][data-chip~=outlined], .c_chip_third[data-chip~=rejected][data-chip~=outlined], .c_chip_third[data-chip~=accepted][data-chip~=outlined], .c_chip_third[data-chip~=evaluation][data-chip~=outlined], .c_chip_third[data-chip~=approved][data-chip~=outlined], .c_chip_third[data-chip~=negotiating][data-chip~=outlined], .c_chip_third[data-chip~=requestadditions][data-chip~=outlined], .c_chip_third[data-chip~=additions][data-chip~=outlined], .c_chip_third[data-chip~=pending][data-chip~=outlined], .c_chip_third[data-chip~=blue][data-chip~=outlined], .c_chip_third[data-chip~=negative][data-chip~=outlined], .c_chip_third[data-chip~=positive][data-chip~=outlined], .c_chip_third[data-chip~=hollow][data-chip~=outlined], .c_chip_third[data-chip~=white][data-chip~=outlined], .c_chip_outlined[data-chip~=third], [data-chip~=third][data-chip~=outlined] { --chip__bg: transparent; --chip__bg_hover: var(--transparent_xs); } .c_chip_circle_small { width: 1rem; height: 1rem; border-radius: 0.5rem; --chip__padding: 0; } .c_chip_circle_green { --chip__bg: var(--positive-color); } .c_chip_circle_orange { --chip__bg: var(--primary-bg); } .c_chip_asinput > label, .c_chip_asinput > a { --chip__bg: transparent; --chip__bg_hover: var(--transparent-xs); --chip__border_color: var(--transparent-md); } .c_chip_asinput > label:hover, .c_chip_asinput > a:hover { --chip__bg: var(--transparent-md); } .c_chip_asinput > input { display: none; } .c_chip_asinput > input:checked + label { --chip__bg: var(--primary-bg); --chip__bg_hover: var(--primary-bg-hover); --chip__color: var(--primary-color); --chip__color_hover: var(--primary-color-hover); --chip__border_color: var(--primary-bg); } .c_chip_asinput .c_chip_active { opacity: 1; --chip__bg: var(--primary-bg); --chip__bg_hover: var(--primary-bg-hover); --chip__color: var(--primary-color); --chip__color_hover: var(--primary-color-hover); --chip__border_color: var(--primary-bg); } .c_chip_with_rightlink { --chip__padding: 0 !important; --chip__gap: 0; } .c_chip_with_rightlink > a:first-of-type { padding: 0.6rem 1.2rem; display: flex; align-items: center; border-top-left-radius: 10rem; border-bottom-left-radius: 10rem; } .c_chip_with_rightlink > a:last-of-type { padding: 0.6rem 1.2rem; padding-left: 0.7rem; border-bottom-right-radius: 10rem; border-top-right-radius: 10rem; } .c_chip_with_rightlink.c_chip_primary > a:first-of-type > span, .c_chip_with_rightlink[data-chip~=primary] > a:first-of-type > span { color: var(--third-color); } .c_chip_with_rightlink.c_chip_secondary > a:first-of-type > span, .c_chip_with_rightlink[data-chip~=secondary] > a:first-of-type > span { color: var(--third-variant-color); } .c_chip_with_image > span:first-of-type:not(:only-of-type), .c_chip_with_image > a:first-of-type > span:first-of-type, .c_chip .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), .app_tags_tag .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=receivedoffers] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=draft] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=withdrawn] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=rejected] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=accepted] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=evaluation] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=approved] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=negotiating] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=requestadditions] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=additions] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=pending] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=blue] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=negative] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=positive] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=hollow] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=white] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=third] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=secondary] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), [data-chip~=primary] .app_tags_tag_withimage > span:first-of-type:not(:only-of-type), .c_chip .app_tags_tag_withimage > a:first-of-type > span:first-of-type, .app_tags_tag .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=receivedoffers] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=draft] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=withdrawn] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=rejected] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=accepted] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=evaluation] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=approved] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=negotiating] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=requestadditions] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=additions] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=pending] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=blue] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=negative] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=positive] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=hollow] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=white] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=third] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=secondary] .app_tags_tag_withimage > a:first-of-type > span:first-of-type, [data-chip~=primary] .app_tags_tag_withimage > a:first-of-type > span:first-of-type { background-size: contain; background-repeat: no-repeat; background-position: center center; width: 2rem; max-height: 2rem; display: inline-flex; } /*Indicator*/ .c_chip_indicator_accepted { background: var(--positive-color); opacity: 0.7; } .c_chip_indicator_rejected { background: var(--negative-color); opacity: 0.7; } .c_chip_indicator_pending { background: var(--light); opacity: 0.2; } .c_chip_indicator_additions { background: var(--third-color); opacity: 0.7; } .c_chip_indicator_approved { background: var(--blue-color); opacity: 0.7; } .c_chip_indicator_withdrawn { background: var(--light); opacity: 0.8; } /*Shortcuts [data-chip]*/ [data-chip~=primary] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=primary]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=secondary] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=secondary]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=third] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=third]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=white] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=white]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=hollow] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=hollow]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=positive] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=positive]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=negative] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=negative]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=blue] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=blue]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=pending] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=pending]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=additions] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=additions]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=requestadditions] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=requestadditions]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=negotiating] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=negotiating]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=approved] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=approved]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=evaluation] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=evaluation]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=accepted] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=accepted]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=rejected] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=rejected]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=withdrawn] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=withdrawn]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=draft] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=draft]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } [data-chip~=receivedoffers] { /*Set default properties*/ /*Outlined*/ /*Outlined*/ } [data-chip~=receivedoffers]:not([data-chip*=sm], [data-chip*=lg], [data-chip*=md]) { padding: var(--_chip__padding); } /*Specials*/ .searchPhraseTags .c_chip_with_rightlink { width: 100%; display: flex; justify-content: space-between; font-size: 1.7rem; } .searchPhraseTags .c_chip_with_rightlink > a > span:first-of-type:not(:only-of-type) { width: 2rem !important; max-height: 2rem !important; } .searchPhraseTags .c_chip_with_rightlink > a > span:last-of-type { width: 100%; display: flex; align-items: center; } .searchPhraseTags .c_chip_with_rightlink > a:first-of-type { width: 100%; height: 3.4rem; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .searchPhraseTags .c_chip_with_rightlink > a:last-of-type { height: 3.4rem; display: flex; align-items: center; } /*Deprecated*/ .app_tags_wrapper_small .app_tags_tag, .app_tags_wrapper_details .app_tags_tag { padding: 0.2rem 0.7rem; font-size: 1.15rem; border-radius: 10rem; min-height: 2rem; font-weight: 500; } .app_feed_tag { border-radius: 10rem; padding: 0.2rem 0.7rem; display: inline-block; } .app_tags_wrapper a { text-decoration: none !important; } .app_tags_tag:not(.app_tags_tag_texticon) > span:first-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle), .app_tags_tag:not(.app_tags_tag_texticon) > span:last-of-type:not(:only-of-type):not(:nth-of-type(2)):not(.fa-plus-circle):not(.fa-minus-circle) { width: auto; text-align: center; background-position: top; } /*Secondary*/ /*Third*/ /*Fourth*/ /*Positive*/ /*Negative*/ /*Blue*/ /*Hollow*/ .app_tags_tag.app_tags_tag_neutral_hollow, .app_tags_tag.app_tags_tag_orange_ghost { border-style: solid; border-width: 1px; } /*Hollow Grey*/ .app_tags_tag.app_tags_tag_grey_hollow_small { border-style: solid; border-width: 1px; } /*Dashed*/ .app_tags_tag.app_tags_tag_dashed { border-style: dashed; border-width: 2px; } /*When chips are a link make a hover effect*/ /*A medium color icon on the left of a chip*/ /*Filter to color a svg image to the left of a chip (used on skills)*/ .app_tags_tag.app_tags_tag_neutral.app_tags_tag_withimage > span:first-child:not(:only-of-type) { filter: invert(75%) sepia(53%) saturate(352%) hue-rotate(1deg) brightness(138%) contrast(47%); } .app_tags_tag.app_tags_tag_positive.app_tags_tag_withimage > span:first-child:not(:only-of-type) { filter: invert(40%) sepia(81%) saturate(181%) hue-rotate(128deg) brightness(55%) contrast(100%); } .app_tags_tag.app_tags_tag_negative.app_tags_tag_withimage > span:first-child:not(:only-of-type) { filter: invert(9%) sepia(57%) saturate(1000%) hue-rotate(297deg) brightness(100%) contrast(17%); } /*Set overall values*/ /*Set large toggle values*/ /*Calc values*/ /*Style large*/ .c_toggle__container { display: inline-flex; } .c_toggle__container .c_toggle__item { transition: 0.3s ease-in; width: 9rem; height: 4rem; display: inline-flex; border-radius: 4rem; position: relative; cursor: pointer; } .c_toggle__container .c_toggle__item:after { background-color: white; transition: 0.3s ease-in; content: ""; width: 3rem; height: 3rem; display: inline-flex; border-radius: 50%; position: absolute; top: 0.5rem; left: 0.5rem; } .c_toggle__container input { display: none; } .c_toggle__container input:checked ~ #js_boost_button { display: block; animation: slide_in 0.3s linear 1; } @keyframes slide_in { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .c_toggle__container input:checked + .c_toggle__item_with_slide_effect { animation: slide_left 0.3s linear 1; } @keyframes slide_left { 0% { transform: translateX(40%); } 100% { transform: translateX(0); } } .c_toggle__container input:checked + .c_toggle__item:after { left: 5.5rem; background-color: white; } /*Gradient background and ball*/ .c_toggle__item_with_premium_gradient { background: linear-gradient(to right, var(--gradient-orange-to-red-light)) !important; } .c_toggle__item_with_premium_gradient:after { background-color: var(--negative-color) !important; } /*Disabled*/ .c_toggle_disabled { opacity: 0.3; } /*Set small toggle values*/ /*Calc values*/ /*Style*/ .c_toggle__container.c_toggle__container_small .c_toggle__item { width: 3.7rem; height: 2rem; border-radius: 2rem; } .c_toggle__container.c_toggle__container_small .c_toggle__item:after { width: 1.5rem; height: 1.5rem; top: 0.25rem; left: 0.25rem; } .c_toggle__container.c_toggle__container_small input:checked + .c_toggle__item:after { left: 1.95rem; } /*Set xsmall toggle values*/ /*Calc values*/ /*Style*/ .c_toggle__container.c_toggle__container_xsmall .c_toggle__item { width: 2.8rem; height: 1.5rem; border-radius: 1.5rem; } .c_toggle__container.c_toggle__container_xsmall .c_toggle__item:after { width: 1.125rem; height: 1.125rem; top: 0.1875rem; left: 0.1875rem; } .c_toggle__container.c_toggle__container_xsmall input:checked + .c_toggle__item:after { left: 1.4875rem; } .c_progress_bar__container { width: 100%; height: 0.7rem; margin: 0 auto; position: relative; border-radius: 3.5rem; overflow: hidden; } .c_progress_bar__child { width: 100%; height: 100%; } .c_progress_bar__shrinker { background-color: var(--third-color-low); position: absolute; top: 0; right: 0; width: 33%; } .c_progress__icons { display: inline-block; width: 100%; position: relative; height: 1.5rem; } .c_progress__icons > span { position: absolute; } .c_progress__icons > .fa-lock-open, .c_progress__icons > .fa-lock { left: 50%; transform: translateX(-50%); } .c_progress__icons > .fa-stars, .c_progress__icons > .fa-star { left: 70%; transform: translateX(-50%); } .c_progress__icons > .fa-trophy-star, .c_progress__icons > .fa-trophy, .c_progress__icons > .fa-gift, .c_progress__icons > .fa-gifts { left: 90%; transform: translateX(-50%); } .c_progress__icons > .fa-lock-open:not(.c_progress__icons_inactive), .c_progress__icons > .fa-stars:not(.c_progress__icons_inactive), .c_progress__icons > .fa-trophy-star:not(.c_progress__icons_inactive), .c_progress__icons > .fa-gifts:not(.c_progress__icons_inactive) { color: var(--positive-color); } .c_progress__icons > .fa-lock.c_progress__icons_inactive, .c_progress__icons > .fa-star.c_progress__icons_inactive, .c_progress__icons > .fa-trophy.c_progress__icons_inactive, .c_progress__icons > .fa-gift.c_progress__icons_inactive { color: var(--transparent-md); } /*Progress*/ .app_progress_small { height: 0.5rem; border-radius: 0.25rem; position: relative; display: flex; } .app_progress_small > span { width: 100%; height: 0.5rem; right: 0; top: 0; position: absolute; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .app_progress_small_icons { position: relative; height: 2rem; width: 100%; } .app_progress_small_icons > span.fa-lock { position: absolute; left: calc(50% - 14px); } .app_progress_small_icons > span.fa-star { position: absolute; left: calc(70% - 14px); } .app_progress_small_icons > span.fa-bolt { position: absolute; left: calc(90% - 14px); } /*Progress statistics*/ .app_progress_stats { height: 0.7rem; border-radius: 1rem; } .app_progress_stats > span { height: 0.7rem; border-bottom-right-radius: 1.1rem; border-top-right-radius: 1.1rem; } .app_progress_stats.app_progress_stats_higher { height: 1.2rem; border-radius: 0.4rem; } .app_progress_stats.app_progress_stats_higher > span { height: 1.2rem; border-bottom-right-radius: 0.4rem; border-top-right-radius: 0.4rem; } .app_progress_stats.app_progress_small { overflow: hidden; position: relative; } .app_progress_stats.app_progress_small > span { animation: slideInFromLeft 0.7s ease; } .c_tabs__container input:nth-of-type(1):checked ~ .c_tabs__selected { transform: translateX(0); } .c_tabs_1 .c_tabs__item { width: 100%; } .c_tabs_1 .c_tabs__selected { width: 100%; } .c_tabs input:nth-of-type(2):checked ~ .c_tabs__selected { transform: translateX(100%); } .c_tabs_2 .c_tabs__item { width: 50%; } .c_tabs_2 .c_tabs__selected { width: 50%; } .c_tabs input:nth-of-type(3):checked ~ .c_tabs__selected { transform: translateX(200%); } .c_tabs_3 .c_tabs__item { width: 33.3333333333%; } .c_tabs_3 .c_tabs__selected { width: 33.3333333333%; } .c_tabs input:nth-of-type(4):checked ~ .c_tabs__selected { transform: translateX(300%); } .c_tabs_4 .c_tabs__item { width: 25%; } .c_tabs_4 .c_tabs__selected { width: 25%; } .c_tabs input:nth-of-type(5):checked ~ .c_tabs__selected { transform: translateX(400%); } .c_tabs_5 .c_tabs__item { width: 20%; } .c_tabs_5 .c_tabs__selected { width: 20%; } .c_tabs input:nth-of-type(6):checked ~ .c_tabs__selected { transform: translateX(500%); } .c_tabs_6 .c_tabs__item { width: 16.6666666667%; } .c_tabs_6 .c_tabs__selected { width: 16.6666666667%; } .c_tabs input:nth-of-type(7):checked ~ .c_tabs__selected { transform: translateX(600%); } .c_tabs_7 .c_tabs__item { width: 14.2857142857%; } .c_tabs_7 .c_tabs__selected { width: 14.2857142857%; } .c_tabs input:nth-of-type(8):checked ~ .c_tabs__selected { transform: translateX(700%); } .c_tabs_8 .c_tabs__item { width: 12.5%; } .c_tabs_8 .c_tabs__selected { width: 12.5%; } .c_tabs__container { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0.3rem; border-radius: 1.2rem; border: 0.1rem solid var(--transparent-xs); } .c_tabs { display: flex; position: relative; width: 100%; border-radius: 1.2rem; height: 3rem; } .c_tabs__container_onwhite .c_tabs { background: transparent; } .c_tabs__container_tall .c_tabs { border-radius: 1.6rem; } .c_tabs * { z-index: 2; } .c_tabs input[type=radio] { display: none; } .c_tabs__item, .c_tabs label.c_tabs__item { display: inline-block; text-align: center; height: 3rem; font-weight: 600; border-radius: 0.9rem; cursor: pointer; transition: color 0.15s ease-in, background 0.15s ease-in; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(1.3rem, 0.5vw + 1.05rem, 1.5rem); padding-top: 0.375rem; } .c_tabs__container_tall .c_tabs__item, .c_tabs__container_tall .c_tabs label.c_tabs__item { border-radius: 1.3rem; } .c_tabs__container_onwhite .c_tabs input[type=radio]:checked + label.c_tabs__item:hover { background: inherit; } .c_tabs__selected { position: absolute; display: flex; height: 3rem; z-index: 1; border-radius: 0.9rem; transition: 0.25s ease-out; } .c_tabs__container_tall .c_tabs__selected { border-radius: 1.3rem; } .c_tabs_container_3:not(.c_tabs_container_3_left), .c_tabs_container_2:not(.c_tabs_container_3_left) { text-align: center; margin-left: auto; margin-right: auto; } @media (max-width: 70.1875rem) { .c_tabs_container_3:not(.c_tabs_container_3_left), .c_tabs_container_2:not(.c_tabs_container_3_left) { width: 100%; min-width: 100%; max-width: 100%; } } .c_tabs_container_3.c_tabs_container_3_left { text-align: center; } @media (max-width: 70.1875rem) { .c_tabs_container_3.c_tabs_container_3_left { width: 100%; min-width: 100%; max-width: 100%; } } .c_tabs_container_3 { min-width: min(100%, 56rem); max-width: min(56rem, 100%); } .c_tabs_container_2 { min-width: min(100%, 40rem); max-width: min(40rem, 100%); } /*Deprecated*/ .app_tabs_first > a > div:not(:only-of-type):last-of-type { background: var(--secondary-bg); color: var(--secondary-color); border: 1px solid var(--secondary-bg); } .notification { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: 0.75rem; border-radius: 50%; background-color: var(--secondary-color); transition: 0.15s ease-in; } .c_sidemenu { list-style: none; padding: 0; padding-top: 2.6rem; margin: 0; } .c_sidemenu > li { display: flex; align-items: center; margin-bottom: 0.5rem; transition: all 0.2s ease-in; } .c_sidemenu > li:hover:not(.c_sidemenu_divider) > a, .c_sidemenu_active { cursor: pointer; border-left: 4px solid var(--transparent-md); } .c_sidemenu > li > a, .c_sidemenu > li > div { text-decoration: none !important; display: flex; align-items: center; padding: 0.3rem 1rem; width: 100%; border-left: 4px solid transparent; transition: all 0.2s ease-in; } .c_main_wrapper_padview .c_sidemenu > li > a, .c_main_wrapper_padview .c_sidemenu > li > div { flex-direction: column; } @media (max-width: 70.1875rem) { .c_sidemenu > li > a, .c_sidemenu > li > div { flex-direction: column; } } @media (max-width: 49.9375rem) { .c_sidemenu > li > a, .c_sidemenu > li > div { flex-direction: row; } } .c_sidemenu > li > a > div:first-of-type, .c_sidemenu > li > div > div:first-of-type { margin-right: 0.5rem; margin-left: 0.5rem; width: 2rem; min-width: 2rem; text-align: center; line-height: 1; } .c_sidemenu > li > a > div:last-of-type, .c_sidemenu > li > div > div:last-of-type { font-weight: 400; margin-left: 0.2rem; } .c_sidemenu > li > a > div:last-of-type > a, .c_sidemenu > li > div > div:last-of-type > a { text-decoration: none !important; } .c_main_wrapper_padview .c_sidemenu > li > a > div:last-of-type, .c_main_wrapper_padview .c_sidemenu > li > div > div:last-of-type { font-size: 0.8rem; margin-top: 0.3rem; } @media (max-width: 70.1875rem) { .c_sidemenu > li > a > div:last-of-type, .c_sidemenu > li > div > div:last-of-type { font-size: 0.8rem; margin-top: 0.3rem; } } @media (max-width: 49.9375rem) { .c_sidemenu > li > a > div:last-of-type, .c_sidemenu > li > div > div:last-of-type { font-size: 1.7rem; margin-top: 0; } } .c_sidemenu .c_sidemenu__title { cursor: pointer; display: flex; width: 100%; } .c_sidemenu .c_sidemenu__title > span:first-child { cursor: pointer; } .c_sidemenu .c_sidemenu__item { flex-direction: column; align-items: flex-start; position: relative; } .c_sidemenu .c_sidemenu__item:hover > .c_sidemenu__sub { display: block; z-index: 3; } .c_sidemenu .c_sidemenu__sub { padding: 0.5rem; box-shadow: 0.6px 0px 0.6px rgba(0, 0, 0, 0.014), 1.3px 0px 1.3px rgba(0, 0, 0, 0.02), 2.5px 0px 2.5px rgba(0, 0, 0, 0.025), 4.5px 0px 4.5px rgba(0, 0, 0, 0.03), 8.4px 0px 8.4px rgba(0, 0, 0, 0.036), 20px 0px 20px rgba(0, 0, 0, 0.05); margin-left: 0.6rem; display: none; position: absolute; left: 88%; top: -0.8rem; background: var(--white-bg); border-radius: 1.6rem; } .c_sidemenu .c_sidemenu__sub > li { list-style: none; white-space: nowrap; padding: 0; margin: 0; } .c_sidemenu .c_sidemenu__sub > li:hover > a { background: var(--transparent-xs); } .c_sidemenu .c_sidemenu__sub > li > a { transition: background 0.2s; display: flex; gap: 1rem; width: 100%; text-decoration: none !important; font-size: 1.3rem; font-weight: normal; padding: 1rem; border-radius: 1rem; } @media (max-width: 49.9375rem) { .c_sidemenu .c_sidemenu__sub > li > a { padding: 0; margin-bottom: 0.5rem; } } @media (max-width: 49.9375rem) { .c_sidemenu .c_sidemenu__sub { position: relative; left: 0; display: flex; flex-direction: column; margin-left: 4.7rem; margin-top: 1rem; box-shadow: none; padding: 0; } } .c_sidemenu_divider { font-weight: 700; margin-top: 2rem; margin-left: 2rem; color: var(--transparent-lg); } .c_main_wrapper_padview .c_sidemenu_divider { visibility: hidden; } @media (max-width: 70.1875rem) { .c_sidemenu_divider { visibility: hidden; } } @media (max-width: 49.9375rem) { .c_sidemenu_divider { visibility: visible; } } .c_main_wrapper_padview .c_sidemenu { text-align: center; } @media (max-width: 70.1875rem) { .c_sidemenu { text-align: center; } } .c_sidemenu_active, .c_sidemenu > li > a.c_sidemenu_active { border-left: 4px solid var(--primary-bg); } .c_sidemenu_active > div:last-of-type, .c_sidemenu > li > a.c_sidemenu_active > div:last-of-type { font-weight: 700; } .c_sidemenu_active > div > span, .c_sidemenu > li > a.c_sidemenu_active > div > span { font-weight: 600 !important; } .c_sidemenu__actionicons { justify-content: center; display: flex; grid-gap: 1rem; } .c_main_wrapper_padview .c_sidemenu__actionicons { flex-direction: column; justify-content: center; margin: auto; gap: 3rem; margin-top: 3rem; } @media (max-width: 70.1875rem) { .c_sidemenu__actionicons { flex-direction: column; justify-content: center; margin: auto; } .c_sidemenu__actionicons_padviewtoggle { display: none; } .c_sidemenu__actionicons_widetoggle { display: none; } .c_sidemenu__actionicons_fullheighttoggle { display: none; } } @media (max-width: 49.9375rem) { .c_sidemenu__actionicons { flex-direction: row; } } .c_sidemenu__actionicons > span { font-size: 1.6rem; min-width: 2.2rem; } .c_sidemenu__actionicons_hr { margin-left: 2rem; margin-top: 1.5rem; padding-top: 1rem; } .c_main_wrapper_padview .c_sidemenu__actionicons_hr { margin-left: 0.5rem !important; } @media (max-width: 70.1875rem) { .c_sidemenu__actionicons_hr { margin-left: 0.5rem !important; } } .c_sidemenu__logotype { margin: auto; text-align: center; justify-content: center; margin-top: 1rem; } /*Mobile*/ @media (max-width: 50rem) { .c_hamburger { background-color: var(--transparent-2xs); display: block; position: fixed; top: 1rem; left: 1rem; z-index: 101; -webkit-user-select: none; user-select: none; padding: 0.5rem; border-radius: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 1rem; height: 3.4rem; width: 3.4rem; } .c_hamburger_input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -8px; cursor: pointer; opacity: 0; z-index: 105; -webkit-touch-callout: none; } .c_hamburger_input:checked ~ span { color: var(--white-color); opacity: 1; transform: rotate(45deg) translate(-1px, -1px); } .c_hamburger_input:checked ~ span:nth-of-type(2) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } .c_hamburger_input:checked ~ span:nth-of-type(3) { transform: rotate(-45deg) translate(3px, -2px); } .c_hamburger_input:checked ~ ul { transform: none; } .c_hamburger > span { background-color: var(--white-color); display: block; width: 22px; height: 3px; margin-bottom: 4px; position: relative; border-radius: 3px; z-index: 104; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; } .c_hamburger > span:nth-of-type(2) { transform-origin: 0% 0%; } .c_hamburger > span:nth-of-type(3) { transform-origin: 0% 100%; margin-bottom: 0; } .c_sidemenu { background-color: var(--white-bg); position: fixed; width: 90%; height: 100vh; top: 0; left: 0; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-200%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); z-index: 103; overflow-x: scroll; } } ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.3); } } :root[data-theme=dark] ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.3); } :-moz-placeholder { color: rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) :-moz-placeholder { color: rgba(255, 255, 255, 0.3); } } :root[data-theme=dark] :-moz-placeholder { color: rgba(255, 255, 255, 0.3); } ::-moz-placeholder { color: rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) ::-moz-placeholder { color: rgba(255, 255, 255, 0.3); } } :root[data-theme=dark] ::-moz-placeholder { color: rgba(255, 255, 255, 0.3); } :-ms-input-placeholder { color: rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) :-ms-input-placeholder { color: rgba(255, 255, 255, 0.3); } } :root[data-theme=dark] :-ms-input-placeholder { color: rgba(255, 255, 255, 0.3); } .tag-editor, select, textarea, input[type=week], input[type=time], input[type=month], input[type=datetime-local], input[type=datetime], input[type=date], input[type=color], input[type=url], input[type=text], input[type=tel], input[type=search], input[type=password], input[type=select], input[type=number], input[type=email] { border-radius: 1.2rem; border-style: solid; border-width: 0.1rem; padding: 0.5rem 1rem 0.5rem 1rem; height: 4rem; font-family: Poppins, "Sans Serif"; transition: all 0.2s; } @media (max-width: 70.1875rem) { .tag-editor, select, textarea, input[type=week], input[type=time], input[type=month], input[type=datetime-local], input[type=datetime], input[type=date], input[type=color], input[type=url], input[type=text], input[type=tel], input[type=search], input[type=password], input[type=select], input[type=number], input[type=email] { font-size: 1.6rem !important; -webkit-appearance: none; font-family: Poppins, "Sans Serif"; padding: 1rem; } } textarea { height: auto; min-height: 4rem; } select:focus, textarea:focus, input[type=week]:focus, input[type=time]:focus, input[type=month]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=date]:focus, input[type=color]:focus, input[type=url]:focus, input[type=text]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=password]:focus, input[type=select]:focus, input[type=number]:focus, input[type=email]:focus, .app_input_text_large .select2-container--default.select2-container--focus .select2-selection--multiple { outline: none; border-style: solid; border-width: 0.1rem; } select:disabled, textarea:disabled, input[type=week]:disabled, input[type=time]:disabled, input[type=month]:disabled, input[type=datetime-local]:disabled, input[type=datetime]:disabled, input[type=date]:disabled, input[type=color]:disabled, input[type=url]:disabled, input[type=text]:disabled, input[type=tel]:disabled, input[type=search]:disabled, input[type=password]:disabled, input[type=select]:disabled, input[type=number]:disabled, input[type=email]:disabled { opacity: 0.3; } /*Variants*/ input.c_input_icon_left, input.c_input_icon_left:focus { position: relative; padding-left: 3.2rem; background-image: url("/Content/Images/Icons/magnifying-glass.svg"); background-repeat: no-repeat; background-position: left 1rem center; background-size: auto 40%; } /*Checkboxes*/ /*Checkox - slider*/ .c_slidecheckbox { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; border-radius: 2rem; background: #fff; padding: 0.25rem; } .c_slidecheckbox__item { min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 2rem; border: 0; background: transparent; cursor: pointer; user-select: none; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; transition: background-color 0.18s, box-shadow 0.18s, color 0.18s, transform 0.18s; } .c_slidecheckbox__item:hover:not(.is-active) { background: rgba(0, 0, 0, 0.04); } .c_slidecheckbox__item:active { transform: scale(0.98); } .c_slidecheckbox__item:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12); } .c_slidecheckbox__item.is-active { background: var(--secondary-bg); color: var(--secondary-color); font-weight: 700; transform: scale(1.02); } @media (max-width: 49.9375rem) { .c_slidecheckbox { grid-auto-flow: row; grid-auto-rows: auto; max-height: 240px; overflow-y: auto; scroll-snap-type: y proximity; } .c_slidecheckbox__item { border-radius: 12px; scroll-snap-align: start; } } /*Checkboxes - FilterButton*/ .c_checkboxes_filter_button > button { display: flex; align-items: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; } .c_checkboxes_filter_button > button:not(.c_checkboxes_filter_button_checked) > span.fad { display: none; } .c_checkboxes_filter_button > button > span.fal { display: none; } .c_checkboxes_filter_button > button:not(.c_checkboxes_filter_button_checked) > span.fal { display: inline-block; } .c_checkboxes_filter_button > button > span.fad { display: inline-block; } .c_checkboxes_filter_button > button > span.fal, .c_checkboxes_filter_button > button > span.fas, .c_checkboxes_filter_button > button > span.fad { font-size: 2rem; } /*Filter input checkbox*/ .c_checkboxes_filter_input { display: flex; gap: 2rem; } .c_checkboxes_filter_input > input { display: none; } .c_checkboxes_filter_input > label > span { font-size: 2rem; margin-right: 0.4rem; } .c_checkboxes_filter_input input + label > span:before { content: "\f0c8"; font-weight: 300; } .c_checkboxes_filter_input input:checked + label > span:before { content: "\f14a"; font-weight: 900; } /*Fancy checkboxes*/ .c_checkboxes_fancy > button { width: 10rem; height: 10rem; border-radius: 1.2rem; border-style: solid; border-width: 0.1rem; } .c_checkboxes_fancy > button > div > img { width: 55%; } /*Tiny MC - Override*/ .tox-tinymce { border-color: var(--input-border) !important; color: var(--input-color) !important; background: var(--input-bg) !important; border-radius: 1.2rem !important; border: 1px solid var(--input-bg) !important; } .tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount { color: var(--font-color-primary) !important; } .tox :not(svg):not(rect), .tox:not(.tox-tinymce-inline) .tox-editor-header, .tox .tox-toolbar-overlord { background: var(--input-bg) !important; } .tox:not(.tox-tinymce-inline) .tox-editor-header { box-shadow: none !important; } .tox .tox-sidebar-wrap, .tox .tox-edit-area__iframe { background: var(--input-bg-focus) !important; } .tox .tox-edit-area::before { border: 1px solid var(--input-border-focus) !important; border-radius: 0 !important; } .mce-content-body { font-family: Poppins, "Sans Serif" !important; } .tox .tox-tbtn svg { fill: var(--input-color) !important; } .tox .tox-tbtn:hover { color: var(--input-color) !important; background: var(--input-bg) !important; } .tox .tox-tooltip { border-radius: 1.2rem !important; } .tox .tox-tooltip__body { font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; color: var(--input-color) !important; background: var(--input-bg) !important; } /*Tag inside inputs*/ .tag-editor.ui-sortable { height: initial; padding: 0.4rem 0 !important; } .placeholder.ui-sortable-handle { width: calc(100% - 1px); } ul.ui-autocomplete.ui-front.ui-menu.ui-widget { padding: 0.6rem; } ul.ui-autocomplete.ui-front.ui-menu.ui-widget > li { padding: 1rem 0.5rem; border-radius: 0.8rem; } ul.ui-autocomplete.ui-front.ui-menu.ui-widget > li:hover { padding: 1rem 0.5rem; border-radius: 0.8rem; } /*Small input*/ input.c_input_small_text, select.c_input_small_text { height: 2.6rem; border-radius: 0.8rem; padding: 0 1rem 0 1rem; font-size: 1.3rem !important; } .app_input_small .select2-container--default .select2-selection--single .select2-selection__arrow, input.app_input_small, .app_input_small input { height: 2.6rem; border-radius: 0.8rem; } .app_input_small .select2-container--default .select2-selection--single, .app_input_small .select2-container--default .select2-selection--multiple { height: auto; padding-top: 0; font-size: 1.1rem; } /*Font family fallback*/ .datepick, .xdsoft_datetimepicker .xdsoft_label, .xdsoft_datetimepicker, .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th, .tag-editor { font-family: Poppins, "Sans Serif"; } /*File button picker*/ /* File upload */ .fileUpload { border-style: solid; border-width: 0.1rem; display: inline-block; width: 300px; max-width: 100%; border-radius: 1.2rem; vertical-align: bottom; height: 4rem; display: inline-flex; align-items: center; justify-content: center; } .fileUpload .fileBtn { height: 4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; width: 33%; min-width: 10rem; font-weight: 400; border-radius: 1.2rem 0 0 1.2rem; transition: background 0.1s ease-in; } .fileUpload .fileBtn label { text-align: center; font-size: 1.5rem; font-weight: 400; cursor: pointer; white-space: nowrap; } .fileUpload .fileName { overflow: hidden; white-space: nowrap; width: 67%; text-align: center; padding: 3px 0; height: 4rem; display: flex; align-items: center; justify-content: flex-start; margin-left: 1rem; } .fileBtn .fileUpload:after { clear: both; content: " "; display: block; height: 0; line-height: 0; visibility: hidden; } /*Specials*/ .app_fixinputradiusright > input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none; } .app_fixselectradiusleft > select { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: none; } .app_select_disabled { height: 4rem; border-radius: 1.2rem; white-space: nowrap; display: flex; align-items: center; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.1rem; } .app_select_disabled > div { margin-top: 0.3rem; } /*Radio button slider*/ .app_radiobutton_toggle { height: 4rem; display: flex; align-items: stretch; justify-content: center; position: relative; border-radius: 1.2rem; width: 100%; } .app_radiobutton_toggle_noheight { height: auto; } .app_radiobutton_toggle input[type=radio] { display: none; } .app_radiobutton_toggle input:checked + label { font-weight: 600; } .app_radiobutton_toggle input + label > img { margin: auto; width: 1.5rem; } .app_radiobutton_toggle input:first-of-type:checked ~ div { left: 0%; border-bottom-right-radius: 0; border-top-right-radius: 0; } .app_radiobutton_toggle input:not(:first-of-type):not(:last-of-type):checked ~ div { border-radius: 0; } .app_radiobutton_toggle input:last-of-type:checked ~ div { border-bottom-left-radius: 0; border-top-left-radius: 0; } .app_radiobutton_toggle label { font-family: Poppins, "Sans Serif"; font-size: 11px; font-weight: 400; z-index: 0; display: flex; align-items: center; justify-content: center; padding: 0.8rem 1.5rem; cursor: pointer; z-index: 1; text-align: center; transition: background-color 0.2s; } .app_radiobutton_toggle label:hover { background-color: var(--transparent-2xs); } .app_radiobutton_toggle label:hover:first-of-type { border-bottom-left-radius: 1.2rem; border-top-left-radius: 1.2rem; } .app_radiobutton_toggle label:hover:last-of-type { border-bottom-right-radius: 1.2rem; border-top-right-radius: 1.2rem; } .app_radiobutton_toggle .app_radiobutton_toggle_2_slider, .app_radiobutton_toggle .app_radiobutton_toggle_3_slider, .app_radiobutton_toggle .app_radiobutton_toggle_4_slider, .app_radiobutton_toggle .app_radiobutton_toggle_5_slider, .app_radiobutton_toggle .app_radiobutton_toggle_6_slider { height: 100%; position: absolute; border-radius: 1.2rem; transition: all 0.4s ease; } .app_radiobutton_toggle_2 div, .app_radiobutton_toggle_2 label { width: 50%; } .app_radiobutton_toggle_2 input:last-of-type:checked ~ div { left: 50%; } .app_radiobutton_toggle_3 div, .app_radiobutton_toggle_3 label { width: 33%; } .app_radiobutton_toggle_3 input:nth-of-type(2):checked ~ div { left: 33.333334%; } .app_radiobutton_toggle_3 input:last-of-type:checked ~ div { left: 66.666667%; } .app_radiobutton_toggle_4 div, .app_radiobutton_toggle_4 label { width: 25%; } .app_radiobutton_toggle_4 input:nth-of-type(2):checked ~ div { left: 25%; } .app_radiobutton_toggle_4 input:nth-of-type(3):checked ~ div { left: 50%; } .app_radiobutton_toggle_4 input:last-of-type:checked ~ div { left: 75%; } .app_radiobutton_toggle_5 div, .app_radiobutton_toggle_5 label { width: 20%; } .app_radiobutton_toggle_5 input:nth-of-type(2):checked ~ div { left: 20%; } .app_radiobutton_toggle_5 input:nth-of-type(3):checked ~ div { left: 40%; } .app_radiobutton_toggle_5 input:nth-of-type(4):checked ~ div { left: 60%; } .app_radiobutton_toggle_5 input:last-of-type:checked ~ div { left: 80%; } .app_radiobutton_toggle_6 div, .app_radiobutton_toggle_6 label { width: 16.6666666667%; } .app_radiobutton_toggle_6 input:nth-of-type(2):checked ~ div { left: 16.6666666667%; } .app_radiobutton_toggle_6 input:nth-of-type(3):checked ~ div { left: 33.3333333333%; } .app_radiobutton_toggle_6 input:nth-of-type(4):checked ~ div { left: 50%; } .app_radiobutton_toggle_6 input:nth-of-type(5):checked ~ div { left: 66.6666666667%; } .app_radiobutton_toggle_6 input:last-of-type:checked ~ div { left: 83.3333333333%; } /* Monthpicker - Brainville */ .monthpicker { visibility: hidden; width: 80px; } .monthpicker-wrapper { width: 80px; text-align: center; margin-top: -2px; } .monthpicker-display { height: 4rem; border-radius: 1.2rem; cursor: pointer; text-transform: capitalize; padding-left: 1.5rem; padding-right: 1.5rem; border: 1px solid rgba(0, 0, 0, 0.15) !important; } .mtz-monthpicker td.ui-state-active { border-radius: 1.2rem; } .mtz-monthpicker td:hover { border-radius: 1.2rem; } .mtz-monthpicker.ui-datepicker-header { padding: 1rem 0rem; } .ui-widget-content { border: none; border-radius: 1.5rem; box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); } /* Monthpicker - Statistics */ .monthpicker-display { height: 4rem; display: flex; align-items: center; border: none !important; margin-top: 0; min-width: 8rem !important; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.5rem; } .app_monthpicker_disabled .monthpicker-display { color: rgba(0, 0, 0, 0.4); } .app_monthpicker_disabled .monthpicker-display:after { content: "\f643"; font-family: "Font Awesome 7 Pro"; font-weight: 300; margin-left: 0.5rem; margin-top: 0; } .monthpicker-wrapper { width: 100% !important; margin-top: 0; } .monthpicker-wrapper > input { position: absolute; height: 0; } /*CKEditor*/ .cke_chrome, .cke_reset.cke_chrome { display: block; border: none !important; border-radius: 1.5rem; padding: 1rem !important; } .cke_contents { border: none; border-radius: 1.5rem; } .cke_bottom, .cke_top { padding: 3px 0 0 !important; background: transparent !important; margin-bottom: 0.6rem !important; } /*Select*/ .c_input_select_lenght_icon .select2.select2-container, .c_input_select_lenght_icon .select2.select2-container > .selection { min-width: 7rem; } /*Select 2*/ .select2-results__options--nested .select2-results__option { padding-left: 6px !important; } .select2-container { box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .select2-container .select2-selection--single { box-sizing: border-box; cursor: pointer; display: block; height: 28px; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__clear { position: relative; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 1.5rem; padding-right: 2.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--multiple { box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { box-sizing: border-box; border: none; font-size: 100%; padding: 0.5rem; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; user-select: none; -webkit-user-select: none; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-results__option span[class^=fa-], .select2-results__option span[class*=fa-] { font-size: 2rem; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline { float: right; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } li.select2-search > input.select2-search__field { min-width: 2.5em; } /*Classic*/ .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%); background-image: -o-linear-gradient(top, #fff 50%, #eee 100%); background-image: linear-gradient(to bottom, #fff 50%, #eee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: var(--font-color-primary); line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%); background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%); background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFCCCCCC", GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%); background-image: -o-linear-gradient(top, #fff 0%, #eee 50%); background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0); } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%); background-image: -o-linear-gradient(top, #eee 50%, #fff 100%); background-image: linear-gradient(to bottom, #eee 50%, #fff 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFFFFFFF", GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 9px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 9px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: #fff; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); overflow: hidden; } .select2-container--classic .select2-results__option[role=group] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled=true] { color: grey; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: #fff; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice { float: right; margin-left: 5px; margin-right: auto; } .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } /*Default*/ .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default .select2-selection--single { border-style: solid; border-width: 0.1rem; border-radius: 1.2rem; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 4rem; position: absolute; right: 0; width: 3rem; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--font-color-primary); line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: normal; margin-left: 0.3rem; font-size: 2.6rem; } .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { display: flex; align-items: center; height: 4rem; border: 1px solid rgba(0, 0, 0, 0); font-family: Poppins, "Sans Serif"; border-radius: 1.2rem; } .select2-container--default .select2-results__option[aria-selected=true] { border-radius: 0; } .select2-container--default .select2-selection--multiple { border-style: solid; border-width: 0.1rem; border-radius: 1.2rem; min-height: 4rem; height: auto; cursor: text; } .select2-container--default .select2-selection--multiple input { height: auto; } .select2-container--default .select2-selection--multiple .select2-selection__choice { border: none; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { box-sizing: border-box; list-style: none; margin: 0; padding: 0; width: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { margin-top: 0.5rem; float: left; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 0.5rem; margin-right: 0.5rem; margin-left: 0.5rem; } .select2-container--default .select2-selection--multiple .select2-selection__choice { border-radius: 2rem; cursor: default; float: left; margin-right: 0.5rem; margin-left: 0.5rem; margin-top: 0.35rem; margin-bottom: 0.35rem; padding: 0.2rem 1rem; padding-right: 3rem; display: flex; flex-direction: row-reverse; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: relative; font-size: 0; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:before { content: "\f00d"; font-family: "Font Awesome 7 Pro", "Sans Serif"; font-weight: 400; font-size: 1.5rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: inherit; cursor: pointer; padding-left: 0.7rem; padding-top: 0.05rem; color: var(--transparent-lg); } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover:before { color: var(--negative-color); } .select2-container--default .select2-results__group { margin-top: 10px; font-family: Poppins, sans-serif; cursor: default; display: block; padding: 6px; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default.select2-container--focus .select2-selection--multiple { outline: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option[role=group] { padding: 0; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2.select2-container, .select2.select2-container > .selection { width: 100% !important; outline: none; min-width: 16rem; } .select2-dropdown { border-style: solid; border-width: 1px; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; border-top: none; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; overflow: hidden; } .app_input_text_large > input { font-size: 1.6rem; padding: 1rem; } .app_input_text_large .select2-container--default .select2-selection--single, .app_input_text_large .select2-container--default .select2-selection--multiple { height: 4rem; font-size: 1.6rem; } .app_input_text_large > input, .app_main_search input.app_button, .app_main_search a.app_button, .app_main_search button.app_button, .app_main_search .app_button, .app_input_text_large > select { height: 4rem !important; } .highcharts-container .highcharts-axis > path { stroke-width: 0; } .c_table_grid { display: grid; grid-template-columns: repeat(5, auto); grid-auto-rows: minmax(min-content, auto); gap: 1.5rem 1rem; width: 100%; overflow-x: auto; } .c_table_grid a { text-decoration: none !important; } .c_table_grid > div:nth-of-type(5), .c_table_grid_row > div:last-of-type { position: sticky; right: 0; background-color: var(--center-center-bg); padding-left: 1rem; z-index: 1; } .c_table_grid_row { display: contents; } .c_table_grid_row > div:not(:last-of-type) { opacity: 0.7; transition: opacity 0.2s, transform 0.2s; } .c_table_grid_row:hover > div:not(:last-of-type) { opacity: 1; transform: scale(1.01); } .c_table_grid_header, .c_table_grid_item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; min-width: 10rem; } .c_table_grid_header { color: var(--grey-sm); } .c_table_simple tr > td:first-of-type { color: var(--font-color-secondary); } .c_table_simple tr > td:not(:last-of-type), .c_table_simple tr > th:not(:last-of-type) { padding-right: 2rem; } .c_table_simple tr > td:not(:first-of-type), .c_table_simple tr > th:not(:first-of-type) { font-weight: 600; } /*Deprecated*/ /*Default*/ table { border-collapse: collapse; } table tr td { padding-bottom: 0.5rem; } table tr td:first-child { padding-right: 1rem; } /*Chart as table statistics*/ .app_chart_astable > div { cursor: pointer; } .app_chart_astable > div > div:nth-child(2) > div > div:not(:first-of-type) { display: none; } /*Table statistics*/ .app_table_stats { width: 100%; border-collapse: collapse; } .app_table_stats tr th { color: var(--font-color-third); text-align: left; } .app_table_stats tr td { transition: all 0.2s ease-in; opacity: 0.8; } .app_table_stats tr td a { text-decoration: none !important; } .app_table_stats tr:hover td { opacity: 1; } .app_table_stats tr:hover td:first-child a { color: var(--secondary-color) !important; opacity: 1; } .app_table_stats tr td, .app_table_stats tr th { white-space: normal; border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08); padding: 1rem 0rem; font-weight: 600; } .app_table_stats tr td:not(:first-of-type), .app_table_stats tr th:not(:first-of-type) { padding-left: 2rem; } /*Table grid layout*/ .app_table_gridlayout { border-radius: 1.5rem; width: 100%; } .app_table_gridlayout tr { transition: 0.3s background; } .app_table_gridlayout tr > th, .app_table_gridlayout tr > th a, .app_table_gridlayout tfoot tr:nth-of-type(odd) > td, .app_table_gridlayout tfoot tr:nth-of-type(even) > td { text-decoration: none; } .app_table_gridlayout tr > th:first-of-type { border-top-left-radius: 1.5rem; } .app_table_gridlayout tr > th:last-of-type { border-top-right-radius: 1.5rem; } .app_table_gridlayout tr > td, .app_table_gridlayout tr > th { padding: 1rem; text-align: left; } .app_table_gridlayout tfoot tr td:first-of-type { border-bottom-left-radius: 1.5rem; } .app_table_gridlayout tfoot tr td:last-of-type { border-bottom-right-radius: 1.5rem; } .app_table_gridlayout tr > td a { text-decoration: none !important; } .app_table_gridlayout tr > td a:not(.fal) { font-weight: 600; } .c_table_admin { border-collapse: collapse; font-size: 1.3rem; background: var(--white-bg); border-radius: 1.6rem; max-width: 100%; } .c_table_admin_overflow { overflow-x: auto; } .c_table_admin_relative tr { position: relative; } .c_table_admin th, .c_table_admin td { padding: 1.2rem 1rem; border: 1px solid var(--transparent-sm); white-space: nowrap; background: var(--white-bg); transition: all 0.3s; } .c_table_admin tr:hover:not(:first-child) > td { background: var(--transparent-2xs); } .c_table_admin tr:nth-of-type(1) th { text-align: left; background: var(--third-ongrey-bg); } .c_table_admin tr:nth-of-type(1) th:first-of-type { border-top-left-radius: 1.6rem; border-left-color: transparent; } .c_table_admin tr:nth-of-type(1) th:last-of-type { border-top-right-radius: 1.6rem; border-right-color: transparent; } .c_table_admin tr:nth-of-type(1) th { border-top: none; } tr.c_table_admin_active:hover:not(:first-child) td { background-color: var(--positive-bg-hover); } tr.c_table_admin_active td { background-color: var(--positive-bg); } tr.c_table_admin_active_half:hover:not(:first-child) td { background-color: var(--positive-bg-60); } tr.c_table_admin_active_half td { background-color: var(--positive-bg-40); } tr.c_table_admin_inactive:hover:not(:first-child) td { background-color: var(--negative-bg-hover); } tr.c_table_admin_inactive td { background-color: var(--negative-bg); } tr.c_table_admin_warning:hover:not(:first-child) td { background-color: var(--warning-bg-hover); } tr.c_table_admin_warning td { background-color: var(--warning-bg); } .c_table_admin_large_width { max-width: 36rem; overflow: hidden; text-overflow: ellipsis; } /*Special classes*/ .app_table_tdheight6 tr td { height: 6rem; } .app_table_oddpaddingbottom tr:nth-of-type(even) > td { padding-bottom: 2rem; } .app_table_right_align_everythingexceptfirst tr > th:not(:first-child), .app_table_right_align_everythingexceptfirst tr > td:not(:first-child) { text-align: right; } .app_table_largespace tr > td { padding-right: 1.5rem; } table.mtz-monthpicker { width: 100%; } .sp_echart_tooltip__content, .tooltipster-sidetip .tooltipster-box { border-style: solid; border-width: 0.1rem; border-radius: 1.2rem; box-shadow: 0 0.1px 1.4px rgba(0, 0, 0, 0.022), 0 0.3px 3.3px rgba(0, 0, 0, 0.032), 0 0.6px 6.3px rgba(0, 0, 0, 0.04), 0 1.1px 11.2px rgba(0, 0, 0, 0.048), 0 2.1px 20.9px rgba(0, 0, 0, 0.058), 0 5px 50px rgba(0, 0, 0, 0.08); } @keyframes tooltipster-fading { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tooltipster-rotating { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } 100% { transform: rotate(0); } } @keyframes tooltipster-scaling { 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .tooltipster-base { display: flex; pointer-events: none; position: absolute; } .tooltipster-box { flex: 1 1 auto; } .tooltipster-content { box-sizing: border-box; max-height: 100%; max-width: 100%; overflow: auto; } .tooltipster-ruler { bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; visibility: hidden; } .tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } .tooltipster-fade.tooltipster-show { opacity: 1; } .tooltipster-grow { -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-backface-visibility: hidden; } .tooltipster-grow.tooltipster-show { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); } .tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -o-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; } .tooltipster-swing.tooltipster-show { opacity: 1; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1); -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); -moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); -ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); -o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4); } .tooltipster-fall { -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; -ms-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); } .tooltipster-fall.tooltipster-initial { top: 0 !important; } .tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; top: 0 !important; opacity: 0; } .tooltipster-slide { -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); } .tooltipster-slide.tooltipster-initial { left: -40px !important; } .tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0 !important; opacity: 0; } .tooltipster-update-fade { animation: tooltipster-fading 400ms; } .tooltipster-update-rotate { animation: tooltipster-rotating 600ms; } .tooltipster-update-scale { animation: tooltipster-scaling 600ms; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-box { margin-top: 8px; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow { height: 9px; margin-left: -9px; top: 0; width: 18px; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background { left: 0; top: 1px; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped { top: -9px; } .tooltipster-sidetip.tooltipster-left .tooltipster-box { margin-right: 8px; } .tooltipster-sidetip.tooltipster-left .tooltipster-arrow { height: 18px; margin-top: -9px; right: 0; top: 0; width: 9px; } .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background { left: -1px; top: 0; } .tooltipster-sidetip.tooltipster-right .tooltipster-box { margin-left: 8px; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow { height: 18px; margin-top: -9px; left: 0; top: 0; width: 9px; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background { left: 1px; top: 0; } .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped { left: -9px; } .tooltipster-sidetip.tooltipster-top .tooltipster-box { margin-bottom: 8px; } .tooltipster-sidetip.tooltipster-top .tooltipster-arrow { bottom: 0; height: 9px; margin-left: -9px; width: 18px; } .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background { left: 0; top: -1px; } .tooltipster-sidetip .tooltipster-content { line-height: 1.6; padding: 1rem 1.5rem; } .tooltipster-sidetip .tooltipster-content p { margin-top: 0; } .tooltipster-sidetip .tooltipster-content p:last-of-type { margin-bottom: 0; } .tooltipster-sidetip .tooltipster-arrow { overflow: hidden; position: absolute; height: 9px; margin-left: 0; width: 18px; } .tooltipster-sidetip .tooltipster-arrow-background { border: 9px solid transparent; height: 0; position: absolute; width: 0; } .tooltipster-sidetip .tooltipster-arrow-border { border: 9px solid transparent; left: 0; top: 0; height: 0; position: absolute; width: 0; } .tooltipster-sidetip .tooltipster-arrow-uncropped { position: relative; } .sp_echart_tooltip { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; pointer-events: none; } .sp_echart_tooltip__content { padding: 1rem 1.5rem; text-align: center; font-family: Poppins, system-ui, sans-serif; } .sp_echart_tooltip__title { font-size: 1.5rem; opacity: 0.7; } .sp_echart_tooltip__value { font-size: 1.7rem; font-weight: 700; line-height: 1.2; } .chatBox, #Chat { z-index: 105; position: fixed; bottom: 0; right: 30%; width: 400px; font-weight: 400; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); font-size: 1.3rem !important; } @media (max-width: 49.9375rem) { .chatBox, #Chat { right: 0; width: 100%; z-index: 10000001; } .chatBox:empty, #Chat:empty { height: auto !important; } .chatBox:not(:empty), #Chat:not(:empty) { top: 0; height: 100% !important; padding-bottom: 6rem; } } .c_chat_container { z-index: 105; position: fixed; bottom: 0; right: 30%; width: 400px; border-top-left-radius: 2rem; border-top-right-radius: 2rem; box-shadow: 0 0 0.05rem rgba(121, 92, 52, 0.03), 0 0 0.5rem rgba(121, 92, 52, 0.05), 0 0 0.8rem rgba(121, 92, 52, 0.12); } @media (max-width: 49.9375rem) { .c_chat_container { right: 0; width: 100%; z-index: 10000001; } .c_chat_container:empty { height: auto !important; } .c_chat_container:not(:empty) { top: 0; height: 100% !important; } } .c_chat_header { padding: 1rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem; display: grid; grid-template-columns: fit-content(8ch) auto auto; align-items: flex-start; grid-column-gap: 0.8rem; white-space: normal; text-align: left; } @media (max-width: 49.9375rem) { .c_chat_header { border-radius: 0; padding-top: 6rem; } } @media (max-width: 49.9375rem) { .chatBox { width: 100%; height: 70% !important; right: 0; border-radius: 0; } .chatBox > div { display: flex; flex-direction: column; height: 100%; } .chatBox > div > div.chatBody { flex: 1; } .chatBox > div > div.chatBody > div { min-height: 100% !important; } } .chatHeader { background: #f8f7f2; padding: 10px; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; text-align: left; } .chatHeader .chatHeaderTitle { font-size: 13px; font-weight: 700; } .chatHeaderSubtitle, .chatHeaderSubtitle > div > span { font-size: 11px !important; } .chatBody { height: 350px; padding: 0 10px; overflow-y: scroll; } @media (max-width: 49.9375rem) { .chatBody .profilePictureWrapperSmall > .profilePicture, .chatBody .profilePictureWrapperSmall > .profilePictureFallback { width: 35px; height: 35px; } } .chatMessageInfo { position: relative; padding-bottom: 2px; } .chatMessageInfo > span:first-of-type { font-weight: 700; margin-right: 6px; font-size: 13px !important; } .chatMessageInfo > span:last-of-type { font-weight: 400; opacity: 0.7; font-size: 11px !important; } .chatBodyMessage { margin-left: 5.2rem; margin-right: 5.2rem; text-align: left; width: 100%; } .app_chatmessage_wrapper { position: relative; } .app_chatmessage_wrapper_wrapper { width: 100%; } .app_chatmessage_wrapper > div.app_chatmessage_picture { position: absolute; top: 0.5rem; left: 1rem; } .app_chatmessage_wrapper > div.app_chatmessage_picture_other { position: absolute; top: 0.5rem; right: 1rem; } .chatFooter { padding: 5px; } @media (max-width: 49.9375rem) { .chatFooter { padding-bottom: 20px; display: flex; } .chatFooter > div:first-child { flex-grow: 1; padding-right: 0.5rem !important; } } .chatNotification { padding: 5px; border-radius: 5px; font-size: 11px; margin-top: 5px; } .chatMessageText { line-height: 1.4; white-space: normal; } .chatMenu { animation: fadeIn ease-in-out 0.3s; display: inline-block; } .chatMenu span { font-size: 13px !important; } .chatMenu span:first-child { margin-left: 8px; } .chatMenu span:not(:last-child) { margin-right: 7px; } .messageUpdated { font-size: 11px !important; color: lightgray; } .tableEllips div { display: table; table-layout: fixed; width: 100%; margin-left: -2px; } .tableEllips span { display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*Specific classes when chat is in full view*/ .chatFullSizeCss { width: 100%; height: 100% !important; right: 0; border-radius: 0; } .chatFullSizeCss > div { display: flex; flex-direction: column; } .chatBox.chatFullSizeCss > div { height: 100%; } .chatBox.chatFullSizeCss > div > div.chatBody { flex: 1; } .chatBox.chatFullSizeCss > div > div.chatBody > div { min-height: 100% !important; } .chatBox.chatFullSizeCss > div > div.chatBody .chatMessageText { font-size: 16px !important; } .chatBox.chatFullSizeCss > div .chatMessageSender, .chatBox.chatFullSizeCss > div .chatMessageDate { font-size: 14px !important; } .chatBox.chatFullSizeCss > div > div.chatFooter span.button.width30Procent { width: 100% !important; } .chatBox.chatFullSizeCss .profilePictureWrapperSmall > .profilePicture, .chatBox.chatFullSizeCss .profilePictureWrapperSmall .chatBox.chatFullSizeCss .profilePictureWrapperSmall > .profilePictureFallback { width: 44px !important; height: 44px !important; } .chatBox.chatFullSizeCss .profilePictureWrapperSmall > .profilePictureFallback { padding-top: 11px; } .chatBox.chatFullSizeCss .chatBodyMessage { margin-left: 6.5rem; margin-right: 6.5rem; } .chatBox.chatFullSizeCss .chatBodyMessage.paddingLeft33 { padding-left: 44px; } @media (max-width: 49.9375rem) { .chatBox.chatFullSizeCss .chatBodyMessage.paddingLeft33 { padding-left: 35px; } } @media (max-width: 49.9375rem) { .chatOnlyDisplayOnDesktop { display: none; } } /* * Remodal - v1.0.7 * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ /* ========================================================================== Remodal's necessary styles ========================================================================== */ /* Hide scroll bar */ html.remodal-is-locked { overflow: hidden; -ms-touch-action: none; touch-action: none; } /* Anti FOUC */ .remodal, [data-remodal-id] { display: none; } /* Necessary styles of the overlay */ .remodal-overlay { position: fixed; z-index: 100; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; } /* Necessary styles of the wrapper */ .remodal-wrapper { position: fixed; z-index: 106; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch; } .remodal-wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; content: ""; } /* Fix iPad, iPhone glitches */ .remodal-overlay, .remodal-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Necessary styles of the modal dialog */ .remodal { position: relative; outline: none; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } @media (min-width: 70.1875rem) { .remodal { max-width: 860px; } } .remodal-is-initialized { /* Disable Anti-FOUC */ display: inline-block; } /*Our theme*/ .modalButtons { padding: 10px; border-top: 1px solid silver; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } /* Default theme styles for the background */ .remodal-bg.remodal-is-opening, .remodal-bg.remodal-is-opened { -webkit-filter: blur(3px); filter: blur(3px); } /* Default theme styles of the overlay */ .remodal-overlay { background: rgba(249, 177, 35, 0.08); } .remodal-overlay.remodal-is-opening { -webkit-animation-name: remodal-overlay-opening-keyframes; animation-name: remodal-overlay-opening-keyframes; } .remodal-overlay.remodal-is-closing { -webkit-animation-name: remodal-overlay-closing-keyframes; animation-name: remodal-overlay-closing-keyframes; } .remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } /* Default theme styles of the wrapper */ .remodal-wrapper { padding: 10px 10px 0; } /* Default theme styles of the modal dialog */ .remodal { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border-radius: 1.5rem; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-box-shadow: 0px 0px 56px 15px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 56px 15px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 56px 15px rgba(0, 0, 0, 0.3); } .remodal.remodal-is-opening { -webkit-animation-name: remodal-opening-keyframes; animation-name: remodal-opening-keyframes; } .remodal.remodal-is-closing { -webkit-animation-name: remodal-closing-keyframes; animation-name: remodal-closing-keyframes; } .remodal.remodal-is-opening, .remodal.remodal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } /* Vertical align of the modal dialog */ .remodal, .remodal-wrapper:after { vertical-align: middle; } /* Close button */ .remodal-close { position: absolute; top: 0; right: 0; display: block; overflow: visible; width: 35px; height: 35px; margin: 0; padding: 0; cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; text-decoration: none; color: #95979c; border: 0; outline: 0; background: transparent; } .remodal-close:before { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; font-size: 25px; line-height: 35px; position: absolute; top: 0; left: 0; display: block; width: 35px; content: "×"; text-align: center; } .remodal-close:hover, .remodal-close:focus { color: #2b2e38; } /* Dialog buttons */ .remodal-confirm, .remodal-cancel { font: inherit; display: inline-block; overflow: visible; min-width: 110px; margin: 0; padding: 12px 0; cursor: pointer; -webkit-transition: background 0.2s; transition: background 0.2s; text-align: center; vertical-align: middle; text-decoration: none; border: 0; outline: 0; } .remodal-confirm { color: #fff; background: #81c784; } .remodal-confirm:hover, .remodal-confirm:focus { background: #66bb6a; } .remodal-cancel { color: #fff; background: #e57373; } .remodal-cancel:hover, .remodal-cancel:focus { background: #ef5350; } /* Remove inner padding and border in Firefox 4+ for the button tag. */ .remodal-confirm::moz-focus-inner, .remodal-cancel::moz-focus-inner, .remodal-close::moz-focus-inner { padding: 0; border: 0; } /* Keyframes ========================================================================== */ @-webkit-keyframes remodal-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes remodal-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes remodal-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; } } @keyframes remodal-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; } } @-webkit-keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } @keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } /* IE8 ========================================================================== */ .lt-ie9 .remodal-overlay { background: #2b2e38; } .lt-ie9 .remodal { width: 700px; } .c_form { /*Widths*/ /*Row/Grids*/ } .c_form__container { display: flex; flex-direction: column; grid-gap: 1rem; justify-content: flex-start; width: 100%; } .c_form__buttons { display: flex; grid-gap: 1rem; justify-content: flex-start; align-items: center; width: 100%; margin-top: 1.5rem; } .c_form__title { display: flex; grid-gap: 1rem; justify-content: space-between; margin-top: 1.5rem; } @media (max-width: 49.9375rem) { .c_form__title { flex-direction: column; } } .c_form__title_no_margin { margin-top: 0; } .c_form__label { display: grid; grid-gap: 0.3rem; align-items: center; justify-content: flex-start; min-height: 2.4rem; white-space: nowrap; grid-template-rows: 1fr; grid-template-columns: auto 1fr 1fr 1fr; } .c_form__label label { overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .c_form__row { display: flex; grid-gap: 1rem; align-items: flex-start; justify-content: flex-start; } @media (max-width: 49.9375rem) { .c_form__row_mo_col { flex-direction: column; } } .c_form__item, .c_form__item_next_div { display: flex; flex-direction: column; grid-gap: 0.5rem; align-items: flex-start; justify-content: flex-start; } .c_form__item_next_div { width: 100%; } .c_form__item_next_div_nosize input, .c_form__item_next_div_nosize select { width: auto !important; } .c_form__input { width: 100%; } .c_form__input input, .c_form__input textarea, .c_form__input cke { width: 100%; } .c_form__input_two { grid-template-columns: minmax(50%, 1fr) 1fr; grid-template-rows: 1fr; display: grid; gap: 1rem; width: 100%; } .c_form__input_two input, .c_form__input_two textarea, .c_form__input_two cke { width: 100%; } .c_form__item_date input, .c_form__input_date input { width: 12.2rem; } .c_form__grid_3_column_mobile_2 { width: 100%; display: grid; grid-template-columns: minmax(33.3333333333%, 1fr) 1fr 1fr; } @media (max-width: 49.9375rem) { .c_form__grid_3_column_mobile_2 { grid-template-columns: minmax(50%, 1fr) 1fr; grid-template-rows: 1fr 1fr; } } .c_form__grid_3_column_mobile_1 { width: 100%; display: grid; grid-template-columns: minmax(33.3333333333%, 1fr) 1fr 1fr; } @media (max-width: 49.9375rem) { .c_form__grid_3_column_mobile_1 { grid-template-columns: minmax(100%, 1fr); grid-template-rows: 1fr; } } .c_form__row_3_column_mobile_1 { width: 100%; display: flex; } .c_form__row_3_column_mobile_1 > div { width: 33.3333333333%; } @media (max-width: 49.9375rem) { .c_form__row_3_column_mobile_1 { flex-direction: column; } .c_form__row_3_column_mobile_1 > div { width: 100%; } } .c_form__row_4_column_mobile_1 { width: 100%; display: flex; } .c_form__row_4_column_mobile_1 > div { width: 25%; } @media (max-width: 49.9375rem) { .c_form__row_4_column_mobile_1 { flex-direction: column; } .c_form__row_4_column_mobile_1 > div { width: 100%; } } .c_form__row_2_column_mobile_1 { width: 100%; display: flex; } .c_form__row_2_column_mobile_1 > div { width: 50%; } @media (max-width: 49.9375rem) { .c_form__row_2_column_mobile_1 { flex-direction: column; } .c_form__row_2_column_mobile_1 > div { width: 100%; } } .c_form_row_3_column_mobile_2_with_examples_on_2 { grid-row-gap: 0; width: 100%; display: grid; grid-template-rows: 1fr 3rem; grid-template-columns: auto auto auto; } @media (max-width: 49.9375rem) { .c_form_row_3_column_mobile_2_with_examples_on_2 { grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; } } .c_form__grid_half_two_column_mobile_2 { width: 50%; display: grid; grid-template-columns: minmax(50%, 1fr) 1fr; } @media (max-width: 49.9375rem) { .c_form__grid_half_two_column_mobile_2 { grid-template-columns: minmax(50%, 1fr) 1fr; grid-template-rows: 1fr 1fr; } } .c_form_row_2_column_2_and_3 { grid-row: 2; grid-column: 2/span 2; } @media (max-width: 49.9375rem) { .mo_form_row_2_column_2_and_3 { grid-row: 2; grid-column: 1; } } /*Fixes*/ #rating_Level_stars { white-space: nowrap; } #rating_Level_stars > span:last-child { display: block; font-size: 1.15rem; } /*C_gantt*/ .c_gantt_overextend__wrapper { display: inline-block; vertical-align: top; z-index: -1; height: 100%; top: 0; } .c_gantt_overextend__item { height: 100%; background-color: var(--negative-bg); border-left: 1px dashed var(--negative-color); border-right: 1px dashed var(--negative-color); } /*Borders*/ .ganttChart tr th, .ganttChart tr td { border-bottom-style: solid; border-bottom-width: 0.2rem; } .ganttChart tbody:last-of-type tr td { border-bottom: 1px solid transparent; } .ganttChart tr th:first-child, .resources td:first-child { border-right-style: solid; border-right-width: 0.2rem; } .ganttMonth { border-right-style: solid; border-right-width: 0.1rem; } /*Backgrounds*/ .ganttChart tr td, .ganttChart tr th { background-color: transparent; } .ganttChart tbody:last-of-type tr td { background-color: transparent; } .ganttHidden { padding: 0px !important; } table.ganttChart tr.resources td:nth-child(2) { font-size: 0px; } .ganttMonth div.totalPrice, tr.resources div.totalPrice, td > div.totalPrice { font-size: 11px !important; } .ganttChart { overflow: hidden; width: 100%; padding-top: 5px; border-spacing: 0; border-right: none; border-bottom: none; table-layout: fixed; white-space: nowrap; border-collapse: collapse; } .ganttChart tr th { padding: 10px 0; text-transform: uppercase; font-weight: normal; } .ganttChart tr th:first-child { text-align: left; } .ganttChart tr th:last-child { border-right: none; } .ganttChart tr td { padding-top: 1rem; padding-bottom: 1rem; position: relative; z-index: 2; -webkit-transition: background-color 0.1s linear; -ms-transition: background-color 0.1s linear; transition: background-color 0.1s linear; min-height: 85px; max-height: 85px; height: 85px; } .ganttChart tr:hover td { background-color: rgba(0, 0, 0, 0.03); } .ganttChart .pager { margin-left: 5px; } .ganttMonth { text-align: center; } .ganttMonth > div:first-child { font-size: 13px !important; } .ganttMonth > div:last-child { font-size: 11px; color: silver; } .ganttAssignedClick { float: left; margin-top: 3px; margin-right: 10px; margin-left: 0; cursor: pointer; } .ganttUnassignedClick { float: left; margin-top: 3px; margin-left: 10px; cursor: pointer; } .ganttSwitchOn, .ganttSwitchOff { float: left; margin-top: -7px; vertical-align: top; cursor: pointer; font-size: 28px; } .resources td:first-child { vertical-align: top; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .ganttExtent { font-size: 12px; } .resources > td > a { font-size: 13px !important; margin-left: 6px; } .resources td a, .resources .profilePictureWrapper, .resources td span { vertical-align: top; } .resources a { font-weight: 600; font-family: Poppins, Arial, Helvetica, sans-serif; font-size: 1.4rem; color: #2f3c4d; margin-bottom: 0; } .resources a:hover, .ganttItem a:hover { color: #2f3c4d; } .width100PixlarInput input { width: 100px; } .ganttItem { display: block; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 13px 8px; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; border-radius: 1rem; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; z-index: 100; cursor: pointer; pointer-events: initial; margin-top: 0.5rem; margin-bottom: 0.5rem; } .resources .planningRow { padding: 0px; margin: 0px; font-size: 0px; pointer-events: none; } .ganttItem a, .ganttItem span:not(.fas), span.ganttExtent { font-size: 11px !important; font-weight: 600; font-family: Poppins, sans-serif; } .ganttGroup { background-color: #feefd3; } .ganttShow { transition: all 0.2s ease-in-out; } .green100.ganttItem span.ganttExtent, .green80.ganttItem span.ganttExtent, .green60.ganttItem span.ganttExtent, .green40.ganttItem span.ganttExtent, .green20.ganttItem span.ganttExtent { margin-right: 5px; } .green100.ganttItem span.fas, .green80.ganttItem span.fas, .green60.ganttItem span.fas, .green40.ganttItem span.fas, .green20.ganttItem span.fas { font-size: 1.5rem; } .yellow100.ganttItem span.ganttExtent, .yellow80.ganttItem span.ganttExtent, .yellow60.ganttItem span.ganttExtent, .yellow40.ganttItem span.ganttExtent, .yellow20.ganttItem span.ganttExtent { margin-right: 5px; } .yellow100.ganttItem span.fas, .yellow80.ganttItem span.fas, .yellow60.ganttItem span.fas, .yellow40.ganttItem span.fas, .yellow20.ganttItem span.fas { font-size: 1.5rem; } .ganttGroup.ganttItem span.ganttExtent { color: rgb(119, 86, 24) !important; margin-right: 5px; } .ganttGroup.ganttItem span.fas { font-size: 1.5rem; color: rgb(119, 86, 24) !important; margin-right: 0.5rem; } .offerBg { background: transparent; border: 2px dashed #9c9c9c; } .unassigned, .unassignedHelp { background-color: #c2c2c2; color: #363636; } .unassigned:hover { background-color: #d6d6d6; } .assignedDotted, .assignedDottedHelp { border: 1px dashed #82cf3d; color: #363636; cursor: pointer; } .unassignedDotted, .unassignedDottedHelp { color: #363636; } .assignedPartialDotted, .assignedPartialDottedHelp { border: 1px dashed #a2e765; color: #363636; cursor: pointer; } .expires, .expiresHelp { border: 2px solid #910000; } .expiresDotted, .expiresDottedHelp { border: 1px dashed #910000; } .help { float: right; margin-right: 15px; margin-left: 5px; width: 14px; height: 14px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 5px; } .helpExpires { width: 12px; height: 12px; border-width: 1px; } .itemDetails { z-index: 1000; position: absolute; display: none; padding: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .itemDetailsType:last-child, .itemDetailsType:only-child { border-bottom: 0px solid silver; padding-bottom: 0px; margin-bottom: 0px; } .itemDetailsType { border-bottom: 1px solid silver; padding-bottom: 4px; margin-bottom: 4px; } .cellWidthTotal { display: flex; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; } .cellWidthTotal > div:nth-last-child(2) { border-right: none; } .cellWidth { border-right-style: solid; border-right-width: 0.1rem; height: 100%; } .flexDisplay { align-items: center; } .flexDisplay > a { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flexDisplay > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flexDisplay > span:first-child { white-space: nowrap; overflow: visible !important; text-overflow: inherit !important; } .button.iconPushButton.positiveButton > span:nth-of-type(2).fal:before { content: "\f14a"; font-weight: 900; } .button.iconPushButton > span:nth-of-type(2).fal { margin-left: 0.4rem; } .button.iconPushButton > span { cursor: pointer; } .tag-editor { padding: 0.35rem 0 !important; color: #775618 !important; min-height: 4rem !important; } .tag-editor.ui-sortable { padding: 0.35rem 0 !important; } .tag-editor li { margin: 0 !important; margin-top: 0.35rem !important; margin-bottom: 0.35rem !important; } .tag-editor li:has(.active) { margin-top: 0 !important; margin-bottom: 0 !important; } .tag-editor .tag-editor-spacer { width: 0.5rem !important; } .tag-editor .tag-editor-tag { line-height: 1; font-size: 1.5rem; } .tag-editor .tag-editor-tag.active { padding: 0 !important; } .tag-editor .tag-editor-tag:not(.active) { border-radius: 1.2rem 0 0 1.2rem !important; padding-left: 1rem !important; padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; } .tag-editor .tag-editor-delete { border-radius: 0 1.2rem 1.2rem 0 !important; padding-top: 0.15rem !important; padding-bottom: 0.1rem !important; } .tag-editor .tag-editor-delete:hover > i:before { color: var(--negative-color); } .tag-editor .tag-editor-delete i { line-height: 2rem !important; } .tag-editor .placeholder { padding-top: 0.4rem !important; font-size: 1.5rem !important; padding-left: 0.5rem !important; font-style: italic; } .tag-editor .tag-editor-tag.active input { padding: 0.2rem 0 0.2rem 1rem !important; font-size: 1.5rem !important; margin: 0 !important; border: none !important; height: 2.5rem; margin-top: 0.25rem !important; } .tag-editor .tag-editor-tag.active + .tag-editor-delete, .tag-editor .tag-editor-tag.active + .tag-editor-delete i { display: none; } .flag-icon-background { background-size: contain; background-repeat: no-repeat; position: relative; display: inline-block; line-height: 14px; border-radius: 1px; width: 19px; background-position: 14px; } .flag-icon { background-size: contain; background-repeat: no-repeat; position: relative; display: inline-block; line-height: 14px; border-radius: 1px; width: 19px; background-position: 0; } .flag-icon:before { content: " "; } .flag-icon.flag-icon-squared { width: 1em; } .flag-icon-1 { background-image: url("/Content/Images/Flags/1.svg"); } .flag-icon-2 { background-image: url("/Content/Images/Flags/2.svg"); } .flag-icon-3 { background-image: url("/Content/Images/Flags/3.svg"); } .flag-icon-4 { background-image: url("/Content/Images/Flags/4.svg"); } .flag-icon-5 { background-image: url("/Content/Images/Flags/5.svg"); } .flag-icon-6 { background-image: url("/Content/Images/Flags/6.svg"); } .flag-icon-7 { background-image: url("/Content/Images/Flags/7.svg"); } .flag-icon-8 { background-image: url("/Content/Images/Flags/8.svg"); } .flag-icon-9 { background-image: url("/Content/Images/Flags/9.svg"); } .flag-icon-10 { background-image: url("/Content/Images/Flags/10.svg"); } .flag-icon-11 { background-image: url("/Content/Images/Flags/11.svg"); } .flag-icon-12 { background-image: url("/Content/Images/Flags/12.svg"); } .flag-icon-13 { background-image: url("/Content/Images/Flags/13.svg"); } .flag-icon-14 { background-image: url("/Content/Images/Flags/14.svg"); } .flag-icon-15 { background-image: url("/Content/Images/Flags/15.svg"); } .flag-icon-16 { background-image: url("/Content/Images/Flags/16.svg"); } .flag-icon-17 { background-image: url("/Content/Images/Flags/17.svg"); } .flag-icon-18 { background-image: url("/Content/Images/Flags/18.svg"); } .flag-icon-19 { background-image: url("/Content/Images/Flags/19.svg"); } .flag-icon-20 { background-image: url("/Content/Images/Flags/20.svg"); } .flag-icon-21 { background-image: url("/Content/Images/Flags/21.svg"); } .flag-icon-22 { background-image: url("/Content/Images/Flags/22.svg"); } .flag-icon-23 { background-image: url("/Content/Images/Flags/23.svg"); } .flag-icon-24 { background-image: url("/Content/Images/Flags/24.svg"); } .flag-icon-25 { background-image: url("/Content/Images/Flags/25.svg"); } .flag-icon-26 { background-image: url("/Content/Images/Flags/26.svg"); } .flag-icon-27 { background-image: url("/Content/Images/Flags/27.svg"); } .flag-icon-28 { background-image: url("/Content/Images/Flags/28.svg"); } .flag-icon-29 { background-image: url("/Content/Images/Flags/29.svg"); } .flag-icon-30 { background-image: url("/Content/Images/Flags/30.svg"); } .flag-icon-31 { background-image: url("/Content/Images/Flags/31.svg"); } .flag-icon-32 { background-image: url("/Content/Images/Flags/32.svg"); } .flag-icon-33 { background-image: url("/Content/Images/Flags/33.svg"); } .flag-icon-34 { background-image: url("/Content/Images/Flags/34.svg"); } .flag-icon-35 { background-image: url("/Content/Images/Flags/35.svg"); } .flag-icon-36 { background-image: url("/Content/Images/Flags/36.svg"); } .flag-icon-37 { background-image: url("/Content/Images/Flags/37.svg"); } .flag-icon-38 { background-image: url("/Content/Images/Flags/38.svg"); } .flag-icon-39 { background-image: url("/Content/Images/Flags/39.svg"); } .flag-icon-40 { background-image: url("/Content/Images/Flags/40.svg"); } .flag-icon-41 { background-image: url("/Content/Images/Flags/41.svg"); } .flag-icon-42 { background-image: url("/Content/Images/Flags/42.svg"); } .flag-icon-43 { background-image: url("/Content/Images/Flags/43.svg"); } .flag-icon-44 { background-image: url("/Content/Images/Flags/44.svg"); } .flag-icon-45 { background-image: url("/Content/Images/Flags/45.svg"); } .flag-icon-46 { background-image: url("/Content/Images/Flags/46.svg"); } .flag-icon-47 { background-image: url("/Content/Images/Flags/47.svg"); } .flag-icon-48 { background-image: url("/Content/Images/Flags/48.svg"); } .flag-icon-49 { background-image: url("/Content/Images/Flags/49.svg"); } .flag-icon-50 { background-image: url("/Content/Images/Flags/50.svg"); } .flag-icon-51 { background-image: url("/Content/Images/Flags/51.svg"); } .flag-icon-52 { background-image: url("/Content/Images/Flags/52.svg"); } .flag-icon-53 { background-image: url("/Content/Images/Flags/53.svg"); } .flag-icon-54 { background-image: url("/Content/Images/Flags/54.svg"); } .flag-icon-55 { background-image: url("/Content/Images/Flags/55.svg"); } .flag-icon-56 { background-image: url("/Content/Images/Flags/56.svg"); } .flag-icon-57 { background-image: url("/Content/Images/Flags/57.svg"); } .flag-icon-58 { background-image: url("/Content/Images/Flags/58.svg"); } .flag-icon-59 { background-image: url("/Content/Images/Flags/59.svg"); } .flag-icon-60 { background-image: url("/Content/Images/Flags/60.svg"); } .flag-icon-61 { background-image: url("/Content/Images/Flags/61.svg"); } .flag-icon-62 { background-image: url("/Content/Images/Flags/62.svg"); } .flag-icon-63 { background-image: url("/Content/Images/Flags/63.svg"); } .flag-icon-64 { background-image: url("/Content/Images/Flags/64.svg"); } .flag-icon-65 { background-image: url("/Content/Images/Flags/65.svg"); } .flag-icon-66 { background-image: url("/Content/Images/Flags/66.svg"); } .flag-icon-67 { background-image: url("/Content/Images/Flags/67.svg"); } .flag-icon-68 { background-image: url("/Content/Images/Flags/68.svg"); } .flag-icon-69 { background-image: url("/Content/Images/Flags/69.svg"); } .flag-icon-70 { background-image: url("/Content/Images/Flags/70.svg"); } .flag-icon-71 { background-image: url("/Content/Images/Flags/71.svg"); } .flag-icon-72 { background-image: url("/Content/Images/Flags/72.svg"); } .flag-icon-73 { background-image: url("/Content/Images/Flags/73.svg"); } .flag-icon-74 { background-image: url("/Content/Images/Flags/74.svg"); } .flag-icon-75 { background-image: url("/Content/Images/Flags/75.svg"); } .flag-icon-76 { background-image: url("/Content/Images/Flags/76.svg"); } .flag-icon-77 { background-image: url("/Content/Images/Flags/77.svg"); } .flag-icon-78 { background-image: url("/Content/Images/Flags/78.svg"); } .flag-icon-79 { background-image: url("/Content/Images/Flags/79.svg"); } .flag-icon-80 { background-image: url("/Content/Images/Flags/80.svg"); } .flag-icon-81 { background-image: url("/Content/Images/Flags/81.svg"); } .flag-icon-82 { background-image: url("/Content/Images/Flags/82.svg"); } .flag-icon-83 { background-image: url("/Content/Images/Flags/83.svg"); } .flag-icon-84 { background-image: url("/Content/Images/Flags/84.svg"); } .flag-icon-85 { background-image: url("/Content/Images/Flags/85.svg"); } .flag-icon-86 { background-image: url("/Content/Images/Flags/86.svg"); } .flag-icon-87 { background-image: url("/Content/Images/Flags/87.svg"); } .flag-icon-88 { background-image: url("/Content/Images/Flags/88.svg"); } .flag-icon-89 { background-image: url("/Content/Images/Flags/89.svg"); } .flag-icon-90 { background-image: url("/Content/Images/Flags/90.svg"); } .flag-icon-91 { background-image: url("/Content/Images/Flags/91.svg"); } .flag-icon-92 { background-image: url("/Content/Images/Flags/92.svg"); } .flag-icon-93 { background-image: url("/Content/Images/Flags/93.svg"); } .flag-icon-94 { background-image: url("/Content/Images/Flags/94.svg"); } .flag-icon-95 { background-image: url("/Content/Images/Flags/95.svg"); } .flag-icon-96 { background-image: url("/Content/Images/Flags/96.svg"); } .flag-icon-97 { background-image: url("/Content/Images/Flags/97.svg"); } .flag-icon-98 { background-image: url("/Content/Images/Flags/98.svg"); } .flag-icon-99 { background-image: url("/Content/Images/Flags/99.svg"); } .flag-icon-100 { background-image: url("/Content/Images/Flags/100.svg"); } .flag-icon-101 { background-image: url("/Content/Images/Flags/101.svg"); } .flag-icon-102 { background-image: url("/Content/Images/Flags/102.svg"); } .flag-icon-103 { background-image: url("/Content/Images/Flags/103.svg"); } .flag-icon-104 { background-image: url("/Content/Images/Flags/104.svg"); } .flag-icon-105 { background-image: url("/Content/Images/Flags/105.svg"); } .flag-icon-106 { background-image: url("/Content/Images/Flags/106.svg"); } .flag-icon-107 { background-image: url("/Content/Images/Flags/107.svg"); } .flag-icon-108 { background-image: url("/Content/Images/Flags/108.svg"); } .flag-icon-109 { background-image: url("/Content/Images/Flags/109.svg"); } .flag-icon-110 { background-image: url("/Content/Images/Flags/110.svg"); } .flag-icon-111 { background-image: url("/Content/Images/Flags/111.svg"); } .flag-icon-112 { background-image: url("/Content/Images/Flags/112.svg"); } .flag-icon-113 { background-image: url("/Content/Images/Flags/113.svg"); } .flag-icon-114 { background-image: url("/Content/Images/Flags/114.svg"); } .flag-icon-115 { background-image: url("/Content/Images/Flags/115.svg"); } .flag-icon-116 { background-image: url("/Content/Images/Flags/116.svg"); } .flag-icon-117 { background-image: url("/Content/Images/Flags/117.svg"); } .flag-icon-118 { background-image: url("/Content/Images/Flags/118.svg"); } .flag-icon-119 { background-image: url("/Content/Images/Flags/119.svg"); } .flag-icon-120 { background-image: url("/Content/Images/Flags/120.svg"); } .flag-icon-121 { background-image: url("/Content/Images/Flags/121.svg"); } .flag-icon-122 { background-image: url("/Content/Images/Flags/122.svg"); } .flag-icon-123 { background-image: url("/Content/Images/Flags/123.svg"); } .flag-icon-124 { background-image: url("/Content/Images/Flags/124.svg"); } .flag-icon-125 { background-image: url("/Content/Images/Flags/125.svg"); } .flag-icon-126 { background-image: url("/Content/Images/Flags/126.svg"); } .flag-icon-127 { background-image: url("/Content/Images/Flags/127.svg"); } .flag-icon-128 { background-image: url("/Content/Images/Flags/128.svg"); } .flag-icon-129 { background-image: url("/Content/Images/Flags/129.svg"); } .flag-icon-130 { background-image: url("/Content/Images/Flags/130.svg"); } .flag-icon-131 { background-image: url("/Content/Images/Flags/131.svg"); } .flag-icon-132 { background-image: url("/Content/Images/Flags/132.svg"); } .flag-icon-133 { background-image: url("/Content/Images/Flags/133.svg"); } .flag-icon-134 { background-image: url("/Content/Images/Flags/134.svg"); } .flag-icon-135 { background-image: url("/Content/Images/Flags/135.svg"); } .flag-icon-136 { background-image: url("/Content/Images/Flags/136.svg"); } .flag-icon-137 { background-image: url("/Content/Images/Flags/137.svg"); } .flag-icon-138 { background-image: url("/Content/Images/Flags/138.svg"); } .flag-icon-139 { background-image: url("/Content/Images/Flags/139.svg"); } .flag-icon-140 { background-image: url("/Content/Images/Flags/140.svg"); } .app_width_35procent { width: 40% !important; } .app_width_65procent { width: 60% !important; } .p_blog__content h1 { font-size: 3rem; } .p_blog__content h2 { font-size: 2.2rem; } .p_blog__content p, .p_blog__content table { font-size: 1.5rem; } .p_blog__content img { margin-bottom: 2rem; border-radius: 2rem; } .p_blog__image { width: 100%; } @media (max-width: 49.9375rem) { .p_blog__image { width: 100%; } } .p_blog__image img { border-radius: 1.2rem; box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); width: 100%; } .p_blog__image_wide { width: 100%; } .p_blog__headline { margin-bottom: 1rem; margin-top: 0.5rem; } .l_make_blue_links p a { color: #006dd0 !important; } .l_padding_on_p p { padding-bottom: 1rem; } article#newsArticle1 h2 { margin-bottom: 1rem; margin-top: 2rem; } .wp-block-image img { width: 100%; } .l_statistics_search_dropdown { position: absolute; top: 7.2rem; z-index: 1000; } @media (max-width: 49.9375rem) { .l_statistics_search_dropdown { top: 5.2rem; width: 95%; } } .app_filter_click > div { padding: 0.2rem 1.3rem; border-radius: 1.4rem; font-weight: 700; opacity: 0.5; cursor: pointer; } .app_filter_click > div.app_filter_click_active, .app_filter_click > div:hover { background: white; opacity: 1; } .app_filter_select_withstyle { background: white; border-radius: 1.5rem; padding: 0.2rem 1rem; } .app_filter_select > select { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: transparent; font-weight: 700; opacity: 0.9; text-align: right; vertical-align: baseline; padding: 0; height: 1.8rem !important; border-radius: 0; } .app_filter_select > select > option { font-size: 2rem; } .app_filter_select > select > option:focus { opacity: 1; text-align: right; } .app_filter_select_temp { display: none; } .app_statfilter input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } .app_statfilter input[type=radio] + span { cursor: pointer; } .app_statfilter input[type=radio]:checked + span { background: white; padding: 0.2rem 1.3rem; border-radius: 1.4rem; font-weight: 700; cursor: pointer; } .app_id_filter .select2-container--default .select2-selection--single, .app_id_filter .select2-container--default .select2-selection--multiple { border: none; } .app_id_filter .select2-selection__rendered { font-size: 1.1rem; font-weight: 700; } .app_id_filter .select2-selection__placeholder { font-weight: 400; } .app_id_filter .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #3f3f3f; } label.app_opacity_low { cursor: text; white-space: nowrap; } .p_publicprofile_skilltagoverflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-flex; } .p_publicprofile_skilltagoverflow .c_chip_secondary { overflow: hidden; } .p_publicprofile_skilltagoverflow .c_chip_secondary > a:first-of-type { text-overflow: ellipsis; overflow: hidden; } .p_publicprofile_skilltagoverflow .c_chip_secondary > a:first-of-type > span { overflow: hidden; text-overflow: ellipsis; } .p_publicprofile_block__container { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; } .p_publicprofile_block__container_full { flex-direction: column; } .p_publicprofile_block__container_full .p_publicprofile_block_left, .p_publicprofile_block__container_full .p_publicprofile_block_right { width: 100%; max-width: 100%; padding-right: 0; } .p_publicprofile_block__container_compact { flex-direction: column; } .p_publicprofile_block__container_compact .p_publicprofile_block_left, .p_publicprofile_block__container_compact .p_publicprofile_block_right { width: 100%; max-width: 100%; } .p_publicprofile_block_left { width: 60%; display: flex; flex-direction: column; padding-right: clamp(1rem, -20vw + 21rem, 3rem); } .p_publicprofile_block_left > div:not(.clearOnPrint) { margin-bottom: 5rem; margin-bottom: min(max(1rem, calc(60px - 5vw)), 5rem); margin-bottom: clamp(1rem, 60px - 5vw, 5rem); } .p_publicprofile_block_right { width: 40%; display: flex; flex-direction: column; } .p_publicprofile_block_right > div:not(.clearOnPrint) { margin-bottom: 5rem; margin-bottom: min(max(1rem, calc(60px - 5vw)), 5rem); margin-bottom: clamp(1rem, 60px - 5vw, 5rem); } .p_publicprofile_block_item { padding: clamp(0rem, 3vw + -1.2rem, 1.5rem); border-radius: clamp(0rem, 4vw + -1.6rem, 2rem); } .p_publicprofile_block_item a.fal, .p_publicprofile_block_item a.fa-light { text-decoration: none; } .p_publicprofile_block__container_nopadding .l_padding_fluid_10_15 { padding: 0 !important; } .p_experience_layout_notassignment { margin-left: 0.3rem; padding-left: 2rem; position: relative; } .p_experience_layout_notassignment::before { content: ""; width: 1rem; height: 1rem; background-color: var(--secondary-color); border-radius: 50%; position: absolute; left: -5px; top: 1rem; transform: translateY(-50%); } .p_experience_layout_notassignment::after { content: ""; position: absolute; left: 0; top: 1rem; height: calc(100% - 1rem); width: 0.1rem; background-color: var(--secondary-color); } .p_experience_layout_assignment { margin-left: 0.3rem; padding-left: 2rem; position: relative; padding-top: 1rem; } .p_experience_layout_assignment::after { content: ""; position: absolute; left: 0; top: 1rem; height: calc(100% - 1rem); width: 0.1rem; border-left: 0.1rem solid var(--secondary-color); } /* Styles for groups with multiple items */ .js_todo_group_wrapper { position: relative; /* Apply stacking effect only within .js_todo_group_wrapper */ } .js_todo_group_wrapper .js_todo_group_items { position: relative; } .js_todo_group_wrapper .js_todo_item { position: relative; z-index: 1; } .js_todo_group_wrapper .js_todo_item_first { z-index: 4; } .js_todo_group_wrapper .js_todo_item > .app_feed_small_wrapper { transition: opacity 0.3s ease, min-height 0.3s ease, width 0.3s ease; } .js_todo_group_wrapper .js_todo_item > .app_feed_small_wrapper > * { transition: opacity 0.3s ease, min-height 0.3s ease; } .js_todo_group_wrapper_collapsed .js_todo_item_additional { overflow: hidden; margin-top: -1rem; /* Hide items beyond the third one in collapsed state */ } .js_todo_group_wrapper_collapsed .js_todo_item_additional > .app_feed_small_wrapper { border-top-left-radius: 0; border-top-right-radius: 0; margin: auto; } .js_todo_group_wrapper_collapsed .js_todo_item_additional > .app_feed_small_wrapper a, .js_todo_group_wrapper_collapsed .js_todo_item_additional > .app_feed_small_wrapper .app_cursor_pointer { display: none; } .js_todo_group_wrapper_collapsed .js_todo_item_additional > .app_feed_small_wrapper > * { min-height: 0; opacity: 0; height: 0; } .js_todo_group_wrapper_collapsed .js_todo_item_additional.js_todo_item:nth-child(2) { z-index: 3; } .js_todo_group_wrapper_collapsed .js_todo_item_additional.js_todo_item:nth-child(2) > div { width: 93%; background: var(--grey-xs); } .js_todo_group_wrapper_collapsed .js_todo_item_additional.js_todo_item:nth-child(3) { z-index: 2; } .js_todo_group_wrapper_collapsed .js_todo_item_additional.js_todo_item:nth-child(3) > div { width: 86%; background: var(--grey-2xs); } .js_todo_group_wrapper_collapsed .js_todo_item_additional.js_todo_item:nth-child(n+4) { display: none; } .js_todo_group_wrapper_expanded .js_todo_item_additional { margin-top: 1rem; } .js_todo_group_wrapper_expanded .js_todo_item_additional > .app_feed_small_wrapper > * { opacity: 1; min-height: 6rem; } /* Styles for the Show All button */ .js_todo_group_show_all_button { cursor: pointer; transition: all 0.3s; display: block; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 5; transition: transform 0.3s ease; } .js_todo_group_show_all_button.js_todo_group_show_all_button_rotate { transform: rotate(180deg); } .p_pricingandplans_wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); grid-template-rows: repeat(2, auto); max-width: 150rem; gap: 1rem; justify-content: center; } @media (max-width: 49.9375rem) { .p_pricingandplans_wrapper { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: row; justify-content: stretch; align-items: start; } } .p_pricingandplans_box { display: grid; grid-template-rows: auto auto 1fr auto auto; grid-gap: 1rem; border-radius: 2rem; padding: clamp(1.6rem, 1vw + 1.1rem, 2rem); background: var(--dark); max-width: 46rem; } @media (max-width: 49.9375rem) { .p_pricingandplans_box { grid-column: 1 !important; } } .p_pricingandplans_box__subtitle { grid-row: 1; text-align: center; background: var(--third-bg); color: var(--third-color); align-content: space-evenly; font-weight: 600; border-radius: 1.5rem; height: 100%; padding: 1rem; align-self: center; text-align: center; } .p_pricingandplans_box__title { grid-row: 2; flex-wrap: wrap; } .p_pricingandplans_box__features { grid-row: 3; } .p_pricingandplans_box__features_all { grid-row: 4; } .p_pricingandplans_box__price { grid-row: 5; } .p_pricingandplans_box__subtitle, .p_pricingandplans_box__title, .p_pricingandplans_box__features, .p_pricingandplans_box__features_all, .p_pricingandplans_box__price { max-width: 100%; min-width: 100%; } .p_pricingandplans_ads_wrapper { display: flex; flex-direction: column; gap: 1rem; grid-column: 5; grid-row: 1; } @media (max-width: 49.9375rem) { .p_pricingandplans_ads_wrapper { grid-column: 1; grid-row: 2; } } .p_pricingandplans_ads_box { border-radius: 2rem; padding: clamp(1.6rem, 1vw + 1.1rem, 2rem); background: var(--center-bg); } .p_pricingandplans_box.p_pricingandplans_box_recommended { border: 0.3rem solid rgb(1, 110, 108); transform: scale(1.015); } .app_PremiumFree { grid-column: 1; grid-row: 1; } @media (max-width: 49.9375rem) { .app_PremiumFree { grid-row: 1; } } .app_PremiumSales { grid-column: 2; grid-row: 1; } @media (max-width: 49.9375rem) { .app_PremiumSales { grid-row: 2; } } .app_PremiumBuyer { grid-column: 3; grid-row: 1; } @media (max-width: 49.9375rem) { .app_PremiumBuyer { grid-row: 3; } } .app_PremiumStatistics { grid-column: 4; grid-row: 1; } @media (max-width: 49.9375rem) { .app_PremiumStatistics { grid-row: 4; } } .app_PremiumAPI { grid-column: 2; grid-row: 2; } @media (max-width: 49.9375rem) { .app_PremiumAPI { grid-row: 5; } } .app_PremiumAPIWithSales { grid-column: 2; grid-row: 1; } @media (max-width: 49.9375rem) { .app_PremiumAPIWithSales { grid-row: 2; } } .windowstate_Overlay #epay_main { background: none; box-shadow: none; } .admin_dashboard_stretch { flex: 1 1 0; } .admin_dashboard_stretch_onequarter { min-width: 25%; width: 25%; max-width: 25%; } @media (max-width: 49.9375rem) { .admin_dashboard_stretch_onequarter { min-width: 100%; width: 100%; max-width: 100%; } } .admin_dashboard_stretch_quarter { min-width: 33.3333333333%; width: 33.3333333333%; max-width: 33.3333333333%; } @media (max-width: 49.9375rem) { .admin_dashboard_stretch_quarter { min-width: 100%; width: 100%; max-width: 100%; } } .admin_dashboard_stretch_half { min-width: 49%; width: 49%; max-width: 49%; } @media (max-width: 49.9375rem) { .admin_dashboard_stretch_half { min-width: 100%; width: 100%; max-width: 100%; } } .admin_dashboard_stretch_threequarters { min-width: 75%; width: 75%; max-width: 75%; } @media (max-width: 49.9375rem) { .admin_dashboard_stretch_threequarters { min-width: 100%; width: 100%; max-width: 100%; } } .admin_dashboard_stretch_twothirds { min-width: 66.6666666667%; width: 66.6666666667%; max-width: 66.6666666667%; } @media (max-width: 49.9375rem) { .admin_dashboard_stretch_twothirds { min-width: 100%; width: 100%; max-width: 100%; } } .admin_dashboard_stretch_full { min-width: 100%; width: 100%; max-width: 100%; } /*Copy to clipboard*/ .copy-icon { margin-left: 0.375rem; cursor: pointer; transition: transform 0.3s ease; flex: 0 0 auto; } .admin_flex_table_cell { display: grid; grid-template-columns: max-content minmax(0, 1fr); overflow: hidden; } .admin_flex_table_cell > div { display: contents; } .admin_flex_table_cell > div > div:first-child { font-weight: 600; color: #333; padding: 0.625rem 0.75rem; min-width: 0; } .admin_flex_table_cell > div > div:last-child { padding: 0.625rem 0.75rem; min-width: 0; display: flex; align-items: center; gap: 0.3rem; } .admin_flex_table_cell > div:nth-child(odd) > div { background: #fafafa; } .admin_truncate { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin_linechart_full { width: 100%; height: 380px; max-width: none; } .admin_linechart_full > div, .admin_linechart_full > div > svg { width: 100% !important; } .admin_copytoclipboard { cursor: pointer; } .c_form__container_admin { --label-col-width: 280px; } .c_form__container_admin .c_form__item { display: grid; grid-template-columns: var(--label-col-width) minmax(0, 1fr); column-gap: 1rem; align-items: center; margin-top: 1rem; } .c_form__container_admin .c_form__label { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; line-height: 1.4; min-height: 2rem; } .c_form__container_admin .c_form__label label { font-weight: 600; } .c_form__container_admin .c_form__input { min-width: 0; } .c_form__container_admin .c_form__input input[type=checkbox] { vertical-align: middle; margin-right: 0.5rem; transform: translateY(1px); } .c_form__container_admin .c_form__input .field-validation-valid, .c_form__container_admin .c_form__input .field-validation-error { display: block; margin-top: 0.35rem; } @media (max-width: 640px) { .c_form__container_admin .c_form__item { display: flex; flex-direction: column; row-gap: 0.5rem; } .c_form__container_admin .c_form__label { white-space: normal; } } .admin_remove_padding_bottom_input .editor-all { padding-bottom: 0 !important; } /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role=list], ol[role=list] { list-style: none; } /* Set core root defaults */ html { overflow-y: scroll; } html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { min-height: 100vh; text-rendering: optimizeSpeed; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @-webkit-keyframes slide-in { 0% { -webkit-transform: translateX(-300px); transform: translateX(-300px); -webkit-opacity: 0; opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-opacity: 1; opacity: 1; } } @keyframes slide-in { 0% { -webkit-transform: translateX(-300px); transform: translateX(-300px); -webkit-opacity: 0; opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-opacity: 1; opacity: 1; } } @keyframes shimmer { 0% { background-position: 1000%; } 100% { background-position: -1000%; } } .at_slide_in_hidden { position: relative; left: -300px; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .at_slide_in_show { position: relative; opacity: 1; left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .at_slide_in_short_hover_elem { display: inline-block; position: relative; right: -30px; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .at_slide_in_short_hover_click:hover .at_slide_in_short_hover_elem { position: relative; opacity: 1; right: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } /*Rotate icon*/ .at_rotate_icon_90_default { transition: transform 0.3s ease-in-out; } @media (max-width: 70.1875rem) { .at_rotate_icon_90_default { transform: rotate(90deg); } } .at_rotate_icon_90_target { transform: rotate(90deg); } @media (max-width: 70.1875rem) { .at_rotate_icon_90_target { transform: rotate(270deg); } } /*Pulse effect on icon*/ .at_pulse_effect { animation: at_pulse_animation 0.4s ease-out; } @keyframes at_pulse_animation { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.2); opacity: 0.3; } 50% { transform: scale(1.3); opacity: 0.5; } 75% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .at_pulse_effect_lg { animation: at_pulse_animation_lg 1s ease-in-out; } .at_pulse_effect_sm { animation: at_pulse_animation_lg 0.5s ease-in-out; } @keyframes at_pulse_animation_lg { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.4); opacity: 0.4; } 50% { transform: scale(1.6); opacity: 0.6; } 75% { transform: scale(1.4); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .at_fly_from_left_to_right { animation: at_fly_in_from_left_to_right 0.5s ease-in; } @keyframes at_fly_in_from_left_to_right { 0% { transform: translateX(-40rem) scale(2); opacity: 0; } 25% { transform: translateX(-20rem) scale(1.75); opacity: 1; } 50% { transform: translateX(-10rem) scale(1.75); opacity: 1; } 75% { transform: translateX(-5rem) scale(1.25); opacity: 1; } 100% { transform: translateX(0) scale(1); opacity: 1; } } /*Slide in from below*/ .at_slide_in_from_above_hide { height: 0 !important; opacity: 0; padding: 0 !important; margin: 0 !important; overflow: hidden !important; transition: max-height 0.3s, opacity 0.3s !important; } .at_slide_in_from_above_show { height: auto; opacity: 1; transition: max-height 0.3s, opacity 0.3s !important; } /*Flip effekt*/ .at_flip_card_label { position: relative; perspective: 1000px; display: inline-block; } .at_flip_card_label .at_flip_card_input { opacity: 0; cursor: pointer; z-index: 2; position: absolute; right: 0.5rem; top: 0.5rem; width: 2rem; height: 2rem; } .at_flip_card_label .at_flip_card_front { transform: rotateY(0); } .at_flip_card_label .at_flip_card_front:hover .l_absolute_top_right_10 { transform: scale(1.2); } .at_flip_card_label .at_flip_card_front .l_absolute_top_right_10 { transition: transform 0.3s; } .at_flip_card_label .at_flip_card_back { height: 0; width: 0; visibility: hidden; transform: rotateY(180deg); } .at_flip_card_label .at_flip_card_input:checked + .at_flip_card_front { height: 0; width: 0; visibility: hidden; transform: rotateY(180deg); } .at_flip_card_label .at_flip_card_input:checked ~ .at_flip_card_back { height: auto; width: auto; visibility: visible; transform: rotateY(0); } .at_flip_card_label .at_flip_card_front, .at_flip_card_label .at_flip_card_back { transition: transform 0.3s; transform-style: preserve-3d; transform-origin: center; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } .at_shake_effect { animation: shake 0.1s ease-in-out 2s 10; } /*Colors*/ .new_color_primary, .new_color_primary_hover:hover, .app_fixiconsizelarge .fal.new_color_primary.app_color_brainville_blue, .app_fixiconsizelarge .fal.new_color_primary_hover.app_color_brainville_blue:hover, .app_fixiconsizelarge .fal.new_color_primary:before { color: var(--primary-bg); } /*----Elements-----*/ .field-validation-error { padding: 0.5rem 1.5rem; border-radius: 0.8rem; } html { box-sizing: border-box; min-height: 100%; position: relative; } *, *:before, *:after { box-sizing: inherit; } hr { border: none; border-top: 1px solid var(--transparent-xs, #e0e0e0); margin: 1rem 0; height: 0; background: none; } /*Color helper*/ .app_color_helper span { width: 2rem; height: 2rem; display: inline-block; border-radius: 0.5rem; } .app_resume_tagline { line-height: 1.4 !important; margin-bottom: 0.8rem; } .sr-only { display: none !important; } /*----Animation and Transformation-----*/ .app_menu_second ul > li a, .dynamicResumeActions span.fal:not(.c_button_change_icon_on_hover__default), .dynamicResumeItemActions a .fal { transition: color 0.2s ease-in; } .app_feed_small_wrapper, .app_button, .app_hover_color_green_elements > span a, .app_hover_color_green_elements > a, .app_hover_color_green, a.app_link_blue { transition: all 0.3s; } .app_block_hovereffect, .app_box_add, .profilePicture.app_opacity_verylow { transition: background 0.5s ease-in; } .app_transition_opacity, .app_item_withnotextonlyicon.editableBlock_editButton, .app_opacity_full_hover, .app_opacity_full_hover_nexticon .fa-light, .app_button_login:hover .fas, .profilePictureWrapper:hover .fa-camera { transition: opacity 0.2s ease-in; } .app_opacity_low_onhover:hover { transition: opacity 4s ease; } .app_tabs_second > a, .app_tabs_second > div, a { transition: border-bottom 0.3s linear, opacity 0.4s linear; } .app_feed_wrapper { transition: box-shadow 0.3s; } a { transition: border-bottom 0.5s; } .app_dashboard_item { transition: border 0.3s; } .app_clear_ul { list-style: none; } .app_hover_scale15:hover { transform: scale(1.3); } .app_hover_scale15 { transition: all 1s; } /*----Common styles-----*/ .app_icon_style a, .app_icon_style a, .app_icon_style, .app_link_clearstyle a, a.app_link_clearstyle, .app_link_green, .app_tags_wrapper_lastspanremovelink a.fal { text-decoration: none; } .app_remove_underlinesonlinkes_a a { text-decoration: none !important; } .app_icon_margin_right { margin-right: 0.5rem; } .app_font_icon_upgrade_gradient { background: linear-gradient(135deg, rgb(47, 60, 77) 0%, rgb(228, 35, 80) 40%, rgb(249, 177, 35) 100%); background: -webkit-linear-gradient(135deg, rgb(47, 60, 77) 0%, rgb(228, 35, 80) 40%, rgb(249, 177, 35) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; display: inline !important; } .app_text_align_left { text-align: left; } .app_text_align_right { text-align: right; } .app_text_align_right_important { text-align: right !important; } .app_text_align_center { text-align: center; } .app_text_ellips { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .app_text_breakword { word-break: break-all; -webkit-hyphens: auto; hyphens: auto; } .app_blackandwhite { filter: grayscale(100%); transition: filter 1s; } .app_blackandwhite:hover { filter: grayscale(0); } .app_color_brainville_blue { color: rgb(47, 60, 77); } .app_wordbreak_breakall { word-break: break-all; } .app_wordbreak_breakword { word-break: break-word; } .app_text_decoration_none, a.app_text_decoration_none, .app_clear_link, .app_clear_link a, .app_clear_link_second_color a, a.app_clear_link_second_color, .app_details a, .app_item_withnotextonlyicon a, .app_item_withnotextonlyicon span { text-decoration: none !important; } .app_clear_input_button { cursor: pointer; border: none; background: none; font-family: Poppins, "Sans Serif"; } .app_text_decoration_linethrough { text-decoration: line-through; } .app_align_center { text-align: center; } .app_whitespace_nowrap, .app_whitespace_nowrap_nextdivs > div { white-space: nowrap; } .app_whitespace_normal { white-space: normal; } /*----Border-----*/ .app_border_brainville_yellow, .app_feed_trending { border: 0.2rem solid rgb(249, 177, 35); } .app_border_grey { border: 1px solid rgba(0, 0, 0, 0.05); } .app_border_bottom_brainville_yellow, .app_tabs_second > a:hover, .app_tabs_second > a.app_tabs_second_active, .app_tabs_second > div:not(.app_position_absolute_bottomlinefortabs):hover, .app_tabs_second > div.app_tabs_second_active { border-bottom: 0.2rem solid rgb(249, 177, 35); } .app_border_top_grey { border-top-width: 1px; border-top-style: solid; } .app_border_bottom_grey { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .app_border_betweendivs { background: rgba(0, 0, 0, 0.1); width: 0.1rem; height: 10rem; } .app_border_none { border: none !important; } .app_border_bottom_brainville_green { border-bottom: 0.3rem solid var(--primary-bg); } .app_border_bottom_brainville_orange { border-bottom: 0.3rem solid var(--primary-bg); } .app_border_bottom_brainville_red { border-bottom: 0.3rem solid var(--negative-color); } .app_border_bottom_brainville_blue { border-bottom: 0.3rem solid var(--third-color); } /*----Line height-----*/ .app_lineheight_0 { line-height: 0; } .app_lineheight_1 { line-height: 1; } .app_lineheight_11 { line-height: 1.1; } .app_lineheight_12 { line-height: 1.2; } .app_lineheight_13 { line-height: 1.3; } .app_lineheight_14 { line-height: 1.4; } /*----Opacity-----*/ .app_opacity_full, .app_opacity_full.app_dashboard_item_underheadline, .app_item_withnotextonlyicon.editableBlock_editButton:hover, .app_opacity_full_hover:hover, .app_opacity_full_hover_nexticon:hover .fa-light { opacity: 1; } .app_opacity_high, .TimeAgo > .MinutesAgo { opacity: 0.7; } .app_opacity_low, .experiencePending, .app_item_withnotextonlyicon.editableBlock_editButton { opacity: 0.5; } .app_opacity_verylow, .app_opacity_low_onhover:hover { opacity: 0.3; } .app_opacity_0 { opacity: 0; } /*----Grid-----*/ .app_grid .app_width_minus1rem input { width: calc(100% - 1rem) !important; } .app_grid .app_width_minus3rem input, .app_grid_wrapper .app_grid .app_width_minus3rem > span > input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]) { width: calc(100% - 3rem) !important; } .app_grid .app_width_minus5rem input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]), .app_grid .app_width_minus5rem > span > input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]), div.app_grid div.app_width_minus5rem span.rightLabel input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]) { width: calc(100% - 5rem) !important; } .app_grid .app_width_minus6rem input { width: calc(100% - 6rem) !important; } .app_grid .app_width_minus8rem input, .app_grid .app_width_minus8rem .select2.select2-container { width: calc(100% - 8rem) !important; } div.app_grid div.app_width_minus9rem input { width: calc(100% - 9rem) !important; } .app_grid_inputwithselectafter select { width: 8rem !important; } /*Gap*/ .app_gap_col_small { -moz-column-gap: 0.3rem; column-gap: 0.3rem; } .app_gap_row_small { row-gap: 0.3rem; grid-row-gap: 0.3rem; } .app_gap_col_medium { -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .app_gap_row_medium { row-gap: 0.5rem; grid-row-gap: 0.5rem; } .app_gap_buttons, .app_header_buttons { -moz-column-gap: 0.5rem; column-gap: 0.5rem; row-gap: 0.5rem; grid-row-gap: 0.5rem; } .app_gap_col_large { -moz-column-gap: 1rem; column-gap: 1rem; } .app_gap_row_large { row-gap: 1rem; grid-row-gap: 1rem; } .app_gap_col_verylarge { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .app_gap_row_verylarge { row-gap: 1.5rem; grid-row-gap: 1.5rem; } .app_gap_col_superlarge { -moz-column-gap: 2rem; column-gap: 2rem; } .app_gap_row_superlarge { row-gap: 2rem; grid-row-gap: 2rem; } .app_gap_col_boxes { -moz-column-gap: 2.5rem; column-gap: 2.5rem; } .app_gap_row_boxes { row-gap: 2.5rem; grid-row-gap: 2.5rem; } .app_gap_col_stats { -moz-column-gap: 3.5rem; column-gap: 3.5rem; } .app_gap_row_stats { row-gap: 3.5rem; grid-row-gap: 3.5rem; } /*Margins*/ .app_margin_auto { margin-left: auto; margin-right: auto; } .app_margin_15 { margin: 1.5rem; } .app_margin_bottom_0 { margin-bottom: 0 !important; } .app_margin_bottom_3 { margin-bottom: 0.3rem; } .app_margin_bottom_3_important { margin-bottom: 0.3rem !important; } .app_margin_bottom_5 { margin-bottom: 0.5rem; } .app_margin_bottom_10, .app_margin_bottom_10_nextdivs > div, .dataTables_filter { margin-bottom: 1rem; } .app_margin_bottom_15 { margin-bottom: 1.5rem; } .app_margin_bottom_20 { margin-bottom: 2rem; } .app_margin_bottom_25 { margin-bottom: 2.5rem; } .app_margin_bottom_35 { margin-bottom: 3.5rem; } .app_margin_bottom_55 { margin-bottom: 5.5rem; } .app_margin_bottom_70 { margin-bottom: 7rem; } .app_margin_bottom_100, .app_feed_horisontell_wrapper.app_margin_bottom_100 { margin-bottom: 10rem; } .app_margin_top_0 { margin-top: 0rem; } .app_margin_top_0_important, .app_main_header_withoutpadding > .app_header { margin-top: 0rem !important; } .app_margin_top_3 { margin-top: 0.3rem; } .app_margin_top_5, .app_filter_summary, .field-validation-error { margin-top: 0.5rem; } .app_margin_top_8 { margin-top: 0.8rem; } .app_margin_top_10 { margin-top: 1rem; } .app_margin_top_14 { margin-top: 1.4rem; } .app_margin_top_15 { margin-top: 1.5rem; } .app_margin_top_20 { margin-top: 2rem; } .app_margin_top_25 { margin-top: 2.5rem; } .app_margin_top_30 { margin-top: 3rem; } .app_margin_top_35 { margin-top: 3.5rem; } .app_margin_top_55 { margin-top: 5.5rem; } .app_margin_top_70 { margin-top: 7rem; } .app_margin_top_150 { margin-top: 15rem; } .app_margin_top_auto { margin-top: auto; } .app_margin_top_minus10 { margin-top: -1rem; } .app_margin_top_minus36 { margin-top: -3.6rem; } .app_margin_right_minus04 { margin-right: -0.4rem; } .app_margin_right_auto { margin-right: auto !important; } .app_margin_right_0 { margin-right: 0rem !important; } .app_margin_right_2 { margin-right: 0.2rem; } .app_margin_right_3, .app_margin_right_3_span > span, .app_margin_right_3_span > div > span { margin-right: 0.3rem; } .app_margin_right_5, .app_item_withicon > div:first-of-type, .app_item_withicon > span:first-of-type, .app_margin_right_5_span > span { margin-right: 0.5rem; } .app_margin_right_10, .app_item_withnotextonlyicon a, .app_item_withnotextonlyicon span { margin-right: 1rem; } .app_margin_right_15, .app_margin_right_15_div > div { margin-right: 1.5rem; } .app_margin_right_30, .app_margin_right_30_div > div { margin-right: 3rem; } .app_margin_right_40 { margin-right: 4rem; } .app_margin_right_60 { margin-right: 6rem; } .app_margin_right_200 { margin-right: 20rem; } .app_margin_left_minus3 { margin-left: -0.3rem; } .app_margin_left_minus50 { margin-left: -5rem; } .app_margin_left_0, .app_margin_left_0_buttonafter .app_button, .app_margin_left_0_div > div { margin-left: 0 !important; } .app_margin_left_3, .TimeAgo > .MinutesAgo, .app_margin_left_3_spanspan span > span, .formOptional { margin-left: 0.3rem; } .app_margin_left_5 { margin-left: 0.5rem; } .app_margin_left_10, .app_margin_left_10_form > div > form, .app_margin_left_10_form > .profilePictureWrapper > .profilePicture { margin-left: 1rem; } .app_margin_left_15 { margin-left: 1.5rem; } .app_margin_left_20 { margin-left: 2rem; } .app_margin_left_30 { margin-left: 3rem; } .app_margin_left_60 { margin-left: 6rem; } .app_margin_left_auto { margin-left: auto; } .app_margin_betweendivs_medium > div:not(:last-of-type), .app_margin_betweendivs_medium > a:not(:last-of-type) { margin-right: 1.5rem; } .app_margin_bottom_betweendivs_medium > div { margin-bottom: 0.4rem; } .app_margin_bottom_betweendivs_large > div { margin-bottom: 1.5rem; } .app_margin_bottom_betweendivs_verylarge > div { margin-bottom: 10rem; } .app_margin_bottom_betweenspan_medium > span { margin-bottom: 0.4rem; } .app_margin_left_betweendivs_medium > div:not(.app_margin_left_60) { margin-left: 1.5rem; } .app_margin_left_betweendivs_medium > div:first-of-type { margin-left: 0; } .app_margin_betweendivs_childrenfirst > div > div:first-of-type { margin-right: 1rem; min-width: 10.5rem; } .app_margin_left_betweenicons > span, .app_margin_left_betweenicons > a { margin-left: 0.6rem; display: inline-block; } /*----Padding-----*/ .app_padding_0, .app_main_header_withoutpadding > .app_header, .app_main_header_withoutpadding > .app_tabs_first { padding: 0 !important; } .app_padding_5, .app_padding_5_nextdivs > div { padding: 0.5rem; } .app_padding_10 { padding: 1rem; } .app_padding_15 { padding: 1.5rem; } .app_padding_20 { padding: 2rem; } .app_padding_40 { padding: 4rem; } .app_padding_100 { padding: 10rem; } .app_padding_bottom_0 { padding-bottom: 0 !important; } .app_padding_bottom_5 { padding-bottom: 0.5rem; } .app_padding_bottom_10 { padding-bottom: 1rem; } .app_padding_bottom_20 { padding-bottom: 2rem; } .app_padding_left_5 { padding-left: 0.5rem; } .app_padding_left_10 { padding-left: 1rem; } .app_padding_left_15 { padding-left: 1.5rem; } .app_padding_left_25 { padding-left: 2.5rem; } .app_padding_left_30_important { padding-left: 3rem !important; } .app_padding_left_33 { padding-left: 2.7rem; } .app_padding_right_5 { padding-right: 0.5rem; } .app_padding_right_10 { padding-right: 1rem; } .app_padding_right_15 { padding-right: 1.5rem; } .app_padding_right_25 { padding-right: 2.5rem; } .app_padding_right_40 { padding-right: 4rem; } .app_padding_top_5 { padding-top: 0.5rem; } .app_padding_top_0 { padding-top: 0 !important; } .app_padding_top_10 { padding-top: 1rem; } .app_padding_top_15 { padding-top: 1.5rem; } .app_padding_top_40 { padding-top: 4rem; } .app_padding_topandbottom_5_leftandright_15, .app_padding_topandbottom_5_leftandright_15_nextdivs > div { padding: 0.5rem 1.5rem; } .app_padding_leftandright_5 { padding-left: 0.5rem; padding-right: 0.5rem; } .app_padding_leftandright_10 { padding-left: 1rem; padding-right: 1rem; } .app_padding_leftandright_300 { padding-left: 30rem; padding-right: 30rem; } .app_padding_topandbottom_15 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .app_padding_topandbottom05_leftandright15 { padding: 0.5rem 1.5rem !important; } /*----Height-----*/ .app_height_auto { height: auto !important; } .app_height_min_4 { min-height: 4rem; } .app_height_min_750 { min-height: 75rem; } .app_height_min_1500 { min-height: 150rem; } .app_height_100procent, a.app_button.app_height_100procent { height: 100%; } .app_height_100procent_important, a.app_button.app_height_100procent_important { height: 100% !important; } .app_height_2rem { height: 2rem; } .app_height_5rem { height: 5rem; } .app_textbox_height { min-height: 10rem; } /*----Overflow-----*/ .app_overflow_auto { overflow: auto; } .app_overflow_hidden { overflow: hidden; } .app_overflow_wrap_everywhere { overflow-wrap: anywhere; } /*----Position-----*/ .app_position_relative, .app_item_withnotextonlyicon { position: relative; } .app_position_absolute, .app_position_absolute_top5right5, .app_position_absolute_bottom2right3, .app_position_absolute_top10right15 { position: absolute; } .app_position_absolute_important { position: absolute !important; } .app_position_absolute_top5right5 { top: 0.5rem; right: 0.5rem; } .app_position_absolute_top15left15 { top: 1.5rem; left: 1.5rem; } .app_position_absolute_left_10 { left: 1rem; } .app_position_absolute_top5right10 { top: 0.5rem; right: 1rem; } .app_position_absolute_top10right15 { top: 0.5rem; right: 1.5rem; } .app_position_absolute_top10right5 { top: 1rem; right: 0.5rem; } .app_position_absolute_top15right15 { top: 1.5rem; right: 1.5rem; } .app_position_absolute_top0rightminus35 { top: 0 !important; right: -3.7rem !important; } .app_position_absolute_bottom2right3 { bottom: 0.5rem; right: 1.5rem; } .app_position_absolute_right_minus2 { right: -2rem !important; left: auto !important; } .app_position_searchprofilepen { right: 4rem; border-radius: 0.3rem; padding: 0.4rem 0.6rem; bottom: 1.6rem; box-shadow: 0 0.3px 0.4px rgba(0, 0, 0, 0.01), 0 2px 3px rgba(0, 0, 0, 0.02); } .app_position_absolute_banicon { top: -0.7rem; right: -0.1rem; } .app_position_absolute_center { margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; top: 50%; transform: translateY(-50%); } .app_position_sticky { position: sticky; top: 0rem; right: 0; left: 0; bottom: 0; z-index: 100; padding-bottom: 1.5rem; padding-top: 0rem; } .app_position_absolute_bottomlinefortabs { width: 100%; border-bottom: 0.2rem solid rgba(0, 0, 0, 0.1); position: absolute; bottom: 1rem; } .app_position_absolute_bottomlinefortabslarge { bottom: 0.43rem !important; } .app_position_fixed_bottom_center { position: fixed; left: 50%; transform: translateX(-50%); bottom: 9rem; } /*----Border Radius-----*/ .app_box_small, .app_border_radius_large { border-radius: 2.5rem; } .app_border_radius_large_right { border-top-right-radius: 2.5rem; border-bottom-right-radius: 2.5rem; } .app_border_radius_large_left { border-top-left-radius: 2.5rem; border-bottom-left-radius: 2.5rem; } .app_border_radius_large_top { border-top-right-radius: 2.5rem; border-top-left-radius: 2.5rem; } .app_border_radius_large_bottom { border-bottom-right-radius: 2.5rem; border-bottom-left-radius: 2.5rem; } .app_border_radius_medium, .app_border_radius_medium_nextdivs > div { border-radius: 1.5rem; } .app_border_radius_small { border-radius: 0.5rem; } .app_border_radius_verysmall { border-radius: 0.2rem; } .app_border_radius_round { border-radius: 10rem; } /*----Cursor-----*/ .app_cursor_pointer, .app_button_boldtext, .app_item_withnotextonlyicon a, .app_item_withnotextonlyicon span, .dynamicResumeActions span.fal, .dynamicResumeActions a .fal, .dynamicResumeItemActions span.fal, .app_link_green:hover, .app_tabs_second > a, .app_tabs_second > div, .app_text_createtextaslink, .tooltipstered.fal:not(.l_cursor_auto), .app_tags_tag > span.fa-plus-circle, .app_tags_tag > span.fa-minus-circle, .app_tags_tag > span.fa-times { cursor: pointer; } .app_cursor_auto { cursor: auto; } .app_cursor_auto_important { cursor: auto !important; } .app_cursor_help { cursor: help; } .app_cursor_text { cursor: text !important; } /*----Display-----*/ .app_display_none, .app_display_none.fal, .app_display_none_desktop, .hidden, .displayNone, div.app_display_none.dynamicResumeItemGrade, .app_show_rightcolumn_click_mobile, .app_show_rightcolumn_click_mobile.fal, .app_display_flex_mobile.app_display_none, .app_expandablediv > div.app_display_none, .app_checkboxes.app_display_none, .app_box_message.app_display_none, .app_tabs_second_hidden, .app_show_all_searchprofiles { display: none; } .app_display_none_important, .app_display_none_desktop_important, .app_hideOnBrainvilleShowOnStatisticsMobile { display: none !important; } .app_display_inlineblock, .field-validation-error:not(.app_display_none) { display: inline-block; } .app_display_inline { display: inline; } .app_display_inline_important { display: inline !important; } .app_display_inlineflex { display: inline-flex; } .app_visibility_hidden { visibility: hidden; } /*----Z-Index-----*/ .app_zindex_veryhigh { z-index: 3; } .app_zindex_high { z-index: 2; } .app_zindex_low { z-index: 1; } /*Outside*/ .app_header_outside_logotype img { max-height: 4.2rem; } @media only screen and (max-width: 50rem) { .app_header_outside_logotype img { max-height: 2.2rem !important; margin-top: 0.5rem; } } /*----Box Shadows-----*/ .app_box_shadow_large { box-shadow: 0px 0px 0.7px rgba(0, 0, 0, 0.017), 0px 0px 1.9px rgba(0, 0, 0, 0.025), 0px 0px 4.5px rgba(0, 0, 0, 0.033), 0px 0px 15px rgba(0, 0, 0, 0.05); } .app_box_shadow_medium, .app_feed_wrapper, .app_box_shadow_allaround { box-shadow: 0 0 0.05rem rgba(121, 92, 52, 0.03), 0 0 0.5rem rgba(121, 92, 52, 0.05), 0 0 0.8rem rgba(121, 92, 52, 0.12); } .app_box_shadow_small { box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); } .app_box_shadow_none { box-shadow: none !important; } /*-----Feed-----*/ .app_feed_wrapper:hover, .app_dashboard_grid > div:hover { box-shadow: 0 0 0.05rem rgba(121, 92, 52, 0.1), 0 0 0.5rem rgba(121, 92, 52, 0.15), 0 0 1rem rgba(121, 92, 52, 0.2); } .app_box_small { transition: box-shadow 0.2s ease-in; } .app_box_small:hover { box-shadow: 0px 0px 0.7px rgba(0, 0, 0, 0.017), 0px 0px 1.9px rgba(0, 0, 0, 0.025), 0px 0px 4.5px rgba(0, 0, 0, 0.033), 0px 0px 15px rgba(0, 0, 0, 0.05); } .app_box_small_lead, .app_border_dashed, .app_feed_horisontell_addbordertoboxes > div.app_border_dashed { border: 2px dashed var(--third-color-low); } .app_box_large { width: 25rem; height: 25rem; } /*----Fancy Box------*/ .app_box_fancy { border-radius: 2rem; padding: 3rem; transition: transform 0.2s; cursor: pointer; } .app_box_fancy:hover { transform: scale(1.1); } .app_statistics_adbox_text { display: flex; flex-direction: column; } .app_statistics_adbox_text_onerow > span:nth-child(2) { display: none; } /*-----Sort order------*/ .app_order_1_desktop_plain { order: 1; } .app_order_2_desktop_plain { order: 2; } .app_order_3_desktop_plain { order: 3; } .app_order_4_desktop_plain { order: 4; } .app_order_5_desktop_plain { order: 5; } /*-----Flex------*/ .app_display_flex, .app_display_flex_ignoreform > form, .app_fixinputwithlabelafter > span, .app_display_flex_div > div, .flexDisplay { display: flex; } .app_alignitems_center, .app_fixinputwithlabelafter > span { align-items: center; } .app_alignitems_flexend { align-items: flex-end; } .app_alignitems_flexstart { align-items: flex-start; } .app_alignitems_baseline { align-items: baseline; } .app_justifycontent_spacebetween { justify-content: space-between; } .app_justifycontent_spacearound { justify-content: space-around; } .app_justifycontent_center { justify-content: center; } .app_justifycontent_flexend { justify-content: flex-end; } .app_justifycontent_flexstart { justify-content: flex-start; } .app_alignself_stretch { align-self: stretch; } .app_flex_grow, .app_flex_grow_input input { flex-grow: 1; } .app_flex_wrap { flex-wrap: wrap; } .app_flex_direction_column { flex-direction: column; } .app_flex_alignself_stretch { align-self: stretch; } .app_flex_item_samesize > * { flex: 1 1 0; width: 0; } .app_float_left, .dataTables_filter { float: left; } .app_float_right { float: right; } .app_clear, .clear { clear: both; } .app_verticalalign_top { vertical-align: top; } /*-----Image editor------*/ .imageEditorContainer .imageEditor { padding-bottom: 50px; } .imageEditorControls label { line-height: normal; } .imageEditorControls span.rotate { position: absolute; margin-top: -30px; margin-left: 10px; } .imageEditor .cr-boundary { zoom: 0.35; } @-moz-document url-prefix() { .imageEditor .cr-boundary { zoom: 1; } } .imageEditor { height: 100% !important; padding-bottom: 0 !important; } #app_id_companylogotype .imageEditor .cr-boundary, #app_id_companylogotype .imageEditor .cr-viewport.cr-vp-square { width: 600px !important; height: 600px !important; } /*Setting page*/ .app_settings_wrapper > div > div { border-bottom-style: solid; border-bottom-width: 1px; padding-top: 1rem; padding-bottom: 1rem; display: flex; align-items: flex-start; } .app_settings_wrapper > div > div > div:first-child { min-width: 50%; max-width: 50%; padding-right: 1rem; } .app_settings_wrapper > div > div > div:last-child { font-weight: 600; } /*Links and underline*/ a:not(.fal):not(.fas):not(.fak):not(.app_button):not(.wp-block-button__link):not(.c_button_secondary):not(.c_button_negative):not(.c_button_primary):not(.c_card_matchlinkcolor):not(.l_font_color_secondary):not(.l_color_icon_primary):not(.th_third_ongrey_color):not(.th_color_icon_primary):not([data-font-variant=secondary]):not([data-font-variant=link]), .app_clear_link_withborder_a a { transition: all 0.3s; text-decoration: underline; text-decoration-style: solid; text-decoration-color: var(--transparent-sm); -webkit-text-decoration-skip: spaces; text-decoration-skip: spaces; } .app_clear_link_withborder_a a:hover, a:not(.fal):not(.fas):not(.app_button):hover { text-decoration-color: var(--transparent-xl); } .app_menu_second a:not(.app_button), .app_menu_second a:not(.app_button):hover, .app_logo a, .app_logo a:hover, .menuGroup a, .menuGroup a:hover, .app_dropdown_style a, .app_dropdown_style a:hover, .app_tabs_first a:not(.app_button), .app_tabs_first a:hover, .app_feed_small_wrapper a, .app_feed_small_wrapper a:hover, .app_checkboxes a, .app_checkboxes a:hover, .SwimlaneLinkText, .SwimlaneLinkText span, .app_dashboard_item_content a, .app_font_firstrowboldsecondlight a, .l_font_size_number_large a, .app_text_decoration_none_a a, .app_tabs_second > a { text-decoration: none !important; } .tooltipster-base a { text-decoration-color: var(--transparent-lg) !important; } /*----Main frame -----*/ .app_wrapper { justify-content: center; min-width: 0; width: 130rem; max-width: 140rem; display: grid; grid-template-columns: 14rem minmax(0, 1fr) 30rem; grid-template-rows: 1fr; grid-gap: 1rem 1rem; grid-template-areas: "Left Main Right"; } .app_layout_wide .MainContent, .app_layout_wide .app_menu_second, .app_layout_wide.app_main { -ms-grid-column-span: 2; grid-column: span 2; } .app_layout_wide .app_main_wrapper { width: 100%; } .MainContent { border-radius: 1.5rem; } .app_logo { text-align: center; } .app_logo_mobile { display: none; } .app_sidebar_right_iconbar { display: flex; align-items: center; } .app_sidebar_right_iconbar .app_dropdown_wrapper_header > .fal:not(a) { cursor: pointer; } .app_menu_second { padding: 0; align-items: center; } .app_menu_second ul { list-style: none; padding: 0; margin: 0; } .app_menu_second ul > li a { text-decoration: none; } .app_menu_second ul li a:not(.app_menu_main_active) { opacity: 0.5; transition: opacity 0.2s ease-in; } .app_menu_second ul li a:not(.app_menu_main_active):hover { opacity: 1; } .app_sidebar_right_header > ul { display: flex; list-style: none; padding: 0; margin: 0; align-items: center; margin-left: 0.5rem; margin-top: 0.7rem; } .app_sidebar_right_header > ul li > span { margin-right: 1rem; } /*----Buttons-----*/ .pagesize-selector { background: none; font-weight: 600; border: none; height: auto !important; padding: 0.2rem !important; } .app_input_withsearchicon, .app_input_withsearchicon_inside { position: relative; } .app_input_withsearchicon input { background: var(--dark); height: 5.5rem !important; } .app_input_withsearchicon input[type=text] { padding-right: 4rem; } .app_input_withsearchicon button, .app_input_withsearchicon_inside button#searchButton { border: none; background: none; color: var(--light); position: absolute; right: 0.5rem; top: 1.1rem; cursor: pointer; } .app_input_withsearchicon_inside button#searchButton { margin-right: 6rem; } .app_button_withicon.fal, .app_button_withicon.fas { font-family: Poppins, "Sans Serif"; } .app_button_withicon:before, .app_link_withicon:before { font-family: "Font Awesome 7 Pro" !important; font-weight: 600 !important; margin-right: 0.5rem; } .app_link_withicon_green_small:before { font-family: "Font Awesome 7 Pro" !important; margin-right: 0.2rem; } .app_link_withicon_green_small { font-family: Poppins, "Sans Serif"; font-weight: 400 !important; } .app_button_withicon, .app_link_withicon { display: flex; justify-content: center; align-items: center; font-family: Poppins, "Sans Serif"; } .app_button_withicon > span { margin-right: 0.5rem; } .app_link_iconforward { background: white; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; text-decoration: none !important; border-radius: 0.4rem; } .app_button_fittoheader { height: 3.6rem !important; padding-top: 0.6rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .app_button_login:hover .fas { opacity: 1; } /*----Dropdown-----*/ .app_dropdown_wrapper { position: relative; display: none; } .app_dropdown_style { text-align: left !important; z-index: 104; min-width: 200px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1); padding: 0.6rem; border-radius: 1rem; top: 3.4rem; right: -3px; overflow: visible; position: absolute; display: none; margin-top: 0px; margin-bottom: 0px; list-style-type: none; } .app_dropdown_style > div:not(.app_dropdown_style_notfirstdiv) a, .app_dropdown_style > a, .app_dropdown_style button, .app_dropdown_style input, .app_dropdown_style form > a, .app_dropdown_style form { text-decoration: none; display: flex; align-items: center; justify-content: flex-start; width: 100%; } .app_dropdown_style > div:not(.app_dropdown_style_notfirstdiv) { opacity: 0.7; } .app_dropdown_style > div:not(.app_dropdown_style_notfirstdiv) { line-height: 1; transition: background 0.2s ease-in-out; font-family: Poppins, "Sans Serif"; white-space: nowrap; display: block; width: 100%; cursor: pointer; border-radius: 0.5rem; } .app_dropdown_style button, .app_dropdown_style input { border-radius: 0.5rem; width: 100%; border: none; cursor: pointer; background: none; font-family: Poppins, "Sans Serif"; color: var(--font-color-primary); white-space: nowrap; } .app_dropdown_style a, .app_dropdown_style li, .app_dropdown_style > div > div, .app_dropdown_style button, .app_dropdown_style input { padding: 1.4rem; border-radius: 0.5rem; } .button neutralButton dd-close autoSubmit .app_dropdown_hovereffect button { padding: 1.4rem !important; height: auto !important; width: 100%; justify-content: flex-start !important; } .app_dropdown_style > div:not(.app_dropdown_style_notfirstdiv):hover, .app_dropdown_style > li:not(.divider):not(.emptyrow):hover { opacity: 1; color: black; } .app_dropdown_style > li.divider, .app_dropdown_style > li.emptyrow { cursor: default; color: var(--font-color-primary); } .app_dropdown_style_hover_red:hover { background-color: var(--negative-color) !important; color: white !important; } .app_dropdown_style_hover_red:hover a, .app_dropdown_style_hover_red:hover span, .app_dropdown_style_hover_red:hover input, .app_dropdown_style_hover_red:hover button { color: white !important; } .app_dropdown_style > hr { padding: 0.5rem 0 !important; margin: 0; margin-top: 0.5rem !important; } .app_dropdown_style .app_link_withicon { font-family: Poppins, "Sans Serif"; } .app_dropdown_style > div > a > span, .app_dropdown_style > div > div > span { width: 2.8rem; margin-right: 1rem; text-align: center; } .app_dropdown_style > div > div > span { margin-right: 0.6rem; min-width: 3rem !important; text-align: center; } .app_dropdown_style > div > a > span:before, .app_dropdown_style > div > form > button > span:before, .app_dropdown_style > div > div > span:before { text-align: center; display: inline-block; font-weight: 300 !important; } .app_dropdown_style a:before { width: 3.4rem; margin-right: 1rem; text-align: center; display: inline-block; font-weight: 300 !important; } .app_dropdown_style a.app_link_withicon:before { width: 2.8rem !important; } .app_dropdown_style .fa-fw { min-width: 2.7rem !important; line-height: 0.3 !important; } .app_dropdown_style button { margin: 0 !important; } .app_dropdown_style > div > form > button > span:before { margin-right: 1rem; width: 2.8rem; } .app_dropdown_style.app_dropdown_style_expandtop { bottom: 3.4rem; top: auto; } .app_button_newitembutton, .app_button_newleadbutton { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--white); width: 100%; height: 10rem !important; border: none; box-shadow: 0px 0.3px 0.7px rgba(0, 0, 0, 0.022), 0px 0.9px 1.7px rgba(0, 0, 0, 0.031), 0px 1.8px 3.5px rgba(0, 0, 0, 0.039), 0px 3.7px 7.3px rgba(0, 0, 0, 0.048), 0px 10px 20px rgba(0, 0, 0, 0.07); } .app_button_newitembutton > span:first-of-type, .app_button_newleadbutton > span:first-of-type { color: var(--primary-bg); } .app_button_newitembutton > span:last-of-type, .app_button_newleadbutton > span:last-of-type { margin-top: 0.5rem; } .app_button_newitembutton:hover, .app_button_newleadbutton:hover { border: none; box-shadow: 0px 0.3px 0.7px rgba(0, 0, 0, 0.047), 0px 0.9px 1.7px rgba(0, 0, 0, 0.067), 0px 1.8px 3.5px rgba(0, 0, 0, 0.083), 0px 3.7px 7.3px rgba(0, 0, 0, 0.103), 0px 10px 20px rgba(0, 0, 0, 0.15); } .app_button_newleadbutton { border: 0.2rem dashed var(--third-color-low); } .app_button_newleadbutton:hover { border: 0.2rem dashed var(--third-color-low); } /*Checkboxes*/ .app_checkboxes > div, .app_checkboxes > button, .app_checkboxes_large > button, .app_checkboxes_large > a { position: relative; margin-bottom: 1rem; width: 242px; transition: background 0.3s ease-in-out; cursor: pointer; margin-right: 1rem; border-radius: 1.5rem; padding: 0.5rem 1rem; border: none; color: var(--light); } .app_checkboxes > div > div > span:first-of-type, .app_checkboxes > div > div > a > span:first-of-type, .app_checkboxes_large > button > span:first-of-type, .app_checkboxes > button > span.fas, .app_checkboxes > button > span.fal { font-size: 2rem; margin-right: 0.3rem; } .app_checkboxes:not(.app_checkboxes_nowidth) > div > div > span:nth-of-type(2), .app_checkboxes:not(.app_checkboxes_nowidth) > div:not(.app_background_color_brainville_yellow) > div > a > span:nth-of-type(2), .app_checkboxes_large > button > span:first-of-type { font-size: 1.5rem; opacity: 0.4; min-width: 1.9rem; text-align: center; transition: opacity 0.5s; } .app_checkboxes > div:hover > div > span:nth-of-type(2), .app_checkboxes > div:hover > div > a > span:nth-of-type(2), .app_checkboxes_large > button:hover > span:first-of-type, .app_checkboxes_large > button.newCheckboxesActive > span:first-of-type { opacity: 1; } .app_checkboxes:not(.app_checkboxes_large) > div > div > a, .app_checkboxes:not(.app_checkboxes_large) > a, .app_checkboxes:not(.app_checkboxes_large) > button:not(.iconPushButton) { display: flex; align-items: center; } .app_checkboxes .app_background_color_orange_withtext .app_font_size_second { font-weight: 600; } .app_checkboxes_withonlycheckboxicon > button:not(.app_background_color_orange_withtext) > span.fas { display: none; } .app_checkboxes_withonlycheckboxicon > button > span.fal { display: none; } .app_checkboxes_withonlycheckboxicon > button:not(.app_background_color_orange_withtext) > span.fal { display: inline-block; } .app_checkboxes_withonlycheckboxicon > button > span.fas { display: inline-block; } /*Checkboxes large*/ /*Theme*/ .app_checkboxes_large:not(.app_checkboxes_noheight) > button, .app_checkboxes_large:not(.app_checkboxes_noheight) > a { outline: none; width: 12rem; border-style: solid; border-width: 1px; border-radius: 1rem; padding: 1rem; } .app_checkboxes_large > button, .app_checkboxes_large > a { height: 12rem; } .app_checkboxes_noheight > button, .app_checkboxes_noheight > a { height: auto; } .app_checkboxes_large { display: flex; } .app_checkboxes_large > button > span:first-of-type, .app_checkboxes_large > a > span:first-of-type { font-size: 3.5rem; margin-bottom: 1rem; } .app_checkboxes_large > button > span:last-of-type, app_checkboxes_large > a > span:last-of-type { position: absolute; top: 1rem; left: 1rem; font-size: 2rem; } .app_checkboxes_large > button.newCheckboxesActive > span:last-of-type:before, .app_checkboxes_large > button.subscriptionPlanBoxSuggested > span:last-of-type:before { font-weight: 600 !important; content: "\f14a"; } .app_checkboxes_large_nosize > button { width: auto; height: auto; } /*Checkboxes nowidth*/ .app_checkboxes_nowidth > div, .app_checkboxes_nowidth > button { width: auto !important; } .app_checkboxes_nowidth > div > div > span:nth-of-type(2) { min-width: 0.3rem; } .app_checkboxes_nowidth > div > div { display: flex; align-items: center; } /*Checkboxes specific*/ .app_checkboxes_wide > button { height: 6rem; } .app_checkboxes_nomargin > div, .app_checkboxes_nomargin > button { margin: 0 !important; } .app_checkboxes_forregistration > a { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 14rem; height: 10rem; } /*----Specific classes-----*/ /*Feed*/ .app_feed_wrapper { width: 100%; padding: 2.3rem; border-radius: 2.5rem; margin-bottom: 1.5rem; position: relative; } .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) a, .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) a { text-decoration: none; } .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:not(:last-of-type), .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:not(:last-of-type) { margin-bottom: 0.5rem; } .app_feed_wrapper > div:last-child > div:nth-of-type(2) .fal, .app_feed_wrapper > div:last-child > div:nth-of-type(2) form .fal { text-decoration: none; font-size: 2.6rem; cursor: pointer; } .app_feed_wrapper a.app_link_visited:visited { color: hsl(var(--text-h), var(--text-s), calc(var(--text-l) + 46%)) !important; } .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:first-of-type, .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:nth-of-type(3), .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:first-of-type, .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(3) { font-size: 1.3rem !important; color: var(--font-color-secondary) !important; } .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) a, .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) a, .app_feed_wrapper > div:last-child > div:nth-of-type(2) .fal, .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) .app_feed_headline { color: var(--font-color-primary); font-size: 1.7rem; } .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:nth-of-type(2), .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) { font-family: Poppins, "Sans Serif"; } .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:nth-of-type(2):not(.app_font_weight_normal), .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(2):not(.app_font_weight_normal) { font-weight: 600; } .app_feed_wrapper > div:last-child > div:nth-of-type(2) > span:not(.app_font_size_button), .app_feed_wrapper > div:last-child > div:nth-of-type(2) .fal, .app_feed_wrapper > div:last-child > div:nth-of-type(2) span.fal { font-size: 2.6rem; } .app_feed_wrapper > div:last-child > div:nth-of-type(2) .fal, .app_feed_small_wrapper a, .app_feed_wrapper a { text-decoration: none !important; } .app_feed_wrapper > div:last-child > div:nth-of-type(2) > span { margin-right: 0.5rem; } .app_feed_subitemwithicon { margin-bottom: 0.4rem !important; display: flex; align-items: baseline; gap: 1rem; } .app_feed_subitemwithicon > span:first-of-type { color: var(--icon-color-primary); font-size: 1.5rem; display: inline-flex; align-items: center; text-align: center; justify-content: center; } .app_feed_subitemwithicon:not(.app_feed_subitemwithicon_normalfont) > span:not(:first-of-type) { font-size: 1.3rem; color: var(--font-color-primary); } .app_feed_subitemwithicon.app_feed_subitemwithicon_normalfont { font-size: var(--font-color-primary); } .app_feed_small_wrapper { width: 100%; border-radius: 1.5rem; padding: 1rem; } .app_feed_small_wrapper.app_background_color_orange_withouttext { background: var(--third-bg) !important; } .app_feed_item_headline a { text-decoration: none; } .app_feed_horisontell { min-width: 100%; overflow-x: auto; overflow-y: hidden; position: relative; grid-gap: 1rem; } .app_feed_horisontell.app_margin_bottom_15 { margin-bottom: 1.5rem; } .app_feed_horisontell > div:not(.app_clients_logotypeswithborder) { border-radius: 2.6rem; } .app_feed_horisontell.app_feed_horisontell_noheight > div { height: auto; } .app_feed_horisontell.app_feed_horisontell_largewidth > div { width: 33rem !important; min-width: 33rem !important; } .app_feed_horisontell_small_noheight > div { height: auto; } .app_feed_horisontell_verysmall > div { height: 10rem; min-width: 15rem; } .app_feed_horisontell > div > div { width: 100%; } .app_feed_horisontell_30 > div { min-width: 20rem; max-width: 20rem; width: 20rem; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader > div { position: relative; padding: 0; height: auto; min-width: 17rem; max-width: 17rem; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader > div > div:first-of-type { min-height: 140px; width: 100%; overflow: hidden; border-top-left-radius: 2rem; border-top-right-radius: 2rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_smallheight > div > div:first-of-type { min-height: 110px; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_wide > div { min-width: 25rem; border-radius: 3rem; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_wide > div > div:first-of-type { min-height: 8.5rem; background-repeat: no-repeat; background-size: cover !important; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader > div > div:first-of-type > div { width: 100%; height: 140px; border-top-left-radius: 2rem; border-top-right-radius: 2rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-position: top 28% center !important; background-size: 100% !important; background-repeat: no-repeat !important; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader > div > div:first-of-type > span { width: 100%; height: 140px; border-top-left-radius: 2rem; border-top-right-radius: 2rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_large > div { width: 30rem; min-width: 30rem; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_large > div > div:first-of-type { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_large > div > div:not(:first-of-type) { padding: 0 1.5rem; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_large > div > div:nth-of-type(2) { margin-top: -3rem; margin-bottom: 1rem; } .app_feed_horisontell.app_feed_horisontell_withbackgroundheader.app_feed_horisontell_withbackgroundheader_large > div > div:nth-of-type(2) .app_flex_grow { margin-top: 3rem; } .app_feed_horisontell_wrapper { position: relative; } .app_feed_horisontell_wrapper a.SwimlaneLinkText, .l_scroll_container a.SwimlaneLinkText { margin-top: 0.5rem; transition: opacity 1.5s; opacity: 0; cursor: pointer; } .app_feed_horisontell_wrapper:hover a.SwimlaneLinkText, .l_scroll_container:hover a.SwimlaneLinkText { opacity: 1; } .app_feed_horisontell_wrapper > div > h2:not(.l_font_size_number_large) { font-size: 2.2rem; font-family: Poppins, "Sans Serif"; } .app_icon_asbuttons { display: flex; justify-content: flex-end; z-index: 1; } .app_icon_asbuttons > span:not(:empty) { margin-top: -3.5rem; box-shadow: 0 0px 1.3px rgba(0, 0, 0, 0.035), 0 0px 10px rgba(0, 0, 0, 0.07); padding: 1rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; height: 3rem; width: 3rem; } .app_icon_asbuttons > span:last-of-type { margin-right: 0.5rem; margin-left: 0.5rem; } .app_icon_asbuttons > span .fal { border: none; color: var(--font-color-primary); font-size: 2rem; text-decoration: none; } .app_clients_logotypeswithborder > a { background: white; height: 10rem; width: 10rem; padding: 1rem; box-shadow: 0px 0.3px 0.4px -5px rgba(0, 0, 0, 0.02), 0px 0.7px 1.1px -5px rgba(0, 0, 0, 0.028), 0px 1.3px 2px -5px rgba(0, 0, 0, 0.035), 0px 2.2px 3.6px -5px rgba(0, 0, 0, 0.042), 0px 4.2px 6.7px -5px rgba(0, 0, 0, 0.05), 0px 10px 16px -5px rgba(0, 0, 0, 0.07); border-radius: 2.5rem; margin-right: 2rem; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center; overflow: hidden; } .app_feed_horisontell_icons a { text-decoration: none !important; } .app_feed_horisontell_icons > a { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-width: 9rem; max-width: none; height: auto; width: auto; border-radius: 0; margin-right: 2.8rem; } .app_feed_horisontell_icons > a > div:first-of-type:not(.app_remove_superellipse) { border-radius: 2rem; cursor: pointer; min-width: 7rem; max-width: 7rem; width: 7rem; height: 7rem; display: flex; justify-content: center; align-items: center; } .app_feed_horisontell_icons > a > div:first-of-type { border-radius: 2rem; cursor: pointer; min-width: 7rem; max-width: 7rem; width: 7rem; height: 7rem; display: flex; justify-content: center; align-items: center; } .app_feed_horisontell_icons > a > div:first-of-type .fas, .app_feed_horisontell_icons > a > div:first-of-type .far { transition: all 0.2s ease-in-out; font-size: 2.6rem; } .app_feed_horisontell_icons > a > div:last-of-type { font-size: 1.2rem; text-align: center; margin-top: 0.3rem; } .app_feed_horisontell_icons > a:hover > div:first-of-type .fas, .app_feed_horisontell_icons > a:hover > div:first-of-type .far { transform: scale(1.2); } /*Planning*/ .app_planning_prices > td:nth-of-type(odd) .totalPrice { opacity: 0.6; } /*Forms*/ .app_form_filter_wrapper { margin-bottom: 1.2rem; } .app_form_filter_wrapper > div:first-of-type { margin-bottom: 0.4rem; } /*Input widths*/ .app_input_short { width: 10rem; } /*Dragdrop */ .drop-active { border: 2px dashed gray; } .drop-target { background-color: lightblue; } /*Grid system*/ .app_grid_wrapper { margin-bottom: 1.5rem; width: 100%; } .app_grid > div:not(:first-of-type):not(.app_grid_input_nomarginleft) > div { margin-left: 0.5rem; } .app_grid .app_label label, .app_grid_wrapper .app_label label { margin-bottom: 0 !important; } .app_grid input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]), .app_grid .select2-container, .app_grid textarea, .app_grid:not(.app_grid_inputwithselectafter) select:not(.combobox):not(.select2-hidden-accessible) { width: 100% !important; } .app_grid .app_input_date_onlydate input:not([type=checkbox]), input.app_input_date_onlydate, .filterFields input.date { width: 11rem !important; } .app_grid .app_input_extent input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]) { width: 7rem !important; } .app_grid .app_input_extent_long input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]) { width: 9.5rem !important; } .app_grid .app_input_price input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]) { width: 9rem !important; } .app_grid .app_input_price_long input:not([type=checkbox]):not(.app_button_nexttoinput):not([type=radio]) { width: 10.5rem !important; } .app_grid_20procent { width: 25% !important; } .app_grid_15procent { width: 15% !important; } .app_grid_25procent { width: 25% !important; } .app_grid_30procent { width: 30% !important; } .app_grid_33procent { width: 33.333333333% !important; } .app_grid_35procent { width: 35% !important; } .app_grid_40procent { width: 40% !important; } .app_grid_42procent { width: 42% !important; } .app_grid_50procent { width: 50% !important; } .app_grid_55procent { width: 55% !important; } .app_grid_60procent { width: 70% !important; } .app_grid_70procent { width: 70% !important; } .app_grid_75procent { width: 75% !important; } .app_grid_100procent { width: 100% !important; } .app_grid_40procent_firstinput input:first-of-type { width: 40% !important; } .app_grid_fullwidth_input > span { display: flex; align-items: center; } .app_grid_fullwidth_input input { flex-grow: 1; margin-right: 0.3rem; } .app_grid_fixselectfirsttheninput > div { display: flex; } .app_grid_fixselectfirsttheninput > div > div:first-of-type { width: 30%; margin-right: 0.3rem; } .app_grid_fixselectfirsttheninput > div ul { width: 70%; } .app_grid_internal { border-radius: 1.2rem; } /*Pager and suggestions*/ .charcount_chars { display: flex; justify-content: flex-end; } .charcount_chars > span { margin-left: 0.2rem; font-weight: 600; } .app_form_suggestions > span { margin-right: 0.5rem; } .app_form_suggestions:not(.app_form_suggestions_notclickable) > span:not(:first-of-type), .app_link_blue { cursor: pointer; } .app_form_suggestions:not(.app_form_suggestions_notclickable) > span:not(:first-of-type):hover, .app_link_green:hover, .app_text_createtextaslink:hover, .app_link_blue:hover { text-decoration: underline; } .app_form_suggestions_notclickable > span:not(:first-of-type):not(.fas) { font-weight: 600; } /*Hover*/ .app_hover_edit_plus { position: relative; } .app_hover_edit_plus > a.fal { text-decoration: none; color: var(--font-color-primary); opacity: 0; left: 0; right: 0; margin: 0 auto; text-align: center; cursor: pointer; transition: opacity 0.3s; position: absolute; vertical-align: middle; font-size: 8rem; z-index: 2; } .app_hover_edit_plus:hover > a.fal { opacity: 1; } .app_hover_edit_plus > div { opacity: 0.7; transition: opacity 0.3s; } .app_hover_edit_plus:hover > div { opacity: 0.3; } .app_fixlogotypelockedswimlane { border-radius: 0 !important; border: none !important; } .app_fixlogotypelockedswimlane > span { height: auto !important; justify-content: flex-start !important; } .app_searchfilter { display: flex; flex-direction: column; grid-gap: 0.3rem; margin-bottom: 1.5rem; } .app_searchfilter .app_searchfilter_activelink .app_margin_left_auto, .app_searchfilter > a.app_searchfilter_activelink > div:nth-of-type(3) > span { color: hsla(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%), 1) !important; font-weight: 600; } .app_searchfilter > a > div:nth-of-type(1), .app_searchfilter > div > a > div:nth-of-type(1), .app_searchfilter > div > div:nth-of-type(1) { min-width: 2.4rem; } .app_searchfilter > div:not(.app_searchfilter_withdiv), .app_searchfilter > a:not(.app_searchfilter_addlink), .app_searchfilter > div > a { padding: 0.4rem 0.55rem; border-radius: 0.7rem; transition: background 0.3s; } .app_searchfilter > div:not(.app_searchfilter_withdiv):hover:not(.app_font_color_second):not(.app_box_message):not(.app_searchfilter_addlink), .app_searchfilter > .app_searchfilter_activelink, .app_searchfilter_withdiv > .app_searchfilter_activelink, .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message):not(.app_searchfilter_addlink), .app_searchfilter > div > a:hover:not(.app_font_color_second):not(.app_box_message) { cursor: pointer; } .app_searchfilter_withdiv > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-bell:before, .app_searchfilter_withdiv > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-bell:before { content: "\f8fa"; font-weight: 900; color: var(--third-color); } .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-list-ul:before, .app_searchfilter > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-list-ul:before { content: "\f0cb"; font-weight: 900; color: var(--third-color); } .app_searchfilter_withdiv > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-star:before, .app_searchfilter_withdiv > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-star:before { content: "\f762"; font-weight: 900; color: var(--secondary-color); } .app_searchfilter_withdiv > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-user-friends:before, .app_searchfilter_withdiv > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-user-friends:before { content: "\f6a5"; font-weight: 900; color: var(--third-color); } .app_searchfilter_withdiv > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-file-contract:before, .app_searchfilter_withdiv > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-file-contract:before { content: "\f573"; font-weight: 900; color: var(--third-color); } .app_searchfilter_withdiv > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-user-plus:before, .app_searchfilter_withdiv > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-user-plus:before { content: "\f1e6"; font-weight: 900; color: var(--third-color); } .app_searchfilter_withdiv > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-history:before, .app_searchfilter_withdiv > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-history:before { content: "\f002"; font-weight: 900; color: var(--primary-bg); } .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-trash-alt:before, .app_searchfilter > a.app_searchfilter_activelink:not(.app_font_color_second):not(.app_box_message) > div:first-of-type > span.fa-trash-alt:before { content: "\e2ac"; font-weight: 900; color: var(--negative-color); } .app_searchfilter > div:not(.app_searchfilter_withdiv) > div:first-of-type > span:not(.app_color_brainville_yellow), .app_searchfilter > a > div:first-of-type > span:not(.app_color_brainville_yellow), .app_searchfilter > div > a > div:first-of-type > span:not(.app_color_brainville_yellow) { color: var(--font-color-third); transition: color 0.3s; min-width: 1.3rem; } .app_searchfilter_withdiv:hover .app_position_searchprofilepen { opacity: 1; } .app_searchfilter_withdiv .app_position_searchprofilepen { transition: opacity 0.3s; } .app_searchfilter_activelink > div:nth-of-type(2) { font-weight: 600; } /*Boxes*/ .app_box_white { padding: 1rem; border-radius: 0.5rem; } .app_box_add { border-style: solid; border-width: 1px; border-radius: 1rem; padding: 0.5rem 1rem; margin-bottom: 0.5rem; } .combobox2_results { box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1); max-height: 300px; overflow-y: scroll; overflow-x: hidden; background-color: white; position: absolute; z-index: 3; } .vatinfo_searchresult { cursor: pointer; padding-left: 16px; padding-top: 10px; padding-bottom: 10px; margin-left: 1rem; margin-right: 1rem; } .vatinfo_searchresult:hover { border-radius: 0.5rem; } /*Tabs*/ .app_tabs_first, .app_tabs_second_wrapper > .app_tabs_second { margin-top: 1.5rem; overflow-x: auto; padding-bottom: 0; } .app_tabs_first > a { text-decoration: none; border-bottom: 0.2rem solid transparent; position: relative; white-space: nowrap; } .app_tabs_first > a:not(.app_submenu_active) { color: #8f8d8b !important; } .app_tabs_first > a:not(.app_tabs_disabled):hover:after, .app_tabs_first > a.app_submenu_active:after, .app_tabs_first > a.currentPage:after { border-bottom: 0.2rem solid rgb(249, 177, 35) !important; display: block; transform: scaleX(1); } .app_tabs_first > a:after { content: ""; transform: scaleX(0); transition: transform 300ms ease-in-out; border-bottom: 3px solid transparent; } .app_tabs_first > a:hover, .app_tabs_first > a.app_submenu_active, .app_tabs_first > a.currentPage { transition: opacity 0.3s ease-in-out; cursor: pointer; opacity: 1; border: none; color: var(--font-color-primary); } .app_tabs_first > a.app_submenu_active, .app_tabs_first > a.currentPage { font-weight: 600; } .app_tabs_first > a > div:not(:only-of-type):last-of-type { border-radius: 50%; padding: 0.3rem; margin-left: 0.5rem; font-size: 1.1rem; width: 2rem; height: 2rem; text-align: center; } .app_tabs_first > a > div { padding-bottom: 0.2rem; display: flex; align-items: end; } .app_tabs_second_wrapper { width: 100%; } .app_tabs_second_wrapper > .app_tabs_second { white-space: nowrap; padding-bottom: 1rem; position: relative; } .app_tabs_second_wrapper > .app_tabs_second_content { display: none; } .app_tabs_second_wrapper > .app_tabs_second_content.app_tabs_second_active { display: inherit !important; } .app_tabs_second > a, .app_tabs_second > div:not(.app_position_absolute_bottomlinefortabs) { margin-right: 2rem; opacity: 0.5; text-decoration: none; position: relative; white-space: nowrap; border-bottom: 1px solid transparent; padding-bottom: 0.5rem; color: var(--font-color-primary); } .app_tabs_disabled > div > span:first-of-type { cursor: text !important; opacity: 0.3 !important; } .app_tabs_disabled > div { cursor: text !important; } .app_tabs_second > a.app_tabs_second_active, .app_tabs_second > a:hover, .app_tabs_second > div.app_tabs_second_active, .app_tabs_second > div:hover { opacity: 1; } /*Specific classes*/ .app_item_slashicon { cursor: pointer; font-size: 1.6rem; position: absolute; left: -3px; top: 0px; text-shadow: -2px 1px 0px #f8f7f2; } .app_clear_paddingonprofessionalprofile > .app_padding_5, .app_clear_paddingonprofessionalprofile > .app_padding_5 > .app_margin_top_15, .app_clear_paddingonprofessionalprofile > .app_padding_5, .app_clear_paddingonprofessionalprofile > .app_padding_5 { padding: 0; margin-top: 0; } .app_fixinputwithlabelafter > span > span.labelOnInputAfter, .app_fixinputwithlabelafter > span.labelOnInputAfter { margin-left: 0.5rem; margin-right: 0.5rem; font-weight: 400 !important; white-space: nowrap; } .app_fixinputwithselectafter .app_width_100procent.app_display_flex > div:last-of-type { width: 100%; } .app_fixlogotypediv > div, .app_fixlogotypediv_height5 > div { border-radius: 0; background-size: contain !important; background-repeat: no-repeat; background-position: left center; } .app_fixlogotypediv > div { max-width: 70%; } .app_fixlogotypediv_height5 > div { max-width: 100%; min-width: 100%; width: 100%; } .app_fixlogotypediv > div { height: 3rem; } .app_fixlogotypediv_height5 > div { height: 5rem; } .app_fixiconsizemedium .fal { text-decoration: none; color: var(--font-color-primary); font-size: 2rem; } .app_fixiconsizelarge .fal { text-decoration: none; color: var(--font-color-primary); font-size: 2.6rem; } .app_fixlogotypediv { width: 70%; } .app_fixlogotypediv.app_fixlogotypediv_100procent, .app_fixlogotypediv.app_fixlogotypediv_height5 { width: 100%; } .app_fixlogotypediv.app_fixlogotypediv_100procent > div { max-width: 100%; max-height: 2rem; } .app_statusindicator { height: 2.7rem; width: 0.5rem; border-radius: 0.2rem; left: -0.25rem; top: 1.5rem; } .app_fixCreditCardBox .app_feed_wrapper { box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.1); } .app_fix_messageboxinmenu { width: 30%; margin-top: 0; padding: 0 1rem; font-size: 1rem; margin-left: 3.5rem; text-align: center; } .app_fix_messageboxinmenu:after { margin-left: -5px !important; border-width: 6px !important; } .app_fix_messageboxinmenu:before { margin-left: -6px !important; border-width: 7px !important; } .app_fix_messageboxinmenu:before, .app_fix_messageboxinmenu:after { left: 1.8rem !important; } .app_link_withicon:before { display: inline-block; text-align: center; margin-right: 0.8rem; width: 1.3rem; } .app_fix_colorofsvg { background-color: #564b3c; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 40%; mask-size: 40%; -webkit-mask-position: center; mask-position: center; } .app_fix_widthondashboardfunnels > div:not(.app_width_100procent_important) { width: 85% !important; } .app_fix_kronrightgadgetlist > div { border-style: solid; border-width: 1px; box-shadow: none; transition: border 0.2s; } .app_fix_kronrightgadgetlist > div:hover { border-width: 1px; border-style: solid; } .app_fix_kronrightgadgetlist > div > .app_display_flex { flex-direction: column; } .app_fix_kronrightgadgetlist > div > .app_display_flex > div:first-child { width: 70%; } .app_fix_kronrightgadgetlist > div > .app_display_flex > div { width: 100%; padding: 0; margin: 0; } .app_fix_kronrightgadgetlist > div > .app_display_flex > div:not(:last-of-type) { margin-bottom: 1.5rem; } .app_fix_kronrightgadgetlist > div > .app_display_flex > div:last-of-type { text-align: center; } input::-webkit-calendar-picker-indicator { display: none; } .app_fix_chart > div, .app_fix_chart { height: 40rem; } .app_fix_chart .chartGadget, .app_fix_chart .highcharts-container, .app_fix_chart .highcharts-container svg { width: 100% !important; } .highcharts-tooltip > span { background: white; border: none; border-radius: 1rem; box-shadow: 0 0.1px 1.4px rgba(0, 0, 0, 0.022), 0 0.3px 3.3px rgba(0, 0, 0, 0.032), 0 0.6px 6.3px rgba(0, 0, 0, 0.04), 0 1.1px 11.2px rgba(0, 0, 0, 0.048), 0 2.1px 20.9px rgba(0, 0, 0, 0.058), 0 5px 50px rgba(0, 0, 0, 0.08); padding: 0.5rem 1rem; } .highcharts-tooltip > span > span { font-size: 1.3rem !important; font-weight: 600; } ::-webkit-file-upload-button { color: black; font-size: 11pt; } .app_feed_horisontell_addbordertoboxes > div:not(.app_border_dashed) { border: 1px solid rgba(0, 0, 0, 0.1) !important; } /*Confirmation message*/ .app_confirmation { position: fixed; bottom: 0; left: 10%; z-index: 10000; } .app_confirmation > div { background-color: var(--third-color); z-index: 10000; color: white !important; padding: 2rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem; font-size: 18px; text-align: center; } .app_confirmation > div.feedbackSuccess { background-color: var(--third-color); } .app_confirmation > div.feedbackFailure { background-color: var(--negative-color); } /*Details*/ .app_details:not(.app_margin_bottom_5):not(.app_margin_bottom_0) { margin-bottom: 3.5rem; } .app_details > div:not(.app_margin_bottom_10) { margin-bottom: 1.5rem; } .app_details > div > div:nth-child(2), .app_details > div > div > div:nth-child(2) { font-family: Poppins, "Sans Serif"; color: var(--font-color-secondary) !important; } .app_details > div > div:nth-child(2) a, .app_details > div > div > div:nth-child(2) a { color: var(--font-color-secondary) !important; font-weight: 400; } .app_details > div > div:nth-child(1), .app_details > div > div:nth-child(1) label, .app_details > div > div > div:nth-child(1), .app_details > div > div > div:nth-child(1) label { color: var(--font-color-primary); font-weight: 600; font-family: Poppins, "Sans Serif"; font-size: 1.5rem; } .app_details > div > div i { margin-right: 0.3rem; } .app_details_withicon > div { display: flex; align-items: center; } .app_details_withicon > div > div:first-child { margin-right: 1.5rem; } .app_details_withicon > div > div:first-child span { font-size: 2.6rem; width: 2.5rem; text-align: center; } .app_details_withhiddenexplenation > div { align-items: flex-end; } .app_details_withhiddenexplenation > div > div:first-of-type { align-self: center; } .app_details_withhiddenexplenation > div > div:nth-child(2) { margin-right: 2rem; min-width: 12rem; } .app_details_withhiddenexplenation > div > div:nth-child(3) { opacity: 0; transition: opacity 1s; } .app_details_withhiddenexplenation:hover > div > div:nth-child(3) { opacity: 0.8; } .app_details_small > div { margin-bottom: 0.5rem; display: flex; } .app_details_small > div > span:first-of-type { min-width: 10rem; font-weight: 600; } .app_width_35procent > h2:not(:first-of-type) { margin-top: 4rem; } .app_item_withicon_horizontel > div:first-child { margin-right: 0.5rem; } .app_item_withicon_horizontel > div:last-child { font-size: 1.3rem; } /*Grid dashboard*/ .app_dashboard_grid { display: grid; grid-gap: 1.5rem; grid-template-columns: repeat(22, 1fr); } .app_dashboard_grid_10 { grid-template-columns: repeat(10, 1fr); } /*Grid width*/ .app_dashboard_grid > div.app_dashboard_grid_width_22of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_12of22 { -ms-grid-column-span: 12; grid-column: span 12; } .app_dashboard_grid > div.app_dashboard_grid_width_11of22 { -ms-grid-column-span: 11; grid-column: span 11; } .app_dashboard_grid > div.app_dashboard_grid_width_10of22 { -ms-grid-column-span: 11; grid-column: span 11; } .app_dashboard_grid > div.app_dashboard_grid_width_10of22 { -ms-grid-column-span: 10; grid-column: span 10; } .app_dashboard_grid > div.app_dashboard_grid_width_9of22 { -ms-grid-column-span: 9; grid-column: span 9; } .app_dashboard_grid > div.app_dashboard_grid_width_8of22 { -ms-grid-column-span: 8; grid-column: span 8; } .app_dashboard_grid > div.app_dashboard_grid_width_7of22 { -ms-grid-column-span: 7; grid-column: span 7; } .app_dashboard_grid > div.app_dashboard_grid_width_6of22 { -ms-grid-column-span: 6; grid-column: span 6; } .app_dashboard_grid > div.app_dashboard_grid_width_5of22 { -ms-grid-column-span: 5; grid-column: span 5; } .app_dashboard_grid > div.app_dashboard_grid_width_4of22 { -ms-grid-column-span: 4; grid-column: span 4; } .app_dashboard_grid > div.app_dashboard_grid_width_3of22 { -ms-grid-column-span: 3; grid-column: span 3; } .app_dashboard_grid > div.app_dashboard_grid_width_2of22 { -ms-grid-column-span: 2; grid-column: span 2; } @media only screen and (max-width: 50rem) { .app_dashboard_grid > div.app_dashboard_grid_width_10of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_11of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_4of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_3of22 { -ms-grid-column-span: 11; grid-column: span 11; } .app_dashboard_grid > div.app_dashboard_grid_width_2of22 { -ms-grid-column-span: 11; grid-column: span 11; } .app_dashboard_grid > div.app_dashboard_grid_width_6of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_8of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_9of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_7of22 { -ms-grid-column-span: 22; grid-column: span 22; } } .app_dashboard_grid.app_dashboard_grid_10 > div.app_dashboard_grid_width_10of22 { -ms-grid-column-span: 4; grid-column: span 4; } .app_dashboard_grid.app_dashboard_grid_10 > div.app_dashboard_grid_width_4of22 { -ms-grid-column-span: 2; grid-column: span 2; } .app_dashboard_grid.app_dashboard_grid_10 > div.app_dashboard_grid_width_3of22 { -ms-grid-column-span: 4; grid-column: span 4; } .app_dashboard_grid.app_dashboard_grid_10 > div.app_dashboard_grid_width_2of22 { -ms-grid-column-span: 1; grid-column: span 1; } .app_dashboard_grid.app_dashboard_grid_10 > div.app_dashboard_grid_width_6of22 { -ms-grid-column-span: 3; grid-column: span 3; } .app_dashboard_grid.app_dashboard_grid_10 > div.app_dashboard_grid_width_8of22 { -ms-grid-column-span: 5; grid-column: span 5; } /*Grid Height*/ .app_dashboard_grid > .app_dashboard_grid_height_12of12 { grid-row: span 12 !important; } .app_dashboard_grid > .app_dashboard_grid_height_10of12 { grid-row: span 10 !important; } .app_dashboard_grid > .app_dashboard_grid_height_9of12 { grid-row: span 9 !important; } .app_dashboard_grid > .app_dashboard_grid_height_8of12 { grid-row: span 8 !important; } .app_dashboard_grid > .app_dashboard_grid_height_6of12 { grid-row: span 6 !important; } .app_dashboard_grid > .app_dashboard_grid_height_5of12 { grid-row: span 5 !important; } .app_dashboard_grid > .app_dashboard_grid_height_4of12 { grid-row: span 4 !important; } .app_dashboard_grid > .app_dashboard_grid_height_3of12 { grid-row: span 3 !important; } .app_dashboard_grid_columns_2 { display: grid; grid-gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(50%, 2fr)); grid-auto-rows: 0.1rem; } .app_dashboard > div { width: 100%; padding: 1.5rem; border-radius: 1.5rem; position: relative; transition: box-shadow 0.5s; box-shadow: 0 0 0.05rem rgba(121, 92, 52, 0.03), 0 0 0.5rem rgba(121, 92, 52, 0.05), 0 0 0.8rem rgba(121, 92, 52, 0.12); } .app_dashboard_item_header, .app_dashboard_item_content_onlynumber { display: flex; justify-content: space-between; padding-bottom: 1rem; } .app_dashboard_item_header > div:first-of-type, .app_dashboard_item_header > span:first-of-type { font-weight: 600; text-decoration: none; } .app_dashboard_item_header .fas { font-size: 1.8rem; } .app_dashboard_item_content_numberwithtextunder { text-align: center; } .app_dashboard_item_content_numberwithtextunder > div:first-child { font-weight: 600; font-size: 4rem; line-height: 1.3; } .app_dashboard_item_content_onlynumber { font-weight: 600; font-size: 1.7rem; } .app_dashboard_item_putinthecenter { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 80%; } .app_dashboard_item_underheadline { font-weight: 400; opacity: 0.5; } .app_dashboard_item_fancylink > a { display: flex; flex-direction: column; text-align: center; } .app_dashboard_item_icontextnumberlink span.fas, .app_dashboard_item_icontextnumberlink span.fad { width: 4.5rem; height: 4.5rem; display: inline-flex; justify-content: center; align-items: center; border-radius: 1.5rem; font-size: 2.2rem; } .app_dashboard_item_icontextnumberlink { justify-content: center; } .app_dashboard_item_iconnumberlinkvertical { width: 100%; height: 100%; } .app_dashboard_item_iconnumberlinkvertical span.fas, .app_icon_orangebackground_withstyle, .app_icon_orangebackground_withstyle_span > span { width: 3.5rem; height: 3.5rem; display: flex !important; justify-content: center; align-items: center; border-radius: 1rem; font-size: 1.5rem; } .app_dashboard_item_iconnumberlinkvertical span.fal { margin-top: auto; font-size: 1.5rem; } .app_dashboard_item_iconnumberlinkvertical > div > a > span:first-of-type > span:nth-of-type(2), .app_dashboard_item_iconnumberlinkvertical > div > span:first-of-type > span:nth-of-type(2) { font-size: 2rem; } a.fa-long-arrow-right { font-size: 2rem; } /*Filter*/ .app_filter_summary { display: flex; align-items: center; } .app_filter_summary select { height: 3rem !important; padding: 0.3rem !important; font-size: 1.1rem !important; } .app_filter_summary > span, .app_filter_summary > div > span { margin-right: 0.5rem; } .app_filter_summary > span { padding: 0.1rem 1rem; border-radius: 0.8rem; background: rgba(0, 0, 0, 0.05); } .app_filter_summary > a, .app_filter_summary > div > a { text-decoration: none; font-weight: 600; } .app_filter { cursor: pointer; } .app_filter > div { margin-left: 2rem; } .app_filter > div > div:first-of-type { opacity: 0.3; } .app_filter > div > div:last-of-type > span:last-of-type { margin-left: 1rem; } .app_filter_content { display: none; } .app_filter_wrapper .app_margin_betweendivs_medium { font-size: 1.3rem; } .app_filter_wrapper_edit span.fal { display: none; } .filterDisplay { cursor: pointer; } .filterDisplay { display: inline-block; margin-right: 1rem; } /*Scroll*/ .app_scroll { z-index: 3; cursor: pointer; position: absolute; width: 100%; top: 45%; } .app_scroll > span { position: absolute; font-size: 5rem; opacity: 0.05; transition: opacity 0.2s ease-in; top: 45%; } .app_scroll > span:first-of-type { left: -0.6rem; } .app_scroll > span:last-of-type { right: -0.6rem; } .app_feed_horisontell_wrapper:hover .app_scroll > span { opacity: 0.15; } .app_scroll:hover > span { opacity: 0.4 !important; } .app_scroll_auto { overflow: scroll; } /*Slider*/ .app_slider { display: flex; align-items: center; font-size: 1.3rem; cursor: pointer; margin-bottom: 5px; } .app_slider > div:nth-child(1), .app_slider > div:nth-child(3) { transition: color 1s, transform 1s; } .app_slider > div:nth-child(1):hover, .app_slider > div:nth-child(3):hover { color: rgb(0, 0, 0) !important; transform: scale(1.03); } .app_slider > div:nth-child(2) { width: 3.6rem; padding: 0 0.6rem; } .app_slider > div:nth-child(2) > span { border-radius: 3px; width: 100%; padding: 4px; position: relative; display: inline-block; } .app_slider > div:nth-child(2) > span > span { width: 10px; height: 10px; position: absolute; left: -2px; top: -1px; border-radius: 5px; } .app_slider > div:nth-child(2) > span > span.app_slider_active { right: -2px; left: auto; } /*Pricing*/ .app_checkboxes_withonlytext > div { position: relative; font-family: Poppins, "Sans Serif"; font-weight: 600; border: 0.1rem solid var(--transparent-xs); padding: 0; border-radius: 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; max-width: 100%; } .app_checkboxes_withonlytext > div > div { padding: 8px 14px; border-radius: 8px; cursor: pointer; left: 0; width: 100%; background: transparent; z-index: 1; text-align: center; transition: color 0.3s ease, background-color 0.3s ease; color: var(--secondary-color); } .app_checkboxes_withonlytext > div > div.app_checkboxes_withonlytext_active { z-index: 1; width: 50%; position: absolute; height: 84%; margin: 0.4rem; transition: left 0.3s ease, width 0.15s ease; } .app_checkboxes_withonlytext_6 > div > div, .app_checkboxes_withonlytext_6 > div > div.app_checkboxes_withonlytext_active { width: 16.66%; } .app_pricing_counter { font-family: Poppins, "Sans Serif", sans-serif; } .app_pricing_counter > span:first-of-type { margin-right: 0.5rem; } .app_pricing_counter > div:first-of-type { font-size: 4rem; font-weight: 600; line-height: 0.9; } .app_pricing_counter > div:nth-of-type(2) { font-size: 1.2rem; margin-left: 0.4rem; } .app_pricing_counter > div:nth-of-type(3), .app_pricing_counter > div:nth-of-type(4) { font-size: 1.2rem; margin-top: 4rem; margin-left: 0.5rem; } .app_list_withicon > div { display: flex; align-items: center; margin-bottom: 2rem; } .app_list_withicon > div > div:first-of-type { line-height: 1; } .app_list_withicon > div > div:first-of-type > span { text-align: center; font-size: 2.4rem; margin-right: 1rem; width: 2.4rem; color: rgba(0, 0, 0, 0.2); } .app_list_withicon > div > div:last-of-type { line-height: 1.6; } .app_list_withicon .app_h3 { display: none; } .app_checkboxes_withonlytext_small > div { font-family: Poppins, "Sans Serif"; font-weight: 600; font-size: 1.1rem; } .app_checkboxes_withonlytext_small > div > div { width: 50%; padding: 0.2rem 1rem !important; } .app_checkboxes_withonlytext_small > div > div.app_checkboxes_withonlytext_active { width: 50%; } /*Sort dropdown*/ .app_sortdropdown > div { position: absolute; top: 2rem; left: 0; margin-top: 0.5rem; border-radius: 1.5rem; padding: 1rem; align-items: flex-start; justify-content: flex-start; z-index: 2; } /*Clear style*/ .app_clear_boldtext b { font-weight: 400; } /*Old styles*/ .app_width_auto_select2 .select2-container { width: auto !important; } .app_width_auto { width: auto !important; } /*Circle flashcard*/ .dynamicResumeItemAsCircle, .flip-container, .flip-container-front, .flip-container-back { width: 19rem; width: min(max(13rem, 32cqw), 19rem); width: clamp(13rem, 32cqw, 19rem); height: 19rem; height: min(max(13rem, 32cqw), 19rem); height: clamp(13rem, 32cqw, 19rem); } .dynamicResumeItemAsCircle { border-radius: 2rem; text-align: center; overflow: hidden; padding: 0; position: relative; display: inline-block; } .dynamicResumeItemAsCircleSmall, .dynamicResumeItemAsCircleSmall .flip-container, .dynamicResumeItemAsCircleSmall .flip-container-front, .dynamicResumeItemAsCircleSmall .flip-container-back { width: 100%; height: 130px; } .dynamicResumeItemAsCircle .flip-container-flipper .flip-container-front { padding: 0.1rem; } .dynamicResumeItemAsCircle .flip-container-flipper .flip-container-back { padding: 1rem; border-radius: 2rem; } .dynamicResumeItemAsCircle .dynamicResumeItemActions { position: absolute; top: 0.8rem; right: 1rem; } .dynamicResumeItemAsCircle .dynamicResumeItemActions > span { font-size: 1.5rem; } .dynamicResumeItemAsCircle .dynamicResumeItemIcon { width: auto; display: block; } .dynamicResumeItemAsCircle .dynamicResumeItemIcon > span { font-size: 4rem !important; margin-bottom: 0.5rem; } .dynamicResumeItemAsCircle .dynamicResumeItemTitle { padding-right: 10px; padding-left: 10px; } .dynamicResumeItemAsCircle .dynamicResumeItemText { -webkit-hyphens: auto; hyphens: auto; vertical-align: middle; } .flip-container-back .dynamicResumeItemText { font-size: 1.8rem; } .dynamicResumeItemTitle13 { font-size: 1.6rem !important; } .dynamicResumeItemTitle11 { font-size: 1.4rem !important; } .dynamicResumeItemTitle9 { font-size: 1.2rem !important; } .dynamicResumeItemTitle, .dynamicResumeItemSubTitle { overflow-wrap: anywhere; } .flip-container-back { display: table; padding: 0; border: 1px solid #d0d0d0; } .flip-container-back > div { display: table-cell; vertical-align: middle; } .flip-container { -ms-perspective: 1000px; perspective: 1000px; } .flip-container.flip-container-hover .flip-container-flipper { transform: rotateY(180deg); } .flip-container-flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .flip-container-front, .flip-container-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; } .flip-container-front { z-index: 2; transform: rotateY(0deg); border-radius: 1rem; } .flip-container-back { transform: rotateY(180deg); } /*Slick slider*/ .dynamicResumeTutorial > div { display: none; margin: 10px 0; border-radius: 2.5rem; padding: 10px; } .dynamicResumeTutorialContent ol { list-style-type: none; padding: 0 50px; counter-reset: li-counter; } .dynamicResumeTutorialContent ol > li { position: relative; margin-bottom: 20px; padding-left: 0.5em; min-height: 26px; border-left: 1px solid #CCCCCC; } .dynamicResumeTutorialContent ol > li:before { position: absolute; top: 0; left: -1em; width: 0.8em; font-size: 20px; line-height: 1.1; font-weight: 600; font-family: Poppins, "Sans Serif"; text-align: right; content: counter(li-counter); counter-increment: li-counter; } .dynamicResumeTutorialContent ol span { font-family: Poppins, "Sans Serif"; font-weight: 600; } /*Outside navigation*/ @media only screen and (max-width: 50rem) { .app_outside_mainnavigation { position: fixed; left: 0; top: 5rem; width: 100%; height: 100vh; padding: 0 1rem; } .app_outside_mainnavigation > ul { align-items: flex-start; flex-direction: column; } .app_outside_mainnavigation .app_button_positive { background: none !important; } .app_outside_mainnavigation ul, .app_outside_mainnavigation li { width: 100% !important; } } .app_outside_mainnavigation ul { list-style-type: none; margin: 0; padding: 0; grid-gap: 3rem; } .app_outside_mainnavigation a { text-decoration: none !important; width: 100%; display: flex; } .app_outside_mainnavigation > ul > li { position: relative; cursor: pointer; } .app_outside_mainnavigation > ul > li > ul { height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.2s ease-in-out; border-radius: 1rem; width: -moz-max-content; width: max-content; display: flex; flex-direction: column; grid-gap: 0.2rem; left: -1.5rem; padding: 0.5rem; } .app_outside_mainnavigation > ul > li:hover > ul { height: auto; opacity: 1; visibility: visible; } .app_outside_mainnavigation > ul > li > ul { position: absolute; } @media only screen and (max-width: 50rem) { .app_outside_mainnavigation > ul > li > ul { position: relative; left: 0; padding: 0; } } .app_outside_mainnavigation > ul > li > ul > li > a { padding: 0.8rem 1rem; border-radius: 0.6rem; font-weight: 600; } .app_outside_mainnavigation > ul > li > ul > li { display: flex; align-items: center; } @media only screen and (max-width: 50rem) { .app_outside_mainnavigation > ul > li > ul { position: relative; } } .app_outside_mainnavigation_hamburger { width: 2.4rem; height: 2rem; position: relative; } .app_outside_mainnavigation_hamburger .app_outside_mainnavigation_line { display: block; width: 100%; height: 0.14rem; position: absolute; transition: all 200ms; } .app_outside_mainnavigation_hamburger .app_outside_mainnavigation_line:nth-child(1) { top: 0; } .app_outside_mainnavigation_hamburger .app_outside_mainnavigation_line:nth-child(2) { top: 50%; transform: translateY(-50%); } .app_outside_mainnavigation_hamburger .app_outside_mainnavigation_line:nth-child(3) { bottom: 0; } .app_outside_mainnavigation_hamburger.app_outside_mainnavigation_close .app_outside_mainnavigation_line:nth-child(1), .app_outside_mainnavigation_hamburger.app_outside_mainnavigation_close .app_outside_mainnavigation_line:nth-child(2) { top: 0; transform: translateY(0.8rem) rotate(45deg); } .app_outside_mainnavigation_hamburger.app_outside_mainnavigation_close .app_outside_mainnavigation_line:nth-child(3) { transform: translateY(-1rem) rotate(-45deg); } .app_outside_mainnavigation_close { z-index: 4; } /*Supplier list*/ .supplierList { display: flex; align-items: center; } .supplierList > div:first-child { width: 3.8rem; min-width: 3.8rem; max-width: 3.8rem; padding-right: 1rem; } .supplierList > div:first-child img { width: 100%; } .supplierList > div:nth-child(2) { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .supplierList > div:nth-child(2) > div:last-child { color: #7f7f7f; font-size: 12px; } .supplierList > div:last-child { padding-left: 1rem; margin-left: auto; text-align: right; font-size: 1.4rem; } .supplierList > div:last-child > span { font-size: 1.4rem; } .app_fix_sendlistpopuplayout { display: flex; flex-flow: row nowrap; justify-content: flex-start; } .app_fix_sendlistpopuplayout > div { display: flex; flex-flow: column nowrap; width: 33%; } .app_fix_sendlistpopuplayout > div > div:last-of-type { margin-top: auto; } .app_fix_logotypeificon > span { font-size: 3.5rem; display: block; text-align: center; } /*Achievements Box*/ .knowledgeBoxAchievmentWrapper { z-index: 3; display: none; background: #f8f7f2; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: fixed; bottom: 0%; right: 200px; color: black !important; overflow: hidden; animation: slideUp 1s 1; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3); max-width: 500px; } .knowledgeBoxAchievmentWrapperText { display: inline-block; max-width: 60%; vertical-align: middle; } .knowledgeBoxAchievmentWrapper .fa-hexagon { color: #2f3c4d; position: relative; font-size: 105px; vertical-align: middle; animation: zoomOut 2s; -webkit-text-stroke-width: 8px; -webkit-text-stroke-color: #263140; } .knowledgeBoxWrapper { position: absolute; z-index: 104; display: none; } .knowledgeBox > div > span:last-child { white-space: normal !important; } div.achievementSize { position: absolute; top: 10px; left: 100px; font-size: 13px; font-weight: 600; border-radius: 50%; background: hsl(var(--primary)); color: white; line-height: 25px; height: 25px; width: 25px; text-align: center; animation: opacity-pulse-number 3s; } .achievementStars { position: absolute; top: 0; left: 10px; } .achievementStars > span { position: absolute; color: #2f3c4d; animation-delay: 1.9s; } .knowledgeBoxAchievmentWrapper.achievementBronze .achievementStars > span { color: #CD7F32; } .knowledgeBoxAchievmentWrapper.achievementSilver .achievementStars > span { color: #C0C0C0; } .knowledgeBoxAchievmentWrapper.achievementGold .achievementStars > span { color: #FFD700; } .knowledgeBox .fa-chart-mixed { --fa-secondary-opacity: 1.0; --fa-primary-color: rgb(0,160,156); --fa-secondary-color: rgb(249,177,35); } .achievementStars > span:nth-of-type(1) { top: 40px; left: 20px; font-size: 20px; animation: spin 4000ms linear 2s infinite; } .achievementStars > span:nth-of-type(2) { top: 40px; left: 140px; font-size: 15px; animation: spin 4000ms linear 2s infinite; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .achievementStars > span:nth-of-type(3) { top: 15px; left: 70px; font-size: 15px; animation: spin 4000ms linear 2s infinite; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .achievementStars > span:nth-of-type(4) { top: 10px; left: 100px; font-size: 10px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .achievementStars > span:nth-of-type(5) { top: 25px; left: 40px; font-size: 10px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .achievementStars > span:nth-of-type(6) { top: 18px; left: 115px; font-size: 10px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .achievementIconsSmall .fa-hexagon { color: #d6dde3; -webkit-text-stroke-color: #d6dde3; text-shadow: -4px 0px 0px rgb(255, 255, 255); } .achievementBronze .fa-hexagon { color: #CD7F32; } .achievementSilver .fa-hexagon { color: #b4b4b4; } .achievementGold .fa-hexagon { color: #FFD700; } .knowledgeBoxAchievmentWrapper.achievementGold .fad { color: #a57310 !important; } .knowledgeBoxAchievmentWrapper .fad { color: white !important; font-size: 50px; animation: zoomIn 2s; } .achievementIconsSmall.fa-3x { font-size: 1.6em; } .achievementIconsSmall { width: 6.8rem; } .achievementIconsSmall > .fad { --fa-secondary-opacity: 0.7 ; } .knowledgeBox { position: relative; max-width: 34rem; border-width: 0.1rem; border-style: solid; min-height: 80px; min-width: 30rem; border-radius: 2rem; padding: 2.5rem; transform: scale(1); animation: pulse-black 0.8s 1; } .knowledgeBox > div:first-child { display: flex; align-items: center; } .knowledgeBox > div:first-child > span:first-child { font-size: 5rem; } .knowledgeBox > div:first-child > span:last-child, .knowledgeBoxAchievmentWrapper { text-transform: initial; font-size: 16px; font-weight: 400; font-family: Poppins, "Sans Serif"; } .knowledgeBox > div:first-child > span:last-child > span, .knowledgeBox > div:first-child > span:last-child > b { font-weight: 600; } .knowledgeBox:after, .knowledgeBox:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .knowledgeBox:after { border-color: rgba(0, 154, 150, 0); border-width: 15px; } .knowledgeBox:before { border-color: rgba(0, 154, 150, 0); border-width: 16px; } .knowledgeBox.knowledgeBoxLeft:after, .knowledgeBox.knowledgeBoxLeft:before { right: 100%; top: 40px; } .knowledgeBox.knowledgeBoxLeft:after { border-right-color: white; margin-top: -15px; } .knowledgeBox.knowledgeBoxLeft:before { border-right-color: white; margin-top: -16px; } .knowledgeBox.knowledgeBoxBottom:after, .knowledgeBox.knowledgeBoxBottom:before { top: 100%; left: 40px; } .knowledgeBox.knowledgeBoxBottom:after { border-top-color: white; margin-left: -15px; } .knowledgeBox.knowledgeBoxBottom:before { border-top-color: white; margin-left: -16px; } .knowledgeBox.knowledgeBoxRight:after, .knowledgeBox.knowledgeBoxRight:before { left: 100%; top: 40px; } .knowledgeBox.knowledgeBoxRight:after { margin-top: -15px; } .knowledgeBox.knowledgeBoxRight:before { margin-top: -16px; } .knowledgeBox.knowledgeBoxTop:after, .knowledgeBox.knowledgeBoxTop:before { bottom: 100%; left: 40px; } .knowledgeBox.knowledgeBoxTop:after { border-bottom-color: white; margin-left: -15px; } .knowledgeBox.knowledgeBoxTop:before { border-bottom-color: white; margin-left: -16px; } .knowledgeBox a { text-decoration-color: white !important; color: white !important; } .app_knowledgebox_upgrade .knowledgeBox { background: var(--gradient-upgrade); padding: 6.5rem; border: none; display: flex; flex-direction: column; } .app_knowledgebox_upgrade .knowledgeBox > div { float: none; text-align: center; } .app_knowledgebox_upgrade .knowledgeBox > div:first-of-type { display: flex; flex-direction: column; } .app_knowledgebox_upgrade .knowledgeBox > div:first-of-type > span:first-of-type { font-size: 6rem; --fa-primary-color: #ffdf80; --fa-secondary-color: #e8762f; --fa-secondary-opacity: 1.0; } .app_knowledgebox_upgrade .knowledgeBox > div:first-of-type > span:last-of-type > div:first-of-type { font-weight: 600; text-align: center; margin-bottom: 1rem; color: black; } .app_knowledgebox_upgrade .knowledgeBox > div:first-of-type > span:last-of-type > div:last-of-type { color: black; text-align: center; margin-bottom: 2rem; } /*Tutorial box*/ .tutorialBox .flexDisplay > div:first-of-type { margin-right: 1.5rem; } /*Pager*/ .gridpager { display: flex; justify-content: space-between; align-items: center; } .pager.simple_numbers { float: right; margin-top: 1rem; } .pager a { margin-right: 1rem; font-size: 1.4rem; font-weight: 600; color: var(--font-color-third) !important; text-decoration: none !important; } .pager:not(.simple_numbers) span { margin-right: 1rem; font-size: 1.4rem; font-weight: 600; color: var(--font-color-third); text-decoration: none !important; } .pager span, .pager a:hover, .pager a.current { font-weight: 600; cursor: pointer; } .pager a.pager_next, .pager a.next, .pager a.pager_previous, .pager a.previous { width: unset; } .pageCountInfo { width: 140px !important; background-color: transparent !important; color: #2f3c4d !important; border-width: 0 !important; } .flip-container .dynamicResumeItemActions { float: none !important; } .editableArea, .noEditableArea { position: relative; border: 0.1rem dashed transparent !important; } .editableArea.editableAreaHoverTransparent:hover { border: 0.1rem dashed #ffcb19 !important; border-radius: 1.3rem; } .editableArea > h2, .noEditableArea > h2 { margin-bottom: 1rem; } .editableArea .fa-pen, .editableArea .fa-ban, .editableArea .fa-circle-xmark, .editableArea .fa-circle-xmark:hover { font-size: 2rem; text-decoration: none !important; } .editableArea.editableAreaHoverTransparent .app_resume_tagline { margin-right: 2rem; } ul.tag-editor { padding: 0.4rem 0rem !important; } ul.tag-editor .placeholder { font-style: normal !important; font-family: Poppins, "Sans Serif"; } .dynamicResumeItemGrade > span, .dynamicResumeItemGrade > div > span { display: inline-block; margin-right: 3px; width: 13px; height: 13px; border-radius: 8px; background-color: var(--third-color-low); vertical-align: middle; } .dynamicResumeItemGrade { display: block; margin-bottom: 0.5rem; } .dynamicResumeItemGrade_Large > span, .dynamicResumeItemGrade_Large > div > span { width: 2rem; height: 2rem; border-radius: 1rem; margin-right: 0.6rem; cursor: pointer; } .app_edit_skill .dynamicResumeItemGrade { margin-top: 0; } .dynamicResumeItemGrade .fa-star:before { content: ""; } .dynamicResumeItemGrade > span.dynamicResumeItemGradeFilled, .dynamicResumeItemGrade > div > span.dynamicResumeItemGradeFilled { background-color: var(--primary-bg); } .dynamicResumeItem .fileUpload { width: 100%; } .app_ratingstar_edit_large .ratingstar { font-size: 2.6rem; margin-right: 0.3rem; cursor: pointer; } .ratingstar.fas.fa-times-circle, .ratingstar.fa-star.fas.colorOrange, .ratingstar.fa-star.fal.colorGrey { font-size: 1.2rem !important; margin-left: 0 !important; margin-right: 0.3rem !important; } /*Information box*/ .informationBox { padding: 1.5rem; border-radius: 1.5rem; } .informationBox img { max-width: 5rem; } /*On off switch*/ .onoffswitch { position: relative; width: 90px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .onoffswitch-disabled { cursor: auto !important; opacity: 0.3; } .onoffswitch:hover:not(.onoffswitch-disabled) .onoffswitch-inner:after, .onoffswitch:hover:not(.onoffswitch-disabled) .onoffswitch-inner:before { border: 1px solid #919191; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border-radius: 2px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; box-sizing: border-box; font-family: Poppins, "Sans Serif"; font-weight: 600; } .onoffswitch-inner:before { content: attr(data-before); padding-left: 10px; border: 1px solid #e8e2c9; background: #fcfcfc; color: #2f3c4d; } .onoffswitch-inner:after { content: attr(data-after); padding-right: 10px; background: #fcfcfc; color: #2f3c4d; text-align: right; border: 1px solid #e8e2c9; } .onoffswitch-switch { display: block; width: 26px; margin: 2px; background: #e3e3e3; position: absolute; top: 0; bottom: 0; right: 60px; border-radius: 2px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } /*Slidebox*/ .slideHeadlineNoBorder { display: flex; align-items: center; cursor: pointer; margin-bottom: 1rem; } .slideHeadlineNoBorder > span:first-of-type { margin-right: 1rem; } .slideHeadlineNoBorder > span:last-of-type { margin-left: auto; height: 2rem; width: 2rem; background: var(--secondary-bg); color: var(--secondary-color); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border-radius: 0.5rem; font-weight: 600; } .tabWithNumber > div > span:last-of-type:not(:only-of-type) { margin-left: 1rem; height: 2rem; min-width: 2rem; padding: 0 0.6rem; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.6rem; } /*Slide down adder (ansökningar)*/ .slideDownAdder { position: relative; padding: 10px; border-radius: 1.2rem; top: 2.2rem; left: 0; margin-top: 1rem; } .slideDownAdder:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible; } .slideDownAdder:after { border-width: 1rem; border-bottom-color: var(--white-bg); top: -2.05rem; left: 1rem; } .spinner { transition: all 1s ease-in; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; overflow: visible; margin-top: 0; margin-left: 0; width: 5rem; height: 5rem; text-align: center; align-items: center; box-shadow: 0px 0px 7.8px rgba(0, 0, 0, 0.021), 0px 0px 17.2px rgba(0, 0, 0, 0.031), 0px 0px 28.8px rgba(0, 0, 0, 0.038), 0px 0px 43.4px rgba(0, 0, 0, 0.044), 0px 0px 62.6px rgba(0, 0, 0, 0.05), 0px 0px 88.6px rgba(0, 0, 0, 0.056), 0px 0px 125.7px rgba(0, 0, 0, 0.062), 0px 0px 182.5px rgba(0, 0, 0, 0.069), 0px 0px 281.3px rgba(0, 0, 0, 0.079), 0px 0px 500px rgba(0, 0, 0, 0.1); border-radius: 50%; border: 1rem solid transparent; box-sizing: content-box; } .spinner > span { font-size: 5rem; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; } /*Warning box*/ .newWarningBox { position: relative; background: #e42350; border: 1px solid #e42350; color: white; padding: 10px !important; border-radius: 4px; margin-top: 15px; } .newWarningBox:after, .newWarningBox:before { bottom: 100%; left: 4%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .newWarningBox:after { border-color: rgba(228, 35, 80, 0); border-bottom-color: #e42350; border-width: 9px; margin-left: -9px; } .newWarningBox:before { border-color: rgba(228, 35, 80, 0); border-bottom-color: #e42350; border-width: 10px; margin-left: -10px; } .backLinkFixed { position: fixed; bottom: 50px; left: 42%; z-index: 10000; } .itemTableTwoRows { padding-top: 10px; } .itemTableTwoRows tr:nth-of-type(3n+1) > td > span { text-align: center; display: block; color: var(--third-bg); font-size: 24px; } .itemTableTwoRows tr:nth-of-type(3n+2) > td { text-align: center; font-family: Poppins, "Sans Serif"; font-weight: 600; font-size: 15px; padding-bottom: 0; margin-bottom: 0; } .itemTableTwoRows tr:nth-of-type(3n+3) > td { text-align: center; padding-bottom: 20px; font-family: Poppins, "Sans Serif"; font-size: 13px; font-weight: 400 !important; } .itemTableTwoRows tr > td:nth-of-type(odd) { padding-right: 30px; } .starRating > .fas, .starRating > .fal { font-size: 2.8rem; } .starRating.smallRating > .fas, .starRating.smallRating > .fal { font-size: 1rem !important; } .starRating > .fa-flip-horizontal { margin-left: -3.2rem; } .inlineEditorEdit { display: none; } .inlineEditor .inlineEditorEdit { display: none; white-space: nowrap; } .timeLeftDays, .timeLeftSeconds { margin-right: 2px; } /*Partner plugin dropdown*/ #connectionsList { border-radius: 1.5rem; background: white; z-index: 2; top: 5rem; right: 0; position: absolute; min-width: 26rem; } #connectionsList .fas { cursor: pointer; color: var(--font-color-secondary); } #connectionsList .todoGroupRow { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } #connectionsList .todoHeadline { padding: 1rem; display: flex; justify-content: space-between; align-items: center; } #connectionsList .todoGroupHeadline { font-weight: 600; } #connectionsList .todoUnderHeadline { font-size: 1.3rem; } #connectionsList .todoGroupArrow { padding-right: 1rem; } #connectionsList .todoItemList, #connectionsList .todoGroupType { padding-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; } /* Cookie consent*/ .cc-window { z-index: 999999999999 !important; } .cc-color-override.cc-window { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); } .cc-color-override .cc-btn { color: rgb(0, 0, 0); border-color: transparent; background-color: rgb(241, 214, 0); } .cc-color-override .cc-highlight .cc-btn:first-child { color: rgb(255, 255, 255); } .cc-deny { background-color: transparent !important; border-color: transparent !important; color: white !important; } /*Video*/ .explainerVideoBackground { background: url(/Content/Images/Sections/brainville_explainer_Off.png) no-repeat top center; width: 655px; height: 400px; background-size: contain; } /*Fix ads width*/ .boxBorderAd img { width: 100%; } @media screen and (min-width: 0px) and (max-width: 70.25rem) { /* Phones and Tablets */ body { padding-bottom: 15rem; -webkit-font-smoothing: antialiased; max-width: 100%; min-width: 100%; font-family: Poppins, "Sans Serif"; } select { padding: 0 1rem !important; line-height: 1.7 !important; color: var(--font-color-primary); font-family: Poppins, "Sans Serif"; } .app_flex_wrap_mobileandtablet { flex-wrap: wrap; } #Smallchat iframe { display: none; } .app_display_none_mobileandtablet { display: none; } .app_feed_wrapper > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) a, .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) a, .app_feed_wrapper > div:last-child > div:nth-of-type(2) .fal, .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div:nth-of-type(2) .app_feed_headline { font-size: 1.3rem !important; } .app_menu_second { padding: 0; } .app_display_none_desktop { display: inline-block; } .app_display_none_mobileandtablet_important { display: none !important; } .app_feed_horisontell_wrapper > div:first-of-type > a.SwimlaneLinkText { opacity: 0.7; } .app_feed_horisontell_wrapper:hover > div:first-of-type > a.SwimlaneLinkText { opacity: 1; } .app_width_100procent_mobileandtablet { width: 100%; } .app_scroll { width: 95%; } .app_scroll > span:first-of-type { left: 0.3rem; } .app_scroll > span:last-of-type { right: 0.3rem; } /*Clear Safari border radius*/ .app_feed_horisontell_withbackgroundheader > div, .app_feed_horisontell > div { border-radius: 2rem; } .app_flex_direction_column_mobileandtablet { flex-direction: column; } .app_feed_horisontell_withbackgroundheader > div .profilePictureWrapper:not(.progressNone) { border-top-left-radius: 2rem; border-top-right-radius: 2rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .app_overflow_mobile { overflow: auto; -ms-text-overflow: initial; text-overflow: initial; } .app_padding_leftandright_10_mobileandtablet { padding-left: 1rem; padding-right: 1rem; } .app_position_fixed_bottomcenter_mobileandtablet { position: fixed; bottom: 1.5rem; right: calc(50% - 9rem); } .app_width_max_1200_width_100procent .app_feed_horisontell_wrapper { padding: 0 1rem; } .app_menu_second { width: 100%; } /*Bottom menu only for mobile user*/ .app_wrapper > aside:last-of-type:not(:only-of-type) { width: auto; } .app_sidebar_right_iconbar { height: auto; z-index: 104; } .app_menu_bottom_mobile { background-color: white; border-top-left-radius: 3rem; border-top-right-radius: 3rem; padding: 0 1.5rem; align-items: flex-end; display: flex; z-index: 3; position: fixed; bottom: 0; left: 0; justify-content: space-around; width: 100%; box-shadow: 0px 0px 0.4px rgba(0, 0, 0, 0.006), 0px 0px 0.9px rgba(0, 0, 0, 0.009), 0px 0px 1.4px rgba(0, 0, 0, 0.011), 0px 0px 2.2px rgba(0, 0, 0, 0.013), 0px 0px 3.1px rgba(0, 0, 0, 0.015), 0px 0px 4.4px rgba(0, 0, 0, 0.017), 0px 0px 6.3px rgba(0, 0, 0, 0.019), 0px 0px 9.1px rgba(0, 0, 0, 0.021), 0px 0px 14.1px rgba(0, 0, 0, 0.024), 0px 0px 25px rgba(0, 0, 0, 0.03); } /*Order*/ } @media screen and (min-width: 0px) and (max-width: 70.25rem) and (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .app_menu_bottom_mobile { background-color: black; } } @media screen and (min-width: 0px) and (max-width: 70.25rem) { :root[data-theme=dark] .app_menu_bottom_mobile { background-color: black; } .app_menu_bottom_mobile > div { cursor: pointer; } .app_menu_bottom_mobile > div > div > span, .app_menu_bottom_mobile > div > div > div > span, .app_menu_bottom_mobile > div > div > a > span { background-color: --white; color: --white-color; margin: 1rem; } .app_menu_bottom_mobile > div > div > span:not(.app_color_brainville_green) { color: var(--font-color-primary); } .app_menu_bottom_mobile > div > div > span, .app_menu_bottom_mobile > div > div > div.profilePictureWrapperSmall > span.profilePictureFallback { font-size: 22px; width: 4rem !important; height: 4rem !important; display: flex; align-items: center; justify-content: center; border-radius: 1.2rem; background: transparent; } .app_menu_bottom_mobile > div > div > div.profilePictureWrapperSmall > span.profilePictureFallback > span { font-weight: 400; } .app_menu_bottom_mobile > div > div > span > a { position: absolute; width: 3rem; height: 3rem; } .app_menu_bottom_mobile > div > div:hover > span, .app_menu_bottom_mobile .headerMenu:hover span.fal, .app_menu_bottom_mobile > div > div > div.profilePictureWrapperSmall:hover > span.profilePictureFallback > span { color: hsl(var(--primary)); font-weight: 600; background-color: var(--transparent-2xs); } .app_menu_bottom_mobile { display: flex; z-index: 11; align-items: center; } .app_order_2_mobile:empty { display: none; } .app_dropdown_wrapper_header > .app_dropdown_style { bottom: 7rem; top: auto; left: 10%; right: 0; min-width: 80%; max-width: 80%; width: 80%; position: fixed; } .app_order_1_mobileandtablet_plain { order: 1; } .app_order_2_mobileandtablet_plain { order: 2; } .app_order_3_mobileandtablet_plain { order: 3; } .app_order_4_mobileandtablet_plain { order: 4; } .app_order_5_mobileandtablet_plain { order: 5; } .app_order_6_mobileandtablet_plain { order: 6; } div[style*="z-index: 100000;"] { width: 0 !important; } } @media screen and (min-width: 50rem) and (max-width: 70.25rem) { /* Tablets */ body { padding: 1.5rem; max-width: 100%; min-width: 100%; } .app_main { flex-grow: 1; width: 81%; } .app_main_wrapper, .app_menu_second, .app_main_header, .app_layout_wide .app_main_wrapper, .app_layout_wide .app_menu_second, .app_layout_wide .app_main_header { max-width: 100%; min-width: 100%; } .app_main.app_margin_right_mobile { margin-right: 0; } .app_margin_right_0_tablet { margin-right: 0; } .app_main_wrapper, .app_menu_second, .app_main, .app_wrapper { width: 100%; } .app_layout_wide .MainContent, .app_layout_wide .app_menu_second, .app_layout_wide.app_main { width: 100%; } .app_width_max_1200_width_100procent.app_padding_100 { padding: 3rem; } .app_margin_30_tablet { margin: 3rem; } .app_width_max_1200_width_100procent .app_padding_top_40 { padding-left: 3rem; padding-right: 3rem; } .app_startpages_background_image .app_width_50procent { width: 100%; } /*Grid*/ .app_wrapper { grid-template-columns: 4rem minmax(0, 1fr) 20rem; } /*Display*/ .app_display_inlineblock_tablet { display: inline-block; } .app_display_none_tablet { display: none !important; } .app_alignitems_center_tablet { align-items: center; } .app_order_2_mobile { margin-left: 1rem; } .app_order_2_mobile ul li:last-of-type { margin-right: 1.5rem; } /*Sales and buyer board*/ .app_board { flex-flow: wrap; } .app_board > div { width: 100% !important; margin-right: 0 !important; margin-bottom: 2.5rem !important; } .app_board > div:nth-of-type(odd) { padding-right: 0; } .app_board > div > div:first-of-type { border-bottom-style: solid; border-bottom-width: 0.1rem; border-bottom-color: rgba(0, 0, 0, 0.08); } /*Bottom menu only for mobile user*/ /*Grid dashboard*/ } @media screen and (min-width: 50rem) and (max-width: 70.25rem) and (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .app_board > div > div:first-of-type { border-bottom-color: rgba(255, 255, 255, 0.08); } } @media screen and (min-width: 50rem) and (max-width: 70.25rem) { :root[data-theme=dark] .app_board > div > div:first-of-type { border-bottom-color: rgba(255, 255, 255, 0.08); } .app_menu_bottom_mobile { position: fixed; bottom: 0; left: 0; } .app_width_35procent, .app_width_65procent { width: 50% !important; } .dynamicResumeItemAsCircle .dynamicResumeItemIcon > span { font-size: 3rem !important; } .app_dashboard_grid > div.app_dashboard_grid_width_10of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_4of22 { -ms-grid-column-span: 6; grid-column: span 6; } .app_dashboard_grid > div.app_dashboard_grid_width_3of22 { -ms-grid-column-span: 6; grid-column: span 6; } .app_dashboard_grid > div.app_dashboard_grid_width_2of22 { -ms-grid-column-span: 5; grid-column: span 5; } .app_dashboard_grid > div.app_dashboard_grid_width_6of22 { -ms-grid-column-span: 11; grid-column: span 11; } .app_dashboard_grid > div.app_dashboard_grid_width_7of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_8of22 { -ms-grid-column-span: 22; grid-column: span 22; } .app_dashboard_grid > div.app_dashboard_grid_width_9of22 { -ms-grid-column-span: 16; grid-column: span 16; } } @media screen and (min-width: 0px) and (max-width: 50rem) { /* Phones */ /*Font*/ .app_display_none_mobile, a.app_button.app_display_none_mobile { display: none !important; } .app_display_none_mobile_important { display: none !important; } .app_display_inlineblock_mobile, .app_display_none_desktop { display: inline-block; } .app_display_none_reallysmalldevices { display: inline-block !important; } .app_display_inlineblock_reallysmalldevices { display: none; } .app_display_none_desktop_important { display: inline-flex !important; } .app_show_rightcolumn_click_mobile { display: inline-flex !important; z-index: 3; } .MainContent { border-radius: 0; margin-top: 0; } .MainContent > div:last-of-type:not(:only-of-type) { margin-top: 1.5rem; } .app_wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "Main"; } .app_sidebar_right_iconbar .app_dropdown_wrapper_header > .fal:not(a), .app_menu_bottom_mobile > div > div > span { width: auto !important; } .app_main_wrapper, .app_main_header { border-radius: 0; margin-top: 0; } .app_border_radius_none_mobile { border-radius: 0; } .app_main_wrapper, .app_menu_second, .app_main_header, .app_width_100procent_mobile, .app_width_35procent, .app_width_65procent, .app_width_50procent, .app_layout_wide .app_main_wrapper, .app_layout_wide .app_menu_second, .app_layout_wide .app_main_header, .app_layout_wide .MainContent { max-width: 100%; min-width: 100%; } .app_width_100procent_mobile_important, .app_layout_wide .MainContent, .app_width_max_width_550, .app_width_340, .app_width_400, .app_width_min_400 { width: 100% !important; max-width: 100% !important; min-width: 100% !important; } .app_width_90procent_mobile { max-width: 90%; min-width: 90%; width: 90%; } .app_width_70procent_mobile { width: 70%; } .app_width_55procent_mobile { width: 55%; } .app_width_50procent_mobile { width: 50%; } .app_width_30procent_mobile { width: 30%; } .app_minwidth_55_mobile { min-width: 5.5rem; } .app_height_auto_mobile, .app_dashboard_item_wrapper_fullwidth_fullheight > div.app_height_auto_mobile { height: auto !important; min-height: 0 !important; } .app_height_min_none_mobile { min-height: 0; } .app_button_header, .app_menu_second_buttons a.app_button_header { padding: 0rem 1.2rem !important; font-size: 1.2rem !important; height: 3.4rem !important; font-weight: 600 !important; } .app_button_clear_withicon_mobile { background: none !important; border: none !important; color: black !important; font-size: 2.1rem !important; font-weight: 300 !important; padding: 0 !important; margin: 0 !important; } /*Gap*/ /*Grid dashboard*/ /*Grid*/ /*Grid dashboard*/ /*Grid*/ /*Filter*/ /*Achievements*/ /*Image upload*/ /*KnowledgeBox*/ /*Personal identity*/ /*Gap*/ } @media screen and (min-width: 0px) and (max-width: 50rem) and (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-theme=dark]) .app_button_clear_withicon_mobile { color: white !important; } } @media screen and (min-width: 0px) and (max-width: 50rem) { :root[data-theme=dark] .app_button_clear_withicon_mobile { color: white !important; } .app_fix_mobileiconsonoutside > div { width: 3rem; height: 3rem; line-height: 1; display: flex; align-items: center; } .app_button_fancy_mobile { box-shadow: 0 0px 1.8px rgba(0, 0, 0, 0.07), 0 0px 5px rgba(0, 0, 0, 0.1), 0 0px 12.1px rgba(0, 0, 0, 0.13), 0 0px 40px rgba(0, 0, 0, 0.2); height: 5.2rem !important; } .app_menu_second_buttons { margin-top: 0; } .app_button span.app_display_none_desktop_important { font-size: 1.4rem; } .app_order_2_mobile.app_position_relative > ul > li > a, .app_order_2_mobile.app_position_relative > ul > li { font-size: 1.8rem; } .app_clear_button_mobile { border: none !important; background: none !important; font-size: 1.1rem !important; font-weight: 400 !important; height: auto !important; } .app_clear_button_mobile > span { font-size: 1.2rem; text-align: right; } .app_text_align_left_mobile { text-align: left; } .app_text_align_center_mobile { text-align: center; } .l_font_size_number_large_mobile { font-size: 2.5rem; } .app_font_size_second_mobile { font-size: 1.2rem; } .app_flex_direction_column_mobile { flex-direction: column; } .app_flex_direction_row_mobile { flex-direction: row; } .app_flex_direction_column_mobile > .app_margin_right_15.app_width_50procent, .app_flex_direction_column_mobile > .app_margin_left_15.app_width_50procent { margin-left: 0; margin-right: 0; } .app_flex_direction_column_mobile > .app_margin_right_15.app_width_50procent { margin-bottom: 2.5rem; } .app_flex_wrap_mobile, .app_flex_wrap_mobile_withmarginbottomonbuttons { flex-wrap: wrap; } .app_flex_grow_mobile { flex-grow: 1; } .app_flex_wrap_mobile_withmarginbottomonbuttons .app_button { margin-bottom: 0.5rem; margin-top: 0.5rem; } .app_alignitems_flexend_mobile { align-items: flex-end; } .app_alignitems_start_mobile { align-items: flex-start; } .app_alignitems_stretch_mobile { align-items: stretch; } .app_alignitems_center_mobile { align-items: center; } .app_justifycontent_spacebetween_mobile { justify-content: space-between; } .app_justifycontent_spacebetween_mobile > .app_display_flex { margin-left: auto; } .app_justifycontent_center_mobile, .app_justifycontent_center_nextdiv_mobile > div, .app_justifycontent_center_nextdiv_mobile > span { justify-content: center; } .app_justifycontent_flexend_mobile { justify-content: flex-end; } .app_gap_none_mobile { gap: 0rem; } .app_margin_15_mobile { margin: 1.5rem; } .app_margin_bottom_5_mobile { margin-bottom: 0.5rem; } .app_margin_top_5_mobile { margin-top: 0.5rem; } .app_margin_top_10_mobile { margin-top: 1rem; } .app_margin_top_15_mobile { margin-top: 1.5rem; } .app_margin_top_25_mobile { margin-top: 2.5rem; } .app_margin_right_0_mobile, .app_margin_right_0_div_mobile > div { margin-right: 0; } .app_margin_right_5_mobile { margin-right: 0.5rem; } .app_margin_left_auto_mobile { margin-left: auto; } .app_margin_top_0_mobile { margin-top: 0; } .app_margin_top_10_mobile { margin-top: 1rem; } .app_margin_bottom_0_mobile, .app_feed_wrapper > div:first-child > div:first-child > div:nth-of-type(2) > div.app_margin_bottom_0_mobile { margin-bottom: 0; } .app_margin_bottom_25_div_mobile > div { margin-bottom: 2.5rem; } .app_margin_bottom_15_mobile { margin-bottom: 1.5rem; } .app_margin_bottom_25_mobile { margin-bottom: 2.5rem; } .app_margin_bottom_35_mobile { margin-bottom: 3.5rem; } .app_padding_left_0_mobile { padding-left: 0; } .app_padding_right_0_mobile { padding-right: 0; } .app_margin_left_10_mobile { margin-left: 1rem; } .app_margin_left_30_mobile { margin-left: 3rem; } .app_margin_left_40_mobile { margin-left: 4rem; } .app_margin_right_10_mobile { margin-right: 1rem; } .app_padding_0_mobile { padding: 0rem; } .app_padding_5_mobile { padding: 0.5rem; } .app_padding_10_mobile { padding: 1rem; } .app_padding_15_mobile { padding: 1.5rem !important; } .app_padding_top_10_mobile { padding-top: 1rem; } .app_padding_leftandright_10_mobile { padding-left: 1rem !important; padding-right: 1rem !important; } .app_padding_topandbottom_25_mobile { padding-top: 2.5rem; padding-bottom: 2.5rem; } .app_height_100procent_mobile_important, a.app_button.app_height_100procent_mobile_important { height: 100% !important; } .app_button_fittoheader { height: 3.2rem !important; } .app_width_min_1000_mobile { min-width: 100rem; } .app_border_grey_mobile { border: 0.1rem solid rgba(0, 0, 0, 0.08); } .app_height_85procent_mobile { height: 85%; } .app_dashboard_grid { grid-auto-rows: minmax(min-content, max-content); grid-gap: 1rem; } .app_dashboard_grid_item_fullwidth, .app_dashboard_grid_item_fullwidth_mobile { -ms-grid-column-span: 2 !important; grid-column: span 2 !important; } .app_dashboard_grid_columns_2 { grid-template-columns: 1fr; grid-gap: 1rem 0; grid-template-rows: 1fr; grid-template-areas: none; } .app_dashboard_item .app_button { white-space: normal; text-align: center; height: auto; width: 100%; } .app_move_divs_left > div:nth-of-type(n+4) { display: none; } .app_dashboard_item_header_withslide_mobile .fas { display: none; } .app_dashboard_item_header_withslide_mobile .app_checkboxes_withonlytext { font-size: 70%; } .app_grid > div:not(:first-of-type).app_grid_25procent, .app_grid > div:not(:first-of-type).app_grid_50procent { margin-left: 0; } .app_grid > div:not(:first-of-type):not(.app_grid_input_nomarginleft):not(.app_margin_left_0_mobile) > div { margin-left: 0.5rem !important; } .app_dashboard_item_header, .app_dashboard_item_content_onlynumber { font-size: 1.6rem !important; } .app_dashboard_item_header { flex-direction: row; align-items: center; padding-bottom: 1.5rem; justify-content: flex-start; } .app_dashboard_item_header > div:first-of-type { order: 2; text-align: left; line-height: 1.2; margin-left: 0.5rem; } .app_dashboard_item_header > div:last-of-type span { font-size: 1.6rem; } .app_dashboard_item_header > div:first-of-type, .app_dashboard_item_header > span:first-of-type { font-weight: 600; } .app_box_small.app_margin_bottom_10 { margin-bottom: 2rem; } .app_grid > div.app_margin_left_0_mobile > div, .app_margin_left_0_mobile { margin-left: 0 !important; } .app_display_flex_mobile { display: flex !important; } .app_position_absolute_mobile { position: absolute; } .app_position_initial_mobile { position: initial; } .app_position_absolute_top_10_mobile { top: 1rem; } .app_position_absolute_right_10_mobile { right: 1rem; } .app_order_1_mobile_plain { order: 1; } .app_order_2_mobile_plain { order: 2; } .app_order_3_mobile_plain { order: 3; } .app_order_1_mobile { order: 1; } .app_order_2_mobile { order: 2; } .app_order_1_mobile_border_right { order: 1 !important; padding-right: 1.5rem !important; margin-right: 1.5rem !important; } .app_logo { display: none; } .app_logo_mobile { display: flex; align-items: center; } .app_logo_mobile > span.fal { font-size: 2.4rem; margin-right: 1rem; vertical-align: super; display: inline-block; width: 20px; cursor: pointer; } .app_logo_mobile > span.fal.fa-times { padding-left: 4px; } .app_logo_mobile a { line-height: 1; } .app_font_size_decreaseonmobile { font-size: 3rem; line-height: 1.2; } .app_menu_second ul > li { font-size: 1.5rem; } .app_menu_second ul > li .app_box_message { display: none; } div.app_sidebar_right { padding-left: 1rem; padding-right: 1rem; } .chatFooter .app_button { height: 100%; } .app_feed_wrapper a.app_link_visited { word-break: break-word; } .app_feed_wrapper { padding: 1.2rem; } .app_header .app_dropdown_style { right: -10rem; } .app_header .app_dropdown_style.app_dropdown_style_expandleft { right: 0; } .app_header .app_dropdown_style.app_dropdown_style_expandright { left: 0; } .app_whitespace_nowrap_mobile { white-space: nowrap; } .app_width_max_1200_width_100procent .app_feed_horisontell_wrapper { padding: 0 1rem; } .app_font_headlinestyle_withtwospans { font-size: 3rem; } .app_font_headlinestyle_withtwospans > span:first-of-type, .app_font_headlinestyle_withtwospans > label { font-size: 2rem; margin-bottom: 0.5rem; } .app_font_headlinestyle_withtwospans > span:last-of-type, .app_font_headlinestyle_withtwospans > h1 { word-break: break-word; -webkit-hyphens: auto; hyphens: auto; font-size: 3rem; } .app_font_color_gradient_yellowtored { font-size: 2.8rem !important; display: block; } .app_grid_50procent_mobile { width: 50% !important; } .app_grid_100procent_mobile { width: 100% !important; } .app_grid > div.app_grid_100procent_mobile > div { margin-left: 0 !important; } .app_grid > div.app_width_100procent_mobile > div { margin-left: 0 !important; } .app_grid > div.app_width_100procent_mobile { margin-bottom: 1rem; } .app_position_absolute_top5right5_mobile { position: absolute; top: 1.5rem; right: 1.5rem; } .app_position_absolute_top20right20_mobile { position: absolute; top: 2rem; right: 2rem; } .app_position_fixed_bottomcenter_mobile { position: fixed; bottom: 1.5rem; right: calc(50% - 9rem); } .app_position_absolute_bottomlinefortabs { bottom: 1rem; } .app_item_withicon > div:first-of-type > span, .app_item_withicon > span:first-of-type > span:not(.fontSize11) { font-size: 2.5rem; } .app_item_withicon > div:first-of-type, .app_item_withicon > span:first-of-type { margin-right: 0; } .app_item_withicon { padding: 1.3rem; border-radius: 1rem; min-width: 4.8rem; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .app_item_withicon > span:last-of-type { margin-right: 0; } .app_flex_evenout_mobile > div { flex: 1 1 0px; } .app_checkboxes > div, .app_checkboxes_large > button { width: 45%; } .app_checkboxes_withonlytext_small > div > div { padding-top: 1rem !important; padding-bottom: 1rem !important; } .app_filter_wrapper { align-items: flex-start; } .app_id_requisitionsearchshortcuts { padding: 0; padding-top: 1.2rem; display: flex; align-items: flex-start; overflow-x: scroll; margin-bottom: 0; } .app_id_requisitionsearchshortcuts > div:last-of-type { display: flex; align-items: flex-start; grid-gap: 2rem; } .app_id_requisitionsearchshortcuts > div:last-of-type > div:not(.app_background_white_withstyle_onlysmallshadow) { display: flex; margin-bottom: 0; align-items: center; flex-direction: row; grid-gap: 1rem; } .app_id_requisitionsearchshortcuts > div:last-of-type > div:not(.app_background_white_withstyle_onlysmallshadow) > a > div { display: flex; align-items: center; } .app_id_requisitionsearchshortcuts > div:last-of-type > div:not(.app_background_white_withstyle_onlysmallshadow) > a { align-items: center; } .app_id_requisitionsearchshortcuts .searchprofileLink > div, .app_show_all_searchprofiles_button { white-space: nowrap; } .app_id_requisitionsearchshortcuts .searchprofileLink > div:nth-child(2) { margin-right: 0.5rem; } .app_height_5rem_mobile { height: 5rem; } .app_height_auto_mobile { height: auto; } .app_searchfilter > a:hover:not(.app_font_color_second):not(.app_box_message), .app_searchfilter > .app_searchfilter_activelink { background: none; } .app_filter_wrapper_edit .app_margin_betweendivs_medium { flex-direction: column; } .app_achievements .fa-4x { font-size: 2em; } .app_achievements div.achievementSize { top: 2px; left: 50px; } .app_achievements > div:nth-of-type(2), .app_achievements > div:nth-of-type(3) { font-size: 1.3rem; } .app_achievements > div:nth-of-type(3) { color: var(--font-color-secondary); } .cr-boundary { width: 100% !important; } .knowledgeBoxWrapper { left: 10% !important; right: 0 !important; } .knowledgeBox { width: 90% !important; min-width: 90% !important; max-width: 90% !important; } .knowledgeBox:after, .knowledgeBox:before { content: none !important; } .app_knowledgebox_upgrade .knowledgeBox { padding: 2rem; } #AvailabilityGadgetHeadlineCell .gadgetHeadline { text-transform: uppercase; font-size: 1rem; } .explainerVideoBackground { width: 100%; height: auto; } .explainerVideoBackground { width: 100%; height: auto; } .app_fix_absolutepositiononmobile { position: relative; top: 0; right: 0; } .app_konsultrapportenpopup { right: 1rem !important; left: 1rem; } .app_konsultrapportenpopup > div { width: 100%; } .app_profile_smallview_fixheaderonmobile { height: auto !important; margin-top: 1.5rem !important; } .app_overflow_overlay_mobile, .app_overflow_overlay_mobile_pre pre, .app_overflow_overlay_mobile_p p, .app_overflow_overlay_mobile_div > div { overflow: overlay; } .app_gap_col_small_mobile { -moz-column-gap: 0.3rem; column-gap: 0.3rem; } .app_gap_col_medium_mobile, .app_gap_buttons_mobile, .app_header_buttons_mobile { -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .app_gap_col_large_mobile { -moz-column-gap: 1rem; column-gap: 1rem; } .app_gap_col_verylarge_mobile { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .app_gap_col_superlarge_mobile { -moz-column-gap: 2rem; column-gap: 2rem; } .app_gap_col_boxes_mobile { -moz-column-gap: 2.5rem; column-gap: 2.5rem; } .app_gap_row_none_mobile { row-gap: 0rem; } .app_gap_row_small_mobile { row-gap: 0.3rem; } .app_gap_row_medium_mobile, .app_gap_buttons_mobile, .app_header_buttons_mobile { row-gap: 0.5rem; } .app_gap_row_large_mobile { row-gap: 1rem; } .app_gap_row_verylarge_mobile { row-gap: 1.5rem; } .app_gap_row_superlarge_mobile { row-gap: 2rem; } .app_gap_row_boxes_mobile { row-gap: 2.5rem; } } /*Date time picker*/ /*Gantt chart*/ @media (max-width: 70.1875rem) { .ganttHeader .app_width_250 { width: 14rem; } } /*Resource - Dashboard - icons*/ .fix_resource_dashboard_myteam_icons_deprecated .fas:before { display: flex; align-items: center; justify-content: center; margin-top: 6rem; } /*Add star after professional profile standard profile*/ [id^=select2-professionalProfileId-] > li:first-of-type::after, [id*=select2-professionalProfileId-] > li:first-of-type::after, [id^=select2-copyId-] > li:nth-of-type(2)::after, [id*=select2-copyId-] > li:nth-of-type(2)::after, [id=select2-ResumeId-results] > li:first-of-type::after, .js_professionalprofile_addstartodefaultprofile span[id*=select2-professionalProfileId-]::after { content: "\f005"; font-family: "Font Awesome 7 Pro"; font-weight: 900; margin-left: 0.5rem; } /*Add star after professional profile standard profile*/ .js_professionalprofile_addlooktoprofiles [id^=select2-professionalProfileId-] > li:not(:first-of-type)::after, .js_professionalprofile_addlooktoprofiles [id*=select2-professionalProfileId-] > li:not(:first-of-type)::after, .js_professionalprofile_addlooktoprofiles [id^=select2-copyId-] > li:nth-of-type(n+3)::after, .js_professionalprofile_addlooktoprofiles [id*=select2-copyId-] > li:nth-of-type(n+3)::after, .js_professionalprofile_addlooktoprofiles [id=select2-ResumeId-results] > li:not(:first-of-type)::after { content: "\f023"; font-family: "Font Awesome 7 Pro"; font-weight: 900; margin-left: 0.5rem; } .js_professionalprofile_addlooktoprofiles [id^=select2-copyId-] > li { opacity: 0.3; } /*Remove padding from professional profile if in application tab*/ .app_tabs_second_content .l_padding_fluid_10_15 { padding: 0.2rem; padding-top: 0; } /*Add dots between items*/ .sp_add_dot_between_items > div:not(.l_display_none):not(.setmanager):not(:only-of-type):not(:empty):not(:nth-last-of-type(1))::after, .sp_add_dot_between_items_large_gap > div:not(.l_display_none):not(.setmanager):not(:only-of-type):not(:empty):not(:nth-last-of-type(1))::after { content: "\e404"; font-family: "Font Awesome 7 Pro"; font-weight: 900; font-size: 0.7rem; vertical-align: middle; color: var(--transparent-lg); display: inline-block; /* Visa som inline-block */ transform: rotate(90deg); /* Rotera med 45 grader */ } .sp_add_dot_between_items > div:not(.l_display_none):not(.setmanager):not(:only-of-type):not(:empty):not(:nth-last-of-type(1))::after { margin-left: 0.3rem; margin-right: 0.6rem; } .sp_add_dot_between_items_large_gap > div:not(.l_display_none):not(.setmanager):not(:only-of-type):not(:empty):not(:nth-last-of-type(1))::after { margin-left: 0.8rem; margin-right: 0.8rem; } /*Font awesome*/ .fa-stack.fa_stack_small, .fa-stack.fa-sm { font-size: 1.2rem; display: flex; align-items: center; } /*Font awseome stacked add icon-button*/ .sp_stacked_icon_with_add { position: relative; } .sp_stacked_icon_with_add > svg { position: absolute; bottom: -0.5rem; right: -0.5rem; overflow: visible; width: 1.2rem; } .sp_stacked_icon_with_add > svg > path:first-of-type { stroke-width: 16rem; } .sp_stacked_icon_with_add > svg > path:last-of-type { stroke-width: 0; } /*Select 2 bugg pa input-falt*/ .sp_select2_fullwidth_on_next_input .select2-search__field { width: 100% !important; } /*Stream div med en hoger kolumn*/ .sp_streamdiv_with_no_border_radius > div:first-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; width: calc(100% - 6rem); max-width: calc(100% - 6rem); min-width: calc(100% - 6rem); box-shadow: 2px 0px 3px var(--transparent-xs); } .sp_streamdiv_with_no_border_radius > div:last-of-type:not(:only-of-type) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: clamp(1.5rem, 1.25vw + 0.88rem, 2rem); border-bottom-right-radius: clamp(1.5rem, 1.25vw + 0.88rem, 2rem); width: 6rem; min-width: 6rem; max-width: 6rem; height: 100%; position: absolute; right: 0; top: 0; background: var(--white-bg); padding: 1rem; box-shadow: -2px 0px 3px var(--transparent-xs); } /*Log model message*/ .sp_logmodel_message blockquote { position: relative; background: var(--dark); border: 0.1rem solid var(--transparent-md); padding: 1rem; border-radius: 1.2rem; margin-top: 1.5rem; font-size: 1.3rem; } .sp_logmodel_message blockquote:after, .sp_logmodel_message blockquote:before { bottom: 100%; left: 3rem; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .sp_logmodel_message blockquote:after { border-color: transparent; border-bottom-color: var(--dark); border-width: 1rem; margin-left: -1rem; } .sp_logmodel_message blockquote:before { border-color: transparent; border-bottom-color: var(--transparent-md); border-width: 1.1rem; margin-left: -1.1rem; } .sp_logmodel_hide_system_message { visibility: collapse; font-size: 0px; } .sp_logmodel_hide_system_message > blockquote { visibility: visible; font-size: 1.5rem; } .sp_locations_remove_wrap > .l_only_show_one_location_on_mobile { flex-wrap: nowrap; } /*Ikon for att visa matchning pa en ansokan*/ .sp_application_match_icon .fa-duotone { font-size: 1.8rem; margin-right: 0.3rem; } /*Put icon on portrait in left bottom corner*/ .sp_absolute_position_on_portrait_left_bottom { position: absolute; background: var(--white-bg); height: 3.5rem; bottom: -0.3rem; left: -1rem; } /*Always shrink left column in a 2 column layout*/ .sp_columns_two_left_never_shrink > *:first-child { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp_columns_two_left_never_shrink > *:last-child { flex: none; } /*Admin total rank grid*/ .sp_admin_gettotalrank { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 0.5rem; width: 100%; } .sp_admin_gettotalrank > span:nth-of-type(even) { font-weight: 700; } /*absolut position of the datetimepicker in admin customer succsess board*/ .sp_admin_cs_datetimepicker_position { position: absolute; left: -2rem; top: 2rem; z-index: 2; } /*Fixa storleken och bredden pa ikonerna i CS-tavlan*/ @keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); transform: scale(1.5); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transform: scale(1); } } /*Indikator pa buyer board om du valt ansokningar och den ar i pending*/ .sp_buyerboard_pending_indicator { top: 1rem; right: 1rem; } /*Admin board*/ .sp_admin_board_pending_indicator { top: 1rem; right: 1rem; animation: ripple 1.2s 5; } .sp_admin_icon_indicators_size { text-align: center; min-width: 1.6rem; } .sp_admin_board_pending_indicator_5 { width: 1.6rem; height: 1.6rem; background: none; } .sp_admin_board_pending_indicator_5::before { content: "\f619"; font-family: "Font Awesome 7 Pro"; font-weight: 900; font-size: 1.6rem; color: var(--third-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sp_admin_board_pending_indicator_4 { width: 1.5rem; height: 1.5rem; } .sp_admin_board_pending_indicator_3 { width: 1.4rem; height: 1.4rem; } .sp_admin_board_pending_indicator_2 { width: 1.3rem; height: 1.3rem; } .sp_admin_board_pending_indicator_1 { width: 1.2rem; height: 1.2rem; } /*Toggle button next to toggle switch*/ .sp_button_toggle_container { background-color: var(--transparent-2xs); padding: 0.3rem; border-radius: 1.2rem; border: none; margin: 0; height: 3.6rem; width: 3.6rem; } .sp_button_toggle_on { background-color: var(--transparent-2xs); padding-top: 0.375rem; border-radius: 0.9rem; font-size: clamp(1.3rem, 0.5vw + 1.05rem, 1.5rem); height: 3rem; background: var(--white-bg); color: var(--white-color); } /*Dashed border on customer success board on refill card*/ .js_cards_refill div[data-card~=white] { border: 0.2rem dashed var(--transparent-md); opacity: 0.6; transition: opacity 0.3s; } .js_cards_refill div[data-card~=white]:hover { opacity: 1; } .js_cards_refill_accountmanager { border: 0.2rem solid var(--transparent-md); } /*Sets inline flex on next span*/ .sp_inline_flex_on_span > span { display: inline-flex; } /*Rewark todos*/ .sp_reward_text { border-top: 0.1rem dashed var(--transparent-md); padding-top: 1rem; margin-top: 1rem; } .sp_reward_icon { z-index: 2; position: absolute; right: -0.5rem; top: -0.5rem; color: var(--third-color); } /*Create offer profile validation message design*/ .js_createofferprofile_tip_invalid > .field-validation-error { background: none; padding: 0; margin: 0; } .js_createofferprofile_tip { padding: 1rem 1.4rem; } [data-valmsg-for="Extent.Value"], [data-valmsg-for="Rate.PriceAmount"], [data-valmsg-for="Extent.Type"], [data-valmsg-for="Rate.Type"], [data-valmsg-for=Rate] { display: none !important; } .js_createofferprofile_tip_invalid [data-valmsg-for="Extent.Value"], .js_createofferprofile_tip_invalid [data-valmsg-for="Rate.PriceAmount"], .js_createofferprofile_tip_invalid [data-valmsg-for="Extent.Type"], .js_createofferprofile_tip_invalid [data-valmsg-for="Rate.Type"], .js_createofferprofile_tip_invalid [data-valmsg-for=Rate] { display: inline !important; } .l_width_full_richtext .tox-tinymce { width: 100%; } /*Hide mail-tag in your search profile when monitor is off*/ .sp_searchprofile_hide_mailtag .sp_searchprofile_hide_mailtag_target { transition: 0.4s; opacity: 0.2; } /*Professional profile experience hr*/ .sp_pp_experience_hr { width: 100%; margin-top: 2rem; padding-top: 1rem; } /*Fas on hover*/ .sp_icon_fas_on_hover .sp_icon_fas_on_hover_icon { position: absolute; top: 0; left: 0; transition: opacity 0.5s ease; will-change: opacity; display: flex; align-items: center; justify-content: center; } .sp_icon_fas_on_hover .sp_icon_fas_on_hover_icon.fal { opacity: 1; } .sp_icon_fas_on_hover .sp_icon_fas_on_hover_icon.fad { opacity: 0; } .sp_icon_fas_on_hover .sp_icon_fas_on_hover_container { position: relative; display: inline-block; width: 5rem; height: 5rem; } .sp_icon_fas_on_hover:hover .sp_icon_fas_on_hover_icon { position: absolute; top: 0; left: 0; transition: opacity 0.5s ease; will-change: opacity; } .sp_icon_fas_on_hover:hover .sp_icon_fas_on_hover_icon.fal { opacity: 0; } .sp_icon_fas_on_hover:hover .sp_icon_fas_on_hover_icon.fad { opacity: 1; } /*Icon change on hover (need two span next to each other*/ .sp_icon_change_on_hover_wrapper_icons { width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; position: relative; } .sp_icon_change_on_hover_wrapper_icons__default, .sp_icon_change_on_hover_wrapper_icons__hover { position: absolute; transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; } .sp_icon_change_on_hover_wrapper_icons__hover { transform: rotate(-180deg) scale(0.5); opacity: 0; } .sp_icon_change_on_hover_wrapper:hover .sp_icon_change_on_hover_wrapper_icons__hover { transform: rotate(0deg) scale(1); opacity: 1; } .sp_icon_change_on_hover_wrapper:hover .sp_icon_change_on_hover_wrapper_icons__default { transform: rotate(180deg) scale(0.5); opacity: 0; } svg .grey_bg_fill, svg .grey_bg_fill path { fill: var(--transparent-md) !important; } svg .grey_bg_stroke line { stroke: var(--transparent-md) !important; } svg .secondary_bg_fill rect, svg .secondary_bg_fill path { fill: var(--secondary-bg) !important; } svg .secondary_color_fill, svg .secondary_color_fill circle, svg .secondary_color_fill path { fill: var(--secondary-color) !important; } svg .secondary_color_same_fill:not(g), svg .secondary_color_same_fill circle, svg .secondary_color_same_fill path { fill: var(--secondary_color) !important; } svg .positive_bg_fill:not(g), svg .positive_bg_fill rect, svg .positive_bg_fill path { fill: var(--positive-bg) !important; } svg .positive_color_fill:not(g), svg .positive_color_fill circle, svg .positive_color_fill path { fill: var(--positive-color) !important; } svg .positive_color_same_fill:not(g), svg .positive_color_same_fill circle, svg .positive_color_same_fill path { fill: var(--positive_color) !important; } svg .negative_bg_fill rect { fill: var(--negative-bg) !important; } svg .negative_color_fill circle, svg .negative_color_fill path { fill: var(--negative-color) !important; } svg .third_bg_fill rect { fill: var(--third-bg) !important; } svg .third_color_fill circle, svg .third_color_fill path { fill: var(--third-color) !important; } /*Funnel graph*/ .svg-funnel-js { font-family: "Poppins", sans-serif; display: inline-block; position: relative; } .svg-funnel-js svg { display: block; width: 100%; } .svg-funnel-js__container { height: 100%; } .svg-funnel-js__labels { box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; display: flex; width: auto; height: 100%; } .svg-funnel-js__labels .svg-funnel-js__label { flex: 1 1 0; position: relative; } .svg-funnel-js__labels .svg-funnel-js__label .label__value { font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; line-height: 1 !important; margin-right: 0.3rem; } .svg-funnel-js__labels .svg-funnel-js__label .label__title { font-size: 1.1rem; font-weight: 500; line-height: 1; margin-top: 0.1rem; } .svg-funnel-js__labels .svg-funnel-js__label .label__percentage { font-size: 16px; font-weight: bold; color: #9896dc; } .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left: 0; padding: 8px 24px; box-sizing: border-box; background-color: rgba(8, 7, 48, 0.8); margin-top: 24px; opacity: 0; transition: opacity 0.1s ease; cursor: default; } .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul { margin: 0; padding: 0; list-style-type: none; } .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li { font-size: 13px; line-height: 16px; color: #fff; margin: 18px 0; } .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li .percentage__list-label { font-weight: bold; color: #05df9d; } .svg-funnel-js__labels .svg-funnel-js__label:hover .label__segment-percentages { opacity: 1; } .svg-funnel-js:not(.svg-funnel-js--vertical) { padding-top: 64px; padding-bottom: 16px; width: 100%; } .svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label { padding-left: 24px; } .svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label:not(:first-child) { border-left: 1px solid rgba(0, 0, 0, 0.1); } .svg-funnel-js.svg-funnel-js--vertical { display: flex; justify-content: space-between; width: 100%; flex-direction: row-reverse; align-items: center; } .svg-funnel-js.svg-funnel-js--vertical:not(:first-child) { border-top: none; } .svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__labels { flex-direction: column; gap: 1rem; } .svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages { margin-top: 0; margin-left: 106px; width: calc(100% - 106px); } .svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages .segment-percentage__list { display: flex; justify-content: space-around; } .svg-funnel-js__subLabels { display: flex; justify-content: center; margin-top: 24px; position: absolute; width: 100%; left: 0; } .svg-funnel-js__subLabels .svg-funnel-js__subLabel { display: flex; font-size: 12px; color: #fff; line-height: 16px; } .svg-funnel-js__subLabels .svg-funnel-js__subLabel:not(:first-child) { margin-left: 16px; } .svg-funnel-js__subLabels .svg-funnel-js__subLabel .svg-funnel-js__subLabel--color { width: 12px; height: 12px; border-radius: 50%; margin: 2px 8px 2px 0; } .fn_ellips { max-width: 100%; text-overflow: ellipsis; overflow: hidden; }