*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Nunito', 'Roboto', 'Helvetica Neue', serif;
    font-weight: 300;
    color: #0f0f0f;
    margin: 0px;
    height: 100vh;
    width: 100vw;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1 {
    line-height: 1.8rem;
}

.clickable-text {
    color: var(--se-secondary);
    font-weight: 400;
    cursor: pointer;
}

/* Main Layout Container */
.main-container {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.main-container .row.appbar {
    flex: 0 0 auto;
    height: 64px
}

.main-container .row.tabbar {
    flex: 0 0 auto;
}

.main-container .row.content {
    flex: 1 1 auto;
    overflow-y: auto;
    background-color: var(--mdc-theme-background, #f7f7f7);
}

.plugin-container {
    height: 100%;
    overflow: auto; /* Needed to prevent margin collapsing*/
}

/* overriding MatBlazor font*/
.mat, .mdc-top-app-bar__title, .mdc-dialog__title, .mdc-dialog__content, .mdc-tab, .mdc-form-field, .mdc-text-field__input, .mdc-list, .mat-tooltip {
    font-family: 'Nunito', 'Roboto', 'Helvetica Neue', serif;
}

* {
    --mdc-typography-font-family: 'Nunito', 'Roboto', 'Helvetica Neue', serif;
    --mdc-typography-button-font-family: 'Nunito', 'Roboto', 'Helvetica Neue', serif;
    --mdc-typography-button-text-transform: none;
    --mdc-typography-button-font-size: 15px;
    --mdc-typography-button-letter-spacing: normal;
}

a {
    color: inherit;
    text-decoration: inherit;
}

/* Material Icons Sizeing*/
/* Rules for sizing the icon. */
.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Context menu icon color */
.material-icons.contextcolor {
    color: var(--se-anthracite-gray);
}

/* Context menu scroll on overflow */
.scrollable-context-menu {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 90vh;
}


/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}

.material-icons.md-white-bg {
    position: relative;
    z-index: 1;
}

.material-icons.md-white-bg::after {
    position: absolute;
    content: '';
    background: #fff;
    z-index: -1;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 50%;
}

/* MatBlazor Fixes */
.mdc-top-app-bar {
    color: var(--mdc-theme-on-primary, rgba(0, 0, 0, 0.87)); /* fix to use theme color*/
}

.mdc-drawer:focus, .mdc-drawer__content:focus {
    outline: none; /* remove blue outlining */
}

.mdc-dialog {
    z-index: 1000; /* fix to place above other things (blazor context menu is at 1000) */
}

.mdc-dialog .mdc-dialog__title {
    color: var(--mdc-theme-on-primary, rgba(0, 0, 0, 0.87)); /* fix to use theme color */
    background-color: var(--mdc-theme-primary, rgba(255, 255, 255, 1)); /*fix to use theme color*/
    margin-bottom: 16px; /* Add back some margin to bottom since the bg color makes this a title bar */
}

.mdc-text-field--focused:not(mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-secondary, rgba(98, 0, 238, 0.87)) !important; /* fix to use theme color on focused text field*/
}

.mdc-select--with-leading-icon:not(.mdc-select--disabled) .mdc-select__icon {
    color: rgba(0, 0, 0, 0.87);
}

.mdc-dialog .mdc-dialog__content {
    color: rgba(0, 0, 0, 1.0);
}

.mdc-form-field {
    color: var(--mdc-theme-on-surface, rgba(0, 0, 0, 0.87)); /* fix to use theme color*/
}

.mdc-icon-button {
    /* The ripple of these buttons sometimes, somehow gets the wrong sizes, lets hard-code it til it's fixed*/
    --mdc-ripple-fg-size: 28px !important;
    --mdc-ripple-fg-scale: 1.71429 !important;
    --mdc-ripple-left: 10px !important;
    --mdc-ripple-top: 10px !important;
}

.mdc-button--dense {
    /* The dense code seems missing in matblazor 2.8.0 */
    padding: 0 8px;
    min-width: 36px;
}

.mat-tooltip {
    background-color: var(--se-dark-sky-blue);
    font-weight: normal;
    font-size: 11px;
    line-height: normal;
}

.mat-toast-info {
    background-color: var(--se-information);
}

.mat-toast-dark {
    background-color: var(--se-standard);
}

.mdc-ripple-surface[disabled] {
    pointer-events: none;
}

.mdc-menu-surface {
    z-index: 1000; /* fix to place dropdowns at same level as modals so they are visible in modals */
}

.mat-accordion .mat-expansion-panel__header {
    min-width: 90%; /* fix to size text field for ellipsis and keep down arrow aligned */
}

.mat-accordion .mat-expansion-panel.mat-expansion-panel--expanded {
    margin-top: 0; /* fix to place expand and retract buttons in the same position */
}

.mat-toast-container > div.toast-l {
    width: 50vw;
    min-width: 400px;
    max-width: 600px;
}

.mat-toast-container > div.toast-xl {
    width: 75vw;
    min-width: 800px;
    max-width: 1200px;
}

.mat-toast-container.toast-top-padding {
    padding-top: 70px;
}

.mat-toast.toast-pre {
    white-space: pre-wrap;
}

.mat-toast-top-right, .mat-toast-bottom-right {
    align-items: end;
}

/* /MatBlazor Fixes */

