:root {
    --fret-board-color: #be975b;
	--fret-marker-color: #806233;
	--tab-status-color: #ccffcc;
	--fretboard-height: 150;
	--fretboard-width: 1100;
	--number-of-strings: 6;
	--string-height: 7;
	--half-string-height: calc(var(--string-height)/2);
	--string-top-position: calc(var(--fretboard-height) / var(--number-of-strings) / 2 - var(--half-string-height));
	--double-fretmark-position-1: calc(var(--fretboard-height) * 0.25);
	--double-fretmark-position-2: calc(var(--fretboard-height) * 0.75);
	--note-dot-opacity: 0;
	--note-fret-background: teal;
	--editor-font-size: 16;

}

body {
	overflow: auto;
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: 0;
	margin-left: 0;
}

#tabStatus {
	background-color:var(--tab-status-color) ;
}

.nav-spacer {
	margin-top: 60px;
}

.main-cont {
	display: grid;
	width: 100%;
}

.input-cont {
	/* grid-area: 1 / 1 / 2 / 7; */
	display: grid;
	width: 98%;
	grid-template-columns: 2fr 3fr 3fr 3fr;
}
  
.fretboard-cont {
	/* grid-area: 2 / 1 / 3 / 7; */
	/* display: grid; */
	width: 100%;
	/* grid-template-columns: 3fr 1fr; */
}

/* .fb1 {
	grid-area: 1 / 1 / 2 / 2;
} */

/* .fb2 {
	grid-area: 1 / 2 / 2 / 3;
} */

.tabtext-cont {
	/* grid-area: 4 / 1 / 5 / 7; */
	width: 100%;
	height: 150px;
	overflow-x: hidden;
	overflow-y: auto;
	resize: vertical;
	min-width: 950px;
}



.tab-cont {
	/* grid-area: 5 / 1 / 6 / 7; */
	display: grid;
	width: 100%;
	height: 600px;
	overflow-x: hidden;
	overflow-y: auto;
	/*resize: vertical; */

	grid-template-columns: 1fr 5fr;
}

.tab1 {
	grid-area: 1 / 1 / 2 / 2;
}
.tab2 {
	grid-area: 1 / 2 / 2 / 3;
}
.tab3 {
	grid-area: 2 / 1 / 3 / 3;

	
}

.ql-editor {
	font-size: calc(var(--editor-font-size) * 1px);
	/* background-color: #e9e7e7; */
	border: 2px solid #f10808cc;
	width: 100%;
}

.grid-item {
    display: inline;
    border: 1px solid rgba(0, 0, 0, 0.8); 
    /* padding: 20px; */
    font-size: 14px;
}

.grid-item2 {
    display: inline;
    font-size: 14px;
}

.separator {
	font-size: small ;
	font-family: bradley hand, cursive;
	font-style: italic;
	width: 100%;
	align-items: center;
	text-align: center;
	color: #14c941;
	border-bottom: 1px solid #0a0a0a;
}
  
.fretboard {
	display: flex;
	flex-direction: column;
	background: var(--fret-board-color);
	/* width: calc(var(--fretboard-width) * 1px); */
	width: var(--fretboard-width);
	/* height: calc(var(--fretboard-height) * 1px); */
	height: var(--fretboard-height);
	margin-top: 0px;
	column-span: all;
	min-width: 950px; */
}

.fretboard-details {
	display: flex;
	flex-direction: column;
	height: 25px;
	width: calc(var(--fretboard-width) * 1px);
	margin-top: 0px;
	column-span: all;
	color: white;
	background-color: black;
	min-width: 950px; */
}

.string {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}
.string:before {
	content: '';
	width: 100%;
	height: calc(var(--string-height)*1px);
	background: linear-gradient(#eee, #999);
	z-index: 1;
	position: absolute;
	top: calc(var(--string-top-position) * 1px);
}
.note-fret {
	display: flex;
	flex: 1;
	border-right: 10px solid;
	border-image: linear-gradient(to left, #777, #bbb, #777) 1 100%;
	justify-content: center;
	align-items: center;
	position: relative;
}

.note-fret:first-child {
	background: #161717;
	/* min-width: 51px; */
	/* border-right: 10px solid;  */
	/* flex-grow: 0; */
	/* flex-shrink: 0; */
	border-image: linear-gradient(to left, #777, #bbb, #777) 1 100%;
}

.note-fret:before {
  font-size: small;
	content: attr(data-note);
	width: 25px;
	height: 25px;
	border-radius: 50%;
	line-height: 25px;
	text-align: center;
	background: var(--note-fret-background); 
	z-index: 2;
	color: #eee;
	opacity: var(--note-dot-opacity);
}

.fbDetail {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}
.fbDetail:before {
	content: '';
	width: 100%;
	height: 25;
	z-index: 1;
	position: absolute;
	top: 1px;
}

.fbDetail-data {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	position: relative;
}

.fbDetail-data:before {
	content: attr(fret);
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	z-index: 2;
	/* color: black; */
}

.single-fretmark:after,
.double-fretmark:before,
.double-fretmark:after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fret-marker-color);
}

.single-fretmark:after {
	top: calc(var(--fretboard-height)/2 *1px);
	transform: translate(0, -50%);
}

.double-fretmark:before {
	top: calc(var(--double-fretmark-position-1)*1px);
	transform: translate(-130%, -50%);
}

.double-fretmark:after {
	top: calc(var(--double-fretmark-position-2)*1px);
	transform: translate(-130%, -50%);
}


input, label {
	vertical-align: middle;
}


.tab-header-container {
	display: grid; 
	grid-template-columns: 1fr 5fr; 
}

.tab-data {
	display: grid;
}

.showInterval {
	margin-left: 20px;
	width: 380px;
}


.toggle-group {
    display: flex;
    gap: 0px;
}

.toggle-btn {
    /* padding: 10px 20px; */
    font-size: 12px;
	width: 35px;
    border: none;
    cursor: pointer;
    color: white;
    transition: opacity 0.3s ease;
	opacity: 0.4;
}

#btn0 {
    background-color: #ff0000;
}

