/*
    C H A N G E L O G
     23.02.20 .MenuMain height: 1.45em now 1.85em
    30.05.2019
    - removal of hover effects
    - color changed from blue #00f to dark grey #666
    - use of !important to prevent override in exhName and exhNameNew from style.css
*/

:root {
  font-size: 14px;
  --font-sm: .8rem;
  --font-md: 1rem;
  --font-lg: 1.2rem;
  --font-xl: 1.4rem;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  --font-small: 12px;
  --font-text: 16px;

  --font-weight-base: 400;
  --font-weight-thin: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --banner-width: 728px;
  --content-width: min(1024px, 100vw);
  --padding: calc((100vw - var(--content-width)) * 0.5);

  --shadow-md: 1px 1px 3px rgba(0, 0, 0, .1);

  --blue-dark: #28404e; /* rgba(40, 64, 78, 1.0) */
  --blue-medium: #477189; /* rgba(71,113,137,1.0) */
  --blue-light: #69a3bf; /* rgba(105,163,191,1.0) */

  --blue-dark-10: rgba(40, 64, 78, 0.1);
  --blue-dark-20: rgba(40, 64, 78, 0.2);
  --blue-dark-30: rgba(40, 64, 78, 0.3);
  --blue-dark-40: rgba(40, 64, 78, 0.4);
  --blue-dark-50: rgba(40, 64, 78, 0.5);
  --blue-dark-60: rgba(40, 64, 78, 0.6);
  --blue-dark-70: rgba(40, 64, 78, 0.7);
  --blue-dark-80: rgba(40, 64, 78, 0.8);
  --blue-dark-90: rgba(40, 64, 78, 0.9);
  --blue-dark-100: var(--blue-dark);

  --bg-color-member: var(--blue-medium);
  --bg-color-exhibitor: var(--red-medium);
  --bg-color-author: var(--blue-light);

  --border-color-member: var(--blue-medium);
  --border-color-exhibitor: var(--red-medium);
  --border-color-author: var(--blue-light);

  --color-member: var(--blue-medium);
  --color-exhibitor: var(--red-medium);
  --color-author: var(--blue-light);

  --color-link: var(--blue-medium);

  --color-text: #666666ff:

  --red-medium: #ed1c24;
  --red-dark: #b22222;

  --white: #ffffff;
  --gray-light: #f1f3f5;
  --gray-medium: #c1ccd6;
  --gray-dark: #8a9299;

  --green-light: #00ff00;

  --margin-xs: 0.25rem;
  --margin-sm: 0.5rem;
  --margin-md: 0.75rem;
  --margin-lg: 1rem;
  --margin-xl: 1.25rem;

  --padding-xs: 0.25rem;
  --padding-sm: 0.5rem;
  --padding-md: 0.75rem;
  --padding-lg: 1rem;
  --padding-xl: 1.25rem;

  --card-max-width: 800px;

  --font-family: "Noto Sans", sans-serif;

  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;

  --border-radius: 4px;
  --border-radius-xs: var(--border-radius);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-full: 9999px;

  --breadcrumb-color: var(--gray-dark);
}

/* * {
  outline: 1px solid #f00 !important;
} */

* {
  -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box !important; /* Firefox, other Gecko */
  box-sizing: border-box !important; /* Opera/IE 8+ */
}


/*!    1. LAYOUT           */
/*!   parent containers   */
body,
html {
  height: 100%;
  margin: auto;
  background-color: var(--gray-light);
  font-size: var(--font-md);
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  /*
      20.07.2019: prevent overflow on Android devices
      this is done primarily by overflow-x
      (-webkit-)overflow-scrolling is for smooth scrolling especially on iOS
   */
  /*width: auto!important;*/
  /*
 width: auto!important;
 overflow-x: hidden!important;
 overflow-scrolling: touch;
 -webkit-overflow-scrolling: touch;
 -webkit-transform: translateZ(0px);
  */
}

body,
html,
input,
textarea,
select,
p {
  font-family: var(--font-family);
}

img {
  display: inline;
}

select {
  height: 2rem;
}

select,
input {
  font-size: var(--font-md);
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
input::placeholder {
  color: var(--gray-medium);
}

.main__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100dvh - 74px); /* dynamic view height minus header */
}

.flexCenter {
  -ms-flex-item-align: center;
  align-self: center;
  /*background-color: #000000;*/
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /*! justify-content: flex-start; */
  justify-items: self-end;
}
.flexCenter > * {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

#content {
  max-width: var(--content-width);
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  /* 09.08.2019: has to be disabled. otherwise an unwanted scrollbar will appear on desktop
  -ms-flex-preferred-size: 1003px;
  flex-basis: 1003px;
  */
  padding: 0;
  background-color: var(--gray-light);
  justify-self: stretch;
  /* 27.07.2019: this is needed for the dropdowns in the menu to show properly */
  -webkit-transform: translateZ(0px);
  /* 09.08.2019: for proper banner display on android handies this has to be set */
  width: 100vw;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0px);
}

@media screen and (min-width: 800px) {
  .main__body {
    min-height: calc(100dvh - 133px); /* dynamic view height minus header and top navigation */
  }

  #content {
    max-width: var(--content-width);
    width: auto !important;
  }
}

#bannerRight {
  width: 180px;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

.wrapper {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: top;
  -ms-flex-align: top;
  align-items: top;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.wrapper > * {
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%
}
.colLeft {
  margin-top: 0;
  /*background-color: var(--white);*/
  height: fit-content;
}
.colCenter {
  margin-top: 0;
  /*background-color: var(--white);*/
}
.colRight {
  margin-top: 0;
  /*background-color: var(--white);*/
  height: fit-content;
}
.slogan {
  display: none
}
.aside {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto
}
.colCenter {
  -webkit-box-flex: 1;
  -ms-flex: 1 auto;
  flex: 1 auto
}
.onlyDesktop {
  display: none!important
}
.onlyMobile {
  display: block;
}
.onlyLargeScreen {
  display: none
}
.hidden {
  display: none
}
@media all and (min-width:800px) {
  body,
  html {
    font-size: var(--font-md)
  }
  .onlyDesktop {
    display: block!important
  }
  .onlyMobile {
    display: none
  }
  .colLeft {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 120px;
    flex: 1 1 120px;
    margin-right: 1.5em;
  }
  .colCenter {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 4;
    -ms-flex: 4 4 300px;
    flex: 4 4 300px;
    /*background-color: var(--white)*/
  }
  .colRight {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 120px;
    flex: 1 1 120px;
    margin-left: 1.5em;
  }
  .slogan {
    display: block
  }
}
@media all and (min-width:1024px) {
  .flexCenter {
    width: var(--content-width)
  }
}
@media all and (min-width:1320px) {
  .onlyLargeScreen {
    display: block
  }
}
/*!
    TOP MOBILE
    logo, slogan, search, small menu top
*/
#mobileTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--white);
  gap: 1em;
  padding: 1em;
}
#mobileSlogan {
  font-size: var(--font-sm);
  font-style: italic;
  color: var(--blue-medium);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: start;
  text-align: start;
}
@media all and (max-width:500px) {
  #mobileSlogan h1 {
    display: none!important
  }
}
#mobileSlogan h1,
h2 {
  /*line-height: 1em;*/
  font-size: var(--font-sm);
  margin-top: 2px;
  margin-bottom: 0;
  text-align: center;
  font-weight: 400;
}
#mobileTop .logoTop {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100px;
  flex: 0 0 100px
}
#mobileSearch {
  border: 0 solid gray;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-self: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  gap: 0.5em;
}
#mobileSearch .icon {
  height: 15px;
  width: 15px
}
#mobileSearch .icon:hover {
  -webkit-transform: scale(1.2,1.2);
  -ms-transform: scale(1.2,1.2);
  transform: scale(1.2,1.2);
  cursor: pointer
}
#mobileSearch img {
  height: 100%;
  width: auto
}
#mobileLoginTop {
  display: block;
  justify-self: flex-end;
  font-weight: 700;
}
#mobileLoginTop a {
  text-decoration: none;
  color: #000000
}
#mobileLoginTop a:hover {
  cursor: pointer;
  /* 30.05.2019 color: #00f*/
}
#mobileSearchInput {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
#mobileSearchInput input {
  width: 100%;
}
#closeSearchButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--white);
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 20px;
  border: 0 solid #b22222;
}
@media all and (max-width:590px) {
  /*! 
    This class is set by JS script.
    hide slogan and login button when search input open
  */
  .onlyMediumSize {
    display: none!important
  }
}
/*!
    TOP DESKTOP
    logo, slogan, search, small menu top
*/
#desktopTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1em;
  align-items: center;

  --padding: calc((100vw - var(--content-width)) * 0.5);
  padding: 1.5em var(--padding);
  background-color: var(--white);
  width: calc(100vw - 2 * var(--padding));
  position: relative;
  left: calc(var(--padding) * -1);
}
.logoTop {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 125px;
  flex: 0 0 125px
}
.logoTop img {
  width: 100%;
  height: auto
}
#desktopSlogan {
}
#desktopSlogan p,
h5 {
  font-size: var(--font-sm);
  margin: 0;
  text-align: left;
  font-weight: 400;
  color: var(--blue-dark)
}
#desktopRight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}
#desktopRight > .menu {
  display: flex;
  justify-content: end;
  gap: 1em;
  font-size: var(--font-sm);
}
#desktopRight .menu a {
  text-decoration: none;
}

#desktopSearch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-bottom: 0.2em;
  margin-top: .5em
}
#desktopSearch input {
  font-size: var(--font-md);
  padding: .2em;
  border: 1px solid var(--blue-medium);
  background-color: var(--white);
}
#desktopSearch .label {
  /*  background-color: #ff0005; */
  background-color: var(--blue-dark);
  cursor: pointer;
  padding: .4em;
}
#desktopSearch .label img {
  color: var(--white);
  height: 1em;
}
#desktopSearch .button .label {
  text-align: center
}
/*!
    Main Menu
    item, drop list
*/


.menuMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;

  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;

  --padding: calc((100vw - var(--content-width)) * 0.5);
  padding: 0.5em var(--padding) 0;
  width: calc(100vw - 2 * var(--padding));
  position: relative;
  left: calc(var(--padding) * -1);
  /*background-color: var(--gray-light);*/
}

.onlyMobile .menuMain a {
  color: var(--white);
}

.menuMain .item,
.menuMain .item_off {
  flex: 3;
  cursor: pointer;
  font-size: var(--font-lg);
  padding: 0.25em 0;
  height: 36px;
  box-sizing: border-box;

  color: var(--blue-dark);
  /*background-color: var(--white);*/
  transition: 150ms;
}

.menuMain .item,
.menuMain .item_off:hover {
  /*color: var(--white);*/
  /*background-color: var(--blue-dark);*/
  border-bottom: 4px solid var(--blue-dark);
  filter: none !important;
  color: var(--blue-dark) !important;
}


/*.menuMain .item,*/
/*.menuMain .item a {*/
/*  text-decoration: none;*/
/*  color: var(--white);*/
/*  z-index: 1200;*/
/*}*/

.menuMain .dropList {
  position: fixed;
  visibility: hidden;
  padding: 10px;
  background-color: var(--blue-dark);
  z-index: 1;
}

.menuMain .dropList > a.item {
  display: block;
  padding: .6em .5em;
  text-align: left;
  border-right: 0 solid var(--white);
  min-width: 8em;
  z-index: 1200;
  color: var(--white) !important;
}

/*!
    SPONSORS 
    common for desktop and mobile
*/
.sLabel {
  color: var(--gray-dark);
  /*font-weight: bold;*/
  margin-left: 3px;
  font-size: var(--font-sm);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}
