:root {
  --bg-color-light: #d4eefc;
  --bg-color-dark: #a2d5ed;
  --color-red: #ee0000;
  --color-blue: #00519c;
  --color-text: #252525;
  --color-link: var(--color-blue);

  --color-chapter-a: #DA2128;
  --color-chapter-b: #FF8833;
  --color-chapter-c: #78B099;
  --color-chapter-d: #00529C;
}

body {
    font-family: Open Sans, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    margin: 10px 10px 100px 10px;
    color: var(--color-text);
}

h1 {
    font-size: 24px;
}

h2 {
    margin-top: 30px;
    font-size: 20px;
}

h3, h4 {
    font-size: 18px;
}

h2.chapter-a {
    color: var(--color-chapter-a);
}
h2.chapter-b {
    color: var(--color-chapter-b);
}
h2.chapter-c {
    color: var(--color-chapter-c);
}
h2.chapter-d {
    color: var(--color-chapter-d);
}

a {
    color: var(--color-link);
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
}


span.reference {
    color: var(--color-blue);
}

span.note {
    color: var(--color-blue);
    font-weight: bold;
}

body.body-chapter-a span.note {
    color: var(--color-red);
}

.red {
    color: var(--color-red);
}

div.important, p.important, div.release_button, p.release_button {
    position: relative;
    padding: 10px 10px 10px 55px;
}

div.important, p.important {
    background-color: var(--bg-color-light);
}

div.important:before, p.important:before, div.release_button:before, p.release_button:before {
    background-size: contain;
    content: " ";

    position: absolute;
    left: -8px;
    top: -9px;
    width: 55px;
    height: 55px;
}

div.important:before, p.important:before {
    background-image: url(../img/important.svg);
}

div.release_button:before, p.release_button:before {
    background-image: url(../img/release_button.svg);
}

div.note, p.note {
    background-color: var(--bg-color-light);
    padding: 10px;
}

span.icon {
    display: inline-block;
    margin: 0 5px;
}

.icon-aider {
    background-size: contain;
    width: 10px;
    height: 25px;
}

.icon-aider1 {
    background-image: url(../img/aider-1.svg);
}

.icon-aider2 {
    background-image: url(../img/aider-2.svg);
}

span.icon-phone {
    width: 25px;
    height: 18px;

    margin: 0 0 -2px 0;

    background-image: url(../img/icon_tmas.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* pdf links */
a[href*=".pdf"]::before {
    display: inline-block;
    content: " ";

    width: 22px;
    height: 22px;

    margin-top: 5px;
    margin-right: 5px;
    vertical-align: text-bottom;

    background-image: url(../img/icon_pdf.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

table th, table td {
    padding: 5px;
    text-align: left;
    vertical-align: top;
}
table tr:nth-child(odd) {
    background-color: var(--bg-color-dark);
}

table tr:nth-child(even) {
    background-color: var(--bg-color-light);
}

table thead + tbody tr:nth-child(odd) {
    background-color: var(--bg-color-light)
}

table thead + tbody tr:nth-child(even) {
    background-color: var(--bg-color-dark);
}

table.horizontal tr {
    background: none;
}
table.horizontal td:nth-child(odd) {
    background-color: var(--bg-color-light);
}

table.horizontal td:nth-child(even) {
    background-color: var(--bg-color-dark);
}

table.no_background tr,  table.no_background td {
    background: none;
}

ul, ol {
    padding-left: 25px;
}

ul {
    list-style-type: square;
}

ul > li::marker {
    color: var(--color-blue);
    content: "◼  ";
    font-size: smaller;
}

body.body-chapter-a ul > li::marker {
    color: var(--color-red);
}

ul ul > li::marker, li.arrow::marker {
    content: "➤  ";
    font-size: smaller;
}

ul ul {
    padding-left: 22px;
}

ul > li.list_no_numbered_text,
ol > li.list_no_numbered_text,
ol > li.list_no_numbered_text::marker {
    list-style-type: none;
    marker: none;
}

ul > li.list_no_numbered_text::marker,
ol > li.list_no_numbered_text::marker {
    content: "";
}

li {
	margin: 5px 0;
}

li img {
	margin: 5px 0 0 0;
}

li.restart {
    counter-set: list-item 1;
}

@media (max-width: 500px)
{
    img {
        width: 100%;
    }
}

@media (max-width: 1023px)
{
    video {
        width: 100%;
    }
}

@media (min-width: 1024px)
{
    video {
        min-width: 600px;
    }
}