/*************************************************/
/* GENERAL */
/*************************************************/

@font-face{font-family:NettoWeb;font-weight:300;font-style:normal;src:url(../../assets/fonts/NettoWeb-Light.woff);}
@font-face{font-family:NettoWeb;font-weight:300;font-style:italic;src:url(../../assets/fonts/NettoWeb-LightItalic.woff);}
@font-face{font-family:NettoWeb;font-weight:400;font-style:normal;src:url(../../assets/fonts/NettoWeb.woff);}
@font-face{font-family:NettoWeb;font-weight:400;font-style:italic;src:url(../../assets/fonts/NettoWeb-Italic.woff);}
@font-face{font-family:NettoWeb;font-weight:500;font-style:normal;src:url(../../assets/fonts/NettoWeb-Bold.woff);}
@font-face{font-family:NettoWeb;font-weight:500;font-style:italic;src:url(../../assets/fonts/NettoWeb-BoldItalic.woff);}
@font-face{font-family:NettoWeb;font-weight:700;font-style:normal;src:url(../../assets/fonts/NettoWeb-Bold.woff);}
@font-face{font-family:NettoWeb;font-weight:700;font-style:italic;src:url(../../assets/fonts/NettoWeb-BoldItalic.woff);}


*{
  font-family: NettoWeb;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


/*************************************************/
/* CONTENT */
/*************************************************/

#content{
  overflow-wrap: break-word;
  hyphens: auto;
}


/*************************************************/
/* HEADERS */
/*************************************************/

#content h1{
  font-size: 4.5em;
  font-weight: 300;
  color:#333;
  margin-top: 40px;
  margin-bottom: 35px;
  margin-left: -5px;
}

#content h2{
  font-size: 2.25em;
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: -60px;
  margin-left: -4px;
}

#content h3{
  font-size: 1.75em;
  font-weight: 400;
  margin-bottom: 17px;
  margin-top: -70px;
  margin-left: -3px;
}

#content h4{
  font-size: 1.5em;
  font-weight: 400;
  margin-bottom: 15px;
  margin-top: -75px;
  margin-left: -2px;
}

#content h5{
  font-size: 1.25em;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: -80px;
  margin-left: -2px;
}

#content h6{
  font-size: 1em;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: -80px;
  margin-left: -2px;
}

#content h2,
#content h3,
#content h4,
#content h5,
#content h6
{
  padding-top: 80px;
  color: #2d2d2d;
}

#content h2 a,
#content h3 a,
#content h4 a,
#content h5 a,
#content h6 a{
  font-size: inherit;
  font-weight: inherit;
  color: inherit !important;
  text-decoration: inherit;
  background: inherit;
  text-shadow: inherit;
  border: inherit !important;
  cursor: default;
}


.templateHome #content h1,
.templateHome #content h2,
.templateHome #content h3,
.templateHome #content h4,
.templateHome #content h5,
.templateHome #content h6{
  color: #ffffff;
}

/*************************************************/
/* PARAGRAPHS */
/*************************************************/

#content p,
#content pre,
#content ul,
#content ol,
#content label,
#content figcaption{
  line-height: 22px;
  font-size: 1em;
  color: #444;
  max-width: 1400px;
  margin-top: 10px;
  margin-bottom: 30px;
  font-weight: 400;
}

#content strong {
  font-weight: 700;
  font-style: inherit;
  color: #2D2D2D;
}

.templateHome #content p,
.templateHome #content pre,
.templateHome #content ul,
.templateHome #content ol,
.templateHome #content label,
.templateHome #content strong
{
  color: #eee;
}

#content em{
  font-style: italic;
  font-weight: 300;
}

#content strong em{
  font-weight: 700;
}

#content pre{
  white-space: pre-wrap;
  background-color: #e4e4e4;
  padding: 10px;
  color: #000;
  border-radius: 10px;
  font-size: 0.9em;
  line-height: 1.4em;
}

#content pre *{
  font-family: 'Menlo', monospace;
  color: #333;
  font-size: inherit;
}

/*************************************************/
/* LINKS */
/*************************************************/

