/* General settings ------------------------------------------- START */
body {  
  margin: 0;
  padding: 0;
  font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}
colgroup {
  display: table-column-group;
}


h1, .h1 {
  font-family: "Segoe UI light", Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
  line-height: 110%;
  margin-top: 2rem;
  text-align: center;
}
h3, .h3, 
h4, .h4 {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;  
}
h3, .h3 {
  font-size: 2.25rem;
}
h4, .h4 {
  font-size: 1.75rem;
}
h5 {
  font-size: 1.5rem;
  color: #2b353c;
  margin: 2.25rem 0 0.5rem 0;
  /* Edit Anne 2020-02-21 */
  font-family: "Segoe UI semibold", Arial, Helvetica;
}
p {
  margin: 0.75rem 0 0.5rem 0;
  /* color: #5d6e7c; */
  color:#505a61;
  line-height: 2.125rem;
}
a {
  color: #0587d7;
}

/*Edit Julien 2023-07-04*/
.navbutton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 10px;
  gap: 15px;
  background-color: #5d6e7c;
  outline: 3px #5d6e7c solid;
  outline-offset: -3px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 400ms;
}

.buttonlink {
  color: white;
  /*font-weight: 700;*/
  font-size: 1.3em;
  transition: 400ms;
}


.navbutton:hover {
  background-color: transparent;
}

.buttonlink:hover {
  color: #5d6e7c;
  text-decoration: none;
  
}

/* a:visited {
  color:#609;
} */
a:focus {
 border-color:  #31b9f6;
 outline-color: #31b9f6;
}
a:hover {
  color: #004ba5;  
}
a:active {
  color: #004ba5;
}
.help-content ul,
.help-content ol,
.help-content h1,
.help-content h2, 
.help-content h3,
.help-content h4,
.help-content h5,
.help-content p,
.help-content .expand-box
{
  max-width: 88rem;
}
/* Buttons */
.btn-square {
  background: none;
  border: 0 none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 2rem;
  width: 3rem;
  min-width: 3rem;
  height: 3rem; 
  border-radius: 0; 
  padding: 0;
  transition: color, background 0.25s ease-in-out;  
}
.btn-square:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.1);
}
.emphasis-Component { 
  font-style: italic; 
  font-family: "Segoe UI semibold", "Segoe UI", Arial, Helvetica, sans-serif;
}
.emphasis-Button { 
  font-family: "Segoe UI semibold", "Segoe UI", Arial, Helvetica, sans-serif;
font-style: bold;
}
.emphasis-italic { 
  font-style: italic; 
}
.emphasis-strikethrough { 
  text-decoration: line-through; 
}
.emphasis-underline { 
  text-decoration: underline; 
}

.emphasis-Highlighting { /* Alexa: hinzugefügt, damit emphasis-Elemente mit dem Attribut Highlighting auch hervorgehoben werden. */
  color: #de0000;
  font-weight: bold;
  }

/* General settings --------------------------------------------- END */

/* header-bar ------------------------------------------------- START */

.header-bar {
  height: 8.5rem;
  position: relative;
  z-index: 100;
}
.header-bar > .container {
  background-color: #3e4951;
  height: 7rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.29);
}

.schema-navbar-toggle { 
  background: none;
  border: 0 none; 
  color: rgb(255 ,255 ,255 ); 
  cursor: pointer; 
  font-size: 16px;   
}

.help-headline {
    margin-left: 13rem;
    color: #fff;
    font-family: "Helvetica Neue", Helvatica, Arial, sans-serif;
    font-size: 1.75rem;
    letter-spacing: 1px;
    line-height: 110%;
    transition: font-size 0.3s ease-in-out;
    width: 70%;
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 55px;
}

/* Hides SEW-EURODRIVE-Text in Link */
.sew-logo .visuallyhidden {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0,0,0,0);  
  margin: -1px;
  padding: 0;
  overflow: hidden;  
  position: absolute;  
}

.sew-logo {
  position: fixed;
  top: 0;
  left: 6rem;
  z-index: 10;
  width: 9rem;
  height: 8.5rem;
  padding: 1.75rem 1rem 1rem 1rem;  
  background-color: #ffffff;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}

.sew-logo a {
  display: block;
}

.sew-logo img {
  border: 0;
  max-width: 100%;
  vertical-align: middle;
}

.navbar-toggle {
  margin: 0;
  padding: 0.25rem;
}

/* Search ------------------------------------------------ START */
#navbar-search {
  display: flex;
  justify-content: flex-end;
  flex: 1 auto;
}
.schema-navbar-search {  
  background: none;
  width: 25.5rem;
  color:rgba(255, 255, 255, 0.8);
  background-image: url("../../img/icons/search.png"); 
  background-position: center; 
  background-repeat: no-repeat;
}
.search-icon-only {
  display: none;
}
.search-icon-only:hover {
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}
.schema-navbar-search input {  
  width: 87%;
  padding: 0.25rem 1rem 0.5rem;
  background-color: rgb(28,38,44);   
  border: 1px solid rgb(105, 114, 121); 
}

/* .schema-navbar-search {  margin-bottom: 12px; margin-left: 12px; margin-right: 12px; margin-top: 12px; } */

