/* -----[ variables ]------------------------------------------ */

:root {
	--color-bg-header: #fff;
	--color-bg-main: #ebf6fd;
	--color-fg-main: #0c244a;
	--color-fg-title: #007fcd;
	--color-bg-advice: #bfdff3;
	--color-fg-text: #174287;
	--color-progress: #088ae2;
	--color-fg-link: #007fcd;

	--color-bg-button: #ffde17; /* bright yellow */
	--color-fg-button: #0c244a; /* dark blue */
	--color-bg-addon-button: #fff4e4; /* pale yellow */
	--color-bg-button-alt: #0c244a; /* dark blue */
	--color-fg-button-alt: #fff; /* white */
	--color-bg-button-alt2: #007fcd; /* dark blue */
	--color-fg-button-alt2: #fff; /* white */

	--color-bo-forms: #c0dff3;
	--color-bo-forms-selected: #007fcd;
	--color-bo-forms-disabled: #b8b8b8;
	--color-fg-forms-disabled: #b8b8b8;
	--color-bo-forms-error: #844;
	--color-fg-forms-error: #844;

	/* these are stolen */
	--form-textcolor: #fcc;

	--width-users-table-button: 225px;
	--width-form-label: 160px;
}

/* -----[ boilerplate tags ]----------------------------------- */

span.tooltip[data-tooltip] {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
}
span.tooltip[data-tooltip]:after {
	content: "\f059";
}

html {
	font-size: 14px;
}
body {
	margin: 0;
	max-width: 100%;
	font-family: 'Arial', sans-serif;
	position: relative;
	background-color: var(--color-bg-main);
	color: var(--color-fg-main);
}
html, body {
	height: 100vh;
}
* {
	box-sizing: border-box;
}
.sr-only {
	/* https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 */
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}
.disable-scroll {
	overflow-y: hidden;
}
.nowrap {
	white-space: nowrap;
}
.align-left {
	text-align: left !important;
}
th, td {
	vertical-align: top;
}

#dialogContainer {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	/* backdrop-filter does not work in firefox, so just use the semi-transparent background as fallback */
	background-color: rgba(128, 128, 128, .9);
}
/* backdrop-filter does not work in firefox, so just use the semi-transparent background as fallback */
@supports (backdrop-filter: none) {
	#dialogContainer {
		background-color: transparent;
		/*backdrop-filter: blur(5px) saturate(150%) contrast(40%) brightness(60%);*/
		backdrop-filter: blur(5px) saturate(150%) contrast(40%);
	}
}
#dialogContainer.for-login {
	/* backdrop-filter does not work in firefox, so just use the semi-transparent background as fallback */
	background-color: rgba(50, 50, 50, 1);
}

#dialog, .dialog {
	width: 600px;
	min-height: 100px;
	background-color: #fff;
	margin: 100px auto 0 auto;
	z-index: 1000;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
	position: relative;
	max-width: 100%;
}

.dialog-header {
	background-color: var(--color-bg-advice);
	color: var(--color-fg-text);
	font-weight: bold;
	padding: 15px 30px;
	position: relative;
}
span.dialog-close {
	display: block;
	position: absolute;
	top: 13px;
	right: 20px;
	padding: 2px 4px 0 4px;
}
span.dialog-close:hover {
	border: 1px dotted var(--color-fg-text);
	border-radius: 3px;
}
.dialog-body {
	padding: 15px 30px 15px 5px;
	padding: 15px 30px;
}
.dialog-footer {
	/*border-top: 1px solid #ccc;*/
	padding: 10px 20px;
	text-align: right;
}

.button-bar {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}
.button-bar.align-left {
	justify-content: flex-start;
}
.button-bar button, .button-bar a.button,
.legenda button, .legenda a.button {
	min-width: 75px;
	min-height: 35px; /* TODO was height; check! */
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 5px;
	color: var(--color-fg-button);
	font-size: 1rem;
	display: inline-block;
	text-decoration: none;

	text-align: center;
	font-family: arial;
	margin: 0 0 0 10px;
	cursor: pointer;
}
.legenda button {
	margin-top: -15px;
	margin: -15px 10px 0 0;
}
.legenda button:last-child {
	margin-left: 10px;
	margin-right: 30px;
}
.button-bar.align-left button, .button-bar.align-left a.button {
	margin: 0 10px 0 0;
}