#content a{
  text-decoration: none;
  color: #34C6E9;
  font-weight: bolder;
  position: relative;
  padding: 0 2px 0 2px;
}
.templateHome #content a{
  font-weight: initial;
  color: #34C6E9;
}

#content a:hover{
  color: #90d8ea;
}
.templateHome #content a:hover{
  color: rgb(41, 118, 138);
}

/*************************************************/
/* LISTS */
/*************************************************/

#content ul,
#content ol{
  padding-left: 20px;
}

#content ul > li{
  list-style: none;
  position: relative;
}
#content ul > li::before{
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  background-color: #34C6E9;
  top: 14px;
  left: -15px;
  position: absolute;
  border-radius: 1px;
}

#content ol{
  counter-reset: content-ol;
}
#content ol > li{
  list-style-type: none;
  counter-increment: content-ol;
  position: relative;
  padding-left: 8px;
}
#content ol > li:before{
  content: counter(content-ol) ".";
  display: inline-block;
  position: absolute;
  left: -15px;
  color: #34C6E9;
  font-weight: 700;
  font-size: 0.95em;
}

#content > ul ul,
#content > ol ol,
#content > ol ul,
#content > ul ol{
  margin-top: 5px;
  margin-bottom: 0;
  padding-left: 30px;
}

#content li{
  font-weight: inherit;
  line-height: 22px;
  margin-bottom: 10px;
}
#content li:last-child{
  margin-bottom: 0;
}

/*************************************************/
/* BLOCKQUOTES */
/*************************************************/
#content blockquote{
    background-color: white;
    margin: 0 0 30px 0;
    padding: 10px 5px 7px 15px;
    font-style: italic;
    font-weight: 100;
    border-left: 1px solid #bbb;
}

#content p + blockquote{
  margin-top: -20px;
}

#content blockquote > *:first-child{
  margin-top: 0;
}
#content blockquote > *:last-child{
  margin-bottom: 0;
}

/*************************************************/
/* INPUTS */

/* currently just Login Page + Header*/
/*************************************************/

#content label{
  min-width: 100px;
  max-width: 140px;
  width: 10%;
  display: inline-block;
  margin-bottom: 10px;
}

input[type="text"],
input[type="password"]{
  line-height: 26px;
  height: 26px; /* ie needs that */
  padding: 2px 10px 0 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  background-color: rgba(140,140,140,0.20);
  -webkit-appearance: none;
}
.templateHome input[type="text"],
.templateHome input[type="password"]{
  color: #fff;
}

#content input[type="text"],
#content input[type="password"]{
  min-width: 180px;
  max-width: 300px;
  width: 20%;
  position: relative;
}

input[type="submit"]{
  border-radius: 5px;
  border: 1px solid transparent;
  line-height: 26px;
  padding: 2px 10px 0 10px;
  background: rgba(52,198,233,0.5);
  font-weight: 400;
  color: rgba(0,0,0,0.8);
  -webkit-appearance: none;
}
#content input[type="submit"]{
  min-width: 100px;
  max-width: 140px;
  width: 10%;
  margin-top: 28px;
  position: relative;
}
input[type="submit"]:disabled{
  background: rgba(145, 145, 145, 0.5);
}
input[type="submit"].highlight{
  background: rgba(52, 197, 233, 0.8);
}
input[type="submit"]:hover{
  opacity: 0.8;
}
input[type="submit"]:disabled:hover{
  opacity: 1;
}


input:focus{
  outline: none;
  border: 1px solid #34C6E9;
}
input[type="submit"].highlight:focus{
  border-color: #fff;
}

#content div.alert{
  height: 30px;
  /* margin-top: -10px; */
  color: rgb(255,64,0);
  font-weight: 500;
}

/*************************************************/
/* IMG */
/*************************************************/

#content img {
  margin-top: 10px;
  margin-bottom: 30px;
  display: block;
  max-width: 100%;
  position: relative;
  cursor: pointer;
}

#content figure{
  margin: 0;
  margin-top: 10px;
  margin-bottom: 30px;
  display: inline-block;
  position: relative;
  max-width: 100%;
}


#content figure div.fileflag{
  position: absolute;
  right: 10px;
  top: 20px;
  text-align: right;
}

