@charset "UTF-8";
/**
 * Author: Yau Pang
 * 
 * SCHIBSTED ADMARKET
 *
 * Schibsted Admarket (SAm) follows the
 * BEM naming convention as well as the 
 * structure set by ITCSS.
 * 
 * One exception that SAm uses which 
 * breaks away from one of BEM's 
 * fundamentals is that we use nested 
 * classes to ensure a strict and correct
 * DOM tree on the frontend side.
 *
 * Additionally, SAm adds another layer
 * to ITCSS by including "plugins" as
 * the last layer in the inverted pyramid.
 *
 * All the files are separated into folder,
 * each labeled with a number as prefix
 * that represents its tier. It also
 * makes it easier to scan in the editor's
 * folder tree structure.
 *
 * NOTE: Higher tier value equals higher 
 * significance.
 *
 * Links and resources:
 * http://getbem.com/naming/
 * https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
 * 
 * 
 */
/**
 * This project uses components from Material by Google, 
 * the Material components will be referred to as 
 * "mat" (not case sensitive) throughout the comments and
 * documentation.
 * 
 * Some parts of the design system is inspired by Codyhouse.co.
 * 
 * Links and resources:
 * https://material.angular.io/
 * https://codyhouse.co/
 */
/* -------------------------------------
 * 1. SETTINGS
 *
 * Global settings & variables.
 * Preprocessor essentials.
 ------------------------------------ */
/* -------------------------------------
 * COLOR FUNCTION
 *
 * Retrieve color by using the function
 * color('key-color','color-tint')
 *
 * Example:
 * color('accent')
 * color('accent','light')
 * color('accent', 'dark', $opacity: 'disabled');
 *
 * NOTE: ALWAYS use single quote and no space
 * in-between when using the color function.
 * This will allow for easier search-n-replace
 * down the line.
 *
 * Source:
 * https://scotch.io/tutorials/aesthetic-sass-2-colors
 ------------------------------------ */
/* -------------------------------------
 * NOTES:
 *
 * After using the color function for
 * some time, I found some drawbacks of
 * using it, mainly:
 *
 * - Debugging gets really hard if you
 * don't save often and catch the
 * errors, which happens when the syntax
 * is incorrect or a color is missing.
 * The color can become "missing" by
 * removing its definition or by typos.
 *
 * - Autocomplete is not supported
 *
 * - Using native CSS variables is more
 * straightforward, no learning curve
 * for new users. Requires less
 * maintaining. Native CSS variables
 * allows for more flexibility too in
 * the way that they're variables and
 * is not turned into a static value.
 *
 *
 * With the points mentioned above, I
 * don't see any real advantage of using
 * the "color" function except to keep
 * strict rules and limit the developer
 * to do wrong.
 *
 ------------------------------------ */
/* Variables */
/* Function "color()" */
/**
 *
 * ALPHAIZE
 *
 * Get equivalent color with opacity
 * Source:
 * https://stackoverflow.com/questions/12228548/finding-equivalent-color-with-opacity
 */
/* -------------------------------------
 * SPLIT STRING
 *
 * Split string by specifying which
 * character to slit on.
 *
 * Usage:
 * $values: "10px 20px 30px, 20px 30px 40px";
 * $list: ();
 *
 * $split-values: str-split($values, ", ");
 * @each $value in $split-values {
 * $list: append($list, str-split($value, " "));
 *
 * Source:
 * https://stackoverflow.com/questions/32376461/how-to-split-a-string-into-two-lists-of-numbers-in-sass
 *
}
 ------------------------------------ */
/* -------------------------------------
 * STRING TO NUMBER
 *
 * Cast string to number.
 *
 * Usage:
 * $string: '123';
 * width: to-number('string') + px;
 *
 * Output:
 * width: 123px;
 *
 * Source:
 * https://hugogiraudel.com/2014/01/15/sass-string-to-number/
 *
 ------------------------------------ */
/* -------------------------------------
 * COLORS
 *
 * These colors are retrieved using the
 * color function.
 * 
 * NOTE: Newly defined colors need to be 
 * a list where at least the key 'base' 
 * is included, otherwise it will return 
 * null.
 * 
 * Example:
 * color('accent');
 * color('accent','light');
 * color('accent',$opacity:'disabled');
 * color('accent','dark',$opacity:'disabled');
 * 
 * Example output:
 * #42a5f5
 * #1e88e5
 * rgba(69, 143, 255, 0.4)
 * rgba(30, 136, 229, 0.4)
 * 
 * NOTE: ALWAYS use single quotes and no space
 * in-between when using the color function.
 * This will allow for easier search-n-replace
 * down the line.
 * 
 * Source:
 * https://scotch.io/tutorials/aesthetic-sass-2-colors
 ------------------------------------ */
/**
 * Opacity legend:
 * 
 *  'disabled': 0.4 //Disabled elem
 *  'focus': 0.10 //Accent light highlight
 *  'border': 0.5 //grey border,
 **/
/** 
 * Calculate color hues using a base color.
 * Prefix "cl" = Color
 */
/* Store colors to make retrievable */
/* Allow availablity for inline styling */
:root {
  --color-accent: #2b7cff;
  --text-color-high-contrast: #fff;
  --text-color-default: #333;
  --text-color-description: #999;
}

/**
 * VARIABLES
 *
 * Index for all major variables used
 * throughout the framework.
 *
 * NOTE:
 * Variables are defined in body instead
 * of root because Chrome had a performance
 * issue with defining variables in ":root".
 */
body {
  --icon-sm: 12px;
  --icon-base: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 29px;
  --icon-xxl: 35px;
  --icon-xxxl: 42px;
  --icon-xxxxl: 50px;
  --icon-scale-base: 16px;
  --icon-scale-ratio: 1.45;
  --icon-scale-xxs: calc(var(--icon-scale-base) / (var(--icon-scale-ratio) * var(--icon-scale-ratio) * var(--icon-scale-ratio)));
  --icon-scale-xs: calc(var(--icon-scale-base) / (var(--icon-scale-ratio) * var(--icon-scale-ratio)));
  --icon-scale-sm: calc(var(--icon-scale-base) / var(--icon-scale-ratio));
  --icon-scale-md: calc(var(--icon-scale-base) * var(--icon-scale-ratio));
  --icon-scale-lg: calc(var(--icon-scale-base) * var(--icon-scale-ratio) * var(--text-scale-ratio));
  --icon-scale-xl: calc(var(--icon-scale-base) * var(--icon-scale-ratio) * var(--icon-scale-ratio) * var(--icon-scale-ratio));
  --icon-scale-xxl: calc(var(--icon-scale-base) * var(--icon-scale-ratio) * var(--icon-scale-ratio) * var(--icon-scale-ratio) * var(--icon-scale-ratio));
  --icon-scale-xxxl: calc(var(--icon-scale-base) * var(--icon-scale-ratio) * var(--icon-scale-ratio) * var(--icon-scale-ratio) * var(--icon-scale-ratio) * var(--icon-scale-ratio));
}

/* -------------------------------------
 * MOBILE & DESKTOP AD SIZES
 *
 * List of the various ad sizes used in
 * AdMarket. New classes will be
 * generated when a new size is added.
 *
 * NOTE: For non-standard mobile sizes,
 * like mobile takeover, it uses
 * additional properties.
 *
 * Desktop ad preview also requires
 * one to manually position them in the
 * desktop mockup.
 ------------------------------------ */
/* -------------------------------------
 * SPACING BASE VALUES
 *
 * Base values for spacing:
 * padding and margins.
 *
 * As the page is static (as instructed),
 * we're using a static value for the
 * base unit, rather than em.
 *
 * NOTICE:
 * Changing the variable names will
 * affect "_spacing.scss".
 ------------------------------------ */
body {
  --space-unit: 16px;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
}

/* -------------------------------------
 * INNER PADDINGS
 *
 * Inner padding for used for
 * component. The spacing is based on
 * the base values provided.
 *
 * Usage:
 * md: tables
 * lg: form fields
 * xl: modals, buttons
 ------------------------------------ */
body {
  --inner-xs: var(--space-xs);
  --inner-sm: var(--space-sm);
  --inner-md: var(--space-md);
  --inner-lg: var(--space-lg);
  --inner-xl: var(--space-xl);
  --inner-xxl: var(--space-xxl);
}

/* -------------------------------------
 * OUTER MARGINS
 *
 * Outer margin for used for
 * component. The spacing is based on
 * the base values provided.
 *
 * ".form-group" in "_input.scss"
 * is dependent on these defined
 * variables.
 ------------------------------------ */
body {
  --outer-xxs: var(--space-xxs);
  --outer-xs: var(--space-xs);
  --outer-sm: var(--space-sm);
  --outer-md: var(--space-md);
  --outer-lg: var(--space-lg);
  --outer-xl: var(--space-xl);
  --outer-xxl: var(--space-xxl);
}

/* -------------------------------------
 * TEXT
 *
 * Text sizing and line height.
 *
 * Adjust base font size with a
 * text-scale ratio of 1.2
 * var(--text-scale-ratio).
 *
 * fs = Font Size
 * fw = Font Weight
 *
 ------------------------------------ */