.button-bar button:disabled, .button-bar a.button:disabled,
.legenda button:disabled, .legenda a.button:disabled {
	color: #fff;
	background-color: var(--color-fg-forms-disabled);
}
.button-bar button:disabled:hover, .button-bar a.button:disabled:hover,
.legenda button:disabled:hover, .legenda a.button:disabled:hover {
	border: 1px solid transparent !important;
}

.button-bar a.button {
	padding: 9px 10px 0 10px;
}
button, a.button {
	border: 1px solid transparent;
	border-radius: 5px;
	padding: 2px;
	min-width: 25px;
}
button:disabled, a.button.disabled {
	color: #fff;
	background-color: var(--color-fg-forms-disabled);
}
button .fas, a.button .fas {
	width: auto !important;
}
button:hover, a.button:hover {
	border: 1px solid var(--color-fg-title) !important;
}
button.button-cancel, a.button-cancel {
	background-color: transparent;
}
button.button-ok, a.button-ok {
	background-color: var(--color-bg-button);
}
button.button-alt, a.button-alt {
	background-color: var(--color-bg-button-alt);
	color: var(--color-fg-button-alt);
}
button.button-alt, a.button-alt2 {
	background-color: var(--color-bg-button-alt2);
	color: var(--color-fg-button-alt2);
}
.attention {
	margin: 20px -10px 0 -10px;
	padding: 10px;
	color: var(--color-fg-text);
	background-color: var(--color-bg-main);
	border-radius: 5px;
}

/* -----[ general styles ]------------------------------------- */

h1, h2, h3, h4 {
	color: var(--color-fg-title);
	padding: 0;
	margin: 20px 0 10px 0;
}
h6 {
	font-size: 1rem;
	margin: 10px 0;
}
p, label {
	color: var(--color-fg-text);
}
p {
	margin: 5px 0;
}
a {
	color: var(--color-fg-link);
	text-decoration: none;
}
button, a.button {
	font-size: 1rem;
}

.hidden {
	display: none !important;
}

.responsive-only {
	display: none !important;
}

/* -----[ header ]--------------------------------------------- */

div.header {
	background-color: var(--color-bg-header);
	width: 100%;
	margin: 0;
	padding: 0;
}

div.header-content {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	
	display: flex;
	position: relative;
}

div.coachingmonitor-logo {
	width: 200px;
	height: 50px;
	background-image: url(/assets/images/n-logo.png);
	background-size: 100%;
	background-repeat: no-repeat;
	margin: 10px 30px 0 5px;
	cursor: pointer;
}

.header nav {
	display: flex;
	flex-direction: column;
	width: 100%;
}