/* #content figure div.fileflag.red{
  background-color: #FF654D;
  color: #fff;
}

#content figure div.fileflag.blue{
  background-color: #34C6E9;
  color: #333;
}

#content figure div.fileflag div.flagDesc{
  display: none;
}

#content figure div.fileflag:hover div.flagDesc{
  display: block;
  max-width: 300px;
  margin: 10px 0 5px 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
} */

#content figcaption{
  margin-top: -10px;
  padding-left: 10px;
  position: relative;
  margin-bottom: 0;
  border-left: 2px solid #34C6E9;
}

/* #content figcaption::before,
#content figcaption div.capSeparator::after{
  content: '';
  display: block;
  width: 2px;
  height: 14px;
  background-color: #34C6E9;
  border-radius: 1px;
  position: absolute;
  left: 0;
}

#content figcaption::before{
  top: 2px;
} */

#content figcaption div.capSeparator{
  margin-top: 5px;
}

/* #content figcaption div.capSeparator::after{
  transform: translateY(2px);
} */

/*************************************************/
/* MEDIA QUERIES */
/*************************************************/

@media (max-width: 599px){
  #content h1{
    font-size: 3.5em;
    margin-top: 30px;
  }
  #content h2{
    font-size: 2em;
  }
  #content h3{
    font-size: 1.5em;
  }
}


/*************************************************/
/* FLAGS */
/*************************************************/

div.fileflag{
  position: relative;
  cursor: default;
  z-index: 1;
}

.fileflag div.title{
  display: inline-block;
  background-color: #CBCBCB;
  color: #333;
  padding: 5px 7px 3px 7px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fileflag.red div.title{
  background-color: #FF654D;
  color: #fff;
}

.fileflag.blue div.title{
  background-color: #34C6E9;
  color: #333;
}

.fileflag div.desc{
  display: none;
}

.fileflag:hover div.desc{
  display: block;
  max-width: 300px;
  min-width: 150px;
  margin: 5px 0 0 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  background-color: rgba(255,255,255,0.95);
  padding: 5px 7px 5px 7px;
  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.10);
  border-radius: 3px;
}

/*************************************************/
/* FLUIDMEDIA */
/*************************************************/

.fluidMedia{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.fluidMedia iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

body{
  margin: 0;
  /* font-family: 'Netto OT'; */
  background-color: #F2F2F2;
}
body.templateHome{
  background-color: #2D2D2D;
}

/*************************************************/
/* MENU */
/*************************************************/

div#menu{
  width: 360px;
  /* height: 100%; */
  background-color: #333;
  overflow: hidden;
  position: fixed;
  z-index: 1;
  top: 60px;
  bottom: 0;
}

#menu div.scrollWrap{
  width: 100%;
  height: 100%;
  overflow: auto;
}

#items a{
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  -webkit-font-smoothing: antialiased;
  line-height: 40px;
  margin-left: 30px;
  text-decoration: none;
  display: block;
  font-weight: 400;
}

#items a:hover{
  opacity: 0.5;
}

#items li.open > a{
  color: #fff;
}

#items li.active > a{
  font-weight: bold;
  color: #34C6E9;
}

#items li.ancestor > a{
  font-weight: bold;
  color: #fff;
}


div#items{
  margin-top: 40px;
}

#items ul{
  padding-left: 20px;
  /*overflow: hidden;*/
  /*transition: height 0.4s;*/
  list-style: none;
}


#items li{
  position: relative;
  margin-bottom: 2px;
  margin-left: -20px;
  padding-left: 20px;
  transition: background-color 0.4s;
  background-color: rgba(51,51,51,0.001);
  overflow: hidden;
  transition: height 0.4s, margin-bottom 0.4s;
  cursor: pointer;
}

#items > * > * li:last-child{
  margin-bottom: 0;
  padding-bottom: 2px;
}



#items > ul > li.open{
  background-color: rgba(61,61,61,1);
}
#items > ul > *>* > li.open{
  background-color: #434343;
}
#items > ul > *>* > *>* > li.open{
  background-color: #515151;
}
#items > ul > *>* > *>* > *>* > li.open{
  background-color: #494949;
}
#items > ul > *>* > *>* > *>* > *>* > li.open{
  background-color: #3F3F3F;
}
#items > ul > *>* > *>* > *>* > *>* > *>* > li.open{
  background-color: #373737;
}


