/* Fonts */
@font-face {
    /* Noto Sans regular */
    font-family: "Noto Sans";
    src: url('fonts/noto-sans_regular.ttf') format("truetype");
	font-weight:normal;
	
	font-family: "Aoboshi One";
	src: url('fonts/AoboshiOne-Regular.ttf') format("truetype");
	font-weight:normal;
}

* {
	padding:0;
	margin:0;
	outline:none;
    border-radius: 0;
	scrollbar-width: thin;
	scrollbar-color: #595A5F #EBEAF1;
}
*::-webkit-scrollbar {
	width: 12px;
}
*::-webkit-scrollbar-track {
	background: #EBEAF1;
}
*::-webkit-scrollbar-thumb {
	background-color: #595A5F;
	border-radius: 20px;
	border: 3px solid #EBEAF1;
}

html, body {
	margin: 0;
	padding: 0;
	z-index: 1;
	min-height:100vh;
}
body {
	font-size:16px;
	line-height:1.5em;
	background-color:#171729;
}
body, input, textarea, select, button {
	font-family: Arial, sans-serif;
	color:#bbb;
}
.books_color, body.books main a {
	color:#ffdbbb;
}
.books_bg {
	background-color:#634d38;
}
.movies_color {
	color:orange;
}
.movies_bg {
	background-color:orange;
}
.tv_color {
	color:teal;
}
.tv_bg {
	background-color:teal;
}
.webcomics_color {
	color:lime;
}
.webcomics_bg {
	background-color:lime;
}
.tags_color {
	color:fuchsia;
}
.tags_bg {
	background-color:#611277;
}
input, textarea, select, button {
	font-size:1rem;
	background-color:#fff;
}

.off {
	position:absolute;
	left:-9999px;
}
.container {
	width:94vw;
	max-width:1200px;
	height:100%;
	margin:0 auto;
}
a {
	color:#8797B7;
}
a:hover, a:focus-visible {
	color:#049797;
}
sup {
    position: relative;
    line-height: 1em;
    font-size: 75%;
}
*[data-title] {
	position:relative;
	overflow:visible;
}
*[data-title]:hover::after {
  content: attr(data-title);
  position: absolute;
  z-index: 5;
  bottom: -100%;
  left: 0;
  width:auto;
  white-space:nowrap;
  font-size:0.75rem;
  background-color:#fff;
  padding:0 3px;
  border:1px solid #595A5F;
  color:#595A5F;
}
#logout button[data-title]:hover::after {
	bottom: -48%;
	line-height: 2em;
}

.flex_container {
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	align-items: flex-start;
	/*align-content: flex-start;
	gap: 3rem;*/
	flex-direction: row;
}
/*.flex_container.unspaced {
	gap: 1rem;
}*/
.flex_container.aligned {
	justify-content:flex-start;
}

.flex_item {
	width: calc(100%);
	margin-bottom:3rem;
	/*flex-grow: 1;*/
}
.flex_item .flex_item:last-child {
	margin-bottom:0;
}
.flex_item.rel {
	position:relative;
}
.flex_col1 {
}


.aligned .flex_item {
	margin-right:1rem;
}
.unspaced .flex_item {
	margin-bottom:1rem;
}
.unspaced .flex_col2 {
	width: calc(50% - 1rem);
}
.unspaced .flex_col21 {
	width: calc(66.6% - 1rem);
}
.unspaced .flex_col3 {
	width: calc(33.3% - 1rem);
}
.unspaced .flex_col31 {
	width: calc(75% - 2rem);
}
.unspaced .flex_col4 {
	width: calc(25% - 1rem);
}
.unspaced .flex_col5 {
	width: calc(20% - 1rem);
}
.unspaced .flex_col6 {
	width: calc(16.6% - 1rem);
}

.flip_left {
	order: 1;
}
.flip_right {
	order: 2;
}

