:root {
  /* primary colors */
  --color-forest: #064349;
  --color-sun: #F66841;
  --color-sun-hover: #d35938; 
  --color-flux: #4DF0B4;
  --color-cloud: #fff;

  /* secondary colors */
  --color-sky: #CCDCDE;
  --color-rock: #DFCEC8;
  --color-gras: #D7ECDC;
  --color-darkforest: #003339;

  /* alert colors */
  --color-darkflux: #2EA484;
  --color-status-ok: var(--color-darkflux);
  --color-blaze: #D70041;
  --color-status-error: var(--color-blaze);
  --color-status-error-hover: #ff5e8e; /*custom color, not in styleguide but neccessary */
  --color-status-warning: #FCD039;
  
  /* gray shades */
  --color-grayshade-1: #EBEFEF;
  --color-grayshade-2: #D9E1E1;
  --color-grayshade-3: #7f999c;
  --color-grayshade-4: #597A7E;
  

  --color-cardBorder: var(--color-grayshade-2);
  --lwc-cardColorBorder: var(--color-cardBorder);
  /* used in pro lead detail page flows in boxes Verteilnetzbereiber
     and Komplettschutz activation */
  --lwc-colorBorder: var(--color-cardBorder);

  /* hover is rgba(0,0,0,0.14) */

  /* breakpoints */
  /* uhh breakpons desn't work in media queries. very bad. some say env works */
  --break-s: 768px;
  --break-m: 1024px;
  --break-l: 1260px;
  --break-xl: 1680px;
  
  --lwc-inputStaticFontSize: 16px;
  --lwc-inputStaticColor: var(--color-forest);
  --brandNavigationBarBackgroundColor: transparent;
  --lwc-brandNavigationBarBackgroundColor: transparent;
  --lwc-navigationBarItemBackgroundColorHover: transparent;
  --lwc-progressBarColorBackground: var(--color-grayshade-1); 
  --lwc-progressBarColorBackgroundFill: var(--color-forest); 
  --lwc-zIndexSpinner: 10;

}

body {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-forest);
  background-color: #fff;
  font-family: "Averta";
}

@media (min-width: 1024px) { 
  .body {
    font-size: 18px;
    line-height: 28px;
    --lwc-inputStaticFontSize: 18px;
  }
} 


h1,
h1 .slds-rich-text-editor__textarea, 
h1 .slds-rich-text-editor__output {
  font-size: 30px;
  line-height: 36px;
  font-weight: bold;
  text-align: center;
  --lwc-lineHeightText: 36px;
  page-break-inside: avoid;
}

@media (min-width: 768px) {   
  h1,
  h1 .slds-rich-text-editor__textarea, 
  h1 .slds-rich-text-editor__output {
    font-size: 36px;
    line-height: 44px;
    text-align: left;
    --lwc-lineHeightText: 44px;
  }
}

@media (min-width: 1024px) {   
  h1, 
  h1 .slds-rich-text-editor__textarea, 
  h1 .slds-rich-text-editor__output {

    font-size: 44px;
    line-height: 53px;
    --lwc-lineHeightText: 53px;
  }
}

@media (min-width: 1260px) {   
  h1,
  h1 .slds-rich-text-editor__textarea, 
  h1 .slds-rich-text-editor__output {
    font-size: 58px;
    line-height: 68px;
    --lwc-lineHeightText: 68px;
  }
}

h2,  
h2 .slds-rich-text-editor__textarea, 
h2 .slds-rich-text-editor__output {
  font-size: 26px;
  line-height: 34px;
  font-weight: bold;
  text-align: center;
  --lwc-lineHeightText: 34px;
  page-break-inside: avoid;
}

@media (min-width: 1024px) {   
  h2,
  h2 .slds-rich-text-editor__textarea, 
  h2 .slds-rich-text-editor__output {
    font-size: 32px;
    line-height: 41px;
    text-align: left;
    --lwc-lineHeightText: 41px;
  }
}

@media (min-width: 1260px) {   
  h2,
  h2 .slds-rich-text-editor__textarea, 
  h2 .slds-rich-text-editor__output {
    font-size: 38px;
    line-height: 48px;
    --lwc-lineHeightText: 48px;
  }
}