#items li.node:before{
  content: '';
  width: 40px;
  height: 40px;
  background-image: url("../../assets/images/collapse.svg");
  opacity: 0.4;
  position: absolute;
  left: 10px;
  top: 0px;
  transition: -webkit-transform 0.4s, opacity 0.4s;
}

#items li.open:before{
  transform: rotate(90deg);
  opacity: 1;
}

#items div.solo{
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #D8D8D8;
  position: absolute;
  top: 15px;
  right: 15px;
  opacity: 0.1;
}

#items div.solo:hover{
  opacity: 1;
}



/*************************************************/
/* HEADER */
/*************************************************/

div#header{
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 1;
  overflow: hidden;
  transition: height 0.2s;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,0.03);
}
.templateHome div#header{
  background-color: #3D3D3D;
}
div#header.open{
  height: 257px;
}

#header div#options,
#header a.login{
  line-height: 30px;
  position: absolute;
  right: 20px;
  top: 15px;
}

#header div#options{
  background-image: url("../../assets/images/options.svg");
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  color: transparent;
  width: 30px;
  user-select: none;
  transition: transform 0.3s;
  cursor: pointer;
}
#header.open div#options{
  background-image: url("../../assets/images/options-c.svg");
  transform: rotate(135deg);
}
#header div#options:hover{
  opacity: 1;
}

#header a.login{
  font-size: 15px;
  font-weight: 500;
  background-color: rgba(140,140,140,0.60);
  display: inline-block;
  padding: 0 15px 0 15px;
  border-radius: 15px;
}

#header a{
  color: #333;
  text-decoration: none;
}


#header div#options + div{
  position: absolute;
  right: 0;
  top: 60px;
  left: 0;
}

#header div#options + div > div{
  /* padding-right: 70px; */
  border-bottom: 1px solid rgba(114,114,114,0.3);
  text-align: right;
}
#header div#options + div > div:last-child{
  border-color: transparent;
}

/* Options + Icons General*/
#header div#options + div > div > *{
  position: relative;
  padding-right: 60px;
}
#header div#options + div > div > *::before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Search Form */
#header div#options + div form{
  height: 40px;
  padding-top: 10px;
}
#header div#options + div form::before{
  background-image: url("../../assets/images/search.svg");
}
.templateHome #header div#options + div form::before{
  background-image: url("../../assets/images/search-w.svg");
}

/* Links */
#header div#options + div a{
  line-height: 40px;
  display: block;
  font-weight: 400;
}
.templateHome #header div#options + div a{
  color: #eee;
}
#header div#options + div a:hover{
  background-color: rgba(114,114,114,0.15);
}
#header div#options + div a::before{
  top: 5px;
}

#header a.edit::before{
  background-image: url("../../assets/images/edit.svg");
}
#header a.add::before{
  background-image: url("../../assets/images/plus.svg");
}
#header a.logout::before{
  background-image: url("../../assets/images/logout.svg");
}
.templateHome #header a.edit::before{
  background-image: url("../../assets/images/edit-w.svg");
}
.templateHome #header a.add::before{
  background-image: url("../../assets/images/plus-w.svg");
}
.templateHome #header a.logout::before{
  background-image: url("../../assets/images/logout-w.svg");
}



div#headerLogo{
  content: "";
  width: 111px;
  height: 60px;
  background-image: url("../../assets/images/hmiwiki-s.svg");
  background-repeat: no-repeat;
  background-position: center;
  left: 50px;
  top: 0;
  position: absolute;
}
.templateHome div#headerLogo{
  background-image: url("../../assets/images/hmiwiki-w.svg");
}
#headerLogo a{
  color: transparent;
  display: block;
  width: 100%;
  height: 100%;
}

/*************************************************/
/* MENU-TOGGLE */
/*************************************************/


