.tuner-container{border:solid 1px #ddd;-webkit-user-select:none;-moz-user-select:none;display:block;position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:500px;height:500px;padding:0;overflow:hidden;margin:15px auto;background:#f7f7f7;border-width:2px;border-color:#afafaf;border-style:dashed;border-radius:4px}.tuner-container *{box-sizing:border-box;font-family:Arial,Verdana,"Sans Serif";line-height:1.2;color:#666}.tuner-container .start-button{transition:all 0.3s;position:absolute;padding:20px;text-align:center;font-size:40px;font-weight:700;color:#45ccc2;cursor:pointer;border:solid 3px #45ccc2;border-radius:10px;background:#fff;-webkit-box-shadow:0 0 20px 0 rgb(0 0 0 / .15),0 0 100px 100px rgb(255 255 255 / .5);-moz-box-shadow:0 0 20px 0 rgb(0 0 0 / .15),0 0 100px 100px rgb(255 255 255 / .5);box-shadow:0 0 20px 0 rgb(0 0 0 / .15),0 0 100px 100px rgb(255 255 255 / .5)}.tuner-container .start-button:hover,.tuner-container .start-button:active{background:#45ccc2!important;border:solid 3px #309d94!important;outline:none;color:#ffffff!important}.tuner-container .notes{margin:auto;width:100%;position:absolute;top:35%;left:0;right:0;text-align:center}.tuner-container .note{font-size:90px;font-weight:700;position:relative;display:inline-block;padding-right:30px;padding-left:10px;margin:30px 0}.tuner-container .note.violin{border:solid 3px #45ccc2;border-radius:10px;background:#fff;-webkit-box-shadow:0 0 20px 0 rgb(0 0 0 / .15);-moz-box-shadow:0 0 20px 0 rgb(0 0 0 / .15);box-shadow:0 0 20px 0 rgb(0 0 0 / .15)}.tuner-container .notes-list{overflow:auto;overflow-x:hidden;overflow:-moz-scrollbars-none;white-space:nowrap;-ms-overflow-style:none;-webkit-mask-image:-webkit-linear-gradient(left,#fff0,#fff,#fff0)}.tuner-container .notes-list::-webkit-scrollbar{display:none}.tuner-container .note{-webkit-tap-highlight-color:#fff0}.tuner-container .note span{position:absolute;right:.25em;font-size:40%;font-weight:400}.tuner-container .note-sharp{top:.3em}.tuner-container .note-octave{bottom:.3em}.tuner-container .note.active,.tuner-container .note.active .note-sharp,.tuner-container .note.active .note-octave{color:#45ccc2}.tuner-container .frequency-info{float:left;width:auto;text-align:left;padding:0 0 0 5%;margin:10px 0 0 0;font-size:36px;line-height:42px;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}.tuner-container .frequency-info.high{color:#c12626}.tuner-container .frequency-info.low{color:#2687c1}.tuner-container .frequency-info.good{color:#45ccc2}.tuner-container .frequency{float:right;width:auto;text-align:right;padding:0 5% 0 0;margin:10px 0 0 0;font-size:42px;line-height:42px}.tuner-container .frequency span{font-size:50%;margin-left:.25em}.tuner-container .meter{position:absolute;left:0;right:0;bottom:30%;width:65%;height:65%;margin:0 auto 0 auto}.tuner-container .meter-pointer{width:2px;height:100%;background:#2c3e50!important;transform:rotate(45deg);transform-origin:bottom;transition:transform 0.5s;position:absolute;right:50%}.tuner-container .meter-dot{width:10px;height:10px;background:#2c3e50;border-radius:50%;position:absolute;bottom:-5px;right:50%;margin-right:-4px}.tuner-container .meter-scale{width:1px;height:100%;transform-origin:bottom;transition:transform 0.2s;box-sizing:border-box;border-top:10px solid;position:absolute;right:50%}.tuner-container .meter-scale-strong{width:2px;border-top-width:20px}.tuner-container .frequency-bars{position:absolute;bottom:0;width:100%;height:100%}.tuner-container .swal-button{background:#2c3e50}.play-notes{display:block;width:auto;margin:20px auto;text-align:center}.play-notes *{display:inline-block;box-sizing:border-box;transition:all 0.3s}.play-notes br{display:inline-block;clear:none;float:left;display:none}.play-notes .play-note{display:inline-block;margin:10px;padding:0;height:100px;width:100px;font-family:Arial,Verdana,"Sans Serif";font-size:75px;line-height:90px;font-weight:700;text-align:center;background:#fff;color:#45ccc2;border:solid 3px #45ccc2;border-radius:10px;box-shadow:none;cursor:pointer}.play-notes .play-note:hover,.play-notes .play-note.active{background:#45ccc2!important;border:solid 3px #309d94!important;outline:none;color:#ffffff!important}.play-notes .play-note:focus{outline:none}