.imgBox {
  border: 0 solid green;
}
.imgBox > img {
  max-width: 100%;
  max-height: 100%
}
/*!
    MAIN SPONSORS
	
	1.1.2020 this css not anymore used. Now same css of sponsors used.
    
*/
.rowMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin-left: .2em;
  margin-right: .2em;
  justify-items: space-around;
  -ms-flex-preferred-size: 1024px;
  flex-basis: 1024px
}
.rowMain > .group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 70px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto
}
.sponsorSpacerMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 50px;
  flex: 1 1 50px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0 solid white
}
@media all and (max-width:400px) {
  .rowMain {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
  .rowMain > .group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 54px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    border: 0 solid #00f
  }
}
@media all and (max-width:610px) {
  .rowMain > .group {
    height: 60px
  }
}
/*!
  DESKTOP
  SPONSORS second and third line

*/
.sponsorBanner {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  padding: 1em 0;
  gap: 2em;
  /* width: 100vw; */
  position: relative;
  /* left: calc((100vw - var(--content-width)) * -0.5); */
  left: calc(0% + 50% - 50vw);
  width: calc(100vw - 0.3em);
}

.sponsorBanner > .sponsorGroup {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
}

.sponsorBanner > .sponsorGroup.sponsorsPrimary img {
  width: 160px;
}

.sponsorBanner > .sponsorGroup.sponsorsSecondary img {
  width: 120px;
}

@media screen and (min-width: 800px) {
  .sponsorBanner {
    width: calc(100vw - 0.2em);
  }
}

.row75 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 75px
}
.row50 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  justify-items: center
}
.sponsorSpacer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sponsorFlexRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2em;
  max-width: var(--content-width);
}
.sponsorFlexRow.forthcomingContainerOnlyMobile {
  gap: 0.5em;
}
/*!
    MOBILE
    CAROUSEL of Sponsors

*/
#slider3,
#slider4 {
  display: block;
  position: relative;
  width: 100%;
  height: 58px;
  overflow: hidden;
}

.slider__wrapper {
  background-color: var(--white);
  padding-bottom: 0.5em;
}

.rowTest {
  border: 0 solid #00f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: absolute;
  background-color: var(--white);
}
.rowTest .imgBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: .1em;
  height: 58px;
  font-size: 2em;
  background-color: var(--white)
}
.imgBox > img {
  width: 100%;
  height: auto
}

#sliderLegend {
  display: none;
}
/*
#sliderLegend {
  margin-bottom: .5em;
  margin-top: .5em;
  border: 0 solid #00f;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row
}


#sliderLegend .circle {
  margin-left: 10px;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid gray
}
#sliderLegend .circle.active {
 background-color: #d3d3d3
} 
#sliderLegend .circle:hover {
  background-color: var(--white);
  border: 1px solid #d3d3d3
}
*/

/*!
    EXHIBITOR LIST
    DESKTOP and Mobile
*/
#exhibitorList {
  text-align: left;
  /*padding: .8em;*/
}


/*
    30.05.2019
    color changed to #666 and !important
*/
.exhName {
  color: var(--blue-medium);
  display: block;
  text-decoration: none;
  height: 1.6em;
  max-width: 12.5em;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*
    style for an exhibitor text in the modal popup
 */
.modalExhName{
  color: var(--blue-medium);
  display: block;
  text-decoration: none;
  max-width: 250px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.8;
}


/*
    style for a new exhibitor text in exhibitor list and in the modal popup
 */
/*
    30.05.2019
    color changed to !important
*/
.modalExhNameNew,
.exhNameNew {
  font-weight: bold;
}

/*
    hover style for (new) exhibitor name in modal popup and normal display
 */
.modalExhName:hover,
.modalExhNameNew:hover,
.exhName:hover,
.exhNameNew:hover
{
  /* 30.05.2019 color: #00f*/
  /*color: var(--blue-dark);*/
}



/*!
    EXHIBITOR LIST
    only Mobile
*/
@media all and (max-width:800px) {
  #exhibitorBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column
  }
  #exhibitorList {
    border: 0 solid #000000;
    max-height: 300px;
    overflow-y: scroll;
    justify-self: center;
    margin-bottom: 10px;
    margin-right: 20px
  }
  .exhName {
    max-width: 320px;
    overflow: hidden
  }
}
/*! 
    TITLE BAR
    forum titlebar,
    issues titlebar, 
    exhibitors titlebar
*/
.titleBarA {
  text-decoration: none;
  background-color: var(--blue-light);
  color: var(--blue-dark);
}

/*
  18.11.2019
  this is a fix for Safari on iPhone!
  here the header color red from Forum and Exhibitors changes to blue when they are clicked
  why? Safari pulls from style.css a:visited {color: blue/#00f;}
 */
a.titleBarA:visited {

}

a.titleBarA :hover {
  /* 30.05.2019 color: #00f*/
}
.titleBar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 3em;

  background-color: var(--gray-medium);
}

.titleBar.titleBar__main {
    background-color: var(--blue-dark);
}

.titleBar.titleBar__main h2 {
  color: var(--white);
  font-size: var(--font-md);
}

.titleBar.titleBar__main a {
  color: var(--white);
}

.titleBar a {
  text-decoration: none;
  color: var(--blue-dark)
}
/* 29.11.2018: kein hover effekt mehr bei titleBar
.titleBar a:hover {
  color: #00f
}
*/
.titleBar > .aside {
  -webkit-box-flex: 1;
  -ms-flex: 1 auto;
  flex: 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  justify-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-basis: 0;
  padding: 0 .5em;
}

/*
30.05.2019: hover effect removed
.titleBar > .aside:hover {
  -webkit-transform: scale(1.2,1.2);
      -ms-transform: scale(1.2,1.2);
          transform: scale(1.2,1.2);
  -webkit-transition: -webkit-transform .1s linear;
  transition: -webkit-transform .1s linear;
  -o-transition: transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear
}
*/
.titleBar > .titleCenterCol {
  -webkit-box-flex: 6;
  -ms-flex: 6 auto;
  flex: 6 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  justify-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-item-align: stretch;
  align-self: stretch
}
.titleCenterCol .icon:hover {
  -webkit-transform: scale(1.2,1.2);
  -ms-transform: scale(1.2,1.2);
  transform: scale(1.2,1.2);
  -webkit-transition: -webkit-transform .1s linear;
  transition: -webkit-transform .1s linear;
  -o-transition: transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear;
  cursor: pointer
}
.titleCenterCol .icon img {
  height: 100%;
  width: auto
}
h2.label,
h3.label {
  color: var(--blue-dark);
  margin: 0;
  font-size: inherit
}


h2.hoverLabel {
  display: inline-block;
  margin: 0;
  font-size: inherit
}

h2.hoverLabel:hover {
  /* 30.05.2019 color: lightgrey;*/
  /*color: var(--blue-light);*/
}

.lightGrayRedBorder {
  border-bottom: 1px solid var(--blue-medium);
  /* var(--blue-dark); */
}

/*
@media all and (max-width:800px) {
   .lightGrayRedBorder {
	background-color: #f8f8f8;
    border-bottom: 1px solid var(--blue-dark);
  }
}
*/

/*! 
    small TITLE BAR
    announcements
    news
*/
.titleBarSmall {
  height: 1.5em;
  /* line-height: 1.1em; */
  border-bottom: 1px solid var(--gray-light);
  margin: 1.5em 0 1em;
  text-align: center;
  font-weight: 700
}
.titleBarSmall a {
  text-decoration: none;
  color: #000000
}

@media screen and (min-width: 800px) {
  .titleBarSmall {
    margin: 1.5em 1em 1em;
  }
}

/* 29.11.2018: kein hover effekt mehr bei titleBarSmall
.titleBarSmall a:hover {
  color: #00f
}
*/

/*
    19.07.2019: in docsIntro.intro2imgCSSClass an additional CSS class for formatting the image can be entered.
                this class is added to the liszt of classes for the image
 */

.borderForDocsIntroImage,
.borderForDocsIntroImage:hover {
  border: 1px solid #aaaaaa !important;
}


/*!
    COMMON for all boxes on center column main page
*/
.box {
  padding-left: 5px;
  padding-right: 5px;
  text-align: left
}
.box span {
  /*padding-right: .4em;*/
  /*padding-left: .4em*/
}
.box > a {
  text-decoration: none
}
.box .title {
  margin: 0;
  margin-left: 112px;
  display: block;
  text-decoration: none;
  color: var(--blue-dark);
  font-weight: 700;
  font-size: var(--font-md)
}
.box .title:hover {
  color: var(--red-medium);
}
.box > .stand {
  margin-top: .2em;
  font-size: var(--font-md);
  text-decoration: none;
  color: gray
}
.box .stand a {
  color: gray;
  text-decoration: none
}
.box a.companyName:hover {
  /* 30.05.2019 color: #00f*/
}
.box > .intro {
  float: left;
  clear: left
}
.box .body {
  margin-top: .5em
}
.box .body > .intro > .more.hidden {
  display: none
}
.commercial {
  border: 1px dotted #d3d3d3;
  margin-bottom: 1em;
  color: #666
}
.bodyReadMoreButton {
  float: right;
  /* background-color: #eee; */
  font-size: var(--font-md);
  padding: 0 1px;
  color: #555;
  text-decoration: none;
  /*  border-top: 1px solid #00f;
    border-bottom: 1px dotted #00f */
}
.bodyReadMore {
  cursor: pointer
}
.boxIcon {
  float: left;
  width: 100px;
  min-height: 50px;
  margin-right: 12px;
}


.boxIcon:hover {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
  border: 0 solid #d3d3d3
}

.boxIcon > img {
  width: 100%;
  height: auto;

  /*
      19.07.2019: center the image in the middle of boxIcon
   */
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.boxIconNews {
  float: left;
  width: 100px;
  min-height: 50px;
  margin-right: 5px;
}
.boxIconNews:hover {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
  border: 0 solid #d3d3d3
}
.boxIconNews > img {
  width: 100px;
  height: 66px;
  margin-right: 5px;
  border: 1px solid #aaaaaa;
}

.boxIconProducts {
  horiz-align: center;
  vertical-align: top;
  float: left;
  width: 100px;
  min-height: 50px;
  margin-right: 5px
}
.boxIconProducts:hover {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
  border: 0 solid #d3d3d3;
}
.boxIconProducts > img {
  width: 100px;
  height: 66px;
  border: 1px solid #aaaaaa;
}

/*! 
    Expand arrow, 
    dataimage copied from google search page.
*/
.box .body > .arrow {
  float: right;
  /*
  width: 11px;
  height: 7px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  */
  width: 32px;
  height: 32px;
  margin-left: 1px;
  margin-right: 1px;
  margin-bottom: 1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAXBAMAAACRwPCoAAAAD1BMVEVMaXEAAAAAAAAAAAAAAACF6eB8AAAABXRSTlMAD0Z4igSUflUAAABjSURBVHgBTcqBBcBAAATBzVcQ0sDjGwip4HP91xRicQNggJNyAIybck1gvdWOZ8NIql3JZCW2PyWbFZspmxGbKZNqJmydbJ2wdbJ1wtbJ1snWydbJ1snWydbJ1snWyWbqZoIPFusj3ZQ2LvMAAAAASUVORK5CYII=);
  background-size: 14px 7px;
  background-repeat: no-repeat;


}
.box .body > .arrow:hover {

  /*
  width: 13px;
height: 9px;
margin-left: 8px;
margin-bottom: 8px;
  */
  cursor: pointer
}
/*!
    Center Col main page
    Issue
*/
.issueBox {
  margin-bottom: 1.5em
}
.issueBody {
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  margin-left: 105px;
  text-align: left;
  text-decoration: none
}
.issueBody .issueLabel1 {
  color: gray;
  margin-left: 0!important;
  padding-left: 0!important
}
.issueBody .issueLabel2 {
  color: #000000;
  /*
  override padding from .box span, which is 0.4em
   */
  padding-left: 0px;
}

/*
    19.07.2019
    issueLabel1 and issueLabel2 in productBox is needed for th formatting of the title for Articles
 */
.productBox .issueLabel1 {
  font-weight: normal;
  font-size: var(--font-md);
  color: gray;
  margin-left: 0 !important;
  padding-left: 0 !important
}

