@font-face {
  font-family: "e_gov";
  src: url("/static/fonts/e_gov.eot");
  src: url("/static/fonts/e_gov.eot?#iefix") format("embedded-opentype"),
    url("/static/fonts/e_gov.woff") format("woff"),
    url("/static/fonts/e_gov.ttf") format("truetype"),
    url("/static/fonts/e_gov.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: Noto Sans Armenian;
  src: url(/static/fonts/NotoSansArmenian-VariableFont_wdth.woff2);
}

* {
  font-family: Noto Sans Armenian,Noto Sans,Arial,Helvetica,sans-serif!important;
}

:root {
  /* Colors */
  --black: #1a1a1a;
  --white: #ffffff;
  --primary-1: #355c8c;
  --primary-2: #346E6B;
  --primary-3: #358000;
  --primary-2-light: #ddf1f0;
  --secondary-1: #dde5ee;
  --secondary-2: #747474;
  --secondary-3: #dcdcdc;
  --secondary-4: #cbd6e3;
  --secondary-5: #686767;
  --secondary-6: #b2b2b2;
  --secondary-7: #f9f9f9;
  --border-primary-1: #5a7aa2;
  --border-primary-1-light: #2677ce;
  --border-primary-2: #cce9e8;
  --border-secondary-1: #c1c0c0;
  --border-secondary-2: #8099b8;
  --border-secondary-3: #0f420f;
  --data-focus-1: #ff6a38;
  --data-focus-2: #56b7b2;
  --data-focus-3: #004fa3;
  --data-focus-4: #cc0000;
  --data-focus-5: #febb30;
  --data-focus-6: #1b86c3;
  --data-status-1: #eeffe2;
  --data-status-2: #ffeecc;
  --data-status-3: #ffe0e0;
  --data-status-4: #e2f2fb;
  --divider-secondary: #bfbfbf;
  --focus-primary: #bd13b8;
  --text-bold: #0e0d0d;
  --text-secondary: #454545;
  --secondary-background-1: #f5f5f5;
  --invalid: #cc0000;
  --secondary-link: #004d99;
  --icon-primary-2: #45928e;
  --approve-icon: #167f16;
  --progress-background: #f0f4f9;
  --progress-border: #b8c6d8;
  --footer-logo: #a3a2a2;

  /* Width */
  --viewport-standard: 1168px;
  --viewport-standard-article: 768px;
  --viewport-standard-aside: 268px;
  --input-min-width: 14rem;

  /* Spacings */
  --spacing-1: 0.2rem;
  --spacing-2: 0.5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 2rem;
  --spacing-6: 2.5rem;
  --spacing-7: 3rem;
  --spacing-9: 4rem;
  --spacing-13: 6rem;
  --spacing-max: 10rem;

  /* Borders */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 5px;
  --border-4: 8px;
}

*:focus {
  outline: 4px solid var(--focus-primary);
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

a {
  text-decoration: none;
}

[icon-before]::before {
  font-family: "e_gov", monospace!important;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: attr(icon-before);
}

[icon-after]::after {
  font-family: "e_gov", monospace!important;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  content: attr(icon-after);
}

[icon-size="nano"]::before,
[icon-size="nano"]::after {
  font-size: 16px;
}

[icon-size="extra-small"]::before,
[icon-size="extra-small"]::after {
  font-size: 24px;
}

[icon-size="small"]::before,
[icon-size="small"]::after {
  font-size: 32px;
}

[icon-size="medium"]::before,
[icon-size="medium"]::after {
  font-size: 40px;
}

[icon-size="large"]::before,
[icon-size="large"]::after {
  font-size: 48px;
}

[icon-size="extra-large"]::before,
[icon-size="extra-large"]::after {
  font-size: 64px;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  --arrow-size: 8px;

  display: none;

  position: absolute;
  top: -0.25rem;
  left: 50%;

  transform: translateX(-50%) translateY(var(--translate-y, 0));
  transform-origin: bottom center;
}

[data-tooltip]::before {
  --translate-y: calc(-100% - var(--arrow-size));

  content: attr(data-tooltip);

  padding-top: var(--spacing-1);
  padding-right: var(--spacing-3);
  padding-bottom: var(--spacing-1);
  padding-left: var(--spacing-3);

  width: max-content;
  text-align: left;
  background-color: var(--white);
  color: var(--black);
  border-radius: var(--border-3);
  max-width: 100%;
  border: 1px solid var(--secondary-5);
  box-shadow: 0px 4px 8px var(--secondary-6);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  display: block;
}

[data-tooltip]::after {
  --translate-y: calc(-1 * var(--arrow-size));

  content: '';
  border: var(--arrow-size) solid transparent;
  transform-origin: top center;
  transform: scale(1.3, 1) rotate(45deg);
  top: -19.6px;
  border-color: transparent var(--white) var(--white) transparent;
  box-shadow: 1px 1px 0 0 var(--secondary-5);
}

img[img-size="nano"] {
  width: 16px;
  height: 16px;
}

img[img-size="extra-small"] {
  width: 24px;
  height: 24px;
}

img[img-size="small"] {
  width: 32px;
  height: 32px;
}

img[img-size="medium"] {
  width: 40px;
  height: 40px;
}

img[img-size="large"] {
  width: 48px;
  height: 48px;
}

img[img-size="extra-large"] {
  width: 64px;
  height: 64px;
}

img[img-size="logo"] {
  width: 96px;
  height: 96px;
}

hr {
  border: 0;
  height: 1px;
  background-color: var(--divider-secondary);
}

h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 64px;
}

h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
}

