/*
|--------------------------------------------------
| MAIN STYLES ECHORDS
|--------------------------------------------------
|
*/
:root {
  --ws-font-family: "IBM Plex Mono", serif;
  --ws-logo-font-family: "Hepta Slab", serif;
  --ws-font-size: 16px;
}
:root, [data-bs-theme=light] {
  --ws-bg-body: #D6D2C1;
  --ws-bg-content: #f9f8f3;
  --ws-bg-content-2: #c9c5b4;
  --ws-bg-content-3: #D0CCBA;
  --ws-bg-overlay: #D6D2C1;
  --ws-bg-primary-subtle: #C5DEF8;
  --ws-bg-secondary-subtle: #E5E5E5;
  --ws-bg-success-subtle: #C5EABF;
  --ws-bg-danger-subtle: #F8C6C5;
  --ws-bg-warning-subtle: #EBF4C6;
  --ws-bg-info-subtle: #F8DFC5;
  --ws-bg-light-subtle: #F8F8F8;
  --ws-bg-dark-subtle: #BFC1C2;
  --ws-text-body-color: #111111;
  --ws-color-primary: #177BE5;
  --ws-color-primary-hover: #1469C3;
  --ws-color-secondary: #999999;
  --ws-color-secondary-hover: #828282;
  --ws-color-success: #18AA00;
  --ws-color-success-hover: #149100;
  --ws-color-danger: #E51A17;
  --ws-color-danger-hover: #C31614;
  --ws-color-info: #E58117;
  --ws-color-info-hover: #C36E14;
  --ws-color-warning: #B0D21B;
  --ws-color-warning-hover: #96b317;
  --ws-color-white: #FFFFFF;
  --ws-color-light: #E2E3E4;
  --ws-color-light-hover: #C0C1C2;
  --ws-color-dark: #01070D;
  --ws-color-dark-hover: #01060B;
  --ws-border-primary-subtle: #8BBDF2;
  --ws-border-secondary-subtle: #CCCCCC;
  --ws-border-success-subtle: #8CD580;
  --ws-border-danger-subtle: #F28D8B;
  --ws-border-warning-subtle: #D8E98D;
  --ws-border-info-subtle: #F2C08B;
  --ws-border-light-subtle: #F1F1F2;
  --ws-border-dark-subtle: #808386;
  --ws-border-light-color: #EEEEEE;
  --ws-border-light-hover-color: #DDDDDD;
  --ws-border-dark-color: #4a4a4a;
  --ws-bg-overlay: #01070D;
}
[data-bs-theme=dark] {
  --ws-bg-body: #182445;
  --ws-bg-content: #485064;
  --ws-bg-content-2: #303A55;
  --ws-bg-content-3: #242F4D;
  --ws-bg-overlay: #182445;
  --ws-text-body-color: #EEEEEE;
  --ws-color-primary: #D96039;
  --ws-color-secondary: #397B9E;
  --ws-color-success: #397B9E;
  --ws-color-danger: #182445;
  --ws-color-info: #E58117;
  --ws-color-warning: #26954F;
  --ws-color-white: #ffffff;
  --ws-color-light: #E46A42;
}

body {
  background: var(--ws-color-white);
  font-family: var(--ws-font-family);
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}
mark, .mark {
  padding: 0.1875em;
  color: var(--ws-text-body-color);
  background-color: var(--ws-bg-warning-subtle);
}
hr {
  border-color: var(--ws-border-light-hover-color);
}

/* PAGE CONTENT */
.page-content {
  margin-top: 4rem;
}
.page-content h1 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
.page-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* CHORD */
.song-content {
  margin: 1rem 0;
}
.song-content .subtitle {
  display: block;
  color: #999;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}
.line-song-wrap {
  position: relative;
}
.line-song-wrap .chords {
  position: absolute;
  top: -24px;
  max-width: 100%;
  line-height: 48px;
}
.line-song-wrap .chords .chord {
  position: relative;
}
.line-song-wrap .chords .space {
  width: .5em;
  display: inline-flex;
}
.line-song-wrap .chords .name {
  font-weight: 500;
  background: var(--ws-bg-light-subtle);
  position: absolute;
  top: -16px;
  left: 0;
  height: 24px;
  width: auto;
  margin-bottom: 0;
  padding: 4px;
  line-height: 1em;
  font-size: 1em;
  cursor: pointer;
}
.line-song-wrap .chords .chord .chord-scheme {
  position: absolute;
  left: calc(100% - 56px);
  bottom: 1.5rem;
  display: none;
  background: var(--ws-color-white);
  border: 1px solid var(--ws-border-light-color);
  transition: .4s;
  padding: 10px;
  z-index: 10;
}
.line-song-wrap .chords  .chord:hover .chord-scheme {
  display: block;
  text-align: center;
}
.line-song-wrap .song {
  line-height: 48px;
  margin-bottom: 0;
}
.line-song-wrap .chords .chord-block {
  display: inline;
}
.unique-chords .item {
  text-align: center;
}
.unique-chords .item .title {
  font-weight: 700;
}
.chord-scheme .strings {
  height: 20px;
}
.chord-scheme .strings .string {
  position: relative;
  width: 11px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 4px solid var(--ws-color-dark);
}
.chord-scheme .fret {
  height: 20px;
}
.chord-scheme .fret-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 20px;
  font-size: 12px;
}
.chord-scheme .fret .string {
  position: relative;
  width: 11px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--ws-color-light);
}
.chord-scheme .fret .string:before {
  content: "";
  position: absolute;
  left: 5px;
  background: #333;
  width: 1px;
  height: 20px;
}
.chord-scheme .string .dot.fill {
  width: 10px;
  height: 10px;
  background: var(--ws-color-dark);
  border-radius: 50%;
}
.chord-scheme .barre .string .dot.fill {
  width: 12px;
  height: 10px;
  border-radius: 0;
  background: var(--ws-color-primary);
  z-index: 1;
}
.quantity_inner * {
  box-sizing: border-box;    
}    
.quantity_inner {
  display: inline-flex;
  border-radius: 20px;
  border: 2px solid var(--ws-color-primary);
  position: relative;
  background: var(--ws-color-white);
  margin-bottom: 2rem;
  z-index: 1;
}        
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .bt_buy,
.quantity_inner .quantity {
  height: 32px;
  width: 32px;
  padding: 0;
  border: 0;
  margin: 0;
  background: var(--ws-color-white);
  cursor: pointer;
  outline: 0;
  border-radius: 20px;
}
.quantity_inner .bt_minus:hover,
.quantity_inner .bt_plus:hover {
  background: var(--ws-bg-primary-subtle);
}
.quantity_inner .bt_buy {
  background: var(--ws-color-primary);
  width: 60px;
  height: 36px;
  position: absolute;
  right: -46px;
  top: -2px;
  z-index: -1;
  border-radius: 0 20px 20px 0;
  border: 2px solid var(--ws-color-primary);
}
.quantity_inner .quantity {
  width: 42px;
  line-height: 34px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg,
.quantity_inner .bt_buy svg {
  stroke: var(--ws-color-primary);
  stroke-width: 4;
  transition: 0.5s;
  margin: 6px;
  fill: none;
  height: 20px;
  width: 20px;
}    
.quantity_inner .bt_buy svg {
  stroke: #BFE2FF;
  position: relative;
  left: 6px;
}
.quantity_inner .bt_buy i {
  color: var(--ws-color-white);
  font-size: 18px;
}   
.quantity_inner .bt_buy:hover svg {
  stroke: #FFF;
}
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
  stroke: #000;
}