*:not(i) {
	font-family: Arial, sans-serif;
}

.e-none {
	pointer-events: none !important;
}

.bg-purple {
	background: rgb(157,54,148);
	background: radial-gradient(circle, rgba(157,54,148,1) 2%, rgba(147,63,139,1) 7%, rgba(102,41,97,1) 100%) !important;
}

.bg-light-purple { background-color: #8f4291 }

.bg-dark-purple {
	background: rgba(102,41,97,1)
}

.bg-light-gray {
	background: #ded8d8;
}

.bree-serif, .bree-serif a{
	font-family: 'Bree Serif', serif !important;
}

.montserrat, .montserrat a, .montserrat div{
	font-family: 'Montserrat', sans-serif !important;
}

.roboto{
	font-family: 'Roboto', sans-serif;
}

.hover-light-purple:hover { background-color: #c41ac7 }
.border-purple { border-color: #660066 }
.border-hover-purple:hover { border-color: #660066 }

.hover-light:hover {
	background-color: #F8F9FA;
}

.rounded-4 {
	border-radius: 8px;
}

.rounded-circle{
	border-radius: 50%;
}

.bg-banner {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.hover-light:hover {
	background-color: #f8f9fa !important;
}

.guitar-line {
	padding-top: 1em;
}
.line-up {
	padding-top: 1em;
}
[data-up] {
	position: relative;
}
[data-up]::before {
	content: attr(data-up);
	position: absolute;
	bottom: 1.1em;
	left: 0;
	white-space: nowrap;
	font-weight: bolder;
	font-size: .8em;
	color: #7E1180;
}
.chord-up {
	position: absolute;
	bottom: 1.1em;
	left: 0;
	white-space: nowrap;
	font-weight: bolder;
	font-size: .8em;
	color: #7E1180;
}

.line-down {
	padding-bottom: 1.3em;
}
[data-down] {
	position: relative;
}
[data-down]::after {
	content: attr(data-down);
	position: absolute;
	top: 1.1em;
	left: 0;
	white-space: nowrap;
	font-weight: bolder;
	font-size: 1em;
	color: #7E1180;
}
.chord-down {
	position: absolute;
	top: 1.1em;
	left: 0;
	white-space: nowrap;
	font-weight: bolder;
	font-size: 1em;
	color: #7E1180;
}


.elevado {
	font-size: 0.7em;
}

.ff-m, .ff-m * {
	font-family: monospace !important;
}

.ff-ab, .ff-ab * {
	font-family: Arial Black, sans-serif;
}

.ws-nw {
	white-space: nowrap;
}

.ls-1 {
	letter-spacing: -0.1em;
}

.ls-2 {
	letter-spacing: -0.05em;
}

.child-50 > div {
	width: 50%;
}

.session {
	border-width: 2px !important;
}

.text-purple {
	color: #7E1180;
}

.btn.btn-pink {
	background-color: #e02e68;
	color: white;
}

.double-column .session {
	max-width: 100%;
}

.double-column {
	width: 100%;
	column-count: 2;
	padding-left: 20px;
	padding-right: 20px;
	column-fill: balance;
}

.green-left{
	background-color: green;
	width: 10px;
}

.red-right{
	background-color: red;
	width: 10px;
}

.fw-bold{
	font-weight: bold;
}

@media screen and (max-width: 1140px) {
	.double-column {
		column-count: 1;
		padding-left: 100px;
		padding-right: 100px;
		column-fill: balance;
	}
}

@media screen and (max-width: 960px) {
	.double-column {
		column-count: 1;
		padding-left: 100px;
		padding-right: 0px;
		column-fill: balance;
	}
}

@media screen and (max-width: 720px) {
	.double-column {
		column-count: 1;
		padding-left: 0px;
		padding-right: 0px;
		column-fill: balance;
	}
}

.scrollable-container {
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-color: rgb(157,54,148);
	scrollbar-width: none;
}

.scrollable-container::-webkit-scrollbar {
	display: none
}
.scrollable-container.show::-webkit-scrollbar {
	height: 8px;
}

.scrollable-container::-webkit-scrollbar-thumb {
	background-color: rgb(157,54,148);
	border-radius: 5px;
}

.scrollable-container::-webkit-scrollbar-track {
	background-color: #f3e5f5;
}

.chord-modal {
	cursor: pointer;
}

.chord-modal-image {
}

.chord-modal-inner {
	position: relative;
}

.chord-modal-detalhe {
	position: absolute;
	top: calc(100% - 4px);
	left: 0;

	width: 100%;
	display: flex;
	justify-content: center;
}

.chord-modal-seta {
	width: 8px;
	height: 8px;
	transform: rotate(45deg);
}

.owl-theme .owl-dots {
	margin: 0px !important;
}

.owl-theme .owl-dots .owl-dot span {
	width: 6px !important;
	height: 6px !important;
	margin: 5px 3px !important;
}

@media (max-width: 767px) {
	.artist-link {
			padding: 0 5px;
	}
	.artist-link::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 767px) {
	#searchIcon,
	#searchIconLarge {
			cursor: pointer;
			display: flex;
			padding-right: 30px;
	}

	#searchIconLarge,
	#searchCollapse {
			display: none;
	}
	
	#searchIcon.show,
	#searchCollapse.show {
		display: flex;
		flex-direction: row; 
		align-items: center; 
	}

	.d-md-none .collapse.show {
		display: flex;
		flex-direction: row; 
		align-items: center; 
	}

	#header-icons {
		align-items: center;
	}
}

span.space {
    display: inline-block;
    width: 0.4em;
}

.fixed-youtube {
	position: fixed;
	width: 250px;
	top: calc(100vh - 200px);
	left: calc(100vw - 330px);
}

#col-not-visualizer > .inner {
	position: sticky;
	top: 80px;
}