div#menuSwitch{
  position: fixed;
  width: 40px;
  height: 40px;
  padding: 10px 0 0 5px;
  z-index: 2;
  cursor: pointer;
  opacity: 0.4;
  
}
#menuSwitch:hover{
  opacity: 0.8;
}
#menuSwitch:active{
  transform: scale(0.9);
}
#menuSwitch > div{
  width: 40px;
  height: 39px;
  background-image: url("../../assets/images/menu-switch-2.svg");
  transform: rotate(0);
  transition: transform 0.4s;
}
.templateHome #menuSwitch > div{
  background-image: url("../../assets/images/menu-switch-1.svg");
}

#menuSwitch.off > div{
  transform: rotate(180deg);
}




/*************************************************/
/* MEDIA QUERIES */
/*************************************************/

/* Default Desktop */


div#menu{
  left: 0;
  transition: left 0.4s, width 0.4s;
}
#menuSwitch.off + div#menu{
  left: -360px;
}

div#content{
  padding: 60px 40px 100px 400px;

  transition: padding 0.4s;
}
#menuSwitch.off + * + * + div#content{
  padding-left: 40px;
}

div#items{
  transition: margin-top 0.4s;
}

/* Tablet && Small Desktop*/
@media (min-width: 600px) and (max-width: 1000px){

  div#menu{
    left: -360px;
  }

}
/* Phone */
@media (max-width: 599px){
  div#menu{
    width: 100%;
    left: -100%;
  }
  div#logo{
    height: 84px;
  }
  #logo div{
    margin-top: 30px;
    height: 54px;
  }
  div#items{
    margin-top: 0;
  }
}

/* Common Tablet and Phone */
@media (max-width: 1000px){
  #menuSwitch > div{
    transform: rotate(180deg);
  }

  #menuSwitch.on > div{
    transform: rotate(0);
  }
  div#menuSwitch.on{
    opacity: 1;
  }

  #menuSwitch.on + div#menu{
    left: 0;
  }

  div#content{
    padding-left: 40px;
  }  
}
div#contentsTable{
  min-width: 300px;
  margin-bottom: 20px;
}

#contentsTable div{
  line-height: 30px;
  background-color: #E7E7E7;
  padding-left: 10px;
  padding-right: 20px;
}

#contentsTable div a::before{
  content: "\2192";
  margin-right: 10px;
}

#contentsTable div.parent{
  margin-bottom: 10px;
}

#contentsTable div.parent a::before{
  content: "\2190";
}


#contentsTable a{
  color: #333;
}

#contentsTable a:hover{
  border: none;
  color: #2FB3D3;
}

#contentsTable  div.headline{
  font-size: 13px;
  font-weight: 400;
  color: #2FB3D3;
}

/*************************************************/
/* Container */
/*************************************************/

#content div.iconlist{
	margin: 10px 0 30px 0;
}

/*************************************************/
/* Thumbs */
/*************************************************/

#content .iconlist div.thumb{
	display: inline-block;
	cursor: pointer;
	position: relative;
}

#content .iconlist .thumb img{
	max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

/*************************************************/
/* Downloads */
/*************************************************/

#content .iconlist .downloads div{
	background-color: #E7E7E7;
	font-size: 16px;
	font-weight: 400;
	height: 27px;
	padding-left: 20px;
	padding-top: 13px;
	border-top: 1px solid #fff;
}
#content .iconlist .dark + .downloads div{
	background-color: #464646;
	border-top: 1px solid #333;
	color: #fff;
}

#content .iconlist .downloads span{
    font-style: italic;
}

/*************************************************/
/* List-Specific */
/*************************************************/

#content .iconlist div.icon{
	background-color: #fff;
	/* position: relative; */
	border-top: 1px solid #E7E7E7;
	padding: 0 20px 0 10px;
	/* white-space: nowrap; */
	display: flex;
	align-items: center;
}
#content .iconlist div.icon.dark{
	background-color: #333;
	border-color: #464646;
	color: #fff;
}
#content .iconlist div.icon:first-child{
	border: none;
}


#content .iconlist .icon > div:first-child{
	display: flex;
	align-items: center;
	flex-grow: 1;
}

#content .iconlist .icon div.title{
	cursor: pointer;
	/* overflow: hidden;
	text-overflow: ellipsis; */
	white-space: nowrap;
}

