@charset "UTF-8";
.opo-tests {
  position: relative;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .opo-tests, .opo-tests input, .opo-tests button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em; }
  .opo-tests a[href] {
    text-decoration: none; }
  .opo-tests a[href], .opo-tests button {
    cursor: pointer;
    transition-duration: 1s;
    transition-property: color; }
    .opo-tests a[href]:hover, .opo-tests button:hover {
      transition-duration: 0.15s; }
  .opo-tests button, .opo-tests input {
    border-width: 0.1em;
    border-style: solid;
    border-radius: 0.3em; }
  .opo-tests a[href], .opo-tests button, .opo-tests input {
    outline: none; }
  .opo-tests button {
    transition-property: color,background-color,border-color,box-shadow; }
  .opo-tests input {
    transition-property: border-color,box-shadow;
    transition-duration: 1s; }
    .opo-tests input:focus {
      transition-duration: 0.15s; }
  .opo-tests [data-icon]::before {
    margin-right: .4em;
    font-family: "FA6FS"; }
  .opo-tests [data-visible=false] {
    display: none; }
  .opo-tests fieldset {
    margin: 1em 0em;
    border: none; }
  .opo-tests legend {
    font-weight: 900;
    font-size: 1.2em; }
  .opo-tests .form fieldset {
    width: 100%;
    box-sizing: border-box; }
  .opo-tests .form .structure {
    display: table;
    width: 92%;
    max-width: 92%;
    margin-left: 3%;
    table-layout: fixed;
    box-sizing: border-box; }
    .opo-tests .form .structure > div {
      display: table-row; }
      .opo-tests .form .structure > div > * {
        display: table-cell;
        padding: .2em .5em;
        vertical-align: top; }
      .opo-tests .form .structure > div > span {
        max-width: 80%; }
      .opo-tests .form .structure > div > label {
        width: 20em; }
      .opo-tests .form .structure > div > ul {
        width: 0em; }
  .opo-tests .form [data-i] > label {
    text-align: right; }
    .opo-tests .form [data-i] > label > span {
      display: block; }
      .opo-tests .form [data-i] > label > span:first-child {
        font-weight: 900;
        white-space: nowrap; }
        .opo-tests .form [data-i] > label > span:first-child::after {
          content: ":"; }
      .opo-tests .form [data-i] > label > span + span {
        font-size: .85em; }
  .opo-tests .form [type=number], .opo-tests .form [type=text] {
    width: 100%; }
  .opo-tests .buttons, .opo-tests .group {
    display: block;
    text-align: center; }
    .opo-tests .buttons > *, .opo-tests .group > * {
      border-radius: 0em; }
    .opo-tests .buttons > :first-child, .opo-tests .group > :first-child {
      border-top-left-radius: 0.3em;
      border-bottom-left-radius: 0.3em; }
    .opo-tests .buttons > :last-child, .opo-tests .group > :last-child {
      border-top-right-radius: 0.3em;
      border-bottom-right-radius: 0.3em; }
  .opo-tests[data-gui-mode=light] {
    background-color: #EFEFEF; }
    .opo-tests[data-gui-mode=light], .opo-tests[data-gui-mode=light] input {
      color: #222; }
    .opo-tests[data-gui-mode=light] header, .opo-tests[data-gui-mode=light] footer {
      box-shadow: 0em 0em 1em #EFEFEF; }
    .opo-tests[data-gui-mode=light], .opo-tests[data-gui-mode=light] input, .opo-tests[data-gui-mode=light] button {
      color: #222; }
    .opo-tests[data-gui-mode=light] a, .opo-tests[data-gui-mode=light] button {
      color: #2272D4; }
      .opo-tests[data-gui-mode=light] a:hover, .opo-tests[data-gui-mode=light] button:hover {
        color: #D47222; }
    .opo-tests[data-gui-mode=light] button {
      border-color: #2272D4;
      background-color: #e5e9ee;
      box-shadow: 0em 0em 0.2em inset #2272D4; }
      .opo-tests[data-gui-mode=light] button:hover {
        border-color: #D47222;
        background-color: #eee9e5;
        box-shadow: 0em 0em 0.2em inset #D47222; }
    .opo-tests[data-gui-mode=light] input {
      color: #222;
      border-color: #222;
      background-color: #dbdbdb;
      box-shadow: 0em 0em 0.2em inset #222; }
      .opo-tests[data-gui-mode=light] input:focus {
        border-color: #2272D4;
        box-shadow: 0em 0em 0.2em inset #2272D4; }
    .opo-tests[data-gui-mode=light] .graphic [data-status=unanswered] {
      background-color: #dadada; }
    .opo-tests[data-gui-mode=light] .graphic [data-status=answered] {
      background-color: #bcbcbc; }
    .opo-tests[data-gui-mode=light] .graphic [data-status=right] {
      background-color: #119111; }
    .opo-tests[data-gui-mode=light] .graphic [data-status=wrong] {
      background-color: #911111; }
    .opo-tests[data-gui-mode=light] .graphic [data-status=partially] {
      background-color: #919111; }
  .opo-tests[data-gui-mode=dark] {
    background-color: #222; }
    .opo-tests[data-gui-mode=dark], .opo-tests[data-gui-mode=dark] input {
      color: #EFEFEF; }
    .opo-tests[data-gui-mode=dark] header, .opo-tests[data-gui-mode=dark] footer {
      box-shadow: 0em 0em 1em #222; }
    .opo-tests[data-gui-mode=dark], .opo-tests[data-gui-mode=dark] input, .opo-tests[data-gui-mode=dark] button {
      color: #EFEFEF; }
    .opo-tests[data-gui-mode=dark] a, .opo-tests[data-gui-mode=dark] button {
      color: #649ce1; }
      .opo-tests[data-gui-mode=dark] a:hover, .opo-tests[data-gui-mode=dark] button:hover {
        color: #e19c64; }
    .opo-tests[data-gui-mode=dark] button {
      border-color: #649ce1;
      background-color: #25282c;
      box-shadow: 0em 0em 0.2em inset #649ce1; }
      .opo-tests[data-gui-mode=dark] button:hover {
        border-color: #e19c64;
        background-color: #2c2825;
        box-shadow: 0em 0em 0.2em inset #e19c64; }
    .opo-tests[data-gui-mode=dark] input {
      color: #EFEFEF;
      border-color: #EFEFEF;
      background-color: #373737;
      box-shadow: 0em 0em 0.2em inset #EFEFEF; }
      .opo-tests[data-gui-mode=dark] input:focus {
        border-color: #649ce1;
        box-shadow: 0em 0em 0.2em inset #649ce1; }
    .opo-tests[data-gui-mode=dark] .graphic [data-status=unanswered] {
      background-color: #363636; }
    .opo-tests[data-gui-mode=dark] .graphic [data-status=answered] {
      background-color: #555555; }
    .opo-tests[data-gui-mode=dark] .graphic [data-status=right] {
      background-color: #78f778; }
    .opo-tests[data-gui-mode=dark] .graphic [data-status=wrong] {
      background-color: #f77878; }
    .opo-tests[data-gui-mode=dark] .graphic [data-status=partially] {
      background-color: #f7f778; }
  .opo-tests header, .opo-tests main, .opo-tests footer {
    position: absolute;
    left: 0em;
    width: 100%; }
  .opo-tests header {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    top: 0em;
    height: 4em; }
    .opo-tests header > * {
      flex: 0 0 auto; }
  .opo-tests main {
    top: 4em;
    bottom: 2em;
    overflow: auto; }
  .opo-tests footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    bottom: 0em;
    height: 2em; }
    .opo-tests footer > * {
      flex: 1 1 auto; }
  .opo-tests h1 {
    font-size: 1em; }
    .opo-tests h1 span, .opo-tests h1 img {
      vertical-align: middle; }
    .opo-tests h1 .image {
      display: inline-block;
      margin: .2em 1em; }
    .opo-tests h1 img {
      width: auto;
      height: 3.6em; }
    .opo-tests h1 [data-status=loading], .opo-tests h1 [data-status=error] {
      display: none; }
    .opo-tests h1 span + span {
      margin-left: .2em;
      font-size: 2.4em;
      font-weight: 900; }
  .opo-tests .header-menu {
    flex: 1 1 0;
    margin-bottom: .3em; }
    .opo-tests .header-menu ul {
      list-style-type: none;
      margin: 0em;
      padding: 0em;
      text-align: center; }
    .opo-tests .header-menu li {
      display: inline-block;
      margin: 0em 1em; }
  .opo-tests .licenses {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0em;
    text-align: center; }
    .opo-tests .licenses > * {
      flex: 0 0 auto;
      margin: 0em 1em; }
  .opo-tests .cc-by-nc-sa-4 {
    display: flex;
    align-items: center; }
    .opo-tests .cc-by-nc-sa-4 > [data-i18n] {
      flex: 1 1 auto; }
    .opo-tests .cc-by-nc-sa-4 > .image {
      margin-left: .3em;
      flex: 0 0 auto; }
    .opo-tests .cc-by-nc-sa-4 img {
      width: auto;
      height: 1.6em; }
  .opo-tests .group[data-i18n=search] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; }
    .opo-tests .group[data-i18n=search] > :first-child::after {
      content: ": "; }
    .opo-tests .group[data-i18n=search] > * {
      flex: 0 0 auto; }
    .opo-tests .group[data-i18n=search] > .input-text {
      flex: 1 1 auto; }
    .opo-tests .group[data-i18n=search] [for=show_selected] [data-icon=checkbox]::before {
      content: "\f070";
      font-family: "FA6FS"; }
    .opo-tests .group[data-i18n=search] [for=show_selected] [type=checkbox]:checked + [data-icon=checkbox]::before {
      content: "\f06e";
      font-family: "FA6FS"; }
    .opo-tests .group[data-i18n=search] [for=show_selected] span + span {
      display: none; }
  .opo-tests label > [data-i18n='blocks[]'] > :first-child {
    margin-right: .4em; }
    .opo-tests label > [data-i18n='blocks[]'] > :first-child::before {
      content: "[ "; }
    .opo-tests label > [data-i18n='blocks[]'] > :first-child::after {
      content: " ] - "; }
  .opo-tests label > [data-i18n='blocks[]'] > span {
    display: inline-block; }
    .opo-tests label > [data-i18n='blocks[]'] > span[title=undefined] {
      display: none; }
    .opo-tests label > [data-i18n='blocks[]'] > span + :not([title=undefined]) + span::before {
      content: "-";
      margin: 0em .5em; }
  .opo-tests [data-i][data-i18n=blocks] [data-show-selected] {
    width: 100%; }
  .opo-tests [data-i][data-i18n=blocks] nav {
    width: 100%;
    max-height: 20em;
    overflow: auto; }
  .opo-tests [data-i][data-i18n=blocks] ul {
    list-style-type: none; }
    .opo-tests [data-i][data-i18n=blocks] ul li {
      white-space: nowrap;
      text-overflow: ellipsis; }
  .opo-tests [data-i18n=test] {
    font-size: 1.5em; }
  .opo-tests [data-i18n=test_text] {
    display: none; }
  .opo-tests section, .opo-tests .graphic {
    position: absolute;
    top: 4em;
    bottom: 2em; }
  .opo-tests section {
    left: 0em;
    right: 1em;
    overflow: auto; }
  .opo-tests .graphic {
    display: flex;
    flex-direction: column;
    right: 0em;
    width: 1em;
    margin: 0em;
    padding: 0em;
    list-style-type: none;
    overflow: hidden; }
    .opo-tests .graphic li {
      flex: 1 1 auto; }
  .opo-tests .block-info {
    margin: 0em;
    padding: 0em;
    list-style-type: none;
    font-size: .85em; }
    .opo-tests .block-info li {
      display: inline; }
      .opo-tests .block-info li + li::before {
        content: " - "; }
    .opo-tests .block-info strong {
      display: none; }
      .opo-tests .block-info strong::after {
        content: ": "; }
  .opo-tests .answers {
    list-style-type: none; }
  .opo-tests [data-show-selected=true] [data-selected=true] {
    display: list-item; }
  .opo-tests [data-show-rights=false] [data-is-ok] {
    display: none; }
  .opo-tests [data-show-results=false] [data-right] {
    display: none; }
  .opo-tests [data-is-ok=true]::before {
    content: " ✔";
    color: green; }
  .opo-tests [data-is-ok=false]::before {
    content: " ✖";
    color: red; }
  .opo-tests [data-is-ok=null]::before {
    content: " ❓";
    color: orange; }
  .opo-tests [data-right=true]::before {
    content: " ✔";
    color: green; }
  .opo-tests [data-right=false]::before {
    content: " ✖";
    color: red; }
  .opo-tests [data-right=null]::before {
    content: " ❓";
    color: orange; }
  .opo-tests [type=checkbox] {
    display: none; }
    .opo-tests [type=checkbox] + [data-icon=checkbox]::before {
      content: "\f0c8";
      font-family: "FA6FR"; }
    .opo-tests [type=checkbox]:checked + [data-icon=checkbox]::before {
      content: "\f14a";
      font-family: "FA6FR"; }
  .opo-tests [type=radio] {
    display: none; }
    .opo-tests [type=radio] + [data-icon=radio]::before {
      content: "\f111";
      font-family: "FA6FR"; }
    .opo-tests [type=radio]:checked + [data-icon=radio]::before {
      content: "\f192";
      font-family: "FA6FR"; }
  .opo-tests [data-icon=select_all_visible]::before {
    content: "\f0ae";
    font-family: "FA6FS"; }
  .opo-tests [data-icon=unselect_all_visible]::before {
    content: "\f03a";
    font-family: "FA6FS"; }
  .opo-tests [data-icon=home]::before {
    content: "\f015";
    font-family: "FA6FS"; }
  .opo-tests [data-icon=git]::before {
    content: "\f841";
    font-family: "FA6FB"; }
  .opo-tests [data-icon=clean]::before {
    content: "\f51a";
    font-family: "FA6FS"; }
  .opo-tests [data-icon=submit]::before {
    content: "\f1d8";
    font-family: "FA6FS"; }
  .opo-tests [data-icon=search]::before {
    content: "\f002";
    font-family: "FA6FS"; }

/*# sourceMappingURL=OpoTests.css.map */