:root {
    --emsurge-dark-background: rgb(17, 23, 32); /* Make sure this matches the value in the EmsurgeTheme. TODO: We need to find a way to avoid this duplication. */
    --large-font-size: 1.6rem;
    --emsurge-dim-font-color: #d6d7d2;
    --emsurge-golden-bright-color: #9A6D1C;
    --emsurge-url-color: #5b9eeb;
    --emsurge-container-border-dim-color: #2f3746;
    --emsurge-container-border-bright-color: #C7C8C9;
    --emsurge-border-radius: 10px;
    --emsurge-content-font-size: 1rem;
    --emsurge-global-subtitles-font-size: 1.3rem;
    --emsurge-titles-font-size: 1.3rem;
    --emsurge-large-titles-font-size: 1.3rem;
    --emsurge-content-subtitles-font-size: 1rem;
    --emsurge-highlighted-content-font-size: 1.6rem;
    --emsurge-chip-font-size: 1rem;
    --emsurge-figure-description-font-size: 0.8em;
    --emsurge-unit-of-measure-font-size: 0.8em;
    --emsurge-step-navigation-section-title-font-size: 1.3rem;
    --emsurge-step-navigation-subsection-title-font-size: 1.1rem;
    --emsurge-standard-padding: 1rem;
    --emsurge-large-padding: 2rem;
    --emsurge-reduced-padding: 0.3rem;
    --emsurge-minimum-padding: 0.1rem;
    --emsurge-reduced-margin: 0.3rem;
    --emsurge-card-background-color-darker: #182431;
    --emsurge-card-background-color-lighter: #1e2d3a;
    --emsurge-dashboard-section-subheader-background-color: #182431;
    --emsurge-dialog-height: calc(97vh - var(--mud-appbar-height));
    --emsurge-dialog-top-margin: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4);
    --emsurge-dialog-left-margin: calc(var(--mud-drawer-width-mini-left) + var(--emsurge-standard-padding));
    --emsurge-dialog-right-margin: var(--emsurge-standard-padding);
    --emsurge-company-code-color: #6bc4d7;
    --emsurge-main-content-height: calc(100vh - 1lh);
    --scrollbar-width: 2px;
    --emsurge-errorboundary-top-background-color: rgba(17, 23, 32, 0.2);
    --emsurge-errorboundary-bottom-background-color: rgba(30, 45, 58, 0.4);
    --mud-button-primary-throbber-highlight-color: #ab936a;
    --mud-button-secondary-throbber-highlight-color: #4a4a4a;
    /**/
    --emsurge-marketplace-red-color: #f84c64;
    --emsurge-marketplace-background-color: #E8E1DC;
    --emsurge-marketplace-larger-font-size: 2.6rem;
    --emsurge-marketplace-large-font-size: 2.2rem;
    --emsurge-marketplace-medium-font-size: 1.5rem;
}

/*
    Styles for html, body, #app and a few others used in the splash page are embedded in index.html.
    This is so that if for whatever reason we cannot load the CSS, the resulting index.html page at least looks presentable.
    Any changes to html and body styles here in the CSS WILL BE OVERRIDDEN by index.html
*/

/*html, body {
}
*/

#allocation-table td, #allocation-table th {
    font-size: 1.3rem;
}

.full-screen-app-container {
}

header.full-screen-sticky-header {
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
    position: sticky; /* We want to use sticky here instead of fixed so that the rest of the content flows under the header. Otherwise, the go under the header and the scroll bar does too. */
    top: 0;
    grid-column-start: 1;
    grid-row-start: 1;
}

main.full-screen-app-main-content-container {
    height: 100%;
    width: 100%;
    grid-column-start: 1;
    grid-row-start: 2;
}

/* Dialogs */
dialog::backdrop {
    /*background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 20px );*/
    background-color: white;
    backdrop-filter: blur(3px);
}

