:root {
	--default-font: neue-haas-grotesk-display, "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system, "Roboto",sans-serif !important;
	--primary-color: rgba(239, 91, 51, 1);
	--secondary-color: rgba(21, 112, 143, 1); /* https://color.adobe.com/create/color-wheel Split Contplementary rule with primary color as logo orange */
	--side-nav-link-color: rgba(80, 80, 80, 1);
	--side-nav-link-icon-color: rgba(100, 100, 100, 1);
	--side-nav-link-active-color: rgba(40, 40, 40, 1);
	--action-btns-primary-rgb: rgb(21, 112, 143);
	--side-nav-collapsed-width: 55px;
	--side-nav-open-width: 240px;
	--header-bar-height: 66px;
	--packages-grid-border: 1px solid rgba(1, 1, 1, 0.05);
}

body {
	font-family: var(--default-font);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.1rem;
	font-size: 0.875rem;
}

.header-bar {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 30px 150px 230px;
	grid-template-areas: "logo bell sport user";
}

.header-bar .logo {
	grid-area: logo;
	position: relative;
}
	.header-bar .bell {
		grid-area: bell;
		justify-self: end;
		align-self: center;
	}
	.header-bar .sport {
		grid-area: sport;
		align-self: center;
	}
	.header-bar .user {
		grid-area: user;
		justify-self: end;
		align-self: center;
	}

@media all and (min-width: 615px) {
	body.private {
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-template-areas: 'head head' 'nav main';
		grid-template-rows: var(--header-bar-height) 1fr;
		width: 100%;
		height: 100vh;
	}
		body.private:not(.collapsed-side-nav) .side-nav {
			width: var(--side-nav-open-width);
		}
		body.private.collapsed-side-nav .side-nav {
			width: var(--side-nav-collapsed-width);
		}

	.header-bar {
		grid-template-columns: 1fr 30px 150px 230px;
	}
}
@media all and (max-width: 615px) {
	body.private {
		display: grid;
		grid-template: "head" var(--header-bar-height) "main" 1fr /* full height of remainder of page*/
		/ 1fr; /* column widths */
		width: 100%;
		height: 100vh;
	}

	.header-bar {
		grid-template-columns: 1fr 40px 50px 40px;
	}

	span.sport-code-name {
		display: none;
	}
	span.header-user-name {
		display: none;
	}
}

span.header-user-avatar svg {
	width: 24px;
	fill: rgba(1, 1, 1, 0.5);
}

body.private header {
	grid-area: head;
}
body.private main {
	position: relative;
	grid-area: main;
}
body.private .side-nav {
	grid-area: nav;
	transition: 0.2s;
}

input, select, textarea {
	letter-spacing: 0.1rem;
}


h1 {
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4em;
	margin-bottom: 1rem;
	margin-top: 2rem;
}

	h1.tag-line {
		margin: 0 auto;
		padding-top: 2rem;
		padding-bottom: 3rem;
		font-weight: 500;
	}

