@charset "UTF-8";
@font-face {
  font-family: "telenor";
  src: url(/securedns.fonts/telenor.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "telenor";
  src: url(/securedns.fonts/telenor-bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "telenor";
  src: url(/securedns.fonts/telenor-italic.woff) format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "telenor";
  src: url(/securefonts/telenor-bolditalic.woff) format("woff");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "telenor";
  src: url(/securedns.fonts/telenorlight.woff) format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "telenor";
  src: url(/securedns.fonts/telenorlight-italic.woff) format("woff");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(/securedns.fonts/sourcesansproitalic.woff) format("woff");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(/securedns.fonts/sourcesansproregular.woff) format("woff");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(/securedns.fonts/sourcesansprobold.woff) format("woff");
  font-style: normal;
  font-weight: bold;
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
  width: device-width;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

dialog:not([open]) {
  display: none;
}

body {
  margin: 0;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p {
  margin: 0;
}

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #d6d6d6;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 4px;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(26, 26, 26, 0.2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  height: 100%;
}
html.smooth-scrolling {
  scroll-behavior: smooth;
}

body {
  font: 18px/24px Source Sans Pro, Arial, Helvetica, sans-serif;
  background: #fff;
  color: #1a1a1a;
  height: 100%;
  margin: 0;
  min-width: 320px;
}
body .absolute-page {
  position: absolute;
  width: 100%;
}

[type=text]::-ms-clear,
[type=search]::-ms-clear {
  width: 0;
  height: 0;
}

.av-external-content {
  overflow: auto;
}
.av-external-content body {
  overflow: auto;
  position: relative;
}
.av-external-content #menu--subnav {
  position: relative !important;
}
.av-external-content.modal-box--is-open {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

a {
  color: #007ad0;
  outline: none;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.wrapper {
  position: relative;
  width: 100%;
}

.container {
  width: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}
.container--main {
  padding-left: 16px;
  padding-right: 16px;
}
.container--wide {
  margin-left: -16px;
  margin-right: -16px;
}

#content {
  padding: 32px 0 48px;
}

.section--oncanvas {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.section--wrap {
  -webkit-box-flex: 1;
          flex: 1 0 auto;
  width: 100%;
}

/**
name: Helper classes
type: ui
desc: >
	---

	# PADDINGS and MARGINS:

	---

	There are 5 main helper classes for paddings and margins

		MARGINS:
			1. "margin-toleft"          (left,                     24px)
			2. "margin-toright"         (right,                    24px)
			3. "margin-trailer"         (bottom,                   24px)
			4. "margin-whole"    (top, right, bottom, left, 24px)

		PADDINGS:
			1. "padding-toleft"  (left,                     24px)
			2. "padding-toright" (right,                    24px)
			3. "padding-trailer" (bottom,                   24px)
			4. "padding-leader"  (top,                      24px)
			5. "padding-whole"   (top, right, bottom, left, 24px)

	All of these classes can have following modificators:

			1. --none            (0px)
			2. --xxsmall         (4px)
			3. --xsmall          (8px)
			4. --small           (12px)
			6. --base            (24px)
			8. --large           (48px)
			9. --xlarge          (64px)
			10.--xxlarge         (96px)
			11.--huge            (128px)

	All of them should be added as suffixes to main classes: "padding-leader--none", "toleft--xlarge", "padding-whole--med", "margin-trailer--large".


	---

	# BORDERS

	---

	Main helper class for border is "border" (top, right, bottom, left). Default colour is  #d1d1d1.

	It can be used with following modificators:

			1. --top             (top)
			2. --right           (right)
			3. --bottom          (bottom)
			4. --left            (left)
			5. --without-top     (remove top)
			6. --without-right   (remove right)
			7. --without-bottom  (remove bottom)
			8. --without-left    (remove left)
			9. --light           (#e8e8e8)

	---

	# TEXT ALIGNMENT

	---

	Text can be aligned vertically and horizontally using following classes:

		VERTICALLY:
			1. "align--top"      (top)
			2. "align--middle"   (middle)
			3. "align--bottom"   (bottom)

		HORIZONTALLY:
			1. "align--left"     (left)
			2. "align--center"   (center)
			3. "align--right"    (right)

	---

	# TEXT COLORS

	---

	Following classes can be used to change text color:
			1. "color-white"          (#fff)
			2. "color-blue"           (#038cd6)
			3. "color-blue-light"     (#80c4e8)
			4. "color-yellow"         (#ffb900)
			5. "color-gray"           (#666)
			6. "color-gray-light"     (#d1d1d1)
			7. "color-steel-grey"     (#b8b8b8)
			8. "color-smoke-grey"     (#e8e8e8)
			9. "color-black-light"    (#474747)
			10. "color-green"         (#43c682)
			11. "color-red"           (#db5451)

	---

	# TEXT SIZES

	---

	Following classes can be used to change text size:
			1. "text-size--12"        (fontsize: 12px, lineheight: 16px)
			2. "text-size--14"        (fontsize: 14px, lineheight: 20px)
			3. "text-size--16"        (fontsize: 16px, lineheight: 22px)
			4. "text-size--18"        (fontsize: 18px, lineheight: 24px)
			5. "text-size--24"        (fontsize: 24px, lineheight: 30px)
			6. "text-size--32"        (fontsize: 32px, lineheight: 38px)
			7. "text-size--48"        (fontsize: 48px, lineheight: 54px)

	For use text-sizes in scss files:
			1. Use mixin "@include text-sizes(16)" - compiled: font-size: 16px, line-height: 25px
			2. "@include text-sizes(16, 40)" - for custom line-height
			3. "@include text-sizes(16, 1) - in that case line-height compiles without "px": line-height: 1. Mostly uses for icons.

	---

	# HEADING SIZES

	---

	Following classes can be used to change text size:
			1. "heading heading--xlarge"       (fontsize: 48px, lineheight: 56px)
			2. "heading heading--large"        (fontsize: 32px, lineheight: 40px) 
			3. "heading heading--medium"       (fontsize: 24px, lineheight: 32px)
			4. "heading heading--small"        (fontsize: 18px, lineheight: 24px)

	---

	# TEXT WEIGHT

	---

	Following classes can be used to change font weight:
			1. "text-light"           (300)
			2. "text-regular"         (400)
			3. "text-bold"            (700)

	---

	# OTHER CLASSES

	---
			0. "display--none"         (display: none)
			1. "display--block"         (display: block)
			2. "display--inline"        (display: inline)
			3. "display--inline-block"  (display: inline-block)
			4. "rel"                    (position: relative)
			5. "ovh"                    (overflow: hidden)
			6. "ps"                     (position: static)
			7. "full-height"            (height: 100%)
			8. "full-width"             (width: 100%)

examples:
  - name: Paddings
    tmpl:
        include: paddings.html
  - name: Margins
    tmpl:
        include: margins.html
  - name: Borders
    tmpl:
        include: borders.html
  - name: Text alignment
    tmpl:
        include: text-alignment.html
  - name: Text colors
    tmpl:
      include: text-colors.html
  - name: Background colors
    tmpl:
        include: background-colors.html
  - name: Text sizes
    tmpl:
        include: text-sizes.html
  - name: Heading sizes
    tmpl:
        include: heading-sizes.html
  - name: Text weight
    tmpl: >
        <div class="sg-example-block--with-padding">
        	<p class="text-light">Text light</p>
        	<p class="text-regular">Text regular</p>
        	<p class="text-bold">Text bold</p>
        </div>
  - name: Visibility classes (display setting)
    tmpl:
      include: visibility.html
  - name: Columns
    tmpl:
        include: columns.html
  - name: Responsive
    tmpl:
        include: responsive.html
  - name: Nested grid
    tmpl:
        include: nested.html
  - name: Auto width
    tmpl:
        include: autowidth.html
  - name: Vertical alignment
    tmpl:
        include: alignment.html
  - name: Horizontal alignment
    tmpl:
        include: horizontal-alignment.html
  - name: Directions
    tmpl:
        include: directions.html
  - name: Order
    tmpl:
        include: order.html
  - name: Gutters
    tmpl:
        include: gutters.html
  - name: Bordered
    tmpl:
        include: bordered.html

*/
.color-white {
  color: #fff;
}

.color-paper-white {
  color: #f5f5f5;
}

.color-light-gray {
  color: #d6d6d6;
}

.color-dark-gray {
  color: #767676;
}

.color-black {
  color: #1a1a1a;
}

.color-telenor-blue {
  color: #19aaf8;
}

.color-telenor-link {
  color: #007ad0;
}

.color-telenor-black {
  color: #0c1026;
}

.color-blue {
  color: #a3deff;
}

.color-green {
  color: #b0f0b2;
}

.color-warning-orange {
  color: #ff9a1f;
}

.color-red {
  color: #ffb4b4;
}

.color-pale-lemon {
  color: #fdfdc9;
}

.color-pale-pink {
  color: #fff0f4;
}

.color-pale-muted-green {
  color: #edf6f3;
}

.color-pale-stone {
  color: #f6f4ee;
}

.color-lemon {
  color: #fefd29;
}

.color-hot-pink {
  color: #ff648c;
}

.color-muted-green {
  color: #cce6db;
}

.color-stone {
  color: #e8ded3;
}

.color-campaign-blue {
  color: #daf2ff;
}

.background-white {
  background-color: #fff;
}

.background-paper-white {
  background-color: #f5f5f5;
}

.background-blue {
  background-color: #a3deff;
}

.background-blue-light {
  background-color: #e6eef4;
}

.background-green {
  background-color: #34a156;
}

.background-orange {
  background-color: #ff9a1f;
}

.background-red {
  background-color: #f03d46;
}

.background-black {
  background-color: #0c1026;
}

.background-black-original {
  background-color: #000;
}

.background-telenor-blue {
  background-color: #19aaf8;
}

.background-pale-lemon {
  background-color: #fdfdc9;
}

.background-pale-pink {
  background-color: #fff0f4;
}

.background-pale-muted-green {
  background-color: #edf6f3;
}

.background-pale-stone {
  background-color: #f6f4ee;
}

.background-lemon {
  background-color: #fefd29;
}

.background-hot-pink {
  background-color: #ff648c;
}

.background-muted-green {
  background-color: #cce6db;
}

.background-stone {
  background-color: #e8ded3;
}

.background-campaign-blue {
  background-color: #daf2ff;
}

.background-dark-gray {
  background-color: #767676;
}

.background-telenor-link {
  background-color: #007ad0;
}

.align--top {
  vertical-align: top !important;
}

.align--middle {
  vertical-align: middle !important;
}

.align--bottom {
  vertical-align: bottom !important;
}

.text--left {
  text-align: left;
}

.text--right {
  text-align: right;
}

.text--center {
  text-align: center;
}

.text--inherit {
  text-align: inherit;
}
.display--none {
  display: none !important;
}

.display--block {
  display: block !important;
}

.display--inline {
  display: inline !important;
}

.display--inline-block {
  display: inline-block !important;
}

.display--flex {
  display: -webkit-box !important;
  display: flex !important;
}
.margin-whole--none {
  margin: 0 !important;
}

.margin-whole--xxxsmall {
  margin: 4px !important;
}

.margin-whole--xxsmall {
  margin: 8px !important;
}

.margin-whole--xsmall {
  margin: 12px !important;
}

.margin-whole--small {
  margin: 16px !important;
}

.margin-whole {
  margin: 24px !important;
}

.margin-whole--large {
  margin: 32px !important;
}

.margin-whole--xlarge {
  margin: 48px !important;
}

.margin-whole--xxlarge {
  margin: 64px !important;
}

.margin-whole--xxxlarge {
  margin: 96px !important;
}

.margin-whole--auto {
  margin: auto !important;
}
.margin-trailer--none {
  margin-bottom: 0 !important;
}

.margin-trailer--xxxsmall {
  margin-bottom: 4px !important;
}

.margin-trailer--xxsmall {
  margin-bottom: 8px !important;
}

.margin-trailer--xsmall {
  margin-bottom: 12px !important;
}

.margin-trailer--small {
  margin-bottom: 16px !important;
}

.margin-trailer {
  margin-bottom: 24px !important;
}

.margin-trailer--large {
  margin-bottom: 32px !important;
}

.margin-trailer--xlarge {
  margin-bottom: 48px !important;
}

.margin-trailer--xxlarge {
  margin-bottom: 64px !important;
}

.margin-trailer--xxxlarge {
  margin-bottom: 96px !important;
}

.margin-trailer--auto {
  margin-bottom: auto !important;
}
.margin-toleft--none {
  margin-left: 0 !important;
}

.margin-toleft--xxxsmall {
  margin-left: 4px !important;
}

.margin-toleft--xxsmall {
  margin-left: 8px !important;
}

.margin-toleft--xsmall {
  margin-left: 12px !important;
}

.margin-toleft--small {
  margin-left: 16px !important;
}

.margin-toleft {
  margin-left: 24px !important;
}

.margin-toleft--large {
  margin-left: 32px !important;
}

.margin-toleft--xlarge {
  margin-left: 48px !important;
}

.margin-toleft--xxlarge {
  margin-left: 64px !important;
}

.margin-toleft--xxxlarge {
  margin-left: 96px !important;
}

.margin-toleft--auto {
  margin-left: auto !important;
}
.margin-toright--none {
  margin-right: 0 !important;
}

.margin-toright--xxxsmall {
  margin-right: 4px !important;
}

.margin-toright--xxsmall {
  margin-right: 8px !important;
}

.margin-toright--xsmall {
  margin-right: 12px !important;
}

.margin-toright--small {
  margin-right: 16px !important;
}

.margin-toright {
  margin-right: 24px !important;
}

.margin-toright--large {
  margin-right: 32px !important;
}

.margin-toright--xlarge {
  margin-right: 48px !important;
}

.margin-toright--xxlarge {
  margin-right: 64px !important;
}

.margin-toright--xxxlarge {
  margin-right: 96px !important;
}

.margin-toright--auto {
  margin-right: auto !important;
}
.padding-whole--none {
  padding: 0 !important;
}

.padding-whole--xxxsmall {
  padding: 4px !important;
}

.padding-whole--xxsmall {
  padding: 8px !important;
}

.padding-whole--xsmall {
  padding: 12px !important;
}

.padding-whole--small {
  padding: 16px !important;
}

.padding-whole {
  padding: 24px !important;
}

.padding-whole--large {
  padding: 32px !important;
}

.padding-whole--xlarge {
  padding: 48px !important;
}

.padding-whole--xxlarge {
  padding: 64px !important;
}

.padding-whole--xxxlarge {
  padding: 96px !important;
}
.padding-trailer--none {
  padding-bottom: 0 !important;
}

.padding-trailer--xxxsmall {
  padding-bottom: 4px !important;
}

.padding-trailer--xxsmall {
  padding-bottom: 8px !important;
}

.padding-trailer--xsmall {
  padding-bottom: 12px !important;
}

.padding-trailer--small {
  padding-bottom: 16px !important;
}

.padding-trailer {
  padding-bottom: 24px !important;
}

.padding-trailer--large {
  padding-bottom: 32px !important;
}

.padding-trailer--xlarge {
  padding-bottom: 48px !important;
}

.padding-trailer--xxlarge {
  padding-bottom: 64px !important;
}

.padding-trailer--xxxlarge {
  padding-bottom: 96px !important;
}
.padding-leader--none {
  padding-top: 0 !important;
}

.padding-leader--xxxsmall {
  padding-top: 4px !important;
}

.padding-leader--xxsmall {
  padding-top: 8px !important;
}

.padding-leader--xsmall {
  padding-top: 12px !important;
}

.padding-leader--small {
  padding-top: 16px !important;
}

.padding-leader {
  padding-top: 24px !important;
}

.padding-leader--large {
  padding-top: 32px !important;
}

.padding-leader--xlarge {
  padding-top: 48px !important;
}

.padding-leader--xxlarge {
  padding-top: 64px !important;
}

.padding-leader--xxxlarge {
  padding-top: 96px !important;
}
.padding-toleft--none {
  padding-left: 0 !important;
}

.padding-toleft--xxxsmall {
  padding-left: 4px !important;
}

.padding-toleft--xxsmall {
  padding-left: 8px !important;
}

.padding-toleft--xsmall {
  padding-left: 12px !important;
}

.padding-toleft--small {
  padding-left: 16px !important;
}

.padding-toleft {
  padding-left: 24px !important;
}

.padding-toleft--large {
  padding-left: 32px !important;
}

.padding-toleft--xlarge {
  padding-left: 48px !important;
}

.padding-toleft--xxlarge {
  padding-left: 64px !important;
}

.padding-toleft--xxxlarge {
  padding-left: 96px !important;
}
.padding-toright--none {
  padding-right: 0 !important;
}

.padding-toright--xxxsmall {
  padding-right: 4px !important;
}

.padding-toright--xxsmall {
  padding-right: 8px !important;
}

.padding-toright--xsmall {
  padding-right: 12px !important;
}

.padding-toright--small {
  padding-right: 16px !important;
}

.padding-toright {
  padding-right: 24px !important;
}

.padding-toright--large {
  padding-right: 32px !important;
}

.padding-toright--xlarge {
  padding-right: 48px !important;
}

.padding-toright--xxlarge {
  padding-right: 64px !important;
}

.padding-toright--xxxlarge {
  padding-right: 96px !important;
}
.border {
  border: 1px solid #d6d6d6;
}
.border--left {
  border-left: 1px solid #d6d6d6;
}
.border--right {
  border-right: 1px solid #d6d6d6;
}
.border--bottom {
  border-bottom: 1px solid #d6d6d6;
}
.border--top {
  border-top: 1px solid #d6d6d6;
}
.border--without-left {
  border-left: none !important;
}
.border--without-right {
  border-right: none !important;
}
.border--without-bottom {
  border-bottom: none !important;
}
.border--without-top {
  border-top: none !important;
}
.border--without {
  border: none !important;
}
.border--light {
  border-color: rgba(214, 214, 214, 0.32) !important;
}
.border-radius {
  border-radius: 3px;
}

.border-white {
  border: 1px solid #fff;
}

.block-center {
  margin-left: auto;
  margin-right: auto;
}

.border-transparent {
  border: 1px solid transparent;
}

.border-split {
  border-bottom: 2px solid #f5f5f5;
}

.border-split-top {
  border-top: 2px solid #f5f5f5;
}
.rel {
  position: relative !important;
}
.ps {
  position: static !important;
}
.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

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

.inline-block {
  display: inline-block !important;
  max-width: 100%;
}

.js-hidden {
  display: none !important;
}

.colors-list, .filter__query, .filter__header, .filter-colors-list, .form__search-submit, .form__checkbox input, .toggle input, .accordion, .navigation-tabs__toggle input, .tab, .list-selectors, .radiobutton-row input, .form__radio input,
.hidden-element {
  position: fixed !important;
  opacity: 0 !important;
  top: 0;
  left: 0;
  z-index: -1;
}

.remove-default-hover:hover {
  text-decoration: none;
}

.gray-hover:hover {
  color: #767676;
}

.hidden-event {
  pointer-events: none;
}

.text-truncate {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
}

.ovh {
  overflow: hidden;
}

.full-height {
  height: 100%;
  min-height: inherit;
}

.full-width {
  width: 100%;
}

.col-basis-auto {
  flex-basis: auto !important;
}

.rounded-image {
  overflow: hidden;
  border-radius: 50%;
}
.rounded-image img {
  display: block;
  border-radius: 50%;
}

.banner-block .image-logo, .usp-block__icon-holder .icon::before, .usp-block__image .icon::before, .content-block__image-holder img, .pager__button.previous::before, .pager__button.next::before, .datatable__scroll-helper::before, .loader--centered, .button--icon::after {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.search-accounts__opener::before, .tooltip--installment, .header__search__toggler, .header__search .form__search .form__search-clear, .header__login::after, .sorting__icon::after, .form__select::before, .progress-tracker__item::before, .login-content__close-btn.button, .login-content__login-button::before, .filter-row .form__search-clear, .filter-row .form__search::before, .filter-row .date__clear,
.filter-row .date__calendar, .button .icon--right::before,
.button .icon--left::before, .badge--dot {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.top-line--with-border::before, .top-line::before {
  content: "";
  z-index: 11;
  display: block;
  position: relative;
  margin-bottom: -1px;
  background-color: #767676;
  height: 3px;
}

.top-line--with-border::before {
  margin: -1px -1px 0;
}

.nowrap {
  white-space: nowrap;
}

.fit-image {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.fit-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

@supports ((-o-object-fit: contain) or (object-fit: contain)) {
  .fit-image img {
    -o-object-fit: contain;
       object-fit: contain;
    width: auto;
    width: initial;
    height: auto;
    height: initial;
  }
}
/**
	name: Typography
	type: ui
	desc: >
          # Description

          There is a variable $text-sizes in settings.scss file.
          $text-sizes contains main font sizes and line heights which we can't change,
          and additional font sizes and line heights which we can change, add and remove.
          It's simple to use, just add class text-size on text element, and modifier for your font size.
          For example you need to text element with 32 font size, you should put class text-size--32.

          # Modifiers:

          - .text-regular: Telenor regular

          - .text-light: Telenor light

          - .text-bold: Telenor bold

          - .text-italic: Telenor italic

          - .text-normal: Telenor normal font-style

          - .text-size--: Text size from $text-sizes variable (see description)


	examples:
		Example:
			include: typography.html
*/
.text-size--48 {
  font-size: 48px;
  line-height: 56px;
}
.text-size--32 {
  font-size: 32px;
  line-height: 40px;
}
.text-size--24 {
  font-size: 24px;
  line-height: 32px;
}
.datepick-month th, .datepick-month td,
.text-size--18 {
  font-size: 18px;
  line-height: 24px;
}
.text-size--16 {
  font-size: 16px;
  line-height: 24px;
}
.tooltip,
.text-size--14 {
  font-size: 14px;
  line-height: 20px;
}
.text-size--12 {
  font-size: 12px;
  line-height: 16px;
}
.heading {
  font-family: Telenor, Arial, Helvetica, sans-serif;
}
.heading--xlarge {
  font-size: 48px;
  line-height: 56px;
}
.heading--large {
  font-size: 32px;
  line-height: 40px;
}
.heading--medium {
  font-size: 24px;
  line-height: 32px;
}
.heading--small {
  font-size: 18px;
  line-height: 24px;
}

.form__radio label, .form__checkbox label,
.telenor-font {
  font-family: Telenor, Arial, Helvetica, sans-serif;
}

.source-font,
.subscription__content .currency-label {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

.text-regular {
  font-weight: normal;
}

.text-light {
  font-weight: 300;
}

.text-bold {
  font-weight: bold;
}
.text-normal {
  font-style: normal;
}

.text-italic {
  font-style: italic;
}
@font-face {
  font-family: "framework-icons-new";
  src: url(../fonts/framework-icons-new1631292307951.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
.sidemenu__opener:after, .data-collection .opener::after, .addon__collapse-icon, .link-block::after, .search-accounts__opener::before, .filter__opener::after, .footer__breadcrumbs a:after, .header__login::after, .date__nextButton::before, .date__prevButton::before, .datepick-cmd-prev::before, .datepick-cmd-next::before, .datepicker::before, .form__datepicker-clear::before, .pager__button.previous::before, .pager__button.next::before, .sorting__icon::after, .datatable__scroll-helper::before, .form__search-clear::before, .form__select::before, .form__checkbox label::before, .form__field::before, .number__control--decrease::before, .number__control--increase::before, .progress-tracker__item::before, .list--check > li::before, .accordion__opener::after, [class^=icon-]::before,
[class*=" icon-"]::before,
.new-icon[class*=" icon-"]::before {
  font-family: "framework-icons-new" !important;
  display: block;
  font-weight: normal;
  font-style: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1em;
  line-height: 1;
}

/* Bootstrap Overrides */
.icon-arrow-down.icon--small::before {
  font-size: 16px !important;
  content: "󱀁";
}

.icon-arrow-left.icon--small::before {
  font-size: 16px !important;
  content: "󱀂";
}

.icon-arrow-right.icon--small::before {
  font-size: 16px !important;
  content: "󱀃";
}

.icon-arrow-up.icon--small::before {
  font-size: 16px !important;
  content: "󱀄";
}

.icon-bag.icon--medium::before {
  font-size: 24px !important;
  content: "󱀅";
}

.icon-bag.icon--large::before {
  font-size: 32px !important;
  content: "󱀆";
}

.icon-battery.icon--medium::before {
  font-size: 24px !important;
  content: "󱀇";
}

.icon-battery.icon--large::before {
  font-size: 32px !important;
  content: "󱀈";
}

.icon-bulb.icon--medium::before {
  font-size: 24px !important;
  content: "󱀉";
}

.icon-bulb.icon--large::before {
  font-size: 32px !important;
  content: "󱀊";
}

.icon-calendar.icon--medium::before {
  font-size: 24px !important;
  content: "󱀋";
}

.icon-calendar.icon--large::before {
  font-size: 32px !important;
  content: "󱀌";
}

.icon-camera.icon--medium::before {
  font-size: 24px !important;
  content: "󱀍";
}

.icon-camera.icon--large::before {
  font-size: 32px !important;
  content: "󱀎";
}

.icon-chat-old::before {
  content: "󱀏";
}

.icon-checkmark.icon--small::before {
  font-size: 16px !important;
  content: "󱀐";
}

.icon-checkmark.icon--medium::before {
  font-size: 24px !important;
  content: "󱀑";
}

.icon-checkmark.icon--large::before {
  font-size: 32px !important;
  content: "󱀒";
}

.icon-chevron-down.icon--small::before {
  font-size: 16px !important;
  content: "󱀓";
}

.icon-chevron-left.icon--small::before {
  font-size: 16px !important;
  content: "󱀔";
}

.icon-chevron-right.icon--small::before {
  font-size: 16px !important;
  content: "\F1015";
}

.icon-chevron-up.icon--small::before {
  font-size: 16px !important;
  content: "󱀖";
}

.icon-close.icon--small::before {
  font-size: 16px !important;
  content: "󱀗";
}

.icon-close.icon--medium::before {
  font-size: 24px !important;
  content: "󱀘";
}

.icon-cloud.icon--medium::before {
  font-size: 24px !important;
  content: "󱀙";
}

.icon-cloud.icon--large::before {
  font-size: 32px !important;
  content: "󱀚";
}

.icon-collected-discount.icon--medium::before {
  font-size: 24px !important;
  content: "󱀛";
}

.icon-collected-discount.icon--large::before {
  font-size: 32px !important;
  content: "󱀜";
}

.icon-coverage.icon--large::before {
  font-size: 32px !important;
  content: "󱀝";
}

.icon-creditcard.icon--medium::before {
  font-size: 24px !important;
  content: "󱀞";
}

.icon-creditcard.icon--large::before {
  font-size: 32px !important;
  content: "󱀟";
}

.icon-date-from.icon--medium::before {
  font-size: 24px !important;
  content: "󱀠";
}

.icon-date-to.icon--medium::before {
  font-size: 24px !important;
  content: "󱀡";
}

.icon-devices.icon--medium::before {
  font-size: 24px !important;
  content: "󱀢";
}

.icon-devices.icon--large::before {
  font-size: 32px !important;
  content: "󱀣";
}

.icon-discount.icon--medium::before {
  font-size: 24px !important;
  content: "󱀤";
}

.icon-discount.icon--large::before {
  font-size: 32px !important;
  content: "󱀥";
}

.icon-document.icon--medium::before {
  font-size: 24px !important;
  content: "󱀦";
}

.icon-document.icon--large::before {
  font-size: 32px !important;
  content: "󱀧";
}

.icon-double-sim.icon--medium::before {
  font-size: 24px !important;
  content: "󱀨";
}

.icon-download.icon--medium::before {
  font-size: 24px !important;
  content: "󱀩";
}

.icon-download.icon--large::before {
  font-size: 32px !important;
  content: "󱀪";
}

.icon-esim.icon--medium::before {
  font-size: 24px !important;
  content: "󱀫";
}

.icon-esim.icon--large::before {
  font-size: 32px !important;
  content: "󱀬";
}

.icon-europe.icon--medium::before {
  font-size: 24px !important;
  content: "󱀭";
}

.icon-exclamation.icon--small::before {
  font-size: 16px !important;
  content: "󱀮";
}

.icon-filter.icon--medium::before {
  font-size: 24px !important;
  content: "󱀯";
}

.icon-filter.icon--large::before {
  font-size: 32px !important;
  content: "󱀰";
}

.icon-forms-error.icon--small::before {
  font-size: 16px !important;
  content: "󱀱";
}

.icon-forwarding.icon--large::before {
  font-size: 32px !important;
  content: "󱀲";
}

.icon-gift.icon--medium::before {
  font-size: 24px !important;
  content: "󱀳";
}

.icon-gift.icon--large::before {
  font-size: 32px !important;
  content: "󱀴";
}

.icon-heart.icon--medium::before {
  font-size: 24px !important;
  content: "󱀵";
}

.icon-heart.icon--large::before {
  font-size: 32px !important;
  content: "󱀶";
}

.icon-help.icon--medium::before {
  font-size: 24px !important;
  content: "󱀷";
}

.icon-help.icon--large::before {
  font-size: 32px !important;
  content: "󱀸";
}

.icon-house.icon--medium::before {
  font-size: 24px !important;
  content: "󱀹";
}

.icon-house.icon--large::before {
  font-size: 32px !important;
  content: "󱀺";
}

.icon-info.icon--medium::before {
  font-size: 24px !important;
  content: "󱀻";
}

.icon-info.icon--large::before {
  font-size: 32px !important;
  content: "󱀼";
}

.icon-keyboard.icon--large::before {
  font-size: 32px !important;
  content: "󱀽";
}

.icon-large-router.icon--large::before {
  font-size: 32px !important;
  content: "󱀾";
}

.icon-location.icon--medium::before {
  font-size: 24px !important;
  content: "󱀿";
}

.icon-location.icon--large::before {
  font-size: 32px !important;
  content: "󱁀";
}

.icon-lock.icon--medium::before {
  font-size: 24px !important;
  content: "󱁁";
}

.icon-lock.icon--large::before {
  font-size: 32px !important;
  content: "󱁂";
}

.icon-logout.icon--medium::before {
  font-size: 24px !important;
  content: "󱁃";
}

.icon-logout.icon--large::before {
  font-size: 32px !important;
  content: "󱁄";
}

.icon-mail.icon--medium::before {
  font-size: 24px !important;
  content: "󱁅";
}

.icon-mail.icon--large::before {
  font-size: 32px !important;
  content: "󱁆";
}

.icon-man-in-tie.icon--medium::before {
  font-size: 24px !important;
  content: "󱁇";
}

.icon-man-in-tie.icon--large::before {
  font-size: 32px !important;
  content: "󱁈";
}

.icon-menu.icon--medium::before {
  font-size: 24px !important;
  content: "󱁉";
}

.icon-minus.icon--small::before {
  font-size: 16px !important;
  content: "󱁊";
}

.icon-more.icon--medium::before {
  font-size: 24px !important;
  content: "󱁋";
}

.icon-more.icon--large::before {
  font-size: 32px !important;
  content: "󱁌";
}

.icon-music.icon--medium::before {
  font-size: 24px !important;
  content: "󱁍";
}

.icon-music.icon--large::before {
  font-size: 32px !important;
  content: "󱁎";
}

.icon-net-sikker.icon--large::before {
  font-size: 32px !important;
  content: "󱁏";
}

.icon-nordic.icon--medium::before {
  font-size: 24px !important;
  content: "󱁐";
}

.icon-nordic.icon--large::before {
  font-size: 32px !important;
  content: "󱁑";
}

.icon-pencil.icon--medium::before {
  font-size: 24px !important;
  content: "󱁒";
}

.icon-pencil.icon--large::before {
  font-size: 32px !important;
  content: "󱁓";
}

.icon-person-old::before {
  content: "󱁔";
}

.icon-phone-change.icon--large::before {
  font-size: 32px !important;
  content: "󱁕";
}

.icon-phone.icon--medium::before {
  font-size: 24px !important;
  content: "󱁖";
}

.icon-phone.icon--large::before {
  font-size: 32px !important;
  content: "󱁗";
}

.icon-plus.icon--small::before {
  font-size: 16px !important;
  content: "󱁘";
}

.icon-portfolio.icon--large::before {
  font-size: 32px !important;
  content: "󱁙";
}

.icon-printer.icon--medium::before {
  font-size: 24px !important;
  content: "󱁚";
}

.icon-printer.icon--large::before {
  font-size: 32px !important;
  content: "󱁛";
}

.icon-refresh.icon--medium::before {
  font-size: 24px !important;
  content: "󱁜";
}

.icon-refresh.icon--large::before {
  font-size: 32px !important;
  content: "󱁝";
}

.icon-renmobile.icon--large::before {
  font-size: 32px !important;
  content: "󱁞";
}

.icon-router.icon--medium::before {
  font-size: 24px !important;
  content: "󱁟";
}

.icon-router.icon--large::before {
  font-size: 32px !important;
  content: "󱁠";
}

.icon-screenchange.icon--medium::before {
  font-size: 24px !important;
  content: "󱁡";
}

.icon-screenchange.icon--large::before {
  font-size: 32px !important;
  content: "󱁢";
}

.icon-search.icon--medium::before {
  font-size: 24px !important;
  content: "󱁣";
}

.icon-search.icon--large::before {
  font-size: 32px !important;
  content: "󱁤";
}

.icon-security.icon--medium::before {
  font-size: 24px !important;
  content: "󱁥";
}

.icon-security.icon--large::before {
  font-size: 32px !important;
  content: "󱁦";
}

.icon-service.icon--medium::before {
  font-size: 24px !important;
  content: "󱁧";
}

.icon-service.icon--large::before {
  font-size: 32px !important;
  content: "󱁨";
}

.icon-settings.icon--medium::before {
  font-size: 24px !important;
  content: "󱁩";
}

.icon-settings.icon--large::before {
  font-size: 32px !important;
  content: "󱁪";
}

.icon-sim.icon--medium::before {
  font-size: 24px !important;
  content: "󱁫";
}

.icon-sim.icon--large::before {
  font-size: 32px !important;
  content: "󱁬";
}

.icon-smiley.icon--medium::before {
  font-size: 24px !important;
  content: "󱁭";
}

.icon-smiley.icon--large::before {
  font-size: 32px !important;
  content: "󱁮";
}

.icon-stairs.icon--medium::before {
  font-size: 24px !important;
  content: "󱁯";
}

.icon-stairs.icon--large::before {
  font-size: 32px !important;
  content: "󱁰";
}

.icon-star.icon--medium::before {
  font-size: 24px !important;
  content: "󱁱";
}

.icon-star.icon--large::before {
  font-size: 32px !important;
  content: "󱁲";
}

.icon-switch.icon--medium::before {
  font-size: 24px !important;
  content: "󱁳";
}

.icon-switch.icon--large::before {
  font-size: 32px !important;
  content: "󱁴";
}

.icon-technology-coax.icon--large::before {
  font-size: 32px !important;
  content: "󱁵";
}

.icon-technology-dsl.icon--large::before {
  font-size: 32px !important;
  content: "󱁶";
}

.icon-technology-fiber.icon--large::before {
  font-size: 32px !important;
  content: "󱁷";
}

.icon-technology-mbb.icon--large::before {
  font-size: 32px !important;
  content: "󱁸";
}

.icon-technology-phone-cable.icon--large::before {
  font-size: 32px !important;
  content: "󱁹";
}

.icon-ticket.icon--medium::before {
  font-size: 24px !important;
  content: "󱁺";
}

.icon-ticket.icon--large::before {
  font-size: 32px !important;
  content: "󱁻";
}

.icon-traffic.icon--medium::before {
  font-size: 24px !important;
  content: "󱁼";
}

.icon-traffic.icon--large::before {
  font-size: 32px !important;
  content: "󱁽";
}

.icon-trash.icon--medium::before {
  font-size: 24px !important;
  content: "󱁾";
}

.icon-trin.icon--medium::before {
  font-size: 24px !important;
  content: "󱁿";
}

.icon-trin.icon--large::before {
  font-size: 32px !important;
  content: "󱂀";
}

.icon-unlock.icon--medium::before {
  font-size: 24px !important;
  content: "󱂁";
}

.icon-unlock.icon--large::before {
  font-size: 32px !important;
  content: "󱂂";
}

.icon-user.icon--small::before {
  font-size: 16px !important;
  content: "󱂃";
}

.icon-user.icon--medium::before {
  font-size: 24px !important;
  content: "󱂄";
}

.icon-user.icon--large::before {
  font-size: 32px !important;
  content: "󱂅";
}

.icon-users.icon--medium::before {
  font-size: 24px !important;
  content: "󱂆";
}

.icon-users.icon--large::before {
  font-size: 32px !important;
  content: "󱂇";
}

.icon-voucher.icon--large::before {
  font-size: 32px !important;
  content: "󱂈";
}

.icon-wallet.icon--medium::before {
  font-size: 24px !important;
  content: "󱂉";
}

.icon-wallet.icon--large::before {
  font-size: 32px !important;
  content: "󱂊";
}

.icon-warning.icon--medium::before {
  font-size: 24px !important;
  content: "󱂋";
}

.icon-watch.icon--medium::before {
  font-size: 24px !important;
  content: "󱂌";
}

.icon-watch.icon--large::before {
  font-size: 32px !important;
  content: "󱂍";
}

.icon-wifi-repeater.icon--medium::before {
  font-size: 24px !important;
  content: "󱂎";
}

.icon-wifi-repeater.icon--large::before {
  font-size: 32px !important;
  content: "󱂏";
}

.icon-wifi.icon--medium::before {
  font-size: 24px !important;
  content: "󱂐";
}

.icon-wifi.icon--large::before {
  font-size: 32px !important;
  content: "󱂑";
}

.icon-world.icon--medium::before {
  font-size: 24px !important;
  content: "󱂒";
}

.icon-world.icon--large::before {
  font-size: 32px !important;
  content: "󱂓";
}

/**
name: Icons
type: ui
desc: >
	<ol>
		<li>500px x 500px canvas size</li>
		<li>460px x 460px picture size (one side could be smaller than 460px)</li>
		<li>Picture should be centered inside the canvas</li>
		<li>All strokes should be converted into shapes</li>
		<li>All overlapping shapes should be merged into one shape</li>
		<li>Shape color should be #000000 or removed</li>
		<li>There shouldn't be any compression for SVG file</li>
	</ol>
examples:
  - name: Icons
	tmpl:
		include: ../icons/[docs]/icons.html
*/
.icon__parent {
  line-height: 1;
}
.icon--invert::before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.icon--in-disk {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.icon--in-disk.icon--in-disk-large {
  width: 64px;
  height: 64px;
}
.icon--inline::before {
  display: inline !important;
  position: relative !important;
}

.collapse--closed {
  height: 0;
}
.collapse__target {
  position: relative;
}
.collapse__target.collapsing {
  overflow: hidden;
  -webkit-transition: height 1s ease;
  transition: height 1s ease;
}
.collapse__opener {
  cursor: pointer;
}
.collapse__opener:hover {
  color: #767676;
}
.collapse__status-indicator {
  cursor: pointer;
}
.collapse__status-indicator.closed {
  display: block;
}
.collapse__status-indicator.opened {
  display: none;
}
.is-expanded .collapse__status-indicator.closed {
  display: none;
}
.is-expanded .collapse__status-indicator.opened {
  display: block;
}

.modal-box__action-buttons {
  margin: 0;
  padding: 0;
}
.modal-box__action-buttons > li {
  margin: 0;
  padding: 0;
}
.modal-box__action-buttons > li::before {
  margin: 0;
  padding: 0;
  content: none;
}

.grid-container {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.grid-row--gutter-xxsmall, .grid-row--gutter-small, .grid-row--gutter-none, .grid-row {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}

.grid-row {
  margin-left: -12px;
  margin-right: -12px;
}
.grid-row > [class*=col] {
  padding-left: 12px;
  padding-right: 12px;
}

.grid-row--gutter-none {
  margin-left: 0;
  margin-right: 0;
}
.grid-row--gutter-none > [class*=col] {
  padding-left: 0;
  padding-right: 0;
}

.grid-row--gutter-small {
  margin-left: -8px;
  margin-right: -8px;
}
.grid-row--gutter-small > [class*=col] {
  padding-left: 8px;
  padding-right: 8px;
}

.grid-row--gutter-xxsmall {
  margin-left: -4px;
  margin-right: -4px;
}
.grid-row--gutter-xxsmall > [class*=col] {
  padding-left: 4px;
  padding-right: 4px;
}

.col,
[class*=col-] {
  position: relative;
  min-height: 1px;
  margin-left: 0;
  margin-right: 0;
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs,
.col {
  -webkit-box-flex: 1;
          flex: 1;
  width: auto;
  max-width: 100%;
}
.col-xs-1,
.col-1 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 8.3333333333%;
  max-width: 8.3333333333%;
}
.col-xs-2,
.col-2 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 16.6666666667%;
  max-width: 16.6666666667%;
}
.col-xs-3,
.col-3 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 25%;
  max-width: 25%;
}
.col-xs-4,
.col-4 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 33.3333333333%;
  max-width: 33.3333333333%;
}
.col-xs-5,
.col-5 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 41.6666666667%;
  max-width: 41.6666666667%;
}
.col-xs-6,
.col-6 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 50%;
  max-width: 50%;
}
.col-xs-7,
.col-7 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 58.3333333333%;
  max-width: 58.3333333333%;
}
.col-xs-8,
.col-8 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 66.6666666667%;
  max-width: 66.6666666667%;
}
.col-xs-9,
.col-9 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 75%;
  max-width: 75%;
}
.col-xs-10,
.col-10 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 83.3333333333%;
  max-width: 83.3333333333%;
}
.col-xs-11,
.col-11 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 91.6666666667%;
  max-width: 91.6666666667%;
}
.col-xs-12,
.col-12 {
  -webkit-box-flex: 1;
          flex: auto;
  width: 100%;
  max-width: 100%;
}
.col-xs-auto,
.col-auto {
  -webkit-box-flex: 0;
          flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}
.col-xs-stretch,
.col-stretch {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  width: auto;
  max-width: 100%;
}
.col-xs-offset-0,
.col-offset-0 {
  margin-left: 0%;
}
.col-xs-offset-1,
.col-offset-1 {
  margin-left: 8.3333333333%;
}
.col-xs-offset-2,
.col-offset-2 {
  margin-left: 16.6666666667%;
}
.col-xs-offset-3,
.col-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-4,
.col-offset-4 {
  margin-left: 33.3333333333%;
}
.col-xs-offset-5,
.col-offset-5 {
  margin-left: 41.6666666667%;
}
.col-xs-offset-6,
.col-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-7,
.col-offset-7 {
  margin-left: 58.3333333333%;
}
.col-xs-offset-8,
.col-offset-8 {
  margin-left: 66.6666666667%;
}
.col-xs-offset-9,
.col-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-10,
.col-offset-10 {
  margin-left: 83.3333333333%;
}
.col-xs-offset-11,
.col-offset-11 {
  margin-left: 91.6666666667%;
}
.grid-row-xs--multi,
.grid-row--multi {
  flex-wrap: wrap;
}
.grid-row-xs--line,
.grid-row--line {
  flex-wrap: nowrap;
}
.grid-row-xs--top,
.grid-row--top {
  -webkit-box-align: start;
          align-items: flex-start;
}
.grid-row-xs--middle,
.grid-row--middle {
  -webkit-box-align: center;
          align-items: center;
}
.grid-row-xs--baseline,
.grid-row--baseline {
  -webkit-box-align: baseline;
          align-items: baseline;
}
.grid-row-xs--bottom,
.grid-row--bottom {
  -webkit-box-align: end;
          align-items: flex-end;
}
.grid-row-xs--stretch,
.grid-row--stretch {
  -webkit-box-align: stretch;
          align-items: stretch;
}
.grid-row-xs--left,
.grid-row--left {
  -webkit-box-pack: start;
          justify-content: flex-start;
}
.grid-row-xs--center,
.grid-row--center {
  -webkit-box-pack: center;
          justify-content: center;
}
.grid-row-xs--right,
.grid-row--right {
  -webkit-box-pack: end;
          justify-content: flex-end;
}
.grid-row-xs--between,
.grid-row--between {
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.grid-row-xs--around,
.grid-row--around {
  justify-content: space-around;
}
[class*=dir-] {
  display: -webkit-box;
  display: flex;
}

.dir-xs--row,
.dir--row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.dir-xs--row-reverse,
.dir--row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-direction: row-reverse;
}
.dir-xs--column,
.dir--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.dir-xs--column-reverse,
.dir--column-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
          flex-direction: column-reverse;
}
.col-xs--top,
.col--top {
  align-self: flex-start;
}
.col-xs--middle,
.col--middle {
  -ms-grid-row-align: center;
      align-self: center;
}
.col-xs--baseline,
.col--baseline {
  align-self: baseline;
}
.col-xs--bottom,
.col--bottom {
  align-self: flex-end;
}
.col-xs--stretch,
.col--stretch {
  -ms-grid-row-align: stretch;
      align-self: stretch;
}
.col-xs--first,
.col--first {
  -webkit-box-ordinal-group: 0;
          order: -1;
}
.col-xs--last,
.col--last {
  -webkit-box-ordinal-group: 2;
          order: 1;
}
.col-xs--ordered,
.col--ordered {
  -webkit-box-ordinal-group: 1;
          order: 0;
}
/**
name: Badge
type: ui
examples:
  - name: Default badge
	tmpl:
		include: ../badge/[docs]/badge.html
  - name: Badge with dot
	tmpl:
		include: ../badge/[docs]/dot-badge.html
  - name: Badge with small dot
	tmpl:
		include: ../badge/[docs]/small-dot-badge.html
*/
.badge {
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  line-height: 32px;
  border-radius: 24px;
  white-space: nowrap;
  color: #0c1026;
}
.badge--top {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.badge--black {
  color: #fff;
}
.badge--bottom {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.badge--dot {
  padding: 8px;
  border-radius: 50%;
  position: absolute;
  left: 0;
}
.badge--dot.badge--small {
  padding: 4px;
}

.badge--lemon {
  background-color: #fefd29;
}

.badge--hot-pink {
  background-color: #ff648c;
}

.badge--blue {
  background-color: #a3deff;
}

.badge--muted-green {
  background-color: #cce6db;
}

.badge--stone {
  background-color: #e8ded3;
}

.badge--light-gray {
  background-color: #d6d6d6;
}

.badge--black {
  background-color: #0c1026;
}

.badge--green {
  background-color: #34a156;
}

.badge--orange {
  background-color: #ff9a1f;
}

.badge--red {
  background-color: #f03d46;
}

.badge--white {
  background-color: #fff;
}

.badge--telenor-blue {
  background-color: #19aaf8;
}

/**
name: Button
type: ui
desc: >
	You can use button styles both for 'button' and 'a' tags.
	For 'button' tag use helper 'RenderButton', for 'a' tag use helper 'RenderLink'
modifiers:
	--default: Displays white colored button with dark border
	--action: Displays blue colored button
	--link: Displays blue colored link (can be used with right arrow) with hover underlined state
	--naked: Removes common button styles and displays button as a plain text
	--stretch: Sets full width of button's container. Useful in grid layout.
examples:
  - name: Default button
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("Button default", ButtonStyle.@default));'
		- '@Html.RenderLink(new LinkOptions("Button default", ButtonStyle.@default, "telenor.dk"));'
		- '@Html.RenderButton(new ButtonOptions("Button default", ButtonStyle.@default) { Disabled = true });'
	tmpl: >
		<button class="button button--default">
			<span class="button__label">Button default</span>
		</button>
		<button class="button button--default" disabled>
			<span class="button__label">Button default disabled</span>
		</button>
  - name: Blue button
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("Button blue", ButtonStyle.action));'
		- '@Html.RenderLink(new LinkOptions("Button blue", ButtonStyle.action, "telenor.dk"));'
		- '@Html.RenderButton(new ButtonOptions("Button blue", ButtonStyle.action) { Disabled = true });'
	tmpl: >
		<button class="button button--action">
			<span class="button__label">Button blue</span>
		</button>
		<button class="button button--action" disabled>
			<span class="button__label">Button blue disabled</span>
		</button>
  - name: Blue button spinner
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("Button with spinner", ButtonStyle.action){DataComponent = ButtonDataComponent.button,UseSpinner = true});'
		- '@Html.RenderLink(new LinkOptions("Button with spinner", ButtonStyle.action){DataComponent = ButtonDataComponent.button,UseSpinner = true});'
	tmpl: >
		<button class="button button--action" data-component="UI::button" data-alias="blueSpinner">
			<span class="button__label">Button with spinner</span>
			<span class="button__spinner">
				<span class="button__spinner-before"></span>
				<span class="button__spinner-after"></span>
				<span class="button__spinner-container"><i></i></span>
			</span>
		</button>
		<button class="button button--default" data-component="UI::button" data-alias="blackSpinner">
			<span class="button__label">Button with spinner</span>
			<span class="button__spinner">
				<span class="button__spinner-before"></span>
				<span class="button__spinner-after"></span>
				<span class="button__spinner-container"><i></i></span>
			</span>
		</button>
		<script>
			document.querySelector('[data-alias="blueSpinner"]')
				.addEventListener('click', function() {
					var component = this.$component;
					component.setLoading();
					setTimeout(function() {
						component && component.resetLoading();
					}, 3000);
				});
				document.querySelector('[data-alias="blackSpinner"]')
				.addEventListener('click', function() {
					var component = this.$component;
					component.setLoading();
					setTimeout(function() {
						component && component.resetLoading();
					}, 3000);
				});
		</script>
  - name: Button with full width
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("Button", ButtonStyle.@default | ButtonStyle.stretch));'
		- '@Html.RenderLink(new LinkOptions("Button", ButtonStyle.@default | ButtonStyle.stretch, "telenor.dk"));'
	tmpl: >
		<button class="button button--default button--stretch">
			<span class="button__label">Button</span>
		</button>
  - name: Link button
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("Button link", ButtonStyle.naked | ButtonStyle.link));'
		- '@Html.RenderLink(new LinkOptions("Button link", ButtonStyle.naked | ButtonStyle.link, "telenor.dk"));'
	tmpl: >
		<button class="button button--naked button--link">
			<span class="button__label">Button link</span>
		</button>
  - name: Link button with left arrow
	dotNet:
		- '@Html.RenderButton(new PrevButtonOptions("Button link", ButtonStyle.naked | ButtonStyle.link));'
		- '@Html.RenderLink(new PrevLinkOptions("Button link", ButtonStyle.naked | ButtonStyle.link, "telenor.dk"));'
	tmpl: >
		<button class="button button--naked button--link">
			<span class="button__label icon--left icon-chevron-left icon--small">Button link</span>
		</button>
  - name: Link button with right arrow
	dotNet:
		- '@Html.RenderButton(new NextButtonOptions("Button link", ButtonStyle.naked | ButtonStyle.link));'
		- '@Html.RenderLink(new NextLinkOptions("Button link", ButtonStyle.naked | ButtonStyle.link, "telenor.dk"));'
	tmpl: >
		<button class="button button--naked button--link">
			<span class="button__label icon--right icon-chevron-right icon--small">Button link</span>
		</button>
  - name: Default button with icon
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("", ButtonStyle.@default) {Classes = "button--icon icon-download icon--medium", RenderInnerSpan = false});'
		- '@Html.RenderLink(new LinkOptions("", ButtonStyle.@default, "telenor.dk") {Classes = "button--icon icon-download icon--medium", RenderInnerSpan = false});'
	tmpl: >
		<button class="button button--default button--icon icon-download icon--medium"></button>
  - name: Icon button
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("", ButtonStyle.naked){Classes = "button--icon icon-close icon--small", RenderInnerSpan = false});'
		- '@Html.RenderLink(new LinkOptions("", ButtonStyle.naked){Classes = "button--icon icon-close icon--small", RenderInnerSpan = false});'
	tmpl: >
		<button class="button button--naked button--icon icon-close icon--small"></button>
 */
.button {
  padding: 0 24px;
  display: inline-block;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  background: none;
  min-width: 96px;
  text-align: center;
  vertical-align: top;
  position: relative;
}
.button:active, .button:hover {
  text-decoration: none;
}
.button__label {
  font-family: Telenor, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 24px;
}
.button--default .button__label, .button--action .button__label, .button--graphite .button__label, .button--alt .button__label {
  line-height: 48px;
}
.button--default {
  background: transparent;
  color: #1a1a1a;
  border-color: #767676;
}
.button--default.button--icon {
  padding: 0 16px;
  min-width: 48px;
}
.button--default.button--icon::before {
  line-height: 48px;
}
.button--default:active, .button--default:hover {
  border-color: #1a1a1a;
}
.button--graphite {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.button--action {
  background: #007ad0;
  border-color: #007ad0;
  color: #fff;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}
.button--action:active {
  background: #005ea0;
}
.button--action:hover {
  background: #006bb7;
}
.button--action[disabled] {
  background: #d6d6d6;
}
.button--naked {
  border: 0;
  background: none;
  padding: 0;
  height: auto;
  min-width: 0;
  text-align: left;
  overflow: visible;
  border-radius: 0;
}
.button--link {
  color: #007ad0;
  text-align: center;
}
.button--link:hover {
  text-decoration: underline;
}
.button[aria-busy=true] .button__spinner-before::before,
.button[aria-busy=true] .button__spinner-after::after {
  background-color: currentColor;
}
.button--stretch {
  width: 100%;
}
.button--icon::before {
  position: relative;
}
.button--icon::after {
  content: "";
  width: 100%;
  height: 100%;
  padding: 16px;
}
.button .icon--right,
.button .icon--left {
  position: relative;
}
.button .icon--right::before,
.button .icon--left::before {
  position: absolute;
  font-size: 16px;
  line-height: 24px;
}
.button .icon--right {
  padding-right: 24px;
}
.button .icon--right::before {
  right: 0;
}
.button .icon--left {
  padding-left: 24px;
}
.button .icon--left::before {
  left: 0;
}
.button__spinner {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  height: 100%;
  width: 48px;
}
.button__spinner-before, .button__spinner-after {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  border-radius: 4px;
}
.button__spinner-before::before, .button__spinner-after::after {
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 4px;
  position: absolute;
  top: 0;
}
.button__spinner-before, .button__spinner-before::before {
  left: 0;
}
.button__spinner-after, .button__spinner-after::after {
  right: 0;
}
.button[aria-busy=true] {
  pointer-events: none;
}
.button[aria-busy=true] .button__label {
  opacity: 0;
}
.button[aria-busy=true] .button__spinner {
  opacity: 1;
}
.button[aria-busy=true] .button__spinner-before {
  -webkit-animation: spinnerBefore 3s linear 0.6s infinite;
          animation: spinnerBefore 3s linear 0.6s infinite;
}
.button[aria-busy=true] .button__spinner-after {
  -webkit-animation: spinnerAfter 3s linear 0.6s infinite;
          animation: spinnerAfter 3s linear 0.6s infinite;
}
.button[aria-busy=true] .button__spinner-before::before {
  -webkit-animation: moveLeft 0.5s linear both;
          animation: moveLeft 0.5s linear both;
}
.button[aria-busy=true] .button__spinner-after::after {
  -webkit-animation: moveRight 0.5s linear both;
          animation: moveRight 0.5s linear both;
}
.button[disabled] {
  color: #767676;
  border-color: #d6d6d6;
  pointer-events: none;
}
.button-grid-row {
  display: -webkit-box !important;
  display: flex !important;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.button--location {
  width: 40px;
  height: 40px;
  min-width: 40px;
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 0 4px;
  background: #fff;
}
.button--location .button__label {
  display: none;
}

.basket-grid-row::before:active, .basket-grid-row::before:hover, .basket-grid-row::after:active, .basket-grid-row::after:hover {
  text-decoration: none !important;
}
.basket-grid-row:hover {
  text-decoration: none;
}
.basket-grid-row:hover span {
  text-decoration: underline;
}
.basket-grid-row:hover span::before, .basket-grid-row:hover span::after {
  text-decoration: none;
}

@-webkit-keyframes moveLeft {
  from {
    left: 16px;
    width: 8px;
  }
  50% {
    left: 0;
    width: 32px;
  }
  to {
    left: 0;
    width: 100%;
  }
}

@keyframes moveLeft {
  from {
    left: 16px;
    width: 8px;
  }
  50% {
    left: 0;
    width: 32px;
  }
  to {
    left: 0;
    width: 100%;
  }
}
@-webkit-keyframes moveRight {
  from {
    right: 16px;
    width: 8px;
  }
  50% {
    right: 0;
    width: 32px;
  }
  to {
    right: 0;
    width: 100%;
  }
}
@keyframes moveRight {
  from {
    right: 16px;
    width: 8px;
  }
  50% {
    right: 0;
    width: 32px;
  }
  to {
    right: 0;
    width: 100%;
  }
}
@-webkit-keyframes spinnerBefore {
  from {
    left: 0;
    width: 8px;
  }
  10% {
    left: 0;
    width: 38px;
  }
  25% {
    left: 30%;
    width: 12px;
  }
  40% {
    left: 0;
    width: 38px;
  }
  50% {
    left: 0;
    width: 8px;
  }
  to {
    left: 0;
    width: 8px;
  }
}
@keyframes spinnerBefore {
  from {
    left: 0;
    width: 8px;
  }
  10% {
    left: 0;
    width: 38px;
  }
  25% {
    left: 30%;
    width: 12px;
  }
  40% {
    left: 0;
    width: 38px;
  }
  50% {
    left: 0;
    width: 8px;
  }
  to {
    left: 0;
    width: 8px;
  }
}
@-webkit-keyframes spinnerAfter {
  from {
    right: 0;
    width: 8px;
  }
  50% {
    right: 0;
    width: 8px;
  }
  60% {
    right: 0;
    width: 38px;
  }
  75% {
    right: 30%;
    width: 12px;
  }
  90% {
    right: 0;
    width: 38.4px;
  }
  to {
    right: 0;
    width: 8px;
  }
}
@keyframes spinnerAfter {
  from {
    right: 0;
    width: 8px;
  }
  50% {
    right: 0;
    width: 8px;
  }
  60% {
    right: 0;
    width: 38px;
  }
  75% {
    right: 30%;
    width: 12px;
  }
  90% {
    right: 0;
    width: 38.4px;
  }
  to {
    right: 0;
    width: 8px;
  }
}
/**
name: Accordion(CSS)
type: ui
desc: >
	1. Only css component to show/collapse information.

	2. It can be used as an independent item, or an item of group of accordions, which display only one opened item.

	3. All main parts of component - 'accordion, accordion\_\_opener, accordion\_\_content' must be sibling tags.
examples:
  - name: Simple accordion
	tmpl:
		include: ../accordion/[docs]/accordion.html

  - name: Group of accordions
	tmpl:
		include: ../accordion/[docs]/accordions-group.html

  - name: Accordions are not showing on desktop
	tmpl:
		include: ../accordion/[docs]/accordions-without-desktop.html
*/
.accordion__opener {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  padding: 24px 24px 24px 0;
  min-height: 16px;
  min-width: 16px;
  font-weight: bold;
}
.accordion__opener::after {
  font-size: 16px !important;
  content: "󱁘";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.is-expanded .accordion__opener::after, .accordion:checked ~ .accordion__opener::after, .accordion:checked ~ .accordion__wrap .accordion__opener::after {
  font-size: 16px !important;
  content: "󱁊";
}
.accordion--only-desktop ~ .accordion__opener::after {
  display: none;
}
.accordion__content {
  overflow: hidden;
  -webkit-animation: accordionClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
          animation: accordionClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
}
.accordion:checked ~ .accordion__content {
  -webkit-animation: accordionOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
          animation: accordionOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
}
.accordion--only-desktop ~ .accordion__content {
  -webkit-animation: none;
          animation: none;
  overflow: visible;
}
.accordion--only-desktop:checked ~ .accordion__content {
  -webkit-animation: none;
          animation: none;
  overflow: visible;
}
.accordion__header {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
}

.without-animation .accordion__content {
  overflow: hidden;
  height: 0 !important;
  max-height: 0 !important;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@-webkit-keyframes accordionOpen {
  0% {
    overflow: hidden;
    max-height: 0;
  }
  99% {
    max-height: 100vh;
  }
  100% {
    overflow: visible;
    max-height: 9999px;
  }
}

@keyframes accordionOpen {
  0% {
    overflow: hidden;
    max-height: 0;
  }
  99% {
    max-height: 100vh;
  }
  100% {
    overflow: visible;
    max-height: 9999px;
  }
}
@-webkit-keyframes accordionClose {
  0% {
    max-height: 9999px;
  }
  1% {
    overflow: hidden;
    max-height: 100vh;
  }
  100% {
    overflow: hidden;
    max-height: 0;
  }
}
@keyframes accordionClose {
  0% {
    max-height: 9999px;
  }
  1% {
    overflow: hidden;
    max-height: 100vh;
  }
  100% {
    overflow: hidden;
    max-height: 0;
  }
}
/**
name: Message
type: ui
desc: >
	# Structure

	1. Message needs required structure, inner holder should have attribute data-element="messageContent" for calculations of height.

	2. __Don't use top/bottom indents for '.message' holder, use it for '.message__inner' holder__

examples:
  - name: Success
	tmpl:
		include: ../message/[docs]/success.html
	dotNet:
		- '@Html.RenderMessage(new ErrorMessageOptions("text")
			{
				IsHidden = false,
				UseComponent = true,
				UseCloseButton = true
			})'
  - name: Multiline
	tmpl:
		include: ../message/[docs]/multiline.html
  - name: Error
	tmpl:
		include: ../message/[docs]/error.html
	dotNet:
		- '@Html.RenderMessage(new ErrorMessageOptions("text")
			{
				IsHidden = false,
				UseComponent = true,
				UseCloseButton = true
			})'
  - name: Warning
	tmpl:
		include: ../message/[docs]/warn.html
	dotNet:
		- '@Html.RenderMessage(new WarnMessageOptions("text")
			{
				IsHidden = false,
				UseComponent = true,
				UseCloseButton = true
			})'
  - name: Informational
	tmpl:
		include: ../message/[docs]/info.html
	dotNet:
		- '@Html.RenderMessage(new InfoMessageOptions("text")
			{
				IsHidden = false,
				UseComponent = true,
				UseCloseButton = true
			})'
  - name: Suggestion
	tmpl:
		include: ../message/[docs]/suggestion.html
	dotNet:
	- '@Html.RenderMessage(new SuggestionMessageOptions("text")
		{
			IsHidden = false,
			UseComponent = true,
			UseCloseButton = true
		})'
  - name: Notification
	tmpl:
		include: ../message/[docs]/notification.html
	dotNet:
		- '@Html.RenderMessage(new NotificationMessageOptions("text")
			{
				IsHidden = false,
				UseComponent = true,
				UseCloseButton = true
			})'
*/
.message {
  overflow: hidden;
  position: relative;
  text-align: left;
}
.message.collapsing {
  -webkit-transition: height 0.5s ease;
  transition: height 0.5s ease;
}
.message__inner {
  padding: 24px;
  width: 100%;
}
.message--info .message__inner {
  background: #f5f5f5;
}
.message--success .message__inner {
  background: #e6eef4;
  border: 1px solid #19aaf8;
  position: relative;
}
.message--success .message__inner::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 100%;
  background: #19aaf8;
  left: 0;
  top: 0;
}
.message--alert .message__inner {
  background: #fdfdc9;
  border: 1px solid #ff9a1f;
  position: relative;
}
.message--alert .message__inner::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 100%;
  background: #ff9a1f;
  left: 0;
  top: 0;
}
.message--error .message__inner {
  color: #1a1a1a;
  background: #fff0f4;
  border: 1px solid #ff648c;
  position: relative;
}
.message--error .message__inner::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 100%;
  background: #ff648c;
  left: 0;
  top: 0;
}
.message--suggestion .message__inner {
  background: #fff;
}
.message--notification .message__inner {
  background: #e6eef4;
}
.message__text {
  font-size: 16px;
  line-height: 24px;
}
.message__close {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  position: absolute;
  right: 24px;
}
.message__close + .message__text {
  padding-right: 40px;
}
.message--closed {
  height: 0;
}

/**
name: List
type: ui
desc: >
    # Structure

    1. list needs required structure, use 'ul > li' structure with class '.list' for display default list view, and add class '.list' with needed modifier to change list view.

    2. wrapping tag in examples is just for clearer understanding, does not have to be used necessarily.

examples:
  - name: Default
    tmpl:
      include: ../list/[docs]/list-default.html
  - name: List numeric
    tmpl:
      include: ../list/[docs]/list-numeric.html
  - name: List check
    tmpl:
      include: ../list/[docs]/list-check.html
  - name: List white
    tmpl:
      include: ../list/[docs]/list-white.html
  - name: List reset
    tmpl:
      include: ../list/[docs]/list-reset.html
*/
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul ul,
ul ol,
ol ul,
ol ol {
  margin: 8px 0 0 24px;
}

ul > li {
  margin: 0 0 8px;
  padding-left: 24px;
  position: relative;
}
ul > li::before {
  content: "●";
  line-height: inherit;
  position: absolute;
  left: 0;
  top: 0;
}

ol {
  counter-reset: item;
}
ol ol {
  counter-reset: item;
}
ol > li {
  margin: 0 0 8px;
}
ol > li::before {
  margin-right: 4px;
  content: counters(item, ".") ".";
  counter-increment: item;
}

.list--check > li {
  position: relative;
  padding-left: 24px;
}
.list--check > li::before {
  font-size: 16px !important;
  content: "󱀐";
  line-height: inherit;
  position: absolute;
  left: 0;
  top: 0;
}
.list--check > li.icon--inline {
  padding-left: 0;
}
.list--white > li {
  color: #fff;
}
.list--white > li::before {
  color: #fff;
}
.list--reset {
  margin: 0;
  padding: 0;
}
.list--reset > li {
  margin: 0;
  padding: 0;
}
.list--reset > li::before {
  margin: 0;
  padding: 0;
  content: none;
}

/**
name: Tooltip
type: ui
examples:
  - name: Error tip
	tmpl:
		include: ../tooltip/[docs]/error.html
  - name: Info tip
	tmpl:
		include: ../tooltip/[docs]/info.html
*/
@-webkit-keyframes dropTooltip {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes dropTooltip {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.tooltip {
  background: #e6eef4;
  border-radius: 3px;
  padding: 24px;
  pointer-events: none;
  max-width: 264px;
  position: absolute;
  z-index: 100;
  -webkit-animation: 0.1s ease-out dropTooltip;
          animation: 0.1s ease-out dropTooltip;
}
.tooltip__trigger {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
}
.tooltip__trigger::before {
  color: currentColor;
  vertical-align: middle;
}
.tooltip__trigger .tooltip {
  display: none;
}
.tooltip--error {
  background: #ffb4b4;
}
.tooltip--fixed {
  background-color: #fefd29;
}
.modal-box--is-open .tooltip {
  z-index: 5002;
}

/**
  name: Progress Tracker
  type: ui
  examples:
	Progress Tracker:
		include: ../progress-tracker/[docs]/tracker.html
	Progress Tracker Completed:
		include: ../progress-tracker/[docs]/tracker-completed.html
*/
.progress-tracker {
  counter-reset: progress-tracker;
}
.progress-tracker__holder {
  position: static;
}
.progress-tracker__item {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  counter-increment: progress-tracker;
  position: relative;
  color: #d6d6d6;
  border: 2px solid #d6d6d6;
  border-radius: 50%;
  text-align: center;
  z-index: 1;
  font-size: 12px;
  line-height: 20px;
}
.progress-tracker__item::before {
  position: relative;
  color: #fff;
  font-size: 16px !important;
  content: "󱀐";
  font-size: inherit !important;
  display: none;
}
.passed-step .progress-tracker__item::before {
  display: block;
}
.current-step.passed-step .progress-tracker__item::before {
  color: #19aaf8;
}
.progress-tracker__item::after {
  font-weight: bold;
  content: counter(progress-tracker);
}
.passed-step .progress-tracker__item::after {
  display: none;
}
.current-step .progress-tracker__item {
  color: #19aaf8;
  border-color: #19aaf8;
}
.passed-step .progress-tracker__item {
  border-color: #19aaf8;
  background: #19aaf8;
}
.current-step.passed-step .progress-tracker__item {
  background: none;
}
.desktop-size .progress-tracker__item {
  width: 32px;
  height: 32px;
  font-size: 14px;
  line-height: 28px;
}
.desktop-size .progress-tracker__item::after {
  content: attr(data-number);
}
.passed-step .desktop-size .progress-tracker__item {
  font-size: 16px;
  line-height: 24px;
}
.progress-tracker__line {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 100%;
  height: 1px;
}
.progress-tracker__line::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  height: 100%;
  background: #d6d6d6;
}
.current-step .progress-tracker__line::before, .passed-step .progress-tracker__line::before {
  background: #19aaf8;
}
.progress-tracker > li:first-child .progress-tracker__line {
  display: none;
}

/**
name: Number
type: ui
examples:
  - name: number
	dotNet:
		- '@Html.RenderNumber(new NumberOptions{ DataAlias = "quantity", Min = 1, Max = 99, Name = "quantity", Value = 1})'
	tmpl:
		include: ../number/[docs]/number.html
  - name: number without borders
	dotNet:
		- '@Html.RenderNumber(new NumberOptions{ DataAlias = "quantity", Min = 1, Max = 99, Name = "quantity", Value = 1})'
	tmpl:
		include: ../number/[docs]/number-without-borders.html
*/
.number__wrapper {
  position: relative;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  width: 96px;
  padding-left: 32px;
  text-align: left;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  height: 48px;
  overflow: hidden;
  z-index: 1;
}
.number__wrapper.number--without-border {
  border: 0;
}
.number__field {
  padding: 0;
  border: 0;
  text-align: center;
  height: 100%;
  width: 32px;
  background: #fff;
  outline: none;
  font-size: 18px;
  line-height: 48px;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.number__field::-webkit-inner-spin-button, .number__field::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.number__field:active, .number__field:hover, .number__field:focus {
  border: 0;
}
.number__field:disabled ~ .number__control {
  color: #d6d6d6;
  pointer-events: none;
}
.number__field:disabled {
  color: #d6d6d6;
  background: #fff;
}
.number__control {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #d6d6d6;
  background: none;
}
.number--without-border .number__control {
  border-color: transparent;
}
.number__control::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: -1;
}
.number__control:focus {
  outline: none;
}
.number__control:hover {
  color: #767676;
}
.number__control:hover::after {
  background: #f5f5f5;
}
.number--without-border .number__control:hover::after {
  background: #fff;
}
.number__control--decrease {
  left: 0;
  border-width: 0 1px 0 0;
}
.number__control--decrease::before {
  font-size: 16px !important;
  content: "󱁊";
}
.number__control--increase {
  right: 0;
  border-width: 0 0 0 1px;
}
.number__control--increase::before {
  font-size: 16px !important;
  content: "󱁘";
}

/**
name: Form input
type: ui
desc: >
	You can use class 'form__field' __only__ as input parent. Don't place labels or other tags inside, because it can break positioning of error icons.
examples:
  - name: Inputs and Labels
	dotNet:
		- '@Html.LabelFor(x => x.Name, "Some label")'
		- '<div class="form__field">'
		- '    @Html.TextBoxFor(x => x.Name)'
		- '    @Html.RenderValidationMessageFor(x => x.Name)'
		- '</div>'
	tmpl:
		include: ../input/[docs]/inputs.html
*/
.form__field {
  position: relative;
}
.form__field input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #0c1026;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 3px;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  height: 48px;
  line-height: normal;
  -webkit-transition: border-color 1s;
  transition: border-color 1s;
}
.form__field input::-webkit-input-placeholder {
  color: #d6d6d6;
}
.form__field input::-moz-placeholder {
  color: #d6d6d6;
}
.form__field input:-ms-input-placeholder {
  color: #d6d6d6;
}
.form__field input::-ms-input-placeholder {
  color: #d6d6d6;
}
.form__field input::placeholder {
  color: #d6d6d6;
}
.form__field input:hover, .form__field input:focus {
  border-color: #007ad0;
}
.form__field input[disabled] {
  background: #d6d6d6;
  border-color: #d6d6d6;
}
.form__field input[disabled]::-webkit-input-placeholder {
  color: #767676;
}
.form__field input[disabled]::-moz-placeholder {
  color: #767676;
}
.form__field input[disabled]:-ms-input-placeholder {
  color: #767676;
}
.form__field input[disabled]::-ms-input-placeholder {
  color: #767676;
}
.form__field input[disabled]::placeholder {
  color: #767676;
}
.form__field .tooltip-trigger-marker {
  display: none;
}
.form__field::before {
  position: absolute;
  top: 24px;
  right: 16px;
  z-index: 1;
  color: #0c1026;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.form__field::after {
  content: attr(data-description);
  font-size: 14px;
  line-height: 20px;
}
.form__field.error input {
  background: #fff0f4;
  border-color: #ff648c;
  padding-right: 32px;
}
.form__field.error input::-webkit-input-placeholder {
  color: #767676;
}
.form__field.error input::-moz-placeholder {
  color: #767676;
}
.form__field.error input:-ms-input-placeholder {
  color: #767676;
}
.form__field.error input::-ms-input-placeholder {
  color: #767676;
}
.form__field.error input::placeholder {
  color: #767676;
}
.form__field.error::before {
  font-size: 16px !important;
  content: "󱀱";
}
.form__field.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #f03d46;
  font-size: 14px;
  line-height: 20px;
}
.form label, .form__label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #1a1a1a;
}

/**
name: Form textarea
type: ui
examples:
  - name: Textarea and Labels
	tmpl:
		include: ../textarea/[docs]/textarea.html
*/
.form__field textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #0c1026;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 3px;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  padding: 12px 16px;
  height: auto;
  line-height: normal;
  -webkit-transition: border-color 1s;
  transition: border-color 1s;
}
.form__field textarea::-webkit-input-placeholder {
  color: #d6d6d6;
}
.form__field textarea::-moz-placeholder {
  color: #d6d6d6;
}
.form__field textarea:-ms-input-placeholder {
  color: #d6d6d6;
}
.form__field textarea::-ms-input-placeholder {
  color: #d6d6d6;
}
.form__field textarea::placeholder {
  color: #d6d6d6;
}
.form__field textarea:hover, .form__field textarea:focus {
  border-color: #007ad0;
}
.form__field textarea[disabled] {
  background: #d6d6d6;
  border-color: #d6d6d6;
}
.form__field.error textarea::-webkit-input-placeholder {
  color: #767676;
}
.form__field.error textarea::-moz-placeholder {
  color: #767676;
}
.form__field.error textarea:-ms-input-placeholder {
  color: #767676;
}
.form__field.error textarea::-ms-input-placeholder {
  color: #767676;
}
.form__field.error textarea::placeholder {
  color: #767676;
}
.form__field.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #f03d46;
  font-size: 14px;
  line-height: 20px;
}
.form__field.disabled textarea {
  background: #d6d6d6;
  border-color: #d6d6d6;
}
.form__field.disabled textarea::-webkit-input-placeholder {
  color: #767676;
}
.form__field.disabled textarea::-moz-placeholder {
  color: #767676;
}
.form__field.disabled textarea:-ms-input-placeholder {
  color: #767676;
}
.form__field.disabled textarea::-ms-input-placeholder {
  color: #767676;
}
.form__field.disabled textarea::placeholder {
  color: #767676;
}
.form__textarea.error::before {
  content: "";
}

/**
name: Form checkbox
type: ui
examples:
  - name: Checkbox
	tmpl:
		include: ../checkbox/[docs]/checkbox.html
  - name: Toggle
	tmpl:
		include: ../checkbox/[docs]/toggle.html
  - name: Small toggle
	tmpl:
		include: ../checkbox/[docs]/toggle_small.html
*/
.form__checkbox label {
  display: inline-block;
  position: relative;
  font-size: 18px;
  line-height: 24px;
  padding-left: 32px;
  margin-bottom: 0;
}
.form__checkbox label::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  border: 2px solid #767676;
  border-radius: 3px;
  color: #fff;
  background: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  width: 24px;
  height: 24px;
}
.form__checkbox label:hover::before {
  border-color: #1a1a1a;
}
.form__checkbox input:checked ~ label::before {
  font-size: 16px !important;
  content: "󱀐";
  background: #007ad0;
  border-color: #007ad0;
}
.toggle {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 32px;
  margin: 0;
}
.toggle__slider {
  display: block;
  border-radius: 16px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d6d6d6;
}
.toggle__slider::before {
  border-radius: 50%;
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
input:checked + .toggle__slider {
  background-color: #007ad0;
}
input:checked + .toggle__slider::before {
  -webkit-transform: translateX(32px);
          transform: translateX(32px);
}
input:hover + .toggle__slider {
  background-color: #1a1a1a;
  opacity: 0.1;
}
input:hover:checked + .toggle__slider {
  background-color: #007ad0;
  opacity: 1;
}
.toggle__small {
  height: 24px;
  width: 48px;
}
.toggle__small .toggle__slider::before {
  height: 16px;
  width: 16px;
}
.toggle__small input:checked + .toggle__slider::before {
  -webkit-transform: translateX(24px);
          transform: translateX(24px);
}

/**
name: Form radio
type: ui
examples:
  - name: Radio
	tmpl:
		include: ../radio/[docs]/radio.html
*/
.form__radio label {
  display: inline-block;
  position: relative;
  font-size: 18px;
  line-height: 24px;
  padding-left: 32px;
  line-height: 24px;
  margin-bottom: 0;
}
.form__radio label::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  border: 2px solid #767676;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
.form__radio label::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 12px;
  height: 12px;
  background: #007ad0;
  border-radius: 50%;
  display: none;
}
.form__radio label:hover::before {
  border-color: #1a1a1a;
}
.form__radio input:checked + label::before,
.form__radio input:focus + label::before {
  border-color: #007ad0;
}
.form__radio input:checked + label::after,
.form__radio input:focus + label::after {
  display: block;
}
.form__radio input[disabled] + label {
  color: #d6d6d6;
}
.form__radio input[disabled] + label::before {
  border-color: #d6d6d6;
}