.productBox .issueLabel2 {
  font-weight: normal;
  font-size: var(--font-md);
  color: #000000;
  /*
  override padding from .box span, which is 0.4em
   */
  padding-left: 0px;
}
.issueBody .issueLabel2:hover {
  /* 30.05.2019 color: #00f*/
}
/*!
    Center Col main page
    Annoucement
*/
.annoucementBox {
  margin-bottom: 1em;
  padding-top: .5em;
  border-top: 1px dotted gray
}
.annoucementBox > .icon {
  display: block;
  min-height: 3em
}
.annoucementBox.first {
  border-top: 0 dotted gray
}
.annoucementBody {
  display: block;
  margin-left: 105px;
  text-align: left;
  text-decoration: none;
  color: #000000
}
.annoucementBody:hover {
  /* 30.05.2019 color: #00f*/
}
/*!
    Center Col main page
    News
    commercial banner news
*/
.newsBox {
  margin-bottom: 1em;
  border-bottom: 1px solid #eee;
  padding-bottom: .2em;
  color: #666
}
.commercialBannerText {
  text-align: center;
  letter-spacing: 1em;
  font-size: var(--font-md);
  height: 40px
}
/*!
    SPOTLIGHT
    PRODUCT
*/
.headerGray {
  background-color: var(--blue-dark);
  color: var(--white);
  font-size: var(--font-lg);
  margin-bottom: 1em;
  padding: 0.5em
}
.productBox {
  font-size: var(--font-md);
  margin-bottom: .5em;
  padding: .5em 0;
  color: #555555;
}
.productBox h4 {
  font-size: var(--font-md);
  display: inline;
  color: var(--blue-dark);
}
.productBox > .media {
  margin-top: .5em;
  margin-left: 112px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: flex-start;
  flex-flow: flex-start
}
.productBox > .media > .mediaItem {
  border-radius: 4px;
  font-size: var(--font-sm);
  margin-right: .5em;
  line-height: 1em;
  background-color: var(--gray-medium);
  color: #555555;
  padding: 2px 4px;
  text-decoration: none;
  white-space: nowrap
}

@media screen and (min-width: 800px) {
  .productBox {
    padding: .5em 1em;
  }
}

.standItem {
  border-radius: 4px;
  font-size: var(--font-sm);
  margin-right: .5em;
  line-height: 1em;
  background-color: var(--blue-medium);
  color: var(--white) !important;
  padding: 2px 4px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.productBox > .media > .mediaItem:hover {
  /* 30.05.2019 background-color: #666666*/
}
/*
 prevent the floating of an item in productBox in desktop Mode
 preventFloatAnnouncements is for the productBox Items in the announcement Area auf News and Issues
 */
.preventFloatAnnouncements,
.preventFloat {
  margin-left: 112px;
}

@media all and (max-width:800px) {
  .preventFloat {
    margin-left: 0px;
  }
}

.productBody .spacer {
  display: inline
}
.productBody .intro {
  display: inline
}
.productBody .more {
  display: inline
}


/*

    CSS styles for the new contentBox which displays an entry for
    - Foreword
    - News, Articles, Proceedings
    - Announcements
    - News
    - Product Spotlight
    - any other information that should be displayed in future

*/
.contentBox {
  text-align: left;
  padding: .5rem 0;
  /*border-bottom: 1px solid #eeeeee;*/
  border: none;
  color: #666666;
}

.contentBox span {
  padding-right: .4em;
  padding-left: .4em
}
.contentBox > a {
  text-decoration: none
}
.contentBox .title {
  margin: 0;
  display: block;
  text-decoration: none;
  color: #666;
  font-weight: 700;
  font-size: var(--font-md)
}

.contentBox > .stand {
  margin-top: .2em;
  font-size: var(--font-md);
  text-decoration: none;
  color: gray
}
.contentBox .stand a {
  color: gray;
  text-decoration: none
}
.contentBox a.companyName:hover {
  color: var(--red-medium);
}
.contentBox > .intro {
  float: left;
  clear: left
}
.contentBox .body {
  /* margin-top: .5em */
  margin-top: .3em
}
.contentBox .body > .intro > .more.hidden {
  display: none
}

.contentBoxIcon {
  horiz-align: center;
  vertical-align: top;
  float: left;
  width: 100px;
  min-height: 50px;
  margin-right: 5px
}

.contentBoxIcon:hover {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
  border: 0 solid #d3d3d3
}
.contentBoxIcon > img {
  width: 100px;
  height: 66px;
}

.contentBox h4 {
  display: inline;
}
.contentBox > .media {
  margin-top: .5em;
  margin-left: 110px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: flex-start;
  flex-flow: flex-start
}
.contentBox > .media > .mediaItem {
  border-radius: 4px;
  margin-right: 1em;
  line-height: 1em;
  background-color: var(--blue-medium);
  color: var(--white);
  padding: 2px 2px;
  text-decoration: none;
  white-space: nowrap
}

.contentBody .spacer {
  display: inline
}
.contentBody .intro {
  display: inline
}
.contentBody .more {
  display: inline
}

@media screen and (min-width: 800px) {
  .contentBox {
    padding: .5em 1em;
  }
}




/*!
    FORUM 
    recent post slider
*/
#forumBox {
  margin-bottom: 1em
}
p.forumHeader {
  margin: 5px;
  /* font-style: italic; */
  color: var(--blue-medium);
  text-align: left
}
p.forumButton {
  margin: 0;
  text-align: right
}
p.forumButton:hover {
  /* 30.05.2019 color: #00f;*/
  background-color: var(--white);
  cursor: pointer
}
#forumWindow {
  margin: 5px;
  height: 125px;
  overflow: hidden
}
#forumWindow .sliderItem {
  height: 125px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--font-md);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  justify-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
#forumWindow .sliderItem a {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  color: var(--blue-medium);
  text-decoration: none;
  border-bottom: 1px solid #d3d3d3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: start;
  text-align: left;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#forumWindow .sliderItem a:last-child {
  border-bottom: 0 solid #d3d3d3
}
#forumWindow .sliderItem a:hover {
  /* 30.05.2019 color: #00f;*/
  /*color: var(--blue-dark);*/
  cursor: pointer
}
@media all and (max-width:800px) {
  #forumWindow {
    height: 90px
  }
  #forumWindow .sliderItem {
    height: 90px
  }
}
/*!
    CONTRIBUTORS 

*/
.righColBox {
  /* 08.12.2018: ersetzt durch schwarzr
  color: #c4acaa;
  border: 0 solid #c4acaa;
  */
  color: black;
  /* 14.12.18 border soll raus
   border: 0 solid #aaaaaa;
   */
  /* 19.12.18 Box aligned with Forum Box padding: .5em;*/
  margin-bottom: 1em;
  text-align: center
}
.desktopContributorsHeader {

  margin-bottom: 1em;
  background-color: #f8f8f8;
}

.forthcomingContainerOnlyMobile,
.forthcomingContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  gap: .5em;
}
.forthcomingContainerOnlyMobile > *,
.forthcomingContainer > * {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 12%;
  flex: 1 1 12%;
  font-size: var(--font-sm)
}
.forthcomingItemBoxOnlyMobile,
.forthcomingItemBox {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  color: #c4acaa;
  text-decoration: none;
  margin-bottom: .5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
.partnerImg {
  justify-self: center
}
.dateLabel {
  color: #c4acaa;
  display: block;
  /* justify-self: end; */
}
.forthcomingItemBox:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05)
}
.partnerImg {
  margin-top: 20px;
  margin-left: 3px;
  margin-right: 3px;
  vertical-align:middle
}
.dateLabel {
  /* color: #333 */
  color: #aaa
}
@media all and (min-width:800px) {
  .righColBox {
    /* 08.12.2018: ersetzt durch schwarzr
   color: #c4acaa;
   border: 0 solid #c4acaa;
   */
    color: black;
    /* 14.12.18 border soll raus
  border: 0 solid #aaaaaa;
  */
    /* 19.12.18 Box aligned with Forum Box width: 150px;*/
  }
  .forthcomingItemBox {
    border: 0;
    display: block;
    -webkit-box-flex: 0;
    /* -ms-flex: 0 0 180px;
    flex: 0 0 180px; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #c4acaa;
    text-decoration: none;
    margin-bottom: 1em
  }
  /* .forthcomingContainer {
    display: block;
    width: 180px
  } */
}
/*!
    SOCIAL icons
    main page
*/
#socialRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Background Colr wegen IE11 geändert */
  background-color: var(--gray-light);
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  /* Margin von 0.5 auf 0.0 geändert wegen IE11 */
  /* 01.12.18 rausgemacht auf anraten von Tom und ersetzt durch padding
  margin: .0em
  */
  padding: .5em
}
#socialRow .title {
  text-align: center;
  margin-bottom: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%
}
#socialRow .boxes {
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
#socialRow .boxes .box {
  margin: 0 .5em
}
.signup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 10px
}
.signup img {
  width: 100%;
  height: auto
}
/*!
    FOOTER

*/
#footer {
  background-color: var(--blue-dark);
  color: var(--white);
  font-size: var(--font-md);
  /* padding: 4em calc((100vw - var(--content-width)) * 0.5); */
  /* width: var(--content-width); */
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 2em;
  padding-bottom: 2em;
}

#footer ul {
  padding: 0 1.5rem;
}
.line {
  /* display: -webkit-box;
  display: -ms-flexbox;
  display: flex; */
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2em;
  width: var(--content-width);
  margin: auto;
  line-height: 2;
}
.left {
  -webkit-box-flex: 3;
  -ms-flex: 3 1 auto;
  flex: 3 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 0 1.5rem;
}
.center {
  display: none
}
.right {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 0 1.5rem;
}
#footer .line a {
  color: var(--white);
  text-decoration: none;
}
#footer .line a:hover {
  color: var(--red-medium);
  text-decoration: none
}
#footer a.img {
  display: inline-block;
  border: 0 solid var(--white);
  height: 2em;
  width: 2em;
  margin-right: 1em
}
#footer a.img img {
  width: 100%;
  height: 100%
}
#footer .youtube {
  padding: 0 1.5rem;
}
.footNote {
  text-align: left;
  /* margin-top: var(--margin-md); */
  padding: 0 1.5rem;
  width: auto;
  margin: var(--margin-md) auto 0;
  max-width: 100vw;
}
#footer .center .img {
  border: 0 dashed var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 2em;
  width: 300px;
  height: 200px
}

.footer-banner {
  display: block;
}

@media all and (min-width: 1024px) {
  #footer {
    font-size: var(--font-md);
    padding-top: 2em;
    padding-bottom: 2em;
  }
  #footer ul {
    padding: 0;
  }
  .line {
    line-height: 2.0;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .center {
    -webkit-box-flex: 5;
    -ms-flex: 5 1 auto;
    flex: 5 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    /* vor 8.06.2021 margin-right: 3em */
    /* margin-right: 9em */
  }

  #footer .youtube {
    padding: 0;
  }

  .footNote {
    padding: 0;
    width: var(--content-width);
    padding: 0 1.5rem;
  }

  .footer-banner {
    display: none;
  }
}

/*!
  SPONSOR BANNER RIGHT

*/
.banner {
  height: 600px;
  width: 160px;
  max-width: 160px;
  background-color: var(--white)
}
#bannerRight,
#bannerSkyscraper {
  /*   animation-name: BannerDelay;
     animation-duration: 2s;
     animation-delay: 1s;
     animation-fill-mode: backwards;
     -webkit-animation-name: BannerDelay;
     -webkit-animation-duration: 2s;
     -webkit-animation-delay: 1s;
     -webkit-animation-fill-mode: backwards;     */

  width: 160px;
  position: fixed;
  top: 0;
  right: 0;
  /* 25.07.2019: IMPORTANT: z-index of #bannerRight has to be greater than z-index entries of the menu */
  z-index: 2000;
}

#bannerSkyscraper {
  display: none;
}

#bannerRight > .banner > a > img,
#bannerSkyscraper > .banner > a > img {
  width: 100%;
}
/*
@keyframes BannerDelay {
   to { transform: translateX(0) } 
  from { transform: translateX(200%) }
}

@-webkit-keyframes BannerDelay {
   to { transform: translateX(0) } 
  from { transform: translateX(200%) } 
}
*/

