@font-face {
  font-family: "Noto Sans";
  src: url("https://assets.insiderpie.de/fonts/NotoSans-VariableFont_wdth,wght.ttf") format('truetype');
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans";
  src: url("https://assets.insiderpie.de/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf") format('truetype');
  font-style: italic;
}

/* 
 * Override Safari's User Agent Stylesheet which by default makes h1 and b 
 * elements way too bold.
 */

h1, h2, b {
  font-weight: 599;
}

* {
    --primary-background: #172A3A;
    --hover-background: #F0F0F0;
    --primary-hover-background: hsl(207, 38%, 24%);
    --main-background: #F8F9FB;
    --primary-text-color: black;
    --secondary-text-color: #555555;

    --border-width: 1px;
    --border-color: #F0F0F0;
    --border-color-hover: #E1E1E1;
    --border: var(--border-width) solid var(--border-color);

    --value-background: rgba(65,63,179,0.2);
    --value-color: #413FB3;
    --growth-background: #DDEFE8;
    --growth-color: #394841;

    --mdc-theme-primary: #178f93;
    --link-color: #086375;
    --secondary-color: rgba(0, 0, 0, 0.5);
    --chart-border-color: #5ce1e6;

    --positive: #07803D;
    --positive-secondary: rgba(8,99,117,0.8);
    --negative: #F20000;
    --negative-secondary: rgba(242,0,0,0.8);
}

@media (prefers-contrast: more) {
    * {
        --mdc-theme-primary: hsl(182, 73%, 22%);
        --secondary-color: rgba(0, 0, 0, 0.75);

        --positive: #006800;
        --positive-secondary: rgba(0, 104, 0, 0.75);
        --negative: #b50000;
        --negative-secondary: rgba(181, 0, 0, 0.75);
    }

        * .mdc-chip {
            background-color: white;
            border: 1px solid #000;
            border: 1px solid var(--mdc-theme-on-surface, #000);
        }
}

:root {
    --navbar-content-height: min(55px, 17vh);
    --bottom-nav-height: min(70px, 17svh);
    --navbar-height: calc(var(--navbar-content-height) + var(--border-width));
    --layout-grid-gap: var(--mdc-layout-grid-gutter-desktop, 24px);
    --sidebar-width: min(295px, calc(100vw - var(--navbar-content-height)));
    --tabbar-height: 62px;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    color: black;
    margin: 0;
    box-sizing: border-box;
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
}

dialog {
    max-width: 600px;
    z-index: 3;
    background-color: white;
    border: var(--border);
    box-shadow: 0 0 12px 6px rgba(2, 2, 2, 0.03);
    border-radius: 8px;
    padding: 16px;
    margin: 16px;
    margin-left: auto;
    margin-right: auto;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    padding: 12px 16px;
    border: var(--border);
    border-radius: 8px;
}

article {
    margin: 16px;
}

@media screen and (min-width: 1200px) {
    article {
        margin: 16px 20px;
    }
}

button,
.button {
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--primary-background);
    color: white;
    font-weight: 400;
    font-size: 1rem;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

button:not(.does-not-exist):hover,.button:hover {
        background-color: var(--primary-hover-background);
    }

a.button:not(.secondary) {
    color: white !important;
}

button.secondary,
.button.secondary {
    color: black;
    background-color: white;
    border: var(--border);
}

button.secondary:not(.does-not-exist):hover,.button.secondary:hover {
        background-color: var(--hover-background);
    }

button[aria-busy="true"] {
    cursor: wait;
}

a:not(.button) {
    color: var(--link-color);
}

small {
    color: var(--secondary-text-color);
    font-size: 0.875rem;
    font-weight: 400;
}

:root, #baselayer, main {
    background-color: var(--main-background);
}

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

img.secondary {
    filter: opacity(0.627)
}

meter::-webkit-meter-optimum-value {
    background-color: #086375;
}

/* meter::-webkit-meter-suboptimum-value {
	background-color: var(--pico-meter-suboptimum-color);
}
meter::-webkit-meter-even-less-good-value {
	background-color: var(--pico-meter-even-less-good-color);
} */

.positive, a.positive {
    color: var(--positive);
}

.secondary .positive,
.positive .secondary {
    color: var(--positive-secondary);
}

.negative, a.negative {
    color: var(--negative);
}

.secondary .negative,
.negative .secondary {
    color: var(--negative-secondary);
}

.not-animated {
    display: none;
}

@media (prefers-reduced-motion) {
    .not-animated {
        display: inline;
        display: initial;
    }

    .animated {
        display: none;
    }
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        /* Chrome, Safari 6 – 15.3, Edge */
        /* Firefox 48 – 96 */
        print-color-adjust: exact !important;
        /* Firefox 97+, Safari 15.4+ */
    }

    .mdc-layout-grid__cell {
        page-break-inside: avoid;
        -moz-column-break-inside: avoid;
             break-inside: avoid;
    }

    .dont-print {
        display: none !important;
    }

    .hidden-print {
        visibility: hidden !important;
    }

    .mdc-layout-grid__cell {
        grid-column-end: span 12;
    }
}

.upgrade-to-view button {
        background-color: var(--primary-background);
        color: white;
        border: none;
        padding: 12px 16px;
        border-radius: 8px;
        transition: background-color 0.2s ease-in-out;
        cursor: pointer;
    }

.upgrade-to-view button:hover {
            background-color: var(--primary-hover-background);
        }

form .error-text {
        color: #ae0000;
    }

.layout-box {
    padding: 0 var(--layout-grid-gap);
}

#skip-to-main-content {
    position: fixed;
    top: -100%;
    padding: 16px;
    font-size: 1.25rem;
    background-color: black;
    color: white;
    z-index: 8;
    transition: top ease-in-out;
}

#skip-to-main-content:focus {
    top: 0;
}

@media screen {
    .sr-only {
        display: none;
    }
}

@media print {
    .sr-only {
        display: none;
    }
}

.loader {
    margin: 24px;
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: var(--primary-background);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader-container.animated.inline {
    display: inline;
}

.loader-container.animated.inline > .loader {
        margin: 0 1ch;
        height: calc(1lh - 4px);
        width: calc(1lh - 4px);
        border-width: 2px;
        vertical-align: middle;
    }

@media screen and (prefer-reduced-motion: reduce) {
    .loader-container.animated {
        display: none;
    }

    .loader-container.not-animated {
        display: block;
    }

    .loader-container.inline.not-animated {
        display: inline;
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.switch {
    display: flex;
    display: block flex;
    align-items: center;
}

.switch > div:first-child {
        position: relative;
        white-space: nowrap;
        width: 45px;
        height: 25px;
        display: inline;
        margin-right: 1ch;
    }

.switch > div:first-child .switch-icon {
            position: absolute;
            background-color: #ccc;
            border-radius: 12.5px;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: background-color .2s ease-in-out;
        }

.switch > div:first-child .switch-icon::before {
            background-color: white;
            border-radius: 50%;
            content: "";
            position: absolute;
            left: 4px;
            bottom: 4px;
            height: 17px;
            width: 17px;
            transition: transform .2s ease-in-out;
        }

.switch > div:first-child input:checked + .switch-icon {
            background-color: var(--primary-background);
        }

.switch > div:first-child input:checked + .switch-icon::before {
            transform: translateX(20px);
        }

.switch > div:first-child input {
            visibility: hidden;
            width: 0px;
            margin-right: 45px;
        }

.favorite-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 38px;
    width: 38px;
    border-radius: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.favorite-button img {
        width: 100%;
        border-radius: 8px;
    }

.heartbeat {
    animation: heartbeat-animation 0.18s ease-in-out;
}

@keyframes heartbeat-animation {
    from {
        transform: scale(1);
    }

    50% {
        transform: scale(1.75);
    }

    99% {
        transform: scale(3.5);
        opacity: 0.1;
    }

    to {
        transform: scale(1);
    }
}

.gauge-chart {
    margin: 34px 26px 0 26px;
    position: relative;
}

.gauge-chart div:has(canvas) {
        position: relative;
        width: 100%;
    }

.gauge-chart img {
        position: absolute;
        width: 40%;
        right: 50%;
        top: 90%;
        transform: rotate(0);
        transition: transform 1s ease-out;
        transform-origin: right;
    }

.info-button {
    display: inline-block;
    width: 16px;
}

.info-button summary {
        display: inline list-item;
        list-style: none;
    }

.info-button summary::-webkit-details-marker {
        display: none;
    }

.info-button > *:not(summary) {
        max-width: 600px;
        position: fixed;
        z-index: 3;
        background-color: white;
        border: var(--border);
        box-shadow: 0 0 12px 6px rgba(2, 2, 2, 0.03);
        border-radius: 8px;
        padding: 16px;
        font-weight: 400;
        font-size: 0.875rem;
        color: var(--secondary-text-color);
        line-height: normal;
    }

.info-button.fade-in > *:not(summary) {
        animation: fade-in 0.2s ease-in;
        opacity: 1;
    }

.info-button:not(.fade-in) > *:not(summary) {
        animation: fade-in reverse 0.2s ease-out;
    }

header:has(>*:first-child+.info-button:nth-child(2)),
div:has(>*:first-child+.info-button:nth-child(2)) {
    margin-bottom: 8px;
}

header:has( > :first-child + .info-button:nth-child(2))  > :first-child {
        display: inline;
    }

div:has( > :first-child + .info-button:nth-child(2))  > :first-child {
        display: inline;
    }

header:has( > :first-child + .info-button:nth-child(2))  > :first-child + .info-button {
        display: inline;
    }

div:has( > :first-child + .info-button:nth-child(2))  > :first-child + .info-button {
        display: inline;
    }

header:has( > :first-child + .info-button:nth-child(2))  > :first-child + .info-button {
        margin-left: 1ch;
        vertical-align: middle;
    }

div:has( > :first-child + .info-button:nth-child(2))  > :first-child + .info-button {
        margin-left: 1ch;
        vertical-align: middle;
    }

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.data-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table thead th {
      background-color: #F0F0F0;
      height: 32px;
  }

.data-table tbody tr:first-child th:first-child {
      border-top-left-radius: 10px;
  }

.data-table tbody tr:first-child td:last-child {
      border-top-right-radius: 10px;
  }

.data-table tbody tr {
      border-bottom: var(--border);
      transition: background-color 0.2s ease-in-out;
  }

.data-table tbody tr:hover {
      border-radius: 10px;
      background-color: var(--hover-background);
  }

.data-table thead th:first-child {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
  }

.data-table thead th:last-child {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
  }

.data-table th,.data-table td {
      padding: 8px;
  }

.data-table a {
      color: black;
      -webkit-text-decoration: none;
      text-decoration: none;
      height: 52px;
      display: flex;
      display: block flex;
      align-items: center;
  }

.data-table-navigation {
  display: flex;
  display: block flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  color: var(--secondary-text-color);
}

.data-table-navigation .navigation-buttons {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
  }

.data-table-navigation select,.data-table-navigation button {
      padding: 6px 10px;
      border-radius: 4px;
      border: var(--border);
      background-color: white;
      color: black;
  }

.data-table-navigation button.prev,.data-table-navigation button.next {
      border: none;
  }

.data-table-navigation button.prev img {
      transform: rotate(90deg);
  }

.data-table-navigation button.next img {
      transform: rotate(-90deg);
  }

.data-table-navigation button {
      transition: background-color 0.2s ease-in-out;
  }

.data-table-navigation button:disabled {
          filter: opacity(50%);
      }

.data-table-navigation button:hover:not(:disabled) {
          background-color: var(--hover-background);
      }

.data-table-navigation button img {
          vertical-align: bottom;
      }

#baselayer {
    min-height: 100dvh;
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;

    display: grid;
    grid-template-areas:
        "navbar"
        "main";
    grid-template-rows: var(--navbar-height) minmax(0, 1fr);
}

#baselayer #navbar {
        grid-area: navbar;
    }

#baselayer #print-top-bar {
        grid-area: print-top-bar;
    }

#baselayer #sidebar {
        grid-area: navmenu;
    }

#baselayer main {
        grid-area: main;
        overflow-y: visible;
        min-height: calc(100dvh - var(--navbar-height));
        max-width: 100vw;
        padding-bottom: var(--layout-grid-gap);
        box-sizing: border-box;
        /* 
         * Add top-padding equivalent to the navbar height, then move the element up by the same amount.
         * The result is that the element has the same position as before, but when the user clicks
         * the "Skip to main content" link, the browser does not scroll the main content under the navbar.
         */
        padding-top: var(--navbar-height);
        position: relative;
        top: calc(-1 * var(--navbar-height));
    }

#baselayer:has(#bottom-nav-bar) main {
        padding-bottom: calc(var(--layout-grid-gap) + var(--bottom-nav-height));
    }

@media screen and (min-width: 1200px) {
    :root {
        --navbar-content-height: 87px;
    }

    #baselayer {
        grid-template-areas:
            "navbar   navbar"
            "navmenu  main  ";
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: var(--navbar-height) minmax(0, 1fr);
    }
            #baselayer #navbar .logo {
                border-right: var(--border);
            }

            #baselayer #navbar #menu-button {
                display: none;
            }
}

@media print {
    #baselayer {
        grid-template-areas:
            "print-top-bar"
            "main";
        grid-template-rows: auto minmax(0, 1fr);
    }
}

#navbar {
    position: fixed;
    height: var(--navbar-content-height);
    max-width: 100vw;
    width: 100%;
    background-color: white;
    z-index: 2;
    border-bottom: var(--border);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navbar .logo {
        flex: 0 1 var(--sidebar-width);
        width: calc(var(--sidebar-width) - 64px);
        padding-right: 64px;
        aspect-ratio: 5 / 2;
        vertical-align: middle;
    }

#navbar button {
        background-color: transparent;
        border: none;
        height: var(--navbar-content-height);
        width: var(--navbar-content-height);
        cursor: pointer;
    }

#navbar .search-bar {
        flex-grow: 1;
    }

#navbar .search-bar > .mdc-text-field__icon,#navbar .search-bar > .mdc-floating-label,#navbar .search-bar > input {
            color: rgba(255, 255, 255, 0.88) !important;
            caret-color: white !important;
        }

#navbar .search-bar > .mdc-line-ripple::before {
            border-bottom-color: rgba(255, 255, 255, 0.42) !important;
        }

#navbar .search-bar.mdc-text-field--focused > .mdc-text-field__icon,#navbar .search-bar.mdc-text-field--focused > .mdc-floating-label,#navbar .search-bar.mdc-text-field--focused > input {
            color: white !important;
        }

#navbar .search-bar.mdc-text-field--focused > .mdc-line-ripple--active::after {
            border-bottom-color: rgba(255, 255, 255, 0.88) !important;
        }

#navbar search {
        display: none;
        flex: 1 0 max-content;
    }

#navbar search input {
            width: calc(100% - 80px);
            margin: 32px 40px;
            border: none;
        }

#navbar #profile-icon {
        display: none;
        grid-template-areas:
            "photo name"
            "photo email"
        ;
        grid-template-rows: auto 1fr;
        grid-template-columns: auto auto;
        -moz-column-gap: 16px;
             column-gap: 16px;
        row-gap: 4px;
        padding: 0 16px;
        color: black;
        -webkit-text-decoration: none;
        text-decoration: none;
    }

#navbar #profile-icon img {
            grid-area: photo;
            height: 48px;
            width: 48px;
            border-radius: 48px;
        }

#navbar #profile-icon span:nth-child(2) {
            grid-area: name;
            font-weight: 500;
        }

