:root {
  --logo-size-base: 143;
  --logo-size-base-shrunk: 19;
  --logo-container-size: calc(var(--logo-size-base-shrunk) * 1px);
  --logo-text-size-shrunk: 26px;
  --text-logo-container-width: 261;
  --logo-text-width-deed: calc(571 * 15.32567% / 196);
  --logo-text-width-poll: calc(489 * 15.32567% / 196);
  --logo-text-width-office: calc(771 * 15.32567% / 196);
  --logo-size-by: 0.4;
  --logo-size: calc(var(--logo-size-base) * var(--logo-size-by));
  --logo-size-shrunk: calc(var(--logo-size-base-shrunk) * var(--logo-size-by));
  --navbar-padding-y: 0.2rem;
  --navbar-brand-padding-y: 0.5rem;
  --navbar-height: calc(var(--logo-container-size) + (2 * var(--navbar-brand-padding-y)) + (2 * var(--navbar-padding-y)));
  --navbar-margin-bottom: 1rem;
  --dpo-h1-font-size: calc(var(--dpo-heading-font-size-base) + var(--dpo-h1-font-size-diff) * var(--dpo-heading-font-size-factor));
  --dpo-h2-font-size: calc(var(--dpo-heading-font-size-base) + var(--dpo-h2-font-size-diff) * var(--dpo-heading-font-size-factor));
  --dpo-h3-font-size: calc(var(--dpo-heading-font-size-base) + var(--dpo-h3-font-size-diff) * var(--dpo-heading-font-size-factor));
  --dpo-h4-font-size: calc(var(--dpo-heading-font-size-base) + var(--dpo-h4-font-size-diff) * var(--dpo-heading-font-size-factor));
  --dpo-h4-font-size-small: calc(var(--dpo-h4-font-size) / var(--dpo-large-scale-factor));
}

h1, .h1, .h1-text {
  margin: 0 0 calc(var(--dpo-h1-line-height) * var(--dpo-h1-font-size));
  & ~ &, & ~ * & {
    margin-top: calc(var(--dpo-h1-line-height) * var(--dpo-h1-font-size) * 4/3);
  }
}
h2, .h2, .h2-text {
  margin: calc(var(--dpo-h2-line-height) * var(--dpo-h2-font-size) * 1.5) 0 calc(var(--dpo-h2-line-height) * var(--dpo-h2-font-size) * 0.75);
  body.popup & { margin-top: calc(var(--dpo-h2-line-height) * var(--dpo-h2-font-size) * 0.75); }
}

.text-navy {
    --bs-text-opacity: 1;
    --bs-link-color-rgb: var(--dpo-navy-blue-rgb);
    color: rgba(var(--navy-rgb), var(--bs-text-opacity)) !important;
}
.text-inverse {
    --bs-text-opacity: 1;
    color: rgba(var(--black-rgb), var(--bs-text-opacity)) !important;
}
.bg-inverse {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--black-rgb), var(--bs-bg-opacity)) !important;
}
.text-bg-inverse {
    color: #fff !important;
    background-color: rgba(var(--black-rgb), var(--bs-bg-opacity, 1)) !important;
}

.full-row-width { width: calc(100vw - var(--bs-gutter-x) - var(--scrollbar-width)); }
@media (min-width: 576px) {
    .container, .container-sm { max-width: 540px; }
    .full-row-width { width: calc(540px - var(--bs-gutter-x)); }
}
@media (min-width: 768px) {
    .container, .container-md, .container-sm { max-width: 720px; }
    .full-row-width { width: calc(720px - var(--bs-gutter-x)); }
}
@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm { max-width: 960px; }
    .full-row-width { width: calc(960px - var(--bs-gutter-x)); }
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1140px; }
    .full-row-width { width: calc(1140px - var(--bs-gutter-x)); }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1440px; }
    .full-row-width { width: calc(1440px - var(--bs-gutter-x)); }
    .navbar-container .container {
        max-width: 1640px;
    }
}

.navbar-collapse > div {
    height: calc(100vh - var(--navbar-height));
}
@media (min-width: 992px) {
    .navbar-collapse > div {
        height: auto;
    }
    .navbar-expand-lg .navbar-nav {
        text-shadow: 0px 0px 2px rgba(from var(--bs-primary) r g b / 0.3);
    }
}
.navbar-nav .btn {
    --bs-btn-padding-y: calc((var(--logo-container-size) - var(--bs-btn-line-height)) / 2);
}