.close {
  position: absolute;
  /* 22.07.2019: these values have to be adjusted for the new x-mark SVG
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  */
  /*
  14.9.2020 geändert um close click radius zu erhöhen
    top: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  */
  top: -47px;
  right: -30px;
  width: 120px;
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: var(--font-md);
  /* 22.07.2019: thi shas to be removed. otherwise the x-mark is displayed with a white background
  background-color: var(--white)
  */
}
.close:hover {
  -webkit-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);
  transform: scale(1.3,1.3);
  -webkit-transition: -webkit-transform .2s linear;
  transition: -webkit-transform .2s linear;
  -o-transition: transform .2s linear;
  transition: transform .2s linear;
  transition: transform .2s linear, -webkit-transform .2s linear
}
@media all and (min-width:1360px) {
  #bannerRight,
  #bannerSkyscraper {
    position: fixed;
    left: 56%;
    margin-left: 501px;
  }
  .close {
    display: none
  }
}

@media screen and (min-width: 1320px) {
  #bannerSkyscraper {
    display: block;
  }
}
/*!
  COOKIE INFO BAR

*/
.cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100vw;
}

#cookieInfo {
  background-color: #8d9ead;
  color: var(--white);
  padding: .5em;
  font-size: var(--font-sm);
  max-width: 100vw;
}


#cookieInfo .action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin-top: .5em;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#cookieInfo .action .spacer {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1
}
#cookieInfo .action .item {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100px;
  flex: 0 1 100px;
  margin: .1em;
  margin-right: 100px;
  padding: .2em .4em;
  background-color: var(--white);
  border: 2px solid #d3d3d3;
  color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}
#cookieInfo .action .item:hover {
  cursor: pointer;
  background-color: #90ee90
}
@media all and (min-width:1024px) {
  #cookieInfo {
    font-size: var(--font-md);
    background-color: #8d9ead;
    width: var(--content-width);
    max-width: var(--content-width);
    margin: auto;
  }
}
/*!
  DEBUG window

*/
#log {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: var(--white);
  z-index: 50;
  border: 2px dashed gray;
  padding: 4px;
  font-size: var(--font-sm)
}
#log .content p {
  margin: 0;
  font-size: var(--font-sm)
}
/*!
    BACK TO TOP ICON

*/
#back2top {
  position: fixed;
  bottom: 50%;
  right: 5px;
  width: 38px;
  height: 38px;
  /* 14.12.2018 violetten TOP Button auf grau geändert
  background-color: rgba(60,0,255,.6);
  */
  background-color: lightgrey;
  opacity: 0.70;
  z-index: 997;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #000000
}
#back2top:hover {
  -webkit-transform: scale(.9);
  -ms-transform: scale(.9);
  transform: scale(.9);
  cursor: pointer
}
#back2top .label {
  color: #000000;
  z-index: 999
}

/*
        start of CSS styles for the search bar
 */

/*
        this is the style for the div containing the search bar-
 */

#searchBarDiv {
  position: fixed;
  height: 30px;
  width: 100%;
  bottom: 70px; /* search bar is located 70px from the button */
  z-index: 999; /* search bar is always on top, so set a high z-index*/

}



/*
        this is the style for the search bar
        it is centered in the middle of the browser
 */
.boxSearchBar {
  position: absolute;
  left: 50%;
  /*
  why -94px;?
  - 120px width of the middle button
  - 24px width of the lefrt arrow
  - 24px width of the right arrow
  - 10px margin between left arrow and middle button
  - 10px margin between middle button and right arrow
  => sum: 188px
  this has to be divided by 2 to get the mid
  -> 94px

  IMPORTANT: if some of the above values are changed, margin-left MUST be newly calculated!!!
   */
  margin-left: -94px;
}

/*
        this is the style for the search bar WITHOUT arrows
        it is centered in the middle of the browser
 */
.boxSearchBarWithoutArrows {
  position: absolute;
  left: 50%;
  /*
  why -60px:
  - 120px width of the middle button
  => sum: 120px
  this has to be divided by 2 to get the mod
  -> 60px

  IMPORTANT: if some of the above values are changed, margin-left MUST be newly calculated!!!
   */
  margin-left: -60px;
}

/*
        this is the style for the search bar content
 */
.searchBar {
  float: left;
  width: 120px;
  height: 30px;
  margin-right: 5px;
  padding: 6px;
  background-color: var(--red-medium);
  color: white;
  box-sizing: border-box;
  text-align: center;
  opacity: 0.95;
  font-weight:normal;
}

/*
        this is the style for hovering over the search bar
 */
.searchBar:hover {
  cursor: pointer;
}

/*
        this is the style for the search bar label text
 */
.searchBar .label {
  color: #000000;
  z-index: 999;
}

/*
        this is the style for the search bar arrow
 */
.searchBarArrow {
  width: 24px;
}

/*
        end of CSS styles for the search bar
*/


/*
        start of CSS styles for modal popup
*/

/*
        this style prevents background scrolling when the modal popup is open
        in function openExhibitorModal the classname "noscroll" will be added to <html> and <body> tag
        this  setup is also working with Safari on iOS
 */
html.noscroll,
body.noscroll {
  overflow: hidden;
  /* 27.07.2019:  position: fixed; */
  height: 100%;
}

/*
        this style formats the modal popup for exhibitors, byuers guide and showcases
 */
.modal {
  /* This way it could be display flex or grid or whatever also. */
  display: block;
  width: 300px;
  max-width: 100%;

  height: 500px;
  max-height: 100%;

  position: fixed;

  /* the z-index here MUST be higher than the menu z-index so that the modal is displayed above the menu */
  z-index: 2500;

  left: 50%;
  top: 50%;

  /* Use this for centering if unknown width/height */
  transform: translate(-50%, -50%);

  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

/*
        this style hides the modal popup
 */
.closed {
  display: none;
}

/*
        this style is set when opening the modal popup
 */
.opened {
  display: block;
}

/*
        this style is set when opening the modal popup
 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;

  background: rgba(0, 0, 0, 0.6);
}

/*
        this style is set when opening the modal popup
 */
.modal-guts {
  text-align: left;
  position: absolute;
  bottom:100px;
  top:100px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

/*
        this style is set when opening the modal popup
 */
.modal-text {
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 10px;
  line-height: 1.8;
  font-weight: normal;
}

.modal-text > li {
  list-style-type: none;
}

/*
        this is the style for the close button the modal popup
 */
.modal .close-button {
  position: absolute;
  z-index: 999;

  top: -15px;
  right: -15px;

  border: 0;
  /* background: white; */
  /* color: white; */
  font-size: var(--font-lg);
}


/*
        end of CSS styles for modal popup
*/

@media all and (min-width:800px) {
  #back2top {
    display: none
  }
}
/*! 
    read MORE button
    used multiple times on main page
*/
.readMore {
  font-size: var(--font-md);
  overflow: hidden;
  /*height: 1.5em;*/
  /*padding: .5em;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  justify-content: end;
}
.readMore .readMoreButton {
  /*  background-color: #f1f1f1; */
  text-decoration: none;
  cursor: pointer;
  color: var(--blue-dark);
  /*  border-top: 1px solid red;
    border-bottom: 1px dotted red; */
  padding: 1px 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  white-space: nowrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}

/* problem with svg right img on index.php */
.readMoreButton img {
  height: 100%;
  width: auto;
  margin-left: 5px
}


.readMoreButton .label {
  font-weight: 700
}
/*! 
    Spacing helpers
*/
.control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch
}
.control > .label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.control > input {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto
}
.clear {
  clear: both
}
.hide {
  display: none!important
}
/*!
    Buttons helpers
*/

.buttonStand {
  border-radius: 4px;
  background-color: var(--red-medium);
  font-size: var(--font-md);
  /* height: 0.8em;
   line-height: 1em; */
  /* border-top: 1px solid red;
  border-bottom: 1px dotted var(--blue-medium); */
  margin: 0;
  text-align: center;
  color: var(--white);
  padding: 0;
  overflow: hidden;
  text-decoration: none
}


.buttonSmall {
  font-size: var(--font-sm);
  border-radius: 4px;
  background-color: var(--red-medium);
  margin: 0;
  text-align: center;
  color: var(--white);
  padding: 0;
  overflow: hidden;
  text-decoration: none
}


.button {
  height: 1.2em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border: 0 solid #ff69b4;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.button > .icon {
  padding: 0 .1em;
  padding-top: 0;
  /*! align font baseline vs descender line */height: 1em
}
.button > .icon > img {
  margin: 0;
  padding: 0;
  height: 100%;
  width: auto
}
/*
    hinzugefügt, um im Issue Header ein transparentes Icon 40x20 anzuzeigen,
    das nicht ausgewählt werden kann via Maus Select.
    Dieses Icon dient der mittigen Ausrichtung des Issue Textes in der Mitte, wenn es keinen nächsten Monat gibt
 */
.button > .icon > img > .hidden {
  user-select:none;
  -ms-user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
}

.button > .label {
  line-height: 1em;
  padding: 0 .1em
}
.buttonSmall:hover {
  background-color: #aaa;
  cursor: pointer
}

/*
        style for the loader animation when loading an issue on the press of the next month/previous month button
*/
.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*
        start style for the images in productBox in announcement_api.php
        the original polish version is not working
*/

.imageFrame {
  height: 66px;      /* equals max image height */
  width: 100px;
  /* zum Debuggen:
  border: 1px solid red;
   */
  white-space: nowrap;

  text-align: center;
  /* margin: 1em 0; */
}