#content .iconlist .icon div.desc{
	cursor: pointer;
	font-size: 0.9em;
	flex-shrink: 1;
	margin-left: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#content .iconlist .icon div.variants a{
	margin-left: 10px;
}


/*************************************************/
/* Grid-Specific */
/*************************************************/

#content .iconlist div.thumbs{
	background-color: #fff;
}
#content .iconlist div.thumbs.dark{
	background-color: #333;
}


/*************************************************/
/* Gallery */
/*************************************************/

#gallery div.iconExhibit{
	background-color: #fff;
	width: 900px !important;
	height: 900px !important;
	border-radius: 20px;
}

#gallery div.iconExhibit.dark{
	background-color: #333;	
}

#gallery .iconExhibit > img{
	min-width: 160px;
	min-height: 160px;
	max-width: 60%;
    max-height: 60%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;	
}

#gallery .iconExhibit > div{
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	user-select: none;
	padding: 0 20px 0 20px;
}

#gallery .iconExhibit div.title{
	top: 30px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#gallery .iconExhibit div.variants{
	bottom: 30px;
}

#gallery .iconExhibit div.variants::before{
	content: "Download as ";
}

#gallery .iconExhibit div.variants a{
	margin-left: 5px;
	pointer-events: all;
}
#gallery .iconExhibit div.variants a:first-child{
	margin-left: 2px;
}

#gallery .iconExhibit.dark {
	color: #fff;
}


/*************************************************/
/* LINKS */
/*************************************************/

#gallery a{
	text-decoration: none;
	color: #34C6E9;
	font-weight: 500;
	position: relative;
	padding: 0 2px 0 2px;
  }
  #gallery .dark a, 
  #content .iconlist .dark a, 
  #content .iconlist .dark + .downloads div a{
	font-weight: initial;
  }
  
  #gallery a:hover{
	color: #90d8ea;
  }




#content .iconlist .thumb.new::after,
#content .iconlist .new .title::after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 11px;
    background-image: url("../../assets/images/new.svg");
}

#content .iconlist .thumb.new::after{
    position: absolute;
    right: 8px;
    top: 6px;
}

#content .iconlist .new .title::after{
    margin-left: 6px;
}

div#gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(250,250,250,0.95);
    z-index: 2;
    transition: opacity 0.4s;
}
div#gallery.initial{
    opacity: 0;
}
div#gallery::before{
    content: "";
    display: block;
    position: absolute;
    right: 5px;
    top: 0;
    width: 60px;
    height: 60px;
    background-image: url("../../assets/images/close.svg");
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#gallery div.index{
    margin-bottom: 4%;
    width: 100%;
    text-align: center;
}
#gallery div.index > div{
    display: inline-block;
    width: 30px;
    text-align: center;
    cursor: pointer;
    font-weight: 400;
    font-size: 1.5em;
    user-select: none;
}
#gallery div.index > div.num{
    width: 90px;
    cursor: default;
}

#gallery div.caption{
  margin-bottom: 20px;
  width: 90%;
  min-height: 2.2em;
  /* opacity: 0.5; */
  font-weight: 400;
  font-size: 1em;
  line-height: 1.1em;
  text-align: center;
  /* white-space: nowrap; */
}

#gallery div.expo{
    margin: 20px 0 20px 0;
    width: 90%;
    flex-grow: 1;
    position: relative;
}

#gallery div.expo > *.exhibit{
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    transition: opacity 0.4s, transform 0.4s;
}
#gallery.initial div.expo > *.exhibit{
    transform: scale(0.9);
}

#gallery *.exhibit.prev{
    opacity: 0;
    transform: translateX(-10%);
    pointer-events: none;
}

#gallery *.exhibit.next{
    opacity: 0;
    transform: translateX(10%);
    pointer-events: none;
}

#gallery *.exhibit *{
    pointer-events: none;
}


