/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
[dir='ltr'] {
  --text-align: left; }

[dir='rtl'] {
  --div-margin: right; }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/Lato-Medium-a8079a9c238fd962306813f63b9b81f7231d45de4af975dc85010a50952c20cd.woff2) format("woff2"); }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/Lato-Semibold-6d3d60585a756047dad581f36395d5314e2dbc90cc77fa5216757f8882dad013.woff2) format("woff2"); }

@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: italic;
  font-weight: 600;
  src: url(/assets/Lato-SemiboldItalic-c461786597c838fd86b6aadf50fbee0a064bed3167640d7950fd0b1ce2846c6d.woff2) format("woff2"); }

@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: italic;
  font-weight: 700;
  src: url(/assets/Lato-BoldItalic-9b1362648212d8b0fea5685e1784d97436e742e5865ca2abe7e35999796bde4e.woff2) format("woff2"); }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/Lato-Bold-930842c5cb550531ca35a6c29b948ba0a5dc3d2f3d4fb2ffe7135f4640341576.woff2) format("woff2"); }

@font-face {
  font-family: 'Lato';
  font-display: swap;
  font-style: italic;
  font-weight: 900;
  src: url(/assets/Lato-BlackItalic-883ad7cf6266a50a515e03bcb03c74f7dc1a433d63b23b20453d26d50238b7ca.woff2) format("woff2"); }

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/Lato-Black-cc5aea21d71ea64bfbbd44575b73003502fa6b0923742d96dc9c440881caa4ae.woff2) format("woff2"); }

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(/assets/Asap-Bold-eaf56cca55a0235516cebe6079e6c152b9fd3e784f67dbfd5a16d2be35379a25.woff2) format("woff2"); }

* {
  box-sizing: border-box; }

p {
  margin: 0; }

a:has(.focusable-button) {
  text-decoration: none; }

html {
  background-image: url(/assets/dots-64f7a73973a60c1408a20f6bf777e630715b4fdfa51656cba71d5889adb06897.png);
  background-repeat: repeat; }

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #0f172a; }