ul.menu {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.menu li {
	padding: 0 0 10px 0;
	margin: 0 15px;
	border-bottom: 3px solid transparent;
	position: relative;
	cursor: pointer;
}
ul.menu.menu-service {
	margin-left: auto;
	margin-right: 0;
}
ul.menu.menu-service > li {
	padding: 10px 0 0 0;
}
ul.menu.menu-main > li {
	padding: 5px 0 10px 0;
}
ul.menu li.selected, ul.menu li:hover {
	border-bottom: 3px solid var(--color-fg-title);
}
ul.menu li a {
	color: var(--color-fg-main);
	text-decoration: none;
}
ul.menu li.selected a, ul.menu li:hover a {
	color: var(--color-fg-title);
}

/* submenu */
.language-select {
	position: absolute;
	top: 15px;
	right: 15px;
}
.language-select > span {
	position: relative;
}
ul.menu ul, .language-select ul {
	display: none;
	list-style: none;
	padding: 5px 0;
	/*border-top: 3px solid var(--color-fg-title);*/
}
ul.menu ul.expanded, .language-select ul.expanded {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 0;
	top: calc(100% + 5px);
	/*top: 100%;*/
	z-index: 10;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	min-width: 100%;
}
.language-select ul.expanded {
	top: 4px;
}
ul.menu ul.align-right.expanded, .language-select ul.align-right.expanded {
	left: auto;
	right: 0;
}
ul.menu li ul li a, ul.menu li:hover ul li a,
.language-select ul li a {
	color: var(--color-fg-main);
}
ul.menu li ul li, .language-select ul li {
	border-left: 3px solid transparent;
	border-bottom: none;
	margin: 0;
	padding: 5px 10px;
	white-space: nowrap;
	cursor: pointer;
}
ul.menu li ul li:hover,
.language-select ul li:hover {
	border-bottom: none;
	border-left: 3px solid var(--color-fg-title);
}
ul.menu li ul li:hover a,
.language-select ul li:hover a {
	color: var(--color-fg-title);
}

/* -----[ advice strip ]--------------------------------------- */

div.main {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 20px 0;

	display: flex;
	flex-direction: column;
}
div.main-sub {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}

div.padded-section {
	margin: 0 10px 0 10px;
}

.account-notice {
	width: 100%;
	background-color: var(--color-bg-advice);
	padding: 10px 80px 10px 20px;
	margin: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color: var(--color-fg-text);
	position: relative;
}
.account-notice .hide {
	position: absolute;
	top: 10px;
	right: 10px;
	border: 1px dotted transparent;
	padding: 2px 4px;
	cursor: pointer;
}
.account-notice .hide:hover {
	border: 1px dotted var(--color-fg-text);
	border-radius: 3px;
}

div.advice-container {
	display: flex;
	flex-direction: row;

	margin: 0;
	width: 100%;
	justify-content: space-between;
}
div.coach-pool-logo {
	padding: 5px 0 0 10px;
}
div.coach-pool-company-name {
	padding: 15px 0 0 10px;
	font-size: 1.2rem;
	color: var(--color-fg-text);
}
div.advice-inner {
	display: flex;
	flex-direction: row;
}
div.advice {
	background-color: var(--color-bg-advice);
	padding: 5px 80px 5px 20px;
	margin: 0 20px 0 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color: var(--color-fg-text);
	position: relative;
}
div.advice h4, div.advice p {
	margin: 10px 0;
	color: var(--color-fg-text);
}
div.advice a {
	color: var(--color-fg-text);
}
div.advice .hide {
	position: absolute;
	top: 14px;
	right: 10px;
	border: 1px dotted transparent;
	padding: 2px 4px;
	cursor: pointer;
}
div.advice .hide:hover {
	border: 1px dotted var(--color-fg-text);
	border-radius: 3px;
}

/* -----[ title with toolbar ]--------------------------------- */

div.title-with-toolbar {
	margin: 30px 0 10px 0;
	display: flex;
	justify-content: space-between;
}

div.title-with-toolbar h1,
div.title-with-toolbar h2 {
	padding: 0;
	margin: 0;
}

div.toolbar {
	display: flex;
	align-items: flex-start;
}

div.toolbar label {
	margin: 8px 0 0 10px;
	color: var(--color-fg-text);
}

.toolbar select, .toolbar input[type="text"], .toolbar button, .toolbar a.button {
	font-size: 1rem;
	margin: 0 0 0 10px;
}
.toolbar select, .toolbar input[type="text"] {
	background-color: var(--color-bg-main);
	border: 1px solid var(--color-fg-title);
	border-radius: 3px;
	color: var(--color-fg-text);
	padding: 0 10px;
	height: 30px;
}
.toolbar input[type="text"]::placeholder {
	color: var(--color-fg-text);
}
.toolbar button, .toolbar a.button {
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: var(--color-fg-text);
	width: var(--width-users-table-button);
	height: 30px;
	display: flex;
	justify-content: space-between;
	padding: 6px 10px 0 10px;
	text-decoration: none;
}
.toolbar button:hover, .toolbar a.button:hover {
	border: 1px solid var(--color-fg-title);
}
.toolbar button:disabled, .toolbar a.button:disabled, .toolbar a.button.disabled {
	color: #fff;
	background-color: var(--color-fg-forms-disabled);
	border: 1px solid transparent !important;
}
.toolbar button:disabled:hover, .toolbar a.button:disabled:hover {
	border: 1px solid transparent !important;
}

input.search + i.search {
	width: 20px;
	height: 20px;
	padding: 3px;
	margin-top: 5px;
	margin-left: -30px;
	margin-right: 12px;
	border: 1px solid transparent;
	color: var(--color-fg-title);
	cursor: pointer;
}
input.search + i.search:hover {
	border: 1px solid var(--color-bg-advice);
	background-color: var(--color-bg-advice);
	border-radius: 3px;
}

/* -----[ table ]---------------------------------------------- */

table.table {
	background-color: #fff;
	border-radius: 10px;
	border-collapse: collapse;
}
table.table th {
	text-align: left;
	font-weight: normal;
	font-style: italic;
}
table.table:not(.nohover) tbody tr:hover {
	background-color: var(--color-bg-advice);
	background-color: #f0f0f0;
}
/* needed because otherwise the hover effect makes the corners square again */
table.table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
table.table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}
table.table th, table.table td {
	/* make sure the cell text is aligned with the button text */
	padding: 12px 10px 8px 10px;
	vertical-align: top;
}

