/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./Build/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./Build/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./Build/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./Core/ui.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
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. --xxxsmall        (4px)
			3. --xxsmall         (8px)
			4. --xsmall          (12px)
			5. --small           (16px)
			6. --base            (24px)
			7. --large           (32px)
			8. --xlarge          (48px)
			9. --xxlarge         (64px)
			10.--huge            (96px)

	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 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. "display--flex"  		(display: flex)
			5. "rel"                    (position: relative)
			6. "ovh"                    (overflow: hidden)
			7. "ps"                     (position: static)
			8. "full-height"            (height: 100%)
			9. "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

*/
@font-face {
  font-family: "telenor";
  src: url(../fonts/telenor.woff2) format("woff2"), url(../fonts/telenor.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "telenor";
  src: url(../fonts/telenor-bold.woff2) format("woff2"), url(../fonts/telenor-bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "telenor";
  src: url(../fonts/telenor-italic.woff2) format("woff2"), url(../fonts/telenor-italic.woff) format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "telenor";
  src: url(../fonts/telenor-bolditalic.woff2) format("woff2"), url(../fonts/telenor-bolditalic.woff) format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "telenor";
  src: url(../fonts/telenorlight.woff2) format("woff2"), url(../fonts/telenorlight.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "telenor";
  src: url(../fonts/telenorlight-italic.woff2) format("woff2"), url(../fonts/telenorlight-italic.woff) format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(../fonts/sourcesansproitalic.woff2) format("woff2"), url(../fonts/sourcesansproitalic.woff) format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(../fonts/sourcesansproregular.woff2) format("woff2"), url(../fonts/sourcesansproregular.woff) format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(../fonts/sourcesansprobold.woff2) format("woff2"), url(../fonts/sourcesansprobold.woff) format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: "TelenorEvolutionUI";
  src: url(../fonts/TelenorEvolutionUI-Normal.woff2) format("woff2"), url(../fonts/TelenorEvolutionUI-Normal.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TelenorEvolutionUI";
  src: url(../fonts/TelenorEvolutionUI-Medium.woff2) format("woff2"), url(../fonts/TelenorEvolutionUI-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TelenorEvolutionUI";
  src: url(../fonts/TelenorEvolutionUI-Light.woff2) format("woff2"), url(../fonts/TelenorEvolutionUI-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TelenorEvolutionUI";
  src: url(../fonts/TelenorEvolutionUI-Bold.woff2) format("woff2"), url(../fonts/TelenorEvolutionUI-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TelenorEvolutionUI";
  src: url(../fonts/TelenorEvolutionUI-ExtraBoldSlanted.woff2) format("woff2"), url(../fonts/TelenorEvolutionUI-ExtraBoldSlanted.woff) format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
[class^=icon-]::before,
[class*=" icon-"]::before,
.new-icon[class*=" icon-"]::before, .help-category__header:after, .help-category .accordion ~ .help-category__header:after, .help-category .accordion:checked ~ .help-category__header:after, .sidemenu__opener:after, .data-collection .opener::after, .addon__collapse-icon, .link-block::after, .search-accounts__opener::before, .ex-ef-widget__opener::after, .addons__button[disabled] .button__label::before, .anchor__toggler::after, .filter__opener::after, .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 {
  font-family: "framework-icons-new" !important;
  display: block;
  font-weight: normal;
  font-style: 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;
}

@font-face {
  font-family: "framework-icons-new";
  src: url(../fonts/framework-icons-newaae70df83b9e7f3fd127.woff2) format("woff2"), url(../fonts/framework-icons-newc27707ed87b31242022f.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* Bootstrap Overrides */
.icon-analysis.icon--large::before {
  font-size: 32px !important;
  content: "\f1002";
}

.icon-analysis.icon--medium::before {
  font-size: 24px !important;
  content: "\f1001";
}

.icon-answer.icon--small::before {
  font-size: 16px !important;
  content: "\f10ca";
}

.icon-arrow-down.icon--small::before {
  font-size: 16px !important;
  content: "\f1003";
}

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

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

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

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

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

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

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

.icon-bell.icon--large::before {
  font-size: 32px !important;
  content: "\f100c";
}

.icon-bell.icon--medium::before {
  font-size: 24px !important;
  content: "\f100b";
}

.icon-breach.icon--medium::before {
  font-size: 24px !important;
  content: "\f100d";
}

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

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

.icon-buy-back.icon--large::before {
  font-size: 32px !important;
  content: "\f1011";
}

.icon-buy-back.icon--medium::before {
  font-size: 24px !important;
  content: "\f1010";
}

.icon-cables.icon--large::before {
  font-size: 32px !important;
  content: "\f1013";
}

.icon-cables.icon--medium::before {
  font-size: 24px !important;
  content: "\f1012";
}

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

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

.icon-calendar.icon--small::before {
  font-size: 16px !important;
  content: "\f1014";
}

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

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

.icon-chat.icon--large::before {
  font-size: 32px !important;
  content: "\f10cd";
}

.icon-chat.icon--medium::before {
  font-size: 24px !important;
  content: "\f10ce";
}

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

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

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

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

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

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

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

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

.icon-close.icon--large::before {
  font-size: 32px !important;
  content: "\f1023";
}

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

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

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

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

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

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

.icon-computer.icon--large::before {
  font-size: 32px !important;
  content: "\f1028";
}

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

.icon-coverage.icon--medium::before {
  font-size: 24px !important;
  content: "\f1029";
}

.icon-credit-card.icon--small::before {
  font-size: 16px !important;
  content: "\f102b";
}

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

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

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

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

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

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

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

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

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

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

.icon-document.icon--small::before {
  font-size: 16px !important;
  content: "\f1034";
}

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

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

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

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

.icon-drag-handle.icon--small::before {
  font-size: 16px !important;
  content: "\f103a";
}

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

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

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

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

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

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

.icon-folder.icon--large::before {
  font-size: 32px !important;
  content: "\f1042";
}

.icon-folder.icon--medium::before {
  font-size: 24px !important;
  content: "\f1041";
}

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

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

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

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

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

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

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

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

.icon-hoard.icon--medium::before {
  font-size: 24px !important;
  content: "\f104b";
}

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

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

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

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

.icon-iot.icon--large::before {
  font-size: 32px !important;
  content: "\f1050";
}

.icon-kebab.icon--small::before {
  font-size: 16px !important;
  content: "\f1051";
}

.icon-key.icon--medium::before {
  font-size: 24px !important;
  content: "\f10c9";
}

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

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

.icon-legal.icon--large::before {
  font-size: 32px !important;
  content: "\f1055";
}

.icon-legal.icon--medium::before {
  font-size: 24px !important;
  content: "\f1054";
}

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

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

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

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

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

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

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

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

.icon-mail.icon--small::before {
  font-size: 16px !important;
  content: "\f105c";
}

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

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

.icon-menu.icon--large::before {
  font-size: 32px !important;
  content: "\f1062";
}

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

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

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

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

.icon-more.icon--small::before {
  font-size: 16px !important;
  content: "\f1064";
}

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

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

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

.icon-net-sikker.icon--medium::before {
  font-size: 24px !important;
  content: "\f106b";
}

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

.icon-net-sikker-plus.icon--medium::before {
  font-size: 24px !important;
  content: "\f1069";
}

.icon-news.icon--large::before {
  font-size: 32px !important;
  content: "\f10cf";
}

.icon-news.icon--medium::before {
  font-size: 24px !important;
  content: "\f10d0";
}

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

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

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

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

.icon-pencil.icon--small::before {
  font-size: 16px !important;
  content: "\f106f";
}

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

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

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

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

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

.icon-pin.icon--large::before {
  font-size: 32px !important;
  content: "\f1077";
}

.icon-plus.icon--large::before {
  font-size: 32px !important;
  content: "\f1079";
}

.icon-plus.icon--medium::before {
  font-size: 24px !important;
  content: "\f10c8";
}

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

.icon-poa.icon--large::before {
  font-size: 32px !important;
  content: "\f107b";
}

.icon-poa.icon--medium::before {
  font-size: 24px !important;
  content: "\f107a";
}

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

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

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

.icon-question.icon--small::before {
  font-size: 16px !important;
  content: "\f10cb";
}

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

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

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

.icon-renmobile.icon--medium::before {
  font-size: 24px !important;
  content: "\f1081";
}

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

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

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

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

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

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

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

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

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

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

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

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

.icon-sikker-surf.icon--large::before {
  font-size: 32px !important;
  content: "\f1090";
}

.icon-sikker-surf.icon--medium::before {
  font-size: 24px !important;
  content: "\f108f";
}

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

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

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

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

.icon-speedtest.icon--large::before {
  font-size: 32px !important;
  content: "\f1095";
}

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

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

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

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

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

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

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

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

.icon-technology-coax.icon--medium::before {
  font-size: 24px !important;
  content: "\f10c3";
}

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

.icon-technology-dsl.icon--medium::before {
  font-size: 24px !important;
  content: "\f10c4";
}

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

.icon-technology-fiber.icon--medium::before {
  font-size: 24px !important;
  content: "\f10c5";
}

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

.icon-technology-mbb.icon--medium::before {
  font-size: 24px !important;
  content: "\f10c6";
}

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

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

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

.icon-time.icon--large::before {
  font-size: 32px !important;
  content: "\f10a6";
}

.icon-time.icon--medium::before {
  font-size: 24px !important;
  content: "\f10a5";
}

.icon-time.icon--small::before {
  font-size: 16px !important;
  content: "\f10a4";
}

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

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

.icon-trash.icon--large::before {
  font-size: 32px !important;
  content: "\f10aa";
}

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

.icon-trash.icon--small::before {
  font-size: 16px !important;
  content: "\f10c2";
}

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

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

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

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

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

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

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

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

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

.icon-voip.icon--large::before {
  font-size: 32px !important;
  content: "\f10b4";
}

.icon-voip.icon--medium::before {
  font-size: 24px !important;
  content: "\f10c7";
}

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

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

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

.icon-warning.icon--large::before {
  font-size: 32px !important;
  content: "\f10b9";
}

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

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

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

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

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

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

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

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

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

*,
*::before,
*::after {
  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;
}
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 {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

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

p {
  margin: 0;
}

abbr[title] {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-line: underline;
  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;
  -webkit-text-decoration: none;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  -webkit-text-decoration: none;
  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: hsl(225, 12%, 77%);
  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] {
  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;
}

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

.search-accounts__opener::before, .tooltip--installment, .header__search__toggler, .header__search .form__search .form__search-clear, .header__login::after, .form__datepicker-clear, .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, .button .icon--right::before,
.button .icon--left::before, .badge--dot {
  top: 50%;
  transform: translate(0, -50%);
}

.top-line::before, .top-line--with-border::before {
  content: "";
  z-index: 11;
  display: block;
  position: relative;
  margin-bottom: -1px;
  background-color: hsl(226, 11%, 45%);
  height: 3px;
}

.ex-ef-widget, .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;
}

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

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

body {
  font: 16px/24px TelenorEvolutionUI, Arial, Helvetica, sans-serif;
  background: hsl(0, 0%, 100%);
  color: #000f3c;
  height: 100%;
  margin: 0;
  min-width: 320px;
}
body .absolute-page {
  position: absolute;
  width: 100%;
}

dialog {
  color: #000f3c;
}

[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.modal-box--is-open {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

a {
  color: #2028cd;
  outline: none;
  -webkit-text-decoration: none;
  text-decoration: none;
}
a:hover {
  -webkit-text-decoration: underline;
  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: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.section--wrap {
  flex: 1 0 auto;
  width: 100%;
}

:root {
  --color-white: hsl(0, 0%, 100%);
  --color-paper-white: hsl(240, 20%, 96%);
  --grays-light-gray: hsl(225, 12%, 77%);
  --grays-dark-gray: hsl(226, 11%, 45%);
  --color-black: hsl(225, 25%, 10%);
  --primary-mid-blue: #2028cd;
  --primary-dark-blue: #000f3c;
  --information-colors-stone: #e8ded3;
  --information-colors-muted-green: #a5cdb9;
  --information-colors-lemon: #faed3c;
  --information-colors-hot-pink: #ff4173;
}

.color-white {
  color: hsl(0, 0%, 100%);
}

.color-paper-white {
  color: hsl(240, 20%, 96%);
}

.color-light-gray {
  color: hsl(225, 12%, 77%);
}

.color-dark-gray {
  color: hsl(226, 11%, 45%);
}

.color-black {
  color: hsl(225, 25%, 10%);
}

.color-gray-10 {
  color: hsl(225, 25%, 10%);
}

.color-gray-20 {
  color: hsl(225, 25%, 16%);
}

.color-gray-30 {
  color: hsl(225, 18%, 26%);
}

.color-gray-40 {
  color: hsl(225, 14%, 35%);
}

.color-gray-50 {
  color: hsl(226, 11%, 45%);
}

.color-gray-60 {
  color: hsl(225, 10%, 56%);
}

.color-gray-70 {
  color: hsl(225, 10%, 66%);
}

.color-gray-80 {
  color: hsl(225, 12%, 77%);
}

.color-gray-90 {
  color: hsl(225, 18%, 88%);
}

.color-gray-95 {
  color: hsl(240, 20%, 96%);
}

.color-gray-99 {
  color: hsl(240, 33%, 98%);
}

.color-pure-black {
  color: hsl(0, 0%, 0%);
}

.color-telenor-dark-blue {
  color: #000f3c;
}

.color-telenor-mid-blue {
  color: #2028cd;
}

.color-telenor-blue {
  color: #00c8ff;
}

.color-telenor-light-blue {
  color: #b4ffff;
}

.color-telenor-off-white {
  color: #e8fdff;
}

.color-lemon {
  color: #faed3c;
}

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

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

.color-stone {
  color: #e8ded3;
}

.color-pale-blue {
  color: #e6eef4;
}

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

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

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

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

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

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

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

.color-inherit {
  color: inherit !important;
}

.background-white {
  background-color: hsl(0, 0%, 100%);
}

.background-paper-white {
  background-color: hsl(240, 20%, 96%);
}

.background-light-gray {
  background-color: hsl(225, 12%, 77%);
}

.background-dark-gray {
  background-color: hsl(226, 11%, 45%);
}

.background-black {
  background-color: hsl(225, 25%, 10%);
}

.background-gray-10 {
  background-color: hsl(225, 25%, 10%);
}

.background-gray-20 {
  background-color: hsl(225, 25%, 16%);
}

.background-gray-30 {
  background-color: hsl(225, 18%, 26%);
}

.background-gray-40 {
  background-color: hsl(225, 14%, 35%);
}

.background-gray-50 {
  background-color: hsl(226, 11%, 45%);
}

.background-gray-60 {
  background-color: hsl(225, 10%, 56%);
}

.background-gray-70 {
  background-color: hsl(225, 10%, 66%);
}

.background-gray-80 {
  background-color: hsl(225, 12%, 77%);
}

.background-gray-90 {
  background-color: hsl(225, 18%, 88%);
}

.background-gray-95 {
  background-color: hsl(240, 20%, 96%);
}

.background-gray-99 {
  background-color: hsl(240, 33%, 98%);
}

.background-pure-black {
  background-color: hsl(0, 0%, 0%);
}

.background-telenor-dark-blue {
  background-color: #000f3c;
}

.background-telenor-mid-blue {
  background-color: #2028cd;
}

.background-telenor-blue {
  background-color: #00c8ff;
}

.background-telenor-light-blue {
  background-color: #b4ffff;
}

.background-telenor-off-white {
  background-color: #e8fdff;
}

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

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

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

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

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

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

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

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

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

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

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

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

.background-inherit {
  background-color: inherit !important;
}

.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: 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 hsl(225, 12%, 77%);
}
.border--left {
  border-left: 1px solid hsl(225, 12%, 77%);
}
.border--right {
  border-right: 1px solid hsl(225, 12%, 77%);
}
.border--bottom {
  border-bottom: 1px solid hsl(225, 12%, 77%);
}
.border--top {
  border-top: 1px solid hsl(225, 12%, 77%);
}
.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: hsl(240, 20%, 96%) !important;
}
.border-radius {
  border-radius: 3px;
}

.border-white {
  border: 1px solid hsl(0, 0%, 100%);
}

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

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

.border-split {
  border-bottom: 2px solid hsl(240, 20%, 96%);
}

.border-split-top {
  border-top: 2px solid hsl(240, 20%, 96%);
}
.rel {
  position: relative !important;
}
.ps {
  position: static !important;
}
.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

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

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

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

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

.gray-hover:hover {
  color: hsl(226, 11%, 45%);
}

.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%;
}

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

.nowrap {
  white-space: nowrap;
}

.word-break {
  word-break: break-word;
}

.fit-image {
  display: flex;
  align-items: 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;
  }
}
.icon__parent {
  line-height: 1;
}
.icon--invert::before {
  transform: rotate(180deg);
}
.icon--in-disk {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon--in-disk.icon--in-disk-large {
  width: 64px;
  height: 64px;
}
.icon--inline::before {
  display: inline !important;
  position: relative !important;
}

.text-size--48 {
  font-size: 48px;
  line-height: 56px;
}
.text-size--40 {
  font-size: 40px;
  line-height: 48px;
}
.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: "TelenorEvolutionUI", 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;
}

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

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

.text-medium {
  font-weight: 500;
}

.text-bold {
  font-weight: 700;
}

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

.text-italic {
  font-style: italic;
}
.grid-container {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.grid-row--gutter-xxsmall, .grid-row--gutter-small, .grid-row--gutter-none, .grid-row {
  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 {
  flex: 1;
  width: auto;
  max-width: 100%;
}
.col-xs-1,
.col-1 {
  flex: auto;
  width: 8.3333333333%;
  max-width: 8.3333333333%;
}
.col-xs-2,
.col-2 {
  flex: auto;
  width: 16.6666666667%;
  max-width: 16.6666666667%;
}
.col-xs-3,
.col-3 {
  flex: auto;
  width: 25%;
  max-width: 25%;
}
.col-xs-4,
.col-4 {
  flex: auto;
  width: 33.3333333333%;
  max-width: 33.3333333333%;
}
.col-xs-5,
.col-5 {
  flex: auto;
  width: 41.6666666667%;
  max-width: 41.6666666667%;
}
.col-xs-6,
.col-6 {
  flex: auto;
  width: 50%;
  max-width: 50%;
}
.col-xs-7,
.col-7 {
  flex: auto;
  width: 58.3333333333%;
  max-width: 58.3333333333%;
}
.col-xs-8,
.col-8 {
  flex: auto;
  width: 66.6666666667%;
  max-width: 66.6666666667%;
}
.col-xs-9,
.col-9 {
  flex: auto;
  width: 75%;
  max-width: 75%;
}
.col-xs-10,
.col-10 {
  flex: auto;
  width: 83.3333333333%;
  max-width: 83.3333333333%;
}
.col-xs-11,
.col-11 {
  flex: auto;
  width: 91.6666666667%;
  max-width: 91.6666666667%;
}
.col-xs-12,
.col-12 {
  flex: auto;
  width: 100%;
  max-width: 100%;
}
.col-xs-auto,
.col-auto {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}
.col-xs-stretch,
.col-stretch {
  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 {
  align-items: flex-start;
}
.grid-row-xs--middle,
.grid-row--middle {
  align-items: center;
}
.grid-row-xs--baseline,
.grid-row--baseline {
  align-items: baseline;
}
.grid-row-xs--bottom,
.grid-row--bottom {
  align-items: flex-end;
}
.grid-row-xs--stretch,
.grid-row--stretch {
  align-items: stretch;
}
.grid-row-xs--left,
.grid-row--left {
  justify-content: flex-start;
}
.grid-row-xs--center,
.grid-row--center {
  justify-content: center;
}
.grid-row-xs--right,
.grid-row--right {
  justify-content: flex-end;
}
.grid-row-xs--between,
.grid-row--between {
  justify-content: space-between;
}
.grid-row-xs--around,
.grid-row--around {
  justify-content: space-around;
}
[class*=dir-] {
  display: flex;
}

.dir-xs--row,
.dir--row {
  flex-direction: row;
}
.dir-xs--row-reverse,
.dir--row-reverse {
  flex-direction: row-reverse;
}
.dir-xs--column,
.dir--column {
  flex-direction: column;
}
.dir-xs--column-reverse,
.dir--column-reverse {
  flex-direction: column-reverse;
}
.col-xs--top,
.col--top {
  align-self: flex-start;
}
.col-xs--middle,
.col--middle {
  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 {
  align-self: stretch;
}
.col-xs--first,
.col--first {
  order: -1;
}
.col-xs--last,
.col--last {
  order: 1;
}
.col-xs--ordered,
.col--ordered {
  order: 0;
}
.card-shadow {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.collapse--closed {
  height: 0;
}
.collapse__target {
  position: relative;
}
.collapse__target.collapsing {
  overflow: hidden;
  transition: height 1s ease;
}
.collapse__opener {
  cursor: pointer;
}
.collapse__opener:hover {
  color: hsl(226, 11%, 45%);
}
.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;
}

.color-telenor-link {
  color: #007ad0;
}
.color-telenor-black {
  color: #0c1026;
}
.color-campaign-blue {
  color: #daf2ff;
}
.color-blue {
  color: #a3deff;
}
.color-green {
  color: #b0f0b2;
}
.color-red {
  color: #ffb4b4;
}
.color-telenor-blue-up {
  color: #00c8ff;
}

.background-blue {
  background-color: #a3deff;
}
.background-green {
  background-color: #b0f0b2;
}
.background-red {
  background-color: #ffb4b4;
}

/**
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
  - name: Block with border and badge
	tmpl:
		include: ../badge/[docs]/border-and-badge-block.html
*/
.badge {
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  line-height: 32px;
  border-radius: 24px;
  white-space: nowrap;
}
.badge--top {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}
.badge--bottom {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}
.badge--dot {
  padding: 8px;
  border-radius: 50%;
  position: absolute;
  left: 0;
}
.badge--dot.badge--small {
  padding: 4px;
}
.badge--border {
  border-width: 2px;
  border-style: solid;
}

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

.badge--blue {
  background-color: #00c8ff;
}

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

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

.badge--light-gray {
  background-color: hsl(225, 12%, 77%);
}

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

.badge--black {
  background-color: #000f3c;
}

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

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

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

.badge--white {
  background-color: hsl(0, 0%, 100%);
}

.badge--telenor-blue {
  background-color: #00c8ff;
}

.border-color-badge--lemon {
  border-color: #faed3c;
}

.border-color-badge--blue {
  border-color: #00c8ff;
}

.border-color-badge--muted-green {
  border-color: #a5cdb9;
}

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

.border-color-badge--light-gray {
  border-color: hsl(225, 12%, 77%);
}

.border-color-badge--hot-pink {
  border-color: #ff4173;
}

.border-color-badge--black {
  border-color: #000f3c;
}

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

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

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

.border-color-badge--white {
  border-color: hsl(0, 0%, 100%);
}

.border-color-badge--telenor-blue {
  border-color: #00c8ff;
}

/**
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
	--small: Makes height of a button less
	--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: Show more
	dotNet:
		- '@Html.RenderButton(new ButtonOptions("Show more", ButtonStyle.naked | ButtonStyle.link) { DefaultButtonClasses = "icon--left icon-arrow-down icon--small icon--filled" });'
		- '@Html.RenderLink(new LinkOptions("Show more", ButtonStyle.naked | ButtonStyle.link, "telenor.dk") { DefaultButtonClasses = "icon--left icon-arrow-down icon--small icon--filled" });'
		- '@Html.RenderButton(new ButtonOptions("Show more", ButtonStyle.naked | ButtonStyle.link) { DefaultButtonClasses = "icon--left icon-arrow-down icon--small icon--filled", Disabled = true });'
	tmpl: >
		<button class="button button--naked button--link">
			<span class="grid-row grid-row--middle grid-row--gutter-none">
				<span class="icon--left icon-arrow-down icon--small icon--filled"></span>
				<span class="button__label">Læs mere</span>
			</span>
		</button>

		<button class="button button--naked button--link" disabled>
			<span class="grid-row grid-row--middle grid-row--gutter-none">
				<span class="icon--left icon-arrow-down icon--small icon--filled"></span>
				<span class="button__label">Læs mere</span>
			</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-arrow-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.RenderButton(new ButtonOptions("", ButtonStyle.action) {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>
		<button class="button button--action 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>
  - name: Small icon button (Can be used only in themed blocks)
	dotNet:
		- '@Html.RenderButton(new ButtonOptions(string.Empty, ButtonStyle.action){Tag = "span", Classes = "button--icon", DefaultButtonClasses = "icon--right icon--small icon-arrow-right"};'
		- '@Html.RenderButton(new ButtonOptions(string.Empty, ButtonStyle.action){Tag = "span", Classes = "button--icon", DefaultButtonClasses = "icon--right icon--small icon-arrow-down"};'
		- '@Html.RenderButton(new ButtonOptions(string.Empty, ButtonStyle.action){Tag = "span", Classes = "button--icon", DefaultButtonClasses = "icon--right icon--small icon-arrow-up"};'
	tmpl: >
		<div class="color-theme color-theme--white">
			<span class="button button--action button--icon">
				<span class="button__label icon--right icon--small icon-arrow-right"></span>
			</span>
			<span class="button button--action button--icon">
				<span class="button__label icon--right icon--small icon-arrow-down"></span>
			</span>
			<span class="button button--action button--icon">
				<span class="button__label icon--right icon--small icon-arrow-up"></span>
			</span>
		</div>
  - name: Small blue button with right arrow
	dotNet:
		- '@Html.RenderButton(new NextButtonOptions("Small blue button", ButtonStyle.action | ButtonStyle.small ));'
		- '@Html.RenderButton(new NextButtonOptions("Small blue button", ButtonStyle.action | ButtonStyle.small ){
				Disabled = true
			})'
		- '@Html.RenderLink(new NextLinkOptions("Small blue link", ButtonStyle.action | ButtonStyle.small, "telenor.dk"));'
	tmpl: >
		<button class="button button--action button--small">
			<span class="button__label icon--right icon-arrow-right icon--small">Small blue button</span>
		</button>
		<button class="button button--action button--small" disabled>
			<span class="button__label icon--right icon-arrow-right icon--small">Small blue button</span>
		</button>
		<a href="telenor.dk" class="button button--action button--small">
			<span class="button__label icon--right icon-arrow-right icon--small">Small blue link</span>
		</a>
  - name: Small default button with right arrow
	dotNet:
		- '@Html.RenderButton(new NextButtonOptions("Small default button", ButtonStyle.@default | ButtonStyle.small));'
		- '@Html.RenderButton(new NextButtonOptions("Small default button", ButtonStyle.@default | ButtonStyle.small ){
				Disabled = true
			})'
		- '@Html.RenderLink(new NextLinkOptions("Small default link", ButtonStyle.@default | ButtonStyle.small, "telenor.dk"));'
	tmpl: >
		<button class="button button--default button--small">
			<span class="button__label icon--right icon-arrow-right icon--small">Small default button</span>
		</button>
		<button class="button button--default button--small" disabled>
			<span class="button__label icon--right icon-arrow-right icon--small">Small default button</span>
		</button>
		<a href="telenor.dk" class="button button--default button--small">
			<span class="button__label icon--right icon-arrow-right icon--small">Small default link</span>
		</a>
 */
.button {
  padding: 0 24px;
  display: inline-block;
  height: 48px;
  border: 1px solid transparent;
  border-radius: 48px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  background: none;
  text-align: center;
  vertical-align: top;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.button:not(.button--icon) .icon-arrow-right::before {
  top: auto;
  transform: translateX(0);
}
.button:not(.button--icon) .icon-chevron-left::before {
  top: auto;
  transform: translateX(0);
}
.button:not(.button--icon):hover .icon-arrow-right::before {
  transform: translateX(4px);
}
.button:not(.button--icon):hover .icon-chevron-left::before {
  transform: translateX(-4px);
}
.button:not(.button--icon) .button__label.icon-arrow-right, .button:not(.button--icon) .button__label.icon-chevron-left, .button:not(.button--icon) .button__label.icon-arrow-up, .button:not(.button--icon) .button__label.icon-arrow-down {
  display: flex;
  align-items: center;
}
.button:active, .button:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.button:active .icon--filled {
  color: hsl(0, 0%, 100%);
  background: #101466;
  border-color: #101466;
}
.button:hover .icon--filled {
  color: hsl(0, 0%, 100%);
  background: #1920a4;
  border-color: #1920a4;
}
.button--alt .button__label {
  line-height: 48px;
}
.button--alt .button__label.icon--right::before, .button--alt .button__label.icon--left::before {
  line-height: 48px;
}
.button__label::before {
  transition: 0.5s;
}
.button--default {
  background: transparent;
  color: #000f3c;
  border-color: hsl(226, 11%, 45%);
}
.button--default:active, .button--default:hover {
  border-color: #000f3c;
}
.button--graphite {
  background: hsl(225, 25%, 10%);
  color: hsl(0, 0%, 100%);
  border-color: hsl(225, 25%, 10%);
}
.button--action {
  background: #2028cd;
  color: hsl(0, 0%, 100%);
  border-color: #2028cd;
  transition: background 0.2s ease-in-out;
}
.button--action:active {
  background: #101466;
}
.button--action:hover {
  background: #1920a4;
}
.button--action[disabled] {
  background: hsl(225, 12%, 77%);
}
.button--default, .button--action, .button--graphite {
  min-width: 96px;
}
.button--default .button__label, .button--action .button__label, .button--graphite .button__label {
  font-size: 18px;
  line-height: 46px;
}
.button--default.button--icon, .button--action.button--icon, .button--graphite.button--icon {
  padding: 0 12px;
  min-width: 48px;
}
.button--default.button--icon::before, .button--action.button--icon::before, .button--graphite.button--icon::before {
  line-height: 48px;
}
.button--small {
  height: 40px;
}
.button--small .button__label {
  font-size: 16px;
  line-height: 38px;
}
.button--small:has(.icon-arrow-right) {
  padding: 8px 24px;
}
.button--small:has(.icon-arrow-right) .button__label {
  line-height: 24px;
}
.button--small.button--action .button__label::before {
  color: #b4ffff;
}
.button--small[disabled].button--action .button__label::before {
  color: inherit;
}
.button--naked {
  border: 0;
  background: none;
  padding: 0;
  height: auto;
  min-width: 0;
  text-align: left;
  overflow: visible;
  border-radius: 0;
  color: currentColor;
}
.button--link {
  text-align: center;
  color: #2028cd;
}
.button--link[disabled] .button__label::before,
.button--link[disabled] .button__label::after {
  color: hsl(226, 11%, 45%);
}
.button--link:hover {
  color: #1920a4;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.button--link:hover:has(.icon-arrow-right, .icon-chevron-left, .icon-arrow-up, .icon-arrow-down) {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.button.button--naked.button--link:not(.button--stretch) {
  text-align: left;
}
.button.button--naked.button--link .icon--right::before {
  top: auto;
  top: initial;
  bottom: 0;
  line-height: 0.5 !important;
}
.button.button--naked.button--link .icon--right.icon-arrow-right::before {
  line-height: 24px !important;
  bottom: auto;
  bottom: initial;
}
.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 {
  border-radius: 50%;
  padding: 0 12px;
}
.button--icon::before {
  position: relative;
}
.button--icon::after {
  content: "";
  width: 100%;
  height: 100%;
  padding: 16px;
}
.button--icon:not(.arrow-animated) .icon-arrow-right.button__label,
.button--icon:not(.arrow-animated) .icon-arrow-down.button__label,
.button--icon:not(.arrow-animated) .icon-arrow-up.button__label, .button--naked:has(.icon--filled) .icon-arrow-right.button__label,
.button--naked:has(.icon--filled) .icon-arrow-down.button__label,
.button--naked:has(.icon--filled) .icon-arrow-up.button__label {
  display: block;
}
.button--icon:not(.arrow-animated) .icon-arrow-right::before,
.button--icon:not(.arrow-animated) .icon-arrow-down::before,
.button--icon:not(.arrow-animated) .icon-arrow-up::before, .button--naked:has(.icon--filled) .icon-arrow-right::before,
.button--naked:has(.icon--filled) .icon-arrow-down::before,
.button--naked:has(.icon--filled) .icon-arrow-up::before {
  top: auto;
  transition-duration: 0.4s;
  transition-delay: 0s;
  width: 24px;
  text-align: center;
}
.button--icon:not(.arrow-animated) .icon-arrow-right::after,
.button--icon:not(.arrow-animated) .icon-arrow-down::after,
.button--icon:not(.arrow-animated) .icon-arrow-up::after, .button--naked:has(.icon--filled) .icon-arrow-right::after,
.button--naked:has(.icon--filled) .icon-arrow-down::after,
.button--naked:has(.icon--filled) .icon-arrow-up::after {
  font-family: framework-icons-new !important;
  position: absolute;
  width: 24px;
  opacity: 1;
  transition-duration: 0.1s;
  transition-delay: 0.4s;
  text-align: center;
}
.button--icon:not(.arrow-animated) .icon-arrow-right::before, .button--naked:has(.icon--filled) .icon-arrow-right::before {
  transform: translateX(-32px);
}
.button--icon:not(.arrow-animated) .icon-arrow-right::after, .button--naked:has(.icon--filled) .icon-arrow-right::after {
  font-size: 16px !important;
  content: "\f1005";
}
.button--icon:not(.arrow-animated) .icon-arrow-down::before, .button--naked:has(.icon--filled) .icon-arrow-down::before {
  transform: translate(0, -48px);
}
.button--icon:not(.arrow-animated) .icon-arrow-down::after, .button--naked:has(.icon--filled) .icon-arrow-down::after {
  font-size: 16px !important;
  content: "\f1003";
}
.button--icon:not(.arrow-animated) .icon-arrow-up::before, .button--naked:has(.icon--filled) .icon-arrow-up::before {
  transform: translate(0, 48px);
}
.button--icon:not(.arrow-animated) .icon-arrow-up::after, .button--naked:has(.icon--filled) .icon-arrow-up::after {
  font-size: 16px !important;
  content: "\f1006";
}
.button--icon:not(.arrow-animated):hover .icon-arrow-right::before,
.button--icon:not(.arrow-animated):hover .icon-arrow-down::before,
.button--icon:not(.arrow-animated):hover .icon-arrow-up::before, .button--naked:has(.icon--filled):hover .icon-arrow-right::before,
.button--naked:has(.icon--filled):hover .icon-arrow-down::before,
.button--naked:has(.icon--filled):hover .icon-arrow-up::before {
  transform: translate(0, 0);
  transition-delay: 0.1s;
}
.button--icon:not(.arrow-animated):hover .icon-arrow-right::after,
.button--icon:not(.arrow-animated):hover .icon-arrow-down::after,
.button--icon:not(.arrow-animated):hover .icon-arrow-up::after, .button--naked:has(.icon--filled):hover .icon-arrow-right::after,
.button--naked:has(.icon--filled):hover .icon-arrow-down::after,
.button--naked:has(.icon--filled):hover .icon-arrow-up::after {
  opacity: 0;
  transition-delay: 0s;
}
.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 .icon--filled {
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: #2028cd;
  color: hsl(0, 0%, 100%);
  border-color: #2028cd;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  min-width: 40px;
  padding: 8px;
  margin-right: 8px;
}
.button .icon--filled::before {
  left: auto;
  left: initial;
}
.button[disabled] .icon--filled {
  background: hsl(225, 12%, 77%);
}
.button__spinner {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  height: 100%;
  width: 48px;
}
.button__spinner-before, .button__spinner-after {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 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 {
  animation: spinnerBefore 3s linear 0.6s infinite;
}
.button[aria-busy=true] .button__spinner-after {
  animation: spinnerAfter 3s linear 0.6s infinite;
}
.button[aria-busy=true] .button__spinner-before::before {
  animation: moveLeft 0.5s linear both;
}
.button[aria-busy=true] .button__spinner-after::after {
  animation: moveRight 0.5s linear both;
}
.button[disabled] {
  color: hsl(226, 11%, 45%);
  border-color: hsl(225, 12%, 77%);
  pointer-events: none;
}
.button-grid-row {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.button--location {
  width: 40px;
  height: 40px;
  min-width: 40px;
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 0 4px;
  background: hsl(0, 0%, 100%);
}
.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 {
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
}
.basket-grid-row:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.basket-grid-row:hover span {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.basket-grid-row:hover span::before, .basket-grid-row:hover span::after {
  -webkit-text-decoration: none;
  text-decoration: none;
}

@keyframes moveLeft {
  from {
    left: 16px;
    width: 8px;
  }
  50% {
    left: 0;
    width: 32px;
  }
  to {
    left: 0;
    width: 100%;
  }
}
@keyframes moveRight {
  from {
    right: 16px;
    width: 8px;
  }
  50% {
    right: 0;
    width: 32px;
  }
  to {
    right: 0;
    width: 100%;
  }
}
@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 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
*/
/**
name: Icons
type: ui
examples:
  - name: Icons
    tmpl:
		include: ../icons/[docs]/icons.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: "\f1078";
  top: calc(50% - 8px);
  transition: transform 250ms ease-in-out;
  transform: translateY(0);
  position: absolute;
  right: 0;
}
.is-expanded .accordion__opener::after, .accordion:checked ~ .accordion__opener::after, .accordion:checked ~ .accordion__wrap .accordion__opener::after {
  transform: rotate(45deg);
}
.accordion--only-desktop ~ .accordion__opener::after {
  display: none;
}
.accordion__content {
  overflow: hidden;
  animation: accordionClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
}
.accordion:checked ~ .accordion__content {
  animation: accordionOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
}
.accordion--only-desktop ~ .accordion__content {
  animation: none;
  overflow: visible;
}
.accordion--only-desktop:checked ~ .accordion__content {
  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;
  animation-play-state: paused;
}

@keyframes accordionOpen {
  0% {
    overflow: hidden;
    max-height: 0;
  }
  99% {
    max-height: 100vh;
  }
  100% {
    overflow: visible;
    max-height: none;
  }
}
@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: 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
			})'
  - name: Success
	tmpl:
		include: ../message/[docs]/success.html
	dotNet:
		- '@Html.RenderMessage(new SuccessMessageOptions("text")
			{
				IsHidden = false,
				UseComponent = true,
				UseCloseButton = true
			})'
  - 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
			})'
*/
.message {
  overflow: hidden;
  position: relative;
  text-align: left;
}
.message.collapsing {
  transition: height 0.5s ease;
}
.message__inner {
  padding: 24px;
  width: 100%;
}
.message--info .message__inner {
  background: hsl(240, 20%, 96%);
}
.message--suggestion .message__inner {
  background: hsl(0, 0%, 100%);
}
.message--notification .message__inner {
  background: #e8fdff;
}
.message--success .message__inner {
  background: #e8fdff;
  border: 1px solid #00c8ff;
  box-shadow: inset 8px 0 0 #00c8ff;
}
.message--alert .message__inner {
  background: #fdfdc9;
  border: 1px solid #ff9a1f;
  box-shadow: inset 8px 0 0 #ff9a1f;
}
.message--error .message__inner {
  background-color: #ffeff4;
  border: 1px solid #ff4173;
  box-shadow: inset 8px 0 0 #ff4173;
}
.message__text {
  font-size: 14px;
  line-height: 20px;
}
.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 with small bullets
    tmpl:
      include: ../list/[docs]/list-small-bullets.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: 16px;
  position: relative;
}
ul > li::before {
  content: "●";
  line-height: inherit;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 8px;
}

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: "\f101a";
  line-height: inherit;
  position: absolute;
  left: 0;
  top: 0;
}
.list--check > li.icon--inline {
  padding-left: 0;
}
.list--white > li {
  color: hsl(0, 0%, 100%);
}
.list--white > li::before {
  color: hsl(0, 0%, 100%);
}
.list--small > li {
  padding-left: 12px;
}
.list--small > li::before {
  font-size: 4px;
}
.list--small-offset > li {
  margin: 0 0 4px;
}
.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
  	dotNet:
		- '@Html.RenderTooltip(new TooltipOptions("Tooltip content", TooltipType.Error))'
	tmpl:
		include: ../tooltip/[docs]/error.html

  - name: Info tip
  	dotNet:
		- '@Html.RenderTooltip(new TooltipOptions("Tooltip content", TooltipType.Regular))'
	tmpl:
		include: ../tooltip/[docs]/info.html

  - name: Fixed tip
  	dotNet:
		- '@Html.RenderTooltip(new TooltipOptions("Tooltip content", TooltipType.Regular){
				TooltipCssClasses = "tooltip--fixed"
			})'
	tmpl:
		include: ../tooltip/[docs]/fixed.html

  - name: Tooltip with classes
  	dotNet:
		- '@Html.RenderTooltip(new TooltipOptions("asdasdasd asd as da sd a s", TooltipType.Regular){	
				TriggerCssClasses = "padding-toleft",
				TooltipCssClasses = "tooltip--fixed"
			})'
	tmpl:
		include: ../tooltip/[docs]/fixed.html
*/
@keyframes dropTooltip {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.tooltip {
  background: #e8fdff;
  border-radius: 3px;
  padding: 24px;
  pointer-events: none;
  max-width: 264px;
  position: absolute;
  z-index: 100;
  animation: 0.1s ease-out dropTooltip;
  text-align: left;
  white-space: normal;
}
.tooltip__trigger {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  -webkit-user-select: none;
     -moz-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: #ffeff4;
}
.tooltip--fixed {
  background-color: #fdfdc9;
}

/**
  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: hsl(225, 12%, 77%);
  border: 2px solid hsl(225, 12%, 77%);
  border-radius: 50%;
  text-align: center;
  z-index: 1;
  font-size: 12px;
  line-height: 20px;
}
.progress-tracker__item::before {
  position: relative;
  color: hsl(0, 0%, 100%);
  font-size: 16px !important;
  content: "\f101a";
  font-size: inherit !important;
  display: none;
}
.passed-step .progress-tracker__item::before {
  display: block;
}
.current-step.passed-step .progress-tracker__item::before {
  color: #00c8ff;
}
.progress-tracker__item::after {
  content: counter(progress-tracker);
}
.passed-step .progress-tracker__item::after {
  display: none;
}
.current-step .progress-tracker__item {
  color: #00c8ff;
  border-color: #00c8ff;
}
.passed-step .progress-tracker__item {
  border-color: #00c8ff;
  background: #00c8ff;
}
.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: hsl(225, 12%, 77%);
}
.current-step .progress-tracker__line::before, .passed-step .progress-tracker__line::before {
  background: #00c8ff;
}
.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;
  width: 96px;
  padding-left: 32px;
  text-align: left;
  border: 1px solid hsl(225, 12%, 77%);
  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: hsl(0, 0%, 100%);
  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: hsl(225, 12%, 77%);
  pointer-events: none;
}
.number__field:disabled {
  color: hsl(225, 12%, 77%);
  background: hsl(0, 0%, 100%);
}
.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 hsl(225, 12%, 77%);
  background: none;
  color: hsl(225, 25%, 10%);
}
.number__control:disabled {
  color: hsl(225, 12%, 77%);
  pointer-events: none;
}
.number--without-border .number__control {
  border-color: transparent;
}
.number__control::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: hsl(0, 0%, 100%);
  z-index: -1;
}
.number__control:focus {
  outline: none;
}
.number__control:hover {
  color: hsl(226, 11%, 45%);
}
.number__control:hover::after {
  background: hsl(240, 20%, 96%);
}
.number--without-border .number__control:hover::after {
  background: hsl(0, 0%, 100%);
}
.number__control--decrease {
  left: 0;
  border-width: 0 1px 0 0;
}
.number__control--decrease::before {
  font-size: 16px !important;
  content: "\f1063";
}
.number__control--increase {
  right: 0;
  border-width: 0 0 0 1px;
}
.number__control--increase::before {
  font-size: 16px !important;
  content: "\f1078";
}

/**
name: Form validation
type: ui
examples:
  - name: Form validation
	tmpl:
		include: ../form/[docs]/validation.html
 */
/**
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: #000f3c;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(226, 11%, 45%);
  border-radius: 3px;
  font-family: "TelenorEvolutionUI", Arial, Helvetica, sans-serif;
  height: 48px;
  line-height: normal;
  transition: border-color 1s;
}
.form__field input::-moz-placeholder {
  color: hsl(225, 12%, 77%);
}
.form__field input::placeholder {
  color: hsl(225, 12%, 77%);
}
.form__field input:hover {
  border-color: #1920a4;
}
.form__field input:focus {
  border-color: #101466;
}
.form__field input[disabled] {
  background: hsl(225, 12%, 77%);
  border-color: hsl(225, 12%, 77%);
}
.form__field input[disabled]::-moz-placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field input[disabled]::placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field .tooltip-trigger-marker {
  display: none;
}
.form__field::before {
  position: absolute;
  top: 24px;
  right: 16px;
  z-index: 1;
  color: #000f3c;
  transform: translate(0, -50%);
}
.form__field::after {
  content: attr(data-description);
  font-size: 14px;
  line-height: 20px;
}
.form__field.error input {
  background: #ffeff4;
  border-color: #ff4173;
  padding-right: 32px;
}
.form__field.error input::-moz-placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field.error input::placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #ff4173;
  font-size: 14px;
  line-height: 20px;
}
.form label, .form__label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #000f3c;
}

/**
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: #000f3c;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(226, 11%, 45%);
  border-radius: 3px;
  font-family: "TelenorEvolutionUI", Arial, Helvetica, sans-serif;
  padding: 12px 16px;
  height: auto;
  line-height: normal;
  transition: border-color 1s;
}
.form__field textarea::-moz-placeholder {
  color: hsl(225, 12%, 77%);
}
.form__field textarea::placeholder {
  color: hsl(225, 12%, 77%);
}
.form__field textarea:hover {
  border-color: #1920a4;
}
.form__field textarea:focus {
  border-color: #101466;
}
.form__field textarea[disabled] {
  background: hsl(225, 12%, 77%);
  border-color: hsl(225, 12%, 77%);
  color: hsl(226, 11%, 45%);
}
.form__field.error textarea {
  border-color: #ff4173;
  background-color: #ffeff4;
}
.form__field.error textarea::-moz-placeholder {
  color: #000f3c;
}
.form__field.error textarea::placeholder {
  color: #000f3c;
}
.form__field.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #ff4173;
  font-size: 14px;
  line-height: 20px;
}
.form__field.disabled textarea {
  background: hsl(225, 12%, 77%);
  border-color: hsl(225, 12%, 77%);
}
.form__field.disabled textarea::-moz-placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field.disabled textarea::placeholder {
  color: hsl(226, 11%, 45%);
}
.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: 16px;
  line-height: 24px;
  padding-left: 32px;
  margin-bottom: 0;
}
.form__checkbox label::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  border: 2px solid hsl(226, 11%, 45%);
  border-radius: 3px;
  color: hsl(0, 0%, 100%);
  background: hsl(0, 0%, 100%);
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  width: 24px;
  height: 24px;
}
.form__checkbox label:hover::before {
  border-color: #2028cd;
}
.form__checkbox input:checked ~ label::before {
  font-size: 16px !important;
  content: "\f101a";
  background: #2028cd;
  border-color: #2028cd;
}
.form__checkbox input:disabled ~ label {
  color: hsl(226, 11%, 45%);
}
.form__checkbox input:disabled ~ label::before {
  border-color: hsl(225, 12%, 77%);
}
.form__checkbox input:disabled:checked ~ label::before {
  background: hsl(225, 12%, 77%);
}
.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: hsl(225, 12%, 77%);
  -webkit-tap-highlight-color: transparent;
}
.toggle__slider::before {
  border-radius: 50%;
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: hsl(0, 0%, 100%);
  transition: 0.3s;
  -webkit-tap-highlight-color: transparent;
}
input:checked + .toggle__slider {
  background-color: #2028cd;
}
input:checked + .toggle__slider::before {
  transform: translateX(32px);
}
input:hover + .toggle__slider {
  background-color: #C3C3C3;
}
input:hover:checked + .toggle__slider {
  background-color: #1920a4;
}
.toggle__small {
  height: 24px;
  width: 48px;
}
.toggle__small .toggle__slider::before {
  height: 16px;
  width: 16px;
}
.toggle__small input:checked + .toggle__slider::before {
  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: 16px;
  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 hsl(226, 11%, 45%);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
.form__radio label::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 12px;
  height: 12px;
  background: #2028cd;
  border-radius: 50%;
  display: none;
}
.form__radio label:hover::before {
  border-color: #2028cd;
}
.form__radio input:checked + label::before,
.form__radio input:focus + label::before {
  border-color: #2028cd;
}
.form__radio input:checked + label::after,
.form__radio input:focus + label::after {
  display: block;
}
.form__radio input[disabled] + label {
  color: hsl(226, 11%, 45%);
}
.form__radio input[disabled] + label::before {
  border-color: hsl(225, 12%, 77%);
}

/**
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: "\f101d";
}
.form__select select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #000f3c;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(226, 11%, 45%);
  border-radius: 3px;
  font-family: "TelenorEvolutionUI", Arial, Helvetica, sans-serif;
  height: 48px;
  padding-right: 48px;
  cursor: pointer;
}
.form__select select::-ms-expand {
  display: none;
}
.form__select select:hover {
  border-color: #1920a4;
}
.form__select select:focus {
  border-color: #101466;
}
.form__select--small::before {
  top: 20px;
}
.form__select--small select {
  height: 40px;
  border-radius: 20px;
}
.form__select.error select {
  background: #ffeff4;
  border-color: #ff4173;
}
.form__select.error::before {
  color: hsl(225, 25%, 10%);
}
.form__select.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #ff4173;
  font-size: 14px;
  line-height: 20px;
}
.form__select.disabled select {
  background: hsl(225, 12%, 77%);
  border-color: hsl(225, 12%, 77%);
  color: hsl(226, 11%, 45%);
}
.form__select.disabled::before {
  color: hsl(226, 11%, 45%);
}
.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
  - name: Search rounded
	tmpl:
		include: ../search/[docs]/search_rounded.html
  - name: Search rounded in error state
	tmpl:
		include: ../search/[docs]/search_rounded-error.html
*/
.form__search input[type=search] {
  padding-left: 56px;
  padding-right: 48px;
}
.form__search input[type=search]:hover {
  border-color: #1920a4;
}
.form__search input[type=search][disabled]:hover {
  border-color: hsl(225, 12%, 77%);
}
.form__search input[type=search]:focus {
  border-color: #101466;
}
.form__search.error::before, .form__search::before {
  font-size: 24px !important;
  content: "\f1087";
  left: 16px;
  right: auto;
}
.form__search-search-icon {
  position: absolute;
  top: 12px;
  right: 16px;
}
.form__search-clear {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #000f3c;
}
.form__search__large .form__search-clear {
  padding: 16px;
  top: 16px;
  right: 8px;
}
.form__search-clear::before {
  font-size: 16px !important;
  content: "\f1021";
}
.form__search__large input[type=search] {
  height: 80px;
  border-radius: 48px;
  padding-left: 64px;
  padding-right: 48px;
}
.form__search__large.error::before, .form__search__large::before {
  left: 24px;
  top: 40px;
}
.form__search__large.error::after {
  display: inline-block;
  vertical-align: top;
  margin-left: 24px;
  padding-top: 4px;
}
.form__search__large__without-border input[type=search] {
  border-color: transparent;
  transition: border-color 1s, box-shadow 1s;
}
.form__search__large__without-border input[type=search]:hover, .form__search__large__without-border input[type=search]:focus {
  box-shadow: 0 2px 16px rgba(32, 45, 85, 0.16);
}
.form__search__large__without-border.error {
  box-shadow: 0 2px 16px rgba(32, 45, 85, 0.16);
}
.form__search--rounded input[type=search] {
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 56px;
}
.form__search--rounded:has(input[type=search]:not(:-moz-placeholder-shown))::before {
  display: none;
}
.form__search--rounded:has(input[type=search]:not(:placeholder-shown))::before {
  display: none;
}
.form__search--rounded:has(input[type=search]:not(:-moz-placeholder-shown)) .form__search-clear {
  display: inline;
  display: initial;
}
.form__search--rounded:has(input[type=search]:not(:placeholder-shown)) .form__search-clear {
  display: inline;
  display: initial;
}
.form__search--rounded.error::before, .form__search--rounded::before {
  right: 16px;
  left: auto;
}
.form__search--rounded .form__search-clear {
  top: 0;
  right: 4px;
  padding: 16px;
  display: none;
}

/**
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: flex;
  height: 48px;
}
.radiobutton-row__element,
.radiobutton-row label {
  display: inline-block;
  height: 48px;
  line-height: 48px;
  border-radius: 48px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  background: none;
  margin-bottom: 0;
  min-width: 96px;
  text-align: center;
  vertical-align: top;
  background: hsl(0, 0%, 100%);
  color: #000f3c;
  border: 1px solid hsl(225, 12%, 77%);
  padding: 0 24px;
  border-right-width: 0;
}
.radiobutton-row__element:hover,
.radiobutton-row label:hover {
  border-color: #000f3c;
}
.radiobutton-row__element:hover:last-child,
.radiobutton-row label:hover:last-child {
  border-right-color: hsl(225, 25%, 10%);
}
.radiobutton-row__element:hover.single,
.radiobutton-row label:hover.single {
  border-radius: 48px;
}
.radiobutton-row__element:nth-child(2),
.radiobutton-row label:nth-child(2) {
  border-radius: 48px 0 0 48px;
}
.radiobutton-row__element:last-child,
.radiobutton-row label:last-child {
  border-radius: 0 48px 48px 0;
  border-right: 1px solid hsl(225, 12%, 77%);
}
.radiobutton-row__element.single,
.radiobutton-row label.single {
  border-radius: 48px;
}
.radiobutton-row__element .icon,
.radiobutton-row label .icon {
  margin-right: 16px;
  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 {
  border-color: #2028cd;
  box-shadow: inset 0 0 0 1px #2028cd;
}
.radiobutton-row input:checked + label {
  border-color: #2028cd;
  box-shadow: inset 0 0 0 1px #2028cd;
}
.radiobutton-row input:disabled + label {
  color: hsl(226, 11%, 45%);
  border-color: hsl(225, 12%, 77%);
}
.radiobutton-row--icons-only .icon {
  margin-right: 0;
}

/**
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: hsl(225, 12%, 77%);
}
.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 {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(-100%, 0);
  display: flex;
  z-index: 5001;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  transition: transform 0s ease 0.2s, visibility 0.5s;
  padding-top: 24px;
}
.modal-box__overlay.modal-box--is-open {
  transform: translate(0, 0);
  transition-delay: 0s;
  visibility: visible;
}
.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: #000f3c;
  transition: opacity 0.4s ease-out;
}
.modal-box--overlay-dark.modal-box--is-open::before {
  background: hsl(225, 25%, 10%);
  opacity: 0.95;
}
.modal-box__content {
  background-color: hsl(0, 0%, 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  white-space: normal;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  transform: translate(0, 100%);
  transition: transform 0.4s ease-out, max-height 0.2s cubic-bezier(0.6, 0, 1, 0.2);
  overflow-y: auto;
  max-height: 100vh;
}
.modal-box--is-open .modal-box__content {
  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 hsl(225, 12%, 77%);
  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--without-animation {
  transition: none;
}
.modal-box--without-animation.modal-box__overlay::before,
.modal-box--without-animation .modal-box__content {
  transition: none;
}
.modal-box--login {
  z-index: 5002;
}
.modal-box--error {
  z-index: 5003;
}

/**
name: Dialog Modal Box
type: ui
desc: >
	Shows content in a Lightbox. Adds overlay around the content.
examples:
	-
		name: Lightbox
		tmpl:
			include: ../dialog-modal-box/[docs]/popup.html
	-
		name: Lightbox with lots of content
		tmpl:
			include: ../dialog-modal-box/[docs]/popup-with-scroll.html
	-
		name: Lightbox with lots of content(Second case)
		tmpl:
			include: ../dialog-modal-box/[docs]/popup-with-scroll-into.html
	-
		name: Lightbox with dark overlay
		tmpl:
			include: ../dialog-modal-box/[docs]/popup-dark-overlay.html
	-
		name: Error lightbox
		tmpl:
			include: ../dialog-modal-box/[docs]/error-popup.html
	-
		name: external popup
		tmpl:
			include: ../dialog-modal-box/[docs]/external-popup.html
*/
.dialog-modal-box {
  border: none;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  background: none;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(-100%, 0);
  display: flex;
  z-index: 5001;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  transition: transform 0s ease 0.2s, visibility 0.4s;
  padding-top: 24px;
}
.dialog-modal-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #000f3c;
  transition: opacity 0.4s ease-out;
}
.dialog-modal-box:not([open]) {
  display: flex;
}
.dialog-modal-box[open] {
  transform: translate(0, 0);
  transition-delay: 0s;
  visibility: visible;
}
.dialog-modal-box[open]::before {
  opacity: 0.5;
}
.dialog-modal-box__content {
  background-color: hsl(0, 0%, 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  white-space: normal;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  transform: translate(0, 100%);
  transition: transform 0.4s ease-out, max-height 0.2s cubic-bezier(0.6, 0, 1, 0.2);
  overflow-y: auto;
  max-height: 100vh;
}
.dialog-modal-box[open] .dialog-modal-box__content {
  transform: translate(0, 0);
}
.dialog-modal-box__content__body {
  max-height: 48vh;
  overflow-y: auto;
}
.dialog-modal-box__content[aria-busy=true] {
  max-height: 160px;
  height: 160px;
}
.dialog-modal-box__body {
  overflow-y: auto;
}
html.dialog-modal-box--is-open {
  overflow: hidden;
}
html.dialog-modal-box--is-open body {
  overflow-y: auto;
}

.dialog-modal-box--overlay-dark[open]::before {
  background: hsl(225, 25%, 10%);
  opacity: 0.95;
}
.dialog-modal-box--without-animation {
  transition: none;
}
.dialog-modal-box--without-animation::before {
  transition: none;
}
.dialog-modal-box--without-animation .dialog-modal-box__content {
  transition: none;
}
.dialog-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 {
  border-color: #2028cd;
  box-shadow: inset 0 0 0 1px #2028cd;
}
.filter__list [type=checkbox]:disabled + .filter__label, .filter__list [type=radio]:disabled + .filter__label {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-color: hsl(225, 12%, 77%);
  color: hsl(226, 11%, 45%);
}
.filter__item {
  display: inline-block;
  margin: 0 8px 8px 0;
}
.filter__label {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  border: 1px solid hsl(225, 12%, 77%);
  border-radius: 48px;
  cursor: pointer;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-width: 96px;
  text-align: center;
}
.filter__label:hover {
  border-color: #000f3c;
}
.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;
          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: #00c8ff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  top: 50%;
  z-index: 1;
  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 {
  box-shadow: 0 0 0 8px rgba(0, 200, 255, 0.08);
}
.range-slider__values {
  line-height: 24px;
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  display: flex;
  position: relative;
  color: #00c8ff;
}
.range-slider__values li {
  margin: 0;
  list-style: none;
  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 {
  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 {
  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 hsl(0, 0%, 100%);
  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;
  transform: translateX(50%);
  display: none;
  color: #000f3c;
}
.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;
}

/**
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
*/
.datatable .margin-toleft--auto {
  margin-left: auto;
}
.datatable--border-top {
  border-top: 1px solid hsl(240, 20%, 96%);
}
.datatable table {
  border: none;
  width: 100%;
}
.datatable__scroll-holder {
  overflow-x: auto;
}
.datatable__scroll-holder::-webkit-scrollbar-track {
  background-color: hsl(0, 0%, 100%);
}
.datatable__scroll-holder::-webkit-scrollbar {
  height: 12px;
  background-color: hsl(0, 0%, 100%);
}
.datatable__scroll-holder::-webkit-scrollbar-thumb {
  background-color: hsl(225, 12%, 77%);
}
.datatable__scroll-holder .context-popup__overlay {
  top: 0;
}
.datatable__scroll-helper {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 72px;
  bottom: 12px;
  width: 32px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 127.71%);
  transition: opacity 0.5s ease-in;
  z-index: 1;
}
table + .datatable__scroll-helper {
  left: auto;
  right: 0;
  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: "\f101e";
  color: #2028cd;
  border-radius: 50%;
  padding: 12px;
  margin-left: 16px;
  background: #b4ffff;
  animation: helperMove 1s infinite alternate linear;
}
.datatable tr:hover {
  background: hsl(240, 20%, 96%);
}
.datatable th {
  font-size: 18px;
  line-height: 24px;
  height: 72px;
  background: #e8fdff;
  padding: 0 12px;
  white-space: nowrap;
}
.datatable th:first-child {
  padding-left: 24px;
}
.datatable td {
  height: 64px;
  padding: 0 12px;
  border-top: 1px solid hsl(240, 20%, 96%);
}
.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;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
.datatable .loader__overlay {
  z-index: 1;
}

@keyframes helperMove {
  from {
    left: 40%;
  }
  to {
    left: 60%;
  }
}
.sorting {
  cursor: pointer;
  position: relative;
}
.sorting:hover, .sorting__asc, .sorting__desc {
  box-shadow: inset 0 -2px 0 0 #2028cd;
}
.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: "\f1020";
}
.sorting__desc .sorting__icon::after {
  font-size: 16px !important;
  content: "\f101d";
}

.column-selector {
  position: absolute;
  top: 100%;
  right: 0;
}
.column-selector__opener {
  border: 0;
  background: hsl(0, 0%, 100%);
  padding: 0 16px;
  color: #2028cd;
  font-size: 14px;
  line-height: 48px;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}

.multi-filter__opener {
  border-bottom: 1px solid hsl(225, 12%, 77%);
}
.multi-filter__opener:hover {
  border-color: #1920a4;
}
.multi-filter__overlay.context-popup--is-open {
  display: block;
}
.multi-filter__overlay.context-popup--is-open ~ .multi-filter__opener {
  border-color: #101466;
}

.filter-row .datepicker::before,
.filter-row .form__field input {
  font-size: 16px;
  line-height: 48px;
}
.filter-row .form__search-clear, .filter-row .form__search::before {
  top: 36px;
}
.filter-row .form__search input {
  border-width: 0 0 1px 0;
  border-color: hsl(225, 12%, 77%);
  height: 72px;
  border-radius: 0;
}
.filter-row .form__search input:hover {
  border-color: #1920a4;
}
.filter-row .form__search input:focus {
  border-color: #101466;
}
.filter-row .button__label {
  font-size: 16px;
  line-height: 24px;
}
.filter-row .form__select::before {
  top: 36px;
}
.filter-row .form__select select {
  border-width: 0 0 1px 0;
  border-color: hsl(225, 12%, 77%);
  font-size: 16px;
  line-height: 72px;
  height: 72px;
  border-radius: 0;
}
.filter-row .form__select select:hover {
  border-color: #1920a4;
}
.filter-row .form__select select:focus {
  border-color: #101466;
}
.filter-row .date__field input,
.filter-row .datepicker__field input {
  border-width: 0 0 1px 0;
  border-color: hsl(225, 12%, 77%);
  height: 72px;
  border-radius: 0;
}
.filter-row .date__field input:hover,
.filter-row .datepicker__field input:hover {
  border-color: #1920a4;
}
.filter-row .date__field input:focus,
.filter-row .datepicker__field input:focus {
  border-color: #101466;
}
.filter-row .date__clear,
.filter-row .date__calendar,
.filter-row .datepicker::before,
.filter-row .form__datepicker-clear {
  transform: none;
  border: 0;
  top: 12px;
}
.filter-row .form__datepicker-clear {
  padding: 0 16px;
}
.filter-row .date__picker {
  transform: translate(0, -1px);
}

/**
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 {
  transform: rotate(90deg);
  vertical-align: middle;
  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(243, 243, 247, 0.9);
}
.loader--light-gray .loader__overlay {
  background: rgba(189, 193, 203, 0.9);
}
.loader__overlay--fullscreen {
  position: fixed;
}
.loader__circle {
  stroke-dasharray: 16, 8, 4, 8;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  stroke: #2028cd;
  stroke-width: 4;
  fill: none;
  animation: rotationCircle 1.5s cubic-bezier(0.28, 0, 0.58, 1) infinite;
}
.loader--transparent .loader__overlay {
  background: transparent;
}
.loader__sr-status {
  font-size: 0;
  line-height: 0;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
@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;
}
.pager__button {
  color: inherit;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 48px;
  background: none;
  border: 0;
}
.pager__button:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #2028cd;
}
.pager__button.current {
  background-color: #e8fdff;
  pointer-events: none;
  color: inherit;
}
.pager__button:disabled {
  visibility: hidden;
}
.pager__button.previous::before {
  font-size: 16px !important;
  content: "\f101e";
}
.pager__button.next::before {
  font-size: 16px !important;
  content: "\f101f";
}
.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;
  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: hsl(225, 12%, 77%);
}

/**
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 hsl(225, 12%, 77%);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}
.list-selectors__label:hover {
  border-color: #000f3c;
}
.list-selectors__label--small {
  min-height: 48px;
}
.list-selectors__label .list-selectors__icon::before {
  visibility: hidden;
}
.list-selectors:checked ~ .list-selectors__label, .list-selectors__label--active {
  border-color: #2028cd;
  box-shadow: inset 0 0 0 1px #2028cd;
}
.list-selectors:checked ~ .list-selectors__label .list-selectors__icon::before, .list-selectors__label--active .list-selectors__icon::before {
  visibility: visible;
}
.list-selectors:disabled ~ .list-selectors__label, .list-selectors__label--disabled {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-color: hsl(225, 12%, 77%);
  color: hsl(226, 11%, 45%);
}
.list-selectors:disabled ~ .list-selectors__label .button,
.list-selectors:disabled ~ .list-selectors__label a, .list-selectors__label--disabled .button,
.list-selectors__label--disabled a {
  pointer-events: none;
  color: hsl(226, 11%, 45%);
}
.list-selectors__radio {
  display: inline-block;
  position: relative;
  padding-left: 32px;
  line-height: 24px;
  -webkit-tap-highlight-color: transparent;
}
.list-selectors__radio::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  border: 2px solid hsl(226, 11%, 45%);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
.list-selectors__radio::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 12px;
  height: 12px;
  background: #2028cd;
  border-radius: 50%;
  display: none;
}
.list-selectors__label:hover > .list-selectors__radio::before {
  border-color: #2028cd;
}
.list-selectors:checked ~ .list-selectors__label > .list-selectors__radio::before, .list-selectors:focus ~ .list-selectors__label > .list-selectors__radio::before {
  border-color: #2028cd;
}
.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: hsl(226, 11%, 45%);
}
.list-selectors:disabled ~ .list-selectors__label > .list-selectors__radio::before {
  border-color: hsl(225, 12%, 77%);
}

/**
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: Slide loop carousel
	  tmpl:
	  	  include: ../carousel/[docs]/carousel.html

	- name: Fade loop carousel
	  tmpl:
	  	  include: ../carousel/[docs]/fade-carousel.html

	- name: Loop carousel with 3 visible slides
	  tmpl:
	  	  include: ../carousel/[docs]/loop-carousel-with-visible-three-slides.html
*/
.carousel {
  overflow: hidden;
  position: relative;
  width: auto;
  visibility: hidden;
}
.carousel__holder {
  position: relative;
  display: flex;
  cursor: grab;
}
.carousel__item {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.carousel__image {
  max-width: 100%;
  height: auto;
  pointer-events: none;
}
.carousel__img {
  pointer-events: none;
}
.carousel__prev, .carousel__next {
  border-radius: 50%;
  color: hsl(226, 11%, 45%);
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 16px;
  transition: all 0.2s ease-in;
  font-size: 24px;
  transform: translate(0, -50%);
  z-index: 1;
  outline: none;
  border: 1px solid hsl(226, 11%, 45%);
  background: none;
  width: 40px;
  height: 40px;
  padding: 0;
}
.carousel__prev:hover, .carousel__next:hover {
  color: hsl(0, 0%, 100%);
  background-color: #00c8ff;
  border-color: #00c8ff;
}
.carousel__prev.disabled, .carousel__next.disabled {
  cursor: default;
  background-color: hsl(225, 12%, 77%);
}
.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;
  padding: 0;
  cursor: pointer;
}
.carousel__pagination-item:first-child {
  margin-left: 0;
}
.carousel__pagination-item::before {
  display: none;
}
.carousel__pagination-item span {
  display: block;
  background: hsl(225, 12%, 77%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.carousel__pagination-item.active span {
  background: hsl(226, 11%, 45%);
}
.carousel--loop .carousel__holder {
  min-height: 402px;
}
.carousel--loop .carousel__item {
  position: absolute;
  width: 100%;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel--loop .carousel__item:first-child {
  visibility: visible;
}
.carousel--init {
  visibility: visible;
}
.carousel--init .carousel__item {
  height: 100%;
  visibility: visible;
}
.carousel--slider .carousel__item {
  margin: 0;
  white-space: normal;
  z-index: 2;
}
.carousel--slider .carousel__item--active {
  z-index: 3;
}
.carousel--slider .carousel__item--active .carousel__item-text {
  display: block;
}
.carousel--slider .carousel__item--previous, .carousel--slider .carousel__item--next {
  z-index: 0;
}
.carousel--slider .carousel__item--previous .carousel__item-text, .carousel--slider .carousel__item--next .carousel__item-text {
  display: none;
}
.carousel--slider .carousel__prev, .carousel--slider .carousel__next {
  z-index: 4;
}
.carousel--fade .carousel__holder {
  align-items: flex-start;
}
.carousel--fade .carousel__item {
  height: auto;
  transition-property: opacity;
}
/**
name: Datepicker
type: ui
desc: >
  Please add CSS description if needed!
examples:
- name: Datepicker single
  tmpl:
    include: ../datepicker/[docs]/single.html
*/
.datepicker {
  position: relative;
}
.datepicker::before {
  font-size: 24px !important;
  content: "\f1015";
  line-height: 48px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  padding-right: 12px;
  border-right: 1px solid hsl(226, 11%, 45%);
  height: 48px;
  z-index: 1;
}
.datepicker.disabled::before {
  color: hsl(226, 11%, 45%);
}

.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: hsl(225, 12%, 77%);
  color: hsl(226, 11%, 45%);
  border-color: hsl(225, 12%, 77%);
}
.form__datepicker-clear {
  position: absolute;
  display: block;
  right: 0;
  padding: 16px;
}
.form__datepicker-clear::before {
  font-size: 16px !important;
  content: "\f1021";
  line-height: 48px;
}

.datepick {
  background-color: hsl(0, 0%, 100%);
  color: #000f3c;
  padding: 24px;
  position: relative;
  margin-top: 8px;
  box-shadow: 0 2px 23px #EDEDED;
  border-radius: 6px;
}
.datepick a {
  color: #000f3c;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.datepick a.datepick-disabled {
  color: hsl(225, 12%, 77%);
  cursor: auto;
  background-color: hsl(0, 0%, 100%);
}
.datepick-popup {
  z-index: 5001;
}
.datepick-disable {
  position: absolute;
  z-index: 100;
  background-color: hsl(0, 0%, 100%);
}
.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: #000f3c;
  display: block;
  line-height: 44px;
  -webkit-text-decoration: none;
  text-decoration: none;
  width: 44px;
  height: 44px;
}
.datepick-month table td span, .datepick-month table th span {
  color: #000f3c;
  display: block;
  width: 44px;
  height: 44px;
  line-height: 44px;
}
.datepick-month table td .datepick-other-month, .datepick-month table th .datepick-other-month {
  color: #000f3c;
}
.datepick-month table td .datepick-today, .datepick-month table th .datepick-today {
  color: #2028cd;
}
.datepick-month table td .datepick-highlight, .datepick-month table th .datepick-highlight {
  background-color: hsl(240, 20%, 96%);
  border-radius: 50%;
}
.datepick-month table td .datepick-selected, .datepick-month table th .datepick-selected {
  background-color: #2028cd;
  border: none;
  color: hsl(0, 0%, 100%);
  border-radius: 50%;
}
.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: "\f101e";
  text-indent: -3px;
}
.datepick-cmd-next {
  right: 0;
  text-indent: 999px;
}
.datepick-cmd-next::before {
  font-size: 16px !important;
  content: "\f101f";
  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: #000f3c;
}
.datepick-ctrl {
  padding-top: 12px;
}
.datepick-status {
  clear: both;
  text-align: center;
}
.datepick-clear-fix {
  clear: both;
}

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

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

/**
name: Time
type: ui
examples:
  - name: Time picker
	tmpl:
		include: ../time/[docs]/time.html
*/
.address-complete {
  position: relative;
}
.address-complete__content {
  background-color: hsl(0, 0%, 100%);
  color: hsl(225, 25%, 10%);
  opacity: 0;
  visibility: hidden;
  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;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  height: auto;
}
.address-complete__scroll {
  max-height: 320px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}
.address-complete__list {
  backface-visibility: hidden;
  padding: 8px 0;
}
.address-complete__list__item {
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  color: hsl(225, 25%, 10%);
  cursor: pointer;
  word-wrap: break-word;
  white-space: normal;
  padding: 16px 24px;
  text-align: left;
  margin: 0;
  list-style: none;
}
.address-complete__list__item.active, .address-complete__list__item:hover, .address-complete__list__item.current-autocomplete-option {
  background-color: hsl(240, 20%, 96%);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.address-complete__list__item::before {
  content: "";
}
.address-complete__large .address-complete__content {
  border-radius: 24px;
  position: absolute;
  top: 88px;
}
.address-complete__small .address-complete__content {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 3px;
  top: 56px;
}
.address-complete--custom {
  border-top: 1px solid hsl(225, 12%, 77%);
  padding: 0;
  padding: initial;
  border-radius: 0;
  z-index: 2;
}

/**
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;
  transition: opacity 0.5s;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 3;
  text-align: center;
}
.splash__holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.splash__heading {
  display: block;
  font-weight: bold;
}
.splash--switch {
  width: 54px;
  height: 48px;
  top: 108px;
  left: auto;
  right: 0;
  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;
  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;
  transition: max-height 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.tab__holder.is--opened {
  max-height: 60em;
}
.tab__holder.subscriptions__custom-tabs .tab-list {
  display: flex;
  justify-content: center;
}
.tab__holder.subscriptions__custom-tabs .navigation-tabs {
  display: flex;
  background-color: #000f3c;
  border: none;
  width: 103px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0 0.5px;
}
.tab__holder.subscriptions__custom-tabs .navigation-tabs__item {
  color: hsl(0, 0%, 100%);
}
.tab__holder.subscriptions__custom-tabs .navigation-tabs:first-of-type {
  border-radius: 40px 0px 0px 40px;
}
.tab__holder.subscriptions__custom-tabs .navigation-tabs:last-of-type {
  border-radius: 0px 40px 40px 0px;
}
.tab__holder.subscriptions__custom-tabs .navigation-tabs--active {
  background-color: #e8ded3;
}
.tab__holder.subscriptions__custom-tabs .navigation-tabs--active .navigation-tabs__item {
  color: #000f3c;
}
.tab__opener {
  float: right;
  margin: 0;
  cursor: pointer;
}
.is--opened .tab__opener {
  color: #2028cd;
}

/**
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 {
  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 hsl(226, 11%, 45%);
  cursor: pointer;
  z-index: 10;
}
.date__start-date .date__calendar::before {
  font-size: 24px !important;
  content: "\f102e";
}
.date__end-date .date__calendar::before {
  font-size: 24px !important;
  content: "\f102f";
}
.date .form__field::before {
  display: none;
}
.date__field {
  position: relative;
}
.date__field input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #000f3c;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(226, 11%, 45%);
  border-radius: 3px;
  font-family: "TelenorEvolutionUI", Arial, Helvetica, sans-serif;
  height: 48px;
  padding-left: 64px;
  padding-right: 8px;
  line-height: 48px;
  transition: border-color 1s;
  text-transform: capitalize;
}
.date__field input::-moz-placeholder {
  color: hsl(225, 12%, 77%);
}
.date__field input::placeholder {
  color: hsl(225, 12%, 77%);
}
.date__field input:hover {
  border-color: #1920a4;
}
.date__field input:focus {
  border-color: #101466;
}
.date__field input::-webkit-inner-spin-button {
  height: 100%;
}
.date__field input::-webkit-calendar-picker-indicator {
  background: transparent;
}
.date__field input[disabled] {
  background: hsl(225, 12%, 77%);
  border-color: hsl(225, 12%, 77%);
}
.date__field input[disabled]::-moz-placeholder {
  color: hsl(226, 11%, 45%);
}
.date__field input[disabled]::placeholder {
  color: hsl(226, 11%, 45%);
}
.date__picker {
  background-color: hsl(0, 0%, 100%);
  color: #000f3c;
  box-shadow: 0 4px 24px hsl(225, 12%, 77%);
  position: absolute;
  left: 12px;
  top: 100%;
  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: "\f101f";
}
.date__prevButton {
  left: 24px;
}
.date__prevButton::before {
  font-size: 16px !important;
  content: "\f101e";
}
.date--month-range {
  width: 664px;
  outline: none;
}
.date__month {
  width: 332px;
  max-width: 332px;
  text-transform: capitalize;
  outline: none;
}
.date__week {
  color: hsl(226, 11%, 45%);
}
.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: hsl(240, 20%, 96%);
  border-radius: 50%;
}
.date__cell[aria-selected=true].date--active, .date__cell:hover.date--active {
  background-color: #2028cd;
}
.date__cell:disabled {
  color: hsl(225, 12%, 77%);
  pointer-events: none;
}
.date--today {
  color: #2028cd;
}
.date--previous {
  visibility: hidden;
}
.date--range:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #e8fdff;
  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: #2028cd;
  color: hsl(0, 0%, 100%);
  border-radius: 50%;
}
.date--active:before {
  content: "";
  width: 50%;
  height: 100%;
  top: 0;
  position: absolute;
  z-index: -1;
}
.date--range + .date--active:not(.date--first):before {
  left: 0;
  background-color: #e8fdff;
}
.date--active + .date--range:not(.date--first):after {
  content: "";
  width: 50%;
  height: 100%;
  top: 0;
  position: absolute;
  z-index: -1;
  background-color: #e8fdff;
  right: 100%;
}

.date__selector {
  border: 1px solid hsl(225, 12%, 77%);
  margin-top: 1px;
  margin-bottom: 1px;
  cursor: pointer;
}
.date__selector.disabled {
  border: 1px solid transparent;
  background-color: hsl(240, 20%, 96%);
  color: hsl(226, 11%, 45%);
  cursor: default;
}
input[type=radio]:checked + .date__selector {
  margin-top: 0;
  margin-bottom: 0;
  border: 2px solid #2028cd;
}

/**
name: Usage bar
type: UI
examples:
  - name: Normal
	tmpl:
		include: ../usage-bar/[docs]/normal.html
 */
.usage-bar {
  background-color: #e8fdff;
  height: 8px;
  border-radius: 3px;
  display: flex;
  flex-direction: row;
}
.usage-bar__remaining {
  background: #00c8ff;
  height: 8px;
  border-radius: 3px;
  width: 100%;
}
.usage-bar--alert {
  background-color: #ffeff4;
}
.usage-bar--alert .usage-bar__remaining {
  background-color: #ff4173;
}

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

@keyframes colorAnimationLighter {
  0% {
    background-color: #e6eef4;
  }
  75% {
    background-color: #e6eef4;
  }
}
@keyframes colorAnimation {
  0% {
    background-color: #00c8ff;
  }
  75% {
    background-color: #00c8ff;
  }
}
@keyframes widthAnimation {
  100% {
    width: 100%;
  }
}
.infinite-usage-light-gray {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: draw1 2.5s ease-in-out forwards;
}

.infinite-usage-blue {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: draw2 2.5s ease-in-out 0.9s forwards;
}

@keyframes draw1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes draw2 {
  to {
    stroke-dashoffset: 0;
  }
}
.burger-menu__sticky-header {
  position: sticky;
  top: 0;
  background-color: hsl(0, 0%, 100%);
  z-index: 11;
  transition: box-shadow 0.1s ease-in;
}
.burger-menu__sticky-header--shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.burger-menu__content-wrapper {
  min-height: 100%;
}
.burger-menu__content {
  min-height: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.burger-menu__navigation {
  width: 100vw;
  height: -moz-min-content;
  height: min-content;
  min-height: calc(100vh - 48px);
}
.burger-menu__container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
}
.burger-menu__menu-item {
  color: #000f3c;
  background-color: hsl(0, 0%, 100%);
}
.burger-menu__menu-item--root, .burger-menu__menu-item--root .button__label {
  font-weight: bold;
  font-size: 24px;
  line-height: 32px;
}
.burger-menu__menu-item-description {
  color: hsl(226, 11%, 45%);
}
.burger-menu__menu-item:hover, .burger-menu__menu-item a:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #1920a4;
}
.burger-menu .dialog-modal-box {
  padding: 0;
  justify-content: start;
  align-items: start;
  text-align: left;
}
.burger-menu .dialog-modal-box::backdrop {
  background-color: #000f3c;
  opacity: 0.5;
}
.burger-menu .dialog-modal-box__content {
  height: 100%;
  background-color: hsl(0, 0%, 100%);
  color: #000f3c;
  width: 100%;
  display: block;
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
  overflow-x: hidden;
}
.burger-menu .dialog-modal-box__content a {
  color: inherit;
}
.burger-menu .dialog-modal-box__content a.active-trail {
  color: hsl(0, 0%, 100%);
}
.burger-menu .dialog-modal-box[open] .dialog-modal-box__content {
  opacity: 1;
}
.burger-menu .highlight__img {
  height: 100%;
}
.burger-menu .highlight__img-wrapper {
  height: 48px;
  width: 48px;
  min-height: 48px;
  min-width: 48px;
  border-radius: 50%;
  border: #00c8ff solid 1px;
  overflow: hidden;
}
.burger-menu .highlight a:hover, .burger-menu .highlight a.button:hover {
  color: #1920a4;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.burger-menu--business .dialog-modal-box .dialog-modal-box__content {
  background-color: #000f3c;
  color: hsl(0, 0%, 100%);
}
.burger-menu--business .burger-menu__sticky-header {
  background-color: #000f3c;
  color: hsl(0, 0%, 100%);
}
.burger-menu--business .burger-menu__menu-item {
  color: hsl(0, 0%, 100%);
  background-color: #000f3c;
}
.burger-menu--business .burger-menu__menu-item-description {
  color: hsl(0, 0%, 100%);
  opacity: 0.7;
}
.burger-menu--business a {
  color: inherit;
}
.burger-menu--business a:hover, .burger-menu--business .highlight a:hover, .burger-menu--business .highlight a.button:hover,
.burger-menu--business .burger-menu__menu-item:hover, .burger-menu--business .burger-menu-button:hover {
  color: #5dffff;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.burger-menu-button {
  height: 24px;
  border-radius: 0;
}
.burger-menu-button:hover {
  color: #1920a4;
}
.burger-menu-button + .burger-menu--business:hover {
  color: #5dffff;
}
.burger-menu__animated--forward {
  flex-direction: row-reverse;
}
.burger-menu__animated--forward .burger-menu__animated-item {
  animation: burger-menu-animation-forward 0.5s ease-in-out;
}
.burger-menu__animated--forward .burger-menu__previous .burger-menu__sticky-header {
  z-index: 10;
}
.burger-menu__animated--back .burger-menu__animated-item {
  animation: burger-menu-animation-back 0.5s ease-in-out;
}
.burger-menu__animated--back .burger-menu__previous .burger-menu__sticky-header {
  z-index: 12;
}
.burger-menu__animated--forward.burger-menu__content, .burger-menu__animated--back.burger-menu__content {
  width: 200%;
  min-width: 200%;
  max-width: 200%;
}
@keyframes burger-menu-animation-forward-desktop {
  0% {
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-102%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
@keyframes burger-menu-animation-back-desktop {
  0% {
    transform: translate(-100%, 0);
  }
  80% {
    transform: translate(2%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes burger-menu-animation-forward {
  0% {
    transform: translate(0, 0);
  }
  80% {
    transform: translate(-102vw, 0);
  }
  100% {
    transform: translate(-100vw, 0);
  }
}
@keyframes burger-menu-animation-back {
  0% {
    transform: translate(-100vw, 0);
  }
  80% {
    transform: translate(2vw, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.header {
  transition: top 0.2s;
}
.header__wrapper {
  height: 64px;
}
.header__wrapper--without-navigation {
  height: 48px;
}
.header__sticky--scroll-up, .header__sticky--scroll-down {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  transition: transform 0.4s, top 0.2s;
}
.header__sticky--scroll-down {
  transform: translate3d(0, -100%, 0);
}
.header__sticky--scroll-up {
  transform: none;
}
.header__icons .button--icon:after {
  padding-left: 12px;
  padding-right: 12px;
}
.header__basket:not([data-count="0"])::after {
  content: attr(data-count);
  width: 16px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: -4px;
  background: #00c8ff;
  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;
  box-shadow: none;
  border: 0;
}
.header__search .form__search .form__search-clear {
  right: 0;
}
.header__search__result {
  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__search-toggled {
  height: 24px;
}
.header__search-toggled .header__search {
  position: absolute;
  right: 0;
  top: -12px;
  transition: visibility 0s ease 0.2s, opacity 0s ease 0.2s;
  visibility: hidden;
  opacity: 0;
  min-width: 100%;
  padding: 0 8px;
}
.header__search-toggled .header__search .form__search::before {
  display: none;
}
.header__search-toggled .header__search .form__search input[type=search] {
  height: 48px;
  padding-left: 24px;
  background-color: hsl(240, 20%, 96%);
  border-radius: 48px;
  padding-right: 60px;
  width: 0;
  min-width: 0;
  border: 1px solid #2028cd;
  box-shadow: 0 2px 16px rgba(32, 45, 85, 0.16);
  transition: width 0.3s linear, min-width 0.3s;
}
.header__search-toggled .header__search .form__search input[type=search]::-moz-placeholder {
  opacity: 0;
}
.header__search-toggled .header__search .form__search input[type=search]::placeholder {
  opacity: 0;
}
.header__search-toggled .header__search .form__search input[type=search]:focus {
  border: 1px solid #2028cd;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0 2px 16px rgba(32, 45, 85, 0.16);
}
.header__search-toggled .header__search .form__search input[type=search]:focus::-moz-placeholder {
  opacity: 1;
}
.header__search-toggled .header__search .form__search input[type=search]:focus::placeholder {
  opacity: 1;
}
.header__search-toggled .header__search .search-popup, .header__search-toggled .header__search .search-popup__content {
  border-radius: 24px;
}
.header__search-toggled--opened .header__search {
  visibility: visible;
  opacity: 1;
  transition: none;
}
.header__search-toggled--opened .header__search .form__search input[type=search] {
  width: 100%;
  min-width: 100%;
}
.header__search-toggled--opened .header__search .form__search input[type=search]::-moz-placeholder {
  opacity: 1;
}
.header__search-toggled--opened .header__search .form__search input[type=search]::placeholder {
  opacity: 1;
}
.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 #2028cd;
  background: hsl(226, 11%, 45%);
  border-radius: 3px;
}
.header__menu .active-trail--dark::before {
  border: 1px solid #00c8ff;
}
.header__toggled-elements {
  visibility: visible;
  opacity: 1;
  transition: min-width 0.5s, width 0.5s, opacity 0.5s;
}
.header__toggled-elements.header__icons {
  width: 156px;
  padding-right: 24px;
}
.header__toggled-elements.header__icons--mobile {
  width: 108px;
}
.header__toggled-elements .button {
  color: #000f3c;
}
.header__toggled-elements .button:hover {
  color: #1920a4;
}
.header__toggled-elements--hidden {
  visibility: hidden;
  opacity: 0;
  width: 0;
  overflow: hidden;
}
.header__toggled-elements--hidden.header__icons {
  width: 0;
  padding-right: 0;
}
.header__menu-dropdown {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 297px;
  min-width: 100%;
  display: none;
  white-space: nowrap;
  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: #000f3c;
  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-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
}
.header__menu-item-link:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  position: relative;
}
.header__menu-item-link--underlined:hover::before {
  border: 1px solid hsl(226, 11%, 45%);
  background: hsl(226, 11%, 45%);
  border-radius: 3px;
}
.header__menu-item--parent > .header__menu-item-link::after {
  font-family: "framework-icons-new";
  font-size: 16px !important;
  content: "\f101d";
  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: "\f1020";
}
.header__menu-item .header__menu-item {
  border-bottom: 1px solid hsl(225, 12%, 77%);
  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 #2028cd;
  background: #2028cd;
  border-radius: 3px;
}
.header__top-menu .active-trail .header__top-menu .active-trail::before {
  border: none;
}
.header__switcher-menu {
  font-size: 12px;
  line-height: 16px;
}
.header__switcher-menu li a {
  padding: 2px 12px;
}
.header__switcher-menu .active-trail {
  background: #2028cd;
  color: hsl(240, 20%, 96%);
  border-color: #2028cd;
  transition: background 0.2s ease-in-out;
  border-radius: 12px;
}
.header__switcher-menu .active-trail:active {
  background: #101466;
}
.header__switcher-menu .active-trail:hover {
  background: #1920a4;
}
.header__logo {
  height: 32px;
  z-index: 1;
}
.header__logo svg {
  height: 32px;
}
.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: "\f101d";
  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;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}
.header__bar .active-trail,
.header__bar a:hover {
  color: #2028cd;
}
.header__bar-modal {
  z-index: 4;
}
.header__bar-modal .active-trail {
  color: #2028cd;
}
.header__bar-swipe::before {
  display: block;
  content: "";
  width: 32px;
  height: 4px;
  background: hsl(225, 12%, 77%);
  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;
}
.header__icons.header__toggled-elements .button, .header__search-toggled > .button {
  color: #000f3c;
}
.header__icons.header__toggled-elements .button:hover, .header__search-toggled > .button:hover {
  color: #1920a4;
}
.header--business .burger-menu .button, .header--business .burger-menu-button, .header--business .header__icons .button, .header--business .header__search-toggled > .button {
  color: hsl(0, 0%, 100%);
}
.header--business .burger-menu .button:hover, .header--business .burger-menu-button:hover, .header--business .header__icons .button:hover, .header--business .header__search-toggled > .button:hover {
  color: #5dffff;
}
.header--business .header__login-popup a.button {
  color: #2028cd;
}
.header--business .header__login-popup a.button:hover {
  color: #1920a4;
}

.menu-sap a {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.menu-sap a:after {
  content: "";
  height: 2px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: hsl(0, 0%, 100%);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  transform: translateY(-8px);
}
.menu-sap a:hover:after, .menu-sap a.active-trail:after {
  opacity: 1;
  transform: translateY(4px);
}

.footer__column-heading {
  color: hsl(0, 0%, 100%);
  opacity: 0.7;
}
.background-white .footer__column-heading {
  color: hsl(226, 11%, 45%);
  opacity: 1;
}
.footer-button {
  background: #b4ffff;
  border-color: #b4ffff;
  color: #2028cd;
}
.footer-button .icon--right::before, .footer-button .icon--right:active::before, .footer-button .icon--right:hover::before, .footer-button.button--small .icon--right::before, .footer-button.button--small .icon--right:active::before, .footer-button.button--small .icon--right:hover::before,
.footer-button .icon--left::before,
.footer-button .icon--left:active::before,
.footer-button .icon--left:hover::before, .footer-button.button--small .icon--left::before, .footer-button.button--small .icon--left:active::before, .footer-button.button--small .icon--left:hover::before {
  color: #2028cd;
}
.footer-button:active {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.footer-button:hover {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.footer__bottom-content {
  border-top: 1px solid #2028cd;
}

/**
name: Breadcrumbs
type: ui
examples:
  - name: Breadcrumbs
	tmpl:
		include: ../breadcrumbs/[docs]/breadcrumbs.html
*/
.breadcrumbs {
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.breadcrumbs-container {
  overflow-x: auto;
  background: hsl(0, 0%, 100%);
}
.breadcrumbs li {
  color: hsl(226, 11%, 45%);
  margin: 0;
}
.breadcrumbs li:before {
  display: none;
}
.breadcrumbs a {
  color: #000f3c;
}
.breadcrumbs a:after {
  font-size: 16px !important;
  content: "\f101f";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  color: hsl(226, 11%, 45%);
  font-size: 8px !important;
  -webkit-text-decoration: none;
  text-decoration: 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;
  padding: 0 8px 4px;
  cursor: pointer;
}
.navigation-tabs__item {
  color: hsl(225, 25%, 10%);
}
.navigation-tabs__item:hover {
  color: hsl(226, 11%, 45%);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}
.navigation-tabs--active .navigation-tabs__item:hover {
  color: hsl(225, 25%, 10%);
}
.navigation-tabs--active {
  border-bottom: 2px solid transparent;
  border-bottom-color: #2028cd;
}
.navigation-tabs__toggle {
  display: inline-block;
}
.navigation-tabs__toggle input:checked + label,
.navigation-tabs__toggle input:focus + label {
  border-bottom-color: #2028cd;
}
.navigation-tabs__toggle input:checked + label .navigation-tabs__item,
.navigation-tabs__toggle input:focus + label .navigation-tabs__item {
  color: hsl(225, 25%, 10%);
}
.navigation-tabs--blue-theme .navigation-tabs--active {
  border-bottom-color: #00c8ff;
}
.navigation-tabs--blue-theme .navigation-tabs__item {
  color: hsl(0, 0%, 100%);
}

/**
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 {
  -webkit-text-decoration: none;
  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__add-to-basket button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  outline: none;
  z-index: 6;
}
.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%;
  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%;
}
.content-block__logo-holder {
  width: 160px;
  height: 54px;
  position: relative;
}
.content-block__logo-holder img {
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
/**
name: USP blocks
type: Common
desc: >
	add class .usp-block

	Block can include up to  8 items.

	When there are more than 4 items on the desktop, the block turns into a carousel.
	On mobile it's possible to create a list view or carousel view for block with 4 ans less items. Anything over 4 items automatically become a carousel.

examples:
  - name: USP block 3 items Mobile list view
    tmpl:
	  include: ../usp-blocks/[docs]/usp-block-4-4-4.html

  - name: USP block 4 items Mobile carousel view
    tmpl:
      include: ../usp-blocks/[docs]/usp-block-3-3-3-3.html

  - name: USP block 6 items 
    tmpl:
      include: ../usp-blocks/[docs]/usp-block-6-items.html

*/
.usp-block__holder {
  padding-left: 24px;
  padding-right: 24px;
}
.usp-block__holder .carousel__holder {
  height: auto;
  min-height: auto;
}
.usp-block__holder .carousel__holder .carousel__item {
  background-color: inherit;
}
.usp-block__holder .carousel__holder .carousel__item .usp-block__slide-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 12px 0;
}
.usp-block__icon-holder {
  position: relative;
  height: 48px;
  max-height: 48px;
  min-height: 48px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}
.usp-block__image {
  height: 64px;
  max-width: 64px;
}
.usp-block__icon-holder, .usp-block__image {
  background-size: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
}
.usp-block__brand-image-holder {
  width: 72px;
  height: 72px;
}
.usp-block__brand-image {
  max-width: 100%;
  max-height: 100%;
}
.usp-block__prev, .usp-block__next {
  position: absolute;
  cursor: pointer;
  top: 50%;
  transition: all 0.2s ease-in;
  transform: translate(0, -50%);
  z-index: 1;
}
.usp-block__prev {
  left: -16px;
  right: auto;
}
.usp-block__next {
  left: auto;
  right: -16px;
}
/**
name: Banner block
type: Common
desc: >
	add class .banner-block
*/
.banner-block__image {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  z-index: 8;
  height: 100%;
}
.banner-block--small {
  height: 196px;
}
.banner-block--small .visual-block__picture {
  height: 196px;
}
.banner-block--small .visual-block__picture img {
  width: auto;
  transform: none;
  top: 0;
}
.banner-block--small .visual-block__picture img.img-right {
  left: auto;
  right: 0;
}
.banner-block--small .visual-block__picture img.img-left {
  left: 0;
  right: auto;
}
.banner-block--small .background {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}
.banner-block--small .block-left-align .background {
  background-position-x: right;
}

.video-banner-block {
  max-height: 900px;
  height: calc(100vh - 64px);
  min-height: 360px;
}
.video-banner-block[data-button-disabled=false] {
  height: calc(100vh - 88px);
}
.video-banner-block__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-banner-block__text {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
  height: 50%;
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.banner-container .grid-row .col-12.banner-block {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.banner-container .grid-row .col-md-6.banner-block,
.banner-container .grid-row .col-md-4.banner-block:not(.banner-block__description) {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.banner-container.animated--init .grid-row .col-12.banner-block {
  opacity: 0.5;
  transform: translate(0, 15px);
}
.banner-container.animated--init .grid-row .col-md-6.banner-block,
.banner-container.animated--init .grid-row .col-md-4.banner-block:not(.banner-block__description) {
  opacity: 0.5;
  transform: translate(0, 15px);
}
.banner-container.animated .grid-row .col-12.banner-block {
  opacity: 1;
  transform: translate(0, 0);
}
.banner-container.animated .grid-row .col-md-6.banner-block,
.banner-container.animated .grid-row .col-md-4.banner-block:not(.banner-block__description) {
  opacity: 1;
  transform: translate(0, 0);
}

.banner-container.animated .grid-row > article:nth-of-type(1) {
  transition-delay: 0.25s;
}

.banner-container.animated .grid-row > article:nth-of-type(2) {
  transition-delay: 0.5s;
}

.banner-container.animated .grid-row > article:nth-of-type(3) {
  transition-delay: 0.75s;
}

.banner-container.animated .grid-row > article:nth-of-type(4) {
  transition-delay: 1s;
}

.banner-container.animated .grid-row > article:nth-of-type(5) {
  transition-delay: 1.25s;
}

.banner-container.animated .grid-row > article:nth-of-type(6) {
  transition-delay: 1.5s;
}

/**
name: Cover block
type: Common
desc: >
	add class .cover-block
examples:
  - name: Cover block
*/
.cover-block {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  height: auto;
}
.cover-block .cover-block__holder {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
}
.cover-block .cover-block__graphical {
  grid-column: 1/span 12;
  grid-row: 1/span 1;
}
.cover-block .cover-block__info {
  grid-column: 1/span 12;
  grid-row: 2/span 1;
}

.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%;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.product-block__main-content {
  flex: 1 0 auto;
}
.product-block__image-wrapper::before {
  content: "";
  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__button-holder {
  visibility: hidden;
}
.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%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  max-width: none;
}
.product-block__visual {
  display: inline-table;
}
.product-block__info {
  flex: 1;
  flex-basis: auto; /*!*fix for IE*!*/
  padding: 0 16px;
}
.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 .splash {
  width: 120px;
  height: 120px;
}
.product-block--large .splash--top-left,
.product-block--large .splash--top-right {
  top: 16px;
}
.product-block--large .splash--top-right {
  right: 4px;
}
.product-block--large .splash--top-left {
  left: 0;
}
.product-block--large .badge-holder {
  left: -12px;
  bottom: auto;
  top: -8px;
}
.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;
}

.slider .product-block {
  width: 128px;
  min-height: auto;
}

.button--store-type {
  font-size: 14px;
  line-height: 20px;
  padding: 4px 8px;
  border: 1px solid #2028cd;
  border-radius: 3px;
}
.button--store-type:hover {
  color: #1920a4;
  border-color: #1920a4;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.button--store-type:active {
  color: #101466;
  border-color: #101466;
}
.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: #00c8ff;
}
.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;
  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%;
  transform: translate(-50%, -50%);
}

.cover-element {
  vertical-align: top;
  width: 100%;
  height: auto;
}
.cover-element--mobile {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.overlap__image {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}
.overlap__image img {
  width: 100%;
  height: auto;
}
.overlap__image--top {
  top: -32px;
}
.overlap__image--bottom {
  top: auto;
  bottom: -32px;
}

.comparison-block__inner {
  overflow-x: auto;
  margin: 0 calc((100vw - 100%) / -2);
  padding: 0 calc((100vw - 100%) / 2);
}
.comparison-block__item {
  min-width: 221px;
}
.comparison-block__wrapper {
  min-width: 100%;
  width: -moz-fit-content;
  width: fit-content;
}
.comparison-block__buttons {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}
.comparison-block__buttons::before {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 188px;
  background: linear-gradient(to top, hsl(0, 0%, 100%), rgba(255, 255, 255, 0.0677));
}
.comparison-block.opened .comparison-block__buttons::before {
  display: none;
}
.comparison-block__buttons .comparison-block__show-less-btn {
  display: none;
}
.comparison-block__invisible-rows {
  max-height: 0;
  overflow: hidden;
  animation: closeComparisonBlock 0.75s ease forwards;
}
.comparison-block.opened .comparison-block__invisible-rows {
  animation: openComparisonBlock 0.75s ease forwards;
}
.comparison-block.opened .comparison-block__show-more-btn {
  display: none;
}
.comparison-block.opened .comparison-block__show-less-btn {
  display: block;
}

@keyframes closeComparisonBlock {
  0% {
    max-height: var(--max-height);
  }
  99% {
    max-height: 0;
  }
  100% {
    overflow: hidden;
  }
}
@keyframes openComparisonBlock {
  0% {
    max-height: 0;
    overflow: hidden;
  }
  99% {
    max-height: 100vh;
  }
  100% {
    max-height: none;
    overflow: visible;
  }
}
/**
name: Header block
type: Common
desc: >
	add class .header-block
examples:
  - name: Header block
    tmpl:
	  include: ../header-blocks/[docs]/header-block-6-6.html
*/
.header-block__content {
  min-height: 280px;
  background-position: center;
  background-size: cover;
}

/**
name: Banner block
type: Common
desc: >
	add class .overlap-block
*/
.overlap-block__description {
  width: 100%;
  margin-top: -96px;
  margin-left: 8px;
  margin-right: 8px;
}
.overlap-block__img {
  height: auto;
  width: 100%;
}
.overlap-block__map {
  min-height: 375px;
}

/**
name: Quote Block
type: Common
desc: >
	add class .quote-block
examples:
  - name: Quote Block Medium Text
    tmpl:
	  include: ../quote-block/[docs]/quote-block-text-m.html

  - name: Quote Block Large Text
    tmpl:
	  include: ../quote-block/[docs]/quote-block-text-l.html

  - name: Quote Block With Link
    tmpl:
	  include: ../quote-block/[docs]/quote-block-link.html

  - name: Quote Block Animated
    tmpl:
	  include: ../quote-block/[docs]/quote-block-animated.html
*/
.quote-block {
  overflow-x: hidden;
}
.quote-block--animated.animated .word {
  display: inline-block;
  position: relative;
  opacity: 0;
  animation-duration: var(--word-animation-duration);
  animation-delay: var(--line-animation-delay);
  animation-fill-mode: forwards;
  animation-name: line-fade-in;
  animation-timing-function: linear;
}
.quote-block--animated .quote-holder {
  opacity: 0;
  z-index: 1;
  position: relative;
}
.quote-block--animated .quote-holder--animated {
  position: absolute;
  top: 24px;
}
.quote-block--content-holder {
  background-image: url("https://cdn1.telenor.dk/ImageProxy/css/quote-mark.svg");
  background-repeat: no-repeat;
  background-position-x: -16px;
}
.quote-block--content-holder a:hover {
  color: #1920a4;
  -webkit-text-decoration: none;
  text-decoration: none;
}

@keyframes line-fade-in {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
/**
name: Percent-block
type: Common
desc: >
	add class .percent-block
examples:
  - name: Percent block with percent valule
    tmpl:
	  include: ../percent-block/[docs]/percent-block-percent-value.html

  - name: Percent block with numeric valule
    tmpl:
      include: ../percent-block/[docs]/percent-block-numeric-value.html
*/
.percent-block--percentage-circle {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  display: flex;
  align-items: center;
}
.percent-block--percentage-circle::before {
  content: "";
  display: block;
  width: 144px;
  height: 144px;
  border: 2px solid #00c8ff;
  border-spacing: 2px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
}
.percent-block--percentage-circle svg {
  width: 148px;
  height: 148px;
  transform: rotate(-90deg);
  overflow: visible;
}
.percent-block--percentage-circle svg .percentage-visualisation {
  fill: transparent;
  stroke: #000f3c;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-dasharray: 0 465px;
  transition: stroke-dasharray 1.5s ease-out;
}
.percent-block__value-holder {
  position: absolute;
  font-size: 40px;
  line-height: 48px;
  width: 100%;
  left: 0;
  right: 0;
}
.percent-block--numeric {
  width: 100%;
  height: 48px;
}

/**
name: Help blocks
type: Common
desc: >
	add class .help-block
examples:
  - name: Help block with FAQ
    tmpl:
	  include: ../help-blocks/[docs]/help-block-with-FAQ.html

  - name: Help block without FAQ
    tmpl:
      include: ../help-blocks/[docs]/help-block-without-FAQ.html
*/
.help-block.animated .animation-content {
  opacity: 0;
}
.help-block.animated .animation-content.observed {
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-delay: 0.1s;
  animation-duration: 1.2s;
  animation-name: fade-up;
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/**
name: Carousel Block
type: Common
desc: >
	add class .carousel-block 
examples:
  - name: Carousel block
    tmpl:
	  include: ../carousel-block/[docs]/carousel-block.html
  - name: Carousel block columns
    tmpl:
	  include: ../carousel-block/[docs]/carousel-block-columns.html
*/
.carousel-block .carousel__holder {
  min-height: 193px;
}
.carousel-block .carousel__item {
  min-height: auto;
  height: 100%;
  width: 100%;
}
.carousel-block .carousel--loop .carousel__item:first-child {
  visibility: hidden;
}
.carousel-block .carousel--loop.carousel--init .carousel__item:first-child {
  visibility: visible;
}
.carousel-block .carousel__pagination-item.active span {
  background-color: #00c8ff;
}
.carousel-block__image-holder {
  min-height: 193px;
  height: auto;
}
.carousel-block__image-holder video {
  height: 100%;
  width: auto;
}
.carousel-block__image-holder img {
  vertical-align: top;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/**
name: Expandable-block
type: Common
desc: >
	add class .expandable-block
examples:
  - name: Expandable block
    tmpl:
	  include: ../expandable-block/[docs]/expandable-block.html
*/
.expandable-block__container-shadow {
  position: relative;
  z-index: 8;
}
.expandable-block__container-shadow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 10em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 13.02%, hsl(0, 0%, 100%) 100%);
}
.block--is-open .expandable-block__container-shadow::after {
  display: none;
}
.expandable-block__holder {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.75s;
}
.block--is-open .expandable-block__holder {
  grid-template-rows: 1fr;
}
.expandable-block__content {
  min-height: 0;
}

.color-theme .button--icon {
  height: 40px;
  width: 40px;
  min-width: 40px;
  padding: 8px;
  border: 0;
}
.color-theme .button--icon::before {
  line-height: 24px;
}
.color-theme .button--icon .button__label {
  font-size: 16px;
  line-height: 24px;
  color: #b4ffff;
}
.color-theme .button--icon .icon--right:before {
  left: 0;
}
.color-theme .button--filled-link {
  color: hsl(0, 0%, 100%);
  height: auto;
  padding: 8px 24px;
}
.color-theme .button--filled-link .button__label {
  font-size: 16px;
  line-height: 24px;
}
.color-theme .button--filled-link:active, .color-theme .button--filled-link:hover {
  color: hsl(0, 0%, 100%);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.color-theme .button--filled-link[disabled] {
  background: hsl(225, 12%, 77%);
  border-color: hsl(225, 12%, 77%);
}
.color-theme .button--filled-link[disabled] .button__label {
  color: hsl(226, 11%, 45%);
}
.color-theme .button--filled-link[disabled] .button__label::before, .color-theme .button--filled-link[disabled] .button__label::after {
  color: hsl(226, 11%, 45%);
}
.color-theme .button--filled-link .icon--right::before, .color-theme .button--filled-link .icon--right:active::before, .color-theme .button--filled-link .icon--right:hover::before,
.color-theme .button--filled-link .icon--left::before,
.color-theme .button--filled-link .icon--left:active::before,
.color-theme .button--filled-link .icon--left:hover::before {
  color: #b4ffff;
}
.color-theme .button .icon--filled {
  color: #b4ffff;
}
.color-theme .form label, .color-theme .form__label {
  color: inherit;
}
.color-theme .usp-block__icon-holder {
  background-color: hsl(0, 0%, 100%);
}
.color-theme--white, .color-theme--white-dark {
  background-color: hsl(0, 0%, 100%);
  color: #000f3c;
}
.color-theme--white .usp-block__icon-holder, .color-theme--white-dark .usp-block__icon-holder {
  background-color: hsl(240, 20%, 96%);
}
.color-theme--paper-white, .color-theme--paper-white-dark {
  background-color: hsl(240, 20%, 96%);
  color: #000f3c;
}
.color-theme--pale-stone, .color-theme--pale-stone-dark {
  background-color: #f6f4ee;
  color: #000f3c;
}
.color-theme--pale-muted-green, .color-theme--pale-muted-green-dark {
  background-color: #edf6f3;
  color: #000f3c;
}
.color-theme--pale-blue, .color-theme--pale-blue-dark {
  background-color: #e6eef4;
  color: #000f3c;
}
.color-theme--pale-pink, .color-theme--pale-pink-dark {
  background-color: #ffeff4;
  color: #000f3c;
}
.color-theme--light-blue {
  background-color: #b4ffff;
  color: #2028cd;
}
.color-theme--mid-blue {
  background-color: #2028cd;
  color: #b4ffff;
}
.color-theme--mid-blue .form__checkbox label::before {
  border-color: #b4ffff;
}
.color-theme--mid-blue .form__checkbox input:checked ~ label::before {
  background: hsl(0, 0%, 100%);
  color: #2028cd;
}
.color-theme--dark-blue {
  background-color: #000f3c;
  color: #b4ffff;
}
.color-theme--dark-blue-white {
  background-color: #000f3c;
  color: hsl(0, 0%, 100%);
}
.color-theme--black-friday {
  background-color: hsl(225, 25%, 10%);
  color: hsl(0, 0%, 100%);
}
.color-theme--mid-blue .button--link, .color-theme--dark-blue .button--link, .color-theme--dark-blue-white .button--link, .color-theme--black-friday .button--link {
  color: inherit;
}
.color-theme--mid-blue .button--link:hover, .color-theme--dark-blue .button--link:hover, .color-theme--dark-blue-white .button--link:hover, .color-theme--black-friday .button--link:hover {
  color: inherit;
}
.color-theme--mid-blue .button--link:active, .color-theme--dark-blue .button--link:active, .color-theme--dark-blue-white .button--link:active, .color-theme--black-friday .button--link:active {
  color: inherit;
}
.color-theme--mid-blue .button--filled-link, .color-theme--mid-blue .button--icon, .color-theme--mid-blue .button--action, .color-theme--dark-blue .button--filled-link, .color-theme--dark-blue .button--icon, .color-theme--dark-blue .button--action, .color-theme--dark-blue-white .button--filled-link, .color-theme--dark-blue-white .button--icon, .color-theme--dark-blue-white .button--action, .color-theme--black-friday .button--filled-link, .color-theme--black-friday .button--icon, .color-theme--black-friday .button--action {
  background: #b4ffff;
  border-color: #b4ffff;
  color: #2028cd;
}
.color-theme--mid-blue .button--filled-link:active, .color-theme--mid-blue .button--icon:active, .color-theme--mid-blue .button--action:active, .color-theme--dark-blue .button--filled-link:active, .color-theme--dark-blue .button--icon:active, .color-theme--dark-blue .button--action:active, .color-theme--dark-blue-white .button--filled-link:active, .color-theme--dark-blue-white .button--icon:active, .color-theme--dark-blue-white .button--action:active, .color-theme--black-friday .button--filled-link:active, .color-theme--black-friday .button--icon:active, .color-theme--black-friday .button--action:active {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.color-theme--mid-blue .button--filled-link:hover, .color-theme--mid-blue .button--icon:hover, .color-theme--mid-blue .button--action:hover, .color-theme--dark-blue .button--filled-link:hover, .color-theme--dark-blue .button--icon:hover, .color-theme--dark-blue .button--action:hover, .color-theme--dark-blue-white .button--filled-link:hover, .color-theme--dark-blue-white .button--icon:hover, .color-theme--dark-blue-white .button--action:hover, .color-theme--black-friday .button--filled-link:hover, .color-theme--black-friday .button--icon:hover, .color-theme--black-friday .button--action:hover {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.color-theme--mid-blue .button--link, .color-theme--dark-blue .button--link, .color-theme--dark-blue-white .button--link, .color-theme--black-friday .button--link {
  color: inherit;
}
.color-theme--mid-blue .button--filled-link .icon--right::before, .color-theme--mid-blue .button--filled-link .icon--right::after, .color-theme--mid-blue .button--filled-link .icon--right:active::before, .color-theme--mid-blue .button--filled-link .icon--right:hover::before,
.color-theme--mid-blue .button--filled-link .icon--left::before,
.color-theme--mid-blue .button--filled-link .icon--left::after,
.color-theme--mid-blue .button--filled-link .icon--left:active::before,
.color-theme--mid-blue .button--filled-link .icon--left:hover::before,
.color-theme--mid-blue .button--filled-link .icon--small::before,
.color-theme--mid-blue .button--filled-link .icon--small::after,
.color-theme--mid-blue .button--filled-link .icon--small:active::before,
.color-theme--mid-blue .button--filled-link .icon--small:hover::before, .color-theme--mid-blue .button--icon .icon--right::before, .color-theme--mid-blue .button--icon .icon--right::after, .color-theme--mid-blue .button--icon .icon--right:active::before, .color-theme--mid-blue .button--icon .icon--right:hover::before,
.color-theme--mid-blue .button--icon .icon--left::before,
.color-theme--mid-blue .button--icon .icon--left::after,
.color-theme--mid-blue .button--icon .icon--left:active::before,
.color-theme--mid-blue .button--icon .icon--left:hover::before,
.color-theme--mid-blue .button--icon .icon--small::before,
.color-theme--mid-blue .button--icon .icon--small::after,
.color-theme--mid-blue .button--icon .icon--small:active::before,
.color-theme--mid-blue .button--icon .icon--small:hover::before, .color-theme--dark-blue .button--filled-link .icon--right::before, .color-theme--dark-blue .button--filled-link .icon--right::after, .color-theme--dark-blue .button--filled-link .icon--right:active::before, .color-theme--dark-blue .button--filled-link .icon--right:hover::before,
.color-theme--dark-blue .button--filled-link .icon--left::before,
.color-theme--dark-blue .button--filled-link .icon--left::after,
.color-theme--dark-blue .button--filled-link .icon--left:active::before,
.color-theme--dark-blue .button--filled-link .icon--left:hover::before,
.color-theme--dark-blue .button--filled-link .icon--small::before,
.color-theme--dark-blue .button--filled-link .icon--small::after,
.color-theme--dark-blue .button--filled-link .icon--small:active::before,
.color-theme--dark-blue .button--filled-link .icon--small:hover::before, .color-theme--dark-blue .button--icon .icon--right::before, .color-theme--dark-blue .button--icon .icon--right::after, .color-theme--dark-blue .button--icon .icon--right:active::before, .color-theme--dark-blue .button--icon .icon--right:hover::before,
.color-theme--dark-blue .button--icon .icon--left::before,
.color-theme--dark-blue .button--icon .icon--left::after,
.color-theme--dark-blue .button--icon .icon--left:active::before,
.color-theme--dark-blue .button--icon .icon--left:hover::before,
.color-theme--dark-blue .button--icon .icon--small::before,
.color-theme--dark-blue .button--icon .icon--small::after,
.color-theme--dark-blue .button--icon .icon--small:active::before,
.color-theme--dark-blue .button--icon .icon--small:hover::before, .color-theme--dark-blue-white .button--filled-link .icon--right::before, .color-theme--dark-blue-white .button--filled-link .icon--right::after, .color-theme--dark-blue-white .button--filled-link .icon--right:active::before, .color-theme--dark-blue-white .button--filled-link .icon--right:hover::before,
.color-theme--dark-blue-white .button--filled-link .icon--left::before,
.color-theme--dark-blue-white .button--filled-link .icon--left::after,
.color-theme--dark-blue-white .button--filled-link .icon--left:active::before,
.color-theme--dark-blue-white .button--filled-link .icon--left:hover::before,
.color-theme--dark-blue-white .button--filled-link .icon--small::before,
.color-theme--dark-blue-white .button--filled-link .icon--small::after,
.color-theme--dark-blue-white .button--filled-link .icon--small:active::before,
.color-theme--dark-blue-white .button--filled-link .icon--small:hover::before, .color-theme--dark-blue-white .button--icon .icon--right::before, .color-theme--dark-blue-white .button--icon .icon--right::after, .color-theme--dark-blue-white .button--icon .icon--right:active::before, .color-theme--dark-blue-white .button--icon .icon--right:hover::before,
.color-theme--dark-blue-white .button--icon .icon--left::before,
.color-theme--dark-blue-white .button--icon .icon--left::after,
.color-theme--dark-blue-white .button--icon .icon--left:active::before,
.color-theme--dark-blue-white .button--icon .icon--left:hover::before,
.color-theme--dark-blue-white .button--icon .icon--small::before,
.color-theme--dark-blue-white .button--icon .icon--small::after,
.color-theme--dark-blue-white .button--icon .icon--small:active::before,
.color-theme--dark-blue-white .button--icon .icon--small:hover::before, .color-theme--black-friday .button--filled-link .icon--right::before, .color-theme--black-friday .button--filled-link .icon--right::after, .color-theme--black-friday .button--filled-link .icon--right:active::before, .color-theme--black-friday .button--filled-link .icon--right:hover::before,
.color-theme--black-friday .button--filled-link .icon--left::before,
.color-theme--black-friday .button--filled-link .icon--left::after,
.color-theme--black-friday .button--filled-link .icon--left:active::before,
.color-theme--black-friday .button--filled-link .icon--left:hover::before,
.color-theme--black-friday .button--filled-link .icon--small::before,
.color-theme--black-friday .button--filled-link .icon--small::after,
.color-theme--black-friday .button--filled-link .icon--small:active::before,
.color-theme--black-friday .button--filled-link .icon--small:hover::before, .color-theme--black-friday .button--icon .icon--right::before, .color-theme--black-friday .button--icon .icon--right::after, .color-theme--black-friday .button--icon .icon--right:active::before, .color-theme--black-friday .button--icon .icon--right:hover::before,
.color-theme--black-friday .button--icon .icon--left::before,
.color-theme--black-friday .button--icon .icon--left::after,
.color-theme--black-friday .button--icon .icon--left:active::before,
.color-theme--black-friday .button--icon .icon--left:hover::before,
.color-theme--black-friday .button--icon .icon--small::before,
.color-theme--black-friday .button--icon .icon--small::after,
.color-theme--black-friday .button--icon .icon--small:active::before,
.color-theme--black-friday .button--icon .icon--small:hover::before {
  color: #2028cd;
}
.color-theme--white-dark .button--filled-link, .color-theme--white-dark .button--icon, .color-theme--paper-white-dark .button--filled-link, .color-theme--paper-white-dark .button--icon, .color-theme--pale-stone-dark .button--filled-link, .color-theme--pale-stone-dark .button--icon, .color-theme--pale-muted-green-dark .button--filled-link, .color-theme--pale-muted-green-dark .button--icon, .color-theme--pale-blue-dark .button--filled-link, .color-theme--pale-blue-dark .button--icon, .color-theme--pale-pink-dark .button--filled-link, .color-theme--pale-pink-dark .button--icon {
  background: #000f3c;
  border: #000f3c;
}
.color-theme--white-dark .button--filled-link:active, .color-theme--white-dark .button--icon:active, .color-theme--paper-white-dark .button--filled-link:active, .color-theme--paper-white-dark .button--icon:active, .color-theme--pale-stone-dark .button--filled-link:active, .color-theme--pale-stone-dark .button--icon:active, .color-theme--pale-muted-green-dark .button--filled-link:active, .color-theme--pale-muted-green-dark .button--icon:active, .color-theme--pale-blue-dark .button--filled-link:active, .color-theme--pale-blue-dark .button--icon:active, .color-theme--pale-pink-dark .button--filled-link:active, .color-theme--pale-pink-dark .button--icon:active {
  background: #000a26;
  border-color: #000a26;
}
.color-theme--white-dark .button--filled-link:hover, .color-theme--white-dark .button--icon:hover, .color-theme--paper-white-dark .button--filled-link:hover, .color-theme--paper-white-dark .button--icon:hover, .color-theme--pale-stone-dark .button--filled-link:hover, .color-theme--pale-stone-dark .button--icon:hover, .color-theme--pale-muted-green-dark .button--filled-link:hover, .color-theme--pale-muted-green-dark .button--icon:hover, .color-theme--pale-blue-dark .button--filled-link:hover, .color-theme--pale-blue-dark .button--icon:hover, .color-theme--pale-pink-dark .button--filled-link:hover, .color-theme--pale-pink-dark .button--icon:hover {
  background: #000a26;
  border-color: #000a26;
}
.color-theme--white-dark .button--filled-link .icon--right::before, .color-theme--white-dark .button--filled-link .icon--right::after, .color-theme--white-dark .button--filled-link .icon--right:active::before, .color-theme--white-dark .button--filled-link .icon--right:hover::before,
.color-theme--white-dark .button--filled-link .icon--left::before,
.color-theme--white-dark .button--filled-link .icon--left::after,
.color-theme--white-dark .button--filled-link .icon--left:active::before,
.color-theme--white-dark .button--filled-link .icon--left:hover::before, .color-theme--white-dark .button--icon .icon--right::before, .color-theme--white-dark .button--icon .icon--right::after, .color-theme--white-dark .button--icon .icon--right:active::before, .color-theme--white-dark .button--icon .icon--right:hover::before,
.color-theme--white-dark .button--icon .icon--left::before,
.color-theme--white-dark .button--icon .icon--left::after,
.color-theme--white-dark .button--icon .icon--left:active::before,
.color-theme--white-dark .button--icon .icon--left:hover::before, .color-theme--paper-white-dark .button--filled-link .icon--right::before, .color-theme--paper-white-dark .button--filled-link .icon--right::after, .color-theme--paper-white-dark .button--filled-link .icon--right:active::before, .color-theme--paper-white-dark .button--filled-link .icon--right:hover::before,
.color-theme--paper-white-dark .button--filled-link .icon--left::before,
.color-theme--paper-white-dark .button--filled-link .icon--left::after,
.color-theme--paper-white-dark .button--filled-link .icon--left:active::before,
.color-theme--paper-white-dark .button--filled-link .icon--left:hover::before, .color-theme--paper-white-dark .button--icon .icon--right::before, .color-theme--paper-white-dark .button--icon .icon--right::after, .color-theme--paper-white-dark .button--icon .icon--right:active::before, .color-theme--paper-white-dark .button--icon .icon--right:hover::before,
.color-theme--paper-white-dark .button--icon .icon--left::before,
.color-theme--paper-white-dark .button--icon .icon--left::after,
.color-theme--paper-white-dark .button--icon .icon--left:active::before,
.color-theme--paper-white-dark .button--icon .icon--left:hover::before, .color-theme--pale-stone-dark .button--filled-link .icon--right::before, .color-theme--pale-stone-dark .button--filled-link .icon--right::after, .color-theme--pale-stone-dark .button--filled-link .icon--right:active::before, .color-theme--pale-stone-dark .button--filled-link .icon--right:hover::before,
.color-theme--pale-stone-dark .button--filled-link .icon--left::before,
.color-theme--pale-stone-dark .button--filled-link .icon--left::after,
.color-theme--pale-stone-dark .button--filled-link .icon--left:active::before,
.color-theme--pale-stone-dark .button--filled-link .icon--left:hover::before, .color-theme--pale-stone-dark .button--icon .icon--right::before, .color-theme--pale-stone-dark .button--icon .icon--right::after, .color-theme--pale-stone-dark .button--icon .icon--right:active::before, .color-theme--pale-stone-dark .button--icon .icon--right:hover::before,
.color-theme--pale-stone-dark .button--icon .icon--left::before,
.color-theme--pale-stone-dark .button--icon .icon--left::after,
.color-theme--pale-stone-dark .button--icon .icon--left:active::before,
.color-theme--pale-stone-dark .button--icon .icon--left:hover::before, .color-theme--pale-muted-green-dark .button--filled-link .icon--right::before, .color-theme--pale-muted-green-dark .button--filled-link .icon--right::after, .color-theme--pale-muted-green-dark .button--filled-link .icon--right:active::before, .color-theme--pale-muted-green-dark .button--filled-link .icon--right:hover::before,
.color-theme--pale-muted-green-dark .button--filled-link .icon--left::before,
.color-theme--pale-muted-green-dark .button--filled-link .icon--left::after,
.color-theme--pale-muted-green-dark .button--filled-link .icon--left:active::before,
.color-theme--pale-muted-green-dark .button--filled-link .icon--left:hover::before, .color-theme--pale-muted-green-dark .button--icon .icon--right::before, .color-theme--pale-muted-green-dark .button--icon .icon--right::after, .color-theme--pale-muted-green-dark .button--icon .icon--right:active::before, .color-theme--pale-muted-green-dark .button--icon .icon--right:hover::before,
.color-theme--pale-muted-green-dark .button--icon .icon--left::before,
.color-theme--pale-muted-green-dark .button--icon .icon--left::after,
.color-theme--pale-muted-green-dark .button--icon .icon--left:active::before,
.color-theme--pale-muted-green-dark .button--icon .icon--left:hover::before, .color-theme--pale-blue-dark .button--filled-link .icon--right::before, .color-theme--pale-blue-dark .button--filled-link .icon--right::after, .color-theme--pale-blue-dark .button--filled-link .icon--right:active::before, .color-theme--pale-blue-dark .button--filled-link .icon--right:hover::before,
.color-theme--pale-blue-dark .button--filled-link .icon--left::before,
.color-theme--pale-blue-dark .button--filled-link .icon--left::after,
.color-theme--pale-blue-dark .button--filled-link .icon--left:active::before,
.color-theme--pale-blue-dark .button--filled-link .icon--left:hover::before, .color-theme--pale-blue-dark .button--icon .icon--right::before, .color-theme--pale-blue-dark .button--icon .icon--right::after, .color-theme--pale-blue-dark .button--icon .icon--right:active::before, .color-theme--pale-blue-dark .button--icon .icon--right:hover::before,
.color-theme--pale-blue-dark .button--icon .icon--left::before,
.color-theme--pale-blue-dark .button--icon .icon--left::after,
.color-theme--pale-blue-dark .button--icon .icon--left:active::before,
.color-theme--pale-blue-dark .button--icon .icon--left:hover::before, .color-theme--pale-pink-dark .button--filled-link .icon--right::before, .color-theme--pale-pink-dark .button--filled-link .icon--right::after, .color-theme--pale-pink-dark .button--filled-link .icon--right:active::before, .color-theme--pale-pink-dark .button--filled-link .icon--right:hover::before,
.color-theme--pale-pink-dark .button--filled-link .icon--left::before,
.color-theme--pale-pink-dark .button--filled-link .icon--left::after,
.color-theme--pale-pink-dark .button--filled-link .icon--left:active::before,
.color-theme--pale-pink-dark .button--filled-link .icon--left:hover::before, .color-theme--pale-pink-dark .button--icon .icon--right::before, .color-theme--pale-pink-dark .button--icon .icon--right::after, .color-theme--pale-pink-dark .button--icon .icon--right:active::before, .color-theme--pale-pink-dark .button--icon .icon--right:hover::before,
.color-theme--pale-pink-dark .button--icon .icon--left::before,
.color-theme--pale-pink-dark .button--icon .icon--left::after,
.color-theme--pale-pink-dark .button--icon .icon--left:active::before,
.color-theme--pale-pink-dark .button--icon .icon--left:hover::before {
  color: #b4ffff;
}
.color-theme .usp-block__icon-holder {
  color: #2028cd;
}
.color-theme--white-dark .usp-block__icon-holder, .color-theme--paper-white-dark .usp-block__icon-holder, .color-theme--pale-stone-dark .usp-block__icon-holder, .color-theme--pale-muted-green-dark .usp-block__icon-holder, .color-theme--pale-blue-dark .usp-block__icon-holder, .color-theme--dark-blue .usp-block__icon-holder, .color-theme--dark-blue-white .usp-block__icon-holder, .color-theme--pale-pink-dark .usp-block__icon-holder {
  color: #000f3c;
}
.color-theme--white .legal-text, .color-theme--white-dark .legal-text, .color-theme--paper-white .legal-text, .color-theme--paper-white-dark .legal-text, .color-theme--pale-stone .legal-text, .color-theme--pale-stone-dark .legal-text, .color-theme--pale-muted-green .legal-text, .color-theme--pale-muted-green-dark .legal-text, .color-theme--pale-blue .legal-text, .color-theme--pale-blue-dark .legal-text, .color-theme--pale-pink .legal-text, .color-theme--pale-pink-dark .legal-text {
  color: hsl(226, 11%, 45%);
}
.color-theme .arrow-animated {
  background: #000f3c;
  border: #000f3c;
}
.color-theme .arrow-animated .icon--right::before, .color-theme .arrow-animated .icon--right:active::before, .color-theme .arrow-animated .icon--right:hover::before,
.color-theme .arrow-animated .icon--left::before,
.color-theme .arrow-animated .icon--left:active::before,
.color-theme .arrow-animated .icon--left:hover::before {
  color: #b4ffff;
}
.color-theme .arrow-animated:active {
  background: #000a26;
  border-color: #000a26;
}
.color-theme .arrow-animated:hover {
  background: #000a26;
  border-color: #000a26;
}
.color-theme--dark-blue .arrow-animated, .color-theme--dark-blue-white .arrow-animated {
  background: #b4ffff;
  border-color: #b4ffff;
  color: #2028cd;
}
.color-theme--dark-blue .arrow-animated .icon--right::before, .color-theme--dark-blue .arrow-animated .icon--right:active::before, .color-theme--dark-blue .arrow-animated .icon--right:hover::before,
.color-theme--dark-blue .arrow-animated .icon--left::before,
.color-theme--dark-blue .arrow-animated .icon--left:active::before,
.color-theme--dark-blue .arrow-animated .icon--left:hover::before, .color-theme--dark-blue-white .arrow-animated .icon--right::before, .color-theme--dark-blue-white .arrow-animated .icon--right:active::before, .color-theme--dark-blue-white .arrow-animated .icon--right:hover::before,
.color-theme--dark-blue-white .arrow-animated .icon--left::before,
.color-theme--dark-blue-white .arrow-animated .icon--left:active::before,
.color-theme--dark-blue-white .arrow-animated .icon--left:hover::before {
  color: #2028cd;
}
.color-theme--dark-blue .arrow-animated:active, .color-theme--dark-blue-white .arrow-animated:active {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.color-theme--dark-blue .arrow-animated:hover, .color-theme--dark-blue-white .arrow-animated:hover {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}

/**
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: "\f10ae";
}

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

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

.subscription__content {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  border-radius: 0 3px 3px 3px;
}
.subscription__content--hover:hover {
  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: 3px;
}
.subscription__label {
  display: inline-block;
  padding: 8px 16px 8px 16px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 24px 0;
  white-space: nowrap;
  color: hsl(0, 0%, 100%);
  background-color: #19AAF8;
}
.subscription__old-price {
  display: none;
}

.subscription-list .subscription-card {
  width: 311px;
  min-width: 311px;
  max-width: 311px;
}
.subscription-list .subscription-card__wrapper {
  border-radius: 8px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
}
.subscription-list .subscription-card__header {
  background-color: #b4ffff;
  color: #2028cd;
}
.subscription-list .subscription-card__price {
  left: 24px;
}
.subscription-list .subscription-card__price--campaign {
  left: 24px;
}
.subscription-list .subscription-card__list-item .icon {
  color: #00c8ff;
}
.subscription-list .subscription-card__img {
  height: 104px;
  width: 100%;
}
.subscription-list .subscription-card__img img {
  height: 100%;
}
.subscription-list .subscription-card--with-badge {
  border-radius: 0 8px 8px 8px;
}
.subscription-list .subscription-card__price {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.subscription-list .subscription-card__price--campaign {
  transform: translateY(-50%) skew(0deg, -7deg);
  backface-visibility: hidden;
}
.subscription-list .subscription-card__prev-price {
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-right: 0;
  margin-left: auto;
  padding: 4px 8px;
}
.subscription-list .subscription-card__prev-price--through {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
.subscription-list--b2b .subscription-card__header {
  background-color: #000f3c;
  color: #b4ffff;
}
.subscription-list--b2b .subscription-card__header a, .subscription-list--b2b .subscription-card__header .button.button--link {
  color: #b4ffff;
}
.subscription-list--b2b .subscription-card__button {
  background: #000f3c;
  border: #000f3c;
}
.subscription-list--b2b .subscription-card__button:active {
  background: #000a26;
  border-color: #000a26;
}
.subscription-list--b2b .subscription-card__button:hover {
  background: #000a26;
  border-color: #000a26;
}
.subscription-list .carousel__item--previous {
  visibility: hidden;
  transition: visibility 0.5s linear;
}
.subscription-list .carousel__item--next {
  opacity: 0.6;
  pointer-events: none;
}
.subscription-list .carousel__prev, .subscription-list .carousel__next {
  min-width: 40px;
  max-width: 40px;
  border: none;
  background-color: #2028cd;
  position: absolute;
  transition: none;
  top: 50%;
  transform: translate(0%, -50%);
}
.subscription-list .carousel__prev .button__label, .subscription-list .carousel__next .button__label {
  color: #b4ffff;
}
.subscription-list .carousel__prev .button__label::before, .subscription-list .carousel__next .button__label::before {
  transition: 0s;
}
.subscription-list .carousel__prev:hover, .subscription-list .carousel__next:hover {
  border: none;
  background-color: #1920a4;
}
.subscription-list .carousel__prev:active, .subscription-list .carousel__next:active {
  border: none;
  background-color: #101466;
}
.subscription-list .carousel__prev:disabled, .subscription-list .carousel__next:disabled {
  visibility: hidden;
}
.subscription-list .carousel__prev {
  left: 16px;
}
.subscription-list .carousel__next {
  right: 16px;
}
.subscription-list .carousel__pagination {
  padding-top: 8px;
}
.subscription-list .carousel__pagination-item {
  margin-bottom: 0;
}
.subscription-list .carousel__pagination-item span {
  background-color: #2028cd;
  opacity: 0.5;
}
.subscription-list .carousel__pagination-item.active span {
  opacity: 1;
}
.subscription-list .carousel .dialog-modal-box {
  transition: none;
}

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

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

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

.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 hsl(225, 12%, 77%);
  border-bottom: 1px solid hsl(225, 12%, 77%);
  height: 306px;
}
.map-grid__store-info {
  max-height: 0;
  overflow: hidden;
  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: hsl(0, 0%, 100%);
}

.customer-service-search .search-results--drop {
  background: hsl(0, 0%, 100%);
  width: 100%;
  position: absolute;
  right: 0;
  top: calc(100% + 3px);
  border: 1px solid hsl(240, 20%, 96%);
  z-index: 10;
}
.customer-service-search .search-results__subtitle {
  padding: 4px 24px;
}
.customer-service-search .search-results__subtitle:hover {
  background: hsl(240, 20%, 96%);
}
.customer-service-search .search-results__link {
  display: inline-block;
  vertical-align: top;
  color: hsl(225, 25%, 10%);
}
.customer-service-search .search-results__link:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.customer-service-search .search-results__buttons {
  border-top: 1px solid hsl(225, 12%, 77%);
  text-align: center;
}
.customer-service-search .search-results__buttons .button {
  margin: 0 4px;
  background: none;
  border: 0;
  color: #2028cd;
}
.customer-service-search .search-results__buttons .button__label {
  line-height: 48px;
}

.search-popup {
  width: 100%;
  display: none;
  border-radius: 3px;
  box-shadow: 0 2px 16px rgba(0, 15, 60, 0.12);
  margin: 8px 0 0;
}
.search-popup[data-mobile-overlay] {
  z-index: 1000;
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  margin: 0;
}
.search-popup--is-open {
  display: block;
}
.form__search__large .search-popup, .form__search--rounded .search-popup {
  border-radius: 24px;
}
.search-popup__content {
  background-color: hsl(0, 0%, 100%);
  min-height: 48px;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
  overflow: hidden;
  border-radius: 3px;
}
.search-popup--is-open .search-popup__content {
  transform: translate(0);
}
.form__search__large .search-popup__content, .form__search--rounded .search-popup__content {
  border-radius: 24px;
}
.search-popup__item {
  overflow: hidden;
}
.search-popup__item--is-focused, .search-popup__item:hover, .search-popup__item:focus {
  background: hsl(240, 20%, 96%);
}

.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 {
  box-shadow: 0 0 0 3px hsl(0, 0%, 100%), 0 0 0 6px #2028cd;
  background: #e6eef4;
}
.focus-visible input[type=checkbox]:focus ~ label,
.focus-visible input[type=radio]:focus ~ label {
  box-shadow: 0 0 0 3px hsl(0, 0%, 100%), 0 0 0 6px #2028cd;
  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 {
  box-shadow: 0 0 0 3px hsl(0, 0%, 100%), 0 0 0 6px #2028cd;
}
.focus-visible .toggle input:focus + .toggle__slider {
  box-shadow: 0 0 0 3px hsl(0, 0%, 100%), 0 0 0 6px #2028cd;
}

/**
name: Color selector
type: Common
examples:
  - name: Color selector
    tmpl:
     include: ../color-selector/[docs]/color-selector.html
*/
.color-selector {
  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: hsl(0, 0%, 100%);
  position: absolute;
  left: 0;
  top: 0;
}
.login-content.modal-box__content {
  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;
}

.login__b2c-page {
  display: flex;
  flex-direction: column;
}
.login__b2c-page .container--main {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.login__b2c-page-logo {
  overflow: hidden;
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 48px;
}
.login__b2c-page-visual {
  position: relative;
}
.login__b2c-page-visual:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  background: #000f3c;
}
.login__b2c-page .carousel {
  display: flex;
  flex-wrap: wrap;
}
.login__b2c-page .carousel__pagination {
  order: -1;
}
.login__b2c-page .carousel__pagination-item {
  padding: 16px 0;
  margin-left: 24px;
}
.login__b2c-page .carousel__pagination-item:first-child {
  margin-left: 0;
}
.login__b2c-page .carousel__pagination-item.active span {
  width: 64px;
}
.login__b2c-page .carousel__pagination-item.active span:before {
  visibility: visible;
  width: 100%;
}
.login__b2c-page .carousel__pagination-item span {
  width: 24px;
  height: calc(4px / 2);
  border-radius: 0;
  background: hsl(240, 20%, 96%);
  transition: width 0.8s ease;
  position: relative;
}
.login__b2c-page .carousel__pagination-item span:before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 0;
  background: #000f3c;
  transition: width 8s linear;
  visibility: hidden;
}
.login__b2c-page .carousel__prev, .login__b2c-page .carousel__next {
  display: none;
}
.login__b2c-page-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(100%, 0);
  overflow-y: auto;
}
.login__b2c-page-content {
  transition: transform 0.2s ease-out;
  transform: translate(0, 0);
}
.login__b2c-page .slider--is-open .login__b2c-page-content {
  transform: translate(-100%, 0);
}

/**
name: Content observer
type: Common
examples:
  - name: Content observer
    tmpl:
     include: ../content-observer/[docs]/index.html
*/
.arrow-animated {
  position: absolute;
  cursor: default;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.arrow-animated .icon--right::before {
  overflow: hidden;
}
@keyframes arrowMove {
  0% {
    transform: translate3d(0, -150%, 0) rotateX(90deg);
  }
  30% {
    transform: translate3d(0, -50%, 0) rotateX(0deg);
  }
  70% {
    transform: translate3d(0, -50%, 0) rotateX(0deg);
  }
  95% {
    transform: translate3d(0, 70%, 0) rotateX(-90deg);
  }
  100% {
    transform: translate3d(0, 70%, 0) rotateX(-90deg);
  }
}
.rule .icon {
  display: none;
}
.rule.passed .icon {
  display: inline-block;
}
.rule.passed .tooltip__trigger {
  display: none;
}

.newsletter {
  position: relative;
}
.newsletter::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #000f3c;
}
.newsletter--mobile-top {
  padding-top: 206px;
}
.newsletter--mobile-top::after {
  top: calc(50% + 103px);
}
.newsletter-content {
  min-height: 206px;
  position: relative;
  z-index: 1;
  margin: 0 16px;
  background-color: #2028cd;
  border-radius: 24px;
}
.newsletter-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://cdn1.telenor.dk/ImageProxy/Textures/optimize4.jpg");
  background-color: #2028cd;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 24px;
}
.newsletter .newsletter-label {
  color: hsl(0, 0%, 100%);
}
.newsletter-visual {
  position: absolute;
  z-index: -1;
  top: -238px;
  left: 50%;
  translate: -50% 0;
}

.service-block__state {
  height: 8px;
  border-radius: 8px;
  min-width: 32px;
}
.service-block__state--busy {
  background-color: #f03d46;
}
.service-block__state--part-time {
  background-color: #ff9a1f;
}
.service-block__state--free {
  background-color: #34a156;
}
.service-block table {
  border: none;
  width: 100%;
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 12px;
}
.service-block table th {
  text-align: center;
  font-weight: 400;
}
.service-block table tr td {
  padding: 0 4px 8px;
}
.service-block table tr td:first-child {
  width: 64px;
}

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

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

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

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

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

.filter--modal {
  padding-top: 0;
}
.filter--modal .modal-box__content {
  min-height: 100%;
  height: 100%;
  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;
  border-radius: 48px;
  -webkit-tap-highlight-color: transparent;
}
.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: "\f1005";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.filter__header:checked ~ .filter__opener::after, .filter__group.selected .filter__header:checked ~ .filter__opener::after {
  font-size: 16px !important;
  content: "\f1063";
}
.filter__header:checked ~ .filter__opener .filter__selected {
  display: none;
}
.filter__group.selected .filter__opener::after {
  font-size: 16px !important;
  content: "\f101a";
}
.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;
  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: hsl(240, 20%, 96%);
  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: hsl(225, 25%, 10%);
}
.product-list-container .pagination__button[disabled] {
  color: hsl(225, 12%, 77%);
}

.stock__label {
  border-bottom: 2px solid transparent;
}
.stock__input:checked + .stock__label {
  font-weight: bold;
  border-bottom-color: #00c8ff;
}
.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%;
}

.broadband-search-results .visual-block__img {
  height: auto;
  min-height: 100%;
  min-width: 100%;
  width: auto;
  top: 0;
  left: 0;
  transform: none;
  transform: initial;
}
.broadband-search-results--recommended .foreground-image {
  position: absolute;
  bottom: 0;
  right: 96px;
}
.prequalification-banner.prequalification--has-foreground .prequalification-content-wrap {
  padding-bottom: 24px;
}
.prequalification-banner.prequalification--has-foreground .manual-adress-wrap {
  margin-bottom: 0;
  margin-bottom: initial;
}
.prequalification-banner .prequalification-block {
  margin: 0;
  position: static;
}
.prequalification-banner .prequalification-block__container {
  padding: 24px 0 24px;
}
.prequalification-banner .prequalification-block__heading {
  text-align: center;
  font-style: italic;
  padding: 0;
  padding: initial;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  margin-bottom: 32px;
}
.prequalification-banner .prequalification-block .prequalification-content-wrap {
  justify-content: left;
  text-align: left;
}
.prequalification-banner .prequalification-block .address-complete {
  margin-bottom: 96px;
  padding-bottom: 64px;
}
.prequalification-banner .prequalification-block .address-submit-wrap button {
  margin-bottom: 0;
  margin-bottom: initial;
}
.prequalification-banner .prequalification-block .search-adress-wrap {
  padding-bottom: 0 !important;
}
.prequalification-banner .prequalification-block .teaser-text {
  font-weight: 700;
}
.prequalification-banner .prequalification-block .foreground-wrap {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  bottom: 0;
}
.prequalification-banner__address-search-form {
  overflow-x: clip;
  background-size: cover;
}
.prequalification-banner .prequalification__overlay {
  display: none;
}

.prequalification-block__heading {
  font-weight: 700;
  margin-bottom: 24px;
  padding-left: 8px;
  padding-right: 8px;
}
.prequalification-block .foreground-wrap {
  display: none;
}
.prequalification-block .prequalification-content-wrap {
  justify-content: center;
  text-align: center;
}
.prequalification-block__container {
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 24px;
}
.prequalification-block .prequalification__overlay {
  display: none;
}
.prequalification-block .manual-adress-wrap {
  margin-bottom: 24px;
}
.prequalification-block:has(.manual-address) .selling-points-wrap,
.prequalification-block:has(.manual-address) .teaser-text,
.prequalification-block:has(.manual-address) .foreground-wrap,
.prequalification-block .manual-address .selling-points-wrap,
.prequalification-block .manual-address .teaser-text,
.prequalification-block .manual-address .foreground-wrap {
  display: none !important;
}
.prequalification-block .address-submit-wrap {
  justify-content: center;
}
.prequalification-block .teaser-text {
  font-size: 14px;
  line-height: 20px;
  display: block;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}
.prequalification-block .addition-text {
  text-align: center;
}
.prequalification-block .address-complete--custom {
  color: #2028cd;
}
.prequalification-block .address-complete--custom:hover {
  color: #1920a4;
}
.prequalification-block__preselected-address {
  text-align: left;
  justify-content: flex-start;
  color: hsl(0, 0%, 100%);
  align-items: center;
}
.prequalification-block__preselected-address .address-label {
  margin-bottom: 32px !important;
}
.prequalification-block__preselected-address .search-another-label button {
  color: #b4ffff;
}

.prequalification-busy .prequalification__overlay {
  display: block;
}

.order-contract--warning {
  border-bottom: 1px solid #ff4173;
}

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

.product-tooltip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
}
.product-tooltip__popup {
  background: hsl(240, 20%, 96%);
}
.product-list-page .product-tooltip__popup {
  z-index: 9;
}
.product-block--large .product-tooltip {
  top: 16px;
  right: 16px;
}
.device-visual .product-tooltip {
  right: 0;
  top: 16px;
}

.recommended-colors-list {
  display: flex;
  flex-wrap: wrap;
}
.recommended-colors-list .colors-list__item {
  position: relative;
  height: 4px;
}
.recommended-colors-list .colors-list__label {
  width: 24px;
  height: 24px;
  border: 4px solid transparent;
  background-clip: padding-box;
}
.recommended-colors-list .colors-list__title {
  position: relative;
  bottom: auto;
  top: auto;
  left: auto;
  transform: none;
}
.recommended-colors-list .colors-list:checked ~ .colors-list__label {
  box-shadow: 0 0 0 1px #2028cd;
}
.recommended-colors-list .colors-list:checked ~ .colors-list__title {
  opacity: 1;
  visibility: visible;
}

[data-anchor-content] {
  scroll-margin-top: 64px;
}

.anchor__link {
  color: hsl(226, 11%, 45%);
}
.anchor__link:hover {
  color: hsl(225, 12%, 77%);
}
.anchor__link--active {
  color: #000f3c;
}
.anchor__toggler {
  padding: 8px 32px 8px 16px;
  max-width: 112px;
  height: 40px;
}
.anchor__toggler::after {
  font-size: 16px !important;
  content: "\f101d";
  font-size: 12px !important;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}
.anchor__toggler.is-opened::after {
  font-size: 16px !important;
  content: "\f1020";
  font-size: 12px !important;
}
.anchor__dropdown {
  position: absolute;
  right: 12px;
  top: 100%;
  width: 232px;
  display: none;
  z-index: 500;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.is-opened ~ .anchor__dropdown {
  display: block;
}

.sticky-navigation {
  position: sticky;
  top: 0;
  z-index: 10;
}
.sticky-navigation--bottom {
  position: fixed;
  width: 100%;
  top: auto;
  bottom: 0;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}

.help-me-choose {
  min-height: calc(100vh - 65px);
  background-repeat: no-repeat;
  background-size: cover;
}
.help-me-choose--wizard-block {
  min-height: calc(100vh - 65px);
  padding-top: 80px;
}
.help-me-choose--wizard-inner-block {
  position: relative;
  z-index: 2;
}
.help-me-choose--back-link {
  position: absolute;
  top: 12px;
  left: 12px;
}
.help-me-choose--option-screen {
  border-radius: 10px;
  cursor: pointer;
  width: 130px;
  border: none;
}
.help-me-choose--option-screen:hover {
  background: #5dffff;
}
.help-me-choose--product {
  cursor: pointer;
}
.help-me-choose--product.highlighted .help-me-choose--product-content {
  background: #b4ffff;
}
.help-me-choose--result .carousel--loop .carousel__holder {
  min-height: auto;
}
.help-me-choose--granny-on-result {
  width: 600px;
  position: relative;
  bottom: 0;
  left: calc(50% - 300px);
}
.help-me-choose--granny {
  width: 500px;
  bottom: 0;
  right: calc(-50% - 500px);
  position: absolute;
  animation-name: granny-animation;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  z-index: 1;
}
.help-me-choose .loader__overlay {
  background: none;
}
.help-me-choose .loader__overlay .loader__circle {
  stroke: #b4ffff;
}

@keyframes granny-animation {
  from {
    right: calc(-50% - 500px);
  }
  to {
    right: calc(50% - 250px);
  }
}
@keyframes desktop-granny-animation {
  from {
    right: calc(-50% - 500px);
  }
  to {
    right: -50px;
  }
}
.colors-list__label {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: 12px solid hsl(0, 0%, 100%);
  -webkit-tap-highlight-color: transparent;
}
.colors-list:checked ~ .colors-list__label, .colors-list:focus ~ .colors-list__label {
  box-shadow: 0 0 0 2px #2028cd;
}
.colors-list__title {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
  white-space: nowrap;
}
.colors-list:checked ~ .colors-list__title {
  opacity: 1;
  visibility: visible;
}

.product-colors-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.product-colors-list__item {
  position: relative;
  padding: 0 4px 24px;
}
.product__sticky-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.product .sticky__animate-entry {
  animation: 200ms linear forwards fadeFromBottom;
  visibility: visible;
}
.product .sticky__animate-exit {
  animation: 200ms linear forwards fadeFromtop;
  visibility: visible;
}
.product__sticky-item {
  position: sticky;
  transform: translate3d(0, 0, 0);
  top: 0;
  z-index: 9;
}
.product__sticky-item--bottom {
  position: fixed;
  width: 100%;
  top: auto;
  bottom: 0;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}
.product__sticky-item--bottom-animation {
  animation: 200ms linear forwards fadeFromtop;
}
.product__sticky-item--desktop-visible {
  animation: 200ms linear forwards fadeFromtop;
  visibility: hidden;
}
.product__visual-holder {
  width: calc(100% + 32px);
  min-width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  overflow: hidden;
}
.product__visual .badge {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
.product__visual .product-tooltip {
  top: 0;
  right: 16px;
}
.product__visual .icon-holder {
  width: 48px;
  height: 48px;
}
.product__visual .carousel__prev, .product__visual .carousel__next {
  color: hsl(225, 25%, 10%);
  padding: 8px;
  width: auto;
  height: auto;
  border: 0;
  left: 8px;
  visibility: hidden;
}
.product__visual .carousel__prev:hover, .product__visual .carousel__next:hover {
  background-color: transparent;
}
.product__visual .carousel__holder {
  min-height: 338px;
}
.product__visual .carousel__img {
  max-height: 338px;
  width: auto;
  height: 100%;
}
.product__visual .carousel__next {
  left: auto;
  right: 8px;
}
.product__visual .carousel__pagination {
  padding-top: 24px;
  margin-bottom: 0;
}
.product__visual .carousel__pagination-item span {
  background-color: hsl(0, 0%, 100%);
}
.product__visual .carousel__pagination-item.active span {
  background-color: #00c8ff;
}
.product .splash {
  top: 24px;
  margin-top: 48px;
  width: 120px;
  height: 120px;
}
.product .splash--top-left {
  left: 16px;
}
.product .splash--top-right {
  left: auto;
  right: 16px;
}
.product__badge-holder {
  position: absolute;
  bottom: 0;
  left: 0;
}
.product .badge {
  font-size: 14px;
  line-height: 20px;
  border-radius: 0 3px 3px 0;
  padding: 4px 8px;
  position: static;
  transform: translate(0, 0);
}
.product .buttons-holder > [class*=col]:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  border: 1px solid hsl(0, 0%, 100%);
  z-index: 1;
}
.product .buttons-holder .col-6:first-child .button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 12px;
}
.product .buttons-holder .col-6:last-child .button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0 12px;
}
.product .product-status {
  font-size: 10px;
  line-height: 16px;
}
.product .product-status::before {
  top: 8px;
}
.product .slider-loader ~ .slider__wrapper {
  display: none;
}
.product .slider-loader.js-hidden ~ .slider__wrapper {
  display: block;
}
.product .slider-loader .loader__overlay {
  background: hsl(0, 0%, 100%);
  z-index: 10;
}
.product .slider-loader__header {
  padding: 64px;
  position: absolute;
  top: 0;
  z-index: 11;
}

.modal-box--desktop-slider {
  text-align: left;
  padding-top: 48px;
  visibility: hidden;
  backface-visibility: hidden;
}
.modal-box--desktop-slider .modal-box__content {
  height: 100%;
}
.modal-box--desktop-slider .modal-box__content--overflow {
  overflow-y: auto;
}
.modal-box--desktop-slider.modal-box--is-open {
  visibility: visible;
}
.modal-box--desktop-slider .slider__spacing {
  padding: 0 16px;
}
.modal-box--desktop-slider .navigation-tabs__slider {
  white-space: nowrap;
  overflow-x: auto;
}
.modal-box--desktop-slider .navigation-tabs__item {
  font-size: 14px;
  line-height: 20px;
}
.modal-box--desktop-slider .navigation-tabs--active {
  color: #2028cd;
}
.modal-box--desktop-slider .navigation-tabs__toggle input:checked + label,
.modal-box--desktop-slider .navigation-tabs__toggle input:focus + label {
  color: #2028cd;
}

.product-btl__switch > span::before {
  font-size: 32px !important;
  content: "\f1059";
}
.product-btl__switch + .product-btl__content {
  display: none;
}
.product-btl:checked + .product-btl__switch > span::before {
  font-size: 32px !important;
  content: "\f10ae";
}
.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;
}
@keyframes fadeFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fadeFromtop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
.product-list__sticky-block {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.5s, visibility 0.5s;
}
.product-list__sticky-block.no-shadow {
  box-shadow: none;
}
.product-list__sticky-block.visible {
  transform: translateY(0);
  visibility: visible;
}

.comparison-tool__select-labels {
  margin-bottom: -8px;
}
.comparison-tool__select-wrapper select {
  text-overflow: ellipsis;
}
.comparison-tool__select-wrapper select:has(option[disabled]) {
  color: hsl(226, 11%, 45%);
}
.comparison-tool__select-wrapper select option {
  color: #000f3c;
}
.comparison-tool__select-wrapper option:not([selected][hidden][disabled]) {
  direction: rtl;
  text-align: left;
}
@-moz-document url-prefix() {
  .comparison-tool__select-wrapper option:not([selected][hidden][disabled]) {
    direction: ltr;
  }
}
.comparison-tool__choice-block {
  position: sticky;
  top: 0;
  z-index: 9;
}
.comparison-tool__choice-block.sticky-state {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  background-color: hsl(0, 0%, 100%);
}
.comparison-tool__highlight {
  position: relative;
}
.comparison-tool__highlight::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #e8fdff;
  z-index: -1;
}
.comparison-tool__image-holder {
  height: 196px;
}
.subscriptions-block__subscriptions .legal-text {
  color: hsl(226, 11%, 45%);
}
.subscriptions-block__image {
  width: 100%;
  height: 210px;
  vertical-align: top;
}
.subscriptions-block__img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  min-width: 1px;
  min-height: 1px;
  translate: -50% -50%;
}
.subscriptions-block__selling-points {
  font-size: 14px;
  line-height: 16px;
}
.subscriptions-block .discount-collector .toggle__slider {
  background-color: hsl(225, 25%, 10%);
}
.subscriptions-block .discount-collector input:checked + .toggle__slider {
  background-color: hsl(0, 0%, 100%);
}
.subscriptions-block .discount-collector input:checked + .toggle__slider::before {
  background-color: hsl(225, 25%, 10%);
}
.buy-back-section {
  scroll-margin-top: 100px;
}

.buy-back__slider-wrapper {
  overflow-y: visible;
  overflow-y: initial;
  min-height: 100%;
}

.buy-back__modal {
  overflow-y: scroll;
  background-color: hsl(0, 0%, 100%) !important;
}

.buy-back__remove-button {
  position: absolute;
  top: 0;
  right: 0;
}

.buy-back__modal-box {
  -webkit-user-drag: none;
}

.buy-back_radio-btn {
  top: auto !important;
}

.mitid-auth-button {
  width: 100%;
}
.mitid-auth-button__content {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.mitid-auth-button__text-wrapper {
  white-space: nowrap;
}

.addons__img-wrapper {
  height: 212px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.addons__img-wrapper img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%;
  min-width: auto;
  width: auto;
  height: 100%;
}
.addons__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.addons__button[disabled] {
  background: #2028cd;
  border-color: #2028cd;
}
.addons__button[disabled] .button__label {
  color: hsl(0, 0%, 100%);
  position: relative;
  padding-left: 24px;
}
.addons__button[disabled] .button__label::before {
  position: absolute;
  left: 0;
  top: 0;
  color: #b4ffff;
  font-size: 16px !important;
  content: "\f101a";
}
.addons__text--gray {
  color: hsl(226, 11%, 45%);
}
.addons__bottom {
  background-color: hsl(240, 20%, 96%);
}
.addons__bottom .button--link {
  color: #2028cd;
}
.addons__selling-points ul li:before {
  color: #00c8ff;
}
.addons--prioritised {
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
}
.addons--prioritised .addons__button-cancel {
  color: hsl(0, 0%, 100%);
}
.addons--prioritised .addons__text--gray {
  color: hsl(225, 12%, 77%);
}
.addons--prioritised .addons__thumbnail {
  filter: brightness(0) invert(1);
}
.addons--prioritised .addons__bottom {
  position: relative;
  background-color: #000f3c;
}
.addons--prioritised .addons__bottom:before {
  content: "";
  background-color: hsl(0, 0%, 100%);
  opacity: 0.05;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.addons--prioritised .button--link {
  color: #b4ffff;
}
.addons--prioritised .addons__show-more .button__label {
  color: hsl(0, 0%, 100%);
}
.addons__top-button {
  position: absolute;
  right: 0;
  top: 0;
}
.addons .icon--filled:after {
  color: #b4ffff;
}
.addons .addons__btl-switch-icon > span::before {
  font-size: 32px !important;
  content: "\f1059";
}
.addons .addons__btl-switch ~ .addons__btl-products {
  display: none;
}
.addons .addons__btl-switch ~ .addons__atl-products {
  display: flex;
}
.addons .addons__btl-switch:checked ~ .addons__btl-switch-icon > span::before {
  font-size: 32px !important;
  content: "\f10ae";
}
.addons .addons__btl-switch:checked ~ .addons__btl-products {
  display: flex;
}
.addons .addons__btl-switch:checked ~ .addons__atl-products {
  display: none;
}

.ex-ef-widget {
  border-color: #a5cdb9;
}

.ex-ef-widget__container {
  border-color: #a5cdb9;
}
.ex-ef-widget__opener {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
  padding: 24px 24px 24px 0;
  min-height: 16px;
  min-width: 16px;
  font-weight: bold;
}
.ex-ef-widget__opener::after {
  font-size: 16px !important;
  content: "\f101d";
  top: calc(50% - 8px);
  transition: transform 250ms ease-in-out;
  transform: translateY(0);
  position: absolute;
  right: 16px;
}
.is-expanded .ex-ef-widget__opener::after, .ex-ef-widget:checked ~ .ex-ef-widget__opener::after, .ex-ef-widget:checked ~ .ex-ef-widget__wrap .ex-ef-widget__opener::after {
  transform: rotate(180deg);
}
.ex-ef-widget--only-desktop ~ .ex-ef-widget__opener::after {
  display: none;
}
.ex-ef-widget__content {
  overflow: hidden;
  animation: ex-ef-widgetClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
}
.ex-ef-widget:checked ~ .ex-ef-widget__content {
  animation: ex-ef-widgetOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
}
.ex-ef-widget--only-desktop ~ .ex-ef-widget__content {
  animation: none;
  overflow: visible;
}
.ex-ef-widget--only-desktop:checked ~ .ex-ef-widget__content {
  animation: none;
  overflow: visible;
}
.ex-ef-widget__header {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
}

.without-animation .ex-ef-widget {
  overflow: hidden;
  height: 0 !important;
  max-height: 0 !important;
  animation-play-state: paused;
}

@keyframes ex-ef-widgetOpen {
  0% {
    overflow: hidden;
    max-height: 0;
  }
  99% {
    max-height: 100vh;
  }
  100% {
    overflow: visible;
    max-height: none;
  }
}
@keyframes ex-ef-widgetClose {
  0% {
    max-height: 9999px;
  }
  1% {
    overflow: hidden;
    max-height: 100vh;
  }
  100% {
    overflow: hidden;
    max-height: 0;
  }
}
.ex-ef-info-block {
  border-color: #a5cdb9;
}

.ex-ef-widget__container {
  margin-top: -8px;
}

.ex-fe-basket-btn-wrapper .button {
  color: hsl(0, 0%, 100%) !important;
}

.hero-card__content {
  border-radius: 8px 8px 0 0;
}
.hero-card--campaign .hero-card__content {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  border-radius: 0 8px 8px 8px;
}
.hero-card--campaign .hero-card__content .hero-card__header {
  border-radius: 0 8px 0 0;
}
.hero-card__content .hero-card__header {
  border-radius: 10px 10px 0 0;
}
.hero-card__price {
  left: 24px;
}
.hero-card__price--campaign {
  left: 16px;
}
.hero-card__header {
  width: 100%;
}
.hero-card__header .button.button--naked.button--link {
  text-align: right;
}
.hero-card__img {
  height: 144px;
  width: 100%;
}
.hero-card__img img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.hero-card__button {
  background-color: #b4ffff;
  border: #b4ffff;
  color: #2028cd;
}
.hero-card__button:active {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.hero-card__button:hover {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.hero-card__button-stock {
  background-color: #2028cd;
  border: 1px solid #b4ffff;
  color: #b4ffff;
}
.hero-card__button-stock:active {
  background: #1920a4;
  border-color: #5dffff;
  color: #b4ffff;
}
.hero-card__button-stock:hover {
  background: #1920a4;
  border-color: #5dffff;
  color: #b4ffff;
}
.hero-card__list-item .icon {
  color: #b4ffff;
}
.hero-card__list-item > span > .button--link {
  color: #b4ffff;
}
.hero-card__list-item > span > .button--link:active {
  color: #b4ffff;
}
.hero-card__list-item > span > .button--link:hover {
  color: #b4ffff;
}
.hero-card .subscription__badge {
  border-radius: 3px 3px 0 0;
}

.internet-card {
  width: 311px;
  min-width: 311px;
  max-width: 311px;
}
.internet-card__wrapper {
  border-radius: 8px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
}
.internet-card__price {
  left: 24px;
}
.internet-card__price--campaign {
  left: 24px;
}
.internet-card__list-item .icon {
  color: #00c8ff;
}
.internet-card__img {
  height: 104px;
  width: 100%;
}
.internet-card__img img {
  height: 100%;
}
.internet-card__technology {
  border-radius: 8px;
  padding: 8px 16px;
  background-color: #f6f4ee;
  font-size: 14px;
  line-height: 20px;
}

.hero-card__price, .internet-card__price {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.hero-card__price--campaign, .internet-card__price--campaign {
  transform: translateY(-50%) skew(0deg, -7deg);
  backface-visibility: hidden;
}
.hero-card__prev-price, .internet-card__prev-price {
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-right: 0;
  margin-left: auto;
  padding: 4px 8px;
}
.hero-card__prev-price--through, .internet-card__prev-price--through {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}
.hero-card__router, .internet-card__router {
  border-radius: 8px;
  background-color: #e8fdff;
  padding: 8px 16px;
}
.hero-card__router label, .internet-card__router label {
  padding-left: calc(24px + 16px);
  font-size: 12px;
  line-height: 16px;
}
.hero-card__router label::before, .internet-card__router label::before {
  width: 24px;
  height: 24px;
  margin-right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.hero-card__router a, .internet-card__router a {
  color: #2028cd;
}

.internet-cards-list .internet-card__header {
  background-color: #b4ffff;
  color: #2028cd;
}
.internet-cards-list--b2b .internet-card__header {
  background-color: #000f3c;
  color: #b4ffff;
}
.internet-cards-list--b2b .internet-card__header a, .internet-cards-list--b2b .internet-card__header .button.button--link {
  color: #b4ffff;
}
.internet-cards-list--b2b .internet-card__button {
  background: #000f3c;
  border: #000f3c;
}
.internet-cards-list--b2b .internet-card__button:active {
  background: #000a26;
  border-color: #000a26;
}
.internet-cards-list--b2b .internet-card__button:hover {
  background: #000a26;
  border-color: #000a26;
}
.internet-cards-list .carousel__item--previous {
  visibility: hidden;
  transition: visibility 0.5s linear;
}
.internet-cards-list .carousel__item--next {
  opacity: 0.6;
  pointer-events: none;
}
.internet-cards-list .carousel__prev, .internet-cards-list .carousel__next {
  min-width: 40px;
  max-width: 40px;
  border: none;
  background-color: #2028cd;
  position: absolute;
  transition: none;
  top: 50%;
  transform: translate(0%, -50%);
}
.internet-cards-list .carousel__prev .button__label, .internet-cards-list .carousel__next .button__label {
  color: #b4ffff;
}
.internet-cards-list .carousel__prev .button__label::before, .internet-cards-list .carousel__next .button__label::before {
  transition: 0s;
}
.internet-cards-list .carousel__prev:hover, .internet-cards-list .carousel__next:hover {
  border: none;
  background-color: #1920a4;
}
.internet-cards-list .carousel__prev:active, .internet-cards-list .carousel__next:active {
  border: none;
  background-color: #101466;
}
.internet-cards-list .carousel__prev:disabled, .internet-cards-list .carousel__next:disabled {
  visibility: hidden;
}
.internet-cards-list .carousel__prev {
  left: 16px;
}
.internet-cards-list .carousel__next {
  right: 16px;
}
.internet-cards-list .carousel__pagination {
  padding-top: 8px;
}
.internet-cards-list .carousel__pagination-item {
  margin-bottom: 0;
}
.internet-cards-list .carousel__pagination-item span {
  background-color: #2028cd;
  opacity: 0.5;
}
.internet-cards-list .carousel__pagination-item.active span {
  opacity: 1;
}
.internet-cards-list .carousel .dialog-modal-box {
  transition: none;
}
.search-accounts__opener {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  color: #000f3c;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(226, 11%, 45%);
  border-radius: 3px;
  font-family: "TelenorEvolutionUI", 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: "\f101d";
}
.search-accounts__opener:focus {
  outline: none;
  border-color: #101466;
}

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

.installment-bar__switch::after {
  height: 2px;
  background: #00c8ff;
  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: #00c8ff;
  opacity: 0.3;
}
.range-slider-installment .range-slider__value-line.paid {
  background-color: #00c8ff;
}

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

.profile-button {
  border: 2px dashed #2028cd;
  background: none;
  text-align: center;
}
.profile-button:hover {
  border-style: solid;
  background-color: hsl(0, 0%, 100%);
}

.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 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.subcriptions-overview__details {
  position: relative;
  padding-right: 24px;
}
.subcriptions-overview__details::before {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 22px;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.payment-method {
  border-top: 1px solid hsl(225, 12%, 77%);
  padding: 24px 24px 0;
}
.payment-method:first-child {
  border-top: none;
  padding-top: 0;
}

.link-block {
  position: relative;
  color: #000f3c;
  padding: 24px;
  padding-right: 48px;
}
.link-block:hover, .link-block__link:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.link-block::after {
  font-size: 16px !important;
  content: "\f101f";
  position: absolute;
  right: 24px;
  top: 24px;
  width: 16px;
  color: inherit;
  line-height: 24px;
}
.link-block--arrow-center .status-dot--small::before {
  top: 50%;
}
.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;
}
.link-block__img-holder {
  width: 48px;
  height: 48px;
}

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

.dashboard-widget {
  background: hsl(225, 25%, 10%);
  width: 100%;
  margin-bottom: 24px;
  color: hsl(0, 0%, 100%);
  position: relative;
}
.dashboard-widget:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.dashboard-widget__title {
  background: hsl(226, 11%, 45%);
  position: relative;
  padding: 24px;
  color: hsl(0, 0%, 100%);
}
.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: #ff4173;
}
.dashboard-widget__indicator--yellow::after {
  background: #faed3c;
}
.dashboard-widget__amount-mark {
  width: 24px;
  line-height: 24px;
  background: #34a156;
  color: hsl(0, 0%, 100%);
  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 hsl(225, 12%, 77%);
  border-color: hsl(226, 11%, 45%);
}
.dashboard-widget__activity-item a {
  color: hsl(0, 0%, 100%);
}
.dashboard-widget dl {
  margin: 0;
}
.dashboard-widget .collapsed .icon-minus {
  display: none;
}
.dashboard-widget .collapsed .icon-plus {
  display: flex;
}
.dashboard-widget .is-expanded .icon-minus {
  display: flex;
}
.dashboard-widget .is-expanded .icon-plus {
  display: none;
}
.dashboard-widget--inactive {
  position: relative;
  color: hsl(225, 25%, 10%);
}
.dashboard-widget--inactive .dashboard-widget__title {
  background: hsl(225, 12%, 77%);
}
.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 {
  -webkit-text-decoration: none;
  text-decoration: none;
}

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

.inline-edit__view-mode {
  line-height: 48px;
}
.inline-edit__edit-mode .inline-edit__field {
  padding-right: 96px;
  border-color: #101466;
}
.inline-edit__edit-mode .inline-edit__field.error {
  padding-right: 96px;
}
.inline-edit__controls {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
.inline-edit__controls .button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  border-left: 1px solid hsl(225, 12%, 77%);
}

.esim__heading {
  width: 100%;
  height: 64px;
  border-color: hsl(240, 20%, 96%);
}
.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: hsl(240, 20%, 96%);
  border: 1px solid hsl(240, 20%, 96%);
  padding: 8px 0;
}
.error .attachments__file {
  background: #ffeff4;
  border: 1px solid #ff4173;
}
.attachments--selected.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #ff4173;
  font-size: 14px;
  line-height: 20px;
}
.attachments--selected .attachments__name {
  color: hsl(225, 25%, 10%);
  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: hsl(225, 25%, 10%);
  padding: 8px 16px;
}
.attachments--selected .attachments__icon::before {
  font-size: 24px !important;
  content: "\f1035";
}

/**
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: #000f3c;
  display: block;
  width: 100%;
  padding: 0 16px;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(226, 11%, 45%);
  border-radius: 3px;
  font-family: "TelenorEvolutionUI", Arial, Helvetica, sans-serif;
  height: 48px;
  line-height: normal;
  transition: border-color 1s;
  text-align: right;
  padding-right: 48px;
}
.form__field--currency input::-moz-placeholder {
  color: hsl(225, 12%, 77%);
}
.form__field--currency input::placeholder {
  color: hsl(225, 12%, 77%);
}
.form__field--currency input:hover {
  border-color: #1920a4;
}
.form__field--currency input:focus {
  border-color: #101466;
}
.form__field--currency input[disabled] {
  background: hsl(225, 12%, 77%);
  border-color: hsl(225, 12%, 77%);
}
.form__field--currency input[disabled]::-moz-placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field--currency input[disabled]::placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field--currency input:-moz-placeholder-shown + label {
  color: hsl(225, 12%, 77%);
}
.form__field--currency input:placeholder-shown + label {
  color: hsl(225, 12%, 77%);
}
.form__field--currency input:-ms-input-placeholder + label {
  color: hsl(225, 12%, 77%);
}
.form__field--currency label {
  position: absolute;
  left: calc(100% - 42px);
  top: 24px;
  color: #000f3c;
  transform: translate(0, -50%);
  text-align: left;
  font-size: 18px;
  line-height: 48px;
}
.form__field--currency.error input {
  background: #ffeff4;
  border-color: #ff4173;
}
.form__field--currency.error input::-moz-placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field--currency.error input::placeholder {
  color: hsl(226, 11%, 45%);
}
.form__field--currency.error input:-moz-placeholder-shown + label {
  color: hsl(226, 11%, 45%);
}
.form__field--currency.error input:placeholder-shown + label {
  color: hsl(226, 11%, 45%);
}
.form__field--currency.error input:-ms-input-placeholder + label {
  color: hsl(226, 11%, 45%);
}
.form__field--currency.error::after {
  content: attr(data-error);
  border-bottom: 1px solid #ff4173;
  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: "\f1078";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.data-collection .opener.expanded::after {
  font-size: 16px !important;
  content: "\f1063";
}
.data-collection .autocomplete__item {
  width: 100%;
  text-align: left;
}
.data-collection .autocomplete__item:hover {
  background-color: hsl(240, 20%, 96%);
}
.data-collection .error-absolute::after {
  position: absolute;
}

.service-block .carousel__prev, .service-block .carousel__next {
  width: 40px;
  position: static;
  background: hsl(240, 20%, 96%);
  border-radius: 3px;
  transform: translate(0);
  border: 0;
  color: hsl(225, 25%, 10%);
}
.service-block .carousel__prev:hover, .service-block .carousel__next:hover {
  color: hsl(226, 11%, 45%);
}

.date-valid-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
}
.date-valid-view .point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.date-valid-view .point__start {
  background-color: #00c8ff;
  box-shadow: 0 0 0 2px hsl(0, 0%, 100%), 0 0 8px 2px rgba(0, 200, 255, 0.25);
  position: relative;
}
.date-valid-view .point__end {
  background-color: hsl(0, 0%, 100%);
  border: 2px solid hsl(225, 12%, 77%);
}
.date-valid-view .line {
  width: 2px;
  height: 60px;
  background-color: #00c8ff;
  margin-bottom: 4px;
  border-radius: 0 0 3px 3px;
}

.asset-type:hover .asset-type__wrapper {
  border-color: #000a26;
}
.asset-type:hover .asset-type__arrow {
  color: #000a26;
}
.asset-type__icon-holder {
  width: 64px;
  height: 64px;
  border-radius: 0 50% 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.asset-link-block--warning {
  border-color: #ff9a1f;
}
.asset-link-block__indicator img {
  width: 24px;
  height: 24px;
}
.asset-link-block__img-holder {
  width: 48px;
  height: 48px;
}

.sikker-surf-widget__counter {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
}
.sikker-surf-widget__image {
  position: absolute;
  left: -30px;
  top: -43px;
}
.sikker-surf-widget--gap {
  gap: 0 48px;
}
.sikker-surf-subscription {
  display: grid;
  grid-template-areas: "icon name indicator" "icon description description" "control control control";
  grid-template-columns: auto 1fr auto;
}
.sikker-surf-subscription__icon {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: icon;
  align-self: start;
}
.sikker-surf-subscription__indicator {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: indicator;
  padding-top: 12px;
}
.sikker-surf-subscription__indicator img {
  width: 24px;
  height: 24px;
}
.sikker-surf-subscription__indicator span {
  border-radius: 50%;
  overflow: hidden;
}
.sikker-surf-subscription__name {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: name;
}
.sikker-surf-subscription__description {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-area: description;
}
.sikker-surf-subscription__control {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: control;
  min-width: 0;
  max-width: 100%;
}
.sikker-surf-card__icon {
  padding: 20px;
  border-radius: 50%;
}
.sikker-surf-card::after {
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
}

@keyframes dropPopup {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.b2b-login__context-popup-root {
  position: relative;
}
.b2b-login__context-popup-trigger {
  border-radius: 50%;
}
.b2b-login__context-popup {
  max-width: 295px;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  z-index: 100;
  animation: 0.1s ease-out dropPopup;
}

.b2b-login__decoration {
  height: 96px;
  background-position: 50% 81%;
  background-size: cover;
  background-repeat: no-repeat;
}
.b2b-login__block {
  transform: translateY(-64px);
  margin-bottom: -32px;
}

.message__inner.fmc {
  background: #00c8ff;
  color: hsl(0, 0%, 100%);
}
.message__inner.fmc .message__close::before {
  color: hsl(0, 0%, 100%);
}
.message__inner.fmc .fmc--icon {
  vertical-align: top;
  width: 42px;
  height: 20px;
}
.message__inner.fmc .message__text {
  font-size: 16px;
  line-height: 22px;
}

.fmc-icon {
  width: 42px;
  height: 20px;
}
.fmc-icon__bar {
  border: 1px solid #19aaf8;
  background-color: hsl(0, 0%, 100%);
  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;
  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 {
  animation-fill-mode: forwards;
  animation-name: timers-15;
  animation-duration: 3s;
  animation-iteration-count: 1;
}
@keyframes timers-15 {
  0% {
    transform: translateY(6.6666666667%);
  }
  6.6666666667% {
    transform: translateY(0%);
  }
  13.3333333333% {
    transform: translateY(-6.6666666667%);
  }
  20% {
    transform: translateY(-13.3333333333%);
  }
  26.6666666667% {
    transform: translateY(-20%);
  }
  33.3333333333% {
    transform: translateY(-26.6666666667%);
  }
  40% {
    transform: translateY(-33.3333333333%);
  }
  46.6666666667% {
    transform: translateY(-40%);
  }
  53.3333333333% {
    transform: translateY(-46.6666666667%);
  }
  60% {
    transform: translateY(-53.3333333333%);
  }
  66.6666666667% {
    transform: translateY(-60%);
  }
  73.3333333333% {
    transform: translateY(-66.6666666667%);
  }
  80% {
    transform: translateY(-73.3333333333%);
  }
  86.6666666667% {
    transform: translateY(-80%);
  }
  93.3333333333% {
    transform: translateY(-86.6666666667%);
  }
  100% {
    transform: translateY(-93.3333333333%);
  }
}

.animate-text {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  display: none;
  color: hsl(226, 11%, 45%);
}

.animate-text-hide {
  display: inline-block;
  overflow: hidden;
  color: hsl(226, 11%, 45%);
}

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

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

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

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

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

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

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

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

.fmc-animation-bar-full .bar-1 {
  animation: bar1 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-1 .fmc-bar {
  animation: longColorCurrent1 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-1 .animation-percent {
  animation: fmcPercent1 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-2 {
  animation: bar2 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-2 .fmc-bar {
  animation: longColorCurrent2 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-2 .animation-percent {
  animation: fmcPercent2 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-3 {
  animation: bar3 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-3 .fmc-bar {
  animation: longColorCurrent3 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-3 .animation-percent {
  animation: fmcPercent3 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-4 {
  animation: bar4 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-4 .fmc-bar {
  animation: longColorCurrent4 7.5s ease-in-out;
  animation-iteration-count: 2;
}
.fmc-animation-bar-full .bar-4 .animation-percent {
  animation: fmcPercent4 7.5s ease-in-out;
  animation-iteration-count: 2;
}
@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 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 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 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 longColorCurrent1 {
  13% {
    background-color: hsl(240, 20%, 96%);
  }
  20% {
    background-color: #ffeff4;
  }
  33% {
    background-color: #ffeff4;
  }
  40% {
    background-color: hsl(240, 20%, 96%);
  }
}
@keyframes longColorCurrent2 {
  33% {
    background-color: hsl(240, 20%, 96%);
  }
  40% {
    background-color: #fdfdc9;
  }
  53% {
    background-color: #fdfdc9;
  }
  60% {
    background-color: hsl(240, 20%, 96%);
  }
}
@keyframes longColorCurrent3 {
  53% {
    background-color: hsl(240, 20%, 96%);
  }
  60% {
    background-color: #a5cdb9;
  }
  73% {
    background-color: #a5cdb9;
  }
  80% {
    background-color: hsl(240, 20%, 96%);
  }
}
@keyframes longColorCurrent4 {
  73% {
    background-color: hsl(240, 20%, 96%);
  }
  80% {
    background-color: #00c8ff;
  }
  93% {
    background-color: #00c8ff;
  }
  100% {
    background-color: hsl(240, 20%, 96%);
  }
}
@keyframes fmcPercent1 {
  13% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
  20% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  33% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  40% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
}
@keyframes fmcPercent2 {
  33% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
  40% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  53% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  60% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
}
@keyframes fmcPercent3 {
  53% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
  60% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  73% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  80% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
}
@keyframes fmcPercent4 {
  73% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
  80% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  93% {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
  100% {
    color: hsl(226, 11%, 45%);
    font-weight: normal;
  }
}

@keyframes fmcPercent {
  to {
    color: hsl(225, 25%, 10%);
    font-weight: bold;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
    color: hsl(225, 25%, 10%);
  }
}
@keyframes typingHide {
  from {
    visibility: hidden;
    max-width: 0;
  }
  to {
    visibility: hidden;
    max-width: 0;
  }
}
@keyframes moreWidth {
  to {
    width: 40%;
    max-width: 40%;
  }
}
@keyframes lessWidth {
  to {
    width: 20%;
    max-width: 20%;
  }
}
.light-border--top {
  border-top: 1px solid rgba(0, 15, 60, 0.1);
}

.light-border--bottom {
  border-bottom: 1px solid rgba(0, 15, 60, 0.1);
}

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

.fmc--message {
  text-align: left;
  color: hsl(0, 0%, 100%);
  background-color: #00c8ff;
  width: 100%;
  border: 0;
  transition: background 0.2s ease-in-out;
  margin-bottom: 32px;
}
.fmc--message:hover {
  background-color: rgba(0, 200, 255, 0.9);
  cursor: pointer;
}

.survey.comments-visible .survey__field {
  max-height: 60em;
}
.survey__content {
  max-height: 60em;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.6s linear;
}
.survey--like-sent .survey__content, .survey--dislike-sent .survey__content, .comments-visible .survey__content {
  max-height: 0;
  opacity: 0;
}
.survey__field {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s linear;
}
.survey__form-field {
  min-height: 104px;
}
.survey__like-text, .survey__dislike-text {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height, opacity 0.6s linear;
}
.survey--like-sent .survey__like-text {
  max-height: 60em;
  opacity: 1;
}
.survey--dislike-sent .survey__dislike-text {
  max-height: 60em;
  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: #00c8ff;
  border: 2px solid #00c8ff;
  border-radius: 50%;
  z-index: 1;
  display: flex;
  justify-content: 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-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 hsl(225, 12%, 77%);
  background: hsl(240, 20%, 96%);
  padding: 24px;
  overflow-x: scroll;
}

.sidemenu__opener {
  position: relative;
}
.sidemenu__opener:after {
  font-size: 16px !important;
  content: "\f101d";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.sidemenu:checked ~ .sidemenu__opener:after {
  font-size: 16px !important;
  content: "\f1020";
}
.sidemenu__content {
  max-height: 0;
  overflow: hidden;
  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 iframe {
  aspect-ratio: 16/9;
  vertical-align: top;
}
.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;
  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;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.ytplayer-holder.ytplayer-fullwidth {
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
.ytplayer-holder.ytplayer-halfwidth {
  width: 50%;
}
.ytplayer-holder .ytplayer-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.stores, .stores__header {
  position: sticky;
  top: 0;
  z-index: 2;
}
.stores__shop:not(:last-child), .stores__shop--active .stores__shop {
  border-bottom: 1px solid hsl(225, 12%, 77%);
  padding-bottom: 24px;
}
.stores__map {
  height: 100%;
  width: 100%;
}
.stores__search input[type=search] {
  border: 1px solid #000f3c;
  border-radius: 24px;
}
.stores__search input[type=search]:focus {
  border: 1px solid #2028cd;
}
.stores__my-location {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.stores__show-all-button span {
  color: #2028cd;
}
.stores .address-complete__content {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
}

.coverage-map__settings-wrapper {
  z-index: 1;
  position: absolute;
  top: 16px;
  right: 16px;
  overflow-y: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: hsl(0, 0%, 100%);
  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: -moz-min-content;
  height: min-content;
  width: 296px;
}
.coverage-map__opacity-pointer {
  transform: translateY(50%);
}
.coverage-map__map-wrapper {
  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;
  transform: translate(-50%, -100%);
  background-color: hsl(0, 0%, 100%);
  padding: 16px;
  overflow-y: auto;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  font-size: 14px;
  line-height: 20px;
}
.streamer__button {
  line-height: normal;
}
.streamer__button .button--icon {
  border-radius: 0;
}
.streamer__img {
  height: 32px;
}
.streamer--sticky {
  position: sticky;
  top: 0;
  z-index: 500;
}
.streamer .container {
  max-width: 1080px;
}

/**
name: Article block
type: Common
desc: >
	add class .article
examples:
  - name: Article block
    tmpl:
      include: ../article/[docs]/article.html
*/
.article__image-holder {
  height: 242px;
  min-height: 242px;
  overflow: hidden;
  position: relative;
}
.article__image {
  height: 100%;
  margin: 0;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/**
name: Slider block
type: Common
desc: >
	add class .slider or .article-slider
examples:
  - name: Slider block
    tmpl:
      include: ../slider/[docs]/slider.html
  - name: Article slider block
    tmpl:
      include: ../slider/[docs]/article-slider.html
*/
.slider {
  margin-right: -16px;
}
.slider .carousel__holder {
  min-height: auto;
}
.slider .carousel__item {
  align-items: start;
  min-width: 156px;
}
.slider .carousel__item img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.slider .carousel__item > div {
  width: 100%;
  max-width: 100%;
}
.slider .carousel__pagination {
  padding-top: 24px;
}
.slider .carousel__pagination-item.active span {
  background-color: #00c8ff;
}
.slider .button--icon.button-arrow {
  height: 40px;
  width: 40px;
  min-width: 40px;
  padding: 8px;
  border: 0;
  background: #b4ffff;
}
.slider .button--icon.button-arrow .button__label {
  font-size: 16px;
  line-height: 24px;
  color: #2028cd;
  display: block;
  height: 24px;
}
.slider .button--icon.button-arrow::before {
  line-height: 24px;
}
.slider .button--icon.button-arrow:active {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.slider .button--icon.button-arrow:hover {
  background: #5dffff;
  border-color: #5dffff;
  color: #2028cd;
}
.slider .button--icon.button-arrow .icon--right:before {
  left: 0;
}
.article-slider .carousel__wrapper, .slider .carousel__wrapper, .product-slider .carousel__wrapper {
  width: 100%;
}
.article-slider .carousel__holder, .slider .carousel__holder, .product-slider .carousel__holder {
  min-height: auto;
  height: 100%;
}
.article-slider .carousel__prev, .article-slider .carousel__next, .slider .carousel__prev, .slider .carousel__next, .product-slider .carousel__prev, .product-slider .carousel__next {
  min-width: 40px;
  max-width: 40px;
  border: none;
  background-color: #b4ffff;
  position: absolute;
  transition: none;
  top: 50%;
  transform: translate(-50%, -50%);
}
.article-slider .carousel__prev .button__label, .article-slider .carousel__next .button__label, .slider .carousel__prev .button__label, .slider .carousel__next .button__label, .product-slider .carousel__prev .button__label, .product-slider .carousel__next .button__label {
  color: #2028cd;
}
.article-slider .carousel__prev .button__label::before, .article-slider .carousel__next .button__label::before, .slider .carousel__prev .button__label::before, .slider .carousel__next .button__label::before, .product-slider .carousel__prev .button__label::before, .product-slider .carousel__next .button__label::before {
  transition: 0s;
}
.article-slider .carousel__prev:hover, .article-slider .carousel__next:hover, .slider .carousel__prev:hover, .slider .carousel__next:hover, .product-slider .carousel__prev:hover, .product-slider .carousel__next:hover {
  border: none;
  background-color: #5dffff;
}
.article-slider .carousel__prev:active, .article-slider .carousel__next:active, .slider .carousel__prev:active, .slider .carousel__next:active, .product-slider .carousel__prev:active, .product-slider .carousel__next:active {
  border: none;
  background-color: #2deeee;
}
.article-slider .carousel__prev:disabled, .article-slider .carousel__next:disabled, .slider .carousel__prev:disabled, .slider .carousel__next:disabled, .product-slider .carousel__prev:disabled, .product-slider .carousel__next:disabled {
  visibility: hidden;
}
.article-slider .carousel__prev, .slider .carousel__prev, .product-slider .carousel__prev {
  left: 100%;
}
.article-slider .carousel__next, .slider .carousel__next, .product-slider .carousel__next {
  left: 0;
}
.article-slider .carousel__side-col--left, .slider .carousel__side-col--left, .product-slider .carousel__side-col--left {
  left: 0;
}
.article-slider .carousel__side-col--right, .slider .carousel__side-col--right, .product-slider .carousel__side-col--right {
  right: 0;
}

.article-slider {
  overflow: auto;
  margin-right: -16px;
}
.article-slider .carousel__side-col {
  height: 242px;
  max-height: 242px;
}
.article-slider .carousel__item {
  min-width: 100%;
}
.article-slider .carousel__item--previous, .article-slider .carousel__item--next {
  min-width: 148px;
}
.article-slider .carousel__item .article__image {
  height: 242px;
  max-height: 242px;
  transition: height 1.5s, max-height 1.5s;
}
.article-slider .carousel__item--previous .article__image, .article-slider .carousel__item--next .article__image {
  height: 210px;
  max-height: 210px;
  min-width: auto;
}
.article-slider .carousel__pagination {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
}

.product-slider .product-block__image-holder {
  height: 242px;
  max-height: 242px;
}
.product-slider .carousel__side-col {
  height: 242px;
  max-height: 242px;
}
.product-slider .carousel__item {
  min-width: 100%;
}
.product-slider .carousel__item .product-block__image {
  height: 242px;
  transition: transform 0.5s ease-in-out, height 0.2s ease-in-out;
}
.product-slider .carousel__item--previous, .product-slider .carousel__item--next {
  min-width: 148px;
}
.product-slider .carousel__item--previous .product-block__image, .product-slider .carousel__item--next .product-block__image {
  height: 210px;
  width: auto;
}
.product-slider .carousel__pagination {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
}
.product-slider .carousel__pagination-item span {
  background-color: hsl(0, 0%, 100%);
}
.product-slider .carousel__pagination-item.active span {
  background-color: #00c8ff;
}
.slider.slider--fullwidth .carousel {
  overflow: visible;
}
.slider.slider--fullwidth .carousel__holder {
  width: auto;
}
.slider.slider--fullwidth .carousel__item {
  width: 100%;
  min-width: 100%;
}
.slider.slider--fullwidth .carousel__item--active {
  z-index: 3;
}
.slider.slider--fullwidth .carousel__item--active .carousel__item-text {
  display: block;
}
.slider.slider--fullwidth .carousel__item--previous, .slider.slider--fullwidth .carousel__item--next {
  z-index: 0;
}
.slider.slider--fullwidth .carousel__item--previous .carousel__item-text, .slider.slider--fullwidth .carousel__item--next .carousel__item-text {
  display: none;
}
.slider.slider--fullwidth .carousel__item--previous .carousel__img img, .slider.slider--fullwidth .carousel__item--next .carousel__img img {
  max-height: 210px;
  min-height: auto;
  transform: translate(0%, -50%);
}
.slider.slider--fullwidth .carousel__item--previous .carousel__img img {
  left: auto;
  right: 0;
}
.slider.slider--fullwidth .carousel__item--next .carousel__img img {
  left: 0;
  right: auto;
}
.slider.slider--fullwidth .carousel .carousel__img {
  position: relative;
  width: 100%;
  max-height: 240px;
  min-height: 240px;
  height: 240px;
  overflow: hidden;
}
.slider.slider--fullwidth .carousel img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: auto;
  height: 100%;
  max-height: 240px;
  transition: height 0.5s, max-height 0.5s;
  pointer-events: none;
}
.slider.slider--fullwidth .carousel .carousel__side-col {
  max-height: 240px;
  height: 240px;
  position: relative;
}

.animated.slider .carousel__item:nth-child(1) {
  transition-delay: 0s;
  transition-duration: 1s;
}

.animated.slider .carousel__item:nth-child(2) {
  transition-delay: 0.25s;
  transition-duration: 0.75s;
}

.animated.slider .carousel__item:nth-child(3) {
  transition-delay: 0.5s;
  transition-duration: 0.5s;
}

.animated.slider .carousel__item:nth-child(4) {
  transition-delay: 0.75s;
  transition-duration: 0.25s;
}

.animated--init.slider .carousel__item {
  visibility: hidden;
  opacity: 0.5;
  transform: translate(96px, 0);
}
.animated.slider .carousel__item {
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  transform: translate(0, 0);
  opacity: 1;
}
.animated .button--icon.button-arrow {
  visibility: hidden;
}
.animated .button--icon.button-arrow .button__label::after {
  display: none;
}
.animated .button--icon.button-arrow .button__label::before {
  display: none;
}
.animated .carousel__item:hover .button--icon.button-arrow {
  visibility: visible;
}
.animated .carousel__item:hover .button--icon.button-arrow .button__label:after {
  animation: slideIn 0.5s forwards;
  display: block;
}
.animated .carousel__item:hover .button--icon.button-arrow .button__label::before {
  display: block;
}
.drift-information__img-block img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 280px;
}
.drift-information__found-issue {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1490196078);
}

.sticky-bar {
  position: sticky;
  top: 0;
  z-index: 9;
}
.sticky-bar__list {
  overflow-x: auto;
  overflow-y: hidden;
}
.sticky-bar__shadow {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}
.sticky-bar .sticky-bar__item:nth-of-type(1) {
  animation-delay: 0.4s;
}

.sticky-bar .sticky-bar__item:nth-of-type(2) {
  animation-delay: 0.8s;
}

.sticky-bar .sticky-bar__item:nth-of-type(3) {
  animation-delay: 1.2s;
}

.sticky-bar .sticky-bar__item:nth-of-type(4) {
  animation-delay: 1.6s;
}

.sticky-bar .sticky-bar__item:nth-of-type(5) {
  animation-delay: 2s;
}

.sticky-bar .sticky-bar__item:nth-of-type(6) {
  animation-delay: 2.4s;
}

.sticky-bar .sticky-bar__item:nth-of-type(7) {
  animation-delay: 2.8s;
}

.sticky-bar .sticky-bar__item:nth-of-type(8) {
  animation-delay: 3.2s;
}
.help-category__header {
  padding: 24px;
  z-index: 8;
}
.help-category__card .help-category__header::after {
  opacity: 0;
  transition: opacity 0.25s;
}
.help-category__card .help-category__header:hover {
  padding-left: 16px;
  padding-right: 32px;
  transition: padding-left 0.25s, padding-right 0.25s;
}
.help-category__card .help-category__header:hover:after {
  font-size: 16px !important;
  content: "\f1005";
  color: #00c8ff;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  opacity: 1;
}
.help-category__header, .help-category__list {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
.help-category__list {
  z-index: 7;
  margin-top: -8px;
}
.help-category__list .list-button {
  text-align: center;
}
.help-category__card {
  transition: bottom 1s, opacity 1s;
}
.help-category__button {
  height: 40px;
  padding: 8px 24px;
}
.help-category__button .button__label {
  font-size: 16px;
  line-height: 24px;
}
.help-category .accordion__content {
  padding: 0 24px;
  transition: 0.3s padding;
}
.help-category .accordion:checked ~ .accordion__content {
  padding: 24px 24px 8px;
}
.help-category .accordion ~ .help-category__header:after {
  font-size: 16px !important;
  content: "\f101d";
}
.help-category .accordion:checked ~ .help-category__header:after {
  font-size: 16px !important;
  content: "\f1020";
}
.upload__attachments {
  border: 1px dashed hsl(226, 11%, 45%);
  border-radius: 3px;
}
.upload__attachments label {
  color: #2028cd;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.article-card {
  transition: bottom 1s, opacity 1s;
}
.article-card__image-holder {
  height: auto;
  min-height: 242px;
}
.article-card__image {
  width: 100%;
  height: auto;
}
@media (min-width: 480px) {
  .datepicker--range [class*=col-] {
    flex: auto;
    width: 50%;
    max-width: 50%;
  }
}
@media (min-width: 768px) {
  .container {
    width: calc(100% - 48px);
    max-width: 768px;
  }
  .burger-menu__container {
    width: calc(100% - 48px);
    max-width: 768px;
  }
  .quote-block--content-holder {
    background-position-x: left;
  }
  .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% - 48px);
    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: 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 hsl(225, 12%, 77%);
  }
  .desktop-border--left {
    border-left: 1px solid hsl(225, 12%, 77%);
  }
  .desktop-border--right {
    border-right: 1px solid hsl(225, 12%, 77%);
  }
  .desktop-border--bottom {
    border-bottom: 1px solid hsl(225, 12%, 77%);
  }
  .desktop-border--top {
    border-top: 1px solid hsl(225, 12%, 77%);
  }
  .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 hsl(240, 20%, 96%) !important;
  }
  .desktop-border-split-top {
    border-top: 2px solid hsl(240, 20%, 96%) !important;
  }
  .desktop-rel {
    position: relative !important;
  }
  .desktop-ps {
    position: static !important;
  }
  .desktop-text-size--48 {
    font-size: 48px;
    line-height: 56px;
  }
  .desktop-text-size--40 {
    font-size: 40px;
    line-height: 48px;
  }
  .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-light {
    font-weight: 300;
  }
  .desktop-text-regular {
    font-weight: 400;
  }
  .desktop-text-medium {
    font-weight: 500;
  }
  .desktop-text-bold {
    font-weight: 700;
  }
  .desktop-text-extra-bold {
    font-weight: 800;
  }
  .desktop-text-normal {
    font-style: normal;
  }
  .desktop-text-italic {
    font-style: italic;
  }
  .col-md {
    flex: 1;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    flex: auto;
    width: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-md-2 {
    flex: auto;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-md-3 {
    flex: auto;
    width: 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: auto;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-md-5 {
    flex: auto;
    width: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-md-6 {
    flex: auto;
    width: 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: auto;
    width: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-md-8 {
    flex: auto;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-md-9 {
    flex: auto;
    width: 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: auto;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-md-11 {
    flex: auto;
    width: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-md-12 {
    flex: auto;
    width: 100%;
    max-width: 100%;
  }
  .col-md-auto {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-stretch {
    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 {
    align-items: flex-start;
  }
  .grid-row-md--middle {
    align-items: center;
  }
  .grid-row-md--baseline {
    align-items: baseline;
  }
  .grid-row-md--bottom {
    align-items: flex-end;
  }
  .grid-row-md--stretch {
    align-items: stretch;
  }
  .grid-row-md--left {
    justify-content: flex-start;
  }
  .grid-row-md--center {
    justify-content: center;
  }
  .grid-row-md--right {
    justify-content: flex-end;
  }
  .grid-row-md--between {
    justify-content: space-between;
  }
  .grid-row-md--around {
    justify-content: space-around;
  }
  .dir-md--row {
    flex-direction: row;
  }
  .dir-md--row-reverse {
    flex-direction: row-reverse;
  }
  .dir-md--column {
    flex-direction: column;
  }
  .dir-md--column-reverse {
    flex-direction: column-reverse;
  }
  .col-md--top {
    align-self: flex-start;
  }
  .col-md--middle {
    align-self: center;
  }
  .col-md--baseline {
    align-self: baseline;
  }
  .col-md--bottom {
    align-self: flex-end;
  }
  .col-md--stretch {
    align-self: stretch;
  }
  .col-md--first {
    order: -1;
  }
  .col-md--last {
    order: 1;
  }
  .col-md--ordered {
    order: 0;
  }
  .collapse__target.desktop-visible {
    display: block !important;
    height: auto !important;
  }
  .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: hsl(226, 11%, 45%);
  }
  .accordion--only-desktop ~ .accordion__content {
    overflow: hidden;
    animation: accordionClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
  }
  .accordion--only-desktop:checked ~ .accordion__content {
    overflow: hidden;
    animation: accordionOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
  }
  .accordion--without-desktop ~ .accordion__content {
    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;
  }
  .form__search__large .form__search-clear {
    right: 32px;
  }
  .form__search__large input[type=search] {
    padding-left: 88px;
    padding-right: 72px;
  }
  .form__search__large.error::before, .form__search__large::before {
    left: 48px;
  }
  .form__search__large.error::after {
    margin-left: 48px;
    padding-top: 8px;
  }
  .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 {
    justify-content: center;
    padding-bottom: 24px;
  }
  .modal-box__content {
    width: 528px;
    display: block;
    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 {
    transition-delay: 0s;
  }
  .dialog-modal-box {
    justify-content: center;
    align-items: center;
    padding-bottom: 24px;
  }
  .dialog-modal-box__content {
    width: 528px;
    display: block;
    transform: translate(0, -100%);
  }
  .dialog-modal-box__content--wide {
    width: 1080px;
  }
  .dialog-modal-box__content[aria-busy=true] {
    max-height: 350px;
    height: 350px;
  }
  .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;
    visibility: visible;
  }
  .datatable--filters {
    position: relative;
    transform: none;
    display: block;
    overflow: inherit;
    padding: 0;
    z-index: 5;
    visibility: visible;
  }
  .datatable--filters > .modal-box__content {
    width: 100%;
    overflow: inherit;
    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;
    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;
  }
  .carousel--slider .carousel__item {
    margin-right: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  .carousel--slider .carousel__item--previous .carousel__item-text, .carousel--slider .carousel__item--next .carousel__item-text {
    display: block;
  }
  .form__datepicker input {
    padding-right: 48px;
  }
  .address-complete__content {
    position: absolute;
    top: 88px;
    min-width: 280px;
    left: 0;
    right: 0;
    border-radius: 3px;
  }
  .address-complete--full .address-complete__content {
    top: 80px;
  }
  .context-popup__option {
    border: 0;
    background: none;
    height: auto;
    min-width: 0;
    color: hsl(225, 25%, 10%);
    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;
    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;
    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;
    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;
  }
  .burger-menu__content {
    width: 480px;
    min-width: 480px;
    max-width: 480px;
  }
  .burger-menu__navigation {
    width: 480px;
    min-width: 480px;
  }
  .burger-menu__container {
    width: 100%;
    max-width: 100%;
  }
  .burger-menu .dialog-modal-box__content {
    transform: translate(-100%, 0);
    opacity: 1;
    transition: transform 0.4s ease-out;
    width: 480px;
    overflow-x: hidden;
  }
  .burger-menu__animated--forward .burger-menu__animated-item {
    animation: burger-menu-animation-forward-desktop 0.5s ease-in-out;
  }
  .burger-menu__animated--back .burger-menu__animated-item {
    animation: burger-menu-animation-back-desktop 0.5s ease-in-out;
  }
  .burger-menu__animated--forward.burger-menu__content, .burger-menu__animated--back.burger-menu__content {
    width: 960px;
    min-width: 960px;
    max-width: 960px;
  }
  .burger-menu__animated--forward .burger-menu__non-animated-item--desktop, .burger-menu__animated--back .burger-menu__non-animated-item--desktop {
    animation: none;
  }
  .header__wrapper {
    height: 72px;
  }
  .header__wrapper--without-navigation {
    height: 64px;
  }
  .header__search__result {
    top: 72px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .header__search-toggled {
    position: relative;
  }
  .header__search-toggled .header__search {
    min-width: auto;
    padding: 0;
  }
  .header__search-toggled .header__search .form__search input[type=search] {
    background-color: hsl(0, 0%, 100%);
    transition: width 0.5s, min-width 0.5s;
  }
  .header__search-toggled--opened .header__search .form__search input[type=search] {
    min-width: 277px;
  }
  .header__menu {
    margin-left: -12px;
    margin-right: -12px;
  }
  .header__menu > [class*=col] {
    padding: 0 12px;
  }
  .header__toggled-elements.header__icons {
    width: auto;
    padding-right: 0;
  }
  .header__toggled-elements {
    transition: visibility 0.3s, opacity 0.3s;
  }
  .header__toggled-elements--hidden {
    width: auto;
    overflow: inherit;
  }
  .header__toggled-elements--hidden.header__icons {
    width: auto;
  }
  .header__menu-dropdown {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    bottom: -16px;
  }
  .header__menu-item--parent {
    position: relative;
  }
  .header__logo svg {
    height: 40px;
  }
  .header__logo {
    height: 40px;
  }
  .header__login::before {
    display: none;
  }
  .header__login::after {
    display: block;
  }
  .header__login-popup {
    max-width: 336px;
    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;
    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 .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__holder {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 32px;
    margin-right: 32px;
  }
  .usp-block__holder .carousel {
    overflow: visible;
  }
  .usp-block__holder .carousel__holder .carousel__item .usp-block__slide-content {
    padding-left: 64px;
    padding-right: 64px;
  }
  .usp-block__image {
    height: 80px;
    width: 80px;
  }
  .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%;
    transform: translate(0, -50%);
  }
  .banner-block--small {
    height: 204px;
  }
  .banner-block--small .visual-block__picture {
    height: 204px;
  }
  .banner-block--small .visual-block__picture img {
    position: absolute;
  }
  .banner-block--small .block-left-align {
    flex-direction: row-reverse;
  }
  .banner-block--small .block-centered .text-content-holder {
    position: absolute;
  }
  .video-banner-block {
    height: calc(100vh - 108px);
  }
  .video-banner-block[data-button-disabled=false] {
    height: calc(100vh - 132px);
  }
  .video-banner-block__text {
    writing-mode: horizontal-tb;
    rotate: none;
    right: auto;
    left: 0;
    width: 70%;
    height: auto;
  }
  .banner-container .grid-row .col-12.banner-block {
    transition: none;
  }
  .banner-container .grid-row .col-12.banner-block .banner-block__description {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }
  .banner-container.animated--init .grid-row .col-12.banner-block {
    opacity: 1;
    transform: translate(0, 0);
  }
  .banner-container.animated--init .grid-row .col-12.banner-block .banner-block__description {
    opacity: 0.5;
    transform: translate(0, 50px);
  }
  .banner-container.animated--init .grid-row .col-md-6.banner-block,
  .banner-container.animated--init .grid-row .col-md-4.banner-block:not(.banner-block__description) {
    opacity: 0.5;
    transform: translate(0, 50px);
  }
  .banner-container.animated .grid-row .col-12.banner-block .banner-block__description {
    opacity: 1;
    transform: translate(0, 0);
  }
  .banner-container.animated .grid-row > article:nth-of-type(1) .banner-block__description {
    transition-delay: 0.25s;
  }
  .banner-container.animated .grid-row > article:nth-of-type(2) .banner-block__description {
    transition-delay: 0.5s;
  }
  .banner-container.animated .grid-row > article:nth-of-type(3) .banner-block__description {
    transition-delay: 0.75s;
  }
  .banner-container.animated .grid-row > article:nth-of-type(4) .banner-block__description {
    transition-delay: 1s;
  }
  .banner-container.animated .grid-row > article:nth-of-type(5) .banner-block__description {
    transition-delay: 1.25s;
  }
  .banner-container.animated .grid-row > article:nth-of-type(6) .banner-block__description {
    transition-delay: 1.5s;
  }
  .cover-block {
    overflow: visible;
    height: 480px;
  }
  .cover-block .cover-block__holder {
    grid-template-rows: 48px auto;
    align-items: end;
    justify-items: end;
    place-items: end;
  }
  .cover-block .cover-block__graphical {
    grid-column: 6/span 7;
    grid-row: 2/span 1;
    margin-bottom: -32px;
    min-width: 100%;
  }
  .cover-block .cover-block__info {
    grid-column: 1/span 5;
    grid-row: 2/span 1;
  }
  .cover-block--has-image {
    height: auto;
  }
  .cover-block--has-image .badge {
    position: static;
    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 {
    width: auto;
  }
  .product-block__image-holder {
    height: 200px;
  }
  .product-block__image-holder--medium {
    height: 240px;
  }
  .product-block__full-image {
    height: 280px;
  }
  .product-block--large .splash--top-left,
  .product-block--large .splash--top-right {
    top: 56px;
  }
  .product-block--large .splash--top-right {
    right: 12px;
  }
  .product-block--large .product-block__image-holder {
    height: 380px;
  }
  .product-block--addition .product-block__video {
    min-height: auto;
    min-width: 100%;
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
  }
  .slider .product-block {
    width: auto;
  }
  .animated .product-block__image {
    transition: transform 0.5s ease-in-out, height 0.2s ease-in-out;
  }
  .animated .product-block__wrapper:hover .product-block__image {
    transform: scale(1.25);
  }
  .animated .product-block__wrapper:hover .product-block__image-wrapper {
    background-color: transparent;
  }
  .animated .product-block__wrapper:hover .product-block__image-wrapper::before {
    background-color: #000f3c;
    height: 75%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: product-block-img 0.25s ease-in-out;
    border-radius: 4px;
  }
  .animated .product-block__button-holder {
    visibility: visible;
  }
  .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;
    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;
  }
  .cover-element {
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .overlap__image {
    height: 100%;
    width: auto;
  }
  .overlap__image img {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
  }
  .overlap__image--left {
    top: 0;
    bottom: 0;
    left: -24px;
  }
  .overlap__image--left img {
    left: 0;
  }
  .overlap__image--right {
    top: 0;
    bottom: 0;
    left: auto;
    right: -24px;
  }
  .overlap__image--right img {
    right: 0;
  }
  .comparison-block__inner {
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }
  .comparison-block-col:not(:last-child) .compare-row {
    margin-right: -24px;
    padding-right: 24px;
  }
  .comparison-block__wrapper {
    width: auto;
    min-width: auto;
  }
  .header-block {
    max-height: 900px;
    min-height: calc(100vh - 188px);
  }
  .header-block__content {
    min-height: auto;
  }
  .overlap-block {
    min-height: 667px;
  }
  .overlap-block__description {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  .overlap-block__description--left {
    left: 0;
  }
  .overlap-block__description--right {
    right: 0;
  }
  .overlap-block__img {
    width: auto;
    height: 100%;
  }
  .overlap-block__map {
    min-height: 667px;
  }
  .carousel-block .carousel__holder {
    height: 504px;
  }
  .carousel-block .carousel__item {
    height: auto;
  }
  .carousel-block__image-holder {
    height: 504px;
  }
  .carousel-block__image-holder--small {
    height: 243px;
  }
  .carousel-block__image-holder video {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
  }
  .carousel-block__image-holder img {
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .subscription {
    width: 20%;
  }
  .subscription-border .selling-points::after {
    content: "";
  }
  .subscription__margin-bottom {
    margin-bottom: -48px;
  }
  .subscription-list .subscription-card {
    width: 388px;
    min-width: 388px;
    max-width: 388px;
  }
  .subscription-list .subscription-card__price {
    left: 32px;
  }
  .subscription-list .subscription-card__price--campaign {
    left: 32px;
  }
  .subscription-list .subscription-card__img {
    height: 128px;
  }
  .subscription-list .carousel__prev {
    left: 8px;
  }
  .subscription-list .carousel__next {
    right: 32px;
  }
  .subscription-list .carousel__pagination {
    padding-top: 24px;
  }
  .map-grid__list {
    padding: 0;
  }
  .search-popup {
    z-index: 1000;
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    margin: 0;
  }
  .login-content.modal-box__content {
    transform: none;
  }
  .login-content__logo {
    height: 48px;
  }
  .login-content__close-btn.button {
    right: 48px;
  }
  .login__b2c-page-logo {
    font-size: 72px;
    line-height: 88px;
    margin-bottom: 120px;
  }
  .newsletter--mobile-top::after {
    top: 50%;
  }
  .newsletter-content {
    margin: 0 40px;
  }
  .newsletter-visual {
    z-index: 0;
    top: 50%;
    translate: -50% -50%;
  }
  .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;
  }
  .filter__opener::after {
    font-size: 16px !important;
    content: "\f1078";
  }
  .filter__opener:hover {
    color: hsl(226, 11%, 45%);
  }
  .filter__header:checked ~ .filter__opener {
    margin-bottom: 8px;
  }
  .filter__header:checked ~ .filter__content {
    min-height: auto;
    transition: max-height 0.25s ease-in;
  }
  .filter__content {
    max-height: 0;
    position: static;
    min-height: auto;
    transition: max-height 0.15s ease-out;
  }
  .filter-colors-list:checked ~ label .filter-colors-list__label {
    box-shadow: 0 0 0 2px #2028cd;
  }
  .filter-colors-list__label {
    width: 48px;
    height: 48px;
    border: 12px solid hsl(0, 0%, 100%);
  }
  .filter-colors-list:checked ~ label .filter-colors-list__query-name {
    background: none;
    font-weight: normal;
  }
  .prequalification-banner.prequalification--has-foreground {
    margin-bottom: 64px;
  }
  .prequalification-banner.prequalification--has-foreground .prequalification-content-wrap {
    padding-bottom: none;
  }
  .prequalification-banner.prequalification--has-foreground .loader__overlay {
    height: calc(100% + 64px);
  }
  .prequalification-banner .prequalification-block__container {
    padding: 48px 0 64px;
  }
  .prequalification-banner .prequalification-block__heading {
    font-size: 40px;
    line-height: 48px;
    text-align: left;
  }
  .prequalification-banner .prequalification-block__preselected-address {
    align-items: start;
  }
  .prequalification-banner .prequalification-block .prequalification-form {
    margin-bottom: 0;
    margin-bottom: initial;
  }
  .prequalification-banner .prequalification-block .address-complete {
    padding-bottom: 96px;
    padding-bottom: 0;
    padding-bottom: initial;
  }
  .prequalification-banner .prequalification-block .search-adress-wrap {
    padding: 0;
    padding: initial;
    margin-left: 0;
    margin-left: initial;
    width: 50%;
  }
  .prequalification-banner .prequalification-block .manual-adress-wrap {
    width: 83.3333333333%;
    margin-left: 0;
    margin-left: initial;
  }
  .prequalification-banner .prequalification-block .manual-adress-wrap .address-submit-wrap {
    justify-content: left;
  }
  .prequalification-banner .prequalification-block .foreground-wrap {
    right: 0;
    top: 24px;
    width: 50%;
    height: 100%;
  }
  .prequalification-banner .legal-text {
    position: absolute;
    bottom: 24px;
    left: 48px;
  }
  .prequalification-banner .loader__overlay {
    z-index: 6;
  }
  .prequalification-block__heading {
    padding: 0;
    padding: initial;
  }
  .prequalification-block__container {
    padding: 48px 0;
  }
  .prequalification-block .manual-adress-wrap {
    width: 83.3333333333%;
    margin-bottom: 0;
    margin-bottom: initial;
    margin-left: auto;
    margin-right: auto;
  }
  .prequalification-block .search-adress-wrap {
    width: 66.6666666667%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0 !important;
  }
  .prequalification-block .teaser-text {
    padding: 0;
    padding: initial;
    text-align: left;
  }
  .prequalification-block .addition-text {
    padding-top: 24px;
    width: 66.6666666667%;
    margin-left: auto;
    margin-right: auto;
  }
  .order-summary {
    display: grid;
    grid-template-columns: 8fr 4fr;
    grid-template-rows: auto 1fr;
  }
  .order-summary__content {
    padding-right: 12px;
    grid-row-start: 1;
    grid-column-start: 1;
  }
  .order-summary__aside {
    padding-left: 12px;
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .order-summary__form {
    padding-right: 12px;
    grid-row-start: 2;
    grid-column-start: 1;
  }
  .fixed__image {
    grid-row: 1/3;
  }
  .fixed__aside {
    align-self: end;
  }
  .fixed__content {
    grid-column: 2;
  }
  .product-tooltip {
    top: 12px;
    right: 12px;
  }
  .device-visual .product-tooltip {
    top: 32px;
  }
  .recommended-colors-list .colors-list__item {
    height: 8px;
  }
  .recommended-colors-list .colors-list__label {
    width: 32px;
    height: 32px;
  }
  [data-anchor-content] {
    scroll-margin-top: 72px;
  }
  .anchor__dropdown {
    position: static;
    width: auto;
    display: block;
    box-shadow: none;
  }
  .help-me-choose {
    min-height: calc(100vh - 109px);
  }
  .help-me-choose--wizard-block {
    min-height: calc(100vh - 109px);
    padding-top: 196px;
  }
  .help-me-choose--back-link {
    top: 32px;
    left: 0;
  }
  .help-me-choose--granny-on-result {
    width: 800px;
    bottom: -70px;
    left: calc(50% - 400px);
  }
  .help-me-choose--granny {
    bottom: auto;
    top: 280px;
    animation-name: desktop-granny-animation;
    animation-delay: 1s;
    animation-duration: 1.5s;
  }
  .product__visual-holder {
    width: auto;
    min-width: auto;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    overflow: initial;
  }
  .product__visual {
    position: sticky;
    top: 0;
    transform: translateZ(0);
  }
  .product__visual .icon-holder {
    width: 64px;
    height: 64px;
  }
  .product__visual .carousel__prev, .product__visual .carousel__next {
    visibility: visible;
  }
  .product__visual .carousel__holder {
    min-height: 544px;
  }
  .product__visual .carousel__img {
    max-height: 544px;
  }
  .product__visual .carousel__pagination {
    padding-top: 32px;
  }
  .product .splash {
    top: 64px;
    margin-top: 8px;
    width: 160px;
    height: 160px;
  }
  .product .splash--top-left-indent-md {
    left: 24px;
  }
  .product .splash--top-left-indent-lg {
    margin-left: 8px;
    left: 64px;
  }
  .product .splash--top-right-indent-md {
    right: 24px;
  }
  .product .splash--top-right-indent-lg {
    margin-right: 8px;
    right: 64px;
  }
  .product .buttons-holder .col-6:first-child .button {
    padding: 0 24px;
  }
  .product .buttons-holder .col-6:last-child .button {
    padding: 0 24px;
  }
  .product .buttons-holder .col-md-6:first-child .button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .product .buttons-holder .col-md-6:last-child .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .modal-box--desktop-slider {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box--desktop-slider .modal-box__content {
    width: 594px;
    transform: translate(100%, 0);
    background: transparent;
  }
  .modal-box--desktop-slider.modal-box--is-open .modal-box__content {
    transform: translate(0, 0);
  }
  .modal-box--desktop-slider .slider__spacing {
    padding: 0 64px;
  }
  .modal-box--desktop-slider .slider__wrapper {
    min-height: 100%;
    overflow-y: auto;
  }
  .product-list__sticky-block {
    bottom: auto;
    top: 0;
    transform: translateY(-100%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  }
  .comparison-tool__select-labels {
    margin-bottom: -4px;
  }
  .comparison-tool__image-holder {
    height: 280px;
  }
  .subscriptions-block__subscriptions {
    margin-left: -12px;
    margin-right: -12px;
  }
  .subscriptions-block__image-col {
    position: absolute;
    top: 0;
    right: 0;
  }
  .subscriptions-block__image {
    height: 540px;
  }
  .subscriptions-block__img {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
  }
  .buy-back__sticky-item {
    position: sticky;
    transform: translate3d(0, 0, 0);
    bottom: 0;
    z-index: 9;
  }
  .mitid-auth-button {
    max-width: 411px;
  }
  .addons__img-wrapper {
    height: 266px;
  }
  .addons__img-wrapper img {
    min-height: auto;
    min-width: 100%;
    height: auto;
  }
  .addons__top-block {
    min-height: 268px;
  }
  .ex-ef-widget--without-desktop ~ .ex-ef-widget__opener {
    padding: 0;
    pointer-events: none;
  }
  .ex-ef-widget--only-desktop ~ .ex-ef-widget__opener::after {
    display: block;
  }
  .ex-ef-widget--without-desktop ~ .ex-ef-widget__opener::after {
    display: none;
  }
  .ex-ef-widget--only-desktop ~ .ex-ef-widget__content {
    overflow: hidden;
    animation: ex-ef-widgetClose 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
  }
  .ex-ef-widget--only-desktop:checked ~ .ex-ef-widget__content {
    overflow: hidden;
    animation: ex-ef-widgetOpen 0.3s cubic-bezier(0.865, 0.14, 0.095, 0.87) forwards;
  }
  .ex-ef-widget--without-desktop ~ .ex-ef-widget__content {
    animation: none;
    overflow: visible;
  }
  .hero-card__content {
    border-radius: 8px;
  }
  .hero-card--campaign .hero-card__content {
    border-radius: 0 8px 8px 8px;
  }
  .hero-card--campaign .hero-card__content .hero-card__header {
    border-radius: 10px;
  }
  .hero-card__content .hero-card__header {
    border-radius: 10px;
    width: 430px;
  }
  .hero-card__price {
    left: 32px;
  }
  .hero-card__price--campaign {
    left: 24px;
  }
  .hero-card__router {
    width: 430px;
  }
  .hero-card__img {
    height: 186px;
  }
  .hero-card__img--full-height {
    height: 236px;
  }
  .hero-card__img img {
    height: auto;
    width: 100%;
  }
  .internet-card {
    width: 388px;
    min-width: 388px;
    max-width: 388px;
  }
  .internet-card__price {
    left: 32px;
  }
  .internet-card__price--campaign {
    left: 32px;
  }
  .internet-card__img {
    height: 128px;
  }
  .hero-card__router label, .internet-card__router label {
    font-size: 14px;
    line-height: 20px;
  }
  .internet-cards-list .carousel__prev {
    left: 8px;
  }
  .internet-cards-list .carousel__next {
    right: 32px;
  }
  .internet-cards-list .carousel__pagination {
    padding-top: 0;
  }
  .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;
  }
  .link-block--arrow-center::after {
    top: 50%;
    transform: translateY(-50%);
  }
  .inline-edit__edit-mode {
    max-width: 280px;
  }
  .inline-edit__edit-mode.full-width {
    max-width: 100%;
  }
  .attachments__file {
    padding: 8px 0;
  }
  .attachments--selected.error::after {
    position: absolute;
  }
  .attachments__icon {
    padding: 12px 8px 12px 0;
  }
  .data-collection .columns {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-rule: hsl(225, 12%, 77%) 1px solid;
         column-rule: hsl(225, 12%, 77%) 1px solid;
    -moz-column-gap: 48px;
         column-gap: 48px;
  }
  .data-collection .search__popup {
    width: 100%;
    left: 0;
    right: 0;
    padding: 0 12px;
  }
  .asset-link-block__indicator {
    transform: translateX(-50%);
  }
  .asset-link-block__indicator img {
    width: 32px;
    height: 32px;
  }
  .sikker-surf-widget__counter {
    width: 192px;
  }
  .sikker-surf-widget__image {
    left: -32px;
    top: -15px;
  }
  .sikker-surf-subscription {
    grid-template-areas: "indicator icon name description control";
    grid-template-columns: auto auto 1fr 1fr 1.2fr;
    align-items: center;
  }
  .sikker-surf-subscription__indicator {
    transform: translateX(-50%);
    padding-top: 0;
  }
  .sikker-surf-subscription__indicator img {
    width: 32px;
    height: 32px;
  }
  .sikker-surf-subscription__indicator span {
    overflow: visible;
    overflow: initial;
  }
  .sikker-surf-card {
    right: 24px;
  }
  .b2b-login__context-popup-root--rearranged {
    left: 24px;
    bottom: 24px;
    margin-bottom: -8px;
  }
  .b2b-login__block {
    transform: translateY(-32px);
    margin-bottom: 0;
  }
  .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(0, 15, 60, 0.1);
  }
  .desktop-light-border--bottom {
    border-bottom: 1px solid rgba(0, 15, 60, 0.1);
  }
  .country-columns {
    -moz-columns: 3;
         columns: 3;
  }
  .sidemenu__content {
    max-height: 100%;
    overflow: visible;
  }
  .stores {
    height: 720px;
  }
  .stores__info {
    z-index: 1;
    position: absolute;
    top: 48px;
    bottom: 48px;
    left: 48px;
    width: 344px;
    overflow-y: auto;
  }
  .stores__show-all-button span {
    color: #000f3c;
  }
  .coverage-map__settings-wrapper--opened {
    left: auto;
  }
  .streamer__container {
    min-height: 48px;
  }
  .article {
    height: 100%;
  }
  .article__image-holder {
    height: 280px;
    max-height: 280px;
  }
  .slider {
    margin-right: auto;
  }
  .slider .carousel__pagination {
    padding-top: 0;
  }
  .article-slider .carousel, .slider .carousel, .product-slider .carousel {
    position: static;
  }
  .article-slider .carousel__holder, .slider .carousel__holder, .product-slider .carousel__holder {
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
  }
  .article-slider .carousel__prev, .article-slider .carousel__next, .slider .carousel__prev, .slider .carousel__next, .product-slider .carousel__prev, .product-slider .carousel__next {
    left: -50%;
  }
  .article-slider .carousel__prev, .slider .carousel__prev, .product-slider .carousel__prev {
    left: -50%;
  }
  .article-slider .carousel__next, .slider .carousel__next, .product-slider .carousel__next {
    left: -50%;
  }
  .article-slider .carousel__side-col, .slider .carousel__side-col, .product-slider .carousel__side-col {
    position: absolute;
    top: 0;
    height: 280px;
    max-height: 280px;
  }
  .article-slider .carousel__side-col--left, .slider .carousel__side-col--left, .product-slider .carousel__side-col--left {
    margin-left: 12px;
  }
  .article-slider .carousel__side-col--right, .slider .carousel__side-col--right, .product-slider .carousel__side-col--right {
    width: 8px;
  }
  .article-slider {
    margin-right: auto;
  }
  .article-slider .carousel__item {
    min-width: 239px;
  }
  .article-slider .carousel__item .article__image {
    height: 280px;
    max-height: 280px;
    transition: none;
  }
  .article-slider .carousel__item--previous .article__image, .article-slider .carousel__item--next .article__image {
    height: 100%;
    max-height: 100%;
  }
  .article-slider .carousel__pagination {
    padding-top: 48px;
  }
  .product-slider .product-block__image-holder {
    padding: 24px;
  }
  .product-slider .carousel__item {
    min-width: 239px;
  }
  .product-slider .carousel__item .product-block__image {
    height: 100%;
  }
  .slider.slider--fullwidth {
    min-width: 660px;
  }
  .slider.slider--fullwidth .carousel {
    overflow: hidden;
  }
  .slider.slider--fullwidth .carousel__wrapper {
    max-width: 600px;
  }
  .slider.slider--fullwidth .carousel__item--previous .carousel__img img, .slider.slider--fullwidth .carousel__item--next .carousel__img img {
    max-height: 420px;
  }
  .slider.slider--fullwidth .carousel .carousel__img {
    max-height: 450px;
    min-height: 450px;
    height: 450px;
  }
  .slider.slider--fullwidth .carousel img {
    max-height: 450px;
  }
  .slider.slider--fullwidth .carousel .carousel__side-col {
    max-height: 450px;
    height: 450px;
  }
  .animated--init.slider .carousel__item {
    transform: translate(0, 48px);
  }
  .drift-information__main-info {
    height: calc(100vh - 200px);
  }
  .drift-information__img-block img {
    height: calc(100vh - 200px);
  }
  .help-category {
    margin-left: -12px;
    margin-right: -12px;
  }
  .help-category .accordion__content {
    padding: 24px;
    animation: none;
  }
  .help-category .accordion:checked ~ .accordion__content {
    animation: none;
  }
  .help-category .accordion ~ .help-category__header:after, .help-category .accordion:checked ~ .help-category__header:after {
    content: "";
  }
  .article-card__image-holder {
    height: 242px;
    max-height: 242px;
    overflow: hidden;
    position: relative;
  }
  .article-card__image {
    height: 100%;
    width: auto;
    margin: 0;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .sikker-surf-subscription__icon {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
  .sikker-surf-subscription__indicator {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .sikker-surf-subscription__name {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .sikker-surf-subscription__description {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .sikker-surf-subscription__control {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .animated .carousel--slider .carousel__wrapper {
    animation-duration: 2s;
  }
  .animated .carousel--slider .carousel__wrapper .carousel__item {
    animation: slider-slides 2s linear 0s;
  }
  .animated .carousel--slider .carousel__prev, .animated .carousel--slider .carousel__next {
    animation-duration: 2s;
  }
  .animated .carousel--slider .carousel__holder div.carousel__item:nth-child(2) .carousel__item-text {
    animation: none;
  }
  .animated .usp-block__holder .animated__item .usp-block__icon-holder,
  .animated .usp-block__holder .animated__item .usp-block__brand-image-holder {
    animation: none !important;
  }
  .cover-block--animated.animated--init {
    opacity: 1;
    translate: 0 0;
  }
  .cover-block--animated.animated--init .cover-block__content {
    translate: 0 50px;
    opacity: 0.5;
  }
  .cover-block--animated.animated--init .cover-block__text {
    opacity: 0;
  }
  .cover-block--animated.animated {
    animation: none;
  }
  .cover-block--animated.animated .cover-block__content {
    animation: cover-block-slide-up 0.75s ease-in-out forwards;
  }
  .cover-block--animated.animated .cover-block__text {
    animation: cover-block-fade-in 0.5s ease-in-out 0.25s forwards;
  }
  .cover-block--has-image.animated--init .cover-block__visual {
    translate: 0 120px;
    opacity: 0.5;
  }
  .cover-block--has-image.animated {
    animation: none;
  }
  .cover-block--has-image.animated .cover-block__visual {
    animation: cover-block-image-slide-up 0.75s ease-in-out forwards;
  }
  .animated--init.subscriptions-block__subscriptions {
    opacity: 0;
  }
  .animated.subscriptions-block__subscriptions .animated__item {
    top: 32px;
    opacity: 0;
    animation: subscription-card 0.5s ease-in-out;
  }
  .animated .subscriptions-block__subscriptions .subscription-card:hover .subscription__badge-block,
  .animated .subscriptions-block__subscriptions .subscription-card:hover .subscription__content {
    transition: margin-top 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
    margin-top: -12px;
    margin-bottom: 12px;
  }
  .animated .subscriptions-block__subscriptions .subscription-card:hover .subscription__content {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }
  @keyframes subscription-card {
    0% {
      top: 32px;
      opacity: 0.7;
    }
    100% {
      top: 0;
      opacity: 1;
    }
  }
  .animated .help-category__card:nth-of-type(1) {
    transition-delay: 0.15s;
  }
  .animated .help-category__card:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  .animated .help-category__card:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  .animated .help-category__card:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  .animated .help-category__card:nth-of-type(5) {
    transition-delay: 0.75s;
  }
  .animated .help-category__card:nth-of-type(6) {
    transition-delay: 0.9s;
  }
  .animated .help-category__card:nth-of-type(7) {
    transition-delay: 1.05s;
  }
  .animated .help-category__card:nth-of-type(8) {
    transition-delay: 1.2s;
  }
  .animated .help-category__card:nth-of-type(9) {
    transition-delay: 1.35s;
  }
  .animated .article-card:nth-of-type(1) {
    transition-delay: 0.15s;
  }
  .animated .article-card:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  .animated .article-card:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  .animated .article-card:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  .animated .article-card:nth-of-type(5) {
    transition-delay: 0.75s;
  }
  .animated .article-card:nth-of-type(6) {
    transition-delay: 0.9s;
  }
  .animated .article-card:nth-of-type(7) {
    transition-delay: 1.05s;
  }
  .animated .article-card:nth-of-type(8) {
    transition-delay: 1.2s;
  }
  .animated .article-card:nth-of-type(9) {
    transition-delay: 1.35s;
  }
}
@media (min-width: 1072px) {
  .container {
    max-width: 1344px;
    width: calc(100% - 96px);
  }
}
@media (min-width: 1440px) {
  .col-lg {
    flex: 1;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    flex: auto;
    width: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: auto;
    width: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: auto;
    width: 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: auto;
    width: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: auto;
    width: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: auto;
    width: 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: auto;
    width: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: auto;
    width: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: auto;
    width: 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: auto;
    width: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: auto;
    width: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: auto;
    width: 100%;
    max-width: 100%;
  }
  .col-lg-auto {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-stretch {
    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 {
    align-items: flex-start;
  }
  .grid-row-lg--middle {
    align-items: center;
  }
  .grid-row-lg--baseline {
    align-items: baseline;
  }
  .grid-row-lg--bottom {
    align-items: flex-end;
  }
  .grid-row-lg--stretch {
    align-items: stretch;
  }
  .grid-row-lg--left {
    justify-content: flex-start;
  }
  .grid-row-lg--center {
    justify-content: center;
  }
  .grid-row-lg--right {
    justify-content: flex-end;
  }
  .grid-row-lg--between {
    justify-content: space-between;
  }
  .grid-row-lg--around {
    justify-content: space-around;
  }
  .dir-lg--row {
    flex-direction: row;
  }
  .dir-lg--row-reverse {
    flex-direction: row-reverse;
  }
  .dir-lg--column {
    flex-direction: column;
  }
  .dir-lg--column-reverse {
    flex-direction: column-reverse;
  }
  .col-lg--top {
    align-self: flex-start;
  }
  .col-lg--middle {
    align-self: center;
  }
  .col-lg--baseline {
    align-self: baseline;
  }
  .col-lg--bottom {
    align-self: flex-end;
  }
  .col-lg--stretch {
    align-self: stretch;
  }
  .col-lg--first {
    order: -1;
  }
  .col-lg--last {
    order: 1;
  }
  .col-lg--ordered {
    order: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .animated--init .carousel--slider {
    visibility: hidden;
  }
  .animated--init .carousel--slider .carousel__item {
    visibility: hidden;
  }
  .animated .carousel--slider .carousel__wrapper {
    animation: slider-container linear 0s;
    animation-duration: 1s;
  }
  .animated .carousel--slider .carousel__prev, .animated .carousel--slider .carousel__next {
    animation: slider-buttons linear 0s;
    animation-duration: 1s;
  }
  .animated .carousel--slider .carousel__holder div.carousel__item:nth-child(2) .carousel__item-text {
    animation: slider-text 1s linear 0s;
  }
  .content-block.animated--init .content-block__content {
    translate: 0 100px;
    opacity: 0;
  }
  .content-block.animated .content-block__content {
    animation: content-block-slide-up 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  @keyframes content-block-slide-up {
    0% {
      opacity: 0;
      translate: 0 100px;
    }
    100% {
      translate: 0 0;
      opacity: 1;
    }
  }
  .animated--init .usp-block__holder {
    visibility: hidden;
  }
  .animated .usp-block__holder .animated__item {
    top: 48px;
    opacity: 0;
    animation: usp-item 2s ease-out;
  }
  .animated .usp-block__holder .animated__item .usp-block__icon-holder,
  .animated .usp-block__holder .animated__item .usp-block__brand-image-holder {
    animation: usp-item-image 2s linear;
    animation-delay: inherit;
  }
  .animated .usp-block__holder .carousel__pagination {
    animation: usp-pagination 2s;
  }
  @keyframes usp-item {
    0% {
      top: 48px;
      opacity: 0.5;
    }
    100% {
      top: 0;
      opacity: 1;
    }
  }
  @keyframes usp-item-image {
    0% {
      bottom: 32px;
    }
    80% {
      bottom: 0;
    }
  }
  @keyframes usp-pagination {
    90% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .cover-block--animated.animated--init {
    opacity: 0.5;
    translate: 0 15px;
  }
  .cover-block--animated.animated {
    animation: cover-block-slide-up-mobile 1s ease-in-out forwards;
  }
  .cover-block--has-image.animated--init {
    opacity: 0.5;
    translate: 0 15px;
  }
  .cover-block--has-image.animated {
    animation: cover-block-slide-up-mobile 1s ease-in-out forwards;
  }
  @keyframes cover-block-slide-up-mobile {
    0% {
      opacity: 0.5;
      translate: 0 15px;
    }
    100% {
      opacity: 1;
      translate: 0 0;
    }
  }
  @keyframes cover-block-slide-up {
    0% {
      opacity: 0.5;
      translate: 0 50px;
    }
    100% {
      opacity: 1;
      translate: 0 0;
    }
  }
  @keyframes cover-block-image-slide-up {
    0% {
      opacity: 0.5;
      translate: 0 120px;
    }
    100% {
      opacity: 1;
      translate: 0 0;
    }
  }
  @keyframes cover-block-fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes product-block-img {
    0% {
      height: 100%;
    }
    100% {
      height: 75%;
    }
  }
  .carousel-block .animated--init {
    opacity: 0;
    top: 32px;
    transform: translate(0, 32px);
  }
  .carousel-block .animated {
    animation: carousel-block-move-up 1s ease-out;
  }
  @keyframes carousel-block-move-up {
    0% {
      opacity: 0;
      top: 32px;
      transform: translate(0, 32px);
    }
    10% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
      top: 0;
      transform: translate(0, 0);
    }
  }
  .arrow-animated .icon--right::before {
    animation: arrowMove 1.5s forwards infinite;
  }
  .animated {
    /*.slideUp {
    	.....
    }

    .slideDown {
    	.....
    }*/
  }
  .product__configuration-holder .configuration-block.animated--init {
    opacity: 0;
    transform: translateY(-20px);
  }
  .product__configuration-holder .configuration-block.animated {
    opacity: 0;
    animation: fade-in-tobottom-transition 0.4s linear 0.2s 1 normal forwards;
    z-index: -1;
  }
  .product__visual .animated--init .carousel__img.cover-image {
    opacity: 0;
    transform: translateX(-50vw) scale(0.5);
  }
  .product__visual .animated .carousel__img.cover-image {
    opacity: 0;
    animation: slide-in-scale-transition 1.2s linear 0.1s 1 normal forwards;
  }
  @keyframes fade-in-tobottom-transition {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    30% {
      opacity: 0.5;
    }
    70% {
      opacity: 0.5;
      transform: translateY(-2px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  @keyframes slide-in-scale-transition {
    0% {
      opacity: 0;
      transform: translateX(-50vw) scale(0.5);
    }
    30% {
      opacity: 0.5;
      transform: translateX(0px) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes slideIn {
    0% {
      transform: translateX(-32px);
    }
    100% {
      transform: translateX(0);
    }
  }
  .sticky-bar__item {
    opacity: 0;
    transform: scale(3);
    animation: scale-in-transition 0.4s linear 1 normal forwards;
  }
  @keyframes scale-in-transition {
    0% {
      opacity: 0;
      transform: scale(3);
    }
    30% {
      opacity: 0.5;
      transform: scale(1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .animated .help-category__card {
    bottom: 0;
    opacity: 1;
  }
  .animated--init .help-category {
    visibility: hidden;
  }
  .animated--init .help-category__card {
    bottom: -96px;
    opacity: 0;
  }
  .animated .article-card {
    bottom: 0;
    opacity: 1;
  }
  .animated--init .article-card {
    bottom: -96px;
    opacity: 0;
  }
}