@font-face
  {
		font-family: "EB_Garamond"; src: local("EB_Garamond") ,url('../combined_resources/fonts/EB_Garamond/EBGaramond-Regular.ttf') format('truetype');
    font-family: "Cabin"; src: local("Cabin") ,url('../combined_resources/fonts/Cabin/Cabin-Regular.ttf') format('truetype');
  }

	:root
	{
		--main-color-1-solf-bej: #00796B;
		--main-color-2-solf-bej: #FF7043;
		--main-color-3-solf-bej: #FBC02D;
		--main-color-4-solf-bej: #546E7A;
	}


/* body {
	font: 14pt 'Alike', sans-serif;
} */

.note_solf_bej { 
	font-size: 75px; 
}

.droptarget_solf_bej { 
	background-color: #348781
}

div.confident_solf_bej { 
	color: var(--main-color-1-solf-bej);
}

div.vague_solf_bej { 
	color: var(--main-color-2-solf-bej);
}

.note_solf_bej { 
	display: inline-block;
	height: 100px;
	text-align: left;
	/* letter-spacing: -0.3em; */
}

.detector_solf_bej { 
	width: 150px;
	height: 150px;
	/* border: 4px solid gray; */
	/* border-radius: 8px; */
	text-align: center;
	padding-top: 10px;
}

.detuneFlat_solf_bej { display: none; }
.detuneSharp_solf_bej { display: none; }
.detuneElem_solf_bej { margin: -38px;}

.solfege_master_container_solf_bej {
	background-color: rgb(241, 241, 241);
	border: 1px solid black;
	display: grid;
	grid-template-rows: auto auto auto;
	gap: 5px;
	justify-content: center;
	position: relative;
}

.solfege_master_container_solf_bej * {
	margin: 0px;
	font-family: Cabin;
}

.grid_item_container_solf_bej{
	/* background-color: #4CAF50; */
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 100px; */
  border: 1px solid #333;
}

.start_program_button_solf_bej {
	border: 5px solid #0f7527;
	border-radius: 23px;
	color: white;
	text-align: center;
	font-size : 20px;
	font-weight: bold;
	background-color : #0e891b;
	width: 100px;
	cursor: pointer;
}

.note_complex_solf_bej {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.playback_controls_solf_bej{
	display: flex;
	flex-wrap: wrap;
}

.note_by_note_container_solf_bej{
	position: relative;
	margin: 5px;
	width: 75px;
	height: 75px;
}

.circle_text_solf_bej {
	position: absolute;
	/* top: 17px;
	left: 22px; */
	color: white;
	width: 60px;
	height: 59px;
	text-align: center;
	align-content: center;
}

.circle_canvas_solf_bej {
	position: absolute;
}

.inner_circle_canvas_solf_bej {
	position: absolute;
	top: 5px;
	left: 5px;
}


/************TOGGLE START******************************************/
	/* The switch - the box around the slider */
	.switch_solf_bej {
		position: absolute;
		display: inline-block;
		width: 60px;
		height: 34px;
	}

	/* Hide default HTML checkbox */
	.switch_solf_bej input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	/* The slider */
	.slider_solf_bej {
		position: absolute;
		cursor: pointer;
		top: 0;
    left: 0px;
    right: 0px;
		bottom: 0;
		background-color: #ccc;
		-webkit-transition: .4s;
		transition: .4s;
	}

	.slider_solf_bej:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

	input:checked + .slider_solf_bej {
		background-color: var(--main-color-1-solf-bej);
	}

	input:focus + .slider_solf_bej {
		box-shadow: 0 0 1px var(--main-color-1-solf-bej);
	}

	input:checked + .slider_solf_bej:before {
		-webkit-transform: translateX(26px);
		-ms-transform: translateX(26px);
		transform: translateX(26px);
	}

	/* Rounded sliders */
	.slider_solf_bej.round_solf_bej {
		border-radius: 34px;
	}

	.slider_solf_bej.round_solf_bej:before {
		border-radius: 50%;
	}

	.drone_toggle_text_solf_bej, .pc_clock_toggle_text_solf_bej, .frequency_viewer_toggle_text_solf_bej, .transcription_viewer_toggle_text_solf_bej, .letter_name_viewer_toggle_text_solf_bej {
		position: absolute;
    min-width: 200px;
    top: 3px;
    left: 70px;
		color: black;
	}

	.drone_toggle_container_solf_bej, .pc_clock_toggle_container_solf_bej, .frequency_viewer_toggle_container_solf_bej, .transcription_viewer_toggle_container_solf_bej, .letter_name_viewer_toggle_container_solf_bej {
		/* border: 1px solid #c9c9c9; */
    height: 36px;
    min-width: 260px;
    padding: 3px;

	}

	
	/************TOGGLE END******************************************/
	
.yes_100_text_solf_bej, .yes_100_text_emoji_solf_bej{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Comic Sans MS', 'Arial', sans-serif;
	font-size: 150px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	animation: fadeInOut 1s ease-in-out 1 forwards;
}
.yes_100_text_solf_bej {
	background-color: #08AEEA;
	background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);

	/* Clip the background to the text */
	-webkit-background-clip: text;
	background-clip: text;
	/* Make the text transparent so the background shows */
	color: transparent;
}

	/* Keyframes for the animation */
	@keyframes fadeInOut {
		0% {
			opacity: 0;
			transform:  translate(-50%, -50%) scale(0.1);
		}
		20% {
			opacity: 1;
			transform:  translate(-50%, -50%) scale(1);
		}
		80% {
			opacity: 1;
			transform:  translate(-50%, -50%) scale(1);
		}
		100% {
			opacity: 0;
			transform:  translate(-50%, -50%) scale(0.1);
		}
	}

