From 0df6cc0979cbed154e55673ea2632f157da82aaf Mon Sep 17 00:00:00 2001 From: Kevin Hoff Date: Fri, 22 Mar 2024 23:40:08 -0400 Subject: [PATCH] Integrate with harmonic-mixer's new color palette --- ...{index-DBq4P_g5.css => index-CzEWiWvj.css} | 2 +- .../{index-Be4T2QmA.js => index-DbKIMe2Q.js} | 2 +- dist/index.html | 4 +- src/app/CamelotOutput.jsx | 8 +- src/app/CamelotPicker.jsx | 4 +- src/scss/custom.scss | 219 ++++++++++++++++++ 6 files changed, 229 insertions(+), 10 deletions(-) rename dist/assets/{index-DBq4P_g5.css => index-CzEWiWvj.css} (92%) rename dist/assets/{index-Be4T2QmA.js => index-DbKIMe2Q.js} (96%) diff --git a/dist/assets/index-DBq4P_g5.css b/dist/assets/index-CzEWiWvj.css similarity index 92% rename from dist/assets/index-DBq4P_g5.css rename to dist/assets/index-CzEWiWvj.css index 24dbc00..dc18588 100644 --- a/dist/assets/index-DBq4P_g5.css +++ b/dist/assets/index-CzEWiWvj.css @@ -1 +1 @@ -@charset "UTF-8";@import"https://fonts.googleapis.com/css?family=Lato:400,700,400italic";*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:.9375rem;font-weight:400;line-height:1.5;color:#fff;text-align:left;background-color:#222}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#00bc8c;text-decoration:none;background-color:transparent}a:hover{color:#007053;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#999;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}h1,.h1{font-size:3rem}h2,.h2{font-size:2.5rem}h3,.h3{font-size:2rem}h4,.h4{font-size:1.40625rem}h5,.h5{font-size:1.171875rem}h6,.h6{font-size:.9375rem}.lead{font-size:1.171875rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}small,.small{font-size:.875em;font-weight:400}mark,.mark{padding:.2em;background-color:#fcf8e3}.list-unstyled,.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.171875rem}.blockquote-footer{display:block;font-size:.875em;color:#999}.blockquote-footer:before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#222;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#999}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#222;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:inherit}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){.container-sm,.container{max-width:540px}}@media (min-width: 768px){.container-md,.container-sm,.container{max-width:720px}}@media (min-width: 992px){.container-lg,.container-md,.container-sm,.container{max-width:960px}}@media (min-width: 1200px){.container-xl,.container-lg,.container-md,.container-sm,.container{max-width:1140px}}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col-xl,.col-xl-auto,.col-xl-12,.col-xl-11,.col-xl-10,.col-xl-9,.col-xl-8,.col-xl-7,.col-xl-6,.col-xl-5,.col-xl-4,.col-xl-3,.col-xl-2,.col-xl-1,.col-lg,.col-lg-auto,.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1,.col-md,.col-md-auto,.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1,.col-sm,.col-sm-auto,.col-sm-12,.col-sm-11,.col-sm-10,.col-sm-9,.col-sm-8,.col-sm-7,.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1,.col,.col-auto,.col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-1>*{flex:0 0 100%;max-width:100%}.row-cols-2>*{flex:0 0 50%;max-width:50%}.row-cols-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-4>*{flex:0 0 25%;max-width:25%}.row-cols-5>*{flex:0 0 20%;max-width:20%}.row-cols-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-12{flex:0 0 100%;max-width:100%}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}@media (min-width: 576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-sm-1>*{flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-sm-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-sm-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-sm-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-sm-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}}@media (min-width: 768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-md-1>*{flex:0 0 100%;max-width:100%}.row-cols-md-2>*{flex:0 0 50%;max-width:50%}.row-cols-md-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-md-4>*{flex:0 0 25%;max-width:25%}.row-cols-md-5>*{flex:0 0 20%;max-width:20%}.row-cols-md-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}.col-md-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-md-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-md-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-md-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-md-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}}@media (min-width: 992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-lg-1>*{flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-lg-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-lg-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-lg-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-lg-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}}@media (min-width: 1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-xl-1>*{flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-xl-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-xl-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-xl-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-xl-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}}.btn{display:inline-block;font-weight:400;color:#fff;text-align:center;vertical-align:middle;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:.9375rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion: reduce){.btn{transition:none}}.btn:hover{color:#fff;text-decoration:none}.btn:focus,.btn.focus{outline:0;box-shadow:0 0 0 .2rem #375a7f40}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-primary:hover{color:#fff;background-color:#2b4764;border-color:#28415b}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#2b4764;border-color:#28415b;box-shadow:0 0 0 .2rem #55739280}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#28415b;border-color:#243a53}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #55739280}.btn-secondary{color:#fff;background-color:#444;border-color:#444}.btn-secondary:hover{color:#fff;background-color:#313131;border-color:#2b2b2b}.btn-secondary:focus,.btn-secondary.focus{color:#fff;background-color:#313131;border-color:#2b2b2b;box-shadow:0 0 0 .2rem #60606080}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#444;border-color:#444}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#2b2b2b;border-color:#242424}.btn-secondary:not(:disabled):not(.disabled):active:focus,.btn-secondary:not(:disabled):not(.disabled).active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #60606080}.btn-success{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-success:hover{color:#fff;background-color:#009670;border-color:#008966}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#009670;border-color:#008966;box-shadow:0 0 0 .2rem #26c69d80}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-success:not(:disabled):not(.disabled):active,.btn-success:not(:disabled):not(.disabled).active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#008966;border-color:#007c5d}.btn-success:not(:disabled):not(.disabled):active:focus,.btn-success:not(:disabled):not(.disabled).active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #26c69d80}.btn-info{color:#fff;background-color:#3498db;border-color:#3498db}.btn-info:hover{color:#fff;background-color:#2384c6;border-color:#217dbb}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#2384c6;border-color:#217dbb;box-shadow:0 0 0 .2rem #52a7e080}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#3498db;border-color:#3498db}.btn-info:not(:disabled):not(.disabled):active,.btn-info:not(:disabled):not(.disabled).active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#217dbb;border-color:#1f76b0}.btn-info:not(:disabled):not(.disabled):active:focus,.btn-info:not(:disabled):not(.disabled).active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #52a7e080}.btn-warning{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-warning:hover{color:#fff;background-color:#d4860b;border-color:#c87f0a}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#d4860b;border-color:#c87f0a;box-shadow:0 0 0 .2rem #f5ab3680}.btn-warning.disabled,.btn-warning:disabled{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-warning:not(:disabled):not(.disabled):active,.btn-warning:not(:disabled):not(.disabled).active,.show>.btn-warning.dropdown-toggle{color:#fff;background-color:#c87f0a;border-color:#bc770a}.btn-warning:not(:disabled):not(.disabled):active:focus,.btn-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #f5ab3680}.btn-danger{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-danger:hover{color:#fff;background-color:#e12e1c;border-color:#d62c1a}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#e12e1c;border-color:#d62c1a;box-shadow:0 0 0 .2rem #eb675980}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-danger:not(:disabled):not(.disabled):active,.btn-danger:not(:disabled):not(.disabled).active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#d62c1a;border-color:#ca2a19}.btn-danger:not(:disabled):not(.disabled):active:focus,.btn-danger:not(:disabled):not(.disabled).active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #eb675980}.btn-light{color:#fff;background-color:#303030;border-color:#303030}.btn-light:hover{color:#fff;background-color:#1d1d1d;border-color:#171717}.btn-light:focus,.btn-light.focus{color:#fff;background-color:#1d1d1d;border-color:#171717;box-shadow:0 0 0 .2rem #4f4f4f80}.btn-light.disabled,.btn-light:disabled{color:#fff;background-color:#303030;border-color:#303030}.btn-light:not(:disabled):not(.disabled):active,.btn-light:not(:disabled):not(.disabled).active,.show>.btn-light.dropdown-toggle{color:#fff;background-color:#171717;border-color:#101010}.btn-light:not(:disabled):not(.disabled):active:focus,.btn-light:not(:disabled):not(.disabled).active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #4f4f4f80}.btn-dark{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-dark:hover{color:#fff;background-color:#98a2ac;border-color:#919ca6}.btn-dark:focus,.btn-dark.focus{color:#fff;background-color:#98a2ac;border-color:#919ca6;box-shadow:0 0 0 .2rem #989fa680}.btn-dark.disabled,.btn-dark:disabled{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-dark:not(:disabled):not(.disabled):active,.btn-dark:not(:disabled):not(.disabled).active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#919ca6;border-color:#8a95a1}.btn-dark:not(:disabled):not(.disabled):active:focus,.btn-dark:not(:disabled):not(.disabled).active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #989fa680}.btn-outline-primary{color:#375a7f;border-color:#375a7f}.btn-outline-primary:hover{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem #375a7f80}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#375a7f;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #375a7f80}.btn-outline-secondary{color:#444;border-color:#444}.btn-outline-secondary:hover{color:#fff;background-color:#444;border-color:#444}.btn-outline-secondary:focus,.btn-outline-secondary.focus{box-shadow:0 0 0 .2rem #44444480}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#444;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#444;border-color:#444}.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #44444480}.btn-outline-success{color:#00bc8c;border-color:#00bc8c}.btn-outline-success:hover{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-outline-success:focus,.btn-outline-success.focus{box-shadow:0 0 0 .2rem #00bc8c80}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#00bc8c;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled):active,.btn-outline-success:not(:disabled):not(.disabled).active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-outline-success:not(:disabled):not(.disabled):active:focus,.btn-outline-success:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #00bc8c80}.btn-outline-info{color:#3498db;border-color:#3498db}.btn-outline-info:hover{color:#fff;background-color:#3498db;border-color:#3498db}.btn-outline-info:focus,.btn-outline-info.focus{box-shadow:0 0 0 .2rem #3498db80}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#3498db;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled):active,.btn-outline-info:not(:disabled):not(.disabled).active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#3498db;border-color:#3498db}.btn-outline-info:not(:disabled):not(.disabled):active:focus,.btn-outline-info:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #3498db80}.btn-outline-warning{color:#f39c12;border-color:#f39c12}.btn-outline-warning:hover{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-outline-warning:focus,.btn-outline-warning.focus{box-shadow:0 0 0 .2rem #f39c1280}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#f39c12;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled):active,.btn-outline-warning:not(:disabled):not(.disabled).active,.show>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #f39c1280}.btn-outline-danger{color:#e74c3c;border-color:#e74c3c}.btn-outline-danger:hover{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-outline-danger:focus,.btn-outline-danger.focus{box-shadow:0 0 0 .2rem #e74c3c80}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#e74c3c;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled):active,.btn-outline-danger:not(:disabled):not(.disabled).active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #e74c3c80}.btn-outline-light{color:#303030;border-color:#303030}.btn-outline-light:hover{color:#fff;background-color:#303030;border-color:#303030}.btn-outline-light:focus,.btn-outline-light.focus{box-shadow:0 0 0 .2rem #30303080}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#303030;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled):active,.btn-outline-light:not(:disabled):not(.disabled).active,.show>.btn-outline-light.dropdown-toggle{color:#fff;background-color:#303030;border-color:#303030}.btn-outline-light:not(:disabled):not(.disabled):active:focus,.btn-outline-light:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #30303080}.btn-outline-dark{color:#adb5bd;border-color:#adb5bd}.btn-outline-dark:hover{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-outline-dark:focus,.btn-outline-dark.focus{box-shadow:0 0 0 .2rem #adb5bd80}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#adb5bd;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled):active,.btn-outline-dark:not(:disabled):not(.disabled).active,.show>.btn-outline-dark.dropdown-toggle{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #adb5bd80}.btn-link{font-weight:400;color:#00bc8c;text-decoration:none}.btn-link:hover{color:#007053;text-decoration:underline}.btn-link:focus,.btn-link.focus{text-decoration:underline}.btn-link:disabled,.btn-link.disabled{color:#999;pointer-events:none}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.171875rem;line-height:1.5;border-radius:.3rem}.btn-sm,.btn-group-sm>.btn{padding:.25rem .5rem;font-size:.8203125rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;flex:1 1 auto}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover{z-index:1}.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn.active{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:not(:first-child),.btn-group>.btn-group:not(:first-child){margin-left:-1px}.btn-group>.btn:not(:last-child):not(.dropdown-toggle),.btn-group>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:not(:first-child),.btn-group>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split:after,.dropup .dropdown-toggle-split:after,.dropright .dropdown-toggle-split:after{margin-left:0}.dropleft .dropdown-toggle-split:before{margin-right:0}.btn-sm+.dropdown-toggle-split,.btn-group-sm>.btn+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),.btn-group-vertical>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.table{width:100%;margin-bottom:1rem;color:#fff}.table th,.table td{padding:.75rem;vertical-align:top;border-top:1px solid #444}.table thead th{vertical-align:bottom;border-bottom:2px solid #444}.table tbody+tbody{border-top:2px solid #444}.table-sm th,.table-sm td{padding:.3rem}.table-bordered,.table-bordered th,.table-bordered td{border:1px solid #444}.table-bordered thead th,.table-bordered thead td{border-bottom-width:2px}.table-borderless th,.table-borderless td,.table-borderless thead th,.table-borderless tbody+tbody{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:#303030}.table-hover tbody tr:hover{color:#fff;background-color:#00000013}.table-primary,.table-primary>th,.table-primary>td{background-color:#c7d1db}.table-primary th,.table-primary td,.table-primary thead th,.table-primary tbody+tbody{border-color:#97a9bc}.table-hover .table-primary:hover{background-color:#b7c4d1}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#b7c4d1}.table-secondary,.table-secondary>th,.table-secondary>td{background-color:#cbcbcb}.table-secondary th,.table-secondary td,.table-secondary thead th,.table-secondary tbody+tbody{border-color:#9e9e9e}.table-hover .table-secondary:hover{background-color:#bebebe}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#bebebe}.table-success,.table-success>th,.table-success>td{background-color:#b8ecdf}.table-success th,.table-success td,.table-success thead th,.table-success tbody+tbody{border-color:#7adcc3}.table-hover .table-success:hover{background-color:#a4e7d6}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#a4e7d6}.table-info,.table-info>th,.table-info>td{background-color:#c6e2f5}.table-info th,.table-info td,.table-info thead th,.table-info tbody+tbody{border-color:#95c9ec}.table-hover .table-info:hover{background-color:#b0d7f1}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#b0d7f1}.table-warning,.table-warning>th,.table-warning>td{background-color:#fce3bd}.table-warning th,.table-warning td,.table-warning thead th,.table-warning tbody+tbody{border-color:#f9cc84}.table-hover .table-warning:hover{background-color:#fbd9a5}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#fbd9a5}.table-danger,.table-danger>th,.table-danger>td{background-color:#f8cdc8}.table-danger th,.table-danger td,.table-danger thead th,.table-danger tbody+tbody{border-color:#f3a29a}.table-hover .table-danger:hover{background-color:#f5b8b1}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f5b8b1}.table-light,.table-light>th,.table-light>td{background-color:#c5c5c5}.table-light th,.table-light td,.table-light thead th,.table-light tbody+tbody{border-color:#939393}.table-hover .table-light:hover{background-color:#b8b8b8}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#b8b8b8}.table-dark,.table-dark>th,.table-dark>td{background-color:#e8eaed}.table-dark th,.table-dark td,.table-dark thead th,.table-dark tbody+tbody{border-color:#d4d9dd}.table-hover .table-dark:hover{background-color:#dadde2}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#dadde2}.table-hover .table-active:hover{background-color:#00000013}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:#00000013}.table .thead-dark th{color:#222;background-color:#adb5bd;border-color:#98a2ac}.table .thead-light th{color:#444;background-color:#ebebeb;border-color:#444}.table-dark{color:#222;background-color:#adb5bd}.table-dark th,.table-dark td,.table-dark thead th{border-color:#98a2ac}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:#ffffff0d}.table-dark.table-hover tbody tr:hover{color:#222;background-color:#ffffff13}@media (max-width: 575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-sm>.table-bordered{border:0}}@media (max-width: 767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-md>.table-bordered{border:0}}@media (max-width: 991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-lg>.table-bordered{border:0}}@media (max-width: 1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table-bordered{border:0}.bg-primary .navbar-nav .active>.nav-link{color:#00bc8c!important}.bg-dark{background-color:#00bc8c!important}.bg-dark.navbar-dark .navbar-nav .nav-link:focus,.bg-dark.navbar-dark .navbar-nav .nav-link:hover,.bg-dark.navbar-dark .navbar-nav .active>.nav-link{color:#375a7f!important}.blockquote-footer{color:#999}.table-primary,.table-primary>th,.table-primary>td{background-color:#375a7f}.table-secondary,.table-secondary>th,.table-secondary>td{background-color:#444}.table-light,.table-light>th,.table-light>td{background-color:#303030}.table-dark,.table-dark>th,.table-dark>td{background-color:#adb5bd}.table-success,.table-success>th,.table-success>td{background-color:#00bc8c}.table-info,.table-info>th,.table-info>td{background-color:#3498db}.table-danger,.table-danger>th,.table-danger>td{background-color:#e74c3c}.table-warning,.table-warning>th,.table-warning>td{background-color:#f39c12}.table-active,.table-active>th,.table-active>td{background-color:#00000013}.table-hover .table-primary:hover,.table-hover .table-primary:hover>th,.table-hover .table-primary:hover>td{background-color:#2f4d6d}.table-hover .table-secondary:hover,.table-hover .table-secondary:hover>th,.table-hover .table-secondary:hover>td{background-color:#373737}.table-hover .table-light:hover,.table-hover .table-light:hover>th,.table-hover .table-light:hover>td{background-color:#232323}.table-hover .table-dark:hover,.table-hover .table-dark:hover>th,.table-hover .table-dark:hover>td{background-color:#9fa8b2}.table-hover .table-success:hover,.table-hover .table-success:hover>th,.table-hover .table-success:hover>td{background-color:#00a379}.table-hover .table-info:hover,.table-hover .table-info:hover>th,.table-hover .table-info:hover>td{background-color:#258cd1}.table-hover .table-danger:hover,.table-hover .table-danger:hover>th,.table-hover .table-danger:hover>td{background-color:#e43725}.table-hover .table-warning:hover,.table-hover .table-warning:hover>th,.table-hover .table-warning:hover>td{background-color:#e08e0b}.table-hover .table-active:hover,.table-hover .table-active:hover>th,.table-hover .table-active:hover>td{background-color:#00000013}.input-group-addon{color:#fff}.nav-tabs .nav-link,.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:focus,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-item.open .nav-link,.nav-tabs .nav-item.open .nav-link:focus,.nav-tabs .nav-item.open .nav-link:hover,.nav-pills .nav-link,.nav-pills .nav-link.active,.nav-pills .nav-link.active:focus,.nav-pills .nav-link.active:hover,.nav-pills .nav-item.open .nav-link,.nav-pills .nav-item.open .nav-link:focus,.nav-pills .nav-item.open .nav-link:hover{color:#fff}.breadcrumb a{color:#fff}.pagination a:hover{text-decoration:none}.close{opacity:.4}.close:hover,.close:focus{opacity:1}.alert{border:none;color:#fff}.alert a,.alert .alert-link{color:#fff;text-decoration:underline}.alert-primary{background-color:#375a7f}.alert-secondary{background-color:#444}.alert-success{background-color:#00bc8c}.alert-info{background-color:#3498db}.alert-warning{background-color:#f39c12}.alert-danger{background-color:#e74c3c}.alert-light{background-color:#303030}.alert-dark{background-color:#adb5bd}.list-group-item-action{color:#fff}.list-group-item-action:hover,.list-group-item-action:focus{background-color:#444;color:#fff}.list-group-item-action .list-group-item-heading{color:#fff}body{margin:0;padding:0;font-family:sans-serif}footer{text-align:center}div#root{justify-content:center}.CamelotPicker{width:800px;display:grid;grid-template-rows:3;grid-template-columns:6}.CamelotPicker button{display:block;width:100%}.labeling{grid-row:4;grid-column:1/span 6}.letters{grid-row:1;grid-column:1/span 6}.letters.btn-group>.btn{border-top-left-radius:0;border-top-right-radius:0}.letters.top>.btn{border-bottom-left-radius:0;border-bottom-right-radius:0}.numbers{grid-row:span 2;grid-column:span 6}.numbers.middle>.btn{border-radius:0}.numbers.btn-group>.btn{border-top-left-radius:0;border-top-right-radius:0}.btn-group{border-bottom:1px solid gray}.btn-group:last-child{border-bottom:none}.btn-group .btn{border-right:1px solid gray;margin-right:1px}.btn-group .btn:active{border-right:1px solid gray}.btn-group .btn:last-child{border-right:none;margin-right:0}button,button:focus,.btn:focus,.btn.focus,.btn-info:focus,.btn-info.focus{box-shadow:none;outline:none}hr{background-color:#fff}span.camelot-notation{font-size:1.2rem}span.chromatic-notation{font-size:.8rem}.CamelotOutput{margin-top:15px;width:800px}.CamelotOutput.empty{text-align:center}.HarmonicMixer-header,.HarmonicMixer-camelot-picker,.HarmonicMixer-camelot-output{display:flex;justify-content:center} +@charset "UTF-8";@import"https://fonts.googleapis.com/css?family=Lato:400,700,400italic";*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:Lato,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:.9375rem;font-weight:400;line-height:1.5;color:#fff;text-align:left;background-color:#222}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#00bc8c;text-decoration:none;background-color:transparent}a:hover{color:#007053;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#999;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}h1,.h1{font-size:3rem}h2,.h2{font-size:2.5rem}h3,.h3{font-size:2rem}h4,.h4{font-size:1.40625rem}h5,.h5{font-size:1.171875rem}h6,.h6{font-size:.9375rem}.lead{font-size:1.171875rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}small,.small{font-size:.875em;font-weight:400}mark,.mark{padding:.2em;background-color:#fcf8e3}.list-unstyled,.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.171875rem}.blockquote-footer{display:block;font-size:.875em;color:#999}.blockquote-footer:before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#222;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#999}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#222;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:inherit}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){.container-sm,.container{max-width:540px}}@media (min-width: 768px){.container-md,.container-sm,.container{max-width:720px}}@media (min-width: 992px){.container-lg,.container-md,.container-sm,.container{max-width:960px}}@media (min-width: 1200px){.container-xl,.container-lg,.container-md,.container-sm,.container{max-width:1140px}}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col-xl,.col-xl-auto,.col-xl-12,.col-xl-11,.col-xl-10,.col-xl-9,.col-xl-8,.col-xl-7,.col-xl-6,.col-xl-5,.col-xl-4,.col-xl-3,.col-xl-2,.col-xl-1,.col-lg,.col-lg-auto,.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1,.col-md,.col-md-auto,.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1,.col-sm,.col-sm-auto,.col-sm-12,.col-sm-11,.col-sm-10,.col-sm-9,.col-sm-8,.col-sm-7,.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1,.col,.col-auto,.col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-1>*{flex:0 0 100%;max-width:100%}.row-cols-2>*{flex:0 0 50%;max-width:50%}.row-cols-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-4>*{flex:0 0 25%;max-width:25%}.row-cols-5>*{flex:0 0 20%;max-width:20%}.row-cols-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-12{flex:0 0 100%;max-width:100%}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}@media (min-width: 576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-sm-1>*{flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-sm-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-sm-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-sm-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-sm-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}}@media (min-width: 768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-md-1>*{flex:0 0 100%;max-width:100%}.row-cols-md-2>*{flex:0 0 50%;max-width:50%}.row-cols-md-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-md-4>*{flex:0 0 25%;max-width:25%}.row-cols-md-5>*{flex:0 0 20%;max-width:20%}.row-cols-md-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}.col-md-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-md-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-md-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-md-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-md-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}}@media (min-width: 992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-lg-1>*{flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-lg-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-lg-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-lg-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-lg-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}}@media (min-width: 1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-xl-1>*{flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-xl-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-xl-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-xl-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-xl-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}}.btn{display:inline-block;font-weight:400;color:#fff;text-align:center;vertical-align:middle;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:.9375rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion: reduce){.btn{transition:none}}.btn:hover{color:#fff;text-decoration:none}.btn:focus,.btn.focus{outline:0;box-shadow:0 0 0 .2rem #375a7f40}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-primary:hover{color:#fff;background-color:#2b4764;border-color:#28415b}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#2b4764;border-color:#28415b;box-shadow:0 0 0 .2rem #55739280}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#28415b;border-color:#243a53}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #55739280}.btn-secondary{color:#fff;background-color:#444;border-color:#444}.btn-secondary:hover{color:#fff;background-color:#313131;border-color:#2b2b2b}.btn-secondary:focus,.btn-secondary.focus{color:#fff;background-color:#313131;border-color:#2b2b2b;box-shadow:0 0 0 .2rem #60606080}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#444;border-color:#444}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#2b2b2b;border-color:#242424}.btn-secondary:not(:disabled):not(.disabled):active:focus,.btn-secondary:not(:disabled):not(.disabled).active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #60606080}.btn-success{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-success:hover{color:#fff;background-color:#009670;border-color:#008966}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#009670;border-color:#008966;box-shadow:0 0 0 .2rem #26c69d80}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-success:not(:disabled):not(.disabled):active,.btn-success:not(:disabled):not(.disabled).active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#008966;border-color:#007c5d}.btn-success:not(:disabled):not(.disabled):active:focus,.btn-success:not(:disabled):not(.disabled).active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #26c69d80}.btn-info{color:#fff;background-color:#3498db;border-color:#3498db}.btn-info:hover{color:#fff;background-color:#2384c6;border-color:#217dbb}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#2384c6;border-color:#217dbb;box-shadow:0 0 0 .2rem #52a7e080}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#3498db;border-color:#3498db}.btn-info:not(:disabled):not(.disabled):active,.btn-info:not(:disabled):not(.disabled).active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#217dbb;border-color:#1f76b0}.btn-info:not(:disabled):not(.disabled):active:focus,.btn-info:not(:disabled):not(.disabled).active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #52a7e080}.btn-warning{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-warning:hover{color:#fff;background-color:#d4860b;border-color:#c87f0a}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#d4860b;border-color:#c87f0a;box-shadow:0 0 0 .2rem #f5ab3680}.btn-warning.disabled,.btn-warning:disabled{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-warning:not(:disabled):not(.disabled):active,.btn-warning:not(:disabled):not(.disabled).active,.show>.btn-warning.dropdown-toggle{color:#fff;background-color:#c87f0a;border-color:#bc770a}.btn-warning:not(:disabled):not(.disabled):active:focus,.btn-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #f5ab3680}.btn-danger{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-danger:hover{color:#fff;background-color:#e12e1c;border-color:#d62c1a}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#e12e1c;border-color:#d62c1a;box-shadow:0 0 0 .2rem #eb675980}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-danger:not(:disabled):not(.disabled):active,.btn-danger:not(:disabled):not(.disabled).active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#d62c1a;border-color:#ca2a19}.btn-danger:not(:disabled):not(.disabled):active:focus,.btn-danger:not(:disabled):not(.disabled).active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #eb675980}.btn-light{color:#fff;background-color:#303030;border-color:#303030}.btn-light:hover{color:#fff;background-color:#1d1d1d;border-color:#171717}.btn-light:focus,.btn-light.focus{color:#fff;background-color:#1d1d1d;border-color:#171717;box-shadow:0 0 0 .2rem #4f4f4f80}.btn-light.disabled,.btn-light:disabled{color:#fff;background-color:#303030;border-color:#303030}.btn-light:not(:disabled):not(.disabled):active,.btn-light:not(:disabled):not(.disabled).active,.show>.btn-light.dropdown-toggle{color:#fff;background-color:#171717;border-color:#101010}.btn-light:not(:disabled):not(.disabled):active:focus,.btn-light:not(:disabled):not(.disabled).active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #4f4f4f80}.btn-dark{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-dark:hover{color:#fff;background-color:#98a2ac;border-color:#919ca6}.btn-dark:focus,.btn-dark.focus{color:#fff;background-color:#98a2ac;border-color:#919ca6;box-shadow:0 0 0 .2rem #989fa680}.btn-dark.disabled,.btn-dark:disabled{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-dark:not(:disabled):not(.disabled):active,.btn-dark:not(:disabled):not(.disabled).active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#919ca6;border-color:#8a95a1}.btn-dark:not(:disabled):not(.disabled):active:focus,.btn-dark:not(:disabled):not(.disabled).active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #989fa680}.btn-outline-primary{color:#375a7f;border-color:#375a7f}.btn-outline-primary:hover{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem #375a7f80}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#375a7f;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#375a7f;border-color:#375a7f}.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #375a7f80}.btn-outline-secondary{color:#444;border-color:#444}.btn-outline-secondary:hover{color:#fff;background-color:#444;border-color:#444}.btn-outline-secondary:focus,.btn-outline-secondary.focus{box-shadow:0 0 0 .2rem #44444480}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#444;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#444;border-color:#444}.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #44444480}.btn-outline-success{color:#00bc8c;border-color:#00bc8c}.btn-outline-success:hover{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-outline-success:focus,.btn-outline-success.focus{box-shadow:0 0 0 .2rem #00bc8c80}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#00bc8c;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled):active,.btn-outline-success:not(:disabled):not(.disabled).active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#00bc8c;border-color:#00bc8c}.btn-outline-success:not(:disabled):not(.disabled):active:focus,.btn-outline-success:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #00bc8c80}.btn-outline-info{color:#3498db;border-color:#3498db}.btn-outline-info:hover{color:#fff;background-color:#3498db;border-color:#3498db}.btn-outline-info:focus,.btn-outline-info.focus{box-shadow:0 0 0 .2rem #3498db80}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#3498db;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled):active,.btn-outline-info:not(:disabled):not(.disabled).active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#3498db;border-color:#3498db}.btn-outline-info:not(:disabled):not(.disabled):active:focus,.btn-outline-info:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #3498db80}.btn-outline-warning{color:#f39c12;border-color:#f39c12}.btn-outline-warning:hover{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-outline-warning:focus,.btn-outline-warning.focus{box-shadow:0 0 0 .2rem #f39c1280}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#f39c12;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled):active,.btn-outline-warning:not(:disabled):not(.disabled).active,.show>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:#f39c12;border-color:#f39c12}.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #f39c1280}.btn-outline-danger{color:#e74c3c;border-color:#e74c3c}.btn-outline-danger:hover{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-outline-danger:focus,.btn-outline-danger.focus{box-shadow:0 0 0 .2rem #e74c3c80}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#e74c3c;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled):active,.btn-outline-danger:not(:disabled):not(.disabled).active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #e74c3c80}.btn-outline-light{color:#303030;border-color:#303030}.btn-outline-light:hover{color:#fff;background-color:#303030;border-color:#303030}.btn-outline-light:focus,.btn-outline-light.focus{box-shadow:0 0 0 .2rem #30303080}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#303030;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled):active,.btn-outline-light:not(:disabled):not(.disabled).active,.show>.btn-outline-light.dropdown-toggle{color:#fff;background-color:#303030;border-color:#303030}.btn-outline-light:not(:disabled):not(.disabled):active:focus,.btn-outline-light:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #30303080}.btn-outline-dark{color:#adb5bd;border-color:#adb5bd}.btn-outline-dark:hover{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-outline-dark:focus,.btn-outline-dark.focus{box-shadow:0 0 0 .2rem #adb5bd80}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#adb5bd;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled):active,.btn-outline-dark:not(:disabled):not(.disabled).active,.show>.btn-outline-dark.dropdown-toggle{color:#222;background-color:#adb5bd;border-color:#adb5bd}.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #adb5bd80}.btn-link{font-weight:400;color:#00bc8c;text-decoration:none}.btn-link:hover{color:#007053;text-decoration:underline}.btn-link:focus,.btn-link.focus{text-decoration:underline}.btn-link:disabled,.btn-link.disabled{color:#999;pointer-events:none}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.171875rem;line-height:1.5;border-radius:.3rem}.btn-sm,.btn-group-sm>.btn{padding:.25rem .5rem;font-size:.8203125rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;flex:1 1 auto}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover{z-index:1}.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn.active{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:not(:first-child),.btn-group>.btn-group:not(:first-child){margin-left:-1px}.btn-group>.btn:not(:last-child):not(.dropdown-toggle),.btn-group>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:not(:first-child),.btn-group>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split:after,.dropup .dropdown-toggle-split:after,.dropright .dropdown-toggle-split:after{margin-left:0}.dropleft .dropdown-toggle-split:before{margin-right:0}.btn-sm+.dropdown-toggle-split,.btn-group-sm>.btn+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),.btn-group-vertical>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.table{width:100%;margin-bottom:1rem;color:#fff}.table th,.table td{padding:.75rem;vertical-align:top;border-top:1px solid #444}.table thead th{vertical-align:bottom;border-bottom:2px solid #444}.table tbody+tbody{border-top:2px solid #444}.table-sm th,.table-sm td{padding:.3rem}.table-bordered,.table-bordered th,.table-bordered td{border:1px solid #444}.table-bordered thead th,.table-bordered thead td{border-bottom-width:2px}.table-borderless th,.table-borderless td,.table-borderless thead th,.table-borderless tbody+tbody{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:#303030}.table-hover tbody tr:hover{color:#fff;background-color:#00000013}.table-primary,.table-primary>th,.table-primary>td{background-color:#c7d1db}.table-primary th,.table-primary td,.table-primary thead th,.table-primary tbody+tbody{border-color:#97a9bc}.table-hover .table-primary:hover{background-color:#b7c4d1}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#b7c4d1}.table-secondary,.table-secondary>th,.table-secondary>td{background-color:#cbcbcb}.table-secondary th,.table-secondary td,.table-secondary thead th,.table-secondary tbody+tbody{border-color:#9e9e9e}.table-hover .table-secondary:hover{background-color:#bebebe}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#bebebe}.table-success,.table-success>th,.table-success>td{background-color:#b8ecdf}.table-success th,.table-success td,.table-success thead th,.table-success tbody+tbody{border-color:#7adcc3}.table-hover .table-success:hover{background-color:#a4e7d6}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#a4e7d6}.table-info,.table-info>th,.table-info>td{background-color:#c6e2f5}.table-info th,.table-info td,.table-info thead th,.table-info tbody+tbody{border-color:#95c9ec}.table-hover .table-info:hover{background-color:#b0d7f1}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#b0d7f1}.table-warning,.table-warning>th,.table-warning>td{background-color:#fce3bd}.table-warning th,.table-warning td,.table-warning thead th,.table-warning tbody+tbody{border-color:#f9cc84}.table-hover .table-warning:hover{background-color:#fbd9a5}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#fbd9a5}.table-danger,.table-danger>th,.table-danger>td{background-color:#f8cdc8}.table-danger th,.table-danger td,.table-danger thead th,.table-danger tbody+tbody{border-color:#f3a29a}.table-hover .table-danger:hover{background-color:#f5b8b1}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f5b8b1}.table-light,.table-light>th,.table-light>td{background-color:#c5c5c5}.table-light th,.table-light td,.table-light thead th,.table-light tbody+tbody{border-color:#939393}.table-hover .table-light:hover{background-color:#b8b8b8}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#b8b8b8}.table-dark,.table-dark>th,.table-dark>td{background-color:#e8eaed}.table-dark th,.table-dark td,.table-dark thead th,.table-dark tbody+tbody{border-color:#d4d9dd}.table-hover .table-dark:hover{background-color:#dadde2}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#dadde2}.table-hover .table-active:hover{background-color:#00000013}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:#00000013}.table .thead-dark th{color:#222;background-color:#adb5bd;border-color:#98a2ac}.table .thead-light th{color:#444;background-color:#ebebeb;border-color:#444}.table-dark{color:#222;background-color:#adb5bd}.table-dark th,.table-dark td,.table-dark thead th{border-color:#98a2ac}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:#ffffff0d}.table-dark.table-hover tbody tr:hover{color:#222;background-color:#ffffff13}@media (max-width: 575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-sm>.table-bordered{border:0}}@media (max-width: 767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-md>.table-bordered{border:0}}@media (max-width: 991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-lg>.table-bordered{border:0}}@media (max-width: 1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table-bordered{border:0}.bg-primary .navbar-nav .active>.nav-link{color:#00bc8c!important}.bg-dark{background-color:#00bc8c!important}.bg-dark.navbar-dark .navbar-nav .nav-link:focus,.bg-dark.navbar-dark .navbar-nav .nav-link:hover,.bg-dark.navbar-dark .navbar-nav .active>.nav-link{color:#375a7f!important}.blockquote-footer{color:#999}.table-primary,.table-primary>th,.table-primary>td{background-color:#375a7f}.table-secondary,.table-secondary>th,.table-secondary>td{background-color:#444}.table-light,.table-light>th,.table-light>td{background-color:#303030}.table-dark,.table-dark>th,.table-dark>td{background-color:#adb5bd}.table-success,.table-success>th,.table-success>td{background-color:#00bc8c}.table-info,.table-info>th,.table-info>td{background-color:#3498db}.table-danger,.table-danger>th,.table-danger>td{background-color:#e74c3c}.table-warning,.table-warning>th,.table-warning>td{background-color:#f39c12}.table-active,.table-active>th,.table-active>td{background-color:#00000013}.table-hover .table-primary:hover,.table-hover .table-primary:hover>th,.table-hover .table-primary:hover>td{background-color:#2f4d6d}.table-hover .table-secondary:hover,.table-hover .table-secondary:hover>th,.table-hover .table-secondary:hover>td{background-color:#373737}.table-hover .table-light:hover,.table-hover .table-light:hover>th,.table-hover .table-light:hover>td{background-color:#232323}.table-hover .table-dark:hover,.table-hover .table-dark:hover>th,.table-hover .table-dark:hover>td{background-color:#9fa8b2}.table-hover .table-success:hover,.table-hover .table-success:hover>th,.table-hover .table-success:hover>td{background-color:#00a379}.table-hover .table-info:hover,.table-hover .table-info:hover>th,.table-hover .table-info:hover>td{background-color:#258cd1}.table-hover .table-danger:hover,.table-hover .table-danger:hover>th,.table-hover .table-danger:hover>td{background-color:#e43725}.table-hover .table-warning:hover,.table-hover .table-warning:hover>th,.table-hover .table-warning:hover>td{background-color:#e08e0b}.table-hover .table-active:hover,.table-hover .table-active:hover>th,.table-hover .table-active:hover>td{background-color:#00000013}.input-group-addon{color:#fff}.nav-tabs .nav-link,.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:focus,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-item.open .nav-link,.nav-tabs .nav-item.open .nav-link:focus,.nav-tabs .nav-item.open .nav-link:hover,.nav-pills .nav-link,.nav-pills .nav-link.active,.nav-pills .nav-link.active:focus,.nav-pills .nav-link.active:hover,.nav-pills .nav-item.open .nav-link,.nav-pills .nav-item.open .nav-link:focus,.nav-pills .nav-item.open .nav-link:hover{color:#fff}.breadcrumb a{color:#fff}.pagination a:hover{text-decoration:none}.close{opacity:.4}.close:hover,.close:focus{opacity:1}.alert{border:none;color:#fff}.alert a,.alert .alert-link{color:#fff;text-decoration:underline}.alert-primary{background-color:#375a7f}.alert-secondary{background-color:#444}.alert-success{background-color:#00bc8c}.alert-info{background-color:#3498db}.alert-warning{background-color:#f39c12}.alert-danger{background-color:#e74c3c}.alert-light{background-color:#303030}.alert-dark{background-color:#adb5bd}.list-group-item-action{color:#fff}.list-group-item-action:hover,.list-group-item-action:focus{background-color:#444;color:#fff}.list-group-item-action .list-group-item-heading{color:#fff}body{margin:0;padding:0;font-family:sans-serif}footer{text-align:center}div#root{justify-content:center}.segment-1A{color:#91f2df}.segment-1A .bg{color:#222;background-color:#91f2df}.segment-1B{color:#6beacb}.segment-1B .bg{color:#222;background-color:#6beacb}.segment-2A{color:#a4f1b7}.segment-2A .bg{color:#222;background-color:#a4f1b7}.segment-2B{color:#7aea8b}.segment-2B .bg{color:#222;background-color:#7aea8b}.segment-3A{color:#c4f49f}.segment-3A .bg{color:#222;background-color:#c4f49f}.segment-3B{color:#a2ee68}.segment-3B .bg{color:#222;background-color:#a2ee68}.segment-4A{color:#fadf9a}.segment-4A .bg{color:#222;background-color:#fadf9a}.segment-4B{color:#f7cc60}.segment-4B .bg{color:#222;background-color:#f7cc60}.segment-5A{color:#f7c8b4}.segment-5A .bg{color:#222;background-color:#f7c8b4}.segment-5B{color:#f3a4b2}.segment-5B .bg{color:#222;background-color:#f3a4b2}.segment-6A{color:#f4babf}.segment-6A .bg{color:#222;background-color:#f4babf}.segment-6B{color:#f08e96}.segment-6B .bg{color:#222;background-color:#f08e96}.segment-7A{color:#f4b7d1}.segment-7A .bg{color:#222;background-color:#f4b7d1}.segment-7B{color:#ee89b3}.segment-7B .bg{color:#222;background-color:#ee89b3}.segment-8A{color:#ebb8e5}.segment-8A .bg{color:#222;background-color:#ebb8e5}.segment-8B{color:#e08ad6}.segment-8B .bg{color:#222;background-color:#e08ad6}.segment-9A{color:#dbbefa}.segment-9A .bg{color:#222;background-color:#dbbefa}.segment-9B{color:#c395f8}.segment-9B .bg{color:#222;background-color:#c395f8}.segment-10A{color:#c8d4fb}.segment-10A .bg{color:#222;background-color:#c8d4fb}.segment-10B{color:#a3b8fa}.segment-10B .bg{color:#222;background-color:#a3b8fa}.segment-11A{color:#aae6f9}.segment-11A .bg{color:#222;background-color:#aae6f9}.segment-11B{color:#7ad8f5}.segment-11B .bg{color:#222;background-color:#7ad8f5}.segment-12A{color:#8ff1f2}.segment-12A .bg{color:#222;background-color:#8ff1f2}.segment-12B{color:#6be9e9}.segment-12B .bg{color:#222;background-color:#6be9e9}.CamelotPicker{width:800px;display:grid;grid-template-rows:3;grid-template-columns:6}.CamelotPicker button{display:block;width:100%}.labeling{grid-row:4;grid-column:1/span 6}.letters{grid-row:1;grid-column:1/span 6}.letters.btn-group>.btn{border-top-left-radius:0;border-top-right-radius:0}.letters.top>.btn{border-bottom-left-radius:0;border-bottom-right-radius:0}.numbers{grid-row:span 2;grid-column:span 6}.numbers.middle>.btn{border-radius:0}.numbers.btn-group>.btn{border-top-left-radius:0;border-top-right-radius:0}.btn-group{border-bottom:1px solid gray}.btn-group:last-child{border-bottom:none}.btn-group .btn{border-right:1px solid gray;margin-right:1px}.btn-group .btn:active{border-right:1px solid gray}.btn-group .btn:last-child{border-right:none;margin-right:0}button,button:focus,.btn:focus,.btn.focus,.btn-info:focus,.btn-info.focus{box-shadow:none;outline:none}hr{background-color:#fff}span.camelot-notation{font-size:1.2rem}span.chromatic-notation{font-size:.8rem}.CamelotOutput{margin-top:15px;width:800px}.CamelotOutput.empty{text-align:center}.HarmonicMixer-header,.HarmonicMixer-camelot-picker,.HarmonicMixer-camelot-output{display:flex;justify-content:center} diff --git a/dist/assets/index-Be4T2QmA.js b/dist/assets/index-DbKIMe2Q.js similarity index 96% rename from dist/assets/index-Be4T2QmA.js rename to dist/assets/index-DbKIMe2Q.js index 9098fc1..d87df86 100644 --- a/dist/assets/index-Be4T2QmA.js +++ b/dist/assets/index-DbKIMe2Q.js @@ -49,4 +49,4 @@ __p+='`),a}),u+=`'; `,i="obj";u=`var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');}; `+u+`return __p; `;var o;try{o=new Function(i,"_",u)}catch(a){throw a.source=u,a}var s=function(a){return o.call(this,a,O)};return s.source="function("+i+`){ -`+u+"}",s}function Gh(e,n,t){n=_r(n);var r=n.length;if(!r)return ce(t)?t.call(e):t;for(var l=0;l1)Zn(o,n-1,t,r),l=r.length;else for(var s=0,a=o.length;sn?(r&&(clearTimeout(r),r=null),o=h,i=e.apply(l,u),r||(l=u=null)):!r&&t.trailing!==!1&&(r=setTimeout(s,p)),i};return a.cancel=function(){clearTimeout(r),o=0,r=l=u=null},a}function nv(e,n,t){var r,l,u,i,o,s=function(){var h=gr()-l;n>h?r=setTimeout(s,n-h):(r=null,t||(i=e.apply(o,u)),r||(u=o=null))},a=ye(function(h){return o=this,u=h,l=gr(),r||(r=setTimeout(s,n),t&&(i=e.apply(o,u))),i});return a.cancel=function(){clearTimeout(r),r=u=o=null},a}function tv(e,n){return Nn(n,e)}function Bo(e){return function(){return!e.apply(this,arguments)}}function rv(){var e=arguments,n=e.length-1;return function(){for(var t=n,r=e[n].apply(this,arguments);t--;)r=e[t].call(this,r);return r}}function lv(e,n){return function(){if(--e<1)return n.apply(this,arguments)}}function sd(e,n){var t;return function(){return--e>0&&(t=n.apply(this,arguments)),e<=1&&(n=null),t}}const uv=Nn(sd,2);function ad(e,n,t){n=Se(n,t);for(var r=b(e),l,u=0,i=r.length;u0?0:l-1;u>=0&&u0?i=u>=0?u:Math.max(u+o,i):o=u>=0?Math.min(u+1,o):u+o+1;else if(t&&u&&o)return u=t(r,l),r[u]===l?u:-1;if(l!==l)return u=n(Cr.call(r,i,o),Uf),u>=0?u+i:-1;for(u=e>0?i:o-1;u>=0&&u0?0:o-1;for(u||(l=t[i?i[s]:s],s+=e);s>=0&&s=3;return n(t,Nr(r,u,4),l,i)}}const Tu=hd(1),aa=hd(-1);function Ct(e,n,t){var r=[];return n=Se(n,t),un(e,function(l,u,i){n(l,u,i)&&r.push(l)}),r}function sv(e,n,t){return Ct(e,Bo(Se(n)),t)}function ca(e,n,t){n=Se(n,t);for(var r=!Pe(e)&&b(e),l=(r||e).length,u=0;u=0}const av=ye(function(e,n,t){var r,l;return ce(n)?l=n:(n=_r(n),r=n.slice(0,-1),n=n[n.length-1]),Qn(e,function(u){var i=l;if(!i){if(r&&r.length&&(u=Ao(u,r)),u==null)return;i=u[n]}return i==null?i:i.apply(u,t)})});function jo(e,n){return Qn(e,Do(n))}function cv(e,n){return Ct(e,vr(n))}function vd(e,n,t){var r=-1/0,l=-1/0,u,i;if(n==null||typeof n=="number"&&typeof e[0]!="object"&&e!=null){e=Pe(e)?e:Tt(e);for(var o=0,s=e.length;or&&(r=u)}else n=Se(n,t),un(e,function(a,h,p){i=n(a,h,p),(i>l||i===-1/0&&r===-1/0)&&(r=a,l=i)});return r}function fv(e,n,t){var r=1/0,l=1/0,u,i;if(n==null||typeof n=="number"&&typeof e[0]!="object"&&e!=null){e=Pe(e)?e:Tt(e);for(var o=0,s=e.length;oo||i===void 0)return 1;if(i1&&(r=Nr(r,n[1])),n=xr(e)):(r=Sv,n=Zn(n,!1,!1),e=Object(e));for(var l=0,u=n.length;l1&&(r=n[1])):(n=Qn(Zn(n,!1,!1),String),t=function(l,u){return!en(n,u)}),wd(e,t,r)});function Sd(e,n,t){return Cr.call(e,0,Math.max(0,e.length-(n==null||t?1:n)))}function zu(e,n,t){return e==null||e.length<1?n==null||t?void 0:[]:n==null||t?e[0]:Sd(e,e.length-n)}function ul(e,n,t){return Cr.call(e,n==null||t?1:n)}function Ev(e,n,t){return e==null||e.length<1?n==null||t?void 0:[]:n==null||t?e[e.length-1]:ul(e,Math.max(0,e.length-n))}function Cv(e){return Ct(e,Boolean)}function xv(e,n){return Zn(e,n,!1)}const kd=ye(function(e,n){return n=Zn(n,!0,!0),Ct(e,function(t){return!en(n,t)})}),_v=ye(function(e,n){return kd(e,n)});function zi(e,n,t,r){Lf(n)||(r=t,t=n,n=!1),t!=null&&(t=Se(t,r));for(var l=[],u=[],i=0,o=we(e);i{if(Cd(e)){var n=Wo(e),t=xd(e),r={startingSignature:e,startingNumber:n,startingLetter:t,possibleMixes:[].concat(xt.Algorithms)};return r.possibleMixes.map(function(l,u,i){var o,s;if(l.move.fn){var a=l.move.fn(this.startingNumber,this.startingLetter);o=m(this.startingNumber,a.steps),s=y(this.startingLetter,a.position)}else o=m(this.startingNumber,l.move.steps),s=y(this.startingLetter,l.move.position);var h=o+s,p={number:o,letter:s,signature:h};return l.newMix=p,l;function m(w,S){for(var A=S>0,f=Math.abs(S),c=w;f!==0;)A?c++:c--,c===0?c=12:c===13&&(c=1),f--;return c}function y(w,S){return S==="switch"?w==="A"?"B":"A":w}},r),r}else return null},Cd=e=>{if(e.match(Iv)){var n=Wo(e);return 1<=n&&n<=12}else return!1},Wo=e=>{var n=e.match(Av)[0];return Number.parseInt(n)},xd=e=>e.match(Fv)[0].toUpperCase(),xt={Types:an,Algorithms:Ov,getMixesFor:Dv,thisIsACamelotSignature:Cd,getNumberFromSignature:Wo,getLetterFromSignature:xd},$o="min",_d="maj",$e="flat",Ol="sharp",Uv=e=>{const n=(u,i,o)=>({letter:u,modifier:i,mode:o}),t=(u,i=null)=>n(u,i,_d),r=(u,i=null)=>n(u,i,$o),l=(u,i)=>({major:u,minor:i});switch(xt.getNumberFromSignature(e)){case 1:return l(t("B"),r("A",$e));case 2:return l(t("F",Ol),r("E",$e));case 3:return l(t("D",$e),r("B",$e));case 4:return l(t("A",$e),r("F"));case 5:return l(t("E",$e),r("C"));case 6:return l(t("B",$e),r("G"));case 7:return l(t("F"),r("D"));case 8:return l(t("C"),r("A"));case 9:return l(t("G"),r("E"));case 10:return l(t("D"),r("B"));case 11:return l(t("A"),r("F",Ol));case 12:return l(t("E"),r("D",$e));default:return console.error("Invalid signature",e),null}},Bv=e=>{const n=Nd(e);if(n){const t=n.letter,r=n.mode===$o?"m":"M";let l=null;return n.modifier===Ol?l="#":n.modifier===$e&&(l="b"),t+(l||"")+""+r}else return""},Nd=e=>{const n=Uv(e);switch(xt.getLetterFromSignature(e)){case"A":return n.minor;case"B":return n.major;default:return console.error("Invalid signature",e),null}},Li={getChromaticNotationFromCamelotSignature:Bv,fromCamelotSignature:Nd,MIN:$o,MAJ:_d,FLAT:$e,SHARP:Ol};let Kr=[],Mu=[];const Vv=["A","B"],jv=e=>{const[n,t]=Ze.useState(null),[r,l]=Ze.useState(null),u=Ze.useCallback((s,a)=>{e.onKeyChange(""+s+a)},[e]);Ze.useEffect(()=>{e.camelotKey!==null&&(t(xt.getNumberFromSignature(e.camelotKey)),l(xt.getLetterFromSignature(e.camelotKey)))},[e.camelotKey]),Ze.useEffect(()=>{n!==null&&r!==null&&u(n,r)},[n,r,u]);const i=s=>{t(s)},o=s=>{l(s)};Kr=[];for(let s=1;s<=12;s++){const a=r!==null?Li.getChromaticNotationFromCamelotSignature(""+s+r):null;Kr.push(P.jsxs("button",{className:n===s?"btn btn-info":"btn btn-secondary",onClick:Nn(i,s),camelotnumber:s,children:[a===null&&P.jsxs(P.Fragment,{children:[s,r]}),a!==null&&P.jsxs(P.Fragment,{children:[a,P.jsx("br",{}),s,r]})]},s))}return Mu=[],Vv.forEach((s,a)=>{Mu.push(P.jsx("button",{className:r===s?"btn btn-info":"btn btn-secondary",onClick:Nn(o,s),camelotletter:s,children:s==="A"?"Minor":"Major"},a))}),P.jsxs("div",{className:"CamelotPicker",children:[P.jsx("div",{className:"letters top btn-group btn-group-lg",role:"group","aria-label":"Camelot letters",children:Mu}),P.jsx("div",{className:"numbers middle btn-group btn-group-lg",role:"group","aria-label":"Camelot numbers",children:Kr.slice(0,6)}),P.jsx("div",{className:"numbers btn-group btn-group-lg",role:"group","aria-label":"Camelot numbers",children:Kr.slice(6,12)})]})},Hv=e=>{if(e.camelotKey){const n=xt.getMixesFor(e.camelotKey),t=Li.getChromaticNotationFromCamelotSignature(e.camelotKey),r=n.possibleMixes.map(l=>({type:l.type,name:l.name,newMix:l.newMix.signature,newKey:Li.getChromaticNotationFromCamelotSignature(l.newMix.signature)}));return P.jsx("div",{className:"CamelotOutput",children:P.jsxs("table",{className:"table table-striped table-bordered",children:[P.jsx("thead",{children:P.jsxs("tr",{children:[P.jsxs("th",{children:["Transition from ",t," / ",e.camelotKey]}),P.jsx("th",{children:"Key"}),P.jsx("th",{})]})}),P.jsx("tbody",{children:r.map((l,u)=>P.jsxs("tr",{className:"result mix-type--"+l.type,children:[P.jsx("td",{children:l.name}),P.jsx("td",{className:"mix-notation","data-testid":"output-mix-notation-"+l.type,children:l.newKey}),P.jsx("td",{className:"mix-type","data-testid":"output-mix-"+l.type,children:l.newMix})]},u))})]})})}else return P.jsx("div",{className:"CamelotOutput empty",children:"Set your current key above"})},Wv=e=>{const[n,t]=Ze.useState(null),r=l=>{t(l)};return P.jsxs("div",{className:"HarmonicMixer container-fluid",children:[P.jsx("div",{className:"row",children:P.jsx("div",{className:"col",children:P.jsx("header",{className:"HarmonicMixer-header",children:P.jsx("h1",{className:"HarmonicMixer-title",children:"Harmonic Mixer"})})})}),P.jsx("div",{className:"row",children:P.jsx("div",{className:"col HarmonicMixer-camelot-picker",children:P.jsx(jv,{camelotKey:n,onKeyChange:r})})}),n!==null&&P.jsx("div",{className:"row",children:P.jsx("div",{className:"col HarmonicMixer-camelot-output",children:P.jsx(Hv,{camelotKey:n})})})]})},$v="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RERCMUIwOUY4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RERCMUIwOUU4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJBOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJCOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jUqS1wAAApVJREFUeNq0l89rE1EQx3e3gVJoSPzZeNEWPKgHoa0HBak0iHiy/4C3WvDmoZ56qJ7txVsPQu8qlqqHIhRKJZceesmhioQEfxTEtsoSpdJg1u/ABJ7Pmc1m8zLwgWTmzcw3L+/te+tHUeQltONgCkyCi2AEDHLsJ6iBMlgHL8FeoqokoA2j4CloRMmtwTmj7erHBXPgCWhG6a3JNXKdCiDl1cidVbXZkJoXQRi5t5BrxwoY71FzU8S4JuAIqFkJ2+BFSlEh525b/hr3+k/AklDkNsf6wTT4yv46KIMNpsy+iMdMc47HNWxbsgVcUn7FmLAzzoFAWDsBx+wVP6bUpp5ewI+DOeUx0Wd9D8F70BTGNjkWtqnhmT1JQAHcUgZd8Lo3rQb1LAT8eJVUfgGvHQigGp+V2Z0iAUUl8QH47kAA1XioxIo+bRN8OG8F/oBjwv+Z1nJgX5jpdzQDw0LCjsPmrcW7I/iHScCAEDj03FtD8A0EyuChHgg4KTlJQF3wZ7WELppnBX+dBFSVpJsOBWi1qiRgSwnOgoyD5hmuJdkWCVhTgnTvW3AgYIFrSbZGh0UW/Io5Vp+DQoK7o80pztWMemZbgxeNwCNwDbw1fIfgGZjhU6xPaJgBV8BdsMw5cbZoHsenwYFxkZzl83xTSKTiviCAfCsJLysH3POfC8m8NegyGAGfLP/VmGmfSChgXroR0RSWjEFv2J/nG84cuKFMf4sTCZqXuJd4KaXFVjEG3+tw4eXbNK/YC9oXXs3O8NY8y99L4BXY5cvLY/Bb2VZ58EOJVcB18DHJq9lRsKr8inyKGVjlmh29mtHs3AHfuhCwy1vXT/Nu2GKQt+UHsGdctyX6eQyNvc+5sfX9Dl7Pe2J/BRgAl2CpwmrsHR0AAAAASUVORK5CYII=";function Qv(){return P.jsxs(P.Fragment,{children:[P.jsx(Wv,{}),P.jsxs("footer",{className:"footer",children:[P.jsx("a",{href:"http://www.harmonic-mixing.com/",target:"_blank",rel:"noopener noreferrer",children:"Learn more about harmonic mixing"}),P.jsx("br",{}),P.jsx("a",{href:"https://github.com/anjunatl/harmonic-mixing",target:"_blank",rel:"noopener noreferrer",children:P.jsx("img",{src:$v,alt:"Github logo icon",width:"32",height:"32"})})]})]})}Lu.createRoot(document.getElementById("root")).render(P.jsx($d.StrictMode,{children:P.jsx(Qv,{})})); +`+u+"}",s}function Gh(e,n,t){n=_r(n);var r=n.length;if(!r)return ce(t)?t.call(e):t;for(var l=0;l1)Zn(o,n-1,t,r),l=r.length;else for(var s=0,a=o.length;sn?(r&&(clearTimeout(r),r=null),o=h,i=e.apply(l,u),r||(l=u=null)):!r&&t.trailing!==!1&&(r=setTimeout(s,p)),i};return a.cancel=function(){clearTimeout(r),o=0,r=l=u=null},a}function nv(e,n,t){var r,l,u,i,o,s=function(){var h=gr()-l;n>h?r=setTimeout(s,n-h):(r=null,t||(i=e.apply(o,u)),r||(u=o=null))},a=ye(function(h){return o=this,u=h,l=gr(),r||(r=setTimeout(s,n),t&&(i=e.apply(o,u))),i});return a.cancel=function(){clearTimeout(r),r=u=o=null},a}function tv(e,n){return Nn(n,e)}function Bo(e){return function(){return!e.apply(this,arguments)}}function rv(){var e=arguments,n=e.length-1;return function(){for(var t=n,r=e[n].apply(this,arguments);t--;)r=e[t].call(this,r);return r}}function lv(e,n){return function(){if(--e<1)return n.apply(this,arguments)}}function sd(e,n){var t;return function(){return--e>0&&(t=n.apply(this,arguments)),e<=1&&(n=null),t}}const uv=Nn(sd,2);function ad(e,n,t){n=Se(n,t);for(var r=b(e),l,u=0,i=r.length;u0?0:l-1;u>=0&&u0?i=u>=0?u:Math.max(u+o,i):o=u>=0?Math.min(u+1,o):u+o+1;else if(t&&u&&o)return u=t(r,l),r[u]===l?u:-1;if(l!==l)return u=n(Cr.call(r,i,o),Uf),u>=0?u+i:-1;for(u=e>0?i:o-1;u>=0&&u0?0:o-1;for(u||(l=t[i?i[s]:s],s+=e);s>=0&&s=3;return n(t,Nr(r,u,4),l,i)}}const Tu=hd(1),aa=hd(-1);function Ct(e,n,t){var r=[];return n=Se(n,t),un(e,function(l,u,i){n(l,u,i)&&r.push(l)}),r}function sv(e,n,t){return Ct(e,Bo(Se(n)),t)}function ca(e,n,t){n=Se(n,t);for(var r=!Pe(e)&&b(e),l=(r||e).length,u=0;u=0}const av=ye(function(e,n,t){var r,l;return ce(n)?l=n:(n=_r(n),r=n.slice(0,-1),n=n[n.length-1]),Qn(e,function(u){var i=l;if(!i){if(r&&r.length&&(u=Ao(u,r)),u==null)return;i=u[n]}return i==null?i:i.apply(u,t)})});function jo(e,n){return Qn(e,Do(n))}function cv(e,n){return Ct(e,vr(n))}function vd(e,n,t){var r=-1/0,l=-1/0,u,i;if(n==null||typeof n=="number"&&typeof e[0]!="object"&&e!=null){e=Pe(e)?e:Tt(e);for(var o=0,s=e.length;or&&(r=u)}else n=Se(n,t),un(e,function(a,h,p){i=n(a,h,p),(i>l||i===-1/0&&r===-1/0)&&(r=a,l=i)});return r}function fv(e,n,t){var r=1/0,l=1/0,u,i;if(n==null||typeof n=="number"&&typeof e[0]!="object"&&e!=null){e=Pe(e)?e:Tt(e);for(var o=0,s=e.length;oo||i===void 0)return 1;if(i1&&(r=Nr(r,n[1])),n=xr(e)):(r=Sv,n=Zn(n,!1,!1),e=Object(e));for(var l=0,u=n.length;l1&&(r=n[1])):(n=Qn(Zn(n,!1,!1),String),t=function(l,u){return!en(n,u)}),wd(e,t,r)});function Sd(e,n,t){return Cr.call(e,0,Math.max(0,e.length-(n==null||t?1:n)))}function zu(e,n,t){return e==null||e.length<1?n==null||t?void 0:[]:n==null||t?e[0]:Sd(e,e.length-n)}function ul(e,n,t){return Cr.call(e,n==null||t?1:n)}function Ev(e,n,t){return e==null||e.length<1?n==null||t?void 0:[]:n==null||t?e[e.length-1]:ul(e,Math.max(0,e.length-n))}function Cv(e){return Ct(e,Boolean)}function xv(e,n){return Zn(e,n,!1)}const kd=ye(function(e,n){return n=Zn(n,!0,!0),Ct(e,function(t){return!en(n,t)})}),_v=ye(function(e,n){return kd(e,n)});function zi(e,n,t,r){Lf(n)||(r=t,t=n,n=!1),t!=null&&(t=Se(t,r));for(var l=[],u=[],i=0,o=we(e);i{if(Cd(e)){var n=Wo(e),t=xd(e),r={startingSignature:e,startingNumber:n,startingLetter:t,possibleMixes:[].concat(xt.Algorithms)};return r.possibleMixes.map(function(l,u,i){var o,s;if(l.move.fn){var a=l.move.fn(this.startingNumber,this.startingLetter);o=m(this.startingNumber,a.steps),s=y(this.startingLetter,a.position)}else o=m(this.startingNumber,l.move.steps),s=y(this.startingLetter,l.move.position);var h=o+s,p={number:o,letter:s,signature:h};return l.newMix=p,l;function m(w,S){for(var A=S>0,f=Math.abs(S),c=w;f!==0;)A?c++:c--,c===0?c=12:c===13&&(c=1),f--;return c}function y(w,S){return S==="switch"?w==="A"?"B":"A":w}},r),r}else return null},Cd=e=>{if(e.match(Iv)){var n=Wo(e);return 1<=n&&n<=12}else return!1},Wo=e=>{var n=e.match(Av)[0];return Number.parseInt(n)},xd=e=>e.match(Fv)[0].toUpperCase(),xt={Types:an,Algorithms:Ov,getMixesFor:Dv,thisIsACamelotSignature:Cd,getNumberFromSignature:Wo,getLetterFromSignature:xd},$o="min",_d="maj",$e="flat",Ol="sharp",Uv=e=>{const n=(u,i,o)=>({letter:u,modifier:i,mode:o}),t=(u,i=null)=>n(u,i,_d),r=(u,i=null)=>n(u,i,$o),l=(u,i)=>({major:u,minor:i});switch(xt.getNumberFromSignature(e)){case 1:return l(t("B"),r("A",$e));case 2:return l(t("F",Ol),r("E",$e));case 3:return l(t("D",$e),r("B",$e));case 4:return l(t("A",$e),r("F"));case 5:return l(t("E",$e),r("C"));case 6:return l(t("B",$e),r("G"));case 7:return l(t("F"),r("D"));case 8:return l(t("C"),r("A"));case 9:return l(t("G"),r("E"));case 10:return l(t("D"),r("B"));case 11:return l(t("A"),r("F",Ol));case 12:return l(t("E"),r("D",$e));default:return console.error("Invalid signature",e),null}},Bv=e=>{const n=Nd(e);if(n){const t=n.letter,r=n.mode===$o?"m":"M";let l=null;return n.modifier===Ol?l="#":n.modifier===$e&&(l="b"),t+(l||"")+""+r}else return""},Nd=e=>{const n=Uv(e);switch(xt.getLetterFromSignature(e)){case"A":return n.minor;case"B":return n.major;default:return console.error("Invalid signature",e),null}},Li={getChromaticNotationFromCamelotSignature:Bv,fromCamelotSignature:Nd,MIN:$o,MAJ:_d,FLAT:$e,SHARP:Ol};let Kr=[],Mu=[];const Vv=["A","B"],jv=e=>{const[n,t]=Ze.useState(null),[r,l]=Ze.useState(null),u=Ze.useCallback((s,a)=>{e.onKeyChange(""+s+a)},[e]);Ze.useEffect(()=>{e.camelotKey!==null&&(t(xt.getNumberFromSignature(e.camelotKey)),l(xt.getLetterFromSignature(e.camelotKey)))},[e.camelotKey]),Ze.useEffect(()=>{n!==null&&r!==null&&u(n,r)},[n,r,u]);const i=s=>{t(s)},o=s=>{l(s)};Kr=[];for(let s=1;s<=12;s++){const a=r!==null?Li.getChromaticNotationFromCamelotSignature(""+s+r):null;Kr.push(P.jsxs("button",{className:(n===s?"btn btn-info":"btn btn-secondary")+" segment-"+s+r,onClick:Nn(i,s),camelotnumber:s,children:[a===null&&P.jsxs(P.Fragment,{children:[s,r]}),a!==null&&P.jsxs(P.Fragment,{children:[a,P.jsx("br",{}),P.jsxs("strong",{children:[s,r]})]})]},s))}return Mu=[],Vv.forEach((s,a)=>{Mu.push(P.jsx("button",{className:r===s?"btn btn-info":"btn btn-secondary",onClick:Nn(o,s),camelotletter:s,children:s==="A"?"Minor":"Major"},a))}),P.jsxs("div",{className:"CamelotPicker",children:[P.jsx("div",{className:"letters top btn-group btn-group-lg",role:"group","aria-label":"Camelot letters",children:Mu}),P.jsx("div",{className:"numbers middle btn-group btn-group-lg",role:"group","aria-label":"Camelot numbers",children:Kr.slice(0,6)}),P.jsx("div",{className:"numbers btn-group btn-group-lg",role:"group","aria-label":"Camelot numbers",children:Kr.slice(6,12)})]})},Hv=e=>{if(e.camelotKey){const n=xt.getMixesFor(e.camelotKey),t=Li.getChromaticNotationFromCamelotSignature(e.camelotKey),r=n.possibleMixes.map(l=>({type:l.type,name:l.name,newMix:l.newMix.signature,newKey:Li.getChromaticNotationFromCamelotSignature(l.newMix.signature)}));return P.jsx("div",{className:"CamelotOutput",children:P.jsxs("table",{className:"table table-striped table-bordered",children:[P.jsx("thead",{children:P.jsxs("tr",{children:[P.jsxs("th",{children:["Transition from ",P.jsxs("span",{className:"segment-"+e.camelotKey,children:[t," / ",e.camelotKey]})]}),P.jsx("th",{children:"Key"}),P.jsx("th",{})]})}),P.jsx("tbody",{children:r.map((l,u)=>P.jsxs("tr",{className:"result mix-type--"+l.type+" segment-"+l.newMix,children:[P.jsx("td",{children:l.name}),P.jsx("td",{className:"mix-notation","data-testid":"output-mix-notation-"+l.type,children:P.jsx("strong",{children:l.newKey})}),P.jsx("td",{className:"mix-type","data-testid":"output-mix-"+l.type,children:P.jsx("strong",{children:l.newMix})})]},u))})]})})}else return P.jsx("div",{className:"CamelotOutput empty",children:"Set your current key above"})},Wv=e=>{const[n,t]=Ze.useState(null),r=l=>{t(l)};return P.jsxs("div",{className:"HarmonicMixer container-fluid",children:[P.jsx("div",{className:"row",children:P.jsx("div",{className:"col",children:P.jsx("header",{className:"HarmonicMixer-header",children:P.jsx("h1",{className:"HarmonicMixer-title",children:"Harmonic Mixer"})})})}),P.jsx("div",{className:"row",children:P.jsx("div",{className:"col HarmonicMixer-camelot-picker",children:P.jsx(jv,{camelotKey:n,onKeyChange:r})})}),n!==null&&P.jsx("div",{className:"row",children:P.jsx("div",{className:"col HarmonicMixer-camelot-output",children:P.jsx(Hv,{camelotKey:n})})})]})},$v="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RERCMUIwOUY4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RERCMUIwOUU4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJBOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJCOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jUqS1wAAApVJREFUeNq0l89rE1EQx3e3gVJoSPzZeNEWPKgHoa0HBak0iHiy/4C3WvDmoZ56qJ7txVsPQu8qlqqHIhRKJZceesmhioQEfxTEtsoSpdJg1u/ABJ7Pmc1m8zLwgWTmzcw3L+/te+tHUeQltONgCkyCi2AEDHLsJ6iBMlgHL8FeoqokoA2j4CloRMmtwTmj7erHBXPgCWhG6a3JNXKdCiDl1cidVbXZkJoXQRi5t5BrxwoY71FzU8S4JuAIqFkJ2+BFSlEh525b/hr3+k/AklDkNsf6wTT4yv46KIMNpsy+iMdMc47HNWxbsgVcUn7FmLAzzoFAWDsBx+wVP6bUpp5ewI+DOeUx0Wd9D8F70BTGNjkWtqnhmT1JQAHcUgZd8Lo3rQb1LAT8eJVUfgGvHQigGp+V2Z0iAUUl8QH47kAA1XioxIo+bRN8OG8F/oBjwv+Z1nJgX5jpdzQDw0LCjsPmrcW7I/iHScCAEDj03FtD8A0EyuChHgg4KTlJQF3wZ7WELppnBX+dBFSVpJsOBWi1qiRgSwnOgoyD5hmuJdkWCVhTgnTvW3AgYIFrSbZGh0UW/Io5Vp+DQoK7o80pztWMemZbgxeNwCNwDbw1fIfgGZjhU6xPaJgBV8BdsMw5cbZoHsenwYFxkZzl83xTSKTiviCAfCsJLysH3POfC8m8NegyGAGfLP/VmGmfSChgXroR0RSWjEFv2J/nG84cuKFMf4sTCZqXuJd4KaXFVjEG3+tw4eXbNK/YC9oXXs3O8NY8y99L4BXY5cvLY/Bb2VZ58EOJVcB18DHJq9lRsKr8inyKGVjlmh29mtHs3AHfuhCwy1vXT/Nu2GKQt+UHsGdctyX6eQyNvc+5sfX9Dl7Pe2J/BRgAl2CpwmrsHR0AAAAASUVORK5CYII=";function Qv(){return P.jsxs(P.Fragment,{children:[P.jsx(Wv,{}),P.jsxs("footer",{className:"footer",children:[P.jsx("a",{href:"http://www.harmonic-mixing.com/",target:"_blank",rel:"noopener noreferrer",children:"Learn more about harmonic mixing"}),P.jsx("br",{}),P.jsx("a",{href:"https://github.com/anjunatl/harmonic-mixing",target:"_blank",rel:"noopener noreferrer",children:P.jsx("img",{src:$v,alt:"Github logo icon",width:"32",height:"32"})})]})]})}Lu.createRoot(document.getElementById("root")).render(P.jsx($d.StrictMode,{children:P.jsx(Qv,{})})); diff --git a/dist/index.html b/dist/index.html index ac6ac39..c5e78ff 100644 --- a/dist/index.html +++ b/dist/index.html @@ -5,8 +5,8 @@ Harmonic Mixer - - + +
diff --git a/src/app/CamelotOutput.jsx b/src/app/CamelotOutput.jsx index e9d3e64..dde0bc6 100644 --- a/src/app/CamelotOutput.jsx +++ b/src/app/CamelotOutput.jsx @@ -21,7 +21,7 @@ const CamelotOutput = (props) => { - + @@ -29,10 +29,10 @@ const CamelotOutput = (props) => { {newMixes.map((item, index) => { return ( - + - - + + ) })} diff --git a/src/app/CamelotPicker.jsx b/src/app/CamelotPicker.jsx index daf6fa7..d0e0d5a 100644 --- a/src/app/CamelotPicker.jsx +++ b/src/app/CamelotPicker.jsx @@ -43,13 +43,13 @@ const CamelotPicker = (props) => { const keyNotation = letter !== null ? NoteMapping.getChromaticNotationFromCamelotSignature('' + counter + letter) : null numericButtons.push( ) } diff --git a/src/scss/custom.scss b/src/scss/custom.scss index 2746816..fcdeb90 100644 --- a/src/scss/custom.scss +++ b/src/scss/custom.scss @@ -32,3 +32,222 @@ footer { div#root { justify-content: center; } + +/* 2024 harmonic mixing palette <3 */ + +.segment-1A { + color: #91f2df; + + .bg { + color: #222222; + background-color: #91f2df; + } +} + +.segment-1B { + color: #6beacb; + + .bg { + color: #222222; + background-color: #6beacb; + } +} + +.segment-2A { + color: #a4f1b7; + + .bg { + color: #222222; + background-color: #a4f1b7; + } +} + +.segment-2B { + color: #7aea8b; + + .bg { + color: #222222; + background-color: #7aea8b; + } +} + +.segment-3A { + color: #c4f49f; + + .bg { + color: #222222; + background-color: #c4f49f; + } +} + +.segment-3B { + color: #a2ee68; + + .bg { + color: #222222; + background-color: #a2ee68; + } +} + +.segment-4A { + color: #fadf9a; + + .bg { + color: #222222; + background-color: #fadf9a; + } +} + +.segment-4B { + color: #f7cc60; + + .bg { + color: #222222; + background-color: #f7cc60; + } +} + +.segment-5A { + color: #f7c8b4; + + .bg { + color: #222222; + background-color: #f7c8b4; + } +} + +.segment-5B { + color: #f3a4b2; + + .bg { + color: #222222; + background-color: #f3a4b2; + } +} + +.segment-6A { + color: #f4babf; + + .bg { + color: #222222; + background-color: #f4babf; + } +} + +.segment-6B { + color: #f08e96; + + .bg { + color: #222222; + background-color: #f08e96; + } +} + +.segment-7A { + color: #f4b7d1; + + .bg { + color: #222222; + background-color: #f4b7d1; + } +} + +.segment-7B { + color: #ee89b3; + + .bg { + color: #222222; + background-color: #ee89b3; + } +} + +.segment-8A { + color: #ebb8e5; + + .bg { + color: #222222; + background-color: #ebb8e5; + } +} + +.segment-8B { + color: #e08ad6; + + .bg { + color: #222222; + background-color: #e08ad6; + } +} + +.segment-9A { + color: #dbbefa; + + .bg { + color: #222222; + background-color: #dbbefa; + } +} + +.segment-9B { + color: #c395f8; + + .bg { + color: #222222; + background-color: #c395f8; + } +} + +.segment-10A { + color: #c8d4fb; + + .bg { + color: #222222; + background-color: #c8d4fb; + } +} + +.segment-10B { + color: #a3b8fa; + + .bg { + color: #222222; + background-color: #a3b8fa; + } +} + +.segment-11A { + color: #aae6f9; + + .bg { + color: #222222; + background-color: #aae6f9; + } +} + +.segment-11B { + color: #7ad8f5; + + .bg { + color: #222222; + background-color: #7ad8f5; + } +} + + +.segment-12A { + color: #8ff1f2; + + .bg { + color: #222222; + background-color: #8ff1f2; + } +} + +.segment-12B { + color: #6be9e9; + + .bg { + color: #222222; + background-color: #6be9e9; + } +} \ No newline at end of file
Transition from {currentKey} / {props.camelotKey}Transition from {currentKey} / {props.camelotKey} Key
{item.name}{item.newKey}{item.newMix}{item.newKey}{item.newMix}