body {
  --font-primary: "Source Sans Pro", sans-serif;
  --font-headline: "f-grotesk","Source Sans Pro", sans-serif;
  /* Base values */
  --text-scale-ratio: 1.2;
  --text-base: 16.5px;
  --text-base-variant: calc(var(--text-base) - .5px);
  /* Type scale */
  --text-xxs:
    calc(var(--text-base) / (var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-r-xxs:
    calc(var(--text-r-base) / (var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-xs:
    calc(var(--text-base) / (var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-r-xs:
    calc(var(--text-r-base) / (var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-sm:
    calc(var(--text-base) / var(--text-scale-ratio));
  --text-r-sm:
    calc(var(--text-r-base) / var(--text-scale-ratio));
  --text-md:
    calc(var(--text-base) * var(--text-scale-ratio));
  --text-r-md:
    calc(var(--text-r-base) * var(--text-scale-ratio));
  --text-lg:
    calc(var(--text-base) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-r-lg:
    calc(var(--text-r-base) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xl:
    calc(var(--text-base) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-r-xl:
    calc(var(--text-r-base) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xxl:
    calc(var(--text-base) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-r-xxl:
    calc(var(--text-r-base) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xxxl:
    calc(var(--text-base) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-r-xxxl:
    calc(var(--text-r-base) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
  /* line-height */
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
}

/**
 * FONT
 *
 */
@font-face {
  font-family: "f-grotesk";
  src: url("/assets/fonts/f-grotesk/f-grotesk-book-thin.woff") format("woff"), url("/assets/fonts/f-grotesk/f-grotesk-book-thin.otf") format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "f-grotesk";
  src: url("/assets/fonts/f-grotesk/f-grotesk-book.woff") format("woff"), url("/assets/fonts/f-grotesk/f-grotesk-book.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "f-grotesk";
  src: url("/assets/fonts/f-grotesk/f-grotesk-demi.woff") format("woff"), url("/assets/fonts/f-grotesk/f-grotesk-demi.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "f-grotesk";
  src: url("/assets/fonts/f-grotesk/f-grotesk-bold.woff") format("woff"), url("/assets/fonts/f-grotesk/f-grotesk-bold.otf") format("opentype");
  font-weight: 800;
}
/* -------------------------------------
 * 2. TOOLS
 *
 * Global tools such as mixins.
 ------------------------------------ */
/**
 * MIXINS
 *
 * Index for all major variables used 
 * throughout the framework.
 */
/* -------------------------------------
 * PLACEHOLDER
 *
 * Not a mixin, but a sass placeholder.
 * 
 ------------------------------------ */
.mt-table-container.mt-table-no-padding tr.mt-table-element-row:last-of-type td:not(:first-of-type):not(:last-of-type):before, .mt-table-container.mt-table-no-padding tr.mt-table-element-row--expandable td:not(:first-of-type):not(:last-of-type):before, .mt-table-container.mt-table-no-padding td.mat-cell:last-of-type:before,
.mt-table-container.mt-table-no-padding th.mat-header-cell:last-of-type:before, .mt-table-container.mt-table-no-padding td.mat-cell:first-of-type:before,
.mt-table-container.mt-table-no-padding th.mat-header-cell:first-of-type:before {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(211, 211, 211, 0.5);
}

/* -------------------------------------
 * CHECKMARK - P-BOX
 *
 * Adds a checkmark to top right corner.
 * 
 ------------------------------------ */
/* -------------------------------------
 *  
 * CROSS ICON (CLOSE ICON)
 * 
 * Close and remove button as svg
 * background.
 * 
 * Due to lack of css "mask" property
 * support on browsers, dynamically
 * select the color of the cross icon. 
 *  
 * Usage:
 * @include icon-cross(#B4D455);
 * 
 ------------------------------------ */
/* -------------------------------------
 *  
 * ARROW
 * 
 * CSS generated triangle arrow,
 * allows for size and color adjustment.
 * 
 * Usage:
 * @include arrow(down, color('accent'), 15px, 20px);
 * 
 * Usage 2:
 * @include arrow(up, #000, 10px);
 * 
 ------------------------------------ */
/* -------------------------------------
 *  
 * DASHED BORDER USING BACKGROUND
 * 
 * Adds dashed border without having to
 * affect the sizing of the element, 
 * and is more customizible.
 * 
 ------------------------------------ */
/* -------------------------------------
 *  
 * HELPERS MIXINS
 * 
 * Misc. helper mixins.
 * 
 * Most mixins are mostly used mostly in
 * the context as css placeholders.
 * 
 ------------------------------------ */
/* -------------------------------------
 *  
 * Transition
 * 
 * "trsn" = transition
 * 
 ------------------------------------ */
/* Select card, in focus */
/* -------------------------------------
 *  
 * FLEX POSITION
 * 
 * Flex directional container, helpers
 * 
 ------------------------------------ */
/**
 * Sass placeholders
 */
/* -------------------------------------
 * BUTTON
 *
 *
 ------------------------------------ */
.btn-primary[disabled]:hover, .btn-primary-sm[disabled]:hover,
.btn-secondary[disabled]:hover, .btn-secondary-sm[disabled]:hover, .btn-primary[disabled], .btn-primary-sm[disabled],
.btn-secondary[disabled], .btn-secondary-sm[disabled] {
  background: #d0d0d0;
  cursor: default;
}

/* -------------------------------------
 * BUBBLE MENU
 *
 * Speech bubble-like
 *
 ------------------------------------ */
.bubble__bubble-box {
  background-color: white;
  width: 250px;
  border-radius: 3px;
}

.bubble__arrow:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
}

.bubble-floating[yposition=above] .bubble__arrow:after,
.bubble-wetting[yposition=above] .bubble__arrow:after {
  /* Down */
  content: "";
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid white;
  bottom: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.bubble-floating[yposition=below] .bubble__arrow:after,
.bubble-wetting[yposition=below] .bubble__arrow:after {
  /* Up */
  content: "";
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid white;
  top: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.bubble-floating[xposition=before] .bubble__arrow:after,
.bubble-wetting[xposition=before] .bubble__arrow:after {
  /* right */
  content: "";
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid white;
  right: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.bubble-floating[xposition=after] .bubble__arrow:after,
.bubble-wetting[xposition=after] .bubble__arrow:after {
  /* left */
  content: "";
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid white;
  left: -15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* -------------------------------------
 * 3. GENERIC
 *
 * High-level styles. Reset, normalize. 
 ------------------------------------ */
/* -------------------------------------
 * RESET
 * 
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 ------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* -------------------------------------
 * BUTTON RESET
 ------------------------------------ */
button {
  font-family: inherit;
  font-size: 100%;
  line-height: normal;
  margin: 0;
  color: inherit;
  font: inherit;
  border: none;
  padding: 0;
  overflow: visible;
  background-color: transparent;
}

button, button:focus {
  outline: none;
  cursor: pointer;
}

/* -------------------------------------
 * GLOBAL - HIGH LEVEL
 ------------------------------------ */
*, :after, :before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: "arial";
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: white;
  font-family: var(--font-primary);
  min-width: 1200px;
  line-height: var(--body-line-height);
  font-size: var(--text-base);
  font-weight: 400;
  height: 100%;
  width: 100%;
  color: #212121;
  position: absolute;
}

table {
  width: 100%;
}

td, th {
  padding: 0;
  vertical-align: middle;
}

th {
  text-align: left;
}

label {
  vertical-align: baseline;
}

a {
  text-decoration: none;
}

b, strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

svg-icon {
  width: var(--icon-md);
  height: var(--icon-md);
}
svg-icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* -------------------------------------
 * INPUT FIELDS
 ------------------------------------ */
input {
  font: inherit;
}

/**
 * Remove up-down button on webkit for 
 * type="number" input elements
 */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Remove up-down button on firefox for 
 * type="number" input elements
 */
input[type=number] {
  -moz-appearance: textfield;
}

/* Placeholder */
::-moz-placeholder {
  /* Mozilla Firefox */
  color: #d0d0d0 !important;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #d0d0d0 !important;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #d0d0d0 !important;
}

/* -------------------------------------
 * 4. ELEMENTS
 *
 * Redefining browser core elements.
 ------------------------------------ */
/**
 * SPACING
 * 
 * Padding, margin, that adds white 
 * space to component and forms.
 * 
 * Spacing legend:
 * --space-unit - 16px, base value
 * --space-xxs  - 4px
 * --space-xs:  - 8px
 * --space-sm:  - 12px
 * --space-md:  - 20px
 * --space-lg:  - 32px
 * --space-xl:  - 52px
 * --space-xxl: - 84px
 */
/* -------------------------------------
 * INNER PADDING HELPER CLASSES
 *
 * Inner padding helper classes, mainly
 * used for components.
 * 
 * The sizes for $space-size and 
 * $padding-size-label are defined in 
 * "variable.scss" file.
 ------------------------------------ */
.inner-xs, .inner-rl-xs {
  padding-left: var(--inner-xs);
  padding-right: var(--inner-xs);
}

.inner-t-xs {
  padding-top: var(--inner-xs);
}

.inner-r-xs {
  padding-right: var(--inner-xs);
}

.inner-b-xs {
  padding-bottom: var(--inner-xs);
}

.inner-l-xs {
  padding-left: var(--inner-xs);
}

.inner-tb-xs {
  padding-top: var(--inner-xs);
  padding-bottom: var(--inner-xs);
}

.inner-trl-xs {
  padding-top: var(--inner-xs);
  padding-right: var(--inner-xs);
  padding-left: var(--inner-xs);
}

.inner-rbl-xs {
  padding-right: var(--inner-xs);
  padding-bottom: var(--inner-xs);
  padding-left: var(--inner-xs);
}

.inner-trbl-xs {
  padding-top: var(--inner-xs);
  padding-right: var(--inner-xs);
  padding-bottom: var(--inner-xs);
  padding-left: var(--inner-xs);
}

.inner-sm, .inner-rl-sm {
  padding-left: var(--inner-sm);
  padding-right: var(--inner-sm);
}

.inner-t-sm {
  padding-top: var(--inner-sm);
}

.inner-r-sm {
  padding-right: var(--inner-sm);
}

.inner-b-sm {
  padding-bottom: var(--inner-sm);
}

.inner-l-sm {
  padding-left: var(--inner-sm);
}

.inner-tb-sm {
  padding-top: var(--inner-sm);
  padding-bottom: var(--inner-sm);
}

.inner-trl-sm {
  padding-top: var(--inner-sm);
  padding-right: var(--inner-sm);
  padding-left: var(--inner-sm);
}

.inner-rbl-sm {
  padding-right: var(--inner-sm);
  padding-bottom: var(--inner-sm);
  padding-left: var(--inner-sm);
}

.inner-trbl-sm {
  padding-top: var(--inner-sm);
  padding-right: var(--inner-sm);
  padding-bottom: var(--inner-sm);
  padding-left: var(--inner-sm);
}

.inner-md, .inner-rl-md {
  padding-left: var(--inner-md);
  padding-right: var(--inner-md);
}

.inner-t-md {
  padding-top: var(--inner-md);
}

.inner-r-md {
  padding-right: var(--inner-md);
}

.inner-b-md {
  padding-bottom: var(--inner-md);
}

.inner-l-md {
  padding-left: var(--inner-md);
}

.inner-tb-md {
  padding-top: var(--inner-md);
  padding-bottom: var(--inner-md);
}

.inner-trl-md {
  padding-top: var(--inner-md);
  padding-right: var(--inner-md);
  padding-left: var(--inner-md);
}

.inner-rbl-md {
  padding-right: var(--inner-md);
  padding-bottom: var(--inner-md);
  padding-left: var(--inner-md);
}

.inner-trbl-md {
  padding-top: var(--inner-md);
  padding-right: var(--inner-md);
  padding-bottom: var(--inner-md);
  padding-left: var(--inner-md);
}

.inner-lg, .inner-rl-lg {
  padding-left: var(--inner-lg);
  padding-right: var(--inner-lg);
}

.inner-t-lg {
  padding-top: var(--inner-lg);
}

.inner-r-lg {
  padding-right: var(--inner-lg);
}

.inner-b-lg {
  padding-bottom: var(--inner-lg);
}

.inner-l-lg {
  padding-left: var(--inner-lg);
}

.inner-tb-lg {
  padding-top: var(--inner-lg);
  padding-bottom: var(--inner-lg);
}

.inner-trl-lg {
  padding-top: var(--inner-lg);
  padding-right: var(--inner-lg);
  padding-left: var(--inner-lg);
}

.inner-rbl-lg {
  padding-right: var(--inner-lg);
  padding-bottom: var(--inner-lg);
  padding-left: var(--inner-lg);
}

.inner-trbl-lg {
  padding-top: var(--inner-lg);
  padding-right: var(--inner-lg);
  padding-bottom: var(--inner-lg);
  padding-left: var(--inner-lg);
}

.inner-xl, .inner-rl-xl {
  padding-left: var(--inner-xl);
  padding-right: var(--inner-xl);
}

.inner-t-xl {
  padding-top: var(--inner-xl);
}

.inner-r-xl {
  padding-right: var(--inner-xl);
}

.inner-b-xl {
  padding-bottom: var(--inner-xl);
}

.inner-l-xl {
  padding-left: var(--inner-xl);
}

.inner-tb-xl {
  padding-top: var(--inner-xl);
  padding-bottom: var(--inner-xl);
}

.inner-trl-xl {
  padding-top: var(--inner-xl);
  padding-right: var(--inner-xl);
  padding-left: var(--inner-xl);
}

.inner-rbl-xl {
  padding-right: var(--inner-xl);
  padding-bottom: var(--inner-xl);
  padding-left: var(--inner-xl);
}

.inner-trbl-xl {
  padding-top: var(--inner-xl);
  padding-right: var(--inner-xl);
  padding-bottom: var(--inner-xl);
  padding-left: var(--inner-xl);
}

.inner-xxl, .inner-rl-xxl {
  padding-left: var(--inner-xxl);
  padding-right: var(--inner-xxl);
}

.inner-t-xxl {
  padding-top: var(--inner-xxl);
}

.inner-r-xxl {
  padding-right: var(--inner-xxl);
}

.inner-b-xxl {
  padding-bottom: var(--inner-xxl);
}

.inner-l-xxl {
  padding-left: var(--inner-xxl);
}

.inner-tb-xxl {
  padding-top: var(--inner-xxl);
  padding-bottom: var(--inner-xxl);
}

.inner-trl-xxl {
  padding-top: var(--inner-xxl);
  padding-right: var(--inner-xxl);
  padding-left: var(--inner-xxl);
}

.inner-rbl-xxl {
  padding-right: var(--inner-xxl);
  padding-bottom: var(--inner-xxl);
  padding-left: var(--inner-xxl);
}

.inner-trbl-xxl {
  padding-top: var(--inner-xxl);
  padding-right: var(--inner-xxl);
  padding-bottom: var(--inner-xxl);
  padding-left: var(--inner-xxl);
}

.inner-none {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.inner-t-none {
  padding-top: 0 !important;
}

.inner-r-none {
  padding-right: 0 !important;
}

.inner-b-none {
  padding-bottom: 0 !important;
}

.inner-l-none {
  padding-left: 0 !important;
}

.inner-trbl-none {
  padding: 0 !important;
}

/* -------------------------------------
 * MARGIN HELPER CLASSES
 *
 * Margin spacing used as a wrapper for 
 * components and various elements.
 * 
 * The sizes are defined in the
 * "variable.scss" file.
 ------------------------------------ */
.outer-t {
  margin-top: var(--outer-md);
}

.outer-b {
  margin-bottom: var(--outer-md);
}

.outer-t-base {
  margin-top: var(--outer-base);
}

.outer-t-xxs {
  margin-top: var(--outer-xxs);
}

.outer-t-xs {
  margin-top: var(--outer-xs);
}

.outer-t-sm {
  margin-top: var(--outer-sm);
}

.outer-t-md {
  margin-top: var(--outer-md);
}

.outer-t-lg {
  margin-top: var(--outer-lg);
}

.outer-t-xl {
  margin-top: var(--outer-xl);
}

.outer-t-xxl {
  margin-top: var(--outer-xxl);
}

.outer-tr-base {
  margin-top: var(--outer-base);
  margin-right: var(--outer-base);
}

.outer-tr-xxs {
  margin-top: var(--outer-xxs);
  margin-right: var(--outer-xxs);
}

.outer-tr-xs {
  margin-top: var(--outer-xs);
  margin-right: var(--outer-xs);
}

.outer-tr-sm {
  margin-top: var(--outer-sm);
  margin-right: var(--outer-sm);
}

.outer-tr-md {
  margin-top: var(--outer-md);
  margin-right: var(--outer-md);
}

.outer-tr-lg {
  margin-top: var(--outer-lg);
  margin-right: var(--outer-lg);
}

.outer-tr-xl {
  margin-top: var(--outer-xl);
  margin-right: var(--outer-xl);
}

.outer-tr-xxl {
  margin-top: var(--outer-xxl);
  margin-right: var(--outer-xxl);
}

.outer-tb-base {
  margin-top: var(--outer-base);
  margin-bottom: var(--outer-base);
}

.outer-tb-xxs {
  margin-top: var(--outer-xxs);
  margin-bottom: var(--outer-xxs);
}

.outer-tb-xs {
  margin-top: var(--outer-xs);
  margin-bottom: var(--outer-xs);
}

.outer-tb-sm {
  margin-top: var(--outer-sm);
  margin-bottom: var(--outer-sm);
}

.outer-tb-md {
  margin-top: var(--outer-md);
  margin-bottom: var(--outer-md);
}

.outer-tb-lg {
  margin-top: var(--outer-lg);
  margin-bottom: var(--outer-lg);
}

.outer-tb-xl {
  margin-top: var(--outer-xl);
  margin-bottom: var(--outer-xl);
}

.outer-tb-xxl {
  margin-top: var(--outer-xxl);
  margin-bottom: var(--outer-xxl);
}

.outer-tl-base {
  margin-top: var(--outer-base);
  margin-left: var(--outer-base);
}

.outer-tl-xxs {
  margin-top: var(--outer-xxs);
  margin-left: var(--outer-xxs);
}

.outer-tl-xs {
  margin-top: var(--outer-xs);
  margin-left: var(--outer-xs);
}

.outer-tl-sm {
  margin-top: var(--outer-sm);
  margin-left: var(--outer-sm);
}

.outer-tl-md {
  margin-top: var(--outer-md);
  margin-left: var(--outer-md);
}

.outer-tl-lg {
  margin-top: var(--outer-lg);
  margin-left: var(--outer-lg);
}

.outer-tl-xl {
  margin-top: var(--outer-xl);
  margin-left: var(--outer-xl);
}

.outer-tl-xxl {
  margin-top: var(--outer-xxl);
  margin-left: var(--outer-xxl);
}

.outer-trb-base {
  margin-top: var(--outer-base);
  margin-right: var(--outer-base);
  margin-bottom: var(--outer-base);
}

.outer-trb-xxs {
  margin-top: var(--outer-xxs);
  margin-right: var(--outer-xxs);
  margin-bottom: var(--outer-xxs);
}

.outer-trb-xs {
  margin-top: var(--outer-xs);
  margin-right: var(--outer-xs);
  margin-bottom: var(--outer-xs);
}

.outer-trb-sm {
  margin-top: var(--outer-sm);
  margin-right: var(--outer-sm);
  margin-bottom: var(--outer-sm);
}

.outer-trb-md {
  margin-top: var(--outer-md);
  margin-right: var(--outer-md);
  margin-bottom: var(--outer-md);
}

.outer-trb-lg {
  margin-top: var(--outer-lg);
  margin-right: var(--outer-lg);
  margin-bottom: var(--outer-lg);
}

.outer-trb-xl {
  margin-top: var(--outer-xl);
  margin-right: var(--outer-xl);
  margin-bottom: var(--outer-xl);
}

.outer-trb-xxl {
  margin-top: var(--outer-xxl);
  margin-right: var(--outer-xxl);
  margin-bottom: var(--outer-xxl);
}

.outer-trbl-base {
  margin-top: var(--outer-base);
  margin-right: var(--outer-base);
  margin-bottom: var(--outer-base);
  margin-left: var(--outer-base);
}

.outer-trbl-xxs {
  margin-top: var(--outer-xxs);
  margin-right: var(--outer-xxs);
  margin-bottom: var(--outer-xxs);
  margin-left: var(--outer-xxs);
}

.outer-trbl-xs {
  margin-top: var(--outer-xs);
  margin-right: var(--outer-xs);
  margin-bottom: var(--outer-xs);
  margin-left: var(--outer-xs);
}

.outer-trbl-sm {
  margin-top: var(--outer-sm);
  margin-right: var(--outer-sm);
  margin-bottom: var(--outer-sm);
  margin-left: var(--outer-sm);
}

.outer-trbl-md {
  margin-top: var(--outer-md);
  margin-right: var(--outer-md);
  margin-bottom: var(--outer-md);
  margin-left: var(--outer-md);
}

.outer-trbl-lg {
  margin-top: var(--outer-lg);
  margin-right: var(--outer-lg);
  margin-bottom: var(--outer-lg);
  margin-left: var(--outer-lg);
}

.outer-trbl-xl {
  margin-top: var(--outer-xl);
  margin-right: var(--outer-xl);
  margin-bottom: var(--outer-xl);
  margin-left: var(--outer-xl);
}

.outer-trbl-xxl {
  margin-top: var(--outer-xxl);
  margin-right: var(--outer-xxl);
  margin-bottom: var(--outer-xxl);
  margin-left: var(--outer-xxl);
}

.outer-rl-base {
  margin-right: var(--outer-base);
  margin-left: var(--outer-base);
}

.outer-rl-xxs {
  margin-right: var(--outer-xxs);
  margin-left: var(--outer-xxs);
}

.outer-rl-xs {
  margin-right: var(--outer-xs);
  margin-left: var(--outer-xs);
}

.outer-rl-sm {
  margin-right: var(--outer-sm);
  margin-left: var(--outer-sm);
}

.outer-rl-md {
  margin-right: var(--outer-md);
  margin-left: var(--outer-md);
}

.outer-rl-lg {
  margin-right: var(--outer-lg);
  margin-left: var(--outer-lg);
}

.outer-rl-xl {
  margin-right: var(--outer-xl);
  margin-left: var(--outer-xl);
}

.outer-rl-xxl {
  margin-right: var(--outer-xxl);
  margin-left: var(--outer-xxl);
}

.outer-r-base {
  margin-right: var(--outer-base);
}

.outer-r-xxs {
  margin-right: var(--outer-xxs);
}

.outer-r-xs {
  margin-right: var(--outer-xs);
}

.outer-r-sm {
  margin-right: var(--outer-sm);
}

.outer-r-md {
  margin-right: var(--outer-md);
}

.outer-r-lg {
  margin-right: var(--outer-lg);
}

.outer-r-xl {
  margin-right: var(--outer-xl);
}

.outer-r-xxl {
  margin-right: var(--outer-xxl);
}

.outer-b-base {
  margin-bottom: var(--outer-base);
}

.outer-b-xxs {
  margin-bottom: var(--outer-xxs);
}

.outer-b-xs {
  margin-bottom: var(--outer-xs);
}

.outer-b-sm {
  margin-bottom: var(--outer-sm);
}

.outer-b-md {
  margin-bottom: var(--outer-md);
}

.outer-b-lg {
  margin-bottom: var(--outer-lg);
}

.outer-b-xl {
  margin-bottom: var(--outer-xl);
}

.outer-b-xxl {
  margin-bottom: var(--outer-xxl);
}

.outer-l-base {
  margin-left: var(--outer-base);
}

.outer-l-xxs {
  margin-left: var(--outer-xxs);
}

.outer-l-xs {
  margin-left: var(--outer-xs);
}

.outer-l-sm {
  margin-left: var(--outer-sm);
}

.outer-l-md {
  margin-left: var(--outer-md);
}

.outer-l-lg {
  margin-left: var(--outer-lg);
}

.outer-l-xl {
  margin-left: var(--outer-xl);
}

.outer-l-xxl {
  margin-left: var(--outer-xxl);
}

/**
 * ALIGNMENT
 * 
 */
/**
 *
 * TYPOGRAPHY
 *
 * Basic text color and text size, along
 * with some text size helper classes.
 *
 * For more aligment and text-transform,
 * see the typography helpers classes in
 * "_helpers.scss", under "8-trumps" folder
 *
 */
/* -------------------------------------
 * TYPOGRAPHY PLACEHOLDERS
 *
 *
 ------------------------------------ */
.form-box__label dl dt,
dl.form-box__label dt {
  font-size: var(--text-md);
  font-weight: 600;
}

.form-box__label dl dd,
dl.form-box__label dd {
  color: #999999;
  font-weight: 300;
}

/* -------------------------------------
 *
 * DEFAULT TEXT SIZES
 *
 ------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-headline);
  font-weight: 600;
}

h1, .text-xxxl {
  font-size: var(--text-xxxl);
}

h2, .text-xxl {
  font-size: var(--text-xxl);
}

h3, .text-xl {
  font-size: var(--text-xl);
}

h4, .text-lg {
  font-size: var(--text-lg);
}

h5, .text-md {
  font-size: var(--text-md);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-base-variant {
  font-size: var(--text-base-variant);
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--body-line-height);
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
}

p {
  font-size: var(--text-base);
}

a {
  color: #2b7cff;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

th, td {
  font-family: var(--font-primary);
}

mat-error {
  font-size: var(--text-base);
}

/* -------------------------------------
 *
 * TEXT DECORATIONS
 *
 ------------------------------------ */
.text-strike {
  text-decoration: line-through;
}

.text-underline {
  text-decoration: underline;
}

.text-discount {
  color: #999999;
  text-decoration: line-through;
  opacity: 0.7;
  font-size: calc(var(--text-sm) - 2px);
}

/* -------------------------------------
 *
 * TEXT COLORS
 *
 ------------------------------------ */
.text-color-default {
  color: #212121;
}

.text-color-inverted {
  color: white;
}

.text-color-accent {
  color: #2b7cff;
}

.text-color-secondary {
  color: #385890;
}

.text-color-description {
  color: #999999;
}

.text-color-alert {
  color: #ff716b;
}

/* -------------------------------------
 *
 * BACKGROUND COLORS
 *
 ------------------------------------ */
.bg-color-body {
  background-color: white;
}

.bg-color-panel {
  background-color: #f7f6f4;
}

.bg-color-mark {
  background-color: #ececec;
}

.bg-color-accent {
  background-color: #385890;
}

.bg-color-secondary {
  background-color: #2b7cff;
}

/* -------------------------------------
 *
 * ICON COLORS
 *
 ------------------------------------ */
.icon-color-default {
  fill: #212121 !important;
}

.icon-color-inverted {
  fill: white !important;
}

.icon-color-accent {
  fill: #2b7cff !important;
}

.icon-color-secondary {
  fill: #385890 !important;
}

.icon-color-description {
  fill: #999999 !important;
}

.icon-color-alert {
  fill: #ff716b !important;
}

.icon-color-disabled {
  fill: #d0d0d0 !important;
}

/* -------------------------------------
 *
 * ICON SIZES
 *
 ------------------------------------ */
.icon-xs {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.icon-xs svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon-sm {
  width: var(--icon-base);
  height: var(--icon-base);
}
.icon-sm svg {
  width: var(--icon-base);
  height: var(--icon-base);
}

.icon-md {
  width: var(--icon-md);
  height: var(--icon-md);
}
.icon-md svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.icon-lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.icon-lg svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.icon-xl {
  width: var(--icon-xl);
  height: var(--icon-xl);
}
.icon-xl svg {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.icon-xxl {
  width: var(--icon-xxl);
  height: var(--icon-xxl);
}
.icon-xxl svg {
  width: var(--icon-xxl);
  height: var(--icon-xxl);
}

.icon-xxxl {
  width: var(--icon-xxxl);
  height: var(--icon-xxxl);
}
.icon-xxxl svg {
  width: var(--icon-xxxl);
  height: var(--icon-xxxl);
}

.icon-xxxxl {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
}
.icon-xxxxl svg {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
}

/* -------------------------------------
 * TEXT CONTENT
 *
 * Format text
 *
 ------------------------------------ */
.text-content h1, .text-content h2 {
  margin-top: var(--outer-lg);
  margin-bottom: var(--outer-xxs);
}
.text-content h3, .text-content h4, .text-content h5 {
  margin-top: var(--outer-md);
  margin-bottom: var(--outer-xxs);
}
.text-content p {
  font-size: var(--text-base);
  margin-bottom: var(--outer-sm);
}

.text-truncate-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}

/**
 * LOGIN FORM
 */
.login-page {
  background-image: url("./img/login-bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  min-height: 100%;
  padding-top: 100px;
}

.login-logo {
  text-align: center;
}
.login-logo img {
  width: 210px;
  margin-bottom: var(--outer-xl);
}

.login-content-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: var(--inner-xl);
}
.login-content-container .login-content {
  width: 400px;
}
.login-content-container .login-register-content {
  width: 800px;
}
.login-content-container .inactive-item .mat-form-field-outline {
  color: transparent;
}

/**
 * INPUT
 * 
 * Related to input field and labels, 
 * and error handling.
 * 
 * These are used for the traditional
 * top-down forms.
 * 
 * The campaign flow uses ".form-box".
 * 
 * NOTE:
 * Some components like material's (mat) 
 * input fields are used in the project.
 * These styling are added in the
 * "_material-override.scss" file, under
 * the folder "7-plugins" and is not found
 * here. 
 */
/* -------------------------------------
 * FORM GROUP - INPUT SPACING
 * 
 * Wrapper for a group of components,
 * such as label + input field.
 * 
 * Adds spacing (margin) at the bottom
 * to separate elements.
 * 
 * Example:
 * div.form-group
 * - .form-item
 * - .form-item
 * 
 ------------------------------------ */
.form-group-xxs {
  margin-bottom: var(--outer-xxs);
  width: var(--col-12);
}

.form-group-xs {
  margin-bottom: var(--outer-xs);
  width: var(--col-12);
}

.form-group-sm {
  margin-bottom: var(--outer-sm);
  width: var(--col-12);
}

.form-group-md {
  margin-bottom: var(--outer-md);
  width: var(--col-12);
}

.form-group-lg {
  margin-bottom: var(--outer-lg);
  width: var(--col-12);
}

.form-group-xl {
  margin-bottom: var(--outer-xl);
  width: var(--col-12);
}

.form-group {
  margin-bottom: var(--outer-lg);
  width: var(--col-12);
}

/* -------------------------------------
 * FORM ITEM - INPUT SPACING
 * 
 * Separate elements within form groups.
 * Adds spacing (margin) below each 
 * element.
 * 
 * Usage (.form-item-size):
 * xxs: Labels
 * lg: Paragraphs
 * 
 ------------------------------------ */
.form-item, .form-item-xxs {
  margin-bottom: var(--outer-xxs);
}

.form-item-xs {
  margin-bottom: var(--outer-xs);
}

.form-item-sm {
  margin-bottom: var(--outer-sm);
}

.form-item-md {
  margin-bottom: var(--outer-md);
}

/* -------------------------------------
 * LABEL
 *
 * Labels used in forms.
 * 
 ------------------------------------ */
form label.form-label, div.form label.form-label {
  text-transform: uppercase;
  font-weight: 600;
  color: #31312f;
  font-size: var(--text-xs);
  display: block;
  letter-spacing: 1px;
}

/* -------------------------------------
 * PARAGRAPH & RUNNING TEXT
 *
 * Labels used in forms and body text,
 * used within forms.
 * 
 ------------------------------------ */
form .form-description, div.form .form-description {
  color: #999999;
}

/* -------------------------------------
 * 5. OBJECTS
 *
 * Undecorated classes, like layout, 
 * media queries, etc.
 ------------------------------------ */
/**
 * GRID
 * 
 * Column containers following a similar
 * approach of bootstrap, but not quite.
 * 
 * Actual CSS grid classes are welcome here 
 * as well.
 */
/* -------------------------------------
 * CUSTOM COLUMN: FLEXBOX
 * .F-COL-
 * 
 * Custom 12-column system using flexbox.
 * 
 * It has similarities to Bootstrap 4,
 * but uses a different structure.
 * 
 * Gutters are added using padding 
 * rather than margin inside columns 
 * (f-col-), thus, if background-color is 
 * used, it is recommended to create a 
 * container in the column (f-col-).
 * 
 * Example (with gutters):
 * div.f-grid.f-gutter
 * - .f-col-5
 * -- div
 * - .f-col-7
 * -- div
 * 
 * Example (normal):
 * div.f-grid
 * - .f-col-1
 * - .f-col-8
 * - .f-col-4
 * 
 * Example (equal column size):
 * div.f-grid.f-auto
 * - div
 * - div
 * - div
 * 
 ------------------------------------ */
:root {
  --col-1: 8.3333333333%;
  --col-2: 16.6666666667%;
  --col-3: 25%;
  --col-4: 33.3333333333%;
  --col-5: 41.6666666667%;
  --col-6: 50%;
  --col-7: 58.3333333333%;
  --col-8: 66.6666666667%;
  --col-9: 75%;
  --col-10: 83.3333333333%;
  --col-11: 91.6666666667%;
  --col-12: 100%;
}

.f-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}
.f-grid.f-gutter > * {
  padding-right: 10px;
  padding-left: 10px;
}
.f-grid.f-row {
  margin-left: -10px;
  margin-right: -10px;
  width: calc(100% + 2 * 10px);
}
.f-grid.f-span {
  width: calc(100% + 2 * 10px);
  margin-left: -10px;
  margin-right: -10px;
}
.f-grid.f-span > * {
  padding-right: 10px;
  padding-left: 10px;
}
.f-grid.f-auto > div {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
}
.f-grid.f-grow > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 100%;
}

.f-col-1 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-1);
          flex: 0 0 var(--col-1);
  max-width: var(--col-1);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-2);
          flex: 0 0 var(--col-2);
  max-width: var(--col-2);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-3 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-3);
          flex: 0 0 var(--col-3);
  max-width: var(--col-3);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-4 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-4);
          flex: 0 0 var(--col-4);
  max-width: var(--col-4);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-5 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-5);
          flex: 0 0 var(--col-5);
  max-width: var(--col-5);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-6 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-6);
          flex: 0 0 var(--col-6);
  max-width: var(--col-6);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-7 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-7);
          flex: 0 0 var(--col-7);
  max-width: var(--col-7);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-8 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-8);
          flex: 0 0 var(--col-8);
  max-width: var(--col-8);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-9 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-9);
          flex: 0 0 var(--col-9);
  max-width: var(--col-9);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-10 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-10);
          flex: 0 0 var(--col-10);
  max-width: var(--col-10);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-11 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-11);
          flex: 0 0 var(--col-11);
  max-width: var(--col-11);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.f-col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--col-12);
          flex: 0 0 var(--col-12);
  max-width: var(--col-12);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.order-start {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
      -ms-flex-order: 9;
          order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}

.order-11 {
  -webkit-box-ordinal-group: 12;
      -ms-flex-order: 11;
          order: 11;
}

.order-12 {
  -webkit-box-ordinal-group: 13;
      -ms-flex-order: 12;
          order: 12;
}

.order-end {
  -webkit-box-ordinal-group: 14;
      -ms-flex-order: 13;
          order: 13;
}

/* -------------------------------------
 * WIDTH LENGTHS
 *
 * 12 grid lengths in %
 * 
 * Example output:
 * .length-6 { width: var(--col-6) };
 * .length-12 { width: var(--col-12) };
 * 
 * Definition example:
 * --col-6: 50%;
 * --col-12: 100%;
 ------------------------------------ */
.length-0 {
  width: var(--col-0);
}

.length-1 {
  width: var(--col-1);
}

.length-2 {
  width: var(--col-2);
}

.length-3 {
  width: var(--col-3);
}

.length-4 {
  width: var(--col-4);
}

.length-5 {
  width: var(--col-5);
}

.length-6 {
  width: var(--col-6);
}

.length-7 {
  width: var(--col-7);
}

.length-8 {
  width: var(--col-8);
}

.length-9 {
  width: var(--col-9);
}

.length-10 {
  width: var(--col-10);
}

.length-11 {
  width: var(--col-11);
}

.length-12 {
  width: var(--col-12);
}

@media (max-width: 991px) {
  .length-sm-0 {
    width: var(--col-0);
  }

  .length-sm-1 {
    width: var(--col-1);
  }

  .length-sm-2 {
    width: var(--col-2);
  }

  .length-sm-3 {
    width: var(--col-3);
  }

  .length-sm-4 {
    width: var(--col-4);
  }

  .length-sm-5 {
    width: var(--col-5);
  }

  .length-sm-6 {
    width: var(--col-6);
  }

  .length-sm-7 {
    width: var(--col-7);
  }

  .length-sm-8 {
    width: var(--col-8);
  }

  .length-sm-9 {
    width: var(--col-9);
  }

  .length-sm-10 {
    width: var(--col-10);
  }

  .length-sm-11 {
    width: var(--col-11);
  }

  .length-sm-12 {
    width: var(--col-12);
  }
}
/* -------------------------------------
 * MAX WIDTH LENGTHS
 *
 * 12 grid lengths in %
 * 
 * Example output:
 * .length-6 { max-width: var(--col-6) };
 * .length-12 { max-width: var(--col-12) };
 * 
 * Definition example:
 * --col-6: 50%;
 * --col-12: 100%;
 ------------------------------------ */
.length-max-1 {
  max-width: var(--col-1);
}

.length-max-2 {
  max-width: var(--col-2);
}

.length-max-3 {
  max-width: var(--col-3);
}

.length-max-4 {
  max-width: var(--col-4);
}

.length-max-5 {
  max-width: var(--col-5);
}

.length-max-6 {
  max-width: var(--col-6);
}

.length-max-7 {
  max-width: var(--col-7);
}

.length-max-8 {
  max-width: var(--col-8);
}

.length-max-9 {
  max-width: var(--col-9);
}

.length-max-10 {
  max-width: var(--col-10);
}

.length-max-11 {
  max-width: var(--col-11);
}

.length-max-12 {
  max-width: var(--col-12);
}

@-webkit-keyframes bubble-fade-down {
  0% {
    margin-top: -10px;
    opacity: 0.6;
  }
  100% {
    margin-top: 0px;
    opacity: 1;
  }
}

@keyframes bubble-fade-down {
  0% {
    margin-top: -10px;
    opacity: 0.6;
  }
  100% {
    margin-top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* -------------------------------------
 * 6. COMPONENTS
 *
 * Styled components: card, button, 
 * portlets, etc.
 ------------------------------------ */
/**
 * LAYOUT
 * 
 * Navigation components such as top-nav,
 * sub-navigation, footer, etc.
 * 
 */
/**
 * Temporary styling to push down content, 
 * due to top-nav being fixed 100px
 */
.page-container {
  margin-top: calc(100px + var(--outer-xl));
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--outer-xl);
}

/* -------------------------------------
 * TOP NAV
 *
 * Top navigation of page, the main
 * area for including page buttons.
 ------------------------------------ */
.top-nav {
  position: fixed;
  background-color: #f7f6f4;
  width: 100%;
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.12);
  z-index: 10;
  height: 100px;
  top: 0;
  left: 0;
}
.top-nav .top-nav-content {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  font-size: var(--text-base-variant);
}

/* -------------------------------------
 * PAGE FORM ACTIONS CONTAINER
 *
 * The main buttons in a form to
 * navigate between the pages, and
 * to proceed.
 *
 * Buttons aligned left.
 ------------------------------------ */
.page-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

/* -------------------------------------
 * PAGE FORM ACTIONS CONTAINER
 *
 * The main buttons in a form to
 * navigate between the pages, and
 * to proceed.
 *
 * Positioned at the bottom of the page.
 *
 * "Main buttons" are aligned right,
 * "back button" aligned left using
 * helper class ".flex--start".
 *
 * Usage:
 * div.page-actions--form
 * - .page-actions--form__sideline
 * -- button
 * - .page-actions--form__frontline
 * -- button
 ------------------------------------ */
.page-actions--form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: var(--outer-md);
  margin-bottom: var(--outer-md);
}

.page-actions--form__sideline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.page-actions--form__frontline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.page-actions--form__frontline > * {
  margin-left: var(--outer-lg);
}

/* -------------------------------------
 * DIALOG ACTIONS CONTAINER
 *
 * Button container for dialogs and
 * expanded table rows.
 *
 * Usage:
 * .dialog-actions
 * - dialog-actions__sideline
 * - dialog-actions__frontline
 *
 ------------------------------------ */
.dialog-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.dialog-actions__sideline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.dialog-actions__frontline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.dialog-actions__frontline > * {
  margin-left: var(--outer-lg);
}

.dialog-actions__center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.dialog-actions__center > * {
  margin-left: var(--outer-md);
  margin-right: var(--outer-md);
}

.dialog-actions__stack {
  width: 100%;
}
.dialog-actions__stack button {
  width: 100%;
  max-width: 446px;
  margin-left: auto;
  margin-right: auto;
}
.dialog-actions__stack button:not(last-child) {
  margin-bottom: var(--outer-md);
}

/* -------------------------------------
 * BUBBLE TOOLTIP & MENU
 *
 * Speech bubble with option to use
 * the absolute position ("floating bubble)
 * or the static position ("wetting").
 *
 * "Floating" as in a soap a bubble's
 * floating physical property.
 *
 * "Wetting" refers to a soap bubble's
 * stationairy state when getting in
 * contact with a solid or liquid
 * surface.
 *
 * "{ModifyClass}" is a unique class to
 * apply specfic CSS rules where the
 * bubble appears, e.g. to set position.
 *
 * Usage (floating = sitting above content):
 * .bubble-floating.bubble-floating--{ModifyClass} yposition="below" color="alert"
 * - .bubble__arrow
 * - .bubble__bubble-box.inner-trbl-lg
 * -- div (content)
 *
 * Usage (wetting = static):
 * .bubble-wetting.bubble-wetting--{ModifyClass} xposition="after" color="alert"
 * - bubble__arrow
 * - bubble__bubble-box.inner-trbl-lg
 * -- div (content)
 *
 * Attributes for arrow:
 * yPosition="above"
 * yPosition="below"
 * xPosition="before"
 * xPosition="after"
 *
 * Use modifieres to modify the
 * bubble for specific purposes.
 * E.g. positioning and size.
 *
 ------------------------------------ */
.bubble-floating {
  position: absolute;
}

.bubble-wetting {
  position: relative;
}

.bubble__arrow:after {
  word-break: break-all;
}

/* -------------------------------------
 * BUBBLE MENU COLORS
 *
 * Coloring the bubble menu.
 *
 * Usage:
 * .bubble-wetting   color="alert"
 *
 * Attributes:
 * color="alert"
 * color="secondary"
 ------------------------------------ */
.bubble-floating[color=alert] .bubble__bubble-box,
.bubble-wetting[color=alert] .bubble__bubble-box {
  background-color: #ff716b;
  color: white;
}
.bubble-floating[color=alert][yposition=above] .bubble__arrow:after,
.bubble-wetting[color=alert][yposition=above] .bubble__arrow:after {
  border-top-color: #ff716b;
}
.bubble-floating[color=alert][yposition=below] .bubble__arrow:after,
.bubble-wetting[color=alert][yposition=below] .bubble__arrow:after {
  border-bottom-color: #ff716b;
}
.bubble-floating[color=alert][xposition=before] .bubble__arrow:after,
.bubble-wetting[color=alert][xposition=before] .bubble__arrow:after {
  border-left-color: #ff716b;
}
.bubble-floating[color=alert][xposition=after] .bubble__arrow:after,
.bubble-wetting[color=alert][xposition=after] .bubble__arrow:after {
  border-right-color: #ff716b;
}

.bubble-floating[color=secondary] .bubble__bubble-box,
.bubble-wetting[color=secondary] .bubble__bubble-box {
  background-color: #385890;
  color: white;
}
.bubble-floating[color=secondary][yposition=above] .bubble__arrow:after,
.bubble-wetting[color=secondary][yposition=above] .bubble__arrow:after {
  border-top-color: #385890;
}
.bubble-floating[color=secondary][yposition=below] .bubble__arrow:after,
.bubble-wetting[color=secondary][yposition=below] .bubble__arrow:after {
  border-bottom-color: #385890;
}
.bubble-floating[color=secondary][xposition=before] .bubble__arrow:after,
.bubble-wetting[color=secondary][xposition=before] .bubble__arrow:after {
  border-left-color: #385890;
}
.bubble-floating[color=secondary][xposition=after] .bubble__arrow:after,
.bubble-wetting[color=secondary][xposition=after] .bubble__arrow:after {
  border-right-color: #385890;
}

/* -------------------------------------
 * BUBBLE FLOATING MENU MODIFIER
 *
 * Modifier for
 * ".bubble-floating" and "bubble-wetting",
 * add it in the same element.
 *
 * Adjusts things like position, colors.
 ------------------------------------ */
.bubble-floating.bubble-floating--user {
  top: calc(35px + 15px);
  left: -88px;
  -webkit-animation: bubble-fade-down 0.2s forwards;
          animation: bubble-fade-down 0.2s forwards;
}
.bubble-floating.bubble-floating--user .bubble__bubble-box {
  width: 200px;
}

.bubble-floating.bubble-floating--notification-alert {
  top: calc(35px + 15px);
  left: -500px;
  -webkit-animation: bubble-fade-down 0.2s forwards;
          animation: bubble-fade-down 0.2s forwards;
}
.bubble-floating.bubble-floating--notification-alert .bubble__bubble-box {
  width: 640px;
  min-height: 50px;
  max-height: 550px;
  overflow: auto;
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
}
.bubble-floating.bubble-floating--notification-alert[yposition=below] .bubble__arrow:after {
  right: 98px;
  left: initial;
}
.bubble-floating.bubble-floating--notification-alert[yposition=above] .bubble__arrow:after {
  -webkit-transform: initial;
      -ms-transform: initial;
          transform: initial;
}

.bubble-floating.bubble-floating--select-company {
  top: calc(35px + 15px);
  left: -181px;
  -webkit-animation: bubble-fade-down 0.2s forwards;
          animation: bubble-fade-down 0.2s forwards;
}
.bubble-floating.bubble-floating--select-company .bubble__bubble-box {
  width: 320px;
  min-height: 50px;
  max-height: 375px;
  overflow: auto;
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
}
.bubble-floating.bubble-floating--select-company[yposition=below] .bubble__arrow:after {
  right: 98px;
  left: initial;
}
.bubble-floating.bubble-floating--select-company[yposition=above] .bubble__arrow:after {
  -webkit-transform: initial;
      -ms-transform: initial;
          transform: initial;
}

.bubble-wetting.bubble-wetting--cmp-target-tooltip {
  margin-left: 15px;
}
.bubble-wetting.bubble-wetting--cmp-target-tooltip .bubble__bubble-box {
  width: 100%;
}

.bubble-floating.bubble-floating--low-imp {
  left: -290px;
  top: -28px;
}

.bubble-floating.bubble-floating--adformat-material {
  left: 610px;
  top: 20px;
  z-index: 1;
}

/* -------------------------------------
 * CREATE CAMPAIGN HEADER
 *
 * Header used for all the pages within
 * "create campaign".
 ------------------------------------ */
.cmp-step-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: var(--outer-xl);
  margin-bottom: var(--outer-xl);
}
.cmp-step-header h4 {
  font-size: calc(var(--text-lg) + 1.5px);
}

/* -------------------------------------
 * MENU LIST
 *
 * Is styled like the menu in a
 * dropdown.
 ------------------------------------ */
.menu-list button {
  padding-top: calc(var(--inner-md) / 2);
  padding-right: var(--inner-md);
  padding-bottom: calc(var(--inner-md) / 2);
  padding-left: var(--inner-md);
  width: 100%;
  text-align: left;
}
.menu-list button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/**
 * PORTLET BOXES
 * 
 * Box with content.
 * 
 * "p" (portlet) prefix is used to avoid clashing
 * with potential future plugin using the class name
 * "box", as the class name is ubiquitously used, 
 * and our CSS is not scoped.
 */
/* -------------------------------------
 * P-BOX DEFINITION
 *
 * Define .p-box and p-sub-box 
 * default properties.
 * 
 * scss placeholder.
 * 
 ------------------------------------ */
.form-box-creatives-review, .form-box-cmp-review, .card-box--context, .card-creative.card-creative--vertical, .card-creative, .card-box.card-box--interest.is-active, .card-box.card-box--interest:hover, .form-box, .mt-table-expanded .mt-table-expanded-instructions, .card-box, .portlet-box {
  border: 1px solid rgba(211, 211, 211, 0.5);
}

.form-box-creatives-review, .form-box-cmp-review, .card-box--context, .card-creative.card-creative--vertical, .card-creative, .card-box.card-box--interest.is-active, .card-box.card-box--interest:hover, .form-box, .mt-table-expanded .mt-table-expanded-instructions, .card-box, .portlet-box {
  background-color: white;
  border-radius: 3px;
}

.notification-task-item, .form-box-cmp-review__input-box, .card-adformat, .form-panel, .form-sub-box, .mt-table-expanded, .support-center, .p-box-meta, .box-panel, .portlet-sub-box {
  background-color: #f7f6f4;
  border: 1px solid rgba(211, 211, 211, 0.5);
}

/* -------------------------------------
 * PORTLET BOX STANDARD - P-BOX
 *
 * Standard box for dialogs and portlets
 * 
 ------------------------------------ */
/* -------------------------------------
 * PANEL - P-BOX
 *
 * Container panel, e.g. filter area 
 * above tables
 * 
 ------------------------------------ */
.box-panel {
  padding: var(--inner-md);
}

.box-panel--expanded {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.box-panel-border {
  border: 1px solid rgba(211, 211, 211, 0.5);
}

/* -------------------------------------
 * META - P-SUB-BOX
 *
 * Metadata-box can contais various 
 * information. It is used mainly
 * as boxes where aggregated data is
 * displayed, such as the number of 
 * "active campaign".
 * 
 ------------------------------------ */
.p-box-meta {
  padding: var(--inner-md);
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100px;
  font-size: var(--text-base-variant);
}

.p-box-meta[color=alert] {
  background-color: #ff716b;
  color: white;
}

/* -------------------------------------
 * META ICON & TEXT - P-SUB-BOX
 *
 * Displaying 2 column, icon & text.
 * 
 * Usage of icon+text:
 * div.p-box-meta
 * - .p-box-meta__icon
 * - .p-box-meta__text
 * 
 ------------------------------------ */
.p-box-meta__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: var(--icon-lg);
  margin-right: var(--outer-md);
}
.p-box-meta__icon svg-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.p-box-meta__icon svg-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.p-box-meta__icon img {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.p-box-meta__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* -------------------------------------
 * META CAMPAIGN STATUS - P-SUB-BOX
 *
 * Overview of campaign
 * 
 ------------------------------------ */
.p-box-meta__cmp-status-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.p-box-meta__cmp-status-col dl {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.p-box-meta__cmp-status-col dt, .p-box-meta__cmp-status-col dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-box-meta__cmp-status-col dt {
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: #999999;
  letter-spacing: 1px;
}
.p-box-meta__cmp-status-col dd {
  font-size: calc(var(--text-xxl) - .5px);
  font-weight: 600;
  color: #385890;
  font-family: var(--font-headline);
}

.p-box-meta__cmp-status-separator {
  -ms-flex-preferred-size: 30px;
      flex-basis: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* -------------------------------------
 * COLORED BOX
 *
 * Primarily used to display 
 * informational data, like an info box.
 ------------------------------------ */
.color-box {
  color: white;
  padding: var(--inner-sm) var(--inner-md);
  border-radius: 3px;
}
.color-box[color=accent] {
  background-color: #2b7cff;
}
.color-box[color=secondary] {
  background-color: #385890;
}
.color-box[color=alert] {
  background-color: #ff716b;
}

/* -------------------------------------
 * SELECT CARD BOX - P-BOX
 *
 * Card that is checked once selected.
 * 
 * A rounded checkmark icon is added
 * to the top right corner when 
 * ".is-active".
 * 
 * Extended classes outputs:
 * div.objective-card.
 * 
 ------------------------------------ */
.card-box {
  width: 100%;
  cursor: pointer;
}
.card-box:hover {
  background-color: #f7f6f4;
}
.card-box.is-active {
  background-color: #f7f6f4;
  border: 1px solid rgba(211, 211, 211, 0.5);
  position: relative;
}

/* -------------------------------------
 * DASHED BOX
 *
 * Border with dashed lines. This is 
 * used to encapsule various elements
 * rather than being used as a layout 
 * box or section.
 * 
 ------------------------------------ */
.dashed-box {
  border: 2px dashed #d0d0d0;
  display: inline-block;
}

/* -------------------------------------
 * SUPPORT CENTER
 *
 * Email support floating box
 * 
 ------------------------------------ */
.btn-support {
  position: fixed;
  left: var(--outer-md);
  bottom: var(--outer-md);
  z-index: 10;
}

.support-center {
  max-width: 800px;
  padding: var(--inner-lg);
  position: fixed;
  left: 30px;
  bottom: 110px;
  z-index: 10;
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
}
.support-center .support-center__subject {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
}
.support-center .support-center__link {
  text-align: center;
  width: 100%;
}
.support-center .support-center__link a {
  display: block;
}
.support-center .support-center__link a:not(:last-child) {
  margin-bottom: var(--outer-sm);
}

/* -------------------------------------
 * TABLE EXPANDED
 *  ROW BOX - P-SUB-BOX
 *
 * Additional options and data for e.g.
 * campaign task, users, etc. found in
 * the admin pages.
 * 
 * Usage (within mat-table):
 * .mt-table-expanded
 * - .mt-table-expanded-header.f-grid
 * -- .mt-table-expanded-header__entity-data
 * --- h2
 * --- dl //Repeat dl
 * ---- dt
 * ---- dd
 * -- .mt-table-expanded-header__entry-data
 * --- dl //Repeat dl
 * ---- dt 
 * ---- dd
 * - .mt-table-expanded-main-data.f-grid.f-span
 * -- .f-col-3 //Repeat x4
 * --- dl
 * ----- dt //Repeat dt and dd
 * ----- dd
 * - .mt-table-expanded-instructions
 * -- div //Info box
 * - .dialog-actions
 * -- .dialog-actions__sideline
 * --- button
 * -- .dialog-actions__frontline
 * --- button
 * 
 ------------------------------------ */
.mt-table-expanded {
  border: 0;
  border-radius: inherit;
  margin-left: calc(var(--inner-md) * -1);
  margin-right: calc(var(--inner-md) * -1);
  padding: 16px var(--inner-lg) var(--inner-lg) var(--inner-lg);
}
.mt-table-expanded:before {
  content: "";
  margin-left: var(--outer-lg);
  /* Down */
  content: "";
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 16px solid white;
}
.mt-table-expanded dt {
  font-size: var(--text-xs);
  color: #999999;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mt-table-expanded dd {
  font-size: var(--text-base);
}
.mt-table-expanded .mt-table-expanded-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin-bottom: var(--outer-md);
}
.mt-table-expanded .mt-table-expanded-header__entity-data {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mt-table-expanded .mt-table-expanded-header__entity-data dd, .mt-table-expanded .mt-table-expanded-header__entity-data dt {
  display: inline-block;
}
.mt-table-expanded .mt-table-expanded-header__entity-data dt:after {
  content: ": ";
}
.mt-table-expanded .mt-table-expanded-header__entry-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.mt-table-expanded .mt-table-expanded-header__entry-data dt, .mt-table-expanded .mt-table-expanded-header__entry-data dd {
  text-transform: inherit;
  display: inline-block;
}
.mt-table-expanded .mt-table-expanded-header__entry-data dt:after {
  content: ": ";
}
.mt-table-expanded .mt-table-expanded-main-data {
  margin-bottom: var(--outer-md);
}
.mt-table-expanded .mt-table-expanded-main-data dd {
  margin-bottom: var(--outer-md);
}
.mt-table-expanded .mt-table-expanded-main-data dt, .mt-table-expanded .mt-table-expanded-main-data dd {
  display: block;
  word-break: break-all;
}
.mt-table-expanded .mt-table-expanded-instructions {
  padding: var(--inner-lg);
  margin-bottom: var(--outer-md);
}
.mt-table-expanded .mt-table-expanded-instructions b {
  font-weight: 600;
}
.mt-table-expanded .mt-table-expanded-instructions mat-form-field .mat-input-element {
  font-size: var(--text-base);
}
.mt-table-expanded .mt-table-expanded-instructions button.btn-primary,
.mt-table-expanded .mt-table-expanded-instructions button.btn-secondary {
  min-width: 170px;
  height: 45px;
}
.mt-table-expanded .dialog-actions button {
  min-width: 170px;
  height: 45px;
}
.mt-table-expanded .mt-table-expanded-script .mt-table-expanded-script__entry {
  width: 100%;
  margin-bottom: var(--outer-lg);
}
.mt-table-expanded .mt-table-expanded-script dl {
  margin-right: var(--outer-md);
  display: inline-block;
}
.mt-table-expanded .mt-table-expanded-script dl dt {
  display: inline-block;
}
.mt-table-expanded .mt-table-expanded-script dl dt:after {
  content: ": ";
}
.mt-table-expanded .mt-table-expanded-script dl dd {
  display: inline-block;
}
.mt-table-expanded .mt-table-expanded-script .mt-table-expanded-script_actions button {
  display: inline-block;
  margin-right: var(--outer-md);
}
.mt-table-expanded .mt-table-expanded-script button.btn-primary,
.mt-table-expanded .mt-table-expanded-script button.btn-secondary {
  min-width: 170px;
  height: 45px;
}
.mt-table-expanded .mt-table-expanded-script .msg-script-copied {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: white;
  padding: 4px 12px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-right: 1px solid rgba(211, 211, 211, 0.5);
  border-bottom: 1px solid rgba(211, 211, 211, 0.5);
  color: #2b7cff;
}

/**
 * "CREATE CAMPAIGN" PORTLET BOXES
 *
 * Box with content, used within the create campaign pages.
 *
 * Prefix:
 * P- = PORTLET
 * CMP- = CAMPAIGN
 *
 */
/* -------------------------------------
 * FORM BOX - P-BOX
 *
 * Add input forms inside this box.
 *
 ------------------------------------ */
.form-box-row {
  margin-bottom: var(--outer-md);
}

.form-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--inner-lg);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.form-box.form-box--expanded {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-sub-box--expanded + .form-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.form-sub-box--expanded + .form-box.form-box--expanded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-box--expanded + .form-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.form-box--expanded + .form-box.form-box--expanded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-box--tab {
  position: relative;
  border-top-left-radius: 0;
}
.form-box--tab.form-box--tab-alert:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 2px;
  width: 100%;
  background-color: #ff716b;
}

.form-box[color=alert] {
  border-color: #ff716b;
  -webkit-box-shadow: inset 0 0 0 1px #ff716b;
          box-shadow: inset 0 0 0 1px #ff716b;
}

.form-box[color=accent] {
  border-color: #2b7cff;
  -webkit-box-shadow: inset 0 0 0 1px #2b7cff;
          box-shadow: inset 0 0 0 1px #2b7cff;
}

.form-box__fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.form-box__fields-stack {
  display: block;
  width: 100%;
}
.form-box__fields-stack > dl {
  margin-bottom: var(--outer-md);
}

.form-box__label dl dt svg-icon,
dl.form-box__label dt svg-icon {
  margin-left: var(--outer-xs);
  width: var(--icon-base);
  height: var(--icon-base);
}
.form-box__label dl dt svg-icon svg,
dl.form-box__label dt svg-icon svg {
  width: var(--icon-base);
  height: var(--icon-base);
}
.form-box__label dl dd,
dl.form-box__label dd {
  font-size: calc(var(--text-sm) + 1px);
}

.form-box__fields, .form-box__fields-stack {
  /*
  label.p-form-label {
    margin-right: var(--outer-sm);
    display: flex;
    align-items: center;
    justify-content: left;
  }
  */
  /**
   * LABEL + INPUT GROUP
   *
   * Align a label and input field next
   * to each other.
   *
   * Usage:
   * .form-box
   * - .form-box__fields.f-grid-f.span
   * -- .f-col-3.form-box-input-group
   * --- .form-box-input-group__label //label
   * --- .form-box-input-group__input //input field
   * */
}
.form-box__fields .form-box-input-group, .form-box__fields-stack .form-box-input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.form-box__fields .form-box-input-group .form-box-input-group__label, .form-box__fields-stack .form-box-input-group .form-box-input-group__label {
  display: inline-block;
  margin-right: var(--outer-sm);
}
.form-box__fields .form-box-input-group .form-box-input-group__input, .form-box__fields-stack .form-box-input-group .form-box-input-group__input {
  display: inline-block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.form-box--task-unit {
  padding: 0;
}

.form-box--task-unit__state-box {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: var(--inner-sm);
  color: white;
}

.form-box--task-unit[color=alert] .form-box--task-unit__state-box {
  background-color: #ff716b;
}

.form-box--task-unit[color=accent] .form-box--task-unit__state-box {
  background-color: #2b7cff;
}

.form-box--narrow {
  padding-top: var(--inner-sm);
  padding-bottom: var(--inner-sm);
}

/* -------------------------------------
 * FORM BOX SUB-OPTIONS - P-SUB-BOX
 *
 * Expanded box where additional options
 * are shown, typically below a
 * .p-box-form.
 *
 ------------------------------------ */
.form-sub-box {
  border-radius: 3px;
}

.form-sub-box.form-sub-box--expanded {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-box--expanded + .form-sub-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.form-box--expanded + .form-sub-box.form-sub-box--expanded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-sub-box--expanded + .form-sub-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.form-sub-box--expanded + .form-sub-box.form-sub-box--expanded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-sub-box[color=alert] {
  border-color: #ff716b;
  -webkit-box-shadow: inset 0 0 0 1px #ff716b;
          box-shadow: inset 0 0 0 1px #ff716b;
}

/* -------------------------------------
 * FORM PANEL - P-SUB-BOX
 *
 * The panel for displaying e.g. filter,
 * search input field above the main
 * content.
 *
 * This is used for the "create campaign"
 * tracks, where the .form-box layout is
 * used.
 *
 ------------------------------------ */
.form-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--inner-lg);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* -------------------------------------
 * OBJECTIVE CARD - P-BOX
 *
 * Modifier classes combined with
 * ".p-card-box" (select card box).
 *
 * Example:
 * div.p-card-box.p-card-box--objective
 * - .card-box--objective__content
 * -- figure
 * --- svg-icon
 * -- dl
 * --- dt
 * --- dd
 *
 ------------------------------------ */
.card-box.card-box--objective {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  height: 100%;
  padding-top: var(--inner-lg);
}
.card-box.card-box--objective .card-box--objective__content {
  height: 100%;
}
.card-box.card-box--objective mat-radio-button {
  width: 20px;
}
.card-box.card-box--objective figure > svg-icon {
  width: 64px;
  height: 64px;
  margin-top: var(--outer-lg);
  margin-bottom: var(--outer-md);
}
.card-box.card-box--objective figure > svg-icon svg {
  width: 64px;
  height: 64px;
}
.card-box.card-box--objective figure > img {
  width: 150px;
  max-height: 64px;
  margin-top: var(--outer-lg);
  margin-bottom: var(--outer-md);
}
.card-box.card-box--objective dt {
  font-size: calc(var(--text-lg) - 2px);
  font-weight: 600;
  color: #31312f;
  margin-bottom: var(--outer-xs);
  padding: 0 var(--inner-md);
  font-family: var(--font-headline);
}
.card-box.card-box--objective dd {
  color: #999999;
  font-size: var(--text-base-variant);
}
.card-box.card-box--objective .objective-adtype-container {
  max-width: 160px;
  margin: auto;
}
.card-box.card-box--objective .objective-adtype-container .objective-adtype {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--outer-sm);
  text-align: left;
}
.card-box.card-box--objective .objective-adtype-container .objective-adtype svg-icon {
  margin-right: var(--outer-sm);
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.card-box.card-box--objective .objective-adtype-container .objective-adtype svg-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.card-box.card-box--objective .objective-adtype-container .objective-adtype svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.card-box.card-box--objective .objective-adtype-container .objective-adtype:last-child {
  margin-bottom: var(--outer-lg);
}
.card-box.card-box--objective .objective-list-site {
  border-top: 1px solid rgba(211, 211, 211, 0.5);
  padding: var(--inner-md) var(--inner-lg);
  text-align: center;
  width: 100%;
}

.card-box--objective[color=alert] {
  border-color: #ff716b;
  -webkit-box-shadow: inset 0 0 0 1px #ff716b;
          box-shadow: inset 0 0 0 1px #ff716b;
}

.objective-ribbon-container {
  position: absolute;
  top: 0;
  left: 0;
}

svg-icon.objective-ribbon {
  width: 126px;
  height: 126px;
}
svg-icon.objective-ribbon svg {
  width: 126px;
  height: 126px;
}

.objective-icon {
  height: 130px;
}

/* -------------------------------------
 * INTEREST CARD - P-BOX
 *
 * Modifier classes combined with
 * ".p-card-box" (select card box).
 *
 * Example:
 * div.p-card-box.p-card-box--interest
 * - figure
 * -- svg-icon
 * - dl
 * -- dt
 * -- dd
 *
 ------------------------------------ */
.card-box.card-box--interest {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--inner-md);
}
.card-box.card-box--interest figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: var(--outer-md);
}
.card-box.card-box--interest figure > svg-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.card-box.card-box--interest figure > svg-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.card-box.card-box--interest label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  cursor: pointer;
  word-break: break-all;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.card-box.card-box--interest.is-active:after {
  content: "";
  height: calc(var(--inner-md) + 2px);
  width: 100%;
  position: absolute;
  background-color: white;
  bottom: calc(var(--inner-md) * -1 - 2px);
  left: 0;
  -webkit-box-shadow: -1px 0px 0 0px rgba(211, 211, 211, 0.5), 1px 0px 0 0px rgba(211, 211, 211, 0.5), 0px 2px 0 0px white;
          box-shadow: -1px 0px 0 0px rgba(211, 211, 211, 0.5), 1px 0px 0 0px rgba(211, 211, 211, 0.5), 0px 2px 0 0px white;
  z-index: 1;
}

/* -------------------------------------
 * AD FORMAT CARDS SLIDER
 *
 * Contains the ".card-adformats" and
 * displays them in a slideshow kind of
 * gallery.
 *
 * Usage:

 *
 ------------------------------------ */
.adformat-slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  width: 100%;
  position: relative;
}

.adformat-slider__next,
.adformat-slider__back {
  position: absolute;
  max-height: 100%;
  height: 341px;
  width: 65px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}
.adformat-slider__next mat-icon,
.adformat-slider__back mat-icon {
  fill: white;
  width: 130px;
  height: 130px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: relative;
  -webkit-filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.3));
}
.adformat-slider__next:hover.is-active,
.adformat-slider__back:hover.is-active {
  background: rgba(0, 0, 0, 0.24);
}
.adformat-slider__next.is-active,
.adformat-slider__back.is-active {
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.adformat-slider__next {
  right: 0;
}

.adformat-slider__back {
  left: 0;
}

.adformat-gallery-browse {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.adformat-gallery-browse__arrow {
  position: relative;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}
.adformat-gallery-browse__arrow mat-icon {
  fill: #212121;
  width: 40px;
  height: 40px;
}
.adformat-gallery-browse__arrow[disabled] mat-icon {
  fill: rgba(33, 33, 33, 0.4);
  opacity: 0.5;
}

.adformat-gallery-browse__preview {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* -------------------------------------
 * AD FORMAT CARDS - P-SUB-BOX
 *
 * Used in the campaign creation.
 *
 * Usage:
 *  .card-adformat
 * - .card-adformat__content
 * - .card-adformat__action
 *
 ------------------------------------ */
.card-adformat-container {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 260px;
          flex: 0 0 260px;
  padding-right: 10px;
  max-width: 260px;
}

.card-adformat {
  position: relative;
  border-radius: 3px;
  height: calc(100% - var(--outer-sm));
  width: 100%;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.card-adformat.is-active {
  border-color: #2b7cff;
}
.card-adformat.is-active .card-adformat__content {
  color: white;
  background-color: #2b7cff;
}
.card-adformat.is-active .card-adformat__content dl dd {
  color: white;
  opacity: 0.6;
  word-break: break-all;
  word-break: break-word;
}
.card-adformat.is-active .card-adformat__content .mat-checkbox-background {
  background-color: white;
}
.card-adformat.is-active .card-adformat__content .mat-checkbox-checkmark-path {
  stroke: #2b7cff !important;
}
.card-adformat .card-adformat__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: var(--inner-md);
  padding-right: var(--inner-md);
  padding-left: var(--inner-md);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.card-adformat mat-checkbox {
  margin-bottom: var(--outer-sm);
}
.card-adformat figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-bottom: var(--outer-sm);
}
.card-adformat figure img {
  max-width: 80%;
  min-width: 20%;
  height: auto;
  max-height: 100px;
}
.card-adformat .card-adformat__content dl {
  text-align: center;
}
.card-adformat .card-adformat__content dl dt {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--outer-sm);
}
.card-adformat .card-adformat__content dl dd {
  color: #999999;
  margin-bottom: var(--outer-sm);
}
.card-adformat .card-adformat__content__icon {
  margin-top: var(--inner-sm);
  margin-bottom: var(--inner-sm);
}
.card-adformat .card-adformat__action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #385890;
  color: white;
  width: 100%;
  padding: var(--inner-md);
  text-align: center;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  letter-spacing: 1.5px;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.card-adformat .card-adformat__action label {
  width: 100%;
  font-size: var(--text-sm);
}
.card-adformat .card-adformat__action label .card-adformat__price {
  color: #afbcd3;
}
.card-adformat .card-adformat__action label .card-adformat__gross-price-strike {
  position: relative;
  color: #afbcd3;
  font-size: calc(var(--text-sm) - 2px);
}
.card-adformat .card-adformat__action label .card-adformat__gross-price-strike:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}

.card-adformat.card-adformat--non-guaranteed.is-active .card-adformat__content {
  background-color: #FF7C1A;
}
.card-adformat.card-adformat--non-guaranteed .card-adformat__action {
  background-color: #CA5600;
}
.card-adformat.card-adformat--non-guaranteed.is-active {
  border-color: #FF7C1A;
}

.card-adformat mat-radio-button {
  margin-bottom: var(--outer-sm);
}
.card-adformat .mat-radio-checked .mat-radio-outer-circle {
  border-color: #fff !important;
}
.card-adformat .mat-radio-inner-circle {
  background-color: #fff !important;
}
.card-adformat .mat-radio-label-content {
  padding-left: 0;
}

/* -------------------------------------
 * UPLOAD CREATIVE CONTAINER  - P-BOX
 *
 * Add creatives to campaign section.
 *
 ------------------------------------ */
.cmp-creative-entry {
  padding-bottom: var(--outer-md);
  padding-left: var(--inner-lg);
  padding-right: var(--inner-lg);
}
.cmp-creative-entry:first-child {
  padding-top: 0;
}
.cmp-creative-entry:last-child {
  padding-bottom: 0;
  border: none;
}
.cmp-creative-entry .btn-secondary {
  min-width: 170px;
  height: 45px;
  border-color: #2b7cff;
  color: #2b7cff;
}

.cmp-creative-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 50px;
  width: 100%;
}
.cmp-creative-data figure {
  width: 85px;
  height: auto;
  margin-right: var(--outer-md);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.cmp-creative-data figure img {
  max-width: 80px;
  -ms-flex-item-align: baseline;
      align-self: baseline;
}
.cmp-creative-data dl {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.cmp-creative-data dl dt {
  font-weight: 600;
  margin-bottom: var(--outer-xxs);
}
.cmp-creative-data dl dd {
  color: #999999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-preferred-size: 245px;
      flex-basis: 245px;
}

.cmp-creative-status {
  width: 40px;
  height: 100%;
}
.cmp-creative-status .cmp-creative-status__icon {
  height: 100%;
}
.cmp-creative-status .cmp-creative-status__icon {
  position: relative;
}
.cmp-creative-status .cmp-creative-status__icon:after {
  content: "";
  display: block;
  width: calc(45px / 3);
  height: calc(45px / 2);
  border: solid #2b7cff;
  border-width: 0 4.5px 4.5px 0;
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
}

/* -------------------------------------
 * CREATIVES CARDS - P-BOX
 *
 * Used in the campaign creation.
 *
 * Usage (content is uploaded):
 * .card-creative.card-creative--{"vertical" or "horizontal"}
 * - .card-creative__uploaded
 * -- figure
 * --- card-creative__img
 * ---- img
 * --- card-creative__uploaded-actions
 * ---- button
 * ---- button
 * ---- button
 * --- figcaption //optional
 *
 * Usage (no content uploaded):
 * .card-creative //Add material CTA
 * - card-creative__add-material
 * -- .flex--center-center
 * --- button
 *
 * Usage (creative missing, on warning modal):
 * .card-creative
 * - .card-creative__missing
 * -- svg-icon
 * -- span //warning text
 *
 *
 ------------------------------------ */
.card-creative {
  border: none;
  position: relative;
  border-radius: 3px;
  max-width: 100%;
  height: 100%;
  background-color: transparent;
}
.card-creative.is-active {
  border-color: #2b7cff;
  outline: 1px solid #2b7cff;
  outline-offset: -2px;
}
.card-creative.is-active {
  position: relative;
}
.card-creative.is-active:before {
  content: "";
  background: white;
  width: 32px;
  height: 32px;
  position: absolute;
  top: -15.2380952381px;
  right: -15.2380952381px;
  border-radius: 32px;
  z-index: 1;
}
.card-creative.is-active:after {
  content: "";
  display: block;
  width: calc(32px / 3);
  height: calc(32px / 2);
  border: solid white;
  border-width: 0 3.2px 3.2px 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  top: -9.1428571429px;
  right: calc(-0.15 * 32px);
  z-index: 1;
}
.card-creative .card-creative__img-ribbon {
  position: absolute;
  height: 80px;
  width: 80px;
  z-index: 1;
  top: 0;
  left: 0;
}
.card-creative.card-creative--vertical .card-creative__img {
  height: 250px;
}
.card-creative.card-creative--horizontal .card-creative__img {
  height: 160px;
}
.card-creative.card-creative--horizontal-sm .card-creative__img {
  height: 100px;
}
.card-creative.card-creative--horizontal-sm figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.card-creative.card-creative--horizontal-sm .card-creative__uploaded figure.is-active:after {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 45%;
  left: -50px;
  z-index: 1;
  fill: dodgerblue;
  background-image: url(../../icons/s-icons/checkmark-select.svg);
  background-repeat: no-repeat;
}
.card-creative.card-creative--auto .card-creative__img {
  height: auto;
}
.card-creative figure:last-child {
  margin-bottom: 0;
}
.card-creative figure .card-creative__img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.card-creative figure img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card-creative figure .card-creative__data {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}
.card-creative figure figcaption {
  word-break: break-all;
  padding: var(--inner-sm);
}
.card-creative .card-creative__missing {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ff716b;
  font-weight: 600;
}
.card-creative .card-creative__missing svg-icon {
  width: var(--icon-xxl);
  height: var(--icon-xxl);
  margin-right: var(--outer-md);
}
.card-creative .card-creative__missing svg-icon svg {
  width: var(--icon-xxl);
  height: var(--icon-xxl);
}
.card-creative .card-creative__uploaded {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.card-creative .card-creative__uploaded figure.is-active:after {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 45%;
  left: -50px;
  z-index: 1;
  fill: dodgerblue;
  background-image: url(../../icons/s-icons/checkmark-select.svg);
  background-repeat: no-repeat;
}
.card-creative .card-creative__uploaded-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 3px;
}
.card-creative .card-creative__uploaded:hover .card-creative__uploaded-actions,
.card-creative .card-creative__uploaded.is-active .card-creative__uploaded-actions {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.card-creative .card-creative__uploaded:hover .card-creative__uploaded-actions button,
.card-creative .card-creative__uploaded.is-active .card-creative__uploaded-actions button {
  background-color: #2b7cff;
  width: 200px;
  padding: 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: white;
}
.card-creative .card-creative__uploaded:hover .card-creative__uploaded-actions button:hover,
.card-creative .card-creative__uploaded.is-active .card-creative__uploaded-actions button:hover {
  background-color: #0562fa;
}
.card-creative .card-creative__uploaded:hover .card-creative__uploaded-actions button:not(:last-of-type),
.card-creative .card-creative__uploaded.is-active .card-creative__uploaded-actions button:not(:last-of-type) {
  margin-bottom: var(--outer-xs);
}
.card-creative .card-creative__uploaded:hover .card-creative__uploaded-actions button[color=alert],
.card-creative .card-creative__uploaded.is-active .card-creative__uploaded-actions button[color=alert] {
  color: white;
  background-color: #ff716b;
}
.card-creative .card-creative__uploaded:hover .card-creative__uploaded-actions button[color=alert]:hover,
.card-creative .card-creative__uploaded.is-active .card-creative__uploaded-actions button[color=alert]:hover {
  background-color: #ff5952;
}
.card-creative .card-creative__add-material {
  border: 2px dashed #d0d0d0;
  padding: var(--outer-md);
  height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* -------------------------------------
 * CONTEXT CARD - P-BOX
 *
 * Similar to .p-card-box but doesn't
 * come with checkmark when
 * ".is-active".
 *
 *
 ------------------------------------ */
.card-box--context {
  width: 100%;
  cursor: pointer;
  margin-bottom: var(--outer-md);
  height: calc(100% - var(--outer-md));
}
.card-box--context:hover, .card-box--context.is-active {
  background-color: #f7f6f4;
}
.card-box--context mat-radio-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: var(--outer-sm);
}
.card-box--context mat-radio-button {
  width: 20px;
}
.card-box--context figure {
  text-align: center;
  mix-blend-mode: multiply;
  margin-bottom: var(--outer-md);
}
.card-box--context figure img {
  width: 140px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card-box--context figcaption {
  color: #999999;
  font-style: italic;
  min-height: 45px;
}
.card-box--context figcaption:before, .card-box--context figcaption:after {
  content: '"';
}
.card-box--context .context-card-device-icon {
  width: 25px;
  height: 25px;
  fill: #999999;
}
.card-box--context .context-card-adtype {
  color: #e6e6e6;
}
.card-box--context .context-card-adtype.is-active {
  color: #999999;
}
.card-box--context .mat-checkbox-label {
  /**
   * #HACK: to fix safari breaking text randomly
  /*
   * Example:
   * "Nyhete
   * r"
   */
  white-space: nowrap;
}

/* -------------------------------------
 * REVIEW CAMPAIGN METADATA - P-BOX
 *
 * Overview of selected campaign
 * settings.
 *
 * Usage:
 * .form-box-cmp-review
 * - .form-box-cmp-review__header
 * -- h4 //Title
 * -- a //"Ändra" link button
 * - .form-box-cmp-review__content
 *
 ------------------------------------ */
.form-box-cmp-review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: var(--inner-lg);
  height: 100%;
  overflow: auto;
  /**
   * Usage:
   * .form-box__cmp-review__content
   * - dl
   * -- div
   * --- dt
   * --- dd
   */
}
.form-box-cmp-review__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--outer-md);
}
.form-box-cmp-review__header h4, .form-box-cmp-review__header h5 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.form-box-cmp-review__content dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.form-box-cmp-review__content dl div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: var(--outer-xs);
}
.form-box-cmp-review__content dl div:last-child {
  margin-bottom: 0;
}
.form-box-cmp-review__content dl svg-icon {
  width: 15px;
  height: 15px;
  margin-right: var(--outer-sm);
}
.form-box-cmp-review__content dl svg-icon svg {
  width: 15px;
  height: 15px;
}
.form-box-cmp-review__content dl dt {
  margin-right: var(--outer-xs);
}
.form-box-cmp-review__content dl dd {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #999999;
}
.form-box-cmp-review__input-box {
  margin-top: var(--outer-sm);
  margin-left: calc(var(--inner-lg) * -1);
  margin-right: calc(var(--inner-lg) * -1);
  margin-bottom: calc(var(--inner-lg) * -1);
  padding: var(--inner-md) var(--inner-lg);
  border-bottom: none;
  border-left: none;
  border-right: none;
}

/* -------------------------------------
 * REVIEW CREATIVES/ADS - P-BOX
 *
 * Overview of created ads in the review
 * page, the last step of create
 * campaign.
 *
 * Usage:
 * .form-box-cmp-creatives
 * - .form-box-creatives-review__header
 * -- h4 //Title
 * -- a //"Ändra material" link button
 * - .form-box-creatives-review__content
 *
 ------------------------------------ */
.form-box-creatives-review {
  padding: var(--inner-lg);
}
.form-box-creatives-review .form-box-creatives-review__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.form-box-creatives-review .form-box-creatives-review__header h4, .form-box-creatives-review .form-box-creatives-review__header h5 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: var(--outer-sm);
}
/* -------------------------------------
 * EDIT CAMPAIGN - P-BOX
 *
 * The modal that shows up whe clicking
 * the edit button in the campaign list
 * page.
 *
 * Most of the elements used within
 * "edit campaign" are
 *
 ------------------------------------ */
.cmp-edit-header {
  margin-bottom: calc(var(--outer-md) + var(--outer-sm));
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cmp-edit-header h1, .cmp-edit-header h2, .cmp-edit-header h3, .cmp-edit-header h4, .cmp-edit-header h5 {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: calc(var(--outer-md) + var(--outer-sm));
}
.cmp-edit-header .cmp-status-badge {
  margin-bottom: 0.55em;
}

.cmp-edit-action {
  margin-top: -0.39em;
}
.cmp-edit-action button:not(:first-of-type) {
  margin-top: var(--outer-sm);
}
.cmp-edit-action button:last-of-type {
  margin-bottom: var(--outer-lg);
}

/* -------------------------------------
 * BUBBLE MENU TASKS ITEMS
 *
 * The content found within the task icon,
 * available in the header (top nav).
 *
 * This is only the content within the
 * bubble menu:
 * bubble-floating bubble-floating--notification-alert
 *
 * ...and not the content
 *
 ------------------------------------ */
.notification-task-item {
  padding: var(--inner-md);
}
.notification-task-item:not(:last-child) {
  margin-bottom: var(--outer-md);
}

.notification-task-item__date {
  text-transform: uppercase;
  margin-bottom: var(--outer-xxs);
  color: #999999;
  font-size: var(--text-xs);
  letter-spacing: 1px;
}

.notification-task-item__task-status {
  font-weight: 600;
}

.notification-task-item__cmp-id,
.notification-task-item__cmp-countdown {
  white-space: nowrap;
  color: #999999;
}
.notification-task-item__cmp-id:before,
.notification-task-item__cmp-countdown:before {
  content: " ";
}

/**
 * BUTTONS
 */
/* -------------------------------------
 * TOP NAV (LEFT) - MAIN BUTTONS
 *
 * Main navigation buttons found on the
 * left side of top-nav:
 * Campaigns (Kampanj),
 * Tasks (Uppgifter), and
 * Administration.
 ------------------------------------ */
nav.top-nav-list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
nav.top-nav-list li {
  margin-left: var(--outer-sm);
  padding-top: var(--inner-md);
  padding-right: var(--inner-sm);
  padding-left: var(--inner-sm);
  cursor: pointer;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
nav.top-nav-list li:first-child {
  margin-left: 0;
}
nav.top-nav-list li.is-active:after {
  content: "";
  width: calc( 100% - var(--inner-sm) * 2);
  height: 2px;
  position: absolute;
  bottom: 0;
  background-color: #2b7cff;
}
nav.top-nav-list li:hover {
  background-color: #f2f2f2;
}
nav.top-nav-list li a {
  text-decoration: none;
  color: #212121;
}

/* -------------------------------------
 * TOP NAV (CENTER) - LOGO
 *
 * Logo in the top-nav
 ------------------------------------ */
.top-nav-logo-img {
  max-width: 100%;
  width: 150px;
  height: auto;
}

/* -------------------------------------
 * TOP NAV (RIGHT) - NOTIFICATION
 *
 * Notification badge, and user icon.
 *
 * Usage:
 * .notification-alert-icon //Attributes
 * - .notification-badge
 *
 * Attributes:
 * color="alert"
 * color="secondary"
 * ...
 ------------------------------------ */
.notification-task-icon {
  position: relative;
  width: var(--icon-lg);
  height: var(--icon-lg);
  cursor: pointer;
}
.notification-task-icon.is-active {
  background-color: white;
  color: #212121;
  border-radius: 50%;
}
.notification-task-icon.is-active .notification-badge {
  -webkit-box-shadow: 0 0 0 2px white;
          box-shadow: 0 0 0 2px white;
}
.notification-task-icon svg-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.notification-task-icon svg-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* NOT USED */
.notification-user-icon {
  position: relative;
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.notification-user-icon svg-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  cursor: pointer;
}
.notification-user-icon svg-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.notification-badge {
  height: 13px;
  position: absolute;
  bottom: -4.3333333333px;
  right: -4.3333333333px;
  background-color: #2b7cff;
  font-size: calc(var(--text-xxs) + .5px);
  padding: 0 2px;
  border-radius: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
}
.notification-badge[color=alert] {
  background-color: #ff716b;
}
.notification-badge[color=secondary] {
  background-color: #385890;
}

/**
 * Usage:
 *
 * a.logout-icon
 * - svg-icon
 */
.logout-icon, .topnav-icon {
  position: relative;
  width: var(--icon-lg);
  height: var(--icon-lg);
  cursor: pointer;
}
.logout-icon svg-icon, .topnav-icon svg-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.logout-icon svg-icon svg, .topnav-icon svg-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* -------------------------------------
 * BUTTON PRIMARY & SECONDARY
 *
 * Primary button is used for the
 * suggested action that the user
 * should take to proceed.
 *
 * Secondary button is neutral with
 * less visual weight compared to the
 * primary button. E.g. two options with
 * the same weight ("disagree" - "agree")
 *
 * Attributes:
 * color="alert"
 *
 * Usage (with icon):
 * button.btn-primary.outer-b-lg
 * - div.btn__icon
 * -- svg-icon
 * - div.btn__label
 *
 * Usage (no icon):
 * button.button-primary.outer-b-lg
 * - div.button-label
 ------------------------------------ */
.btn-primary, .btn-primary-sm,
.btn-secondary, .btn-secondary-sm {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-right: var(--inner-md);
  padding-top: var(--inner-sm);
  padding-bottom: var(--inner-sm);
  padding-left: var(--inner-md);
  font-size: var(--text-base-variant);
  font-weight: 600;
  border-radius: 3px;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary, .btn-secondary {
  min-width: 250px;
  height: 55px;
}

.btn-primary-sm, .btn-secondary-sm {
  min-width: 170px;
  height: 45px;
}

.btn-primary, .btn-primary-sm {
  background-color: #2b7cff;
  color: white;
  -webkit-box-shadow: 0 2px 7px 0 rgba(120, 137, 149, 0.25);
          box-shadow: 0 2px 7px 0 rgba(120, 137, 149, 0.25);
}
.btn-primary:hover, .btn-primary-sm:hover {
  background-color: #0562fa;
}

.btn-primary[color=alert],
.btn-primary-sm[color=alert] {
  background-color: #ff716b;
}
.btn-primary[color=alert]:hover,
.btn-primary-sm[color=alert]:hover {
  background-color: #ff5952;
}

.btn-primary[color=secondary],
.btn-primary-sm[color=secondary] {
  background-color: #385890;
}
.btn-primary[color=secondary]:hover,
.btn-primary-sm[color=secondary]:hover {
  background-color: #314d7e;
}

.btn-secondary, .btn-secondary-sm {
  color: #7a7a7a;
  border: 1px solid #d0d0d0;
}
.btn-secondary:hover, .btn-secondary-sm:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-secondary[color=accent],
.btn-secondary-sm[color=accent] {
  color: #2b7cff;
}

.btn-secondary[color=alert],
.btn-secondary-sm[color=alert] {
  color: #ff716b;
}

/**
 * BUTTON WITH ICON
 *
 * Icon on left side, label right side.
 * Works with primary and secondary
 * buttons.
 */
.btn-primary .btn__icon,
.btn-primary-sm .btn__icon,
.btn-secondary .btn__icon,
.btn-secondary-sm .btn__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: var(--icon-lg);
  margin-right: var(--outer-md);
}
.btn-primary .btn__icon svg-icon,
.btn-primary-sm .btn__icon svg-icon,
.btn-secondary .btn__icon svg-icon,
.btn-secondary-sm .btn__icon svg-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  fill: white;
}
.btn-primary .btn__icon svg-icon svg,
.btn-primary-sm .btn__icon svg-icon svg,
.btn-secondary .btn__icon svg-icon svg,
.btn-secondary-sm .btn__icon svg-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.btn__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  justify-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* -------------------------------------
 * CAMPAIGN STATUS
 *
 * Campaign status indicator, used in
 * tables.
 *
 * Not really a button, but it kinda
 * looks like one.
 *
 * #TODO: Move it to an appropriate
 * partial .scss file.
 *
 * Usage:
 * div.cmp-status-badge-container //Only when alert icon is used
 * - .cmp-status-badge
 * -- .cmp-status-badge__text
 * -- .cmp-progress.cmp-progress--live
 * - svg-icon //alert icon
 *
 ------------------------------------ */
.cmp-status-badge-container {
  display: inline-block;
  position: relative;
}

.cmp-status-badge {
  position: relative;
  display: inline-block;
  border-radius: 3px;
  width: 220px;
  height: 30px;
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  letter-spacing: 1px;
  overflow: hidden;
  vertical-align: middle;
}

.cmp-status-badge__text {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  z-index: 1;
}
.cmp-status-badge__text span {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

.cmp-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
}

.cmp-progress--live {
  background: #2b7cff;
}

.cmp-status-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  position: absolute;
  top: calc(var(--icon-md) * -.5);
  right: calc(var(--icon-md) * -.5);
}

.cmp-status-badge[color=alert] {
  background-color: #ff716b;
}

.cmp-status-badge[color=accent] {
  background-color: #2b7cff;
}

.cmp-status-badge[color=secondary] {
  background-color: #385890;
}

.cmp-status-badge[color=accent-light] {
  background-color: #80dffb;
}

.cmp-status-badge[color=dark-grey] {
  background-color: #999999;
}

.cmp-status-badge[color=grey] {
  background-color: #d0d0d0;
}

.cmp-status-badge[color=stroked-grey] {
  background-color: white;
  color: #999999;
  -webkit-box-shadow: inset 0 0 0 1px #999999;
          box-shadow: inset 0 0 0 1px #999999;
}

.cmp-status-badge[color=stroked-accent] {
  background-color: white;
  color: #2b7cff;
  -webkit-box-shadow: inset 0 0 0 1px #2b7cff;
          box-shadow: inset 0 0 0 1px #2b7cff;
}

.cmp-edit-header .cmp-status-badge {
  font-size: calc(var(--text-sm) + 1px);
}

/* -------------------------------------
 * CAMPAIGN PROGRESS
 *
 * Progress of e.g. image upload.
 *
 * #TODO: Not a button.
 * Move it to an appropriate
 * partial .scss file.
 ------------------------------------ */
.progress-bar {
  height: 5px;
  width: 100%;
  background-color: rgba(84, 63, 20, 0.046875);
  display: inline-block;
}

.progress-bar__progress {
  background-color: #2b7cff;
  height: 100%;
  max-width: 100%;
}

/* -------------------------------------
 * CAMPAIGN PROGRESS
 *
 * Progress of campaign, a simple
 * progress bar.
 *
 * #TODO: Not a button.
 * Move it to an appropriate
 * partial .scss file.
 ------------------------------------ */
.cmp-progress-bar {
  height: 3px;
  background-color: rgba(84, 63, 20, 0.046875);
  margin-right: 10px;
  display: inline-block;
  width: 100px;
}

.cmp-progress-bar__progress {
  background-color: #2b7cff;
  height: 100%;
  max-width: 100%;
}

/* -------------------------------------
 * STEPPER
 *
 * Shows the steps and the progress of
 * how far the user has reached.
 *
 * Mainly used in the create campaign
 * pages.
 *
 ------------------------------------ */
.stepper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.stepper__step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.stepper__step .stepper__step__mark {
  width: 8px;
  height: 8px;
  background-color: rgba(208, 208, 208, 0.4);
  border-radius: 8px;
  margin-right: var(--outer-sm);
}
.stepper__step .stepper__step-mark {
  width: 8px;
  height: 8px;
  background-color: rgba(208, 208, 208, 0.4);
  border-radius: 8px;
  margin-right: var(--outer-sm);
}
.stepper__step .stepper__step-mark-solid {
  width: 7px;
  height: 7px;
  background-color: #999999;
  border-radius: 7px;
  margin-right: var(--outer-sm);
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.stepper__step .stepper__step-mark-solid.is-active {
  background-color: #2b7cff;
}
.stepper__step .stepper__step-icon {
  margin-right: var(--outer-sm);
}
.stepper__step .stepper__step__label {
  color: rgba(208, 208, 208, 0.4);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 1px;
  font-size: var(--text-sm);
}
.stepper__step .stepper__label {
  color: rgba(208, 208, 208, 0.4);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 1px;
  font-size: var(--text-sm);
  position: relative;
}

.stepper__separator {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.stepper__separator:before {
  content: "";
  width: calc(100% - 2 * var(--outer-md));
  background-color: rgba(208, 208, 208, 0.4);
  height: 1px;
  position: absolute;
  top: 9px;
}

.stepper__step.is-active .stepper__step__mark {
  background-color: #2b7cff;
}
.stepper__step.is-active .stepper__step__label {
  color: #999999;
}
.stepper__step.is-active .stepper__label {
  color: #999999;
}

.form-sub-box .stepper__label {
  color: #999999;
}

/* -------------------------------------
 * CHIPS
 *
 * Pill-like buttons used for e.g.
 * selected geo targets.
 *
 * Usage:
 * .chips
 * - .chips__label
 * - .chips__close-button //optional
 * -- svg-icon //Optional, info below
 *
 * By default, chips uses an inline icon
 * via a psuedo element. Comment it out
 * to add a custom svg-icon.
 *
 ------------------------------------ */
.chips {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: #2b7cff;
  color: white;
  border-radius: 3px;
  margin-right: var(--outer-xs);
  margin-bottom: var(--outer-xxs);
}

.chips__label {
  padding: var(--outer-sm) var(--outer-md);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: var(--text-sm);
}

.chips__close-button {
  position: relative;
  padding: var(--outer-sm);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-left: 1px solid #fff;
  cursor: pointer;
  width: 45px;
}
.chips__close-button svg-icon {
  fill: white;
  width: 20px;
  height: 20px;
}
.chips__close-button svg-icon svg {
  width: 20px;
  height: 20px;
}
.chips__close-button:after {
  background: url('data:image/svg+xml;utf8,<svg fill="%23fff" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"></path></svg>') no-repeat;
  width: 20px;
  height: 20px;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* -------------------------------------
 * TASK INDICATOR
 *
 * Solid colored circle to indicate the
 * status of the campaign.
 *
 * #TODO: Not a button, move to
 * appropriate file later.
 *
 ------------------------------------ */
.task-status-dot-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.task-status-dot {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background-color: black;
  display: inline-block;
  margin-right: var(--outer-sm);
}

.task-status-dot[color=material] {
  background-color: #d165b2;
}

.task-status-dot[color=client] {
  background-color: #c28d50;
}

.task-status-dot[color=campaign] {
  background-color: #239080;
}

/* -------------------------------------
 * DATA HIGHLIGHTER
 *
 * Encapsulate content with a colored
 * background.
 *
 * #TODO: Not a button.
 * Move it to an appropriate
 * partial .scss file.
 ------------------------------------ */
.data-highlight {
  padding: var(--inner-sm) var(--inner-md);
  background-color: #385890;
  color: white;
  border-radius: 3px;
}

.data-highlight--cpc-output {
  text-align: center;
  margin-right: var(--outer-md);
}

/* -------------------------------------
 * INVITE USER
 *
 * Button position for remove and
 * warning icon. Remove, to remove an
 * entry (a field). Warning, for
 * indicating incorrect email
 * formatting.
 *
 ------------------------------------ */
.user-invite__remove {
  position: absolute;
  right: -30px;
  top: 15px;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}
.user-invite__remove:hover {
  fill: #ff716b;
  opacity: 1;
}

.user-invite__warning {
  position: absolute;
  right: 15px;
  top: 16px;
  width: 20px;
  height: 20px;
  fill: orange;
}

/* -------------------------------------
 * SUPPORT
 *
 * Email support circular button,
 * floating on all pages, in the bottom
 * corner.
 *
 ------------------------------------ */
.btn-support {
  border-radius: 50%;
  background-color: #2b7cff;
  text-align: center;
  width: 70px;
  height: 70px;
  color: white;
  fill: white;
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------
 * CAMPAIGN BACK BUTTON
 *
 * Text-based back button with an icon
 * to its left, used throughout the
 * create campaign tracks.
 *
 ------------------------------------ */
.btn-cmp-back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #999999;
}
.btn-cmp-back:before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: var(--outer-xs);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0z' fill='none'/><path fill='%23999999' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/></svg>");
  background-repeat: no-repeat;
}

/* -------------------------------------
 *
 * CUSTOM MODAL DIALOG
 *
 * The custom modal dialog uses jQuery
 * to append itself to the parent
 * element "#modal-append-container".
 *
 * Usage:
 * .modal-container
 * - .modal-container__content
 *
 ------------------------------------ */
body.modal-open {
  position: fixed;
  overflow-y: scroll;
}

section#modal-area {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 12;
}
section#modal-area.is-active {
  pointer-events: auto;
}

#modal-append-container {
  height: 100%;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  left: 0;
  z-index: 11;
}

.modal-backdrop.is-active {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

.modal-container {
  overflow: auto;
  width: 100%;
  height: calc(100% - 100px);
  background-color: white;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.32);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.32);
  z-index: 1;
}

.modal-container__content {
  max-width: 1200px;
  margin: auto;
}

#creative-modal .modal-container__content {
  width: 1200px;
}