/* Header */
header {
	height:90px;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:20;
	background-color:#1a1a30;
	padding-top:10px;
}
header .flex_container {
	gap:0;
	justify-content:space-between;
}
header input[type="submit"] {
	margin-bottom:0;
	color:#ff6cc1;
	background-color:#fff;
	border: none;
	width: auto;
}
header input[type="submit"]:hover, header input[type="submit"]:focus {
    color: #fff;
}
.logo {
	display:inline-block;
	width:50%;
	max-width:270px;
	/*height:calc(100% - 10px);*/
	vertical-align:top;
}
.logo a {
	text-decoration:none;
	display: inline-block;
	height: 100%;
}
.logo a img {
	width: auto;
	height: auto;
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}
.navbutton, .navbutton .fa-times,
.infobutton, .infobutton .fa-times {
	display:none;
}
.service_nav {
	width:50%;
	max-width:200px;
	text-align:right;
	float:right;
}
.service_nav.wide {
	width:50%;
	max-width:250px;
	text-align:right;
	float:right;
}
.service_nav form {
	display:inline-block;
	vertical-align: top;
}
.service_nav button{
	background:none;
	color:#D1D8EF;
	border:none;
	cursor:pointer;
	font-size:1.5rem;
	width:auto;
	margin-bottom:0;
}
.service_nav a {
	color:#D1D8EF;
	font-size:1.25rem;
}
#logout a {
	margin-right:1rem;
}
.service_nav a:hover, .service_nav a:focus, .service_nav button:hover, .service_nav button:focus  {
	color:#fff;
}
.navbutton {
	display:none;
	vertical-align: top;
	width:40px;
	height:40px;
	cursor:pointer;
	font-size: 1.75rem;
	line-height: 1.5em;
	color: #D1D8EF;
	text-align:right;
}
.navbutton:hover {
	color:#fff;
}
.navbutton i, .infobutton i {
	padding-right:0;
}
.navbutton.open .fa-bars, .infobutton.open .fa-info-circle {
	display:none;
}
.navbutton.open .fa-times, .infobutton.open .fa-times {
	display:inline-block;
}

/* Navigation */

nav {
	width: 100%;
	height:auto;
	text-align:left;
	padding-top:0;
	display: inline-block;
	vertical-align: bottom;
}
nav ul {
	padding-left:0;
}
nav li {
	list-style:none;
	display:inline-block;
	color:#D1D8EF;
	font-weight:300;
}
nav > ul > li {
	position:relative;
	margin-right:1.5rem;
}
nav > ul > li > span {
	display:inline-block;
	color:inherit;
}
nav > ul > li:last-child {
	margin-right:0;
}
nav li a {
	text-decoration:none;
	font-size:1rem;
	line-height:1.5em;
	font-weight:inherit;
	display:inline-block;
	color:inherit;
	border-bottom:1px solid transparent;
	font-family: "Aoboshi One", serif;
}
nav li a:hover, nav li a:focus {
	color:inherit;
}
nav li:hover, nav li.active, nav li a.current {
	color:#049797;
}
nav li.active span, nav li a.current {
	border-bottom:1px solid #fff;
}
.subnav {
	position:absolute;
	z-index:2;
	background-color:#750043;
	left:-9999px;
	min-width:calc(100% + 1rem);
	padding:0.75rem 0.5rem 0 0.5rem;
	box-sizing:border-box;
}
li:hover .subnav, a:focus + .subnav {
	left:-0.5rem;
}
nav .subnav li {
	width:100%;
	padding-bottom:0.5rem;
}
nav .subnav li a {
	line-height:1.3em;
	padding-bottom:3px;
}


/* Inhalt / Content */

main {
	width:100%;
	min-height: calc((100vh - 2.5vw) - 50px);
	padding-bottom:2.5vw;
}
section {
	width:100%;
}
.page {
	padding-top:calc(120px + 2.5vw);
}
.page > .flex_item {
	position:relative;
}
.content {
	padding-top:0;
	padding-bottom:30px;
}
.content aside {
	background-color:#efefee;
	padding:15px;
	box-sizing:border-box;
}
.content aside img {
	width:100%;
	height:auto;
}


