:root {
    --grey900: #212934;
    --grey800: #404b5a;
    --grey700: #4A5768;
    --grey600: #6E7A8A;
    --grey500: #A0ADBA;
    --grey400: #D5DDE5;
    --grey300: #E8EDF2;
    --grey200: #F3F5F7;
    --grey100: #F8F9FA;
    --grey050: #FBFCFD;
    --green900: #103713;
    --green700: #2E7D32;
    --green100: #e8f5e9;
    --red900: #330202;
    --red700: #B71C1C;
    --red500: #D32F2F;
    --red100: #ffe5e8;
    --red050: #FFF5F6;
    --blue900: #093371;
    --blue700: #1565c0;
    --blue500: #2196F3;
    --blue300: #90caf9;
    --blue200: #c5e3fc;
    --blue100: #e3f2fd;
    --blue050: #f5fbff;
    --teal050: #F1F9F9;
    --yellow050: #FFF8E1;
    --yellow200: #FFE082;
  }

img.twemoji, img.gemoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}


  @media screen {

body {
  margin: auto;
  padding-right: 1em;
  padding-left: 1em;
  max-width: 64em;
  color: black;
  font-family: Arial, 'Open Sans', sans-serif;
  line-height: 140%;
  color: #333;
  counter-reset: chapter;
}

pre {
  background-color: #f7f7f7;
  color: #1a6094;
  font-size: 95%;
  line-height: 1.6em;
  margin: 3.5ex 0;
  padding: 2ex;
}

p code {
  font-family: monospace;
  white-space: normal;
}


blockquote,
q {
  quotes: none;
}

blockquote:before,
q:before,
blockquote:after,
q:after {
  content: none;
}

blockquote {
  background-color: #fcfcfc;
  border: 1px solid #dddddd;
  border-left: 3px solid #aab8c6;
  margin-bottom: 10px;
  padding: 5px 5px 10px 40px;
  background-position: 10px 10px;
  background-repeat: no-repeat;
}

blockquote :last-child {
  margin-bottom: 0;
}

li blockquote {
  margin: 0.5em 0 1em;
}

blockquote p {
  margin: 5px;
}

td blockquote{
  margin: 0px;
  margin-top:5px;
  padding: 5px;
  padding-top:35px;
}
.center{
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

figure{
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

figcaption{
  text-align:center;
  margin:1em;
  font-style:italic;
}

.note {
  background-image: url(../images/admin/note.png);
}

.tip,
.truc,
.astuce {
  background-image: url(../images/admin/tip.png);
}

.important {
  background-image: url(../images/admin/important.png);
}

.caution,
.prudence {
  background-image: url(../images/admin/caution.png);
}

.warning,
.attention,
.danger {
  background-image: url(../images/admin/warning.png);
}

.work_in_progress {
  background-image: url(../images/admin/icon-wip.png);
}

.complete {
  background-image: url(../images/admin/icon-complete.png);
}

.incomplete {
  background-image: url(../images/admin/icon-incomplete.png);
}

.not_applicable {
  background-image: url(../images/admin/icon-na.png);
}

.example {
  background-image: url(../images/admin/example.png);
}

blockquote {
  background-color: var(--blue050);
  border: 1px solid var(--blue200);
  border-radius: 3px;
  border-left: normal;
  margin-top: 32px;
  margin-bottom: 40px;
  padding: 6px 16px 12px 52px;
  background-position: 16px 12px;
  background-repeat: no-repeat;
  color: var(--grey900);
}

blockquote.caution,
blockquote.prudence,
blockquote.important {
  background-color: var(--yellow050);
  border: 1px solid var(--yellow200);
}

blockquote.warning,
blockquote.attention,
blockquote.danger {
  background-color: var(--red050);
  border: 2px solid var(--red500);
}

.thanks{
  border:1px solid #ddd;
  padding:0 1em 0;
  font-family: 'Rubik';
}

caption {
  color: var(--grey700);
  font-weight: 700;
  font-size: 0.7rem;
  font-style: normal;
  margin: 0 0.4rem;
  padding: 0.6rem 0;
}

a {
  color: #07c;
  cursor: pointer;
  text-decoration: underline;
}

nav a {
  color: #07c;
  cursor: pointer;
  text-decoration: none;
}

.thanks a {
  text-decoration: none;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
  text-decoration: none;
  color: #000;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: Arial, 'Open Sans';
  font-weight: bold;
  color: #000;
  margin-top: 1.7em;
}
h1 {
  break-before: always;
}

h1.title {
  font-size: 200%;
  font-weight: bold;
  padding-top: 1.2em;
  border: none;
  font-family: 'Rubik', sans-serif;
  text-align: center;
}

h2.subtitle {
  font-size: 180%;
  font-weight: normal;
  padding-bottom: 1.2em;
  padding-left:0px;
  margin-left:0px;
  font-family: 'Rubik', sans-serif;
  text-align: center;
}
dt code {
  font-weight: bold;
}
dd p {
  margin-top: 0;
}

table {
  border-bottom: 1px solid #ddd;
  border-collapse: collapse;
  border-right: 1px solid #ddd;
  border-spacing: 0;
  margin-bottom: 2em;
}

table th {
  background-color: #eee;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 0.4em 1em;
}

table td {
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 0.4em 1em;
  vertical-align: top;
}

.navheader table, .navheader th, .navheader td,
.navfooter table, .navfooter th, .navfooter td {
  background-color: #fff;
  border:0px;
}

.navheader table{
    margin-bottom:1em;
}

.navheader a, .navfooter a {
  text-decoration: none;
}

.headerDiv {
  left:0;
  top:0;
  width:100%;
  margin-left:-1em;
  text-align: center;
}

.banner {
  margin-top:67px;
  width: 100%;
  height: 8px;
  background-color: #43CBCB;
}

.coverlogo {
  height: 60px;
  position:absolute;
  top: 5px;
}

.coverlogo img {
  width: 180px;
  display: block;
  padding: 0px;
  background: #FFFFFF;
}

.productionDiv {
  display:none;
}

.license {
  bottom: 0px;
}

#footer {
  padding-top: 1em;
  font-size: 70%;
  color: gray;
  text-align: center;
}

#pagebreak {
  page-break-before: always;
}

h1 {
  string-set: chapter content();
}

h2,
h3 {
  string-set: section content();
}

nav ul {
  list-style-type: none;
}

img {
  max-width: 100%;
  max-height: 800px;
  margin:3%;
}

hr {
  border: 0;
  color: #ccc;
  background-color: #ccc;
  height: 1px;
}

@page {
  size: A4;
  font-family: Arial, 'Open Sans', sans-serif;
  font-size: 85%;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin-top: 40px;
  margin-bottom: 40px;
  @top-right {
    content: string(section);
  }
  @top-left {
    content: string(chapter);
  }
}

@page frontmatter {
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  @top-right {
    content: "";
  }
  @top-left {
    content: "";
  }
  @bottom-right {
    content: counter(page, lower-roman);
    font-family: Arial, 'Open Sans', sans-serif;
    font-size: 85%;
  }
  @bottom-left {
    content: "";
  }
}
@page frontmatter :left {
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  @top-right {
    content: "";
  }
  @top-left {
    content: "";
  }
  @bottom-left {
    content: counter(page, lower-roman);
    font-family: Arial, 'Open Sans', sans-serif;
    font-size: 85%;
  }
  @bottom-right {
    content: "";
  }
}

@page :first {
  border-top: 0px solid black;
  border-bottom: 0px solid black;
  margin: -20px;
  margin-top: 500px;
  text-align: center;

  @top-right {
    content: "";
  }
  @top-left {
    content: "";
  }
  @bottom-right {
    content: "";
  }
  @bottom-left {
    content: "";
  }
}

@page :right {
  @bottom-right {
    content: counter(page);
    font-family: Arial, 'Open Sans', sans-serif;
    font-size: 85%;
  }
}
@page :left {
  @bottom-left {
    content: counter(page);
  }
}

}