section#modal-area .dialog-action-close {
  position: fixed;
  top: 15px;
  left: calc(50% - 70px / 2);
}
section#modal-area .dialog-action-close .dialog-action-close__button {
  width: 70px;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background-color: white;
  -webkit-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.29);
          box-shadow: 0 2px 13px rgba(0, 0, 0, 0.29);
  cursor: pointer;
}
section#modal-area .dialog-action-close .dialog-action-close__button:after {
  width: 20px;
  height: 20px;
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 28 27' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g transform='translate(-706.000000, -178.000000)' fill='%23458FFF' fill-rule='nonzero'> <path d='M719.914772,187.769774 L729.857087,178.168592 L733.330379,181.765291 L723.513663,191.245183 L733.161787,200.562267 L729.688495,204.158966 L719.914772,194.720592 L710.311505,203.994359 L706.838213,200.39766 L716.315881,191.245183 L706.669621,181.929898 L710.142913,178.333199 L719.914772,187.769774 Z'></path></g> </svg>");
}

/**
 * CAMPAIGN ELEMENTS
 *
 * Includes elements used in any of the
 * "create campaign" tracks.
 *
 * Usually, these elements are non-generic
 * elements that are used for specific
 * modules.
 *
 * Prefix:
 * CMP = CAMPAIGN
 */
