:root{--bg-mobile-bar:rgb(255,255,255);--border-color:rgb(209,213,219);--default-gray:rgb(217,217,217);--primary-color:rgb(112,8,210);--text-main-color:rgb(29,29,29)}.cifra-descktop{position:relative;font-family:Roboto Mono,monospace;color:var(--text-main-color);line-height:1.4em;width:fit-content;white-space:pre-wrap;& b{position:relative;color:var(--primary-color);z-index:1;bottom:0;&:hover{position:relative;cursor:pointer;background-color:var(--primary-color);color:white;&:before{border-radius:3px 0 0 3px;left:-9px}&:after,&:before{content:"  ";background-color:var(--primary-color);position:absolute;top:0;height:100%;z-index:-1}&:after{border-radius:0 3px 3px 0;right:-9px}&:active{background-color:rebeccapurple}}}& pre{letter-spacing:1px}& strong{position:relative;left:25px;font-weight:700;top:10px;b{font-weight:700}}&.refrao:before{position:relative;top:0;content:"Refrão";font-weight:400;font-size:12px;padding:2px;border-radius:3px;background-color:var(--default-gray)}&.final:before{content:"Final"}&.coro:before,&.final:before{position:relative;top:7px;font-weight:400;font-size:12px;padding:2px;border-radius:3px;background-color:var(--default-gray)}&.coro:before{content:"Coro"}}.cifra-inline{position:relative;font-family:Roboto Mono,monospace;color:var(--text-main-color);padding-top:15px;line-height:2.8em;width:fit-content;white-space:pre-wrap;.chord-box{position:relative;background-color:red;& b{position:absolute;left:0;top:-1.1em;height:1.3em;line-height:1.3em;padding:0 8px;left:-8px;border-radius:3px;cursor:pointer;color:var(--primary-color);transition:.2s ease-in-out;&:hover{background-color:rgb(112,8,210);color:white}}}& .blank-line{display:block;height:5px;width:100%;margin-bottom:-1.5em}& strong{display:inline-block;margin-left:25px;margin-bottom:10px;font-weight:700;top:10px;b{font-weight:700}&.refrao:before{position:relative;top:0;content:"Refrão";font-weight:400;font-size:12px;padding:2px;border-radius:3px;background-color:var(--default-gray)}&.final:before{content:"Final"}&.coro:before,&.final:before{position:relative;top:7px;font-weight:400;font-size:12px;padding:2px;border-radius:3px;background-color:var(--default-gray)}&.coro:before{content:"Coro"}}}.letter{line-height:1.6em}.cifra-options-bar{position:fixed;display:flex;flex-direction:row;justify-content:center;align-items:center;overflow:hidden;gap:.25rem;bottom:10px;left:2.5%;width:95%;border-radius:8px;height:3.5rem;z-index:5;box-shadow:0 -2px 12px 5px rgba(0,0,0,.145);background-color:var(--bg-mobile-bar);border-top:1px solid var(--border-color);& .options-bar-button{display:flex;align-items:center;justify-content:center;gap:.1rem;font-size:.75rem;padding:0 .5rem;height:3.5rem;width:33vw;border-right:1px solid var(--border-color)}}@media only screen and (min-width:640px){.cifra{max-width:500px}.cifra-options-bar{position:relative;display:flex;left:0;width:7.5rem;flex-direction:column;background-color:white;padding:.5rem;z-index:5;justify-content:space-around;align-items:center;height:fit-content;box-shadow:none;border:none;& .options-bar-button{height:2rem;width:7rem;padding:.5rem;gap:0;border-radius:.375rem;justify-content:space-between;border:1px solid var(--border-color);cursor:pointer}}}.neck-1{background-image:url(/guitar-neck.svg);background-position-x:7px;background-position-y:-35px;background-repeat:no-repeat;background-size:305px}.neck-2{background-image:url(/guitar-neck.svg);background-position-x:-124px;background-position-y:-2px;background-repeat:no-repeat;background-size:306px}.chord-draw{position:relative;.nut-box{position:absolute;display:flex;flex-direction:row;gap:4px;align-items:center;justify-content:space-between;left:-13px;height:fit-content;width:141px;.nut{display:block;position:relative;height:13px;background:#474747;border-radius:8px}}.note{position:absolute;display:block;height:20px;width:20px;background:#474747;color:white;text-align:center;border-radius:100%;font-size:12px;line-height:21px}.fret-1{top:5px}.fret-2{top:32.5px}.fret-3{top:59px}.fret-4{top:87px}.fret-5{top:117px}.string-1{left:107px}.string-2{left:86px}.string-3{left:64px}.string-4{left:42px}.string-5{left:20px}.string-6{left:-2px}}.chord-strings{position:relative;display:flex;flex-direction:row;justify-content:space-around;margin-top:-20px;.stringPM{position:absolute;display:block;top:0;height:10px;width:10px;border-radius:100%;&:first-child{left:3px}&:nth-child(2){left:23.5px}&:nth-child(3){left:46px}&:nth-child(4){left:68px}&:nth-child(5){left:90px}&:nth-child(6){left:112px}}.string-played-start{background-color:#474747}.string-played{background-color:white;border:1px solid #8d8d8d}.string-muted{margin-top:-7px;&:after{content:"x";font-weight:700}}}.capo-neck{background-image:url(/guitar-neck.svg);background-position-x:2px;background-position-y:-2px;background-repeat:no-repeat;background-size:306px}