#search-collapse {
  position: fixed; 
  top: 7rem; 
  right: 0;
  z-index: 10;
  width: 100%; 
  height: 5.5rem;
  background-color:#e7e9eb;
  border: none !important;   
  margin: 0 !important; 
  padding: 0 !important;   
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25);
}
#search-collapse input {
  margin: 1rem 1.75rem 0.5rem 1.75rem;
  width: calc(100% - 3.25rem);
  background-color: white;
  border: 1px solid #31b9f6;
  border-width: 0 0 1px 0;
  padding: 0.75rem 1rem;
}


/* Search -----------------------------------------------END */

/* Language -------------------------------------------Start */
.btn-language {
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border-radius: 0;
  position: relative;
  z-index: 1003;
}
.btn-language:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.btn-language:focus {
  outline: none;    
}
.btn-language[aria-expanded="true"] .icon-white {  
  opacity: 0;
}
.btn-language[aria-expanded="false"] .icon-white {
  opacity: 0.8;
}
.btn-language[aria-expanded="true"] .icon-gray {
  opacity: 1;
}
.btn-language[aria-expanded="false"] .icon-gray {
  opacity: 0;
}
.btn-language[aria-expanded="true"]:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.icon-language {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  opacity: 0.8;  
  position: absolute;  
  top: 0.25rem;
  left: 0.25rem;
}
.icon-language:hover {
  opacity: 1;
}
.icon-gray {
  z-index: 1002;
}
.language-slider {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  opacity: 1;
  background-color: #fff;
  box-shadow: -4px 0px 8px 0px rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;  
  transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}
.language-slider .slider-header {
  margin: 0;
  padding: 0.75rem 2rem 1rem 1.5rem; 
  background-color:  #ECEEF0;
}
ul.schema-languages { 
  font-size: 1.5rem;
  list-style-type: none;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-left: 0.25rem #fff;
  height: calc(100vh - 5.5rem);
  overflow-y: auto;
}
ul.schema-languages li {
  background-position: 96% 50%;
  background-repeat: no-repeat;
  background-size: 30px 20px !important;
  height: 4rem;
  min-height: 4rem;
  display: flex;
  align-items: center;
}
ul.schema-languages .language-item.selected {
  border-left: 0.5rem solid #40c4ff;
}
ul.schema-languages .language-item:hover {
  background-color: #F7F8F9;
  border-color: #F7F8F9;
}
ul.schema-languages .language-item.selected:hover {
  background-color: #F7F8F9;
  border-left-color: #40c4ff;
}
.language-item {
  cursor: pointer;
  border-left: 0.5rem solid white;
  border-bottom: 1px solid #E0E4E6;
  transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
}
.language-item a {
  padding-left: 2.25rem;
  margin: 0.5rem 0 0.75rem 0;
  width: 100%;
}
.schema-aspect-ar { background-image: url("../../img/languages/ar.svg"); }
.schema-aspect-bg { background-image: url("../../img/languages/bg.svg"); }
.schema-aspect-cs { background-image: url("../../img/languages/cz.svg"); }
.schema-aspect-da { background-image: url("../../img/languages/dk.svg"); }
.schema-aspect-de { background-image: url("../../img/languages/de.svg"); }
.schema-aspect-el { background-image: url("../../img/languages/gr.svg"); }
.schema-aspect-en { background-image: url("../../img/languages/gb.svg"); }
.schema-aspect-en-US { background-image: url("../../img/languages/us.svg"); }
.schema-aspect-es { background-image: url("../../img/languages/es.svg"); }
.schema-aspect-fi { background-image: url("../../img/languages/fi.svg"); }
.schema-aspect-fr { background-image: url("../../img/languages/fr.svg"); }
.schema-aspect-hu { background-image: url("../../img/languages/hu.svg"); }
.schema-aspect-hr { background-image: url("../../img/languages/hr.svg"); }
.schema-aspect-it { background-image: url("../../img/languages/it.svg"); }
.schema-aspect-is { background-image: url("../../img/languages/is.svg"); }
.schema-aspect-ja { background-image: url("../../img/languages/jp.svg"); }
.schema-aspect-mt { background-image: url("../../img/languages/mt.svg"); }
.schema-aspect-nl { background-image: url("../../img/languages/nl.svg"); }
.schema-aspect-no { background-image: url("../../img/languages/no.svg"); }
.schema-aspect-pt { background-image: url("../../img/languages/pt.svg"); }
.schema-aspect-pt-BR { background-image: url("../../img/languages/pt-BR.svg"); }
.schema-aspect-pl { background-image: url("../../img/languages/pl.svg"); }
.schema-aspect-ro { background-image: url("../../img/languages/ro.svg"); }
.schema-aspect-ru { background-image: url("../../img/languages/ru.svg"); }
.schema-aspect-sk { background-image: url("../../img/languages/sk.svg"); }
.schema-aspect-sl { background-image: url("../../img/languages/si.svg"); }
.schema-aspect-sv { background-image: url("../../img/languages/se.svg"); }
.schema-aspect-tr { background-image: url("../../img/languages/tr.svg"); }
.schema-aspect-zh { background-image: url("../../img/languages/cn.svg"); }
.schema-aspect-zh-CN { background-image: url("../../img/languages/cn.svg"); }
.schema-aspect-zh-CHS { background-image: url("../../img/languages/cn.svg"); }
/* Language ---------------------------------------------End */
/* header-bar -------------------------------------------------- END */
/* Menü ------------------------------------------------------- START */
.off-canvas {
  overflow: hidden;
  position: relative;
}
#off-canvas-menu {
  position: fixed;
  top: 6rem;
  bottom: 0;
  left: -100vw;
  width: 100%;
  margin-left: -100%;
  margin-top: 0; 
  background-color: #DBDEDF;
}
#off-canvas-menu.animated { 
  transition: all 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946); 
}
/* breadcrumbs */
.breadcrumb { 
  position: fixed;
  top: 6rem;
  z-index: 8;   
  left: 0; 
  padding: 3.5rem 2rem 2.5rem 2rem;
  background-color: #2b353c; 
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  height: 6rem;
  color:#d1d7dc;
  /* text-transform: uppercase; */
  font-size: 1.25rem;
  border-radius: 0;
  transition: padding 0.3s ease-in-out;
}
.breadcrumb .bread-item, 
.breadcrumb .bread-item-last {
  list-style: none;
  max-width: 31%;
  height: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;  
}