/* -------------------------------------
 * AUDIENCE SIZE
 *
 * Displaying reach stats of the
 * selected audience.
 *
 ------------------------------------ */
.cmp-audience-selected [class^=cmp-audience-selected__] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: var(--outer-sm);
}
.cmp-audience-selected [class^=cmp-audience-selected__]:last-child {
  margin-bottom: 0;
}
.cmp-audience-selected .cmp-audience-icon {
  margin-right: var(--outer-sm);
}
.cmp-audience-selected .cmp-audience-icon svg-icon {
  width: 15px;
  height: 15px;
}
.cmp-audience-selected .cmp-audience-icon svg-icon svg {
  width: 15px;
  height: 15px;
}
.cmp-audience-selected .cmp-audience-selected-list {
  margin-right: var(--outer-xs);
  color: #999999;
}
.cmp-audience-selected .cmp-audience-selected-list div,
.cmp-audience-selected .cmp-audience-selected-list label {
  display: inline-block;
}
.cmp-audience-selected .cmp-audience-selected-list label {
  text-transform: uppercase;
  color: #212121;
}
.cmp-audience-selected .cmp-audience-selected-list label:after {
  content: " - ";
  color: #999999;
}
.cmp-audience-selected .cmp-audience-selected-list span:not(:first-of-type):before {
  content: ", ";
}
.cmp-audience-selected .cmp-audience-selected-list span:not(:first-of-type):empty:before {
  content: "";
}
.cmp-audience-selected .cmp-audience-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.cmp-audience-selected .cmp-audience-actions button.cmp-audience-actions__remove {
  width: 16px;
  height: 16px;
  background-color: #ff716b;
  border-radius: 50%;
  position: relative;
}
.cmp-audience-selected .cmp-audience-actions button.cmp-audience-actions__remove svg-icon {
  fill: white;
  width: 11px;
  height: 11px;
}
.cmp-audience-selected .cmp-audience-actions button.cmp-audience-actions__remove svg-icon svg {
  width: 11px;
  height: 11px;
}
.cmp-audience-selected .cmp-audience-actions button.cmp-audience-actions__remove:after {
  background: url('data:image/svg+xml;utf8,<svg fill="%23fff" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"></path></svg>') no-repeat;
  width: 12px;
  height: 12px;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.cmp-audience-selected .cmp-audience-selected__geography .cmp-audience-selected-list__entry:nth-child(n+3):before {
  content: ", ";
}

.cmp-audience-reach .cmp-audience-reach__stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.cmp-audience-reach .cmp-audience-reach__bars {
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--25 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 3.8461538462%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--24 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 7.6923076923%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--23 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 11.5384615385%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--22 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 15.3846153846%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--21 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 19.2307692308%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--20 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 23.0769230769%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--19 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 26.9230769231%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--18 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 30.7692307692%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--17 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 34.6153846154%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--16 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 38.4615384615%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--15 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 42.3076923077%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--14 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 46.1538461538%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--13 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 50%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--12 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 53.8461538462%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--11 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 57.6923076923%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--10 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 61.5384615385%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--9 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 65.3846153846%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--8 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 69.2307692308%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--7 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 73.0769230769%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--6 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 76.9230769231%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--5 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 80.7692307692%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--4 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 84.6153846154%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--3 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 88.4615384615%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--2 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 92.3076923077%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars .audience-bar--1 {
  position: relative;
  display: inline-block;
  background-color: #385890;
  height: calc(100% - 96.1538461538%);
  width: 15px;
  margin-right: 5px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--25 .audience-bar--25:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--24 .audience-bar--24:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--23 .audience-bar--23:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--22 .audience-bar--22:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--21 .audience-bar--21:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--20 .audience-bar--20:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--19 .audience-bar--19:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--18 .audience-bar--18:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--17 .audience-bar--17:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--16 .audience-bar--16:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--15 .audience-bar--15:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--14 .audience-bar--14:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--13 .audience-bar--13:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--12 .audience-bar--12:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--11 .audience-bar--11:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--10 .audience-bar--10:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--9 .audience-bar--9:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--8 .audience-bar--8:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--7 .audience-bar--7:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--6 .audience-bar--6:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--5 .audience-bar--5:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--4 .audience-bar--4:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--3 .audience-bar--3:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--2 .audience-bar--2:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars.is-active--1 .audience-bar--1:before {
  content: "";
  /* Down */
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid #2b7cff;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: -30px;
}
.cmp-audience-reach .cmp-audience-reach__bars [class^=audience-bar--]:nth-last-child(-n+1) {
  margin-right: 0;
}
.cmp-audience-reach .cmp-audience-reach__bars [class^=audience-bar--]:nth-child(-n+3),
.cmp-audience-reach .cmp-audience-reach__bars [class^=audience-bar--]:nth-last-child(-n+3) {
  background-color: #ff716b;
}
.cmp-audience-reach .cmp-audience-bars-labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 0 30px;
  text-transform: uppercase;
  margin-top: 5px;
  letter-spacing: 1px;
  font-size: var(--text-xs);
  font-weight: 600;
}
.cmp-audience-reach .cmp-audience-bars-labels label {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
}

/* -------------------------------------
 * ADWORD AUDIENCE SIZE
 *
 * Displaying reach stats of the
 * selected adwords.
 *
 ------------------------------------ */
.cmp-word-audience-reach__indicator {
  text-align: center;
  display: inline-block;
  position: absolute;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 0;
}
.cmp-word-audience-reach__indicator-arrow {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 16px solid #2b7cff;
}
.cmp-word-audience-reach__bar-container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 70px;
  margin-bottom: var(--outer-xs);
}
.cmp-word-audience-reach__bar-alert, .cmp-word-audience-reach__bar-ok {
  height: 15px;
}
.cmp-word-audience-reach__bar-alert {
  background: #ff716b;
  width: 77px;
}
.cmp-word-audience-reach__bar-ok {
  background: #385890;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.cmp-word-audience-reach__axis-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -4.5%;
  margin-right: -4.5%;
}
.cmp-word-audience-reach__axis-value > span {
  margin: 0 auto;
  font-size: var(--text-base);
  color: #999999;
}

/* -------------------------------------
 * BUDGET & IMPRESSION MODULE
 * (LOCAL FLOW)
 *
 * Budget & impression module found
 * within the "DATUM & BUDGET" page.
 * The page where the user set their
 * budget.
 *
 ------------------------------------ */
.cmp-imp-budget {
  position: relative;
}

.cmp-imp-budget__label {
  margin-bottom: var(--outer-xs);
}

.cmp-imp-budget__equal-icon {
  --icon-size: 17px;
  height: calc(var(--icon-size) * 1.1);
  width: calc(var(--icon-size) * 1.5);
  position: absolute;
  right: 15px;
  top: 15px;
}
.cmp-imp-budget__equal-icon:before, .cmp-imp-budget__equal-icon:after {
  content: "";
  position: absolute;
  background-color: #385890;
  height: calc(var(--icon-size) / 2.5);
  width: 100%;
}
.cmp-imp-budget__equal-icon:before {
  top: 0;
}
.cmp-imp-budget__equal-icon:after {
  bottom: 0;
}

.cmp-imp-target-bubble {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding-top: var(--inner-md);
  padding-right: var(--inner-lg);
  padding-left: var(--inner-lg);
  margin-bottom: var(--outer-lg);
  width: 100%;
  color: white;
  background-color: #385890;
  border-radius: 3px;
}
.cmp-imp-target-bubble:before {
  /* Down */
  content: "";
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 13px solid #385890;
  position: absolute;
  bottom: -13px;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
}

.cmp-imp-target-label {
  color: white;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: var(--outer-md);
  font-weight: 600;
  letter-spacing: 1px;
}

.cmp-imp-target {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 var(--outer-lg);
}
.cmp-imp-target .cmp-imp-target__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: var(--outer-md);
  margin-bottom: var(--outer-md);
}
.cmp-imp-target .cmp-imp-target__icon {
  margin-right: var(--outer-sm);
  fill: white;
}
.cmp-imp-target .cmp-imp-target__icon svg-icon {
  vertical-align: bottom;
}

