@font-face 
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 200;
	src: url(./fonts/Roboto-Thin.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: url(./fonts/Roboto-Light.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url(./fonts/Roboto-Regular.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url(./fonts/Roboto-Medium.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 600;
	src: url(./fonts/Roboto-Bold.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url(./fonts/Roboto-Black.ttf) format("truetype");
}



@font-face 
{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200;
	src: url(./fonts/Inter-Thin.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url(./fonts/Inter-Light.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url(./fonts/Inter-Regular.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url(./fonts/Inter-Medium.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url(./fonts/Inter-Bold.ttf) format("truetype");
}

@font-face 
{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url(./fonts/Inter-Black.ttf) format("truetype");
}




:root {

  /* color parameters */ 
  --primaryFgColor: #404040; 
  --primaryDarkerFgColor: #252525;
  --primaryDarkestFgColor: #101010; /* #1a3048;*/
  --alternativeFgColor: #142b54;
  --readonlyFgColor:  #CCCCCC;
  --readonlyAltFgColor:  #606060;
  --goBlueColor:  #43B6FB;
  --goBlueLightColor:  #63d6Ff;
  --standardBgColor: #F8F8F8;  
  --offBgColor:  #FFFFFF;

  /* color assignments */ 	
  --textColor: var(--primaryFgColor);
  --headerColor: var(--primaryFgColor);
  --alternativeHeaderColor: var(--readonlyAltFgColor);
  --introColor: var(--primaryFgColor);
  --headerBgColor: var(--offBgColor);
  --bodyBgColor: var(--standardBgColor);
  --cardBgColor: var(--offBgColor);
  --linkColor: var(--primaryFgColor);
  --linkDecorationColor: var(--primaryFgColor);
  --hoverLinkColor: var(--goBlueColor);
  --disabledLinkColor: var(--readonlyFgColor);
  --invertedBgColor: var(--primaryDarkestFgColor);
  --invertedTextColor: var(--standardBgColor);
  --invertedHoverLinkColor: var(--goBlueLightColor);
  --footerBgColor: var(--offBgColor);
  --footerTextColor: var(--textColor);
  --footerHoverLinkColor: var(--hoverLinkColor);

  
  /* text parameters */ 	
  --primaryFont: Inter; 
  --titleFont: var(--primaryFont); 
  --greatFontSize: 32px; 
  --bigFontSize: 24px; 
  --mediumFontSize: 14px;
  --standardFontSize: 12px;
  --smallFontSize: 10px;  
  --thinWeight: 300;
  --regularWeight: 500;
  --mediumWeight: 600;
  --boldWeight: 700;
  --blackWeight: 900;
  
  /* text assignments */ 	
  --textSize: var(--standardFontSize);
  --textWeight: var(--regularWeight);
  --h1Size: var(--greatFontSize);
  --h1Weight: var(--boldWeight);
  --h2Size: var(--bigFontSize);
  --h2Weight: var(--boldWeight);  
  --h3Size: var(--mediumFontSize);
  --h3Weight: var(--mediumWeight);
  --h4Size: var(--smallFontSize);
  --h4Weight: var(--mediumWeight);
  --introSize: var(--mediumFontSize);
  --introWeight: var(--mediumWeight);
  
  --linkSize: var(--mediumFontSize);
  --linkWeight: var(--mediumWeight);
  --linkWeightDisbled: var(--regularWeight);
  --linkWeightHover: var(--boldWeight);
  --textIndent: 40px;  
  --cardWidth: 800px;  
  
  /* image parameters */
  --cardImageHeight: 180px; 

  /* header and footer */  
  --headerHeight: 80px;  
  --extraHeaderHeight: 50px; 
  --extendedHeaderHeight: 130px; 
  --footerHeight: 216px;  
  --extendedFooterHeight: 430px;  

  --marginS: 20px;  
  --marginM: 240px;  
  --marginL: 280px;  
  --marginXL: 340px;  




}

html {
  height: 100%;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.navbar-fixed-top {
    min-height: 80px;
    display: flex;
    align-items: center;
	position: fixed;
	right: 0;
	left: 0;
	z-index: 999;
	background-color: var(--headerBgColor);
    box-shadow: 0px 6px 8px -5px rgb(0 0 0 / 5%);
	-webkit-box-shadow: 0px 6px 8px -5px rgb(0 0 0 / 5%);
	-moz-box-shadow: 0px 6px 8px -5px rgb(0 0 0 / 5%);
}

body {
    font-family: var(--primaryFont); 	
    background-color:var(--bodyBgColor);
    background-image: url(./images/globe_white_grey.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: -320px 200px;
	background-size: 600px 600px;
    margin: 0;
    padding: 0;
    color: var(--textColor); 
    font-size: var(--textSize);
    font-weight: var(--textWeight);
	overflow-x: hidden;
	position: relative;
	margin: 0;
	padding-bottom: 6rem;
	min-height: 100%;
}

h1 {
    color: var(--headerColor);
    font-size: var(--h1Size);
	font-weight: var(--h1Weight);
}

h2 {
    color: var(--headerColor);
    font-size: var(--h2Size);
	font-weight: var(--h2Weight);
}

h3 {
    color: var(--headerColor);
    font-size: var(--h3Size);
	font-weight: var(--h3Weight);
}

ul {
	padding: 0px;	
}


.intro {
	color: var(--textColor);
    font-size: var(--introSize);
	font-weight: var(--introWeight);
	line-height: 1.6;
}

.navigation_top {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 205px;
    width: 1435px;
}

.menu_link {
    margin-right: 20px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
	text-decoration: none;
    color: var(--textColor)
	font-size: var(--linkSize);	
	font-weight: var(--linkWeight);
    border-bottom-style: solid;
    border-bottom-width: 0px;
  
}

.menu_link:hover {
	color: var(--hoverLinkColor); 
 }

 .menu_left,.menu_right {
    height: var(--extraHeaderHeight);
    width: 50%;
    position: fixed;
    z-index: 1;
    top: var(--headerHeight);
    overflow-x: hidden;
    padding-top: 20px;
    background-color: #DDDDDD;
    text-align: center;
    border-color: black;
    border-bottom: solid;
    border-bottom-width: 0px;
 }

 .menu_left:hover , .menu_right:hover {
	color: var(--hoverLinkColor); 
 }

 .menu_left {
    left: 0;
 }
 .menu_right {
    right: 0;
 }


.navSelected  {
    color: var(--linkColor); 
	border-bottom-width: 2px;
}

.navNotSelected  {
    color: var(--linkColor); 
	border-bottom-width: 0px;
}


.content {
	padding-top: var(--headerHeight);
	padding-bottom: var(--footerHeight);
    margin-right: 40px;
    max-width: var(--cardWidth);
}	


.logo-space{
        display: flex;
        align-items: baseline;
        margin-top: 0;
        padding-left: 32px;
}

.logo-wrapper-header::after,
.logo-wrapper-footer::after {
    position: relative;
    top:-2px;
    left: 9px;
    content: "Docs";    
    font-size: var(--introSize);
	font-family: var(--primaryFont); 
}

.logo-wrapper-header::after {
    color: var(--textColor); 
}

.logo-wrapper-footer::after {
    color: var(--invertedTextColor); 
}

.logo-image {
    width: 114px;
}


.contentHeader {
    max-width: var(--cardWidth);
	padding-left: var(--textIndent);
	padding-right: var(--textIndent);
}

.selectManual {
    margin: 0;
    padding: 0;
}

.manualsTree {   
    max-width: 1050px;
    list-style-type: none;
    margin: 0;
    padding-left: 0px;
    padding-top: 15px;    
}

.manualsTree > ul {
    display: block; 

}

.manualsTree > li {
    display: inline-block;
    width : 240px;
    min-height: 320px;    
    margin-top: 0px;
    margin-left: 0px;

}

.manualsTree > li > img {
    width : 100%;
}

.cardContent {
    display: block;
    padding-top: 15px;
    padding-left: 15px;
}

.selected {
    font-weight: var(--boldWeight);
}

.system {    
    display: block;    
    font-size: var(--textSize);
}

.version {
    display: block;
    font-size: var(--h3Size);
    font-weight: var(--boldWeight);
    padding-top: 20px;    
}


.logo-float {   
    position: fixed;
    bottom: 20px;
    right: 25px;
}

.card {
  max-width: var(--cardWidth); 
  min-height: 400px;
  margin: 0px;
  margin-bottom: 50px;
  background-color: var(--cardBgColor);
  -webkit-box-shadow: 0px 6px 8px -5px rgb(0 0 0 / 5%);
  box-shadow: 0px 6px 8px -5px rgb(0 0 0 / 5%);
  border-radius: 5px;
  overflow: hidden;
}
.card:after {
    content: "";
    display: table;
    clear: both;
  }

.cardImageContainer {
    display: flex;
    justify-content: center;
    height: var(--cardImageHeight); 
}

.cardImage {
	object-fit: cover;
	width: 100%;
	height: var(--cardImageHeight); 
}

.cardImageText {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    margin: auto;
    text-align: center;
    color: var(--readonlyAltFgColor);                                    
    display: inline-block;
    vertical-align: middle;
    line-height: var(--cardImageHeight);
}


.previous {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.6;
}
    
.cardContainer {
  margin: 25px var(--textIndent);
  position: relative;
  min-height: 220px;
}

.cardContainerFooter {
  position: absolute;
  bottom: 0;
  left: 0;
}

 
.preHeader {
  font-family: var(--primaryFont);
  font-weight: var(--boldWeight); 
  font-size: var(--textSize);
  padding-top: 6px; 
  padding-bottom: 16px; 
  color: var(--textColor);
}

.titleHeader {
  font-family: var(--primaryFont);
  font-weight: var(--h1Weight); 
  font-size: var(--h1Size);
  padding-top: 2px; 
  padding-bottom:10px;
  color: var(--headerColor);
}

.mainHeader {
  font-family: var(--primaryFont);
  font-weight: var(--h2Weight); 
  font-size: var(--h2Size);
  padding-top: 2px; 
  padding-bottom:10px;
  color: var(--headerColor);
}

.subHeader {
  font-family: var(--primaryFont);
  font-size: var(--h3Size);
  padding-bottom:20px;
  color: var(--textColor);
}

.messagesPreHeader {
    font-family: var(--primaryFont);
    font-size: var(--textSize);
    padding-top:0px;
    margin-top: 23px;
    padding-bottom:0px;
    margin-bottom: 0px;
    color: var(--textColor);
    font-weight: var(--textWeight);
}

.messagesHeader {
    font-family: var(--primaryFont);
    font-size: var(--h3Size);
    padding-bottom:0px;
    margin-bottom: 0px;
    color: var(--alternativeHeaderColor);
    padding-top:3px;
    margin-top: 0px;
}

.messagesText {
    padding-bottom:0px;
    margin-bottom: 0px;
    padding-top:5px;
    margin-top: 0px;
}

.bodyText, .messagesText {
    font-family: var(--primaryFont);
    font-size: var(--textSize);
    padding-top: 6px; 
    padding-bottom: 16px; 
    color: var(--textColor);
    line-height: 1.6;
    font-weight: var(--textWeight);
  }


.linkContainer {
  padding-bottom:0px;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:100%;
}

.linkLeft {
    float:left;
}

.linkRight {
    float:left;
    text-align:right;
    overflow:hidden !important;
}
.linkCenter {
    float:left;
    text-align:center;
}

.linkWrapper {
	width:33%;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2;
    transition: all 0.2; 
}
.linkArrow {
    position: absolute;
    transition: inherit;
	font-weight: var(--linkWeight);
}
.linkWrapper:hover .linkArrow {
    transform: translateX(10px);
	font-weight: var(--linkWeightHover);
}
.linkText {
  font-family: var(--primaryFont);
  font-size: var(--linkSize);
  font-weight: var(--linkWeight);
  text-decoration: none;
  transition: inherit;
  color: var(--linkColor);
  line-height: 22px;
}

.linkDisabledText {
  font-family: var(--primaryFont);
  font-size: var(--linkSize);
  font-weight: var(--linkWeightDisabled);
  text-decoration: none;
  transition: inherit;
  color: var(--disabledLinkColor);
}

.linkWrapper:hover .linkText {
  color: var(--hoverLinkColor);
}  

.linkText:hover {
    color: var(--hoverLinkColor);
}  

.horizontal{display: inline; float: left; padding:0;margin:0}

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

li {
	padding:0;
	margin:0;
}



.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0px;
	padding-top: 28px;
	padding-bottom: 20px;
	background-color: var(--footerBgColor); 
	overflow: hidden;
}

.footer-linktext,
.footer-copyrighttext {
	color: var(--footerTextColor);
	padding: 0;
	margin-top: 5px;
}

.footer-copyrighttext {
	font-size: var(--smallFontSize);
	font-family: Roboto;
	font-weight: var(--thinWeight);
;
}

.footer-linktext {
	float: right;
    text-decoration: none;
	text-align: right; 
	font-size: var(--textFontSize);
	font-weight: var(--textWeight);	
}

.footer-linktext:hover {
	color: var(--footerHoverLinkColor);
}

.footer-content {
	padding-left:50px;
	padding-right:50px;
	padding-top:0;
	padding-bottom:0;
}

.footer_menu { 
    display: flex;
    width: 100%;
    text-align: left;
    flex-wrap: wrap;
    list-style: none;
    /* justify-content: center; */
  }
  

  .footer_item, .footer_menu_item, .footer_logo_item {
    display: inline-block;
    padding-right: 30px;
    color: #000;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
  }
  
  .footer_menu_item {
    width: 250px;
    vertical-align: top;
  }
  
  .footer_logo_item {
    width: 180px;
    display: block;
  }
  
  .footer_url_item {
    float: right;
    text-align: right;
    vertical-align: text-bottom;
    position: absolute;
    bottom: 20px;
    right: 20px;
    letter-spacing: 1.5px;
    font-size: var(--h3Size);
    color: var(--headerColor);
    text-decoration: none;
  }
  
  .footer_url_item:hover {
      color: var(--hoverLinkColor);
  }
  .footer_logo_w_text {
      margin-left: 20px;   
      text-align: justify;
      width: 180px;
      float: left;
  }
  
  .footer_menu_header {
      color: var(--headerColor);
      font-weight: var(--h3Weight);
      font-size: var(--h3Size);
      padding-top: 20px;
      padding-bottom: 5px;
      margin: 0px auto; 
      letter-spacing: 1.5px;
  
  }


.column {
    float: left;
    width: 33.33%;
  }
 

.split {
	width: 50%;
	z-index: 1;
	overflow-x: hidden;
	margin: 0;
}

.left {	
	float: left;
}

.right {
	float: right;
}

.disable-text-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}





.js-content {
    display: none;

}

.space {
    height: 50px;
}

.lang-container {
    width: 100%;
    float:right; 
}
  
.lang-button {
    font-size: var(--smallFontSize);  
    border: none;
    outline: none;
    color: var(--textColor);
    padding: 14px 20px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    float:right; 
	vertical-align: bottom;
}

.lang-button:hover {
    color: var(--hoverLinkColor);
    cursor: pointer;
}


.lang-button-text {
    font-size: var(--linkSize); 
    font-weight: var(--linkWeight); 
    vertical-align: text-bottom;
}

  .lang-dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
    top: 70px;
    background-color: var(--headerBgColor);
    min-width: 100px;
    box-shadow: 0px 0px 12px  rgb(0 0 0 / 10%);
	-webkit-box-shadow: 0px 0px 12px  rgb(0 0 0 / 10%);
	-moz-box-shadow: 0px 0px 12px rgb(0 0 0 / 10%);
    z-index: 1;
  }

  .lang-dropdown-content:hover {
    cursor: pointer;
  }

  
  .lang-dropdown-content li {
    float: none;
    color: var(--textColor);
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: var(--textWeight);
  }
  
  .lang-dropdown-content li:hover {
    color: var(--hoverLinkColor);
  }
  



/* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 767px){
    body {
        background-position: -2000px 0px;
    }

    .lang-option {
        
        width: 28px;
        float:right; 
        margin-left: 10px;
    }
    .navigation > a {
        font-size: calc(0.5rem + 1.5vmin);
        margin-right: 10px;
    }
    .content{
        padding-top: var(--extendedHeaderHeight); 
        padding-bottom: var(--extendedFooterHeight);
        max-width: 100%;
        margin-left: var(--marginS);
        margin-right:  20px;
    }
    .contentHeader{
        padding-left: 0;
        padding-right: 0;
    }
    .card{
        max-width: 100%;
        height: auto;
        padding-bottom: 20px;
    }
    .cardContainer .vertical{
        padding-bottom: 20px;
    }
    .cardContainerFooter{
        position: relative;
    }
    .linkContainer{
        height: auto;
    }
    .linkContainer .linkWrapper{
        width: 100%;
        text-align: left;
        padding: 8px 0;
    }
    .linkContainer SPAN,
    .linkContainer A{
        font-size: calc(0.5rem + 1.5vmin);
    }
    .footer-copyrighttext {
        font-size :1em;
    }
    .footer-linktext{
        font-size :1.5em;
    }

    .footer_menu { 
        margin-left: var(--marginS);
        margin-right: var(--marginS);
     }

    .footer_menu > div {
            width: 100%;
            text-align: center;
            padding-bottom: 30px;
    }
    
    .footer_menu_item {
        width: 383px;
      }


    /* navigation */
    .navigation_top {
        display: none; 
    }

    .navigation_narrow {
        display: block; 
    }

}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px){
    body {
        background-position: -320px 200px;
    }
    .content{
        max-width: 100%;
        margin-left: var(--marginM);
    }
    .card{
        max-width: 100%;
    }
    .footer_menu { 
        margin-left: var(--marginM);
     }
    .footer_menu_item {
        width: 180px;
    }

    .navigation_top {
        margin-left: 100px;
    }
    

    /* navigation */
    .navigation_top {
        display: block; 
    }

    .navigation_narrow {
        display: none; 
    }

}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px){
    body {
        background-position: -320px 200px;
    }
    .content{
        margin-left: var(--marginL);
    }
    .footer_menu { 
        margin-left: var(--marginL);
     }

     .footer_menu_item {
        width: 250px;
    }

    /* navigation */
    .navigation_top {
        display: block; 
    }

    .navigation_narrow {
        display: none; 
    }


}

/* X-Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .content{
        margin-left: var(--marginXL);
    }
    .footer_menu { 
        margin-left: var(--marginXL);
     }

    /* navigation */
    .navigation_top {
        display: block; 
    }

    .navigation_narrow {
        display: none; 
    }

}