| /*                                                                         |
| -------------------------------------------------------------------------- |
| RhythmCrest Guitar Chord Finder                                            |
| chord-finder.css                                                           |
| Version 1.0.0                                                              |
| -------------------------------------------------------------------------- |
|                                                                            |
| Designed specifically for the current chord-finder.js DOM structure.       |
| Visual design based on RhythmCrest Guitar Chord Map.                       |
|                                                                            |
| Copyright © 2026 RhythmCrest. All rights reserved.                         |
|                                                                            |
| This software may not be copied, redistributed, modified,                  |
| or used on another website without written permission from RhythmCrest.    |
| -------------------------------------------------------------------------- |
| */                                                                         |

| /*                                                                         |
| -------------------------------------------------------------------------- |
| ROOT APPLICATION                                                           |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder {


--rc-bg-1: #111827;
--rc-bg-2: #182235;

--rc-panel:
    rgba(255, 255, 255, 0.055);

--rc-panel-strong:
    rgba(255, 255, 255, 0.085);

--rc-border:
    rgba(255, 255, 255, 0.10);

--rc-text:
    #f5f7fb;

--rc-muted:
    #9ca8ba;

--rc-accent:
    #f5c84c;

--rc-accent-dark:
    #d9aa27;

--rc-string:
    #c8ced8;

--rc-fret:
    rgba(255, 255, 255, 0.18);

--rc-marker-text:
    #10151d;


width:
    min(1080px, calc(100% - 24px));

margin:
    24px auto;

padding:
    22px;

box-sizing:
    border-box;

position:
    relative;

overflow:
    hidden;

color:
    var(--rc-text);

background:
    radial-gradient(
        circle at 15% 10%,
        rgba(245, 200, 76, 0.08),
        transparent 32%
    ),
    radial-gradient(
        circle at 90% 90%,
        rgba(72, 108, 180, 0.12),
        transparent 35%
    ),
    linear-gradient(
        145deg,
        var(--rc-bg-1),
        var(--rc-bg-2)
    );

border:
    1px solid var(--rc-border);

border-radius:
    20px;

box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28);

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

	
}

}



| /*                                                                         |
| -------------------------------------------------------------------------- |
| BOX SIZING                                                                 |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder *,
.rhythmcrest-chord-finder *::before,
.rhythmcrest-chord-finder *::after {


box-sizing:
    border-box;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| HEADER / GENERAL EXISTING ELEMENTS                                         |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-header {


display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    20px;

padding-bottom:
    18px;

margin-bottom:
    14px;

border-bottom:
    1px solid var(--rc-border);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| SELECTED NOTES / FRETS PANEL                                               |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-selected {


display:
    grid;

grid-template-columns:
    1fr 1fr;

gap:
    10px;

margin-bottom:
    12px;


}

.rhythmcrest-chord-finder
.chord-finder-selected-notes,
.rhythmcrest-chord-finder
.chord-finder-selected-frets {


min-height:
    34px;

display:
    flex;

align-items:
    center;

padding:
    8px 12px;

color:
    var(--rc-muted);

background:
    var(--rc-panel);

border:
    1px solid var(--rc-border);

border-radius:
    9px;

font-size:
    11px;

font-weight:
    650;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| CLEAR BUTTON                                                               |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-clear {


appearance:
    none;

border:
    1px solid var(--rc-border);

background:
    rgba(255, 255, 255, 0.045);

color:
    #dfe5ee;

min-height:
    32px;

padding:
    0 14px;

border-radius:
    8px;

cursor:
    pointer;

font-family:
    inherit;

font-size:
    10px;

font-weight:
    700;

transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;


}

.rhythmcrest-chord-finder
.chord-finder-clear:hover {


background:
    rgba(255, 255, 255, 0.09);

border-color:
    rgba(255, 255, 255, 0.16);

color:
    #ffffff;


}

.rhythmcrest-chord-finder
.chord-finder-clear:active {


transform:
    scale(0.97);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FRETBOARD OUTER SECTION                                                    |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-fretboard {


width:
    100%;

margin-top:
    12px;

padding:
    14px;

background:
    rgba(7, 11, 18, 0.34);

border:
    1px solid var(--rc-border);

border-radius:
    14px;

overflow:
    hidden;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| GUITAR SCROLL AREA                                                         |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-guitar-scroll {


width:
    100%;

overflow-x:
    auto;

overflow-y:
    hidden;

-webkit-overflow-scrolling:
    touch;

scrollbar-width:
    thin;

scrollbar-color:
    rgba(245, 200, 76, 0.35)
    transparent;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| ACTUAL GUITAR                                                              |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-guitar {


position:
    relative;

width:
    100%;

min-width:
    640px;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FRET NUMBER HEADER                                                         |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-fret-header {


display:
    grid;

grid-template-columns:
    42px repeat(13, minmax(0, 1fr));

width:
    100%;

height:
    25px;

margin-bottom:
    2px;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| HEADER LABEL                                                               |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-header-label {


min-width:
    0;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FRET NUMBERS                                                               |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-fret-number {


display:
    flex;

align-items:
    center;

justify-content:
    center;

min-width:
    0;

color:
    rgba(255, 255, 255, 0.48);

font-size:
    9px;

font-weight:
    650;

line-height:
    1;

user-select:
    none;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| BOARD                                                                      |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-board {


position:
    relative;

width:
    100%;

min-height:
    246px;

padding-left:
    42px;

padding-top:
    7px;

padding-bottom:
    7px;

border-radius:
    8px;

background:
    linear-gradient(
        180deg,
        rgba(104, 67, 38, 0.18),
        rgba(44, 28, 18, 0.26)
    );

border:
    1px solid rgba(255, 255, 255, 0.08);

overflow:
    hidden;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| NUT                                                                        |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-nut {


position:
    absolute;

left:
    42px;

top:
    7px;

bottom:
    7px;

width:
    4px;

background:
    rgba(255, 255, 255, 0.38);

border-radius:
    2px;

z-index:
    3;

pointer-events:
    none;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FRET WIRES                                                                 |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-fret-wire {


position:
    absolute;

top:
    7px;

bottom:
    7px;

width:
    1px;

background:
    var(--rc-fret);

z-index:
    1;

pointer-events:
    none;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FRET WIRE POSITIONS                                                        |
| -------------------------------------------------------------------------- |
|                                                                            |
| 13 positions after the label:                                              |
| open + frets 1-12.                                                         |
|                                                                            |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="1"] {
left: calc(42px + (58px * 1));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="2"] {
left: calc(42px + (58px * 2));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="3"] {
left: calc(42px + (58px * 3));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="4"] {
left: calc(42px + (58px * 4));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="5"] {
left: calc(42px + (58px * 5));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="6"] {
left: calc(42px + (58px * 6));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="7"] {
left: calc(42px + (58px * 7));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="8"] {
left: calc(42px + (58px * 8));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="9"] {
left: calc(42px + (58px * 9));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="10"] {
left: calc(42px + (58px * 10));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="11"] {
left: calc(42px + (58px * 11));
}

.rhythmcrest-chord-finder
.chord-finder-fret-wire[data-fret="12"] {
left: calc(42px + (58px * 12));
}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| POSITION MARKERS                                                           |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position-marker {


position:
    absolute;

width:
    7px;

height:
    7px;

border-radius:
    50%;

background:
    rgba(255, 255, 255, 0.18);

z-index:
    2;

pointer-events:
    none;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| POSITION MARKER LOCATIONS                                                  |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position-marker[data-fret="3"] {
left: calc(42px + (58px * 2.5));
}

.rhythmcrest-chord-finder
.chord-finder-position-marker[data-fret="5"] {
left: calc(42px + (58px * 4.5));
}

.rhythmcrest-chord-finder
.chord-finder-position-marker[data-fret="7"] {
left: calc(42px + (58px * 6.5));
}

.rhythmcrest-chord-finder
.chord-finder-position-marker[data-fret="9"] {
left: calc(42px + (58px * 8.5));
}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| DOUBLE MARKER                                                              |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position-marker.double-marker {


width:
    7px;

height:
    7px;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| STRING ROW                                                                 |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-string {


position:
    relative;

display:
    grid;

grid-template-columns:
    42px repeat(13, minmax(0, 1fr));

width:
    100%;

height:
    38px;

z-index:
    4;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| STRING LABEL                                                               |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-string-name {


position:
    relative;

display:
    flex;

align-items:
    center;

justify-content:
    center;

color:
    #e8ecf3;

font-size:
    11px;

font-weight:
    800;

z-index:
    8;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| ACTUAL STRING LINE                                                         |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-string-line {


position:
    absolute;

left:
    42px;

right:
    0;

top:
    calc(50% - (var(--string-weight) / 2));

height:
    var(--string-weight);

background:
    linear-gradient(
        90deg,
        #8f949d,
        #d9dde4,
        #9298a1
    );

border-radius:
    10px;

opacity:
    0.78;

z-index:
    3;

pointer-events:
    none;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| CLICKABLE POSITION                                                         |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position {


appearance:
    none;

position:
    relative;

display:
    block;

width:
    100%;

height:
    38px;

min-width:
    0;

padding:
    0;

margin:
    0;

border:
    0;

border-left:
    1px solid var(--rc-fret);

background:
    transparent;

cursor:
    pointer;

z-index:
    7;

font-family:
    inherit;

color:
    inherit;

outline:
    none;

-webkit-tap-highlight-color:
    transparent;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FIRST POSITION / NUT                                                       |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position[data-fret="0"] {


border-left:
    3px solid rgba(255, 255, 255, 0.38);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| LAST FRET                                                                  |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position[data-fret="12"] {


border-right:
    2px solid rgba(255, 255, 255, 0.22);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| POSITION HOVER                                                             |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position:hover {


background:
    rgba(245, 200, 76, 0.055);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| POSITION ACTIVE                                                            |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position:active {


background:
    rgba(245, 200, 76, 0.10);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| MARKER                                                                     |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-marker {


position:
    absolute;

top:
    50%;

left:
    50%;

width:
    29px;

height:
    29px;

display:
    flex;

align-items:
    center;

justify-content:
    center;

transform:
    translate(-50%, -50%);

border-radius:
    50%;

background:
    transparent;

color:
    transparent;

z-index:
    9;

pointer-events:
    none;

transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| NOTE TEXT                                                                  |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-note {


font-size:
    10px;

font-weight:
    850;

line-height:
    1;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| SELECTED POSITION                                                          |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position.selected
.chord-finder-marker {


background:
    var(--rc-accent);

color:
    var(--rc-marker-text);

box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.28);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| SELECTED FRET VERTICAL HIGHLIGHT                                           |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position.selected::after {


content:
    "";

position:
    absolute;

left:
    50%;

top:
    0;

bottom:
    0;

width:
    1px;

transform:
    translateX(-50%);

background:
    rgba(245, 200, 76, 0.28);

z-index:
    4;

pointer-events:
    none;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| OPEN POSITION                                                              |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position.open
.chord-finder-marker {


width:
    23px;

height:
    23px;

border:
    1px solid rgba(245, 200, 76, 0.48);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| SELECTED OPEN POSITION                                                     |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position.open.selected
.chord-finder-marker {


border:
    0;

background:
    var(--rc-accent);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FOCUS                                                                      |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-position:focus-visible {


outline:
    2px solid var(--rc-accent);

outline-offset:
    -2px;

z-index:
    20;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| RESULTS                                                                    |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-results {


margin-top:
    14px;

padding:
    14px;

min-height:
    72px;

background:
    var(--rc-panel);

border:
    1px solid var(--rc-border);

border-radius:
    12px;

text-align:
    center;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| RESULT MESSAGE                                                             |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-result-message {


display:
    flex;

align-items:
    center;

justify-content:
    center;

min-height:
    45px;

color:
    var(--rc-muted);

font-size:
    11px;

font-weight:
    600;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| PRIMARY RESULT                                                             |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-primary-result {


display:
    flex;

flex-direction:
    column;

align-items:
    center;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| RESULT LABEL                                                               |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-result-label {


color:
    var(--rc-accent);

font-size:
    9px;

font-weight:
    750;

letter-spacing:
    0.12em;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| BIG CHORD NAME                                                             |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-chord-name {


margin-top:
    3px;

color:
    var(--rc-text);

font-size:
    30px;

font-weight:
    850;

line-height:
    1;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| FULL CHORD NAME                                                            |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-chord-type {


margin-top:
    5px;

color:
    var(--rc-muted);

font-size:
    11px;

font-weight:
    650;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| CHORD NOTES                                                                |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-chord-notes {


margin-top:
    7px;

color:
    #dfe5ee;

font-size:
    10px;

font-weight:
    650;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| PARTIAL CHORD                                                              |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-partial {


margin-top:
    7px;

padding:
    4px 9px;

color:
    var(--rc-accent);

background:
    rgba(245, 200, 76, 0.08);

border:
    1px solid rgba(245, 200, 76, 0.20);

border-radius:
    6px;

font-size:
    9px;

font-weight:
    650;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| OTHER RESULTS                                                              |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-other-results {


margin-top:
    12px;

padding-top:
    10px;

border-top:
    1px solid var(--rc-border);


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| OTHER RESULTS TITLE                                                        |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-other-title {


margin-bottom:
    7px;

color:
    var(--rc-muted);

font-size:
    9px;

font-weight:
    700;

letter-spacing:
    0.08em;

text-transform:
    uppercase;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| OTHER RESULT ITEM                                                          |
| -------------------------------------------------------------------------- |
| */                                                                         |