.cmp-imp-target__selected {
  font-size: var(--text-base-variant);
  font-weight: 300;
}

.cmp-imp-target__selected :nth-child(n+2):before {
  content: ", ";
}

.cmp-imp-reach {
  position: relative;
  border: 1px solid #d0d0d0;
  text-align: center;
  padding: var(--inner-md) var(--inner-lg);
  width: 100%;
}
.cmp-imp-reach:before {
  /* Down */
  content: "";
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 14px solid #d0d0d0;
  position: absolute;
  bottom: -14px;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
}
.cmp-imp-reach:after {
  /* Down */
  content: "";
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 12px solid #f7f6f4;
  position: absolute;
  bottom: -12px;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
}

/**
 * Visualize the impression by
 * displaying 10 icons representing the
 * relevant audience.
 *
 * Selecting a budget that encompasses
 * e.g. 30% of the total audience size
 * will color the 3 first icons into an
 * active state.
 *
 * Usage:
 * .cmp-imp-visualization.f-grid.f-auto
 * - div.is-active--{1 to 10}
 * -- svg-icon
 */
.cmp-imp-visualization {
  padding-left: 15px;
}
.cmp-imp-visualization div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.cmp-imp-visualization svg-icon {
  width: 25px;
  height: auto;
  fill: #c9d4e9;
}
.cmp-imp-visualization svg-icon svg {
  width: 25px;
}
.cmp-imp-visualization.is-active--1 div:nth-child(-n+1) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--2 div:nth-child(-n+2) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--3 div:nth-child(-n+3) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--4 div:nth-child(-n+4) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--5 div:nth-child(-n+5) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--6 div:nth-child(-n+6) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--7 div:nth-child(-n+7) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--8 div:nth-child(-n+8) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--9 div:nth-child(-n+9) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-active--10 div:nth-child(-n+10) svg-icon {
  fill: #385890;
}
.cmp-imp-visualization.is-inactive--1 div:nth-child(n+10) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--2 div:nth-child(n+9) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--3 div:nth-child(n+8) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--4 div:nth-child(n+7) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--5 div:nth-child(n+6) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--6 div:nth-child(n+5) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--7 div:nth-child(n+4) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--8 div:nth-child(n+3) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--9 div:nth-child(n+2) svg-icon {
  fill: #999999;
}
.cmp-imp-visualization.is-inactive--10 div:nth-child(n+1) svg-icon {
  fill: #999999;
}

.cmp-imp-visualization__spinner {
  position: absolute;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  -o-transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: #f7f6f4;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: -1;
  -webkit-box-shadow: -12px 0px 0 0px #f7f6f4;
          box-shadow: -12px 0px 0 0px #f7f6f4;
}
.cmp-imp-visualization__spinner.is-active {
  visibility: visible;
  opacity: 1;
  z-index: 9;
}
.cmp-imp-visualization__spinner svg-icon {
  width: 120px;
  height: auto;
}
.cmp-imp-visualization__spinner svg-icon svg {
  width: 120px;
  height: auto;
}

.cmp-imp-stats > [class^=cmp-imp-stats__] {
  text-align: center;
}
.cmp-imp-stats .cmp-imp-stats__label {
  position: relative;
  text-transform: uppercase;
  font-size: var(--text-xs);
  display: table;
  margin: auto;
  margin-bottom: var(--outer-xs);
  letter-spacing: 1px;
  padding-left: 10px;
  font-weight: 600;
  color: #c9d4e9;
}
.cmp-imp-stats .cmp-imp-stats__label:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: -5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #c9d4e9;
}
.cmp-imp-stats .cmp-imp-stats__box {
  display: inline-block;
  text-align: center;
  padding: var(--inner-sm) var(--inner-md);
  color: white;
  min-width: 110px;
  line-height: 1.3;
  border-radius: 3px;
  background-color: #c9d4e9;
}
.cmp-imp-stats .cmp-imp-stats__data-imp {
  font-size: var(--text-md);
  font-weight: 600;
}
.cmp-imp-stats .cmp-imp-stats__data-description,
.cmp-imp-stats .cmp-imp-stats__data-unit {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--text-xs);
  color: white;
}

.cmp-imp-stats__booked .cmp-imp-stats__label {
  color: #385890;
}
.cmp-imp-stats__booked .cmp-imp-stats__label:before {
  background-color: #385890;
}
.cmp-imp-stats__booked .cmp-imp-stats__box {
  background-color: #385890;
}
.cmp-imp-stats__booked .cmp-imp-stats__data-imp {
  font-size: var(--text-xl);
  font-weight: 600;
}
.cmp-imp-stats__booked .cmp-imp-stats__data-description,
.cmp-imp-stats__booked .cmp-imp-stats__data-imp,
.cmp-imp-stats__booked .cmp-imp-stats__data-unit {
  color: white;
}

.cmp-imp-stats__unavailable .cmp-imp-stats__label {
  color: #999999;
}
.cmp-imp-stats__unavailable .cmp-imp-stats__label:before {
  background-color: #999999;
}
.cmp-imp-stats__unavailable .cmp-imp-stats__box {
  background-color: #999999;
}
.cmp-imp-stats__unavailable .cmp-imp-stats__data-imp,
.cmp-imp-stats__unavailable .cmp-imp-stats__data-unit {
  color: white;
}

.cmp-imp-stats__box[color=alert] {
  background-color: #ff716b;
}

.cmp-context-split {
  position: relative;
  /**
   * Usage:
   * .cmp-imp-context-split
   * -figure
   * -- img
   * -- dl
   * --- dt
   * --- dd
   */
}
.cmp-context-split figure {
  display: inline-block;
  margin-right: var(--outer-lg);
}
.cmp-context-split figure img {
  max-width: 25px;
  margin-right: var(--outer-xs);
  vertical-align: middle;
}
.cmp-context-split dl {
  vertical-align: middle;
  display: inline-block;
  color: #999999;
}
.cmp-context-split dl dt,
.cmp-context-split dl dd {
  display: inline-block;
}
.cmp-context-split dl dd:before {
  content: " - ";
}

/* -------------------------------------
 * CAMPAIGN LOG
 *
 ------------------------------------ */
.cmp-log-row {
  width: var(--col-12);
  overflow-wrap: break-word;
  border-bottom: 1px solid rgba(211, 211, 211, 0.5);
  padding-bottom: var(--outer-md);
  margin-bottom: var(--outer-md);
}

.cmp-log-status-col {
  position: relative;
  padding-left: calc(var(--inner-lg));
}

.cmp-log-status-col-container {
  line-height: 1.55;
}

.cmp-log-activity:not(:last-child) {
  margin-bottom: var(--outer-sm);
}

.cmp-log-status-icon {
  position: absolute;
  top: 0.1em;
  left: calc((var(--inner-sm) + var(--inner-md)) * -1);
}

/* -------------------------------------
 * RAPPORT
 *
 *
 ------------------------------------ */
.cmp-report-stats {
  margin-top: var(--outer-lg);
  text-align: center;
  padding: 0 45px;
}
.cmp-report-stats .cmp-report-stats__label {
  position: relative;
  text-transform: uppercase;
  font-size: var(--text-sm);
  display: table;
  margin: auto;
  margin-bottom: var(--outer-xs);
  letter-spacing: 1px;
  padding-left: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.cmp-report-stats .cmp-report-stats__box {
  display: inline-block;
  text-align: center;
  padding: var(--inner-sm) var(--inner-md);
  color: white;
  min-width: 110px;
  line-height: 1.3;
  border-radius: 3px;
  background-color: #385890;
}
.cmp-report-stats .cmp-report-stats__data {
  font-size: var(--text-lg);
  font-weight: 600;
}

/* -------------------------------------
 * BUDGET DISTRIBUTION SPLIT
 * (CONTEXT FLOW)
 *
 * Elements from the "advanced" budget
 * split module.
 *
 ------------------------------------ */
.cmp-budget-split__context figure img {
  max-width: 25px;
  margin-right: var(--outer-xs);
  vertical-align: middle;
}
.cmp-budget-split__context dl {
  vertical-align: middle;
  font-size: var(--fs-md);
  display: inline-block;
}
.cmp-budget-split__context dl dt {
  display: inline-block;
}
.cmp-budget-split__context dl dd {
  display: inline-block;
  color: #999999;
}
.cmp-budget-split__context dl dd:before {
  content: " - ";
}
.cmp-budget-split__context button {
  min-width: 170px;
  height: 45px;
}

.cmp-budget-split__context-adformat {
  margin-bottom: var(--outer-lg);
  padding-left: var(--inner-lg);
}
.cmp-budget-split__context-adformat figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cmp-budget-split__context-adformat figure svg-icon {
  vertical-align: middle;
  display: inline-block;
  width: var(--icon-xxl);
  height: var(--icon-xxl);
  margin-right: var(--outer-md);
}
.cmp-budget-split__context-adformat figure svg-icon svg {
  width: var(--icon-xxl);
  height: var(--icon-xxl);
}
.cmp-budget-split__context-adformat figure img {
  vertical-align: middle;
  display: inline-block;
  width: var(--icon-xxl);
  height: var(--icon-xxl);
  margin-right: var(--outer-md);
}
.cmp-budget-split__context-adformat dl {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.cmp-budget-split__context-adformat dl dt {
  font-size: var(--fs-md);
}
.cmp-budget-split__context-adformat dl dd {
  font-size: var(--text-base);
}

/**
 * CSS mockup of devices
 *
 */
/* -------------------------------------
 * MOBILE DEVICE MOCKUP
 *
 * Mockup mobile phone to show off
 * ads in context/on site.
 *
 * Usage:
 * .mobile-mockup
 * - .mobile-mockup__screen
 * -- .mobile-mockup__content.mobile-mockup-ad--320x320
 * --- .mobile-mockup__elements
 ------------------------------------ */
.mobile-mockup {
  position: relative;
  border: 1px solid rgba(211, 211, 211, 0.5);
  padding: 15px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.03);
  display: inline-block;
}

.mobile-mockup__screen {
  position: relative;
  height: 687px;
  width: 322px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid rgba(211, 211, 211, 0.5);
  border-radius: 38px;
  /* &:hover {
     overflow: auto;
     overflow: overlay;
     -ms-overflow-style: -ms-autohiding-scrollbar;
   }*/
}

.mobile-mockup__content {
  height: 100%;
}
.mobile-mockup__content img {
  max-width: 100%;
}

.mobile-mockup__elements {
  opacity: 0;
  visibility: hidden;
  -webkit-animation: fade-in 2s forwards;
          animation: fade-in 2s forwards;
}

.mobile-mockup__top-img {
  margin-top: 15px;
}

.mobile-mockup__body-img {
  margin-top: 5px;
}

.mobile-mockup-ad-placeholder {
  height: 100%;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: var(--inner-lg);
  text-align: center;
  font-size: var(--text-base);
}
.mobile-mockup-ad-placeholder svg-icon {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
}
.mobile-mockup-ad-placeholder svg-icon svg {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
}

/* -------------------------------------
 * MOBILE DEVICE LANDSCAPE MOCKUP
 *
 * Currently the landscape mobile
 * landscape version is only used for
 * mobile take over.
 *
 ------------------------------------ */
.mobile-landscape-mockup {
  position: relative;
  border: 1px solid rgba(211, 211, 211, 0.5);
  padding: 15px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.03);
  display: inline-block;
}

.mobile-landscape-mockup__screen {
  height: 322px;
  width: 687px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid rgba(211, 211, 211, 0.5);
  border-radius: 38px;
}

.mobile-landscape-mockup__content {
  height: 100%;
}

.mobile-landscape-mockup__elements img {
  width: 100%;
  height: auto;
}

.mobile-landscape-mockup-ad-placeholder {
  height: 100%;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: var(--inner-lg);
  text-align: center;
  font-size: var(--text-md);
}
.mobile-landscape-mockup-ad-placeholder svg-icon {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
}
.mobile-landscape-mockup-ad-placeholder svg-icon svg {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
}

/* -------------------------------------
 * DESKTOP DEVICE MOCKUP
 *
 * Mockup desktop to show off
 * ads in context/on site.
 *
 ------------------------------------ */
.desktop-mockup {
  padding: var(--inner-md);
}

