html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.login-box {
    margin-top: 2rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Dark-mode toggle, a row of the account flyout. The icon shows a sun while light mode is active
   (press to switch to dark) and a moon while dark mode is active - it matches data-bs-theme on
   <html>, set by wwwroot/js/interop.js and initialized before first paint by the inline script in
   App.razor's <head>. It is in app.css rather than in a scoped stylesheet because the rules key off
   an attribute on <html>, which is outside every component's scope. */
#theme-toggle.theme-toggle-btn {
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#theme-toggle .theme-icon-dark {
    display: none;
}

html[data-bs-theme="dark"] #theme-toggle .theme-icon-light {
    display: none;
}

html[data-bs-theme="dark"] #theme-toggle .theme-icon-dark {
    display: inline-block;
}

/* Deployment logs and config-file views: wrap long lines within their own box instead of forcing
   the whole page to scroll horizontally, and cap the height so a long log stays scrollable in
   place - keeps this readable regardless of how wide the browser window is. */
.deployment-log,
.config-file-content {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 32rem;
    overflow-y: auto;
}
/* The compiler's own output, shown as it is after a failed build: long, wide, and worth keeping
   inside its own box rather than letting it stretch the page. */
.build-output {
    max-height: 20rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* The frame over a picture being sized in a text box (bopRichText in interop.js). Global rather than
   scoped: the frame is put on the page's body by the script, outside every component, so no scope id
   ever reaches it. Fixed over the picture, handles on its corners, its width in the corner. */
.bop-img-resizer {
    position: fixed;
    z-index: 1080;
    border: 1px dashed var(--bs-primary);
    pointer-events: none;
}

.bop-img-handle {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-primary);
    border-radius: 2px;
    pointer-events: auto;
    touch-action: none;
}

.bop-img-handle-nw { left: -0.4rem; top: -0.4rem; cursor: nwse-resize; }
.bop-img-handle-ne { right: -0.4rem; top: -0.4rem; cursor: nesw-resize; }
.bop-img-handle-sw { left: -0.4rem; bottom: -0.4rem; cursor: nesw-resize; }
.bop-img-handle-se { right: -0.4rem; bottom: -0.4rem; cursor: nwse-resize; }

.bop-img-size {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    padding: 0 0.3rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.2rem;
}

.bop-img-selected {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* A row a double-click selects (Select ISV, Select team) - say so with the pointer, and keep the
   double-click from selecting the word under it on the way. */
[data-dblclick-submit] {
    cursor: pointer;
    user-select: none;
}