h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  text-align: left;
  page-break-inside: avoid;

}

@media (min-width: 1024px) {   
  h3 {
    font-size: 23px;
    line-height: 33px;
    text-align: left; /*screendesign says center, but layout consistency says left */
  }
}

@media (min-width: 1260px) {   
   h3 {
    font-size: 26px;
    line-height: 34px;
  }
}

 h4 {
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  page-break-inside: avoid;

} 

@media (min-width: 1260px) {   
  h4 {
    font-size: 24px;
    line-height: 32px;
  }
}

.swTextSmall {
  font-size: 16px;
  line-height: 24px;
} 

@media (min-width: 768px) {   
  .swTextSmall {
    font-size: 14px;
    line-height: 22px;
  }
}

@media (min-width: 1260px) {   
  .swTextXSmall {
    font-size: 16px;
    line-height: 26px;
  }
}

.swTextXSmall {
  font-size: 14px;
  line-height: 22px;
} 

@media (min-width: 1024px) {   
  .swTextXSmall {
    font-size: 14px;
  line-height: 22px;
  }
}

a {
  color: var(--color-forest);
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
}

a:hover,
a:focus {
  text-decoration: none;
  color: var(--color-forest);
}

a:before,
a:after {
  position: absolute;
  display: block;
  content: "";
  height: 1px;
  bottom: 1px;
  background-color: var(--color-forest);
}

a:before {
  left: 0;
  width: 0;
  transition: width 300ms linear 250ms;
}

a:after {
  right: 0;
  width: 100%;
  transition: width 300ms linear;
}

a:hover:before {
  width: 100%
}
a:hover:after {
  width: 0;
}

a.swLinkFade:before {
  content: none;
}

a.swLinkFade:after {
  transition: opacity 300ms linear 250ms;
  width: 100%;
  opacity: 0;
}

a.swLinkFade:hover:after {
  width: 100%;
  opacity: 1;
}

/* sometimes links won't like to have the underline. so attach .swNoLine to the link or above */
.swNoLine a:hover:before,
.swNoLine a:hover:after,
.swNoLine a:focus:before,
.swNoLine a:focus:after,
.swNoLine a:before,
.swNoLine a:after,
a.swNoLine:hover:before,
a.swNoLine:hover:after,
a.swNoLine:focus:before,
a.swNoLine:focus:after,
a.swNoLine:before,
a.swNoLine:after {
  content: none;
}

.swNoLineBefore a:focus:before,
.swNoLineBefore a:hover:before,
.swNoLineBefore a:before,
a.swNoLineBefore:focus:before,
a.swNoLineBefore:hover:before,
a.swNoLineBefore:before {
  content: none;
}

.swNoLineAfter a:hover:after,
.swNoLineAfter a:focus:after,
.swNoLineAfter a:after, 
a.swNoLineAfter:hover:after,
a.swNoLineAfter:focus:after,
a.swNoLineAfter:after {
  content: none;
}


/* like the default underline, but for inline multiline links
perhaps that should be the new default
*/
a.swMultiLine {
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor),linear-gradient(currentColor, currentColor);
  background-position: 0% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: 0% 1px, 100% 1px;
}

a.swMultiLine:hover, 
a.swMultiLine:focus {
  animation-duration: 0.6s;
  animation-name: linkUnderline;
  animation-timing-function: linear;
}

@keyframes linkUnderline {
  from {
    background-size: 0% 1px, 100% 1px;
  } 
  
  40% {
    background-size: 0% 1px, 33.3% 1px;
  }

  60% {
    background-size: 33.3% 1px, 0% 1px;
  }
  to {
    background-size: 100% 1px, 0% 1px;
  }
}



/* for the french Fiche Chantier to set custom PageBreaks */
.pageBreakInsideAvoid {
  page-break-after: avoid;
}
.pageBreakBeforeAlways {
  page-break-before: always;
}


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