#navbar #profile-icon span:last-child {
            grid-area: email;
            color: var(--secondary-text-color);
            font-weight: 400;
        }

@media screen and (min-width: 1200px) {
        #navbar search {
            display: block;
        }

        #navbar .share-button {
            display: none;
        }

        #navbar #profile-icon {
            display: grid;
        }
}

#sidebar search input,#navbar search input {
        box-sizing: border-box;
        padding: 12px 24px 12px 37px;
        font-size: 1rem;
        background: url("https://assets.insiderpie.de/icons/search-606060.svg") no-repeat 11px 11px;
    }

#sidebar search input::-moz-placeholder {
        color: var(--secondary-text-color);
    }

#sidebar search input::placeholder {
        color: var(--secondary-text-color);
    }

#navbar search input::-moz-placeholder {
        color: var(--secondary-text-color);
    }

#navbar search input::placeholder {
        color: var(--secondary-text-color);
    }

#search-results {
    width: 100%;
    position: fixed;
    top: 68px;
    bottom: auto;
    z-index: 3;
    max-height: calc(100vh - var(--navbar-height) - 68px);
    overflow-y: scroll;
    margin-top: 0;
    padding: 0;
    background-color: white;
    box-shadow: 0 16px 16px 0 var(--secondary-text-color);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#search-results li {
        margin: 8px;
    }

#search-results .no-results {
        height: 64px;
    }

#search-results .search-result {
        display: grid;
        grid-template-areas:
            "logo title"
            "logo subtitle";
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        border-radius: 5px;
    }

#search-results .search-result > .logo-container {
            grid-area: logo;
        }

#search-results .search-result > b {
            grid-area: title;
        }

#search-results .search-result > span {
            grid-area: subtitle;
        }

#search-results .search-result:focus {
        background-color: var(--hover-background);
    }

#search-results .logo {
        filter: grayscale() brightness(0) invert(1);
        padding-right: 6px;
        padding-top: 3px;
    }

#search-results .company-logo {
        margin: auto;
        max-width: 48px;
        max-height: 48px;
    }

#search-results .congress-member-image {
        margin: auto;
        max-width: 48px;
        max-height: 64px;
        border-radius: 16px;
    }

#search-results .search-result {
        padding: 16px;
        transition: background-color 0.2s ease-in-out;
    }

#search-results .search-result:hover {
        background-color: var(--hover-background);
    }

#search-results .search-result .logo-container {
        width: 48px;
        height: 48px;
    }

#search-results .search-result > span {
        color: var(--secondary-text-color);
    }

#search-results .logo-container {
        width: 64px;
    }

#search-results a {
        -webkit-text-decoration: none;
        text-decoration: none;
        color: black;
    }

#search-results b {
        font-weight: normal;
    }

@media screen and (min-width: 1200px) {
    #search-results {
        width: calc(100% - var(--sidebar-width));
        margin-left: var(--sidebar-width);
        margin-right: 0;
    }
}

#floating-action-button {
    --width: min(56px, 17vw);
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: var(--primary-background);
    z-index: 2;
    border: none;
    box-shadow: 0 0 12px 2px rgba(0,0,0,0.53333);
    border-radius: min(56px, 17vw);
    border-radius: var(--width);
    height: min(56px, 17vw);
    height: var(--width);
    width: min(56px, 17vw);
    width: var(--width);
    cursor: pointer;
}

#floating-action-button img {
        filter: invert(1);
    }

#bottom-nav-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    z-index: 2;
    background-color: white;
    border-top: var(--border);
    height: calc(var(--bottom-nav-height) - var(--border-width));
    padding-bottom: 16px;
}

#bottom-nav-bar button {
        background-color: white;
        color: black;
        font-size: 0.75rem;
    }

#bottom-nav-bar button img {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 12px;
            display: block;
        }

@media screen and (max-width: 1199px) {
    #floating-action-button {
        display: block;
    }
    #bottom-nav-bar {
        display: grid;
        display: block grid;
    }
}

.advanced-badge {
    display: block;
    width: -moz-max-content;
    width: max-content;
    margin: 0 0 12px 0;
    padding: 4px 12px;
    border-radius: 4px;
    color: white;
    background-color: #086375;
    font-weight: normal;
    font-weight: initial;
    font-size: 0.875rem;
}

#sidebar {
    position: fixed;
    top: var(--navbar-height);
    width: 100%;
    height: calc(100vh - var(--navbar-height));
    overflow-y: scroll;
    transform: translateX(100vw);
    transition: transform 0.2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 2;
    background-color: white;
}

#sidebar > menu {
        height: -moz-max-content;
        height: max-content;
    }

#sidebar:focus-within:not(.closed),#sidebar.open {
        transform: translateX(0);
    }

#sidebar.open > menu {
        overflow-y: visible;
    }

#sidebar menu {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-left: 0;
        height: -moz-max-content;
        height: max-content;
        margin-top: 24px;
        margin-bottom: 24px;
        position: relative;
        z-index: 2;
        background-color: white;
    }

#sidebar menu li {
            list-style: none;
            height: auto;
            padding: 0;
        }

#sidebar menu img {
            transition: filter 0.2s ease-in-out;
        }

#sidebar menu a[aria-current="true"] {
            color: white;
            background-color: var(--primary-background);
        }

#sidebar menu a[aria-current="true"] img {
            filter: invert(1);
        }

#sidebar menu a[aria-current="true"]:hover {
            background-color: var(--primary-hover-background);
        }

#sidebar menu summary,#sidebar menu a {
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        }

#sidebar menu summary:hover,#sidebar menu a:hover {
                background-color: var(--hover-background);
            }

#sidebar menu summary:hover,#sidebar menu a:hover {
            background-color: var(--hover-background);
        }

#sidebar menu a {
            display: block;
            padding: 12px 24px;
            margin: 0 8px;
            border-radius: 5px;
            -webkit-text-decoration: none;
            text-decoration: none;
            color: inherit;
        }

#sidebar menu summary {
            padding: 12px 24px;
            margin: 8px;
            border-radius: 5px;
            font-weight: 500;
        }

#sidebar menu search input {
            margin: 0 8px;
            width: calc(100% - 16px);
            border: var(--border);
            border-radius: 6px;
        }

#sidebar menu img {
            vertical-align: bottom;
            height: 20px;
            margin-right: 8px;
            color: inherit;
        }

#sidebar menu details summary::marker {
            content: "";
        }

#sidebar menu details summary::-webkit-details-marker {
            display: none;
        }

#sidebar menu details summary::after {
            float: right;
            content: url("https://assets.insiderpie.de/icons/down-arrow.svg");
            transform: rotate(90deg);
            transition: transform 0.2s ease-in-out;
        }

#sidebar menu details[open] summary::after {
            transform: rotate(0deg);
        }

@media screen and (max-width: 1199px) {
        #sidebar summary {
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 12px;
        }

        #sidebar .advanced-badge {
            order: 2;
            margin: 0;
        }

        #sidebar summary::after {
            order: 3;
            justify-self: end;
            text-align: right;
            margin-left: auto;
        }
}

@media screen and (min-width: 1200px) {
    main {
        margin-left: var(--sidebar-width);
    }

    #sidebar {
        width: var(--sidebar-width);
        transform: translateX(0);
        transition: none;
        z-index: 2;
        border-right: 1px solid var(--border-color);
    }

        #sidebar menu {
            margin-top: 0;
        }

        #sidebar search input {
            display: none;
        }
}

.tab-bar {
    background-color: white;
    padding: 0;
    overflow-x: auto;
    width: 100%;
}

.tab-bar ul {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: nowrap;
        width: 100%;
        margin: 0;
        padding: 0;
    }

.tab-bar li {
        list-style: none;
        flex: 1 0 auto;
    }

.tab-bar a {
        display: flex;
        display: block flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: smaller;
        color: black;
        -webkit-text-decoration: none;
        text-decoration: none;
        padding: 12px 16px 8px 16px;
        transition: background-color 0.2s ease-in-out;
        text-wrap-mode: nowrap;
    }

.tab-bar a:hover {
        background-color: var(--hover-background);
    }

.tab-bar a[aria-current="true"] {
        border-bottom: 2px solid black;
    }

.tab-bar img {
        vertical-align: bottom;
    }

.tab-bar li:has(.share-button) {
        display: none;
        flex: 1 1 0;
        justify-content: end;
        align-items: center;
    }

.tab-bar .share-button {
        height: -moz-max-content;
        height: max-content;
        padding: 10px 18px;
        border-radius: 4px;
        font-size: 87.5%;
        cursor: pointer;
        color: white;
        font-weight: 400;
        background-color: var(--primary-background);
        transition: background-color 0.2s ease-in-out;
        border: none;
    }

.tab-bar .share-button:hover {
            background-color: var(--primary-hover-background);
        }

.tab-bar .share-button img {
            width: 14px;
            height: 14px;
            filter: invert(1);
            vertical-align: text-top;
        }

@media screen and (min-width: 1200px) {
    .tab-bar li:has(.share-button) {
        display: flex;
    }
}

.value-investor {
    color: var(--value-color);
    background-color: var(--value-background);
}

.growth-investor {
    color: var(--growth-color);
    background-color: var(--growth-background);
}

.value-investor,
.growth-investor {
    display: block;
    padding: 4px 10px;
    margin-bottom: 8px;
    width: -moz-max-content;
    width: max-content;
    border-radius: 5px;
    height: calc(1lh + 1px);
}

.value-investor svg,.growth-investor svg {
        vertical-align: text-bottom;
        height: 1lh;
    }

.investor-card {
    border: var(--border);
    border-radius: 10px;
    padding: 16px;
    background-color: white;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: black;
}

.investor-card:visited {
        color: black;
    }

.investor-card {

    transition: background-color 0.2s ease-in-out;
}

.investor-card:hover {
        background-color: var(--hover-background);
    }

.investor-card {

    display: grid;

    grid-template-areas: "image favorite"
    "style style"
    "name name"
    "company company"
    "details details"
    ;
    grid-template-columns: 1fr 0px;
}

.investor-card > :first-child {
        grid-area: image;
        margin-bottom: 20px;
        border-radius: 500px;
        width: 114px;
        height: 114px;
        -o-object-fit: contain;
           object-fit: contain;

        width: 100%;
        height: auto;
        height: initial;
        border-radius: 8px;
    }

.investor-card > :nth-child(2) {
        grid-area: style;
        margin-right: auto;
    }

.investor-card > :nth-child(3) {
        grid-area: favorite;
        background-color: rgba(23,42,58,0.30196);
        transform: translateX(-50px) translateY(12px);
    }

.investor-card > :nth-child(4) {
        grid-area: name;
    }

.investor-card > :nth-child(4) > :nth-child(2) {
            margin-left: .5em;
        }

.investor-card > :nth-child(5) {
        grid-area: company;
        color: var(--secondary-text-color);
    }

.investor-card > :nth-child(6) {
        grid-area: details;
        color: var(--secondary-text-color);
        margin-top: 16px;
    }

.investor-card > :nth-child(6) img {
            filter: opacity(0.6);
            vertical-align: bottom;
        }

.investor-card > :nth-child(6) img:not(:first-child) {
            margin-left: 24px;
        }

@media screen and (min-width: 592px) {
    .investor-card {
        padding: 24px;

        grid-template-areas:
            "image style favorite"
            "image name name"
            "image company company"
            "image details details"
        ;
        grid-template-columns: 134px 1fr max-content;
    }

        .investor-card > :first-child {
            border-radius: 500px;
            width: 114px;
            height: 114px;
            margin-bottom: 0;
            background-color: #cad6d5;
        }

        .investor-card > :nth-child(2) {
            margin-bottom: 0;
        }

        .investor-card > :nth-child(3) {
            transform: none;
            background-color: transparent;
            height: 36px;
            width: 36px;
        }

        .investor-card > :nth-child(6) {
            margin-top: 10px;
        }
}

.investors-list-header {
    padding: 0 var(--layout-grid-gap);
}

.investors-list-header p {
        font-size: 0.875rem;
        color: var(--secondary-text-color);
        font-weight: 400;
    }

@media screen and (min-width: 1200px) {
        .investors-list-header p {
            font-size: 1rem;
        }
}

.investor-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--layout-grid-gap);
    gap: var(--layout-grid-gap);
    padding: 0 var(--layout-grid-gap);
    margin: 0;
}

.investor-list > li {
        list-style: none;
    }

