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

:root
	{
		--contraction_arrow: 'hello';
		--xxx : 10px;
		--yyy : 30px;
		--main-color-1: #4CAF50;
		--main-color-2: #8BC34A;
		--main-color-3: #3F51B5;
		--main-color-4: #03A9F4;
		--title-height: 0px;
	}

*
	{

	}

html
	{
	/*	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	            Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;*/
	}

body
	{
		margin: 0px;
		background-color: whitesmoke;
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		overflow-x: hidden;
		display:none;
	}

iframe
{
	/* transform: translateX(-50%);
	left: 50%; */
	position: relative;
}

#pageContainer
	{
		position: absolute;
		/* left: 50%;
		transform: translate(-50%); */
		/*background-color: white;*/
	/*	padding-left: 15px;
		padding-right: 15px;*/
		width:100%;
	}

#pageContainer h2 {
	/* max-width: 948px; */
	margin: 0px auto;
}

p
	{
		font-family: "Cabin","segoe ui", sans-serif;
		margin: 0px 50px 0px 50px;
		/* max-width: 800px; */
	}

ul, li, th
{
	font-family: "Cabin","segoe ui", sans-serif;
}

.glossary_demarcation 
	{
		text-align: center;
		background-color: var(--main-color-3);
		border-left: 21px solid var(--main-color-4);
		color: white;
		font-size: 20px;
		font-weight: 800;
		cursor: pointer;
		position: sticky;
		/* top: var(--title-height); */
		top: 0px;
		padding: 5px;
		z-index: 1;
		margin-bottom: 10px;
	}

/* .alphabet_link
	{
		width: 100%;
		height: 100%;
		display: inline-block;
		padding: 5px 0px 5px 0px;
		border-radius: 16px;
	} */

.alphabet_button 
	{
		padding: 10px;
		border-radius: 16px;
		color: black;
		background-color: #f1efef;
	}

.menu_button
	{
		position: absolute;
		z-index: 1;
		top: 1px;
		right: 0px;
		background-image: url("../images/menu_button.svg");
		background-repeat: no-repeat;
	    background-size: cover;
	    height: 49px;
	    background-color: transparent;
	    
	}


h1, h2, h3, h4, h5, h6
	{
		font-family: "Cabin", "segoe ui", "Futura", "-apple-system", serif;
		/* max-width: 800px; */
	}

h1
	{
		background-color: #4CAF50;
		border-left: 21px solid #8BC34A;
		color: white;
		/* height: 100px; */
	    text-align: center;
		margin: 0;
		padding-top:10px;
		padding-right: 60px;
		padding-left: 50px;
		padding-bottom:10px;
		box-shadow: 0 0 8px black;
		/* position: sticky; */
		top:0px;
		z-index:1;
		margin-bottom: 15px;
	}


h2
	{
		background-color: #3F51B5;
		border-left: 20px solid #03A9F4;
		color: white;
		/* height: 50px; */
	    text-align: left;
		padding-left: 5px;
		padding-top:10px;
		padding-bottom:10px;
		cursor: pointer;
		/* box-shadow: -2px 4px 8px 0px #7d7d7d; */
		/* margin: 15px; */
		/* border-radius: 5px; */
		margin-block-start: 5px;
		margin-block-end: 5px;
		position: sticky;
		/* top: var(--title-height); */
		top: 0px;
		z-index: 1;
		font-weight: normal;
	}

h3
	{
		margin-left: 15px;
	}

h4
	{
		padding-left: 15px;
	}

audio
	{
		display: block;
	    margin-left: auto;
	    margin-right: auto;
	}

.score_link
	{
		margin-left: auto;
	    margin-right: auto;	
	}

.example_caption
	{
		text-align: center;
		font-weight: 700;
	}

.minimizer
	{
		display: block;
    	transition: height 0.35s ease-in-out;
    	overflow: hidden;
	}


/*.minimizer:not(.active) { display: none;  }*/
.minimizer:not(.active) { height: 0px;  }

.minimizer.active {
	text-align: left;
	max-width: 948px;
	margin: 0px auto;
}

.open_close_arrow
	{
		padding-right: 10px;
		padding-left: 10px;
		margin-bottom: 0px;
		width: 10px;
	}

.scoreSnippet
	 {
	 	width: 400px;
	 }

.center_item
	 {
		margin: auto;
		left: 50%;
		text-align: center;
		transform: translateX(-50%);
		position: relative;
	 }