h1 {
	font-size:1.5em;
	line-height:1.5em;
	margin-bottom:1rem;
	font-weight:normal;
	width:100%;
}
h2 {
	font-size:1.25em;
	line-height:1.5em;
	margin-bottom:1rem;
	font-weight:normal;
	width:100%;
}
form h2 {
	background-color: #EBEAF1;
	padding-left: 0.5rem;
	border-radius: 7px;
	box-sizing: border-box;
}
h3 {
	font-size:1em;
	line-height:1.5em;
	margin-bottom:0.5rem;
	font-weight:600;
	width:100%;
}
h1, h2, h3 {
	font-family: "Aoboshi One", serif;
}
p {
	margin-bottom:1rem;
}
a.external {
	display:inline-block;
}
.content ul {
	padding-left:1rem;
}
.content li {
	/*list-style-type: symbols(cyclic '○' '●');*/
	list-style:square;
	padding-bottom:0.5rem;
}
q {
	display:block;
	quotes: "«" "»" "‹" "›"
}

.successful_action {
	position: absolute;
	z-index:15;
	color:#ff6cc1;
	background-color: #D1D8EF;
	border:1px solid #ff6cc1;
	top: 3rem;
	width: 50%;
	left:25%;
	max-width: 600px;
	padding:2rem;
	box-sizing:border-box;
	text-align:center;
}
.successful_action i {
	position:absolute;
	top:5px;
	right:3px;
	cursor:pointer;
}

.media_variant img {
	max-width:100%;
	height:auto;
}

#book_form .serialized {
	display:none;
}

.go2edit, .go2detail {
	width:auto;
	display:inline-block;
}


.block_title {
	display: block;
	padding: 5px;
	border-radius: 7px;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.slidup h1, .slidup > h2 {
	cursor:pointer;
}
.slidup .toggle_content {
	display:none;
}
.video_icon {
	cursor:pointer;
	color: #ff6cc1;
	margin-bottom:50px;
}
.video_icon i {
	font-size:3rem;
	display:inline-block;
	vertical-align:middle;
	padding-right:1rem;
}
.video_icon span {
	display:inline-block;
	vertical-align:middle;
	width:calc(100% - 4.5rem);
	text-decoration:underline;
}
.video_icon:hover, .video_icon:focus {
	color: #595A5F;
}
.video_container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom:2rem;
}
iframe.video {
	border:none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}


.page ul, .page ol {
	padding-left:1rem;
}
.page li {
	padding-bottom:1rem;
}
.page ul li {
	list-style:square;
}
.page ol li {
	list-style:decimal;
}
table {
	border-spacing: 0;
	width:100%;
}

#main table, table.new_users {
	margin-bottom:2rem;
}
table th, table td {
	padding:2px 5px;
	border-right:1px solid #595A5F;
	vertical-align:top;
}
table th {
	text-align:left;
	font-weight:normal;
	background-color:#595A5F;
	border-color:#333;
	color:#fff;
}
table tr.hidden {
	display:none;
}
table th:first-child {
	border-top-left-radius:7px;
}
table th:last-child {
	border-top-right-radius:7px;
}
table th:last-child, table td:last-child {
	border-right:none;
}
table tr:last-child td {
	border-bottom:none;
}
table tr:last-child td:first-child {
	border-bottom-left-radius:7px;
}
table tr:last-child td:last-child {
	border-bottom-right-radius:7px;
}
table tr.even td {
	background-color:#EBEAF1;
}

.file-input img {
	width:auto;
	max-width:100%;
	height:80px;
	cursor:pointer;
	margin-bottom:0.5rem;
}
.file-input i.fa-file-pdf {
	margin-bottom:1rem;
}


/* File Upload */

input.file {
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
  position: absolute;
}
.flex_col5.file-input {
	flex-grow:0;
	flex-basis: calc(20% - 1rem);
}

.file-input label:not(.invalid) {
  display: block;
  position: relative;
  width: 100%;
  max-width: 300px;
  padding:10px;
  box-sizing:border-box;
  background-color: #8797B7;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 3rem;
  border-radius:7px;
}
.file-input label:hover, .file-input label:focus {
	background-color: #595A5F;
}
.file-input label.hidden {
	display:none;
}

