@media (min-width: 991px) {
	.popover {
		max-width: 700px;
	}
}

@media (min-width: 991px) {
	.md-ml-35m {
		margin-left: -35px;
	}
}


.text-not-ok {
	color: red;
}

.text-blue {
	color: blue;
}

.text-light-blue {
	color: #00b0f0;
}

.text-lighter-blue {
	color: #d1f3ff;
}

.text-ugly-purple, .text-ugly-purple a {
	color: #c742da;
}

.text-legend {
	color: #0070C0;
}

.border-bottom {
	border-bottom: 1px solid #ccc;
}

.border-bold-top {
	border-top: 2px solid #000000;
}

.margin-bottom {
	margin-bottom: 10px;
}

.h520 {
	height: 520px !important;
}

@media (max-width: 991px) {
	nav.tgv {
		/*also add background color #222 next to image */
		background: url("/img/PT-TGV-Logo-Lichtblauw.png") left no-repeat;
		background-color: #222;
		background-size: auto 100%;
	}
}

@media (min-width: 1530px) {
	nav.tgv {
		/*also add background color #222 next to image */
		background: url("/img/PT-TGV-Logo-Lichtblauw.png") -125px no-repeat;
		background-color: #222;
		background-size: auto 100%;
	}
}

@media (min-width: 1792px) {
	nav.tgv {
		background: url("/img/PT-TGV-Logo-Lichtblauw.png") left no-repeat;
		background-color: #222;
		background-size: auto 100%;
	}
}

@media (min-width: 1800px) {
	.bigNav {
		width: 1600px !important;
	}

	.bigContainer {
		width: 1600px !important;
	}
}

.no-padding {
	padding: 0px !important;
}

.edit-mode {
	background-color: #faf2cc;
}

.blueNav {
	background-color: #167095 !important;
}

.testMode {
	background-color: #E9F8FD;
}

.noEmailMode {
	background-color: #FAF2CCFF;
}

.nav>li>a {
	padding: 9px 13px;
}

body#register-body {
	background: url("/img/Spoor.jpg");
	background-repeat: no-repeat;
	color:white;
}

@media (min-width: 992px) {
	body#register-body {
		background-size: cover;
		background-attachment: fixed;
	}
}

.padding-top-s {
	padding-top: 1.25em;
}
.padding-top-xl {
	padding-top: 1.85em;
}

.jumbotron {
	margin-top: 70px;
	background-color: #e2f9ff;
}

.btn-submit {
	color: #333;
	background-color: #e2f9ff;
	border-color: #89e7ff;
}

.btn-submit:hover {
	color: #333;
	background-color: #89e7ff;
	border-color: #e2f9ff;
}

.btn-green {
	color: #fff;
	background-color: #288a28;
	border-color: #4cae4c;
}

.btn-light-pink {
	background-color: #f2d0ed;
}

.btn-lighter-pink {
	background-color: #fbeffa;
}

.page-header {
	margin: 85px 0 20px;
}

.placeholder img {
	display: inline-block;
	border-radius: 50%;
}

.question-legend {
	margin: 0 auto;
	background-color: #e2f9ff;
	border: 1px solid black;
}

.question-legend td {
	border: 1px dotted black;
	min-width: 50px;
	text-align: center;
}

#question-description {
	background-color: #A0C9FF;
	width: 200px;
	line-height: 20px;
	text-align: center;
	margin: 0 auto;
	font-size: 15px;
	padding: 10px;
	border-radius: 10px;
	border: black solid 1px;
}

.vragen-beantwoord {
	background-color: #e2f9ff;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	line-height: 175px;
	text-align: center;
	margin: 0 auto;
}
.vragen-beantwoord h3 {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	font-size: 35px;
}

.navbar {
	min-height: 70px;
}

#navbar {
	font-size: 20px;
}

#navbar .dropdown-menu a, #navbar .dropdown-menu .dropdown-header {
	font-size: 20px;
}

@media (min-width: 992px) {
	#navbar {
		font-size: 10px;
	}

	#navbar .dropdown-menu a, #navbar .dropdown-menu .dropdown-header {
		font-size: 10px;
	}
}

@media (min-width: 1220px) {
	#navbar {
		font-size: 13px;
	}

	#navbar .dropdown-menu a, #navbar .dropdown-menu .dropdown-header {
		font-size: 13px;
	}
}

