﻿.support-box {
	position: fixed;
	background-color: var(--primary-base);
	margin: 20px 20px;
	left: 0;
	bottom: 0;
	width: 50px;
	height: 40px;
	z-index: 999980;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	box-sizing: border-box;
	font-weight: bold;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
	border-radius: 30px;
}

@media only screen and (min-width: 768px) {
	.support-box {
		width: 130px;
	}
}

.support-box div {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.support-box:hover {
	cursor: pointer;
}

.support-box-content {
	display: none;
	position: fixed;
	margin: 20px 20px;
	left: 0;
	bottom: 0px;
	width: 250px;
	z-index: 999990;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	box-sizing: border-box;
	font-weight: bold;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
}
	.support-box-content .header {
		padding: 10px 10px;
		background-color: var(--primary-base);
		border-radius: 10px 10px 0 0;
		border-top: 1px solid #a0a0a0;
		box-shadow: 0 0 5px -1px rgba(0,0,0,0.75);
	}

	.support-box-content .content {
		color: #333333;
		text-align: left;
		padding: 20px 20px;
		background-color: #ffffff;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 0 5px -1px rgba(0,0,0,0.75);
	}

	.support-box-content .buttons {
		display: flex;
		justify-content:space-between;
	}

	.support-box-content button {
		border-radius: 5px;
		border: 1px solid var(--primary-base);
		background-color: #FFFFFF;
		padding: 7px 0;
		width: 90px;
		text-align: center;
		color: var(--primary-base);
	}

	.support-box-content a:visited, .support-box-content a:link {
		color: var(--primary-base);
	}

	.support-box-content button:hover {
		background-color: var(--primary-light);
		color: #FFFFFF;
	}

.support-box .org-id {
	color: black;
	background-color: white; 
	margin-top: 0.5rem;
	opacity: 0.6;
	border-radius: 100px;
	padding: 0px;
	font-weight: bold;
}

	.support-box .org-id .org-lbl {
		font-weight: normal;
		display: none;
	}

@media only screen and (min-width: 768px) {
	.support-box .org-id .org-lbl {
		display: inline;
	}
}


.support-box .org-id:hover {
	opacity: 1;
}

.fresh-holder {
	position: fixed;
	bottom: 0.5rem;
	right: 2rem;
	background-color: var(--alist-even);
	border-radius: 20px;
	padding: 4px 10px;
	text-align: center;
}

/* Support links */
.link-container {
	position:relative;
	float: right;
	margin-right: 0.2em;
}

.support-link {
	display: inline;
	cursor: pointer;
	border-radius: 50%;
	color: var(--primary-base);
	border: 0.2rem solid var(--primary-dark);
	background-color: white;
	padding: 0.2rem 0.4rem;
	transition: all .2s ease-in-out;
}

.support-link:after {
	content: "\f518";
	font-family: 'Font Awesome 5 Free';
	font-weight: 700;
}

	.support-link.missing:before {
		position: absolute;
		right: 0.5rem;
		top: 0.5rem;
		content: "!";
		font-weight: 700;
		color: red;
		text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}

	.support-link.warning:before {
		position: absolute;
		right: 0.7rem;
		bottom: 0.2rem;
		font-size:small;
		font-family: 'Font Awesome 5 Free';
		content: "\f071";
		font-weight: 700;
		color: red;
		text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}

	.support-link:hover {
		margin: -0.15rem;
		text-decoration: none;
		background-color: var(--alist-evenh);
		padding: 0.35rem 0.55rem;
		box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 25%);
	}