/*************/
/* Variables */
/*************/

:root {
    --body-bg-color: hsl(210, 20%, 97%);
    --basic-page-bg-color: #f9f9f9;
    --bs-card-bg-color: white;

    --header-border-top-color: hsla(210, 13%, 80%, 0.5);
    --header-border-bottom-color: hsla(210, 13%, 80%, 0.5);
    --header-bg-color: hsl(210, 50%, 96%);
    --header-text-color: hsl(210, 100%, 20%);
    --header-text-muted-color: hsl(210, 15%, 50%);

    --table-header-bg-color: hsl(210, 10%, 97%);
    --table-header-text-color: hsl(0, 0%, 30%);
    --table-detail-1-body-bg-color: hsl(210, 100%, 99%);

    --new-grid-item-bar-bg-color: hsl(215, 40%, 50%);

    --generic-icon-bg-color: black;

    --highlight-color: yellow;

    --docket-progress-bar-bg-color: hsl(216, 95%, 80%);
    --docket-selected-docket-case-bg-color: cornsilk;

    --form-templates-new-toolbar-item-hover-bg-color: lightgrey;
    --form-templates-new-icon-bg-color: #595f65;

    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;

    --popup-edit-body-bg-color: hsl(210, 20%, 97%);
}

/********/
/* Body */
/********/

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--body-bg-color);
    word-break: break-word; /* consider switching to "overflow-wrap: anywhere" in the future */
}

.app-body-bg-color {
    background-color: var(--body-bg-color);
}

/********/
/* Page */
/********/

.app-page {
    padding: 0.75rem 0.75rem 0 0.75rem;
    min-height: calc(100vh - 3.5rem);
}

.app-basic-page-bg-color {
    background-color: var(--basic-page-bg-color);
}

/*********/
/* Modal */
/*********/

@media (min-width: 1100px) {
    .app-modal-lg {
        max-width: 992px;
    }
}

.app-popup-edit-body-bg-color {
    background-color: var(--popup-edit-body-bg-color);
}

/**************/
/* Validation */
/**************/

.validation-message {
    width: fit-content;
    width: -moz-fit-content;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .25rem;
    font-size: .875rem;
    color: #fff;
    background-color: rgba(220,53,69,.9);
    border-radius: .25rem;
}

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

.invalid {
    outline: 1px solid red;
}

/********/
/* Text */
/********/

.app-text-h7 {
    font-size: 0.9rem;
}

.app-text-h8 {
    font-size: 0.8rem;
}

.app-text-h9 {
    font-size: 0.7rem;
}

/*************/
/* Container */
/*************/

.app-mw-md {
    max-width: 768px;
}

.app-mw-lg {
    max-width: 992px;
}

.app-mw-fit-content {
    max-width: fit-content;
}

/********/
/* Misc */
/********/

.app-grid-row:hover {
    background-color: #F8F9FA;
}

.app-header-bg-color {
    background-color: var(--header-bg-color);
}

.app-header-text-color {
    color: var(--header-text-color);
}

.app-header-text-muted-color {
    color: var(--header-text-muted-color);
}

.app-table-detail-1-body-bg-color {
    background-color: var(--table-detail-1-body-bg-color);
}

.app-new-grid-item-bar-bg-color {
    background-color: var(--new-grid-item-bar-bg-color);
}

.app-visibility-collapse {
    visibility: collapse;
}

.app-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/*********/
/* Icons */
/*********/

.app-icon {
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    display: inline-block;
    width: 1.0rem;
    height: 1.0rem;
    background-color: black;
    vertical-align: middle;
}

.app-data-display-icon {
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background-color: hsl(215, 40%, 50%);
    vertical-align: middle;
    flex-shrink: 0;
}

.app-display-icon-filler {
    width: 1.3rem;
    height: 1.3rem;
}

.app-generic-icon {
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background-color: var(--generic-icon-bg-color);
    vertical-align: middle;
}

.app-toolbar-icon {
    display: inline-block;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    width: 1.3rem;
    height: 1.3rem;
}

.app-button-icon {
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background-color: white;
    vertical-align: top;
}

/*******************/
/* Unhandled Error */
/*******************/

#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;
}

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