/**
name: Form select
type: ui
examples:
  - name: Select
	tmpl:
		include: ../select/[docs]/select.html
*/
.form__select {
  width: 100%;
  position: relative;
}
.form__select::before {
  position: absolute;
  right: 16px;
  top: 24px;
  pointer-events: none;
  line-height: 1;
  font-size: 16px !important;
  content: "󱀓";
}
.form__select select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #0c1026;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 3px;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  height: 48px;
  padding-right: 48px;
  cursor: pointer;
}
.form__select select::-ms-expand {
  display: none;
}
.form__select select:focus {
  border-color: #007ad0;
}
.form__select.error select {
  background: #fff0f4;
  border-color: #ff648c;
}
.form__select.error::before {
  color: #1a1a1a;
}
.form__select.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #f03d46;
  font-size: 14px;
  line-height: 20px;
}
.form__select.disabled select {
  background: #d6d6d6;
  border-color: #d6d6d6;
  color: #767676;
}
.form__select.disabled::before {
  color: #767676;
}
.form__select.disabled::after {
  content: "";
}

/**
name: Form search
type: ui
examples:
  - name: Search
	tmpl:
		include: ../search/[docs]/search.html
  - name: Search in error state
	tmpl:
		include: ../search/[docs]/search-error.html
  - name: Search large
	tmpl:
		include: ../search/[docs]/search_large.html
  - name: Search large in error state
	tmpl:
		include: ../search/[docs]/search_large-error.html
*/
.form__search input[type=search] {
  padding-left: 56px;
  padding-right: 48px;
}
.form__search.error::before, .form__search::before {
  font-size: 24px !important;
  content: "󱁣";
  left: 16px;
  right: auto;
}
.form__search-clear {
  position: absolute;
  top: 16px;
  right: 16px;
}
.form__search__large .form__search-clear {
  top: 32px;
  right: 24px;
}
.form__search-clear::before {
  font-size: 16px !important;
  content: "󱀗";
}
.form__search__large input[type=search] {
  height: 80px;
  padding-left: 72px;
}
.form__search__large__without-border input[type=search] {
  border-color: transparent;
  -webkit-transition: none;
  transition: none;
}
.form__search__large.error::before, .form__search__large::before {
  left: 32px;
  top: 40px;
}

