/*============= RESET ==============*/
*{margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-wight: 300; box-sozing: border-box; font-family: 'Lato', sans-serif;}
a {text-decoration: none;}
ul {list-style: none;}
img{max-width: 100%;}
/*============= BODY ==============*/
body {float: left; width:100%; background-color: #f1f1f1; padding: 1.5cm 0 0;}
/*============= MAIN ==============*/
.conteudo {float: left; width: 100%; margin: 0; color: #000; background: #f1f1f1; background-image: linear-gradient( to bottom, #f1f1f1 70%, #fff );}
/*============= FOLHA ==============*/
.tam_a4 {width: 210mm; min-height: 296mm; margin-left: auto; margin-right: auto; position: relative; page-break-inside: auto;}
.folha {background: #fff; margin: 0 auto 1.5cm; padding: 13mm 10mm; position: relative; overflow: hidden;}
/*============= MÚSICA ==============*/
.musica {float: left; width: 160mm; background: #fff;}
.perf-musica {float: left; width: 160mm;}
.logo {float: left; width: 45mm;}
.nome_mus {float: left; width: 110mm;}
.nome_mus h1 {width: 93%; float: left; padding: 0% 0% 0% 3%; font-size: 28px; color: #1abc9c; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.art_mus {float: left; width: 110mm;}
.art_mus a {}
.art_mus a h2 {width: 93%; float: left; padding: 0% 0% 0% 3%; font-size: 14px; color: #6f6f6f;}
.comp_mus {float: left; width: 110mm;}
.comp_mus h3 {width: 93%; float: left; padding: 0% 0% 0% 3%; font-size: 12px; color: #6f6f6f;}
/*============= LETRAS ============*/
.letra {float: left; width: 160mm; color: #6f6f6f; font-family: 'Lato', sans-serif; padding: 8mm 0 0 0; font-size: 14pt;}
.letra p {margin-bottom: 10px;}
/*============= CIFRAS ============*/
.cifra {width: 100%; float: left; padding: 3% 0% 0% 0%;}
.cifra p {color: #000; font-size: 1em; text-align: left; font-family: 'Fira Mono','Roboto Mono', 'Courier New', 'Courier', monospace;}
.cifra p b {font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace; font-weight: bold;}
.cifra p u {font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace;}
.cifra p strong {color: #1abc9c; text-align: left; font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace; font-weight: bold;}
.cifra pre {color: #000; font-size: 1em; text-align: left; font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace;}
.cifra pre b {font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace; font-weight: bold;}
.cifra pre u {font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace;}
.cifra pre strong {color: #1abc9c; text-align: left; font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace; font-weight: bold;}
.cifra pre p {color: #000; font-size: 1em; text-align: left; font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace;}
.cifra pre p b {font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace;}
.cifra pre p u {font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace;}
.cifra pre p strong {color: #1abc9c; text-align: left; font-family: 'Fira Mono', 'Roboto Mono', 'Courier New', 'Courier', monospace; font-weight: bold;}
/*============= SIDEBAR ==============*/
.sidebar {float: right; width: 30mm;}
.album   {float: left; width: 30mm;}
.andamento {float: left; width: 30mm;}
.andamento pre {float: left; font-size: 9px;}
/*============= PAINEL DE CONFIGURAÇÕES ==============*/
.config{position:fixed; top:57px; left:50%; margin-left:450px; width:150px; background:#fff}
.box-config {width:130px; padding:10px; }
.config>div+div {border-top:1px solid #eee}
.config .painel {width: 135px; color: #1abc9c; text-align: center; }
.config label{font-size:11px;text-transform:uppercase;display:block;color:#999;margin-bottom:5px}
.config-papper button{display:inline-block;vertical-align:top;width:50px;text-align:center;font-weight:700;padding:8px 0;color:#444}
.config-papper i{display:block;width:12px;height:12px;border-radius:50%;border:2px solid #999;margin:5px auto 0}
.config-papper button:hover i{border-color:#666}.config-papper .on{background:#444;color:#fff;border-radius:6px}
.config-papper .on i{border-color:#fff!important;position:relative}
.config-papper .on i:before{content:'';width:6px;height:6px;position:absolute;top:3px;left:3px;background:#fff;border-radius:50%}
.config-size{float: left; top:15px; right:15px; width:130px; justify-content:space-between}
.config-size label{float: left; width: 130px;}
.config-size button{width:25px; height:45px; vertical-align:top; background:#fff;font-size:15px;color:#6f6f6f;}
.config-size button:hover{border-color:#999}
.config-size .centro {width: 70px; height: 45px; background: #fff; color: #bbb; text-transform: uppercase; font-size: 35px;}
.config-size .paleta {float: left; width: 130px; padding-bottom: 10px; color: #bbb; font-size: 35px; text-align: center;}
.config-size .cores {float: left; width: 130px; height: 25px; color: #bbb; text-transform: uppercase; font-size: 35px;}
.cores .cor {float: left; width: 132px; margin-left: -1px; height: 25px; font-size: 14px;}
.cores .cor a {float: left; padding: 3px; }
.cores .cor a i {padding: 1px;}
.cor #verde    {color: #1abc9c;}
.cor #rosa     {color: #ff4e78;}
.cor #vermelho {color: #ff2536;}
.cor #lilas    {color: #af4ea2;}
.cor #azul     {color: #1a73e8;}
.cor #dourado  {color: #edbb0a;}


.box-imprimir {float: left; width:130px;}
.bt-imprimir{display:block; width:130px; text-align:center; height:32px; border-radius:6px; font:bold 15px/32px sans-serif; color:#fff; background:#1abc9c; margin: 10px 0px 20px 0px;}
.bt-imprimir:hover{background:#149a80;}