/* special dialog table variant */
table.table.dialog-table tbody tr {
	background-color: #f6f6f6;
}
table.table.dialog-table tbody tr:hover {
	background-color: #f0f0f0;
}
table.table tbody tr:first-child td:first-child {
	border-top-left-radius: 10px;
}
table.table tbody tr:first-child td:last-child {
	border-top-right-radius: 10px;
}

/* make sure the user icons line out horizontally (below each other) */
table.table td .fas {
	width: 20px;
	text-align: center;
}
table.table td:first-child, table.table th:first-child {
	padding-left: 20px;
}
table.table td:last-child, table.table th:last-child {
	padding-right: 20px;
}

table.table td.button {
	padding: 3px 0;
	max-width: calc(var(--width-users-table-button) + 10px);
	width: calc(var(--width-users-table-button) + 10px);
	position: relative;
	text-align: left;
}

table.table td.button button, table.table td.button a.button {
	display: inline-block;
	width: calc(var(--width-users-table-button) - 35px);
	height: 30px;

	background-color: var(--color-bg-button);
	color: var(--color-fg-button);
	border: 1px solid var(--color-bg-button);
	/*border: none;*/
	/*border-radius: 5px;*/

	margin: 2px 0 0 0;

	text-align: left;
	padding: 0 0 0 10px;
}
table.table td.button a.button {
	padding-top: 6px;
}
table.table td.button button:first-child, table.table a.button:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
table.table td.button button.addon, table.table a.button.addon {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
table.table td.button button:first-child:last-child,
table.table td.button a.button:first-child:last-child
{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	width: var(--width-users-table-button);
}
table.table td.button button.addon,
table.table td.button a.button.addon {
	background-color: var(--color-bg-addon-button);
	width: 33px;
	margin-left: -2px;
	padding: 0;
	text-align: center;

	/*border: 1px solid var(--color-bg-button);*/
}

td.button ul {
	display: none;
	position: absolute;
	top: 100%;
	z-index: 5;
	background-color: #fff;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	overflow: hidden;
	right: 10px;
}
td.button ul.expanded {
	display: flex;
	flex-direction: column;
}
td.button ul li {
	padding: 5px 10px;
}
table:not(.nohover) td.button ul li:hover {
	background-color: var(--color-bg-advice);
}
td.button ul li.divider {
	border-bottom: 1px solid #ccc;
	padding: 0;
}
td.button ul a {
	text-decoration: none;
	color: var(--color-fg-main);
	white-space: nowrap;
}
table:not(.nohover) td.button ul li:hover a {
	color: var(--color-fg-title);
}

tr.inline-title {
	background-color: var(--color-bg-main);
}

/* -----[ progress ]---------------------------------------------- */

table.table td.progress {
	padding: 7px 10px 5px 10px;
	white-space: nowrap;
}
table.table td.progress.progress-small {
	padding-right: 0;
}
table.table td.progress.progress-small + td {
	padding-left: 0;
}
span.progress-circle {
	display: inline-block;
	background-color: transparent;
	width: 25px;
	height: 25px;
	border: 5px solid transparent;
	border-radius: 15px;
	position: relative;
	z-index: 5;
}
span.progress-circle.progress-done,
span.progress-circle.progress-complete {
	background-color: var(--color-progress);
	border: 5px solid var(--color-progress);
}
span.progress-open,
span.progress-new {
	border: 5px solid var(--color-progress);
}
span.progress-started {
	/* TODO how? */
	background-color: var(--color-progress);
	border: 3px solid #fff;
	/*outline: 5px solid var(--color-progress);*/
	box-shadow: 0px 0px 0px 5px var(--color-progress);
	width: 15px;
	height: 15px;
	top: -5px;
	left: 5px;
	margin-right: 10px;
}
span.progress-started:first-child:last-child {
	top: 4px;
}
table.table tbody tr:hover span.progress-started {
	border: 3px solid var(--color-bg-advice);
	border: 3px solid #f0f0f0;
}
span.progress-none {
	border: 5px solid var(--color-bg-main);
}
span.progress-alert:not(.progress-started) {
	border: 5px solid #ffde17;
}
span.progress-alert.progress-started {
	background-color: #ffde17;
	box-shadow: 0px 0px 0px 5px #ffde17;
}
span.progress-line {
	display: inline-block;
	background-color: var(--color-progress);
	width: 10px;
	height: 5px;
	margin: 10px -5px;
}
span.progress-line.to-none {
	background-color: var(--color-bg-main);
}

div.legenda {
	display: flex;
	margin: 20px 0 0 20px;
}
div.legenda > span:not(.progress-circle) {
	display: inline-block;
	margin: 4px 10px 0 5px;
}
div.legenda > span.progress-started {
	margin: 10px 10px 0 0;
}
/*
div.legenda a {
	margin: 0 60px 0 0;
	text-decoration: underline;
	color: #40456b;
}
*/

/* -----[ forms ]------------------------------------------------- */

.page-form {
	width: 600px;
	margin: 0 auto;
}
.page-form > h1 {
	margin: 30px 30px 10px 30px;
}
.page-form .page-form-inner {
	width: 100%;
	min-height: 100px;
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
}

div.form-group {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	margin: 10px 0;
}
div.form-group.vertical {
	flex-direction: column;
}
div.form-group.compact {
}
div.form-group > * {
	flex: 1;
}
div.form-group.vertical h4 {
	margin: 10px 0 10px 0;
}
div.form-group > label {
	position: relative;
	max-width: 160px;
	max-width: var(--width-form-label);
	text-align: right;
	padding: 8px 15px 0 0;
	color: var(--color-fg-title);
	height: 34px;
}
div.form-group.narrow > label {
	max-width: 120px;
}
div.form-group.xnarrow > label {
	max-width: 80px;
}
div.form-group.vertical > label {
	max-width: none;
	text-align: left;
	padding: 8px 0;
}
div.form-group.disabled label {
	color: var(--color-fg-forms-disabled);
}
div.form-group.has-error label {
	color: var(--color-fg-forms-error);
}
div.form-group > label.required::after {
	display: block;
	position: absolute;
	content: '*';
	top: 10px;
	right: 5px;
}
div.form-group label a {
	text-decoration: underline;
}
div.form-group > div {
	display: flex;
}
div.form-group > div.multiline {
	flex-direction: column;
}
div.form-group > div.multiline div {
	display: flex;
	align-items: stretch;
}
/* fix nested input stuff widths */
div.form-group > div.multiline div,
div.form-group > div.multiline div input,
div.form-group > div.multiline div select {
	max-width: 100%;
}

div.form-group > div input[type="text"],
div.form-group > div textarea {
	flex: 999;
}
div.form-group > div label {
	min-height: 35px;
	padding: 8px 0 0 0;
	margin: 0 0 0 5px;
	flex: 1;
}
div.form-group input, div.form-group textarea, div.form-group select {
	border: 1px solid var(--color-bo-forms);
	border-radius: 5px;
	outline: none;
	color: var(--color-fg-text);
	background-color: #fff;
	padding: 2px 10px 0 10px;
	font-size: 1rem;
	height: 30px;
	min-height: 30px;
	max-width: calc(100% - var(--width-form-label));
}
div.form-group.vertical input, div.form-group.vertical textarea, div.form-group.vertical select {
	max-width: 100%;
}
div.form-group input[type="text"] + span.input-check,
div.form-group input[type="password"] + span.input-check {
	display: none;
}
div.form-group input.input-ok[type="text"] + span.input-check,
div.form-group input.input-ok[type="password"] + span.input-check {
	display: inline-block;
	width: 20px;
	max-width: 20px;
	height: 20px;
	padding: 3px;
	margin-top: 5px;
	margin-left: -30px;
	margin-right: 12px;
	border: 1px solid transparent;
	color: #0a0;
	cursor: pointer;
}
div.form-group input:first-child:last-child, div.form-group textarea:first-child:last-child, div.form-group select:first-child:last-child {
	max-width: 100%;
}
div.form-group.compact input, div.form-group.compact textarea, div.form-group.compact select {
	max-width: 230px;
}
div.form-group.compact label {
	height: auto;
}
div.form-group textarea {
	font-family: 'Arial', sans-serif;
	height: 70px;
	padding-top: 7px;
	resize: vertical;
}
div.form-group textarea.huge {
	height: 400px;
}
div.form-group input:focus, div.form-group select:focus {
	border: 1px solid var(--color-fg-title);
}
div.form-group input:disabled, div.form-group select:disabled {
	border: 1px solid var(--color-bo-forms-disabled);
	color: var(--color-fg-forms-disabled);
}
div.form-group.has-error input, div.form-group.has-error select, div.form-group.has-error textarea {
	border: 1px solid var(--color-bo-forms-error);
	color: var(--color-fg-forms-error);
}
.page-form .button-bar {
	margin: 20px 30px;
	text-align: right;
}

/* vertical form */
div.form-vertical div.form-group {
	display: block;
}
div.form-vertical div.form-group > * {
	display: block;
	width: 100%;
}
div.form-vertical div.form-group > label {
	width: auto;
	text-align: left;
	margin: 0 0 0 5px;
}
div.form-vertical div.form-group > label.required::after {
	display: inline-block;
	right: auto;
	left: 3px;
	top: auto;
	position: relative;
}

/* checkbox */
input[type=checkbox] {
	position: absolute;
	opacity: 0;
}
input[type=checkbox] + span {
	position: relative;
	cursor: pointer;
	padding: 0;
	display: block;
	margin-left: 37px;
	text-indent: -37px;
	line-height: 25px;
	margin-top: -4px;
}
input[type=checkbox] + span:before {
	content: '';
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-top;
	width: 20px;
	height: 20px;
	background: white;
	border: 1px solid var(--color-bo-forms);
	margin-top: -2px;
}
div.form-group.has-error input[type=checkbox] + span:before {
	border: 1px solid var(--color-bo-forms-error);
}
input[type=checkbox]:hover + span:before {
	box-shadow: inset 0 0 2px var(--color-bo-forms);
}
input[type=checkbox]:focus + span:before {
	border: 1px solid var(--color-bo-forms-selected);
	box-shadow: inset 0 0 2px var(--color-bo-forms);
}
input[type=checkbox]:checked + span:before {
	background: #fff;
}
input[type=checkbox]:disabled + span {
	color: var(--color-fg-forms-disabled);
	cursor: auto;
}
input[type=checkbox]:disabled + span:before {
	box-shadow: none;
	background: #ddd;
}
input[type=checkbox]:checked + span:after {
	position: absolute;
	left: 7px;
	top: 1px;
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
	font-size: 0.7em;
	color: var(--color-fg-text);
}
div.form-group.has-error input[type=checkbox]:checked + span:after {
	color: var(--color-fg-forms-error);
}

/* radio */
input[type=radio] {
	position: absolute;
	opacity: 0;
}
input[type=radio] + span {
	position: relative;
	cursor: pointer;
	padding: 0;
}
input[type=radio] + span:before {
	content: '';
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-top;
	width: 20px;
	height: 20px;
	background: white;
	border: 1px solid var(--color-bo-forms);
	border-radius: 10px;
	margin-top: -3px;
}
div.form-group.has-error input[type=radio] + span:before {
	border: 1px solid var(--color-bo-forms-error);
}
input[type=radio]:hover + span:before {
	box-shadow: inset 0 0 2px var(--color-bo-forms);
}
input[type=radio]:focus + span:before {
	box-shadow: inset 0 0 2px var(--color-bo-forms);
}
input[type=radio]:checked + span:before {
	background-color: #fff;
}
input[type=radio]:disabled + span {
	color: var(--color-fg-forms-disabled);
	cursor: auto;
}
input[type=radio]:disabled + span:before {
	box-shadow: none;
	background: #ddd;
}
input[type=radio]:checked + span:after {
	position: absolute;
	width: 14px;
	height: 14px;
	top: 1px;
	left: 4px;
	background-color: var(--color-fg-text);
	content: ' ';
	border-radius: 7px;
}

/* -----[ settings page ]----------------------------------------- */

.settings-blocks {
	display: flex;
	flex-wrap: wrap;
}
.settings-block {
	display: inline-block;
	width: 200px;
	height: 170px;
	margin: 0 30px 30px 0;
	background-color: #fff;
	border-radius: 5px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	color: var(--color-fg-main);
}
.settings-block:hover {
	background-color: #ccc;
}
.settings-block i.fas {
	font-size: 2.5rem;
	margin-top: 30px;
	border: 1px solid #ecbc3c;
	background-color: #ecbc3c;
	padding-top: 21px;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	color: #fff;
}
.settings-block.settings-block-special i.fas {
	border: 1px solid #006ab3;
	background-color: #006ab3;
}
.settings-block span {
	display: block;
	margin-bottom: 20px;
}

.button-tfa {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 0 10px 10px 0;
	background-color: #fff;
	border-radius: 5px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	color: var(--color-fg-main);
	border: 1px solid var(--color-bo-forms);
	position: relative;
}
.button-tfa.selected {
	/*border: 1px solid var(--color-bo-forms-selected);*/
}
.button-tfa .button-tfa-check {
	display: none;
}
.button-tfa.selected .button-tfa-check {
	display: block;
	position: absolute;
	top: 5px;
	right: 7px;
	color: #0a0;
	font-size: 1.5rem;
}
.button-tfa:hover {
	/*background-color: #ccc;*/
	border: 1px solid var(--color-bo-forms-selected);
}
.button-tfa .button-tfa-icon i.fas {
	font-size: 2rem;
	margin-top: 15px;
	border: 1px solid #ecbc3c;
	background-color: #ecbc3c;
	padding-top: 10px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	color: #fff;
}
.button-tfa span {
	display: block;
	margin-bottom: 10px;
}

/* -----[ media queries ]----------------------------------------- */

@media only screen and (max-width: 999px) { /* responsive-max-width */

	.responsive-only {
		display: inherit !important;
	}

	/* -----[ header ]--------------------------------------------- */

	div.coachingmonitor-logo {
		width: 166px;
	}
	.header nav {
		display: none;
	}
	.header nav.expanded {
		display: flex;
	}
	.header .menu-opener {
		display: block;
		position: absolute;
		right: 30px;
		top: 15px;
		width: 30px;
		font-size: 2rem;
		cursor: pointer;

		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
	}
	.header .menu-opener:before {
		content: "\f0c9";
	}

	div.header-content {
		position: relative;
	}
	nav.expanded {
		position: absolute;
		top: 100%;
		width: 100%;
		display: flex;
		flex-direction: column-reverse;
		z-index: 10;
		border-bottom: 1px solid var(--color-fg-title);
	}
	nav > ul.menu,
	nav > ul.menu.menu-service {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin-left: 0;
	}
	ul.menu li,
	ul.menu.menu-main li,
	ul.menu.menu-service li {
		padding: 10px 15px 10px 15px;
		margin: 0 0;
		border-top: 1px dotted var(--color-fg-title);
		border-bottom: none;
		border-left: 3px solid transparent;
		position: relative;
	}
	ul.menu li.selected, ul.menu li:hover {
		border-bottom: none;
		border-left: 3px solid var(--color-fg-title);
	}
	/* submenu */
	ul.menu ul.expanded {
		position: relative;
		border-top: none;
		/* creative margins so it hides the parent's right and bottom padding */
		margin: 10px -15px -10px 0;
		padding: 0;
	}

	/* -----[ header ]--------------------------------------------- */

	div.title-with-toolbar {
		flex-direction: column;
	}
}

#loginAttempts {
	font-size: 12px;
	padding-left: 8px;
	color: #5587cc;
}




