/* Global css variables */
:root {
	--default-text-color:#3B5E69;
	--menu-text-color:white;
	--default-background-color:#F5FAFD;
}

html {
		scroll-behavior:smooth;
}
body {
	background-color:var(--default-background-color);
	margin:0 auto;		
	background-repeat:no-repeat;
	background-position:center top;				
	z-index:-1;	
}	

/* General manipulation buttons and other */
.usr-btn {		
	font-size:12px;
	font-weight:bold;
	text-transform: uppercase;
	padding:12px 25px 3px 25px;
	letter-spacing:1px;
	max-width:200px;
	color:white;	
	border:none;
	border-bottom:6px solid #cc7;	
	border-radius:4px;	
	background: linear-gradient(#fff, #552, #997);
}

.usr-btn:hover {	
	cursor:pointer;
	background: linear-gradient(#ffa, #763, #997);
}
.usr-btn:focus {background-color:#888;}

.usr-btn .fa-upload {
	color:white;
}

/* Dummy input field, to go to if search has been performed (a js focus() */
.dummy-in {
	width:0px;
	height:0px;
	color:transparent;
	background:transparent;
	border:none;
	outline: none;
}

/* Entry errors in forms */
.e-msg {
	height:10px;
	color:red !important;
	font-size:14px;
	padding-left:150px;
	margin:-10px 0 0 0;
	animation-name: animation_blink;
	animation-timing-function: ease-in;
	animation-duration: 4s; 
	animation-iteration-count: infinite;
}
@keyframes animation_blink {
	0% { opacity: 1; }
	80% { opacity: 0; }
	100% { opacity: 1; }    
}

.div-onclick {
	cursor:pointer;
	color:#2499B2;
}
.div-onclick:hover { color:#ccc; }

/* Go to top arrow in all pages */
.go-top {
	position:fixed;
	bottom:34.5px;
	right:49.5px;
	z-index:1100;
}
.go-top-circle {
	display:none;
	width:48px;		
	animation-name:go-top;
	animation-duration:5s;	
}	
@keyframes go-top {
	from {opacity: 0;}
	to {opacity:1;}
}

/* Top header settings */
.top-header {
	display:flex;
	position:relative;
	justify-content:center;
	align-items:center;
	height:32px;
	background:#ddd;
}
.top-header img {
	height:18px;
	margin-bottom:-3px;
}

.h-log {
	font-family:main-font;	
	font-size:16px;
	color:var(--default-text-color);
	cursor:pointer;
	letter-spacing:1.2px;
}

.h-link {		
	font-family:main-font;	
	font-size:15px;
	color:var(--default-text-color);
}
.h-link:hover, .h-log:hover { color:green; }

.cpt-social img {			
	height:40px;
	padding:15px 20px 2px 0px;
	transition:.8s;
}
.cpt-social img:hover {			
	transform:scale(1.2);
	transition:.8s;	
}

.login-popup {
	display:none;
	width:400px;				
	overflow:hidden;
	background: linear-gradient(90deg, #ffc, #dd9, #ffc 100%);
	border-radius:8px;
	padding:0 14px 14px 20px;
	position:absolute;
	top:35px;
	right:200px;
	z-index:8000;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	animation-name:popup-inner;
	animation-duration: 1s;
}

.login-container {
	display:none;
	
}
@keyframes popup-inner {
	from {transform: scale(0);}
	to {transform: scale(1);}
}	

.guid-popup {
	display:none;
	text-align:center;
	position:fixed;
	top:150px;left:30%;
	width:40%;
	height:70vh;		
	padding:20px;
	background-image: linear-gradient(#ffffdd, #fff);
	z-index:5000;
	opacity:1;
	border-radius:20px;
	box-shadow: 7px 7px 15px #444;
	animation-name:guid-pop;
	animation-duration: 3s;
}

@keyframes guid-pop {
	from {transform: scale(0);}
	to {transform: scale(1);}
}

/* Input field for search actions on top header and right side bar in posts pages (Lieder, single-post, search-list) */
.search-container {
	position:sticky;
	top:0;
	background:#eee;
	height:30px;
	background:transparent !important;
	z-index:1;
}	
.search-inner {
	display:flex;
	justify-content:space-between;
	align-items:center;
}	
.search-input-field {
	border:none;
	width:180px;	
}
.search-input-field:focus {
	outline: none;
}

/* Bubble for breadcrump display */
.m-bubble {
	position:fixed;
	left:15px;
	top:20px;
	z-index:20000;
}

/* Breadcrump bubble */
#bubble div {
	margin:-35px 0 0 5px;
	width:200px;
	height:62px;
	transform:scale(0);
	-webkit-transform:scale(0);
	transition:opacity 2s,transform 3s;
	-webkit-transition:opacity 2s, transform 3s;
	transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
	opacity:0;
	background:#fff;
	border:1px solid #999;
	border-radius:25px;
	color:black;
	z-index:20000;
	text-align:center;
	padding:4px 3px 4px 3px;
}	

#bubble svg circle {
	opacity:0;		
}

#bubble svg #c1 {
	transition:opacity 1s;
	-webkit-transition:opacity 1s;
}

#bubble svg #c2 {
	transition:opacity 2s;
	-webkit-transition:opacity 2s;
}

#bubble svg #c3 {
	transition:opacity 3s;
	-webkit-transition:opacity 3s;
}

/* Style the breadcrumb content */
ul.main-breadcrumb {
	display:inline-block;
	list-style:none;
	background:transparent;
	padding:0;
	margin:-7px 0 0 0;
}	

ul.main-breadcrumb li {
	display:inline;
	font-size:15px;
	font-family:inkfree;
	line-height:2px;
}	
ul.main-breadcrumb li+li:before {
	padding:3px;
	color:#3B5E69;
	content: "» ";
}	
ul.main-breadcrumb li a {
	color:green;
	text-decoration: none;
}
ul.main-breadcrumb li a:hover {
	color:gold;
	text-decoration:underline;
}

/* Animate text */
.linear-wipe {
	background: linear-gradient(to right, black 20%, #e09f00 40%, red 60%, black 80%);
	background-size: 200% auto;
	color: #000;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine 7s linear infinite;
}
@keyframes shine {
	to {
	  background-position: 200% center;
	}
}

/* Popup post selection list if a key has been entered in the search input field */
#search_popup_top {		
	width:370px;
	height:auto;
	margin:827px 0 0 50vw;
	position:absolute;
	background:white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius:7px;
	display:none;
	z-index:1500;
}

#search_popup_post {	
	width:370px;
	height:800px;	
	position:absolute;
	background:white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius:7px;
	display:none;
	z-index:1000;
}

