/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/******** 
	Fonts colours 
********/

h1, .h1 {
    font-size: 30px;
}

/******** 
	Custom colours 
********/

body.valuematch,
body.valuematch .text-primary,
body.valuematch h1,
body.valuematch h2,
body.valuematch h3,
body.valuematch h4,
body.valuematch h5,
body.valuematch h6,
body.valuematch .form-control {
	color: #636363;
}

/* Headings */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
	color: #636363;
}

/* Links */

body.valuematch a {
	color: #006572; /* Dark green colour */
}

body.valuematch #navbar > ul > li > a {
	color: #FFFFFF; 
}

body.valuematch a:hover,
body.valuematch a:focus {
	color: #18BC9C;
	text-decoration: none;
}

body.valuematch .nav a:focus {
	color: #FFFFFF !important;
	text-decoration: none !important;
}

body.valuematch .nav a:hover {
	color: #DBB114 !important;
	text-decoration: none !important;
}

body.valuematch .nav a[aria-expanded="true"] {
	color: #006572 !important;
}

/* Survey Title */
body.valuematch .navbar-default .navbar-brand,
body.valuematch .navbar-default .navbar-brand:hover { 
    color: #003A75;
}

/* Progress bar */

body.valuematch .progress {
    background-color: #DEE5E6;
}
/* kleur was #506473 */   
body.valuematch .progress-bar {
    background-color: #009993;
}

/* Info text */

body.valuematch .text-info {
    color: #006572;
}

/* Buttons */

body.valuematch .btn,
body.valuematch .btn[disabled],
body.valuematch .btn[disabled]:hover,
body.valuematch .btn-primary,
body.valuematch .btn-primary[disabled],
body.valuematch .btn-primary[disabled]:hover {
    color: #FFFFFF;
    /*background-color: #61B0AD;*/ /* Light green colour */
    /*border-color: #61B0AD;*/
    background-color: #506473; /* Dark Grey */
    border-color: #506473;
}

body.valuematch .btn-primary:active, 
body.valuematch .btn-primary.active, 
body.valuematch .open > .dropdown-toggle.btn-primary {
    color: #FFFFFF;
    background-color: #B2B9C3;
    border-color: #B2B9C3;
}

body.valuematch .btn:hover,
body.valuematch .btn:active,
body.valuematch .btn:focus,
body.valuematch .btn:hover,
body.valuematch .btn-primary:active,
body.valuematch .btn-primary:focus,
body.valuematch .btn-primary:active:hover, 
body.valuematch .btn-primary.active:hover, 
body.valuematch .open > .dropdown-toggle.btn-primary:hover, 
body.valuematch .btn-primary:active:focus, 
body.valuematch .btn-primary.active:focus, 
body.valuematch .open > .dropdown-toggle.btn-primary:focus, 
body.valuematch .btn-primary:active.focus, 
body.valuematch .btn-primary.active.focus, 
body.valuematch .open > .dropdown-toggle.btn-primary.focus {
	outline: none; 
    color: #FFFFFF;
    background-color: #B2B9C3; /* Light grey */
    border-color: #B2B9C3;
}

/* Button questions (Yes/No, Gender...) */

body.valuematch .button-item.btn-primary {
    background-color: #B2B9C3; /* Light Grey */
    border-color: #B2B9C3;
}

body.valuematch .button-item.btn-primary:hover {
    background-color: #506473;
    border-color: #506473;
}

body.valuematch .button-item.btn-primary:active,
body.valuematch .button-item.btn-primary.active,
body.valuematch .button-item.btn-primary:active:hover,
body.valuematch .button-item.btn-primary.active:hover, 
body.valuematch .button-item.btn-primary:active:focus,
body.valuematch .button-item.btn-primary.active:focus 
body.valuematch .button-item.btn-primary:active.focus, 
body.valuematch .button-item.btn-primary.active.focus {
    background-color: #006572;
    border-color: #006572;
}

/* Radios & Checkboxes */

body.valuematch .radio-item input[type="radio"]:focus + label::before {
    outline: none;
    outline: none;
    outline-offset: inherit;
}

body.valuematch label::after,
body.valuematch .radio-item label::after {
	background-color: #006572; 
}

body.valuematch input[type="checkbox"]:checked + label::after {
	width: 18px;
	height: 18px;
	color: #FFFFFF;
	border: 1px solid #006572;
	background-color: #006572;
	border-radius: 3px;
}