@media print {

  body {
    margin: auto;
    padding-right: 1em;
    padding-left: 1em;
    max-width: 64em;
    color: black;
    font-family: Arial, 'Open Sans', sans-serif;
    font-size: 85%;
    line-height: 140%;
    color: #333;
    counter-reset: chapter;
  }

  pre {
    background-color: #f7f7f7;
    color: #1a6094;
    font-size: 75%;
    line-height: 1.6em;
    margin: 3.5ex 0;
    padding: 2ex;
  }

  p code {
    font-family: monospace;
    white-space: normal;
  }



  /* blockquote,
  q {
    quotes:unset;
  } */

  blockquote:before,
  q:before,
  blockquote:after,
  q:after {
    content: none;
  }

  blockquote {
    background-color: #fcfcfc;
    border: 1px solid #dddddd;
    border-left: 3px solid #aab8c6;
    margin-bottom: 10px;
    padding: 5px 5px 10px 40px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
  }

  blockquote :last-child {
    margin-bottom: 0;
  }

  li blockquote {
    margin: 0.5em 0 1em;
  }

  blockquote p {
    margin: 5px;
  }

  td blockquote{
    margin: 0px;
    margin-top:5px;
    padding: 5px;
    padding-top:35px;
  }
  .center{
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  figure{
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  figcaption{
    text-align:center;
    margin:1em;
    font-style:italic;
  }

  .Note{
    background-image: url(../images/admin/note.png);
  }

  .Tip, .Truc {
    background-image: url(../images/admin/tip.png);
  }

  .Important{
    background-image: url(../images/admin/important.png);
  }

  .Caution, .Prudence{
    background-image: url(../images/admin/caution.png);
  }

  .Warning, .Attention, .Danger{
    background-image: url(../images/admin/warning.png);
  }

  .Complete, .complete {
    background-image: url(../images/admin/icon-complete.png);
  }

  .Incomplete, .incomplete {
    background-image: url(../images/admin/icon-incomplete.png);
  }

  .Not, .not, .not_applicable, .Not_applicable {
    background-image: url(../images/admin/icon-na.png);
  }

  .Not, .not, .not_applicable, .Not_applicable {
    background-image: url(../images/admin/icon-na.png);
  }

  .Work, .work, .work_in_progress, .Work_in_progress, .Work_In_Progress{
    background-image: url(../images/admin/icon-wip.png);
  }




  blockquote {
    background-color: var(--blue050);
    border: 1px solid #c5e3fc;
    border-radius:3px;
    margin-top:10px;
    padding: 6px 16px 12px 52px;
    background-position: 16px 12px;
    background-repeat: no-repeat;
    color:var(--grey900);
  }

  blockquote.Caution, blockquote.Prudence, blockquote.Important {
    background-color:var(--yellow050);
    border:1px solid #FFE082;
  }

  blockquote.Warning, blockquote.Attention, blockquote.Danger {
    background-color:var(--red050);
    border:2px solid #D32F2F;
  }


  .thanks{
    border:1px solid #ddd;
    padding:0 1em 0;
    font-family: 'Rubik';
    position: absolute;
    bottom:10px;
    left:0;
  }

  caption {
    font-style: italic;
    font-weight: bold;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    text-align: left;
  }

  a {
    color: #07c;
    text-decoration: underline;
  }

  nav a {
    color: #07c;
    text-decoration: none;
  }

  .thanks a {
    text-decoration: none;
  }

  h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a {
    text-decoration: none;
    color: #000;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: Arial, 'Open Sans';
    font-weight: bold;
    color: #000;
  }
  h1 {
    font-size: 130%;
    break-before: always;
  }

  h2 {
    font-size: 110%;
  }

  h3 {
    font-size: 95%;
  }

  h4 {
    font-size: 90%;
  }

  h5 {
    font-size: 90%;
  }

  .headerDiv {
    left:0;
    top:0;
    width:100%;
    margin-left:-1em;
  }

  h1.title {
    font-size: 300%;
    font-weight: bold;
    padding-top: 1.0em;
    padding-bottom: 0.2em;
    padding-left:0em;
    font-family: 'Rubik', sans-serif;
    line-height: 150%;
  }

  h2.subtitle {
    font-size: 250%;
    font-weight: normal;
    padding-top: 1.0em;
    padding-bottom: 0.2em;
    padding-left:0px;
    margin-left:0px;
    font-family: 'Rubik', sans-serif;
    line-height: 150%;
  }

  .productionDiv {
    position: absolute;
    bottom:100px;
    left: 0px;
    height:120px;
    width:100%;
  }

  p.productionInfo {
    font-size: 28px;
    font-weight: normal;
    font-family: 'Rubik', sans-serif;
    color: #393D4D;
    border: none;
  }

  p.productionInfoSub {
    font-size: 20px;
    font-weight: normal;
    font-family: 'Rubik', sans-serif;
    color: #393D4D;
    border: none;
  }

  dt code {
    font-weight: bold;
  }
  dd p {
    margin-top: 0;
  }


  table {
    border-bottom: 1px solid #ddd;
    border-collapse: collapse;
    border-right: 1px solid #ddd;
    border-spacing: 0;
    margin-bottom: 2em;
    table-layout: fixed;
    width: 100%;
    font-size: smaller;
  }
  
  table th {
    background-color: #eee;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 0.2em 1em;
    word-wrap: break-word;
  }
  
  table td {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 0.2em 1em;
    vertical-align: top;
    word-wrap: break-word;
  }
  
  .banner {
    display:none;
  }

  .coverlogo {
    width: 84%;
    height: 60px;
    position:absolute;
    bottom: 0px;
    left: 0px;
  }

  .coverlogo img {
    width: 180px;
    display: block;
    padding: 0px;
  }

  .license {
    bottom: 0px;
  }

  #footer {
    padding-top: 1em;
    font-size: 70%;
    color: gray;
    text-align: center;
  }

  #pagebreak {
    page-break-before: always;
  }

  h1 {
    string-set: chapter content();
  }

  h2,
  h3 {
    string-set: section content();
  }

  nav ul {
    list-style-type: none;
  }

  img {
    max-width: 100%;
    max-height: 800px;
    margin:3%;
  }

  hr {
    border: 0;
    color: #ccc;
    background-color: #ccc;
    height: 1px;
  }

  @page {
    size: A4;
    font-family: Arial, 'Open Sans', sans-serif;
    font-size: 85%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-top: 40px;
    margin-bottom: 40px;
    @top-right {
      content: string(section);
    }
    @top-left {
      content: string(chapter);
    }
  }

  @page frontmatter {
    border-top: 1px solid black;
    border-bottom: 1px solid black;

    @top-right {
      content: "";
    }
    @top-left {
      content: "";
    }
    @bottom-right {
      content: counter(page, lower-roman);
      font-family: Arial, 'Open Sans', sans-serif;
      font-size: 85%;
    }
    @bottom-left {
      content: "";
    }
  }
  @page frontmatter :left {
    border-top: 1px solid black;
    border-bottom: 1px solid black;

    @top-right {
      content: "";
    }
    @top-left {
      content: "";
    }
    @bottom-left {
      content: counter(page, lower-roman);
      font-family: Arial, 'Open Sans', sans-serif;
      font-size: 85%;
    }
    @bottom-right {
      content: "";
    }
  }

  @page :first {
    border-top: 8px solid #43CBCB;
    border-bottom: 0px solid black;
    margin: 60px;
    margin-top: 120px;
    padding-left: 0px;

    @top-right {
      content: "";
    }
    @top-left {
      content: "";
    }
    @bottom-right {
      content: "";
    }
    @bottom-left {
      content: "";
    }
  }


  @page :right {
    @bottom-right {
      content: counter(page);
      font-family: Arial, 'Open Sans', sans-serif;
      font-size: 85%;
    }
  }
  @page :left {
    @bottom-left {
      content: counter(page);
    }
  }

  }