@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-rm-bej: #9b0bb2;
		--main-color-2-rm-bej: #8BC34A;
		--main-color-3-rm-bej: #3F51B5;
		--main-color-4-rm-bej: #03A9F4;
	}



.metronome_visual {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background-color: #3EB489;
	border: 5px solid #3EB489
}

.start_button_bej_rm {
	font-family: Cabin;
}

.bej_rhythm_master_container {
	font-family: Cabin;
	background-color: #f3f3f3;
	/* border: 2px solid #cacaca; */
	border-radius: 12px;
	width: 1200px;
}


.rhythm_clicker_button {
	width: 260px;
	height: 100px;
	/* background-color: #8f8f8f;
	border: none;
	color: white; */
	margin: 10px;
	margin-left: 75px;
	/* display: none; */
	cursor: pointer;
	touch-action: manipulation;
}

.bej_rm_start_metronome_button {
	width: 100px;
	height: 50px;
	/* border-radius: 20px; */
	color: white;
	background-color: var(--main-color-1-rm-bej);
	font-size: 19px;
	border: none;
	cursor: pointer;
}

.bej_rm_instructions_1{
	color: gray;
}

/* Default width */
.my-element {
	width: 100%; /* Set your default width here */
}


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

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

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


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

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

.accuracy_level_dialog_close_button_rm_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_rm_bej {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: right;
	right: 30px;
}

.accuracy_level_dialog_text_h1_rm_bej{
	color: var(--main-color-1-rm-bej);
}



.multimeasure_rests_single_measure {
	display: none;
}


.rm_bej_user_score_container {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;

	border-collapse: collapse;

	margin: 25px 0;
	font-size: 0.9em;
	font-family: sans-serif;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}


.rm_bej_user_score_header {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}


.rm_bej_user_score_container thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

.rm_bej_user_score_container tbody tr {
    border-bottom: 1px solid #dddddd;
		background-color: white;
}

.rm_bej_user_score_container tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.rm_bej_user_score_container tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
		background-color: #555;
		color: white;
		font-weight: bold;
}

.user_score_row.rm_bej_user_score_footer {
	font-size: 20px;
}

.user_score_row.rm_bej_user_score_footer .rm_bej_user_score_value {
    font-size: 40px;
}

.user_score_deduction_text {
	font-size: 16px;
}

/* .rm_bej_user_score_row thead tr{
	background-color: #009879;
  color: #ffffff;
  text-align: left;
} */

.rm_bej_user_score_row th, .rm_bej_user_score_row td {
    padding: 12px 15px;
}

.user_score_row td {
	padding: 12px 15px;
}

.play_notation_testin_example {
	display : none;
}



.draggable_rm_bej {
  /* width: 150px;
  height: 100px; */
  background-color: #f39c12;
  cursor: grab;
  user-select: none;
}

.challenge_results_container {
	display: none;
	background-color: aquamarine;
	border: 2px solid cadetblue;
	position: absolute;
	left: 50%;
	top: 80%;
	width: 90%;
	text-align: center;
	transform: translate(-50%, -50%);
	z-index: 1000000;
	box-shadow: 0px 0px 20px gray;
	border-radius: 50px;
}

.challenge_results_text {
	color: white;
	font-family: monospace;
	font-size: 100px;
	padding: 50px;
	text-shadow: 8px 4px deeppink, 13px 6px slateblue;
	opacity: 0;
	animation: flickerEffect 4s ease-in-out infinite;
}

@keyframes flickerEffect {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 0.5; }
  30%  { opacity: 1; }
  40%  { opacity: 0.8; }
  50%  { opacity: 1; }
  60%  { opacity: 0.6; }
  70%  { opacity: 1; }
  80%  { opacity: 0.4; }
	90%  { opacity: 1; }
  100%  { opacity: 0; }
}

.analytics_container_rm_bej {
	display: none;
}

.analytics_row_rm_bej {
	display: none;
	border: 1px solid black;
}

.feedback_show_button_rm_bej {
	display: none;
}

.midi_instruments_connected_rm_bej {
	color: lightgray;
}

.settings_menu_container_rm_bej {
	display: none;
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, -50%);
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	gap: 20px;
	background-color: lightgray;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0px 0px 16px gray;
	z-index: 1;
}

.custom_buffer_slider_rm_bej {
	transform: rotate(180deg);
}

.custom_buffer_increase_button_rm_bej, .custom_buffer_decrease_button_rm_bej {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	color: white;
	background-color: var(--main-color-1-rm-bej);
	border: none;
	margin: 10px;
}

.custom_buffer_slider_value_text_rm_bej {
	font-size:20px;
	margin:10px;
}

.settings_menu_header_rm_bej {
	grid-column: 1 / -1; /* spans both columns */
	text-align: center;
	font-weight: bold;
	font-size: 25px;
}

.custom_buffer_slider_rm_bej {
	grid-column: 1 / -1; /* spans both columns */
}

.settings_menu_body_rm_bej {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto auto;
	gap: 10px;
}


/* Phones in portrait mode */
@media only screen and (max-width: 600px) and (orientation: portrait) {
	.bej_rhythm_master_container {
		width: 400px;
	}
}

.abcjs-bar-number{
	transform :translateX(10px);
	color: gray;
}
/* document.querySelectorAll(".abcjs-bar-number").forEach(each=>each.style.transform = "translateX(20px)") */