.row-20 {
    margin-bottom: 20px;
}
.row-30 {
    margin-bottom: 30px;
}

.date-green {
	color: green;
}

.date-today {
	color: orange;
}

.date-red {
	color: red;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	select:focus,
	textarea:focus,
	input:focus {
		font-size: 16px;
		background: #eee;
	}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	select,
	textarea,
	input {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	.navbar-nav > li > a {
		padding-top: 28px;
		padding-bottom: 20px;
	}
}

@media (min-width: 768px) {
	#form-login input, #form-login button {
		margin-top: 14px;
	}
}

@media (min-width: 768px) {
	#form-search {
		padding-top: 14px;
	}
}

@media (min-width: 768px) {
	#email-login {
		width: 320px;
	}

	#username-login {
		width: 250px;
	}
}

th.rotate {
	/* Something you can count on */
	height: 140px;
	white-space: nowrap;
}

th.rotate > div {
	transform:
		/* Magic Numbers */
			translate(-5px, 0px)
				/* 45 is really 360 - 45 */
			rotate(270deg);
	width: 21px;
}
th.rotate > div > span {
	padding: 5px 10px;
}

div.organisation {
	padding-top: 5px;
	font-size: 16pt;
	height: 40px;
}

span.organisation-leave {
	font-size: 11pt;
}

.homepage-default {
	font-size: 21px;
}

.homepage-default-178 {
	font-size: 17.8px;
}

.fos_user_success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

.bold-red {
	color: red;
	font-weight: bolder;
}

.skilltitle {
	color: #337ab7;
	font-size: 20px;
}

.cms-item {
	margin-bottom: 20px;
}

.labelMarginTop {
	margin-top: 5px;
}

/* Tooltip container */
.course-name {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.course-name .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 1s;
}

/* Tooltip arrow */
.course-name .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.course-name:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.attendee-name {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.attendee-name .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -20px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 1s;
}

/* Tooltip arrow */
.attendee-name .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.attendee-name:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

ul.testresults-buttons {
	list-style: none;
	margin: 0;
	padding: 0;
}

.testresults-buttons li {
	float: left;
}

.testresults-buttons li a {
	display: block;
}

@media (min-height: 600px) {
	.scrollable-dropdown {
		max-height: 400px;
		overflow-y: auto;
	}
}

@media (min-height: 900px) {
	.scrollable-dropdown {
		max-height: 700px;
		overflow-y: auto;
	}
}

.form-group label.error {
	color: red;
}

.dropdown-special>a, .dropdown-special>a:focus, .dropdown-special>a:hover {
	color: #ffffff !important;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
	background-color: #767171;
	color: #080808;
}

.register-button {
	background-color: saddlebrown;
	color: white;
	font-weight: bold;
	width: 100%;
	margin-top: 10px;
}

.register-button.blue {
	background-color: #5bc0de !important;
}

.navigate-out-after-register-button {
	background-color: #1b6d85 !important;
}

.register-email-button {
	background-color: #4cae4c !important;
}

@media (min-width: 992px) {
	.register-button {
		background-color: saddlebrown;
		color: white;
		font-weight: bold;
		width: 100% !important;
	}
}

body#register-body label.error, #presence-result-dates label.error {
	color:red;
	font-weight: bold;
}

.register-error-block, .register-error-block .help-block {
	color: red !important;
}

#register-app-course-types-block {
	background: white;
	opacity: 0.8;
	color: black;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 1px;
}

input#register-app-course-types-search {
	width: 100%;
	background: #dff0d8;
	color: black;
}

.monitor-description {
   position: relative;
   max-height: 100px;
   overflow: hidden;
   transition: max-height 1s ease;
}

.monitor-description.-expanded {
	max-height: 100%;
}

.monitor-description:not(.-expanded)::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

span.editable[contenteditable] {
	display: inline-block;
	color: blue;
}
span.editable[contenteditable]:empty::before {
	content: '[________]';
	display: inline-block;
}
span.editable[contenteditable]:empty:focus::before {
	content: '________';
}

.test_question_label {
	border-top: 1px solid #ccc;
	width: 100%;
	padding-top: 15px;
}

.test_question_label_non_bold {
	font-weight: normal;
}