dialog[open].dialog-full-screen {
    display: flex;
    width: 85vw;
    height: 85vh;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-screen-centered-container {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* Marketplace */
.solid-js-modal {
    border: none;
    outline: none;
    margin: 20rem auto;
    border-radius: var(--emsurge-border-radius);
    background-color: var(--emsurge-marketplace-primary-color);
    padding: 2rem;
    overflow: hidden;
    color: #fff;
}

    .solid-js-modal::backdrop {
        background-color: hsla(0, 0%, 0%, 0.5);
    }

.marketplace-action-button {
    transition: background-color 0.3s ease;
    border: 1px solid var(--emsurge-marketplace-highlight-color);
    color: #fff;
}

    .marketplace-action-button:hover {
        background-color: var(--emsurge-marketplace-highlight-color);
    }

    .marketplace-action-button:disabled {
        background-color: #444;
        border-color: #444;
        color: #888 !important;
        cursor: default;
    }

div.loader {
    width: 60px;
    aspect-ratio: 4;
    background: radial-gradient(circle closest-side,#000 90%,#0000) 0/calc(100%/3) 100% space;
    clip-path: inset(0 100% 0 0);
    animation: loaderKeyframes 1s steps(4) infinite;
}

@keyframes loaderKeyframes {
    to {
        clip-path: inset(0 -34% 0 0)
    }
}

.marketplace-number-field::-webkit-outer-spin-button,
.marketplace-number-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.marketplace-number-field {
    -moz-appearance: textfield;
}

#project-search::placeholder {
    font-style: italic;
}

#basket-list .selected {
    list-style-type: none;
    font-weight: 600;
}

#basket-list li {
    cursor: pointer;
}

.ordertype-filter-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    user-select: none;
}

    .ordertype-filter-button.selected {
        border: none;
        background-color: var(--emsurge-marketplace-blue-color);
        font-weight: 800;
        color: #fff;
    }

.checked-item {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    pointer-events: none;
}

    .checked-item::after {
        content: "✔";
        position: absolute;
        top: -1px;
        left: 3px;
        font-size: 10px;
        color: var(--emsurge-golden-bright-color);
    }

.project-highlights-table th {
    font-weight: 100;
    text-align: left;
    padding: 1rem;
}

.project-highlights-table td {
    padding: 1rem;
}

.project-highlights-table tr {
    border-bottom: 1px solid #000
}

/* Blazor loading progress */
div#loading-linear-progress {
    background: var(--emsurge-card-background-color-darker);
    width: 50vw;
    height: 1.5rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

    div#loading-linear-progress:after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--emsurge-golden-bright-color);
        scale: var(--blazor-load-percentage, 0%) 100%;
        transform-origin: left top;
        transition: scale ease-out 0.5s;
    }

@counter-style dotless-item {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: " ";
}

/* Trying to manually replicate the style for a MudButton BEFORE MudBlazor has been loaded. */
.html-button {
    background-color: rgb(154, 109, 28);
    color: white;
    padding: 6px 16px;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .02857em;
    text-transform: uppercase;
    min-width: 64px;
    box-sizing: border-box;
    transition: background-color 250ms cubic-bezier(.4,0,.2,1) 0ms,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,border 250ms cubic-bezier(.4,0,.2,1) 0ms;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    border: 0;
    outline: 0;
    align-items: center;
    user-select: none;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
}

/******* Our own *********/
.lng-standardized-content {
    color: #777;
}

div.premium {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='0.6' fill='%239A6D1C' viewBox='0 0 300 300'%3E%3Cpath d='M149.9,0C67.3,0,.33,66.96,.33,149.57s66.96,149.57,149.57,149.57,149.57-66.96,149.57-149.57S232.51,0,149.9,0Zm85.07,179.36c-.11,6.89-.26,13.77-.64,20.68-.19,3.36-2.81,6.07-6.16,6.39-.21,.02-.42,.03-.64,.03-3.09,0-5.84-2.11-6.6-5.16-1.66-6.73-3.1-13.46-4.48-20.21-.91-4.34-1.72-8.7-2.54-13.08l-1.32-7.01c-.22-1.25-.44-2.5-.65-3.73-1.35,2.05-2.7,4.1-4.06,6.14l-24.69,36.06c-5.03,7.24-15.03,9.05-22.28,4.04-.83-.58-1.6-1.25-2.25-1.9-6.52-6.61-12.96-13.22-19.33-19.92l-18.96-20.15c-6.29-6.81-12.49-13.67-18.66-20.56-3.44-3.85-6.83-7.75-10.21-11.66l-18.55,16.99c-3.27,2.89-6.52,5.72-9.84,8.49-2.58,2.17-6.36,2.1-8.88-.15-2.51-2.24-3.01-5.98-1.16-8.8,2.37-3.62,4.8-7.17,7.28-10.7l15-20.69c1.97-2.72,4.05-5.41,6.13-8.11l1.61-2.08c3.9-5.08,11.22-6.06,16.32-2.15l1.14,.96c7.01,6.08,13.97,12.19,20.83,18.42,6.84,6.25,13.64,12.51,20.37,18.86l19.98,19.15c2.06,2,4.1,4.02,6.14,6.04l14.41-19.97c8.69-11.79,17.43-23.48,26.41-34.98,5.18-6.64,13.92-7.72,19.94-3.03,3.23,2.52,5.17,6.31,5.33,10.4l.13,3.47c.23,5.66,.45,11.3,.55,16.98l.14,6.97c.1,4.46,.19,8.93,.25,13.4v7.34c.02,4.41,.03,8.82-.05,13.23Z'%3E%3C/path%3E%3C/svg%3E%0A");
    background-position-x: 3px;
    background-position-y: 5px;
    background-repeat: no-repeat;
    background-size: 1rem;
}