.bread-item a {
  padding: 0;
  color: #d1d7dc;
}
.breadcrumb a:visited {
  color: #d1d7dc;
}
.breadcrumb a:focus {
  border-color:  #31b9f6;
  outline-color: #31b9f6;
  text-decoration: none;
  color: #d1d7dc;
}
.breadcrumb a:hover {
  text-decoration: underline;  
  color: #ffffff;
}
.breadcrumb a:active {
  color: #ffffff;
}

.bread-item.bread-home {
  min-width: 3.75rem;
  max-width: 3.75rem;
  color: #d1d7dc; 
}
.showMenu #off-canvas-menu {   
  left: 0;
  margin-left: 0; 
  z-index: 5;
}
.showMenu #navbar,
.showMenu #content-container { 
  margin-left: 0; 
  opacity: 0;
  z-index: 0;  
  transition: all 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946); 
}
.mm-menu {
  z-index: -1;
  background-color: #3e4951;
}
.mm-navbar {
  top: 7rem;
}
.mm-navbar:hover {
  background-color: #505a61;
}
.mm-navbar .mm-title {
  font-size: 1.5rem;
}
.mm-menu .mm-navbar > *, .mm-menu .mm-navbar a { 
  color: rgba(255,255,255,0.7);
}
.mm-panels { 
  background-color: #3e4951; 
  border-top-color: #3e4951; 
  border-top-style: Durchgehend (solid) ; 
  color: #697279; font-size: 14px; 
}

.mm-panels > .mm-panel.mm-hasnavbar {
  padding-top: 11rem;
}
.mm-listview > li {
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
  border-bottom: 1px solid #323c42;
}
.mm-listview > li > a {
  white-space: initial;
  overflow: auto;
  font-family: "Segoe UI", Arial;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.7);
  line-height: 2.25rem;
  padding: 1rem 1rem 1.5rem 2rem;
  transition: color 0.3s ease-in-out;
  letter-spacing: 1px;
  overflow: hidden;
}
.mm-listview > li:not(.mm-divider):after {
  border:none;
}
.mm-panel li[entry-id][current="1"] {
  background-color: #505a61;
  border-right: 0.5rem solid #31b9f6;
}
.mm-panel li:hover {
  background-color: #505a61;
}
.mm-panel li[entry-id][current="1"] > a {
  color: #fff;
}
.mm-prev:before, .mm-next:after, .mm-arrow:after {
    transform: rotate(45deg);
}
/* Menü --------------------------------------------------------- END */
#content-container {
  position: fixed;
  top: 12rem;
  left: 100vw; 
  overflow: hidden;
  border-style: none;
  opacity: 1;
  margin-left: -100vw;
 
  /* background: transparent url('../../img/bg_solutionplus2.jpg') 100% 100% no-repeat;  */ 
}

