mkapuza/report_template.html

## report_template.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>

  <!--  Cover Page-->
  <div style="page-break-after: always;">
    <h1 id="title"> {{ title }}</h1>
      <div id="date">{{date}}</div>
      <div style="text-align: right;"><img style="width: 200px;" src="assets/img/AlliedCrowdsLogo.svg"></div>
  </div>

  <!--  Introduction -->
  <div style="page-break-before: always; width: 100%;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus vitae congue mauris rhoncus aenean. Morbi tempus iaculis urna id volutpat lacus laoreet. Lacus laoreet non curabitur gravida arcu ac tortor. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes. Sed faucibus turpis in eu. Et malesuada fames ac turpis egestas integer eget. Aliquam id diam maecenas ultricies mi eget. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Dui sapien eget mi proin sed libero enim sed faucibus. Aenean et tortor at risus viverra adipiscing at. Ac felis donec et odio pellentesque diam volutpat. Lobortis elementum nibh tellus molestie nunc</p>
    <p>Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Nec ultrices dui sapien eget mi. Dui accumsan sit amet nulla facilisi morbi tempus. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Faucibus in ornare quam viverra orci sagittis eu. Eros in cursus turpis massa tincidunt dui ut. Amet dictum sit amet justo donec enim diam vulputate ut. Enim sit amet venenatis urna cursus eget nunc scelerisque. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Nunc lobortis mattis aliquam faucibus purus. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. In arcu cursus euismod quis</p>
    <p>Leo urna molestie at elementum eu. Diam ut venenatis tellus in. Feugiat scelerisque varius morbi enim nunc faucibus a. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sapien pellentesque habitant morbi tristique senectus et netus. Iaculis nunc sed augue lacus viverra vitae congue. Montes nascetur ridiculus mus mauris vitae ultricies. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Eleifend donec pretium vulputate sapien nec sagittis. Tellus orci ac auctor augue. Id semper risus in hendrerit gravida rutrum. Auctor eu augue ut lectus arcu bibendum at varius. Commodo elit at imperdiet dui accumsan. Iaculis urna id volutpat lacus laoreet non curabitur. Arcu odio ut sem nulla pharetra</p>
    <p>Massa eget egestas purus viverra. Justo nec ultrices dui sapien eget mi. Nibh venenatis cras sed felis eget velit aliquet sagittis. Habitant morbi tristique senectus et netus et. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Nec tincidunt praesent semper feugiat. Lectus nulla at volutpat diam ut venenatis. Egestas purus viverra accumsan in nisl nisi scelerisque. Pretium lectus quam id leo in vitae turpis massa.</p>
    <p>Felis bibendum ut tristique et egestas quis. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Arcu dictum varius duis at. Sit amet tellus cras adipiscing enim eu. Eu tincidunt tortor aliquam nulla facilisi cras. Purus non enim praesent elementum. Neque egestas congue quisque egestas diam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Ipsum faucibus vitae aliquet nec. Interdum velit laoreet id donec ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris. Aliquam eleifend mi in nulla posuere sollicitudin aliquam.</p>
  </div>

  <!-- Table -->
  <div style="page-break-before: always; width: 100%;">
    <div style="width: 85%; display: inline-block;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
    <div style="width: 14%; display: inline-block;">
      <table style="float: right;">
        <tr style="background-color: #405a74; color: white;"><td colspan="2"> Key</td>
        <tr><td><div class="full"></div></td><td>Active</td></tr>
        <tr><td><div class="none"></div></td><td>Not Active</td></tr>
      </table>
    </div>
    <table id="providers" style="margin-top: 30px; margin-left:40px;">
        <thead>
          <tr style="border:none;">
            <th style="border:none;"></th>
            {% for country in top_countries %}
              <th class="rotate"><div><span>{{ country }}</span></div></th>
            {% endfor %}
            <th class="rotate"><div><span>Other</span></div></th>
          </tr>
        </thead>
        <tbody>
          {% for provider in providers %}
          <tr>
            <td><a name="{{ provider['name'] }}2" href="#{{ provider['name'] }}">{{ provider['name'] }}</a></td>
            {% for country in top_countries %}
              {% if country in provider['provider_countries'] and country in provider['provider_full_countries'] %}
                <td><div class="full"</<div></td>
              {% elif country in provider['provider_countries'] and country in provider['provider_half_countries'] %}
                <td><div class="half"></<div></td>
              {% else %}
                <td><div class="none"></<div></td>
              {% endif %}
            {% endfor %}
            <td><div class="{{ provider['other'] }}"></<div></td>
          </tr>
          {% endfor %}
        </tbody>
    </table>
  </div>

  <!--  Content-->
  <div style="page-break-before: always; width: 100%;">
    <hr style="margin-top: 30px;">
    {% for provider in providers %}
      <h2 style="margin-top: 5px; margin-bottom: 0px; display:inline-block;"><a name="{{ provider['name'] }}">{{ provider['name'] }}</a></h2>
      <h4 style="display:inline-block; margin-bottom: 0px; margin-top: 7px; float:right;"> Founded in
        <span style="font-size: 16px">
          {% if provider['year_founded']  == 1900 %}
            2001
          {% else %}
            {{ provider['year_founded'] }}
          {% endif %}
        </span></h4>
      <a style="display: block; margin-top: 3px; font-size: 11.5px;" href="{{ provider['url'] }}">{{ "/".join(provider['url'].split("/")[:3]) }}</a>
      <div style="margin-top: 10px; font-size: 11px;">{{ provider['description'] }}</div>
      {% if provider['offices'] %}
        <div class="col-md-4" id="sidebar">
          <div class="widget widget_contact">
            <h5 style=" margin-top:7px; margin-bottom: 2px;">Address</h5>
            <ul style="margin-top:0px; margin-bottom:0px;">
              <!-- contacts -->
              {% if provider['contacts'] %}
                {% for contact in provider['contacts'] %}
                  <li style="font-size: 11px"><i class="icon-envelope-o"></i><a href="mailto:{{ contact['email'] }}">{{ contact['email'] }}</a></li>
                {% endfor %}
              {% endif %}

              <!-- offices -->
              {% if provider['offices'] %}
                {% for office in provider['offices'] %}
                  <li style="font-size: 11px">
                    {% if office['address_line_1'] %}
                      {{ office['address_line_1'] }}
                    {% endif %}
                    {% if office['address_line_2'] %}
                      {{ office['address_line_2'] }}
                    {% endif %}
                    {% if office['address_line_3'] %}
                      {{ office['address_line_3'] }}
                    {% endif %}
                    {% if office['city'] %}
                      {{ office['city'] }},
                    {% endif %}
                    {% if office['zip_code'] and  office['zip_code'] != '00000' %}
                      {{ office['zip_code'] }}
                    {% endif %}
                    {% if office['country'] %}
                      {{ office['country']['name'] }}
                    {% endif %}
                  </li>
                {% endfor %}
              {% endif %}
            </ul>
            {% if provider['offices'] %}
              <div id="map"></div>
            {% endif %}
          </div>
        </div>
      {% endif %}


      <!--  Countries -->
      <h5 style="margin-top:7px; margin-bottom: 2px;">Active Countries</h5>
      {% if provider['provider_full_countries'] == [] %}
        <span style="font-size: 11px">None</span>
      {% endif %}
      <span style="font-size: 11px">{{ ", ".join(provider['provider_full_countries']) }}</span>
      {% if provider['provider_half_countries'] != [] %}
        <h5 style="margin-top:7px; margin-bottom: 2px;">Semi-Active Countries</h5>
        <span style="font-size: 11px">{{ ", ".join(provider['provider_half_countries']) }}</span>
      {% endif %}
      <!--  Currencies -->
      {% if provider['provider_currencies'] != [] %}
        <h5 style="margin-top:7px; margin-bottom: 2px;">Currencies</h5>
        <span style="font-size: 11px">{{ ", ".join(provider['provider_currencies']) }}</span>
      {% endif %}

      <!--  Social Media -->
      {% if provider['provider_social_medias'] != [] %}
        <h5 style="margin-top:7px; margin-bottom: 2px;">Social Media Sites</h5>

        <ul style="font-size: 11px">
          {% for social_media in provider['provider_social_medias'] %}
            <li><a href="{{social_media}}">{{social_media}}</a></li>
          {% endfor %}
          </ul>
      {% endif %}

      <!--  Languages -->
      {% if provider['provider_languages'] != [] %}
        <h5 style="margin-top:7px; margin-bottom: 2px;">Languages</h5>
        <span style="font-size: 11px">{{ ", ".join(provider['provider_languages']) }}</span>
      {% endif %}
      <div style="text-align: center; font-size: 13px; margin-top: 20px;"><a href="#{{ provider['name'] }}2">Back to Table</a></div>
      <hr style="margin-top: 30px;">
    {% endfor %}
  </div>