.desktop-mockup__screen {
  border: 20px solid #f7f6f4;
  border-radius: 15px 15px;
  -webkit-box-shadow: 0 0 0 1px rgba(211, 211, 211, 0.5);
          box-shadow: 0 0 0 1px rgba(211, 211, 211, 0.5);
  width: 740px;
  height: 435px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.desktop-mockup__screen:after {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: #f7f6f4;
  width: 870px;
  height: 25px;
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  border: 1px solid rgba(211, 211, 211, 0.5);
}
.desktop-mockup__screen .desktop-mockup__content {
  height: 100%;
  border: 1px solid rgba(211, 211, 211, 0.5);
  position: relative;
  -webkit-box-shadow: inset 0 0 15px #c1c1c1;
          box-shadow: inset 0 0 15px #c1c1c1;
  overflow: hidden;
}
.desktop-mockup__screen .desktop-mockup__page-img {
  width: 100%;
  opacity: 0.7;
}

/* -------------------------------------
 * AD SIZES - MOBILE DEVICE MOCKUP
 *
 * Use these modifiers to adjust
 * the iframe/ad size, as well as
 * accommodating its surrounding to the
 * ad.
 *
 * Usage:
 * .mobile-mockup
 * - .mobile-mockup__screen
 * -- .mobile-mockup__content.mobile-mockup-ad--320x320
 ------------------------------------ */
.mobile-mockup-ad-320x100 iframe {
  width: 320px;
  height: 100px;
}

.mobile-mockup-ad-320x160 iframe {
  width: 320px;
  height: 160px;
}

.mobile-mockup-ad-320x320 iframe {
  width: 320px;
  height: 320px;
}

.mobile-mockup-ad-530x300 iframe {
  width: 530px;
  height: 300px;
}

.mobile-mockup-ad-640x1000 iframe {
  width: 640px;
  height: 1000px;
}

.mobile-mockup-ad-530x300 iframe {
  --scale-ratio: 1.66;
  width: calc(530px / var(--scale-ratio));
  height: calc(300px / var(--scale-ratio));
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  padding: 5px;
}

.mobile-mockup-ad-640x1000 iframe {
  -webkit-transform: scale3d(0.5, 0.5, 1);
          transform: scale3d(0.5, 0.5, 1);
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
  position: absolute;
  top: 49px;
  left: 0;
}

/* -------------------------------------
 * AD SIZES - PREVIEW IN AD ENTRY
 *
 * This is the preview modal that shows
 * when clicking "förhandsgranska", to
 * preview an already created ad.
 *
 * #HACK: The added 20px on each ad size
 * is to deal with the default browser
 * margin added to the iframe ads. It's
 * more or less a workaround.
 *
 ------------------------------------ */
div[class^=desktop-demo-ad-],
div[class^=mobile-demo-ad-],
div[class^=all-demo-ad-] {
  overflow: auto;
  padding-top: var(--inner-lg);
  max-height: 60vw;
}
div[class^=desktop-demo-ad-] iframe,
div[class^=mobile-demo-ad-] iframe,
div[class^=all-demo-ad-] iframe {
  margin: auto;
  display: block;
}

.mobile-demo-ad-320x100 iframe {
  width: 340px;
  height: 120px;
}

.mobile-demo-ad-320x160 iframe {
  width: 340px;
  height: 180px;
}

.mobile-demo-ad-320x320 iframe {
  width: 340px;
  height: 340px;
}

.mobile-demo-ad-530x300 iframe {
  width: 550px;
  height: 320px;
}

.mobile-demo-ad-640x1000 iframe {
  width: 660px;
  height: 1020px;
}

.desktop-demo-ad-250x600 iframe {
  width: 270px;
  height: 620px;
}

.desktop-demo-ad-300x480 iframe {
  width: 320px;
  height: 500px;
}

.desktop-demo-ad-530x300 iframe {
  width: 550px;
  height: 320px;
}

.desktop-demo-ad-640x320 iframe {
  width: 660px;
  height: 340px;
}

.desktop-demo-ad-980x240 iframe {
  width: 1000px;
  height: 260px;
}

.desktop-demo-ad-980x120 iframe {
  width: 1000px;
  height: 140px;
}

.desktop-demo-ad-1920x1080 iframe {
  width: 1940px;
  height: 1100px;
}

.all-demo-ad-530x300 iframe {
  width: calc(530px + 20px);
  height: calc(300px + 20px);
}

/* -------------------------------------
 * AD SIZES - DESKTOP DEVICE MOCKUP
 *
 * Use these modifiers to adjust
 * the iframe/ad size, as well as
 * accommodating its surrounding to the
 * ad.
 ------------------------------------ */
.desktop-ad-container {
  position: absolute;
  -webkit-transform: scale3d(0.364, 0.364, 1);
          transform: scale3d(0.364, 0.364, 1);
  /**
   * Create dashed border using background-image.
   * Easier to maintain as background image does not add width.
   */
  background-image: -webkit-gradient(linear, left top, right top, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(60%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(60%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(60%, transparent));
  background-image: -o-linear-gradient(left, rgba(128, 128, 128, 0.2) 60%, transparent 50%), -o-linear-gradient(left, rgba(128, 128, 128, 0.2) 60%, transparent 60%), -o-linear-gradient(top, rgba(128, 128, 128, 0.2) 60%, transparent 60%), -o-linear-gradient(top, rgba(128, 128, 128, 0.2) 60%, transparent 60%);
  background-image: linear-gradient(to right, rgba(128, 128, 128, 0.2) 60%, transparent 50%), linear-gradient(to right, rgba(128, 128, 128, 0.2) 60%, transparent 60%), linear-gradient(to bottom, rgba(128, 128, 128, 0.2) 60%, transparent 60%), linear-gradient(to bottom, rgba(128, 128, 128, 0.2) 60%, transparent 60%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 30px 7px, 30px 7px, 7px 30px, 7px 30px;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
}
.desktop-ad-container #iframe {
  width: 100%;
  height: 100%;
}

.desktop-mockup-ad-250x600 .desktop-ad-container {
  width: 250px;
  height: 600px;
}

.desktop-mockup-ad-300x480 .desktop-ad-container {
  width: 300px;
  height: 480px;
}

.desktop-mockup-ad-530x300 .desktop-ad-container {
  width: 530px;
  height: 300px;
}

.desktop-mockup-ad-640x320 .desktop-ad-container {
  width: 640px;
  height: 320px;
}

.desktop-mockup-ad-980x240 .desktop-ad-container {
  width: 980px;
  height: 240px;
}

.desktop-mockup-ad-980x120 .desktop-ad-container {
  width: 980px;
  height: 120px;
}

.desktop-mockup-ad-1920x1080 .desktop-ad-container {
  width: 1920px;
  height: 1080px;
}

.desktop-mockup-ad-980x120 .desktop-ad-container {
  top: 35px;
  left: 100px;
}

.desktop-mockup-ad-250x600 .desktop-ad-container {
  top: 100px;
  left: 485px;
}

.desktop-mockup-ad-300x480 .desktop-ad-container {
  top: 100px;
  left: 365px;
}

.desktop-mockup-ad-530x300 .desktop-ad-container {
  top: 188px;
  left: 105px;
  -webkit-transform: scale3d(0.464, 0.464, 1);
          transform: scale3d(0.464, 0.464, 1);
}
.desktop-mockup-ad-530x300 .desktop-ad-container video::-webkit-media-controls-fullscreen-button {
  display: none;
}

.desktop-mockup-ad-640x320 .desktop-ad-container {
  top: 188px;
  left: 113px;
}

.desktop-mockup-ad-980x240 .desktop-ad-container {
  top: 100px;
  left: 110px;
}
.desktop-mockup-ad-980x240 .desktop-ad-container:before {
  content: "";
  -webkit-box-shadow: inset 0 0 0 210px #f9f9f7, 0px 20px 0 0 #ffffff, 0px -20px 0 0 #f9f9f7;
          box-shadow: inset 0 0 0 210px #f9f9f7, 0px 20px 0 0 #ffffff, 0px -20px 0 0 #f9f9f7;
  position: absolute;
  z-index: -1;
  width: calc(100% + 50px);
  height: 260px;
  margin-left: -25px;
}
.desktop-mockup-ad-980x240 .desktop-ad-container:after {
  content: "";
  background-image: -webkit-gradient(linear, left top, right top, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(60%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(60%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(128, 128, 128, 0.2)), color-stop(60%, transparent));
  background-image: -o-linear-gradient(left, rgba(128, 128, 128, 0.2) 60%, transparent 50%), -o-linear-gradient(left, rgba(128, 128, 128, 0.2) 60%, transparent 60%), -o-linear-gradient(top, rgba(128, 128, 128, 0.2) 60%, transparent 60%), -o-linear-gradient(top, rgba(128, 128, 128, 0.2) 60%, transparent 60%);
  background-image: linear-gradient(to right, rgba(128, 128, 128, 0.2) 60%, transparent 50%), linear-gradient(to right, rgba(128, 128, 128, 0.2) 60%, transparent 60%), linear-gradient(to bottom, rgba(128, 128, 128, 0.2) 60%, transparent 60%), linear-gradient(to bottom, rgba(128, 128, 128, 0.2) 60%, transparent 60%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 30px 7px, 30px 7px, 7px 30px, 7px 30px;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 240px;
  left: 0;
  top: 0;
}

.desktop-mockup-ad-1920x1080.desktop-mockup__content:hover {
  overflow: hidden;
}
.desktop-mockup-ad-1920x1080 .desktop-ad-container {
  top: 0;
  left: 0;
}

/* -------------------------------------
 * CPC AD SIZES - DESKTOP & MOBILE
 * DEVICE MOCKUP
 *
 * Specific sizes for the CPC ads.
 ------------------------------------ */
.mobile-cpc-mockup-headline,
.desktop-cpc-mockup-headline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: var(--outer-xl) 0 var(--outer-md) 0;
}
.mobile-cpc-mockup-headline svg-icon,
.desktop-cpc-mockup-headline svg-icon {
  opacity: 0.4;
  margin-right: var(--outer-sm);
}
.mobile-cpc-mockup-headline span,
.desktop-cpc-mockup-headline span {
  font-weight: 600;
}

.mobile-cpc-mockup-ad-1 {
  width: 380px;
  background: #e0edfe;
}
.mobile-cpc-mockup-ad-1__ribbon {
  font-size: 12px;
  background-color: #005693;
  padding: 5px;
  color: #fff;
  text-transform: uppercase;
}
.mobile-cpc-mockup-ad-1__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.mobile-cpc-mockup-ad-1__text-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px;
}
.mobile-cpc-mockup-ad-1__ad-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-top: 7px;
  word-break: break-all;
  word-break: break-word;
}
.mobile-cpc-mockup-ad-1__badge {
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  padding: 3px 4px 3px 4px;
  background-color: #005693;
  margin-right: 5px;
}
.mobile-cpc-mockup-ad-1__advertiser {
  text-transform: uppercase;
  color: #808080;
  font-size: 12px;
}
.mobile-cpc-mockup-ad-1__img {
  width: 380px;
  height: 150px;
}

.mobile-cpc-mockup-ad-2 {
  width: 380px;
  background: #e0edfe;
}
.mobile-cpc-mockup-ad-2__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mobile-cpc-mockup-ad-2__text-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px;
  padding-left: 14px;
  -webkit-box-shadow: inset 4px 0px 0 0px #005495;
          box-shadow: inset 4px 0px 0 0px #005495;
}
.mobile-cpc-mockup-ad-2__text-content_light {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px;
  padding-left: 14px;
  -webkit-box-shadow: inset 4px 0px 0 0px #458FFF;
          box-shadow: inset 4px 0px 0 0px #458FFF;
}
.mobile-cpc-mockup-ad-2__ad-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-top: 7px;
  word-break: break-all;
  word-break: break-word;
}
.mobile-cpc-mockup-ad-2__badge {
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  padding: 3px 4px 3px 4px;
  background-color: #005693;
  margin-right: 5px;
}
.mobile-cpc-mockup-ad-2__advertiser {
  text-transform: uppercase;
  color: #808080;
  font-size: 12px;
}
.mobile-cpc-mockup-ad-2__img {
  width: 125px;
  height: 95px;
}

.desktop-cpc-mockup-ad-1 {
  width: 500px;
  background: #e0edfe;
}
.desktop-cpc-mockup-ad-1__ribbon {
  font-size: 10px;
  background-color: #005693;
  padding: 3px;
  color: #fff;
  text-transform: uppercase;
}
.desktop-cpc-mockup-ad-1__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.desktop-cpc-mockup-ad-1__text-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px;
}
.desktop-cpc-mockup-ad-1__ad-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 7px;
  word-break: break-all;
  word-break: break-word;
}
.desktop-cpc-mockup-ad-1__badge {
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  padding: 3px 4px 3px 4px;
  background-color: #005693;
  margin-right: 5px;
}
.desktop-cpc-mockup-ad-1__advertiser {
  text-transform: uppercase;
  color: #808080;
  font-size: 12px;
}
.desktop-cpc-mockup-ad-1__img {
  width: 125px;
  height: 95px;
}

.desktop-cpc-mockup-ad-2 {
  width: 500px;
  background: #e0edfe;
}
.desktop-cpc-mockup-ad-2__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.desktop-cpc-mockup-ad-2__text-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px;
  padding-left: 14px;
  -webkit-box-shadow: inset 4px 0px 0 0px #005495;
          box-shadow: inset 4px 0px 0 0px #005495;
}
.desktop-cpc-mockup-ad-2__ad-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin-top: 7px;
  word-break: break-all;
  word-break: break-word;
}
.desktop-cpc-mockup-ad-2__badge {
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  padding: 3px 4px 3px 4px;
  background-color: #005693;
  margin-right: 5px;
}
.desktop-cpc-mockup-ad-2__advertiser {
  text-transform: uppercase;
  color: #808080;
  font-size: 12px;
}

.mobile-blocket-adword-ad-1 {
  width: 400px;
  background: #f6f8fa;
}
.mobile-blocket-adword-ad-1__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mobile-blocket-adword-ad-1__text-container {
  position: relative;
  margin: 16px;
  margin-left: 0;
  width: 100%;
}
.mobile-blocket-adword-ad-1__text {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  margin-top: 2px;
  word-break: break-all;
  word-break: break-word;
  color: #34689c;
}
.mobile-blocket-adword-ad-1__sub-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  word-break: break-all;
  word-break: break-word;
  color: #34689c;
}
.mobile-blocket-adword-ad-1__badge {
  font-size: 10px;
  color: #fff;
  background-color: #4181c3;
  padding: 2px 4px;
  border-radius: 2px;
  margin-right: 4px;
}
.mobile-blocket-adword-ad-1__advertiser {
  text-transform: uppercase;
  color: #696766;
  font-size: 12px;
}
.mobile-blocket-adword-ad-1__img-container {
  position: relative;
  margin: 16px;
}
.mobile-blocket-adword-ad-1__img {
  width: 120px;
  height: 90px;
  border-radius: 4px;
  display: block;
}
.mobile-blocket-adword-ad-1__img-placeholder {
  width: 120px;
  height: 90px;
  border-radius: 4px;
  display: block;
  background: url(../../../assets/img/cpc-image-a-placeholder.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e5e5e5;
}
.mobile-blocket-adword-ad-1__logo-img {
  position: absolute;
  right: 0;
  bottom: 0;
  -o-object-fit: contain;
     object-fit: contain;
  width: 230px;
  height: 46px;
  -o-object-position: right;
     object-position: right;
}

.desktop-blocket-adword-ad-1 {
  width: 100%;
  background: #f6f8fa;
}
.desktop-blocket-adword-ad-1__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.desktop-blocket-adword-ad-1__text-container {
  position: relative;
  margin: 15.4px;
  margin-left: 0;
  width: 100%;
}
.desktop-blocket-adword-ad-1__text {
  font-size: 15.4px;
  font-weight: 600;
  line-height: 1;
  margin: 7.7px 0;
  word-break: break-all;
  word-break: break-word;
  color: #4181c3;
}
.desktop-blocket-adword-ad-1__sub-text {
  display: block;
  font-size: 10.78px;
  font-weight: 600;
  line-height: 1.1011;
  margin-bottom: 7.7px;
  word-break: break-all;
  word-break: break-word;
  color: #4181c3;
}
.desktop-blocket-adword-ad-1__badge {
  font-size: 7.7px;
  color: #fff;
  text-transform: uppercase;
  padding: 2.31px 4.62px;
  background-color: #4181c3;
  margin-right: 4.62px;
}
.desktop-blocket-adword-ad-1__advertiser {
  text-transform: uppercase;
  color: #808080;
  font-size: 10.78px;
}
.desktop-blocket-adword-ad-1__img-container {
  position: relative;
  margin: 15.4px;
}
.desktop-blocket-adword-ad-1__img {
  width: 130.9px;
  height: 98.56px;
  display: block;
}
.desktop-blocket-adword-ad-1__img-placeholder {
  background: url("../../../assets/img/cpc-image-a-placeholder.png");
  width: 130.9px;
  height: 98.56px;
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e5e5e5;
}
.desktop-blocket-adword-ad-1__logo-img {
  position: absolute;
  right: 0;
  bottom: 0;
  -o-object-fit: contain;
     object-fit: contain;
  width: 115.5px;
  height: 23.1px;
  -o-object-position: right;
     object-position: right;
}

.mobile-klart-cpc-ad-1 {
  background: #faf5ea;
  width: 375px;
  height: 120px;
  font-family: "Noto Sans", sans-serif;
}
.mobile-klart-cpc-ad-1__image-section {
  float: left;
  margin: 10px;
}
.mobile-klart-cpc-ad-1__image-section img {
  width: 133px;
  height: 100px;
  display: block;
}
.mobile-klart-cpc-ad-1__text-section {
  float: left;
  width: calc(100% - 133px - 10px - 10px);
  height: 100%;
  position: relative;
  padding: 10px 0;
}
.mobile-klart-cpc-ad-1__text-container {
  position: absolute;
  width: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
.mobile-klart-cpc-ad-1__external-link {
  width: 17px;
  height: 17px;
  float: right;
  margin-right: 10px;
}
.mobile-klart-cpc-ad-1__headline {
  overflow-wrap: break-word;
  padding-right: 10px;
  line-height: 1;
  font-weight: 700;
  font-size: 15px;
  color: #292929;
}
.mobile-klart-cpc-ad-1__advertiser {
  position: absolute;
  top: -15px;
  font-size: 10px;
  padding-right: 10px;
  overflow: hidden;
  max-height: 13px;
  color: #757575;
}

.mobile-klart-cpc-ad-1 {
  background: #faf5ea;
  width: 375px;
  height: 120px;
  font-family: "Noto Sans", sans-serif;
}
.mobile-klart-cpc-ad-1__image-section {
  float: left;
  margin: 10px;
}
.mobile-klart-cpc-ad-1__image {
  width: 133px;
  height: 100px;
  display: block;
}
.mobile-klart-cpc-ad-1__text-section {
  float: left;
  width: calc(100% - 133px - 10px - 10px);
  height: 100%;
  position: relative;
  padding: 10px 0;
}
.mobile-klart-cpc-ad-1__text-container {
  position: absolute;
  width: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
.mobile-klart-cpc-ad-1__external-link {
  width: 17px;
  height: 17px;
  float: right;
  margin-right: 10px;
}
.mobile-klart-cpc-ad-1__headline {
  overflow-wrap: break-word;
  padding-right: 10px;
  line-height: 1;
  font-weight: 700;
  font-size: 15px;
  color: #292929;
}
.mobile-klart-cpc-ad-1__advertiser {
  position: absolute;
  top: -15px;
  font-size: 10px;
  padding-right: 10px;
  overflow: hidden;
  max-height: 13px;
  color: #757575;
}

.desktop-klart-cpc-ad-1 {
  background: #faf5ea;
  width: 502.32px;
  height: 62.1px;
  font-family: "Noto Sans", sans-serif;
}
.desktop-klart-cpc-ad-1__image-section {
  float: left;
  margin: 6.9px;
  margin-right: 13.8px;
}
.desktop-klart-cpc-ad-1__image {
  width: 64.17px;
  height: 48.3px;
  display: block;
}
.desktop-klart-cpc-ad-1__text-section {
  float: left;
  width: calc(100% - (93px * 0.69) - (10px * 0.69) - (20px * 0.69));
  height: 100%;
  position: relative;
  padding: 6.9px 0;
}
.desktop-klart-cpc-ad-1__text-container {
  position: absolute;
  width: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
}
.desktop-klart-cpc-ad-1__external-link {
  width: 11.73px;
  height: 11.73px;
  float: right;
  margin-right: 6.9px;
}
.desktop-klart-cpc-ad-1__headline {
  overflow-wrap: break-word;
  padding-right: 6.9px;
  line-height: 1;
  font-weight: 700;
  font-size: 10.35px;
  color: #292929;
}
.desktop-klart-cpc-ad-1__advertiser {
  position: absolute;
  top: -10.35px;
  font-size: 6.9px;
  padding-right: 6.9px;
  overflow: hidden;
  max-height: 8.97px;
  color: #757575;
}

/* -------------------------------------
 * 7. PLUGINS
 * 
 * Third-party plugins and frameworks. 
 ------------------------------------ */
/*@import url("../../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css");*/
/**
 * MATERIAL DESIGN OVERRIDE CLASSES
 *
 * https://material.angular.io
 *
 * Material's prefix = "mat-"
 * Our custom mat classes = "mt-"
 *
 * Material changed all their prefix from
 * "md" to "mat" and provided a tool to
 * search and replace. The differing
 * prefix is to avoid this kind of issue
 * in the future.
 */
/* -------------------------------------
 * GENERAL INPUT FIELD
 *
 * Adjusting mat's input fields,
 * primarily the parts that affect
 * in a global scope.
 *
 ------------------------------------ */
.mat-input-element {
  font-family: var(--font-primary) !important;
}

mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.mat-form-field-appearance-outline .mat-form-field-prefix, .mat-form-field-appearance-outline .mat-form-field-suffix {
  top: 0px !important;
}

.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
  top: 6px;
  right: -10px;
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: #2b7cff;
}

.mt-hint-position .mat-form-field-subscript-wrapper {
  position: static;
}

.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick,
.mat-error {
  color: #ff716b;
}

/* -------------------------------------
 * OUTLINE INPUT FIELD
 *
 * Mat's outlined input fields.
 *
 * In case the classes clashes with
 * other type of mat input fields,
 * use attribute specifier:
 * [appearance="outline"]
 ------------------------------------ */
mat-form-field.mat-form-field-appearance-outline .mat-form-field-infix {
  border-top-width: 5px;
}

.mat-form-field-outline {
  background-color: white;
  border-radius: 5px;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  width: initial;
  min-width: 50px;
}
.mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin: 0;
}
.mat-form-field-appearance-outline .mat-form-field-wrapper .mat-form-field-flex {
  padding-left: var(--inner-md);
  padding-right: var(--inner-md);
}
.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: lightgray;
  min-height: 55px;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: #2b7cff;
}
.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper {
  top: 55px;
  padding: 0 !important;
  margin-top: 5px;
}
.mat-form-field-appearance-outline .mat-select-arrow-wrapper {
  -webkit-transform: translate(6px, 2px) !important;
      -ms-transform: translate(6px, 2px) !important;
          transform: translate(6px, 2px) !important;
}
.mat-form-field-appearance-outline .mat-select-arrow-wrapper .mat-select-arrow {
  color: #212121;
}

.mt-input-sm .mat-form-field-infix, .mt-input-sm .mat-input-element {
  padding: 0.11em 0 0.11em 0 !important;
}
.mt-input-sm .mat-form-field-outline {
  top: 0 !important;
}
.mt-input-sm .mat-form-field-flex {
  height: 35px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0 !important;
}
.mt-input-sm .mat-select {
  margin-top: 0 !important;
}
.mt-input-sm .mat-form-field-appearance-outline .mat-form-field-suffix,
.mt-input-sm .mat-form-field-suffix {
  top: 0em !important;
}
.mt-input-sm .mat-form-field-infix {
  border-top-width: 1px !important;
}
.mt-input-sm .mat-form-field-outline {
  height: 35px;
}
.mt-input-sm .mat-form-field-outline-thick > div {
  max-height: 35px;
}

/* -------------------------------------
 * OUTLINE INPUT COMBO BOX (SELECT)
 *
 * Adding a caret to an input field to
 * replicate the look of a combobox.
 *
 * This is made to work with mat's
 * outline input field.
 ------------------------------------ */
mat-form-field.mt-input-caret:after {
  position: absolute;
  content: "";
  top: 25px;
  right: 15px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid;
  margin: 0 4px;
  pointer-events: none;
  cursor: pointer;
}

mat-form-field.mt-input-caret {
  cursor: pointer;
}
mat-form-field.mt-input-caret .mat-input-element {
  padding-right: 25px;
  cursor: pointer;
}

/* -------------------------------------
 * CHECKBOX
 *
 * Checkbox
 ------------------------------------ */
/**
 * Regular checkboxes
 */
.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {
  background-color: rgba(43, 124, 255, 0.1);
}

.mat-checkbox-inner-container {
  background-color: white;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #2b7cff;
}

.mat-paginator-range-label, .mat-paginator-page-size-label, .mat-menu-item {
  font-family: var(--font-primary);
}

.mat-checkbox-label, .mat-option-text, .mat-select-value, .input-btn-wrapper, .mat-radio-label-content, .mat-select {
  font-size: var(--text-base);
  font-family: var(--font-primary);
}

.mat-checkbox-label {
  font-weight: 400;
  word-break: break-all;
  word-break: break-word;
  max-width: 100%;
}

.mat-checkbox-layout {
  white-space: inherit !important;
}

.mt-checkbox-vertical .mat-checkbox:hover .mat-checkbox-layout {
  background: rgba(0, 0, 0, 0.04);
}
.mt-checkbox-vertical .mat-checkbox-layout {
  width: 100%;
  padding: var(--inner-sm) var(--inner-md);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.mt-checkbox-vertical .mat-checkbox-label {
  margin-top: -4px;
}
.mt-checkbox-vertical .mat-checkbox-inner-container {
  margin: 0;
  margin-right: 8px;
}

.mt-checkbox-vertical--indent .mat-checkbox-layout {
  padding-left: var(--inner-lg);
}

.mt-checkbox-vertical--padding-tb-xs .mat-checkbox-layout {
  padding: var(--inner-xs) var(--inner-md);
}

/**
 * Mat menu checkboxes
 */
.mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
  background-color: #2b7cff;
}

.mat-pseudo-checkbox-checked::after {
  top: 3px;
  left: 1px;
  width: 14px;
  height: 7px;
}

div.mat-checkbox-mixedmark {
  width: calc(100% - 8px);
}

.mt-checkbox-custom-spacing .mat-checkbox-inner-container {
  margin-right: var(--outer-lg);
}

/* -------------------------------------
 * TABS
 *
 * Mat's tab groups.
 ------------------------------------ */
.mat-tab-label {
  font-size: var(--text-md);
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
  color: #212121;
  opacity: 1 !important;
  letter-spacing: 1px;
}

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: #2b7cff;
}

.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  color: #212121;
}

.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled), .mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled) {
  background-color: rgba(43, 124, 255, 0.1);
}

/* -------------------------------------
 * MAT RADIO BUTTON
 *
 * Mat's radio buttons
 ------------------------------------ */
.mat-radio-label {
  white-space: inherit !important;
  font-size: inherit !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #2b7cff;
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: #2b7cff;
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  background-color: rgba(43, 124, 255, 0.1);
}

.mt-label-icon .mat-radio-label-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mt-label-icon .mat-radio-label-content svg-icon {
  margin-right: var(--outer-sm);
}

.mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
  background-color: #2b7cff;
}

/* -------------------------------------
 * MAT TABLE
 *
 * Mat regular table (not flexbox ver.).
 ------------------------------------ */
.mt-table-container.mt-table-no-padding {
  padding-left: 0;
  padding-right: 0;
}
.mt-table-container.mt-table-no-padding .mat-table td.mat-cell:first-of-type,
.mt-table-container.mt-table-no-padding .mat-table td.mat-footer-cell:first-of-type,
.mt-table-container.mt-table-no-padding .mat-table th.mat-header-cell:first-of-type {
  padding-left: calc(var(--inner-lg) + var(--inner-md)) !important;
}
.mt-table-container.mt-table-no-padding .mat-table td.mat-cell:last-of-type,
.mt-table-container.mt-table-no-padding .mat-table td.mat-footer-cell:last-of-type,
.mt-table-container.mt-table-no-padding .mat-table th.mat-header-cell:last-of-type {
  padding-right: calc(var(--inner-lg) + var(--inner-md)) !important;
}
.mt-table-container.mt-table-no-padding td:first-of-type,
.mt-table-container.mt-table-no-padding td:last-of-type,
.mt-table-container.mt-table-no-padding th:first-of-type,
.mt-table-container.mt-table-no-padding th:last-of-type {
  position: relative;
  border: 0;
}
.mt-table-container.mt-table-no-padding td.mat-cell:first-of-type:before,
.mt-table-container.mt-table-no-padding th.mat-header-cell:first-of-type:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  height: 1px;
  width: calc(100% - var(--inner-md));
}
.mt-table-container.mt-table-no-padding td.mat-cell:last-of-type:before,
.mt-table-container.mt-table-no-padding th.mat-header-cell:last-of-type:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: calc(100% - var(--inner-md));
}
.mt-table-container .mat-paginator-page-size-select .mat-select-value {
  font-size: var(--text-sm);
}

.mt-table-container.mt-table-no-padding tr.mt-table-element-row--expandable td:not(:first-of-type):not(:last-of-type):before {
  content: "";
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
}
.mt-table-container.mt-table-no-padding tr.mt-table-element-row:last-of-type td:not(:first-of-type):not(:last-of-type):before {
  content: "";
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
}
.mt-table-container.mt-table-no-padding tr.mt-table-element-row--expandable td:not(:first-of-type):not(:last-of-type),
.mt-table-container.mt-table-no-padding tr.mt-table-element-row:last-of-type td:not(:first-of-type):not(:last-of-type) {
  position: relative;
}

