/* ---------- Fonts saved on Server ---------- *
	
	PatrickHandSC-Regular.ttf
	FredokaOne-Regular.ttf
    Calligraffitti-Regular.ttf
	Chilanka-Regular.ttf
	HiMelody-Regular.ttf
	BungeeHairline-Regular.ttf

/* ----------------------------------------- */

@font-face {
	font-family: 'Chilanka';
	src: url('../fonts/Chilanka-Regular.ttf')  format('truetype');
}



/* Global Settings */

* {
	font-size: 16px;
	font-family: Chilanka, Arial, sans-serif;
	
	margin: 0;
	padding: 0;
}



/* Variablen */

:root {
  --main-color: #6b716f; /*#3264C9;*/
  --main-hover-color: #000; /*rgba(0, 60, 156, 1);*/
  --font-color: #000;
  --font-color-inverted: #fff;
  --background-color: #fff;
  --header-color: var(--main-color);
  --header-background-color: #fff;
  --login-error-color: red;
  --footer-color: #fff;
  --footer-background-color: var(--main-color);
  --font-shadow: #293133;
  --hover-color: rgba(41, 49, 51, 0.6);
  --table-alternate-color: rgba(210, 210, 210, 1);
  --table-hover-color: rgba(210,210,210,1);
}


/* Schriften */

p {
	font-size: 16px;
	padding-top: 8px !important;
	font-family: Chilanka, Arial, sans-serif;
}

h1 {
	font-size: 50px;
	font-family: Chilanka, Arial, sans-serif;
	color: var(--header-color);
	font-weight: 700;
	letter-spacing: 0.1em;
	padding-top: 25px !important;
}

h2 {
	font-size: 30px;
	padding-top: 15px;
}

h3 {
	font-size: 20px;
	padding-top: 10px;
}

h4 {
	font-size: 20px;
	padding-top: 10px;
	color: var(--font-color-inverted);
}

h5 {
	
}

h6 {
	
}

.site-index main {
/* 	background: linear-gradient(to top right, rgba(0, 255, 0, 0.4), rgba(0, 0, 255, 0.8)); */
	background-image: url('/files/_site/background.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	border-style: solid;
	border-color: var(--main-hover-color);
	border-width: 2px 0 2px 0;
	
}

.site-gallery main {
	border-style: solid;
	border-color: var(--main-hover-color);
	border-width: 2px 0 2px 0;
}

a:link, a:visited, a:hover, a:active, a {
	text-decoration: none;
	color: inherit;
	margin-left: 10px;
}

.page_admin, .page_not_authorized {
	background-color: var(--background-color);
	box-sizing: border-box;
	overflow: auto;
}

.page_not_authorized h2, .page_not_authorized h3, .page_not_authorized a {
	margin: 20px auto 20px 5%;
	padding: 5px;
	display: block;
	width: auto;
}

.no_border {
	border: none !important;
}

.page_not_authorized h2 {
	color: var(--login-error-color);
}

.page_not_authorized a input {
	margin: 0;
}

.nav_admin {
	display: flex;
	margin: 20px 50px;
}

.nav_admin .active .nav_button {
	background-color: var(--main-hover-color);
}

.nav_admin .active:hover .nav_button {
	background-color: var(--main-color);
}

.nav_button {

}

.admin_content {
	margin: 20px 60px;
	border: 1px solid var(--main-color);
	display: flex;
	flex-wrap: wrap;
}

.user_edit_list {
	width: 65%;
}

.user_edit_table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--main-hover-color);
}

.user_edit_table tr th {
	border-bottom: 2px solid var(--main-hover-color);
	padding: 9px 10px 6px 15px;
	text-align: left;
}

.user_edit_table tr td {
	border-bottom: 1px solid var(--main-color);
	padding: 9px 10px 6px 15px;
}

.user_edit_table .table_content:nth-child(odd) {
	background-color: var(--table-alternate-color);
}

.new_user_form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin: 20px;
	width: 100%;
}

.edit_user {
	display: flex;
	justify-content: flex-start;
	width: 100%;
}

.edit_user_form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 30%;
	margin-left: 20px;
	padding: 20px;
}