.imageHelper {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

.imageFormat {
  background: #3A6F9A;
  vertical-align: top;
  max-height: 66px;
  max-width: 100px;
}

/*
        end style for the images in productBox in announcement_api.php
*/


/* 01.12.18: eingefügt auf Anraten von Tom zum Fix IE11 background color */
.fixedWidth {
  background-color: white;
}

.greyText {
  color: grey !important;
}
/*
 Link Farbe für den INFO Link des Cookies "cookieAccepted"
 */
.info > a:link {
  color:white;
}

/*
        start of style for folding arrows
 */
input.foldingArrow {
  float:right;
  border: none;
  cursor:pointer;
  outline:none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  margin-right: 0px;
  /* prevents tapped highlight on Android */
  -webkit-tap-highlight-color:transparent;
}

.foldingArrow {
  background-color: transparent;
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  float:right;
  margin-top: -8px;
  /* prevents tapped highlight on Android */
  -webkit-tap-highlight-color:transparent;

}
/* set dimension of the button*/
.foldingArrow > span > img{
  width: 20px;
  outline: none;
}

input.foldingArrow:focus,
input.foldingArrow:active,
.foldingArrow:active,
.foldingArrow:focus {
  outline: none;
}

/*
        this style is current not used since toggle between open and closed is done with separate png images
*/
.foldingClosed {
  /*transform: rotateX(0deg);*/
}

/*
        this style is current not used since toggle between open and closed is done with separate png images
*/
.foldingOpen {
  /*transform: rotateX(180deg);*/
}
/*
        end of style for folding arrows
 */


.moreArrow {
  width: 20px;
  height: 15px;
  transform: rotateX(270deg);
}

/*
    die Klasse label in einer newsBox oder productBox wird 15px groß gemacht
 */
.bodyReadMoreButton > .label {
  font-size: var(--font-md);
  font-weight: 1000;
  color: #a4c0d0;
}

.bodyReadMoreButton > .label:hover {
  cursor: pointer;
}

@media all and (max-width:800px) {
  .bodyReadMoreButton > .label {
    font-size: var(--font-md);
    font-weight: 1000;
    color: #a4c0d0;
  }

}

.completelyClickableDiv {
  cursor: pointer;
}

.invert {
  filter: invert(1);
}

.filter-dark-blue {
  /* see: https://codepen.io/sosuke/pen/Pjoqqp */
  filter: invert(24%) sepia(18%) saturate(894%) hue-rotate(158deg) brightness(92%) contrast(96%);
}

.filter-medium-blue {
  /* see: https://codepen.io/sosuke/pen/Pjoqqp */
  filter: invert(43%) sepia(22%) saturate(775%) hue-rotate(158deg) brightness(90%) contrast(91%);
}

.row {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.row-sm {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .25em;
}

.row-md {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5em;
}

.row-lg {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}

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

.col-sm {
  display: flex;
  flex-direction: column;
  gap: .25em;
}

.col-md {
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.linkNext::before,
.linkPrev::before {
  position: relative;
  top: -2px;
  font-size: 80%;
}

.linkPrev::before {
  content: "◀";
  margin-right: .35em;
}

.linkNext::after {
  content: "▶";
  margin-left: .35em;
}

.newsletterButton {
  padding: .5em 1em;
  background-color: var(--blue-dark);
  color: var(--white) !important;
  font-size: var(--font-lg);
  text-align: center;
  display: flex;
  align-items: center;
  gap: .35em;
  width: fit-content;
}

.newsletterButton img {
  height: var(--font-md);
}

.card .card__before {
  padding-bottom: .8em;
}

.card .card__links {
  display: flex;
  /* gap: .25em; */
  margin-bottom: .5em;
  border-bottom: 1px solid var(--gray-light);
  line-height: 1.4;
  flex-wrap: wrap;
  font-size: var(--font-md);
}

.card .card__links > * {
  padding: 0.8rem;
}

.card .card__links > .active {
  border-bottom: 2px solid var(--blue-dark);
}

.card .card__links > .disabled {
  opacity: .5;
}

.card .card__links.card__links--minus-margin {
  margin-left: -1em;
  margin-right: -1em;
}

.card .card__heading {
  padding: .8em 1em;
  background-color: var(--blue-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
  font-size: var(--font-md);
  font-weight: 700;
}
.card .card__body {
  padding: 1em;
  background-color: var(--white);
  box-shadow: var(--shadow-md);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
}

.card .card__body--no-shadow {
  box-shadow: none;
}

.card .card__body--no-shadow {
  box-shadow: none;
}

.card .card__body-result {
  padding: 1em 0;
}

.card .card__body-result > .contentBox {
  padding: 1em;
}

.card .card__body-result > .titleBarSmall {
  margin-left: 1em;
  margin-right: 1em;
}

.card .card__footer {
  border-top: 1px solid var(--gray-light);
  padding-top: 1em;
  margin-top: 1em;
}

.card .card__after {
  padding-top: .5em;
}

.card .card__title-bar {
  color: var(--blue-dark);
  /* display: block; */
  height: 1.5em;
  border-bottom: 1px solid var(--gray-medium);
  margin: 1.5em 1em 1em;
  text-align: center;
  font-weight: 700;
  font-size: var(--font-md);
}

.card .card__title-bar--lg {
  font-size: var(--font-lg);
  border-bottom: 1px solid var(--gray-medium);
}

.card .card__title-bar--left {
  text-align: left;
  margin: 1.5em 0;
}

.card--main {
  max-width: var(--card-max-width);
}

.card--max {
  max-width: var(--content-width);
}

.card--forum {
  max-width: var(--banner-width);
}

.card--error {
  border: 1px solid var(--red-medium);
  box-shadow: 0;
  color: var(--red-medium);
}

.card--error > .card__heading {
  background-color: var(--red-medium);
  color: var(--white);
}

.card__table > tbody > tr > td {
  padding: var(--padding-sm);
}

.card__table--condensed > tbody > tr > td {
  padding: var(--padding-xs) var(--padding-sm);
}

.card__table > tbody > tr.header {
  background-color: var(--blue-dark);
  text-align: center;
  display: table-row !important;
  height: initial;
}

.card__table > tbody > tr.header > td {
  color: var(--white);
}

.card-sm .card__before {
  padding-bottom: .5em;
}
.card-sm .card__heading {
  padding: .25em .5em;
  background-color: var(--blue-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
  font-size: var(--font-md);
  font-weight: 700;
}

.card-sm .card__body {
  padding: .5em;
  background-color: var(--white);
  box-shadow: var(--shadow-md);
}

.card-sm .card__footer {
  border-top: 1px solid var(--gray-light);
  padding-top: .5em;
  margin-top: .5em;
}

.card-sm .card__after {
  padding-top: .5em;
}

.list {
  padding-left: 1em;
  margin: 0;
  width: 100%;
  text-align: left;
}

.list-unstyled {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.input {
  border: 1px solid var(--gray-light);
  outline: none;
  box-shadow: none;
  padding: .25rem .5rem;
  color: var(--blue-dark);
  border-radius: 0;
  margin: 0;
}

.input:placeholder-shown{
  color: var(--gray-dark);
}

.input--lg {
  padding: .5rem;
}

.input--full {
  width: 100%;
}

.forumPreview {
  background-color: var(--white);
  width: 100%;
  max-width:700px;

  .forumPostGroup {
    outline: 1px solid var(--gray-light);
    box-shadow: var(--shadow-md);
    border: none;

    .forumPostGroup__heading {
      padding: .5em;
      outline: 1px solid var(--blue-dark);
      background-color: var(--blue-dark);
      color: var(--white);

      & a {
        color: var(--white);

        &:hover, &:active, &:focus-visible {
          /*color: var(--blue-light);*/
        }
      }

      & i {
        font-size: var(--font-sm);
        color: var(--gray-medium);
      }
    }

    .forumPost {
      border-bottom: 1px solid var(--gray-light);
      padding: .5em 1em;
      display: flex;
      flex-direction: column;
      gap: .125em;
      color: var(--blue-dark);

      .forumPost__row {
        display: flex;
        justify-content: space-between;

        &:last-of-type {
          margin-top: var(--margin-xs);
          font-size: var(--font-sm);
        }

        .forumPost__userIcon {
          height: var(--font-md);
        }

        .forumPost__title {
          /* font-weight: bold; */
        }

        .forumPost__replies {
          display: flex;
          align-items: center;
          gap: .5em;
          font-weight: bold;
          padding: .125em .5em;
          color: var(--blue-dark);

          & img {
            height: var(--font-sm);
          }
        }
      }
    }
  }

  .forumPreview__footer {
    padding: .5em 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.comment .comment__heading {
  background-color: var(--white);
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.5rem;
}
.comment .comment__heading-side {
  float: left;
  width: 150px;
  max-width: 600px;
  margin-right: .5em;
}
.comment .comment__body {
  background-color: var(--white);
  padding: 0 0 1em;
  color: var(--blue-dark);
  width: 100%;
  line-height: 1.4;
}

.comment .comment__body p {
  margin: 1em 0 0;
}

.comment .comment__footer {
  background-color: var(--white);
  border: none;
}

.button-primary,
input[type=submit]{
  font-family: var(--font-family);
  font-size: var(--font-md);
  width: fit-content;
  border: none;
  outline: none;
  box-shadow: none;
  padding: .5em 1em;
  border-radius: .25em;
  transition: 50ms;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;

  color: var(--white);
  background-color: var(--blue-dark);
}

.button-primary:not(.disabled):hover,
.button-primary:not(.disabled):active,
.button-primary:not(.disabled):focus-visible,
input[type=submit]:not(.disabled):hover,
input[type=submit]:not(.disabled):active,
input[type=submit]:not(.disabled):focus-visible {
  background-color: var(--blue-medium);
}

.button-base {
  font-family: var(--font-family);
  font-size: var(--font-md);
  width: fit-content;
  border: none;
  outline: none;
  box-shadow: none;
  padding: .5em 1em;
  border-radius: .25em;
  transition: 50ms;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}

.button-base > svg {
  height: 1rem;
  width: auto;
}

.button-base > svg:first-child {
  display: initial;
}

.button-base > svg:last-child {
  display: none;
}

.button-base:hover > svg:first-child,
.button-base:active > svg:first-child,
.button-base:focus-visible > svg:first-child {
  display: none;
}

.button-base:hover > svg:last-child,
.button-base:active > svg:last-child,
.button-base:focus-visible > svg:last-child {
  display: initial;
}

.button-primary-outline {
  background-color: var(--white);
  color: var(--blue-dark);
  border: 1px solid var(--blue-dark);
}

.button-primary-outline:not(.disabled):hover,
.button-primary-outline:not(.disabled):active,
.button-primary-outline:not(.disabled):focus-visible{
  background-color: var(--blue-dark);
  color: var(--white) !important;
}

.button-primary-outline:not(.disabled):hover > svg > path,
.button-primary-outline:not(.disabled):active > svg > path,
.button-primary-outline:not(.disabled):focus-visible > svg > path {
  fill: var(--white) !important;
}

.button-secondary {
  font-family: var(--font-family);
  width: fit-content;
  border: none;
  box-shadow: none;
  padding: .5em 1em;
  border-radius: .25em;
  transition: 50ms;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;

  background-color: var(--white);
  color: var(--blue-dark);
  outline: 1px solid var(--gray-light);
}

.button-secondary:not(.disabled):hover,
.button-secondary:not(.disabled):active,
.button-secondary:not(.disabled) {
  background-color: var(--gray-light);
}

.button-secondary-outline {
  width: fit-content;
  border: none;
  box-shadow: none;
  padding: .5em 1em;
  border-radius: .25em;
  transition: 50ms;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;

  background-color: transparent;
  color: var(--white);
  outline: 1px solid var(--white);
}

.button-secondary-outline:not(.disabled):hover,
.button-secondary-outline:not(.disabled):active,
.button-secondary-outline:not(.disabled):focus-visible {
  color: var(--blue-dark) !important;
  background-color: var(--white) !important;
}

.button-tertiary {
  width: fit-content;
  border: none;
  box-shadow: none;
  padding: .5em 1em;
  border-radius: .25em;
  transition: 50ms;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;

  background-color: var(--gray-light);
  color: var(--gray-dark);
  outline: 1px solid var(--gray-medium);
}
.button-tertiary:not(.disabled):hover,
.button-tertiary:not(.disabled):active,
.button-tertiary:not(.disabled):focus-visible {
  background-color: var(--gray-light);
}

.button-gray {
  background-color: var(--gray-light);
  color: var(--blue-dark) !important;
  border: 1px solid var(--gray-light);
}

.button-gray:not(.disabled):hover,
.button-gray:not(.disabled):active,
.button-gray:not(.disabled):focus-visible {
  color: var(--white);
  background-color: var(--gray-medium);
}

.button-cta,
.button-red-medium {
  background-color: var(--red-medium);
  color: var(--white) !important;
  border: 1px solid var(--red-medium);
}

.button-cta:not(.disabled):hover,
.button-cta:not(.disabled):active,
.button-cta:not(.disabled):focus-visible,
.button-red-medium:not(.disabled):hover,
.button-red-medium:not(.disabled):active,
.button-red-medium:not(.disabled):focus-visible {
  background-color: var(--red-dark);
}

.button-blue-medium {
  background-color: var(--blue-medium);
  color: var(--white) !important;
  border: 1px solid var(--blue-medium);
}

.button-blue-medium:not(.disabled):hover,
.button-blue-medium:not(.disabled):active,
.button-blue-medium:not(.disabled):focus-visible {
      background-color: var(--blue-dark);
}

.button-sm {
  font-size: var(--font-sm);
  padding: .125em .5em;
}

.button-small {
  font-size: 12px;
}

.button-lg {
  /* font-size: var(--font-lg); */
  padding: 0.75em 1em;
}

.button-group--before-form {
  width: 100%;
  padding-left: var(--padding-sm);
  padding-right: var(--padding-sm);
}

@media screen and (min-width: 800px) {
  .button-group--before-form {
    padding-left: 0;
    padding-right: 0;
  }
}

.button-close {
  height: 28px;
  width: 28px;
}

.disabled {
  cursor: default;
}

.bold {
  font-weight: bold;
}

.bg-white {
  background-color: var(--white) !important;
}

.color-white {
  color: var(--white) !important;
}

.color-blue-dark {
  color: var(--blue-dark) !important;
}

.color-red-medium {
  color: var(--red-medium);
}

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

.size-md {
  height: var(--font-md);
}

.size-lg {
  height: var(--font-lg);
}

.size-xl {
  height: var(--font-xl);
}

.arrows-left {
  display: flex;
  gap: 0.25em;
}

.arrows-left::before {
  content: '« ';
}

.arrows-right {
  display: flex;
  gap: 0.25em;
}

.arrows-right::after {
  content: ' »';
}

.login-form {
  --padding-x: max(1em, var(--padding));
  padding: .5em var(--padding-x);
  /*background-color: var(--white);*/
  width: calc(100vw - 2 * var(--padding-x));
  position: relative;
  left: calc(var(--padding) * -1);

  display: flex;
  justify-content: end;
  align-items: center;
  gap: .5em;
}

.forthcomingWrapper {
  padding: 1em var(--padding);
  background-color: var(--white);
  width: calc(100vw - 2 * var(--padding));
  position: relative;
  left: calc(var(--padding) * -1);
}

.search-results-table thead > tr > td {
  background-color: var(--blue-dark);
  color: var(--white);
}

.search-results-table td {
  padding: .25em .5em;
}

.asideGrid {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
}

.asideGrid > *:first-child {
  justify-self: start;
}

.asideGrid > *:last-child {
  justify-self: end;
}

.table-border {
  border-bottom: solid 1px var(--gray-light);
}

.flex-110 {
  flex: 110;
}

@media screen and (min-width: 576px) {
  .filter__wrapper {
    flex-direction: row;
  }

  .filter__item-lg {
    width: calc(2 * var(--item-width) + .25em);
  }
}

.ad-banner {
  max-width: calc(800px - 1em);
  height: calc(90px + 1em);
  flex-wrap: nowrap !important;
  padding: .5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-banner .ad-banner__item {
  flex-grow: 1;
  text-align: center;
}

.content-filter-row {
  display: flex;
  align-items: start;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 1024px;
}

.content-filter-row--reverse {
  flex-direction: row-reverse;
}

/* UTILITIES */

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

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

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

.cursor-pointer {
  cursor: pointer;
}

.relative {
  position: relative;
}

/* UTILITIES: MARGINS */
.m-0 {
  margin: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: var(--margin-xs) !important;
}
.mb-2 {
  margin-bottom: var(--margin-sm) !important;
}

.mb-common,
.mb-3 {
  margin-bottom: var(--margin-md) !important;
}
.mb-4 {
  margin-bottom: var(--margin-lg) !important;
}

.mt-1 {
  margin-top: var(--margin-xs) !important;
}

.mt-2 {
  margin-top: var(--margin-sm) !important;
}

.mt-common,
.mt-3 {
  margin-top: var(--margin-md) !important;
}

.mt-4 {
  margin-top: var(--margin-lg) !important;
}

.ml-1 {
  margin-left: var(--margin-xs) !important;
}

.ml-2 {
  margin-left: var(--margin-sm) !important;
}

.ml-common,
.ml-4 {
  margin-left: var(--margin-lg) !important;
}

.mr-1 {
  margin-right: var(--margin-xs) !important;
}

.mr-2 {
  margin-right: var(--margin-sm) !important;
}

.m-auto {
  margin: auto !important;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.my-2 {
  margin-top: var(--margin-sm) !important;
  margin-bottom: var(--margin-sm) !important;
}

.my-4 {
  margin-top: var(--margin-lg) !important;
  margin-bottom: var(--margin-lg) !important;
}

@media screen and (min-width: 800px) {
  .mt-common {
    margin-top: var(--margin-xl) !important;
  }

  .mt-common.mobile {
    margin-top: 0 !important;
  }

  .mb-common {
    margin-bottom: var(--margin-xl) !important;
  }

  .mb-common.mobile {
    margin-bottom: 0 !important;
  }
}

.p-0 {
  padding: 0 !important;
}

.p-2 {
  padding: var(--padding-sm) !important;
}

.p-4 {
  padding: var(--padding-lg) !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-2 {
  padding-top: var(--padding-sm) !important;
}

.pb-2 {
  padding-bottom: var(--padding-sm) !important;
}

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

.px-1 {
  padding-left: var(--padding-xs) !important;
  padding-right: var(--padding-xs) !important;
}

.px-2 {
  padding-left: var(--padding-sm) !important;
  padding-right: var(--padding-sm) !important;
}

.px-4 {
  padding-left: var(--padding-lg) !important;
  padding-right: var(--padding-lg) !important;
}

.py-1 {
  padding-top: var(--padding-xs) !important;
  padding-bottom: var(--padding-xs) !important;
}

.py-2 {
  padding-top: var(--padding-sm) !important;
  padding-bottom: var(--padding-sm) !important;
}

.py-3 {
  padding-top: var(--padding-md) !important;
  padding-bottom: var(--padding-md) !important;
}

.py-4 {
  padding-top: var(--padding-lg) !important;
  padding-bottom: var(--padding-lg) !important;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.d-block {
  display: block;
}

.w-full {
  width: 100% !important;
}

.w-content {
  max-width: var(--content-width);
  width: var(--content-width);
}

.max-w-800,
.w-max-800 {
  max-width: 800px;
}

.max-w-1000,
.w-max-1000 {
  max-width: 1000px;
}

.max-w-1024,
.w-max-1024 {
  max-width: 1024px;
}

.w-min-33 {
  min-width: 33%;
}

.w-min-50 {
  min-width: 50%;
}

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

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

.text-base,
.text-md {
  font-size: var(--font-md) !important;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.align-center {
  display: flex;
  align-items: center;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-start {
  display: flex;
  justify-content: start;
}

.justify-end {
  display: flex;
  justify-content: end;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

/* UTILITIES: LISTS */
.list-column-2 {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

/* UTILITIES: BORDER */
.border-0 {
  border: 0;
}

/* CONTENT */
.content--tablet {
  max-width: var(--breakpoint-tablet);
  width: 100%;
}

/* COLORS */
.bg-dark-blue,
.bg-member {
  background-color: var(--bg-color-member);
}

.bg-exhibitor {
  background-color: var(--bg-color-exhibitor);
}

.bg-author {
  background-color: var(--bg-color-author);
}

.color-error {
  color: var(--red-medium) !important;
}

.color-muted, .color-sub-title {
  color: var(--gray-dark) !important;
}

.color-member {
  color: var(--color-member);
}

.color-exhibitor {
  color: var(--color-exhibitor);
}

.color-author {
  color: var(--color-author);
}

.color-link {
  color: var(--color-link);
}

/* BADGES */
.badge {
  border-radius: 4px;
  font-size: var(--font-sm);
  margin-right: var(--margin-sm);
  line-height: 1em;
  background-color: var(--blue-medium);
  color: var(--white) !important;
  padding: 2px 4px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

.badge > a {
  color: var(--white) !important;
}

.badge > a:hover {
  filter: invert(30%);
}

.badge--primary {
  background-color: var(--blue-medium) !important;
  color: var(--white) !important;
}

.badge--secondary {
  background-color: var(--gray-medium) !important;
  color: var(--blue-medium) !important;
}

/* TABLES */
.table--no-border {
  border: 0;
  border-spacing: 0;
}

/* EXHIBIT MENU SHOWCASES */
.exhibition_menu {
  font-family: var(--font-family);
}

.exhibition_menu .exhibition-showcases > .level1 {
  cursor: pointer;
  display: inline;
  background-image:url('/pic/plus.gif');
  background-repeat:no-repeat;
  background-position: 0px 50%;
  background-size: 12px 12px;
}

.exhibition_menu .exhibition-showcases .level1__text {
  color: var(--blue-medium);
  font-size: var(--font-md);
  position: relative;
  left: 16px;
  display: inline;
  cursor: pointer;
  /* font-weight: bold; */
  padding-right: 14px;
  white-space: nowrap;
}

.exhibition_menu .exhibition-showcases .open {
  background-image:url('/pic/minus.gif');
  background-position: 0px 50%;
}

.exhibition_menu .exhibition-showcases .level2 {
  display: block;
  background-image:url('/pic/plus.gif');
  background-repeat:no-repeat;
  background-position: 3px 50%;
  background-size: 12px 12px;
}

.exhibition_menu .exhibition-showcases .level2__text {
  font-size: 11px;
  position: relative;
  left: 20px;
  display: inline;
  cursor: pointer;
  font-weight: normal;
  padding-right: 17px;
}

.exhibition_menu .exhibition-showcases .level3__text {
  font-size: 11px;
  position: relative;
  left: 15px;
  display: block;
  padding-right: 15px;
}

.exhibition_menu .exhibition-showcases .level1--open {
  background-image:url('/pic/minus.gif');
  background-position: 5px 2px;
}

.exhibition_menu .exhibition-showcases .section {
  padding-top: 0.2rem;
  padding-bottom: 0.6rem;
  font-size: 11px;
}

.exhibition_menu .exhibition-showcases .num {
  font-size:9px;
}

.exhibition_menu .exhibition-showcases a { text-decoration: none; }
.exhibition_menu .exhibition-showcases a:link,.exhibition_menu .exhibition-showcases a:visited { color: var(--blue-medium); }
.exhibition_menu .exhibition-showcases a:hover { color: var(--red-medium); }

/* EXHIBITION BUYERS GUIDE & SHOWCASE */

.exhibition-result-table {
  max-width: 800px;
  border-spacing: 0px;
  width: 100%;
  text-align: center;
}

.exhibition-result-table__head-table {
  background-color: var(--blue-dark);
  width: 100%;
  max-width: 800px;
  border: 0;
  color: var(--white);
}

.exhibition-result-table__heading {
  padding: 0.6em 1em;
  color: var(--white);
  font-size: var(--font-md);
}

.exhibition-result-table__sub-heading {
  color: var(--gray-medium);
  font-size: var(--font-md);
  font-style: italic;
}

.exhibition-result-table__content-table {
  border-spacing: 0;
  width: 100%;
  background-color: var(--white);
}

.exhibition-result-table__content-table > tbody > tr:first-child {
  background-color: var(--blue-dark);
}

.exhibition-result-table__content-table > tbody > tr:first-child > td {
  border: 1px solid var(--white);
  padding: 0.25rem;
}

.exhibition-result-table__content-table > tbody > tr:first-child > td:first-child {
  border-left: 0px;
}

.exhibition-result-table__content-table > tbody > tr:first-child > td:last-child {
  border-right: 0px;
}

.exhibition-list-showcases {
  background-color: var(--white);
  border: 0;
  width: 100%;
}

.exhibition-list-showcases__td-media {
  vertical-align: top;
  padding: 0.25em 0.5em;
}

.exhibition-list-showcases__td-content {
  width: 100%;
  vertical-align: top;
  padding: 0.25em 0.5em;
  text-align: left;
}

.exhibition-list-showcases__td-content .title {
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: bold;
}

/* EXHIBITION REGISTRATION & EDIT AREA */
.exhibition-registration__table {
  border: 0;
  width: 750px;
}

.exhibition-registration__sidenav {
  width: 220px;
  margin-right: 1.5em;
  text-align: left;
}

.exhibition-registration__sidenav .card__body {
  font-size: var(--font-md);
  /* padding-left: var(--padding-xs);
  padding-right: var(--padding-xs); */
}

.exhibition-registration__sidenav .sidenav__list-item {
  display: flex;
  align-items: center;
  gap: 0.2em;
  margin-bottom: var(--margin-xs);
}
  
.exhibition-registration__sidenav .sidenav__list-item:last-child {
  margin-bottom: 0;
}

/* EXHIBITION STAND */
.exhibition-stand__description {
  width: 100%;
  overflow: hidden;
  max-width: calc(var(--content-width) - 4em);
  position: relative;
  clear: both;
  text-align: left;
  padding: 0.5rem 0;
}

.exhibition-stand__description td,
.exhibition-stand td {
  padding: 0 !important;
}

.exhibition-stand td > table td,
.exhibition-stand td.ignore {
  padding: .25em .5em !important;
}


.exhibition-stand__contact-table {
  margin: 1rem 1rem 0 0;
  border-radius: 4px;
  border: 1px solid --gray-dark;
}

.exhibition-stand__contact-table td {
  padding: 0.25rem 0.5rem !important;
}

@media screen and (min-width: 800px) {
  .exhibition-stand__description {
    padding: 1rem;
  }
}

/* LIBRARY SITE */
.library-site__checkbox-item {
  white-space: nowrap;
  border: 1px solid #dddddd;
  background-color: var(--white);
  padding: var(--padding-xs);
}

@media screen and (min-width: 768px) {
  .library-site__checkbox-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.columns-sidebar-main {
  max-width: var(--breakpoint-laptop);
  min-width: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 212px minmax(auto, 800px);
  gap: 1rem;
  align-items: start;
}

.columns-sidebar-main .columns-sidebar-main__sidebar {
  width: 100%;
}

.columns-sidebar-main .columns-sidebar-main__main-content {
  width: 100%;
}

/* FORUM */
.forum-card {
  max-width: var(--banner-width);
}

.forum-card .card__heading {
  padding: .5em;
  outline: 1px solid var(--blue-dark);
  background-color: var(--blue-dark);
  color: var(--white) !important;
  text-align: left;
}

.forum-card .card__heading a {
      color: var(--white) !important;
}

.forum-card .card__heading i {
  font-weight: 400;
  font-size: var(--font-sm);
  color: var(--gray-medium) !important;
}

.forum-card .card__heading > .card__heading-buttons {
  margin-top: var(--margin-sm);
  font-weight: var(--font-weight-base);
}

.forum-card .card__body {
  padding: 0;
}

.forum-card .card__footer {
  margin-top: 0;
  border-top: 0;
  padding: .5em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.forum-post {
  border-bottom: 1px solid var(--gray-light);
  padding: .5em 1em;
  display: flex;
  flex-direction: column;
  gap: .125em;
  color: var(--blue-dark);
  text-align: left;
}

.forum-post > .forum-post__row {
  /* display: flex;
  justify-content: space-between; */
  display: grid;
  grid-template-columns: auto 150px;
  gap: 0.4rem;
}

.forum-post > .forum-post__row > .forum-post__title {
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  display: inline-block;
}

.forum-post > .forum-post__row:last-of-type {
  margin-top: var(--margin-xs);
  font-size: var(--font-sm);
}

.forum-post > .forum-post__row .forum-post__userIcon {
  height: var(--font-md);
}

.forum-post > .forum-post__row .forum-post__replies {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: .5em;
  font-weight: bold;
  padding: .125em .5em;
  color: var(--blue-dark);
}

.forum-post > .forum-post__row .forum-post__replies img {
  height: var(--font-sm);
}

.forum-post > .forum-post__row > *:last-child {
  justify-content: end;
}

.forum__organization-list {
  flex-direction: column;
  align-items: start;
}

.forum__organization-list > select {
  width: 80%;
}

.forum-search-card {
  text-align: left;
  max-width: 400px;
}

@media screen and (min-width: 800px) {
  .forum__organization-list {
    min-width: 400px;
    flex-direction: row;
    align-items: center;
  }

  .forum__organization-list > select {
    width: auto;
  }
}

/* ERRORS */
.error-card > .card__body > .card__title-bar {
  height: initial;
}

/* FILTER */
.filter-card .filter-card__title {
  font-weight: var(--font-weight-bold);
  color: var(--blue-dark);
  display: block;
  margin-bottom: var(--margin-sm);
}

/* DIRECTORY */
.directory-card > .card__body {
    padding: 0;
}
.directory-card > .card__body > .title {
  display: block;
  font-weight: var(--font-weight-bold);
  text-align: center;
  padding: var(--padding-sm);
  font-size: var(--font-md);
}


.directory-card > .card__footer {
  display: block;
  background-color: var(--white);
  padding: var(--padding-sm);
  border: 0;
  margin: 0;
}
.directory-card > .card__footer > a {
  display: block;  
}

/* ARCHIVE */
.archive-result__suggestions-sorting {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.archive-results__sorting {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.5em;
}

.archive-issue__heading {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

@media screen and (min-width: 800px) {
  .archive-result__suggestions-sorting {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
}

/* HEADER */
header {
  background-color: var(--white);
}

.header {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  max-width: var(--content-width);
  height: 74px;
  max-height: 74px;
  position: relative;
  margin: auto;
  align-items: center;
  padding: 0.5rem 1rem;
}

.header__navigation {
  display: none;
  background-color: var(--white);
  width: 100%;
  overflow: hidden;
}

.header__navigation > .menuMain {
  max-width: var(--content-width);
  margin: auto;
  width: 100%;
  position: relative;
  left: auto;
  text-align: center;
  padding: 0.5rem 0 0;
}

.header__logo {
  display: flex;
  align-items: center;
  justify-content: start;
}

.header__logo > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header__logo > div > span {
  /* font-size: var(--font-sm); */
  font-size: 12px;
  color: var(--blue-dark);
}

#headerSearchBarMobile > h5 {
  text-align: center;
}

.header__search {
  display: none;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.header__search > h5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--blue-dark);
  font-size: 12px;
}

.header__search-bar {
  /* display: flex;
  align-items: center; */
  position: relative;
  width: 100%;
}

.header__search-bar > input {
  width: 100%;
  height: 36px;
  border-radius: 0.25rem;
  border: 1px solid var(--blue-dark);
  color: var(--blue-dark);
  padding-left: 0.5em;
  padding-right: 36px;
  font-size: 16px; /* to prevent zoom in iOS */
}

.header__search-bar > input:focus,
.header__search-bar > input:focus-visible,
.header__search-bar > input:target,
.header__search-bar > input:active {
  outline-color: var(--blue-light);
  outline: 2px solid var(--blue-light);
}

.header__search-bar > .label {
  height: 36px;
  width: 36px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__search-bar > .label > img {
  height: 20px;
  width: 20px;
}

.header__profile {
  display: none;
  position: relative;
  overflow: hidden;
}

.header__profile-items {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1em;
}

.header__profile-item {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  height: 100%;
  justify-items: center;
}

.header__profile-item > a > .header__profile-image,
.header__profile-item > .header__profile-image {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background-color: var(--blue-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--blue-dark);
}

.header__profile-item > a > .header__profile-icon,
.header__profile-item > .header__profile-icon {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background-color: var(--white);
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--blue-dark);
}

.header__profile-item > a > .header__profile-image.header__profile-image--author,
.header__profile-item > .header__profile-image.header__profile-image--author {
  background-color: var(--bg-color-author);
  border-color: var(--border-color-author);
}

.header__profile-item > a > .header__profile-image.header__profile-image--exhibitor,
.header__profile-item > .header__profile-image.header__profile-image--exhibitor {
  background-color: var(--bg-color-exhibitor);
  border-color: var(--border-color-exhibitor);
}

.header__profile-item > a > .header__profile-image.header__profile-image--member,
.header__profile-item > .header__profile-image.header__profile-image--member {
  background-color: var(--bg-color-member);
  border-color: var(--border-color-member);
}

.header__profile-item > a > .header__profile-image.header__profile-image--logout,
.header__profile-item > .header__profile-image.header__profile-image--logout {
  background-color: var(--bg-white);
  border: 0;
}

.header__profile-item > a > .header__profile-image.header__profile-image--icon > svg {
  height: 20px;
  width: 20px;
}

.header__profile-item.mobile > a > .header__profile-icon,
.header__profile-item.mobile > a > .header__profile-image {
  height: 2rem;
  width: 2rem;
}

.header__profile-image > img {
  /* position: absolute;
  top: 0;
  left: 0; */
  object-fit: contain;
  width: 100%;
  height: auto;
}

.header__profile-label {
  /* font-size: var(--font-sm); */
  font-size: 12px;
}

.header__profile-label.header__logout-label {
  color: var(--color-link);
  cursor: pointer;
}

.header__profile-label.header__logout-label:hover {
  filter: invert(30%);
}

.header__links {
  display: none;
  justify-content: end;
  gap: 1rem;
  /* font-size: var(--font-sm); */
  font-size: 12px;
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
}

.header__buttons {
  display: flex;
  justify-content: end;
  gap: 0.5rem;
}

.header__buttons > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.header__buttons > a > img {
  height: 20px;
}

.header__mobile {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.25rem;
}

.header__mobile > span {
  height: 44px;
  width: 44px;
  color: var(--blue-dark);
  fill: var(--blue-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__mobile > span:last-child {
  background-color: var(--white);
  border-radius: 0;
}

.header__mobile > span > img,
.header__mobile > span > svg {
  width: 24px; /* if base font size is 16px, change it to 1.5rem */
  height: 24px; /* if base font size is 16px, change it to 1.5rem */
}

.header__mobile-image {
  width: 33px;
  height: 33px;
  border-radius: 9999px;
  background-color: var(--blue-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--blue-dark);
}

.header-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  min-width: 100%;
  max-width: 100%;
  max-width: 100dvh;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background-color: rgba(40, 64, 78, 0.4);
  display: none;
  z-index: 1000;
}

.header-sidebar__menu {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 360px;
  max-width: 360px;
  width: 100%;
  height: 100dvh;
  background-color: var(--white);
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  z-index: 1050;
}

.header-sidebar__body {
  position: relative;
  height: 100dvh;
  overflow: scroll;
  padding: 0.5rem;
}

.header-sidebar__close-row {
  display: block;
  text-align: right;
}

.header-sidebar__close-row > img {
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  margin-right: 1rem;
}

.header-sidebar__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
}

.header-sidebar__profile > .header__buttons {
  gap: 1em;
  margin: 1em auto;
}

.header-sidebar__profile-image {
  width: 70px;
  height: 70px;
  border-radius: 9999px;
  background-color: var(--blue-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--blue-dark);
}

.header-sidebar__profile-image.header-sidebar__profile-image--author {
  background-color: var(--bg-color-author);
  border-color: var(--border-color-author);
}

.header-sidebar__profile-image.header-sidebar__profile-image--exhibitor {
  background-color: var(--bg-color-exhibitor);
  border-color: var(--border-color-exhibitor);
}

.header-sidebar__profile-image.header-sidebar__profile-image--member {
  background-color: var(--bg-color-member);
  border-color: var(--border-color-member);
}

.header-sidebar__profile-image > img {
  object-fit: contain;
  width: 100%;
  height: auto;
}

.header-sidebar__navigation {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header-sidebar__navigation > div, .header-sidebar__navigation > a {
  margin: 0 0.5rem;
  padding: 1rem;
  color: var(--blue-medium);
  border-bottom: 1px solid var(--gray-light);
}

.header-sidebar__navigation > div:last-child {
  border-bottom: 0;
}

.header-sidebar__navigation-title {
  font-size: var(--font-lg);
}

.header-sidebar__navigation-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-sidebar__closed-arrow, .header-sidebar__opened-arrow {
  height: 1.4rem;
}

.header-sidebar__navigation-toggle > .header-sidebar__closed-arrow,
.header-sidebar__navigation-toggle.active > .header-sidebar__opened-arrow{
  display: block;
}

.header-sidebar__navigation-toggle.active > .header-sidebar__closed-arrow,
.header-sidebar__navigation-toggle > .header-sidebar__opened-arrow {
  display: none;
}

.header-sidebar__navigation-dropdown {
  display: none;
  flex-direction: column;
  padding: 1rem 1rem 0;
  gap: 1rem;
}

.header-sidebar__navigation-dropdown.active {
  display: flex;
}

.header-mobile__search {
  display: none;
  flex-direction: column;
  padding: 1rem 2rem 2rem;
  gap: 1rem;
  align-items: center;
}

.header__mobile > span > .header__mobile-search--opened,
.header__mobile > span.active > .header__mobile-search--closed {
  display: none;
}

.header__mobile > span > .header__mobile-search--closed,
.header__mobile > span.active > .header__mobile-search--opened {
  display: initial;
}

.header-mobile__search > h5 {
  font-size: var(--font-md);
}

.header-mobile__search.active {
  display: flex;
}

.header-profile {
  display: none;
  position: absolute;
  right: 0;
  top: 76px;
  z-index: 10;
}

.header-profile.header-profile--active {
  display: block;
}

.header-profile__dropdown {
  display: flex;
  flex-direction: column;
  width: 260px;
  background-color: var(--white);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.header-profile__name {
  padding: 8px 1rem 4px;
}

.header-profile__dropdown-item {
  padding: 8px 1rem 4px;
  color: var(--blue-medium);
  cursor: pointer;
}

.header-profile__dropdown-item:hover > span {
  filter: invert(30%);
}

.header-profile__dropdown-divider {
  height: 1px;
  background-color:  var(--gray-light);
  width: 100%;
  margin-top: 4px;
}

.header-notification__icon {
  position: relative;
}

.header-notification__badge {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: var(--red-medium);
  color: var(--white);
  font-size: 10px;
  position: absolute;
  top: 0;
  transform: translateX(25px);
  border-radius: 50%;
}

.header__profile-item.mobile .header-notification__badge {
  transform: translateX(18px);
  width: 18px;
  height: 18px;
  line-height: 18px;
}

.header-notification__dropdown {
  display: flex;
  flex-direction: column;
  width: 360px;
  background-color: var(--white);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  padding: 4px 8px;
}

.header-notification__item {
  display: grid;
  grid-template-columns: 8px 48px auto;
  gap: 8px;
  width: 100%;
  padding: 4px 0.5rem;
  cursor: pointer;
}

.header-notification__image-container,
.header-notification__status-container {
  display: flex;
  align-items: center;
  justify-items: center;
}

.header-notification__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--blue-medium);
}

.header-notification__image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.header-notification__image > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
}

.header-notification__message-container {
  display: flex;
  align-items: center;
  justify-items: start;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 800px) {
  .header {
    grid-template-columns: 1fr 2fr 1fr;
    height: 90px;
    max-height: 90px;
  }

  .header__navigation {
    display: block;
  }

  .header__search {
    display: flex;
    padding: 0 0.25rem;
    align-items: center;
    justify-content: center;
  }

  .header__profile {
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
  }

  .header__mobile {
    display: none;
  }

  .header-sidebar {
    display: none !important;
  }

  .header__links {
    display: flex;
  }

  .header-mobile__search, .header-mobile__search.active {
    display: none !important;
  }

  .header-profile {
    top: 92px;
  }

  .header__search-bar > input {
    height: 28px;
    padding-right: 28px;
    font-size: 14px;
  }

  .header__search-bar > .label {
    height: 28px;
    width: 28px;
  }

  .header__search-bar > .label > img {
    height: 14px;
    width: 14px;
  }
}

/* SLIDE-IN & SLIDE-OUT ANIMATION */
.slide-in {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}
  
@keyframes slide-in {
  100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
  100% { -webkit-transform: translateX(0%); }
}
  
@keyframes slide-out {
  0% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@-webkit-keyframes slide-out {
  0% { -webkit-transform: translateX(0%); }
  100% { -webkit-transform: translateX(100%); }
}

/* SVG FILL COLORS */
.svg__color--white {
  fill: var(--white);
}
.svg__color--blue-dark {
  fill: var(--blue-dark);
}

/* INDEX */
.card__body > .titleBarSmall:first-child {
  margin-top: 0.25em;
}

/* MEMBER */
.member-edit__password-input {
  width: 100%;
}

.members-result-table {
  max-width: 800px;
  width: 100%;
  border: 0;
}

.members-result-table td.card__heading {
  width: 25%;
}

@media screen and (min-width: 800px) {
  .member-edit__password-input {
    width: 319.5px;
  }

  .members-result-table td.card__heading {
    width: 15%;
  }

  .members-result-table td.card__heading:first-child {
    width: 20%;
  }

  .members-result-table td.card__heading:last-child {
    width: 10%;
  }
}

/* AUTHORS */
.authors-institution__author-column,
.authors-institution__institution-column,
.authors-institution__country-city-column {
  width: 33%;
}

.authors-institution__statistic {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}

.authors-institution__statistic > a {
  display: flex;
  align-items: center;
}

@media screen and (min-width: 800px) {
  .authors-institution__author-column,
  .authors-institution__institution-column {
    width: 35%;
  }
  .authors-institution__city-column,
  .authors-institution__country-column {
    width: 15%;
  }
}

/* PUBLISH */
.publish-issues__list {
  display: flex;
  flex-direction: column;
}

.publish-issues__list-item {
  display: flex;
  flex-direction: column;
  padding: 0.25em 0;
}

.publish-issues__list-item > form > select {
  width: 100%;
  margin-top: 0.5em;
  max-width: 360px;
}

.publish-issues__list-item > form > input[type="submit"] {
  margin-top: 0.5em;
}

@media screen and (min-width: 800px) {
  .publish-issues__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* LOGIN MODAL */
.login-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(4px);
  background-color: var(--blue-dark-20);
  align-items: center;
  justify-content: center;
  z-index: 3000;
  pointer-events: all;
  text-align: left;
}

.login-modal.active {
  display: flex;
}

.login-modal__container {
  width: 100%;
  max-width: 400px;
  background-color: var(--white);
  border-radius: .25rem;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
  min-height: 320px;
  height: auto;
  z-index: 3100;
}

.login-modal__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  text-align: center;
}

.login-modal__tabs > div {
  padding: 1rem 0.5rem;
  border-right: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
  cursor: pointer;
}

.login-modal__tabs > div:first-child {
  border-top-left-radius: 0.25rem;
}

.login-modal__tabs > div:last-child {
  border-right: 0;
  border-top-right-radius: 0.25rem;
}

.login-modal--tab--member:hover,
.login-modal--tab--member:active,
.login-modal--tab--member:focus {
  background-color: rgba(71, 113, 137, 0.8);
  color: var(--white);
}

.login-modal--tab--member.active {
  background-color: var(--bg-color-member);
  color: var(--white);
  border-bottom: 0;
}

.login-modal--tab--exhibitor:hover,
.login-modal--tab--exhibitor:active,
.login-modal--tab--exhibitor:focus {
  background-color: rgba(237, 28, 36, 0.8);
  color: var(--white);
}

.login-modal--tab--exhibitor.active {
  background-color: var(--bg-color-exhibitor);
  color: var(--white);
  border-bottom: 0;
}

.login-modal--tab--author:hover,
.login-modal--tab--author:active,
.login-modal--tab--author:focus {
  background-color: rgba(105, 163, 191, 0.8);
  color: var(--white);
}

.login-modal--tab--author.active {
  background-color: var(--bg-color-author);
  color: var(--white);
  border-bottom: 0;
}

.login-modal__pane {
  padding: 1rem 1.5rem;
}

.login-modal__pane input {
  font-size: 16px;
}

.login-modal__pane-item {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.login-modal__pane-item.active {
  /* display: block; */
  display: flex;
}

.login-modal__link-join {
  text-align: center;
  font-weight: 700;
}

.login-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem
}

.login-modal__form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem
}

.login-modal__form-group > label {
  font-weight: 400;
}

.login-modal__form-group > .input-group {
  height: initial !important;
}

.login-modal__form-group > .input-group > .input-icon {
  height: 100%;
  transform: initial;
  display: flex;
  align-items: center;
}

.only-mobile-table-row {
  display: table-row;
}

@media screen and (min-width: 800px) {
  .only-mobile-table-row {
    display: none;
  }
}

/* NDT A-Z */
.ndt-az-menu {
  padding-right: 0;
}

.ndt-az-menu__button {
  position: absolute;
  z-index: 999;
  top: -20px;
}

.ndt-az-logo {
  display: none;
}

@media screen and (min-width: 576px) {
  .ndt-az-logo {
    display: block;
  }
}

@media screen and (min-width: 800px) {
  .ndt-az-menu {
    padding-right: 1em;
  }
}

.stop-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
}

.stop-break-out--with-hyphens {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* TABLES */
.table__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.table__pagination > span {
  width: 41px;
  display: block;
  text-align: center;
}

/* FORMS */
.search-form {
  text-align: left;
}

.search-form__grid-2 {
  display: grid;
  grid-template-columns: calc(50% - 0.4rem) calc(50% - 0.4rem);
  gap: 0.8rem 0.4rem;
}

.search-form__grid-2--small-gap {
  grid-template-columns: calc(50% - 0.2rem) calc(50% - 0.2rem);
  gap: 0.4rem;
}

.search-form__grid-column-span-2 {
  grid-column: span 2;
}

.search-form__grid-column-span-3 {
  grid-column: span 3;
}

.search-form__grid-column-flex {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.8rem;
}

.search-form__footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.8rem;
}

.search-form__footer > button {
  width: 100%;
}

.search-form__sort-input,
.events-form__sort-input {
  display: grid;
  grid-template-columns: 54px auto;
  align-items: center;
  text-align: left;
}

.directory-search-form__search-input {
  display: grid;
  grid-template-columns: calc(50% + 54px) auto;
  gap: 0.4rem;
}

.members-search-form__checkbox-row {
  display: grid;
  grid-template-columns: repeat(2, 6rem);
  gap: 0.4rem 0.8rem;
}

.keywords-search-form__grid {
  grid-template-columns: 100%;
}

.keywords-search-form__grid-column-80-20 {
  display: grid;
  grid-template-columns: calc(80%) calc(20% - 0.4rem);
  gap: 0.8rem 0.4rem;
}

.keywords-search-form__grid-column-40-40-20 {
  display: grid;
  grid-template-columns: repeat(2, calc(40% - 0.4rem)) calc(20% - 0.4rem);
  gap: 0.8rem 0.4rem;
}

@media screen and (min-width: 800px) {
  .search-form__grid-2,
  .keywords-search-form__grid {
    grid-template-columns: calc(50% - 3rem) calc(50% - 3rem);
    gap: 0.8rem 6rem;
  }

  .search-form__grid-2--small-gap {
    grid-template-columns: calc(50% - 0.4rem) calc(50% - 0.4rem);
    gap: 0.8rem;
  }

  .search-form__footer {
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 0.5rem;
  }

  .search-form__footer > button {
    width: auto;
  }

  .members-search-form__checkbox-row {
    display: flex;
    justify-content: start;
    gap: 1rem;
  }

  .directory-search-form__search-input {
    display: grid;
    grid-template-columns: calc(50% + 54px + 3rem - 0.4rem) auto;
    gap: 0.4rem;
  }
}

.select--auto-height {
  height: auto;
}

.select2__select {
  width: 100%;
}

.select2-container--default .select2-selection--single {
  border-color: var(--gray-light);
  border-radius: 0;
  text-align: left;
  font-family: var(--font-family);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--gray-light);
  border-radius: 0;
  font-family: var(--font-family);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
  outline: 2px solid var(--blue-light);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--blue-light);
  font-family: var(--font-family);
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 60dvh;
  overflow-x: scroll;
}

.select2-container--default.fieldbusy .select2-selection--single .select2-selection__rendered {
  background-color: #fffdc4;
  color: #555555;   
}

ol.breadcrumbs {
  list-style-type: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0 var(--padding-sm);
}

.breadcrumbs {
  max-width: calc(100% - 1rem);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: var(--margin-lg);
  margin-bottom: var(--margin-lg);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breadcrumbs__item {
  font-size: var(--text-xs);
  line-height: var(--text-lg);
  color: var(--breadcrumb-color) !important;
}

.breadcrumbs > li > span {
  font-size: var(--text-xs);
  line-height: var(--text-lg);
  color: var(--breadcrumb-color) !important;
  /* padding: var(--padding-sm); */
}

.breadcrumbs__item:hover {
  text-decoration: underline !important;
}

.breadcrumbs__divider {
  line-height: var(--text-lg);
  font-size: var(--text-xs);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.breadcrumbs__divider > svg {
  /* height: 16px;
  width: 25px; */
  height: 12px;
  width: 20px;
}

.breadcrumbs__icon {
  fill: var(--breadcrumb-color);
}

@media screen and (min-width: 800px) {
  .breadcrumbs {
    max-width: calc(min(1024px, 100vw) - 4rem);
  }
}