iframe.ng-app-frame {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.card .card-header h5,
.card .card-header h6 {
	margin: 0;
}

.drill-info h6.archived {
	text-decoration: line-through;
}
.drill-info h6.competency {
	font-weight: 700;
}

button.hamburger-btn {
	border: 0;
	width: 40px;
	margin-left: -8px;
	margin-right: 20px;
	background-color: rgba(255, 255, 255, 0);
}
	button.hamburger-btn:focus {
		outline: none;
	}

@media all and (max-width: 615px) {

	body.expand-mobile-side-nav button.hamburger-btn {
		left: 14px;
		top: 16px;
	}

	body.expand-mobile-side-nav a.navbar-brand {
		left: 69px;
		top: 1px;
	}

	body.expand-mobile-side-nav button.hamburger-btn,
	body.expand-mobile-side-nav a.navbar-brand {
		position: fixed;
		z-index: 1000;
	}
}

.navbar {
	padding-top: 0 !important;
	padding-bottom: 5px !important;
	height: var(--header-bar-height);
}

a.navbar-brand {
	white-space: normal;
	text-align: center;
	word-break: break-all;
}

	a.navbar-brand img {
		height: 50px;
	}
/* Sufficient contrast against white background
--------------------------------------------------------------- */
a {
	color: var(--secondary-color);
}

code {
	color: #e01a76;
}

.btn-primary {
	color: #fff;
	background-color: #1b6ec2;
	border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: #fff;
	background-color: #1b6ec2;
	border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
	font-size: 14px;
	position: relative;
	min-height: 100%;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

.container {
	max-width: 960px;
}

.pricing-header {
	max-width: 700px;
}

.border-top {
	border-top: 1px solid #e5e5e5;
}

.border-bottom {
	border-bottom: 1px solid #efefef !important;
}

.box-shadow {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
	font-size: 1rem;
	line-height: inherit;
}

body.public {
	/* Margin bottom by footer height */
	margin-bottom: 60px;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	overflow: auto;
	white-space: nowrap;
	line-height: 60px; /* Vertically center the text there */
	background-color: #fff;
}

/* Loader animation
------------------------------------- */

.loader-large {
	border: 16px solid #f4f4f4;
	border-top: 16px solid #5D774D;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation-direction: reverse;
	animation-duration: 1s;
	animation-name: spin-loader;
	animation-iteration-count: infinite;
}

.loader-medium {
	position: relative;
	border: 7px solid rgb(29, 29, 27);
	border-top: 7px solid rgb(232, 78, 27);
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation-direction: reverse;
	animation-duration: 1s;
	animation-name: spin-loader;
	animation-iteration-count: infinite;
	margin: 0 auto;
}

	.loader-medium::after {
		content: " ";
		display: block;
		position: absolute;
		top: 8px;
		left: 8px;
		border: 3px solid rgb(29, 29, 27);
		border-top: 3px solid rgb(232, 78, 27);
		border-radius: 50%;
		width: 30px;
		height: 30px;
		animation-direction: reverse;
		animation-duration: 4s;
		animation-name: spin-inside-loader;
		animation-iteration-count: infinite;
	}

.loader-small {
	position: relative;
	border: 3px solid rgb(255, 255, 255);
	border-top: 3px solid rgba(232, 78, 27, 1);
	border-radius: 50%;
	background-color: rgba(1, 1, 1, 0.5);
	width: 30px;
	height: 30px;
	animation-direction: reverse;
	animation-duration: 1s;
	animation-name: spin-loader;
	animation-iteration-count: infinite;
	margin: 0 auto;
}

	.loader-small::after {
		content: " ";
		display: block;
		position: absolute;
		top: 5px;
		left: 5px;
		border: 3px solid rgba(232, 78, 27, 1);
		border-top: 3px solid rgb(255, 255, 255);
		border-radius: 50%;
		width: 14px;
		height: 14px;
		animation-direction: reverse;
		animation-duration: 4s;
		animation-name: spin-inside-loader;
		animation-iteration-count: infinite;
	}
.loader-small.on-white {
	border-color: rgb(232, 78, 27);
	border-top-color: rgb(255, 255, 255);
	background-color: rgb(255, 255, 255);
}
	.loader-small.on-white::after {
		border-color: rgb(1, 1, 1);
		border-top-color: rgb(255, 255, 255);
		background-color: rgb(255, 255, 255);
	}

@keyframes spin-loader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin-inside-loader {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(90deg);
	}

	50% {
		transform: rotate(180deg);
	}

	75% {
		transform: rotate(270deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Custom navigation */
/*.nav-link.whats-your-game {
	margin-top: -6px;
	margin-right: 20px;
}
*/
	.nav-link.whats-your-game img {
		width: 36px;
	}

	.navbar-nav li.notifications {
		margin-top: 7px;
		margin-right: 20px;
		position: relative;
	}
		.navbar-nav li.notifications:not(.has-notifications) a {
			cursor: default;
		}
		.navbar-nav li.notifications:not(.has-notifications) .counter {
			display: none;
		}
		.navbar-nav li.notifications.has-notifications .counter {
			position: absolute;
			display: block;
			text-align: center;
			letter-spacing: 0.05rem;
			font-size: 0.6rem;
			top: 4px;
			right: -5px;
			width: 15px;
			height: 15px;
			border-radius: 7px;
			background-color: var(--primary-color);
			color: #fff;
		}
		.navbar-nav li.notifications svg {
			width: 26px;
			stroke: rgba(1, 1, 1, 0.5);
			/*stroke-width: 2;*/
			fill: #fff;
		}
		.navbar-nav li.notifications.has-notifications svg {
			stroke: var(--primary-color);
		}

		h6.icon-dark svg,
		a.icon-dark svg,
		a.icon-light svg {
			margin-bottom: 0.3rem;
			margin-right: 0.2rem;
		}

.notifications-popup {
	display: block;
	position: fixed;
	min-height: 30px;
	width: 380px;
	right: 10px;
	top: 40px;
	z-index: 201;
	overflow-y: auto;
}
	.notifications-popup .n-item {
		padding: 10px;
		margin: 3px;
		background-color: #fff;
		box-shadow: 1px 1px 3px #aaaaaa;
	}
		.notifications-popup .n-item:hover {
			background-color: #e4e4e4;
		}
		.notifications-popup .n-item .actions {
			margin: 10px 0;
			text-align: right;
		}
		.notifications-popup .n-item button {
			/*padding: 100;*/
			min-width: 30px;
			margin-left: 3px;
		}

a.icon-dark:hover svg,
a.icon-light:hover svg {
	transform: translate(-30%, 0);
}

a.icon-dark,
a.icon-dark svg,
a.icon-light,
a.icon-light svg {
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

h6.icon-dark,
a.icon-dark {
	color: #666666;
	text-decoration: none;
}

	a.icon-dark:hover {
		color: #333333;
	}

	svg.icon-dark,
	h6.icon-dark svg,
	a.icon-dark svg {
		fill: #666666;
	}

		svg.icon-dark.interact:hover,
		a.icon-dark:hover svg {
			fill: #333333;
			cursor: pointer;
		}

a.icon-light {
	color: #f4f4f4;
	text-decoration: none;
}

	a.icon-light:hover {
		color: #ffffff;
	}

	svg.icon-light,
	a.icon-light svg {
		fill: #f4f4f4;
	}

		svg.icon-light.interact:hover,
		a.icon-light:hover svg {
			fill: #ffffff;
			cursor: pointer;
		}

svg.alert {
	fill: rgb(200, 10, 10);
}

svg.icon-xsmall {
	width: 12px;
	height: 12px;
}

svg.icon-small {
	width: 16px;
	height: 16px;
}

svg.icon-medium {
	width: 20px;
	height: 20px;
}

svg.icon-large {
	width: 24px;
	height: 24px;
}

svg.icon-xlarge {
	width: 28px;
	height: 28px;
}

svg.icon-xxlarge {
	width: 32px;
	height: 32px;
}

/*.choose-report-form .btn {
	margin-top: 10px;
	width: 100%;
	text-align: center;
}*/

main.public {
	padding-top: var(--header-bar-height);
}

.side-nav {
	overflow-x: hidden;
	background-color: #f1f1f1;
}
	.side-nav ul li a {
		display: block;
		position: relative;
		transition: 0.2s;
	}
		.side-nav ul li a > span {
			display: block;
			position: absolute;
			overflow: hidden;
			max-height: 50px;
			top: 0;
			left: 50px;
			transition: 0.2s;
		}
	.side-nav > ul > li > ul a > span {
		left: 65px;
	}
	.side-nav .menu-footer {
		padding: 15px;
		font-size: 0.8rem;
		color: #999999;
	}

		.side-nav .menu-footer > span {
			display: block;
			margin-bottom: 20px;
		}

@media all and (min-width: 615px) {
	body.collapsed-side-nav .side-nav ul li a > span {
		/*width: 0;*/
		color: rgba(1, 1, 1, 0);
	}

	body.private.collapsed-side-nav main {
		/*left: var(--side-nav-collapsed-width);*/
	}

	body.collapsed-side-nav .side-nav .menu-footer > span {
		writing-mode: vertical-rl;
		text-orientation: sideways-right;
	}

	body.collapsed-side-nav .side-nav > ul > li > ul a {
		padding-left: 15px;
	}
}

@media all and (max-width: 615px) {
	.side-nav {
		position: fixed;
		left: -250px;
		top: 0;
		bottom: 0;
		width: var(--side-nav-open-width);
		box-shadow: 2px -1px 2px rgba(1, 1, 1, 0.2);
		z-index: 999;
		padding-top: var(--header-bar-height);
		/*width: var(--side-nav-collapsed-width);*/
	}

	body.expand-mobile-side-nav .side-nav {
		/*display: block;*/
		left: 0px;
	}

	.side-nav li a > span {
		display: none;
	}

	body.expand-mobile-side-nav .side-nav li a > span {
		display: initial;
	}

	body:not(.expand-mobile-side-nav) .side-nav .menu-footer > span {
		writing-mode: vertical-rl;
		text-orientation: sideways-right;
	}

	body.expand-mobile-side-nav .side-nav > ul > li > ul a {
		padding-left: 30px;
	}

	body:not(.expand-mobile-side-nav) .side-nav > ul > li > ul a {
		padding-left: 15px;
	}

	body.expand-mobile-side-nav.collapsed-side-nav .side-nav .menu-footer > span {
		writing-mode: horizontal-tb;
	}

	body.private main {
		/*left: var(--side-nav-collapsed-width);*/
	}
}

.side-nav ul {
	list-style: none;
	border-bottom: 1px solid #dddddd;
	padding: 0;
	margin: 0;
}

.side-nav > div {
	padding: 20px;
}

.side-nav li {
}

	.side-nav li a {
		display: block;
		height: 50px;
		line-height: 50px;
		padding: 0 15px;
		text-decoration: none;
		color: var(--side-nav-link-color);
	}

	.side-nav li:hover {
		/*background-color: rgba(90, 90, 90, 0.1);*/
		background-color: rgba(0, 0, 0, 0.05);
	}

/* Sub-menu anchor */
.side-nav > ul > li > ul a {
	padding-left: 30px;
}

.side-nav a > svg {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	margin-top: -3px;
}

	.side-nav a > svg.fill path,
	.side-nav a > svg.fill line,
	.side-nav a > svg.fill polyline,
	.side-nav a > svg.fill text,
	.side-nav a > svg.fill rect {
		stroke: rgba(255, 255, 255, 0);
		fill: var(--side-nav-link-icon-color);
	}

	.side-nav a > svg.line path,
	.side-nav a > svg.line line,
	.side-nav a > svg.line polyline,
	.side-nav a > svg.line text,
	.side-nav a > svg.line rect {
		stroke: var(--side-nav-link-icon-color);
		fill: rgba(255, 255, 255, 0);
	}

.side-nav li.active {
	/*background-color: rgba(0, 0, 0, 0.1);*/
	background-color: rgba(0, 0, 0, 0.05);
}

	.side-nav li.active > a {
		color: var(--side-nav-link-active-color);
		font-weight: bold;
	}

		.side-nav li.active > a > svg.fill path,
		.side-nav li.active > a > svg.fill line,
		.side-nav li.active > a > svg.fill polyline,
		.side-nav li.active > a > svg.fill text,
		.side-nav li.active > a > svg.fill rect {
			fill: var(--primary-color);
			stroke: rgba(0, 0, 0, 0);
		}

		.side-nav li.active > a > svg.line path,
		.side-nav li.active > a > svg.line line,
		.side-nav li.active > a > svg.line polyline,
		.side-nav li.active > a > svg.line text,
		.side-nav li.active > a > svg.line rect {
			stroke: var(--primary-color);
			fill: rgba(0, 0, 0, 0);
		}


/* Sign-up - Package Selection */

.signup-packages .package-benefits-column {
	float: left;
	width: 27%;
}

.signup-packages .package-selection-column {
	float: left;
	width: 18%;
}

.signup-packages .subscription-indicator-row .package-selection-column.current-subscription {
	background-color: var(--primary-color);
	color: #fff;
	text-align: center;
	font-weight: 700;
	padding: 10px 5px;
}

.signup-packages .header .package-selection-column.current-subscription,
.signup-packages .detail .package-selection-column.current-subscription {
	background-color: rgba(1, 1, 1, 0.1);
}

	.signup-packages .header .package-selection-column.current-subscription > div {
		height: 30px;
	}

.signup-packages .detail-header .col > div {
	position: relative;
	text-align: center;
	padding: 10px 0 5px 0;
	font-size: 1rem;
	/*border-left: var(--packages-grid-border);*/
	/*border-right: var(--packages-grid-border);*/
}

.signup-packages .detail-header:not(.first) .col > div {
	border-top: var(--packages-grid-border);
}

.signup-packages .detail .package-benefits-column {
	padding: 20px 15px 20px 20px;
}

.signup-packages .detail .package-selection-column {
	padding: 20px 15px;
}
	.signup-packages .detail .package-selection-column.two-lines {
		padding: 10px 15px;
	}

.signup-packages .detail .package-benefits-column,
.signup-packages .detail .package-selection-column {
	border-left: var(--packages-grid-border);
	border-top: var(--packages-grid-border);
	position: relative;
}

.signup-packages .detail:last-child .package-benefits-column,
.signup-packages .detail:last-child .package-selection-column {
	border-bottom: var(--packages-grid-border);
}

.signup-packages .detail .package-selection-column:last-child {
	border-right: var(--packages-grid-border);
}

.signup-packages .detail .package-selection-column svg {
	height: 20px;
	width: 20px;
}

.signup-packages .detail-header span.info {
	display: inline-block;
	position: relative;
	height: 24px;
	width: 24px;
	background-color: #fff;
	top: -2px;
}

.signup-packages .detail .package-benefits-column span.info {
	display: block;
	position: absolute;
	height: 24px;
	width: 24px;
	left: -12px;
	top: 18px;
	background-color: #fff;
}

	.signup-packages .detail-header span.info span.info-text,
	.signup-packages .detail .package-benefits-column span.info span.info-text {
		display: none;
		position: absolute;
		top: 20px;
		background: rgba(1, 1, 1, 0.9);
		width: 200px;
		color: #fff;
		z-index: 99;
		padding: 10px;
		text-align: left;
	}

.signup-packages .detail-header span.info span.info-text {
	left: -200px;
}

.signup-packages .detail .package-benefits-column span.info span.info-text {
	left: 20px;
}

.signup-packages .detail .package-benefits-column span.info svg.empty path,
.signup-packages .detail-header span.info svg.empty path {
	fill: rgba(1, 1, 1, 0.3);
	transition: all ease 0.2s;
}

.signup-packages .detail .package-benefits-column span.info:hover svg.empty path,
.signup-packages .detail-header span.info:hover svg.empty path {
	fill: rgba(1, 1, 1, 0.9);
}

.signup-packages svg.included path {
	fill: var(--primary-color);
}

.signup-packages svg.not-included path {
	fill: rgba(1, 1, 1, 0.2);
}

.sport-header-images {
	margin-bottom: 20px;
}

	.sport-header-images img {
		width: 85%;
	}

@media all and (max-width: 939px) {
	.signup-packages .package-benefits-column {
		width: 35%;
	}

	.signup-packages .package-selection-column {
		width: 17%;
	}
}

@media all and (max-width: 785px) {
	.signup-packages .package-benefits-column {
		display: none;
	}

	.signup-packages .package-selection-column {
		width: 25%;
	}

	.signup-packages .detail .package-selection-column {
		padding: 5px 0 10px 0;
		border: none;
		text-align: center;
	}

		.signup-packages .detail .package-selection-column:last-child {
			border-right: none;
		}
}

@media all and (min-width: 785px) {
	.signup-packages .detail-header {
		display: none;
	}
}

.signup-packages .header .package-benefits-column,
.signup-packages .header .package-selection-column {
	padding-bottom: 20px;
	padding-top: 10px;
}

.signup-packages .header .package-selection-column {
	padding-left: 5px;
}

.signup-packages .header h4 {
	font-weight: 700;
}

.signup-packages .header span {
	display: block;
	font-size: 1.2rem;
	margin-bottom: 10px;
}

.signup-packages .header a {
	font-size: 1.1rem;
}

@media all and (max-width: 840px) {
	.signup-packages .header a {
		font-size: 1rem;
	}
}

@media all and (max-width: 785px) {
	.signup-packages .header a {
		font-size: 0.9rem;
	}
}

a.delete-file-link {
	display: inline-block;
	width: 18px;
	height: 18px;
}

	a.delete-file-link > svg {
		margin-top: -7px;
	}

		a.delete-file-link > svg path,
		a.delete-file-link > svg line,
		a.delete-file-link > svg polyline,
		a.delete-file-link > svg text,
		a.delete-file-link > svg rect {
			fill: #333333;
		}

a.download-file-link {
	color: #333333;
}




table input[type="date"] {
	height: 36px;
	padding-top: 0;
}

	table input[type="date"].invalid {
		background-color: rgba(200, 0, 0, 0.2);
	}

.pill-tab {
	text-align: center;
	line-height: 20px;
	height: 30px;
	background-color: #f4f4f4;
	color: #444444;
	border-radius: 3px;
	overflow: hidden;
	min-width: 50px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 5px 8px;
	box-shadow: 1px 1px 2px #aaaaaa;
	transition: background-color 0.2s;
	user-select: none;
	z-index: 100;
}
.pill-tab:not(.viewonly):not(.current):hover {
	background-color: #c4c4c4;
}
.pill-tab.current:hover {
	background-color: rgb(66, 66, 66);
}
.pill-tab.with-dropdown {
	border-radius: 3px 0 0 3px;
	margin-right: 0;
}
.pill-tab.dropdown.current {
	border-left: 1px dashed #fff;
}
	.pill-tab.dropdown {
		border-radius: 0 3px 3px 0;
		padding-right: 25px;
		position: relative;
		overflow: visible;
	}
		.pill-tab.dropdown:not(.viewonly)::after {
			content: '';
			display: block;
			width: 16px;
			position: absolute;
			top: 0;
			right: 0;
			height: 30px;
			margin-right: 3px;
			background-color: rgb(1, 1, 1);
			-webkit-mask: url(../icons/glyphicons-basic-chevron-down.svg) no-repeat center center;
			mask: url(../icons/glyphicons-basic-chevron-down.svg) no-repeat center center;
			transition: transform 0.2s;
		}
	.pill-tab.current.dropdown:not(.viewonly)::after {
		background-color: #fff;
	}
	.pill-tab.dropdown.expanded::after {
		transform: rotate(-180deg);
	}
	.pill-tab.dropdown .pill-tab-option:not(.default-option) {
		display: none;
	}
		.pill-tab.dropdown .options {
			position: absolute;
			top: 30px;
			left: 0;
			min-width: 10px;
			min-height: 10px;
			background-color: #fff;
			box-shadow: 1px 1px 2px #aaaaaa;
			color: rgb(68, 68, 68);
		}
		.pill-tab.dropdown .options .pill-tab-option {
			display: block;
			line-height: 20px;
			text-align: left;
			padding: 5px;
			white-space: nowrap;
			z-index: 101;
		}
			.pill-tab.dropdown .options .pill-tab-option:hover {
				background-color: rgb(1, 1, 1);
				color: #fff;
			}
			.pills-tab-tree-node > .pills-tab-tree-node {
				padding-left: 25px;
			}
	.pills-tab-tree-node > .pills-tab-tree-node::before {
		content: "";
		display: block;
		float: left;
		width: 15px;
		height: 15px;
		border-left: 2px solid #d4d4d4;
		border-bottom: 2px solid #d4d4d4;
		border-radius: 0 0 0 4px;
		margin-right: 5px;
	}
	.pills-tab-tree-node {
		display: block;
		clear: both;
	}
.pills-tab-tree-node .pill-tab {
	float: left;
	clear: right;
	max-width: 210px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.pills-tab-tree-node .branch-icon {
	display: none;
}
.pills-tab-bar > .pills-tab-bar {
	display: block;
	clear: both;
}
.pills-tab-bar::after {
	content: '';
	display: table;
	clear: both;
}
.pills-tab-bar .tab-bar-title {
	text-align: center;
	line-height: 20px;
	background-color: #f4f4f4;
	border-left: 5px solid rgb(1, 1, 1);
	color: #444444;
	overflow: hidden;
	float: left;
	min-width: 50px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 5px 8px;
	user-select: none;
}
.pills-tab-bar .pill-tab {
	float: left;
}
.pills-tab-bar .pill-tab.current.viewonly {
	cursor: default;
}
	.pills-tab-bar .pill-tab.current.viewonly:hover {
		background-color: rgb(1, 1, 1);
	}
	.pills-tab-bar .pill-tab:not(.current):not(.viewonly),
	.pills-tab-bar.allow-reselect .pill-tab,
	.pills-tab-tree-node .pill-tab:not(.current):not(.viewonly),
	.pills-tab-tree-node.allow-reselect .pill-tab {
		cursor: pointer;
	}
	.pills-tab-bar .pill-tab:not(.current):hover {
		background-color: #e4e4e4;
	}
	.pill-tab.current {
		background-color: rgb(1, 1, 1);
		color: #fff;
	}
	.pills-tab-bar .pill-tab.current a {
		cursor: default;
	}
	.pills-tab-bar .pill-tab a {
		color: #444444;
		text-decoration: none;
	}
	.pills-tab-bar .pill-tab.current a {
		color: #fff;
	}

.pill-tab.from-this-org {
	border-right: 4px solid green;
}
.pill-tab.from-parent-org {
	border-right: 4px solid blue;
}
.pill-tab.from-child-org {
	border-right: 4px solid yellow;
}
.pill-tab.from-sister-org {
	border-right: 4px solid red;
}

	.dashboard-main .card.verify-proof-of-id .card-body p:first-child {
		height: 70px;
		overflow: hidden;
	}

.dashboard-main .card.verify-proof-of-id .card-body p:nth-child(2n) {
	height: 55px;
	overflow: hidden;
}


.dashboard-main .card a svg.fifty-percent {
	width: 50% !important;
	margin-left: 50%;
}

.dashboard-main .card .card-body:hover {
	background-color: rgba(90, 90, 90, 0.1);
}

.dashboard-main .card .card-body > a {
	display: block;
	color: #555555;
}

.dashboard-main .card.text-white .card-body > a {
	color: #ffffff;
}

.dashboard-main .card .card-body > a h4 {
	font-weight: normal;
}

.dashboard-main .card .card-body > a:hover {
	text-decoration: none;
}

	.dashboard-main .card .card-body > a:hover h4 {
		color: #333333;
	}

.dashboard-main .card.text-white .card-body > a:hover h4 {
	color: #ffffff;
}

.dashboard-main .card .card-body a svg {
	display: block;
}

	.dashboard-main .card .card-body a svg.line path,
	.dashboard-main .card .card-body a svg.line rect,
	.dashboard-main .card .card-body a svg.line line,
	.dashboard-main .card .card-body a svg.line text {
		stroke: #555555;
	}

	.dashboard-main .card .card-body a svg.fill path,
	.dashboard-main .card .card-body a svg.fill rect,
	.dashboard-main .card .card-body a svg.fill line,
	.dashboard-main .card .card-body a svg.fill text {
		fill: #555555;
	}

.dashboard-main .card .card-body > a .row svg {
	width: 100%;
	/*margin-left: 50%;*/
}

.dashboard-main .card.text-white .card-body a svg {
	fill: #ffffff;
}

.dashboard-main .card .card-body a:hover svg {
	fill: #333333;
}

.dashboard-main .card.text-white .card-body a:hover svg {
	fill: #ffffff;
}

.dashboard-main .card-body .row div:nth-child(2) {
	height: 103px;
}

.ltpd-grid .classification-grid-cell,
.ltpd-grid .focus-area-skill-grid-cell {
	position: relative;
	cursor: pointer;
	background-color: rgba(1, 1, 1, 0.02);
}

.ltpd-grid .classification-grid-cell > div,
.ltpd-grid .focus-area-skill-grid-cell > div {
	position: relative;
}

	.ltpd-grid .classification-grid-cell > div.latest::after,
	.ltpd-grid .focus-area-skill-grid-cell > div.latest::after {
		content: 'latest';
		display: block;
		position: absolute;
		top: 5px;
		right: 5px;
		width: 50px;
		height: 20px;
		line-height: 20px;
		background-color: rgb(0, 148, 255);
		color: #fff;
		text-align: center;
	}

.ltpd-grid .grid-row.header .grid-col.secondary-hovering {
	background-color: rgba(1, 1, 1, 0.2);
}

.ltpd-grid .grid-row .grid-col.header.secondary-hovering {
	background-color: rgba(1, 1, 1, 0.2);
}

.ltpd-grid .grid-row {
	background-color: #fff;
	z-index: 99;
}

.ltpd-grid .grid-col {
	transition: all ease 0.2s;
}

	.ltpd-grid .grid-col.hovering {
		background-color: rgba(1, 1, 1, 0.2);
	}

	.ltpd-grid .grid-col.secondary-hovering {
		background-color: rgba(1, 1, 1, 0.05);
	}

.ltpd-grid .grid-row:after {
	content: "";
	display: table;
	clear: both;
}

.ltpd-grid .grid-row .grid-col {
	float: left;
	height: 70px;
	position: relative;
}

.ltpd-grid .grid-row.header .grid-col {
	height: 90px;
}

.ltpd-grid .grid-row .grid-col {
	margin: 3px;
}

.ltpd-grid .grid-row.header .grid-col {
	margin: 0 3px 3px 3px;
	background-color: rgba(1, 1, 1, 0.06);
	font-weight: 700;
	padding: 10px 10px 0 10px;
	font-size: 0.8rem;
}

	.ltpd-grid .grid-row.header .grid-col:not(:first-child) {
		border-bottom: 1px solid rgba(1, 1, 1, 1);
	}

.ltpd-grid .grid-row .grid-col.header {
	background-color: rgba(1, 1, 1, 0.06);
	width: 170px;
	font-weight: 700;
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-size: 0.8rem;
}

.ltpd-grid .grid-row:not(:first-child) .grid-col.header {
	border-right: 1px solid rgba(1, 1, 1, 1);
}

.ltpd-grid .grid-row.header .grid-col.header {
	background-color: rgba(1, 1, 1, 0.06);
	border-right: 1px solid rgba(1, 1, 1, 1);
	border-bottom: 1px solid rgba(1, 1, 1, 1);
}

.ltpd-grid .grid-row.header .grid-col span,
.ltpd-grid .grid-row .grid-col.header span {
	display: block;
	font-weight: 400;
	font-size: 0.7rem;
}

.ltpd-grid .grid-row .grid-col:first-child {
	margin-left: 0;
}

.ltpd-grid .bad-card-count {
	float: left;
	margin: 10px 0px 10px 10px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 0.8rem;
	border-radius: 3px;
	background-color: rgb(209, 45, 54);
	color: #fff;
}

.ltpd-grid .good-card-count {
	float: left;
	font-size: 2rem;
	margin: 10px 0px 0 10px;
}

@media all and (min-width: 800px) {
	.grid-col-count-1 > .grid-col {
		width: calc((100% - 173px)/3 - 6px);
	}

	.grid-col-count-2 > .grid-col {
		width: calc((100% - 173px)/3 - 6px);
	}
}

@media all and (max-width: 800px) {
	.grid-col-count-1 > .grid-col {
		width: calc(100% - 179px);
	}

	.grid-col-count-2 > .grid-col {
		width: calc((100% - 173px)/2 - 6px);
	}

	.ltpd-grid .grid-row.header .grid-col > div {
		writing-mode: vertical-rl;
		line-height: 0.8rem;
	}

	.ltpd-grid .grid-row.header .grid-col span {
		display: none;
	}

	.ltpd-grid .bad-card-count {
		position: absolute;
		margin: 0;
		bottom: 10px;
		right: 10px;
	}

	.ltpd-grid .good-card-count {
		position: absolute;
		margin: 0;
		top: 5px;
		left: 5px;
		font-size: 1.4rem;
	}
}

@media all and (max-width: 600px) {
	.ltpd-grid .grid-row.header .grid-col {
		padding-left: 5px;
	}

	.ltpd-grid .bad-card-count {
		right: 3px;
	}
}

.grid-col-count-3 > .grid-col {
	width: calc((100% - 173px)/3 - 6px);
}

.grid-col-count-4 > .grid-col {
	width: calc((100% - 173px)/4 - 6px);
}

.grid-col-count-5 > .grid-col {
	width: calc((100% - 173px)/5 - 6px);
}

.grid-col-count-6 > .grid-col {
	width: calc((100% - 173px)/6 - 6px);
}

.grid-col-count-7 > .grid-col {
	width: calc((100% - 173px)/7 - 6px);
}

.grid-col-count-8 > .grid-col {
	width: calc((100% - 173px)/8 - 6px);
}

.grid-col-count-9 > .grid-col {
	width: calc((100% - 173px)/9 - 6px);
}

.grid-col-count-10 > .grid-col {
	width: calc((100% - 173px)/10 - 6px);
}

.grid-col-count-11 > .grid-col {
	width: calc((100% - 173px)/11 - 6px);
}

.grid-col-count-12 > .grid-col {
	width: calc((100% - 173px)/12 - 6px);
}

.drill-card {
	margin-bottom: 20px;
}

	.drill-card .header {
		display: grid;
		grid-template-columns: 1fr 400px;
		margin-bottom: 15px;
		background-color: #e9e9e9;
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgba(1, 1, 1, 0.2);
	}

		.drill-card .header > h4 {
			position: relative;
			padding: 10px;
			line-height: 1.5rem;
			margin-bottom: 0;
		}

		.drill-card .header > h4.editing {
			font-size: unset;
			padding: 5px;
			position: relative;
		}
		.drill-card .header > h4 input {
			width: calc(100% - 62px);
			font-size: 18px;
			line-height: 28px;
			padding-left: 5px;
		}
		.drill-card .header > h4 button {
			position: absolute;
			height: 33px;
			top: 5px;
			right: 0;
		}
		.drill-card.latest .header > h4 {
			border-left: 10px solid rgb(0, 148, 255);
		}

	.drill-card .header .menu {
		text-align: right;
		height: 37px;
		padding-right: 5px;
		margin-top: 7px;
	}
	.drill-card .header .menu .incomplete {
		display: inline-block;
		height: 30px;
		color: rgb(200, 0, 0);
	}
	.drill-card .header .menu .incomplete svg {
		fill: rgb(200, 0, 0);
		height: 30px;
	}
	.drill-card .header .menu a.delete {
		min-width: 30px;
		padding: 0;
	}
		.drill-card .header .menu a {
			margin-left: 5px;
		}
		.drill-card .header .menu .expand-collapse {
			width: 120px;
		}
		.drill-card .header .menu .expand-collapse svg {
			transition-property: transform;
			transition-duration: 0.2s;
		}
		.drill-card .header .menu .expand-collapse.expanded svg {
			transform: rotate(180deg);
		}
		.drill-card .header .menu .cloned {
			display: inline-block;
			line-height: 44px;
			padding: 0 5px;
		}
		.drill-card .header .menu .cloned svg {
			fill: var(--primary-color);
		}
			.drill-card .header .menu .cloned svg:first-child {
				margin-right: -12px;
			}

			.drill-card .card-section.video-container {
				grid-column: span 2;
			}
	.drill-card .video-box {
		width: 655px;
		height: 368px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #999999;
	}

	.drill-card .drill-info {
		display: grid;
		grid-template-columns: 115px 1fr;
		grid-auto-rows: auto;
	}

		.drill-card .drill-info :nth-child(2n+1) {
			/* info titles */
			color: #999999;
		}

	.drill-card .card-sections {
		display: grid;
		grid-template-columns: repeat(auto-fill, 320px);
		grid-auto-rows: auto;
		column-gap: 15px;
		grid-row-gap: 15px;
	}

	.drill-card .card-section {
		position: relative;
		box-shadow: 1px 1px 2px rgba(1, 1, 1, 0.2);
	}
	.drill-card .card-section:not(:first-child) {
		padding: 10px;
		border: 1px solid rgba(1, 1, 1, 0.2);
	}
		.drill-card .card-section .bullet-list {
			display: grid;
			grid-template-columns: 2px 1fr;
			grid-auto-rows: auto;
			grid-gap: 10px;
			/* to compensate for the button bar */
			margin-bottom: 50px;
			margin-top: 15px;
		}

			.drill-card .card-section .bullet-list .bullet {
				background-color: rgb(1, 1, 1);
			}
			.drill-card .card-section .bullet-list svg {
				width: 20px;
				height: 20px;
			}

		.drill-card .card-section .collection-list {
			display: grid;
			grid-template-columns: 20px 1fr;
			grid-auto-rows: auto;
			grid-gap: 10px;
			/* to compensate for the button bar */
			margin-bottom: 50px;
			margin-top: 15px;
		}

		.drill-card .card-section span.no-data {
			display: block;
			margin-bottom: 50px;
			margin-top: 15px;
		}

		.drill-card .card-section .collection-list .collection {
			/*background-color: rgb(1, 1, 1);*/
		}
		.drill-card .card-section .collection-list svg {
			width: 20px;
			height: 20px;
		}


	.drill-card .card-section .btn-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px;
		text-align: right;
	}

	.drill-card .age-groups {
		display: grid;
		grid-template-columns: repeat(auto-fill, 50px);
		grid-auto-rows: 20px;
		column-gap: 6px;
		row-gap: 6px;
		margin-bottom: 20px;
	}

		.drill-card .age-groups .age-group-pill {
			text-align: center;
			line-height: 20px;
			border: 1px solid rgba(1, 1, 1, 0.5);
			color: rgba(1, 1, 1, 0.5);
			border-radius: 3px;
			overflow: hidden;
		}

			.drill-card .age-groups .age-group-pill.current-age-group {
				background-color: rgba(1, 1, 1, 1);
				color: #fff;
				border: 0;
			}

			.drill-card .age-groups .age-group-pill.other-associated-age-group {
				background-color: rgba(1, 1, 1, 0.1);
				color: rgb(1, 1, 1);
				border: 0;
			}

	.drill-card .complete-instructions {
		padding: 5px;
		background-color: rgba(1, 1, 1, 0.1);
	}

		.drill-card .complete-instructions svg {
			width: 20px;
			height: 20px;
			padding: 0;
			margin: 0;
		}

@media all and (max-width: 720px) {
	.drill-card .video-container .video-box {
		width: 100%;
		height: 45vw;
		/*height: 20%;*/
	}
	.drill-card .card-sections {
		grid-template-columns: 1fr;
	}
	.drill-card .card-section.video-container {
		grid-column: span 1;
	}
}

.dialog-outer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(200, 200, 200, 0.8);
	z-index: 201;
}

	.dialog-outer .dialog-inner {
		position: fixed;
		top: 50%;
		left: 50%;
		background-color: rgba(255, 255, 255, 1);
		padding: 50px 20px 20px 20px;
		transform: translate(-50%, -50%);
		min-height: 150px;
	}

		.dialog-outer .dialog-inner.dialog-fluid-width {
			width: 80%;
		}

		.dialog-outer .dialog-inner.dialog-fixed-width-sm {
			width: 400px;
		}
		.dialog-outer .dialog-inner.dialog-fixed-width {
			width: 800px;
		}
		@media all and (max-width: 840px) {
			.dialog-outer .dialog-inner.dialog-fixed-width {
				width: 95%;
			}
		}

		.dialog-outer .dialog-inner .close-button {
			position: absolute;
			top: 0;
			right: 0;
			width: 30px;
			height: 30px;
			text-align: center;
			font-size: 1.6rem;
			line-height: 1.6rem;
			background-color: rgb(200, 0, 0);
			color: #ffffff;
		}

			.dialog-outer .dialog-inner .close-button:hover {
				cursor: pointer;
			}

.yes-no-dialog-text {
	font-size: 1.4rem;
}

.recipient-delete-link-container {
	padding-top: 1.6rem;
	display: none;
}

.sample-type-map-components .field-type-menu-container {
	padding-right: px;
}

	.sample-type-map-components .field-type-menu-container > div {
		cursor: pointer;
		padding: 0 5px;
	}

		.sample-type-map-components .field-type-menu-container > div.selected {
			background-color: rgba(0, 0, 0, 0.12);
		}

.sample-type-map-tree .group-name,
.sample-type-map-tree .host-name,
.sample-type-map-tree .cultivar-name {
	cursor: pointer;
}

	.sample-type-map-tree .group-name span,
	.sample-type-map-tree .host-name span,
	.sample-type-map-tree .cultivar-name span {
		display: inline-block;
		padding: 0 3px;
	}

	.sample-type-map-tree .group-name.selected span,
	.sample-type-map-tree .host-name.selected span,
	.sample-type-map-tree .cultivar-name.selected span {
		background-color: rgba(0, 0, 0, 0.12);
	}

.sample-type-map-tree .group-selector .group-name svg,
.sample-type-map-tree .host-selector .host-name svg {
	width: 16px;
	height: 16px;
	-webkit-transition: -webkit-transform .3s ease-in-out;
	-ms-transition: -ms-transform .3s ease-in-out;
	transition: transform .3s ease-in-out;
}

.sample-type-map-tree .group-selector.open .group-name svg,
.sample-type-map-tree .host-selector.open .host-name svg {
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

	.sample-type-map-tree .host-selector.open .host-name svg.invisible {
		fill: rgba(255, 255, 255, 0);
	}

.sample-type-map-tree .group-selector .host-list {
	padding-left: 25px;
	display: none;
}

	.sample-type-map-tree .group-selector .host-list .cultivar-list {
		padding-left: 25px;
		display: none;
	}



/* Used on all add pages to limit the width of the input field to no more than the width of a smart phone display */
.add-form-input {
	max-width: 400px;
}
/* Used on all add pages to limit the width of the button bar to match the input form width so buttons line up nicely */
.add-button-bar {
	max-width: 400px;
}

.ltpd-framework-manage-grid table thead th.odd-stage,
.ltpd-framework-manage-grid table tbody td.odd-stage {
	background-color: rgba(0, 0, 0, 0.07);
}

.ltpd-framework-manage-grid table tbody tr td:nth-child(1),
.ltpd-framework-manage-grid table tbody tr td:nth-child(2),
.ltpd-framework-manage-grid table tbody tr td:nth-child(3),
.ltpd-framework-manage-grid table tbody tr td:nth-child(4) {
	font-size: 0.8rem;
	white-space: nowrap;
}

.ltpd-framework-manage-grid table tbody tr.even-skill {
	background-color: rgba(0, 0, 0, 0.07);
}

.ltpd-framework-manage-grid table tbody tr.section-title {
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
}

	.ltpd-framework-manage-grid table tbody tr.section-title td:first-child {
		text-align: center;
		text-transform: uppercase;
	}

.ltpd-drills-tree .section-title {
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	text-transform: uppercase;
	padding: 5px 10px;
	margin-bottom: 10px;
	width: 900px;
	position: relative;
}
	.ltpd-drills-tree .section-title .skill-drop-zone {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		display: none;
	}
	.ltpd-drills-tree .section-title .skill-drop-zone svg {
		fill: #fff;
	}
.ltpd-drills-tree .skill {
	padding-bottom: 10px;
	margin-bottom: 30px;
}
	.ltpd-drills-tree .skill .skill-classifications {
		margin-bottom: 5px;
	}
		.ltpd-drills-tree .skill .skill-classifications .skill-title {
			float: left;
			width: 400px;
			padding-right: 10px;
		}
			.ltpd-drills-tree .skill .skill-classifications .skill-title input {
				width: 100%;
			}
		.ltpd-drills-tree .skill .skill-classifications .development-area-selection {
			float: left;
			width: 300px;
			padding-right: 10px;
		}
			.ltpd-drills-tree .skill .skill-classifications .development-area-selection select {
				width: 100%;
				padding: 3px 0;
			}
		.ltpd-drills-tree .skill .skill-classifications .skill-group-selection {
			float: left;
			width: 200px;
		}
			.ltpd-drills-tree .skill .skill-classifications .skill-group-selection select {
				width: 100%;
				padding: 3px 0;
			}
		.ltpd-drills-tree .skill .skill-classifications .skill-move-btn {
			float: left;
			width: 36px;
			padding-left: 10px;
			margin-right: 5px;
		}
			.ltpd-drills-tree .skill .skill-classifications .skill-move-btn a.md-btn {
				min-width: 36px;
				height: 26px;
				line-height: 26px;
				font-size: 16px;
				font-weight: bold;
			}
		.ltpd-drills-tree .skill .skill-classifications .skill-delete-btn {
			float: left;
			width: 36px;
			padding-left: 10px;
		}
		.ltpd-drills-tree .skill .skill-classifications .skill-delete-btn a.md-btn {
			min-width: 36px;
			height: 26px;
		}
		.ltpd-drills-tree .skill .skill-classifications::after {
			content: "";
			display: table;
			clear: both;
		}
.ltpd-drills-tree .skill .drills {
	padding-left: 50px;	
}
.ltpd-drills-tree .skill .drills .drill-delete-btn {
	width: 36px;
	padding-left: 10px;
	float: left;
}
	.ltpd-drills-tree .skill .drills .drill-delete-btn a.md-btn {
		min-width: 36px;
		height: 26px;
	}
	.ltpd-drills-tree .skill .drills > div {
		margin-bottom: 5px;
	}
		.ltpd-drills-tree .skill .drills > div::after {
			content: "";
			display: table;
			clear: both;
		}
	.ltpd-drills-tree .skill .drills input {
		width: 850px;
		display: block;
		float: left;
	}
	.ltpd-drills-tree .skill .drill-btn-bar {
		width: 900px;
		text-align: right;
	}

	.ltpd-edit-skills-context-menu {
		position: absolute;
		z-index: 99;
		border: 1px solid #000;
		background-color: #fff;
		display: none;
	}
	.ltpd-edit-skills-context-menu a {
		display: block;
		padding: 10px;
	}
		.ltpd-edit-skills-context-menu a:hover {
			background-color: rgba(1, 1, 1, 0.1);
			text-decoration: none;
		}

		.my-sport-codes-row,
		.available-sport-codes-row {
			/*display: flex;*/
		}

	.my-sport-codes-row::after,
	.available-sport-codes-row::after {
		content: "";
		display: table;
		clear: both;
	}

.sport-type-selection-available-box,
.sport-type-selection-box {
	display: block;
	float: left;
	width: 180px;
	height: 180px;
	padding: 20px;
	margin: 10px 20px 10px 0;
	background-color: #fff;
	border: 0;
	text-align: center;
	font-family: var(--default-font);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
}

.sport-type-selection-box {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px 1px;
	line-height: 140px;
	transition: all ease 0.2s;
}

	.sport-type-selection-box img {
		width: 140px;
	}

	.sport-type-selection-box:not(.selected):hover {
		box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px 1px;
	}

	.sport-type-selection-box.selected {
		cursor: default;
		box-shadow: rgba(0, 0, 0, 1) 0px 0px 4px 1px;
		/*box-shadow: rgba(239, 91, 51, 1) 0px 0px 4px 1px;*/
	}

.sport-type-selection-available-box {
	border: 3px dashed rgba(1, 1, 1, 0.1);
	padding-top: 30px;
	color: rgba(1, 1, 1, 0.5);
}

.available-sport-codes-row.lock .sport-type-selection-box {
	cursor: default;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px 1px;
}

/* Video input box
   ---------------------------------------------- */
#new-videos-container {
	margin-top: 1rem;
}

	#new-videos-container::after {
		content: '';
		display: table;
		clear: both;
	}

	#new-videos-container > h3 {
		margin-bottom: 10px;
	}

	#new-videos-container .video-box-wrapper {
		position: relative;
		width: 320px;
		height: 180px;
		margin-right: 15px;
		margin-bottom: 15px;
		float: left;
	}
		#new-videos-container .video-box-wrapper > a.classify-btn {
			position: absolute;
			top: 5px;
			right: 45px;
			z-index: 100;
		}
			#new-videos-container .video-box-wrapper > a.classify-btn.hidden {
				display: none;
			}

		#new-videos-container .video-box-wrapper a.delete {
			position: absolute;
			top: 5px;
			right: 5px;
			min-width: 30px;
			padding: 0;
			z-index: 100;
		}

	.video-box {
		position: relative;
		overflow: hidden;
		background-color: rgba(1, 1, 1, 0.1);
	}