h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

body > header {
  display: flex;
  justify-content: center;
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  background-color: var(--primary-1);

  & > div {
    display: flex;
    justify-content: space-between;
    width: var(--viewport-standard);
    height: 3.5rem;
    gap: 15rem;
  }

  & a {
    display: flex;
    align-items: center;
  }

  & span {
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  & summary {
    height: 100%;
    justify-content: end;
  }

  & summary::after {
    color: var(--white);
  }

  & hr {
    height: 100%;
    width: 2px;
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--white);
    border: none;
  }

  & article {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
}

body > footer {
  display: flex;
  justify-content: center;
  background-color: var(--secondary-background-1);
  border-top: var(--border-1) solid var(--border-secondary-1);

  & > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--viewport-standard);
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);

    &::after {
      font-family: "e_gov", monospace!important;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      font-size: 96px;
      color: var(--footer-logo);
      content: "\e82e";
    }

    & > article {
      & > p {
        display: flex;
        gap: var(--spacing-3);
        margin-bottom: var(--spacing-4);
        margin-top: 0;

        & > a {
          display: flex;
          align-items: center;
          color: var(--text-secondary);
        }

        & > a::before {
          margin-right: var(--spacing-2);
          color: var(--approve-icon);
        }
      }

      & > p:first-of-type, & > p:last-of-type {
        & > a > u {
          color: var(--black)
        }
      }

      & > p:last-child {
        margin-bottom: 0;
      }
    }
  }
}

section[role="navigation"] {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border-bottom: var(--border-1) solid var(--secondary-2);

  & nav {
    width: var(--viewport-standard);
    display: flex;
    justify-content: space-between;
    align-items: center;

    & > .navigation-mobile {
      display: none;
    }

    & > ul {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0;
      margin: 0;
      gap: var(--spacing-4);
      list-style: none;

      & > li {
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 7px solid transparent;
      }

      & > li[aria-current="page"] {
        border-bottom: 7px solid var(--primary-1);
      }

      & a {
        color: var(--black);
      }
    }
  }
}

section[role="search"] {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
  border-top: var(--border-1) solid;
  border-bottom: var(--border-1) solid;
  border-color: var(--secondary-3);

  & > div {
    display: flex;
    gap: var(--spacing-3);
  }
}

section[role="heading"] {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--white);
  border-bottom: var(--border-1) solid var(--secondary-2);

  & > div {
    width: var(--viewport-standard);
    display: flex;
    flex-direction: column;
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
  }
}

details[role="menu"] {
  position: relative;

  & summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
  }

  & ul {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 0;
    padding: 0;
    margin: 0;
    background-color: var(--white);
    border: var(--border-2) solid var(--border-secondary-1);
    border-radius: 8px;
    list-style-type: none;
    min-width: 16rem;
    z-index: 2;
  }

  & li {
    display: block;
    min-width: 10rem;
    max-width: 20rem;

    & > [role="menuitem"] {
      display: flex;
      padding-top: var(--spacing-2);
      padding-bottom: var(--spacing-2);
      padding-right: var(--spacing-3);
      padding-left: var(--spacing-3);
      gap: var(--spacing-2);
      align-items: center;
    }

    & > [role="menuitem"]:hover{
      background-color: var(--secondary-1);
    }

    & > [role="menuitem"][aria-selected="true"]::after {
      position: absolute;
      right: var(--spacing-3);
      font-family: "e_gov", monospace!important;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      font-size: 24px;
      color: var(--black);
      content: "\e807";
    }

    & > [role="menuitem"][aria-invalid="true"] > span {
      color: var(--invalid);
    }

    & span {
      color: var(--black);
    }
  }
}

details[role="menu"][open] {
  & ul {
    display: flex;
    z-index: 5;
  }

  & > summary::before {
    content: "";
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    cursor: auto;
    z-index: 4;
  }
}

