@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

:root {
    --text-normal: #eee;
    --text-anchor: #3C91E6;
    --text-disabled: #888;
    --button-blue: #183564;
    --button-blue-edge: #183865;
    --button-lightblue: #244882;
    --button-lightblue-edge: #254B87;
    --button-orange-dark: #332B1E;
    --button-orange-dark-edge: #3D3324;
    --button-orange: #5B4412;
    --button-orange-edge: #684E14;
    --border-side: #21202322;
    --background-gradient-top: rgba(128, 128, 128, 0.25);
    --background-gradient-bottom: rgba(5, 46, 94, 0.25);
}

a, button, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

ul {
    list-style-type: none;
}

button {
    background-color: transparent;
    color: var(--text-normal);
}

body {
    font-family: 'Kanit', Rubik, sans-serif;
    background: linear-gradient(to bottom, var(--background-gradient-top), var(--background-gradient-bottom)), url("../img/bg.jpg");
    background-position: center;
    background-size: cover;
}

h1, h2, h3 {
    outline: none;
}

.section {
    background: linear-gradient(90deg, rgba(20,21,24,0.95) 0%, rgba(25,26,31,0.95) 100%);
    border-left: 0.2rem solid var(--border-side);
    border-right: 0.2rem solid var(--border-side);
    border-radius: 0.3rem / 0.2rem;
    padding: 0.8rem;
    backdrop-filter: blur(5px);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
    transition: 0.1s all ease;
    background-blend-mode: lighten;
    box-sizing: border-box;
    color: var(--text-normal);
}

a {
    text-decoration: none;
}

    a.button:hover {
        background: linear-gradient(90deg, var(--button-blue-edge) 0%, var(--button-blue) 2%, var(--button-blue) 98%, var(--button-blue-edge) 100%);
        cursor: pointer;
    }

.button {
    display: flex;
    color: var(--text-normal);
    border: none;
    background: linear-gradient(90deg, rgba(20,21,24,0.5) 0%, rgba(16,17,20,0.6) 2%, rgba(17,18,20,0.6) 98%, rgba(21,23,26,0.5) 100%);
    padding: 0.5rem 0.7rem;
    border-radius: 0.2rem;
    align-items: center;
}

    .button:disabled {
        color: gray;
        cursor: not-allowed;
    }

    .button:hover:enabled {
        background: linear-gradient(90deg, var(--button-blue-edge) 0%, var(--button-blue) 2%, var(--button-blue) 98%, var(--button-blue-edge) 100%);
        cursor: pointer;
    }

.button-toggled {
    background: linear-gradient(90deg, var(--button-blue-edge) 0%, var(--button-blue) 2%, var(--button-blue) 98%, var(--button-blue-edge) 100%);
}

.button-text {
    overflow: hidden;
    white-space: nowrap;
}

.button-icon {
    height: 2rem;
    margin-right: 0.5rem;
}

.button-delete {
    justify-content: center;
    font-size: 1.3rem;
    color: indianred;
    cursor: pointer;
    transition: 0.1s;
}

    .button-delete:hover:enabled {
        color: darkred;
    }

.button-copy-small {
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: 0.1s;
}

    .button-copy-small:hover:enabled {
        color: #ACF;
        filter: drop-shadow(1px 1px 2px #FFF5);
    }

.button-centered {
    width: 100%;
    justify-content: center;
}

.text-align-left {
    text-align: left;
}

.section.hoverable:hover, .section.hovered {
    background-color: var(--button-blue);
    border-left: 0.2rem solid var(--button-blue-edge);
    border-right: 0.2rem solid var(--button-blue-edge);
    cursor: pointer;
}

input.file {
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    position: absolute;
    cursor: pointer;
}

.centered-note {
    align-items: center;
    text-align: center;
    color: gray;
    justify-content: center;
}

#blazor-error-ui {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }


.element-box {
    color: gray;
    font-weight: bold;
    background-color: #22262A88;
    padding: 5px 0.5rem;
    border-radius: 0.2rem;
    transition: 0.1s;
    animation: fadeIn 0.3s;
}

    .element-box:empty {
        padding: 0.81rem;
    }

    .element-box.hoverable:hover {
        cursor: pointer;
        background-color: #42495188;
    }

    .element-box.utility {
        box-shadow: inset 0px 0px 0px 2px #8882;
    }

        .element-box.utility:hover {
            box-shadow: inset 0px 0px 0px 2px #22262A88;
        }

input[type=text], select {
    padding: 4.5px 8px;
    background-color: #22262A88;
    font-family: inherit;
    border: none;
    border-radius: 0.2rem;
    color: inherit;
    transition: background-color 0.1s;
    animation: fadeIn 0.3s;
}

input[type=text] {
    cursor: text;
    font-family: Source Code Pro;
}

    input[type=text]:enabled:hover, select:enabled:hover {
        background-color: #42495188;
    }

    input[type=text]:disabled {
        color: gray;
    }

select:enabled {
    cursor: pointer;
}

select * {
    background-color: #22262A;
}

.textbox {
    padding: 4px 0 4px 8px;
    background-color: #22262A88;
    border-radius: 0.2rem;
    white-space: nowrap;
    min-width: 200px;
    max-width: 800px;
    overflow: hidden;
    transition: 0.1s;
    color: grey;
}

    .textbox:after {
        content: "\00a0";
    }

[contenteditable].textbox {
    color: inherit;
}

    [contenteditable].textbox:hover {
        background-color: #42495188;
    }

    [contenteditable].textbox br {
        display: none;
    }

    [contenteditable].textbox * {
        display: inline;
        white-space: nowrap;
    }

.gbx-icon {
    font-size: 0.8rem;
    padding: 0.18rem 0.3rem;
    display: flex;
    align-items: center;
}

.gbx-icon-tooltip {
    position: absolute;
    bottom: -4rem;
    left: 50%;
    padding: 6px;
    white-space: nowrap;
    border-radius: 0.2rem;
    background: #333E;
    z-index: 99999;
    animation: fadeIn 0.1s;
    max-width: 256px;
    max-height: 256px;
}

.progress-bar {
    width: 300px;
    background: #4442;
    border-radius: 3px;
}

.progress-bar-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--blazor-load-percentage, 0%);
    height: 2rem;
    background: var(--button-blue);
    border-radius: 3px;
}