.question-example {
	width: 100%;
	display: inline-block;
	margin-top: 0px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.question-example-description {
	background-color: #dff0d8;
}

.jumbotron-small {
	margin-top: 0px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.jumbotron-green {
	background-color: #dff0d8;
}

.jumbotron-yellow {
	background-color: #fff5ce;
}

.jumbotron-red {
	background-color: #ffcece;
}

.jumbotron-white {
	background-color: #ffffff;
}

.test-question-media {
	/*max-height: 300px;*/
}

ul.sortable {
	list-style-type: none;
}

.page-sort {
	background: #dedede;
	display: block;
	padding: 20px;
	margin: 0 0 15px 0;
}
.sort-question {
	background: #5E5E5E;
	display: block;
	padding: 15px;
	margin: 5px;
	color: #fff;
}
.movable-placeholder {
	background: #ccc;
	height: 100px;
	display: block;
	padding: 20px;
	margin: 0 0 15px 0;
	border-style: dashed;
	border-width: 2px;
	border-color: #000;
}

.not-bold {
	font-weight: normal;
}

.btn-assessmentCriteria {
	background-color: red;
	color: yellow;
}

/* test form */
.testview {
	display: flex;
	flex-wrap: wrap;
}

.testview .col {
	margin-bottom: -10px;
}

.testview input {
	text-align: right;
}

.testview-left {
	text-align: left !important;
}

.testview.formFocus {
	color: #286090;
	background-color: #f1f1f1;
}

.test-review-answer-good {
	color: green;
}

.test-review-answer-wrong {
	color:red;
}

.test-review-images-answer-good {
	border: 3px solid green;
	max-height: 350px;
}

.test-review-images-answer-wrong {
	border: 3px solid red;
	max-height: 350px;
}

.alert-info {
	font-size: 19px;
}

.test-images-question-div {
	padding-bottom: 5px;
}

.test-images-question-chosen img {
	opacity: 1;
}

.test-images-question-unchosen img {
	opacity: 0.3;
}

.test-images-question-unchosen:hover img {
	opacity: 0.7;
}

@media (min-width: 992px) {
	.register-button {
		font-size: 13px;
	}
}

@media (min-width: 992px) {
	.col-md-20p {
		width: 20%;
	}
}

.register-app-page img {
	max-height: 126px !important;
}

@media (max-width: 992px) {
	.register-app-page img {
		max-height: 90px !important;
	}
}

@media (max-width: 700px) {
	.register-app-page img {
		max-height: 50px !important;
	}
}

@media (max-width: 500px) {
	.register-app-page img {
		max-height: 50px !important;
	}
}

@media (max-width: 400px) {
	.register-app-page img {
		max-height: 42px !important;
	}
}

@media (max-width: 300px) {
	.register-app-page img {
		max-height: 30px !important;
	}
}

.register-app-page .register-app-page-email {
	font-size: 30px;
	color: black;
}

.register-app-page a.register-button {
	border: 0;
}

.presence-result-hidden-col {
	display: none;
}

/* Tooltip container */
.presence-result-coursetype-name {
	/*position: relative;*/
	/*text-decoration: underline;*/
	/*text-decoration-style: dotted;*/
	/*border-bottom: 1px dotted black;*/
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

/* Tooltip text */
.presence-result-coursetype-name .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 1s;
}

/* Tooltip arrow */
.presence-result-coursetype-name .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.presence-result-coursetype-name:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

#useroverview.table.dataTable thead th, #useroverview.table.dataTable thead td, #useroverview.table.dataTable tbody th, #useroverview.table.dataTable tbody td {
	padding: 8px !important;
}

/** Spiderweb */
@media (min-width: 1220px) {
	.spiderweb-graph {
		width: 1000px;
		height: 800px;
	}
}

/** Skill Questionnaire **/
.rangeInput {
	padding: 0px;
}

div#header-skill-questionnaire {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: white;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 10px;
	z-index: 99;
}

.skill-questionnaire-last-date {
	font-size: 10px;
	padding-top: 7px;
}

.skill-questionnaire-cluster {
	color: #32B7EA;
	font-size: 17px;
}

#skill-questionnaire-page .form-group {
	border-bottom: 2px solid #ccc;
	padding-top: 10px;
}

/** User admin **/
.form-company-dropdown-button button,
.form-mentor-dropdown-button a
{
	font-size: 10px;
}

@media (max-width: 992px) {
	.form-company-dropdown-button button,
	.form-mentor-dropdown-button a
	{
		width: 100%;
		font-size: 14px;
	}
}