/* 
Base Design Library Legacy 
based on base.css



#################################### 

CSS Variables

#################################### 
*/
:root {
  /* Primary Colors */
  --color_forest: #064349;
  --color_sun: #F66841;
  --color_flux: #4DF0B4;
  --color_cloud: #FFFFFF;

  /* Secondary Colors */
  --color_grass: #D7ECDC;
  --color_sky: #CCDCDE;
  --color_rock: #DFCEC8;
  --color_dark-forest: #003339;

  /* Alert Colors */
  --color_blaze: #D70041;
  --color_alert: #FCD039;
  --color_dark-flux: #2EA484;

  /*  Special Applications Colors */
  --color_gold: #AB974C;
  --color_flow: #00AFFF;
  
  /* Grey Shades (Solid) */
  --color_grayshade-1: #EBEFEF;
  --color_grayshade-2: #D9E1E1;
  --color_grayshade-3: #7F999C;
  --color_grayshade-4: #597A7E;

  /* Grey Shades (Alpha) */
  --color_grayshade-1-alpha: rgba(0, 51, 57, 0.08);
  --color_grayshade-2-alpha: rgba(0, 51, 57, 0.15);
  --color_grayshade-3-alpha: rgba(0, 51, 57, 0.5);
  --color_grayshade-4-alpha: rgba(0, 51, 57, 0.65);

  /* 14% darker colors */
  /* ONLY FOR BUTTONS HOVER */
  --color_sun_hover: #d85a38;
  --color_flux_hover: #43d39e;
  
  /* other alpha values for specific uses */
  --color_forest_alpha50: rgba(6, 67, 73, 0.5); /* used at libProgressBar */

  /* True Black */
  --color_black: #000000;


  /* Breakpints */
  --screen_xs-min: 320px; /* Iphone SE */
  --screen_xs-max: 767px;

  --screen_sm-min: 768px;
  --screen_sm-max: 1023px;
  
  --screen_md-min: 1024px;
  --screen_md-max: 1259px;
  
  --screen_lg-min: 1260px;
  --screen_lg-max: 1679px;

  --screen_xlg-min: 1920px;
  --screen_xlg-max: 2600px;

  /* 
    Breakpoints Easy Summary
    It consideres Mobile First approach
    @media (min-width: )
  */
  --tablet: var(--screen_sm-min);
  --desktop: var(--screen_md-min);
  --desktop_xl: var(--screen_lg-min);
  --desktop_xxl: var(--screen_xlg-min);
  /* same as 3m5 naming */
  --medium: var(--tablet);
  --large: var(--desktop);
  --xlarge: var(--desktop_xl);
  --xxlarge: var(--desktop_xxl);

  /* Grid Spacing */
  --spacing_base: 10px;
  --gutter: 10px;
  --gutter_x2: 20px;
  --pageSidePadding: 40px;

  /* Oficial Spacing */
  --spacing-xxxs: 4px;
  --spacing-xxs: 8px;
  --spacing-xs: 12px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-xxxl: 112px;

  /* Helpers Spacing */
  --spacing-0-5: 4px;
  --spacing-1-0: 8px;
  --spacing-1-5: 12px;
  --spacing-2-0: 16px;
  --spacing-2-5: 20px;
  --spacing-3-0: 24px;
  --spacing-3-5: 28px;
  --spacing-4-0: 32px;
  --spacing-4-5: 36px;
  --spacing-5-0: 40px;
  --spacing-5-5: 44px;
  --spacing-6-0: 48px;
  --spacing-6-5: 52px;
  --spacing-7-0: 56px;
  --spacing-7-5: 60px;
  --spacing-8-0: 64px;
  --spacing-8-5: 68px;
  --spacing-9-0: 72px;
  --spacing-9-5: 76px;
  --spacing-10-0: 80px;
  --spacing-10-5: 84px;
  --spacing-11-0: 88px;
  --spacing-11-5: 92px;
  --spacing-12-0: 96px;
  --spacing-12-5: 100px;
  --spacing-13-0: 104px;
  --spacing-13-5: 108px;
  --spacing-14-0: 112px;
  --spacing-14-5: 116px;
  --spacing-15-0: 120px;
  --spacing-15-5: 124px;
}