.badge.matching {
	background-color: #e5ecf8;
	color: #000;
	font-weight: normal;
	padding-left: 20px;
	background: #e5ecf8 url('/assets/images/matching-statuses.png');
	background-repeat: no-repeat;
	background-position: 2px 2px;
}
.badge.matching.matching-intake-sent { background-position: 2px 2px; }
.badge.matching.matching-success { background-position: 2px -88px; }
.badge.matching.matching-declined { background-position: 2px -70px; }
.badge.matching.matching-in-progress { background-position: 2px -52px; } /* TODO */
.badge.matching.matching-assigned { background-position: 2px -34px; }
.badge.matching.matching-intake-completed { background-position: 2px -16px; }



.test-user {
	color: #c22;
}
.student-user {
	color: #E3AE1B;
}

body>.pnotify {
	z-index: 1000001 !important;
}

div.promo-badge {
	display: inline-block;
	vertical-align: top;
	padding: 15px;

	text-align: center;
	min-height: 225px;

	margin-right: 15px;
	margin-bottom: 20px;

	background-color: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	color: #000;
}

div.alert-box {
	color: #31708f;
	background-color: #b7c8e2;
	border: 1px solid #9ebed8;
	padding: 10px 35px 10px 20px;
	margin: 10px 0;
	border-radius: 5px;
	position: relative;
}
div.alert-box.alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}
div.alert-box.alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}
span.alert-close {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 4px 0 4px;
}
span.alert-close:hover {
	border: 1px dotted var(--color-fg-text);
	border-radius: 3px;
}

