@charset "UTF-8";
/* Z-index
--------------------------------------------------------------------------------*/
/*$font-weight: (
	regular: normal,
	light: 300,
	bold: bold
);*/
[v-cloak] {
  display: none; }

@font-face {
  font-family: 'telenorbold';
  src: url("../fonts/telenorFont/telenor-bold-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenor-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'telenorbolditalic';
  src: url("../fonts/telenorFont/telenor-bolditalic-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenor-bolditalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'telenoritalic';
  src: url("../fonts/telenorFont/telenor-italic-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenor-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'telenormedium';
  src: url("../fonts/telenorFont/telenor-medium-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenor-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'telenormediumitalic';
  src: url("../fonts/telenorFont/telenor-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenor-mediumitalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'telenor';
  src: url("../fonts/telenorFont/telenor-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenor-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'telenorlightitalic';
  src: url("../fonts/telenorFont/telenorlight-italic-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenorlight-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'telenorlight';
  src: url("../fonts/telenorFont/telenorlight-webfont.woff2") format("woff2"), url("../fonts/telenorFont/telenorlight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

/* Media Queries
--------------------------------------------------------------------------------*/
/* Misc
--------------------------------------------------------------------------------*/
@-ms-viewport {
  width: device-width; }

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block; }

audio,
canvas,
video {
  display: inline-block; }

* {
  box-sizing: border-box; }

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

body {
  font: 16px/25px telenor, Arial, Helvetica, sans-serif;
  background: #fff;
  color: #474747;
  height: 100%;
  margin: 0;
  min-width: 1200px; }
  @media only screen and (max-width: 768px) {
    body {
      min-width: 320px;
      overflow-x: hidden; } }

.av-external-content {
  overflow: auto;
  -webkit-overflow-scrolling: touch; }
  .av-external-content body {
    overflow: auto; }
  .av-external-content #menu--subnav {
    position: relative !important; }
  .av-external-content .cookies-popup {
    display: none !important; }

/* ==========================================================================
   Links
   ========================================================================== */
a {
  color: #038cd6;
  outline: none;
  text-decoration: none; }
  a:before {
    overflow: hidden;
    text-decoration: none; }

a:hover {
  outline: none; }

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

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
img {
  -webkit-touch-callout: default;
  border: 0;
  max-width: 100%;
  height: auto; }

video {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block; }

/* ==========================================================================
   Lists
   ========================================================================== */
ul,
ol {
  margin: 0;
  padding: 0; }
  ul li,
  ol li {
    list-style: none; }

ol li {
  margin-top: 10px;
  list-style: decimal outside;
  margin-left: 25px;
  padding-left: 10px; }

/* ==========================================================================
   Forms
   ========================================================================== */
fieldset {
  border: none;
  margin: 0;
  padding: 0; }

legend {
  border: 0;
  padding: 0; }

button,
input {
  -webkit-font-smoothing: antialiased;
  line-height: normal; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0; }

textarea::placeholder,
input::placeholder {
  color: #666; }

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset; }

button,
select {
  text-transform: none; }

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

button[disabled],
html input[disabled] {
  cursor: default; }

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

[type="search"] {
  -webkit-appearance: textfield; }

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

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

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

[type="search"],
[type="text"] {
  width: 100%; }

textarea {
  overflow: auto;
  vertical-align: top;
  width: 100%;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased; }

/* ==========================================================================
Tables
 ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

@media only screen and (max-width: 768px) {
  thead th {
    white-space: nowrap; } }

@media only screen and (max-width: 480px) {
  thead th {
    white-space: normal; } }

th {
  text-align: left; }

th,
td {
  padding: 10px;
  vertical-align: top; }

/* ==========================================================================
  Spacing
  ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: inherit;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0; }

p,
blockquote,
table {
  margin: 0; }

small {
  font-size: inherit; }

.transform-translate {
  -webkit-transform: translateZ(0);
  transform: translateZ(0); }

/**
name: Typography
type: ui
desc: >
  # Description

  There is a variable $text-sizes in settings.scss file.
  $text-sizes contains main font sizes and line heights which we can't change,
  and additional font sizes and line heights which we can change, add and remove.
  It's simple to use, just add class text-size on text element, and modifier for your font size.
  For example you need to text element with 30 font size, you should put class text-size--30.
modifiers:
  .text-regular: Telenor regular
  .text-light: Telenor light
  .text-bold: Telenor bold
  .text-italic: Telenor italic
  .text-normal: Telenor normal font-style
  .text-size--: Text size from $text-sizes variable (see description)
examples:
  - name: Example for text font-size - 30 and Telenor Light (for another one see description on the css tab)
    tmpl: >
        <p class="text-size--30 text-light">Example text text-size--30 and Telenor Light<p>
        <p class="text-size--16">Example text text-size--16 and Telenor Regular<p>
*/
.text--content h1, .table--order .total .big-text,
.text-size--44 {
  font-size: 44px;
  line-height: 50px; }

.text--xlarge,
.text-size--36 {
  font-size: 36px;
  line-height: 42px; }

.text--content h2, .form-search.form-item--large,
.text-size--30 {
  font-size: 30px;
  line-height: 38px; }


.text-size--24 {
  font-size: 24px;
  line-height: 32px; }

.text--content h4, .table--key-value tfoot, .form-item label.text--large, .form-search label.text--large, .text--large,
.text-size--19 {
  font-size: 19px;
  line-height: 28px; }

.amchart-small .amchart-doughnut-caption, .amchart-small-caption, .form-item label.text--med, .form-search label.text--med, .form-search__clear, .rating__stars + .rating__text, .tabpanel__group, .tabgroup, .text--med,
.text-size--16 {
  font-size: 16px;
  line-height: 25px; }

.text--content code, .text--content small, .amchart-small .amchart-doughnut-text, .amchart-small-text, .amchart-bars-legend, .doughnut__legend, .table, .table--small, .datepick, .dropdown--download .dropdown__content, .form-item label, .form-search label, .form-item__description, .select-wrapper__label,
.form-select__label, .form-item label.text--small, .form-search label.text--small, .accordion-filter, .form-search.form-item--small, .list--small, .rating__stars--small + .rating__text, .select-wrapper--small,
.form-select--small, .tabgroup--small, .form-item--toggle label, .text--small,
.text-size--13 {
  font-size: 13px;
  line-height: 18px; }

.chart-info-panel, .status-badge, .text--xsmall,
.text-size--11 {
  font-size: 11px;
  line-height: 15px; }


.text-size--192 {
  font-size: 192px;
  line-height: 198px; }


.text-size--174 {
  font-size: 174px;
  line-height: 180px; }


.text-size--114 {
  font-size: 114px;
  line-height: 120px; }


.text-size--84 {
  font-size: 84px;
  line-height: 90px; }


.text-size--72 {
  font-size: 72px;
  line-height: 76px; }


.text-size--64 {
  font-size: 64px;
  line-height: 72px; }


.text-size--60 {
  font-size: 60px;
  line-height: 68px; }


.text-size--54 {
  font-size: 54px;
  line-height: 60px; }


.text-size--52 {
  font-size: 52px;
  line-height: 58px; }


.text-size--50 {
  font-size: 50px;
  line-height: 56px; }


.text-size--40 {
  font-size: 40px;
  line-height: 39px; }


.text-size--28 {
  font-size: 28px;
  line-height: 32px; }

.text--content h3, .table--order td.price, .table--order .total p,
.text-size--21 {
  font-size: 21px;
  line-height: 30px; }

@media only screen and (max-width: 768px) {
  .mobile-text-size--44 {
    font-size: 44px;
    line-height: 50px; }
  .mobile-text-size--36 {
    font-size: 36px;
    line-height: 42px; }
  .mobile-text-size--30 {
    font-size: 30px;
    line-height: 38px; }
  .mobile-text-size--24 {
    font-size: 24px;
    line-height: 32px; }
  .mobile-text-size--19 {
    font-size: 19px;
    line-height: 28px; }
  .mobile-text-size--16 {
    font-size: 16px;
    line-height: 25px; }
  .mobile-text-size--13 {
    font-size: 13px;
    line-height: 18px; }
  .mobile-text-size--11 {
    font-size: 11px;
    line-height: 15px; }
  .mobile-text-size--192 {
    font-size: 192px;
    line-height: 198px; }
  .mobile-text-size--174 {
    font-size: 174px;
    line-height: 180px; }
  .mobile-text-size--114 {
    font-size: 114px;
    line-height: 120px; }
  .mobile-text-size--84 {
    font-size: 84px;
    line-height: 90px; }
  .mobile-text-size--72 {
    font-size: 72px;
    line-height: 76px; }
  .mobile-text-size--64 {
    font-size: 64px;
    line-height: 72px; }
  .mobile-text-size--60 {
    font-size: 60px;
    line-height: 68px; }
  .mobile-text-size--54 {
    font-size: 54px;
    line-height: 60px; }
  .mobile-text-size--52 {
    font-size: 52px;
    line-height: 58px; }
  .mobile-text-size--50 {
    font-size: 50px;
    line-height: 56px; }
  .mobile-text-size--40 {
    font-size: 40px;
    line-height: 39px; }
  .mobile-text-size--28 {
    font-size: 28px;
    line-height: 32px; }
  .mobile-text-size--21 {
    font-size: 21px;
    line-height: 30px; } }

.text-regular {
  font-family: telenor, sans-serif;
  font-weight: 400; }

.text-light {
  font-family: telenorlight, sans-serif;
  font-weight: 400; }

.text-bold {
  font-family: telenor, sans-serif;
  font-weight: 700; }

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

.text-italic {
  font-style: italic; }

@media only screen and (max-width: 768px) {
  .mobile-text-normal {
    font-style: normal; }
  .mobile-text-italic {
    font-style: italic; } }

.color-white {
  color: #fff; }

.color-blue {
  color: #038cd6; }

.color-blue-light {
  color: #80c4e8; }

.color-yellow {
  color: #ffb900; }

.color-gray {
  color: #666; }

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

.color-steel-grey {
  color: #b8b8b8; }

.color-smoke-grey {
  color: #e8e8e8; }

.color-black-light {
  color: #474747; }

.color-green {
  color: #43c682; }

.color-red {
  color: #db5451; }

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

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

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

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

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

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

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

@media only screen and (max-width: 768px) {
  .mobile-text--left {
    text-align: left; }
  .mobile-text--right {
    text-align: right; }
  .mobile-text--center {
    text-align: center; }
  .mobile-text--inherit {
    text-align: inherit; } }

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

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

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

@media only screen and (max-width: 768px) {
  .mobile-display--block {
    display: block !important; }
  .mobile-display--inline {
    display: inline !important; }
  .mobile-display--inline-block {
    display: inline-block !important; } }

.float--left, .doughnut--big .doughnut__main, .doughnut--big {
  float: left; }

.float--right, .pager--wrap {
  float: right; }

.float--none, .table--with-loadmore .pager--wrap {
  float: none; }

@media only screen and (max-width: 768px) {
  .mobile-float--left {
    float: left; }
  .mobile-float--right {
    float: right; }
  .mobile-float--none {
    float: none; } }

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

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

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

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

.margin-whole--med {
  margin: 15px !important; }

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

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

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

.margin-whole--section {
  margin: 50px !important; }

.margin-whole--section-base {
  margin: 60px !important; }

.margin-whole--huge {
  margin: 80px !important; }

@media only screen and (max-width: 768px) {
  .mobile-margin-whole--none {
    margin: 0 !important; }
  .mobile-margin-whole {
    margin: 20px !important; }
  .mobile-margin-whole--xsmall {
    margin: 5px !important; }
  .mobile-margin-whole--small {
    margin: 10px !important; }
  .mobile-margin-whole--med {
    margin: 15px !important; }
  .mobile-margin-whole--large {
    margin: 30px !important; }
  .mobile-margin-whole--xlarge {
    margin: 40px !important; }
  .mobile-margin-whole--xxlarge {
    margin: 45px !important; }
  .mobile-margin-whole--section {
    margin: 50px !important; }
  .mobile-margin-whole--section-base {
    margin: 60px !important; }
  .mobile-margin-whole--huge {
    margin: 80px !important; } }

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

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

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

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

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

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

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

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

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

.trailer--section-base {
  margin-bottom: 60px !important; }

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

@media only screen and (max-width: 768px) {
  .mobile-trailer--none {
    margin-bottom: 0 !important; }
  .mobile-trailer {
    margin-bottom: 20px !important; }
  .mobile-trailer--xsmall {
    margin-bottom: 5px !important; }
  .mobile-trailer--small {
    margin-bottom: 10px !important; }
  .mobile-trailer--med {
    margin-bottom: 15px !important; }
  .mobile-trailer--large {
    margin-bottom: 30px !important; }
  .mobile-trailer--xlarge {
    margin-bottom: 40px !important; }
  .mobile-trailer--xxlarge {
    margin-bottom: 45px !important; }
  .mobile-trailer--section {
    margin-bottom: 50px !important; }
  .mobile-trailer--section-base {
    margin-bottom: 60px !important; }
  .mobile-trailer--huge {
    margin-bottom: 80px !important; } }

.leader--none {
  margin-top: 0 !important; }

.leader {
  margin-top: 20px !important; }

.leader--xsmall {
  margin-top: 5px !important; }

.leader--small {
  margin-top: 10px !important; }

.leader--med {
  margin-top: 15px !important; }

.leader--large {
  margin-top: 30px !important; }

.leader--xlarge {
  margin-top: 40px !important; }

.leader--xxlarge {
  margin-top: 45px !important; }

.leader--section {
  margin-top: 50px !important; }

.leader--section-base {
  margin-top: 60px !important; }

.leader--huge {
  margin-top: 80px !important; }

@media only screen and (max-width: 768px) {
  .mobile-leader--none {
    margin-top: 0 !important; }
  .mobile-leader {
    margin-top: 20px !important; }
  .mobile-leader--xsmall {
    margin-top: 5px !important; }
  .mobile-leader--small {
    margin-top: 10px !important; }
  .mobile-leader--med {
    margin-top: 15px !important; }
  .mobile-leader--large {
    margin-top: 30px !important; }
  .mobile-leader--xlarge {
    margin-top: 40px !important; }
  .mobile-leader--xxlarge {
    margin-top: 45px !important; }
  .mobile-leader--section {
    margin-top: 50px !important; }
  .mobile-leader--section-base {
    margin-top: 60px !important; }
  .mobile-leader--huge {
    margin-top: 80px !important; } }

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

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

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

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

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

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

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

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

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

.toleft--section-base {
  margin-left: 60px !important; }

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

@media only screen and (max-width: 768px) {
  .mobile-toleft--none {
    margin-left: 0 !important; }
  .mobile-toleft {
    margin-left: 20px !important; }
  .mobile-toleft--xsmall {
    margin-left: 5px !important; }
  .mobile-toleft--small {
    margin-left: 10px !important; }
  .mobile-toleft--med {
    margin-left: 15px !important; }
  .mobile-toleft--large {
    margin-left: 30px !important; }
  .mobile-toleft--xlarge {
    margin-left: 40px !important; }
  .mobile-toleft--xxlarge {
    margin-left: 45px !important; }
  .mobile-toleft--section {
    margin-left: 50px !important; }
  .mobile-toleft--section-base {
    margin-left: 60px !important; }
  .mobile-toleft--huge {
    margin-left: 80px !important; } }

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

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

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

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

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

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

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

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

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

.toright--section-base {
  margin-right: 60px !important; }

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

@media only screen and (max-width: 768px) {
  .mobile-toright--none {
    margin-right: 0 !important; }
  .mobile-toright {
    margin-right: 20px !important; }
  .mobile-toright--xsmall {
    margin-right: 5px !important; }
  .mobile-toright--small {
    margin-right: 10px !important; }
  .mobile-toright--med {
    margin-right: 15px !important; }
  .mobile-toright--large {
    margin-right: 30px !important; }
  .mobile-toright--xlarge {
    margin-right: 40px !important; }
  .mobile-toright--xxlarge {
    margin-right: 45px !important; }
  .mobile-toright--section {
    margin-right: 50px !important; }
  .mobile-toright--section-base {
    margin-right: 60px !important; }
  .mobile-toright--huge {
    margin-right: 80px !important; } }

.padding-whole--none {
  padding: 0 !important; }

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

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

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

.padding-whole--med {
  padding: 15px !important; }

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

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

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

.padding-whole--section {
  padding: 50px !important; }

.padding-whole--section-base {
  padding: 60px !important; }

.padding-whole--huge {
  padding: 80px !important; }

@media only screen and (max-width: 768px) {
  .mobile-padding-whole--none {
    padding: 0 !important; }
  .mobile-padding-whole {
    padding: 20px !important; }
  .mobile-padding-whole--xsmall {
    padding: 5px !important; }
  .mobile-padding-whole--small {
    padding: 10px !important; }
  .mobile-padding-whole--med {
    padding: 15px !important; }
  .mobile-padding-whole--large {
    padding: 30px !important; }
  .mobile-padding-whole--xlarge {
    padding: 40px !important; }
  .mobile-padding-whole--xxlarge {
    padding: 45px !important; }
  .mobile-padding-whole--section {
    padding: 50px !important; }
  .mobile-padding-whole--section-base {
    padding: 60px !important; }
  .mobile-padding-whole--huge {
    padding: 80px !important; } }

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

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

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

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

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

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

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

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

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

.padding-trailer--section-base {
  padding-bottom: 60px !important; }

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

@media only screen and (max-width: 768px) {
  .mobile-padding-trailer--none {
    padding-bottom: 0 !important; }
  .mobile-padding-trailer {
    padding-bottom: 20px !important; }
  .mobile-padding-trailer--xsmall {
    padding-bottom: 5px !important; }
  .mobile-padding-trailer--small {
    padding-bottom: 10px !important; }
  .mobile-padding-trailer--med {
    padding-bottom: 15px !important; }
  .mobile-padding-trailer--large {
    padding-bottom: 30px !important; }
  .mobile-padding-trailer--xlarge {
    padding-bottom: 40px !important; }
  .mobile-padding-trailer--xxlarge {
    padding-bottom: 45px !important; }
  .mobile-padding-trailer--section {
    padding-bottom: 50px !important; }
  .mobile-padding-trailer--section-base {
    padding-bottom: 60px !important; }
  .mobile-padding-trailer--huge {
    padding-bottom: 80px !important; } }

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

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

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

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

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

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

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

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

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

.padding-leader--section-base {
  padding-top: 60px !important; }

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

@media only screen and (max-width: 768px) {
  .mobile-padding-leader--none {
    padding-top: 0 !important; }
  .mobile-padding-leader {
    padding-top: 20px !important; }
  .mobile-padding-leader--xsmall {
    padding-top: 5px !important; }
  .mobile-padding-leader--small {
    padding-top: 10px !important; }
  .mobile-padding-leader--med {
    padding-top: 15px !important; }
  .mobile-padding-leader--large {
    padding-top: 30px !important; }
  .mobile-padding-leader--xlarge {
    padding-top: 40px !important; }
  .mobile-padding-leader--xxlarge {
    padding-top: 45px !important; }
  .mobile-padding-leader--section {
    padding-top: 50px !important; }
  .mobile-padding-leader--section-base {
    padding-top: 60px !important; }
  .mobile-padding-leader--huge {
    padding-top: 80px !important; } }

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

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

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

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

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

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

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

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

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

.padding-toleft--section-base {
  padding-left: 60px !important; }

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

@media only screen and (max-width: 768px) {
  .mobile-padding-toleft--none {
    padding-left: 0 !important; }
  .mobile-padding-toleft {
    padding-left: 20px !important; }
  .mobile-padding-toleft--xsmall {
    padding-left: 5px !important; }
  .mobile-padding-toleft--small {
    padding-left: 10px !important; }
  .mobile-padding-toleft--med {
    padding-left: 15px !important; }
  .mobile-padding-toleft--large {
    padding-left: 30px !important; }
  .mobile-padding-toleft--xlarge {
    padding-left: 40px !important; }
  .mobile-padding-toleft--xxlarge {
    padding-left: 45px !important; }
  .mobile-padding-toleft--section {
    padding-left: 50px !important; }
  .mobile-padding-toleft--section-base {
    padding-left: 60px !important; }
  .mobile-padding-toleft--huge {
    padding-left: 80px !important; } }

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

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

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

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

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

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

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

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

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

.padding-toright--section-base {
  padding-right: 60px !important; }

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

@media only screen and (max-width: 768px) {
  .mobile-padding-toright--none {
    padding-right: 0 !important; }
  .mobile-padding-toright {
    padding-right: 20px !important; }
  .mobile-padding-toright--xsmall {
    padding-right: 5px !important; }
  .mobile-padding-toright--small {
    padding-right: 10px !important; }
  .mobile-padding-toright--med {
    padding-right: 15px !important; }
  .mobile-padding-toright--large {
    padding-right: 30px !important; }
  .mobile-padding-toright--xlarge {
    padding-right: 40px !important; }
  .mobile-padding-toright--xxlarge {
    padding-right: 45px !important; }
  .mobile-padding-toright--section {
    padding-right: 50px !important; }
  .mobile-padding-toright--section-base {
    padding-right: 60px !important; }
  .mobile-padding-toright--huge {
    padding-right: 80px !important; } }

.padding-whole--content {
  padding: 30px 20px; }
  @media only screen and (max-width: 768px) {
    .padding-whole--content {
      padding: 20px; } }

.border {
  border: 1px solid #d1d1d1; }
  .border--left {
    border-left: 1px solid #d1d1d1; }
  .border--right {
    border-right: 1px solid #d1d1d1; }
  .border--bottom {
    border-bottom: 1px solid #d1d1d1; }
  .border--top {
    border-top: 1px solid #d1d1d1; }
  .border--without-left {
    border-left: none; }
  .border--without-right {
    border-right: none; }
  .border--without-bottom {
    border-bottom: none; }
  .border--without-top {
    border-top: none; }
  .border--without {
    border: none !important; }
  .border--light {
    border-color: #e8e8e8; }
  .border--negative {
    border-color: rgba(255, 255, 255, 0.3); }

@media only screen and (max-width: 768px) {
  .mobile-border {
    border: 1px solid #d1d1d1; }
    .mobile-border--left {
      border-left: 1px solid #d1d1d1; }
    .mobile-border--right {
      border-right: 1px solid #d1d1d1; }
    .mobile-border--bottom {
      border-bottom: 1px solid #d1d1d1; }
    .mobile-border--top {
      border-top: 1px solid #d1d1d1; }
    .mobile-border--without-left {
      border-left: none; }
    .mobile-border--without-right {
      border-right: none; }
    .mobile-border--without-bottom {
      border-bottom: none; }
    .mobile-border--without-top {
      border-top: none; }
    .mobile-border--without {
      border: none !important; } }

.constrain-inner:after, .container:after, .table--order p:after, .form-item--inline:after, .radiobutton-row:after, .list--breadcrumbs:after, .pager:after, .tabpanel__list:after, .section:after,
.clear:after {
  content: "";
  display: table;
  clear: both; }

.rel {
  position: relative; }

.ovh {
  overflow: hidden; }

@media only screen and (max-width: 768px) {
  .mobile-hidden {
    display: none !important; } }

@media only screen and (min-width: 768px) {
  .desktop-hidden {
    display: none !important; }
  .desktop-visible {
    display: block !important; } }

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

.collapsing {
  transition: height .35s ease;
  height: 0;
  overflow: hidden; }

.is-hidden, .form-checkbox [type=checkbox], .form-radio [type=radio],
.is-collapsed {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  min-height: 0 !important; }

.is-shown,
.is-visible {
  display: block;
  height: auto;
  visibility: visible;
  opacity: 1; }

.is-open {
  display: block;
  height: auto; }

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

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

.js--hidden {
  position: absolute !important;
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

.radiobutton-row input,
.hidden-element {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important; }

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


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

.text-caps {
  text-transform: uppercase; }

.flex {
  display: flex; }
  .flex--row {
    display: flex;
    flex-direction: row; }
  .flex--column {
    display: flex;
    flex-direction: column; }

.flex-item {
  flex: 1; }

.columns-two {
  column-count: 2; }

.full-height {
  height: 100%; }

.full-width {
  width: 100%; }

.field-validation-error,
.field-validation-valid {
  display: none; }

.icon--text {
  display: none !important; }

.gradient-line:before, .gradient-line--bottom:after, .gradient-line--with-border:before {
  content: "";
  z-index: 3;
  display: block;
  position: relative;
  margin-bottom: -1px;
  background-image: linear-gradient(to right, #6eb45b, #2b9ba8, #038cd6);
  height: 3px; }

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

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

.box-shadow-gray {
  position: relative; }
  .box-shadow-gray:before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    content: '';
    width: 6px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent); }
    @media only screen and (max-width: 768px) {
      .box-shadow-gray:before {
        display: none; } }
  .box-shadow-gray--right:before {
    left: auto;
    right: 0;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06)); }

@media only screen and (max-width: 768px) {
  .stretch-mobile {
    width: 100%; } }

.background-overlay {
  position: relative; }
  .background-overlay:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0; }
  .background-overlay.purple:before {
    background-image: linear-gradient(#7f2a8e, #d60a8a, #eb1c2b);
    opacity: .65; }

.rotation--horizontal {
  animation: rotate 1s infinite linear; }

@keyframes rotate {
  from {
    transform: rotatey(0deg); }
  to {
    transform: rotatey(180deg); } }

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

.constrain-outer {
  position: relative;
  width: 100%;
  padding-top: 150px;
  background: url("../img/main_bg.png") center top no-repeat;
  z-index: 2;
  max-height: 1000px;
  background-size: cover; }

.constrain-inner {
  position: relative;
  max-width: 64em;
  margin: 0 auto;
  min-height: 3000px;
  border: 1px solid #000;
  border-width: 0 1px; }

.container {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 1054px) {
    .container--main {
      padding-left: 15px;
      padding-right: 15px; } }
  @media only screen and (max-width: 1054px) {
    .container--wide {
      margin-left: -15px;
      margin-right: -15px; } }

.section--oncanvas {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1; }

.section--wrap {
  flex: 1 0 auto;
  width: 100%; }

.float-left, .pull-left {
  float: left; }

.float-right, .pull-right {
  float: right; }

.text--content mark {
  background-color: #038cd6;
  color: #fff;
  padding: 0 2px; }

.text--content a {
  color: #038cd6; }

.text--content h1, .text--content h2, .text--content h3 {
  font-family: telenorlight, sans-serif; }
  .text--content h1 a:hover, .text--content h2 a:hover, .text--content h3 a:hover {
    color: #038cd6;
    text-decoration: underline; }

.text--content p, .text--content ol, .text--content ul, .text--content dl {
  margin-bottom: 20px; }

.text--content .button, .text--content .form-checkbox--filter label, .form-checkbox--filter .text--content label {
  color: #666; }
  .text--content .button.button--action, .text--content .form-checkbox--filter label.button--action, .form-checkbox--filter .text--content label.button--action {
    color: #fff; }

.grid-row--content {
  margin-left: 0;
  margin-right: 0; }

.grid-row--bordered {
  border-left: 1px solid #d1d1d1;
  padding-top: 1px; }
  .grid-row--bordered > [class*=col-] {
    border: 1px solid #d1d1d1;
    border-left: none;
    margin-top: -1px; }

@font-face {
  font-family: "framework-icons";
  src: url("../fonts/telenorIcon/framework-icons.eot");
  src: url("../fonts/telenorIcon/framework-icons.eot?#iefix") format("eot"), url("../fonts/telenorIcon/framework-icons.woff2") format("woff2"), url("../fonts/telenorIcon/framework-icons.woff") format("woff"), url("../fonts/telenorIcon/framework-icons.ttf") format("truetype"), url("../fonts/telenorIcon/framework-icons.svg#framework-icons") format("svg"); }

[class^="icon-"]:before,
[class*="icon-"]:before, .col--expander:before, .form-checkbox--result[data-state="all-selected"] label:before, .form-checkbox--result[data-state="some-selected"] label:before, .sorting:after,
.sorting_asc:after,
.sorting_desc:after, .datepicker:after, .datepicker--range .col:after, .datepick-cmd-close:before, .datepick-cmd-prev:before,
.datepick-cmd-next:before, .dropdown__label:after, .dropdown__filter:before, .dropdown--subscriptions .dropdown__label:before, .form-item .ws-range .ws-range-thumb, .form-search .ws-range .ws-range-thumb, .form-item--filter:before, .form-item__clear-button:before, .form-item__row .form-comp:before, .error-summary__list li:before, .accordion-filter__parent-item[data-state="all-selected"] .accordion-filter__parent-item-toggle label:before, .accordion-filter__parent-item[data-state="some-selected"] .accordion-filter__parent-item-toggle label:before, #filters-chosen .form-checkbox--filter label:before, .section--footer__breadcrumb li:nth-child(1n+2) a:before, .form-checkbox label:before, .form-search.form-search--inline:before, .link--bullet:before, .list li:before, .form-item__number-wrapper .number__control--decrease:before, .form-item__number-wrapper .number__control--increase:before, .multi-filter__input :after, .pager__button.previous:before, .pager > span > span.previous:before, .previous.pager__elipsis:before, .pager__button.next:before, .pager > span > span.next:before, .next.pager__elipsis:before, .fill--half:after, .select-wrapper__field:after,
.form-select__field:after, .tabpanel__tab.flexnav .flexnav__toggler:after, .bullet-link:before, .icon-bullet-check-negative:before, .list--check--dark li:before,
.list--check--grey li:before, .list--check--white li:before,
.list--check--grey-dark li:before, .attachment-add label:before, .menu--subnav .flexnav__toggler:after {
  font-family: "framework-icons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
  text-decoration: none;
  text-transform: none;
  display: inline-block; }

.icon-14days:before {
  content: "\E001"; }

.icon-4G:before {
  content: "\E002"; }

.icon-account:before {
  content: "\E003"; }

.icon-acrobat:before {
  content: "\E004"; }

.icon-add-ons:before {
  content: "\E005"; }

.icon-add:before {
  content: "\E006"; }

.icon-adjust:before {
  content: "\E007"; }

.icon-alternative_offer:before {
  content: "\E008"; }

.icon-apperror:before {
  content: "\E009"; }

.icon-arrow-down:before {
  content: "\E00A"; }

.icon-arrow-next:before, .pager__button.next:before, .pager > span > span.next:before, .next.pager__elipsis:before {
  content: "\E00B"; }

.icon-arrow-prev:before, .pager__button.previous:before, .pager > span > span.previous:before, .previous.pager__elipsis:before {
  content: "\E00C"; }

.icon-arrow-step-down:before {
  content: "\E00D"; }

.icon-arrow-step:before {
  content: "\E00E"; }

.icon-arrow-up:before {
  content: "\E00F"; }

.icon-attachment:before {
  content: "\E010"; }

.icon-audio:before {
  content: "\E011"; }

.icon-avaya:before {
  content: "\E012"; }

.icon-basket:before {
  content: "\E013"; }

.icon-battery:before {
  content: "\E014"; }

.icon-blank-paper:before {
  content: "\E015"; }

.icon-bookmark:before {
  content: "\E016"; }

.icon-box:before {
  content: "\E017"; }

.icon-broadband1:before {
  content: "\E018"; }

.icon-broadband2:before {
  content: "\E019"; }

.icon-broken-screen:before {
  content: "\E01A"; }

.icon-building:before {
  content: "\E01B"; }

.icon-bullet-check-negative:before {
  content: "\E01C"; }

.icon-bullet-disc:before {
  content: "\E01D"; }

.icon-bullet-rev:before {
  content: "\E01E"; }

.icon-bullet:before {
  content: "\E01F"; }

.icon-calendar:before, .form-item__row .form-comp.comp-date:before {
  content: "\E020"; }

.icon-camera:before {
  content: "\E021"; }

.icon-cart:before {
  content: "\E022"; }

.icon-casing:before {
  content: "\E023"; }

.icon-change:before {
  content: "\E024"; }

.icon-chart:before {
  content: "\E025"; }

.icon-chat-fill:before {
  content: "\E026"; }

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

.icon-check-grey:before {
  content: "\E028"; }

.icon-check:before {
  content: "\E029"; }

.icon-check_list:before {
  content: "\E02A"; }

.icon-clear:before {
  content: "\E02B"; }

.icon-clip:before {
  content: "\E02C"; }

.icon-close-cross:before {
  content: "\E02D"; }

.icon-close-expand:before {
  content: "\E02E"; }

.icon-close-menu:before {
  content: "\E02F"; }

.icon-close-right-panel:before {
  content: "\E030"; }

.icon-close:before {
  content: "\E031"; }

.icon-cloud:before {
  content: "\E032"; }

.icon-coins:before {
  content: "\E033"; }

.icon-collapse:before {
  content: "\E034"; }

.icon-controller:before {
  content: "\E035"; }

.icon-coverage:before {
  content: "\E036"; }

.icon-coverage1:before {
  content: "\E037"; }

.icon-create:before {
  content: "\E038"; }

.icon-credit-card:before {
  content: "\E039"; }

.icon-customer_interactions:before {
  content: "\E03A"; }

.icon-data:before {
  content: "\E03B"; }

.icon-diafragma:before {
  content: "\E03C"; }

.icon-document:before {
  content: "\E03D"; }

.icon-download:before {
  content: "\E03E"; }

.icon-downloads:before {
  content: "\E03F"; }

.icon-dropdown:before {
  content: "\E040"; }

.icon-earth:before {
  content: "\E041"; }

.icon-error-no-bg:before {
  content: "\E042"; }

.icon-error-xl-white:before {
  content: "\E043"; }

.icon-error:before, .error-summary__list li:before {
  content: "\E044"; }

.icon-excel:before {
  content: "\E045"; }

.icon-expand:before {
  content: "\E046"; }

.icon-extra-add-ons:before {
  content: "\E047"; }

.icon-eye:before {
  content: "\E048"; }

.icon-facebook-squared:before {
  content: "\E049"; }

.icon-facebook:before {
  content: "\E04A"; }

.icon-feature-phone-broadband:before {
  content: "\E04B"; }

.icon-flag:before {
  content: "\E04C"; }

.icon-forward:before {
  content: "\E04D"; }

.icon-global:before {
  content: "\E04E"; }

.icon-googleplus:before {
  content: "\E04F"; }

.icon-gplus:before {
  content: "\E050"; }

.icon-grid:before {
  content: "\E051"; }

.icon-hamburger-menu:before {
  content: "\E052"; }

.icon-headphones:before {
  content: "\E053"; }

.icon-heart:before {
  content: "\E054"; }

.icon-home-broadband:before {
  content: "\E055"; }

.icon-home:before {
  content: "\E056"; }

.icon-hosting:before {
  content: "\E057"; }

.icon-hotline:before {
  content: "\E058"; }

.icon-identification-password:before {
  content: "\E059"; }

.icon-img:before {
  content: "\E05A"; }

.icon-impersonation:before {
  content: "\E05B"; }

.icon-input-radio-selected:before, .form-item .ws-range .ws-range-thumb, .form-search .ws-range .ws-range-thumb {
  content: "\E05C"; }

.icon-instagram:before {
  content: "\E05D"; }

.icon-key:before {
  content: "\E05E"; }

.icon-keyboard-voice:before {
  content: "\E05F"; }

.icon-knowledge_base:before {
  content: "\E060"; }

.icon-large:before {
  content: "\E061"; }

.icon-lightbulb:before {
  content: "\E062"; }

.icon-list-collapse:before {
  content: "\E063"; }

.icon-list-expand:before {
  content: "\E064"; }

.icon-list:before {
  content: "\E065"; }

.icon-location:before {
  content: "\E066"; }

.icon-lock:before {
  content: "\E067"; }

.icon-locked:before {
  content: "\E068"; }

.icon-log-out:before {
  content: "\E069"; }

.icon-login-phone-number:before {
  content: "\E06A"; }

.icon-logo-onedrive:before {
  content: "\E06B"; }

.icon-lost-and-stolen-help:before {
  content: "\E06C"; }

.icon-mail:before {
  content: "\E06D"; }

.icon-medium:before {
  content: "\E06E"; }

.icon-menu:before {
  content: "\E06F"; }

.icon-message-waiting:before {
  content: "\E070"; }

.icon-message:before {
  content: "\E071"; }

.icon-messages:before {
  content: "\E072"; }

.icon-message_question:before {
  content: "\E073"; }

.icon-meter:before {
  content: "\E074"; }

.icon-minus:before {
  content: "\E075"; }

.icon-minutes-sms-data:before {
  content: "\E076"; }

.icon-mobile-broadband:before {
  content: "\E077"; }

.icon-mobile-messages:before {
  content: "\E078"; }

.icon-mobile-wifi:before {
  content: "\E079"; }

.icon-mobile:before {
  content: "\E07A"; }

.icon-mobility:before {
  content: "\E07B"; }

.icon-music:before {
  content: "\E07C"; }

.icon-my-tv:before {
  content: "\E07D"; }

.icon-network:before {
  content: "\E07E"; }

.icon-notification:before {
  content: "\E07F"; }

.icon-office-365:before {
  content: "\E080"; }

.icon-office365:before {
  content: "\E081"; }

.icon-one-to-one-loaner-phone:before {
  content: "\E082"; }

.icon-one-two-three:before {
  content: "\E083"; }

.icon-onescreen-white:before {
  content: "\E084"; }

.icon-open-menu:before {
  content: "\E085"; }

.icon-open-right-panel:before {
  content: "\E086"; }

.icon-open_veris:before {
  content: "\E087"; }

.icon-padlock:before {
  content: "\E088"; }

.icon-paper-doc:before {
  content: "\E089"; }

.icon-paper_exclamation:before {
  content: "\E08A"; }

.icon-paper_list:before {
  content: "\E08B"; }

.icon-paper_terminate:before {
  content: "\E08C"; }

.icon-pause:before {
  content: "\E08D"; }

.icon-pencil:before {
  content: "\E08E"; }

.icon-people:before {
  content: "\E08F"; }

.icon-percent:before {
  content: "\E090"; }

.icon-perfect-start:before {
  content: "\E091"; }

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

.icon-phone:before {
  content: "\E093"; }

.icon-phone404:before {
  content: "\E094"; }

.icon-phone_handset:before {
  content: "\E095"; }

.icon-picture:before {
  content: "\E096"; }

.icon-piggy:before {
  content: "\E097"; }

.icon-pipeline:before {
  content: "\E098"; }

.icon-placemarker:before {
  content: "\E099"; }

.icon-play-circle:before {
  content: "\E09A"; }

.icon-play:before {
  content: "\E09B"; }

.icon-plus:before {
  content: "\E09C"; }

.icon-present:before {
  content: "\E09D"; }

.icon-print:before {
  content: "\E09E"; }

.icon-products:before {
  content: "\E09F"; }

.icon-question:before {
  content: "\E0A0"; }

.icon-questionmark:before {
  content: "\E0A1"; }

.icon-rating:before {
  content: "\E0A2"; }

.icon-refresh:before {
  content: "\E0A3"; }

.icon-reject:before {
  content: "\E0A4"; }

.icon-remove:before {
  content: "\E0A5"; }

.icon-repairs:before {
  content: "\E0A6"; }

.icon-router:before {
  content: "\E0A7"; }

.icon-save:before {
  content: "\E0A8"; }

.icon-search:before {
  content: "\E0A9"; }

.icon-search2:before {
  content: "\E0AA"; }

.icon-service-alt:before {
  content: "\E0AB"; }

.icon-service:before {
  content: "\E0AC"; }

.icon-settings:before {
  content: "\E0AD"; }

.icon-signal:before {
  content: "\E0AE"; }

.icon-simcard:before {
  content: "\E0AF"; }

.icon-small-home:before {
  content: "\E0B0"; }

.icon-small:before {
  content: "\E0B1"; }

.icon-smartphone-broadband:before {
  content: "\E0B2"; }

.icon-smiley:before {
  content: "\E0B3"; }

.icon-speedtest:before {
  content: "\E0B4"; }

.icon-sport:before {
  content: "\E0B5"; }

.icon-star-white:before {
  content: "\E0B6"; }

.icon-star:before {
  content: "\E0B7"; }

.icon-stock_management:before {
  content: "\E0B8"; }

.icon-stores:before {
  content: "\E0B9"; }

.icon-support-circle-24-7:before {
  content: "\E0BA"; }

.icon-support:before {
  content: "\E0BB"; }

.icon-table-columns:before {
  content: "\E0BC"; }

.icon-tablet-mobile:before {
  content: "\E0BD"; }

.icon-tablet:before {
  content: "\E0BE"; }

.icon-technician:before {
  content: "\E0BF"; }

.icon-telenor:before {
  content: "\E0C0"; }

.icon-teleohone-hang-up:before {
  content: "\E0C1"; }

.icon-telephone:before {
  content: "\E0C2"; }

.icon-thumb_down:before {
  content: "\E0C3"; }

.icon-thumb_right:before {
  content: "\E0C4"; }

.icon-thumb_up:before {
  content: "\E0C5"; }

.icon-tidal:before {
  content: "\E0C6"; }

.icon-time-period:before {
  content: "\E0C7"; }

.icon-time:before {
  content: "\E0C8"; }

.icon-topup:before {
  content: "\E0C9"; }

.icon-truck:before {
  content: "\E0CA"; }

.icon-tv:before {
  content: "\E0CB"; }

.icon-twitter-circle:before {
  content: "\E0CC"; }

.icon-twitter:before {
  content: "\E0CD"; }

.icon-unlocked:before {
  content: "\E0CE"; }

.icon-upload:before {
  content: "\E0CF"; }

.icon-usage:before {
  content: "\E0D0"; }

.icon-usb:before {
  content: "\E0D1"; }

.icon-user:before {
  content: "\E0D2"; }

.icon-veris:before {
  content: "\E0D3"; }

.icon-video:before {
  content: "\E0D4"; }

.icon-voice-broadband:before {
  content: "\E0D5"; }

.icon-water:before {
  content: "\E0D6"; }

.icon-wheel:before {
  content: "\E0D7"; }

.icon-youtube:before {
  content: "\E0D8"; }

.icon-zero-kr:before {
  content: "\E0D9"; }

.icon-zero:before {
  content: "\E0DA"; }

.icon-zip:before {
  content: "\E0DB"; }

.icon-zoom-out:before {
  content: "\E0DC"; }

.icon-zoom:before {
  content: "\E0DD"; }

/**
name: Icons
type: ui
desc: >
      *.circle-outline*: Icons with circle

      *&.circle-outline--middle*: For middle size

      *&.circle-outline--small*: For small size

      *.border-width-1*: Outline border width, only 1px available.


      *.circle-background*: Icons with background circle. Avilable colors:

      *&.blue*

      *&.green*

      *&.red*

      *&.yellow*

      *&.gray*

      *&.white*
examples:
  - name: Icons
    tmpl:
        include: icons.html
  - name: Icons with circle
    tmpl:
        include: icons-circle.html
  - name: Icons with background circle
    tmpl:
        include: icons-circle-background.html
*/
.circle-outline:before, .circle-background:before, .form-item--error [class^="icon-"], .form-item--toggle input:disabled ~ .form-item--toggle__switch [class^="icon-"]:before, .toggle__check:disabled ~ .form-item--toggle__switch [class^="icon-"]:before {
  top: 50%;
  transform: translate(0, -50%); }

.circle-background .icon, .modal-box__icon-box .icon, .loader--centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

.circle-outline {
  position: relative;
  text-align: center;
  box-sizing: border-box;
  display: block;
  width: 2em;
  height: 2em;
  line-height: 1; }
  .circle-outline:before {
    position: relative; }
  .circle-outline:after {
    content: "";
    border-radius: 50%;
    border: 0.02em;
    border-style: solid;
    position: absolute;
    width: 2em;
    height: 2em;
    top: 0;
    left: 0;
    box-sizing: border-box; }
  .circle-outline.circle-outline--small {
    width: 1.5em;
    height: 1.5em; }
    .circle-outline.circle-outline--small:after {
      width: 1.5em;
      height: 1.5em; }
  .circle-outline.circle-outline--middle {
    width: 1.8em;
    height: 1.8em; }
    .circle-outline.circle-outline--middle:after {
      width: 1.8em;
      height: 1.8em; }

.border-width-1:after {
  border-width: 1px; }

.circle-background {
  position: relative;
  text-align: center;
  box-sizing: border-box;
  display: block;
  width: 2em;
  height: 2em;
  line-height: 1; }
  .circle-background:before {
    z-index: 5;
    position: relative; }
  .circle-background:after {
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 2em;
    height: 2em;
    top: 0;
    left: 0;
    box-sizing: border-box; }
  .circle-background.with-border:after {
    border: 1px solid #d1d1d1; }
  .circle-background.blue:after {
    background: #038cd6; }
  .circle-background.green:after {
    background: #43c682; }
  .circle-background.red:after {
    background: #db5451; }
  .circle-background.gray:after {
    background: #f5f5f5; }
  .circle-background.white:after {
    background: #fff; }
  .circle-background.yellow:after {
    background: #ffb900; }
  .circle-background.yellow-light:after {
    background: #fce173; }
  .circle-background .icon {
    z-index: 2; }
  .circle-background__label {
    z-index: 2;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    position: relative; }

.amchart-color-blue {
  background: #038cd6; }

.amchart-color-green {
  background: #43c682; }

.amchart-color-yellow {
  background: #ffb900; }

.amchart-color-red {
  background: #db5451; }

.amchart-color-purple {
  background: #6b2377; }

.amchart-color-grey {
  background: #b8b8b8; }

.amchart-average-line {
  width: 15px;
  top: -4px;
  left: -5px;
  content: "";
  display: inline-block;
  position: relative;
  border-top: 1px dashed #666; }

.amchart {
  position: relative; }
  .amchart svg {
    display: block;
    height: 100%;
    width: 100%; }
  .amchart .with-action {
    cursor: pointer; }
  .amchart em {
    display: block;
    font-style: normal;
    font-size: 1.1em; }

.amchart-small {
  margin: auto;
  position: relative;
  width: 250px;
  height: 250px; }
  .amchart-small .amchart-doughnut-title,
  .amchart-small .amchart-doughnut-text,
  .amchart-small .amchart-doughnut-caption {
    display: block;
    text-align: center;
    position: absolute;
    height: 1em;
    width: 100%;
    z-index: 1;
    line-height: 1.6; }
  .amchart-small .amchart-doughnut-title {
    font-weight: 300;
    font-size: 30px;
    color: #474747;
    top: 37%; }
  .amchart-small .amchart-doughnut-text {
    color: #666;
    bottom: 40%; }
  .amchart-small .amchart-doughnut-caption {
    color: #666;
    bottom: 1%; }

.amchart-chart {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  .amchart-chart > div {
    z-index: 2; }

.amchart-double {
  height: 500px; }
  .amchart-double .amchart-chart {
    height: 50%; }

.amchart-small-legend {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer; }

@media only screen and (min-width: 769px) {
  .amchart-double {
    width: 400px;
    height: 250px; }
    .amchart-double .amchart-chart {
      width: 62.5%;
      height: 100%; }
  .amchart-small-legend {
    width: 40%;
    right: 0;
    left: auto;
    top: 0;
    bottom: 0;
    margin: auto; } }

.amchart-small-title,
.amchart-small-text,
.amchart-small-caption {
  display: block;
  text-align: center;
  position: absolute;
  height: 1em;
  width: 100%;
  z-index: 1;
  line-height: 1.6; }

.amchart-small-title {
  font-weight: 300;
  font-size: 30px;
  color: #474747;
  top: 37%; }

.amchart-small-text {
  color: #666;
  bottom: 40%; }

.amchart-small-caption {
  color: #666;
  bottom: 1%; }

.amchart-clickable:hover {
  cursor: pointer; }

.amchart-line {
  position: relative;
  height: 300px; }

.amchart-line-chart {
  height: 100%; }

.amchart-bars {
  position: relative;
  height: 300px; }

.amchart-bars-chart {
  height: 100%;
  line-height: 1.7; }

.amchart-bars-legends {
  display: none;
  position: absolute;
  top: 0;
  left: 0; }

.amchart-bars-legend {
  color: #666;
  float: left;
  margin-left: 1em; }

.amchart-bullet,
.amchart-guide {
  display: block;
  float: left;
  width: 6px;
  height: 6px;
  margin: 4px 8px 0 0;
  border-radius: 100%; }

.amchart-guide {
  height: 0;
  width: 2em;
  margin-top: 7px;
  border-top: 1px dashed #666;
  border-radius: 0; }

@media only screen and (min-width: 320px) {
  .amchart-bars-legends {
    display: block; }
  .amchart-bars-chart {
    padding-top: 20px; } }

@media only screen and (min-width: 768px) {
  .amchart-bars {
    height: 400px; }
  .amchart-bars-legends {
    left: auto;
    right: 10px; }
  .amchart-bars-legend {
    margin-left: 2em; } }

/**
name: Autocomplete
type: ui
desc: No modifiers and mixins need it for this component 
examples:
	Remote loading:
		<div class="form-item form-item--required" >
			<input type="text" data-component="autocomplete" data-autocomplete-url="/data/autocomplete.json" data-extensions="type-watch" />
		</div>
	Static loading:
		include: static-autocomplete.html
*/
.autocomplete {
  position: relative; }

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

	1. Button needs required structure, each text description has to be wrapped with element with class name 'button\_\_text' for text vertical aligning

	2. __Don't use icon's classes in button's attribute class__


	# Icons

	1. You can add icon both to the 'button\_\_label' and 'button\_\_label--success' elements

	2. All icons have property 'vertical-align' equal 'middle'

	3. If you want an icon for the button, you have to wrap 'button\_\_text' element with 'button\_\_label' element and add additional classes:

		1. Class name for icon's position:

			1. 'icon\-\-left' - uses :before for icon (hides :after). Icon has margin-right: 8px by default

			2. 'icon\-\-right' - uses :after for icon (hides :before). Icon has margin-left: 8px by default

		2. Class name for icon symbol


	# Animations

	1. Loading button state needs:

		1. Attribute 'data-loading="true"' for the button

		2. Element with class name 'button\_\_spinner' inside the button

	2. Loaded button state needs:

		1. Attribute 'data-loaded="true"' for the button

		2. Element with class name 'button\_\_label--success' inside the button

		3. Icon for success state can be added based on the same rules as for the basic icon

examples:
  - name: Default button
    tmpl: >
        <button class="button button--default">
        	<span class="button__label">Button default</span>
        </button>
  - name: Default button small
    tmpl: >
        <button class="button button--default button--small">
        	<span class="button__label">Button default</span>
        </button>
  - name: Default button with 'a' tag
    tmpl: >
        <a href="#" class="button button--default">
        	<span class="button__label">Button default</span>
        </a>
  - name: Grey for modal (button is visually identical with default, but with no special styling inside section--negative to avoid unwanted inheritance for modals)
    tmpl: >
        <button class="button button--modal">
        	<span class="button__label">Button modal</span>
        </button>
  - name: No background, but with changed color styles
    tmpl: >
        <button class="button button--naked">
        	<span class="button__label">Button naked</span>
        </button>
  - name: Underlined
    tmpl: >
        <button class="button button--underlined">
        	<span class="button__label">Button underlined</span>
        </button>
  - name: Green
    tmpl: >
        <button class="button button--success">
        	<span class="button__label">Button success</span>
        </button>
  - name: Blue
    tmpl: >
        <button class="button button--action">
        	<span class="button__label">Button blue</span>
        </button>
  - name: Blue dark
    tmpl: >
        <button class="button button--action-dark">
        	<span class="button__label">Button blue dark</span>
        </button>
  - name: Yellow
    tmpl: >
        <button class="button button--accept">
        	<span class="button__label">Button yellow</span>
        </button>
  - name: Yellow with next arrow
    tmpl: >
        <button class="button button--accept">
        	<span class="button__label icon--right icon-arrow-next">Next</span>
        </button>
  - name: Yellow small with next arrow
    tmpl: >
        <button class="button button--small button--accept">
        	<span class="button__label icon--right icon-arrow-next">Next</span>
        </button>
  - name: Yellow with previous arrow
    tmpl: >
        <button class="button button--accept">
        	<span class="button__label icon--left icon-arrow-prev">Prev</span>
        </button>
  - name: Link
    tmpl: >
        <a class="button button--link" href="#">Button link</a>
  - name: Link with arrow
    tmpl: >
        <a class="button button--link" href="#">
        	<span class="button__label icon--left icon-bullet">Button link</span>
        </a>
  - name: Inline button with arrow
    tmpl: >
        <button class="button button--link button--inline">
        	<span class="button__label icon--left icon-bullet">Button link</span>
        </button>
  - name: Blue next button
    tmpl: >
        <button class="button button--action">
        	<span class="button__label icon-arrow-next"></span>
        </button>
  - name: Blue prev button
    tmpl: >
        <button class="button button--action">
        	<span class="button__label icon-arrow-prev"></span>
        </button>
  - name: Grey with spinner
    tmpl:
    	include: grey-spinner.html
  - name: Blue with spinner
    tmpl:
    	include: blue-spinner.html
  - name: Yellow with spinner
    tmpl:
    	include: yellow-spinner.html
  - name: Button group
    tmpl: >
        <div class="button-group">
        	<button class="button button--default">
       			<span class="button__label">Button</span>
       		</button>
       		<button class="button button--default">
       			<span class="button__label">Button</span>
       		</button>
        </div>
  - name: Button with full width
    tmpl: >
        <button class="button button--default button--stretch">
       		<span class="button__label">Button</span>
        </button>
  - name: Button with vertical middle alignment
    tmpl: >
        <button class="button button--default align--middle">
       		<span class="button__label">Button</span>
        </button>
        <button class="button button--default button--small align--middle">
       		<span class="button__label">Button</span>
        </button>
  - name: Button with vertical bottom alignment
    tmpl: >
        <button class="button button--default align--bottom">
       		<span class="button__label">Button</span>
        </button>
        <button class="button button--default button--small align--bottom">
       		<span class="button__label">Button</span>
        </button>
  - name: Converter
    tmpl:
      include: converter.html
*/
.button, .form-checkbox--filter label {
  display: inline-block;
  vertical-align: top;
  height: 40px;
  max-width: 100%;
  min-width: 72px;
  padding: 0 16px;
  line-height: 38px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: all .125s;
  -webkit-appearance: none;
  background: none;
  text-decoration: none; }
  .button:hover, .form-checkbox--filter label:hover {
    text-decoration: none; }
  .button--small, .form-checkbox--filter label {
    font-size: 13px;
    line-height: 30px;
    height: 32px; }
  .button--stretch {
    width: 100%; }
  .button[disabled]:hover, .form-checkbox--filter label[disabled]:hover, .button[disabled], .form-checkbox--filter label[disabled] {
    color: #b8b8b8;
    border-color: #e8e8e8;
    background: #f5f5f5; }
  .button--modal, .button--default {
    border-color: #d1d1d1;
    background: linear-gradient(180deg, #fff, #f5f5f5);
    color: #474747; }
    .button--modal:hover, .button--default:hover {
      border-color: #b8b8b8;
      background: linear-gradient(180deg, #fff, #e8e8e8); }
    .button--modal.is-active, .button--default.is-active {
      border-color: #b8b8b8;
      background: #b8b8b8;
      color: #fff; }
    .button--modal.is-selected, .button--default.is-selected {
      background: #fff;
      color: #666; }
    .button--modal:focus, .button--default:focus {
      border-color: #038cd6; }
  .section--negative .button--default {
    border-color: transparent; }
    .section--negative .button--default:focus {
      border-color: #0f3b52; }
  .button--naked {
    color: #474747; }
    .button--naked:hover {
      color: #038cd6; }
    .button--naked[disabled]:hover, .button--naked[disabled] {
      color: #b8b8b8;
      border-color: transparent;
      background: transparent; }
    .section--negative .button--naked {
      color: #c0e2f5; }
      .section--negative .button--naked:hover {
        color: #fff; }
    .section--negative .button--naked[disabled]:hover,
    .section--negative .button--naked[disabled] {
      color: #c0e2f5; }
  .button--underlined .button__label {
    text-decoration: underline; }
  .button--underlined:hover .button__label {
    text-decoration: none; }
  .button--action {
    border-color: #0278b8;
    background: linear-gradient(180deg, #0296e5, #038cd6);
    color: #fff; }
    .button--action:hover {
      border-color: #00619e;
      background: linear-gradient(180deg, #0296e5, #0282c7); }
    .button--action:focus {
      border-color: #0f3b52; }
  .button--action-dark {
    border-color: #00619e;
    background: linear-gradient(180deg, #0068a8, #00619e);
    color: #fff; }
    .button--action-dark:hover {
      border-color: #003758;
      background: linear-gradient(180deg, #0068a8, #005c96); }
    .button--action-dark:focus {
      border-color: #0f3b52; }
    .section--negative .button--action-dark {
      color: #fff;
      background-color: #0068a8; }
    .section--negative .button--action-dark[disabled]:hover,
    .section--negative .button--action-dark[disabled] {
      color: #a7c1d1;
      border-color: #00619e;
      background: linear-gradient(180deg, #0068a8, #00619e); }
  .button--success {
    border-color: #008e52;
    background: linear-gradient(180deg, #43c682, #02a962);
    color: #fff; }
  .button--accept {
    border-color: #e0a500;
    background: linear-gradient(180deg, #fce173, #ffb900);
    color: #474747; }
    .button--accept:hover {
      border-color: #e0a500;
      background: linear-gradient(180deg, #fce173, #f5b202); }
    .button--accept[disabled] {
      border-color: #e8e8e8;
      background: #f5f5f5;
      color: #b8b8b8; }
    .section--negative .button--accept {
      background: linear-gradient(180deg, #fce173, #ffb900);
      border-color: transparent; }
      .section--negative .button--accept:focus {
        border-color: #0f3b52; }
      .section--negative .button--accept:hover {
        background: linear-gradient(180deg, #fce173, #f5b202); }
    .section--negative .button--accept[disabled]:hover,
    .section--negative .button--accept[disabled] {
      background: linear-gradient(180deg, #fce173, #ffb900);
      border-color: transparent; }
  .button--link {
    border-color: transparent;
    color: #038cd6; }
  .button--inline {
    height: auto;
    line-height: inherit;
    padding: 0;
    border: 0; }
  .button[data-loading="true"], .form-checkbox--filter label[data-loading="true"], .button[data-loaded="true"], .form-checkbox--filter label[data-loaded="true"] {
    cursor: default; }
  .button[data-loaded="true"], .form-checkbox--filter label[data-loaded="true"], .button[data-loaded="true"]:hover, .form-checkbox--filter label[data-loaded="true"]:hover, .button[data-loaded="true"]:focus, .form-checkbox--filter label[data-loaded="true"]:focus {
    border-color: #008e52;
    background: linear-gradient(180deg, #43c682, #02a962);
    color: #43c682; }
  .button__label, .button__label--success {
    vertical-align: top;
    height: 100%;
    transition: top 0.2s ease;
    position: relative; }
  .button__label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap; }
    .button[data-loading="true"] .button__label, .form-checkbox--filter label[data-loading="true"] .button__label,
    .button[data-loaded="true"] .button__label, .form-checkbox--filter label[data-loaded="true"] .button__label {
      opacity: 0;
      top: -100%; }
    .button[data-loaded="true"] .button__label, .form-checkbox--filter label[data-loaded="true"] .button__label {
      display: block;
      width: 100%; }
    .button__label--success {
      display: block;
      width: 0;
      color: #fff; }
      .button__label--success:before {
        animation: buttonSuccess 0.3s cubic-bezier(0.535, 0.235, 0.22, 1.63); }
      .button[data-loaded="true"] .button__label--success, .form-checkbox--filter label[data-loaded="true"] .button__label--success {
        display: inline-block;
        transform: translate(0, 0); }
        .button[data-loaded="true"] .button__label--success:before, .form-checkbox--filter label[data-loaded="true"] .button__label--success:before {
          left: 0;
          opacity: 1;
          padding-right: 5px; }
  .button__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 150%);
    transition: transform 0.2s ease; }
    .button[data-loading="true"] .button__spinner, .form-checkbox--filter label[data-loading="true"] .button__spinner {
      transform: translate(-50%, -50%); }
    .button[data-loaded="true"] .button__spinner, .form-checkbox--filter label[data-loaded="true"] .button__spinner {
      transform: translate(-50%, -150%); }
  .button [class*="icon-"]:before, .form-checkbox--filter label [class*="icon-"]:before {
    line-height: 40px; }
  .button--small [class*="icon-"]:before, .form-checkbox--filter label [class*="icon-"]:before {
    line-height: 32px; }
  .button--inline [class*="icon-"]:before {
    line-height: inherit; }
  .button .icon--left:before, .form-checkbox--filter label .icon--left:before,
  .button .icon--right:before, .form-checkbox--filter label .icon--right:before {
    position: absolute;
    top: 0; }
  .button .icon--left, .form-checkbox--filter label .icon--left {
    padding-left: 18px; }
    .button .icon--left.icon-thumb-up, .form-checkbox--filter label .icon--left.icon-thumb-up {
      padding-left: 25px; }
    .button .icon--left:before, .form-checkbox--filter label .icon--left:before {
      left: 0; }
  .button .icon--right, .form-checkbox--filter label .icon--right {
    padding-right: 18px; }
    .button .icon--right:before, .form-checkbox--filter label .icon--right:before {
      right: 0; }
  .button .icon-bullet:before, .form-checkbox--filter label .icon-bullet:before {
    font-size: 7px;
    margin-top: -1px; }
  .button .icon-arrow-down:before, .form-checkbox--filter label .icon-arrow-down:before {
    font-size: 10px; }
  .button .icon-arrow-next:before, .form-checkbox--filter label .icon-arrow-next:before, .button .pager__button.next:before, .form-checkbox--filter label .pager__button.next:before, .button .pager > span > span.next:before, .form-checkbox--filter label .pager > span > span.next:before, .button .next.pager__elipsis:before, .form-checkbox--filter label .next.pager__elipsis:before,
  .button .icon-arrow-prev:before, .form-checkbox--filter label .icon-arrow-prev:before,
  .button .pager__button.previous:before, .form-checkbox--filter label .pager__button.previous:before,
  .button .pager > span > span.previous:before, .form-checkbox--filter label .pager > span > span.previous:before,
  .button .previous.pager__elipsis:before, .form-checkbox--filter label .previous.pager__elipsis:before {
    font-size: 10px;
    font-weight: bold; }

.button-group .button, .button-group .form-checkbox--filter label, .form-checkbox--filter .button-group label {
  width: 40%;
  margin-right: 10px; }
  .button-group .button:first-child, .button-group .form-checkbox--filter label:first-child, .form-checkbox--filter .button-group label:first-child {
    margin-right: 0; }
  @media only screen and (max-width: 480px) {
    .button-group .button, .button-group .form-checkbox--filter label, .form-checkbox--filter .button-group label {
      width: 100%;
      margin-right: 0; }
      .button-group .button:first-child, .button-group .form-checkbox--filter label:first-child, .form-checkbox--filter .button-group label:first-child {
        margin-bottom: 10px; } }

@keyframes buttonSuccess {
  from {
    opacity: 0;
    left: -50px; }
  to {
    opacity: 1;
    left: 0; } }

/**
name: Toggle filter
type: ui
desc: >
	# Structure

	1. filter toggle needs required structure

	# Icons

	1. position of icons changed by changing class 'icon-left' to 'icon-right'

	2. by default flter toggle has plus icon, and can be changed to minus icon by adding class 'is-expanded' to button with class 'filter-toggle'. in case of using toggle filter in collapse this class adding by js

	3. icons have to sizes: default and the large one. it can be changed by adding class 'filter-toggle--large' to button with class 'filter-toggle'

examples:
	-
		name: Filter toggle plus (default closed state for using in collapse)
		tmpl: >
			<button class="filter-toggle">
				<span class="filter-toggle__label icon-left">
					<span class="filter-toggle__text">default title</span>
				</span>
			</button>
	-
		name: Filter toggle minus (opened state for using in collapse)
		tmpl: >
			<button class="filter-toggle is-expanded">
				<span class="filter-toggle__label icon-left">
					<span class="filter-toggle__text">default title</span>
				</span>
			</button>
	-
		name: Filter toggle with icon on the right
		tmpl: >
			<button class="filter-toggle">
				<span class="filter-toggle__label icon-right">
					<span class="filter-toggle__text">default title</span>
				</span>
			</button>
	-
		name: Filter toggle large
		tmpl: >
			<button class="filter-toggle filter-toggle--large">
				<span class="filter-toggle__label icon-left">
					<span class="filter-toggle__text">default title</span>
				</span>
			</button>
	-
		name: Filter toggle (how it using with collapse)
		tmpl: >
			<div class="clear padding-leader--xsmall padding-trailer--xsmall">
				<button class="filter-toggle" data-component="collapse" data-alias="filterToggle">
					<span class="filter-toggle__label icon-left">
						<span class="filter-toggle__text">default title</span>
					</span>
				</button>
			</div>
			<div class="collapse__target collapse--closed" data-element="filterToggle:collapseTarget">
				<div class="padding-whole border" data-element="filterToggle:collapseContent">
					<p>lorem ipsum dolor sit amet</p>
					<p>lorem ipsum dolor sit amet</p>
					<p>lorem ipsum dolor sit amet</p>
				</div>
			</div>
*/
.filter-toggle {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  color: #474747;
  outline: none;
  text-align: left; }
  .filter-toggle__label {
    position: relative;
    display: inline-block;
    vertical-align: top; }
    .filter-toggle--large .filter-toggle__label {
      line-height: 24px; }
    .filter-toggle__label:before {
      content: "\E064";
      font-size: 18px;
      position: absolute;
      top: 0; }
      .filter-toggle.is-expanded .filter-toggle__label:before {
        content: "\E063"; }
      .filter-toggle--large .filter-toggle__label:before {
        font-size: 24px;
        top: -1px; }
    .filter-toggle__label.icon-left {
      padding-left: 20px; }
      .filter-toggle--large .filter-toggle__label.icon-left {
        padding-left: 30px; }
      .filter-toggle__label.icon-left:before {
        left: 0; }
    .filter-toggle__label.icon-right {
      padding-right: 20px; }
      .filter-toggle--large .filter-toggle__label.icon-right {
        padding-right: 26px; }
      .filter-toggle__label.icon-right:before {
        right: 0; }
  .filter-toggle__text {
    display: inline-block;
    vertical-align: top; }

/**
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"'.

examples:
	- name: Default carousel
	  tmpl:
	  	  include: carousel.html
*/
.carousel {
  overflow: hidden;
  position: relative;
  width: 100%; }
  .carousel__holder {
    position: relative;
    width: 99999px; }
  .carousel__item {
    float: left; }
  .carousel__prev, .carousel__next {
    background-color: #0278b8;
    border-radius: 50%;
    color: #fff;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 10px;
    transition: opacity .2s ease-in;
    font-size: 30px;
    padding: 5px 7px 5px 3px;
    transform: translate(0, -50%); }
    .carousel__prev.disabled, .carousel__next.disabled {
      cursor: default;
      background-color: #d1d1d1; }
    .carousel__prev i, .carousel__next i {
      display: block;
      line-height: 1; }
  .carousel__next {
    left: auto;
    padding: 5px 3px 5px 7px;
    right: 10px; }
  .carousel:hover .carousel__prev,
  .carousel:hover .carousel__next {
    opacity: .7; }
    .carousel:hover .carousel__prev:hover,
    .carousel:hover .carousel__next:hover {
      opacity: 1; }

.doughnut {
  display: inline-block;
  position: relative; }
  .doughnut .button--plain {
    cursor: default; }
  .doughnut--checkable .button--plain {
    cursor: pointer; }
  .doughnut--big .doughnut__main {
    height: 100%;
    position: relative;
    text-align: center; }
  .doughnut--big {
    font-weight: normal;
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 40px 0 0 10px; }
  .doughnut__chart {
    max-width: 100%;
    height: auto !important; }
    .doughnut--big .doughnut__chart {
      display: inline-block; }
  .doughnut__legend {
    font-weight: normal;
    color: #666;
    padding: 45px 0 0 15px; }
    .doughnut__legend__color {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-bottom: 1px; }
    .doughnut__legend__label {
      margin-bottom: 10px;
      font-weight: normal; }
  .doughnut__data {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%; }
    .doughnut__data div {
      margin: 0; }
    .doughnut__data .flag {
      height: 100%; }
    .doughnut__data__title {
      font-weight: bold;
      color: #474747; }
      .doughnut--big .doughnut__data__title {
        font-size: 25px; }
    .doughnut__data__block {
      display: none; }
      .doughnut__data__block:first-child {
        display: block; }
  .doughnut__label {
    position: absolute;
    bottom: -15px;
    width: 100%; }

.line-chart {
  clear: both;
  width: 100%;
  height: 300px;
  margin-top: 20px; }
  .line-chart #flotTip {
    border: 1px solid #0278b8;
    border-radius: 2px;
    background-clip: padding-box;
    background-color: #038cd6;
    background-image: linear-gradient(to bottom, #0278b8 0%, #038cd6 100%);
    color: #fff;
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    padding: 10px 15px;
    text-align: center;
    z-index: 999; }
  .line-chart .tooltip__date {
    font-size: 11px;
    margin-bottom: 5px; }
  .line-chart .flot-tick-label {
    color: #c0e2f5;
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    line-height: 1; }
  .line-chart .axisLabels {
    color: #fff !important;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    line-height: 1; }
  .line-chart .xaxisLabel {
    margin-top: -15px; }
  .line-chart .yaxisLabel {
    background-color: #038cd6;
    left: auto !important;
    padding: 0 0 5px 5px;
    right: 0;
    transform: translate(0, 0) rotate(0) !important; }
  .line-chart .flot-x-axis .flot-tick-label {
    display: none;
    margin-top: 10px; }
    .line-chart .flot-x-axis .flot-tick-label:first-child, .line-chart .flot-x-axis .flot-tick-label:last-child {
      display: block; }

.chart-info-panel--white {
  background-color: #fff; }

.chart-info-panel ul li {
  display: inline-block;
  margin-left: 10px; }
  .chart-info-panel ul li li:first-child {
    margin-left: 0; }
  .chart-info-panel ul li .status-dot {
    margin: 0 5px; }

/**
name: Collapse
type: ui
modifiers:
	--closed: Sets default hidden state for collapse content
examples:
	- name: Simple collapsible content
	  tmpl:
		  include: simple.html
	- name: Simple collapsible content with additional close button
	  tmpl:
		  include: simple-with-closer.html
	- name: Collapsible content with labels
	  tmpl:
		  include: with-labels.html
	- name: Grpips of collapsible contents
	  tmpl:
		  include: groups.html
	- name: Collapsible content with radio triggers
	  tmpl:
		  include: with-radio-triggers.html
*/
.collapse__target {
  position: relative;
  overflow: hidden; }
  .collapse__target.collapsing {
    transition: height 1s ease; }

.collapse--closed {
  height: 0; }

/**
  name: color
  type: ui
*/
/*.sg-lines-and-fills{
	$root: &;

	&__line{
	  border-top: 1px solid $color-silver-grey;
	}

    &__line-light{
	  border-top: 1px solid $color-smoke-grey;
	}

	&__line-negative{
	  border-top: 1px solid rgba($color-white, 0.3);
	  position: relative;
	  top: -25px;
	}

    &__colors-bg{
	  height: $section-spacing;

	   > div {
		width: 20%;
		float: left;
		height: 100%;
	  }
	}
 }*/
.box--default {
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background-color: #f5f5f5; }
  .box--default-dark-border {
    background-color: #f5f5f5;
    border: 1px solid #d1d1d1; }

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

.box--blue {
  background-color: #038cd6; }

.box--yellow {
  background-color: #ffb900; }

.box--yellow-light {
  background-color: #fce173; }

.box--purple {
  background-color: #6b2377; }

.box--green {
  background-color: #43c682; }

.box--red {
  background-color: #db5451; }

.box--greyed {
  background-color: #f5f5f5; }

.box--grey {
  background-color: #f5f5f5; }

.box--grey-dark {
  background-color: #666; }

.box--black-light {
  background-color: #474747; }

.box--gradient-black {
  background: linear-gradient(180deg, #404040, #2b2b2b); }

.box img {
  max-width: 100%; }

.box--expand-above-border {
  margin: -1px; }

.box--inner-shadow-left, .box--inner-shadow-right {
  position: relative; }
  .box--inner-shadow-left:before, .box--inner-shadow-right:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 3%, transparent);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 3%, transparent);
    content: ""; }

.box--inner-shadow-right:before {
  right: 0;
  left: auto;
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.03) 3%, transparent);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.03) 3%, transparent); }

.box--default-dark-border {
  overflow: hidden; }
  .box--default-dark-border img {
    max-width: 100%; }

.box--white-bottom-gradient {
  position: relative;
  padding-top: 10px;
  padding-bottom: 15px;
  border-bottom: 3px solid #038cd6;
  z-index: 10; }
  .box--white-bottom-gradient:before {
    content: "";
    z-index: 3;
    position: absolute;
    bottom: -3px;
    left: 0;
    background-color: #6eb45b;
    background-image: -webkit-linear-gradient(left, #6eb45b, #2b9ba8, #038cd6);
    background-image: linear-gradient(to right, #6eb45b, #2b9ba8, #038cd6);
    height: 3px;
    width: 100%; }
  .box--white-bottom-gradient + .border,
  .box--white-bottom-gradient + .block--col--dark,
  .box--white-bottom-gradient + .block--content--dark,
  .box--white-bottom-gradient + .box--default,
  .box--white-bottom-gradient + .box--default-dark-border {
    border-top: 0; }

.box--white-top-gradient {
  position: relative;
  border-top: 3px solid #038cd6;
  margin-top: 30px; }
  .box--white-top-gradient:before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    background-image: linear-gradient(90deg, #43c682, #1db7bb, #038cd6);
    height: 3px;
    width: 100%; }

/*Colours and backgrounds*/
/*.sg-color{
    $root: &;

    &__row{
	  margin-right: $large-spacing-unit;
	  overflow: hidden;
	  float: left;
	  width: 37.5%;
	  max-width: 21em;
	  margin-bottom: 2em;

	  &--single{
		max-width: 7em;
		width: 33.32%;
		margin-right: $small-spacing-unit;

		& .sg-color__variant{
		  width: 100%;
		  padding-top: 100%;
		}
	  }
	}

	@mixin until($bp-medium) {
	  @media only screen and (max-width: $bp-medium) {
		&__row {
		  float: none;
		  display: block;
		  width: 100%
		}
	  }
	}


  @mixin until($bp-medium) {
	@media only screen and (max-width: $bp-medium) {
	  &__row--single {
		float: left;
		width: 33.32%;
		margin-right: $small-spacing-unit;
	  }
	}
  }

    &__variant{
	  display: none;
	  position: relative;
	  padding: $base-spacing-unit;

	  &[data-color="telenor-blue"]{
		background: $color-telenor-blue;
		display: block;

		&:after{
		  content: "#038cd6";
		}
	  }

	  &[data-color="telenor-green"]{
		background: $color-telenor-green;
		display: block;

		&:after{
		  content: "#43c682";
		}
	  }

	  &[data-color="telenor-red"]{
		background: $color-telenor-red;
		display: block;

		&:after{
		  content: "#db5451";
		}
	  }

	  &[data-color="telenor-yellow"]{
		background: $color-telenor-yellow;
		display: block;

		&:after{
		  content: "#ffb900";
		}
	  }

	  &[data-color="telenor-purple"]{
		background: $color-telenor-purple;
		display: block;

		&:after{
		  content: "#6b2377";
		}
	  }

	  &[data-color="telenor-white"]{
		background: $color-white;
		display: block;

		&:after{
		  content: "#fff";
		}
	  }

	  &[data-color="telenor-white-grey"]{
		background: $color-paper-white;
		display: block;

		&:after{
		  content: "#f5f5f5";
		}
	  }

	  &[data-color="telenor-white-dark"]{
		background: $color-smoke-grey;
		display: block;

		&:after{
		  content: "#e8e8e8";
		}
	  }

	  &[data-color="telenor-grey-lighter"]{
		background: #dfdfdf;
		display: block;

		&:after{
		  content: "#dfdfdf";
		}
	  }

	  &[data-color="telenor-grey-light"]{
		background: $color-silver-grey;
		display: block;

		&:after{
		  content: "#d1d1d1";
		}
	  }

	  &[data-color="telenor-grey"]{
		background: $color-smoke-grey;
		display: block;

		&:after{
		  content: "#e8e8e8";
		}
	  }

	  &[data-color="telenor-grey-middle"]{
		background: $color-steel-grey;
		display: block;

		&:after{
		  content: "#b8b8b8";
		}
	  }

	  &[data-color="telenor-grey-dark"]{
		background: #757575;
		display: block;

		&:after{
		  content: "#757575";
		}
	  }

	  &[data-color="telenor-black-light"]{
		background: $color-graphite-black;
		display: block;

		&:after{
		  content: "#474747";
		}
	  }

	  &[data-color="gradient-greenblue"]{
	    //background: -webkit-linear-gradient(0deg, #43c682, #1db7bb, #038cd6);
		background: $gradient-greenblue;
		display: block;

		  &:after{
			content: "linear-gradient(90deg, #43c682, #1db7bb, #038cd6)";
		  }
	  }

	  &[data-color="gradient-yellowred"]{
		//background: -webkit-linear-gradient(270deg, #fff044, #f8b97a, #ee3d49);
		background: $gradient-yellowred;
		display: block;

		  &:after{
			content: "linear-gradient(180deg, #fff044, #f8b97a, #ee3d49)";
		  }
	  }

	  &[data-color="gradient-blueblue"]{
		//background: -webkit-linear-gradient(270deg, #59c9ef, #5376b6);
		background: $gradient-blueblue;
		display: block;

		  &:after{
			content: "linear-gradient(180deg, #59c9ef, #5376b6)";
		  }
	  }

	  &[data-color="gradient-pinkpurple"]{
		//background: -webkit-linear-gradient(270deg, #f37780, #e66cb9, #944ca0);
		background: $gradient-pinkpurple;
		display: block;

		  &:after{
			content: "linear-gradient(180deg, #f37780, #e66cb9, #944ca0)";
		  }
	  }

	  &--background{
		display: block;
		background: $color-telenor-blue url("../img/main_bg.png") 63% top;
		background-size: cover;
		height: 500px;
	  }
	}

    &--neg{
	  color: $color-white;
	}
}*/
/*fonts*/
/*.sg-fonts{
    $root: &;
    word-wrap: normal;


	 &__arial-regular{
	   font-size: 2.25rem;
	   line-height: 1;
	   font-family: arial, sans-serif;
	 }

     &__arial-bold{
	   font-size: 2.25rem;
	   line-height: 1;
	   font-family: arial, sans-serif;
	   font-weight: bold
	 }

     &__telenor-light{
	   font-size: 2.25rem;
	   line-height: 1;
	   font-family: "telenorlight", sans-serif;
	   font-weight: normal;

	     strong{
		   font-family: "telenor", sans-serif;
		   font-weight: bold
	   }
	 }

     &__telenor-regular{
	   font-size: 2.25rem;
	   line-height: 1;
	   font-family: "telenor", sans-serif;
	   font-weight: normal
	 }

     &__telenor-bold{
	   font-size: 2.25rem;
	   line-height: 1;
	   font-family: "telenor", sans-serif;
	   font-weight: bold
	 }

     &__example{
	   line-height: 1.25em;
	 }
}

.text{
  $root: &;
  &--content{

	mark{
	  background-color: $color-telenor-blue;
	  color: $color-white;
	  padding: 0 2px;
	}

	a {
	  color: $color-telenor-blue;
	}

  }
}*/
/**
  name: Datatables
  type: ui
  modifiers:
      --loadable: Loading table, after that shows rows with informations
      --default: Default table
      --adv: Base layout of table with hover state
      --without-hover: Table without hover state
      --zebra: Table with odd/even colors
  examples:
    - name: Table default
      tmpl: >
        <table class="table table--default">
            <thead>
                <tr>
                    <th>Column1</th>
                    <th>Column2</th>
                    <th>Column3</th>
                    <th>Column4</th>
                    <th>Column5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12.05.2015</td>
                    <td>Order created</td>
                    <td>12345678901235</td>
                    <td>12.05.2015, 14:32</td>
                    <td>Bredbånd op</td>
                </tr>
                <tr>
                    <td>12.05.2015</td>
                    <td>Order created</td>
                    <td>12345678901235</td>
                    <td>12.05.2015, 14:32</td>
                    <td>Bredbånd op</td>
                </tr>
                <tr>
                    <td>12.05.2015</td>
                    <td>Order created</td>
                    <td>12345678901235</td>
                    <td>12.05.2015, 14:32</td>
                    <td>Bredbånd op</td>
                </tr>
            </tbody>
        </table>
    - name: Table with sorting and hover
      tmpl:
        include: table.html
    - name: Table zebra with expandable row
      tmpl:
        include: table-expandable.html
*/
@media only screen and (max-width: 768px) {
  .dataTables_wrapper:after {
    content: "";
    display: table;
    clear: both; } }

.table {
  border: none;
  width: 100%;
  /* expandable table row */ }
  .table td.table__expand-cell {
    padding: 0 0 0 20px; }
    .table td.table__expand-cell--middle {
      padding-left: 0;
      padding-right: 0; }
  .table td.table__loading {
    padding: 45px 0; }
    .table td.table__loading:hover {
      cursor: default;
      background: transparent; }
      .table td.table__loading:hover:before {
        opacity: 0; }
  .table th.table__expand-cell {
    padding: 0 0 0 20px; }
  .table .icon-expand {
    color: #666;
    display: block;
    font-size: 22px;
    cursor: pointer;
    line-height: 20px; }
    .table .icon-expand:before {
      content: "\E064";
      position: relative; }
  .table .has-hidden-icons .icon-expand {
    display: none; }
  .table .expanded td,
  .table .parent td {
    border-bottom: none 0; }
  .table .expanded .icon-expand:before,
  .table .parent .icon-expand:before {
    content: "\E063"; }
  .table .dataTables_empty {
    font-style: italic;
    text-align: center;
    padding: 45px 0; }
    .table .dataTables_empty:hover {
      cursor: default;
      background: transparent; }
      .table .dataTables_empty:hover:before {
        opacity: 0; }
  .table--default thead tr th {
    padding: 0.5rem 20px; }
  .table--default td {
    padding: 10px 20px;
    vertical-align: top; }
  .table--default tr.expanded {
    border-bottom: none 0; }
  .table--default tr.bill-subtotal {
    border-bottom: 0; }
  .table--default thead tr:last-child th {
    line-height: 1; }
  .table--lines thead tr:last-child {
    border-bottom: 1px solid #e8e8e8; }
  .table--lines thead tr:last-child th {
    line-height: 1;
    padding: 0.5rem 1.25rem; }
  .table--lines tr {
    border-bottom: 1px solid #e8e8e8; }
  .table--without-padding th,
  .table--without-padding td {
    padding: 2px;
    text-align: left;
    vertical-align: top; }
  .table--adv {
    border-bottom: 1px solid #d1d1d1; }
    .table--adv thead th {
      border-bottom: 1px solid #d1d1d1;
      padding: 30px 20px 5px;
      line-height: 1; }
    .table--adv tbody .row--pending {
      font-style: italic; }
      .table--adv tbody .row--pending td {
        background: #f5f5f5; }
    .table--adv tbody .cell--type {
      font-style: normal; }
    .table--adv tbody .cell--account {
      color: #666;
      font-size: .7rem; }
    .table--adv th,
    .table--adv td {
      background-color: #fff;
      vertical-align: middle;
      padding: 10px 20px; }
      .table--adv th.form-checkbox,
      .table--adv td.form-checkbox {
        overflow: hidden;
        line-height: 8px; }
        .table--adv th.form-checkbox label,
        .table--adv td.form-checkbox label {
          padding: 9999px;
          margin: -9999px;
          display: block; }
      @media only screen and (max-width: 768px) {
        .table--adv th + td:last-child,
        .table--adv th + th:last-child,
        .table--adv td + td:last-child,
        .table--adv td + th:last-child {
          text-align: right; }
        .table--adv th.control + td:last-child,
        .table--adv th.control + th:last-child,
        .table--adv th.table__expand-cell + td:last-child,
        .table--adv th.table__expand-cell + th:last-child,
        .table--adv td.control + td:last-child,
        .table--adv td.control + th:last-child,
        .table--adv td.table__expand-cell + td:last-child,
        .table--adv td.table__expand-cell + th:last-child {
          text-align: left; } }
    .table--adv td {
      border-bottom: 1px solid #e8e8e8; }
    .table--adv tbody tr:hover, .table--adv tbody tr.hover, .table--adv tbody tr.row-selected {
      cursor: pointer; }
      .table--adv tbody tr:hover td, .table--adv tbody tr.hover td, .table--adv tbody tr.row-selected td {
        background-color: #f5f5f5; }
        @media only screen and (max-width: 768px) {
          .table--adv tbody tr:hover td, .table--adv tbody tr.hover td, .table--adv tbody tr.row-selected td {
            background: none; } }
        .table--adv tbody tr:hover td:first-child, .table--adv tbody tr.hover td:first-child, .table--adv tbody tr.row-selected td:first-child {
          position: relative; }
          .table--adv tbody tr:hover td:first-child:before, .table--adv tbody tr.hover td:first-child:before, .table--adv tbody tr.row-selected td:first-child:before {
            content: " ";
            position: absolute;
            display: block;
            left: 0;
            top: 0;
            height: 100%;
            width: 3px;
            background-color: #038cd6; }
            @media only screen and (max-width: 768px) {
              .table--adv tbody tr:hover td:first-child:before, .table--adv tbody tr.hover td:first-child:before, .table--adv tbody tr.row-selected td:first-child:before {
                display: none; } }
      .table--adv tbody tr:hover.row--disable td:after, .table--adv tbody tr.hover.row--disable td:after, .table--adv tbody tr.row-selected.row--disable td:after {
        content: ""; }
      .table--adv tbody tr:hover.row--disable td:first-child:before, .table--adv tbody tr.hover.row--disable td:first-child:before, .table--adv tbody tr.row-selected.row--disable td:first-child:before {
        background-color: #f5f5f5; }
      .table--adv tbody tr:hover.row--warning td, .table--adv tbody tr:hover.row--error td, .table--adv tbody tr.hover.row--warning td, .table--adv tbody tr.hover.row--error td, .table--adv tbody tr.row-selected.row--warning td, .table--adv tbody tr.row-selected.row--error td {
        background-color: #faf3f2; }
        .table--adv tbody tr:hover.row--warning td:first-child:before, .table--adv tbody tr:hover.row--error td:first-child:before, .table--adv tbody tr.hover.row--warning td:first-child:before, .table--adv tbody tr.hover.row--error td:first-child:before, .table--adv tbody tr.row-selected.row--warning td:first-child:before, .table--adv tbody tr.row-selected.row--error td:first-child:before {
          background-color: #db5451; }
        .table--adv tbody tr:hover.row--warning td:first-child.form-checkbox [type=checkbox]:checked ~ label:before, .table--adv tbody tr:hover.row--error td:first-child.form-checkbox [type=checkbox]:checked ~ label:before, .table--adv tbody tr.hover.row--warning td:first-child.form-checkbox [type=checkbox]:checked ~ label:before, .table--adv tbody tr.hover.row--error td:first-child.form-checkbox [type=checkbox]:checked ~ label:before, .table--adv tbody tr.row-selected.row--warning td:first-child.form-checkbox [type=checkbox]:checked ~ label:before, .table--adv tbody tr.row-selected.row--error td:first-child.form-checkbox [type=checkbox]:checked ~ label:before {
          color: #db5451; }
      .table--adv tbody tr:hover a.button:hover, .table--adv tbody tr.hover a.button:hover, .table--adv tbody tr.row-selected a.button:hover {
        text-decoration: none; }
      .table--adv tbody tr:hover.drop-row td, .table--adv tbody tr.hover.drop-row td, .table--adv tbody tr.row-selected.drop-row td {
        background: none; }
        .table--adv tbody tr:hover.drop-row td:first-child:before, .table--adv tbody tr.hover.drop-row td:first-child:before, .table--adv tbody tr.row-selected.drop-row td:first-child:before {
          display: none; }
  .table--without-sorting thead tr:hover, .table--without-sorting thead tr.hover, .table--without-sorting thead tr.row-selected {
    cursor: default; }
  .table--without-hover tbody tr td {
    cursor: default; }
  .table--without-hover tbody tr:hover td {
    background-color: #fff; }
    .table--without-hover tbody tr:hover td:first-child {
      position: relative; }
      .table--without-hover tbody tr:hover td:first-child:before {
        display: none; }
  .table--zebra > tbody > tr .table-wrapper {
    position: relative;
    z-index: 1; }
  .table--zebra > tbody > tr:nth-child(odd) > td .table-wrapper {
    background: #f5f5f5;
    border: 1px solid #e8e8e8; }
    .table--zebra > tbody > tr:nth-child(odd) > td .table-wrapper:after, .table--zebra > tbody > tr:nth-child(odd) > td .table-wrapper:before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      left: 30px; }
    .table--zebra > tbody > tr:nth-child(odd) > td .table-wrapper:after {
      border-bottom: 8px solid #f5f5f5;
      top: -7px; }
    .table--zebra > tbody > tr:nth-child(odd) > td .table-wrapper:before {
      border-bottom: 8px solid #d1d1d1;
      top: -8px; }
  .table--zebra > tbody > tr:nth-child(odd) + .drop-row > td {
    background: #fff; }
    .table--zebra > tbody > tr:nth-child(odd) + .drop-row > td table thead th {
      background: #fff; }
  .table--zebra > tbody > tr:nth-child(odd) + .drop-row .drop-item-holder {
    background: #f5f5f5; }
    .table--zebra > tbody > tr:nth-child(odd) + .drop-row .drop-item-holder:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      z-index: 4;
      top: -8px;
      left: 50%;
      margin-left: -8px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #f5f5f5;
      left: 43px; }
  .table--zebra > tbody > tr:nth-child(even) > td {
    background: #f5f5f5; }
    .table--zebra > tbody > tr:nth-child(even) > td .table-wrapper {
      background: #fff;
      border: 1px solid #d1d1d1; }
      .table--zebra > tbody > tr:nth-child(even) > td .table-wrapper:after, .table--zebra > tbody > tr:nth-child(even) > td .table-wrapper:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        left: 30px; }
      .table--zebra > tbody > tr:nth-child(even) > td .table-wrapper:after {
        border-bottom: 8px solid #fff;
        top: -7px; }
      .table--zebra > tbody > tr:nth-child(even) > td .table-wrapper:before {
        border-bottom: 8px solid #d1d1d1;
        top: -8px; }
  .table--zebra > tbody > tr.child > td, .table--zebra > tbody > tr.drop-row > td {
    background: #fff; }
  .table--small td.form-checkbox {
    line-height: 8px; }
  .table--order {
    font-weight: 300;
    margin-top: 20px;
    border-collapse: collapse; }
    .table--order img {
      max-height: 130px;
      width: auto; }
    .table--order th {
      font-weight: bold;
      font-size: 14px;
      line-height: 60px;
      padding: 0 0 0 20px;
      border: 1px solid #d1d1d1;
      border-width: 1px 0 1px 1px; }
      .table--order th:first-child {
        border-width: 1px 0; }
    .table--order td {
      padding: 20px 20px 10px;
      border: 1px solid #d1d1d1;
      line-height: normal;
      float: none !important;
      display: table-cell !important;
      margin-right: 0 !important; }
      .table--order td:first-child {
        text-align: center; }
      .table--order td.dark {
        background: #f5f5f5; }
      .table--order td.right-align {
        padding: 20px;
        text-align: right;
        padding-right: 30px; }
        .table--order td.right-align--large {
          padding-right: 178px; }
      .table--order td.price {
        text-align: right; }
      .table--order td.price, .table--order td.units {
        vertical-align: bottom; }
      .table--order td.mobile-one-half {
        width: 30%; }
    .table--order .sikring .title--xsmall {
      margin-bottom: 15px; }
    .table--order .sikring p {
      margin: 0; }
    .table--order .sikring .price {
      text-align: right; }
      .table--order .sikring .price.not-added {
        color: #e8e8e8; }
    .table--order .sikring img {
      display: block;
      margin: 0 auto; }
    .table--order .total td {
      padding-top: 30px;
      padding-right: 0;
      padding-bottom: 0;
      border-width: 0 0 1px;
      text-align: right; }
    .table--order .total p {
      display: inline-block;
      vertical-align: bottom; }
    .table--order .minimumprice td {
      padding-top: 10px;
      border-width: 0;
      padding-right: 0;
      text-align: right; }
      .table--order .minimumprice td p {
        display: inline-block;
        vertical-align: bottom; }
        .table--order .minimumprice td p:first-child {
          padding-right: 74px; }
    .table--order .spacing td {
      border-width: 0; }
    .table--order p {
      margin-bottom: 20px; }
    .table--order button {
      font-family: inherit; }
  .table--key-value {
    border-collapse: separate;
    table-layout: fixed; }
    .table--key-value th {
      vertical-align: middle;
      font-weight: normal; }
    .table--key-value tbody th,
    .table--key-value tbody td {
      padding: 5px 0;
      vertical-align: middle; }
      .table--key-value tbody th.specify,
      .table--key-value tbody td.specify {
        color: #db5451; }
    .table--key-value tbody tr:first-child th,
    .table--key-value tbody tr:first-child td {
      padding-top: 15px;
      border-top: 1px solid #d1d1d1; }
    .table--key-value tbody tr:last-child th,
    .table--key-value tbody tr:last-child td {
      padding-bottom: 15px; }
    .table--key-value--border-none tbody tr:first-child th,
    .table--key-value--border-none tbody tr:first-child td {
      border-top: 0 !important; }
    @media only screen and (max-width: 768px) {
      .table--key-value tfoot {
        font-size: 16px;
        line-height: 25px; } }
    .table--key-value tfoot th,
    .table--key-value tfoot td {
      line-height: 1;
      padding: 20px 0;
      border-top: 1px solid #d1d1d1; }
    .table--key-value.recurring-table tfoot {
      font-size: 16px;
      line-height: 25px; }
      .table--key-value.recurring-table tfoot th,
      .table--key-value.recurring-table tfoot td {
        border-top: none; }
  .dataTables_scrollBody .table--adv .sorting:after,
  .dataTables_scrollBody .table--adv .sorting_asc:after,
  .dataTables_scrollBody .table--adv .sorting_desc:after,
  .DTFC_LeftBodyWrapper .table--adv .sorting:after,
  .DTFC_LeftBodyWrapper .table--adv .sorting_asc:after,
  .DTFC_LeftBodyWrapper .table--adv .sorting_desc:after {
    content: ""; }
  .table .drop-row .drop-item {
    padding: 0 20px 20px; }
    @media only screen and (max-width: 768px) {
      .table .drop-row .drop-item {
        padding: 0; } }
  .table .drop-row .drop-item-holder {
    text-align: left;
    position: relative;
    padding: 20px;
    z-index: 1;
    border: 1px solid #e8e8e8;
    background: #f5f5f5; }
    .table .drop-row .drop-item-holder:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      z-index: 4;
      top: -9px;
      left: 50%;
      margin-left: -9px;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid #e8e8e8;
      left: 43px;
      z-index: -2; }
    .table .drop-row .drop-item-holder:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      z-index: 4;
      top: -8px;
      left: 50%;
      margin-left: -8px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #f5f5f5;
      left: 43px;
      z-index: -2; }
    @media only screen and (max-width: 768px) {
      .table .drop-row .drop-item-holder {
        border-width: 1px 0; }
        .table .drop-row .drop-item-holder:before, .table .drop-row .drop-item-holder:after {
          left: 63px; } }
    .table .drop-row .drop-item-holder table thead th {
      border-top: 1px solid #d1d1d1;
      padding: 10px 20px 8px;
      white-space: nowrap; }
      .table .drop-row .drop-item-holder table thead th:first-child {
        border-left: 1px solid #d1d1d1; }
      .table .drop-row .drop-item-holder table thead th:last-child {
        border-right: 1px solid #d1d1d1; }
      @media only screen and (max-width: 768px) {
        .table .drop-row .drop-item-holder table thead th {
          white-space: normal; } }
    .table .drop-row .drop-item-holder table td {
      background: none !important; }
    .table .drop-row .drop-item-holder .header-grey {
      border: 0;
      padding: 0 0 20px;
      background: none; }
    .table .drop-row .drop-item-holder .select-items,
    .table .drop-row .drop-item-holder .pager--wrap {
      padding: 20px 0 0 !important; }
  .table--expandable td.child,
  .table--expandable tr.child {
    border-bottom: 0; }

.col--compact {
  width: 1%; }

.col--compact-5 {
  width: 5%; }

.col--expand {
  padding: 0 !important; }
  .col--expand .form-item--toggle + .icon-questionmark {
    color: #b8b8b8;
    display: inline-block;
    line-height: 33px;
    vertical-align: top; }
  .col--expand fieldset {
    line-height: 29px; }

.col--squeeze {
  padding: 0 20px 20px 20px !important; }

.col--expander {
  cursor: pointer;
  padding-left: 30px;
  position: relative; }
  .col--expander:before {
    content: "\E064";
    margin-right: 10px;
    color: #666;
    font-size: 22px;
    position: absolute;
    top: 3px;
    left: 0; }
  .col--expander.is-expanded:before {
    content: "\E063"; }

.row--selected td,
.row--selected .td,
.row--selected .cell {
  background-color: #f5f5f5; }

.row--disable td,
.row--disable .td,
.row--disable .cell {
  color: #b8b8b8; }

.row--disable .form-checkbox label:before {
  visibility: hidden; }

.row--error td,
.row--error .td,
.row--error .cell {
  background-color: #faf3f2; }

.row--suspended .cell--suspended {
  color: #db5451;
  font-weight: bold; }

.cell--error {
  color: #db5451;
  font-weight: bold; }

.checkout-step .leader--small button:first-child {
  margin-right: 50px; }

.checkout-step.payment {
  margin-top: 100px; }

.dataTables_scroll .table--adv thead th,
.DTFC_ScrollWrapper .table--adv thead th {
  width: 150px !important; }
  .dataTables_scroll .table--adv thead th.small-column,
  .DTFC_ScrollWrapper .table--adv thead th.small-column {
    width: 100px !important; }
  .dataTables_scroll .table--adv thead th.form-checkbox,
  .DTFC_ScrollWrapper .table--adv thead th.form-checkbox {
    width: 40px !important; }

.data-table--without-pagination.bill--table {
  border-bottom: none;
  overflow: hidden; }

.data-table--without-pagination > .dataTables_wrapper > .table {
  margin-bottom: -1px; }

.data-table--without-pagination > .dataTables_wrapper > .pager--wrap {
  display: none; }

@media only screen and (max-width: 768px) {
  td.child {
    padding-top: 0;
    padding-left: 62px; }
    td.child ul {
      border-top: 1px solid #e8e8e8;
      padding-top: 10px; }
      td.child ul li {
        overflow: hidden; }
        td.child ul li .dtr-title {
          float: left; }
        td.child ul li .dtr-data {
          float: right;
          text-align: right; }
        td.child ul li p {
          display: inline-block; } }

.form-checkbox--result[data-state="all-selected"] label:before {
  content: "\E029";
  color: #038cd6;
  float: left; }

.form-checkbox--result[data-state="some-selected"] label:before {
  content: "\E075";
  padding-left: 3px;
  padding-right: 0;
  color: #038cd6;
  float: left; }

.bills-balance {
  font-weight: normal;
  margin-top: 20px; }
  .bills-balance tbody tr:first-child th,
  .bills-balance tbody tr:first-child td {
    padding-top: 20px; }
  .bills-balance .is-overdue {
    color: #db5451; }
  .bills-balance .table--key-value tbody th,
  .bills-balance .table--key-value tbody td {
    vertical-align: top; }
  .bills-balance .table--key-value tfoot th,
  .bills-balance .table--key-value tfoot td {
    border-bottom: 1px solid #d1d1d1; }

.bill__inner-container {
  text-align: left; }
  .bill__inner-container .dtr-title {
    padding-top: 5px; }

@media only screen and (max-width: 768px) {
  .bill__footer-total {
    text-align: left; } }

.bill--table {
  border-bottom: 1px solid #e8e8e8; }
  .bill--table th {
    border-bottom: 1px solid #e8e8e8;
    padding: 30px 20px 5px 20px; }
    @media only screen and (max-width: 768px) {
      .bill--table th {
        padding-left: 10px;
        padding-right: 10px; } }
  .bill--table .expanded,
  .bill--table .expanded td {
    border-bottom: 0; }
  .bill--table td {
    border-bottom: 1px solid #e8e8e8;
    vertical-align: middle; }
    .bill--table td.child {
      border-bottom: none; }
    .bill--table td.th_bill_product {
      padding: 10px 20px 10px 10px; }
      @media only screen and (max-width: 768px) {
        .bill--table td.th_bill_product {
          padding-left: 10px;
          padding-right: 10px; } }
  .bill--table__subtitle {
    text-align: left; }
  .bill--table__column {
    padding: 10px 20px; }
    @media only screen and (max-width: 768px) {
      .bill--table__column {
        padding-left: 10px;
        padding-right: 10px; } }
    @media only screen and (min-width: 1024px) {
      .bill--table__column {
        width: 20%; } }
    .bill--table__column--no-data {
      width: 2.25rem; }
  .bill--table .bill-no-border td {
    border-bottom: 0; }
  .bill--table tr.bill-subtotal {
    border-bottom: 0; }
    .bill--table tr.bill-subtotal td {
      font-weight: bold;
      border-bottom: 0; }
  .bill--table tr:last-child > td {
    border-bottom: none; }
  .bill--table .grey-header {
    background: #fff;
    border: 1px solid #d1d1d1; }
    .bill--table .grey-header th {
      padding: 10px 20px;
      border-bottom: 0; }
  .bill--table .table.table--inner .child ul li:last-child {
    display: block; }
  .bill--table .table.table--inner .table__expand-cell {
    padding-left: 5px; }
  .bill--table .icon-remove {
    color: #d1d1d1;
    margin: -10px 20px 0 0;
    padding: 10px 0 0; }
    .bill--table .icon-remove:hover {
      text-decoration: none; }
  .bill--table .drop-row .drop-row-holder {
    background: #f5f5f5;
    border: 1px solid #d1d1d1;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .bill--table .drop-row .drop-row-holder {
        border: none 0;
        background: inherit;
        padding-top: 0; } }
    .bill--table .drop-row .drop-row-holder:after, .bill--table .drop-row .drop-row-holder:before {
      border: 10px solid transparent;
      border-bottom-color: #f5f5f5;
      content: "";
      height: 0;
      left: 46px;
      position: absolute;
      top: -19px;
      width: 0;
      z-index: 2; }
    .bill--table .drop-row .drop-row-holder:before {
      border-bottom-color: #d1d1d1;
      top: -20px;
      z-index: 1; }
    .bill--table .drop-row .drop-row-holder .block--content {
      background: #f5f5f5; }
  .bill--table .drop-row .drop-row-holder-loading {
    background: #fff;
    border: 1px solid #d1d1d1;
    margin: 10px;
    padding: 10px 0; }
  .bill--table .drop-row .icon-remove {
    float: right;
    margin-right: 0; }

.sorting,
.sorting_asc,
.sorting_desc {
  outline: none;
  cursor: pointer; }
  .sorting:after,
  .sorting_asc:after,
  .sorting_desc:after {
    font-size: 10px;
    left: 5px;
    opacity: 0;
    position: relative;
    top: 4px;
    display: inline-block;
    vertical-align: middle;
    content: ''; }

.sorting_asc {
  white-space: nowrap; }
  .sorting_asc:after {
    border: solid;
    border-width: 8px 4px;
    border-color: transparent transparent #038cd6;
    opacity: 1;
    top: -4px; }

.sorting_desc {
  white-space: nowrap; }
  .sorting_desc:after {
    border: solid;
    border-width: 8px 4px;
    border-color: #038cd6 transparent transparent;
    opacity: 1; }

.sorting:hover,
.sorting:focus,
.sorting_asc,
.sorting_desc,
.bill--table .sorting_desc,
.bill--table .sorting_asc,
.table--adv .sorting_asc,
.table--adv .sorting_desc {
  border-bottom: 2px solid #038cd6;
  color: #038cd6;
  padding-bottom: 3px; }

@-moz-document url-prefix() {
  .sorting:hover,
  .sorting:focus,
  .sorting_asc,
  .sorting_desc,
  .bill--table .sorting_desc,
  .bill--table .sorting_asc,
  .table--adv .sorting_asc,
  .table--adv .sorting_desc {
    box-shadow: inset 0 -1px 0 #038cd6;
    border-bottom-width: 1px; } }

/**
name: Datepicker
type: ui
desc: >
  Please add CSS description if needed!
examples:
- name: Datepicker single
  tmpl:
    include: single.html
- name: Datepicker range
  tmpl:
    include: range.html
- name: Datepicker single large
  tmpl:
    include: single-large.html
- name: Datepicker disabled
  tmpl:
    include: disabled.html
*/
.datepicker {
  background-color: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  vertical-align: top;
  height: 32px;
  position: relative;
  min-width: 220px;
  margin-bottom: 0; }
  @media only screen and (max-width: 768px) {
    .datepicker {
      display: block; } }
  .datepicker:before {
    background: #f0f0f0;
    border-right: 1px solid #e8e8e8;
    content: "";
    width: 32px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0; }
  .datepicker:after {
    content: "\E020";
    width: 32px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
    line-height: 32px;
    font-size: 17px;
    color: #666; }
  .datepicker:hover {
    border: 1px solid #b8b8b8;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.07); }
  .datepicker.is-active {
    border: 1px solid #038cd6;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.07); }
  .datepicker input[type="text"],
  .datepicker input[type="date"] {
    background: transparent;
    border: none;
    color: #474747;
    cursor: pointer;
    font-size: 13px;
    display: block;
    line-height: normal;
    height: 100%;
    outline: none;
    padding: 6px 26px 6px 42px;
    width: 100%;
    z-index: 5;
    position: relative; }
    .datepicker input[type="text"]:focus, .datepicker input[type="text"]:hover,
    .datepicker input[type="date"]:focus,
    .datepicker input[type="date"]:hover {
      outline: none;
      border: none; }
  .datepicker--disabled {
    background: #f5f5f5;
    border-color: #e8e8e8; }
    .datepicker--disabled:hover {
      border-color: #e8e8e8;
      box-shadow: none; }
    .datepicker--disabled input[type="text"],
    .datepicker--disabled input[type="date"] {
      cursor: default;
      background: none !important; }
  .datepicker .icon-clear {
    background-color: transparent;
    border: none;
    color: #474747;
    line-height: 32px;
    padding: 1px;
    position: absolute;
    outline: none;
    right: 3px;
    top: 0;
    bottom: 0;
    z-index: 6; }
    .datepicker .icon-clear:before {
      font-size: 20px;
      height: 32px;
      line-height: 28px; }
    @media only screen and (max-width: 768px) {
      .datepicker .icon-clear {
        display: none; } }
  .datepicker--large {
    height: 40px; }
    .datepicker--large input[type="text"],
    .datepicker--large input[type="date"] {
      font-size: 16px; }
    .datepicker--large .icon-clear {
      right: 7px;
      line-height: 38px; }
      .datepicker--large .icon-clear:before {
        line-height: 38px; }
  .datepicker.form-item--error {
    box-shadow: 0 0 0 2px #db5451; }
    .datepicker.form-item--error [type="text"],
    .datepicker.form-item--error [type="text"]:focus,
    .datepicker.form-item--error [type="number"],
    .datepicker.form-item--error [type="number"]:focus,
    .datepicker.form-item--error [type="date"],
    .datepicker.form-item--error [type="date"]:focus {
      border-color: transparent !important;
      box-shadow: none;
      padding-right: 42px; }
    .datepicker.form-item--error [class^="icon-"] {
      right: 4px;
      bottom: -2px;
      z-index: 6; }
    .datepicker.form-item--error .icon-clear {
      top: 50%;
      margin-bottom: -13px;
      right: 20px !important;
      color: #474747; }
  @media only screen and (max-width: 768px) {
    .datepicker--range {
      background-color: none;
      border: 0;
      padding-left: 0;
      margin: 0 -5px; }
      .datepicker--range:before, .datepicker--range:after {
        display: none; }
      .datepicker--range:hover, .datepicker--range.is-active {
        border: 0;
        box-shadow: none; }
      .datepicker--range .col {
        position: relative;
        float: left;
        width: 50%;
        padding: 0 5px; }
        .datepicker--range .col:before {
          background: #f0f0f0;
          border-right: 1px solid #e8e8e8;
          content: "";
          width: 32px;
          position: absolute;
          left: 6px;
          top: 1px;
          bottom: 1px; }
        .datepicker--range .col:after {
          content: "\E020";
          width: 32px;
          position: absolute;
          left: 6px;
          top: 50%;
          transform: translate(0, -50%);
          text-align: center;
          line-height: 32px;
          font-size: 17px;
          color: #666; }
      .datepicker--range input[type="text"],
      .datepicker--range input[type="date"] {
        color: #474747;
        font-size: 13px;
        line-height: 18px;
        display: block;
        height: 32px;
        outline: none;
        padding: 7px 26px 7px 38px;
        width: 100%;
        border: 1px solid #d1d1d1;
        border-radius: 2px; }
        .datepicker--range input[type="text"]:focus, .datepicker--range input[type="text"]:hover,
        .datepicker--range input[type="date"]:focus,
        .datepicker--range input[type="date"]:hover {
          border: 1px solid #d1d1d1; }
      .datepicker--range.form-item--error {
        box-shadow: none; }
        .datepicker--range.form-item--error [type="text"],
        .datepicker--range.form-item--error [type="text"]:focus,
        .datepicker--range.form-item--error [type="number"],
        .datepicker--range.form-item--error [type="number"]:focus,
        .datepicker--range.form-item--error [type="date"],
        .datepicker--range.form-item--error [type="date"]:focus {
          border-color: transparent !important;
          box-shadow: 0 0 0 2px #db5451; }
        .datepicker--range.form-item--error [class^="icon-"] {
          right: 9px; } }
  .datepicker.disabled:before, .datepicker.disabled:after {
    z-index: 6; }

.datepicker__start, .datepicker__end {
  display: none !important; }
  @media only screen and (max-width: 768px) {
    .datepicker--range .datepicker__start, .datepicker--range .datepicker__end {
      display: block !important; } }

@media only screen and (max-width: 768px) {
  .datepicker__range {
    display: none !important; } }

.form-item, .form-search {
  height: auto; }

.datepick {
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.07);
  color: #474747;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  position: relative;
  margin-top: 6px; }
  .datepick:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    z-index: 4;
    top: -9px;
    left: 50%;
    margin-left: -9px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #d1d1d1;
    left: 15px; }
    .datepick--position-left .datepick:before {
      left: auto;
      right: 15px; }
  .datepick:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    z-index: 4;
    top: -7px;
    left: 50%;
    margin-left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    left: 15px; }
    .datepick--position-left .datepick:after {
      left: auto;
      right: 17px; }
  .datepick a {
    color: #474747;
    text-decoration: none; }
    .datepick a.datepick-disabled {
      color: #b8b8b8;
      cursor: auto;
      background-color: #fff;
      opacity: .5; }

.datepick-popup {
  z-index: 500; }

.datepick-disable {
  position: absolute;
  z-index: 100;
  background-color: #fff;
  opacity: .5; }

.datepick-nav {
  border-bottom: 1px solid #d1d1d1;
  font-size: 16px;
  font-weight: normal;
  overflow: hidden;
  width: 100%;
  text-align: center;
  background-color: #f5f5f5;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.02);
  background-image: linear-gradient(180deg, #fff, #f5f5f5); }
  .datepick-nav a {
    padding: 12px 10px; }

.datepick-ctrl {
  background-color: #f5f5f5;
  border-top: 1px solid #d1d1d1;
  clear: both;
  padding: 10px; }
  .datepick-ctrl button {
    width: 100%; }

.datepick-cmd-clear {
  display: none; }

.datepick-cmd-prevJump,
.datepick-cmd-nextJump {
  width: 8%; }

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

.datepick-cmd-prevJump,
.datepick-cmd-clear {
  float: left;
  padding-left: 2%; }

.datepick-cmd-current,
.datepick-cmd-today {
  display: block;
  text-align: center; }

.datepick-cmd-nextJump,
.datepick-cmd-close {
  float: right;
  padding-right: 2%;
  text-align: right; }

.datepick-cmd-close {
  display: block;
  position: relative;
  text-align: left;
  text-indent: -999em;
  z-index: 2; }
  .datepick-cmd-close:before {
    content: "\E02D";
    position: absolute;
    right: 10px;
    font-size: 14px;
    line-height: 18px;
    text-indent: 0;
    font-weight: bold; }

.datepick-month-nav {
  float: left;
  text-align: center; }
  .datepick-month-nav div {
    float: left;
    width: 12.5%;
    margin: 1%;
    padding: 1%; }

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

.datepick-month-row {
  clear: left; }

.datepick-month {
  float: left;
  padding: 0 1em 1em;
  width: 222px;
  text-align: center; }
  .datepick-month.first {
    border-right: 1px solid #d1d1d1; }
  .datepick-month.last {
    border-left: 1px solid #d1d1d1;
    margin-left: -1px; }
  .datepick-month table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%; }
    .datepick-month table td a {
      color: #474747;
      display: block;
      max-width: 28px;
      max-height: 28px;
      padding: 4px 0;
      text-decoration: none;
      width: 100%; }
    .datepick-month table td span {
      color: #b8b8b8;
      display: block;
      max-width: 28px;
      max-height: 28px;
      width: 100%;
      padding: 4px 0; }
    .datepick-month table td .datepick-other-month {
      color: #b8b8b8;
      display: none; }
    .datepick-month table td .datepick-today {
      border: 1px solid #038cd6;
      color: #038cd6;
      padding: 3px 0; }
    .datepick-month table td .datepick-highlight {
      background-color: #e8e8e8; }
    .datepick-month table td .datepick-selected {
      background-color: #038cd6;
      border: none;
      color: #fff; }
    .datepick-month table td.datepick-selected:first-child a {
      border-radius: 5px 0 0 5px; }
    .datepick-month table td.datepick-selected:last-child a {
      border-radius: 0 5px 5px 0; }

.datepick-month-header {
  border-bottom: 1px solid #d1d1d1;
  padding: 1em 0;
  margin-bottom: 1em;
  position: relative; }
  .datepick-month-header input {
    position: absolute;
    display: none; }

.datepick-cmd-prev,
.datepick-cmd-next {
  border: 1px solid #d1d1d1;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #fff;
  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: 22px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    font-size: 12px; }

.datepick-cmd-prev {
  left: 0;
  text-indent: -999px; }
  .datepick-cmd-prev:before {
    content: "\E00C";
    text-indent: -3px; }

.datepick-cmd-next {
  right: 0;
  text-indent: 999px; }
  .datepick-cmd-next:before {
    content: "\E00B";
    text-indent: 0; }

.datepick-month-header select,
.datepick-month-header input {
  height: 1.4em;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 100%; }

.datepick-month th,
.datepick-month td {
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align: center; }

.datepick-month th,
.datepick-month th a {
  color: #038cd6;
  padding: 4px 0; }

.datepick-status {
  clear: both;
  background-color: #d1d1d1;
  text-align: center; }

.datepick-clear-fix {
  clear: both; }

/**
name: Dropdown
type: ui
modifiers:
	--small: Small dropdown
	--subscriptions: Dropdown for the subscriptions pages
	--subscriptions--small: Small subscriptions dropdown (timeline/dashboard page)
	--select: Select with custom dropdown
	--download: Dropdown with files list of download
examples:
-
	name: Dropdown example
	tmpl:
		include: dropdown.html
-
	name: Subscriptions dropdown
	tmpl:
		include: dropdown-subscriptions.html
-
	name: Select with custom dropdown
	tmpl:
		include: dropdown-select.html
-
	name: Download dropdown
	tmpl:
		include: dropdown-download.html
*/
.dropdown {
  position: relative; }
  .dropdown strong {
    color: #474747; }
  .dropdown.disabled .dropdown__disabled {
    display: block; }
    .dropdown.disabled .dropdown__disabled > div {
      display: none; }
  .dropdown.disabled .dropdown__label {
    background-color: #f5f5f5;
    border-color: #e8e8e8; }
    .dropdown.disabled .dropdown__label:after {
      background: #f5f5f5;
      border-left: 1px solid #e8e8e8;
      color: #b8b8b8; }
  .dropdown__label {
    appearance: none;
    background: #fff;
    color: #474747;
    cursor: pointer;
    display: block;
    font-size: 16px;
    line-height: 38px;
    outline: none;
    position: relative;
    text-align: left;
    vertical-align: top;
    border-radius: 3px;
    border: 1px solid #d1d1d1;
    padding: 0 40px 0 10px;
    height: 40px;
    z-index: 100; }
    .dropdown__label:after {
      content: "\E00A";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      border-left: 1px solid #d1d1d1;
      background-color: #f5f5f5;
      background: linear-gradient(180deg, #fff, #e8e8e8);
      color: #666;
      transition: all 0.125s;
      line-height: 40px;
      font-size: 11px;
      text-align: center;
      width: 32px; }
    .dropdown__label:hover {
      border: 1px solid #b8b8b8;
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.07); }
    .dropdown__label:focus {
      border-color: #0f3b52; }
    @media only screen and (min-width: 768px) {
      .section--hero .dropdown__label {
        background-color: #038cd6;
        border-color: #0278b8;
        color: #fff; }
        .section--hero .dropdown__label:hover {
          background: #0073ba;
          border-color: #005285; }
        .section--hero .dropdown__label:after {
          border: none;
          background: transparent;
          color: #fff; } }
    @media only screen and (max-width: 768px) {
      .section--hero .dropdown__label {
        font-size: 13px;
        line-height: 18px;
        color: #fff;
        border-radius: 0;
        line-height: 35px;
        height: 50px;
        padding-top: 17px;
        display: block;
        background: transparent;
        border: 0; }
        .section--hero .dropdown__label:after {
          line-height: 50px; } }
  .dropdown__content {
    background-color: #fff;
    color: #474747;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #d1d1d1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    z-index: 500; }
    @media only screen and (min-width: 768px) {
      .dropdown__content {
        position: absolute;
        top: 42px;
        min-width: 280px;
        left: 0;
        right: 0;
        border-radius: 3px;
        transform: translateY(-10px);
        transition: opacity 50ms ease-out, transform 100ms ease-out; } }
    @media only screen and (max-width: 768px) {
      .dropdown__content {
        max-width: none;
        min-width: none;
        position: relative;
        width: 100%;
        height: 0; } }
    .is-open .dropdown__content {
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.07);
      opacity: 1;
      visibility: visible; }
      @media only screen and (min-width: 768px) {
        .is-open .dropdown__content {
          transform: translateY(0); } }
      @media only screen and (max-width: 768px) {
        .is-open .dropdown__content {
          display: block;
          box-shadow: none;
          height: auto; } }
  .dropdown__scroll {
    max-height: 315px;
    overflow-y: auto;
    position: relative;
    z-index: 1; }
  .dropdown__filter {
    background-color: #f5f5f5;
    border-bottom: 1px solid #d1d1d1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 0 40px;
    position: relative; }
    .dropdown__filter:before {
      content: "\E0A9";
      color: #b8b8b8;
      font-size: 22px;
      line-height: 25px;
      position: absolute;
      left: 10px;
      top: 50%;
      margin-top: -12px; }
    .dropdown__filter input {
      background-color: transparent;
      border: none;
      color: #666;
      outline: none;
      padding: 13px 0 11px;
      width: 100%; }
      @media only screen and (min-width: 768px) {
        .dropdown__filter input {
          font-size: 13px; } }
    .dropdown__filter .icon-clear {
      background-color: transparent;
      border: none;
      color: #b8b8b8;
      font-size: 18px;
      line-height: 1;
      padding: 0;
      position: absolute;
      outline: none;
      right: 0;
      top: 0;
      width: 40px;
      height: 100%;
      opacity: 1;
      transition: opacity .1s ease; }
      .dropdown__filter .icon-clear:hover, .dropdown__filter .icon-clear:focus {
        color: #666; }
    .dropdown__filter.has-value .icon-clear {
      opacity: 1; }
  .dropdown__subtitle {
    text-transform: uppercase;
    font-size: 11px;
    line-height: 25px;
    padding: 0 15px;
    border: 1px solid #d1d1d1;
    border-width: 1px 0;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #f5f5f5, #e8e8e8); }
  .dropdown__list {
    backface-visibility: hidden;
    font-size: 13px;
    line-height: 1.4; }
    .dropdown__list li {
      border-top: 1px solid #e8e8e8; }
      .dropdown__list li:first-child {
        border-top: none; }
      .dropdown__list li [class^="icon"] {
        font-size: 20px;
        min-width: 20px; }
        .dropdown__list li [class^="icon"]:before {
          color: #b8b8b8;
          vertical-align: top;
          line-height: inherit; }
    .dropdown__list a {
      outline: none;
      padding: 10px;
      position: relative;
      display: flex;
      align-items: center;
      color: #474747; }
      .dropdown__list a:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-color: #038cd6;
        transition: width .15s ease-in-out; }
      .dropdown__list a.active, .dropdown__list a:hover, .dropdown__list a.current-autocomplete-option {
        background-color: #f5f5f5;
        text-decoration: none; }
        .dropdown__list a.active:before, .dropdown__list a:hover:before, .dropdown__list a.current-autocomplete-option:before {
          width: 3px; }
      .dropdown__list a .media__icon {
        flex: 1;
        width: 30px;
        max-width: 30px; }
      .dropdown__list a .media__body {
        flex: 1;
        width: auto;
        max-width: 100%; }
  .dropdown__noresult {
    display: block;
    padding: 20px 10px;
    text-align: center; }
  .dropdown__more {
    background-color: #f5f5f5;
    border-top: 1px solid #d1d1d1;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
    padding: 10px 30px;
    z-index: 500; }
    .dropdown__more .button, .dropdown__more .form-checkbox--filter label, .form-checkbox--filter .dropdown__more label {
      background: #fff; }
  .dropdown--small .dropdown__label {
    padding-left: 15px;
    height: 32px;
    font-size: 13px;
    line-height: 32px; }
    .dropdown--small .dropdown__label:after {
      line-height: 32px; }
  @media only screen and (min-width: 768px) {
    .dropdown--small .dropdown__content {
      top: 33px; } }
  .dropdown--small .dropdown__list {
    line-height: 20px; }
    .dropdown--small .dropdown__list a {
      padding: 10px 15px;
      color: #474747; }
      .dropdown--small .dropdown__list a:hover {
        text-decoration: none; }
  .dropdown--subscriptions .dropdown__label {
    padding-left: 35px; }
    .dropdown--subscriptions .dropdown__label:before {
      content: "\E065";
      font-size: 20px;
      padding: 0 5px 0 10px;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -20px;
      bottom: 0;
      color: #666; }
  .dropdown--subscriptions .dropdown__content {
    right: 0;
    left: 0; }
    @media only screen and (min-width: 768px) {
      .dropdown--subscriptions .dropdown__content {
        top: 48px; }
        .dropdown--subscriptions .dropdown__content:before, .dropdown--subscriptions .dropdown__content:after {
          width: 0;
          height: 0;
          content: "";
          position: absolute; }
        .dropdown--subscriptions .dropdown__content:before {
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #d1d1d1;
          left: 17px;
          top: -8px;
          margin-left: -8px; }
        .dropdown--subscriptions .dropdown__content:after {
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #fff;
          left: 17px;
          top: -7px;
          margin-left: -7px; }
        .dropdown--subscriptions .dropdown__content:before {
          left: auto;
          right: 8px; }
        .dropdown--subscriptions .dropdown__content:after {
          left: auto;
          right: 9px;
          border-bottom-color: #f5f5f5; } }
  .dropdown--subscriptions--small .dropdown__label {
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    padding-left: 29px; }
    .dropdown--subscriptions--small .dropdown__label:before {
      font-size: 14px;
      line-height: 20px;
      margin-top: -10px; }
    .dropdown--subscriptions--small .dropdown__label:after {
      line-height: 32px; }
  .dropdown--select select {
    display: none; }
  .dropdown--select .dropdown__label {
    padding-left: 20px;
    color: #000; }
    .dropdown--select .dropdown__label:hover {
      color: #474747; }
  .dropdown--select .dropdown__list li {
    line-height: 28px; }
  .dropdown--select .dropdown__content {
    border-radius: 0;
    box-shadow: none; }
  .dropdown--select .dropdown__filter {
    padding: 15px 10px;
    border-bottom: 1px solid #b8b8b8;
    font-weight: bold; }
  .dropdown--select .dropdown__scroll {
    max-height: 140px; }
    .dropdown--select .dropdown__scroll.taken li {
      cursor: inherit;
      position: relative; }
      .dropdown--select .dropdown__scroll.taken li:hover {
        background: inherit;
        color: inherit; }
      .dropdown--select .dropdown__scroll.taken li .icon-remove {
        color: #db5451;
        position: absolute;
        right: 5px;
        top: 12px;
        font-size: 16px; }
  .dropdown--select .dropdown__disabled {
    visibility: hidden;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    right: 3px;
    bottom: 1px; }
    .dropdown--select .dropdown__disabled div {
      position: absolute;
      left: 1px;
      top: 1px;
      right: 30px;
      bottom: 1px;
      background: #fff; }
    .dropdown--select .dropdown__disabled .button__spinner {
      animation-name: loader-grey-dark; }
      .dropdown--select .dropdown__disabled .button__spinner:before, .dropdown--select .dropdown__disabled .button__spinner:after {
        animation-name: loader-grey-dark; }
  .dropdown--select[data-loading="true"] .dropdown__disabled {
    visibility: visible;
    z-index: 1; }
  .dropdown--download {
    display: inline-block;
    vertical-align: top; }
    .dropdown--download .dropdown__content {
      position: absolute;
      left: auto;
      right: 0;
      top: 100%;
      min-width: 145px;
      margin-top: 8px;
      text-align: left;
      background-color: #fff;
      color: #474747;
      border: 1px solid #d1d1d1;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
      .dropdown--download .dropdown__content:before, .dropdown--download .dropdown__content:after {
        width: 0;
        height: 0;
        content: "";
        position: absolute; }
      .dropdown--download .dropdown__content:before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #d1d1d1;
        left: 17px;
        top: -8px;
        margin-left: -8px; }
      .dropdown--download .dropdown__content:after {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #fff;
        left: 17px;
        top: -7px;
        margin-left: -7px; }
      .dropdown--download .dropdown__content:after, .dropdown--download .dropdown__content:before {
        left: auto;
        right: 10px;
        margin: 0; }
      .dropdown--download .dropdown__content:before {
        margin-right: -2px;
        border-width: 0 9px 8px; }
      .dropdown--download .dropdown__content a,
      .dropdown--download .dropdown__content button[type="submit"] {
        display: block;
        padding: 10px;
        position: relative;
        background: none;
        width: 100%;
        text-align: left;
        border: 0; }
        .dropdown--download .dropdown__content a:after,
        .dropdown--download .dropdown__content button[type="submit"]:after {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          width: 0;
          height: 100%;
          background-color: #038cd6;
          transition: width .15s ease-in-out; }
        .dropdown--download .dropdown__content a:hover,
        .dropdown--download .dropdown__content button[type="submit"]:hover {
          background-color: #f5f5f5; }
          .dropdown--download .dropdown__content a:hover:after,
          .dropdown--download .dropdown__content button[type="submit"]:hover:after {
            width: 3px; }
        .dropdown--download .dropdown__content a.icon-acrobat:before, .dropdown--download .dropdown__content a.icon-excel:before,
        .dropdown--download .dropdown__content button[type="submit"].icon-acrobat:before,
        .dropdown--download .dropdown__content button[type="submit"].icon-excel:before {
          font-size: 17px;
          margin: 0 4px 0 0;
          color: #007534; }
        .dropdown--download .dropdown__content a.icon-acrobat:before,
        .dropdown--download .dropdown__content button[type="submit"].icon-acrobat:before {
          color: #ff4b36; }
    .dropdown--download ul li {
      border-top: 1px solid #d1d1d1;
      overflow: hidden;
      white-space: nowrap; }
      .dropdown--download ul li:first-child {
        border: 0; }
    @media only screen and (max-width: 768px) {
      .dropdown--download .button, .dropdown--download .form-checkbox--filter label, .form-checkbox--filter .dropdown--download label {
        padding-left: 10px;
        padding-right: 10px; } }
  @media only screen and (max-width: 768px) {
    .dropdown--customers.is-open:before, .dropdown--customers.is-open:after {
      width: 0;
      height: 0;
      content: "";
      position: absolute; }
    .dropdown--customers.is-open:before {
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #d1d1d1;
      left: 17px;
      top: -8px;
      margin-left: -8px; }
    .dropdown--customers.is-open:after {
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #fff;
      left: 17px;
      top: -7px;
      margin-left: -7px; }
    .dropdown--customers.is-open:before, .dropdown--customers.is-open:after {
      left: 13px;
      top: 37px;
      border-bottom-color: #f5f5f5; } }
  @media only screen and (min-width: 768px) {
    .dropdown--customers .dropdown__content {
      right: 0;
      left: auto;
      top: 46px; }
      .dropdown--customers .dropdown__content:before, .dropdown--customers .dropdown__content:after {
        width: 0;
        height: 0;
        content: "";
        position: absolute; }
      .dropdown--customers .dropdown__content:before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #d1d1d1;
        left: 17px;
        top: -8px;
        margin-left: -8px; }
      .dropdown--customers .dropdown__content:after {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #fff;
        left: 17px;
        top: -7px;
        margin-left: -7px; }
      .dropdown--customers .dropdown__content:before, .dropdown--customers .dropdown__content:after {
        left: auto;
        right: 8px;
        border-bottom-color: #f5f5f5; } }
  @media only screen and (max-width: 768px) {
    .dropdown--customers .dropdown__content {
      border-top: 0;
      position: fixed;
      width: 100%;
      top: 55px;
      right: 0;
      left: 0; } }

/**
name: Filtering Bar
type: ui
modifiers:
      --filters: filtering bar (using on Product category and accessory pages)
examples:
  - name: filter list example
    tmpl:
        include: filtering-list.html
  - name: filter select example
    tmpl:
        include: filtering-select.html
*/
.filter {
  padding: 10px 4px 4px 10px; }
  .filter--under-tabs {
    margin-top: -1px; }
  .filter__list {
    letter-spacing: -4px; }
    .filter__list [type="checkbox"] {
      display: none; }
      .filter__list [type="checkbox"]:checked + .filter__label {
        color: #fff;
        background: #038cd6;
        border-color: #0278b8; }
  .filter__label {
    display: block;
    padding: 0 13px;
    height: 32px;
    line-height: 30px;
    border-radius: 3px;
    border: 1px solid #b8b8b8;
    cursor: pointer;
    transition: all .125s;
    background: #fff; }
    .filter__label:hover {
      background: #f0f0f0; }
  .filter__item {
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    margin: 0 6px 6px 0; }

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

    1. You can use grid styles for creating form layout

    2. For creating multi fields, use classes __grid-row--gutter-none__ for grid and __form-item--multi-fields__ for deleting input's extra side borders

examples:
  - name: Form field with label
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item">
                <label class="toleft--xsmall">Label</label>
                <div class="rel leader--xsmall">
                    <input type="text">
                </div>
            </div>
        </div>
  - name: Form field with label and placeholder text
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item">
                <label class="toleft--xsmall">Label</label>
                <div class="rel leader--xsmall">
                    <input type="text" placeholder="Placeholder">
                </div>
            </div>
        </div>
  - name: Form field with question tooltip
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item">
                <label class="toleft--xsmall">Label</label>
                <div class="icon-questionmark tooltip__trigger">
                    <div class="tooltip" data-component="tooltip" role="tooltip">
                        <p>Tooltip</p>
                    </div>
                </div>
                <div class="rel leader--xsmall">
                    <input type="text">
                </div>
            </div>
        </div>
  - name: Form field small with label
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item form-item--small">
                <label class="toleft--xsmall">Label</label>
                <div class="rel leader--xsmall">
                    <input type="text">
                </div>
            </div>
        </div>
  - name: Required Form field
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item form-item--required">
                <label class="toleft--xsmall">Label</label>
                <div class="rel leader--xsmall">
                    <input type="text">
                </div>
            </div>
        </div>
  - name: Disabled Form field with value
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item">
                <label class="toleft--xsmall">Label</label>
                <div class="rel leader--xsmall">
                    <input type="text" value="Value" disabled>
                </div>
            </div>
        </div>
  - name: Textarea
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item">
                <label class="toleft--xsmall">Label</label>
                <div class="rel leader--xsmall">
                    <textarea></textarea>
                </div>
            </div>
        </div>
  - name: Multiple fields on same row
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="grid-row--gutter-none form-item--multi-fields">
                <div class="col-md-2">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
  - name: Multiple fields on same row and with one label (You should add class for vertical alligment. For this case grid-row-md--bottom)
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="grid-row--gutter-none grid-row-md--bottom form-item--multi-fields">
                <div class="col-md-4">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-4 align--bottom">
                    <div class="form-item">
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-4 align--bottom">
                    <div class="form-item">
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
  - name: Multiple fields on same row and with one long label You should add class for vertical alligment. For this case grid-row-md--bottom)
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="form-item">
                <label class="toleft--xsmall">Multible fields on same row and with one long multible fields on same row and with one long label</label>
            </div>
            <div class="grid-row--gutter-none grid-row-md--bottom form-item--multi-fields">
                <div class="col-md-4">
                    <div class="form-item">
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-4 align--bottom">
                    <div class="form-item">
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-4 align--bottom">
                    <div class="form-item">
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
  - name: Default grid row
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="grid-row leader--small">
                <div class="col-md-6">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel  leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
  - name: Default grid row with one label in row You should add class for vertical alligment. For this case grid-row-md--bottom)
    tmpl: >
        <div class="border box--greyed padding-whole">
            <div class="grid-row grid-row-md--bottom leader--small">
                <div class="col-md-6">
                    <div class="form-item">
                        <label class="toleft--xsmall">Label</label>
                        <div class="rel leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 align--bottom">
                    <div class="form-item">
                        <div class="rel  leader--xsmall">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
  - name: Required Form field in a negative box
    tmpl: >
        <div class="section--negative box--blue padding-whole">
            <div class="form-item form-item--required">
                <label class="toleft--xsmall">Label</label>
                <div class="rel leader--xsmall">
                    <input type="text">
                </div>
            </div>
        </div>
*/
.form-item textarea, .form-search textarea, .form-item [type="text"], .form-search [type="text"],
.form-item [type="number"], .form-search [type="number"],
.form-item [type="email"], .form-search [type="email"],
.form-item [type="month"], .form-search [type="month"],
.form-item [type="password"], .form-search [type="password"],
.form-item [type="tel"], .form-search [type="tel"],
.form-item [type="url"], .form-search [type="url"],
.form-item [type="search"], .form-search [type="search"], .select-wrapper__field,
.form-select__field {
  padding: 10px;
  background: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  color: #474747;
  max-width: 100%;
  height: 40px;
  line-height: normal;
  transition: all 0.125s; }
  .form-item textarea[disabled], .form-search textarea[disabled], .form-item [disabled][type="text"], .form-search [disabled][type="text"],
  .form-item [disabled][type="number"], .form-search [disabled][type="number"],
  .form-item [disabled][type="email"], .form-search [disabled][type="email"],
  .form-item [disabled][type="month"], .form-search [disabled][type="month"],
  .form-item [disabled][type="password"], .form-search [disabled][type="password"],
  .form-item [disabled][type="tel"], .form-search [disabled][type="tel"],
  .form-item [disabled][type="url"], .form-search [disabled][type="url"],
  .form-item [disabled][type="search"], .form-search [disabled][type="search"], [disabled].select-wrapper__field,
  [disabled].form-select__field {
    background: #f5f5f5;
    border-color: #e8e8e8;
    -webkit-text-fill-color: #474747;
    opacity: 1; }
    .form-item textarea[disabled]:hover, .form-search textarea[disabled]:hover, .form-item [disabled][type="text"]:hover, .form-search [disabled][type="text"]:hover,
    .form-item [disabled][type="number"]:hover, .form-search [disabled][type="number"]:hover,
    .form-item [disabled][type="email"]:hover, .form-search [disabled][type="email"]:hover,
    .form-item [disabled][type="month"]:hover, .form-search [disabled][type="month"]:hover,
    .form-item [disabled][type="password"]:hover, .form-search [disabled][type="password"]:hover,
    .form-item [disabled][type="tel"]:hover, .form-search [disabled][type="tel"]:hover,
    .form-item [disabled][type="url"]:hover, .form-search [disabled][type="url"]:hover,
    .form-item [disabled][type="search"]:hover, .form-search [disabled][type="search"]:hover, [disabled].select-wrapper__field:hover,
    [disabled].form-select__field:hover {
      border-color: #e8e8e8; }
  .form-item textarea:hover, .form-search textarea:hover, .form-item [type="text"]:hover, .form-search [type="text"]:hover,
  .form-item [type="number"]:hover, .form-search [type="number"]:hover,
  .form-item [type="email"]:hover, .form-search [type="email"]:hover,
  .form-item [type="month"]:hover, .form-search [type="month"]:hover,
  .form-item [type="password"]:hover, .form-search [type="password"]:hover,
  .form-item [type="tel"]:hover, .form-search [type="tel"]:hover,
  .form-item [type="url"]:hover, .form-search [type="url"]:hover,
  .form-item [type="search"]:hover, .form-search [type="search"]:hover, .select-wrapper__field:hover,
  .form-select__field:hover {
    border: 1px solid #b8b8b8; }
    .section--negative .form-item textarea:hover, .form-item .section--negative textarea:hover, .section--negative .form-search textarea:hover, .form-search .section--negative textarea:hover, .section--negative .form-item [type="text"]:hover, .form-item .section--negative [type="text"]:hover, .section--negative .form-search [type="text"]:hover, .form-search .section--negative [type="text"]:hover, .section--negative
    .form-item [type="number"]:hover,
    .form-item .section--negative [type="number"]:hover, .section--negative .form-search [type="number"]:hover, .form-search .section--negative [type="number"]:hover, .section--negative
    .form-item [type="email"]:hover,
    .form-item .section--negative [type="email"]:hover, .section--negative .form-search [type="email"]:hover, .form-search .section--negative [type="email"]:hover, .section--negative
    .form-item [type="month"]:hover,
    .form-item .section--negative [type="month"]:hover, .section--negative .form-search [type="month"]:hover, .form-search .section--negative [type="month"]:hover, .section--negative
    .form-item [type="password"]:hover,
    .form-item .section--negative [type="password"]:hover, .section--negative .form-search [type="password"]:hover, .form-search .section--negative [type="password"]:hover, .section--negative
    .form-item [type="tel"]:hover,
    .form-item .section--negative [type="tel"]:hover, .section--negative .form-search [type="tel"]:hover, .form-search .section--negative [type="tel"]:hover, .section--negative
    .form-item [type="url"]:hover,
    .form-item .section--negative [type="url"]:hover, .section--negative .form-search [type="url"]:hover, .form-search .section--negative [type="url"]:hover, .section--negative
    .form-item [type="search"]:hover,
    .form-item .section--negative [type="search"]:hover, .section--negative .form-search [type="search"]:hover, .form-search .section--negative [type="search"]:hover, .section--negative .select-wrapper__field:hover, .section--negative
    .form-select__field:hover {
      border-color: #d1d1d1; }
  .section--negative .form-item textarea, .form-item .section--negative textarea, .section--negative .form-search textarea, .form-search .section--negative textarea, .section--negative .form-item [type="text"], .form-item .section--negative [type="text"], .section--negative .form-search [type="text"], .form-search .section--negative [type="text"], .section--negative
  .form-item [type="number"],
  .form-item .section--negative [type="number"], .section--negative .form-search [type="number"], .form-search .section--negative [type="number"], .section--negative
  .form-item [type="email"],
  .form-item .section--negative [type="email"], .section--negative .form-search [type="email"], .form-search .section--negative [type="email"], .section--negative
  .form-item [type="month"],
  .form-item .section--negative [type="month"], .section--negative .form-search [type="month"], .form-search .section--negative [type="month"], .section--negative
  .form-item [type="password"],
  .form-item .section--negative [type="password"], .section--negative .form-search [type="password"], .form-search .section--negative [type="password"], .section--negative
  .form-item [type="tel"],
  .form-item .section--negative [type="tel"], .section--negative .form-search [type="tel"], .form-search .section--negative [type="tel"], .section--negative
  .form-item [type="url"],
  .form-item .section--negative [type="url"], .section--negative .form-search [type="url"], .form-search .section--negative [type="url"], .section--negative
  .form-item [type="search"],
  .form-item .section--negative [type="search"], .section--negative .form-search [type="search"], .form-search .section--negative [type="search"], .section--negative .select-wrapper__field, .section--negative
  .form-select__field {
    border-color: transparent; }
  .form-item textarea::-webkit-input-placeholder, .form-search textarea::-webkit-input-placeholder, .form-item [type="text"]::-webkit-input-placeholder, .form-search [type="text"]::-webkit-input-placeholder,
  .form-item [type="number"]::-webkit-input-placeholder, .form-search [type="number"]::-webkit-input-placeholder,
  .form-item [type="email"]::-webkit-input-placeholder, .form-search [type="email"]::-webkit-input-placeholder,
  .form-item [type="month"]::-webkit-input-placeholder, .form-search [type="month"]::-webkit-input-placeholder,
  .form-item [type="password"]::-webkit-input-placeholder, .form-search [type="password"]::-webkit-input-placeholder,
  .form-item [type="tel"]::-webkit-input-placeholder, .form-search [type="tel"]::-webkit-input-placeholder,
  .form-item [type="url"]::-webkit-input-placeholder, .form-search [type="url"]::-webkit-input-placeholder,
  .form-item [type="search"]::-webkit-input-placeholder, .form-search [type="search"]::-webkit-input-placeholder, .select-wrapper__field::-webkit-input-placeholder,
  .form-select__field::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b8b8b8; }
  .form-item textarea::-moz-placeholder, .form-search textarea::-moz-placeholder, .form-item [type="text"]::-moz-placeholder, .form-search [type="text"]::-moz-placeholder,
  .form-item [type="number"]::-moz-placeholder, .form-search [type="number"]::-moz-placeholder,
  .form-item [type="email"]::-moz-placeholder, .form-search [type="email"]::-moz-placeholder,
  .form-item [type="month"]::-moz-placeholder, .form-search [type="month"]::-moz-placeholder,
  .form-item [type="password"]::-moz-placeholder, .form-search [type="password"]::-moz-placeholder,
  .form-item [type="tel"]::-moz-placeholder, .form-search [type="tel"]::-moz-placeholder,
  .form-item [type="url"]::-moz-placeholder, .form-search [type="url"]::-moz-placeholder,
  .form-item [type="search"]::-moz-placeholder, .form-search [type="search"]::-moz-placeholder, .select-wrapper__field::-moz-placeholder,
  .form-select__field::-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #b8b8b8;
    opacity: 1; }
  .form-item textarea::-ms-input-placeholder, .form-search textarea::-ms-input-placeholder, .form-item [type="text"]::-ms-input-placeholder, .form-search [type="text"]::-ms-input-placeholder,
  .form-item [type="number"]::-ms-input-placeholder, .form-search [type="number"]::-ms-input-placeholder,
  .form-item [type="email"]::-ms-input-placeholder, .form-search [type="email"]::-ms-input-placeholder,
  .form-item [type="month"]::-ms-input-placeholder, .form-search [type="month"]::-ms-input-placeholder,
  .form-item [type="password"]::-ms-input-placeholder, .form-search [type="password"]::-ms-input-placeholder,
  .form-item [type="tel"]::-ms-input-placeholder, .form-search [type="tel"]::-ms-input-placeholder,
  .form-item [type="url"]::-ms-input-placeholder, .form-search [type="url"]::-ms-input-placeholder,
  .form-item [type="search"]::-ms-input-placeholder, .form-search [type="search"]::-ms-input-placeholder, .select-wrapper__field::-ms-input-placeholder,
  .form-select__field::-ms-input-placeholder {
    color: #b8b8b8; }
  .form-item textarea:-ms-input-placeholder, .form-search textarea:-ms-input-placeholder, .form-item [type="text"]:-ms-input-placeholder, .form-search [type="text"]:-ms-input-placeholder,
  .form-item [type="number"]:-ms-input-placeholder, .form-search [type="number"]:-ms-input-placeholder,
  .form-item [type="email"]:-ms-input-placeholder, .form-search [type="email"]:-ms-input-placeholder,
  .form-item [type="month"]:-ms-input-placeholder, .form-search [type="month"]:-ms-input-placeholder,
  .form-item [type="password"]:-ms-input-placeholder, .form-search [type="password"]:-ms-input-placeholder,
  .form-item [type="tel"]:-ms-input-placeholder, .form-search [type="tel"]:-ms-input-placeholder,
  .form-item [type="url"]:-ms-input-placeholder, .form-search [type="url"]:-ms-input-placeholder,
  .form-item [type="search"]:-ms-input-placeholder, .form-search [type="search"]:-ms-input-placeholder, .select-wrapper__field:-ms-input-placeholder,
  .form-select__field:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b8b8b8; }
  .form-item textarea:focus, .form-search textarea:focus, .form-item [type="text"]:focus, .form-search [type="text"]:focus,
  .form-item [type="number"]:focus, .form-search [type="number"]:focus,
  .form-item [type="email"]:focus, .form-search [type="email"]:focus,
  .form-item [type="month"]:focus, .form-search [type="month"]:focus,
  .form-item [type="password"]:focus, .form-search [type="password"]:focus,
  .form-item [type="tel"]:focus, .form-search [type="tel"]:focus,
  .form-item [type="url"]:focus, .form-search [type="url"]:focus,
  .form-item [type="search"]:focus, .form-search [type="search"]:focus, .select-wrapper__field:focus,
  .form-select__field:focus {
    border: 1px solid #038cd6;
    outline: none; }
  .section--negative .form-item textarea:focus, .form-item .section--negative textarea:focus, .section--negative .form-search textarea:focus, .form-search .section--negative textarea:focus, .section--negative .form-item [type="text"]:focus, .form-item .section--negative [type="text"]:focus, .section--negative .form-search [type="text"]:focus, .form-search .section--negative [type="text"]:focus, .section--negative
  .form-item [type="number"]:focus,
  .form-item .section--negative [type="number"]:focus, .section--negative .form-search [type="number"]:focus, .form-search .section--negative [type="number"]:focus, .section--negative
  .form-item [type="email"]:focus,
  .form-item .section--negative [type="email"]:focus, .section--negative .form-search [type="email"]:focus, .form-search .section--negative [type="email"]:focus, .section--negative
  .form-item [type="month"]:focus,
  .form-item .section--negative [type="month"]:focus, .section--negative .form-search [type="month"]:focus, .form-search .section--negative [type="month"]:focus, .section--negative
  .form-item [type="password"]:focus,
  .form-item .section--negative [type="password"]:focus, .section--negative .form-search [type="password"]:focus, .form-search .section--negative [type="password"]:focus, .section--negative
  .form-item [type="tel"]:focus,
  .form-item .section--negative [type="tel"]:focus, .section--negative .form-search [type="tel"]:focus, .form-search .section--negative [type="tel"]:focus, .section--negative
  .form-item [type="url"]:focus,
  .form-item .section--negative [type="url"]:focus, .section--negative .form-search [type="url"]:focus, .form-search .section--negative [type="url"]:focus, .section--negative
  .form-item [type="search"]:focus,
  .form-item .section--negative [type="search"]:focus, .section--negative .form-search [type="search"]:focus, .form-search .section--negative [type="search"]:focus, .section--negative .select-wrapper__field:focus, .section--negative
  .form-select__field:focus {
    border: 1px solid #00619e; }

.form-item label, .form-search label, .form-item__description, .select-wrapper__label,
.form-select__label {
  padding: 0 4px 6px;
  display: block;
  vertical-align: top;
  color: #666; }
  .section--negative .form-item label, .form-item .section--negative label, .section--negative .form-search label, .form-search .section--negative label, .section--negative .form-item__description, .section--negative .select-wrapper__label, .section--negative
  .form-select__label {
    color: #fff; }
  .form-item--disabled .form-item label, .form-item .form-item--disabled label, .form-item--disabled .form-search label, .form-search .form-item--disabled label, .form-item--disabled .form-item__description, .form-item--disabled .select-wrapper__label, .form-item--disabled
  .form-select__label {
    cursor: default;
    pointer-events: none; }
  .form-item label[for], .form-search label[for], [for].form-item__description, [for].select-wrapper__label,
  [for].form-select__label {
    cursor: pointer; }

.select-toggle {
  position: absolute;
  background: transparent;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 500; }

.form-item label, .form-search label {
  position: relative;
  margin-top: 1.25rem;
  color: #666; }
  .form-item label.text--med, .form-search label.text--med {
    line-height: 16px; }

.form-item textarea, .form-search textarea {
  line-height: 1.5625em;
  min-height: 100px;
  padding: 8px 10px; }
  .form-item textarea:focus, .form-search textarea:focus {
    border: 1px solid #038cd6;
    outline: none; }
  .section--negative .form-item textarea:focus, .section--negative .form-search textarea:focus {
    border: 1px solid #00619e; }

.form-item [type="range"], .form-search [type="range"] {
  width: 50%; }

.form-item .button--link, .form-search .button--link {
  float: left; }

.form-item .ws-range, .form-search .ws-range {
  background-color: #d1d1d1;
  box-shadow: none;
  border: none; }
  .form-item .ws-range .ws-range-thumb, .form-search .ws-range .ws-range-thumb {
    width: .7em;
    height: .7em;
    background: #1eab13;
    border: 0.4em solid #fff;
    box-shadow: 0 0 0 1px #d1d1d1, 0 1px 5px 0 rgba(0, 0, 0, 0.25); }
    .form-item .ws-range .ws-range-thumb:after, .form-search .ws-range .ws-range-thumb:after, .form-item .ws-range .ws-range-thumb:before, .form-search .ws-range .ws-range-thumb:before {
      content: "";
      display: none; }
  .form-item .ws-range .ws-range-rail, .form-search .ws-range .ws-range-rail {
    background: #d1d1d1;
    box-shadow: none;
    border: none; }
  .form-item .ws-range .ws-range-progress, .form-search .ws-range .ws-range-progress {
    background: #1eab13; }

.form-item .form-item--multi [type="text"], .form-search .form-item--multi [type="text"],
.form-item .form-item--multi [type="text"]:hover, .form-search .form-item--multi [type="text"]:hover {
  border-left-width: 0; }
  .form-item .form-item--multi [type="text"]:focus, .form-search .form-item--multi [type="text"]:focus,
  .form-item .form-item--multi [type="text"]:hover:focus, .form-search .form-item--multi [type="text"]:hover:focus {
    border-left-width: 1px;
    margin-left: -1px; }

.form-item .form-item--multi .form-item:first-child [type="text"], .form-search .form-item--multi .form-item:first-child [type="text"], .form-item .form-item--multi .form-search:first-child [type="text"], .form-search .form-item--multi .form-search:first-child [type="text"],
.form-item .form-item--multi .form-item:first-child [type="text"]:hover, .form-search .form-item--multi .form-item:first-child [type="text"]:hover,
.form-item .form-item--multi .form-search:first-child [type="text"]:hover, .form-search .form-item--multi .form-search:first-child [type="text"]:hover {
  border-right-width: 1px;
  border-left-width: 1px; }
  .form-item .form-item--multi .form-item:first-child [type="text"]:focus, .form-search .form-item--multi .form-item:first-child [type="text"]:focus, .form-item .form-item--multi .form-search:first-child [type="text"]:focus, .form-search .form-item--multi .form-search:first-child [type="text"]:focus,
  .form-item .form-item--multi .form-item:first-child [type="text"]:hover:focus, .form-search .form-item--multi .form-item:first-child [type="text"]:hover:focus,
  .form-item .form-item--multi .form-search:first-child [type="text"]:hover:focus, .form-search .form-item--multi .form-search:first-child [type="text"]:hover:focus {
    margin-left: 0; }

.form-item .form-checkbox .text--med, .form-search .form-checkbox .text--med {
  line-height: 18px; }

.form-item__label {
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle; }

.form-item [type="text"], .form-search [type="text"],
.form-item [type="number"], .form-search [type="number"],
.form-item [type="email"], .form-search [type="email"],
.form-item [type="month"], .form-search [type="month"],
.form-item [type="password"], .form-search [type="password"],
.form-item [type="tel"], .form-search [type="tel"],
.form-item [type="url"], .form-search [type="url"],
.form-item [type="search"], .form-search [type="search"] {
  width: 100%;
  display: block;
  -webkit-appearance: none; }
  .form-item [type="text"]:focus, .form-search [type="text"]:focus,
  .form-item [type="number"]:focus, .form-search [type="number"]:focus,
  .form-item [type="email"]:focus, .form-search [type="email"]:focus,
  .form-item [type="month"]:focus, .form-search [type="month"]:focus,
  .form-item [type="password"]:focus, .form-search [type="password"]:focus,
  .form-item [type="tel"]:focus, .form-search [type="tel"]:focus,
  .form-item [type="url"]:focus, .form-search [type="url"]:focus,
  .form-item [type="search"]:focus, .form-search [type="search"]:focus {
    border: 1px solid #038cd6;
    outline: none; }
  .section--negative .form-item [type="text"]:focus, .section--negative .form-search [type="text"]:focus, .section--negative
  .form-item [type="number"]:focus, .section--negative .form-search [type="number"]:focus, .section--negative
  .form-item [type="email"]:focus, .section--negative .form-search [type="email"]:focus, .section--negative
  .form-item [type="month"]:focus, .section--negative .form-search [type="month"]:focus, .section--negative
  .form-item [type="password"]:focus, .section--negative .form-search [type="password"]:focus, .section--negative
  .form-item [type="tel"]:focus, .section--negative .form-search [type="tel"]:focus, .section--negative
  .form-item [type="url"]:focus, .section--negative .form-search [type="url"]:focus, .section--negative
  .form-item [type="search"]:focus, .section--negative .form-search [type="search"]:focus {
    border: 1px solid #00619e; }

.form-item--required label:after,
.form-item--required .form-item__description:after {
  content: "*";
  color: #db5451;
  display: inline-block;
  padding-left: 2px; }
  @media only screen and (max-width: 320px) {
    .form-item--required label:after,
    .form-item--required .form-item__description:after {
      margin-left: -5px;
      transform: translate(5px, 0); } }

.form-item--negativerequired label:after,
.form-item--negativerequired .form-item__description:after {
  content: "*";
  color: #fff;
  display: inline-block;
  padding-left: 2px; }
  @media only screen and (max-width: 320px) {
    .form-item--negativerequired label:after,
    .form-item--negativerequired .form-item__description:after {
      margin-left: -5px;
      transform: translate(5px, 0); } }

.pre-lightbox .form-item--required label:after,
.pre-lightbox .form-item--required .form-item__description:after {
  color: #fff; }

.form-item__description {
  margin-top: 6px; }

.form-item--multi-paddings [class*="col-"] {
  padding-left: 1px; }
  .form-item--multi-paddings [class*="col-"]:first-child {
    padding: 0; }

.form-item--multi-fields [class*="col-"] .form-item, .form-item--multi-fields [class*="col-"] .form-search {
  margin-left: -1px; }

.form-item--multi-fields [class*="col-"] input {
  border-radius: 0; }
  .form-item--multi-fields [class*="col-"] input:hover, .form-item--multi-fields [class*="col-"] input:focus {
    position: relative;
    z-index: 300; }
  .form-item--multi-fields [class*="col-"] input:focus {
    z-index: 301; }

.form-item--multi-fields [class*="col-"]:first-child input {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px; }

.form-item--multi-fields [class*="col-"]:last-child .form-item, .form-item--multi-fields [class*="col-"]:last-child .form-search {
  margin-right: 0; }

.form-item--multi-fields [class*="col-"]:last-child input {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px; }

.form-item--error {
  position: relative; }
  .form-item--error textarea, .form-item--error textarea:focus,
  .form-item--error [type="text"],
  .form-item--error [type="text"]:focus,
  .form-item--error [type="number"],
  .form-item--error [type="number"]:focus,
  .form-item--error [type="email"],
  .form-item--error [type="email"]:focus,
  .form-item--error [type="month"],
  .form-item--error [type="month"]:focus,
  .form-item--error [type="password"],
  .form-item--error [type="password"]:focus,
  .form-item--error [type="tel"],
  .form-item--error [type="tel"]:focus,
  .form-item--error [type="url"],
  .form-item--error [type="url"]:focus,
  .form-item--error [type="search"],
  .form-item--error [type="search"]:focus {
    border-color: #db5451 !important;
    box-shadow: 2px 0 0 0 #fe635f inset, 0 2px 0 0 #fe635f inset, -2px 0 0 0 #fe635f inset, 0 -2px 0 0 #fe635f inset; }
  .form-item--error.form-select .tooltip-trigger-marker {
    display: none; }
  .form-item--error.form-select .form-select__field,
  .form-item--error.form-select select:hover ~ .form-select__field {
    border-color: #db5451 !important;
    box-shadow: 2px 0 0 0 #fe635f inset, 0 2px 0 0 #fe635f inset, -2px 0 0 0 #fe635f inset, 0 -2px 0 0 #fe635f inset; }
    .form-item--error.form-select .form-select__field:after,
    .form-item--error.form-select select:hover ~ .form-select__field:after {
      top: 2px;
      bottom: 2px;
      right: 2px; }
  .form-item--error [class^="icon-"] {
    color: #fe635f;
    position: absolute;
    right: 10px;
    text-align: center;
    font-size: 17px;
    line-height: 20px;
    z-index: 500;
    bottom: 0.9em;
    width: 18px;
    height: 18px; }

.form-item--inline {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  margin-right: 6px; }
  @media only screen and (max-width: 768px) {
    .form-item--inline {
      display: block;
      margin: 0;
      margin-bottom: 20px; } }
  .block--filter .form-item--inline {
    margin: 20px 20px 0 0; }
    @media only screen and (max-width: 480px) {
      .block--filter .form-item--inline {
        margin-right: 0; } }
  .form-item--inline:first-child {
    margin-left: 0; }
  label + .form-item--inline {
    margin-left: 7px; }
  .form-item--inline select {
    padding-right: 40px;
    margin-right: 40px; }

.form-item--filter {
  position: relative; }
  .form-item--filter:before {
    content: "\E0A9";
    line-height: 1;
    position: absolute;
    left: 10px;
    top: 50%; }
  .form-item--filter input {
    padding-left: 30px; }
  [data-loading] .form-item--filter:before {
    content: "\E0D7";
    animation: spin 2s linear infinite; }
  .form-item--filter .icon-clear {
    background-color: transparent;
    border: none;
    color: #474747;
    line-height: 1;
    padding: 0;
    position: absolute;
    outline: none;
    right: 10px;
    top: 50%;
    margin-top: -21px; }
  .form-item--filter [type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0; }
  .form-item--filter.is-empty .icon-clear {
    display: none; }

@media only screen and (min-width: 480px) {
  .form-item.form-item--small [type="text"], .form-item--small.form-search [type="text"],
  .form-item.form-item--small [type="number"], .form-item--small.form-search [type="number"],
  .form-item.form-item--small [type="email"], .form-item--small.form-search [type="email"],
  .form-item.form-item--small [type="month"], .form-item--small.form-search [type="month"],
  .form-item.form-item--small [type="password"], .form-item--small.form-search [type="password"],
  .form-item.form-item--small [type="tel"], .form-item--small.form-search [type="tel"],
  .form-item.form-item--small [type="url"], .form-item--small.form-search [type="url"],
  .form-item.form-item--small [type="search"], .form-item--small.form-search [type="search"] {
    font-size: 13px;
    line-height: normal;
    padding-top: 7px;
    padding-bottom: 7px;
    height: 32px; }
  .form-item--select.form-item--small {
    font-size: 13px; } }

.form-item__clear-button {
  background-color: transparent;
  border: none;
  color: #474747;
  line-height: 1;
  padding: 0;
  position: absolute;
  outline: none;
  right: 10px;
  top: 50%;
  margin-top: -8px; }
  .form-item__clear-button:before {
    content: "\E02B"; }

.form-row {
  margin-top: 20px; }

.form-item__row {
  position: relative;
  display: inline-block; }
  .form-item__row .form-comp:before {
    font-size: 20px;
    line-height: 36px;
    color: #474747;
    font-family: "framework-icons";
    position: absolute;
    top: 0;
    border: none;
    background: transparent;
    margin: 2px 0;
    padding: 0 10px; }
  .form-item__row .form-comp:first-child:before {
    left: 0;
    padding-right: 0; }
  .form-item__row .form-comp:first-child + input {
    width: auto;
    padding-left: 40px; }
  .form-item__row .form-comp:last-child:before {
    right: 0;
    border-left: 2px solid #d1d1d1;
    border-radius: 2px;
    padding: 0 8px;
    margin: 2px;
    background: #f5f5f5; }
  .form-item__row input:first-child {
    padding-right: 40px;
    width: auto; }

@media only screen and (min-width: 768px) {
  .label-inline {
    padding-top: 20px; }
    .label-inline label {
      float: left;
      clear: left;
      width: 20%;
      text-align: right;
      padding-right: 10px;
      padding-top: 13px; }
      .form-item--small .label-inline label {
        padding-top: 9px; }
    .label-inline [type="text"],
    .label-inline [type="number"],
    .label-inline [type="email"],
    .label-inline [type="month"],
    .label-inline [type="password"],
    .label-inline [type="tel"],
    .label-inline [type="url"],
    .label-inline [type="search"] {
      width: 80%; }
    .label-inline .form-item__row {
      width: 78.99%;
      display: inline-block; }
      .label-inline .form-item__row [type="text"],
      .label-inline .form-item__row [type="number"],
      .label-inline .form-item__row [type="email"],
      .label-inline .form-item__row [type="month"],
      .label-inline .form-item__row [type="password"],
      .label-inline .form-item__row [type="tel"],
      .label-inline .form-item__row [type="url"],
      .label-inline .form-item__row [type="search"] {
        width: 100%; } }

@media only screen and (min-width: 480px) {
  .form-row {
    margin-top: 1.25rem; }
  .form-item--multi {
    display: table;
    width: 100%; }
    .form-item--multi .form-col--med {
      width: 34.9%;
      min-width: 4.6875em; }
    .form-item--multi .form-item, .form-item--multi .form-search,
    .form-item--multi .form-search {
      display: table-cell;
      vertical-align: bottom; }
    .form-item--multi .form-item:first-child input, .form-item--multi .form-search:first-child input,
    .form-item--multi .form-search:first-child input {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      border-right-width: 0; }
    .form-item--multi .form-item:last-child input, .form-item--multi .form-search:last-child input,
    .form-item--multi .form-search:last-child input,
    .form-item--multi .form-item.form-col--last input,
    .form-item--multi .form-col--last.form-search input,
    .form-item--multi .form-col--last.form-search input {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      border-right-width: 1px; }
    .form-item--multi .form-item input, .form-item--multi .form-search input,
    .form-item--multi .form-search input {
      border-radius: 0; }
  .form-inline {
    line-height: 0; }
    .form-inline [class^="form-radio"],
    .form-inline [class^="form-checkbox"] {
      display: inline-block;
      margin-right: 30px;
      line-height: 0; }
  .form-row .form-item label, .form-row .form-search label,
  .form-row .form-search label {
    margin-top: 0; } }

.error-summary, .warning-summary {
  border-radius: 2px;
  background-color: #fe635f;
  border: 4px solid #db5451;
  color: #fff;
  padding: 30px 20px; }
  .error-summary__title {
    border-bottom: 1px solid #db5451;
    padding-bottom: 20px; }
  .error-summary__list li {
    padding-left: 30px;
    position: relative; }
    .error-summary__list li:before {
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      height: 18px;
      width: 18px; }

.warning-summary {
  background-color: #ffb900;
  border: 4px solid #e0a500;
  color: #666; }
  .warning-summary .error-summary__title {
    border-bottom: 1px solid #e0a500;
    color: #e0a500; }

.form-item--megaselect a {
  cursor: pointer; }

/* Common forms */
.form-item--inline.form-item--first {
  margin-left: 0; }

.form-item--multi.multi-large .form-item, .form-item--multi.multi-large .form-search {
  vertical-align: top;
  padding-left: 1px;
  margin: 0; }
  .form-item--multi.multi-large .form-item input, .form-item--multi.multi-large .form-search input {
    border-radius: 2px; }
  .form-item--multi.multi-large .form-item:first-child, .form-item--multi.multi-large .form-search:first-child {
    padding: 0; }
  .form-item--multi.multi-large .form-item.no-child:first-child, .form-item--multi.multi-large .no-child.form-search:first-child {
    padding-left: 1px; }
  @media only screen and (max-width: 768px) {
    .form-item--multi.multi-large .form-item.mobile-one-whole + .form-item, .form-item--multi.multi-large .mobile-one-whole.form-search + .form-item, .form-item--multi.multi-large .form-item.mobile-one-whole + .form-search, .form-item--multi.multi-large .mobile-one-whole.form-search + .form-search {
      margin-top: 20px; } }

.form-item--multi .form-item--first {
  width: 35% !important; }

.form-item--multi .form-item--second {
  width: 65% !important; }

.radio-wrapper label,
.form-radio label,
.form-checkbox label {
  margin-top: 0; }

.speach-bubble {
  left: 0;
  position: absolute;
  z-index: 500;
  background-color: #fff;
  top: 36px;
  border-radius: 3px;
  overflow: visible;
  border: 1px solid #d1d1d1;
  visibility: hidden;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.02);
  transition: opacity 50ms ease-out,transform 100ms ease-out; }
  .speach-bubble.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0); }
    .speach-bubble.is-open.is-loaded {
      visibility: visible; }
  .speach-bubble__top-bar {
    height: 40px;
    line-height: 40px;
    background: #e8e8e8;
    background-image: -webkit-linear-gradient(270deg, #fff, #f5f5f5);
    background-image: linear-gradient(180deg, #fff, #f5f5f5);
    text-align: center;
    border-bottom: 1px solid #d1d1d1;
    position: relative; }
  .speach-bubble:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #d1d1d1;
    left: 17px;
    top: -8px;
    margin-left: -8px; }
  .speach-bubble:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    left: 17px;
    top: -7px;
    margin-left: -7px; }
  .speach-bubble:before, .speach-bubble:after {
    width: 0;
    height: 0;
    content: "";
    position: absolute; }
  .speach-bubble__close {
    background: transparent;
    border: none;
    color: inherit;
    line-height: 1;
    font-size: 10px;
    outline: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px; }
  .speach-bubble__content {
    max-height: 285px;
    overflow-y: auto; }

.accordion-filter {
  width: 100%;
  font-weight: normal; }
  .accordion-filter .accordion-filter__parent-item-toggle,
  .accordion-filter .accordion-filter__leaf-item {
    padding-left: 10px;
    line-height: 40px;
    height: 40px;
    color: #474747; }
  .accordion-filter__parent-item {
    position: relative;
    display: block;
    overflow: hidden; }
    .accordion-filter__parent-item[data-state="all-selected"] .accordion-filter__parent-item-toggle label:before {
      content: "\E029";
      color: #038cd6; }
    .accordion-filter__parent-item[data-state="some-selected"] .accordion-filter__parent-item-toggle label:before {
      content: "\E075";
      padding-left: 3px;
      padding-right: 0;
      color: #038cd6; }
    .accordion-filter__parent-item .accordion-filter__leaf-item {
      display: none; }
    .accordion-filter__parent-item.is-expanded .accordion-filter__leaf-item {
      display: block; }
    .accordion-filter__parent-item.is-expanded .accordion-filter__parent-item-expand:before {
      content: "\E00F"; }
    .accordion-filter__parent-item .is-open .accordion-filter__leaf-item {
      display: block; }
    .accordion-filter__parent-item .is-open .accordion-filter__parent-item-expand:before {
      content: "\E00F"; }
  .accordion-filter__parent-item-toggle {
    display: block;
    height: 40px;
    border-bottom: 1px solid #d1d1d1; }
    .accordion-filter__parent-item-toggle:focus label:before {
      background-color: #f5f5f5;
      border: 1px solid #038cd6; }
  .accordion-filter__parent-item-expand {
    width: 40px;
    height: 40px;
    color: #474747;
    border-bottom: 1px solid #d1d1d1;
    line-height: 44px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    background: #e8e8e8;
    background-image: linear-gradient(180deg, #fff, #f5f5f5);
    border-left: 1px solid #d1d1d1; }
    .accordion-filter__parent-item-expand:before {
      position: relative; }
    .accordion-filter__parent-item-expand:focus:before {
      opacity: .5; }
    .accordion-filter__parent-item-expand:focus:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      box-sizing: border-box;
      border: 1px solid #038cd6; }
  .accordion-filter__leaf-item {
    border-bottom: 1px solid #e8e8e8; }
    .accordion-filter__leaf-item label {
      padding-top: 2px;
      line-height: 12px;
      display: inline-block;
      vertical-align: middle; }
      .accordion-filter__leaf-item label:before {
        top: 10px; }
    .accordion-filter__leaf-item input[type="checkbox"] {
      display: inline-block;
      vertical-align: middle; }
    .accordion-filter__leaf-item:last-child {
      border-bottom: 1px solid #d1d1d1; }
  .accordion-filter__leaf-parent-item {
    border-bottom: 1px solid #d1d1d1; }
  .accordion-filter__parent-item-list > .accordion-filter__leaf-item {
    padding-left: 33px; }
  @media only screen and (max-width: 768px) {
    .accordion-filter {
      width: auto; } }

.form-checkbox--filter {
  margin: 0;
  position: relative;
  display: inline-block; }
  #filters-secondary .form-checkbox--filter,
  #filters-chosen .form-checkbox--filter {
    line-height: 0;
    margin-bottom: 10px; }
  #filters-chosen .form-checkbox--filter:first-child {
    margin-top: 10px; }
  .form-checkbox--filter label {
    background: #fff;
    color: #474747;
    border: 1px solid #b8b8b8;
    margin: 0;
    position: relative;
    padding: 1px 1em;
    line-height: 1.875rem; }
    .form-checkbox--filter label:hover {
      background: #f0f0f0; }
    #filters-chosen .form-checkbox--filter label {
      padding-right: 35px; }
      #filters-chosen .form-checkbox--filter label:before {
        content: "\E0A4";
        font-size: 7px;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -10px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        border: 1px solid #00619e;
        border-radius: 50%;
        background: linear-gradient(180deg, #0296e5, #0282c7); }
      #filters-chosen .form-checkbox--filter label .filter-count {
        color: #c0e2f5;
        display: none; }
    .form-checkbox--filter label .filter-count {
      font-size: 13px;
      color: #474747; }
  .form-checkbox--filter [type=checkbox] {
    display: none; }
  .form-checkbox--filter [type=checkbox]:checked + label {
    border: 1px solid #0278b8;
    background: #038cd6;
    color: #fff; }
    .form-checkbox--filter [type=checkbox]:checked + label span {
      color: #fff; }
    .form-checkbox--filter [type=checkbox]:checked + label .filter-count {
      color: #fff; }
  .form-checkbox--filter [type=checkbox]:disabled + label {
    box-shadow: inset 0 0 0 1px #d1d1d1;
    border: none; }
    .form-checkbox--filter [type=checkbox]:disabled + label span {
      color: #d1d1d1; }
  @media only screen and (min-width: 480px) {
    #filters-chosen .form-checkbox--filter:first-child {
      margin-top: 0; }
    #filters-chosen .form-checkbox--filter--primary {
      display: none; }
    #filters-chosen .form-checkbox--filter .filter-number {
      display: none; } }

.radiobutton-row label {
  transition: all .125s;
  cursor: pointer;
  padding: 12px 16px;
  border: 1px solid #d1d1d1;
  border-right-width: 0;
  border-color: #b8b8b8;
  background-color: #f5f5f5;
  background: #fff;
  line-height: 12px;
  height: 40px;
  float: left; }
  .radiobutton-row label .icon {
    margin-right: .6em;
    vertical-align: middle;
    display: inline-block;
    margin-top: 0; }

.radiobutton-row label:nth-child(2) {
  border-radius: 3px 0 0 3px; }

.radiobutton-row label:last-child {
  border-radius: 0 3px 3px 0;
  border-right: 1px solid #d1d1d1; }

.radiobutton-row input:hover + label {
  border-color: #b8b8b8;
  background: #fff; }
  .radiobutton-row input:hover + label:last-child {
    border-right-color: #b8b8b8; }

.radiobutton-row input:focus + label {
  background: #f5f5f5;
  box-shadow: inset 3px 4px 3px 0px rgba(209, 209, 209, 0.35); }

.radiobutton-row input:checked:hover + label,
.radiobutton-row input:checked + label {
  background: #f5f5f5;
  box-shadow: inset 3px 4px 3px 0px rgba(209, 209, 209, 0.35); }

.radiobutton-row.radiobutton-row--small label {
  padding: 9px 13px;
  height: 32px; }

.radiobutton-row.radiobutton-row--icons-only .icon {
  margin-right: 0; }

.block--form .title--xsmall .icon:before {
  font-size: 11px;
  color: #666; }

.block--form__edit-toggle {
  z-index: 50;
  position: relative; }
  .touch .block--form__edit-toggle {
    padding: 15px;
    margin: -15px; }

.block--form p {
  margin: 10px 0; }

.block--form .border--bottom {
  padding-bottom: 20px; }

.block--form .container > .terms-list {
  margin-top: 0; }

@media only screen and (min-width: 480px) {
  .block--form .terms-list:last-child dd {
    margin-bottom: 0; } }

.block--form--locked .block--form__locked-container {
  display: block; }

.block--form--locked .block--form__editable-container {
  display: none; }

.block--form--editable .block--form__locked-container {
  display: none; }

.block--form--editable .block--form__editable-container {
  display: block; }

.terms-list {
  color: #666;
  line-height: .9375rem;
  margin-top: 1.25rem;
  margin-bottom: 0;
  word-wrap: break-word; }
  .terms-list dt {
    font-size: 0.75rem; }
  .terms-list dd {
    color: #494949;
    line-height: 1.4rem;
    margin: 0 0 1rem; }

/**
name: footer
type: ui
elements:

    section--footer
      __breadcrumb:
      __menu:
      __info

	section--bottom
	  footer__social
	  __holder
*/
.section-footer-scroll {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1; }
  @media only screen and (max-width: 768px) {
    .section-footer-scroll {
      position: relative;
      z-index: 1; } }

.section--footer a,
.section--bottom a {
  color: inherit; }
  .section--footer a:active, .section--footer a:focus, .section--footer a:hover,
  .section--bottom a:active,
  .section--bottom a:focus,
  .section--bottom a:hover {
    color: #a7c1d1;
    text-decoration: none; }

@media only screen and (max-width: 768px) {
  .section--footer,
  .section--bottom {
    text-align: center; } }

.section--footer {
  padding-top: 20px;
  padding-bottom: 15px;
  font-size: 11px;
  background: #004773;
  color: #a7c1d1; }
  .section--footer__breadcrumb {
    color: #a7c1d1;
    padding-top: 35px;
    white-space: nowrap;
    line-height: 1; }
    .section--footer__breadcrumb ul {
      display: inline-block;
      margin: 0;
      width: auto; }
    .section--footer__breadcrumb li {
      display: inline;
      padding-right: 8px; }
      .section--footer__breadcrumb li:nth-child(1n+2) a:before {
        content: "\E00B";
        font-size: 6px;
        color: #4d7f9d;
        vertical-align: middle;
        margin-right: 8px; }
  .section--footer__menu {
    padding-top: 22px;
    border: solid #4d7f9d;
    border-width: 1px 0; }
    .section--footer__menu h3 {
      color: #e8e8e8;
      margin-bottom: 15px; }
    .section--footer__menu ul {
      margin-bottom: 20px; }
  .section--footer__info {
    padding: 20px 0 5px; }
    .section--footer__info__icon {
      display: inline-block;
      font-size: 18px;
      line-height: 1;
      vertical-align: middle; }
      @media only screen and (max-width: 768px) {
        .section--footer__info__icon {
          display: block;
          margin: 0 auto; } }
    .section--footer__info__txt {
      padding: 0 10px;
      display: inline-block;
      vertical-align: middle; }
      @media only screen and (max-width: 768px) {
        .section--footer__info__txt {
          line-height: 20px; } }
    @media only screen and (max-width: 768px) {
      .section--footer__info {
        padding: 30px 0 5px; } }

.section--bottom {
  padding: 15px 0;
  font-size: 11px;
  background: #003758;
  color: #a7c1d1; }
  .section--bottom__logo:before {
    font-size: 24px;
    line-height: 20px;
    float: left; }
  @media only screen and (max-width: 768px) {
    .section--bottom__holder .float--right, .section--bottom__holder .pager--wrap,
    .section--bottom__holder .float--left,
    .section--bottom__holder .doughnut--big .doughnut__main, .doughnut--big
    .section--bottom__holder .doughnut__main,
    .section--bottom__holder .doughnut--big {
      float: none; } }

.footer__social {
  margin-top: 23px; }
  .footer__social a {
    margin-left: 2px;
    display: inline-block; }
    @media only screen and (max-width: 768px) {
      .footer__social a {
        margin: 0 10px; } }
  .footer__social [class*=icon-]:before {
    line-height: 1;
    margin-left: 0;
    font-size: 23px; }
    @media only screen and (max-width: 768px) {
      .footer__social [class*=icon-]:before {
        font-size: 33px; } }
  @media only screen and (max-width: 768px) {
    .footer__social {
      padding-top: 0;
      padding-bottom: 10px; } }

.adr-list li {
  display: inline-block;
  padding-right: 5px;
  vertical-align: middle;
  line-height: 30px; }

.footer-item {
  word-wrap: break-word;
  margin-left: 10px; }
  .footer-item:first-child {
    margin-left: 0; }

/**
name: Form checkbox
type: ui
modifiers:
  --small : Small checkbox
  --large : Large checkbox
  --disable: Disabled checkbox
examples:
	- name: Checkboxes list small
	  tmpl:
	  	  include: list-small.html
	- name: Checkboxes list
	  tmpl:
		  include: list.html
	- name: Checkboxes list large
	  tmpl:
		  include: list-large.html
	- name: Disabled checkboxes
	  tmpl:
		  include: disabled.html
	- name: Checkboxes list horizontal small
	  tmpl:
		  include: list-horizontal-small.html
	- name: Checkboxes list horizontal
	  tmpl:
		  include: list-horizontal.html
	- name: Checkboxes list horizontal large
	  tmpl:
		  include: list-horizontal-large.html
	- name: Small checkboxes list in negative box
	  tmpl:
		  include: list-small-negative.html
	- name: Checkboxes list in negative box
	  tmpl:
		  include: list-negative.html
	- name: Large checkboxes list in negative box
	  tmpl:
		  include: list-large-negative.html
	- name: Disabled checkboxes list in negative box
	  tmpl:
		  include: disabled-negative.html
*/
.form-checkbox label {
  display: inline-block;
  vertical-align: middle;
  padding: 0 0 0 30px;
  cursor: pointer;
  user-select: none;
  position: relative;
  line-height: 1; }
  .form-checkbox label.empty {
    padding: 0;
    width: 16px;
    height: 16px; }
  .form-checkbox label:before {
    content: "\E029";
    width: 11px;
    height: 12px;
    font-size: 13px;
    line-height: 11px;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    text-align: center;
    color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: -3px;
    transition: all 0.125s;
    overflow: visible;
    padding-left: 3px;
    padding-top: 2px; }

.form-checkbox [type=checkbox] {
  position: absolute; }

.form-checkbox [type=checkbox]:checked ~ label:before {
  color: #038cd6; }

.form-checkbox label:hover:before {
  background: #f5f5f5;
  border: 1px solid #b8b8b8; }

.form-checkbox [type=checkbox]:focus + label:before {
  background: #f5f5f5;
  border: 1px solid #038cd6; }

.form-checkbox--small label {
  padding-left: 20px; }
  .form-checkbox--small label.empty {
    width: 11px;
    height: 11px; }
  .form-checkbox--small label:before {
    padding-left: 4px;
    width: 5px;
    height: 7px;
    line-height: 0;
    top: 4px; }

.form-checkbox--large label {
  padding-left: 40px; }
  .form-checkbox--large label.empty {
    width: 24px;
    height: 24px; }
  .form-checkbox--large label:before {
    width: 19px;
    height: 20px;
    font-size: 15px;
    line-height: 18px;
    background: #f5f5f5; }

.form-checkbox--large [type=checkbox]:checked + label:before {
  background: #038cd6;
  border-color: #038cd6;
  color: #fff; }
  .form-checkbox--large [type=checkbox]:checked + label:before:focus {
    border-color: #0278b8; }

.form-checkbox [type=checkbox]:disabled + label {
  color: #d1d1d1;
  pointer-events: none; }
  .form-checkbox [type=checkbox]:disabled + label a {
    pointer-events: all; }
  .form-checkbox [type=checkbox]:disabled + label:before {
    border-color: #e8e8e8; }

.form-checkbox [type=checkbox]:disabled:checked + label:before {
  border-color: transparent; }

.section--negative .form-checkbox label:before {
  border-color: #fff; }

.section--negative .form-checkbox [type=checkbox]:hover + label:before {
  background-color: #f5f5f5; }

.section--negative .form-checkbox [type=checkbox]:active + label:before,
.section--negative .form-checkbox [type=checkbox]:focus + label:before {
  border-color: #00619e;
  background-color: #c0e2f5; }

.section--negative .form-checkbox [type=checkbox]:checked + label:before {
  color: #0278b8; }

.section--negative .form-checkbox--small [type=checkbox]:checked + label:before {
  color: #474747; }

.section--negative .form-checkbox--large [type=checkbox]:focus:checked + label:before {
  background-color: #c0e2f5;
  border-color: #00619e; }

.section--negative .form-checkbox--large [type=checkbox]:checked + label:before {
  background-color: #fff;
  border-color: #fff; }

.section--negative .form-checkbox [type=checkbox]:disabled + label {
  color: #c0e2f5;
  pointer-events: none; }
  .section--negative .form-checkbox [type=checkbox]:disabled + label a {
    pointer-events: all; }
  .section--negative .form-checkbox [type=checkbox]:disabled + label:before {
    border-color: #c0e2f5;
    background-color: transparent; }

.section--negative .form-checkbox [type=checkbox]:disabled:checked + label:before {
  border-color: transparent;
  background-color: transparent;
  color: #fff; }

.form-checkbox--single label {
  margin: 0;
  padding: 0; }
  .form-checkbox--single label:before {
    top: 0;
    margin: 0;
    position: static; }

.form-checkbox.form-item--small label {
  padding-left: 20px; }
  .form-checkbox.form-item--small label:before {
    width: 9px;
    height: 9px;
    padding-top: 0;
    padding-left: 0;
    font-size: 11px;
    line-height: 12px;
    top: 5px; }

/**
name: Form radio
type: ui
modifiers:
  --small : Small radio
  --large : Large radio
  --disable: Disabled radio
examples:
	- name: Radio list small
	  tmpl:
	  	  include: list-small.html
	- name: Radio list
	  tmpl:
		  include: list.html
	- name: Radio list large
	  tmpl:
		  include: list-large.html
	- name: Disabled radio
	  tmpl:
		  include: disabled.html
	- name: Radio list horizontal small
	  tmpl:
		  include: list-horizontal-small.html
	- name: Radio list horizontal
	  tmpl:
		  include: list-horizontal.html
	- name: Radio list horizontal large
	  tmpl:
		  include: list-horizontal-large.html
	- name: Small radis list in negative box
	  tmpl:
		  include: list-small-negative.html
	- name: Radio list in negative box
	  tmpl:
		  include: list-negative.html
	- name: Large radio list in negative box
	  tmpl:
		  include: list-large-negative.html
	- name: Disabled radio list in negative box
	  tmpl:
		  include: disabled-negative.html
*/
.form-radio label {
  padding: 6px 0 6px 30px;
  display: inline-block;
  position: relative; }
  .form-radio label:before {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #b8b8b8;
    width: 16px;
    height: 16px;
    content: "";
    left: 0;
    top: 6px;
    transition: all 0.125s; }
  .form-radio label:after {
    position: absolute;
    border-radius: 50%;
    background-color: #038cd6;
    width: 8px;
    height: 8px;
    content: "";
    opacity: 0;
    left: 5px;
    top: 11px;
    transition: all 0.125s; }

.form-radio [type=radio] {
  position: absolute; }

.form-radio [type=radio]:checked + label:after {
  opacity: 1; }

.form-radio [type=radio]:focus + label:before {
  border: 1px solid #038cd6;
  background-color: #f5f5f5; }

.form-radio [type=radio]:disabled + label {
  color: #d1d1d1;
  pointer-events: none; }
  .form-radio [type=radio]:disabled + label:before {
    border-color: #e8e8e8; }

.form-radio [type=radio]:checked:disabled + label {
  color: #d1d1d1;
  pointer-events: none; }
  .form-radio [type=radio]:checked:disabled + label:before {
    border-color: #e8e8e8; }
  .form-radio [type=radio]:checked:disabled + label:after {
    background-color: #d1d1d1;
    opacity: 1; }

.form-radio--small label {
  padding: 3px 0 3px 20px; }
  .form-radio--small label:before {
    width: 10px;
    height: 10px;
    top: 6px; }
  .form-radio--small label:after {
    width: 6px;
    height: 6px;
    left: 3px;
    top: 9px; }

.form-radio--large label {
  padding: 10px 0 10px 40px; }
  .form-radio--large label:before {
    width: 24px;
    height: 24px;
    top: 10px; }
  .form-radio--large label:after {
    width: 14px;
    height: 14px;
    top: 16px;
    left: 6px; }

.section--negative .form-radio label:before {
  border-color: #fff; }

.section--negative .form-radio label:after {
  background-color: #0068a8; }

.section--negative .form-radio [type=radio]:focus + label:before {
  border-color: #00619e;
  background-color: #c0e2f5; }

.section--negative .form-radio [type=radio]:disabled + label {
  color: #c0e2f5;
  pointer-events: none; }
  .section--negative .form-radio [type=radio]:disabled + label:before {
    border-color: #c0e2f5;
    background-color: transparent; }

.section--negative .form-radio [type=radio]:disabled:checked + label {
  color: #c0e2f5;
  pointer-events: none; }
  .section--negative .form-radio [type=radio]:disabled:checked + label:before {
    border-color: #c0e2f5;
    background-color: transparent; }
  .section--negative .form-radio [type=radio]:disabled:checked + label:after {
    background-color: #c0e2f5; }

/**
name: Form search
type: ui
desc: >
	# Disabling

	1. You can disable search element by adding 'disabled' attribute to 'input:search' and to 'button.form-search__submit'

	# Modifiers

	1. --small: Small search

	2. --large: Large search

examples:
	- name: Default search
	  tmpl:
	  	  include: search.html
	- name: Small search
	  tmpl:
	  	  include: search-small.html
	- name: Large search
	  tmpl:
	  	  include: search-large.html
	- name: Disabled search
	  tmpl:
	  	  include: search-disabled.html
	- name: Inline search
	  tmpl:
	  	  include: search-inline.html
	- name: Inline small search
	  tmpl:
	  	  include: search-inline-small.html
	- name: Inline large search
	  tmpl:
	  	  include: search-inline-large.html
	- name: Negative search
	  tmpl:
	  	  include: search-negative.html
	- name: Negative inline search
	  tmpl:
	  	  include: search-inline-negative.html
*/
.form-search {
  position: relative; }
  .form-search input {
    outline: none;
    -webkit-appearance: none; }
  .form-search input[type="text"],
  .form-search input[type="search"] {
    padding-right: 56px; }
  .form-search__submit {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    outline: none;
    transition: all 0.125s;
    width: 40px;
    padding: 0;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 0 3px 3px 0;
    border: 1px solid #d1d1d1;
    color: #666;
    line-height: 40px; }
    .form-search__submit .icon-search {
      display: inline-block; }
      .form-search__submit .icon-search:before {
        vertical-align: middle; }
    .form-search__submit:disabled {
      border-color: #e8e8e8;
      color: #e8e8e8; }
  .form-search__clear {
    border: none;
    background: transparent;
    outline: none;
    padding: 0 5px;
    position: absolute;
    opacity: 1;
    transition: opacity .1s ease;
    right: 40px;
    top: 0;
    bottom: 0;
    color: #b8b8b8; }
    .form-search__clear:before {
      font-size: 20px;
      height: 32px;
      line-height: 32px; }
  .form-search input:not([disabled]):hover ~ .form-search__submit {
    border: 1px solid #b8b8b8;
    border-left: 1px solid #d1d1d1; }
  .form-search input:disabled ~ .form-search__clear {
    display: none; }
  .form-search input:focus ~ .form-search__submit {
    background-color: #038cd6;
    border: 1px solid #038cd6;
    color: #fff; }
  .form-search.is-empty .form-search__clear {
    pointer-events: none;
    opacity: 0; }
  .form-search.form-search--inline .form-search__clear {
    right: 8px; }
  .form-search.form-search--inline input {
    padding-left: 35px; }
  .form-search.form-search--inline:before {
    content: "\E0A9";
    font-size: 20px;
    position: absolute;
    top: 11px;
    left: 10px;
    color: #666; }
  .form-search.form-search--inline.form-item--small input {
    padding-left: 30px; }
  .form-search.form-search--inline.form-item--small:before {
    top: 9px;
    font-size: 14px; }
  .form-search.form-search--inline.form-item--large input {
    padding-left: 50px;
    padding-right: 10px; }
  .form-search.form-search--inline.form-item--large:before {
    top: 17px;
    font-size: 30px; }
  .section--negative .form-search .form-search__submit {
    border-color: transparent;
    border-left: 1px solid #d1d1d1;
    border-radius: 0 3px 3px 0; }
  .section--negative .form-search input:focus ~ .form-search__submit {
    background-color: #00619e;
    border: 1px solid #00619e;
    color: #fff; }
  .form-search.form-item--small input {
    padding-bottom: 7px;
    height: 32px; }
  .form-search.form-item--small .form-search__submit {
    width: 32px;
    line-height: 30px; }
  .form-search.form-item--small .form-search__clear {
    right: 32px; }
  .form-search.form-item--large input {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 80px;
    height: 64px;
    font-style: italic; }
  .form-search.form-item--large .form-search__submit {
    width: 64px;
    line-height: 62px; }

.aria--visible {
  position: absolute !important;
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

/*
name: flag
type: ui
*/
.flag {
  display: table;
  width: 100%;
  height: 100%; }
  .flag__image, .flag__body {
    display: table-cell;
    vertical-align: middle; }
  .flag__image {
    padding-right: 10px; }
    .flag__image > img {
      display: block;
      max-width: none; }
  .flag__body {
    width: 100%; }
  .flag--top .flag__image,
  .flag--top .flag__body {
    vertical-align: top; }
  .flag--bottom .flag__image,
  .flag--bottom .flag__body {
    vertical-align: bottom; }
  .flag--reverse .flag__image {
    padding-right: 0;
    padding-left: 10px; }

@media only screen and (max-width: 768px) {
  .flag {
    display: block; }
    .flag__image, .flag__body {
      display: block;
      padding-left: 0;
      padding-right: 0; } }

/**
name: Links
type: ui
desc: >
      Type of the links
modifiers:
   --default: inherit color from parent block
   --underlined: Adds underline to link
   --non-underlined: Removes underline from link on hover
   --gray: Changes link color to $color-stone-grey(#666) 
   --white: Changes link color to $color-white(#fff), (uses inside section--negative)
   --bullet: Adds bullet/arrow to link
   --profile: Uses for .link class - Adds 10px left margin when img beside
examples:
  - name: Simple global link
    tmpl: >
      <a href="#">link text here</a>
  - name: Default link (div with class color-yellow used just for example )
    tmpl: >
      <div class="color-yellow"><a class="link--default" href="#">link text here</a></div>
  - name: Simple underlined link
    tmpl: >
      <a class="link--underlined" href="#">link text here</a>
  - name: Simple link with no underline on hover
    tmpl: >
      <a class="link--non-underlined" href="#">link text here</a>
  - name: Gray link
    tmpl: >
      <a class="link--gray" href="#">link text here</a>
  - name: White link (uses inside section--negative)
    tmpl: >
      <div class="section--negative box--blue padding-whole"><a class="link--white" href="#">link text here</a></div>
  - name: Bullet link
    tmpl: >
      <a class="link--bullet" href="#">link text here</a>
*/
.link--default {
  color: inherit; }

.link--underlined {
  text-decoration: underline; }
  .link--underlined:hover {
    text-decoration: none; }

.link--non-underlined:hover {
  text-decoration: none; }

.link--gray {
  color: #666; }

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

.section--negative .link--bullet {
  color: #fff; }

.link--bullet:before {
  content: "\E01F";
  font-size: 7px;
  margin-right: .6em;
  vertical-align: middle;
  position: relative;
  top: -1px; }

/**
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 just for clearer understanding, not necessarily to use.

examples:
  - name: Lists
    tmpl:
      include: lists.html
  - name: List Default
    tmpl:
      include: list-default.html
  - name: List Check
    tmpl:
      include: list-check.html
  - name: List Check small
    tmpl:
      include: list-check-small.html
  - name: List Check-bullet
    tmpl:
      include: list-check-bullet.html
  - name: List Check-bullet white
    tmpl:
      include: list-check-bullet-white.html
  - name: List Check-bullet gray
    tmpl:
      include: list-check-bullet-grey.html
  - name: List Check-bullet gray-dark
    tmpl:
      include: list-check-bullet-grey-dark.html
  - name: List divided blue
    tmpl:
      include: list-divided-blue.html
  - name: List breadcrumbs
    tmpl:
      include: list-breadcrumbs.html
  - name: List footer
    tmpl:
      include: list-footer.html
  - name: List numeric
    tmpl:
      include: list-numeric.html
  - name: List inline
    tmpl:
      include: list-inline.html
  - name: List small
    tmpl:
      include: list-small.html
  - name: List with no vertical spacing between li
    tmpl:
      include: list-no-vertical-spacing.html
*/
.list li {
  position: relative;
  margin: 0 0 10px; }
  .list li:before {
    line-height: initial;
    padding-right: 10px; }
  .list li:last-child {
    margin: 0; }

.list ul,
.list ol,
.list dl {
  margin: 5px 0 0 10px; }

.list dl dt {
  float: left;
  margin: 0 5px 10px 0; }

.list dl dd {
  margin: 0 0 10px;
  overflow: hidden; }

.list--default li:before {
  content: "\E01D";
  font-size: 7px;
  -webkit-transform: scale(0.5);
  display: inline-block; }

.list--check {
  /*&--small {
			@extend %text-size--13;

			li {
				margin-bottom: 5px;

				&:before {
					font-size: 9px;
					top: 5px;
				}
			}
		}*/ }
  .list--check li:before {
    content: "\E029";
    font-size: .65em; }
  .list--check--bullet li:before {
    content: "\E01C";
    font-size: 1em; }

.list--divided li + li,
.list--divided li + li:last-child {
  border-left: 2px solid #474747;
  margin: 0 0 0 8px;
  padding-left: 10px; }

.list--divided--blue li + li,
.list--divided--blue li + li:last-child {
  border-color: rgba(255, 255, 255, 0.3); }

.list--breadcrumbs li {
  float: left;
  margin: 0;
  padding-left: 15px; }
  .list--breadcrumbs li:before {
    /* @extend %icon-vertical-align; */
    content: "\E01F";
    font-size: 7px; }
  .list--breadcrumbs li:first-child {
    padding-left: 0; }
    .list--breadcrumbs li:first-child:before {
      display: none; }

.list--footer {
  font-size: 11px;
  line-height: 15px;
  color: #a7c1d1; }
  .list--footer li {
    /*padding-left: 15px;*/
    margin-bottom: 6px;
    pointer-events: none; }
    .list--footer li:before {
      /* @extend %icon-vertical-align; */
      content: "\E01F";
      /* top: 50%;
				margin-top: -1px; */
      font-size: 8px;
      color: #a7c1d1;
      padding-right: 5px; }
    .list--footer li:hover a, .list--footer li:hover:before {
      color: #fff; }
  .list--footer a {
    pointer-events: all; }

.list--inline li {
  display: inline; }

.list--small {
  line-height: 1; }

.list--no-vertical-spacing li {
  margin: 0; }

.list--blue li:before {
  color: #038cd6; }

.list--white li:before {
  color: #fff; }

.list--grey li:before {
  color: #b8b8b8; }

.list--grey-dark li:before {
  color: #666; }

.list--green li:before {
  color: #43c682; }

.list--numeric {
  counter-reset: item; }
  .list--numeric ol {
    counter-reset: item;
    margin: 10px 0 0; }
  .list--numeric li {
    position: relative;
    padding-left: 32px !important;
    min-height: 22px;
    list-style: none; }
    .list--numeric li:before {
      content: counters(item, ".") " ";
      counter-increment: item;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 2px;
      min-width: 18px;
      height: 22px;
      font-size: 11px;
      line-height: 22px;
      font-family: inherit;
      text-align: center;
      border-radius: 50%;
      background: #43c682; }
    .list--numeric li.text-size--13 {
      padding-top: 3px; }

/**
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: info.html
  - name: Warning
    tmpl:
        include: warn.html
  - name: Error
    tmpl:
        include: error.html
  - name: Success
    tmpl:
        include: success.html
  - name: Multiline
    tmpl:
        include: multiline.html
*/
.message {
  position: relative;
  overflow: hidden; }
  .message.collapsing {
    transition: height 1s ease; }
  .message__inner {
    background-color: #f5f5f5;
    color: #474747;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    padding: 10px;
    position: relative;
    width: 100%;
    overflow: hidden; }
    .message--success .message__inner {
      border-color: transparent;
      background: #43c682;
      color: #fff; }
    .message--alert .message__inner {
      border-color: transparent;
      background: #fce173; }
    .message--error .message__inner {
      border-color: transparent;
      background: #db5451;
      color: #fff; }
    .message--info .message__inner {
      color: #666; }
  .message__close {
    background: none;
    border: 0;
    color: #d1d1d1;
    outline: none;
    padding: 0;
    position: absolute;
    overflow: visible;
    top: 10px;
    right: 10px;
    font-size: 19px;
    line-height: 1; }
    .message__close:hover, .message__close:focus {
      color: #b8b8b8; }
    .message--error .message__close,
    .message--alert .message__close,
    .message--success .message__close {
      color: #fff; }
      .message--error .message__close:hover,
      .message--alert .message__close:hover,
      .message--success .message__close:hover {
        opacity: .75; }
  .message__text {
    padding-right: 30px;
    color: inherit; }
    .message__icon + .message__text {
      padding-left: 40px; }
  .message__icon {
    width: 50px;
    position: absolute;
    top: 10px;
    left: 0px;
    text-align: center;
    color: inherit;
    line-height: 1; }
    .message--alert .message__icon {
      color: #cb9b33; }
    .message--info .message__icon {
      color: #b8b8b8; }
  .message__walled {
    padding: 20px;
    background: #fce173;
    border-bottom: 1px solid #fff; }
    .message__walled:last-child {
      border: 0; }
  .message--closed {
    height: 0; }
  .message--bottom {
    position: fixed;
    bottom: 0;
    margin: 0;
    z-index: 600; }

/**
name: Modal Box
type: ui
desc: >
      Shows content in a Lightbox. Adds overlay around the content.

      There are some additional options(classes) for Prequalification page and Agent View.
modifiers:
      .pre-lightbox: Additional class for Prequalification Lightbox
      .modal-box--size-small: Additional class for popup size small.
      .modal-box--size-large: Additional classes for popup size large.
      .modal-box--with-action-buttons: New style action buttons.
examples:
  - name: Simple Lightbox
    tmpl:
        include: popup.html
  - name: Prequalification Lightbox
    tmpl:
        include: pre-lightbox.html
  - name: Large popup (3 buttons)
    tmpl:
        include: popup-large.html
  - name: Small popup
    tmpl:
        include: popup-small.html
  - name: Extra Small popup
    tmpl:
        include: popup-xsmall.html
*/
/* prevent showing popup content before JS is working */
[data-component="modal-box"] {
  display: none; }

.modal-box__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 800;
  display: none;
  background: rgba(0, 0, 0, 0.75);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 768px) {
    .modal-box__overlay {
      position: absolute; } }
  .modal-box__overlay.modal-box--is-open {
    display: flex; }
    .modal-box__overlay.modal-box--is-open .modal-box__content {
      display: block; }

.modal-box__content {
  padding: 40px;
  background-color: #fff;
  display: none;
  max-width: 1200px;
  max-height: 95vh;
  overflow: auto;
  position: relative;
  text-align: left; }
  .modal-box__content--full {
    padding: 0; }
    .modal-box__content--full .modal-box__close-btn.with-border {
      font-size: 15px;
      top: 50%;
      transform: translate(0, -50%); }
  @media only screen and (max-width: 768px) {
    .modal-box__content {
      width: 100%;
      padding-right: 40px;
      top: 0;
      left: 0;
      min-height: 100vh;
      overflow: hidden;
      overflow-y: auto; } }
  .modal-box--error .modal-box__content {
    color: #fff;
    background: linear-gradient(to bottom, #00a7e4 0%, #3361ac 100%);
    text-align: center;
    box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.5); }
  .modal-box__content.pre-lightbox {
    backface-visibility: hidden;
    border-radius: 0;
    background: url("/ImageProxy/Retail/bg-popup.png") no-repeat;
    background-color: #038cd6 !important;
    background-size: cover;
    width: 620px;
    padding: 40px !important;
    overflow: visible;
    text-align: center;
    max-height: none;
    box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.5); }
    @media only screen and (max-width: 768px) {
      .modal-box__content.pre-lightbox {
        padding: 20px !important; } }
    .modal-box__content.pre-lightbox .button-holder {
      vertical-align: bottom !important; }
    .modal-box__content.pre-lightbox .modal-box__close-btn {
      color: #fff;
      font-size: 16px; }
    .modal-box__content.pre-lightbox .tooltip__trigger.icon-questionmark {
      padding: 0 0 0 10px; }
      .modal-box__content.pre-lightbox .tooltip__trigger.icon-questionmark:before {
        color: #fff; }
    .modal-box__content.pre-lightbox .button, .modal-box__content.pre-lightbox .form-checkbox--filter label, .form-checkbox--filter .modal-box__content.pre-lightbox label {
      line-height: 40px; }
    @media only screen and (max-width: 768px) {
      .modal-box__content.pre-lightbox {
        width: 100%;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        min-height: 100vh; } }

.modal-box__close-btn {
  /*height: 20px;
		width: 20px;*/
  color: #666;
  border-radius: 10px;
  font-size: 13px;
  /*line-height: 12px;
		padding: 3px 3px 0 0;
		text-align: right;*/
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  z-index: 1; }
  @media only screen and (max-width: 768px) {
    .modal-box__close-btn {
      right: 10px; } }
  .modal-box__close-btn--white,
  .modal-box--error .modal-box__close-btn {
    color: #fff; }
  .modal-box--with-action-buttons .modal-box__close-btn,
  .modal-box--is-loading .modal-box__close-btn {
    display: none; }

.modal-box__icon-box {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  font-size: 60px; }
  .modal-box__icon-box .icon {
    line-height: 1; }
  .modal-box__icon-box .icon-reject {
    font-size: 40px; }
  .modal-box__icon-box--blue {
    background: #038cd6;
    color: #fff; }
  .modal-box__icon-box--yellow {
    background: #ffb900; }
  .modal-box__icon-box--small {
    width: 80px;
    height: 80px;
    font-size: 45px; }
  .modal-box__icon-box--info {
    position: absolute;
    top: 0;
    right: -6px;
    width: 30px;
    height: 30px;
    font-size: 18px; }

.modal-box__action-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: -5px;
  margin-right: -5px; }
  @media only screen and (max-width: 768px) {
    .modal-box__action-buttons {
      display: block;
      margin-left: 0;
      margin-right: 0; } }
  .modal-box__action-buttons li {
    flex: 1 0 0;
    padding: 0 5px;
    max-width: 50%; }
    @media only screen and (max-width: 768px) {
      .modal-box__action-buttons li {
        padding: 0 0 5px; } }
  .modal-box__action-buttons .button, .modal-box__action-buttons .form-checkbox--filter label, .form-checkbox--filter .modal-box__action-buttons label {
    width: 100%; }

.modal-box__container {
  word-wrap: break-word;
  padding: 40px 20px 30px; }

.modal-box--error {
  z-index: 1000; }

.modal-box--print-contract {
  margin-top: 0;
  max-width: 620px;
  padding: 20px 40px; }

.modal-box--with-action-buttons {
  padding: 0; }
  .modal-box--with-action-buttons .gradient-line:before {
    margin: 0; }

.modal-box--size-small {
  width: 420px; }
  @media only screen and (max-width: 768px) {
    .modal-box--size-small {
      width: 100%; } }

.modal-box--size-xsmall {
  width: 340px; }
  @media only screen and (max-width: 768px) {
    .modal-box--size-xsmall {
      width: 100%; } }

.modal-box--size-large {
  width: 640px; }
  @media only screen and (max-width: 768px) {
    .modal-box--size-large {
      width: 100%; } }

.modal-box--is-loading {
  padding: 40px 80px; }

body.modal-box--is-open {
  overflow: hidden; }

.media {
  display: block; }
  .media__body {
    overflow: hidden; }
  .media__image {
    float: left;
    margin-right: 20px; }
    .media__image > img {
      display: block; }
  .media--small .media__image {
    margin-right: 10px; }
  .media--large .media__image {
    margin-right: 30px; }
  .media--reverse .media__image {
    float: right;
    margin-right: 0;
    margin-left: 20px; }
  .media--restricted-small .media__image {
    max-width: 80px; }

@media only screen and (max-width: 768px) {
  .media .media__image {
    float: none;
    margin-left: 0;
    margin-right: 0; } }

/**
	name: Number
	type: ui
	desc: No modifiers and mixins need it for this component
	examples:
		Number selector:
			include: number.html
		Number selector in negative box:
			include: number-negative.html
*/
.form-item__number-wrapper {
  position: relative;
  z-index: 1;
  max-width: 90px; }
  .form-item__number-wrapper [type="text"],
  .form-item__number-wrapper [type="number"] {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1;
    height: 43px;
    padding-right: 25px;
    padding-left: 25px;
    text-align: center;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    color: #474747;
    -moz-appearance: textfield;
    -webkit-appearance: textfield; }
    .form-item__number-wrapper [type="text"]::-webkit-inner-spin-button, .form-item__number-wrapper [type="text"]::-webkit-outer-spin-button,
    .form-item__number-wrapper [type="number"]::-webkit-inner-spin-button,
    .form-item__number-wrapper [type="number"]::-webkit-outer-spin-button {
      margin: 0;
      -webkit-appearance: none; }
    .form-item__number-wrapper [type="text"]:disabled ~ .number__control,
    .form-item__number-wrapper [type="number"]:disabled ~ .number__control {
      display: none; }
  .form-item__number-wrapper .number__control {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    padding: 3px 0 0;
    z-index: 2;
    font-size: 9px;
    outline: none;
    border: 1px solid #d1d1d1;
    background: #e8e8e8 linear-gradient(180deg, #fff, #f5f5f5); }
    .form-item__number-wrapper .number__control:hover {
      background: #d1d1d1 linear-gradient(180deg, #fff, #e8e8e8); }
    .form-item__number-wrapper .number__control:focus {
      border: 1px solid #038cd6; }
    .form-item__number-wrapper .number__control--decrease {
      left: 0;
      border-radius: 3px 0 0 3px; }
      .form-item__number-wrapper .number__control--decrease:before {
        content: "\E075"; }
    .form-item__number-wrapper .number__control--increase {
      right: 0;
      border-radius: 0 3px 3px 0; }
      .form-item__number-wrapper .number__control--increase:before {
        content: "\E09C"; }
    .section--negative .form-item__number-wrapper .number__control:focus {
      border: 1px solid #00619e; }

.form-item__action-hidden [type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield; }
  .form-item__action-hidden [type="number"]::-webkit-inner-spin-button, .form-item__action-hidden [type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none; }

.multi-filter {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
  .multi-filter .form-item__clear-button {
    display: none; }
  .multi-filter.is-filtered .form-item__clear-button {
    display: block; }
  .multi-filter-block-wrapper .multi-filter.form-item--inline {
    display: block; }
  .multi-filter__input {
    display: block;
    background-color: #fff;
    position: relative;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    height: 42px;
    line-height: 42px;
    padding-left: 42px; }
    .multi-filter__input button {
      font-size: 1rem;
      line-height: 1; }
    .multi-filter__input:hover {
      display: block;
      border: 1px solid 1px solid #b8b8b8;
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.07); }
    .multi-filter__input :before {
      background: #f5f5f5;
      border-right: 1px solid #e8e8e8;
      content: "";
      width: 32px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0; }
    .multi-filter__input :after {
      content: "\E098";
      width: 32px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 1px;
      text-align: center;
      line-height: 42px; }
    .multi-filter__input:focus:hover, .multi-filter__input:focus {
      display: block;
      border: 1px solid #038cd6; }
    .form-item--small .multi-filter__input {
      height: 32px;
      line-height: 32px; }
      .form-item--small .multi-filter__input :after {
        line-height: 32px; }
  .multi-filter__input-label {
    margin-right: 30px;
    line-height: 42px; }
    .form-item--small .multi-filter__input-label {
      line-height: 32px; }
  .multi-filter__submit-panel {
    padding: 10px; }
    .multi-filter__submit-panel button {
      width: 100%; }
  .multi-filter .accordion-filter label .count {
    color: #adadad; }

@media only screen and (max-width: 768px) {
  .multi-filter {
    display: block;
    height: auto; }
    .multi-filter__input {
      display: block;
      font-size: 1rem;
      line-height: 1;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 50px; }
      .multi-filter__input:before {
        width: 40px; }
      .multi-filter__input:after {
        top: 4px;
        width: 40px; } }

@media only screen and (min-width: 768px) {
  .multi-filter__input-label {
    font-size: 0.813rem; } }

/**
name: timeline
type: ui
element:
	--timeline__filter: Filter timeline type
	--timeline__item
*/
.timeline {
  position: relative;
  padding-bottom: 60px;
  margin-top: 50px; }
  @media only screen and (min-width: 768px) {
    .timeline {
      overflow: hidden; }
      .timeline:after {
        background-color: #038cd6;
        background-image: -webkit-linear-gradient(bottom, #028bd5 0%, #00b9dd 49.51%, #8bc53f 100%);
        background-image: linear-gradient(bottom, #028bd5 0%, #00b9dd 49.51%, #8bc53f 100%);
        content: "";
        width: 4px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -2px; } }
  .timeline > li {
    position: relative;
    z-index: 1; }
    @media only screen and (min-width: 768px) {
      .timeline > li {
        float: right;
        clear: right;
        padding-left: 40px;
        width: 50%; }
        .timeline > li:nth-child(even) {
          float: left;
          clear: left;
          padding-left: 0;
          padding-right: 40px;
          top: 60px; }
          .timeline > li:nth-child(even) [class^="icon-"] {
            right: -60px;
            left: auto; } }
    .timeline > li + li {
      margin-top: 10px; }
      @media only screen and (min-width: 768px) {
        .timeline > li + li {
          margin-top: 30px; } }
  .timeline__filter {
    color: #666; }
    .timeline__filter li {
      display: inline-block; }
      .timeline__filter li + li {
        margin-left: 20px; }
        @media only screen and (min-width: 768px) {
          .timeline__filter li + li {
            margin-left: 30px; } }
    .timeline__filter a {
      text-align: center;
      text-decoration: none;
      color: #666; }
      .timeline__filter a [class^="icon-"] {
        background-color: #fff;
        border: 1px solid #b8b8b8;
        border-radius: 50%;
        content: "";
        display: block;
        font-size: 20px;
        margin-bottom: 10px;
        width: 40px;
        height: 40px;
        line-height: 39px; }
        @media only screen and (min-width: 768px) {
          .timeline__filter a [class^="icon-"] {
            font-size: 30px;
            width: 60px;
            height: 60px;
            line-height: 60px; } }
      .timeline__filter a:hover [class^="icon-"],
      .timeline__filter a:focus [class^="icon-"],
      .timeline__filter a:active [class^="icon-"],
      .timeline__filter a.is-active [class^="icon-"] {
        background-color: #038cd6;
        border-color: #038cd6;
        color: #fff; }
  .timeline__item {
    background: #fff;
    border: 1px solid #b8b8b8;
    text-align: left;
    position: relative; }
    .timeline__item img {
      max-width: 20%; }
    .timeline__item li + li {
      margin-top: 0; }
    .timeline__item__update {
      background-color: #e0e0e0;
      border: 1px solid #b8b8b8;
      border-bottom: none;
      padding: 20px 10px;
      text-align: center;
      display: block; }
    .timeline__item__icon {
      position: absolute;
      left: -60px;
      top: 30px;
      height: 40px;
      width: 40px;
      z-index: 1; }
      @media only screen and (max-width: 768px) {
        .timeline__item__icon {
          display: none; } }
      @media only screen and (min-width: 768px) {
        .timeline > li:nth-child(even) .timeline__item__icon {
          left: auto;
          right: -60px; }
        .timeline > li:nth-child(even) .timeline__item__icon:before {
          left: auto;
          right: 38px;
          border-color: transparent transparent transparent #b8b8b8; }
        .timeline > li:nth-child(even) .timeline__item__icon:after {
          left: auto;
          right: 40px;
          border-color: transparent transparent transparent #fff; } }
      .timeline__item__icon:before, .timeline__item__icon:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        border-width: 11px; }
      .timeline__item__icon:before {
        left: 38px;
        top: 9px;
        border-color: transparent #b8b8b8 transparent transparent; }
      .timeline__item__icon:after {
        top: 10px;
        left: 40px;
        border-width: 10px; }
      .timeline__item__icon [class^="icon-"] {
        background: #038cd6;
        border-radius: 50%;
        color: #fff;
        display: block;
        left: -60px;
        font-size: 25px;
        line-height: 40px;
        height: 40px;
        width: 40px;
        text-align: center; }
        .timeline__item__icon [class^="icon-"]:after {
          content: "";
          height: 50px;
          width: 100%;
          position: absolute;
          left: 0;
          top: -5px;
          z-index: -1; }

/**
name: Pager
type: ui
desc: Just use wrapper with classname 'pager' and data-component="pager" for pager generating

examples:
  - name: Pager
    tmpl:
      include: pager.html
*/
.pager {
  font-size: 13px;
  line-height: 30px;
  display: inline-block;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  vertical-align: top; }
  .table--with-loadmore .pager {
    text-align: center;
    display: flex;
    justify-content: center;
    border: none; }
    @media only screen and (max-width: 768px) {
      .table--with-loadmore .pager {
        border: none;
        display: block; } }
  .pager > span, .pager__holder {
    float: left; }
  .pager__button, .pager > span > span, .pager__elipsis {
    cursor: pointer;
    float: left;
    color: inherit;
    min-width: 33px;
    padding: 0 2px;
    text-align: center;
    border-left: 1px solid #e8e8e8;
    background: #fff;
    position: relative; }
    .table--with-loadmore .pager__button:not(.loadmore), .table--with-loadmore .pager > span > span:not(.loadmore), .table--with-loadmore .pager__elipsis:not(.loadmore) {
      display: none; }
    .pager__button:after, .pager > span > span:after, .pager__elipsis:after {
      background: #038cd6;
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 0;
      transition: height .125s ease-in-out; }
    .pager__button.current, .pager > span > span.current, .current.pager__elipsis, .pager__button:hover, .pager > span > span:hover, .pager__elipsis:hover {
      text-decoration: none; }
      .pager__button.current:after, .pager > span > span.current:after, .current.pager__elipsis:after, .pager__button:hover:after, .pager > span > span:hover:after, .pager__elipsis:hover:after {
        height: 2px; }
    .pager__button:first-child, .pager > span > span:first-child, .pager__elipsis:first-child {
      border-left: none; }
    .pager__button.previous, .pager > span > span.previous, .previous.pager__elipsis, .pager__button.next, .pager > span > span.next, .next.pager__elipsis {
      width: 32px;
      overflow: hidden;
      text-indent: -9999em;
      background: linear-gradient(180deg, #fff, #f5f5f5); }
      .pager__button.previous:hover, .pager > span > span.previous:hover, .previous.pager__elipsis:hover, .pager__button.previous:focus, .pager > span > span.previous:focus, .previous.pager__elipsis:focus, .pager__button.next:hover, .pager > span > span.next:hover, .next.pager__elipsis:hover, .pager__button.next:focus, .pager > span > span.next:focus, .next.pager__elipsis:focus {
        background-image: linear-gradient(to top, #d1d1d1, #fff); }
      .pager__button.previous:before, .pager > span > span.previous:before, .previous.pager__elipsis:before, .pager__button.next:before, .pager > span > span.next:before, .next.pager__elipsis:before {
        line-height: inherit;
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        text-indent: 0; }
      .pager__button.previous:after, .pager > span > span.previous:after, .previous.pager__elipsis:after, .pager__button.next:after, .pager > span > span.next:after, .next.pager__elipsis:after {
        content: none; }
    .pager__button.previous, .pager > span > span.previous, .previous.pager__elipsis {
      border-right: 1px solid #d1d1d1; }
    .pager__button.next, .pager > span > span.next, .next.pager__elipsis {
      border-left: 1px solid #d1d1d1; }
    .pager__button.current, .pager > span > span.current, .current.pager__elipsis {
      color: #038cd6;
      font-weight: bold; }
      .pager__button.current:after, .pager > span > span.current:after, .current.pager__elipsis:after {
        display: block; }
    .pager__button.disabled, .pager > span > span.disabled, .disabled.pager__elipsis {
      color: #d1d1d1; }
      .pager__button.disabled:hover, .pager > span > span.disabled:hover, .disabled.pager__elipsis:hover, .pager__button.disabled:focus, .pager > span > span.disabled:focus, .disabled.pager__elipsis:focus {
        background: inherit; }
    @media only screen and (max-width: 768px) {
      .pager__button.peripheral, .pager > span > span.peripheral, .peripheral.pager__elipsis {
        display: none; } }
  .pager > span > span, .pager__elipsis {
    min-width: 25px; }
  .pager .loadmore {
    display: none;
    padding: 0 2px;
    max-width: 300px;
    flex: 1;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    outline: none;
    overflow: hidden;
    transition: all 0.125s;
    background: linear-gradient(180deg, #fff, #f5f5f5); }
    .table--with-loadmore .pager .loadmore {
      display: inline; }
      @media only screen and (max-width: 768px) {
        .table--with-loadmore .pager .loadmore {
          display: block;
          max-width: 100%;
          float: none;
          border: 1px solid #d1d1d1; } }
    .pager .loadmore.disabled:hover {
      color: #d1d1d1; }
    .pager .loadmore:hover {
      text-decoration: none;
      border-color: #b8b8b8; }
      .pager .loadmore:hover:after {
        height: 0; }
    .pager .loadmore:focus {
      border-color: #038cd6; }

/**
name: Loader
type: ui
desc: >
      Loader it's additional styles which can be added to element if it needed.
      Just add class loader or lightbox-spinner for spinner container. All elements in example are required.
examples:
  - name: Loader
    tmpl: >
        <p class="trailer">Static loader</p>
        <div class="text-center trailer">
        	<div class="loader loader--large">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="loader-test border box--white">
        	<div class="loader loader--centered">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="loader-test border box--yellow">
        	<div class="loader loader--centered">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="loader-test border box--blue">
        	<div class="loader loader--light loader--centered">
        		<div class="loader__spinner"><i></i></div>
        	</div>
        </div>

        <div class="lightbox-spinner-test">
        	<div class="lightbox-spinner"></div>
        </div>

  - name: Loader overlay
    tmpl:
        include: loader-overlay.html
*/
.button__spinner-container, .loader__spinner {
  display: inline-block;
  vertical-align: middle;
  font-size: 4px;
  text-align: left;
  text-indent: -999px;
  overflow: hidden;
  animation: rotation 0.9s infinite steps(8);
  transition: top 0.2s ease;
  width: 5em;
  height: 5em; }
  .button__spinner-container:after, .loader__spinner:after, .button__spinner-container:before, .loader__spinner:before, .button__spinner-container i:after, .loader__spinner i:after, .button__spinner-container i:before, .loader__spinner i:before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.25em;
    width: .5em;
    height: 1.5em;
    border-radius: .2em;
    transform-origin: 50% 2.5em; }
  .button__spinner-container:before, .loader__spinner:before {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 3.5em black; }
  .button__spinner-container:after, .loader__spinner:after {
    transform: rotate(-45deg);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 3.5em rgba(0, 0, 0, 0.7); }
  .button__spinner-container i, .loader__spinner i {
    display: block;
    height: 100%;
    position: relative; }
  .button__spinner-container i:before, .loader__spinner i:before {
    transform: rotate(-90deg);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 3.5em rgba(0, 0, 0, 0.6); }
  .button__spinner-container i:after, .loader__spinner i:after {
    transform: rotate(-135deg);
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 3.5em rgba(0, 0, 0, 0.55); }

.button--action-dark .button__spinner-container:before,
.button--action .button__spinner-container:before,
.button--success .button__spinner-container:before, .loader__overlay--dark .loader__spinner:before,
.loader--light .loader__spinner:before {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 3.5em white; }

.button--action-dark .button__spinner-container:after,
.button--action .button__spinner-container:after,
.button--success .button__spinner-container:after, .loader__overlay--dark .loader__spinner:after,
.loader--light .loader__spinner:after {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 3.5em rgba(255, 255, 255, 0.7); }

.button--action-dark .button__spinner-container i:before,
.button--action .button__spinner-container i:before,
.button--success .button__spinner-container i:before, .loader__overlay--dark .loader__spinner i:before,
.loader--light .loader__spinner i:before {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 3.5em rgba(255, 255, 255, 0.6); }

.button--action-dark .button__spinner-container i:after,
.button--action .button__spinner-container i:after,
.button--success .button__spinner-container i:after, .loader__overlay--dark .loader__spinner i:after,
.loader--light .loader__spinner i:after {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 3.5em rgba(255, 255, 255, 0.55); }

.loader {
  display: inline-block; }
  .loader--large .loader__spinner {
    font-size: 6px; }
  .loader__static-wrap {
    height: 120px; }
  .loader__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
    background: rgba(255, 255, 255, 0.9); }
    .loader--busy-mode .loader__overlay {
      display: block; }

.lightbox-spinner {
  font-size: 5px;
  position: relative;
  text-indent: -9999em;
  border-top: 0.9em solid #038cd6;
  border-right: 0.9em solid #038cd6;
  border-bottom: 0.9em solid transparent;
  border-left: 0.9em solid transparent;
  transform: translateZ(0);
  animation: rotation 1.1s infinite linear;
  border-radius: 50%;
  width: 10em;
  height: 10em; }

@keyframes rotation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.loader-test {
  position: relative;
  width: 100px;
  height: 50px;
  margin: 0 0 30px; }

.lightbox-spinner-test {
  width: 100%;
  height: 400px;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; }

/**
name: Range slider
type: ui
modifiers:
  --single: Singe slider
examples:
	- name: Range slider
	  tmpl:
	  	  include: range-slider.html
	- name: Single slider
	  tmpl:
	  	  include: single-slider.html
*/
.range-slider {
  user-select: none;
  -webkit-touch-callout: none; }
  .range-slider__container {
    height: 5px;
    position: relative;
    background: #b8b8b8;
    border-radius: 2.5px;
    margin-bottom: 8px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2) inset; }
  .range-slider__points {
    background: linear-gradient(180deg, #0296e5, #038cd6);
    position: absolute;
    border-radius: 2px 0 0 2px;
    height: 100%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2) inset; }
  .range-slider__point {
    width: 15px;
    height: 15px;
    margin-top: -7px;
    border-radius: 50%;
    cursor: pointer;
    background: #fff;
    border: 0;
    box-shadow: 0 0 0 1px #b8b8b8, 0 1px 5px 0 rgba(0, 0, 0, 0.25);
    outline: none; }
    .range-slider__point--from {
      float: left;
      margin-left: -11px; }
      .range-slider--single .range-slider__point--from {
        display: none; }
    .range-slider__point--to {
      float: right;
      margin-right: -8px; }
  .range-slider__values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
    color: #666;
    font-size: 11px;
    line-height: 13px; }
    .range-slider__values li {
      list-style: none;
      flex: 1;
      text-align: right; }
      .range-slider__values li:first-child {
        position: absolute;
        left: -4px;
        text-align: left; }
        .range-slider__values li:first-child .range-slider__value--empty:before {
          border-right: none;
          border-left: 1px solid #d1d1d1; }
      .range-slider__values li:last-child .range-slider__value span,
      .range-slider__values li:last-child .range-slider__value--empty span {
        transform: translate(-85%, 0); }
      .range-slider__values li:last-child .range-slider__value:before,
      .range-slider__values li:last-child .range-slider__value--empty:before {
        left: auto;
        right: 0; }
  .range-slider__value-label {
    display: block;
    margin-bottom: 2px; }
  .range-slider__value--empty {
    position: relative;
    padding-top: 14px;
    display: inline-block;
    height: 20px; }
    .range-slider__value--empty:before {
      border-right: 1px solid #d1d1d1;
      width: 1px;
      margin-left: -1px;
      background: #d1d1d1;
      content: " ";
      height: 8px;
      position: absolute;
      left: 50%;
      top: 0; }
  .range-slider--single {
    cursor: pointer; }
    .range-slider--single .range-slider__select--from {
      display: none; }
  .range-slider .tooltip--blue {
    padding: 4px 10px;
    text-align: center;
    min-width: 36px; }

.rating__stars {
  font-size: 20px;
  color: #d1d1d1; }
  .rating__stars--blue {
    color: #d1d1d1; }
    .rating__stars--blue .fill--whole {
      color: #038cd6; }
    .rating__stars--blue .fill--half:after {
      color: #038cd6; }
  .rating__stars--white {
    color: #80c4e8; }
    .rating__stars--white .fill--whole {
      color: #fff; }
    .rating__stars--white .fill--half:after {
      color: #fff; }
  .rating__stars--small {
    font-size: 15px; }
  .rating__stars + .rating__text {
    display: block; }

.box--blue .rating__stars--small + .rating__text {
  color: #fff; }

.box--blue .rating__stars + .rating__text {
  color: #fff; }

.fill--whole {
  color: #80c4e8; }

.fill--half {
  position: relative; }
  .fill--half:after {
    color: #80c4e8;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; }
  .fill--half.icon-star:after {
    clip: rect(0 0.3913em auto 0); }

/**
name: Select
type: ui
modifiers:
  --small: Small select
  --dropdown: Dropdown select
examples:
	- name: Select
	  tmpl:
	  	  include: select.html
	- name: Select with grouping
	  tmpl:
	  	  include: grouping.html
	- name: Select small
	  tmpl:
	  	  include: small.html
	- name: Disabled select
	  tmpl:
	  	  include: disabled.html
	- name: Select with error
	  tmpl:
	  	  include: error.html
	- name: Select in a negative box
	  tmpl:
	  	  include: negative.html
*/
.select-wrapper,
.form-select {
  position: relative; }
  .select-wrapper__field,
  .form-select__field {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .select-wrapper select,
  .form-select select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    height: 100%; }
    .select-wrapper select:hover:focus ~ .form-select__field,
    .select-wrapper select:focus ~ .form-select__field,
    .form-select select:hover:focus ~ .form-select__field,
    .form-select select:focus ~ .form-select__field {
      border: 1px solid #038cd6; }
    .select-wrapper select:hover ~ .form-select__field,
    .form-select select:hover ~ .form-select__field {
      border: 1px solid #b8b8b8;
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.07); }
  .select-wrapper.form-select--disabled .form-select__field,
  .form-select.form-select--disabled .form-select__field {
    background: #f5f5f5;
    border-color: #e8e8e8;
    cursor: default; }
    .select-wrapper.form-select--disabled .form-select__field:after,
    .form-select.form-select--disabled .form-select__field:after {
      background: none;
      background-color: #f5f5f5;
      border-left-color: #e8e8e8;
      color: #b8b8b8; }
  .select-wrapper.form-select--disabled select,
  .form-select.form-select--disabled select {
    cursor: default; }
  .select-wrapper.form-select--disabled select:hover ~ .form-select__field,
  .form-select.form-select--disabled select:hover ~ .form-select__field {
    border: 1px solid #b8b8b8;
    border-color: #e8e8e8;
    box-shadow: none; }
  .select-wrapper--inline,
  .form-select--inline {
    display: inline-block; }
  .select-wrapper__field,
  .form-select__field {
    position: relative;
    padding-right: 50px;
    line-height: 41px;
    padding-top: 0;
    padding-bottom: 0; }
    .select-wrapper__field:after,
    .form-select__field:after {
      content: "\E00A";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      border-left: 1px solid #d1d1d1;
      background-color: #f5f5f5;
      background: linear-gradient(180deg, #fff, #e8e8e8);
      color: #666;
      transition: all 0.125s;
      font-size: 10px;
      line-height: inherit;
      width: 32px;
      box-sizing: border-box;
      text-align: center; }
  .select-wrapper--small select,
  .form-select--small select {
    height: 32px; }
  .select-wrapper--small .form-select__field,
  .form-select--small .form-select__field {
    line-height: 32px;
    height: 32px;
    padding-right: 42px; }
  .select-wrapper--small .form-select__field:after,
  .form-select--small .form-select__field:after {
    padding: 0 7px;
    line-height: 30px; }
  .section--negative .select-wrapper__field:after, .section--negative
  .form-select__field:after {
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-left: 1px solid #d1d1d1;
    border-radius: 0 3px 3px 0;
    padding: 1px 11px;
    padding-left: 10px; }
  .section--negative .select-wrapper select:hover:focus ~ .form-select__field,
  .section--negative .select-wrapper select:focus ~ .form-select__field, .section--negative
  .form-select select:hover:focus ~ .form-select__field,
  .section--negative
  .form-select select:focus ~ .form-select__field {
    border: 1px solid #00619e; }
  .section--negative .select-wrapper select:hover ~ .form-select__field, .section--negative
  .form-select select:hover ~ .form-select__field {
    border: 1px solid #666;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.07); }
  .section--negative .select-wrapper select:hover ~ .form-select__field:after,
  .section--negative .select-wrapper select:focus ~ .form-select__field:after, .section--negative
  .form-select select:hover ~ .form-select__field:after,
  .section--negative
  .form-select select:focus ~ .form-select__field:after {
    right: 0;
    bottom: 0;
    top: 0;
    padding: 0 10px; }
  @media only screen and (min-width: 480px) {
    .section--negative .select-wrapper--small .form-select__field:after, .section--negative
    .form-select--small .form-select__field:after {
      padding-left: 7px;
      padding-right: 8px; }
    .section--negative .select-wrapper--small select:hover ~ .form-select__field:after,
    .section--negative .select-wrapper--small select:focus ~ .form-select__field:after, .section--negative
    .form-select--small select:hover ~ .form-select__field:after,
    .section--negative
    .form-select--small select:focus ~ .form-select__field:after {
      padding: 0 7px; } }
  .select-wrapper--length,
  .form-select--length {
    margin-top: -1px; }
  .form-item--multi .select-wrapper, .form-item--multi
  .form-select {
    display: table-cell;
    margin-right: 10px; }
    .form-item--multi .select-wrapper:first-child, .form-item--multi
    .form-select:first-child {
      margin-right: 0; }
  .form-item--error .select-wrapper select:hover:focus ~ .form-select__field,
  .form-item--error .select-wrapper select:hover ~ .form-select__field,
  .form-item--error .select-wrapper select:focus ~ .form-select__field,
  .form-item--error .select-wrapper .form-select__field, .select-wrapper.form-select--error select:hover:focus ~ .form-select__field,
  .select-wrapper.form-select--error select:hover ~ .form-select__field,
  .select-wrapper.form-select--error select:focus ~ .form-select__field,
  .select-wrapper.form-select--error .form-select__field, .form-item--error
  .form-select select:hover:focus ~ .form-select__field,
  .form-item--error
  .form-select select:hover ~ .form-select__field,
  .form-item--error
  .form-select select:focus ~ .form-select__field,
  .form-item--error
  .form-select .form-select__field,
  .form-select.form-select--error select:hover:focus ~ .form-select__field,
  .form-select.form-select--error select:hover ~ .form-select__field,
  .form-select.form-select--error select:focus ~ .form-select__field,
  .form-select.form-select--error .form-select__field {
    border-color: #db5451; }
  .form-item--error .select-wrapper .form-select__field:before, .select-wrapper.form-select--error .form-select__field:before, .form-item--error
  .form-select .form-select__field:before,
  .form-select.form-select--error .form-select__field:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
    outline: none;
    box-sizing: border-box;
    border-color: #db5451;
    box-shadow: 2px 0 0 0 #fe635f inset, 0 2px 0 0 #fe635f inset, -2px 0 0 0 #fe635f inset, 0 -2px 0 0 #fe635f inset; }
  .select-wrapper.form-inline,
  .form-select.form-inline {
    display: block;
    margin: 0 0 20px; }
  @media only screen and (min-width: 480px) {
    .select-wrapper.form-inline,
    .form-select.form-inline {
      display: inline-block;
      vertical-align: bottom;
      margin: 0 10px 0 0;
      line-height: 1.2; }
    .select-wrapper button,
    .form-select button {
      display: inline-block;
      vertical-align: bottom; } }

.jslider {
  display: block;
  width: 100%;
  height: 1em;
  position: relative;
  top: .4em; }
  .jslider table {
    width: 100%;
    border-collapse: collapse;
    border: 0; }
  .jslider th,
  .jslider td {
    padding: 0;
    vertical-align: top;
    text-align: left;
    border: 0; }
  .jslider table,
  .jslider table tr,
  .jslider table tr td {
    width: 100%;
    vertical-align: top; }
  .jslider .jslider-pointer {
    width: 13px;
    height: 15px;
    position: absolute;
    left: 20%;
    top: -4px;
    margin-left: -6px;
    cursor: pointer; }
  .touch .jslider .jslider-pointer:after {
    content: "";
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%; }
  .jslider .jslider-pointer-to {
    left: 80%; }
  .jslider .jslider-label {
    font-size: 9px;
    line-height: 12px;
    color: #000;
    opacity: .4;
    white-space: nowrap;
    padding: 0 2px;
    position: absolute;
    top: -18px;
    left: 0; }
  .jslider .jslider-label-to {
    left: auto;
    right: 0; }
  .jslider .jslider-value {
    display: none; }
  .jslider .jslider-scale {
    position: relative;
    top: 9px; }
    .jslider .jslider-scale span {
      position: absolute;
      height: 5px;
      border-left: 1px solid #b8b8b8;
      font-size: 0; }
    .jslider .jslider-scale ins {
      font-size: 9px;
      text-decoration: none;
      position: absolute;
      left: 0;
      top: 5px;
      color: #b8b8b8; }
  .jslider .jslider-value small,
  .jslider .jslider-label small {
    position: relative;
    top: -.4em; }
  .jslider .jslider-bg {
    position: relative;
    border-radius: 6px; }
    .jslider .jslider-bg .l,
    .jslider .jslider-bg .f,
    .jslider .jslider-bg .r {
      background: #d1d1d1; }
    .jslider .jslider-bg i {
      height: 5px;
      position: absolute;
      font-size: 0;
      top: 0; }
    .jslider .jslider-bg .l {
      width: 10%;
      background-position: 0 0;
      left: 0;
      background: linear-gradient(180deg, #aaa, #d1d1d1);
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px; }
    .jslider .jslider-bg .f {
      width: 80%;
      left: 10%;
      background: linear-gradient(180deg, #aaa, #d1d1d1) 50% top repeat-x; }
    .jslider .jslider-bg .r {
      width: 10%;
      left: 90%;
      background: linear-gradient(180deg, #aaa, #d1d1d1);
      background-position: right 0;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px; }
    .jslider .jslider-bg .v {
      position: absolute;
      top: 0;
      height: 5px;
      background: linear-gradient(180deg, #43c682, #02a962);
      color: #474747; }

.jslider-single .jslider-pointer-to,
.jslider-single .jslider-value-to,
.jslider-single .jslider-bg .v,
.jslider-limitless .jslider-label {
  display: none; }

.jslider-pointer.jslider-pointer-to,
.jslider-pointer {
  top: -5px;
  border-radius: 16px;
  background: #fff;
  border: 0.4em solid linear-gradient(180deg, #aaa, #d1d1d1);
  box-shadow: 0 0 0 1px #d1d1d1, 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  outline: none; }
  .jslider-pointer.jslider-pointer-to:hover, .jslider-pointer.jslider-pointer-to:focus,
  .jslider-pointer:hover,
  .jslider-pointer:focus {
    background-color: #f5f5f5; }

.jslider_round_plastic .jslider-pointer {
  width: 18px;
  height: 18px;
  top: -7px;
  margin-left: -8px; }

.layout-slider-label {
  margin-top: 5px; }

.slider-label-from {
  float: left; }

.slider-label-to {
  float: right; }

.slide-selecters {
  margin: 0 10px;
  clear: left; }
  .slide-selecters__collapse-wrap {
    width: 100%; }
  @media only screen and (max-width: 768px) {
    .slide-selecters {
      margin: 0; }
      .slide-selecters .slide-selecter-col {
        padding-right: 0;
        margin: 20px 0; }
        .slide-selecters .slide-selecter-col:after {
          content: "";
          display: table;
          clear: both; } }
  .slide-selecters .slide-selecter-col {
    padding: 0 10px 0 0; }
    .slide-selecters .slide-selecter-col .layout-slider {
      margin-left: 5px; }
  .slide-selecters .slide-selecter-col:last-child {
    margin-right: 0; }

.layout-slider-block--single .jslider-pointer {
  display: none; }

.layout-slider-block--single .jslider-pointer.jslider-pointer-to {
  display: block; }

.layout-slider-block--single .jslider-scale span {
  cursor: pointer; }

.layout-slider-block--tooltips .jslider-pointer {
  position: relative; }
  .layout-slider-block--tooltips .jslider-pointer .tooltip {
    left: 50%;
    bottom: 100%;
    opacity: 0;
    visibility: visible;
    margin-bottom: 5px;
    max-width: none;
    text-align: center; }
  .layout-slider-block--tooltips .jslider-pointer:hover .tooltip {
    opacity: 1; }

.layout-slider-block--blue .jslider .jslider-bg .v {
  background-color: #038cd6;
  background: #038cd6; }

.layout-slider-block--blue .tooltip {
  background-color: #038cd6;
  color: #fff; }
  .layout-slider-block--blue .tooltip:before {
    border-top-color: #038cd6; }
  .layout-slider-block--blue .tooltip:after {
    border-top-color: #038cd6; }

/**
  name: Speech Bubble
  type: ui
  desc: No modifiers and mixins need it for this component
  examples:
    Bubble:
      include: bubble.html
*/
.speech-bubble {
  left: 0;
  position: absolute;
  z-index: 500;
  background-color: #fff;
  top: 36px;
  border-radius: 3px;
  overflow: visible;
  border: 1px solid #d1d1d1;
  visibility: hidden;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.02); }
  .speech-bubble.reverce {
    left: auto;
    right: 0; }
    .speech-bubble.reverce:before, .speech-bubble.reverce:after {
      left: auto;
      margin-left: auto;
      margin-right: -8px;
      right: 17px; }
    .speech-bubble.reverce:after {
      margin-right: -7px; }
  .csstransforms .speech-bubble {
    transform: translateY(-10px);
    transition: opacity 50ms ease-out, transform 100ms ease-out;
    opacity: 0; }
  .speech-bubble.is-open {
    display: block;
    opacity: 1; }
    .speech-bubble.is-open.is-loaded {
      visibility: visible; }
    .csstransforms .speech-bubble.is-open {
      transform: translateY(0); }
  .speech-bubble__button {
    outline: none;
    border: none;
    background-color: transparent;
    padding: 0 10px;
    height: 32px;
    background: #e8e8e8;
    background-image: linear-gradient(180deg, #fff, #f5f5f5);
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    overflow: hidden; }
    .speech-bubble__button .icon {
      line-height: 32px; }
    .speech-bubble__button .icon-arrow-down {
      padding-left: 10px;
      font-size: 30px; }
  @media only screen and (min-width: 480px) {
    .speech-bubble:before, .speech-bubble:after {
      width: 0;
      height: 0;
      content: "";
      position: absolute; }
    .speech-bubble:before {
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #d1d1d1;
      left: 17px;
      top: -8px;
      margin-left: -8px; }
    .speech-bubble:after {
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #fff;
      left: 17px;
      top: -7px;
      margin-left: -7px; } }
  .speech-bubble__top-bar {
    height: 40px;
    line-height: 40px;
    background: #e8e8e8;
    background-image: linear-gradient(180deg, #fff, #f5f5f5);
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    border-bottom: 1px solid #d1d1d1;
    position: relative; }
    .speech-bubble__top-bar.speech-bubble__top-bar--small {
      line-height: 32px;
      height: 32px; }
  .speech-bubble__close {
    background: transparent;
    border: none;
    color: inherit;
    line-height: 1;
    font-size: 10px;
    outline: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px; }
    .speech-bubble__close:hover, .speech-bubble__close:focus {
      color: #000; }
  .speech-bubble__content {
    max-height: 285px;
    overflow-y: auto; }
    .speech-bubble__content > {
      z-index: -1;
      position: relative; }
    @media only screen and (max-width: 768px) {
      .speech-bubble__content {
        max-height: none; } }
  @media only screen and (max-width: 768px) {
    .speech-bubble {
      position: static;
      transition: none;
      box-shadow: none;
      display: none; } }
  .speech-bubble.action-menu:before, .speech-bubble.action-menu:after {
    width: 0;
    height: 0;
    content: "";
    position: absolute; }
  .speech-bubble.action-menu:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #d1d1d1;
    left: 17px;
    top: -8px;
    margin-left: -8px; }
  .speech-bubble.action-menu:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    left: 17px;
    top: -7px;
    margin-left: -7px; }
  @media only screen and (max-width: 768px) {
    .speech-bubble.action-menu {
      position: absolute; } }
  .speech-bubble.action-menu:before {
    left: auto;
    right: 17px; }
  .speech-bubble.action-menu:after {
    left: auto;
    right: 18px; }
  .speech-bubble.action-menu .dropdown__list a:hover {
    background: #038cd6;
    color: #fff; }
    .speech-bubble.action-menu .dropdown__list a:hover:before {
      display: none; }

.status-dot {
  min-height: 9px;
  position: relative;
  padding-left: 15px;
  color: #757575;
  display: inline-block;
  vertical-align: middle; }
  .status-dot:before {
    background: #d1d1d1;
    border-radius: 50%;
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5px; }

.status-dot--small {
  min-height: 6px; }
  .status-dot--small:before {
    width: 6px;
    height: 6px;
    margin-top: -3px; }

.status-dot--green:before {
  background-color: #43c682; }

.status-dot--yellow:before {
  background-color: #ffb900; }

.status-dot--red:before {
  background-color: #db5451; }

.status-dot--blue:before {
  background-color: #038cd6; }

.status-badge {
  margin-right: 5px;
  position: relative;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  padding: 2px 5px;
  line-height: 1; }
  .status-badge--neutral {
    color: #474747;
    background-color: #f5f5f5;
    border: 1px solid #d1d1d1; }
  .status-badge--warning {
    color: #fff;
    background-color: #fe635f;
    border: 1px solid #db5451; }
  .status-badge--orange {
    color: #fff;
    background-color: #e0a500;
    border: 1px solid #e0a500; }
  .status-badge--accept {
    color: #fff;
    background-color: #02a962;
    border: 1px solid #008e52; }
  .status-badge--totop {
    top: -3px; }

/**
  name: Tab Panel
  type: ui
  modifiers:
    --stretch-mobile: Stretches tabs to full width
  examples:
    Simple Tab Panel:
      include: tabs.html
*/
.tabpanel__list {
  border: solid #d1d1d1;
  border-width: 1px 0;
  height: 52px; }

.tabpanel__tab {
  float: left;
  border: solid #d1d1d1;
  border-width: 0 1px 0 0;
  position: relative;
  cursor: pointer; }
  .tabpanel__tab:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 0 solid #038cd6;
    z-index: 3;
    transition: border-bottom-width 0.15s ease-in-out; }
  .tabpanel__tab.flexnav {
    padding: 0;
    height: auto; }
    .tabpanel__tab.flexnav__invisible {
      display: none; }
    .tabpanel__tab.flexnav .flexnav__toggler:after {
      content: "\E00A";
      font-size: 12px;
      margin-left: 4px; }
    .tabpanel__tab.flexnav .flexnav__subnav {
      display: none;
      background-color: #fff;
      min-width: 200px;
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.23);
      transition: all .3s ease-out .1s;
      position: absolute;
      z-index: 500;
      right: -1px;
      top: 100%; }
    .tabpanel__tab.flexnav.is-open .flexnav__toggler:after {
      content: "\E00F"; }
    .tabpanel__tab.flexnav.is-open .flexnav__subnav {
      display: block; }
  .tabpanel__tab.is-open:after, .tabpanel__tab.is-active:after, .tabpanel__tab:hover:after {
    border-bottom-width: 3px; }
  .tabpanel__tab.is-open .tabpanel__link, .tabpanel__tab.is-active .tabpanel__link, .tabpanel__tab:hover .tabpanel__link {
    color: #038cd6;
    text-decoration: none; }
  .tabpanel__tab.is-open .flexnav__subnav li, .tabpanel__tab.is-active .flexnav__subnav li, .tabpanel__tab:hover .flexnav__subnav li {
    float: none;
    border-top: 1px solid #d1d1d1; }
  .tabpanel__tab.is-open .flexnav__subnav .tabpanel__tab:before, .tabpanel__tab.is-active .flexnav__subnav .tabpanel__tab:before, .tabpanel__tab:hover .flexnav__subnav .tabpanel__tab:before {
    height: 0; }
  .tabpanel__tab.is-open .flexnav__subnav .tabpanel__tab:hover:before, .tabpanel__tab.is-active .flexnav__subnav .tabpanel__tab:hover:before, .tabpanel__tab:hover .flexnav__subnav .tabpanel__tab:hover:before {
    height: 3px; }
  .tabpanel__tab.is-open .flexnav__subnav .tabpanel__link, .tabpanel__tab.is-active .flexnav__subnav .tabpanel__link, .tabpanel__tab:hover .flexnav__subnav .tabpanel__link {
    color: #666; }
    .tabpanel__tab.is-open .flexnav__subnav .tabpanel__link:hover, .tabpanel__tab.is-active .flexnav__subnav .tabpanel__link:hover, .tabpanel__tab:hover .flexnav__subnav .tabpanel__link:hover {
      color: #038cd6; }

.tabpanel__link {
  display: block;
  padding: 13px 25px 12px;
  color: #666;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

.tabpanel__manage .tabpanel__tab.flexnav {
  width: 100px; }

.tabpanel__manage > .tabpanel__tab {
  padding: 0 50px 0 25px;
  width: 184px;
  text-align: center; }
  .tabpanel__manage > .tabpanel__tab > .tabpanel__link {
    padding: 10px 0 8px;
    max-width: 104px;
    display: inline-block; }
    .tabpanel__manage > .tabpanel__tab > .tabpanel__link:before {
      float: left; }

.tabpanel__closed {
  color: #b8b8b8;
  float: left;
  padding: 12px 0 6px 10px;
  position: absolute; }

.tabpanel__panel {
  clear: both;
  display: none;
  outline: none; }
  .tabpanel__panel.is-active {
    display: block; }

@media only screen and (max-width: 768px) {
  .tabpanel__group {
    display: table;
    width: 100%; } }

.tabpanel__group .tabpanel__tab {
  border: 0; }
  .tabpanel__group .tabpanel__tab:after {
    display: none; }
  @media only screen and (max-width: 768px) {
    .tabpanel__group .tabpanel__tab {
      display: table-cell;
      float: none; } }
  .tabpanel__group .tabpanel__tab:first-child a {
    border-radius: 2px 0 0 2px; }
  .tabpanel__group .tabpanel__tab:last-child a {
    border-radius: 0 2px 2px 0;
    border-width: 1px; }
  .tabpanel__group .tabpanel__tab a {
    height: 40px;
    line-height: 40px;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-width: 1px 0 1px 1px;
    color: #666;
    display: block;
    padding: 0 10px;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      .tabpanel__group .tabpanel__tab a {
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-wrap: normal; } }
    .tabpanel__group .tabpanel__tab a:hover, .tabpanel__group .tabpanel__tab a:focus, .tabpanel__group .tabpanel__tab a:active {
      background: linear-gradient(180deg, #fff, #e8e8e8);
      border-color: #b8b8b8; }
    .tabpanel__group .tabpanel__tab a:active {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.13); }
  .tabpanel__group .tabpanel__tab:hover + li a {
    border-left-color: #b8b8b8; }
  .tabpanel__group .tabpanel__tab.is-active a {
    background: linear-gradient(to bottom, #d1d1d1 0%, #b8b8b8 100%);
    border-color: transparent;
    color: #fff;
    cursor: default; }
  .tabpanel__group .tabpanel__tab.is-default a {
    background: none;
    border-color: transparent;
    cursor: default; }
    .tabpanel__group .tabpanel__tab.is-default a:hover {
      background: none; }
    .tabpanel__group .tabpanel__tab.is-default a:active {
      box-shadow: none; }
  .tabpanel__group .tabpanel__tab.is-disabled a {
    pointer-events: none;
    color: rgba(102, 102, 102, 0.3); }

.tabpanel__content-wrapper {
  height: auto !important; }

/**
  name: Tab Group
  type: ui
  modifiers:
    --small: Small tabgroup (Invoices/Bill page, Hungary product detals page (subscriptions slider))
  examples:
    Simple Group :
      include: tabgroup.html
*/
.tabgroup {
  overflow: hidden;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    .tabgroup {
      width: 100%;
      display: table;
      table-layout: fixed; } }
  .tabgroup__tab {
    float: left;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .tabgroup__tab {
        float: none;
        display: table-cell; } }
    .tabgroup__tab:first-child .tabgroup__link {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px; }
    .tabgroup__tab:last-child .tabgroup__link {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      border-width: 1px; }
    .tabgroup__tab:hover + li .tabgroup__link {
      border-left-color: #b8b8b8; }
    .tabgroup__tab.is-active .tabgroup__link {
      background: #b8b8b8;
      border-color: transparent;
      color: #fff;
      cursor: default; }
    .tabgroup__tab.is-default .tabgroup__link {
      background: none;
      border-color: transparent;
      cursor: default; }
      .tabgroup__tab.is-default .tabgroup__link:hover, .tabgroup__tab.is-default .tabgroup__link:active {
        background: none;
        box-shadow: none; }
    .tabgroup__tab.is-disabled .tabgroup__link {
      pointer-events: none;
      color: rgba(102, 102, 102, 0.3); }
  .tabgroup__link {
    display: block;
    position: relative;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-width: 1px 0 1px 1px;
    color: #666;
    padding: 0 20px; }
    @media only screen and (max-width: 768px) {
      .tabgroup__link {
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-wrap: normal; } }
    .tabgroup__link:hover, .tabgroup__link:focus, .tabgroup__link:active {
      background: linear-gradient(180deg, #fff, #e8e8e8);
      border-color: #b8b8b8; }
    .tabgroup__link:active {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.13); }
  .tabgroup__radio {
    display: none; }
    .tabgroup__radio:checked ~ .tabgroup__link {
      background: #b8b8b8;
      border-color: transparent;
      color: #fff;
      cursor: default; }
  .tabgroup--small .tabgroup__link {
    height: 32px;
    line-height: 32px; }

/**
  name: Tooltip
  type: ui
  modifiers:
    --error: Tooltip for error
    --blue: blue tooltip
    --top: positioning tooltip to top
    --left: positioning tooltip to left
    --right: positioning tooltip to right
  examples:
    Short tip:
      include: simple.html
    Long tip:
      include: long.html
    Error tip:
      include: error.html
    Blue tip:
      include: blue.html
    Tip for input field:
      include: for-input.html
*/
.tooltip {
  font-size: 0.813rem;
  background: #f5f5f5;
  border-radius: 3px;
  padding: 10px;
  color: #666;
  line-height: 1.4;
  text-align: left;
  transition: opacity, transform 100ms ease-out;
  border: 1px solid #d1d1d1;
  pointer-events: none;
  max-width: 340px;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.02);
  transform: translateY(-10px);
  opacity: 0;
  position: absolute;
  z-index: 100;
  visibility: visible; }
  .tooltip.is-active {
    opacity: 1;
    transform: translateY(3px);
    visibility: visible; }
  .tooltip:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    z-index: 4;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #d1d1d1;
    left: 50%; }
  .tooltip:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    z-index: 4;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f5f5f5;
    left: 50%; }
  .tooltip--top:after {
    border-top-color: transparent;
    border-bottom: 8px solid #474747;
    top: -8px;
    bottom: auto; }
  @media only screen and (max-width: 768px) {
    .tooltip--right {
      margin-left: 10px; } }
  .tooltip--right:after {
    right: 8px;
    left: auto;
    margin: 0; }
  .tooltip--right:before {
    right: 6px;
    left: auto;
    margin: 0; }
  @media only screen and (max-width: 768px) {
    .tooltip--left {
      margin-left: 5px; } }
  .tooltip--left:after {
    left: 8px;
    margin: 0; }
  .tooltip--left:before {
    left: 6px;
    margin: 0; }
  .tooltip--error {
    background: #fe635f;
    border: 1px solid #db5451;
    color: #fff; }
    .tooltip--error:before {
      border-top-color: #db5451; }
    .tooltip--error:after {
      border-top-color: #fe635f; }
    .tooltip--error.tooltip--top:after {
      border-bottom-color: #fe635f; }
  .tooltip--blue {
    box-shadow: none;
    background-color: #038cd6;
    color: #fff;
    border: 0;
    padding: 8px 15px; }
    .tooltip--blue:before {
      display: none; }
    .tooltip--blue:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      z-index: 4;
      bottom: -8px;
      left: 50%;
      margin-left: -8px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #038cd6;
      left: 50%; }
  .tooltip__trigger {
    cursor: pointer;
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    user-select: none;
    vertical-align: middle; }
    .tooltip__trigger.icon-questionmark:before {
      color: #b8b8b8;
      vertical-align: middle; }
    .tooltip__trigger.icon-error:before, .error-summary__list li.tooltip__trigger:before {
      color: #fe635f;
      position: relative; }
    .tooltip__trigger.form-item, .tooltip__trigger.form-search {
      display: block; }
    .tooltip__trigger--validation {
      display: none; }
      .form-item--error .tooltip__trigger--validation {
        display: block; }
  .tooltip .loader {
    display: none; }
  .tooltip[data-loading="true"] .loader {
    display: block; }
  .tooltip[data-loading="true"] .tooltip__content {
    display: none; }

.section {
  padding-left: 0.625rem;
  padding-right: 0.625rem; }
  .section--wrap {
    background: #fff;
    position: relative;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); }
    @media only screen and (max-width: 480px) {
      .section--wrap {
        box-shadow: none; } }
  .section--negative {
    color: #fff; }
    .section--negative .text--secondary {
      opacity: .75; }
  .section--hero {
    background: #038cd6 url("../img/main_bg.png") 63% top;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .section--hero {
        min-height: 1.875rem;
        padding: 0.5rem 0.625rem 0;
        overflow: hidden;
        z-index: 5; } }
    @media only screen and (min-width: 768px) {
      .section--hero {
        min-height: 4.688rem;
        padding-top: 1.5rem;
        padding-bottom: 0.375rem; } }
    .section--hero .subtitle {
      color: #c2e2f2;
      position: relative; }
      @media only screen and (max-width: 768px) {
        .section--hero .subtitle {
          font-size: 0.813rem;
          line-height: .9375rem;
          line-height: 1.4; } }
      @media only screen and (min-width: 768px) {
        .section--hero .subtitle {
          top: .25em; } }
    @media only screen and (max-width: 768px) {
      .section--hero .hgroup {
        min-height: 2.625rem; } }
    @media only screen and (min-width: 768px) {
      .section--hero .hgroup {
        min-height: 4.375rem; } }
    @media only screen and (max-width: 768px) {
      .section--hero [class*="title--"] {
        font-family: arial, sans-serif;
        font-size: 1rem;
        line-height: 1; } }
    @media only screen and (min-width: 768px) {
      .section--hero .dropdown {
        margin-top: 0.375rem;
        display: inline-block; } }
    .section--hero--slider {
      padding: 0; }
    @media only screen and (max-width: 768px) {
      .section--hero--account {
        padding: 0; } }
    @media only screen and (max-width: 768px) {
      .section--hero--account [class*="title--"] {
        position: absolute;
        top: 8px;
        left: 10px;
        z-index: 300;
        pointer-events: none;
        float: left; } }
  @media only screen and (min-width: 768px) {
    .section--small {
      min-height: 3.125rem;
      padding-top: 15px;
      padding-bottom: 15px; } }
  @media only screen and (min-width: 768px) {
    .section--small h1 {
      line-height: 1;
      margin-bottom: 0; } }

/**
name: Preloader
type: ui
desc: >
      Preloader it's additional styles which can be added to element if it needed.
      You can extend it into your own styles with extend %loader
examples:
  - name: Preloader
    tmpl: >
        <div class="load-tester border box--blue">
        	<span class="spinner"></span>
        </div>
*/
.load-tester .spinner, .spinner--large {
  margin-top: -7px; }
  .load-tester .spinner, .spinner--large, .load-tester .spinner:before, .spinner--large:before, .load-tester .spinner:after, .spinner--large:after {
    height: 10px;
    width: 10px; }
  .load-tester .spinner:before, .spinner--large:before {
    left: -15px; }
  .load-tester .spinner:after, .spinner--large:after {
    left: 15px; }

.load-tester .spinner, .spinner--large, .load-large .spinner, [data-loading] .form-item--toggle__switch [class^="icon-"], .load-tester .spinner:before, .spinner--large:before, .load-large .spinner:before, [data-loading] .form-item--toggle__switch [class^="icon-"]:before, .load-tester .spinner:after, .spinner--large:after, .load-large .spinner:after, [data-loading] .form-item--toggle__switch [class^="icon-"]:after {
  animation-fill-mode: both;
  animation: loader-white 1.3s infinite ease-in-out;
  border-radius: 50%;
  height: 5px;
  width: 5px; }

.load-tester .spinner, .spinner--large, .load-large .spinner, [data-loading] .form-item--toggle__switch [class^="icon-"] {
  animation-delay: .16s;
  display: block;
  font-size: 10px;
  text-indent: -9999px;
  margin-top: -3px; }

[data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class^="icon-"] {
  animation-name: loader-grey; }

.load-tester .spinner:before, .spinner--large:before, .load-large .spinner:before, [data-loading] .form-item--toggle__switch [class^="icon-"]:before, .load-tester .spinner:after, .spinner--large:after, .load-large .spinner:after, [data-loading] .form-item--toggle__switch [class^="icon-"]:after {
  content: "";
  position: absolute;
  top: 0; }

.load-tester .spinner:before, .spinner--large:before, .load-large .spinner:before, [data-loading] .form-item--toggle__switch [class^="icon-"]:before {
  left: -8px; }

.load-tester .spinner:after, .spinner--large:after, .load-large .spinner:after, [data-loading] .form-item--toggle__switch [class^="icon-"]:after {
  left: 8px;
  animation-delay: .32s; }

@keyframes loader-white {
  0%,
  80%,
  100% {
    background-color: #fff; }
  40% {
    background-color: rgba(255, 255, 255, 0.35); } }

@keyframes loader-blue {
  0%,
  80%,
  100% {
    background-color: #038cd6; }
  40% {
    background-color: rgba(255, 255, 255, 0.35); } }

@keyframes loader-grey {
  0%,
  80%,
  100% {
    background-color: #fff; }
  40% {
    background-color: #d1d1d1; } }

@keyframes button-loader--default {
  0%,
  80%,
  100% {
    background-color: rgba(71, 71, 71, 0.8); }
  40% {
    background-color: rgba(71, 71, 71, 0.35); } }

@keyframes loader-grey-dark {
  0%,
  80%,
  100% {
    background-color: #b8b8b8; }
  40% {
    background-color: #666; } }

.load-tester {
  position: relative;
  width: 100px;
  height: 50px;
  text-align: center; }
  .load-tester .spinner {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0; }
    .load-tester .spinner, .load-tester .spinner:before, .load-tester .spinner:after {
      animation-name: loader-grey; }
  .load-tester--product-config {
    vertical-align: top;
    height: 10px;
    margin: 3px 0 0;
    width: auto;
    display: none; }
    .product-container.is-loading .load-tester--product-config {
      display: inline-block; }
    .load-tester--product-config .spinner {
      margin: 0 12px;
      margin: 0 12px;
      left: 0;
      top: 0;
      transform: translateX(0); }
      .load-tester--product-config .spinner, .load-tester--product-config .spinner:before, .load-tester--product-config .spinner:after {
        height: 8px;
        width: 8px;
        animation-name: loader-grey-dark; }
      .load-tester--product-config .spinner:before {
        left: -12px; }
      .load-tester--product-config .spinner:after {
        left: 12px; }
  .load-tester--minibasket-product-calc {
    height: 5px;
    margin: 4px 5px 0 0; }
    .load-tester--minibasket-product-calc .spinner {
      margin: 0 9px; }
      .load-tester--minibasket-product-calc .spinner, .load-tester--minibasket-product-calc .spinner:before, .load-tester--minibasket-product-calc .spinner:after {
        height: 5px;
        width: 5px; }
      .load-tester--minibasket-product-calc .spinner:before {
        left: -9px; }
      .load-tester--minibasket-product-calc .spinner:after {
        left: 9px; }

.spinner--large {
  position: relative;
  display: inline-block; }
  .spinner--large, .spinner--large:before, .spinner--large:after {
    animation-name: loader-grey; }

.load-large .spinner {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; }
  .load-large .spinner, .load-large .spinner:before, .load-large .spinner:after {
    height: 10px;
    width: 10px;
    animation-name: loader-grey; }
  .load-large .spinner:before {
    left: -20px; }
  .load-large .spinner:after {
    left: 20px; }

/**
name: Switcher
type: ui
desc: Implementation of toggle component with two states.
examples:
  - name: Default switcher
    tmpl:
        include: default.html
  - name: Wide switcher
    tmpl:
        include: wide.html
  - name: Switcher with loading state
    tmpl:
        include: with-loading.html
*/
.form-item--toggle {
  display: inline-block;
  width: 80px;
  height: 32px;
  border-radius: 2px;
  background-color: #fff;
  overflow: hidden;
  position: relative;
  vertical-align: middle; }
  .form-item--toggle label {
    cursor: pointer; }
  .form-item--toggle.form-item--toggle--wide {
    width: 160px; }
  .form-item--toggle label {
    position: absolute;
    line-height: 32px;
    top: 0;
    width: 50%;
    height: 100%;
    text-align: center;
    z-index: 3; }
  .form-item--toggle input {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 6; }
    .form-item--toggle input:disabled {
      cursor: default; }
      .form-item--toggle input:disabled + label {
        color: #d1d1d1;
        cursor: default; }
      .form-item--toggle input:disabled ~ .form-item--toggle__switch {
        border-color: #b8b8b8 !important;
        background-color: #d1d1d1 !important;
        background: linear-gradient(to top, #d1d1d1, #b8b8b8);
        color: #fff !important; }
        .form-item--toggle input:disabled ~ .form-item--toggle__switch [class^="icon-"] {
          border: none;
          font-size: 12px;
          margin: 0;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0; }
        .form-item--toggle input:disabled ~ .form-item--toggle__switch [class^="icon-"]:before {
          background: transparent;
          width: 100%;
          height: auto;
          content: "\E067"; }
    .form-item--toggle input:focus ~ .form-item--toggle__track {
      outline: none; }
    .form-item--toggle input + .tooltip__trigger {
      line-height: 33px;
      vertical-align: top; }
  .form-item--toggle--error.form-item--toggle input:focus ~ .form-item--toggle__track,
  .form-item--toggle--error.form-item--toggle input:hover:focus ~ .form-item--toggle__track,
  .form-item--toggle--error.form-item--toggle input:hover ~ .form-item--toggle__track,
  .form-item--toggle--error.form-item--toggle .form-item--toggle__track {
    border-color: #fe635f; }
  .form-item--toggle--error .toggle__check:checked ~ .form-item--toggle__switch,
  .form-item--toggle--error .toggle__check ~ .form-item--toggle__switch {
    border-color: #db5451;
    background-color: #fe635f;
    background-image: none;
    color: #fff; }

.form-item--toggle__switch {
  border-color: #038cd6;
  background-color: #038cd6;
  background: linear-gradient(180deg, #038cd6, #0296e5);
  color: #fff;
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  right: 42px;
  background-clip: padding-box;
  border-radius: 2px;
  z-index: 2;
  transition-duration: .2s, .4s, .4s, .4s;
  transition-property: left, right, background-color, color;
  transition-timing-function: cubic-bezier(0.2, 0.1, 0, 1);
  text-align: center; }
  .form-item--toggle__switch .icon-hamburger-menu {
    width: 7px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 4px;
    /*border: solid $color-white;*/ }
    .form-item--toggle__switch .icon-hamburger-menu:before {
      display: block;
      /*content: "";*/
      background: #fff;
      /*width: 1px;*/
      position: absolute;
      top: 0;
      height: 100%;
      transform: rotate(90deg); }
  .toggle__radio ~ .form-item--toggle__switch {
    z-index: 4; }
  [data-loading] .form-item--toggle__switch {
    background-color: #038cd6;
    background-image: linear-gradient(180deg, #038cd6, #0296e5);
    left: 4px !important;
    right: 4px !important; }
    [data-loading] .form-item--toggle__switch [class^="icon-"] {
      border-color: transparent; }
      [data-loading] .form-item--toggle__switch [class^="icon-"]:after {
        left: 6px !important; }
  [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch {
    background: #fff; }

.form-item--toggle__track {
  background-color: #fff;
  border: 1px solid #d1d1d1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: all 0.125s;
  border-radius: inherit; }
  .form-item--toggle:hover .form-item--toggle__track {
    background-color: #f5f5f5;
    border: 1px solid #b8b8b8; }
  .form-item--toggle input:hover:focus ~ .form-item--toggle__track,
  .form-item--toggle input:focus ~ .form-item--toggle__track {
    background-color: #f5f5f5;
    border: 1px solid #b8b8b8; }
  .form-item--toggle input:disabled ~ .form-item--toggle__track {
    background-color: #fff !important;
    border-color: #d1d1d1 !important; }
  .section--negative .form-item--toggle input:hover:focus ~ .form-item--toggle__track,
  .section--negative .form-item--toggle input:focus ~ .form-item--toggle__track {
    background-color: #f5f5f5;
    border-color: 1px solid #00619e; }
  .section--negative .form-item--toggle:hover .form-item--toggle__track {
    background-color: #f5f5f5;
    border-color: 1px solid #666; }
  .section--negative .form-item--toggle__track {
    border-color: transparent; }

.toggle__check ~ .form-item--toggle__switch {
  border-color: #038cd6;
  background-color: #038cd6;
  background: linear-gradient(180deg, #038cd6, #0296e5);
  color: #fff; }

.toggle__check:checked ~ .form-item--toggle__switch {
  border-color: #038cd6;
  background-color: #038cd6;
  background: linear-gradient(180deg, #038cd6, #0296e5);
  color: #fff;
  right: 3px;
  left: 42px;
  transition-duration: .6s, .2s, .6s, .6s; }

.toggle__check:disabled ~ .form-item--toggle__switch {
  border-color: #b8b8b8 !important;
  background-color: #d1d1d1 !important;
  background: linear-gradient(to top, #d1d1d1, #b8b8b8);
  color: #fff !important;
  left: 3px;
  right: 42px; }
  .toggle__check:disabled ~ .form-item--toggle__switch [class^="icon-"] {
    border: none;
    font-size: 12px;
    margin: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .toggle__check:disabled ~ .form-item--toggle__switch [class^="icon-"]:before {
    background: transparent;
    width: 100%;
    height: auto;
    content: "\E067"; }
  .form-item--toggle--wide .toggle__check:disabled ~ .form-item--toggle__switch {
    right: 84px; }

.toggle__check:checked:disabled ~ .form-item--toggle__switch {
  left: 42px;
  right: 3px; }
  .form-item--toggle--wide .toggle__check:checked:disabled ~ .form-item--toggle__switch {
    left: 84px; }

[data-toggle-value="on"]:checked {
  z-index: -1; }
  [data-toggle-value="on"]:checked ~ .form-item--toggle__switch {
    border-color: #038cd6;
    background-color: #038cd6;
    background: linear-gradient(180deg, #038cd6, #0296e5);
    color: #fff;
    left: 42px;
    right: 3px;
    transition-duration: .6s, .2s, .6s, .6s; }

[data-toggle-value="on"] + label {
  color: #038cd6;
  left: 3px; }

[data-toggle-value="off"]:checked {
  z-index: -1; }
  [data-toggle-value="off"]:checked ~ .form-item--toggle__switch {
    left: 3px;
    right: 42px;
    transition-duration: .2s, .6s, .6s, .6s; }

[data-toggle-value="off"] + label {
  color: #038cd6;
  right: 3px; }

.form-item--toggle--wide .form-item--toggle__switch {
  right: 84px; }

.form-item--toggle--wide .toggle__check {
  left: 84px; }

.form-item--toggle--wide [data-toggle-value="on"]:checked ~ .form-item--toggle__switch {
  left: 84px; }

.form-item--toggle--wide [data-toggle-value="off"]:checked ~ .form-item--toggle__switch {
  right: 84px; }

.ytplayer-holder {
  position: relative;
  z-index: 0; }
  .ytplayer-holder .ytplayer-video--flex {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0; }
    .ytplayer-holder .ytplayer-video--flex iframe {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
  .ytplayer-holder.ytplayer-covered .ytplayer-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; }
  .ytplayer-holder.ytplayer-covered .ytplayer-cover {
    opacity: 1;
    position: relative;
    z-index: 20;
    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: 25px;
    top: 0px;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    z-index: 5; }
    .ytplayer-holder .ytplayer-close .icon-reject {
      font-size: 10px;
      margin-left: 5px; }
      .ytplayer-holder .ytplayer-close .icon-reject:before {
        line-height: 25px; }
  .ytplayer-holder .ytplayer-close:hover {
    text-decoration: underline; }

.button--micro {
  font-size: 7px;
  height: 24px;
  width: 24px;
  line-height: 24px;
  padding: 0;
  min-width: auto; }

.button.button--bar:hover, .form-checkbox--filter label.button--bar:hover {
  border-color: #b8b8b8;
  background: linear-gradient(180deg, #fff, #e8e8e8); }

.button.button--bar:first-child, .form-checkbox--filter label.button--bar:first-child,
.form-checkbox--filter label.button--bar:first-child {
  border-radius: 2px 0 0 2px; }

.button.button--bar:last-child, .form-checkbox--filter label.button--bar:last-child,
.form-checkbox--filter label.button--bar:last-child {
  border-radius: 0 2px 2px 0;
  border-right: 1px solid #d1d1d1; }

.button.button--bar, .form-checkbox--filter label.button--bar,
.form-checkbox--filter label.button--bar {
  color: #474747;
  height: 40px;
  background: -webkit-linear-gradient(270deg, #fff, #f5f5f5);
  background: linear-gradient(180deg, #fff, #f5f5f5);
  display: block;
  float: left;
  border: 1px solid #d1d1d1;
  border-radius: 0;
  border-right-color: transparent; }

.button.button--bar.button--small, .form-checkbox--filter label.button--bar {
  height: 32px; }

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

.button.button--bar:focus, .form-checkbox--filter label.button--bar:focus,
.form-checkbox--filter label.button--bar:focus {
  border: 1px solid #038cd6;
  background: -webkit-linear-gradient(270deg, #fff, #e9e9e9);
  background: linear-gradient(180deg, #fff, #e9e9e9); }

.button [class*=" icon-"]:after, .form-checkbox--filter label [class*=" icon-"]:after, .button [class*=" icon-"]:before, .form-checkbox--filter label [class*=" icon-"]:before, .button__text, .form-checkbox--filter label [class*=" icon-"]:after, .form-checkbox--filter label [class*=" icon-"]:before, .overlay-spinner__spinner [class*=" icon-"]:after, .overlay-spinner__spinner [class*=" icon-"]:before, .paging_simple_numbers a.loadmore [class*=" icon-"]:after, .paging_simple_numbers a.loadmore [class*=" icon-"]:before {
  vertical-align: middle; }

.button__spinner, .button__label, .button__label--success, .button__label--success:before {
  -webkit-transition: color 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), -webkit-transform 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), opacity 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63);
  transition: color 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), transform 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), opacity 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63); }

.button__label {
  position: relative;
  z-index: 3;
  -webkit-transition-delay: .2s;
  transition-delay: .2s; }

.button__spinner {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0); }

.no-cssanimations .button__spinner {
  left: 40%;
  top: 45%; }

.button__label--success {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0); }

[data-loading] .button, [data-loading] .form-checkbox--filter label, .form-checkbox--filter [data-loading] label, [data-loading] .form-checkbox--filter label, .form-checkbox--filter [data-loading] label {
  cursor: default; }

[data-loading] .button__label {
  opacity: 0;
  -webkit-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0);
  -webkit-transition-delay: .01s;
  transition-delay: .01s; }

.no-csstransforms3d [data-loading] .button__label {
  top: -1em; }

[data-loading] .button__spinner {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .2s;
  transition-delay: .2s; }

[data-loading] .button__label--success {
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0); }

[data-loading] .button__label--success:before {
  opacity: 0;
  -webkit-transform: translate3d(-25px, 0, 0);
  transform: translate3d(-25px, 0, 0); }

[data-loaded] .button, [data-loaded] .form-checkbox--filter label, .form-checkbox--filter [data-loaded] label, [data-loaded] .form-checkbox--filter label, .form-checkbox--filter [data-loaded] label {
  cursor: default;
  border: 1px solid #008e52;
  background: #43c682;
  background-image: -webkit-linear-gradient(270deg, #43c682, #02a962);
  background-image: linear-gradient(180deg, #43c682, #02a962); }

.boxshadow [data-loaded] .button, .boxshadow [data-loaded] .form-checkbox--filter label, .form-checkbox--filter .boxshadow [data-loaded] label, .boxshadow [data-loaded] .form-checkbox--filter label, .form-checkbox--filter .boxshadow [data-loaded] label {
  box-shadow: inset 0 0 0 1px #008e52;
  border: none; }

[data-loaded] .button .button__label--success, [data-loaded] .form-checkbox--filter label .button__label--success, .form-checkbox--filter [data-loaded] label .button__label--success, [data-loaded] .form-checkbox--filter label .button__label--success, .form-checkbox--filter [data-loaded] label .button__label--success, [data-loaded] .button .button__label--success:before, [data-loaded] .form-checkbox--filter label .button__label--success:before, .form-checkbox--filter [data-loaded] label .button__label--success:before, [data-loaded] .form-checkbox--filter label .button__label--success:before, .form-checkbox--filter [data-loaded] label .button__label--success:before {
  color: #fff; }

[data-loaded] .button__label {
  opacity: 0;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0); }

[data-loaded] .button__spinner {
  opacity: 0;
  -webkit-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0); }

[data-loaded] .button__label--success {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .2s;
  transition-delay: .2s; }

[data-loaded] .button__label--success:before {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .5s;
  transition-delay: .5s; }

[data-loading] .form-item--toggle__switch [class^="icon-"], .button__spinner {
  -webkit-animation-delay: .16s;
  animation-delay: .16s;
  display: block;
  font-size: 10px;
  text-indent: -9999px; }

[data-loading] .form-item--toggle__switch [class^="icon-"], .button__spinner, [data-loading] .form-item--toggle__switch [class^="icon-"]:before, [data-loading] .form-item--toggle__switch .form-item .ws-range .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-item .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-item__row .form-comp:before, .form-item__row [data-loading] .form-item--toggle__switch .form-comp:before, [data-loading] .form-item--toggle__switch .error-summary__list li:before, .error-summary__list [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .button--flow:before, [data-loading] .form-item--toggle__switch .button--icon:before, [data-loading] .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] .form-item--toggle__switch span:after, [data-loading] .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] .form-item--toggle__switch .status-dot--check:before, [data-loading] .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .bullet-link:before, [data-loading] .form-item--toggle__switch .button--link:before, [data-loading] .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] .form-item--toggle__switch .fill--half:after, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager > span > span.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager > span > span.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager > span > span.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager > span > span.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager > span > span.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager > span > span.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .flexnav__toggler:after, .button__spinner:before, [data-loading] .form-item--toggle__switch [class^="icon-"]:after, .button__spinner:after {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: loader-blue 1.8s infinite ease-in-out;
  animation: loader-blue 1.8s infinite ease-in-out;
  border-radius: 50%;
  height: 5px;
  width: 5px; }

.no-cssanimations [data-loading] .form-item--toggle__switch [class^="icon-"], [data-loading] .form-item--toggle__switch .no-cssanimations [class^="icon-"], .no-cssanimations .button__spinner {
  background-image: url("../assets/_framework/graphics/ajax-loader.gif"), none;
  width: 43px;
  height: 11px;
  border-radius: 0; }

[data-loading] .form-item--toggle__switch [class^="icon-"]:before, [data-loading] .form-item--toggle__switch .form-item .ws-range .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-item .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-item__row .form-comp:before, .form-item__row [data-loading] .form-item--toggle__switch .form-comp:before, [data-loading] .form-item--toggle__switch .error-summary__list li:before, .error-summary__list [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .button--flow:before, [data-loading] .form-item--toggle__switch .button--icon:before, [data-loading] .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] .form-item--toggle__switch span:after, [data-loading] .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] .form-item--toggle__switch .status-dot--check:before, [data-loading] .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .bullet-link:before, [data-loading] .form-item--toggle__switch .button--link:before, [data-loading] .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] .form-item--toggle__switch .fill--half:after, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager > span > span.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager > span > span.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager > span > span.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager > span > span.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager > span > span.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager > span > span.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .flexnav__toggler:after, .button__spinner:before, [data-loading] .form-item--toggle__switch [class^="icon-"]:after, .button__spinner:after {
  content: "";
  position: absolute;
  top: 0; }

[data-loading] .form-item--toggle__switch [class^="icon-"]:before, [data-loading] .form-item--toggle__switch .form-item .ws-range .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-item .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-item__row .form-comp:before, .form-item__row [data-loading] .form-item--toggle__switch .form-comp:before, [data-loading] .form-item--toggle__switch .error-summary__list li:before, .error-summary__list [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .button--flow:before, [data-loading] .form-item--toggle__switch .button--icon:before, [data-loading] .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] .form-item--toggle__switch span:after, [data-loading] .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] .form-item--toggle__switch .status-dot--check:before, [data-loading] .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .bullet-link:before, [data-loading] .form-item--toggle__switch .button--link:before, [data-loading] .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] .form-item--toggle__switch .fill--half:after, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager > span > span.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager > span > span.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager > span > span.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager > span > span.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager > span > span.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager > span > span.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .flexnav__toggler:after, .button__spinner:before {
  left: -8px; }

[data-loading] .form-item--toggle__switch [class^="icon-"]:after, .button__spinner:after {
  left: 8px;
  -webkit-animation-delay: .32s;
  animation-delay: .32s; }

.button__spinner, .button__spinner:before, .button__spinner:after {
  height: 10px;
  width: 10px; }

.button__spinner:before {
  left: -15px; }

.button__spinner:after {
  left: 15px; }

[data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class^="icon-"], [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class^="icon-"]:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-item .ws-range .ws-range-thumb, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-item .ws-range [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .ws-range-thumb, .form-search .ws-range [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .ws-range-thumb, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-search .ws-range [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .ws-range-thumb, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-item__row .form-comp:before, .form-item__row [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-comp:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .error-summary__list li:before, .error-summary__list [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--flow:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--icon:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span:after, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .status-dot--check:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .bullet-link:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--link:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fill--half:after, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .pager > span > span.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.previous:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager > span > span.previous:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager > span > span.previous:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .pager__button.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .pager > span > span.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.next:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager > span > span.next:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .pager > span > span.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.next:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager > span > span.next:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .flexnav__toggler:after, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class^="icon-"]:after {
  -webkit-animation-name: loader-grey;
  animation-name: loader-grey; }

@-webkit-keyframes loader-blue {
  0%, 80%, 100% {
    background-color: #fff; }
  40% {
    background-color: rgba(255, 255, 255, 0.35); } }

@keyframes loader-blue {
  0%, 80%, 100% {
    background-color: #fff; }
  40% {
    background-color: rgba(255, 255, 255, 0.35); } }

@-webkit-keyframes loader-grey {
  0%, 80%, 100% {
    background-color: #fff; }
  40% {
    background-color: #d1d1d1; } }

@keyframes loader-grey {
  0%, 80%, 100% {
    background-color: #fff; }
  40% {
    background-color: #d1d1d1; } }

.button .icon, .form-checkbox--filter label .icon, .form-checkbox--filter label .icon {
  margin-right: .5em; }

.button .icon:before, .form-checkbox--filter label .icon:before, .form-checkbox--filter label .icon:before {
  font-size: 18px; }

.button.button--small .icon:before, .form-checkbox--filter label .icon:before, .form-checkbox--filter label .icon:before {
  font-size: 14px; }

.button .icon--left:before, .form-checkbox--filter label .icon--left:before, .form-checkbox--filter label .icon--left:before {
  margin-right: 5px; }

.button .icon--right:before, .form-checkbox--filter label .icon--right:before, .form-checkbox--filter label .icon--right:before {
  margin-left: 5px; }

.button.button--no-label .icon, .form-checkbox--filter label.button--no-label .icon, .form-checkbox--filter label.button--no-label .icon {
  margin-right: 0; }

.button__spinner .spinner-holder, .progress-spinner--align {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.button__spinner .spinner-holder, .progress-spinner, .tooltip__spinner {
  position: relative;
  display: inline-block;
  width: 5em;
  height: 5em;
  font-size: 4px;
  overflow: hidden; }

.button__spinner .spinner-holder .spinner-container, .progress-spinner .spinner-container, .tooltip__spinner .spinner-container {
  -webkit-animation: progress-spinner-animation 1s infinite steps(12);
  animation: progress-spinner-animation 1s infinite steps(12);
  position: relative;
  display: inline-block;
  width: 5em;
  height: 5em;
  text-indent: 999em; }

.button__spinner .spinner-holder .spinner-container em:after, .button__spinner .spinner-holder .spinner-container em:before, .button__spinner .spinner-holder .spinner-container span:after, .button__spinner .spinner-holder .spinner-container span:before, .button__spinner .spinner-holder .spinner-container:after, .button__spinner .spinner-holder .spinner-container:before, .progress-spinner .spinner-container em:after, .progress-spinner .spinner-container em:before, .progress-spinner .spinner-container span:after, .progress-spinner .spinner-container span:before, .progress-spinner .spinner-container:after, .progress-spinner .spinner-container:before, .tooltip__spinner .spinner-container em:after, .tooltip__spinner .spinner-container em:before, .tooltip__spinner .spinner-container span:after, .tooltip__spinner .spinner-container span:before, .tooltip__spinner .spinner-container:after, .tooltip__spinner .spinner-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 2.3em;
  width: .4em;
  height: 1.4em;
  border-radius: 45%;
  box-shadow: 0 3.6em #eee;
  -webkit-transform-origin: 50% 2.5em;
  transform-origin: 50% 2.5em; }

.grid-row, .grid-row--gutter-large, .grid-row--gutter-none, .grid-row--gutter-small, .grid-row--gutter-xsmall {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.grid-row {
  margin-left: -10px;
  margin-right: -10px; }

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

.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-large {
  margin-left: -20px;
  margin-right: -20px; }

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

.grid-row--gutter-small {
  margin-left: -5px;
  margin-right: -5px; }

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

.grid-row--gutter-xsmall {
  margin-left: -1px;
  margin-right: -1px; }

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

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

.col-xs {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: auto;
  max-width: 100%; }

.col-xs-1 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 8.33333%;
  max-width: 8.33333%; }

.col-xs-2 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 16.66667%;
  max-width: 16.66667%; }

.col-xs-3 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 25%;
  max-width: 25%; }

.col-xs-4 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 33.33333%;
  max-width: 33.33333%; }

.col-xs-5 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 41.66667%;
  max-width: 41.66667%; }

.col-xs-6 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 50%;
  max-width: 50%; }

.col-xs-7 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 58.33333%;
  max-width: 58.33333%; }

.col-xs-8 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 66.66667%;
  max-width: 66.66667%; }

.col-xs-9 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 75%;
  max-width: 75%; }

.col-xs-10 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 83.33333%;
  max-width: 83.33333%; }

.col-xs-11 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 91.66667%;
  max-width: 91.66667%; }

.col-xs-12 {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 100%;
  max-width: 100%; }

.col-xs-auto {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: auto;
  max-width: 100%; }

@media (min-width: 480px) {
  .col-sm {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: auto;
    max-width: 100%; }
  .col-sm-1 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 8.33333%;
    max-width: 8.33333%; }
  .col-sm-2 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 16.66667%;
    max-width: 16.66667%; }
  .col-sm-3 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 25%;
    max-width: 25%; }
  .col-sm-4 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 33.33333%;
    max-width: 33.33333%; }
  .col-sm-5 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 41.66667%;
    max-width: 41.66667%; }
  .col-sm-6 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 50%;
    max-width: 50%; }
  .col-sm-7 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 58.33333%;
    max-width: 58.33333%; }
  .col-sm-8 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 66.66667%;
    max-width: 66.66667%; }
  .col-sm-9 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 75%;
    max-width: 75%; }
  .col-sm-10 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 83.33333%;
    max-width: 83.33333%; }
  .col-sm-11 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 91.66667%;
    max-width: 91.66667%; }
  .col-sm-12 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 100%;
    max-width: 100%; }
  .col-sm-auto {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%; } }

@media (min-width: 768px) {
  .col-md {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: auto;
    max-width: 100%; }
  .col-md-1 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 8.33333%;
    max-width: 8.33333%; }
  .col-md-2 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 16.66667%;
    max-width: 16.66667%; }
  .col-md-3 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 25%;
    max-width: 25%; }
  .col-md-4 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 33.33333%;
    max-width: 33.33333%; }
  .col-md-5 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 41.66667%;
    max-width: 41.66667%; }
  .col-md-6 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 50%;
    max-width: 50%; }
  .col-md-7 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 58.33333%;
    max-width: 58.33333%; }
  .col-md-8 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 66.66667%;
    max-width: 66.66667%; }
  .col-md-9 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 75%;
    max-width: 75%; }
  .col-md-10 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 83.33333%;
    max-width: 83.33333%; }
  .col-md-11 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 91.66667%;
    max-width: 91.66667%; }
  .col-md-12 {
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 100%;
    max-width: 100%; }
  .col-md-auto {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: auto;
    max-width: 100%; } }

.col-xs-offset-0 {
  margin-left: 0; }

.col-xs-offset-1 {
  margin-left: 8.33333%; }

.col-xs-offset-2 {
  margin-left: 16.66667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.33333%; }

.col-xs-offset-5 {
  margin-left: 41.66667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.33333%; }

.col-xs-offset-8 {
  margin-left: 66.66667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.33333%; }

.col-xs-offset-11 {
  margin-left: 91.66667%; }

@media (min-width: 480px) {
  .col-sm-offset-0 {
    margin-left: 0; }
  .col-sm-offset-1 {
    margin-left: 8.33333%; }
  .col-sm-offset-2 {
    margin-left: 16.66667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.33333%; }
  .col-sm-offset-5 {
    margin-left: 41.66667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.33333%; }
  .col-sm-offset-8 {
    margin-left: 66.66667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.33333%; }
  .col-sm-offset-11 {
    margin-left: 91.66667%; } }

@media (min-width: 768px) {
  .col-md-offset-0 {
    margin-left: 0; }
  .col-md-offset-1 {
    margin-left: 8.33333%; }
  .col-md-offset-2 {
    margin-left: 16.66667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.33333%; }
  .col-md-offset-5 {
    margin-left: 41.66667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.33333%; }
  .col-md-offset-8 {
    margin-left: 66.66667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.33333%; }
  .col-md-offset-11 {
    margin-left: 91.66667%; } }

.grid-row-xs--top {
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start; }

.grid-row-xs--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.grid-row-xs--baseline {
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline; }

.grid-row-xs--bottom {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end; }

.grid-row-xs--stretch {
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }

@media (min-width: 480px) {
  .grid-row-sm--top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start; }
  .grid-row-sm--middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
  .grid-row-sm--baseline {
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline; }
  .grid-row-sm--bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end; }
  .grid-row-sm--stretch {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; } }

@media (min-width: 768px) {
  .grid-row-md--top {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start; }
  .grid-row-md--middle {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
  .grid-row-md--baseline {
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline; }
  .grid-row-md--bottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-top: auto; }
  .grid-row-md--stretch {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; } }

.grid-row-xs--left {
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start; }

.grid-row-xs--center {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.grid-row-xs--right {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.grid-row-xs--between {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.grid-row-xs--around {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }

@media (min-width: 480px) {
  .grid-row-sm--left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
  .grid-row-sm--center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .grid-row-sm--right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .grid-row-sm--between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .grid-row-sm--around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around; } }

@media (min-width: 768px) {
  .grid-row-md--left {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
  .grid-row-md--center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .grid-row-md--right {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
  .grid-row-md--between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; }
  .grid-row-md--around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around; } }

.col-xs--top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start; }

.col-xs--middle {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center; }

.col-xs--baseline {
  -webkit-align-self: baseline;
  -ms-flex-item-align: baseline;
  align-self: baseline; }

.col-xs--bottom {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  margin-top: auto; }

.col-xs--stretch {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch; }

@media (min-width: 480px) {
  .col-sm--top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start; }
  .col-sm--middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center; }
  .col-sm--baseline {
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline; }
  .col-sm--bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-top: auto; }
  .col-sm--stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch; } }

@media (min-width: 768px) {
  .col-md--top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start; }
  .col-md--middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center; }
  .col-md--baseline {
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline; }
  .col-md--bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-top: auto; }
  .col-md--stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch; } }

.grid-row--content {
  margin-left: 0;
  margin-right: 0; }

/*product.css by tangll 2016-8-22*/
/*hreo small.css*/
.sg-component__markup--no-padding {
  padding: 0 !important; }

.section--product-hero .product-list {
  border-left: 0; }

.list-item {
  font-family: "telenor", sans-serif;
  font-weight: normal;
  position: relative;
  border: 1px solid #d1d1d1; }

@media only screen and (min-width: 37.5em) {
  .list-item {
    padding-top: 2.5rem;
    border-width: 1px 1px 1px 0;
    height: 550px; } }

.list-item__name {
  line-height: 1.27rem;
  display: block;
  color: #474747; }

.list-item [class*="button"] {
  left: 1.25rem;
  position: absolute;
  bottom: 85px; }

.list-item--normal .list-item__name::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
  height: 21px;
  width: 40px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%); }

.product-name a:active, .product-name a:hover {
  text-decoration: none; }

.list-item__inner-wrapper {
  padding: 0 1.25rem; }

.list-item--hero {
  padding-top: 1.25rem;
  padding-bottom: 0.625rem;
  border-width: 0;
  overflow: visible;
  margin-bottom: 0; }

.list-item--hero .list-item__name {
  font-size: 2.75rem;
  line-height: 2.875rem;
  margin: 0 0 0.938rem; }

.list-item--hero .list-item--hero__image-wrapper {
  position: relative;
  min-height: 1px; }

.section--product-hero--one-by-one .list-item--hero:first-child {
  border-right: 1px solid #d1d1d1; }

.list-item--hero .list-item--hero__image-wrapper img {
  width: auto;
  max-height: 490px;
  max-width: none;
  height: auto;
  position: absolute;
  top: 0;
  right: 0; }

.list-item img {
  padding: 0 1.125rem;
  margin: 0 auto;
  display: block; }

.list-item--hero--small .list-item--hero__details {
  height: 220px; }

.list-item--hero .list-item--hero__details {
  padding-bottom: 8.438rem;
  position: relative;
  overflow: hidden; }

.list-item--hero--small .list-item__name {
  font-size: 1.875rem;
  line-height: 2rem; }

@media only screen and (min-width: 48em) {
  .list-item--hero .list-item__inner-bottom-wrapper {
    width: 100%;
    position: absolute;
    bottom: 10px;
    margin-top: 0; } }

.list-item .list-item--hero__call-to-action > p {
  float: left; }

.list-item .list-item--hero__call-to-action > p > span {
  display: block; }

.list-item--hero .list-item__price {
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0.313rem 0 0.313rem;
  font-family: "telenorlight", sans-serif;
  font-weight: normal; }

.list-item--hero--small .list-item__price {
  font-size: 1.313rem;
  line-height: 1.2; }

.list-item--hero--small.list-item--hero .category-link {
  margin-bottom: 50px; }

.list-item--hero--small .button, .list-item--hero--small .form-checkbox--filter label, .form-checkbox--filter .list-item--hero--small label {
  margin-top: 4px; }

.list-item--hero--small {
  height: 240px !important; }

.list-item--hero [class*="button"] {
  float: right;
  clear: none;
  margin-bottom: 0;
  position: static; }

.list-item--hero .category-link {
  font-family: "telenor", sans-serif;
  font-weight: normal;
  display: block;
  color: #757575;
  margin-bottom: 0.625rem; }

.bullet-link:hover {
  text-decoration: underline; }

.bullet-link:before {
  font-size: 0.438rem;
  padding-right: 0.125rem;
  margin-right: .4em;
  vertical-align: middle;
  position: relative;
  top: -2px; }

.list-item .list-item--hero__call-to-action:after {
  content: "";
  display: table;
  clear: both;
  width: 0; }

.bullet-link:before {
  content: "\E00B"; }

.list-item--hero .list-item__note {
  display: block;
  position: static;
  background-color: transparent;
  border-top: 1px solid #d1d1d1;
  padding: 0.625rem 0 0;
  font-size: 0.563rem;
  line-height: 1.3;
  color: #757575; }

/*hreo full width.css*/
.list-item--hero--full-width {
  height: 350px !important;
  background-image: none; }

.list-item--hero--full-width .list-item--hero__details {
  margin-left: 6.51064%;
  height: 330px;
  overflow: visible;
  margin-right: 0;
  padding-left: 0.625rem; }

.list-item--hero--full-width .list-item__name {
  font-size: 2.75rem;
  line-height: 1;
  font-family: "telenorlight", sans-serif;
  font-weight: normal;
  margin-top: 0;
  margin-left: -.04em;
  margin-bottom: 0.625rem; }

.list-item [class*="list--check"] {
  margin: 0 0 1.25rem; }

.container:after, .section:after, .block:after, .block__header:after .button:after, .block__header:after .form-checkbox--filter label:after, .form-checkbox--filter .block__header:after label:after, .product-list:after, .list-item:after, .list-item__inner-wrapper:after,
.list-item__note:after, .list-item .product-name:after,
.list-item .list-item--hero__call-to-action:after, .product-grid__item__inner-wrapper:after,
.radios--color:after {
  content: "";
  display: table;
  clear: both;
  width: 0; }

.list-item--hero li {
  line-height: 1rem;
  color: #757575;
  font-size: 0.813rem; }

.list--check--dark li, .list--check--grey li,
.list--check--white li, .list--check--grey-dark li {
  margin-top: 0.625em; }

.icon-bullet-check-negative:before, .list--check--dark li:before,
.list--check--grey li:before, .list--check--white li:before,
.list--check--grey-dark li:before {
  content: "\E01C"; }

.list--check--dark li:before, .list--check--grey li:before,
.list--check--white li:before, .list--check--grey-dark li:before {
  margin-left: -1.5rem;
  width: 1.5rem;
  color: #038cd6;
  font-size: 1em;
  margin-top: 0;
  top: 0.063em; }

.list--check--dark li, .list--check--grey li,
.list--check--white li, .list--check--grey-dark li {
  padding-left: 1.5rem; }

.radios--color input[type=radio]:checked + label,
.radios--color input[type=radio]:hover + label,
.radios--color input[type=radio]:focus + label {
  border: 1px solid #d1d1d1; }

.list-item--hero--full-width .list-item--hero__details .button, .list-item--hero--full-width .list-item--hero__details .form-checkbox--filter label, .form-checkbox--filter .list-item--hero--full-width .list-item--hero__details label {
  float: none;
  left: auto;
  position: absolute;
  bottom: 28px;
  right: 141px;
  margin-bottom: 0; }

/*Article section*/
.section--padding {
  padding-top: 3.125rem;
  padding-bottom: 3.125rem; }

.block__header {
  padding-bottom: 0.938rem;
  border-bottom: 1px solid #d1d1d1;
  position: relative; }

.article__bodytext p {
  margin-bottom: 30px; }

.article--text-left .article__bodytext {
  padding-right: 1.875rem;
  padding-bottom: 10px;
  padding-left: 10px; }

.article--title-border .article__bodytext {
  padding-top: 0; }

.article--title-border .article__image {
  margin-top: -105px; }

.article__image {
  position: relative;
  text-align: center; }

.article img {
  height: auto;
  max-width: 100%; }

.article--expand-right img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: auto;
  max-width: none;
  margin: 0; }

.article--expand-left img {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  width: auto;
  max-width: none;
  margin: 0; }

.article--text-right .article__bodytext {
  padding-left: 1.875rem; }

.article__bodytext {
  padding: 10px; }

/*Product grid item*/
.product-grid__item {
  height: 275px !important;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  position: relative;
  padding-bottom: 1.25rem; }

.product-grid__item__inner-wrapper {
  padding: 0.625rem 1.25rem 0; }

.product-grid__item__image-wrapper {
  padding-bottom: 0.625rem;
  position: relative; }

.product-grid__item .rating--stars {
  position: absolute;
  top: 0; }

.product-grid__item img {
  max-width: 100%;
  max-height: 120px;
  display: block;
  margin: 0 auto; }

.product-grid__item__details {
  height: 105px;
  position: relative;
  padding-top: 1.563rem; }

.product-grid__item .product-name {
  height: 20px;
  overflow: hidden;
  position: relative;
  width: 100%;
  white-space: nowrap; }

.product-grid__item .product-name:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
  width: 40px;
  height: 21px;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%); }

.product-grid__item .product-price {
  display: block;
  font-family: "telenor", sans-serif;
  font-weight: normal;
  margin-top: 0.313rem;
  line-height: 1.1; }

.product-grid__item .category-link {
  font-family: "telenor", sans-serif;
  font-weight: normal;
  display: block;
  color: #757575;
  position: absolute;
  top: 70px;
  padding-left: 0.8rem;
  margin-top: 0.313rem;
  line-height: .9375rem; }

.product-grid__item .category-link:before {
  font-size: 0.438rem;
  position: absolute;
  top: 0;
  left: 0; }

/*Product grid item overlay*/
.product-grid__item.desk-li-one-half {
  max-width: none; }

.product-grid__item--overlay {
  background-size: cover; }

.product-grid__item__banner__title {
  color: #fff;
  position: relative;
  top: 20px;
  z-index: 5;
  max-width: 100%;
  padding: 0 1.25rem; }

.product-grid__item__banner {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 5;
  padding-right: 8.125rem; }

.product-grid__item__banner span {
  color: #fff; }

.product-grid__item__banner .category-link {
  position: relative;
  top: 0;
  color: #fff; }

.product-grid__item__banner .button, .product-grid__item__banner .form-checkbox--filter label, .form-checkbox--filter .product-grid__item__banner label {
  position: absolute;
  right: 0;
  bottom: 0; }

.product-grid__item--overlay:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-image: -webkit-linear-gradient(#fff, #f5f5f5);
  background-image: linear-gradient(#fff, #f5f5f5);
  opacity: .65;
  z-index: 0; }

.product-grid__item--overlay--purple:after {
  background-image: -webkit-linear-gradient(#7f2a8e, #d60a8a, #eb1c2b);
  background-image: linear-gradient(#7f2a8e, #d60a8a, #eb1c2b); }

.product-grid__item--tall img {
  max-height: 297px; }

.product-grid__item--tall .product-grid__item__details {
  padding-top: 0;
  height: auto; }

@media only screen and (min-width: 37.5em) {
  .product-grid__item--tall {
    height: 550px !important; }
  .product-grid__item--tall .product-grid__item__details {
    height: 168px;
    margin-left: 0; }
  .product-grid__item--tall .product-grid__item__image-wrapper {
    margin-right: 0; } }

.product-grid__item--tall .product-grid__item__details .rating--stars {
  position: static; }

.rating__stars--small .fill--half.icon-star:after {
  clip: rect(0 0.367em auto 0); }

.list-item--hero .category-link,
.product-grid__item .product-grid__note {
  font-size: 0.688rem;
  line-height: 1; }

.product-grid__item .product-grid__note {
  color: #757575;
  line-height: 1rem;
  margin-top: 0.625rem; }

.product-grid__item--tall .category-link {
  top: 128px; }

.sg-component__markup.sg-component__markup--overflow {
  overflow: visible; }

.menu--filtering {
  border-style: solid;
  border-color: #d1d1d1;
  border-width: 0;
  margin-bottom: 1.25rem;
  position: relative; }

/*List item in thumbnail view*/
.list-item--thumb {
  overflow: hidden;
  height: 175px !important;
  padding-top: 0;
  background: #fff;
  border: 0;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  margin-bottom: 0; }

.list-item--thumb .list-item__inner-wrapper div {
  position: relative; }

.list-item--thumb .list-item__inner-wrapper {
  padding-top: 1.25rem; }

.list-item--thumb img {
  max-width: 100%;
  height: 88px !important;
  margin: 0 auto; }

.list-item--thumb .list-item__inner-wrapper div + div {
  margin-top: 1.25rem;
  padding: 0.063rem; }

.list-item__info {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  width: 100%;
  position: absolute;
  top: 328px;
  left: 0; }

.list-item--thumb .list-item__info {
  top: 0;
  left: 0;
  padding-right: 0;
  overflow: hidden; }

.list-item--thumb .list-item__name {
  max-height: 2.3em;
  color: #757575;
  text-align: center; }

.list-item--large li,
.list-item--thumb .list-item__name,
.product-grid__item .category-link {
  font-size: 0.813rem; }

/*List item*/
@media only screen and (min-width: 48em) {
  .list-item img {
    padding: 0 1.125rem;
    max-width: 100%;
    height: 250px; } }

.list-item .radios--color {
  position: absolute;
  top: 300px;
  left: 0;
  right: 0; }

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

.radios--color li {
  display: inline-block; }

.list-item .radios--color li {
  float: none; }

.radios--color label {
  display: inline-block;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  width: 21px;
  height: 21px;
  padding: 0;
  margin-right: 2px;
  background: #fff;
  border: 1px solid #fff;
  text-align: center;
  cursor: pointer; }

.radios--color input[type=radio] {
  position: absolute !important;
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

.radios--color label:before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  position: static;
  padding: 0;
  line-height: 13px;
  -webkit-transition: font-size .2s ease-out;
  transition: font-size .2s ease-out;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3); }

@media only screen and (min-width: 37.5em) {
  .radios--color label {
    margin-right: 0; } }

@media only screen and (min-width: 48em) {
  .radios--color label {
    margin-right: 5px; } }

.radios--color label.radio-color__white:before {
  background: #fff; }

.radios--color label.radio-color__blue:before {
  background: #00b9f4; }

.radios--color label.radio-color__green:before {
  background: #5bf466; }

.radios--color label.radio-color__yellow:before {
  background: #f5e95d; }

.radios--color label.radio-color__red:before {
  background: #f5626e; }

.list-item--normal .list-item__name {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 200px; }

.list-item__price {
  margin: 0 0 0.938rem; }

.list-item__splash {
  background: #fff;
  color: #038cd6;
  border: 4px solid #038cd6;
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 5.625em;
  height: 5.625em; }

.list-item__splash--green {
  border-color: #43c682;
  color: #43c682; }

.list-item__splash.topleft {
  position: absolute;
  top: 60px;
  right: 60%; }

.list-item__splash div + div {
  margin-top: 5px; }

.list-item__splash.topright {
  position: absolute;
  top: 60px;
  left: 60%; }

.list-item__splash--flat {
  padding: 0.625rem 1.25rem;
  border-radius: 0;
  border-width: 4px 0 0;
  height: auto;
  width: 130px; }

.list-item__splash--flat.topright {
  left: 40%; }

.list-item__splash--small {
  font-family: "telenor", sans-serif;
  font-weight: bold;
  width: 61px;
  height: 61px;
  border-width: 4px; }

.list-item__splash.bottomleft {
  position: absolute;
  top: 230px;
  right: 60%; }

.list-item__status {
  margin: 0.625rem 0;
  color: #757575;
  position: absolute;
  left: 20px;
  bottom: 120px; }

.list-item .form-checkbox {
  text-align: center;
  position: absolute;
  top: 7px;
  left: 0;
  margin-bottom: 0.625rem; }

.list-item .form-checkbox label {
  padding-top: 0.375rem; }

.list-item .list-item__note {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0; }

.list-item__note {
  font-size: 0.688rem;
  line-height: 0.938rem;
  color: #757575;
  padding: 0.625rem 1.25rem;
  background: #f0f0f0; }

.list-item__status {
  font-size: 0.688rem;
  line-height: 1; }

/*List item with product details Large*/
.list-item--large {
  padding-top: 0.625rem;
  overflow: hidden; }

@media only screen and (min-width: 37.5em) {
  .list-item--large {
    padding-top: 0.938rem; } }

.list-item--large .list-item__inner-wrapper {
  padding: 0; }

.list-item--large .list-item__inner-wrapper .form-item label, .list-item--large .list-item__inner-wrapper .form-search label {
  margin-top: 0; }

.list-item--large .form-checkbox {
  margin-bottom: 0.625rem;
  position: relative;
  top: 0;
  left: auto;
  text-align: center; }

@media only screen and (min-width: 37.5em) {
  .list-item--large .form-checkbox {
    position: absolute;
    top: 7px;
    right: 0;
    text-align: left;
    margin: 0; } }

.list-item--large .form-checkbox + div {
  position: relative; }

.list-item--large .rating--stars {
  margin: 0.625rem 0 0 0; }

.list-item--large img {
  margin: 0 auto;
  height: auto;
  max-height: 450px; }

@media only screen and (min-width: 37.5em) {
  .list-item--large img {
    position: absolute;
    right: 6%;
    top: 0;
    width: auto;
    max-width: none;
    max-height: 628px;
    padding: 0; } }

.list-item--large .omega {
  padding: 0; }

.list-item--large .form-checkbox + div + div {
  padding-right: 1.25rem;
  padding-top: 1.563rem; }

.list-item--large li {
  line-height: 1rem;
  color: #757575; }

.list-item--large .radios--color {
  margin: 0.625rem 0 0 0; }

.list-item--large .radios--color {
  position: absolute;
  top: 320px;
  left: auto;
  right: auto;
  text-align: left;
  margin-left: -4px; }

.list-item--large .list-item__name {
  margin: 0 0 1.25rem 0;
  line-height: 1.1; }

.list-item--large [class*="list--check"] {
  margin-bottom: 5px !important;
  display: inline-block;
  clear: both; }

@media only screen and (min-width: 37.5em) {
  .list-item--large__call-to-action {
    position: absolute;
    left: 50%;
    bottom: 85px; } }

.list-item--large .list-item__price {
  margin: 0.313rem 0 0.625rem 0;
  font-family: "telenorlight", sans-serif;
  font-weight: normal; }

@media only screen and (min-width: 37.5em) {
  .list-item--large .list-item__status {
    position: relative;
    bottom: auto;
    left: auto; } }

.list-item--large .list-item__status {
  margin-bottom: 0.875rem; }

.list-item--large [class*="button"] {
  margin: 0 0 1.25rem 0;
  position: relative;
  left: auto;
  bottom: auto; }

@media only screen and (min-width: 37.5em) {
  .list-item--large [class*="button"] {
    margin: 0; } }

.list-item--large .list-item__note {
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  width: 50%;
  padding-left: 0;
  margin: 0;
  padding-top: 0;
  background: #fff; }

.list-item--large .list-item__note span:first-child {
  padding-top: 0.625rem;
  border-top: 1px solid #e8e8e8; }

.list-item--large .list-item__note span {
  display: block; }

/*List item splashes*/
.list-item__splash--yellow {
  border-color: #ffb900;
  color: #ffb900; }

.list-item__splash--red {
  border-color: #db5451;
  color: #db5451; }

.list-item__splash--purple {
  border-color: #6b2377;
  color: #6b2377; }

.list-item__splash--smal {
  font-size: 1.5rem; }

/*Rating stars*/
.rating__stars + .rating__text {
  display: block;
  font-family: "telenor", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1; }

.rating__stars--small + .rating__text {
  font-family: "telenor", sans-serif;
  font-weight: normal;
  font-size: 0.813rem;
  line-height: .9375rem; }

/*new splash*/
.item__splash {
  /*position: absolute;*/
  /* left: -40px;*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #43c682;
  color: #fff;
  box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 3;
  overflow: hidden; }

@media only screen and (max-width: 900px) {
  .item__splash {
    left: -20px; } }

@media only screen and (max-width: 768px) {
  .item__splash {
    left: -10px; } }

.item__splash:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
  margin-left: -5px; }

.item__splash .load-tester {
  display: none;
  vertical-align: middle;
  height: 5px; }

.item__splash--top-left {
  top: -15px; }

.item__splash--center-left {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.item__splash--bottom-left {
  bottom: -15px; }

.item__splash--bottom-right {
  bottom: -15px;
  left: auto;
  right: -40px; }

.item__splash--top-right {
  top: -15px;
  left: auto;
  right: -40px; }

@media only screen and (max-width: 900px) {
  .item__splash--top-right {
    right: -20px; } }

@media only screen and (max-width: 768px) {
  .item__splash--top-right {
    right: -10px; } }

.item__splash--center-right {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: auto;
  right: -40px; }

@media only screen and (max-width: 900px) {
  .item__splash--center-right {
    right: -20px; } }

@media only screen and (max-width: 768px) {
  .item__splash--center-right {
    right: -10px; } }

@media only screen and (max-width: 900px) {
  .item__splash--bottom-right {
    right: -20px; } }

@media only screen and (max-width: 768px) {
  .item__splash--bottom-right {
    right: -10px; } }

.item__splash-text {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  text-transform: uppercase; }

.item__splash-text img {
  max-width: 100%;
  height: auto; }

.is-loading .item__splash-text {
  display: none; }

.item__splash--blue {
  background: #038cd6; }

.item__splash--yellow {
  background: #ffb900;
  color: #474747; }

.item__splash--red {
  background: #db5451; }

.item__splash--purple {
  background: #6b2377; }

/*xianwang xin mokuai */
/*product list*/
.product-item {
  border: 1px solid #d1d1d1;
  border-left: none;
  margin-top: -1px; }

.product-item__image-wrapper {
  text-align: center;
  position: relative; }

.product-item__image-holder {
  height: 265px;
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  padding: 0 20px 10px; }

.product-item__image-holder:before {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  height: 100%;
  width: 0;
  margin-right: -4px; }

@media only screen and (max-width: 768px) {
  .product-item__image-holder {
    height: auto; } }

.product-item__image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  margin: 0;
  transition: margin 250ms ease; }

.product-item:hover .product-item__image-wrapper img {
  margin: -5px 0 5px; }

.product-item__holder {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%; }

@media only screen and (max-width: 768px) {
  .product-item__image-wrapper {
    float: left;
    width: 50%; }
  .product-item__holder {
    display: block; } }

/*select color*/
.color-selector {
  text-align: center;
  letter-spacing: -3px;
  padding: 0 10px; }

.color-selector li {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  margin: 4px 5px 19px; }

.color-selector [type=radio] {
  display: none; }

.color-selector label:focus {
  outline: none; }

.color-selector label {
  display: block;
  text-indent: -9999px;
  font-size: 0;
  line-height: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3); }

.color-selector label:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  left: -5px;
  top: -5px;
  border: 1px solid transparent; }

.color-selector [type=radio]:checked + label:before {
  border-color: #d1d1d1; }

/*product list info*/
.product-item__info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  padding: 5px 20px;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto; }

@media only screen and (max-width: 768px) {
  .product-item__info {
    float: left;
    width: 50%;
    padding: 0 10px 5px; } }

.product-item__info-holder {
  word-wrap: break-word;
  width: 100%; }

.product-item__name {
  line-height: 21px; }

.product-item__price {
  letter-spacing: -2px; }

/*status dot*/
.status-dot .status-dot__icon {
  content: '';
  width: 9px;
  height: 9px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  background: #d1d1d1; }

.status-dot--small .status-dot__icon {
  width: 6px;
  height: 6px; }

/*product description*/
.product-item__description {
  min-height: 55px; }

/*
.text--telenor {
    font-family:"telenor", sans-serif;
    font-weight:normal
}
.text--telenor-bold {
    font-family:"telenor", sans-serif;
    font-weight:bold
}
.text--telenor-light {
    font-family:"telenorlight", sans-serif;
    font-weight:normal
}
.text--telenor-light strong {
    font-family:"telenor", sans-serif;
    font-weight:bold
}
.text--xxxlarge {
    font-size:12rem;
    line-height:1
}
strong.text {
    font-family:"telenor", sans-serif;
    font-weight:bold
}
.text--xxlarge {
    font-size:5.25rem;
    line-height:1
}
.text--uppercase {
    text-transform:uppercase
}
*/
.download-drop {
  position: relative;
  padding: 0;
  vertical-align: top; }

.download-drop .drop {
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  min-width: 145px;
  margin-top: 8px;
  text-align: left;
  background-color: #fff;
  color: #474747;
  border: 1px solid #d1d1d1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

.download-drop .drop:after, .download-drop .drop:before {
  width: 0;
  height: 0;
  content: "";
  position: absolute; }

.download-drop .drop:before {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #d1d1d1;
  top: -8px; }

.download-drop .drop:after {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  top: -7px; }

.no-cssgradients .download-drop .drop:after {
  border-bottom-color: #e8e8e8; }

.download-drop .drop:after, .download-drop .drop:before {
  left: auto;
  right: 10px;
  margin: 0; }

.download-drop .drop:before {
  margin-right: -2px;
  border-width: 0 9px 8px; }

.download-drop .drop a, .download-drop .drop button[type=submit] {
  display: block;
  padding: 10px;
  position: relative;
  background: 0 0;
  width: 100%;
  text-align: left;
  border: 0; }

.download-drop .drop a:after, .download-drop .drop button[type=submit]:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #038cd6;
  transition: width .15s ease-in-out; }

.download-drop .drop a:hover, .download-drop .drop button[type=submit]:hover {
  background-color: #f5f5f5; }

.download-drop .drop a:hover:after, .download-drop .drop button[type=submit]:hover:after {
  width: 3px; }

.download-drop .drop a.icon-acrobat:before, .download-drop .drop a.icon-excel:before, .download-drop .drop button[type=submit].icon-acrobat:before, .download-drop .drop button[type=submit].icon-excel:before {
  font-size: 17px;
  margin: 0 4px 0 0;
  color: #007534;
  float: left; }

.download-drop .drop a.icon-acrobat:before, .download-drop .drop button[type=submit].icon-acrobat:before {
  color: #ff4b36; }

.download-drop ul li {
  border-top: 1px solid #d1d1d1;
  overflow: hidden;
  white-space: nowrap; }

.download-drop ul li:first-child {
  border: 0; }

@media only screen and (max-width: 768px) {
  .download-drop .button, .download-drop .form-checkbox--filter label, .form-checkbox--filter .download-drop label, .download-drop .form-checkbox--filter label, .download-drop .paging_simple_numbers a.loadmore, .form-checkbox--filter .download-drop label, .paging_simple_numbers .download-drop a.loadmore {
    padding-left: 10px;
    padding-right: 10px; } }

.download-drop.is-open {
  display: inline-block; }

.attachment-add label {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 1px solid #e8e8e8;
  background-color: #f5f5f5;
  position: relative;
  cursor: pointer; }

.attachment-add label:before {
  content: "\E006";
  color: #666;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.stepsline-list {
  position: relative;
  padding-left: 60px; }

@media only screen and (min-width: 1024px) {
  .stepsline-list {
    margin-right: 50px; } }

.stepsline-list:before {
  background: #038cd6;
  content: "";
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px; }

.stepsline-list.withgradient:before {
  background-image: linear-gradient(180deg, #8cc63f, #00b9de, #038cd6); }

.stepsline-list .stepsline-item .stepsline-title {
  position: relative;
  padding-right: 15px; }

.stepsline-list .stepsline-item .stepsline-title .step-icon {
  position: absolute;
  top: 0;
  left: -66px;
  width: 58px;
  background: #fff;
  padding: 5px; }

.stepsline-list .stepsline-item .stepsline-title .step-icon span {
  display: block;
  font-size: 16px;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #038cd6;
  text-align: center; }

.stepsline-list .stepsline-item .stepsline-content .leader--large {
  margin-top: 12px; }

.stepsline-list .stepsline-item .guide-image {
  margin: 20px 0 32px; }

.stepsline-list .stepsline-item .guide-image img {
  max-width: 100%;
  height: auto;
  max-height: 450px; }

.stepsline-list .stepsline-item h2 {
  font-size: 24px;
  line-height: 24px; }

.stepsline-list .stepsline-item.laststep {
  margin-bottom: 5px; }

.stepsline-list .stepsline-item.laststep:after {
  background: #038cd6;
  content: "";
  width: 25px;
  position: relative;
  left: -53px;
  bottom: 0;
  height: 3px; }

.stepsline-list .stepsline-item.laststep .guide-image {
  margin-bottom: 10px; }

/**
name: menu
type: ui
desc: Just use wrapper with classname 'menu-wrapper' menu generating

elements:
  - section--menu: mobile-hidden
  - section--subnav: mobile-hidden
  - nav-mobile: desktop-hidden
*/
.menu-wrapper {
  background: #038cd6; }

.menu-subnav-sticky-wrapper {
  height: 50px; }

.side-panel {
  background: #038cd6;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: -270px;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 270px;
  z-index: 801;
  transition: transform .3s ease-out; }

.section--menu {
  position: relative;
  z-index: 500;
  padding-top: 25px;
  /*& .link--logo {
      height: 75px;
      line-eight: 75px;
      margin-right: 80px;
      background: url(../img/logo--negative-2x.png) no-repeat left center;
      background-size: 105px auto;
      width: 106px
    }
    & .link--text {
      position: absolute!important;
      overflow: hidden;
      height: 1px;
      width: 1px;
      padding: 0;
      border: 0;
      clip: rect(1px,1px,1px,1px);
    }
    &__service{
      line-height: 26px;
      color: #c0e2f5;
      text-align: right;
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      & [class*=menu--] {
        margin-left: 18px;
        display: inline-block;
        vertical-align: top;
        &>a{
          margin-left: 20px;
          padding-top: 4px;
          font-size: 13px;
          color: #c0e2f5;
          &:hover,
          &.active-trail{
            padding-top: 1px;
            border-top: 3px solid #fff;
            color: #fff;
          }
        }
      }
    }*/ }

.section--subnav {
  z-index: 500;
  min-height: 50px;
  background-color: rgba(0, 0, 0, 0.12);
  /*& .link--logo{
      display: none
    }*/ }
  .section--stick .section--subnav {
    position: fixed;
    top: 0;
    z-index: 600;
    width: 100%;
    background-color: #0278b8; }
  .section--subnav .container {
    position: relative; }

.section--sticky {
  /*& .link--logo{
      display: block;
      line-height: 75px;
      position: absolute;
      top: 0;
      left: -55px;
      width: 32px;
      height: 100%;
      background: url(../img/logo-small-negative-2x.png) no-repeat left center;
      background-size: 32px auto;
      -webkit-animation: logo_slidedown .3s ease-out 0s;
      animation: logo_slidedown .3s ease-out 0s;
    }*/ }
  .section--sticky .section--subnav {
    position: fixed;
    top: 0;
    z-index: 600;
    width: 100%;
    background-color: #0278b8; }

/*link logo animation*/
/*@keyframes logo_slidedown {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@-webkit-keyframes menu_slidedown {
  0%,50% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}*/
[class*=" menu--"] a, [class^=menu--] a {
  display: inline-block;
  transition: color .2s ease-out; }

[class*=" menu--"] > *, [class^=menu--] > * {
  float: left; }

.menu {
  /*&--user{
    &:before{
      content: '';
      height: 15px;
      width: 1px;
      display: inline-block;
      float: left;
      top: .55rem;
      position: relative;
      background: #4da6d8;
    }
  }*/
  /*&--right{
    z-index: 200;
    position: relative;
    top: 25px;
    &>*{
      margin-left: 16px;
      float: right;
      &>a{
        font-size: 20px;
        color: #fff;
      }
    }
  }*/ }
  .menu--main a {
    font-size: 17px;
    line-height: 75px;
    padding: 0 12px;
    color: #fff; }
    .menu--main a:hover {
      text-decoration: none; }
      .menu--main a:hover:after, .menu--main a:hover.active-trail:after {
        opacity: 1;
        transition: opacity .25s,-webkit-transform .25s;
        transition: opacity .25s,transform .25s;
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px); }
    .menu--main a:after {
      content: '';
      height: 2px;
      margin: 0 auto;
      display: block;
      position: relative;
      background: #b8d5e5;
      opacity: 0;
      transition: opacity .25s,-webkit-transform .25s;
      transition: opacity .25s,transform .25s;
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px); }
  .menu--main > li:first-child a {
    padding-left: 0; }
  .menu--subnav {
    height: 50px;
    overflow: hidden; }
    .menu--subnav a {
      line-height: 50px;
      padding-right: 10px;
      color: #b8d5e5; }
      .menu--subnav a.active-trail, .menu--subnav a:focus, .menu--subnav a:hover {
        color: #fff;
        text-decoration: none; }
    .menu--subnav li {
      margin-right: 20px; }
    .menu--subnav .flexnav {
      float: left;
      position: relative;
      height: inherit;
      padding: 0 20px;
      background: inherit;
      background-color: #005c96;
      background-image: linear-gradient(180deg, #005c96, #005285);
      border: 1px solid #005285;
      border-width: 0 1px; }
      .menu--subnav .flexnav__toggler {
        background: 0 0;
        position: relative;
        cursor: pointer;
        padding-right: 20px; }
        .menu--subnav .flexnav__toggler:after {
          content: "\E00A";
          color: inherit;
          line-height: 1;
          position: absolute;
          top: 20px;
          right: 15px;
          font-size: 10px; }
      .menu--subnav .flexnav__subnav {
        display: none;
        min-width: 200px;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.23);
        transition: all .3s ease-out .1s;
        position: absolute;
        z-index: 500;
        right: -1px;
        top: 100%;
        background: #005c96;
        border: 1px solid #004773; }
        .menu--subnav .flexnav__subnav a {
          display: block; }
        .menu--subnav .flexnav__subnav li {
          float: none;
          border-top: 1px solid #d1d1d1; }
      .menu--subnav .flexnav.is-open a {
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-wrap: normal; }
      .menu--subnav .flexnav.is-open .flexnav__subnav {
        display: block; }
      .menu--subnav .flexnav.is-open .flexnav__toggler:after {
        content: "\E00F"; }
      .menu--subnav .flexnav li {
        border-top: 1px solid #004773; }
        .menu--subnav .flexnav li:first-child {
          border-top: none; }
  .menu--flexnav .flexnav {
    padding-right: 20px; }
    .menu--flexnav .flexnav__toggler:after {
      right: 0; }
    .menu--flexnav .flexnav li {
      margin: 0;
      background-color: inherit;
      color: inherit; }
      .menu--flexnav .flexnav li a {
        padding: 3px 20px; }
  .menu--flexnav.flexnav--active {
    overflow: visible; }

.nav-mobile {
  min-height: 100px;
  position: relative;
  /*&__frame {
    height: 100%;
    & .icon-basket:before {
      @include until($bp-medium) {
        content:"";
        background: url(../img/temp_basket_icon.png) no-repeat;
        background-size: 35px auto;
        height: 26px;
        width: 35px;
      }
    }
    & .icon-basket{
      @include until($bp-medium) {
        margin-left: 5px;
        padding-top: 5px;
      }
    }
    & .icon-user{
      @include until($bp-medium) {
        padding-bottom: 5px;
      }
    }
  }*/
  /*&__search{
    background: #fff;
    height: 55px;
    &__button,
    &__text{
      border: 0;
      background-color: #fff;
      color: #b8b8b8;
      height: 100%;
    }
    &__button{
      float: right;
      font-size: 16px;
      line-height: 20px;
      padding: 11px 10px 12px;
      width: 20%;
      &:before{
        @include until($bp-medium) {
          font-size:18px
        }
      }
    }
    &__text {
      float: left;
      line-height: 3.125rem;
      outline: 0;
      padding: 10px 15px;
      width: 80%;
      &::-webkit-input-placeholder {
        color: #b8b8b8;
      }
      &::-moz-placeholder {
        color: #b8b8b8
      }
      &:-moz-placeholder {
        color: #b8b8b8
      }
      &:-ms-input-placeholder {
        color: #b8b8b8
      }
    }
  }*/ }
  @media only screen and (max-width: 768px) {
    .nav-mobile {
      min-height: 55px; } }
  .nav-mobile__container {
    background: #038cd6;
    min-height: 100px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 801;
    /*& .logo {
      background: url(../img/logo--negative-2x.png) no-repeat;
      background-size: 85px 37px;
      float: left;
      height: 37px;
      margin-top: 31.5px;
      width: 85px;
      @include until($bp-medium) {
        margin-top: 9px;
      }
      & span{
        position: absolute!important;
        overflow: hidden;
        height: 1px;
        width: 1px;
        padding: 0;
        border: 0;
        clip: rect(1px,1px,1px,1px);
      }
    }*/ }
    @media only screen and (max-width: 768px) {
      .nav-mobile__container {
        min-height: 55px;
        padding: 0 10px; } }
    .menu-wrapper-business .nav-mobile__container {
      background: #02508d; }
    .nav-mobile__container > ul {
      float: right;
      height: 100%;
      text-align: center;
      white-space: nowrap;
      padding: 13px 0 0; }
      .nav-mobile__container > ul:after {
        display: inline-block;
        vertical-align: middle;
        content: '';
        height: 100%;
        width: 1px; }
      .nav-mobile__container > ul > li {
        display: inline-block;
        margin-left: 16px;
        vertical-align: middle;
        white-space: normal; }
        .nav-mobile__container > ul > li > a {
          color: #fff;
          display: inline-block;
          position: relative;
          vertical-align: top; }
          .nav-mobile__container > ul > li > a span {
            display: inline-block;
            vertical-align: middle; }
      .nav-mobile__container > ul .basket-link {
        padding-right: 10px; }
      .nav-mobile__container > ul .icon {
        font-size: 27px; }
  .nav-mobile__tabset {
    display: table;
    table-layout: fixed;
    width: 100%; }
    .nav-mobile__tabset .tabpanel__tab {
      display: table-cell;
      font-size: inherit;
      line-height: 55px;
      float: none; }
      .nav-mobile__tabset .tabpanel__tab a {
        background: #0278b8;
        color: rgba(255, 255, 255, 0.5);
        display: block;
        position: relative;
        text-align: center;
        border: none;
        border-radius: 0;
        line-height: 55px;
        height: auto;
        padding: 0; }
      .nav-mobile__tabset .tabpanel__tab.is-active a {
        background: 0 0;
        color: #fff; }
  .nav-mobile__accordion li {
    position: relative;
    color: #fff;
    line-height: 55px; }
    .nav-mobile__accordion li a {
      color: #fff;
      display: block;
      height: 100%;
      position: relative;
      z-index: 1;
      padding: 0 15px; }
    .nav-mobile__accordion li span {
      height: 55px;
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      font-size: 14px;
      width: 55px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      cursor: pointer;
      opacity: .6;
      z-index: 2; }
      .nav-mobile__accordion li span:before {
        margin: auto; }
      .nav-mobile__accordion li span.is-expanded:before {
        transform: rotate(90deg); }
    .nav-mobile__accordion li.is-active .nav-mobile__accordion li__drop {
      max-height: 100em; }
  .nav-mobile__accordion > li > a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.2em; }
  .nav-mobile__accordion__drop {
    background-color: #0278b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: max-height .3s ease-out; }
    .nav-mobile__accordion__drop li {
      line-height: 45px; }
      .nav-mobile__accordion__drop li:first-child {
        padding-top: 5px; }
      .nav-mobile__accordion__drop li:last-child {
        padding-bottom: 5px; }
    .nav-mobile__accordion__drop a:hover {
      opacity: .5; }

.offcanvas--open {
  overflow-y: hidden; }

.offcanvas--open #footer,
.offcanvas--open #main,
.offcanvas--open .nav-mobile__container,
.offcanvas--open .section--menu,
.offcanvas--open .side-panel {
  -webkit-transform: translateX(-270px);
  transform: translateX(-270px); }

.offcanvas .section--oncanvas:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .5s;
  visibility: hidden;
  z-index: 800; }

.offcanvas .section--oncanvas.is-disabled:after {
  position: fixed;
  top: 0;
  right: 270px;
  left: 0;
  opacity: 1;
  -moz-user-select: none;
  user-select: none;
  visibility: visible; }

/*molecule-shop  List item category*/
.category-list a:hover .icon:before {
  z-index: 2;
  transition: color 250ms ease-in;
  color: #fff; }

.category-list a:hover .icon:after {
  z-index: 1;
  transition: background 250ms ease-in;
  border-color: #038cd6;
  background-color: #038cd6; }