button {
  min-height: var(--spacing-6);
  border: var(--border-2) solid;
  border-color: var(--border-primary-1);
  border-radius: 4px;
  background-color: var(--secondary-1);

  &[role="button"] {
    align-items: center;
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    padding-right: var(--spacing-3);
    padding-left: var(--spacing-3);
    color: var(--black);
    cursor: pointer;

    &:not([hidden]) {
      display: inline-flex;
    }
  }

  &[role="button"]::before {
    margin-right: var(--spacing-2);
  }

  &[role="button"]::after {
    margin-left: var(--spacing-2);
  }

  &[role="link"] {
    padding: 0;

    &:not([hidden]) > a {
      display: flex;
    }

    & > a {
      align-items: center;
      padding-top: var(--spacing-2);
      padding-bottom: var(--spacing-2);
      padding-right: var(--spacing-3);
      padding-left: var(--spacing-3);
      color: var(--black);
    }

    & > a::before {
      margin-right: var(--spacing-2);
    }

    & > a::after {
      margin-left: var(--spacing-2);
    }
  }
}

.standard-viewport-section {
  width: var(--viewport-standard);
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);

  & > hr {
    width: var(--viewport-standard);
  }
}

.slim-viewport-section {
  width: var(--viewport-standard);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.short-viewport-section {
  width: var(--viewport-standard);
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);

  & > article {
    width: var(--viewport-standard-article);
  }
}

.standard-viewport-section-aside {
  width: var(--viewport-standard);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);

  & > article {
    width: var(--viewport-standard-article);
    padding-bottom: var(--spacing-3);
  }

  & > aside {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    width: var(--viewport-standard-aside);
  }

  & > hr {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }
}

.home-top {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-color: var(--primary-1);

  & > img {
    min-width: fit-content;
    opacity: 15%;
    pointer-events: none;
    position: absolute;
    width: 100%;
    bottom: 0;
  }

  & > div {
    width: var(--viewport-standard);
    padding-bottom: var(--spacing-max);
    padding-top: var(--spacing-max);
    z-index: 1;
  }

  & h1 {
    color: var(--white);
    width: var(--viewport-standard-article);
  }

  & search {
    width: 35rem;
  }
}

.page-top {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--secondary-background-1);

  & > div {
    width: var(--viewport-standard);
    padding-bottom: var(--spacing-9);
    padding-top: var(--spacing-9);
  }

  & p,
  & article,
  & h1 {
    width: var(--viewport-standard-article);
  }

  & search {
    width: 35rem;
  }
}

.breadcrumbs-web {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  list-style: none;

  & > li + li::before {
    display: inline-block;
    padding-right: var(--spacing-1);
    padding-left: var(--spacing-1);
    content: "\e803";
    font-size: 1.2rem;
    font-family: "e_gov";
    color: var(--secondary-2);
  }

  & a {
    color: var(--black);
    text-decoration: underline;
    font-size: 16px;
    line-height: 24px;
  }

  & a[aria-current="page"] {
    color: var(--primary-1);
    text-decoration: none;
    border-bottom: var(--border-2) solid;
  }
}

.breadcrumbs-mobile {
  display: none;
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  color: var(--black);
}

.return-link {
  display: inline-flex;
  color: var(--black);

  align-items: center;
  background-color: unset;
  border: unset;
  cursor: pointer;
  border-radius: 0;
  min-height: 30px;
  padding-inline: 0;
  padding-block: 0;

  & > span {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    box-shadow: inset 0px -1px 0px var(--black);
  }
}

.return-link:hover > span {
  box-shadow: 0px 3px 0px var(--black);
}

.return-link:focus {
  outline: unset;
  color: var(--white);
  box-shadow: 0 4px 0 var(--black), 0 -2px 0 var(--focus-primary);
  background-color: var(--focus-primary);

  & > span {
    font-weight: 700;
    box-shadow: unset;
  }
}

.service-title {
  & > small {
    color: var(--primary-2);
  }

  & > h1 {
    margin-top: 0;
    margin-bottom: var(--spacing-3);

    max-width: var(--viewport-standard-article);
  }

  & > p {
    max-width: var(--viewport-standard-article);
  }
}

.button-row,
.double-button-row {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);

  & > [role="separator"] {
    margin-right: var(--spacing-2);
    margin-left: var(--spacing-2);
    font-weight: 600;
  }
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: var(--spacing-5);
  grid-row-gap: var(--spacing-5);
  margin-bottom: var(--spacing-4);
}