#app {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }
  #app header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    margin: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0 2px rgba(0, 0, 0, 0.05); }
    @media (min-width: 575px) {
      #app header {
        justify-content: unset;
        display: grid;
        grid-template-columns: 1fr auto 1fr; } }
    #app header .logos {
      display: flex;
      align-items: center;
      justify-items: center;
      gap: 16px;
      margin-left: 24px;
      margin-top: 12px;
      margin-bottom: 12px; }
      #app header .logos img {
        height: 40px; }
      #app header .logos .divider {
        width: 1px;
        height: 24px;
        background-color: #e2e8f0; }
    #app header .title {
      font-weight: 700;
      display: none;
      margin-top: 12px;
      margin-bottom: 12px;
      padding-left: 12px;
      padding-right: 12px; }
      @media (min-width: 575px) {
        #app header .title {
          display: unset; } }
  #app .illustration {
    max-width: 375px;
    max-height: 136px;
    overflow: hidden;
    background-color: #e2e8f0; }
    @media (min-width: 575px) {
      #app .illustration {
        max-width: 888px;
        max-height: 480px;
        margin-top: 48px;
        border: 8px solid rgba(255, 255, 255, 0.8);
        border-radius: 20px; } }
    #app .illustration img {
      width: 100%; }
  #app .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0; }
  #app main {
    width: 375px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px; }
    @media (min-width: 575px) {
      #app main {
        gap: 20px;
        margin-bottom: 48px; } }
    #app main form {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      border: none;
      gap: 16px; }
      @media (min-width: 575px) {
        #app main form {
          gap: 20px; } }
      #app main form .field {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 12px;
        font-family: 'Lato', sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px; }
        #app main form .field h3,
        #app main form .field > label {
          align-self: start; }
        #app main form .field fieldset .form-field-required,
        #app main form .field label .form-field-required {
          color: #ff847e; }
        #app main form .field select {
          width: 100%;
          background-color: white;
          font-weight: 500;
          height: 40px;
          text-align: var(--text-align);
          padding: 8px 12px 8px 16px;
          border: 1px solid #cbd5e1;
          border-radius: 4px; }
          #app main form .field select .item {
            font-family: inherit;
            font-size: 130%;
            font-weight: 500;
            background-color: #666669;
            color: white; }
          #app main form .field select .world.icon {
            color: white;
            font-weight: 600;
            font-size: 13px; }
          #app main form .field select .text {
            color: white;
            font-weight: 600;
            font-size: 13px; }
        #app main form .field fieldset {
          width: 100%;
          border: 0;
          padding: 0; }
          #app main form .field fieldset ul {
            margin: 0;
            padding: 0;
            gap: 12px;
            display: grid; }
            #app main form .field fieldset ul.grid3 {
              grid-template-columns: 1fr; }
              @media (min-width: 575px) {
                #app main form .field fieldset ul.grid3 {
                  grid-template-columns: 1fr 1fr 1fr; } }
            #app main form .field fieldset ul.grid2 {
              grid-template-columns: 1fr; }
              @media (min-width: 575px) {
                #app main form .field fieldset ul.grid2 {
                  grid-template-columns: 1fr 1fr; } }
            #app main form .field fieldset ul.grid1 {
              grid-template-columns: 1fr; }
            #app main form .field fieldset ul li {
              list-style-type: none;
              display: flex;
              align-items: center;
              border: 2px solid #e2e8f0;
              border-radius: 8px;
              box-shadow: 0 4px #e2e8f0;
              padding: 0; }
              #app main form .field fieldset ul li label {
                display: flex;
                min-width: 100%;
                min-height: 100%;
                align-items: center;
                gap: 8px;
                padding: 12px 24px 12px 16px; }
              #app main form .field fieldset ul li input {
                margin: 0 0.5em 0 0;
                width: 1.5em;
                accent-color: #0c606a;
                color: #e2e8f0; }
                #app main form .field fieldset ul li input[type='radio'] {
                  appearance: none;
                  width: 28px;
                  height: 28px;
                  padding: 4px; }
                  #app main form .field fieldset ul li input[type='radio']::after {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    display: block;
                    content: '';
                    border: 2px solid #e2e8f0;
                    margin-top: -1px;
                    margin-left: -1px; }
                  #app main form .field fieldset ul li input[type='radio']:checked::after {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    border: thin solid #0c606a;
                    background-color: #0c606a;
                    padding: 4px;
                    background-clip: content-box; }
                #app main form .field fieldset ul li input[type='checkbox'] {
                  appearance: none;
                  width: 28px;
                  height: 28px;
                  padding: 4px; }
                  #app main form .field fieldset ul li input[type='checkbox']::after {
                    width: 20px;
                    height: 20px;
                    display: block;
                    content: '';
                    border: 2px solid #e2e8f0;
                    border-radius: 4px;
                    margin-top: -1px;
                    margin-left: -1px; }
                  #app main form .field fieldset ul li input[type='checkbox']:checked::after {
                    border: thin solid #0c606a;
                    background-color: #0c606a;
                    background-image: url("data:image/svg+xml;utf8,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='m 7.7911686,2.2353718 c 0.217833,0.1452246 0.2766967,0.4395456 0.1314747,0.6573786 L 4.7623458,7.6332029 C 4.6835659,7.7513664 4.5559531,7.8279911 4.4146246,7.8419848 4.2732961,7.8559786 4.1331369,7.805869 4.0327153,7.7054474 L 2.1365368,5.8092689 c -0.1851258,-0.185124 -0.1851258,-0.4852764 0,-0.6704003 0.1851258,-0.1851239 0.4852763,-0.1851239 0.6704002,0 L 4.2942362,6.6261678 7.1337824,2.3668484 C 7.2790108,2.149011 7.5733293,2.0901473 7.7911686,2.2353718 Z' fill='white'/> </svg>");
                    background-size: cover;
                    background-origin: content-box; }
                #app main form .field fieldset ul li input:focus {
                  outline: 2px dashed #ffbd00;
                  outline-offset: 2px; }
              #app main form .field fieldset ul li:hover {
                border-color: #cbd5e1;
                box-shadow: 0 4px #cbd5e1; }
                #app main form .field fieldset ul li:hover input[type='radio']:not(:checked)::after,
                #app main form .field fieldset ul li:hover input[type='checkbox']:not(:checked)::after {
                  border-color: #cbd5e1; }
              #app main form .field fieldset ul li:has(> label > input:focus) {
                border-color: #ffbd00;
                box-shadow: 0 4px #ffbd00; }
              #app main form .field fieldset ul li:has(> label > input:checked) {
                border-color: #0c606a;
                box-shadow: 0 4px #0c606a; }
                #app main form .field fieldset ul li:has(> label > input:checked):hover {
                  border-color: #0a555e;
                  box-shadow: 0 5px #0a555e; }
    #app main section {
      display: flex;
      flex-direction: column;
      padding: 24px 20px;
      background-color: white;
      box-shadow: 0 20px rgba(0, 0, 0, 0.02);
      gap: 12px;
      width: 100%; }
      @media (min-width: 575px) {
        #app main section {
          border-radius: 12px;
          padding: 24px; } }
      #app main section h1 {
        font-family: 'Asap', sans-serif;
        font-weight: 700;
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.02em;
        text-align: center;
        margin: 0; }
        @media (min-width: 575px) {
          #app main section h1 {
            font-size: 32px;
            line-height: 36px; } }
      #app main section h3 {
        color: #64748b;
        font-style: normal;
        font-size: 14px;
        font-weight: 600;
        margin: 0;
        hyphens: auto; }
      #app main section .intro {
        color: #64748b;
        text-align: center; }
      #app main section.head {
        align-items: center;
        gap: 24px;
        padding: 40px 20px; }
        @media (min-width: 575px) {
          #app main section.head {
            padding: 40px; } }
        #app main section.head div {
          display: flex;
          align-items: center;
          width: 100%; }
        #app main section.head .welcome,
        #app main section.head .thank-you {
          flex-direction: column;
          gap: 8px; }
          #app main section.head .welcome p,
          #app main section.head .thank-you p {
            margin: 0;
            text-align: center;
            font-weight: 600;
            color: #64748b; }
        #app main section.head .summary {
          display: grid;
          grid-template-columns: 1fr 1fr; }
          #app main section.head .summary .summary_info {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            gap: 4px; }
            #app main section.head .summary .summary_info .summary_heading {
              font-family: "Asap", sans-serif;
              font-size: 32px;
              line-height: 36px;
              font-weight: 700;
              letter-spacing: -0.02em;
              text-align: center;
              margin: 0;
              color: #0c606a; }
            #app main section.head .summary .summary_info:not(:first-child) {
              border-left: 1px solid #e2e8f0; }
        #app main section.head .additional_info {
          justify-content: center;
          text-align: center; }
        #app main section.head .dropdowns {
          gap: 24px; }
      #app main section .keywords-list {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        list-style: none;
        padding: unset;
        margin: unset; }
        #app main section .keywords-list .keyword {
          padding: 6px 12px;
          border-radius: 48px;
          background: #f1f5f9;
          font-size: 12px;
          font-weight: 600;
          line-height: 20px;
          text-wrap: nowrap; }
      #app main section .trix-content {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #334155; }
        #app main section .trix-content br {
          display: block;
          content: '';
          margin-bottom: 12px; }
      #app main section.subheader {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #334155; }
        #app main section.subheader blockquote {
          padding-left: 12px;
          border-left: 2px solid #cbd5e1;
          margin: 0; }
        #app main section.subheader h1 {
          font-family: 'Asap', sans-serif;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          text-align: unset;
          color: black;
          margin: 0; }
        #app main section.subheader h2 {
          font-family: 'Asap', sans-serif;
          font-weight: 700;
          font-size: 14px;
          line-height: 20px;
          color: black;
          margin: 0; }
        #app main section.subheader a.footnote,
        #app main section.subheader span.footnoteref {
          color: #ffbd00; }
        #app main section.subheader a.footnote {
          text-decoration: none; }
        #app main section.subheader p {
          margin: 0; }
          #app main section.subheader p.footnote {
            font-style: italic;
            color: #64748b; }
            #app main section.subheader p.footnote:first-child {
              margin-top: 12px; }
        #app main section.subheader ul,
        #app main section.subheader ol {
          padding-left: inherit;
          margin: 0; }
        #app main section.subheader ul li::marker {
          font-size: 18px; }
        #app main section.subheader img {
          display: block;
          height: auto;
          margin: 0 auto;
          max-width: 100%;
          min-width: 300px;
          text-align: center; }
        #app main section.subheader .image {
          position: relative;
          width: 100%;
          height: 256px;
          overflow: hidden;
          border-radius: 8px;
          margin-bottom: 10px; }
          #app main section.subheader .image .background-image {
            background-image: url(/images/photo-home.jpg);
            -moz-filter: blur(3px);
            -o-filter: blur(4px);
            -ms-filter: blur(4px);
            filter: blur(4px);
            width: 100%;
            height: 256px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
            background-size: cover; }
          #app main section.subheader .image .centered {
            color: white;
            position: absolute;
            top: 39%;
            height: 25%;
            text-align: center;
            width: 100%; }
      #app main section.actions {
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 16px; }
        @media (min-width: 575px) {
          #app main section.actions {
            padding: 24px; } }
        #app main section.actions .focusable-button {
          text-align: center;
          padding: 12px 16px 12px 16px;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 700;
          width: 100%;
          text-decoration: none;
          display: inline-block;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 14px; }
          #app main section.actions .focusable-button.primary {
            color: white;
            background-color: #0c606a;
            border: none;
            box-shadow: 0 4px #043339; }
            #app main section.actions .focusable-button.primary:hover {
              background-color: #0a555e;
              box-shadow: 0 5px #043339; }
            #app main section.actions .focusable-button.primary:focus {
              outline: 2px solid #ffbd00;
              box-shadow: 0 4px #ffbd00; }
            #app main section.actions .focusable-button.primary:active {
              background-color: #094950;
              box-shadow: 0 2px #043339; }
          #app main section.actions .focusable-button.secondary {
            color: #0c606a;
            background-color: white;
            border: thin solid #e2e8f0;
            box-shadow: 0 4px #e2e8f0; }
            #app main section.actions .focusable-button.secondary:hover {
              border-color: #cbd5e1;
              box-shadow: 0 5px #cbd5e1; }
            #app main section.actions .focusable-button.secondary:focus {
              outline: 2px solid #ffbd00;
              box-shadow: 0 4px #ffbd00; }
            #app main section.actions .focusable-button.secondary:active {
              border-color: #94a3b8;
              box-shadow: 0 2px #94a3b8; }
          #app main section.actions .focusable-button.drop-down {
            position: relative;
            background-color: white;
            color: #0c606a;
            border: thin solid #e2e8f0;
            box-shadow: none; }
            #app main section.actions .focusable-button.drop-down:hover {
              border-color: #cbd5e1;
              box-shadow: 0 1px #cbd5e1; }
            #app main section.actions .focusable-button.drop-down:focus {
              outline: 1px solid #0c606a; }
        #app main section.actions details:not([open]) .drop-down svg {
          stroke: #64748b; }
          #app main section.actions details:not([open]) .drop-down svg .closed {
            visibility: visible; }
          #app main section.actions details:not([open]) .drop-down svg .opened {
            visibility: hidden; }
        #app main section.actions details[open] .drop-down {
          color: #0c606a;
          border-color: #0c606a; }
          #app main section.actions details[open] .drop-down svg {
            stroke: #0c606a; }
            #app main section.actions details[open] .drop-down svg .closed {
              visibility: hidden; }
            #app main section.actions details[open] .drop-down svg .opened {
              visibility: visible; }
    @media (min-width: 575px) {
      #app main#home {
        margin-top: -100px;
        width: 480px; }
        #app main#home section.head {
          gap: 24px; }
        #app main#home .field {
          gap: 4px; } }
    @media (min-width: 575px) {
      #app main#survey {
        margin-top: 32px;
        width: 664px; } }
    #app main#survey section {
      padding: 32px 20px; }
      @media (min-width: 575px) {
        #app main#survey section {
          padding: 32px; } }
      #app main#survey section h3 {
        font-family: 'Asap', sans-serif;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.01em; }
        @media (min-width: 575px) {
          #app main#survey section h3 {
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 26px;
            letter-spacing: -0.02em; } }
      #app main#survey section .grey {
        font-weight: 600;
        color: #64748b;
        margin: 0; }
      #app main#survey section .progress {
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #app main#survey section .progress h1 {
          font-size: initial;
          font-weight: normal;
          font-family: inherit;
          line-height: normal; }
      #app main#survey section .question legend {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 20px; }
        #app main#survey section .question legend h3 {
          margin-bottom: 0; }
      #app main#survey section .question .percentage {
        background-color: #0c606a;
        color: white;
        height: 2rem;
        width: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 1.6rem; }
      #app main#survey section .question.choice, #app main#survey section .question.choice-results {
        height: min-content; }
        #app main#survey section .question.choice li input[type='radio'],
        #app main#survey section .question.choice li .fake-radio, #app main#survey section .question.choice-results li input[type='radio'],
        #app main#survey section .question.choice-results li .fake-radio {
          width: 34px;
          height: 34px;
          margin: 0 8px 0 0;
          display: flex;
          justify-content: center;
          align-items: center; }
          #app main#survey section .question.choice li input[type='radio']::after,
          #app main#survey section .question.choice li .fake-radio::after, #app main#survey section .question.choice-results li input[type='radio']::after,
          #app main#survey section .question.choice-results li .fake-radio::after {
            content: attr(data-counter);
            font-weight: 600;
            font-size: 16px;
            width: 28px;
            min-width: 28px;
            height: 28px;
            margin-top: -2px;
            margin-left: -2px;
            background-color: #f1f5f9;
            border-radius: 4px;
            border: thin solid #cbd5e1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0f172a; }
          #app main#survey section .question.choice li input[type='radio']:checked::after,
          #app main#survey section .question.choice li .fake-radio:checked::after, #app main#survey section .question.choice-results li input[type='radio']:checked::after,
          #app main#survey section .question.choice-results li .fake-radio:checked::after {
            border: thin solid #0c606a;
            background-color: #0c606a;
            color: white;
            padding: 0; }
        #app main#survey section .question.choice li label, #app main#survey section .question.choice-results li label {
          display: flex;
          align-items: center;
          gap: 12px; }
        #app main#survey section .question.choice .percentage, #app main#survey section .question.choice-results .percentage {
          margin-left: auto; }
      #app main#survey section .question.rating, #app main#survey section .question.rating-results {
        height: min-content; }
        #app main#survey section .question.rating ul, #app main#survey section .question.rating-results ul {
          display: flex;
          flex-wrap: nowrap;
          align-items: start;
          justify-content: space-between; }
          #app main#survey section .question.rating ul .button, #app main#survey section .question.rating-results ul .button {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex-grow: 1; }
            #app main#survey section .question.rating ul .button li input[type='radio'], #app main#survey section .question.rating-results ul .button li input[type='radio'] {
              opacity: 0;
              padding: 0;
              border: 0;
              width: 0;
              height: 0;
              margin: 0; }
              #app main#survey section .question.rating ul .button li input[type='radio']::after, #app main#survey section .question.rating-results ul .button li input[type='radio']::after {
                display: none;
                padding: 0;
                border: 0;
                width: 0;
                height: 0;
                margin: 0; }
            #app main#survey section .question.rating ul .button li label, #app main#survey section .question.rating-results ul .button li label {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              flex-grow: 1; }
        #app main#survey section .question.rating scale, #app main#survey section .question.rating-results scale {
          display: flex;
          flex-wrap: nowrap;
          align-items: start;
          justify-content: space-between;
          margin-top: 12px; }
          #app main#survey section .question.rating scale span, #app main#survey section .question.rating-results scale span {
            font-size: 12px;
            font-weight: 600;
            color: #94a3b8;
            text-align: center; }
        #app main#survey section .question.rating .percentage-container, #app main#survey section .question.rating-results .percentage-container {
          display: flex;
          justify-content: space-around;
          margin-top: 1rem; }
      #app main#survey section .question.choice-results legend, #app main#survey section .question.rating-results legend {
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 0;
        width: 100%;
        gap: 1rem; }
        #app main#survey section .question.choice-results legend h2, #app main#survey section .question.rating-results legend h2 {
          margin-top: 0; }
      #app main#survey section .question.choice-results li:hover, #app main#survey section .question.rating-results li:hover {
        border: 2px solid #e2e8f0;
        box-shadow: 0 4px #e2e8f0; }
      #app main#survey section .question.choice-results .countries-names, #app main#survey section .question.rating-results .countries-names {
        font-weight: normal;
        font-size: 1rem; }
      #app main#survey section .question li:has(> label > input:disabled:not(:checked)) {
        color: #64748b;
        background-color: #f1f5f9; }
      #app main#survey section .question input:disabled:checked {
        background-color: white; }
    #app main#profile-report section.head {
      border: 0;
      border-top: 4px;
      border-bottom: 4px;
      border-style: solid; }
      #app main#profile-report section.head span {
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center; }
    #app main#profile-report h2 {
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.01em;
      color: #0f172a;
      margin: 0; }
    @media (min-width: 575px) {
      #app main#profile-report {
        margin-top: -100px;
        width: 664px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; }
        #app main#profile-report section.head {
          gap: 24px;
          border-width: 4px; } }
    @media (min-width: 575px) {
      #app main#report {
        width: 664px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 48px; } }
    #app main#report section h2 {
      font-size: 14px;
      font-weight: 600;
      color: #64748b; }
    #app main#report section.graph {
      display: none; }
      #app main#report section.graph h2 {
        font-family: 'Asap', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #0f172a;
        text-align: var(--text-align); }
      @media (min-width: 575px) {
        #app main#report section.graph {
          display: flex; }
          #app main#report section.graph #radar .highcharts-series-0 path.highcharts-area {
            fill: rgba(12, 156, 228, 0.26); }
          #app main#report section.graph #radar .highcharts-series-0 path.highcharts-graph {
            stroke: #0c9ce4; }
          #app main#report section.graph #radar .highcharts-series-0 path.highcharts-point,
          #app main#report section.graph #radar .highcharts-series-0 path.highcharts-halo,
          #app main#report section.graph #radar .highcharts-series-0 rect {
            fill: #0c9ce4;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            y: 6px; }
          #app main#report section.graph #radar .highcharts-series-1 path.highcharts-area {
            fill: rgba(158, 173, 189, 0.26); }
          #app main#report section.graph #radar .highcharts-series-1 path.highcharts-graph {
            stroke: #9eadbd; }
          #app main#report section.graph #radar .highcharts-series-1 path.highcharts-halo,
          #app main#report section.graph #radar .highcharts-series-1 path.highcharts-point,
          #app main#report section.graph #radar .highcharts-series-1 rect {
            fill: #9eadbd;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            y: 6px; }
          #app main#report section.graph #radar .highcharts-legend-item text {
            color: #64748b !important;
            fill: #64748b !important;
            font-weight: 600 !important;
            font-size: 12px !important;
            font-family: 'Lato', sans-serif !important; } }
    #app main#report section details summary {
      width: 100%;
      background: 0;
      border: 0;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 8px;
      text-wrap: nowrap;
      font-weight: 900;
      letter-spacing: 0.03em;
      font-size: 12px;
      line-height: 20px;
      cursor: pointer;
      list-style: none; }
      #app main#report section details summary::marker, #app main#report section details summary::-webkit-details-marker {
        display: none; }
      #app main#report section details summary:focus {
        outline: 1px solid #ffbd00;
        border-radius: 4px;
        margin: 1px; }
        #app main#report section details summary:focus:has(.focusable-button) {
          outline-width: 2px;
          border-radius: 8px; }
    #app main#report section details:not(.no-line) summary::before, #app main#report section details:not(.no-line) summary::after {
      content: '';
      border-top: 1px solid #e2e8f0;
      width: 100%; }
    #app main#report section .graph {
      padding-top: 20px; }
    #app main#report section .details {
      display: flex;
      flex-direction: column;
      gap: 20px;
      color: #334155;
      margin-top: 20px; }
      #app main#report section .details .topic {
        display: flex;
        flex-direction: column;
        font-weight: 600;
        gap: 4px; }
        #app main#report section .details .topic ul.topic-results {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin: 0;
          padding: 0; }
        #app main#report section .details .topic:not(:first-of-type):not(:last-of-type)::before {
          content: '';
          border-top: 1px solid #e2e8f0;
          align-self: stretch;
          height: 20px; }
        #app main#report section .details .topic .title {
          font-size: 14px;
          margin-bottom: 4px; }
        #app main#report section .details .topic .bar {
          font-size: 12px;
          color: white;
          border-radius: 8px;
          height: 16px;
          padding-left: 7px;
          display: flex;
          align-items: center;
          min-width: 30px; }
          #app main#report section .details .topic .bar.me {
            background-color: #0c9ce4; }
          #app main#report section .details .topic .bar.other {
            background-color: #9eadbd; }
      #app main#report section .details .legend {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #64748b;
        font-size: 12px; }
        #app main#report section .details .legend::before {
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 8px; }
          #app main#report section .details .legend.me::before {
            background-color: #0c9ce4; }
          #app main#report section .details .legend.other::before {
            background-color: #9eadbd; }
    #app main#report section .profile-card {
      display: flex; }
      #app main#report section .profile-card .profile-bar {
        width: 4px;
        border-radius: 8px;
        flex-shrink: 0; }
      #app main#report section .profile-card .profile-text {
        position: relative;
        padding-left: 16px;
        display: flex;
        flex-direction: column;
        gap: 4px; }
        #app main#report section .profile-card .profile-text h3 {
          font-family: 'Asap', sans-serif;
          font-size: 20px;
          line-height: 26px;
          letter-spacing: -0.02em;
          font-weight: 700;
          color: #0f172a;
          margin: 0; }
        #app main#report section .profile-card .profile-text br {
          margin-bottom: 12px; }
        #app main#report section .profile-card .profile-text .description p {
          margin-bottom: 0; }
    #app main#report section .colleagues-card {
      display: flex;
      gap: 24px;
      flex-direction: column; }
      @media (min-width: 575px) {
        #app main#report section .colleagues-card {
          flex-direction: row; } }
      #app main#report section .colleagues-card .same-profile {
        display: flex;
        flex-direction: column;
        background-color: #f1f5f9;
        padding: 12px 16px;
        border-radius: 8px;
        gap: 4px;
        justify-content: center; }
        @media (min-width: 575px) {
          #app main#report section .colleagues-card .same-profile {
            width: 157px;
            min-width: 157px; } }
        #app main#report section .colleagues-card .same-profile .heading {
          display: flex;
          gap: 4px;
          align-items: baseline; }
          #app main#report section .colleagues-card .same-profile .heading .percentage {
            font-family: 'Asap', sans-serif;
            font-size: 24px;
            font-weight: 700;
            color: #0f172a; }
          #app main#report section .colleagues-card .same-profile .heading .symbol {
            font-size: 12px;
            font-weight: 600;
            color: #64748b; }
          #app main#report section .colleagues-card .same-profile .heading .bar {
            height: 8px;
            border-radius: 8px; }
        #app main#report section .colleagues-card .same-profile .sentence {
          font-size: 12px;
          font-weight: 600;
          color: #475569; }
      #app main#report section .colleagues-card .statistics {
        display: flex;
        flex-direction: column;
        gap: 12px; }
        #app main#report section .colleagues-card .statistics .bars {
          display: flex;
          gap: 4px;
          justify-content: space-between; }
          #app main#report section .colleagues-card .statistics .bars .bar {
            height: 8px;
            border-radius: 8px; }
        #app main#report section .colleagues-card .statistics .legends {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin: 0;
          padding: 0; }
          #app main#report section .colleagues-card .statistics .legends .legend {
            display: flex;
            gap: 4px;
            align-items: baseline;
            font-size: 12px;
            font-weight: 600;
            color: #64748b; }
            #app main#report section .colleagues-card .statistics .legends .legend .dot {
              height: 8px;
              width: 8px;
              min-width: 8px;
              border-radius: 8px; }
    #app main#report section.actions details {
      position: relative; }
    #app main#report section.actions #more-buttons {
      position: absolute;
      top: 60px;
      padding: 0;
      width: 100%;
      padding-bottom: 24px; }
      #app main#report section.actions #more-buttons.buttons {
        margin-top: -14px;
        padding-top: 4px;
        display: flex;
        flex-direction: column; }
        #app main#report section.actions #more-buttons.buttons a:first-child > .focusable-button {
          border-top: thin solid #e2e8f0;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px; }
        #app main#report section.actions #more-buttons.buttons a:last-child > .focusable-button {
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px; }
        #app main#report section.actions #more-buttons.buttons a:not(:last-child) > .focusable-button:focus {
          margin-bottom: 2px; }
        #app main#report section.actions #more-buttons.buttons .focusable-button {
          color: #0f172a;
          border-radius: 0;
          border-color: #e2e8f0;
          border-top: 0;
          box-shadow: none; }
          #app main#report section.actions #more-buttons.buttons .focusable-button:hover {
            color: white;
            background-color: #0c606a; }
  #app .results .go-back-icon {
    position: fixed;
    height: 3rem;
    left: 1rem;
    top: 1rem;
    color: #0c606a; }
  #app .results .filters-applied {
    display: flex;
    gap: 1rem;
    background: white;
    padding: 1rem;
    border-radius: 12px; }
    #app .results .filters-applied .filters-applied-icon {
      height: 3rem;
      color: #0c606a; }
    #app .results .filters-applied .content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem; }
      #app .results .filters-applied .content .header {
        font-weight: bold;
        font-size: 1rem; }

video {
  border-radius: 4px; }

.hidden {
  display: none !important; }

.error_message {
  color: red !important; }

.progress-bar {
  display: flex;
  gap: 16px;
  height: 6px; }
  .progress-bar .full {
    background-color: #ffbd00; }
  .progress-bar .empty {
    background-color: #e2e8f0; }
  .progress-bar .progress-topic,
  .progress-bar .progress-question {
    display: flex;
    width: 100%;
    border-radius: 8px;
    gap: 4px; }

.heroicon-default {
  height: 1.25rem;
  width: 1.25rem; }

.cursor-pointer {
  cursor: pointer; }