@media screen and (min-width: 960px) {
    .investor-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1200px) {
    .investor-list {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 1400px) {
    .investor-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1800px) {
    .investor-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.investor-page {
    display: grid;
    grid-template-areas:
        "glance"
        "quote"
        "biography"
    ;

    grid-gap: 8px;

    gap: 8px;
    margin: 16px;
}

.investor-page > .investor-glance {
        grid-area: glance;
        margin-bottom: auto;
    }

.investor-page > blockquote {
        grid-area: quote;
    }

.investor-page > .investor-biography {
        grid-area: biography;
    }

.investor-page > .investor-glance,.investor-page > blockquote,.investor-page > .biography > section {
        border-radius: 10px;
        background-color: white;
        padding: 16px;
    }

.investor-page > .biography > section {
        margin-bottom: 16px;
    }

.investor-page > .biography > section h2:first-child {
            margin-top: 0;
        }

.investor-page > .biography > section dl {
            display: grid;
            grid-template-columns: 1fr;
        }

.investor-page > .biography > section dl > div {
                margin-bottom: 16px;
            }

.investor-page > .biography > section dl dt {
                display: inline;
            }

.investor-page > .biography > section dl dd {
                display: inline;
                margin-left: 0;
            }

.investor-page blockquote {
        margin: 0;
        font-family: "Noto Serif", serif;
        font-weight: 600;
        font-size: 200%;
        color: var(--primary-background);
        quotes: '\00AB' '\00BB' '\201E' '\201C';
    }

.investor-page blockquote::before {
        content: open-quote;
        font-size: 125%;
        margin-right: .5ch;
        line-height: 0%;
    }

.investor-page blockquote::after {
        content: close-quote;
        font-size: 125%;
        margin-left: .5ch;
        line-height: 0%;
    }

.investor-glance > img:first-child {
        max-width: min(calc(100vw - 72px), 456px);
        border-radius: 10px;
        margin-bottom: 24px;
    }

.investor-glance span:has(h1) {
        display: block;
        font-weight: 600;
        font-size: 178%;
    }

.investor-glance span h1 {
        display: inline;
    }

.investor-glance span:has(h1) + span {
        color: var(--secondary-text-color);
    }

.investor-glance dl {
        margin-bottom: 0;
    }

.investor-glance dl > div {
            margin-bottom: 8px;
        }

.investor-glance dl > div:nth-last-child(3) {
            margin-bottom: 24px;
        }

.investor-glance dl > div:last-child {
            margin-bottom: 0;
        }

.investor-glance dl dt {
            display: inline;
        }

.investor-glance dl dt img {
                margin-right: 1ch;
                vertical-align: baseline;
            }

.investor-glance dl dd {
            display: inline;
            margin-left: 0;
        }

@media screen and (min-width: 1200px) {
    .investor-page {
        grid-template-areas:
            "glance quote"
            "glance biography"
        ;
        grid-template-columns: min(calc(100vw - 40px), 488px) 2fr;

        gap: 16px;
        margin: 16px 20px;
    }

        .investor-page > .biography > section {
            padding: 24px;
        }
        .investor-glance dl {
            margin-bottom: 0;
        }

            .investor-glance dl > div {
                margin-bottom: 16px;
            }

            .investor-glance dl > div:nth-last-child(3) {
                margin-bottom: 40px;
            }
}

.investor-portfolio {
    display: grid;
    grid-template-areas:
        "chart"
        "table"
    ;
    grid-gap: 16px;
    gap: 16px;
    margin: 20px;
}

.investor-portfolio .portfolio-pie-chart {
        grid-area: chart;
    }

.investor-portfolio .portfolio-table {
        grid-area: table;
    }

.investor-portfolio > section {
        background-color: white;
        border-radius: 10px;
        margin-bottom: auto;
    }

@media screen and (min-width: 1400px) {
    .investor-portfolio {
        grid-template-areas:
            "chart table"
        ;
        grid-template-columns: minmax(max-content, 440px) 1fr;
        gap: 24px;
        margin: 40px;
    }
}

.portfolio-pie-chart .chart-and-legend-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: normal;
        padding: 24px;
    }

.portfolio-pie-chart .chart-container {
        display: flex;
        flex-direction: row;
        justify-content: center;

        height: 100%;
        width: 100%;
    }

.portfolio-pie-chart .chart-as-of {
        color: var(--secondary-text-color);
        width: 100%;
        font-size: 87.5%;
    }

.portfolio-pie-chart .chart-value {
        position: relative;
        top: calc(-160px - 0.5lh);
        font-size: 112.5%;
    }

.portfolio-pie-chart .chart-value-delta {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

.portfolio-pie-chart .chart-value-delta div.positive,.portfolio-pie-chart .chart-value-delta div.negative {
            margin-left: 0.5rem;
        }

.portfolio-pie-chart .chart-legend {
        width: 100%;
    }

.portfolio-pie-chart .chart-legend ol {
            padding-left: 0;
        }

.portfolio-pie-chart .chart-legend li {
            list-style: none;
            padding: 8px 0;
        }

.portfolio-pie-chart .chart-legend a {
            -webkit-text-decoration: none;
            text-decoration: none;
            color: black;
        }

.portfolio-pie-chart .chart-legend li:last-child {
            display: flex;
            gap: 16px;
        }

.portfolio-pie-chart .chart-legend a {
            display: flex;
            gap: 16px;
        }

.portfolio-pie-chart .chart-legend a:not(.does-not-exist) > :first-child {
                height: 1lh;
                width: 1lh;
                border-radius: 5px;
            }

.portfolio-pie-chart .chart-legend li:last-child > :first-child {
                height: 1lh;
                width: 1lh;
                border-radius: 5px;
            }

.portfolio-pie-chart .chart-legend a:not(.does-not-exist) > :nth-child(2) {
                flex: 1 0 0;
            }

.portfolio-pie-chart .chart-legend li:last-child > :nth-child(2) {
                flex: 1 0 0;
            }

.portfolio-pie-chart .chart-legend a:not(.does-not-exist) > :last-child {
                flex: 0 0 7ch;
            }

.portfolio-pie-chart .chart-legend li:last-child > :last-child {
                flex: 0 0 7ch;
            }

.portfolio-pie-chart .chart-legend li:first-child > a > :first-child {
            background-color: #172A3A;
        }

.portfolio-pie-chart .chart-legend li:nth-child(2) > a > :first-child {
            background-color: #2A6665;
        }

.portfolio-pie-chart .chart-legend li:nth-child(3) > a > :first-child {
            background-color: #3AAFA9;
        }

.portfolio-pie-chart .chart-legend li:nth-child(4) > a > :first-child {
            background-color: #529D96;
        }

.portfolio-pie-chart .chart-legend li:last-child > :first-child {
            background-color: #F0F0F0;
        }

.portfolio-table meter + *,.purchases-table meter + * {
        margin-left: 1ch;
    }

.portfolio-table > table,.purchases-table > table,.portfolio-table > .table-navigation,.purchases-table > .table-navigation {
        display: none;
    }

.portfolio-table td:nth-child(2) a {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 16px;
    }

.purchases-table td:nth-child(2) a {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 16px;
    }

.portfolio-table td:nth-child(2) a img {
            height: 32px;
            width: 32px;
        }

.purchases-table td:nth-child(2) a img {
            height: 32px;
            width: 32px;
        }

.portfolio-table > ol,.purchases-table > ol {
        margin: 0;
        padding: 0;
    }

.portfolio-table > ol li,.purchases-table > ol li {
            padding: 12px;
            transition: background-color 0.2s ease-in-out;
            list-style-position: inside;
        }

.portfolio-table > ol li:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

.purchases-table > ol li:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

.portfolio-table > ol li:last-child {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

.purchases-table > ol li:last-child {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

.portfolio-table > ol li::marker:hover {
            background-color: var(--hover-background);
        }

.purchases-table > ol li::marker:hover {
            background-color: var(--hover-background);
        }

.portfolio-table > ol li:hover,.purchases-table > ol li:hover {
            background-color: var(--hover-background);
        }

.portfolio-table > ol a,.purchases-table > ol a {
            -webkit-text-decoration: none;
            text-decoration: none;
            color: black;
        }

.portfolio-table > ol img,.purchases-table > ol img {
            height: 24px;
            width: 24px;
            margin: 0 8px;
            vertical-align: bottom;
        }

.portfolio-table > ol dl,.purchases-table > ol dl {
            -moz-columns: 2;
                 columns: 2;
            margin-left: 2.2ch;
            margin-top: 16px;
            margin-bottom: 16px;
        }

.portfolio-table > ol dt,.purchases-table > ol dt {
            color: var(--secondary-text-color);
            font-size: 75%;
            line-height: 134%;
        }

.portfolio-table > ol dd,.purchases-table > ol dd {
            margin: 0;
        }

@media screen and (min-width: 839px) {

    .portfolio-table,
    .purchases-table {
        padding: 24px;
    }

        .portfolio-table > .table-navigation,.purchases-table > .table-navigation {
            display: flex;
            display: block flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            margin-top: 32px;
            color: var(--secondary-text-color);
        }

            .portfolio-table > .table-navigation .navigation-buttons,.purchases-table > .table-navigation .navigation-buttons {
                display: flex;
                gap: 8px;
                align-items: center;
                justify-content: center;
            }

            .portfolio-table > .table-navigation select,.purchases-table > .table-navigation select,.portfolio-table > .table-navigation button,.purchases-table > .table-navigation button {
                padding: 6px 10px;
                border-radius: 4px;
                border: var(--border);
                background-color: white;
            }

            .portfolio-table > .table-navigation button.prev,.purchases-table > .table-navigation button.prev,.portfolio-table > .table-navigation button.next,.purchases-table > .table-navigation button.next {
                border: none;
            }

            .portfolio-table > .table-navigation button,.purchases-table > .table-navigation button {
                transition: background-color 0.2s ease-in-out;
            }

                .portfolio-table > .table-navigation button:disabled {
                    filter: opacity(50%);
                }

                .purchases-table > .table-navigation button:disabled {
                    filter: opacity(50%);
                }

                .portfolio-table > .table-navigation button:hover:not(:disabled) {
                    background-color: var(--hover-background);
                }

                .purchases-table > .table-navigation button:hover:not(:disabled) {
                    background-color: var(--hover-background);
                }

                .portfolio-table > .table-navigation button img,.purchases-table > .table-navigation button img {
                    vertical-align: bottom;
                }

        .portfolio-table > table,.purchases-table > table {
            display: table;
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

            .portfolio-table > table thead th,.purchases-table > table thead th {
                background-color: #F0F0F0;
                height: 32px;
            }

            .portfolio-table > table thead th:nth-child(n + 2) {
                text-align: left;
            }

            .purchases-table > table thead th:nth-child(n + 2) {
                text-align: left;
            }

            .portfolio-table > table tbody tr:first-child th:first-child {
                border-top-left-radius: 10px;
            }

            .purchases-table > table tbody tr:first-child th:first-child {
                border-top-left-radius: 10px;
            }

            .portfolio-table > table tbody tr:first-child td:last-child {
                border-top-right-radius: 10px;
            }

            .purchases-table > table tbody tr:first-child td:last-child {
                border-top-right-radius: 10px;
            }

            .portfolio-table > table tbody tr,.purchases-table > table tbody tr {
                border-bottom: var(--border);
                transition: background-color 0.2s ease-in-out;
            }

            .portfolio-table > table tbody tr:hover,.purchases-table > table tbody tr:hover {
                border-radius: 10px;
                background-color: var(--hover-background);
            }

            .portfolio-table > table tbody th,.purchases-table > table tbody th,.portfolio-table > table tbody td,.purchases-table > table tbody td {
                height: 52px;
            }

            .portfolio-table > table thead th:first-child {
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }

            .purchases-table > table thead th:first-child {
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
            }

            .portfolio-table > table thead th:last-child {
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            .purchases-table > table thead th:last-child {
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            .portfolio-table > table th:first-child {
                width: 64px;
            }

            .purchases-table > table th:first-child {
                width: 64px;
            }

                .portfolio-table > table th:first-child a {
                    justify-content: center;
                }

                .purchases-table > table th:first-child a {
                    justify-content: center;
                }

            .portfolio-table > table td:nth-child(3) {
                width: 176px;
            }

            .purchases-table > table td:nth-child(3) {
                width: 176px;
            }

            .portfolio-table > table td:nth-child(4) {
                width: 236px;
            }

            .purchases-table > table td:nth-child(4) {
                width: 236px;
            }

            .portfolio-table > table th,.purchases-table > table th,.portfolio-table > table td,.purchases-table > table td {
                padding: 8px;
            }

            .portfolio-table > table a,.purchases-table > table a {
                color: black;
                -webkit-text-decoration: none;
                text-decoration: none;
                height: 52px;
                display: flex;
                display: block flex;
                align-items: center;
            }

        .portfolio-table > ol,.purchases-table > ol {
            display: none;
        }
}

.investor-purchases {
    margin: 20px;
}

.investor-purchases > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.investor-purchases > header p {
            margin: 0;
        }

.investor-purchases > section {
        background-color: white;
        border-radius: 10px;
    }

.investor-purchases > section:first-child {
        margin-top: 64px;
    }

.investor-purchases form {
        margin-bottom: 16px;
    }

.investor-purchases .timespan {
        font-size: 0.875rem;
        color: var(--secondary-text-color);
        font-weight: 400;
    }

.investor-purchases input[type="checkbox"] {
        display: none;
    }

.investor-purchases label:not(:first-child) {
        margin-left: 8px;
    }

.investor-purchases label:has(input[type="checkbox"]) {
        padding: 6px 10px;
        border-radius: 4px;
        border: var(--border);
        background-color: white;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
    }

.investor-purchases label:has(input[type="checkbox"]):hover {
        background-color: var(--hover-background);
    }

.investor-purchases form:has(input[type="checkbox"]:checked):has(input[type="checkbox"]:not(:checked)) label:has(input[type="checkbox"]:checked) {
            color: white;
            background-color: var(--primary-background);
        }

.investor-purchases form:has(input[type="checkbox"]:checked):has(input[type="checkbox"]:not(:checked)) label:has(input[type="checkbox"]:checked):hover {
                background-color: var(--primary-hover-background);
            }

.investor-purchases form:has(input[type="checkbox"]:checked):has(input[type="checkbox"]:not(:checked)) label:has(input[type="checkbox"]:not(:checked)) {
            -webkit-text-decoration: line-through;
            text-decoration: line-through;
        }

@media screen and (min-width: 1200px) {
    .investor-purchases {
        margin: 20px 40px 40px 40px;
    }
}

.investor-news {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.investor-news li {
        display: block;
        background-color: white;
        padding: 16px 16px 24px 16px;
        border: var(--border);
        border-radius: 10px;
        transition: background-color 0.2s ease-in-out;
    }

.investor-news li:hover {
            background-color: var(--hover-background);
        }

.investor-news li a {
            color: black;
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.investor-news li header {
            color: var(--secondary-text-color);
            font-weight: 400;
            font-size: 0.875rem;
        }

.investor-news li header img {
                vertical-align: middle;
                width: 32px;
                height: 32px;
                border-radius: 32px;
            }

.investor-news li header span {
                margin-left: 16px;
            }

.investor-news li header img + span {
                margin-left: 8px;
            }

.investor-news li h2 {
            font-size: 1.125rem;
        }

@media screen and (min-width: 800px) {
    .investor-news {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media screen and (min-width: 1600px) {
    .investor-news {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.investor-news-page {
    margin: 16px;
}

@media screen and (min-width: 1200px) {
    .investor-news-page {
        margin: 16px 20px;
    }
}

.news-source-note {
    margin-top: 24px;
    font-size: 0.875rem;
    color: var(--secondary-text-color);
    text-align: center;
}

.no-news {
    display: block;
    background-color: white;
    border: var(--border);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    color: var(--secondary-text-color);
    margin-top: 24px;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.no-news:hover {
    background-color: var(--hover-background);
}

.no-news h2 {
    font-size: 1rem;
    font-weight: 600;
    color: black;
    margin-bottom: 12px;
}

.no-news p {
    font-size: 0.875rem;
    margin: 0;
}

.country-select {
    height: 38px;
    width: 100%;
    padding: 8px 16px;
    border: var(--border);
    border-radius: 6px;
    color: var(--secondary-text-color);
    background-color: white;
    font-size: 87.5%;
}

.country-select .country-flag {
        margin-right: 8px;
    }

@media screen and (min-width: 1200px) {
    .country-select {
        width: 32ch;
        margin-top: 0;
        margin-bottom: 0;
    }
}

.companies-list-page {
    margin: 16px;
}

.companies-list-page > header h1 {
            margin-top: 0;
        }

.companies-list-page > header p:not(details p) {
            color: var(--secondary-text-color);
            font-size: 87.5%;
        }

@media screen and (min-width: 1200px) {
    .companies-list-page {
        margin: 16px 20px;
    }
}

.company-list {
    margin: 16px 0;
    padding: 0;
}

.company-list > li {
        list-style: none;
        border: var(--border);
        border-radius: 8px;
        margin-bottom: 8px;
        background-color: white;
        transition: background-color 0.2s ease-in-out;
    }

.company-list > li:hover {
        background-color: var(--hover-background);
    }

.company-list > li:hover .sector {
            background-color: #E1E1E1;
        }

.company-list .company-card {
        display: grid;
        grid-template:
            "logo   sector  favorite" 1fr
            "logo   name    favorite" max-content
            "logo   ticker  favorite" max-content
            "logo   badge   favorite" 1fr
            / minmax(100px, max-content) 1fr max-content
        ;
        grid-template-columns: minmax(100px, max-content) 1fr max-content;
        grid-template-rows: 1fr max-content max-content 1fr;
        padding: 16px;
    }

.company-list .rank {
        display: none;
        align-items: center;
        justify-content: center;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 16px;
        height: 32px;
        width: 32px;
        font-size: 112.5%;
        transform: translate(-1px, -1px);
        color: var(--secondary-text-color);
    }

.company-list .sector {
        grid-area: sector;
        font-size: 75%;
        background-color: #F0F0F0;
        color: var(--secondary-text-color);
        margin: auto auto auto 0;
        padding: 4px 10px;
        border-radius: 5px;
        transition: background-color 0.2s ease-in-out;
    }

.company-list .name {
        grid-area: name;
    }

.company-list .ticker {
        grid-area: ticker;
        color: var(--secondary-text-color);
        font-size: 87.5%;
    }

.company-list .badge {
        grid-area: badge;
        margin-top: 16px;
    }

.company-list .badge svg {
            vertical-align: bottom;
            margin-right: 8px;
        }

.company-list .favorite-button {
        grid-area: favorite;
        margin-left: auto;
        height: 30px;
        width: 30px;
    }

.company-list .logo {
        grid-area: logo;
        width: 45px;
        max-height: 45px;
        padding: 5px;
        margin: auto 10px;
    }

.company-list a {
        color: black;
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.company-list:not(article .company-list) {
    margin: 16px 20px;
}

.top-companies-page .country-select {
        margin-top: 24px;
        margin-bottom: 8px;
    }

.top-companies-page .company-list .rank {
            display: flex;
            display: block flex;
        }

.top-companies-page .company-list .company-card {
            margin-top: -32px;
        }

.top-companies-page .company-list li:nth-child(-n + 10) {
            border-color: #086375;
        }

.top-companies-page .company-list li:nth-child(-n + 10) .rank {
                background-color: #086375;
                color: white;
            }

.top-companies-page .company-list li:nth-child(3) {
            border-color: #D69D65;
        }

.top-companies-page .company-list li:nth-child(3) .rank {
                background-color: #D69D65;
                color: black;
            }

.top-companies-page .company-list li:nth-child(2) {
            border-color: #C0C0C0;
        }

.top-companies-page .company-list li:nth-child(2) .rank {
                background-color: #C0C0C0;
                color: black;
            }

.top-companies-page .company-list li:first-child {
            border-color: #FFD700;
        }

.top-companies-page .company-list li:first-child .rank {
                background-color: #FFD700;
                color: black;
            }

@media screen and (min-width: 960px) {
    .company-list {
        display: grid;
        grid-gap: 8px;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
    }

        .company-list > li {
            display: block;
            margin-bottom: 0;
        }
}

@media screen and (min-width: 1200px) {
        .top-companies-page > header {
            display: flex;
            justify-content: space-between;
            align-items: end;
        }
        .companies-list-page .country-select {
            width: 200px;
            border-radius: 4px;
            margin-left: auto;
        }

    .company-list {
        gap: 13px;
    }

        .company-list > li {
            display: block;
            margin-bottom: 0;
        }

        .company-list .company-card {
            padding: 16px;
        }

        .company-list .rank {
            height: 48px;
            width: 48px;
        }

        .company-list .favorite-button {
            height: 36px;
            width: 36px;
        }
        .company-list.top-scorer .company-card {
            margin-top: -48px;
        }
}

@media screen and (min-width: 1600px) {
    .company-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.company-score h3 {
        font-weight: normal;
        text-align: center;
        font-size: 16px;
    }

.company-score h3 details {
            text-align: left;
        }

.company-score h3 img {
            vertical-align: middle;
            margin-right: 8px;
        }

.company-score h3 .info-button {
            margin-left: 8px;
        }

.company-score .score-bar-chart {
        position: relative;
    }

.company-score .score-bar-chart progress {
          width: 100%;
          height: 48px;
          border-radius: 8px;
        }

.company-score .score-bar-chart progress::-webkit-progress-bar {
          background-color: #f3f3f3;
          border-radius: 8px;
        }

.company-score .score-bar-chart progress::-webkit-progress-value {
          background-color: #9A9595;
          border-radius: 8px;
        }

.company-score .score-bar-chart progress.positive::-webkit-progress-value {
          background-color: var(--positive);
        }

.company-score .score-bar-chart progress.negative::-webkit-progress-value {
          background-color: var(--negative);
        }

.company-score .score-bar-chart progress::-moz-progress-bar {
          background-color: #9A9595;
          border-radius: 8px;
        }

.company-score .score-bar-chart progress::-moz-progress-value {
          background-color: #f3f3f3;
          border-radius: 8px;
        }

.company-score .score-bar-chart progress.positive::-moz-progress-bar {
          background-color: var(--positive);
        }

.company-score .score-bar-chart progress.negative::-moz-progress-bar {
          background-color: var(--negative);
        }

.company-score .score-bar-chart .subtitle {
            font-size: 75%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin-left: auto;
            margin-right: auto;
            color: black;
            vertical-align: middle;
            line-height: 48px;
        }

.company-score .score-bar-chart:has(progress.positive) .subtitle {
            color: white;
        }

.company-score .score-headline {
        display: block;
        text-align: center;
    }

.company-score .score-headline h2 {
            display: inline;
            font-size: 1.125rem;
            font-weight: 500;
        }

.company-score .score-headline .info-button img {
                vertical-align: baseline;
            }

.company-score .score-headline details :not(summary) {
            text-align: left;
            text-align: initial;
        }

.company-score .container {
        margin: 34px 26px 0 26px;
        position: relative;
    }

.company-score .container div:has(canvas) {
            position: relative;
            width: 100%;
        }

.company-score .container img {
            position: absolute;
            width: 40%;
            right: 50%;
            top: 90%;
            transform: rotate(0);
            transition: transform 1s ease-out;
            transform-origin: right;
        }

.company-score .subtitle {
        position: relative;
        display: flex;
        display: block flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
    }

.company-score .subtitle .score {
            font-size: 200%;
            font-weight: 600;
        }

.company-score .subtitle .score-out-of {
            color: var(--secondary-text-color);
        }

.company-score a[href$="/history"] {
        display: block;
        text-align: center;
        background-color: var(--primary-background);
        border-radius: 8px;
        transition: background-color 0.2s ease-in-out;
        margin: 32px 0 0 0;
    }

.company-score a[href$="/history"]:hover {
            background-color: var(--primary-hover-background);
        }

.company-score a[href$="/history"] button {
            cursor: pointer;
            font-weight: 400;
            font-size: 1rem;
            color: white;
            background-color: transparent;
            border: none;
        }

.company-heading {
    padding: 24px;
    display: grid;
    grid-template:
        "logo chips" auto
        "logo name" auto
        "fnd  fnd" 1fr
        "src  src" auto
        / max-content 1fr;
    grid-row-gap: 8px;
    row-gap: 8px;
    grid-column-gap: 24px;
    -moz-column-gap: 24px;
         column-gap: 24px;
}

.company-heading a {
        color: black;
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.company-heading h1 {
        grid-area: name;
        font-weight: 600;
        font-size: 2rem;
        margin: 0;
    }

.company-heading .logo-container {
        grid-area: logo;
        background-color: #F0F0F0;
        height: 128px;
        width: 128px;
        border-radius: 8px;
        display: flex;
        display: block flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

.company-heading .logo-container img {
            width: 64px;
            max-height: 96px;
        }

.company-heading .logo-container .favorite-button {
            position: absolute;
            top: 0px;
            right: 0px;
            border-radius: 32px;
            transition: background-color 0.2s ease-in-out;
        }

.company-heading .logo-container .favorite-button:hover {
                background-color: rgba(23,42,58,0.30196);
            }

.company-heading .chips {
        grid-area: chips;
    }

.company-heading > dl {
        grid-area: fnd;
        margin-bottom: 0;
    }

.company-heading > dl > div {
            margin-bottom: 12px;
        }

.company-heading > dl > div.border:not(:last-child) {
            padding-bottom: calc(12px - var(--border-width));
            border-bottom: var(--border);
        }

.company-heading > dl dt {
            display: inline;
        }

.company-heading > dl dt img {
                vertical-align: bottom;
            }

.company-heading > dl dt::after {
            content: ": ";
        }

.company-heading > dl dd {
            display: inline;
            margin-left: 0;
        }

.company-heading > dl dd .info-button {
                margin-left: 1ch;
            }

.company-heading > small:last-child {
        grid-area: src;
    }

.favorite-company-dialog form label {
            margin-bottom: 16px;
        }

.favorite-company-dialog form button:first-of-type img {
                filter: invert(1);
                vertical-align: bottom;
                margin-right: 1ch;
            }

/* button:last-of-type {
            background-color: white;
            border: var(--border);
            color: black;
        } */

.chips {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.chip {
    display: block;
    background-color: #F5F5F5;
    transition: background-color 0.2s ease-in-out;
    font-size: 75%;
    color: var(--secondary-text-color);
    height: 1.15lh;
    margin: 0;
    padding: 4px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.chip a {
        color: var(--secondary-text-color);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.range-select {
    background-color: #F0F0F0;
    border: var(--border);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    display: block flex;
    gap: 8px;
    width: -moz-max-content;
    width: max-content;
    justify-content: space-between;
}

.range-select input[type="radio"] {
        display: none;
    }

.range-select label {
        border: var(--border);
        border-radius: 4px;
        padding: 6px 10px;
        color: var(--secondary-text-color);
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }

.range-select label:hover,.range-select label:has(input[type="radio"]:checked) {
        color: black;
        background-color: white;
    }

.company-chart {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.company-chart > header {
        display: flex;
        display: block flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
    }

.company-chart > header > dl {
            display: flex;
            display: block flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 8px;
            margin-top: 0;
            font-size: 0.875rem;
            font-weight: 400;
        }

.company-chart > header > dl dt,.company-chart > header > dl dd {
                display: inline;
                margin-left: 0;
            }

.company-chart > header > dl dd {
                color: var(--secondary-text-color);
            }

.company-chart > header .range-select-container {
            max-width: 100%;
            overflow-x: auto;
        }

.company-chart > footer {
        text-align: right;
    }

.company-news {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.company-news li {
        display: block;
        background-color: white;
        padding: 16px 16px 24px 16px;
        border: var(--border);
        border-radius: 10px;
        transition: background-color 0.2s ease-in-out;
    }

.company-news li:hover {
            background-color: var(--hover-background);
        }

.company-news li a {
            color: black;
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.company-news li header {
            color: var(--secondary-text-color);
            font-weight: 400;
            font-size: 0.875rem;
        }

.company-news li header img {
                vertical-align: middle;
                width: 32px;
                height: 32px;
                border-radius: 32px;
            }

.company-news li header span {
                margin-left: 16px;
            }

.company-news li header img + span {
                margin-left: 8px;
            }

.company-news li h2 {
            font-size: 1.125rem;
        }

@media screen and (min-width: 800px) {
    .company-news {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media screen and (min-width: 1600px) {
    .company-news {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.company-rating-page {
    display: grid;
    grid-template:
        "heading" max-content
        "score" max-content
        "rating" max-content
        / 100%;
    grid-gap: 24px;
    gap: 24px;
    margin: 16px;
}

.company-rating-page > .company-rating > a,.company-rating-page > .company-score,.company-rating-page > .company-heading {
        border: var(--border);
        border-radius: 8px;
        margin-bottom: auto;
        background-color: white;
    }

.company-rating-page > .company-heading {
        grid-area: heading;
    }

.company-rating-page > .company-score {
        grid-area: score;
        padding: 16px;
    }

.company-rating-page > .company-rating {
        grid-area: rating;
    }

.company-rating-page > .company-rating > a {
            color: black;
            -webkit-text-decoration: none;
            text-decoration: none;
            display: block;
            padding: 24px;
            margin-bottom: 8px;
            transition: background-color 0.2s ease-in-out;
        }

.company-rating-page > .company-rating > a:hover {
                background-color: var(--hover-background);
            }

.company-rating-page > .company-rating > a h2 {
                margin-top: 0;
                font-size: 137.5%;
                font-weight: 500;
            }

.company-rating-page > .company-rating > a h2 img {
                    height: 24px;
                    width: 24px;
                    margin-right: 8px;
                    vertical-align: bottom;
                }

.company-rating-page > .company-rating .company-rating-group {
            display: flex;
            display: block flex;
            flex-direction: column;
            align-items: start;
        }

.company-rating-page > .company-rating hr {
            border: var(--border);
            transition: border-color 0.2s ease-in-out;
        }

.company-rating-page > .company-rating > a:hover hr {
            border-color: var(--border-color-hover);
        }

.company-rating-page:has(.company-notice) {
    grid-template:
        "notice" max-content
        "heading" max-content
        "score" max-content
        "rating" max-content

        / 100%;
}

.company-rating-page:has(.company-notice) > .company-notice {
        grid-area: notice;
        color: #F20000;
        background-color: white;
        border: var(--border);
        border-radius: 8px;
        padding: 16px;
    }

@media screen and (min-width: 768px) {
    .company-rating-page {
        grid-template:
            "heading score" max-content
            "rating rating" 1fr
            / minmax(min-content, 1fr) minmax(0, 480px);
    }
            .company-rating-page > .company-rating > a {
                margin-bottom: 16px;
            }
                    .company-rating-page > .company-rating > a h2 img {
                        margin-right: 12px;
                    }

            .company-rating-page > .company-rating .company-rating-group {
                flex-direction: row;
                align-items: center;
                gap: 16px;
            }

    .company-rating-page:has(.company-notice) {
        grid-template:
            "notice  notice" max-content
            "heading score" max-content
            "rating  rating" 1fr
            / minmax(min-content, 1fr) minmax(0, 480px);
    }
}

@media screen and (min-width: 1200px) {
    .company-rating-page {
        grid-template:
            "heading rating" max-content
            "score rating" 1fr
            / minmax(0, 400px) 1fr;
        border-radius: 10px;
        margin: 16px 20px;
    }

    .company-rating-page:has(.company-notice) {
        grid-template:
            "notice  notice" max-content
            "heading rating" max-content
            "score   rating" 1fr
            / minmax(0, 400px) 1fr;
    }
}

@media screen and (min-width: 1400px) {
    .company-rating-page {
        grid-template:
            "heading rating" max-content
            "score   rating" 1fr
            / minmax(0, 504px) 1fr;
    }

    .company-rating-page:has(.company-notice) {
        grid-template:
            "notice  notice" max-content
            "heading rating" max-content
            "score   rating" 1fr
            / minmax(0, 504px) 1fr;
    }
}

.company-chart-page {
    display: grid;
    grid-template:
        "heading" auto
        "chart" auto
        "pl-chart" auto
        / 100%;
    grid-gap: 24px;
    gap: 24px;
    margin: 16px;
}

.company-chart-page > section {
        border: var(--border);
        border-radius: 8px;
        margin-bottom: auto;
        background-color: white;
    }

.company-chart-page > .company-heading {
        grid-area: heading;
    }

.company-chart-page > .company-heading dt > img:first-child {
            margin-right: 12px;
            vertical-align: bottom;
        }

.company-chart-page > .company-chart {
        grid-area: chart;
        padding: 16px;
    }

@media screen and (min-width: 1200px) {
    .company-chart-page {
        grid-template:
            "heading chart" max-content
            "heading pl-chart " 1fr
            / 400px 1fr;
        border-radius: 10px;
        margin: 16px 20px;
    }

        .company-chart-page > .company-chart {
            padding: 24px;
        }

            .company-chart-page > .company-chart > header > dl {
                margin-left: 32px;
                gap: 32px;
                font-size: 1rem;
            }
}

@media screen and (min-width: 1400px) {
    .company-chart-page {
        grid-template:
            "heading chart" max-content
            "heading pl-chart " 1fr
            / 504px 1fr;
    }
}

.company-news-page {
    margin: 16px;
}

@media screen and (min-width: 1200px) {
    .company-news-page {
        margin: 16px 20px;
    }
}

.company-profile-page {
    display: grid;
    grid-template:
        "heading" max-content
        "profile" 1fr / 100%;
    grid-gap: 24px;
    gap: 24px;
    margin: 16px;
}

.company-profile-page > .company-heading {
        grid-area: heading;
    }

.company-profile-page > .company-heading dl a {
                -webkit-text-decoration: underline;
                text-decoration: underline;
            }

.company-profile-page > .company-profile {
        grid-area: profile;
    }

.company-profile-page > section {
        padding: 16px;
        border: var(--border);
        border-radius: 8px;
        background-color: white;
        margin-bottom: auto;
    }

@media screen and (min-width: 1200px) {
    .company-profile-page {
        grid-template:
            "heading profile" max-content
            / 400px 1fr;
        margin: 16px 20px;
    }

        .company-profile-page > section {
            border-radius: 10px;
        }
}

@media screen and (min-width: 1400px) {
    .company-profile-page {
        grid-template:
            "heading profile" max-content
            / 504px 1fr;
    }
}

#article-background {
    display: none;
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: var(--navbar-height);
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
    filter: opacity(0.75);
}

@media screen and (min-width: 1200px) {
    #article-background {
        display: block;
    }
}

main:has(#article-background) {
    z-index: 0;
}

main:has(#article-background)>article {
    position: relative;
    z-index: 1;
}

main:has(#article-background) > article > section {
        background-color: rgba(255,255,255,0.94118);
    }

.fear-and-greed-index {
    padding: 16px;
}

.fear-and-greed-index header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

.fear-and-greed-index header h2 {
            margin: 0;
            font-weight: 500;
        }

.fear-and-greed-index .subtitle {
        text-align: center;
        font-size: 2rem;
        font-weight: 600;
    }

.fear-and-greed-index .subtitle .score {
            margin-left: 8px;
        }

.fear-and-greed-index .subtitle .score-out-of {
            font-size: 1rem;
            color: var(--secondary-text-color);
            font-weight: 400;
        }

.fear-and-greed-index dl.fear-and-greed-historical {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-row-gap: 16px;
        row-gap: 16px;
    }

.fear-and-greed-index dl.fear-and-greed-historical dt {
            font-size: 0.875rem;
        }

.fear-and-greed-index dl.fear-and-greed-historical dd {
            padding: 4px 16px;
            border-radius: 5px;
            color: white;
            font-size: 0.75rem;
        }

@media screen and (min-width: 1200px) {
    .fear-and-greed-index {
        padding: 24px;
    }

        .fear-and-greed-index header {
            gap: 12px;
        }

            .fear-and-greed-index header h2 {
                font-size: 1.125rem;
            }
            .fear-and-greed-index dl.fear-and-greed-historical dt {
                font-size: 1rem;
            }

            .fear-and-greed-index dl.fear-and-greed-historical dd {
                font-size: 0.875rem;
            }

        .fear-and-greed-index > :not(footer) {
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }
}

.buffett-indicator {
    padding: 16px;
    display: grid;
    grid-template:
        "img    header" auto
        "img    chart" 1fr
        "range  range" auto
        "tchart tchart" auto
        "footer footer" auto
        / 108px 1fr;
    grid-column-gap: 8px;
    -moz-column-gap: 8px;
         column-gap: 8px;
}

.buffett-indicator > *:first-child {
        grid-area: img;
    }

.buffett-indicator > :first-child img {
            height: 108px;
            width: 108px;
            -o-object-fit: cover;
               object-fit: cover;
            border-radius: 5px;
        }

.buffett-indicator > header {
        grid-area: header;
        display: flex;
        align-items: top;
        justify-content: space-between;
        margin-bottom: 16px;
    }

.buffett-indicator > header h2 {
            display: inline;
            font-weight: 500;
            font-size: 1rem;
            margin: 0;
        }

.buffett-indicator > .range-select {
        grid-area: range;
    }

.buffett-indicator > .chart {
        grid-area: chart;
    }

.buffett-indicator > .time-series-chart {
        grid-area: tchart;
    }

.buffett-indicator > footer {
        grid-area: footer;
    }

.buffett-indicator .range-select {
        width: calc(100% - 10px);
        margin: 32px 0 24px 0;
    }

@media screen and (min-width: 1600px) {
    .buffett-indicator {
        padding: 16px;
        display: grid;
        grid-template:
            "img    header unused" auto
            "img    chart  range" 1fr
            "tchart tchart tchart" auto
            "footer footer footer" auto
            / 108px 250px 1fr;
        grid-column-gap: 8px;
        -moz-column-gap: 8px;
             column-gap: 8px;
    }

        .buffett-indicator .range-select {
            width: 296px;
            margin-left: auto;
        }
}

.market-sentiment-page {
    display: grid;
    grid-template:
        "h1" auto
        "fg" auto
        "bi" auto
        / 100%;
    grid-gap: 24px;
    gap: 24px;
    margin: 16px;
}

.market-sentiment-page > header {
        grid-area: h1;
    }

.market-sentiment-page > header h1 {
            margin: 0;
        }

.market-sentiment-page > .fear-and-greed-index {
        grid-area: fg;
    }

.market-sentiment-page > .buffett-indicator {
        grid-area: bi;
    }

.market-sentiment-page > section {
        border: var(--border);
        border-radius: 8px;
        margin-bottom: auto;
        background-color: white;
    }

@media screen and (min-width: 1200px) {
    .market-sentiment-page {
        grid-template:
            "h1 h1" auto
            "fg bi" auto / 400px 1fr;

        margin: 16px 20px;
    }

        .market-sentiment-page > section {
            border-radius: 10px;
        }
}

@media screen and (min-width: 1400px) {
    .market-sentiment-page {
        grid-template:
            "h1 h1" auto "fg bi" auto / 504px 1fr;
    }
}

.lgbtq-friendly-companies-page,
.family-businesses-page {
    margin: 16px;
}

.lgbtq-friendly-companies-page > header p,.family-businesses-page > header p {
            color: var(--secondary-text-color);
            font-size: 0.875rem;
            margin-top: 0;
        }

.lgbtq-friendly-companies-page > section:not(:has( > ol)):not(:has( > table)) {
        border: var(--border);
        border-radius: 8px;
        background-color: white;
        padding: 16px;
    }

.family-businesses-page > section:not(:has( > ol)):not(:has( > table)) {
        border: var(--border);
        border-radius: 8px;
        background-color: white;
        padding: 16px;
    }

.lgbtq-friendly-companies-page > section:not(:has( > ol)):not(:has( > table)) > ol {
            margin: 0;
        }

.family-businesses-page > section:not(:has( > ol)):not(:has( > table)) > ol {
            margin: 0;
        }

@media screen and (min-width: 1200px) {

    .lgbtq-friendly-companies-page,
    .family-businesses-page {
        margin: 16px 20px;
    }
}

.lgbtq-friendly-companies-page .company-list,.family-businesses-page .company-list {
        margin-left: 0;
        margin-right: 0;
    }

.market-news-page,
.insider-tx-feed-page,
.congress-tx-feed-page,
.analyst-ratings-feed-page,
.company-congress-tx-log-page,
.company-insider-tx-log-page {
    margin: 16px;
}

.market-news-page header img,.insider-tx-feed-page header img,.congress-tx-feed-page header img,.analyst-ratings-feed-page header img,.company-congress-tx-log-page header img,.company-insider-tx-log-page header img {
            display: inline;
        }

.market-news-page header p,.insider-tx-feed-page header p,.congress-tx-feed-page header p,.analyst-ratings-feed-page header p,.company-congress-tx-log-page header p,.company-insider-tx-log-page header p {
            color: var(--secondary-text-color);
            font-size: 0.875rem;
            margin-top: 0;
        }

.market-news-page header h1,.insider-tx-feed-page header h1,.congress-tx-feed-page header h1,.analyst-ratings-feed-page header h1,.company-congress-tx-log-page header h1,.company-insider-tx-log-page header h1 {
            margin-top: 0;
        }

.market-news-page ol,.insider-tx-feed-page ol,.congress-tx-feed-page ol,.analyst-ratings-feed-page ol,.company-congress-tx-log-page ol,.company-insider-tx-log-page ol {
        margin: 0;
        padding: 0;
        display: grid;
        display: block grid;
        grid-template-columns: 1fr;
        grid-gap: 8px;
        gap: 8px;
    }

.market-news-page ol li,.insider-tx-feed-page ol li,.congress-tx-feed-page ol li,.analyst-ratings-feed-page ol li,.company-congress-tx-log-page ol li,.company-insider-tx-log-page ol li {
            display: block;
            background-color: white;
            padding: 16px;
            border: var(--border);
            border-radius: 10px;
            transition: background-color 0.2s ease-in-out;
        }

.market-news-page ol li:hover,.insider-tx-feed-page ol li:hover,.congress-tx-feed-page ol li:hover,.analyst-ratings-feed-page ol li:hover,.company-congress-tx-log-page ol li:hover,.company-insider-tx-log-page ol li:hover {
                background-color: var(--hover-background);
            }

.market-news-page ol li a,.insider-tx-feed-page ol li a,.congress-tx-feed-page ol li a,.analyst-ratings-feed-page ol li a,.company-congress-tx-log-page ol li a,.company-insider-tx-log-page ol li a {
                color: black;
                -webkit-text-decoration: none;
                text-decoration: none;
            }

@media screen and (min-width: 1200px) {

    .market-news-page,
    .insider-tx-feed-page,
    .congress-tx-feed-page,
    .analyst-ratings-feed-page,
    .company-insider-tx-log-page {
        margin: 16px 20px;
    }

        .market-news-page ol,.insider-tx-feed-page ol,.congress-tx-feed-page ol,.analyst-ratings-feed-page ol,.company-insider-tx-log-page ol {
            gap: 16px;
            grid-template-columns: 1fr 1fr;
        }
}

@media screen and (min-width: 1600px) {
        .market-news-page ol,.insider-tx-feed-page ol,.congress-tx-feed-page ol,.analyst-ratings-feed-page ol {
            grid-template-columns: 1fr 1fr 1fr;
        }
}

.market-news-page ol > li header {
                color: var(--secondary-text-color);
                font-weight: 400;
                font-size: 0.875rem;
            }

.market-news-page ol > li header img {
                    vertical-align: middle;
                    width: 32px;
                    height: 32px;
                    border-radius: 32px;
                }

.market-news-page ol > li header span {
                    margin-left: 16px;
                }

.market-news-page ol > li header img + span {
                    margin-left: 8px;
                }

.market-news-page ol > li h2 {
                font-size: 1.125rem;
            }

.analyst-ratings-list > li {
        list-style: none;
        max-height: 10lh;
        width: auto;
    }

.analyst-ratings-list > li h2 {
            font-size: 1.125rem;
            margin-top: 8px;
            margin-bottom: 8px;
        }

.analyst-ratings-list > li time {
            padding-top: 4px;
            color: var(--secondary-text-color);
        }

.analyst-ratings-list > li .change {
            border-radius: 4px;
            padding: 4px 12px;
            float: right;
        }

.analyst-ratings-list > li .change .icon {
                vertical-align: bottom;
            }

.analyst-ratings-list > li .positive.change {
            background-color: rgba(10,148,71,0.10196);
            color: #0A9447;
        }

.analyst-ratings-list > li .negative.change {
            background-color: rgba(242,0,0,0.10196);
            color: #F20000;
        }

.analyst-ratings-list > li > div {
            height: -moz-max-content;
            height: max-content;
            width: calc(100% - 32px) !important;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            visibility: visible;
            text-overflow: ellipsis;
            text-align: left;
        }

.analyst-ratings-list > li a {
            color: var(--link-color) !important;
        }

.analyst-ratings-list > li time,.analyst-ratings-list > li p.secondary {
            font-size: 0.875rem;
        }

@media screen and (min-width: 1200px) {
            .analyst-ratings-feed-page > ol > li {
                padding: 24px;
            }
}

ol.congress-tx-list > li {
        display: grid;
        display: block grid;
        grid-template:
            "img   date  info" auto
            "img   asset asset" auto
            "img   range range" auto
            "img   name  name" auto
            / 26px 1fr 1fr;
        grid-row-gap: 16px;
        row-gap: 16px;
        grid-column-gap: 24px;
        -moz-column-gap: 24px;
             column-gap: 24px;
        padding: 16px 16px 24px 16px;
    }

ol.congress-tx-list > li > a:has( > img) {
            grid-area: img;
            margin-left: auto;
        }

ol.congress-tx-list > li > a:has( > img) {
            width: 26px;
        }

ol.congress-tx-list > li > a > img {
            width: 26px;
        }

ol.congress-tx-list > li > time {
            grid-area: date;
            color: var(--secondary-text-color);
            font-size: 0.875rem;
        }

ol.congress-tx-list > li span:first-of-type {
            grid-area: asset;
        }

ol.congress-tx-list > li span:nth-of-type(2) {
            grid-area: name;
            color: var(--secondary-text-color);
        }

ol.congress-tx-list > li span:last-of-type {
            grid-area: range;
        }

@media screen and (min-width: 1200px) {
        ol.congress-tx-list > li {
            grid-template-columns: 39px 1fr 1fr;
            padding: 24px;
        }

            ol.congress-tx-list > li > a:has( > img) {
                width: 39px;
            }

            ol.congress-tx-list > li > a > img {
                width: 39px;
            }
}

ol.insider-tx-list > li {
        display: grid;
        grid-template:
            "date" auto
            "value" auto
            "asset" auto
            "name" auto
            / auto;
        grid-gap: 4px;
        gap: 4px;
    }

ol.insider-tx-list > li > time {
            grid-area: date;
            color: var(--secondary-text-color);
            font-size: 0.875rem;
            font-weight: 400;
            margin-bottom: 12px;
        }

ol.insider-tx-list > li > .insider-tx-item-name {
            grid-area: name;
        }

ol.insider-tx-list > li > .insider-tx-item-asset {
            grid-area: asset;
            font-size: 1.125rem;
        }

ol.insider-tx-list > li > .insider-tx-item-value {
            grid-area: value;
            font-size: 1.125rem;
        }

ol.insider-tx-list > li > .insider-tx-item-value img {
                vertical-align: bottom;
                margin-right: 8px;
            }

.insider-tx-feed-page header {
        display: grid;
        grid-template:
            "heading     heading" auto
            "description info   " auto
            "select      select " auto
            / 1fr auto;
        align-items: baseline;
    }

.insider-tx-feed-page header > h1 {
            grid-area: heading;
        }

.insider-tx-feed-page header > p {
            grid-area: description;
        }

.insider-tx-feed-page header > .info-button {
            grid-area: info;
        }

.insider-tx-feed-page header > select {
            margin-left: auto;
            grid-area: select;
        }

@media screen and (min-width: 1200px) {
        .insider-tx-feed-page header {
            display: grid;
            grid-template:
                "heading     heading heading" auto
                "description info    select" auto
                / auto auto 1fr;
            align-items: baseline;
        }
}

.company-score-history-page,
.company-insider-tx-log-page,
.company-congress-tx-log-page,
.company-investor-log-page {
    display: grid;
    grid-template:
        "heading" auto
        "table" 1fr
        / 100%;
    grid-gap: 16px;
    gap: 16px;
    margin: 16px;
}

.company-score-history-page > .company-heading,.company-insider-tx-log-page > .company-heading,.company-congress-tx-log-page > .company-heading,.company-investor-log-page > .company-heading {
        grid-area: heading;
    }

.company-score-history-page > section:nth-child(2) {
        grid-area: table;
    }

.company-insider-tx-log-page > section:nth-child(2) {
        grid-area: table;
    }

.company-congress-tx-log-page > section:nth-child(2) {
        grid-area: table;
    }

.company-investor-log-page > section:nth-child(2) {
        grid-area: table;
    }

.company-score-history-page > section:nth-child(2) h2 {
            display: inline;
            margin-bottom: 8px;
        }

.company-insider-tx-log-page > section:nth-child(2) h2 {
            display: inline;
            margin-bottom: 8px;
        }

.company-congress-tx-log-page > section:nth-child(2) h2 {
            display: inline;
            margin-bottom: 8px;
        }

.company-investor-log-page > section:nth-child(2) h2 {
            display: inline;
            margin-bottom: 8px;
        }

.company-score-history-page > section:nth-child(2) ol {
            padding: 0;
        }

.company-insider-tx-log-page > section:nth-child(2) ol {
            padding: 0;
        }

.company-congress-tx-log-page > section:nth-child(2) ol {
            padding: 0;
        }

.company-investor-log-page > section:nth-child(2) ol {
            padding: 0;
        }

.company-score-history-page > .company-heading,.company-insider-tx-log-page > .company-heading,.company-congress-tx-log-page > .company-heading,.company-investor-log-page > .company-heading {
        padding: 16px;
        background-color: white;
        border: var(--border);
        border-radius: 8px;
    }

.company-score-history-page {
    grid-template: 
        "heading" auto
        "table  " auto
        "chart  " 1fr
        / 100%;

}

.company-score-history-page > section.company-score-history-description dl {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-gap: 8px;
            gap: 8px;
            margin-left: auto;
            margin-right: auto;
            max-width: 400px;
        }

.company-score-history-page > section.company-score-history-description dl dd {
                padding: 4px 16px;
                border-radius: 5px;
                color: white;
                font-size: 0.75rem;
            }

.company-score-history-page > section.company-score-history-chart {
        grid-area: chart;
    }

.company-score-history-page > section.company-score-history-chart .range-select {
            margin: 0 auto 8px auto;
        }

.company-score-history-page > section.company-score-history-chart > footer {
            text-align: center;
        }

.company-insider-tx-log-page > section:nth-child(2) li {
        padding: 16px;
        background-color: white;
        border: var(--border);
        border-radius: 8px;
    }

.company-congress-tx-log-page > section:nth-child(2) li {
        padding: 16px;
        background-color: white;
        border: var(--border);
        border-radius: 8px;
    }

.company-insider-tx-log-page > .company-heading,.company-congress-tx-log-page > .company-heading {
        padding: 16px;
        background-color: white;
        border: var(--border);
        border-radius: 8px;
    }

.company-congress-tx-log > ol > li {
            display: grid;
            grid-template: 
                "date  name"  auto
                "range range" auto
                / auto 1fr;
            grid-column-gap: 8px;
            -moz-column-gap: 8px;
                 column-gap: 8px;
        }

.company-congress-tx-log > ol > li > time {
                grid-area: date;
                color: var(--secondary-text-color);
            }

.company-congress-tx-log > ol > li > span:first-of-type {
                grid-area: name;
            }

.company-congress-tx-log > ol > li > span:last-of-type {
                grid-area: range;
            }

@media screen and (min-width: 1200px) {

    .company-insider-tx-log-page,
    .company-congress-tx-log-page,
    .company-investor-log-page {
        margin: 16px 20px;
    }

        .company-insider-tx-log-page > section:nth-child(2) li {
            border-radius: 10px;
            padding: 24px;
        }

        .company-congress-tx-log-page > section:nth-child(2) li {
            border-radius: 10px;
            padding: 24px;
        }

        .company-investor-log-page > section:nth-child(2) li {
            border-radius: 10px;
            padding: 24px;
        }

        .company-insider-tx-log-page > .company-heading,.company-congress-tx-log-page > .company-heading,.company-investor-log-page > .company-heading {
            border-radius: 10px;
            padding: 24px;
        }

    .company-score-history-page {
        grid-template: 
            "heading table" auto
            "chart   chart" 1fr
            / 1fr    1fr;
    }    
}

@media screen and (min-width: 1600px) {

    .company-insider-tx-log-page,
    .company-congress-tx-log-page,
    .company-investor-log-page {
        grid-template:
            "heading table" auto
            / 504px 1fr;
    }

        .company-insider-tx-log-page > .company-heading,.company-congress-tx-log-page > .company-heading,.company-investor-log-page > .company-heading {
            margin-bottom: auto;
        }
}

.company-investor-log-page .company-investor-log-list {
        padding: 0;
    }

.company-investor-log-page .company-investor-log-list li {
            list-style-position: inside;
            padding: 12px;
            transition: background-color 0.2s ease-in-out;
        }

.company-investor-log-page .company-investor-log-list li:not(:last-child) {
            border-bottom: var(--border);
        }

.company-investor-log-page .company-investor-log-list li:hover {
            background-color: var(--hover-background);
        }

.company-investor-log-page .company-investor-log-list img {
            vertical-align: bottom;
            margin: 0 8px;
        }

.company-investor-log-page .company-investor-log-list a {
            color: black;
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.company-investor-log-page .company-investor-log-list dl {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(4, auto);
            margin: 0;
            -moz-columns: 2;
                 columns: 2;
            margin-top: 8px;
            margin-left: 2.2ch;
        }

.company-investor-log-page .company-investor-log-list dl dt,.company-investor-log-page .company-investor-log-list dl dd {
                display: inline-block;
            }

.company-investor-log-page .company-investor-log-list dl dt {
                color: var(--secondary-text-color);
                font-size: 75%;
                line-height: 134%;
            }

.company-investor-log-page .company-investor-log-list dl dd {
                font-weight: 500;
                margin-left: 0;
            }

.company-investor-log-page .company-investor-log-list dl dt:first-child {
                grid-row: 1;
                grid-column: 1;
            }

.company-investor-log-page .company-investor-log-list dl dd:nth-child(2) {
                grid-row: 2;
                grid-column: 1;
            }

.company-investor-log-page .company-investor-log-list dl dt:nth-child(3) {
                grid-row: 1;
                grid-column: 2;
            }

.company-investor-log-page .company-investor-log-list dl dd:nth-child(4) {
                grid-row: 2;
                grid-column: 2;
            }

.company-investor-log-page .company-investor-log-list dl dt:nth-child(5) {
                margin-top: 8px;
                grid-row: 3;
                grid-column: 1 / 3;
            }

.company-investor-log-page .company-investor-log-list dl dd:nth-child(6) {
                grid-row: 4;
                grid-column: 1 / 3;
            }

.company-investor-log-page .company-investor-log-list img,.company-investor-log-page .data-table img {
            height: 32px;
            aspect-ratio: 1 / 1;
            -o-object-fit: scale-down;
               object-fit: scale-down;
            border-radius: 32px;
            background-color: #cad6d5;
            margin-right: 8px;
        }

.company-investor-log-page > .company-investor-log {
        padding: 16px;
        background-color: white;
        border: var(--border);
        border-radius: 8px;
    }

.company-investor-log-page .data-table {
        margin-top: 8px;
    }

.company-investor-log-page .data-table th:first-child {
            padding-left: 48px;
        }

.company-investor-log-page .data-table th,.company-investor-log-page .data-table td {
            text-align: left;
        }

.company-investor-log-page .data-table meter {
            margin-right: 8px;
        }

@media screen and (min-width: 1200px) {
        .company-investor-log-page .company-investor-log-list {
            display: none;
        }

        .company-investor-log-page .company-investor-log {
            border-radius: 10px;
            padding: 24px;
        }
}

@media screen and (max-width: 1199px) {

        .company-investor-log-page .data-table,.company-investor-log-page .data-table-navigation {
            display: none;
        }
}

.company-analyst-rating-log-page {
    display: grid;
    grid-template:
        "heading" auto
        "chart" auto
        "list" 1fr
        / 100%;
    grid-gap: 16px;
    gap: 16px;
    margin: 16px;
}

.company-analyst-rating-log-page > .company-heading {
        grid-area: heading;
        padding: 16px;
        background-color: white;
        border: var(--border);
        border-radius: 8px;
    }

.company-analyst-rating-log-page > .price-target-chart {
        grid-area: chart;
        border: var(--border);
        border-radius: 8px;
        background-color: white;
        padding: 16px;
        margin-bottom: auto;
    }

.company-analyst-rating-log-page > .price-target-chart .container {
            height: 280px;
        }

.company-analyst-rating-log-page > .news-list {
        grid-area: list;
    }

.company-analyst-rating-log-page > .news-list select {
            background-color: white;
            border: var(--border);
            border-radius: 8px;
            padding: 8px;
        }

.company-analyst-rating-log-page > .news-list > ol {
            padding: 0;
        }

.company-analyst-rating-log-page > .news-list > ol > li {
            padding: 16px;
            background-color: white;
            border: var(--border);
            border-radius: 10px;
            margin-bottom: 10px;
            transition: background-color 0.2s ease-in-out;
        }

.company-analyst-rating-log-page > .news-list > ol > li:hover {
                background-color: var(--hover-background);
            }

.company-analyst-rating-log-page > .news-list > ol > li > div {
                -webkit-line-clamp: 3;
            }

.company-analyst-rating-log-page > .news-list > ol > li a {
                color: black;
                -webkit-text-decoration: none;
                text-decoration: none;
            }

@media screen and (min-width: 1200px) {
    .company-analyst-rating-log-page {
        grid-template:
            "heading chart" auto
            "heading list" 1fr
            / 400px 1fr;
        margin: 16px 20px;
    }

        .company-analyst-rating-log-page > .company-heading {
            border-radius: 10px;
            padding: 24px;
            margin-bottom: auto;
        }

        .company-analyst-rating-log-page > .price-target-chart {
            border-radius: 10px;
            padding: 24px;
        }

            .company-analyst-rating-log-page > .price-target-chart .container {
                height: 320px;
            }

        .company-analyst-rating-log-page > .news-list > ol > li {
            padding: 24px;
        }
}

@media screen and (min-width: 1600px) {
    .company-analyst-rating-log-page {
        grid-template:
            "heading chart" auto
            "heading list" 1fr

            / 504px 1fr;
    }
            .company-analyst-rating-log-page .price-target-chart .container {
                height: 400px;
            }
}

.member-page {
    display: grid;
    grid-template:
        "heading" auto
        "table" 1fr
        / 100%;
    grid-gap: 16px;
    gap: 16px;
    margin: 16px;
}

.member-page > .member-overview {
        background-color: white;
        border: var(--border);
        border-radius: 10px;
        padding: 16px;
        margin-bottom: auto;
    }

.member-page > .member-overview h1 {
            margin-top: 0;
            font-size: 1.5rem;
        }

.member-page > .member-overview > figure {
            margin-left: 0;
            margin-right: 0;
        }

.member-page > .member-overview > figure > img {
                border-radius: 8px;
            }

.member-page > .member-overview > .member-biography ol {
                padding: 0;
            }

.member-page > .member-overview > .member-biography ol li {
                    list-style: none;
                }

.member-page > .member-transactions > h2 {
            margin-top: 0;
        }

.member-page > .member-transactions > ol {
            padding: 0;
        }

.member-page > .member-transactions > ol > li {
                display: grid;
                grid-template:
                    "time time time" auto
                    "logo name value" auto
                    / auto 1fr auto;
                grid-gap: 8px;
                gap: 8px;
                list-style: none;
                align-items: center;
                margin-bottom: 16px;
                padding: 16px;
                border: var(--border);
                border-radius: 10px;
                background-color: white;
                transition: background-color 0.2s ease-in-out;
            }

.member-page > .member-transactions > ol > li:hover {
                    background-color: var(--hover-background);
                }

.member-page > .member-transactions > ol > li > time {
                    grid-area: time;
                }

.member-page > .member-transactions > ol > li > a:has( > .asset-name) {
                    grid-area: name;
                }

.member-page > .member-transactions > ol > li > a:has( > img) {
                    grid-area: logo;
                }

.member-page > .member-transactions > ol > li > .amount {
                    grid-area: value;
                }

.member-page > .member-transactions > ol > li > a > img {
                    grid-area: logo;
                    width: 32px;
                    height: 32px;
                    vertical-align: bottom;
                }

.member-page > .member-transactions > ol > li a {
                    color: black;
                    -webkit-text-decoration: none;
                    text-decoration: none;
                }

@media screen and (min-width: 1200px) {
    .member-page {
        grid-template:
            "heading table" auto
            / 400px 1fr;
        margin: 16px 20px;
    }

        .member-page > section {
            border-radius: 10px;
            padding: 24px;
        }
}

.profile-page {
    margin: 16px;
}

.profile-page > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

.profile-page > header h1 {
            margin: 0;
        }

.profile-page > header button img {
                height: 1lh;
                margin-right: 0.5ch;
                vertical-align: bottom;
            }

.profile-page > section {
        border: var(--border);
        border-radius: 8px;
        background-color: white;
        padding: 16px;
        margin-bottom: 16px;
    }

.profile-page .profile-settings {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

.profile-page .profile-settings .profile-picture {
            height: 80px;
            width: 80px;
            border-radius: 40px;
            margin-left: auto;
            margin-right: auto;
        }

.profile-page .profile-settings .profile-picture-button {
            max-width: 130px;
            white-space: nowrap;
        }

.profile-page .profile-settings .profile-picture-button img {
                vertical-align: bottom;
                margin-right: .5ch;
                height: 1lh;
            }

.profile-page .profile-settings label,.profile-page .profile-settings input {
            width: calc(100% - 32px);
        }

.profile-page .manage-notifications .switch {
            margin-bottom: 16px;
        }

.profile-page .manage-subscription a.button {
            display: inline-block;
            margin-top: 16px;
        }

.profile-page .manage-subscription a.button + p {
            margin-top: 8px;
        }

.profile-page h2 {
        font-size: 1.125rem;
    }

.profile-page p {
        color: var(--secondary-text-color);
        font-size: 0.875rem;
    }

.profile-page button {
        color: white;
        background-color: var(--primary-background);
        border: none;
        padding: 12px 16px;
        border-radius: 8px;
        transition: background-color 0.2s ease-in-out;
    }

.profile-page button:hover {
            background-color: var(--primary-hover-background);
        }

.profile-page input {
        padding: 12px 16px;
        border: var(--border);
        border-radius: 8px;
    }

.profile-page label > input {
        display: block;
    }

@media screen and (min-width: 1200px) {
    .profile-page {
        margin: 16px 20px;
    }

        .profile-page .profile-settings {
            display: grid;
            grid-template:
                "picture        unused" auto
                "picture-button unused" auto
                "name           email" auto
                / 1fr 1fr;
            grid-gap: 16px;
            gap: 16px;
        }

            .profile-page .profile-settings .profile-picture {
                grid-area: picture;
                height: 120px;
                width: 120px;
                border-radius: 60px;
                margin-left: 0;
            }

            .profile-page .profile-settings .profile-picture-button {
                grid-area: picture-button;
                max-width: 140px;
            }

            .profile-page .profile-settings label:has(input[type="username"]) {
                grid-area: name;
            }

            .profile-page .profile-settings label:has(input[type="email"]) {
                grid-area: email;
            }
}

.change-password-page form label,.reset-password-page form label {
            display: block;
            margin-bottom: 8px;
        }

.change-password-page form input,.reset-password-page form input,.change-password-page form button,.reset-password-page form button {
            width: 100%;
            box-sizing: border-box;
            display: block;
        }

.change-password-page form button,.reset-password-page form button {
            margin-top: 16px;
        }

@media screen and (min-width: 1200px) {
        .change-password-page form,.reset-password-page form {
            max-width: 400px;
        }
}

.onboarding-page {
    padding: 24px 24px 56px 24px;
}

.onboarding-page header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }

.onboarding-page header progress {
            flex: 1 0 auto;
            height: 8px;
            border-radius: 8px;
        }

.onboarding-page header ::-webkit-progress-value {
            background-color: var(--primary-background);
        }

.onboarding-page header ::-moz-progress-bar {
            background-color: var(--primary-background);
        }

.onboarding-page .survey-question {
        max-width: 956px;
        margin-left: auto;
        margin-right: auto;
    }

.onboarding-page formgroup {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

.onboarding-page formgroup button {
            margin-left: auto;
            margin-right: auto;
            width: min(100%, 956px);
            /* width: 956px; */
        }

.onboarding-page formgroup input[type="checkbox"] {
            border: 1px solid rgba(56,56,56,0.4);
            border-radius: 4px;
            height: 22px;
            width: 22px;
            vertical-align: middle;
            margin: 0 16px 0 0;
        }

.onboarding-page formgroup input[type="text"] {
            padding: 12px 16px;
            border: var(--border);
            border-radius: 8px;
            margin-left: 38px;
            margin-top: calc(22px - 1lh);
            width: calc(100% - 70px);
        }

.onboarding-page formgroup label {
            margin-top: 8px;
        }

.onboarding-page button {
        border: var(--border);
        border-radius: 8px;
        padding: 12px 16px;
        color: black;
        background-color: white;
        transition: background-color 0.2s ease-in-out;
    }

.onboarding-page button:hover {
            background-color: #F0F0F0;
        }

.onboarding-page button img {
            vertical-align: middle;
        }

.login-page,
.signup-page {
    padding: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.login-page form,.signup-page form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

.login-page form input[type="text"],.signup-page form input[type="text"],.login-page form input[type="password"],.signup-page form input[type="password"],.login-page form input[type="email"],.signup-page form input[type="email"] {
            padding: 12px 16px;
            border: var(--border);
            border-radius: 8px;
            width: calc(100% - 32px);
        }

.login-page form button,.signup-page form button {
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            background-color: var(--primary-background);
            color: white;
            transition: background-color 0.2s ease-in-out;
        }

.login-page form button:hover,.signup-page form button:hover {
                background-color: var(--primary-hover-background);
            }

.login-page form button.google,.signup-page form button.google {
            background-color: #db4437;
        }

.login-page form button.google:hover,.signup-page form button.google:hover {
                background-color: #dd5246;
            }

.login-page form formgroup.password-input,.signup-page form formgroup.password-input {
            display: flex;
            flex-direction: row;
            align-items: end;
        }

.login-page form formgroup.password-input label:has(input[type="text"]) {
                flex: 1 0 auto;
            }

.signup-page form formgroup.password-input label:has(input[type="text"]) {
                flex: 1 0 auto;
            }

.login-page form formgroup.password-input label:has(input[type="password"]) {
                flex: 1 0 auto;
            }

.signup-page form formgroup.password-input label:has(input[type="password"]) {
                flex: 1 0 auto;
            }

.login-page form formgroup.password-input label:has(input[type="checkbox"]) {
                position: relative;
                background-image: url(https://storage.googleapis.com/insiderpie-public-hosting/icons/eye.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-color: white;
                border: var(--border);
                border-radius: 8px;
                color: transparent;
                height: calc(1lh + 21px);
                width: calc(1lh + 21px);
                transition: background-color 0.2s ease-in-out;
                margin-left: 16px;
            }

.signup-page form formgroup.password-input label:has(input[type="checkbox"]) {
                position: relative;
                background-image: url(https://storage.googleapis.com/insiderpie-public-hosting/icons/eye.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-color: white;
                border: var(--border);
                border-radius: 8px;
                color: transparent;
                height: calc(1lh + 21px);
                width: calc(1lh + 21px);
                transition: background-color 0.2s ease-in-out;
                margin-left: 16px;
            }

.login-page form formgroup.password-input label:has(input[type="checkbox"]):hover {
                    background-color: #F0F0F0;
                }

.signup-page form formgroup.password-input label:has(input[type="checkbox"]):hover {
                    background-color: #F0F0F0;
                }

.login-page form formgroup.password-input label:has(input[type="checkbox"]):has(input[type="checkbox"]:focus) {
                    background-color: #F0F0F0;
                }

.signup-page form formgroup.password-input label:has(input[type="checkbox"]):has(input[type="checkbox"]:focus) {
                    background-color: #F0F0F0;
                }

.login-page form formgroup.password-input label:has(input[type="checkbox"]:checked) {
                background-image: url(https://storage.googleapis.com/insiderpie-public-hosting/icons/eye-off.svg);
            }

.signup-page form formgroup.password-input label:has(input[type="checkbox"]:checked) {
                background-image: url(https://storage.googleapis.com/insiderpie-public-hosting/icons/eye-off.svg);
            }

.login-page form formgroup.password-input input[type="checkbox"],.signup-page form formgroup.password-input input[type="checkbox"] {
                position: absolute;
                top: 0;
                border-radius: 8px;
                vertical-align: middle;
                margin: 0 16px 0 0;
                width: 100%;
                height: 100%;
                overflow: visible;
                opacity: 0;
            }

.dashboard-page {
    margin: 16px;
    display: grid;
    grid-template:
        "breaking-news"      auto
        "stock-of-the-day"   auto
        "top-investor-tx"    auto
        "top-scorers"        auto
        "market-mood"        auto
        "flop-scorers"       auto
        "top-value-scorers" auto
        "top-growth-scorers"    auto
        "more-news"          auto
        "subscription"       auto
        / 100%;
    grid-gap: 16px;
    gap: 16px;
}

.dashboard-page > .breaking-news {
        grid-area: breaking-news;
        /* display: none; */
    }

.dashboard-page > .stock-of-the-day {
        grid-area: stock-of-the-day;
    }

.dashboard-page > .top-investor-tx {
        grid-area: top-investor-tx;
    }

.dashboard-page > .top-scorers {
        grid-area: top-scorers;
    }

.dashboard-page > .market-mood {
        grid-area: market-mood;
    }

.dashboard-page > .flop-scorers {
        grid-area: flop-scorers;
    }

.dashboard-page > .top-value-scorers {
        grid-area: top-value-scorers;
    }

.dashboard-page > .top-growth-scorers {
        grid-area: top-growth-scorers;
    }

.dashboard-page > .more-news {
        grid-area: more-news;
    }

.dashboard-page > .subscription {
        grid-area: subscription;
    }

.dashboard-page > section {
        border: var(--border);
        border-radius: 8px;
        background-color: white;
        padding: 16px;
    }

.dashboard-page > section > header > a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                gap: 8px;
            }

.dashboard-page > section > header > a > h2 {
                    margin-top: 0;
                }

.dashboard-page > section > header > a > span:has( + img[src="https://assets.insiderpie.de/icons/down-arrow.svg"]) {
                    display: none;
                }

.dashboard-page > section > header > a > img[src="https://assets.insiderpie.de/icons/down-arrow.svg"] {
                    vertical-align: baseline;
                    transform: rotate(-90deg);
                    height: 12px;
                    width: 12px;
                }

.dashboard-page > section.stock-of-the-day {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 232px;
        background-color: #086375;
        color: white;
    }

.dashboard-page > section.stock-of-the-day > header {
            align-self: start;
        }

.dashboard-page > section.stock-of-the-day > header img {
                filter: invert(1);
            }

.dashboard-page > section.stock-of-the-day img.logo {
            height: 48px;
            width: 48px;
            -o-object-fit: contain;
               object-fit: contain;
        }

.dashboard-page > section.stock-of-the-day > a,.dashboard-page > section.stock-of-the-day > .loader-container {
            flex: 1 0 auto;
            background-color: white;
            color: black;

            min-width: 256px;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 8px;
            
            text-align: center;
        }

.dashboard-page > section.stock-of-the-day > a {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;

            transition: background-color 0.2s ease-in-out;
        }

.dashboard-page > section.stock-of-the-day > a:hover {
                background-color: var(--hover-background);
            }

.dashboard-page > section.stock-of-the-day > a > .chips {
                display: none;
            }

.dashboard-page > section.stock-of-the-day > a > .name {
                grid-area: name;
            }

.dashboard-page > section.stock-of-the-day > a > .logo {
                grid-area: logo;
                width: 48px;
            }

.dashboard-page > section.stock-of-the-day > a > .score {
                grid-area: score;
                font-size: 0.875rem;
            }

.dashboard-page > section.stock-of-the-day > a > .score svg {
                    vertical-align: middle;
                    margin-right: 8px;
                }

.dashboard-page > section.stock-of-the-day footer {
            width: 100%;
            padding-left: 16px;
            padding-right: 16px;
        }

.dashboard-page > section.stock-of-the-day footer nav {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: baseline;
            }

.dashboard-page > section.stock-of-the-day footer nav button.previous,.dashboard-page > section.stock-of-the-day footer nav button.next {
                    border: none;
                }

.dashboard-page > section.stock-of-the-day footer nav button.previous img,.dashboard-page > section.stock-of-the-day footer nav button.next img {
                        vertical-align: middle;
                    }

.dashboard-page > section.stock-of-the-day footer nav button.previous:disabled {
                        cursor: inherit;
                        visibility: hidden;
                    }

.dashboard-page > section.stock-of-the-day footer nav button.next:disabled {
                        cursor: inherit;
                        visibility: hidden;
                    }

.dashboard-page > section.stock-of-the-day footer nav button.previous img {
                        transform: rotate(90deg);
                    }

.dashboard-page > section.stock-of-the-day footer nav button.next img {
                        transform: rotate(-90deg);
                    }

.dashboard-page > section.top-scorers > ol,.dashboard-page > section.top-value-scorers > ol,.dashboard-page > section.top-growth-scorers > ol {
            display: grid;
            grid-gap: 16px;
            gap: 16px;
            grid-template-rows: 1fr;
            grid-auto-columns: 1fr;
        }

.dashboard-page > .top-investor-tx > header {
            margin-bottom: 24px;
        }

.dashboard-page > .top-investor-tx > header > a {
                margin-left: auto;
            }

.dashboard-page > .top-investor-tx > ol {
            display: grid;
            grid-gap: 24px;
            gap: 24px;
            height: -moz-max-content;
            height: max-content;
        }

.dashboard-page > .top-investor-tx > ol > li {
                display: grid;
                grid-template:
                    "picture description" 1fr
                    / auto   1fr;
                grid-column-gap: 13px;
                -moz-column-gap: 13px;
                     column-gap: 13px;
                grid-row-gap: 4px;
                row-gap: 4px;
            }

.dashboard-page > .top-investor-tx > ol > li > .picture {
                    grid-area: picture;
                }

.dashboard-page > .top-investor-tx > ol > li > .picture img {
                        border-radius: 100%;
                        width: 64px;
                        height: 64px;
                        margin-bottom: 0;
                        background-color: #cad6d5;
                        -o-object-fit: contain;
                           object-fit: contain;
                    }

.dashboard-page > .top-investor-tx > ol > li > .icon {
                    grid-area: picture;
                    position: relative;
                    top: 32px;
                    left: 32px;
                    padding: 8px;
                    border-radius: 100%;
                    height: 16px;
                    width: 16px;
                }

.dashboard-page > .top-investor-tx > ol > li > .icon.positive {
                        background-color: rgb(211,243,229);
                    }

.dashboard-page > .top-investor-tx > ol > li > .icon.negative {
                        background-color: rgb(252, 204, 204);
                    }

.dashboard-page > .top-investor-tx > ol > li > .icon > img {
                        width: 16px;
                        height: 16px;
                    }

.dashboard-page > .top-investor-tx > ol > li > .description {
                    grid-area: description;
                    font-size: 0.875rem;
                    margin-top: auto;
                    margin-bottom: auto;
                }

.dashboard-page > .top-investor-tx > ol > li > .description > .name,.dashboard-page > .top-investor-tx > ol > li > .description > .asset {
                        display: block;
                    }

.dashboard-page > .top-investor-tx > footer {
            margin-top: 12px;
            text-align: right;
        }

.dashboard-page > .top-investor-tx > footer img[src="https://assets.insiderpie.de/icons/down-arrow.svg"] {
                height: 12px;
                width: 12px;
                vertical-align: baseline;
                transform: rotate(-90deg);
            }

.dashboard-page > section.more-news > ol {
            grid-auto-flow: row;
        }

.dashboard-page > section.breaking-news .breaking {
            color: var(--negative);
            font-size: 0.875rem;
        }

.dashboard-page > section.breaking-news .breaking img {
                height: 14px;
                vertical-align: auto;
                margin-right: 8px;
                position: relative;
                top: 1px;
            }

.dashboard-page > section.breaking-news time {
            font-size: 0.875rem;
        }

.dashboard-page > section.top-scorers > ol,.dashboard-page > section.top-value-scorers > ol,.dashboard-page > section.top-growth-scorers > ol {
            grid-auto-flow: column;
        }

.dashboard-page > section.top-scorers > ol > li:first-child {
                order: 3;
            }

.dashboard-page > section.top-value-scorers > ol > li:first-child {
                order: 3;
            }

.dashboard-page > section.top-growth-scorers > ol > li:first-child {
                order: 3;
            }

.dashboard-page > section.top-scorers > ol > li:first-child .rank {
                    color: black;
                    background-color: #FFD700;
                    bottom: -15px;
                }

.dashboard-page > section.top-value-scorers > ol > li:first-child .rank {
                    color: black;
                    background-color: #FFD700;
                    bottom: -15px;
                }

.dashboard-page > section.top-growth-scorers > ol > li:first-child .rank {
                    color: black;
                    background-color: #FFD700;
                    bottom: -15px;
                }

.dashboard-page > section.top-scorers > ol > li:first-child .score {
                    padding-top: calc(72px - 6px - 2px - 1lh);
                }

.dashboard-page > section.top-value-scorers > ol > li:first-child .score {
                    padding-top: calc(72px - 6px - 2px - 1lh);
                }

.dashboard-page > section.top-growth-scorers > ol > li:first-child .score {
                    padding-top: calc(72px - 6px - 2px - 1lh);
                }

.dashboard-page > section.top-scorers > ol > li:nth-child(2) {
                order: 2;
            }

.dashboard-page > section.top-value-scorers > ol > li:nth-child(2) {
                order: 2;
            }

.dashboard-page > section.top-growth-scorers > ol > li:nth-child(2) {
                order: 2;
            }

.dashboard-page > section.top-scorers > ol > li:nth-child(2) .rank {
                    color: black;
                    background-color: #C0C0C0;
                }

.dashboard-page > section.top-value-scorers > ol > li:nth-child(2) .rank {
                    color: black;
                    background-color: #C0C0C0;
                }

.dashboard-page > section.top-growth-scorers > ol > li:nth-child(2) .rank {
                    color: black;
                    background-color: #C0C0C0;
                }

.dashboard-page > section.top-scorers > ol > li:nth-child(3) {
                order: 4;
            }

.dashboard-page > section.top-value-scorers > ol > li:nth-child(3) {
                order: 4;
            }

.dashboard-page > section.top-growth-scorers > ol > li:nth-child(3) {
                order: 4;
            }

.dashboard-page > section.top-scorers > ol > li:nth-child(3) .rank {
                    color: black;
                    background-color: #D69D65;
                }

.dashboard-page > section.top-value-scorers > ol > li:nth-child(3) .rank {
                    color: black;
                    background-color: #D69D65;
                }

.dashboard-page > section.top-growth-scorers > ol > li:nth-child(3) .rank {
                    color: black;
                    background-color: #D69D65;
                }

.dashboard-page > section.top-scorers > ol > li:nth-child(n + 4) {
                display: none;
            }

.dashboard-page > section.top-value-scorers > ol > li:nth-child(n + 4) {
                display: none;
            }

.dashboard-page > section.top-growth-scorers > ol > li:nth-child(n + 4) {
                display: none;
            }

.dashboard-page > section.top-scorers > ol > li > a,.dashboard-page > section.top-value-scorers > ol > li > a,.dashboard-page > section.top-growth-scorers > ol > li > a {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    justify-content: space-between;
                    align-items: center;
                }

.dashboard-page > section.top-scorers > ol > li > a > .rank,.dashboard-page > section.top-value-scorers > ol > li > a > .rank,.dashboard-page > section.top-growth-scorers > ol > li > a > .rank {
                        order: 2;
                        flex: 0 1 auto;
                        color: white;
                        background-color: #086375;
                        width: 11px;
                        height: 25px;
                        border-radius: 8px;
                        padding: 4px 12px;
                        font-size: 1.125rem;
                        font-weight: 500;
                        position: relative;
                        bottom: -18px;
                    }

.dashboard-page > section.top-scorers > ol > li > a > .score,.dashboard-page > section.top-value-scorers > ol > li > a > .score,.dashboard-page > section.top-growth-scorers > ol > li > a > .score {
                        order: 3;
                        flex: 0 1 auto;
                        font-size: 0.875rem;
                        font-weight: 400;
                        border: var(--border);
                        border-radius: 8px;
                        width: 100%;
                        padding-top: calc(49px - 6px - 2px - 1lh);
                        padding-bottom: 6px;
                        margin-bottom: 0;
                        margin-top: 0;
                        text-align: center;
                        background-color: white;
                        transition: background-color 0.2s ease-in-out;
                    }

.dashboard-page > section.top-scorers > ol > li > a > .score > svg,.dashboard-page > section.top-value-scorers > ol > li > a > .score > svg,.dashboard-page > section.top-growth-scorers > ol > li > a > .score > svg {
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                            height: 1lh;
                        }

.dashboard-page > section.top-scorers > ol > li > a > img,.dashboard-page > section.top-value-scorers > ol > li > a > img,.dashboard-page > section.top-growth-scorers > ol > li > a > img {
                        order: 1;
                        flex: 1 0 48px;
                        max-width: 96px;
                        max-height: 48px;
                        -o-object-fit: contain;
                           object-fit: contain;
                    }

.dashboard-page > section.top-scorers > ol > li:hover > a > .score,.dashboard-page > section.top-value-scorers > ol > li:hover > a > .score,.dashboard-page > section.top-growth-scorers > ol > li:hover > a > .score {
                        background-color: var(--hover-background);
                    }

.dashboard-page > .top-scorers > ol > li > a > .score {
                        color: #07803D;
                    }

.dashboard-page > section.flop-scorers ol {
            display: grid;
            grid-auto-flow: row;
            grid-gap: 12px;
            gap: 12px;
        }

.dashboard-page > section.flop-scorers ol li {
                border-radius: 8px;
                background-color: white;
                transition: background-color 0.2s ease-in-out;
            }

.dashboard-page > section.flop-scorers ol li:hover {
                    background-color: var(--hover-background);
                }

.dashboard-page > section.flop-scorers ol li a {
                    display: grid;
                    grid-template-columns: auto 1fr auto;
                    align-items: center;
                    grid-gap: 12px;
                    gap: 12px;
                    padding: 12px;
                }

.dashboard-page > section.flop-scorers ol li a > img {
                        width: 32px;
                        max-height: 32px;
                        vertical-align: middle;
                    }

.dashboard-page > section.flop-scorers ol li a > .name {
                        flex: 1 0 max-content;
                    }

.dashboard-page > section.flop-scorers ol li a > .score {
                        color: #F20000;
                        font-weight: 500;
                    }

.dashboard-page > section.flop-scorers ol li a > .score > svg {
                            vertical-align: middle;
                            margin-right: 8px;
                        }

.dashboard-page > section.market-mood .gauge-chart {
            margin-left: auto;
            margin-right: auto;
            max-width: 300px;
        }

.dashboard-page > section.market-mood .subtitle {
            text-align: center;
        }

.dashboard-page > section.market-mood .subtitle .fear-and-greed-index-value {
                font-size: 1.125rem;
                font-weight: 500;
            }

.dashboard-page > section.market-mood .subtitle .fear-and-greed-index-out-of {
                font-size: 0.875rem;
                font-weight: 400;
                color: var(--secondary-text-color);
            }

.dashboard-page > section.breaking-news {
        transition: background-color 0.2s ease-in-out;
    }

.dashboard-page > section.breaking-news:hover {
            background-color: var(--hover-background);
        }

.dashboard-page > section.breaking-news > a {
            display: grid;
            grid-template:
                "breaking date" auto
                "headline headline" 1fr
                / 1fr auto;
        }

.dashboard-page > section.breaking-news > a > span {
                grid-area: breaking;
            }

.dashboard-page > section.breaking-news > a > time {
                grid-area: date;
            }

.dashboard-page > section.breaking-news > a > h2 {
                grid-area: headline;
            }

.dashboard-page > section.more-news > ol {
            display: grid;
            grid-auto-flow: row;
            grid-gap: 16px;
            gap: 16px;
        }

.dashboard-page > section.more-news > ol > li {
                border: var(--border);
                border-radius: 10px;
                background-color: white;
                transition: background-color 0.2s ease-in-out;
            }

.dashboard-page > section.more-news > ol > li:hover {
                    background-color: var(--hover-background);
                }

.dashboard-page > section.more-news > ol > li > a {
                    display: grid;
                    grid-template:
                        "img      source   date" auto
                        "headline headline headline" 1fr
                        "subtitle subtitle subtitle" auto
                        / 32px auto 1fr;
                    grid-gap: 8px;
                    gap: 8px;
                    padding: 16px 16px 24px 16px;
                    border-radius: 8px;
                }

.dashboard-page > section.more-news > ol > li > a > img {
                        grid-area: img;
                        height: 20px;
                        width: 20px;
                    }

.dashboard-page > section.more-news > ol > li > a > time {
                        grid-area: date;
                    }

.dashboard-page > section.more-news > ol > li > a > .source {
                        grid-area: source;
                    }

.dashboard-page > section.more-news > ol > li > a > .source,.dashboard-page > section.more-news > ol > li > a > time {
                        color: var(--secondary-text-color);
                        font-size: 0.875rem;
                        font-weight: 400;
                    }

.dashboard-page > section.more-news > ol > li > a > h3 {
                        grid-area: headline;
                        margin: 0;
                        font-size: 1rem;
                        font-family: "Noto Serif", serif;
                    }

.dashboard-page > section.more-news > ol > li > a > .subtitle {
                        grid-area: subtitle;
                        color: #172A3A;
                    }

.dashboard-page > section.more-news > ol > li > a > .subtitle > svg {
                            vertical-align: bottom;
                            height: 20px;
                            width: 20px;
                            transform: rotate(180deg);
                        }

.dashboard-page > section.subscription {
        background-color: #086375;
        color: white;
    }

.dashboard-page > section.subscription > ul > li {
                padding-left: 1ch;
                list-style-image: url(https://assets.insiderpie.de/icons/check-white.svg);
                margin-top: 16px;
            }

.dashboard-page > section.subscription > div:first-child {
            color: #086375;
            background-color: white;
            height: 32px;
            width: 32px;
            border-radius: 100%;
        }

.dashboard-page > section.subscription > div:first-child > svg {
                vertical-align: middle;
                height: 16px;
                width: 16px;
                margin: 8px;
            }

.dashboard-page > section.subscription > span:nth-child(2) {
            float: right;
            margin-top: calc(-16px - 0.5lh);
        }

.dashboard-page header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

.dashboard-page header h2 {
            flex: 1 0 auto;
            margin: 0;
        }

.dashboard-page h2 {
        font-size: 1.125rem;
        font-weight: 500;
    }

.dashboard-page a:not(.positive):not(.negative) {
        color: black;
    }

.dashboard-page a {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.dashboard-page ol {
        padding: 0;
        margin: 0;
    }

.dashboard-page li {
        list-style: none;
        margin: 0;
    }

@media screen and (min-width: 1200px) {
    .dashboard-page {
        margin: 16px 20px;
        grid-template:
            "top-investor-tx    stock-of-the-day" auto
            "top-scorers        top-scorers"      auto
            "market-mood        flop-scorers"     auto
            "top-value-scorers top-growth-scorers"  auto
            "more-news          more-news"        auto
            "subscription       subscription"     auto
            / 1fr               1fr;
    }

        .dashboard-page > section {
            border-radius: 10px;
            padding: 24px;
        }
                    .dashboard-page > section > header > a > span:has( + img[src="https://assets.insiderpie.de/icons/down-arrow.svg"]) {
                        display: inline;
                    }
            .dashboard-page > section.top-scorers > ol,.dashboard-page > section.top-value-scorers > ol,.dashboard-page > section.top-growth-scorers > ol,.dashboard-page > section.breaking-news > ol,.dashboard-page > section.more-news > ol {
                grid-auto-flow: column;
            }
                            .dashboard-page > section.top-scorers > ol > li > a > .score > svg,.dashboard-page > section.flop-scorers > ol > li > a > .score > svg {
                                display: inline;
                                vertical-align: middle;
                                margin: 0;
                                margin: initial;
                                margin-right: 6px;
                            }
                        .dashboard-page > section.top-scorers > ol > li > a > .rank,.dashboard-page > section.top-value-scorers > ol > li > a > .rank,.dashboard-page > section.top-growth-scorers > ol > li > a > .rank {
                            bottom: -28px;
                        }
                            .dashboard-page > section.top-scorers > ol > li > a > .score > svg,.dashboard-page > section.top-value-scorers > ol > li > a > .score > svg,.dashboard-page > section.top-growth-scorers > ol > li > a > .score > svg {
                                display: inline;
                                vertical-align: middle;
                                margin: 0;
                                margin: initial;
                                margin-right: 6px;
                            }

                .dashboard-page > section.top-scorers > ol > li:first-child {
                    order: 3;
                }

                .dashboard-page > section.top-value-scorers > ol > li:first-child {
                    order: 3;
                }

                .dashboard-page > section.top-growth-scorers > ol > li:first-child {
                    order: 3;
                }

                .dashboard-page > section.top-scorers > ol > li:nth-child(2) {
                    order: 2;
                }

                .dashboard-page > section.top-value-scorers > ol > li:nth-child(2) {
                    order: 2;
                }

                .dashboard-page > section.top-growth-scorers > ol > li:nth-child(2) {
                    order: 2;
                }

                .dashboard-page > section.top-scorers > ol > li:nth-child(3) {
                    order: 4;
                }

                .dashboard-page > section.top-value-scorers > ol > li:nth-child(3) {
                    order: 4;
                }

                .dashboard-page > section.top-growth-scorers > ol > li:nth-child(3) {
                    order: 4;
                }

                .dashboard-page > section.top-scorers > ol > li:nth-child(4) {
                    display: inline;
                    display: initial;
                    order: 1;
                }

                .dashboard-page > section.top-value-scorers > ol > li:nth-child(4) {
                    display: inline;
                    display: initial;
                    order: 1;
                }

                .dashboard-page > section.top-growth-scorers > ol > li:nth-child(4) {
                    display: inline;
                    display: initial;
                    order: 1;
                }

                .dashboard-page > section.top-scorers > ol > li:nth-child(5) {
                    display: inline;
                    display: initial;
                    order: 5;
                }

                .dashboard-page > section.top-value-scorers > ol > li:nth-child(5) {
                    display: inline;
                    display: initial;
                    order: 5;
                }

                .dashboard-page > section.top-growth-scorers > ol > li:nth-child(5) {
                    display: inline;
                    display: initial;
                    order: 5;
                }
}

@media screen and (min-width: 1200px) and (max-width: 1599px) {    
        .dashboard-page > .breaking-news {
            display: none;
        }
}

@media screen and (min-width: 1600px) {
    .dashboard-page {
        margin: 16px 20px;
        grid-template:
            "top-investor-tx stock-of-the-day  breaking-news"      auto
            "top-scorers     top-scorers       market-mood"        auto
            "flop-scorers    top-value-scorers top-growth-scorers" auto
            "more-news       more-news         subscription"       auto
            / 1fr            1fr                1fr;
    }

        .dashboard-page > section {
            border-radius: 10px;
            padding: 24px;
        }

        .dashboard-page > section.top-investor-tx {
            display: grid;
            grid-template: 
                "header footer" auto
                "ol     ol"     1fr
                / 1fr     auto;
            grid-row-gap: 24px;
            row-gap: 24px;
        }
            .dashboard-page > section.top-investor-tx > header {
                grid-area: header;
                margin-bottom: 0;
            }
                .dashboard-page > section.top-investor-tx > header > h2 {
                    flex: 1 0 min-content;
                }
            .dashboard-page > section.top-investor-tx > ol {
                grid-area: ol;
            }
            .dashboard-page > section.top-investor-tx > footer {
                grid-area: footer;
                margin-top: 0;
            }
}

.blur {
    position: relative;
    cursor: pointer;
}

.blur > * {
        filter: blur(20px) saturate(50%);
    }

.blur::after {
        /* content: "Dieser Bereich ist exklusiv für Advanced-Abonnement freigeschalten. Upgrade jetzt, um Zugriffe auf alle Funktionen zu erhalten!"; */
        /* content: "🔒"; */
        content: "";
        background-image: url("https://assets.insiderpie.de/icons/lock.svg");
        background-size: 4rem;
        background-repeat: no-repeat;
        background-position: center;
        filter: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        padding: 16px;
        width: 100%;
        text-align: center;
        font-size: 2.5rem;
        /* display: flex;
        justify-content: center;
        align-items: center; */
    }

/* 
 * The slideshow of screenshots on the pricing page could cause a quickly
 * appearing and disappearing scrollbar on this page, which leads to content
 * shifts on the x axis. To avoid that, we always show the scrollbar on the 
 * pricing page.
 */

body:has(.pricing-page) {
    overflow-y: scroll;
}

.pricing-page {
    display: grid;
    grid-template:
        "heading" auto
        "form" auto
        "description" auto
        "screenshots" 1fr
        / 100%;
    grid-gap: 16px;
    gap: 16px;
    margin: 16px;
}

.pricing-page > h1 {
        grid-area: heading;
    }

.pricing-page > form {
        grid-area: form;
    }

.pricing-page > form > label:not(:last-child) {
            margin-bottom: 1ch;
        }

.pricing-page > .pricing-card {
        grid-area: description;
    }

.pricing-page > .pricing-card .feature {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            margin-bottom: 8px;
        }

.pricing-page > .pricing-card .price-discounted {
            font-size: 1.5rem;
        }

.pricing-page > .screenshot-gallery {
        grid-area: screenshots;
    }

.pricing-page .checkout-loading {
        height: 101px;
        width: 100%;
    }

.pricing-page button {
        border: var(--border);
        border-radius: 8px;
        padding: 12px 16px;
        background-color: var(--primary-background);
        color: white;
        transition: background-color 0.2s ease-in-out;
    }

.pricing-page button:hover {
            background-color: var(--primary-hover-background);
        }

.pricing-page dialog input[type="text"] {
            display: block;
            text-transform: uppercase;
        }

@media screen and (min-width: 1200px) {
    .pricing-page {
        grid-template:
            "heading     screenshots" auto
            "form        screenshots" auto
            "description screenshots" 1fr
            / 1fr auto;
        margin: 16px 20px;
    }
}