.notrelevant {
	color: #777;
	font-style: italic;
}

/* -----[ select results ]------------------------------------- */

.tail-select.filter-content-select {
	width: 500px;
}
.tail-select .tail-select-container.select-label .select-handle {
	margin: 2px 3px 1px 0;
	line-height: 12px;
}
.tail-select .select-label {
	xoverflow: hidden;
}

.filter-line {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin: 0 0 5px 0;
}
.filter-line > label {
	white-space: nowrap;
	margin: 9px 0 0 0;
}
.filter-line > button {
	margin: 9px 0 0 0;
}
.filter-type {
	width: 250px;
	margin: 0 0 0 10px;
}
.filter-content {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.filter-content > label {
	margin: 9px 10px 0 5px;
}
.filter-content > label:first-child {
	min-width: 50px;
	margin-left: 20px;
}
.filter-content > input {
	height: 32px;
	border-radius: 5px;
	border: 0;
	box-shadow: 0 1px 1px 1px rgb(0 0 0 / 10%), 0 0 1px 1px rgb(0 0 0 / 25%);
	margin: 1px 0 0 0;
	font-size: 15px;
	padding: 0 5px 2px 5px;
}


table.lines td {
	border-bottom: 1px solid var(--color-bg-main);
}
table.lines tr:last-child td {
	border-bottom: none;
}

#datepickerContainer {
	position: absolute;
}
.datepicker { z-index: 1000002 !important; }



/* -----[ questionnaires ]------------------------------------- */

div.errormessage { display: none; color: var(--color-fg-text); font-size: 20px; font-weight: bold; clear: both; float: left; margin: 0 0 30px 0;}
div.errormessage span.letop { color: var(--color-fg-text); }
div.errormessage span.small { font-size: 16px; font-weight: normal; color: var(--color-fg-text); }
div.errormessage.active { display: inline-block; }

div.go-question input[type=text].tiny {
	width: 65px;
}
div.go-question-box.inputdisable {
	background-color: #ddd;
}
div.go-question-box.inputdisable > textarea,
div.go-question-box.inputdisable > input[type=text] {
	background-color: #ddd;
	color: #888;
}