.service-group-card {
  border-top: 4px solid;
  border-color: var(--data-focus-2);
  font-size: 16px;
  line-height: 24px;

  & > figure {
    width: 40px;
    height: 40px;
    margin-top: var(--spacing-3);
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  & > ul {
    margin-bottom: var(--spacing-3);
    margin-top: var(--spacing-3);
    padding: 0;
    list-style-type: none;
    color: var(--primary-1);

    & > li {
      display: flex;
      padding-top: var(--spacing-1);
      padding-bottom: var(--spacing-1);
    }

    & a {
      text-decoration: underline;
      color: var(--primary-1);
    }
  }

  .service-group-links-list li::before {
    margin-right: var(--spacing-2);
    font-family: "e_gov", monospace!important;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    font-size: 24px;
    content: "\e818";
  }

  & a[role="link"] {
    display: flex;
    color: var(--secondary-link);

    & span {
      font-size: 14px;
      margin-right: var(--spacing-1);
      text-decoration: underline;
    }
  }
}

.service-card {
  border-top: var(--border-3) solid var(--primary-1);

  & > figure {
    width: 40px;
    height: 40px;
    margin-top: var(--spacing-3);
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  & h4 {
    display: flex;
    align-items: start;
    margin: 0;

    & > a {
      color: var(--primary-1);
      text-decoration: underline;
    }
  }

  & h4::after {
    font-family: "e_gov", monospace!important;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    font-size: 32px;
    color: var(--primary-1);
    content: "\e803";
  }

  & > div {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.service-alternative-card {
  border: var(--border-1) solid var(--secondary-3);
  border-radius: 4px;

  & > a {
    & div {
      padding-left: var(--spacing-4);
      padding-right: var(--spacing-4);
      padding-bottom: var(--spacing-4);
    }

    & p {
      display: flex;
      justify-content: center;
      height: 40px;
      margin-top: 0;
      padding-top: var(--spacing-4);
      padding-bottom: var(--spacing-4);
      background-color: var(--secondary-4);
    }

    & h5 {
      color: var(--black);
      margin-bottom: var(--spacing-2);
    }

    & small {
      color: var(--secondary-2);
    }
  }

  & > a:focus {
    outline: none;
  }
}

.service-alternative-card:focus-within {
  outline: 4px solid var(--focus-primary);
}

.personal-data-processing-header,
.accessibility-statement-header,
.services-alpha-header,
.faq-list-header,
.about-us-header {
  padding-top: 0;
  padding-bottom: 0;

  & > h1 {
    margin-top: var(--spacing-2);
    margin-bottom: 0;
  }
}

.about-us-content > *,
.accessibility-statement-content > *,
.personal-data-processing-content > * {
  width: var(--viewport-standard-article);
  margin-left: 0;
}

.services-alpha-group {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);

  & > span:not(:last-of-type) + ul {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-7);
  }

  & > span {
    display: flex;
    align-items: center;

    & > hr {
      height: 2px;
      width: 700px;
      background-color: var(--primary-1);
      margin: inherit;
    }
  }

  & h1 {
    margin: 0;
    width: 64px;
    line-height: 56px;
  }

  & > ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-inline-start: 20px;

    & a {
      color: var(--secondary-link);
      text-decoration: underline;
    }

    & > li {
      width: 744px;
    }

    & > li + li {
      margin-top: var(--spacing-1);
    }
  }
}

.faq-collapsible {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
  border: var(--border-1) solid var(--secondary-3);
  border-radius: 3px;

  & > summary {
    display: flex;
    align-items: center;
    padding-bottom: var(--spacing-3);
    padding-top: var(--spacing-3);
    padding-right: var(--spacing-3);
    cursor: pointer;
  }

  & > summary::before {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    font-family: "e_gov", monospace!important;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    font-size: 24px;
    content: "\e801";
  }

  & > div {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    padding-top: var(--spacing-3);
    color: var(--text-secondary);
  }
}

.faq-collapsible[open] {
  & > summary {
    background-color: var(--primary-2-light);
    border-bottom: var(--border-1) solid var(--secondary-3);
  }

  & > summary::before {
    content: "\e802";
  }
}

.video-link {
  display: flex;
  align-items: center;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
  border: var(--border-1) solid var(--secondary-3);
  border-radius: 3px;

  & span[role="img"] {
    margin-right: var(--spacing-4);
    color: var(--primary-1);
  }

  & a {
    color: var(--primary-1);
    text-decoration: underline;

    & > h3 {
      margin-top: var(--spacing-2);
      margin-bottom: var(--spacing-2);
    }
  }
}

.yesem-banner {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  border-left: var(--border-4) solid var(--data-focus-3);
  margin-top: var(--spacing-4);

  & > img {
    padding-right: var(--spacing-3);
    padding-left: var(--spacing-3);
  }
}

.button-primary {
  background-color: var(--primary-1);
  border-color: var(--border-secondary-2);

  &[role="button"] {
    font-weight: 700;
    color: var(--white);
  }

  &[role="link"] > a {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--white);
  }
}

.button-blue {
  background-color: var(--data-focus-3);
  border-color: var(--border-primary-1-light);

  &[role="button"] {
    font-weight: 700;
    color: var(--white);
  }

  &[role="link"] > a {
    font-weight: 700;
    color: var(--white);
  }
}

