/* Global Buttons */
/* ############## */

/* Action Buttons */

button.action-button:focus {
	margin: 0;
	outline: none;
}

button.action-button,
a.action-button {
	font-size: 1em;
	border: 3px solid var(--brandPrimaryColor);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border-radius: 2em;
	background-color: var(--brandPrimaryColor);
	text-decoration: none;
	color: var(--lightOnDarkTextColor);
	font-weight: bold;
	padding: 1em 2em 1em 2em;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s;
}
	button.action-button:hover,
	a.action-button:hover {
		border-color: var(--brandPrimaryColorLightest) !important;
		background-color: var(--brandPrimaryColorLighter);
		transform: scale(1.075, 1.075);
	}

	button.action-button:active,
	a.action-button:active {
		border-color: var(--brandPrimaryColorDarkest) !important;
		background-color: var(--brandPrimaryColorDarker);
		box-shadow: none;
	}

button.thin-button,
a.thin-button {
	padding: 0.4em 1em 0.4em 1em !important;
}

button.ultra-thin-button,
a.ultra-thin-button {
	padding: 0.25em 0.5em 0.25em 0.5em !important;
}

button.action-button.secondary,
a.action-button.secondary {
	border: 3px solid var(--brandPrimaryColor);
	color: var(--darkOnLightTextColor);
	background-color: white;
}

	button.action-button.secondary:hover
	a.action-button.secondary:hover {
		border-color: var(--brandPrimaryColorLighter) !important;
	}

	button.action-button.secondary:active,
	a.action-button.secondary:active {
		border-color: var(--brandPrimaryColorDarker) !important;
	}

div.action-dropdown-wrapper {

}

	div.action-dropdown-wrapper:after {
		background-size: 11px 7px;
		display: inline-block;
		position: relative;
		width: 11px;
		height: 8px;
		content: "";
		right: 2.5em;
		top: 0.15em;
		background-image: url('/img/select-arrow-white.png');
		pointer-events: none;
		background-repeat: no-repeat;
		transition: all 0.3s;
	}

	div.action-dropdown-wrapper:hover:after {
		
		right: 2em;
	}

	div .action-dropdown-wrapper select.action-dropdown {
		width: 20em;
		border: 0px;
		outline: none;
		background-color: var(--brandPrimaryColor);
		color: var(--lightOnDarkTextColor);
		-webkit-appearance: none;
		padding-left: 1em;
		cursor: pointer;
		z-index: 1;
		font-weight: bold;
		height: 100%;
		border-radius: 2em;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
	}

		div.action-dropdown-wrapper select.action-dropdown:hover {
			border-color: var(--brandPrimaryColorLightest) !important;
			background-color: var(--brandPrimaryColorLighter);
			transform: scale(1.075, 1.075);
		}


/* Floating Buttons Types */
a.floating-button {
	background-color: white;
	padding: 1em;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

	a.floating-button.small {
		width: 0.5em;
		height: 0.5em;
	}
	a.back-button.small {
		background-size: 17px 17px;
	}

a.close-button {
	background-image: url("../../img/close.png");
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}

a.back-button {
	background-image: url("../../img/back.png");
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}

a.forward-button {
	background-image: url("../../img/forward.png");
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}

a.listen-button {
	background-image: url("../../img/listen.png");
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
}