.max-width-300 {max-width: 300px}

#col-visualizer {
	max-width: calc(50% - 60px);
}
@media screen and (max-width: 991px) {
#col-visualizer {
	max-width: 100%;
}
}
#col-visualizer.double-column {
	max-width: calc(100% - 120px);
}

.cifra-actions-aside {
	width: 100px;
	position: sticky;
	top: 80px;
}

.min-height-idk {
	min-height: calc(100vh - 345px);
}

.text-gray { color: gray }



[data-pin] {
	color: transparent;
	position: relative;
	cursor: pointer;
	box-shadow: inset 0 0 1px gray;
}

[data-pin]:hover {
	background: orange;
}

[data-pin]::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: purple;
	font-weight: bold;
	z-index: 2;
	white-space: nowrap;
}

[data-pins-up]   [data-pin]::before { font-size: 12.8px }
[data-pins-down] [data-pin]::before { font-size: 16.0px }


.line-remove-up .chord-up { bottom: 0; }

.line-remove-down .chord-down { top: 0; }


[data-placeholder]:empty::before { content: attr(data-placeholder) }

#top-genres {
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
}



.pretty-purple-scroll {
  scrollbar-color: purple #f5f5f5; /* Purple thumb and light gray track */
  scrollbar-width: thin; /* For Firefox */
  border-radius: 3px; /* Rounded corners */
}

.pretty-purple-scroll::-webkit-scrollbar {
  width: 6px; /* Width of the entire scrollbar */
  border-radius: 3px; /* Rounded corners */
}

.pretty-purple-scroll::-webkit-scrollbar-thumb {
  background-color: purple; /* Color of the scroll thumb */
  border-radius: 3px; /* Rounded corners */
}

.pretty-purple-scroll::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* Color of the scroll track */
  border-radius: 3px; /* Rounded corners */
}

.btn:focus { outline: none !important; }



#metronome {
	position: relative;
}

#metronome.hidden {
	display: none;
}

[data-metronome-displayer] {
	display: flex;
	gap: 4px;
	padding-top: 4px;
	flex-wrap: wrap;
	justify-content: center;
}
.beepBall {
	width: 16px;
	height: 16px;
	border: 1px solid gray;
	border-radius: 50%;
	background: purple;
	box-shadow: inset 0 0 0 8px white;
	transition: box-shadow 100ms ease-in-out;
}
.beepBall.beeping {
	box-shadow: inset 0 0 0 2px white;
}
.beepBall#beep-0 {
	background: purple;
}
/*
#metronome .settings {
	position: absolute;
	top: 0;
	left: 100%;
	width: 150px;
}
*/


.capo-row:hover {}
.capo-row:hover .capo-dot { display: none !important }
.capo-row:hover .capo-number { color: black !important }
.capo-row .capo-hover { display: none !important; cursor: pointer }
.capo-row:hover .capo-hover { display: block !important }

.capo-row.selected .capo-dot { display: none !important }
.capo-row.selected .capo-number { color: purple !important }
.capo-row.selected .capo-hover { display: none !important }
.capo-row					 .capo-selected { display: none !important }
.capo-row.selected .capo-selected { display: block !important }
.capo-row					 .capo-remove { display: none !important }
.capo-row.selected .capo-remove { display: inline-block !important }


.form-check-input:checked {
  background-color: purple;
  border-color: purple;
}