@media (min-width: 1220px) {
	.form-company-dropdown-button button,
	.form-mentor-dropdown-button a
	{
		width: 158px;
		font-size: 12px;
		height: 29px;
	}
}
#user-admin-index-mentor {
	color: blue;
}

.user-admin-primary-organisation-error,
.user-admin-primary-organisation-warning {
	display: none;
	margin-top: -15px;
}

.user-admin-primary-organisation-error div,
.user-admin-primary-organisation-warning div {
	background-color: #ffcece;
}

/** Highcharts **/
.highcharts-figure,
.highcharts-data-table table {
	min-width: 320px;
	max-width: 700px;
	margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #ebebeb;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}

.highcharts-data-table caption {
	padding: 1em 0;
	font-size: 1.2em;
	color: #555;
}

.highcharts-data-table th {
	font-weight: 600;
	padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
	padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
	background: #f8f8f8;
}

.highcharts-data-table tr:hover {
	background: #f1f7ff;
}

/** Internship **/
#table-internship-hours td {
	padding: 1px;
}

#table-internship-hours th {
	text-align: center;
}

@media (min-width: 768px) {
	#table-internship-hours td {
		padding: 0 10px;
	}
}

@media (min-width: 1220px) {
	#table-internship-hours td {
		padding: 0 20px;
	}
}

.internship-hours-day-part {
	font-weight: bold;
	text-align: left;
	padding-left: 0px !important;
}

#form-internship .control-label {
	text-align: left !important;
}

#internship-exists-message {
	display: none;
	font-weight: bold;
	color: red;
	font-size: 16px;
}

input.form-red-input {
	color: red;
}

#internship-age {
	padding-left: 15pt;
}

#internship-hours-day-part-stop {
	display: none;
}

#internship-hours-day-presence-edit {
	display: none;
}

/* start dropdown submenu */
.dropdown-submenu {
	position: relative;
}

.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
	display: block;
}

.dropdown-submenu>a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #ccc;
	margin-top: 5px;
	margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
	border-left-color: #fff;
}

.dropdown-submenu.pull-left {
	float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}
/* end dropdown submenu */

/* organisation admin */
#organisation-overview {
	margin-top: 30px;
}

input#dynatable-query-search-organisation-overview,
input#dynatable-query-search-useroverview{
	background-color: #dff0d8;
}

/* vta */
#vaktaalapp-admin-search-div input#allUserSearch {
	background-color: #ffffd9 !important;
	margin-bottom: 10px;
}

#vaktaalapp-admin-search-div a {
	color: #000000;
}

#vaktaalapp-admin-trainers {
	display: none;
}

#vaktaalapp-admin select.form-control,
#vaktaalapp-company select.form-control
{
	font-size: 16px;
}
#vaktaalapp-admin select.vaktaal-app-multi-select-primary {
	height: 520px;
}
#vaktaalapp-admin select.vaktaal-app-multi-select-secondary {
	height: 240px;
}

#vaktaalapp-admin .vaktaal-app-search,
.green-input {
	background-color: #dff0d8;
}

.app-course-user-info, .app-course-user-info-hr {
	display: none;
}

.app-course-user-info {
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #5958FF;
	white-space: nowrap;
}

#pdf-modal .modal-dialog {
	width: 90%;
	height: 90%;
}

#pdf-modal .modal-content {
	width: 100%;
	height: 100%;
}

@media (min-width: 992px) {
	#user-edit-modal .modal-dialog,
	#vaktaal-app-company-modal .modal-dialog
	{
		width: 800px;
	}
}

@media (min-width: 1220px) {
	#user-edit-modal .modal-dialog,
	#vaktaal-app-company-modal .modal-dialog
	{
		width: 1000px;
	}
}

@media (min-width: 1800px) {
	#user-edit-modal .modal-dialog,
	#vaktaal-app-company-modal .modal-dialog
	{
		width: 1400px;
	}
}

.warning-button {
	background-color: #ffcece;
}

#company-acquisition-index #dynatable-query-search-useroverview,
.green-search #dynatable-query-search-useroverview,
#useroverview_filter input
{
	background-color: #dff0d8;
}

#presence-result-user-form .select2-selection,
#presence-result-user-form .select2-selection input
{
	background-color: #dff0d8 !important;
}

#user-company-organisation-gender {
	font-size: 60%;
	color: #0070C0;
}

#user-app-course-type-copy {
	font-size: 15px;
}

/** FORMS **/
.form-label-left label {
	text-align: left !important;
}