/* Tags */
/* #gallery div.flag{
    margin-top: 25px;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    pointer-events: none;
    position: relative;
  }

#gallery div.fileflag{
    display: inline-block;
    background-color: #CBCBCB;
    color: #333;
    padding: 5px 7px 3px 7px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    max-width: 90%;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: all;
    cursor: default;
  }
  
  #gallery div.fileflag.red{
    background-color: #FF654D;
    color: #fff;
  }
  
  #gallery div.fileflag.blue{
    background-color: #34C6E9;
    color: #333;
  }
  
  #gallery div.fileflag div.flagDesc{
    display: none;
  }
  
  #gallery div.fileflag:hover div.flagDesc{
    display: block;
    position: absolute;
    width: 90%;
    top: 30px;
    left: 50%;
    margin-left: -45%; 
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.2em;
    color: #333;
  } */

  #gallery div.flag{
    margin-top: 25px;
    margin-bottom: 20px;
    width: 100%;
    /* text-align: center; */
    pointer-events: none;
    position: relative;
  }

  #gallery .flag  div.fileflag{
    text-align: center;
  }

  #gallery .flag  .fileflag div.title{
    pointer-events: all;
  }

  #gallery .flag .fileflag div.desc{
      position: absolute;
      left: 50%;
      margin-left: -150px;
  }
#content table{
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 30px 0;
    border: 1px solid #ccc;
}

#content td, #content th{
    border-right: 1px solid #aaa;
    padding: 8px 10px 5px 10px;
    text-align: left;
    vertical-align: top;
}
#content tr{
    border-bottom: 1px solid #ccc;
}
#content thead tr{
    border-bottom: 1px solid #aaa;
}
#content td:last-child, #content th:last-child{
    border-right: none;
}
#content th *{
    font-weight: 700;
}
#content th{
    background-color: rgba(204,204,204,0.30);
}

#content table td > *:last-child,
#content table th > *:last-child,
#content table td > *:last-child img,
#content table th > *:last-child img{
    margin-bottom: 0;
}

#content table td > *:first-child,
#content table th > *:first-child,
#content table td > *:first-child img,
#content table th > *:first-child img{
    margin-top: 0;
}

#content table td > h2:first-child,
#content table th > h2:first-child,
#content table td > h3:first-child,
#content table th > h3:first-child,
#content table td > h4:first-child,
#content table th > h4:first-child,
#content table td > h5:first-child,
#content table th > h5:first-child,
#content table td > h6:first-child,
#content table th > h6:first-child{
    margin-top: -75px;
    padding-top: 80px;
}
#content ul.filelist{
    padding-left: 32px;
}

#content ul.filelist li:before{
    width: 20px;
    height: 15px;
    background-color: transparent;
    background-image: url(../../assets/images/filelist/document.svg);
    top: 2px;
    left: -27px;
}
#content ul.filelist li.archive:before{
    background-image: url(../../assets/images/filelist/archive.svg);
}
#content ul.filelist li.audio:before{
    background-image: url(../../assets/images/filelist/audio.svg);
}
#content ul.filelist li.binary:before{
    background-image: url(../../assets/images/filelist/binary.svg);
}
#content ul.filelist li.code:before{
    background-image: url(../../assets/images/filelist/code.svg);
}
#content ul.filelist li.document:before{
    background-image: url(../../assets/images/filelist/document.svg);
}
#content ul.filelist li.image:before{
    background-image: url(../../assets/images/filelist/image.svg);
}
#content ul.filelist li.layout:before{
    background-image: url(../../assets/images/filelist/layout.svg);
}
#content ul.filelist li.video:before{
    background-image: url(../../assets/images/filelist/video.svg);
}
#content ul.filelist li.slides:before{
    background-image: url(../../assets/images/filelist/slides.svg);
}

#content ul.filelist span{
    font-style: italic;
}

#content div.filelist > div{
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 40px;
    cursor: pointer;
    position: relative;
}

#content .filelist img{
    margin: 0;
}

#content div.flHead{
    margin-bottom: 10px;
}

#content .filelist div.video{
    width: 160px;
    height: 55px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    padding-top: 35px;
    background-image: url(../../assets/images/filelist/video.svg);
    background-repeat: no-repeat;
    background-position: center 15px;
}
#content .filelist div.video p{
    color: #34C6E9;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 5px 0 5px;
}


