@import 'AnsiDrawTogether.Client.vg1u38ycbw.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ouw50eeq2n.bundle.scp.css';

/* _content/AnsiDrawTogether/Components/App.razor.rz.scp.css */
[b-5c2h4b1waw] fluent-radio::part(control),
[b-5c2h4b1waw] fluent-dialog::part(control) {
    outline: none;
}
[b-5c2h4b1waw] fluent-dialog::part(control) {
    border-radius: 3px;
    background-color: #212529;
    border-color: palegoldenrod;
}

[b-5c2h4b1waw] fluent-button::part(control) {
    padding: 0px 4px 0px 4px;
    font-weight: bold;
    color: #333;
    background: padding-box linear-gradient(#97BABC, #97BABC), border-box #97BABC;
}

[b-5c2h4b1waw] fluent-tooltip::part(tooltip),
[b-5c2h4b1waw] fluent-tooltip::part(tooltip):after {
    background-color: aliceblue;
    border-color: palegoldenrod;
}
/* _content/AnsiDrawTogether/Components/Layout/MainLayout.razor.rz.scp.css */
@property --top-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 35px;
}

main[b-ciarhm872g] {
    flex: 1;
    background-color: lightsteelblue;
    overflow-x: hidden;
    overflow-y: hidden;
}

[b-ciarhm872g] ul {
    padding-inline-start: 20px;
    list-style: decimal;
    color: gainsboro;
}

.page[b-ciarhm872g] {
    position: relative;
    display: flex;
    min-height: 100vh;
}

[b-ciarhm872g] .prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#title[b-ciarhm872g] {
    margin: 0;
    color: aliceblue;
}

[b-ciarhm872g] #about {
    background: none !important;
    border: none;
    padding: 0 !important;
    color: lightblue;
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
    margin-left: 15px;
}

[b-ciarhm872g] #resize-detect {
    height: calc(100vh - var(--top-height));
    overflow: auto;
}

[b-ciarhm872g] .hide-scrollbar {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}
    [b-ciarhm872g] .hide-scrollbar::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

[b-ciarhm872g] #l-tool {
    flex: 270px 0 0;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
    [b-ciarhm872g] #l-tool > fluent-accordion {
        width: 100%;
        row-gap: 0;
    }
        [b-ciarhm872g] #l-tool > fluent-accordion > fluent-accordion-item {
            border-radius: 0;
        }
            [b-ciarhm872g] #l-tool > fluent-accordion > fluent-accordion-item::part(heading) {
                --design-unit: 2;
                background-color: lavender;
            }
    [b-ciarhm872g] #l-tool #refImgs::part(region) {
        padding: 0;
    }
    [b-ciarhm872g] #l-tool #glyph-input {
        height: 40px;
        padding: 0px;
        margin-top: 10px;
        align-content: center;
    }

[b-ciarhm872g] #m-region {
    width: 100%;
    flex: 320px 1 1;
}

[b-ciarhm872g] #r-chat {
    height: 100%;
    position: relative;
    width: fit-content !important;
}
[b-ciarhm872g] .chat-toggle {
    width: 25px;
    height: 25px;
    padding: 0px;
    position: absolute;
    right: calc(100% - 25px);
    transition: right 0.35s, width 0.5s, background-color 1.5s;
    -webkit-transition: right 0.35s, width 0.5s, background-color 1.5s;
    -ms-transition: right 0.35s, width 0.5s, background-color 1.5s;
    top: 0;
    text-align: center;
    border-radius: 2px;
    background-color: #97BABC;
    color: aliceblue;
    font-weight: 900;
}
    [b-ciarhm872g] .chat-toggle.closed {
        width: 50px;
        right: -51px;
        transition: none;
        -webkit-transition: none;
        -ms-transition: none;
        margin: 1px;
        rotate: 180deg;
        background-color: #979A9C;
    }