/* Arrays */


.split-array colgroup :nth-child(3) {
	border-right: 1px solid black;
}
	
	table.subquestion-list,
	table.subquestion-list > thead > tr > th, 
	table.subquestion-list > tbody > tr > th, 
	table.subquestion-list > tfoot > tr > th, 
	table.subquestion-list > thead > tr > td, 
	table.subquestion-list > tbody > tr > td, 
	table.subquestion-list > tfoot > tr > td {
		border: 0 none;
	}
	
	table.subquestion-list > thead, 
	table.subquestion-list > tbody > tr.answers-list > td, 
	table.subquestion-list > tbody > tr.answers-list > th {
		border-bottom: 1px solid #DDD;
		background-clip: padding-box; 
	}

@media only screen and (max-width: 768px) {
	
	table.subquestion-list > thead, 
	table.subquestion-list > tbody > tr.answers-list > td, 
	table.subquestion-list > tbody > tr.answers-list > th {
		border-left: 1px solid #DDD;
		border-right: 1px solid #DDD; 
	}
	
	table.subquestion-list tbody > tr.answers-list > th.answertext {
		border-top: 1px solid #DDD;
	}
}

body.valuematch tr.ls-even {
	background-color: #F5F5F5;
}

.array1 {
    background-color: #ECF0F1 !important;
}

.array2 {
    background-color: #F9F9F9 !important;
}

/* Sliders */

body.valuematch .slider.slider-reset .slider-handle, 
body.valuematch .slider.slider-untouched .slider-handle {
    background-color: #61B0AD;
}

body.valuematch .slider-handle {
    background-color: #009993;
}

body.valuematch .slider-track-low, 
body.valuematch .slider-track-high {
    border: 1px solid #506473;
}

/******** 
	Layout 
********/

body.valuematch {
    background-color: #F6F6F6;
}

body.valuematch .navbar {
    background-color: #506473;
    box-shadow: none;
}

body.valuematch .navbar .logo-container {
    padding: 0 15px;
}

body.valuematch .navbar .logo-container > img {
    max-height: 60px;
    padding: 0;
    width: auto;
}

body.valuematch .language_change_container {
    height: auto;
	overflow: auto !important;
	left: 0;
	right: auto;
	width: 100%;
}

body.valuematch .navbar-nav > li > .dropdown-menu {
	padding: 0;
	border: 0 none;
	border-radius: 0 !important;
}

body.valuematch .dropdown-menu > li > a {
    background-color: #DEE5E6;
}

body.valuematch .dropdown-menu > li > a:hover, 
body.valuematch .dropdown-menu > li > a:focus {
    background-color: #506473;
}

body.valuematch .top-container {
	margin: 0;
    padding: 1em 0;
	background-color: #ECF0F1;
}

.group-outer-container {
	margin-top: 0;
	margin-bottom: 0;
}

.group-container {
	margin-top: 0;
	margin-bottom: 0;
}

body.valuematch .group-title {
	margin: 0 0 15px 0;
}