nav a.text-logo {
    /*
    margin-left: calc(var(--logo-size-base-shrunk) * 0.8 * var(--logo-size-by) * 1px);
    */
    width: calc((var(--logo-text-width-office) + var(--logo-text-width-deed) * 2/3) * var(--logo-size-by) * 1px);
}
.navbar-brand {
    height: calc(var(--logo-size) * 1px + var(--bs-navbar-brand-padding-y) * 2);
}
nav .text-logo-container {
    width: calc(var(--logo-size-base-shrunk) / 40 * 261px);
}
nav div.text-logo {
    width: calc(100% * var(--logo-size-by) * 40 / var(--logo-size-base-shrunk));
}

nav .shield-logo-container {
    position: relative;
    width: calc(300 / 404 * var(--logo-container-size));
    height: var(--logo-container-size);
    margin-right: calc(300 / 404 * (var(--logo-size) / var(--logo-size-base-shrunk) * var(--logo-container-size) - var(--logo-container-size)));
}
nav .dpo-shield-logo { height: calc(var(--logo-size) / var(--logo-size-base-shrunk) * 100%); }
nav .two-shield-logo {
    height: calc(752.74/1000 * var(--logo-size) / var(--logo-size-base-shrunk) * 100%);
    top: calc(var(--logo-container-size) / 2 - 247.5/1000 * var(--logo-size) / var(--logo-size-base-shrunk) * 100%);
    margin-left: calc(-30.2/1000 * var(--logo-size) / var(--logo-size-base-shrunk) * 100%);
}
nav a.shield-logo {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 240px) {
    :root { --logo-size-base-shrunk: 20; }
}
@media screen and (min-width: 260px) {
    :root { --logo-size-base-shrunk: 22; }
}
@media screen and (min-width: 280px) {
    :root { --logo-size-base-shrunk: 24; }
}
@media screen and (min-width: 300px) {
    :root { --logo-size-base-shrunk: 26; }
}
@media screen and (min-width: 320px) {
    :root { --logo-size-base-shrunk: 28; }
}

@media screen {
    body:not(.home) .like-container {
        margin-top: calc(75px + 2*var(--navbar-padding-y) + var(--navbar-margin-bottom));
    }
}

@media screen and (min-width: 360px) and (min-height: 260px) {
    :root {
        --logo-size-by: 0.5;
        --logo-size-base-shrunk: 32;
        --navbar-padding-y: 0.2rem;
    }
    body:not(.home) .like-container {
        margin-top: calc(89.5px + 2*var(--navbar-padding-y) + var(--navbar-margin-bottom));
    }
}
@media screen and (min-width: 500px) and (min-height: 260px) {
    :root {
        --logo-size-by: 0.5;
        --logo-size-base-shrunk: 40;
        --navbar-padding-y: 0.2rem;
    }
}
@media screen and (min-width: 880px) and (min-height: 500px) {
    :root {
        --logo-size-by: 0.6;
        --navbar-padding-y: 0.7rem;
    }
    body:not(.home) .like-container {
        margin-top: calc(104px + 2*var(--navbar-padding-y) + var(--navbar-margin-bottom));
    }
}
@media screen and (min-width: 1100px) and (min-height: 600px) {
    :root {
        --logo-size-by: 0.8;
        --navbar-padding-y: 1rem;
    }
    body:not(.home) .like-container {
        margin-top: calc(132.5px + 2*var(--navbar-padding-y) + var(--navbar-margin-bottom));
    }
}
@media screen and (min-width: 1200px) and (min-height: 700px) {
    :root {
        --logo-size-by: 1;
    }
    body:not(.home) .like-container {
        margin-top: calc(161px + 2*var(--navbar-padding-y) + var(--navbar-margin-bottom));
    }
}

.navbar-padding, .navbar-padding-top, .full-height {
    padding-top: var(--navbar-height);
}
.navbar-padding, .navbar-padding-bottom {
    padding-bottom: var(--navbar-height);
}

.btn.fixed-line-height {
    --btn-fixed-line-height: calc(var(--bs-btn-font-size) * var(--bs-btn-line-height));
    line-height: var(--btn-fixed-line-height);
}

.sticky-navbar-offset {
    position: sticky;
    top: calc(var(--navbar-height) + 1rem);
    z-index: 1020;
}

h2, h3, h4, h5, h6,
.control-group.error {
    scroll-margin-top: calc(var(--navbar-height) + 1rem);
}