.user_microphone_name_solf_bej{
	color: gray;
	font-size: 15px;
}

.note_reading_speed_selector_solf_bej {
	
  padding: 10px;
	margin: 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
}

/* Add a hover effect */
.note_reading_speed_selector_solf_bej:hover {
  border-color: #888;
}

/* Add a focus effect */
.note_reading_speed_selector_solf_bej:focus {
  border-color: #555;
  outline: none;
}

.accuracy_level_container_solf_bej {
	display: none;
}

.accuracy_levels_explanation_solf_bej{
	width: 50px;
	height: 50px;
	/* border: 5px solid gray; */
	border: none;
	background-color: var(--main-color-1-solf-bej);
	border-radius: 50px;
	color: white;
	font-size: 30px;
	cursor: pointer;
	margin: 10px;
}

.accuracy_level_dialog_solf_bej{
	border-radius: 10px;
	box-shadow: black 0px 0px 6px 0px;
	border: 1px solid gray;
}

.accuracy_level_dialog_close_button_solf_bej{
	width: 50px;
	height: 50px;
	/* border: 5px solid gray; */
	border:none;
	background-color: crimson;
	border-radius: 50px;
	color: white;
	font-size: 30px;
	cursor: pointer;
}

.accuracy_level_dialog_close_button_container_solf_bej {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: right;
	right: 30px;
}

.accuracy_level_dialog_text_h1_solf_bej{
	color: var(--main-color-1-solf-bej);
}

.start_listening_button_button_solf_bej, .restart_program_button_solf_bej, .play_scale_button_solf_bej {
  background-color: #4CAF50; /* Green background */
  color: white; /* White text */
  border: none; /* No border */
  border-radius: 8px; /* Rounded corners */
  padding: 12px 24px; /* Padding for size */
	margin: 5px;
  font-size: 18px; /* Text size */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Pointer cursor on hover */
  box-shadow: 0 4px #388E3C; /* Subtle shadow for depth */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth animation */
}



.feedback_container_solf_bej {
	/* background-color: rgb(255, 255, 217); */
	border: 2px solid var(--main-color-1-rm-bej);
	  /* Set up the transition for width and height */
	transition: width 0.5s ease, height 0.5s ease;
	display: grid;
	height: auto;
	justify-items: center;
	/* grid-template-rows: 113px 241px 262px 274px; */
	
}

.feedback_toggles_container_solf_bej{
	/* display: grid;
	grid-template-columns: repeat(2, 1fr); */

	display: flex
	;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
}

/* Container for styling */
.voice_part_selector_container_solf_bej, .key_signature_selector_container_solf_bej{
  display: inline-block;
  position: relative;
  width: 200px;
}

/* Base styles for the select element */
.voice_part_selector_solf_bej, .key_signature_selector_solf_bej {
  appearance: none; /* Removes the default browser styling */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */

  width: 100%;
  padding: 10px 15px;
  border: 2px solid var(--main-color-1-solf-bej);
  border-radius: 8px;
  font-size: 16px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpolygon points='70,96 110,56 30,56' fill='%234CAF50'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  color: var(--main-color-2-solf-bej);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.transcription_viewer_solf_bej {
	color: black;
	height: 125px !important;
}

.transcription_viewer_solf_bej:nth-child(1){
	/* justify-self: start; */
}