*, html, body{ padding: 0; margin: 0; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
html, body{ height: 100%; }
#gerador, #corpo{ float: left; padding:20px 2%; height: calc(100vh - 40px); }
#gerador{ width: 20%;  border-right: 1px solid #ccc; background: #0089D0; }
#gerador p{ color: #fff; font-size: 14px; }
#corpo{ width: calc(72% - 1px); }  
.logo{ width: 180px; height: auto; margin: 20px auto !important; display: inline-block; }
.centro{ text-align: center; }
hr{ border: 0; height: 2px; background: rgba(255, 255, 255, .2); }
label{ color:#fff; padding: 20px 0 5px; display: block; font-size: 14px; }
input{ width: 100%;background: rgba(255, 255, 255, .2); border: 0; padding: 5px; font-size: 14px; color: #fff; }
#assinatura{ padding-top: 100px; }
#assinatura, #botoes{ width: 900px; margin: 0 auto; }
#botoes{ padding-top: 40px; }
.btnDownload, .btnCopiar{ background: #0089D0; color: #fff; margin-right: 10px; 
    padding: 10px; display: inline-block; text-decoration: none; width: auto !important;}
#corpohtml{ display: none;}
.info{ font-size: 12px; color: #0089D0; padding-bottom: 5px; }
@media(max-width: 767px){
    html, body{ width: 100%; }
    #gerador, #corpo{ float: initial; padding:20px 2%; height: auto; }
    #gerador{ width: 96% !important;  border-right: 0; background: #0089D0; }
    #corpo{ width: 96% !important; } 
    table{ width: 100%;}
    #assinatura, #botoes{ width: 100%; margin: 0 auto; }
    input{ width: 96%; }
}