</body>
</html>
<style>
  #title {
    font-size: 36px;
    text-align: left;
    border-left: 7px solid #405a74;
    margin-left: 10px;
    padding-left: 10px;
    margin-top: 80px;
  }
  #date {
    text-align: right;
    height: 40px;
    background: #405a74;
    margin-top: 500px;
    margin-bottom: 120px;
    color: white;
    font-size: 30px;
    padding: 10px 22px;
    margin-left: -100px;
    padding-right: 122px;
    margin-right: -100px;
  }
  a:link {
    color: #405a74 !important;
  }

  thead {display: table-header-group;}

  #providers > tbody > tr:nth-child(even) {
    background-color: #eaeaea;
  }

  #providers > thead > tr > th {
    font-weight: 500 !important;
  }

  th.rotate {
    border: none;
    height: 77px;;
    white-space: nowrap;
    border-bottom: 1px solid #404040;
  }

  th.rotate > div {

    transform:
      translate(13px, 28px)
      rotate(315deg);
    width: 20px;
  }
  th.rotate > div > span {
    border-bottom: 1px solid #404040;
    padding: 1px 10px;
    font-size: 11px;
    padding-left: 4px;
  }

  body {
    font-family: "Helvetica Neue";
    color: #404040;
  }
  #league_table {
    width: 100%;
    border-left: 1px solid #404040 !important;
    border-right: 1px solid #404040 !important;
    border-collapse: collapse;
    font-size: 16px;
  }
  #league_table > tbody > tr > td:nth-child(1) {
    border-right: 2px solid #404040 !important;
    background-color: white !important;
  }
  #league_table > tbody > tr:nth-child(odd) {
    background-color: #c5cdd5;
  }
  #league_table_container > tbody > tr > td {
    border: none !important;
  }
  #league_table_container {
    border: none !important;
  }
  #league_table > tbody > tr > td {
      border: none !important;
      text-align: center;
      line-height: 26px;
    }
  #league_table > tbody > tr {
    border-bottom: 1px solid #404040;
  }
  #league_table > tbody > tr > th {
    background: #405a74;
    color: white;
    text-align: center;
    border-top: 1px solid #404040;
    border-bottom: 1px solid #404040;
    border-right: none;
    border-left: none;
    }

  #league_table > tbody > tr > td > img {
      border: none;
      width: 33px;
      margin-top: 2px;
    }

  table {
    font-size: 11px;
      border-top: none !important;
      border-right: none !important;
      border-left: none !important;
      border-collapse: collapse;
  }

  table, th, td {
      border: 1px solid #404040;
  }

  .full {
    margin-left: 4px;
    margin-right: 4px;
    width: 10px;
  	height: 10px;
  	background: #405a74;
  	border-radius: 5px;
  }

  .half {
    margin-left: 4px;
    margin-right: 4px;
    transform: rotate(-45deg);
    width: 0px;
    height: 0px;
    border-right: 5px solid transparent;
    border-top: 5px solid #405a74;
    border-left: 5px solid #405a74;
    border-bottom: 5px solid transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .none {
      margin-left: 8px;
      margin-right: 4px;
      width: 2px;
      height: 2px;
      background: #405a74;
      border-radius: 1px;
  }

  @page {
      font-family: "Helvetica Neue";
      size: A4;
      margin-left: 17mm;
      margin-right: 17mm;
      margin-bottom: 20mm;
      margin-top: 25mm;
      @top-center {
        background: url("assets/img/AlliedCrowdsLogo.svg") no-repeat;
        background-position: center;
        background-size: 30%;
        content: "";
        width: 100%;
        height: 100%;
      }
      @bottom-center{
        content: "\a reports@alliedcrowds.com";
        line-height: 1em;
        white-space: pre;
        color: #999999;
        font-size: .85em;
        margin-top: -10px;
      }
      @bottom-right {
          content: "Page " counter(page) " of " counter(pages);
          font-size: 75%;
      }
  }
  @page :first {
    @top-center {
      content: "";
      background: none;
    }
    @bottom-center{
      content: ""
    }
    @bottom-right {
      content: "";
    }
  }
</style>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	</head>
	<body>

	<!-- Cover Page-->
	<div style="page-break-after: always;">
	<h1 id="title"> {{ title }}</h1>
	<div id="date">{{date}}</div>
	<div style="text-align: right;"><img style="width: 200px;" src="assets/img/AlliedCrowdsLogo.svg"></div>
	</div>

	<!-- Introduction -->
	<div style="page-break-before: always; width: 100%;">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus vitae congue mauris rhoncus aenean. Morbi tempus iaculis urna id volutpat lacus laoreet. Lacus laoreet non curabitur gravida arcu ac tortor. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes. Sed faucibus turpis in eu. Et malesuada fames ac turpis egestas integer eget. Aliquam id diam maecenas ultricies mi eget. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Dui sapien eget mi proin sed libero enim sed faucibus. Aenean et tortor at risus viverra adipiscing at. Ac felis donec et odio pellentesque diam volutpat. Lobortis elementum nibh tellus molestie nunc</p>
	<p>Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Nec ultrices dui sapien eget mi. Dui accumsan sit amet nulla facilisi morbi tempus. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Faucibus in ornare quam viverra orci sagittis eu. Eros in cursus turpis massa tincidunt dui ut. Amet dictum sit amet justo donec enim diam vulputate ut. Enim sit amet venenatis urna cursus eget nunc scelerisque. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Nunc lobortis mattis aliquam faucibus purus. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. In arcu cursus euismod quis</p>
	<p>Leo urna molestie at elementum eu. Diam ut venenatis tellus in. Feugiat scelerisque varius morbi enim nunc faucibus a. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sapien pellentesque habitant morbi tristique senectus et netus. Iaculis nunc sed augue lacus viverra vitae congue. Montes nascetur ridiculus mus mauris vitae ultricies. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Eleifend donec pretium vulputate sapien nec sagittis. Tellus orci ac auctor augue. Id semper risus in hendrerit gravida rutrum. Auctor eu augue ut lectus arcu bibendum at varius. Commodo elit at imperdiet dui accumsan. Iaculis urna id volutpat lacus laoreet non curabitur. Arcu odio ut sem nulla pharetra</p>
	<p>Massa eget egestas purus viverra. Justo nec ultrices dui sapien eget mi. Nibh venenatis cras sed felis eget velit aliquet sagittis. Habitant morbi tristique senectus et netus et. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Nec tincidunt praesent semper feugiat. Lectus nulla at volutpat diam ut venenatis. Egestas purus viverra accumsan in nisl nisi scelerisque. Pretium lectus quam id leo in vitae turpis massa.</p>
	<p>Felis bibendum ut tristique et egestas quis. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Arcu dictum varius duis at. Sit amet tellus cras adipiscing enim eu. Eu tincidunt tortor aliquam nulla facilisi cras. Purus non enim praesent elementum. Neque egestas congue quisque egestas diam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Ipsum faucibus vitae aliquet nec. Interdum velit laoreet id donec ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris. Aliquam eleifend mi in nulla posuere sollicitudin aliquam.</p>
	</div>

	<!-- Table -->
	<div style="page-break-before: always; width: 100%;">
	<div style="width: 85%; display: inline-block;">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<div style="width: 14%; display: inline-block;">
	<table style="float: right;">
	<tr style="background-color: #405a74; color: white;"><td colspan="2"> Key</td>
	<tr><td><div class="full"></div></td><td>Active</td></tr>
	<tr><td><div class="none"></div></td><td>Not Active</td></tr>
	</table>
	</div>
	<table id="providers" style="margin-top: 30px; margin-left:40px;">
	<thead>
	<tr style="border:none;">
	<th style="border:none;"></th>
	{% for country in top_countries %}
	<th class="rotate"><div><span>{{ country }}</span></div></th>
	{% endfor %}
	<th class="rotate"><div><span>Other</span></div></th>
	</tr>
	</thead>
	<tbody>
	{% for provider in providers %}
	<tr>
	<td><a name="{{ provider['name'] }}2" href="#{{ provider['name'] }}">{{ provider['name'] }}</a></td>
	{% for country in top_countries %}
	{% if country in provider['provider_countries'] and country in provider['provider_full_countries'] %}
	<td><div class="full"</<div></td>
	{% elif country in provider['provider_countries'] and country in provider['provider_half_countries'] %}
	<td><div class="half"></<div></td>
	{% else %}
	<td><div class="none"></<div></td>
	{% endif %}
	{% endfor %}
	<td><div class="{{ provider['other'] }}"></<div></td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>

	<!-- Content-->
	<div style="page-break-before: always; width: 100%;">
	<hr style="margin-top: 30px;">
	{% for provider in providers %}
	<h2 style="margin-top: 5px; margin-bottom: 0px; display:inline-block;"><a name="{{ provider['name'] }}">{{ provider['name'] }}</a></h2>
	<h4 style="display:inline-block; margin-bottom: 0px; margin-top: 7px; float:right;"> Founded in
	<span style="font-size: 16px">
	{% if provider['year_founded'] == 1900 %}
	2001
	{% else %}
	{{ provider['year_founded'] }}
	{% endif %}
	</span></h4>
	<a style="display: block; margin-top: 3px; font-size: 11.5px;" href="{{ provider['url'] }}">{{ "/".join(provider['url'].split("/")[:3]) }}</a>
	<div style="margin-top: 10px; font-size: 11px;">{{ provider['description'] }}</div>
	{% if provider['offices'] %}
	<div class="col-md-4" id="sidebar">
	<div class="widget widget_contact">
	<h5 style=" margin-top:7px; margin-bottom: 2px;">Address</h5>
	<ul style="margin-top:0px; margin-bottom:0px;">
	<!-- contacts -->
	{% if provider['contacts'] %}
	{% for contact in provider['contacts'] %}
	<li style="font-size: 11px"><i class="icon-envelope-o"></i><a href="mailto:{{ contact['email'] }}">{{ contact['email'] }}</a></li>
	{% endfor %}
	{% endif %}

	<!-- offices -->
	{% if provider['offices'] %}
	{% for office in provider['offices'] %}
	<li style="font-size: 11px">
	{% if office['address_line_1'] %}
	{{ office['address_line_1'] }}
	{% endif %}
	{% if office['address_line_2'] %}
	{{ office['address_line_2'] }}
	{% endif %}
	{% if office['address_line_3'] %}
	{{ office['address_line_3'] }}
	{% endif %}
	{% if office['city'] %}
	{{ office['city'] }},
	{% endif %}
	{% if office['zip_code'] and office['zip_code'] != '00000' %}
	{{ office['zip_code'] }}
	{% endif %}
	{% if office['country'] %}
	{{ office['country']['name'] }}
	{% endif %}
	</li>
	{% endfor %}
	{% endif %}
	</ul>
	{% if provider['offices'] %}
	<div id="map"></div>
	{% endif %}
	</div>
	</div>
	{% endif %}



	<!-- Countries -->
	<h5 style="margin-top:7px; margin-bottom: 2px;">Active Countries</h5>
	{% if provider['provider_full_countries'] == [] %}
	<span style="font-size: 11px">None</span>
	{% endif %}
	<span style="font-size: 11px">{{ ", ".join(provider['provider_full_countries']) }}</span>
	{% if provider['provider_half_countries'] != [] %}
	<h5 style="margin-top:7px; margin-bottom: 2px;">Semi-Active Countries</h5>
	<span style="font-size: 11px">{{ ", ".join(provider['provider_half_countries']) }}</span>
	{% endif %}
	<!-- Currencies -->
	{% if provider['provider_currencies'] != [] %}
	<h5 style="margin-top:7px; margin-bottom: 2px;">Currencies</h5>
	<span style="font-size: 11px">{{ ", ".join(provider['provider_currencies']) }}</span>
	{% endif %}

	<!-- Social Media -->
	{% if provider['provider_social_medias'] != [] %}
	<h5 style="margin-top:7px; margin-bottom: 2px;">Social Media Sites</h5>

	<ul style="font-size: 11px">
	{% for social_media in provider['provider_social_medias'] %}
	<li><a href="{{social_media}}">{{social_media}}</a></li>
	{% endfor %}
	</ul>
	{% endif %}

	<!-- Languages -->
	{% if provider['provider_languages'] != [] %}
	<h5 style="margin-top:7px; margin-bottom: 2px;">Languages</h5>
	<span style="font-size: 11px">{{ ", ".join(provider['provider_languages']) }}</span>
	{% endif %}
	<div style="text-align: center; font-size: 13px; margin-top: 20px;"><a href="#{{ provider['name'] }}2">Back to Table</a></div>
	<hr style="margin-top: 30px;">
	{% endfor %}
	</div>

	</body>
	</html>
	<style>
	#title {
	font-size: 36px;
	text-align: left;
	border-left: 7px solid #405a74;
	margin-left: 10px;
	padding-left: 10px;
	margin-top: 80px;
	}
	#date {
	text-align: right;
	height: 40px;
	background: #405a74;
	margin-top: 500px;
	margin-bottom: 120px;
	color: white;
	font-size: 30px;
	padding: 10px 22px;
	margin-left: -100px;
	padding-right: 122px;
	margin-right: -100px;
	}
	a:link {
	color: #405a74 !important;
	}

	thead {display: table-header-group;}

	#providers > tbody > tr:nth-child(even) {
	background-color: #eaeaea;
	}

	#providers > thead > tr > th {
	font-weight: 500 !important;
	}

	th.rotate {
	border: none;
	height: 77px;;
	white-space: nowrap;
	border-bottom: 1px solid #404040;
	}

	th.rotate > div {

	transform:
	translate(13px, 28px)
	rotate(315deg);
	width: 20px;
	}
	th.rotate > div > span {
	border-bottom: 1px solid #404040;
	padding: 1px 10px;
	font-size: 11px;
	padding-left: 4px;
	}

	body {
	font-family: "Helvetica Neue";
	color: #404040;
	}
	#league_table {
	width: 100%;
	border-left: 1px solid #404040 !important;
	border-right: 1px solid #404040 !important;
	border-collapse: collapse;
	font-size: 16px;
	}
	#league_table > tbody > tr > td:nth-child(1) {
	border-right: 2px solid #404040 !important;
	background-color: white !important;
	}
	#league_table > tbody > tr:nth-child(odd) {
	background-color: #c5cdd5;
	}
	#league_table_container > tbody > tr > td {
	border: none !important;
	}
	#league_table_container {
	border: none !important;
	}
	#league_table > tbody > tr > td {
	border: none !important;
	text-align: center;
	line-height: 26px;
	}
	#league_table > tbody > tr {
	border-bottom: 1px solid #404040;
	}
	#league_table > tbody > tr > th {
	background: #405a74;
	color: white;
	text-align: center;
	border-top: 1px solid #404040;
	border-bottom: 1px solid #404040;
	border-right: none;
	border-left: none;
	}

	#league_table > tbody > tr > td > img {
	border: none;
	width: 33px;
	margin-top: 2px;
	}

	table {
	font-size: 11px;
	border-top: none !important;
	border-right: none !important;
	border-left: none !important;
	border-collapse: collapse;
	}

	table, th, td {
	border: 1px solid #404040;
	}

	.full {
	margin-left: 4px;
	margin-right: 4px;
	width: 10px;
	height: 10px;
	background: #405a74;
	border-radius: 5px;
	}

	.half {
	margin-left: 4px;
	margin-right: 4px;
	transform: rotate(-45deg);
	width: 0px;
	height: 0px;
	border-right: 5px solid transparent;
	border-top: 5px solid #405a74;
	border-left: 5px solid #405a74;
	border-bottom: 5px solid transparent;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}

	.none {
	margin-left: 8px;
	margin-right: 4px;
	width: 2px;
	height: 2px;
	background: #405a74;
	border-radius: 1px;
	}

	@page {
	font-family: "Helvetica Neue";
	size: A4;
	margin-left: 17mm;
	margin-right: 17mm;
	margin-bottom: 20mm;
	margin-top: 25mm;
	@top-center {
	background: url("assets/img/AlliedCrowdsLogo.svg") no-repeat;
	background-position: center;
	background-size: 30%;
	content: "";
	width: 100%;
	height: 100%;
	}
	@bottom-center{
	content: "\a reports@alliedcrowds.com";
	line-height: 1em;
	white-space: pre;
	color: #999999;
	font-size: .85em;
	margin-top: -10px;
	}
	@bottom-right {
	content: "Page " counter(page) " of " counter(pages);
	font-size: 75%;
	}
	}
	@page :first {
	@top-center {
	content: "";
	background: none;
	}
	@bottom-center{
	content: ""
	}
	@bottom-right {
	content: "";
	}
	}
	</style>