.fc { display: flex; flex-direction: column; }
.fr { display: flex; flex-direction: row; }
.fcr { display: flex; flex-direction: column-reverse; }
.frr { display: flex; flex-direction: row-reverse; }
.fctr { align-items: center; justify-content: center; }
.flex-break { flex-basis: 100%; height: 0; }

.hidden { opacity: 0; display: none !important; }
.invisible { visibility: hidden !important; }
.collapsible { transition: max-height 0.4s; }
.collapsed { max-height: 0px !important; overflow: hidden; }
.transparent { opacity: 0; }
.translucent { opacity: 0.35; }
.fade-in { opacity: 1 !important; transition: opacity 0.3s ease-in; }
.fade-out {	opacity: 0;	transition: opacity 0.3s ease-out; }

.no-margin { margin: 0 !important; }

.blackout-screen {
	position: absolute;	
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #2b2b2bee;
	z-index: 11;
	overflow: hidden;
}

/* Tooltip */
/* Usage:
<div class='tooltip'>
	<i class='fa fa-question-circle tooltip-target'></i> -- Icon or Text user sees
	<div class='tooltip-content dark md content-bottom'> -- Apply variant classes here
		The text / HTML content that appears on hover
	</div>
</div>

*/
.tooltip { position: relative; }
.tooltip .tooltip-target { cursor: help; }
.tooltip .tooltip-content {
	position: absolute; z-index: 50;
	opacity: 0; visibility: hidden;
	transition: all 0.3s ease;
	font-size: 11px !important; 
	font-weight: 300; text-wrap: nowrap;
}
.tooltip:hover .tooltip-content { opacity: 1; visibility: visible; }
.tooltip .tooltip-content.content-top { bottom: calc(100% + 5px); left: 0; }
.tooltip .tooltip-content.content-bottom { top: calc(100% + 5px); left: 0; }
.tooltip .tooltip-content.content-right { left: calc(100% + 10px); top: calc(-50% + 5px); }
.tooltip .tooltip-content.content-left { right: calc(100% + 10px); top: calc(-50% + 5px); }

.tooltip .tooltip-content.light::after { border-color: #fff transparent transparent transparent; }
.tooltip .tooltip-content.dark::after { border-color: #555 transparent transparent transparent; }

.tooltip .tooltip-content.content-top::after { transform: rotate(0deg); bottom: -12.5px; left: 5px; }
.tooltip .tooltip-content.content-bottom::after { transform: rotate(180deg); top: -12.5px; left: 5px; }
.tooltip .tooltip-content.content-right::after { transform: rotate(90deg); top: calc(50% - 10px); left: -12.5px; }
.tooltip .tooltip-content.content-left::after { transform: rotate(270deg); top: calc(50% - 10px); right: -12.5px; }

.tooltip-content.light { background-color: #fff; color: black; }
.tooltip-content.dark { background-color: #555; color: white; }
.tooltip-content.sm { padding: 0.25em 0.5em; border-radius: 3px; }
.tooltip-content.md { padding: 0.5em 1em; border-radius: 5px; }
.tooltip-content.lg { padding: 0.75em 1.5em; border-radius: 8px; }