/* Collapsible Item */
/* Title tekst that is used to open and close the collapsible content */
.collapsible-item-title {
	background-color: #777777;
	color: #ffffff;
	cursor: pointer;
	border: none;
	text-align: left;
	outline: none;
	border-radius: 7px;
}
/* color when collapsed and contains local additions */
.collapsible-localadd > .collapsible-item-title {
	background-color: #777777;
	color: #ffffff;
}
/* color when expanded and contains local additions */
.collapsible-localadd > .collapsible-item-active {
	background-color: #777777;
	color: #ffffff;
}
/* Size of the clickable button for each header */
.collapsible-item-title h1 {
	padding: 14px 20px 14px 10px;
	margin-bottom: 0px !important;
}
.collapsible-item-title h2 {
	padding: 10px 20px 10px 10px;
	margin-bottom: 10px !important;
}
.collapsible-item-title h3 {
	padding: 6px 20px 6px 10px;
	margin-bottom: 10px !important;
}
.collapsible-item-title h4 {
	padding: 3px 20px 3px 10px;
	margin-bottom: 10px !important;
}
/* Expand/collapse signs */
.collapsible-item-title h1:after, .collapsible-item-title h2:after, .collapsible-item-title h3:after, .collapsible-item-title h4:after {
       content: "";
       float: right;
       width: 0.4em;
       height: 0.4em;
       border-right: 0.2em solid;
       border-top: 0.2em solid;
       transform: rotate(135deg);
	margin-top: 5px;
       transition-duration: 0.4s;
}
.collapsible-item-active h1:after, .collapsible-item-active h2:after, .collapsible-item-active h3:after, .collapsible-item-active h4:after {
	margin-top: 7px;
	transform: rotate(-45deg);
       transition-duration: 0.4s;
}
/* Style the collapsible text (content) */
.collapsible-item-body {
	padding-left: 10px; /* indention of section */
	padding-bottom: 0px; /* space below bottom line */
	overflow: hidden;
	border-bottom-style: none; /* create bottom line */
	border-color: #777777; /* color of bottom line */
}
/* Lightbox */
.lightbox-container {
	display: none !important; /* Hidden by default; must be important to overwrite Ext settings */
	position: fixed; /* Stay in place */
	z-index: 999; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
.lightbox-content {
	margin: auto !important; /* must be important to overwrite Ext settings */
	flex-direction: column;
	width: 70%; /* width of text */
	padding-top: 100px; /* Location of the box */
	color: #fff;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}
.lightbox-content img, .lightbox-content iframe, .lightbox-content video {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}
@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
.lightbox-content a, .lightbox-content a:link, .lightbox-content a:visited {
	color: #aaaaff;
	text-decoration: none !important;
}
.lightbox-content a:active, .lightbox-content a:hover, .lightbox-content a:focus  {
	text-decoration: underline !important;
}
.contentread .lightbox-link {
	color: #0000ff !important;
}
/* Image view */
.imageContainer {
	overflow: auto;
	height: 95%; /* fallback if calc does not work */
	height: calc(100% - 50px);
	width: 100%
}
.imageBar {
	background-color: black;
	height: 5%; /* fallback if calc does not work */
	height: calc(50px);
	width: 100%;
	color: white;
	line-height: 50px;
	overflow: hidden;
}
.imageText {
	position: absolute;
	left: 25px;
}
.imageClose {
	position: absolute;
	right: 30px;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
}
.imageClose:hover, .imageClose:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}
/* Private Notes */
.collapsible-item-title {
	position: relative; /* addition required for the privatenote-collapsible to work */
}
/* the tooltip header */
.privatenote .x-tip-header {
	padding-bottom: 5px;
}
/* the tooltip that displays the actual note */
.privatenote .x-tip-body {
	background-color: #FFE4B5;
	padding: 5px;
	border: 1px solid grey;
	/*box-sizing: border-box;*/
}
/* position of the icon for collapsible sections */
.privatenote-collapsible {
	position: absolute;
	top: 50%;
	margin-top: -8px; /* centers it verticalley */
	height: 25px;
	width: 25px;
	right: 40px;
}
/* position of the icon for flat (old) sections */
.privatenote-flat {
	padding-right: 25px;
}
/* icon for private notes */
.privatenoteicon {
	background: transparent url(icons/privatenote.png) no-repeat top right;
}