#new-videos-container .video-box {
	width: 320px;
	height: 180px;
}

.video-box .change-link {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	width: 80px;
	height: 30px;
	text-align: right;
	z-index: 200;
}
		.video-box .play-link {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 30px;
			left: 0;
			cursor: pointer;
		}

		/* disable the azure media player spinner so it doesn't interfere with the HWC spinner */
		.vjs-loading-spinner {
			position: absolute !important;
			top: 5000px !important;
		}

		.video-box .loader-small {
			position: absolute;
			top: calc(50% - 15px);
			left: calc(50% - 15px);
		}

		.video-box .play-link > div {
			position: absolute;
			width: 50px;
			height: 50px;
			top: calc(50% - 10px);
			left: calc(50% - 25px);
			background-color: rgba(255, 255, 255, 0.5);
		}

		.video-box input[type=file] {
			margin-left: -2000px;
		}

		.video-box.with-link-text {
			cursor: pointer;
			text-align: center;
			padding-top: 45px;
			transition: all ease-in-out 0.2s;
		}

			.video-box.with-link-text:hover {
				background-color: rgba(1, 1, 1, 0.15);
			}

			.video-box.with-link-text p:first-child {
				font-weight: 700;
				font-size: 1.8rem;
			}

		.video-box .upload-progress-bar {
			position: absolute;
			z-index: 99;
			height: 10px;
			left: 0;
			bottom: 0;
			background-color: green;
		}

		.video-box .upload-progress-info {
			position: absolute;
			z-index: 98;
			top: 0;
			left: 0;
			right: 0;
			bottom: 10px;
			padding-top: 40px;
/*			height: 180px;
			width: 320px;
*/			background-color: rgba(1, 1, 1, 0.4);
			color: rgba(255, 255, 255, 1);
		}

			.video-box .upload-progress-info span {
				display: block;
				text-align: center;
			}

			.video-box .upload-progress-info strong {
				display: block;
				text-align: center;
				font-size: 1.8rem;
			}