body.valuematch .group-description {
    text-align: center;
	margin: 0 0 1em 0;
	padding: 15px;
	background-color: transparent;
	border: 0 none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.data-security-input-wrapper {
	margin: 10px 0 0 5px;
}

.question-container {
    margin-bottom: 2em;
    border: 0 none;
    background-color: #FFFFFF;
}

.question-title-container {
    background-color: #506473;
	color: #FFFFFF;
	margin-bottom: 1em;
}

span.question-number {
	/*display: none;*/
	color: #FFFFFF;
}

.ls-question-help .ls-em-tip {
	display: none;
}

.ls-question-help .ls-em-tip.text-danger {
	display: block;
}

.answer-container {
	padding-bottom: 15px;
}

.checkbox-item label::before {
	outline: none !important;
}

.checkbox-item label::after {
    padding-left: 3px;
    padding-top: 0px;
}

body.valuematch .table > thead > tr > th 
body.valuematch .table > tbody > tr > th, 
body.valuematch .table > tfoot > tr > th, 
body.valuematch .table > thead > tr > td, 
body.valuematch .table > tbody > tr > td, 
body.valuematch .table > tfoot > tr > td {
    vertical-align: middle;
}

body.valuematch .question-container.empty-question {
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

body.valuematch .question-container.empty-question input {
    border-color: #CCCCCC;
}

body.valuematch .question-container.empty-question .ls-question-help .ls-question-message {
    color: #006572;
	font-weight: normal;
}

body.valuematch .numeric-multi input.form-control {
	max-width: 150px;
}

body.valuematch .numeric-multi .ls-input-group {
	border: 0 none;
}

body.valuematch .numeric-multi .inner-wrapper {
	float: left;
	margin-left: 15px;
	width: 150px;
	background: #B2B9C3;
	border-radius: 4px;
	color: #FFFFFF;
}

.ls-group-dynamic .inner-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
}

.inner-wrapper .text-success {
	color: #FFFFFF;
}

/*
body.valuematch .numeric-multi .ls-group-dynamic .control-label {
	float: left;
	padding-top: 7px;
	padding-left: 15px;
}

*/

body.valuematch .numeric-multi .ls-input-group {
	float: right;
	text-align: right;
}


body.valuematch .numeric-multi .spacer {
	float: none;
	clear: both;
}

@media only screen and (max-width: 768px) {
	
	body.valuematch .numeric-multi .ls-group-dynamic {
		text-align: left;
	}

	body.valuematch .numeric-multi .ls-group-dynamic > div {
		float: left;
		width: auto;
		padding-top: 0;
		padding-bottom: 0;
	}

	body.valuematch .numeric-multi .ls-group-dynamic .ls-input-group {
		padding: 0;
		border: 0 none;
	}

	body.valuematch .numeric-multi .ls-group-dynamic .ls-input-group > div {
		padding: 0;
		border: 0 none;
	}
}

.question-help-container {
	position: absolute;
	left: -9999em;
}

.show-help .question-help-container {
	position: relative;
	left: auto;
}

#navigator-container {
    margin-top: 0;
}

/******** 
 Videos 
********/

.group-description.with-video-button {
	text-align: center;
}

.video-pop-up .video-dialog {
	position: absolute;
	top: 50px;
	left: 50%;
}

/******** 
 video-js Videos 
********/

.modal-dialog {
	margin: 1.75rem auto;
	max-width: 720px;
}

.modal .video-js,
.modal .video-js video {
	width: 100%;
	height: auto;
}

.modal .video-js video {
	position: relative;
}

.modal .video-js .vjs-big-play-button {
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%,-50%);
	-ms-transform: translateY(-50%,-50%);
	-o-transform: translateY(-50%,-50%);
	transform: translate(-50%,-50%);
}

/********
 Inserted Array Headers 
********/

.split-array col.col-answers {
	width: 50% !important;
}

.split-array col.answers-list {
	width: 12.5% !important;
}

body.valuematch .table-bordered > thead > tr > th.inserted-array-header {
	background: #FFFFFF;
	font-weight: bold;
}

.inserted-array-label {
	display: none;
}

@media only screen and (max-width: 768px) {

	td.inserted-array-label {
		background: #FFFFFF;
		font-weight: bold;
	}
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked+label{
    border: 4px solid #006572;
}

li.imageselect-listitem .imageselect-container .imageselect-label{
    z-index:1;
    margin: 3px;
    padding: 0;
    border: 4px solid hsla(0,0%,95%,0.9);
    border-radius: 0;
}

/********
 Right To Left Languages 
********/

/** Multi-numeric **/

.dir-rtl body.valuematch .numeric-multi .inner-wrapper {
	float: right;
	margin-left: 0;
	margin-right: 15px;
}

.dir-rtl body.valuematch .numeric-multi .ls-group-dynamic .control-label {
	float: right;
	padding-left: 0;
	padding-right: 15px;
}

.dir-rtl body.valuematch .numeric-multi .ls-input-group {
	float: left;
	text-align: left;
}

/** Question borders for Bootstrap 5 **/
body.valuematch .table > :not(:first-child) {
	border-top: none;
}

body.valuematch tbody, body.valuematch td, body.valuematch tfoot,body.valuematch  th,body.valuematch  thead,body.valuematch  tr {
	border: none;
	border-color: inherit;
}

/******** 
	Remove message about value needing to be integer 
********/

.numeric-multi .ls-question-message.em_value_integer.ls-em-success, 
.numeric .ls-question-message.em_value_integer.ls-em-success {
  display: none;
}