.external-shares-modal {
    --external-shares-accent: var(--d4b-cyan, #00d4ff);
    --external-shares-bg: var(--d4b-bg, #101418);
    --external-shares-surface: var(--d4b-surface, #171d23);
    --external-shares-surface-alt: var(--d4b-surface-alt, #202832);
    --external-shares-text: var(--d4b-text, #f4f7fb);
    --external-shares-muted: var(--d4b-muted, #a8b3bd);
    --external-shares-border: color-mix(in srgb, var(--external-shares-accent) 35%, transparent);

    display: none;
    position: fixed;
    z-index: 10000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
}

.external-shares-modal .external-shares-modal-content {
    background: rgba(0, 0, 0, 0.72);
    color: var(--external-shares-text);
    margin: auto;
    padding: 24px;
    border: 1px solid var(--external-shares-border);
    border-radius: 14px;
    width: 80%;
    contain: content;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.external-shares-modal .external-shares-modal-close {
    color: var(--external-shares-muted);
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.external-shares-modal .external-shares-modal-content h1,
.external-shares-modal .external-shares-modal-content h2,
.external-shares-modal .external-shares-modal-content h3 {
    color: var(--external-shares-text);
}

.external-shares-modal .external-shares-modal-content #sharesHeadline {
    color: var(--external-shares-accent);
    margin-top: 0;
    margin-right: 2rem;
    border-bottom: 1px solid var(--external-shares-border);
    padding-bottom: 0.6rem;
}

.external-shares-modal .external-shares-modal-content .fieldName {
    float: left;
    font-weight: bold;
    width: 100%;
    margin-top: 0.5em;
    color: var(--external-shares-muted);
}

.external-shares-modal .external-shares-modal-content .fieldValue {
    padding-bottom: .5em;
    color: var(--external-shares-text);
}

.external-shares-modal .external-shares-modal-content div:has(.fieldName) {
    min-height: 90px;
}

.external-shares-modal .external-shares-modal-content .fieldValue img {
    max-width: 1em;
}

.external-shares-modal .external-shares-modal-content hr {
    float: left;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 0;
    border-top: 1px solid var(--external-shares-border);
}

.external-shares-modal .external-shares-modal-content input,
.external-shares-modal .external-shares-modal-content textarea,
.external-shares-modal .external-shares-modal-content button,
.external-shares-modal .external-shares-modal-content select {
    border-radius: 10px;
}

.external-shares-modal .external-shares-modal-content input,
.external-shares-modal .external-shares-modal-content textarea,
.external-shares-modal .external-shares-modal-content select {
    background: var(--external-shares-bg);
    color: var(--external-shares-text);
    border: 1px solid var(--external-shares-border);
}

.external-shares-modal .external-shares-modal-content input:focus,
.external-shares-modal .external-shares-modal-content textarea:focus,
.external-shares-modal .external-shares-modal-content select:focus {
    outline: 2px solid color-mix(in srgb, var(--external-shares-accent) 45%, transparent);
    outline-offset: 2px;
}

.external-shares-modal .external-shares-modal-content button {
    background: var(--external-shares-accent);
    color: #061014;
    border: 1px solid var(--external-shares-accent);
    font-weight: 700;
}

.external-shares-modal .external-shares-modal-content button:hover,
.external-shares-modal .external-shares-modal-content button:focus {
    background: color-mix(in srgb, var(--external-shares-accent) 82%, #ffffff);
    color: #061014;
}

.external-shares-modal .external-shares-modal-close:hover,
.external-shares-modal .external-shares-modal-close:focus {
    color: var(--external-shares-accent);
    text-decoration: none;
    cursor: pointer;
}

.external-shares-modal button.left {
    float: left;
    margin-right: 8px;
}

.external-shares-modal button.right {
    float: right;
    margin-left: 8px;
}

@media screen and (max-width: 780px) {
    .external-shares-modal {
        padding-top: 32px;
    }

    .external-shares-modal .external-shares-modal-content {
        width: 95%;
        padding: 18px;
    }
}