@font-face{font-family:'Raleway';font-style:normal;font-weight:400;src:local('Raleway-Regular'),url('../fonts/raleway-v12-latin-regular.woff2') format('woff2'),url('../fonts/raleway-v12-latin-regular.woff') format('woff')}/*!
  * Bootstrap V4 Simple Checkbox Switch - No Js (https://bootsnipp.com/snippets/GaxR2)
  * Author: pradeep330 (https://bootsnipp.com/pradeep330)
  * Licensed under MIT (https://bootsnipp.com/license)
  */.switch{position:relative;display:inline-block;width:54px;height:31px;float:right}.switch input{display:none}.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.switch .slider:before{position:absolute;content:"";height:23px;width:23px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s}.switch input.default:checked+.slider{background-color:#444}.switch input.primary:checked+.slider{background-color:#2196f3}.switch input.success:checked+.slider{background-color:#8bc31a}.switch input.info:checked+.slider{background-color:#3de0f5}.switch input.warning:checked+.slider{background-color:#ffc107}.switch input.danger:checked+.slider{background-color:#dc3545}.switch input:focus+.slider{box-shadow:0 0 1px #2196f3}.switch input:checked+.slider:before{-webkit-transform:translateX(23px);-ms-transform:translateX(23px);transform:translateX(23px)}.switch .slider.round{border-radius:31px}.switch .slider.round:before{border-radius:50%}/*! End of 'Bootstrap V4 Simple Checkbox Switch - No Js' snippet from Bootsnip */#loading{background-color:white;z-index:10;position:absolute;top:0;right:0;bottom:0;left:0}#loading div.center{width:120px;height:120px;position:absolute;left:50%;margin-left:-60px;margin-top:100px}#loading #hexShape{width:72px;height:72px;position:absolute;left:50%;margin-left:-36px;-webkit-animation:rotate 1s ease-in-out infinite;animation:rotate 1s ease-in-out infinite}#loading h5{margin-top:75%;-webkit-animation:opacity 2s ease-in-out infinite;animation:opacity 2s ease-in-out infinite}#loading .hexagon{position:absolute;width:13.86px;height:24px;background-color:#dc3545;padding:0 6.93px;margin:0;left:50%;top:50%;-webkit-animation:scale 2s ease-in-out 1s infinite;animation:scale 2s ease-in-out 1s infinite}#loading .hexagon:before,#loading .hexagon:after{content:"";position:absolute;width:0;border-top:12px solid transparent;border-bottom:12px solid transparent}#loading .hexagon:before{right:100%;border-right:6.93px solid #dc3545}#loading .hexagon:after{left:100%;width:0;border-left:6.93px solid #dc3545}#loading .h0{margin-top:-12px;margin-left:-6.93px;-webkit-animation-delay:0s;animation-delay:0s}#loading .h1{margin-top:-36px;margin-left:-6.93px}#loading .h2{margin-top:-24px;margin-left:13.42px}#loading .h3{margin-left:13.42px}#loading .h4{margin-top:12px;margin-left:-6.93px}#loading .h5{margin-left:-27.29px}#loading .h6{margin-top:-24px;margin-left:-27.29px}@keyframes scale{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.01);transform:scale(0.01)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes scale{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.01);transform:scale(0.01)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes opacity{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-webkit-keyframes opacity{0%{opacity:0}50%{opacity:1}100%{opacity:0}}html{position:relative;min-height:100%}body{margin-bottom:120px;min-width:420px;font-size:1rem}@media(min-width:580px){body{margin-bottom:90px}}.dropdown-item.active,.dropdown-item:active{background-color:#dc3545}div.alert.help{font-size:smaller;margin:0 auto;padding:.75rem;text-align:center;background-color:#fff;opacity:.8}h1,h2,h3,h4,h5,h6{font-family:Raleway,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}h6{font-size:1.125rem}/*!
 * Bootstrap v4 Gradient Buttons (https://codepen.io/cwestify/pen/dJObPq)
 * Copyright (c) 2019 by Chris West
 * Licensed under MIT (https://blog.codepen.io/legal/licensing/)
 */.btn,.bg-danger{background-image:linear-gradient(to bottom,rgba(255,255,255,0.5),rgba(255,255,255,0.2) 49%,rgba(0,0,0,0.15) 51%,rgba(0,0,0,0.05));background-repeat:repeat-x}/*! end of 'Bootstrap v4 Gradient Buttons' snippet */header .navbar{background:linear-gradient(90deg,#8b3545,#dc3545,#8b3545)}header .container-fluid,main{max-width:1340px}header .navbar-brand{padding:0}header .navbar-brand img{height:40px}main{padding:15px 0;position:relative}main p a,main ul li a{color:#dc3545}main p a:hover,main ul li a:hover{color:#bc1525}main div.table-of-contents{top:1rem;max-width:22rem;margin-left:auto;margin-right:auto}main div.table-of-contents .card-body{padding:1rem}main div.table-of-contents .nav-link{padding:.5rem}main div.table-of-contents .nav-pills .nav-link.active{background-color:#dc3545}main div.table-of-contents .nav-link span.oi{top:3px;margin-right:.33rem}main .unselectable{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}main .embed-responsive-progression{max-width:940px;margin:0 auto}main .embed-responsive-progression::before{padding-top:75%}.footer{position:absolute;bottom:0;background:linear-gradient(90deg,#8b3545,#9b3545,#8b3545);color:rgba(255,255,255,.5);padding:13px 0;width:100%;min-width:420px}.footer span{line-height:30px}@media(min-width:480px){.footer span#copyrightSymbol::before{content:"Copyright "}}span.flat-symbol+span.flat-symbol{margin-left:-3px}small span.flat-symbol+span.flat-symbol{margin-left:-2px}#htToolBar>*,#htToolBar #keyFields>*{margin-bottom:5px}#htToolBar #keyFields{margin-bottom:0}#htToolBar #keyFields #keyTonicInputGroup{width:110px}#htToolBar #keyFields #keyScaleInputGroup{width:200px}#htToolBar #keyFields #keyModeInputGroup{width:200px}@media(min-width:1120px){#htToolBar #keyFields #keyTonicInputGroup{width:114px}#htToolBar #keyFields #keyScaleInputGroup{width:240px}#htToolBar #keyFields #keyModeInputGroup{width:300px}}#htToolBar ul#keyDisplay{margin:3px 0 4px 0;padding:0}#htToolBar ul#keyDisplay li{opacity:.25;list-style-type:none;padding:0 5px}#htToolBar ul#keyDisplay li.highlight{opacity:1;font-weight:bold;text-shadow:0 0 6px #dc3545}#htToolBar button span.oi{width:14px}#htToolBar div#keyHarmony .modal-body{overflow:auto}#htToolBar div#keyHarmony .modal-dialog{max-width:95%}@media(min-width:1024px){#htToolBar div#keyHarmony .modal-dialog{max-width:90%}}@media(min-width:1200px){#htToolBar div#keyHarmony .modal-dialog{max-width:85%}}@media(min-width:1400px){#htToolBar div#keyHarmony .modal-dialog{max-width:80%}}#htToolBar div#keyHarmony table td,#htToolBar div#keyHarmony table th{font-weight:500;padding-left:.5rem;padding-right:.5rem}#htToolBar div#keyHarmony .chord .btn{font-size:1rem;min-width:64px;padding:7px 10px}#htToolBar div#soundSettings .form-row{padding:4px 0}#htToolBar div#soundSettings .form-group{margin:0;text-align:center}#htToolBar div#soundSettings input.dial{font-size:16px !important}#htToolBar div#soundSettings input#progressionTempo{font-size:14px !important}#htToolBar div#soundSettings form label{display:block;text-align:center}#htToolBar div#soundSettings form label.custom-control-label{text-align:left}#htToolBar #htMode label{margin-bottom:0}#htToolBar #htMode label[for]{line-height:31px}#htArea{display:flex;justify-content:center;flex-direction:column;margin:10px 0}@media(min-width:960px){#htArea{flex-direction:row}}.chord .btn{padding:5px;line-height:1.2em;min-width:80px}@media(min-width:992px){.chord .btn{min-width:100px;font-size:1.125rem}}#htSelection{margin:0 0 18px;background:transparent}@media(min-width:960px){#htSelection{width:290px;margin-left:-290px}}#htSelection .card-header{padding:8px 15px}#htSelection .card-header>h6{display:inline-block;line-height:31px;margin:0}#htSelection .card-header .btn{float:right}#htSelection .card-body{background-color:transparent;padding:10px 15px;display:flex;justify-content:flex-start}#htSelection .card-body>div{width:50%}#htSelection .card-body .card-title{margin:0 0 5px}#htSelection .card-body #pcTitle{margin-bottom:135px}@media(min-width:960px){#htSelection .card-header{padding:10px 15px}#htSelection .card-body{display:block}#htSelection .card-body>div{width:auto}#htSelection .card-body .card-title{margin-top:5px}#htSelection .card-body #pcTitle{margin-bottom:168px}}#htSelection #selectionVoicing{font-size:smaller}#htSelection #selectionVoicing em{opacity:.4}#htSelection #selectionNames{margin:5px auto;max-width:300px}#htSelection #selectionNames .carousel-item .ui-draggable-handle{cursor:move;cursor:-webkit-grab}#htSelection #selectionNames .carousel-item .ui-draggable-handle.ui-draggable-dragging{cursor:-webkit-grabbing}#htSelection #selectionNames .carousel-control-next,#htSelection #selectionNames .carousel-control-prev{width:10%}#htSelection #selectionNames .carousel-control-next-icon,#htSelection #selectionNames .carousel-control-prev-icon{filter:invert(.5)}#htSelection div.alert.help{display:none}@media(min-width:600px){#htSelection div.alert.help{max-width:260px}}@media(min-width:960px){#htSelection div.alert.help{max-width:none}}#chordProgressions .progression{border-radius:.25rem;padding:9px 15px;border:1px solid #eee}#chordProgressions .progression .input-group{width:auto;margin:6px 0}#chordProgressions h6{margin-bottom:2px}#chordProgressions ul.chords{padding:0;margin:0}#chordProgressions ul.chords li{list-style-type:none;margin:6px 15px 6px 0}#chordProgressions ul.chords li.ui-sortable-placeholder{border:1px dashed #dc3545;box-shadow:0 0 5px silver;visibility:visible !important}#chordProgressions ul.chords li.non-diatonic{filter:saturate(65%)}#chordProgressions ul.chords li a{transition:all .25s ease-in}#chordProgressions ul.chords li.playing a{color:darkred;background-color:white;box-shadow:0 .25rem .5rem rgba(139,0,0,.33);letter-spacing:1px;transition:all .25s ease-out}#chordProgressions button.btn{min-width:48px}#chordProgressions button.btn,#chordProgressions div.btn-wrapper{margin:6px 15px 6px 0}#chordProgressions .btn.trash{margin-left:auto;margin-right:0}#chordProgressions .btn.trash.ui-droppable-active{border-width:2px;border-style:dashed;-webkit-animation:trashPulse 2s ease-in-out infinite;animation:trashPulse 2s ease-in-out infinite}#chordProgressions #mainProgression{border-style:dashed;background-color:snow}#chordProgressions #mainProgression.ui-droppable-active{border-width:2px;-webkit-animation:mainProgressionPulse 2s ease-in-out infinite;animation:mainProgressionPulse 2s ease-in-out infinite}#chordProgressions #mainProgression.ui-droppable-active div.alert.help{opacity:0;transition:all .25s ease-out}#chordProgressions #parallelProgression{background-color:#fafffa}#chordProgressions #parallelProgression h6.title,#chordProgressions #parallelProgression label,#chordProgressions #parallelProgression ul.chords li{filter:hue-rotate(120deg)}#chordProgressions #negativeProgression{background-color:#212529}#chordProgressions #negativeProgression h6.title,#chordProgressions #negativeProgression label,#chordProgressions #negativeProgression ul.chords li{filter:invert(100%)}@keyframes mainProgressionPulse{50%{background-color:lightpink;border-color:darkred}}@-webkit-keyframes mainProgressionPulse{50%{background-color:lightpink;border-color:darkred}}@keyframes trashPulse{50%{background-color:lightpink;border-color:#dc3545}}@-webkit-keyframes trashPulse{50%{background-color:lightpink;border-color:#dc3545}}