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

/* 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;
}

/* 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; }    
}

/* Change default tooltip (title) attribute */
[aria-label] {
	position: relative;
}

[aria-label]:after {
	content: attr(aria-label);
	display: none;
	position: absolute;
	top: 140%;
	left: -50%;
	z-index: 99999 !important;
	pointer-events: none;
	padding: 8px 8px 5px 8px;
	line-height: 10px;
	letter-spacing:1px;
	white-space: nowrap;
	text-decoration: none;
	text-indent: 0;
	overflow: visible;
	font-size: 13px;
	font-weight: 200;
	color: #444;
	font-family: inkfree;	
	background: #ffa;
}

[aria-label]:hover:after, [aria-label]:focus:after {
	display: block;
}

/*Dummy input field, to go if search has been performed*/
.dummy-in {
	width:0px;
	height:0px;
	background:#dddddd;
	border:none;
	outline: none;
}

.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; }

/* Facebook */
.fa-facebook {
	background: #3B5998;
	color: white;
	margin:10px 30px 0px 0px;
	font-size: 35px;
	width:35px;
}
/* Twitter */
.fa-twitter {
	background: #55ACEE;
	color: white;
	margin:10px 30px 0px 0px;
	font-size: 35px;
	width:35px;
}
/* Youtube */
.fa-youtube {
	background: red;
	color: white;	  
	font-size: 35px;
	margin:10px 30px 0px 0px;
	width:35px;
}

.fa-search, .fa-database {
	background:#777;		
	padding:2px 5px 2px 5px;
	color:white !important;
}
.fa-search:hover, .fa-database:hover {
	background:#777;		
	padding:2px 5px 2px 5px;
	color:white !important;
}

.login-popup {
	display:none;
	width:400px;				
	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;
}

/* Popup post selection list if a key has been entered in the search input field */
#search_popup_top {		
	width:370px;
	height:auto;
	margin:30px 0 0 0;
	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;
	}
	
}