.video-box {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

	.video-box:not(.ready) .azuremediaplayer {
		/* hide the azure media player until it's ready so we can show our own loader animation */
		top: 5000px;
	}

.slider-form {
	position: relative;
	overflow: hidden;
}

.slider-box {
	position: relative;
	width: 1200px;
	transition-property: left;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

	.slider-box.sport-code {
		left: -20px;
	}

	.slider-box.age-group {
		left: -420px;
	}

	.slider-box.drill {
		left: -820px;
	}

	.slider-box > .sport-code,
	.slider-box > .age-group,
	.slider-box > .drill {
		max-height: 1000px;
		width: 360px;
		margin: 0 20px;
		display: inline-block;
		transition-property: all;
		transition-duration: 0.2s;
		transition-timing-function: ease;
	}

	.slider-box:not(.sport-code) > .sport-code,
	.slider-box:not(.age-group) > .age-group,
	.slider-box:not(.drill) > .drill {
		max-height: 10px;
		overflow: hidden;
		transition-property: all;
		transition-duration: 0.2s;
		transition-timing-function: ease;
	}

	.incremental-search-select-widget .incremental-search-filter-bar {
		display: flex;
	}

		.incremental-search-select-widget .incremental-search-filter-bar .md-form-group {
			width: 310px;
			display: inline-block;
			padding-top: 0;
		}

	.incremental-search-select-widget #search-icon {
		display: inline-block;
		width: 50px;
		height: 50px;
		padding: 13px 13px;
		background-color: rgb(1, 1, 1);
	}

		.incremental-search-select-widget #search-icon svg path{
			fill: #fff;
		}

	.incremental-search-select-widget .incremental-search-item-list {
		margin-top: 15px;
		height: 300px;
		overflow-y: auto;
		position: relative;
	}

		.incremental-search-select-widget .incremental-search-item-list .loader-small {
			background-color: #fff;
			border: 3px solid rgba(232, 78, 27, 1);
			border-top: 3px solid rgb(255, 255, 255);
		}

			.incremental-search-select-widget .incremental-search-item-list .loader-small::after {
				border: 3px solid rgba(232, 78, 27, 1);
				border-top: 3px solid rgb(255, 255, 255);
			}

		.incremental-search-select-widget .incremental-search-item-list label.incremental-search-item > span {
			padding-left: 30px;
			text-indent: -30px;
			text-transform: uppercase;
		}

		.incremental-search-select-widget .incremental-search-item-list .incremental-search-item-header {
			cursor: pointer;
			background-color: rgba(1, 1, 1, 0.1);
			font-weight: 500;
			padding: 5px 10px;
			margin-bottom: 10px;
		}

			.incremental-search-select-widget .incremental-search-item-list .incremental-search-item-header svg {
				display: inline-block;
				width: 16px;
				height: 16px;
				margin-left: -5px;
				margin-right: 5px;
				margin-top: -2px;
				transition-property: all;
				transition-duration: 0.2s;
				transition-timing-function: ease;
			}

			.incremental-search-select-widget .incremental-search-item-list .incremental-search-item-header.collapsed svg {
				transform: rotate(-90deg);
			}

	.incremental-search-select-widget .md-form-group {
		max-width: 360px;
	}

