@import 'colors';

@page {
  size: A4;
  font-family: 'Source Sans Pro', sans-serif;
  color: #333;
  font-size: 15px;
  margin: 120pt 60pt 70pt 60pt;

  @bottom-right {
    content: counter(page) " / " counter(pages);
  }

  @bottom-center {
    content: 'qabel.de';
    font-weight: bold;
    color: $orange;
  }

  @top-center {
    content: '';
    background-image: url('/static/images/banner.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width:100%;
    height:120pt;
    padding: 0pt 30pt;
  }

  @top-right {
    z-index: 10;
    color:white;
    white-space: nowrap;
    //font-size: 1.4em;
    /*content filled in template*/
  }

  @top-left {
    z-index: 10;
    width: 75%;
    color:white;;
    font-size: 1.4em;
    padding-left: 50pt;
    /*content filled in template*/
  }
}

body {
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

.header {
  width: 100%;
  color: $orange;
}

.header h1 {
  text-align: center;
}

.logo {
  position: absolute;
  top: -24pt;
  right: -15pt;
  max-height: 30pt;
}

.header-date {
  padding-right: 30px;
  text-align: right;
}

h1, h2, h3, h4,
.h1, .h2, .h3 {
  font-weight: bold;
  break-after: avoid-page;
  page-break-after: avoid;
}

body > div {
  background-color: #fff;
  padding-bottom: 15px;
}

.document {
  padding-top: 10pt;
}

p {
  page-break-inside: avoid;
  orphans: 2;
  widows: 2;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}


ul, ol {
  page-break-inside: avoid;

  > ::marker {
    color: $orange;
    font-weight: bold;
  }
}

hr{
  border: none;
  border-top: 1px solid black;
}

table {
  width: 100%;
  border-collapse:collapse;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

ul {
  list-style: none;

  > li {
    &::marker {
      font-family: 'Material Icons';
      content: 'play_arrow';
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      line-height: 1.1;
      font-size: 1.2em;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;
    }

    ul {
      list-style: none;

      > li::marker {
        font-family: 'Material Icons Outlined';
        content: 'play_arrow';
        font-weight: normal;
        font-style: normal;
        display: inline-block;
        line-height: 1.1;
        font-size: 1.2em;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
      }
    }
  }
}

@media screen {
  body{
    background: #333333;
  }
  .container{
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 100px;
  }
}