/* 
#################################### 

Colors Decorators

#################################### 
*/ 

/* Backgrounds */
.colorBackground--forest {
  background-color: var(--color_forest);
}
.colorBackground--sun {
  background-color: var(--color_sun);
}
.colorBackground--flux {
  background-color: var(--color_flux);
}
.colorBackground--cloud {
  background-color: var(--color_cloud);
}
.colorBackground--grass {
  background-color: var(--color_grass);
}
.colorBackground--sky {
  background-color: var(--color_sky);
}
.colorBackground--rock {
  background-color: var(--color_rock);
}
.colorBackground--dark-forest {
  background-color: var(--color_dark-forest);
}
.colorBackground--blaze {
  background-color: var(--color_blaze);
}
.colorBackground--alert {
  background-color: var(--color_alert);
}
.colorBackground--dark-flux {
  background-color: var(--color_dark-flux);
}
.colorBackground--gold {
  background-color: var(--color_gold);
}
.colorBackground--flow {
  background-color: var(--color_flow);
}
.colorBackground--grayshade-1 {
  background-color: var(--color_grayshade-1);
}
.colorBackground--grayshade-2 {
  background-color: var(--color_grayshade-2);
}
.colorBackground--grayshade-3 {
  background-color: var(--color_grayshade-3);
}
.colorBackground--grayshade-4 {
  background-color: var(--color_grayshade-4);
}

/* Fills */
.colorFill--forest {
  fill: var(--color_forest);
}
.colorFill--sun {
  fill: var(--color_sun);
}
.colorFill--flux {
  fill: var(--color_flux);
}
.colorFill--cloud {
  fill: var(--color_cloud);
}
.colorFill--grass {
  fill: var(--color_grass);
}
.colorFill--sky {
  fill: var(--color_sky);
}
.colorFill--rock {
  fill: var(--color_rock);
}
.colorFill--dark-forest {
  fill: var(--color_dark-forest);
}
.colorFill--blaze {
  fill: var(--color_blaze);
}
.colorFill--alert {
  fill: var(--color_alert);
}
.colorFill--dark-flux {
  fill: var(--color_dark-flux);
}
.colorFill--gold {
  fill: var(--color_gold);
}
.colorFill--flow {
  fill: var(--color_flow);
}
.colorFill--grayshade-1 {
  fill: var(--color_grayshade-1);
}
.colorFill--grayshade-2 {
  fill: var(--color_grayshade-2);
}
.colorFill--grayshade-3 {
  fill: var(--color_grayshade-3);
}
.colorFill--grayshade-4 {
  fill: var(--color_grayshade-4);
}

/* Text */
.colorText--forest, .text--forest {
  color: var(--color_forest);
}
.colorText--sun, .text--sun {
  color: var(--color_sun);
}
.colorText--flux, .text--flux {
  color: var(--color_flux);
}
.colorText--cloud, .text--cloud {
  color: var(--color_cloud);
}
.colorText--grass {
  color: var(--color_grass);
}
.colorText--sky {
  color: var(--color_sky);
}
.colorText--rock {
  color: var(--color_rock);
}
.colorText--dark-forest {
  color: var(--color_dark-forest);
}
.colorText--blaze {
  color: var(--color_blaze);
}
.colorText--alert {
  color: var(--color_alert);
}
.colorText--dark-flux {
  color: var(--color_dark-flux);
}
.colorText--gold {
  color: var(--color_gold);
}
.colorText--flow {
  color: var(--color_flow);
}
.colorText--grayshade-1 {
  color: var(--color_grayshade-1);
}
.colorText--grayshade-2 {
  color: var(--color_grayshade-2);
}
.colorText--grayshade-3 {
  color: var(--color_grayshade-3);
}
.colorText--grayshade-4, .text--grey  {
  color: var(--color_grayshade-4);
}


/* 
#################################### 

Opacity

#################################### 
*/ 
.opacity--0 {
  opacity: 0;
}
.opacity--08 {
  opacity: 0.08;
}
.opacity--15 {
  opacity: 0.15;
}
.opacity--50 {
  opacity: 0.5;
}
.opacity--65 {
  opacity: 0.65;
}
.opacity--100 {
  opacity: 1;
}