/**
name: Form validation
type: ui
examples:
  - name: Form validation
	tmpl:
		include: ../form/[docs]/validation.html
 */
/**
name: Radiobutton-row
type: ui
examples:
  - name: Radiobutton-row
    tmpl:
      include: ../radiobutton-row/[docs]/radiobutton-row.html
  - name: Radiobutton-row grey
    tmpl:
      include: ../radiobutton-row/[docs]/radiobutton-row--grey.html
  - name: Radiobutton-row small
    tmpl:
      include: ../radiobutton-row/[docs]/radiobutton-row--small.html
  - name: Radiobutton-row icons only
    tmpl:
      include: ../radiobutton-row/[docs]/radiobutton-row--icons-only.html
*/
.radiobutton-row {
  display: -webkit-box;
  display: flex;
  height: 48px;
}
.radiobutton-row__element,
.radiobutton-row label {
  display: inline-block;
  height: 48px;
  line-height: 48px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  background: none;
  margin-bottom: 0;
  min-width: 96px;
  text-align: center;
  vertical-align: top;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #d6d6d6;
  padding: 0 24px;
  border-right-width: 0;
}
.radiobutton-row__element:hover,
.radiobutton-row label:hover {
  border-color: #1a1a1a;
}
.radiobutton-row__element:hover:last-child,
.radiobutton-row label:hover:last-child {
  border-right-color: #1a1a1a;
}
.radiobutton-row__element:hover.single,
.radiobutton-row label:hover.single {
  border-radius: 3px;
}
.radiobutton-row__element:nth-child(2),
.radiobutton-row label:nth-child(2) {
  border-radius: 3px 0 0 3px;
}
.radiobutton-row__element:last-child,
.radiobutton-row label:last-child {
  border-radius: 0 3px 3px 0;
  border-right: 1px solid #d6d6d6;
}
.radiobutton-row__element.single,
.radiobutton-row label.single {
  border-radius: 3px;
}
.radiobutton-row__element .icon,
.radiobutton-row label .icon {
  margin-right: 16px;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  vertical-align: middle;
  display: inline-block;
  font-size: 16px;
}
.radiobutton-row__element .icon::before,
.radiobutton-row label .icon::before {
  vertical-align: middle;
}
.radiobutton-row__element.active,
.radiobutton-row label.active {
  color: #fff;
  background: #1a1a1a;
}
.radiobutton-row input:checked + label {
  color: #fff;
  background: #1a1a1a;
}
.radiobutton-row input:disabled + label {
  opacity: 0.5;
}
.radiobutton-row--icons-only .icon {
  margin-right: 0;
}
.radiobutton-row--grey input:checked + label {
  border-color: transparent;
}