.file-name {
  position: absolute;
  bottom: -3rem;
  left: 10px;
  font-size: 0.85rem;
  color: #595A5F;
}


/* Modal / Popup */

.modal {
  display: none;
  position: fixed;
  z-index: 30;
  padding-top: 10vh;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(89,90,95,0.8);
}
.modal.open {
	display:block;
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: auto;
  width: 94vw;
  max-width:1200px;
  height:80vh;
  /*text-align:center;*/
  overflow-y : auto;
}
.modal-content img {
  max-height:79vh;
  height:auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.modal-content embed {
  height:100%;
  width: 100%;
}
.modal-close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor:pointer;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.in_modal {
	background-color: #fff;
	padding: 1rem;
	border-radius: 7px;
	box-sizing: border-box;
}


/* Formular */

table form {
	display:inline-block;
}
.break {
  flex-basis: 100%;
  height: 0;
}
.fieldblock {
	position:relative;
}
label {
	width:100%;
	display:inline-block;
}
input, textarea, select, button {
	border:1px dotted #bbb;
	background-color:#454545;
	padding:5px;
	font-size:1rem;
	margin-bottom:2.25rem;
	box-sizing:border-box;
	width: 100%;
	/*max-width: 335px;*/
	border-radius: 7px;
}
button {
	max-width:400px;
}
button.mini {
	width:auto;
	display:inline-block;
}

input {
	display:inline-block;
}
input:hover, input:focus, input:not(:placeholder-shown),
textarea:hover, textarea:focus, textarea:not(:placeholder-shown),
select:hover, select:focus {
	border-style:solid;
}
input.invalid, input.invalid:hover, input.invalid:focus,
textarea.invalid, textarea.invalid:hover, textarea.invalid:focus,
select.invalid, select.invalid:hover, select.invalid:focus {
	border-color:#ff6cc1;
	margin-bottom:0.25rem;
}
.invalid::placeholder {
  color: #ff6cc1;
  opacity:1;
}
label.invalid {
	color: #ff6cc1;
	margin-bottom:0.5rem;
}
label.checkfield {
	padding-bottom:1rem;
	cursor:pointer;
}
label.radiofield {
	padding-bottom:0.25rem;
	cursor:pointer;
}
input[type=checkbox], input[type=radio] {
	display:none;
	margin-bottom:0;
}
input[type=checkbox] + span, input[type=radio] + span {
	display:inline-block;
	position:relative;
	padding-left:2rem;
}
input[type=checkbox] + span::before {
	content: "";
    display: inline-block;
	position:absolute;
	left:0;
	top:3px;
	height: 1rem;
    width: 1rem;
    border:1px solid #595A5F;
	border-radius:7px;
}
input[type=radio] + span::before {
	content: "";
    display: inline-block;
	position:absolute;
	left:0;
	top:3px;
	height: 1rem;
    width: 1rem;
    border:1px solid #595A5F;
	border-radius:50%;
}
input[type="checkbox"] + span i, input[type="checkbox"] + span i {
	display:none;
}
input[type="checkbox"]:checked + span i {
	display:inline-block;
	position:absolute;
	top:4px;
	left:1px;
	color:#ff6cc1;
}
input[type=checkbox]:checked + span::before, input[type=radio]:checked + span::before {
    border:1px solid #ff6cc1;
}
input[type=radio]:checked + span::after {
	content: "";
    display: inline-block;
	position:absolute;
	left: 5px;
	top: 8px;
	height: 0.5rem;
    width: 0.5rem;
    background-color: #ff6cc1;
	border-radius:50%;
}
input[type=submit], button[type=submit], button  {
	background-color: #087f7f;
	border-color:#087f7f;
	color:#fff;
	cursor:pointer;
	padding:5px;
	font-weight:600;
}
input[type=submit]:hover, input[type=submit]:focus, button[type=submit]:hover, button[type=submit]:focus {
	background-color:#595A5F;
	border-color:#595A5F;
}
button[type=submit].detail, button[type=submit].return, button[type=submit].edit {
	border: none;
	background: none;
	padding: 0;
	color: #ff6cc1;
	text-align: left;
	margin-bottom:1rem;
	font-weight:normal;
	margin-bottom:0;
}
button[type=submit].detail:hover, button[type=submit].detail:focus, button[type=submit].return:hover, button[type=submit].return:focus, button[type=submit].edit:hover, button[type=submit].edit:focus {
	background: none;
	color: #8797B7;
}
input[type=submit].inactive {
	background-color:#D1D8EF;
	color:#595A5F;
	border-color:#D1D8EF;
	cursor: not-allowed;
}
textarea.full_width {
	max-width:100%;
}
fieldset {
	border:none;
}
fieldset.finish {
	text-align:right;
}


/* Filter */

.filterbox input, .filterbox select {
	margin-bottom:1rem;
}
input.filtering, select.filtering {
	border-color: #ff6cc1;
	color: #ff6cc1;
}
.filterbutton {
	background-color: #8797B7;
	color: #fff;
	cursor: pointer;
	padding: 6px;
	font-weight: 600;
	border:none;
}
.filterbutton:hover, .filterbutton[type="submit"]:focus {
    background-color: #595A5F;
    border-color: #595A5F;
}
.filter_reset {
	width:100%;
}


/* Admin */

.open_pop {
	display:block;
	cursor:pointer;
	margin-bottom: 1rem;
}
.admin_popup {
	position:absolute;
	z-index:5;
	background-color:#8797B7;
	color:#fff;
	top:-2.5vw;
	left:33%;
	width:33%;
	padding:0.5rem 1rem;
	height:100%;
	min-height:300px;
	box-sizing:border-box;
	overflow-y:scroll;
	display:none;
	border-radius:7px;
}
.admin_popup.heads {
	left:auto;
	right:0;
}
.admin_popup.shown {
	display:block;
}
.popup_close {
  color: white;
  position: absolute;
  top: 10px;
  right: 1rem;
  font-size: 35px;
  font-weight: 600;
  cursor:pointer;
}
.admin_popup .filterbox {
	margin-bottom: 2.25rem;
}
.admin_popup .filterbutton:not(:hover) {
	background-color: #D1D8EF;
	color:#595A5F;
}
.admin_popup .filterbutton {
	margin-bottom: 0;
}
.admin_popup .filter_reset {
	max-width:none;
}
.country_entry {
	padding:0.5rem 0 0.5rem 0.5rem;
}
.country_entry span {
	padding-top:5px;
}
.country_entry form {
	text-align:right;
}
.country_entry input[type="submit"] {
	margin-bottom:0;
}
.country_entry:nth-child(even) {
	background-color:#EBEAF1;
}

/* Footer */

footer {
	width:100%;
	height:50px;
}
footer p {
	line-height:50px;
	margin-bottom:0;
}
.top {
	position:fixed;
	bottom:2rem;
	right:2rem;
	cursor:pointer;
}
.top[data-title]:hover::after {
  left: auto;
  right:0;
}

@media screen and (min-width: 400px) {
	
}

@media screen and (min-width: 760px) {
	.flex_col2, .flex_col21, .flex_col3, .flex_col31, .flex_col4, .flex_col5, .flex_col6 {
		width: calc(50% - 3rem);
	}
}

@media screen and (min-width: 980px) {
	.flex_col21 {
		width: calc(66.6% - 3rem);
	}
	.flex_col3, .flex_col5, .flex_col6 {
		width: calc(33.3% - 3rem);
	}
	.flex_col31 {
		width: calc(75% - 3rem);
	}
	.flex_col4 {
		width: calc(25% - 3rem);
	}
}
@media screen and (min-width: 1180px) {
	.flex_col5 {
		width: calc(20% - 3rem);
	}
	.flex_col6 {
		width: calc(16.6% - 3rem);
	}
}