.incremental-search-select-widget .incremental-search-selected-items-container {
	display: none;
}

	.incremental-search-select-widget .incremental-search-selected-items-container h6 {
		color: rgba(1, 1, 1, 0.5);
	}

.incremental-search-select-widget .incremental-search-selected-items-list {
	display: grid;
	grid-template-columns: 1fr 20px;
	grid-auto-rows: auto;
	grid-row-gap: 3px;
	grid-column-gap: 3px;
	max-height: 100px;
	overflow-y: auto;
}

	.incremental-search-select-widget .incremental-search-selected-items-list svg {
		fill: rgba(200, 20, 20, 1);
		width: 20px;
		height: 20px;
	}

#drill-cards-container.no-drills h3 {
	display: none;
}

.age-groups-form .age-groups-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, 50px);
	grid-auto-rows: 22px;
	column-gap: 6px;
	grid-row-gap: 6px;
}
	.age-groups-form .age-groups-container > div:not(.loader-small) {
		text-align: center;
		line-height: 20px;
		border: 1px solid rgba(1, 1, 1, 0.5);
		color: rgba(1, 1, 1, 0.5);
		border-radius: 3px;
		overflow: hidden;
		cursor: pointer;
		position: relative;
	}
	.age-groups-form .age-groups-container > div.loader-small {
		text-align: center;
		position: absolute;
		left: calc(50% - 15px);
		top: 80px;
	}
		.age-groups-form .age-groups-container > div.selected {
			color: #fff;
			background-color: rgb(1, 1, 1);
			border: 0;
		}
		.age-groups-form .age-groups-container > div > input {
			position: absolute;
			left: -2000px;
		}

		.simple-list-form .list-container {
			position: relative;
			min-height: 100px;
			max-height: 400px;
			overflow-y: auto;
			grid-template-columns: 1fr 30px;
			grid-auto-rows: auto;
			grid-row-gap: 10px;
		}