/**
name: Divider block
type: ui
desc: >
	# Structure
	1. Use class '.divider-block' with modifier for mobile and desktop views and '.desktope-divider-block' with modifier only for desktop;
	2. Separator needs required structure, add '.divider-block--stroke' class to divider block and put into a separator's block with class '.divider-block__separator' to add line separator.

modifiers:
	--none: uses height 0px;
	--small: uses height 16px;
	--medium: uses height 24px;
	--large: uses height 32px;
	--xlarge: uses height 48px;
	--xxlarge: uses height 64px;
	--xxxlarge: uses height 96px;

examples:
  - name: Divider block none
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-none.html
  - name: Divider block none with separator
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-none-separator.html
  - name: Divider block xsmall
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-xsmall.html
  - name: Divider block xsmall with separator
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-xsmall-separator.html
  - name: Divider block small
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-small.html
  - name: Divider block small with separator
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-small-separator.html
  - name: Divider block medium
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-medium.html
  - name: Divider block medium with separator
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-medium-separator.html
  - name: Divider block large
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-large.html
  - name: Divider block large with separator
	tmpl:
		include: ../divider-blocks/[docs]/divider-block-large-separator.html
*/
.divider-block {
  width: 100%;
}
.divider-block [class*=col] {
  min-height: 0;
}
.divider-block [class*=col] + .divider-block [class*=col] {
  padding-left: 12px;
  padding-right: 12px;
}
.divider-block--stroke .divider-block__separator {
  height: 1px;
  background: #d6d6d6;
}
.divider-block--none {
  padding: 0;
}
.divider-block--small {
  padding-top: 8px;
  padding-bottom: 8px;
}
.divider-block--medium {
  padding-top: 12px;
  padding-bottom: 12px;
}
.divider-block--large {
  padding-top: 16px;
  padding-bottom: 16px;
}
.divider-block--xlarge {
  padding-top: 24px;
  padding-bottom: 24px;
}
.divider-block--xxlarge {
  padding-top: 32px;
  padding-bottom: 32px;
}
.divider-block--xxxlarge {
  padding-top: 48px;
  padding-bottom: 48px;
}

/**
name: Modal Box
type: ui
desc: >
	Shows content in a Lightbox. Adds overlay around the content.
examples:
	-
		name: Lightbox
		tmpl:
			include: ../modal-box/[docs]/popup.html
	-
		name: Lightbox with lots of content
		tmpl:
			include: ../modal-box/[docs]/popup-with-scroll.html
	-
		name: Lightbox with lots of content(Second case)
		tmpl:
			include: ../modal-box/[docs]/popup-with-scroll-into.html
	-
		name: Lightbox with dark overlay
		tmpl:
			include: ../modal-box/[docs]/popup-dark-overlay.html
	-
		name: Error lightbox
		tmpl:
			include: ../modal-box/[docs]/error-popup.html
	-
		name: external popup
		tmpl:
			include: ../modal-box/[docs]/external-popup.html
*/
/* prevent showing popup content before JS is working */
[data-component="Framework::modal-box"], [data-component="UI::modal-box"] {
  display: none;
}

.modal-box__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  display: -webkit-box;
  display: flex;
  z-index: 5001;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
          align-items: center;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0s ease 0.2s;
  transition: -webkit-transform 0s ease 0.2s;
  transition: transform 0s ease 0.2s;
  transition: transform 0s ease 0.2s, -webkit-transform 0s ease 0.2s;
  padding-top: 24px;
}
.modal-box__overlay.modal-box--is-open {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.modal-box__overlay.modal-box--is-open::before {
  opacity: 0.5;
}
.modal-box__overlay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #0c1026;
  -webkit-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
}
.modal-box--overlay-dark::before {
  background: #1a1a1a;
  opacity: 1;
}
.modal-box__content {
  background-color: #fff;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  white-space: normal;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  -webkit-transition: max-height 0.2s cubic-bezier(0.6, 0, 1, 0.2), -webkit-transform 0.4s ease-out;
  transition: max-height 0.2s cubic-bezier(0.6, 0, 1, 0.2), -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out, max-height 0.2s cubic-bezier(0.6, 0, 1, 0.2);
  transition: transform 0.4s ease-out, max-height 0.2s cubic-bezier(0.6, 0, 1, 0.2), -webkit-transform 0.4s ease-out;
  overflow-y: auto;
  max-height: 100vh;
}
.modal-box--is-open .modal-box__content {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.modal-box__content__body {
  max-height: 48vh;
  overflow-y: auto;
}
.modal-box__content[aria-busy=true] {
  max-height: 160px;
  height: 160px;
}
.modal-box__body {
  overflow-y: auto;
}
.modal-box__separator {
  border-bottom: 1px solid #d6d6d6;
  padding-top: 24px;
  margin-bottom: 12px;
  padding-left: 0;
  padding-right: 0;
  margin-left: -24px;
  margin-right: -24px;
}
.modal-box__telenor-icon::before {
  display: none;
}
html.modal-box--is-open {
  overflow: visible;
}
html.modal-box--is-open body {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.modal-box--login {
  z-index: 5002;
}
.modal-box--error {
  z-index: 5003;
}

/**
name: Filter
type: UI
examples:
  - name: filter
	tmpl:
		include: ../filter/[docs]/filter.html
*/
.filter__list [type=checkbox]:checked + .filter__label, .filter__list [type=radio]:checked + .filter__label {
  color: #fff;
  background: #007ad0;
  border-color: #007ad0;
}
.filter__item {
  display: inline-block;
  margin: 0 8px 8px 0;
}
.filter__label {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  border: 1px solid #767676;
  border-radius: 3px;
  cursor: pointer;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.filter__caption {
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
}
.filter__item--small .filter__label {
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
}

/**
name: Range slider
type: ui
modifiers:
  --single: Singe slider
examples:
  - name: Range slider
	tmpl:
		 include: ../range-slider/[docs]/range-slider.html
  - name: Range slider (Become select on Mobile Version)
	tmpl:
		include: ../range-slider/[docs]/range-slider-select.html
  - name: Single slider
	tmpl:
		include: ../range-slider/[docs]/single-slider.html
  - name: Single slider (Become select on Mobile Version)
	tmpl:
		include: ../range-slider/[docs]/single-slider-select.html
  - name: Range 6
	tmpl:
		include: ../range-slider/[docs]/range-without-points-6.html
  - name: Range 12
	tmpl:
		include: ../range-slider/[docs]/range-without-points-12.html
  - name: Range 36
	tmpl:
		include: ../range-slider/[docs]/range-without-points-36.html
*/
.range-slider {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  padding: 16px 0;
}
.range-slider-line {
  position: absolute;
  top: -44px;
}
.range-slider__point {
  position: absolute;
  background: #19aaf8;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  top: 50%;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.range-slider__point-from {
  margin-left: -12px;
  left: 0;
}
.range-slider__point-to {
  margin-right: -12px;
  right: 0;
}
.range-slider__point .tooltip__trigger {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}
.range-slider__point:hover {
  -webkit-box-shadow: 0 0 0 8px rgba(25, 170, 248, 0.08);
          box-shadow: 0 0 0 8px rgba(25, 170, 248, 0.08);
}
.range-slider__values {
  line-height: 24px;
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  display: -webkit-box;
  display: flex;
  position: relative;
  color: #a3deff;
}
.range-slider__values li {
  margin: 0;
  list-style: none;
  -webkit-box-flex: 1;
          flex: 1;
  text-align: right;
  padding-left: 0;
}
.range-slider__values li:first-child {
  position: absolute;
  text-align: left;
}
.range-slider__values li:first-child .range-slider__value::before {
  display: none;
}
.range-slider__values li:first-child .range-slider__value-item {
  -webkit-transform: none;
          transform: none;
  text-align: left;
}
.range-slider__values li:last-child .range-slider__value::before {
  display: none;
}
.range-slider__values li:last-child .range-slider__value-item {
  -webkit-transform: none;
          transform: none;
}
.range-slider__values li::before {
  content: "";
  margin: 0;
}
.range-slider__value {
  position: relative;
  display: block;
}
.range-slider__value::before {
  border-left: 2px solid #fff;
  content: "";
  opacity: 0.24;
  height: 8px;
  position: absolute;
  right: -1px;
  top: -24px;
  z-index: 1;
}
.range-slider__value-md-visible::before {
  display: none;
}
.range-slider__value-line {
  width: 100%;
  display: block;
  height: 16px;
  position: absolute;
  top: -28px;
  left: 0;
  background-color: #e6eef4;
}
.range-slider__value-item {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  display: none;
  color: #0c1026;
}
.range-slider__value-item-visible {
  display: inline-block;
}
.range-slider--single {
  cursor: pointer;
}
.range-slider li:nth-child(1) > .range-slider__value > .range-slider__value-line {
  display: none;
}
.range-slider li:nth-child(2) > .range-slider__value > .range-slider__value-line {
  border-radius: 12px 0 0 12px;
}
.range-slider li:last-child > .range-slider__value > .range-slider__value-line {
  border-radius: 0 12px 12px 0;
}

.datatable .margin-toleft--auto {
  margin-left: auto;
}
.datatable--border-top {
  border-top: 1px solid #f5f5f5;
}
.datatable table {
  border: none;
  width: 100%;
}
.datatable__scroll-holder {
  overflow-x: auto;
}
.datatable__scroll-holder::-webkit-scrollbar-track {
  background-color: #fff;
}
.datatable__scroll-holder::-webkit-scrollbar {
  height: 12px;
  background-color: #fff;
}
.datatable__scroll-holder::-webkit-scrollbar-thumb {
  background-color: #d6d6d6;
}
.datatable__scroll-holder .context-popup__overlay {
  top: 0;
}
.datatable__scroll-helper {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 72px;
  bottom: 12px;
  width: 32px;
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(127.71%, rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 127.71%);
  -webkit-transition: opacity 0.5s ease-in;
  transition: opacity 0.5s ease-in;
  z-index: 1;
}
table + .datatable__scroll-helper {
  left: auto;
  right: 0;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.datatable__scroll-helper.invisible {
  opacity: 0;
}
.datatable__scroll-helper.hidden {
  z-index: -1;
}
.datatable__scroll-helper::before {
  font-size: 16px !important;
  content: "󱀔";
  border-radius: 50%;
  padding: 8px;
  margin-left: 16px;
  background: #e6eef4;
  -webkit-animation: helperMove 1s infinite alternate linear;
          animation: helperMove 1s infinite alternate linear;
}
.datatable tr:hover {
  background: #f5f5f5;
}
.datatable th {
  height: 72px;
  background: #e6eef4;
  padding: 0 12px;
  white-space: nowrap;
}
.datatable th:first-child {
  padding-left: 24px;
}
.datatable td {
  height: 64px;
  padding: 0 12px;
  border-top: 1px solid #f5f5f5;
}
.datatable td:first-child {
  padding-left: 24px;
}
.datatable thead + tbody tr:first-child td {
  border-top: 0;
}
.datatable__expand {
  padding-left: 0 !important;
}
.datatable__filters {
  overflow: hidden;
}
.datatable__opener {
  display: none;
}
.datatable th.form__radio,
.datatable th.form__checkbox,
.datatable td.form__radio,
.datatable td.form__checkbox {
  width: 48px;
}
.datatable th.form__radio label,
.datatable th.form__checkbox label,
.datatable td.form__radio label,
.datatable td.form__checkbox label {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  display: block;
}
.datatable__bar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.datatable .loader__overlay {
  z-index: 1;
}

@-webkit-keyframes helperMove {
  from {
    left: 40%;
  }
  to {
    left: 60%;
  }
}

@keyframes helperMove {
  from {
    left: 40%;
  }
  to {
    left: 60%;
  }
}
.sorting {
  cursor: pointer;
  position: relative;
}
.sorting:hover, .sorting__asc, .sorting__desc {
  -webkit-box-shadow: inset 0 -2px 0 0 #007ad0;
          box-shadow: inset 0 -2px 0 0 #007ad0;
}
.sorting__asc .sorting__icon, .sorting__desc .sorting__icon {
  padding-right: 32px;
}
.sorting__icon::after {
  position: absolute;
  right: 0;
  font-weight: bold;
}
.sorting__asc .sorting__icon::after {
  font-size: 16px !important;
  content: "󱀖";
}
.sorting__desc .sorting__icon::after {
  font-size: 16px !important;
  content: "󱀓";
}

.column-selector {
  position: absolute;
  top: 100%;
  right: 0;
}
.column-selector__opener {
  border: 0;
  background: #fff;
  padding: 0 16px;
  color: #007ad0;
  font-size: 14px;
  line-height: 48px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}
.multi-filter__overlay.context-popup--is-open {
  display: block;
}

.filter-row .datepicker::before,
.filter-row .form__field input {
  border: none;
  font-size: 16px;
  line-height: 48px;
}

.filter-row .form__search {
  border-bottom: 1px solid #d6d6d6;
}
.filter-row .form__search-clear, .filter-row .form__search::before {
  top: 36px;
}
.filter-row .form__search input {
  height: 72px;
  border-radius: 0;
}

.filter-row .button__label {
  font-size: 16px;
  line-height: 24px;
}

.filter-row .form__select {
  border-bottom: 1px solid #d6d6d6;
}
.filter-row .form__select::before {
  top: 36px;
}
.filter-row .form__select select {
  border: none;
  font-size: 16px;
  line-height: 72px;
  height: 72px;
  border-radius: 0;
}

.filter-row .date__field {
  border-bottom: 1px solid #d6d6d6;
}
.filter-row .date__field input {
  height: 72px;
  border-radius: 0;
}

.filter-row .date__clear,
.filter-row .date__calendar {
  border: 0;
}

.filter-row .date__picker {
  -webkit-transform: translate(0, -1px);
          transform: translate(0, -1px);
}

/**
name: Tables
type: ui
desc: >

	# __Structure__

	1. 'tables' requires thead structure for generation bodies. It maps content data for th cells data

	2. 'tables' generates __tbody__ for __every__ data row

	3. Each row is a component with group 'rows'. It stores row's data set in $options.value

	4. thead cell includes settings for column generation

		1. data-key - key in json row's data, to get value for cell
		2. data-sortable - sets sorting ability of columns. Configures in EpiServer for each column
		__If sets manually, requires class 'sorting' for th cell__
		3. data-label - label for column's header. If missed, uses data-key value

	# __Extensions__

	1. Linkable. Handles clicks on rows and allows to redirect page to another url. Requires:
		1. data attribute 'rowSelectionAction' with key in json row's data, to get action url
		2. data attribute 'preventLinkable', which prevent page of redirecting to action url. Accepts __only__ boolean values

	2. Selectable. Adds functionality to get a selection of some rows. Requires:
		1. cell in thead section with attribute data-key="Checkbox"
		2. checkbox component with alias 'selectAll' in this cell in thead section

	3. Column Selector. Adds functionality to show/hide displayed columns. You can display at least one column up to all columns.

	# __Filters__

	1. Each filter should be placed in component 'tables/filters'

	2. Each filter requires attribute __data-group='filters'__ and attribute _data-column_ with filter's name

	3. There are six types of filters:
		1. search
		2. date-range
		3. select
		4. multi select
		5. checkbox
		6. dataset - special filter with custom name and type

	4. All filters can be collapsed in any responsive view. For collapsing, component 'filters' requires:
		1. collapsing trigger marked as data-element="mobileFilterToggle"
		2. collapsing content marked as data-element="mobileFiltersContainer"
		3. data attribute data-mobile-class with class name to hide/show collapsing content, ex. data-mobile-class="mobile-hidden"
		4. corresponding classes to hide/show for trigger and content holders

	# __Pagination__

	1. 'Tables' can show __only__ 2 different pagination views:
		1. with pager (shows page current number). Also can show 'page size' select (optionally)
		2. with 'Load more' button

	2. 'Tables' __always__ generates one of these two views

	3. If 'page size' select is missed, 'Tables' uses default page size value (equals 10)

	4. 'Tables' hides pager, if there is only one page to display


	# __Appearance__

	1. You have to add additional classes using property 'tableCssClasses' in table .net helper

examples:
  - name: Table with static content (js works only for scrolling arrows)
    tmpl:
    	include: ../tables/[docs]/simple-table.html

  - name: Table
    tmpl:
    	include: ../tables/[docs]/table.html
  - name: Table with datepicker
    tmpl:
    	include: ../tables/[docs]/table_datepicker.html
  - name: Table column selector
    tmpl:
    	include: ../tables/[docs]/table_column_selector.html
*/
/**
name: Loader
type: ui
examples:
  - name: Loader
    tmpl:
		include: ../loader/[docs]/loader-static.html
  - name: Loader overlay
    tmpl:
		include: ../loader/[docs]/loader-overlay.html
  - name: Loader overlay extensions
    tmpl:
		include: ../loader/[docs]/loader-extension.html
*/
.loader--centered {
  display: inline-block;
}
.loader__image {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  vertical-align: middle;
  -webkit-animation: rotation 1.5s cubic-bezier(0.28, 0, 0.58, 1) infinite;
          animation: rotation 1.5s cubic-bezier(0.28, 0, 0.58, 1) infinite;
}
.loader__overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: rgba(255, 255, 255, 0.9);
}
.loader--gray .loader__overlay {
  background: rgba(245, 245, 245, 0.9);
}
.loader--light-gray .loader__overlay {
  background: rgba(214, 214, 214, 0.9);
}
.loader__overlay--fullscreen {
  position: fixed;
}
.loader__circle {
  stroke-dasharray: 16, 8, 4, 8;
  stroke-linecap: round;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  stroke: #007ad0;
  stroke-width: 4;
  fill: none;
  -webkit-animation: rotationCircle 1.5s cubic-bezier(0.28, 0, 0.58, 1) infinite;
          animation: rotationCircle 1.5s cubic-bezier(0.28, 0, 0.58, 1) infinite;
}
.loader--transparent .loader__overlay {
  background: transparent;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@-webkit-keyframes rotationCircle {
  0% {
    stroke-dasharray: 0, 240%, 0;
  }
  20% {
    stroke-dasharray: 55%, 160%, 0;
  }
  60% {
    stroke-dasharray: 50%, 50%, 65%;
  }
  100% {
    stroke-dasharray: 0, 240%, 0;
  }
}
@keyframes rotationCircle {
  0% {
    stroke-dasharray: 0, 240%, 0;
  }
  20% {
    stroke-dasharray: 55%, 160%, 0;
  }
  60% {
    stroke-dasharray: 50%, 50%, 65%;
  }
  100% {
    stroke-dasharray: 0, 240%, 0;
  }
}
/**
name: Pager
type: ui
desc: Just use wrapper with classname 'pager' and data-component="UI::pager" for pager generating

examples:
  - name: Pager
    tmpl:
      include: ../pager/[docs]/pager.html
*/
.pager {
  display: inline-block;
  vertical-align: top;
  font-family: Telenor, Arial, Helvetica, sans-serif;
}
.pager__button {
  color: inherit;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 3px;
  background: none;
  border: 0;
}
.pager__button:hover {
  text-decoration: none;
  color: #007ad0;
}
.pager__button.current {
  background-color: #e6eef4;
  pointer-events: none;
  color: inherit;
}
.pager__button:disabled {
  visibility: hidden;
}
.pager__button.previous::before {
  font-size: 16px !important;
  content: "󱀔";
}
.pager__button.next::before {
  font-size: 16px !important;
  content: "󱀕";
}
.pager__elipsis {
  width: 48px;
  line-height: 48px;
}

/**
name: Status dot indicator
type: ui
modifiers:
	--small: uses dot 8px x 8px and font size 14px;
	--medium: uses dot 8px x 8px and font size 16px;
	--large: uses dot 16px x 16px and font size 18px;
examples:
  - name: Status dot indicator
	tmpl:
		include: ../status-dot/[docs]/status-dot.html
*/
.status-dot, .status-dot--small, .status-dot--medium, .status-dot--large {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 16px;
}
.status-dot--small {
  font-size: 14px;
  line-height: 20px;
}
.status-dot--medium {
  font-size: 16px;
  line-height: 24px;
}
.status-dot--large {
  padding-left: 24px;
}
.status-dot--small::before, .status-dot--medium::before, .status-dot--large::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: 11px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
}
.status-dot--large::before {
  width: 16px;
  height: 16px;
  top: 10px;
}
.status-dot--green::before {
  background-color: #34a156;
}
.status-dot--yellow::before {
  background-color: #ff9a1f;
}
.status-dot--red::before {
  background-color: #f03d46;
}
.status-dot--gray::before {
  background-color: #d6d6d6;
}

/**
name: List selectors
type: ui
desc: >
	List selectors are based on customized radio buttons, so structure with radio control and following label is required.
	Using grid system allows us to provide same height for each selector in row selectors representing.
	If you use column positioning of selectors, you can use 12-columns width for each selector or you can avoid grid classes.
examples:
  - name: Single line selectors
	tmpl:
		include: ../list-selectors/[docs]/simple.html
  - name: Multiline selectors
	tmpl:
		include: ../list-selectors/[docs]/multiline.html
  - name: Small selectors
	tmpl:
		include: ../list-selectors/[docs]/small.html
 */
.list-selectors__label {
  min-height: 64px;
  margin: 0;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  cursor: pointer;
  -webkit-transition: border-color 0.2s ease-in-out;
  transition: border-color 0.2s ease-in-out;
}
.list-selectors__label:hover {
  border-color: #767676;
}
.list-selectors__label--without-border {
  border-color: transparent;
}
.list-selectors__label--small {
  min-height: 48px;
}
.list-selectors__label .list-selectors__icon::before {
  visibility: hidden;
}
.list-selectors:checked ~ .list-selectors__label {
  border-color: #007ad0;
  -webkit-box-shadow: inset 0 0 0 1px #007ad0;
          box-shadow: inset 0 0 0 1px #007ad0;
}
.list-selectors:checked ~ .list-selectors__label .list-selectors__icon::before {
  visibility: visible;
}
.list-selectors:disabled ~ .list-selectors__label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-color: #d6d6d6;
  color: #d6d6d6;
}
.list-selectors:disabled ~ .list-selectors__label .button {
  pointer-events: none;
  color: #d6d6d6;
}
.list-selectors__radio {
  display: inline-block;
  position: relative;
  padding-left: 32px;
  line-height: 24px;
}
.list-selectors__radio::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  border: 2px solid #767676;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
.list-selectors__radio::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 12px;
  height: 12px;
  background: #007ad0;
  border-radius: 50%;
  display: none;
}
.list-selectors__label:hover > .list-selectors__radio::before {
  border-color: #1a1a1a;
}
.list-selectors:checked ~ .list-selectors__label > .list-selectors__radio::before, .list-selectors:focus ~ .list-selectors__label > .list-selectors__radio::before {
  border-color: #007ad0;
}
.list-selectors:checked ~ .list-selectors__label > .list-selectors__radio::after, .list-selectors:focus ~ .list-selectors__label > .list-selectors__radio::after {
  display: block;
}
.list-selectors:disabled ~ .list-selectors__label > .list-selectors__radio {
  color: #d6d6d6;
}
.list-selectors:disabled ~ .list-selectors__label > .list-selectors__radio::before {
  border-color: #d6d6d6;
}

/**
name: Carousel
type: ui
desc: >
	# Structure

	1. Required structure for carousel needs wrapping holder with width and 'overflow: hidden' property.

	2. List of items in the same line. You can use parent holder for them with 'width: 99999px'. Each item needs attribute 'data-alias="item"'.

	3. Previous and next buttons are not necessary. Also they need attributes 'data-alias="prev"' and 'data-alias="next"'.

	4. For switcher functionality just add any structure with the same quantity as item's amount. Every switcher's item needs attribute 'data-alias="switcher"'.

	# Functions

	1. Mobile only mode - Requires additional class carousel--mobile
	2. Enable pagination - Requires data-pagination="true"
	3. Endless gallery - Requires data-loop="true" and carousel--loop
examples:
	- name: Default carousel
	  tmpl:
	  	  include: ../carousel/[docs]/carousel.html
*/
.carousel {
  overflow: hidden;
  position: relative;
  width: auto;
  visibility: hidden;
}
.carousel__holder {
  position: relative;
  display: -webkit-box;
  display: flex;
}
.carousel__image {
  max-width: 100%;
  height: auto;
}
.carousel__prev, .carousel__next {
  border-radius: 50%;
  color: #767676;
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 16px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  font-size: 24px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  z-index: 800;
  outline: none;
  border: 1px solid #767676;
  background: none;
  width: 40px;
  height: 40px;
  padding: 0;
}
.carousel__prev:hover, .carousel__next:hover {
  color: #fff;
  background-color: #19aaf8;
  border-color: #19aaf8;
}
.carousel__prev.disabled, .carousel__next.disabled {
  cursor: default;
  background-color: #d6d6d6;
}
.carousel__prev i, .carousel__next i {
  display: block;
  line-height: 1;
}
.carousel__next {
  left: auto;
  right: 16px;
}
.carousel__pagination {
  text-align: center;
  list-style: none;
}
.carousel__pagination-item {
  display: inline-block;
  margin-left: 8px;
}
.carousel__pagination-item:first-child {
  margin-left: 0;
}
.carousel__pagination-item::before {
  display: none;
}
.carousel__pagination-item span {
  display: block;
  background: #d6d6d6;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.carousel__pagination-item.active span {
  background: #767676;
}
.carousel--loop .carousel__holder {
  min-height: 402px;
}
.carousel--loop .carousel__item {
  position: absolute;
  width: 100%;
  visibility: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.carousel--loop .carousel__item:first-child {
  visibility: visible;
}
.carousel--init {
  visibility: visible;
}
.carousel--init .carousel__item {
  height: 100%;
  visibility: visible;
}

.datepicker {
  position: relative;
}
.datepicker::before {
  font-size: 24px !important;
  content: "󱀋";
  line-height: 48px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  padding-right: 12px;
  border-right: 1px solid #767676;
  height: 48px;
  z-index: 1;
}
.datepicker.disabled::before {
  color: #767676;
}

.form__datepicker::before {
  display: none;
}
.form__datepicker input {
  padding-left: 64px;
  padding-right: 16px;
  line-height: 48px;
}
.form__datepicker input::-webkit-inner-spin-button {
  height: 100%;
}
.form__datepicker input::-webkit-clear-button {
  display: none;
}
.form__datepicker input::-webkit-calendar-picker-indicator {
  background: transparent;
}
.form__datepicker input[disabled] {
  background-color: #d6d6d6;
  color: #767676;
  border-color: #d6d6d6;
}
.form__datepicker-clear {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
}
.form__datepicker-clear::before {
  font-size: 16px !important;
  content: "󱀗";
  line-height: 48px;
}

.datepick {
  background-color: #fff;
  color: #1a1a1a;
  padding: 24px;
  position: relative;
  margin-top: 8px;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  -webkit-box-shadow: 0 2px 23px #EDEDED;
          box-shadow: 0 2px 23px #EDEDED;
  border-radius: 6px;
}
.datepick a {
  color: #1a1a1a;
  text-decoration: none;
}
.datepick a.datepick-disabled {
  color: #767676;
  cursor: auto;
  background-color: #fff;
}
.datepick-popup {
  z-index: 5001;
}
.datepick-disable {
  position: absolute;
  z-index: 100;
  background-color: #fff;
}
.datepick-nav {
  display: none;
}
.datepick-cmd-clear {
  display: none;
}
.datepick-cmd {
  display: none;
}
.datepick-month {
  text-align: center;
  float: left;
}
.datepick-month.first {
  padding-right: 12px;
}
.datepick-month.last {
  padding-left: 12px;
}
.datepick-month table {
  border-collapse: collapse;
  table-layout: fixed;
}
.datepick-month table td a, .datepick-month table th a {
  color: #1a1a1a;
  display: block;
  line-height: 44px;
  text-decoration: none;
  width: 44px;
  height: 44px;
}
.datepick-month table td span, .datepick-month table th span {
  color: #767676;
  display: block;
  width: 44px;
  height: 44px;
  line-height: 44px;
}
.datepick-month table td .datepick-other-month, .datepick-month table th .datepick-other-month {
  color: #767676;
}
.datepick-month table td .datepick-today, .datepick-month table th .datepick-today {
  color: #007ad0;
}
.datepick-month table td .datepick-highlight, .datepick-month table th .datepick-highlight {
  background-color: #f5f5f5;
}
.datepick-month table td .datepick-selected, .datepick-month table th .datepick-selected {
  background-color: #007ad0;
  border: none;
  color: #fff;
  border-radius: 3px;
}
.datepick-month table td.datepick-selected:first-child a, .datepick-month table th.datepick-selected:first-child a {
  border-radius: 3px 0 0 3px;
}
.datepick-month table td.datepick-selected:last-child a, .datepick-month table th.datepick-selected:last-child a {
  border-radius: 0 3px 3px 0;
}
.datepick-month-header {
  margin-bottom: 24px;
  position: relative;
}
.datepick-month-header input {
  position: absolute;
  display: none;
}
.datepick-cmd-prev, .datepick-cmd-next {
  background-clip: padding-box;
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  overflow: hidden;
  white-space: nowrap;
}
.datepick-cmd-prev::before, .datepick-cmd-next::before {
  height: 24px;
  width: 24px;
  line-height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}
.datepick-cmd-prev {
  left: 0;
  text-indent: -999px;
}
.datepick-cmd-prev::before {
  font-size: 16px !important;
  content: "󱀔";
  text-indent: -3px;
}
.datepick-cmd-next {
  right: 0;
  text-indent: 999px;
}
.datepick-cmd-next::before {
  font-size: 16px !important;
  content: "󱀕";
  text-indent: 0;
}
.datepick-month-row {
  overflow: hidden;
}
.datepick-month th, .datepick-month td {
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align: center;
  color: #767676;
}
.datepick-ctrl {
  padding-top: 12px;
}
.datepick-status {
  clear: both;
  text-align: center;
}
.datepick-clear-fix {
  clear: both;
}

.datepicker--range [class*=col-] {
  -webkit-box-flex: 1;
          flex: auto;
  width: 100%;
  max-width: 100%;
}

.noPrevNext .datepick-cmd.datepick-disabled {
  visibility: hidden;
}

/**
name: Datepicker
type: ui
desc: >
  Please add CSS description if needed!
examples:
- name: Datepicker single
  tmpl:
    include: ../datepicker/[docs]/single.html
*/
.address-complete {
  position: relative;
}
.address-complete__content {
  background-color: #fff;
  color: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  border: 1px solid #d6d6d6;
  z-index: 501;
  max-width: none;
  min-width: 0;
  position: relative;
  width: 100%;
  height: 0;
}
.is-open .address-complete__content {
  opacity: 1;
  visibility: visible;
  display: block;
  -webkit-box-shadow: none;
          box-shadow: none;
  height: auto;
}
.address-complete__scroll {
  max-height: 320px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}
.address-complete__list {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.address-complete__list__item {
  outline: none;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  color: #1a1a1a;
  cursor: pointer;
  word-wrap: break-word;
  white-space: normal;
  padding: 8px 24px;
}
.address-complete__list__item.active, .address-complete__list__item:hover, .address-complete__list__item.current-autocomplete-option {
  background-color: #f5f5f5;
  text-decoration: none;
}
.address-complete__small .address-complete__content {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 3px;
  top: 48px;
}
.address-complete--custom {
  border-top: 1px solid #d6d6d6;
  padding: 0;
  padding: initial;
}

/**
name: Context popup
type: ui
desc: >
	Renders popup with content. It looks like modal box for mobile devices. Clicking on content box won't close popup by default.
	`Esc` key and outside mouse click closes popup.
examples:
  - name: Context popup
	tmpl:
		include: ../context-popup/[docs]/context-popup.html
  - name: Context popup with auto closing.
	tmpl:
		include: ../context-popup/[docs]/context-popup-auto-close.html
*/
.context-popup__content {
  white-space: nowrap;
}
.context-popup--wide .context-popup__content {
  white-space: normal;
}
.context-popup__content::after {
  display: none;
}

.splash {
  top: 32px;
  position: absolute;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 3;
  text-align: center;
}
.splash__holder {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  height: 100%;
}
.splash__heading {
  font-family: Telenor, Arial, Helvetica, sans-serif;
  display: block;
  font-weight: bold;
}
.splash--switch {
  width: 54px;
  height: 48px;
  top: 108px;
  left: auto;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.splash--top-left, .splash--bottom-left {
  left: 8px;
}
.splash--top-right, .splash--bottom-right {
  right: 8px;
}
.splash img {
  max-width: 100%;
  height: auto;
  -webkit-box-flex: 1;
          flex: 1;
}

/**
name: Tabs
type: ui
examples:
  - name: Normal
	tmpl:
		include: ../tabs/[docs]/normal.html
*/
.tab__holder {
  max-height: 46px;
  height: auto;
  overflow: hidden;
  padding-top: 8px;
  -webkit-transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.tab__holder.is--opened {
  max-height: 60em;
}
.tab__opener {
  float: right;
  margin: 0;
  cursor: pointer;
}
.is--opened .tab__opener {
  color: #007ad0;
}

/**
name: Date
type: ui
examples:
  - name: Range Date
	tmpl:
		include: ../date/[docs]/range.html
  - name: Range Date
	tmpl:
		include: ../date/[docs]/range-empty.html
  - name: Single Date
	tmpl:
		include: ../date/[docs]/single.html
*/
.date {
  position: relative;
}
.date .date__cell, .date .date__week {
  -webkit-box-flex: 0;
          flex: 0 1 auto;
  width: 44px;
  line-height: 44px;
  text-align: center;
}
.date__clear {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}
.date__calendar {
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid #767676;
  cursor: pointer;
  z-index: 10;
}
.date__start-date .date__calendar::before {
  font-size: 24px !important;
  content: "󱀠";
}
.date__end-date .date__calendar::before {
  font-size: 24px !important;
  content: "󱀡";
}
.date .form__field::before {
  display: none;
}
.date__field {
  position: relative;
}
.date__field input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #0c1026;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 3px;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  height: 48px;
  padding-left: 64px;
  padding-right: 8px;
  line-height: 48px;
  -webkit-transition: border-color 1s;
  transition: border-color 1s;
  text-transform: capitalize;
}
.date__field input::-webkit-input-placeholder {
  color: #d6d6d6;
}
.date__field input::-moz-placeholder {
  color: #d6d6d6;
}
.date__field input:-ms-input-placeholder {
  color: #d6d6d6;
}
.date__field input::-ms-input-placeholder {
  color: #d6d6d6;
}
.date__field input::placeholder {
  color: #d6d6d6;
}
.date__field input:focus::-webkit-input-placeholder {
  color: #1a1a1a;
}
.date__field input:focus::-moz-placeholder {
  color: #1a1a1a;
}
.date__field input:focus:-ms-input-placeholder {
  color: #1a1a1a;
}
.date__field input:focus::-ms-input-placeholder {
  color: #1a1a1a;
}
.date__field input:focus::placeholder {
  color: #1a1a1a;
}
.date__field input::-webkit-inner-spin-button {
  height: 100%;
}
.date__field input::-webkit-calendar-picker-indicator {
  background: transparent;
}
.date__field input[disabled] {
  background: #d6d6d6;
  border-color: #d6d6d6;
}
.date__field input[disabled]::-webkit-input-placeholder {
  color: #767676;
}
.date__field input[disabled]::-moz-placeholder {
  color: #767676;
}
.date__field input[disabled]:-ms-input-placeholder {
  color: #767676;
}
.date__field input[disabled]::-ms-input-placeholder {
  color: #767676;
}
.date__field input[disabled]::placeholder {
  color: #767676;
}
.date__picker {
  background-color: #fff;
  color: #1a1a1a;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  -webkit-box-shadow: 0 4px 24px #d6d6d6;
          box-shadow: 0 4px 24px #d6d6d6;
  position: absolute;
  left: 12px;
  top: 100%;
  -webkit-transform: translate(0, 2px);
          transform: translate(0, 2px);
  border-radius: 3px;
  z-index: 5001;
  padding: 24px;
}
.date__nextButton, .date__prevButton {
  position: absolute;
  top: 24px;
  z-index: 1;
}
.date__nextButton {
  right: 24px;
}
.date__nextButton::before {
  font-size: 16px !important;
  content: "󱀕";
}
.date__prevButton {
  left: 24px;
}
.date__prevButton::before {
  font-size: 16px !important;
  content: "󱀔";
}
.date--month-range {
  width: 664px;
  outline: none;
}
.date__month {
  width: 332px;
  max-width: 332px;
  text-transform: capitalize;
  outline: none;
}
.date__week {
  color: #767676;
}
.date__cell {
  border: 0;
  padding: 0;
  background: none;
  display: block;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.date__cell[aria-selected=true], .date__cell:hover {
  background-color: #f5f5f5;
}
.date__cell[aria-selected=true].date--active, .date__cell:hover.date--active {
  background-color: #007ad0;
}
.date__cell:disabled {
  color: #767676;
  pointer-events: none;
}
.date--today {
  color: #007ad0;
}
.date--previous {
  visibility: hidden;
}
.date--range:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #e6eef4;
  z-index: -1;
}
.date--first:before {
  border-radius: 3px 0 0 3px;
}
.date--last:before {
  border-radius: 0 3px 3px 0;
}
.date--active {
  background-color: #007ad0;
  color: #fff;
}
.date--active:before {
  border-radius: 3px 0 0 3px;
}
.date--range + .date--active:before {
  border-radius: 0 3px 3px 0;
}

.date__selector {
  border: 1px solid #d6d6d6;
  margin-top: 1px;
  margin-bottom: 1px;
  cursor: pointer;
}
.date__selector.disabled {
  border: 1px solid transparent;
  background-color: #f5f5f5;
  color: #767676;
  cursor: default;
}
input[type=radio]:checked + .date__selector {
  margin-top: 0;
  margin-bottom: 0;
  border: 2px solid #007ad0;
}

/**
name: Usage bar
type: UI
examples:
  - name: Normal
	tmpl:
		include: ../usage-bar/[docs]/normal.html
 */
.usage-bar {
  background-color: #e6eef4;
  height: 8px;
  border-radius: 3px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-direction: row-reverse;
}
.usage-bar__remaining {
  background: #19aaf8;
  height: 8px;
  border-radius: 3px;
  width: 100%;
}
.usage-bar--alert {
  background-color: #fff0f4;
}
.usage-bar--alert .usage-bar__remaining {
  background-color: #f03d46;
}

.animation.usage-bar--alert {
  -webkit-animation: 0.5s ease-in colorAnimationLighter;
          animation: 0.5s ease-in colorAnimationLighter;
}
.animation .usage-bar__remaining {
  animation: 0.5s ease-in reverse widthAnimation, 0.5s ease-in colorAnimation;
}

@-webkit-keyframes colorAnimationLighter {
  0% {
    background-color: #e6eef4;
  }
  75% {
    background-color: #e6eef4;
  }
}

@keyframes colorAnimationLighter {
  0% {
    background-color: #e6eef4;
  }
  75% {
    background-color: #e6eef4;
  }
}
@-webkit-keyframes colorAnimation {
  0% {
    background-color: #19aaf8;
  }
  75% {
    background-color: #19aaf8;
  }
}
@keyframes colorAnimation {
  0% {
    background-color: #19aaf8;
  }
  75% {
    background-color: #19aaf8;
  }
}
@-webkit-keyframes widthAnimation {
  100% {
    width: 100%;
  }
}
@keyframes widthAnimation {
  100% {
    width: 100%;
  }
}
.header__icons {
  min-height: 56px;
}
.header__basket:not([data-count="0"])::after {
  content: attr(data-count);
  width: 16px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: -4px;
  background: #a3deff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.header__search {
  position: relative;
  z-index: 10;
}
.header__search__toggler {
  position: absolute;
  right: 0;
}
.header__search .form__search::before {
  top: 50%;
  left: 0;
}
.header__search .form__search input[type=search] {
  height: 56px;
  padding-left: 40px;
}
.header__search .form__search .form__search-clear {
  right: 0;
}
.header__search__result {
  -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2), 10px 2px 10px -10px rgba(0, 0, 0, 0.2), -10px 2px 10px -10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2), 10px 2px 10px -10px rgba(0, 0, 0, 0.2), -10px 2px 10px -10px rgba(0, 0, 0, 0.2);
  position: absolute;
  margin-left: -16px;
  margin-right: -16px;
  z-index: 500;
}
.header__search__result:empty {
  display: none;
}
.header__menu {
  margin-left: -8px;
  margin-right: -8px;
}
.header__menu > [class*=col] {
  padding: 0 8px;
}
.header__menu .active-trail {
  position: relative;
}
.header__menu .active-trail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  border: 1px solid #767676;
  background: #767676;
  border-radius: 3px;
}
.header__menu-dropdown {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 297px;
  min-width: 100%;
  display: none;
  white-space: nowrap;
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  z-index: 500;
}
.is-opened + .header__menu-dropdown {
  display: block;
}
.header__menu-dropdown--overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0;
  top: 0;
  opacity: 0;
  background: #0c1026;
  -webkit-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
  display: none;
}
.navigation-active .header__menu-dropdown--overlay {
  display: block;
  opacity: 0.5;
}
.header__menu-item--parent {
  position: static;
}
.header__menu-item--parent .active-trail::before {
  border: 0;
}
.header__menu-item--parent > .is-opened + .header__menu-dropdown {
  display: block;
}
.header__menu-item--parent > .header__menu-item-link::after {
  font-family: "framework-icons-new";
  font-size: 16px !important;
  content: "󱀓";
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}
.header__menu-item--parent > .header__menu-item-link.is-opened::after {
  font-size: 16px !important;
  content: "󱀖";
}
.header__menu-item .header__menu-item {
  border-bottom: 1px solid #d6d6d6;
  padding: 16px 0;
  text-align: left;
}
.header__menu-item .header__menu-item:last-child {
  border: none;
}
.header__top-menu .active-trail {
  position: relative;
}
.header__top-menu .active-trail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  border: 1px solid #19aaf8;
  background: #19aaf8;
  border-radius: 3px;
}
.header__top-menu .active-trail .header__top-menu .active-trail::before {
  border: none;
}
.header__logo {
  position: absolute;
  top: 12px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  height: 32px;
  width: 36px;
  z-index: 1;
}
.header__logo svg {
  height: 100%;
}
.header__button {
  outline: none;
}
.header__button::before {
  display: inline-block;
  vertical-align: top;
}
.header__button--truncate {
  max-width: 304px;
  overflow: hidden;
}
.header__login::after {
  font-size: 16px !important;
  content: "󱀓";
  position: absolute;
  right: 0;
  display: none;
}
.header__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  font-size: 10px;
  line-height: 16px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}