/* 
#################################### 

FONTS

#################################### 
*/

/* Modifiers */
.text--forest {
color: var(--color_forest);
}
.text--sun {
color: var(--color_sun);
}
.text--flux {
color: var(--color_flux);
}
.text--cloud {
color: var(--color_cloud);
}
.text--grey {
color: var(--color_grayshade-4);
}
.text--bold, strong, .strong, b {
font-weight: bold;
}
.text--normal {
font-weight: normal;
}
.text--left {
text-align: left;
}
.text--right {
text-align: right;
}
.text--center {
text-align: center;
}
.text--justify {
text-align: justify;
}
.text--decorationNone {
text-decoration: none;
}
.text--uppercase {
text-transform: uppercase;
}
.text--underline, .text--container u {
text-decoration: underline;
}

/* texts */
.text--container {
display: block;
}

/* lists */
.text--container ul, 
.text--container ol, 
.text--list {
list-style-type: auto;
list-style-position: inside;
}
.text--container li,
.text--list li {
margin-top: var(--spacing-xxs);
margin-bottom: var(--spacing-xxs);
}
.text--container li p,
.text--list li p {
display: inline;
margin-top: 0;
margin-bottom: 0;
}
.text--container ul.text--listBold li::marker,
.text--container ol.text--listBold li::marker,
.text--list.text--listBold li::marker,
.text--list.text--listBold li::marker {
font-weight: bold;
}