.simple-list-form .list-container .delete-btn-box {
	padding-top: 7px;
	background-color: rgba(1, 1, 1, 0.1);
	text-align: center;
	cursor: pointer;
}
	.simple-list-form .list-container .delete-btn-box.hide {
		cursor: unset;
		background-color: #fff;
	}
	.simple-list-form .list-container .delete-btn-box.hide svg {
		fill: #fff;
	}
	.simple-list-form .list-container .delete-btn-box svg {
		height: 20px;
		width: 20px;
		/*fill: #fff;*/
	}
	.simple-list-form .list-container .loader-small {
		position: absolute;
		top: calc(50% - 15px);
		left: calc(50% - 15px);
	}
	.simple-list-form .list-container .md-form-group {
		padding-top: 0;
		line-height: 8px; /* to remove spacing underneath the line when in grid */
	}
	.simple-list-form .list-container .md-form-group > label input {
		padding: 11px 8px;
		height: 38px;
	}

.collection-card-group .group-name {
	background-color: #e4e4e4;
	padding: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}
.collection-card-group .group-cards {
	padding-left: 10px;
	display: none;
}
	.collection-card-group .group-cards .md-checkbox .cb-text {
		text-indent: -2rem;
		margin-left: 2rem;
	}
	.collection-card-group .group-cards .md-checkbox .cb-text > span {
		text-indent: 0;
	}
	.collection-card-group .group-cards .md-checkbox .drill-type,
	.collection-card-group .group-cards .md-checkbox .info {
		color: #999999;
	}
		.collection-card-group .group-cards .md-checkbox > span > span:not(.age-groups) {
		display: inline-block;
		border-right: 1px solid #c4c4c4;
		padding-right: 10px;
		margin-right: 10px;
	}
	.collection-card-group .group-cards .md-checkbox > span > span > span {
		display: inline-block;
		width: 50px;
		background-color: #eeeeee;
		border-radius: 5px;
		font-size: 0.9rem;
		overflow: hidden;
		height: 20px;
		line-height: 20px;
		text-align: center;
		margin-bottom: -4px; 
	}

