report_styles.css

@page {
    margin: 3cm 2cm;
    size: A4;
    background:#fff;

   

    @top-left {
        content: '';
        background-image: url('logo_mini.svg');
        font-size: 9pt;
        height: 1.2cm;
        vertical-align: middle;
        width: 4cm;
        margin-bottom: .4cm;
      }
     

    @top-right {
      content: '';
      background-image: url('test.svg');
      font-size: 9pt;
      height: 2cm;
      vertical-align: middle;
      width: 2cm;

      margin-bottom: .4cm;
    }
    @bottom-left {
      background: transparent;
      color: #3d3d3d;
      content: "powered by Weasyprint";
      display: block;
      height: 1cm;
      width: 400px;
      margin-bottom: .1cm;
    }

    @bottom-center {
        background: #5fbcd3;
        content: '';
        display: block;
        height: .05cm;
        width: 100%;
        margin-bottom: .1cm;
    }

    @bottom-right {
      background:transparent;
      color:#303030;
      content: "Page C-"counter(page);
      height: 1cm;
      text-align: right;
      width: 2cm;
      margin-bottom: .1cm;
    }
   
  }

  @page no-chapter {
    @top-left { background: none; content: none }
    @top-center { content: none }
    @top-right { content: none }
  }




  @page chapter {
    background: #3d3d3d;
    margin: 0;
    @top-left { content: none }
    @top-center { content: none }
    @top-right { content: none }
  }



  html {
    color: #393939;
    font-family: Noto Sans;
    font-size: 10pt;
    font-weight: 400;
    line-height: 1.4;
  }


  h1, h2,h3, h4, h5{
    font-family: Noto Sans;
}
p {
  margin: 2px auto;
}

#page1 {
  align-content: space-between;
  display: flex;
  flex-wrap: wrap;
  height: 297mm;
  page: chapter;
  break-after: page;
}

#page1 #tit_page1{
  flex: 1 100%;
}


#page1 #tit_page1 h2{
  color:#fff;
  text-align: center;

}

#page1 #tit_page1 h3{
  color:#a8a8a8;
  text-align: center;
 
}


#page1  div#logo {
  flex: 1 100%;
  width: 360px;
  padding: 1cm 0;
  margin-top:8cm;
  white-space: pre-wrap;
  background: url(logo.svg) no-repeat center transparent;
}

#page1 address {
  color: #000;
  background: #5fbcd3;
  font-family: Noto Sans;
  font-weight: bold;
  flex: 1 50%;
  padding: 1cm 0;
  border:1px #5fbcd3 solid;
  white-space: pre-wrap;
}
#page1 address:first-of-type {
  padding-left: 3cm;
  text-align: left;
  border-top-left-radius: 80px 80px;
}
#page1 address:last-of-type {
  padding-right: 3cm;
  text-align: right;
  border-top-right-radius: 80px 80px;
}
#page1_ips{
  page-break-before:auto;
  page-break-after:auto;
  page: chapter;
  padding:3cm;
}
#page1_ips h2 {

  margin-top: 8cm;
  margin-bottom: 3cm;
  color:#fff;
}
#page1_ips h3 {
  font-weight: 500;
  margin: 3em 0 1em;
  color:#a8a8a8;
}

#page1_ips h3::before {
  background: #5fbcd3;
  content: '';
  display: block;
  height: .08cm;
  margin-bottom: .25cm;
  width: 2cm;
}

#page1_ips  ul {
  list-style: none;
  padding-left: 0;
}
#page1_ips  ul li {
  border-top: .25pt solid #c1c1c1;
  margin: .25cm 0;
  padding-top: .25cm;
  color:#c1c1c1;
  font-size: 12pt;
}
#page1_ips  ul li::before {
  color: #5fbcd3;
  content: '• ';
  font-size: 12pt;
  line-height: 16pt;
  vertical-align: bottom;
}
#page1_ips ul li a {
  color: inherit;
  text-decoration-line: inherit;
}
#page1_ips  ul li a::before {
  content: target-text(attr(href));
}
#page1_ips  ul li a::after {
  color: #5fbcd3;
  content: "C-" target-counter(attr(href), page);
  float: right;
}


  #report {
    break-after: page;
  }

  [id^=ip_]{
    break-before: page;
    break-after: page;
  }


#top_class{
    display: flex; 
    padding:1px;
    margin-bottom: 10px;
}


#title_class{
    font-family: Noto Sans;
    text-align: left; 
    flex: 1 60%;
    flex-grow: 1;
    padding:0;
    vertical-align: middle;
}

#idnum{
    flex: 1 40%;
    text-align: right;
    vertical-align: middle;
    font-size: 10pt;
}

#idnum span.highlighted{
    background-color: #3e5cad;
    color:#fff;
    padding:5px;
    border-radius: 3px;
}



#idnum small{
font-size: smaller;
}


[id^=title_class] span.title_line{
    margin: 0px auto;
    padding:0;
    font-size: 11pt;
    font-weight: 600;
    color: #3c3c3c;
}

[id^=title_class] span.sectors{
    margin: 0px auto;
    padding:0;
    font-weight: bold;
    color: #6c6c6c;
    font-weight: 400;
    font-size: 7pt;
}


[id^=starter] {
    text-align: justify;
}

[id^=starter] div.dados{
  width: 50%;
}

[id^=starter] div.dados-40{
  width: 40%;
}
[id^=starter]  div.dados-60{
  width: 60%;
}

[id^=charts_cplm]  div.box_chart{
  width: 50%;
}

.info_data_contact{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;

 
}

.info_data_contact p{
  flex: 1 100%;
  text-align: center;
}

.info_data_contact div{
 
  padding:4px;
  margin:2px;
  border-radius: 5px;
  background-color: #efefef;
}

.info_data_contact div p{
 
  text-align: left;
}

.container{
  max-width: 20cm;
	margin: 0.5cm auto;
	display: flex;
	border: none;
  justify-content: space-between;
}
.rowx {
	flex-direction: row;
}


.box_chart{
  width: 50%;
  flex: 1;
  text-align: center;
  vertical-align: middle;
}



#chart_time div.box_chart_time{
  height: 12cm;
  margin: 0px auto;
  text-align: center;
}


.chart_time2 div{
  height: 6cm;
  margin: 0px auto;
  text-align: center;

}
.chart_time2 div img{
  max-height:6cm;
  image-rendering: auto;
}


#cadastro div.c_grupo3{
  display: flex;
    /* flex-wrap: wrap; */
    flex-flow: row wrap;
    width: 30%;
}

#top_20_ip, [id^=top_10_url]{
    page-break-inside: avoid;
 }

table { margin:0px auto; 
  width:100%;
  table-layout: auto; 
  font-size: 8pt; 
  border: 0.2px #000 solid; 
  border-collapse: collapse; 
  border-spacing: 0} 
td {text-align: left;
  border: 0.4px #000 solid; 
  padding: 1px;
} 
th{ text-align:center; 
  font-size: 6pt; 
  border: 0.4px #000 solid;
  background-color:rgb(190, 176, 199);
  padding: 1px;}

td.internacional{
    font-weight: bold;
    color: #3e5cad;
  }


.icon_text{
  max-height: 60px;
  height: 60px;
  vertical-align: middle;
}

.mini, .mini2{
  font-size: 7pt;
  margin: 2px auto;
}
.mini2{
  text-align: center;
  margin: 2px auto;
}

.med{
  font-size: 10pt;
  margin: 2px auto;
}
svg {
  vertical-align:middle;
  display: inline-block;
  image-rendering: auto;
}