.header__bar .active-trail,
.header__bar a:hover {
  color: #007ad0;
}
.header__bar-modal {
  z-index: 4;
}
.header__bar-modal .active-trail {
  color: #007ad0;
}
.header__bar-swipe::before {
  display: block;
  content: "";
  width: 32px;
  height: 4px;
  background: #d6d6d6;
  border-radius: 3px;
  margin: 0 auto 8px;
}
.header__bar-logo {
  height: 40px;
  width: 48px;
}
.header__bar-logo svg {
  height: 100%;
}
.header--link-back {
  position: absolute;
  top: 24px;
  left: 24px;
}

.footer {
  border-top: 1px solid #f5f5f5;
}
.footer__breadcrumbs li:before {
  display: none;
}
.footer__breadcrumbs a:after {
  font-size: 16px !important;
  content: "󱀕";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  margin-top: 1px;
  color: #767676;
  font-size: 8px !important;
  text-decoration: none;
}
.footer__logo {
  width: 36px;
  height: 32px;
  display: inline-block;
}
.footer__logo svg {
  height: 100%;
}

.background-color-paper-white .footer {
  border-top: none;
}

/**
name: Navigation tabs
type: Common
examples:
  - name: Language selector
	tmpl:
		include: ../navigation-tabs/[docs]/lang.html
  - name: Small
	tmpl:
		include: ../navigation-tabs/[docs]/small.html
  - name: Normal
	tmpl:
		include: ../navigation-tabs/[docs]/normal.html
  - name: Toggle
	tmpl:
		include: ../navigation-tabs/[docs]/toggle.html
*/
.navigation-tabs {
  display: inline-block;
  outline: none;
  border-bottom: 2px solid transparent;
  padding: 0 8px 4px;
  cursor: pointer;
}
.navigation-tabs__item {
  color: #1a1a1a;
}
.navigation-tabs__item:hover {
  color: #767676;
  text-decoration: none;
}
.navigation-tabs--active .navigation-tabs__item:hover {
  color: #1a1a1a;
}
.navigation-tabs--active {
  border-bottom-color: #19aaf8;
}
.navigation-tabs__toggle {
  display: inline-block;
  font-family: Telenor, Arial, Helvetica, sans-serif;
}
.navigation-tabs__toggle input:checked + label,
.navigation-tabs__toggle input:focus + label {
  border-bottom-color: #19aaf8;
}
.navigation-tabs__toggle input:checked + label .navigation-tabs__item,
.navigation-tabs__toggle input:focus + label .navigation-tabs__item {
  color: #1a1a1a;
}

/**
name: Terminal block
type: Common
desc: >
	add class .terminal-block
examples:
  - name: Terminal block
    tmpl:
      include: ../terminal-blocks/[docs]/terminal-block.html
*/
.terminal-block {
  width: 100%;
  color: inherit;
  min-height: 335px;
  position: relative;
}
.terminal-block:hover {
  text-decoration: none;
}
.terminal-block .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
.terminal-block--cover-mood {
  background-size: cover !important;
  background-position: 50% 50% !important;
  margin-left: -16px;
  margin-right: -16px;
  width: auto;
  min-height: 0;
}
.terminal-block--cover-mood--small, .terminal-block--cover-mood--medium, .terminal-block--cover-mood--large {
  margin-bottom: -24px;
}
.terminal-block--cover-mood--small {
  height: 140px;
}
.terminal-block--cover-mood--small .image-holder {
  height: 140px;
}
.terminal-block--cover-mood--medium {
  height: 180px;
}
.terminal-block--cover-mood--medium .image-holder {
  height: 180px;
}
.terminal-block--cover-mood--large {
  height: 220px;
}
.terminal-block--cover-mood--large .image-holder {
  height: 220px;
}
.terminal-block--banner__header {
  height: 160px;
}

/**
name: Content blocks
type: Common
desc: >
	add class .content-block
examples:
  - name: Content block 6-6
    tmpl:
	  include: ../content-blocks/[docs]/content-block-6-6.html

  - name: Content block 4-8
    tmpl:
	  include: ../content-blocks/[docs]/content-block-4-8.html

  - name: Text content block 6-6
    tmpl:
	  include: ../content-blocks/[docs]/text-content-block-6-6.html

  - name: Text content block 4-4
    tmpl:
      include: ../content-blocks/[docs]/text-content-block-4-4.html
*/
.content-block--promo {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  border-radius: 3px;
  position: relative;
}
.content-block--promo:hover {
  opacity: 0.95;
}
.content-block--promo .content-block__image-holder {
  border-radius: 0 0 3px 3px;
}
.content-block__image-holder {
  height: 160px;
}
.content-block__image-holder--large {
  height: 224px;
}
.content-block__image-holder img {
  height: 100%;
  width: auto;
  min-width: 1px;
  min-height: 1px;
}
.content-block__icon-holder {
  max-width: 160px;
  max-height: 160px;
}
.content-block__icon-holder img {
  width: 100%;
}

/**
name: USP blocks
type: Common
desc: >
	add class .usp-block
examples:
  - name: USP block 4-4-4
    tmpl:
	  include: ../usp-blocks/[docs]/usp-block-4-4-4.html

  - name: USP block 3-3-3-3
    tmpl:
      include: ../usp-blocks/[docs]/usp-block-3-3-3-3.html
*/
.usp-block__holder {
  padding-left: 24px;
  padding-right: 24px;
}
.usp-block__icon-holder, .usp-block__image {
  background-size: cover;
  border-radius: 50%;
  height: 64px;
  max-width: 64px;
  margin: 0 auto 16px;
}
.usp-block__brand-image-holder {
  width: 72px;
  height: 72px;
}
.usp-block__brand-image {
  max-width: 100%;
  max-height: 100%;
}

/**
name: Banner block
type: Common
desc: >
	add class .banner-block
*/
.banner-block .terminal-block__add-to-basket button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  z-index: 6;
}
/**
name: Cover block
type: Common
desc: >
	add class .cover-block
examples:
  - name: Cover block
*/
.cover-block {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  height: auto;
}

.cover-block__description {
  max-width: 100%;
}
.cover-block__text {
  min-height: 40px;
}

/**
name: Product block
type: Common
desc: >
	add class .product-block
examples:
  - name: Product block
*/
.product-block {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
}
.product-block__image-holder {
  padding: 0;
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
  height: 132px;
}
.product-block__image-holder::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
  margin-right: -4px;
}
.product-block__image {
  max-width: 100%;
  max-height: 100%;
}
.product-block__full-image {
  height: 196px;
}
.product-block__full-image .product-block__image {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  max-width: none;
}
.product-block__info {
  -webkit-box-flex: 1;
          flex: 1;
  flex-basis: auto;
  /*!*fix for IE*!*/
  padding: 0 16px;
}
.product-block__text {
  min-height: 128px;
  margin-top: -2px;
}
.product-block .badge {
  font-size: 12px;
  line-height: 16px;
  white-space: normal;
  padding: 4px 8px;
  border-radius: 0 3px 3px 0;
  max-width: 150px;
}
.product-block .badge-holder {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 8px;
  z-index: 1;
}
.product-block--large .badge-holder {
  bottom: auto;
  top: 16px;
}
.product-block--large .product-block__image-holder {
  height: 155px;
}
.product-block--addition .product-block__video {
  display: block;
  height: auto;
  width: 100%;
}
.product-block--addition .product-block__image {
  width: 100%;
  height: auto;
}

.button--store-type {
  font-size: 14px;
  line-height: 20px;
  padding: 4px 8px;
  border: 1px solid #007ad0;
  border-radius: 3px;
}
.button--store-type:hover {
  color: #006bb7;
  border-color: #006bb7;
  text-decoration: none;
}
.button--store-type:active {
  color: #005ea0;
  border-color: #005ea0;
}

.digital-hub-block__number-holder {
  background-color: #e6eef4;
  width: 64px;
  height: 64px;
  min-width: 64px;
  padding-top: 12px;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  line-height: 40px;
  color: #19aaf8;
}
.digital-hub-block__image-holder img {
  width: 100%;
}