/*------------------- SEAL classes -------------------*/

/* Modal adds */
.modal-title-sm {
    padding: 6px 24px 3px 24px;
}

.modal-title-sm::before {
    content: none; /* Removes mat blazor empty space */
}

.modal-close-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.modal-dialog-buttons {
}

.modal-dialog-buttons .ok-button:disabled {
    margin-left: 5px;
}

.modal-dialog-buttons .ok-button:enabled {
    color: var(--mdc-theme-on-secondary, #fff);
    background-color: var(--mdc-theme-secondary, #6200ee);
    margin-left: 5px;
}

.modal-dialog-buttons .close-button:enabled {
    color: var(--mdc-theme-on-surface-background, #000);
    background-color: #f0f0f0;
    margin-left: 5px;
}

.modal-dialog-buttons-gap {
    gap: 0.5rem;
}

/* Ebo Connector */
.eboconnector {
    cursor: pointer;
    height: 100%;
    width: 300px;
    background-color: var(--mdc-theme-background, "#f7f7f7");
    color: #0f0f0f;
}

.eboconnector-icon {
    float: left;
    padding: 10px 0;
    margin-left: 10px;
    margin-right: 10px;
}

.eboconnector-label {
    text-transform: none;
    font-size: 14px;
    padding: 15px 0;
    margin-left: 10px;
}

.eboconnector-label .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /Ebo Connector */


/* LoginDisplay */

.topbar-user-button.mdc-icon-button {
    padding: 6.5px; /* Allow for 36px icon */
}

.topbar-user-icon {
    font-size: 36px;
}

.topbar-user-icon.signed-out {
    color: #cbcbcb;
}

.topbar-user-icon.signed-in {
}

.topbar-user-menu {
    margin-top: 60px;
    margin-right: 40px;
}

.topbar-user-menu-icon {
    margin-right: 5px;
}

/* /LoginDisplay */

/* Utilities libView DetailsModal */

.util-lib-dialog-text {
    font-size: 13px;
    line-height: 1.2rem;
}

.util-lib-dialog-textfield {
    font-family: inherit;
    font-size: inherit;
    min-height: 300px;
    min-width: 500px;
    background-color: #f0f0f0;
    border: none;
    overflow: auto;
    outline: none;
    resize: none;
    margin-top: 10px
}

/* /Utilities LibView */

#blazor-error-ui {
    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;
    box-sizing: border-box;
}

#blazor-error-ui .reload {
    text-decoration: underline;
    color: var(--se-secondary);
}

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

/* SEAL Modals */

.seal-modal-surface-sm {
    width: calc(100vw - 32px) !important;
    max-width: 576px !important;
}

.seal-modal-surface-md {
    width: calc(100vw - 32px) !important;
    max-width: 768px !important;
}

.seal-modal-surface-lg {
    width: calc(100vw - 32px) !important;
    max-width: 992px !important;
}

.seal-modal-surface-xl {
    width: calc(100vw - 32px) !important;
    max-width: 1200px !important;
}

.seal-modal-surface-xxl {
    width: calc(100vw - 32px) !important;
    max-width: 1400px !important;
}

.seal-modal-surface-100vw {
    max-width: calc(100vw - 32px) !important;
}

.vh-80 {
    height: 80vh !important;
}

.line-height-3 {
    line-height: 1rem;
}

.scrollbar-gutter-stable {
    scrollbar-gutter: stable;
}

/* Recent files */

.recent {
    width: 21rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--se-super-light-gray);
}

.recent-header {
    padding: 2rem 1rem;
    font-size: 1.5rem;
}

.recent-files {
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.recent-file {
    display: grid;
    column-gap: 0.5rem;
    justify-content: start;
    grid-template-areas:
        "icon name"
        "icon time";
    text-align: start;
    background-color: inherit;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

    .recent-file:hover {
        background-color: var(--se-background-standard);
    }

.recent-file-icon {
    grid-area: icon;
    color: var(--se-dark-grey-gray);
}

.recent-file-name {
    grid-area: name;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.recent-file-time {
    grid-area: time;
    font-size: 12px;
    color: var(--se-medium-gray);
}


/* Plugin index pages "get started" */

.get-started-layout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    background-color: #FFF;
}

.getstarted {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: var(--se-spacing-large);
    height: 100%;
}

.getstarted .button {
    max-width: 100%;
    width: 500px;
    padding: var(--se-spacing-large);
    font-size: 18px;
    font-family: inherit;
    font-weight: 400;
    text-align: initial;
    user-select: none;
}

    .getstarted .button:not([disabled]) {
        cursor: pointer;
    }

        .getstarted .button:not([disabled]):hover {
            background-color: var(--se-background-standard);
        }

    .getstarted .button > * {
        margin-left: 56px;
    }

    .getstarted .button[disabled] > * {
        color: inherit !important;
    }

.getstarted .button-icon {
    position: absolute;
    margin-left: var(--se-spacing-medium);
    color: var(--se-primary);
}

    .getstarted .button-icon .material-icons {
        font-size: 28px !important;
    }

.getstarted .button-subtext {
    font-weight: 300;
    font-size: smaller;
    color: var(--se-standard);
}

.getstarted .input-subtext {
    font-weight: 300;
    font-size: smaller;
    color: var(--se-standard);
    margin-left: 56px;
}