.territories-branch .territory-node,
.organisations-branch .organisation-node {
	padding-bottom: 2px;
	transition-duration: 0.2s;
	transition-property: background-color;
}

.territories-branch .territories-branch,
.organisations-branch .organisations-branch,
.organisations-branch .organisation-users {
	margin-left: 30px;
}
.territories-branch .territory-node:not(.expanded):hover,
.organisations-branch .organisation-node:not(.expanded):hover {
	background-color: #f4f4f4;
}
.territories-branch .territory-node .territory-detail
.organisations-branch .organisation-node .organisation-detail {
	display: grid;
	grid-template-columns: 30px 1fr 70px 70px 70px 150px;
	font-size: 1rem;
}
.organisations-branch .training-card-count svg,
.organisations-branch .subsidiary-count svg,
.organisations-branch .user-count svg {
	height: 20px;
	fill: #666666;
}
.organisations-branch .user-count {
	cursor: pointer;
}
.territories-branch .expand-collapse svg,
.organisations-branch .expand-collapse svg {
	height: 16px;
	fill: #666666;
	cursor: pointer;
	transition-duration: 0.2s;
}
.territories-branch .territory-node .menu,
.organisations-branch .organisation-node .menu {
	text-align: right;
	font-size: 1rem;
}
.territories-branch .territory-node.expanded > .territory-detail > .expand-collapse svg,
.organisations-branch .organisation-node.expanded > .organisation-detail > .expand-collapse svg {
	transform: rotate(90deg);
}
.organisations-branch .organisation-node.users-expanded > .organisation-users {
	padding: 10px;
	box-shadow: 1px 1px 2px #aaaaaa;
	margin-bottom: 15px;
	margin-top: 5px;
	margin-right: 20px;
}
.organisations-branch .organisation-users .user-info {
	display: grid;
	grid-template-columns: 200px 1fr 100px 100px 80px;
	padding: 3px 0;
}

.card-visibility-selection {
	display: grid;
	grid-template-columns: 80px 1fr;
	grid-column-gap: 20px;
	margin-bottom: 20px;
	font-size: 1.2rem;
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
}
	.card-visibility-selection.selected,
	.card-visibility-selection:hover {
		background-color: #e4e4e4;
	}
	.card-visibility-selection img {
		width: 100%
		/*width: 100px;*/
	}