html,
body {
	height: 100%;
	margin: 0;
}

.full-height {
	height: 100%;
}
#progressBar {
	height: 18px;
	background-color: #009688;
}
#progressBarContainer {
	width: 100%;
	background-color: #ddd;
	position: fixed;
	top: 0;
}

.jspsych-content {
	max-width: 100%;
}
.jspsych-content-wrapper {
	background: #b7b7b7;
}
/* Adjusting the height of the input fields for the words */
.jspsych-survey-text input[type="text"] {
	height: 50px;
	/* Adjust this value as per your preference */
}

/* Adjusting the space for the 10 words in the DAT */
.jspsych-survey-text-question {
	margin-bottom: 10px;
	/* Adjust this value as per your preference */
}

/* Centering pareidolia instructions */
.pareidolia-instruction-container {
	max-width: 600px;
	/* Adjust this value as per your preference */
	margin: 0 auto;
}
.hide-labels p {
	display: none;
}

.jspsych-survey-text-question {
	margin: 1.3em 0em !important;
}

p {
	margin: 6px 0px;
}

input,
select {
	height: 30px;
	border-radius: 5px;
	padding-left: 10px;
	border: 1px solid #979797;
	font-weight: 600;
}

.jspsych-btn {
	font-weight: 600;
	padding: 8px 26px;
	background-color: #cae9ff;
	line-height: normal;
	height: auto;
}

/* New CSS for two-column layout */
.two-column-layout .jspsych-survey-text-question {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.two-column-layout .jspsych-survey-text-question > div {
    flex-basis: 48%; /* Adjust this value to control the width of each column */
}

/* Ensure that the input fields take full width of their container */
.two-column-layout .jspsych-survey-text-question input[type="text"] {
    width: 100%;
    box-sizing: border-box; /* Ensures padding does not affect overall width */
}

.row {
	display: flex;
}

.col {
	flex: 1;
	padding: 15px;
}

.full{
	width: 100%;
}

.label-intro {
    display: inline-block;
    font-size: 15px;
    width: 175px !important;
}