#content-container.animated { 
  transition: opacity 500ms 250ms cubic-bezier(0.465, 0.183, 0.153, 0.946); 
}
.content-background {
 position: fixed;
 z-index: -1;
 bottom: 0;
 right: 0;
}
/* #content-container>div>div {
  min-height: 100%;
} */
.boxen {
  display: flex;
  flex-direction: column;
  /* height: 100vh; */
}
#content-container .container {    
  transition: all 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);    
  padding: 1rem 2.5rem 3rem;  
}
.logo-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 2rem;
}
.tool-logo {
  position: relative;
  right: 0;
  height: 6rem;
  margin: 0 0 2rem 0;
}
.content-container > div {
  padding-top: 0;
}
/* Safety-Hinweise ----------------- Start */
.safety {
  margin: 1rem 0 4rem 0;
}
.safety-header {
  display: flex;
  flex-direction: row;  
}
.safety-header h3 {
  font-family: 'Segoe UI semibold', Arial, Helvetica, Verdana, sans-serif;
  margin: 0.75rem;
  text-transform: uppercase;
  font-size: 20px;
}
.header-symbol {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.7rem 0 0 1rem;
}
.safety-body {
  display: flex;
  flex-direction: column;
}
.safety-symbol {
  display: flex;
  justify-content: center;
}
.safety-symbol img {
  width: 10rem;
  min-width: 10rem;
  height: 10rem;
  margin-top: 1rem;
}
.safety-symbol img.hint {
  height: 7.5rem;
}
.safety-severity-danger > .safety-header { background-color: #EF3B2F; color: #FFFFFF;  }
.safety-severity-danger > .safety-footer { background-color: #EF3B2F; }

.safety-severity-warning > .safety-header { background-color: #F49527; color: #2B353C; }
.safety-severity-warning > .safety-footer { background-color: #F49527; }

.safety-severity-caution > .safety-header { background-color: #FFDD00; color: #2B353C; }
.safety-severity-caution > .safety-footer { background-color: #FFDD00; }

.safety-severity-notice > .safety-header { background-color: #2596D1; color: #FFFFFF; }
.safety-severity-notice > .safety-footer { background-color: #2596D1; }

.safety-severity-information > .safety-header { background-color: #D1D7DC; color: #2B353C; }
.safety-severity-information > .safety-footer { background-color: #D1D7DC; }

.safety-cause, 
.safety-consequence {  
  line-height: 140%;
  text-align: center;
  margin-top: 0;
}
.safety-condition,
.schema-condition {
  list-style: none;
}
.safety-condition > li::before,
.schema-condition > li::before {
  content: "\e116"; 
  display: inline-block; 
  font-family: "schema-glyphs"; 
  margin-left: -27px; 
  text-align: center; 
  text-indent: 0; 
  width: 27px;
  color: #000;
}
/* .safety-measures {
  text-align: center;
} */
.safety-consequence {  
  border-bottom: 1px solid #D1D7DC;
  padding-bottom: 1rem;  
  margin-top: 1rem;
}
.safety-footer {
  height: 0.5rem; 
  margin-top: 1rem;
}

.safety-result,
.schema-result { 
  list-style-type: none; 
  margin-bottom: 0; 
  padding-left: 21px; 
}
.safety-result > li:before,
.schema-result > li:before { 
  content: "\e095"; 
  display: inline-block; 
  font-family: "schema-glyphs"; 
  margin-left: -28px; 
  text-align: center; 
  text-indent: 0; 
  width: 28px;   
  color: #000;
}
.list-second-level.schema-intermediateresult {  
  padding-left: 16px; 
  list-style-type: →
}
.intermediateresult-arrow{
  list-style-type: "\279E  ";
      margin-left: -19px;
}

/* Safety-Hinweise ----------------- End */
/* Tabelle allgemein ------------- Start */
table {
  width: 100%;
  margin: 1rem 0 2rem 0;  
  background-color: rgba(255, 255, 255, 0.5);
}
table p, 
table h5, 
table h4 {
  margin: 0.75rem 0.5rem 0.75rem 0;
  padding: 0 1rem;
  line-height: 2.125rem;
}
table td {
  text-align: left;
  vertical-align: top;
  padding-bottom: 0.5rem;
}
/* Tabelle allgemein --------------- End */
/* Tabelle mit Header ------------------------- Start*/

.tabletype-header {
  margin: 1rem 0 3rem 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.tabletype-header td {
  border: 1px solid #e7e9eb;
  padding: 0.5rem 1rem;
  vertical-align: top;
}
.tabletype-header th {  
  padding: 0.5rem 1rem;
  border: 1px solid #d1d7dc;
  background-color:#e7e9eb ;
}
.tabletype-header th p {  
  font-family: "Segoe UI semibold", Arial, Helvetica;
  color: #2b353c;
}
/* Tabelle mit Header ------------------------- Ende*/

/* Tabelle Framed ( Linien zwischen den Zeilen ) -------- Start*/

.tabletype-framed tr {
  border-top: 1px solid rgba(209, 215, 220, 0.6);
}
.tabletype-framed tr:last-child { 
  border-bottom: 1px solid rgba(209, 215, 220, 0.6);
}
/* Tabelle Framed ( Linien zwischen den Zeilen ) -----------End*/

/* Tabelle no-framed ( Keine Linien ) -------- Start*/

.tabletype-noframed tr, 
.tabletype-noframed td {
  border: none;
}
.tabletype-framed tr:last-child { 
  border-bottom: 1px solid rgba(209, 215, 220, 0.6);
}
/* Tabelle Framed ( Keine Linien ) -----------End*/

/* Bildlegenden -------------------- Start*/
.img-description-container {
 margin-bottom: 2rem; 
 
}
.img-description {
  font-family: "Segoe UI semibold", Arial, Helvetica, sans-serif;  
  margin-bottom: 0;
}
table.tabletype-legend {
  background-color: transparent;
}
.tabletype-legend td {
  border: none;
  padding: 0.5rem 1rem 0.5rem 0;
}
.tabletype-legend p {
  margin:  0 0 0 0;
}
.key-container {
  vertical-align: top;
}
.key-number {
  background-color: #e7e9eb;
  color: #3e4951;
  text-align: center;
  height: 2.5rem;
  line-height: 2.25rem;
  padding: 0 0.5rem;
  vertical-align: middle;  
}

.img {
max-width: 100%;
}
/* Bildlegenden -------------------- Ende */
/* Image Map  ---------------------- Start */


.image-map-area {
  fill: rgba(255, 255, 255,0);
  pointer-events: visible;
  border: 1px dotted #31b9f6;
  stroke: #31b9f6;
  stroke-width: 4px;
  stroke-dasharray: 5,5;
  transition: fill 0.3s ease-in-out;
}

.image-map-area:hover {
  fill: rgba(49,185,246,0.2);
  pointer-events: visible;
}
/* Image Map  ---------------------- Ende */
/* Hotspot ------------------------- Start */
.highlight {
  fill: #31b9f6;
}
/* Suche im Content ---------------- Start*/
.search-in-content-container {
  display: flex;
  justify-content: center; 
}
.search-in-content-box {
  width: 38rem;
  margin-bottom: 4rem;
}
.search-in-content-form {
  display: flex;
}
.content-search-field {
  flex: 1 auto;
  max-width: 38rem;
}
.content-search-input {
  width: 89%;
  height: 4rem;
  font-size: 1.5rem;
  padding: 0.25rem 1rem;
}
.content-search-input::placeholder {
  font-style: italic;
}

.search-in-content-form .btn-square {
  background-color: #5d6e7c;
  width: 4rem;
  height: 4rem;
  position: absolute;
/*  left: 0.5rem; */
 /* top: 0.5rem; */
}

/* Suche im Content --------------- Ende */
/* Themenbox ---------------------- Start */
.topics {
  text-align: center;
}
.topics-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Expand-box */
.expand-box {
  width: 100%;  
  margin: 1rem 0 1rem 0;
}
.expand-box.box-in-topic {
  background-color: rgba(209, 215, 220, 0.6);
  max-width: 38rem;
}
.expand-box.box-in-content
{  border-bottom: 1px solid rgba(209, 215, 220, 0.6);
}

.expand-box-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-decoration: none;  
  /*height: 4rem;*/
}
.box-in-topic .expand-box-header {    
  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3);
  background-color: #5d6e7c;  
  padding: 0 0 0 1.5rem;
}
.box-in-content .expand-box-header {    
  border-bottom: 1px solid rgba(209, 215, 220, 0.6);;
  padding: 0;
}


.box-in-topic .expand-box-header-text {
  color: #fff;
}
.box-in-content .expand-box-header-text {
  color: #2b353c;
  margin: 1.25rem 0 0 0;
  padding: 0.5rem 0;
 }
.expand-btn {
  height: 4rem;
  width: 4rem;
  font-size: 1.5rem;
}

.expand-btn:focus {
 outline: none;
}
.box-in-content .expand-btn .close-btn {
  width: 2rem;
  height: 2rem;
}
.expand-btn .close-btn {
  width: 2rem;
  height: 2rem;    
  transition: all 0.3s ease-in-out;
}

.expand-box-header[aria-expanded="true"] .close-btn {
  transform: rotate(0);
 }

.expand-box-header[aria-expanded="false"] .close-btn {
  transform: rotate(45deg);
}
.expand-box-content .linklist-container {
  margin: 0;
  padding: 1rem 1rem 2rem 1.5rem;
}
/* Themenbox ---------------------- Ende */


.help-content {
  padding-top: 2rem;
}
.help-content  {
  /* max-width: 72rem; */
  margin-bottom: 4rem;
}
.help-content .image-container {
  display: flex;
  flex-direction: column;  
}


.help-content table p {
  max-width: 100%;
}
.pill-container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row; 
  justify-content: center;
}
.pill {
  list-style: none;  
  background-color: #94a2ae;
  border-radius: 1rem;
  color: white;
  padding: 0 1rem;
  margin: 0 0.5rem;
}
.linklist-container {
  margin: 0;
  padding: 0;
  
}
.linklist-item {
  background: transparent url('../../img/icons/arrow_right.png') 0 10px no-repeat;  
  list-style: none;  
  padding: 0.5rem 0 0 1.5rem;  
}
.linklist-link {
  color: #0587d7;
  font-family: "Segoe UI regular", Helvetica, Arial, sans-serif;
}
/* ul unorderd list  */
.list-first-level, 
.list-second-level {
  margin-top: 1rem;
  padding-left: 2rem;
  color: #505a61;
}
.first-level-item {
  margin: 0.5rem 0;
  line-height: 1.8rem;
}
.list-second-level {
  list-style: none;
  margin-left: 2rem;
  padding: 0;
  margin: 0.5rem 0.75rem 0.75rem 0.75rem;
  color: #70808c;
}
.second-level-item {
  list-style: none;
  margin-left: 1rem;
}
.second-level-item::before {
  content: "\2013";
  margin-left: -1.5rem;
  padding-right: 0.5rem;
  position: relative
}
.first-level-item p, 
.second-level-item p {
  line-height: inherit;
  padding:0;
  margin: 0;
}
.second-level-item p {
  color: #70808c;
}
/* ol orderd list */
.ordered-list-first-level {
  margin-top: 1rem;
  padding-left: 1.5rem;
  color: #505a61;
}
.orderd-list-first-level .link-list-item {
  list-style: auto;
}
.codeblock, 
.code { 
  font-family: monospace; 
  background-color: #e7e9eb;  
}
.codeblock {
  padding: 0.5rem 1rem;
  line-height: 120%;
}
.code {
  padding: 0.125rem 1rem;
  border-radius: 0;
}
/* Image-Zoom opens modal */
.image-zoom {
  position: relative;
  margin: 1rem 0;
}
.thumbnail-image {
/* max-height: 32rem; */
 width: auto;
 max-width: 100%;
}
.zoom-icon-btn {
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #2B353C;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zoom-icon-btn img {
  transform: rotate(45deg);
  width: 2rem;
  max-width: 2rem;
  height: 2rem;
}

.modal-header, 
.modal-footer {
  border: none;
}
.modal-body {
  max-height: 82vh;
  overflow: auto;  
}

.big-image {
 width: auto;
 height: auto;
 
}
/* Footer ----------- Start */
.footer {
  background-color: #fff;
  border: 1px solid #d1d7dc;
  border-width: 1px 0 0 0;
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer p {
  font-size: 1.125rem;
  padding: 0;
  margin: 0;
}

/* Footer ----------- End */
/* Side-content ---------------------------------------------------------------- Start */
/* Side-content general */
.side-content, 
.sec-nav {
  width: 100%;  
  height: 100%;
}
.side-content .logo-container {
  justify-content: flex-start;
  margin: 0 0 0 3rem;
}
/* Side-content home */
.side-content.home {
  background-color: rgba(209, 215, 220, 0.7);
}

.sec-nav {
  display: none;
}
.features {
  padding: 2.5rem 3.5rem 0 3.5rem;
 }  
.list-of-features {    
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.feature-container {
  padding: 0;
  margin: 1rem;
  width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3);
  background-color: rgba(43,53,60,1);
}

.feature-video
.feature-container a {
  text-decoration: none;
  background-color: rgba(43,53,60,1);
}
.feature-video,
.feature-image-container img
 {
  width: 320px;
  height: 180px;
}
.feature-video video {
  width: inherit;
  height: inherit;
}

.feature-item-link {
  display: flex;
  flex-direction: column;
  flex: 1 auto;
  cursor: pointer;
}
.feature-item-picture {  
  min-height: 18rem;
  flex: 1 auto;
}

.feature-description { 
  min-height: 4rem;
  margin: 0;  
  padding: 0.75rem 1rem 1rem;
  line-height: 1.75rem;
  background-color:rgba(43,53,60,0.8);
  color: white;
  text-align: center;
}
/* News Start */
.news-content-container {
  padding: 1.5rem 3.5rem 1rem 3.5rem;
}
.list-of-news {
  padding: 0;  
}
.news-item {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 2rem 3rem;  
}
.news-content-image {
  display: flex;
  justify-content: center;
  min-width: 10rem;
}
/* .news-image {
  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.3);
} */
.news-content-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1rem;
  width: 100%;
}
.news-content-text p,
.news-content-text .copy-headline,
.news-content-text .more-info {
  text-align: center;
  margin: 0;
}
.news-content-text .news-copy {
 line-height: 1.75rem;
 margin: 0.5rem 0;
}
.news-content-text .date {
  font-size: 1.125rem;
}
.more-info {
  font-family: "Segoe UI semibold", Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
}

/* News Ende */

/* Side-content -------------------- Ende */


/* Suchergebnisseite --------------- Start */

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 0;
}
.pagination>li>a, 
.pagination>li>span{
  float: none;
  padding: 0;
}
.pagination>li:last-child>a,
.pagination>li:last-child>span { 
  border-bottom-right-radius: 0; 
  border-top-right-radius: 0; 
}
.pagination>li:first-child>a,
.pagination>li:first-child>span { 
  border-bottom-left-radius: 0; 
  border-top-left-radius: 0; 
}
.pagination > .disabled > a {
  background-color: #e7e9eb;
}
.pagination .pagination-item .pagination-link {
  width: 4rem;
  height: 4rem; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  padding: 0 0 0.25rem 0;
}
.pagination-item.active .pagination-link {
  background-color: #31b9f6;  
}


.search-results {
  padding: 0 0 2rem 0;
  max-width: 72rem;
}
.search-result {
  list-style: none;
  padding: 1rem 0 1.5rem 0;
}
.search-result-title {
  font-size: 1.75rem;
}
.search-result-highlight {
  background-color: #f9e150;
  font-weight: 600;
}

#toTop-right { 
  position: fixed;  
  bottom: 2rem; 
  right: 2rem; 
  width: 4rem; 
  height: 4rem; 
  padding: 1rem;
  background-color: #5d6e7c;
  display: none; 
  outline: 0;
  border: 0;
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
  transition: all 0.3s ease-in-out;
}
#toTop-right:hover {
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);  
}


/* Suchergebnisseite --------------- Ende */
/* Stichwortverzeichnis ------------ Start */
.alphabet {
  margin-bottom: 4rem;
}
.index-section-container {
  margin-bottom: 3rem;
  padding-bottom: 1rem;
}
.index-section-container::before {
  display: block;
  content: " ";
  margin-top: -5rem;
  height: 5rem;
  visibility: hidden;
}
.index-section {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border-top: 1px solid rgba(209, 215, 220, 0.6);
}
.index-section-letter {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background-color: rgba(209, 215, 220, 0.6);
  height: 4rem;
  width: 4rem;
  min-width: 4rem;
  text-align: center;
}

.top-link {
  text-transform: uppercase;
  font-size: 1rem;
  text-align: right;
}

.index-topic-all {  
  flex: 1 auto;
  margin-left: 4rem;
}
.index-topic {
  font-family: "Segoe UI semibold", Helvetica, Arial, sans-serif;
}
.index-subtopic:first-child::before {
  content: '( ';
  color: #505a61;
  font-family: "Segoe UI semibold", Arial, Helvetica, sans-serif;
  margin-left: 0.5rem;
}
.index-subtopic::after {
  content: ' | ';
  color: #505a61;  
  font-family: "Segoe UI semibold", Arial, Helvetica, sans-serif;
}
.index-subtopic:last-child::after {
  content: ' )';
  color: #505a61;  
  font-family: "Segoe UI semibold", Arial, Helvetica, sans-serif;
}
.index-subtopic {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Stichwortverzeichnis ------------ Ende */

/* Tooltip container */
.tooltip2 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip2 .tooltiptext {
  visibility: hidden;
  min-width: 200px;
  max-width: 275px;
  max-height: 300px;
  overflow: auto;
  background-color: #D8D8D8;
  color: black;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
 
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  left: 120%;
  top: -5px;
  }
  
  /*Lars: eingefügt, damit Callout-Grafiken mit Verlinkung skaliert werden.*/
svg {
max-width: 100%;
 height: auto;
}
  
	/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

/*Text innerhalb eines Code-Elements erh�lt eine Overline*/
.overline-code {
text-decoration: overline;
font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;

}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext {
  visibility: visible;
    opacity: 1;
}

/*Tooltip Icon*/
.tooltipicon {
	width: 1.05rem;
	height: 1.05rem;
	vertical-align: 0.1%;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext {
  visibility: visible;
}
/* Ãœbernahme Styles aus Formats ----- Start */
figure { margin-bottom: 0; margin-top: 0.5em !important; }
figure video,figure img,figure svg { /*display: block; auskommentiert wegen Ticket ID 79 (Lars)*/ height: auto; max-width: 100%; }
figure.img_80 video,figure.img_80 img,figure.img_80 svg { width: 80%; }
figure.img_50 video,figure.img_50 img,figure.img_50 svg { width: 50%; }
/*figure.img_margin video,figure.img_margin img,figure.img_margin svg { width: 20%; } auskommentiert wegen Ticket ID42 (Lars) */
/*figure.img_fixed_textarea video,figure.img_fixed_textarea img,figure.img_fixed_textarea svg { width: 100%; }auskommentiert wegen Ticket ID30 (Lars) */
/*figure.img_fixed_column video,figure.img_fixed_column img,figure.img_fixed_column svg { width: 100%; }*/
figure > figcaption { font-style: italic; }
/* Ãœbernahme Styles aus Formats ----- Ende */

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* Media Queries --------------------------------------------------- */
@media screen and (min-width: 600px) { 
  #search-collapse input {
    margin: 2rem 1.75rem 0.5rem 17.5rem;
    width: calc(100% - 19rem);
  }
  #off-canvas-menu { 
    margin-left: 0; 
    margin-top: 0; 
    width: 320px; 
  }
  .showMenu #content-container {
    opacity: 1;
    left: 320px;
    margin: 0;
  }
  .language-slider {
    width: 33rem;
  }
  .breadcrumb .bread-item-last {
    max-width: 80%;
  }
  .safety-body {
    flex-direction: row;
  }
  .safety-symbol {
    margin: 0.75rem 2rem 0.75rem 0;
  }
  .safety-information {
    margin-top: 2rem;
  }
  .safety-cause, 
  .safety-consequence {
    text-align: left;
  }
}
@media screen and (min-width: 768px) {
  #search-collapse,
  #search-collapse input  {
    display: none;
  }  
  .search-icon-binded {
    display: none;
  }
  .search-icon-only {
    display: block;
	float: right;
  }
  
  #content-container .container  {
    padding: 1rem 6rem 3rem;
  }
  .list-of-features, 
  .list-of-news {
    display: flex;
    flex-direction: row;
    justify-content: center; 
    align-items: stretch;   
    flex-wrap: wrap;
  } 
  .feature-container {
    min-width: 26rem;
  }
  .list-of-news {
    margin-top: 0;
  }
  .news-item {
    margin-top: 1rem;
    width: 25%;
  }
  .side-content .logo-container {
    margin: 0 0 0 5.5rem;
  }
  .footer {    
    padding: 2rem 6rem;    
  }
  .modal-dialog {
    width: 80%;
  }
 
  
}

@media screen and (min-width: 992px) { 
  
  h1, .h1 {
    font-size: 3.5rem;
    text-align: left;
  }
.help-content {
  max-width: 88rem;
}
  .pagination {
    justify-content: flex-start;
  }
  #content-container .container { 
    width: 60vw;
  }
  #sidebar-toggle {
    visibility: hidden;
  }
  .tool-logo {
    height: 8rem;
  }
  .pill-container {
    justify-content: flex-start;
  }
  .pill {    
    margin: 0 1rem 0 -0.25rem;
  }  
  .expand-box.box-in-topic{
    max-width: 38rem;
  }
  .language-slider .slider-header {
    padding: 1rem 2rem 1.25rem 1.5rem; 
  }
  #off-canvas-menu { 
    left: 0;
    margin-left: 0; 
    margin-top: 0; 
    width: 320px; 
    z-index: 1;
  }
  .showMenu #content-container {
    opacity: 1;
    left: 320px;
    margin: 0;
  }
  .off-canvas #content-container {
    left: 320px;
    margin-left: 0;
  }
}