.rhythmcrest-chord-finder
.chord-finder-other-item {


display:
    inline-flex;

align-items:
    center;

justify-content:
    center;

min-width:
    48px;

height:
    27px;

margin:
    2px;

padding:
    0 9px;

color:
    #dfe5ee;

background:
    rgba(255, 255, 255, 0.045);

border:
    1px solid var(--rc-border);

border-radius:
    7px;

font-size:
    9px;

font-weight:
    700;


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| TABLET                                                                     |
| -------------------------------------------------------------------------- |
| */                                                                         |

@media (max-width: 800px) {


.rhythmcrest-chord-finder {

    width:
        calc(100% - 16px);

    margin:
        12px auto;

    padding:
        17px;

    border-radius:
        16px;

}


.rhythmcrest-chord-finder
.chord-finder-guitar {

    min-width:
        560px;

}


.rhythmcrest-chord-finder
.chord-finder-marker {

    width:
        27px;

    height:
        27px;

}


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| MOBILE                                                                     |
| -------------------------------------------------------------------------- |
| */                                                                         |

@media (max-width: 600px) {


.rhythmcrest-chord-finder {

    width:
        calc(100% - 10px);

    margin:
        5px auto;

    padding:
        12px;

    border-radius:
        14px;

}


.rhythmcrest-chord-finder
.chord-finder-selected {

    grid-template-columns:
        1fr;

    gap:
        5px;

}


.rhythmcrest-chord-finder
.chord-finder-fretboard {

    margin-top:
        9px;

    padding:
        8px;

}


/*
 * Important:
 * The guitar itself stays wide enough for usable
 * fret buttons, but ONLY the guitar scrolls.
 * The whole webpage does not become desktop-width.
 */

.rhythmcrest-chord-finder
.chord-finder-guitar-scroll {

    width:
        100%;

    max-width:
        100%;

    overflow-x:
        auto;

}


.rhythmcrest-chord-finder
.chord-finder-guitar {

    min-width:
        540px;

}


.rhythmcrest-chord-finder
.chord-finder-board {

    min-height:
        210px;

    padding-top:
        5px;

    padding-bottom:
        5px;

}


.rhythmcrest-chord-finder
.chord-finder-nut {

    top:
        5px;

    bottom:
        5px;

}


.rhythmcrest-chord-finder
.chord-finder-string {

    height:
        32px;

}


.rhythmcrest-chord-finder
.chord-finder-position {

    height:
        32px;

}


.rhythmcrest-chord-finder
.chord-finder-marker {

    width:
        23px;

    height:
        23px;

}


.rhythmcrest-chord-finder
.chord-finder-note {

    font-size:
        8px;

}


.rhythmcrest-chord-finder
.chord-finder-string-name {

    font-size:
        9px;

}


.rhythmcrest-chord-finder
.chord-finder-fret-number {

    font-size:
        7px;

}


.rhythmcrest-chord-finder
.chord-finder-chord-name {

    font-size:
        25px;

}


.rhythmcrest-chord-finder
.chord-finder-results {

    margin-top:
        9px;

    padding:
        10px;

}


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| VERY SMALL PHONES                                                          |
| -------------------------------------------------------------------------- |
| */                                                                         |

@media (max-width: 380px) {


.rhythmcrest-chord-finder {

    width:
        100%;

    margin:
        0;

    padding:
        9px;

    border-radius:
        10px;

}


.rhythmcrest-chord-finder
.chord-finder-fretboard {

    padding:
        6px;

}


.rhythmcrest-chord-finder
.chord-finder-guitar {

    min-width:
        500px;

}


.rhythmcrest-chord-finder
.chord-finder-string {

    height:
        29px;

}


.rhythmcrest-chord-finder
.chord-finder-position {

    height:
        29px;

}


.rhythmcrest-chord-finder
.chord-finder-marker {

    width:
        21px;

    height:
        21px;

}


.rhythmcrest-chord-finder
.chord-finder-chord-name {

    font-size:
        22px;

}


}

| /*                                                                         |
| -------------------------------------------------------------------------- |
| REDUCED MOTION                                                             |
| -------------------------------------------------------------------------- |
| */                                                                         |

@media (prefers-reduced-motion: reduce) {


.rhythmcrest-chord-finder *,
.rhythmcrest-chord-finder *::before,
.rhythmcrest-chord-finder *::after {

    transition:
        none !important;

    animation:
        none !important;

}


}