.button-start {
  background-color: var(--primary-2);
  border-color: var(--primary-2-light);

  &[role="button"] {
    font-weight: 700;
    color: var(--white);
  }

  &[role="link"] > a {
    font-weight: 700;
    color: var(--white);
  }
}

.button-approve {
  background-color: var(--approve-icon);
  border-color: var(--border-secondary-3);

  &[role="button"] {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
  }

  &[role="link"] > a {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--white);
  }
}

.button-edit {
  background-color: var(--white);
  border-color: var(--divider-secondary);

  &[role="button"] {
    font-weight: 400;
    color: var(--black);
  }

  &[role="link"] > a {
    font-weight: 400;
    color: var(--black);
  }
}

.button-delete {
  background-color: var(--data-status-3);
  border-color: var(--data-focus-4);

  &[role="button"] {
    font-weight: 400;
    color: var(--black);
  }

  &[role="link"] > a {
    font-weight: 400;
    color: var(--black);
  }
}

a[disabled], button[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.service-description {
  & span {
    color: var(--text-secondary);
  }

  & ul {
    padding-left: var(--spacing-4);

    & > li::marker{
      color: var(--data-focus-1);
    }
  }

  & > .files-section {
    & > div {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--spacing-5);
      row-gap: var(--spacing-3);
    }

    & > h4 {
      margin-bottom: var(--spacing-3);
      margin-top: var(--spacing-3);

      color: var(--text-secondary);
    }
  }

  & > hr {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }

  & > h4 {
    margin-bottom: var(--spacing-3);
    margin-top: 0;

    color: var(--text-secondary);
  }

  & > section > h4 {
    margin-bottom: var(--spacing-3);
    margin-top: var(--spacing-3);

    color: var(--text-secondary);
  }
}

.service-hint {
  margin-bottom: var(--spacing-7);

  & > .services-grid {
    margin-bottom: var(--spacing-5);
  }

  & > h3 {
    margin-bottom: var(--spacing-5);
  }

  & > article {
    margin-bottom: var(--spacing-7);
  }
}

.note-card {
  max-width: 35rem;
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);

  & pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;

    & p {
      margin: 0;
    }

    & a {
      text-decoration: underline;
      color: var(--primary-1);
    }

    & a[hyperlink=ext]::after {
      font-family: "e_gov", monospace!important;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      content: "\e805";
    }
  }
}

.info-card {
  border-left: var(--border-4) solid var(--data-focus-3);
}

.warning-card {
  border-left: var(--border-4) solid var(--data-focus-4);
}

.file-link {
  background-color: var(--white);
  border: var(--border-1) solid;
  border-color: var(--secondary-3);

  & p {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
    margin: 0;
  }

  & span[role="img"] {
    margin-left: 0;
    margin-right: var(--spacing-3);
    color: var(--primary-1);
  }
}

.service-info {
  display: flex;
  align-items: center;
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  border: var(--border-1) solid var(--border-primary-2);
  border-radius: 3px;

  & small {
    font-size: 16px;
    line-height: 24px;
  }

  & span[role="img"] {
    color: var(--icon-primary-2);
    margin-right: var(--spacing-3);
  }
}

.support-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  border: var(--border-1) solid var(--secondary-3);
  border-radius: 3px;

  & small {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-secondary);
  }

  & span[role="img"] {
    color: var(--primary-1);
  }

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

  & strong {
    display: block;
    padding-bottom: var(--spacing-2);
  }

  & p {
    margin: 0;
  }
}

.service-provider-info {
  display: flex;
  flex-direction: column;
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  border: var(--border-1) solid var(--border-primary-2);
  border-radius: 3px;

  & small {
    color: var(--primary-2);
  }

  & a {
    text-decoration: underline;
  }
}

.locale-selector > summary::after {
  font-family: "e_gov", monospace!important;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  font-size: 32px;
  content: "\e819";
}

.locale-selector[open] > summary::after {
  content: "\e81a";
}

div[role="note"] {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);

  & > h2 {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    margin-right: 0;
    margin-left: 0;
  }

  & > small {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 24px;
  }
}