.mt-table-container {
  padding-left: var(--inner-md);
  padding-right: var(--inner-md);
  border: 1px solid rgba(211, 211, 211, 0.5);
  background: white;
  /**
   * Force no padding for the expandable row, as this
   * row should remain invisible until clicked.
   * The padding would otherwise add excess height
   * between each row.
   */
}
.mt-table-container table, .mt-table-container th, .mt-table-container .mat-sort-header-container {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.mt-table-container thead th {
  padding-top: var(--inner-lg);
  padding-bottom: var(--inner-lg);
}
.mt-table-container .mat-header-cell {
  padding-left: 2px;
  padding-right: 2px;
}
.mt-table-container tbody td {
  padding-top: var(--inner-sm) !important;
  padding-right: var(--space-xxs) !important;
  padding-bottom: var(--inner-sm) !important;
  padding-left: var(--space-xxs) !important;
  max-width: 230px;
  word-break: break-all;
  word-break: break-word;
  word-wrap: break-word;
}
.mt-table-container .mt-table-element-row + tr td {
  padding-top: 0;
  padding-bottom: 0;
}
.mt-table-container .mat-header-cell, .mt-table-container .mat-sort-header-container button {
  color: #212121;
  text-transform: uppercase;
  font-weight: 600;
  font-size: calc(var(--text-sm) - .75px);
  letter-spacing: 1px;
}
.mt-table-container tr.mt-table-detail-row td.mat-column-expandedDetail {
  padding: 0 !important;
}
.mt-table-container tr.mt-table-detail-row td.mat-column-expandedDetail {
  border-bottom-color: transparent;
}
.mt-table-container .mt-table-element-row.mt-table-expanded-row td {
  border-bottom-color: transparent;
}

/**
 * Page "Rapport"'s expanded table row.
 * Only applied for "Rapport".
 * When expanded row is expanded, make border bottom visible
 * and include paddding.
 */
.mt-table-container.mt-table-container--report .mt-table-expanded-row + tr.mt-table-detail-row td.mat-column-expandedDetail {
  border-bottom-color: rgba(211, 211, 211, 0.5);
  padding-bottom: var(--inner-lg) !important;
  padding-top: var(--inner-lg) !important;
  background-color: #f7f6f4;
}

.mat-table td.mat-cell:first-of-type,
.mat-table td.mat-footer-cell:first-of-type,
.mat-table th.mat-header-cell:first-of-type {
  padding-left: 0;
}
.mat-table td.mat-cell:last-of-type,
.mat-table td.mat-footer-cell:last-of-type,
.mat-table th.mat-header-cell:last-of-type {
  padding-right: 0;
}

.mat-cell, .mat-footer-cell {
  font-size: calc(var(--text-sm) - .75px);
}

/* -------------------------------------
 *
 * MAT TABLE MODIFIERS
 *
 * Additional classes to modify the look
 * of the material table.
 *
 * Combine with parent container
 * ".mt-table-container"
 *
 ------------------------------------ */
.mt-table-container.mt-table-container--side-highlight tr td:first-of-type,
.mt-table-container.mt-table-container--side-highlight tr th:first-of-type {
  padding-left: 33px !important;
}
.mt-table-container.mt-table-container--side-highlight .mt-table-detail-row {
  display: none;
}
.mt-table-container.mt-table-container--side-highlight .mt-table-expanded-row + .mt-table-detail-row {
  display: table-row;
}
.mt-table-container.mt-table-container--side-highlight tr.mt-table-detail-row td:first-of-type {
  padding: 0 !important;
}
.mt-table-container.mt-table-container--side-highlight tr:hover td:first-of-type,
.mt-table-container.mt-table-container--side-highlight tr:hover td:last-of-type,
.mt-table-container.mt-table-container--side-highlight .mt-table-element-sub-row td:first-of-type,
.mt-table-container.mt-table-container--side-highlight .mt-table-element-sub-row :last-of-type {
  position: relative;
}
.mt-table-container.mt-table-container--side-highlight tr:hover td:first-of-type:before,
.mt-table-container.mt-table-container--side-highlight .mt-table-element-sub-row td:first-of-type:before {
  content: "";
  width: var(--inner-md);
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: calc(var(--inner-md) * -1);
  background: #f7f6f4;
}
.mt-table-container.mt-table-container--side-highlight tr:hover td:last-of-type:before,
.mt-table-container.mt-table-container--side-highlight .mt-table-element-sub-row td:last-of-type:before {
  content: "";
  width: var(--inner-md);
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  right: calc(var(--inner-md) * -1);
  background: #f7f6f4;
}
.mt-table-container.mt-table-container--side-highlight tr:hover.mt-table-expanded-row td:last-of-type:before,
.mt-table-container.mt-table-container--side-highlight tr:hover.mt-table-expanded-row td:first-of-type:before,
.mt-table-container.mt-table-container--side-highlight tr.mt-table-detail-row td:first-of-type:before,
.mt-table-container.mt-table-container--side-highlight tr.mt-table-detail-row td:last-of-type:before,
.mt-table-container.mt-table-container--side-highlight td:first-of-type:before,
.mt-table-container.mt-table-container--side-highlight td:last-of-type:before {
  content: none;
}

/* -------------------------------------
 * MAT TABLE EXPANDABLE ROWS
 * (DEFAULT PROPERTIES)
 *
 * The core styling for material's
 * table.
 *
 * Classes starting with "mat-" is
 * material's native classes while
 * "mt-" are custom classes.
 *
 ------------------------------------ */
tr.mt-table-detail-row {
  height: 0 !important;
}

.mt-table-element-row--expandable {
  cursor: pointer;
}

tr.mt-table-element-row:not(.mt-table-expanded-row):hover {
  background: #f7f6f4;
}

tr.mt-table-element-sub-row.mt-table-element-row:not(.mt-table-expanded-row):hover {
  background: rgba(34, 34, 34, 0.1);
}

tr.mt-table-element-sub-row.mt-table-element-row:not(.mt-table-expanded-row):hover td:first-of-type:before {
  content: "";
  width: var(--inner-md);
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: calc(var(--inner-md) * -1);
  background: #e8e8e8;
  z-index: 1;
}
tr.mt-table-element-sub-row.mt-table-element-row:not(.mt-table-expanded-row):hover td:last-of-type:before {
  content: "";
  width: var(--inner-md);
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  right: calc(var(--inner-md) * -1);
  background: #e8e8e8;
  z-index: 1;
}

tr.mt-table-element-row:not(.mt-table-expanded-row):active {
  background: #f7f6f4;
}

.mt-table-expanded-row .mt-table-element-row td {
  border-bottom-width: 0 !important;
}

.mt-table-element-detail {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mt-table-element-description {
  /* padding: 16px; */
}

.mat-cell, .mat-footer-cell {
  color: #212121;
}

mat-footer-row, mat-header-row, mat-row, td.mat-cell, td.mat-footer-cell, th.mat-header-cell {
  border-bottom-color: rgba(211, 211, 211, 0.5);
}

th.mat-header-cell button {
  font-family: var(--font-primary) !important;
}

.mat-column-expandedDetail {
  border-width: 10px;
}

.mt-table-container.mt-table-no-padding .mt-table-element-row--expandable:last-of-type {
  border-bottom: 10px solid red;
}
.mt-table-container.mt-table-no-padding .mt-table-detail-row {
  padding-left: 0;
  padding-right: 0;
}
.mt-table-container.mt-table-no-padding .mt-table-detail-row td.mat-cell:first-of-type,
.mt-table-container.mt-table-no-padding .mt-table-detail-row td.mat-footer-cell:first-of-type,
.mt-table-container.mt-table-no-padding .mt-table-detail-row th.mat-header-cell:first-of-type {
  padding-left: calc(var(--inner-md)) !important;
}
.mt-table-container.mt-table-no-padding .mt-table-detail-row td.mat-cell:last-of-type,
.mt-table-container.mt-table-no-padding .mt-table-detail-row td.mat-footer-cell:last-of-type,
.mt-table-container.mt-table-no-padding .mt-table-detail-row th.mat-header-cell:last-of-type {
  padding-right: calc(var(--inner-md)) !important;
}
.mt-table-container.mt-table-no-padding .mt-table-detail-row td:first-of-type,
.mt-table-container.mt-table-no-padding .mt-table-detail-row td:last-of-type,
.mt-table-container.mt-table-no-padding .mt-table-detail-row th:first-of-type,
.mt-table-container.mt-table-no-padding .mt-table-detail-row th:last-of-type {
  position: inherit;
}
.mt-table-container.mt-table-no-padding .mt-table-detail-row td.mat-cell:first-of-type:before,
.mt-table-container.mt-table-no-padding .mt-table-detail-row th.mat-header-cell:first-of-type:before {
  display: none;
}
.mt-table-container.mt-table-no-padding .mt-table-detail-row td.mat-cell:last-of-type:before,
.mt-table-container.mt-table-no-padding .mt-table-detail-row th.mat-header-cell:last-of-type:before {
  display: none;
}

/* -------------------------------------
 *
 * CUSTOM SLIDER,
 * BUDGET & IMPRESSION
 *
 * Used in create campaign, the
 * budget & impression module.
 *
 * Usage:
 * .mt-slider-container--imp
 * - mat-slider
 * - .mt-slider-unavailable-slot-container
 * -- .mt-slider-unavailable-slot
 *
 ------------------------------------ */
.mt-slider-container--imp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mt-slider-container--imp .mat-slider {
  padding: 0 !important;
}
.mt-slider-container--imp .mat-slider-horizontal .mat-slider-wrapper {
  right: 0 !important;
  left: 0 !important;
}
.mt-slider-container--imp .mat-slider-thumb {
  height: 30px !important;
  width: 30px !important;
  right: -15px !important;
  bottom: -15px !important;
  -webkit-box-shadow: 0 0 0 5px transparent;
          box-shadow: 0 0 0 5px transparent;
}
.mt-slider-container--imp .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  background-color: #385890;
}
.mt-slider-container--imp .mat-accent .mat-slider-thumb, .mt-slider-container--imp .mat-accent .mat-slider-thumb-label, .mt-slider-container--imp .mat-accent .mat-slider-track-fill {
  background-color: #385890;
}
.mt-slider-container--imp .mat-slider-track-background {
  background-color: #c9d4e9 !important;
}
.mt-slider-container--imp .mat-accent .mat-slider-track-fill {
  background-color: #385890;
}
.mt-slider-container--imp .mat-slider:hover .mat-slider-track-background {
  background-color: #c9d4e9;
}
.mt-slider-container--imp .mat-slider-horizontal .mat-slider-track-wrapper,
.mt-slider-container--imp .mat-slider-horizontal .mat-slider-track-background,
.mt-slider-container--imp .mat-slider-horizontal .mat-slider-track-fill {
  height: 5px !important;
}
.mt-slider-container--imp .mt-slider-unavailable-imp-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-top: 3px;
}
.mt-slider-container--imp .mt-slider-unavailable-imp-container .mt-slider-unavailable-imp {
  background-color: #999999;
  height: 5px;
  width: 100%;
}

/* -------------------------------------
 *
 * CUSTOM MAT DIALOG
 *
 * Gives the mat dialog a new style and
 * structure.
 *
 * Mat generates "mat-dialog-container.mat-dialog-container"
 * and ".modal-size--{md -> lg}" is
 * added in manually to [panelClass]
 * of the modal.
 *
 * Usage:
 * mat-dialog-container.mat-dialog-container.modal-size--{md -> lg}
 * - .modal-action-close
 * -- .modal-action-close__button
 * - .modal-height-control
 * -- .mt-modal-container
 * --- .mt-modal-container__content
 * ---- div // To return to "display:block"
 *
 ------------------------------------ */
mat-dialog-container {
  padding: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mt-modal-container {
  overflow: auto;
  max-height: calc(100vh - 100px);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: var(--inner-xl);
}

.mt-modal-container--full-height {
  height: calc(100vh - 100px);
}

.modal-header {
  text-align: center;
  margin-bottom: var(--outer-lg);
}
.modal-header svg-icon.modal-header-icon {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
  margin-bottom: var(--outer-md);
}
.modal-header svg-icon.modal-header-icon svg {
  width: var(--icon-xxxxl);
  height: var(--icon-xxxxl);
}
.modal-header h3, .modal-header h4 {
  max-width: 450px;
  margin-bottom: var(--outer-md);
  margin-left: auto;
  margin-right: auto;
}
.modal-header p {
  max-width: 550px;
  margin-bottom: var(--outer-sm);
  margin-left: auto;
  margin-right: auto;
}

.modal-header-plain {
  widht: 100%;
}

/* -------------------------------------
 *
 * CUSTOM MAT DIALOG SIZES
 *
 * Dialog sizes
 *
 ------------------------------------ */
.modal-size-xs .modal-height-control,
.modal-size-sm .modal-height-control,
.modal-size-md .modal-height-control,
.modal-size-lg .modal-height-control,
.modal-size-auto .modal-height-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 80vh;
  width: 100%;
}
.modal-size-xs .mt-modal-container__content p,
.modal-size-sm .mt-modal-container__content p,
.modal-size-md .mt-modal-container__content p,
.modal-size-lg .mt-modal-container__content p,
.modal-size-auto .mt-modal-container__content p {
  margin-bottom: var(--outer-sm);
}
.modal-size-xs mat-dialog-container,
.modal-size-sm mat-dialog-container,
.modal-size-md mat-dialog-container,
.modal-size-lg mat-dialog-container,
.modal-size-auto mat-dialog-container {
  padding: var(--inner-xl);
}

.modal-size-auto {
  max-width: 90% !important;
  max-height: calc(100% - 100px);
  margin-bottom: -100px;
}

.modal-size-xl {
  width: 100%;
  max-width: 100% !important;
  height: calc(100% - 100px);
  margin-bottom: -100px;
}

.modal-size-xl .mt-modal-container__content {
  width: 1200px;
  margin: 0 auto;
}

.modal-size-lg {
  width: 1000px;
  min-height: 350px;
  height: auto;
}

.modal-size-md {
  width: 800px;
  min-height: 150px;
  height: auto;
}

.modal-size-sm {
  width: 550px;
  min-height: 150px;
  height: auto;
}

.modal-size-xs {
  width: 400px;
  min-height: 150px;
  height: auto;
}

.modal-size-xs mat-dialog-container,
.modal-size-sm mat-dialog-container,
.modal-size-md mat-dialog-container,
.modal-size-lg mat-dialog-container,
.modal-size-xl mat-dialog-container,
.modal-size-auto mat-dialog-container {
  position: relative;
  overflow: initial;
}
.modal-size-xs .dialog-action-close,
.modal-size-sm .dialog-action-close,
.modal-size-md .dialog-action-close,
.modal-size-lg .dialog-action-close,
.modal-size-xl .dialog-action-close,
.modal-size-auto .dialog-action-close {
  position: absolute;
  top: calc(-70px - 15px);
  left: calc(50% - 70px / 2);
}
.modal-size-xs .dialog-action-close .dialog-action-close__button,
.modal-size-sm .dialog-action-close .dialog-action-close__button,
.modal-size-md .dialog-action-close .dialog-action-close__button,
.modal-size-lg .dialog-action-close .dialog-action-close__button,
.modal-size-xl .dialog-action-close .dialog-action-close__button,
.modal-size-auto .dialog-action-close .dialog-action-close__button {
  width: 70px;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background-color: white;
  -webkit-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.29);
          box-shadow: 0 2px 13px rgba(0, 0, 0, 0.29);
  cursor: pointer;
}
.modal-size-xs .dialog-action-close .dialog-action-close__button:after,
.modal-size-sm .dialog-action-close .dialog-action-close__button:after,
.modal-size-md .dialog-action-close .dialog-action-close__button:after,
.modal-size-lg .dialog-action-close .dialog-action-close__button:after,
.modal-size-xl .dialog-action-close .dialog-action-close__button:after,
.modal-size-auto .dialog-action-close .dialog-action-close__button:after {
  width: 20px;
  height: 20px;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 28 27' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g transform='translate(-706.000000, -178.000000)' fill='%23458FFF' fill-rule='nonzero'> <path d='M719.914772,187.769774 L729.857087,178.168592 L733.330379,181.765291 L723.513663,191.245183 L733.161787,200.562267 L729.688495,204.158966 L719.914772,194.720592 L710.311505,203.994359 L706.838213,200.39766 L716.315881,191.245183 L706.669621,181.929898 L710.142913,178.333199 L719.914772,187.769774 Z'></path></g> </svg>");
  background-repeat: no-repeat;
}

/* -------------------------------------
 *
 * CUSTOM MAT DIALOG TYPES
 *
 * Dialog layout customized for specific
 * mat dialogs.
 *
 * These are used as modifier classes.
 *
 * Usage:
 * .mt-modal-container.modal-creative-later
 *
 ------------------------------------ */
/**
 * Add material later dialog
 *
 * Shown when the users has not uploaded
 * material to all creative/ad entries
 * within the campign tracks.
 */
.modal-creative-later .modal-warning-icon {
  width: --icon-xxxl;
  height: --icon-xxxl;
}

/* -------------------------------------
 *
 * CALENDAR
 *
 ------------------------------------ */
.mat-datepicker-content {
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15) !important;
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
}

.mat-datepicker-content {
  background-color: #f7f6f4;
}

.mat-calendar-body-selected {
  background-color: #2b7cff;
}

.mat-datepicker-toggle-active {
  color: #2b7cff;
}

.mt-datepicker--week .mat-calendar-content {
  padding-left: 40px;
}
.mt-datepicker--week .mt-calendar-body-cell-content-weeknumber {
  position: absolute;
  left: -30px;
  background-color: #EAE5E0;
  border-radius: 3px;
  color: #494949;
  width: 23px;
  height: 37px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: -2px;
}
.mt-datepicker--week .mat-calendar-table-header-divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40px;
  right: -8px;
  height: 1px;
}

.mt-datepicker-btn-asap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #d0d0d0;
  color: #2b7cff;
  width: 200px;
  border-radius: 6px;
  padding: 10px 0;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
}
.mt-datepicker-btn-asap:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.mt-datepicker-asap-text {
  background-color: white;
  width: 200px;
  height: 40px;
  position: absolute;
  z-index: 1;
  text-align: left;
  border-radius: 8px;
  margin-left: 5px;
  margin-top: 5px;
  padding-left: 12px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: var(--text-md);
}

.mt-datepicker-info {
  max-width: 260px;
  text-align: center;
  margin: var(--outer-md) auto var(--outer-lg) auto;
  color: #999999;
}

/* -------------------------------------
 *
 * SLIDE TOGGLE
 *
 ------------------------------------ */
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #c8e0ff;
}

.mat-slide-toggle .mat-ripple-element {
  background-color: rgba(43, 124, 255, 0.1);
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: #2b7cff;
}

/* -------------------------------------
 *
 * MAT SELECT
 *
 *
 ------------------------------------ */
.mat-select-panel:not([class*=mat-elevation-z]) {
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15) !important;
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px !important;
}

.mt-select-position-below {
  margin-top: 53px;
  margin-left: 24px;
}

.mt-custom-value-text .mat-select-value-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* -------------------------------------
 *
 * MAT MENU
 *
 *
 ------------------------------------ */
.mat-menu-panel {
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15);
  border-radius: 6px !important;
}

/* Track "Audience" geo list menu which uses mat-menu */
.mt-menu-geo.mat-menu-panel {
  width: 535px;
  max-width: initial;
}

.mt-menu-no-padding .mat-menu-content:not(:empty) {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* -------------------------------------
 *
 * MAT MENU CUSTOM
 *
 * Usage:
 * mat-menu.mt-menu-combobox
 * - .mt-menu-combobox__category
 * - .mt-menu-combobox__item
 *
 ------------------------------------ */
/* Custom mat menu, used on custom comboboxes
 * as a workaround. Material framework
 * has now added a combobox ("autocomplete").
 * Once that is implemented, stop using this
 * class.
 */
.mt-menu-combobox .mt-menu-combobox__category,
.mt-menu-combobox .mt-menu-combobox__category-item,
.mt-menu-combobox .mt-menu-combobox__item {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: var(--text-base);
}
.mt-menu-combobox .mt-menu-combobox__category {
  padding-top: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
  color: #999999;
  cursor: default;
}
.mt-menu-combobox .mt-menu-combobox__category-item,
.mt-menu-combobox .mt-menu-combobox__item {
  cursor: pointer;
}
.mt-menu-combobox .mt-menu-combobox__category-item:hover,
.mt-menu-combobox .mt-menu-combobox__item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
.mt-menu-combobox .mt-menu-combobox__category-item {
  padding-right: 16px;
  padding-left: 32px;
}
.mt-menu-combobox .mt-menu-combobox__item {
  padding-right: 16px;
  padding-left: 16px;
}

/* -------------------------------------
 *
 * MAT BUTTON TOGGLE
 *
 *
 ------------------------------------ */
mat-button-toggle.mat-button-toggle {
  font-family: var(--font-primary);
  border-bottom: 1px solid #e9e9e9;
}

.cmp-adface-tab.mat-button-toggle-group {
  overflow: initial;
}
.cmp-adface-tab.mat-button-toggle-group {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: -1px;
  border: none;
  border-radius: 0;
}
.cmp-adface-tab .mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
  opacity: 0.3;
  color: white;
  background-color: white;
}
.cmp-adface-tab.mat-button-toggle-group .mat-button-toggle-button {
  min-width: 46px;
  background-color: #f7f6f4;
}
.cmp-adface-tab.mat-button-toggle-group .mat-button-toggle-checked .mat-button-toggle-button {
  background-color: white;
}
.cmp-adface-tab.mat-button-toggle-group .mat-button-toggle-label-content {
  font-weight: 600;
  font-size: var(--text-sm);
}
.cmp-adface-tab.mat-button-toggle-group .mat-button-toggle + .mat-button-toggle {
  border-left: 1px solid #e9e9e9;
}
.cmp-adface-tab.mat-button-toggle-group mat-button-toggle:first-of-type {
  border-top-left-radius: 2px;
}
.cmp-adface-tab.mat-button-toggle-group mat-button-toggle:last-of-type {
  border-top-right-radius: 2px;
}
.cmp-adface-tab .mat-button-toggle.mat-button-toggle-checked:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: white;
  bottom: -3px;
  left: 0px;
  z-index: 2;
}
.cmp-adface-tab .mat-button-toggle.cmp-adface-tab__alert.mat-button-toggle-checked:before {
  width: calc(100% - 2px);
  left: 1px;
}
.cmp-adface-tab mat-button-toggle.mat-button-toggle-checked:first-of-type:before {
  width: calc(100% - 1px);
  left: 1px;
}
.cmp-adface-tab .mat-button-toggle-label-content {
  line-height: var(--inner-lg) !important;
  padding: 0 var(--text-base) !important;
}

.cmp-adface-tab .mat-button-toggle-group {
  border: none;
  overflow: initial;
}
.cmp-adface-tab mat-button-toggle {
  border-top: 1px solid #e9e9e9;
}
.cmp-adface-tab mat-button-toggle:first-of-type {
  border-left: 1px solid #e9e9e9;
  border-top-left-radius: 3px;
}
.cmp-adface-tab mat-button-toggle:last-of-type {
  border-right: 1px solid #e9e9e9;
  border-top-right-radius: 3px;
}
.cmp-adface-tab mat-button-toggle.cmp-adface-tab__alert:after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 3px);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  pointer-events: none;
  z-index: 1;
  -webkit-box-shadow: inset 1px 0 #ff716b, inset -1px 0 #ff716b, inset 0px 1px #ff716b, inset 0px -1px #ff716b;
          box-shadow: inset 1px 0 #ff716b, inset -1px 0 #ff716b, inset 0px 1px #ff716b, inset 0px -1px #ff716b;
}
.cmp-adface-tab mat-button-toggle.mat-button-toggle-checked.cmp-adface-tab__alert:after {
  -webkit-box-shadow: inset 2px 0 #ff716b, inset -2px 0 #ff716b, inset 0px 2px #ff716b, inset 0px -2px white;
          box-shadow: inset 2px 0 #ff716b, inset -2px 0 #ff716b, inset 0px 2px #ff716b, inset 0px -2px white;
}
.cmp-adface-tab mat-button-toggle.mat-button-toggle-checked.cmp-adface-tab__alert:after {
  border-bottom-color: white;
}
.cmp-adface-tab mat-button-toggle.cmp-adface-tab__alert .mat-button-toggle-label-content {
  color: #ff716b;
}

/* -------------------------------------
 *
 * MAT TREE
 *
 *
 ------------------------------------ */
mat-tree.mat-tree {
  font-family: var(--font-primary);
}

.mat-nested-tree-node, .mat-tree-node {
  font-size: var(--text-base);
}

/**
 * Aligns the mat-tree node text to the
 * left edge by negative margin to combat
 * the button placeholder.
 */
.mt-review-tree--outdent mat-tree.mat-tree {
  margin-left: -28px;
}

.mt-review-tree mat-tree.mat-tree {
  background-color: transparent;
}
.mt-review-tree .mat-tree-node {
  min-height: 1em;
  font-size: 16px;
  font-family: var(--font-primary);
}
.mt-review-tree .mat-button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mt-review-tree .mat-icon-button {
  height: 2em;
  width: 2em;
}
.mt-review-tree mat-icon svg {
  margin-top: -3px;
}
.mt-review-tree .mat-button-ripple-round {
  margin-bottom: 0;
}

.mt-cmp-review-tree .mat-tree-node {
  min-height: 1em;
  color: #999999;
}
.mt-cmp-review-tree .mat-button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mt-cmp-review-tree .mat-icon-button {
  height: 2em;
  width: 2em;
}
.mt-cmp-review-tree mat-icon svg {
  margin-top: -3px;
}
.mt-cmp-review-tree .mat-button-ripple-round {
  margin-bottom: 0;
}

/* -------------------------------------
 *
 * MAT TOOLTIP
 *
 *
 ------------------------------------ */
mat-tooltip-component .mat-tooltip, .mat-tooltip {
  background: #385890;
  color: white;
  border-radius: 3px;
  border-radius: 6px;
  padding: var(--inner-sm) var(--inner-md);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  overflow: unset;
}
mat-tooltip-component .mat-tooltip:after, .mat-tooltip:after {
  position: absolute;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 100%;
  left: 50%;
  /* Down */
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 7px solid #385890;
}

.mt-tooltip-breakall {
  word-break: break-all;
}

.mt-tooltip-nowrap {
  word-break: break-word;
  word-wrap: break-word;
}

/* -------------------------------------
 *
 * MAT TAB
 *
 *
 ------------------------------------ */
.mat-tab-label .mat-tab-label-content {
  letter-spacing: 0;
  font-family: var(--font-headline);
  font-weight: 600;
}

/* -------------------------------------
 *
 * MAT EXPANSION PANEL
 *
 *
 ------------------------------------ */
.mt-expansion-panel-header-bg-color-panel {
  background-color: #f7f6f4;
}
.mt-expansion-panel-header-bg-color-panel:hover {
  background-color: #f7f6f4 !important;
}

.highcharts-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-align: left;
  line-height: normal;
  z-index: 0;
  /* #1072 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: "Unica One", sans-serif;
  font-size: 12px;
}

.highcharts-root text {
  stroke-width: 0;
}

.highcharts-background {
  fill: transparent;
}

.highcharts-plot-border, .highcharts-plot-background {
  fill: none;
}

.highcharts-label-box {
  fill: none;
}

/* Titles */
.highcharts-title {
  fill: #E0E0E3;
  text-transform: uppercase;
  font-size: 20px;
}

.highcharts-subtitle {
  fill: #E0E0E3;
  text-transform: uppercase;
}