.new_user_input, .edit_user_input {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.new_user_input h3 {
	display: flex;
	width: 180px;
}

.edit_user_input h3 {
	display: flex;
	margin-right: 15px;
	margin-top: -5px;
}

.new_user_input input, .edit_user_input input {
	padding-left: 5px;
}

.edit_user_input input {
	margin-bottom: 5px;
}

.new_user_input input, .new_user_input label, .new_user_input select, .new_user_input p {
	margin-left: 20px;
}

.new_user_info {
	color: var(--login-error-color);
}

.red-border {
	border: 1px solid crimson;
}

.green-border {
	border: 1px solid limegreen;
}

.red {
	color: darkred;
}

.green {
	color: darkgreen;
}


.table-row-selected {

}

.table_content:hover, .table_content:nth-child(odd):hover {
	background-color: rgba(140,140,140, 0.8);
	cursor: pointer;
}

.border {
	border: 1px solid var(--main-hover-color);
}

/* General */

input {
	padding-top: 8px !important;
}

input[type="button"], input[type="submit"] {
	background-color: var(--main-color);
	color: var(--font-color-inverted);
	padding: 0 20px;
	border: none;
	height: 42px;
	cursor: pointer;
}

input[type="button"]:hover, input[type="submit"]:hover {
	background-color: var(--main-hover-color);
}

/* Header */

header, .header, .header_logo {
	background-color: var(--header-background-color);
	color: var(--header-color);
	width: 100%;
	height: 120px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.header_logo {
	width: auto;
	height: 80px;
	padding: 20px;
}

.logo_picture {
	display: inherit;
	height: 100%;
	width: auto;
	justify-content: flex-start;
}

.logo_text {
	border-right: solid 3px var(--header-color);
	padding: 0 50px;
	box-sizing: border-box;
	white-space: nowrap !important;
}

.authBox {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

form.auth, .authMenuButton {
	display: inline-flex;
	justify-content: flex-end;
	margin-right: 20px;
}

.auth input[type="text"], .auth input[type="password"] {
	width: 240px;
	padding-left: 50px;
	height: 32px;
	border: 1px solid var(--main-color);
	margin-right: 20px;
}

.authDataBox, .authBox, .authMenuButton {
	display: flex;
	flex-wrap: nowrap;
	height: auto;
	align-items: center !important;
}

.auth label, .authDataLabel, .authMenuButton label {
	background-color: var(--main-color);
	color: var(--font-color-inverted);
	height: 40px;
	width: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: -40px;
	z-index: 100;
}

.folderDataLabel {
	color: var(--main-color);
	height: 30px;
	min-width: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	margin: 0;
	padding: 0;
}

.content_row:hover label:first-child, .folderDataLabel:hover, .new_content div:hover label {
	color: var(--main-hover-color);
	cursor: pointer;
}

.content_row {
	display: flex;
	width: 100%;
	flex-wrap: nowrap;
	justify-content: flex-end;
	box-sizing: border-box;
}

.content_row a:nth-child(2), .content_row p {
	width: 100%;
	display: flex;
}

.content_row a {
	margin: 0;
}

.new_content {
	display: flex;
	width: 100%;
	border-bottom: 1px solid var(--main-color);
}

.new_content p:first-child {
	margin-left: 18px;
}

.new_content p {
	margin-right: 18px;
}

.new_content label {
	margin-left: 20px;
}

.new_content div {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	width: auto;
}

.new_content div:first-child {
	width: 100%;
}

.new_content .click-hover{
	cursor: pointer;
}

.folder_view {
	width: 100%;
	display: block;
}



.authMenuButton {
	display: none;
}

.authMenuButton label:hover {
	background-color: var(--main-hover-color);
	cursor: pointer;
}

.auth .info {
	min-width: 100px;
	width: auto;
	display: flex;
	flex-wrap: wrap;
	color: var(--login-error-color);
	margin-right: 20px;
}

.auth .order {
	display: flex;
	flex-direction: row;
}

.loginButton {
	margin-top: auto !important;
	margin-bottom: auto !important;

}



@media only screen and (max-width: 1400px) {
	form.auth {
		display: none;
	}
	
	.authBox  {
		width: 100%;
	}
	
	.authMenuButton {
		display: inline-flex;
		margin-right: 40px;
	}

	.auth .order {
		flex-direction: column;
	}
}


/* Mobile View */

@media only screen and (max-width: 650px) {
	form.auth {
		display: none;
	}
	
	.authBox {
		width: auto;
	}
}


.arrowBox {
	position: absolute;
	display: block !important;
	right: 0;
	top: 105px;
	border: 3px solid var(--main-hover-color);
	padding: 20px;
	z-index: 100;
	background-color: white;
}

.arrowBox input {
	margin: 0 0 20px 0 !important;
	order: 3;
}

.arrowBox input[type="submit"] {
	margin: 0 !important;
}

.arrowBox .info {
	order: 2;
	margin: 0 0 20px 0 !important;
}

.arrowBox .info p {
	padding-left: 2px;
}

.arrowBox label {
	margin-bottom: 20px;
}

.arrowBox .loginButton {
	justify-content: flex-end;
	order: 3;
}

.arrowBox:after {
	content: '';
	width: 0;
	height: 0;
	border-bottom: 20px solid var(--main-hover-color);
	border-left: 20px solid transparent ;
	border-right: 20px solid transparent ;
	position: absolute;
	bottom: 100%;
	right: 17px;
}




main {
	background-color: var(--background-color);
}

.main_wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30px 15%;
}

.site-gallery .main_wrapper {
	padding: 30px;
}

.contentCategory {
	width: 250px;
	height: 250px;
	margin: 20px;
	box-shadow: 2px 2px var(--main-hover-color), 2px -2px var(--main-hover-color), -2px 2px var(--main-hover-color), -2px -2px var(--main-hover-color);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	background-size: cover;
	overflow: hidden;
	opacity: 0.75;
}

.contentCategory:hover {
	cursor: pointer;
	width: 256px;
	height: 256px;
	margin: 17px;
	opacity: 1;
}

.contentCategory .hoverbutton {
	left: -100%;
	opacity: 0;
}

.contentCategory:hover .hoverbutton {
	left: 0;
	opacity: 1;
	transition: left 0.2s ease-out, opacity 0.1s ease-in;
	background-color: var(--main-hover-color);
}

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

.contentCategory input[type="button"], .hoverbutton {
	color: var(--font-color-inverted);
	background: var(--main-color) none;
	position: absolute;
	top: 70%;
	font-size: 25px;
	font-weight: 900;
	height: 45px;
}


.gallery_images {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
}

.single_image_wrapper {
	margin: 30px;
	width: 250px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.single_image {
	border: 1px solid var(--main-hover-color);
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;
}

.gallery_nav {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0 20px;
}

.gallery_nav_btn {
	color: var(--main-color);
	background-color: var(--font-color-inverted);
	border: 1px solid var(--main-hover-color);
	width: 45px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 5px;
	margin: 10px;
}

.gallery_nav_btn:hover, .gallery_nav_btn.active:hover {
	width: 53px;
	height: 46px;
	margin: 6px;
	padding-top: 8px;
	background-color: var(--main-hover-color);
	cursor: pointer;
	color: var(--font-color-inverted);
}

.gallery_nav_btn.active {
	background-color: var(--main-color);
	color: var(--font-color-inverted);
}

.gallery_nav_btn span {
	font-size: 20px;
	font-weight: 900;
}











footer {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.contact_info {
	background-color: var(--main-color);
	width: 100%;
	display: inline-flex;
	padding: 20px 60px;
	justify-content: flex-start;
	flex-grow: 1;
	color: var(--font-color-inverted);
}

.contact_info h4 {
	margin-right: 40px;
}

.contact_info p {
	display: flex;
	width: auto;
	margin-top: 5px;
	color: var(--header-background-color);
	padding-left: 10px;
	padding-right: 10px;
}

.site_info {
	width: 100%;
	display: inline-flex;
	background-color: #25221e; /*var(--main-hover-color);*/
	justify-content: space-between;
	padding: 10px 50px;
	color: #fff; /*var(--font-color-inverted);*/
}

.site_info div {
	width: auto;
	display: inline-flex;
}


 /* Customize the label (the container) */
.menu {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  width: 200px;
}

/* Hide the browser's default radio button */
.menu input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 37px;
  width: 200px;
  text-align: center;
  padding-top: 5px;
  background-color: #eee;
  font-size: 22px;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

/* On mouse-over, add a grey background color */
.menu:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.menu input:checked ~ .checkmark {
  background-color: #3264C9;
  color: white;
}



/* Checkbox */

.ckbx {
	display: block;
	cursor: pointer;
	position: relative;
	height: 100%;
}

.ckbx input {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	position: relative;
	cursor: pointer;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	visibility: hidden;
}

.ckbx .checkmark {
	position: absolute;
	top: 5px;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border-style: solid;
	border-color: var(--main-hover-color);
	border-width: 1px;
	box-sizing: border-box;
}

.ckbx:hover input ~ .checkmark {
	background-color: var(--background-color);
}

.ckbx input:checked ~ .checkmark {
	background-color: var(--main-color);
}

.ckbx .checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 5px;
	top: 1px;
	width: 8px;
	height: 13px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	transform: rotate(35deg);
	box-sizing: border-box;
}

.ckbx input:checked ~ .checkmark:after {
	display: block;
}

.ckbx .disabled {
	border-color: lightgray;
	cursor: not-allowed;
}

.ckbx .disabled:hover {
	background-color: #eee !important ;
}

.accessTable {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin: 0 -20px;
}

.usersCol, .directoryListTable {
	display: flex;
	width: 100%;
	margin: 0 20px;
	border: 1px solid var(--main-color);
	flex-direction: column;
	height: 350px;

}

.usersCol h3, .directoryListTable h3 {
	padding-left: 20px;
	background-color: var(--hover-color);
	box-sizing: border-box;
	color: var(--background-color);
	padding-bottom: 5px;
}

.usersCol div, .foldersCol div {
	height: 100%;
	overflow: scroll;
}

.usersCol .content {
	border-bottom: 1px solid var(--main-hover-color);
	display: flex;
	height: auto;
	padding: 3px 20px;
	cursor: pointer;
}

.usersCol .content:hover {
	background-color: var(--table-hover-color);
}

.directoryListTable {
	overflow: scroll;
}

.directoryListTable .directory {
	margin-left: 25px;
	box-sizing: border-box;
	border-left: 1px solid gray;
}

.directoryListTable .name {
	display: flex;
	flex-wrap: nowrap;
	box-sizing: border-box;
}

.directoryListTable label {
	margin: 3px 30px 3px 15px;
}