.visual-block__image {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.visual-block__video-item {
  display: block;
  height: auto;
  width: 100%;
  min-width: 100%;
  min-height: auto;
}
.visual-block__picture {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 160px;
}
.visual-block__picture--xxxlarge {
  height: 300px;
}
.visual-block__picture--xxlarge {
  height: 220px;
}
.visual-block__picture--xlarge {
  height: 160px;
}
.visual-block__picture--large {
  height: 220px;
}
.visual-block__picture--medium {
  height: 160px;
}
.visual-block__picture--background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.visual-block__img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  min-width: 1px;
  min-height: 1px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.visual-block__splash-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
.visual-block__splash {
  position: absolute;
  top: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
}
.visual-block__splash--topright {
  right: 0;
}
.visual-block__splash--topleft {
  left: 0;
}
.visual-block__video {
  height: 100%;
  min-height: 100%;
  width: auto;
  min-width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/**
name: Subscription
type: Common
examples:
  - name: Subscription
	tmpl:
		include: ../subscription-plans/[docs]/subscription.html
*/

input:checked + .check-btl > span::before {
  font-size: 32px !important;
  content: "󱂂";
}

.check-btl > span::before {
  font-size: 32px !important;
  content: "󱁂";
}
.check-btl.is-active > span::before, .check-btl.navigation-tabs--active > span::before {
  font-size: 32px !important;
  content: "󱂂";
}

.subscription-border {
  border-radius: 3px;
  border: 2px solid transparent;
}
.subscription-border--with-splashes {
  border-radius: 0 3px 3px 3px;
}
.subscription-border__active {
  border-color: #007ad0;
}
.subscription-border .selling-points::after {
  content: ",";
}
.subscription-border .selling-points:last-of-type::after {
  content: "";
}

.subscription__content {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  border-radius: 0 3px 3px 3px;
}
.subscription__content--hover:hover {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.28);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.28);
}
.subscription__content--spacing {
  padding-right: 16px;
  padding-left: 16px;
}
.subscription__content .currency-label {
  font-size: 16px;
  line-height: 24px;
}
.subscription__badge {
  border-radius: 0 3px 0 0;
  padding: 4px 8px;
}
.subscription__badge--torned-out {
  position: absolute;
  left: 12px;
  top: 0;
}
.subscription__margin-bottom {
  margin-bottom: 24px;
}
.subscription-radius {
  border-radius: 0 3px 0 0;
}
.subscription__label {
  display: inline-block;
  padding: 8px 16px 8px 16px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 24px 0;
  white-space: nowrap;
  color: #fff;
  background-color: #19AAF8;
}
.subscription__old-price {
  display: none;
}

.agent-lock::before {
  font-size: 32px !important;
  content: "󱁂";
}
.agent-lock[aria-checked=true]::before {
  font-size: 32px !important;
  content: "󱂂";
}

.padding-shifted-toleft--xxsmall.background-lemon {
  -webkit-box-shadow: -8px 0 0 #fefd29;
          box-shadow: -8px 0 0 #fefd29;
}

.padding-shifted-toright--xxxsmall.background-lemon {
  -webkit-box-shadow: 4px 0 0 #fefd29;
          box-shadow: 4px 0 0 #fefd29;
}

.delivery__collapse {
  margin-bottom: 2px;
}
.delivery .collapse__target {
  overflow: inherit;
}
.delivery .collapsing {
  overflow: hidden;
}

