#circle-of-fifths table{border-collapse:collapse;table-layout:fixed;width:100%}#circle-of-fifths table,#circle-of-fifths td{border:1px solid #d9d9d9}#circle-of-fifths td,#circle-of-fifths th{padding:5px 10px}#circle-of-fifths th{text-align:left}#circle-of-fifths .chord{cursor:pointer;-webkit-user-select:none;user-select:none;transition-duration:.4s}#circle-of-fifths .chord:hover{background-color:#fff}#circle-of-fifths .chord-active{color:#fff}#circle-of-fifths .chord-active,#circle-of-fifths .chord-active:hover{background-color:#4a4a4a}#circle-of-fifths .harmony-table{margin-top:1rem}#circle-of-fifths .scale-degrees{table-layout:fixed}#circle-of-fifths .scale-degrees td{text-align:center;vertical-align:middle;padding:10px 0}#circle-of-fifths .modes-row{font-size:12px}#circle-of-fifths .scale-degrees tbody span{padding:0 1px;font-family:Opus Chords Std}#circle-of-fifths .harmony-hover{cursor:pointer;transition:all .3s}#circle-of-fifths .harmony-hover:hover{fill:#fff;opacity:.3}@media only screen and (width>=991px) and (width<=1024px){#circle-of-fifths .modes-row{display:none}}@media (width<=650px){#circle-of-fifths .modes-row{display:none}}#circle-of-fifths .buttons-module{padding-bottom:2rem;display:flex}#circle-of-fifths .buttons{-webkit-user-select:none;user-select:none;width:100%;margin:13px 0 0}#circle-of-fifths button{color:#000;cursor:pointer;white-space:nowrap;z-index:1;background:#f8f8f8;border:1px solid #eee;border-radius:4px;margin-right:8px;padding:8px 14px;font-family:Open Sans,sans-serif;font-size:14px;transition:all .25s}#circle-of-fifths button.active{background-color:#e4e4e4;border-color:#dadada}#circle-of-fifths button:hover{border-color:#dadada;box-shadow:0 5px 10px #0003}#circle-of-fifths .dropdown{display:inline-block;position:relative}#circle-of-fifths .dropdown ul{z-index:11;background-color:#fff;border-radius:4px;min-width:90px;padding-bottom:0;display:none;position:absolute;left:1px;box-shadow:0 8px 16px #0003}#circle-of-fifths .dropdown ul.active{display:block}#circle-of-fifths .dropdown ul li:first-child{border-radius:4px 4px 0 0}#circle-of-fifths .dropdown ul li:last-child{border-radius:0 0 4px 4px}#circle-of-fifths .dropdown ul li{cursor:pointer;text-align:left;white-space:nowrap;padding:10px 20px 10px 14px;font-family:Open Sans,sans-serif;font-size:13px}#circle-of-fifths .dropdown ul li:hover{background-color:#e1e1e1}#circle-of-fifths .dropdown ul li.active{background-color:#eee}@font-face{font-family:Helsinki Std;src:url(/build/assets/HelsinkiStd.f85c1aac30901379ed4c-Cic9m8ji.otf)format("truetype")}@font-face{font-family:Opus Chords Std;src:url(/build/assets/OpusChordsStd.6e24e53467c24cc2caa2-BzU-deap.otf)format("truetype")}#circle-of-fifths .circle-of-fifths svg{-webkit-user-select:none;user-select:none;-khtml-user-select:none}#circle-of-fifths .inner-circle{font-size:8px;font-weight:600}#circle-of-fifths .outer-circle{font-size:11px;font-weight:600}#circle-of-fifths .clef-sign{font-family:Helsinki Std;font-size:2.8rem}#circle-of-fifths .accidental-sign{font-family:Helsinki Std;font-size:3rem}#circle-of-fifths .--accidentals{font-family:Opus Chords Std}#circle-of-fifths .circle-of-fifths iframe{width:700px;height:1000px}