.toast-group {
  display: flex;
  flex-direction: column;

  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  gap: var(--spacing-3);

  width: var(--viewport-standard);

  & > li {
    display: flex;
    flex-direction: row;

    box-shadow: 0px 4px 8px var(--secondary-6);

    & > span {
      display: flex;
      align-items: center;
      justify-content: center;

      min-width: 64px;
    }

    & > div {
      display: flex;
      flex-direction: column;

      margin-right: auto;
      padding: var(--spacing-3);

      & > h5 {
        margin: 0;
      }

      & > p {
        margin: 0;

        color: var(--black);
      }
    }

    & > button {
      cursor: pointer;
      padding: 0;
      border: none;
      background-color: transparent;
      margin-top: var(--spacing-2);
      margin-right: var(--spacing-3);
      margin-bottom: auto;
    }
  }

  & > li:first-of-type {
    margin-top: var(--spacing-3);
  }

  & > li:last-of-type {
    margin-bottom: var(--spacing-3);
  }

  .toast-success-item {
    background-color: var(--data-status-1);

    & > span {
      color: var(--white);
      background-color: var(--primary-3);
    }
  }

  .toast-warning-item {
    background-color: var(--data-status-2);

    & > span {
      color: var(--black);
      background-color: var(--data-focus-5);
    }
  }

  .toast-error-item {
    background-color: var(--data-status-3);

    & > span {
      color: var(--white);
      background-color: var(--data-focus-4);
    }
  }

  .toast-info-item {
    background-color: var(--data-status-4);

    & > span {
      color: var(--white);
      background-color: var(--data-focus-6);
    }
  }
}

.payment-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);

  & > ul {
    margin: 0;
    padding: 0;

    & > li {
      padding: var(--spacing-4);
      border: var(--border-1) solid var(--secondary-3);
      border-radius: var(--border-3);
      list-style-type: none;

      & > hr {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-3);
      }

      & > div {
        & > h4 {
          margin-top: 0;
          margin-bottom: var(--spacing-2);
        }

        & > small {
          font-size: 14px;
          line-height: 24px;

          & > b {
            font-weight: 600;
            padding-left: var(--spacing-2);
          }
        }

        & > span {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
        }

        & > p {
          margin: 0;
        }
      }

      & > div + div {
        margin-top: var(--spacing-3);
      }
    }

    & > li + li {
      margin-top: var(--spacing-3);
    }
  }

  & > article {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--data-status-1);
    border: var(--border-1) solid var(--primary-3);
    border-radius: 4px;

    & > h2, & > h4 {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  & > .info-card {
    max-width: 100%;
  }
}

.signable-files-section {
  display: flex;
  flex-direction: column;

  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);

  & > div {
    margin-bottom: var(--spacing-3);

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

  & > article + article {
    margin-top: var(--spacing-3);
  }

  & > article {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-4);
    gap: var(--spacing-3);

    border: var(--border-1) solid var(--secondary-3);
    border-radius: var(--border-3);

    & header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      & > h3 {
        margin-top: var(--spacing-2);
        margin-bottom: var(--spacing-2);
      }

      & > a {
        color: var(--secondary-link);
        flex-shrink: 0;
      }
    }

    & > div, & li {
      display: grid;
      grid-template-columns: 66.5% 33.5%;

      & > h5 {
        align-content: center;

        font-weight: 700;
        background: var(--secondary-7);

        margin: 0;
        padding: var(--spacing-3);

        border: var(--border-1) solid var(--secondary-3);
        border-radius: var(--border-3) 0 0 var(--border-3);

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & > input {
        padding: var(--spacing-3);

        border: var(--border-1) solid var(--secondary-3);
      }

      & > input[aria-invalid="true"] {
        border: var(--border-1) solid var(--invalid);
      }

      & > input:focus {
        z-index: 1;
      }

      & > small {
        align-content: center;

        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        background: var(--secondary-7);

        padding: var(--spacing-3);

        border: var(--border-1) solid var(--secondary-3);
        border-left: 0;
        border-radius: 0 var(--border-3) var(--border-3) 0;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & > small::before {
        margin-right: var(--spacing-1);
      }

      & > small[data-signature="valid"] {
        color: var(--approve-icon);
      }

      & > small[data-signature="none"] {
        color: var(--data-focus-1);

        & > a {
          color: var(--secondary-link);
        }
      }

      & > small[data-signature="invalid"] {
        color: var(--invalid);
      }
    }

    & li {
      grid-template-columns: 33.5% 33% 33.5%;

      & > h5 {
        border-right: 0;
      }
    }

    & > section {
      & > form > ul {
        padding: 0;
        margin-top: var(--spacing-2);

        & > li + li {
          margin-top: var(--spacing-3);
        }
      }

      & > small {
        color: var(--text-secondary);
        font-size: 12px;
      }

      & > small::before {
        margin-right: var(--spacing-1);
      }
    }
  }
}

.success-banner {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
  padding-left: var(--spacing-13);
  padding-right: var(--spacing-13);
  background-color: var(--primary-3);
  color: var(--white);

  & h1 {
    max-width: var(--viewport-standard-article);

    margin-top: 0;
    margin-bottom: var(--spacing-3);
  }

  & h3,
  & h5 {
    margin: 0;
  }

  & small,
  & span {
    display: inline-block;
    max-width: var(--viewport-standard-article);

    font-weight: 600;
  }
}