@media screen and (min-width: 1024px) {
  .help-headline {
    font-size: 2rem;
  }
  .breadcrumb {
    padding: 2rem 2rem 2.5rem 17.5rem;
    height: 5rem;
  }
  #content-container {
    top: 11rem;
  }
  .topics-container {
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .expand-box.box-in-topic{
    margin: 1rem;
  }
  
}
@media screen and (min-width: 1200px) {
  .help-content .image-container {
    flex-direction: row;  
  }
  .img-description-container {
    padding-left: 2rem;    
    max-width: 64rem; 
  }
  .help-headline {
    font-size: 2.5rem;
  }
  .modal-dialog {
    width: 80%;
  }
  .expand-box.box-in-topic {
    max-width: 36rem;
  }
  /* .big-image {
    max-height: 100rem;
    width: auto;
  } */
}
@media screen and (min-width: 1600px) {
  
  .logo-container {
    padding-top: 4.25rem;
  }
  .side-content .logo-container {
    padding-top: 2rem;
  }
  .boxen-content {
    display: flex;
    flex-direction: row;  
  /*  min-height: 100vh; */ 
  }
  .sec-nav {
    width: 350px;
    height: auto;
    padding: 6rem 2rem;
    display: block;
  }
  .help-content {
    padding-top: 4rem;
  }
  .side-content {
    height: auto;
    width: 40%;
  }
  .topics {
    text-align: left;
  }
  .topics-container {
    justify-content: flex-start;    
  }
  .expand-box.box-in-topic{
    margin: 1rem 2rem 1rem 0;
  }
  .features {
    padding: 5.5rem 3.5rem 0 3.5rem;
  }   
  .news-content-container {
    padding: 2.5rem 3.5rem 0 3.5rem;
  }
  .list-of-features {
    justify-content: flex-start;
  }
  .feature-container {
    margin:1rem 0;
    justify-content: flex-start;
  }

  .list-of-news {
    flex-direction: column;
  }
  .news-item {
    align-items: flex-start;    
    margin: 0.75rem 0 3rem;
    max-width: inherit;
    width: 100%;
  }
  .news-content-image{
    min-width: 8rem;
  }
  .news-content-text p,
  .news-content-text .copy-headline,
  .news-content-text .more-info {
    text-align: left;
  }
  .image-map-area {
    stroke: none;
  }
}
@media screen and (min-width: 2000px) {
  .help-content.home {
    max-width: 100%;
  }
  .news-item {
    flex-direction: row;    
    margin: 0.75rem 0 2rem;
  }
  .news-content-text {
    margin: 0 2rem;
  }
  .news-copy {
    margin-top: 0.5rem;
  }
}