div.vcentered {
    display: flex;
    align-items: center;
}


/* See https://stackoverflow.com/a/33061059/257372 for details */
.clickable {
    cursor: pointer;
}

.strict-data-container {
    /* These conditions are required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    /* ********* */

    text-overflow: ellipsis;
    /* These make it easier to align elements vertically by making sure all data-containers have a 100% height and width */
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Use this class to make sure a div takes exactly the space it has been assigned by its parent, and vertically centers all content */
div.strict-container {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    align-content: center;
    align-items: center;
    white-space: nowrap;
}

div.full-screen-container {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    height: 100%;
}

div.top-aligned {
    align-content: start;
    align-items: start;
}

/* Use this class to allow a div to expand its **height** (not its width) according to its content, making sure it takes 100% of the available width */
div.fluid-container {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    display: grid;
    grid-auto-rows: auto;
    align-content: start;
    white-space: normal;
}

div.scrollable {
    overflow: auto;
}

/* Use this class to make sure a div vertically aligns all its content, taking 100% of the available **width** (not height) */
div.strict-card-container {
    white-space: nowrap;
    display: flex; /* flex is necessary for the vertical alignment to work as expected, but it can be replaced by grid using the style property of the div element in question */
    align-content: center;
    align-items: center;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

@keyframes loading-card-animation {
    to {
        background-position-x: -200%;
    }
}

.loading-card {
    background: linear-gradient(110deg, var(--emsurge-card-background-color-darker) 8%, var(--emsurge-card-background-color-lighter) 18%, var(--emsurge-card-background-color-darker) 33%);
    background-size: 200% 100%;
    animation: 1.5s loading-card-animation linear infinite;
}

/* Common style for a highlighted div */
div.highlighted {
    border: 2px solid red;
    border-radius: var(--emsurge-border-radius);
}

div.bordered {
    border-width: 1px;
    border-style: solid;
}

table.bordered th, table.bordered td {
    border-bottom: solid 1px var(--emsurge-golden-bright-color);
}

table.striped tr:nth-child(odd) {
    background-color: var(--emsurge-card-background-color-lighter);
}

table.comfortable th, table.comfortable td {
    padding: var(--emsurge-standard-padding);
}

/* A list rendered without any symbols in front of the items*/
ol.dotless {
    list-style: dotless-item;
}

div.rounded-corners {
    border-radius: var(--emsurge-border-radius);
}

.dialog-options-selection {
    padding-top: 10vh;
    padding-left: 35%;
    padding-right: 35%;
}

.dialog-options-selection-option {
    margin-bottom: 2.5rem;
    border-color: var(--emsurge-container-border-dim-color) !important;
}

    .dialog-options-selection-option:hover {
        color: var(--emsurge-golden-bright-color) !important;
        border-color: var(--emsurge-golden-bright-color) !important;
        border-width: 2px;
    }

.non-white-text {
    color: var(--non-white-text-color)
}

/* Scrollbar customization */
/* Good documentation available at https://blog.esteetey.dev/make-your-website-stand-out-with-a-custom-scrollbar */
div.scrollable::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: calc(3*var(--scrollbar-width));
}

/* Handle on hover */
div.scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--emsurge-golden-bright-color);
}

div.scrollable::-webkit-scrollbar-button {
    width: 2rem;
    height: 2rem;
    background-color: var(--emsurge-golden-bright-color);
}

    div.scrollable::-webkit-scrollbar-button:hover {
    }

/* <select> customisation: idea taken from https://moderncss.dev/custom-select-styles-with-pure-css/ -- This doesn't work yet!!! */
.user-entity-select {
    appearance: none;
    border: none;
    background: none;
    font-size: 0.7rem;
    color: var(--emsurge-golden-bright-color);
}

/* SVGChart */
g {
    pointer-events: all;
}

    g.SVGChart-price {
        cursor: pointer;
        opacity: 1;
    }

        g.SVGChart-price:hover {
            opacity: 0.8;
        }