#gallery div.videogallery{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


#gallery .videogallery video, 
#gallery .videogallery a{
    pointer-events: all;
}

#gallery .videogallery.next video, 
#gallery .videogallery.next a, 
#gallery .videogallery.prev video, 
#gallery .videogallery.prev a{
    pointer-events: none;
}





#content .filelist .new::after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 11px;
    background-image: url("../../assets/images/new.svg");
}

#content div.filelist .new::after{
    position: absolute;
    right: -3px;
    top: -4px;
}



#content div.filelist div.fileflag{
    position: absolute;
    right: -3px;
    top: -5px;
    text-align: right;
}

#content div.filelist .new div.fileflag{
    right: 22px;
}

#content div.filelist .fileflag div.title{
    font-size: 0;
    padding: 2px 3px 0 3px;
    width: 5px;
    height: 9px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    overflow: hidden;
}

#content div.filelist .fileflag:hover div.title{
    font-size: 9px;
    line-height: 9px;
    width: auto;
    height: auto;

}

/* #content div.filelist .fileflag div.desc{
    display: none;
} */

#content .filelist div.fileflag{
    display: inline-block;
    top: -2px;
}

#content .filelist .fileflag div.title{
    padding: 2px 3px 0 3px;
    border-radius: 2px;
    letter-spacing: 0.5px;   
    font-size: 9px;
    line-height: 9px; 
}

#content ul.filelist .fileflag div.desc{
    position: absolute;
}
#content ul.changelog{
    padding: 0;
}

#content ul.changelog > li::before{
    content: "\2192";
    margin-right: 5px;

    position: initial;
    display: inline;
    background: none;
}

#content ul.changelog > li > a > span{
    color:#444;
    font-weight: 400;
}

#content ul.changelog > li > a:hover,
#content ul.changelog > li > a:hover > span,
#content li > a.pagelink:hover, 
#content li > a.pagelink:hover > span
{
    color: #90d8ea;
}

#content ul.changelog ul{
    padding-left: 58px;
    margin-top: 8px;
    margin-bottom: 24px;  
}

#content ul.changelog > li > span{
    margin-right: 5px;
    font-style: italic;
}

#content ul.changelog > li > span::before{
    content: "";
    display: inline-block;
    height: 13px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}

#content ul.changelog > li > span.page::before{
    width: 21px;
    background-image: url("../../assets/images/page.svg");
}

#content ul.changelog > li > span.files::before{
    width: 23px;
    background-image: url("../../assets/images/files.svg");
}

#content ul.changelog li.ellipsis::before{
    content: "\205D";
    text-align: center;
    background: none;
}

#content li > a.pagelink, #content li > a.pagelink > span{
    color: #333;
    font-style: normal;
}

#content li > a.pagelink::before{
    content: "\2192";
    margin-right: 3px;
    margin-left: 10px;
    font-weight: 300;
}

#content ul.changelog > li.new > span::after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 11px;
    background-image: url("../../assets/images/new.svg");
}
#content span.info{
	background-color: #e4e4e4;
	padding: 10px 10px 10px 40px;
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
	display: block;
}

#content span.info::before{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(../../assets/images/info.svg);
	position: absolute;
	left: 10px
}

#content div.info{
	background-color: #e4e4e4;
	padding: 10px 10px 10px 64px;
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 30px;
	position: relative;
	min-height: 40px;
	font-size: 1.25em;
}

#content div.info::before{
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	background-image: url(../../assets/images/info.svg);
	background-size: 100%;
	position: absolute;
	left: 10px
}

#content span.info.warning::before, #content div.info.warning::before{
	background-image: url(../../assets/images/warning.svg);
}
#content span.info.warning, #content div.info.warning{
	background-color: #FFB000;
}

#content div.info > *:first-child{
	margin-top: 0;
}
#content div.info > *:last-child{
	margin-bottom: 0;
}

/* Big infos as first element get docked to top*/
#content div.info.big:first-child {
	border-radius: 0;
	margin-top: 0;
	margin-left: -40px;
	margin-right: -40px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 99px;
	padding-right: 40px
}

#content div.info.warning:first-child::before{
	left: 40px;
}