.error-banner {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
  padding-left: var(--spacing-13);
  padding-right: var(--spacing-13);
  background-color: var(--data-focus-4);
  color: var(--white);

  & h1 {
    max-width: var(--viewport-standard-article);

    margin-top: 0;
    margin-bottom: var(--spacing-3);

    font-weight: 700;
  }

  & small,
  & span {
    display: inline-block;
    max-width: var(--viewport-standard-article);

    font-weight: 600;
  }
}

.info-banner {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
  padding-left: var(--spacing-13);
  padding-right: var(--spacing-13);
  background-color: var(--data-focus-6);
  color: var(--white);

  & h1 {
    max-width: var(--viewport-standard-article);

    margin-top: 0;
    margin-bottom: var(--spacing-3);

    font-weight: 700;
  }

  & small,
  & span {
    display: inline-block;
    max-width: var(--viewport-standard-article);

    font-weight: 600;
  }
}

.search-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);
  background-color: var(--secondary-background-1);

  & > form {
    width: var(--viewport-standard);
  }
}

.application-list {
  display: flex;
  flex-direction: column;

  margin-top: var(--spacing-3);

  .application-card + .application-card {
    margin-top: var(--spacing-3);
  }
}

.application-card {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);

  border-radius: 4px;
  border: var(--border-1) solid var(--secondary-3);

  & > header {
    margin-bottom: var(--spacing-3);

    & > span {
      color: var(--white);
      font-weight: 700;
      font-size: 14px;
      line-height: 24px;

      background-color: var(--secondary-link);

      padding-top: var(--spacing-1);
      padding-bottom: var(--spacing-1);
      padding-left: var(--spacing-1);
      padding-right: var(--spacing-1);
    }

    & > span[data-status="approved"] {
      background-color: var(--primary-3);
    }

    & > span[data-status="rejected"] {
      background-color: var(--data-focus-4);
    }

    & > span[data-status="submitted"] {
      background-color: var(--data-focus-6);
    }

    & > span[data-status="correction"] {
      background-color: var(--secondary-link);
    }

    & > h4 {
      color: var(--black);
      margin-top: var(--spacing-2);
      margin-bottom: var(--spacing-2);
    }
  }

  & > hr:first-of-type {
    height: 2px;
    background-color: var(--secondary-4);
  }

  & > div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    & > hr:not(:last-of-type) {
      height: auto;
      width: 2px;
      margin-left: var(--spacing-4);
      margin-right: var(--spacing-4);
      margin-top: var(--spacing-3);
      margin-bottom: var(--spacing-3);
      background-color: var(--secondary-1);
      border: none;
    }

    & > section {
      margin-top: var(--spacing-3);
      margin-bottom: var(--spacing-3);

      & > b {
        color: var(--black);
      }
    }
  }

  & > hr:not(:first-of-type) {
    height: 1px;
    background-color: var(--border-secondary-1);
  }

  & > footer {
    display: flex;

    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
  }
}

.pagination {
  & > ul {
    display: flex;
    gap: var(--spacing-3);
    list-style: none;
    justify-content: center;
    align-items: center;

    & a {
      color: var(--black);
    }

    & button {
      display: flex;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 0;
    }

    & button[aria-current="true"] {
      background-color: var(--primary-1);
      border-color: var(--border-secondary-2);

      > a {
        color: var(--white);
      }
    }
  }
}

.applications-listing-filters {
  display: flex;
  flex-direction: row;

  gap: var(--spacing-3);

  & > label {
    gap: 0;

    & > multi-select,
    & > repetitive-reference {
      width: 17rem;

      & > details {
        & > summary {
          border-color: var(--secondary-2);
          background-color: var(--white);
        }

        & > section {
          width: 17rem;
          position: absolute;
        }
      }
    }
  }

  & > div {
    & > input:focus,
    & > button:focus {
      z-index: 1;
    }

    display: flex;
    flex-direction: row;

    margin-left: auto;

    & > input {
      width: 16rem;
      padding-left: var(--spacing-2);

      border: var(--border-1) solid var(--secondary-2);
      border-radius: var(--border-3) 0 0 var(--border-3);
    }

    & > button {
      padding-top: var(--spacing-2);
      padding-bottom: var(--spacing-2);
      padding-left: var(--spacing-3);
      padding-right: var(--spacing-3);
      background: var(--white);
      border: var(--border-1) solid var(--secondary-2);
      border-radius: 0 var(--border-3) var(--border-3) 0;
      border-left: 0;
    }
  }
}

.consents-list {
  & > ul {
    list-style-type: none;
    padding-left: 0;

    & > li + li {
      margin-top: var(--spacing-3);
    }

    & > li ul,
    & > li ol {
      padding-left: var(--spacing-4);

      & > li::marker {
        color: var(--data-focus-1);
      }
    }

    & > li ul {
      list-style: disc;
    }
  }
}