/* Axes */
.highcharts-axis-line {
  fill: none;
  stroke: #C0D0E0;
}

.highcharts-yaxis .highcharts-axis-line {
  stroke-width: 0;
}

.highcharts-axis-title {
  fill: #707070;
}

.highcharts-axis-labels {
  fill: #E0E0E3;
  cursor: default;
  font-size: 0.9em;
}

.highcharts-grid-line {
  fill: none;
  stroke: #D8D8D8;
}

.highcharts-xaxis-grid .highcharts-grid-line {
  stroke-width: 0;
}

.highcharts-tick {
  stroke: #C0D0E0;
}

.highcharts-yaxis .highcharts-tick {
  stroke-width: 0;
}

.highcharts-minor-grid-line {
  stroke: #e0e0e0;
}

.highcharts-crosshair-thin {
  stroke-width: 1px;
  stroke: #c0c0c0;
}

.highcharts-crosshair-category {
  stroke: rgba(155, 200, 255, 0.2);
}

/* Credits */
.highcharts-credits {
  cursor: pointer;
  fill: #666;
  font-size: 0.7em;
  -webkit-transition: fill 250ms, font-size 250ms;
  -o-transition: fill 250ms, font-size 250ms;
  transition: fill 250ms, font-size 250ms;
}

.highcharts-credits:hover {
  fill: black;
  font-size: 1em;
}

/* Tooltip */
.highcharts-tooltip {
  cursor: default;
  pointer-events: none;
  white-space: nowrap;
  -webkit-transition: stroke 150ms;
  -o-transition: stroke 150ms;
  transition: stroke 150ms;
}

.highcharts-tooltip text {
  fill: #F0F0F0;
}

.highcharts-tooltip .highcharts-header {
  font-size: 0.85em;
}

.highcharts-tooltip-box {
  stroke-width: 1px;
  fill: rgba(0, 0, 0, 0.85);
  fill-opacity: 0.85;
}

.highcharts-selection-marker {
  fill: #4572A7;
  fill-opacity: 0.25;
}

.highcharts-graph {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.highcharts-state-hover .highcharts-graph {
  stroke-width: 3;
}

.highcharts-state-hover path {
  -webkit-transition: stroke-width 50;
  -o-transition: stroke-width 50;
  transition: stroke-width 50;
  /* quick in */
}

.highcharts-state-normal path {
  -webkit-transition: stroke-width 250ms;
  -o-transition: stroke-width 250ms;
  transition: stroke-width 250ms;
  /* slow out */
}

/* Legend hover affects points and series */
g.highcharts-series, .highcharts-point {
  -webkit-transition: opacity 250ms;
  -o-transition: opacity 250ms;
  transition: opacity 250ms;
}

.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
  opacity: 0.2;
}

/* Series options */
/* Default colors */
.highcharts-color-0 {
  fill: #2b908f;
  stroke: #2b908f;
}

.highcharts-color-1 {
  fill: #90ee7e;
  stroke: #90ee7e;
}

.highcharts-color-2 {
  fill: #f45b5b;
  stroke: #f45b5b;
}

.highcharts-color-3 {
  fill: #7798BF;
  stroke: #7798BF;
}

.highcharts-color-4 {
  fill: #aaeeee;
  stroke: #aaeeee;
}

.highcharts-color-5 {
  fill: #ff0066;
  stroke: #ff0066;
}

.highcharts-color-6 {
  fill: #eeaaee;
  stroke: #eeaaee;
}

.highcharts-color-7 {
  fill: #55BF3B;
  stroke: #55BF3B;
}

.highcharts-color-8 {
  fill: #DF5353;
  stroke: #DF5353;
}

.highcharts-color-9 {
  fill: #7798BF;
  stroke: #7798BF;
}

.highcharts-color-10 {
  fill: #aaeeee;
  stroke: #aaeeee;
}

.highcharts-area {
  fill-opacity: 0.75;
  stroke-width: 0;
}

.highcharts-markers {
  stroke-width: 1px;
  stroke: #ffffff;
}

.highcharts-point {
  stroke-width: 1px;
}

.highcharts-legend .highcharts-point {
  stroke-width: 0;
}

.highcharts-data-label {
  font-size: 0.9em;
  font-weight: bold;
}

.highcharts-data-label-box {
  fill: none;
  stroke-width: 0;
}

.highcharts-data-label text {
  font-size: 11px;
  font-weight: bold;
  color: #B0B0B3;
  text-shadow: 0 0 6px #000000, 0 0 3px #000000;
  fill: #B0B0B3;
  text-rendering: geometricPrecision;
}

.highcharts-data-label-connector {
  fill: none;
}

.highcharts-halo {
  fill-opacity: 0.25;
  stroke-width: 0;
}

.highcharts-point-select {
  fill: #FFFFFF;
  stroke: #000000;
}

.highcharts-column-series .highcharts-point {
  stroke: #ffffff;
  -webkit-transition: fill-opacity 250ms;
  -o-transition: fill-opacity 250ms;
  transition: fill-opacity 250ms;
}

.highcharts-column-series .highcharts-point-hover {
  fill-opacity: 0.75;
  -webkit-transition: fill-opacity 50ms;
  -o-transition: fill-opacity 50ms;
  transition: fill-opacity 50ms;
}

.highcharts-pie-series .highcharts-point {
  stroke-linejoin: round;
  stroke: #ffffff;
}

.highcharts-pie-series .highcharts-point-hover {
  fill-opacity: 0.75;
  -webkit-transition: fill-opacity 50ms;
  -o-transition: fill-opacity 50ms;
  transition: fill-opacity 50ms;
}

.highcharts-pie-series .highcharts-point-select {
  fill: inherit;
  stroke: inherit;
}

.highcharts-funnel-series .highcharts-point {
  stroke-linejoin: round;
  stroke: #ffffff;
}

.highcharts-funnel-series .highcharts-point-hover {
  fill-opacity: 0.75;
  -webkit-transition: fill-opacity 50ms;
  -o-transition: fill-opacity 50ms;
  transition: fill-opacity 50ms;
}

.highcharts-funnel-series .highcharts-point-select {
  fill: inherit;
  stroke: inherit;
}

.highcharts-pyramid-series .highcharts-point {
  stroke-linejoin: round;
  stroke: #ffffff;
}

.highcharts-pyramid-series .highcharts-point-hover {
  fill-opacity: 0.75;
  -webkit-transition: fill-opacity 50ms;
  -o-transition: fill-opacity 50ms;
  transition: fill-opacity 50ms;
}

.highcharts-pyramid-series .highcharts-point-select {
  fill: inherit;
  stroke: inherit;
}

.highcharts-solidgauge-series .highcharts-point {
  stroke-width: 0;
}

.highcharts-treemap-series .highcharts-point {
  stroke-width: 1px;
  stroke: #e0e0e0;
  -webkit-transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
  -o-transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
  transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}

.highcharts-treemap-series .highcharts-point-hover {
  stroke: #000000;
  -webkit-transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
  -o-transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
  transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}

.highcharts-treemap-series .highcharts-above-level {
  display: none;
}

.highcharts-treemap-series .highcharts-internal-node {
  fill: none;
}

.highcharts-treemap-series .highcharts-internal-node-interactive {
  fill-opacity: 0.15;
  cursor: pointer;
}

.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
  fill-opacity: 0.75;
}

/* Legend */
.highcharts-legend-box {
  fill: none;
  stroke-width: 0;
}

.highcharts-legend-item text {
  fill: #E0E0E3;
  font-weight: bold;
  cursor: pointer;
  stroke-width: 0;
}

.highcharts-legend-item:hover text {
  fill: #fff;
}

.highcharts-legend-item-hidden * {
  fill: #cccccc !important;
  stroke: #cccccc !important;
  -webkit-transition: fill 250ms;
  -o-transition: fill 250ms;
  transition: fill 250ms;
}

.highcharts-legend-nav-active {
  fill: #274b6d;
  cursor: pointer;
}

.highcharts-legend-nav-inactive {
  fill: #c0c0c0;
}

.highcharts-legend-title-box {
  fill: none;
  stroke-width: 0;
}

/* Loading */
.highcharts-loading {
  position: absolute;
  background-color: white;
  opacity: 0.5;
  text-align: center;
  z-index: 10;
  -webkit-transition: opacity 250ms;
  -o-transition: opacity 250ms;
  transition: opacity 250ms;
}

.highcharts-loading-hidden {
  height: 0 !important;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: opacity 250ms, height 250ms step-end;
  -o-transition: opacity 250ms, height 250ms step-end;
  transition: opacity 250ms, height 250ms step-end;
}

.highcharts-loading-inner {
  font-weight: bold;
  position: relative;
  top: 45%;
}

/* Plot bands and polar pane backgrounds */
.highcharts-plot-band {
  fill: rgba(0, 0, 0, 0.05);
}

.highcharts-plot-line {
  fill: none;
  stroke: gray;
  stroke-width: 1px;
}

/* Highcharts More */
.highcharts-boxplot-box {
  fill: white;
}

.highcharts-boxplot-median {
  stroke-width: 2px;
}

.highcharts-bubble-series .highcharts-point {
  fill-opacity: 0.5;
}

.highcharts-errorbar-series .highcharts-point {
  stroke: black;
}

.highcharts-gauge-series .highcharts-data-label-box {
  stroke: silver;
  stroke-width: 1px;
}

.highcharts-gauge-series .highcharts-dial {
  fill: black;
  stroke-width: 0;
}

.highcharts-polygon-series .highcharts-graph {
  fill: inherit;
  stroke-width: 0;
}

.highcharts-waterfall-series .highcharts-graph {
  stroke: #333;
  stroke-dasharray: 1, 3;
}

/* Highstock */
.highcharts-navigator-mask {
  fill: rgba(128, 179, 236, 0.3);
  /* navigator.maskFill option */
}

.highcharts-navigator-mask-inside {
  fill: rgba(128, 223, 251, 0.2);
  /* navigator.maskFill option */
  cursor: ew-resize;
}

.highcharts-navigator-outline {
  stroke: #b2b1b6;
  fill: none;
}

.highcharts-navigator-handle {
  stroke: #b2b1b6;
  fill: #ebe7e8;
  cursor: ew-resize;
}

.highcharts-navigator-series {
  fill: #4572A7;
  stroke: #4572A7;
}

.highcharts-navigator-series .highcharts-graph {
  stroke-width: 1px;
}

.highcharts-navigator-series .highcharts-area {
  fill-opacity: 0.05;
}

.highcharts-navigator-xaxis .highcharts-axis-line {
  stroke-width: 0;
}

.highcharts-navigator-xaxis .highcharts-grid-line {
  stroke-width: 1px;
  stroke: #eee;
}

.highcharts-navigator-xaxis.highcharts-axis-labels {
  fill: #888;
}

.highcharts-navigator-yaxis .highcharts-grid-line {
  stroke-width: 0;
}

.highcharts-scrollbar-thumb {
  fill: #bfc8d1;
  stroke: #bbb;
  stroke-width: 1px;
}

.highcharts-scrollbar-button {
  fill: #ebe7e8;
  stroke: #bbb;
  stroke-width: 1px;
}

.highcharts-scrollbar-arrow {
  fill: #666;
}

.highcharts-scrollbar-rifles {
  stroke: #666;
  stroke-width: 1px;
}

.highcharts-scrollbar-track {
  fill: #eeeeee;
  stroke: #eeeeee;
  stroke-width: 1px;
}

.highcharts-button {
  cursor: default;
  fill: #f6f6f6;
  stroke: #CCC;
  stroke-width: 1px;
  -webkit-transition: fill 250ms;
  -o-transition: fill 250ms;
  transition: fill 250ms;
}

.highcharts-button text {
  fill: black;
}

.highcharts-button-hover {
  fill: #acf;
  stroke: #68A;
  -webkit-transition: fill 0ms;
  -o-transition: fill 0ms;
  transition: fill 0ms;
}

.highcharts-button-pressed {
  fill: #cdf;
  stroke: #68A;
  font-weight: bold;
}

.highcharts-button-disabled text {
  fill: #ccc;
}

.highcharts-range-selector-buttons .highcharts-button {
  stroke-width: 0;
}

.highcharts-range-label rect {
  fill: none;
}

.highcharts-range-label text {
  fill: #666;
}

.highcharts-range-input rect {
  fill: none;
}

.highcharts-range-input text {
  fill: #444;
}

input.highcharts-range-selector {
  position: absolute;
  border: 0;
  width: 1px;
  /* Chrome needs a pixel to see it */
  height: 1px;
  padding: 0;
  text-align: center;
  left: -9em;
  /* #4798 */
}

.highcharts-crosshair-label text {
  fill: white;
  font-size: 1.1em;
}

.highcharts-crosshair-label .highcharts-label-box {
  fill: inherit;
}

.highcharts-candlestick-series .highcharts-point {
  stroke: black;
  stroke-width: 1px;
}

.highcharts-candlestick-series .highcharts-point-up {
  fill: white;
}

.highcharts-ohlc-series .highcharts-point-hover {
  stroke-width: 3px;
}

.highcharts-flags-series .highcharts-point {
  stroke: gray;
  fill: white;
}

.highcharts-flags-series .highcharts-point-hover {
  stroke: black;
  fill: #FCFFC5;
}

.highcharts-flags-series .highcharts-point text {
  fill: black;
  font-size: 0.9em;
  font-weight: bold;
}

/* Highmaps */
.highcharts-map-series .highcharts-point {
  -webkit-transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
  -o-transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
  transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
  stroke: silver;
}

.highcharts-map-series .highcharts-point-hover {
  -webkit-transition: fill 0ms, fill-opacity 0ms;
  -o-transition: fill 0ms, fill-opacity 0ms;
  transition: fill 0ms, fill-opacity 0ms;
  fill-opacity: 0.5;
  stroke-width: 2px;
}

.highcharts-mapline-series .highcharts-point {
  fill: none;
}

.highcharts-heatmap-series .highcharts-point {
  stroke-width: 0;
}

.highcharts-map-navigation {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}

.highcharts-coloraxis {
  stroke-width: 0;
}

.highcharts-coloraxis-marker {
  fill: gray;
}

.highcharts-null-point {
  fill: #f8f8f8;
}

/* 3d charts */
.highcharts-3d-frame {
  fill: transparent;
}

.highcharts-column-series .highcharts-point {
  stroke: inherit;
  /* use point color */
}

.highcharts-3d-top {
  -webkit-filter: url(#highcharts-brighter);
          filter: url(#highcharts-brighter);
}

.highcharts-3d-side {
  -webkit-filter: url(#highcharts-darker);
          filter: url(#highcharts-darker);
}

/* Exporting module */
.highcharts-contextbutton {
  fill: white;
  /* needed to capture hover */
  stroke: none;
  stroke-linecap: round;
}

.highcharts-contextbutton:hover {
  fill: #acf;
  stroke: #acf;
}

.highcharts-button-symbol {
  stroke: #666;
  stroke-width: 3px;
  fill: #E0E0E0;
}

.highcharts-menu {
  border: 1px solid #A0A0A0;
  background: #FFFFFF;
  padding: 5px 0;
  -webkit-box-shadow: 3px 3px 10px #888;
          box-shadow: 3px 3px 10px #888;
}

.highcharts-menu-item {
  padding: 0 1em;
  background: none;
  color: #303030;
  cursor: pointer;
}

.highcharts-menu-item:hover {
  background: #4572A5;
  color: #FFFFFF;
}

/* Drilldown module */
.highcharts-drilldown-point {
  cursor: pointer;
}

.highcharts-drilldown-data-label text, .highcharts-drilldown-axis-label {
  cursor: pointer;
  fill: #0d233a;
  font-weight: bold;
  text-decoration: underline;
}

/* No-data module */
.highcharts-no-data text {
  font-weight: bold;
  font-size: 12px;
  fill: #60606a;
}

.highcharts-button-box {
  height: 3px;
  rx: 0;
  ry: 0;
  y: 25px;
}

.highcharts-button-box {
  fill: transparent !important;
}

/* --------------------------------
 * CUSTOM
 *
 * Things below are custom styling.
 *
 ------------------------------- */
.hc-xaxis-label:after {
  /**
   * This should be done in the JSON, but the label
   * is shrinking the chart area due to the text
   * being horizontal, rather than vertical.
   */
  content: "Annonsvisningar";
  position: absolute;
}

.hc-yaxis-label:after {
  /**
   * This should be done in the JSON, but the label
   * is shrinking the chart area due to the text
   * being horizontal, rather than vertical.
   */
  content: "Klick";
  position: absolute;
}

/* Download menu */
.highcharts-menu {
  border-radius: 6px;
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35) !important;
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.35) !important;
  padding: 10px 0px !important;
}

.highcharts-menu-item {
  padding: 15px 20px !important;
  font-size: var(--text-base) !important;
}

.highcharts-menu-0 {
  padding-top: 82px;
  padding-right: 92px;
}

/* Charts */
.highcharts-color-0 {
  fill: #f7f6f4;
  stroke: #2b7cff;
  stroke-width: 2px;
}

.highcharts-color-1 {
  fill: #80dffb;
  stroke: #80dffb;
}

.highcharts-label-box {
  fill: #385890;
  fill-opacity: 1;
  stroke: none;
  stroke-width: 0;
  stroke-opacity: 0;
}

.highcharts-label text {
  color: white !important;
  fill: white !important;
}

tspan[style="fill:#434348"] {
  fill: #80dffb !important;
}

.highcharts-label-box.highcharts-shadow {
  fill: none;
}

.highcharts-exporting-group {
  -webkit-transform: translate(-47px, -6px);
      -ms-transform: translate(-47px, -6px);
          transform: translate(-47px, -6px);
  /* Hide hover box effect */
}
.highcharts-exporting-group .highcharts-button-box {
  fill: transparent !important;
}
.highcharts-exporting-group text {
  font-weight: 500 !important;
}

.highcharts-range-selector-group {
  -webkit-transform: translateX(-25px);
      -ms-transform: translateX(-25px);
          transform: translateX(-25px);
}

/* Time range selector label */
.highcharts-range-selector-buttons text:first-child {
  -webkit-transform: translateX(-35px);
      -ms-transform: translateX(-35px);
          transform: translateX(-35px);
}

/* yAxis */
#toast-container > .toast-success,
#toast-container > .toast-warning,
#toast-container > .toast-info {
  background-position-x: calc(var(--inner-md) + var(--inner-xs));
}

.toast-message {
  margin-left: calc(var(--outer-lg) - 3px) !important;
  text-transform: uppercase;
  font-weight: 600;
}

.toast.toast-info {
  background-color: #2b7cff;
}
.toast.toast-success {
  background-color: #2b7cff;
}

/* -------------------------------------
 * 8. TRUMPS / UTILITIES
 *
 * Utilities & helpers. Forcefully 
 * override lower tiers. E.g ".hidden"
 ------------------------------------ */
/**
 * HELPERS
 *
 * Modify element state on-the-fly
 */
.hidden {
  display: none !important;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-initial {
  overflow: initial;
}

.overflow-visible {
  overflow: visible;
}

.no-margin {
  margin: 0 !important;
}

.no-shadow {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.inactive-item {
  opacity: 0.4;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.active-item {
  opacity: 1 !important;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  pointer-events: auto !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
}

.clickable {
  cursor: pointer;
}

.icon-xs {
  width: var(--icon-xs);
  height: var(--icon-xs);
}
.icon-xs svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.icon-sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.icon-sm svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon-md {
  width: var(--icon-md);
  height: var(--icon-md);
}
.icon-md svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.icon-lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.icon-lg svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.icon-xl {
  width: var(--icon-xl);
  height: var(--icon-xl);
}
.icon-xl svg {
  width: var(--icon-xl);
  height: var(--icon-xl);
}

.icon-xxl {
  width: var(--icon-xxl);
  height: var(--icon-xxl);
}
.icon-xxl svg {
  width: var(--icon-xxl);
  height: var(--icon-xxl);
}

.icon-xxxl {
  width: var(--icon-xxxl);
  height: var(--icon-xxxl);
}
.icon-xxxl svg {
  width: var(--icon-xxxl);
  height: var(--icon-xxxl);
}

.icon-scale-xs {
  width: var(--icon-scale-xs);
  height: var(--icon-scale-xs);
}
.icon-scale-xs svg {
  width: var(--icon-scale-xs);
  height: var(--icon-scale-xs);
}

.icon-scale-sm {
  width: var(--icon-scale-sm);
  height: var(--icon-scale-sm);
}
.icon-scale-sm svg {
  width: var(--icon-scale-sm);
  height: var(--icon-scale-sm);
}

.icon-scale-md {
  width: var(--icon-scale-md);
  height: var(--icon-scale-md);
}
.icon-scale-md svg {
  width: var(--icon-scale-md);
  height: var(--icon-scale-md);
}

.icon-scale-lg {
  width: var(--icon-scale-lg);
  height: var(--icon-scale-lg);
}
.icon-scale-lg svg {
  width: var(--icon-scale-lg);
  height: var(--icon-scale-lg);
}

.icon-scale-xl {
  width: var(--icon-scale-xl);
  height: var(--icon-scale-xl);
}
.icon-scale-xl svg {
  width: var(--icon-scale-xl);
  height: var(--icon-scale-xl);
}

.icon-scale-xxl {
  width: var(--icon-scale-xxl);
  height: var(--icon-scale-xxl);
}
.icon-scale-xxl svg {
  width: var(--icon-scale-xxl);
  height: var(--icon-scale-xxl);
}

.icon-scale-xxxl {
  width: var(--icon-scale-xxxl);
  height: var(--icon-scale-xxxl);
}
.icon-scale-xxxl svg {
  width: var(--icon-scale-xxxl);
  height: var(--icon-scale-xxxl);
}

/* -------------------------------------
 *  
 * BACKGROUND COLOR
 * 
 * Background colors or main colors
 * 
 ------------------------------------ */
.bg-color-accent {
  background-color: #2b7cff;
}

.bg-color-secondary {
  background-color: #385890;
}

.bg-color-body {
  background-color: white;
}

.bg-color-panel {
  background-color: #f7f6f4;
}

.bg-color-alert {
  background-color: #ff716b;
}

/* -------------------------------------
 *  
 * FLEX ALIGNMENT
 * 
 * .flex--{justify-content}-{align-items}
 * 
 * #TODO: When following BEM naming 
 * convention, it should not be two 
 * dashes "flex--{position}", only one:
 * "flex-{position}".
 ------------------------------------ */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex--start {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.flex--start-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex--end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.flex--end-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex--start-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flex--center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex--center-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex--center-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flex--column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex--auto {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flex-self--start {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.flex-self--end {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.flex-self--center {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

/**
 * Force alignment of flex element.
 * 
 * .form-box__label is by default
 * vertically centered aligned. But
 * due to the design, it is needed to
 * force the element to top. Add this
 * to its parent element.
 */
.flexself--start {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

/* -------------------------------------
 *  
 * ELEMENTS
 * 
 * Misc. element helpers
 * 
 ------------------------------------ */
.block {
  display: block;
}

.inline-block {
  display: block;
}

.clickable {
  cursor: pointer;
}

.relative {
  position: relative;
}

/* -------------------------------------
 *  
 * TYPOGRAPHY
 * 
 * Related to text helper classes
 * 
 * For the basic helper classes such as 
 * colors and text sizes, see
 * "_typography" under "4-elements" 
 * folder.
 * 
 ------------------------------------ */
.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-weight-initial {
  font-weight: initial;
}

.text-weight-sm {
  font-weight: 300;
}

.text-weight-md {
  font-weight: 400;
}

.text-weight-lg {
  font-weight: 500;
}

.text-weight-xl {
  font-weight: 600;
}

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

.text-align-justify {
  text-align: right;
}

.text-nowrap {
  white-space: nowrap;
}

.text-wrap {
  overflow-wrap: break-word;
}

.text-break-all {
  word-break: break-all;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.textarea-resize-none {
  resize: none;
}

/* -------------------------------------
 * 
 * BORDERS
 *
 *
 ------------------------------------ */
.mt-table-container.mt-table-no-padding td.mat-cell:first-of-type:before,
.mt-table-container.mt-table-no-padding th.mat-header-cell:first-of-type:before, .mt-table-container.mt-table-no-padding td.mat-cell:last-of-type:before,
.mt-table-container.mt-table-no-padding th.mat-header-cell:last-of-type:before, .mt-table-container.mt-table-no-padding tr.mt-table-element-row--expandable td:not(:first-of-type):not(:last-of-type):before, .mt-table-container.mt-table-no-padding tr.mt-table-element-row:last-of-type td:not(:first-of-type):not(:last-of-type):before {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(211, 211, 211, 0.5);
}

/* -------------------------------------
 * 
 * ICON ALIGNMENT
 *
 * Icon alignment when used with svg-icon
 * used e.g. in campaign list and more.
 *
 ------------------------------------ */
/*  */
svg-icon[icon=align-middle] svg {
  vertical-align: middle;
}

svg-icon[icon=align-top] svg {
  vertical-align: top;
}

svg-icon[icon=align-bottom] svg {
  vertical-align: bottom;
}

svg-icon[icon=align-baseline] svg {
  vertical-align: baseline;
}

/* -------------------------------------
 * 
 * SELECTION
 *
 ------------------------------------ */
.no-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.no-click {
  pointer-events: none;
}

.no-select-click {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* -------------------------------------
 * 
 * FILTERS
 *
 ------------------------------------ */
.greyscale {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

/* -------------------------------------
 * OBJECT FIT CONTAINER
 *
 * Contain e.g. the square logos using
 * a wrapper to clear excess white 
 * space.
 * 
 * General usage includes wrapping large
 * images where the main subject is in 
 * view while the excess areas aren't as
 * important to the user.
 * 
 * Usage:
 * div.object-fit-container style="height: 85px;"
 * - div.object-fit-cover" style="height: 85px; width: 170px;"
 ------------------------------------ */
.object-fit-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-fit-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-fit-fill {
  -o-object-fit: fill;
     object-fit: fill;
}
.object-fit-scale-down {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.object-position-top {
  -o-object-position: top;
     object-position: top;
}
.object-position-bottom {
  -o-object-position: bottom;
     object-position: bottom;
}
.object-position-center {
  -o-object-position: center;
     object-position: center;
}
.object-position-left {
  -o-object-position: left;
     object-position: left;
}
.object-position-right {
  -o-object-position: right;
     object-position: right;
}

/* Sandbox for various testing */
/**
 * SANDBOX
 *
 * Playground and test area
 */
.mat-menu-panel {
  max-height: 40vh !important;
  min-height: auto;
  -webkit-box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15);
          box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.15);
  border-radius: 6px !important;
}