a.bej_link
	{
		color: white;
		background-color: #2196f3;
		text-decoration: none;
		padding-left: 5px;
		padding-right: 5px;
	}

a
	{
		text-decoration: none;
		font-weight: bold;
		color: #2196f3;
	}

a:hover
	{
		animation-duration: 1s;
		animation-name: animate;
		animation-iteration-count: infinite;
	}

a:visited
	{
		color: #3F51B5;
	}
        

a.bej_link
	{
		color: white;
		background-color: #2196f3;
		text-decoration: none;
		padding-left: 5px;
		padding-right: 5px;
		animation: none;
	}

 @keyframes animate 
	 { 
	    from {  color: #3F51B5; } 

	    50% { color: #2196f3; } 

	    to { color: #3F51B5; } 
	}



 .meterChart
	 {
	 	height: 200px;
	 	/* max-width: 800px; */
	 }

.outline
	{
		margin: 10px;
	}

 .list_format_1
	 {
	 	background-color: #f7f7f7;
	 	font-family: "garamond", serif;
	 	padding-left: 60px;
	    padding-top: 10px;
	    padding-bottom: 10px;
	 }


.figures { position: relative; }

.figure_six::after {  content: "6";    line-height: 9px;    padding-top: 3px; white-space: pre; position: absolute; font-size: 11px;}
.figure_seven::after {  content: "7";    line-height: 9px;    padding-top: 3px; white-space: pre; position: absolute; font-size: 11px;}
.figure_five_three::after {  content: "5\A 3";    line-height: 9px;    padding-top: 3px; white-space: pre; position: absolute; font-size: 11px;}
.figure_six_four::after {  content: "6\A 4";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 7px; right: 21px;}
.figure_six_five::after {  content: "6\A 5";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 7px; right: 9px;}
.figure_four_three::after {  content: "4\A 3";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 7px; right: 9px;}
.figure_four_two::after {  content: "4\A 2";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 7px; right: 9px;}
.figure_five_p_three_p::after {  content: "(5)\A (3)";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 1px;}
.figure_six_three_p::after {  content: "6\A (3)";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 1px; right: 6px;}
.figure_seven_five_p_three_p::after {  content: "7\A (5)\A (3)";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 1px; right: 6px;}
.figure_six_five_three_p::after {  content: "6\A 5\A (3)";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 1px; right: 6px;}
.figure_six_p_four_three::after {  content: "(6)\A 4\A 3";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 1px; right: 6px;}
.figure_six_p_four_two::after {  content: "(6)\A 4\A 2";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 1px; right: 6px;}


.figure_six_table::after {  content: "6";    line-height: 9px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 7px;right: 11px;}
.figure_seven_table::after {  content: "7";    line-height: 9px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 7px;right: 11px;}
.figure_six_four_table::after {  content: "6\A 4";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 7px; right: 26px;}

.figure_cadential_six_four_triad::after {  content: "6-5\A 4-3";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 3px; right: 25px;}
.figure_neightbor_six_four_triad::after {  content: "5-6-5\A 3-4-3";    line-height: 11px;    padding-top: 0px; white-space: pre; position: absolute; font-size: 11px; top: 3px; right: 12px;}

#cadential_letter, #cadential_word, #arpeggiating_letter, #arpeggiating_word, #passing_letter, #passing_word, #neighboring_letter, #neighboring_word, #passing_letter_inline
	{
		position: absolute;
		top: 23px;
		color: #FF5722;
	}

#arpeggiating_letter, #passing_letter
	{
		right: 23px;
	}

#neighboring_letter
	{
		right: 21px;
	}


#passing_letter_inline
	{
		right: 33px;
		top: 6px;
	}

.moreInfoButton
	{
	    color: white;
	    background-color: #03A9F4;
	    text-decoration: none;
	    padding: 4px;
	    margin: 4px;
	}

.moreInfoButton:hover
	{
		background-color: darkgray;
	}

.monospace_needed
	{
		font-family: monospace;
		font-size: 20px;
	}

.scale_degree_hat
	{
		position: relative;
	}

.scale_degree_hat:before
	{
		content:"^";	
		position:absolute;
		top:-8px;
		left:0px;
	}

.roman_numeral
	{
		font-family:'Courier New', Courier, monospace;
		font-weight: bold;
	}

.good
	{
		color: #009688;
	}

.bad
	{
		color: #e91e63;
	}

table
	{
		margin-left: 15px;
	}

table, th, td 
	{
		border: 1px solid black;
		border-spacing: 0px;
	}
	
th
	{
		position: relative;
		min-width: 25px;
		height: 37px;
	}

#table_keyboard_shortcuts
	{
		margin-left: 50px;
	}


#table_keyboard_shortcuts th
	{
		background-color: #7ac9ed;
	}

#table_keyboard_shortcuts td
	{
		padding-left: 10px;
	    padding-right: 10px;
	}

#six_four_table
	{
		text-align: left;
		border: none;
	}

#six_four_table th 
	{
		min-width: 54px;
		padding-left: 5px;
		height: 50px;
	}

#table_figured_bass_implied_figures
	{
		border: none;
	}


.top_align
	{
		vertical-align: top;
	}

.wide_cell
	{
		width: 141px;
	}

th:first-child { background-color: #7ac9ed; }

#emb_with_figures_table
	{
		text-align:left;
		border: none;
	}

#emb_with_figures_table th
	{
		padding-left: 10px;
		padding-right: 10px;
	}

#contents_list p
	{
		display: grid;
	}

.example_image, .example_image_medium
	{
		width: 100%;
		max-width: 1000px;
		display: block;
		margin-left: auto;
		margin-right: auto;	
		border:solid 1px lightgray;	
		background-color: white;
	}


.example_image_medium
	{
		max-width: 500px;
	}

.example_image_smaller
	{
		max-width: 500px;	
	}

.example_image_small_no_border
	{
		width: 100%;
		max-width: 200px;
		display: block;
		margin-left: auto;
		margin-right: auto;	
		border:none;
		padding: 5px;
	}

.example_notation
	{
		justify-content: center;
	}

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

.glossary_term_name
	{
		margin: 0px;
		/* font-weight: 700; */
		padding-left: 10px;
		font-family: "Trebuchet MS", "Segoe UI";
    font-weight: bold;
	}

.glossary_term_definition_body
	{
		margin: 0px;
		margin-bottom: 20px;
  		padding-left: 40px;

	}

.glossary_term_container {
	max-width: 948px;
	margin: 0px auto;
}

.bej_glossary_table {
	border-collapse: collapse;
	margin: 5px
}

.bej_glossary_table td {
	text-align: center;
}

.bej_glossary_table td, .bej_glossary_table th {
	border: 1px solid #ddd;
	padding: 8px;
}

/* First row */
.bej_glossary_table tr:first-child {
	background-color: #7ac9ed;
}

/* First Column */
.bej_glossary_table td:first-child, .bej_glossary_table th:first-child {
	/* background-color: blue; */
}


.music-sharp, .music-flat, .music-up-arrow, .music-down-arrow{
	font-family: Arial Unicode MS, Lucida Sans Unicode;
}

.music-up-arrow {
	color: #08c100;
}

.music-down-arrow {
	color: #c56fd5;
}


button, input[type="file" i]::-webkit-file-upload-button
    {
        border: none;
        /* padding: 9px; */
        min-width: 57px;
        margin: 4px;
        font-family: 'segoe ui', sans-serif;
        color: white;
        background-color: #03a9f4;
        cursor: pointer;
        font-weight:500;
    }

button:hover, input[type="file" i]::-webkit-file-upload-button:hover
    {
        background-color:#149b7e;
    }

button:active, input[type="file" i]::-webkit-file-upload-button:hover
    {
        background-color:cornflowerblue;
    }

button a
    {
		display: inline-block;
        text-decoration:none;
		color: white;
		padding: 9px;
    }    

.button_with_link_inside
	{
		padding: 0px;
	}

.new_info, .new_info_2
	{
		background-color: #FF5722;
	    color: white;
	    font-weight: bold;
	    font-size: large;
	    padding: 5px;	
	}

.new_info_2
	{
		background-color: #8bc34a;
	}

.positive_emphasis
	{
		color: #4CAF50;
		font-weight: bold;
	}

.negative_emphasis
	{
		color:#e91e63;
		font-weight: bold;
	}


.term
	{
		font-weight: bold;
		color: hotpink;
		cursor: pointer;
	}

.term:hover
	{
		font-weight: bold;
		color: red;
		cursor: pointer;
	}

.term_modal 
	{
	    position: fixed;
	    min-width: 300px;
	    background-color: whitesmoke;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    cursor: pointer;
	    padding: 20px;
	    box-shadow: 0 0 16px 0px black;
		border-top: 8px solid #8BC34A;
	    z-index:1;
	}


.modal_background
	{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: #00000096;
		z-index:1;
	}


.center_align_bej
{
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

.chord_quality_table td
{
	padding-left: 10px;
}

.bej_book_RN_3_row
{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
	background-color: #e4e4e4;
  padding: 5px;
	border-radius: 5px;
}




.scale_degree_RN_bej
{
  
}
.bej_book_RN_3_row_chord_quality
{
  color: purple;
	font-family: monospace;
}

.bej_book_RN_3_row_roman_numeral
{
  font-weight: bold;
	font-family: monospace;
	position: relative;
}

.sub_element_container_bej{
	display:inline-grid;
	justify-items: center;
	width:10px;
}

.sub_element_bej{
	font-family:'Courier New', Courier, monospace;
}

.svg_roman_numeral_bej{
	width:1em;
	height:1em;
}

.svg_roman_numeral_altered_bej {
	width:1.5em;
}

.sub_element_chord_quality_bej{
	color: mediumorchid;
}

.sd_container_abc_bej{
	display:inline-grid;
	position: relative;
}

.sd_caret_abc_bej, .sd_number_abc_bej {
	position: absolute;
	/* color: crimson; */
	color: gray;
	font-family: Arial Unicode MS, Lucida Sans Unicode;
}

.sd_caret_abc_bej {
	top: -14px;
	left: -5px;
}

.sd_number_abc_bej {
	top: -9px;
	left: -5px;
}

.sd_number_and_arrow_abc_bej {
	left: -8px;
}

.key_name_element_bej {
	font-family: EB_Garamond !important;
}

.connected-hyphens {
	font-family: EB_Garamond !important;
}

.bej_book_RN_tonic, .bej_book_RN_mediant, .bej_book_RN_subdominant, .bej_book_RN_dominant, .bej_book_RN_submediant, .bej_book_RN_supertonic, .bej_book_RN_leadingtone, .bej_book_RN_raised_supertonic, .bej_book_RN_lowered_supertonic, .bej_book_RN_lowered_mediant{
	font-size: 8px;
}

.bej_book_RN_tonic::before {
  content: "";
  display: block;
  width: 1em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 50 100" xmlns="http://www.w3.org/2000/svg"><line x1="5" y1="10" x2="45" y2="10" stroke="black" stroke-width="7.5"/><line x1="25" y1="10" x2="25" y2="90" stroke="black" stroke-width="15"/><line x1="5" y1="90" x2="45" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.bej_book_RN_supertonic::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 75 100" xmlns="http://www.w3.org/2000/svg"><line x1="5" y1="10" x2="70" y2="10" stroke="black" stroke-width="7.5"/><line x1="22.5" y1="10" x2="22.5" y2="90" stroke="black" stroke-width="15"/><line x1="52.5" y1="10" x2="52.5" y2="90" stroke="black" stroke-width="15"/><line x1="5" y1="90" x2="70" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.bej_book_RN_mediant::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="10" x2="98" y2="10" stroke="black" stroke-width="7.5"/><line x1="20" y1="10" x2="20" y2="90" stroke="black" stroke-width="15"/><line x1="50" y1="10" x2="50" y2="90" stroke="black" stroke-width="15"/><line x1="80" y1="10" x2="80" y2="90" stroke="black" stroke-width="15"/><line x1="0" y1="90" x2="98" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.bej_book_RN_subdominant::before {
  content: "";
  display: block;
  width: 2.1em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 105 100" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="10" x2="105" y2="10" stroke="black" stroke-width="7.5"/><line x1="15" y1="10" x2="15" y2="90" stroke="black" stroke-width="10"/><line x1="35" y1="10" x2="65" y2="90" stroke="black" stroke-width="15"/><line x1="95" y1="10" x2="67" y2="90" stroke="black" stroke-width="7.5"/><line x1="0" y1="90" x2="105" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.bej_book_RN_dominant::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><line x1="4" y1="10" x2="91" y2="10" stroke="black" stroke-width="7.5"/><line x1="20" y1="10" x2="50" y2="90" stroke="black" stroke-width="15"/><line x1="80" y1="10" x2="50" y2="90" stroke="black" stroke-width="7.5"/><line x1="4" y1="90" x2="91" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.bej_book_RN_submediant::before {
  content: "";
  display: block;
  width: 2.1em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 105 100" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="10" x2="105" y2="10" stroke="black" stroke-width="7.5"/><line x1="15" y1="10" x2="45" y2="90" stroke="black" stroke-width="15"/><line x1="75" y1="10" x2="47" y2="90" stroke="black" stroke-width="7.5"/><line x1="90" y1="10" x2="90" y2="90" stroke="black" stroke-width="10"/><line x1="0" y1="90" x2="105" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.bej_book_RN_leadingtone::before {
  content: "";
  display: block;
  width: 3em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 135 100" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="10" x2="135" y2="10" stroke="black" stroke-width="7.5"/><line x1="15" y1="10" x2="45" y2="90" stroke="black" stroke-width="15"/><line x1="75" y1="10" x2="47" y2="90" stroke="black" stroke-width="7.5"/><line x1="90" y1="10" x2="90" y2="90" stroke="black" stroke-width="12.5"/><line x1="120" y1="10" x2="120" y2="90" stroke="black" stroke-width="12.5"/><line x1="0" y1="90" x2="135" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}


.bej_book_RN_raised_supertonic::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="25,10 10,30 40,30" fill="crimson" /><line x1="25" y1="20" x2="25" y2="90" stroke="crimson" stroke-width="10"/><line x1="55" y1="10" x2="95" y2="10" stroke="black" stroke-width="7.5"/><line x1="75" y1="10" x2="75" y2="90" stroke="black" stroke-width="15"/><line x1="55" y1="90" x2="95" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-color: lightgray;
  background-repeat: no-repeat;
}

.bej_book_RN_lowered_supertonic::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="25,90 10,70 40,70" fill="cornflowerblue" /><line x1="25" y1="10" x2="25" y2="80" stroke="cornflowerblue" stroke-width="10"/><line x1="55" y1="10" x2="95" y2="10" stroke="black" stroke-width="7.5"/><line x1="75" y1="10" x2="75" y2="90" stroke="black" stroke-width="15"/><line x1="55" y1="90" x2="95" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-color: lightgray;
  background-repeat: no-repeat;
}


.bej_book_RN_lowered_mediant::before {
  content: "";
  display: block;
  width: 3em;
  height: 2em;
  background-image: url('data:image/svg+xml,<svg class="icon" viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"><polygon points="25,90 0,50 50,50" fill="mediumOrchid" /><line x1="25" y1="10" x2="25" y2="80" stroke="mediumOrchid" stroke-width="10"/><line x1="50" y1="10" x2="148" y2="10" stroke="black" stroke-width="7.5"/><line x1="70" y1="10" x2="70" y2="90" stroke="black" stroke-width="15"/><line x1="100" y1="10" x2="100" y2="90" stroke="black" stroke-width="15"/><line x1="130" y1="10" x2="130" y2="90" stroke="black" stroke-width="15"/><line x1="50" y1="90" x2="148" y2="90" stroke="black" stroke-width="7.5"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* .bej_book_RN_3_row_roman_numeral::before {
	position: absolute;
	content: "";
	border-bottom: 2px solid black;
	display: block;
	width: 10px;
	top: 3px;
	left:-1px
}

.bej_book_RN_3_row_roman_numeral::after {
	position: absolute;
	content: "";
	border-bottom: 2px solid black;
	display: block;
	width: 10px;
	top: 10px;
	left:-1px
}

.bej_book_RN_tonic::before, .bej_book_RN_tonic::after  {
	width: 10px;
}

.bej_book_RN_supertonic::before, .bej_book_RN_supertonic::after {
	width: 18px;
}

.bej_book_RN_mediant::before, .bej_book_RN_mediant::after {
	width: 24px;
}

.bej_book_RN_subdominant::before, .bej_book_RN_subdominant::after {
	width: 19px;
}

.bej_book_RN_dominant::before, .bej_book_RN_dominant::after {
	width: 10px;
}

.bej_book_RN_submediant::before, .bej_book_RN_submediant::after {
	width: 16px;
}

.bej_book_RN_leadingtone::before, .bej_book_RN_leadingtone::after {
	width: 25px;
} */

.bej_book_RN_3_row_bass_note
{
  position:relative;
  color:crimson;
	font-family: monospace;
	padding-top: 5px;
}

.bej_book_RN_3_row_bass_note::after
{
  content:"^";
	font-family: monospace;
  position: absolute;
  top: -1px;
  left: 0px;
  color:crimson;
}


@media(max-width: 1024px) 
    {
		button:hover, input[type="file" i]::-webkit-file-upload-button:hover
			{
				background-color:#03a9f4;
			}
		button:active, input[type="file" i]::-webkit-file-upload-button:hover
			{
				background-color:#03a9f4;
			}
	}
	
	@media(max-width: 767px) 
    {

		p	
			{
				margin: 0px 15px 0px 15px;
			}
	}