/* links / anchors <a> */
.text--container a,
.text--link {
  color: var(--color_sun);
  text-decoration: none;
  transition: background-size 0.3s;
  text-decoration: none;
  cursor: pointer;
  background-size: 0 1px;
}
.text--container a.text--linkForest,
.text--link.text--linkForest {
  color: var(--color_forest);
}
.text--container a:not(.button),
.text--link:not(.button) {
  display: inline;
}
.text--container a:not(.button):hover,
.text--link:not(.button):hover {
  background-image: linear-gradient(var(--color_sun), var(--color_sun));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.text--container a.text--linkForest:not(.button):hover,
.text--link.text--linkForest:not(.button):hover {
  background-image: linear-gradient(var(--color_forest), var(--color_forest));
}

/* texts regular */
.text--regular, p {
font-size: 16px;
line-height: 24px;
margin: 12px 0;
}
@media(min-width: 1024px) {
.text--regular, p {
  font-size: 16px;
  line-height: 26px;
}
}
@media(min-width: 1260px) {
.text--regular, p {
  font-size: 18px;
  line-height: 28px;
}
}

/* texts Small */
.text--small, small {
font-size: 16px;
line-height: 24px;
}
@media(min-width: 768px) {
.text--small, small {
  font-size: 14px;
  line-height: 22px;
}
}
@media(min-width: 1260px) {
.text--small, small {
  font-size: 16px;
  line-height: 26px;
}
}

/* texts X-Small */
.text--xSmall {
font-size: 14px;
line-height: 22px;
}

/* Healines Base */
.text--h1, h1, .headline--1,
.text--h2, h2, .headline--2, 
.text--h3, h3, .headline--3,
.text--h4, h4, .headline--4, 
.text--h5, h5, .headline--5, 
.text--h6, h6, .headline--6 {
margin: 0;
font-weight: bold;
transition: all 0.3s;
}

/* Healine 1 */
.text--h1, h1, .headline--1 {
font-size: 30px;
line-height: 36px;
}
@media(min-width: 768px) {
.text--h1, h1, .headline--1 {
  font-size: 36px;
  line-height: 44px;
}
}
@media(min-width: 1024px) {
.text--h1, h1, .headline--1 {
  font-size: 58px;
  line-height: 68px;
}
}
@media(min-width: 1260px) {
.text--h1, h1, .headline--1 {
  font-size: 72px;
  line-height: 80px;
}
}

/* Healine 2 */
.text--h2, h2, .headline--2 {
font-size: 26px;
line-height: 34px;
}
@media(min-width: 1024px) {
.text--h2, h2, .headline--2 {
  font-size: 38px;
  line-height: 48px;
}
}
@media(min-width: 1260px) {
.text--h2, h2, .headline--2 {
  font-size: 48px;
  line-height: 58px;
}
}

/* Healine 3 */
.text--h3, h3, .headline--3 {
font-size: 20px;
line-height: 26px;
}
@media(min-width: 1024px) {
.text--h3, h3, .headline--3 {
  font-size: 26px;
  line-height: 34px;
}
}
@media(min-width: 1260px) {
.text--h3, h3, .headline--3 {
  font-size: 32px;
  line-height: 42px;
}
}

/* Healine 4 */
.text--h4, h4, .headline--4 {
font-size: 20px;
line-height: 26px;
}
@media(min-width: 1260px) {
.text--h4, h4, .headline--4 {
  font-size: 24px;
  line-height: 32px;
}
}

/* Healine 5 and 6 */
.text--h5, h5, .headline--5, 
.text--h6, h6, .headline--6 {
font-size: 20px;
line-height: 26px;
}
@media(min-width: 1024px) {
.text--h5, h5, .headline--5, 
.text--h6, h6, .headline--6 {
  font-size: 18px;
  line-height: 24px;
}
}
@media(min-width: 1260px) {
.text--h5, h5, .headline--5, 
.text--h6, h6, .headline--6 {
  font-size: 20px;
  line-height: 28px;
}
}

/* Key Facts (normal) */
/* factUnit has 50% of factNumber size */
.text--factNumber {
font-size: 40px;
line-height: 50px;
font-weight: bold;
}
@media(min-width: 768px) {
.text--factNumber {
  font-size: 60px;
  line-height: 70px;
}
}
.text--factUnit {
font-size: 20px;
line-height: 25px;
}
@media(min-width: 768px) {
.text--factUnit {
  font-size: 30px;
  line-height: 35px;
}
}

/* Key Facts Big */
/* factUnit has 50% of factNumber size */
/* This at Mobile has same size as the Fact normal, at Desktop */
.text--factNumberBig {
font-size: 60px;
line-height: 70px;
font-weight: bold;
}
@media(min-width: 768px) {
.text--factNumberBig {
  font-size: 128px;
  line-height: 128px;
}
}
.text--factUnitBig {
font-size: 30px;
line-height: 35px;
}
@media(min-width: 768px) {
.text--factUnitBig {
  font-size: 64px;
  line-height: 64px;
}
}

/* Special - Display */
.text--display {
font-size: 30px;
line-height: 36px;
font-weight: bold;
}
@media(min-width: 1024px) {
.text--display {
  font-size: 48px;
  line-height: 58px;
}
}
@media(min-width: 1260px) {
.text--display {
  font-size: 60px;
  line-height: 70px;
}
}

/* Special - Intro */
.text--intro {
font-size: 18px;
line-height: 24px;
}
@media(min-width: 1024px) {
.text--intro {
  font-size: 20px;
  line-height: 28px;
}
}
@media(min-width: 1260px) {
.text--intro {
  font-size: 24px;
  line-height: 32px;
}
}

/* Tagline */
.text--tagline {
font-size: 12px;
line-height: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 16px;
}
@media(min-width: 1260px) {
.text--tagline {
  font-size: 13px;
  line-height: 13px;
  margin-bottom: 24px;
}
}


/* 
#################################### 

Product Detail

#################################### 
*/

.libProductDetail__lineWrapper {
  /* Copy of ROW calss 
  TODO: remove when SASS MIxing become available */
  box-sizing: border-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}
.libProductDetail__componentWrapper {
  /* Copy of col-xs-12 calss 
  TODO: remove when SASS MIxing become available */
  box-sizing: border-box;
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  padding-right: 1rem;
  padding-left: 1rem;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
  /* New Style */
  margin-bottom: var(--spacing-l);
}
@media (min-width: 768px) {
  .libProductDetail__componentWrapper {
  /* Copy of col-md-6 calss 
    TODO: remove when SASS MIxing become available */
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
}