/* Hier kommen die Reste von formats */
.embedded-safety { font-weight: bold; }
.workflow-state { padding-left: 10px; }

.list-image { list-style-type: none; }
.list-indent-1, .list-indent-2 { list-style-type: none; }

.linklist-title { font-size: 14px; font-weight: normal; padding-top: 20px;}

.schema-title-page .content-container,.schema-root-page .content-container { top: 0; }

#language-toggle { float: right; padding-right: 15px; }
#navbar-structure-search { float: left; }
.mm-panel li[entry-id][current="1"] { background-color: #697279; color: rgb(255,255,255); font-size: 14px; }
.mm-panel li[subheading="1"] { background-color: #697279; display: None; font-size: 14px; }
.lexicon-entry { margin-top: 1em; }
.lexicon-entry-title { font-size: 120%; font-weight: bold; }
.lexicon-entry-content { margin-top: 0px; }
@media (min-width: 1200px) {
	.lexicon-entry-content { margin-top: 20px; }
}
.lexicon-entry-image { margin-top: 0.5em; }
.lexicon-entry-description { margin-top: 0.5em; }
.lexicon-link { 
	white-space: nowrap;
    color: #505a61;
    text-decoration: underline;
    text-decoration-style: dashed;
	}
.schema-index-pagination { margin-bottom: 0; margin-top: 20px; }
p.index-subtopic { margin-left: 30px; margin-top: 0; }
#language-toggle { background: none; color: white; outline: none; }
#language-toggle:hover,#language-toggle.focus { background: none; border: none; color: white; outline: none; }
#language-dropdown { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px !important; border-top-right-radius: 4px !Important; left: auto; list-style-type: none; margin: 0; margin-top: -4px; padding: 0; right: 3px; }
#language-dropdown > li { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; list-style-type: none; margin-bottom: 0; margin-top: 0; }
#language-dropdown > li.dropdown-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; list-style-type: none; margin-bottom: 0; margin-top: 0; }
#language-dropdown > li.langMenuItem { background-position: 0 6px; background-repeat: no-repeat; background-size: 20px 20px; }
#language-dropdown > li.langMenuItem::before { padding-right: 30px; }
.dropdown-menu { min-width: 220px; }
.dropdown-menu li.checked a { padding-right: 10px; }
.dropdown-menu li { padding-bottom: 3px; padding-top: 3px; }
.dropdown-menu>li>a { white-space: normal; }
.dropdown-menu li.checked a::after { color: rgb(89,194,230); content: "\e116"; display: inline; float: right; font-family: "schema-glyphs"; font-weight: 700; }
.dropdown-header { background-color: rgb(245,245,245); color: rgb(89,194,230); }