/* Footer Ideas from https://www.codeinwp.com/snippets/sticky-footer-with-css/ */
footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    text-align: center;
    font-size: xx-small;
    color: var(--non-white-text-color);
}

@media screen and (max-width: 900px) {
    footer {
        display: none;
    }
}

/* Animation on a MudButton when it takes a while to complete the action OnClick */
.mud-button-filled-primary.mud-button-throbber {
    background: linear-gradient(110deg, var(--mud-palette-primary) 8%, var(--mud-button-primary-throbber-highlight-color) 18%, var(--mud-palette-primary) 33%);
    background-size: 200% 100%;
    animation: 1.5s loading-card-animation linear infinite;
}

.mud-button-filled-secondary.mud-button-throbber {
    background: linear-gradient(110deg, var(--mud-palette-secondary) 8%, var(--mud-button-secondary-throbber-highlight-color) 18%, var(--mud-palette-secondary) 33%);
    background-size: 200% 100%;
    animation: 1.5s loading-card-animation linear infinite;
}

@keyframes button-throbber-animation {
    to {
        background-position-x: -200%;
    }
}

/******* Our own - animations! *********/
@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}

@property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}

:root {
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;
    --c1: var(--emsurge-golden-bright-color);
    --c2: rgba(168, 239, 255, 0.1);
}

.animated-border {
    border: 2px solid;
    border-radius: var(--mud-default-borderradius);
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
    animation: borderRotate var(--d) linear infinite forwards;
}

    .animated-border:nth-child(2) {
        border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
        animation: borderRadial var(--d) linear infinite forwards;
    }

@keyframes borderRotate {
    100% {
        --angle: 420deg;
    }
}

@keyframes borderRadial {
    20% {
        --gradX: 100%;
        --gradY: 50%;
    }

    40% {
        --gradX: 100%;
        --gradY: 100%;
    }

    60% {
        --gradX: 50%;
        --gradY: 100%;
    }

    80% {
        --gradX: 0%;
        --gradY: 50%;
    }

    100% {
        --gradX: 50%;
        --gradY: 0%;
    }
}

/********** Our own - Blazor framework ***********/

#blazor-error-ui {
    color: black;
}

    #blazor-error-ui a {
        color: black;
    }


.throbbing-logo-container img {
    animation: throbbing-logo-container 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

    .throbbing-logo-container img:after,
    .throbbing-logo-container img:before {
        left: -24px;
        border-radius: 50% 0 0 50%;
    }

    .throbbing-logo-container img:after {
        top: -24px;
        border-radius: 50% 50% 0 0;
    }

.throbbing-logo-container svg {
    animation: throbbing-logo-container 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

    .throbbing-logo-container svg:after,
    .throbbing-logo-container svg:before {
        left: -24px;
        border-radius: 50% 0 0 50%;
    }

    .throbbing-logo-container svg:after {
        top: -24px;
        border-radius: 50% 50% 0 0;
    }

@keyframes throbbing-logo-container {
    0% {
        transform: scale(0.95);
    }

    5% {
        transform: scale(1.1);
    }

    39% {
        transform: scale(0.85);
    }

    45% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(0.9);
    }
}

.pt-05,
.py-05 {
    padding-top: 2px !important;
}

.pr-05,
.px-05 {
    padding-right: 2px !important;
}

.pl-05,
.px-05 {
    padding-left: 2px !important;
}

.pb-05,
.py-05 {
    padding-bottom: 2px !important;
}

.ps-05 {
    padding-inline-start: 2px !important;
}

.pe-05 {
    padding-inline-end: 2px !important;
}

.pa-05 {
    padding: 2px !important;
}

.mt-05,
.my-05 {
    margin-top: 2px !important;
}

.mr-05,
.mx-05 {
    margin-right: 2px !important;
}

.ml-05,
.mx-05 {
    margin-left: 2px !important;
}

.mb-05,
.my-05 {
    margin-bottom: 2px !important;
}

.ms-05 {
    margin-inline-start: 2px !important;
}

.me-05 {
    margin-inline-end: 2px !important;
}

.ma-05 {
    margin: 2px !important;
}

@media print {
    body {
        visibility: hidden;
    }

    div.mud-popover-provider {
        display: none;
    }

    div.mud-dialog, div.mud-dialog-container {
        visibility: hidden;
        margin: 0;
        border-radius: 0;
    }

    div.printable {
        visibility: visible;
        position: fixed;
        left: 0;
        top: 0;
    }
}

@media screen {
    div.printable {
        display: none;
    }
}