:root {
	--spectro-border-size: 5px;
	--spectro-width: 600px;
	--spectro-height: 350px;
	--bg-color-spectro: #bdd6e9ff;
}

.protocol .display-div.dosage-spectro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: 20px auto;
	width: calc(var(--spectro-width) + 2 * 1.5rem - 8 * var(--spectro-border-size));
	padding: 1rem 1.5rem;
	background-color: var(--lnb-strong-grey-color);
	border-radius: var(--lnb-light-border-radius);
	border: var(--spectro-border-size) solid var(--lnb-charcoal-grey-color);
}

.protocol .bg-spectro {
	background-color: var(--bg-color-spectro);
	border-radius: var(--lnb-light-border-radius);
	border: var(--spectro-border-size) solid var(--lnb-charcoal-grey-color);
	width: var(--spectro-width);
	height: var(--spectro-height);
}

.protocol .bg-spectro.bg-spectro-absorbance {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.protocol .text-absorbance {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 2rem;
	font-family: "Courier New", Courier, monospace;
}

.protocol .header-simulation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: calc(var(--spectro-width) + 2 * 1.5rem - 8 * var(--spectro-border-size));
}
.protocol .title-simulation {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--lnb-white-color);
	font-family: "Courier New", Courier, monospace;
} 

.protocol .control-buttons {
	color: var(--primary-color);
	display: flex;
	gap: 1rem;
}

.protocol .control-button i {
	font-size: 20px;
	color: var(--primary-color);
}

.protocol .control-button:disabled i {
	color: lightgray;
}

.protocol .control-button:disabled:hover {
	cursor: default;
}

.protocol .control-button {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.3rem 0.7rem;
	background-color: white;
	border: none;
	border-radius: 50%;
	position: relative;
	z-index: 10;
	aspect-ratio: 1;
}

.protocol .control-button:hover {
	cursor: pointer;
}

@media (max-width: 768px) {
	.protocol .bg-spectro {
		--width-img: 400px;
		width: var(--width-img);
		height: calc(var(--width-img) * 284 / 396);
	}
	.protocol .control-buttons {
		margin: 5px auto 0 -250px;
	}
	.protocol .control-button {
		padding: 0.4rem;
	}
	.protocol .control-button i {
		font-size: 15px;
	}
	.protocol .display-div {
		height: 300px;
	}
}