body {
  background-color: #E8F3D6;
}
.fragmento{ 
      display: block;  
      float: left;
     /*border: 1px blueviolet solid; */
      height:auto;
      width:auto;
      overflow: auto;
      line-height: 100%;
      justify-content: left;
      position: relative; /* retirar se ficar ruim*/
     /* position:fixed ; melhor relação que achei - static ou sem determinar position*/
}
.setas, #canvas{
  position:absolute;
}
#titulo{
    font-family:Times, "Times New Roman", Georgia, serif;
    font-size: 58px;
}
#compositor{
    font-family:Times, "Times New Roman", Georgia, serif;
    font-size: 14px;
    font-style: italic;
}
.rotulo{
   /* border: 1px blueviolet solid;*/
    display:flex;
    position: absolute;
    line-height: 100%;
    transform: translateX(50%);
    /* float: left;*/
    font-family:Times, "Times New Roman", Georgia, serif;
    font-size: x-large;
    font-weight:bolder;
}
#tabela{
  border: 2px solid rgb(108, 108, 108);
  box-shadow: 10px 5px 5px rgb(156, 156, 156);
  background-color: hsl(0, 0%, 98%);
  margin-bottom: 50px;
  padding-bottom: 50px;
  height:auto;
  width: auto;
  line-height: 100%;  
}
.toolsbar{
  display: none;
  position: fixed;
  border: 1px solid rgb(108, 108, 108);
  box-shadow: 10px 5px 5px rgb(156, 156, 156);
  background-color: hsl(0, 0%, 98%);
  padding: 2px;
  margin: 2px;
  width: 520px;
  height: 46px;
  top:35%;
  left:65%;
}
#AreaAnotacoes{
 /* background-color:rgb(236, 236, 247);*/
  background-color: #E8F3D6;
  height: 100%;
}

.retangulo{
  fill: none;
  stroke:green;
}
/*table, th, td, tr {
  border: 2px solid rgb(108, 108, 108);
}*/
@media print {
  header, footer, nav button, main section {
    display: none;
  }
  html, body {
    margin: 0;
    padding: 0;
    border: 0;
    text-align:center;
}
/* main section.output {
    display: block;

    [fill="#ff0000"] {
        fill: currentColor;
    }  }*/
}