.review-form,
.application-view-article {
  gap: var(--spacing-4);
  display: flex;
  flex-direction: column;
  width: 868px;

  & > h1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  & > label:has(> input[type="checkbox"]) {
    row-gap: unset;

    &:first-of-type {
      margin-top: var(--spacing-2);
    }
  }

  & > ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;

    & > li:has(h4, h5) {
      align-items: center;
      justify-content: space-between;

      list-style-type: none;

      & > h4 {
        margin-top: var(--spacing-3);
        margin-bottom: 0;
      }

      & > a {
        text-decoration: underline;
        color: var(--primary-1);
      }

      & > h5 {
        line-height: 32px;
        color: var(--text-secondary);

        margin-top: 0;
        margin-bottom: 0;

        padding-left: 0;
      }
    }

    & > li:not(has(h4, h5)) {
      border-top: var(--border-1) solid var(--divider-secondary);
    }

    & > li:not(:has(h4, h5), :has(details)),
    & > li > details > ul > li:not(:last-child) {
      border-bottom: var(--border-1) solid var(--divider-secondary);
      color: var(--black);
    }

    & > li > label,
    & > li > details > ul > li > label {
      flex-shrink: 0;
      width: 257px;
      padding-right: var(--spacing-5);
    }

    & > li:not(:has(details), :has(h5)),
    & > li > details > ul > li:not(:has(details), :has(h5)) {
      color: var(--black);
      display: flex;
      flex-direction: row;

      padding-top: var(--spacing-3);
      padding-bottom: var(--spacing-3);
    }

    & > li > details {
      border-bottom: var(--border-1) solid var(--divider-secondary);
    }

    & > .ro-field + li:has(h5),
    & > .ro-repetitive + li:has(h5) {
      margin-top: var(--spacing-4)
    }
  }
}

.ro-field {
  word-break: break-word;
}

.ro-repetitive {
  list-style-type: none;

  & > details {
    & > summary {
      display: flex;
      align-items: center;
      padding-bottom: var(--spacing-3);
      padding-top: var(--spacing-3);
      padding-right: var(--spacing-3);
      cursor: pointer;
    }

    & > summary::before {
      padding-right: var(--spacing-2);
      font-family: "e_gov", monospace!important;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      font-size: 24px;
      content: "\e801";
    }

    & > ul {
      list-style-type: none;

      margin-top: var(--spacing-3);
      margin-bottom: var(--spacing-3);
      padding-left: var(--spacing-5);
      padding-right: var(--spacing-5);
    }
  }

  & > details[open] {
    & > summary {
      background-color: var(--primary-2-light);
    }

    & > summary::before {
      content: "\e802";
    }
  }
}

.ro-card-select,
.ro-browser,
.ro-embedded-options,
.ro-s3-file {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0;

  & > li {
    max-width: 294px;
    max-height: 24px;
    background-color: var(--secondary-4);
    border-radius: 4px;
    list-style-type: none;
    padding-bottom: var(--spacing-1);
    padding-top: var(--spacing-1);

    & > span, & > a {
      display: block;
      color: var(--black);
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: var(--spacing-2);
      padding-right: var(--spacing-2);
    }

    & > a::after {
      padding-left: var(--spacing-2)
    }
  }
}

.ro-am-address {
  display: inline-block;

  & > span:not(:first-child):not(:empty)::before {
    content: ", ";
  }

  & > span:empty + span:not(:empty)::before {
    content: "";
  }

  & > span:not(:empty) ~ span:empty + span:not(:empty)::before {
    content: ", ";
  }
}

.tab-control {
  & > ul[role="tablist"] {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    border-bottom: var(--border-1) solid var(--secondary-2);

    & > li > button {
      display: flex;
      gap: var(--spacing-2);
      margin: var(--spacing-1);
      padding-right: var(--spacing-4);
      padding-left: var(--spacing-4);
      padding-top: var(--spacing-2);
      padding-bottom: var(--spacing-2);
      border: none;
      border-radius: unset;
      background-color: var(--secondary-background-1);
      cursor: pointer;

      & > span {
        text-decoration: underline;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
      }
    }

    & > li:has(> button[aria-selected="true"]) {
      position: relative;
      top: 1px;
      border-top: var(--border-1) solid var(--secondary-2);
      border-right: var(--border-1) solid var(--secondary-2);
      border-left: var(--border-1) solid var(--secondary-2);
      border-bottom: var(--border-1) solid var(--white);

      & > button {
        background-color: unset;
      }
    }
  }

  & > div[role="tabpanel"][aria-selected="true"] {
    display: block;
  }

  & > div[role="tabpanel"][aria-selected="false"] {
    display: none;
  }
}

.application-view-article {
  & > h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-3);
  }

  & > span {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-secondary);
  }

  & .files-section > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-5);
    row-gap: var(--spacing-3);
  }
}