[b-ciarhm872g] #chat-container {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100%;
    position: relative;
}
    [b-ciarhm872g] #chat-container.closed {
        visibility: collapse !important;
        width: 0px !important;
    }
    [b-ciarhm872g] #chat-container .fluent-card-minimal-style {
        border-radius: 0;
    }
    [b-ciarhm872g] #chat-container > #chat-input,
    [b-ciarhm872g] #chat-container > #chat-header {
        background-color: lavender;
        padding: 3px;
    }
    [b-ciarhm872g] #chat-container > #chat-header {
        height: 25px;
        align-content: center;
    }
    [b-ciarhm872g] #chat-container > #chat-content {
        padding: 0px;
        height: calc(100vh - 125px - var(--top-height));
    }
        [b-ciarhm872g] #chat-container > #chat-content > #chat-list {
            overflow-y: scroll;
            height: var(--card-height, 100%);
        }
            [b-ciarhm872g] #chat-container > #chat-content > #chat-list ul {
                list-style-type: none;
                padding-left: 0;
                width: 100%;
                margin: 0;
                font-size: 14px;
                color: #382A40;
            }
                [b-ciarhm872g] #chat-container > #chat-content > #chat-list ul li > span {
                    font-weight: bold;
                }
                [b-ciarhm872g] #chat-container > #chat-content > #chat-list ul li.rect-msg {
                    background-color: mistyrose;
                }
    [b-ciarhm872g] #chat-container > #chat-input {
        height: 100px;
    }
        [b-ciarhm872g] #chat-container > #chat-input fluent-button::part(control) {
            background-color: #97BABC;
            width: 80%;
        }
        [b-ciarhm872g] #chat-container > #chat-input fluent-text-field::part(root) {
            height: 20px;
        }

[b-ciarhm872g] #r-tool {
    flex: 50px 0 0;
    height: 100%;
}
    [b-ciarhm872g] #r-tool > #glyph-list-btn {
        width: 45px;
        height: fit-content;
        position: fixed;
        right: 0;
        top: calc(50vh - 100px);
        background: padding-box linear-gradient(45deg, #9884C1, #8894D1);
        display: flex;
        flex-flow: column;
        border-radius: 8px 0px 0px 8px;
    }
        [b-ciarhm872g] #r-tool > #glyph-list-btn > #glyph-btn-v-label {
            align-content: center;
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-weight: bolder;
            padding: 20px 0px 20px 0px;
            color: #382D7B;
        }

[b-ciarhm872g] #brush-container {
    overflow: hidden;
}
[b-ciarhm872g] #brush-container.half {
    width: 32px !important;
}
[b-ciarhm872g] .colorBox {
    border: solid;
    border-width: 2px;
    border-color: #000000;
    height: 64px;
    width: 64px;
}

.top-row[b-ciarhm872g] {
    background-color: #6884C1;
    justify-content: flex-end;
    height: var(--top-height);
    display: flex;
    align-items: center;
    justify-content: center;
}
    .top-row[b-ciarhm872g]  a, .top-row[b-ciarhm872g]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        color: #F2F8EF;
        font-size: x-large;
    }
    .top-row[b-ciarhm872g]  a:hover, .top-row[b-ciarhm872g]  .btn-link:hover {
        text-decoration: underline;
    }
    .top-row[b-ciarhm872g]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ciarhm872g] {
        justify-content: space-between;
    }

    .top-row[b-ciarhm872g]  a, .top-row[b-ciarhm872g]  .btn-link {
        margin-left: 0;
    }

    [b-ciarhm872g] #left-control {
        flex: 200px 0 0;
    }
    [b-ciarhm872g] #chat-container {
        width: 200px;
    }
}

@media (min-width: 641px) {
    .page[b-ciarhm872g] {
        flex-direction: row;
    }

    .sidebar[b-ciarhm872g] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ciarhm872g] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ciarhm872g]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ciarhm872g] { /*, article {*/
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    [b-ciarhm872g] #left-control {
        flex: 250px 0 0;
    }
    [b-ciarhm872g] #chat-container {
        width: 230px;
    }
}
@media (min-width: 1024px) {
    [b-ciarhm872g] #left-control {
        flex: 300px 0 0;
    }

    [b-ciarhm872g] #chat-container {
        width: 270px;
    }
}

#blazor-error-ui[b-ciarhm872g] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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