@font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/public/assets/fonts/muli-ext04.woff) format("woff");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/public/assets/fonts/muli-ext05.woff) format("woff");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Muli';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/public/assets/fonts/muli-lat.woff) format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

.text-column-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
            flex-direction: row;
    gap: 60px;
}

.text-column-container>* {
    -webkit-flex-basis: 50%;
            flex-basis: 50%;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
       -moz-box-flex: 0;
            flex-grow: 0;
}
  
.chevron {
    padding-left: 10px
}

.chevron::marker {
    content: "\203A";
    font-size: 150%
}

h1,
h2,
h3 {
    font-weight: 400
}

h4,h5,h6 {
    font-weight: 800
}

h1 {
    font-size: 300%;
    color: #1475ff
}

h2 {
    font-size: 180%
}

h2:before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 3em;
    margin-top: -3em
}

h3 {
    font-size: 130%;
}

h4 {
    font-size: 120%;
}

h5 {
    font-size: 110%;
}

h6 {
    font-size: 105%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000a3c
}

h1.font-sm,
h2.font-sm,
h3.font-sm {
    font-size: 190%
}

h1.font-md,
h2.font-md,
h3.font-md {
    font-size: 225%
}

p,
ul,
ol {
    margin-bottom: 1em;
    line-height: 1.7em
}

p {
    text-align: justify
}

ul>li {
    margin-bottom: 0.5em;
    list-style-type: square
}

ol>li {
    margin-bottom: 0.5em
}

table {
    overflow-x: auto;
    width: 100%;
    text-align: left;
    border-collapse: collapse
}

table tr td:first-of-type {
    text-align: left
}

table tr {
    vertical-align: top
}

table th,
table td {
    padding: 1em 0.25em;
    border: 1px solid gray
}

table td p, table th p {
    text-align: left
}

table th {
    background-color: lightgray
}

table th p,
table td p {
    margin: 0;
}

select {
    color: #fff;
    border: 1px solid #000a3c;
    line-height: 1;
    outline: 0;
    padding: 0.65em 2.5em 0.55em 0.75em;
    border-radius: #000a3c;
    background-color: #000a3c
}

select:focus {
    outline: #005fcc double 5px
}

select:active {
    color: #fff;
    border-color: #000a3c;
    background-color: #000a3c
}

strong {
    font-family: Roboto, sans-serif
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, "Times New Roman", Times, serif;
    font-size: 95%;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    font-display: swap
}

.underline {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.center {
    text-align: center
}

.container {
    display: grid;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
            align-items: center
}

.container.grid-top {
    -webkit-box-align: start;
    -webkit-align-items: start;
       -moz-box-align: start;
            align-items: start
}

.container.grid-gap-sm {
    gap: 2em
}

.container.grid-no-row-gap {
    grid-row-gap: 0em
}

.container.two.columns {
    grid-template-columns: auto auto
}

#top {
    position: relative;
    top: -50px
}

body>header {
    z-index: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #000a3c;
    padding: 1em
}

body>header .icon {
    max-width: 225px
}

body>header div {
    text-align: right
}

body>header div a {
    color: #fff;
    -webkit-text-decoration: none;
    text-decoration: none;
    padding: 0.5em;
    background: #1475ff;
    border-radius: 0.5em
}

body>header span {
    margin-left: 10%
}

body>main {
    color: #212529;
    min-height: -webkit-calc(100vh - 155px);
    min-height: -moz-calc(100vh - 155px);
    min-height: calc(100vh - 155px);
    margin: 0 3em;
    background-color: white
}

#language-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
}

#language-container>label {
    margin: 10px;
}

body>main div.dropdown-container label div {
    margin-top: 0.2em;
    margin-bottom: 0.2em
}

body>main div#language {
    text-align: right
}

body>footer {
    color: #fff;
    background: #000a3c;
    padding: 1em 0
}

body>footer>div {
    margin: 0 5em
}

body>footer>div ul {
    list-style-type: none;
    text-align: center
}

body>footer>div ul li {
    display: inline-block;
    padding: 0.5em
}

body>footer>div ul li a {
    color: white;
    -webkit-text-decoration: none;
    text-decoration: none
}

body>footer>div p {
    text-align: center
}

  details > summary {
      cursor: pointer;
  }

  details p  {
    margin: 5px 20px 20px 20px;
  }

details h2 {
    font-size: 150%
}

details h3 {
    font-size: 110%;
}

details h4 {
    font-size: 100%;
}

details h5 {
    font-size: 95%;
}

details h6 {
    font-size: 90%;
}

  details h2, details h3, details h4, details h5, details h6 {
    margin: 10px 20px;
  }

  details {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-transition: all 150ms;
    -moz-transition: all 150ms;
    transition: all 150ms;
  }

details > details {
    margin: 10px 10px 50px 10px;
}

  summary {
    padding: 10px;
  }

  summary:hover {
    background-color: #eef1fc;
  }

  details[open]:hover {
    background-color: #fff;
  }

  details[open] > summary {
    border-bottom: 3px solid #000a3c;
    background-color: #eef1fc;
  }

  details[open] > summary::marker {
    color: #005fcc;
  }

details > summary {
    position: relative;
}

main[dir]:not([dir="rtl"]) details > summary:after, [dir]:not([dir=rtl]) details[open] > summary:after {
  position: absolute;
  right: 15px;
  bottom: 30%;
  color: #000;
  font-size: 80%;
}

main[dir]:not([dir="rtl"]) details > summary:after {
  content: "Expand"
}

main[dir]:not([dir="rtl"]) details[open] > summary:after {
  content: "Collapse"
}

main[dir="rtl"] details > summary:after, [dir="rtl"] details[open] > summary:after {
    position: absolute;
    left: 15px;
    bottom: 30%;
    color: #000;
    font-size: 80%;
}

main[dir="rtl"] details > summary:after {
  content: "Expand"
}

main[dir="rtl"] details[open] > summary:after {
  content: "Collapse"
}

  summary::marker {
    font-size: 100%;
  }

  details:hover>summary {
    color: #005fcc;
  }

  details[open]:hover>summary {
    color: #000;
  }
  details>summary>*{
    display: inline;
  }

  details > table {
    width: 95%;
    margin: 0 auto;
  }

@media only screen and (min-width: 768px) {
    body {
        font-size: 110%
    }

    body>main {
        margin: 0 15%
    }

    body>main div.content.shifted {
        margin-left: 3em
    }

    body>main>div.content>div:not(.no-shift) {
        margin-left: 3em
    }
}

@media only screen and (max-width: 767px) {
    .container.two.columns:not(.logo) {
        grid-template-columns: auto
    }

    body>main div#language {
        text-align: left
    }
}

@media only screen and (max-width: 481px) {
    .back-to-top-btn {
        display: none
    }
}