#resp_search_list {
	display:none;
}

.search-list {
	width:345px;
	overflow-y:scroll;
	padding:8px;
	height:730px;
	justify-content:center;
}
.search-list div {
	display:flex;
	position:relative;
}
.search-list img {
	height:20px;
}
.search-list a {
	font-size:15px;
}
.search-list a:hover {
	color:#aaa;	
}
.search-list-info {
	padding:8px;
	font-size:13px;
	border-bottom:1px solid black;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.button-init-src {	
	background:#ddb640;
	cursor:pointer;
  	border-radius:90px;  	
	width:25px;
  	height:25px;  
	float:right;
	margin-left:8px;
}
.button-init-src:hover {
	background:#ccc;
}

#rot_marker_src_top, #rot_marker_src_side {
	color:white;
	font-size:20px;
	font-weight:bold;	
	margin:-2px 0px 0px 7px;
}

.slide-btn-inner {	
	display:none;
	background:#eee;	
	margin-left:8px;
	border-radius:90px;
  	width:25px;
 	height:25px;  	
 	float:left;
	cursor:pointer;
}
.slide-btn-inner div {
	color:#red;
	font-size:12px;
	margin:4px 0px 0px 6.5px;
}

.slide-btn-inner:hover {background:#ddd;}


@media screen and (max-width: 680px) {
	.usr-btn {		
		font-size:10px;
		padding:5px 14px 5px 14px;
		margin-bottom:5px;	 
	}
	
	.top-header {
		display:none;			/* Remove top header bar for mobile */
	}	
	
	.go-top {
		display:none;
	}
	
	.guid-popup {
		left:6px;
		top:45px;
		width:92%;
		height:530px;
		padding:6px;
		overflow-y:scroll;
	}
	
	.m-bubble {
		display:none;
	}

	#resp_search_list {		
		width:125%;
		height:80vh;		
		background:white;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		border-radius:7px;
		display:none;
		z-index:1000;
		overflow:hidden;
	}
	#search_popup_top {
		display:none;
	}

	#search_popup_post {	
		width:330px;
		height:800px;	
		
	}
	
	.search-list {				
		width:330px !important;
		margin-left:15px;
		overflow-x:hidden;
		height:460px;		
	}
	.search-list-info {
		margin:0;
		padding-top:5px;
		height:30px;
		color:black !important;
	}
	
	.responsive .search-list {
		display:block;		
		width:330px !important;
		margin-left:15px;
		overflow-x:hidden;
		height:460px;		
	}

	.responsive .search-list div {		
		text-align:left;
	}
	
	.responsive .search-list a {		
		font-size:14px !important;
		color:#2499B2;
		margin:5px 0px 0px 0px;
	}
	.responsive .search-list a:hover {
		color:#aaa;	
	}
	
	.responsive .search-list img {
		width:14px;
	}
	
	.responsive .search-list-info {
		margin:0;
		padding-top:5px;
		height:30px;
		color:black !important;
	}
	
	.responsive #rot_marker_src_side {
		margin:-13px 0px 0px 3px;
		color:white;
		font-size:40px;
		height:30px;
	}
	
	.responsive.button-init-src {
		display:none;
	}
	
	.responsive .shrink-btn-container-src {
		margin-top:0px;
		padding:0;
		float:left;
	}
	.responsive .slide1-src {			
		margin: 4px 5px 0px 4px;
		padding:4px;
		width: 25px;
		height: 17px;
		
	}
	.responsive .slide-btn-pos-src {
		color:#dbc54c;
		padding:5px 0px 0px 5px;
	}
	
}