.map-grid {
  width: 100%;
}
.map-grid__map {
  height: 306px;
}
.map-grid__list {
  overflow-y: auto;
  padding: 24px 0 0;
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  height: 306px;
}
.map-grid__store-info {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
input:checked ~ label .map-grid__store-info {
  max-height: 30vh;
}
.map-grid__store-button {
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  background: #fff;
}

.customer-service-search .search-results--drop {
  background: #fff;
  width: 100%;
  position: absolute;
  right: 0;
  top: calc(100% + 3px);
  border: 1px solid #f5f5f5;
  z-index: 10;
}
.customer-service-search .search-results__subtitle {
  padding: 4px 24px;
}
.customer-service-search .search-results__subtitle:hover {
  background: #f5f5f5;
}
.customer-service-search .search-results__link {
  display: inline-block;
  vertical-align: top;
  color: #1a1a1a;
}
.customer-service-search .search-results__link:hover {
  text-decoration: none;
}
.customer-service-search .search-results__buttons {
  border-top: 1px solid #d6d6d6;
  text-align: center;
}
.customer-service-search .search-results__buttons .button {
  margin: 0 4px;
  background: none;
  border: 0;
  color: #007ad0;
}
.customer-service-search .search-results__buttons .button__label {
  line-height: 48px;
}

.focus-visible button.button--naked:focus,
.focus-visible input[type=text]:focus,
.focus-visible input[type=password]:focus,
.focus-visible input[type=search]:focus,
.focus-visible input[type=number]:focus,
.focus-visible input[type=email]:focus,
.focus-visible textarea:focus,
.focus-visible select:focus,
.focus-visible a:not(.button--action):focus {
  -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
          box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
  background: #e6eef4;
}
.focus-visible input[type=checkbox]:focus ~ label,
.focus-visible input[type=radio]:focus ~ label {
  -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
          box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
  background: #e6eef4;
}
.focus-visible button:focus,
.focus-visible a.button--action:focus,
.focus-visible input[type=button]:focus,
.focus-visible input[type=reset]:focus,
.focus-visible input[type=submit]:focus {
  -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
          box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
}
.focus-visible .toggle input:focus + .toggle__slider {
  -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
          box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007ad0;
}

/**
name: Color selector
type: Common
examples:
  - name: Color selector
    tmpl:
     include: ../color-selector/[docs]/color-selector.html
*/
.color-selector {
  display: -webkit-box;
  display: flex;
  padding: 12px 0 0;
}
.color-selector li {
  margin: 0 8px 0 0;
}
.color-selector li:last-of-type {
  margin: 0;
}
.color-selector__item-small {
  display: block;
  text-indent: 100%;
  font-size: 0;
  line-height: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

.login-content {
  max-width: 100%;
  width: 100% !important;
  min-height: 100%;
  margin: 0;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.login-content.modal-box__content {
  -webkit-transition: none;
  transition: none;
}
.login-content__header {
  position: relative;
}
.login-content__logo {
  height: 32px;
}
.login-content__close-btn.button {
  position: absolute;
  right: 24px;
  cursor: pointer;
  z-index: 1;
  line-height: 1;
}
.login-content__login-button {
  position: relative;
  padding-left: 32px;
}
.login-content__login-button::before {
  width: 32px;
  height: 24px;
  content: "";
  position: absolute;
  left: 0;
  background: url(https://cdn1.telenor.dk/ImageProxy/svg/logo-icon.svg) no-repeat;
}

.receipt-page-icon {
  font-size: 64px;
}

.old-price {
  text-decoration: line-through;
}

.config__action {
  height: auto;
  min-height: 64px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.config__image {
  width: 80px;
  height: 80px;
  -webkit-box-flex: 0;
          flex: 0 0 80px;
}

.switch-damage__icon {
  background-color: #ffb4b4;
  position: absolute;
  bottom: 12px;
  left: 12px;
}
.switch-damage__image {
  height: 296px;
}

.number-switch input:checked + label,
.number-switch input:focus + label {
  border-bottom-color: #19aaf8;
}

.search-popup {
  width: 100%;
  background-color: #fff;
  display: none;
}
.search-popup[data-mobile-overlay] {
  z-index: 1000;
  position: absolute;
  right: 0;
  left: auto;
  top: 100%;
}
.search-popup--is-open {
  display: block;
}
.search-popup__content {
  min-height: 48px;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.search-popup--is-open .search-popup__content {
  -webkit-transform: translate(0);
          transform: translate(0);
}
.search-popup__item {
  overflow: hidden;
}
.search-popup__item--is-focused, .search-popup__item:hover, .search-popup__item:focus {
  background: #f5f5f5;
}

.filter--modal {
  padding-top: 0;
}
.filter--modal .modal-box__content {
  min-height: 100%;
  height: 100%;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.filter--modal.active .filter__group {
  display: none;
}
.filter--modal.active .filter__group.active {
  display: block;
}
.filter__query:checked + label {
  font-weight: bold;
}
.filter__list {
  overflow-x: auto;
}
.filter__list-item {
  display: inline-block;
  margin: 0 8px 8px 0;
}
.filter__quick-link.list-selectors__label--small {
  min-height: 40px;
  height: 40px;
}
.filter__opener {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  margin-bottom: 24px;
  min-height: 16px;
  min-width: 16px;
  font-weight: bold;
}
.filter__opener::after {
  font-size: 16px !important;
  content: "󱀃";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.filter__header:checked ~ .filter__opener::after, .filter__group.selected .filter__header:checked ~ .filter__opener::after {
  font-size: 16px !important;
  content: "󱁊";
}
.filter__header:checked ~ .filter__opener .filter__selected {
  display: none;
}
.filter__group.selected .filter__opener::after {
  font-size: 16px !important;
  content: "󱀐";
}
.filter--modal.active .filter__opener {
  display: none;
}
.filter--modal.active .filter__label-placeholder {
  display: none;
}
.filter__content {
  position: fixed;
  top: 0;
  width: 100%;
  left: 100vw;
  -webkit-transition: left 0.35s ease-in;
  transition: left 0.35s ease-in;
  z-index: 2;
  height: 0;
  overflow: hidden;
}
.filter__header:checked ~ .filter__content {
  height: auto;
  min-height: 100%;
  max-height: 100%;
  left: 0;
}
.filter__body {
  overflow-y: auto;
}
.filter__selected {
  display: block;
}
.filter__header:checked .filter__selected {
  display: none;
}
.filter-colors-list__label {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.filter-colors-list:checked ~ label .filter-colors-list__query-name {
  background: #f5f5f5;
  font-weight: bold;
}

.product-list-container .form__select:before {
  right: 0;
}
.product-list-container .form__select select {
  padding-right: 24px;
  border: none;
  max-width: 250px;
  text-overflow: ellipsis;
}
.product-list-container .pagination__button {
  color: #1a1a1a;
}
.product-list-container .pagination__button[disabled] {
  color: #d6d6d6;
}

.stock__label {
  border-bottom: 2px solid transparent;
}
.stock__input:checked + .stock__label {
  font-weight: bold;
  border-bottom-color: #19aaf8;
}
.stock__status {
  position: relative;
  text-indent: 16px;
}
.stock__status .status-dot__icon {
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.animate-technology {
  position: relative;
  height: 32px;
  width: 32px;
}
.animate-technology__icon {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
  -webkit-animation-name: icon-load-animate;
          animation-name: icon-load-animate;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.animate-technology .icon-step__0 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.animate-technology .icon-step__1 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.animate-technology .icon-step__2 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.animate-technology .icon-step__3 {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

@-webkit-keyframes icon-load-animate {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}

@keyframes icon-load-animate {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}
.order-contract--warning {
  border-bottom: 1px solid #ffb4b4;
}

.device-visual {
  margin: 0 -16px;
}
.device-visual .carousel__prev, .device-visual .carousel__next {
  color: #1a1a1a;
  padding: 8px;
  width: auto;
  height: auto;
  border: 0;
  left: 8px;
  visibility: hidden;
}
.device-visual .carousel__prev:hover, .device-visual .carousel__next:hover {
  background-color: transparent;
}
.device-visual .carousel__holder {
  min-height: 242px;
}
.device-visual .carousel__img {
  max-height: 242px;
  width: auto;
}
.device-visual .carousel__next {
  left: auto;
  right: 8px;
}
.device-visual .carousel__pagination {
  padding-top: 16px;
}
.device-visual .splash {
  right: auto;
  left: 32px;
  top: 48px;
}
.device-visual .splash--large {
  width: 120px;
  height: 120px;
}
.device-visual .splash--switch {
  margin-right: -24px;
  top: 50%;
  left: auto;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.device-visual .splash--switch--large {
  width: 120px;
  height: 120px;
}

.product-btl__switch > span::before {
  font-size: 32px !important;
  content: "󱁂";
}
.product-btl__switch + .product-btl__content {
  display: none;
}
.product-btl:checked + .product-btl__switch > span::before {
  font-size: 32px !important;
  content: "󱂂";
}
.product-btl:checked + .product-btl__switch ~ .product-btl__content {
  display: none;
}
.product-btl:checked + .product-btl__switch + .product-btl__content {
  display: block;
}

.tooltip--installment {
  max-width: 232px;
  position: absolute;
  right: 0;
  display: none;
}

.label--installment:hover + .tooltip--installment, .tooltip--installment:hover {
  display: block;
}

.button--reserved {
  font-size: 14px;
  line-height: 20px;
  padding: 4px 8px;
  border: 1px solid #007ad0;
  border-radius: 3px;
}
.button--reserved:hover {
  color: #006bb7;
  border-color: #006bb7;
  text-decoration: none;
}
.button--reserved:active {
  color: #005ea0;
  border-color: #005ea0;
}

.product-colors-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  flex-wrap: wrap;
}
.product-colors-list__item {
  position: relative;
  padding: 0 4px 24px;
}

.colors-list__label {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: 12px solid #fff;
}
.colors-list:checked ~ .colors-list__label, .colors-list:focus ~ .colors-list__label {
  -webkit-box-shadow: 0 0 0 2px #007ad0;
          box-shadow: 0 0 0 2px #007ad0;
}
.colors-list__title {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}
.colors-list:checked ~ .colors-list__title {
  opacity: 1;
  visibility: visible;
}

.product-options-list__item {
  min-width: 33%;
}
.product-options-list__item:not(:first-child) {
  max-width: 50%;
}

.fixed {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
}
.fixed__image {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;
}
.fixed__aside {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-row-align: center;
      align-self: center;
}
.fixed__content {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 2;
  grid-row: 2;
}

.product-tooltip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
}
.product-tooltip__popup {
  background: #f5f5f5;
}
.product-block--large .product-tooltip {
  top: 16px;
  right: 16px;
}
.device-visual .product-tooltip {
  right: 0;
  top: 16px;
}

.recommended-colors-list {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}
.recommended-colors-list .colors-list__item {
  position: relative;
  padding: 24px 8px 0 0;
}
.recommended-colors-list .colors-list__label {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 4px solid #fff;
}
.recommended-colors-list .colors-list__title {
  left: 0;
  bottom: auto;
  top: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.recommended-colors-list .colors-list--active {
  -webkit-box-shadow: 0 0 0 1px #007ad0;
          box-shadow: 0 0 0 1px #007ad0;
}
.recommended-colors-list .colors-list--active .colors-list__title {
  opacity: 1;
  visibility: visible;
}
.search-accounts__opener {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #0c1026;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 3px;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  height: 48px;
  position: relative;
  text-align: left;
  padding-right: 48px;
}
.search-accounts__opener::before {
  position: absolute;
  right: 16px;
  top: 24px;
  pointer-events: none;
  line-height: 1;
  font-size: 16px !important;
  content: "󱀓";
}
.search-accounts__opener:focus {
  outline: none;
  border-color: #007ad0;
}

.bills .sticky {
  position: sticky;
  top: 56px;
  text-align: center;
  z-index: 9;
}

.installment-bar__switch::after {
  height: 2px;
  background: #a3deff;
  content: "";
  display: block;
  width: 100%;
  bottom: 0;
  position: absolute;
}
.installment-bar__legend {
  position: absolute;
  right: 0;
  top: 100%;
}

.range-slider-installment .range-slider__value-line {
  background-color: #e6eef4;
}
.range-slider-installment .range-slider__value-line.current {
  background-color: #a3deff;
}
.range-slider-installment .range-slider__value-line.paid {
  background-color: #19aaf8;
}

.profile-average-column {
  min-width: 104px;
}

.profile-button {
  border: 2px dashed #007ad0;
  background: none;
  text-align: center;
}
.profile-button:hover {
  border-style: solid;
  background-color: #fff;
}

.bar-chart {
  position: relative;
}
.bar-chart__scale {
  height: 352px;
  padding-top: 64px;
}
.bar-chart__measure {
  position: absolute;
  right: 100%;
  top: 0;
  padding-right: 12px;
  color: #767676;
}
.bar-chart__axis {
  position: absolute;
  right: 100%;
  top: 64px;
  bottom: 0;
}
.bar-chart__amount {
  position: absolute;
  right: 100%;
  bottom: 0;
  padding-right: 8px;
  -webkit-transform: translate(0, 50%);
          transform: translate(0, 50%);
}
.bar-chart__amount::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(50%, 0);
          transform: translate(50%, 0);
  width: 8px;
  border-top: 1px solid #d6d6d6;
}
.bar-chart__amount:first-child::after {
  display: none;
}
.bar-chart__bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 50%;
  max-width: 32px;
  min-width: 12px;
}
.bar-chart--current .bar-chart__bar {
  background-color: #19aaf8;
}
.bar-chart__bar.tooltip__trigger {
  z-index: 10;
  background: none;
}
.bar-chart__point {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: #a3deff;
  z-index: 1;
}
.bar-chart__line:not(:root) {
  position: absolute;
  left: 50%;
  width: 100%;
  z-index: 1;
  overflow: overlay;
}
.bar-chart__label {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
}
.bar-chart__legend-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-color: #e6eef4;
}
.bar-chart--current .bar-chart__legend-bar::before {
  background-color: #19aaf8;
}
.bar-chart__legend-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  border: 1px solid #a3deff;
}
.bar-chart__legend-line::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: #a3deff;
  border-radius: 50%;
}

.subscription-search .form__search::before {
  top: 40px;
}

.subcriptions-overview__item {
  margin-bottom: 2px;
}
.subcriptions-overview__item:last-child {
  margin-bottom: 0;
}
.subcriptions-overview__item:hover .subcriptions-overview__details {
  text-decoration: underline;
}
.subcriptions-overview__details {
  position: relative;
  padding-right: 24px;
}
.subcriptions-overview__details::before {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 22px;
  text-decoration: none;
}

.payment-method {
  border-top: 1px solid #d6d6d6;
  padding: 24px 24px 0;
}
.payment-method:first-child {
  border-top: none;
  padding-top: 0;
}

.link-block {
  position: relative;
  color: #1a1a1a;
  padding: 24px;
  padding-right: 48px;
}
.link-block:hover, .link-block__link:hover {
  text-decoration: none;
}
.link-block::after {
  font-size: 16px !important;
  content: "󱀕";
  position: absolute;
  right: 24px;
  top: 24px;
  width: 16px;
  color: #1a1a1a;
  line-height: 24px;
}
.link-block--wide {
  padding-left: 0;
  padding-right: 16px;
}
.link-block--wide::after {
  right: 0;
}
.link-block--advanced {
  padding-top: 0;
}
.link-block--advanced::after {
  top: 0;
}
.link-block__holder {
  min-height: 100px;
}
.link-block--info::after {
  display: none;
}
.link-block__icon {
  text-align: center;
}
.link-block__icon img {
  display: block;
  margin: 0 auto;
  max-width: 40px;
  max-height: 70px;
}
.link-block__separator {
  margin-bottom: 2px;
}
.link-block--no-hover::after, .link-block--no-hover:hover::before {
  display: none;
}

.dashboard-widget-holder {
  padding-top: 48px;
}
.dashboard-widget-holder .loader__overlay {
  background: rgba(209, 209, 209, 0.9);
}

.dashboard-widget {
  background: #1a1a1a;
  width: 100%;
  margin-bottom: 24px;
  color: #fff;
  position: relative;
}
.dashboard-widget:hover {
  text-decoration: none;
}
.dashboard-widget__title {
  background: #767676;
  position: relative;
  padding: 24px;
  color: #fff;
}
.dashboard-widget__indicator {
  margin-right: 24px;
}
.dashboard-widget__indicator::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 8px;
}
.dashboard-widget__indicator--green::after {
  background: #34a156;
}
.dashboard-widget__indicator--red::after {
  background: #ffb4b4;
}
.dashboard-widget__indicator--yellow::after {
  background: #fefd29;
}
.dashboard-widget__amount-mark {
  width: 24px;
  line-height: 24px;
  background: #34a156;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  margin-right: 8px;
  display: inline-block;
}
.dashboard-widget__activity-item-holder .dashboard-widget__activity-item:last-child {
  border: none;
}
.dashboard-widget__activity-item {
  padding: 24px;
  padding-left: 48px;
  border-bottom: 1px solid #d6d6d6;
  border-color: #767676;
}
.dashboard-widget__activity-item a {
  color: #fff;
}
.dashboard-widget dl {
  margin: 0;
}
.dashboard-widget .collapsed .icon-minus {
  display: none;
}
.dashboard-widget .collapsed .icon-plus {
  display: -webkit-box;
  display: flex;
}
.dashboard-widget .is-expanded .icon-minus {
  display: -webkit-box;
  display: flex;
}
.dashboard-widget .is-expanded .icon-plus {
  display: none;
}
.dashboard-widget--inactive {
  position: relative;
  color: #1a1a1a;
}
.dashboard-widget--inactive .dashboard-widget__title {
  background: #d6d6d6;
}
.dashboard-widget--inactive .dashboard-widget__title h3 {
  opacity: 0.2;
}
.dashboard-widget--inactive .icon-plus,
.dashboard-widget--inactive .icon-minus {
  display: none !important;
}

.dashboard-box__title-link {
  color: inherit;
}
.dashboard-box__title-link:hover {
  text-decoration: none;
}

.is-expanded .addon__collapse-icon::before {
  font-size: 16px !important;
  content: "󱁊";
}
.collapsed .addon__collapse-icon::before {
  font-size: 16px !important;
  content: "󱁘";
}

.inline-edit__view-mode {
  line-height: 48px;
}
.inline-edit__edit-mode .inline-edit__field {
  padding-right: 96px;
}
.inline-edit__controls {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
.error .inline-edit__controls {
  display: none;
}
.inline-edit__controls .button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  border-left: 1px solid #d6d6d6;
}

.esim__heading {
  width: 100%;
  height: 64px;
  border-color: #f5f5f5;
}
.esim__heading-logo {
  width: 48px;
}
.esim__banner {
  width: 100%;
  height: 232px;
  background-color: #e6eef4;
}
.esim__banner-image {
  width: 100px;
}
.esim__addon-image {
  min-width: 104px;
  height: 128px;
  background-color: #e6eef4;
}
.esim__addon-pic {
  width: 48px;
}
.esim__addon-label {
  min-width: 104px;
}

.tickets__categories {
  margin-left: -24px;
  margin-right: -24px;
}
.tickets__categories > [class*=col] {
  padding-left: 24px;
  padding-right: 24px;
}
.attachments--selected .attachments__file {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  padding: 8px 0;
}
.error .attachments__file {
  background: #fff0f4;
  border: 1px solid #ff648c;
}
.attachments--selected.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #ffb4b4;
  font-size: 14px;
  line-height: 20px;
}
.attachments--selected .attachments__name {
  color: #1a1a1a;
  font-size: 14px;
  line-height: 20px;
}
.attachments__opener {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.attachments--selected .attachments__opener {
  display: none;
}
.attachments__closer {
  display: none;
}
.attachments--selected .attachments__closer {
  display: block;
}
.attachments__icon {
  padding-right: 8px;
}
.attachments--selected .attachments__icon {
  color: #1a1a1a;
  padding: 8px 16px;
}
.attachments--selected .attachments__icon::before {
  font-size: 24px !important;
  content: "󱀦";
}

/**
name: Currency
type: Selfcare
examples:
  - name: single
	tmpl:
		include: normal.html
*/
.form__field--currency {
  position: relative;
}
.form__field--currency input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #0c1026;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 3px;
  font-family: Telenor, Arial, Helvetica, sans-serif;
  height: 48px;
  line-height: normal;
  -webkit-transition: border-color 1s;
  transition: border-color 1s;
  text-align: right;
  padding-right: 48px;
}
.form__field--currency input::-webkit-input-placeholder {
  color: #d6d6d6;
}
.form__field--currency input::-moz-placeholder {
  color: #d6d6d6;
}
.form__field--currency input:-ms-input-placeholder {
  color: #d6d6d6;
}
.form__field--currency input::-ms-input-placeholder {
  color: #d6d6d6;
}
.form__field--currency input::placeholder {
  color: #d6d6d6;
}
.form__field--currency input:hover, .form__field--currency input:focus {
  border-color: #007ad0;
}
.form__field--currency input[disabled] {
  background: #d6d6d6;
  border-color: #d6d6d6;
}
.form__field--currency input[disabled]::-webkit-input-placeholder {
  color: #767676;
}
.form__field--currency input[disabled]::-moz-placeholder {
  color: #767676;
}
.form__field--currency input[disabled]:-ms-input-placeholder {
  color: #767676;
}
.form__field--currency input[disabled]::-ms-input-placeholder {
  color: #767676;
}
.form__field--currency input[disabled]::placeholder {
  color: #767676;
}
.form__field--currency input:-moz-placeholder-shown + label {
  color: #d6d6d6;
}
.form__field--currency input:-ms-input-placeholder + label {
  color: #d6d6d6;
}
.form__field--currency input:placeholder-shown + label {
  color: #d6d6d6;
}
.form__field--currency input:-ms-input-placeholder + label {
  color: #d6d6d6;
}
.form__field--currency label {
  font-family: Telenor, Arial, Helvetica, sans-serif;
  position: absolute;
  left: calc(100% - 42px);
  top: 24px;
  color: #0c1026;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  text-align: left;
  font-size: 18px;
  line-height: 48px;
}
.form__field--currency.error input {
  background: #ffb4b4;
  border-color: #ffb4b4;
}
.form__field--currency.error input::-webkit-input-placeholder {
  color: #767676;
}
.form__field--currency.error input::-moz-placeholder {
  color: #767676;
}
.form__field--currency.error input:-ms-input-placeholder {
  color: #767676;
}
.form__field--currency.error input::-ms-input-placeholder {
  color: #767676;
}
.form__field--currency.error input::placeholder {
  color: #767676;
}
.form__field--currency.error input:-moz-placeholder-shown + label {
  color: #767676;
}
.form__field--currency.error input:-ms-input-placeholder + label {
  color: #767676;
}
.form__field--currency.error input:placeholder-shown + label {
  color: #767676;
}
.form__field--currency.error input:-ms-input-placeholder + label {
  color: #767676;
}
.form__field--currency.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #ffb4b4;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
}
.form__field--currency .tooltip-trigger-marker {
  display: none;
}

.data-collection .opener {
  position: relative;
}
.data-collection .opener::after {
  font-size: 16px !important;
  content: "󱁘";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.data-collection .opener.expanded::after {
  font-size: 16px !important;
  content: "󱁊";
}
.data-collection .autocomplete__item {
  width: 100%;
  text-align: left;
}
.data-collection .autocomplete__item:hover {
  background-color: #f5f5f5;
}
.data-collection .error-absolute::after {
  position: absolute;
}

.rule .icon {
  display: none;
}
.rule.passed .icon {
  display: inline-block;
}
.rule.passed .tooltip__trigger {
  display: none;
}

.service-block .carousel__prev, .service-block .carousel__next {
  width: 40px;
  position: static;
  background: #f5f5f5;
  border-radius: 3px;
  -webkit-transform: translate(0);
          transform: translate(0);
  border: 0;
  color: #1a1a1a;
}
.service-block .carousel__prev:hover, .service-block .carousel__next:hover {
  color: #767676;
}

.message__inner.fmc {
  background: #19aaf8;
  color: #fff;
}
.message__inner.fmc .message__close::before {
  color: #fff;
}
.message__inner.fmc .fmc--icon {
  vertical-align: top;
  width: 42px;
  height: 20px;
}
.message__inner.fmc .message__text {
  font-size: 16px;
  line-height: 22px;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

.fmc-icon {
  width: 42px;
  height: 20px;
}
.fmc-icon__bar {
  border: 1px solid #19aaf8;
  background-color: #fff;
  opacity: 0.5;
  width: 23%;
  max-width: 23%;
}
.fmc-icon__bar.is-active {
  opacity: 1;
  width: 31%;
  max-width: 31%;
}

.fmc-discount__box {
  height: 76px;
  width: 112px;
}

.fmc-animation {
  display: inline-block;
}
.fmc-animation .digit {
  display: inline-block;
  font-size: 24px;
  line-height: 30px;
  height: 30px;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.fmc-animation .time-part {
  text-align: right;
  width: 30px;
  height: 26px;
  overflow: hidden;
  display: inline-block;
}
.fmc-animation .digit-wrapper {
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: timers-15;
          animation-name: timers-15;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
@-webkit-keyframes timers-15 {
  0% {
    -webkit-transform: translateY(6.6666666667%);
            transform: translateY(6.6666666667%);
  }
  6.6666666667% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  13.3333333333% {
    -webkit-transform: translateY(-6.6666666667%);
            transform: translateY(-6.6666666667%);
  }
  20% {
    -webkit-transform: translateY(-13.3333333333%);
            transform: translateY(-13.3333333333%);
  }
  26.6666666667% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  33.3333333333% {
    -webkit-transform: translateY(-26.6666666667%);
            transform: translateY(-26.6666666667%);
  }
  40% {
    -webkit-transform: translateY(-33.3333333333%);
            transform: translateY(-33.3333333333%);
  }
  46.6666666667% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  53.3333333333% {
    -webkit-transform: translateY(-46.6666666667%);
            transform: translateY(-46.6666666667%);
  }
  60% {
    -webkit-transform: translateY(-53.3333333333%);
            transform: translateY(-53.3333333333%);
  }
  66.6666666667% {
    -webkit-transform: translateY(-60%);
            transform: translateY(-60%);
  }
  73.3333333333% {
    -webkit-transform: translateY(-66.6666666667%);
            transform: translateY(-66.6666666667%);
  }
  80% {
    -webkit-transform: translateY(-73.3333333333%);
            transform: translateY(-73.3333333333%);
  }
  86.6666666667% {
    -webkit-transform: translateY(-80%);
            transform: translateY(-80%);
  }
  93.3333333333% {
    -webkit-transform: translateY(-86.6666666667%);
            transform: translateY(-86.6666666667%);
  }
  100% {
    -webkit-transform: translateY(-93.3333333333%);
            transform: translateY(-93.3333333333%);
  }
}
@keyframes timers-15 {
  0% {
    -webkit-transform: translateY(6.6666666667%);
            transform: translateY(6.6666666667%);
  }
  6.6666666667% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  13.3333333333% {
    -webkit-transform: translateY(-6.6666666667%);
            transform: translateY(-6.6666666667%);
  }
  20% {
    -webkit-transform: translateY(-13.3333333333%);
            transform: translateY(-13.3333333333%);
  }
  26.6666666667% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  33.3333333333% {
    -webkit-transform: translateY(-26.6666666667%);
            transform: translateY(-26.6666666667%);
  }
  40% {
    -webkit-transform: translateY(-33.3333333333%);
            transform: translateY(-33.3333333333%);
  }
  46.6666666667% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  53.3333333333% {
    -webkit-transform: translateY(-46.6666666667%);
            transform: translateY(-46.6666666667%);
  }
  60% {
    -webkit-transform: translateY(-53.3333333333%);
            transform: translateY(-53.3333333333%);
  }
  66.6666666667% {
    -webkit-transform: translateY(-60%);
            transform: translateY(-60%);
  }
  73.3333333333% {
    -webkit-transform: translateY(-66.6666666667%);
            transform: translateY(-66.6666666667%);
  }
  80% {
    -webkit-transform: translateY(-73.3333333333%);
            transform: translateY(-73.3333333333%);
  }
  86.6666666667% {
    -webkit-transform: translateY(-80%);
            transform: translateY(-80%);
  }
  93.3333333333% {
    -webkit-transform: translateY(-86.6666666667%);
            transform: translateY(-86.6666666667%);
  }
  100% {
    -webkit-transform: translateY(-93.3333333333%);
            transform: translateY(-93.3333333333%);
  }
}

.animate-text {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  display: none;
  color: #767676;
}

.animate-text-hide {
  display: inline-block;
  overflow: hidden;
  color: #767676;
}

.fmc-bar {
  margin: 0 1px;
}

.fmc-column.less {
  width: 20%;
  max-width: 20%;
}
.fmc-column.more {
  width: 40%;
  max-width: 40%;
}

.animation-more {
  -webkit-animation: moreWidth 0.5s ease-in-out 1s forwards;
          animation: moreWidth 0.5s ease-in-out 1s forwards;
}
.animation-more .fmc-bar {
  -webkit-animation: 0.5s ease-in-out 1s forwards colorCurrent;
          animation: 0.5s ease-in-out 1s forwards colorCurrent;
}
.animation-more .animate-text {
  display: inline-block;
  -webkit-animation: typing 0.5s ease-in-out 1s forwards;
          animation: typing 0.5s ease-in-out 1s forwards;
}
.animation-more .animate-text-hide {
  -webkit-animation: typingHide 0s ease-in 1s;
          animation: typingHide 0s ease-in 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.animation-more .animation-percent {
  -webkit-animation: fmcPercent 0.5s ease-in-out 1s forwards;
          animation: fmcPercent 0.5s ease-in-out 1s forwards;
}

@-webkit-keyframes animationFmcBackgroundRed {
  to {
    background-color: #fff0f4;
  }
}

@keyframes animationFmcBackgroundRed {
  to {
    background-color: #fff0f4;
  }
}
.bar-1.animation-more .fmc-bar {
  -webkit-animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundRed;
          animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundRed;
}

@-webkit-keyframes animationFmcBackgroundOrange {
  to {
    background-color: #fdfdc9;
  }
}

@keyframes animationFmcBackgroundOrange {
  to {
    background-color: #fdfdc9;
  }
}
.bar-2.animation-more .fmc-bar {
  -webkit-animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundOrange;
          animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundOrange;
}

@-webkit-keyframes animationFmcBackgroundGreen {
  to {
    background-color: #cce6db;
  }
}

@keyframes animationFmcBackgroundGreen {
  to {
    background-color: #cce6db;
  }
}
.bar-3.animation-more .fmc-bar {
  -webkit-animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundGreen;
          animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundGreen;
}

@-webkit-keyframes animationFmcBackgroundBlue {
  to {
    background-color: #a3deff;
  }
}

@keyframes animationFmcBackgroundBlue {
  to {
    background-color: #a3deff;
  }
}
.bar-4.animation-more .fmc-bar {
  -webkit-animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundBlue;
          animation: 0.5s ease-in-out 1s forwards animationFmcBackgroundBlue;
}

.animation-less {
  -webkit-animation: lessWidth 0.5s ease-in-out 1s forwards;
          animation: lessWidth 0.5s ease-in-out 1s forwards;
}

.fmc-animation-bar-full .bar-1 {
  -webkit-animation: bar1 7.5s ease-in-out;
          animation: bar1 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-1 .fmc-bar {
  -webkit-animation: longColorCurrent1 7.5s ease-in-out;
          animation: longColorCurrent1 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-1 .animation-percent {
  -webkit-animation: fmcPercent1 7.5s ease-in-out;
          animation: fmcPercent1 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-2 {
  -webkit-animation: bar2 7.5s ease-in-out;
          animation: bar2 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-2 .fmc-bar {
  -webkit-animation: longColorCurrent2 7.5s ease-in-out;
          animation: longColorCurrent2 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-2 .animation-percent {
  -webkit-animation: fmcPercent2 7.5s ease-in-out;
          animation: fmcPercent2 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-3 {
  -webkit-animation: bar3 7.5s ease-in-out;
          animation: bar3 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-3 .fmc-bar {
  -webkit-animation: longColorCurrent3 7.5s ease-in-out;
          animation: longColorCurrent3 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-3 .animation-percent {
  -webkit-animation: fmcPercent3 7.5s ease-in-out;
          animation: fmcPercent3 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-4 {
  -webkit-animation: bar4 7.5s ease-in-out;
          animation: bar4 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-4 .fmc-bar {
  -webkit-animation: longColorCurrent4 7.5s ease-in-out;
          animation: longColorCurrent4 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-4 .animation-percent {
  -webkit-animation: fmcPercent4 7.5s ease-in-out;
          animation: fmcPercent4 7.5s ease-in-out;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
}
@-webkit-keyframes bar1 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 40%;
    max-width: 40%;
  }
  33% {
    width: 40%;
    max-width: 40%;
  }
  40% {
    width: 20%;
    max-width: 20%;
  }
  93% {
    width: 20%;
    max-width: 20%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@keyframes bar1 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 40%;
    max-width: 40%;
  }
  33% {
    width: 40%;
    max-width: 40%;
  }
  40% {
    width: 20%;
    max-width: 20%;
  }
  93% {
    width: 20%;
    max-width: 20%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@-webkit-keyframes bar2 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 20%;
    max-width: 20%;
  }
  33% {
    width: 20%;
    max-width: 20%;
  }
  40% {
    width: 40%;
    max-width: 40%;
  }
  53% {
    width: 40%;
    max-width: 40%;
  }
  60% {
    width: 20%;
    max-width: 20%;
  }
  93% {
    width: 20%;
    max-width: 20%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@keyframes bar2 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 20%;
    max-width: 20%;
  }
  33% {
    width: 20%;
    max-width: 20%;
  }
  40% {
    width: 40%;
    max-width: 40%;
  }
  53% {
    width: 40%;
    max-width: 40%;
  }
  60% {
    width: 20%;
    max-width: 20%;
  }
  93% {
    width: 20%;
    max-width: 20%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@-webkit-keyframes bar3 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 20%;
    max-width: 20%;
  }
  53% {
    width: 20%;
    max-width: 20%;
  }
  60% {
    width: 40%;
    max-width: 40%;
  }
  73% {
    width: 40%;
    max-width: 40%;
  }
  80% {
    width: 20%;
    max-width: 20%;
  }
  93% {
    width: 20%;
    max-width: 20%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@keyframes bar3 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 20%;
    max-width: 20%;
  }
  53% {
    width: 20%;
    max-width: 20%;
  }
  60% {
    width: 40%;
    max-width: 40%;
  }
  73% {
    width: 40%;
    max-width: 40%;
  }
  80% {
    width: 20%;
    max-width: 20%;
  }
  93% {
    width: 20%;
    max-width: 20%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@-webkit-keyframes bar4 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 20%;
    max-width: 20%;
  }
  73% {
    width: 20%;
    max-width: 20%;
  }
  80% {
    width: 40%;
    max-width: 40%;
  }
  93% {
    width: 40%;
    max-width: 40%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@keyframes bar4 {
  0% {
    width: 25%;
    max-width: 25%;
  }
  13% {
    width: 25%;
    max-width: 25%;
  }
  20% {
    width: 20%;
    max-width: 20%;
  }
  73% {
    width: 20%;
    max-width: 20%;
  }
  80% {
    width: 40%;
    max-width: 40%;
  }
  93% {
    width: 40%;
    max-width: 40%;
  }
  100% {
    width: 25%;
    max-width: 25%;
  }
}
@-webkit-keyframes longColorCurrent1 {
  13% {
    background-color: #f5f5f5;
  }
  20% {
    background-color: #fff0f4;
  }
  33% {
    background-color: #fff0f4;
  }
  40% {
    background-color: #f5f5f5;
  }
}
@keyframes longColorCurrent1 {
  13% {
    background-color: #f5f5f5;
  }
  20% {
    background-color: #fff0f4;
  }
  33% {
    background-color: #fff0f4;
  }
  40% {
    background-color: #f5f5f5;
  }
}
@-webkit-keyframes longColorCurrent2 {
  33% {
    background-color: #f5f5f5;
  }
  40% {
    background-color: #fdfdc9;
  }
  53% {
    background-color: #fdfdc9;
  }
  60% {
    background-color: #f5f5f5;
  }
}
@keyframes longColorCurrent2 {
  33% {
    background-color: #f5f5f5;
  }
  40% {
    background-color: #fdfdc9;
  }
  53% {
    background-color: #fdfdc9;
  }
  60% {
    background-color: #f5f5f5;
  }
}
@-webkit-keyframes longColorCurrent3 {
  53% {
    background-color: #f5f5f5;
  }
  60% {
    background-color: #cce6db;
  }
  73% {
    background-color: #cce6db;
  }
  80% {
    background-color: #f5f5f5;
  }
}
@keyframes longColorCurrent3 {
  53% {
    background-color: #f5f5f5;
  }
  60% {
    background-color: #cce6db;
  }
  73% {
    background-color: #cce6db;
  }
  80% {
    background-color: #f5f5f5;
  }
}
@-webkit-keyframes longColorCurrent4 {
  73% {
    background-color: #f5f5f5;
  }
  80% {
    background-color: #a3deff;
  }
  93% {
    background-color: #a3deff;
  }
  100% {
    background-color: #f5f5f5;
  }
}
@keyframes longColorCurrent4 {
  73% {
    background-color: #f5f5f5;
  }
  80% {
    background-color: #a3deff;
  }
  93% {
    background-color: #a3deff;
  }
  100% {
    background-color: #f5f5f5;
  }
}
@-webkit-keyframes fmcPercent1 {
  13% {
    color: #767676;
    font-weight: normal;
  }
  20% {
    color: #1a1a1a;
    font-weight: bold;
  }
  33% {
    color: #1a1a1a;
    font-weight: bold;
  }
  40% {
    color: #767676;
    font-weight: normal;
  }
}
@keyframes fmcPercent1 {
  13% {
    color: #767676;
    font-weight: normal;
  }
  20% {
    color: #1a1a1a;
    font-weight: bold;
  }
  33% {
    color: #1a1a1a;
    font-weight: bold;
  }
  40% {
    color: #767676;
    font-weight: normal;
  }
}
@-webkit-keyframes fmcPercent2 {
  33% {
    color: #767676;
    font-weight: normal;
  }
  40% {
    color: #1a1a1a;
    font-weight: bold;
  }
  53% {
    color: #1a1a1a;
    font-weight: bold;
  }
  60% {
    color: #767676;
    font-weight: normal;
  }
}
@keyframes fmcPercent2 {
  33% {
    color: #767676;
    font-weight: normal;
  }
  40% {
    color: #1a1a1a;
    font-weight: bold;
  }
  53% {
    color: #1a1a1a;
    font-weight: bold;
  }
  60% {
    color: #767676;
    font-weight: normal;
  }
}
@-webkit-keyframes fmcPercent3 {
  53% {
    color: #767676;
    font-weight: normal;
  }
  60% {
    color: #1a1a1a;
    font-weight: bold;
  }
  73% {
    color: #1a1a1a;
    font-weight: bold;
  }
  80% {
    color: #767676;
    font-weight: normal;
  }
}
@keyframes fmcPercent3 {
  53% {
    color: #767676;
    font-weight: normal;
  }
  60% {
    color: #1a1a1a;
    font-weight: bold;
  }
  73% {
    color: #1a1a1a;
    font-weight: bold;
  }
  80% {
    color: #767676;
    font-weight: normal;
  }
}
@-webkit-keyframes fmcPercent4 {
  73% {
    color: #767676;
    font-weight: normal;
  }
  80% {
    color: #1a1a1a;
    font-weight: bold;
  }
  93% {
    color: #1a1a1a;
    font-weight: bold;
  }
  100% {
    color: #767676;
    font-weight: normal;
  }
}
@keyframes fmcPercent4 {
  73% {
    color: #767676;
    font-weight: normal;
  }
  80% {
    color: #1a1a1a;
    font-weight: bold;
  }
  93% {
    color: #1a1a1a;
    font-weight: bold;
  }
  100% {
    color: #767676;
    font-weight: normal;
  }
}

@-webkit-keyframes fmcPercent {
  to {
    color: #1a1a1a;
    font-weight: bold;
  }
}

@keyframes fmcPercent {
  to {
    color: #1a1a1a;
    font-weight: bold;
  }
}
@-webkit-keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
    color: #1a1a1a;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
    color: #1a1a1a;
  }
}
@-webkit-keyframes typingHide {
  from {
    visibility: hidden;
    max-width: 0;
  }
  to {
    visibility: hidden;
    max-width: 0;
  }
}
@keyframes typingHide {
  from {
    visibility: hidden;
    max-width: 0;
  }
  to {
    visibility: hidden;
    max-width: 0;
  }
}
@-webkit-keyframes moreWidth {
  to {
    width: 40%;
    max-width: 40%;
  }
}
@keyframes moreWidth {
  to {
    width: 40%;
    max-width: 40%;
  }
}
@-webkit-keyframes lessWidth {
  to {
    width: 20%;
    max-width: 20%;
  }
}
@keyframes lessWidth {
  to {
    width: 20%;
    max-width: 20%;
  }
}
.light-border--top {
  border-top: 1px solid rgba(12, 16, 38, 0.1);
}

.light-border--bottom {
  border-bottom: 1px solid rgba(12, 16, 38, 0.1);
}

.country-columns {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
}

.fmc--message {
  text-align: left;
  color: #fff;
  background-color: #19aaf8;
  width: 100%;
  border: 0;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  margin-bottom: 32px;
}
.fmc--message:hover {
  background-color: rgba(25, 170, 248, 0.9);
  cursor: pointer;
}

.survey.comments-visible .survey__field {
  max-height: 30em;
  overflow: visible;
}
.survey__content {
  max-height: 30em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: max-height, opacity 0.6s linear;
  transition: max-height, opacity 0.6s linear;
}
.survey--sent .survey__content {
  max-height: 0;
  opacity: 0;
}
.survey__field {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.6s linear;
  transition: max-height 0.6s linear;
  padding-top: 0;
}
.survey__form-field {
  min-height: 96px;
}
.survey__confirm-text {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  -webkit-transition: max-height, opacity 0.6s linear;
  transition: max-height, opacity 0.6s linear;
}
.survey--sent .survey__confirm-text {
  max-height: 30em;
  opacity: 1;
}

/* Mobile guide block */
.steps-list {
  counter-reset: steps-list;
}
.steps-list__item {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  counter-increment: steps-list;
  color: #19aaf8;
  border: 2px solid #19aaf8;
  border-radius: 50%;
  z-index: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.steps-list__item::after {
  font-weight: bold;
  content: counter(steps-list);
}
.steps-list__image {
  max-width: 100%;
  height: auto;
}

.text--content h1,
.text--content h2,
.text--content h3 {
  font-family: Telenor, Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: block;
  margin-bottom: 24px;
}
.text--content h1 {
  font-size: 32px;
  line-height: 40px;
}
.text--content h2 {
  font-size: 24px;
  line-height: 32px;
}
.text--content h3 {
  font-size: 18px;
  line-height: 24px;
}
.text--content p,
.text--content ul,
.text--content ol,
.text--content dl {
  margin-bottom: 24px;
}
.text--content ul > li:empty {
  margin: 0;
}
.text--content ul > li:empty::before {
  display: none;
}
.text--content pre {
  display: block;
  border-radius: 3px;
  border: 1px solid #d6d6d6;
  background: #f5f5f5;
  padding: 24px;
  overflow-x: scroll;
}

.sidemenu__opener {
  position: relative;
}
.sidemenu__opener:after {
  font-size: 16px !important;
  content: "󱀓";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.sidemenu:checked ~ .sidemenu__opener:after {
  font-size: 16px !important;
  content: "󱀖";
}
.sidemenu__content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
  transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.sidemenu:checked ~ .sidemenu__content {
  max-height: 100%;
  overflow: visible;
}

.ytplayer-holder {
  position: relative;
  z-index: 0;
}
.ytplayer-holder .ytplayer-video--flex {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}
.ytplayer-holder .ytplayer-video--flex iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.ytplayer-holder.ytplayer-covered .ytplayer-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.ytplayer-holder.ytplayer-covered .ytplayer-cover {
  opacity: 1;
  position: relative;
  z-index: 3;
  visibility: visible;
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.ytplayer-holder.ytplayer-covered .ytplayer-cover img {
  width: 100%;
}
.ytplayer-holder.ytplayer-covered.ytplayer-active .ytplayer-cover {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0s linear 0s;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.ytplayer-holder.ytplayer-fullwidth {
  width: 100vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.ytplayer-holder.ytplayer-halfwidth {
  width: 50%;
}
.ytplayer-holder .ytplayer-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.stores__map {
  height: 100%;
  width: 100%;
}

.coverage-map__settings-wrapper {
  z-index: 1;
  position: absolute;
  top: 16px;
  right: 16px;
  overflow-y: auto;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 3px;
}
.coverage-map__settings-wrapper--opened {
  bottom: 16px;
  left: 16px;
}
.coverage-map__settings-button {
  z-index: 3;
  border: none;
}
.coverage-map__settings-button--opened {
  position: absolute;
  top: 0;
  right: 0;
}
.coverage-map__settings {
  border-radius: 3px;
  z-index: 1;
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  width: 296px;
}
.coverage-map__opacity-pointer {
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.coverage-map__map-wrapper {
  -webkit-box-flex: 1;
          flex: 1;
  height: 100%;
}
.coverage-map__map {
  min-height: 480px;
  height: 100%;
  width: 100%;
}

.legend-item {
  list-style: none;
  font-size: 16px;
  line-height: 24px;
}
.legend-item__dot {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: inline-block;
}

.map-popup__tip-anchor {
  height: 0;
  position: absolute;
  width: 200px;
}
.map-popup__anchor {
  position: absolute;
  width: 100%;
  bottom: 32px;
  padding-top: 8px;
}
.map-popup__content {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  background-color: #fff;
  padding: 16px;
  overflow-y: auto;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.streamer__img {
  height: 32px;
}
.streamer--sticky {
  position: sticky;
  top: 0;
  z-index: 500;
}

.article__image-holder {
  height: 196px;
  max-height: 196px;
}
.article__image {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.slider {
  margin-right: -16px;
}
.slider__side-col {
  min-width: 20px;
}
.slider .carousel__prev, .slider .carousel__next {
  border: none;
  position: relative;
  top: 0;
  left: 0;
  width: 20px;
}
.slider .carousel__prev:hover, .slider .carousel__next:hover {
  color: #767676;
  background: none;
  border: none;
}
.slider .carousel__prev:disabled, .slider .carousel__next:disabled {
  visibility: hidden;
}
.slider .carousel__holder {
  min-height: auto;
}
.slider .carousel__item {
  -webkit-box-align: start;
          align-items: start;
  min-width: 136px;
  max-width: 136px;
}
.slider .carousel__item > div {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 336px) {
  .header__menu {
    margin-left: -12px;
    margin-right: -12px;
  }
  .header__menu > [class*=col] {
    padding: 0 12px;
  }
}
@media (min-width: 480px) {
  .datepicker--range [class*=col-] {
    -webkit-box-flex: 1;
            flex: auto;
    width: 50%;
    max-width: 50%;
  }
}
@media (min-width: 768px) {
  .container {
    width: calc(100% - 2 * 24px);
    max-width: 768px;
  }
  .container--main {
    padding-left: 0;
    padding-right: 0;
  }
  .subscription__content--spacing {
    padding-right: 24px;
    padding-left: 24px;
  }
  .subscription__badge {
    padding: 4px 16px;
  }
  .subscription__old-price {
    display: inline-block;
  }
}
@media (min-width: 1024px) {
  body.business-page {
    min-width: 1248px;
    padding-left: 144px;
  }
  .container {
    width: calc(100% - 2 * 24px);
    max-width: 1344px;
  }
  .container--main {
    padding-left: 0;
    padding-right: 0;
  }
  .container--wide {
    margin-left: auto;
    margin-right: auto;
  }
  #content {
    padding: 48px 0 64px;
  }
  .desktop-text--left {
    text-align: left;
  }

  .desktop-text--right {
    text-align: right;
  }

  .desktop-text--center {
    text-align: center;
  }

  .desktop-text--inherit {
    text-align: inherit;
  }
  .desktop-display--none {
    display: none !important;
  }

  .desktop-display--block {
    display: block !important;
  }

  .desktop-display--inline {
    display: inline !important;
  }

  .desktop-display--inline-block {
    display: inline-block !important;
  }

  .desktop-display--flex {
    display: -webkit-box !important;
    display: flex !important;
  }
  .desktop-margin-whole--none {
    margin: 0 !important;
  }

  .desktop-margin-whole--xxxsmall {
    margin: 4px !important;
  }

  .desktop-margin-whole--xxsmall {
    margin: 8px !important;
  }

  .desktop-margin-whole--xsmall {
    margin: 12px !important;
  }

  .desktop-margin-whole--small {
    margin: 16px !important;
  }

  .desktop-margin-whole {
    margin: 24px !important;
  }

  .desktop-margin-whole--large {
    margin: 32px !important;
  }

  .desktop-margin-whole--xlarge {
    margin: 48px !important;
  }

  .desktop-margin-whole--xxlarge {
    margin: 64px !important;
  }

  .desktop-margin-whole--xxxlarge {
    margin: 96px !important;
  }

  .desktop-margin-whole--auto {
    margin: auto !important;
  }
  .desktop-margin-trailer--none {
    margin-bottom: 0 !important;
  }

  .desktop-margin-trailer--xxxsmall {
    margin-bottom: 4px !important;
  }

  .desktop-margin-trailer--xxsmall {
    margin-bottom: 8px !important;
  }

  .desktop-margin-trailer--xsmall {
    margin-bottom: 12px !important;
  }

  .desktop-margin-trailer--small {
    margin-bottom: 16px !important;
  }

  .desktop-margin-trailer {
    margin-bottom: 24px !important;
  }

  .desktop-margin-trailer--large {
    margin-bottom: 32px !important;
  }

  .desktop-margin-trailer--xlarge {
    margin-bottom: 48px !important;
  }

  .desktop-margin-trailer--xxlarge {
    margin-bottom: 64px !important;
  }

  .desktop-margin-trailer--xxxlarge {
    margin-bottom: 96px !important;
  }

  .desktop-margin-trailer--auto {
    margin-bottom: auto !important;
  }
  .desktop-margin-toleft--none {
    margin-left: 0 !important;
  }

  .desktop-margin-toleft--xxxsmall {
    margin-left: 4px !important;
  }

  .desktop-margin-toleft--xxsmall {
    margin-left: 8px !important;
  }

  .desktop-margin-toleft--xsmall {
    margin-left: 12px !important;
  }

  .desktop-margin-toleft--small {
    margin-left: 16px !important;
  }

  .desktop-margin-toleft {
    margin-left: 24px !important;
  }

  .desktop-margin-toleft--large {
    margin-left: 32px !important;
  }

  .desktop-margin-toleft--xlarge {
    margin-left: 48px !important;
  }

  .desktop-margin-toleft--xxlarge {
    margin-left: 64px !important;
  }

  .desktop-margin-toleft--xxxlarge {
    margin-left: 96px !important;
  }

  .desktop-margin-toleft--auto {
    margin-left: auto !important;
  }
  .desktop-margin-toright--none {
    margin-right: 0 !important;
  }

  .desktop-margin-toright--xxxsmall {
    margin-right: 4px !important;
  }

  .desktop-margin-toright--xxsmall {
    margin-right: 8px !important;
  }

  .desktop-margin-toright--xsmall {
    margin-right: 12px !important;
  }

  .desktop-margin-toright--small {
    margin-right: 16px !important;
  }

  .desktop-margin-toright {
    margin-right: 24px !important;
  }

  .desktop-margin-toright--large {
    margin-right: 32px !important;
  }

  .desktop-margin-toright--xlarge {
    margin-right: 48px !important;
  }

  .desktop-margin-toright--xxlarge {
    margin-right: 64px !important;
  }

  .desktop-margin-toright--xxxlarge {
    margin-right: 96px !important;
  }

  .desktop-margin-toright--auto {
    margin-right: auto !important;
  }
  .desktop-padding-whole--none {
    padding: 0 !important;
  }

  .desktop-padding-whole--xxxsmall {
    padding: 4px !important;
  }

  .desktop-padding-whole--xxsmall {
    padding: 8px !important;
  }

  .desktop-padding-whole--xsmall {
    padding: 12px !important;
  }

  .desktop-padding-whole--small {
    padding: 16px !important;
  }

  .desktop-padding-whole {
    padding: 24px !important;
  }

  .desktop-padding-whole--large {
    padding: 32px !important;
  }

  .desktop-padding-whole--xlarge {
    padding: 48px !important;
  }

  .desktop-padding-whole--xxlarge {
    padding: 64px !important;
  }

  .desktop-padding-whole--xxxlarge {
    padding: 96px !important;
  }
  .desktop-padding-trailer--none {
    padding-bottom: 0 !important;
  }

  .desktop-padding-trailer--xxxsmall {
    padding-bottom: 4px !important;
  }

  .desktop-padding-trailer--xxsmall {
    padding-bottom: 8px !important;
  }

  .desktop-padding-trailer--xsmall {
    padding-bottom: 12px !important;
  }

  .desktop-padding-trailer--small {
    padding-bottom: 16px !important;
  }

  .desktop-padding-trailer {
    padding-bottom: 24px !important;
  }

  .desktop-padding-trailer--large {
    padding-bottom: 32px !important;
  }

  .desktop-padding-trailer--xlarge {
    padding-bottom: 48px !important;
  }

  .desktop-padding-trailer--xxlarge {
    padding-bottom: 64px !important;
  }

  .desktop-padding-trailer--xxxlarge {
    padding-bottom: 96px !important;
  }
  .desktop-padding-leader--none {
    padding-top: 0 !important;
  }

  .desktop-padding-leader--xxxsmall {
    padding-top: 4px !important;
  }

  .desktop-padding-leader--xxsmall {
    padding-top: 8px !important;
  }

  .desktop-padding-leader--xsmall {
    padding-top: 12px !important;
  }

  .desktop-padding-leader--small {
    padding-top: 16px !important;
  }

  .desktop-padding-leader {
    padding-top: 24px !important;
  }

  .desktop-padding-leader--large {
    padding-top: 32px !important;
  }

  .desktop-padding-leader--xlarge {
    padding-top: 48px !important;
  }

  .desktop-padding-leader--xxlarge {
    padding-top: 64px !important;
  }

  .desktop-padding-leader--xxxlarge {
    padding-top: 96px !important;
  }
  .desktop-padding-toleft--none {
    padding-left: 0 !important;
  }

  .desktop-padding-toleft--xxxsmall {
    padding-left: 4px !important;
  }

  .desktop-padding-toleft--xxsmall {
    padding-left: 8px !important;
  }

  .desktop-padding-toleft--xsmall {
    padding-left: 12px !important;
  }

  .desktop-padding-toleft--small {
    padding-left: 16px !important;
  }

  .desktop-padding-toleft {
    padding-left: 24px !important;
  }

  .desktop-padding-toleft--large {
    padding-left: 32px !important;
  }

  .desktop-padding-toleft--xlarge {
    padding-left: 48px !important;
  }

  .desktop-padding-toleft--xxlarge {
    padding-left: 64px !important;
  }

  .desktop-padding-toleft--xxxlarge {
    padding-left: 96px !important;
  }
  .desktop-padding-toright--none {
    padding-right: 0 !important;
  }

  .desktop-padding-toright--xxxsmall {
    padding-right: 4px !important;
  }

  .desktop-padding-toright--xxsmall {
    padding-right: 8px !important;
  }

  .desktop-padding-toright--xsmall {
    padding-right: 12px !important;
  }

  .desktop-padding-toright--small {
    padding-right: 16px !important;
  }

  .desktop-padding-toright {
    padding-right: 24px !important;
  }

  .desktop-padding-toright--large {
    padding-right: 32px !important;
  }

  .desktop-padding-toright--xlarge {
    padding-right: 48px !important;
  }

  .desktop-padding-toright--xxlarge {
    padding-right: 64px !important;
  }

  .desktop-padding-toright--xxxlarge {
    padding-right: 96px !important;
  }
  .desktop-border {
    border: 1px solid #d6d6d6;
  }
  .desktop-border--left {
    border-left: 1px solid #d6d6d6;
  }
  .desktop-border--right {
    border-right: 1px solid #d6d6d6;
  }
  .desktop-border--bottom {
    border-bottom: 1px solid #d6d6d6;
  }
  .desktop-border--top {
    border-top: 1px solid #d6d6d6;
  }
  .desktop-border--without-left {
    border-left: none !important;
  }
  .desktop-border--without-right {
    border-right: none !important;
  }
  .desktop-border--without-bottom {
    border-bottom: none !important;
  }
  .desktop-border--without-top {
    border-top: none !important;
  }
  .desktop-border--without {
    border: none !important;
  }
  .desktop-border-split {
    border-bottom: 2px solid #f5f5f5 !important;
  }

  .desktop-border-split-top {
    border-top: 2px solid #f5f5f5 !important;
  }
  .desktop-rel {
    position: relative !important;
  }
  .desktop-ps {
    position: static !important;
  }
  .desktop-text-size--48 {
    font-size: 48px;
    line-height: 56px;
  }
  .desktop-text-size--32 {
    font-size: 32px;
    line-height: 40px;
  }
  .desktop-text-size--24 {
    font-size: 24px;
    line-height: 32px;
  }
  .desktop-text-size--18 {
    font-size: 18px;
    line-height: 24px;
  }
  .desktop-text-size--16 {
    font-size: 16px;
    line-height: 24px;
  }
  .desktop-text-size--14 {
    font-size: 14px;
    line-height: 20px;
  }
  .desktop-text-size--12 {
    font-size: 12px;
    line-height: 16px;
  }
  .desktop-text-regular {
    font-weight: normal;
  }

  .desktop-text-light {
    font-weight: 300;
  }

  .desktop-text-bold {
    font-weight: bold;
  }
  .desktop-text-normal {
    font-style: normal;
  }

  .desktop-text-italic {
    font-style: italic;
  }
  .collapse__target.desktop-visible {
    display: block !important;
    height: auto !important;
  }
  .col-md {
    -webkit-box-flex: 1;
            flex: 1;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 100%;
    max-width: 100%;
  }
  .col-md-auto {
    -webkit-box-flex: 0;
            flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-stretch {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
  .col-md-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col-md-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col-md-offset-11 {
    margin-left: 91.6666666667%;
  }
  .grid-row-md--multi {
    flex-wrap: wrap;
  }
  .grid-row-md--line {
    flex-wrap: nowrap;
  }
  .grid-row-md--top {
    -webkit-box-align: start;
            align-items: flex-start;
  }
  .grid-row-md--middle {
    -webkit-box-align: center;
            align-items: center;
  }
  .grid-row-md--baseline {
    -webkit-box-align: baseline;
            align-items: baseline;
  }
  .grid-row-md--bottom {
    -webkit-box-align: end;
            align-items: flex-end;
  }
  .grid-row-md--stretch {
    -webkit-box-align: stretch;
            align-items: stretch;
  }
  .grid-row-md--left {
    -webkit-box-pack: start;
            justify-content: flex-start;
  }
  .grid-row-md--center {
    -webkit-box-pack: center;
            justify-content: center;
  }
  .grid-row-md--right {
    -webkit-box-pack: end;
            justify-content: flex-end;
  }
  .grid-row-md--between {
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  .grid-row-md--around {
    justify-content: space-around;
  }
  .dir-md--row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
  .dir-md--row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
            flex-direction: row-reverse;
  }
  .dir-md--column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .dir-md--column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse;
  }
  .col-md--top {
    align-self: flex-start;
  }
  .col-md--middle {
    -ms-grid-row-align: center;
        align-self: center;
  }
  .col-md--baseline {
    align-self: baseline;
  }
  .col-md--bottom {
    align-self: flex-end;
  }
  .col-md--stretch {
    -ms-grid-row-align: stretch;
        align-self: stretch;
  }
  .col-md--first {
    -webkit-box-ordinal-group: 0;
            order: -1;
  }
  .col-md--last {
    -webkit-box-ordinal-group: 2;
            order: 1;
  }
  .col-md--ordered {
    -webkit-box-ordinal-group: 1;
            order: 0;
  }
  .button--location {
    position: static;
    height: 48px;
    width: 100%;
  }
  .button--location .button__label {
    display: inline-block;
  }
  .accordion--without-desktop ~ .accordion__opener {
    padding: 0;
    pointer-events: none;
  }
  .accordion--only-desktop ~ .accordion__opener::after {
    display: block;
  }
  .accordion--without-desktop ~ .accordion__opener::after {
    display: none;
  }
  .accordion__opener:hover {
    color: #767676;
  }
  .accordion--only-desktop ~ .accordion__content {
    overflow: hidden;
    -webkit-animation: accordionClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
            animation: accordionClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
  }
  .accordion--only-desktop:checked ~ .accordion__content {
    overflow: hidden;
    -webkit-animation: accordionOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
            animation: accordionOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
  }
  .accordion--without-desktop ~ .accordion__content {
    -webkit-animation: none;
            animation: none;
    overflow: visible;
  }
  .progress-tracker__item {
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 28px;
  }
  .passed-step .progress-tracker__item {
    font-size: 16px;
    line-height: 24px;
  }
  .progress-tracker__line {
    right: 50%;
  }
  .progress-tracker__line::before {
    left: 24px;
    right: 24px;
  }
  .progress-tracker__line {
    top: 16px;
  }
  .divider-block [class*=col] + .divider-block [class*=col] {
    padding-left: 0;
    padding-right: 0;
  }
  .desktop-divider-block--none {
    padding: 0;
  }
  .desktop-divider-block--small {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .desktop-divider-block--medium {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .desktop-divider-block--large {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .desktop-divider-block--xlarge {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .desktop-divider-block--xxlarge {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .desktop-divider-block--xxxlarge {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .modal-box__overlay {
    -webkit-box-pack: center;
            justify-content: center;
    padding-bottom: 24px;
  }
  .modal-box__content {
    width: 528px;
    display: block;
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
  .modal-box__content--wide {
    width: 1080px;
  }
  .modal-box__content[aria-busy=true] {
    max-height: 350px;
    height: 350px;
  }
  .modal-box__separator {
    margin-left: -48px;
    margin-right: -48px;
  }
  .modal-box--login {
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
  .range-slider__value-md-visible::before {
    display: block;
  }
  .range-slider__value-item-md-visible {
    display: inline-block;
  }
  .datatable__scroll-holder .context-popup__overlay {
    top: inherit;
    right: 8px;
  }
  .datatable__scroll-helper {
    width: 64px;
  }
  .datatable__scroll-helper::before {
    margin-left: 0;
  }
  .datatable__filters {
    max-height: 30em;
    overflow: visible;
  }
  .datatable--filters {
    position: relative;
    -webkit-transform: none;
            transform: none;
    display: block;
    overflow: inherit;
    padding: 0;
    z-index: 5;
  }
  .datatable--filters > .modal-box__content {
    width: 100%;
    overflow: inherit;
    -webkit-transform: none;
            transform: none;
  }
  .datatable--filters > .modal-box__content > .modal-box__body {
    overflow: inherit;
  }
  .multi-filter__overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    display: none;
  }
  .multi-filter__content {
    border-radius: 3px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }
  .carousel--loop .carousel__holder {
    min-height: 0;
  }
  .carousel--mobile .carousel__item {
    position: static;
    visibility: visible;
  }
  .carousel--mobile .carousel__holder {
    min-height: 0;
  }
  .form__datepicker input {
    padding-right: 48px;
  }
  .address-complete__content {
    position: absolute;
    top: 80px;
    min-width: 280px;
    left: 0;
    right: 0;
    border-radius: 3px;
  }
  .address-complete--full .address-complete__content {
    top: 72px;
  }
  .address-complete__large .address-complete__content {
    top: 80px;
  }
  .context-popup__option {
    border: 0;
    background: none;
    height: auto;
    min-width: 0;
    color: #1a1a1a;
    text-align: left;
    padding: 0;
  }
  .context-popup__option:hover {
    background: none;
  }
  html.context-popup--is-open body {
    overflow: inherit;
    position: inherit;
    width: auto;
  }
  .context-popup__overlay {
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    height: auto;
    width: auto;
    background: none;
    padding: 8px 0;
    overflow: inherit;
    -webkit-transform: none;
            transform: none;
    display: none;
    z-index: 1000;
  }
  .context-popup__overlay::before {
    display: none;
  }
  .context-popup--wide .context-popup__overlay {
    left: 0;
  }
  .context-popup__overlay.context-popup--is-open {
    display: block;
  }
  .context-popup__content {
    padding: 0;
    width: auto;
    overflow: hidden;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }
  .context-popup--wide .context-popup__content {
    width: 100%;
  }
  .splash {
    top: 40px;
    width: 90px;
    height: 90px;
  }
  .splash--top-left, .splash--bottom-left {
    left: 16px;
  }
  .splash--top-right, .splash--bottom-right {
    right: 16px;
  }
  .splash--bottom {
    top: auto;
    bottom: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .date__field input {
    padding-right: 48px;
  }
  .date__field input::-webkit-datetime-edit {
    opacity: 0;
  }
  .date__field input::before {
    position: absolute;
    content: attr(data-date);
    display: inline-block;
    color: black;
  }
  .header__icons {
    min-height: 72px;
  }
  .header__search__result {
    top: 72px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .header__menu-dropdown {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    bottom: -16px;
  }
  .header__menu-item--parent {
    position: relative;
  }
  .header__logo {
    height: 48px;
    width: 56px;
  }
  .header__login::before {
    display: none;
  }
  .header__login::after {
    display: block;
  }
  .header__login-popup {
    max-width: 336px;
    -webkit-transform: translate(0, 8px);
            transform: translate(0, 8px);
  }
  .header__login-popup--wide {
    width: 336px;
  }
  .header__login-popup--wide .context-popup__content {
    max-height: 724px;
    overflow-y: auto;
  }
  .header__bar {
    top: 0;
    right: auto;
    width: 144px;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    line-height: 24px;
  }
  .terminal-block {
    min-height: 440px;
  }
  .terminal-block--cover-mood {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    min-height: 0;
  }
  .terminal-block--cover-mood--small, .terminal-block--cover-mood--medium, .terminal-block--cover-mood--large {
    margin-bottom: -32px;
  }
  .terminal-block--cover-mood--small .image-holder {
    height: 270px;
  }
  .terminal-block--cover-mood--small {
    height: 270px;
  }
  .terminal-block--cover-mood--medium .image-holder {
    height: 360px;
  }
  .terminal-block--cover-mood--medium {
    height: 360px;
  }
  .terminal-block--cover-mood--large .image-holder {
    height: 480px;
  }
  .terminal-block--cover-mood--large {
    height: 480px;
  }
  .terminal-block--cover-mood .cover-holder {
    height: 270px;
    min-height: 270px;
    background-size: auto 100% !important;
    background-position: 50% 100% !important;
  }
  .terminal-block--banner__header {
    height: 216px;
  }
  .content-block--promo {
    min-height: 396px;
  }
  .content-block__image-holder {
    height: 460px;
  }
  .content-block__image-holder--large {
    height: 224px;
  }
  .content-block__image-holder img {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
  }
  .usp-block__icon-holder, .usp-block__image {
    height: 80px;
    width: 80px;
    margin: 0 0 16px;
  }
  .usp-block__brand-image-holder {
    width: 96px;
    height: 96px;
  }
  .banner-block__description {
    position: absolute;
    bottom: 0;
  }
  .banner-block__description--left {
    left: 0;
  }
  .banner-block__description--right {
    right: 0;
  }
  .banner-block__description--middle {
    bottom: auto;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
  .cover-block {
    overflow: visible;
    height: 480px;
  }
  .cover-block--has-image {
    height: auto;
  }
  .cover-block--has-image .badge {
    position: static;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    margin-bottom: 16px;
  }
  .cover-block__description {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 364px;
    width: 100%;
    z-index: 2;
  }
  .cover-block__text {
    background-color: transparent;
  }
  .product-block__image-holder {
    height: 200px;
  }
  .product-block__image-holder--medium {
    height: 240px;
  }
  .product-block__full-image {
    height: 280px;
  }
  .product-block__visual {
    min-height: 364px;
  }
  .product-block__text {
    min-height: 112px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .product-block .badge {
    font-size: 14px;
    line-height: 20px;
  }
  .product-block--large .splash--top-left,
.product-block--large .splash--bottom-left {
    top: 128px;
  }
  .product-block--large .product-block__image-holder {
    height: 380px;
  }
  .product-block--addition .product-block__video {
    min-height: auto;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  .digital-hub-block__number-holder {
    position: absolute;
    right: 0;
    top: 0;
  }
  .digital-hub-block__image-holder img {
    margin: 0;
  }
  .visual-block__picture {
    height: 216px;
  }
  .visual-block__picture--xxxlarge {
    height: 500px;
  }
  .visual-block__picture--xxlarge {
    height: 100%;
  }
  .visual-block__picture--xlarge {
    height: 500px;
  }
  .visual-block__picture--large {
    height: 408px;
  }
  .visual-block__picture--medium {
    height: 312px;
  }
  .visual-block__picture--desktop-auto {
    height: auto;
  }
  .visual-block__img {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
  }
  .visual-block__picture .visual-block__img {
    position: static;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    min-height: auto;
  }
  .visual-block .desktop-margin-trailer--large-ng {
    margin-bottom: -32px !important;
  }
  .visual-block__border-radius {
    border-radius: 24px 0;
  }
  .visual-block__video {
    height: auto;
    min-height: auto;
    width: 100%;
    min-width: 100%;
  }
  .visual-block__video--narrow {
    min-width: auto;
    max-width: 1344px;
    margin-left: auto;
    margin-right: auto;
  }
  .subscription {
    width: 20%;
  }
  .subscription-border .selling-points::after {
    content: "";
  }
  .subscription__margin-bottom {
    margin-bottom: -48px;
  }
  .map-grid__list {
    padding: 0;
  }
  .login-content.modal-box__content {
    -webkit-transform: none;
            transform: none;
  }
  .login-content__logo {
    height: 48px;
  }
  .login-content__close-btn.button {
    right: 48px;
  }
  .basket__remove-button {
    position: absolute;
    top: 0;
    right: 0;
  }
  .config__action {
    min-height: 96px;
  }
  .summary--sticky {
    position: sticky;
    top: 24px;
    z-index: 1;
  }
  .switch-damage__icon {
    bottom: 24px;
    left: 24px;
  }
  .switch-damage__image {
    height: 480px;
  }
  .search-popup {
    z-index: 1000;
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
  }
  .filter__opener::after {
    font-size: 16px !important;
    content: "󱁘";
  }
  .filter__opener:hover {
    color: #767676;
  }
  .filter__header:checked ~ .filter__opener {
    margin-bottom: 8px;
  }
  .filter__header:checked ~ .filter__content {
    min-height: auto;
    -webkit-transition: max-height 0.25s ease-in;
    transition: max-height 0.25s ease-in;
  }
  .filter__content {
    max-height: 0;
    position: static;
    min-height: auto;
    -webkit-transition: max-height 0.15s ease-out;
    transition: max-height 0.15s ease-out;
  }
  .filter-colors-list:checked ~ label .filter-colors-list__label {
    -webkit-box-shadow: 0 0 0 2px #007ad0;
            box-shadow: 0 0 0 2px #007ad0;
  }
  .filter-colors-list__label {
    width: 48px;
    height: 48px;
    border: 12px solid #fff;
  }
  .filter-colors-list:checked ~ label .filter-colors-list__query-name {
    background: none;
    font-weight: normal;
  }
  .device-visual {
    margin: 0;
  }
  .device-visual__holder {
    position: sticky;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    top: 0;
  }
  .device-visual .carousel__prev, .device-visual .carousel__next {
    visibility: visible;
  }
  .device-visual .carousel__holder {
    min-height: 484px;
  }
  .device-visual .carousel__img {
    max-height: 484px;
  }
  .device-visual .badge {
    margin-bottom: 12px;
    position: relative;
    bottom: auto;
    top: 0;
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
  }
  .device-visual .splash {
    left: 64px;
    top: 96px;
  }
  .device-visual .splash--switch {
    top: 0;
    left: auto;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    margin-right: -64px;
  }
  .order-summary {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 8fr 4fr;
    grid-template-columns: 8fr 4fr;
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
  }
  .order-summary__content {
    padding-right: 12px;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-column: 1;
        grid-column-start: 1;
  }
  .order-summary__aside {
    padding-left: 12px;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
  }
  .order-summary__form {
    padding-right: 12px;
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-column: 1;
        grid-column-start: 1;
  }
  .fixed__image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
  }
  .fixed__aside {
    -ms-grid-row-align: end;
        align-self: end;
  }
  .fixed__content {
    -ms-grid-column: 2;
    grid-column: 2;
  }
  .product-tooltip {
    top: 12px;
    right: 12px;
  }
  .device-visual .product-tooltip {
    top: 32px;
  }
  .search-accounts .context-popup__overlay {
    top: -32px;
    left: -24px;
    right: -24px;
  }
  .bills .sticky {
    position: static;
  }
  .payment-method {
    padding: 48px 48px 24px 48px;
  }
  .payment-method:first-child {
    padding-top: 0;
  }
  .inline-edit__edit-mode {
    max-width: 280px;
  }
  .attachments__file {
    padding: 8px 0;
  }
  .attachments--selected.error::after {
    position: absolute;
  }
  .attachments__icon {
    padding: 12px 8px 12px 0;
  }
  .data-collection .columns {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-rule: #d6d6d6 1px solid;
       -moz-column-rule: #d6d6d6 1px solid;
            column-rule: #d6d6d6 1px solid;
    grid-column-gap: 48px;
    -webkit-column-gap: 48px;
       -moz-column-gap: 48px;
            column-gap: 48px;
  }
  .data-collection .search__popup {
    width: 100%;
    left: 0;
    right: 0;
    padding: 0 12px;
  }
  .message__inner.fmc .fmc--icon {
    width: 84px;
    height: 40px;
  }
  .fmc-icon {
    width: 84px;
    height: 40px;
  }
  .fmc-animation .digit {
    font-size: 32px;
    line-height: 38px;
    height: 38px;
  }
  .fmc-animation .time-part {
    width: 32px;
    height: 34px;
  }
  .desktop-light-border--top {
    border-top: 1px solid rgba(12, 16, 38, 0.1);
  }
  .desktop-light-border--bottom {
    border-bottom: 1px solid rgba(12, 16, 38, 0.1);
  }
  .country-columns {
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
  }
  .sidemenu__content {
    max-height: 100%;
    overflow: visible;
  }
  .stores {
    height: 900px;
  }
  .stores__info {
    z-index: 1;
    position: absolute;
    top: 48px;
    bottom: 48px;
    left: 48px;
    width: 344px;
    overflow-y: auto;
  }
  .coverage-map__settings-wrapper--opened {
    left: auto;
  }
  .streamer {
    min-height: 48px;
  }
  .article__image-holder {
    height: 280px;
    max-height: 280px;
  }
  .slider {
    margin-right: auto;
  }
  .slider .carousel__item {
    min-width: 260px;
    max-width: 260px;
  }
}
@media (min-width: 1072px) {
  .container {
    max-width: 1344px;
    width: calc(100% - 2 * 48px);
  }
}
@media (min-width: 1440px) {
  .col-lg {
    -webkit-box-flex: 1;
            flex: 1;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 1;
            flex: auto;
    width: 100%;
    max-width: 100%;
  }
  .col-lg-auto {
    -webkit-box-flex: 0;
            flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-stretch {
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
  .col-lg-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col-lg-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col-lg-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col-lg-offset-11 {
    margin-left: 91.6666666667%;
  }
  .grid-row-lg--multi {
    flex-wrap: wrap;
  }
  .grid-row-lg--line {
    flex-wrap: nowrap;
  }
  .grid-row-lg--top {
    -webkit-box-align: start;
            align-items: flex-start;
  }
  .grid-row-lg--middle {
    -webkit-box-align: center;
            align-items: center;
  }
  .grid-row-lg--baseline {
    -webkit-box-align: baseline;
            align-items: baseline;
  }
  .grid-row-lg--bottom {
    -webkit-box-align: end;
            align-items: flex-end;
  }
  .grid-row-lg--stretch {
    -webkit-box-align: stretch;
            align-items: stretch;
  }
  .grid-row-lg--left {
    -webkit-box-pack: start;
            justify-content: flex-start;
  }
  .grid-row-lg--center {
    -webkit-box-pack: center;
            justify-content: center;
  }
  .grid-row-lg--right {
    -webkit-box-pack: end;
            justify-content: flex-end;
  }
  .grid-row-lg--between {
    -webkit-box-pack: justify;
            justify-content: space-between;
  }
  .grid-row-lg--around {
    justify-content: space-around;
  }
  .dir-lg--row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
  .dir-lg--row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
            flex-direction: row-reverse;
  }
  .dir-lg--column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .dir-lg--column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse;
  }
  .col-lg--top {
    align-self: flex-start;
  }
  .col-lg--middle {
    -ms-grid-row-align: center;
        align-self: center;
  }
  .col-lg--baseline {
    align-self: baseline;
  }
  .col-lg--bottom {
    align-self: flex-end;
  }
  .col-lg--stretch {
    -ms-grid-row-align: stretch;
        align-self: stretch;
  }
  .col-lg--first {
    -webkit-box-ordinal-group: 0;
            order: -1;
  }
  .col-lg--last {
    -webkit-box-ordinal-group: 2;
            order: 1;
  }
  .col-lg--ordered {
    -webkit-box-ordinal-group: 1;
            order: 0;
  }
}