#btn1 {
    background-color: #66ccff;
}

#btn2 {
    background-color: #008000;
}

#btn3 {
    background-color: #ff8040;
}

#btn4 {
    background-color: #0413c8;
}

#btn5 {
    background-color: #8000ff;
}

#btn6 {
    background-color: #ff00ff;
}

#btn7 {
    background-color: #646364;
}

#btn8 {
    background-color: #646364;
}

#btn9 {
    background-color: #646364;
}

#btn10 {
    background-color: #646364;
}

#btn11 {
    background-color: #646364;
}

#btn99 {
    background-color: #646364;
	width: 35px;
}


#c_btn0 {
    background-color: #ff0000;
}

#c_btn1 {
    background-color: #66ccff;
}

#c_btn2 {
    background-color: #008000;
}

#c_btn3 {
    background-color: #ff8040;
}

#c_btn4 {
    background-color: #0413c8;
}

#c_btn5 {
    background-color: #8000ff;
}

#c_btn6 {
    background-color: #ff00ff;
}

#c_btn7 {
    background-color: #646364;
}

#c_btn8 {
    background-color: #646364;
}

#c_btn9 {
    background-color: #646364;
}

#c_btn10 {
    background-color: #646364;
}

#c_btn11 {
    background-color: #646364;
}




.toggle-btn.active {
    opacity: 1; /* Indicates active state */
}


.aligned-label {
	font-size: small ;
	color: black;
	display: inline-block;
	width: 70px;
	text-align: left;
}

.chord1-label {
	font-size: small ;
	color: white;
	display: inline-block;
	background-color: #ff0000;
	width: 30px;
	text-align: left;
}
.chord2-label {
	font-size: small ;
	color: white;
	display: inline-block;
	background-color: #66ccff;
	width: 30px;
	text-align: left;
}
.chord3-label {
	font-size: small ;
	color: white;
	display: inline-block;
	background-color: #008000;
	width: 30px;
	text-align: left;
}
.chord4-label {
	font-size: small ;
	color: white;
	display: inline-block;
	background-color: #ff8040;
	width: 30px;
	text-align: left;
}
.chord5-label {
	font-size: small ;
	color: white;
	display: inline-block;
	background-color: #0413c8;
	width: 30px;
	text-align: left;
}
.chord6-label {
	font-size: small ;
	color: white;
	display: inline-block;
	background-color: #8000ff;
	width: 30px;
	text-align: left;
}
.chord7-label {
	font-size: small ;
	color: white;
	display: inline-block;
	background-color: #ff00ff;
	width: 30px;
	text-align: left;
}
 
  /* The slider itself */
.slider {
	width: 50px; /*Full-width */
	transition: opacity .2s;
}
  
  
.tabHeader {
	font-size: x-large;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
}
  
.btn-group {
	/* grid-area: 3 / 1 / 4 / 7; */
	display: flex;
	min-width: 950px;
	text-wrap: nowrap;

}

.btn-group button {
	background-color: DodgerBlue; /* Blue background */
	border: none; /* Remove borders */
	color: white; /* White text */
	/*padding: 12px 16px;*/ /* Some padding */
	padding: 8px 8.5px;
	font-size: 14px; /* Set a font size */
	cursor: pointer; /* Mouse pointer on hover */
}
  
.btn-group button:not(:last-child) {
	border-right: none; /* Prevent double borders */
}
  
/* Clear floats (clearfix hack) */
.btn-group:after {
	content: "";
	clear: both;
	display: table;
}
  
  /* Add a background color on hover */
.btn-group button:hover {
	background-color: RoyalBlue;
}
  
button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}